/* ============================================================
   알고리즘 밖 뉴스 모아보기 — 디자인 토큰
   (업로드된 Stripi 디자인 시안 기반으로 재구성)

   글꼴 참고: Sohne는 라틴 전용 서체라 한글 글리프가 없습니다.
   그래서 한글 조판은 Pretendard 300(=Inter와 짝을 이루도록
   설계된 국문 서체)을, 숫자·영문은 Inter 300 + tabular figures를
   사용해 브랜드의 "가는 두께 + 네거티브 트래킹" 톤을 유지했습니다.
   ============================================================ */
:root {
  /* --- Stripi 컬러 토큰 --- */
  --primary: #533afd;
  --primary-deep: #4434d4;
  --primary-press: #2e2b8c;
  --primary-soft: #665efd;
  --primary-bg-subdued: #b9b9f9;
  --brand-dark: #1c1e54;
  --ink: #0d253d;
  --ink-secondary: #273951;
  --ink-mute: #64748d;
  --ink-mute-2: #61718a;
  --on-primary: #ffffff;
  --canvas: #ffffff;
  --canvas-soft: #f6f9fc;
  --canvas-cream: #f5e9d4;
  --hairline: #e3e8ee;
  --hairline-input: #a8c3de;
  --ruby: #ea2261;
  --magenta: #f96bee;
  --lemon: #9b6829;
  --shadow-blue: #003770;
  --mesh-orange: #ff9d5c;

  /* --- 정치 스펙트럼 5단 (기능색상 — 브랜드 억양 색과 별도 유지) --- */
  --spec-prog: #0052ff;    /* 진보 — 블루 */
  --spec-cprog: #3e46f6;   /* 중도진보 — 블루→퍼플 블렌드 */
  --spec-center: #7c3aed;  /* 중도 — 퍼플 */
  --spec-ccons: #bd1d76;   /* 중도보수 — 퍼플→레드 블렌드 */
  --spec-cons: #ff0000;    /* 보수 — 레드 */

  /* --- 타이포그래피 ---
     Noto Sans KR: 구글 호스팅, SIL Open Font License — 저작권 걱정 없이
     쓸 수 있는 완전 오픈소스 서체. Inter는 라틴/숫자 전용으로 병행. */
  --font-latin: "Inter", system-ui, -apple-system, sans-serif;
  --font-kr: "Noto Sans KR", "Inter", system-ui, -apple-system, sans-serif;

  /* --- 라운드 스케일 --- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 9999px;

  /* --- 스페이싱 스케일 --- */
  --sp-xxs: 2px; --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px;
  --sp-xl: 24px; --sp-xxl: 32px; --sp-huge: 64px;

  /* --- 그림자 --- */
  --shadow-1: rgba(0,55,112,0.08) 0 1px 3px;
  --shadow-2: rgba(0,55,112,0.08) 0 8px 24px, rgba(0,55,112,0.04) 0 2px 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-kr);
  font-weight: 400;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--primary-bg-subdued); color: var(--brand-dark); }

.num, .tabular {
  font-family: var(--font-latin);
  font-feature-settings: "tnum";
  letter-spacing: -0.42px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.wrap { max-width: 1242px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   상단 네비게이션 (nav-bar-on-mesh)
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: var(--sp-lg) 0;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--hairline);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; }
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}
.brand-cube { width: 26px; height: 26px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-word {
  font-family: var(--font-latin);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.brand-accent {
  background: linear-gradient(90deg, var(--spec-prog), var(--spec-center), var(--spec-cons));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topnav { display: flex; align-items: center; gap: var(--sp-xl); font-size: 14px; color: var(--ink-mute); }
.topnav a:hover { color: var(--ink); }
.nav-cta {
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-kr);
  font-weight: 400;
  font-size: 14px;
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--r-pill);
  transition: background 0.15s ease;
}
.nav-cta:hover { background: var(--primary-deep); }

/* 좁은 화면에서는 텍스트 5개+로고를 한 줄에 욱여넣을 공간이 없어 링크가 한 글자씩
   세로로 줄바꿈되는 문제가 있었다 — 가로 네비게이션을 통째로 숨기고, 화면 우측
   하단에 떠 있는 동그란 버튼 하나로 대체한다(눌러야 메뉴가 뜸). */
.mobile-nav-fab, .mobile-nav-menu { display: none; }
@media (max-width: 720px) {
  .topnav { display: none; }

  .mobile-nav-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    cursor: pointer;
    z-index: 1000;
  }
  .mobile-nav-fab-icon-close { display: none; }
  .mobile-nav-fab.open .mobile-nav-fab-icon-menu { display: none; }
  .mobile-nav-fab.open .mobile-nav-fab-icon-close { display: block; }

  .mobile-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    right: 20px;
    bottom: 84px;
    min-width: 168px;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 28px rgba(0,0,0,0.2);
    padding: 8px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 999;
  }
  .mobile-nav-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .mobile-nav-menu a {
    padding: 10px 14px;
    border-radius: var(--r-md);
    font-family: var(--font-kr);
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
  }
  .mobile-nav-menu a:hover { background: var(--canvas-soft); }
}

/* ============================================================
   히어로 + 그라디언트 메시 (시그니처 배경)
   ============================================================ */
.hero {
  position: relative;
  padding: 88px 0 56px;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--canvas) 85%);
  pointer-events: none;
  z-index: 1;
}
.mesh-backdrop {
  position: absolute;
  top: -160px; left: 0; right: 0;
  width: 100%;
  height: 520px;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin-bottom: 10px;
}
.hero-eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--primary);
}
.hero h1 {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: clamp(32px, 4.8vw, 52px);
  line-height: 1.16;
  letter-spacing: -0.4px;
  margin: 0 0 var(--sp-lg);
  max-width: 13.5em;
  color: var(--ink);
}
.hero p.lede {
  font-family: var(--font-kr);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink-secondary);
  max-width: 42em;
  margin: 0 0 var(--sp-xl);
}
.hero-signature { margin-top: var(--sp-xl); }

.axis-demo {
  display: flex;
  height: 36px;
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 420px;
  box-shadow: var(--shadow-1);
}
.axis-demo span {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.98);
}
.axis-demo span:nth-child(1) { background: var(--spec-prog); }
.axis-demo span:nth-child(2) { background: var(--spec-center); flex: 1.15; }
.axis-demo span:nth-child(3) { background: var(--spec-cons); }

/* ============================================================
   섹션 헤더
   ============================================================ */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-lg);
  padding-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-xl);
}
.section-head h2 {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.2px;
  margin: 0;
  color: var(--ink);
}
.section-head .meta {
  font-family: var(--font-latin);
  font-feature-settings: "tnum";
  font-size: 12px;
  color: var(--ink-mute);
}
.meta-break { display: none; }
/* archive.html/archive-more.html의 <main>은 .method-body도 같이 쓰는데, .method-body h2가
   범용 섹션 구분용 border-top/padding-top/margin-top(디바이더 스타일)를 갖고 있어서
   .section-head h2와 같은 specificity(0,1,1)로 부딪힌다 — 파일 뒤쪽에 있는 .method-body h2가
   이겨서 날짜 제목에 엉뚱한 윗줄+여백이 생기던 버그. 조상 클래스 2개로 specificity를 확실히
   높여서 무효화한다. */
.method-body .section-head h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  font-size: 22px;
  font-weight: 700;
}
.section-head-title { display: flex; align-items: baseline; gap: var(--sp-sm); flex-wrap: wrap; }
.section-head-dot { font-size: 22px; font-weight: 700; color: var(--ink-mute); }
.issue-count-badge {
  font-family: var(--font-kr);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
/* 모바일: "보도량 기반 자동 선정"을 2줄로 접어 화면 우측 끝에 정렬한다. PC는 원래대로. */
@media (max-width: 720px) {
  .section-head { justify-content: space-between; }
  .section-head .meta { font-size: 11px; text-align: right; }
  .meta-break { display: inline; }
}

/* ============================================================
   이슈 카드 (card-feature-light)
   ============================================================ */
.feed { display: flex; flex-direction: column; gap: var(--sp-xl); margin-bottom: var(--sp-huge); }

.issue-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-lg) var(--sp-xxl) var(--sp-xxl);
}
/* 접힌 상태(지난 이슈 카드)는 펼침 콘텐츠가 없어서 기본 여백 그대로면 하단이 휑해
   보인다 — 접혀있을 때만 아래쪽 여백을 좁힌다(펼치면 다시 기본값으로 돌아옴). */
.issue-card.collapsible:not(.expanded) { padding-bottom: var(--sp-lg); }
.issue-card.highlight-flash { animation: card-highlight-flash 2.8s ease; }
@keyframes card-highlight-flash {
  0%, 20% { box-shadow: 0 0 0 4px var(--primary-soft); border-color: var(--primary); }
  100% { box-shadow: var(--shadow-1); border-color: var(--hairline); }
}
@media (max-width: 720px) { .issue-card { padding: var(--sp-lg); } }

/* 제목이 버튼과 한 행 폭을 다투면 좁은 화면에서 기형적으로 쪼개진다 — 제목은
   자기 행 전체 폭을 쓰게 아래로 내리고, 위 행엔 메타 정보(기사 성격+언론사 수)와
   그보다 작은 추적 버튼만 나란히 둔다. 공유 버튼은 여기서 빼서 하단 "원문
   모아보기"와 같은 줄로 옮겼다 — 카드마다 반복되는 상단이 버튼 두 개로 너무
   튀어 보인다는 피드백. */
.issue-card-head { margin-bottom: var(--sp-lg); }
.issue-meta-row {
  position: relative;
  padding-right: 150px; /* keep long tag text clear of the absolutely-positioned actions */
  margin-bottom: 7px;
}
/* 버튼 높이(32px)가 태그 텍스트(줄 높이 ~16px)보다 커서 flex 행에 같이 두면 행 자체가
   버튼 높이만큼 늘어나 제목과의 간격이 벌어진다 — 버튼을 행의 레이아웃 흐름에서
   빼서(absolute) 텍스트 높이만 행 높이에 반영되게 한다. */
