#reservationArea{padding:16px;overflow-anchor:none}#reservationArea label{margin-top:8px}
.reservation-times{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.booking-grid{max-height:46vh;overflow:auto;max-width:100%;margin-top:8px}
.booking-grid table{border-collapse:collapse;min-width:660px;width:100%}.booking-grid th{position:sticky;top:0;background:#edf2f7;z-index:1;padding:6px}.booking-grid td{padding:3px;text-align:center}
.booking-grid button{margin:0;padding:8px;min-height:44px;width:100%;background:#e8f4ec;color:#185b32}
.booking-grid button:disabled{background:#edf0f3;color:#6b7280;opacity:1}.booking-grid button.selected{outline:3px solid #2563eb;background:#dbeafe;color:#163d87}
.recent-popup{position:fixed;z-index:1000;background:white;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 4px 18px #0003;overflow:auto;padding:4px}
.recent-popup button{display:block;width:100%;text-align:left;margin:2px 0;min-height:44px}
#reservationArea .repeat-toggle{display:flex;align-items:center;gap:9px;min-height:44px;font-weight:500;margin:10px 0 4px}
.repeat-toggle small{font-size:inherit}
#reservationArea input[type=checkbox]{width:22px;height:22px;min-height:22px;padding:0;margin:0;flex-shrink:0;accent-color:#1d4ed8}
.repeat-base-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.repeat-base-times>div{min-width:0}
#repeatWeekdays{margin-top:8px}
.repeat-weekday-line{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
#reservationArea .repeat-weekday-line label{display:flex;align-items:center;justify-content:center;gap:4px;margin:0;min-height:44px;font-size:13px;white-space:nowrap}
.repeat-weekend summary{font-size:12px;color:#475569;cursor:pointer;padding:6px 0}
#repeatPreview .repeat-date-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:4px;padding:4px 6px;margin-top:4px;border-radius:8px}
#repeatPreview .repeat-date-row label{grid-column:auto;white-space:nowrap;font-size:11px!important;display:flex;align-items:center;gap:4px;min-width:0;min-height:40px}
#repeatPreview .repeat-date-row input{width:20px;height:20px;min-height:20px;margin:0!important}
#repeatPreview .repeat-date-row select{min-width:0;height:40px;min-height:40px;margin:0;padding:4px 2px;font-size:13px;border-radius:6px}
.user-guide{margin:8px 0 12px;padding:10px 12px;background:white;border:1px solid #dbe3ee;border-radius:8px;font-size:13px;line-height:1.6}
.user-guide>summary{cursor:pointer;font-weight:700;color:#334155;min-height:24px}
.user-guide ol{padding-left:20px;margin:8px 0}
.user-guide li{margin:6px 0}
.user-guide p{margin:6px 0;color:#475569}
.booking-grid button.range-selected{background:#dbeafe;color:#163d87}
#reservationArea .step-current{border:2px solid #2563eb!important}
#reservationStepHint{margin:4px 0 8px;color:#245bdb;font-weight:600}
#reservationWeekStep.step-current{border-radius:9px;padding:6px;min-width:0}
#reservationArea .booking-grid button:not(:disabled){background:#e8f1ff;color:#16469a}
#reservationArea .booking-grid button.selected{background:#2563eb;color:white}
#reservationArea .step-confirm{box-shadow:0 0 0 3px #2563eb30}
#reservationArea .booking-grid button.cell-own{background:#154cb1;color:#fff}
#reservationArea .booking-grid button.cell-booked{background:#d8dde5;color:#465264}
#reservationArea .booking-grid button.cell-blocked{background:#ffedd5;color:#9a4c12}
#reservationArea .booking-grid button.cell-past{background:#f1f3f5;color:#747d89}
#reservationArea .booking-grid button.range-selected{outline:2px solid #2563eb;outline-offset:-2px}
#reservationStepHint{height:auto;min-height:32px;padding:6px 10px;overflow:visible;white-space:normal;max-width:100%;background:#eff4ff;border:1px solid #dbe7ff;border-radius:8px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.reservation-times>div{position:relative}
#reservationArea select.time-selected{background:#e8f1ff;color:#154cb1;border-color:#154cb1;box-shadow:inset 0 0 0 1px #154cb1;padding-right:40px;opacity:1;-webkit-text-fill-color:#154cb1}
.reservation-times>div:has(select.time-selected)::after{content:"✓";position:absolute;right:26px;bottom:11px;color:#154cb1;pointer-events:none}
#reservationTimeComplete{color:#154cb1;font-size:12px}


/* Preserve selected/booked/blocked cell colors and the original time-grid height. */
.booking-grid{border:1px solid var(--ui-border);border-radius:var(--ui-radius)}
.booking-grid th{box-shadow:0 1px 0 #cbd5e1}
.repeat-date-row{background:#fafbfd}
#reservationArea>h2::before{background:#1d4ed8}
.recent-popup{box-shadow:0 10px 30px #0f172a26}

/* Candidate: 예약 신청 */

#reservationStepHint{height:auto;min-height:34px;display:flex;align-items:center;padding:7px 12px;background:var(--brand-50);border:1px solid var(--brand-100);border-radius:999px;color:#1e40af;font-size:13.5px;white-space:normal;width:fit-content;max-width:100%}
.booking-grid{border:1px solid var(--line);border-radius:12px;max-height:52vh}
.booking-grid th{font-size:12px;color:#334155;box-shadow:0 1px 0 var(--line-2)}
.booking-grid button{border-radius:8px;font-size:12px;font-weight:650;min-height:40px;border:1px solid transparent}
#reservationArea .booking-grid button:not(:disabled):hover{background:#cfe0ff;border-color:var(--brand-600)}
.recent-popup{border-radius:12px;box-shadow:var(--shadow-2)}
.recent-popup button{background:#fff;color:#1f2937;border:0;border-radius:8px;font-weight:600}
.recent-popup button:hover:not(:disabled){background:var(--brand-50);color:var(--brand-600)}
.repeat-date-row{background:#fafbfd}


/* Candidate: 사용 안내 */

.user-guide{border-radius:12px;background:#fff;box-shadow:none}
.user-guide>summary{list-style:none;display:flex;align-items:center;gap:8px}
.user-guide>summary::before{content:"❔";font-size:15px}
.user-guide>summary::after{content:"▾";margin-left:auto;color:var(--ink-3);transition:transform .2s}
.user-guide[open]>summary::after{transform:rotate(180deg)}
.user-guide>summary::-webkit-details-marker{display:none}