/* 진료 항목 관리 일곱 화면의 다크 레이어 (PLAN 260906-1 3단계)
 *
 * 대상: clinical-catalog · herb-management · formula-management · acupuncture-management ·
 *       herb-detail · formula-detail · acupuncture-detail
 *
 * 이 일곱 화면은 색을 전부 페이지 <style> 에 하드코딩해 뒀고 `data-theme` 규칙이 한 줄도 없었다.
 * theme.dark.css 의 포괄 규칙이 table/input/button 의 **글자색**만 바꾸는 바람에, 흰 판은 그대로
 * 남고 글자만 밝아져서 「흰 바탕에 흰 글씨」가 됐다 (260906 실측: `.cat-add-btn` 명암비 1.09,
 * `.td-info-btn` 1.14, `.herb-hero-stat strong` 1.23).
 *
 * 라이트는 건드리지 않는다 — 공용 토큰 하나로 두 테마를 맞추면 라이트가 따라 움직인다.
 * 여기서는 어두울 때의 값만 따로 적는다.
 *
 * 파스텔 배지(연보라·연초록 바탕에 진한 글씨)는 어두운 판에서 형광판처럼 뜬다. 그래서 뒤집는다 —
 * 바탕은 짙은 같은 색조, 글씨는 옅은 같은 색조.
 */

body[data-theme="dark"] {
    --cat-surface: var(--dark-surface, #171717);
    --cat-surface-2: var(--dark-surface-2, #1d1d1d);
    --cat-border: var(--dark-border, #2a2a2a);
    --cat-border-2: var(--dark-border-2, #303030);
    --cat-text: var(--dark-text, #edf0f3);
    --cat-muted: var(--dark-text-muted, #c2c8d0);
    --cat-soft: var(--dark-text-soft, #aeb6c1);
    --cat-faint: var(--dark-accent, #8c929d);
    /* 행 호버 — 라이트에서는 각 화면의 색조(초록·보라·파랑)로 아주 옅게 깔던 자리다. */
    --cat-hover: #202020;
}

/* ── 판·표: 세 관리 화면 + 두 상세 화면이 같은 모양이다 ─────────────────────── */

body[data-theme="dark"] .herb-table-wrap,
body[data-theme="dark"] .formula-table-wrap,
body[data-theme="dark"] .acu-table-wrap,
body[data-theme="dark"] .herb-section,
body[data-theme="dark"] .formula-section,
body[data-theme="dark"] .acu-section {
    background: var(--cat-surface);
    border-color: var(--cat-border);
}

body[data-theme="dark"] .herb-table thead th,
body[data-theme="dark"] .formula-table thead th,
body[data-theme="dark"] .acu-table thead th,
body[data-theme="dark"] .herb-comp-table thead th {
    background: var(--cat-surface-2);
    color: var(--cat-soft);
    border-bottom-color: var(--cat-border);
}

body[data-theme="dark"] .herb-table tbody tr,
body[data-theme="dark"] .formula-table tbody tr,
body[data-theme="dark"] .acu-table tbody tr,
body[data-theme="dark"] .formula-list-table tr,
body[data-theme="dark"] .herb-comp-table tr,
body[data-theme="dark"] .herb-info-table tr,
body[data-theme="dark"] .formula-info-table tr,
body[data-theme="dark"] .tcmid-item,
body[data-theme="dark"] .tcmid-clinical,
body[data-theme="dark"] .tcmid-clinical-row,
body[data-theme="dark"] .herb-section-header,
body[data-theme="dark"] .formula-section-header,
body[data-theme="dark"] .acu-section-head {
    border-color: var(--cat-border);
}

body[data-theme="dark"] .tcmid-item:nth-child(odd) {
    border-right-color: var(--cat-border);
}

body[data-theme="dark"] .herb-table tbody tr:hover,
body[data-theme="dark"] .formula-table tbody tr:hover,
body[data-theme="dark"] .acu-table tbody tr:hover,
body[data-theme="dark"] .formula-list-table tr:hover {
    background: var(--cat-hover);
}

/* ── 셀 글자 ─────────────────────────────────────────────────────────────── */

body[data-theme="dark"] .td-ko,
body[data-theme="dark"] .td-main,
body[data-theme="dark"] .td-name-zh,
body[data-theme="dark"] .fl-name-zh,
body[data-theme="dark"] .herb-comp-name,
body[data-theme="dark"] .tcmid-value,
body[data-theme="dark"] .tcmid-clinical-value,
body[data-theme="dark"] .herb-info-table td,
body[data-theme="dark"] .formula-info-table td,
body[data-theme="dark"] .herb-section-header h2,
body[data-theme="dark"] .formula-section-header h2,
body[data-theme="dark"] .catalog-card h2,
body[data-theme="dark"] .catalog-card-count,
body[data-theme="dark"] .acu-name,
body[data-theme="dark"] .formula-hero-stat strong {
    color: var(--cat-text);
}

body[data-theme="dark"] .td-zh,
body[data-theme="dark"] .td-en,
body[data-theme="dark"] .td-sub,
body[data-theme="dark"] .td-name-ko,
body[data-theme="dark"] .td-book,
body[data-theme="dark"] .fl-name-ko,
body[data-theme="dark"] .fl-indication,
body[data-theme="dark"] .herb-comp-zh,
body[data-theme="dark"] .herb-info-table th,
body[data-theme="dark"] .formula-info-table th,
body[data-theme="dark"] .tcmid-clinical-label,
body[data-theme="dark"] .acu-meta,
body[data-theme="dark"] .catalog-card p,
body[data-theme="dark"] .herb-count,
body[data-theme="dark"] .formula-count,
body[data-theme="dark"] .ins-note,
body[data-theme="dark"] .ins-code,
body[data-theme="dark"] .herb-error h2,
body[data-theme="dark"] .formula-error h2 {
    color: var(--cat-soft);
}

body[data-theme="dark"] .td-latin,
body[data-theme="dark"] .herb-comp-latin,
body[data-theme="dark"] .origin-latin,
body[data-theme="dark"] .tcmid-value.latin,
body[data-theme="dark"] .tcmid-value.en {
    color: var(--cat-faint);
}

body[data-theme="dark"] .herb-info-table th,
body[data-theme="dark"] .formula-info-table th,
body[data-theme="dark"] .tcmid-clinical-label,
body[data-theme="dark"] .herb-comp-table thead th {
    background: var(--cat-surface-2);
}

/* ── 버튼 — 여기가 「흰 바탕에 흰 글씨」였다 ──────────────────────────────── */

body[data-theme="dark"] .td-info-btn,
body[data-theme="dark"] .td-action,
body[data-theme="dark"] .ins-btn,
body[data-theme="dark"] .ins-select,
body[data-theme="dark"] .pag-btn,
body[data-theme="dark"] .cat-btn-ghost,
body[data-theme="dark"] .acu-btn-ghost,
body[data-theme="dark"] .formula-more-btn {
    background: var(--cat-surface-2);
    color: var(--cat-muted);
    border-color: var(--cat-border-2);
}

body[data-theme="dark"] .cat-btn-submit,
body[data-theme="dark"] .acu-btn-submit {
    background: var(--cat-border-2);
    color: var(--cat-text);
    border-color: #3d3d3d;
}

body[data-theme="dark"] .td-info-btn:hover,
body[data-theme="dark"] .ins-btn:hover,
body[data-theme="dark"] .pag-btn:hover:not(:disabled),
body[data-theme="dark"] .cat-btn-ghost:hover,
body[data-theme="dark"] .acu-btn-ghost:hover,
body[data-theme="dark"] .cat-btn-submit:hover,
body[data-theme="dark"] .acu-btn-submit:hover,
body[data-theme="dark"] .formula-more-btn:hover {
    background: var(--cat-border);
    border-color: var(--cat-faint);
    color: var(--cat-text);
}

/* 현재 페이지 — 라이트에서는 각 화면의 강조색으로 채운 유일한 자리다. 어두울 때도 그대로 둔다. */
body[data-theme="dark"] .pag-btn.is-active {
    color: #fff;
}

body[data-theme="dark"] .cat-row-add,
body[data-theme="dark"] .acu-group-add {
    background: none;
    border-color: var(--cat-border-2);
    color: var(--cat-soft);
}

/* ── 카드 (진료 항목 허브) ─────────────────────────────────────────────── */

body[data-theme="dark"] .catalog-card {
    background: var(--cat-surface);
    border-color: var(--cat-border);
}

body[data-theme="dark"] .catalog-card:hover {
    border-color: var(--cat-faint);
    box-shadow: none;
}

body[data-theme="dark"] .catalog-card-foot {
    border-top-color: var(--cat-border);
}

body[data-theme="dark"] .catalog-note {
    background: var(--cat-surface-2);
    border-color: var(--cat-border);
    color: var(--cat-soft);
}

body[data-theme="dark"] .catalog-note strong {
    color: var(--cat-muted);
}

/* 패널 아이콘 상자 색의 다크 값은 공용 ui-kit.css(.ui-icon-box.is-herb 등). */

/* ── 모달 ────────────────────────────────────────────────────────────────── */

/* 뒷막은 페이지의 슬레이트 rgba(15, 23, 42) 가 다크에서 푸르게 떠서 공용 검정 토큰으로 바꾼다(260924). */
body[data-theme="dark"] .cat-modal-backdrop,
body[data-theme="dark"] .acu-modal-backdrop {
    background: var(--color-overlay-dark);
}

body[data-theme="dark"] .cat-modal-card,
body[data-theme="dark"] .acu-modal-card,
body[data-theme="dark"] .cat-herb-drop {
    background: var(--cat-surface);
    border-color: var(--cat-border);
}

body[data-theme="dark"] .cat-modal-head h2,
body[data-theme="dark"] .acu-modal-head h2 {
    color: var(--cat-text);
}

/* ── 혈위 고르기 (침구 처방 추가, 260910-4) ────────────────────────────────
   탕제의 `.cat-herb-drop` 과 같은 물건이라 같은 값을 쓴다. */

body[data-theme="dark"] .acu-point-box {
    background: var(--cat-surface-2);
    border-color: var(--cat-border);
}

body[data-theme="dark"] .acu-point-box:focus-within {
    border-color: var(--cat-border-2);
}

body[data-theme="dark"] .acu-point-chip {
    background: var(--cat-border);
    color: var(--cat-text);
}

/* 목록에 없는 이름 — 라이트의 연주황을 뒤집는다(바탕은 짙게, 글씨는 옅게). */
body[data-theme="dark"] .acu-point-chip.is-free {
    background: #3a2a17;
    color: #e6b782;
}

body[data-theme="dark"] .acu-point-drop {
    background: var(--cat-surface);
    border-color: var(--cat-border);
    box-shadow: none;
}

body[data-theme="dark"] .acu-point-drop button {
    color: var(--cat-text);
}

body[data-theme="dark"] .acu-point-drop button:hover,
body[data-theme="dark"] .acu-point-drop button.is-active {
    background: var(--cat-hover);
}

body[data-theme="dark"] .acu-point-drop .drop-sub,
body[data-theme="dark"] .acu-point-drop .drop-empty {
    color: var(--cat-soft);
}

/* 잠긴 칸 — 라이트는 브라우저 기본 disabled 로 보이지만, 여기서는 입력칸 배경을 명시로
   덮어써서 그 표시가 사라진다. 짝 규칙이 두 화면의 인라인 스타일에 있다 (PLAN 260907-4 §4-A). */
body[data-theme="dark"] .cat-field input:disabled,
body[data-theme="dark"] .cat-field select:disabled,
body[data-theme="dark"] .cat-herb-row input:disabled,
body[data-theme="dark"] .acu-group-row input:disabled,
body[data-theme="dark"] .cat-row-add:disabled {
    background: var(--cat-border);
    color: var(--cat-soft);
    cursor: not-allowed;
}

body[data-theme="dark"] .cat-modal-lock {
    background: var(--cat-surface-2);
    border-color: var(--cat-border-2);
    color: var(--cat-soft);
}

body[data-theme="dark"] .cat-field label,
body[data-theme="dark"] .acu-field label,
body[data-theme="dark"] .cat-herb-drop button {
    color: var(--cat-muted);
}

body[data-theme="dark"] .cat-herb-drop button:hover {
    background: var(--cat-surface-2);
}

/* ── 배지 — 파스텔을 뒤집는다 (바탕은 짙게, 글씨는 옅게) ─────────────────── */

body[data-theme="dark"] .td-custom,
body[data-theme="dark"] .cat-label-optional,
body[data-theme="dark"] .conv-value.unknown,
body[data-theme="dark"] .acu-tag.other {
    background: var(--cat-border);
    color: var(--cat-soft);
}

body[data-theme="dark"] .badge-tcmid,
body[data-theme="dark"] .td-dynasty,
body[data-theme="dark"] .td-form-type,
body[data-theme="dark"] .ins-badge.mixed,
body[data-theme="dark"] .fl-dynasty { background: #2a2140; color: #c9b6f5; }

body[data-theme="dark"] .badge-nifds,
body[data-theme="dark"] .td-herb-count,
body[data-theme="dark"] .herb-comp-dosage,
body[data-theme="dark"] .conv-value,
body[data-theme="dark"] .fl-dosage,
body[data-theme="dark"] .acu-tag.bo { background: #16301f; color: #8fd6a8; }

body[data-theme="dark"] .ins-badge.form { background: #152a3d; color: #8fc0e8; }
body[data-theme="dark"] .ins-badge.single,
body[data-theme="dark"] .conv-value.approx { background: #33280f; color: #e0bc70; }
body[data-theme="dark"] .acu-tag.sa { background: #3a1d1d; color: #f0a3a3; }

/* ── 그 밖 ───────────────────────────────────────────────────────────────── */

/* 상세 화면의 침구 히어로만 라이트 그라디언트다(나머지 둘은 원래 짙은 색). */
body[data-theme="dark"] .acu-hero {
    background: linear-gradient(135deg, #1a2230, var(--cat-surface));
    border-color: var(--cat-border);
}

body[data-theme="dark"] .acu-item {
    border-color: var(--cat-border);
}

body[data-theme="dark"] .otc-price:disabled {
    background: var(--cat-surface-2);
    color: var(--cat-faint);
}

body[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #1c1c1c 25%, #262626 50%, #1c1c1c 75%);
    background-size: 200% 100%;
}

body[data-theme="dark"] .herb-empty,
body[data-theme="dark"] .formula-empty,
body[data-theme="dark"] .workspace-empty-state {
    color: var(--cat-faint);
}

/* 방금 추가한 행을 잠깐 밝히는 플래시 — 라이트의 연보라는 어두운 표에서 백색광이 된다. */
@keyframes cat-row-flash-dark {
    0% { background: #2a2140; }
    100% { background: transparent; }
}

body[data-theme="dark"] #formulaTableBody tr.is-new {
    animation-name: cat-row-flash-dark;
}

/* ── 혈위 그룹 카드·시술 토글·미리보기 (침구 처방 추가, 260910-5) ─────────── */

body[data-theme="dark"] .acu-group-row {
    background: var(--cat-surface-2);
    border-color: var(--cat-border);
}

body[data-theme="dark"] .acu-method-toggle {
    background: var(--cat-surface);
    border-color: var(--cat-border);
    color: var(--cat-soft);
}

/* 켜진 토글 — 라이트의 연보라를 뒤집는다(바탕은 짙게, 글씨는 옅게). 미리보기의
   시술 배지도 같은 색이어야 「이 줄의 이 시술」이 한 눈에 이어진다. */
body[data-theme="dark"] .acu-method-toggle.is-on,
body[data-theme="dark"] .acu-preview-method,
body[data-theme="dark"] .acu-method {
    background: #262046;
    border-color: #4c4487;
    color: #c3bdf2;
}

body[data-theme="dark"] .acu-preview {
    background: var(--cat-surface-2);
    border-color: var(--cat-border);
}

body[data-theme="dark"] .acu-preview-row {
    color: var(--cat-text);
}

body[data-theme="dark"] .acu-preview-crumb {
    color: var(--cat-soft);
}

/* 마디 사이의 `›` — 라이트는 테두리색 계열로 흐려도 흰 바탕에서 보이지만, 다크에서
   `--cat-border`(#2a2a2a)를 글자에 쓰면 바탕(#1d1d1d)과 거의 같아 사라진다(260910-5 실측).
   글자에는 글자 색을 쓴다 — 본문(`--cat-soft`)보다 한 단계 흐린 `--cat-faint`. */
body[data-theme="dark"] .acu-preview-crumb i {
    color: var(--cat-faint);
}

body[data-theme="dark"] .acu-preview-crumb .is-leaf {
    color: var(--cat-text);
}

body[data-theme="dark"] .acu-preview-empty {
    color: var(--cat-faint);
}