/* ============================================================
 * find-ref 디자인 시스템 v2 — 토큰과 바탕 (2026-10-05)
 *
 * 시안: https://claude.ai/artifact/LhRdoRo1FMNWuXM2aodf8u (5 디자인 시스템 · 개선점)
 * 2026-09-05 확정안(정밀 도구 톤 · 근거 우선 구조)을 한 단계 올린 체계다. 그대로인 것:
 * 무채색 램프 + 강조 남색 하나 + 주의 황토 하나, 빨강·초록 금지, 2px 모서리, 감속 곡선 하나.
 * 새로 정한 것: 서체 세 가족과 각자의 의미 —
 *   원문(조문·판례 요지·기준서 문단)은 명조(--fr-serif), AI 가 쓴 말과 UI 는 고딕(--fr-sans), 숫자는 등폭(--fr-mono).
 *   색 하나에 의미 하나 — 주 버튼은 잉크(--fr-btn), 남색은 근거로 이어지는 것(인용·링크·포커스)에만, 황토는 주의에만.
 *
 * 빌드(scripts/build-findref.js)가 모든 find-ref 페이지 머리의 viewport 바로 뒤에 이 파일과 /css/fonts.css 를 넣는다 —
 * 페이지 자신의 <style> 보다 앞이라 페이지가 덮어쓸 수 있다. 블로그 빌드는 이 파일을 모른다(src/findref 는 find-ref 전용).
 * 다크 모드는 body.dark-mode 하나로 뒤집힌다. 그 클래스를 거는 것은 머리의 테마 초기화(밝게·어둡게·시스템, 기본 시스템)다.
 * ============================================================ */

/* 대체 글꼴 맞춤(개선점 K2) — 웹폰트(/css/fonts.css, swap)가 오기 전·끝내 못 올 때 그리는 시스템 글꼴을 웹폰트 치수에 맞춘다.
 * 그래야 웹폰트가 와도 줄바꿈·높이가 그대로라 화면이 뛰지 않는다. 플랫폼마다 글꼴이 달라 가족을 나눈다 — local() 이 없는
 * 기기에서는 그 가족이 통째로 빠지고 다음 가족으로 넘어간다(맥 → 윈도 → 아래 토큰의 시스템 글꼴).
 * 값은 같은 글(앱 답변·UI 문구, 조문 원문, 숫자)을 100px 로 그린 폭·ascent·descent 비 — size-adjust = 웹폰트 폭 / 대체 폭,
 * *-override = 웹폰트 치수 / size-adjust. 2026-10-07 macOS Chrome 실측(맑은 고딕·바탕은 같은 맥의 Office 판).
 * local() 은 가족 이름이 아니라 글꼴 전체 이름·PostScript 이름에만 붙는다('Apple SD Gothic Neo' 는 안 붙고 'Apple SD Gothic Neo Regular' 는 붙는다).
 * 윈도 등폭(Consolas)은 이 기기에 없어 재지 못했다 — 숫자 글꼴이라 줄바꿈 영향이 작아 두지 않는다.
 * unicode-range 는 웹폰트가 가진 글자(한글·라틴·문장부호, 등폭은 라틴만)로 좁힌다 — 웹폰트에 없는 한자(法·條)·원문자(①)·낫표(「」)는
 * 웹폰트가 온 뒤에도 스택의 다음 가족으로 그려지는데, 범위를 안 좁히면 그게 크기 보정된 이 가족이 되어 한자만 89.85%(명조)로
 * 작아진다. 범위 밖 글자는 이 가족을 건너뛰어 예전처럼 시스템 글꼴 100% 로 간다(2026-10-07 PM 검토, CDP 로 그리는 글꼴 확인). */
