/* ═══════════════════════════════════════════════════════════════
   PF Manager · Design System v4.0 "Clinical Calm"
   ───────────────────────────────────────────────────────────────
   인류 최고 수준 헬스케어 SaaS 디자인
   - 영감: Linear · Notion · Apple Health · Epic
   - 철학: 의료의 신뢰 + Z세대 감각 + 환자를 팬으로
   - 레이어: 이 파일은 style.css 뒤에 로드되어 우선 적용됨
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Pretendard Variable 폰트 로드 (한글 완벽 렌더링) ─── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ═══════════════════════════════════════════════════════════════
   2. 디자인 토큰 · OKLCH 기반 컬러 시스템
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ─── Brand · Clinical Teal (신뢰 + 청결) ─── */
  --brand-50:  #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-200: #99f6e4;
  --brand-300: #5eead4;
  --brand-400: #2dd4bf;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-800: #115e59;
  --brand-900: #134e4a;
  --brand-950: #042f2e;

  /* ─── Neutral · Stone + Slate 혼합 ─── */
  --neutral-0:   #ffffff;
  --neutral-25:  #fcfcfd;
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-150: #e9eef4;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #020617;

  /* ─── Semantic ─── */
  --success-50:  #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;

  --warn-50:  #fffbeb;
  --warn-100: #fef3c7;
  --warn-500: #f59e0b;
  --warn-600: #d97706;
  --warn-700: #b45309;

  --danger-50:  #fef2f2;
  --danger-100: #fee2e2;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;

  --info-50:  #eff6ff;
  --info-100: #dbeafe;
  --info-500: #3b82f6;
  --info-600: #2563eb;

  /* ─── Surface (Layered) ─── */
  --surface-page:   var(--neutral-50);
  --surface-card:   var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-overlay: rgba(15, 23, 42, 0.64);

  /* ─── Sidebar (다크 유리) ─── */
  --sidebar-bg:        #0b1220;
  --sidebar-surface:   rgba(255, 255, 255, 0.04);
  --sidebar-hover:     rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: linear-gradient(135deg, rgba(20,184,166,0.18), rgba(20,184,166,0.08));
  --sidebar-border:    rgba(255, 255, 255, 0.06);
  --sidebar-text:      #e2e8f0;
  --sidebar-text-dim:  #94a3b8;
  --sidebar-text-active: #5eead4;

  /* ─── Text ─── */
  --text-strong:  #0b1220;
  --text-primary: #1e293b;
  --text-body:    #334155;
  --text-muted:   #64748b;
  --text-subtle:  #94a3b8;
  --text-inverse: #ffffff;

  /* ─── Border ─── */
  --border-subtle: #eef2f7;
  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-brand: #14b8a6;
  --border-focus: #14b8a6;

  /* ─── Layered Shadows (소프트→또렷) ─── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.12);
  --shadow-brand: 0 8px 24px rgba(20, 184, 166, 0.28);
  --shadow-brand-lg: 0 16px 40px rgba(15, 118, 110, 0.35);

  /* ─── Radius ─── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* ─── Spacing (8pt grid) ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Typography Scale ─── */
  --font-display: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  48px;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0em;

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ─── Layout ─── */
  --sidebar-width: 260px;
  --topbar-height: 64px;

  /* 기존 코드 호환용 alias */
  --primary: var(--brand-700);
  --primary-light: var(--brand-500);
  --primary-dark: var(--brand-800);
  --primary-bg: var(--brand-50);
  --bg: var(--surface-page);
  --bg-card: var(--surface-card);
  --bg-sidebar: var(--sidebar-bg);
  --bg-sidebar-hover: var(--sidebar-hover);
  --bg-sidebar-active: rgba(20, 184, 166, 0.15);
  --text: var(--text-primary);
  --text-secondary: var(--text-muted);
  --text-muted: var(--text-subtle);
  --text-sidebar: var(--sidebar-text);
  --text-sidebar-active: var(--sidebar-text-active);
  --border: var(--border-default);
  --border-light: var(--border-subtle);
  --shadow: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --success: var(--success-500);
  --warning: var(--warn-500);
  --danger: var(--danger-500);
  --info: var(--info-500);
}

