/* 아옴 시네마: 구역별 배치.
   .motion 은 고정과 스크럽이 켜진 상태다. 움직임 없는 모드의 배치는 flow.css에 있다.
   PC: (min-width: 900px) and (min-aspect-ratio: 4/5). 나머지는 세로 화면 규칙을 쓴다. */

.scene { position: relative; }
.motion .stage { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; }

/* ---------- 1. 히어로: 검은 띠 사이의 영상 ---------- */
.hero { z-index: 1; background: var(--night); }
.hero-stage { position: relative; background: var(--night); }
.hero-media, .final-media { position: absolute; inset: 0; overflow: hidden; background: var(--night); }
.hero-media img, .final-media img, .seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-frame { position: absolute; inset: 0; transform-origin: 50% 42%; }
.motion .hero-frame { will-change: transform; }
/* 아래 띠가 있을 때는 창이 보이는 영역 가운데로 사진을 옮겨 둔다. 문턱을 넘으면 시간으로 제자리에 오며 화면이 열린다 */
.motion .hero-media { transform: translate3d(0, var(--shift-y, 0px), 0) scale(var(--zoom, 1.06)); transition: transform var(--open-ms, .9s) var(--ease-move); will-change: transform; }
.motion .hero-stage:not(.is-measured) .hero-media { transition: none; }
.motion .is-open .hero-media { transform: none; }
.motion .hero-cta { transition: opacity .12s, background-color .15s; }
.motion .is-open .hero-cta { opacity: 0; }
.seq { visibility: hidden; }
.seq.is-ready { visibility: visible; }
.hero-glow { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(58% 52% at 50% 42%, rgba(255, 217, 168, .75), rgba(255, 217, 168, 0) 72%); }
/* 스크롤에 맞춰 걷히는 어둠(light.js)과 영화 비네트 */
.hero-shade, .final-shade { position: absolute; inset: 0; opacity: .66; pointer-events: none; background: #060505; }
.final-shade { opacity: .58; }
.hero-media::after, .final-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(115% 95% at 50% 46%, rgba(6, 5, 5, 0) 58%, rgba(6, 5, 5, .55) 100%); }
.hero-copy h1 { font-weight: 600; line-height: 1.1; letter-spacing: -.02em; animation: title-in 1.2s var(--ease-out) both; }
.hero-side { animation: title-in 1.2s .2s var(--ease-out) both; }
@keyframes title-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.hero-panel { position: relative; background: var(--night); }
.hero-logo { display: none; }
.hero-seats { display: flex; align-items: center; gap: 12px; font-size: var(--t-ui); font-weight: 500; line-height: 1.5; color: var(--paper-2); }
.hero-seats .dots { color: var(--sun); }
.hero-note { color: var(--paper-3); }
.hero-tab { display: none; }
.hero-after { display: none; }

/* 영화 자막: 지금 일어나는 일을 아래 검은 띠에 적는다 */
.hero-status { background: var(--night); }
.hero-bar { display: block; height: 2px; background: var(--hair); overflow: hidden; }
.hero-bar b { display: block; height: 100%; background: var(--sun); box-shadow: 0 0 12px var(--sun); transform-origin: left; transform: scaleX(0); }
.status-lines { display: grid; font-size: var(--t-ui); font-weight: 500; line-height: 1.5; color: var(--paper); }
.status-lines > span { grid-area: 1 / 1; display: flex; justify-content: center; gap: 14px; visibility: hidden; opacity: 0; white-space: nowrap; }
.status-lines > span.is-on { visibility: visible; opacity: 1; transition: opacity .35s; }
.status-lines b { font-weight: 600; color: var(--sun); }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .motion .hero { height: calc(var(--vh) * 394); }
  .hero-stage {
    --hero-h1: min(8.8vw, calc(var(--vh) * 14.2));
    --status-h: 60px;
    --panel-h: calc(var(--hero-h1) * 2.2 + 60px);
    --shift-y: calc(var(--panel-h) / -2);
  }
  .hero-foot { display: contents; }
  .motion .hero-tab {
    position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; align-items: center; justify-content: space-between;
    height: var(--bar-h); padding: 0 var(--gutter); background: var(--night); color: var(--paper); text-decoration: none;
  }
  .hero-tab b { font-size: var(--t-lead); font-weight: 700; line-height: 1.2; }
  .hero-tab span { font-size: var(--t-note); font-weight: 500; color: var(--paper-2); line-height: 1.5; }
  .motion .hero-panel { position: absolute; left: 0; right: 0; bottom: var(--status-h); height: var(--panel-h); z-index: 2; transition: transform .9s var(--ease-move); will-change: transform; }
  .motion .is-open .hero-panel { transform: translate3d(0, calc(100% + var(--status-h)), 0); visibility: hidden; transition: transform .9s var(--ease-move), visibility 0s .9s; }
  .hero-copy { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 30%); gap: 40px; align-items: center; padding: 20px var(--gutter) 28px; }
  .hero-copy h1 { font-size: var(--hero-h1); }
  .hero-lead { font-size: var(--t-body); line-height: 1.6; color: var(--paper-2); }
  .hero-cta { margin-top: clamp(10px, calc(var(--vh) * 2), 20px); }
  .hero-seats { margin-top: 12px; }
  .hero-note { margin-top: 2px; }
  .motion .hero-status { position: absolute; left: 0; right: 0; bottom: 0; height: var(--status-h); z-index: 3; }
  .status-lines { align-content: center; height: calc(var(--status-h) - 2px); padding: 0 var(--gutter); font-size: var(--t-body); }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .motion .hero { height: calc(var(--vh) * 284); }
  :root { --zoom: 1.03; --open-ms: .7s; }
  .hero-stage { --shift-y: calc(var(--vh) * -18); }
  .motion .hero-foot { position: absolute; inset: auto 0 0 0; background: var(--night); transition: transform .7s var(--ease-move); will-change: transform; }
  .motion .is-open .hero-foot { transform: translate3d(0, var(--travel, 0px), 0); }
  .motion .is-open .hero-panel { visibility: hidden; transition: visibility 0s .7s; }
  .hero-panel { padding: 14px var(--gutter) calc(var(--dock-h) + var(--vh-gap) + 12px); }
  .hero-status { padding-bottom: 8px; }
  .status-lines { padding: 8px var(--gutter) 0; }
  .status-lines > span { justify-content: flex-start; white-space: normal; }
  .status-lines b { white-space: nowrap; }
  .hero-lead { margin: 12px 0 10px; line-height: 1.6; color: var(--paper-2); }
  .hero-cta { display: none; }
  .hero-note { margin-top: 4px; }
  .motion .hero-tab {
    position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 48px; padding: 0 var(--gutter); background: var(--night); color: var(--paper); text-decoration: none;
  }
  .hero-tab b { font-size: var(--t-lead); font-weight: 700; line-height: 1.2; }
  .hero-tab span { font-size: var(--t-note); font-weight: 500; color: var(--paper-2); line-height: 1.5; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 720px) {
  .hero-copy { padding-top: 12px; padding-bottom: 16px; }
  .hero-cta.btn-lg { min-height: 52px; }
  .hero-seats { margin-top: 8px; }
}
/* 낮은 폰: 사진 자리를 지킨다 */
@media (max-height: 700px) and (max-aspect-ratio: 4/5), (max-height: 700px) and (max-width: 899.98px) {
  .hero-note { display: none; }
  .hero-copy h1 { font-size: min(44px, 11.6vw); }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .hero-panel { padding-top: 24px; padding-bottom: calc(var(--dock-h) + var(--vh-gap) + 24px); }
  .hero-lead { margin: 20px 0 16px; font-size: var(--t-lead); }
  .hero-note { margin-top: 12px; }
}