@font-face { font-family: 'Plex Sans KR Fallback Mac'; src: local('Apple SD Gothic Neo Regular'), local('AppleSDGothicNeo-Regular'); font-weight: 100 450; size-adjust: 102.8%; ascent-override: 106.03%; descent-override: 39.88%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20A9, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; }
@font-face { font-family: 'Plex Sans KR Fallback Mac'; src: local('Apple SD Gothic Neo Medium'), local('AppleSDGothicNeo-Medium'); font-weight: 451 550; size-adjust: 102.8%; ascent-override: 106.03%; descent-override: 39.88%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20A9, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; }
@font-face { font-family: 'Plex Sans KR Fallback Mac'; src: local('Apple SD Gothic Neo SemiBold'), local('AppleSDGothicNeo-SemiBold'); font-weight: 551 900; size-adjust: 102.8%; ascent-override: 106.03%; descent-override: 39.88%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20A9, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; }
@font-face { font-family: 'Plex Sans KR Fallback Win'; src: local('Malgun Gothic'), local('MalgunGothic'); font-weight: 100 550; size-adjust: 88.48%; ascent-override: 123.19%; descent-override: 46.34%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20A9, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; }
@font-face { font-family: 'Plex Sans KR Fallback Win'; src: local('Malgun Gothic Bold'), local('MalgunGothicBold'); font-weight: 551 900; size-adjust: 88.48%; ascent-override: 123.19%; descent-override: 46.34%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20A9, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; }
@font-face { font-family: 'Hahmlet Fallback Mac'; src: local('AppleMyungjo'); font-weight: 100 900; size-adjust: 89.85%; ascent-override: 129.11%; descent-override: 32.28%; line-gap-override: 1.11%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20A9, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; }
@font-face { font-family: 'Hahmlet Fallback Win'; src: local('Batang'); font-weight: 100 900; size-adjust: 91.76%; ascent-override: 126.42%; descent-override: 31.6%; line-gap-override: 1.09%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20A9, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; }
@font-face { font-family: 'Plex Mono Fallback Mac'; src: local('Menlo Regular'), local('Menlo-Regular'); font-weight: 100 900; size-adjust: 99.86%; ascent-override: 102.14%; descent-override: 27.04%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20A9, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --fr-paper: #FFFFFF;
    --fr-paper-2: #F7F8F9;
    --fr-paper-3: #EFF1F4;
    --fr-rule: #E6E8EC;
    --fr-rule-2: #D3D8DF;
    --fr-ink: #16181D;
    --fr-ink-2: #4A5059;
    --fr-ink-3: #6B727C;   /* 캡션 하한 — 흰 바탕 4.86:1. 이보다 옅은 글자는 쓰지 않는다 */
    --fr-ink-4: #9AA1AB;   /* 24px 이상의 글자·장식·비활성에만 */
    --fr-accent: #243B53;
    --fr-accent-2: #1B2E42;
    --fr-accent-tint: #EDF1F6;
    --fr-accent-line: #C9D3DF;
    --fr-ochre: #B07B3C;
    --fr-ochre-ink: #8A5A22;
    --fr-ochre-tint: #F8F1E7;
    --fr-btn: #16181D;
    --fr-btn-hover: #000000;
    --fr-btn-ink: #FFFFFF;
    --fr-scrim: rgba(22, 24, 29, 0.42);

    --fr-serif: 'Hahmlet Variable', 'Hahmlet Fallback Mac', 'Hahmlet Fallback Win', 'Noto Serif KR', 'AppleMyungjo', 'Batang', serif;
    --fr-sans: 'IBM Plex Sans KR', 'Plex Sans KR Fallback Mac', 'Plex Sans KR Fallback Win', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --fr-mono: 'IBM Plex Mono', 'Plex Mono Fallback Mac', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* 글자 크기 단계(시안 design-spec §1, 디자인 v2 ⑥-3) — 크기만 단계로 둔다. 같은 크기를 역할이 여럿 쓴다:
       xs 12 = Micro(라벨·캡션)·Meta(등폭 숫자) / sm 13 = Small / md 14 = 원문(명조)·입력 / base 15 = Body / lg 16 = 답변 본문 /
       xl 17 = Title·결론 / 2xl 24 = Display S / 3xl 34 = Display M / 4xl 48 = Display L / 5xl 64 = Display XL.
       px 로 둔다 — 공용 shared.css 가 html{font-size:14px} 라 rem 은 14 의 배수다(0.8rem = 11.2px). 단계 밖 값은 이유를 주석으로. */
    --fr-fs-xs: 12px;
    --fr-fs-sm: 13px;
    --fr-fs-md: 14px;
    --fr-fs-base: 15px;
    --fr-fs-lg: 16px;
    --fr-fs-xl: 17px;
    --fr-fs-2xl: 24px;
    --fr-fs-3xl: 34px;
    --fr-fs-4xl: 48px;
    --fr-fs-5xl: 64px;

    --fr-radius: 2px;
    --fr-ease: cubic-bezier(.2, 0, 0, 1);
    --fr-dur: 160ms;
    --fr-dur-panel: 240ms;
    --fr-shadow-overlay: 0 24px 64px -24px rgba(22, 24, 29, .28), 0 0 0 1px rgba(22, 24, 29, .06);
    --fr-shadow-object: 0 48px 96px -48px rgba(22, 24, 29, .30), 0 0 0 1px rgba(22, 24, 29, .06);
}

