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

.flow main { padding-top: var(--bar-h); }
/* 돌려 놓은 비누막이 가로 스크롤을 만들지 않게 한다 */
.flow .stage { overflow-x: clip; }
.flow .trio, .flow .pop4-b { display: none; }

/* 히어로 */
.flow .hero-frame, .flow .hero-status, .flow .hero-tab, .flow .final-media .seq { display: none; }
.flow .hero-after { display: block; }
.flow .hero-after img { width: 100%; height: auto; }
.flow .hero-after figcaption { padding: 14px var(--gutter); background: #fff; font-size: var(--t-ui); font-weight: 700; line-height: 1.5; }
.flow .final-media img { position: static; }
@media (min-width: 900px) and (min-aspect-ratio: 4/5) {
  .flow .hero-stage { display: grid; grid-template-columns: var(--panel-w) 1fr; min-height: calc(var(--vh) * 100 - var(--bar-h)); overflow: hidden; }
  .flow .hero-foot { display: contents; }
  .flow .hero-media { position: relative; inset: auto; order: 2; }
  .flow .hero-media img { position: absolute; }
  .flow .hero-panel .logo { display: none; }
  .flow .hero-panel { z-index: 1; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .hero-media { position: relative; inset: auto; height: 62vw; }
  .flow .hero-panel { padding-top: 36px; padding-bottom: 32px; margin-top: calc(var(--dome) * -1); }
  .flow .hero-logo { display: inline-flex; margin-bottom: 8px; }
}

/* 공간: 격자로 모두 보여 준다 */
.flow .spaces { padding: 120px var(--gutter); background: #fff; }
.flow .spaces-head { margin-bottom: 40px; }
.flow .sp-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.flow .sp-lb { min-height: 52px; font-size: var(--t-body); padding-top: 8px; justify-items: center; text-align: center; }
.flow .sp-lb .ico, .flow .sp-ph::before { display: none; }
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .spaces { padding: 72px var(--gutter); }
  .flow .sp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}

/* 세 자리와 고객 통제: 완성 상태 */
.flow .swap-b { display: none; }
.flow .slot { --fill: 1; }
/* 고정 무대가 없으니 거품 크기를 높이에 묶지 않는다 */
.flow .board { --bub: min(25.5vw, 360px); }
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .board { --bub: min(47vw, 230px); }
}
.flow .seats-grid { padding: 120px 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 { transform: scale(1); }
.flow .slot.is-out .ring i { transform: scale(0); }
.flow .closed-line { transform: none; }
.flow .slot .offer, .flow .slot.is-out .offer { transform: none; transition: none; }
.flow .pop4-x { opacity: 1; }
.flow .board.is-control .offer-rm { visibility: visible; opacity: 1; }
.flow .slot.is-out .offer-rm { visibility: hidden; }
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .seats-grid { padding: 72px var(--gutter); }
  .flow .control .seats-grid { padding-top: 0; padding-bottom: 72px; }
  .flow .board { margin-top: 24px; }
  .flow .count { justify-content: flex-start; }
}

/* 조건 공개: 전후를 둥근 창 둘로 나란히, 조건은 모두 펼친다 */
.flow .wipes { display: grid; gap: 16px; }
.flow .wipe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; }
.flow .w-img { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.flow .w-chip { position: absolute; bottom: 6%; }
.flow .w-chip-after { left: 75%; transform: translateX(-50%); }
.flow .w-chip-before { left: 25%; transform: translateX(-50%); }
.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: 64px; padding: 120px var(--gutter); align-items: start; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .flow .terms-stage { display: grid; gap: 28px; padding: 72px var(--gutter); }
  .flow .wipes { order: 2; }
}

/* 웹 증명: 폰 폭과 넓은 폭을 나란히 */
.flow .web-inner { padding: 120px var(--gutter); }
.flow .vs-bay { margin-top: 32px; display: grid; gap: 24px; align-items: start; }
.flow .vs { border-radius: var(--r2); }
.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: 72px 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: 36px var(--gutter) 40px; }
}

/* 가로로 낮은 폰: 글과 사진을 나란히 놓아 첫 화면에 제목이 보이게 한다 */
@media (max-width: 899.98px) and (max-height: 599px) and (orientation: landscape) {
  :root { --t-h1: 40px; --t-h2: 28px; }
  .flow .hero-stage { display: grid; grid-template-columns: 56% minmax(0, 1fr); }
  .flow .hero-media { height: auto; order: 2; }
  .flow .hero-media img { position: absolute; }
  .flow .hero-panel { padding-bottom: calc(var(--dock-h) + 12px); margin-top: 0; border-radius: 0; }
  .flow .hero-lead { margin: 8px 0; }
  .flow .hero-note { display: none; }
}