/* 트렌드 탭 — insight 서브탭 화면 스타일. 두 셸 공용(토큰만). 새 셸 전용은 body.shell-v2 로 가둔다.
 *
 * ⚠️ 여기 규칙은 `.trend-root` 로 가두지 않는다 — 인사이트 카드는 위저드 소재 선택 단계에도 인라인으로 서고
 *    (stages/trendInjection.js → interview.js) 그 자리는 트렌드 탭 밖이다. 가두면 위저드에서만 민무늬가 된다.
 * ⚠️ components.css 의 하드코딩 색(#7dd3fc·#d9a441·#6ee7b7·#f472b0·#f87171)을 두 클래스 선택자로 덮는다.
 *    DESIGN.md: 데이터·상태는 잉크 + 의미색(--positive 가능 / --danger 불가)만, 파랑은 링크·포커스·선택뿐.
 */

/* ── 머리 한 줄 — 언제·어디서 온 데이터인가 ── */
.trend-ins-head { display: flex; flex-direction: column; gap: 2px; }
.trend-ins-head-facts { font-size: var(--fs-caption); color: var(--ink-80); }
.trend-ins-head-src { font-size: var(--fs-fine); color: var(--ink-48); line-height: 1.5; }

/* ── 섹션 제목 — 옛 셸의 파란 제목(components.css:1144)을 잉크로 ── */
.trend-section-title.trend-ins-h,
.trend-section-title.trend-ev-title,
.trend-news-section .trend-section-title { color: var(--ink); margin-bottom: 2px; }
.trend-ins-sub { font-size: var(--fs-fine); color: var(--ink-48); margin-bottom: var(--sp-md); }
.trend-insight-section .trend-callout { margin: 0 0 var(--sp-md); border-left-color: var(--ink-48); }

/* ── 상태 배지 — 분류는 잉크·의미색 글자, 바탕은 중립 표면 ── */
.trend-class-badge.trend-badge-rising,
.trend-class-badge.trend-badge-saturated,
.trend-class-badge.trend-badge-blue {
  background: var(--surface-1); border: 1px solid var(--hairline);
  font-weight: 500; letter-spacing: 0;
}
.trend-class-badge.trend-badge-rising { color: var(--ink); }        /* 급상승 — 지금 뜨는 것 */
.trend-class-badge.trend-badge-saturated { color: var(--danger); }  /* 포화 — 신규 착수가 어려운 상태 */
.trend-class-badge.trend-badge-blue { color: var(--positive); }     /* 블루오션 — 들어갈 자리가 있다 */

/* NEW 표식 — 9px 분홍 pill 을 잉크 글자로(9px 은 본문 래더 밖이다) */
.trend-new-chip {
  font-size: var(--fs-fine); font-weight: 600;
  background: var(--surface-2); border: 1px solid transparent; color: var(--ink-80);
}

/* 긴급도 태그 — 파랑(단기)·빨강(즉시) 글자를 잉크로. 아이콘만 의미색을 남긴다(색 단독 인코딩 금지 · G4) */
.trend-urgency-tag.trend-urgency-tag--now { color: var(--ink); }
.trend-urgency-tag.trend-urgency-tag--soon { color: var(--ink-80); }
.trend-urgency-tag.trend-urgency-tag--monitor { color: var(--ink-48); }
.trend-urgency-tag.trend-urgency-tag--now svg { color: var(--danger); }

/* ── 인사이트 카드 ── */
.trend-ins-grid { gap: var(--sp-md); }
.trend-ins-card { position: relative; padding-left: calc(var(--sp-md) + 6px); }
/* 긴급도 보더(components.css:1273-1275 의 하드코딩 색)를 무력화하고 자리는 레일이 받는다 */
.trend-card.trend-card--urgency-now,
.trend-card.trend-card--urgency-soon,
.trend-card.trend-card--urgency-monitor { border-left: 1px solid var(--hairline); }
.trend-ins-rail {
  position: absolute; left: 0; top: var(--sp-md); bottom: var(--sp-md);
  width: 3px; border-radius: var(--r-pill); background: transparent;
}
.trend-card--urgency-now > .trend-ins-rail { background: var(--ink); }
.trend-card--urgency-soon > .trend-ins-rail { background: var(--ink-48); }
.trend-card--urgency-monitor > .trend-ins-rail { background: var(--hairline); }
/* '즉시' 는 한 단 위로 — 표면을 한 계단 올린다(세 클래스라 새 셸의 카드 표면 규칙보다 먼저다) */
.trend-card.trend-ins-card.trend-card--urgency-now { background: var(--surface-2); }
.trend-card.trend-ins-card.trend-card--urgency-now:hover { background: var(--surface-3); }

