:root{
  --bg:#f8f6f3;--card:#fffdfb;--ink:#2c2527;--muted:#7e7477;--line:#e8dfdc;
  --pink:#d96f92;--pink-deep:#b95072;--pink-soft:#f8e8ee;
  --gold:#b78b45;--gold-deep:#8d682f;--gold-soft:#f5eedf;
  --green:#6f8d78;--green-deep:#557060;--green-soft:#edf3ee;
  --danger:#aa3d56;--shadow:0 12px 32px rgba(69,50,53,.08)
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 15% 0%,rgba(217,111,146,.10),transparent 28%),radial-gradient(circle at 90% 0%,rgba(183,139,69,.11),transparent 26%),var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
.reserve-shell{width:min(980px,100%);margin:auto;padding:18px}
.reserve-header{display:flex;justify-content:space-between;align-items:end;padding:12px 4px 20px}
.reserve-header h1{margin:4px 0 0;font-size:26px}
.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:900;color:var(--gold)}
.hours{font-size:12px;font-weight:850;color:var(--green-deep);background:var(--green-soft);padding:7px 10px;border-radius:999px}
.card{background:rgba(255,253,251,.96);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.login-card{max-width:480px;margin:50px auto}
h2,h3{margin:0 0 8px}
.desc{color:var(--muted);font-size:13px;line-height:1.55}
.tiny{font-size:11px;color:var(--muted);line-height:1.5}
label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:var(--muted);margin:12px 0}
input,select{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;color:var(--ink);outline:none}
input:focus,select:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(217,111,146,.10)}
.primary,.ghost{border:0;border-radius:12px;padding:12px 15px;font-weight:850}
.primary{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:white}
.ghost{background:#f1edeb;color:#5d5053}
.full{width:100%}.small{padding:8px 10px;font-size:12px}
.hidden{display:none!important}
.notice{margin-top:12px;padding:10px 12px;border-radius:11px;font-size:12px}
.error{background:#fce8eb;color:var(--danger)}
.student-summary{display:flex;justify-content:space-between;align-items:center;gap:20px}
.balance-box{min-width:170px;text-align:center;background:var(--gold-soft);border-radius:16px;padding:14px}
.balance-box span{display:block;color:var(--gold-deep);font-size:11px;font-weight:800}
.balance-box strong{display:block;font-size:22px;margin-top:5px;color:var(--gold-deep)}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px}
.booking-grid{display:grid;grid-template-columns:1.25fr .9fr 1.25fr .9fr auto;gap:10px;align-items:end;margin-top:14px}
.booking-grid label{margin:0}
.booking-grid small{font-size:11px;color:var(--pink-deep)}
.availability-btn{min-height:43px}
.policy-note{display:grid;gap:5px;margin:16px 0;padding:13px 14px;background:var(--gold-soft);border-radius:13px;color:var(--gold-deep);font-size:12px;line-height:1.5}
.booking-summary{margin:12px 0;padding:12px 14px;border:1px solid rgba(111,141,120,.25);background:var(--green-soft);border-radius:13px;color:var(--green-deep);font-size:13px;font-weight:800}
.room-seat-wrap{display:grid;gap:16px;margin:15px 0}
.room-block{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff}
.room-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.room-title-row h4{margin:0}
.room-count{font-size:11px;color:var(--muted)}
.room-map{position:relative}
.seat{border:1px solid var(--line);border-radius:12px;min-height:74px;padding:8px;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.seat b{font-size:15px}.seat span{font-size:10px;color:var(--muted)}
.seat.free{border-color:rgba(111,141,120,.35);background:var(--green-soft)}
.seat.selected{border:2px solid var(--pink);background:var(--pink-soft);box-shadow:0 6px 14px rgba(185,80,114,.12)}
.seat.blocked{opacity:.48;background:#f1eeed;cursor:not-allowed}
.seat.own-fixed{background:var(--gold-soft);border-color:var(--gold)}
.premium-map{display:flex;flex-direction:column;gap:8px}
.premium-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.seat-spacer{min-height:74px}
.open-map{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:8px;padding-bottom:56px}
.open-number-grid{display:grid;grid-template-rows:repeat(4,1fr);gap:8px}
.open-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.board-wall{display:flex;align-items:center;justify-content:center;border:2px solid var(--gold);border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);font-size:10px;font-weight:900;writing-mode:vertical-rl}
.bottom-door-marker{position:absolute;left:60%;bottom:0;transform:translateX(-50%);width:80px;height:42px;border:2px solid var(--green);border-radius:10px;background:var(--green-soft);display:flex;align-items:center;justify-content:center;color:var(--green-deep);font-size:10px;font-weight:900}
.reservation-list{display:grid;gap:10px;margin-top:12px}
.reservation-item{border:1px solid var(--line);border-radius:15px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:white}
.reservation-item.cancelled{opacity:.65}
.reservation-item h4{margin:0 0 5px}
.reservation-meta{font-size:12px;color:var(--muted);line-height:1.55}
.reservation-policy{margin-top:6px;font-size:11px;font-weight:800;color:var(--gold-deep)}
.cancel-btn{border:0;border-radius:10px;padding:9px 11px;background:#fce8eb;color:var(--danger);font-weight:850}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#2c2527;color:white;padding:11px 16px;border-radius:12px;font-size:12px;z-index:100}
@media(max-width:700px){
  .reserve-shell{padding:12px}
  .reserve-header h1{font-size:22px}
  .student-summary{align-items:stretch;flex-direction:column}
  .balance-box{width:100%}
  .booking-grid{grid-template-columns:1fr 1fr}
  .booking-grid label:first-child,.availability-btn{grid-column:1/-1}
  .section-head{align-items:flex-start}
  .reservation-item{grid-template-columns:1fr}
  .reservation-item button{width:100%}
  .seat{min-height:62px;padding:5px}.seat b{font-size:13px}
  .seat-spacer{min-height:62px}
  .open-map{grid-template-columns:minmax(0,1fr) 38px;padding-bottom:50px}
  .open-row{gap:4px}.premium-row{gap:5px}
}


/* v14 초기 비밀번호 강제 변경 */
.initial-pin-note{
  margin:14px 0 4px;
  background:var(--pink-soft);
  color:var(--pink-deep);
}
#reservePinChange h2{margin-top:6px}


/* v18 좌석별 예약 일정 표시 */
.seat-schedule-guide{
  margin:2px 0 10px;
  font-size:12px;
  color:var(--muted);
}
.seat-reservation-list{
  width:100%;
  margin-top:5px;
  padding-top:5px;
  border-top:1px solid rgba(80,65,56,.10);
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.25;
}
.seat-reservation-list>span{
  font-size:9.5px;
  font-weight:800;
  opacity:.62;
}
.seat-reservation-time{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.seat{
  min-height:76px;
  height:auto;
  padding-top:8px;
  padding-bottom:8px;
}


/* v19 로그인 후 이용권 보유 현황 */
.pass-summary-grid{
  display:grid;
  grid-template-columns:minmax(170px,1fr) minmax(210px,1.25fr);
  gap:10px;
}
.daypass-box{
  min-width:210px;
  text-align:center;
  border-radius:16px;
  padding:14px;
  background:var(--green-soft);
  border:1px solid rgba(111,141,120,.18);
}
.daypass-box>span{
  display:block;
  color:var(--green-deep);
  font-size:11px;
  font-weight:800;
}
.daypass-box>strong{
  display:block;
  margin-top:5px;
  font-size:17px;
  color:var(--green-deep);
}
.daypass-box>small{
  display:block;
  margin-top:5px;
  font-size:10px;
  line-height:1.4;
  color:var(--muted);
}
.daypass-box.none,
.daypass-box.expired{
  background:#f3f0ef;
  border-color:var(--line);
}
.daypass-box.none>span,
.daypass-box.none>strong,
.daypass-box.expired>span,
.daypass-box.expired>strong{
  color:var(--muted);
}
.daypass-box.future{
  background:var(--gold-soft);
  border-color:rgba(183,139,69,.18);
}
.daypass-box.future>span,
.daypass-box.future>strong{
  color:var(--gold-deep);
}
@media(max-width:700px){
  .pass-summary-grid{grid-template-columns:1fr;width:100%}
  .daypass-box{min-width:0;width:100%}
}


/* v22 예약시간 표시 */
.booking-duration-preview{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:12px;
  background:var(--green-soft);
  color:var(--green-deep);
  font-size:13px;
  font-weight:850;
}
.booking-duration-preview.invalid{
  background:#fce8eb;
  color:var(--danger);
}

/* v36 postpaid reservation */
.reservation-action-stack{display:grid;gap:9px;margin-top:12px}
.postpaid-help{margin-top:10px}
#requestPostpaidReservation{border-color:#b78b45}
#confirmReservation:disabled{opacity:.5;cursor:not-allowed}

/* v41 예약 요금 표시 */
.reservation-fee{font-size:1.06em}
.reservation-rate{color:var(--muted);font-size:.92em}
.booking-duration-preview b{color:var(--gold-deep)}


/* v43 월간 운영시간 캘린더 */
.operation-calendar-card{margin-bottom:16px}
.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.calendar-head h2{margin:3px 0 0}
.calendar-nav{display:flex;align-items:center;gap:8px}
.calendar-nav strong{min-width:92px;text-align:center;font-size:14px}
.calendar-weekdays,.operation-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calendar-weekdays{margin-bottom:6px}
.calendar-weekdays span{text-align:center;font-size:11px;font-weight:850;color:var(--muted)}
.calendar-day{
  min-height:74px;padding:8px 6px;border:1px solid var(--line);border-radius:11px;
  background:#fff;display:flex;flex-direction:column;gap:6px
}
.calendar-day.blank{border:0;background:transparent}
.calendar-day.today{border:2px solid var(--gold);background:var(--gold-soft)}
.calendar-day.closed{background:#f5f2f1}
.calendar-date{font-size:12px;font-weight:900}
.calendar-hours{font-size:10px;line-height:1.35;color:var(--muted);word-break:keep-all}
.calendar-day.closed .calendar-hours{color:var(--danger);font-weight:900}
.calendar-note{margin:10px 2px 0}
.calendar-load-error{grid-column:1/-1;padding:18px;text-align:center;color:var(--muted)}
@media(max-width:620px){
  .calendar-day{min-height:62px;padding:6px 4px}
  .calendar-hours{font-size:9px}
  .calendar-head{align-items:flex-start}
}