/* 움직임 없는 모드 (움직임 줄이기, 낮은 화면, 스크립트 실패).
   고정과 스크럽 없이 완성 상태를 차례로 보여 준다. 정보는 빠짐없이 전달한다. */

.flow main { padding-top: var(--bar-h); }

/* 히어로: 포스터 먼저, 사진은 그 아래 */
.flow .hero-frame, .flow .hero-status, .flow .hero-tab, .flow .final-media .seq { display: none; }
.flow .hero-stage { display: flex; flex-direction: column; }
.flow .hero-foot { display: block; }
.flow .hero-media { position: relative; inset: auto; order: 2; height: 46vw; }
.flow .hero-media img { position: absolute; }
.flow .hero-after { display: block; }
.flow .hero-after img { width: 100%; height: auto; }
.flow .hero-after figcaption { padding: 14px var(--gutter); background: var(--ink); color: var(--paper); font-size: var(--t-ui); font-weight: 700; line-height: 1.5; }
.flow .final-media img { position: static; }
.flow .sticker { bottom: 16px; top: auto; }
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .hero-media { height: 62vw; }
  .flow .hero-panel { padding-bottom: 20px; }
  .flow .hero-logo { display: inline-flex; }
  .flow .sticker { display: none; }
}

/* 공간: 격자로 모두 보여 준다 */
.flow .spaces { padding: 96px var(--gutter); }
.flow .spaces-head { margin-bottom: 32px; }
.flow .sp-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.flow .sp-lb { padding-top: 8px; }
.flow .sp-lb b { font-size: var(--t-h3); }
.flow .sp-wit { display: block; margin-top: 4px; font-size: var(--t-ui); }
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .spaces { padding: 56px var(--gutter); }
  .flow .sp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
}

/* 세 자리와 고객 통제: 완성 상태 */
.flow .swap-b { display: none; }
.flow .count { margin-top: 24px; }
.flow .seats-grid { padding: 96px var(--gutter); }
.flow .control .seats-grid { padding-top: 0; }
.flow .fourth { visibility: visible; }
.flow .offer { visibility: visible; opacity: 1; }
.flow .slot.is-out .offer { visibility: hidden; }
.flow .ring i { opacity: 1; transform: rotate(var(--tilt, -8deg)) scale(1); }
.flow .slot.is-out .ring i { opacity: 0; }
.flow .closed-line { transform: none; }
.flow .slot .offer, .flow .slot.is-out .offer { transform: none; transition: none; }
@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .flow .seats-grid { align-items: start; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .seats-grid { padding: 56px var(--gutter); }
  .flow .control .seats-grid { padding-top: 0; padding-bottom: 56px; }
  .flow .board { margin-top: 24px; }
}

/* 조건 공개: 전후를 나란히, 조건은 모두 펼친다 */
.flow .wipes { display: grid; gap: 12px; }
.flow .wipe { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.flow .w-chip { bottom: 12px; }
.flow .w-chip-after { left: calc(50% + 14px); }
.flow .w-chip-before { left: 12px; }
.flow .w-before { order: 0; }
.flow .lg-sum { display: none; }
.flow .lg-head { flex-wrap: wrap; }
@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .flow .terms-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 96px var(--gutter); align-items: start; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .terms-stage { display: grid; gap: 24px; padding: 56px var(--gutter); }
  .flow .wipes { order: 2; }
}

/* 같은 주소: 폰 폭과 넓은 폭을 나란히 */
.flow .web-inner { padding: 96px var(--gutter); }
.flow .vs-bay { margin-top: 32px; display: grid; gap: 24px; align-items: start; }
.flow .vs-wrap + .vs-wrap { margin-top: 0; }
.flow .dim { display: flex; }
@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .flow .vs-bay { grid-template-columns: 390px minmax(0, 1fr); }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .web-inner { padding: 56px 0; }
  .flow .vs-bay { margin: 24px var(--gutter) 0; }
  .flow .vs-new .req:nth-of-type(3) { display: grid; }
  .flow .vs-week { display: block; }
  .flow .vs.is-wide .req > span { display: none; }
  .flow .web-notes { display: grid; gap: 2px; }
  .flow .vs.is-wide { min-height: 300px; }
}

/* 마지막 */
.flow .final-media { position: relative; inset: auto; }
.flow .final-media img { width: 100%; height: auto; }
@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .flow .final-media { aspect-ratio: 21 / 8; }
  .flow .final-media img { height: 100%; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .final-media { height: 62vw; }
  .flow .final-media img { height: 100%; }
  .flow .final-band { padding: 24px var(--gutter) 40px; }
}

/* 가로로 낮은 폰: 제목이 첫 화면을 넘지 않게 줄인다 */
@media (max-width: 899.98px) and (max-height: 599px) and (orientation: landscape) {
  :root { --hero-fs: 72px; --sp-fs: 44px; --seat-fs: 48px; --terms-fs: 44px; --web-fs: 44px; --hands-fs: 56px; --final-fs: 56px; }
  .flow .hero-copy h1 span { display: inline; }
  .flow .h-c { display: block; }
  .flow .hero-note { display: none; }
}