/* ============================================================
   jp-esim.net 2차 지면(2026-11-05) — 플랜 상세 · 설치 가이드 · 결제 전 고지
   로드 순서: tokens.css → brands.css → components.css → jp.css → 이 파일. 홈은 이 파일을 읽지 않는다.
   값은 토큰만(jp.css 의 japan 테마 토큰 포함). 근거 벤치마크 = references/benchmarks/2026-11-05-jp-esim-west-2/notes.md
   ============================================================ */

/* ---------- 공통: 픽토그램(64 격자 · 선 2.5 · 주 한 점) ---------- */
.pg2 { width: 4rem; height: 4rem; flex: none; display: inline-grid; place-items: center; }
.pg2 svg { width: 100%; height: 100%; overflow: visible; }
.pg2 .pgb { fill: var(--ink-50); }
.pg2 .s, .pg2 .a { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pg2 .s { stroke: var(--ink-700); }
.pg2 .a { stroke: var(--accent); }
.pg2 .af { fill: var(--accent); }
.pg2 .w { fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-linecap: round; }
.pg2 .t { font: var(--fw-extra) 13px/1 var(--font-sans); fill: var(--ink-700); }
.pg2 .tw { font: var(--fw-extra) 9px/1 var(--font-sans); fill: var(--paper); }
.pg2--sm { width: 3rem; height: 3rem; }
.pg2--lg { width: 4.5rem; height: 4.5rem; }
.rv.is-in .pg2 svg, .is-in > .pg2 svg { animation: pgpop 600ms var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms + 150ms); }
@keyframes pgpop { from { transform: scale(0.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.rv.is-in .pg2 .lvl { transform-origin: 50% 100%; animation: fill 1.4s var(--ease-out) both 400ms; }
@keyframes fill { from { transform: scaleY(0.1); } to { transform: none; } }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--hero-muted); margin-bottom: var(--space-6); }
.crumb a { color: var(--hero-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.crumb a:hover { color: var(--paper); text-decoration-thickness: 2px; }

/* ---------- 상세 히어로 ---------- */
.hero2--detail, .hero2--guide { min-height: min(50rem, 100svh); }
.hero2--detail h1, .hero2--guide h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem); }
.lchips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lchip { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--hero-fill); border: 1px solid var(--hero-line); color: var(--paper); backdrop-filter: blur(6px); }
.lchip .ic { grid-row: span 2; width: 1.5rem; height: 1.5rem; color: var(--shu-soft); }
.lchip b { font-size: var(--fs-body-sm); line-height: 1.3; }
.lchip small { font-size: var(--fs-caption); color: var(--hero-muted); line-height: 1.3; }

