/* ============================================================
 * find-ref 공개 페이지 셸 — 디자인 시스템 v2 5단계 (2026-10-05)
 *
 * 머리(.fr-top) · 푸터(.fr-foot) · 문서(.fr-doc) · 공용 부품(.fr-*). 루트(검색 화면)는 이 파일을 받지 않는다.
 * 마크업은 scripts/build/findref-shell.js(머리·메뉴 목록·publicPage), 푸터는 src/findref/footer.html.
 * 빌드가 루트가 아닌 모든 페이지 머리에 findref.css 다음으로 넣는다 — 페이지 자신의 <style> 보다 앞이라 페이지가 덮어쓸 수 있다.
 * 색은 --fr-* 토큰만(findref.css). 빌드의 디자인 시스템 검사가 미정의 토큰을 세운다. 빨강·초록·이모지는 쓰지 않는다.
 * 서체의 뜻: 원문(조문·판례 요지·기준서 문단) = 명조, 우리가 쓴 말 = 고딕, 숫자 = 등폭.
 * 글자 크기는 앱과 같은 단계(findref.css --fr-fs-*: 12·13·14·15·16·17·24·34·48·64px)의 px 값만 쓴다(2026-10-07, 앱 ⑥-3b 와 같은 규칙 —
 * 12 아래는 12, 한가운데 값은 역할로: 라벨·메뉴는 아래, 읽는 글·단추는 위). 단계 밖은 워드마크 21px 과 화면 폭에 따르는 clamp 제목뿐.
 * 시안: https://claude.ai/artifact/LhRdoRo1FMNWuXM2aodf8u (Pricing · Coverage · NotFound)
 * ============================================================ */

/* 바탕 — 공용 shared.css 의 body(800px 폭·2rem 여백·회색 글자·다크 #1a1a1a)를 덮는다(html body 로 한 단계 세게).
   옛 페이지 토큰(--c-*: 수록 자료·작동 방식·시행 예정 개정)은 v2 토큰으로 잇는다 — body 에 두어야 다크 모드의 --fr-* 값으로 풀린다 */
html body {
    margin: 0;
    padding: 0;
    max-width: none;
    background: var(--fr-paper);
    color: var(--fr-ink);
    line-height: 1.6;
    --c-bg: var(--fr-paper); --c-panel: var(--fr-paper-2); --c-line: var(--fr-rule); --c-ink: var(--fr-ink); --c-body: var(--fr-ink-2);
    --c-muted: var(--fr-ink-3); --c-field: var(--fr-ink-4); --c-accent: var(--fr-accent); --c-accent-bg: var(--fr-accent-tint);
    --c-on-accent: var(--fr-paper); --c-caution: var(--fr-ochre);
}
html body.dark-mode { background: var(--fr-paper); color: var(--fr-ink); }
/* 주소의 #조각으로 들어온 자리가 붙박이 머리(64px) 밑에 숨지 않게 — 첫 화면의 데이터 처리 한 줄이 /privacy/#ai-data 로 온다(MKT-12) */
[id] { scroll-margin-top: 80px; }
:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }

/* ── 머리 ── 명조 워드마크 + 베타, 메뉴는 14px 잉크-3, 지금 페이지는 잉크 + 아래 2px. 스크롤해도 위에 남는다 */
.fr-top { position: sticky; top: 0; z-index: 50; background: var(--fr-paper); border-bottom: 1px solid var(--fr-rule); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .fr-top { background: color-mix(in srgb, var(--fr-paper) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
}
.fr-top-in { max-width: 1040px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); min-height: 64px; display: flex; align-items: center; gap: 0 36px; box-sizing: border-box; }
.fr-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-family: var(--fr-serif); font-size: 21px; font-weight: 500; letter-spacing: -0.015em; line-height: 1; color: var(--fr-ink); text-decoration: none; }
.fr-brand:hover { color: var(--fr-ink); }
.fr-beta { font-family: var(--fr-sans); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--fr-ochre-ink); border: 1px solid var(--fr-ochre); border-radius: var(--fr-radius); padding: 2px 6px 1px; }
.fr-nav { display: flex; gap: 0 26px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fr-nav::-webkit-scrollbar { display: none; }
.fr-nav a { position: relative; display: inline-flex; align-items: center; height: 64px; font-size: 14px; color: var(--fr-ink-3); text-decoration: none; white-space: nowrap; transition: color var(--fr-dur) var(--fr-ease); }
.fr-nav a:hover { color: var(--fr-ink); text-decoration: none; }
.fr-nav a[aria-current="page"] { color: var(--fr-ink); font-weight: 500; }
.fr-nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--fr-ink); }
.fr-nav a:focus-visible { outline-offset: -2px; }
/* 머리 오른쪽 단추 하나(공유 화면 「나도 질문하기」) · 메뉴 없는 머리(커넥터 연결 동의 — 메뉴가 있는 머리에 ?req= 일 때 화면이 이 이름을 붙인다) */
.fr-top .fr-top-cta { flex-shrink: 0; margin-left: auto; height: 36px; padding: 0 16px; font-size: 14px; }   /* .fr-btn(44px)보다 세게 */
.fr-top--bare .fr-top-in { max-width: 760px; }
.fr-top--bare .fr-nav { display: none; }
@media (max-width: 640px) {
    .fr-top-in { gap: 0 20px; }
    .fr-beta { display: none; }
    .fr-nav { gap: 0 18px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); }
    /* 끝까지 밀어도 마지막 칸이 흐림(20px) 아래에 걸리지 않게 — 간격 18 + 2 = 20px 빈 칸. 스크롤 상자 끝 padding 은 브라우저마다 달라 칸으로 둔다 */
    .fr-nav::after { content: ''; flex: 0 0 2px; }
    .fr-nav a { height: 56px; font-size: 13px; }
    .fr-top--cta .fr-nav { display: none; }   /* 좁은 화면은 단추를 남기고 메뉴를 감춘다(푸터에 같은 링크가 있다) */
    .fr-top--cta .fr-top-in { min-height: 56px; }
}

/* ── 푸터 ── 안내 링크(개인정보처리방침은 굵게 — 개인정보 보호법 시행령 제31조 "다른 고지와 구분"), 화면 모드 세 칸, 사업자 정보.
   shared.css 가 이 파일보다 뒤에 실리고 footer · body.dark-mode footer 를 꾸미므로 바깥 틀만 한 단계 세게(html body footer.fr-foot) */
html body footer.fr-foot { width: calc(100% - 2 * clamp(16px, 4vw, 40px)); max-width: calc(1040px - 2 * clamp(16px, 4vw, 40px)); margin: 120px auto 0; padding: 32px 0 48px; box-sizing: border-box; border-top: 1px solid var(--fr-rule); text-align: left; font-size: 12px; line-height: 1.7; color: var(--fr-ink-3); }
.fr-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.fr-foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; }
.fr-foot-links a { margin: 0; color: var(--fr-ink-3); text-decoration: none; transition: color var(--fr-dur) var(--fr-ease); }
.fr-foot-links a:hover { color: var(--fr-ink); text-decoration: none; }
.fr-foot-links .fr-foot-privacy { font-weight: 600; color: var(--fr-ink-2); }
.fr-theme { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); }
.fr-theme button { height: 26px; padding: 0 10px; border: 0; border-radius: 1px; background: transparent; font-family: inherit; font-size: 12px; color: var(--fr-ink-3); cursor: pointer;
    transition: background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease); }
.fr-theme button:hover { color: var(--fr-ink); }
.fr-theme button[aria-pressed="true"] { background: var(--fr-btn); color: var(--fr-btn-ink); }
.fr-foot .footer-business { margin-top: 24px; font-size: 12px; line-height: 1.8; color: var(--fr-ink-3); }
/* 공용 shared.css(다른 사이트도 함께 쓴다)의 body.dark-mode .footer-business { color: #666 } 이 위 규칙보다 세서(0,2,1 > 0,2,0) 다크에서
   사업자 정보가 #666 / #0f1115 = 3.29:1 이었다(2026-10-07 운영 실측 — /pricing/·/terms/ 등 푸터 전부). shared.css 는 두고 여기서 같은 세기로 되돌린다 */
