/* GENERATED by tools/build_pages.py — do not edit.
   Source: the inline <style> blocks of public/ja/kr/index.html (identical in
   all three locales apart from comments) plus the plan-detail layout. */

/* ux-center: tokens */
/* ============================================================
   GLOCALNET UX Center — CORE TOKENS (brand-neutral)
   모든 플랫폼 웹/상품페이지의 단일 정본. 색 정체성(brand primary/accent)만
   brands/*.css 오버레이로 분리. 이 파일의 토큰 외 하드코딩 금지.
   ============================================================ */

:root {
  /* ---------- Type family ----------
     글로벌 eSIM 커머스 톤: 기하학적/그로테스크 산세리프. 국문 Pretendard, 영문 Inter 계열. */
  --font-sans: 'Pretendard', 'Inter', 'Montserrat', 'Noto Sans JP',
               'Noto Sans TC', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);        /* 헤드라인도 동일 패밀리, weight로 대비 */
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ---------- Type scale (fluid, clamp: mobile → desktop) ----------
     대비가 큰 스케일이 premium. 헤드라인 tight, body 넉넉. */
  --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 3.75rem);  /* 40 → 60 */
  --fs-h1:      clamp(2rem,   1.4rem + 2.8vw, 3rem);     /* 32 → 48 */
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.9vw, 2.25rem);  /* 25.6 → 36 */
  --fs-h3:      clamp(1.35rem,1.1rem + 1.1vw, 1.75rem);  /* 21.6 → 28 */
  --fs-h4:      1.375rem;   /* 22 */
  --fs-lead:    1.25rem;    /* 20  인트로 문단 */
  --fs-body:    1.0625rem;  /* 17  본문 기본 (15px 미만 금지) */
  --fs-body-sm: 0.9375rem;  /* 15 */
  --fs-caption: 0.8125rem;  /* 13 */
  --fs-overline:0.75rem;    /* 12  overline/label */

  --lh-tight: 1.08;   /* display/h1 */
  --lh-head:  1.18;   /* h2-h4 */
  --lh-body:  1.65;   /* 본문 — 넉넉하게 */
  --lh-snug:  1.4;

  --tracking-tight:  -0.02em;  /* 큰 헤드라인 */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* overline UPPERCASE */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;   /* display */

  /* ---------- Spacing scale (4px base) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10:2.5rem;    /* 40 */
  --space-12:3rem;      /* 48 */
  --space-16:4rem;      /* 64 */
  --space-20:5rem;      /* 80  섹션 패딩 최소 */
  --space-24:6rem;      /* 96 */
  --space-30:7.5rem;    /* 120 섹션 패딩 넉넉 */
  --space-40:10rem;     /* 160 */

  /* 섹션 세로 리듬 (fluid) */
  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);   /* 56 → 120 */

  /* ---------- Layout ---------- */
  --container:       1200px;   /* 기본 콘텐츠 폭 */
  --container-wide:  1320px;
  --container-read:  720px;    /* 긴 본문 가독 폭 */
  --gutter:          var(--space-6);   /* 24 */
  --page-pad:        clamp(1rem, 0.5rem + 2.5vw, 2rem);  /* 좌우 여백 16 → 32 */

  /* ---------- Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;    /* 버튼·인풋 */
  --radius-md: 12px;   /* 카드 */
  --radius-lg: 16px;   /* 큰 카드·미디어 */
  --radius-xl: 24px;   /* 히어로 패널 */
  --radius-pill: 999px;

  /* ---------- Elevation (soft, low-opacity — 어두운 하드 그림자 금지) ---------- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-sm: 0 2px 6px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 6px 16px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04);
  --shadow-lg: 0 14px 36px rgba(16,24,40,0.10), 0 4px 8px rgba(16,24,40,0.05);
  --shadow-xl: 0 28px 64px rgba(16,24,40,0.14);
  --ring: 0 0 0 4px var(--accent-ring);   /* 포커스/선택 링 */

  /* ---------- Neutral ramp (cool slate — 순수 흑/회색 금지) ---------- */
  --ink-900: #0B1220;  /* 헤드라인·최강 텍스트 (순수 #000 금지) */
  --ink-800: #111A2E;
  --ink-700: #1E2A44;
  --ink-600: #334155;  /* 본문 텍스트 */
  --ink-500: #475569;
  --ink-400: #64748B;  /* muted 텍스트 */
  --ink-300: #94A3B8;
  --ink-200: #CBD5E1;  /* 보더 */
  --ink-100: #E2E8F0;
  --ink-50:  #F1F5F9;  /* 옅은 surface */
  --paper:   #FFFFFF;  /* 카드 배경 */
  --canvas:  #F8FAFC;  /* 페이지 배경 (순백보다 살짝 낮춤) */

  /* ---------- Semantic ---------- */
  --success: #12B76A;  --success-tint: #E7F8EF;
  --warning: #F79009;  --warning-tint: #FEF4E6;
  --danger:  #F04438;  --danger-tint:  #FEECEB;
  --info:    var(--accent);

  /* ---------- Accent (brands/*.css 가 덮어씀 — 아래는 안전 폴백: confident indigo) ---------- */
  --accent:        #4F46E5;
  --accent-600:    #4338CA;   /* hover */
  --accent-700:    #3730A3;   /* active */
  --accent-tint:   #EEF2FF;   /* 옅은 배경 */
  --accent-ring:   rgba(79,70,229,0.28);
  --accent-contrast:#FFFFFF;  /* accent 위 텍스트 */

  /* ---------- Dark hero surface (다크 히어로 = 기본 패턴) ---------- */
  --hero-bg:   #0B1220;
  --hero-bg-2: #131C33;   /* 그라디언트 두 번째 스톱 */
  --hero-text: #F8FAFC;
  --hero-muted:#94A3B8;
  /* 히어로 지면 위의 선/면. 다크 기본에서는 흰색 알파, 라이트 히어로를 쓰는
     브랜드는 잉크 알파로 덮어쓴다 — 하드코딩된 rgba(255,255,255,…) 대체. */
  --hero-line: rgba(255,255,255,0.16);
  --hero-line-strong: rgba(255,255,255,0.28);
  --hero-fill: rgba(255,255,255,0.06);
  --hero-fill-strong: rgba(255,255,255,0.10);

  /* ---------- Motion (subtle, ease-out) ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;

  /* ---------- Z ---------- */
  --z-header: 100;  --z-dropdown: 200;  --z-modal: 400;  --z-toast: 500;
}

/* 접근성: 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ux-center: brands */
/* ============================================================
   GLOCALNET UX Center — BRAND OVERLAYS
   코어(system/tokens.css)를 먼저 로드한 뒤 이 파일을 로드.
   <html data-brand="..."> 로 색 정체성만 전환. 코어(타입/간격/radius/모션)는 공유.

   사용:
     <link rel="stylesheet" href=".../system/tokens.css">
     <link rel="stylesheet" href=".../brands/brands.css">
     <html data-brand="esim-portal"> ...

   ⚠️ GLOCAL 브랜드 accent 는 PROVISIONAL(잠정) — 사용자 확정 전 임시값이다.
      확정 시 이 파일만 수정하면 전 페이지에 반영된다. (CHARTER §원칙 5)
   ============================================================ */

/* ---------- GLOCAL 계열 (PROVISIONAL — 확정 필요) ---------- */

/* esim-portal 외부고객 포털 계열 — 신뢰감 있는 블루 (잠정) */
[data-brand="esim-portal"] {
  --accent: #2563EB;  --accent-600: #1D4ED8;  --accent-700: #1E40AF;
  --accent-tint: #EFF4FF;  --accent-ring: rgba(37,99,235,0.28);  --accent-contrast: #FFFFFF;
  --hero-bg: #0A1024;  --hero-bg-2: #14213F;
}

/* achikochi eSIM (JP 신상품) — 여행 감성의 티얼/시안 (잠정) */
[data-brand="achikochi"] {
  --accent: #0EA5A4;  --accent-600: #0B8281;  --accent-700: #0A6867;
  --accent-tint: #E6F7F7;  --accent-ring: rgba(14,165,164,0.28);  --accent-contrast: #FFFFFF;
  --hero-bg: #06201F;  --hero-bg-2: #0C2E2D;
}

