/* 트렌드 탭 — adintel 서브탭 화면 스타일. 두 셸 공용(토큰만). 새 셸 전용은 body.shell-v2 로 가둔다.
 * 클래스가 옛 .adintel-radar-* 가 아니라 .adintel-card-* / .adintel-detail-* 인 것은 의도다 —
 * components.css 의 옛 규칙(9:16 포스터·파란 활성 칩·파란 스파크라인)을 이름으로 피한다. 옛 규칙 제거는 리드 몫.
 * 데이터에 파랑을 쓰지 않는다(DESIGN.md): 추이·막대는 잉크 단색, --accent 는 링크·포커스에만. */

/* ── 도구막대 오른쪽 자료 상태: 「최종 갱신 … · n일 전」 「16건」 ── */
.adintel-meta-fresh:empty { display: none; }
.adintel-meta-fresh .trend-freshness-badge { display: inline; margin: 0; } /* 도구막대 안에서는 한 줄로 흐른다 */
.adintel-meta-fresh:not(:empty) + .adintel-meta-count::before { content: '·'; margin-right: 6px; color: var(--ink-48); }
.adintel-meta-count { font-variant-numeric: tabular-nums; }

.adintel-noticerow { margin-top: var(--sp-sm); }
.adintel-gridwrap { margin-top: var(--sp-lg); }

/* ── 그리드: 첫 화면에 포스터와 수치가 함께 들어오도록 열을 좁게 잡는다(1440 폭에서 6~7열) ── */
.adintel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-md); }
/* 구간 전환 소프트 로딩 — 기존 카드를 지우지 않고 흐리게만(전환~응답 사이 빈 화면 없음) */
.adintel-gridwrap--loading :is(.adintel-grid, .trend-status-badge, .state-error, .view-todo) {
  opacity: .4; pointer-events: none; transition: opacity var(--t-fast) var(--ease);
}

/* ── 카드 ── */
.adintel-card {
  appearance: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--parchment); border: 1px solid var(--hairline); border-radius: var(--r-md);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .adintel-card:hover { transform: translateY(-2px); border-color: var(--divider-soft); } }
.adintel-card:focus-visible { outline: none; box-shadow: var(--ring-focus, 0 0 0 2px var(--accent)); }

/* 포스터는 원본 9:16 을 3:4 로 자른다 — 세로 전면을 다 보여주면 카드 하나가 화면 높이를 먹는다. */
.adintel-card-poster { position: relative; aspect-ratio: 3 / 4; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.adintel-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adintel-card-noimg { font-family: var(--font-heading); font-size: var(--fs-tagline); font-weight: 600; color: var(--ink-48); }
.adintel-card-play {
  position: absolute; right: var(--sp-xs); bottom: var(--sp-xs);
  width: 24px; height: 24px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--canvas); color: var(--ink); pointer-events: none;
}
/* 상태 배지(급등·신규)만 pill 로 남긴다 — 유형·네트워크·수명주기는 아래 메타 줄로 내려갔다. */
.adintel-card-badge {
  position: absolute; top: var(--sp-xs); left: var(--sp-xs);
  background: var(--canvas); color: var(--ink); font-size: var(--fs-fine); font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-pill);
}

.adintel-card-body { padding: var(--sp-sm); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adintel-card-title { font-size: var(--fs-caption); font-weight: 600; color: var(--ink); }
.adintel-card-sub { font-size: var(--fs-fine); color: var(--ink-80); }
.adintel-card-pub { font-size: var(--fs-fine); color: var(--ink-48); }
.adintel-card-meta { font-size: var(--fs-fine); color: var(--ink-48); }
.adintel-card :is(.adintel-card-title, .adintel-card-sub, .adintel-card-pub, .adintel-card-meta) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 수치 3칸 — 라벨 위, 값 아래. 칸 수가 고정이라 카드마다 높이가 같다. */
.adintel-card-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-xs);
  margin-top: var(--sp-xs); padding-top: var(--sp-xs); border-top: 1px solid var(--hairline);
}
.adintel-card-stat { display: flex; flex-direction: column; min-width: 0; }
.adintel-card-stat-l { font-size: var(--fs-fine); color: var(--ink-48); }
.adintel-card-stat-v { font-size: var(--fs-caption); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── 상세(트레이·옛 드로어 공용) ── */
.adintel-detail { display: flex; flex-direction: column; gap: var(--sp-lg); }
.adintel-detail--two { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--sp-xl); align-items: start; }
.adintel-detail-media { position: sticky; top: 0; } /* 수치를 내리는 동안 영상이 따라온다(2단일 때만 의미가 있다) */
.adintel-detail-video, .adintel-detail-poster {
  display: block; margin: 0 auto; height: min(56dvh, 520px); width: auto; max-width: 100%;
  aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2);
}
.adintel-detail-note { margin: var(--sp-xs) 0 0; font-size: var(--fs-fine); line-height: 1.5; color: var(--ink-48); }
.adintel-detail-main { display: flex; flex-direction: column; gap: var(--sp-lg); min-width: 0; }
.adintel-detail-badge {
  align-self: flex-start; background: var(--surface-2); color: var(--ink);
  font-size: var(--fs-fine); font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill);
}
.adintel-detail-h { margin: 0 0 var(--sp-xs); font-size: var(--fs-caption); font-weight: 600; color: var(--ink-80); }

.adintel-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--sp-md); }
.adintel-detail-stat-v { font-size: var(--fs-tagline); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.adintel-detail-stat-l { font-size: var(--fs-fine); color: var(--ink-48); }

/* 추이 — 잉크 단색 면+선(파랑 금지). 면은 옅게 깔아 선의 높낮이만 읽게 한다. */
.adintel-spark-svg { width: 100%; height: 72px; display: block; }
.adintel-spark-area { fill: var(--ink-48); opacity: .2; }
.adintel-spark-line { stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.adintel-spark-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-fine); color: var(--ink-48); font-variant-numeric: tabular-nums; }

/* 분포 — 목록이 아니라 막대. 어느 쪽이 큰지 눈으로 바로 갈린다. */
.adintel-bar-row { display: grid; grid-template-columns: minmax(0, 96px) 1fr auto; align-items: center; gap: var(--sp-sm); padding: 3px 0; font-size: var(--fs-fine); }
.adintel-bar-label { color: var(--ink-80); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adintel-bar-track { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.adintel-bar-fill { height: 100%; border-radius: inherit; background: var(--ink-48); }
.adintel-bar-row:first-of-type .adintel-bar-fill { background: var(--ink-80); } /* 1위만 한 단 진하게 — 색을 늘리지 않고 순위를 표시 */
.adintel-bar-val { color: var(--ink); font-variant-numeric: tabular-nums; }
.adintel-bar-solo { display: flex; justify-content: space-between; gap: var(--sp-sm); padding: 3px 0; font-size: var(--fs-fine); }

.adintel-kv-row { display: flex; justify-content: space-between; gap: var(--sp-sm); padding: 6px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-caption); }
.adintel-kv-row:last-child { border-bottom: 0; }
.adintel-kv-k { color: var(--ink-48); }
.adintel-kv-v { color: var(--ink-80); text-align: right; }

.adintel-detail-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--fs-caption); text-decoration: none; }
.adintel-detail-link:hover { text-decoration: underline; }
.adintel-detail-link:focus-visible { outline: none; box-shadow: var(--ring-focus, 0 0 0 2px var(--accent)); border-radius: var(--r-xs); }
.adintel-detail-caveat { margin: 0; padding-top: var(--sp-sm); border-top: 1px solid var(--hairline); font-size: var(--fs-fine); line-height: 1.5; color: var(--ink-48); }

/* 스켈레톤도 세로 미디어 모양으로 — 도착 순간 레이아웃이 튀지 않게 */
.adintel-detail-skel { grid-template-columns: 1fr; }
.adintel-detail-skel .skel-card { gap: var(--sp-md); }
.adintel-detail-skel .skel-thumb { aspect-ratio: 3 / 4; border-radius: var(--r-md); }

/* ── 새 셸(Framer 다크): 카드는 테두리 없는 표면 단차 ── */
body.shell-v2 .adintel-card { background: var(--surface-1); border-color: transparent; border-radius: var(--r-lg); }
@media (hover: hover) { body.shell-v2 .adintel-card:hover { background: var(--surface-2); border-color: transparent; } }
body.shell-v2 .adintel-card-stats { border-top-color: var(--hairline-soft, var(--hairline)); }
body.shell-v2 :is(.adintel-kv-row, .adintel-detail-caveat) { border-color: var(--hairline-soft, var(--hairline)); }

/* ── 좁은 화면: 열을 더 좁게 · 상세는 1단(옆 칸 sticky 해제) ── */
@media (max-width: 810px) {
  .adintel-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-sm); }
  .adintel-detail--two { grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); }
  .adintel-detail-media { position: static; }
  .adintel-detail-video, .adintel-detail-poster { height: min(52dvh, 420px); }
  .adintel-detail-stats { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--sp-sm); }
  .adintel-bar-row { grid-template-columns: minmax(0, 72px) 1fr auto; }
}