/* ======================================================
   공통 디자인 베이스 — dashboard.html / strategy.html 공유
   (브랜드 토큰·폰트·중성색 보정·기본 컴포넌트 스타일)
   ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

:root{
  --bg:#fbf9f4; --card:#ffffff; --line:#ece7dc; --line-soft:#f0ece2;
  --muted:#8a8578; --olive:#556b2f; --olive-deep:#435b22; --amber:#c08a3e;
  --shadow:0 1px 2px rgba(67,55,30,.05), 0 14px 30px -22px rgba(67,55,30,.34);
}
body { font-family: 'Noto Sans KR', sans-serif; background-color: var(--bg); color: #2b2a25; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: 'Fraunces', 'Noto Sans KR', serif; letter-spacing: -0.01em; }

.bg-accent { background-color: var(--olive); }
.text-accent { color: var(--olive-deep); }
.bg-accent-light { background-color: var(--olive-tint, #f1f3ee); }

/* ---- 따뜻한 에디토리얼 톤으로 기본 중성색 보정(전 화면 통일) ---- */
.shadow-sm{ box-shadow: var(--shadow) !important; }
.bg-slate-50{ background-color:#f6f3ec !important; }
.border-gray-100,.border-slate-100{ border-color:#efeae0 !important; }
.border-gray-200,.border-slate-200{ border-color:#e6e0d4 !important; }
.divide-slate-100 > :not([hidden]) ~ :not([hidden]){ border-color:#efeae0 !important; }
.text-slate-400{ color:#64748b !important; }
/* 학습센터의 작은 갈색 섹션 라벨은 밝은 본문 배경에서도 WCAG AA 대비를 유지한다. */
main .text-\[\#9a6b22\]{ color:#8f601d !important; }
/* emerald 계열을 브랜드 올리브로 통일 */
.bg-emerald-50,.bg-emerald-50\/70,.bg-emerald-50\/60,.bg-emerald-50\/40{ background-color:#eef1e7 !important; }
.border-emerald-100,.border-emerald-200{ border-color:#dde4d0 !important; }
.text-emerald-600{ color:#5a7030 !important; }
.text-emerald-700,.text-emerald-800{ color:#4a5d28 !important; }
.text-emerald-950{ color:#33421c !important; }
.text-emerald-300{ color:#cdd9b4 !important; }
.bg-emerald-100{ background-color:#dfe6cf !important; }
.hover\:bg-emerald-900:hover{ background-color:#3a4a20 !important; }
.hover\:text-emerald-800:hover{ color:#435b22 !important; }
.accent-emerald-600{ accent-color:#556b2f !important; }
.focus\:ring-emerald-500:focus{ --tw-ring-color:#7d9450 !important; }

/* ---- 브랜드 헤더 / 모노그램 ---- */
.ll-mark{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    border-radius:10px; background:linear-gradient(135deg,#5d7333,#3f5122); color:#fbf9f4;
    font-family:'Fraunces',serif; font-weight:600; font-size:14px; letter-spacing:.5px; box-shadow:0 4px 10px -4px rgba(63,81,34,.5); }
.ll-header{ background:linear-gradient(135deg,#52662c 0%,#3c4d20 52%,#29351a 100%); background-color:#3c4d20; }
.ll-glass{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }
nav .inline-flex > a{ white-space:nowrap; }

/* ---- 셀렉트 박스: 커스텀 셰브론 + 여백 ---- */
select{ -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23556b2f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
    padding-right:36px !important; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
select:hover{ border-color:#c2b9a6; }

/* ---- 버튼 프레스 인터랙션 ---- */
button{ transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease; }
button:active{ transform: scale(.97); }
@media (prefers-reduced-motion: reduce){ button:active{ transform:none; } }

.chart-container { position: relative; width: 100%; height: 300px; }
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { transform: translateY(10px); } to { transform: translateY(0); } }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1ece2; }
::-webkit-scrollbar-thumb { background: #c8bfae; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a99f8c; }
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* 가이드 용어사전 카테고리 칩 */
.glossary-cat{ background:#fff; color:#64748b; transition:background .15s, color .15s; }
.glossary-cat:hover{ background:#f8fafc; }
.glossary-cat.active{ background:#435b22; color:#fff; border-color:#435b22; }