/* ============================================================
   ticker.bullstory.io — components.css v1.0
   글래스모피즘 UI 컴포넌트 라이브러리

   의존성: tokens.css, base.css
   성능 규칙: 뷰포트당 backdrop-filter 요소 ≤ 5개
   ============================================================ */

/* ============================================================
   1. 글래스 카드 (Glass Card)
   — 핵심 UI 컴포넌트. 보고서 섹션, 기능 소개 등
   ============================================================ */

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-smooth),
    transform var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

/* 상단 하이라이트 — 유리 상단 edge 빛줄기 */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glass-sheen) 50%,
    transparent 100%
  );
  opacity: 0.6;
  pointer-events: none;
}

.glass-card:hover {
  background: var(--glass-bg-hover);
  border: var(--glass-border-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.glass-card:active {
  box-shadow: var(--shadow-card-pressed);
  transform: translateY(0);
}

.glass-card:focus-visible {
  outline: none;
  border: var(--glass-border-focus);
  box-shadow: var(--shadow-card), var(--shadow-focus);
}

/* 큰 카드 — 히어로 영역, 메인 패널 */
.glass-card--lg {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
}

/* 히어로 글래스 카드 — 랜딩 메인 패널, 큰 곡률 + 넉넉한 여백 */
.glass-card--hero {
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-xl);
}

/* 히어로 카드 상단 sheen — 더 정교한 빛줄기 */
.glass-card--hero::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glass-sheen) 30%,
    var(--shimmer-highlight) 50%,
    var(--glass-sheen) 70%,
    transparent 100%
  );
}

/* 데이터 카드 — 보고서 섹션, 재무 데이터 (backdrop-filter 미적용, 가독성 우선) */
.glass-card--data {
  background: var(--bg-dark-elevated);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.glass-card--data .data-label {
  font-size: var(--font-size-sm);
  color: var(--text-dark-muted);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2xs);
}

.glass-card--data .data-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-dark-primary);
}

/* 프리미엄 카드 — 히어로 CTA, 특별 강조 */
.glass-card--premium {
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  border: var(--line-width) solid var(--accent-border-subtle);
  box-shadow: var(--shadow-card), var(--shadow-glow-soft);
}

.glass-card--premium:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card-hover), var(--shadow-glow-accent);
}

.glass-card--premium::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-glow) 50%,
    transparent 100%
  );
}

/* 글래스 없는 플랫 카드 — backdrop-filter 절약용 */
.flat-card {
  background: var(--bg-dark-elevated);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  transition:
    background var(--transition-smooth),
    border-color var(--transition-smooth),
    box-shadow var(--transition-smooth),
    transform var(--transition-smooth);
}

.flat-card:hover {
  background: var(--bg-dark-elevated-hover);
  border-color: var(--line-dark-strong);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}


/* ============================================================
   2. 버튼 (Buttons)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    opacity var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* 프라이머리 — accent 배경 + glow */
.btn--primary {
  background: var(--gradient-premium);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-glow-accent);
}

.btn--primary:hover {
  box-shadow: var(--shadow-glow-accent-hover);
  filter: brightness(1.08);
}

.btn--primary:focus-visible {
  box-shadow:
    var(--shadow-glow-accent),
    var(--shadow-focus);
}

/* 세컨더리 — 글래스 배경 */
.btn--secondary {
  background: var(--glass-bg);
  color: var(--text-dark-primary);
  border: var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

.btn--secondary:hover {
  background: var(--glass-bg-hover);
  border: var(--glass-border-hover);
}

/* 고스트 — 테두리만 */
.btn--ghost {
  background: transparent;
  color: var(--text-dark-primary);
  border: 1px solid var(--line-dark-strong);
}

.btn--ghost:hover {
  background: var(--bg-subtle);
  border-color: var(--line-dark-strong);
}

/* 작은 버튼 */
.btn--sm {
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-xs);
}

/* 큰 버튼 — 히어로 CTA */
.btn--lg {
  font-size: var(--font-size-base);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-sm);
}

/* pill 형태 */
.btn--pill {
  border-radius: var(--radius-pill);
}

/* 로딩 상태 — 비동기 작업 중 */
.btn--loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn--loading::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  margin-left: var(--space-xs);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* 아이콘 버튼 — 정사각형 */
.btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-sm);
}

.btn--icon svg {
  width: 20px;
  height: 20px;
}


/* ============================================================
   3. 네비게이션 (Navigation)
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  padding: 0 var(--page-padding);
  transition: background var(--transition-smooth);
}

/* 스크롤 시 네비게이션 배경 활성화 — shadow만 사용, border-bottom 제거 (border 남용 금지) */
.nav--scrolled {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--shadow-nav);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark-primary);
  text-decoration: none;
  letter-spacing: var(--letter-tight);
}

.nav__logo img {
  height: 28px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* ── 테마 토글 — 데스크탑: 세그먼트 컨트롤 / 모바일: 순환 아이콘 버튼 ── */

.theme-toggle-wrapper {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  background: var(--bg-dark-input);
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs);
  gap: var(--space-2xs);
}

.theme-toggle__indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border-subtle);
  border-radius: var(--radius-pill);
  transition: left var(--duration-normal) var(--ease-out-expo),
              width var(--duration-normal) var(--ease-out-expo);
  pointer-events: none;
  z-index: 0;
}

.theme-toggle__pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark-muted);
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--transition-fast);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}

.theme-toggle__pill:not(.theme-toggle__pill--auto) {
  padding: var(--space-xs);
}

.theme-toggle__pill:hover {
  color: var(--text-dark-secondary);
}

.theme-toggle__pill.is-active {
  color: var(--accent-color);
  font-weight: var(--font-weight-semibold);
}

.theme-toggle__pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.theme-toggle-cycle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--text-dark-primary);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.theme-toggle-cycle:hover {
  background: var(--bg-hover-subtle);
}

.theme-toggle-cycle svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-smooth);
}

/* 순환 버튼 아이콘 회전 — 상태 변경 시각 피드백 (Designer 사양: rotate 180deg 0.3s) */
@keyframes theme-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}
.theme-toggle-cycle.is-spinning svg {
  animation: theme-icon-spin var(--duration-normal) var(--ease-out-expo);
}

