/* ─────────────────────────────────────────────────────────────────────────
 * Dashboard — prototype-v2 SoT: docs/prototype-v2/frontend/user-portal/dashboard/index.html
 *
 * 섹션 순서:
 *   1. Hero (login 분기)
 *   2. Index Ticker — 전체 지수 자동 가로 흐름 (hover 정지 / reduced-motion 폴백)
 *   3. Market Pulse Editorial Cards (가로 스크롤)
 *   4. Sector Pulse — 4섹터 × primary index + 30일 sparkline (sector-pulse API 실데이터)
 *   5. 3-Panel Row — 최신 동향(뉴스) | 지능형 맞춤 알림 | 마켓 캘린더 (prototype 양식)
 *   (2026-06: 공공기관 동향 제거, 캘린더 추가, 일반인/전문가 토글은 GNB 로 이동 — useViewMode)
 *
 * mobile-first (ADR 0016) — min-width 768px / 1024px breakpoint.
 * ──────────────────────────────────────────────────────────────────────── */

.dash-container {
  padding: 8px 20px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .dash-container { padding: 12px 40px; }
}

/* ─── 1. Hero ─────────────────────────────────────────────────────── */
/* 검토의견서 #7(A안) — 단일 히어로 박스 + 우측 서브 패널로 시각 구분 */
.dash-hero {
  background: linear-gradient(135deg, #0a1628 0%, #0d2040 50%, #162840 100%);
  color: white;
  padding: 24px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.55);
  margin-bottom: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1024px) {
  /* align-items: stretch → hero-main 이 min-height(200px)까지 늘어나 CTA 를 바닥으로 밀 수 있음.
     justify-content: space-between → side 패널을 오른쪽 끝으로 (프로토타입 .main-hero-card 정합). */
  .dash-hero { padding: 36px 44px; flex-direction: row; justify-content: space-between; align-items: stretch; min-height: 200px; }
}
.dash-hero::before,
.dash-hero::after {
  content: none;
}
.dash-hero::before {
  right: -40px; top: -40px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0, 113, 205, 0.1) 0%, transparent 70%);
}
.dash-hero::after {
  left: 42%; bottom: -80px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(0, 113, 205, 0.05) 0%, transparent 70%);
}
/* hero-main 세로 flex — 타이틀/설명(추후 LLM 채움) 위, CTA 는 margin-top:auto 로 바닥. */
.dash-hero-main { z-index: 1; flex: 1; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .dash-hero-main { padding-right: 32px; max-width: 640px; } }
.dash-hero-title {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 10px;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
@media (min-width: 768px) { .dash-hero-title { font-size: 24px; } }
@media (min-width: 1024px) { .dash-hero-title { font-size: 26px; } }
.dash-hero-title span { color: #2f9fe0; }
.dash-hero-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 20px;
  line-height: 1.7;
}
@media (min-width: 768px) { .dash-hero-desc { font-size: 14px; } }
.dash-hero-bullets {
  margin: 0 0 20px;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.7;
}
.dash-hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; max-width: 440px; }
.dash-hero-cta {
  /* 두 CTA(AI 분석 시작하기 · 리포트 보기) 동일 폭 — flex 균등분할 + 중앙정렬 */
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  background: #0071cd;
  color: white;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0, 113, 205, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}
.dash-hero-cta:hover { background: #005aa8; transform: translateY(-1px); }
/* 모바일: 두 CTA 를 같은 전체폭 세로 스택으로 통일(주+보조 버튼 정렬 관례) */
@media (max-width: 767px) {
  .dash-hero-ctas { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .dash-hero-cta { width: 100%; justify-content: center; }
}
.dash-hero-cta.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.dash-hero-cta.secondary:hover { background: rgba(255, 255, 255, 0.14); }

.dash-hero-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
  min-width: 0;
  /* #7(A안) — 같은 박스 안에서 별도 컴포넌트로 읽히는 서브 패널 */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
}
@media (min-width: 1024px) { .dash-hero-side { min-width: 240px; flex-shrink: 0; } }
.dash-hero-user-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 18px;
}
.dash-hero-user-greet { font-size: 11px; color: rgba(255, 255, 255, 0.5); margin-bottom: 3px; font-weight: 600; }
.dash-hero-user-name { font-size: 18px; font-weight: 900; }
.dash-hero-user-stats { display: flex; gap: 8px; }
.dash-hero-user-stat {
  flex: 1;
  background: rgba(0, 113, 205, 0.12);
  border: 1px solid rgba(0, 113, 205, 0.25);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.dash-hero-user-stat:hover { transform: scale(1.03); opacity: 0.85; }
.dash-hero-user-stat.alt {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.dash-hero-user-stat-num { font-size: 22px; font-weight: 900; color: #2f9fe0; line-height: 1; }
.dash-hero-user-stat.alt .dash-hero-user-stat-num { color: white; }
.dash-hero-user-stat-label { font-size: 10px; color: rgba(255, 255, 255, 0.55); margin-top: 4px; }
.dash-hero-user-action {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  padding: 8px 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dash-hero-user-action:hover { background: rgba(255, 255, 255, 0.13); }

.dash-hero-guest-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  border-radius: 12px;
  text-align: center;
}
.dash-hero-guest-card i { font-size: 20px; display: block; margin-bottom: 6px; }
.dash-hero-guest-title { font-size: 12px; font-weight: 700; }
.dash-hero-guest-desc { font-size: 10px; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
.dash-hero-login-btn {
  background: #2f9fe0;
  color: #0f172a;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 113, 205, 0.3);
}

.dash-error-banner {
  background: var(--bg-accent-red, #fee2e2);
  /* #9 — danger(#dc2626)는 빨강 틴트 위 4.39:1 미달 → 라이트는 진한 적색으로 4.5:1 충족 */
  color: #b91c1c;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: var(--spacing-md);
  font-size: 13px;
}
[data-theme='dark'] .dash-error-banner { color: var(--danger); }

/* ─── 2. Index Ticker — 전체 지수 자동 가로 흐름 ──────────────────── */
.dash-ticker {
  background: #1e293b;
  border-radius: 12px;
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
  position: relative;
}
.dash-ticker-track {
  display: flex;
  width: max-content;
  animation: dash-ticker-scroll 60s linear infinite;
}
/* hover/focus 시 정지 — 움직이는 표적 클릭 어려움 방지 (WCAG 2.2.2) */
.dash-ticker:hover .dash-ticker-track,
.dash-ticker:focus-within .dash-ticker-track {
  animation-play-state: paused;
}
.dash-ticker-group { display: flex; flex-shrink: 0; }
@keyframes dash-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.dash-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  white-space: nowrap;
  color: white;
  text-decoration: none;
  transition: background 0.2s ease;
}
.dash-ticker-item:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.dash-ticker-label { font-weight: 800; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.dash-ticker-value { font-size: 15px; font-weight: 900; font-family: monospace; }
.dash-ticker-unit {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
}
/* 등락 색 — 증권 관례(상승 빨강 / 하락 파랑). .dash-ticker 는 테마 무관 항상 다크 배경이라
   전역 --color-up/down(라이트 진한 톤)은 대비가 낮다 → 항상-다크 표면 전용 토큰(--trend-*-dark,
   variables.css)을 쓴다. 전역 토큰을 덮지 않아 티커 내 다른 요소에 영향 없음. 0/양수=up(▲). */
.dash-ticker-chg { font-size: 11px; font-weight: 800; }
.dash-ticker-chg.up { color: var(--trend-up-dark); }
.dash-ticker-chg.dn { color: var(--trend-down-dark); }
.dash-ticker-empty {
  display: block;
  /* #9 — 0.45 백색(4.15:1) → slate-400(5.7:1) 로 상향 (다크 스트립 #1e293b 위) */
  color: #94a3b8;
  font-size: 12px;
  padding: 14px 24px;
}
/* 모션 민감 사용자 — 자동이동 끄고 수동 가로 스크롤로 폴백 (복제본 숨김) */
@media (prefers-reduced-motion: reduce) {
  .dash-ticker { overflow-x: auto; scrollbar-width: thin; }
  .dash-ticker-track { animation: none; width: auto; }
  .dash-ticker-group[aria-hidden="true"] { display: none; }
}

/* ─── 공통 섹션 헤더 ──────────────────────────────────────────────── */
.dash-section-head { margin: 32px 0 16px; }
.dash-section-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
}
@media (min-width: 768px) { .dash-section-title { font-size: 18px; } }
.dash-section-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #0071cd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}
.dash-section-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  padding-left: 42px;
}
@media (min-width: 768px) { .dash-section-desc { font-size: 13px; } }

/* ─── 3. Market Pulse — 가로 스크롤 카드 ──────────────────────── */
/* 좌/우 버튼 캐러셀 — 버튼이 스크롤을 구동하므로 스크롤바는 숨김(터치 스와이프는 유지). */
/* 지수별 AI 시황 브리핑 — 카테고리 칩 필터 + 가로 슬라이드 카드. */
.dash-brief-panel {
  margin: 0 0 var(--spacing-lg);
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.dash-brief-panel .dash-section-head { margin: 0 0 14px; }
.dash-brief-panel .dash-section-title { font-size: 15px; }
.dash-brief-panel .dash-section-title i { color: var(--primary); font-size: 14px; }
.dash-brief-panel .dash-section-desc { padding-left: 24px; font-size: 12px; }
.dash-brief-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.dash-brief-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dash-brief-chip:hover { color: var(--text-main); border-color: var(--text-muted); }
.dash-brief-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.dash-brief-chip i { font-size: 11px; }
/* #13 — 카테고리 색점 */
.dash-brief-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-brief-chip.is-active .dash-brief-chip-dot { background: #fff !important; }

/* 가로 슬라이드(캐러셀) — 카드가 한 줄로 흐르고 넘치면 가로 스크롤/스와이프. */
.dash-brief-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  /* 검토의견서 #8 — overflow-x:auto 는 overflow-y 도 auto 로 만들어(호버 리프트 -4px +
     box-shadow 가 세로로 삐져나옴) 상단이 잘렸다. 상/하 여백을 그림자+리프트 수용 크기로
     대칭(16px) 확보 — 매직넘버 아님(리프트 4 + 그림자 ~5 + 여유). */
  padding: 4px 2px 8px;
  margin-bottom: 0;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.dash-brief-carousel > .dash-pulse-card {
  flex: 0 0 330px;
  scroll-snap-align: start;
}

/* ── 스켈레톤 로더 — 데이터 도착 전 빈 화면 대신 콘텐츠 윤곽을 먼저 그린다 ── */
.skel {
  position: relative;
  overflow: hidden;
  background: var(--bg-muted, rgba(148, 163, 184, 0.16));
  border-radius: 6px;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  animation: skelShimmer 1.25s ease-in-out infinite;
}
@keyframes skelShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

.dash-brief-skel { flex: 0 0 320px; display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.skel-line { height: 12px; }
.skel-badge { width: 84px; height: 20px; border-radius: 999px; }
.skel-title { width: 78%; height: 18px; }
.skel-value { width: 46%; height: 26px; }
.skel-spark { width: 100%; height: 40px; border-radius: 8px; }
.skel-block { width: 100%; height: 64px; border-radius: 10px; }

.dash-newsfeed-skel { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
.dash-newsfeed-skel .skel-line:first-child { width: 88%; height: 14px; }
.dash-newsfeed-skel .skel-line:last-child { width: 40%; height: 11px; }

.dash-pulse-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px;
  text-align: center;
}
.dash-pulse-card {
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease;
}
.dash-pulse-card:hover { border-color: var(--primary-border, var(--primary)); background: var(--bg-muted); }
.dash-pulse-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash-pulse-source { display: flex; align-items: center; gap: 8px; }
.dash-pulse-source-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}
.dash-pulse-source-name {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 800;
  letter-spacing: 0.5px;
}
.dash-pulse-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.5px;
}
.dash-pulse-value { display: flex; align-items: baseline; gap: 6px; }
.dash-pulse-value-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--text-main);
  font-family: 'Inter', monospace;
}
.dash-pulse-value-unit { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.dash-pulse-sparkline { height: 40px; }
.dash-pulse-related {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-pulse-related li {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
/* (.dash-pulse-related li i — 카드 보조텍스트 아이콘 제거(검토의견서 #10) 후 사문. 제거.) */
.dash-pulse-related-link {
  color: inherit;
  text-decoration: none;
}
.dash-pulse-related-link:hover {
  color: var(--text-main);
  text-decoration: underline;
}
.dash-pulse-ai {
  margin-top: auto;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--ai-border-l);
  border-radius: 8px;
  padding: 12px 14px;
}

@media (max-width: 520px) {
  .dash-brief-panel { padding: 16px 14px; }
  .dash-brief-panel .dash-section-desc { padding-left: 0; line-height: 1.55; }
  .dash-brief-carousel > .dash-pulse-card { flex-basis: min(300px, calc(100vw - 60px)); }
}
.dash-pulse-ai-label {
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dash-pulse-ai-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
/* renderMarkdown 출력은 <p> 래핑 — 카드 안에서 여백 제거 */
.dash-pulse-ai-text p { margin: 0; }
.dash-pulse-ai-text p + p { margin-top: 6px; }
.dash-pulse-ai-cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

/* 카드형 Link hover 시 global a:hover { text-decoration: underline } 충돌 무력화. */
.dash-hero-cta:hover,
.dash-hero-user-stat:hover,
.dash-hero-user-action:hover,
.dash-hero-login-btn:hover,
.dash-newsfeed-more:hover,
.dash-newsfeed-item-title:hover,
.dash-pulse-ai-cta:hover {
  text-decoration: none;
}

/* ─── 5. Compact News Feed ────────────────────────────────────── */
.dash-newsfeed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: var(--spacing-lg);
}
@media (min-width: 1024px) { .dash-newsfeed { grid-template-columns: 1fr 1fr; } }
.dash-newsfeed-col {
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0; /* grid 1fr 의 min-content 팽창 차단 — 긴 제목이 컬럼을 못 벌리게 */
}
.dash-newsfeed-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash-newsfeed-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.dash-newsfeed-more {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dash-newsfeed-more:hover { color: var(--primary); }
.dash-newsfeed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-newsfeed-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }
/* 필터+보충(#769) — 관심 매칭 블록 뒤 보충 블록 구분선 */
.dash-newsfeed-fill-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 11px; font-weight: 700; color: var(--text-muted);
  white-space: nowrap;
}
.dash-newsfeed-fill-divider::before,
.dash-newsfeed-fill-divider::after {
  content: ''; height: 1px; background: var(--glass-border); flex: 1;
}
.dash-newsfeed-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-newsfeed-item:last-child { border-bottom: none; }
.dash-newsfeed-item-title {
  /* 검토의견서 #14 — 본문 최소 14px(KWCAG 가독성) */
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  text-decoration: none;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-newsfeed-item-title:hover { color: var(--primary); }
.dash-newsfeed-item-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.dash-newsfeed-item-meta span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-newsfeed-item-meta span:last-child { flex-shrink: 0; }

/* ─── 6. 1-Panel — 지능형 맞춤 알림 (글로벌 해상 리스크 2026-05-31 제거) ─── */
.dash-one-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: var(--spacing-lg);
}

.dash-panel-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 16px;
  text-align: center;
  line-height: 1.5;
}

/* ─── 내 관심 현황 ─────────────────────────────────────────────── */
.dash-interest-status {
  margin-bottom: var(--spacing-lg);
  padding: 16px 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.dash-interest-status[hidden] { display: none; }
.dash-interest-head { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 10px; }
.dash-interest-title { flex: none; color: var(--text-main); font-size: 15px; font-weight: 800; }
.dash-interest-title i { margin-right: 4px; color: #E9A400; }
.dash-interest-note { color: var(--text-muted); font-size: 12px; }
.dash-interest-manage {
  position: relative;
  z-index: 2;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 11px;
  min-height: 38px;
  border: 1px solid var(--primary-border, var(--primary));
  border-radius: 8px;
  background: var(--primary-muted);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}
.dash-interest-manage > * { pointer-events: none; }
.dash-interest-manage::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: '';
}
.dash-interest-manage:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}
.dash-interest-grid { display: grid; grid-template-columns: 1fr; gap: 6px 24px; }
@media (min-width: 640px) { .dash-interest-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1024px) { .dash-interest-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.dash-interest-item { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 0; color: var(--text-main); font-size: 13px; text-decoration: none; }
.dash-interest-item:hover { color: var(--primary); }
.dash-interest-topic:hover { color: var(--text-main); }
.dash-interest-tag { flex: none; padding: 0 5px; border: 1px solid var(--glass-border); border-radius: 4px; color: var(--text-muted); font-size: 10px; font-weight: 800; }
.dash-interest-tag.index { border-color: var(--primary); color: var(--primary); }
.dash-interest-name { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dash-interest-value { flex: none; font-weight: 800; }
.dash-interest-change { flex: none; font-weight: 800; }
.dash-interest-change.up { color: var(--danger); }
.dash-interest-change.down { color: var(--primary); }
.dash-interest-counts { display: inline-flex; flex: none; align-items: center; gap: 5px; margin-left: auto; }
.dash-interest-count-link {
  padding: 2px 7px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}
.dash-interest-count-link.news { color: var(--primary); }
.dash-interest-count-link.report { color: var(--secondary, #7c3aed); }
.dash-interest-count-link:hover { border-color: currentColor; background: var(--bg-surface); text-decoration: none; }
@media (max-width: 520px) {
  .dash-interest-head { align-items: flex-start; flex-wrap: wrap; }
  .dash-interest-note { width: 100%; order: 3; }
  .dash-interest-item { padding: 7px 0; }
  .dash-interest-topic { flex-wrap: wrap; }
  .dash-interest-counts { width: 100%; margin-left: 0; padding-left: 43px; }
}

/* ─── 5. 2-Panel Row — 최신 동향 | 마켓 캘린더 (prototype main 정합, #206) ──────── */
.dash-three-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: var(--spacing-lg);
  align-items: stretch;
}
/* grid 아이템 min-content 팽창 차단 — 캘린더 카드가 1fr 트랙(모바일 296px)을 뚫고
   429px 로 벌어져 페이지 전체가 축소 렌더되는 문제 가드 */
.dash-three-panel > * { min-width: 0; }
@media (min-width: 768px) { .dash-three-panel { grid-template-columns: repeat(2, 1fr); } }

/* 마켓 캘린더 패널 */
.dash-cal-card {
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-three-panel > .dash-newsfeed-col,
.dash-three-panel > .dash-cal-card {
  box-sizing: border-box;
  height: 430px;
}
.dash-cal-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.dash-cal-filters::-webkit-scrollbar { display: none; }
.dash-cal-filter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dash-cal-filter:hover { color: var(--text-main); border-color: var(--text-muted); }
.dash-cal-filter.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.dash-cal-list { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 2px; overflow-y: hidden; }
/* 위젯 — 날짜별 그룹 + 우측 섹터 색 태그(프로토타입 정합) */
.dash-cal-group-date { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--text-secondary); padding: 10px 0 4px; }
.dash-cal-group-date i { color: var(--primary); font-size: 11px; }
.dash-cal-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--glass-border); padding: 11px 4px; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.dash-cal-row:hover { background: var(--bg-darker); }
.dash-cal-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-cal-row-title { font-size: 14px; font-weight: 700; color: var(--text-main); }   /* 검토의견서 #14 — 본문 최소 14px */
.dash-cal-row-desc { font-size: 14px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* #14 — 위계는 색·굵기로 */
.dash-cal-row-tag { flex-shrink: 0; font-size: 11px; font-weight: 800; }
.dash-news-row { color: inherit; text-decoration: none; }
.dash-news-row:hover { text-decoration: none; }
.dash-news-row .dash-cal-row-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.dash-news-row .dash-cal-row-tag {
  max-width: 92px;
  overflow: hidden;
  color: var(--primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .dash-three-panel > .dash-newsfeed-col,
  .dash-three-panel > .dash-cal-card { height: 410px; }
  .dash-news-row .dash-cal-row-tag { max-width: 72px; }
}
/* 검토의견서 #14 / 이슈 #94 — 아래 캘린더 이벤트 카드 규칙(.dash-cal-event* · .dash-cal-date* · .dash-cal-body)은
   현재 마크업에서 사용되지 않는 죽은 규칙이라 제거했다. 실제 렌더 경로는 위 .dash-cal-row* 이며
   본문 최소 14px 기준은 그쪽에 적용한다. (dashboard/index.html 위젯 · calendar 전체 페이지 공통) */