/* ============================================================
   jp-esim.net 1차 시안(2026-11-05) — 일본 eSIM · 서구권(미국·유럽) 판매면
   로드 순서: tokens.css → brands.css → components.css → 이 파일.
   <html data-brand="nx-mobile" data-theme="japan">

   [나라 테마 명명안 — 미확정, 대표님 확정 전(CHARTER 원칙5)]
   japan = 주(朱, shu vermilion) accent + 남(藍, ai indigo) 다크 면 + 와시(washi) 따뜻한 중립 램프.
   대비(WCAG, 11-05 계산): 白 on shu 5.47 · shu on canvas 5.16 · ai on paper 14.1 · ink-400 on canvas 5.32 ·
   ai 위 보조글자(#C9C2B8) 7.99 · ai 위 shu-soft(#F28B6E) 5.84.
   채도색 = shu(accent) 하나. ai 는 다크 면(최종 CTA·푸터·비교 패널)으로만 쓰는 중립 역할(DON'T #3).
   [히어로] nx-mobile 의 라이트 히어로 예외는 일본 소비자 시장 근거라 이 지면(서구권)에는 적용하지 않는다 —
   벤치마크(JNTO·Away·Revolut·Holafly) 근거로 전폭 사진 히어로 + 라이트 구매 카드. 근거 = references/benchmarks/2026-11-05-jp-esim-west/notes.md
   ============================================================ */
[data-theme="japan"] {
  --accent: #C2361D;  --accent-600: #A92E18;  --accent-700: #8E2613;
  --accent-tint: #FBEAE5;  --accent-ring: rgba(194,54,29,0.28);  --accent-contrast: #FFFFFF;
  --ai: #1B2A4E;  --ai-2: #24365F;  --ai-line: rgba(255,255,255,0.14);  --ai-muted: #C9C2B8;  --shu-soft: #F28B6E;
  --ink-900: #1A1714; --ink-800: #26221E; --ink-700: #3D3833; --ink-600: #48423C; --ink-500: #5B544D;
  --ink-400: #6E665E; --ink-300: #A69D93; --ink-200: #D9D1C6; --ink-100: #ECE6DD; --ink-50: #F5F1EA;
  --canvas: #FBF8F3;  --paper: #FFFFFF;
  /* 사진 히어로 위 선·면(다크 사진 위) */
  --hero-text: #FFFFFF; --hero-muted: #E7E1D8;
  --hero-line: rgba(255,255,255,0.22); --hero-fill: rgba(255,255,255,0.10); --hero-fill-strong: rgba(255,255,255,0.16);
}

