@import url("assets/fonts/split/WantedSans-Regular.css?v=950c73b0");
@import url("assets/fonts/split/WantedSans-SemiBold.css?v=6ca361e4");
@import url("assets/fonts/split/WantedSans-ExtraBold.css?v=bc7e272b");

/* ════════════════════════════════════════════════════════════
   FIGG v3.1 — 앱 화면이 주인공. 기준: awesome-design-md / Apple DESIGN.md 를 FIGG 에 옮긴 것.
     · 구간 구분은 선이나 그림자가 아니라 바탕색(아이보리 ↔ 잉크 판)으로
     · 그림자는 제품(폰 · 카드 실물)에만, 버튼 · 상자에는 없다
     · 장식용 그라디언트 없음(사진 위 글자를 읽히게 하는 막만 예외)
     · 모서리 문법: 버튼 = 알약, 입력 · 폼 = 12/18, 구간 판 = 0
     · 제목 600 굵기 + 좁은 자간, 큰 숫자만 800
   ════════════════════════════════════════════════════════════ */

:root{
  --cream:      #F5F1EA;
  --cream-2:    #FBF9F5;
  --ink-tile:   #141416;
  --card:       #FFFFFF;
  --cool:       #F2F4F7;
  --ink:        #17181C;
  --ink-2:      #575159;
  --ink-3:      #6E6771;
  --ink-fade:   #877F89;
  --on-dark:    #F4F2EE;
  --on-dark-2:  rgba(244,242,238,.68);
  --rose:       #E9B8C2;    /* 어두운 판 위의 버건디 — 같은 색 계열을 밝혀 읽히게 */
  --line:       rgba(23,24,28,.10);
  --line-2:     rgba(23,24,28,.06);
  --burgundy:   #6C2A36;
  --burgundy-d: #5B2230;
  --tint:       #F7EFF1;
  --up:         #F04452;
  --down:       #3182F6;
  --success:    #0FA968;
  --err:        #C62E3B;

  --t-xs: 13px;  --t-sm: 15px;  --t-md: 17px;  --t-lg: 20px;
  --f-lg:   clamp(17px, 1.45vw, 20px);
  --f-xl:   clamp(20px, 2vw, 26px);
  --f-2xl:  clamp(26px, 2.8vw, 38px);
  --f-3xl:  clamp(32px, 4.2vw, 60px);
  --f-hero: clamp(42px, 5.6vw, 84px);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gutter: clamp(20px, 5vw, 72px);

  --r-sm: 12px; --r-lg: 18px; --r-pill: 999px;
  /* 하나뿐인 그림자 — 제품(폰 · 카드)이 바닥에 놓일 때 */
  --product-shadow: 0 30px 60px -18px rgba(40,26,22,.34), 0 10px 24px -12px rgba(40,26,22,.22);

  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-in:   cubic-bezier(.55,.055,.675,.19);
  --ease-io:   cubic-bezier(.645,.045,.355,1);
  --ease-pop:  cubic-bezier(.45,1.45,.8,1);

  --ko: "Wanted Sans", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
/* 가로로 밀리는 것을 막는다 — clip 은 스크롤 상자를 만들지 않아 붙는 스크롤(sticky)이 그대로 산다 */
html { overflow-x: clip; }
body{
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--ko); font-size: var(--t-md); line-height: 1.6; letter-spacing: -.01em;
  word-break: keep-all; -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 3px; border-radius: var(--s-1); }

.skip{ position: absolute; left: -9999px; background: var(--burgundy); color: var(--cream); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); }
.skip:focus { left: var(--s-4); top: var(--s-4); z-index: 200; }

