/* =========================================================
   abroo · landing styles
   Base width: 1758. 1px-perfect at desktop, fluid down to 320.
   Fonts: Plus Jakarta Sans (local), Gloria Hallelujah, Noto Sans JP
   ========================================================= */

@import url("/assets/tokens.css");

/* Metric-overridden Arial fallback — calibrated to Plus Jakarta Sans body
   metrics so the swap from fallback → real font doesn't shift line heights or
   cause CLS on large titles. Values approximated from Plus Jakarta's UPM. */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   Tokens (1:1 with Figma variables)
   ========================================================= */
:root {
  /* Colors */
  --c-black: #0a0a0a;
  --c-white: #ffffff;
  --c-white-45: rgba(255, 255, 255, 0.45);
  --c-white-50: rgba(255, 255, 255, 0.5);
  --c-white-55: rgba(255, 255, 255, 0.55);
  --c-white-72: rgba(255, 255, 255, 0.72);
  --c-white-0: rgba(255, 255, 255, 0);
  --c-gray-0: #f9f9f9;
  --c-gray-1: #f2f2f2;
  --c-gray-2: #ededed;
  --c-gray-3: #e4e4e4;
  --c-gray-4: #cbcbcb;
  --c-gray-5: #808080;
  --c-gray-6: #686868;
  --c-gray-7: #494949;
  /* Black alpha tints — used for shadows, overlays, scrim, and inset hairlines.
     Keep all rgba(10,10,10,X) usage funneled through these tokens. */
  --c-black-04: rgba(10, 10, 10, 0.04);
  --c-black-06: rgba(10, 10, 10, 0.06);
  --c-black-08: rgba(10, 10, 10, 0.08);
  --c-black-10: rgba(10, 10, 10, 0.10);
  --c-black-16: rgba(10, 10, 10, 0.16);
  --c-black-18: rgba(10, 10, 10, 0.18);
  --c-black-50: rgba(10, 10, 10, 0.5);
  /* Backdrop blur amount used by .nav frosted glass effect (and any future frosted surface) */
  --blur-nav: 18px;
  --c-red: #ff4040;
  --c-red-sub: #ffeaea;
  --c-blue: #008cff;
  --c-blue-sub: #e3f2ff;
  --c-blue-deep: #0066c2;       /* AA-compliant text on --c-blue-sub */
  --c-green: #30CE00;
  --c-green-sub: #EDFBE9;
  --c-orange: #FEA500;
  --c-orange-sub: #FFF5E3;

  /* Semantic color aliases */
  --bg:            var(--c-white);    /* page background (다크 모드에서 override) */
  --ink:           var(--c-black);    /* primary text */
  --ink-2:         var(--c-gray-6);   /* secondary text */
  --ink-3:         var(--c-gray-5);   /* tertiary / meta */
  --ink-4:         var(--c-gray-4);   /* placeholder / disabled */
  --hover-bg:      var(--c-gray-0);   /* hover surface */
  --active-bg:     var(--c-gray-2);   /* active / pressed surface */
  --surface-sunken: var(--c-gray-0);  /* recessed background */
  --hairline:      var(--c-gray-2);   /* dividers */
  --hairline-2:    var(--c-gray-3);   /* control borders */

  /* Spacing */
  /* --pad-* = inner spacing (padding). --gap-* = layout spacing (gap, margin). Same values, different intent. */
  --pad-2: 2px;
  --pad-4: 4px;
  --pad-6: 6px;
  --pad-8: 8px;
  --pad-10: 10px;
  --pad-12: 12px;
  --pad-16: 16px;
  --pad-18: 18px;
  --pad-22: 22px;
  --pad-24: 24px;
  --pad-28: 28px;
  --pad-36: 36px;
  --pad-48: 48px;
  --pad-64: 64px;

  /* Mobile horizontal gutter — use on body/main containers below the mobile breakpoint. */
  --pad-mobile-gutter: 18px;

  /* Form/control height — single-line input and button.
     --form-h-lg = 44 (default), --form-h-md = 40 (compact: chip, secondary, sm). */
  --form-h-lg: var(--ctl-xl);
  --form-h-md: var(--ctl-lg);

  /* Informational / code text (Pretendard Variable preferred). */
  --ff-info: "Pretendard Variable", "Pretendard", -apple-system, system-ui, sans-serif;

  /* z-index layer system (0/1/2 are local stacking — kept raw) */
  --z-popover: 50;
  --z-nav: 100;
  --z-tooltip: 110;
  --z-modal: 200;
  --z-snackbar: 1000;
  --z-loader: 9999;

  /* Icon size scale */
  --icon-xs: 10px;
  --icon-sm: 12px;
  --icon-md: 14px;
  --icon-lg: 16px;

  /* Control height scale (button/input) — --form-h-lg/md 와 합쳐서 6단계 */
  --ctl-xs: 18px;   /* card check */
  --ctl-sm: 24px;   /* modal close */
  --ctl-md: 30px;   /* icon button */
  --ctl-lg: 40px;   /* primary buttons (= --form-h-md) */
  --ctl-xl: 44px;   /* primary input/CTA (= --form-h-lg, WCAG 2.5.5) */
  --ctl-2xl: 48px;  /* mobile primary CTA, auth input */

  /* Font size scale */
  --fs-2xs: 9px;
  --fs-xs:  10px;
  --fs-sm:  11px;
  --fs-md:  12px;
  --fs-base:13px;
  --fs-lg:  14px;
  --fs-xl:  16px;
  --fs-2xl: 18px;
  --fs-3xl: 22px;
  --fs-4xl: 24px;

  /* Font weight scale */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line-height scale */
  --lh-flat: 1.1;
  --lh-ctl: 22px;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.45;
  --lh-relaxed: 1.5;

  /* Letter-spacing (tracking) scale */
  --tracking-title: -0.02em;
  --tracking-soft: -0.005em;
  --tracking-snug: -0.01em;
  --tracking-tight: -0.03em;
  --tracking-hard: -0.04em;
  --tracking-mono: 0.02em;
  --tracking-mono-wide: 0.04em;
  --tracking-mono-caps: 0.06em;

  /* Paragraph spacing */
  --paragraph-gap: 0.25em;

  /* Dialog tokens */
  --dialog-padding-x: var(--pad-22);
  --dialog-padding-y: var(--pad-22);
  --dialog-padding-bottom-btn: var(--pad-22);
  --dialog-radius: var(--r-18);
  --dialog-close-size: var(--ctl-sm);
  --dialog-close-icon: var(--icon-md);
  --dialog-close-offset: calc((var(--dialog-close-size) - var(--dialog-close-icon)) / 2);
  --dialog-input-h: var(--ctl-2xl);
  --btn-padding-x: 14px;
  --dialog-btn-h: var(--ctl-xl);
  --dialog-btn-gap: var(--gap-12);
  --dialog-gap: var(--pad-24);
  --dialog-head-gap: var(--gap-6);
  --dialog-title-size: var(--fs-3xl);

  /* Blur / backdrop / modal tokens */
  --blur-edge: 4px;
  --blur-modal: 6px;
  --blur-frost: 8px;

  --c-black-03: rgba(10,10,10,0.03);
  --c-black-12: rgba(10,10,10,0.12);
  --c-white-12: rgba(255,255,255,0.12);
  --c-white-20: rgba(255,255,255,0.20);
  --c-white-85: rgba(255,255,255,0.85);

  /* Backdrop — semantic. RULE: dark=blur 없음 (격리), light=blur 6 (작업감). */
  /* Backdrop — 단일 scrim. #0a0a0a 0.5, 라이트·다크 동일. blur는 표면별 모디파이어. */
  --backdrop: rgba(10,10,10,0.5);

  --modal-w-sm: 360px;
  --modal-w-md: 440px;
  --modal-w-lg: 480px;
  --modal-w-xl: 1016px;
  --sh-modal: 0 4px 14px var(--c-black-04), 0 24px 60px var(--c-black-08);

  /* ── Hover interaction rule ──
     ::before 오퍼시티 레이어. 요소 위에 반투명 막.
     opacity transition → 부드럽게. 색 안 바꿈 → 대비 보존.
     라이트: 0A0A0A 4% / 다크: FFFFFF 8% (tokens.css 뒤집기). */
  --hover-color: rgba(10,10,10,0.04);
  --hover-color-inv: rgba(255,255,255,0.15);

  --hover-opacity: 0.92;
  --hover-opacity-text: 0.7;
  --dim-opacity: 0.3;

  --gap-2: 2px;
  --gap-4: 4px;
  --gap-6: 6px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-18: 18px;
  --gap-24: 24px;
  --gap-32: 32px;
  --gap-36: 36px;
  --gap-40: 40px;
  --gap-48: 48px;
  --gap-60: 60px;

  /* Radius — canonical Figma: 12/18/36/full. Extras (4/6/8) are utility-only
     for badges, icon-buttons, focus rings — not first-class brand radii. */
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-12: 12px;
  --r-18: 18px;
  --r-36: 36px;
  --r-full: 1000px;

  /* Shadows — direct from Figma effects.
     `shadow_1` (#0a0a0a 0x0A ≈ 4%, offset 0/10, blur 24) — pill nav, modal */
  --sh-soft:  0 10px 24px var(--c-black-04);
  /* `shadow_2` (#0a0a0a 0x14 ≈ 8%, offset 0/10, blur 24) — popover, snackbar */
  --sh-soft2: 0 10px 24px var(--c-black-08);
  /* Figma `drop_shadow` for product cards (offset 0/10, blur 12, 4% — tighter) */
  --sh-card:  0 10px 12px var(--c-black-04);
  /* Hover lift — slightly bigger offset/blur for elevation cue */
  /* Hero outer shadow — large soft drop for "frame" feel */
  --sh-hero: 0 30px 60px var(--c-black-06), inset 0 0 0 1px var(--c-black-04);
  /* Hairline borders (inset 1px lines that read as borders without adding box dimensions) */
  --sh-hairline:        inset 0 0 0 1px var(--c-gray-3);
  --sh-hairline-soft:   inset 0 0 0 1px var(--c-gray-2);
  --sh-hairline-strong: inset 0 0 0 1px var(--c-black);
  /* Focus ring — 2px white halo + 2px black ring; high contrast against any bg */
  --sh-focus-ring: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-black);

  /* Layout */
  --content-w: 996px;
  --narrow-w: 505px;
  --hero-pad: 20px;
  /* Viewport-aware vertical padding — short laptops get less air, tall desktops keep 120 */
  --section-py: clamp(72px, 12vh, 120px);

  /* Typography (font-stack) */
  --ff-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback",
    "Pretendard Variable", "Pretendard",
    system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-eyebrow: "Gloria Hallelujah", "Plus Jakarta Sans", cursive;
  --ff-ja: "Noto Sans JP", "Plus Jakarta Sans", sans-serif;

  /* Easing / motion — Framer signature curves.
     abroo only ships --ease-out and --ease-out-sm. Bouncy / overshoot easings are
     intentionally absent: hovers are opacity dim, presses are scale 0.98, period. */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-sm:  cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast:     220ms;
  --dur-base:     320ms;
  --dur-slow:     520ms;
  --dur-press:     80ms;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  color: var(--ink);
  /* Figma landing root = solid white. Page-specific overrides set their own bg. */
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern";
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  overflow-x: clip;
  min-height: 100dvh;
}
img, svg { display: block; max-width: 100%; }
/* Hash-anchor offset: keep section heads clear of the fixed nav */
[id] { scroll-margin-top: 88px; }
@media (max-width: 768px) { [id] { scroll-margin-top: 64px; } }
button, a { color: inherit; }
a { text-decoration: none; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
ol, ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }


::selection { background: var(--c-black); color: var(--c-white); }
body[data-theme="dark"] ::selection { background: var(--c-white); color: var(--c-black); }
/* Backdrop dim — 다크는 더 눌러야 분리됨(검정 위 검정 방지). plan과 동일 규칙(라이트 0.5 / 다크 0.6). */
body[data-theme="dark"] { --backdrop: rgba(0,0,0,0.6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* (removed) This universal *:not(.flipping) rule forced box-shadow/filter/color
     transitions onto EVERY element whenever Reduce Motion was on, running them on
     the main thread → every interaction juddered like a low-framerate film. blank.page
     has no such rule, which is why it stayed smooth with Reduce Motion on. Removed so
     Reduce Motion falls back to each element's own (compositor opacity/transform)
     transitions — smooth — while keyframe animations above are still reduced. */
}

/* ── Hover overlay system (::before) ── */
.btn--white, .btn--black, .btn--black--sm, .btn--black--xs,
.btn--outline, .btn--secondary, .btn--danger, .btn--icon,
.chip { position: relative; }
.btn--white::before, .btn--black::before, .btn--black--sm::before, .btn--black--xs::before,
.btn--outline::before, .btn--secondary::before, .btn--danger::before, .btn--icon::before,
.chip::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--hover-color); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.btn--black::before, .btn--black--sm::before, .btn--black--xs::before,
.btn--icon::before, .chip--active::before {
  background: var(--hover-color-inv);
}
@media (hover: hover) and (pointer: fine) {
  .btn--white:hover::before, .btn--black:hover::before,
  .btn--black--sm:hover::before, .btn--black--xs:hover::before, .btn--outline:hover::before, .btn--secondary:hover::before,
  .btn--danger:hover::before, .btn--icon:hover::before,
  .chip:hover::before { opacity: 1; }
}