body.dark-mode {
    --fr-paper: #0F1115;
    --fr-paper-2: #15171C;
    --fr-paper-3: #1B1E24;
    --fr-rule: #262A31;
    --fr-rule-2: #353A44;
    --fr-ink: #ECEEF1;
    --fr-ink-2: #B9BFC8;
    --fr-ink-3: #8E95A0;
    --fr-ink-4: #5F6670;
    --fr-accent: #A9BED6;
    --fr-accent-2: #C9D7E6;
    --fr-accent-tint: #18222E;
    --fr-accent-line: #2E3D50;
    --fr-ochre: #D2A469;
    --fr-ochre-ink: #E2BC8A;
    --fr-ochre-tint: #2A2219;
    --fr-btn: #ECEEF1;
    --fr-btn-hover: #FFFFFF;
    --fr-btn-ink: #0F1115;
    --fr-scrim: rgba(0, 0, 0, 0.6);
    --fr-shadow-overlay: 0 24px 64px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .07);
    --fr-shadow-object: 0 48px 96px -48px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .07);
}

/* 공용 shared.css 의 body{font-family:-apple-system…} 보다 세게(html body). 그 파일은 다른 사이트와 공유라 고치지 않는다 */
html body {
    font-family: var(--fr-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.fr-serif { font-family: var(--fr-serif); }
.fr-mono { font-family: var(--fr-mono); font-variant-numeric: tabular-nums; }

/* 세그먼트 — 진짜 라디오(키보드·스크린리더가 그대로 안다)를 덮어 그린다. 화면 모드 세 칸 등 */
.fr-segment { display: inline-flex; gap: 2px; padding: 2px; background: var(--fr-paper-3); border-radius: var(--fr-radius); }
.fr-segment label { position: relative; display: inline-flex; cursor: pointer; }
.fr-segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fr-segment span {
    display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--fr-radius);
    font-size: 13px; color: var(--fr-ink-2); white-space: nowrap;
    transition: background var(--fr-dur) var(--fr-ease), color var(--fr-dur) var(--fr-ease);
}
.fr-segment label:hover span { color: var(--fr-ink); }
.fr-segment input:checked + span { background: var(--fr-paper); color: var(--fr-ink); font-weight: 500; box-shadow: 0 0 0 1px var(--fr-rule); }
body.dark-mode .fr-segment input:checked + span { background: var(--fr-rule-2); box-shadow: none; }
.fr-segment input:focus-visible + span { outline: 2px solid var(--fr-accent); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}