.issue-head-actions-desktop { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* 데스크톱은 원래대로 공유+추적 버튼이 나란히, 원래 크기 그대로 상단에 붙어있고
   (변경 전 .issue-card-head-actions와 동일 모양), 하단 원문 링크 옆 공유 버튼은
   숨긴다 — 모바일에서만 이 배치를 서로 맞바꾼다(아래 미디어쿼리). */
.issue-foot-share-mobile { display: none; }
/* 데스크톱은 공유 버튼이 숨어서 남는 건 원문 링크 하나뿐이라 원래처럼(.issue-foot-end
   와 동일하게) 우측에 붙인다 — 카드가 실제로 쓰이는 #feed(오늘의 이슈)·
   #archive-content(지난 이슈/지난 이슈 보관함)로 좁혀서 다른 곳의 .issue-foot
   (topic.html의 day-card 등, 공유 버튼 자체가 없음)에는 영향 없게 한다. */
#feed .issue-foot,
#archive-content .issue-foot { justify-content: flex-end; }
@media (max-width: 720px) {
  /* 상단 공유 버튼은 숨기고 하단(원문 모아보기 옆) 것만 남긴다. 추적 버튼은
     좁은 화면용으로 작게 줄인다 — 이 두 가지는 모바일 전용, 데스크톱은 원래
     크기·배치 그대로 둔다. */
  .issue-head-actions-desktop .share-btn { display: none; }
  .issue-foot-share-mobile { display: inline-flex; align-items: center; }
  .issue-meta-row .save-btn { padding: 4px 10px; font-size: 12px; flex-shrink: 0; }
  .issue-meta-row { padding-right: 85px; } /* share-btn is hidden here, only the smaller track button remains */
  .issue-meta { white-space: nowrap; }
  #feed .issue-foot,
  #archive-content .issue-foot { justify-content: space-between; }
}

.issue-meta {
  font-family: var(--font-latin);
  font-feature-settings: "tnum";
  font-size: 12px;
  color: var(--ink-mute);
}

.issue-card h3 {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.2px;
  word-break: keep-all;
  margin: 0;
  color: var(--ink);
  max-width: 34em;
}

.related-issue-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  max-width: 100%;
  font-family: var(--font-kr);
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
  margin-top: var(--sp-lg);
  transition: all 0.15s ease;
}
.related-issue-badge:hover { background: var(--primary-bg-subdued); border-color: var(--primary-bg-subdued); }
.related-issue-label {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.related-issue-title {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related-issue-badge:hover .related-issue-label,
.related-issue-badge:hover .related-issue-title { color: var(--primary-deep); }

/* 관련 과거 이슈가 2개 이상일 때 — 헤더("이 사건은 어떻게 흘러왔을까요? · 총 N건")와
   최신 1건은 항상 보이고(2026-08-05), 우측 "이전 이슈 N건 더보기" 필 버튼을 눌러야
   나머지(이전 이슈)만 펼쳐진다. */
.related-timeline-wrap {
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  margin-top: var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
}
.related-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--hairline);
}
.related-timeline-accordion-label {
  font-family: var(--font-kr);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
/* .expand-toggle(성향별 비교용)과 같은 중립 톤 필(pill) 스타일 — 처음엔 보라색 강조
   pill이었는데(2026-08-05), 카드마다 반복 노출되는 요소치고 너무 튄다는 피드백으로
   .expand-toggle과 같은 무채색 계열로 맞췄다. */
.related-timeline-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: fit-content;
  /* 라벨과 한 줄에 안 들어가 줄바꿈되면(좁은 화면) justify-content:space-between이
     혼자 남은 줄에서는 정렬 기준이 없어 그냥 왼쪽에 붙어버린다 — margin-left:auto로
     그 줄 안에서 항상 오른쪽 끝에 붙게 강제한다. */
  margin-left: auto;
  padding: 5px var(--sp-md);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--canvas-soft);
  font-family: var(--font-kr);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.related-timeline-toggle:hover { background: var(--hairline); color: var(--ink); }
/* tracking.html의 .tracking-trash-caret/.tracking-explainer-caret과 같은 패턴 —
   ▾가 .expanded일 때 180도 돌아 펼침 상태를 나타낸다. */
.related-timeline-toggle-caret { font-size: 10px; line-height: 1; transition: transform 0.2s ease; }
.related-timeline-wrap.expanded .related-timeline-toggle-caret { transform: rotate(180deg); }
.related-timeline-label-short { display: none; }
/* 모바일: 라벨을 "이 사건은 어떻게 흘러왔을까요?" 대신 짧은 "사건 타임라인"으로
   바꿔서, 짧아진 만큼 라벨/알약 둘 다 큰 글씨로 한 줄에 들어가게 한다. PC는
   원래 문구 그대로. */
@media (max-width: 720px) {
  .related-timeline-label-full { display: none; }
  .related-timeline-label-short { display: inline; }
  .related-timeline-header { justify-content: space-between; flex-wrap: nowrap; }
  .related-timeline-accordion-label {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .related-timeline-toggle {
    flex-shrink: 0;
    font-size: 11px;
    padding: 5px 8px;
    white-space: nowrap;
  }
  .related-timeline-toggle-caret { font-size: 10px; }
}
/* 320px대 초소형 화면에서는 라벨/알약을 한 번 더 줄여 말줄임 없이 들어갈 여지를 준다. */
@media (max-width: 360px) {
  .related-timeline-accordion-label { font-size: 12px; }
  .related-timeline-toggle { font-size: 9px; padding: 4px 5px; }
  .related-timeline-toggle-caret { font-size: 8.5px; }
}
.related-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding-top: var(--sp-md);
}
.related-timeline-item {
  position: relative;
  padding-left: 18px;
}
/* 이전 이슈(과거순) 항목끼리는 항상 같은 부모(.related-timeline-hidden-inner) 안의
   형제라 간격이 일정하고, 마지막 항목만 아래로 이을 게 없어 제외한다. */
.related-timeline-hidden-inner .related-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 14px;
  bottom: -10px;
  width: 1px;
  background: var(--hairline);
}
/* 최신 항목(.related-timeline의 직계 자식)은 접힌 상태에선 아래로 이을 게 안 보이므로
   선도 안 보여야 한다(2026-08-05) — .expanded일 때만 나타나서 이전 이슈 목록과
   끊김 없이 이어진다. */
.related-timeline > .related-timeline-item::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 14px;
  bottom: -10px;
  width: 1px;
  background: var(--hairline);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.related-timeline-wrap.expanded .related-timeline > .related-timeline-item::before {
  opacity: 1;
}
.related-timeline-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.related-timeline-body { display: flex; flex-direction: column; gap: 1px; }
.related-timeline-date-row { display: flex; align-items: center; gap: 6px; }
.related-timeline-date-sep { color: var(--ink-mute); font-size: 11px; }
.related-timeline-latest-tag {
  font-family: var(--font-latin);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: var(--r-pill);
  padding: 2px 7px;
}
.related-timeline-date {
  font-family: var(--font-latin);
  font-feature-settings: "tnum";
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
}
.related-timeline-title {
  font-family: var(--font-kr);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
  word-break: keep-all;
}
.related-timeline-title:hover { color: var(--primary); }

/* 이전 이슈(오래된 것) — 헤더 우측 "이전 이슈 N건 더보기" 필 버튼(.related-timeline-toggle)을
   눌러야 펼쳐진다. .collapsible .card-details와 같은 grid-template-rows 0fr↔1fr
   트릭으로 부드럽게 펼쳐진다. */
.related-timeline-hidden {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}
.related-timeline-wrap.expanded .related-timeline-hidden {
  grid-template-rows: 1fr;
  opacity: 1;
}
.related-timeline-hidden-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  overflow: hidden;
  min-height: 0;
}

/* wrap은 clip 없이 위치 기준만 잡고, 실제 색상 pill(overflow:hidden)과 라벨 레이어를
   형제로 분리한다 — 라벨을 spectrum-bar 안에 두면 가장자리에 가까운 얇은 구간의 %가
   pill의 overflow:hidden에 잘릴 수 있어서다. */
.spectrum-bar-wrap { position: relative; margin: var(--sp-lg) 0 var(--sp-sm); }
.spectrum-bar {
  display: flex;
  height: 22px;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.spectrum-bar .seg { height: 100%; }
.spectrum-bar .seg.prog  { background: var(--spec-prog); }
.spectrum-bar .seg.cprog { background: var(--spec-cprog); }
.spectrum-bar .seg.center{ background: var(--spec-center); }
.spectrum-bar .seg.ccons { background: var(--spec-ccons); }
.spectrum-bar .seg.cons  { background: var(--spec-cons); }
.seg-labels { position: absolute; inset: 0; pointer-events: none; }
.seg-label {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--font-latin);
  font-feature-settings: "tnum";
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.count-legend {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  font-family: var(--font-kr);
  font-size: 13px;
  color: var(--ink-secondary);
  margin: 0 0 var(--sp-xl);
  flex-wrap: wrap;
}
/* archive 카드: "총 N건" 범례와 "성향별 비교 펼쳐보기" 버튼을 한 줄에 배치 */
.card-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-sm);
}
.card-stats-row .count-legend { margin: 0; }
/* 좁은 화면에서는 범례(총 N건 등)와 "성향별 비교 펼쳐보기"가 한 줄에 안 들어가
   따로 줄바꿈된다 — 아예 세로로 쌓아서, 범례는 카드 폭 전체를 채우고(그래야
   .count-legend의 clamp() 자동 확대가 의미가 있다) 버튼은 우측 끝에 붙인다. */
@media (max-width: 720px) {
  .card-stats-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .card-stats-row .expand-toggle { align-self: flex-end; }
}
.count-legend b { font-family: var(--font-latin); font-feature-settings: "tnum"; font-weight: 600; color: var(--ink); }
.count-legend .legend-total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-right: var(--sp-lg);
  border-right: 1px solid var(--hairline);
  color: var(--ink-mute);
  font-size: 12.5px;
}
.count-legend .legend-total b { font-weight: 700; color: var(--ink); }

/* "총 N건 · 진보 N건 · 중도 N건 · 보수 N건"이 줄바꿈되면 항목 하나가 뚝 떨어져
   나와 보인다 — 좁은 화면에서는 줄바꿈을 아예 막고 글자·여백을 줄여 한 줄에
   맞춘다(375px 기준 실측으로 맞춘 값). */
@media (max-width: 720px) {
  /* clamp(최소, 화면폭 비례, 최대) — 화면폭에 맞춰 자동으로 커지되 한 줄을 벗어나지
     않을 상한선을 둔다. 폭이 좁아 한 줄이 빡빡할수록 최소값 쪽에 가깝게, 여유가
     생기면 최대값까지 자동으로 커져서 우측 빈 공간을 채운다. */
  .count-legend {
    flex-wrap: nowrap;
    gap: clamp(6px, 2vw, 10px);
    font-size: clamp(11px, 3.4vw, 14px);
  }
  .count-legend .legend-total {
    gap: 3px;
    padding-right: clamp(6px, 2vw, 10px);
    font-size: clamp(11px, 3.4vw, 14px);
    flex-shrink: 0;
  }
  .count-legend .dot { width: 6px; height: 6px; margin-right: 3px; }
  .count-legend .info-icon { width: 13px; height: 13px; font-size: 9px; }
}

.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--hairline);
  color: var(--ink-mute);
  font-family: var(--font-latin);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  line-height: 1;
}
.info-icon:hover, .info-icon:focus-visible { background: var(--ink-mute); color: var(--on-primary); outline: none; }
.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  background: var(--brand-dark);
  color: var(--on-primary);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 10;
  pointer-events: none;
}
.info-icon:hover::after, .info-icon:focus-visible::after { opacity: 1; visibility: visible; }
/* 데스크톱은 아이콘 중앙 기준으로 좌우 균등하게 펼쳐져도 여유가 있지만, 모바일은
   아이콘이 화면 왼쪽 가장자리 가까이 있는 경우가 많아 절반이 화면 밖으로 잘린다 —
   왼쪽으로는 안 넘치게 아이콘 좌측을 기준점 삼아 우측·위쪽으로만 펼친다. */
@media (max-width: 720px) {
  .info-icon::after { left: 0; transform: none; }
}
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dot.prog { background: var(--spec-prog); }
.dot.cprog { background: var(--spec-cprog); }
.dot.center { background: var(--spec-center); }
.dot.ccons { background: var(--spec-ccons); }
.dot.cons { background: var(--spec-cons); }

/* ============================================================
   3단 비교 카드
   ============================================================ */
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } }

.compare-col {
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.compare-col.prog   { background: color-mix(in srgb, var(--spec-prog) 7%, var(--canvas)); }
.compare-col.center { background: color-mix(in srgb, var(--spec-center) 7%, var(--canvas)); }
.compare-col.cons   { background: color-mix(in srgb, var(--spec-cons) 7%, var(--canvas)); }

.compare-col-body { padding: var(--sp-lg); display: flex; flex-direction: column; flex: 1; }
/* 그 진영 대표 기사가 없을 때(추적 주제 날짜별 카드) — 박스를 빼는 대신 같은 자리에
   안내 문구만 넣어 진보/중도/보수 3칸 배치가 항상 유지되게 한다. 점선 테두리로 "실제
   콘텐츠가 아니라 상태 안내"라는 걸 구분한다. 진영색 배경(.compare-col.prog 등)보다
   뒤에 오는 규칙이라 자동으로 덮어씀. */
.compare-col.empty {
  border: 1.5px dashed var(--hairline);
  background: var(--canvas-soft);
}
.compare-col.empty .compare-col-body { align-items: center; justify-content: center; text-align: center; gap: var(--sp-sm); }
.compare-empty-icon { font-size: 22px; line-height: 1; }
.outlet-quote-empty { font-size: 13px; color: var(--ink-mute); line-height: 1.5; margin: 0; }
/* 기사는 있는데 발췌문을 못 받은 경우(일시적 수집 오류) — 데이터가 아예 없는 경우와
   구분되게 붉은 톤을 준다. */
.compare-col.empty.error {
  border-color: color-mix(in srgb, var(--ruby) 45%, var(--hairline));
  background: color-mix(in srgb, var(--ruby) 6%, var(--canvas));
}
.compare-col.empty.error .outlet-quote-empty { color: color-mix(in srgb, var(--ruby) 65%, var(--ink-secondary)); }

.outlet-line { display: flex; align-items: center; gap: 7px; margin-bottom: var(--sp-sm); flex-wrap: wrap; }
.outlet-favicon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.outlet-name { font-family: var(--font-kr); font-weight: 600; font-size: 14px; color: var(--ink); }

.tier-badge {
  font-family: var(--font-kr);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--r-pill);
}
.tier-badge.progressive        { background: color-mix(in srgb, var(--spec-prog) 18%, white); color: var(--spec-prog); }
.tier-badge.center-progressive { background: color-mix(in srgb, var(--spec-cprog) 18%, white); color: var(--spec-cprog); }
.tier-badge.center             { background: color-mix(in srgb, var(--spec-center) 18%, white); color: var(--spec-center); }
.tier-badge.center-conservative{ background: color-mix(in srgb, var(--spec-ccons) 18%, white); color: var(--spec-ccons); }
.tier-badge.conservative       { background: color-mix(in srgb, var(--spec-cons) 18%, white); color: var(--spec-cons); }

.outlet-quote { font-family: var(--font-kr); font-size: 13.5px; color: var(--ink-secondary); margin: var(--sp-sm) 0 var(--sp-md); line-height: 1.65; }
.outlet-quote mark { font-weight: 700; padding: 0 1px; border-radius: 2px; color: var(--ink); }
.compare-col.prog .outlet-quote mark { background: color-mix(in srgb, var(--spec-prog) 20%, transparent); }
.compare-col.center .outlet-quote mark { background: color-mix(in srgb, var(--spec-center) 22%, transparent); }
.compare-col.cons .outlet-quote mark { background: color-mix(in srgb, var(--spec-cons) 20%, transparent); }
/* 핵심 주어·명사용 — mark(배경색 강조)와 구분되게 배경 없이 굵기만 */
.outlet-quote strong { font-weight: 700; color: var(--ink); }

.outlet-link {
  font-family: var(--font-kr);
  font-size: 11.5px;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-end;
  margin-top: auto;
  padding-top: var(--sp-sm);
  transition: color 0.15s ease;
}
.outlet-link:hover { color: var(--ink-secondary); text-decoration: underline; }

/* ============================================================
   카드 하단: 원문 링크 + 저장 버튼
   ============================================================ */
.issue-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-md); gap: var(--sp-md); flex-wrap: wrap; }
/* 오늘의 이슈(app.js) 카드만 우측 정렬 — archive.html 등 다른 곳의 .issue-foot은 그대로 둔다. */
.issue-foot-end { justify-content: flex-end; }
.foot-link {
  font-family: var(--font-kr);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-secondary);
  background: var(--canvas-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-sm) var(--sp-lg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease;
}
.foot-link:hover { background: var(--hairline); text-decoration: none; }

/* ============================================================
   카드 접기/펼치기 (archive.html·archive-more.html의 이슈 카드, topic.html의 날짜별 카드
   공통 — .collapsible + .expand-toggle + .card-details 마크업이면 어디든 재사용된다)
   ============================================================ */
/* display:none↔block은 트랜지션이 안 붙어서 grid-template-rows 0fr↔1fr 트릭으로
   펼쳐지는 애니메이션을 준다 — .card-details-inner가 실제 콘텐츠를 감싸고
   overflow:hidden으로 접힌 동안 잘려 보이게 한다. */
.collapsible .card-details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}
.collapsible .card-details-inner {
  overflow: hidden;
  min-height: 0;
  padding-top: var(--sp-lg);
}
.collapsible.expanded .card-details {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* 단순 텍스트가 아니라 배경이 있는 칩(pill) 형태로 만들어서 클릭 가능한 영역임을
   명확히 한다. "총 N건" 범례와 한 줄(.card-stats-row)에 놓이므로 오른쪽 정렬만 하고
   너비는 내용에 맞춘다. */
.expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  flex-shrink: 0;
  padding: var(--sp-sm) var(--sp-lg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--canvas-soft);
  font-family: var(--font-kr);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.expand-toggle:hover { background: var(--hairline); color: var(--ink); }

.method-body.archive-page .lede-sub { font-size: 17px; }
.lede-sub b { color: var(--primary-deep); }
.lede-sub a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lede-sub a:hover { color: var(--primary-deep); }

/* archive.html 상단 헤더 — 캡션 + 제목/뱃지 + 보관함 링크 */
.archive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  flex-wrap: wrap;
  margin-bottom: var(--sp-xl);
}
.archive-kicker {
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 6px;
}
/* .method-body h1(명시도 0,1,1)이 파일 뒤쪽에 있어서 margin-bottom을 8px로 도로
   덮어써버린다 — 조상 클래스를 하나 더 붙여 확실히 이긴다. */
.archive-page .archive-header-left h1 { margin: 0; }
/* archive-more.html(지난 이슈 보관함) 제목~세부설명 간격을 archive.html과 동일하게 좁힌다. */
.archive-page > h1 { margin-bottom: 0; }
.archive-page > h1 + .lede-sub { margin-top: 2px; }
/* .method-body p(명시도 0,1,1)보다 낮으면 밀려서 진한 색으로 나온다 — 조상 클래스를
   붙여 확실히 이긴다. */
.archive-header-left p.archive-window-note {
  font-family: var(--font-kr);
  font-size: 17px;
  color: var(--ink-mute);
  margin: 2px 0 0;
}
.archive-vault-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-sm) var(--sp-lg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--canvas-soft);
  font-family: var(--font-kr);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.archive-vault-link:hover { background: var(--hairline); border-color: var(--ink-mute); }

/* 우측 이동 화살표 뱃지 — "이 사건은 어떻게 흘러왔을까요?" 타임라인 항목에서만 쓴다. */
.chevron-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--primary) 10%, var(--canvas-soft));
  color: color-mix(in srgb, var(--primary) 55%, var(--ink-mute));
  transition: transform 0.15s ease;
}
.related-timeline-title:hover .chevron-badge {
  transform: translateX(2px);
}
@media (max-width: 720px) {
  .chevron-badge { width: 13px; height: 13px; }
  .chevron-badge svg { width: 8px; height: 8px; }
}

/* "지난 이슈 보관함" 전체 문구 링크는 좁은 화면에 두기엔 너무 길다 — 모바일에서는
   본문 쪽 링크를 숨기고, 대신 상단바에 아이콘+짧은 라벨 버전을 띄운다(topnav가
   이미 모바일에서 숨어있어 topbar-inner엔 로고와 이 버튼만 남고, space-between이
   알아서 우측 끝에 붙여준다). */
.archive-vault-link-mobile { display: none; }
@media (max-width: 720px) {
  .archive-vault-link { display: none; }
  .archive-vault-link-mobile {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--canvas-soft);
    font-family: var(--font-kr);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-secondary);
    white-space: nowrap;
  }
  /* 로고 밑 상단바 구분선은 모바일 5개 탭 전부에서 뺀다(PC는 유지). */
  .topbar { border-bottom: none; }
  /* 로고~제목, 제목~날짜 사이 여백이 데스크톱 값 그대로라 모바일에서 헐렁해
     보인다 — 줄인다. 날짜 밑 가로선은 모바일에선 굳이 없어도 되는 구분선이라
     아예 빼고, 그 자리에 있던 여백도 같이 좁힌다. */
  .archive-page.method-body { padding-top: 8px; }
  .archive-header { margin-bottom: var(--sp-md); }
  .archive-page .section-head { border-bottom: none; padding-bottom: 0; margin-bottom: var(--sp-sm); }
}

/* archive.html 맨 아래, "지난 이슈 보관함"으로 넘어가는 큼직한 가로 배너 버튼.
   상단 설명줄의 인라인 링크와 합쳐서 진입 지점은 이 둘 딱 2개만 둔다. */
.archive-more-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--sp-xxl);
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  font-family: var(--font-kr);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.archive-more-banner:hover { background: var(--hairline); border-color: var(--ink-mute); }

/* index.html 피드 위, 첫 방문자에게 추적(☆) 기능을 미리 설명하는 닫기 가능한 배너.
   닫기를 누르거나 실제로 이슈를 하나 추적하면(render-helpers.js dismissTrackingIntro)
   localStorage에 기록되어 다시 뜨지 않는다. */
.tracking-intro-banner[hidden] { display: none; }
.tracking-intro-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  font-family: var(--font-kr);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-secondary);
}
.tracking-intro-banner-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-mute);
}
.tracking-intro-banner-close:hover, .tracking-intro-banner-close:focus-visible { color: var(--ink); }
.tracking-intro-banner-mobile { display: none; }
@media (max-width: 720px) {
  .tracking-intro-banner-desktop { display: none; }
  .tracking-intro-banner-mobile { display: inline; }
}

/* 강조 컬러(보라) CTA였다가, 카드마다 반복 노출되니 화면에서 너무 튄다는 피드백으로
   차분한 고스트 버튼 톤으로 낮췄다 — 채도 있는 브랜드 컬러 대신 사이트 기본 무채색
   토큰(hairline/canvas-soft/ink-mute)만 사용. */
.save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-kr);
  font-weight: 500;
  font-size: 13.5px;
  background: var(--canvas-soft);
  color: var(--ink-mute);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: var(--sp-sm) var(--sp-lg);
  cursor: pointer;
  transition: all 0.15s ease;
}
@media (hover: hover) { .save-btn:hover { background: var(--hairline); color: var(--ink-secondary); } }

/* 추적 중 상태는 "지금 추적하고 있다"는 걸 한눈에 알아볼 수 있어야 해서 브랜드 시그니처
   보라색을 채운다(미추적 상태는 위 무채색 고스트 유지). hover에서만 "추적 해제"를 보여준다.
   (hover: hover)만으로는 일부 모바일 브라우저가 탭을 hover로 오인해 텍스트가 눌러붙는
   문제가 재발해서(2026-08-18), 실제 마우스처럼 정밀 포인터를 쓰는 기기인지까지 같이
   확인하는 (pointer: fine)을 추가로 걸었다 — 터치 기기는 pointer: coarse라 걸러진다. */
