/*
  [비즈니스 로직 요약]
  - AllDayStock 주식 수익률 분석 리포트(KOSPI / KOSDAQ)를 위한 전용 스타일시트(CSS)입니다.
  - 엑셀 느낌의 그린 테마, 다크 테마, PC 세로선 격자형 테이블 및 모바일 카드뷰 반응형 레이아웃을 지원합니다.

  [핵심 요구사항 리스트]
  1. 라이트 테마(엑셀 파스텔 연녹색) 및 다크 테마 CSS 변수 정의
  2. 와이드 화면(Full HD) 및 기본 화면 반응형 컨테이너 스타일
  3. 달력 픽커 래퍼, 전체종목 체크박스, 탭 메뉴 및 컨트롤 버튼(와이드, 테마, 자동스크롤) 스타일
  4. 주식 테이블 PC 전용 세로 격자선(grid-mode) 및 sticky th 헤더 스타일
  5. 모바일 환경(768px 이하) 종목별 카드 뷰 변환 및 짝수 행 배경색(Zebra) 차별화 스타일
  6. 종목명/종목코드/분석 링크/종목편입 ETF 모달 팝업 및 글로벌 네비게이션 헤더/푸터 스타일
  7. [신규] Google Material Symbols 공식 아이콘 공통 클래스 스타일 정의
  8. [요구사항] PC 버전 탭 메뉴에서 상단 GNB와 중복되는 타 시장 리포트 이동 탭 버튼(link-tab) 숨김 처리
  18. KOSDAQ TOP 100 FOCUS 테마는 파란색 계열을 유지하되 종목별 상승률 텍스트는 타 시장과 동일하게 빨간색(#e11d48)으로 통일 (다크모드 #f87171)
  20. [모바일 복원] 모바일 환경(768px 이하) 상단 글로벌 네비게이션 헤더 메뉴(가로 스크롤 칩 바) 복원
  21. [모바일 최적화] 모바일 헤더 상단/좌우 여백 제거(화면 밀착), TOP 100 FOCUS 접미사 'Focus' 숨김 및 당일 행 굵기 강조 강화
*/

/* Google Material Symbols 공식 웹폰트 공통 아이콘 클래스 정의 */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
  flex-shrink: 0;
}

:root {
  --bg-color: #f0f4f1;
  /* 엑셀 느낌의 차분한 회녹색 톤 (눈 피로 방지) */
  --card-bg: #ffffff;
  /* 테이블 영역은 흰색으로 대비감 부여 */
  --border-color: #cdddc9;
  /* 연한 녹색빛의 부드러운 경계선 */
  --th-border: #a4bfa0;
  /* 헤더 격자용 대비 선명한 연녹회색 선 */
  --text-main: #203021;
  /* 짙은 삼림색 메인 텍스트 */
  --text-muted: #556b56;
  /* 보조 텍스트 */
  --accent-color: #107c41;
  /* 엑셀의 시그니처 그린 컬러 */
  --accent-hover: #0b592e;
  --success-color: #107c41;
  --th-bg: #e2f0d9;
  /* 엑셀 스타일의 산뜻한 파스텔 연녹색 */
  --th-text: #2f5522;
  /* 헤더 글자는 짙은 삼림색으로 가독성 확보 */
  --grad-start: #107c41;
  --grad-end: #388e3c;
}

/* 다크 모드 테마 */
body.dark-theme {
  --bg-color: #0d1117;
  --card-bg: #161b22;
  --border-color: #30363d;
  --th-border: #444c56;
  /* 다크 모드용 대비 선명한 진회색 선 */
  --text-main: #c9d1d9;
  --text-muted: #8b949e;
  --accent-color: #58a6ff;
  --accent-hover: #1f6feb;
  --success-color: #2ea043;
  --th-bg: #1f242c;
  --th-text: #ffffff;
  --grad-start: #58a6ff;
  --grad-end: #bc8cff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  line-height: 1.6;
  padding: 0;
  margin: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
  max-width: 1445px;
  margin: 0 auto;
  padding: 0 20px 20px 20px;
  transition: max-width 0.3s ease-in-out;
}

/* [요구사항 2] 와이드 화면 모드 스타일 (PC 화면에서만 켜지도록 제한) */
@media (min-width: 769px) {
  .container.wide-mode {
    max-width: 98% !important;
    padding: 0 20px 20px 20px;
  }
}

.container>header {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
}

/* 상단 우측 최상단 이용가이드 뱃지 버튼 */
.header-guide-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 25px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 0 10px 0 7px;
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
  z-index: 20;
  line-height: 1;
}

.header-guide-btn:hover {
  border-color: #0969da;
  color: #0969da;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(9, 105, 218, 0.15);
}

.header-guide-btn .guide-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(9, 105, 218, 0.12);
  color: #0969da;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
  margin-top: 0px;
}

.header-guide-btn .guide-text {
  display: inline-block;
  line-height: 1;
  margin-top: 1px;
}

body.dark-theme .header-guide-btn:hover {
  border-color: #58a6ff;
  color: #58a6ff;
}

body.dark-theme .header-guide-btn .guide-icon {
  background-color: rgba(88, 166, 255, 0.18);
  color: #58a6ff;
}

