/* top30 스타일 — Clever Insight 통합 토큰(theme.css) 기반.
   기존 변수(--panel,--ink,--muted,--accent,--teal…)를 공용 --c-* 토큰에서 파생시켜
   라이트/다크가 메인 사이트와 함께 전환되도록 함. 레이아웃 규칙은 원본 유지. */
:root {
  --panel: rgb(var(--c-surface) / 0.92);
  --line: rgb(var(--c-outline) / 0.55);
  --ink: rgb(var(--c-on-surface));
  --muted: rgb(var(--c-on-surface-variant));
  --accent: rgb(var(--c-primary));
  --accent-soft: rgb(var(--c-primary) / 0.16);
  --teal: rgb(var(--c-secondary));
  --shadow: var(--shadow-card);
  --surface-2: rgb(var(--c-surface-container));
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

html { font-size: 112%; scrollbar-gutter: stable; }  /* 메인과 동일 확대 + 스크롤바 자리 항상 예약(레이아웃 흔들림 방지) */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding-top: 6.5rem;          /* 고정 네비 공간 확보 (메인과 동일 비율) */
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgb(var(--c-primary) / 0.12), transparent 32%),
    radial-gradient(circle at top right, rgb(var(--c-secondary) / 0.10), transparent 30%),
    rgb(var(--c-bg));
  background-attachment: fixed;
  font-family: "Noto Sans KR", sans-serif;
  transition: background-color .35s ease, color .35s ease;
}

/* 메인 사이트 네비와 동일 비율(rem) — 로고/높이/간격/폰트 일치 */
.ci-topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  font-family: "Inter", sans-serif;   /* 메인 네비와 동일 글꼴(한글=시스템 폴백) → 세로 위치 일치 */
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  /* 메인 max-w-7xl + px-10 처럼 콘텐츠를 80rem로 중앙 정렬 */
  padding: 1rem max(2.5rem, calc((100% - 80rem) / 2));
  background: rgb(var(--nav-bg) / var(--nav-alpha));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(var(--glass-border) / var(--glass-border-alpha));
  transition: background-color .35s ease, border-color .35s ease;
}
.ci-topnav-left { display: flex; align-items: center; gap: 2.5rem; }
.ci-topnav-logo { display: inline-flex; transition: transform .2s ease; }
.ci-topnav-logo:hover { transform: scale(1.05); }
.ci-topnav-logo img { height: 3.5rem; width: auto; display: block; }   /* 메인 h-14 */
.ci-topnav-menu { display: flex; align-items: center; gap: 2rem; }
.ci-topnav-menu a {
  color: rgb(var(--c-on-surface)); font-weight: 700; font-size: 1.125rem; line-height: 1.75rem;  /* 메인 text-lg */
  text-decoration: none; transition: color .2s ease;
}
.ci-topnav-menu a:hover, .ci-topnav-menu a.active { color: rgb(var(--c-primary)); }
.ci-topnav-right { display: flex; align-items: center; gap: .75rem; }
.ci-topnav .nav-login {
  color: rgb(var(--c-on-surface-variant)); font-weight: 700; font-size: 1rem; line-height: 1.5rem;  /* 메인 text-base 일치 */
  text-decoration: none; transition: color .2s ease;
}
.ci-topnav .nav-login:hover { color: rgb(var(--c-on-surface)); }
.ci-topnav .nav-cta {
  background: rgb(var(--c-primary)); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.5rem;  /* 메인 text-base + 고정 줄높이로 버튼 크기 일치 */
  padding: .625rem 1.25rem; border-radius: .75rem; text-decoration: none;
  box-shadow: 0 8px 20px rgb(var(--c-primary) / .3); transition: background-color .2s ease, transform .2s ease;
}
.ci-topnav .nav-cta:hover { background: rgb(var(--c-primary-dark)); transform: translateY(-1px); }

@media (max-width: 720px) {
  .ci-topnav { padding: .75rem 1.25rem; }
  .ci-topnav-menu, .ci-topnav .nav-cta { display: none; }
  .ci-topnav-left { gap: 1rem; }
  .ci-topnav-logo img { height: 2.5rem; }   /* 메인 h-10 */
}

/* 메인 사이트와 연결하는 상단바 (#5 로고 → 홈) */
.ci-topbar {
  width: min(1400px, calc(100% - 32px));
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ci-topbar-logo img { height: 44px; width: auto; display: block; }
.ci-topbar-right { display: flex; align-items: center; gap: 14px; }
.ci-topbar-link {
  color: var(--muted);
  font-family: "Space Grotesk", "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s ease;
}
.ci-topbar-link:hover { color: rgb(var(--c-primary)); }

.page-shell {
  width: min(1400px, calc(100% - 32px));
  margin: 18px auto 40px;
}

.hero {
  display: grid;
  grid-template-columns: 1.8fr 0.9fr;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgb(var(--c-surface) / 0.92), rgb(var(--c-surface-container) / 0.82)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='rgba(139,92,246,0.10)' stroke-width='1'%3E%3Cpath d='M0 90h180M90 0v180'/%3E%3Ccircle cx='90' cy='90' r='50'/%3E%3C/g%3E%3C/svg%3E");
  box-shadow: var(--shadow);
}

.eyebrow,
.panel-kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero h1,
.panel h2 {
  margin: 0;
  font-family: "Space Grotesk", "Noto Sans KR", sans-serif;
  line-height: 1.05;
}

.hero h1 { font-size: clamp(34px, 4vw, 56px); }
.hero-text { margin: 16px 0 0; color: var(--muted); line-height: 1.7; }
.hero-meta { display: grid; align-content: center; }

.meta-card,
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.meta-card { padding: 18px 20px; }
.meta-label { display: block; margin-bottom: 10px; color: var(--muted); font-size: 0.8125rem; }
.meta-card strong { font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; }

.dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: 20px;
  margin-top: 20px;
}

.panel { padding: 22px; }
.panel-day { grid-row: span 2; }

.panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-head-stack {
  flex-direction: column;
  align-items: stretch;
}

.controls { display: flex; align-items: center; gap: 12px; }

.date-selects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 140px));
  gap: 10px;
}

.search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.range-tabs-wrap {
  display: flex;
  align-items: end;
  height: 100%;
}

.select-field,
.search-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.75rem;
}

.select-field select,
.search-field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
}

.window-tabs,
.range-tabs,
.filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-tabs {
  margin-top: 2px;
}

.window-tab,
.range-tab,
.filter-tab {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.range-tab {
  min-width: 56px;
}

/* 활성 탭 = 브랜드 퍼플(양 테마 공통) */
.window-tab.active,
.range-tab.active,
.filter-tab.active {
  background: rgb(var(--c-primary));
  border-color: rgb(var(--c-primary));
  color: #fff;
}

.window-tab:hover,
.range-tab:hover,
.filter-tab:hover,
.theme-card:hover,
.item-card:hover {
  transform: translateY(-2px);
}

.day-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.day-chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: rgb(var(--c-primary-light));
  font-size: 0.8125rem;
  font-weight: 700;
}

.search-results { margin-bottom: 18px; }

.search-results-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.item-list,
.theme-grid,
.theme-detail-list {
  display: grid;
  gap: 12px;
}

.item-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgb(var(--c-surface) / 0.72);
  transition: transform 180ms ease, border-color 180ms ease;
}

.item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.item-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.item-rank {
  color: var(--accent);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
}

.item-name { margin: 0; font-size: 1.25rem; }
/* 상승률 TOP30 → 한국식 상승=빨강 */
.item-change { color: rgb(var(--c-up)); font-family: "Space Grotesk", sans-serif; font-size: 1.125rem; font-weight: 700; }
.item-reason { margin: 12px 0 0; color: var(--muted); line-height: 1.6; font-size: 0.875rem; }

.theme-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.theme-tag {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgb(var(--c-secondary) / 0.14);
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 700;
}

.theme-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.theme-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgb(var(--c-surface) / 0.95), rgb(var(--c-surface-container) / 0.92));
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.theme-card.active {
  border-color: rgb(var(--c-primary) / 0.5);
  box-shadow: inset 0 0 0 1px rgb(var(--c-primary) / 0.25);
}

.theme-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.theme-card h3 { margin: 0; font-size: 1.125rem; }

.theme-representative {
  color: var(--ink);
  font-size: 0.75rem;
  white-space: nowrap;
  font-weight: 500;
}

.theme-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.theme-stats strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.0625rem;
}

.theme-detail-empty {
  padding: 26px;
  border-radius: var(--radius-md);
  background: rgb(var(--c-surface-container) / 0.9);
  color: var(--muted);
}

.theme-detail-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.theme-meta-pill {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

.theme-detail-item {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgb(var(--c-surface) / 0.78);
}

.detail-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.detail-stock { font-weight: 700; }
.detail-date { color: var(--muted); font-size: 0.8125rem; margin-top: 4px; }
.theme-detail-score-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
}

.theme-score-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(var(--c-secondary) / 0.14);
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 700;
}

.theme-score-meta {
  color: var(--muted);
  font-size: 0.75rem;
}

.detail-reason { margin: 10px 0 0; color: var(--muted); line-height: 1.6; font-size: 0.875rem; }

@media (max-width: 1080px) {
  .hero,
  .dashboard { grid-template-columns: 1fr; }
  .panel-day { grid-row: auto; }
}

@media (max-width: 720px) {
  .ci-topbar,
  .page-shell {
    width: min(100% - 16px, 1400px);
  }
  .page-shell { margin: 12px auto 24px; }

  .hero,
  .panel { padding: 18px; }

  .panel-head,
  .search-bar {
    flex-direction: column;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .range-tabs-wrap {
    align-items: stretch;
  }

  .date-selects {
    grid-template-columns: 1fr;
  }

  .theme-card-head {
    flex-direction: column;
    align-items: flex-start;
  }
}