/* ============================================================
   YBS 2분뉴스 — Design System / Base
   토큰 · 리셋 · 타이포그래피 · 레이아웃 프리미티브
   ============================================================ */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  /* 브랜드 */
  --brand-50:  #eef4fc;
  --brand-100: #d6e4f7;
  --brand-200: #adc9ef;
  --brand-400: #2f74cc;
  --brand-500: #1258ad;
  --brand-600: #0b4da2;   /* 메인 */
  --brand-700: #073b7f;
  --brand-800: #052a5c;

  /* 강조 (속보/라이브) */
  --live-500:  #d92d20;
  --live-600:  #b42318;

  /* 뉴트럴 (라이트) */
  --bg:         #ffffff;
  --bg-subtle:  #f7f8fa;
  --bg-sunken:  #eef0f4;
  --surface:    #ffffff;
  --surface-2:  #f7f8fa;
  --line:       #e5e7eb;
  --line-strong:#d1d5db;
  --ink:        #10131a;
  --ink-2:      #3d4351;
  --ink-3:      #565e6b;   /* 본문 대비 6.4:1 (WCAG AA) */
  --ink-4:      #6a7280;   /* 보조 텍스트 4.8:1 (WCAG AA) */
  --on-brand:   #ffffff;

  /* 그림자 */
  --sh-1: 0 1px 2px rgba(16,19,26,.06), 0 1px 3px rgba(16,19,26,.05);
  --sh-2: 0 4px 12px rgba(16,19,26,.08);
  --sh-3: 0 12px 32px rgba(16,19,26,.12);

  /* 레이아웃 */
  --wrap:      1280px;
  --wrap-wide: 1480px;
  --wrap-read: 760px;
  --gutter:    24px;
  --header-h:  80px;

  /* 라운드 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* 모션 */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur:  .22s;

  /* 폰트 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕",
               system-ui, sans-serif;
  --font-num:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ---------- 2. 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 800; line-height: 1.28; letter-spacing: -.025em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand-600); }

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; background: var(--bg-sunken); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 3px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- 3. 레이아웃 프리미티브 ---------- */
.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide{ max-width: var(--wrap-wide); }
.wrap--read{ max-width: var(--wrap-read); }

.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; align-items: center; gap: var(--gap, 12px); }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }

.grid { display: grid; gap: var(--gap, 24px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  :root { --gutter: 16px; }
}
@media (max-width: 460px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- 4. 유틸 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--brand-600); color: #fff; padding: 10px 18px;
  border-radius: var(--r-sm); font-weight: 700; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

.clamp-1, .clamp-2, .clamp-3, .clamp-4 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; }

.muted   { color: var(--ink-3); }
.tnum    { font-variant-numeric: tabular-nums; }
.hide    { display: none !important; }

@media (max-width: 760px) { .hide-sm { display: none !important; } }
@media (min-width: 761px) { .hide-lg { display: none !important; } }

/* ---------- 5. 스켈레톤 ---------- */
.sk {
  background: linear-gradient(100deg, var(--bg-sunken) 30%, var(--surface-2) 50%, var(--bg-sunken) 70%);
  background-size: 220% 100%;
  animation: sk 1.2s var(--ease) infinite;
  border-radius: var(--r-sm);
}
@keyframes sk { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.sk--text { height: 1em; margin-block: .3em; }
.sk--img  { aspect-ratio: 16/10; border-radius: var(--r-md); }