@media (max-width: 768px) {
  .header-guide-btn {
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  .header-guide-btn .guide-text {
    display: none;
  }
}

header h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(45deg, var(--grad-start), var(--grad-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

header p {
  color: var(--text-muted);
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* [요구사항 3] 달력 래퍼 및 투명 선택기 스타일 */
.date-picker-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  color: var(--accent-color);
  transition: all 0.2s ease-in-out;
}

.date-picker-wrapper:hover {
  border-color: var(--accent-color);
  background-color: rgba(88, 166, 255, 0.08);
}

.date-picker-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  border: none;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

.date-label-full {
  display: inline;
}

.date-label-short {
  display: none;
}

/* 전체종목 선택 체크박스 라벨 래퍼 스타일 */
.show-all-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 5px 10px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  user-select: none;
  transition: all 0.2s ease-in-out;
}

.show-all-wrapper:hover {
  border-color: var(--accent-color);
}

.show-all-wrapper input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-color);
  cursor: pointer;
}

/* 애드센스 광고 영역 */
.ads-area {
  display: none !important;
  background: rgba(48, 54, 61, 0.2);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  margin: 20px 0;
  padding: 15px;
  text-align: center;
  min-height: 90px;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* 탭 헤더 레이아웃 (탭 메뉴 + 와이드 버튼) */
.tab-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 20px;
  gap: 15px;
}

/* 탭 메뉴 스타일 */
.tab-container {
  display: flex;
  flex-grow: 1;
}

.pc-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-grow: 1;
  padding-bottom: 4px;
}

.mobile-tabs {
  display: none;
  flex-grow: 1;
}

.tab-select {
  width: 100%;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-main);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.tab-select:focus {
  border-color: var(--accent-color);
}

.tab-btn {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px 6px 0 0;
  color: var(--text-muted);
  padding: 12px 24px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text-main);
  border-color: var(--text-muted);
}

.tab-btn.active {
  background-color: var(--accent-color);
  color: #ffffff;
  border-color: var(--accent-color);
}

/* 신규 상장 레드 뱃지 스타일 */
.badge-new-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #ff3b30;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 0 5px rgba(255, 59, 48, 0.7);
  animation: pulse-new-dot 1.8s infinite ease-in-out;
  cursor: help;
}

@keyframes pulse-new-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
  }

  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(255, 59, 48, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
  }
}

/* [Logic Integration: 요구사항 8] 리포트간 이동 탭(PC 탭 바의 KOSPI, KOSDAQ, ETF)은 상단 GNB 메뉴와 중복되므로 PC에서 숨김 처리 */
.tab-btn.link-tab {
  display: none !important;
}

/* 컨트롤 버튼 그룹 스타일 */
.control-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

/* 시트별 NAV/캔들정보 우측 핵심 대표 수익률 본문 셀 전용 하이라이트 스타일 (세트 A: 오렌지 테마 - 부호별 동적 색상 분기) */
.etf-table td.primary-rate,
.stock-table td.primary-rate {
  font-weight: 700 !important;
  color: #d35400 !important;
}

.etf-table td.primary-rate.rate-up,
.etf-table td.primary-rate.rate-up *,
.stock-table td.primary-rate.rate-up,
.stock-table td.primary-rate.rate-up * {
  color: #d35400 !important;
  /* 상승 (> 0): 딥 오렌지 */
}

.etf-table td.primary-rate.rate-down,
.etf-table td.primary-rate.rate-down *,
.stock-table td.primary-rate.rate-down,
.stock-table td.primary-rate.rate-down * {
  color: #0969da !important;
  /* 하락 (< 0): 클래식 블루 */
}

.etf-table td.primary-rate.rate-zero,
.etf-table td.primary-rate.rate-zero *,
.stock-table td.primary-rate.rate-zero,
.stock-table td.primary-rate.rate-zero * {
  color: var(--text-main) !important;
  /* 보합/정지 (= 0): 보합 종가 색상과 동일 */
  font-weight: 700 !important;
}

body.dark-theme .etf-table td.primary-rate,
body.dark-theme .stock-table td.primary-rate {
  color: #ff7a45 !important;
}

body.dark-theme .etf-table td.primary-rate.rate-up,
body.dark-theme .etf-table td.primary-rate.rate-up *,
body.dark-theme .stock-table td.primary-rate.rate-up,
body.dark-theme .stock-table td.primary-rate.rate-up * {
  color: #ff7a45 !important;
  /* 상승 (> 0): 코랄 오렌지 */
}

body.dark-theme .etf-table td.primary-rate.rate-down,
body.dark-theme .etf-table td.primary-rate.rate-down *,
body.dark-theme .stock-table td.primary-rate.rate-down,
body.dark-theme .stock-table td.primary-rate.rate-down * {
  color: #58a6ff !important;
  /* 하락 (< 0): 스카이 블루 */
}

body.dark-theme .etf-table td.primary-rate.rate-zero,
body.dark-theme .etf-table td.primary-rate.rate-zero *,
body.dark-theme .stock-table td.primary-rate.rate-zero,
body.dark-theme .stock-table td.primary-rate.rate-zero * {
  color: var(--text-main) !important;
  /* 보합/정지 (= 0): 다크모드 보합 종가 색상과 동일 */
  font-weight: 700 !important;
}

#toggle-wide-btn,
#toggle-theme-btn,
#toggle-autoscroll-btn {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-main);
  padding: 7px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#toggle-wide-btn:hover,
#toggle-theme-btn:hover,
#toggle-autoscroll-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* 다크 모드 / 라이트 모드 버튼 아이콘 컬러 & 솔리드 스타일 */
#toggle-theme-btn .material-symbols-outlined {
  color: #f59e0b;
  /* 달빛 골드 앰버 */
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
  transition: transform 0.2s ease, color 0.2s ease;
}