body.dark-mode .fr-foot .footer-business { color: var(--fr-ink-3); }
.fr-foot .footer-business p { margin: 0; }
.fr-foot .footer-business a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* shared.css 의 body.dark-mode .footer-copyright(#666, 다크 바탕 3.29:1)가 뒤에 실려 이겼다 — 더 구체적으로(2026-10-05 대비 실측) */
html body .fr-foot .footer-copyright { margin-top: 16px; font-size: 12px; color: var(--fr-ink-3); }

/* ── 본문 틀 ── 생성 페이지의 <main class="fr-page"> 와 손으로 쓴 문서(.fr-doc) */
.fr-page { max-width: 1040px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 40px) 0; box-sizing: border-box; }
.fr-page--narrow { max-width: 800px; }
.fr-eyebrow { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--fr-ink-3); }
.fr-h1 { margin: 16px 0 0; font-family: var(--fr-serif); font-size: clamp(32px, 4vw, 48px); line-height: 1.18; font-weight: 300; letter-spacing: -0.025em; color: var(--fr-ink); }
.fr-lead { margin: 18px 0 0; max-width: 640px; font-size: 17px; line-height: 1.75; color: var(--fr-ink-2); }
/* 메타 줄(날짜·사건번호·수집 기준) — 한글이 섞이므로 고딕 + 표 숫자. 숫자만인 칸은 .fr-mono(findref.css) */
.fr-meta { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--fr-ink-3); }
.fr-sec { margin-top: 72px; }
.fr-h2 { margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--fr-ink); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; color: var(--fr-ink); }
.fr-prose { max-width: 680px; }
.fr-prose p, .fr-prose li { font-size: 15px; line-height: 1.8; color: var(--fr-ink-2); }
/* 원문 — 조문·판례 요지·기준서 문단은 명조(우리가 쓴 설명과 갈린다) */
.fr-quote { margin: 16px 0; padding: 0 0 0 20px; border-left: 1px solid var(--fr-rule-2); font-family: var(--fr-serif); font-size: 15px; line-height: 1.85; color: var(--fr-ink); }
.fr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fr-table th, .fr-table td { padding: 14px 16px 14px 0; border-top: 1px solid var(--fr-rule); text-align: left; vertical-align: top; }
.fr-table thead th { padding-top: 0; padding-bottom: 10px; border-top: 0; border-bottom: 1px solid var(--fr-rule-2); font-size: 12px; font-weight: 500; color: var(--fr-ink-3); white-space: nowrap; }
.fr-table .num { text-align: right; font-family: var(--fr-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: var(--fr-radius); font-family: inherit; font-size: 15px; font-weight: 500;
    text-decoration: none; cursor: pointer; box-sizing: border-box; transition: background var(--fr-dur) var(--fr-ease), border-color var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease); }
.fr-btn--ink { border: 0; background: var(--fr-btn); color: var(--fr-btn-ink); }
.fr-btn--ink:hover { background: var(--fr-btn-hover); color: var(--fr-btn-ink); text-decoration: none; }
.fr-btn--line { border: 1px solid var(--fr-rule-2); background: var(--fr-paper); color: var(--fr-ink); }
.fr-btn--line:hover { border-color: var(--fr-ink-3); background: var(--fr-paper-2); color: var(--fr-ink); text-decoration: none; }
/* 안내 상자 — 왼쪽 색띠 대신 옅은 면 + 사각 표식. 주의만 황토 */
.fr-note { position: relative; margin: 20px 0; padding: 16px 20px 16px 40px; background: var(--fr-paper-2); border-radius: var(--fr-radius); font-size: 14px; line-height: 1.75; color: var(--fr-ink-2); }
.fr-note::before { content: ''; position: absolute; left: 20px; top: 25px; width: 7px; height: 7px; background: var(--fr-ink-3); }
.fr-note--caution { background: var(--fr-ochre-tint); }
.fr-note--caution::before { background: var(--fr-ochre); }
.fr-note p { margin: 0; }
.fr-note strong { color: var(--fr-ink); font-weight: 600; }

