/* 아옴 포스터 시안: 구역별 배치.
   .motion 은 고정과 스크럽이 켜진 상태다. 움직임 없는 모드의 배치는 flow.css에 있다.
   PC: (min-width: 900px) and (min-aspect-ratio: 4/5). 나머지는 세로 화면 규칙을 쓴다.
   큰 제목의 글자 크기는 var(--fill)을 글자 폭(em)으로 나눠 폭을 꽉 채운다. */

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

/* ---------- 1. 히어로: 크림 종이 한 장, 아래로 영상이 비친다 ---------- */
.hero { z-index: 1; background: var(--paper); }
.hero-stage { position: relative; background: var(--paper); }
.hero-media, .final-media { position: absolute; inset: 0; overflow: hidden; }
.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(var(--shift-x, 0px), var(--shift-y, 0px), 0) scale(var(--zoom, 1.06)); transition: transform var(--open-ms, .8s) var(--ease-move); will-change: transform; }
.motion .hero-stage:not(.is-measured) .hero-media { transition: none; }
.motion .is-open .hero-media { transform: none; }
.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, 255, 255, .6), rgba(255, 255, 255, 0) 72%); }
.hero-panel { position: relative; background: var(--paper); display: flex; flex-direction: column; }
.hero-copy { position: relative; }
.hero-copy h1 { font-size: var(--hero-fs); line-height: .96; letter-spacing: -.06em; margin-left: -.03em; }
.hero-copy h1 span { white-space: nowrap; }
.h-c { display: block; }
.hero-note { color: var(--ink-2); }
.hero-tab { display: none; }
.hero-after { display: none; }

/* 스티커: 포스터와 영상의 경계에 붙인다. 단색 면 위 글자다 */
.sticker { position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 50%; background: var(--cobalt); color: var(--paper); }
.sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.sticker text { fill: currentColor; font-size: 21px; font-weight: 800; letter-spacing: 0; }
.sticker b { grid-area: 1 / 1; font-weight: 900; line-height: 1; text-align: center; }
.st-big { font-size: 84px; letter-spacing: -.05em; }
.st-small { display: none; font-size: 16px; letter-spacing: -.03em; line-height: 1.1 !important; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 지금 일어나는 일을 영상 밖 단색 면에 적는다 */
.hero-status { background: var(--paper); }
.hero-bar { display: block; height: 6px; background: var(--paper-2); overflow: hidden; }
.hero-bar b { display: block; height: 100%; background: var(--cobalt); transform-origin: left; transform: scaleX(0); }
.status-lines { display: grid; font-size: var(--t-ui); font-weight: 600; line-height: 1.5; }
.status-lines > span { grid-area: 1 / 1; display: flex; gap: 10px; visibility: hidden; opacity: 0; white-space: nowrap; }
.status-lines > span.is-on { visibility: visible; opacity: 1; transition: opacity .2s; }
.status-lines b { font-weight: 900; }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  :root { --hero-fs: min(calc(var(--fill) / 5.54), calc(var(--vh) * 27.4)); }
  .motion .hero { height: calc(var(--vh) * 394); }
  .hero-stage { --shift-y: calc(var(--vh) * 30); }
  .hero-foot { display: contents; }
  .motion .hero-panel { position: absolute; inset: 0 0 auto 0; z-index: 2; transition: transform .8s var(--ease-move); will-change: transform; }
  .motion .is-open .hero-panel { transform: translate3d(0, -104%, 0); visibility: hidden; transition: transform .8s var(--ease-move), visibility 0s .8s; }
  .hero-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 4px var(--gutter) 0; }
  .hero-copy { padding: 0 var(--gutter) 16px; }
  .hero-side { position: absolute; right: var(--gutter); bottom: 24px; width: min(540px, 38vw); display: grid; gap: 14px; }
  .hero-lead { font-size: var(--t-lead); font-weight: 700; line-height: 1.45; letter-spacing: -.03em; }
  .sticker { width: 168px; height: 168px; left: 53%; bottom: -84px; transform: rotate(-10deg); }
  .motion .hero-status { position: absolute; right: var(--gutter); bottom: 24px; width: min(460px, calc(100vw - var(--gutter) * 2)); padding: 0 0 12px; }
  .status-lines { padding: 12px 20px 0; font-size: var(--t-body); }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  :root { --hero-fs: min(calc(var(--fill) / 3.08), calc(var(--vh) * 13.8)); --zoom: 1.03; --open-ms: .7s; }
  .motion .hero { height: calc(var(--vh) * 284); }
  .hero-logo { display: none; }
  .hero-stage { --shift-y: calc(var(--vh) * -18); }
  .motion .hero-foot { position: absolute; inset: auto 0 0 0; background: var(--paper); 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: 0 0 calc(var(--dock-h) + var(--vh-gap) + 8px); }
  .hero-top { order: 3; padding: 4px var(--gutter) 0; }
  .hero-copy { order: 2; padding: 10px var(--gutter) 0; }
  .ticker { order: 1; font-size: var(--t-body); }
  .ticker-run { padding: 9px 0; }
  .hero-copy h1 span { display: block; }
  .hero-side { margin-top: 8px; }
  .hero-lead { font-size: var(--t-ui); font-weight: 700; line-height: 1.45; letter-spacing: -.03em; }
  .hero-cta { display: none; }
  .hero-status { padding-bottom: 6px; }
  .status-lines { padding: 6px var(--gutter) 0; }
  .sticker { width: 88px; height: 88px; right: 12px; top: -146px; transform: rotate(10deg); }
  .sticker svg, .st-big { display: none; }
  .st-small { display: block; }
  .motion .hero-tab {
    position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 0 16px 0 var(--gutter);
    background: var(--paper); color: var(--ink); text-decoration: none;
  }
  .hero-tab b { font-size: 26px; font-weight: 900; letter-spacing: -.07em; line-height: 1; }
  .hero-tab span { font-size: var(--t-note); font-weight: 700; color: var(--ink-2); line-height: 1.5; }
}
@media (max-height: 700px) and (max-aspect-ratio: 4/5), (max-height: 700px) and (max-width: 899.98px) {
  .hero-panel .ticker, .sticker { display: none; }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .hero-lead { font-size: var(--t-lead); }
  .hero-copy { padding-top: 16px; }
  .hero-side { margin-top: 16px; }
}

