/* ════════════════════════════════════════════════════════════════
   랜딩 새 구조(ROADMAP 3.6 · LANDING-SPEC §2 · §7) — 흰 종이 · 잉크 · 단단한 알약, 실제 제품 화면이 주인공.
   렌더러(src/landing/render.js)가 새 구조(사전 깃발 landing._legacy.layout = v2)일 때만 싣는다 — 2.5 구조(EN /en)는 이 파일을 모른다.
   app.css의 히어로(.xhero)·버튼(.xbtn) 규칙 뒤에 실려 같은 명시도면 이 파일이 이긴다. 색 액센트 없음 — 색은 장면 그림 속 데모 팀 색뿐(§7.5).
   움직임은 v5 토큰(--ease-out · --dur-4 · m-rise)과 띠 흐름(M6 — 선형, land.js)뿐, 감소 동작이면 모두 멈춘다(§8).
   ════════════════════════════════════════════════════════════════ */

/* ── S1 히어로 — CTA 아래 한 줄(무료 약속), 무대가 첫 화면에 걸리게 아래 여백을 줄인다 ── */
.xhero { padding-bottom: var(--s-10); }
.xhero-free {
  margin-top: var(--s-4); font-size: var(--t-footnote); line-height: 1.45; letter-spacing: -0.005em; color: var(--ink-3);
  animation: xrise .7s .22s var(--ease-out) both; /* 히어로 차례(알약 0 · 제목 .05 · 부제 .12 · CTA .18) 다음 */
}

