/*
 * CREYON 목업 — 공통 토큰 · 리셋.
 * 데스크톱 8 · 모바일 6 화면이 전부 이 파일을 <link>한다. 값은 web/core/theme/tokens.*.css의
 * teal 결정과 동일하다(2026-08-30 palette 교체, docs/board/design.md 참조).
 *
 * 화면마다 :root를 새로 베껴 쓰던 걸 걷어냈다 — 15개 파일에서 값 자체가 어긋난 곳은 없었다
 * (--canvas 하나만 index.html이 의도적으로 다르게 쓴다. 그건 이 파일 뒤에서 그 파일이 로컬로
 * 덮어쓴다). 화면별 CSS를 새로 정의하면 다음에 조용히 벌어질 수 있는 게 바로 이 드리프트다.
 *
 * --row/--r-xs~lg는 데스크톱, --touch/--r은 모바일 스케일이다. 안 쓰는 쪽에서도 값이 남아있는
 * 건 무해하다 — 화면마다 다른 서브셋만 참조한다.
 */

@font-face{
  font-family:"Pretendard Variable";
  src:url("../../web/core/theme/fonts/pretendard/PretendardVariable.woff2") format("woff2-variations");
  font-weight:45 920; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono Variable";
  src:url("../../web/core/theme/fonts/jetbrains-mono/JetBrainsMono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight:100 800; font-style:normal; font-display:swap;
}

:root{
  /* ---- 면 ---- */
  --canvas:#f5f6f8; --surface:#ffffff; --raised:#ffffff; --sunken:#eef1f3;
  /* ---- 글 ---- */
  --tx-strong:#1b1f24; --tx:#333a42; --tx-muted:#5b6570; --tx-subtle:#7c8790; --on-accent:#ffffff;
  /* ---- 선 ---- */
  --bd:#dfe3e7; --bd-strong:#b8c0c8; --bd-focus:#0e7c74;
  /* ---- 강조 (teal — 2026-08-30 파랑에서 교체, docs/board/design.md 참조) ---- */
  --accent:#0e7c74; --accent-hover:#0a5f58; --accent-active:#084943; --accent-subtle:#e3f4f2;
  /* ---- 상태 ---- */
  --ok:#1c7c40; --ok-sub:#eaf7ee;
  --warn:#8a5a08; --warn-sub:#fff5e0;
  --dang:#a3272a; --dang-sub:#fdecec;
  --info:#1d5d89; --info-sub:#eaf5fc;
  --neu-sub:#eef1f3;
  /* ---- 스케일 — 데스크톱 ---- */
  --row:32px;
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  /* ---- 스케일 — 모바일(터치) ---- */
  --touch:48px; --r:10px;
  --shadow-xs:0 1px 2px rgba(20,23,27,.05);
  --shadow-sm:0 1px 1px rgba(20,23,27,.04), 0 6px 14px -6px rgba(20,23,27,.10);
  --shadow-md:0 2px 4px rgba(20,23,27,.05), 0 16px 28px -10px rgba(20,23,27,.14);
  --shadow-pop:0 4px 10px rgba(20,23,27,.08), 0 20px 36px -14px rgba(20,23,27,.20);
  --shadow-fab:0 6px 16px rgba(14,124,116,.28), 0 2px 4px rgba(14,124,116,.18);
}

*{box-sizing:border-box;}
body{margin:0;background:var(--canvas);color:var(--tx);
  font-family:"Pretendard Variable","Malgun Gothic","Apple SD Gothic Neo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.62;word-break:keep-all;overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none;} a:hover{color:var(--accent-hover);}
.mono{font-family:"JetBrains Mono Variable",ui-monospace,Consolas,monospace;}