/* 아옴 거품안: 구역별 배치.
   .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(--sky); }
.hero-stage { position: relative; background: var(--sky); }
.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; }
.motion .hero-cta { transition: opacity .12s, transform .25s var(--ease-pop); }
.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, 255, 255, .6), rgba(255, 255, 255, 0) 72%); }
.hero-panel { position: relative; z-index: 2; isolation: isolate; display: flex; flex-direction: column; }
.hero-logo { align-self: flex-start; }
.hero-logo .logo-mark { width: 92px; height: 48px; }
.hero-copy h1 { font-weight: 900; line-height: 1.08; letter-spacing: -.05em; }
.hero-seats { display: flex; align-items: center; gap: 12px; font-size: var(--t-ui); font-weight: 700; line-height: 1.5; color: var(--ink); }
.hero-note { color: var(--ink-2); }
.hero-tab { display: none; }
.hero-after { display: none; }

/* 지금 일어나는 일을 영상 밖 흰 알약에 적는다 */
.hero-status { position: relative; z-index: 3; background: #fff; border-radius: 999px; overflow: hidden; }
.hero-bar { display: block; height: 5px; background: var(--pale); overflow: hidden; }
.hero-bar b { display: block; height: 100%; background: var(--ink); 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) {
  .motion .hero { height: calc(var(--vh) * 394); }
  .hero-stage { --shift-x: calc(var(--panel-w) / 2); }
  .hero-foot { display: contents; }
  .hero-panel { padding: 28px 96px 32px var(--gutter); }
  .motion .hero-panel { position: absolute; inset: 0 auto 0 0; width: var(--panel-w); transition: transform .8s var(--ease-move); will-change: transform; }
  .motion .is-open .hero-panel { transform: translate3d(-100%, 0, 0); visibility: hidden; transition: transform .8s var(--ease-move), visibility 0s .8s; }
  /* 글이 놓이는 불투명한 큰 거품. 오른쪽 끝이 패널 끝과 맞아 물러날 때 함께 사라진다 */
  .hero-panel::before, .hero-panel::after {
    content: ""; position: absolute; top: 50%; right: 0; z-index: -2;
    width: max(calc(var(--vh) * 140), calc(var(--panel-w) * 1.5)); aspect-ratio: 1;
    border-radius: 50%; transform: translateY(-50%);
  }
  .hero-panel::before { background: radial-gradient(circle at 62% 46%, #fff 0 48%, #EFF9FF 66%, #D3EFFF 100%); box-shadow: 0 0 80px rgba(11, 27, 58, .22); }
  .hero-panel::after { z-index: -1; background: url(assets/bubble-a.webp) center / 100% 100% no-repeat; transform: translateY(-50%) rotate(30deg); }
  .hero-copy { margin: auto 0; padding: 24px 0; }
  .hero-lead { margin: 28px 0 32px; font-size: var(--t-lead); line-height: 1.5; font-weight: 600; }
  .hero-cta { width: min(420px, 100%); }
  .hero-seats { margin-top: 20px; }
  .motion .hero-status { position: absolute; right: var(--gutter); bottom: 28px; width: min(480px, calc(100vw - var(--panel-w) - 24px)); padding: 0 0 12px; }
  .status-lines { padding: 10px 28px 0; font-size: var(--t-body); }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .motion .hero { height: calc(var(--vh) * 284); }
  .hero-logo { display: none; }
  :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; z-index: 2; 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: calc(var(--dome) + 2px) var(--gutter) calc(var(--dock-h) + var(--vh-gap) + 12px);
    background: linear-gradient(to bottom, #fff 0, #fff 55%, var(--pale) 100%);
    border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0;
  }
  .hero-status { margin: 0 12px 10px; padding-bottom: 6px; }
  .status-lines { padding: 6px 18px 0; }
  .hero-lead { margin: 12px 0 8px; line-height: 1.5; font-weight: 600; }
  .hero-cta { display: none; }
  .hero-note { margin-top: 8px; }
  .motion .hero-tab {
    position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 0 18px 0 16px;
    background: #fff; color: var(--ink); text-decoration: none; border-radius: 999px;
  }
  .hero-tab .logo-mark { width: 60px; height: 32px; }
  .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-note { display: none; }
  .hero-copy h1 { font-size: min(46px, 11.8vw); }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .hero-panel { padding-top: calc(var(--dome) + 16px); 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: #fff; }
.spaces-stage { background: #fff; }
.spaces-head p { color: var(--ink-2); font-weight: 600; }
.sp { position: relative; }
.sp-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: center; cursor: pointer; border-radius: var(--r1);
}
/* 칸 전체를 누를 수 있게 버튼의 누름 영역을 사진까지 넓힌다 */
.sp-btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--r1); }
.sp-btn:focus-visible { outline: 0; }
.sp-btn:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 3px; }
.sp-ph { display: block; position: relative; border-radius: 999px; background: var(--pale); cursor: pointer; }
.sp-ph img { width: 100%; height: auto; border-radius: inherit; }
/* 유리 기둥의 반사 */
.sp-ph::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .75), inset 0 0 44px rgba(140, 213, 255, .5);
  background: linear-gradient(112deg, rgba(255, 255, 255, .5) 0 5%, rgba(255, 255, 255, 0) 16% 100%);
}
/* 고른 칸에만 비누막 테두리가 돈다 */
.sp-ph::before {
  content: ""; position: absolute; inset: -6px; z-index: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  background: conic-gradient(from var(--spin), var(--film-stops));
  animation: film-spin 6s linear infinite; transition: opacity .3s;
}
.sp-ph img { position: relative; z-index: 1; }
.sp-ph::after { z-index: 2; }
.sp.is-active .sp-ph::before { opacity: 1; }
.sp-lb { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: 0 8px; }
.sp-lb b { font-weight: 900; white-space: nowrap; letter-spacing: -.03em; }
.sp-lb .ico { display: none; }
.sp-desc { font-size: var(--t-note); font-weight: 600; color: var(--ink-2); line-height: 1.45; }

