/* ──────────────────────────────────────────────────────────────────────────
   contag.io 부품 v1 (가이드 2층) — tokens.css 다음에 불러온다
   이름 규칙(원칙 35): 부품 = c-이름 · 상태 = is-상태 · 변형 = c-이름--변형 · 섹션 CSS = s0-~s9- (페이지 쪽)
   숫자를 직접 적지 않는다(예외: 기기 틀의 cqw 비율 = 실제 규격, 05 §36)
   ────────────────────────────────────────────────────────────────────────── */

/* ── 바탕 ── */
.c-root { background: var(--c-paper); color: var(--c-ink-900); font: var(--t-body); -webkit-font-smoothing: antialiased; word-break: keep-all; }
.c-wrap { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter); }
.c-wrap--wide { max-width: var(--w-wide); }
.c-section { padding: var(--section-y) 0; }
.c-section--sand { background: var(--c-sand); }
.c-section--night { background: var(--c-night); color: var(--c-on-night); }

/* ── 섹션 머리: 작은 글씨 → 두 줄 제목 → 설명 (모든 섹션 공통 틀) ── */
.c-sechead { max-width: var(--w-title); }
.c-sechead--center { margin: 0 auto; text-align: center; }
.c-eyebrow { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-500); }
.c-eyebrow--ko { font: var(--t-label-ko); letter-spacing: .04em; text-transform: none; }
.c-title { font: var(--t-h2); letter-spacing: var(--ls-h2); margin: var(--s-4) 0 0; text-wrap: balance; }   /* 아래 여백 0 — 브라우저 기본 h2 아래 여백(0.83em ≈ 40px)이 남아 있었음(05 §84) */
.c-sechead > .c-lead { margin-top: var(--s-4); }   /* 제목 ↔ 설명 16px(05 §84) */
.c-title > span:not([class]) { display: block; text-wrap: balance; }   /* 줄 span만(클래스 없는 것) — 제목 속 강조 단어 c-em까지 쪼개던 문제(05 §108) */   /* 두 줄 제목은 줄마다 span — 좁은 화면에서 한 단어만 떨어지지 않게 줄마다 균형(05 §103) */
/* 제목 규칙(🟩 05 §55 결정 2): 16자 이하 = 한 줄(데스크톱) · 쉼표 두 마디 18자 이상 = 쉼표에서 두 줄 · 모바일은 자연 줄바꿈 */
@media (min-width: 860px) { .c-title--one { white-space: nowrap; } .c-sechead:has(.c-title--one) { max-width: none; } }
.c-display { font: var(--t-display); letter-spacing: var(--ls-display); text-wrap: balance; }
.c-lead { font: var(--t-lead); color: var(--c-ink-700); margin-top: var(--s-5); max-width: var(--w-text); text-wrap: pretty; }
.c-sechead--center .c-lead { margin-left: auto; margin-right: auto; }
.c-section--night .c-eyebrow { color: var(--c-on-night-2); }
.c-section--night .c-lead { color: var(--c-on-night-2); }
.c-em { color: var(--c-accent); }                      /* 제목 속 한 단어만(Function 실측: 기울임 대신 색) */
.c-section--night .c-em { color: var(--c-accent-night); }