html { scroll-behavior: smooth; }

/* =========================================================
   Page shell
   ========================================================= */
.page {
  width: 100%;
  /* No max-width — hero frame keeps equal --hero-pad on all four sides.
     Section content centers internally via .section__inner (--content-w). */
  margin: 0;
  position: relative;
}

.page__body {
  display: flex;
  flex-direction: column;
  /* triple.guide-style — hero stays sticky underneath; body sheet rises
     over it as user scrolls. NO negative margin so the initial state
     preserves the 4-side white "액자" frame around hero. */
  position: relative;
  z-index: 1;
  background: var(--c-white);
  border-top-left-radius: 28px; /* page-body unique — between r-18 and r-36 */
  border-top-right-radius: 28px;
  box-shadow: 0 -16px 48px var(--c-black-08);
}

/* =========================================================
   2026-05-30 (rev3) — 홈 전용 Lenis 관성 스크롤 (Framer 스타일)
   index.html 인라인 스크립트가 Lenis(관성 lerp)를 켜고, 방향을 감지해
   Lenis.scrollTo로 [히어로]↔[푸터]를 *부드럽게* 미끄러뜨림.
   rev2의 CSS scroll-snap(딱 끊김)은 폐기. .lenis 클래스는 Lenis가 자동 부여.
   apps 등 다른 페이지엔 Lenis 미적용이라 무영향.
   ========================================================= */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.section {
  width: 100%;
  padding: var(--section-py) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Closing quote needs generous breathing room before the footer. */
.section--close { padding-bottom: clamp(220px, 32vh, 360px); }
.section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-60);
  width: var(--content-w);
  /* 64px gutter cap (32 each side) — matches .subpage__content for cross-page parity */
  max-width: calc(100% - 64px);
}
/* (narrow modifier removed — each component manages its own width:
   .section-head = 505, .steps = 636, .quote = 505) */

/* Section head (eyebrow + title + lede) */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-18);
  align-items: center;
  text-align: center;
  width: var(--narrow-w);
  max-width: 100%;
  color: var(--ink);
  word-break: keep-all;
}
.eyebrow {
  font-family: var(--ff-eyebrow);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 24px;
  letter-spacing: var(--tracking-snug);
}
.section-head__title {
  font-family: var(--ff-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-7xl);
  line-height: 1.25;       /* Figma metadata: title height = 50px (= 40 * 1.25) */
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
}
/* Lede/tagline text base — shared 18px medium */
.section-head__lede,
.app-card__price,
.subpage__intro p,
.wish-grid__intro p,
.acct-intro p,
.principle-section__head p,
.principle-item__body,
.error-page__inner > p,
.app-detail__tagline,
.detail-section__body,
.pricing-note {
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-hard);
}

.section-head__lede { color: var(--ink); }

/* =========================================================
   Section 1 · Hero
   ========================================================= */
.hero {
  /* 2026-05-30: sticky(본문 시트가 덮으며 올라오는 효과) 제거 → 평범한 페이지 스크롤.
     히어로는 그냥 위로 스크롤되어 사라지고 그 아래 푸터가 따라 올라옴. */
  position: relative;
  z-index: 0;
  /* Safe-area padding — prevents hero from sitting under the notch on iOS. */
  padding-top: max(var(--hero-pad), env(safe-area-inset-top, 0px));
  padding-right: max(var(--hero-pad), env(safe-area-inset-right, 0px));
  padding-bottom: max(var(--hero-pad), env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--hero-pad), env(safe-area-inset-left, 0px));
  width: 100%;
}
.hero__image {
  position: relative;
  width: 100%;
  /* Always fill ~viewport height minus the surrounding frame, but stay within
     sensible bounds so the rectangle never looks cramped or oversized. */
  height: calc(100dvh - calc(var(--hero-pad) * 2));
  min-height: 560px;
  max-height: 1080px;
  border-radius: var(--r-36);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 120px;
  /* 2026-05-30: 액자 아래쪽 회색 = --sh-hero 드롭섀도(0 30px 60px). 제거하고
     이미지 가장자리만 얇게 — 흰 프레임에 회색 그라데이션이 안 깔리게. */
  box-shadow: var(--sh-hairline-soft);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  /* Slow zoom-out on entry (1.1 -> 1) for depth feel.
     reduce-motion exempt — subtle enough not to cause discomfort. */
  animation: hero-zoom-out 2400ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
@keyframes hero-zoom-out {
  from { transform: scale(1.1) translateZ(0); }
  to   { transform: scale(1) translateZ(0); }
}
/* reduce-motion 켜져 있어도 hero 줌은 항상 동작 (text-rise 패턴과 동일) */
@media (prefers-reduced-motion: reduce) {
  .hero__bg {
    animation-duration: 2400ms !important;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
}
.hero__image > picture { position: absolute; inset: 0; z-index: 0; }
.hero__image > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor bottom slightly more visible so clouds always show — "액자" framing */
  object-position: center 60%;
}

/* Hero content */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-48);
  width: 431px;
  max-width: calc(100% - 64px);
}
/* Figma frame stack (Landing 364:147 / 354:74):
     64×64 at (left 12, top 0)   — back, frosted-glass (50% white + blur baked into SVG)
     76×76 at (left 6,  top 10)  — mid, frosted-glass
     88×88 at (left 0,  top 20)  — front, opaque white with dark triangle
   All three centered horizontally on x=44; behind frames peek above by 20/10px. */
.hero__frames {
  position: relative;
  width: 88px;
  height: 108px;
}
.hero__frame {
  position: absolute;
  display: block;
}
.hero__frame--back2 {
  left: 12px; top: 0; width: 64px; height: 64px;
  z-index: 0; border-radius: 14px;
  /* SVG is transparent — tint + blur come from CSS so frost is actually visible */
  background: var(--c-white-45);
  -webkit-backdrop-filter: saturate(140%) blur(var(--blur-frost));
  backdrop-filter: saturate(140%) blur(var(--blur-frost));
}
.hero__frame--back1 {
  left: 6px; top: 10px; width: 76px; height: 76px;
  z-index: 1; border-radius: 16px;
  background: var(--c-white-55);
  -webkit-backdrop-filter: saturate(140%) blur(var(--blur-frost));
  backdrop-filter: saturate(140%) blur(var(--blur-frost));
}
.hero__frame--front {
  left: 0; top: 20px; width: 88px; height: 88px;
  z-index: 2;
  filter: drop-shadow(0 8px 16px var(--c-black-08));
}

/* ─── Page loader overlay (covers entire viewport until fonts + images load) ─── */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 360ms var(--ease-out);
}
.page-loader__mark {
  width: 48px;
  height: 48px;
  animation: loader-bounce 1.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  will-change: transform;
}
/* Subtle bounce — pops up 4px then settles. No rotation. */
@keyframes loader-bounce {
  0%, 100% { transform: translate3d(0, 0, 0); }
  40%, 60% { transform: translate3d(0, -4px, 0); }
}
body.is-loaded .page-loader {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 360ms var(--ease-out), visibility 0s linear 360ms;
}
@media (prefers-reduced-motion: reduce) {
  .page-loader__mark { animation: none; }
}
/* Pause hero text rise while loader is up so the entrance plays AFTER fade-out. */
body:not(.is-loaded) .hero__title-line,
body:not(.is-loaded) .hero__subtitle,
body:not(.is-loaded) .hero__main .btn--white {
  animation-play-state: paused;
}

/* First-paint hero text rise — Framer-style. Each line rises 16px from below
   with Out Quart easing, staggered so the eye reads top→bottom in sequence.
   Applies only to hero TEXT (not the image/frames). Plays once on load. */
@keyframes hero-text-rise {
  from { opacity: 0; transform: translate3d(0, 13px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hero__title-line,
.hero__subtitle,
.hero__main .btn--white {
  animation: hero-text-rise 820ms var(--ease-out) both;
}
.hero__title-line:nth-of-type(1) { animation-delay: 180ms; }
.hero__title-line:nth-of-type(2) { animation-delay: 290ms; }
.hero__subtitle               { animation-delay: 400ms; }
.hero__main .btn--white        { animation-delay: 510ms; }
/* Hero text rise stays exempt from the global reduce-motion kill (16px / fade
   is subtle enough to read as "appearance", not "motion"). The global rule at
   styles.css:171 forces animation-duration to 0.001ms — we override here so the
   first-paint sequence still plays. */
@media (prefers-reduced-motion: reduce) {
  .hero__title-line,
  .hero__subtitle,
  .hero__main .btn--white {
    animation-duration: 820ms !important;
  }
}

.hero__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-36);
  width: 100%;
}
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
  font-weight: var(--fw-bold);
  /* 2026-05-31: 메인 히어로 제목 한 단계 ↓ — 64 → 56px (반응형 1단계값과 정합) */
  font-size: 56px;
  line-height: var(--ctl-xl);
  letter-spacing: var(--tracking-hard);
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
  margin: 0;
}
.hero__title-line { display: block; }
.hero__title-line--muted { color: var(--c-white-50); }

.hero__subtitle--ja {
  font-family: var(--ff-ja);
  font-weight: var(--fw-medium);
  /* 2026-05-31: 히어로 서브문구 한 단계 ↓ — fs-2xl(18) → fs-xl(16) */
  font-size: var(--fs-xl);
  line-height: 1.4;
  letter-spacing: var(--tracking-snug);
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
}

/* =========================================================
   Nav (fixed, follows scroll)
   ========================================================= */
.nav {
  position: fixed;
  /* Safe-area offset so nav clears the notch on iOS. */
  top: calc(env(safe-area-inset-top, 0px) + 36px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-36);
  /* Binary scrolled state. The old scroll-progress blur changed backdrop-filter
     every scroll frame, which is expensive on image-heavy pages. */
  background: var(--c-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: var(--r-12);
  /* 1px outline via inset shadow (preserves the nav's content-box dimensions —
     a real `border` would add 2px to width and height). Composed with the
     scroll-driven outer drop-shadow. */
  box-shadow: inset 0 0 0 1px var(--c-gray-1),
              0 10px 24px rgba(10, 10, 10, 0);
  padding: var(--pad-12) var(--pad-18);
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    backdrop-filter var(--dur-fast) var(--ease-out),
    -webkit-backdrop-filter var(--dur-fast) var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(var(--blur-nav));
  backdrop-filter: saturate(140%) blur(var(--blur-nav));
  box-shadow: inset 0 0 0 1px var(--c-gray-1),
              0 10px 24px var(--c-black-04);
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.nav__logo img { width: 24px; height: auto; }
.nav__links {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-24);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--pad-8);
  color: var(--ink);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { opacity: 0.5; }
}
@media (hover: none) {
  .nav__link:active { opacity: 0.5; }
}
.nav__link--active {
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--pad-16);
  z-index: var(--z-loader);
  background: var(--ink);
  color: var(--bg);
  padding: var(--pad-8) var(--pad-16);
  border-radius: var(--r-8);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: var(--pad-16);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  border-radius: var(--r-12);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
/* Plus Jakarta sits a hair low; nudge centered button labels up 0.5px so the
   optical center matches the chip / pill geometric center. Applied uniformly
   across all button variants to keep alignment identical. */
/* Visual centering — context-sensitive lift. line-height:1 collapses the
   span's line-box to font-size. translateY value compensates for Plus
   Jakarta Sans's baseline asymmetry, but the right value depends on
   whether the button label uses caps (Title Case) or all-lowercase:
     - all-lowercase ("save"):    ink mid ~2.2px below CSS center → -2px
     - Title Case   ("Send code"): caps push ink mid up → only -1px needed
   Brand buttons use Title Case per the rest of the brand voice → -1px. */
/* Plus Jakarta baseline compensation — uniform -0.75px across all button variants. */
.btn > span,
.btn--white > span,
.btn--black > span,
.btn--outline > span,
.btn--black--sm > span,
.btn--black--xs > span,
.btn--secondary > span,
.btn--danger > span,
.btn--ghost > span { display: inline-block; line-height: 1; transform: translateY(-0.75px); }