@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(--dome) + 28px) var(--gutter) 20px;
    border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0;
  }
  .spaces-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .spaces-head p { font-size: var(--t-lead); line-height: 1.6; padding-bottom: 6px; }
  .motion .spaces-head { flex: none; margin-bottom: 28px; }
  .motion .sp-list { flex: 1; min-height: 0; display: flex; gap: 12px; }
  .motion .sp { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; transition: flex-grow .55s var(--ease-pop); }
  .motion .sp.is-active { flex-grow: 3.6; }
  .motion .sp-btn { flex: none; }
  .motion .sp-ph { flex: 1; min-height: 0; margin: 6px; }
  .motion .sp-ph img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
  .motion .sp-lb { flex: none; padding-top: 6px; font-size: var(--t-body); }
  .motion .sp.is-active .sp-lb b { font-size: var(--t-lead); }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .spaces-head p { margin-top: 6px; }
  .motion .spaces { height: calc(var(--vh) * 200); }
  .motion .spaces-stage { display: flex; flex-direction: column; padding: 22px 0 calc(var(--dock-h) + var(--vh-gap) + 12px); }
  .motion .spaces-head { flex: none; padding: 0 var(--gutter); margin-bottom: 12px; }
  .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: 8px;
    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(--ink); outline-offset: 2px; }
  .motion .sp-ph {
    position: absolute; left: 14px; right: 14px; top: 6px; bottom: calc(var(--chip) * 2 + 8px + 18px);
    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 .46s var(--ease-pop); }
  .motion .sp-lb { display: flex; height: 100%; justify-content: center; background: var(--pale); border-radius: 999px; }
  .motion .sp-desc { display: none; }
  .motion .sp-lb b { font-size: var(--t-ui); font-weight: 700; }
  .motion .sp.is-active .sp-lb { background: var(--ink); color: #fff; }
  .motion .sp.is-active .sp-lb b { font-weight: 900; }
}
@keyframes sp-reveal { from { transform: scale(.82); opacity: .4; } to { transform: none; 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); }
  .status-lines > span { white-space: normal; }
  .status-lines b { white-space: nowrap; }
}

