/* =================================================================
 * Morning Insight — 공용 스타일시트
 * base.html 인라인 <style> 에서 추출 (Phase A 리팩토링)
 * 수정 후에는 브라우저 강력 새로고침(Cmd+Shift+R) 필요.
 * ================================================================= */

/* ── Global density: 13" 노트북 최적화 (rem 기반 토큰 6.25% 축소) ── */
html { font-size: 15px; }

/* ── Design tokens ────────────────────────────────────────────── */
:root {
    /* Brand */
    --color-primary: #1a56db;
    --color-primary-hover: #1648c8;

    /* Surface */
    --color-surface: #f8f9fb;
    --color-on-surface: #111827;
    --color-on-surface-variant: #6b7280;
    --color-surface-lowest: #ffffff;
    --color-surface-low: #f3f4f6;
    --color-surface-high: #e5e7eb;
    --color-outline-variant: #d1d5db;

    /* Status */
    --color-success: #16a34a;
    --color-success-bg: #f0fdf4;
    --color-warn: #f59e0b;
    --color-danger: #ef4444;
    --color-error: #dc2626;
    --color-error-bg: #fef2f2;

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Motion */
    --ease-standard: 0.15s ease;
}

.dark {
    --color-surface-low: #1f2937;
    --color-surface-high: #374151;
    --color-on-surface: #f9fafb;
    --color-on-surface-variant: #9ca3af;
}

/* ── Responsive Typography ────────────────────────────────────── */
/* 375px → 13px, 768px → 15px, 1280px → 16px */
html { font-size: clamp(13px, 12px + 0.25vw, 16px); }

body { font-family: 'Spoqa Han Sans Neo', 'Inter', sans-serif; }
h1, h2, h3 { font-family: 'Spoqa Han Sans Neo', 'Manrope', sans-serif; }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Skeleton loader ──────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--color-outline-variant); border-radius: 2px; }

/* ── Chat panel ───────────────────────────────────────────────── */
#chat-panel            { transition: transform 0.3s ease; }
#chat-panel.open       { transform: translateX(0); }
.typing-cursor::after  { content: '▋'; animation: blink 1s infinite; }
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
 * DESIGN SYSTEM COMPONENTS
 * ══════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 14px;
    font-size: 12px; font-weight: 500; line-height: 1;
    border-radius: var(--radius-md); border: none; cursor: pointer;
    white-space: nowrap;
    transition: background var(--ease-standard), color var(--ease-standard), border-color var(--ease-standard);
}
.btn-primary        { background: var(--color-primary); color: #fff; }
.btn-primary:hover  { background: var(--color-primary-hover); }
.btn-ghost {
    background: transparent; color: var(--color-on-surface-variant);
    border: 1px solid rgba(209,213,219,0.9);
}
.btn-ghost:hover         { background: #f9fafb; color: var(--color-on-surface); }
.dark .btn-ghost         { color: #9ca3af; border-color: rgba(75,85,99,0.7); }
.dark .btn-ghost:hover   { background: #1f2937; color: #f9fafb; }

.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    background: transparent; color: var(--color-on-surface-variant);
    border: 1px solid rgba(209,213,219,0.9);
    border-radius: var(--radius-md); cursor: pointer;
    transition: background var(--ease-standard), color var(--ease-standard);
}
.btn-icon:hover          { background: #f9fafb; color: var(--color-on-surface); }
.dark .btn-icon          { color: #9ca3af; border-color: rgba(75,85,99,0.7); }
.dark .btn-icon:hover    { background: #1f2937; color: #f9fafb; }

.btn-full { width: 100%; justify-content: center; height: 36px; font-weight: 600; font-size: 12px; }

/* ── Tab group ────────────────────────────────────────────────── */
.tab-group {
    display: inline-flex; align-items: center; gap: 3px;
    background: #f3f4f6; border-radius: var(--radius-md); padding: 3px;
}
.dark .tab-group { background: #1f2937; }
.tab-item {
    font-size: 12px; font-weight: 500; padding: 5px 12px;
    border-radius: var(--radius-sm); color: var(--color-on-surface-variant);
    border: none; background: transparent; cursor: pointer;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.dark .tab-item { color: #9ca3af; }
.tab-item.active {
    background: #fff; color: #111827;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
    font-weight: 600;
}
.dark .tab-item.active { background: #374151; color: #f9fafb; }

/* ── Progress bar ─────────────────────────────────────────────── */
.prog-bar  { height: 5px; border-radius: 3px; background: #f3f4f6; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.prog-blue   { background: var(--color-primary); }
.prog-green  { background: #22c55e; }
.prog-amber  { background: var(--color-warn); }
.prog-red    { background: var(--color-danger); }
.wl-normal   { background: var(--color-primary); }
.wl-warn     { background: var(--color-warn); }
.wl-danger   { background: var(--color-danger); }

/* ── Trend chips ──────────────────────────────────────────────── */
.trend-up   { color: var(--color-success); background: var(--color-success-bg); }
.trend-down { color: var(--color-error);   background: var(--color-error-bg); }
.trend-flat { color: var(--color-on-surface-variant); background: #f9fafb; }

/* ── Metric cell ──────────────────────────────────────────────── */
.metric-cell {
    background: #f9fafb; border-radius: var(--radius-md); padding: 12px;
}
.dark .metric-cell { background: #1f2937; }
.metric-cell .metric-label { font-size: 10px; color: var(--color-on-surface-variant); margin-bottom: 2px; }
.metric-cell .metric-value { font-size: 14px; font-weight: 700; color: #111827; }
.dark .metric-cell .metric-value { color: #f9fafb; }

/* ── Section card header ──────────────────────────────────────── */
.card-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px;
}
.card-header h2 { font-size: 14px; font-weight: 700; margin: 0; }
.card-icon      { font-size: 20px; color: var(--color-on-surface-variant); }