/* BP-L12 시안 v0 — 도경 승인 전 · why-alma-a.html 전용 ('왜 알마인가요?' 시안 A)
   문법 출처: 지엠컴 About — 검은 바탕 · 아주 큰 굵은 영어 · 끝에 색 네모 점 하나 · 한국어는 작게 옆에 · 1px 선.
   색: 바탕 #060D19 · 글 #F4F6FA · 회색 · 하늘색 #7EE0FF(네모 점 · 포커스에만). 블러 · 빛 번짐 · 그라데이션 판 · 보라 없음.
   움직임: html.wa-anim(움직임 줄이기 아님) → 가림막 안에서 translateY로만 등장. html.wa-pin(가로 769px 이상) → 고정 장면.
   두 class가 없으면(움직임 줄이기 · 휴대폰 고정 해제 · 스크립트 실패) 모든 글이 고정 없이 차례로 보인다. */

:root {
  --hh: 92px;
  --pad: clamp(20px, 4.45vw, 64px);
  --wa-bg: #060D19; --wa-fg: #F4F6FA; --wa-muted: #A3ACBD; --wa-dim: #A4AACD;
  --wa-line: rgba(244, 246, 250, .12); --wa-panel: #0C1626; --wa-cyan: #7EE0FF;
  --wa-ease: cubic-bezier(.16, 1, .3, 1);
  --wa-ease-io: cubic-bezier(.65, 0, .35, 1);
}
@media (max-width: 1120px) { :root { --hh: 78px; } }
@media (max-width: 767px) { :root { --hh: 76px; } }

