/* 새 셸 화면별 완성도 층 — trends. DESIGN.md(Framer) 준수 · body.shell-v2 스코프 */ /* ─────────────── 트렌드 ─────────────── */ body.shell-v2 .trend-subtabs-wrap { max-width: 100%; gap: var(--sp-sm); } body.shell-v2 .trend-subtabs { background: var(--surface-1); border: 0; padding: 4px; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } body.shell-v2 .trend-subtabs::-webkit-scrollbar { display: none; } body.shell-v2 .trend-subtabs button { flex: none; white-space: nowrap; font-weight: 500; color: var(--ink-48); padding: 8px 16px; } @media (hover: hover) { body.shell-v2 .trend-subtabs button:hover { color: var(--ink); } } /* 터치에선 방금 누른 탭에 hover 가 남아 선택이 둘로 보였다 */ body.shell-v2 .trend-subtabs button.on { background: var(--surface-3); color: var(--ink); box-shadow: none; } body.shell-v2 .trend-insight-mode-bar { margin-left: 0; } body.shell-v2 .trend-insight-mode-bar button { font-weight: 500; padding: 6px 12px; } body.shell-v2 .trend-insight-mode-bar button:hover { color: var(--ink); } body.shell-v2 .trend-insight-mode-bar button.on { background: var(--surface-2); color: var(--ink); } /* 카드 — 표면 단차 · 스포트라이트 광원 끔(카드마다 광원이 켜지면 페이지가 들뜬다) */ body.shell-v2 :is(.trend-wechat-card, .adintel-radar-card, .trend-card, .trend-news-card, .trend-dpanel, .trend-action-briefing, .trend-callout) { background: var(--surface-1); border-color: transparent; box-shadow: none; } body.shell-v2 :is(.trend-wechat-card, .adintel-radar-card, .trend-card, .trend-news-card):hover { background: var(--surface-2); border-color: transparent; box-shadow: none; } body.shell-v2 :is(.trend-card--clickable):focus-visible { outline: none; box-shadow: var(--ring-focus); } body.shell-v2 .rb-spotlight-card::before { display: none; } /* 스켈레톤 카드 보더 — 실카드처럼 새 셸에서는 사라진다(부착 시 보더가 갑자기 없어지는 튐 방지). ⚠️ 배경(--skel-card-bg)은 이미 var(--parchment)인데 framer.css 가 --parchment=--surface-1 로 맞춰둬 새로 안 정한다. */ body.shell-v2 :is(.trend-card-skel, .trend-wechat-card-skel) .skel-card { border-color: transparent; } body.shell-v2 .trend-rank-skel .skel-row { border-bottom-color: var(--hairline-soft); } /* 파란 글자 → 잉크(선택·링크가 아닌 곳) */ body.shell-v2 :is(.trend-section-title, .trend-rank-th.is-sorted, .trend-rank-caret) { color: var(--ink); } body.shell-v2 .trend-rank-tbl tbody :is(tr.is-top, tr.is-picked) .c-rank { color: var(--ink); } body.shell-v2 .trend-rank-status.is-first { background: var(--surface-2); color: var(--ink); } /* 안내·오류 — 테두리 없는 낮은 표면, 경고색은 점 하나로만 */ body.shell-v2 .trend-status-badge.trend-badge-warn { display: flex; align-items: center; gap: 10px; background: var(--surface-1); border: 0; border-radius: var(--r-md); color: var(--ink-80); padding: 12px 16px; font-weight: 500; } body.shell-v2 .trend-status-badge.trend-badge-warn::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); } @media (max-width: 810px) { body.shell-v2 .trend-subtabs button { min-height: 44px; padding: 0 16px; } body.shell-v2 .trend-insight-mode-bar button { min-height: 44px; } } /* ─────────────── 트렌드 보정 2차(캡처 확인 후) ─────────────── */ /* 트렌드 — 하위 탭 본문 간격이 30px+margin 으로 떠 있었다: 한 박자로 */ body.shell-v2 .trend-subtab-body { gap: var(--sp-lg); } @media (max-width: 810px) { body.shell-v2 .trend-root { padding: var(--sp-md); gap: var(--sp-lg); } } /* ─────────────── 트렌드 상세 상태(드로어·순위 상세) ─────────────── */ body.shell-v2 :is(.trend-wechat-drawer, .adintel-creative-drawer, .trend-insight-drawer) .btn.ep-drawer-close { border-color: transparent; color: var(--ink-48); } body.shell-v2 :is(.trend-wechat-drawer, .adintel-creative-drawer, .trend-insight-drawer) .btn.ep-drawer-close:hover { background: var(--surface-2); color: var(--ink); } /* 중국 동향 드로어 */ body.shell-v2 :is(.trend-wechat-kpi-tile, .trend-wechat-ranking) { background: var(--surface-1); border-color: transparent; border-radius: var(--r-lg); } body.shell-v2 .trend-wechat-hero-img { border-color: transparent; } body.shell-v2 .trend-wechat-chart-track { background: var(--surface-2); border-color: transparent; } body.shell-v2 .trend-wechat-chart-fill { background: var(--ink-80); } body.shell-v2 .trend-wechat-ratio-bar { border-color: transparent; } /* 일간 순위 상세 */ body.shell-v2 .trend-rank-tbl tbody tr.is-picked { background: var(--surface-2); } body.shell-v2 .trend-rank-detail { background: var(--surface-1); border-color: transparent; box-shadow: var(--shadow-float); } body.shell-v2 .trend-rank-trope { background: var(--surface-2); border-color: transparent; color: var(--ink-80); } body.shell-v2 .trend-rank-detail-link { background: var(--surface-2); border-color: transparent; color: var(--ink); text-decoration: none; } body.shell-v2 .trend-rank-detail-link:hover { background: var(--surface-3); } @media (max-width: 810px) { body.shell-v2 .trend-rank-detail-link { min-height: 44px; } body.shell-v2 .btn.trend-expand-btn { min-height: 44px; padding-inline: 4px; } body.shell-v2 .trend-rank-th { min-height: 44px; } body.shell-v2 .trend-rank-title { min-height: 44px; padding-block: 12px; } } /* ─────────────── 트렌드 글리프 → SVG 아이콘 ─────────────── */ /* 트렌드 분류 배지·긴급도 태그 — 아이콘+라벨. 긴급도는 빨간/파란 글자 대신 중립 글자, '즉시'만 아이콘이 danger 로 뚜렷하다. */ body.shell-v2 .trend-class-badge { gap: 0; } /* 간격은 아이콘의 margin 이 준다(옛 셸과 한 곳) — 새 셸 모양 무변 */ body.shell-v2 :is(.trend-class-badge, .trend-urgency-tag) svg { flex: none; } body.shell-v2 .trend-urgency-tag { gap: 4px; letter-spacing: var(--ls-fine); } body.shell-v2 :is(.trend-urgency-tag--now, .trend-urgency-tag--soon) { color: var(--ink-80); } body.shell-v2 .trend-urgency-tag--now svg { color: var(--danger); } /* 순위 이동·모멘텀 방향 — 화살표 색(상승/하락)은 데이터 인코딩이라 유지, 모양만 아이콘 */ body.shell-v2 :is(.trend-rank-move, .trend-mom-dir) { display: inline-flex; align-items: center; gap: 0; } body.shell-v2 .trend-rank-caret { display: inline-flex; align-items: center; } /* 일간 순위 소재 등급 — 글리프 대신 SVG 별·경고. 빈 별은 흐리게(색은 등급 계열 유지). */ body.shell-v2 .trend-rank-grade { display: inline-flex; align-items: center; gap: 1px; letter-spacing: 0; vertical-align: middle; } body.shell-v2 .trend-rank-grade svg { flex: none; } body.shell-v2 .trend-rank-grade .is-off { opacity: 0.35; } /* 순위표 가로 넘침 신호 — 넘친 쪽 가장자리를 페이드(표 JS 가 is-more-left/right 를 붙인다) */ body.shell-v2 .trend-rank-scroll.is-more-right { -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent); mask-image: linear-gradient(to right, black calc(100% - 48px), transparent); } body.shell-v2 .trend-rank-scroll.is-more-left { -webkit-mask-image: linear-gradient(to left, black calc(100% - 48px), transparent); mask-image: linear-gradient(to left, black calc(100% - 48px), transparent); } body.shell-v2 .trend-rank-scroll.is-more-left.is-more-right { -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent); } /* 순위 상세 — 등급·이동 행은 아이콘 + 글자 */ body.shell-v2 .trend-rank-detail-v:has(> svg, > .trend-rank-grade, > .trend-rank-detail-move) { display: inline-flex; align-items: center; gap: 6px; } body.shell-v2 .trend-rank-detail-move { display: inline-flex; align-items: center; } /* ─────────────── 트렌드 상태 문구(trendStateMsg.js) — 실패 + 재시도 · 빈 상태 ─────────────── */ /* 빈 상태·오류 상태의 모양은 2026-09-18 부터 chrome-base.css ③ 이 소유한다(제품 전역 공용으로 승격). * 여기 남는 것은 트렌드 전용 변형뿐이다 — 같은 규칙을 두 파일에 두면 한쪽만 고쳐져 갈라진다. */ body.shell-v2 .trend-badge-pending { background: var(--surface-1); border-color: transparent; color: var(--ink-80); } /* ─────────────── 상세 트레이(web/stages/trendTray.js) ─────────────── * 크기 3단: 기본 640(짧은 판단) · --lg 1040(매체+수치 2단) · tray--wide 1440(정독 — tray.css 소유). * 머리의 이웃 넘기기(‹ 3 / 50 ›)는 닫기 버튼 왼쪽에 선다. 내용 레이아웃은 서브탭별 web/ui/trends/*.css. * ⚠️ 넘기기와 닫기는 **같은 줄에 서는 한 줄짜리 컨트롤**이다 — 위치를 각자 숫자로 적으면 어긋난다. * 실측(2026-09-21 오너 신고 *"하단 트레이에 ui 정렬 이상함"*): 넘기기 top 22/26 · 닫기 top 20/24 로 2px 어긋나 있었고, * 넘기기만 배경이 투명이라 세 단추 중 하나만 동그라미가 없었다. 이제 둘 다 tray.css 의 닫기 값(--tray-ctl-*)을 읽는다. * ⚠️ 머리 오른쪽 여백은 넘기기 폭에서 **계산한다**(전엔 148px 로 박혀 있었고, 넓은 트레이에서는 tray.css 의 * 단축 padding 이 그걸 덮어 67px 로 떨어져 긴 제목이 ‹ 밑으로 흘렀다 — 그래서 넓은 판을 한 단계 더 구체적인 선택자로 잡는다). */ body.shell-v2 dialog.tray.trend-tray--lg { width: min(1040px, calc(100vw - var(--sp-xl))); } body.shell-v2 dialog.tray.trend-tray { --trend-nav-w: 124px; /* 32(‹) + 2 + 56(라벨) + 2 + 32(›) — 아래 두 규칙이 이 한 값을 나눠 쓴다 */ --trend-nav-right: calc(var(--tray-ctl-right) + 32px + var(--sp-xs)); /* 닫기 버튼 왼쪽 변 */ } body.shell-v2 dialog.tray.trend-tray .tray-desc:empty { display: none; } body.shell-v2 .trend-tray-nav { position: absolute; top: var(--tray-ctl-top); right: var(--trend-nav-right); display: inline-flex; align-items: center; gap: 2px; } body.shell-v2 .trend-tray-nav[hidden] { display: none; } @media (min-width: 811px) { /* ≤810 은 넘기기가 흐름(static)으로 내려오므로 여백을 비울 이유가 없다 */ body.shell-v2 dialog.tray.trend-tray .tray-head, body.shell-v2 dialog.tray.trend-tray.tray--wide .tray-head { /* tray.css 의 넓은 판 단축(0,3,2)을 이기려면 한 단계 더 구체적이어야 한다 */ padding-right: calc(var(--trend-nav-right) + var(--trend-nav-w) + var(--sp-sm)); } } body.shell-v2 .trend-tray-nav-label { min-width: 56px; text-align: center; font-size: var(--fs-fine); color: var(--ink-48); font-variant-numeric: tabular-nums; } body.shell-v2 .trend-tray-nav-btn { appearance: none; border: 0; background: var(--tray-ctl-bg); color: var(--ink-48); cursor: pointer; /* 닫기와 같은 알약 — 세 단추가 한 줄로 읽힌다 */ /* ⚠️ padding: 0 을 빼면 안 된다 — 맨