/* ---------- 언어별 서체·줄바꿈(PRINCIPLES 타이포) ---------- */
html:lang(ja) body { font-family: 'Noto Sans JP', var(--font-sans); }
html:lang(zh) body, html:lang(zh-Hans) body { font-family: 'Noto Sans SC', var(--font-sans); }
html:lang(ja) :is(h1,h2,h3,p,li,dd,dt,summary,figcaption,th,td),
html:lang(zh) :is(h1,h2,h3,p,li,dd,dt,summary,figcaption,th,td) { word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
html:lang(ko) :is(h1,h2,h3,p,li,dd,dt,summary,figcaption,th,td) { word-break: keep-all; line-break: strict; text-wrap: pretty; }
:is(h1,h2,h3,p,li) { text-wrap: pretty; }

body { background: var(--canvas); overflow-x: clip; }
img { max-width: 100%; display: block; }
/* [desktop-fill 11-05] 1920 에서 --container(1200) = 콘텐츠 폭 59% → 대표님 반복 지적(「PC 에서 빈 공간이 많다」, 10-14) 자리.
   이 지면은 --container-wide(1320)를 기본 폭으로 쓰고, 사진·다크 면은 전폭으로 낸다. */
.wrap { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--page-pad); }
.wrap--wide { max-width: var(--container-wide); }
.sec { padding-block: var(--section-y); position: relative; }
.sec--paper { background: var(--paper); }
.sec--ai { background: var(--ai); color: var(--ai-muted); }
.sec--ai :is(h2,h3,h4) { color: var(--paper); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-overline); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-4); }
.eyebrow::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: var(--radius-pill); background: var(--accent); }
.sec--ai .eyebrow { color: var(--shu-soft, #F28B6E); } .sec--ai .eyebrow::before { background: var(--shu-soft, #F28B6E); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-8); align-items: end; margin-bottom: var(--space-12); }
.sec-head h2 { margin: 0; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.06; font-weight: var(--fw-extra); }
.sec-head p:not(.eyebrow) { margin: 0; font-size: var(--fs-lead); color: var(--ink-500); }
.sec-head .eyebrow { margin-bottom: var(--space-4); }
.days h2, .compat h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.06; font-weight: var(--fw-extra); }
.sec--ai .sec-head p:not(.eyebrow) { color: var(--ai-muted); }
@media (max-width: 900px) { .sec-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); } }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.note { font-size: var(--fs-body-sm); color: var(--ink-400); }
.lnk { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--fw-semibold); color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lnk:hover { color: var(--accent-600); text-decoration-thickness: 2px; }
.btn { border-radius: var(--radius-pill); }
.btn--ink { background: var(--ink-900); color: var(--paper); }
.btn--ink:hover { background: var(--ink-700); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.btn--light:hover { background: var(--ink-50); color: var(--ink-900); }
.btn--outline-light { background: transparent; color: var(--paper); border-color: var(--hero-line, rgba(255,255,255,0.22)); }
.btn--outline-light:hover { background: var(--hero-fill, rgba(255,255,255,0.10)); color: var(--paper); }
.btn:focus-visible { box-shadow: var(--ring); }

/* ---------- 헤더 ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 4.5rem; }
.brandmark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--paper); font-weight: var(--fw-extra); letter-spacing: 0.02em; }
.brandmark img { width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--paper); padding: 2px; }
.brandmark span { display: flex; flex-direction: column; line-height: 1.05; font-size: var(--fs-body-sm); }
.brandmark small { font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.85; }
.hdr__nav { display: flex; align-items: center; gap: var(--space-6); }
.hdr__nav > a:not(.btn) { color: var(--paper); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); }
.hdr__nav > a:not(.btn):hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--paper);
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--hero-line, rgba(255,255,255,0.22)); }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; right: 0; top: calc(100% + var(--space-2)); list-style: none; margin: 0; padding: var(--space-2); background: var(--paper);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 11rem; z-index: var(--z-dropdown); }
.lang li a { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink-800); font-size: var(--fs-body-sm); }
.lang li a:hover, .lang li a[aria-current] { background: var(--ink-50); }
.lang li a small { color: var(--ink-400); }
.hdr.is-solid { background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
.hdr.is-solid :is(.brandmark, .hdr__nav > a:not(.btn), .lang summary) { color: var(--ink-900); }
.hdr.is-solid .lang summary { border-color: var(--ink-200); }
.hdr.is-solid .brandmark img { background: transparent; }
.hdr--solid { background: var(--paper); box-shadow: var(--shadow-xs); }
.hdr--solid :is(.brandmark, .hdr__nav > a:not(.btn), .lang summary) { color: var(--ink-900); }
.hdr--solid .lang summary { border-color: var(--ink-200); }
@media (max-width: 960px) { .hide-m { display: none !important; } .hdr__nav { gap: var(--space-3); } }

/* ---------- 히어로(전폭 사진 + 구매 카드) ---------- */
/* 히어로 글자·선 색은 테마와 무관하게 여기서 고정(11-05): 일본 테마가 늦게/안 적용되면 nx-mobile 브랜드의 「밝은 히어로」
   어두운 글자색이 사진 위로 새어 나온다(대표님 폰 실화면). 이 지면 히어로는 언제나 어두운 사진이다. */
.hero2 { --hero-text: #FFFFFF; --hero-muted: #E7E1D8; --hero-line: rgba(255,255,255,0.22); --hero-fill: rgba(255,255,255,0.10); --hero-fill-strong: rgba(255,255,255,0.16); }
.hero2 { position: relative; min-height: min(56rem, 100svh); display: flex; align-items: center; color: var(--hero-text, #FFFFFF); isolation: isolate; overflow: hidden;
  padding-block: calc(4.5rem + var(--space-12)) var(--space-16); }
.hero2__bg { position: absolute; inset: 0; z-index: -2; }
.hero2__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; animation: kb 22s var(--ease-standard) both; }
.hero2__bg picture { display: contents; }
.hero2::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(27,42,78,.88) 0%, rgba(27,42,78,.62) 42%, rgba(27,42,78,.08) 75%), linear-gradient(0deg, rgba(27,42,78,.55), transparent 35%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ai, #1B2A4E) 88%, transparent) 0%, color-mix(in srgb, var(--ai, #1B2A4E) 62%, transparent) 42%, color-mix(in srgb, var(--ai, #1B2A4E) 8%, transparent) 75%),
              linear-gradient(0deg, color-mix(in srgb, var(--ai, #1B2A4E) 55%, transparent), transparent 35%); }
@keyframes kb { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero2__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-12); align-items: center; }
.hero2 .eyebrow { color: var(--paper); } .hero2 .eyebrow::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
.hero2 h1 { color: var(--paper); font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.75rem); line-height: 1.02; font-weight: var(--fw-extra); letter-spacing: -0.03em; margin-bottom: var(--space-6); }
.hero2 h1 em { font-style: normal; color: var(--shu-soft, #F28B6E); }
.hero2 .lead { font-size: var(--fs-lead); color: var(--hero-muted, #E7E1D8); max-width: 34rem; margin-bottom: var(--space-8); }
.hero2__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--hero-fill, rgba(255,255,255,0.10)); border: 1px solid var(--hero-line, rgba(255,255,255,0.22)); color: var(--paper); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); backdrop-filter: blur(6px); }
.hero2__side { position: relative; }
@media (max-width: 960px) {
  .hero2 { min-height: 0; padding-top: calc(4.5rem + var(--space-8)); align-items: stretch; }
  .hero2__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .hero2::after { background: linear-gradient(180deg, rgba(27,42,78,.70) 0%, rgba(27,42,78,.55) 45%, rgba(27,42,78,.92) 100%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ai, #1B2A4E) 70%, transparent) 0%, color-mix(in srgb, var(--ai, #1B2A4E) 55%, transparent) 45%, color-mix(in srgb, var(--ai, #1B2A4E) 92%, transparent) 100%); }
  .hero2__bg img { object-position: 60% 30%; }
}

/* 구매 카드 */
.buy { background: var(--paper); color: var(--ink-600); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: var(--space-6); position: relative; }
.buy__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.buy__title { font-weight: var(--fw-bold); color: var(--ink-900); display: flex; align-items: center; gap: var(--space-2); }
.netpill { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--ink-700);
  background: var(--ink-50); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); white-space: nowrap; }
.netpill .dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--success); animation: pulse 2s infinite var(--ease-standard); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); background: var(--ink-50); padding: var(--space-1); border-radius: var(--radius-pill); margin-bottom: var(--space-4); }
.seg button { font: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); border: 0; background: transparent; color: var(--ink-500); padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-pill); cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); line-height: 1.25; }
.seg button:hover { color: var(--ink-900); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.buy__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--ink-100); }
.buy__row[hidden] { display: none; }
.buy__row label, .buy__row .lab { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--ink-800); }
.buy__row .lab small { display: block; font-weight: var(--fw-regular); color: var(--ink-400); }
.stepper { display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid var(--ink-200); border-radius: var(--radius-pill); padding: var(--space-1); }
.stepper button { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); border: 0; background: var(--ink-50); color: var(--ink-900); cursor: pointer; display: grid; place-items: center; }
.stepper button:hover { background: var(--ink-100); }
.stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper output { min-width: 4.5rem; text-align: center; font-weight: var(--fw-bold); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.dayopts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dayopts button { font: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  border: 1px solid var(--ink-200); background: var(--paper); color: var(--ink-700); cursor: pointer; }
.dayopts button:hover { border-color: var(--ink-400); }
.dayopts button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-700); }
.cond { background: var(--canvas); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-block: var(--space-2) var(--space-4); display: grid; gap: var(--space-1); }
.cond p { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-600); display: flex; gap: var(--space-2); align-items: flex-start; }
.cond p .ic { color: var(--ink-400); margin-top: 0.15em; }
.cond p b { color: var(--ink-900); }
.buy__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.buy__total .lab { font-size: var(--fs-body-sm); color: var(--ink-500); }
.price-xl { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem); font-weight: var(--fw-extra); color: var(--ink-900); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-xl small { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--ink-400); margin-left: var(--space-1); }
.perday { display: block; text-align: right; font-size: var(--fs-caption); color: var(--ink-400); }
.buy .btn--primary { width: 100%; }
.buy__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.paymarks { display: flex; gap: var(--space-1); align-items: center; }
.paymarks { flex-wrap: wrap; }
.paymarks img { display: block; height: 1.375rem; width: auto; border-radius: var(--radius-xs); }
.paymarks span { font-size: var(--fs-overline); font-weight: var(--fw-bold); color: var(--ink-600); border: 1px solid var(--ink-200); border-radius: var(--radius-xs); padding: 0.125rem 0.375rem; letter-spacing: 0.02em; }
.flash { animation: flash var(--dur-slow) var(--ease-out); }
@keyframes flash { from { opacity: 0.25; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 떠 있는 연결 상태 카드(목업) */
.float { position: absolute; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4); color: var(--ink-800); display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-body-sm);
  animation: bob 6s var(--ease-standard) infinite; z-index: 2; }