/* ---------- 2. 공간 선택: 코발트 한 색으로 찍은 사진, 고른 칸만 제 색이 돈다 ---------- */
.spaces { z-index: 2; background: var(--paper); }
.spaces-stage { background: var(--paper); }
.spaces-head h2 { font-size: var(--sp-fs); margin-left: -.03em; }
.spaces-head p { font-weight: 700; color: var(--ink-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: 4px solid var(--cobalt); outline-offset: 3px; }
.sp-ph { display: block; position: relative; overflow: hidden; background: var(--cobalt); cursor: pointer; }
.sp-ph img { width: 100%; height: auto; filter: grayscale(1) contrast(1.25) brightness(1.02); mix-blend-mode: screen; transition: filter .35s; }
.sp.is-active .sp-ph img, .sp:hover .sp-ph img { filter: none; mix-blend-mode: normal; }
.sp-lb { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 8px; }
.sp-lb b { font-weight: 900; letter-spacing: -.05em; line-height: 1.1; white-space: nowrap; }
.sp-lb .ico { width: 22px; height: 22px; color: var(--cobalt); opacity: 0; transition: transform .2s var(--ease-out); }
.sp.is-active .sp-lb .ico { opacity: 1; }
.sp-btn:hover .sp-lb .ico { transform: translateX(4px); }
.sp-desc { grid-column: 1 / -1; font-size: var(--t-note); font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.sp-wit { grid-column: 1 / -1; display: none; font-size: var(--t-body); font-weight: 800; line-height: 1.35; letter-spacing: -.03em; color: var(--ink); }
.sp.is-active .sp-desc br { display: none; }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  :root { --sp-fs: min(calc(var(--fill) / 9.52), calc(var(--vh) * 16)); }
  .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) + 10px) var(--gutter) 14px; border-top: var(--line) solid var(--ink); }
  .spaces-head p { font-size: var(--t-body); margin-bottom: 2px; }
  .motion .spaces-head { flex: none; margin-bottom: 14px; }
  .motion .sp-list { flex: 1; min-height: 0; display: flex; gap: 6px; }
  .motion .sp { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; transition: flex-grow .5s var(--ease-out); }
  .motion .sp.is-active { flex-grow: 3.9; }
  .motion .sp-btn { flex: none; height: 116px; overflow: hidden; }
  .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-lb { padding-top: 8px; }
  .motion .sp-lb b { font-size: 24px; }
  .motion .sp.is-active .sp-lb b { font-size: 44px; color: var(--cobalt); }
  .motion .sp.is-active .sp-desc { order: 3; font-size: var(--t-note); }
  .motion .sp.is-active .sp-wit { display: block; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  :root { --sp-fs: min(calc(var(--fill) / 4.08), calc(var(--vh) * 10)); }
  .spaces-head p { margin-bottom: 6px; font-size: var(--t-ui); }
  .motion .spaces { height: calc(var(--vh) * 200); }
  .motion .spaces-stage { display: flex; flex-direction: column; padding: 16px 0 calc(var(--dock-h) + var(--vh-gap) + 10px); border-top: var(--line) solid var(--ink); }
  .motion .spaces-head { flex: none; padding: 0 var(--gutter); margin-bottom: 12px; }
  .motion .sp-list {
    --chip: 52px; --wit: 62px;
    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: 0;
    margin: 0; padding: 0 var(--gutter);
  }
  .motion .sp { position: static; }
  .motion .sp-btn { position: static; height: var(--chip); }
  .motion .sp-btn::after { display: none; }
  .motion .sp-btn:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
  .motion .sp-ph {
    position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--chip) * 2 + var(--wit));
    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 .42s var(--ease-out); }
  .motion .sp-lb { display: flex; height: 100%; justify-content: center; align-items: center; box-shadow: inset 0 0 0 1.5px var(--ink); }
  .motion .sp-lb .ico, .motion .sp-desc { display: none; }
  .motion .sp-lb b { font-size: var(--t-body); font-weight: 800; letter-spacing: -.03em; }
  .motion .sp.is-active .sp-lb { background: var(--cobalt); color: var(--paper); box-shadow: none; }
  .motion .sp.is-active .sp-lb b { font-weight: 900; }
  .motion .sp.is-active .sp-wit {
    display: flex; align-items: center; position: absolute; left: 0; right: 0; bottom: calc(var(--chip) * 2); height: var(--wit);
    padding: 0 var(--gutter); background: var(--paper); font-size: var(--t-lead); font-weight: 900;
  }
}
@keyframes sp-reveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* ---------- 3. 세 자리: 코발트 면 위에 도장을 찍는다 ---------- */
.seats { z-index: 3; background: var(--cobalt); overflow-x: clip; }
.seats-stage, .control-stage { background: var(--cobalt); }
.seats-left h2 { font-size: var(--seat-fs); margin-left: -.03em; }
.seats-lead { margin-top: 16px; font-size: var(--t-lead); font-weight: 700; line-height: 1.45; letter-spacing: -.03em; }
.motion .swap { display: grid; }
.motion .swap > * { grid-area: 1 / 1; transition: opacity .25s; }
.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 { margin-top: 20px; }
.count-label { display: grid; font-size: var(--t-body); font-weight: 800; line-height: 1.4; }
.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.08); overflow: hidden; }
.count-strip { display: block; transform: translate3d(0, calc(var(--i, 0) * var(--seat-num) * -1.08), 0); transition: transform .4s var(--ease-out); }
.count-strip b { display: flex; align-items: center; height: calc(var(--seat-num) * 1.08); font-size: var(--seat-num); font-weight: 900; letter-spacing: -.06em; line-height: 1; white-space: nowrap; }
.count-strip small { margin-left: .06em; font-size: .36em; font-weight: 900; letter-spacing: -.02em; }