.theme-cycle-icon--auto,
.theme-cycle-icon--sun,
.theme-cycle-icon--moon { display: none; }

.theme-toggle-cycle[data-mode="auto"] .theme-cycle-icon--auto { display: block; }
.theme-toggle-cycle[data-mode="light"] .theme-cycle-icon--sun { display: block; }
.theme-toggle-cycle[data-mode="dark"] .theme-cycle-icon--moon { display: block; }

/* (레거시 .nav__theme-toggle 스타일 제거됨 — 모든 페이지 세그먼트 컨트롤로 전환 완료) */

.nav__link {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--space-xs) 0;
  position: relative;
}

/* hover 시 하단 언더라인 등장 애니메이션 */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--accent-color);
  border-radius: var(--radius-pill);
  transition: left var(--transition-smooth), right var(--transition-smooth);
}

.nav__link:hover::after {
  left: 0;
  right: 0;
}

.nav__link:hover,
.nav__link--active {
  color: var(--text-dark-primary);
}

.nav__link--active::after {
  left: 0;
  right: 0;
}

/* 모바일 링크 활성 상태 */
.nav__mobile-link--active {
  color: var(--accent-color);
  font-weight: var(--font-weight-bold);
  position: relative;
}

.nav__mobile-link--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--accent-color);
  border-radius: var(--radius-pill);
}

/* 모바일 메뉴 버튼 — 기본 숨김 */
.nav__menu-btn {
  display: none;
}

/* 모바일 하단 탭 바 — 기본 숨김 (640px 이하에서 표시) */
.bottom-tab-bar {
  display: none;
}


/* ============================================================
   4. 입력 필드 (Input Fields)
   ============================================================ */

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.input-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark-secondary);
}

.input {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-dark-primary);
  background: var(--bg-dark-input);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-inset);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  width: 100%;
}

.input::placeholder {
  color: var(--text-dark-muted);
}

.input:hover {
  border-color: var(--line-dark-strong);
}

.input:focus {
  border: var(--glass-border-focus);
  box-shadow:
    var(--shadow-inset),
    var(--shadow-focus);
  outline: none;
}

/* 에러 상태 */
.input--error {
  border-color: var(--color-danger-border);
}

.input--error:focus {
  box-shadow:
    var(--shadow-inset),
    var(--shadow-focus-error);
}

.input-error-text {
  font-size: var(--font-size-sm);
  color: var(--color-danger);
}

/* 검색 입력 필드 — pill 형태 + 아이콘 */
.search-input {
  position: relative;
}

.search-input__icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-dark-muted);
  pointer-events: none;
}

.search-input .input {
  padding-left: calc(var(--space-xs) + var(--space-xl) + var(--space-md));
  border-radius: var(--radius-pill);
}

/* 큰 검색바 — 히어로 영역 (티커 검색용) */
.search-bar {
  position: relative;
}

.search-bar .input {
  font-size: var(--font-size-lg);
  padding: var(--space-md) var(--space-xl);
  padding-left: calc(var(--space-xl) + var(--space-md) + var(--space-2xs));
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: var(--glass-border);
  box-shadow: var(--shadow-card);
}

.search-bar .input:focus {
  border: var(--glass-border-focus);
  box-shadow:
    var(--shadow-card-hover),
    var(--shadow-focus);
}

.search-bar__icon {
  position: absolute;
  left: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--text-dark-muted);
  pointer-events: none;
}


/* ============================================================
   5. 배지 & 칩 (Badge / Chip)
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  line-height: 1;
  white-space: nowrap;
}

.badge--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.badge--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.badge--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.badge--info {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.badge--accent {
  background: var(--accent-soft);
  color: var(--accent-color);
}

/* 칩 — 선택 가능 토글 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark-secondary);
  background: var(--bg-dark-input);
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
  user-select: none;
}

.chip:hover {
  background: var(--glass-bg-hover);
  color: var(--text-dark-primary);
}

.chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.chip--active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-color);
}


/* ============================================================
   6. 자동완성 드롭다운 (Autocomplete)
   — 티커 검색 결과 표시용
   ============================================================ */

.autocomplete {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--bg-dark-elevated);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  max-height: 320px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
}

.autocomplete--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.autocomplete__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.autocomplete__item:hover,
.autocomplete__item--focused {
  background: var(--bg-subtle);
}

.autocomplete__item + .autocomplete__item {
  border-top: var(--line-width) solid var(--line-dark);
}

.autocomplete__ticker {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark-primary);
  min-width: 72px;
}

.autocomplete__name {
  font-size: var(--font-size-sm);
  color: var(--text-dark-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocomplete__market {
  font-size: var(--font-size-xs);
  color: var(--text-dark-muted);
  margin-left: auto;
  flex-shrink: 0;
}


/* ============================================================
   7. 프로그레스 / 스코어 (Score Ring)
   — 보고서 최종 점수 표시용
   ============================================================ */

.score-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.score-ring__svg {
  transform: rotate(-90deg);
}

.score-ring__track {
  fill: none;
  stroke: var(--line-dark);
  stroke-width: 4;
}

.score-ring__fill {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.score-ring__value {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark-primary);
}


/* ============================================================
   8. 보고서 섹션 카드
   — report.css에서 전체 관리 (중복 방지)
   — .report-section__icon만 공통 정의 (report.css 미포함)
   ============================================================ */

.report-section__icon {
  width: 20px;
  height: 20px;
  color: var(--accent-color);
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 0%,
    var(--skeleton-highlight) 50%,
    var(--skeleton-base) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease infinite;
  border-radius: var(--radius-xs);
}

.skeleton--line {
  height: 14px;
  width: 100%;
}

.skeleton--line-short {
  height: 14px;
  width: 60%;
}

.skeleton--block {
  height: 80px;
  width: 100%;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ============================================================
   9. 뉴스 카드 (Articles)
   — 기사 섹션 개별 기사 카드
   ============================================================ */

.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-dark-card);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  transition:
    background var(--transition-smooth),
    border-color var(--transition-smooth),
    box-shadow var(--transition-smooth),
    transform var(--transition-smooth);
}

.article-card:hover {
  background: var(--bg-dark-card-hover);
  border-color: var(--line-dark-strong);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.article-card__source {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
}

.article-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-primary);
  line-height: var(--line-height-normal);
}

