/* 기존 스타일 그대로 사용 */
html {
  font-size: 17px;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;
  margin:0;
  padding:0;
  font-size: 1rem;
}
.section-66{background:linear-gradient(135deg,#2d8f8c 0%,#3fa9a9 30%,#66cccc 75%,#f7fffe 100%);}
.wrap{max-width:1100px;margin:10px auto;padding:0 16px;}
.program-info{background:#fff;border-radius:12px;padding:18px 20px;box-shadow:0 3px 12px rgba(0,0,0,0.08);margin-bottom:20px;}
.program-title{font-size:20px;font-weight:700;margin-bottom:6px;}
.program-meta{font-size:13px;color:#666;}
.layout{display:flex;gap:20px;}
.left-panel,.right-panel{background:#fff;border-radius:12px;padding:18px 20px;box-shadow:0 3px 12px rgba(0,0,0,0.08);}
.left-panel{flex:1.2;}
.right-panel{flex:0.8;}
.section-title{font-size:16px;font-weight:600;margin-bottom:10px;}
.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.calendar-header button{padding:4px 8px;font-size:11px;}
#monthYear{font-weight:600;}
#calendar table{width:100%;border-collapse:collapse;}
#calendar th,#calendar td{border:1px solid #e0e0e0;padding:6px 4px;font-size:12px;text-align:center;vertical-align:top;}
#calendar th{background:#f7f9fb;}
#calendar td.today{background:#fff0c2;}
#calendar td{cursor:default;}

.btn-state{
  display:inline-block;
  width:100%;
  margin-top:2px;
  padding:5px 5px;
  font-size:11px;
  border-radius:5px;
  border:none;
  cursor:default;
  color:#fff;
  line-height:1.2;
}
.btn-state.open{background:#003366; cursor: pointer;}
.btn-state.closed{background:#888888;}
.btn-state.blocked{background:#fff;border:1px solid #888;color:#000;}
.btn-state.full{background:#ffa6c1;}
.btn-state[disabled]{cursor:default;opacity:.9;}

.time-table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}
.time-table th,
.time-table td{
  border:1px solid #e0e0e0;
  padding:8px 10px;
  font-size:13px;
}
.time-table th{
  background:#f7f9fb;
}
.time-select-btn{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #2f8f7a;
  background:#fff;
  color:#2f8f7a;
  font-size:12px;
  cursor:pointer;
}
.time-select-btn.selected{
  background:#2f8f7a;
  color:#fff;
}
.form-row{
  display:flex;
  gap:12px;
  margin-bottom:10px;
  margin-left:10px;
}
.form-col{
  flex:1;
  max-width:260px;
}
label{
  display:block;
  font-size:14px;
  margin-bottom:3px;
  font-weight:700;
  color:#003399;
}
label span{
  font-size:13px;
  font-weight:500;
  color:#000;
}
input[type="text"],
input[type="tel"],
input[type="number"],
select{
  width:100%;
  max-width:260px;
  box-sizing:border-box;
  padding:8px;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:13px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}
.notice-box{
  margin-top:12px;
  padding:10px;
  background:#f8fcf9;
  border-radius:8px;
  border:1px solid #e4eee7;
  font-size:12px;
  color:#555;
  line-height:1.6;
}
.notice-box1{
  margin-top:12px;
  padding:10px;
  background:#eee;
  border-radius:8px;
  border:1px solid #e4eee7;
  font-size:12px;
  color:#555;
  line-height:1.6;
}
.notice-box1 strong{
  font-size:14px;
  color:#000;
  line-height:1.6;
}
.btn-row{
  margin-top:16px;
  text-align:center;
}
.btn-primary{
  padding:10px 26px;
  border-radius:5px;
  border:none;
  background:#2f8f7a;
  color:#fff;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
}
.btn-primary:hover{
  background:#256f60;
}
.input_text4{
  width:100%;
  min-height:160px;
  padding:14px;
  border:1px solid #d9e2dc;
  border-radius:14px;
  background:#fcfdfc;
  color:#555;
  font-size:.85em;
  line-height:1.7;
  resize:vertical;
  outline:none;
}

.wrap input[type="number"]{
  width:100%;
  max-width:260px;
  box-sizing:border-box;
  padding:8px;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:13px;
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;
  color:#333;
  background:#fff;
  text-align:left;
}

.stepper-arrow,
.up,
.down{
  display:none;
}

.wrap input[type="number"]::-webkit-outer-spin-button,
.wrap input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.wrap input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}

.category-radio-group label{
  display:inline-block;
  margin-right:10px;
}

.wrap input:disabled{
  background-color:#f0f0f0;
}

/* 예약달력/폼 추가 보강 */
.left-panel #calendar td,
.right-panel #calendar td{
  min-width: 38px;
}

.left-panel #calendar td > div:first-child,
.right-panel #calendar td > div:first-child{
  font-weight:600;
  margin-bottom:2px;
}

.state-wrap{
  margin-top:4px;
}

/* 예약폼 내부 레이아웃 보강 */
#reserveProgramArea .reserve-form-row{
  margin-bottom:10px;
}
#reserveProgramArea .reserve-form-row label{
  display:block;
  margin-bottom:4px;
}
#reserveProgramArea .reserve-form-row input[type="radio"]{
  width:auto;
  max-width:none;
  margin-right:4px;
  vertical-align:middle;
}
#reserveProgramArea .reserve-form-row input[type="checkbox"]{
  width:auto;
  max-width:none;
  margin-right:4px;
  vertical-align:middle;
}

/* 시간표가 들어가는 경우 */
#reserveProgramArea .time-table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}
#reserveProgramArea .time-table th,
#reserveProgramArea .time-table td{
  border:1px solid #e0e0e0;
  padding:8px 10px;
  font-size:13px;
}
#reserveProgramArea .time-table th{
  background:#f7f9fb;
}
#reserveProgramArea .time-select-btn{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #2f8f7a;
  background:#fff;
  color:#2f8f7a;
  font-size:12px;
  cursor:pointer;
}
#reserveProgramArea .time-select-btn.selected{
  background:#2f8f7a;
  color:#fff;
}

@media screen and (max-width:768px){
  .layout{
    flex-direction:column;
  }
  .form-row{
    flex-direction:column;
  }
  .form-col{
    max-width:100%;
  }
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  select{
    max-width:100%;
  }
  .input_text4{
    min-height:140px;
    font-size:.7rem;
  }
  #calendar th,
  #calendar td{
    font-size:11px;
    padding:5px 2px;
  }
  .btn-state{
    font-size:10px;
    padding:4px 3px;
  }
}