/* ==========================
   ✅ 숙련도 계산기 스타일 (레이아웃 유지)
   ========================== */
/* 타이틀 */
#calculator h2 {
  font-family: 'Gasoek+One', sans-serif;
  font-size: 70px;
  margin-top: 10px;
  margin-bottom: 40px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
}
/* 영역 */
#calculator {
  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);
}
/* ==========================
   ✅ 행 스타일 (라벨과 입력칸 묶음)
   ========================== */
.row {
  display: grid;
  grid-template-columns: repeat(8, minmax(100px, 1fr)); /* ✅ 기본적으로 4개씩 정렬 */
  gap: 15px;
  margin-bottom: 10px;
  min-width: 100%;
  align-items: stretch;
}
.row-3 {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr)); /* ✅ 기본적으로 3개씩 정렬 */
  gap: 15px;
  margin-bottom: 10px;
  min-width: 100%;
  align-items: stretch;
}
/*#region 라벨+드랍다운*/
.type1, .type2 {
  font-size: 24px;
  color: #569c23;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
#life-grade, #life-level, #relic, #lightstone {
  font-size: 24px;
  background-color: #569c23;
  text-align: center;
  color:#ffffff;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

.type3, .type4 {
  font-size: 24px;
  color: #ef4949;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
#equipment-grade, #equipment-enhance, #tool-grade, #tool-enhance{
    font-size: 24px;
    background-color: #ef4949;
    text-align: center; 
    color:#ffffff;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
.type5, .type6 {
  font-size: 24px;
  color: #3c60d5;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
#necklace-grade, #necklace-enhance, #belt-grade, #belt-enhance{
    font-size: 24px;
    background-color: #3c60d5;
    text-align: center;
    color:#ffffff;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; 
}
.type7, .type8 {
  font-size: 24px;
  color: #a82dd5;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
#ring1-grade, #ring1-enhance, #ring2-grade, #ring2-enhance{
    font-size: 24px;
    background-color: #a82dd5;
    text-align: center; 
    color:#ffffff;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
.type9, .type10 {
  font-size: 24px;
  color: #d2bf2e;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
#earring1-grade, #earring1-enhance, #earring2-grade, #earring2-enhance{
    font-size: 24px;
    background-color: #d2bf2e;
    text-align: center; 
    color:#ffffff;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
.type11, .type12 {
  font-size: 24px;
  color: #ffffff;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
#alchemy-stone, #food, #gem, #elixir, #special-food, #furniture{
    font-size: 24px;
    background-color: #ffffff;
    text-align: center;     
}
/*#endregion*/

/* ==========================
     ✅ 체크박스 스타일
     ========================== */
.checkbox-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* ✅ 체크박스 5개씩 정렬 */
  gap: 10px;
  margin-top: 20px;
  min-width: 100%;
  align-items: stretch;
}
.checkbox-container label {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  background: #143103;
  color: #ffffff;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
  justify-content: left;
}

/* ==========================
     ✅ 숙련도 결과 스타일
     ========================== */
#result {
  font-family: 'Gasoek+One', sans-serif;
  margin-top: 60px;
  font-size: 80px;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  text-shadow: -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black, 3px 3px 0 black;
}

/* ==========================
   ✅ 반응형 미디어 쿼리 적용
   ========================== */
/* ✅  4묶음 → 2묶음 */
@media screen and (max-width: 1280px) {
  .row {
    grid-template-columns: repeat(4, minmax(100px, 1fr)); /* ✅ 2묶음씩 정렬 */
  }

  .row-3 {
    grid-template-columns: repeat(4, minmax(100px, 1fr)); /* ✅ 2묶음, 1묶음 */
  }

  .checkbox-container {
    grid-template-columns: repeat(3, 1fr); /* ✅ 3개씩 정렬 */
  }
  #calculator {
    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);
    text-align: center;
  }
}

/* ✅ 2묶음 → 1묶음 */
@media screen and (max-width: 960px) {
  #calculator {
    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);
   
  }
  .row {
    grid-template-columns: repeat(2, minmax(100px, 1fr)); /* ✅ 1묶음씩 */
  }
  .row-3 {
    grid-template-columns: repeat(2, minmax(100px, 1fr)); /* ✅ 1묶음씩 */
  }
  .checkbox-container {
    grid-template-columns: repeat(2, 1fr); /* ✅ 2개씩 정렬 */
  }
  #result {
    font-family: 'Gasoek+One', sans-serif;
    margin-top: 60px;
    font-size: 50px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    text-shadow: -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black, 3px 3px 0 black;
  }
}

/* ✅  */
@media screen and (max-width: 640px) {
  #calculator h2 {
    font-family: 'Gasoek+One', sans-serif;
    font-size: 45px;
    margin-top: 10px;
    margin-bottom: 40px;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
    text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
  }
  #calculator {
    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);
    
  }
  .checkbox-container {
    grid-template-columns: repeat(1, minmax(100px, 1fr)); /* ✅ 체크박스도 1개씩 정렬 */
  }
  .checkbox-container label {
    font-size: 16px;
  }
  #result {
    font-family: 'Gasoek+One', sans-serif;
    margin-top: 60px;
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    text-shadow: -1px -1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0);
  }
}