.article-card__summary {
  font-size: var(--font-size-sm);
  color: var(--text-dark-secondary);
  line-height: var(--line-height-relaxed);
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
}

.article-card__date {
  font-size: var(--font-size-xs);
  color: var(--text-dark-muted);
}

.article-card__rating {
  display: flex;
  gap: var(--space-2xs);
}


/* ============================================================
   10. 모달 / 오버레이
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg-scrim);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-smooth),
    visibility var(--transition-smooth);
}

.modal-backdrop--open {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: calc(var(--z-modal) + 1);
  background: var(--bg-dark-elevated);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-xl);
  max-width: 520px;
  width: calc(100% - var(--space-xl) * 2);
  max-height: calc(100vh - var(--space-xl) * 2);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-smooth),
    visibility var(--transition-smooth),
    transform var(--transition-smooth);
}

.modal--open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark-primary);
}

.modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  color: var(--text-dark-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}

.modal__close:hover {
  background: var(--glass-bg-hover);
  color: var(--text-dark-primary);
}

.modal__close:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}


/* ============================================================
   10-B. 알림 다이얼로그 (alerts.js 연동)
   ============================================================ */

@keyframes dialogFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dialogPopIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: var(--bg-scrim);
  backdrop-filter: blur(var(--glass-blur-backdrop));
  -webkit-backdrop-filter: blur(var(--glass-blur-backdrop));
  z-index: var(--z-modal);
  opacity: 0;
  animation: dialogFadeIn 0.2s ease-out forwards;
}

.app-dialog-panel {
  width: min(420px, 92vw);
  max-height: calc(100vh - var(--space-2xl));
  overflow: hidden;
  background: var(--bg-dark-elevated);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  animation: dialogPopIn 0.28s cubic-bezier(0.22, 0.85, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.app-dialog-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-primary);
  flex-shrink: 0;
}

.app-dialog-message {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--text-dark-secondary);
  white-space: pre-line;
  word-break: break-word;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-dialog-input {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: var(--glass-border);
  background: var(--bg-dark-input);
  color: var(--text-dark-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  flex-shrink: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-dialog-input:focus {
  border: var(--glass-border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.app-dialog-input::placeholder {
  color: var(--text-dark-muted);
}

.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.app-dialog-btn {
  border-radius: var(--radius-pill);
  border: none;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  background: var(--accent-color);
  color: var(--text-on-accent);
  transition: background var(--transition-fast), opacity var(--transition-fast);
}

.app-dialog-btn:hover {
  opacity: 0.9;
}

.app-dialog-btn.app-dialog-cancel {
  background: var(--bg-dark-card-hover);
  color: var(--text-dark-secondary);
  border: var(--glass-border);
}

.app-dialog-btn.app-dialog-cancel:hover {
  background: var(--bg-hover-subtle);
  color: var(--text-dark-primary);
}

.app-dialog-btn:focus-visible,
.app-dialog-input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

body.dialog-open {
  overflow: hidden;
}


/* ============================================================
   11. 토스트 알림
   ============================================================ */

.toast-container {
  position: fixed;
  top: calc(var(--nav-height) + var(--space-md));
  right: var(--space-md);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-dark-elevated);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  font-size: var(--font-size-sm);
  color: var(--text-dark-primary);
  pointer-events: auto;
  animation: toast-in 0.3s var(--transition-smooth);
}

.toast--success { border-left: 3px solid var(--color-success); }
.toast--warning { border-left: 3px solid var(--color-warning); }
.toast--error   { border-left: 3px solid var(--color-danger);  }
.toast--info    { border-left: 3px solid var(--color-info);    }

.toast__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.toast--leaving {
  animation: toast-out 0.2s ease forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}


/* ============================================================
   12. SSE 진행 표시 (보고서 생성 중)
   ============================================================ */

.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-dark-card-hover);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--gradient-premium);
  border-radius: var(--radius-pill);
  transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 불확정 진행 — 아직 섹션 완료 전 */
.progress-bar--indeterminate .progress-bar__fill {
  width: 30%;
  animation: progress-indeterminate 1.5s ease infinite;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* 섹션별 진행 표시 */
.progress-steps {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-md) 0;
}

.progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.progress-step__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-hover-subtle);
  transition: background var(--transition-smooth);
}

.progress-step--active .progress-step__dot {
  background: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-glow);
}

.progress-step--done .progress-step__dot {
  background: var(--color-success);
}

.progress-step__label {
  font-size: var(--font-size-xs);
  color: var(--text-dark-muted);
  text-align: center;
}

.progress-step--active .progress-step__label {
  color: var(--text-dark-primary);
}


/* ============================================================
   13. 금융 데이터 테이블
   ============================================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-muted);
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--line-width) solid var(--line-dark-strong);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
}

.data-table td {
  font-size: var(--font-size-sm);
  color: var(--text-dark-primary);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--line-width) solid var(--line-dark);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--bg-dark-card);
}

/* 숫자 정렬 — 우측 정렬 */
.data-table .num {
  text-align: right;
  font-family: var(--font-mono);
}

/* 상승/하락 색상 */
.data-table .up   { color: var(--color-success); }
.data-table .down { color: var(--color-danger);  }
.data-table .flat { color: var(--text-dark-muted); }


/* ============================================================
   14. 툴팁
   ============================================================ */

.tooltip {
  position: relative;
}

.tooltip__content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: var(--bg-dark-elevated);
  color: var(--text-dark-primary);
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-elevated);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
}

.tooltip:hover .tooltip__content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* 툴팁 화살표 */
.tooltip__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--bg-dark-elevated);
}


/* ============================================================
   15. 푸터
   ============================================================ */

.footer {
  background: var(--bg-dark-elevated);
  border-top: var(--line-width) solid var(--line-dark);
  padding: var(--space-xl) var(--page-padding);
}