/* 빵부스러기 — 목록 › 지금 페이지(시행 예정 개정 법령 쪽·판례 쟁점 허브) */
.fr-crumb { margin: 0 0 18px; font-size: 13px; color: var(--fr-ink-3); }
body .fr-crumb a { color: var(--fr-ink-3); text-decoration: none; }   /* 페이지의 「.xx a { 남색 }」 보다 세게 */
body .fr-crumb a:hover { color: var(--fr-ink); text-decoration: underline; text-underline-offset: 3px; }
/* 칸 이름 — 원천 요지 위의 작은 이름(「판결요지(법원)」 「요지(국세청 작성)」 …). 원문(.fr-quote) 바로 위에 둔다 */
.fr-label { margin: 12px 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--fr-ink-3); }
.fr-label + .fr-quote { margin-top: 6px; }
/* 키·값 목록(dl) — 이름은 캡션 색, 값은 본문 색. 좁은 화면은 위아래로 쌓는다 */
.fr-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-size: 14px; line-height: 1.65; }
.fr-dl dt { color: var(--fr-ink-3); }
.fr-dl dd { margin: 0; min-width: 0; color: var(--fr-ink-2); overflow-wrap: anywhere; }
/* 조문 줄 — 행마다 div + 음수 text-indent(매달린 들여쓰기). 서체(명조)는 감싸는 쪽이 정한다.
   값은 검색 화면 근거 패널 넓은 폭(ai-chat.html .law-line--d*)과 같다. 시행 예정 개정(/changes/)·판례 쟁점 허브가 같이 쓴다.
   박스 줄(별표·표)은 칸을 맞춰야 해서 한글 고정폭 글꼴을 먼저 찾는다 — Plex Mono 에는 한글이 없어 칸이 어긋난다 */
.law-line { white-space: normal; overflow-wrap: anywhere; }
.law-line--d0 { padding-left: 20px; text-indent: -20px; }
.law-line--d1 { padding-left: 39px; text-indent: -21px; }
.law-line--d2 { padding-left: 59px; text-indent: -23px; }
.law-line--d3 { padding-left: 79px; text-indent: -25px; }
.law-line--box { white-space: pre; overflow-x: auto; font-family: 'D2Coding', 'Nanum Gothic Coding', ui-monospace, monospace; font-size: 12px; line-height: 1.5; }
@media (max-width: 720px) {
    .fr-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .fr-dl dt { margin-top: 6px; }
    .law-line--d0 { padding-left: 18px; text-indent: -18px; }
    .law-line--d1 { padding-left: 31px; text-indent: -19px; }
    .law-line--d2 { padding-left: 45px; text-indent: -21px; }
    .law-line--d3 { padding-left: 59px; text-indent: -23px; }
}