.trend-ins-card .trend-card-head-right { margin-bottom: var(--sp-xs); }
.trend-ins-title { font-size: var(--fs-tagline); line-height: var(--lh-tagline); letter-spacing: var(--ls-tagline); font-weight: 600; color: var(--ink); }
.trend-ins-directive { margin-top: 6px; font-size: var(--fs-caption); line-height: var(--lh-body); font-weight: 600; color: var(--ink); }
.trend-ins-why {
  margin-top: var(--sp-xs); font-size: var(--fs-fine); line-height: 1.5; color: var(--ink-48);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.trend-ins-meta { margin-top: var(--sp-sm); font-size: var(--fs-fine); color: var(--ink-48); }
.trend-ins-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); margin-top: var(--sp-md); flex-wrap: wrap; }
.trend-ins-actions .btn.trend-expand-btn { margin-top: 0; }
.trend-ins-actions .btn.trend-ins-card-cta { flex: 0 0 auto; }

/* ── 상세(트레이·드로어 공용 본문) ── */
.trend-ins-lead {
  margin: var(--sp-md) 0 0; font-size: var(--fs-lead); line-height: 1.3;
  letter-spacing: var(--ls-lead); font-weight: 600; color: var(--ink); word-break: keep-all;
}
.trend-ins-defs { margin: var(--sp-xl) 0 0; display: flex; flex-direction: column; gap: var(--sp-md); }
.trend-ins-def { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--sp-md); align-items: baseline; }
.trend-ins-def-k { font-size: var(--fs-fine); font-weight: 500; color: var(--ink-48); }
.trend-ins-def-v { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.trend-ins-sub-title {
  margin-top: var(--sp-xl); padding-top: var(--sp-md); border-top: 1px solid var(--hairline);
  font-size: var(--fs-fine); font-weight: 600; color: var(--ink-48); letter-spacing: 0.04em;
}
.trend-ins-sub-title + .trend-ins-defs { margin-top: var(--sp-md); gap: var(--sp-sm); }
.trend-ins-kv .trend-ins-def-v { color: var(--ink-80); }
.btn.trend-ins-cta { width: 100%; justify-content: center; margin-top: var(--sp-xl); }

/* 트레이 바닥 — 스크롤 밖에 고정(긴 근거를 다 읽지 않아도 주 행동이 손에 닿는다). 새 셸에만 있는 자리다. */
body.shell-v2 .trend-ins-foot {
  flex: none; padding: var(--sp-md) var(--modal-pad) calc(var(--sp-md) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline-soft);
}
body.shell-v2 .trend-ins-foot[hidden] { display: none; }
body.shell-v2 .trend-ins-foot .btn.trend-ins-cta { margin-top: 0; }

/* ── 근거 데이터 대시보드 ── */
.trend-ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); align-items: start; }
/* 소재 순위는 표라서 두 칸을 쓴다 — 한 칸이면 이름이 줄고, 전폭이면 이름과 분류 사이가 화면 절반만큼 벌어진다 */
.trend-ev-wide { grid-column: span 2; }

/* 소재 순위 표 — 지수 막대 패널 + 실시간 순위 패널을 한 벌로 합친 자리 */
.trend-ev-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-fine); }
.trend-ev-tbl th {
  text-align: left; font-weight: 500; color: var(--ink-48); white-space: nowrap;
  padding: 0 var(--sp-sm) var(--sp-xs) 0; border-bottom: 1px solid var(--hairline);
}
.trend-ev-tbl td { padding: var(--sp-xs) var(--sp-sm) var(--sp-xs) 0; border-top: 1px solid var(--hairline); vertical-align: middle; }
.trend-ev-tbl tbody tr:first-child td { border-top: none; }
.trend-ev-tbl td:last-child, .trend-ev-tbl th:last-child { padding-right: 0; }
.trend-ev-c-rank { width: 4.6em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trend-ev-c-class { width: 1%; white-space: nowrap; }
.trend-ev-c-presence { width: 32%; }
.trend-ev-pos { color: var(--ink); font-weight: 600; }
.trend-ev-move { margin-left: 4px; font-weight: 600; display: inline-flex; align-items: center; }
/* 좁은 칸에서 NEW 표식이 앞에 붙으면 이름이 음절 중간에서 끊겼다 — 한글은 어절 경계로 접는다 */
.trend-ev-trope { color: var(--ink); font-size: var(--fs-caption); word-break: keep-all; overflow-wrap: anywhere; }
.trend-ev-trope-meta { margin-top: 2px; color: var(--ink-48); }
.trend-ev-presence { display: flex; align-items: center; gap: var(--sp-xs); }
.trend-ev-track { flex: 1 1 auto; min-width: 32px; height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.trend-ev-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ink-80); }
.trend-ev-val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: right; }
.trend-ev-delta { font-weight: 600; font-variant-numeric: tabular-nums; }

/* 분류 분포 — 칩 나열 대신 비율 막대 한 줄 + 범례 */
.trend-ev-ratio { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); margin-bottom: var(--sp-sm); }
.trend-ev-seg { display: block; height: 100%; }
.trend-ev-seg + .trend-ev-seg { box-shadow: inset 1px 0 0 var(--canvas); }
/* 세 조각의 색은 바로 위 분류 배지와 같은 뜻을 쓴다 — 범례를 외우지 않아도 읽힌다 */
.trend-ev-seg--0, .trend-ev-sw--0 { background: var(--ink); }
/*   면적이 넓어 글자와 같은 채도로 칠하면 경고처럼 읽힌다 — 캔버스를 섞어 한 단 낮춘다 */
.trend-ev-seg--1, .trend-ev-sw--1 { background: color-mix(in srgb, var(--danger) 76%, var(--canvas)); }
.trend-ev-seg--2, .trend-ev-sw--2 { background: color-mix(in srgb, var(--positive) 76%, var(--canvas)); }
.trend-ev-legend { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-md); font-size: var(--fs-fine); color: var(--ink-48); }
.trend-ev-leg { display: inline-flex; align-items: center; gap: 6px; }
.trend-ev-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.trend-ev-leg-n { color: var(--ink); font-weight: 600; font-style: normal; }

/* US 앱차트 — 앱명 순서 목록 */
.trend-ev-apps { margin: 0; padding-left: 1.5em; display: flex; flex-direction: column; gap: 3px; }
.trend-ev-app { font-size: var(--fs-caption); color: var(--ink); }
.trend-ev-app::marker { color: var(--ink-48); font-size: var(--fs-fine); }

/* 모멘텀 행 — 강도 라벨(급가속·둔화)이 네 번째 칸이다. components.css 의 3칸 그리드에서는 그 라벨이
   다음 줄로 접혀 빈 상자처럼 보였다(2026-09-18 실측). */
.trend-dash-section .trend-mom { grid-template-columns: minmax(0, 1fr) auto auto auto; }

/* 카드가 말하지 않은 할 일 — 파란 세로줄을 잉크로 */
.trend-dash-section .trend-action-briefing { border-left-color: var(--ink-48); }

@media (max-width: 1100px) {
  .trend-ev-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .trend-ev-grid { grid-template-columns: 1fr; }
  .trend-ev-wide { grid-column: span 1; }
}
@media (max-width: 810px) {
  .trend-ins-def { grid-template-columns: 1fr; gap: 2px; }
  .trend-ins-actions { gap: var(--sp-xs); }
  .trend-ins-actions .btn.trend-ins-card-cta { flex: 1 0 auto; justify-content: center; }
  /* 좁은 칸에서는 막대를 접고 숫자만 남긴다 — 6px 막대 두 개가 붙으면 비교가 아니라 장식이다 */
  .trend-ev-track { display: none; }
  .trend-ev-c-presence { width: 1%; }
  .trend-ev-presence { justify-content: flex-end; }
}

/* 조각뉴스 분류 태그 — 파란 pill(components.css:1576 .trend-relevance-chip)을 메타 줄의 '#태그' 글자로 */
.trend-news-tag { font-size: var(--fs-fine); color: var(--ink-48); }