/* Loading state — apply .is-loading or [aria-busy="true"] on any button variant.
   Label hidden via color: transparent; spinner is SVG mask with rounded linecap. */
.btn.is-loading,
.btn--white.is-loading,
.btn--black.is-loading,
.btn--black--sm.is-loading,
.btn--black--xs.is-loading,
.btn--outline.is-loading,
.btn--secondary.is-loading,
.btn--danger.is-loading,
[class^="btn--"][aria-busy="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
[class^="btn--"][aria-busy="true"] > *,
.is-loading > * { visibility: hidden; }
[class^="btn--"][aria-busy="true"]::after,
.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  background-color: var(--c-white);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-dasharray='28 60'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-dasharray='28 60'/></svg>") center / contain no-repeat;
  animation: btn-spin 0.7s linear infinite;
  visibility: visible;
}
/* Light backgrounds → dark spinner */
.btn--white.is-loading::after,
.btn--outline.is-loading::after,
.btn--secondary.is-loading::after,
.btn--white[aria-busy="true"]::after,
.btn--outline[aria-busy="true"]::after,
.btn--secondary[aria-busy="true"]::after { background-color: var(--c-black); }
.btn--danger.is-loading::after,
.btn--danger[aria-busy="true"]::after { background-color: var(--c-red); }

@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .is-loading::after, [aria-busy="true"]::after { animation-duration: 1.4s; }
}

/* Button base — shared by all standalone btn-- variants.
   Each variant only declares its own color/height/padding/shadow. */
.btn--white,
.btn--black,
.btn--outline,
.btn--black--sm,
.btn--black--xs,
.btn--secondary,
.btn--danger,
.btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  border-radius: var(--r-12);
  border: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn--white {
  background: var(--c-white);
  color: var(--c-black);
  height: var(--ctl-xl);
  padding: 0 var(--btn-padding-x);
  gap: var(--gap-8);
  box-shadow: var(--sh-soft);
}

.btn--black {
  background: var(--c-black);
  color: var(--c-white);
  height: var(--ctl-xl);
  padding: 0 var(--btn-padding-x);
  gap: var(--gap-8);
}

/* =========================================================
   Section 2 · Three steps
   ========================================================= */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  align-items: center;
  width: 636px;
  max-width: 100%;
}
.step-card {
  width: 100%;
  background: var(--c-white);
  /* Figma height excludes border — use inset box-shadow so 1px line doesn't add to box height */
  box-shadow: var(--sh-hairline);
  border-radius: var(--r-18);
  padding: var(--pad-28);
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.step-card__num,
.rule__num {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-3);
}
/* Section title base — shared 22px semibold */
.step-card__title,
.why-card__title,
.rule__title,
.legal-section h2,
.signin__welcome,
.pricing-plan__title-row,
.app-preview__title,
.checkout__heading h2,
.acct-card__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: 28px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
/* Body text base — shared 16px medium */
.step-card__body,
.why-card__body,
.rule__body,
.pricing-plan__sub,
.checkout__heading p,
.order-summary__total dt,
.signin-methods__status {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
}

.step-card__body {
  color: var(--ink-3);
}

/* =========================================================
   Section 3 · Why abroo (2 cards)
   ========================================================= */
.why-grid {
  display: flex;
  gap: var(--gap-24);
  width: 100%;
  align-items: stretch;
}
.why-card {
  flex: 1 1 0;
  width: 486px;
  max-width: 100%;
  /* Figma height excludes border — inset shadow */
  box-shadow: var(--sh-hairline);
  border-radius: var(--r-36);
  padding: var(--pad-28);
  display: flex;
  flex-direction: column;
  gap: var(--gap-40);
}
.why-card__top {
  display: flex;
  flex-direction: column;
  gap: var(--gap-32);
  width: 100%;
}
.why-card--pos { background: var(--c-white); }
.why-card--neg { background: var(--c-gray-1); }
.why-card--neg .why-card__title { color: var(--ink-2); }
.why-card--neg .check-list li { color: var(--ink-2); }

.badge {
  font-family: var(--ff-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-6) var(--pad-12);
  border-radius: var(--r-8);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  align-self: flex-start;
}
/* A13 universal Jakarta lift — apply -0.75px to badge label */
.badge > span { display: inline-block; line-height: 1; transform: translateY(-0.75px); }
.badge--light { background: var(--c-gray-1); color: var(--c-gray-7); }
.badge--dim   { background: var(--c-gray-3); color: var(--ink-2); }
.badge--solid { background: var(--ink); color: var(--c-white); }

.why-card__heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
/* .why-card__title — base in grouped selector above */
.why-card__body {
  color: var(--ink-3);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.check-list li {
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.check-list li img {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: 0 0 auto;
}
.check-list--dim li { color: var(--ink-2); }
.check-list--dim li img { filter: opacity(0.6); }

/* =========================================================
   Section 4 · Five rules — scroll-pinned (sticky)
   The outer .section--rules is tall (5x viewport); inner content stays
   pinned and active-rule changes as user scrolls past.
   ========================================================= */
.section--rules {
  /* Internal sticky handles vertical rhythm; no outer py here. */
  padding: 0;
}
.section--rules__pin {
  position: relative;
  /* Total 200vh — sticky travel = 100vh, so 5 rules ÷ 20vh each
     (~180px per rule on 900vh; ~1–2 wheel notches). Snappy advance. */
  height: 200vh;
  width: 100%;
}
.section--rules__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-60);
  padding: 80px 0;
  box-sizing: border-box;
}
/* Mobile: rules content overflows 100vh; disable the pin and let it flow normally. */
@media (max-width: 900px) {
  .section--rules__pin { height: auto; }
  .section--rules__sticky {
    position: static;
    height: auto;
    padding: var(--section-py) 0;
  }
}
.rules {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-24);
  width: 100%;
}
.rules__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
  width: 275px;
  /* Single-rule viewport — JS translates the list as user scrolls so each
     rule slides up into view one at a time. */
  height: 140px;
  overflow: hidden;
  will-change: transform;
  transition: transform var(--dur-slow) var(--ease-out);
}
.rule {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  width: 100%;
  /* No per-rule opacity — only the visible one is in the window anyway */
}
.rule__title {
  white-space: nowrap;
}
.rule__body {
  color: var(--ink-3);
}
.rules__visual {
  flex: 0 0 auto;
  width: 644px;
  height: 548px;
  background: var(--c-white);
  box-shadow: var(--sh-hairline);
  border-radius: var(--r-36);
}

/* =========================================================
   Section 5 · App cards
   ========================================================= */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-36) var(--gap-24);
  width: 100%;
}

.app-card {
  height: 352px;
  background: var(--c-white);
  border-radius: var(--r-36);
  padding: var(--pad-24);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--sh-card);
}
/* app-card 자체는 클릭 대상 아님 (View 버튼만 인터랙티브) → 호버 없음. */
/* No :active scale on the card — clicking the View button bubbles to .app-card and
   would shrink the whole tile. Card is a container, not a button. */
.app-card__top { display: flex; flex-direction: column; gap: var(--gap-24); width: 100%; }
.app-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.app-card__icon { width: 72px; height: 72px; flex: 0 0 auto; }
.app-card__info { display: flex; flex-direction: column; gap: var(--gap-8); width: 100%; }
.app-card__name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: 28px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-card__desc {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.app-card__bottom { display: flex; flex-direction: column; gap: var(--gap-24); width: 100%; }
.app-card__sep {
  height: 1px;
  border-radius: var(--r-full);
  background: var(--hairline);
  width: 100%;
}
.app-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.app-card__price {
  color: var(--ink);
  white-space: nowrap;
}

/* =========================================================
   Section 6 · Closing quote
   ========================================================= */
.quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
  text-align: center;
  width: var(--narrow-w);
  max-width: 100%;
}
.quote__mark { width: 42.6px; height: 34.32px; }
.quote__body {
  font-family: var(--ff-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-7xl);
  line-height: 1.25;
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
  word-break: keep-all;
}
.quote__body p { margin: 0; line-height: 1.25; }
.quote__attribution {
  font-family: var(--ff-eyebrow);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 24px;
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  white-space: nowrap;
}

/* =========================================================
   Reveal animations (used by main.js IntersectionObserver)
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  /* Subtle rise-from-below. Opacity + small Y, no blur. */
  transition:
    opacity 560ms var(--ease-out),
    transform 560ms var(--ease-out);
}
/* Cards auto-tagged via JS get an even subtler rise */
[data-reveal="auto"] {
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 480ms var(--ease-out),
    transform 480ms var(--ease-out);
}
[data-reveal="auto"].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  /* filter:none, not blur(0): the reveal animates only opacity+transform (no
     blur), so blur(0) just leaves a permanent 0-radius filter context on every
     revealed section/card — compositing cost for zero visual difference. */
  filter: none;
}
.hero[data-reveal] { transition-delay: 60ms; }

/* Subtle stagger when many cards are inside a [data-reveal] section */
[data-reveal] .step-card,
[data-reveal] .app-card,
[data-reveal] .why-card,
[data-reveal] .rule {
  transform: translate3d(0, 8px, 0);
  opacity: 0;
  transition:
    opacity 520ms var(--ease-out),
    transform 520ms var(--ease-out);
}
[data-reveal].is-visible .step-card,
[data-reveal].is-visible .app-card,
[data-reveal].is-visible .why-card,
[data-reveal].is-visible .rule {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: none; /* not blur(0) — see note above; avoids permanent filter context */
}
.is-visible .step-card { transition-delay: calc(var(--i, 0) * var(--dur-press)); }
.is-visible .app-card  { transition-delay: calc(var(--i, 0) * 70ms); }
.is-visible .why-card  { transition-delay: calc(var(--i, 0) * var(--dur-press)); }
.is-visible .rule[aria-current="true"] { transition-delay: 100ms; }
.is-visible .rule:not([aria-current="true"]) { transition-delay: 140ms; }

/* Keep opacity baselines for non-current rules */
.is-visible .rule[aria-current="true"] { opacity: 1; }
.is-visible .rule:not([aria-current="true"]) { opacity: 0.3; }

/* =========================================================
   Responsive — scales the design without breaking 1px parity at 1758
   Breakpoints: 1758 / 1280 / 768 / 480
   ========================================================= */

/* From 1758 down to ~1280: hero scales, content stays 996. */
@media (max-width: 1280px) {
  :root {
    --section-py: clamp(64px, 10vh, 100px);
  }
}

/* 1100 → 996 boundary: fixed-px children scale (.section__inner already gutters
   via base max-width) */
@media (max-width: 1100px) {
  .why-card { width: auto; }
  .rules__visual { flex: 1 1 0; min-width: 0; }
  .rules__list { width: 240px; }
  .steps { width: 100%; max-width: 636px; }
}

/* Tablet */
@media (max-width: 900px) {
  :root {
    --section-py: 88px;
  }
  .hero__title { font-size: 48px; line-height: 52px; gap: var(--gap-2); } /* 2026-05-31: 데스크톱 56과 차이 유지 위해 한 단계 ↓ (was 56) */
  .section-head__title { font-size: 36px; }
  .quote__body { font-size: var(--fs-6xl); }
  .rules { flex-direction: column; align-items: stretch; }
  .rules__list { width: 100%; height: auto; overflow: visible; }
  /* Override flex:1 from 1100 query — in column direction it collapses to 0 */
  .rules__visual { flex: 0 0 auto; width: 100%; height: 420px; }
  .rule__title { white-space: normal; }
  .why-grid { flex-direction: column; }
}