.float b { display: block; color: var(--ink-900); }
.float small { color: var(--ink-400); font-size: var(--fs-caption); }
.float--status { top: calc(-1 * var(--space-16)); right: var(--space-6); }
.float--ip { bottom: calc(-1 * var(--space-12)); left: calc(-1 * var(--space-8)); animation-delay: -3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.25rem; }
.bars i { width: 4px; border-radius: 2px; background: var(--success); animation: bar 1.6s var(--ease-standard) infinite; animation-delay: calc(var(--i) * 0.12s); }
.bars i:nth-child(1) { height: 30%; } .bars i:nth-child(2) { height: 55%; } .bars i:nth-child(3) { height: 80%; } .bars i:nth-child(4) { height: 100%; }
@keyframes bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.tag5g { font-size: var(--fs-overline); font-weight: var(--fw-extra); color: var(--paper); background: var(--ink-900); border-radius: var(--radius-xs); padding: 0.125rem 0.375rem; }
@media (max-width: 960px) { .float--status { top: calc(-1 * var(--space-6)); right: var(--space-4); } .float--ip { display: none; } }

/* ---------- 흐르는 사실 띠 ---------- */
.band { background: var(--ink-900); color: var(--paper); overflow: hidden; padding-block: var(--space-4); }
.band__track { display: flex; gap: var(--space-12); width: max-content; animation: marquee 48s linear infinite; }
.band__item { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-semibold); white-space: nowrap; font-size: var(--fs-body-sm); }
.band__item .ic { color: var(--shu-soft, #F28B6E); }
.band:hover .band__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 현지망 vs 로밍(경로 도식 + 일반 비교) ---------- */
.route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.route__card { border-radius: var(--radius-xl); padding: var(--space-8); position: relative; overflow: hidden; }
.route__card--them { background: var(--ink-50); }
.route__card--us { background: var(--ai); color: var(--ai-muted); }
.route__card--us h3 { color: var(--paper); }
.route__card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.route__card p { font-size: var(--fs-body-sm); margin: 0; }
.route__svg { width: 100%; height: auto; margin-block: var(--space-6); }
.route__svg text { font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.route__card--them .route__svg text { fill: var(--ink-600); }
.route__card--us .route__svg text { fill: var(--paper); }
.flowline { stroke-dasharray: 6 8; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.cmp { margin-top: var(--space-10); background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.cmp table { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; padding: var(--space-4) var(--space-6); font-size: var(--fs-body-sm); border-bottom: 1px solid var(--ink-100); vertical-align: top; }
.cmp thead th { font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-400); }
.cmp thead th.us { color: var(--accent); }
.cmp td.us { background: var(--accent-tint); color: var(--ink-900); font-weight: var(--fw-semibold); }
.cmp tbody th { color: var(--ink-900); font-weight: var(--fw-semibold); width: 30%; }
.cmp tr:last-child :is(td, th) { border-bottom: 0; }
.cmp .yes { display: inline-flex; align-items: center; gap: var(--space-2); }
.cmp .yes .ic { color: var(--accent); }
.cmp-wrap { overflow-x: auto; }
@media (max-width: 760px) { .route { grid-template-columns: minmax(0, 1fr); } .cmp th, .cmp td { padding: var(--space-3) var(--space-4); } }

/* ---------- 플랜 카드 ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.pc { background: var(--paper); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); position: relative;
  border: 1.5px solid var(--ink-100); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.pc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.pc--pop { border-color: var(--accent); box-shadow: var(--shadow-md); }
.pc__badge { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-8); background: var(--accent); color: var(--accent-contrast); font-size: var(--fs-overline);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 0.375rem 0.75rem; border-radius: var(--radius-pill); }
.pc__pg { width: 4rem; height: 4rem; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--canvas); }
.pc__pg svg { width: 2.75rem; height: 2.75rem; }
.pc h3 { margin: 0; font-size: var(--fs-h4); }
.pc__sub { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-500); min-height: 3em; }
.pc__price { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.pc__price span:first-child { font-size: var(--fs-body-sm); color: var(--ink-400); }
.pc__price b { font-size: var(--fs-h2); color: var(--ink-900); font-weight: var(--fw-extra); letter-spacing: -0.02em; }
.pc ul { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--ink-100); display: grid; gap: var(--space-3); flex: 1; }
.pc li { display: flex; gap: var(--space-2); font-size: var(--fs-body-sm); align-items: flex-start; }
.pc li .ic { color: var(--accent); margin-top: 0.15em; }
.pc li.lim .ic { color: var(--ink-400); }
.pc li.lim { color: var(--ink-500); }
.pc .btn { width: 100%; }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; } }
.allprices { margin-top: var(--space-8); background: var(--paper); border-radius: var(--radius-lg); }
.allprices > summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-6); font-weight: var(--fw-semibold); color: var(--ink-900); display: flex; justify-content: space-between; align-items: center; }
.allprices > summary::-webkit-details-marker { display: none; }
.allprices > summary:hover { color: var(--accent); }
.allprices[open] > summary .ic { transform: rotate(180deg); }
.ptable-wrap { overflow-x: auto; padding: 0 var(--space-6) var(--space-6); }
.ptable { border-collapse: collapse; width: 100%; font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; }
.ptable th, .ptable td { padding: var(--space-2) var(--space-3); text-align: right; border-bottom: 1px solid var(--ink-100); white-space: nowrap; }
.ptable th:first-child, .ptable td:first-child { text-align: left; }
.ptable thead th { color: var(--ink-400); font-weight: var(--fw-semibold); }
.ptable td.na { color: var(--ink-300); }

/* ---------- 일수 타임라인(기산 설명) ---------- */
.days { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-12); align-items: center; }
.tl { background: var(--paper); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-md); }
.tl__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); margin-block: var(--space-6) var(--space-4); }
.tl__d { aspect-ratio: 1 / 1.25; border-radius: var(--radius-md); background: var(--ink-50); display: grid; place-items: center; align-content: center; gap: var(--space-1);
  font-weight: var(--fw-bold); color: var(--ink-400); font-size: var(--fs-body-sm); opacity: 0; transform: translateY(8px); }