#toggle-theme-btn:hover {
  border-color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.08);
}

#toggle-theme-btn:hover .material-symbols-outlined {
  transform: rotate(15deg) scale(1.15);
}

body.dark-theme #toggle-theme-btn .material-symbols-outlined {
  color: #fbbf24;
}

/* 와이드 화면 버튼 아이콘 컬러 & 솔리드 스타일 */
#toggle-wide-btn .material-symbols-outlined {
  color: #0284c7;
  /* 세련된 스카이블루 */
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
  transition: transform 0.2s ease, color 0.2s ease;
}

#toggle-wide-btn:hover {
  border-color: #0284c7;
  background-color: rgba(2, 132, 199, 0.08);
}

#toggle-wide-btn:hover .material-symbols-outlined {
  transform: scale(1.15);
}

body.dark-theme #toggle-wide-btn .material-symbols-outlined {
  color: #38bdf8;
}

/* 자동 스크롤 버튼 아이콘 컬러 & 솔리드 스타일 */
#toggle-autoscroll-btn .material-symbols-outlined {
  color: #10b981;
  /* 활력 있는 에메랄드 그린 */
  font-size: 21px !important;
  /* [요구사항] 옆의 다크모드/와이드 화면 아이콘과 시각적 볼륨감 균형 맞춤 */
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
  transition: transform 0.2s ease, color 0.2s ease;
}

#toggle-autoscroll-btn:hover {
  border-color: #10b981;
  background-color: rgba(16, 185, 129, 0.08);
}

#toggle-autoscroll-btn:hover .material-symbols-outlined {
  transform: scale(1.18);
}

body.dark-theme #toggle-autoscroll-btn .material-symbols-outlined {
  color: #34d399;
}

#toggle-autoscroll-btn.scrolling-active {
  background-color: #107c41;
  color: #ffffff;
  border-color: #107c41;
  box-shadow: 0 0 8px rgba(16, 124, 65, 0.4);
}

#toggle-autoscroll-btn.scrolling-active .material-symbols-outlined {
  color: #ffffff !important;
}

body.dark-theme #toggle-autoscroll-btn.scrolling-active {
  background-color: #059669;
  border-color: #059669;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}

/* [요구사항] 달력 픽커 아이콘 스타일 (코스피 아이콘과 동일한 #e11d48 컬러 및 깔끔한 라인 스타일) */
.date-picker-wrapper .material-symbols-outlined {
  color: #e11d48;
  /* 상단 코스피 아이콘과 동일한 #e11d48 로즈 레드 */
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  transition: transform 0.2s ease, color 0.2s ease;
}

.date-picker-wrapper:hover .material-symbols-outlined {
  transform: scale(1.15);
  color: #be123c;
}

body.dark-theme .date-picker-wrapper .material-symbols-outlined {
  color: #fb7185;
}

body.dark-theme .date-picker-wrapper:hover .material-symbols-outlined {
  color: #fda4af;
}

/* PC 화면 탭 및 조작 버튼 일관된 슬림 컴팩트 패딩 유지 (와이드 모드 포함) */
@media (min-width: 769px) {
  .pc-tabs {
    gap: 5px;
  }

  .tab-btn {
    padding: 10px 14px;
    font-size: 0.88rem;
  }

  .control-buttons {
    gap: 5px;
  }

  #toggle-wide-btn,
  #toggle-theme-btn,
  #toggle-autoscroll-btn {
    padding: 8px 10px;
    font-size: 0.82rem;
  }
}

/* 탭 내용 영역 */
.tab-content {
  display: none;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

/* 실시간 테이블 검색 바 */
.table-search-bar {
  margin-bottom: 15px;
}

.search-input {
  width: 100%;
  max-width: 400px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-main);
  padding: 10px 15px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: var(--accent-color);
}

/* 테이블 래퍼 (화면 최하단에 가로 스크롤바가 항상 위치하도록 뷰포트 높이 완벽 밀착) */
.table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 195px) !important;
  width: 100%;
}

@media (max-width: 768px) {
  .table-wrapper {
    max-height: calc(100vh - 220px) !important;
  }
}

.stock-table,
.etf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 0.9rem;
}

.stock-table th,
.stock-table td,
.etf-table th,
.etf-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

/* 연속상승 탭의 '상승기간' 내용 값 전용 오렌지 색상 적용 */
.stock-table td[data-label^="상승기간"],
.etf-table td[data-label^="상승기간"] {
  color: #e65100;
}

body.dark-theme .stock-table td[data-label^="상승기간"],
body.dark-theme .etf-table td[data-label^="상승기간"] {
  color: #ff9800;
}

/* [요구사항 4] 세로줄 격자형 테이블 옵션 (PC 화면에서만 적용) */
@media (min-width: 769px) {

  .stock-table th,
  .etf-table th {
    border-right: none;
    border-left: none;
    position: relative;
  }

  .stock-table th::before,
  .etf-table th::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--th-border);
    z-index: 15;
  }

  .stock-table th:last-child::after,
  .etf-table th:last-child::after {
    content: "";
    position: absolute;
    right: 1px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--th-border);
    z-index: 15;
  }

  .stock-table.grid-mode td,
  .etf-table.grid-mode td {
    border-right: none;
    border-left: none;
    position: relative;
  }

  .stock-table.grid-mode td::before,
  .etf-table.grid-mode td::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--border-color);
    z-index: 1;
  }

  .stock-table.grid-mode td:last-child::after,
  .etf-table.grid-mode td:last-child::after {
    content: "";
    position: absolute;
    right: 1px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--border-color);
    z-index: 1;
  }

  .stock-table th:last-child,
  .stock-table th[data-label="NAVER 분석"],
  .stock-table th[data-label="분석"],
  .stock-table td[data-label="NAVER 분석"],
  .stock-table td[data-label="분석"],
  .etf-table th:last-child,
  .etf-table th[data-label="NAVER 분석"],
  .etf-table th[data-label="분석"],
  .etf-table td[data-label="NAVER 분석"],
  .etf-table td[data-label="분석"] {
    text-align: center !important;
  }
}