/* ---------- 2. 공간 선택: 고른 방에만 불이 켜진다 ---------- */
.spaces { z-index: 2; background: var(--night); }
.spaces-stage { background: var(--night); }
.spaces-head > p { color: var(--paper-2); }
.sp { position: relative; }
.sp-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer;
}
/* 칸 전체를 누를 수 있게 버튼의 누름 영역을 사진까지 넓힌다 */
.sp-btn::after { content: ""; position: absolute; inset: 0; }
.sp-btn:focus-visible { outline: 0; }
.sp-btn:focus-visible::after { outline: 3px solid var(--sun); outline-offset: -3px; }
.sp-ph { display: block; position: relative; overflow: hidden; background: var(--night-2); cursor: pointer; }
.sp-ph img { width: 100%; height: auto; }
.sp-lb { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 8px; }
.sp-lb b { font-weight: 600; white-space: nowrap; }
.sp-lb .ico { width: 20px; height: 20px; color: var(--sun); transition: transform .2s var(--ease-out); }
.sp-btn:hover .sp-lb .ico { transform: translateX(3px); }
.sp-desc { grid-column: 1 / -1; grid-row: 2; font-size: var(--t-note); color: var(--paper-3); line-height: 1.5; }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .motion .spaces { height: calc(var(--vh) * 320); margin-top: calc(var(--vh) * -100); background: transparent; }
  .motion .spaces-stage { display: flex; flex-direction: column; padding: calc(var(--bar-h) + clamp(12px, calc(var(--vh) * 3), 32px)) 0 20px; }
  .spaces-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 0 var(--gutter); }
  .spaces-head > p { font-size: var(--t-body); line-height: 1.6; padding-bottom: 8px; }
  .motion .spaces-head { flex: none; margin-bottom: clamp(14px, calc(var(--vh) * 3), 28px); }
  .motion .sp-list { flex: 1; min-height: 0; display: flex; gap: 3px; }
  .motion .sp { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; transition: flex-grow .7s var(--ease-out); }
  .motion .sp.is-active { flex-grow: 4.6; }
  .motion .sp-btn { flex: none; min-height: 44px; }
  .motion .sp-ph { flex: 1; min-height: 0; }
  .motion .sp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* 꺼진 방: 사진 위를 어둡게 덮는다. 고른 방은 어둠이 걷힌다 */
  .motion .sp-ph::after { content: ""; position: absolute; inset: 0; background: #070707; opacity: .7; transition: opacity .7s var(--ease-out); pointer-events: none; }
  .motion .sp.is-active .sp-ph::after { opacity: 0; }
  .motion .sp-lb { flex: none; padding: 12px 12px 0; font-size: var(--t-body); }
  .motion .sp.is-active .sp-lb b { color: var(--sun); }
  .motion .sp-lb .ico { display: none; }
  .motion .sp.is-active .sp-lb .ico { display: block; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .spaces-head > p { margin-top: 8px; }
  .motion .spaces { height: calc(var(--vh) * 200); }
  .motion .spaces-stage { display: flex; flex-direction: column; padding: 24px 0 calc(var(--dock-h) + var(--vh-gap) + 12px); }
  .motion .spaces-head { flex: none; padding: 0 var(--gutter); margin-bottom: 14px; }
  .motion .sp-list {
    --chip: 52px;
    flex: 1; min-height: 0; position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--chip);
    align-content: end; gap: 6px;
    padding: 0 var(--gutter);
  }
  .motion .sp { position: static; }
  .motion .sp-btn { position: relative; height: var(--chip); }
  .motion .sp-btn::after { display: none; }
  .motion .sp-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
  .motion .sp-ph {
    position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--chip) * 2 + 6px + 14px);
    visibility: hidden; z-index: 1;
  }
  .motion .sp-ph img { width: 100%; height: 100%; object-fit: cover; }
  .motion .sp.was-active .sp-ph { visibility: visible; z-index: 2; }
  .motion .sp.is-active .sp-ph { visibility: visible; z-index: 3; animation: sp-reveal .7s var(--ease-out); }
  .motion .sp-lb { display: flex; height: 100%; justify-content: center; background: var(--night-3); transition: background-color .3s, box-shadow .3s; }
  .motion .sp-lb .ico, .motion .sp-desc { display: none; }
  .motion .sp-lb b { font-size: var(--t-ui); font-weight: 500; }
  .motion .sp.is-active .sp-lb { background: var(--sun); color: var(--on-sun); box-shadow: 0 0 24px rgba(255, 217, 168, .35); }
  .motion .sp.is-active .sp-lb b { font-weight: 600; }
}
@keyframes sp-reveal { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-width: 1199.98px) {
  .motion .sp-desc { display: none; }
  .status-lines { font-size: var(--t-ui); }
}

/* ---------- 3. 세 자리: 천장의 조명 세 개 ---------- */
.seats { z-index: 3; background: var(--night); }
.seats-stage, .control-stage { background: var(--night); }
.seats-lead { margin-top: 12px; font-size: var(--t-body); line-height: 1.6; color: var(--paper-2); }
.motion .swap { display: grid; }
.motion .swap > * { grid-area: 1 / 1; transition: opacity .3s; }
.motion .swap-b { visibility: hidden; opacity: 0; }
.motion .swap.is-b .swap-a { visibility: hidden; opacity: 0; }
.motion .swap.is-b .swap-b { visibility: visible; opacity: 1; }

/* 남은 자리 큰 숫자 */
.count-label { display: grid; font-size: var(--t-ui); font-weight: 500; line-height: 1.4; color: var(--paper-2); }
.count-label > span { grid-area: 1 / 1; visibility: hidden; }
.count-label > span:first-child { visibility: visible; }
.count[data-left="0"] .count-label > span:first-child { visibility: hidden; }
.count[data-left="0"] .count-label > span:last-child { visibility: visible; }
.count-roll { height: calc(var(--seat-num) * 1.12); overflow: hidden; color: var(--sun); }
.count-strip { display: block; transform: translate3d(0, calc(var(--i, 0) * var(--seat-num) * -1.12), 0); transition: transform .5s var(--ease-out); }
.count-strip b { display: flex; align-items: baseline; height: calc(var(--seat-num) * 1.12); font-size: var(--seat-num); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; white-space: nowrap; }
.count-strip small { margin-left: .08em; font-size: .34em; font-weight: 500; }

