@charset "utf-8";

/* atah.io 공유 디자인 토큰 — 서브프로젝트 전역에서 재사용하는 색·서체·형태 값.
   Linked by each page's <head> (root: "design-tokens.css", sub-dir: "../design-tokens.css").

   dashboard/theme.css(라이트 테마, 흰 배경 기준으로 대비 검증됨)에서 프로젝트에
   상관없이 재사용 가능한 부분만 추린 것. 차트 시리즈 색·간격·글자 크기 스케일처럼
   대시보드 화면 구조에 종속된 값은 여기 없고 dashboard/theme.css에 그대로 남아있음.

   새 서브프로젝트(또는 이 파일을 쓰는 기존 프로젝트)는 이 파일 하나만 링크하면
   기본 색·서체·형태를 사이트 전체와 맞출 수 있음. 필요하면 로컬 :root에서
   개별 토큰을 재정의(override)해도 됨 — 강제 아님, 기본값 제공이 목적.

   주의: 사이트 루트(index.html)와 미니게임들은 이 파일과 별개로 어두운 톤(다크 배경 +
   KoddiUDOnGothic, style.css)을 씁니다. 이 파일은 "밝은 배경 위에서 읽는 화면"
   (대시보드, 블로그처럼 텍스트/데이터 위주 화면)을 위한 라이트 톤 토큰입니다. */

:root {
    color-scheme: light;

    /* ── 표면 & 잉크 ──────────────────────────────────────────────────
       dashboard/theme.css와 동일 값. 흰 배경(#fff) 기준으로 검증됨:
       본문 텍스트 4.9~17.8:1 (본문 기준 4.5:1을 모두 넘김). */
    --plane: #f8f8f8;
    --surface: #ffffff;
    --surface-2: #eaedf1;
    --border: rgba(0, 0, 0, 0.10);
    --text-primary: #1a1a1a;     /* 17.4:1 — 본문·제목 */
    --text-secondary: #4d4d4d;   /* 8.5:1 */
    --text-muted: #767676;       /* 4.5:1 — 본문 기준을 겨우 넘김, 더 밝히지 말 것 */
    --link: #0068da;

    /* ── 주색 ────────────────────────────────────────────────────────
       --brand(#7ca6de, 사이트 링크색·문서 스킴 accent1)는 흰 배경 대비가
       2.51:1이라 얇은 선이나 작은 글자로는 못 씀 — 큰 면적(히어로, 강조 박스,
       배경 틴트)에만 쓸 것. 선·글자·버튼처럼 대비가 필요한 자리는 같은
       색상각의 진한 형제인 --accent(스킴 hlink, 5.26:1)를 쓸 것. */
    --brand: #7ca6de;
    --accent: #0068da;

    /* ── 서체 ──────────────────────────────────────────────────────── */
    /* KoddiUDOnGothic은 한자가 아예 없고 일부 가타카나(장음부호 ー 등)도
       빠져있음. 이 사이트가 다루는 소재 특성상(일본 원작 레트로 게임 번역)
       원어 표기·스태프명 등에 한자·가나가 섞여 나오는 서브프로젝트가
       반복되므로, 여기서 공통 폴백으로 Noto Sans KR을 끼워둠. 폰트 이름만
       걸어둔 것이라 실제 로드는 안 하고(용량 부담 없음), 이 폴백이 필요한
       페이지가 각자 <head>에서 Google Fonts로 로드해야 실제로 먹힘
       (예: blog/skin.html, kitan_manual/index.html). */
    --font-ui: 'KoddiUDOnGothic', 'Noto Sans KR', sans-serif;
    --font-weight-bold: 700;
    --line-height: 1.6;

    /* ── 형태 ──────────────────────────────────────────────────────── */
    --rule: 1px solid var(--border);
    --radius-sm: 4px;
    --radius-xs: 2px;
    --radius-pill: 999px;

    /* 선 두께 — 상자와 아이콘이 따로 놀지 않도록 두 종류만 둡니다.
       --ui-border-w : 버튼·입력창처럼 '상자'의 외곽선. 인라인 SVG 아이콘 안의
                       사각 테두리(예: 햄버거 버튼의 바깥 틀)도 같은 값을 써야
                       옆에 놓인 실제 버튼 테두리와 두께가 맞습니다.
       --ico-stroke-w: 아이콘 '글자획'에 해당하는 선(화살표·돋보기·X 등).
                       상자선보다 굵어야 작은 크기에서 형태가 읽힙니다.
       아이콘 SVG 는 viewBox 를 표시 크기와 1:1 로 맞춰 쓰는 것을 전제로 합니다
       (그래야 user unit 1 = 화면 1px 이라 아이콘마다 굵기가 달라지지 않습니다). */
    --ui-border-w: 1px;
    --ico-stroke-w: 1.5px;
}