/* 트렌드 탭 — wechat 서브탭 화면 스타일. 두 셸 공용(토큰만). 새 셸 전용은 body.shell-v2 로 가둔다.
 *
 * 2026-09-18 개편의 뼈대:
 *   ① 카드는 지나치며 고르는 것 — 제목이 가장 크고, 나머지(출처·앨범·언제·태그)는 한 줄짜리 잔글씨다.
 *      그전엔 그 자리가 pill 다섯이라 제목과 무게가 같았다.
 *   ② 상세는 읽는 화면 — 넓은 트레이에서 읽는 칸(920)과 sticky 옆 칸으로 갈린다. 옆 칸에는 '읽는 중에도
 *      계속 필요한 것'만 둔다: 핵심 수치 · 출처 사실표 · 태그 · 원문으로 나가는 문.
 *   ③ 데이터에 파랑을 쓰지 않는다(DESIGN.md) — 막대·구성비는 잉크 단계로 그린다. 파랑은 링크·포커스뿐.
 *
 * components.css 보다 뒤에 로드된다(glass.css 가 그것을 @import 하고, index.html 에서 이 파일이 더 뒤다) —
 * 같은 특이도의 옛 규칙은 순서로 덮는다. v2/trends.css 는 이 파일보다 뒤라 body.shell-v2 규칙이 최종값이다. */

/* ─────────────── 카드 ─────────────── */
.wx-card { display: flex; flex-direction: column; gap: var(--sp-xs); }
.wx-card .trend-wechat-thumb { margin-bottom: var(--sp-xxs); } /* 세로 간격은 카드의 gap 이 진다 */

