/* 2026-08-28 실측: 이 2MB 가변 폰트가 페이지 이동마다 전량 재전송돼 재방문 전송량의 79% 를 차지했고,
   swap 이라 시스템 글꼴로 그렸다가 도착하면 글자가 다시 흘렀다("단계적으로 변한다"의 정체 중 하나).
   한글 완성형 11,172자 중 실무 한국어가 쓰는 KS X 1001 2,350자만 담은 508KB 서브셋을 기본으로 쓰고,
   원본은 희귀 음절이 화면에 나올 때만 받는다. 순서가 중요하다 — 같은 family 에서 브라우저는 뒤에
   선언된 face 를 먼저 쓰고, 그 face 에 글리프가 없을 때만 앞의 face 로 내려간다. 그래서 원본을 앞에,
   서브셋을 뒤에 둔다. 서브셋 파일명의 해시는 내용 해시라 서버가 1년 immutable 을 준다. */
@font-face {
  font-family: "Pretendard Variable";
  src: url("fonts/pretendard/PretendardVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  unicode-range: U+AC00-D7A3;
}
@font-face {
  font-family: "Pretendard Variable";
  src: url("fonts/pretendard/PretendardVariable.ko2350.e015a937cbe5.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

:root {
  /* 2026-09-27 밤 대표 지시로 색 세계를 미스티 그린으로 바꿨다("모든 곳에 파란색과 하늘색 계열 없애고
     미스티 그린 계열을 사용해라. 블랙 화이트 미스티그린 계열만 남겨라"). 기준은 대표가 보낸 물방울
     사진의 옥빛 그린이다 — OKLCH 색상각 168°, 사진에서 가장 많은 면이 #3cac8b·#57b295·#0b795a 다.
     바탕은 흰색에 가까운 옅은 안개 그린, 글자는 초록빛이 스민 검정, 레일은 초록 검정이다.
     빨강(danger)만 오류·신청 불가·파괴적 결과를 알리는 신호로 남긴다. 주의(옛 골드)는 먹색 계열이다.
     이전 H2 월드(웜 페이퍼·코발트·네이비 레일·골드 마커, 2026-08-10)는 폐기됐다.
     같은 날 대표 2차 지시: "그림 속 물방울 느낌, Observatory·Kaitoke·Larchmere 를 잘 섞어서.
     Swans Down(#d1ede1)은 시인성이 떨어지니 쓰지 마라." 세 이름 색이 아래 원시 토큰이고, 역할 토큰은
     이 셋에서 나온다 — 주 버튼 = Larchmere 면 + Kaitoke 글자 + Observatory 테두리, 레일·신뢰 = Kaitoke,
     포커스·진행 = Observatory. Observatory 는 흰 바탕 위 글자로 4.23:1 이라 작은 글자(링크)에는 한 단계 짙은
     primary(#006f53, 6.18:1)를 쓴다. Swans Down 과 같은 밝기의 옅은 틴트만으로 상태를 말하지 않는다. */
  --dv-observatory: #028c6a;
  --dv-kaitoke: #003e19;
  --dv-larchmere: #7bc5ae;
  --dv-bg-page: #f4f9f7;
  --dv-bg-surface: #ffffff;
  --dv-bg-subtle: #eaf3ef;
  --dv-bg-selected: #e4e9e6;
  --dv-text-strong: #0e1914;
  --dv-text: #283530;
  /* 보조문구. 흰색·subtle·selected·page 네 배경 모두에서 AA(4.5:1)를 통과해야 한다
     (#50605a: 흰색 6.64, page 6.24, subtle 5.87, selected 4.93). */
  --dv-text-muted: #50605a;
  /* 카드 경계선. 흰 카드가 페이지 바탕 위에 놓일 때 윤곽을 알려주는 것은 사실상 이 선
     하나다. 1.30:1짜리 선은 화면에서 보이지 않는다(2026-08-09 실측) — 흰색 대비 1.85:1. */
  --dv-border: #b2c2bb;
  --dv-border-strong: #708079;
  /* 현재 선택·링크의 짙은 Observatory(흰색 6.18:1, 선택 틴트 위 4.58:1). */
  --dv-primary: #0d3021;
  /* 2026-09-28 대표: "뭔가 미묘하게 촌스러워" → 조사(scratchpad research/synthesis.md): 광택 반사·가운데 꺾임·굴절 광·
     글자 그림자·색 번짐은 2000년대 젤·광택 버튼 문법이었다. 지금은 '흑옥 유리'다 — 면은 레일·링크와 같은 거의 검정인
     초록 한 면(이음매 없는 3% 명도 차이), 에메랄드는 윗가장자리 빛 1px 과 안쪽 테 1px 로만 둔다(두꺼운 유리판 옆면이
     초록으로 보이는 원리). 글자 그림자·색 번짐 없음. 흰 글자 13.62:1(면 가운데 #113425). */
  --dv-action: #113425;
  --dv-action-deep: #0c2d1f;
  --dv-on-action: #ffffff;
  /* 흑옥 유리 면 — 위 #153a29 에서 아래 #0c2d1f 로 이음매 없이 3% 가라앉는다. hover 는 한 단계 밝아지고, 눌림은 가라앉는다.
     background-color 는 따로 var(--dv-action) 을 둔다(측정기가 한 색으로 읽어야 대비를 잰다). */
  --dv-action-face: linear-gradient(180deg, #153a29 0%, #0c2d1f 100%);
  --dv-action-face-hover: linear-gradient(180deg, #1a4230 0%, #113425 100%);
  --dv-action-face-pressed: linear-gradient(180deg, #09271a 0%, #09271a 100%);
  /* 유리의 가장자리 — 윗가장자리 Larchmere 빛 1px(흰 카드 위 실효 #407461), 안쪽 테 Larchmere 14%, 무채색 짧은 밑 그림자 2겹.
     색 번짐은 두지 않는다(흰 바탕에 민트 안개가 깔려 파스텔이 된다). 이름의 droplet 은 옛 이름이다. */
  --dv-droplet-inset: inset 0 1px 0 rgba(123, 197, 174, .42), inset 0 0 0 1px rgba(123, 197, 174, .14), 0 1px 2px rgba(4, 22, 13, .24), 0 3px 8px -3px rgba(4, 22, 13, .30);
  /* 버튼 hover·AI 도크가 뜰 때의 그림자 — 색이 아니라 무채색 높이만 말한다. */
  --dv-action-glow: rgba(4, 22, 13, .18);
  --dv-action-glow-strong: rgba(4, 22, 13, .26);
  /* 글자 그림자는 쓰지 않는다(각인처럼 보여 낡는다). 토큰은 소비처 호환으로만 남긴다. */
  --dv-on-action-shadow: none;
  /* 광택 링 — 복귀 버튼(dv-return-beacon)과 강조 링(.dv-shine)이 같은 값을 본다.
     이름은 옛 여섯 단(금·진주·하늘·보라·녹·장미)을 그대로 두고, 값은 Kaitoke·흰빛·Larchmere·Observatory·
     안개·중간 옥빛이 번갈아 도는 명도 교대다 — 흰 바탕에서도 초록 버튼 위에서도 링이 보이게. */
  --dv-shine-gold: #04160d;
  --dv-shine-pearl: #ffffff;
  --dv-shine-sky: #7bc5ae;
  --dv-shine-violet: #028c6a;
  --dv-shine-jade: #e4e9e6;
  --dv-shine-rose: #3ea88a;
  /* 강조 링이 도는 각도. @property 로 등록돼 있어 애니메이션이 가능하다(dream-foundation.css). */
  --dv-shine-angle: 0deg;
  /* 오로라 강조 — 2026-10-01 대표 #35: "초록빛깔만 주구장창 쓰지말고, 정말 강조해야할부분은 초록빛깔 속에서 어쩌다 한번씩 …
     고급지게. 은은하게 퍼지는듯한 컬러풀". 초록 세계는 그대로 두고, 화면마다 한두 곳의 진짜 강조에만 쓰는 다섯 빛이다.
     빛(면·번짐)은 OKLCH 밝기 0.77–0.84·채도 0.08–0.09 로 낮춰 사탕색이 아니라 번지는 빛으로 읽히게 했고, 옥빛은 Larchmere 다.
     흰 바탕 대비 1.6–2.2:1 이라 글자·경계로 쓰지 않는다. 선(-ink)은 같은 색상각을 밝기 0.53 으로 내린 짙은 색이라
     흰 면 5.0–5.5:1, 선택 면(#e4e9e6) 4.1–4.5:1 이다. 순서는 늘 옥빛 → 하늘 → 라벤더 → 산호 → 호박이다.
     쓰는 곳은 DESIGN.md '오로라 강조' 절에 적은 곳뿐이다. */
  --dv-aurora-jade: #7bc5ae; /* impeccable-disable-line design-system-color -- 2026-10-01 대표 #35 오로라 강조 */
  --dv-aurora-sky: #8bc1e4; /* impeccable-disable-line design-system-color -- 2026-10-01 대표 #35 오로라 강조 */
  --dv-aurora-lavender: #bca7de; /* impeccable-disable-line design-system-color -- 2026-10-01 대표 #35 오로라 강조 */
  --dv-aurora-coral: #e9a192; /* impeccable-disable-line design-system-color -- 2026-10-01 대표 #35 오로라 강조 */
  --dv-aurora-amber: #ebc487; /* impeccable-disable-line design-system-color -- 2026-10-01 대표 #35 오로라 강조 */
  --dv-aurora-jade-ink: #2b7c66; /* impeccable-disable-line design-system-color -- 2026-10-01 대표 #35 오로라 강조 */
  --dv-aurora-sky-ink: #367397; /* impeccable-disable-line design-system-color -- 2026-10-01 대표 #35 오로라 강조 */
  --dv-aurora-lavender-ink: #756095; /* impeccable-disable-line design-system-color -- 2026-10-01 대표 #35 오로라 강조 */
  --dv-aurora-coral-ink: #97584c; /* impeccable-disable-line design-system-color -- 2026-10-01 대표 #35 오로라 강조 */
  --dv-aurora-amber-ink: #87652d; /* impeccable-disable-line design-system-color -- 2026-10-01 대표 #35 오로라 강조 */
  /* 오로라 한 줄 — 카드 윗선·숫자 밑줄처럼 가로로 놓이는 강조에 쓴다. */
  --dv-aurora-line: linear-gradient(90deg, var(--dv-aurora-jade), var(--dv-aurora-sky), var(--dv-aurora-lavender), var(--dv-aurora-coral), var(--dv-aurora-amber));
  --dv-primary-hover: #062619;
  --dv-primary-pressed: #04160d;
  --dv-on-primary: #ffffff;
  /* 신뢰(옛 네이비) — 전문가 검토·보안·히어로. Kaitoke 다. 레일도 같은 Kaitoke 면이다. */
  --dv-trust: #051b11;
  --dv-trust-soft: #ecefee;
  --dv-rail-bg: #04160d;
  --dv-rail-ink: #cad8d2;
  --dv-rail-ink-strong: #ffffff;
  --dv-rail-muted: #a9c4b8;
  --dv-rail-hover: rgba(255, 255, 255, .08);
  --dv-rail-selected: rgba(255, 255, 255, .12);
  --dv-rail-line: rgba(255, 255, 255, .14);
  /* 레일 현재 위치 마커 — Larchmere(Kaitoke 레일 위 6.13:1). 레일 잉크 #cad8d2 8.38:1, 보조 #a9c4b8 6.62:1. */
  --dv-rail-accent: #7bc5ae;
  /* 다크 레일 위 상태색. 라이트 표면용 success/danger 는 레일에서 너무 어둡다. */
  --dv-rail-success: #7ee0b8;
  --dv-rail-danger: #ffb4ac;
  /* 주의 — 먹색 계열. 색이 아니라 문구(확인 필요·자료 부족)와 경계로 알린다. */
  --dv-warning-accent: #484f4c;
  --dv-warning-text: #303734;
  --dv-warning-surface: #f0f3f2;
  --dv-danger: #b42318;
  --dv-danger-surface: #fef0ee;
  --dv-success-text: #0d3021;
  --dv-success-surface: #e4e9e6;
  /* 틴트 면의 경계 짝. 구형 모니터는 옅은 틴트를 흰색으로 뭉갠다(2026-08-22 실측) — 틴트로
     구분하는 면은 반드시 보이는 1px 경계를 함께 가진다. warning-surface 는 흰색 대비 RGB 합산
     차이가 40으로 임계에 걸쳐 경계 없이는 구분이 안 된다. */
  /* 옛 골드 마커 자리(2026-08-29 정본화). 화면마다 var(--dv-gold, …) 폴백으로 흩어져 있던 값을
     여기 한 곳에 모았다 — 지금은 먹색 계열이다. */
  --dv-gold: #565d5a;
  --dv-gold-line: #bfc6c3;
  --dv-gold-surface: #f2f5f4;
  --dv-success: #0d3021;
  --dv-success-soft: #e4e9e6;
  --dv-warning: #424a46;
  --dv-warning-soft: #edf1ef;
  --dv-selected-border: #93a49c;
  --dv-warning-border: #b6bcb9;
  --dv-danger-border: #f2b8b1;
  --dv-success-border: #93a49c;
  --dv-trust-border: #93a49c;
  --dv-voice-signal: #7bc5ae;
  --dv-focus: #028c6a;
  --dv-font-ui: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* 공고번호·금액 같은 데이터 표기용 고정폭. 화면들이 제각기 스택을 적던 것을 승격(2026-08-12). */
  --dv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 글자 크기 사다리(2026-08-28). 실제 CSS 에 38종이 섞여 있었고 11px 이하가 283개였다.
     12 미만은 없다 — 12 는 칩·라벨·메타 전용(굵기 650 이상), 본문은 15, 보조 13. */
  --dv-text-xs: 12px;
  --dv-text-sm: 13px;
  --dv-text-md: 15px;
  --dv-text-lg: 17px;
  --dv-text-xl: 20px;
  --dv-text-2xl: 24px;
  --dv-text-3xl: 28px;
  --dv-text-display: 38px;
  --dv-radius: 8px;
  --dv-radius-inner: 6px;
  --dv-radius-pill: 999px;
  --dv-shadow-overlay: 0 18px 48px rgba(23, 33, 29, 0.18);
  --dv-shadow-public-proof: 0 24px 64px rgba(4, 22, 13, 0.16);
  --dv-sidebar-width: 264px;
  --dv-sidebar-collapsed: 72px;
  --dv-duration-fast: 160ms;
  --dv-duration: 220ms;
  --dv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dv-z-sidebar: 60;
  --dv-z-drawer: 70;
  --dv-z-overlay: 90;

  --bg: var(--dv-bg-page);
  --surface: var(--dv-bg-surface);
  --surface-soft: var(--dv-bg-subtle);
  --ink: var(--dv-text-strong);
  --ink-soft: var(--dv-text);
  --muted: var(--dv-text-muted);
  --line: var(--dv-border);
  --line-strong: var(--dv-border-strong);
  --green: var(--dv-primary);
  --green-dark: var(--dv-primary-hover);
  --green-soft: var(--dv-bg-selected);
  --gold: var(--dv-warning-text);
  --gold-soft: var(--dv-warning-surface);
  --red: var(--dv-danger);
  --red-soft: var(--dv-danger-surface);
  --radius: var(--dv-radius);

  --app-sidebar-w: var(--dv-sidebar-width);
  --app-sidebar-collapsed: var(--dv-sidebar-collapsed);
  --app-bg: var(--dv-bg-page);
  --app-amber: var(--dv-warning-accent);
  --app-coral: var(--dv-danger);
  --app-green: var(--dv-primary);
  --app-green-soft: var(--dv-bg-selected);
  --app-navy: var(--dv-trust);
  --app-ink: var(--dv-text-strong);
  --app-ink2: var(--dv-text);
  --app-muted: var(--dv-text-muted);
  --app-line: var(--dv-border);
  --app-card-shadow: none;
  --app-hover-shadow: none;
}