.stock-table thead,
.stock-table thead tr,
.etf-table thead,
.etf-table thead tr {
  background-color: var(--th-bg);
}

.stock-table th,
.etf-table th {
  background-color: var(--th-bg);
  color: var(--th-text);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2px solid var(--th-border);
  border-top: 1px solid var(--th-border);
  background-clip: padding-box;
}

.stock-table tbody tr:hover,
.etf-table tbody tr:hover {
  background-color: rgba(88, 166, 255, 0.05);
}

/* 종목명 텍스트 강조 스타일 */
.stock-table td[data-label="종목명"],
.etf-table td[data-label="종목명"] {
  font-weight: 700;
  color: var(--accent-color);
}

/* 종목코드 전용 색상 스타일링 */
.stock-table td[data-label="종목코드"],
.stock-table td[data-label="종목코드"] a.info-link,
.etf-table td[data-label="종목코드"],
.etf-table td[data-label="종목코드"] a.info-link {
  color: #3b76e1 !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  text-decoration: none;
}

.stock-table td[data-label="종목코드"] a.info-link:hover,
.etf-table td[data-label="종목코드"] a.info-link:hover {
  text-decoration: underline !important;
}

body.dark-theme .stock-table td[data-label="종목코드"],
body.dark-theme .stock-table td[data-label="종목코드"] a.info-link,
body.dark-theme .etf-table td[data-label="종목코드"],
body.dark-theme .etf-table td[data-label="종목코드"] a.info-link {
  color: #84b3f9 !important;
}

/* 링크 스타일 */
a.info-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
}

a.info-link:hover {
  text-decoration: underline;
}

a.chart-link {
  display: inline-block;
  background-color: rgba(88, 166, 255, 0.1);
  color: var(--accent-color);
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: bold;
  transition: background-color 0.2s;
}

a.chart-link:hover {
  background-color: var(--accent-color);
  color: #ffffff;
}

a.analysis-link {
  display: inline-block;
  background-color: rgba(46, 160, 67, 0.15);
  color: #56d364;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1.0rem;
  transition: all 0.2s ease-in-out;
  text-align: center;
  line-height: 1;
}

a.analysis-link:hover {
  background-color: #2ea043;
  color: #ffffff;
  transform: scale(1.15);
}

/* [요구사항 6] 종목편입ETF 아이콘 버튼 및 중앙 모달 스타일 */
a.etf-rel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(16, 124, 65, 0.12);
  color: var(--accent-color);
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid rgba(16, 124, 65, 0.2);
}

a.etf-rel-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

a.etf-rel-link:hover {
  background-color: var(--accent-color);
  color: #ffffff !important;
  text-decoration: none;
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

a.etf-rel-link:hover svg {
  transform: scale(1.1);
}

body.dark-theme a.etf-rel-link {
  background-color: rgba(88, 166, 255, 0.15);
  border-color: rgba(88, 166, 255, 0.3);
  color: var(--accent-color);
}

body.dark-theme a.etf-rel-link:hover {
  background-color: var(--accent-color);
  color: #0d1117 !important;
}

.etf-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.etf-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.etf-modal-container {
  width: 100%;
  max-width: 640px;
  height: 80vh;
  max-height: 720px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #cdddc9);
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.etf-modal-overlay.active .etf-modal-container {
  transform: translateY(0) scale(1);
}

.etf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--th-bg, #e2f0d9);
  border-bottom: 1px solid var(--border-color, #cdddc9);
}

.etf-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--th-text, #2f5522);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-modal-title .material-symbols-outlined {
  vertical-align: middle;
  font-size: 19px;
  color: #166534;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  background: rgba(22, 101, 52, 0.12);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  flex-shrink: 0;
}

body.dark-theme .etf-modal-title .material-symbols-outlined {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
}

.etf-modal-close-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted, #556b56);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.etf-modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-main, #203021);
}

.etf-modal-body {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: var(--bg-color, #f0f4f1);
}

.etf-modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

@media (max-width: 640px) {
  .etf-modal-overlay {
    padding: 10px;
  }

  .etf-modal-container {
    height: 85vh;
    max-height: 85vh;
    border-radius: 12px;
  }
}

footer {
  text-align: center;
  padding: 40px 0 20px 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border-color);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-merged-container {
  display: none;
}

.pc-history-text {
  display: inline;
}

.nav-disparity {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--accent-color);
  margin-top: 3px;
}

.highlight-today-text {
  font-weight: 700 !important;
}

.rate-highlight,
.etf-table td span.rate-highlight,
.stock-table td span.rate-highlight {
  font-weight: 700 !important;
}

.up-trend {
  color: #df4b4b !important;
}

.down-trend {
  color: #3b76e1 !important;
}

body.dark-theme .up-trend {
  color: #f79090 !important;
}

body.dark-theme .down-trend {
  color: #84b3f9 !important;
}