.wrap{ width: min(1280px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
p, li, h2, h3{ text-wrap: pretty; }
.br-m{ display: none; }
@media (max-width: 620px){ .br-m{ display: inline; } .br-pc{ display: none; } }
.nw{ white-space: nowrap; }

/* 판 — 높이를 일부러 다르게 둔다. 같은 여백이 줄지어 반복되면 기계가 찍은 리듬이 된다 */
.tile{ padding-block: clamp(104px, 12vw, 176px); position: relative; overflow-x: clip; }
.tile--parch{ background: var(--cream-2); }

.label{ font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--burgundy); }
.h2{ font-size: var(--f-3xl); font-weight: 600; line-height: 1.12; letter-spacing: -.045em; }
.lede{ margin-top: var(--s-5); font-size: var(--f-lg); line-height: 1.6; color: var(--ink-2); max-width: 36em; }

/* 줄 가림막 — 제목에만. 문단은 그냥 있다(문단마다 떠오르는 효과는 의미가 없다) */
.lines .ln{ display: block; overflow-y: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.lines .ln > span{ display: inline-block; }
.js .lines .ln > span{ transform: translateY(110%); transition: transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.in .lines .ln > span, .lines.in .ln > span{ transform: none; }
.js .rv{ opacity: 0; transform: translateY(18px); }
.rv.in, .in > .rv{ opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }

.progress{ position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; background: var(--burgundy); transform-origin: left; transform: scaleX(0); }

/* ════════ 내비 ════════ */
/* 리퀴드 글라스 — 뒤 화면을 실시간으로 흐리고(blur) 가장자리 띠에서 굴절(glass.js 가 Chromium 에서 --lg-url 을 채운다).
   글자 대비는 유리 농도(tint)가 지킨다: 밝은 유리 .62 면 뒤가 새까매도 잉크 글자 대비 4.5:1 이상 */
:root{ --lg-blur: 14px; --lg-refract: 34; --lg-bezel: 18; --lg-sat: 1.8; --lg-tint-l: .62; --lg-tint-d: .58; --lg-rim: .55; }
.lg{
  --lg-tint: rgba(250,248,244,var(--lg-tint-l));
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) var(--lg-url,) saturate(var(--lg-sat));
  /* 빛을 받는 윗변 + 얇은 유리 테 + 바닥에 떨어지는 옅은 그림자 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--lg-rim)), inset 0 0 0 1px rgba(255,255,255,calc(var(--lg-rim) * .35)), inset 0 -1px 0 rgba(23,24,28,.06), 0 12px 32px -14px rgba(40,26,22,.32);
  transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.nav{ position: fixed; z-index: 90; top: 10px; left: 50%; translate: -50% 0; width: min(1180px, calc(100% - 24px)); height: 60px; display: flex; align-items: center; gap: var(--s-4); padding: 0 8px 0 22px; border-radius: var(--r-pill); }
.nav[data-tone="dark"]{
  --lg-tint: rgba(22,22,25,var(--lg-tint-d));
  box-shadow: inset 0 1px 0 rgba(255,255,255,calc(var(--lg-rim) * .45)), inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 36px -14px rgba(0,0,0,.6);
}
/* 밝은 화면(3D 폰의 흰 화면)이 내비 밑을 지날 때 — 어두운 유리를 짙게 해 흰 글자 대비를 지킨다 */
.nav[data-tone="dark"][data-dense="true"]{ --lg-tint: rgba(18,18,20,.88); }
.nav .btn--sm{ min-height: 44px; }
.nav[data-tone="dark"] .brand img{ filter: brightness(0) invert(.94); }
.nav[data-tone="dark"] .brand .desc, .nav[data-tone="dark"] .nav-links a:not(.btn){ color: var(--on-dark-2); }
.nav[data-tone="dark"] .nav-links a[aria-current="true"]{ color: var(--on-dark); }
.nav[data-tone="dark"] .nav-links a:not(.btn)::after{ background: var(--on-dark); }
.brand img, .nav-links a{ transition: color .3s var(--ease-out), filter .3s var(--ease-out); }
.brand{ display: flex; align-items: center; gap: var(--s-3); min-height: 44px; }
.brand img{ height: 26px; width: auto; }
.brand .desc{ font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.nav-links{ margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav-links a:not(.btn){ position: relative; padding: 10px 14px; border-radius: var(--r-pill); font-size: var(--t-sm); color: var(--ink-2); transition: color .2s var(--ease-out); }
.nav-links a:not(.btn)::after{ content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity .2s var(--ease-out); }
.nav-links a[aria-current="true"]{ color: var(--ink); }
.nav-links a[aria-current="true"]::after{ opacity: 1; }

/* ── 버튼 — 그림자 없이. 누르면 줄어든다 ── */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em;
  background: var(--burgundy); color: #FFF8F3;
  transition: transform .16s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn:active{ transform: scale(.96); transition-duration: .1s; }
.btn--ghost{ background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,24,28,.22); }
.btn--sm{ min-height: 40px; padding: 0 18px; font-size: var(--t-sm); margin-left: var(--s-2); }

/* ════════ 아이폰 — CSS 로 그린 티타늄 테두리 · 측면 버튼 · 다이내믹 아일랜드 · 유리 반사 ════════
   비율은 실제 기기(70.6 × 146.6mm)와 화면(393 × 852pt)에서: 테두리 1.2% + 베젤 3% → 기기 1 : 2.07 */
.iphone{
  --w: 300px;
  position: relative; width: var(--w); aspect-ratio: 1 / 2.07;
  border-radius: calc(var(--w) * .17);
  padding: calc(var(--w) * .012);
  background:
    linear-gradient(135deg, #E6E2DC 0%, #A39E98 16%, #F3F0EB 32%, #8A857F 50%, #D8D4CE 68%, #8F8A84 84%, #ECE8E2 100%);
  box-shadow: var(--product-shadow);
}
.ip-body{
  position: relative; height: 100%; border-radius: calc(var(--w) * .158);
  background: #09090A; padding: calc(var(--w) * .03);
  box-shadow: inset 0 0 0 calc(var(--w) * .004) rgba(255,255,255,.14);
}
.ip-screen{ position: relative; height: 100%; border-radius: calc(var(--w) * .128); overflow: hidden; background: #fff; isolation: isolate; }
.ip-screen img{ position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; will-change: transform; }
/* 유리에 얹힌 빛 한 줄 — 화면이 평면 그림이 아니라 유리 아래 있다는 느낌 */
.ip-screen::after{ content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 30%); }
.ip-island{ position: absolute; z-index: 5; left: 50%; top: calc(var(--w) * .028); width: 31%; height: calc(var(--w) * .084); translate: -50% 0; border-radius: var(--r-pill); background: #000; }
.ip-b{ position: absolute; width: calc(var(--w) * .014); border-radius: 2px; background: linear-gradient(90deg, #7F7A74, #D9D5CF 55%, #8A857F); }
.ip-act{ left: calc(var(--w) * -.009); top: 17%; height: 4.5%; }
.ip-vu{ left: calc(var(--w) * -.009); top: 25%; height: 8%; }
.ip-vd{ left: calc(var(--w) * -.009); top: 35%; height: 8%; }
.ip-pw{ right: calc(var(--w) * -.009); top: 28%; height: 12%; }
/* 화면 바꿈 — 흐림으로 이어 붙인다 */
.ip-screen img[data-key]{ opacity: 0; filter: blur(8px); transition: opacity .38s var(--ease-out), filter .38s var(--ease-out); }
.ip-screen img[data-key].is-on{ opacity: 1; filter: none; }
.ip-screen::before{ content: ""; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.ip-screen.flash::before{ animation: flash .7s var(--ease-out); }
@keyframes flash{ 0%{ opacity: .95; } 100%{ opacity: 0; } }

/* ════════ 이야기 — 붙어 있는 무대 ════════ */
.story{ position: relative; height: calc(var(--steps, 11) * 100vh); }
.story-pin{ position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.story-bg{ position: absolute; inset: 0; background: var(--cream); }
.hero-copy{
  position: absolute; z-index: 3; top: 50%; translate: 0 -50%;
  left: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
  width: min(600px, 46vw);
  will-change: transform, opacity;
}
.slogan{ font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--f-xl); line-height: 1.3; padding-bottom: .1em; color: var(--burgundy); }
.hero-copy h1{ margin-top: var(--s-4); font-size: var(--f-hero); font-weight: 600; line-height: 1.06; letter-spacing: -.04em; }
.hero-copy h1 em{ font-style: normal; color: var(--burgundy); }
@media (min-width: 961px){ .hero-copy h1 .ln > span{ white-space: nowrap; } }
.hero-sub{ margin-top: var(--s-5); font-size: var(--f-lg); line-height: 1.6; color: var(--ink-2); }
.hero-cta{ margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* 화면 설명 — 어두운 판 위 */
.story-copy{ position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sc{
  position: absolute; top: 50%; translate: 0 -50%;
  left: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
  width: min(520px, 38vw); color: var(--on-dark);
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), filter .45s var(--ease-out);
}
.sc.on{ opacity: 1; transform: none; filter: none; pointer-events: auto; }
.sc.was{ transform: translateY(-28px); }
.sc-k{ font-size: var(--t-sm); font-weight: 600; color: var(--rose); }
.sc h2{ margin-top: var(--s-3); font-size: clamp(34px, 3.9vw, 58px); font-weight: 600; line-height: 1.12; letter-spacing: -.045em; }
.sc p:not(.sc-k){ margin-top: var(--s-5); font-size: var(--f-lg); line-height: 1.65; color: var(--on-dark-2); }
.sc .sc-tags{ display: flex; gap: var(--s-4); font-size: var(--t-sm); font-weight: 600; color: var(--on-dark); letter-spacing: .02em; }
.sc-tags span::before{ content: "·"; margin-right: var(--s-4); color: var(--on-dark-2); }

.story-rail{ position: absolute; z-index: 3; right: var(--gutter); top: 50%; translate: 0 -50%; display: grid; gap: 12px; opacity: 0; transition: opacity .3s; }
.story-rail.on{ opacity: 1; }
.story-rail li{ width: 6px; height: 6px; border-radius: 50%; background: rgba(244,242,238,.28); transition: transform .3s var(--ease-out), background .3s; }
.story-rail li.on{ background: var(--on-dark); transform: scale(1.5); }

.cam{ position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; will-change: transform; }
.iphone--hero{ --w: var(--pw, 300px); }
/* 폰 기울기(마우스 · 단계 사이 회전)는 transform, 등장은 translate · scale 따로 — 서로 덮어쓰지 않게 */
.cam .iphone{
  transform: perspective(1600px) rotateY(calc(var(--ry, 0deg) + var(--tx, 0deg))) rotateX(var(--ty, 0deg));
  transition: opacity .6s var(--ease-out), translate .9s var(--ease-out), scale .9s var(--ease-out);
}
.js .story:not(.c-in) .cam .iphone{ opacity: 0; translate: 0 14%; scale: .94; }

/* ── 볼 — 연출 동안만 ── */
.capsule{
  position: absolute; z-index: 5; left: var(--cx, 70%); top: var(--cy, 55%);
  width: var(--cw, 240px); aspect-ratio: 1;
  margin-left: calc(var(--cw, 240px) / -2); margin-top: calc(var(--cw, 240px) / -2);
  pointer-events: none;
}
.js .capsule:not(.on){ opacity: 0; }
.capsule[hidden]{ display: none; }
.cap-body{ position: absolute; inset: 0; transform-origin: 50% 90%; }
.cap-body img{ position: absolute; inset: 0; width: 100%; height: 100%; }
.cap-lid{ transform-origin: 82% 50%; }
.cap-inner{ opacity: 0; }
.cap-glow{ position: absolute; inset: -55%; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255,247,232,.95), rgba(246,226,196,.5) 45%, rgba(245,241,234,0) 75%); }
.cap-cards{ position: absolute; left: 50%; top: 47%; width: 0; height: 0; }
.cap-cards img{ position: absolute; left: 0; top: 0; width: calc(var(--cw, 240px) * .38); max-width: none; border-radius: 5px; box-shadow: var(--product-shadow); opacity: 0; }

/* ── 히어로 Figgy ── */
.fg-stage{ position: absolute; z-index: 4; left: var(--gx, 60%); top: var(--gy, 70%); width: calc(var(--u) * 260); height: calc(var(--u) * 200); pointer-events: none; --fw: clamp(100px, 9vw, 140px); --u: calc(var(--fw) / 120); will-change: opacity; }
.fg{ position: absolute; bottom: 0; left: calc(var(--u) * 44); width: calc(var(--u) * 120); height: calc(var(--u) * 149); cursor: pointer; pointer-events: auto; }
.fg > *{ position: absolute; pointer-events: none; }
.fg-shadow{ left: calc(var(--u) * 17); top: calc(var(--u) * 139); width: calc(var(--u) * 86); height: calc(var(--u) * 13); border-radius: 50%; background: radial-gradient(closest-side, rgba(91,34,48,.26), rgba(91,34,48,0)); }
.fg-walk{ inset: 0; transform-origin: 50% 50%; }
.fg-walk img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.fg-walk img.on{ visibility: visible; }
.fg-hello{ left: calc(var(--u) * -5); top: calc(var(--u) * 9); width: calc(var(--u) * 131); height: calc(var(--u) * 137); object-fit: contain; visibility: hidden; }
.fg-hello.on{ visibility: visible; }
.fg.idle .fg-hello{ animation: breathe 3.4s var(--ease-io) infinite; transform-origin: 50% 100%; }
@keyframes breathe{ 0%,100%{ scale: 1 1; } 50%{ scale: 1.012 .988; } }
.fg-bubble{ left: calc(var(--u) * 76); top: calc(var(--u) * -21); transform-origin: 0% 100%; white-space: nowrap; padding: calc(var(--u) * 7) calc(var(--u) * 11); font-size: max(14px, calc(var(--u) * 10)); font-weight: 600; line-height: 1.2; color: var(--ink); background: #fff; border-radius: calc(var(--u) * 13) calc(var(--u) * 13) calc(var(--u) * 13) calc(var(--u) * 3); opacity: 0; }

/* ════════ 카드 두 줄 — 스크롤 속도만큼 흐른다 ════════ */
.strip{ padding-block: clamp(72px, 8vw, 120px) clamp(40px, 5vw, 72px); overflow: hidden; display: grid; gap: clamp(14px, 1.6vw, 22px); }
.strip-row{ display: flex; gap: clamp(14px, 1.6vw, 22px); width: max-content; will-change: transform; }
.strip-row img{ width: clamp(112px, 11vw, 170px); aspect-ratio: 63 / 88; object-fit: cover; border-radius: clamp(6px, .6vw, 9px); box-shadow: var(--product-shadow); }

/* ════════ 소개 ════════ */
.about{ padding-top: clamp(48px, 6vw, 96px); }
.about .wrap{ max-width: 1180px; }
.fill{ font-size: clamp(32px, 4.4vw, 64px); font-weight: 600; line-height: 1.24; letter-spacing: -.04em; text-wrap: balance; }
.fill .w{ color: rgba(23,24,28,.22); transition: color .35s var(--ease-out); }
.fill .w.on{ color: var(--ink); }
.fill .w.hl.on{ color: var(--burgundy); }
.about-body{ margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.about-ko{ font-size: var(--f-lg); line-height: 1.75; color: var(--ink-2); }
.triad{ display: grid; }
.triad > div{ display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--line); }
.triad > div:last-child{ border-bottom: 1px solid var(--line); }
.triad dt{ font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--ink-3); padding-top: 5px; }
.triad dd{ margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.triad dd b{ display: block; font-size: var(--t-lg); font-weight: 600; letter-spacing: -.03em; color: var(--ink); margin-bottom: 2px; }

/* ════════ 시세 — 숫자와 선 ════════ */
.spread{ margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.pv-head{ display: flex; align-items: center; gap: var(--s-3); }
.pv-head img{ width: 38px; border-radius: 4px; box-shadow: var(--product-shadow); }
.pv-head p{ line-height: 1.3; }
.pv-head b{ display: block; font-size: var(--t-md); font-weight: 600; }
.pv-head span{ font-size: var(--t-sm); color: var(--ink-3); }
.mega-n{ margin-top: var(--s-5); font-size: clamp(60px, 8.4vw, 128px); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
/* 빨강 위 3.5:1 — 굵게(700) 20px 은 큰 글자 기준(3:1)을 충족한다 */
.delta{ margin-top: var(--s-3); font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.delta span{ font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.up{ color: var(--up); }
.down{ color: var(--down); }
.chart{ display: block; width: 100%; height: clamp(140px, 15vw, 220px); margin-top: var(--s-6); overflow: visible; }
.chart-line{ fill: none; stroke: var(--up); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.chart-area{ opacity: 0; }
.chart-dot{ fill: var(--up); opacity: 0; }
.chart.drawn .chart-line{ stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-out); }
.chart.drawn .chart-area{ opacity: 1; transition: opacity .9s var(--ease-out); }
.chart.drawn .chart-dot{ opacity: 1; transition: opacity .15s linear .85s; }
.seg{ margin-top: var(--s-5); display: grid; grid-template-columns: repeat(4, 1fr); max-width: 440px; padding: 4px; border-radius: var(--r-pill); background: rgba(23,24,28,.06); }
.seg button{ min-height: 40px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer; font-size: var(--t-sm); color: var(--ink-3); transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .12s var(--ease-out); }
.seg button[aria-selected="true"]{ background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line-2); }
.seg button:active{ transform: scale(.96); }
.note{ margin-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-3); }
.fx-toggle{ position: relative; margin-left: auto; display: inline-grid; grid-template-columns: 1fr 1fr; width: 112px; padding: 4px; border-radius: var(--r-pill); background: rgba(23,24,28,.06); }
.fx-toggle button{ position: relative; z-index: 1; min-height: 38px; border: 0; background: none; cursor: pointer; font-size: var(--t-md); font-weight: 600; color: var(--ink-3); transition: color .2s var(--ease-out); }
.fx-toggle button[aria-checked="true"]{ color: var(--ink); }
.fx-knob{ position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill); background: #fff; box-shadow: 0 0 0 1px var(--line-2); transition: transform .28s var(--ease-out); }
.fx-toggle[data-cur="usd"] .fx-knob{ transform: translateX(100%); }
.side-block{ padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.side-block + .side-block{ margin-top: clamp(48px, 6vw, 80px); }
.side-block h3{ font-size: var(--f-xl); font-weight: 600; letter-spacing: -.035em; }
.side-sub{ margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-3); }
.grades{ margin-top: var(--s-5); display: grid; gap: var(--s-5); }
.grades li{ display: grid; grid-template-columns: 64px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--s-4); }
.grades b{ font-size: var(--t-md); font-weight: 600; }
.grades span{ grid-row: 2; font-size: var(--t-xs); color: var(--ink-3); }
.grades i{ grid-row: 1 / span 2; grid-column: 2; height: 6px; border-radius: 3px; background: var(--success); transform-origin: left; transform: scaleX(var(--p)); transition: transform 1s var(--ease-out); }
.js .grades:not(.in) i{ transform: scaleX(0); }
.grades li:nth-child(2) i{ transition-delay: .1s; } .grades li:nth-child(3) i{ transition-delay: .2s; }
.grades em{ grid-column: 3; font-style: normal; font-size: var(--t-lg); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.grades small{ grid-column: 3; grid-row: 2; font-size: var(--t-xs); color: var(--ink-3); text-align: right; }
.count-n{ font-size: clamp(52px, 6vw, 92px); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.count-n .unit{ font-size: .42em; font-weight: 600; margin-left: .06em; letter-spacing: -.02em; }
.side-count h3{ margin-top: var(--s-3); }
.hits-row{ margin-top: clamp(80px, 10vw, 140px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hits{ position: relative; height: clamp(260px, 28vw, 380px); }
.hits img{
  position: absolute; left: 50%; bottom: 0; width: clamp(120px, 12vw, 176px); max-width: none; margin-left: calc(clamp(120px, 12vw, 176px) / -2);
  border-radius: 8px; box-shadow: var(--product-shadow); transform-origin: 50% 150%;
  transform: rotate(calc(var(--n) * 12deg)) translateY(calc(var(--a, 0) * 6px));
  transition: transform .9s var(--ease-out) calc(.15s + (var(--n) + 2) * 50ms);
}
.js .hits:not(.in) img{ transform: rotate(0) translateY(24px); }
.hits-copy h3{ font-size: var(--f-2xl); font-weight: 600; letter-spacing: -.04em; }
.hits-copy p{ margin-top: var(--s-4); font-size: var(--f-lg); color: var(--ink-2); line-height: 1.65; }

/* 굴러가는 숫자 */
.roll{ display: inline-flex; overflow: hidden; vertical-align: top; line-height: 1; height: 1em; }
.roll .rd{ display: inline-block; height: 1em; overflow: hidden; }
.roll .rc{ display: flex; flex-direction: column; transition: transform .9s var(--ease-out); transition-delay: calc(var(--k, 0) * 28ms); }
.roll .rc > span{ display: block; height: 1em; line-height: 1; }
.roll .rs{ display: inline-block; }

/* ════════ 라운지 ════════ */
.lounge-head{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; }
.lounge-head .lede{ margin-top: 0; }
.flow{ margin-top: clamp(48px, 6vw, 88px); }
.flow-stage{ position: relative; height: clamp(520px, 50vw, 700px); perspective: 1600px; touch-action: pan-y; cursor: grab; user-select: none; }
.flow-stage.dragging{ cursor: grabbing; }
.flow-item{ position: absolute; left: 50%; top: 0; margin: 0; --w: clamp(230px, 21vw, 310px); margin-left: calc(var(--w) / -2); transform-style: preserve-3d; will-change: transform; }
.flow-item .iphone{ --w: inherit; }
.flow-item img{ pointer-events: none; -webkit-user-drag: none; }
.flow-ctrl{ margin-top: var(--s-5); display: flex; align-items: center; justify-content: center; gap: var(--s-5); }
.flow-cap{ min-width: 9em; text-align: center; font-size: var(--t-md); font-weight: 600; }
.round-btn{ width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px rgba(23,24,28,.2); cursor: pointer; transition: transform .14s var(--ease-out), background .2s; }
.round-btn:active{ transform: scale(.92); }
.round-btn svg{ width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sub-h{ margin-top: clamp(80px, 10vw, 128px); font-size: var(--f-xl); font-weight: 600; letter-spacing: -.035em; padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
/* 커뮤니티 열 곳 — 상자 없이 아이콘이 주인공 */
.comms{ margin-top: var(--s-6); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
.comms li{ display: grid; justify-items: start; gap: 2px; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i) * 40ms); }
.js .comms:not(.in) li{ opacity: 0; transform: translateY(14px); }
.comms img{ width: 72px; height: 72px; margin-bottom: var(--s-3); transition: transform .35s var(--ease-out); }
.comms b{ font-size: var(--t-md); font-weight: 600; line-height: 1.35; }
.comms span{ font-size: var(--t-sm); color: var(--ink-3); }

/* ════════ 앱 화면 — 어두운 판, 원을 그리는 폰 ════════ */
.ring-sec{ position: relative; height: 420vh; background: var(--ink-tile); color: var(--on-dark); }
.ring-pin{ position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.ring-head{ width: min(1280px, 100%); margin-inline: auto; padding: clamp(104px, 13vh, 140px) var(--gutter) 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.ring-head .h2{ color: var(--on-dark); }
/* 이름표 — 돌아가는 폰들 위에 떠 있는 밝은 유리 알약. 폰 화면이 지나가며 가장자리에서 휘어 보인다 */
.ring-cap{
  position: absolute; z-index: 3; left: 50%; bottom: max(28px, 14vh); translate: -50% 0;   /* 앞 폰의 아래쪽에 걸쳐 — 화면이 유리 가장자리에서 휘어 보이게 */
  display: flex; align-items: baseline; gap: 14px; padding: 13px 24px; border-radius: var(--r-pill);
  font-size: var(--f-xl); font-weight: 600; letter-spacing: -.03em; white-space: nowrap; color: var(--ink);
  --lg-bezel: 14;
}
.ring-count{ font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ring-count b{ font-weight: 600; color: var(--ink); }
.ring-stage{ position: relative; flex: 1; perspective: 2000px; perspective-origin: 50% 35%; }
.ring{ position: absolute; left: 50%; top: 48%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.ring figure{ position: absolute; margin: 0; --w: clamp(150px, 14vw, 216px); left: calc(var(--w) / -2); top: calc(var(--w) * -1.035); transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; }
.ring .iphone{ --w: inherit; box-shadow: 0 40px 70px -24px rgba(0,0,0,.6); }

/* ════════ 브랜드 판 — 사진 위의 미션과 손에 든 폰 ════════ */
.brand-tile{ position: relative; overflow: hidden; padding-top: clamp(112px, 12vw, 168px); background: #ECE5DA; }
.brand-bg{ position: absolute; inset: 0; z-index: 0; }
.brand-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
/* 사진 위 글자를 읽히게 하는 막 — 장식이 아니라 가독성 */
.brand-tile::after{ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(245,241,234,.95) 0%, rgba(245,241,234,.82) 40%, rgba(245,241,234,0) 70%); }
.brand-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: end; gap: clamp(40px, 6vw, 96px); }
.brand-copy{ align-self: center; padding-bottom: clamp(104px, 12vw, 168px); }
.slogan-big{ font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.15; padding-bottom: .12em; color: var(--burgundy); letter-spacing: -.015em; }
.mv{ margin-top: clamp(40px, 5vw, 64px); display: grid; }
.mv > div{ padding-block: var(--s-5); border-top: 1px solid var(--line); }
.mv-k{ font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.mv h2, .mv h3{ margin-top: var(--s-2); font-size: clamp(21px, 2.1vw, 28px); font-weight: 600; line-height: 1.45; letter-spacing: -.035em; }
.mv p[lang="en"]{ margin-top: var(--s-3); font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); }
.hand{ position: relative; width: min(560px, 100%); margin: 0 auto -2px; aspect-ratio: 1200 / 1500; }
.hand-photo{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hand-screen{ position: absolute; z-index: 1; left: 32.4%; top: 12.9%; width: 36.9%; height: 65.3%; overflow: hidden; border-radius: 9% / 4%; background: #fff; }
.hand-screen video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hand-play{ position: absolute; z-index: 3; right: 4%; bottom: 9%; background: rgba(250,248,244,.86); }
.hand-play .i-play{ display: none; }
.hand-play.is-paused .i-play{ display: block; fill: var(--ink); stroke: none; }
.hand-play.is-paused .i-pause{ display: none; }

/* ════════ 앱 다운로드 ════════
   배지는 Apple · Google 공식 그림 그대로 — 높이만 맞추고(둘 다 같은 높이), 둘레에 배지 높이 1/4 이상 여백을 둔다.
   늘리거나 · 색을 바꾸거나 · 움직이지 않는다(각 스토어 배지 가이드라인) */
.stores{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; --badge-h: 48px; }
.store{ display: block; flex: none; border-radius: 9px; }
.store img{ display: block; height: var(--badge-h); width: auto; }
.store:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
html[data-os="android"] .stores .store--and{ order: -1; }    /* 안드로이드에서는 Google Play 를 먼저 */
.hero-cta .btn--ghost{ min-height: 48px; }
/* 폰 첫 화면에는 배지를 두지 않는다 — iOS 앱 배너 · 내비 「앱 다운로드」가 이미 스토어로 보내고, 배지 줄이 폰 목업 · 피기를 가린다(Danny 2026-10-07) */
@media (max-width: 960px){ .hero-cta .stores{ display: none; } }
.dl-film{ position: relative; margin: clamp(56px, 8vw, 112px) 0 0; border-radius: var(--r-lg); overflow: hidden; background: #141416; box-shadow: var(--product-shadow); aspect-ratio: 16 / 9; }
.dl-film video{ display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play{ position: absolute; right: 16px; bottom: 16px; z-index: 2; background: rgba(250,248,244,.86); }
.film-play .i-play{ display: none; }
.film-play.is-paused .i-play{ display: block; fill: var(--ink); stroke: none; }
.film-play.is-paused .i-pause{ display: none; }
.dl-row{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.dl-art{ text-align: left; scroll-margin-top: 110px; }
.dl-figgy{ width: min(240px, 50%); margin-bottom: var(--s-5); }
.dl-art .h2{ margin-top: var(--s-3); }
.dl-stores{ margin-top: var(--s-6); --badge-h: 54px; gap: 14px; }
.dl-req{ margin-top: var(--s-3); font-size: var(--t-xs); color: var(--ink-3); }
/* 컴퓨터로 온 사람 — 휴대폰 카메라로 찍으면 /download/ 가 그 폰의 스토어로 보낸다 */
.qr-card{ max-width: 380px; margin-inline: auto; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-lg); background: var(--card); box-shadow: 0 0 0 1px var(--line-2); text-align: center; }
.qr{ position: relative; width: 220px; margin: 0 auto; }
.qr > img:first-child{ display: block; width: 100%; height: auto; }
.qr-icon{ position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 13px; box-shadow: 0 0 0 6px var(--card); }
.qr-t{ margin-top: var(--s-5); font-size: var(--t-md); font-weight: 600; line-height: 1.5; }
.qr-s{ margin-top: var(--s-2); font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); word-break: keep-all; text-wrap: balance; }
html[data-os="ios"] .dl-qr, html[data-os="android"] .dl-qr{ display: none; }
@media (max-width: 760px){ .dl-qr{ display: none; } .stores{ --badge-h: 46px; } .dl-stores{ --badge-h: 50px; } }

/* ════════ 푸터 ════════ */
.foot{ border-top: 1px solid var(--line-2); padding-block: var(--s-8) var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-6); justify-content: space-between; font-size: var(--t-sm); color: var(--ink-3); }
.foot .brand img{ height: 26px; }
.foot-desc{ margin-top: var(--s-2); font-family: var(--serif); font-style: italic; color: var(--burgundy); }
.foot .links{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s-5); max-width: 30em; }
.foot .links a{ padding: var(--s-2) 0; display: inline-block; }
.biz{ margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-2); font-size: var(--t-xs); line-height: 1.85; color: var(--ink-3); }
.biz b{ color: var(--ink-2); font-weight: 600; }
.biz a{ display: inline-flex; align-items: center; min-height: 24px; text-decoration: underline; text-underline-offset: 3px; }
.ip-note{ margin-top: var(--s-3); }
.biz-last{ padding-bottom: var(--s-7); }

/* ════════ hover 는 마우스에서만 ════════ */
@media (hover: hover) and (pointer: fine){
  .nav-links a:not(.btn):hover{ color: var(--ink); }
  .btn:hover{ background: var(--burgundy-d); }
  .btn--ghost:hover{ background: rgba(23,24,28,.05); }
  .seg button:not([aria-selected="true"]):hover, .fx-toggle button:hover{ color: var(--ink); }
  .comms li:hover img{ transform: translateY(-6px) rotate(-4deg); }
  .round-btn:hover{ background: rgba(23,24,28,.05); }
  .foot .links a:hover{ color: var(--ink); }
  .hits:hover img{ transform: rotate(calc(var(--n) * 17deg)) translateY(calc(var(--a, 0) * 10px - 10px)); transition-delay: 0s; }
}

[data-off] *, [data-off] *::before, [data-off] *::after{ animation-play-state: paused !important; }

@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
  .tile{ overflow-x: hidden; }
}

/* ════════ 반응형 ════════ */
@media (max-width: 1100px){
  .comms{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px){
  .hero-copy{ top: clamp(88px, 13vh, 120px); translate: none; width: auto; right: var(--gutter); }
  .sc{ top: auto; bottom: max(28px, 5vh); translate: none; width: auto; right: var(--gutter); }
  .sc h2{ font-size: clamp(26px, 6.6vw, 40px); }
  .sc p:not(.sc-k){ margin-top: var(--s-3); font-size: var(--t-md); }
  .sc .sc-tags{ display: none; }
  .story-rail{ display: none; }
  .about-body, .spread, .hits-row, .lounge-head, .dl-row{ grid-template-columns: minmax(0,1fr); }
  .lounge-head .lede{ margin-top: var(--s-4); }
  .brand-tile::after{ background: linear-gradient(180deg, rgba(245,241,234,.95) 0%, rgba(245,241,234,.86) 50%, rgba(245,241,234,.25) 100%); }
  .brand-grid{ grid-template-columns: minmax(0,1fr); }
  .brand-copy{ padding-bottom: var(--s-6); }
  .hand{ width: min(420px, 100%); }
  .ring-head{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px){
  .nav{ top: 8px; width: calc(100% - 16px); height: 56px; padding: 0 6px 0 16px; }
  .ring-cap{ bottom: max(20px, 4vh); padding: 11px 20px; }
  .nav-links a:not(.btn){ display: none; }
  .brand .desc{ display: none; }
  .hero-cta .btn{ flex: 1 1 auto; }
  .comms{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
  .comms img{ width: 56px; height: 56px; }
  .triad > div{ grid-template-columns: minmax(0,1fr); gap: var(--s-1); }
  .flow-stage{ height: 500px; }
  .flow-item{ --w: 230px; }
  .fx-toggle{ width: 100px; }
  .foot{ flex-direction: column; }
  .foot .links{ display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 0 var(--s-6); }
  .ring figure{ --w: 150px; }
}

/* ════════ 감속 모드 — 움직임 대신 최종 장면 ════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .rv{ opacity: 1; transform: none; }
  .js .lines .ln > span{ transform: none; }
  .fill .w{ color: var(--ink); }
  .js .story:not(.c-in) .cam .iphone{ opacity: 1; translate: none; scale: none; }
  /* 원을 돌리지 않고 가로로 넘겨 본다 */
  .ring-sec{ height: auto; }
  .ring-pin{ position: relative; height: auto; padding-bottom: var(--s-8); }
  .ring-stage{ perspective: none; overflow-x: auto; }
  .ring{ position: static; width: auto; height: auto; display: flex; gap: var(--s-5); padding: var(--s-7) var(--gutter) 0; transform: none !important; }
  .ring figure{ position: static; transform: none !important; opacity: 1 !important; flex: none; }
  .ring-cap{ display: none; }   /* 돌지 않으니 「지금 앞의 화면」 이름표도 없다 */
}

/* ════════ 3D (phone3d.js) — 캔버스가 준비된 구간만 CSS 폰을 숨긴다 ════════ */
.gl-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.story-pin > .gl-canvas{ z-index: 2; }
.story-pin.gl .cam .iphone{ opacity: 0 !important; }
.ring-stage > .gl-canvas{ z-index: 0; }
.ring-stage.gl .ring{ visibility: hidden; }
.flow-stage > .gl-canvas{ z-index: 0; }
.flow-stage.gl .flow-item .iphone{ opacity: 0; }
.flow-stage.gl .flow-item{ z-index: 1; }

/* ════════ 설명 제목 — 한 글자씩 뒤집히며 솟는다 ════════ */
.sc{ transition: opacity .35s var(--ease-out), transform .5s var(--ease-out), filter .35s var(--ease-out); }
.sc h2{ perspective: 700px; }
.sc h2 .ch{
  display: inline-block; transform-origin: 50% 100%;
  opacity: 0; filter: blur(6px); transform: translate3d(0, .55em, 0) rotateX(-70deg) scale(.92);
  /* 넘치지 않는 강한 ease-out — 빨리 들어와 부드럽게 선다 */
  transition: transform .6s cubic-bezier(.23,1,.32,1), opacity .3s var(--ease-out), filter .4s var(--ease-out);
  transition-delay: calc(var(--ci) * 18ms);
}
.sc.on h2 .ch{ opacity: 1; filter: none; transform: none; }
.sc.was h2 .ch{ transform: translate3d(0, -.4em, 0) rotateX(50deg) scale(.95); transition-delay: calc(var(--ci) * 6ms); transition-duration: .25s; }
.sc-k{ display: inline-flex; align-items: center; gap: 10px; }
.sc-k::before{ content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out) .1s; }
.sc.on .sc-k::before{ transform: scaleX(1); }
.sc p:not(.sc-k){ opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out) .32s, transform .7s var(--ease-out) .32s; }
.sc.on p:not(.sc-k){ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .sc h2 .ch, .sc p:not(.sc-k){ opacity: 1; filter: none; transform: none; }
  .sc-k::before{ transform: none; }
}
/* 폰에서 설명 글 뒤 — 은하 점이 글자를 지나가지 않게 아래쪽만 어둡게 */
@media (max-width: 960px){
  .sc::before{ content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -56px; bottom: -40vh; background: linear-gradient(180deg, rgba(20,20,22,0), rgba(20,20,22,.88) 56px); }
}

/* ════════ 떠오르는 정보 카드 — 폰 옆에 앱 속 숫자가 겹쳐 뜬다(어두운 구간의 목업 + UI 카드 겹침) ════════ */
.story-chips{ position: absolute; inset: 0; z-index: 4; pointer-events: none; perspective: 900px; }
.chips{ position: absolute; inset: 0; }
/* 폰 화면에서 튀어나온다 — 왼쪽 카드는 오른쪽(폰)에서, 오른쪽 카드는 왼쪽(폰)에서 날아와 선다 */
.chip{
  position: absolute; display: flex; align-items: center; gap: 16px; padding: 18px 26px 18px 18px;
  border-radius: 22px; color: var(--on-dark);
  background: rgba(30,29,32,.74); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -24px rgba(0,0,0,.75);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  opacity: 0; filter: blur(6px);
  transform: translate3d(var(--fx, 90px), 14px, 0) scale(.82) rotate(var(--fr, -4deg));
  transition: transform .8s cubic-bezier(.23,1,.32,1), opacity .3s var(--ease-out), filter .45s var(--ease-out);
}
.chip:not(:has(> img, > .chip-fan, > .chip-stack)){ padding-left: 26px; }
.chip-t{ display: grid; gap: 4px; }
.chip small{ font-size: 14px; line-height: 1.3; color: var(--on-dark-2); letter-spacing: -.01em; }
.chip-v{ font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip .up{ color: #FF6B76; font-size: 18px; font-weight: 700; margin-left: 6px; letter-spacing: -.02em; }
.chip-v > .up:first-child{ margin-left: 0; font-size: 26px; }
.chip .tag{ vertical-align: .32em; margin-right: 4px; }
.chip--a{ left: 40%; top: 63%; }
.chip--b{ right: 4%; top: 15%; --fx: -90px; --fr: 4deg; transition-delay: .1s; }
.chips.on .chip{ opacity: 1; filter: none; transform: none; }
.chips.was .chip{ transform: translate3d(0, -30px, 0) scale(.94); transition-duration: .25s; transition-delay: 0s; }

/* 그림 — 3D 아이콘 · 카드 한 장 · 히트카드 부채 · 커뮤니티 아이콘 묶음 */
.chip-ic{ width: 60px; height: 60px; flex: none; transform: scale(.6) rotate(-12deg); transition: transform .7s cubic-bezier(.23,1,.32,1) .18s; }
.chips.on .chip-ic{ transform: none; }
.chip-card{ width: 50px; height: 70px; flex: none; border-radius: 4px; object-fit: cover; box-shadow: 0 8px 18px -6px rgba(0,0,0,.7); transform: rotate(-8deg) translateY(10px); transition: transform .7s cubic-bezier(.23,1,.32,1) .18s; }
.chips.on .chip-card{ transform: rotate(-4deg); }
.chip-fan{ position: relative; width: 92px; height: 72px; flex: none; }
.chip-fan img{ position: absolute; left: 21px; top: 1px; width: 50px; height: 70px; border-radius: 4px; object-fit: cover; box-shadow: 0 8px 18px -6px rgba(0,0,0,.75); transform-origin: 50% 110%; transition: transform .7s cubic-bezier(.23,1,.32,1) calc(.2s + (var(--k) + 1) * 60ms); }
.chip-fan img:nth-child(2){ z-index: 1; }
.chips.on .chip-fan img{ transform: translateX(calc(var(--k) * 20px)) rotate(calc(var(--k) * 15deg)); }
.chip-stack{ position: relative; width: 108px; height: 60px; flex: none; }
.chip-stack img{ position: absolute; left: 0; top: 0; width: 60px; height: 60px; transition: transform .7s cubic-bezier(.23,1,.32,1) calc(.18s + var(--k) * 70ms); }
.chips.on .chip-stack img{ transform: translateX(calc(var(--k) * 24px)); }
.chip-new{ display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--on-dark); color: var(--burgundy); font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.chip-bar{ display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.chip-bar::after{ content: ""; display: block; height: 100%; border-radius: inherit; background: #0FA968; transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.23,1,.32,1) .3s; }
.chips.on .chip-bar::after{ transform: scaleX(var(--p)); }
.chips:not(.on) .chip-bar::after{ transition: transform 0s .4s; }

/* 굴러가는 숫자 — 보이지 않는 진짜 숫자가 자리를 잡고, 그 위에서 띠가 10칸 넘게 굴러 선다 */
.dg{ position: relative; display: inline-block; clip-path: inset(0 -.1em); }
.dg-h{ visibility: hidden; }
.dg-c{ position: absolute; left: 0; top: 0; display: flex; flex-direction: column; transition: transform 0s .4s; }
.dg-c > span{ display: block; }
.chips.on .dg-c{ transform: translateY(calc((10 + var(--d)) * -5%)); transition: transform 1.25s cubic-bezier(.23,1,.32,1) calc(.22s + var(--di) * 45ms); }
@media (max-width: 960px){ .story-chips{ display: none; } }
@media (prefers-reduced-motion: reduce){ .chip{ filter: none; } }

/* 설명 제목 — 더 크고 촘촘하게 */
.sc h2{ font-size: clamp(40px, 4.8vw, 80px); line-height: 1.04; letter-spacing: -.04em; }
@media (max-width: 960px){ .sc h2{ font-size: clamp(28px, 7.4vw, 44px); } }
/* 어두운 판 위의 주 버튼 — 밝은 알약(가장 밝은 점이 행동이다) */
.nav[data-tone="dark"] .nav-links .btn{ background: var(--on-dark); color: var(--ink); }
/* 제목은 <br> 로 정한 두 줄 그대로 — 큰 글자에서 마지막 글자만 떨어지지 않게 */
@media (min-width: 961px){
  .sc{ width: min(640px, 45vw); }
  .sc h2{ white-space: nowrap; font-size: clamp(36px, 3.7vw, 64px); }
}
/* 앱과 같은 거래 칩 */
.tag{ display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.tag--sell{ color: #3B9AF3; background: #F2F0F9; }
.tag--hold{ color: #fff; background: #0FA968; }   /* 앱 라운지 거래 목록의 예약중 칩 */

/* 유리 재질 — 투명도 줄이기 · 대비 높이기 설정에서는 단단한 면으로 */
@media (prefers-reduced-transparency: reduce){
  .chip{ background: #232226; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lg{ background: var(--cream-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav[data-tone="dark"]{ background: #141416; }
}
@media (prefers-contrast: more){
  .lg{ background: var(--cream-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--ink); }
  .nav[data-tone="dark"]{ background: #111; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
  .chip{ background: #111; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
  .chip small{ color: var(--on-dark); }
}

/* ════════ 점검 후 수정 ════════ */
/* 1. 끝 장면 — 밝은 바탕으로 돌아온 뒤의 맺음말 */
.sc--end{ color: var(--ink); }
.sc--end .sc-k{ color: var(--burgundy); }
.sc--end p:not(.sc-k){ color: var(--ink-2); }
.sc--end .sc-cta{ margin-top: var(--s-6); }
.sc--end::before{ display: none; }
/* 2. 라운지 머리 — 왼쪽 큰 제목 + 오른쪽 작은 문단을 위아래로 */
.lounge-head{ display: block; }
.lounge-head .lede{ margin-top: var(--s-5); }
/* 3. 폰의 브랜드 판 — 글 뒤는 바탕색으로 덮고 사진은 아래쪽에만 */
@media (max-width: 960px){
  .brand-tile::after{ background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 52%, rgba(245,241,234,0) 74%); }
}

/* ════════ 앱 화면 — 오목한 원의 양끝을 어둡게(가운데 화면에 시선이 모인다) ════════ */
.ring-stage::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--ink-tile), rgba(20,20,22,0) 28%, rgba(20,20,22,0) 72%, var(--ink-tile)); opacity: .85; }
@media (max-width: 760px){ .ring-stage::after{ background: linear-gradient(90deg, var(--ink-tile), rgba(20,20,22,0) 14%, rgba(20,20,22,0) 86%, var(--ink-tile)); } }
@media (prefers-reduced-motion: reduce){ .ring-stage::after{ display: none; } }
.ring-stage.is-drag{ cursor: grabbing; }

/* ════════ 끌 수 있는 곳의 커서 — 「‹ DRAG ›」 유리 렌즈(마우스일 때만, app.js 13) ════════ */
.drag-cursor{
  position: fixed; left: 0; top: 0; z-index: 150; width: 92px; height: 92px; margin: -46px 0 0 -46px;
  display: none; align-items: center; justify-content: center; gap: 7px; border-radius: 50%;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--ink); pointer-events: none; opacity: 0;
  --lg-bezel: 24; --lg-refract: 46;
}
.drag-cursor span{ font-size: 17px; font-weight: 500; letter-spacing: 0; line-height: 1; }
.has-dragcursor .drag-cursor{ display: flex; }
.has-dragcursor [data-drag], .has-dragcursor [data-drag] *{ cursor: none; }

/* ════════ 자석 버튼 — 움직임은 GSAP 이 맡는다(transform 전환을 빼서 서로 다투지 않게) ════════ */
.btn.mag{ transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.btn.mag:active{ transform: none; }

/* ════════ 카드 띠 — 기울기 + 홀로그램 반사(app.js 15) ════════ */
.strip-row .tilt{ position: relative; display: block; flex: none; border-radius: clamp(6px, .6vw, 9px); will-change: transform; }
.strip-row .tilt img{ display: block; }
.strip-row .tilt.on{ z-index: 2; }
.tilt .holo{
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.65), rgba(255,255,255,0) 45%),
    linear-gradient(115deg, rgba(255,60,170,0) 20%, rgba(255,60,170,.42) 35%, rgba(60,220,255,.42) 50%, rgba(255,226,60,.42) 65%, rgba(255,226,60,0) 80%) var(--hx, 50%) 50% / 260% 100%;
  transition: opacity .3s var(--ease-out);
}
.tilt.on .holo{ opacity: .9; }