/* ---------- 3. 세 자리: 자리 하나가 거품 하나 ---------- */
.seats { z-index: 3; background: var(--sky); }
.seats-stage, .control-stage { background: var(--sky); }
.seats-lead { margin-top: 16px; font-size: var(--t-lead); line-height: 1.5; font-weight: 600; color: var(--ink); }
.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-label { display: grid; font-size: var(--t-lead); font-weight: 800; line-height: 1.3; }
.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; }
.count-strip { display: block; transform: translate3d(0, calc(var(--i, 0) * var(--seat-num) * -1.12), 0); transition: transform .4s var(--ease-pop); }
.count-strip b { display: flex; align-items: baseline; height: calc(var(--seat-num) * 1.12); font-size: var(--seat-num); font-weight: 900; letter-spacing: -.05em; line-height: 1.12; white-space: nowrap; }
.count-strip small { margin-left: .06em; font-size: .34em; font-weight: 800; letter-spacing: -.02em; }

/* 자리판 */
.board { --disc: 8%; }
.board-head { font-size: var(--t-ui); font-weight: 700; line-height: 1.6; color: var(--ink); }
.slots { display: grid; }
.slot { position: relative; width: var(--bub); height: var(--bub); --fill: 0; }
.slot:nth-child(1) { --tilt: 20deg; }
.slot:nth-child(2) { --tilt: 150deg; }
.slot:nth-child(3) { --tilt: 280deg; }
/* 스크롤에 맞춰 부풀어 오르는 비누막 */
.slot::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url(assets/bubble-a.webp) center / 100% 100% no-repeat;
  transform: rotate(var(--tilt)) scale(calc(.2 + var(--fill) * .8));
  opacity: calc(.45 + var(--fill) * .55);
}
.slot.is-out::before { opacity: .5; }
/* 빼는 순간 터지는 막 */
.slot.is-out::after {
  content: ""; position: absolute; inset: -14%; z-index: 4; pointer-events: none;
  background: url(assets/burst.webp) center / contain no-repeat;
  animation: burst-once .7s var(--ease-out) both;
}
@keyframes burst-once { 0% { opacity: 1; transform: scale(.7); } 60% { opacity: .9; } 100% { opacity: 0; transform: scale(1.3); } }

