/* ═══════════════════════════════════════════════════════════════
   위키너와나 테마 — 지브리풍 파스텔 (10-B-2 색상 토큰 + 10-D)
   이 파일은 base.html에서 마지막에 로드되어 기존 CSS의 색을 덮어쓴다.
   색 변경은 아래 :root 토큰만 수정하면 된다.
   대비 기준: 본문/버튼 텍스트 WCAG AA(4.5:1) 이상 유지.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* 배경/표면 */
    --color-bg: #F7F3E8;            /* 따뜻한 크림 — 페이지 배경 */
    --color-surface: #FFFDF7;       /* 카드/패널 */
    --color-surface-muted: #F1EBDC; /* 살짝 가라앉은 표면 (필터 바, 코드 인라인 등) */
    --color-border: #E4DAC2;        /* 구분선/테두리 */

    /* 브랜드 */
    --color-primary: #5C7F52;         /* 이끼 초록 — 주 버튼(흰 글자 AA 충족) */
    --color-primary-strong: #4A6842;  /* hover/active */
    --color-primary-soft: #DCE8D4;    /* 연한 초록 배경 (칩, 강조 배경) */
    --color-secondary: #5B7E93;       /* 가라앉은 물빛 — 보조 버튼 */
    --color-secondary-soft: #DAE6EC;
    --color-accent: #C98F4E;          /* 노을 살구 — 포인트 */
    --color-accent-soft: #F2E3CB;

    /* 텍스트 */
    --color-text: #453F35;         /* 따뜻한 흙갈색 (크림 배경 대비 ~9:1) */
    --color-text-muted: #6E6657;   /* 보조 텍스트 (~4.6:1) */
    --color-text-invert: #FFFDF7;

    /* 상태 */
    --color-positive: #4F7C4C;     /* 도움됨 (저채도 초록) */
    --color-negative: #A85A4D;     /* 도움안됨 (저채도 벽돌) */

    /* 헤더/히어로 그라데이션 — 하늘에서 초원으로 */
    --gradient-header: linear-gradient(135deg, #BCD4E0 0%, #C8DDBB 100%);
    --gradient-footer: #4A5544;    /* 짙은 숲 */

    /* 그림자 — 회색 대신 따뜻한 색조 */
    --shadow-soft: 0 2px 10px rgba(122, 105, 80, 0.10);
    --shadow-raised: 0 6px 18px rgba(122, 105, 80, 0.14);
}

/* ── 전역 ─────────────────────────────────────────── */
body {
    background: var(--color-bg);
    color: var(--color-text);
}

.content {
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    border-radius: 14px;
}

/* ── 헤더: 밝은 파스텔 + 어두운 텍스트 ─────────────── */
.header {
    background: var(--gradient-header);
    border-bottom: 1px solid rgba(122, 105, 80, 0.15);
    box-shadow: var(--shadow-soft);
}

.header .logo-text,
.header .nav-link,
.header .nav-link span {
    color: #3A4434;
}

.header .nav-link:hover {
    background: rgba(255, 253, 247, 0.5);
    color: #2C3527;
}

.header .nav-highlight {
    background: var(--color-surface);
    color: var(--color-primary-strong);
    border: 1px solid rgba(122, 105, 80, 0.2);
}

.header .search-input {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid rgba(122, 105, 80, 0.25);
}

.header .search-input::placeholder {
    color: var(--color-text-muted);
}

.header .search-btn {
    background: var(--color-primary);
    color: var(--color-text-invert);
    border: none;
}

.header .search-btn:hover {
    background: var(--color-primary-strong);
}

/* ── 히어로 ───────────────────────────────────────── */
.hero-section {
    background: var(--gradient-header);
    color: #3A4434;
}

.hero-section .hero-title,
.hero-section .hero-subtitle,
.hero-section h1,
.hero-section p {
    color: #3A4434;
}

.hero-actions .btn-primary {
    background: var(--color-primary);
    color: var(--color-text-invert);
    border: 2px solid var(--color-primary);
}

.hero-actions .btn-primary:hover {
    background: var(--color-primary-strong);
    color: var(--color-text-invert);
    border-color: var(--color-primary-strong);
}

.hero-actions .btn-secondary {
    background: rgba(255, 253, 247, 0.6);
    color: #3A4434;
    border: 2px solid rgba(58, 68, 52, 0.35);
}

.hero-actions .btn-secondary:hover {
    background: var(--color-surface);
    color: var(--color-primary-strong);
}

