/* 디자인 토큰 (B5 v2 — 2026-09-27 가독성 개정)
 *
 * 이 파일 하나가 웹사이트 · 실습 앱 · SVG 도해의 색과 선을 함께 정한다.
 * (EPUB 은 build/lib/epub.mjs 안의 자체 CSS 를 쓴다 — 종이 규칙은 그쪽이다.)
 *
 * ── 왜 바꿨나 ────────────────────────────────────────────────
 * v0 은 "완전 플랫 · 중성색 · 종이 느낌"이었다. 책의 도해에는 맞았지만
 * **아이가 만지는 화면에까지 같은 토큰을 썼던 것이 잘못**이었다.
 * 집필자 검수(2026-08-11): "학습 효율이 다소 떨어지더라도 어린 아이들에게
 * 주목도를 높이고 어필이 가능하도록." 그래서 웹은 밤하늘 무대로 갔다 (v1).
 *
 * v2 (2026-09-27, 집필자 검수): "네온이 너무 강해 가독성이 떨어진다."
 *  - 밤하늘은 그대로 두되 **네온은 포인트에만** 쓴다. 번짐(glow)은 걷어 냈다
 *  - 글자에 그러데이션을 입히지 않는다 — 집필자 결정. 강조색은 한 가지(--brand)
 *  - 본문 글자를 푸른 흰색(#edf0ff)에서 한 단계 누그러뜨렸다. 새까만 바탕 위의
 *    새하얀 글자는 오래 읽으면 번져 보인다 (대비는 여전히 13:1 이상)
 *  - 다섯 색은 채도를 조금 낮췄다. 이름과 의미는 그대로다
 *  - Pretendard 를 **직접 싣는다** (아래 서체 칸)
 *
 * 원칙
 *  - 바탕은 깊은 남색, 글자는 밝게
 *  - 색 다섯 개를 돌려 쓴다. 여섯 번째 색이 필요하면 디자인이 틀린 것이다
 *  - 움직임은 그림에 준다. 글은 움직이지 않는다
 *
 * 의미 규칙 (절대 뒤집지 않는다)
 *  - 옛날(과거) = 호박색 계열  /  지금(현재) = 파랑·청록 계열
 *    12개 대비 실습에서 반복된다.
 */

/* 서체 — Pretendard Variable 1.3.9, 동적 부분집합 (SIL OFL 1.1).
   쪽에 실제로 나온 글자가 든 조각만 받는다 (보통 수백 KB, 한 번 받으면 캐시).
   CDN 이 아니라 **이 사이트에 동봉**한다 — 바깥 의존을 두지 않는다는 원칙은 그대로다.
   v1 까지는 이름만 적고 싣지 않아서 윈도우에서는 맑은 고딕으로 보였다 */
@import url("/assets/fonts/pretendard/pretendard-variable.css");