/* wsm 도매 포털 / pds / was (B2B) — 절제된 인디고 (잠정) */
[data-brand="glocal-b2b"] {
  --accent: #4F46E5;  --accent-600: #4338CA;  --accent-700: #3730A3;
  --accent-tint: #EEF2FF;  --accent-ring: rgba(79,70,229,0.28);  --accent-contrast: #FFFFFF;
  --hero-bg: #0B1220;  --hero-bg-2: #171F3A;
}

/* skyblue eSIM (잠정) */
[data-brand="skyblue"] {
  --accent: #0284C7;  --accent-600: #0369A1;  --accent-700: #075985;
  --accent-tint: #E7F4FC;  --accent-ring: rgba(2,132,199,0.28);  --accent-contrast: #FFFFFF;
  --hero-bg: #05192B;  --hero-bg-2: #0A2740;
}

/* ---------- NEXTM 커머스 계열 ---------- */

/* NX MOBILE (esim-shop.kr / SKT eSIM 해외직판) — 기존 CI 보라 #6C4DF6 */
[data-brand="nx-mobile"] {
  --accent: #6C4DF6;  --accent-600: #5A3EE0;  --accent-700: #4A32C0;
  --accent-tint: #F0EDFF;  --accent-ring: rgba(108,77,246,0.28);  --accent-contrast: #FFFFFF;
  /* 라이트 히어로 — ux-center PRINCIPLES 의 "다크 히어로 = 기본 패턴"에 대한
     브랜드 예외. 근거: 일본 통신/EC 지면에서 다크는 "説明不足·불친절"로 읽히고,
     경쟁사(esim-san.jp 등 한국 eSIM 일본 판매)에 다크 밴드가 하나도 없다.
     2026-07-27 ma2414 확정("너무 어두워요" -> 라이트 전환). 전역 기본은 그대로. */
  --hero-bg: var(--paper);  --hero-bg-2: var(--accent-tint);
  --hero-text: var(--ink-900);  --hero-muted: var(--ink-500);
  --hero-line:        color-mix(in srgb, var(--ink-900) 10%, transparent);
  --hero-line-strong: color-mix(in srgb, var(--ink-900) 18%, transparent);
  --hero-fill:        color-mix(in srgb, var(--ink-900)  3%, transparent);
  --hero-fill-strong: color-mix(in srgb, var(--ink-900)  6%, transparent);
}

/* ---------- NEXT GROUP 5사이트 ----------
   색 정본은 glocalnet/files/NEXT_GROUP_web_handoff_v2/handoff/tokens.css.
   여기서는 UX 센터 코어 위에서 그 accent 만 재현(참조용). 정식 작업 시 원본 tokens.css 편입.
   navy #051546(primary) / blue #2E6BFF(link) — NEXT GROUP 전용 팔레트. */
[data-brand="nxt-m"]      { --accent: #F7941D; --accent-600:#D97D12; --accent-700:#B5680E; --accent-tint:#FEF1E1; --accent-ring:rgba(247,148,29,0.28); --accent-contrast:#FFFFFF; }
[data-brand="nx-connect"] { --accent: #00C2FF; --accent-600:#00A6DB; --accent-700:#0088B4; --accent-tint:#E0F7FF; --accent-ring:rgba(0,194,255,0.28); --accent-contrast:#052235; }
[data-brand="nxt-rental"] { --accent: #8CC63F; --accent-600:#76A934; --accent-700:#5F8A2A; --accent-tint:#F0F8E4; --accent-ring:rgba(140,198,63,0.28); --accent-contrast:#0F1F05; }
[data-brand="mobile-jp"]  { --accent: #E5484D; --accent-600:#C93A3F; --accent-700:#A72E32; --accent-tint:#FDECEC; --accent-ring:rgba(229,72,77,0.28); --accent-contrast:#FFFFFF; }

/* ux-center: components */
/* ============================================================
   GLOCALNET UX Center — COMPONENT PRIMITIVES
   tokens.css + brands.css 다음에 로드. eSIM 커머스 상품/체크아웃 페이지용
   바로 쓰는 컴포넌트. 세션은 이 클래스를 조합하고, 값은 토큰으로만 조정한다.
   ============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-600);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { color: var(--ink-900); margin: 0 0 var(--space-4); font-weight: var(--fw-bold); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-head); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-head); }
p  { margin: 0 0 var(--space-4); }
a  { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-600); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--page-pad); }
.container--wide { max-width: var(--container-wide); }
.container--read { max-width: var(--container-read); }
/* 섹션 패딩을 토큰 기본(56~120px)에서 이 사이트만 줄인다. 내용 밀도가 낮은
   상태에서 최대 패딩을 쓰면 여백이 premium 이 아니라 공백이 된다. */
.section { padding-block: clamp(3rem, 1.8rem + 5vw, 5.5rem); }
.stack > * + * { margin-top: var(--space-4); }
.grid { display: grid; gap: var(--gutter); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px)  { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Overline / eyebrow ---------- */
.overline {
  display: inline-block; font-size: var(--fs-overline); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
  padding: 0.875rem 1.5rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  text-decoration: none; line-height: 1;
}
.btn--primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-600); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn--primary:active { background: var(--accent-700); transform: translateY(0); }
.btn--secondary { background: var(--paper); color: var(--ink-800); border-color: var(--ink-200); }
.btn--secondary:hover { border-color: var(--ink-300); background: var(--ink-50); }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-tint); }
.btn--lg { padding: 1.0625rem 2rem; font-size: var(--fs-body); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- Card ---------- */
.card {
  background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-md);
  padding: var(--space-6); transition: box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: transparent; }

/* ---------- Plan / price card (eSIM 커머스 핵심) ---------- */
.plan-card {
  position: relative; background: var(--paper); border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.plan-card:hover { border-color: var(--ink-200); box-shadow: var(--shadow-md); }
.plan-card--selected, .plan-card--popular {
  border-color: var(--accent); box-shadow: var(--shadow-md), var(--ring);
}
.plan-card__badge {
  position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-6);
  background: var(--accent); color: var(--accent-contrast);
  font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; padding: 0.375rem 0.75rem; border-radius: var(--radius-pill);
}
.plan-card__data  { font-size: var(--fs-h2); font-weight: var(--fw-extra); color: var(--ink-900); line-height: 1; }
.plan-card__meta  { font-size: var(--fs-body-sm); color: var(--ink-400); }
.plan-card__price { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--ink-900); }
.plan-card__price small { font-size: var(--fs-body-sm); font-weight: var(--fw-regular); color: var(--ink-400); }
.plan-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.plan-card__list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-body-sm); }

/* ---------- Tag / pill ---------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-caption); font-weight: var(--fw-medium); padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill); background: var(--ink-50); color: var(--ink-600);
}
.tag--accent  { background: var(--accent-tint); color: var(--accent-700); }
.tag--success { background: var(--success-tint); color: var(--success); }

/* ---------- Hero (다크 = 기본 패턴) ---------- */
.hero {
  background: linear-gradient(150deg, var(--hero-bg), var(--hero-bg-2));
  color: var(--hero-text); border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem);
}
.hero h1 { color: var(--hero-text); }
.hero p  { color: var(--hero-muted); font-size: var(--fs-lead); max-width: 46ch; }
.hero .overline { color: var(--accent); }

/* ---------- Trust bar (신뢰 신호) ---------- */
.trust-bar { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.trust-bar__item { display: flex; flex-direction: column; }
.trust-bar__num  { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--ink-900); }
.trust-bar__label{ font-size: var(--fs-caption); color: var(--ink-400); }

