/* ============================================================
   메디맵 디자인 토큰 v1.0 (대시보드용)
   - 메디맵 브랜드 블루 + 의료뷰티 신뢰 톤
   - 17년차 디자이너가 후속 수정 가능하도록 한 곳에 집중
   ============================================================ */

:root {
  /* ---------- 컬러: 브랜드 ---------- */
  --color-primary:        #0066FF;   /* 메디맵 브랜드 블루 */
  --color-primary-700:    #0052CC;   /* 호버·강조 */
  --color-primary-100:    #E6F0FF;   /* 배경 톤 */
  --color-primary-50:     #F4F8FF;   /* 가장 옅은 강조 */
  --color-navy:           #0A2540;   /* 헤더·딥 텍스트 */
  --color-accent:         #00C2A8;   /* 보조 액센트 (성공·진행) */

  /* ---------- 컬러: 그레이 스케일 ---------- */
  --color-text:           #111827;
  --color-text-2:         #374151;
  --color-text-3:         #6B7280;
  --color-text-4:         #9CA3AF;
  --color-border:         #E5E7EB;
  --color-border-2:       #D1D5DB;
  --color-bg:             #FFFFFF;
  --color-bg-2:           #F8FAFC;
  --color-bg-3:           #F1F5F9;

  /* ---------- 컬러: 상태 ---------- */
  --color-success:        #10B981;
  --color-warning:        #F59E0B;
  --color-danger:         #EF4444;
  --color-info:           #3B82F6;

  /* 큐 상태별 배지 */
  --color-status-pending: #94A3B8;
  --color-status-writing: #3B82F6;
  --color-status-review:  #F59E0B;
  --color-status-ready:   #10B981;
  --color-status-done:    #6B7280;

  /* ---------- 타이포 ---------- */
  --font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
                 "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono:   "JetBrains Mono", "D2Coding", Consolas, Menlo, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  --lh-tight:    1.25;
  --lh-snug:     1.4;
  --lh-normal:   1.55;
  --lh-relaxed:  1.7;

  --ls-tight:    -0.02em;
  --ls-normal:   -0.01em;

  /* ---------- 간격 (4px 그리드) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- 라운드·라인 ---------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  --border-w-1: 1px;

  /* ---------- 그림자 ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.04);
  --shadow-sm: 0 2px 6px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 6px 18px rgba(10, 37, 64, 0.08);
  --shadow-lg: 0 16px 36px rgba(10, 37, 64, 0.10);
  --shadow-focus: 0 0 0 3px rgba(0, 102, 255, 0.18);

  /* ---------- 레이아웃 ---------- */
  --sidebar-w: 240px;
  --topbar-h:  60px;
  --content-max: 1320px;
  --post-preview-w: 450px;   /* 네이버 모바일 본문 */

  /* ---------- 트랜지션 ---------- */
  --t-fast:   120ms cubic-bezier(.2, .8, .2, 1);
  --t-base:   180ms cubic-bezier(.2, .8, .2, 1);
  --t-slow:   280ms cubic-bezier(.2, .8, .2, 1);

  /* ---------- z-index ---------- */
  --z-sidebar:  100;
  --z-topbar:   110;
  --z-dropdown: 200;
  --z-modal:    500;
  --z-toast:    900;
}

/* ============================================================
   리셋 + 기본 타이포
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-family);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg-2);
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--ls-normal);
}
button, input, textarea, select { font-family: inherit; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-700); }

/* ============================================================
   유틸리티 클래스 (Tailwind 대체 최소셋)
   ============================================================ */
.text-h1 { font-size: var(--fs-28); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.text-h2 { font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }
.text-h3 { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.text-body { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--color-text-2); }
.text-caption { font-size: var(--fs-12); color: var(--color-text-3); }
.text-mono { font-family: var(--font-mono); }

.flex { display: flex; }
.flex-1 { flex: 1; }
.col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); }
.p-4 { padding: var(--sp-4); } .p-6 { padding: var(--sp-6); } .p-8 { padding: var(--sp-8); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }

/* ============================================================
   공통 컴포넌트
   ============================================================ */