.footer__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.footer__copy {
  font-size: var(--font-size-sm);
  color: var(--text-dark-muted);
  letter-spacing: var(--letter-normal);
}

.footer__links {
  display: flex;
  gap: var(--space-lg);
}

.footer__link {
  font-size: var(--font-size-sm);
  color: var(--text-dark-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--space-2xs) 0;
}

.footer__link:hover {
  color: var(--text-dark-primary);
}


/* ============================================================
   16. 히어로 대체 배경 (WebGL 미지원 / 모션 축소)
   — Three.js 캔버스 대신 CSS 그래디언트로 표현
   ============================================================ */

.hero-fallback {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  background: var(--gradient-webgl-fallback), var(--bg-dark);
  pointer-events: none;
  overflow: hidden;
}

/* 애니메이션 2D 파티클 — ::before = 부유 orb 1, ::after = 부유 orb 2 */
.hero-fallback::before,
.hero-fallback::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* orb 1 — 좌상단, 크고 느린 부유 */
.hero-fallback::before {
  width: 280px;
  height: 280px;
  top: 10%;
  left: 15%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  animation: fallbackOrb1 8s var(--ease-smooth) infinite;
}

/* orb 2 — 우하단, 작고 빠른 부유 */
.hero-fallback::after {
  width: 200px;
  height: 200px;
  bottom: 20%;
  right: 10%;
  background: radial-gradient(circle, var(--accent-border-subtle) 0%, transparent 70%);
  animation: fallbackOrb2 6s var(--ease-smooth) infinite;
}

/* JS 저사양 모바일 감지 시 (hardwareConcurrency ≤ 4) */
.hero-fallback.is-visible {
  display: block;
}

.hero-fallback.is-visible::before,
.hero-fallback.is-visible::after {
  opacity: 1;
}


/* ============================================================
   17. 스크롤 인디케이터
   — 히어로 하단 스크롤 유도 마우스 아이콘
   ============================================================ */

.scroll-indicator {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.scroll-indicator:hover {
  opacity: 0.8;
}

.scroll-indicator__mouse {
  width: 24px;
  height: 40px;
  border: 1.5px solid var(--text-dark-secondary);
  border-radius: var(--radius-sm);
  position: relative;
}

.scroll-indicator__dot {
  width: 3px;
  height: 8px;
  background: var(--text-dark-secondary);
  border-radius: 2px; /* 3×8px dot — 적합 토큰 부재, 원본 값 유지 */
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-bounce 2s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(12px); opacity: 0.3; }
}

.scroll-indicator__text {
  font-size: var(--font-size-xs);
  color: var(--text-dark-muted);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
}


/* ============================================================
   18. CTA 시머 효과
   — 프라이머리 버튼 위 빛줄기 이동 (프리미엄 인터랙션)
   ============================================================ */

.btn--shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    var(--shimmer-highlight) 50%,
    transparent 60%
  );
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0%, 100% { transform: translateX(-100%) translateY(-100%); }
  50% { transform: translateX(100%) translateY(100%); }
}


/* ============================================================
   19. 점수 게이지 (Score Gauge)
   — report.css에 conic-gradient + SVG 하이브리드 구현 존재
   — 페이지 전용 컴포넌트이므로 report.css에서 관리
   ============================================================ */


/* ============================================================
   20. 인기 종목 칩 (Popular Ticker Chips)
   — 검색 패널 하단 빠른 접근용
   ============================================================ */

.popular-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
}

.popular-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark-secondary);
  background: var(--bg-dark-input);
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.popular-chip:hover {
  background: var(--glass-bg-hover);
  border-color: var(--line-dark-strong);
  color: var(--text-dark-primary);
  transform: translateY(-1px);
}

/* ============================================================
   20-1. 테마 토글 — 세그먼트 컨트롤 (스타일은 nav 섹션에 정의)
   ============================================================ */

.popular-chip:active {
  transform: translateY(0);
}

/* 칩 클릭 → 자동 제출 시 활성 피드백 */
.popular-chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-color);
}

.popular-chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}


/* ============================================================
   21. 라이트 테마 오버라이드 (컴포넌트 전용)
   — 하드코딩된 rgba 값만 대응 (CSS 변수 기반은 tokens.css에서 자동 전환)
   ============================================================ */

/* 라이트 모드 — Three.js 캔버스 비활성 + 골든아워 배경 대체 */
[data-theme="light"] #canvas-bg {
  opacity: 0 !important;
}

[data-theme="light"] .hero-fallback {
  display: block;
  opacity: 1;
  background: var(--gradient-golden-hour), var(--bg-dark);
}

/* 라이트 모드 — orb 색상 절제 */
[data-theme="light"] .hero-fallback::before {
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
}

[data-theme="light"] .hero-fallback::after {
  background: radial-gradient(circle, var(--accent-border-subtle) 0%, transparent 70%);
}

/* 고스트 버튼 — 라이트 모드 */
[data-theme="light"] .btn--ghost {
  border-color: var(--scrollbar-thumb);
}
[data-theme="light"] .btn--ghost:hover {
  background: var(--bg-subtle);
  border-color: var(--scrollbar-thumb-hover);
}

/* 세컨더리 버튼 — 라이트 모드 */
[data-theme="light"] .btn--secondary {
  background: var(--glass-bg);
  border-color: var(--line-dark);
}
[data-theme="light"] .btn--secondary:hover {
  background: var(--glass-bg-hover);
  border-color: var(--scrollbar-thumb);
}

/* 자동완성 — 라이트 모드 hover */
[data-theme="light"] .autocomplete__item:hover,
[data-theme="light"] .autocomplete__item--focused {
  background: var(--bg-dark-input);
}

/* 스크롤 인디케이터 — 라이트 모드 */
[data-theme="light"] .scroll-indicator__mouse {
  border-color: var(--text-dark-muted);
}
[data-theme="light"] .scroll-indicator__dot {
  background: var(--text-dark-muted);
}

/* 데이터 테이블 hover */
[data-theme="light"] .data-table tr:hover td {
  background: var(--table-stripe);
}