/* 제목이 이 카드의 주인공 — 21px 로 두면 300px 칸에서 네 줄이 되어 아래가 전부 밀린다. */
.wx-card-title {
  font-size: var(--fs-body); line-height: 1.34; letter-spacing: var(--ls-body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* 출처 · 앨범 · 언제 — 한 줄. 넘치면 말줄임(줄바꿈되면 제목과 무게가 같아진다). */
.wx-meta-line {
  font-size: var(--fs-fine); line-height: 1.4; color: var(--ink-48);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 실사 썸네일 카드의 대표 수치(글자 썸네일은 그림이 이미 싣는다 — trendWechatThumb.js). */
/* 실사 썸네일이 로드에 실패하면 trendWechatThumb.js 가 글자 썸네일(--type)로 갈아 끼우는데, 그 썸네일이 같은 대표 수치를 이미 싣는다.
   수치 줄은 렌더 시점의 thumbUrl 로 정해지므로(운영 서명 URL 은 만료된다) 갈아 끼운 뒤에는 여기서 접는다 — 같은 수치가 두 번 보이지 않게. */
.trend-wechat-thumb--type ~ .wx-card-figure { display: none; }
.wx-card-figure { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-caption); min-width: 0; }
.wx-card-figure-val { flex: none; white-space: nowrap; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } /* '10억' 이 '10 / 억' 으로 갈리지 않게(운영 실측) */
.wx-card-figure-label { color: var(--ink-48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wx-card-teaser {
  margin-bottom: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* 태그는 pill 이 아니라 글자다 — 카드에서 셋, 상세에서 여덟까지. */
.wx-tags { display: flex; flex-wrap: wrap; gap: 4px var(--sp-xs); font-size: var(--fs-fine); line-height: 1.4; }
.wx-tag { color: var(--ink-48); }

/* 스켈레톤 — 개편된 카드 본문(제목 2~3줄 + 메타 + 티저 2줄 + 태그)에 맞춘 높이. 옛 값 190px 은 pill 세 줄 기준이라 로드 직후 튄다. */
.trend-wechat-card-skel .skel-lines { min-height: 148px; }

/* ─────────────── 데이터에 파랑 금지(DESIGN.md) ───────────────
 * 막대·구성비는 값의 크기를 말하는 그림이지 링크가 아니다. components.css 의 accent 계열을 잉크 단계로 덮는다. */
.trend-wechat-chart-fill { background: var(--ink-80); }
.trend-wechat-seg--1 { background: var(--ink); }
.trend-wechat-seg--2 { background: var(--ink-80); }
.trend-wechat-seg--3 { background: var(--ink-48); }
.trend-wechat-seg--4 { background: color-mix(in srgb, var(--ink-48) 52%, transparent); }

/* ─────────────── 상세(트레이·옛 드로어 공용) ───────────────
 * 기본은 한 단 — 좁은 화면과 옛 셸 드로어가 이 모양이다. DOM 순서가 곧 읽는 순서다. */
.wx-detail { display: flex; flex-direction: column; gap: var(--sp-lg); }
.wx-detail-kpis:empty { display: none; }          /* 지표가 없는 카드에서 빈 칸이 자리를 먹지 않게 */
.wx-detail-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-md); }
.wx-detail-side { display: flex; flex-direction: column; gap: var(--sp-md); min-width: 0; }
.wx-detail-main > * { margin-bottom: 0; }          /* 세로 리듬은 gap 하나가 진다 */
/* 정독 타이포 — 운영 본문은 14px·행간 1.3 으로 886px 한 줄에 110자가 들어가 읽히지 않았다(스테이징 실측).
   본문 글만 읽는 폭(한글 40~45자)으로 좁히고 행간을 연다. 차트·랭킹·다이어그램은 칸 전체 폭을 그대로 쓴다.
   번역 본문은 한 <p> 안에서 <br> 로 문장을 끊는다 — 그 끊김을 문단 간격으로 읽히게 한다. */
.wx-detail-main :is(.trend-wechat-summary, .trend-wechat-section-body, .trend-wechat-body) {
  max-width: 680px; font-size: var(--fs-body); line-height: 1.75; color: var(--ink-80);
}
.wx-detail-main :is(.trend-wechat-section-body, .trend-wechat-body) br { display: block; content: ""; margin-top: 0.7em; }
.wx-detail-main .trend-wechat-section-h { margin-top: var(--sp-sm); font-size: var(--fs-tagline); color: var(--ink); }

/* 요약 리드 — 본문보다 한 단 크게. 읽는 사람이 여기서 '읽을지 말지'를 정한다. */
.wx-lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); gap: var(--sp-xs); margin: 0; }

.wx-detail .trend-wechat-hero-img { max-height: 180px; margin-bottom: 0; } /* 읽는 칸의 머리 그림 — 320px 은 첫 화면을 통째로 먹는다 */

/* 사실표 — 출처·앨범·게시일·수집일. 값이 없는 줄은 JS 가 빼므로 빈 칸이 없다. */
.wx-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-xs) var(--sp-sm); margin: 0; }
.wx-facts-key { font-size: var(--fs-fine); color: var(--ink-48); }
.wx-facts-val { margin: 0; font-size: var(--fs-caption); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

/* 이 화면의 유일한 주 CTA — 흰 알약(DESIGN.md). 잉크를 바탕으로, 캔버스를 글자로 쓴다.
 * ⚠️ 선택자에 부모(.wx-detail-side)를 붙여야 한다 — framer.css 의 `body.shell-v2 a { color: var(--accent) }` 가
 *    이 파일보다 뒤에 로드돼 특이도가 같으면 진다(실측: 알약 글자가 파랗게 나왔다). */
.wx-detail-side a.wx-source-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 var(--sp-md); border-radius: var(--r-pill);
  background: var(--ink); color: var(--canvas); text-decoration: none;
  font-size: var(--fs-caption); font-weight: 600;
  transition: opacity .18s ease;
}
.wx-detail-side a.wx-source-cta:hover { opacity: .86; text-decoration: none; }
/* 옆 칸 맨 아래 카드 썸네일(2026-09-21 오너 "원문 보기 버튼 아래에 썸네일 추가해") — 세로 간격은 옆 칸의 gap 이 진다.
   ⚠️ 읽는 칸 머리의 썸네일은 2026-09-20 에 걷어냈고 그건 여전히 금지다(trendWechatDrawer.js buildSide 주석). */
.wx-detail-side .trend-wechat-thumb { margin-bottom: 0; }
/* 여기서는 **원본 비율 그대로 전체를 보여 준다**(2026-09-21 오너: *"어차피 콘텐츠 내부니깐"*).
   목록 카드는 16:9 로 잘라야 줄이 가지런하지만(운영 원본은 1:1·세로형·가로형이 섞여 있다) 상세 옆 칸은 그럴 이유가 없다.
   ⚠️ 높이를 고정하지 않는다 — aspect-ratio 를 지우고 img 를 height: auto 로 두면 컨테이너가 그림 비율을 따라간다.
      object-fit: cover 를 남기면 잘림이 그대로다(실측: 세로형 원본이 얼굴만 남았다).
   ⚠️ 글자 썸네일(--type)은 그대로 16:9 다 — 지켜야 할 원본 비율이 없고, 비율을 풀면 안쪽 flex 가 납작해진다. */
.wx-detail-side .trend-wechat-thumb--img { aspect-ratio: auto; background: transparent; }
.wx-detail-side .trend-wechat-thumb--img .trend-wechat-thumb-img { height: auto; object-fit: contain; object-position: center; }
.wx-detail-side a.wx-source-cta:focus-visible { outline: none; box-shadow: var(--ring-focus, 0 0 0 2px var(--accent)); }

/* 좁은 화면 — 지표는 본문 위, 가로 스크롤 없는 2열. */
@media (max-width: 810px) {
  .wx-detail-kpis .trend-wechat-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-detail-side a.wx-source-cta { width: 100%; min-height: 44px; }
}

/* ─────────────── 새 셸 넓은 트레이 — 2단 ───────────────
 * tray.css 의 읽는 칸은 920px 이다. 옆 칸(296) + 사이(32)를 더한 만큼 --tray-measure 를 넓혀
 * 본문 칸이 정확히 920 으로 남게 한다 — 그 변수 하나만 바꾸면 머리 여백까지 같이 따라온다(tray.css 가 그것으로 계산한다). */
@media (min-width: 811px) {
  body.shell-v2 dialog.tray.tray--wide.trend-tray--wechat { --tray-measure: 1248px; }
  body.shell-v2 .trend-tray--wechat .wx-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    grid-template-rows: auto 1fr;   /* 남는 세로는 둘째 줄이 받는다 — 그래야 옆 칸이 sticky 로 움직일 여지가 생긴다 */
    column-gap: var(--sp-xl); row-gap: var(--sp-lg);
    align-items: start;
  }
  body.shell-v2 .trend-tray--wechat .wx-detail-main { grid-area: 1 / 1 / 3 / 2; }
  body.shell-v2 .trend-tray--wechat .wx-detail-kpis { grid-area: 1 / 2 / 2 / 3; }
  body.shell-v2 .trend-tray--wechat .wx-detail-side {
    grid-area: 2 / 2 / 3 / 3; align-self: start;
    position: sticky; top: 0; /* 스크롤 컨테이너는 .tray-body */
    padding-top: var(--sp-xs);
  }
  /* 지표가 없으면 둘째 줄이 첫 줄부터 시작한다 — 옆 칸이 본문 머리와 나란히 선다. */
  body.shell-v2 .trend-tray--wechat .wx-detail-kpis:empty + .wx-detail-main + .wx-detail-side { grid-area: 1 / 2 / 3 / 3; }
  body.shell-v2 .trend-tray--wechat .wx-detail-kpis .trend-wechat-kpis { grid-template-columns: 1fr; margin-bottom: 0; }
}