/* 자리판 */
.board { --ring: 104px; --ring-gap: 18px; }
.board-head { font-size: var(--t-ui); font-weight: 700; line-height: 1.5; margin-bottom: 12px; }
.slots { display: grid; gap: 10px; }
.slot { display: grid; grid-template-columns: var(--ring) minmax(0, 1fr); gap: var(--ring-gap); align-items: center; }

/* 빈 자리는 점선 동그라미, 차면 도장이 쾅 찍힌다 */
.ring { position: relative; display: block; width: var(--ring); height: var(--ring); }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-dasharray: 5 6; }
.ring-fill { fill: none; stroke: var(--paper); stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ring i {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-content: center; justify-items: center;
  background: var(--paper); color: var(--cobalt);
  border: 3px solid var(--cobalt); outline: 3px solid var(--paper); outline-offset: 0;
  font-weight: 900; line-height: 1;
  opacity: 0; transform: rotate(var(--tilt, -8deg)) scale(0);
  filter: url(#ink);
}
.ring i b { font-size: 46px; letter-spacing: -.04em; line-height: 1; }
.ring i small { font-size: var(--t-note); letter-spacing: -.04em; line-height: 1.1; }
.slot.is-taken .ring i { opacity: 1; transform: rotate(var(--tilt, -8deg)) scale(1); animation: stamp .36s var(--ease-out) both; }

.slot-body { position: relative; }
.slot-empty { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 20px; border: 2px dashed var(--paper); color: var(--paper); font-size: var(--t-body); font-weight: 700; 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: 900; }
.slot-empty-b span { display: flex; align-items: center; gap: 6px; font-size: var(--t-ui); font-weight: 600; }
.slot-empty-b .ico { width: 18px; height: 18px; }
.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); color: var(--paper); }
.slot-empty .btn-line:hover { background: var(--paper); color: var(--cobalt); }
.slot:not(.is-out) .slot-undo { visibility: hidden; }

/* 업체 제안 카드: 문턱을 넘으면 시간으로 들어온다 */
.offer {
  position: relative; background: var(--paper); color: var(--ink); padding: 14px 24px;
  visibility: hidden; opacity: 0; transform: translate3d(28px, 0, 0);
  transition: opacity .22s, transform .36s var(--ease-out), padding .28s var(--ease-out), visibility 0s .36s;
}
.slot.is-taken .offer { visibility: visible; opacity: 1; transform: none; transition: opacity .22s, transform .36s var(--ease-out), padding .28s var(--ease-out); }
.slot.is-out .offer { visibility: hidden; opacity: 0; transform: translate3d(36px, 0, 0); transition: opacity .22s, transform .36s var(--ease-out), visibility 0s .36s; }
.offer-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.offer-top h3 { font-size: min(2.1vw, 32px); font-weight: 900; white-space: nowrap; }
.offer-price { font-size: min(3.3vw, 52px); text-align: right; font-weight: 900; letter-spacing: -.05em; line-height: 1.05; white-space: nowrap; }
.offer-price small { display: block; font-size: var(--t-note); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: var(--ink-2); }
.offer-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; margin-top: 2px; }
.offer-meta { font-size: var(--t-ui); font-weight: 600; color: var(--ink-2); line-height: 1.5; white-space: nowrap; }
.offer-num { display: flex; align-items: center; gap: 8px; font-size: var(--t-ui); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.offer-num .ico { width: 20px; height: 20px; }
.n-label { color: var(--ink-2); }
.n-state { padding: 0 8px; background: var(--paper-2); font-size: var(--t-note); font-weight: 900; line-height: 1.6; }
/* 잠금이 풀리는 짧은 순간: 카드가 앉은 뒤 번호가 열린다 */
.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: .42s; }
.slot.is-taken .ico-open, .slot.is-taken .n-clear, .slot.is-taken .n-open { opacity: 1; transition-delay: .42s; }
.offer .n-state { transition: background-color 0s, color 0s; }
.slot.is-taken .offer .n-state { background: var(--cobalt); color: var(--paper); transition-delay: .42s; }

.offer-rm { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); visibility: hidden; opacity: 0; transition: opacity .2s; }
.board.is-control .offer { padding-right: 112px; }
.board.is-control .slot.is-taken .offer-rm { visibility: visible; opacity: 1; }
.slot.is-out .offer-rm { visibility: hidden; }

