/* =============================================================
   azone 공용 토큰 — 색·글꼴의 유일한 출처. 화면마다 색을 적지 않는다.

   이름이 두 벌인 이유: 그리드·가입은 --surface/--muted 를 쓰고,
   운영정보는 다른 곳에서 와서 --surface-1/--text-muted 를 쓴다.
   이름을 통일하려면 두 쪽 CSS 를 다 고쳐야 하고 그 과정에서 반드시 빠뜨린다.
   그래서 **값은 하나, 이름만 두 벌**로 둔다. 색을 바꿀 곳은 여기 한 곳뿐이다.
   ============================================================= */
:root {
  color-scheme: light;

  --bg:      #f6f7f9;
  --surface: #ffffff;
  --text:    #25303b;
  --muted:   #6b7683;
  --faint:   #96a0ac;
  --border:  #e3e8ee;
  --line:    #eef1f5;
  --head:    #f1f4f7;
  --even:    #fafbfc;
  --hover:   #f4f6f9;
  --sel-row: #eef4fd;
  --sunk:    #e6eaf0;

  --accent:  #3b6ef5;

  --btn:       #ffffff;
  --btn-bd:    #d4dae2;
  --btn-bd-s:  #a9b3bf;
  --btn-hover: #f0f2f5;

  --danger:     #b4433a;
  --bd-confirm: #e9f0ea;  --fg-confirm: #436e4b;
  --bd-cancel:  #f0e9e9;  --fg-cancel:  #96564f;
  --bd-temp:    #f1eee4;  --fg-temp:    #87743f;
  --bd-kind:    #e7edf6;  --fg-kind:    #46618c;
  --bd-set:     #ece7f3;  --fg-set:     #6a5590;

  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.05);
  --shadow-3: 0 12px 32px rgba(16,24,40,.16), 0 4px 10px rgba(16,24,40,.07);
  --backdrop: rgba(16,24,40,.45);

  --font-sans: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo",
               system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"], :root.is-dark {
  color-scheme: dark;

  --bg:      #15181d;
  --surface: #20242b;
  --text:    #dfe4ec;
  --muted:   #98a2b0;
  --faint:   #6b7684;
  --border:  #313841;
  --line:    #2a3039;
  --head:    #262b33;
  --even:    #22272f;
  --hover:   #2a3038;
  --sel-row: #28313f;
  --sunk:    #333b45;

  --accent:  #5b8bf0;

  --btn:       #272c34;
  --btn-bd:    #39414c;
  --btn-bd-s:  #4b5561;
  --btn-hover: #303740;

  --danger:     #e0817a;
  --bd-confirm: #243528;  --fg-confirm: #8cc397;
  --bd-cancel:  #382826;  --fg-cancel:  #d09b94;
  --bd-temp:    #35311e;  --fg-temp:    #ccb676;
  --bd-kind:    #232c39;  --fg-kind:    #93b0d6;
  --bd-set:     #2c2637;  --fg-set:     #b3a3d1;

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --shadow-3: 0 12px 32px rgba(0,0,0,.55);
  --backdrop: rgba(0,0,0,.68);
}

/* ---- 운영정보 계열 별칭 — 값은 위와 같다. 새 색이 아니다. ---- */
:root {
  --surface-1: var(--surface);
  --surface-2: var(--head);
  --surface-3: var(--hover);
  --surface-4: var(--sunk);

  --text-muted: var(--muted);
  --text-dim:   var(--faint);

  --border-strong: var(--btn-bd);
  --shadow-2:      var(--shadow-3);

  --accent-hover: color-mix(in srgb, var(--accent), #000 18%);
  --accent-bg:    color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-ring:  color-mix(in srgb, var(--accent) 24%, transparent);

  --danger-bg: color-mix(in srgb, var(--danger) 12%, transparent);
  --success:   var(--fg-confirm);
  --on-accent: #ffffff;

  --radius:    9px;
  --radius-sm: 7px;
  --shadow-1:  var(--shadow);
}
:root[data-theme="dark"], :root.is-dark {
  --accent-hover: color-mix(in srgb, var(--accent), #fff 16%);
  --accent-bg:    color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-ring:  color-mix(in srgb, var(--accent) 30%, transparent);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted  { color: var(--muted); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}