/* 다이얼로그 취소 버튼 */
[data-theme="light"] .app-dialog-btn.app-dialog-cancel {
  background: var(--line-dark);
  border-color: var(--bg-hover-subtle);
}

/* 네비게이션 스크롤 — 라이트 모드 그림자 */
[data-theme="light"] .nav--scrolled {
  box-shadow: var(--shadow-nav);
}

/* 프라이머리 버튼 hover — 라이트 모드 glow 절제 */
[data-theme="light"] .btn--primary:hover {
  box-shadow: var(--shadow-glow-accent-hover);
}

/* 스코어 링 트랙 */
[data-theme="light"] .score-ring__track {
  stroke: var(--line-dark);
}

/* 점수 게이지 링 — 라이트 모드 (report.css .score-gauge__ring 대응) */
[data-theme="light"] .score-gauge__ring {
  background: conic-gradient(
    var(--score-color, var(--accent-color)) 0deg,
    var(--score-color, var(--accent-color)) var(--score-deg, 0deg),
    var(--line-dark) var(--score-deg, 0deg),
    var(--line-dark) 360deg
  );
}

/* 프로그레스 바 트랙 — 라이트 모드 */
[data-theme="light"] .progress-bar {
  background: var(--line-dark);
}

/* 인기 종목 칩 — 라이트 모드 hover */
[data-theme="light"] .popular-chip:hover {
  background: var(--bg-subtle);
}


/* ============================================================
   22. 접근성 — prefers-reduced-motion (컴포넌트 전용)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Three.js 캔버스 숨기고 CSS 대체 배경 표시 */
  #canvas-bg {
    display: none;
  }

  .hero-fallback {
    display: block;
  }

  /* 모바일 2D fallback — orb 애니메이션 중지 */
  .hero-fallback::before,
  .hero-fallback::after {
    animation: none;
    opacity: 0;
  }

  /* 카드 hover transform 제거 */
  .glass-card:hover {
    transform: none;
  }

  /* 버튼 시머/스핀 제거 */
  .btn--shimmer::after {
    animation: none;
    display: none;
  }

  /* 스크롤 인디케이터 정지 */
  .scroll-indicator__dot {
    animation: none;
  }

  /* 모달 트랜지션 제거 */
  .modal {
    transition: none;
  }

  .modal--open {
    transform: translate(-50%, -50%) scale(1);
  }

  /* 테마 순환 버튼 회전 애니메이션 비활성 */
  .theme-toggle-cycle.is-spinning svg {
    animation: none;
  }
}

/* ============================================================
   23. 추가 라이트 테마 오버라이드 — 하드코딩 색상 보정
   ============================================================ */

/* 히어로 카드 sheen — 라이트 모드 (흰색→검정 반전) */
[data-theme="light"] .glass-card--hero::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glass-sheen) 30%,
    var(--shimmer-highlight) 50%,
    var(--glass-sheen) 70%,
    transparent 100%
  );
}

/* 버튼 시머 — 라이트 모드 (accent 배경 위 흰색 유지, 투명도 조정) */
[data-theme="light"] .btn--shimmer::after {
  background: linear-gradient(
    45deg,
    transparent 40%,
    var(--shimmer-peak) 50%,
    transparent 60%
  );
}


/* ============================================================
   검색 패널 (Search Panel)
   — 공유 컴포넌트: index.html 히어로 + analyze.html
   ============================================================ */

.search-panel {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.search-panel__market {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-panel__form {
  position: relative;
  width: 100%;
}

.search-panel__input {
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark-primary);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-xl);
  padding-left: calc(var(--space-xl) + var(--space-md) + var(--space-2xs));
  box-shadow: var(--shadow-card);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-panel__input::placeholder {
  color: var(--text-dark-muted);
  font-weight: var(--font-weight-regular);
}

.search-panel__input:focus {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card-hover), var(--shadow-focus);
}

.search-panel__icon {
  position: absolute;
  left: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--text-dark-muted);
  pointer-events: none;
}

.search-panel__status {
  font-size: var(--font-size-sm);
  color: var(--text-dark-secondary);
  text-align: center;
  min-height: 20px;
}

.search-panel__status--error {
  color: var(--color-danger);
}

/* 에러 복구 — 다시 시도 버튼 */
.status-retry-btn {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 2px var(--space-xs);
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease;
}
.status-retry-btn:hover {
  background: var(--color-danger-soft-hover);
}

/* 자동완성 드롭다운 */
.search-panel__suggestions {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--bg-dark-elevated);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  max-height: 320px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
}

.search-panel__suggestions.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.suggestion-item:hover,
.suggestion-item.is-focused {
  background: var(--bg-subtle);
}

.suggestion-item + .suggestion-item {
  border-top: var(--line-width) solid var(--line-dark);
}

.suggestion-item__symbol {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark-primary);
  min-width: 72px;
}

.suggestion-item__name {
  font-size: var(--font-size-sm);
  color: var(--text-dark-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 자동완성 — 라이트 모드 */
[data-theme="light"] .suggestion-item:hover,
[data-theme="light"] .suggestion-item.is-focused {
  background: var(--bg-subtle);
}


/* ============================================================
   24. Nav 드롭다운 (Navigation Dropdown)
   — 비교 분석, 포트폴리오, 알림 등 서브메뉴 진입점
   — .autocomplete 패턴 기반, z-index: --z-dropdown
   ============================================================ */

.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-xs));
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 200px;
  background: var(--bg-dark-elevated);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-xs) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
}

.nav-dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast);
  min-height: var(--touch-target-min);
}

.nav-dropdown__item:hover {
  background: var(--bg-subtle);
}

.nav-dropdown__item:active {
  background: var(--bg-hover-subtle);
}

.nav-dropdown__item:focus-visible {
  outline: none;
  box-shadow: inset var(--shadow-focus);
}

.nav-dropdown__icon {
  width: 18px;
  height: 18px;
  color: var(--text-dark-muted);
  flex-shrink: 0;
}

.nav-dropdown__label {
  flex: 1;
}

.nav-dropdown__badge {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-on-accent);
  background: var(--accent-color);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  line-height: 1;
}

.nav-dropdown__divider {
  height: var(--line-width);
  background: var(--line-dark);
  margin: var(--space-xs) 0;
}