/* ---------- Divider ---------- */
.hr { border: 0; border-top: 1px solid var(--ink-100); margin-block: var(--space-8); }


  /* ===== 페이지 고유 조합 — 값은 전부 tokens.css 토큰 ===== */
  :root {
    /* SK telecom 코퍼레이트 레드 — 시스템 accent가 아닌 제3자 벤더 브랜드 컬러 참조.
       값 출처: nextm-commerce storefront 기존 --sktred(#EA002C). 임의 색 아님. */
    --skt-red: #EA002C;
  }

  /* ---------- Header : 다크 히어로와 이어지는 persistent dark nav ---------- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: color-mix(in srgb, var(--hero-bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
            backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--hero-line);
  }
  .site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    padding-block: var(--space-4);
  }
  .brandmark { display: flex; align-items: center; gap: var(--space-3); }
  .brandmark img { height: 28px; display: block; }
  .brandmark span {
    font-weight: var(--fw-extra); font-size: 1.0625rem; letter-spacing: -0.01em;
    color: var(--hero-text);
  }
  .nav { display: flex; gap: var(--space-8); align-items: center; }
  .nav__links { display: flex; gap: var(--space-6); }
  .nav__links a { color: var(--hero-muted); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); }
  .nav__links a:hover { color: var(--hero-text); }
  @media (max-width: 760px) { .nav__links { display: none; } }
  /* 히어로 지면 위의 secondary 버튼. 지면이 밝든 어둡든 --hero-* 를 따른다. */
  .btn--on-dark {
    background: transparent; color: var(--hero-text);
    border: 1px solid var(--hero-line-strong);
  }
  .btn--on-dark:hover { background: var(--hero-fill-strong); border-color: var(--hero-text); }

  /* ---------- Hero : 라이트 2열 (좌 카피·가격·CTA / 우 상품 이미지) ----------
     중앙정렬 다크 슬래브에서 바꿨다. 일본 EC 관행은 최상단에서 "무엇을 얼마에
     사는가"가 보이는 것이다(esim-san.jp: 상품 이미지 + 가격 + 선택 UI 가 히어로).
     여기서는 정적 페이지라 선택 UI 대신 가격 앵커 + 플랜으로 보내는 CTA 를 둔다. */
  /* 밝은 대낮 서울 파노라마를 히어로 하단에 깐다. 다크로 돌아가지 않으면서
     "여행 상품"이 보이게 하는 방법. 사진 위쪽이 파란 하늘이라 흰 지면과 자연스럽게
     이어지고, 텍스트가 앉는 상단 절반은 흰색 그라디언트로 지켜 대비를 확보한다.
     원본 = Adobe Stock 355108482(라이선스 완료). assets-src/seoul-panorama.jpg. */
  .hero-band {
    position: relative; overflow: hidden;
    padding-block: clamp(2.25rem, 1.5rem + 3.5vw, 4rem) clamp(8rem, 4rem + 14vw, 15rem);
    border-bottom: 1px solid var(--hero-line);
    background: linear-gradient(168deg, var(--hero-bg-2) 0%, var(--hero-bg) 62%);
  }
  /* 사진은 배경 레이어가 아니라 높이가 정해진 밴드로 둔다. 배경 레이어(100% auto)로
     깔았더니 뷰포트마다 사진 높이가 제멋대로 바뀌어, 태블릿에서는 리드 문단이
     도시 위에 얹히고 모바일에서는 90px 띠로 눌렸다. 높이를 clamp 로 묶고 위쪽을
     마스크로 흐리게 지우면 어느 폭에서도 텍스트 지면과 사진 지면이 겹치지 않는다. */
  .hero-band::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
    height: clamp(180px, 26vw, 380px);
    background: url("/assets/seoul-panorama.webp") center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
  }
  .hero-grid {
    position: relative; z-index: 1;
    /* 카피 칼럼이 좁으면(1.05fr = 557px) 60px 헤드라인이 한 줄에 9자밖에 못 담아
       일본어 문절이 어디서든 어색하게 끊긴다. 카피 쪽에 폭을 더 준다. */
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-12); align-items: start;
  }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
  .hero-copy { min-width: 0; }
  .badge-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
  .badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--fs-caption); font-weight: var(--fw-semibold);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
    border: 1px solid var(--hero-line); color: var(--hero-text); background: var(--hero-fill);
  }
  .badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--skt-red); flex: none; }
  .hero-band h1, .hero-band .hero-h {
    color: var(--hero-text); font-size: var(--fs-display); font-weight: var(--fw-extra);
    line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4);
  }
  /* 900px 이하에서 그리드가 1열로 접히는데 --fs-display 는 834px 에서 이미 최대치(60px)라
     헤드라인만 전폭으로 남아 리드·상품 카드와 크기가 어긋났다. 1열 구간은 한 단 낮춘다. */
  @media (max-width: 900px) { .hero-band h1, .hero-band .hero-h { font-size: var(--fs-h1); } }
  /* 하드 <br> 대신 문절 단위 nowrap. <br> 는 어느 폭에서도 같은 자리를 강제해
     모바일에서 "で。" 만 셋째 줄에 떨어뜨렸다. auto-phrase 미지원 브라우저까지 덮는다. */
  .hero-band h1 .nw, .hero-band .hero-h .nw { white-space: nowrap; }
  .hero-band h1 .accent-grad, .hero-band .hero-h .accent-grad { color: var(--accent-700); }
  /* 리드는 히어로에서만 유동 크기다. --fs-lead 는 20px 고정이라 모바일에서 헤드라인이
     줄어든 뒤에도 20px 로 남아 대비가 무너졌다. 좁은 폭에서는 본문 크기로 내린다.
     語中 절단("QRを読むだ|け。")은 h1 과 같은 word-break: auto-phrase 로 막는다 —
     리드에는 빠져 있어서 실제로 그렇게 끊기고 있었다. */
  .hero-band .lead {
    color: var(--hero-muted); font-size: var(--fs-lead); max-width: 40ch;
    margin: 0 0 var(--space-8); word-break: auto-phrase; line-break: strict;
  }
  @media (max-width: 900px) { .hero-band .lead { max-width: 46ch; } }
  @media (max-width: 700px) { .hero-band .lead { font-size: var(--fs-body); } }

  /* 가격을 히어로에 — 경쟁사 지면은 예외 없이 최상단에 가격이 있다.
     한 줄 flex(15px 일수 + 48px 숫자 + 15px 괄호)로 두었더니 ①크기가 15→48→15 로 두 번
     튀고 ②flex-wrap 때문에 좁은 폭에서 세 토막으로 흩어졌으며 ③48px(--fs-h1)이 헤드라인
     60px(--fs-display)과 크기 경쟁을 했다. 라벨/금액/단서 3층으로 쌓고 금액을 --fs-h2 로
     낮춰 헤드라인 다음 위계에 앉힌다. */
  .price-anchor { display: grid; justify-items: start; gap: var(--space-2); margin: 0 0 var(--space-8); }
  .price-anchor__label {
    font-size: var(--fs-caption); font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide); color: var(--ink-500);
  }
  .price-anchor__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
  .price-anchor__value {
    color: var(--hero-text); font-weight: var(--fw-extra); font-size: var(--fs-h2);
    line-height: 1; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums;
  }
  .price-anchor__unit { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-left: var(--space-1); }
  .price-anchor__note { color: var(--hero-muted); font-size: var(--fs-body-sm); }


  /* 일본어·번체는 문자 사이 어디서나 줄이 끊긴다. auto-phrase 가 헤드라인과 히어로
     리드에만 걸려 있어 본문은 "サポ|ート" "プロファ|イル" 처럼 語中에서 끊기고 있었다
     (실측: 데스크톱 13건·태블릿 9건·모바일 16건). 본문 전체에 문절 단위 줄바꿈을 건다.
     text-wrap: pretty 는 마지막 줄에 한두 자만 남는 고아 줄("す。" "ん。")을 줄인다.
     [금지] text-wrap: balance — 줄 길이만 맞추느라 오히려 語中을 고른다. */
  p, li, dd, dt, summary, figcaption, th, td, .badge, .trust-bar__label, .spec-card__label {
    word-break: auto-phrase; line-break: strict; text-wrap: pretty;
  }

  /* ---------- 히어로 카피 로테이터 ----------
     히어로 메시지를 하나로 고정하지 않는다. 배지·헤드라인·리드를 한 세트로 묶어
     세트째 교체한다 — 소구 각도(체험의 순간 / 포켓와이파이 대체 / 처음이라도 안심)가
     서로 다른데 헤드라인 한 줄에 다 담으려 하면 어느 것도 서지 않기 때문이다.
     세 세트를 같은 그리드 셀에 겹쳐 두므로 칸 높이는 항상 가장 긴 세트에 맞춰지고,
     전환해도 아래 가격·CTA 가 움직이지 않는다(레이아웃 시프트 0).
     첫 세트만 <h1> 이고 나머지는 .hero-h — 한 페이지에 h1 은 하나로 둔다. */
  /* minmax(0,1fr) 없이는 nowrap 청크의 max-content 가 트랙을 밀어 올려
     카피 칼럼(593px)보다 넓어진다 — 실제로 헤드라인이 23px 넘쳤다. */
  .hero-rotator { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-slide {
    grid-area: 1 / 1; opacity: 0; visibility: hidden;
    transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  }
  .hero-slide[data-active] { opacity: 1; visibility: visible; }
  @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

  /* 자동으로 바뀌는 지면에는 되돌아갈 수단이 있어야 한다 — 없으면 사용자는
     읽던 문장이 사라진 것을 오작동으로 받아들인다. */
  .hero-dots { display: flex; gap: var(--space-2); margin: 0 0 var(--space-6); }
  .hero-dot {
    width: 28px; height: 4px; padding: 0; border: 0; cursor: pointer;
    border-radius: var(--radius-pill); background: var(--ink-200);
    transition: background var(--dur-base) var(--ease-out);
  }
  .hero-dot:hover { background: var(--ink-300); }
  .hero-dot[data-active] { background: var(--accent); }
  .hero-dot[data-active]:hover { background: var(--accent-600); }
  .hero-dot:focus-visible { outline: none; box-shadow: var(--ring); }

  .hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: 0; }
  /* 히어로 보조 버튼은 사진 위에 걸칠 수 있다 — 투명하면 좁은 폭에서 글자가
     도시 위에 얹혀 읽히지 않는다. 지면색으로 채워 어느 배경에서도 읽히게 한다. */
  .hero-cta .btn--on-dark { background: var(--hero-bg); box-shadow: var(--shadow-sm); }
  .hero-cta .btn--on-dark:hover { background: var(--hero-bg); border-color: var(--hero-text); box-shadow: var(--shadow-md); }

  .hero-art {
    display: block; position: relative; min-width: 0;
    /* 사진 위로 내려앉혀 겹친다. 카드가 흰 지면에 떠 있기만 하던 것을 고친다. */
    margin-bottom: clamp(-11rem, -3rem - 11vw, -4rem);
  }
  /* 1열이 되면 카드가 지면 전폭(834px 뷰포트에서 776px)까지 커져 첫 화면을 카드 하나가
     다 먹고 헤드라인이 스크롤 아래로 밀렸다. 폭을 묶고 가운데 세운다. */
  @media (max-width: 900px) {
    .hero-art { margin-bottom: calc(var(--space-4) * -1); max-width: 32rem; margin-inline: auto; }
  }
  .hero-art img { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .hero-art:hover img { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
  .hero-art:focus-visible { outline: none; }
  .hero-art:focus-visible img { box-shadow: var(--ring), var(--shadow-lg); }
  @media (prefers-reduced-motion: reduce) {
    .hero-art img, .hero-art:hover img { transition: none; transform: none; }
  }
  .hero-art img {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  }
  @media (max-width: 900px) { .hero-art { order: -1; } }

  /* ---------- Trust bar strip ---------- */
  /* 지면 전체가 회색으로 읽히던 것 — accent 면적을 늘리는 자리 하나가 여기다.
     히어로(사진) 바로 아래에서 색 띠 하나가 리듬을 끊어준다. */
  .trust-strip { background: var(--accent-tint); border-bottom: 1px solid var(--ink-100); }
  .trust-strip .trust-bar { justify-content: center; gap: var(--space-16); padding-block: var(--space-10); }
  .trust-strip .trust-bar__num { font-size: var(--fs-h2); color: var(--accent-700); letter-spacing: var(--tracking-tight); }
  .trust-strip .trust-bar__label { color: var(--ink-500); }
  .trust-strip .trust-bar__item { align-items: center; text-align: center; }
  @media (max-width: 700px) { .trust-strip .trust-bar { gap: var(--space-8) var(--space-10); } }

  /* ---------- Section heading helper ---------- */
  .section-head { text-align: center; max-width: var(--container-read); margin-inline: auto; margin-bottom: var(--space-10); }
  /* 일본어·번체는 문자 사이 어디서나 줄이 끊긴다. 좁은 칼럼에서 그대로 두면
     "他社ローミングと|は、" "データだけじゃな|い。" 처럼 語中에서 접힌다.
     text-wrap: balance 는 오히려 나쁜 지점을 고른다(줄 길이만 맞추므로).
     word-break: auto-phrase 가 文節 경계로 끊는다 — 이 용도의 정답.
     미지원 브라우저는 무시하므로 기존 동작 그대로다. */
  /* 헤드라인도 마지막 줄에 한 글자만 남는 고아가 생긴다(번체 실측: 案 / 質。 / 定。).
     pretty 는 마지막 줄만 손보므로 balance 와 달리 語中을 고르지 않는다. */
  .section-head h2, .split__head h2, .hero-band h1, .hero-band .hero-h, .panel h2 {
    word-break: auto-phrase; line-break: strict; text-wrap: pretty;
  }

  /* ---------- Plan cards : 일수 강조 ---------- */
  .plan-card__days { font-size: var(--fs-h1); font-weight: var(--fw-extra); color: var(--ink-900); line-height: 1; }
  .plan-card__days small { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--ink-400); margin-left: var(--space-1); }
  .plan-card__perday { font-size: var(--fs-caption); color: var(--ink-400); }
  .plan-card__price-row { display: flex; align-items: baseline; gap: var(--space-2); margin-top: auto; }
  .plan-card__price-row .plan-card__price { font-size: var(--fs-h2); }
  .plan-card__list .icon--sm { width: 16px; height: 16px; margin-top: 2px; fill: var(--ink-700); }


  /* ---------- Pill row (対応エリア) ---------- */
  .pill-row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }

  /* ---------- Muted footnote (電話番号 주의사항 등) ---------- */
  .note-muted { text-align: center; color: var(--ink-400); font-size: var(--fs-caption); margin-top: var(--space-8); }

  /* ---------- Inline code chip (*#06# 등) ---------- */
  .kbd {
    font-family: var(--font-mono); font-size: 0.9em; color: var(--ink-700);
    background: var(--ink-50); padding: 0.15em 0.5em; border-radius: var(--radius-xs);
  }

  /* ---------- Split : 좌 제목 / 우 세로 항목 ----------
     "가운데 제목 + 3열 카드"가 6연속이던 것을 끊는 형태. 제목이 왼쪽에 서고
     항목이 오른쪽에 쌓이면 같은 내용이라도 스크롤 리듬이 달라진다. */
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-10) var(--space-16); align-items: center; }
  @media (max-width: 900px) { .split { align-items: start; } }
  @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
  .split__head { max-width: 40ch; }
  .split__head h2 { margin-bottom: var(--space-4); }
  .split__head p { color: var(--ink-500); margin: 0; }
  .split__list { display: flex; flex-direction: column; gap: var(--space-8); }
  .split-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .split-item__icon {
    width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-tint);
    display: grid; place-items: center; flex: none;
  }
  .split-item__icon .icon { width: 22px; height: 22px; fill: var(--accent-700); stroke: var(--accent-700); }
  .split-item h4 { margin: 0 0 var(--space-2); }
  .split-item p { color: var(--ink-500); margin: 0; }

  /* ---------- Panel : 강조 지면 (韓国の電話番号) ----------
     이 제품의 차별점은 "번호가 붙는다"는 것이라, 다른 섹션과 같은 흰 지면에
     두지 않고 accent-tint 패널로 한 단 올린다. */
  .panel {
    background: var(--accent-tint); border-radius: var(--radius-xl);
    padding: clamp(var(--space-10), 5vw, var(--space-16));
  }
  .panel .split__head p, .panel .split-item p { color: var(--ink-600); }
  .panel .split-item__icon { background: var(--paper); }
  .panel .note-muted { text-align: left; margin-top: var(--space-8); color: var(--ink-500); }

  /* ---------- Steps : 폰 목업 비주얼 ----------
     문자만 있던 3스텝에 시각물을 붙인다(Trello #133). OS 설정 화면을 흉내내지
     않는다 — 실제 화면과 달라지면 그 자체가 허위 안내가 된다. 토큰으로 그린
     도식이라 로케일·브랜드가 바뀌어도 어긋나지 않는다. */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  @media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } }
  .step { text-align: left; }
  .step__art {
    background: var(--accent-tint); border: 1px solid var(--accent-tint); border-radius: var(--radius-lg);
    display: grid; place-items: center; padding: var(--space-8); margin-bottom: var(--space-6);
    aspect-ratio: 4 / 3;
  }
  .step__art svg { width: 100%; height: 100%; max-width: 190px; display: block; }
  .step__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
  .step__n {
    width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--accent);
    color: var(--accent-contrast); font-weight: var(--fw-bold); display: grid; place-items: center;
    font-size: var(--fs-caption); flex: none;
  }
  .step__head h4 { margin: 0; }
  .step p { color: var(--ink-500); margin: 0; }

  /* 3스텝 아래 보조 노트 — 삭제한 "eSIMとは" 섹션의 문구가 여기로 왔다. */
  .step-notes {
    list-style: none; margin: var(--space-12) 0 0; padding: var(--space-8) 0 0;
    border-top: 1px solid var(--ink-100);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-10);
  }
  @media (max-width: 900px) { .step-notes { grid-template-columns: minmax(0, 1fr); } }
  .step-notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
  .step-notes .icon { width: 18px; height: 18px; margin-top: 3px; flex: none; fill: var(--accent-700); stroke: var(--accent-700); }
  .step-notes b { display: block; color: var(--ink-900); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
  .step-notes span { color: var(--ink-500); font-size: var(--fs-body-sm); line-height: var(--lh-body); }

  /* 韓国旅 밴드에 흡수한 利用シーン 라벨 */
  .scene-pills { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }
  .scene-pills + .compare-footnote { margin-top: var(--space-4); }

  /* ---------- Comparison table ---------- */
  .compare-wrap { position: relative; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--ink-100); }
  @media (max-width: 672px) {
    .compare-wrap::after {
      content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: var(--space-8);
      background: linear-gradient(90deg, transparent, var(--paper)); pointer-events: none;
    }
  }
  table.compare { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--paper); }
  table.compare th, table.compare td {
    padding: var(--space-4) var(--space-5); text-align: left; font-size: var(--fs-body-sm);
    border-bottom: 1px solid var(--ink-100); white-space: nowrap;
  }
  table.compare th { color: var(--ink-400); font-weight: var(--fw-semibold); font-size: var(--fs-caption);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; }
  table.compare td:first-child, table.compare th:first-child { color: var(--ink-500); white-space: normal; }
  table.compare tbody tr:last-child td { border-bottom: none; }
  table.compare .col-us { background: var(--accent-tint); font-weight: var(--fw-semibold); color: var(--ink-900); }
  table.compare th.col-us { background: var(--accent); color: var(--accent-contrast); }
  .compare-footnote { color: var(--ink-400); font-size: var(--fs-caption); margin-top: var(--space-3); }


  /* ---------- Travel image band ---------- */
  .gallery-figure { margin: 0; }
  /* 원본이 세로 사진(860x1075)이라 4/3 으로 자르면 대부분을 버리고 작아진다.
     3/4 로 되돌리면 같은 폭에서 사진 면적이 2배가 된다 — "사진이 없다"의 절반은
     사진이 작았던 탓이다. */
  .gallery-figure img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-lg);
    display: block; box-shadow: var(--shadow-md);
  }
  .gallery-figure figcaption { margin-top: var(--space-3); font-size: var(--fs-body-sm); color: var(--ink-500); text-align: center; }


  /* ---------- FAQ ---------- */
  .faq details { border-top: 1px solid var(--ink-100); padding-block: var(--space-5); }
  .faq details:first-child { border-top: none; }
  .faq details summary {
    cursor: pointer; font-weight: var(--fw-semibold); color: var(--ink-900); list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  }
  .faq details summary::-webkit-details-marker { display: none; }
  .faq details summary .chev { flex: none; stroke: var(--ink-400); transition: transform var(--dur-base) var(--ease-out); }
  .faq details[open] summary .chev { transform: rotate(180deg); }
  .faq details p { margin-top: var(--space-3); margin-bottom: 0; color: var(--ink-500); }

  /* ---------- ご利用条件 (footer 앞 compact band) ---------- */
  .terms-list { list-style: none; margin: 0; padding: 0; }
  .terms-list li {
    display: flex; align-items: flex-start; gap: var(--space-3);
    color: var(--ink-600); font-size: var(--fs-body-sm); line-height: var(--lh-body);
    padding-block: var(--space-2);
  }
  .terms-list li::before {
    content: ""; width: 6px; height: 6px; margin-top: 0.6em; border-radius: 50%;
    background: var(--ink-300); flex: none;
  }

  /* ---------- Final CTA band ---------- */
  /* 히어로가 라이트가 되면서 페이지에 어두운 지면이 하나도 없어졌다. 종결감은
     accent 밴드로 준다 — 검정이 아니라 브랜드 색이라 "어둡다"로 읽히지 않는다. */
  .cta-band {
    background: linear-gradient(150deg, var(--accent) 0%, var(--accent-700) 100%);
    border-radius: var(--radius-xl);
    padding: var(--section-y) var(--page-pad); text-align: center;
  }
  .cta-band h2 { color: var(--accent-contrast); margin-bottom: var(--space-3); }
  .cta-band p { color: color-mix(in srgb, var(--accent-contrast) 80%, transparent); max-width: 40ch; margin-inline: auto; }
  .cta-band .btn--primary {
    background: var(--accent-contrast); color: var(--accent-700); border-color: var(--accent-contrast);
  }
  .cta-band .btn--primary:hover { background: color-mix(in srgb, var(--accent-contrast) 92%, var(--accent)); }

  /* ---------- Footer ---------- */
  .site-footer { background: var(--paper); border-top: 1px solid var(--ink-100); }
  .site-footer .container { padding-block: var(--space-12); display: flex; flex-direction: column; gap: var(--space-8); }
  .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); flex-wrap: wrap; }
  .footer-brand { display: flex; align-items: center; gap: var(--space-3); }
  .footer-brand img { height: 24px; }
  .footer-brand span { font-weight: var(--fw-bold); color: var(--ink-900); font-size: var(--fs-body); }
  .footer-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
  .footer-links a { color: var(--ink-500); font-size: var(--fs-body-sm); }
  .footer-links a:hover { color: var(--ink-900); }
  .footer-bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
    color: var(--ink-400); font-size: var(--fs-caption); border-top: 1px solid var(--ink-100); padding-top: var(--space-6);
  }

  /* ---------- Footer: 決済ブランド (Eximbay 審査要件) ---------- */
  .footer-payment__label {
    display: block; font-size: var(--fs-caption); color: var(--ink-400); margin-bottom: var(--space-3);
  }
  .footer-payment__icons { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
  /* 결제 브랜드 배지: 브랜드 인식색을 인라인 SVG 속성으로 직접 지정(모노톤 강제 금지). 크기/정렬만 CSS로. */
  .pay-badge { height: 26px; width: auto; flex: none; }
  .pay-badge text { font-family: var(--font-sans); }

  /* ---------- Footer: 事業者情報 (特商法・Eximbay 審査要件) ---------- */
  .footer-business { border-top: 1px solid var(--ink-100); padding-top: var(--space-8); }
  .footer-business__title {
    font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--ink-400);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; margin: 0 0 var(--space-4);
  }
  .footer-business dl {
    display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-6); row-gap: var(--space-3);
    margin: 0;
  }
  .footer-business dt {
    font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--ink-400); white-space: nowrap;
  }
  .footer-business dd {
    margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ink-600);
  }
  .footer-business a { color: inherit; text-decoration: underline; text-decoration-color: var(--ink-200); text-underline-offset: 2px; }
  .footer-business a:hover { color: var(--accent-700); text-decoration-color: currentColor; }
  @media (max-width: 600px) {
    .footer-business dl { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
    .footer-business dt { margin-top: var(--space-3); }
    .footer-business dt:first-child { margin-top: 0; }
  }

  /* == plan card media (tools/build_pages.py) == */
  .plan-card__media { display: block; margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
  .plan-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
    object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
  .plan-card__media:hover img { transform: scale(1.03); }
  @media (prefers-reduced-motion: reduce) {
    .plan-card__media img { transition: none; }
    .plan-card__media:hover img { transform: none; }
  }
  .plan-card__more { display: inline-block; margin-top: calc(var(--space-2) * -1);
    font-size: var(--fs-body-sm); color: var(--ink-500); text-decoration: none; text-align: center; }
  .plan-card__more:hover { color: var(--accent); text-decoration: underline; }

  /* == plan families (tools/build_pages.py) == */
  .plan-families { position: relative; }
  .plan-families > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .plan-tabs { display: flex; justify-content: center; gap: var(--space-2); width: fit-content;
    max-width: 100%; margin: 0 auto var(--space-8); padding: var(--space-1); background: var(--ink-50);
    border-radius: var(--radius-pill); }
  .plan-tab { display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); cursor: pointer;
    color: var(--ink-600); font-weight: var(--fw-semibold); line-height: 1.2; text-align: center;
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out); }
  .plan-tab:hover { color: var(--ink-900); }
  .plan-tab small { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--ink-400); }
  .plan-tab__name { display: inline-flex; align-items: center; gap: var(--space-2); }
  .plan-tab__tag { display: inline-block; padding: var(--space-1) var(--space-2);
    font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide);
    color: var(--accent-700); background: var(--accent-tint); border-radius: var(--radius-pill); vertical-align: middle; }
  #plan-family-lte:checked ~ .plan-tabs [for="plan-family-lte"],
  #plan-family-5g:checked ~ .plan-tabs [for="plan-family-5g"] { background: var(--paper); color: var(--ink-900); box-shadow: var(--shadow-sm); }
  #plan-family-lte:checked ~ .plan-tabs [for="plan-family-lte"] small,
  #plan-family-5g:checked ~ .plan-tabs [for="plan-family-5g"] small { color: var(--ink-600); }
  #plan-family-lte:focus-visible ~ .plan-tabs [for="plan-family-lte"],
  #plan-family-5g:focus-visible ~ .plan-tabs [for="plan-family-5g"] { box-shadow: var(--ring); }
  .plan-panel { display: none; }
  #plan-family-lte:checked ~ .plan-panel--lte, #plan-family-5g:checked ~ .plan-panel--5g { display: block; }
  .plan-panel__intro { text-align: center; color: var(--ink-500); margin: 0 0 var(--space-6); }
  @media (prefers-reduced-motion: reduce) { .plan-tab { transition: none; } }

