/* ============================================================
   KWONMO — val.css
   값(value) 전용. 색상·치수·글꼴 등 커스텀 프로퍼티(--*) 정의만 모아둔다.
   실제 사용(구조·컴포넌트 규칙)은 layout.css 와 edition-*.css.

   판(edition)은 data-theme 이 결정한다.
     light = 조간판(신문 판형) / dark = 야간판(작업대 판형)
   두 판은 마크업을 공유하고 이 파일의 토큰 + edition-*.css 만 갈아끼운다.
   ============================================================ */

/* ---------- 판 무관 토큰 ---------- */
:root {
  --header-h: 3.25rem;          /* 축약 헤더(특수 레이아웃 페이지) 높이. split/canvas 의 100dvh 계산이 이 값에 의존 */
  --nav-ico: 1.125rem;          /* 제호 메뉴 아이콘(해·달·전체화면) 한 변. 두 판이 같은 크기를 쓴다 */

  /* 시스템 UI(상태바·노치·제스처바)가 먹는 영역. viewport-fit=cover 로 그 밑까지 그리므로,
     가려지면 안 되는 요소만 이 값만큼 밀어낸다. 전체화면이 아닐 때는 브라우저가 0 을 준다. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --header-total: calc(var(--header-h) + var(--safe-t));   /* 축약 헤더가 실제로 차지하는 높이 */

  /* 홈 제호 높이. 조간판/야간판이 정확히 같은 높이를 갖도록 못박는다.
     서체 크기가 판마다 크게 달라서(제호 128px 세리프 vs 58px 등폭) 자연 높이에 맡기면
     토글할 때 본문이 위아래로 튄다. 남는 공간은 각 판이 세로 가운데로 흡수한다.
     --brand-h 만 화면 크기에 따라 바뀐다(layout.css 브레이크포인트). */
  --nav-h: 3.5rem;              /* 메뉴 / 탭 */
  --brand-h: 6rem;              /* 제호 본체 — 모바일 기준값 */
  --masthead-h: calc(var(--brand-h) + var(--nav-h));

  /* 지면 3단 사이 여백. 조간판의 세로 괘선이 이 여백 한가운데에 그려진다 */
  --feed-gutter: 3rem;
  --feed-row-gap: 2rem;
  --page-max: 84rem;            /* 본문 최대폭. 이보다 넓으면 좌우 여백으로 흘린다 */
  --fab-size: 3.5rem;
  --fab-gap: 1.25rem;
  --menu-alpha: .7;             /* 슬라이드 반투명: 투명도 30% = 불투명도 70% */
  --sidebar-w: 12rem;           /* #6 캔버스 좌측 고정 사이드 폭. 데스크톱은 아래 브레이크포인트에서 재정의 */
  --canvas-grid: 12px;          /* 예외 ①: 캔버스 스냅 그리드 한 칸. 화면 좌표 기준 정사각형이라 px 고정 */
  --divider-w: .625rem;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --hairline: 1px;              /* 예외 ②: 테두리·아웃라인 전용. rem으로 바꾸면 확대 환경에서 테두리가 같이 굵어짐 */
  --rule-w: 4px;                /* 예외 ③: 신문 굵은 괘선. 확대해도 두께가 유지돼야 판형이 안 무너짐 */
  --stroke-2: 2px;              /* 예외 ④: 강조선·밑줄·세로 막대. ②와 같은 이유로 확대해도 두께 유지 */
  --stroke-3: 3px;              /* 예외 ⑤: 인용·카드 왼쪽 굵은 띠. ②와 같은 이유 */
  --rule-gap: 3px;              /* 예외 ⑥: 이중 괘선의 굵은 선과 얇은 선 사이. 선 두께와 한 몸이라 같이 고정 */
  --focus-ring: .125rem;
  --sp-xs: .25rem;
  --sp-sm: .5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2.5rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --fab-drag-max: 8.75rem;         /* 기존 JS ±140px 클램프를 CSS로 이관 */
  --fab-swipe-threshold: 3.125rem; /* 기존 JS 50px 임계값. JS가 getComputedStyle 로 파싱 */
  --tap-slop: .625rem;             /* 기존 JS 10px 탭 판정 여유. JS가 파싱 */
  --card-gap: 1.5rem;              /* 확대된 카드와 화면 사이 여백. 높이도 이 값에서 나온다(layout.css) — JS가 목표 좌표 계산에 그대로 파싱.
                                      모바일에서는 좌우 여백도 이 값이 맡는다(layout.css 브레이크포인트에서 재정의) */
  --card-tail-space: 6rem;         /* 펼친 카드의 전편·다음편 콘솔 아래 빈 자리. 브라우저 토스트가 하단을 덮어도 버튼이 가려지지 않을 만큼 */

  /* 웹 에뮬레이터 게임기 색(작업개요서 8장 팔레트). 판을 따르지 않는다 — 게임기가 판마다 색을 바꾸면 어색하다 */
  --emu-screen: #0E1116;
  --emu-body: #E7E3DA;        /* 본체 */
  --emu-face: #D8D3C8;        /* 보조 면(탭 바탕·상단 버튼) */
  --emu-ink: #23211E;         /* 본체 위 글자 */
  --emu-ink-sub: #4A4740;     /* 본체 위 보조 글자 */
  --emu-bezel: #26262B;       /* 화면 테두리 */
  --emu-bezel-ink: #A8A49B;   /* 베젤 위 글자(코어 이름) */
  --emu-led: #5FB37A;         /* 전원 표시등 */
  --emu-dpad: #34343A;
  --emu-dpad-ink: #CFCBC2;    /* 방향키 삼각형 */
  --emu-lr: #BDB7AA;
  --emu-ss: #CFC9BD;          /* SELECT/START */
  --emu-ss-ink: #3A3833;
  --emu-ab: #A84C31;
  --emu-xy: #3F4A5A;
  --emu-btn-ink: #FFFFFF;     /* ABXY 글자 */
  --emu-line: #D2CDC1;        /* 빠른 버튼 줄 위 구분선 */
  --emu-key: #F7F5F0;         /* 화면 키보드의 일반 키캡 */
  --emu-key-line: #C9C3B6;    /* 키캡 테두리 */

  /* 게임 목록 카드 테두리 — 기종을 한눈에 가른다. 두 판 바탕 모두에서 보이는 중간 밝기 */
  --emu-sys-sfc: #7B61C9;
  --emu-sys-nes: #C23B32;
  --emu-sys-dos: #C9892B;
}

