/*영역*/
#mf_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);
}
/*타이틀*/
#mf-header {
  font-family: 'Gasoek+One', sans-serif;
  font-weight: 800px;
  font-size: 70px;
  color: #ffffff;
  margin-top: 10px;
  margin-bottom: 40px;
  text-align: center;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
}
/*선택-라벨*/
#mf-mastery-name,
#mf-pb-name,
#processing-label,
#processing-itemN {
  font-size: 24px;
  color: #3b8f42;
  width: 60%;
  text-align: center;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
  margin-bottom: 10px;
}
/*인풋박스*/
#mf-mastery,
#mf-pb {
  font-size: 24px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #000000;
  background-color: #5f5e5e;
  padding: 6px;
  color: #ffffff;
  text-align: center;
  text-align-last: center;
  margin-bottom: 10px;
}
/*드랍다운*/
#manufacture,
#mf-item {
  font-size: 24px;
  border-radius: 5px;
  width: 107%;
  border: 1px solid #000000;
  background-color: #5f5e5e;
  padding: 6px;
  color: #ffffff;
  text-align: center;
  text-align-last: center;
  margin-bottom: 10px;
}
/*가공정보-라벨*/
#up-item,
#uup-item,
#mf-time-name,
#mf-qty-name {
  color: #2ebdac;
  font-size: 24px;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
/*가공정보-데이터*/
#up-item-name,
#uup-item-name,
#mf-time,
#mf-qty {
  color: #2ebdac;
  font-size: 24px;
  width: 130%;
  text-align: center;
  margin-bottom: 10px;  
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
/*결과-라벨*/
#mf-time-qty-name,
#mf-item-materials-name,
#mf-item-up-name,
#mf-item-uup-name {
  color: #bdb12e;
  font-size: 24px;
  width: 90%;
  margin-bottom: 10px;
  text-align: center;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
/*결과-데이터*/
#mf-time-qty,
#mf-item-materials,
#mf-item-up,
#mf-item-uup {
  color: #bdb12e;
  font-size: 24px;
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
/* ✅ 체크박스 컨테이너 스타일 */
.styled-checkbox-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 10px;
  margin-bottom: 5px;
  background: #161616;
  color: #ffffff;
  border-radius: 5px;
  align-items: center;
}
/* ✅ 체크박스 스타일 */
.styled-checkbox-container input[type='checkbox'] {
  transform: scale(1.2);
  margin-right: 5px;
}
.styled-checkbox-container label {
  font-size: 20px;
  background: #143103;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #ffffff;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
  justify-content: left;
}

/* ✅ 결과 표시 스타일 */
.mf-results-container {
  display: flex;
  flex-wrap: wrap; /* 너비가 줄어들면 자동 줄바꿈 */
  justify-content: space-between; /* 요소 간격 균등 배치 */
  align-items: center;
  gap: 15px; /* 각 항목 사이 간격 */
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.mf-results-container h1 {
  font-family: 'Gasoek+One', sans-serif;
  font-weight: 800;
  font-size: 18px;
  padding: 10px;
  border-radius: 50px;
  background-color: #333333;
  color: #00b3ff;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
  flex: 1; /* 요소들이 균등한 너비 차지 */
  min-width: 300px; /* 너무 좁아지는 걸 방지 */
  text-align: center;
  white-space: nowrap; /* 숫자와 텍스트가 깨지지 않도록 */
}

.mf-results-container1 {
  display: flex;
  flex-wrap: wrap; /* 너비가 줄어들면 자동 줄바꿈 */
  justify-content: space-between; /* 요소 간격 균등 배치 */
  align-items: center;
  gap: 15px; /* 각 항목 사이 간격 */
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.mf-results-container1 h1 {
  font-family: 'Gasoek+One', sans-serif;
  font-weight: 800;
  font-size: 18px;
  padding: 10px;
  border-radius: 50px;
  background-color: #333333;
  color: #5be809;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
  flex: 1; /* 요소들이 균등한 너비 차지 */
  min-width: 300px; /* 너무 좁아지는 걸 방지 */
  text-align: center;
  white-space: nowrap; /* 숫자와 텍스트가 깨지지 않도록 */
}
.table-container {
  display: flex; /* ✅ 가로 정렬 */
  justify-content: center;
  align-items: flex-start; /* ✅ 위쪽 정렬 */
  gap: 70px; /* ✅ 표 간 간격 */
  flex-wrap: wrap; /* ✅ 화면이 좁으면 다음 줄로 넘어감 */
}
#table-wrapper h2 {
  text-align: center;
  color: #ffffff; 
}

table {
  width: 32%; /* ✅ 3개가 한 줄에 배치되도록 설정 */
  min-width: 300px; /* ✅ 표가 너무 작아지는 걸 방지 */
  border-collapse: collapse;
  
}

th,
td {
  text-align: center; /* ✅ 셀 내부 텍스트 가운데 정렬 */
  padding: 10px;
  border: 1px solid #ddd;
  color: #ffffff;
}

th {
  background-color: black;
  color: white;
  font-weight: bold;
  text-align: center; /* ✅ 기본적으로 가운데 정렬 */
  vertical-align: middle; /* ✅ 세로 정렬도 가운데 */
}

/*라벨+인풋+드랍 라인*/
.row1,
.row2 {
  display: grid;
  grid-template-columns: repeat(8, minmax(100px, 1fr)); /* ✅ 기본적으로 4개씩 정렬 */
  place-items: center;
  margin-bottom: 10px;
  justify-content: center;
}
.row3 {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr)); /* ✅ 기본적으로 4개씩 정렬 */
  place-items: center;
  margin-bottom: 10px;
  justify-content: center;
}

@media screen and (max-width: 1280px) {
  #mf_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;
  }
  .row1,
  .row2,
  .row3 {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr)); /* ✅ 기본적으로 4개씩 정렬 */
    gap: 15px;
    margin-bottom: 10px;
    justify-content: center;
  }
}
@media screen and (max-width: 960px) {
  #mf_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);
  }
  .row1,
  .row2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr)); /* ✅ 기본적으로 4개씩 정렬 */
    gap: 15px;
    margin-bottom: 10px;
    justify-content: center;
  }
  .row3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr)); /* ✅ 기본적으로 4개씩 정렬 */
    gap: 15px;
    margin-bottom: 10px;
    justify-content: center;
  }
}
@media screen and (max-width: 640px) {
  #mf-header {
    font-family: 'Gasoek+One', sans-serif;
    font-weight: 800px;
    font-size: 35px;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 40px;
    text-align: center;
    text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
  }
  #mf_calculator {
    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);
  }
  /*가공정보-라벨*/
#up-item,
#uup-item,
#mf-time-name,
#mf-qty-name { 
  font-size: 20px;  
}
/*가공정보-데이터*/
#up-item-name,
#uup-item-name,
#mf-time,
#mf-qty {  
  font-size: 20px;  
}
  .row1,
  .row2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr)); /* ✅ 기본적으로 4개씩 정렬 */
    gap: 15px;
    margin-bottom: 10px;
    justify-content: center;
  } 
  .row3 {
    display: grid;
    grid-template-columns: repeat(1, minmax(100px, 1fr)); /* ✅ 기본적으로 4개씩 정렬 */
    gap: 15px;
    margin-bottom: 10px;
    justify-content: center;
  }
  .mf-results-container h1 {   
    font-size: 18px;   
    min-width: 200px; /* 너무 좁아지는 걸 방지 */
   
  }
  .mf-results-container1 h1 {    
    font-size: 18px;    
    min-width: 200px; /* 너무 좁아지는 걸 방지 */
    white-space: wrap;
  }
}