/* [요구사항 5] 모바일 반응형 스타일 (카드 뷰) */
@media (max-width: 768px) {

  /* [핵심 요구사항 21] 모바일 환경 블로그와 동일하게 상단 및 좌우 여백 밀착 */
  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px 16px 12px !important;
  }

  header {
    margin-bottom: 15px;
    padding: 10px 0;
  }

  header h1 {
    font-size: 1.6rem;
  }

  header p {
    font-size: 0.95rem;
  }

  .tab-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-bottom: none;
  }

  .pc-tabs {
    display: none !important;
  }

  .mobile-tabs {
    display: block !important;
    margin-bottom: 5px;
  }

  .tab-container {
    border-bottom: none;
    padding-bottom: 0;
  }

  .control-buttons {
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0;
    gap: 8px;
  }

  #toggle-wide-btn {
    display: none !important;
  }

  #toggle-theme-btn,
  #toggle-autoscroll-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
    flex: 1;
    justify-content: center;
  }

  .date-label-full {
    display: none !important;
  }

  .date-label-short {
    display: inline !important;
  }

  .show-all-wrapper {
    padding: 4px 8px;
    font-size: 0.85rem;
  }

  .tab-content {
    padding: 10px 8px;
  }

  .table-search-bar {
    margin-bottom: 8px;
  }

  .table-wrapper {
    max-height: calc(100vh - 145px) !important;
  }

  .search-input {
    max-width: 100%;
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .stock-table,
  .stock-table thead,
  .stock-table tbody,
  .stock-table th,
  .stock-table td,
  .stock-table tr,
  .etf-table,
  .etf-table thead,
  .etf-table tbody,
  .etf-table th,
  .etf-table td,
  .etf-table tr {
    display: block;
  }

  .stock-table thead,
  .etf-table thead {
    display: none;
  }

  .stock-table tbody tr,
  .etf-table tbody tr {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  }

  .stock-table tbody tr:nth-child(even),
  .etf-table tbody tr:nth-child(even) {
    background-color: #f5f8f6 !important;
  }

  body.dark-theme .stock-table tbody tr:nth-child(even),
  body.dark-theme .etf-table tbody tr:nth-child(even) {
    background-color: #0f1319 !important;
  }

  .stock-table tbody tr:hover,
  .etf-table tbody tr:hover {
    background-color: var(--card-bg);
  }

  .stock-table tbody tr:nth-child(even):hover,
  .etf-table tbody tr:nth-child(even):hover {
    background-color: #f5f8f6 !important;
  }

  body.dark-theme .stock-table tbody tr:nth-child(even):hover,
  body.dark-theme .etf-table tbody tr:nth-child(even):hover {
    background-color: #0f1319 !important;
  }

  .stock-table td,
  .etf-table td {
    border: none;
    border-bottom: 1px dashed var(--border-color);
    padding: 10px 0 !important;
    position: relative;
    padding-left: 45% !important;
    text-align: right;
    white-space: normal;
    font-size: 0.9rem;
  }

  .stock-table td:last-child,
  .etf-table td:last-child {
    border-bottom: none;
  }

  .stock-table td::before,
  .etf-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 40%;
    text-align: left;
    font-weight: 700;
    color: var(--text-muted);
  }

  .stock-table td[data-label="종목명"],
  .stock-table td[data-label="종목명"] a,
  .etf-table td[data-label="종목명"],
  .etf-table td[data-label="종목명"] a {
    font-size: 0.95rem;
    font-weight: 700;
    color: #df4b4b !important;
  }

  body.dark-theme .stock-table td[data-label="종목명"],
  body.dark-theme .stock-table td[data-label="종목명"] a,
  body.dark-theme .etf-table td[data-label="종목명"],
  body.dark-theme .etf-table td[data-label="종목명"] a {
    color: #f79090 !important;
  }

  .stock-table td[data-label="종목코드"],
  .etf-table td[data-label="종목코드"] {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
  }

  .stock-table td[data-label="기준일자(등락률)"]::before,
  .etf-table td[data-label="기준일자(등락률)"]::before {
    content: "기준일자\A(등락률)";
    white-space: pre-wrap;
  }

  .stock-table td[data-label="종목편입ETF"]::before,
  .etf-table td[data-label="종목편입ETF"]::before {
    content: "종목편입 ETF";
  }

  .stock-table td[data-label="캔들정보"],
  .stock-table td[data-label="거래일자"],
  .etf-table td[data-label="캔들정보"],
  .etf-table td[data-label="거래일자"] {
    display: none !important;
  }

  .pc-history-text {
    display: none !important;
  }

  .mobile-merged-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
  }

  .mobile-history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 5px;
    font-size: 0.9rem;
  }

  .mobile-history-row:last-child {
    border-bottom: none;
  }

  .mobile-history-date {
    font-weight: 500;
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
  }

  .mobile-history-val {
    color: var(--text-main);
    font-weight: 500;
    text-align: right;
  }

  .mobile-history-row.highlight-today,
  .mobile-history-row.highlight-today .mobile-history-date,
  .mobile-history-row.highlight-today .mobile-history-val,
  .highlight-today-text {
    font-weight: 700 !important;
  }

  .stock-table td[data-label="종가(등락률/거래량)"],
  .etf-table td[data-label="종가(등락률/거래량)"] {
    text-align: left !important;
    padding-left: 0 !important;
  }

  .stock-table td[data-label="종가(등락률/거래량)"]::before,
  .etf-table td[data-label="종가(등락률/거래량)"]::before {
    content: "최근 10영업일 주가 (일자 / 종가(원) / 등락률)" !important;
    position: static !important;
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
  }

  /* [핵심 요구사항 20 & 21] 모바일 반응형 글로벌 네비게이션 헤더 (블로그 규격 100% 동일화: 가로 스크롤 1줄 칩 바 & 상단 밀착) */
  .global-nav-header {
    display: block !important;
    margin: 0 0 12px 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background-color: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  }

  .global-nav-inner {
    height: auto !important;
    min-height: 106px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 13px 16px 8px 16px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .global-logo {
    width: 100% !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .global-logo-icon {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }

  .global-logo-icon .logo-arrow {
    width: 28px !important;
    height: 28px !important;
  }

  .global-logo-text {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
  }

  .global-nav-header nav {
    width: 100% !important;
    overflow: hidden !important;
  }

  .global-menu {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 2px 2px 6px 2px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
    /* Firefox */
  }

  .global-menu::-webkit-scrollbar {
    display: none !important;
    /* Chrome, Safari, Edge */
  }

  .global-menu li {
    flex-shrink: 0 !important;
    list-style: none !important;
  }

  .global-menu-link {
    font-size: 0.82rem !important;
    padding: 6px 12px !important;
    line-height: 1.6 !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    color: var(--text-main) !important;
  }

  .global-menu-link.active {
    background-color: rgba(16, 124, 65, 0.1) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
    font-weight: 700 !important;
  }

  .global-menu-link svg {
    width: 16px !important;
    height: 16px !important;
    margin-right: 2px !important;
    flex-shrink: 0 !important;
  }

  .market-summary-card {
    display: none !important;
  }

  .tab-guide-card {
    display: none !important;
  }

  .stock-table td[data-label="NAV(원)"] br,
  .stock-table td[data-label="NAV"] br,
  .etf-table td[data-label="NAV(원)"] br,
  .etf-table td[data-label="NAV"] br {
    display: none !important;
  }

  .nav-disparity {
    display: inline-block !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
  }

  footer {
    padding: 15px 10px;
  }

  footer .footer-copy {
    line-height: 1.6;
  }

  footer .footer-divider {
    display: none;
  }

  footer .footer-contact {
    display: block;
    margin-top: 3px;
  }

  footer .footer-disclaimer {
    margin-top: 8px;
    font-size: 0.78rem;
    line-height: 1.45;
    word-break: keep-all;
  }

  footer .disclaimer-part {
    display: block !important;
    margin-top: 2px;
  }
}

footer .disclaimer-part {
  display: inline;
}

/* [글로벌 통합 헤더 및 푸터 스타일] */
.global-nav-header {
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-top: 0;
  margin-bottom: 20px;
  padding: 0 !important;
  width: 100%;
}

.global-nav-inner {
  max-width: 1445px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  transition: max-width 0.3s ease-in-out;
}

@media (min-width: 769px) {

  .container.wide-mode~.global-nav-header .global-nav-inner,
  body.wide-mode .global-nav-inner {
    max-width: 98% !important;
    padding: 0 20px !important;
  }
}

.global-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.global-logo-icon {
  width: 32px;
  height: 32px;
  /* 핵심 요구사항: 리포트 로고 심볼 백그라운드 기존 그라디언트 (딥그린 ➔ 에메랄드) */
  background: linear-gradient(135deg, #107c41, #10b981);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
}

.global-logo-icon .logo-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 1;
}

.global-logo-icon .logo-letter {
  position: relative;
  z-index: 2;
  color: white;
  font-weight: 800;
  font-size: 18px;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.global-logo-icon svg:not(.logo-arrow) {
  width: 100%;
  height: 100%;
  display: block;
}

.global-logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.global-logo-text span {
  color: var(--accent-color);
}

.global-menu {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.global-menu-link {
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.global-menu-link:hover,
.global-menu-link.active {
  color: var(--accent-color);
  background-color: rgba(16, 124, 65, 0.08);
}

/* 일일 마켓 요약 브리핑 박스 스타일 */
.market-summary-card {
  background: linear-gradient(135deg, rgba(16, 124, 65, 0.06), rgba(37, 99, 235, 0.04));
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-color);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 22px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

body.dark-theme .market-summary-card {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.08), rgba(188, 140, 255, 0.05));
  border-left-color: var(--accent-color);
}

.market-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.market-summary-text {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-main);
  margin: 0;
}

/* 탭별 지표 가이드 박스 스타일 */
.tab-guide-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tab-guide-card a {
  color: var(--accent-color);
  text-decoration: underline;
  font-weight: 600;
}

/* 글로벌 사이트 푸터 스타일 */
.global-site-footer {
  margin-top: 30px;
  background-color: var(--card-bg);
  border-top: 1px solid var(--border-color);
  padding: 30px 20px 20px 20px;
  text-align: center;
}

.footer-nav-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.footer-disclaimer-text strong {
  color: var(--text-main);
}

/* [전역 로딩 인디케이터 오버레이 스타일] */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-color);
  opacity: 0.96;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

.loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.spinner-ring {
  width: 46px;
  height: 46px;
  border: 4px solid rgba(16, 124, 65, 0.15);
  border-top-color: var(--accent-color);
  border-right-color: var(--accent-color);
  border-radius: 50%;
  animation: spinOverlay 0.75s infinite linear;
}

body.dark-theme .spinner-ring {
  border: 4px solid rgba(88, 166, 255, 0.15);
  border-top-color: var(--accent-color);
  border-right-color: var(--accent-color);
}

.loading-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.3px;
  animation: pulseOverlayText 1.4s infinite ease-in-out;
}

@keyframes spinOverlay {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulseOverlayText {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

.footer-nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
}

.footer-nav-links a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.footer-disclaimer-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 800px;
  margin: 0 auto 12px auto;
}

.footer-copyright {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

/* [검색창 우측 미니 로딩 스피너 인디케이터 스타일] */
.table-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.search-loading-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-color);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.search-loading-indicator.active {
  opacity: 1;
  visibility: visible;
}

.search-mini-spinner {
  width: 17px;
  height: 17px;
  border: 2.5px solid rgba(16, 124, 65, 0.2);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: spinOverlay 0.65s infinite linear;
}

body.dark-theme .search-mini-spinner {
  border: 2.5px solid rgba(88, 166, 255, 0.2);
  border-top-color: var(--accent-color);
}