/* 네 번째 업체: 마감선 아래 먹 면에 남고, 마감 도장을 맞는다 */
.closed { position: relative; margin-top: 14px; padding-top: 14px; }
.closed-line { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--paper); transform-origin: left; transform: scaleX(0); }
.fourth { position: relative; margin-left: calc(var(--ring) + var(--ring-gap)); padding: 12px 24px; background: var(--ink); color: var(--paper); visibility: hidden; }
.closed.is-in .fourth { visibility: visible; animation: fourth-hit .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: min(2.1vw, 32px); font-weight: 900; white-space: nowrap; }
.fourth-note { font-size: var(--t-ui); font-weight: 700; line-height: 1.5; }
.fourth .offer-num { margin-top: 2px; }
.fourth .n-state { display: inline-block; background: var(--paper); color: var(--ink); }
.fourth .n-label { color: inherit; }
.fourth-stamp {
  --tilt: -12deg;
  position: absolute; right: 18px; top: 50%; margin-top: -42px; display: grid; place-items: center; width: 84px; height: 84px;
  border-radius: 50%; border: 5px solid var(--paper); outline: 2px solid var(--paper); outline-offset: -11px;
  color: var(--paper); font-size: 26px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  transform: rotate(var(--tilt)); filter: url(#ink);
}
.closed.is-in .fourth-stamp { animation: stamp .36s .28s var(--ease-out) both; }
@keyframes fourth-hit {
  0% { transform: translate3d(0, 64px, 0); opacity: 0; }
  38% { transform: translate3d(0, -12px, 0); opacity: 1; }
  62% { transform: translate3d(0, 10px, 0); }
  100% { transform: none; }
}

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  :root { --seat-fs: min(calc((100vw - var(--gutter) * 2 - 64px) * .42 / 3.44), calc(var(--vh) * 17.4)); }
  .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) + 12px) var(--gutter) 20px; }
  .seats-grid { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 64px; align-items: center; }
  .motion .control { display: none; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 800px) {
  .offer { padding: 8px 18px; }
  .offer-price { font-size: 32px; }
  .offer-top h3, .fourth h3 { font-size: var(--t-lead); }
  .board { --ring: 68px; --ring-gap: 14px; }
  .ring i b { font-size: 30px; }
  .ring i small { display: none; }
  .slots { gap: 8px; }
  .fourth { padding: 8px 18px; }
  .fourth-stamp { width: 68px; height: 68px; margin-top: -34px; font-size: 20px; outline-offset: -10px; }
  .closed { margin-top: 10px; padding-top: 12px; }
  .board-head { margin-bottom: 8px; }
  .count { margin-top: 10px; }
  .seats-lead { margin-top: 10px; font-size: var(--t-body); }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 660px) {
  .offer { padding: 6px 16px; }
  .offer-sub { margin-top: 0; }
  .offer-price { font-size: 26px; }
  .board { --ring: 52px; --ring-gap: 12px; }
  .ring i b { font-size: 24px; }
  .fourth .offer-num { display: none; }
  .fourth-stamp { width: 52px; height: 52px; margin-top: -26px; font-size: 15px; outline: 0; border-width: 3px; }
}
/* 폭이 좁은 PC */
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-width: 1199.98px) {
  .seats-grid { gap: 32px; }
  .offer { padding: 10px 14px; }
  .offer-top h3, .fourth h3 { font-size: var(--t-lead); }
  .offer-price { font-size: 28px; }
  .board { --ring: 60px; --ring-gap: 12px; }
  .board-time { display: none; }
  .ring i b { font-size: 26px; }
  .ring i small { display: none; }
  .fourth .offer-num .n-label { display: none; }
}

