/* =====================================================================
   디자인 토큰 초안 — 새 웹사이트(자격증·지원금·청약 섹션) 공용 CSS 변수
   2026-10-25 시안용. 아직 프로젝트 코드(apps/·packages/)가 아니라 연구 폴더에만 둔다.

   구조는 세 층이다.
     1) 원시(primitive) 토큰: 실제 색·크기 값. 이름에 뜻이 없다(--p-blue-600).
     2) 의미(semantic) 토큰: 쓰임새 이름(--color-bg, --color-ink). 팔레트·다크 모드가
        바뀌면 이 층의 값만 바뀐다. 컴포넌트는 반드시 이 층만 쓴다.
     3) 컴포넌트 토큰: 특정 부품 전용(--dday-bg 등). 꼭 필요할 때만 만든다.
   팔레트 2안(A 종이 / B 석판)은 <html data-palette="paper|slate">로 고르고,
   다크 모드는 OS 설정(prefers-color-scheme) 또는 <html data-theme="dark">로 켠다.
   ===================================================================== */

/* ---------- 0. 글꼴 불러오기 ----------
   Pretendard 가변 다이나믹 서브셋: 한 굵기 파일 전체(0.77MB)가 아니라 글자 범위(unicode-range)
   92조각 중 페이지에 실제 나오는 조각만 받는다(조사 02번 문서 2-b).
   시안에서는 CDN CSS를 그대로 쓰고, 실제 사이트에서는 self-host + preload 1~2조각으로 바꾼다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* 비교용 후보 글꼴(구글 폰트, 동적 조각): Noto Sans KR · IBM Plex Sans KR. 시안 보기판의 글꼴 선택이 <html data-font>를 바꾼다.
   실제 사이트에서는 하나만 남긴다. (아티팩트 미리보기에서는 보안 정책상 jsdelivr CSS가 막혀 Pretendard 대신 시스템 글꼴이 보인다) */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=IBM+Plex+Sans+KR:wght@400;700&display=swap");

/* 글꼴이 늦게 올 때 자리 이동(CLS)을 줄이는 폴백 글꼴 정의.
   size-adjust로 시스템 글꼴(맑은 고딕 등)의 글자 폭을 Pretendard와 비슷하게 맞춘다. 값은 시안용 근사치. */
@font-face {
  font-family: "Pretendard Fallback";             /* 폴백 전용 이름 */
  src: local("Apple SD Gothic Neo"), local("Malgun Gothic"), local("Noto Sans CJK KR"); /* 기기에 있는 한글 글꼴 */
  size-adjust: 98%;                                /* 폭 보정 */
  ascent-override: 92%;                            /* 윗선 보정 */
  descent-override: 24%;                           /* 아랫선 보정 */
  line-gap-override: 0%;                           /* 줄 간격 추가분 없음 */
}