.save-btn.saved {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  font-weight: 600;
}
.save-btn .save-btn-hover-label { display: none; }
@media (hover: hover) and (pointer: fine) {
  .save-btn.saved:hover { background: var(--primary-deep); color: var(--on-primary); border-color: var(--primary-deep); }
  .save-btn.saved:hover .save-btn-default-label { display: none; }
  .save-btn.saved:hover .save-btn-hover-label { display: inline; }
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
  line-height: 1;
  background: var(--canvas-soft);
  color: var(--ink-mute);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
}
.share-btn:hover { background: var(--hairline); color: var(--ink-secondary); }
.share-btn.copied { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
/* 데스크톱 기준(32px)이 모바일 터치엔 다소 작아 살짝 키운다. */
@media (max-width: 720px) {
  .share-btn { width: 42px; height: 42px; }
  .share-btn svg { width: 18px; height: 18px; }
}

/* ============================================================
   푸터 (footer-light)
   ============================================================ */
footer {
  border-top: 1px solid var(--hairline);
  padding: var(--sp-huge) 0;
  background: var(--canvas);
}
footer .wrap { display: flex; align-items: center; justify-content: center; gap: var(--sp-xl); flex-wrap: wrap; }
footer .foot-links { display: flex; align-items: center; gap: var(--sp-xl); flex-wrap: wrap; }
footer .foot-links a { font-family: var(--font-kr); font-size: 13px; color: var(--ink-secondary); }
footer .foot-links a:hover { color: var(--primary); }
footer .foot-copy {
  font-family: var(--font-latin);
  font-feature-settings: "tnum";
  font-size: 12px;
  color: var(--ink-mute);
}

/* ============================================================
   방법론 페이지
   ============================================================ */
/* padding 단축 속성으로 좌우를 0으로 못박으면, .wrap의 padding:0 24px(좌우 여백)와
   같은 요소(<main class="wrap method-body ...">)에서 나중에 나오는 이 규칙이
   동일 명시도라 좌우까지 통째로 이겨버린다 — archive/archive-more/tracking/
   topic/methodology 전부 좌우 여백이 0이 되는 버그였다. 위아래만 지정한다. */
.method-body { padding-top: var(--sp-huge); padding-bottom: var(--sp-huge); }
/* 지난 주요 이슈/추적 목록/분류 기준 PC 화면: 로고~제목 여백이 너무 넓다는 피드백으로
   기존 --sp-huge(64px)의 절반(32px)로 줄인다. min-width로 묶어 기존 모바일 오버라이드와
   순서 충돌 없이 분리한다. */
@media (min-width: 721px) {
  .archive-recent-page.method-body,
  .tracking-page.method-body,
  .methodology-page .method-body {
    padding-top: 32px;
  }
}
.method-body h1 {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.3px;
  margin: 0 0 var(--sp-sm);
  color: var(--ink);
}
.method-body .lede-sub { font-size: 14px; color: var(--ink-mute); margin-bottom: var(--sp-xl); }
.method-body .disclaimer {
  font-size: 13.5px;
  color: var(--ink-secondary);
  border-left: 3px solid var(--primary);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--canvas-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--sp-xl) 0 var(--sp-xxl);
  line-height: 1.7;
}
.method-body h2 {
  font-family: var(--font-kr);
  font-weight: 500;
  font-size: 18px;
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-xl);
  margin-top: var(--sp-xxl);
  color: var(--ink);
}
.method-body ul { font-size: 14px; color: var(--ink-secondary); line-height: 1.9; }
.method-body li { word-break: keep-all; overflow-wrap: break-word; }
.method-body .page-footnote {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.7;
  text-align: center;
  max-width: 560px;
  margin: var(--sp-huge) auto 0;
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--hairline);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.method-body p { font-size: 14px; color: var(--ink-secondary); line-height: 1.8; }

.table-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  margin: var(--sp-lg) 0 var(--sp-xxl);
}
.tier-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tier-table th, .tier-table td { text-align: left; padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--hairline); }
.tier-table thead th {
  font-family: var(--font-latin);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  background: var(--canvas-soft);
}
.tier-table tbody tr:last-child td { border-bottom: none; }
.tier-table td { color: var(--ink-secondary); background: var(--canvas); }
.tier-row td:first-child { border-left: 4px solid transparent; }
.tier-row.prog td:first-child { border-left-color: var(--spec-prog); }
.tier-row.cprog td:first-child { border-left-color: var(--spec-cprog); }
.tier-row.center td:first-child { border-left-color: var(--spec-center); }
.tier-row.ccons td:first-child { border-left-color: var(--spec-ccons); }
.tier-row.cons td:first-child { border-left-color: var(--spec-cons); }
.tier-chip { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); font-size: 14.5px; }
.tier-chip .dot { width: 9px; height: 9px; border-radius: 50%; }

/* 5단계 분류 타임라인 (methodology.html "5단계 분류 및 대표 매체") */
.spectrum-hero { border-top: none; }
.spectrum-hero h2 {
  text-align: center;
  font-weight: 700;
  margin-bottom: var(--sp-xs);
}
.spectrum-summary-card { display: block; }
.spectrum-summary-logo { display: none; }
.spectrum-hero .spectrum-hero-sub {
  margin: 0 0 var(--sp-xl);
  font-size: 14px;
  color: var(--ink-mute);
  text-align: center;
}
.spectrum-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-lg);
  margin: var(--sp-xl) 0 0;
}
.spectrum-track-line {
  position: absolute;
  top: 8px;
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--spec-prog), var(--spec-cprog), var(--spec-center), var(--spec-ccons), var(--spec-cons));
}
.spectrum-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  text-align: center;
}
.spectrum-marker { display: flex; }
.spectrum-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
}
.spectrum-node-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
}
.spectrum-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--canvas);
  box-shadow: 0 0 0 1px var(--hairline);
  flex: 0 0 auto;
}
.spectrum-node.prog  .spectrum-dot { background: var(--spec-prog); }
.spectrum-node.cprog .spectrum-dot { background: var(--spec-cprog); }
.spectrum-node.center .spectrum-dot { background: var(--spec-center); }
.spectrum-node.ccons .spectrum-dot { background: var(--spec-ccons); }
.spectrum-node.cons  .spectrum-dot { background: var(--spec-cons); }
.spectrum-pill {
  display: inline-block;
  min-width: 74px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 13px;
  color: var(--on-primary);
  text-align: center;
}
.spectrum-node.prog  .spectrum-pill { background: var(--spec-prog); }
.spectrum-node.cprog .spectrum-pill { background: var(--spec-cprog); }
.spectrum-node.center .spectrum-pill { background: var(--spec-center); }
.spectrum-node.ccons .spectrum-pill { background: var(--spec-ccons); }
.spectrum-node.cons  .spectrum-pill { background: var(--spec-cons); }
.spectrum-node .spectrum-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-secondary);
  font-weight: 500;
  line-height: 1.5;
}
/* 줄바꿈 지점을 PC/모바일 폭에 맞게 따로 지정하기 위한 반응형 <br> 스위치 (h1, .spectrum-desc, .spectrum-hero-sub 공용) */
.method-body .break-mobile { display: none; }
.spectrum-outlets {
  list-style: none;
  margin: var(--sp-xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.spectrum-outlets li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 5px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  width: 100px;
  max-width: 100%;
}
.spectrum-outlets img { flex-shrink: 0; border-radius: 3px; }
/* 중도는 매체가 6개라 세로로 길어지는 걸 막기 위해 2열 x 3행으로 배치 */
.spectrum-outlets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  justify-items: center;
}
@media (max-width: 720px) {
  /* PC는 "언론사 스펙트럼 분류 기준" 한 줄, 모바일은 "언론사 스펙트럼" / "분류 기준" 2줄 */
  /* 로고~제목 여백이 데스크톱 값(--sp-huge) 그대로라 모바일에서 헐렁해 보인다 — 다른 탭과 동일하게 좁힌다 */
  .methodology-page .method-body { padding-top: 8px; }
  /* 세로 타임라인 — 5개 노드를 박스로 나누는 대신 좌측 세로선 하나로 이어서 비교.
     설명글(.spectrum-hero-sub)만 순서상 트랙 뒤(보수 밑)로 옮긴다. */
  .spectrum-hero { display: flex; flex-direction: column; }
  .spectrum-hero h2 { order: 1; }
  .spectrum-track { order: 2; }
  .spectrum-summary-card { order: 3; }
  /* 설명글 밑 다음 섹션(매체 선정 기준) 구분선까지 간격이 늘어져 보여 절반으로 좁힌다 */
  .spectrum-hero + h2 { margin-top: var(--sp-lg); }

  .spectrum-track { grid-template-columns: 1fr; gap: 0; margin-top: var(--sp-lg); }
  .spectrum-track-line { display: none; }
  .spectrum-node {
    flex-direction: row;
    align-items: stretch;
    text-align: left;
    gap: 0;
  }
  /* 세로선·점 마커 대신 카드 좌측 테두리 색으로 성향 표시 — 추적목록 카드(.tracking-card)와 동일한 방식.
     마커가 차지하던 폭(16px + margin 12px)만큼 카드가 넓어진다. */
  .spectrum-marker { display: none; }

  /* 카드 사이 간격은 margin으로 (이전엔 마커 높이 맞춤용이었지만 마커 삭제 후에도 그대로 유효) */
  .spectrum-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    margin: 6px 0;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-left: 3px solid transparent;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: 10px 12px;
  }
  .spectrum-node.prog   .spectrum-card { border-left-color: var(--spec-prog); }
  .spectrum-node.cprog  .spectrum-card { border-left-color: var(--spec-cprog); }
  .spectrum-node.center .spectrum-card { border-left-color: var(--spec-center); }
  .spectrum-node.ccons  .spectrum-card { border-left-color: var(--spec-ccons); }
  .spectrum-node.cons   .spectrum-card { border-left-color: var(--spec-cons); }
  /* 왼쪽: 성향 태그 + 2줄 설명. 고정폭으로 언론사 소박스 쪽에 나머지 폭을 다 내준다 */
  .spectrum-node-body {
    flex: 0 0 108px;
    width: 108px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .spectrum-desc {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.35;
  }
  .method-body .break-mobile { display: inline; }
  .method-body .break-desktop { display: none; }
  /* 오른쪽: 언론사 소박스 — 3열 그리드로 카드 우측 끝까지 꽉 채운다 (3개짜리·6개짜리 공통) */
  .spectrum-outlets,
  .spectrum-outlets-grid {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: stretch;
    width: auto;
    margin: 0;
    gap: 4px;
  }
  .spectrum-outlets li { width: auto; }

  /* 중도(2행×3열)의 박스 2개 + 행간격이 나머지 4개 성향(1행×3열) 박스 높이와 정확히 맞도록
     둘 다 고정 height로 잡는다: 26*2 + 6(행간격) = 58 */
  .spectrum-outlets-tiles li {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: 58px;
    padding: 0 2px;
    font-size: 10px;
    text-align: center;
  }
  .spectrum-outlets-tiles img { width: 27px; height: 27px; border-radius: 6px; }

  .spectrum-outlets-grid {
    row-gap: 6px;
  }
  .spectrum-outlets-grid li {
    gap: 4px;
    height: 26px;
    padding: 0 6px;
    font-size: 10px;
    white-space: nowrap;
  }
  .spectrum-outlets-grid img { width: 15px; height: 15px; flex-shrink: 0; }

  .spectrum-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: var(--sp-xl) 0 0;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: 14px 16px;
  }
  .spectrum-summary-logo { display: block; flex: 0 0 auto; width: 32px; height: 32px; }
  .spectrum-hero .spectrum-hero-sub {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* methodology.html 전용 — 다른 페이지도 공유하는 .method-body 기본값보다 살짝 키움 */
/* 뷰포트 폭에 비례해 줄어드는 폰트 크기 + nowrap으로, 좁은 화면에서도 항상 한 줄 유지 (34px는 데스크톱 상한) */
.methodology-page .method-body h1 { white-space: nowrap; font-size: min(7vw, 34px); }
.methodology-page .method-body h2 { font-size: 19px; }
.methodology-page .method-body .spectrum-hero h2 { font-size: 24px; }
.methodology-page .method-body p,
.methodology-page .method-body ul { font-size: 15px; }
.methodology-page .method-body .page-footnote { font-size: 12px; }
.methodology-page .method-body .spectrum-hero-sub { font-size: 14px; }
.methodology-page .method-body .spectrum-desc { font-size: 12.5px; }
@media (max-width: 720px) {
  .methodology-page .method-body .spectrum-desc { font-size: 10.5px; line-height: 1.35; }
  .methodology-page .method-body .spectrum-hero-sub { font-size: 12.5px; }
  /* 매체 선정 기준 등 목록(main 바로 아래 ul만) — 좌측 불릿 여백 없애고, 타이틀/본문을 줄바꿈으로 완전히
     분리 (콜론 제거). 자손결합자로 스코프를 좁혀 spectrum-outlets(언론사 박스) 안쪽 ul/li는 건드리지 않는다 —
     이 규칙이 하위 li에도 걸려 flex-direction:column·margin-bottom이 새어 들어가면서 5가지 관점 표의
     언론사 박스 정렬이 깨졌던 버그가 있었다. */
  .methodology-page .method-body > ul { padding-left: 0; }
  .methodology-page .method-body > ul > li {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--sp-md);
  }
  .methodology-page .method-body li:last-child { margin-bottom: 0; }
  .methodology-page .method-body li .li-colon { display: none; }
  .methodology-page .method-body li .li-body { display: block; }
}

/* ============================================================
   원문 모아보기 (articles.html)
   ============================================================ */
.back-link {
  display: inline-block;
  font-size: 13.5px;
  color: var(--ink-mute);
  margin-bottom: var(--sp-lg);
}
.back-link:hover { color: var(--ink); }
.articles-summary {
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.75;
  margin: var(--sp-md) 0 var(--sp-xxl);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.article-group { margin-bottom: var(--sp-xxl); }
.article-group-head {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.article-group-head .count { font-family: var(--font-latin); font-feature-settings: "tnum"; color: var(--ink-mute); font-size: 13.5px; }
.article-list { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); }
.article-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}
.article-row:last-child { border-bottom: none; }
.article-row:hover { background: var(--canvas-soft); }
.article-row .outlet-name { flex-shrink: 0; width: 84px; }
.article-row .article-title { font-family: var(--font-kr); font-size: 14px; color: var(--ink); line-height: 1.5; }
.not-found { font-size: 14px; color: var(--ink-secondary); padding: var(--sp-xxl) 0; }

/* ============================================================
   추적 목록 (tracking.html)
   ============================================================ */
.tracking-list-head { display: flex; align-items: baseline; gap: var(--sp-sm); flex-wrap: wrap; margin-bottom: 2px; }
.tracking-list-head h1 { margin: 0; word-break: keep-all; }
/* 2026-08-09: 뱃지(알약) 배경을 빼고 지난 이슈의 .issue-count-badge와 동일하게
   글자색만 보라색으로 — 헤딩과 나란히 baseline 정렬되는 순수 텍스트로 통일. */
.tracking-count-badge {
  font-family: var(--font-kr);
  font-size: 34px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

p.tracking-page-lede { font-size: 17px; color: var(--ink-secondary); line-height: 1.7; margin: 0 0 var(--sp-xl); max-width: 640px; }

@media (max-width: 720px) {
  /* 34px 제목 + 34px 건수가 한 줄에서 부딪히면(word-break:keep-all 없이는) 글자
     중간이 잘려 보인다 — 제목/건수 폰트를 줄이고, 설명 문단은 아예 빼서 공간을
     아낀다(카드까지의 상단 여백도 같이 좁힌다). */
  .tracking-page.method-body { padding-top: 8px; }
  .tracking-list-head { margin-bottom: var(--sp-sm); }
  .tracking-list-head h1 { font-size: 24px; }
  .tracking-count-badge { font-size: 24px; }
  .tracking-page-lede { display: none; }

  /* 제목 행(tracking-card-body)이 D+뱃지·⋯메뉴(tracking-card-actions)와 한 행 폭을
     다투면 제목 쪽 공간이 좁아진다 — 오늘의 이슈 카드와 동일하게 세로로 쌓아서
     제목이 카드 폭 전체를 쓰게 한다. */
  .tracking-card-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .tracking-card-actions { justify-content: space-between; }
}

.tracking-list { display: flex; flex-direction: column; gap: var(--sp-md); margin-bottom: var(--sp-xxl); }
.tracking-card {
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-left: 3px solid transparent;
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.tracking-card:hover { border-color: var(--primary-bg-subdued); box-shadow: var(--shadow-2); }
/* 카드 왼쪽 세로선을 상태 색과 맞춘다 — .tracking-status와 동일한 팔레트. */
.tracking-card.good { border-left-color: #16a34a; }
.tracking-card.warn { border-left-color: #d97706; }
.tracking-card.stale { border-left-color: var(--ink-mute); opacity: 0.75; }
.tracking-card.stale:hover { opacity: 1; }
.tracking-card.pending { border-left-color: var(--primary); }

/* 2026-08-09: 집계 대기 안내(구분선 포함)가 좌측 칸(tracking-card-body) 안에 있으면
   구분선이 카드 우측 끝(D+뱃지·⋯메뉴 열)까지 못 이어진다 — 좌측 칸+우측 열을 한 행으로
   묶고, 대기 안내는 그 행 밖(.tracking-card의 직계 자식)으로 빼서 카드 전체 너비를 쓰게 함. */
.tracking-card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-md); }

/* 2026-08-07: "원문 N건 보기"가 topic.html이 아니라 articles.html로 가는 별도 링크라
   카드 전체를 감싸던 <a>(tracking-card-main) 안에 넣을 수 없어(앵커 중첩 무효) 형제로
   뺐다 — 그 둘을 묶어서 우측 열(D+뱃지·⋯메뉴)과 나란한 2단 레이아웃을 유지하는 래퍼. */
.tracking-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tracking-card-main { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.tracking-card-top { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.tracking-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-family: var(--font-kr);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.tracking-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tracking-status.good { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, white); }
.tracking-status.good .tracking-status-dot { background: #16a34a; animation: tracking-pulse 1.6s ease-in-out infinite; }
.tracking-status.warn { color: #b45309; background: color-mix(in srgb, #d97706 12%, white); }
.tracking-status.warn .tracking-status-dot { background: #d97706; }
.tracking-status.stale { color: var(--ink-mute); background: var(--canvas-soft); }
.tracking-status.stale .tracking-status-dot { background: var(--ink-mute); }
.tracking-status.pending { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, white); }
.tracking-status.pending .tracking-status-dot { background: var(--primary); }
@keyframes tracking-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.tracking-since { font-family: var(--font-kr); font-size: 12px; color: var(--ink-mute); }
/* .method-body h2의 범용 border-top/padding-top/margin-top을 밀어내야 해서
   (같은 specificity면 .method-body h2가 나중에 나와 이김) 조상 클래스까지 붙인다. */
.tracking-card .tracking-card-title {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
  border-top: none;
  padding-top: 0;
  word-break: keep-all;
  transition: color 0.15s ease;
}
.tracking-card:hover .tracking-card-title { color: var(--primary); }
.tracking-report-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-kr);
  font-size: 13px;
  color: var(--ink-mute);
}
.tracking-pending-notice {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-kr);
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

.tracking-card-actions { display: flex; align-items: center; gap: var(--sp-sm); flex-shrink: 0; }
.tracking-day-badge {
  font-family: var(--font-latin);
  font-feature-settings: "tnum";
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-secondary);
  background: var(--canvas-soft);
  padding: 4px 10px;
  border-radius: var(--r-md);
}
.tracking-more { position: relative; }
.tracking-more-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--ink-mute);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tracking-more-btn:hover { background: var(--canvas-soft); color: var(--ink-secondary); }
.tracking-more-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  min-width: 110px;
  overflow: hidden;
  z-index: 5;
}
.tracking-more.open .tracking-more-menu { display: block; }
.tracking-more-item {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--sp-sm) var(--sp-md);
  border: none;
  background: none;
  font-family: var(--font-kr);
  font-size: 13px;
  color: var(--ink-secondary);
  cursor: pointer;
}
.tracking-more-item:hover { background: var(--canvas-soft); color: var(--ink); }
.tracking-more-item[data-untrack]:hover { background: color-mix(in srgb, var(--ruby) 10%, white); color: var(--ruby); }
.tracking-more-item[data-share] { border-top: 1px solid var(--hairline); }

/* 좁은 화면에서는 카드를 완전히 다른 순서로 배치한다. 래퍼 div들을 display:contents로
   지워서 그 자손들을 전부 .tracking-card의 직계 grid-item으로 끌어올린 다음
   grid-area로 재배치한다(DOM 구조/데스크톱 레이아웃은 그대로 유지, 모바일에서만
   시각적으로 재배열).
   2026-08-11 피드백: 상태·보도일 알약이 ⋯메뉴와 폭을 다투면서 가끔 두 번째 줄로
   밀렸던 걸 고친다 — top 행을 카드 전체 폭(2열)으로 넓히고, ⋯메뉴는 대신
   dayinfo(+집계 대기 안내가 있는 카드는 notice까지) 행 우측, D+뱃지와 같은 높이로
   옮긴다. "menu" 영역이 dayinfo~notice 두 행에 걸치게 해서, notice가 없는 카드는
   자동으로 dayinfo 한 줄 높이만 차지하고 notice가 있는 카드(집계 대기 중)는 그
   행까지 포함한 높이로 늘어난다 — 카드 종류별로 다른 CSS를 따로 안 써도 됨. */
@media (max-width: 720px) {
  .tracking-card-row,
  .tracking-card-body,
  .tracking-card-main,
  .tracking-card-actions {
    display: contents;
  }
  .tracking-card {
    display: grid;
    grid-template-columns: 1fr auto;
    /* notice 행이 없는(집계 대기 중이 아닌) 카드는 애초에 3행짜리 템플릿을 써서
       "menu"가 빈 notice 행까지 걸치며 카드 하단에 여백을 만드는 걸 막는다 —
       ⋯메뉴가 없는 행까지 걸치면 grid가 그 행 몫의 높이를 조금 더 확보해버려서
       (2026-08-11 피드백: "박스 하단 여백이 길어 보임") 아래 .pending 전용
       규칙에서만 4행 템플릿으로 늘린다. */
    grid-template-areas:
      "top     top"
      "title   title"
      "dayinfo menu";
    row-gap: 4px;
    column-gap: var(--sp-sm);
    /* 2026-08-11 재피드백: 그래도 하단이 커 보인다고 해서 모바일만 아래쪽 패딩을
       더 줄인다(다른 방향은 원래 값 유지). */
    padding-bottom: 8px;
  }
  .tracking-card.pending {
    grid-template-areas:
      "top     top"
      "title   title"
      "dayinfo menu"
      "notice  menu";
  }
  /* 2026-08-11 재피드백: 보도일 알약은 상태 알약 바로 옆이 아니라 항상 박스
     최상단 우측 모서리에 고정 — space-between으로 양 끝에 붙인다. */
  .tracking-card-top { grid-area: top; flex-wrap: nowrap; justify-content: space-between; }
  .tracking-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tracking-report-date { flex-shrink: 0; }
  /* 2026-08-11 재피드백: dayinfo+notice 두 행 "중앙"에 놓으면 집계 대기 카드에서
     추적중 줄과 수집예정 줄 사이 경계에 걸쳐 보인다 — 대신 맨 아래로 붙여서, 일반
     카드는 dayinfo 행과, 집계 대기 카드는 notice(수집 예정) 행과 높이를 맞춘다. */
  .tracking-more { grid-area: menu; align-self: end; }
  .tracking-card .tracking-card-title { grid-area: title; }
  .tracking-day-badge {
    grid-area: dayinfo;
    background: none;
    padding: 0;
    border-radius: 0;
    font-family: var(--font-kr);
    font-weight: 400;
    font-size: 13px;
    color: var(--ink-mute);
    /* 2026-08-11 재피드백: 제목↔D+뱃지 간격만 20% 더(row-gap 4px + 0.8px = 4.8px) —
       다른 행 간격(top↔title, dayinfo↔notice)은 4px 그대로 둔다. */
    margin-top: 0.8px;
  }
  .tracking-pending-notice { grid-area: notice; }
}

/* 2026-08-07: 휴지통 — 구독자 0명이 된 시점부터 15일간 데이터가 보존되는 걸 그대로
   유저 화면에 노출해서 실수로 해제한 것도 복구 가능하게 한다(migration_9 참고).
   카드는 사용자 제공 목업대로: 상태배지+헤드라인, 해제일/삭제까지 2단 컬럼,
   복구 버튼 — 요소 사이 간격을 넓게 잡아 각자 존재감이 드러나게 한다. */
.tracking-trash { margin-top: var(--sp-xxl); margin-bottom: var(--sp-xxl); }
.tracking-trash-head { display: flex; align-items: center; gap: var(--sp-sm); }
/* 이모지 글리프는 라틴/한글 텍스트와 실제 그려지는 위치(베이스라인)가 달라서
   align-items:center만으로는 육안상 살짝 어긋나 보인다 — 미세 보정. */
.tracking-trash-icon { font-size: 22px; line-height: 1; transform: translateY(-1px); }
/* .method-body h2의 범용 border-top/padding-top/margin-top(명시도 0,1,1)이
   .tracking-trash-title(0,1,0)보다 이겨서 덮어쓰고 있었다 — 이 세션에서 여러 번
   재발한 패턴(trend-chart-title 등과 동일). 조상 클래스를 붙여 0,2,0으로 이긴다. */
.tracking-trash-head .tracking-trash-title {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin: 0;
  line-height: 1;
  border-top: none;
  padding-top: 0;
}
/* 2026-08-09: 뱃지 배경을 빼고 지난 이슈의 .issue-count-badge와 동일하게 글자색만
   보라색으로 — .tracking-trash-title과 같은 크기로 맞춰서 나란히 놓는다. */
.tracking-trash-badge {
  font-family: var(--font-kr);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
.tracking-trash-desc { font-family: var(--font-kr); font-size: 13px; color: var(--ink-mute); margin: var(--sp-md) 0 0; }

/* 이슈 추적 작동원리(.tracking-explainer)와 동일한 0fr→1fr 아코디언 — 처음엔
   접혀 있다가 헤더를 누르면 펼쳐진다. */
.tracking-trash-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.tracking-trash-caret { font-size: 12px; color: var(--ink-mute); line-height: 1; transition: transform 0.2s ease; }
.tracking-trash.expanded .tracking-trash-caret { transform: rotate(180deg); }
.tracking-trash-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}
.tracking-trash-body-inner { overflow: hidden; min-height: 0; }
.tracking-trash-body-pad { padding-top: var(--sp-md); }
.tracking-trash.expanded .tracking-trash-body { grid-template-rows: 1fr; opacity: 1; }

.trash-list { display: flex; flex-direction: column; gap: var(--sp-sm); }
.trash-card {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-md) var(--sp-lg);
}
.trash-card-main { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* 데스크톱에서는 두 meta-col을 감싸는 존재감 없는 래퍼 — 안의 두 칸이 예전처럼
   나란히 놓이도록 gap만 그대로 넘겨준다(모바일 전용 그리드 재배치를 위해 감쌌음). */
.trash-card-meta-row { display: flex; align-items: center; gap: var(--sp-xl); }
.trash-card-title {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-card-meta-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sp-xl);
  border-left: 1px solid var(--hairline);
}
.trash-card-meta-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-kr);
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.trash-card-meta-value {
  font-family: var(--font-latin), var(--font-kr);
  font-feature-settings: "tnum";
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-mute);
}
.trash-card-days-left { color: #d97706; }
.trash-restore-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-kr);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, white);
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* 데스크톱 가로 한 줄(제목 | 해제일 | 삭제까지 | 복구버튼)은 375px에 다 안 들어가서
   제목과 복구 버튼이 밀려나 안 보이는 상태가 됐었다 — 제목+복구 버튼을 위 행,
   두 meta-col을 아래 행으로 나눠 쌓는다. 구분선은 진하지 않게 옅은 색만 쓴다. */
@media (max-width: 720px) {
  .trash-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title restore" "meta meta";
    align-items: center;
    gap: 8px 12px;
    padding: var(--sp-md);
  }
  .trash-card-main { grid-area: title; min-width: 0; }
  .trash-card-title { white-space: normal; word-break: keep-all; }
  .trash-restore-btn { grid-area: restore; padding: 8px 14px; font-size: 13px; }
  .trash-card-meta-row {
    grid-area: meta;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
  }
  /* 라벨/값을 한 줄로 붙였더니 좁은 칸에서 값 텍스트가 글자 단위로 세로 줄바꿈
     되는 문제가 있었다 — 데스크톱처럼 위아래 2줄 스택으로 되돌리고, 가운데 정렬만
     추가한다. 글자 크기는 줄여둔 값(12px) 그대로 유지. */
  .trash-card-meta-col {
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    border-left: 1px dashed var(--hairline);
  }
  .trash-card-meta-col:first-child { padding-left: 0; border-left: none; }
  .trash-card-meta-value { font-size: 12px; font-weight: 600; }

  /* "최근 추적 해제 N건" 헤더가 제목(16px)보다 커서 카드보다 눈에 띈다. */
  .tracking-trash-head .tracking-trash-title,
  .tracking-trash-badge {
    font-size: 15px;
  }
}
.trash-restore-btn:hover { background: color-mix(in srgb, var(--primary) 18%, white); }
.trash-restore-btn:disabled { opacity: 0.6; cursor: default; }

.empty-state { font-size: 14px; color: var(--ink-secondary); padding: var(--sp-xxl) 0; line-height: 1.8; }

/* 2026-08-09: 추적 목록이 비었을 때 텍스트 한 줄 대신 아이콘+안내+CTA 박스로 —
   사용자 제공 목업 그대로. */
.tracking-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-sm);
  padding: 36px var(--sp-xl);
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.tracking-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-xs);
}
.tracking-empty-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; }
.tracking-empty-desc { font-size: 14px; color: var(--ink-secondary); line-height: 1.6; margin: 0; }
.tracking-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-sm);
  padding: 12px 24px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-kr);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.tracking-empty-btn:hover { background: var(--primary); }

/* ============================================================
   추적하기 작동 원리 설명 (tracking.html 하단, 2026-08-09 사용자 목업 반영)
   ============================================================ */
/* 2026-08-09: 카드가 많은 페이지라 둥근 테두리 박스는 답답해 보인다는 피드백 —
   박스를 없애고 위쪽 구분선만 남겨 독립된 도움말 섹션처럼 보이게 함(아래쪽은 페이지
   끝이라 선이 필요 없다는 피드백으로 제거, 위쪽은 구역 구분이 잘 보이게 더 진하게).
   '최근 추적 해제'와는 margin-top으로 충분히 띄운다. */
.tracking-explainer {
  border-top: 2px solid var(--hairline-input);
  margin-top: var(--sp-xxl);
}
.tracking-explainer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) 0;
  border: none;
  background: none;
  cursor: pointer;
}
.tracking-explainer-toggle:hover .tracking-explainer-title { color: var(--primary); }
.tracking-explainer-title { font-family: var(--font-kr); font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1; }
.tracking-explainer-caret { font-size: 12px; color: var(--ink-mute); line-height: 1; transition: transform 0.2s ease; }
.tracking-explainer.expanded .tracking-explainer-caret { transform: rotate(180deg); }
.tracking-explainer-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}
/* 2026-08-09: padding을 이 요소(overflow:hidden으로 접힘을 담당하는 clip 대상)에 직접
   주면 min-height:0을 줘도 padding 자체는 안 줄어들어서, 접힌 상태에서도 padding-bottom
   만큼(16px) 회색 여백이 남아있었다(호버 배경이 그 부분만 어색하게 남는 버그로 발견) —
   padding은 한 겹 더 안쪽(.tracking-explainer-body-pad)으로 옮기고 이 요소 자체는
   패딩 없이 진짜 0까지 접히게 한다. */
.tracking-explainer-body-inner { overflow: hidden; min-height: 0; }
.tracking-explainer-body-pad { padding: 0 0 var(--sp-lg); }
.tracking-explainer.expanded .tracking-explainer-body { grid-template-rows: 1fr; opacity: 1; }

.explainer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
  margin: 0;
}
@media (max-width: 720px) { .explainer-grid { grid-template-columns: 1fr; } }

/* 2026-08-09: pill 태그를 없애고 본문 중심 타이포그래피로, 카드 높이도 기존 대비
   ~80%로 컴팩트하게(아이콘/패딩/폰트 전부 축소) — 아이콘(왼쪽, 세로 중앙 정렬) +
   번호·제목/본문/주의문구(오른쪽) 2단 배치는 유지. */
.explainer-card {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--sp-md);
}
.explainer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: var(--shadow-1);
}
.explainer-icon img { width: 42px; height: 42px; object-fit: contain; }
.explainer-card-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.explainer-card-head { display: flex; align-items: center; gap: 7px; }
.explainer-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 12px;
}
.explainer-card h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; }
.explainer-card p { font-size: 14px; color: var(--ink-secondary); line-height: 1.55; margin: 0; }

/* 2026-08-09: pill 대신 본문 바로 아래 줄(<br>)에 자연스럽게 붙는 보조 문구 — 본문(위)
   보다 한 단계 작고 옅은 색으로 위계만 분리, 별도 문단 간격은 안 둔다(붙어 보이는 게
   의도). 4번(15일 후 영구 삭제)만 실수로 데이터를 잃는 걸 막는 게 목적이라 붉은 계열
   유지 — 시선을 과하게 뺏지 않도록 크기/굵기는 다른 보조 문구와 동일하게 차분히. */
.explainer-note { font-size: 13px; color: var(--ink-mute); }
.explainer-note.explainer-note-danger { color: var(--ruby); }

/* ============================================================
   추적 타임라인 (topic.html)
   ============================================================ */
/* 로고 바로 아래라 기본 .method-body 여백(64px)이 과하다 — 목록 페이지 카드로
   바로 이어지는 느낌을 주려고 확 줄인다(2026-08-11 피드백으로 16px에서 30% 증량). */
.topic-page.method-body { padding-top: 21px; }

/* 상태/보도일/추적일 알약 묶음(왼쪽)과 공유·추적 버튼(오른쪽)을 한 줄에 양끝
   정렬 — 뒤로가기 링크는 상단 네비게이션과 중복이라 뺐다. 제목과의 간격은
   2026-08-11 피드백으로 16px에서 30% 축소. */
.topic-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: 11px;
}
/* 알약들(상태·보도일·추적일 — 모바일은 보도일+추적일이 하나로 합쳐진다)이 각자
   다른 font-size/padding을 쓰던 걸 하나로 맞춰서 세로 길이를 통일한다. */
.topic-top-row .tracking-status,
.topic-top-row .tracking-since,
.topic-top-row .tracking-day-badge,
.topic-top-row-mobile .tracking-status,
.topic-top-row-mobile .tracking-since {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
}
.topic-top-actions { display: flex; align-items: center; gap: var(--sp-sm); flex-shrink: 0; }
/* 알약 행과 같은 높이(위 font-size 13px + padding 4px 10px 기준 실측 27.5px)로
   버튼 두 개도 고정 height로 맞춘다 — border(1px)가 있는 save-btn은 padding만으론
   같은 값이 나오지 않아서 height를 직접 지정한다. */
.topic-top-actions .share-btn { width: 27.5px; height: 27.5px; }
.topic-top-actions .share-btn svg { width: 13px; height: 13px; }
.topic-top-actions .save-btn { height: 27.5px; padding: 0 10px; font-size: 13px; }
/* 추적 중 버튼이 진한 브랜드 보라 배경이라 시선을 너무 가져간다는 피드백 —
   같은 브랜드 컬러를 옅은 톤(tracking-status.pending과 동일한 패턴)으로 낮췄다. */
.topic-top-actions .save-btn.saved {
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, white);
}
@media (hover: hover) {
  .topic-top-actions .save-btn.saved:hover {
    background: color-mix(in srgb, var(--primary) 20%, white);
    border-color: var(--primary);
  }
}

/* 2026-08-11: 모바일 폭에서는 데스크톱의 알약 3개 + 버튼 2개가 한 줄에 다 안 들어가
   매번 줄바꿈되던 걸 전용 레이아웃으로 교체 — 보도일+추적일 알약을 하나로 합치고,
   공유/추적해제는 그 알약 2개 높이에 맞춘 세로 ⋮ 메뉴 하나로 접는다. 두 레이아웃
   다 항상 DOM에 있고 미디어쿼리로 하나만 보이게 전환한다(다른 페이지의
   -desktop/-mobile 이중 렌더링 관례와 동일). */
.topic-top-row-mobile { display: none; }
@media (max-width: 720px) {
  .topic-top-row.has-mobile-alt { display: none; }
  .topic-top-row-mobile {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--sp-sm);
    margin-bottom: 11px;
  }
}
.topic-mobile-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* .tracking-more 클래스를 목록 카드(tracking.js)와 공유하는데, 그쪽 모바일 그리드
   규칙(align-self:start)이 여기도 걸려서 stretch를 덮어쓴다 — 명시적으로 되돌린다. */
.topic-more-mobile { position: relative; flex-shrink: 0; align-self: stretch; }
.topic-more-mobile .tracking-more-btn {
  width: 36px;
  height: 100%;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--canvas-soft);
}
.topic-more-mobile .tracking-more-btn:hover { background: var(--hairline); }
/* 세로 ⋮ 버튼이 알약 2개 높이(약 60px)만큼 커진 만큼, 유니코드 "⋮" 한 글자로는
   점이 너무 작고 다닥다닥 붙어 보인다 — 점 3개를 직접 그려서 크기·간격을 버튼
   크기에 맞게 키운다. */
.topic-more-mobile .kebab-dot {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--ink-mute);
}

.topic-header { margin-bottom: var(--sp-xl); }
/* "OO월 OO일 보도"가 무채색 무배경 텍스트라 양옆의 색 있는 배지 사이에서 묻혀
   안 보인다는 피드백(2026-08-05) — 형제 배지들과 같은 칩 형태를 줘서 존재감을
   맞췄다. 목록 페이지(tracking.js)의 같은 클래스는 카드마다 반복 노출돼 칩이 여러 개
   겹치면 과할 수 있어 이 상세 페이지(.topic-top-row/.topic-top-row-mobile)에만
   스코프한다. */
.topic-top-row .tracking-since,
.topic-top-row-mobile .tracking-since {
  font-weight: 600;
  color: var(--ink-secondary);
  background: var(--canvas-soft);
}
.topic-header-title-row { display: flex; align-items: center; gap: var(--sp-md); }
.topic-header-title-row h1 { margin: 0; font-size: 26px; word-break: keep-all; }
.topic-header .articles-summary { margin: var(--sp-sm) 0 var(--sp-lg); }

/* 2026-08-07: 구독자 0명 → 매칭 일시중단 → 복구 유예기간(휴지통) 동안 생긴 수집
   공백을 안내하는 배너. tracking-status.warn과 같은 톤(색상은 굳이 새로 안 만듦). */
/* .topic-gap-notice가 <p>라서 .method-body p(명시도 0,1,1)가 .topic-gap-notice
   단독(0,1,0)을 이긴다 — 다른 곳과 같은 패턴으로 조상 클래스를 붙여 이긴다. */
.topic-page .topic-gap-notice {
  display: inline-block;
  font-family: var(--font-kr);
  font-size: 14px;
  font-weight: 500;
  color: #b45309;
  background: color-mix(in srgb, #d97706 10%, white);
  border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
  margin: 0 0 var(--sp-lg);
  white-space: nowrap;
}
/* 2026-08-11: 컨테이너 쿼리 단위(cqi)로 폭 비례 계산을 시도했는데, 계수를 폰트가
   아직 안 걸린 폴백 폰트 기준으로 잡아서 실제 폰트(Noto Sans KR)는 글자 폭이 달라
   끝까지 안 찼다 — 폰트마다 글자 폭이 다른 문제는 CSS 계산만으로는 못 맞추고 실측이
   필요해서, JS(fitGapNoticeWidth)가 렌더링 폭을 직접 재서 정확히 맞춘다(아래
   font-size는 JS 실행 전 잠깐 보이는 값일 뿐인 fallback). PC는 문장 길이만큼만
   박스가 감싸도록 inline-block(위 기본값)을 쓰고, 모바일만 폭을 꽉 채운다. */
@media (max-width: 720px) {
  .topic-page .topic-gap-notice {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
    padding: var(--sp-sm) 10px;
  }
}
.day-log { display: flex; flex-direction: column; gap: var(--sp-md); margin-top: var(--sp-lg); }

/* 날짜별 집계가 아직 없을 때(추적 시작 첫날) — 텍스트 한 줄 대신 연한 박스 안에
   미래 데이터 뷰를 암시하는 차트 모양 스켈레톤을 배경 전체에 촘촘하게 깔고, 안내문
   (아이콘+제목+설명)을 그 위에 얹는다. 다른 페이지의 범용 .empty-state와는 별개 클래스.
   2026-08-05: 막대와 텍스트가 겹치지 않게 세로로 늘어놓았더니 박스가 쓸데없이 길어져서
   — 겹쳐도 되니(안내문이 위에 뜨면 됨) 다시 배경 레이어로 깔고 박스 높이를 줄였다. */
.topic-empty-state {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas-soft);
  border-radius: var(--r-lg);
  min-height: 108px;
  padding: var(--sp-lg);
}
.topic-empty-text { position: relative; z-index: 1; text-align: center; }
.topic-empty-icon { font-size: 22px; line-height: 1; margin-bottom: 4px; display: block; }
.topic-empty-title { font-family: var(--font-kr); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0; word-break: keep-all; }
.topic-empty-desc { font-family: var(--font-kr); font-size: 13px; color: var(--ink-mute); margin: 0; line-height: 1.6; word-break: keep-all; }
.topic-empty-skeleton {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0 var(--sp-lg);
  pointer-events: none;
}
.topic-empty-skeleton span { flex: 1; min-width: 0; border-radius: 2px 2px 0 0; background: var(--hairline); }
.topic-empty-skeleton span:nth-child(4n+1) { height: 30%; }
.topic-empty-skeleton span:nth-child(4n+2) { height: 55%; }
.topic-empty-skeleton span:nth-child(4n+3) { height: 40%; }
.topic-empty-skeleton span:nth-child(4n+4) { height: 70%; }
@media (max-width: 520px) { .topic-empty-skeleton { display: none; } }

/* 2026-08-07: 추이 차트 위에 총 누적/오늘/가장 많은 성향/최근 증감 4칸 요약 박스.
   진영색은 --spec-prog/center/cons 재사용, 증감 색만 이 박스 전용으로 새로 씀
   (증가=그린 계열, 감소=기존 에러 표시에 쓰던 --ruby 재사용 — 사이트 전역에서
   "부정적" 의미로 이미 쓰이던 색이라 새 색상을 안 늘리고 그대로 맞춤). */
.stats-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas-soft);
  box-shadow: var(--shadow-1);
  padding: var(--sp-xl) var(--sp-lg);
  margin-bottom: var(--sp-md);
}
.stats-summary-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 var(--sp-lg);
  border-left: 1px solid var(--hairline);
}
.stats-summary-item:first-child { border-left: none; padding-left: 0; }
.stats-summary-label { font-family: var(--font-kr); font-size: 14px; color: var(--ink-mute); }
.stats-summary-value {
  font-family: var(--font-latin), var(--font-kr);
  font-feature-settings: "tnum";
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  color: var(--ink);
}
.stats-summary-value.stats-dominant { gap: 4px; }
.stats-dominant-name { font-family: var(--font-kr); font-size: 17px; font-weight: 600; line-height: 1.2; }
.stats-dominant-pct { font-size: 34px; }
.stats-summary-value.stats-dominant.prog { color: var(--spec-prog); }
.stats-summary-value.stats-dominant.center { color: var(--spec-center); }
.stats-summary-value.stats-dominant.cons { color: var(--spec-cons); }
/* 2026-08-07: "누적 보도량"과 "금일 보도량"이 둘 다 같은 잉크색이라 밋밋하다는
   피드백 — "금일 보도량"만 포인트 컬러로 채우고 굵기도 한 단계 올려서 시선이
   먼저 가게 한다. 2026-08-11: 원래 --primary(브랜드 보라)가 바로 옆 "주요 보도
   성향"의 중도(--spec-center, 역시 보라)와 겹쳐 보인다는 피드백으로 톤을 다른
   계열(네이비 블루)로 교체. */
.stats-value-today { color: var(--shadow-blue); font-weight: 800; }
.stats-summary-value.stat-delta { flex-direction: row; align-items: center; gap: 6px; }
.stat-delta-icon { width: 28px; height: 28px; flex-shrink: 0; }
.stats-summary-value.stat-delta.up { color: #1a9e6b; }
/* 2026-08-07: 감소를 --ruby(빨강)로 표시하면 보수 성향 색(--spec-cons, 역시 빨강
   계열)과 헷갈린다는 피드백으로 앰버 계열로 교체했었으나, 2026-08-11 피드백으로
   다크 네이비(--ink)로 바꿨다가 "검정처럼 안 보인다"는 재피드백으로 사용자가 지정한
   브라운-모브 톤으로 다시 교체. */
.stats-summary-value.stat-delta.down { color: #6B5457; }
.stats-summary-value.stat-delta.flat { color: var(--ink-mute); }
@media (max-width: 640px) {
  .stats-summary { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-md); }
  .stats-summary-item:nth-child(3) { border-left: none; padding-left: 0; }
  /* 2x2로 좁아지면 "-3건" 같은 델타 값이 줄바꿈되던 걸 고정 — 폭이 좁아진 만큼
     숫자 크기도 같이 줄여서 한 줄 안에 들어가게 한다. */
  .stats-summary-item { padding: 0 var(--sp-md); }
  .stats-summary-label,
  .stats-summary-value,
  .stats-dominant-name,
  .stat-delta-text {
    white-space: nowrap;
  }
  .stats-summary-value { font-size: 26px; }
  .stats-dominant-pct { font-size: 26px; }
  .stat-delta-icon { width: 20px; height: 20px; }
}

/* 2026-08-05: 날짜별 카드만으로는 전체 추이가 한눈에 안 들어온다는 요청으로 상단에
   진영별 그룹 막대 + 총 보도량 라인을 겹친 콤보 차트를 추가(외부 차트 라이브러리 없이
   순수 SVG — 이 사이트는 spectrum-bar 등 기존 시각화도 전부 라이브러리 없이 직접
   그리는 관례라 그대로 맞췄다). 색상은 --spec-prog/center/cons를 그대로 재사용해서
   사이트 다른 곳의 진영색과 항상 일치한다.
   2026-08-07: 위/아래 2단 분리로 바꿨다가 다시 하나의 콤보 차트(이중 Y축)로 되돌림 —
   좌/우 축을 각자 대응 색(좌=막대 3색 혼합, 우=선 색인 --ink)으로 구분하고, 단위
   대신 축 이름 자체("성향별 보도수"/"총 보도수")를 축 맨 위에 작게 표기한다. */
.trend-chart-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas);
  box-shadow: var(--shadow-1);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-lg);
  --trend-total-color: #1b4f91;
}
.trend-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; margin-bottom: var(--sp-sm); }
/* topic.html의 <main>이 .method-body를 같이 써서 .method-body h2/.method-body p
   (specificity 0,1,1)가 아래 두 규칙(0,1,0)을 덮어쓰고 있었다 — HANDOFF에 이미 여러 번
   기록된 동일 패턴. 조상 클래스를 붙여 0,2,0으로 명시도를 올려서 이긴다. */