/* ── 아이콘 ── 24 격자 · 선 1.5 (Lucide) / 면 윤곽 (Phosphor) — 견본에서 비교 중 */
.c-ic { width: var(--icon-md); height: var(--icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icons-phosphor .c-ic { fill: currentColor; stroke: none; }
.c-ic--sm { width: var(--icon-sm); height: var(--icon-sm); }
.c-ic--lg { width: var(--icon-lg); height: var(--icon-lg); }
.c-ic--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* ── 버튼: 알약 · 높이 48(기본)/40(작게) — 실측 Function 50 · Mercury 40 · Serus 36 ── */
.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 48px; padding: 0 var(--s-5); border-radius: var(--r-pill); border: var(--hair) solid transparent; font: 600 16px/1 var(--f-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease), border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease); }
.c-btn:active { transform: translateY(1px); }
.c-btn--primary { background: var(--c-accent); color: var(--c-white); }          /* 페이지에서 가장 중요한 행동 하나(앱 받기) */
.c-btn--primary:hover { background: var(--c-accent-press); }
.c-btn--ink { background: var(--c-ink-900); color: var(--c-paper); }
.c-btn--ink:hover { background: var(--c-ink-700); }
.c-btn--ghost { background: transparent; color: var(--c-ink-900); border-color: var(--c-line); }
.c-btn--ghost:hover { border-color: var(--c-ink-900); }
.c-section--night .c-btn--ghost { color: var(--c-on-night); border-color: var(--c-night-line); }
.c-section--night .c-btn--ghost:hover { border-color: var(--c-on-night); }
.c-btn--sm { height: 40px; padding: 0 var(--s-4); font-size: 15px; }
.c-link { display: inline-flex; align-items: center; gap: var(--s-1); font: 600 16px/1.4 var(--f-sans); color: var(--c-ink-900); text-decoration: none; }
.c-link .c-ic { transition: transform var(--d-1) var(--ease); }
.c-link:hover .c-ic { transform: translateX(3px); }
.c-btn:focus-visible, .c-link:focus-visible, .c-toggle:focus-visible, .c-list > li > button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* ── 주소 알약: 주소 · 번호는 항상 고정폭 알약(05 §47) ── */
.c-addr { display: inline-flex; align-items: center; gap: var(--s-3); height: 52px; padding: 0 var(--s-5) 0 var(--s-4); border-radius: var(--r-pill); background: var(--c-white); border: var(--hair) solid var(--c-line); font: var(--t-address); color: var(--c-ink-900); white-space: nowrap; }
.c-addr i { font-style: normal; color: var(--c-ink-500); }
.c-addr b { font-weight: 400; }
.c-addr .c-ic { color: var(--c-ink-500); }
.c-addr__state { font: 600 12px/1 var(--f-sans); padding: 6px 10px; border-radius: var(--r-pill); background: var(--c-sand); color: var(--c-ink-500); }
.c-addr.is-done { border-color: var(--c-ink-900); }
.c-addr.is-done b { color: var(--c-accent); }
.c-addr.is-done .c-addr__state { background: var(--c-accent); color: var(--c-white); }
.c-addr--lg { height: 64px; padding: 0 var(--s-6) 0 var(--s-5); font-size: 22px; border: 1.5px solid var(--c-ink-900); }
.c-addr--lg .c-ic { width: var(--icon-lg); height: var(--icon-lg); }
@media (max-width: 859px) { .c-addr--lg { height: 52px; padding: 0 var(--s-4) 0 var(--s-3); font-size: 17px; } .c-addr--lg .c-ic { width: var(--icon-md); height: var(--icon-md); } }
.c-addr--muted { height: 44px; padding: 0 var(--s-4) 0 var(--s-3); font-size: 15px; background: transparent; border-color: var(--c-line); color: var(--c-ink-400); }   /* 가려진 번호 = 약하게(05 §55 결정 5) */
.c-addr--muted i, .c-addr--muted .c-ic { color: var(--c-ink-400); }
.c-addr--sm { height: 34px; padding: 0 var(--s-3); gap: var(--s-2); font-size: 13.5px; }
.c-addr--sm .c-ic { width: var(--icon-sm); height: var(--icon-sm); }
.c-addr--hidden { background: var(--c-night); border-color: var(--c-night); color: var(--c-on-night); }   /* 가려진 010 */
.c-addr--hidden i, .c-addr--hidden .c-ic { color: var(--c-on-night-2); }

/* ── 장소 표시(선 테두리 + 아이콘) · 상황 표시(테두리 없음) — 둘을 모양으로 구분(05 §46) ── */
.c-chip { display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-4) 0 var(--s-3); border-radius: var(--r-pill); border: var(--hair) solid var(--c-line); background: var(--c-white); font: 500 14px/1 var(--f-sans); color: var(--c-ink-900); white-space: nowrap; }
.c-chip .c-ic { color: var(--c-ink-500); }
.c-chip.is-on { border-color: var(--c-accent); }
.c-chip.is-on .c-ic { color: var(--c-accent); }
.c-tag { display: inline-flex; align-items: center; gap: var(--s-2); font: 500 17px/1.3 var(--f-sans); color: var(--c-ink-900); }
.c-tag .c-ic { color: var(--c-ink-500); }