@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  :root { --seat-fs: min(calc(var(--fill) / 4.7), calc(var(--vh) * 9.4)); }
  .motion .seats { height: calc(var(--vh) * 280); }
  .motion .control { height: calc(var(--vh) * 190); }
  .motion .swap-b { display: none; }
  .motion .seats-grid { position: relative; height: 100%; display: flex; flex-direction: column; padding: 16px var(--gutter) calc(var(--dock-h) + var(--vh-gap) + 10px); }
  .motion .seats-left { display: contents; }
  .seats-lead { margin-top: 8px; font-size: var(--t-ui); }
  .motion .count { position: absolute; right: var(--gutter); top: 14px; margin: 0; text-align: right; }
  .motion .count .count-strip b { justify-content: flex-end; }
  .count-label { font-size: var(--t-ui); }
  .board { --ring: 52px; --ring-gap: 8px; }
  .motion .board { flex: none; margin-top: auto; }
  .board-head { font-size: var(--t-note); margin-bottom: 6px; }
  .board-time { display: none; }
  .slots { gap: 8px; }
  .ring i { border-width: 2px; outline-width: 2px; }
  .ring i b { font-size: 24px; }
  .ring i small { display: none; }
  .ring-track { stroke-width: 3; }
  .ring-fill { stroke-width: 6; }
  .slot-empty { padding: 0 12px; 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: 8px 12px; }
  .offer-top { gap: 8px; }
  .offer-top h3 { font-size: var(--t-body); }
  .offer-price { font-size: 24px; text-align: right; }
  .offer-price small { display: block; margin: 0; font-size: var(--t-note); 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.45; }
  .offer-num { gap: 6px; line-height: 1.4; font-size: var(--t-note); }
  .offer-num .ico { width: 18px; height: 18px; }
  .n-state { margin-left: 2px; }
  .board.is-control .offer { padding-right: 12px; }
  .offer-rm { top: auto; right: 8px; bottom: 6px; transform: none; min-width: 60px; padding: 0 10px; }
  .slot-undo { min-width: 76px; padding: 0 10px; }
  .closed { margin-top: 8px; padding-top: 10px; }
  .fourth { padding: 8px 12px; }
  .fourth h3 { font-size: var(--t-body); }
  .fourth-top { gap: 8px; }
  .fourth-note { font-size: var(--t-note); }
  .fourth .n-label { display: none; }
  .fourth .offer-num { margin-top: 0; }
  .fourth-stamp { right: 8px; width: 60px; height: 60px; margin-top: -30px; font-size: 18px; border-width: 3px; outline-offset: -8px; outline-width: 1.5px; }
}
/* 낮은 폰: 제목을 두 줄 크기로 줄여 네 번째 업체까지 넣는다 */
@media (max-width: 599.98px) and (max-height: 700px) {
  :root { --seat-fs: 50px; --seat-num: 46px; }
  .seats-lead { display: none; }
  .slots { gap: 6px; }
  .offer { padding: 6px 12px; }
}
/* 세로 태블릿 */
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  :root { --seat-fs: calc(var(--vh) * 9); }
  .seats-lead { font-size: var(--t-lead); margin-top: 16px; }
  .board { --ring: 76px; --ring-gap: 14px; }
  .ring i b { font-size: 34px; }
  .offer { padding: 14px 18px; }
  .offer-top h3, .fourth h3 { font-size: var(--t-h3); }
  .offer-price { font-size: 40px; }
  .offer-sub { display: flex; margin-top: 4px; }
  .offer-meta, .offer-num { font-size: var(--t-ui); }
  .board-head { font-size: var(--t-ui); margin-bottom: 12px; }
  .board.is-control .offer { padding-right: 104px; }
  .offer-rm { top: 50%; right: 16px; bottom: auto; transform: translateY(-50%); }
  .fourth { padding: 12px 18px; }
  .fourth-note { font-size: var(--t-ui); }
}

/* ---------- 4. 조건 공개 ---------- */
.terms { z-index: 4; background: var(--paper); }
.terms-stage { background: var(--paper); }
.terms-copy h2 { font-size: var(--terms-fs); margin-left: -.05em; }
.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(--paper); color: var(--ink); font-size: var(--t-ui); font-weight: 800; line-height: 1.5; white-space: nowrap; }
.terms-lead { margin-top: 12px; font-size: var(--t-lead); font-weight: 700; line-height: 1.4; letter-spacing: -.03em; }
.terms-sub { margin-top: 16px; font-size: var(--t-ui); font-weight: 700; color: var(--ink-2); line-height: 1.5; }

/* 조건 장부: 영수증처럼 굵은 줄로 끊는다. 지금 칸만 펼치고 지난 칸은 요약으로 남긴다 */
.ledger { margin-top: 6px; border-top: 4px solid var(--ink); }
.lg { padding: 10px 0; border-bottom: 2px solid var(--ink); }
.lg-head { display: flex; align-items: baseline; gap: 12px; }
.lg-head h3 { flex: none; font-size: var(--t-h3); font-weight: 900; }
.lg-q { font-size: var(--t-body); font-weight: 700; line-height: 1.4; }
.lg-sum { margin-left: auto; font-size: var(--t-ui); font-weight: 700; line-height: 1.4; color: var(--ink-2); text-align: right; white-space: nowrap; }
.lg-in, .lg-fee { display: flex; gap: 8px; font-size: var(--t-body); line-height: 1.5; }
.lg-in { margin-top: 8px; font-weight: 600; }
.lg-in b { font-weight: 900; margin-right: 4px; }
.lg-fee { margin-top: 8px; padding: 10px 14px; background: var(--cobalt); color: var(--paper); font-weight: 700; }
.lg-fee b { font-weight: 900; }
.lg-in .ico, .lg-fee .ico { width: 20px; height: 20px; margin-top: .25em; }

