/* ============================================================
   insight-index — 인사이트 허브·주제 페이지 목록 컴포넌트
   plan/032_01 (인사이트 허브 개편) Level 0~1

   적용: /insight (functions/insight/index.js)
        /insight/topic/{cluster} (functions/insight/topic/[cluster].js)
   로드: 각 Function이 SHELL_HEAD 밖에서 직접 <link> — 셸 전역 로드 아님
        (기존 관례: [slug].js의 article-body.css·insight-essay.css와 동일)

   ⚠️ 기존 토큰만 사용. 신규 CSS 변수 정의 금지 — assets/css/tokens.css 참조.
   ============================================================ */

/* ── 글 카드 ───────────────────────────────────────────────
   .card .card--hover .card--link 위에 얹는 확장. 인라인 style 제거가 목적.  */

.insight-card { padding: var(--space-6); }

.insight-card__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.insight-card__topic {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.insight-card__title {
  font-size: var(--type-md);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  word-break: keep-all;
  color: var(--color-text);
  margin: 0;
}

/* 설명 3줄 고정 — 카드 높이 균일화(설명 길이가 90~110자로 들쭉날쭉) */
.insight-card__desc {
  font-size: var(--type-sm);
  line-height: var(--leading-body);
  color: var(--color-muted);
  word-break: keep-all;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 날짜 · 읽는 시간 — 카드 하단 고정(제목·설명 길이와 무관하게 정렬) */
.insight-card__meta {
  margin: auto 0 0;
  padding-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

/* ── 페이지네이션 ──────────────────────────────────────────── */

.insight-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-16);
  flex-wrap: wrap;
}

/* ── [더 보기] + 검색 (mani #9 — Vercel blog 패턴 차용) ── */
.insight-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--motion-base) var(--ease-out);
}
.insight-more:hover { border-color: var(--color-text); text-decoration: none; }
.insight-more.is-loading { pointer-events: none; color: var(--color-muted); }
.insight-more.is-loading::before {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: insightMoreSpin 0.7s linear infinite;
}
@keyframes insightMoreSpin { to { transform: rotate(360deg); } }
/* 이어붙는 카드 등장 — 자동 로딩을 인지시키는 부드러운 진입 */
.insight-card.is-new {
  opacity: 0;
  transform: translateY(14px);
}
.insight-card {
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
/* 스켈레톤 자리 표시 — 다음 카드 로딩의 확실한 시각 신호(v4) */
.insight-card--skeleton { pointer-events: none; }
.insight-card--skeleton .sk {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-border) 50%, var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: insightShimmer 1.1s linear infinite;
}
.insight-card--skeleton .sk--cover { aspect-ratio: 16 / 9; width: 100%; }
.insight-card--skeleton .sk--chip { height: 12px; width: 72px; margin-top: var(--space-4); }
.insight-card--skeleton .sk--title { height: 20px; width: 85%; margin-top: var(--space-3); }
.insight-card--skeleton .sk--line { height: 13px; width: 100%; margin-top: var(--space-2); }
.insight-card--skeleton .sk--short { width: 60%; }
@keyframes insightShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .insight-card { transition: none; }
  .insight-card.is-new { opacity: 1; transform: none; }
  .insight-more.is-loading::before { animation: none; }
  .insight-card--skeleton .sk { animation: none; background: var(--color-surface); }
}
.insight-more__count {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-muted);
  font-weight: 500;
}
.insight-tabs__search {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  width: 180px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font: inherit;
  font-size: var(--type-sm);
  color: var(--color-text);
  background: var(--color-bg);
  outline: none;
}
.insight-tabs__search:focus { border-color: var(--color-text); }
.insight-tabs__search + .insight-tabs__count { margin-left: var(--space-3); }
/* 검색 중 — 리드·랭킹·피드 더보기·기존 카운트 숨김(그리드가 결과 영역).
   검색 결과 자체의 더보기(.insight-pager--search)는 예외. */
body.is-searching .insight-lead-section,
body.is-searching .insight-topic-lead,
body.is-searching .insight-featured,
body.is-searching .insight-pager:not(.insight-pager--search),
body.is-searching .insight-count:not(.insight-count--search) { display: none; }
@media (max-width: 720px) {
  .insight-tabs__search { width: 130px; }
}

.insight-pager__link,
.insight-pager__current,
.insight-pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  text-decoration: none;
}

.insight-pager__link {
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  transition: border-color var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out);
}

.insight-pager__link:hover {
  border-color: var(--color-text);
  color: var(--color-text);
  text-decoration: none;
}

.insight-pager__current {
  border: 1px solid var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 600;
}

.insight-pager__gap { color: var(--color-muted); }

/* ── 목록 상단 요약 줄 (총 N편 · 현재 범위) ─────────────────── */

.insight-count {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-6);
}

/* ── 빈 상태 ───────────────────────────────────────────────── */

.insight-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--type-sm);
  padding-block: var(--space-16);
  margin: 0;
}

/* ============================================================
   매거진 허브 (plan/032_03 — 1페이지 편집 레이어)
   ============================================================ */

/* ── 마스트헤드 — 압축 히어로 ─────────────────────────────────
   hero--service(패딩 80/96px·H1 72px)의 절반 이하. 기존 히어로 대비
   "매일 갱신되는 매체"의 첫 화면을 콘텐츠에 내주는 것이 목적(032_03 §3.1).
   hero.css 전역은 무접촉 — 여기서 스코프 오버라이드만. */

.hero--masthead {
  /* 하단 패딩 0 — 탭 행(언더라인)이 섹션 1px 보더에 밀착한다(UI 검수 §2) */
  padding-block: var(--space-10) 0;
  border-bottom: 1px solid var(--color-border);
}
.hero--masthead .hero__wrap { max-width: var(--wrap-wide); }
.hero--masthead .hero__eyebrow { margin-bottom: var(--space-3); }
.hero--masthead .hero__title {
  font-size: var(--type-2xl);       /* 768px+에서도 3xl 승격 없이 고정 — 압축이 목적 */
  margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
  .hero--masthead .hero__title { font-size: var(--type-2xl); }
}
.hero--masthead .hero__lead { font-size: var(--type-sm); }
@media (max-width: 767px) {
  /* 모바일 첫 스크린 합격 기준: 탐색 축 + 피처드가 들어와야 한다(032_03 §3.1) */
  .hero--masthead { padding-block: var(--space-6) 0; }
  .hero--masthead .hero__lead { display: none; }
}

/* 주제 페이지 변주 — 마스트헤드 surface 틴트(허브=흰 배경). 첫 프레임에서
   "여긴 주제 페이지" 층위가 구분되는 가장 싼 장치(UI 검수 §4). */
.hero--masthead--topic { background: var(--color-surface); }

/* ── 리드 밴드 — 피처드 스택(좌 1.8fr) + 인기 레일(우 1fr) (UI 검수 §1) ──
   "lead story + most-read 레일"(FT·The Verge 홈 문법). 레일이 짧아 생기는
   하단 여백은 허용 — 채우려고 장식을 넣지 않는다. */

.insight-lead-band {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 767px) {
  .insight-lead-band { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* 주제 페이지 1페이지 가로형 피처드 블록 */
.insight-topic-lead { margin-bottom: var(--space-10); }

/* ── 피처드 — 전폭 가로 카드 (최신 1건) ───────────────────── */

.insight-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-6);
}
.insight-featured__media {
  aspect-ratio: 16 / 9;              /* CLS 방지 — 대형 이미지일수록 시프트가 크다 */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.insight-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.insight-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.insight-featured__title {
  font-size: var(--type-xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  word-break: keep-all;
  color: var(--color-text);
  margin: 0;
}
.insight-featured__desc {
  font-size: var(--type-sm);
  line-height: var(--leading-body);
  color: var(--color-muted);
  word-break: keep-all;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-featured .insight-card__meta { margin-top: 0; padding-top: 0; }
@media (max-width: 767px) {
  .insight-featured { grid-template-columns: 1fr; gap: var(--space-4); }
  .insight-featured__title { font-size: var(--type-lg); }
}

/* 허브 리드 밴드용 세로 스택 변형 — 이미지 상단·텍스트 하단(레일과 나란히) */
.insight-featured--stack {
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

/* 서브 피처드 2열 — 표준 카드 재사용, 간격만 (config subCount>0일 때만 렌더) */
.insight-subs { margin-top: var(--space-8); }

/* ── 많이 읽은 글 — 텍스트 번호 리스트 (카드 아님·숫자 비노출) ── */

.insight-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;                  /* 텍스트 리스트는 전폭이면 행이 늘어져 스캔이 죽는다 */
}

/* 레일 변형 — 리드 밴드 우측 열(UI 검수 §3). 밀도로 콤팩트화(5건 유지). */
.insight-rank-rail { min-width: 0; }
.insight-rank__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.04em;
}
.insight-rank--rail { max-width: none; }
.insight-rank--rail .insight-rank__link { padding: var(--space-3) 0; }
.insight-rank--rail .insight-rank__no { font-size: var(--type-xs); }
.insight-rank--rail .insight-rank__title {
  font-size: var(--type-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;             /* 긴 제목이 레일 리듬을 깨지 않게 */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-rank__item { border-bottom: 1px solid var(--color-border); }
.insight-rank__item:first-child { border-top: 1px solid var(--color-border); }
.insight-rank__link {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-2);
  text-decoration: none;
}
.insight-rank__link:hover { text-decoration: none; }
.insight-rank__link:hover .insight-rank__title { color: var(--color-accent); }
.insight-rank__no {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--color-accent);
  flex: 0 0 auto;
}
.insight-rank__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.insight-rank__title {
  font-size: var(--type-md);
  font-weight: 600;
  line-height: 1.4;
  word-break: keep-all;
  color: var(--color-text);
  transition: color var(--motion-base) var(--ease-out);
}
.insight-rank__meta {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

/* ── 주제 텍스트 링크 행 (D2 유연 적용 — sticky 아님, 섹션 소속) ──
   제거 판단 시 _magazine.js의 renderTopicTabs 호출 1줄만 지우면 된다. */

.insight-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: nowrap;
  overflow-x: auto;                  /* 모바일: 줄바꿈 금지, 가로 스크롤(032_03 §3.1) */
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-1);    /* 스크롤바가 칩에 붙지 않게 */
}
.insight-tabs__item {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--type-sm);
  color: var(--color-muted);
  text-decoration: none;
  transition: border-color var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out);
}
a.insight-tabs__item:hover {
  border-color: var(--color-text);
  color: var(--color-text);
  text-decoration: none;
}
.insight-tabs__item.is-active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 600;
}

/* 마스트헤드 탭 행 — pill 칩 필터 (대표 확정 2026-08-09).
   언더라인 탭은 "구분감 없다" 지적 2회로 폐기. pill(라운드 보더, 활성=진한 채움)은
   YouTube·Medium·토스 피드의 카테고리 필터 관용 문법. 칩 모양은 위의 기본
   .insight-tabs__item이 담당하고, 여기는 행 배치만.
   ⚠ 탭 위 헤어라인 금지(대표 지시) — 리드와의 분리는 40px 여백이 담당.
   ⚠⚠ 이 블록은 반드시 기본 .insight-tabs 룰 **뒤**에 있어야 한다 — 특이도가 같아
   순서로 이긴다. 앞에 뒀다가 기본 룰(margin 0 0 32px·padding-bottom 4px)이
   여백을 전부 덮어쓴 실사고(2026-08-09, "여전히 여백이 없다" 대표 리포트). */
.insight-tabs--masthead {
  margin: var(--space-10) 0 0;
  padding-bottom: var(--space-6);
}
.insight-tabs__count {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .insight-tabs__count { display: none; }
}

/* ── 미리보기 표식 (G1 — /insight-preview 한시 라우트 전용) ── */

.insight-preview-note {
  background: var(--color-text);
  color: var(--color-bg);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--type-xs);
}
.insight-preview-note a {
  color: inherit;
  text-decoration: underline;
}