/* Tablet narrow / Mobile landscape (≤768) */
@media (max-width: 768px) {
  :root {
    /* Mobile tokens stay on canonical scale — NEVER redefine --gap-60/48/36. */
    --hero-pad: 12px;
    --section-py: 80px;
    /* 모바일 dialog padding-x — bottom-sheet/일반 모두 동일 토큰으로 흡수.
       데스크탑 22 → 모바일 18 (좁은 화면 적절 breathing). */
    --dialog-padding-x: var(--pad-18);
  }
  /* Mobile: unified 18px horizontal gutter across all containers. */
  .section__inner {
    max-width: calc(100% - var(--pad-mobile-gutter) * 2);
    gap: var(--gap-36);
  }
  .hero__content { max-width: calc(100% - var(--pad-mobile-gutter) * 2); }
  /* .subpage__content--narrow ≤768 max-width는 line 3630에서 단일 정의. 중복 제거. */
  .modal--wide { width: calc(100% - var(--pad-mobile-gutter) * 2); }
  .modal--app-preview { width: calc(100% - var(--pad-mobile-gutter) * 2); }
  .site-footer__inner { padding-left: var(--pad-mobile-gutter); padding-right: var(--pad-mobile-gutter); }
  .hero__content { gap: var(--gap-24); }
  .section-head { gap: var(--gap-12); }
  .hero__main { gap: var(--gap-18); }
  /* Mobile bottom-sheet modal — remove the gray inner panels that read as
     "frame inside frame" against the white sheet background. */
  .modal-overlay .bullet-box {
    background: transparent;
    padding: 0;
  }
  .modal-overlay .order-summary,
  .modal-overlay .checkout__summary {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
  .modal-overlay .checkout__body { padding: 0; }
  .modal-overlay .modal__actions > * { width: 100%; min-height: var(--ctl-xl); }

  .hero__title { line-height: 1.15; gap: var(--gap-2); }
  .hero__title-line--muted { color: var(--c-white-72); }
  .hero__subtitle { text-shadow: 0 1px 2px var(--c-black-16); }
  /* Text shadow on muted (translucent) lines only — solid white lines don't need it. */
  .hero__title-line--muted { text-shadow: 0 1px 4px var(--c-black-18); }
  /* Eyebrow cursive — pull back from 20px to 18 (token); same with quote sig. */
  .eyebrow, .quote__attribution { font-size: var(--fs-2xl); }
  /* Step/rule numerals — bump to 13 so they're not micro-text. */
  .step-card__num, .rule__num { font-size: var(--fs-base); line-height: 16px; }
  /* Form labels — clip-safe line-height. */
  .field__label { line-height: 20px; }
  .hero__image {
    height: calc(100dvh - calc(var(--hero-pad) * 2));
    min-height: 460px;
    max-height: 760px;
    padding-bottom: var(--pad-48);
  }
  /* Landscape phones: hero must fit within shallow viewport, not force scroll */
  @media (max-height: 500px) and (orientation: landscape) {
    .hero__image { min-height: 100dvh; max-height: 100dvh; padding-bottom: var(--pad-36); }
    .hero__title { font-size: var(--fs-6xl); line-height: 36px; }
  }
  .nav {
    gap: var(--gap-16);
    padding: var(--pad-8) var(--pad-16);
  }
  .nav__links { gap: var(--gap-16); }
  .nav__link { font-size: var(--fs-lg); padding: 0; }
  .hero__title { font-size: 48px; line-height: 52px; gap: var(--gap-4); white-space: normal; }
  .hero__subtitle--ja { white-space: normal; font-size: var(--fs-lg); line-height: 1.4; }
  .hero__content { width: 100%; gap: var(--gap-24); }
  .hero__main { gap: var(--gap-18); }

  .section__inner { gap: var(--gap-48); }
  .subpage__content { max-width: calc(100% - var(--pad-mobile-gutter) * 2); }
  .section-head { gap: var(--gap-12); width: 100%; }
  .section-head__title { font-size: var(--fs-6xl); }
  .section-head__lede { font-size: var(--fs-xl); line-height: var(--lh-ctl); }
  .section-head__lede br { display: none; }

  .steps { width: 100%; }
  /* Card padding/radius UNCHANGED across viewports — same design system.
     Only LAYOUT (column count, width) and TEXT (font sizes) change. */
  .why-card__title { white-space: normal; }
  .rule__title { white-space: normal; }
  .rules__visual { height: 320px; }
  /* 모바일 전체 1열 — 한 카드씩 세로 스택. (이전 2열은 어색한 비율) */
  .apps-grid { grid-template-columns: 1fr; }
  .app-card { height: auto; min-height: 280px; }
  .quote__body { font-size: var(--fs-5xl); }
  .quote__mark { width: 36px; height: auto; }
}

/* Small mobile (≤520) */
@media (max-width: 520px) {
  :root {
    --hero-pad: 12px;
    --section-py: clamp(48px, 9vh, 64px);
    /* 작은 모바일에서 좌우 gutter 좁힘 — 모든 컨테이너가 단일 토큰 사용하므로
       hero/section/subpage/modal/footer가 자동으로 12px gutter로 일관. */
    --pad-mobile-gutter: 12px;
  }
  /* Hero text — scale gaps WITH the smaller font so spacing stays proportional. */
  .hero__title { font-size: 38px; line-height: 42px; gap: var(--gap-2); }
  .hero__content { gap: var(--gap-18); }
  /* Flex/grid children must allow shrink to prevent overflow at extreme small widths */
  .apps-grid { min-width: 0; }
  .app-card { min-width: 0; }
  .hero__main { gap: var(--gap-10); }
  .section-head__title { font-size: 26px; }
  .section-head { gap: var(--gap-8); }
  .section__inner { gap: var(--gap-36); }
  .apps-grid { grid-template-columns: 1fr; row-gap: var(--gap-24); }
  .quote__body { font-size: var(--fs-3xl); }
  /* Nav: SAME padding & radius as desktop. Only font/logo size adjusts. */
  .nav__link { font-size: var(--fs-lg); }
  .nav__logo { width: 20px; height: 20px; }
  .nav__logo img { width: 20px; height: auto; }
  /* Snackbar can wrap text on narrow viewports */
  .snackbar { white-space: normal; }
  /* Checkout row-split: country + zip on one line is too tight on 320 */
  .checkout-form .row-split { flex-direction: column; }
  /* subpage__content는 ≤768에서 토큰 사용 — ≤520 토큰 redefine으로 자동 12 적용. */
  /* Sub-page intros tighten too */
  .subpage__intro, .wish-grid__intro, .acct-intro { gap: var(--gap-8); }
}

/* Mobile touch target bumps — ≥44×44 for tap-only icons */
@media (max-width: 768px) {
  /* close size 토큰 자체를 ctl-xl로 override → base CSS의 top/right offset이
     --dialog-close-size 참조로 자동 재계산되어 위치 보정. */
  .modal__close { --dialog-close-size: var(--ctl-xl); padding: var(--pad-10); }
  .app-row__copy,
  .pay-row__menu { width: var(--ctl-xl); height: var(--ctl-xl); }
  .system-info__copy { padding: var(--pad-8) var(--pad-12); font-size: var(--fs-lg); }
  .chip { height: var(--ctl-xl); }
}

/* Tiny screens (≤375) */
@media (max-width: 375px) {
  .hero__title { font-size: 34px; line-height: 38px; gap: var(--gap-2); }
  .hero__main { gap: var(--gap-12); }
  .section-head__title { font-size: var(--fs-4xl); }
  /* 이전 ≤360 block에서 흡수 — 동일 작은 모바일 시각 그룹. */
  .nav__links { gap: var(--gap-10); }
  .nav__link { font-size: var(--fs-base); padding: 0 var(--pad-2); }
}


/* =========================================================
   Shared Footer
   ========================================================= */
.site-footer {
  width: 100%;
  /* Transparent so body bg shows through — keeps footer in the same color
     plate as the page above it (white on index, gray-0 on apps/philosophy/wish). */
  /* 2026-05-30: 푸터 배경을 apps 페이지와 동일하게 (--surface-sunken = --c-gray-0 #f9f9f9).
     홈 본문(흰색) 아래에서 살짝 가라앉은 회색 플레이트로 구분됨. */
  background: var(--surface-sunken);
  border-top: 1px solid var(--hairline);
  /* 2026-05-30: 푸터 세로 길이 대폭 축소 (was --gap-60 60px). */
  padding: var(--pad-16) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.site-footer__inner {
  width: var(--content-w);
  max-width: calc(100% - 64px);
  display: flex;
  align-items: center;
  gap: var(--gap-24);
}
.site-footer__logo {
  width: 34px; height: 32px;
  display: inline-flex;
  align-items: center;
}
/* 2026-05-30: 푸터 로고 0.9배 (29.781×28.092 → 26.803×25.283) */
.site-footer__logo img { width: 26.803px; height: 25.283px; }
.site-footer__links {
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
}
.site-footer__div {
  width: 1px; height: 10px;
  background: var(--hairline-2);
  border-radius: var(--r-full);
}
.site-footer__link { color: inherit; text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .site-footer__link:hover { opacity: var(--hover-opacity); }
}
@media (max-width: 768px) {
  .site-footer { padding: var(--pad-12) 0; } /* 2026-05-30: 모바일도 컴팩트 (was --pad-36) */
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__links { flex-wrap: wrap; }
  .site-footer__link { padding: var(--pad-8) var(--pad-4); margin: calc(-1 * var(--pad-8)) calc(-1 * var(--pad-4)); }
}

/* =========================================================
   Sub-page common (apps, philosophy, wish, signin)
   ========================================================= */
.subpage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.subpage__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 36(nav top) + 50(nav h) + 36(breathing) + 60(extra) = 182 clearance */
  padding: 182px 0 120px;
  gap: var(--gap-60);
}
@media (max-width: 768px) {
  /* Subpage top clearance +12 on mobile (per user feedback): nav 30 + top 16 +
     breathing 50 + extra 12 = ~108. */
  .subpage__main { padding-top: 108px; padding-bottom: 80px; }
  /* Subpage h1 scales down on mobile (desktop 40 → 30) */
  .subpage__intro h1,
  .wish-grid__intro h1,
  .acct-intro h1 {
    font-size: 34px;
    line-height: 1.15;
  }
}
.subpage__content {
  width: var(--content-w);
  max-width: calc(100% - 64px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
}
.subpage__intro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  align-items: flex-start;
}
.subpage__intro h1,
.wish-grid__intro h1,
.acct-intro h1 {
  font-weight: var(--fw-bold);
  /* 2026-05-31: 상단 제목 한 단계 ↓ — fs-7xl(40) → fs-6xl(32) */
  font-size: var(--fs-6xl);
  line-height: 1.25;
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
  white-space: nowrap;
  margin: 0;
}
.subpage__intro p,
.wish-grid__intro p,
.acct-intro p {
  color: var(--ink);
  margin: 0;
}

/* Apps / Philosophy / Wish use a gray-0 page surface (body-level so the footer
   sits on the same plate, no visible color split at the main↓footer boundary). */
body.page-apps, body.page-philosophy, body.page-wish { background: var(--surface-sunken); }
/* Standalone modal pages (buy, code, delete-account, etc.) — lock background scroll */
html:has(body.page-modal), html:has(body.page-checkout) { overflow: hidden; }
body.page-modal, body.page-checkout { overflow: hidden; height: 100dvh; }
.apps-page__bg { background: transparent; }
/* Wrap intro + filters/search in a single block to enforce Figma gap-24 between them.
   The parent .subpage__content uses gap-36, which then becomes the spacing to the grid. */
.apps-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  width: 100%;
}
.apps-page__filters {
  display: flex;
  gap: var(--gap-8);
  align-items: center;
}
.chip {
  font-family: var(--ff-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ctl-lg);
  padding: 0 var(--pad-16);
  border-radius: var(--r-12);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  background: var(--c-white);
  color: var(--c-gray-7);
  box-shadow: var(--sh-hairline);
  cursor: pointer;
  /* Unified interaction: opacity dim on hover, scale-press on active. No bg flip. */
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* A13 universal Jakarta lift */
.chip > span { display: inline-block; line-height: 1; transform: translateY(-0.75px); }
.chip--active {
  background: var(--c-black);
  color: var(--c-white);
  box-shadow: none;
}
.search-box {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  height: var(--ctl-lg);
  padding: 0 var(--pad-16);
  background: var(--c-white);
  box-shadow: var(--sh-hairline);
  border-radius: var(--r-12);
  width: 312px;
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-2);
}
.search-box img { width: var(--icon-md); height: var(--icon-md); }
.search-box input {
  appearance: none;
  -webkit-appearance: none;
  border: 0; outline: 0; background: none;
  /* Safari overrides input font to a system UI font unless we reset explicitly. */
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: inherit;
  width: 100%;
}
.search-box input::-webkit-search-decoration,
.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-results-button,
.search-box input::-webkit-search-results-decoration { display: none; }
.search-box input::placeholder { color: var(--ink-3); opacity: 1; font-weight: var(--fw-regular); }
.apps-page__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Philosophy page */
.principle-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
  width: 100%;
}
.principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.principle-section__head h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: 36px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
  margin: 0 0 var(--pad-12);
}
.principle-section__head p {
  color: var(--ink-3);
  margin: 0;
}
.principle-item {
  background: var(--c-white);
  box-shadow: var(--sh-hairline);
  border-radius: var(--r-12);
  padding: var(--pad-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-24);
}
.principle-item__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  flex-shrink: 0;
}
.principle-item__body {
  color: var(--ink-2);
  /* Figma 683 max; fluid below that to avoid overflow at mid-widths */
  flex: 1 1 auto;
  max-width: 683px;
}
.section-rule {
  height: 1px;
  background: var(--hairline);
  border-radius: var(--r-full);
  width: 100%;
}