/* ---------- 조간판 (light) ---------- */
[data-theme="light"] {
  --bg:#efe9db; --surface:#f6f2e6; --surface-2:#e8e1d0;
  --text:#191713; --text-mid:#554c40; --text-dim:#8d8172;
  --line:#ddd5c2;              /* 얇은 테두리·격자 */
  --rule-soft:rgba(25,23,19,.15);  /* 지면 안쪽 괘선 */
  --rule-ink:#191713;              /* 제호·단 구분용 굵은 괘선 */
  --accent:#9e2b18;                /* 스팟 컬러(붉은 잉크) */
  --card-open-alpha: 90%;          /* 확대된 카드 바탕의 불투명도. 지면이 뒤에 비쳐 제자리에서 커진 게 보이도록 */
  /* 클릭 가능하다는 걸 알리는 점선. 조간판은 항목에 좌우 여백이 없어 단 사이 여백으로 내보내 그린다 */
  --card-hint-inset: 0 -.625rem;
  --card-hint-line: var(--rule-soft);
  --menu-bg:239,233,219;

  /* 글꼴 역할 3종. 판마다 다른 서체를 같은 역할에 꽂는다.
     한글 본문은 두 판 모두 Noto 한 벌로 통일한다 — body 와 label 이 같은 가족을 쓰고
     굵기(400/700/800)와 자간으로만 갈린다. 역할 토큰을 둘로 유지하는 건
     나중에 한쪽만 갈아끼울 수 있게 하기 위해서다.
     display 만 판의 개성을 그대로 둔다. 라틴 전용 서체라 한글 글리프가 없으므로
     바로 뒤에 같은 Noto 를 세워 한글만 그쪽으로 떨어지게 한다
     (한글 제목이 대표 사례 — 안 세우면 브라우저 기본 serif 로 빠져 본문과 서체가 어긋난다). */
  --ed-display:"Bodoni Moda", "Noto Serif KR", Georgia, "Times New Roman", serif;
  --ed-body:"Noto Serif KR", Batang, serif;
  --ed-label:"Noto Serif KR", Batang, serif;

  --note-bg:#fdf6b2; --note-border:#e6d67a;
  --note-yellow:#fdf6b2; --note-blue:#c9dcf0; --note-green:#d3ead1; --note-pink:#f5d6dc; --note-gray:#e3e1db;
  --cat-novel:#D85A30; --cat-note:#BA7517; --cat-work:#1D9E75;
  --danger:#b3261e;
  color-scheme: light;
}

/* ---------- 야간판 (dark) ---------- */
[data-theme="dark"] {
  --bg:#101318; --surface:#171b21; --surface-2:#1c2129;
  --text:#d9dee7; --text-mid:#8b95a6; --text-dim:#6d7789;
  --line:#272d37;
  --rule-soft:#21262f;
  --rule-ink:#272d37;
  --accent:#6fa3d8;
  --card-open-alpha: 20%;          /* 야간판은 더 비친다 — 뒤 패널의 격자가 작업대처럼 읽히는 쪽이 낫다 */
  /* 야간판은 항목이 패널 안에 있고 좌우 패딩도 있어서 안쪽에 그린다 */
  --card-hint-inset: .25rem;
  --card-hint-line: var(--line);
  --menu-bg:16,19,24;

  --ed-display:"JetBrains Mono", "Noto Sans KR", Consolas, "Courier New", monospace;
  --ed-body:"Noto Sans KR", "Malgun Gothic", sans-serif;
  --ed-label:"Noto Sans KR", "Malgun Gothic", sans-serif;

  --note-bg:#7f6f25; --note-border:#8f8350;
  --note-yellow:#7f6f25; --note-blue:#25557f; --note-green:#2b643e; --note-pink:#762d45; --note-gray:#464b53;
  --cat-novel:#D85A30; --cat-note:#BA7517; --cat-work:#1D9E75;
  --danger:#e2776a;
  color-scheme: dark;
}