/* 조명 하나. 번호판(i)이 켜지면 빛이 번지고, 고리는 다음 조명이 켜지기까지의 시간을 스크롤로 보여 준다 */
.board { --ring: 68px; --ring-gap: 20px; }
.board-head { font-size: var(--t-ui); font-weight: 500; line-height: 1.6; color: var(--paper-2); }
.slots { display: grid; gap: 12px; }
.slot { position: relative; }
.ring { position: relative; z-index: 2; display: block; flex: none; width: var(--ring); height: var(--ring); }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: var(--night-2); stroke: var(--hair); stroke-width: 2; }
.ring-fill { fill: none; stroke: var(--sun); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ring i {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sun); color: var(--on-sun);
  font-size: var(--t-h3); font-weight: 600; line-height: 1;
  opacity: 0;
  box-shadow: 0 0 calc(var(--ring) * .45) calc(var(--ring) * .1) rgba(255, 217, 168, .6), 0 0 calc(var(--ring) * 1.5) calc(var(--ring) * .4) rgba(255, 217, 168, .22);
  transition: opacity .25s;
}
.slot.is-taken .ring i { opacity: 1; animation: lamp-on .7s linear both; }
/* 형광등처럼 두어 번 떨리며 켜진다 */
@keyframes lamp-on {
  0% { opacity: 0; }
  12% { opacity: .85; }
  20% { opacity: .15; }
  38% { opacity: 1; }
  48% { opacity: .4; }
  62%, 100% { opacity: 1; }
}
.slot-body { position: relative; z-index: 1; }
.slot-empty { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 24px; background: var(--night-2); border: 1px solid var(--hair); color: var(--paper-2); font-size: var(--t-ui); font-weight: 500; line-height: 1.4; }
.slot-empty-b { display: none; flex: 1; align-items: center; justify-content: space-between; gap: 12px; }
.slot-empty-b p { display: grid; gap: 2px; }
.slot-empty-b b { font-weight: 600; color: var(--paper); }
.slot-empty-b span { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-note); font-weight: 500; color: var(--paper-2); }
.slot-empty-b .ico { width: 18px; height: 18px; margin-top: .15em; }
.slot.is-out .slot-empty-a { display: none; }
.slot.is-out .slot-empty-b { display: flex; }
.slot-empty .btn-line { background: transparent; border-color: var(--paper-2); color: var(--paper); }
.slot-empty .btn-line:hover { background: var(--paper); color: var(--ink); }
.slot:not(.is-out) .slot-undo { visibility: hidden; }