/* ---------- 포함 사항: 스펙표 + 차트 ---------- */
.spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.spec__table { margin: 0; background: var(--canvas); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-8); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); }
.spec__row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-4); border-bottom: 1px solid var(--ink-100); }
.spec__row:nth-last-child(-n+2) { border-bottom: 0; }
.spec__row dt { font-weight: var(--fw-semibold); color: var(--ink-900); font-size: var(--fs-body-sm); }
.spec__row dd { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-600); }
.spec__row:nth-child(-n+4) dt::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--accent); margin-right: var(--space-2); vertical-align: middle; }
.spec__side { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--space-6); align-items: stretch; }
.spec__side .tl { display: flex; flex-direction: column; justify-content: center; }
.tl--flat { box-shadow: none; background: var(--canvas); padding: var(--space-6); }
@media (max-width: 1100px) { .spec__table { grid-template-columns: minmax(0, 1fr); } .spec__row:nth-last-child(2) { border-bottom: 1px solid var(--ink-100); } }
@media (max-width: 960px) { .spec__side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .hs__bars li:nth-child(even):not(.is-sel) small { visibility: hidden; } }
@media (max-width: 600px) { .spec__table { padding: var(--space-2) var(--space-5); } .spec__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

.hs { margin: 0; background: var(--ai); color: var(--ai-muted); border-radius: var(--radius-xl); padding: var(--space-6); }
.hs figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-6); }
.hs figcaption strong { color: var(--paper); font-size: var(--fs-body); }
.hs__out { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--shu-soft); font-variant-numeric: tabular-nums; }
.hs__bars { list-style: none; margin: 0; padding: 0; height: 11rem; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-1); align-items: end; }
.hs__bars li { display: grid; grid-template-rows: auto 1fr auto; height: 100%; align-items: end; text-align: center; gap: var(--space-1); }
.hs__bars b { font-size: var(--fs-overline); color: var(--ai-muted); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.hs__bars .bar { display: block; height: calc(var(--h) * 100% + var(--space-1)); min-height: var(--space-2); border-radius: var(--radius-xs) var(--radius-xs) 2px 2px; background: var(--ai-2);
  transform-origin: 50% 100%; transform: scaleY(0); transition: background var(--dur-base) var(--ease-out); align-self: end; }
.hs__bars small { font-size: var(--fs-overline); color: var(--ai-muted); font-variant-numeric: tabular-nums; }
.hs.is-in .bar { animation: grow 900ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 45ms + 200ms); }
@keyframes grow { to { transform: none; } }
.hs__bars li:hover .bar { background: var(--shu-soft); }
.hs__bars li:hover b, .hs__bars li.is-sel b, .hs__bars li:first-child b, .hs__bars li:last-child b { opacity: 1; }
.hs__bars li.is-sel .bar { background: var(--accent); }
.hs__bars li.is-sel b, .hs__bars li.is-sel small { color: var(--paper); font-weight: var(--fw-extra); }
.hs__axis { display: flex; justify-content: space-between; font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: var(--space-3) 0 var(--space-4); }
.hs .note { color: var(--ai-muted); margin: 0; }
/* 데이터 팩: 용량 탱크 3칸 */
.dp__tanks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.dp__tanks li { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.dp__tanks .tank { width: 100%; max-width: 6rem; height: 9rem; border-radius: var(--radius-lg); background: var(--ai-2); position: relative; overflow: hidden; display: block; }
.dp__tanks .tank::after { content: ""; position: absolute; inset: 0 0 auto; height: var(--space-3); background: repeating-linear-gradient(90deg, var(--ink-300) 0 var(--space-1), transparent var(--space-1) var(--space-2)); opacity: 0.35; }
.dp__tanks .tank i { position: absolute; inset: auto 0 0; height: calc(var(--h) * 88% + 12%); background: var(--shu-soft); transform-origin: 50% 100%; transform: scaleY(0); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.dp.is-in .tank i { animation: grow 1.1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 140ms + 200ms); }
.dp__tanks b { color: var(--paper); font-size: var(--fs-h4); }
.dp__tanks small { font-size: var(--fs-caption); }
.dp__tanks li.is-sel .tank { box-shadow: 0 0 0 3px var(--accent); }
.dp__tanks li.is-sel .tank i { background: var(--accent); }
.dp__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-caption); margin: var(--space-5) 0 var(--space-3); }
.dp__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.dp__legend i { width: 0.75rem; height: 0.75rem; border-radius: var(--radius-xs); background: var(--shu-soft); }
.dp__legend i.slow { background: var(--ai-2); outline: 1px solid var(--ai-line); }