html.lenis, html.lenis body { scroll-behavior: auto !important; }
body.wa-page { background: var(--wa-bg); color: var(--wa-fg); }
.wa { display: block; background: var(--wa-bg); color: var(--wa-fg); }
.wa:focus { outline: none; }
.wa :where(p, h1, h2, h3, figure) { margin: 0; }
.wa :where(ol, ul) { list-style: none; margin: 0; padding: 0; }
.wa :where(h1, h2, h3) { font-weight: 800; }
.wa-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wa-wrap { width: 100%; max-width: calc(1280px + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }

/* 네모 점 — 첫 화면 'Universe.'의 하늘색 각진 마침표와 같은 모양(모서리 없음, 살짝 가로로 긴 네모) */
.wa-dot { display: inline-block; width: .19em; height: .16em; margin-left: .05em; background: var(--wa-cyan); vertical-align: baseline; }

/* 가림막: 글은 이 안에서 아래 → 제자리로 또렷하게 올라온다(흐림 · 페이드 · 크기 튐 없음) */
.wa-mask { display: block; overflow: hidden; padding-block: .1em .16em; margin-block: -.1em -.16em; }
.wa-mask-in { display: block; transition: transform 1s var(--wa-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.wa-anim [data-mask]:not(.is-in) .wa-mask-in { transform: translateY(125%); }
.wa-anim [data-mask].is-out .wa-mask-in { transform: translateY(-125%); transition-delay: calc(var(--i, 0) * 40ms); }
.wa-anim [data-mask].wa-alma.is-out .wa-mask-in { transform: translateY(125%); }

:focus-visible { outline: 3px solid var(--wa-cyan); outline-offset: 4px; }

/* ── ① 첫 장면 ── */
.wa-intro {
  position: relative;
  --why: clamp(64px, min(10.4vw, 18svh), 176px);
  --lines: clamp(44px, min(7.4vw, 12.4svh), 128px);
  --intro-pt: clamp(28px, 6svh, 72px);
}
.wa-intro-pin { position: relative; overflow: hidden; }
.wa-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* BP-L16 별 터널(three.js) 캔버스 — 첫 그림이 준비되면 천천히 나타난다. 못 쓰면 위 2D 캔버스가 대신 그린다. */
.wa-stars-gl { opacity: 0; transition: opacity 1.4s ease; }
.wa-stars-gl.is-on { opacity: 1; }
.wa-intro-screen { position: relative; z-index: 1; min-height: min(calc(100vh - var(--hh)), 860px); min-height: min(calc(100svh - var(--hh)), 860px); padding: var(--intro-pt) var(--pad); }
.wa-intro-top { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 52px); }
.wa-intro-title { font-size: var(--why); line-height: .9; letter-spacing: -.045em; white-space: nowrap; }
.wa-alma { position: absolute; right: var(--pad); bottom: var(--intro-pt); }
.wa-intro-ko { padding-top: calc(var(--why) * .14); max-width: 820px; }
.wa-intro-ko p { font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.5; letter-spacing: -.02em; }
.wa-intro-ko .wa-intro-ko-sub { margin-top: 2px; font-size: clamp(16px, 1.22vw, 18px); font-weight: 500; color: var(--wa-muted); line-height: 1.6; }
.wa-intro-promise { position: relative; z-index: 1; padding: 0 var(--pad) clamp(88px, 14svh, 160px); }
.wa-intro-lines { font-size: var(--lines); font-weight: 800; line-height: 1.06; letter-spacing: -.05em; }
.wa-intro-lines-sub { margin-top: clamp(18px, 3.2svh, 36px); font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; color: var(--wa-muted); letter-spacing: -.02em; }

.wa-pin .wa-intro { height: 250vh; height: 250svh; }
.wa-pin .wa-intro-pin { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); }
.wa-pin .wa-intro-screen { position: absolute; inset: 0; min-height: 0; }
.wa-pin .wa-intro-promise { position: absolute; left: 0; right: 0; top: calc(var(--intro-pt) + var(--why) * .9 + clamp(14px, 2.8svh, 34px)); padding-bottom: 0; }

/* ── 공통 구역 제목 (Three Promises. · For Everyone. · Together.) ── */
.wa-head { padding: clamp(120px, 20svh, 220px) var(--pad) clamp(56px, 10svh, 112px); }
.wa-wrap > .wa-head { padding-inline: 0; }
.wa-head-center { text-align: center; }
.wa-big { font-size: clamp(44px, 8vw, 128px); line-height: 1; letter-spacing: -.045em; }
.wa-head-ko { margin-top: clamp(14px, 2svh, 22px); font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; color: var(--wa-muted); letter-spacing: -.02em; }

/* ── ② 세 가지 약속 ── */
.wa-promises { --ptop: clamp(24px, 5svh, 56px); --pt-size: clamp(30px, 4.2vw, 60px); --pgap: clamp(20px, 3.6svh, 40px); --pbot: clamp(32px, 6svh, 64px); }
.wa-promise-list { display: grid; gap: clamp(88px, 14svh, 140px); padding: 0 var(--pad) clamp(40px, 6svh, 80px); }
.wa-promise { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wa-promise-title { font-size: var(--pt-size); line-height: 1.15; letter-spacing: -.045em; margin-bottom: var(--pgap); }
.wa-promise-body { position: relative; width: 100%; }
.wa-shot { position: relative; width: min(100%, 400px); margin-inline: auto; aspect-ratio: 3 / 4; }
.wa-shot-in { position: absolute; inset: 0; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(244, 246, 250, .14); }
.wa-shot img { position: absolute; max-width: none; height: auto; display: block;
  width: calc(var(--iw) / var(--cw) * 100%); left: calc(var(--x0) / var(--cw) * -100%); top: calc(var(--y0) / var(--ch) * -100%); }
.wa-promise-text { margin-top: 22px; font-size: clamp(17px, 1.45vw, 21px); font-weight: 650; line-height: 1.5; letter-spacing: -.02em; }

.wa-pin .wa-promise-track { height: calc(100vh - var(--hh) + var(--n) * 72vh); height: calc(100svh - var(--hh) + var(--n) * 72svh); }
.wa-pin .wa-promise-pin { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); overflow: hidden; }
.wa-pin .wa-promise-list { position: relative; display: block; height: 100%; padding: 0; }
.wa-pin .wa-promise { position: absolute; inset: 0; padding: var(--ptop) var(--pad) 0; }
.wa-pin .wa-promise-body { width: auto; }
.wa-pin .wa-shot { width: auto; overflow: hidden; height: min(640px, calc(100svh - var(--hh) - var(--ptop) - var(--pt-size) * 1.2 - var(--pgap) - var(--pbot))); }
/* 그림 오른쪽 아래에 겹친 두 줄: 그림의 빈 곳(연한 바탕)에 걸치게 자르고, 겹친 부분은 difference로 글자가 저절로 어두워진다(판 · 그림자 없음) */
.wa-pin .wa-promise-text { position: absolute; left: var(--tx, 72%); bottom: 9%; margin: 0; width: max-content; max-width: calc(50vw - var(--pad) - (var(--tx, 72%) - 50%)); text-align: left; color: #FAFFFF; mix-blend-mode: difference; }
.wa-pin .wa-promise .wa-mask-in { transform: translateY(125%); }
.wa-pin .wa-promise[data-state="active"] .wa-mask-in { transform: none; }
.wa-pin .wa-promise[data-state="past"] .wa-mask-in { transform: translateY(-125%); transition-delay: 0s; }
.wa-pin .wa-promise .wa-shot-in { transform: translateY(101%); transition: transform 1.05s var(--wa-ease-io); }
.wa-pin .wa-promise[data-state="active"] .wa-shot-in, .wa-pin .wa-promise[data-state="past"] .wa-shot-in { transform: none; }

/* ── ③ 순이익의 10% ── */
.wa-giving { padding: clamp(140px, 24svh, 260px) 0 clamp(40px, 6svh, 80px); overflow: hidden; }
.wa-giving-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; font-size: clamp(46px, 8.4vw, 136px); line-height: 1; letter-spacing: -.05em; }
.wa-giving-a, .wa-giving-b { display: block; white-space: nowrap; }
.wa-giving-panel { margin-top: clamp(8px, 1.2svh, 14px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px);
  padding: clamp(32px, 4.4vw, 64px); background: var(--wa-panel); border: 1px solid rgba(244, 246, 250, .08); border-radius: 6px; }
.wa-giving-panel p { font-size: clamp(19px, 1.7vw, 24px); font-weight: 650; line-height: 1.55; letter-spacing: -.025em; }

/* ── ④ 누구나 ── */
.wa-everyone { padding-bottom: clamp(100px, 16svh, 180px); }
.wa-aud-names { display: none; }
.wa-aud-rows { border-bottom: 1px solid var(--wa-line); }
.wa-aud-row { display: grid; grid-template-columns: minmax(96px, 200px) minmax(0, 1fr); gap: 16px 24px; align-items: baseline; padding: clamp(26px, 4svh, 40px) 0; border-top: 1px solid var(--wa-line); }
.wa-aud-row h3 { font-size: clamp(16px, 1.3vw, 18px); font-weight: 700; letter-spacing: -.02em; }
.wa-aud-row p { font-size: clamp(20px, 2vw, 28px); font-weight: 700; line-height: 1.35; letter-spacing: -.035em; }

.wa-pin .wa-aud { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.wa-pin .wa-aud-names { display: block; position: sticky; top: calc(var(--hh) + clamp(40px, 12svh, 120px));
  font-size: clamp(40px, min(5vw, 8svh), 80px); font-weight: 800; line-height: 1.12; letter-spacing: -.05em; color: var(--wa-dim); }
.wa-pin .wa-aud-names li { transition: color .45s ease; }
.wa-pin .wa-aud-names li.is-on { color: var(--wa-fg); }
.wa-pin .wa-aud-row { min-height: clamp(132px, 16svh, 180px); align-content: start; }

/* ── ⑤ 함께 버는 알마 ── */
.wa-together { padding-bottom: clamp(24px, 4svh, 48px); transition: background-color .3s, color .3s; }
.wa-together[data-theme="light"] { background: #FFFFFF; color: #060D19; --wa-line: rgba(6, 13, 25, .14); --wa-muted: #4E5869; }
.wa-together[data-theme="light"] :focus-visible { outline-color: #060D19; }
.wa-grid { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--wa-line); }
.wa-cell { display: flex; flex-direction: column; align-items: flex-start; min-height: clamp(260px, 34svh, 360px); padding: clamp(32px, 4.4vw, 64px) var(--pad); }
.wa-cell + .wa-cell { border-left: 1px solid var(--wa-line); }
.wa-cell h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -.045em; }
.wa-cell-main { margin-top: 20px; max-width: 30em; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; line-height: 1.55; letter-spacing: -.02em; }
.wa-cell-note { margin-top: 10px; font-size: 15px; color: var(--wa-muted); }
.wa-link { margin-top: 24px; display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 16px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.wa-link:hover { text-decoration-thickness: 2px; }
.wa-theme-row { display: flex; justify-content: flex-end; padding: 12px var(--pad) 0; }
.wa-theme-toggle { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--wa-muted); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.wa-theme-toggle:hover { color: inherit; }

/* ── ⑥ 마지막 ── */
.wa-final { padding: clamp(140px, 24svh, 260px) 0 clamp(72px, 12svh, 140px); }
.wa-final-title { font-size: clamp(36px, 5.8vw, 92px); line-height: 1.14; letter-spacing: -.05em; }
.wa-final-title .wa-mask { display: inline-block; vertical-align: top; }
.wa-cta { margin-top: clamp(32px, 5svh, 56px); display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 999px;
  background: #F4F6FA; color: #060D19; font-size: 17px; font-weight: 700; text-decoration: none; transition: background-color .2s; }
.wa-cta:hover { background: #DDE4EE; }
.wa-cta:focus-visible { border-radius: 999px; }

/* ── 휴대폰: 고정 장면을 풀고 위아래로 쌓는다 ── */
@media (max-width: 768px) {
  .wa-intro { --why: clamp(64px, 20vw, 96px); --lines: clamp(44px, 13vw, 64px); }
  .wa-intro-screen { min-height: min(calc(100svh - var(--hh)), 560px); }
  .wa-intro-promise { padding-bottom: 64px; }
  .wa-head { padding-top: 96px; padding-bottom: 48px; }
  .wa-giving { padding-top: 112px; }
  .wa-final { padding: 112px 0 56px; }
  .wa-intro-top { flex-direction: column; gap: 22px; }
  .wa-intro-ko { padding-top: 0; }
  .wa-big { font-size: clamp(40px, 12vw, 64px); }
  .wa-promise-title { font-size: clamp(28px, 8vw, 40px); }
  .wa-shot { width: min(100%, 360px); }
  .wa-giving-title { font-size: clamp(42px, 12.4vw, 72px); }
  .wa-giving-panel { grid-template-columns: 1fr; gap: 14px; padding: 28px 24px; }
  .wa-giving-panel p { font-size: 18px; }
  .wa-aud-row { grid-template-columns: 1fr; gap: 6px; }
  .wa-aud-row h3 { color: var(--wa-muted); }
  .wa-grid { grid-template-columns: 1fr; }
  .wa-cell { min-height: 0; padding: 36px var(--pad) 40px; }
  .wa-cell + .wa-cell { border-left: 0; border-top: 1px solid var(--wa-line); }
  .wa-final-title { font-size: clamp(34px, 10vw, 52px); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-mask-in, .wa-shot-in, .wa-aud-names li, .wa-together, .wa-cta, .wa-stars-gl { transition: none !important; }
}
/* 관제탑 10/12: 마지막 큰 줄 "나다움이, 모든 채널에 닿도록."이 바로 아래 바닥 한 줄과 겹쳐 두 번 보여서 — 이 페이지에서만 바닥 한 줄을 숨김 */
.wa-page .stage-footer-top p { display: none; }

/* 도경 10/12: 스크롤로 강조된 대상은 색과 크기가 함께 변화한다. */
.wa-pin .wa-live .wa-aud-names { line-height:1.25; }
.wa-pin .wa-live .wa-aud-names li { transform:scale(1); transform-origin:left center; transition:color .45s ease, transform .45s ease; }
.wa-pin .wa-live .wa-aud-names li.is-on { color:#7ee0ff; transform:scale(1.1); }
@media(prefers-reduced-motion:reduce) {
  .wa-pin .wa-live .wa-aud-names li { transition:none; transform:none; }
}

/* 도경 10/12: 함께 버는 알마의 두 제목 강조. */
.wa-live .wa-together .wa-cell h3 { color:#7ee0ff; }

.wa-live .wa-final-keyword { color:#7ee0ff; }

.wa-live .wa-keyword, .wa-live .wa-giving2-num { color:#7ee0ff; }
/* Expanding-circle arrow interaction; provenance: docs/button-motion-source.md. */
.wa-live .wa-arrow-cta { position:relative; isolation:isolate; overflow:hidden; gap:18px; padding:0 28px 0 18px; background:#f4f6fa; color:#060d19; }
.wa-arrow-cta .wa-cta-fill { position:absolute; z-index:-1; top:0; bottom:0; left:0; width:56px; border-radius:999px; background:#7ee0ff; transition:width 450ms cubic-bezier(.65,0,.15,1); }
.wa-arrow-cta .wa-cta-arrow { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform 450ms cubic-bezier(.65,0,.15,1); }
.wa-arrow-cta .wa-cta-label { position:relative; }
.wa-live .wa-arrow-cta:is(:hover,:focus-visible) { background:#f4f6fa; color:#060d19; }
.wa-arrow-cta:is(:hover,:focus-visible) .wa-cta-fill { width:100%; }
.wa-arrow-cta:is(:hover,:focus-visible) .wa-cta-arrow { transform:translateX(4px); }
@media(prefers-reduced-motion:reduce) {
 .wa-arrow-cta .wa-cta-fill, .wa-arrow-cta .wa-cta-arrow { transition:none; }
}

/* 도경 10/12 확정: 강조색 디벨롭 시안 적용. */
.wa-live { --accent-ice:#A8E8FF; --accent-blue:#91B4FF; --accent-dawn:#F1D1A3; }
.wa-live .wa-intro-promise .wa-keyword { color:var(--accent-blue); }
.wa-live .wa-giving2-num { color:var(--accent-dawn); }
.wa-pin .wa-live .wa-aud-names li.is-on { color:var(--accent-ice); }
.wa-live .wa-together .wa-cell:first-child h3 { color:var(--accent-ice); }
.wa-live .wa-together .wa-cell:nth-child(2) h3 { color:var(--accent-blue); }
.wa-live #wa-promises-title .wa-keyword,
.wa-live .wa-final-keyword { color:var(--accent-ice); }
@supports(background-clip:text) {
 .wa-live #wa-promises-title .wa-keyword,
 .wa-live .wa-final-keyword {
  background:linear-gradient(110deg,var(--accent-ice) 15%,var(--accent-blue) 90%);
  background-clip:text; -webkit-background-clip:text; color:transparent;
 }
}
@media(forced-colors:active) {
 .wa-live #wa-promises-title .wa-keyword,
 .wa-live .wa-final-keyword { background:none; color:CanvasText; }
}