/* ═══════════════════════════════════════════════════════════════
   3. Dark Mode (prefers-color-scheme + .dark 클래스)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page:   #0a0f1a;
    --surface-card:   #0f172a;
    --surface-raised: #1a2337;
    --surface-sunken: #060a14;

    --text-strong:  #f8fafc;
    --text-primary: #e2e8f0;
    --text-body:    #cbd5e1;
    --text-muted:   #94a3b8;
    --text-subtle:  #64748b;

    --border-subtle: #1a2337;
    --border-default: #1e293b;
    --border-strong: #334155;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.45), 0 16px 32px rgba(0, 0, 0, 0.4);

    --primary-bg: rgba(20, 184, 166, 0.1);
  }
}

[data-theme="dark"] {
  --surface-page:   #0a0f1a;
  --surface-card:   #0f172a;
  --surface-raised: #1a2337;
  --surface-sunken: #060a14;

  --text-strong:  #f8fafc;
  --text-primary: #e2e8f0;
  --text-body:    #cbd5e1;
  --text-muted:   #94a3b8;
  --text-subtle:  #64748b;

  --border-subtle: #1a2337;
  --border-default: #1e293b;
  --border-strong: #334155;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.45), 0 16px 32px rgba(0, 0, 0, 0.4);

  --primary-bg: rgba(20, 184, 166, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   4. 글로벌 타이포그래피 + 페이지 베이스
   ═══════════════════════════════════════════════════════════════ */
html, body {
  font-family: var(--font-body) !important;
  font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv02', 'tnum';
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.003em;
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  font-weight: 700;
}

/* 숫자는 항상 tabular (대시보드 정렬) */
.num, .stat-card-value, .insight-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ─── Scrollbar 세련화 ─── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ─── Selection ─── */
::selection {
  background: var(--brand-200);
  color: var(--brand-900);
}

/* ─── Focus Ring (접근성) ─── */
*:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════
   5. 사이드바 · 다크 유리 질감
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  background:
    radial-gradient(circle at 20% 0%, rgba(20, 184, 166, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
    var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.02);
}

.sidebar-header {
  border-bottom: 1px solid var(--sidebar-border) !important;
  padding: 18px 18px 16px !important;
}

.sidebar-logo {
  background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%) !important;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  border-radius: var(--radius-md) !important;
}

.sidebar-title h2 {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-size: 15px !important;
}

.sidebar-title small {
  color: var(--sidebar-text-dim) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
}

.sidebar-nav {
  padding: var(--space-3) var(--space-2) !important;
}

.sidebar-item, .nav-item {
  color: var(--sidebar-text) !important;
  padding: 9px 12px !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 2px !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
  position: relative;
}

.sidebar-item:hover, .nav-item:hover {
  background: var(--sidebar-hover) !important;
  color: #ffffff !important;
  transform: translateX(2px);
}

.sidebar-item.active, .nav-item.active {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-text-active) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.15);
}

.sidebar-item.active::before, .nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--brand-400);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px var(--brand-500);
}

.sidebar-group-title {
  color: var(--sidebar-text-dim) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 16px 14px 6px !important;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════
   6. 상단바 (Topbar / Header)
   ═══════════════════════════════════════════════════════════════ */
.main-header, .topbar, .page-header {
  background: var(--surface-card) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.page-title, .main-header h1 {
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--text-strong) !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. 카드 시스템
   ═══════════════════════════════════════════════════════════════ */
.card, .stat-card, .kpi-card, .dashboard-card, .quick-link-card, .insight-card-item {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--duration-base) var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}

.card:hover, .stat-card:hover, .kpi-card:hover, .dashboard-card:hover, .quick-link-card:hover {
  border-color: var(--border-default) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

/* Stat card 고도화 */
.stat-card {
  padding: var(--space-5) !important;
  display: flex !important;
  gap: var(--space-4) !important;
  align-items: center !important;
}

.stat-card-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  position: relative;
}

.stat-card-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
  pointer-events: none;
}

.stat-card-label {
  font-size: var(--text-sm) !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}