/* 조명 아래 놓인 제안 카드. 문턱을 넘으면 시간으로 드러난다. 어디서 멈춰도 글자가 잘린 채 남지 않는다 */
.offer {
  position: relative; background: var(--lit); color: var(--ink); padding: 14px 24px;
  visibility: hidden; opacity: 0;
  transition: opacity .4s, visibility 0s .4s;
}
.slot.is-taken .offer { visibility: visible; opacity: 1; transition: opacity .4s .12s; }
.slot.is-out .offer { visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.offer-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.offer-top h3 { font-size: var(--t-lead); font-weight: 600; white-space: nowrap; }
.offer-price { font-size: var(--t-lead); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; }
.offer-price small { margin-right: 8px; font-size: var(--t-note); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.offer-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; margin-top: 4px; }
.offer-meta { font-size: var(--t-ui); color: var(--ink-2); line-height: 1.6; }
.offer-num { display: flex; align-items: center; gap: 8px; font-size: var(--t-ui); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.offer-num .ico { width: 20px; height: 20px; }
.n-label { color: var(--ink-2); font-weight: 500; }
.n-state { padding: 1px 8px; background: rgba(23, 20, 15, .1); font-size: var(--t-note); font-weight: 600; line-height: 1.5; }
/* 잠금이 풀리는 짧은 순간: 카드가 드러난 뒤 번호가 열린다 */
.offer .ico-open, .offer .n-clear, .offer .n-open { opacity: 0; }
.ico-lock, .n-masked, .n-lock, .ico-open, .n-clear, .n-open { transition: opacity .2s; }
.slot.is-taken .ico-lock, .slot.is-taken .n-masked, .slot.is-taken .n-lock { opacity: 0; transition-delay: .62s; }
.slot.is-taken .ico-open, .slot.is-taken .n-clear, .slot.is-taken .n-open { opacity: 1; transition-delay: .62s; }
.offer .n-state { transition: background-color 0s, color 0s; }
.slot.is-taken .offer .n-state { background: var(--ink); color: var(--lit); transition-delay: .62s; }

.offer-rm { position: absolute; right: 16px; top: 16px; visibility: hidden; opacity: 0; transition: opacity .2s; }
.board.is-control .slot.is-taken .offer-rm { visibility: visible; opacity: 1; }
.slot.is-out .offer-rm { visibility: hidden; }

/* 네 번째 업체: 마감선 아래, 조명 없이 남는다 */
.closed { position: relative; margin-top: 18px; padding-top: 18px; }
.closed-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--sun); box-shadow: 0 0 10px rgba(255, 217, 168, .7); transform-origin: left; transform: scaleX(0); }
.fourth { padding: 10px 24px; background: var(--night-2); border: 1px solid var(--hair); color: var(--paper-2); visibility: hidden; }
.closed.is-in .fourth { visibility: visible; animation: fourth-in .7s var(--ease-out) both; }
.board.is-control .closed { visibility: hidden; }
.board.is-control .closed .fourth { visibility: hidden; animation: none; }
.fourth-top { display: flex; align-items: baseline; gap: 14px; }
.fourth h3 { font-size: var(--t-body); font-weight: 600; white-space: nowrap; color: var(--paper); }
.fourth-note { font-size: var(--t-ui); font-weight: 500; line-height: 1.5; color: var(--paper-2); }
.fourth .n-state { display: inline-block; background: var(--night-3); color: var(--paper); }
.fourth .n-label { color: inherit; }
@keyframes fourth-in {
  0% { transform: translate3d(0, 24px, 0); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .motion .seats { height: calc(var(--vh) * 390); margin-top: calc(var(--vh) * -100); background: transparent; }
  .motion .seats-grid { height: 100%; padding: calc(var(--bar-h) + clamp(10px, calc(var(--vh) * 3), 32px)) var(--gutter) clamp(12px, calc(var(--vh) * 3), 28px); }
  .seats-grid { display: flex; flex-direction: column; gap: clamp(10px, calc(var(--vh) * 2.6), 28px); }
  .seats-left { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .count { flex: none; text-align: right; }
  .count-strip b { justify-content: flex-end; }
  .board {
    --ring: clamp(48px, calc(var(--vh) * 9.5), 88px);
    --cord: clamp(10px, calc(var(--vh) * 4), 44px);
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  .board-head { flex: none; margin-bottom: 8px; }
  /* 천장 선에서 조명이 내려오고, 빛줄기가 카드에 닿는다. 화면이 높으면 빛줄기가 길어진다 */
  .slots { flex: 1; min-height: 0; position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 32px); border-top: 1px solid var(--hair); }
  .slot { display: flex; flex-direction: column; align-items: center; padding-top: var(--cord); }
  .ring::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: var(--cord); background: var(--field); }
  .slot::before {
    content: ""; position: absolute; left: -4%; right: -4%; top: calc(var(--cord) + var(--ring) * .5); bottom: 0;
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgba(255, 217, 168, .46), rgba(255, 217, 168, .1) 75%);
    opacity: 0; transition: opacity .4s; pointer-events: none;
  }
  .slot.is-taken::before { opacity: 1; animation: lamp-on .7s linear both; }
  .slot-body { width: 100%; margin-top: auto; }
  .offer { padding: clamp(10px, calc(var(--vh) * 1.8), 20px) 20px; }
  .offer-top { display: block; }
  /* "방문 후 확정" 줄 자리를 세 카드 모두 비워 두어 높이를 맞춘다 */
  .offer-price { margin-top: 2px; min-height: calc(1.2em + 22px); font-size: clamp(30px, 3.4vw, 52px); display: flex; flex-direction: column-reverse; justify-content: flex-end; }
  .offer-price small { margin: 2px 0 0; line-height: 1.4; }
  .offer-sub { display: grid; gap: 2px; margin-top: 8px; }
  .offer-num { flex-wrap: wrap; }
  .slot-empty { padding: 0 20px; justify-content: center; text-align: center; }
  .slot.is-out .slot-empty { justify-content: stretch; text-align: left; }
  .slot-empty-b { flex-direction: column; align-items: flex-start; justify-content: center; }
  .closed { flex: none; margin-top: clamp(8px, calc(var(--vh) * 2), 18px); padding-top: clamp(8px, calc(var(--vh) * 2), 18px); }
  .fourth { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 20px; }
  .motion .control { display: none; }
}
/* 폭이 좁은 PC */
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-width: 1199.98px) {
  .board-time { display: none; }
  .ring i { font-size: var(--t-lead); }
  .offer-top h3 { font-size: var(--t-body); }
  .offer .n-label { display: none; }
  .offer-rm { right: 10px; top: 10px; min-width: 60px; padding: 0 10px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 720px) {
  .ring i { font-size: var(--t-lead); }
  .seats-lead { margin-top: 4px; font-size: var(--t-ui); }
  .offer-meta { font-size: var(--t-note); line-height: 1.5; }
  .offer-rm { top: 8px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 620px) {
  .board-head { display: none; }
  .offer-price { font-size: 26px; }
}

@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .motion .seats { height: calc(var(--vh) * 280); }
  .motion .control { height: calc(var(--vh) * 190); }
  .motion .swap-b { display: none; }
  .motion .seats-grid { height: 100%; display: flex; flex-direction: column; padding: 24px var(--gutter) calc(var(--dock-h) + var(--vh-gap) + 10px); }
  .motion .seats-left { display: contents; }
  .seats-lead { margin-top: 8px; font-size: var(--t-body); }
  .count { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 8px; }
  .count-label { font-size: var(--t-ui); padding-bottom: 8px; }
  .board { --ring: 44px; --ring-gap: 12px; }
  .motion .board { flex: none; margin-top: 4px; }
  .board-head { font-size: var(--t-note); margin-bottom: 8px; color: var(--paper-2); }
  .board-time { display: none; }
  .slots { gap: 10px; }
  .slot { display: grid; grid-template-columns: var(--ring) minmax(0, 1fr); gap: var(--ring-gap); align-items: center; }
  /* 세로 화면: 전선이 조명들을 잇는다 */
  .slot::before { content: ""; position: absolute; left: calc(var(--ring) / 2); top: -10px; bottom: 0; width: 1px; background: var(--hair); }
  .slot:first-child::before { top: 50%; }
  .slot:last-child::before { bottom: 50%; }
  .ring i { font-size: var(--t-body); }
  .slot-empty { padding: 0 14px; font-size: var(--t-ui); }
  .slot-empty-b b { font-size: var(--t-ui); }
  .slot-empty-b span { font-size: var(--t-note); }
  .offer { padding: 10px 14px; }
  .offer-top { gap: 8px; }
  .offer-top h3 { font-size: var(--t-body); }
  .offer-price { font-size: var(--t-lead); text-align: right; }
  .offer-price small { display: block; margin: 0; line-height: 1.3; }
  .offer-sub { display: grid; justify-content: stretch; gap: 0; margin-top: 0; }
  .offer-meta { font-size: var(--t-note); line-height: 1.5; }
  .offer-num { gap: 6px; line-height: 1.45; }
  .n-val { font-weight: 600; }
  .n-state { margin-left: auto; }
  .offer-rm { top: auto; right: 10px; bottom: 6px; min-height: 44px; min-width: 60px; padding: 0 12px; background: var(--lit); }
  .slot-undo { min-height: 44px; min-width: 76px; padding: 0 10px; }
  .closed { margin-top: 12px; padding-top: 12px; }
  .fourth { padding: 8px 14px; margin-left: calc(var(--ring) + var(--ring-gap)); }
  .fourth h3 { font-size: var(--t-ui); }
  .fourth-top { justify-content: space-between; }
  .fourth-note { font-size: var(--t-note); }
  .fourth .n-label { display: none; }
}
/* 낮은 폰 */
@media (max-width: 599.98px) and (max-height: 700px) {
  :root { --seat-num: 44px; }
  .seats h2, .control h2 { font-size: 30px; }
  .seats-lead { margin-top: 4px; font-size: var(--t-ui); line-height: 1.5; }
  .motion .seats-grid { padding-top: 14px; }
  .count { padding-top: 2px; }
  .count-label { padding-bottom: 4px; }
  .slots { gap: 6px; }
  .offer { padding: 6px 14px; }
  .closed { margin-top: 6px; padding-top: 6px; }
  .fourth { padding: 4px 14px; }
  .board-head { margin-bottom: 4px; }
}
/* 세로 태블릿: 넓은 폭을 쓴다 */
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .motion .seats-grid { justify-content: center; gap: 32px; }
  .motion .seats-left { display: block; }
  .seats-lead { font-size: var(--t-lead); margin-top: 16px; }
  .count { margin-top: 24px; }
  .board { --ring: 64px; --ring-gap: 16px; }
  .ring i { font-size: var(--t-h3); }
  .slots { gap: 12px; }
  .offer { padding: 16px 20px; }
  .offer-top h3, .offer-price { font-size: var(--t-lead); }
  .offer-sub { display: flex; margin-top: 4px; }
  .offer-meta { font-size: var(--t-ui); }
  .board-head { font-size: var(--t-ui); margin-bottom: 12px; }
  .offer-price small { display: inline; margin-right: 8px; }
  .n-state { margin-left: 0; }
  .offer-rm { top: 50%; right: 16px; bottom: auto; transform: translateY(-50%); }
  .fourth { padding: 12px 20px; }
  .fourth h3 { font-size: var(--t-lead); }
  .fourth-note { font-size: var(--t-ui); }
}