/* Wish page */
.wish-grid {
  display: flex;
  gap: var(--gap-60);
  align-items: flex-start;
  width: 100%;
}
.wish-grid__intro {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.wish-grid__intro p { white-space: pre-wrap; }
.wish-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  align-items: flex-end;
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  width: 100%;
}
.field__label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-flat);
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
}
.field__input,
.field__textarea {
  background: var(--c-white);
  border: 0;  /* reset browser default — visible border comes from inset shadow */
  border-radius: var(--r-12);
  box-shadow: var(--sh-hairline);
  /* Jakarta lift via asymmetric padding: 10 top / 12 bottom (matches button -0.75px). */
  height: var(--ctl-xl);
  padding: var(--pad-10) var(--pad-16) var(--pad-12);
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field__textarea {
  /* Textarea overrides single-line settings */
  height: 159px;
  padding: var(--pad-12) var(--pad-16);
  line-height: var(--lh-ctl);
  resize: vertical;
}
/* Native select: line-height inherited from .field__input (height 44). */
.field__input::placeholder,
.field__textarea::placeholder { color: var(--ink-3); opacity: 1; font-weight: var(--fw-regular); }
.field__input--mono {
  font-family: var(--ff-info);
  letter-spacing: var(--tracking-mono-caps);
  text-transform: uppercase;
}
/* Compact input (40h) for search boxes and secondary inputs. */
.field__input--sm {
  height: var(--form-h-md);
  padding: var(--pad-8) 14px var(--pad-10);
  font-size: var(--fs-lg);
  line-height: 20px;
}

/* Invalid input state — red 2px ring (matches focus thickness but red) */
.field__input:user-invalid,
.field__input[aria-invalid="true"],
.field__textarea:user-invalid,
.field__textarea[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--c-red);
}

/* Apps grid — empty state (filter / search returns nothing) */
.apps-empty {
  width: 100%;
  padding: var(--pad-64) var(--pad-24);
  text-align: center;
  border-radius: var(--r-18);
  background: var(--surface-sunken);
}
.apps-empty p {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.apps-empty p + p { margin-top: var(--paragraph-gap); }
.apps-empty__hint {
  font-weight: var(--fw-medium) !important;
  font-size: var(--fs-lg) !important;
  letter-spacing: var(--tracking-hard) !important;
  color: var(--ink-2) !important;
}

/* Legal pages (privacy, terms, business) — quiet reading layout */
.legal-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  width: 100%;
}
.legal-section h2 { margin: 0; }
.legal-section p {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--c-gray-7);
  margin: 0;
}
.legal-section strong { color: var(--ink); font-weight: var(--fw-semibold); }
.legal-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  padding: 0;
  margin: 0;
}
.legal-list li {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--c-gray-7);
}
.legal-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  margin: 0;
}
.legal-info__row {
  display: flex;
  align-items: baseline;
  gap: var(--gap-24);
  padding: var(--pad-8) 0;
}
.legal-info__row + .legal-info__row { border-top: 1px solid var(--hairline); }
.legal-info__row dt {
  flex: 0 0 180px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: 20px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-2);
}
.legal-info__row dd {
  flex: 1 1 auto;
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.legal-footer {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-3);
}
@media (max-width: 768px) {
  .legal-info__row { flex-direction: column; gap: var(--gap-4); }
  .legal-info__row dt { flex: 0 0 auto; }
}

/* 404 error page — minimal centered */
.error-page {
  min-height: calc(100dvh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px var(--pad-24) 80px;
}
.error-page__inner {
  text-align: center;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
}
.error-page__inner h1 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-7xl);
  line-height: 1.25;
  letter-spacing: var(--tracking-hard);
  margin: 0;
  color: var(--ink);
}
.error-page__inner > p {
  color: var(--ink-2);
  margin: 0;
}
.error-page__actions {
  display: flex;
  gap: var(--gap-8);
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 520px) {
  .error-page__actions { width: 100%; flex-direction: column; }
  .error-page__actions > * { width: 100%; }
}

/* Signin page — clean standalone centered layout (no modal overlay) */
.signin-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px var(--pad-24) 80px;
  background: var(--c-white);
}
.signin-page__inner {
  position: relative;
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--dialog-gap);
  padding: var(--dialog-padding-y) var(--dialog-padding-x) var(--dialog-padding-bottom-btn);
}
/* 0.9× of native (38.165×36) → 0.9² = 0.81× — unified standalone-symbol size. */
.signin__logo { width: 30.8px; height: 29.2px; }
.signin__welcome {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.signin__welcome-greet { color: var(--ink-3); }
.signin__welcome-cta { color: var(--ink); }
.signin__form {
  display: flex;
  flex-direction: column;
  gap: var(--dialog-gap);
}
.signin__form .btn--black {
  height: var(--dialog-btn-h);
}
.signin__form .btn--black > span {
  display: inline-block;
  line-height: 1;
  transform: translateY(-0.75px);
}
.signin__legal {
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-2);
}

.btn--black:disabled { background: var(--ink-4); cursor: not-allowed; opacity: 1; }
@media (max-width: 768px) {
  .subpage__intro h1, .wish-grid__intro h1 { white-space: normal; }
  .wish-grid { flex-direction: column; gap: var(--gap-24); }
  .wish-grid__intro { width: 100%; flex-shrink: 1; }
  .wish-form { width: 100%; align-items: stretch; }
  .wish-form .btn--black { width: 100%; }
  .principle-item { flex-direction: column; align-items: flex-start; gap: var(--gap-12); }
  .principle-item__body { width: 100%; max-width: 100%; }
  .apps-page__top-row { flex-direction: column; align-items: stretch; gap: var(--gap-16); }
  .search-box { width: 100%; }
  .apps-page__filters { flex-wrap: wrap; }
}

/* =========================================================
   App Detail page
   ========================================================= */
.app-detail__content {
  gap: var(--gap-48);
}
.app-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-hard);
  color: var(--ink-2);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  align-self: flex-start;
}
@media (hover: hover) and (pointer: fine) {
  .app-detail__back:hover { opacity: var(--hover-opacity); }
}
.app-detail__back img {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: 0 0 auto;
  /* keep icon legible against background */
}

.app-detail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-24);
  width: 100%;
}
.app-detail__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-12);
  min-width: 0;
}
.app-detail__icon {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  margin-bottom: var(--pad-6);
}
.app-detail__title {
  font-weight: var(--fw-bold);
  /* 2026-05-31: 상단 제목 한 단계 ↓ — fs-7xl(40) → fs-6xl(32). subpage/acct h1과 통일 유지 */
  font-size: var(--fs-6xl);
  line-height: 1.25;  /* unified with .subpage__intro h1 / .acct-intro h1 */
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
  margin: 0;
  word-break: keep-all;
}
.app-detail__tagline {
  color: var(--ink);
  margin: 0;
}
.app-detail__price {
  margin-top: var(--pad-6);
}

.app-detail__actions {
  display: inline-flex;
  align-items: stretch;
  gap: var(--gap-8);
  flex: 0 0 auto;
}

.btn--outline {
  gap: var(--gap-8);
  height: var(--ctl-xl);
  padding: 0 var(--btn-padding-x);
  background: var(--c-white);
  color: var(--ink);
  box-shadow: var(--sh-hairline);
  text-decoration: none;
}
.btn--outline img { width: var(--icon-md); height: var(--icon-md); flex: 0 0 auto; }
.btn--black img { width: var(--icon-md); height: var(--icon-md); flex: 0 0 auto; }

/* App preview / video placeholder — 16:9 white surface with subtle outline */
.app-detail__media {
  width: 100%;
  aspect-ratio: 960 / 540;
  background: var(--c-white);
  box-shadow: var(--sh-hairline-soft);
  border-radius: var(--r-18);
}

/* Sub-section pattern (About, Features, Pricing, System) */
.detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  width: 100%;
}
.detail-section__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: 36px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
  margin: 0;
}
.detail-section__body { color: var(--ink-2); }
.detail-section__body p { margin: 0; }
.detail-section__body p + p { margin-top: var(--paragraph-gap); }

/* Feature list (icon + bold name + body) */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  width: 100%;
}
.feature-list .feature {
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
}
.feature__name {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-12);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  white-space: nowrap;
}
.feature__name img { width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 auto; }
.feature__body {
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  letter-spacing: var(--tracking-hard);
  word-break: keep-all;
  /* Figma 94:3310 — 683 max, fluid below */
  flex: 1 1 auto;
  max-width: 683px;
}

/* Pricing plans (Pro variant — two columns) */
.pricing-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-24);
  width: 100%;
}
.pricing-plan {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  padding: var(--pad-24);
  background: var(--c-white);
  box-shadow: var(--sh-hairline);
  border-radius: var(--r-18);
}
.pricing-plan__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.pricing-plan__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.pricing-plan__sub {
  color: var(--ink-3);
}
.pricing-plan__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.pricing-plan__benefits li {
  display: flex;
  align-items: center;
  gap: var(--gap-6);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: 15px;
  letter-spacing: var(--tracking-hard);
  color: var(--c-gray-7);
}
.pricing-plan__benefits li img { width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 auto; }
.pricing-note { color: var(--ink-2); }

/* System info (key-value rows) */
.system-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  width: 500px;
  max-width: 100%;
  margin: 0;
}
.system-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
}
.system-info__row dt {
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: 15px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-2);
  flex: 0 0 auto;
}
.system-info__row dd {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  width: 320px;
  max-width: 100%;
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: 15px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
  min-width: 0;
}
.system-info__div {
  width: 1px;
  height: 10px;
  background: var(--hairline-2);
  border-radius: var(--r-full);
  flex: 0 0 auto;
}
.system-info__cmd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--c-gray-1);
  color: var(--ink-2);
  flex: 0 0 auto;
}
.system-info__row code {
  font-family: var(--ff-info);
  font-size: var(--fs-lg);
  line-height: 15px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.system-info__copy {
  background: none;
  border: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-2);
  padding: var(--pad-2) var(--pad-6);
  border-radius: var(--r-6);
  cursor: pointer;
  flex: 0 0 auto;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .system-info__copy:hover { opacity: var(--hover-opacity); }
}

/* App Detail responsive */
@media (max-width: 900px) {
  .app-detail__head { flex-direction: column; align-items: stretch; gap: var(--gap-24); }
  .app-detail__actions { width: 100%; flex-wrap: wrap; }
  .btn--outline, .app-detail__actions .btn--black { flex: 1 1 0; min-width: 0; }
  .pricing-plans { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .app-detail__title { font-size: var(--fs-6xl); }
  .app-detail__icon { width: 60px; height: 60px; }
  .feature-list .feature { flex-direction: column; align-items: flex-start; gap: var(--gap-4); }
  .feature__name { white-space: normal; }
  .system-info__row { flex-direction: column; align-items: flex-start; gap: var(--gap-4); }
  .system-info__row dd { width: 100%; }
  .system-info { width: 100%; }
  .app-detail__back { font-size: var(--fs-xl); }
  .detail-section__title { font-size: var(--fs-4xl); line-height: 30px; }
}
@media (max-width: 520px) {
  .app-detail__title { font-size: var(--fs-5xl); }
  .app-detail__actions { flex-direction: column; }
  /* Reset the 900-tier `flex: 1 1 0` (which was for horizontal equal-share)
     since the actions row is now column-stacked. Without `flex: none` the
     buttons grow/shrink along the COLUMN axis and collapse to ~16px tall
     instead of their declared 44h. */
  .btn--outline, .app-detail__actions .btn--black { flex: none; width: 100%; }
  /* .pricing-plan padding은 ≤768 final-sweep에서 단일 정의 — 중복 제거. */
}

/* =========================================================
   Snackbar (toast) — bottom-right, 24px offset
   ========================================================= */
.snackbar-host {
  position: fixed;
  right: var(--gap-32);
  bottom: var(--gap-32);
  z-index: var(--z-snackbar);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-8);
  pointer-events: none;
}
.snackbar {
  font-family: var(--ff-sans);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  padding: var(--pad-8) var(--pad-16);
  min-height: var(--ctl-lg);
  background: var(--c-white);
  /* Figma uses shadow_2 only — no border. */
  box-shadow: var(--sh-soft2);
  border-radius: var(--r-12);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  pointer-events: auto;
  /* 제자리 fade — opacity만 변경, transform/scale 없음. 렉/jank 제거.
     transform-only이던 이전 패턴은 슬라이드 인/아웃 운동량 컸음. */
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out) !important;
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  /* reduced-motion: transition 자체 차단. 이전 transition-duration 재지정은
     실질 no-op이었음 (var(--dur-base)로 동일값). */
  .snackbar { transition: none !important; }
}
.snackbar.is-visible { opacity: 1; }
/* A13 universal Jakarta lift — snackbar text */
.snackbar__text { display: inline-block; line-height: 1; transform: translateY(-0.75px); }

