/* @spechub-tokens
   허브·목록·소개·가이드·검토 문서의 색·글꼴·모양·간격 토큰 — 이 사이트 토큰의 단 하나의 출처다.
   (첫 줄의 `@spechub-tokens` 는 표식이다. 파일로 연 허브가 목업 미리보기 프레임에 이 스타일을
   옮겨 담을 때 이 글자로 토큰 스타일을 찾는다. 지우지 않는다.)

   이 파일은 세 층으로 되어 있다 (2026-10-01, Material Design 3 적용).

     1. --md-ref-* · --md-sys-*   Material Design 3 토큰. 허브 크롬과 목록·정적 페이지·검토 문서의
                                  정본이다. 이름은 material-web(MWC) 의 토큰 이름을 그대로 따른다.
                                  색은 다우 브랜드색 #08a7bf 를 시드로 material-color-utilities 의
                                  SchemeContent 라이트 · 다크로 만든 값이다. 다크는 2026-10-01 에
                                  더했고, 색 역할마다 light-dark(라이트, 다크) 한 줄로 둔다.
     2. --dop-*                   dop-front 제품 토큰. **화면 목업이 쓰는 값이라 바꾸지 않는다.**
                                  목업 42장이 var(--dop-*) 를 읽고, 일부는 선언 없이 허브 값을
                                  물려받는다. 여기 값을 M3 로 옮기면 목업이 제품과 달라진다.
     3. --sh-* · --ink 등 별칭    M3 이전의 크롬 이름이다. **값은 예전 그대로 dop-front 를 가리킨다.**
                                  목업 135장 가운데 90장 안팎이 `:root` 에 --ink · --line · --accent
                                  같은 이름을 스스로 선언하고, 일부는 선언 없이 허브 값을 물려받는다.
                                  별칭 값을 M3 로 옮기면 물려받는 목업이 바뀌고, 별칭 이름을 크롬이
                                  쓰면 목업이 선언한 값으로 크롬이 물든다. 그래서 크롬 CSS 는 별칭을
                                  쓰지 않고 --md-sys-* 를 직접 쓴다.

   규칙 전문: .claude/skills/spec-hub/references/material-design.md */