/* ==========================================================================
   [요구사항 6] 글로벌 사이트 푸터 (메인 사이트와 100% 동일한 규격)
   ========================================================================== */
.global-footer {
  background-color: var(--card-bg);
  border-top: 1px solid var(--border-color);
  padding: 40px 0 30px 0;
  margin-top: 50px;
  width: 100%;
}

.footer-inner {
  max-width: 1445px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

@media (min-width: 769px) {

  body.wide-mode .footer-inner,
  body.wide-mode .global-footer .footer-inner,
  body.wide-mode footer.global-footer .footer-inner,
  .container.wide-mode~.global-footer .footer-inner,
  .container.wide-mode~footer .footer-inner {
    max-width: 98% !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
  }
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 20px;
}

.footer-brand {
  text-align: left;
}

.footer-brand h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px 0;
  text-align: left;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-bottom .copyright {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: left;
}

.footer-bottom .disclaimer-notice {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: left;
  margin: 0;
}

/* ==========================================================================
   [Logic Integration: HTML 인라인 스타일 모듈화 클래스]
   ========================================================================== */
.calendar-icon {
  font-size: 18px;
  vertical-align: middle;
}

.control-buttons button .material-symbols-outlined {
  font-size: 18px;
  vertical-align: middle;
  margin-right: 4px;
}

#toggle-autoscroll-btn .material-symbols-outlined {
  font-size: 21px;
}

/* ==========================================================================
   [Logic Integration: 종목 Top100 Focus 롤스크린 컴포넌트 스타일]
   - 화면을 가리지 않는 슬림 토글 바 및 부드러운 Slide-down 애니메이션
   - 다크/라이트 테마 호환 글래스모피즘 카드 및 태그 칩 레이아웃
   ========================================================================== */
.focus-rollscreen-wrapper {
  margin: 14px 0 20px 0;
  border-radius: 12px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.focus-rollscreen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.focus-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.focus-badge {
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.focus-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-main, #1e293b);
  letter-spacing: -0.3px;
}

.focus-preview-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.focus-tag-chip {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
}

.focus-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted, #64748b);
  font-size: 0.88rem;
  font-weight: 600;
}

.focus-arrow-icon {
  font-size: 22px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 롤스크린 바디 애니메이션 */
.focus-rollscreen-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
  padding: 0 20px;
  background: var(--bg-card, #ffffff);
}

.focus-rollscreen-body.expanded {
  max-height: 1800px;
  opacity: 1;
  padding: 18px 20px 22px 20px;
  border-top: 1px solid var(--border-color, #f1f5f9);
}

/* 요약 브리핑 박스 기본 구조 */
.focus-summary-box {
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 18px;
}

.focus-summary-text {
  font-size: 0.94rem;
  line-height: 1.68;
  color: var(--text-main, #334155);
  margin: 0;
  word-break: keep-all;
}

.focus-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.focus-card-item {
  background: var(--bg-main, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 12px 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.focus-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.focus-item-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main, #0f172a);
}

.focus-item-rate {
  font-size: 0.88rem;
  font-weight: 800;
  color: #e11d48;
}

.focus-item-reason {
  font-size: 0.84rem;
  color: var(--text-muted, #475569);
  line-height: 1.5;
  margin: 0;
  word-break: keep-all;
}

.focus-footer-notice {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  text-align: right;
  margin-top: 10px;
}

/* ==========================================================================
   [Theme 1: KOSPI 코스피 - 이쁜 붉은색 계열 (Rose Red)]
   ========================================================================== */
.focus-rollscreen-wrapper.kospi:hover,
.focus-rollscreen-wrapper:not(.kosdaq):hover {
  border-color: #f43f5e;
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.08);
}

.focus-rollscreen-wrapper.kospi .focus-rollscreen-bar,
.focus-rollscreen-wrapper:not(.kosdaq) .focus-rollscreen-bar {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.04) 0%, rgba(244, 63, 94, 0.04) 100%);
}

.focus-rollscreen-wrapper.kospi .focus-rollscreen-bar:hover,
.focus-rollscreen-wrapper:not(.kosdaq) .focus-rollscreen-bar:hover {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.08) 0%, rgba(244, 63, 94, 0.08) 100%);
}

.focus-rollscreen-wrapper.kospi .focus-badge,
.focus-rollscreen-wrapper:not(.kosdaq) .focus-badge {
  background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.3);
}

.focus-rollscreen-wrapper.kospi .focus-tag-chip,
.focus-rollscreen-wrapper:not(.kosdaq) .focus-tag-chip {
  background: rgba(225, 29, 72, 0.08);
  color: #e11d48;
  border: 1px solid rgba(225, 29, 72, 0.2);
}