:root {
  color-scheme: dark;

  /* ── 무대와 글자 ─────────────────────────────── */
  --bg:          #0f1120;   /* 페이지 바닥 */
  --bg-deep:     #0a0b16;   /* 더 안쪽 (실습 무대) */
  --surface:     #171a2e;   /* 판·카드 */
  --surface-2:   #1f2340;   /* 판 위의 판 */
  --line:        #2c3152;   /* 구분선 */
  --line-soft:   #212540;

  --ink:        #e6e8f2;   /* 본문 */
  --ink-soft:   #aab0c8;   /* 보조 설명 */
  --ink-faint:  #7f86a8;   /* 캡션 · 비활성 (바탕 대비 5:1 — 작은 글자도 읽힌다) */

  /* 종이 이름 유지 — 도해 SVG 와 실습이 이 이름을 쓴다.
     이름을 바꾸면 33개 실습을 전부 손봐야 한다. 값만 갈아 끼운다. */
  --paper:      var(--surface);
  --paper-sunk: var(--bg-deep);
  --rule:       var(--line);

  /* ── 색 다섯 ────────────────────────────────── */
  --c-amber:  #f5aa55;
  --c-pink:   #f06b9c;
  --c-violet: #a584f5;
  --c-cyan:   #4fd6c9;
  --c-blue:   #6ea8f7;

  /* 강조색 하나 — 챕터 번호 · 실습 단추 · 읽기 막대. 가족 로고의 분홍이다 */
  --brand:      var(--c-pink);
  --brand-ink:  #1c0a13;    /* 강조색 위에 얹는 글자 */

  /* ── 의미색 ─────────────────────────────────── */
  --now:        var(--c-cyan);   /* 지금 방식 · 주 강조 */
  --now-soft:   #133338;
  --past:       var(--c-amber);  /* 옛날 AI · 역사 */
  --past-soft:  #332612;
  --alert:      #f07083;         /* 틀림 · 주의 */
  --alert-soft: #371722;
  --link:       var(--c-blue);

  /* ── 빛 ─────────────────────────────────────────
     v2(2026-09-27): 그러데이션(--grad)과 번짐(--glow-*)은 **없앴다.** 사이트도 실습도 한 가지 면으로 칠한다.
     남은 것은 판을 띄우는 어두운 그림자 하나 */
  --lift:      0 12px 28px rgba(0, 0, 0, .32);

  /* ── 도해 채움색 (6색) ─────────────────────── */
  --fig-1: #5f8ad6;
  --fig-2: #d9a24e;
  --fig-3: #5fae86;
  --fig-4: #cf7f78;
  --fig-5: #9a86d6;
  --fig-6: #737a99;

  /* ── 선 규격 ───────────────────────────────── */
  --stroke:      2.5px;
  --stroke-fine: 1.5px;
  --radius:      18px;
  --radius-sm:   10px;
  --radius-pill: 999px;

  /* ── 간격 (4의 배수) ────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  /* ── 서체 ────────────────────────────────────── */
  --font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
          "Noto Sans KR", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --measure: 38em;
}

/* 일본어 — Pretendard 에는 가나가 없고 한자는 한국식 자형이다. 한자와 가나가
   서로 다른 글꼴로 섞이지 않게 일본어 글꼴을 앞에 세운다.
   Noto Sans JP 가 있으면 그것(굵기가 여러 단이라 제목이 선다), 없으면 윈도우 기본인
   BIZ UDPゴシック(유니버설 디자인 · 교과서용으로 만든 글꼴).
   Yu Gothic 은 윈도우에서 보통 굵기가 가늘게 그려져 뒤로 뺐다.
   v1 에서는 일본어가 **Noto Sans KR**(한국식 한자 자형)로 그려지는 기기가 있었다 */
:root:lang(ja) {
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
          "BIZ UDPGothic", Meiryo, "Yu Gothic", system-ui, sans-serif;
}

/* 종이 테마 — 밝은 데서 읽고 싶은 사람과 인쇄용.
   실습 무대는 이 테마에서도 어둡게 남는다 (아래 site.css 의 --stage-*). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --bg-deep: #f2f3f8;
  --surface: #ffffff; --surface-2: #f4f5fa;
  --line: #dcdee8; --line-soft: #ebecf3;
  --ink: #1a1c26; --ink-soft: #4d5266; --ink-faint: #6e7390;
  --brand: #c23a6e; --brand-ink: #ffffff;
  --now: #0e8f83; --now-soft: #d9f5f1;
  --past: #9a6516; --past-soft: #f8eeda;
  --alert: #c8374f; --alert-soft: #fbe3e7;
  --link: #2563eb;
  --fig-1: #7fa8d8; --fig-2: #e0b25e; --fig-3: #86ac8f;
  --fig-4: #c98f86; --fig-5: #a99cc4; --fig-6: #b9bec7;
  --lift: 0 10px 26px rgba(20, 22, 31, .08);
}

/* 움직임을 줄이도록 설정한 사용자 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}