/* 드롭다운 트리거 — nav__link 확장 */
.nav-dropdown-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.nav-dropdown-trigger__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.nav-dropdown-trigger.is-open .nav-dropdown-trigger__chevron {
  transform: rotate(180deg);
}


/* ============================================================
   25. 비교 카드 (Compare Card)
   — 종목 비교 분석 UI — 2~3열 그리드 레이아웃
   — .flat-card 기반 (backdrop-filter 절약)
   ============================================================ */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

.compare-card {
  background: var(--bg-dark-elevated);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition:
    border-color var(--transition-smooth),
    box-shadow var(--transition-smooth);
}

.compare-card:hover {
  border-color: var(--line-dark-strong);
  box-shadow: var(--shadow-card-hover);
}

/* 카드 헤더 — 티커 심볼 + 종목명 */
.compare-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: var(--line-width) solid var(--line-dark);
}

.compare-card__symbol {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark-primary);
}

.compare-card__name {
  font-size: var(--font-size-sm);
  color: var(--text-dark-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-card__remove {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  color: var(--text-dark-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.compare-card__remove:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.compare-card__remove svg {
  width: 16px;
  height: 16px;
}

/* 데이터 행 — 라벨 + 값 쌍 */
.compare-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.compare-card__label {
  font-size: var(--font-size-sm);
  color: var(--text-dark-muted);
  flex-shrink: 0;
}

.compare-card__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.compare-card__value--up   { color: var(--color-success); }
.compare-card__value--down { color: var(--color-danger); }
.compare-card__value--flat { color: var(--text-dark-muted); }

/* 비교 점수 바 — 가로 게이지 */
.compare-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.compare-bar__track {
  width: 100%;
  height: 6px;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.compare-bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  transition: width var(--transition-smooth);
}

/* 비교 추가 슬롯 — 빈 카드 */
.compare-card--empty {
  border-style: dashed;
  border-color: var(--line-dark-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.compare-card--empty:hover {
  background: var(--bg-subtle);
  border-color: var(--accent-border);
}

.compare-card--empty__icon {
  width: 32px;
  height: 32px;
  color: var(--text-dark-muted);
  transition: color var(--transition-fast);
}

.compare-card--empty:hover .compare-card--empty__icon {
  color: var(--accent-color);
}


/* ============================================================
   26. 포트폴리오 테이블 (Portfolio Table)
   — .data-table 확장 — 포트폴리오 종목 목록 + 수익률 표시
   — 행 단위 hover 강조 + 삭제/편집 액션
   ============================================================ */

.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.portfolio-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-dark-elevated);
}

.portfolio-table th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-muted);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--line-width) solid var(--line-dark-strong);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  white-space: nowrap;
}

.portfolio-table th.num {
  text-align: right;
}

.portfolio-table td {
  font-size: var(--font-size-sm);
  color: var(--text-dark-primary);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--line-width) solid var(--line-dark);
  vertical-align: middle;
}

.portfolio-table tr:last-child td {
  border-bottom: none;
}

.portfolio-table tbody tr {
  transition: background var(--transition-fast);
}

.portfolio-table tbody tr:hover td {
  background: var(--bg-dark-card);
}

/* 티커 셀 — 심볼 + 종목명 세로 정렬 */
.portfolio-table__ticker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.portfolio-table__symbol {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark-primary);
}

.portfolio-table__name {
  font-size: var(--font-size-xs);
  color: var(--text-dark-muted);
}

/* 숫자 셀 — 우측 정렬 */
.portfolio-table .num {
  text-align: right;
  font-family: var(--font-mono);
}

/* 수익률 색상 */
.portfolio-table .pnl-up {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}

.portfolio-table .pnl-down {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}

.portfolio-table .pnl-flat {
  color: var(--text-dark-muted);
}

/* 비중 게이지 — 인라인 수평 바 */
.portfolio-weight-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.portfolio-weight-bar__track {
  flex: 1;
  height: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
  min-width: 48px;
}

.portfolio-weight-bar__fill {
  height: 100%;
  background: var(--accent-color);
  border-radius: var(--radius-pill);
  transition: width var(--transition-smooth);
}

.portfolio-weight-bar__label {
  font-size: var(--font-size-xs);
  color: var(--text-dark-secondary);
  font-family: var(--font-mono);
  min-width: 36px;
  text-align: right;
}

/* 액션 셀 — 편집/삭제 아이콘 버튼 */
.portfolio-table__actions {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.portfolio-table tbody tr:hover .portfolio-table__actions {
  opacity: 1;
}

.portfolio-table__action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  color: var(--text-dark-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  border: none;
  background: none;
}

.portfolio-table__action-btn:hover {
  background: var(--bg-hover-subtle);
  color: var(--text-dark-primary);
}

.portfolio-table__action-btn--danger:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.portfolio-table__action-btn svg {
  width: 16px;
  height: 16px;
}

/* 요약 행 — 합계/평균 */
.portfolio-table tfoot td {
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-primary);
  padding: var(--space-md);
  border-top: var(--line-width) solid var(--line-dark-strong);
  background: var(--bg-subtle);
}

/* 포트폴리오 요약 카드 — 테이블 상단 통계 */
.portfolio-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.portfolio-summary__item {
  background: var(--bg-dark-elevated);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.portfolio-summary__label {
  font-size: var(--font-size-xs);
  color: var(--text-dark-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
}

.portfolio-summary__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark-primary);
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   27. 알림 패널 (Notification Panel)
   — 사이드 슬라이드 패널 (우측에서 진입)
   — 가격 변동, 실적 발표 등 실시간 알림
   ============================================================ */

.notification-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 90vw);
  z-index: calc(var(--z-modal) + 1);
  background: var(--bg-dark-elevated);
  border-left: var(--line-width) solid var(--line-dark);
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
}

.notification-panel--open {
  transform: translateX(0);
}

/* 패널 배경 스크림 */
.notification-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg-scrim);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-smooth),
    visibility var(--transition-smooth);
}

.notification-panel-backdrop--open {
  opacity: 1;
  visibility: visible;
}