/* ---------- 제한 카드 · 요건 카드 · 다음 단계 카드 공통 ---------- */
.lims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.lims--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lim, .req, .nxt { background: var(--paper); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.lim:hover, .req:hover, .nxt:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sec--paper .lim { background: var(--canvas); }
.lim h3, .req h3, .nxt h3 { font-size: var(--fs-h4); margin: var(--space-2) 0 0; }
.lim p, .req p, .nxt p { margin: 0; font-size: var(--fs-body-sm); }
.lim:first-child { background: var(--ai); color: var(--ai-muted); }
.lim:first-child h3 { color: var(--paper); }
.lim:first-child .pgb { fill: var(--ai-2); }
.lim:first-child .s { stroke: var(--paper); }
.lim:first-child .t { fill: var(--paper); }
@media (max-width: 1100px) { .lims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lims, .lims--3 { grid-template-columns: minmax(0, 1fr); } }

.req-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.req-wrap h2, .co h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.06; font-weight: var(--fw-extra); }
.req-lead { font-size: var(--fs-lead); color: var(--ink-500); }
.req-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-6); }
.reqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.req { background: var(--canvas); padding: var(--space-6); }
@media (max-width: 960px) { .req-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
@media (max-width: 480px) { .reqs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 세 요금제 비교 ---------- */
.cmp3 { background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.cmp3__scroll { overflow-x: auto; }
.cmp3 table { width: 100%; border-collapse: collapse; min-width: 40rem; }
.cmp3 th, .cmp3 td { padding: var(--space-4) var(--space-5); text-align: left; vertical-align: top; font-size: var(--fs-body-sm); border-bottom: 1px solid var(--ink-100); }
.cmp3 thead th { vertical-align: top; padding-top: var(--space-6); position: relative; }
.cmp3 thead th a { display: block; margin-top: var(--space-2); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink-900); }
.cmp3 thead th a:hover { color: var(--accent); }
.cmp3 thead em { position: absolute; top: var(--space-6); right: var(--space-5); font-style: normal; font-size: var(--fs-overline); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--accent-contrast); background: var(--accent); border-radius: var(--radius-pill); padding: 0.25rem 0.625rem; }
.cmp3 tbody th { color: var(--ink-900); font-weight: var(--fw-semibold); width: 18%; }
.cmp3 .is-this { background: var(--accent-tint); }
.cmp3 td.is-this { color: var(--ink-900); font-weight: var(--fw-semibold); }
.cmp3__price b { font-size: var(--fs-h4); color: var(--ink-900); }
.cmp3__go td, .cmp3__go th, .cmp3__price td, .cmp3__price th { border-bottom: 0; }
.cmp3 .btn--sm { padding: var(--space-3) var(--space-5); }
.cmp3__note { margin-top: var(--space-4); }

/* ---------- 설치 가이드 ---------- */
.ostabs { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--ink-50); }
.ostabs button { font: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); border: 0; cursor: pointer; padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-500); display: inline-flex; align-items: center; gap: var(--space-2); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.ostabs button:hover { color: var(--ink-900); }
.ostabs button[aria-pressed="true"] { background: var(--ink-900); color: var(--paper); }
.ostabs--hero { background: var(--hero-fill-strong); border: 1px solid var(--hero-line); backdrop-filter: blur(6px); margin-top: var(--space-2); }
.ostabs--hero button { color: var(--hero-muted); padding: var(--space-3) var(--space-6); font-size: var(--fs-body); }
.ostabs--hero button:hover { color: var(--paper); }
.ostabs--hero button[aria-pressed="true"] { background: var(--paper); color: var(--ink-900); }
html[data-os="ios"] [data-os-only="android"], html[data-os="android"] [data-os-only="ios"] { display: none !important; }
.no-js [data-os-only] { display: block !important; }

.guidebar { position: sticky; top: 4.5rem; z-index: calc(var(--z-header) - 1); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-xs); }
.guidebar__in { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-3); }
.stages { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.stg { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); color: var(--ink-700); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.stg:hover { background: var(--ink-50); color: var(--ink-900); }
.stg span { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent-700); display: grid; place-items: center; font-size: var(--fs-caption); }
@media (max-width: 760px) { .guidebar .ostabs { display: none; } }
.stage { scroll-margin-top: 8.5rem; }
.stage-n { font-variant-numeric: tabular-nums; color: var(--ink-900); margin-right: var(--space-1); }

