body[data-theme="dark"] .classic-content {
    background: #151514;
    border: 1px solid #2a2a2a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}

/* 상단 바 — 라이트가 .content-title.sticky 에 정의한 토큰만 갈아 끼운다.
   값은 마켓플레이스 다크(marketplace.css)와 같은 계열이다. */
body[data-theme="dark"] .content-title.sticky {
    --cd-surface: #171717;
    --cd-surface-2: #1d1d1d;
    --cd-border: #2a2a2a;
    --cd-border-2: #3a3a3a;
    --cd-text: #edf0f3;
    --cd-text-muted: #aeb6c1;
    --cd-text-soft: #7c828c;
    --cd-link: #8fb3e6;

    background: rgba(20, 20, 20, 0.8);
    border-bottom-color: #2a2a2a;
    box-shadow: none;
}

body[data-theme="dark"] .content-title.sticky.scrolled {
    box-shadow: 0 10px 24px -18px #000;
}

/* theme.dark.css 의 `body[data-theme="dark"] select { background: ... }` 는 단축 속성이라
   repeat·size·position 을 초기값으로 되돌린다(화살표가 타일로 깔린다). 그 선택자는 (0,1,2),
   여기는 (0,2,1) 이라 특이도로 이긴다 — !important 대신 롱핸드를 다시 적는다. */
body[data-theme="dark"] .volume-select {
    background-color: var(--cd-surface);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c828c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 10px 6px;
    background-position: right 11px center;
    border-color: var(--cd-border);
}

body[data-theme="dark"] .volume-select:hover {
    background-color: var(--cd-surface-2);
    border-color: var(--cd-border-2);
}

body[data-theme="dark"] .volume-select:focus {
    box-shadow: 0 0 0 3px rgba(143, 179, 230, 0.16);
}

body[data-theme="dark"] .content-title.sticky .hierarchy-action-buttons .save-btn {
    background-color: #1e3328 !important;
    color: #95d8ad !important;
    border-color: #2f5d45;
}

body[data-theme="dark"] .content-title.sticky .hierarchy-action-buttons .save-btn:hover {
    background-color: #24402f !important;
}

body[data-theme="dark"] .text-section {
    background: #1a1a1a;
    border-color: #2a2a2a;
}

body[data-theme="dark"] .text-section:hover {
    border-color: #3a4d63;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

body[data-theme="dark"] .content-link-copy-btn {
    background: #22262d;
    border-color: #394150;
    color: #b8c3d3;
}

body[data-theme="dark"] .text-section:hover .content-link-copy-btn,
body[data-theme="dark"] .content-link-copy-btn:focus-visible {
    background: #2a3341;
    border-color: #4f6077;
    color: #d8e7fb;
}

body[data-theme="dark"] .content-link-copy-btn.is-copied {
    background: #1e3328;
    border-color: #2f7d4a;
    color: #95d8ad;
}

body[data-theme="dark"] .original-text {
    color: #edf0f3;
}

body[data-theme="dark"] .translation-text {
    color: #b8bec8;
}

body[data-theme="dark"] .level-badge {
    background: #1d2430;
    color: #d6e2ee;
    border-color: #2f3c4a;
}

body[data-theme="dark"] .level-btn {
    background-color: #222;
    color: #d6e2ee;
    border-color: #2a2a2a;
}

body[data-theme="dark"] .level-btn:hover {
    background-color: #2a2a2a;
}

body[data-theme="dark"] .level-btn.level-up-btn {
    background-color: #1d2a37;
    color: #8bb7e5;
    border-color: #2f3f52;
}

body[data-theme="dark"] .level-btn.level-up-btn:hover {
    background-color: #233447;
}

body[data-theme="dark"] .level-btn.level-down-btn {
    background-color: #2a2418;
    color: #d7b071;
    border-color: #4a3a1f;
}

body[data-theme="dark"] .level-btn.level-down-btn:hover {
    background-color: #342d1f;
}

body[data-theme="dark"] .level-btn.level-delete-btn {
    background-color: #332121;
    color: #e09a9a;
    border-color: #4a2f2f;
}

body[data-theme="dark"] .level-btn.level-delete-btn:hover {
    background-color: #3d2929;
}

body[data-theme="dark"] .edit-mode-switch-track {
    background: #2a3340;
    border-color: #3b4a5e;
}

body[data-theme="dark"] .edit-mode-switch-thumb {
    background: #d7e2f0;
}

body[data-theme="dark"] .edit-mode-switch input:checked + .edit-mode-switch-track {
    background: #2f5f96;
    border-color: #4a78ab;
}

body[data-theme="dark"] .edit-mode-switch-text {
    color: #c4d2e4;
}

body[data-theme="dark"] .citation-btn {
    background: #1d2b3a;
    color: #8bb7e5;
    border-color: #2f4a66;
}

body[data-theme="dark"] .citation-btn:hover {
    background: #25384d;
    color: #b4d4f3;
}

body[data-theme="dark"] #loadMoreBtn {
    background: #1a1a1a !important;
    color: #d6e2ee !important;
    border-color: #2a2a2a !important;
}

body[data-theme="dark"] #loadMoreBtn:hover {
    background: #222 !important;
    border-color: #506784 !important;
}

body[data-theme="dark"] .insert-btn {
    background: #1d2430;
    border-color: #2f3c4a;
    color: #d6e2ee;
}