:root {
  /* ---------- 1. 원시 토큰: 색 ----------
     기존 블로그 테마와 '가족'으로 보이도록 같은 계열에서 골랐다.
     자격증 = 파랑(네이버 자격증 slate #2F6FDE 계열), 지원금 = 주황(네이버 지원금 warm #E8743B 계열),
     청약 = 벽돌(구글 청약 brick #B23A2E 계열). 블로그보다 채도를 조금 낮춰 '사이트' 느낌으로. */
  --p-blue-600: #2B64C9;   /* 자격증 섹션 강조(흰 글자 올려도 4.5:1 넘음) */
  --p-blue-100: #DCE7FA;   /* 자격증 연한 바탕 */
  --p-orange-600: #D9641F; /* 지원금 섹션 강조 */
  --p-orange-100: #FCE3D3; /* 지원금 연한 바탕 */
  --p-brick-600: #A83A2F;  /* 청약 섹션 강조 */
  --p-brick-100: #F6DDD8;  /* 청약 연한 바탕 */
  --p-green-600: #1F7A5A;  /* 상태: 접수 중(열림) */
  --p-green-100: #D6EBDF;
  --p-amber-600: #B7791F;  /* 상태: 접수 임박·발표 예정(주의) */
  --p-amber-100: #FBEFCC;
  --p-red-600: #B42318;    /* 상태: 마감 임박 D-3 이하 */
  --p-red-100: #FBDAD6;
  --p-gray-900: #1C1F24;   /* 석판 팔레트 글자 */
  --p-gray-600: #5B6470;
  --p-gray-300: #D5DAE1;
  --p-gray-100: #F3F5F8;
  --p-warm-900: #2A2622;   /* 종이 팔레트 글자(warm 테마 ink와 같음) */
  --p-warm-600: #6B625A;
  --p-warm-300: #E3DCD3;
  --p-warm-100: #F7F3EC;
  --p-white: #FFFFFF;

  /* ---------- 1. 원시 토큰: 글꼴 ----------
     본문 글꼴 스택: Pretendard → 폴백 → 시스템. tabular-nums는 D-day·표 숫자 폭을 고정한다. */
  --font-sans: "Pretendard Variable", "Pretendard Fallback", -apple-system, "Apple SD Gothic Neo",
               "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  /* 숫자 글꼴: tabular-nums(tnum)를 가진 한글 서체는 Pretendard·SUIT뿐(05번 문서 A-3 실측). 본문을 시스템 글꼴로 가더라도
     D-day·합격률·표의 숫자만은 Pretendard 숫자 조각(unicode-range U+0030-0039, font-display: optional)을 받아 폭을 고정한다 */
  --font-num: "Pretendard Variable", "Pretendard Fallback", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  /* 글자 크기 단계(모바일 기준, rem = 16px). 본문 17px은 한글 가독성 조사 결과 반영(03번 문서) */
  --fs-xs: 0.8125rem;  /* 13px 캡션·출처 줄 — 보조 글자 하한 13px, 12px 미만 금지(05번 A-2) */
  --fs-sm: 0.875rem;   /* 14px 보조 설명·표 본문 */
  --fs-md: 1.0625rem;  /* 17px 본문 */
  --fs-lg: 1.25rem;    /* 20px 블록 소제목(h3) */
  --fs-xl: 1.5rem;     /* 24px 블록 제목(h2) */
  --fs-2xl: 1.875rem;  /* 30px 페이지 제목(h1, 모바일) */
  --fs-3xl: 2.5rem;    /* 40px 큰 숫자(D-day, 합격률) */
  --lh-body: 1.65;     /* 한글 본문 줄간격 — KRDS 150% 이상, 2003 가독성 연구는 넓을수록 유리(05번 문서 A-2) */
  --lh-tight: 1.25;    /* 제목·숫자 줄간격 */
  --ls-body: 0;        /* 한글 자간 0 — KRDS 본문 0px, 음수 자간은 저시력에 불리(05번 문서 A-2). 제목만 -0.02em */

  /* 간격 단계(4px 배수) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* 모서리·그림자 */
  --radius-sm: 6px;    /* 배지·칩 */
  --radius-md: 10px;   /* 카드 */
  --radius-lg: 14px;   /* 큰 패널 */
  --shadow-card: 0 1px 2px rgba(0,0,0,.05);  /* 카드는 그림자보다 선으로 구분(가벼움) */

  /* 레이아웃 */
  --container: 1120px; /* 데스크톱 최대 폭 */
  --content: 720px;    /* 본문 글 열 최대 폭(한 줄 35~45자) */
  --gutter: 16px;      /* 모바일 좌우 여백 */
  --header-h: 56px;    /* 고정 헤더 높이 — 블록 앵커 scroll-margin에 쓴다 */

  /* 광고 슬롯 예약 높이(02번 문서 규칙 1): 비어도 접지 않는다 */
  --ad-h-rect: 280px;  /* 본문 사각형(300×250 / 336×280) */
  --ad-h-banner: 100px;/* 상단 배너(320×100) — 1차에는 쓰지 않음 */

  /* ---------- 2. 의미 토큰: 기본(=팔레트 A '종이', 라이트) ----------
     컴포넌트는 아래 이름만 쓴다. */
  --color-bg: var(--p-gray-100);        /* 페이지 바탕: 연한 회청 #F3F5F8 (2026-11-08 운영자 B안 — 흰 카드 유지, 바탕만 크림→회청; E4 흰 바탕·크림 카드는 같은 날 되돌림) */
  --color-surface: var(--p-white);      /* 카드·표 바탕: 흰색 */
  --color-ink: var(--p-warm-900);       /* 본문 글자 */
  --color-ink-2: var(--p-warm-600);     /* 보조 글자(출처·캡션) */
  --color-line: var(--p-gray-300);      /* 구분선·카드 테두리: 회청 계열 #D5DAE1 (B안) */
  --color-link: var(--p-blue-600);      /* 링크(섹션과 무관하게 한 색) */
  --color-focus: #FFBF47;               /* 키보드 포커스 테두리(gov.uk식 노랑, 어디서나 보임) */
  /* 섹션 강조색: <body data-section="cert|subsidy|housing">가 --color-accent를 바꾼다 */
  --color-accent: var(--p-blue-600);
  --color-accent-soft: var(--p-blue-100);
  --color-accent-ink: var(--p-white);   /* 강조색 위 글자 */
  /* 상태색(섹션과 무관) */
  --color-open: var(--p-green-600);     --color-open-soft: var(--p-green-100);
  --color-soon: var(--p-amber-600);     --color-soon-soft: var(--p-amber-100);
  --color-urgent: var(--p-red-600);     --color-urgent-soft: var(--p-red-100);
  --color-closed: var(--p-warm-600);    --color-closed-soft: var(--p-warm-300);
  /* 차트: 필기·실기 두 선. 색만으로 구분하지 않도록 실기는 점선으로도 구분한다 */
  --chart-1: var(--color-accent);       /* 필기 */
  --chart-2: var(--p-orange-600);       /* 실기 */
  --chart-grid: var(--color-line);
}