.stat-card-value {
  font-size: var(--text-3xl) !important;
  font-weight: 800 !important;
  color: var(--text-strong) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
}

.stat-card-sub {
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   8. 버튼 시스템
   ═══════════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
  border-radius: var(--radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: relative;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%) !important;
  color: var(--text-inverse) !important;
  border: 1px solid transparent !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 1px 2px rgba(15, 118, 110, 0.24),
    0 2px 8px rgba(15, 118, 110, 0.18) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-800) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 4px 12px rgba(15, 118, 110, 0.35),
    0 8px 20px rgba(15, 118, 110, 0.25) !important;
  transform: translateY(-1px);
}

.btn-secondary, .btn-outline {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn-secondary:hover, .btn-outline:hover {
  background: var(--neutral-50) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--text-body) !important;
  border: 1px solid transparent !important;
}

.btn-ghost:hover {
  background: var(--neutral-100) !important;
  color: var(--text-strong) !important;
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger-500) 0%, var(--danger-600) 100%) !important;
  color: var(--text-inverse) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.24) !important;
}

.btn-danger:hover {
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
  transform: translateY(-1px);
}

.btn-sm { font-size: var(--text-sm) !important; padding: 6px 12px !important; }
.btn-md { font-size: var(--text-base) !important; padding: 8px 14px !important; }
.btn-lg { font-size: var(--text-md) !important; padding: 11px 20px !important; }

/* ═══════════════════════════════════════════════════════════════
   9. 입력 필드
   ═══════════════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"],
input[type="search"], input[type="url"], textarea, select {
  font-family: var(--font-body) !important;
  font-size: var(--text-md) !important;
  color: var(--text-primary) !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: 9px 12px !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
  letter-spacing: -0.005em;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-subtle);
}

/* ═══════════════════════════════════════════════════════════════
   10. 뱃지 · 필 · 태그
   ═══════════════════════════════════════════════════════════════ */
.badge, .pill, .tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-full) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.5 !important;
  white-space: nowrap;
}

.badge-brand, .pill-brand { background: var(--brand-50); color: var(--brand-700); }
.badge-success, .pill-success { background: var(--success-50); color: var(--success-700); }
.badge-warn, .pill-warn { background: var(--warn-50); color: var(--warn-700); }
.badge-danger, .pill-danger { background: var(--danger-50); color: var(--danger-700); }
.badge-info, .pill-info { background: var(--info-50); color: var(--info-600); }
.badge-neutral, .pill-neutral { background: var(--neutral-100); color: var(--neutral-700); }

/* ═══════════════════════════════════════════════════════════════
   11. 대시보드 · 인사이트 카드 (gradient mesh)
   ═══════════════════════════════════════════════════════════════ */
.insight-hero {
  background:
    radial-gradient(circle at 20% 20%, rgba(20,184,166,0.14) 0%, transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(99,102,241,0.10) 0%, transparent 50%),
    linear-gradient(135deg, var(--brand-900) 0%, var(--brand-800) 100%);
  color: var(--text-inverse);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.insight-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(20,184,166,0.3) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}

.insight-hero-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-bottom: var(--space-2);
}

.insight-hero-value {
  font-size: var(--text-5xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #ccfbf1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.insight-hero-caption {
  font-size: var(--text-md);
  opacity: 0.85;
  margin-top: var(--space-2);
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════
   12. 모달 개선
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  background: var(--surface-overlay) !important;
  backdrop-filter: blur(8px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
}

.modal {
  border-radius: var(--radius-xl) !important;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.05),
    0 25px 60px rgba(15, 23, 42, 0.25) !important;
  border: none !important;
  animation: modalEnter 0.28s var(--ease-spring) both !important;
}

@keyframes modalEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  padding: var(--space-6) var(--space-6) var(--space-4) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.modal-header h2, .modal-header h3 {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--text-strong) !important;
}

.modal-body {
  padding: var(--space-5) var(--space-6) !important;
}

.modal-footer {
  padding: var(--space-4) var(--space-6) !important;
  border-top: 1px solid var(--border-subtle) !important;
  background: var(--neutral-50) !important;
}

