/* ============================================================
   Calendar styles (spec ch.8 multi-date picker)
   ============================================================ */
.cal-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-nav-label { font-weight: 700; font-size: 15px; color: var(--ink); }
.cal-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--primary-700); display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.cal-arrow:hover:not(:disabled) { background: var(--primary-50); }
.cal-arrow:disabled { color: #9a9a9a; cursor: not-allowed; }

.cal-months { display: flex; gap: 26px; }
.cal-months.single { display: block; }
.cal-months.dual { flex-wrap: wrap; }
.cal-months.dual .cal-month { flex: 1; min-width: 240px; }
.cal-months.vertical { flex-direction: column; max-height: 460px; overflow-y: auto; gap: 22px; padding-right: 4px; scroll-behavior: smooth; }
.dev-mobile .cal-months.dual { flex-direction: column; }

.cal-month { flex: 1; }
.cal-mlabel { font-family: var(--font-serif); font-weight: 700; font-size: 16px; color: var(--ink); text-align: center; margin: 8px 0 12px; }
.mode-single .cal-month > .cal-mlabel { display: none; }

.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.cal-weekdays span { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-weekdays .we { color: var(--accent-600); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.cal-cell {
  position: relative;
  border: none; background: transparent;
  aspect-ratio: 1 / 1; min-height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 14px; color: var(--ink); font-weight: 600;
  border-radius: 0;
  transition: background 0.1s;
}
.cal-cell.empty { pointer-events: none; }
.cal-cell .cal-num { line-height: 1.1; }
.cal-cell .cal-sub { font-size: 9.5px; font-weight: 700; }
.cal-cell .cal-price { font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 1px; }

/* states */
.cal-cell.open { cursor: pointer; }
.cal-cell.open:hover { background: var(--primary-50); border-radius: 10px; }
.cal-cell.past { color: #9a9a9a; cursor: not-allowed; opacity: 0.55; }
.cal-cell.full { color: #777777; cursor: not-allowed; }
.cal-cell.full .cal-num { text-decoration: line-through; }
.cal-cell.full .strike { color: var(--error); opacity: 0.7; }

/* today marker */
.cal-today-dot { position: absolute; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cal-cell.today .cal-num { position: relative; }

/* range selection */
.cal-cell.inrange { background: var(--primary-50); border-radius: 0; }
.cal-cell.preview { background: var(--primary-50); border-radius: 0; }
.cal-cell.preview { box-shadow: inset 0 0 0 1px var(--primary-100); }
.cal-cell.start, .cal-cell.end {
  background: var(--primary); color: #fff; z-index: 1;
}
.cal-cell.start .cal-price, .cal-cell.end .cal-price { color: rgba(255,255,255,.8); }
.cal-cell.start { border-radius: 10px 0 0 10px; }
.cal-cell.end { border-radius: 0 10px 10px 0; }
/* if same cell is both (single click) keep rounded */
.cal-cell.start.end { border-radius: 10px; }
/* soften range row edges */
.cal-cell.inrange:first-child, .cal-cell.preview:first-child { border-radius: 10px 0 0 10px; }
.cal-cell.inrange:last-child, .cal-cell.preview:last-child { border-radius: 0 10px 10px 0; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cal-legend i.lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cal-legend i.open { background: var(--surface); border: 1.5px solid var(--line); }
.cal-legend i.sel { background: var(--primary); }
.cal-legend i.full { background: var(--surface-2); position: relative; overflow: hidden; }
.cal-legend i.full::after { content: ""; position: absolute; top: 50%; left: -2px; right: -2px; height: 1.5px; background: var(--error); opacity: .6; transform: rotate(-18deg); }
.cal-legend i.past { background: #e6e6e6; opacity: .6; }

/* P-04 layout */
.p04-grid { display: grid; gap: 26px; align-items: start; }
.dev-desktop .p04-grid { grid-template-columns: 1.7fr 1fr; }
.p04-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.dev-desktop .p04-summary.sticky { position: sticky; top: 80px; }
.p04-room-switch { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 18px; }
.p04-prompt { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--primary-700); background: var(--primary-50); padding: 9px 14px; border-radius: var(--r-pill); }

/* mobile sticky summary for P-04 */
.p04-mobile-bar { position: sticky; bottom: 0; z-index: 30; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: 12px 16px; box-shadow: 0 -4px 18px rgba(43,40,35,.06); }