/* 공용 디자인 토큰 — 플테(client)와 랜딩(landing)이 같이 쓴다. 값을 바꾸면 두 곳이 함께 바뀐다. */
:root {
  /* 먹과 종이 — 모든 화면의 단일 토큰 (제작 화면에서 올려 옴) */
  --ink:         #0f0e0c;
  --ink-2:       #15130f;
  --ink-3:       #1c1914;
  --ink-deep:    #0b0a08;
  --line:        rgba(225,212,188,.12);
  --line-strong: rgba(225,212,188,.26);
  --line-faint:  rgba(225,212,188,.06);
  --t-1: #ddd5c6; --t-2: #9d968a; --t-3: #6b665d;
  --num-1: #807a70; --num-2: #bfb8ab; --num-3: #f0e9d9;
  --gold: #b89b57; --gold-dim: rgba(184,155,87,.45); --gold-text: #d6c38f;
  --vermil:      #b85a40;
  --warn:        var(--vermil);
  --font-serif:  'Cormorant Garamond', 'Noto Serif KR', serif;
  --font-latin:  'Cormorant Garamond', 'Noto Serif KR', serif;

  /* 방향색 — 게임 정보라 구분은 유지하되 먹에 가라앉힌 톤 (shared/card.js DIR_COLOR와 같은 값) */
  --dir-attack:  #d9735a;
  --dir-heal:    #7fb89c;
  --dir-unknown: #9a86c0;

  /* 옛 이름 → 새 토큰 (var를 쓰는 기존 규칙이 그대로 따라온다) */
  --bg:          var(--ink);
  --panel:       var(--ink-2);
  --panel2:      var(--ink-3);
  --border:      var(--line);
  --text:        var(--t-1);
  --text-dim:    var(--t-3);
  --accent:      var(--gold);
  --accent-dim:  rgba(184,155,87,.08);
  --green:       var(--dir-heal);
  --red:         var(--vermil);
  --orange:      #c08a4a;
  --purple:      var(--dir-unknown);

  /* 원소 — 먹에 가라앉힌 안료색 */
  --c-fire:      #c8553d;
  --c-light:     #d2bd72;
  --c-wind:      #6a9c7e;
  --c-earth:     #a87a4a;
  --c-water:     #4f7a99;
  --c-fire-bg:   #1d130f;
  --c-light-bg:  #1c1a12;
  --c-wind-bg:   #131913;
  --c-earth-bg:  #1b150f;
  --c-water-bg:  #111618;
  --c-dark:      #7d6a9e;
  --c-dark-bg:   #1a171b;

  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-sans:   'Noto Sans KR', -apple-system, sans-serif;
  --radius:      6px;
  --radius-lg:   10px;
  --gold-line:   var(--gold-dim);

  /* 붓획 — 끝이 가늘어지는 마른 가로획 (섹션 제목 밑줄·구분선·탭 밑줄) */
  --brush-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.8'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' fill='%23c9b27a' d='M1 5C8 3 30 2.2 70 2.6S112 3.4 119 3.9C100 4.6 60 5.6 20 5.6S4 5.6 1 5Z'/%3E%3C/svg%3E");
  --brush-stroke-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.8'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' fill='%23e1d4bc' d='M1 4.4C14 2.6 44 2.4 80 3S114 4 119 4.6C96 5.4 56 5.8 24 5.4S5 5 1 4.4Z'/%3E%3C/svg%3E");
  /* 종이 결 — 작은 SVG 노이즈 타일 (body · sticky 띠가 같은 결을 쓴다) */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 .09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 삼율 마크 (작은 크기용 lite) — 스피너 배경 */
  --samyul-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke-linecap='round'%3E%3Cpath d='M163 62A74 74 0 1 1 38 52' stroke='%23c4653a' stroke-width='9' opacity='.85'/%3E%3Cpath d='M88 174A70 70 0 1 1 157 70' stroke='%235a7d8c' stroke-width='8' opacity='.8'/%3E%3Cpath d='M47 60A67 67 0 1 1 90 168' stroke='%23a8935f' stroke-width='8' opacity='.75'/%3E%3C/svg%3E");
}