/* ===== product detail page ===== */
/* The page opens on a dark band like the LP hero — a white page with a table on it
   read as unfinished (2026-07-27 review). */
.pdp-hero { position: relative; overflow: hidden; color: var(--hero-text);
  background: linear-gradient(150deg, var(--hero-bg), var(--hero-bg-2));
  padding-block: clamp(2rem, 1.4rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5rem); }
.pdp-hero .breadcrumb, .pdp-hero .breadcrumb a { color: var(--hero-muted); }
.pdp-hero .breadcrumb a:hover { color: var(--hero-text); }
.pdp-hero .breadcrumb li::after { color: var(--hero-line-strong); }
.pdp-grid { display: grid; gap: var(--space-8); align-items: center; margin-top: var(--space-6); }
@media (min-width: 900px) { .pdp-grid { grid-template-columns: 1.02fr 1fr; gap: var(--space-12); } }
.pdp-eyebrow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4); color: var(--hero-muted); font-size: var(--fs-body-sm); }
.pdp-title { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4); color: var(--hero-text);
  /* the name is a few short phrases joined by spaces ("韓国eSIM 5G データ無制限 3日間");
     wrap between them, never inside one (PRINCIPLES: 語中 분리 0) */
  word-break: keep-all; overflow-wrap: anywhere; }