.tl__d small { font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: 0.04em; }
.tl__d.on { background: var(--accent-tint); color: var(--accent-700); }
.tl__d.first { background: var(--accent); color: var(--accent-contrast); }
.is-in .tl__d { animation: rise var(--dur-slow) var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms + 200ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.tl__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-caption); color: var(--ink-500); }
.tl__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.tl__legend i { width: 0.75rem; height: 0.75rem; border-radius: var(--radius-xs); background: var(--accent); display: inline-block; }
.tl__legend i.on { background: var(--accent-tint); }
.tl__legend i.pre { background: var(--ink-50); }
.points { display: grid; gap: var(--space-6); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.points li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.points .pg { width: 3rem; height: 3rem; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-700); }
.points .pg .ic { width: 1.5rem; height: 1.5rem; }
.points b { display: block; color: var(--ink-900); margin-bottom: var(--space-1); }
.points p { margin: 0; font-size: var(--fs-body-sm); }
@media (max-width: 900px) { .days { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }

/* ---------- 행선지 가로 갤러리 ---------- */
.gal { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 22rem); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--page-pad) var(--space-4); scrollbar-width: thin; }
.gal::-webkit-scrollbar { height: 6px; } .gal::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: var(--radius-pill); }
.gcard { scroll-snap-align: start; position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; color: var(--paper); margin: 0; }
.gcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gcard:hover img { transform: scale(1.06); }
.gcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--ai, #1B2A4E) 85%, transparent)); }
.gcard figcaption { position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); z-index: 1; }
.gcard figcaption small { display: inline-block; font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  background: var(--hero-fill-strong, rgba(255,255,255,0.16)); border: 1px solid var(--hero-line, rgba(255,255,255,0.22)); border-radius: var(--radius-pill); padding: 0.25rem 0.625rem; margin-bottom: var(--space-2); backdrop-filter: blur(6px); }
.gcard figcaption b { display: block; font-size: var(--fs-h4); line-height: var(--lh-head); }
.gal-nav { display: flex; gap: var(--space-2); }
.gal-nav button { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); border: 1px solid var(--ink-200); background: var(--paper); color: var(--ink-900); cursor: pointer; display: grid; place-items: center; }
.gal-nav button:hover { background: var(--ink-50); }
.gal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-6); }
.gal-head > div:first-child { flex: 1 1 18rem; min-width: 0; }

