/* ============================================================================
   AnywhereRD 브랜드 — inspinia 테마 위에 색만 덮어쓴다.
   ⚠ 뷰어(viewer/)와 데몬(host/ui/)이 **같은 파일**을 쓴다. 한쪽만 고치지 않는다.

   ⛔ inspinia 는 부트스트랩의 `--bs-*` 가 아니라 **`--theme-*`** 변수를 쓴다.
      기본 primary 가 초록 #1ab394 로 하드코딩돼 있어서 `--bs-primary` 를 바꿔도 안 먹는다
      (실제로 그렇게 했다가 버튼만 초록으로 남았다).
   ⛔ 색은 **AnywhereMD 와 같은 톤**이다(수석님 지시 2026-09-18: "anywheremd 와 동일한
      색톤으로 조정해. 초록색 싫어"). 인디고 #4f46e5 → 바이올렛 #7c3aed.
      형제 앱이라 색은 같고 **마크의 형태로 구분한다**(MD=꺾쇠, RC=화면+커서).

   ⚠ inspinia 는 스킨별로 `[data-skin=...]` 에 색을 다시 정의한다. 그보다 특정도를
     높이려고 `html[data-skin]` 형태로 쓴다.
   ============================================================================ */

:root,
html[data-skin],
html[data-bs-theme],
html[data-skin][data-bs-theme] {
    --arc-indigo: #4f46e5;
    --arc-indigo-dark: #4338ca;
    --arc-violet: #7c3aed;
    --arc-grad: linear-gradient(135deg, #4f46e5, #7c3aed);

    /* inspinia 가 쓰는 이름 */
    --theme-primary: #4f46e5;
    --theme-primary-rgb: 79, 70, 229;
    --theme-primary-bg-subtle: rgba(79, 70, 229, .15);
    --theme-primary-border-subtle: rgba(79, 70, 229, .35);
    --theme-primary-text-emphasis: #4338ca;

    /* 부트스트랩 이름도 함께 맞춰 둔다(둘 다 쓰는 컴포넌트가 있다) */
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338ca;

    /* ⛔⛔ 우리 CSS(app.css · host.css)가 쓰는 `--bs-*` 를 inspinia 의 `--theme-*` 로 잇는다.
         이 다리가 없으면 `var(--bs-body-bg)` 같은 것이 **빈 값**이 되어 조용히 무시된다 —
         배경도 테두리도 안 그려지는데 **오류는 하나도 안 난다.**
         실측 2026-09-23: 기기 카드의 `background: var(--bs-secondary-bg)` 가 통째로 먹히지 않아
         `getComputedStyle` 이 `rgba(0,0,0,0)`(투명)을 돌려줬다. 페이지가 흰색이라
         **카드가 있는 것처럼 보였을 뿐** 실제로는 배경이 없었다.
       ⚠ 값을 **베끼지 않고 var() 로 참조**한다 — 그래야 다크 모드·스킨 전환을 따라간다. */
    --bs-body-bg: var(--theme-body-bg);
    --bs-body-color: var(--theme-body-color);
    --bs-secondary-bg: var(--theme-secondary-bg);
    --bs-tertiary-bg: var(--theme-tertiary-bg);
    --bs-secondary-color: var(--theme-secondary-color);
    --bs-border-color: var(--theme-border-color);
    --bs-border-radius-lg: var(--theme-border-radius-lg, .5rem);
    --bs-font-monospace: var(--theme-font-monospace);
}

/* ⛔⛔ 라이트 화면에서 **회색 글씨가 안 읽힌다**는 지적에 쓰는 확정 톤.
     (AnywhereMD·OmniEsolDashboard 에서 실측으로 정한 값 — 매번 새로 고르지 않는다)
     벤더 기본값은 흰 배경에서 대비가 2.4 대라 실제로 안 보인다. 여기 값은 불투명이다 —
     알파를 쓰면 배경이 바뀔 때 대비가 흔들린다.

   ⛔ `--theme-border-color` 는 **건드리지 않는다.** 예전에 함께 올렸다가
      "테두리는 원래대로 돌려줘" 지적을 받고 되돌렸다. 테두리를 진하게 하는 것은 고대비 옵션의 몫이다.
   ⛔ 반드시 `[data-bs-theme='light']` 로 **밝기를 한정**한다. 테마 블록에는 밝기 구분이 없어서
      거기 넣으면 라이트용 진한 회색이 **다크에도 적용**된다(AnywhereMD 에서 실제로 무너뜨린 적이 있다). */
html[data-bs-theme='light'],
html[data-skin][data-bs-theme='light'] {
    --theme-secondary-color: #5f6673;
    --theme-tertiary-color: #6a7280;
    --theme-emphasis-color: #2b2f3a;
}

/* 버튼 — inspinia 는 --theme-btn-* 를 쓴다 */
.btn-primary {
    --theme-btn-bg: var(--arc-indigo);
    --theme-btn-border-color: var(--arc-indigo);
    --theme-btn-hover-bg: var(--arc-indigo-dark);
    --theme-btn-hover-border-color: var(--arc-indigo-dark);
    --theme-btn-active-bg: var(--arc-indigo-dark);
    --theme-btn-active-border-color: var(--arc-indigo-dark);
    --theme-btn-disabled-bg: var(--arc-indigo);
    --theme-btn-disabled-border-color: var(--arc-indigo);
    --theme-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-outline-primary {
    --theme-btn-color: var(--arc-indigo);
    --theme-btn-border-color: var(--arc-indigo);
    --theme-btn-hover-bg: var(--arc-indigo);
    --theme-btn-hover-border-color: var(--arc-indigo);
    --theme-btn-active-bg: var(--arc-indigo);
    --theme-btn-active-border-color: var(--arc-indigo);
    --theme-btn-focus-shadow-rgb: 79, 70, 229;
}

/* 입력 포커스 */
.form-control:focus,
.form-select:focus {
    border-color: rgba(79, 70, 229, .55);
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15);
}

.form-check-input:checked {
    background-color: var(--arc-indigo);
    border-color: var(--arc-indigo);
}

/* 브랜드 글자 — Anywhere + RC */
.arc-wordmark { font-weight: 700; letter-spacing: -.2px; }
.arc-wordmark .rc {
    background: var(--arc-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}