.ring { position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: .6; stroke-dasharray: 1.2 2.6; stroke-linecap: round; }
.ring-fill { fill: none; stroke: #fff; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.slot.is-taken .ring svg { opacity: 0; transition: opacity .3s .2s; }
.ring i {
  position: absolute; left: 50%; top: 2%; width: 48px; height: 48px; margin-left: -24px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-size: var(--t-body); font-weight: 900; line-height: 1;
  transform: scale(0); transition: transform .3s var(--ease-pop);
}
.slot.is-taken .ring i { transform: scale(1); }
.slot-body { position: absolute; inset: 0; z-index: 2; }
.slot-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--ink); }
.slot-empty-a { padding: 6px 18px; border-radius: 999px; background: #fff; font-size: var(--t-ui); font-weight: 800; line-height: 1.4; opacity: calc(var(--fill) * 4); }
.slot-empty-b {
  position: absolute; inset: var(--disc); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-radius: 50%; background: #fff; padding: 8%;
}
.slot-empty-b p { display: grid; justify-items: center; gap: 4px; }
.slot-empty-b b { font-size: var(--t-body); font-weight: 900; line-height: 1.3; }
.slot-empty-b span { display: flex; align-items: center; gap: 4px; font-size: var(--t-note); font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.slot-empty-b .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.slot.is-out .slot-empty-a { display: none; }
.slot.is-out .slot-empty-b { display: flex; }
.slot:not(.is-out) .slot-undo { visibility: hidden; }

/* 업체 제안: 문턱을 넘으면 불투명한 흰 원이 톡 올라온다. 글은 이 면 위에만 놓인다 */
.offer {
  position: absolute; inset: var(--disc); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 7%; text-align: center;
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 26px rgba(140, 213, 255, .35), 0 20px 50px rgba(11, 27, 58, .12);
  visibility: hidden; opacity: 0; transform: scale(.35);
  transition: opacity .18s, transform .5s var(--ease-pop), visibility 0s .5s;
}
.slot.is-taken .offer { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .5s var(--ease-pop); }
.slot.is-out .offer { visibility: hidden; opacity: 0; transform: scale(1.16); transition: opacity .14s, transform .2s var(--ease-out), visibility 0s .2s; }
.offer-top { display: grid; justify-items: center; gap: 2px; }
.offer-top h3 { font-size: var(--t-lead); font-weight: 800; white-space: nowrap; }
.offer-price { font-size: var(--t-num); font-weight: 900; letter-spacing: -.045em; line-height: 1.1; white-space: nowrap; }
.offer-price small { display: block; font-size: var(--t-note); font-weight: 700; letter-spacing: -.01em; line-height: 1.4; color: var(--ink-2); }
.offer-sub { display: grid; justify-items: center; gap: 6px; }
.offer-meta { display: grid; justify-items: center; font-size: var(--t-ui); font-weight: 600; color: var(--ink-2); line-height: 1.4; white-space: nowrap; }
.m-biz { font-weight: 800; color: var(--ink); }
.offer-num { display: flex; align-items: center; gap: 6px; font-size: var(--t-ui); font-weight: 700; line-height: 1.4; white-space: nowrap; }
.offer-num .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.n-label { display: none; }
.n-state { padding: 1px 8px; border-radius: 999px; background: var(--pale); font-size: var(--t-note); font-weight: 800; 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: .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(--ink); color: #fff; transition-delay: .42s; }

/* 빼기: 거품 어깨에 붙은 작은 물방울 */
.offer-rm {
  position: absolute; right: 2%; top: 6%; width: 60px; height: 60px; min-width: 44px; padding: 0;
  border-radius: 50%; border: 0; background: var(--ink); color: #fff;
  visibility: hidden; opacity: 0; transition: opacity .2s, transform .25s var(--ease-pop);
}
.offer-rm:hover { background: var(--ink); transform: scale(1.1); }
.board.is-control .slot.is-taken .offer-rm { visibility: visible; opacity: 1; }
.slot.is-out .offer-rm { visibility: hidden; }

/* 네 번째 업체: 마감선에 닿자마자 톡 터진다 */
.closed { position: relative; }
.closed-line { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.pop4 { position: absolute; display: block; aspect-ratio: 1; pointer-events: none; }
.pop4 img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pop4-b, .pop4-x { opacity: 0; }
.closed.is-in .pop4-b { animation: pop4-rise 1s var(--ease-out) both; }
.closed.is-in .pop4-x { animation: pop4-burst 1.3s var(--ease-out) .72s both; }
@keyframes pop4-rise {
  0% { opacity: 0; transform: translate3d(0, 110%, 0) scale(.5); }
  20% { opacity: 1; }
  70% { opacity: 1; transform: none; }
  74% { opacity: 1; transform: scale(1.14, .9); }
  76%, 100% { opacity: 0; transform: scale(1.2); }
}
@keyframes pop4-burst {
  0% { opacity: 1; transform: scale(.7); }
  55% { opacity: 1; transform: scale(1.35); }
  100% { opacity: .55; transform: scale(1.45); }
}
.fourth { position: relative; border-radius: var(--r1); background: #fff; color: var(--ink); visibility: hidden; }
.closed.is-in .fourth { visibility: visible; animation: fourth-in .4s var(--ease-pop) .85s both; }
.board.is-control .closed { visibility: hidden; }
.board.is-control .closed .fourth, .board.is-control .closed .pop4 { visibility: hidden; animation: none; }
.fourth-top { display: grid; gap: 0; }
.fourth h3 { font-size: var(--t-ui); font-weight: 800; white-space: nowrap; }
.fourth-note { font-size: var(--t-lead); font-weight: 900; line-height: 1.25; letter-spacing: -.03em; }
.fourth .n-state { display: inline-block; background: var(--ink); color: #fff; }
.fourth .offer-num { font-size: var(--t-note); }
@keyframes fourth-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

@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-stage { border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0; }
  .motion .seats-grid { height: 100%; padding: calc(var(--dome) + 8px) var(--gutter) 20px; }
  .seats-grid { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
  .seats-left { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .swap-a, .swap-b { display: grid; grid-template-columns: auto minmax(0, 420px); align-items: end; gap: 40px; }
  .seats-lead { margin-top: 0; padding-bottom: 4px; }
  .count { flex: none; text-align: right; display: grid; justify-items: end; }
  .count-strip b { justify-content: flex-end; }
  .board { --bub: min(25.5vw, calc(var(--vh) * 50)); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "head head" "slots closed"; column-gap: 12px; row-gap: 8px; }
  .board-head { grid-area: head; }
  .slots { grid-area: slots; grid-template-columns: repeat(3, var(--bub)); column-gap: -12px; gap: 0; }
  .slot + .slot { margin-left: -6px; }
  .closed { grid-area: closed; }
  .closed-line { top: 34%; }
  .pop4 { left: 50%; top: 34%; width: min(160px, 100%); margin-left: calc(min(160px, 100%) / -2); translate: 0 -50%; }
  .fourth { position: absolute; left: 0; right: 0; top: calc(34% + 34px); padding: 14px 16px; text-align: center; }
  .fourth .offer-num { justify-content: center; margin-top: 6px; flex-wrap: wrap; }
  .motion .control { display: none; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 800px) {
  .seats-grid { gap: 12px; }
  .offer-price { font-size: 36px; }
  .offer-top h3 { font-size: var(--t-body); }
  .offer { gap: 4px; }
  .offer-meta { font-size: var(--t-note); }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 660px) {
  .offer-meta span:not(.m-biz) { display: none; }
  .offer-price { font-size: 28px; }
  .ring i { width: 36px; height: 36px; margin-left: -18px; font-size: var(--t-ui); }
  .seats-lead { display: none; }
}
/* 폭이 좁은 PC: 거품 안 글을 줄인다 */
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-width: 1199.98px) {
  .board-time { display: none; }
  .offer { gap: 4px; padding: 4%; }
  .offer-top h3 { font-size: var(--t-ui); }
  .offer-price { font-size: 28px; }
  .offer-meta { font-size: var(--t-note); }
  .offer-meta .m-biz { display: none; }
  .offer-num { font-size: var(--t-note); }
  .n-state { display: none; }
  .fourth { padding: 10px; }
  .fourth-note { font-size: var(--t-ui); }
  .fourth .offer-num .ico { display: none; }
  .offer-rm { width: 48px; height: 48px; }
  .swap-a, .swap-b { grid-template-columns: auto minmax(0, 300px); gap: 24px; }
  .seats-lead { font-size: var(--t-ui); }
}

@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: 18px var(--gutter) calc(var(--dock-h) + var(--vh-gap) + 10px); }
  .motion .seats-left { display: contents; }
  .seats-lead { margin-top: 6px; font-size: var(--t-ui); line-height: 1.45; }
  .count { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 4px; }
  .count-label { font-size: var(--t-ui); padding-bottom: 8px; }
  .board { --bub: min(48.5vw, calc(var(--vh) * 24)); --disc: 5%; }
  .motion .board { flex: none; margin-top: 2px; }
  .board-head { font-size: var(--t-note); margin-bottom: 4px; }
  .board-time { display: none; }
  .slots { grid-template-columns: repeat(2, var(--bub)); justify-content: center; }
  .slot:nth-child(3) { grid-column: 1 / -1; justify-self: center; margin-top: calc(var(--bub) * -.13); }
  .ring i { width: 30px; height: 30px; margin-left: -15px; top: -1%; font-size: var(--t-note); }
  .offer { gap: 2px; padding: 5%; box-shadow: inset 0 0 14px rgba(140, 213, 255, .35), 0 8px 22px rgba(11, 27, 58, .1); }
  .offer-top h3 { font-size: var(--t-ui); }
  .offer-price { font-size: var(--t-lead); }
  .offer-sub { gap: 0; }
  .offer-meta { font-size: var(--t-note); line-height: 1.35; }
  .offer-meta .m-biz { display: none; }
  .offer-num { gap: 3px; font-size: var(--t-note); }
  .offer-num .ico { width: 15px; height: 15px; }
  .n-state { display: none; }
  .offer-rm { width: 44px; height: 44px; right: -4%; top: 2%; font-size: var(--t-note); }
  .slot-empty-b { padding: 6%; gap: 2px; }
  .slot-empty-b b { font-size: var(--t-ui); line-height: 1.25; }
  .slot-undo { min-height: 44px; min-width: 72px; padding: 0 10px; font-size: var(--t-note); }
  .closed { margin-top: 8px; padding-top: 10px; }
  .closed-line { top: 0; }
  .pop4 { right: 0; top: -66px; width: 132px; }
  .fourth { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 18px; border-radius: 999px; }
  .fourth h3 { font-size: var(--t-note); }
  .fourth-note { font-size: var(--t-ui); }
  .fourth .n-state { display: inline-block; }
}
/* 낮은 폰: 설명을 접어 거품 셋과 네 번째까지 한 화면에 넣는다 */
@media (max-width: 599.98px) and (max-height: 720px) {
  .motion .seats-lead { display: none; }
  .motion .offer-meta { display: none; }
  .motion .offer-num .n-ico { display: none; }
}
/* 세로 태블릿: 넓은 폭을 쓴다 */
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .motion .seats-grid { justify-content: center; gap: 28px; }
  .motion .seats-left { display: block; }
  .seats-lead { font-size: var(--t-lead); margin-top: 16px; }
  .count { margin-top: 24px; }
  .board { --bub: min(34vw, calc(var(--vh) * 26)); --disc: 7%; }
  .ring i { width: 44px; height: 44px; margin-left: -22px; font-size: var(--t-body); }
  .offer { gap: 6px; }
  .offer-top h3 { font-size: var(--t-body); }
  .offer-price { font-size: var(--t-h3); }
  .offer-meta { font-size: var(--t-ui); }
  .offer-num { font-size: var(--t-ui); }
  .board-head { font-size: var(--t-ui); margin-bottom: 12px; }
  .offer-rm { width: 56px; height: 56px; }
  .fourth { padding: 12px 24px; }
  .fourth h3 { font-size: var(--t-ui); }
  .fourth-note { font-size: var(--t-lead); }
}

/* ---------- 4. 조건 공개: 둥근 창 안에서 닦인다 ---------- */
.terms { z-index: 4; background: #fff; }
.terms-stage { background: #fff; }
.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 16px; border-radius: 999px; background: #fff; color: var(--ink); font-size: var(--t-ui); font-weight: 800; line-height: 1.5; white-space: nowrap; }
.terms-lead { margin-top: 14px; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; font-weight: 600; }
.terms-sub { margin-top: 18px; font-size: var(--t-ui); font-weight: 700; color: var(--ink-2); line-height: 1.6; }

/* 조건 장부: 지금 칸은 물방울처럼 부풀고, 지난 칸은 요약으로 남는다 */
.ledger { margin-top: 8px; display: grid; gap: 8px; }
.lg { padding: 12px 24px; border-radius: 32px; background: var(--mist); }
.lg.is-on { background: var(--pale); }
.lg-head { display: flex; align-items: baseline; gap: 12px; }
.lg-head h3 { flex: none; font-size: var(--t-lead); font-weight: 900; }
.lg-q { font-size: var(--t-body); font-weight: 700; line-height: 1.5; }
.lg-sum { margin-left: auto; font-size: var(--t-ui); font-weight: 700; line-height: 1.5; 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; }
.lg-in b { font-weight: 800; margin-right: 4px; }
.lg-fee { margin-top: 8px; padding: 10px 16px; border-radius: 24px; background: #fff; font-weight: 700; }
.lg-fee b { font-weight: 900; }
.lg-in .ico, .lg-fee .ico { width: 20px; height: 20px; margin-top: .25em; stroke-width: 2.6; }

.motion .wipes { position: relative; overflow: hidden; border-radius: 50%; background: var(--pale); }
.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: -13px; top: 0; width: 26px; height: 100%;
  background: radial-gradient(circle at 50% 50%, #fff 0 62%, rgba(255, 255, 255, 0) 66%) center top / 26px 26px repeat-y;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .95));
  transform-origin: 13px 0; z-index: 2; opacity: 0;
}
.motion .w-chip-after { left: 19%; }
.motion .w-chip-before { right: 19%; }
.motion .w-chip { bottom: 11%; }
.motion .lg-body { display: none; }
.motion .lg.is-on .lg-body { display: block; animation: lg-open .36s var(--ease-pop); }
.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: scale(.96); } to { opacity: 1; transform: none; } }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .motion .terms { height: calc(var(--vh) * 386); margin-top: calc(var(--dome) * -1); background: transparent; }
  .motion .terms-stage { border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0; }
  .motion .wipes {
    position: absolute; left: var(--gutter); top: calc(50% + 20px); transform: translateY(-50%);
    width: min(46vw, calc(var(--vh) * 80)); aspect-ratio: 1;
  }
  .motion .terms-copy {
    position: absolute; right: 0; top: 0; bottom: 0; width: 48%;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--dome) + 8px) var(--gutter) 16px 24px;
  }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 800px) {
  .terms-lead { margin-top: 8px; }
  .terms-sub { margin-top: 10px; }
  .lg { padding: 8px 20px; }
  .lg-in, .lg-fee { font-size: var(--t-ui); }
  .lg-fee { padding: 8px 14px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-width: 1199.98px) {
  .motion .terms-copy { width: 52%; padding-right: 32px; padding-left: 16px; }
  .motion .wipes { left: 24px; width: min(44vw, calc(var(--vh) * 72)); }
  .lg-sum { font-size: var(--t-note); }
  .lg-in, .lg-fee { font-size: var(--t-ui); }
}
@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: 10px 12px 0; }
  .motion .terms-copy { display: contents; }
  .motion .terms-copy h2 { order: 0; padding: 18px var(--gutter) 0; }
  .terms-lead { font-size: var(--t-ui); line-height: 1.5; }
  .motion .terms-lead { order: 1; padding: 0 var(--gutter); margin-top: 6px; }
  .terms-sub { display: none; }
  .motion .ledger { order: 3; margin: 0; padding: 8px 12px 8px; gap: 4px; }
  .lg { padding: 6px 16px; border-radius: 24px; }
  .lg-head { gap: 10px; }
  .lg-head h3 { font-size: var(--t-body); }
  .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; line-height: 1.4; }
  .lg-in { margin-top: 2px; }
  .lg-fee { margin-top: 4px; padding: 6px 12px; border-radius: 18px; }
  .lg-in .ico, .lg-fee .ico { width: 18px; height: 18px; }
  .motion .w-chip { bottom: 13%; padding: 4px 12px; }
  .motion .w-chip-after { left: 15%; }
  .motion .w-chip-before { right: 15%; }
}
@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); }
  .motion .wipes { margin: 16px 48px 0; }
}

