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

  [핵심 요구사항 리스트]
  1. 라이트 테마(엑셀 파스텔 연녹색) 및 다크 테마 CSS 변수 정의
  2. 와이드 화면(Full HD) 및 기본 화면 반응형 컨테이너 스타일
  3. 달력 픽커 래퍼, 전체종목 체크박스, 탭 메뉴 및 컨트롤 버튼(와이드, 테마, 자동스크롤) 스타일
  4. ETF 테이블 PC 전용 세로 격자선(grid-mode) 및 sticky th 헤더 스타일
  5. 모바일 환경(768px 이하) 종목별 카드 뷰 변환 및 짝수 행 배경색(Zebra) 차별화 스타일
  6. NAV 괴리율 뱃지, 종목명/종목코드/분석 링크 및 글로벌 네비게이션 헤더/푸터 스타일
  7. [신규] Google Material Symbols 공식 아이콘 공통 클래스 스타일 정의
  8. [요구사항] PC 버전 탭 메뉴에서 상단 GNB와 중복되는 타 시장 리포트 이동 탭 버튼(link-tab) 숨김 처리
*/

/* 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;
}

/* 와이드 화면 모드 스타일 (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;
}

/* 달력 래퍼 및 투명 선택기 스타일 */
.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 {
  font-weight: 700 !important;
  color: #d35400 !important;
}

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

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

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

body.dark-theme .etf-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 * {
  color: #ff7a45 !important;
  /* 상승 (> 0): 코랄 오렌지 */
}

body.dark-theme .etf-table td.primary-rate.rate-down,
body.dark-theme .etf-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 * {
  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;
}

/* 세로줄 격자형 테이블 옵션 (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);
}

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 {
  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;
}

/* 모바일 반응형 스타일 (카드 뷰) */
@media (max-width: 768px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  body {
    padding: 10px;
  }

  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="캔들정보"],
  .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-date,
  .mobile-history-row.highlight-today .mobile-history-val {
    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;
  }

  .global-nav-header {
    display: none !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;
  /* 핵심 요구사항: ETF 리포트 로고 심볼 백그라운드 기존 그라디언트 (딥그린 ➔ 에메랄드) */
  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;
}