/* ---------- 4. 조건 공개: 사진을 닦아 내며 크레딧처럼 조건이 올라온다 ---------- */
.terms { z-index: 4; background: var(--night); }
.terms-stage { background: var(--night); }
.wipe { position: relative; margin: 0; }
.w-img img { width: 100%; height: 100%; object-fit: cover; }
.w-edge { display: none; }
.w-chip { position: absolute; bottom: 16px; z-index: 3; padding: 6px 14px; background: var(--night); color: var(--paper); font-size: var(--t-ui); font-weight: 500; line-height: 1.5; white-space: nowrap; }
.w-chip-after { color: var(--sun); }
.terms-lead { margin-top: 14px; color: var(--paper-2); font-size: var(--t-body); line-height: 1.6; }
.terms-sub { margin-top: 24px; font-size: var(--t-ui); font-weight: 500; color: var(--paper-3); line-height: 1.6; }

/* 조건 장부: 지금 칸은 펼치고, 지난 칸은 요약으로 남겨 앞서 본 조건을 잊지 않게 한다 */
.ledger { margin-top: 8px; }
.lg { padding: 14px 0; border-top: 1px solid var(--hair); }
.lg:last-child { border-bottom: 1px solid var(--hair); }
.lg-head { display: flex; align-items: baseline; gap: 16px; }
.lg-head h3 { flex: none; font-size: var(--t-body); font-weight: 600; color: var(--paper-2); }
.lg.is-on .lg-head h3 { color: var(--sun); }
.lg-q { font-size: var(--t-body); font-weight: 600; line-height: 1.5; }
.lg-sum { margin-left: auto; font-size: var(--t-ui); font-weight: 500; line-height: 1.5; color: var(--paper-2); text-align: right; white-space: nowrap; }
.lg-in, .lg-fee { display: flex; gap: 10px; font-size: var(--t-ui); line-height: 1.6; color: var(--paper-2); }
.lg-in { margin-top: 10px; }
.lg-in b { font-weight: 600; margin-right: 4px; color: var(--paper); }
.lg-fee { margin-top: 6px; color: var(--paper); }
.lg-fee b { font-weight: 600; color: var(--sun); }
.lg-in .ico, .lg-fee .ico { width: 20px; height: 20px; margin-top: .2em; color: var(--sun); }

.motion .wipes { position: relative; overflow: hidden; background: var(--night-2); }
.motion .wipe { position: absolute; inset: 0; visibility: hidden; transform: translate3d(0, 100%, 0); transition: transform .6s var(--ease-out), visibility 0s .6s; }
.motion .wipe.is-in { visibility: visible; transform: none; transition: transform .6s var(--ease-out); }
.motion .wipe.is-under { visibility: hidden; transition: visibility 0s .6s; }
.motion .w-img { position: absolute; inset: 0; }
.motion .w-after { --w: 0; clip-path: polygon(0 0, calc(var(--w) * 1%) 0, calc((var(--w) - 12) * 1%) 100%, 0 100%); }
/* 닦는 경계는 창으로 든 빛줄기처럼 보인다 */
.motion .w-edge { display: block; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--sun); box-shadow: 0 0 28px 6px rgba(255, 217, 168, .55); transform-origin: 1.5px 0; z-index: 2; opacity: 0; }
.motion .w-chip-after { left: 16px; }
.motion .w-chip-before { right: 16px; }
.motion .lg-body { display: none; }
.motion .lg.is-on .lg-body { display: block; animation: lg-open .45s var(--ease-out); }
.motion .lg .lg-q { display: none; }
.motion .lg.is-on .lg-q { display: block; }
.motion .lg .lg-sum { display: none; }
.motion .lg.is-past .lg-sum { display: block; }
@keyframes lg-open { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .motion .terms { height: calc(var(--vh) * 386); }
  .motion .wipes { position: absolute; left: 0; top: 0; bottom: 0; width: 56%; }
  .motion .terms-copy {
    position: absolute; right: 0; top: 0; bottom: 0; width: 44%;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--bar-h) + 16px) var(--gutter) 16px 56px;
    background: var(--night);
  }
  .motion .w-chip { bottom: 28px; }
  .motion .w-chip-after { left: var(--gutter); }
  .motion .w-chip-before { right: 24px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 800px) {
  .terms-lead { margin-top: 8px; font-size: var(--t-ui); }
  .terms-sub { margin-top: 10px; }
  .lg { padding: 8px 0; }
  .lg-in { margin-top: 6px; }
  .lg-fee { margin-top: 2px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-width: 1199.98px) {
  .motion .terms-copy { padding-left: 32px; padding-right: var(--gutter); }
  .lg-sum { font-size: var(--t-note); }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .motion .terms { height: calc(var(--vh) * 286); }
  .motion .terms-stage { display: flex; flex-direction: column; padding-bottom: calc(var(--dock-h) + var(--vh-gap)); }
  .motion .wipes { order: 2; flex: 1; min-height: 0; margin-top: 14px; }
  .motion .terms-copy { display: contents; }
  .motion .terms-copy h2 { order: 0; padding: 24px var(--gutter) 0; }
  .terms-lead { font-size: var(--t-body); line-height: 1.6; }
  .motion .terms-lead { order: 1; padding: 0 var(--gutter); margin-top: 8px; }
  .terms-sub { display: none; }
  .motion .ledger { order: 3; margin: 0; padding: 4px var(--gutter) 8px; }
  .lg { padding: 8px 0; }
  .lg:first-child { border-top: 0; }
  .lg:last-child { border-bottom: 0; }
  .lg-head { gap: 10px; }
  .lg-q { font-size: var(--t-ui); }
  .lg-in { margin-top: 4px; }
  .lg-fee { margin-top: 2px; }
  .lg-in, .lg-fee { gap: 6px; }
  .lg-in .ico, .lg-fee .ico { width: 18px; height: 18px; }
  .motion .w-chip { bottom: 12px; padding: 4px 12px; }
  .motion .w-chip-after { left: var(--gutter); }
  .motion .w-chip-before { right: var(--gutter); }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .terms-lead { font-size: var(--t-lead); }
  .lg-head h3 { font-size: var(--t-lead); }
  .lg-q, .lg-in, .lg-fee { font-size: var(--t-body); }
}

/* ---------- 5. 같은 주소: 어둠 속에서 넓어지는 화면 ---------- */
.web { z-index: 5; background: var(--night); }
.web-stage { background: var(--night); }
.web-head > p { margin-top: 10px; color: var(--paper-2); font-size: var(--t-ui); line-height: 1.6; }
.vs-wrap { display: flex; flex-direction: column; }
.dim { flex: none; display: flex; align-items: center; gap: 10px; height: 36px; color: var(--paper-2); }
.dim i { flex: 1; height: 1px; background: var(--field); position: relative; }
.dim i::before { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--field); }
.dim i:first-child::before { left: 0; }
.dim i:last-child::before { right: 0; }
.dim output { font-size: var(--t-ui); font-weight: 500; line-height: 1.5; white-space: nowrap; color: var(--sun); }
.readout, .web-side, .web-notes { display: none; }

