/* 공유 디자인 토큰 — 웹 콘솔 넷이 같은 것을 본다.
 *
 * # 왜 한 파일인가 (2026-10-02)
 *
 * `admin` · `forensicapi` · `buildapi` 의 토큰 블록이 **바이트 동일**이었고
 * `lab` 은 **이미 갈렸다**(`--bg:#0f1115` 대 `#0f0f0f`, `--accent:#5b9cff` 대
 * `#4a9eff`). 색 하나를 고치려면 네 곳을 고쳐야 했고, 실제로 하나가 어긋났다.
 *
 * 런타임이 넷이라 번들을 따로 내보내는 것은 타당하다. 그런데 **토큰·버튼·뱃지·
 * focus·상태색까지 각자 손으로 유지하는 것**은 다른 문제다. 여기는 그 공통분모다.
 *
 * # 값의 출처 — 하우스 디자인 시스템
 *
 * `drm-server/multidrm/typescript/packages/admin-web` (Minible/SCMS 테마).
 * §0-1 준수 — **읽기만 했다.**
 *
 * ⚠️ **이전에는 조상을 잘못 골랐다.** `internal/admin/ui/style.css` 가
 * `multidrm/player/web/demo` 를 "하우스 스타일" 로 지목했는데 그건 **35줄
 * 플레이어 디버그 페이지**다(토큰도 라이트 모드도 셸도 없다). 거기서 파생된
 * 단정 *"multidrm 은 어두운 테마 전용이다"* 도 사실이 아니었다 — 실제 admin-web 은
 * `next-themes` 로 밝게/어둡게/시스템 3단이다.
 *
 * # 한글 폰트는 우리 것이 맞다
 *
 * 하우스는 `IBM Plex Sans` 를 쓰는데 **그 얼굴에 한글이 없다** — 라틴은 Plex,
 * 한글은 OS 기본으로 떨어지는 혼합 폰트가 된다. 우리는 한글 스택을 앞에 둔다.
 * ⚠️ 그리고 **웹폰트를 싣지 않는다** — 저장소에 폰트 파일이 0개이므로 설치되지
 * 않은 기기에서 안 나오는 얼굴을 선언하지 않는다. 플랫폼 실물만 적는다.
 */

:root {
  color-scheme: light dark;

  /* ── 하우스 회색 램프 (블루슬레이트) ──
   * Tailwind 기본 회색과 다르다 — `gray-400 #898fa9` 가 눈에 띄게 보라빛이다.
   * 스톡 회색을 쓰면 즉시 다른 제품으로 읽힌다. */
  --g50:  #f5f6f8;
  --g100: #ecedf1;
  --g200: #dee0e5;
  --g300: #c4c7cf;
  --g400: #898fa9;
  --g500: #7b8190;
  --g600: #5b6178;
  --g700: #383c40;
  --g800: #2b2e3b;
  --g900: #22252f;

  /* ── 브랜드 인디고 ──
   * 600 이 버튼·링크의 기준점이고 500 이 워드마크·활성 항목이다. */
  --p100: #dce3fb;
  --p400: #7688e3;
  --p500: #5b73e8;
  --p600: #4a5ec5;
  --p700: #3a4a9e;
  --p900: #232e64;

  /* ── 역할 (밝은 쪽) ── */
  --bg:        var(--g50);
  --surface:   #ffffff;
  --raised:    #ffffff;
  --field:     var(--g50);
  --text:      #343747;   /* 하우스 본문색 — 회색 램프 밖의 값이다 */
  --muted:     var(--g500);
  --faint:     var(--g400);
  --line:      var(--g200);
  --line-soft: var(--g100);
  --hover:     var(--g50);
  --ink:       var(--p600);
  --ink-text:  #ffffff;
  --ink-tint:  var(--p100);

  /* 그림자는 하우스의 한 단계다. 어두운 쪽에서는 테두리가 대신한다. */
  --shadow:    0 2px 4px rgba(15, 34, 58, .12);
  --shadow-lg: 0 2px 4px rgba(15, 34, 58, .12), 0 8px 24px rgba(15, 34, 58, .08);

  /* ── 상태색 — **의미를 갖는다** ──
   * 빨강은 감식 불가, 주황은 확인 필요, 초록은 정상.
   * **파랑은 조작에만 쓴다**(버튼·활성 탭·포커스) — 색이 의미 없이 있으면
   * 빨강을 봤을 때 손이 먼저 가지 않는다. */
  --bad:  #b91c1c;  --bad-tint:  #fee2e2;  --bad-line:  #fecaca;
  --warn: #a16207;  --warn-tint: #fef9c3;  --warn-line: #fef08a;
  --ok:   #15803d;  --ok-tint:   #dcfce7;  --ok-line:   #bbf7d0;

  /* ── 치수 ── */
  --r:    8px;
  --r-sm: 4px;

  /* ── 폰트 ──
   * 한글 스택을 앞에 둔다. **실물만 적는다** — 저장소에 폰트 파일이 0개이므로
   * Pretendard 처럼 "설치돼 있으면 보이는" 얼굴은 선언하지 않는다. */
  --font: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR",
          "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── 어두운 쪽 ──
 *
 * 세 상태를 다 다룬다 — 명시 선택이 OS 를 이기고, 미지정이면 OS 를 따른다.
 * 하우스는 `next-themes` 로 같은 일을 하지만 라이브러리가 필요하다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        var(--g900);
    --surface:   var(--g800);
    --raised:    #323644;
    --field:     #1b1e27;
    --text:      #a6b0cf;   /* 하우스 어두운 쪽 본문색 */
    --muted:     var(--g400);
    --faint:     var(--g500);
    --line:      var(--g700);
    --line-soft: #2f333f;
    --hover:     rgba(56, 60, 64, .5);
    --ink:       var(--p400);
    --ink-text:  #ffffff;
    --ink-tint:  rgba(35, 46, 100, .45);
    /* 어두운 쪽은 그림자를 쓰지 않는다 — 테두리가 면을 가른다 (하우스와 같다). */
    --shadow:    none;
    --shadow-lg: none;
    --bad:  #f87171;  --bad-tint:  rgba(127, 29, 29, .35);  --bad-line:  #991b1b;
    --warn: #fbbf24;  --warn-tint: rgba(113, 63, 18, .35);  --warn-line: #854d0e;
    --ok:   #4ade80;  --ok-tint:   rgba(20, 83, 45, .35);   --ok-line:   #166534;
  }
}

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

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        var(--g900);
  --surface:   var(--g800);
  --raised:    #323644;
  --field:     #1b1e27;
  --text:      #a6b0cf;
  --muted:     var(--g400);
  --faint:     var(--g500);
  --line:      var(--g700);
  --line-soft: #2f333f;
  --hover:     rgba(56, 60, 64, .5);
  --ink:       var(--p400);
  --ink-text:  #ffffff;
  --ink-tint:  rgba(35, 46, 100, .45);
  --shadow:    none;
  --shadow-lg: none;
  --bad:  #f87171;  --bad-tint:  rgba(127, 29, 29, .35);  --bad-line:  #991b1b;
  --warn: #fbbf24;  --warn-tint: rgba(113, 63, 18, .35);  --warn-line: #854d0e;
  --ok:   #4ade80;  --ok-tint:   rgba(20, 83, 45, .35);   --ok-line:   #166534;
}