.howto { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--space-12); align-items: center; }
.methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.methods .note, .methods .tip { grid-column: 1 / -1; }
#st3 .methods { grid-template-columns: minmax(0, 1fr); }
.method { background: var(--paper); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-sm); }
.sec--paper .method { background: var(--canvas); box-shadow: none; }
.method header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.method h3 { margin: 0; font-size: var(--fs-h4); }
.olist { list-style: none; counter-reset: ol; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.olist li { counter-increment: ol; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); font-size: var(--fs-body-sm); align-items: start; }
.olist li::before { content: counter(ol); width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); background: var(--ink-900); color: var(--paper); display: grid; place-items: center; font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.osnote { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; }
.tip { display: flex; gap: var(--space-4); align-items: center; background: var(--paper); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); }
.tip p { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-800); }
@media (max-width: 960px) { .howto { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
@media (max-width: 640px) { .methods { grid-template-columns: minmax(0, 1fr); } }

/* 휴대폰 목업(CSS — 실제 OS 화면·로고 아님) */
.ph { width: min(17rem, 100%); margin-inline: auto; aspect-ratio: 9 / 16; border-radius: 2.75rem; background: var(--ink-900); padding: 0.65rem; position: relative; box-shadow: var(--shadow-xl); }
.ph::before { content: ""; position: absolute; top: 1.15rem; left: 50%; width: 32%; height: 1.4rem; transform: translateX(-50%); border-radius: var(--radius-pill); background: var(--ink-800); z-index: 3; }
.ph__s { position: relative; height: 100%; border-radius: 2.15rem; background: var(--canvas); padding: 3.25rem var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden; }
.ph--hero { width: min(16rem, 80%); }
.ph--sm { width: min(14rem, 100%); aspect-ratio: 9 / 12.5; }
.ui-top { font-weight: var(--fw-extra); color: var(--ink-900); font-size: var(--fs-body); }
.ui-line { height: 2.25rem; border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-xs); }
.ui-line.short { width: 70%; }
.ui-done { width: 4rem; height: 4rem; border-radius: var(--radius-pill); background: var(--success-tint); color: var(--success); display: grid; place-items: center; margin: var(--space-6) auto var(--space-2); }
.ui-done .ic { width: 2rem; height: 2rem; stroke-width: 2.5; }
.ui-cap--left { text-align: left; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--fs-overline); }
.ui-row .ic { color: var(--ink-400); }
.ui-row span[data-ic] { display: inline-flex; align-items: center; gap: var(--space-2); }
.ui-btn--danger { margin-top: var(--space-2); background: var(--paper); color: var(--accent); box-shadow: var(--shadow-xs); }
.cyc { display: grid; padding: 0; }
.cyc__s { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--space-3); padding: 3.25rem var(--space-4) var(--space-4); opacity: 0; animation: cyc4 12s infinite var(--ease-standard); }
.cyc__s:nth-child(2) { animation-delay: 3s; } .cyc__s:nth-child(3) { animation-delay: 6s; } .cyc__s:nth-child(4) { animation-delay: 9s; }
@keyframes cyc4 { 0% { opacity: 0; transform: translateX(12%); } 4%, 24% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; transform: translateX(-12%); } }
.cyc--3 .cyc__s { animation-name: cyc3; animation-duration: 9s; }
@keyframes cyc3 { 0% { opacity: 0; transform: translateX(12%); } 5%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateX(-12%); } }
.ui-toggle--anim { background: var(--ink-200); transition: background var(--dur-base); }
.ui-toggle--anim::after { right: auto; left: 0.15rem; }
.is-in .ui-toggle--anim { animation: tgbg 600ms var(--ease-out) forwards 700ms; }
.is-in .ui-toggle--anim::after { animation: tgknob 600ms var(--ease-out) forwards 700ms; }
@keyframes tgbg { to { background: var(--success); } }
@keyframes tgknob { to { transform: translateX(0.9rem); } }
.ui-big--late { opacity: 0.25; }
.is-in .ui-big--late { animation: rise2 700ms var(--ease-out) forwards 900ms; }
@keyframes rise2 { to { opacity: 1; } }
.ui-radio { display: flex; align-items: center; gap: var(--space-3); background: var(--paper); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--fs-caption); color: var(--ink-800); box-shadow: var(--shadow-xs); }
.ui-radio i { width: 1rem; height: 1rem; border-radius: var(--radius-pill); border: 2px solid var(--ink-300); flex: none; }
.ui-radio--off span { text-decoration: line-through; text-decoration-color: var(--accent); color: var(--ink-400); }
.ui-radio--on { outline: 2px solid var(--accent); }
.ui-radio--on i { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 45%, transparent 50%); }
.is-in .ui-radio--on { animation: blinkon 2.4s var(--ease-standard) infinite; }
@keyframes blinkon { 0%, 100% { outline-color: var(--accent); } 50% { outline-color: var(--accent-tint); } }