/* ── 카드 ── */
.c-card { background: var(--c-white); border: var(--hair) solid var(--c-line-soft); border-radius: var(--r-md); padding: var(--s-5); }
.c-card__title { font: var(--t-h3); }
.c-card__text { font: var(--t-small); color: var(--c-ink-500); margin-top: var(--s-2); }
.c-section--night .c-card { background: var(--c-night-2); border-color: var(--c-night-line); }

/* ── 사진 판: 모서리 32 · 16:10 · 제목은 왼쪽 아래(Serus 실측 1171×732 · r32) ── */
.c-panel { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--c-sand); isolation: isolate; }
.c-panel > img, .c-panel > video, .c-panel > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-panel__cap { position: absolute; left: var(--s-6); right: var(--s-6); bottom: var(--s-6); color: var(--c-white); z-index: 2; }
.c-panel__cap b { display: block; font: var(--t-h3); }
.c-panel__cap span { display: block; font: var(--t-small); opacity: .85; margin-top: var(--s-1); }
.c-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45)); z-index: 1; pointer-events: none; }
.c-panel--plain::after { display: none; }
/* 빈자리(원칙 13): 사진이 없으면 빗금 + 규격 */
.c-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); background: repeating-linear-gradient(45deg, var(--c-sand) 0 10px, #ECE6DA 10px 20px); color: var(--c-ink-500); font: var(--t-label); letter-spacing: .06em; text-align: center; padding: var(--s-5); }
.c-ph b { font: var(--t-label-ko); color: var(--c-ink-700); }

/* ── 기기 틀: 실제 규격(05 §36) — 아이폰 17 Pro 150.0×71.9mm(.479) / 갤럭시 S25 146.9×70.5mm(.48). 단위 cqw = 기기 폭의 1% ── */
.c-dev { position: relative; aspect-ratio: 71.9 / 150; container-type: inline-size; filter: drop-shadow(0 30px 40px rgba(31, 32, 35, .28)); }
.c-dev--gx { aspect-ratio: 70.5 / 146.9; }
.c-dev__body { position: absolute; inset: 0; box-sizing: border-box; }
.c-dev__scr { position: absolute; overflow: hidden; background: #000; }
.c-dev__scr > img, .c-dev__scr > .c-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-dev__scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.09), rgba(255,255,255,0) 38%); pointer-events: none; z-index: 5; }
.c-dev__k { position: absolute; border-radius: .7cqw; width: 1.1cqw; }
.c-dev--ip .c-dev__body { border-radius: 16cqw; border: 1.3cqw solid transparent; background: linear-gradient(#050505, #050505) padding-box, linear-gradient(135deg, #b9b5ae, #5f5d59 22%, #d6d2cb 48%, #4c4a47 74%, #a6a29b) border-box; box-shadow: inset 0 0 0 .3cqw #1a1a1a; }
.c-dev--ip .c-dev__scr { inset: 4.4cqw; border-radius: 11.8cqw; }
.c-dev--ip .c-dev__island { position: absolute; top: 7.2cqw; left: 50%; width: 30cqw; height: 8.8cqw; transform: translateX(-50%); border-radius: 6cqw; background: #000; z-index: 6; }
.c-dev--ip .c-dev__k { left: -.8cqw; background: linear-gradient(90deg, #4c4a47, #c9c5bf, #6d6a66); }
.c-dev--ip .c-dev__k.a { top: 17%; height: 5.5%; } .c-dev--ip .c-dev__k.v1 { top: 26%; height: 10%; } .c-dev--ip .c-dev__k.v2 { top: 38.5%; height: 10%; }
.c-dev--ip .c-dev__k.p { left: auto; right: -.8cqw; top: 29%; height: 15%; background: linear-gradient(90deg, #6d6a66, #c9c5bf, #4c4a47); }
.c-dev--gx .c-dev__body { border-radius: 10cqw; border: 1cqw solid transparent; background: linear-gradient(#050505, #050505) padding-box, linear-gradient(90deg, #28282b, #77777d 6%, #303033 50%, #77777d 94%, #28282b) border-box; }
.c-dev--gx .c-dev__scr { inset: 2.9cqw; border-radius: 7.2cqw; }
.c-dev--gx .c-dev__punch { position: absolute; top: 6.2cqw; left: 50%; width: 3.9cqw; height: 3.9cqw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 38% 38%, #27324a, #050608 62%); box-shadow: 0 0 0 .5cqw #000; z-index: 6; }
.c-dev--gx .c-dev__k { right: -.75cqw; background: linear-gradient(90deg, #3a3a3d, #86868c, #3a3a3d); }
.c-dev--gx .c-dev__k.v { top: 21%; height: 13%; } .c-dev--gx .c-dev__k.p { top: 37%; height: 7%; }
.c-dev .c-ph { font-size: 5.5cqw; padding: 8cqw; }
.c-dev .c-ph b { font-size: 6.5cqw; }

/* ── 비교표: 세로선 없음 · 한 줄 건너 옅은 바탕 · ○ = 강조 / ✕ = 회색(Superpower 실측 형식) ── */
.c-compare { width: 100%; border-collapse: collapse; font: var(--t-body); }
.c-compare th { font: var(--t-label-ko); color: var(--c-ink-500); text-align: center; padding: 0 var(--s-4) var(--s-4); }
.c-compare th:first-child { text-align: left; padding-left: var(--s-5); }
.c-compare th.is-us { color: var(--c-ink-900); }
.c-compare td, .c-compare tbody th { padding: var(--s-4) var(--s-5); text-align: center; }
.c-compare tbody th, .c-compare tbody th:first-child { font: var(--t-body); color: inherit; text-align: left; padding: var(--s-4) var(--s-5); }   /* 행 머리글(th scope=row)은 예전 td 첫 칸과 똑같이 */
.c-compare td:first-child { text-align: left; }
.c-compare tbody tr:nth-child(odd) :is(td, th) { background: var(--c-sand); }
.c-compare tbody tr:nth-child(odd) :is(td, th):first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.c-compare tbody tr:nth-child(odd) td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.c-compare tr.is-key :is(td, th) { font-weight: 600; }
.c-mark { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-accent); vertical-align: middle; }     /* ○ */
.c-mark--x { border: 0; border-radius: 0; position: relative; }                                                                                 /* ✕ */
.c-mark--x::before, .c-mark--x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: var(--c-ink-400); border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg); }
.c-mark--x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── 단계: 번호 줄 + 가는 선(Ramp 실측 형식) ── */
.c-steps { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--c-line); }
.c-steps li { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: var(--hair) solid var(--c-line); }
.c-steps__n { font: var(--t-label); letter-spacing: var(--ls-label); color: var(--c-ink-500); padding-top: 3px; }
.c-steps b { display: block; font: var(--t-strong); }
.c-steps span { display: block; font: var(--t-small); color: var(--c-ink-500); margin-top: var(--s-1); }
.c-steps li.is-on .c-steps__n { color: var(--c-accent); }

/* ── 토글: 켜진 상태 = 강조색(05 §47 규칙) ── */
.c-toggle { position: relative; width: 52px; height: 32px; border-radius: var(--r-pill); background: var(--c-line); border: 0; cursor: pointer; transition: background-color var(--d-1) var(--ease); flex: none; }
.c-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-white); box-shadow: var(--sh-1); transition: transform var(--d-1) var(--ease); }
.c-toggle[aria-checked="true"] { background: var(--c-accent); }
.c-toggle[aria-checked="true"]::after { transform: translateX(20px); }

/* ── 세로 목록(6막: 펼침 카드 대신) — 고른 줄만 설명이 열린다 ── */
.c-list { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--c-line); }
.c-list > li { border-bottom: var(--hair) solid var(--c-line); }
.c-list > li > button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) 0; cursor: pointer; font: var(--t-strong); color: var(--c-ink-500); transition: color var(--d-1) var(--ease); }
.c-list > li > button .c-ic { color: var(--c-ink-400); }
.c-list > li.is-on > button, .c-list > li > button:hover { color: var(--c-ink-900); }
.c-list > li.is-on > button .c-ic { color: var(--c-accent); }
.c-list__body { display: none; font: var(--t-small); color: var(--c-ink-500); padding: 0 0 var(--s-4) calc(var(--icon-md) + var(--s-3)); }
.c-list > li.is-on > .c-list__body { display: block; }

/* ── 나타나기: 페이지에서 유일한 기본 움직임(05 §50 결정 3 ②) ── */
[data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* 화면에는 보이지 않고 보조기기만 읽는 글 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }