/* 개별 신조어 상세페이지(trend/<id>.html) 전용 스타일.
   색·간격 토큰은 styles.css의 :root를 그대로 재사용하므로 styles.css를 먼저 로드할 것
   (legal.css와 같은 패턴). --brand-surface-tint/--brand-border-tint는 앱 쪽에만 있던
   토큰이라 여기서 브랜드 프라이머리를 우린 값으로 새로 정의한다. */

.trend-detail {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-lg);
}

.trend-detail .breadcrumb {
  font-size: 13px;
  color: var(--neutral-text-muted);
  margin-bottom: var(--space-md);
}

.trend-detail .breadcrumb a { color: var(--neutral-text-muted); }

.trend-detail h1 {
  font-size: 32px;
  margin: 0 0 var(--space-md);
}

.trend-detail .badges {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.trend-detail .card {
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--neutral-surface);
}

.trend-detail .card h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-text-muted);
  margin: 0 0 var(--space-sm);
}

.trend-detail .card p {
  color: var(--neutral-text-secondary);
  line-height: 1.75;
  margin: 0;
}

.trend-detail .usage-example {
  background: rgba(109, 94, 245, 0.08);
  border: 1px solid rgba(109, 94, 245, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-style: italic;
  color: var(--neutral-text-primary) !important;
}

.trend-detail .app-cta {
  text-align: center;
  margin-top: var(--space-xxl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--neutral-border);
}

.trend-detail .app-cta p {
  color: var(--neutral-text-secondary);
  margin-bottom: var(--space-md);
}

/* ---------- 내부 링크 (2026-08-10) ----------
   394개 상세페이지가 서로도, 어디에서도 링크되지 않는 고아 상태였다(색인 0/394).
   아래 두 블록이 그 문을 만든다: 상세끼리 잇는 "같이 보면 좋은 말"과, 모든 표제어에
   링크가 한 번씩 닿게 하는 전체 목록(/trend/).
   자세한 배경은 scripts/generate_trend_pages.mjs 의 pickRelated 주석. */

.trend-detail .related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.trend-detail .related-list a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--neutral-border);
  background: var(--neutral-surface);
  color: var(--neutral-text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.trend-detail .related-list a:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.trend-detail .related-more {
  margin-top: var(--space-md);
  margin-bottom: 0;
}

.trend-detail .related-more a,
.trend-detail .app-cta-web a {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.trend-detail .app-cta-web {
  margin-top: var(--space-md);
  margin-bottom: 0;
  font-size: 14px;
}

/* ---------- 전체 목록 허브 ---------- */

.trend-detail .index-lede {
  color: var(--neutral-text-secondary);
  margin-bottom: var(--space-xl);
}

.index-section { margin-bottom: var(--space-xxl); }

.index-section h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--neutral-border);
}

.index-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-text-muted);
}

.index-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  /* 394개를 한 줄씩 쌓으면 스크롤이 끝없이 길어진다 — 화면 폭에 맞춰 여러 열로 흘린다. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px var(--space-md);
}

.index-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 7px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.index-list a {
  color: var(--neutral-text-primary);
  text-decoration: none;
  font-size: 15px;
}

.index-list a:hover { color: var(--brand-primary); }

.index-year {
  font-size: 12px;
  color: var(--neutral-text-muted);
  flex-shrink: 0;
}