/* ── 사이드바/카드 ────────────────────────────────── */
.sidebar,
.sidebar-section,
.document-card,
.category-card,
.document-item,
.document-filters {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.sidebar {
    box-shadow: var(--shadow-soft);
}

.document-card,
.category-card {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.document-card:hover,
.category-card:hover {
    box-shadow: var(--shadow-raised);
}

.popular-documents .document-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

/* ── 버튼 토큰 통일 ───────────────────────────────── */
.btn-primary,
.document-actions .btn-primary,
.document-list-page .btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-invert) !important;
    box-shadow: 0 2px 6px rgba(92, 127, 82, 0.3);
}

.btn-primary:hover,
.document-actions .btn-primary:hover,
.document-list-page .btn-primary:hover {
    background: var(--color-primary-strong) !important;
    border-color: var(--color-primary-strong) !important;
    box-shadow: 0 4px 10px rgba(92, 127, 82, 0.35);
}

.btn-secondary,
.document-actions .btn-secondary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-invert);
}

.btn-secondary:hover,
.document-actions .btn-secondary:hover {
    background: #4C6C80;
    border-color: #4C6C80;
}

.btn-success {
    background: var(--color-positive) !important;
    background-color: var(--color-positive) !important;
    border-color: var(--color-positive) !important;
    color: var(--color-text-invert) !important;
}

.btn-success:hover {
    background: #426841 !important;
    background-color: #426841 !important;
}

.btn-danger {
    background: var(--color-negative) !important;
    background-color: var(--color-negative) !important;
    border-color: var(--color-negative) !important;
    color: var(--color-text-invert) !important;
}

.btn-danger:hover {
    background: #8F4B40 !important;
    background-color: #8F4B40 !important;
}

/* ── 링크/카테고리 ────────────────────────────────── */
.category-link {
    color: var(--color-primary-strong);
}

.category-link:hover {
    background-color: var(--color-primary);
    color: var(--color-text-invert);
}

.document-content a:not(.btn),
.document-body a:not(.btn) {
    color: #4E6E86;
}

/* ── 목록/필터 ────────────────────────────────────── */
.filter-select {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.stat-text {
    color: var(--color-text-muted);
}

/* ── 태그 칩: 파랑 → 연초록 ───────────────────────── */
.tag,
.keyword-link {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary-strong) !important;
    border: 1px solid #C7D9BB !important;
}

.tag:hover,
.keyword-link:hover {
    background: var(--color-primary) !important;
    color: var(--color-text-invert) !important;
}

/* ── 푸터 ─────────────────────────────────────────── */
.footer {
    background: var(--gradient-footer);
    color: #EFEAD9;
}

/* ── 문서 본문 디테일 ─────────────────────────────── */
.think-content {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
}

.think-toggle-btn {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.think-toggle-btn:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.ai-feedback {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

/* 인용/구분선 등 잿빛 요소를 크림 톤으로 */
hr {
    border-color: var(--color-border);
}

blockquote {
    border-left-color: var(--color-primary-soft);
    background: var(--color-surface-muted);
}

/* ── 우측 사이드바 섹션 헤더: 보라 그라데이션 → 파스텔 ── */
.sidebar-right .sidebar-section h3 {
    background: var(--gradient-header);
    color: #3A4434;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-right,
.sidebar-right .recent-viewed {
    background: var(--color-surface);
    border-color: var(--color-border);
}

/* 문서 카드의 좌측 강조선/브레드크럼 링크 톤 정리 */
.document-card {
    border-left: 3px solid var(--color-primary-soft);
}

.section-link,
.view-all-link {
    color: var(--color-primary-strong);
}

/* ── 문서 상세: 태그 칩(보라 → 초록), 표 헤더(파랑 → 이끼) ── */
.modern-tag {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    border: 1px solid #C7D9BB;
}

.modern-tag:hover {
    background: var(--color-primary);
    color: var(--color-text-invert);
    box-shadow: 0 2px 8px rgba(92, 127, 82, 0.3);
}

.document-body thead {
    background: var(--color-primary);
    color: var(--color-text-invert);
}

.document-body tbody tr:hover {
    background-color: var(--color-surface-muted);
}

.popular-documents .document-tags .tag {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.math-container {
    background: var(--color-surface-muted);
    border-left-color: var(--color-primary);
}

.ai-badge {
    background: var(--color-secondary);
    color: var(--color-text-invert);
}

/* ── 스트림 에디터: 잔여 원색 버튼 토큰화 ── */
.btn-auto-classify {
    background: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-text-invert) !important;
}

.btn-auto-classify:hover {
    background: #4C6C80 !important;
}

.tab-button.active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-invert) !important;
}

.btn-info {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}