/* 패널 헤더 */
.notification-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--line-width) solid var(--line-dark);
  flex-shrink: 0;
}

.notification-panel__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark-primary);
}

.notification-panel__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  color: var(--text-dark-muted);
  cursor: pointer;
  background: none;
  border: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.notification-panel__close:hover {
  background: var(--bg-hover-subtle);
  color: var(--text-dark-primary);
}

.notification-panel__close svg {
  width: 20px;
  height: 20px;
}

/* 필터 탭 — 전체 / 가격 / 실적 / 뉴스 */
.notification-panel__filters {
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: var(--line-width) solid var(--line-dark);
  flex-shrink: 0;
  overflow-x: auto;
}

/* 알림 목록 */
.notification-panel__list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.notification-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-3xl) var(--space-lg);
  color: var(--text-dark-muted);
  font-size: var(--font-size-md);
  text-align: center;
}

.notification-panel__empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}

/* 개별 알림 아이템 */
.notification-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--line-width) solid var(--line-dark);
  transition: background var(--transition-fast);
  cursor: pointer;
}

.notification-item:hover {
  background: var(--bg-subtle);
}

.notification-item:last-child {
  border-bottom: none;
}

/* 읽지 않은 알림 */
.notification-item--unread {
  background: var(--accent-soft);
}

.notification-item--unread:hover {
  background: var(--bg-subtle);
}

/* 알림 아이콘 — 타입별 색상 */
.notification-item__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.notification-item__icon svg {
  width: 18px;
  height: 18px;
}

.notification-item__icon--price-up {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.notification-item__icon--price-down {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.notification-item__icon--earnings {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.notification-item__icon--news {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

/* 알림 본문 */
.notification-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.notification-item__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-primary);
  line-height: var(--line-height-normal);
}

.notification-item__desc {
  font-size: var(--font-size-xs);
  color: var(--text-dark-secondary);
  line-height: var(--line-height-relaxed);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-item__time {
  font-size: var(--font-size-2xs);
  color: var(--text-dark-muted);
}

/* 패널 푸터 — 모두 읽음 처리 */
.notification-panel__footer {
  display: flex;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border-top: var(--line-width) solid var(--line-dark);
  flex-shrink: 0;
}


/* ============================================================
   28. 라이트 테마 — Phase 3 컴포넌트 오버라이드
   ============================================================ */

/* 드롭다운 — 라이트 모드 */
[data-theme="light"] .nav-dropdown__item:hover {
  background: var(--bg-subtle);
}

/* 비교 카드 — 라이트 모드 hover */
[data-theme="light"] .compare-card:hover {
  border-color: var(--line-dark-strong);
}

[data-theme="light"] .compare-card--empty:hover {
  background: var(--bg-subtle);
}

/* 포트폴리오 테이블 — 라이트 모드 hover */
[data-theme="light"] .portfolio-table tbody tr:hover td {
  background: var(--table-stripe);
}

/* 알림 패널 — 라이트 모드 */
[data-theme="light"] .notification-item:hover {
  background: var(--bg-subtle);
}

[data-theme="light"] .notification-item--unread {
  background: var(--accent-soft);
}


/* ============================================================
   네비게이션 드롭다운 메뉴
   ============================================================ */

.nav__dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav__dropdown-chevron {
  transition: transform var(--transition-fast);
}

.nav__dropdown-trigger[aria-expanded="true"] .nav__dropdown-chevron {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  background: var(--bg-dark-elevated);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-xs) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  transform: translateX(-50%) translateY(-4px);
  z-index: var(--z-dropdown);
}

.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown-trigger[aria-expanded="true"] + .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown:hover .nav__dropdown-chevron {
  transform: rotate(180deg);
}

.nav__dropdown-item {
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-dark-secondary);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.nav__dropdown-item:hover {
  color: var(--text-dark-primary);
  background: var(--bg-dark-card-hover);
}

.nav__dropdown-item--active {
  color: var(--accent-color);
  font-weight: var(--font-weight-semibold);
}

/* ── 라이트 모드 ── */
[data-theme="light"] .nav__dropdown-menu {
  background: var(--bg-dark-elevated);
  border-color: var(--line-dark);
}


/* ============================================================
   알림 벨 아이콘 + 배지
   ============================================================ */

.nav__alert-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  color: var(--text-dark-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav__alert-btn:hover {
  color: var(--text-dark-primary);
  background: var(--bg-dark-card-hover);
}

.nav__alert-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--accent-color);
  color: var(--text-on-accent);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2xs);
  line-height: 1;
}


/* ============================================================
   알림 슬라이드 패널
   ============================================================ */

.alert-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-dark-elevated);
  border-left: 1px solid var(--line-dark);
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
}

.alert-panel--open {
  transform: translateX(0);
}

.alert-panel-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-scrim);
  z-index: var(--z-panel-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.alert-panel-backdrop--visible {
  opacity: 1;
  visibility: visible;
}

.alert-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--line-dark);
}

.alert-panel__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-primary);
  margin: 0;
}

.alert-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--text-dark-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.alert-panel__close:hover {
  color: var(--text-dark-primary);
  background: var(--bg-dark-card-hover);
}

.alert-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
}

.alert-panel__empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--text-dark-muted);
  font-size: var(--font-size-sm);
}

.alert-panel__footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--line-dark);
  display: flex;
  justify-content: center;
}

/* 알림 개별 항목 */
.alert-panel__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.alert-panel__item:hover {
  background: var(--bg-dark-card-hover);
}

.alert-panel__item--disabled {
  opacity: 0.5;
}

.alert-panel__item--triggered {
  border-left: 3px solid var(--accent-color);
}

.alert-panel__item-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.alert-panel__item-ticker {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-primary);
}

.alert-panel__item-type {
  font-size: var(--font-size-sm);
  color: var(--text-dark-muted);
}

.alert-panel__item-actions {
  display: flex;
  gap: var(--space-2xs);
  flex-shrink: 0;
}


/* ============================================================
   25. 점수 게이지 툴팁 (Score Gauge Tooltip)
   — .score-gauge 위 hover 시 카테고리 점수 상세 설명 표시
   — 기존 .tooltip 패턴 확장 + 점수 전용 레이아웃
   ============================================================ */