/* Undo toast — dark background with keyboard shortcut hint. */
.snackbar--undo {
  background: var(--c-black);
  color: var(--c-white);
  box-shadow: 0 8px 24px var(--c-black-18);
}
.snackbar--undo .snackbar__kbd {
  background: var(--c-white-12);
  color: var(--c-white-85);
  font-family: var(--ff-info);
  font-size: var(--fs-xs);
  padding: var(--pad-2) var(--pad-6);
  border-radius: var(--r-4);
  margin-left: var(--pad-8);
}
.snackbar--undo .snackbar__action {
  background: transparent;
  border: 0;
  color: var(--c-white);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 18px;
  font-family: var(--ff-sans);
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  padding: 0 0 0 var(--pad-8);
  box-shadow: inset 1px 0 0 0 var(--c-white-20);
  margin-left: var(--pad-8);
  transition: opacity var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .snackbar--undo .snackbar__action:hover { opacity: var(--hover-opacity-text); }
}
.snackbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
.snackbar__icon img { width: var(--icon-sm); height: var(--icon-sm); }
@media (max-width: 520px) {
  .snackbar-host { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 12px; align-items: stretch; }
  .snackbar { width: 100%; justify-content: flex-start; }
}

/* =========================================================
   Generic modal overlay (Buy, Subscribe, Confirm modals)
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  /* display: none 대신 opacity + visibility — close 시에도 fade-out animation 적용.
     이전 display:none 토글은 close instant disappear (jarring). */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-24);
  background: var(--backdrop);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 공용 surface 모션 (tokens.css --surface-dur/ease) — 백드롭 dim과 모달 콘텐츠
     같은 타이밍 0→100. 플랜 모달과 동일 시스템. */
  transition: opacity var(--surface-dur) var(--surface-ease), visibility 0s linear var(--surface-dur);
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--surface-dur) var(--surface-ease), visibility 0s linear 0ms;
  will-change: opacity;
}

/* Bottom-sheet modal for all phones (<=768). */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 !important;
    animation: modal-fade-in 220ms var(--ease-out);
  }
  .modal-overlay .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: var(--dialog-radius) var(--dialog-radius) 0 0;
    padding: var(--dialog-padding-y) var(--dialog-padding-x) var(--dialog-padding-bottom-mobile);
    box-shadow: 0 -10px 32px var(--c-black-08);
    animation: modal-slide-up 380ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  .modal-overlay .modal--wide { width: 100%; max-height: 96dvh; }
  .modal-overlay .modal--app-preview {
    padding: var(--dialog-padding-y) var(--dialog-padding-x) var(--dialog-padding-bottom-mobile);
    gap: var(--gap-16);
  }
  /* Drag handle indicator at top */
  .modal-overlay .modal::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    background: var(--c-gray-3);
    border-radius: var(--r-full);
    margin: calc(-1 * var(--pad-12)) auto var(--pad-16);
    pointer-events: none;
  }
  @keyframes modal-slide-up {
    from { transform: translate3d(0, 100%, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .modal-overlay .modal { animation: none; }
}
.modal {
  position: relative;
  background: var(--c-white);
  border-radius: var(--dialog-radius);
  box-shadow: var(--sh-modal);
  width: var(--modal-w-lg);
  max-width: 100%;
  padding: var(--dialog-padding-y) var(--dialog-padding-x) var(--dialog-padding-bottom-btn);
  display: flex;
  flex-direction: column;
  gap: var(--dialog-gap);
}
.modal--wide { width: var(--modal-w-xl); padding: 0; overflow: hidden; }

/* App Preview modal — opens from apps grid "View" click
   (Figma 315:79 / 263:724 / 263:697). Shows compact preview with action
   buttons + media + footer meta + "See more →" link to full detail page. */
.modal--app-preview {
  width: calc(100% - 64px);
  max-width: var(--modal-w-xl);
  /* Figma 315:79 — pt-28 pb-36 px-28 (heavier bottom padding) */
  padding: var(--dialog-padding-y) var(--dialog-padding-x) var(--pad-36);
  gap: var(--gap-18, 18px);
}
.app-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  width: 100%;
  min-height: 28px;
}
.app-preview__title {
  margin: 0;
  min-width: 0;
}
/* 모바일: "이름 - 태그라인" 한 줄 → "이름" + 다음줄 작은 서브문구 분리. */
@media (max-width: 768px) {
  .app-preview__title {
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
  }
  .app-preview__sep { display: none; }
  .app-preview__tagline {
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--ink-3);
    line-height: var(--lh-ctl);
    letter-spacing: 0;
  }
}
.app-preview__actions {
  display: inline-flex;
  gap: var(--gap-8);
  flex: 0 0 auto;
}
.app-preview__actions .btn--outline,
.app-preview__actions .btn--black--sm {
  height: var(--ctl-lg);
  padding: 0 var(--btn-padding-x);
}
.app-preview__media {
  width: 100%;
  aspect-ratio: 960 / 540;
  background: var(--c-white);
  box-shadow: var(--sh-hairline-soft);
  border-radius: var(--r-18);
}
.app-preview__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-24);
  width: 100%;
}
.app-preview__info {
  display: flex;
  align-items: center;
  gap: var(--gap-24);
  min-width: 0;
}
.app-preview__pricing {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  white-space: nowrap;
}
.app-preview__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
  min-width: 0;
  flex-wrap: wrap;
}
.app-preview__meta .meta-divider {
  width: 1px;
  height: 10px;
  background: var(--hairline-2);
  border-radius: var(--r-full);
  display: inline-block;
}
.app-preview__meta code {
  font-family: var(--ff-info);
}
.app-preview__see-more {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .app-preview__see-more:hover { opacity: var(--hover-opacity); }
}
.app-preview__see-more img { width: var(--icon-md); height: var(--icon-md); flex: 0 0 auto; }

@media (max-width: 768px) {
  /* App-preview-specific overrides — outer padding handled by .modal-overlay .modal--app-preview above. */
  .app-preview__header { flex-direction: column; align-items: stretch; gap: var(--gap-12); }
  .app-preview__actions { width: 100%; }
  .app-preview__actions .btn--outline,
  .app-preview__actions .btn--black--sm { flex: 1 1 0; }
  .app-preview__footer { flex-direction: column; align-items: stretch; gap: var(--gap-12); }
  .app-preview__info { flex-direction: column; align-items: flex-start; gap: var(--gap-8); }
  .app-preview__meta { row-gap: var(--gap-4); }
}
/* ── Close button canonical rule ──
   12×12 icon at padding edge, 24×24 hit area extends 6px beyond.
   모든 다이얼로그(modal, auth, editor, help) 동일. */
.modal__close {
  position: absolute;
  top: calc(var(--dialog-padding-y) - var(--dialog-close-offset));
  right: calc(var(--dialog-padding-x) - var(--dialog-close-offset));
  width: var(--dialog-close-size); height: var(--dialog-close-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-3);
  border-radius: var(--r-6);
  z-index: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .modal__close:hover { opacity: 0.5; }
}
.modal__close img,
.modal__close svg {
  width: var(--dialog-close-icon); height: var(--dialog-close-icon); display: block;
}

/* Dark-bg buttons: invert black SVG icons to white. */
.btn--black img,
.btn--black--sm img,
.btn--danger img,
.btn--icon img,
.check__box img,
.snackbar--undo img {
  filter: invert(1);
}
.modal__head {
  display: flex;
  flex-direction: column;
  gap: var(--dialog-head-gap);
}
.modal__title {
  font-weight: var(--fw-semibold);
  font-size: var(--dialog-title-size);
  line-height: var(--lh-flat);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
}
.modal__sub {
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: 18px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-3);
}
.modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--dialog-btn-gap);
}
.modal__actions .btn--outline,
.modal__actions .btn--black,
.modal__actions .btn--danger,
.modal__actions .btn--ghost {
  height: var(--dialog-btn-h);
}
.modal .field__input {
  height: var(--dialog-input-h);
  padding: var(--pad-10) var(--pad-16) var(--pad-12);
}

/* Destructive / red CTA — height-locked to 44 (matches .btn--outline / .btn--black) */
.btn--danger {
  gap: var(--gap-8);
  height: var(--ctl-xl);
  padding: 0 var(--btn-padding-x);
  background: var(--c-red-sub);
  color: var(--c-red);
}

/* Bullet description box (inside destructive modals) */
.bullet-box {
  background: var(--surface-sunken);
  border-radius: var(--r-12);
  padding: var(--pad-18) var(--pad-16);
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.bullet-box li {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-6);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-2);
}
.bullet-box li::before {
  content: "";
  display: inline-block;
  width: 2px; height: 2px;
  background: var(--c-gray-5);
  border-radius: var(--r-full);
  margin-top: 7px;
  flex: 0 0 auto;
}

/* Buy / Subscribe checkout (wide 1016 modal with summary + form) */
.checkout {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.checkout__summary {
  width: 384px;
  background: var(--surface-sunken);
  padding: var(--pad-36) var(--dialog-padding-x);
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
  flex: 0 0 auto;
}
.checkout__body {
  flex: 1 1 0;
  min-width: 0;
  background: var(--c-white);
  padding: var(--pad-36) var(--dialog-padding-x);
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}
/* (.checkout__brand img sizing defined in utility section below) */
.checkout__heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.checkout__heading h2 { margin: 0; }
.checkout__heading p {
  color: var(--ink-3);
}
.order-summary {
  background: var(--c-white);
  border-radius: var(--r-12);
  box-shadow: var(--sh-hairline-soft);
  padding: var(--pad-18) var(--pad-16);
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}
.order-summary__product {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}
.order-summary__product-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.order-summary__product-type {
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-2);
}
.order-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: 15px;
  letter-spacing: var(--tracking-hard);
}
.order-summary__rows .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order-summary__rows .row dt { color: var(--c-gray-7); }
.order-summary__rows .row dd { color: var(--ink-2); margin: 0; }
.order-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order-summary__total dt {
  color: var(--ink);
}
.order-summary__total dd {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
}
.order-summary__legal {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.order-summary__legal p {
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-3);
  margin: 0;
}
.inline-dot {
  width: 2px; height: 2px;
  background: var(--c-gray-3);
  border-radius: var(--r-full);
  display: inline-block;
  flex: 0 0 auto;
}
.inline-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-6);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-2);
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-18, 18px);
}
.checkout-form .row-split {
  display: flex;
  gap: var(--gap-8);
}
.checkout-form .row-split .field { flex: 1 1 0; min-width: 0; }

/* Card number display field (4 groups of 4) — placeholder shown when empty */
.field--card .field__input {
  letter-spacing: var(--tracking-mono-wide);
}

/* Sign-in methods list (Figma 104:4948 Manage modal) */
.signin-methods {
  display: flex;
  flex-direction: column;
  gap: var(--gap-18, 18px);
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.signin-methods__sep {
  height: 1px;
  background: var(--hairline);
  border-radius: var(--r-full);
  width: 100%;
}
.signin-methods__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  width: 100%;
}
.signin-methods__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.signin-methods__status {
  color: var(--ink-2);
}

/* Pricing tier selector (Figma 323:524 Subscribe small modal) */
.tier-select {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  width: 100%;
}
.tier-select__option {
  position: relative;
  display: block;
  cursor: pointer;
}
.tier-select__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tier-select__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-12) var(--pad-16);
  background: var(--c-white);
  box-shadow: var(--sh-hairline);
  border-radius: var(--r-12);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out-sm);
}
@media (hover: hover) and (pointer: fine) {
  .tier-select__option:hover .tier-select__row {
    box-shadow: inset 0 0 0 1px var(--c-gray-5);
  }
}
.tier-select__option--selected .tier-select__row,
.tier-select__option input:checked ~ .tier-select__row {
  box-shadow: var(--sh-hairline-strong);
}
.tier-select__price {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-4);
}
.tier-select__unit { color: var(--ink-3); }

/* Full-width primary CTA inside modals */
.btn--full {
  width: 100%;
  justify-content: center;
}

/* Compact check-list inside small modals */
.check-list--sm li {
  font-size: var(--fs-lg);
  line-height: 15px;
  letter-spacing: var(--tracking-hard);
  color: var(--c-gray-7);
  font-weight: var(--fw-medium);
  gap: var(--gap-6);
}
.check-list--sm li img { width: var(--icon-xs); height: var(--icon-xs); }