/* 업체 화면. 폭이 바뀌면 컨테이너 쿼리로 스스로 다시 놓인다 */
.vs { flex: 1; min-height: 0; container: vs / inline-size; background: var(--night-2); color: var(--paper); border: 1px solid var(--hair); border-bottom: 0; overflow: hidden; box-shadow: 0 0 120px rgba(255, 217, 168, .1); }
.vs-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "nav" "kpi" "new" "week" "hire";
  align-content: start;
}
.vs-grid > * { background: var(--night-2); }
.vs-head { grid-area: head; display: flex; align-items: center; gap: 14px; padding: 12px 20px 8px; }
.vs-logo { font-size: var(--t-lead); font-weight: 700; color: var(--paper); }
.vs-who { display: flex; flex-direction: column; min-width: 0; }
.vs-who h3 { font-size: var(--t-ui); font-weight: 600; line-height: 1.4; white-space: nowrap; }
.vs-who span { font-size: var(--t-note); color: var(--paper-2); line-height: 1.4; white-space: nowrap; }
.vs-nav { grid-area: nav; display: flex; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--hair); }
.vs-nav button { display: block; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; font-size: var(--t-ui); font-weight: 500; line-height: 1.5; color: var(--paper-2); white-space: nowrap; cursor: pointer; }
.vs-nav li { position: relative; }
.vs-nav li.on button { color: var(--sun); font-weight: 600; box-shadow: inset 0 -2px 0 var(--sun); }
.vs-kpi { grid-area: kpi; display: none; }
.vs-kpi div { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; }
.vs-kpi span { font-size: var(--t-ui); color: var(--paper-2); line-height: 1.5; white-space: nowrap; }
.vs-kpi b { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.vs section { padding: 14px 20px; min-width: 0; }
.vs h4 { display: flex; align-items: center; gap: 6px; font-size: var(--t-body); font-weight: 600; line-height: 1.4; margin-bottom: 6px; }
.vs-tag, .l-short { display: none; }
.vs-new { grid-area: new; }
.vs-detail { grid-area: detail; display: none; }
.vs-week { grid-area: week; }
.vs-hire { grid-area: hire; }
.req { display: grid; gap: 0; padding: 10px 0; border-top: 1px solid var(--hair); }
.req:first-of-type { border-top: 0; padding-top: 2px; }
.req b { font-size: var(--t-body); font-weight: 600; line-height: 1.45; }
.req > span { font-size: var(--t-ui); color: var(--paper-2); line-height: 1.55; }
.req .req-foot { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-top: 2px; }
.req-seat { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); font-size: var(--t-ui); font-weight: 500; white-space: nowrap; }
.req .dots { color: var(--paper-2); }
.req-cal { font-size: var(--t-note); font-weight: 500; line-height: 1.5; color: var(--paper-2); white-space: nowrap; }
.req-cal.is-free { color: var(--sun); }
.vs-detail dl > div { padding: 7px 0; border-top: 1px solid var(--hair); }
.vs-detail dl > div:first-child { border-top: 0; padding-top: 0; }
.vs-detail dt { font-size: var(--t-note); color: var(--paper-2); line-height: 1.5; }
.vs-detail dd { font-size: var(--t-ui); font-weight: 600; line-height: 1.5; }
.vs-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 10px; border: 0; border-radius: var(--r1); background: var(--sun); color: var(--on-sun); font-size: var(--t-ui); font-weight: 600; cursor: pointer; }
.vs-btn:hover { background: var(--sun-press); }
.vs-week li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: var(--t-ui); line-height: 1.5; }
.vs-week b { font-weight: 600; }
.vs-hire p { display: grid; gap: 0; font-size: var(--t-ui); line-height: 1.55; }
.vs-hire b { font-weight: 600; }
.vs-hire span { color: var(--paper-2); }