.score-gauge-tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-xs));
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  min-width: 200px;
  max-width: 280px;
  background: var(--bg-dark-elevated);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-sm);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-dropdown);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
}

.score-gauge:hover .score-gauge-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* 툴팁 화살표 */
.score-gauge-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--bg-dark-elevated);
}

/* 툴팁 헤더 — 카테고리명 + 점수 */
.score-gauge-tooltip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: var(--line-width) solid var(--line-dark);
  margin-bottom: var(--space-xs);
}

.score-gauge-tooltip__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-primary);
  line-height: var(--line-height-normal);
}

.score-gauge-tooltip__score {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--score-color, var(--accent-color));
  font-variant-numeric: tabular-nums;
}

/* 툴팁 설명 텍스트 */
.score-gauge-tooltip__desc {
  font-size: var(--font-size-xs);
  color: var(--text-dark-secondary);
  line-height: var(--line-height-relaxed);
}

/* 툴팁 상세 항목 리스트 — 점수 근거 */
.score-gauge-tooltip__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}

.score-gauge-tooltip__detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.score-gauge-tooltip__detail-label {
  font-size: var(--font-size-xs);
  color: var(--text-dark-muted);
  line-height: var(--line-height-normal);
}

.score-gauge-tooltip__detail-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark-primary);
  font-variant-numeric: tabular-nums;
}

/* 미니 프로그레스 바 — 세부 항목별 진행률 */
.score-gauge-tooltip__bar {
  height: 3px;
  background: var(--line-dark);
  border-radius: var(--radius-pill);
  flex: 1;
  min-width: 40px;
  max-width: 60px;
}

.score-gauge-tooltip__bar-fill {
  height: 100%;
  background: var(--score-color, var(--accent-color));
  border-radius: var(--radius-pill);
  transition: width var(--duration-normal) var(--ease-out-cubic);
}

/* 라이트 모드 오버라이드 */
[data-theme="light"] .score-gauge-tooltip {
  background: var(--bg-surface-solid, #ffffff);
  border-color: var(--line-dark);
  box-shadow: var(--shadow-elevated);
}

[data-theme="light"] .score-gauge-tooltip::after {
  border-top-color: var(--bg-surface-solid, #ffffff);
}

/* 반응형 — 640px 이하에서 툴팁 너비 축소 */
@media (max-width: 640px) {
  .score-gauge-tooltip {
    min-width: 180px;
    max-width: 240px;
    padding: var(--space-xs);
  }

  .score-gauge-tooltip__title {
    font-size: var(--font-size-xs);
  }

  .score-gauge-tooltip__score {
    font-size: var(--font-size-sm);
  }
}

/* 반응형 — 375px 이하에서 툴팁 위치 보정 (화면 넘침 방지) */
@media (max-width: 375px) {
  .score-gauge-tooltip {
    left: 0;
    transform: scale(0.95);
    min-width: 160px;
  }

  .score-gauge:hover .score-gauge-tooltip {
    transform: scale(1);
  }

  .score-gauge-tooltip::after {
    left: var(--space-lg);
  }
}


/* ============================================================
   26. 첫 방문 가이드 배너 (Onboarding Guide Banner)
   — 처음 방문한 사용자에게 서비스 사용법 안내
   — glass-card 기반 + accent 강조 + 닫기 가능
   ============================================================ */

.guide-banner {
  position: relative;
  background: var(--bg-dark-elevated);
  border: var(--line-width) solid var(--accent-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  overflow: hidden;
  animation: guideSlideIn var(--duration-normal) var(--ease-out-cubic) both;
}

/* 좌측 accent 장식선 */
.guide-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--gradient-premium);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

/* 상단 미세 glow */
.guide-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--accent-border) 0%,
    var(--accent-border-subtle) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* 배너 레이아웃 */
.guide-banner__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding-left: var(--space-sm);
}

/* 아이콘 영역 */
.guide-banner__icon {
  flex-shrink: 0;
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border-radius: var(--radius-xs);
  color: var(--accent-color);
}

.guide-banner__icon svg {
  width: 20px;
  height: 20px;
}

/* 콘텐츠 영역 */
.guide-banner__content {
  flex: 1;
  min-width: 0;
}

.guide-banner__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark-primary);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-2xs);
}

.guide-banner__desc {
  font-size: var(--font-size-sm);
  color: var(--text-dark-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-sm);
}

/* 가이드 스텝 리스트 */
.guide-banner__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.guide-banner__step {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-xs);
  color: var(--text-dark-secondary);
  line-height: var(--line-height-normal);
}

/* 스텝 번호 원형 배지 */
.guide-banner__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-color);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* CTA 버튼 영역 */
.guide-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* 닫기 버튼 */
.guide-banner__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-dark-muted);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.guide-banner__close:hover {
  background: var(--bg-hover-subtle);
  color: var(--text-dark-primary);
}

.guide-banner__close:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.guide-banner__close svg {
  width: 14px;
  height: 14px;
}

/* 닫기 애니메이션 */
.guide-banner.is-closing {
  animation: guideSlideOut var(--duration-fast) var(--ease-out-cubic) forwards;
}

@keyframes guideSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes guideSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
    margin-bottom: var(--space-lg);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* 라이트 모드 오버라이드 */
[data-theme="light"] .guide-banner {
  background: var(--bg-surface-solid, #ffffff);
  border-color: var(--accent-border-subtle);
}

/* 반응형 — 640px 이하 세로 레이아웃 */
@media (max-width: 640px) {
  .guide-banner {
    padding: var(--space-md);
  }

  .guide-banner__inner {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .guide-banner__steps {
    flex-direction: column;
    gap: var(--space-xs);
  }
}

/* 반응형 — 375px 이하 더 컴팩트 */
@media (max-width: 375px) {
  .guide-banner {
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  .guide-banner__title {
    font-size: var(--font-size-sm);
  }

  .guide-banner__desc {
    font-size: var(--font-size-xs);
  }

  .guide-banner__icon {
    width: 32px;
    height: 32px;
  }
}