/* ---------- 3단계(폰 목업) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); counter-reset: st; }
.step { background: var(--paper); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6) 0; overflow: hidden; display: flex; flex-direction: column; }
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-3); }
.step h3::before { counter-increment: st; content: counter(st); width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: var(--ink-900); color: var(--paper);
  display: grid; place-items: center; font-size: var(--fs-body-sm); flex: none; }
.step p { font-size: var(--fs-body-sm); margin-bottom: var(--space-6); }
.phone { margin: auto auto 0; width: min(13.5rem, 80%); aspect-ratio: 9 / 15; border-radius: 2rem 2rem 0 0; background: var(--ink-900); padding: 0.6rem 0.6rem 0; position: relative; }
.phone::before { content: ""; position: absolute; top: 0.9rem; left: 50%; width: 30%; height: 0.9rem; transform: translateX(-50%); border-radius: var(--radius-pill); background: var(--ink-800); z-index: 2; }
.phone__s { height: 100%; border-radius: 1.5rem 1.5rem 0 0; background: var(--canvas); padding: 2.4rem var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; }
.ui-row { background: var(--paper); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--fs-caption); color: var(--ink-700); display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-xs); }
.ui-row b { color: var(--ink-900); }
.ui-row.sel { outline: 2px solid var(--accent); }
.ui-btn { margin-top: auto; background: var(--accent); color: var(--paper); text-align: center; border-radius: var(--radius-pill); padding: var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.ui-qr { width: 64%; margin: var(--space-2) auto; aspect-ratio: 1; border-radius: var(--radius-sm); position: relative; background: var(--paper); padding: 6px; box-shadow: var(--shadow-sm); }
.ui-qr svg { width: 100%; height: 100%; display: block; }
.ui-qr::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--accent); top: 0; animation: scan 2.4s var(--ease-standard) infinite; box-shadow: 0 0 12px var(--accent); }
@keyframes scan { 0%, 100% { top: 4%; } 50% { top: 92%; } }
.ui-cap { font-size: var(--fs-caption); text-align: center; color: var(--ink-500); }
.ui-toggle { width: 2.2rem; height: 1.3rem; border-radius: var(--radius-pill); background: var(--success); position: relative; }
.ui-toggle::after { content: ""; position: absolute; right: 0.15rem; top: 0.15rem; width: 1rem; height: 1rem; border-radius: var(--radius-pill); background: var(--paper); }
.ui-big { text-align: center; padding-block: var(--space-4); }
.ui-big b { display: block; font-size: var(--fs-h3); color: var(--ink-900); }
.ui-big .bars { height: 2rem; } .ui-big .bars i { width: 6px; }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; } }

/* ---------- 쓰임 장면 4분할 ---------- */
.uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.use { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 3 / 4; color: var(--paper); margin: 0; }
.use img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.use:hover img { transform: scale(1.06); }
.use::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ai, #1B2A4E) 10%, transparent) 30%, color-mix(in srgb, var(--ai, #1B2A4E) 88%, transparent)); }
.use figcaption { position: absolute; inset: auto var(--space-5) var(--space-5); z-index: 1; }
.use figcaption b { display: block; font-size: var(--fs-h4); line-height: var(--lh-head); margin-bottom: var(--space-1); }
.use figcaption span { font-size: var(--fs-body-sm); color: var(--hero-muted, #E7E1D8); }
.use__chip { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 1; display: inline-flex; align-items: center; gap: var(--space-2); background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--ink-900); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); font-size: var(--fs-caption); font-weight: var(--fw-semibold); box-shadow: var(--shadow-sm); }
.use__chip .ic { color: var(--accent); }
@media (max-width: 1024px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uses { grid-template-columns: minmax(0, 1fr); } .use { aspect-ratio: 4 / 3; } }