:root {
  /* ══ 1. Material Design 3 ═══════════════════════════════════════════════ */

  /* ── 글꼴 (md-ref-typeface) ─────────────────────── */
  /* M3 기본은 Roboto 지만 한글 문서라 Pretendard 를 brand · plain 양쪽에 둔다.
     글꼴 파일은 /_fonts/pretendard.css 가 같은 도메인에서 싣는다. */
  --md-ref-typeface-brand: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --md-ref-typeface-plain: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --md-ref-typeface-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --md-ref-typeface-weight-regular: 400;
  --md-ref-typeface-weight-medium: 500;
  /* M3 의 bold 는 700 이지만 Pretendard 700 은 화면에서 한 단 더 굵게 보인다. 600 으로 둔다. */
  --md-ref-typeface-weight-bold: 600;
  /* M3 자간(+0.1 ~ +0.5px)은 라틴 문자 기준이다. 한글 조판은 전 역할을 -0.02em 으로 맞춘다. */
  --md-ref-typeface-tracking: -0.02em;

  /* ── 색 (md-sys-color) — seed #08a7bf · SchemeContent · light / dark ── */
  /* 색 역할은 light-dark(라이트, 다크) 로 두 값을 함께 갖는다. 어느 쪽으로 풀리는지는 그 값을
     쓰는 요소의 color-scheme 이 정한다. 문서 뿌리는 `light dark` 라 보는 쪽의 OS · 브라우저
     설정을 따르고, 화면의 테마 단추로 고르면 theme.js 가 뿌리에 적은 값(맨 아래 규칙)을
     따른다. 목업처럼 라이트로만 그려야 하는 자리는 그 요소에 `color-scheme: light` 를
     걸면, 그 안에서 쓰는 --md-sys-color-* 가 모두 라이트 값으로 풀린다(규칙 문서 '다크 테마').
     두 모드에서 값이 같은 역할(브랜드 container · fixed · scrim · shadow)은 값 하나만 적는다.
     light-dark() 는 Chrome 123 · Safari 17.5 · Firefox 120 부터 읽는다. */
  color-scheme: light dark;
  --md-sys-color-primary: light-dark(#006878, #5bd6ef);
  --md-sys-color-on-primary: light-dark(#ffffff, #00363f);
  --md-sys-color-primary-container: #08a7bf;   /* 브랜드색 그대로 */
  /* on-primary-container 와 on-secondary-container 는 SchemeContent 값(#00363f · #426a74)이
     container 위에서 4.6:1 안팎이라, 8% hover 레이어를 얹으면 4.1:1 로 본문 기준(4.5:1)
     아래로 떨어진다. 같은 팔레트에서 primary 는 tone 10, secondary 는 tone 30 으로 내려
     hover · pressed 에서도 5:1 이상을 지킨다.
     다크도 같은 문제가 있다. primary-container 는 다크에서도 브랜드색이라 글자를 같은
     tone 10 으로 두고, on-secondary-container 는 SchemeContent 값(#92bcc6, tone 73.6)이
     4.6:1 이라 tone 90 으로 올려 hover 6.0:1 · pressed 5.5:1 을 지킨다. */
  --md-sys-color-on-primary-container: #001f25;
  --md-sys-color-secondary: light-dark(#3c646e, #a3cdd8);
  --md-sys-color-on-secondary: light-dark(#ffffff, #05363e);
  --md-sys-color-secondary-container: light-dark(#bfeaf5, #224c55);
  --md-sys-color-on-secondary-container: light-dark(#224c55, #bfeaf5);
  --md-sys-color-tertiary: light-dark(#7a4a95, #e6b4ff);
  --md-sys-color-on-tertiary: light-dark(#ffffff, #481963);
  /* SchemeContent 는 tertiary-container 를 시드와 같은 톤(62.9, #b884d4)으로 만든다. 그 값은
     톤 90대인 다른 container 보다 진해서 범주 태그에서 혼자 두드러진다. secondary-container 와
     같은 tone 90 으로 낮추고, 그 위 글자는 tone 10 으로 맞춘다. 다크에서도 SchemeContent 는
     같은 #b884d4 를 주는데, 다른 container 가 tone 30 이라 이번에는 혼자 밝다. 다크는
     tone 30 으로 내리고 글자를 tone 90 으로 둔다. */
  --md-sys-color-tertiary-container: light-dark(#f5d9ff, #61327c);
  --md-sys-color-on-tertiary-container: light-dark(#30004a, #f5d9ff);
  --md-sys-color-error: light-dark(#ba1a1a, #ffb4ab);
  --md-sys-color-on-error: light-dark(#ffffff, #690005);
  --md-sys-color-error-container: light-dark(#ffdad6, #93000a);
  --md-sys-color-on-error-container: light-dark(#93000a, #ffdad6);
  --md-sys-color-background: light-dark(#f5fafc, #0f1416);
  --md-sys-color-on-background: light-dark(#171c1e, #dee3e5);
  --md-sys-color-surface: light-dark(#f5fafc, #0f1416);
  --md-sys-color-on-surface: light-dark(#171c1e, #dee3e5);
  --md-sys-color-surface-variant: light-dark(#d8e5e8, #3d494c);
  --md-sys-color-on-surface-variant: light-dark(#3d494c, #bcc9cc);
  --md-sys-color-surface-dim: light-dark(#d6dbdd, #0f1416);
  --md-sys-color-surface-bright: light-dark(#f5fafc, #343a3c);
  --md-sys-color-surface-container-lowest: light-dark(#ffffff, #0a0f10);
  --md-sys-color-surface-container-low: light-dark(#eff4f6, #171c1e);
  --md-sys-color-surface-container: light-dark(#eaeff0, #1b2022);
  --md-sys-color-surface-container-high: light-dark(#e4e9eb, #252b2c);
  --md-sys-color-surface-container-highest: light-dark(#dee3e5, #303637);
  --md-sys-color-surface-tint: light-dark(#006878, #5bd6ef);
  --md-sys-color-outline: light-dark(#6d797c, #869396);
  --md-sys-color-outline-variant: light-dark(#bcc9cc, #3d494c);
  --md-sys-color-inverse-surface: light-dark(#2c3133, #dee3e5);
  --md-sys-color-inverse-on-surface: light-dark(#ecf2f3, #2c3133);
  --md-sys-color-inverse-primary: light-dark(#5bd6ef, #006878);
  --md-sys-color-primary-fixed: #a6eeff;
  --md-sys-color-primary-fixed-dim: #5bd6ef;
  --md-sys-color-on-primary-fixed: #001f25;
  --md-sys-color-on-primary-fixed-variant: #004e5b;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* M3 커스텀 색(extended colors). 확정 · 검토중 · 정보는 M3 기본 역할에 없어서 시드와
     harmonize 한 색으로 만든다. color / on-color / on-container 는 material-color-utilities
     `customColor` 의 값이고, container 는 그 결과(#61fdb3 등)가 칩 바탕으로 너무 진해
     secondary-container 와 같은 채도(chroma 36)의 tone 90 으로 낮췄다.
     다크는 같은 팔레트의 customColor 다크 값(color tone 80 · on-color 20 · on-container 90)이고,
     container 는 라이트와 같은 채도(chroma 36)의 tone 30 이다. */
  --md-sys-color-success: light-dark(#006c45, #81d8a8);
  --md-sys-color-on-success: light-dark(#ffffff, #003822);
  --md-sys-color-success-container: light-dark(#acf2c8, #025233);
  --md-sys-color-on-success-container: light-dark(#002112, #9df5c3);
  --md-sys-color-warning: light-dark(#7b5900, #edc065);
  --md-sys-color-on-warning: light-dark(#ffffff, #412d00);
  --md-sys-color-warning-container: light-dark(#ffdea4, #5d4200);
  --md-sys-color-on-warning-container: light-dark(#261900, #ffdea3);
  --md-sys-color-info: light-dark(#00629e, #9acbff);
  --md-sys-color-on-info: light-dark(#ffffff, #003355);
  --md-sys-color-info-container: light-dark(#cfe5ff, #134a74);
  --md-sys-color-on-info-container: light-dark(#001d34, #cfe5ff);

  /* ── 타입스케일 (md-sys-typescale) ──────────────── */
  /* 크기 · 굵기 · 행간은 M3 기본값이다. 한글 본문은 M3 행간(1.43)이 빠듯해 body 세 역할만
     행간을 넓혔다(medium 20→22, small 16→18). 자간은 위 --md-ref-typeface-tracking 하나다.
     글자 묶음은 `font: var(--md-sys-typescale-body-medium)` 처럼 한 줄로 쓴다. */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 22px;
  --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 18px;
  --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);

  /* 글자 묶음 단축형 — `font:` 한 줄에 쓴다. 자간은 font 가 정하지 않으므로 body 등
     조판 시작점에 letter-spacing: var(--md-ref-typeface-tracking) 을 한 번 건다. */
  --md-sys-typescale-display-large: var(--md-sys-typescale-display-large-weight) var(--md-sys-typescale-display-large-size)/var(--md-sys-typescale-display-large-line-height) var(--md-sys-typescale-display-large-font);
  --md-sys-typescale-display-medium: var(--md-sys-typescale-display-medium-weight) var(--md-sys-typescale-display-medium-size)/var(--md-sys-typescale-display-medium-line-height) var(--md-sys-typescale-display-medium-font);
  --md-sys-typescale-display-small: var(--md-sys-typescale-display-small-weight) var(--md-sys-typescale-display-small-size)/var(--md-sys-typescale-display-small-line-height) var(--md-sys-typescale-display-small-font);
  --md-sys-typescale-headline-large: var(--md-sys-typescale-headline-large-weight) var(--md-sys-typescale-headline-large-size)/var(--md-sys-typescale-headline-large-line-height) var(--md-sys-typescale-headline-large-font);
  --md-sys-typescale-headline-medium: var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-headline-medium-font);
  --md-sys-typescale-headline-small: var(--md-sys-typescale-headline-small-weight) var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-headline-small-font);
  --md-sys-typescale-title-large: var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);
  --md-sys-typescale-title-medium: var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);
  --md-sys-typescale-title-small: var(--md-sys-typescale-title-small-weight) var(--md-sys-typescale-title-small-size)/var(--md-sys-typescale-title-small-line-height) var(--md-sys-typescale-title-small-font);
  --md-sys-typescale-body-large: var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);
  --md-sys-typescale-body-medium: var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);
  --md-sys-typescale-body-small: var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-body-small-font);
  --md-sys-typescale-label-large: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);
  --md-sys-typescale-label-medium: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);
  --md-sys-typescale-label-small: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);

  /* ── 모서리 (md-sys-shape) ──────────────────────── */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;      /* 입력칸 · 메뉴 · 툴팁 · 스낵바 */
  --md-sys-shape-corner-extra-small-top: 4px 4px 0px 0px;
  --md-sys-shape-corner-small: 8px;            /* 칩 */
  --md-sys-shape-corner-medium: 12px;          /* 카드 */
  --md-sys-shape-corner-large: 16px;           /* FAB · 사이드 시트 · 큰 카드 */
  --md-sys-shape-corner-large-top: 16px 16px 0px 0px;
  --md-sys-shape-corner-large-start: 16px 0px 0px 16px;
  --md-sys-shape-corner-large-end: 0px 16px 16px 0px;
  --md-sys-shape-corner-extra-large: 28px;     /* 다이얼로그 */
  --md-sys-shape-corner-extra-large-top: 28px 28px 0px 0px;
  --md-sys-shape-corner-full: 9999px;          /* 버튼 · 검색창 · 활성 표시 · 배지 */

  /* ── 높이 (elevation) ───────────────────────────── */
  /* MWC 의 --md-sys-elevation-level1..5 는 md-elevation 컴포넌트가 읽는 숫자(1~5)라
     그 이름을 그림자 값으로 덮지 않는다. CSS 로 그리는 그림자는 M3 Figma 키트의 두 겹
     (key + ambient) 값을 -shadow- 이름으로 둔다. */
  --md-sys-elevation-level0: 0;
  --md-sys-elevation-level1: 1;
  --md-sys-elevation-level2: 2;
  --md-sys-elevation-level3: 3;
  --md-sys-elevation-level4: 4;
  --md-sys-elevation-level5: 5;
  --md-sys-elevation-shadow-0: none;
  --md-sys-elevation-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-shadow-2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-shadow-3: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-shadow-4: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-shadow-5: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);

  /* ── 상태 레이어 (md-sys-state) ─────────────────── */
  --md-sys-state-hover-state-layer-opacity: 0.08;
  --md-sys-state-focus-state-layer-opacity: 0.12;
  --md-sys-state-pressed-state-layer-opacity: 0.12;
  --md-sys-state-dragged-state-layer-opacity: 0.16;
  /* 비활성: 내용 38%, 바탕 12% (MWC 컴포넌트 토큰 disabled-*-opacity) */
  --md-sys-state-disabled-content-opacity: 0.38;
  --md-sys-state-disabled-container-opacity: 0.12;

  /* ── 움직임 (md-sys-motion) ─────────────────────── */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long2: 500ms;

  /* ── 간격 · 뼈대 치수 ───────────────────────────── */
  /* MWC 는 간격 토큰을 두지 않는다(density 미지원). M3 의 4dp 그리드와 값이 같은
     --dop-space-* 를 그대로 쓴다. 밀도는 촘촘하게 둔다(M3 density -2 수준, 규칙 문서 참고). */
  --sh-bar-h: 64px;     /* M3 small top app bar */
  --sh-lnb-w: 280px;    /* standard navigation drawer (M3 기본 360px, 촘촘한 밀도로 280px) */

  /* ══ 2. dop-front 제품 토큰 — 목업 전용, 값 고정 ═════════════════════════ */
  /* Figma `planning-doc-website` (BJZrUyEAgOdJtaHLko3Q5A, node 2:4) 의 변수와 같은 값이다.
     이름은 dop-front 토큰명을 따른다 (bg/primary/level1 → --dop-primary). */

  /* ── 색 ─────────────────────────────────────────── */
  --dop-primary: #08a7bf;        /* bg/primary/level1 */
  --dop-primary-soft: #ebf8fd;   /* bg/primary/level2 */
  --dop-ink-1: #1c1c1c;          /* text/basic/level1 */
  --dop-ink-2: #4a4b4c;          /* text/basic/level2 */
  --dop-ink-3: #9b9c9e;          /* text/basic/level3 */
  --dop-white: #ffffff;          /* text/basic/white */
  --dop-bg-base: #ffffff;        /* bg/basic/base */
  --dop-bg-1: #ffffff;           /* bg/basic/level1 */
  --dop-bg-2: #f5f6f8;           /* bg/basic/level2 */
  --dop-line-1: #eaecef;         /* border/basic/level1 — 본문 안쪽 경계 */
  --dop-line-2: #cfd1d4;         /* border/basic/level2 — 구획을 가르는 경계 */
  --dop-negative: #ee2e2e;       /* text/status/negative */
  --dop-positive: #0ac943;       /* text/status/positive */
  --dop-tag-positive: #9de9b4;   /* border/tag/positive */

  /* 시안에 없는 상태색은 정본 팔레트의 채도·명도에 맞춰 둔다. 검토중·확정필요를
     positive/negative 로 쓰면 "완료" 와 "문제" 두 가지로만 읽힌다. */
  --dop-warn: #b8761b;
  --dop-warn-soft: #fdf4e6;
  --dop-positive-soft: #e9fbef;
  --dop-negative-soft: #fdecec;

  /* Shadow2 — bg/basic/black-trans10, offset (0,4), blur 16 */
  --dop-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* ── 글꼴 ───────────────────────────────────────── */
  --dop-font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --dop-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 자간은 전 단계가 -0.02em 이다 (14px → -0.28px, 28px → -0.56px). */
  --dop-tracking: -0.02em;

  --dop-size-3xs: 11px;
  --dop-size-2xs: 12px;
  --dop-size-xs: 13px;
  --dop-size-s: 14px;   /* 본문 */
  --dop-size-l: 18px;   /* 장 제목 */
  --dop-size-2xl: 24px; /* 브레드크럼 */
  --dop-size-3xl: 28px; /* 문서 제목 */

  --dop-weight-regular: 400;
  --dop-weight-medium: 500;
  --dop-weight-bold: 600;   /* SemiBold. 700 을 쓰면 Pretendard Bold 로 떨어져 시안보다 굵다 */

  /* ── 간격 · 모서리 ──────────────────────────────── */
  /* 간격 단계는 M3 크롬도 함께 쓴다(4dp 그리드). 모서리는 크롬이 --md-sys-shape-* 를 쓴다. */
  --dop-space-3xs: 2px;
  --dop-space-2xs: 4px;
  --dop-space-s: 8px;
  --dop-space-m: 12px;
  --dop-space-l: 16px;
  --dop-space-xl: 20px;
  --dop-space-2xl: 24px;
  --dop-space-3xl: 32px;
  --dop-space-4xl: 48px;

  --dop-radius-xs: 6px;    /* 표 안의 구분 태그 */
  --dop-radius-s: 8px;     /* 버튼 · 태그 · 목차 항목 */
  --dop-radius-m: 12px;    /* 카드 · info-box · 표 */
  --dop-radius-pill: 999px;

  /* ── 옛 뼈대 치수 ───────────────────────────────── */
  /* 허브 크롬은 위 1층의 --sh-bar-h · --sh-lnb-w 를 쓴다. 이 두 값은 예전 시안 치수다. */
  --dop-nav-h: 72px;
  --dop-side-w: 280px;

  /* ══ 3. 별칭 — 예전 값 그대로 (목업 호환) ═════════════════════════════ */
  /* 크롬 CSS 는 이 이름을 쓰지 않는다. 목업이 선언 없이 물려받는 경우가 있어 값을 남겨 둔다. */

  /* ── 별칭: 허브 오버레이 ────────────────────────── */
  --sh-ink: var(--dop-ink-1);
  --sh-ink-soft: var(--dop-ink-2);
  --sh-ink-faint: var(--dop-ink-3);
  --sh-line: var(--dop-line-1);
  --sh-line-strong: var(--dop-line-2);
  --sh-bg: var(--dop-bg-1);
  --sh-bg-soft: var(--dop-bg-2);
  --sh-accent: var(--dop-primary);
  --sh-accent-soft: var(--dop-primary-soft);
  --sh-ok: var(--dop-positive);
  --sh-ok-soft: var(--dop-positive-soft);
  --sh-warn: var(--dop-warn);
  --sh-warn-soft: var(--dop-warn-soft);
  --sh-bad: var(--dop-negative);
  --sh-bad-soft: var(--dop-negative-soft);
  /* 상단 배너는 본문과 같은 밝기로 두고 경계선 한 줄로만 가른다 — 어두운 띠는
     목업 상단을 잘라 놓은 것처럼 보여, 그 아래가 화면의 일부인지 도구인지
     매번 헷갈렸다. --sh-point 는 지금 위치를 가리키는 색,
     --sh-alert 는 사람이 손을 대야 하는 것(확정필요·미답변 문의)이다. */
  --sh-bar-bg: var(--dop-bg-base);
  --sh-bar-line: var(--dop-line-2);
  --sh-bar-ink: var(--dop-ink-1);
  --sh-point: var(--dop-primary);
  --sh-alert: var(--dop-negative);
  --sh-font: var(--dop-font);
  --sh-mono: var(--dop-mono);

  /* ── 별칭: 목록 · 소개 · 가이드 페이지 ──────────── */
  --ink: var(--dop-ink-1);
  --soft: var(--dop-ink-2);
  --faint: var(--dop-ink-3);
  --line: var(--dop-line-1);
  --line2: var(--dop-line-2);
  --bg: var(--dop-bg-2);
  --card: var(--dop-bg-1);
  --accent: var(--dop-primary);
  --accent-soft: var(--dop-primary-soft);
  --ok: var(--dop-positive);
  --ok-soft: var(--dop-positive-soft);
  --warn: var(--dop-warn);
  --warn-soft: var(--dop-warn-soft);
  --bad: var(--dop-negative);
  --bad-soft: var(--dop-negative-soft);
  --mono: var(--dop-mono);
}

/* 화면 테마 단추(/_assets/theme.js)가 문서 뿌리에 적는 값. 단추로 고르지 않았으면 theme.js 가
   기기 설정을 그대로 적는다. 스크립트를 싣지 않은 문서는 위 `light dark` 대로 기기 설정을 따른다. */
:root[data-sh-theme="light"] {
  color-scheme: light;
}

:root[data-sh-theme="dark"] {
  color-scheme: dark;
}