/*영역*/
.ckaltb {
  text-align: center;
  align-items: center;
  width: 95%;
  max-width: 1280px;
  margin: 30px auto;
  padding: 20px;
  background-color: rgb(42, 42, 42);
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
/*제목*/
#trade-table-title,
#trade-table-title-alch {
  text-align: center; /* ✅ 제목 가운데 정렬 */
  font-size: 80px; /* ✅ 글씨 크기 증가 */
  font-weight: 900;
  color: #ffffff;
  margin: 20px 0; /* ✅ 위아래 여백 추가 */
  text-shadow: -1px -1px 0 rgb(85, 84, 84), 1px -1px 0 rgb(85, 84, 84), -1px 1px 0 rgb(85, 84, 84),
    1px 1px 0 rgb(85, 84, 84);
}
/*입력라인*/
#ckalmygp {
  display: grid;
  grid-template-columns: repeat(8, minmax(100px, 1fr));
  margin-left: 6%;
  font-size: 18px;
  width: 80%;
}
/*숙련도*/
#ckalmylb {
  color: #ffffff;
  font-size: 18px;
}
/*숙련도 입력*/
#cookalch-mystery {
  background-color: #818181;
  color: #ffffff;
  font-size: 18px;
  margin-left: 8px;
  text-align: center;
}
/*체크박스 라인*/
#n1,
#n2,
#n3,
#n4,
#n5,
#n6 {
  color: #ffffff;
  font-size: 18px;
  margin-left: 10px;
  padding: 1.5px;
  padding-right: 10px;
  padding-bottom: 5px;
}
#n1 {
  background-color: rgb(2, 123, 0);
}
#n2 {
  background-color: rgb(4, 0, 248);
}
#n3 {
  background-color: rgb(147, 142, 0);
}
#n4 {
  background-color: rgb(107, 17, 2);
}
#n5 {
  background-color: rgb(89, 0, 137);
}
#n6 {
  background-color: rgb(104, 38, 0);
}
/* ✅ 황납 표에만 적용되는 스타일 */
#trade-table,
#trade-table-alch {
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto; /* ✅ 중앙 정렬 */
  text-align: center; /* ✅ 모든 텍스트 중앙 정렬 */
}

#trade-table th,
#trade-table-alch th,
#trade-table td,
#trade-table-alch td {
  border: 1px solid #898989; /* ✅ 테두리 추가 */
  color: #ffffff;
  background-color: #1e1e1e;
  padding: 10px; /* ✅ 셀 내부 여백 추가 */
  text-align: center; /* ✅ 텍스트 중앙 정렬 */
  vertical-align: middle; /* ✅ 수직 중앙 정렬 */
}

#trade-table th,
#trade-table-alch th {
  background-color: #f06448; /* ✅ 헤더 배경색 추가 */
  color: #000;
  font-size: 30px;
  font-weight: bold;
}

@media screen and (max-width: 1280px) {
  #ckalmygp {
    display: grid;
    grid-template-columns: repeat(8, minmax(100px, 1fr));
    margin-left: 3%;
    font-size: 18px;
    width: 70%;
  }
}
@media screen and (max-width: 960px) {
  .ckaltb {
    text-align: center;
    align-items: center;
    width: 90%;
    max-width: 1280px;
    margin: 30px auto;
    padding: 20px;
    background-color: rgb(42, 42, 42);
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }
  #ckalmygp {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    margin-left: 6%;
    font-size: 18px;
    width: 80%;
  }
  #ckalmylb,
  #cookalch-mystery,
  #n1,
  #n2 {
    margin-bottom: 10px;
  }
  #trade-table th,
  #trade-table-alch th,
  #trade-table td,
  #trade-table-alch td {
    border: 1px solid #898989; /* ✅ 테두리 추가 */
    color: #ffffff;
    font-size: 14px;
    background-color: #1e1e1e;
    padding: 10px; /* ✅ 셀 내부 여백 추가 */
    text-align: center; /* ✅ 텍스트 중앙 정렬 */
    vertical-align: middle; /* ✅ 수직 중앙 정렬 */
  }
  #trade-table th,
  #trade-table-alch th {
    background-color: #f06448; /* ✅ 헤더 배경색 추가 */
    color: #000;
    font-size: 15px;
    font-weight: bold;
  }
}
@media screen and (max-width: 640px) {
  .ckaltb {
    text-align: center;
    align-items: center;
    width: 85%;
    max-width: 1280px;
    margin: 30px auto;
    padding: 20px;
    background-color: rgb(42, 42, 42);
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }
  #trade-table-title,
  #trade-table-title-alch {
    text-align: center; /* ✅ 제목 가운데 정렬 */
    font-size: 45px; /* ✅ 글씨 크기 증가 */
    font-weight: 900;
    color: #ffffff;
    margin: 20px 0; /* ✅ 위아래 여백 추가 */
    text-shadow: -1px -1px 0 rgb(85, 84, 84), 1px -1px 0 rgb(85, 84, 84), -1px 1px 0 rgb(85, 84, 84),
      1px 1px 0 rgb(85, 84, 84);
  }
  #ckalmygp {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    margin-left: 6%;
    font-size: 18px;
    width: 80%;
  }
  #ckalmylb,
  #cookalch-mystery,
  #n1,
  #n2,
  #n3,
  #n4,
  #n5,
  #n6 {
    margin-bottom: 10px;
  }  
  #trade-table th,
  #trade-table-alch th,
  #trade-table td,
  #trade-table-alch td {
    border: 1px solid #898989; /* ✅ 테두리 추가 */
    color: #ffffff;
    font-size: 9px;
    background-color: #1e1e1e;
    padding: 10px; /* ✅ 셀 내부 여백 추가 */
    text-align: center; /* ✅ 텍스트 중앙 정렬 */
    vertical-align: middle; /* ✅ 수직 중앙 정렬 */
  }
  #trade-table th,
  #trade-table-alch th {
    background-color: #f06448; /* ✅ 헤더 배경색 추가 */
    color: #000;
    font-size: 11px;
    font-weight: bold;
  }
}