.trend-chart-head .trend-chart-title { font-family: var(--font-kr); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 2px; border-top: none; padding-top: 0; }
.trend-chart-head .trend-chart-hint { font-family: var(--font-kr); font-size: 14px; color: var(--ink-mute); margin: 0; }
/* 모바일은 탭-탭 상호작용(툴팁 미리보기 → 한 번 더 탭하면 이동)이라 데스크톱의
   "클릭하면 바로 이동합니다" 안내가 틀린 설명이 된다 — 문구를 기기별로 나눈다. */
.trend-chart-hint-mobile { display: none; }
@media (max-width: 720px) {
  .trend-chart-hint-desktop { display: none; }
  .trend-chart-hint-mobile { display: inline; }
  /* 범례에 이미 색으로 표기된 정보라 모바일에서는 중복 — 화면이 좁아 한 줄이라도
     아끼는 게 낫다. */
  .trend-chart-hint-static { display: none; }
}
.trend-legend { display: flex; align-items: center; gap: var(--sp-md); flex-wrap: wrap; font-family: var(--font-kr); font-size: 14px; color: var(--ink-secondary); }
.trend-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.trend-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.trend-legend-swatch.prog { background: var(--spec-prog); }
.trend-legend-swatch.center { background: var(--spec-center); }
.trend-legend-swatch.cons { background: var(--spec-cons); }
/* 2026-08-07: 총 보도수(선)와 우측 축 눈금을 같은 항목이라는 게 직관적으로 느껴지게
   검정 대신 네이비(#142B49)로 통일. 좌측 축(막대)은 다시 검정으로 되돌림 — 색으로
   좌/우를 구분하되 "총 보도수 하나"는 그래프 안에서 항상 같은 색으로 보이게 함. */
.trend-legend-line { width: 14px; height: 2px; border-radius: 1px; display: inline-block; background: var(--trend-total-color); }

/* 2026-08-05: 원래 날짜가 많아지면 막대가 얇아지지 않게 SVG를 100% 이상으로 넓히고
   overflow-x:auto로 가로 스크롤을 허용했는데, 툴팁이 우측 경계 근처에서 뜰 때마다
   그 스크롤 컨테이너가 반응해 마우스만 올려도 박스가 스크롤되는 게 있었다 — 툴팁
   (position:absolute)이 스크롤 컨테이너 자신의 콘텐츠 박스에 들어가 있어서 스크롤
   가능 영역 자체가 툴팁 위치에 따라 흔들렸던 게 원인. 2026-08-11 재요청으로 다시
   넣되, 이번엔 스크롤 전용 래퍼(.trend-chart-scroll)를 tooltip의 기준 요소
   (.trend-chart-wrap, position:relative)와 분리해서 같은 문제를 피한다 — 툴팁은
   항상 wrap 기준으로만 절대배치되고 scroll 컨테이너의 콘텐츠 박스와는 무관해진다. */
.trend-chart-wrap { position: relative; }
/* 날짜가 많아도 막대가 안 얇아지게 날짜당 고정 폭(110px)을 주고, 화면에 다 안 들어가는
   만큼은 가로 스크롤로 넘겨본다 — PC는 카드 폭 기준 대략 10일치, 모바일은 화면이 좁아
   같은 폭이면 3일치 정도가 한 화면에 보인다(초기 스크롤 위치는 topic.js의
   wireTrendChart가 최신 날짜 쪽으로 맞춘다). */
.trend-chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; cursor: grab; }
/* PC는 터치스크롤이 없어서 모바일처럼 손가락으로 못 끄니, 마우스 드래그로도 같은
   가로 스크롤이 되게 topic.js의 wireTrendChart가 이 클래스를 드래그 중에만 붙인다. */
.trend-chart-scroll.dragging { cursor: grabbing; user-select: none; }
.trend-chart { display: block; width: max(100%, calc(var(--trend-days, 10) * 110px)); height: 380px; }
@media (max-width: 720px) {
  .trend-chart { height: 300px; }
}
.trend-bar.prog { fill: var(--spec-prog); }
.trend-bar.center { fill: var(--spec-center); }
.trend-bar.cons { fill: var(--spec-cons); }
.trend-line { fill: none; stroke: var(--trend-total-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-dot { fill: var(--trend-total-color); stroke: var(--canvas); stroke-width: 1.5; }
.trend-grid-line { stroke: var(--hairline); stroke-width: 1; }
/* 2026-08-11 피드백: 사이트 다른 숫자 표시(.stats-summary-value, .tracking-day-badge
   등)와 같은 폰트 스택(--font-latin, --font-kr 순서)을 쓰지 않고 --font-latin
   단독이었던 게 다른 폰트처럼 보인 원인 — 맞추고, 기본 굵기(400)라 작은 크기에서
   흐릿해 보이던 것도 같이 올린다. */
.trend-grid-label {
  font-family: var(--font-latin), var(--font-kr);
  font-feature-settings: "tnum";
  font-weight: 600;
  font-size: 12px;
}
/* 좌측(막대) 축은 검정, 우측(선) 축은 .trend-line과 같은 네이비로 맞춰서 "총
   보도수"가 그래프 안에서 항상 같은 색으로 보이게 한다. */
.trend-grid-label-left { fill: var(--ink); }
.trend-grid-label-right { fill: var(--trend-total-color); }
.trend-x-label {
  font-family: var(--font-latin), var(--font-kr);
  font-feature-settings: "tnum";
  font-weight: 600;
  font-size: 14px;
  fill: var(--ink-secondary);
}
/* 2026-08-12 피드백: 모바일에서 총 보도수 선이 얇고 끝점이 작아 존재감이 없고,
   좌우 Y축 눈금과 날짜 라벨이 작아 뭉개져 보인다는 지적 — 두께/크기를 키운다.
   위쪽 기본 규칙과 명시도가 같으므로(0,1,0) 파일 순서상 반드시 뒤에 와야 이긴다. */
@media (max-width: 720px) {
  .trend-line { stroke-width: 3; }
  .trend-dot { r: 5; stroke-width: 2; }
  .trend-grid-label { font-size: 14px; }
  .trend-x-label { font-size: 16px; }
  /* 날짜가 1~2일뿐이면 점이 막대와 안 겹치게 이미 여백을 띄워두므로(topic.js의
     barTopY 보정) 대비용 흰 테두리가 불필요 — 군더더기 없이 깔끔하게 보이도록 뺀다. */
  .trend-chart[data-days="1"] .trend-dot,
  .trend-chart[data-days="2"] .trend-dot { stroke: none; }
}
.trend-hit { cursor: pointer; }
.trend-hit:hover { fill: color-mix(in srgb, var(--primary) 5%, transparent); }

.trend-tooltip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--font-kr);
  font-size: 12px;
  line-height: 1.6;
  box-shadow: var(--shadow-2);
  white-space: nowrap;
}
.trend-tooltip-date { font-weight: 700; margin-bottom: 3px; }
.trend-tooltip-row { display: flex; align-items: center; gap: 6px; }
.trend-tooltip-row b { margin-left: auto; padding-left: 10px; font-feature-settings: "tnum"; }
.trend-tooltip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.trend-tooltip-dot.prog { background: var(--spec-prog); }
.trend-tooltip-dot.center { background: var(--spec-center); }
.trend-tooltip-dot.cons { background: var(--spec-cons); }
.trend-tooltip-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.2); font-weight: 700; }

/* 차트 클릭 → 스크롤 이동 후 해당 카드에 잠깐 강조 효과 */
.day-card.day-card-flash {
  animation: day-card-flash-anim 1.5s ease;
}
@keyframes day-card-flash-anim {
  0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent), var(--shadow-1); }
  100% { box-shadow: var(--shadow-1); }
}

.day-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  box-shadow: var(--shadow-1);
  padding: var(--sp-lg);
}
.day-card.zero { opacity: 0.55; }
.day-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-sm);
}
.day-date { font-family: var(--font-latin); font-feature-settings: "tnum"; font-weight: 600; font-size: 14px; color: var(--ink); }
.day-total { font-family: var(--font-latin); font-feature-settings: "tnum"; font-size: 13px; color: var(--ink-mute); }
/* 막대그래프는 지난 이슈 카드와 완전히 같은 buildSpectrumBar()를 재사용한다
   (.spectrum-bar-wrap 스타일 그대로) — 날짜마다 폭이 달라지는 자체 버전은
   보도량 비교 의도가 헷갈린다는 피드백으로 걷어냄, 항상 폭 100%. */
.day-none { font-size: 13.5px; color: var(--ink-mute); font-style: italic; }

/* ============================================================
   About 페이지 — 미니멀 에디토리얼 무드 (about.html 전용, body.about-editorial로 스코프)
   ============================================================ */
.about-editorial { background: #faf9f6; }
.about-editorial .method-body { padding-top: var(--sp-huge); padding-bottom: calc(var(--sp-huge) * 1.5); }

.about-editorial .editorial-kicker {
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-mute);
  border: none;
  margin: 0 0 var(--sp-xxl);
}

.editorial-section { margin-bottom: calc(var(--sp-huge) * 1.15); }
.editorial-section:last-child { margin-bottom: 0; }

.editorial-section:not(.editorial-section-1)::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--spec-prog), var(--spec-center), var(--spec-cons));
  margin: 0 auto var(--sp-xxl);
}

.editorial-section.scroll-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.editorial-section.scroll-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

.about-editorial .editorial-subhead {
  font-family: var(--font-kr);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  border-top: none;
  padding-top: 0;
  margin: 0 0 var(--sp-xl);
}
.about-editorial .editorial-hero-title {
  font-family: "Noto Serif KR", serif;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.3;
  letter-spacing: -0.3px;
  text-align: center;
  color: var(--ink);
  max-width: 16em;
  margin: 0 auto var(--sp-xxl);
}
.about-editorial .editorial-slogan {
  font-family: var(--font-latin);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 60px);
  letter-spacing: -1px;
  text-transform: uppercase;
  margin-bottom: var(--sp-lg);
}
.about-editorial .editorial-slogan-accent {
  background: linear-gradient(90deg, var(--spec-prog), var(--spec-center), var(--spec-cons));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-editorial .editorial-hero-sub {
  font-size: clamp(22px, 3vw, 30px);
  margin-bottom: var(--sp-xl);
}

.editorial-illustration {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 0 auto var(--sp-xl);
}

.about-editorial .editorial-pullquote {
  font-family: "Noto Serif KR", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.55;
  text-align: center;
  color: var(--primary-deep);
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 44em;
  margin: 0 auto var(--sp-xl);
  position: relative;
}
.about-editorial .editorial-pullquote b { font-weight: 600; }
.about-editorial .editorial-pullquote .quote-mark {
  font-family: inherit;
  font-style: normal;
  font-size: 1.3em;
  color: var(--primary);
  vertical-align: -0.15em;
}

.about-editorial .editorial-prose {
  font-family: var(--font-kr);
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
  color: var(--ink-secondary);
  max-width: 42em;
  margin: 0 auto var(--sp-lg);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.about-editorial .editorial-prose b { color: var(--primary-deep); font-weight: 700; }
@media (max-width: 720px) {
  .about-editorial .editorial-prose br,
  .about-editorial .editorial-pullquote br { display: none; }
}
.about-editorial .editorial-prose-wide { max-width: 48.51em; }
.about-editorial .editorial-prose-wide-20 { max-width: 50.4em; }

.editorial-principles { list-style: none; margin: 0; padding: 0; max-width: 42em; margin-left: auto; margin-right: auto; }
.editorial-principles li { margin-bottom: var(--sp-xxl); }
.editorial-principles li:last-child { margin-bottom: 0; }

.about-editorial .editorial-lead {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
  margin: 0 0 var(--sp-sm);
}
.editorial-footnote {
  text-align: center;
  font-family: var(--font-kr);
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: var(--sp-xl);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.editorial-footnote a { color: var(--primary); }
.editorial-footnote a:hover { color: var(--primary-deep); text-decoration: underline; }