/* ---------- 6. 일손: 달력의 방울 둘이 두 역할이 된다 ---------- */
.hands { position: relative; z-index: 6; background: #fff; padding: 140px var(--gutter) 120px; }
.hands-head p { margin-top: 16px; color: var(--ink-2); font-weight: 600; }
.hands-board { margin-top: 48px; }
.day { display: none; }
.hand-tab { display: flex; align-items: baseline; gap: 10px; font-size: var(--t-ui); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.hand-tab b { font-size: var(--t-lead); font-weight: 900; letter-spacing: -.03em; }
.hand-busy .hand-tab, .hand-busy .hand-body { background: var(--sky); }
.hand-free .hand-tab, .hand-free .hand-body { background: var(--pale); }
.hand-role { font-size: var(--t-ui); font-weight: 800; line-height: 1.5; color: var(--ink-2); }
.hand h3 { margin-top: 2px; font-weight: 900; letter-spacing: -.04em; }
.hand-pay { margin: 8px 0 8px; font-size: calc(var(--t-num) * 1.25); font-weight: 900; letter-spacing: -.05em; line-height: 1.1; }
.hand dl { align-self: stretch; text-align: left; }
.hand dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.hand dt { font-weight: 800; 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: 48px; margin-top: 10px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--t-ui); font-weight: 800; line-height: 1.4; cursor: pointer; transition: transform .25s var(--ease-pop); }
.hand-link .ico { width: 20px; height: 20px; }
.hand-link:hover { transform: scale(1.04); }

@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .motion .hands { margin-top: calc(var(--vh) * -100); border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0; }
  .hands-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
  .hand { display: contents; }
  .hand-tab { grid-row: 1; justify-self: center; display: grid; justify-items: center; align-content: center; gap: 2px; width: min(100%, 136px); aspect-ratio: 1; border-radius: 50%; font-size: var(--t-note); white-space: normal; text-align: center; padding: 8px; }
  .hand-tab b { font-size: var(--t-h3); line-height: 1.1; }
  .hand-body {
    grid-row: 2; justify-self: center; width: min(100%, 700px); aspect-ratio: 1;
    margin-top: 28px; border-radius: 50%;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    padding: 8% 13%;
  }
  .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: grid; place-items: center; grid-row: 1; justify-self: center; width: 76px; height: 76px; border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--rule);
    font-size: var(--t-ui); font-weight: 700; line-height: 1.2; 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; }
}
/* 폭이 좁은 PC: 원 안에 다 들어가지 않으니 긴 알약으로 바꾼다 */
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-width: 1199.98px) {
  .hand-body { aspect-ratio: auto; border-radius: 120px; padding: 56px 40px; }
  .hand dl > div { grid-template-columns: 76px minmax(0, 1fr); }
  .day { width: 60px; height: 60px; font-size: var(--t-note); }
  .hand-tab { font-size: var(--t-note); }
  .hand-tab b { font-size: var(--t-lead); }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .hands { padding: 72px var(--gutter) 88px; }
  .hands-board { margin-top: 28px; display: grid; gap: 72px; }
  .hand { background: #fff; }
  .hand-tab { display: inline-flex; vertical-align: bottom; margin-bottom: 8px; padding: 8px 20px; border-radius: 999px; }
  .hand-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 28px 48px; border-radius: 160px; }
  .motion .hand { position: sticky; top: 12px; }
  .hand-pay { margin: 8px 0 6px; font-size: var(--t-num); }
  .hand dl > div { grid-template-columns: 68px minmax(0, 1fr); gap: 8px; }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .hand-body { padding: 72px 64px; border-radius: 200px; }
  .motion .hand { position: static; }
}

/* ---------- 7. 마지막, 해가 드는 집 ---------- */
.final { z-index: 8; background: var(--sky); }
.final-stage { position: relative; background: var(--sky); }
.final-band { position: relative; background: var(--sky); color: var(--ink); border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0; }
.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-weight: 900; letter-spacing: -.05em; line-height: 1.08; }
.final-lead { margin-top: 12px; font-size: var(--t-lead); font-weight: 600; line-height: 1.5; color: var(--ink); }
.final-seats { display: flex; align-items: center; gap: 10px; font-size: var(--t-ui); font-weight: 700; line-height: 1.5; color: var(--ink); }

@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(360px, 460px); gap: 16px 64px; align-items: end; padding: calc(var(--dome) + 24px) var(--gutter) 32px; }
  .final-text h2 { font-size: min(var(--t-h1), 7.2vw); }
  .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: calc(var(--dome) + 8px) var(--gutter) calc(var(--dock-h) + var(--vh-gap) + 16px); }
  .final-text h2 { font-size: calc(var(--t-h2) * 1.18); }
  .final-cta { display: none; }
  .final-lead { margin-top: 8px; font-size: var(--t-ui); }
  .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); }
}