/* ── S2 제품 무대 — 넓은 화면은 둥근 카드(r-xl · e-3), 699 이하는 CSS 휴대폰 틀(테두리 10 잉크 · 반경 44) ── */
.land-stage { padding-bottom: var(--s-12); }
.land-wide { max-width: calc(1120px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.land-shot {
  overflow: hidden; border-radius: var(--r-xl); background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), var(--e-2); /* 도면 위의 종이 — 떠 있는 그림자(e-3) 대신 선 + 낮은 그림자 */
  animation: m-rise var(--dur-4) var(--ease-out) .26s backwards; /* 한 번만 8px 떠오름 — 히어로 차례 끝 */
}
.land-shot-img { display: block; width: 100%; height: auto; }

/* 섹션 머리의 킥커(기능 격자 '기능') */
.land-k { margin: 0 0 var(--s-3); font: 600 var(--t-footnote)/1.3 var(--font); letter-spacing: -0.005em; color: var(--ink-3); }

/* ── 도면 키트(LANDING-GRID.md §5) — 히어로 아래 한 장의 도면: 시트 폭 --g-w의 두 레일이 무대 → 띠 → 기능 격자를 잇고(1266 이상), 마무리(S12)에서 다시 선다.
   섹션 마크업은 그대로 — 선·점은 가상 요소의 경사 배경뿐. 가로선은 뷰포트 끝까지, 레일 x ±10px에서 끊기고 그 자리에 점(3px — 2x에서도 선 중심에 장치 픽셀 정수).
   시트 폭 = min(1218, 뷰포트 − 거터×2를 6의 배수로 내림) — 2·3열 경계가 정수 px. 1440에서 레일 x 111 · 1329(칸 글 x 159 = 무대 카드 x 160) ── */
.x-land {
  --g-w: min(1218px, round(down, 100vw - 2 * var(--gutter), 6px));
  --g-l: calc(50% - var(--g-w) / 2); --g-r: calc(50% + var(--g-w) / 2); --g-d: 3px; --g-d0: 1px;
}
@supports not (width: round(down, 1px, 1px)) { .x-land { --g-w: min(1218px, 100vw - 2 * var(--gutter)); } }
.x-land {
  --g-line: color-mix(in srgb, var(--line) 55%, transparent);
  --g-hl: linear-gradient(90deg, var(--g-line) calc(var(--g-l) - 10px), transparent 0 calc(var(--g-l) + 11px), var(--g-line) 0 calc(var(--g-r) - 10px), transparent 0 calc(var(--g-r) + 11px), var(--g-line) 0);
  --g-hd: linear-gradient(90deg, transparent calc(var(--g-l) - var(--g-d0)), var(--ink) 0 calc(var(--g-l) - var(--g-d0) + var(--g-d)), transparent 0 calc(var(--g-r) - var(--g-d0)), var(--ink) 0 calc(var(--g-r) - var(--g-d0) + var(--g-d)), transparent 0);
  --g-rails: linear-gradient(var(--g-line), var(--g-line)) 0 0 / 1px 100% no-repeat, linear-gradient(var(--g-line), var(--g-line)) 100% 0 / 1px 100% no-repeat;
}
.land-stage, .land-strip, .land-start { position: relative; }
:is(.land-g, .land-start)::before, .land-start::after { content: ''; position: absolute; pointer-events: none; }
/* 가로선 + 레일 위 점 — 기능 격자·마무리는 윗변·아랫변. 레일 — 마무리는 윗선·아랫선 사이(격자 안은 land-grid.css) */
:is(.land-g, .land-start)::before {
  inset: calc(-1 * var(--g-d0)) 0; z-index: 1;
  background: var(--g-hd) 0 0 / 100% var(--g-d) no-repeat, var(--g-hl) 0 var(--g-d0) / 100% 1px no-repeat,
    var(--g-hd) 0 100% / 100% var(--g-d) no-repeat, var(--g-hl) 0 calc(100% - var(--g-d0)) / 100% 1px no-repeat;
}
.land-start::after { top: 10px; bottom: 10px; left: var(--g-l); width: calc(var(--g-w) + 1px); background: var(--g-rails); }
/* 무대·띠 — 내용(1120)과 시트(1218) 사이에 49px가 있을 때만(1266 이상) 무대 위 32px 선(히어로 아래 여백 안)에서 레일이 내려와 격자 윗선 10px 위에 선다.
   더 좁으면 레일이 무대 카드·띠 글과 겹친다 — 도면은 격자 윗선에서 시작한다 */
@media (min-width: 1266px) {
  .land-stage::before, :is(.land-stage, .land-strip)::after { content: ''; position: absolute; pointer-events: none; }
  .land-stage::before { top: calc(-32px - var(--g-d0)); left: 0; right: 0; height: var(--g-d); background: var(--g-hd), var(--g-hl) 0 var(--g-d0) / 100% 1px no-repeat; }
  :is(.land-stage, .land-strip)::after { top: 0; bottom: 0; left: var(--g-l); width: calc(var(--g-w) + 1px); background: var(--g-rails); }
  .land-stage::after { top: -22px; }
  :is(.land-stage, .land-strip):has(+ .land-g)::after { bottom: 10px; }
}

/* ── S3 쓰는 팀 띠 — 제목 + 문턱 넘은 숫자 한 줄, 그 아래 실제 팀 이름 줄. 흐름(M6)은 land.js가 넘칠 때만 is-flow를 단다 ── */
.land-strip { padding-bottom: var(--s-12); }
.land-strip-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-6); margin-bottom: var(--s-6); }
.land-strip-h { margin: 0; font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
.land-strip-n { display: flex; gap: var(--s-2); margin: 0; font: 500 var(--t-body)/1.45 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.land-strip-n span + span::before { content: '\00B7'; margin-right: var(--s-2); color: var(--ink-3); }
.land-flow { display: flex; overflow: hidden; }
.land-flow-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); margin: 0; padding: 0; list-style: none; }
.land-flow-item {
  display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; text-decoration: none;
  font: 600 18px/1.4 var(--font); letter-spacing: -0.015em; color: var(--ink-2);
  transition: color var(--dur-2) var(--ease-out);
}
.land-flow-item:hover { color: var(--ink); }
.land-flow-logo { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--line); }
.land-flow.is-flow { mask-image: linear-gradient(90deg, transparent, #000 var(--s-10), #000 calc(100% - var(--s-10)), transparent); }
.land-flow.is-flow .land-flow-row { flex: none; flex-wrap: nowrap; padding-inline-end: var(--s-8); animation: land-flow var(--flow-dur, 40s) linear infinite paused; }
.land-flow.is-flow.is-on .land-flow-row { animation-play-state: running; }
.land-flow.is-flow:is(:hover, :focus-within) .land-flow-row { animation-play-state: paused; } /* 위 규칙과 명시도가 같아 뒤에 둔다 */
html[data-land-play] .land-flow.is-flow .land-flow-row { animation-play-state: paused; } /* 기능 격자 칸이 도는 동안(public/land-grid.js) — 한 화면에 움직임 하나 */
@keyframes land-flow { to { transform: translateX(-100%); } }

/* ── S10 스토리 길이 — 밤하늘·판 장면(landing.js)의 동작은 그대로, 스크롤 길이만 400vh → 267vh(1440×900에서 3,600 → 2,400px · LANDING §2 S10 · ROADMAP §8 Q2).
   진행도는 섹션 높이에 비례해 재므로(landing.js measure) 네 장면이 같은 차례·같은 곡선으로 더 짧은 스크롤에 담긴다 ── */
.story { height: 267vh; }
@media (max-width: 860px) { .story { height: 237vh; } } /* 휴대폰 340vh → 237vh(390×844에서 2,870 → 2,000px) */

/* ── S12 마무리 — 스토리가 흰 종이로 녹은 바로 아래 가운데: 제목(56) · [팀 만들기 ›](56 알약) · 무료 한 줄(§7.3). 등장은 data-reveal 한 번(M1) ── */
.land-start { padding: var(--s-9) 0 var(--s-12); text-align: center; }
.land-start-h { margin: 0 auto; font: 600 var(--t-display)/1.1 var(--font); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
.land-start-cta { margin-top: var(--s-8); }
.land-start-free { margin: var(--s-4) 0 0; font-size: var(--t-footnote); line-height: 1.45; letter-spacing: -0.005em; color: var(--ink-3); }

@media (max-width: 699px) {
  .xhero { padding-bottom: var(--s-9); }
  .land-stage { padding-bottom: var(--s-11); }
  .land-strip { padding-bottom: var(--s-11); }
  .land-strip-hd { flex-direction: column; margin-bottom: var(--s-5); }
  .land-flow-item { font-size: var(--t-card); }
  /* 휴대폰은 늘 한 줄(§7.4) — 흐르지 않을 때(JS 전·감소 동작)는 띠 안에서만 손으로 넘긴다. 흐를 때와 높이가 같아 자리가 밀리지 않는다 */
  .land-flow:not(.is-flow) { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .land-flow:not(.is-flow) .land-flow-row { flex-wrap: nowrap; }
  .land-flow.is-flow { mask-image: linear-gradient(90deg, transparent, #000 var(--s-7), #000 calc(100% - var(--s-7)), transparent); }
  .land-shot { width: min(300px, 100%); margin-inline: auto; border: 10px solid var(--ink); border-radius: 44px; box-shadow: var(--e-3); }
  .land-start { padding: var(--s-7) 0 var(--s-11); }
  .land-start-cta { margin-top: var(--s-7); }
}

@media (prefers-reduced-motion: reduce) {
  .land-shot, .land-flow.is-flow .land-flow-row { animation: none; } /* land.js도 감소 동작이면 is-flow를 달지 않는다 — 한 벌이 줄바꿈(휴대폰은 한 줄) */
  .xhero .xu::after { animation: none; } /* 히어로 밑줄(xline)은 app.css의 감소 동작 규칙(.xhero *)이 가상 요소를 못 잡는다 — 끝 모양 그대로 */
}