.focus-rollscreen-wrapper.kospi .focus-summary-box,
.focus-rollscreen-wrapper:not(.kosdaq) .focus-summary-box {
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.7) 0%, rgba(248, 250, 252, 0.8) 100%);
  border-left: 4px solid #e11d48;
}

.focus-rollscreen-wrapper.kospi .focus-card-item:hover,
.focus-rollscreen-wrapper:not(.kosdaq) .focus-card-item:hover {
  transform: translateY(-2px);
  border-color: #f43f5e;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.08);
}

.focus-rollscreen-wrapper.kospi .focus-item-rate,
.focus-rollscreen-wrapper:not(.kosdaq) .focus-item-rate {
  color: #e11d48;
}

/* ==========================================================================
   [Theme 2: KOSDAQ 코스닥 - 산뜻한 파란색 계열 (Sky Blue)]
   ========================================================================== */
.focus-rollscreen-wrapper.kosdaq:hover {
  border-color: #38bdf8;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.08);
}

.focus-rollscreen-wrapper.kosdaq .focus-rollscreen-bar {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.04) 0%, rgba(14, 165, 233, 0.04) 100%);
}

.focus-rollscreen-wrapper.kosdaq .focus-rollscreen-bar:hover {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
}

.focus-rollscreen-wrapper.kosdaq .focus-badge {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.focus-rollscreen-wrapper.kosdaq .focus-tag-chip {
  background: rgba(2, 132, 199, 0.08);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.2);
}

.focus-rollscreen-wrapper.kosdaq .focus-summary-box {
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.7) 0%, rgba(248, 250, 252, 0.8) 100%);
  border-left: 4px solid #0284c7;
}

.focus-rollscreen-wrapper.kosdaq .focus-card-item:hover {
  transform: translateY(-2px);
  border-color: #38bdf8;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
}

/* KOSDAQ은 파란색 테마이지만 종목 상승률은 타 시장과 동일하게 빨간색(#e11d48) 유지 */
.focus-rollscreen-wrapper.kosdaq .focus-item-rate {
  color: #e11d48;
}

/* ==========================================================================
   다크 테마 대응
   ========================================================================== */
body.dark-theme .focus-rollscreen-wrapper {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

body.dark-theme .focus-title {
  color: #f8fafc;
}

body.dark-theme .focus-rollscreen-body {
  background: #1e293b;
  border-top-color: #334155;
}

body.dark-theme .focus-card-item {
  background: #0f172a;
  border-color: #334155;
}

body.dark-theme .focus-item-name {
  color: #f1f5f9;
}

body.dark-theme .focus-item-rate {
  color: #f87171;
}

body.dark-theme .focus-item-reason {
  color: #94a3b8;
}

body.dark-theme .focus-summary-text {
  color: #e2e8f0;
}

/* 다크 테마 - 코스피 (KOSPI) */
body.dark-theme .focus-rollscreen-wrapper.kospi .focus-rollscreen-bar,
body.dark-theme .focus-rollscreen-wrapper:not(.kosdaq) .focus-rollscreen-bar {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.12) 0%, rgba(244, 63, 94, 0.12) 100%);
}

body.dark-theme .focus-rollscreen-wrapper.kospi .focus-tag-chip,
body.dark-theme .focus-rollscreen-wrapper:not(.kosdaq) .focus-tag-chip {
  background: rgba(225, 29, 72, 0.2);
  color: #fda4af;
  border-color: rgba(225, 29, 72, 0.4);
}

body.dark-theme .focus-rollscreen-wrapper.kospi .focus-summary-box,
body.dark-theme .focus-rollscreen-wrapper:not(.kosdaq) .focus-summary-box {
  background: rgba(15, 23, 42, 0.6);
  border-left-color: #f43f5e;
}

body.dark-theme .focus-rollscreen-wrapper.kospi .focus-card-item:hover,
body.dark-theme .focus-rollscreen-wrapper:not(.kosdaq) .focus-card-item:hover {
  border-color: #f43f5e;
}

/* 다크 테마 - 코스닥 (KOSDAQ) */
body.dark-theme .focus-rollscreen-wrapper.kosdaq .focus-rollscreen-bar {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(14, 165, 233, 0.12) 100%);
}

body.dark-theme .focus-rollscreen-wrapper.kosdaq .focus-tag-chip {
  background: rgba(2, 132, 199, 0.2);
  color: #7dd3fc;
  border-color: rgba(2, 132, 199, 0.4);
}

body.dark-theme .focus-rollscreen-wrapper.kosdaq .focus-summary-box {
  background: rgba(15, 23, 42, 0.6);
  border-left-color: #38bdf8;
}

body.dark-theme .focus-rollscreen-wrapper.kosdaq .focus-card-item:hover {
  border-color: #0ea5e9;
}

/* [핵심 요구사항 21] 모바일 반응형 롤스크린 대응 (포커스 접미사 Focus 숨김 및 펼치기 줄바꿈 방지) */
@media (max-width: 768px) {
  .focus-rollscreen-bar {
    padding: 10px 14px;
  }

  .focus-bar-left {
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }

  .focus-title {
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .focus-title .focus-suffix {
    display: none !important;
    /* 모바일 화면에서는 ' Focus'를 숨겨 영역 침범 방지 */
  }

  .focus-preview-tags {
    display: none;
    /* 모바일 헤더 1줄 컴팩트화 */
  }

  .focus-bar-right {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .focus-toggle-label {
    white-space: nowrap !important;
  }

  .focus-items-grid {
    grid-template-columns: 1fr;
  }
}