/* Card */
.card {
  background: var(--color-bg);
  border: var(--border-w-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xs);
}
.card-title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0 0 var(--sp-4); }

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: var(--border-w-1) solid var(--color-border-2);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.btn:hover { background: var(--color-bg-3); }
.btn:focus { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-700); border-color: var(--color-primary-700); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--color-bg-3); }
.btn-danger { color: var(--color-danger); border-color: #FECACA; }
.btn-danger:hover { background: #FEF2F2; }
.btn-sm { padding: 5px 10px; font-size: var(--fs-12); }
.btn-lg { padding: 11px 18px; font-size: var(--fs-15); }

/* Input */
.input, .textarea, .select {
  width: 100%;
  padding: 9px 12px;
  border: var(--border-w-1) solid var(--color-border-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--t-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.textarea { font-family: var(--font-mono); line-height: var(--lh-relaxed); }
.label { display: block; font-size: var(--fs-12); color: var(--color-text-3); font-weight: var(--fw-medium); margin-bottom: var(--sp-1); }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-full);
  background: var(--color-bg-3);
  color: var(--color-text-2);
}
.badge-primary { background: var(--color-primary-100); color: var(--color-primary-700); }
.badge-success { background: #D1FAE5; color: #047857; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-danger { background: #FEE2E2; color: #991B1B; }
.badge-mode-a { background: #DBEAFE; color: #1E40AF; }
.badge-mode-b { background: #FCE7F3; color: #9D174D; }

/* Status dot */
.dot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; }
.dot-pending { background: var(--color-status-pending); }
.dot-writing { background: var(--color-status-writing); }
.dot-review  { background: var(--color-status-review); }
.dot-ready   { background: var(--color-status-ready); }
.dot-done    { background: var(--color-status-done); }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.table th, .table td { text-align: left; padding: 11px 12px; border-bottom: var(--border-w-1) solid var(--color-border); }
.table th { font-weight: var(--fw-semibold); color: var(--color-text-3); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-bg-2); }
.table tr:hover { background: var(--color-bg-2); }

/* Layout: sidebar + topbar */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--color-navy);
  color: #E2E8F0;
  padding: var(--sp-6) 0;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .logo {
  padding: 0 var(--sp-6) var(--sp-6);
  font-size: var(--fs-18);
  font-weight: var(--fw-heavy);
  color: #fff;
  letter-spacing: var(--ls-tight);
}
.sidebar .logo span { color: var(--color-primary); }
.sidebar nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-6);
  color: #CBD5E1;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  border-left: 3px solid transparent;
  transition: all var(--t-fast);
}
.sidebar nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sidebar nav a.active { background: rgba(0,102,255,0.12); color: #fff; border-left-color: var(--color-primary); }
.sidebar .section-label { padding: var(--sp-4) var(--sp-6) var(--sp-2); font-size: var(--fs-12); color: #64748B; text-transform: uppercase; letter-spacing: 0.06em; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h);
  background: var(--color-bg);
  border-bottom: var(--border-w-1) solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-8);
  position: sticky; top: 0; z-index: var(--z-topbar);
}
.topbar h1 { font-size: var(--fs-18); font-weight: var(--fw-bold); margin: 0; letter-spacing: var(--ls-tight); }
.content { padding: var(--sp-8); max-width: var(--content-max); width: 100%; margin: 0 auto; }

/* KPI tile */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.kpi-tile { background: var(--color-bg); border: var(--border-w-1) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-5); }
.kpi-tile .label { font-size: var(--fs-12); color: var(--color-text-3); margin: 0 0 var(--sp-2); }
.kpi-tile .value { font-size: var(--fs-28); font-weight: var(--fw-heavy); color: var(--color-text); letter-spacing: var(--ls-tight); }
.kpi-tile .delta { font-size: var(--fs-12); color: var(--color-text-3); margin-top: var(--sp-1); }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(10,37,64,0.4); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: var(--radius-lg); padding: var(--sp-6); width: min(560px, 92vw); box-shadow: var(--shadow-lg); }

/* Toast */
.toast { position: fixed; bottom: var(--sp-6); right: var(--sp-6); background: var(--color-navy); color: #fff; padding: 12px 18px; border-radius: var(--radius-md); font-size: var(--fs-13); box-shadow: var(--shadow-lg); z-index: var(--z-toast); }

/* Naver mobile post preview frame */
.post-preview-frame {
  max-width: var(--post-preview-w);
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ============================================================
   v2 공통 컴포넌트 — page hero, empty state, stat grid, skeleton, action bar, status pill
   ============================================================ */

/* Page hero — 페이지 상단 인트로 영역 (홈·관리 페이지에 추천) */
.page-hero {
  background: linear-gradient(135deg, var(--color-primary-50) 0%, #FFFFFF 60%);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-xl);
  padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-6);
}
.page-hero .eyebrow { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--color-primary-700); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 var(--sp-2); }
.page-hero h2 { font-size: var(--fs-24); font-weight: var(--fw-heavy); color: var(--color-navy); margin: 0 0 var(--sp-2); letter-spacing: var(--ls-tight); }
.page-hero .lede { font-size: var(--fs-14); color: var(--color-text-2); line-height: var(--lh-relaxed); max-width: 720px; margin: 0; }

/* Empty state — 데이터 없을 때 빈 화면 대신 */
.empty {
  text-align: center;
  padding: var(--sp-16) var(--sp-6);
  background: var(--color-bg);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
}
.empty .icon { font-size: 56px; margin-bottom: var(--sp-3); opacity: 0.55; }
.empty h3 { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--color-text); margin: 0 0 var(--sp-2); }
.empty p { font-size: var(--fs-13); color: var(--color-text-3); margin: 0 0 var(--sp-4); line-height: var(--lh-relaxed); max-width: 460px; margin-left: auto; margin-right: auto; }