.pdp-lead { color: var(--hero-muted); line-height: var(--lh-body); margin: 0 0 var(--space-6); max-width: 46ch; }
.pdp-price { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.pdp-price__amount { font-size: var(--fs-display); font-weight: var(--fw-extra); line-height: 1;
  letter-spacing: var(--tracking-tight); color: var(--hero-text); font-variant-numeric: tabular-nums; }
.pdp-price__tax { color: var(--hero-muted); font-size: var(--fs-body-sm); }
.pdp-perday { color: var(--hero-muted); font-size: var(--fs-body-sm); margin: var(--space-2) 0 var(--space-3); }
/* 「この日数で足りるか」に答える一行。CTA の下ではなく上に置く — 下だと買う人が読まない。 */
.pdp-note { color: var(--hero-muted); font-size: var(--fs-body-sm); line-height: var(--lh-body);
  margin: 0 0 var(--space-6); max-width: 46ch; }
.pdp-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.pdp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.pdp-chips li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption);
  color: var(--hero-text); background: var(--hero-fill-strong); border: 1px solid var(--hero-line);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); }
/* 16/9 exactly, because the plan image is no longer a photograph that can take an
   arbitrary crop — it is a composite whose day count, brand and SKT chip sit at the
   edges. A 4/3 cover crop ate "NX MOBILE" and the leading digit. */