.motion .wipes { position: relative; overflow: hidden; background: var(--ink); }
.motion .wipe { position: absolute; inset: 0; visibility: hidden; transform: translate3d(0, 100%, 0); transition: transform .45s var(--ease-out), visibility 0s .45s; }
.motion .wipe.is-in { visibility: visible; transform: none; transition: transform .45s var(--ease-out); }
.motion .wipe.is-under { visibility: hidden; transition: visibility 0s .45s; }
.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: 8px; height: 100%; background: var(--cobalt); transform-origin: 4px 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 .3s 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, 8px, 0); } to { opacity: 1; transform: none; } }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  :root { --terms-fs: min(calc((44vw - var(--gutter) - 48px) / 4.55), calc(var(--vh) * 13.2)); }
  .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: flex-start;
    padding: calc(var(--bar-h) + 20px) var(--gutter) 12px 48px;
    background: var(--paper);
  }
  .motion .w-chip { bottom: 24px; }
  .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) {
  .motion .terms-copy { padding-top: calc(var(--bar-h) + 12px); }
  .terms-lead { margin-top: 8px; font-size: var(--t-body); }
  .terms-sub { margin-top: 8px; }
  .lg { padding: 6px 0; }
  .lg-in, .lg-fee { font-size: var(--t-ui); }
  .lg-fee { padding: 6px 12px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-width: 1199.98px) {
  .motion .terms-copy { padding-left: 32px; padding-right: 32px; }
  .lg-sum { font-size: var(--t-note); }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  :root { --terms-fs: min(calc(var(--fill) / 4.55), calc(var(--vh) * 8.4)); }
  .motion .terms { height: calc(var(--vh) * 286); }
  .motion .terms-stage { display: flex; flex-direction: column; padding-bottom: calc(var(--dock-h) + var(--vh-gap)); border-top: var(--line) solid var(--ink); }
  .motion .wipes { order: 2; flex: 1; min-height: 0; margin-top: 10px; }
  .motion .terms-copy { display: contents; }
  .motion .terms-copy h2 { order: 0; padding: 14px var(--gutter) 0; }
  .terms-lead { font-size: var(--t-ui); line-height: 1.45; }
  .motion .terms-lead { order: 1; padding: 0 var(--gutter); margin-top: 8px; }
  .terms-sub { display: none; }
  .motion .ledger { order: 3; margin: 0; padding: 0 var(--gutter) 6px; border-top: 0; }
  .lg { padding: 7px 0; }
  .lg-head { gap: 10px; }
  .lg-head h3 { font-size: var(--t-lead); }
  .lg-q { font-size: var(--t-ui); }
  .lg-sum { font-size: var(--t-note); }
  .lg-in, .lg-fee { font-size: var(--t-ui); gap: 6px; }
  .lg-in { margin-top: 4px; }
  .lg-fee { margin-top: 6px; padding: 8px 12px; }
  .lg-in .ico, .lg-fee .ico { width: 18px; height: 18px; }
  .motion .w-chip { bottom: 10px; padding: 4px 10px; }
  .motion .w-chip-after { left: var(--gutter); }
  .motion .w-chip-before { right: var(--gutter); }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  :root { --terms-fs: calc(var(--vh) * 7); }
  .terms-lead { font-size: var(--t-lead); }
  .lg-q, .lg-in, .lg-fee { font-size: var(--t-body); }
}

/* ---------- 5. 같은 주소: 먹 면 위에서 화면이 실제로 넓어진다 ---------- */
.web { z-index: 5; background: var(--ink); }
.web-stage { background: var(--ink); }
.web-head h2 { font-size: var(--web-fs); margin-left: -.03em; }
.web-head p { margin-top: 8px; font-size: var(--t-body); font-weight: 700; line-height: 1.45; letter-spacing: -.03em; }
.vs-wrap { display: flex; flex-direction: column; }
.dim { flex: none; display: flex; align-items: center; gap: 10px; height: 34px; color: var(--paper); }
.dim i { flex: 1; height: 2px; background: var(--paper); position: relative; }
.dim i::before { content: ""; position: absolute; top: -6px; width: 2px; height: 14px; background: var(--paper); }
.dim i:first-child::before { left: 0; }
.dim i:last-child::before { right: 0; }
.dim output { font-size: var(--t-ui); font-weight: 800; line-height: 1.5; white-space: nowrap; }
.readout, .web-side, .web-notes { display: none; }

/* 업체 화면. 폭이 바뀌면 컨테이너 쿼리로 스스로 다시 놓인다 */
.vs { flex: 1; min-height: 0; container: vs / inline-size; background: var(--paper); color: var(--ink); overflow: hidden; }
.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(--paper); }
.vs-head { grid-area: head; display: flex; align-items: center; gap: 14px; padding: 10px 20px 6px; }
.vs-logo { font-size: 30px; font-weight: 900; letter-spacing: -.07em; color: var(--cobalt); line-height: 1; }
.vs-who { display: flex; flex-direction: column; min-width: 0; }
.vs-who h3 { font-size: var(--t-ui); font-weight: 900; line-height: 1.4; letter-spacing: -.02em; white-space: nowrap; }
.vs-who span { font-size: var(--t-note); font-weight: 600; color: var(--ink-2); line-height: 1.4; white-space: nowrap; }
.vs-nav { grid-area: nav; display: flex; gap: 16px; padding: 0 20px; border-bottom: var(--line) solid var(--ink); }
.vs-nav button { display: block; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; font-size: var(--t-ui); font-weight: 700; line-height: 1.5; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.vs-nav li { position: relative; }
.vs-nav li.on button { color: var(--ink); font-weight: 900; box-shadow: inset 0 -5px 0 var(--cobalt); }
.vs-kpi { grid-area: kpi; display: none; }
.vs-kpi div { display: flex; align-items: baseline; gap: 10px; padding: 10px 20px; }
.vs-kpi span { font-size: var(--t-ui); font-weight: 600; color: var(--ink-2); line-height: 1.5; white-space: nowrap; }
.vs-kpi b { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -.05em; }
.vs section { padding: 12px 20px; min-width: 0; }
.vs h4 { display: flex; align-items: center; gap: 6px; font-size: var(--t-lead); font-weight: 900; letter-spacing: -.04em; line-height: 1.3; margin-bottom: 4px; }
.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: 9px 0; border-top: 2px solid var(--ink); }
.req:first-of-type { border-top: 0; padding-top: 2px; }
.req b { font-size: var(--t-body); font-weight: 900; letter-spacing: -.03em; line-height: 1.4; }
.req > span { font-size: var(--t-ui); font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.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(--ink); font-size: var(--t-ui); font-weight: 700; white-space: nowrap; }
.req .dots { color: var(--cobalt); }
.req .dots u { width: 12px; height: 12px; }
.req-cal { font-size: var(--t-note); font-weight: 800; line-height: 1.5; color: var(--ink-2); white-space: nowrap; }
.req-cal.is-free { color: var(--cobalt); }
.vs-detail dl > div { padding: 6px 0; border-top: 2px solid var(--ink); }
.vs-detail dl > div:first-child { border-top: 0; padding-top: 0; }
.vs-detail dt { font-size: var(--t-note); font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.vs-detail dd { font-size: var(--t-ui); font-weight: 800; line-height: 1.4; }
.vs-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 10px; border: 0; background: var(--cobalt); color: var(--paper); font-size: var(--t-ui); font-weight: 900; cursor: pointer; }
.vs-btn:hover { background: var(--cobalt-press); }
.vs-week li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 3px 0; font-size: var(--t-ui); font-weight: 600; line-height: 1.5; }
.vs-week b { font-weight: 900; }
.vs-hire p { display: grid; gap: 0; font-size: var(--t-ui); line-height: 1.5; }
.vs-hire b { font-weight: 900; }
.vs-hire span { font-weight: 600; color: var(--ink-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: var(--line) solid var(--ink); }
  .vs-kpi div { flex-direction: column; gap: 0; padding: 8px 20px; }
  .vs-week, .vs-hire { border-left: var(--line) solid var(--ink); }
}
@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: var(--line) solid var(--ink); padding: 10px 24px; }
  .vs-nav { flex-direction: column; gap: 2px; padding: 12px 10px; border-bottom: 0; border-right: var(--line) solid var(--ink); }
  .vs-nav button { width: 100%; padding: 0 12px; text-align: left; }
  .vs-nav li.on button { background: var(--cobalt); color: var(--paper); box-shadow: none; }
  .vs-detail { display: block; border-left: var(--line) solid var(--ink); }
  .vs-kpi div { flex-direction: row; gap: 10px; padding: 8px 24px; }
  .vs section { padding: 12px 24px; }
  .req.on { background: var(--cobalt); color: var(--paper); margin: 0 -12px; padding: 10px 12px; border-top-color: transparent; }
  .req.on > span, .req.on .req-seat, .req.on .req-cal.is-free { color: var(--paper); }
  .req.on .dots { color: var(--paper); }
  .req.on + .req { border-top-color: transparent; }
}

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  :root { --web-fs: min(calc(var(--fill) / 9.95), calc(var(--vh) * 15)); }
  .motion .web { height: calc(var(--vh) * 340); margin-top: calc(var(--vh) * -100); background: transparent; }
  .web-inner { padding: calc(var(--bar-h) + 12px) var(--gutter) 0; }
  .motion .web-inner { height: 100%; display: flex; flex-direction: column; }
  .motion .vs-bay { flex: 1; min-height: 0; position: relative; margin-top: 4px; }
  .motion .vs-wrap { position: absolute; left: 0; top: 0; bottom: 0; width: 390px; }
  /* 폰 폭일 때 잘리지 않도록 일손 칸은 넓어진 뒤에 보인다 */
  .motion .vs-hire { display: none; }
}
@container vs (min-width: 600px) { .motion .vs-hire { display: block; } }
@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: 34px; width: min(480px, calc(100% - 448px));
    padding-top: 20px; 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: 20px; }
  .web-steps li { display: grid; gap: 2px; padding-left: 16px; border-left: 8px solid transparent; }
  .web-steps b { font-size: var(--t-h3); font-weight: 900; line-height: 1.2; letter-spacing: -.04em; }
  .web-steps span { font-size: var(--t-body); font-weight: 600; line-height: 1.45; }
  .web-steps li.is-on { border-left-color: var(--cobalt); }
  .web-steps li:not(.is-on) b, .web-steps li:not(.is-on) span { color: #B5AE9F; }
  .web-hint { margin-top: 24px; padding-left: 24px; font-size: var(--t-ui); font-weight: 700; line-height: 1.5; }
}