body[data-theme="dark"] .insert-btn:hover {
    background: #263346;
    border-color: #506784;
}

body[data-theme="dark"] .insert-btn::before {
    background: rgba(139, 169, 201, 0.22);
}

body[data-theme="dark"] .citations-modal-content {
    background: #151514;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .citations-modal-header {
    background: #1b1b1a;
    border-bottom-color: #2a2a2a;
}

body[data-theme="dark"] .citations-modal-header h3 {
    color: #d6e2ee;
}

body[data-theme="dark"] .citations-modal-close {
    color: #b8bec8;
}

body[data-theme="dark"] .citations-modal-close:hover {
    background: #2a2a2a;
    color: #edf0f3;
}

body[data-theme="dark"] .citation-item {
    background: #1a1a1a;
    border-color: #2a2a2a;
}

body[data-theme="dark"] .citation-item:hover {
    border-color: #506784;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .citation-title {
    color: #d6e2ee;
}

body[data-theme="dark"] .citation-meta,
body[data-theme="dark"] .citation-date {
    color: #b8bec8;
}

body[data-theme="dark"] .citation-author {
    color: #8bb7e5;
}

body[data-theme="dark"] .no-results p,
body[data-theme="dark"] .error-details {
    color: #b8bec8;
}

body[data-theme="dark"] .cd-skel-line {
    background: #2a2a2a;
}

body[data-theme="dark"] .cd-skel-line::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

/* ===== 인라인 편집(더블클릭) — 다크 ===== */
body[data-theme="dark"] .edit-container {
    /* 블록 배경(#1a1a1a)보다 한 단 밝게 — 같은 값이면 상자가 안 보인다.
       색상환은 타지 않는다: 푸른 슬레이트를 쓰면 편집기만 딴 톤이 된다 */
    background: #212121;
    border-color: #333333;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

body[data-theme="dark"] .edit-textarea {
    background: #141414;
    border-color: #2f2f2f;
    color: #edf0f3;
}

body[data-theme="dark"] .edit-textarea:focus {
    border-color: #4a4a4a;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

/* 저장의 파랑은 styles.css 가 var(--color-primary) 로 두고 theme.dark.css 가
   다크 값(#3a6fae)으로 갈아 끼우므로 여기서 색을 다시 적지 않는다.
   비활성·취소의 회색만 다크 값으로 준다. */
/* theme.dark.css 의 두 광범위 규칙을 여기서 되돌린다.
   - `body[data-theme="dark"] button { color: … }` (0,1,2) 가 흰 글자(0,1,0)를 이긴다
   - `body[data-theme="dark"] * { border-color: var(--dark-border) }` (0,1,1) 이
     `border: 1px solid transparent` 의 색을 #2a2a2a 로 덮어 취소에 테두리가 생긴다 */
body[data-theme="dark"] .edit-save-btn,
body[data-theme="dark"] .insert-save-btn {
    color: #fff;
    border-color: transparent;
    /* 어두운 배경에서는 위쪽 하이라이트를 줄이고 그림자를 깊게 — 맥과 같은 처리 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 1.5px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] .edit-cancel-btn,
body[data-theme="dark"] .insert-cancel-btn {
    border-color: transparent;
}

body[data-theme="dark"] .edit-save-btn:disabled {
    background-color: #2a2a2a;
    color: #6a6a6a;
    box-shadow: none;
}

body[data-theme="dark"] .edit-cancel-btn {
    color: #aeb6c1;
}

body[data-theme="dark"] .edit-cancel-btn:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #edf0f3;
}

/* ===== 새 문장 삽입 폼(모달) — 다크 ===== */
body[data-theme="dark"] .insert-form-overlay {
    background-color: rgba(0, 0, 0, 0.66);
}

body[data-theme="dark"] .insert-form {
    background-color: #212121;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

body[data-theme="dark"] .insert-form h3 {
    color: #edf0f3;
}

body[data-theme="dark"] .insert-form .form-group label {
    color: #aeb6c1;
}

body[data-theme="dark"] .insert-form .form-group textarea {
    background: #141414;
    border-color: #2f2f2f;
    color: #edf0f3;
}

body[data-theme="dark"] .insert-form .form-group textarea:focus {
    border-color: #4a4a4a;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .insert-save-btn:disabled {
    background-color: #2a2a2a;
    color: #6a6a6a;
    box-shadow: none;
}

body[data-theme="dark"] .insert-cancel-btn {
    color: #aeb6c1;
}

body[data-theme="dark"] .insert-cancel-btn:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #edf0f3;
}

/* ===== 저장·삭제 알림 토스트 — 다크 =====
   토스트는 `--ws-*`(워크스페이스 표준)를 먼저 읽는데, 그 토큰은 대시보드
   계열 페이지에만 정의돼 있다. 고전 상세에는 없어서 그림자가 라이트용
   폴백으로 떨어진다(실측 rgba(42,60,92,0.1)). 표면·글자·글리프는
   `--color-*` 폴백이 theme.dark.css 에 있어 제대로 오고, 어긋나는 것은
   그림자 하나뿐이라 여기서만 끈다 — 업데이트 카드(toast.css)와 같은 처리다. */
body[data-theme="dark"] .toast-notification {
    box-shadow: none;
}