@container vs (min-width: 600px) {
  .vs-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "head head" "nav nav" "kpi kpi" "new week" "new hire";
  }
  .vs-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--hair); }
  .vs-kpi div { flex-direction: column; gap: 0; padding: 8px 20px; }
  .vs-week, .vs-hire { border-left: 1px solid var(--hair); }
}
@container vs (min-width: 980px) {
  .vs-grid {
    grid-template-columns: 168px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "head head head head"
      "nav kpi kpi kpi"
      "nav new detail week"
      "nav new detail hire";
    height: 100%;
  }
  .vs-head { border-bottom: 1px solid var(--hair); padding: 12px 24px; }
  .vs-nav { flex-direction: column; gap: 4px; padding: 14px 12px; border-bottom: 0; }
  .vs-nav button { width: 100%; padding: 0 12px; text-align: left; }
  .vs-nav li.on button { background: var(--night-3); color: var(--sun); box-shadow: inset 2px 0 0 var(--sun); }
  .vs-detail { display: block; border-left: 1px solid var(--hair); }
  .vs-kpi div { flex-direction: row; gap: 10px; padding: 12px 24px; }
  .vs section { padding: 16px 24px; }
  .req.on { background: var(--night-3); margin: 0 -12px; padding-left: 12px; padding-right: 12px; box-shadow: inset 2px 0 0 var(--sun); border-top-color: transparent; }
  .req.on + .req { border-top-color: transparent; }
}

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .motion .web { height: calc(var(--vh) * 340); margin-top: calc(var(--vh) * -100); background: transparent; }
  .web-inner { padding: calc(var(--bar-h) + clamp(10px, calc(var(--vh) * 2.6), 24px)) var(--gutter) 0; }
  .web-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .web-head > p { margin: 0; padding-bottom: 6px; flex: 0 1 440px; text-align: right; }
  .motion .web-inner { height: 100%; display: flex; flex-direction: column; }
  .motion .vs-bay { flex: 1; min-height: 0; position: relative; margin-top: 8px; }
  .motion .vs-wrap { position: absolute; left: 0; top: 0; bottom: 0; width: 390px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5), (min-width: 600px) and (max-aspect-ratio: 4/5) {
  /* 넓어지는 화면 옆 설명: 화면에 밀려 가다 자리가 모자라기 전에 사라진다 */
  .motion .web-side {
    display: block; position: absolute; left: 0; top: 36px; width: min(480px, calc(100% - 448px));
    padding-top: 24px; will-change: transform; transition: opacity .2s, visibility 0s;
  }
  .motion .web-side.is-gone { visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
  .web-steps { display: grid; gap: 28px; }
  .web-steps li { display: grid; gap: 2px; padding-left: 20px; border-left: 1px solid var(--hair); }
  .web-steps b { font-size: var(--t-h3); font-weight: 500; line-height: 1.3; color: var(--paper-3); }
  .web-steps span { font-size: var(--t-ui); line-height: 1.6; color: var(--paper-3); }
  .web-steps li.is-on { border-left-color: var(--sun); box-shadow: -8px 0 16px -8px rgba(255, 217, 168, .8); }
  .web-steps li.is-on b { font-weight: 600; color: var(--sun); }
  .web-steps li.is-on span { color: var(--paper); }
  .web-hint { margin-top: 28px; padding-left: 21px; font-size: var(--t-ui); font-weight: 500; color: var(--paper-2); line-height: 1.6; }
}

@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .web-inner { padding: 24px 0 0; }
  .web-head { padding: 0 var(--gutter); }
  .web-head > p { margin-top: 8px; }
  .dim { display: none; }
  .motion .web { height: calc(var(--vh) * 230); }
  .motion .web-inner { height: 100%; display: flex; flex-direction: column; padding-bottom: calc(var(--dock-h) + var(--vh-gap)); }
  .motion .vs-bay { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
  .motion .readout { flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 var(--gutter); }
  .readout b { font-size: var(--t-ui); font-weight: 500; color: var(--paper-2); line-height: 1.5; white-space: nowrap; }
  .readout b.is-on { font-weight: 600; color: var(--sun); }
  .readout i { flex: 1; height: 1px; background: var(--field); }
  .readout u { display: block; height: 100%; background: var(--sun); box-shadow: 0 0 8px var(--sun); transform-origin: left; transform: scaleX(0); }
  .motion .vs-wrap { flex: 1; min-height: 0; }
  .vs { border-left: 0; border-right: 0; }

  /* 폰 폭 화면에서 보이는 양을 높이에 맞춘다. 아래가 잘린 줄이 남지 않게 한다 */
  .vs-week, .vs-hire, .vs-new .req:nth-of-type(3) { display: none; }
  /* 폰에서 PC 배치 보기: 글자는 실제 14px 이상, 내용만 줄인다 */
  .vs.is-wide .vs-grid {
    grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head head head" "nav new detail" "nav week week";
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
  }
  .vs.is-wide .vs-head { padding: 8px 12px; border-bottom: 1px solid var(--hair); }
  .vs.is-wide .vs-logo { font-size: var(--t-body); }
  .vs.is-wide .vs-who h3 { font-size: var(--t-note); }
  .vs.is-wide .vs-who span { display: none; }
  .vs.is-wide .vs-nav { flex-direction: column; gap: 0; padding: 8px 6px; border-bottom: 0; }
  .vs.is-wide .vs-nav button { width: 100%; min-height: 44px; padding: 0 6px; text-align: left; font-size: var(--t-note); }
  .vs.is-wide .vs-nav li.on button { background: var(--night-3); color: var(--sun); box-shadow: inset 2px 0 0 var(--sun); }
  .vs.is-wide .l-long, .vs.is-wide .d-more, .vs.is-wide .req > span { display: none; }
  .vs.is-wide .l-short { display: inline; }
  .vs.is-wide .vs-btn { min-height: 44px; margin-top: 6px; font-size: var(--t-note); }
  .vs.is-wide .vs-tag {
    display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--sun); color: var(--on-sun); font-size: var(--t-note); font-weight: 600; line-height: 1;
  }
  .vs.is-wide .vs-nav .vs-tag { position: absolute; right: -6px; top: -10px; z-index: 1; }
  .vs.is-wide section { padding: 8px 10px; }
  .vs.is-wide h4 { font-size: var(--t-ui); margin-bottom: 4px; }
  .vs.is-wide .vs-new { display: block; }
  .vs.is-wide .req { padding: 3px 0; border-top: 0; }
  .vs.is-wide .req b { font-size: var(--t-note); font-weight: 500; line-height: 1.4; }
  .vs.is-wide .vs-detail { display: block; border-left: 1px solid var(--hair); }
  .vs.is-wide .vs-detail dl > div { padding: 3px 0; border-top: 0; }
  .vs.is-wide .vs-detail dd { font-size: var(--t-note); line-height: 1.4; }
  .vs.is-wide .vs-week { display: block; border-top: 1px solid var(--hair); }
  .vs.is-wide .vs-week ul { display: flex; gap: 12px; }
  .vs.is-wide .vs-week li { display: flex; gap: 4px; padding: 0; font-size: var(--t-note); line-height: 1.4; white-space: nowrap; }
  .vs.is-wide .vs-week li.d-more { display: none; }
  .vs.is-wide .vs-hire { display: none; }
  .motion .web-notes { flex: none; display: none; padding: 8px var(--gutter) 4px; background: var(--night); }
  .motion .vs-bay.is-wide .web-notes { display: grid; gap: 4px; }
  .motion .vs-bay.is-wide .vs-wrap { flex: 0 1 auto; }
  .motion .vs-bay.is-wide .vs { border-bottom: 1px solid var(--hair); }
  .motion .vs-bay.is-wide { padding-bottom: 8px; }
  .web-notes li { display: flex; align-items: center; gap: 8px; font-size: var(--t-ui); line-height: 1.5; font-weight: 500; }
  .web-notes .vs-tag { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sun); color: var(--on-sun); font-size: var(--t-note); font-weight: 600; line-height: 1; }
}
@media (max-height: 700px) and (max-aspect-ratio: 4/5) {
  .vs.is-wide .vs-btn { display: none; }
}
@media (max-width: 599.98px) and (max-height: 630px) {
  .vs.is-wide .vs-week, .web-notes li:nth-child(3) { display: none; }
}
/* 높이가 넉넉한 폰은 더 보여 준다 */
@media (min-height: 760px) and (max-aspect-ratio: 4/5), (min-height: 760px) and (max-width: 899.98px) {
  .vs-new .req:nth-of-type(3) { display: grid; }
  .vs.is-wide .req:nth-of-type(3) { display: grid; }
}
@media (min-height: 860px) and (max-aspect-ratio: 4/5), (min-height: 860px) and (max-width: 899.98px) {
  .vs-week { display: block; }
  .vs-week .d-more { display: none; }
}
/* 낮은 PC: 아래가 잘린 줄이 남지 않게 보이는 양을 줄인다 */
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 700px) {
  .vs-hire, .vs-new .req:nth-of-type(3), .vs-detail dl > .d-more:last-child { display: none; }
  .web-head > p { padding-bottom: 2px; }
  .vs section { padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 620px) {
  .vs-detail .d-more { display: none; }
  .vs-kpi { display: none !important; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-width: 1199.98px) and (max-height: 800px) {
  .web-head .kicker { display: none; }
  .vs-new .req:nth-of-type(3) { display: none; }
}
/* 세로 태블릿: PC처럼 왼쪽에서 넓어진다 */
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .motion .web { height: calc(var(--vh) * 260); }
  .motion .readout, .motion .vs-bay.is-wide .web-notes { display: none; }
  .dim { display: flex; }
  .motion .vs-bay { position: relative; margin: 12px var(--gutter) 0; display: block; }
  .motion .vs-wrap { position: absolute; left: 0; top: 0; bottom: auto; max-height: 100%; width: 390px; display: flex; }
  .vs { border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); }
  .vs-week { display: block; }
  .vs-week .d-more { display: grid; }
  .vs-hire { display: block; }
  .vs-new .req:nth-of-type(3) { display: grid; }
}