/* ── 공통 primitive ──
 *
 * 표면별로 다시 쓰지 않아야 하는 것들. 시각 언어가 아니라 **행동 계약**이다 —
 * focus 가 보이는가, 상태 뱃지가 같은 뜻인가, 최소 터치 크기가 지켜지는가.
 * 레이아웃은 표면이 각자 한다. */

/* 본문 최소 크기 — **12px 이 한글의 실질 하한이다.** 같은 px 에서 라틴보다 획이
 * 촘촘하다. 그리고 한글 머리글에 `text-transform`·`letter-spacing` 을 쓰지 않는다
 * — `uppercase` 는 무효이고 자간은 음절 블록을 흩는다. */
.wm-base {
  font-family: var(--font);
  font-size: .875rem;      /* 14px — 하우스 본문과 같다 */
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;  /* 숫자 열이 맞는다 */
}

/* focus — **보여야 한다.** 키보드 사용자가 지금 어디 있는지 모르면 쓸 수 없다. */
:where(button, input, select, textarea, a[href], .link, summary):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* 상태 뱃지 — **세 색의 뜻이 네 표면에서 같아야 한다.** */
.wm-badge {
  display: inline-flex; align-items: center; gap: .32rem; flex: none;
  font-size: .75rem; font-weight: 600; padding: .12rem .45rem;
  border-radius: 100px; border: 1px solid var(--line); color: var(--muted);
}
.wm-badge.bad  { color: var(--bad);  background: var(--bad-tint);  border-color: var(--bad-line); }
.wm-badge.warn { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line); }
.wm-badge.ok   { color: var(--ok);   background: var(--ok-tint);   border-color: var(--ok-line); }

/* 빈 상태 — **초라하지 않아야 한다.** 0건은 사고가 아니라 소식이다. */
.wm-empty {
  margin: 0; padding: 3.5rem 1rem; text-align: center; font-size: .86rem;
  color: var(--muted); background: var(--surface);
  border: 1px dashed var(--line); border-radius: var(--r);
}

/* 화면에서는 안 보이고 스크린리더에만 읽힌다.
 * `display:none` 은 스크린리더에서도 사라진다 — 그러면 라벨이 없는 것과 같다. */
.wm-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 최소 터치 대상 — 28~34px 세그먼트 버튼이 44px 미달이었다. */
.wm-tap { min-height: 44px; min-width: 44px; }

/* 움직임을 줄여 달라는 요청을 존중한다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}