/* rails-modal-manager 틀 ↔ 테마 토큰 연결 (2026-10-01 다크모드 정비)
 *
 * gem 은 모달 틀 색을 전부 --rmm-* 변수로 받는다(라이트 :root / 다크 .dark). 다크에서만 그 변수를 테마 토큰(--ord-*)에 묶어
 * 모든 모달의 헤더·사이드바·서브메뉴·바탕·푸터가 «D3 그래파이트»가 되게 한다. 라이트는 gem 기본값(차콜블루 틀) 그대로.
 *   - html.dark(0,1,1) 가 gem 의 .dark(0,1,0) 보다 우선 → gem 수정 없이 덮인다.
 *   - 헤더 색 «사용자 지정»(localStorage modalHeaderColors → 루트 인라인 변수)은 이보다 우선 — 개인 설정 존중.
 *   - 서브메뉴 활성 탭은 depth 별 헤더 색을 따른다(_modals.css) → 다크에서 head-bg.
 *   - 종전 _dark_mode.css 의 모달 틀 !important 규칙(슬레이트 남색)은 삭제했다 — 여기 한 곳이 정본.
 * 이 파일은 토큰 파일과 같은 «테마 층»이라 html.dark 를 쓴다(화면 CSS 에서는 금지 — 개발 규칙 14).
 */

/* 앱 코드가 써 오던 «gem 에 없는» --rmm-* 별칭(대체값 white·#e5e7eb 등으로만 칠해지던 것) — 토큰으로 정의해 라이트/다크 자동.
   새 코드는 이 별칭 대신 --ord-* 를 직접 쓴다. */
:root {
  --rmm-bg-primary: var(--ord-surface);
  --rmm-bg-secondary: var(--ord-surface-2);
  --rmm-border-color: var(--ord-line);
  --rmm-text-primary: var(--ord-text);
  --rmm-text-secondary: var(--ord-text-3);
  --rmm-text-muted: var(--ord-text-4);
}
html.dark {
  --rmm-modal-bg: var(--ord-surface);
  --rmm-modal-border: transparent;
  --rmm-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6);
  --rmm-overlay-bg: rgba(0, 0, 0, .65);

  --rmm-header-bg: var(--ord-head-bg);
  --rmm-header-border: rgba(255, 255, 255, .06);
  --rmm-header-text: var(--ord-on-solid);
  --rmm-header-accent: var(--ord-accent);
  --rmm-header-bg-depth-0: var(--ord-head-bg);
  --rmm-header-bg-depth-1: color-mix(in srgb, var(--ord-head-bg) 90%, var(--ord-text) 10%);
  --rmm-header-bg-depth-2: color-mix(in srgb, var(--ord-head-bg) 82%, var(--ord-text) 18%);
  --rmm-header-bg-depth-3: color-mix(in srgb, var(--ord-head-bg) 74%, var(--ord-text) 26%);
  --rmm-header-text-depth-0: var(--ord-on-solid);
  --rmm-header-text-depth-1: var(--ord-on-solid);
  --rmm-header-text-depth-2: var(--ord-on-solid);
  --rmm-header-text-depth-3: var(--ord-on-solid);

  --rmm-footer-bg: var(--ord-panel);
  --rmm-footer-border: var(--ord-line);
  --rmm-footer-text: var(--ord-text-2);
  --rmm-footer-shadow: none;

  --rmm-sidebar-bg: var(--ord-panel);
  --rmm-sidebar-border: var(--ord-line);
  --rmm-sidebar-text: var(--ord-text-2);
  --rmm-sidebar-icon: var(--ord-text-3);
  --rmm-sidebar-item-hover: var(--ord-band);
  --rmm-sidebar-item-active-bg: var(--ord-accent-soft);
  --rmm-sidebar-item-active-text: var(--ord-accent-strong);
  --rmm-sidebar-item-active-icon: var(--ord-accent-strong);

  --rmm-submenu-bg: var(--ord-panel);
  --rmm-submenu-container-bg: var(--ord-band);
  --rmm-submenu-item-text: var(--ord-text-3);
  --rmm-submenu-item-hover-bg: rgba(255, 255, 255, .05);
  --rmm-submenu-item-active-border: transparent;
  --rmm-submenu-item-active-underline: var(--ord-accent);

  --rmm-content-bg: var(--ord-surface);
  --rmm-content-text: var(--ord-text);

  --rmm-btn-primary-bg: var(--ord-solid-blue);
  --rmm-btn-primary-hover: color-mix(in srgb, var(--ord-solid-blue) 85%, var(--ord-text) 15%);
  --rmm-btn-primary-text: var(--ord-on-solid);
  --rmm-btn-secondary-bg: var(--ord-raised);
  --rmm-btn-secondary-hover: var(--ord-line-2);
  --rmm-btn-secondary-text: var(--ord-text);
  --rmm-btn-danger-bg: var(--ord-solid-red);
  --rmm-btn-danger-hover: color-mix(in srgb, var(--ord-solid-red) 85%, var(--ord-text) 15%);
  --rmm-btn-ghost-hover: rgba(255, 255, 255, .05);

  --rmm-taskbar-bg: var(--ord-panel);
  --rmm-badge-bg: var(--ord-badge);
  --rmm-ring-color: color-mix(in srgb, var(--ord-accent) 65%, transparent);
}

/* gem 이 변수 밖에 직접 쓴 두 곳 — 틀 모달 로딩 줄(라이트 그라데이션 고정) · 로딩 덮개(.dark 남색 반투명) */
html.dark .rmm-shell-line { background: linear-gradient(90deg, var(--ord-band) 25%, var(--ord-raised) 37%, var(--ord-band) 63%); background-size: 400% 100%; }
html.dark .rmm-content-loader { background: color-mix(in srgb, var(--ord-surface) 70%, transparent); }