/* ---------- 6. 일손: 달력의 두 날. 바쁜 날은 불이 켜져 있고, 빈 날은 기다린다 ---------- */
.hands { position: relative; z-index: 6; background: var(--night); padding: 140px var(--gutter) 160px; }
.hands-head > p:last-child { margin-top: 16px; color: var(--paper-2); }
.hands-board { margin-top: 56px; }
.day { display: none; }
.hand-tab { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; font-size: var(--t-ui); font-weight: 500; line-height: 1.5; white-space: nowrap; }
.hand-tab b { font-size: var(--t-body); font-weight: 600; }
.hand-body { padding: 32px 40px 32px; }
.hand-busy .hand-tab, .hand-busy .hand-body { background: var(--sun); color: var(--on-sun); }
.hand-free .hand-tab, .hand-free .hand-body { background: var(--night-3); color: var(--paper); }
.hand-busy .hand-body { box-shadow: 0 0 90px rgba(255, 217, 168, .18); }
.hand-role { font-size: var(--t-ui); font-weight: 500; line-height: 1.5; }
.hand-busy .hand-role { color: var(--ink-2); }
.hand-free .hand-role { color: var(--sun); }
.hand h3 { margin-top: 4px; font-weight: 600; }
.hand-pay { margin: 24px 0 20px; font-size: clamp(48px, 6vw, 96px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.hand dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid rgba(245, 239, 230, .2); }
.hand-busy dl > div { border-top-color: rgba(27, 19, 10, .28); }
.hand dt { font-weight: 500; font-size: var(--t-ui); line-height: 1.6; }
.hand-busy dt { color: var(--ink-2); }
.hand-free dt { color: var(--paper-2); }
.hand dd { font-size: var(--t-ui); font-weight: 600; line-height: 1.6; }
.hand-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding: 0; border: 0; background: none; font-size: var(--t-body); font-weight: 600; line-height: 1.4; color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; cursor: pointer; }
.hand-link .ico { width: 20px; height: 20px; transition: transform .2s var(--ease-out); }
.hand-link:hover .ico { transform: translateX(3px); }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .motion .hands { margin-top: calc(var(--vh) * -100); }
  .hands-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 3px; }
  .hand { display: contents; }
  .hand-tab { grid-row: 1; align-self: end; flex-direction: column; gap: 0; padding: 10px 16px; }
  .hand-tab b { font-size: var(--t-lead); line-height: 1.3; }
  .hand-body { grid-row: 2; }
  .hand-busy .hand-tab { grid-column: 1; }
  .hand-busy .hand-body { grid-column: 1 / 5; }
  .hand-free .hand-tab { grid-column: 5; }
  .hand-free .hand-body { grid-column: 5 / 9; }
  .day { display: block; grid-row: 1; align-self: end; padding: 10px 8px 12px; font-size: var(--t-ui); font-weight: 500; line-height: 1.5; color: var(--paper-3); text-align: center; }
  .day-2 { grid-column: 2; }
  .day-3 { grid-column: 3; }
  .day-4 { grid-column: 4; }
  .day-6 { grid-column: 6; }
  .day-7 { grid-column: 7; }
  .day-8 { grid-column: 8; }
}
/* 폭 900~1099에서 달력 탭 글자가 탭 밖으로 넘치지 않게 줄인다 */
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-width: 1099.98px) {
  .hand-tab { padding: 10px 4px 10px 10px; font-size: var(--t-note); }
  .hand-body { padding: 24px; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .hands { padding: 72px var(--gutter) 96px; }
  .hands-board { margin-top: 28px; display: grid; gap: 48px; }
  .hand-tab { display: inline-flex; vertical-align: bottom; padding: 8px 16px; }
  .hand-body { padding: 20px; }
  .hand-pay { margin: 14px 0 12px; font-size: 56px; }
  .hand dl > div { grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 8px 0; }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .hand-body { padding: 28px 32px 20px; }
}

/* ---------- 7. 마지막: 아침이 든 집 ---------- */
.final { z-index: 7; background: var(--night); }
.final-stage { position: relative; background: var(--night); }
.final-band { position: relative; background: var(--night); }
.motion .final-band { visibility: hidden; transform: translate3d(0, 100%, 0); transition: transform .9s var(--ease-move), visibility 0s .9s; will-change: transform; }
.motion .is-in .final-band { visibility: visible; transform: none; transition: transform .9s var(--ease-move); }
.final-text h2 { font-weight: 600; letter-spacing: -.02em; }
.final-lead { margin-top: 12px; font-size: var(--t-body); line-height: 1.6; color: var(--paper-2); }
.final-seats { display: flex; align-items: center; gap: 12px; font-size: var(--t-ui); font-weight: 500; line-height: 1.5; color: var(--paper-2); }
.final-seats .dots { color: var(--sun); }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .motion .final { height: calc(var(--vh) * 200); }
  .motion .final-band { position: absolute; inset: auto 0 0 0; }
  .final-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 8px 48px; align-items: end; padding: 28px var(--gutter) 32px; }
  .final-text h2 { font-size: min(var(--t-h1), 5.4vw); line-height: 1.12; }
  .final-act { display: grid; gap: 12px; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .motion .final { height: calc(var(--vh) * 170); }
  .motion .final-band { position: absolute; inset: auto 0 0 0; padding: 20px var(--gutter) calc(var(--dock-h) + var(--vh-gap) + 16px); }
  .final-text h2 { font-size: 44px; line-height: 1.14; }
  .final-cta { display: none; }
  .final-lead { margin-top: 8px; }
  .final-seats { margin-top: 10px; }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .final-text h2 { font-size: var(--t-h1); }
  .final-lead { font-size: var(--t-lead); }
}