/* ═══════════════════════════════════════════════════════════════
   13. 토스트 (상단 띄우는 알림)
   ═══════════════════════════════════════════════════════════════ */
.toast {
  background: var(--neutral-900) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 18px !important;
  font-size: var(--text-md) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════════════════════════════
   14. 피드백 노트 전용 UI 고도화
   ═══════════════════════════════════════════════════════════════ */
.fb-container {
  padding: var(--space-4) 0;
}

.fb-tabs {
  border-bottom: 1px solid var(--border-subtle) !important;
  gap: 2px !important;
}

.fb-tab {
  position: relative;
  color: var(--text-muted) !important;
  font-size: var(--text-md) !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
}

.fb-tab:hover { color: var(--text-primary) !important; }

.fb-tab.active {
  color: var(--brand-700) !important;
  border-bottom-color: var(--brand-600) !important;
  font-weight: 700 !important;
}

.fb-tab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 40%;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  border-radius: 3px 3px 0 0;
  transform: translateX(-50%);
  box-shadow: 0 -2px 8px rgba(20, 184, 166, 0.4);
}

/* 피드백 노트 카드 */
.fb-note-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-3);
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
  cursor: pointer;
}

.fb-note-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.fb-note-card.unread {
  background: linear-gradient(135deg, var(--danger-50) 0%, var(--surface-card) 30%);
  border-color: var(--danger-100);
  border-left: 3px solid var(--danger-500);
}

.fb-note-card.severe { border-left: 3px solid var(--danger-500); }
.fb-note-card.moderate { border-left: 3px solid var(--warn-500); }
.fb-note-card.mild { border-left: 3px solid var(--success-500); }

.fb-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger-500);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.08); }
}

/* 피드백 대화 쓰레드 */
.fb-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--neutral-50);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}

.fb-reply-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  position: relative;
  box-shadow: var(--shadow-xs);
  animation: bubbleIn 0.24s var(--ease-spring) both;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.fb-reply-bubble.author {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-800));
  color: var(--text-inverse);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.fb-reply-bubble.target {
  background: var(--surface-card);
  color: var(--text-primary);
  align-self: flex-end;
  border: 1px solid var(--border-subtle);
  border-bottom-right-radius: 4px;
}

.fb-reply-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}

.fb-reply-bubble.author .fb-reply-meta {
  color: rgba(255,255,255,0.7);
}

/* 심각도 / 카테고리 배지 */
.fb-severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  letter-spacing: -0.005em;
}

.fb-severity-badge.severe { background: var(--danger-100); color: var(--danger-700); }
.fb-severity-badge.moderate { background: var(--warn-100); color: var(--warn-700); }
.fb-severity-badge.mild { background: var(--success-100); color: var(--success-700); }

/* ═══════════════════════════════════════════════════════════════
   15. Empty State
   ═══════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.4;
  filter: grayscale(0.3);
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-text {
  font-size: var(--text-md);
  color: var(--text-muted);
  max-width: 360px;
  margin: 0 auto var(--space-5);
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════
   16. 테마 토글 버튼
   ═══════════════════════════════════════════════════════════════ */
.theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-body);
  transition: all var(--duration-fast) var(--ease-out);
  font-size: 18px;
}

.theme-toggle:hover {
  background: var(--neutral-100);
  color: var(--brand-700);
  transform: scale(1.05);
}

.theme-toggle:active { transform: scale(0.95); }

/* ═══════════════════════════════════════════════════════════════
   17. Skeleton Loader (로딩 중 자리 표시)
   ═══════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg,
    var(--neutral-100) 0%,
    var(--neutral-150) 50%,
    var(--neutral-100) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════
   18. Micro-interactions · 호버 시 아이콘 살짝 움직임
   ═══════════════════════════════════════════════════════════════ */
.quick-link-card {
  padding: var(--space-5) !important;
  cursor: pointer;
}

.quick-link-card:hover .quick-link-icon,
.quick-link-card:hover [class*="icon"] {
  transform: translateX(2px) scale(1.05);
  transition: transform var(--duration-base) var(--ease-spring);
}