/* ---------- 글꼴 후보 토글(시안 비교용) ---------- */
:root[data-font="noto"]   { --font-sans: "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; }          /* 가장 흔한 한글 웹폰트, 획이 또렷 */
:root[data-font="plex"]   { --font-sans: "IBM Plex Sans KR", "Malgun Gothic", system-ui, sans-serif; }      /* 자격증 블로그 slate 테마와 같은 글꼴 */
:root[data-font="system"] { --font-sans: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", system-ui, sans-serif; } /* 내려받기 0 — 기기 글꼴 */

/* ---------- 팔레트 B '석판': 차가운 회색 중립 ---------- */
:root[data-palette="slate"] {
  --color-bg: var(--p-gray-100);
  --color-surface: var(--p-white);
  --color-ink: var(--p-gray-900);
  --color-ink-2: var(--p-gray-600);
  --color-line: var(--p-gray-300);
  --color-closed: var(--p-gray-600);
  --color-closed-soft: var(--p-gray-300);
}

/* ---------- 섹션 강조색 ---------- */
[data-section="cert"]    { --color-accent: var(--p-blue-600);   --color-accent-soft: var(--p-blue-100); }
[data-section="subsidy"] { --color-accent: var(--p-orange-600); --color-accent-soft: var(--p-orange-100); --chart-2: var(--p-blue-600); }
[data-section="housing"] { --color-accent: var(--p-brick-600);  --color-accent-soft: var(--p-brick-100); --chart-2: var(--p-blue-600); }

/* ---------- 다크 모드 ----------
   OS가 다크이고 사용자가 라이트를 고르지 않았을 때, 또는 사용자가 다크를 골랐을 때.
   바탕을 완전 검정이 아닌 어두운 회색으로, 강조색은 한 단계 밝게(어두운 바탕에서 4.5:1 유지). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #15171B; --color-surface: #1F2228; --color-ink: #ECEEF1; --color-ink-2: #A3ABB6;
    --color-line: #333841; --color-link: #8FB4F5; --color-focus: #FFD166;
    --color-open: #5BC392; --color-open-soft: #15372A; --color-soon: #E3B341; --color-soon-soft: #3C2F0E;
    --color-urgent: #F28B82; --color-urgent-soft: #4A1A16; --color-closed: #A3ABB6; --color-closed-soft: #2B3038;
    --p-blue-100: #1C2C4A; --p-orange-100: #4A2A14; --p-brick-100: #4A1F1B;
  }
  :root:not([data-theme="light"]) [data-section="cert"]    { --color-accent: #6FA0F0; --color-accent-ink: #0B1220; }
  :root:not([data-theme="light"]) [data-section="subsidy"] { --color-accent: #F0955A; --color-accent-ink: #1A0E05; }
  :root:not([data-theme="light"]) [data-section="housing"] { --color-accent: #E57F74; --color-accent-ink: #1A0B09; }
}
:root[data-theme="dark"] {
  --color-bg: #15171B; --color-surface: #1F2228; --color-ink: #ECEEF1; --color-ink-2: #A3ABB6;
  --color-line: #333841; --color-link: #8FB4F5; --color-focus: #FFD166;
  --color-open: #5BC392; --color-open-soft: #15372A; --color-soon: #E3B341; --color-soon-soft: #3C2F0E;
  --color-urgent: #F28B82; --color-urgent-soft: #4A1A16; --color-closed: #A3ABB6; --color-closed-soft: #2B3038;
  --p-blue-100: #1C2C4A; --p-orange-100: #4A2A14; --p-brick-100: #4A1F1B;
}
:root[data-theme="dark"] [data-section="cert"]    { --color-accent: #6FA0F0; --color-accent-ink: #0B1220; }
:root[data-theme="dark"] [data-section="subsidy"] { --color-accent: #F0955A; --color-accent-ink: #1A0E05; }
:root[data-theme="dark"] [data-section="housing"] { --color-accent: #E57F74; --color-accent-ink: #1A0B09; }

/* ---------- 데스크톱에서 글자 단계 조금 키움 ---------- */
@media (min-width: 768px) {
  :root { --fs-2xl: 2.25rem; --fs-xl: 1.625rem; --gutter: 24px; }
}

/* =====================================================================
   기본 요소 스타일 (리셋 + 본문)
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }           /* 폭 계산을 테두리 포함으로 */
html { -webkit-text-size-adjust: 100%; }                     /* iOS 가로 회전 시 글자 확대 금지 */
body {
  margin: 0;                                                 /* 기본 여백 제거 */
  background: var(--color-bg);                               /* 바탕색은 토큰에서 */
  color: var(--color-ink);                                   /* 글자색 */
  font-family: var(--font-sans);                             /* 글꼴 스택 */
  font-size: var(--fs-md);                                   /* 본문 17px */
  line-height: var(--lh-body);                               /* 1.7 */
  letter-spacing: var(--ls-body);                            /* -0.01em */
  word-break: keep-all;                                      /* 한글 단어 중간에서 줄 안 끊김 */
  overflow-wrap: break-word;                                 /* 한 단어가 칸보다 길 때만(긴 URL 등) 끊음. anywhere는 좁은 칸에서 한글 단어도 끊어서 쓰지 않음 */
  font-variant-numeric: tabular-nums;                        /* 숫자 폭 고정(표·D-day 정렬) */
}
a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* 링크는 밑줄 유지(색만으로 구분 금지) */
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* 키보드 포커스 표시(KWCAG 초점) */
h1, h2, h3 { line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0; }
h1 { font-size: var(--fs-2xl); font-weight: 800; }
h2 { font-size: var(--fs-xl); font-weight: 700; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
p  { margin: 0 0 var(--sp-4); }
small, .meta { font-size: var(--fs-xs); color: var(--color-ink-2); }
img, svg { max-width: 100%; height: auto; }                  /* 이미지가 열을 넘지 않게 */
button { font: inherit; }                                    /* 버튼도 본문 글꼴 */

/* 모든 블록 앵커: 고정 헤더에 가려지지 않게 (두루데이터에서 본 문제의 해법) */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* 움직임 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }