/* =========================================================
   Trendfolio Design System (v1)
   모든 페이지 공통 — 컨테이너 너비·제목 위치·타이포그래피 통일
   ========================================================= */

/* ───── 웹폰트 ───── */
@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ───── 디자인 토큰 ───── */
:root {
  /* 폰트 패밀리 (사용자 요청: --sans / --serif / --mono 네임스페이스도 제공) */
  --sans: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Gowun Batang', serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: var(--sans);
  --font-serif: var(--serif);
  --font-mono: var(--mono);

  /* 컬러 */
  --bg: #f7f9fc;
  --surface: #ffffff;
  --border: #e5e7eb;
  --border-soft: #f0f1f3;
  --text-primary: #0f172a;
  --text-body: #4b5563;
  --text-meta: #6b7280;
  --text-faint: #9ca3af;
  --brand: #4361ee;
  --brand-soft: #eef2ff;
  --up: #dc2626;
  --down: #2563eb;
  --warn: #f59e0b;
  --warn-bg: #fef3c7;

  /* 타이포그래피 스케일 — 데스크톱 기본 (가독성 업) */
  --h1-size: 30px;
  --h1-weight: 800;
  --h2-size: 22px;
  --h2-weight: 800;
  --h3-size: 18px;
  --h3-weight: 700;
  --body-size: 17px;
  --body-weight: 500;
  --meta-size: 14px;
  --small-size: 13px;

  /* 간격 */
  --radius-card: 14px;
  --radius-chip: 8px;
  --gap-card: 14px;
  --gap-section: 24px;

  /* 컨테이너 */
  --container-max: 980px;
  --container-pad-x: 24px;

  /* 사이드바 */
  --sidebar-w: 220px;
  --sidebar-w-tablet: 180px;
}

/* ───── 모바일 타이포그래피 (건드리지 말 것 — 기존 값 유지) ───── */
@media (max-width: 768px) {
  :root {
    --h1-size: 22px;
    --h2-size: 18px;
    --h3-size: 16px;
    --body-size: 15px;
    --meta-size: 13px;
    --small-size: 12px;
    --container-pad-x: 14px;
  }
}

/* ───── 전역 재설정 ───── */
html { font-family: var(--font-sans); font-size: var(--body-size); color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { font-weight: var(--body-weight); word-break: keep-all; overflow-wrap: break-word; }

/* ───── 세리프 제목 (전 기기 적용, 크기는 미디어쿼리 상속) ───── */
.hero-title, .ds-hero h1, .ds-hero-title, .hero-name, .mst-title, .mst-name, h1, h2, h3, .card-title, .ds-card-title {
  font-family: var(--font-serif) !important;
  letter-spacing: -0.01em;
}

/* ───── 숫자·라벨·코드 (모노) — 모든 기기 ───── */
.mst-price, .mst-code, .mst-chg, .mst-stat-val, .mst-stat-label,
.mst-evdate, .fc-code, .tl-date, .mst-chip,
.hero-price, .hero-change, .stock-price, .stock-change,
code, kbd, pre, samp,
[data-mono], .mono, .num {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ───── 컨테이너 통일 (모든 페이지 동일 너비) ───── */
.main-content {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 24px var(--container-pad-x) 60px !important;
}
@media (max-width: 768px) {
  .main-content {
    padding: 60px var(--container-pad-x) 90px !important;
  }
}

/* ───── 기존 페이지 제목 (hero-title) 통일 ───── */
.hero-title,
.ds-hero h1,
.ds-hero .ds-hero-title,
.hero-name,
h1 {
  font-size: var(--h1-size) !important;
  font-weight: var(--h1-weight) !important;
  color: var(--text-primary) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}
.hero-sub,
.ds-hero .ds-hero-sub {
  font-size: var(--meta-size) !important;
  color: var(--text-meta) !important;
  line-height: 1.55 !important;
  margin-top: 6px !important;
}
/* 섹션·카드 제목 (h2 급) 통일 */
.card-title,
.ds-card-title,
h2 {
  font-size: var(--h2-size) !important;
  font-weight: var(--h2-weight) !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
}
.card-sub,
.ds-card-sub {
  font-size: var(--meta-size) !important;
  color: var(--text-faint) !important;
}
/* 본문·메타 글꼴 일관 */
p, li, .analysis-body { font-size: var(--body-size) !important; line-height: 1.7 !important; color: var(--text-body) !important; }

/* 히어로 위치: 모든 페이지에서 main-content 상단 첫 블록 */
.hero-section,
.ds-hero,
.stock-hero { margin-bottom: var(--gap-card) !important; }

/* ───── 공통 제목 위치 (Hero) ───── */
.ds-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  margin-bottom: var(--gap-card);
}
.ds-hero h1,
.ds-hero .ds-hero-title {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.ds-hero .ds-hero-sub {
  font-size: var(--meta-size);
  color: var(--text-meta);
  line-height: 1.55;
  margin-top: 6px;
}

/* ───── 카드 ───── */
.ds-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  margin-bottom: var(--gap-card);
}
.ds-card-title {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  color: var(--text-primary);
  margin-bottom: 4px;
}
.ds-card-sub {
  font-size: var(--meta-size);
  color: var(--text-faint);
  margin-bottom: 14px;
}

/* ───── 가격 기준 시각 배지 (모든 페이지 공통) ───── */
.price-asof {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}
.price-asof::before { content: '가격 기준 '; color: #94a3b8; }

/* ───── 통일된 사이드바 메뉴 글꼴 ───── */
.sidebar-menu a, .sidebar-menu button { font-size: var(--meta-size) !important; }
.sidebar-logo { font-size: 17px !important; }

/* ───── 태블릿 (769~1023) ───── */
@media (max-width: 1023px) and (min-width: 769px) {
  .sidebar { width: var(--sidebar-w-tablet) !important; min-width: var(--sidebar-w-tablet) !important; }
  .main-area { margin-left: var(--sidebar-w-tablet) !important; }
  :root { --container-pad-x: 20px; }
}