/* ---------- 호환 확인 ---------- */
.compat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.checker { background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-8); }
.checker label { display: block; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--ink-800); margin-bottom: var(--space-2); }
.checker select { width: 100%; font: inherit; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--ink-200); background: var(--paper); color: var(--ink-900); margin-bottom: var(--space-4); }
.checker select:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.checks { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); }
.checks li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--fs-body-sm); }
.checks .st { width: 2rem; height: 2rem; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--success-tint); color: var(--success); }
.checks .st.q { background: var(--warning-tint); color: var(--warning); }
.checks b { color: var(--ink-900); display: block; }
.verdict { margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--radius-md); background: var(--success-tint); color: var(--ink-900); font-weight: var(--fw-semibold); display: flex; gap: var(--space-3); align-items: center; }
.verdict .ic { color: var(--success); }
.verdict.q { background: var(--warning-tint); } .verdict.q .ic { color: var(--warning); }
.bandviz { width: 100%; height: auto; }
.bandviz text { font-family: var(--font-sans); font-size: 12px; fill: var(--ink-500); font-weight: 600; }
.bandviz .hl { fill: var(--accent); }
@media (max-width: 900px) { .compat { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: var(--space-3); }
.faq details { background: var(--paper); border-radius: var(--radius-lg); padding: 0 var(--space-6); transition: box-shadow var(--dur-base) var(--ease-out); }
.faq details[open] { box-shadow: var(--shadow-md); }
.faq summary { cursor: pointer; list-style: none; padding: var(--space-5) 0; font-weight: var(--fw-semibold); color: var(--ink-900); display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .ic { transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--space-5); margin: 0; }

/* ---------- 최종 CTA ---------- */
.final { position: relative; overflow: hidden; border-radius: var(--radius-xl); color: var(--paper); isolation: isolate; padding: clamp(2.5rem, 1.5rem + 5vw, 6rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: end; }
.final img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, color-mix(in srgb, var(--ai, #1B2A4E) 92%, transparent) 15%, color-mix(in srgb, var(--ai, #1B2A4E) 30%, transparent)); }
.final h2 { color: var(--paper); font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); line-height: 1.05; font-weight: var(--fw-extra); margin-bottom: var(--space-4); max-width: 16ch; }
.final p { color: var(--hero-muted, #E7E1D8); font-size: var(--fs-lead); margin: 0; max-width: 34rem; }
.final .hanko { position: absolute; right: var(--space-8); top: var(--space-8); width: 4.5rem; height: 4.5rem; }
@media (max-width: 760px) { .final { grid-template-columns: minmax(0, 1fr); } .final .hanko { display: none; } }

/* ---------- 푸터 ---------- */
.ftr { background: var(--ai); color: var(--ai-muted); padding-block: var(--space-16) var(--space-10); font-size: var(--fs-body-sm); }
.ftr a { color: var(--paper); }
.ftr a:hover { color: var(--shu-soft, #F28B6E); }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.ftr h4 { color: var(--paper); font-size: var(--fs-body-sm); margin-bottom: var(--space-3); }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.ftr .brandmark { color: var(--paper); margin-bottom: var(--space-4); }
.ftr__legal { border-top: 1px solid var(--ai-line); margin-top: var(--space-10); padding-top: var(--space-6); display: grid; gap: var(--space-2); }
.ftr__legal p { margin: 0; }
@media (max-width: 900px) { .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 하단 고정 구매 바 ---------- */
.sbar { position: fixed; inset: auto var(--space-4) var(--space-4) var(--space-4); z-index: var(--z-header); max-width: 56rem; margin-inline: auto;
  background: var(--ink-900); color: var(--paper); border-radius: var(--radius-pill); box-shadow: var(--shadow-xl); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); transform: translateY(160%); transition: transform var(--dur-slow) var(--ease-out); }
.sbar.is-on { transform: none; }
.sbar__t { display: flex; align-items: center; gap: var(--space-4); min-width: 0; font-size: var(--fs-body-sm); }
.sbar__t b { white-space: nowrap; }
.sbar__t span { color: var(--ink-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .sbar__t span { display: none; } .sbar { padding-left: var(--space-4); } }

/* ---------- 등장 모션 ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.rv.is-in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .tl__d { opacity: 1; transform: none; } .band__track { animation: none; } }


/* [모바일 교정 11-05 렌더] 헤더 줄바꿈 · 상태 칩 겹침 · 비교표 칸 좁음 */
.brandmark span, .hdr .btn { white-space: nowrap; }
@media (max-width: 600px) {
  .hdr .btn--sm { display: none; }
  .brandmark small { display: none; }
  .float--status { display: none; }
  .cmp thead tr, .cmp tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp thead th:first-child { display: none; }
  .cmp tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 0; border-bottom: 0; }
  .seg button { font-size: var(--fs-caption); }
}

/* 일본 모티프 — 주(朱) 원(도장) */
.sec--motif { overflow: hidden; }
.sec--motif::before { content: ""; position: absolute; width: 36rem; height: 36rem; border-radius: var(--radius-pill); right: -14rem; top: 50%;
  transform: translateY(-50%); background: radial-gradient(circle, var(--accent-tint) 0 58%, transparent 58.5%); opacity: 0.7; pointer-events: none; }
.sec--motif > .wrap { position: relative; }
.seal { fill: var(--accent); }

html:lang(ko) body { font-family: 'Pretendard', 'Inter', 'Noto Sans KR', var(--font-sans); }

/* [2차 11-05] 홈 → 플랜 상세·설치 가이드 연결 */
.pc__more { align-self: center; font-size: var(--fs-body-sm); }
.how-more { margin: var(--space-10) 0 0; text-align: center; }