/* Checkbox (custom) */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  cursor: pointer;
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
  width: 16px;
  height: 16px;
  border-radius: var(--r-4);
  background: var(--c-white);
  box-shadow: var(--sh-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background var(--dur-fast) var(--ease-out);
}
.check__box img { width: var(--icon-xs); height: var(--icon-xs); opacity: 0; }
.check input:checked + .check__box {
  background: var(--c-black);
  box-shadow: none;
}
.check input:checked + .check__box img { opacity: 1; filter: invert(1); }

/* ════════════════════════════════════════════════════════════
   Unified check/radio system (18px)
   .cb = square checkbox  |  .cc = circular check  |  .rd = radio
   Mobile: ::before invisible 44px hit zone
   ════════════════════════════════════════════════════════════ */
.cb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-4);
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
  flex: 0 0 auto; margin: 0; position: relative;
}
.cb:checked { background: var(--c-black); box-shadow: none; }
/* SVG mask pattern — single SVG, color adapts via var(--bg). */
.cb:checked::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  background: var(--bg);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='19.7 6.3 8.7 17.3 3.7 12.3'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='19.7 6.3 8.7 17.3 3.7 12.3'/></svg>") center/contain no-repeat;
}
.cb:focus-visible { outline: none; box-shadow: var(--sh-focus-ring); }
.cb:disabled { opacity: var(--dim-opacity); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .cb:not(:disabled):hover { background: var(--c-gray-1); }
  .cb:checked:not(:disabled):hover { background: var(--c-gray-7); }
}
.cb:indeterminate { background: var(--c-black); box-shadow: none; }
.cb:indeterminate::after {
  content: ''; position: absolute; width: 60%; height: 2.4px;
  background: var(--bg); border-radius: 1px;
}

.cc {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-4);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
  flex: 0 0 auto; margin: 0; position: relative;
}
.cc:checked { background: var(--c-black); box-shadow: none; }
.cc:checked::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  background: var(--bg);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='19.7 6.3 8.7 17.3 3.7 12.3'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='19.7 6.3 8.7 17.3 3.7 12.3'/></svg>") center/contain no-repeat;
}
.cc:focus-visible { outline: none; box-shadow: var(--sh-focus-ring); }
.cc:disabled { opacity: var(--dim-opacity); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .cc:not(:disabled):hover { background: var(--c-gray-1); }
  .cc:checked:not(:disabled):hover { background: var(--c-gray-7); }
}

/* Dark mode overrides for check/radio visibility. */
body[data-theme="dark"] .cb,
body[data-theme="dark"] .cc,
body[data-theme="dark"] .rd {
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--c-gray-4);
}
body[data-theme="dark"] .cb:checked,
body[data-theme="dark"] .cb:indeterminate,
body[data-theme="dark"] .cc:checked {
  background: var(--c-white);
  box-shadow: none;
}
body[data-theme="dark"] .rd:checked {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--c-white);
}
body[data-theme="dark"] .rd:checked::after {
  background: var(--c-white);
}
@media (hover: hover) and (pointer: fine) {
  body[data-theme="dark"] .cb:not(:disabled):hover {
    background: var(--c-gray-1);
    box-shadow: inset 0 0 0 1px var(--c-gray-5);
  }
  body[data-theme="dark"] .cb:checked:not(:disabled):hover { background: var(--c-gray-6); box-shadow: none; }
}

.rd {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-4);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
  flex: 0 0 auto; margin: 0; position: relative;
}
.rd:checked { box-shadow: inset 0 0 0 2px var(--c-black); }
.rd:checked::after {
  content: ''; position: absolute; width: 8px; height: 8px;
  background: var(--c-black); border-radius: 50%;
}
.rd:focus-visible { outline: none; box-shadow: var(--sh-focus-ring); }
.rd:disabled { opacity: var(--dim-opacity); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .rd:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--c-gray-5); }
  .rd:checked:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--c-black); }
}

@media (hover: none) {
  .cb::before, .cc::before, .rd::before {
    content: ''; position: absolute; inset: -13px;
  }
}

@media (max-width: 900px) {
  /* 901~768 구간 — layout만 변경 (column stack). padding은 ≤768 final-sweep에서
     단일 토큰으로 통일 (--dialog-padding-x가 ≤768에서 --pad-18로 자동 redefine). */
  .modal--wide { width: 100%; max-width: 100%; }
  .checkout { flex-direction: column; }
  .checkout__summary { width: 100%; gap: var(--gap-24); }
}

/* =========================================================
   Account page
   ========================================================= */
/* Narrow content variant — outer container matches .subpage__content width (so h1 aligns
   with Apps/Philosophy/Wish), but inner blocks (.acct-intro, .acct-stack) are constrained
   to 720px for the Figma-spec'd card width. */
.subpage__content--narrow { width: var(--content-w); max-width: calc(100% - 64px); }
.subpage__content--narrow .acct-intro,
.subpage__content--narrow .acct-stack {
  width: 100%;
  max-width: 720px;
}

/* Account intro now uses the canonical .subpage__intro (visual parity with Apps/Wish/Philosophy) */
.acct-intro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  align-items: flex-start;
}
.acct-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-18);
  width: 100%;
}

.acct-card {
  background: var(--c-white);
  box-shadow: var(--sh-hairline);
  border-radius: var(--r-12);
  padding: var(--pad-36);
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}
.acct-card--compact { padding: var(--pad-36); }

.acct-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-12);
  width: 100%;
  min-height: var(--ctl-lg);
}
.acct-card__title { margin: 0; }
.acct-card__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
}

.acct-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  padding: var(--pad-18) 0;
  width: 100%;
}
.acct-row:first-child { padding-top: 0; }
.acct-row:last-child { padding-bottom: 0; }
.acct-row + .acct-row { border-top: 1px solid var(--hairline); }

.acct-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
  min-width: 0;
}
.acct-row__label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.acct-row__helper {
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-2);
}
.acct-row__value {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  flex: 0 0 auto;
  cursor: pointer;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__track {
  width: 100%;
  height: 100%;
  background: var(--c-gray-4);
  border-radius: var(--r-full);
  transition: background var(--dur-fast) var(--ease-out-sm);
}
.toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--c-white);
  border-radius: var(--r-full);
  transition: transform var(--dur-fast) var(--ease-out-sm);
}
.toggle input:checked + .toggle__track { background: var(--c-black); }
.toggle input:checked + .toggle__track + .toggle__knob { transform: translateX(16px); }

/* Secondary button (white + gray-3 border) */
.btn--secondary {
  gap: var(--gap-8);
  height: var(--ctl-lg);
  padding: 0 var(--btn-padding-x);
  background: var(--c-white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  text-decoration: none;
}
.btn--secondary--danger { color: var(--c-red); }

/* Ghost button — text-only, transparent background, hover reveals soft bg. */
.btn--ghost {
  gap: var(--gap-8);
  height: var(--form-h-md);
  padding: 0 var(--btn-padding-x);
  background: transparent;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { color: var(--ink); background: var(--hover-bg); }
}
.btn--ghost--danger { color: var(--c-red); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost--danger:hover { color: var(--c-red); background: var(--c-red-sub); }
}
.btn--ghost:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus-ring);
}

/* Compact black button (40h) — backward-compat alias.
   New code should prefer .btn--black with appropriate sizing. */
.btn--black--sm {
  gap: var(--gap-8);
  height: var(--ctl-lg);
  padding: 0 var(--btn-padding-x);
  background: var(--c-black);
  color: var(--c-white);
  text-decoration: none;
}
.btn--black--sm img { width: var(--icon-md); height: var(--icon-md); flex: 0 0 auto; }

.btn--black--xs {
  gap: var(--gap-8);
  height: var(--ctl-md);
  padding: 0 12px;
  background: var(--c-black);
  color: var(--c-white);
  font-size: var(--fs-base);
  border-radius: var(--r-8);
  text-decoration: none;
}

/* ════════ Icon-only buttons ════════
   Two shapes: square (r-12) / pill (r-full). Two sizes: 40 base / 32 compact. */
.btn--icon {
  font-family: var(--ff-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: var(--ctl-lg);
  padding: 0;
  background: var(--c-black);
  color: var(--c-white);
  border-radius: var(--r-12);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.btn--icon--pill { border-radius: var(--r-full); }
.btn--icon--32 { width: 32px; height: 32px; }
.btn--icon svg, .btn--icon img { width: var(--icon-lg); height: var(--icon-lg); flex: 0 0 auto; }
.btn--icon--32 svg, .btn--icon--32 img { width: var(--icon-sm); height: var(--icon-sm); }
/* Status dot + meta row */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  flex: 0 0 auto;
  margin-right: 2px;
}
.status-dot--active { background: var(--c-blue); }
.status-dot--danger { background: var(--c-red); }
.status-dot--muted  { background: var(--c-gray-5); }

.meta-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-6);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-2);
}
.meta-row__dot {
  width: 2px; height: 2px;
  background: var(--c-gray-3);
  border-radius: var(--r-full);
  display: inline-block;
}
.meta-row .meta-row__strong { color: var(--ink); }
.meta-row .meta-row__danger { color: var(--c-red); }
.meta-row .meta-row__active { color: var(--c-blue); }
.meta-row a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--ink-2);
  transition: opacity var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .meta-row a:hover { opacity: var(--hover-opacity); }
}

/* Pill / chip-like badge */
.pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--pad-8);
  background: var(--c-gray-1);
  color: var(--ink-2);
  border-radius: var(--r-8);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
}

/* Underlined text link (Cancel / Resume / Sign out of all devices) */
.text-link {
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { opacity: var(--hover-opacity); }
}
.text-link--muted { color: var(--ink-2); }
.text-link--danger { color: var(--c-red); }

/* App row inside My Apps card */
.app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  padding: var(--pad-18) var(--pad-16);
  border-radius: var(--r-12);
  box-shadow: var(--sh-hairline);
  background: var(--c-white);
}
.app-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-6);
  min-width: 0;
}
.app-row__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.app-row__license {
  margin-top: var(--pad-12);
  padding-top: var(--pad-12);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-12);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.app-row__license-code {
  font-family: var(--ff-info);
  letter-spacing: var(--tracking-mono-caps);
}
.app-row__copy {
  background: none;
  border: 0;
  padding: var(--pad-4);
  cursor: pointer;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-6);
  min-width: var(--ctl-sm);
  min-height: var(--ctl-sm);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .app-row__copy:hover { opacity: var(--hover-opacity); }
}

/* Payment method row */
.pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-12);
  padding: var(--pad-18) 0;
}
.pay-row + .pay-row,
.pay-row + .pay-add { border-top: 1px solid var(--hairline); }
.pay-row__brand {
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  min-width: 0;
}
.pay-row__icon {
  width: 24px; height: 24px;
  border-radius: var(--r-4);
  background: var(--c-black);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  flex: 0 0 auto;
}
/* brand: external — Visa/MC 공식 브랜드 색. 디자인 시스템 토큰화 대상 아님. */
.pay-row__icon--visa { background: #1434cb; }
.pay-row__icon--mc   { background: #eb001b; position: relative; }
.pay-row__icon--mc::after {
  content: "";
  position: absolute;
  left: 10px; top: 4px;
  width: 8px; height: 16px;
  background: #f79e1b;
  opacity: 0.85;
  border-radius: 2px;
}
.pay-row__main { display: flex; flex-direction: column; gap: var(--gap-4); min-width: 0; }
.pay-row__name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.pay-row__exp {
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-3);
}
.pay-row__menu {
  background: none;
  border: 0;
  padding: var(--pad-4);
  width: 28px; height: 28px;
  border-radius: var(--r-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-2);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pay-row__menu:hover { opacity: var(--hover-opacity); }
}

.pay-add {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  padding: var(--pad-18) 0 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pay-add:hover { opacity: var(--hover-opacity); }
}
.pay-add__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--ink);
}

/* Popover menu (used for payment method ⋮ kebab) */
.popover {
  position: absolute;
  z-index: var(--z-popover);
  background: var(--c-white);
  border-radius: var(--r-12);
  box-shadow: var(--sh-soft2), inset 0 0 0 1px var(--c-gray-2);
  padding: var(--pad-4) 0;
  min-width: 180px;
  display: none;
  transform-origin: top right;
  animation: popover-in var(--surface-dur) var(--surface-ease);
}
@keyframes popover-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.popover.is-open { display: block; }
.popover button {
  display: block;
  width: 100%;
  padding: var(--pad-8) var(--pad-24);
  text-align: left;
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-ctl);
  letter-spacing: var(--tracking-tight);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .popover button:hover { background: var(--hover-bg); }
}
.popover button.is-danger { color: var(--c-red); }