.fix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.fix__item { background: var(--paper); border-radius: var(--radius-xl); padding: var(--space-8); display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-5); align-items: start; box-shadow: var(--shadow-sm); }
.fix__item h3 { font-size: var(--fs-h4); margin: 0 0 var(--space-2); }
.fix__item p { font-size: var(--fs-body-sm); }
.fix__item--wide { grid-column: 1 / -1; }
.fix__item--help { background: var(--ai); color: var(--ai-muted); }
.fix__item--help h3 { color: var(--paper); }
.fix__item--help .olist li { color: var(--ai-muted); }
.fix__item--help .olist li::before { background: var(--accent); }
.fix__item--help .pgb { fill: var(--ai-2); }
.fix__item--help .s { stroke: var(--paper); }
.fix__item--help .btn { margin-top: var(--space-6); }
.fix__item--help .olist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
@media (max-width: 760px) { .fix__item--help .olist { grid-template-columns: minmax(0, 1fr); } }
.fix__item > div > p:last-child { margin-bottom: 0; }
.fix__body--split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: start; }
.apn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; margin-block: var(--space-4); }
.apn__table { overflow-x: auto; border-radius: var(--radius-lg); background: var(--canvas); }
.apn table { border-collapse: collapse; width: 100%; font-size: var(--fs-body-sm); }
.apn th, .apn td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink-100); vertical-align: top; }
.apn thead th { font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-400); }
.apn tbody th { color: var(--ink-900); font-weight: var(--fw-semibold); white-space: nowrap; }
.apn tr:last-child :is(th, td) { border-bottom: 0; }
.apn code { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-900); word-break: break-all; }
@media (max-width: 600px) {
  .apn thead { display: none; }
  .apn tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink-100); }
  .apn tr:last-child { border-bottom: 0; }
  .apn th, .apn td { border: 0; padding: var(--space-1) 0; }
  .apn td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-2); }
  .apn td::before { content: attr(data-l); font-size: var(--fs-caption); color: var(--ink-400); }
}
.tips { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--fs-body-sm); }
.tips li::marker { color: var(--accent); }
@media (max-width: 1024px) { .apn, .fix__body--split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .fix { grid-template-columns: minmax(0, 1fr); } .fix__item { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); } }

/* ---------- 결제 전 고지 ---------- */
.pg-co { background: var(--canvas); }
.co { padding-top: calc(4.5rem + var(--space-12));
  background-image: radial-gradient(var(--ink-200) 1px, transparent 1.5px); background-size: var(--space-5) var(--space-5); }