/* Stat grid — KPI 타일 v2 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.stat {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
  transition: all var(--t-fast);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary-100); }
.stat a, a.stat { color: inherit; text-decoration: none; display: block; }
.stat .stat-label { font-size: var(--fs-12); color: var(--color-text-3); margin: 0 0 var(--sp-2); font-weight: var(--fw-medium); letter-spacing: 0.02em; }
.stat .stat-value { font-size: var(--fs-32); font-weight: var(--fw-heavy); color: var(--color-text); letter-spacing: var(--ls-tight); line-height: 1; }
.stat .stat-meta { font-size: var(--fs-12); color: var(--color-text-3); margin-top: var(--sp-2); }
.stat .stat-strip { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-primary); }
.stat.stat-warn .stat-strip { background: var(--color-warning); }
.stat.stat-success .stat-strip { background: var(--color-success); }
.stat.stat-info .stat-strip { background: var(--color-info); }
.stat.stat-pending .stat-strip { background: var(--color-status-pending); }
.stat.stat-writing .stat-strip { background: var(--color-status-writing); }
.stat.stat-review  .stat-strip { background: var(--color-status-review); }
.stat.stat-ready   .stat-strip { background: var(--color-status-ready); }
.stat.stat-done    .stat-strip { background: var(--color-status-done); }

/* Status pill — 칸반·카드 공통 상태 표시 */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.pill-pending { background: #F1F5F9; color: var(--color-status-pending); }
.pill-writing { background: #DBEAFE; color: #1E40AF; }
.pill-review  { background: #FEF3C7; color: #92400E; }
.pill-ready   { background: #D1FAE5; color: #047857; }
.pill-done    { background: #F1F5F9; color: var(--color-text-3); }

/* Sticky action bar — editor 같은 곳에 */
.action-bar {
  position: sticky;
  top: var(--topbar-h);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  margin: 0 calc(-1 * var(--sp-8)) var(--sp-6);
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.92);
}
.action-bar .meta { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.action-bar .actions { display: flex; gap: var(--sp-2); }

/* Skeleton — 로딩 자리채움 */
@keyframes skeleton-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }
.skeleton { background: linear-gradient(90deg, var(--color-bg-3) 0%, var(--color-border) 50%, var(--color-bg-3) 100%); background-size: 200% 100%; animation: skeleton-pulse 1.6s ease-in-out infinite; border-radius: var(--radius-sm); }
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line.short { width: 60%; }
.skeleton-block { height: 80px; margin-bottom: var(--sp-3); }

/* Breadcrumb */
.breadcrumb { display: flex; gap: 6px; align-items: center; font-size: var(--fs-12); color: var(--color-text-3); margin-bottom: var(--sp-2); }
.breadcrumb a { color: var(--color-text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .sep { opacity: 0.4; }

/* 향상된 버튼 — primary에 더 강한 인터랙션 */
.btn-primary { box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.15); }
.btn-primary:active { transform: translateY(1px); }

/* Mode badge 통일 — A·B 모드 칩 */
.mode-A { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color: #1E40AF; }
.mode-B { background: linear-gradient(135deg, #FCE7F3, #FBCFE8); color: #9D174D; }

/* Section title with helper text */
.section-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-4); }
.section-title h2 { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--color-text); letter-spacing: var(--ls-tight); }
.section-title .helper { font-size: var(--fs-12); color: var(--color-text-3); }

/* 사이드바 v2 — 로고 영역 강화 */
.sidebar .logo { display: flex; flex-direction: column; gap: 2px; }
.sidebar .logo-mark { display: inline-flex; align-items: center; gap: 8px; }
.sidebar .logo-mark::before { content: ''; width: 26px; height: 26px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); border-radius: 7px; }
.sidebar .logo-sub { font-size: 11px; color: #94A3B8; font-weight: var(--fw-medium); letter-spacing: 0.02em; }