/* Compact popover — dense context menu variant. */
.popover--compact {
  padding: var(--pad-6);
  min-width: 170px;
}
.popover--compact button {
  padding: var(--pad-8) var(--pad-10);
  font-size: var(--fs-base);
  line-height: 18px;
  border-radius: var(--r-6);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .popover--compact button:hover { background: var(--hover-bg); opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .popover--compact button.is-danger:hover { background: var(--c-red-sub); }
}
.popover--compact .divider { height: 1px; background: var(--hairline); margin: var(--pad-4) 0; }
.popover--compact .meta { font-family: var(--ff-info); font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: var(--tracking-mono); }

@media (max-width: 768px) {
  .acct-row { flex-direction: column; align-items: flex-start; gap: var(--gap-8); }
  .acct-row__value { text-align: left; white-space: normal; }
  .app-row { flex-direction: column; align-items: stretch; }
  .pay-row { flex-direction: column; align-items: stretch; gap: var(--gap-8); }
  /* (acct h1 picks up the unified 30px above; no need to override here) */
  .acct-card { padding: var(--pad-18); }
  .acct-card__head { flex-direction: column; align-items: flex-start; gap: var(--gap-12); }
  .acct-card__actions { flex-wrap: wrap; }
  /* 모바일 카드 패딩 일관 — desktop 28/24/36 → mobile 18 single (axiom A14+A15). */
  .step-card { padding: var(--pad-18); }
  .why-card { padding: var(--pad-18); }
  .app-card { padding: var(--pad-18); }
  /* 모바일 gutter 토큰 일괄 단일화 — desktop base max-width override.
     CSS source order에서 desktop base가 위쪽 ≤768 block 뒤에 위치 → cascade로
     덮이는 bug. file 뒤쪽 재선언으로 해결.
     NOTE: .hero__content는 제외 — 부모 .hero가 --hero-pad로 frame padding을
     가지므로 자체 max-width 토큰 적용 시 이중 gutter(12+12=24). hero는 frame,
     다른 컨테이너는 직접 gutter. */
  .section__inner,
  .site-footer__inner,
  .subpage__content,
  .subpage__content--narrow {
    width: 100%;
    max-width: calc(100% - var(--pad-mobile-gutter) * 2);
  }
  .hero__content { max-width: 100%; }
}

/* =========================================================
   Shared utility classes (eliminate inline styles)
   ========================================================= */

/* ── Divider ──
   흰 배경: --hairline (gray-2). 회색 배경: --hairline-2 (gray-3).
   가로: .divider. 세로: .divider--v. */
.divider {
  height: 1px;
  background: var(--hairline);
  border-radius: var(--r-full);
  border: 0;
  margin: 0;
}
.divider--strong {
  background: var(--hairline-2);
}
.divider--v {
  width: 1px;
  height: 10px;
  background: var(--hairline-2);
}

/* Force [hidden] to override component display rules */
[hidden] { display: none !important; }

/* Brand logo image — SVG uses preserveAspectRatio="none", so lock both axes */
.checkout__brand img {
  height: 28px;
  width: 30px;
}


/* Inline anchor inside body copy / pricing notes / footers */
.inline-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .inline-link:hover { opacity: var(--hover-opacity); }
}

/* Strong inside bullet-box and other muted-body contexts */
.bullet-box strong,
.detail-section__body strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

/* Checkout — fineprint footer (charge line + Terms · Privacy · Refund) */
.checkout-footer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.checkout-footer p {
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: 15px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-3);
  margin: 0;
}

/* Native <select> as field__input */
.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("/assets/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  cursor: pointer;
  padding-right: var(--pad-36);
}

/* Field flex variants for split rows */
.field--country { flex: 0 0 300px; }
@media (max-width: 520px) {
  .field--country { flex: 1 1 0; }
}

/* Account: rows scoped variants */
.acct-row--cancelled .acct-row__label,
.acct-row--cancelled .meta-row { color: var(--ink-3); }
.acct-row--policy { padding: var(--pad-6) 0 0; }
.acct-row--policy + .acct-row { border-top: 0; }

/* Account: list of app rows inside My Apps card */
.acct-apps-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}

/* License row inline group */
.app-row__license-value {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
}

/* Sign-out card — full-row layout without inner padding */
.acct-card--compact .acct-row {
  padding: 0;
  width: 100%;
}
.acct-card--compact .acct-row + .acct-row { border-top: 0; }
.acct-row__signed-as {
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: 16px;
  letter-spacing: var(--tracking-hard);
  color: var(--ink-3);
}

/* Popover anchor — guarantees relative positioning for .popover children */
.has-popover { position: relative; }
.popover--pay { right: 0; top: 44px; }

/* =========================================================
   Accessibility — focus styles (keyboard only)
   ========================================================= */
:focus { outline: none; }
.btn,
.btn--black,
.btn--white,
.btn--outline,
.btn--secondary,
.btn--danger,
.btn--black--sm,
.btn--black--xs,
.btn--ghost,
.chip,
.text-link,
.pay-row__menu,
.pay-add,
.modal__close,
.app-row__copy,
.system-info__copy,
.nav__link,
.site-footer__link,
.inline-link,
.popover button {
  outline: none;
}
.btn:focus-visible,
.btn--outline:focus-visible,
.btn--secondary:focus-visible,
.btn--danger:focus-visible,
.btn--black--sm:focus-visible,
.btn--black--xs:focus-visible,
.btn--white:focus-visible,
.btn--black:focus-visible,
.btn--icon:focus-visible,
.chip:focus-visible,
.text-link:focus-visible,
.pay-row__menu:focus-visible,
.pay-add:focus-visible,
.modal__close:focus-visible,
.app-row__copy:focus-visible,
.system-info__copy:focus-visible,
.nav__link:focus-visible,
.site-footer__link:focus-visible,
.inline-link:focus-visible,
.popover button:focus-visible,
.tier-select__option:focus-visible,
.app-detail__back:focus-visible,
.app-preview__see-more:focus-visible,
.snackbar--undo .snackbar__action:focus-visible {
  box-shadow: var(--sh-focus-ring);
  border-radius: var(--r-4);
}
.field__input:focus-visible,
.field__textarea:focus-visible {
  box-shadow: var(--sh-hairline-strong);
}
.search-box:focus-within {
  box-shadow: var(--sh-hairline-strong);
}
.toggle input:focus-visible + .toggle__track {
  box-shadow: var(--sh-focus-ring);
}
body[data-theme="dark"] .toggle__knob { background: var(--bg); }

/* =========================================================
   Final responsive sweep — narrow viewport polish
   ========================================================= */
@media (max-width: 1100px) {
  .modal--wide { width: calc(100% - 32px); max-width: var(--modal-w-xl); }
}
@media (max-width: 768px) {
  .acct-card__head { align-items: stretch; }
  .acct-card__actions { gap: var(--gap-8); }
  .checkout__body, .checkout__summary { padding: var(--dialog-padding-x); gap: var(--gap-18); }
  .order-summary { padding: var(--pad-16); }
  /* .modal padding intentionally NOT overridden — mobile bottom-sheet rules
     in the ≤520 block take over below, and ≤520<≤768 means cascade order matters. */
  .feature-list .feature { gap: var(--gap-8); }
  .pricing-plan { padding: var(--pad-18); }
  /* Touch targets ≥ 44px */
  .pay-row__menu { width: var(--ctl-xl); height: var(--ctl-xl); }
  .app-row__copy { min-width: var(--ctl-xl); min-height: var(--ctl-xl); padding: var(--pad-8); }
  .system-info__copy { min-height: var(--ctl-xl); padding: var(--pad-8) var(--pad-16); }
  .pay-add { min-height: var(--ctl-xl); align-items: center; }
  /* Nav pill stays slim — touch area is the whole pill (~30h × full width), so
     each link doesn't need its own 44px min-height. */
  .nav__link { min-height: 0; }
  .site-footer__link { min-height: var(--ctl-xl); display: inline-flex; align-items: center; }
  .text-link { min-height: var(--ctl-xl); display: inline-flex; align-items: center; }
  .app-detail__back { min-height: var(--ctl-xl); padding: var(--pad-10) 0; align-items: center; }
}
@media (max-width: 520px) {
  .nav { top: 36px; }
  .subpage__main { padding-top: 98px; }
  .subpage__intro h1,
  .wish-grid__intro h1,
  .acct-intro h1 { font-size: 30px; }
  .modal__actions { flex-direction: column-reverse; align-items: stretch; }
  .modal__actions > * { width: 100%; }
  .pay-row__brand { gap: var(--gap-10); }
}
/* ≤360 dead breakpoint 제거 — 375 block에 통합. */

/* Smooth modal backdrop fade-in (desktop only — mobile uses slide-up sheet).
   .is-open에만 scope — base에 적용 시 base의 opacity transition과 이중 발화로
   첫 paint GPU compositing 비용 중복. .modal은 항상 .is-open 안에서만 보이므로
   parent에 .is-open scope. */
@media (min-width: 521px) {
  /* 사용자: "modal/다이어그램 부드럽지만 너무 느림" — duration 단축.
     dur-fast(220ms) → 160ms (체감 빠르게). pop 효과는 유지. */
  .modal-overlay.is-open {
    animation: modal-fade-in 160ms var(--ease-out);
  }
  .modal-overlay.is-open .modal {
    animation: modal-pop-in 160ms var(--ease-out);
  }
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-pop-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* =========================================================
   Edge-case safeguards
   ========================================================= */

/* Print: strip backgrounds, keep content readable */
@media print {
  body { background: white; color: black; }
  .nav,
  .hero__bg,
  .hero__image::before {
    display: none !important;
  }
  .hero__image { background: white; padding-bottom: 0; }
  .hero__title { color: black; }
  .hero__title-line--muted { color: var(--ink-2); }
  [data-reveal],
  .step-card, .app-card, .why-card, .rule {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    page-break-inside: avoid;
  }
}

/* Touch devices: bigger tap targets, no hover lifts */
@media (hover: none) {
  .btn--white:hover,
  .btn--black:hover { transform: none; }
  .btn--black:hover { opacity: 1; }
  .nav__link { padding-top: var(--pad-6); padding-bottom: var(--pad-6); }
}

/* Forced-colors (Windows high contrast) */
@media (forced-colors: active) {
  .step-card, .why-card, .app-card,
  .nav, .rules__visual {
    border: 1px solid CanvasText;
  }
  .btn--white, .btn--black {
    border: 1px solid CanvasText;
  }
}


/* Pre-deploy polish: mobile overflow protection for new extension components */
@media (max-width: 768px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs, .toolbar { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .toolbar::-webkit-scrollbar { display: none; }
  .sidebar { width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--hairline); }
}

/* ─── Mobile platform polish ─── */
* { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], input, select, textarea, label, summary { touch-action: manipulation; }
.field__input:-webkit-autofill,
.field__textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--c-black);
  -webkit-box-shadow: inset 0 0 0 1px var(--c-gray-3), 0 0 0 1000px var(--c-white) inset;
  box-shadow: inset 0 0 0 1px var(--c-gray-3), 0 0 0 1000px var(--c-white) inset;
  caret-color: var(--c-black);
}
@media (max-width: 768px) {
  .field__textarea { resize: none; }
  /* 404 / error page h1 shrinks on mobile so it doesn't overflow */
  .error-page__inner h1 { font-size: var(--fs-5xl); line-height: 32px; }
  .error-page__inner > p { font-size: var(--fs-xl); line-height: var(--lh-ctl); }
}
/* Wrap all hover effects so they only fire on actual hover devices (mouse) —
   prevents sticky-hover on tap. */
@media (hover: none) {
  .nav__link:hover, .site-footer__link:hover, .chip:hover,
  .btn--white:hover, .btn--black:hover,
  .btn--black--sm:hover, .btn--black--xs:hover, .btn--outline:hover, .btn--secondary:hover,
  .btn--danger:hover, .btn--icon:hover, .text-link:hover, .inline-link:hover,
  .app-row__copy:hover, .pay-row__menu:hover, .pay-add:hover,
  .popover button:hover, .modal__close:hover, .app-preview__see-more:hover,
  .app-detail__back:hover, .system-info__copy:hover, .meta-row a:hover,
  .list-item:hover, .tab:hover, .cal-day:hover,
  .snackbar--undo .snackbar__action:hover { opacity: 1; }
}

/* Signin/error mobile top-anchor — placed at file end so it wins source order */
@media (max-width: 768px) {
  .signin-page {
    justify-content: flex-start;
    padding-top: 96px;
  }
  .error-page {
    justify-content: flex-start;
    padding-top: 96px;
  }
}