.secure { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--success); }
.co-steps { list-style: none; margin: 0 0 var(--space-10); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); }
.co-steps li { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--ink-400); position: relative; }
.co-steps li span { width: 2rem; height: 2rem; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--ink-200); }
.co-steps li.done { color: var(--ink-700); } .co-steps li.done span { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper); }
.co-steps li.on { color: var(--ink-900); } .co-steps li.on span { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); animation: pulse2 2.2s infinite var(--ease-standard); }
@keyframes pulse2 { 0% { box-shadow: 0 0 0 0 var(--accent-ring); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr); gap: var(--space-10); align-items: start; }
.co h1 { margin-bottom: var(--space-3); }
.co .lead { font-size: var(--fs-lead); color: var(--ink-500); max-width: 40rem; }
.co-h2 { font-size: var(--fs-h4); margin: var(--space-8) 0 var(--space-4); }
.notices { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.notice { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-5); background: var(--paper); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-xs); }
.notice h3 { font-size: var(--fs-body); margin: var(--space-1) 0 var(--space-1); }
.notice p { margin: 0; font-size: var(--fs-body-sm); }
.cond--co { margin: var(--space-3) 0 0; background: var(--accent-tint); }
.co-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-3) !important; }
.consents { margin-top: var(--space-6); background: var(--paper); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-md); display: grid; gap: var(--space-4); }
.consent { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; cursor: pointer; font-size: var(--fs-body-sm); color: var(--ink-800); position: relative; }
.consent input { position: absolute; opacity: 0; width: 1.5rem; height: 1.5rem; margin: 0; cursor: pointer; }
.consent .box { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-xs); border: 2px solid var(--ink-300); background: var(--paper); display: grid; place-items: center;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.consent .box::after { content: ""; width: 0.45rem; height: 0.8rem; border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); margin-top: -0.15rem; transition: transform var(--dur-base) var(--ease-out); }
.consent input:checked + .box { background: var(--accent); border-color: var(--accent); }
.consent input:checked + .box::after { transform: rotate(45deg) scale(1); }
.consent input:focus-visible + .box { box-shadow: var(--ring); }
.consent:hover .box { border-color: var(--ink-500); }
.co-pay { width: 100%; }
.co-hint { margin: 0; text-align: center; }
.co-draft { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--warning-tint); color: var(--ink-900); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); text-align: center; }
.co-sum { position: sticky; top: calc(4.5rem + var(--space-6)); }
.ticket { background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-6); position: relative; }
.ticket::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--space-2); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--accent); }
.ticket__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
.ticket__pg > [hidden] { display: none; }
.ticket__name small { display: block; font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-400); font-weight: var(--fw-bold); }
.ticket__name h2 { font-size: var(--fs-h4); margin: 0; }
.ticket__rows { margin: var(--space-5) 0 0; display: grid; gap: var(--space-2); }
.ticket__rows > div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-body-sm); }
.ticket__rows > div[hidden] { display: none; }
.ticket__rows dt { color: var(--ink-500); } .ticket__rows dd { margin: 0; color: var(--ink-900); font-weight: var(--fw-semibold); text-align: right; }
.ticket__perf { height: 0; border-top: 2px dashed var(--ink-200); margin: var(--space-5) calc(-1 * var(--space-6)); position: relative; }
.ticket__perf::before, .ticket__perf::after { content: ""; position: absolute; top: calc(-1 * var(--space-3)); width: var(--space-6); height: var(--space-6); border-radius: var(--radius-pill); background: var(--canvas); }
.ticket__perf::before { left: calc(-1 * var(--space-3)); } .ticket__perf::after { right: calc(-1 * var(--space-3)); }
.ticket__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.ticket__total > span:first-child { font-weight: var(--fw-semibold); color: var(--ink-700); }
.ticket .perday { margin: 0 0 var(--space-4); }
.fx { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-body-sm); color: var(--ink-700); background: var(--canvas); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); }
.fx .ic { color: var(--accent); margin-top: 0.15em; }
.ticket .note { margin: 0 0 var(--space-4); }
.ticket__foot { margin-bottom: var(--space-3); }
.co-sold { margin: 0; font-size: var(--fs-caption); color: var(--ink-400); }
@media (max-width: 960px) { .co-grid { grid-template-columns: minmax(0, 1fr); } .co-sum { position: static; order: -1; } }
@media (max-width: 600px) { .notice { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .co-steps { gap: var(--space-2) var(--space-4); } }

.nxts { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.nxts__line { position: absolute; left: 10%; right: 10%; top: 4rem; width: 80%; height: var(--space-2); z-index: 0; }
.nxt { position: relative; z-index: 1; background: var(--canvas); align-items: flex-start; }
@media (max-width: 760px) { .nxts { grid-template-columns: minmax(0, 1fr); } .nxts__line { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cyc__s { animation: none; opacity: 0; } .cyc__s:first-child { opacity: 1; }
  .hs__bars .bar, .dp__tanks .tank i { transform: none; animation: none; }
  .ui-big--late { opacity: 1; }
}
.no-js .hs__bars .bar, .no-js .dp__tanks .tank i { transform: none; }
.no-js .cyc__s:first-child { opacity: 1; animation: none; }

.sec--paper .faq details { background: var(--canvas); }

/* 설치 가이드 — 받은 메일 목업(메일 실제 구성은 확정 전 — 보고 「확인 필요」) */
.mailmock { grid-column: 1 / -1; background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; }
.mailmock__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--ink-900); color: var(--paper); font-size: var(--fs-body-sm); }
.mailmock__bar small { margin-left: auto; color: var(--ink-300); font-size: var(--fs-caption); letter-spacing: var(--tracking-wide); }
.mailmock__body { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5); align-items: center; }
.mailmock__qr { aspect-ratio: 1; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.mailmock__qr svg { width: 100%; height: 100%; display: block; }
.mailmock__qr::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; top: 0; background: var(--accent); animation: scan 2.4s var(--ease-standard) infinite; }
.mailmock__cta { position: relative; overflow: hidden; display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border-radius: var(--radius-md); background: var(--accent-tint); text-align: center; }
.mailmock__cta::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; top: 0; background: var(--accent); animation: scan 2.4s var(--ease-standard) infinite; }
.mailmock__ic { color: var(--accent); } .mailmock__ic .ic { width: 2rem; height: 2rem; }
.mailmock__cta .btn { pointer-events: none; max-width: 100%; white-space: normal; text-align: center; }
.mailmock__cta small { font-size: var(--fs-caption); color: var(--ink-500); line-height: var(--lh-snug, 1.4); }
.mailmock dl { margin: 0; display: grid; gap: var(--space-2); }
.mailmock dl > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-3); align-items: center; font-size: var(--fs-caption); }
.mailmock dt { color: var(--ink-500); font-weight: var(--fw-semibold); }
.mailmock dd { margin: 0; }
.mailmock dd i { display: block; height: var(--space-3); border-radius: var(--radius-pill); background: var(--ink-100); }
.mailmock dl > div:nth-child(2) dd i { width: 80%; } .mailmock dl > div:nth-child(3) dd i { width: 95%; } .mailmock dl > div:nth-child(4) dd i { width: 40%; background: var(--accent-tint); }
@media (max-width: 600px) { .mailmock__body { grid-template-columns: minmax(0, 1fr); } .mailmock__cta { justify-self: stretch; } .mailmock dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
.tl--paper { background: var(--paper); }
.sec--paper .tip { background: var(--canvas); }

/* 사진 히어로 위 헤더 가독(밝은 하늘·창 사진에서 흰 내비가 묻히던 자리 — fr S 렌더 11-05) */
.hero2--detail::after, .hero2--guide::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ai) 70%, transparent) 0%, transparent 18%),
              linear-gradient(90deg, color-mix(in srgb, var(--ai) 88%, transparent) 0%, color-mix(in srgb, var(--ai) 62%, transparent) 42%, color-mix(in srgb, var(--ai) 8%, transparent) 75%),
              linear-gradient(0deg, color-mix(in srgb, var(--ai) 55%, transparent), transparent 35%); }
@media (max-width: 960px) {
  .hero2--detail::after, .hero2--guide::after { background: linear-gradient(180deg, color-mix(in srgb, var(--ai) 70%, transparent) 0%, color-mix(in srgb, var(--ai) 55%, transparent) 45%, color-mix(in srgb, var(--ai) 92%, transparent) 100%); }
}
.secure { white-space: nowrap; }
@media (max-width: 420px) { .secure { font-size: var(--fs-caption); } }