@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  :root { --web-fs: min(calc(var(--fill) / 5.3), calc(var(--vh) * 8)); }
  .web-inner { padding: 16px 0 0; }
  .web-head { padding: 0 var(--gutter); }
  .web-head p { font-size: var(--t-ui); }
  .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: 4px; }
  .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: 600; line-height: 1.5; white-space: nowrap; color: #B5AE9F; }
  .readout b.is-on { font-weight: 900; color: var(--paper); }
  .readout i { flex: 1; height: 4px; background: var(--ink-2); overflow: hidden; }
  .readout u { display: block; height: 100%; background: var(--paper); transform-origin: left; transform: scaleX(0); }
  .motion .vs-wrap { flex: 1; min-height: 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: var(--line) solid var(--ink); }
  .vs.is-wide .vs-logo { font-size: var(--t-lead); }
  .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; border-right: var(--line) solid var(--ink); }
  .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(--cobalt); color: var(--paper); box-shadow: none; }
  .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(--ink); color: var(--paper); font-size: var(--t-note); font-weight: 900; 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: 800; line-height: 1.4; }
  .vs.is-wide .vs-detail { display: block; border-left: var(--line) solid var(--ink); }
  .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: var(--line) solid var(--ink); }
  .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(--ink); }
  .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 { padding-bottom: 8px; }
  .web-notes li { display: flex; align-items: center; gap: 8px; font-size: var(--t-ui); line-height: 1.5; font-weight: 700; }
  .web-notes .vs-tag { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: var(--t-note); font-weight: 900; 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: 780px) and (max-aspect-ratio: 4/5), (min-height: 780px) 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-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 800px) {
  .vs-hire, .vs-new .req:nth-of-type(3), .vs-detail dl > .d-more:last-child { display: none; }
  .web-inner { padding-top: calc(var(--bar-h) + 8px); }
  .web-head p { margin-top: 2px; font-size: var(--t-ui); }
  .vs section { padding-top: 8px; padding-bottom: 8px; }
}
@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; }
}
/* 세로 태블릿: 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-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(--paper); padding: 96px var(--gutter) 120px; border-top: var(--line) solid var(--ink); }
.hands-head h2 { font-size: var(--hands-fs); margin-left: -.03em; }
.hands-head p { margin-top: 16px; font-size: var(--t-lead); font-weight: 700; letter-spacing: -.03em; line-height: 1.45; }
.hands-board { margin-top: 48px; }
.day { display: none; }
.hand-tab { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; font-size: var(--t-ui); font-weight: 700; line-height: 1.4; white-space: nowrap; }
.hand-tab b { font-size: var(--t-body); font-weight: 900; }
.hand-body { padding: 28px 36px 28px; }
.hand-busy .hand-tab, .hand-busy .hand-body { background: var(--cobalt); }
.hand-free .hand-tab, .hand-free .hand-body { background: var(--ink); }
.hand-role { font-size: var(--t-ui); font-weight: 800; line-height: 1.5; }
.hand h3 { margin-top: 4px; font-size: var(--t-h3); font-weight: 900; }
.hand-pay { margin: 8px 0 16px; font-size: var(--t-lead); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.hand-pay b { font-size: min(14vw, 200px); font-weight: 900; letter-spacing: -.07em; line-height: .96; }
.hand dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 2px solid currentColor; }
.hand dt { font-weight: 900; font-size: var(--t-ui); line-height: 1.5; }
.hand dd { font-size: var(--t-ui); font-weight: 600; line-height: 1.5; }
.hand-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; font-size: var(--t-body); font-weight: 900; line-height: 1.4; color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; cursor: pointer; }
.hand-link .ico { width: 22px; height: 22px; transition: transform .2s var(--ease-out); }
.hand-link:hover .ico { transform: translateX(4px); }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  :root { --hands-fs: min(calc(var(--fill) / 6.3), calc(var(--vh) * 26)); }
  .motion .hands { margin-top: calc(var(--vh) * -100); }
  .hands-head { display: block; }
  .hands-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 6px; }
  .hand { display: contents; }
  .hand-tab { grid-row: 1; align-self: end; flex-direction: column; gap: 0; padding: 10px 14px; }
  .hand-tab b { font-size: 30px; letter-spacing: -.04em; line-height: 1.2; }
  .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 10px; border-bottom: 2px solid var(--ink); font-size: var(--t-body); font-weight: 800; line-height: 1.4; color: var(--ink-2); 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; }
}
@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); }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  :root { --hands-fs: min(calc(var(--fill) / 3.44), 130px); }
  .hands { padding: 56px var(--gutter) 72px; }
  .hands-head p { font-size: var(--t-body); margin-top: 12px; }
  .hands-board { margin-top: 28px; display: grid; gap: 72px; }
  .hand-tab { display: inline-flex; vertical-align: bottom; padding: 8px 16px; }
  .hand-body { padding: 18px 20px 12px; }
  .motion .hand { position: sticky; top: 12px; }
  .hand-pay { margin: 8px 0 12px; }
  .hand-pay b { font-size: 26vw; }
  .hand dl > div { grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 5px 0; }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .hand-body { padding: 28px 32px 20px; }
  .motion .hand { position: static; }
}

/* ---------- 7. 마지막: 코발트 띠가 올라와 영상을 덮는다 ---------- */
.final { z-index: 7; background: var(--cobalt); }
.final-stage { position: relative; background: var(--cobalt); }
.final-band { position: relative; background: var(--cobalt); }
.motion .final-band { visibility: hidden; transform: translate3d(0, 100%, 0); transition: transform .7s var(--ease-out), visibility 0s .7s; will-change: transform; }
.motion .is-in .final-band { visibility: visible; transform: none; transition: transform .7s var(--ease-out); }
.final-text h2 { font-size: var(--final-fs); margin-left: -.03em; }
.final-lead { margin-top: 12px; font-size: var(--t-lead); font-weight: 700; line-height: 1.45; letter-spacing: -.03em; }
.final-seats { display: flex; align-items: center; gap: 10px; font-size: var(--t-ui); font-weight: 800; line-height: 1.5; }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  :root { --final-fs: min(calc(var(--fill) / 7.92), calc(var(--vh) * 20)); }
  .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(360px, 460px); gap: 16px 64px; align-items: center; padding: 28px var(--gutter) 32px; }
  .final-text { display: contents; }
  .final-text h2 { grid-column: 1 / -1; }
  .final-lead { margin-top: 0; }
  .final-act { display: grid; gap: 10px; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  :root { --final-fs: min(calc(var(--fill) / 4.26), 120px); }
  .motion .final { height: calc(var(--vh) * 170); }
  .motion .final-band { position: absolute; inset: auto 0 0 0; padding: 18px var(--gutter) calc(var(--dock-h) + var(--vh-gap) + 14px); }
  .final-cta { display: none; }
  .final-lead { margin-top: 8px; font-size: var(--t-body); }
  .final-seats { margin-top: 10px; }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .final-lead { font-size: var(--t-lead); }
}