/* ── 문서(.fr-doc) ── 요금 안내처럼 제목·번호 절·표로 된 글. 약관·방침·환불도 이 틀로 옮긴다(5b) */
.fr-doc { max-width: 1040px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 40px) 0; box-sizing: border-box; line-height: 1.8; color: var(--fr-ink-2); }
.fr-doc > * { max-width: 760px; }
.fr-doc > h1 { margin: 0; font-family: var(--fr-serif); font-size: clamp(32px, 4vw, 46px); line-height: 1.18; font-weight: 300; letter-spacing: -0.025em; color: var(--fr-ink); }
.fr-doc > .subtitle { margin: 18px 0 56px; max-width: 640px; font-size: 17px; line-height: 1.75; color: var(--fr-ink-2); }
.fr-doc h2 { margin: 56px 0 18px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--fr-ink); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; color: var(--fr-ink); }
.fr-doc h3 { margin: 32px 0 10px; font-size: 15px; font-weight: 600; color: var(--fr-ink); }
.fr-doc p, .fr-doc li { font-size: 15px; line-height: 1.8; color: var(--fr-ink-2); }
.fr-doc strong { color: var(--fr-ink); font-weight: 600; }
.fr-doc ol, .fr-doc ul { padding-left: 1.4em; }
.fr-doc ol > li { margin-bottom: 8px; }
.fr-doc ul > li { margin-bottom: 4px; list-style-type: disc; }
.fr-doc a { color: var(--fr-accent); text-decoration: underline; text-decoration-color: var(--fr-accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fr-doc a:hover { text-decoration-color: var(--fr-accent); }
.fr-doc table { width: 100%; border-collapse: collapse; margin: 20px 0 8px; font-size: 14px; }
.fr-doc th, .fr-doc td { padding: 14px 20px 14px 0; border: 0; border-top: 1px solid var(--fr-rule); background: none; text-align: left; vertical-align: top; }
.fr-doc th:last-child, .fr-doc td:last-child { padding-right: 0; }
.fr-doc tbody tr:last-child > * { border-bottom: 1px solid var(--fr-rule); }
.fr-doc thead th { padding-top: 0; padding-bottom: 10px; border-top: 0; border-bottom: 1px solid var(--fr-rule-2); font-size: 12px; font-weight: 500; color: var(--fr-ink-3); white-space: nowrap; }
.fr-doc tbody th { width: 9.5rem; font-weight: 500; color: var(--fr-ink); white-space: nowrap; }
.fr-doc td { line-height: 1.75; color: var(--fr-ink-2); }
.fr-doc td.num, .fr-doc th.num { text-align: right; white-space: nowrap; }
.fr-doc td.num { font-family: var(--fr-mono); font-variant-numeric: tabular-nums; color: var(--fr-ink); }
.fr-doc .highlight-box { position: relative; margin: 20px 0; padding: 16px 20px 16px 40px; background: var(--fr-paper-2); border: 0; border-radius: var(--fr-radius); font-size: 14px; line-height: 1.75; color: var(--fr-ink-2); }
.fr-doc .highlight-box::before { content: ''; position: absolute; left: 20px; top: 25px; width: 7px; height: 7px; background: var(--fr-ink-3); }
.fr-doc .note { font-size: 13px; line-height: 1.7; color: var(--fr-ink-3); }
.fr-doc .cta { display: inline-flex; align-items: center; height: 40px; margin: 8px 0 0; padding: 0 18px; border: 1px solid var(--fr-rule-2); border-radius: var(--fr-radius); background: var(--fr-paper);
    font-size: 14px; font-weight: 500; color: var(--fr-ink); text-decoration: none; transition: border-color var(--fr-dur) var(--fr-ease), background var(--fr-dur) var(--fr-ease); }
.fr-doc .cta:hover { border-color: var(--fr-ink-3); background: var(--fr-paper-2); }
/* 좁은 화면 — 머리칸 줄바꿈을 허용하고 긴 낱말은 칸 안에서 꺾는다(진단 PUX-24: 방침의 국외 이전 표가 390px 에서 가로로 넘쳤다) */
@media (max-width: 640px) {
    .fr-doc tbody th { width: auto; }
    .fr-doc th, .fr-doc thead th { white-space: normal; }
    .fr-doc th, .fr-doc td { padding-right: 12px; overflow-wrap: anywhere; word-break: keep-all; }
}

/* 손가락으로 누르는 기기 — 누름 영역 44px(개선점 I3, 앱 화면 ai-chat.html 과 같은 규칙). 꼬리말 링크는 줄이 촘촘해(6px) 투명 영역을
   넓히면 윗줄·아랫줄이 겹친다 — 링크 자체를 44px 줄로 */
@media (pointer: coarse) {
    .fr-brand { min-height: 44px; }
    .fr-top .fr-top-cta { height: 44px; }
    .fr-foot-links { row-gap: 0; }
    .fr-foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
    .fr-theme button { height: 44px; min-width: 44px; }
    .fr-doc .cta { height: 44px; box-sizing: border-box; }
}