.pdp-media { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
/* On phones the photo leads, as it does on every storefront app — price and CTA follow
   it, and the buy bar keeps the CTA reachable from there on. */
@media (max-width: 899px) {
  .pdp-media { order: 1; }
  .pdp-grid > div { order: 2; }
}

/* Six scannable facts instead of ten grey table rows. */
.spec-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (min-width: 760px) { .spec-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* four tiles (the 5G family states four facts) sit in one row on desktop, 2×2 below */
@media (min-width: 760px) { .spec-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec-card { background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-md);
  padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; }
.spec-card svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }
.spec-card__value { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ink-900); line-height: 1.2;
  word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
.spec-card__label { font-size: var(--fs-caption); color: var(--ink-400); }
/* 480px 미만에서는 2열 카드의 글자 자리가 119px 밖에 안 된다. 문절 단위로 묶인 값은
   그보다 넓어(ja 「韓国番号付き」 133px, en "Nationwide" 126px) 칸을 넘거나 語中에서
   끊긴다. 폰트를 줄이거나 문구를 깎는 대신 카드를 가로형으로 돌린다 — 아이콘 왼쪽,
   값·라벨 오른쪽. 글자 자리가 265px 로 늘어 값에도 문절 단위 줄바꿈이 성립한다.
   (PRINCIPLES #18 — 좁은 칸에 auto-phrase 를 걸 때는 min-content 를 먼저 잰다.) */
@media (max-width: 479px) {
  .spec-cards { grid-template-columns: minmax(0, 1fr); }
  .spec-card { grid-template-columns: auto minmax(0, 1fr); align-content: center;
    column-gap: var(--space-4); row-gap: var(--space-1); padding: var(--space-5) var(--space-6); }
  .spec-card svg { grid-row: span 2; align-self: center; }
}

/* Duration switcher — the storefront equivalent of an option selector. */
.switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 700px) { .switch-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.switch-family { text-align: center; margin-top: var(--space-6); font-size: var(--fs-body-sm); }
.switch-family a { color: var(--ink-600); }
.switch-family a:hover { color: var(--accent); }
.switch-item { display: flex; flex-direction: column; gap: var(--space-1); align-items: center;
  padding: var(--space-4) var(--space-2); border: 1.5px solid var(--ink-100); border-radius: var(--radius-md);
  background: var(--paper); text-decoration: none; text-align: center;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.switch-item:hover { border-color: var(--ink-300); box-shadow: var(--shadow-sm); }
.switch-item__days { font-size: var(--fs-h4); font-weight: var(--fw-extra); color: var(--ink-900); line-height: 1; }
.switch-item__price { font-size: var(--fs-caption); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.switch-item[aria-current="page"] { border-color: var(--accent); background: var(--accent-tint); }
.switch-item[aria-current="page"] .switch-item__price { color: var(--accent-700); }

/* Spec + terms side by side so the legal detail does not eat 900px of scroll. */
.spec-cols { display: grid; gap: var(--space-12); }
@media (min-width: 900px) { .spec-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } }
.spec-cols h3 { font-size: var(--fs-h4); margin: 0 0 var(--space-2); color: var(--ink-900); }
.spec-cols .note { color: var(--ink-500); font-size: var(--fs-body-sm); margin: 0 0 var(--space-5); }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.spec-table th, .spec-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--ink-100); line-height: var(--lh-body); }
.spec-table th { width: 38%; font-weight: var(--fw-semibold); color: var(--ink-600); }
.spec-table td { color: var(--ink-700); }
@media (max-width: 560px) {
  .spec-table th, .spec-table td { display: block; width: auto; border-bottom: 0; padding: 0 0 var(--space-1); }
  .spec-table td { padding-bottom: var(--space-4); border-bottom: 1px solid var(--ink-100); }
}
.notes-list { margin: 0; padding-left: var(--space-5); color: var(--ink-600); font-size: var(--fs-body-sm);
  line-height: var(--lh-body); }
.notes-list li + li { margin-top: var(--space-2); }

/* Buy bar — slides in once the hero CTA scrolls away, on every viewport. */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--page-pad);
  background: var(--paper); border-top: 1px solid var(--ink-100); box-shadow: var(--shadow-lg);
  transform: translateY(110%); transition: transform var(--dur-base) var(--ease-out); }
.buybar--on { transform: none; }
.buybar__price { font-size: var(--fs-h4); font-weight: var(--fw-extra); color: var(--ink-900);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.buybar__tax { font-size: var(--fs-caption); color: var(--ink-500); }
.buybar .btn { margin-left: auto; }
@media (max-width: 899px) { .buybar .btn { flex: 1; max-width: 55%; } }
@media (min-width: 900px) { .buybar { justify-content: center; gap: var(--space-8); }
  .buybar > div { text-align: right; } .buybar .btn { margin-left: 0; } }
body { padding-bottom: 5.5rem; }
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }

.breadcrumb { font-size: var(--fs-caption); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.breadcrumb li::after { content: "/"; margin-left: var(--space-2); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ===== checkout / complete ===== */
.co-bar { background: var(--hero-bg); border-bottom: 1px solid var(--hero-line); }
.co-bar .container { display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-4); padding-bottom: var(--space-4); }
.co-brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none;
  color: var(--hero-text); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.co-brand img { height: 22px; width: auto; }
.co-back { color: var(--hero-muted); font-size: var(--fs-body-sm); text-decoration: none; }
.co-back:hover { color: var(--hero-text); }
.co-wrap { max-width: 34rem; margin-inline: auto; padding-inline: var(--page-pad); }
.co-main { padding: var(--space-10) 0 var(--space-16); }
.co-main h1 { font-size: var(--fs-h2); margin: 0 0 var(--space-2); }
.co-sub { color: var(--ink-500); font-size: var(--fs-body-sm); margin: 0 0 var(--space-6); }
.co-card { margin-bottom: var(--space-4); }
.co-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.co-item__name { display: block; font-weight: var(--fw-semibold); color: var(--ink-900); }
.co-item__desc { display: block; color: var(--ink-500); font-size: var(--fs-caption); }
.co-item__price { font-size: var(--fs-h3); font-weight: var(--fw-extra); color: var(--ink-900);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; display: block; }
.co-item__tax { color: var(--ink-500); font-size: var(--fs-caption); text-align: right; display: block; }
.co-label { display: block; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
  color: var(--ink-700); margin: var(--space-4) 0 var(--space-2); }
.co-input { width: 100%; font-family: inherit; font-size: var(--fs-body); padding: 0.75rem 0.875rem;
  border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: var(--paper);
  color: var(--ink-900); }
.co-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.co-hint { font-size: var(--fs-caption); color: var(--ink-500); margin: var(--space-2) 0 0; }
.co-submit { width: 100%; margin-top: var(--space-6); }
.co-submit:disabled { opacity: .55; cursor: default; }
.co-note { font-size: var(--fs-caption); color: var(--ink-500); text-align: center; margin: var(--space-3) 0 0; }
.co-msg { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm); }
.co-msg--info { background: var(--accent-tint); color: var(--accent-700); }
.co-msg--err { background: var(--danger-tint); color: var(--danger); }
.co-legal { font-size: var(--fs-caption); color: var(--ink-500); text-align: center; margin-top: var(--space-6); }
.co-legal a { color: var(--ink-500); text-decoration: underline; }
.co-foot { border-top: 1px solid var(--ink-100); padding: var(--space-6) 0; }
.co-foot .container { font-size: var(--fs-caption); color: var(--ink-400); text-align: center; }
.co-done { text-align: center; padding: var(--space-16) 0; }
.co-done__mark { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--accent);
  color: var(--accent-contrast); font-size: 28px; line-height: 56px; margin: 0 auto var(--space-6); }
.co-steps { text-align: left; margin: var(--space-6) 0 0; padding-left: var(--space-5);
  color: var(--ink-600); font-size: var(--fs-body-sm); }
.co-steps li + li { margin-top: var(--space-2); }

/* Checkout / complete share the product page's shell — a bare white form read as a
   different site at the very step where trust matters most (2026-07-27 review). */
.co-hero { background: linear-gradient(150deg, var(--hero-bg), var(--hero-bg-2));
  color: var(--hero-text); padding-block: var(--space-10) var(--space-12); }
.co-hero h1 { font-size: var(--fs-h2); color: var(--hero-text); margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-tight); }
.co-hero p { color: var(--hero-muted); margin: 0; max-width: 52ch; }
.co-steps-mini { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6);
  list-style: none; padding: 0; }
.co-steps-mini li { font-size: var(--fs-caption); color: var(--hero-muted);
  border: 1px solid var(--hero-line); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); }
.co-steps-mini li[aria-current="step"] { color: var(--hero-text); background: var(--hero-fill-strong);
  border-color: var(--hero-line-strong); }
.co-grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .co-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); } }
.co-summary { position: sticky; top: var(--space-8); }
@media (max-width: 899px) { .co-summary { position: static; order: -1; } }
.co-summary__media { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-md); margin-bottom: var(--space-5); background: var(--ink-50); }
.co-summary__row { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--ink-100); }
.co-summary__total { font-size: var(--fs-h3); font-weight: var(--fw-extra); color: var(--ink-900);
  font-variant-numeric: tabular-nums; }
.co-summary__list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid;
  gap: var(--space-2); font-size: var(--fs-caption); color: var(--ink-500); }
.co-summary__list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.co-summary__list svg { flex: none; width: 14px; height: 14px; margin-top: 3px;
  stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.co-done__mark { width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--accent);
  color: var(--accent-contrast); display: grid; place-items: center; margin: 0 auto var(--space-6); }
.co-done__mark svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
.co-next { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .co-next { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.co-next__item { background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-md);
  padding: var(--space-6); }
.co-next__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--accent-tint); color: var(--accent-700); font-size: var(--fs-caption);
  font-weight: var(--fw-bold); margin-bottom: var(--space-3); }
.co-next__item p { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-600); line-height: var(--lh-body); }

/* 결과 화면은 성공만이 아니다 — 실패·보류가 같은 지면을 아이콘과 색으로 갈라 쓴다. */
.co-done__mark--fail { background: var(--danger); color: var(--paper); }
.co-done__mark--wait { background: var(--ink-100); color: var(--ink-500); }
/* `.co-hero p` 로 받는다 — 그쪽이 (0,1,1) 이라 클래스 하나(0,1,0)로는 margin·color 를
   못 이긴다. 이걸 놓치면 상자가 `margin: 0` 을 물려받아 왼쪽에 붙고, 가운데 정렬한 글이
   지면 왼쪽으로 쏠린 채 남는다(2026-08-19 렌더에서 실측 — 화면을 봐야 보이는 자리다). */
.co-hero p.co-result__meta { margin: var(--space-5) auto 0; font-size: var(--fs-caption);
  color: var(--ink-500); font-variant-numeric: tabular-nums; }
.co-result__meta span { display: block; }
/* 항목 사이는 항목 *안*의 행간보다 넓어야 두 사실이 두 개로 읽힌다. 4px 이던 자리다 —
   에러 메시지가 두 줄로 접히면 주문번호와 한 덩어리로 뭉쳤다(모바일 실측: 행간 21px). */
.co-result__meta span + span { margin-top: var(--space-3); }

/* 일본어에는 단어 경계가 없어 마지막 한 글자만 다음 줄로 넘어가는 일이 흔하다
   ("お支払いが完了しませんでし / た"). balance 가 줄 길이를 고르게 만든다. */
.co-hero h1 { text-wrap: balance; }
.co-hero p { text-wrap: balance; }

/* 버튼은 좁은 폭에서 내용 길이만큼만 넓어져 서로 어긋나 보였다 — 세로로 쌓고 폭을 맞춘다. */
.co-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--space-6); }
@media (max-width: 520px) {
  .co-cta { flex-direction: column; align-items: stretch; }
  .co-cta .btn { width: 100%; }
}

/* 다음 단계 블록이 숨는 상태(실패·보류)에서는 그 자리의 여백도 함께 줄인다.
   그러지 않으면 결과 한 줄 아래로 빈 지면이 한 화면 가까이 남는다(모바일 실측 약 180px). */
.section--tight { padding-block: var(--space-8); }
/* `hidden` 은 UA 규칙이라 display 를 지정한 author 규칙에 진다 — `.btn` 이 inline-flex 다.
   결과 상태를 이 attribute 로 켜고 끄므로 여기서 되찾는다. 없으면 실패 화면에 성공 버튼이
   같이 뜬다(2026-08-19 작성 중 실측). */
[hidden] { display: none !important; }
/* the buy bar only exists on plan pages; keep checkout/complete flush */
body:has(.co-main) { padding-bottom: 0; }

/* ===== "will it work on my phone" — the objection that stops the sale ===== */
.fit-grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .fit-grid { grid-template-columns: 1.25fr 1fr; gap: var(--space-12); } }
.fit-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: fit; }
.fit-steps li { display: grid; grid-template-columns: 32px 1fr; column-gap: var(--space-4); row-gap: var(--space-1);
  align-items: start; }
.fit-step__n { grid-row: span 2; display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--radius-pill); background: var(--accent); color: #fff;
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold); }
.fit-step__t { font-weight: var(--fw-semibold); color: var(--ink-900); line-height: var(--lh-snug); }
.fit-step__t code { font-family: var(--font-mono); background: var(--ink-50); border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm); padding: 0 .35em; font-size: .95em; }
.fit-step__b { font-size: var(--fs-body-sm); color: var(--ink-500); line-height: var(--lh-body); }
.fit-devices { background: var(--canvas); border: 1px solid var(--ink-100); border-radius: var(--radius-md);
  padding: var(--space-6); }
.fit-devices h3 { margin: 0 0 var(--space-4); font-size: var(--fs-h4); color: var(--ink-900); }
.fit-devices ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.fit-devices li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start;
  font-size: var(--fs-body-sm); color: var(--ink-700); line-height: var(--lh-body); }
.fit-devices svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round; margin-top: .15em; }
.fit-warn { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--ink-100);
  font-size: var(--fs-caption); color: var(--ink-500); line-height: var(--lh-body); }

/* ===== comparison — the same table the LP carries, re-cut per plan ===== */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-body-sm); }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--ink-100); line-height: var(--lh-body); }
.cmp-table thead th { font-size: var(--fs-caption); color: var(--ink-500); font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--ink-200); }
.cmp-table tbody th { width: 22%; color: var(--ink-500); font-weight: var(--fw-semibold); }
.cmp-table td { color: var(--ink-600); }
.cmp-table thead th.cmp-me { color: var(--accent-700); }
.cmp-table td.cmp-me { color: var(--ink-900); font-weight: var(--fw-semibold); background: var(--accent-tint); }
.cmp-table tbody tr:first-child td.cmp-me { font-size: var(--fs-h4); line-height: 1.2; }
.cmp-save { margin: var(--space-6) 0 0; font-size: var(--fs-lead); font-weight: var(--fw-semibold);
  color: var(--ink-900); }
.cmp-note { margin: var(--space-3) 0 0; font-size: var(--fs-caption); color: var(--ink-400);
  line-height: var(--lh-body); }

/* ===== spec block: product facts open, trader disclosures folded ===== */
.spec-solo { max-width: var(--container-read); margin-inline: auto; }
.spec-solo > h3 { font-size: var(--fs-h4); margin: 0 0 var(--space-2); color: var(--ink-900); }
.spec-solo .note { color: var(--ink-500); font-size: var(--fs-body-sm); margin: 0 0 var(--space-5); }
.terms-fold { margin-top: var(--space-10); border-top: 1px solid var(--ink-100); padding-top: var(--space-5); }
.terms-fold > summary { cursor: pointer; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
  color: var(--ink-600); list-style: none; display: flex; align-items: center; gap: var(--space-2); }
.terms-fold > summary::-webkit-details-marker { display: none; }
.terms-fold > summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px;
  border: 1px solid var(--ink-200); border-radius: var(--radius-sm); font-weight: var(--fw-bold);
  color: var(--ink-500); }
.terms-fold[open] > summary::before { content: "\2212"; }
.terms-fold > summary:hover { color: var(--ink-900); }
.terms-fold .note { margin-top: var(--space-4); }

/* ===== support — "if it does not work when I land" was the top exit reason ===== */
.support-band { margin-top: var(--space-8); display: grid; gap: var(--space-5); align-items: center;
  background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8); }
@media (min-width: 760px) { .support-band { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); } }
.support-band h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h4); color: var(--ink-900); }
.support-band p { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-600); line-height: var(--lh-body); }
.support-band__meta { margin-top: var(--space-3) !important; font-size: var(--fs-caption) !important;
  color: var(--ink-400) !important; }
/* btn--ghost is borderless on this system and read as a plain link here */
.support-band .btn { white-space: nowrap; border: 1.5px solid var(--accent); color: var(--accent-700);
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6); background: var(--paper); }
.support-band .btn:hover { background: var(--accent-tint); }

/* ===== contact form + complete-screen bottom (2026-08-21) ===== */
.ct-grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .ct-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); } }
.co-input--select { appearance: auto; -webkit-appearance: menulist; padding-right: var(--space-8); }
.co-textarea { min-height: 160px; resize: vertical; line-height: var(--lh-body); font: inherit; }
.ct-aside h3 { margin: 0 0 var(--space-3); font-size: var(--fs-h4); }
.ct-aside ul { margin: 0 0 var(--space-6); padding-left: var(--space-5); color: var(--ink-600);
  font-size: var(--fs-body-sm); }
.ct-aside li + li { margin-top: var(--space-2); }
.ct-aside .support-band { margin-top: 0; grid-template-columns: 1fr; }
.ct-aside .support-band .btn { justify-self: start; }
.ct-ok { text-align: center; padding: var(--space-10) 0; }
.ct-ok h2 { margin: 0 0 var(--space-3); font-size: var(--fs-h3); }
.ct-ok p { color: var(--ink-500); margin: 0; }
.ct-ok .ct-ref { margin-top: var(--space-4); color: var(--ink-700); font-weight: 600; }
.ct-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; }
.co-aff { margin-top: var(--space-10); padding: var(--space-6) var(--space-8); border: 1px dashed var(--ink-200);
  border-radius: var(--radius-lg); background: var(--canvas); text-align: center; }
.co-aff h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h4); }
.co-aff p { margin: 0; color: var(--ink-600); font-size: var(--fs-body-sm); }
.co-aff__row { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--space-5); }
.co-aff__note { margin-top: var(--space-4) !important; font-size: var(--fs-caption) !important;
  color: var(--ink-400) !important; }
.co-contact { margin-top: var(--space-8); text-align: center; font-size: var(--fs-body-sm); color: var(--ink-600); }
.co-contact a { color: var(--accent-700); text-decoration: underline; }