/* ═══════════════════════════════════════════════════════════════
   19. 인쇄 최적화
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .sidebar, .main-header, .btn, .fb-tabs { display: none !important; }
  body { background: white !important; }
  .card { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   20. Reduced Motion (접근성)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   21. Utility Classes (Tailwind-like)
   ═══════════════════════════════════════════════════════════════ */
.text-strong { color: var(--text-strong); }
.text-muted { color: var(--text-muted) !important; }
.text-subtle { color: var(--text-subtle); }
.text-brand { color: var(--brand-700); }
.text-success { color: var(--success-700); }
.text-danger { color: var(--danger-700); }
.text-warn { color: var(--warn-700); }

.bg-surface { background: var(--surface-card); }
.bg-sunken { background: var(--surface-sunken); }
.bg-brand-soft { background: var(--brand-50); }

.border-subtle { border: 1px solid var(--border-subtle); }
.border-default { border: 1px solid var(--border-default); }

.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ═══════════════════════════════════════════════════════════════
   22. 다크모드 override · 카드·인풋
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .quick-link-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .fb-note-card,
[data-theme="dark"] .insight-card-item {
  background: var(--surface-card) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-outline:hover {
  background: var(--surface-sunken) !important;
}

[data-theme="dark"] .main-header,
[data-theme="dark"] .topbar,
[data-theme="dark"] .page-header {
  background: var(--surface-card) !important;
  border-bottom-color: var(--border-default) !important;
}

[data-theme="dark"] .fb-thread { background: var(--surface-sunken); }
[data-theme="dark"] .fb-reply-bubble.target {
  background: var(--surface-raised);
  border-color: var(--border-default);
}

[data-theme="dark"] .modal {
  background: var(--surface-card) !important;
}

[data-theme="dark"] .modal-footer {
  background: var(--surface-sunken) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}

/* ═══════════════════════════════════════════════════════════════
   23. 로그인 화면 프리미엄 업그레이드
   ═══════════════════════════════════════════════════════════════ */
.auth-screen {
  background:
    radial-gradient(circle at 15% 15%, rgba(20, 184, 166, 0.2) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(99, 102, 241, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(15, 118, 110, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #042f2e 0%, #134e4a 50%, #0b1220 100%) !important;
}

.auth-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

.auth-card {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-2xl) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 20px 60px rgba(4, 47, 46, 0.4),
    0 2px 8px rgba(15, 23, 42, 0.08) !important;
  padding: var(--space-8) !important;
}

.auth-story-badge {
  background: rgba(94, 234, 212, 0.15) !important;
  border: 1px solid rgba(94, 234, 212, 0.3) !important;
  color: #5eead4 !important;
  backdrop-filter: blur(10px);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.auth-story h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  background: linear-gradient(135deg, #ffffff 0%, #ccfbf1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 로그인 버튼은 primary 스타일 그대로 상속 + 크기 키움 */
.auth-form .btn-primary {
  padding: 14px 20px !important;
  font-size: var(--text-md) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   24. User Popup Menu 다크모드
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .user-popup-menu {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-theme="dark"] .user-popup-item {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .user-popup-item:hover {
  background: var(--surface-sunken) !important;
}

[data-theme="dark"] .user-popup-divider {
  background: var(--border-default) !important;
}

/* 테마 메뉴 라벨 */
[data-theme="dark"] #menuThemeLabel {
  background: var(--surface-sunken) !important;
  color: var(--text-body) !important;
}

/* ═══════════════════════════════════════════════════════════════
   25. 주요 배너 + 퀵링크 다크모드
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .sample-banner,
[data-theme="dark"] .weekly-banner,
[data-theme="dark"] .explore-card {
  background: var(--surface-raised) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .sample-banner h3,
[data-theme="dark"] .explore-card-title,
[data-theme="dark"] .explore-task-title {
  color: var(--text-strong) !important;
}

[data-theme="dark"] .sample-banner p,
[data-theme="dark"] .explore-task-desc {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .quick-link-card {
  background: var(--surface-card) !important;
  border-color: var(--border-default) !important;
}

/* ═══════════════════════════════════════════════════════════════
   End of Design System v4.0 · Clinical Calm
   ═══════════════════════════════════════════════════════════════ */