:root {
    --line: 1px solid #E9ECEF;
    --top-pick-container: #f9fafb;
    --top-pick-label: #fff;
  --log-container: #f9fafb;
}

/* 다크 모드 예시 (data-theme="dark"로 전환) */
.dark-mode {
    --line: 1px solid #444;
    --top-pick-container: #444;
    --top-pick-label: black;
  --log-container: #444;
}

#extract-table tbody td {
    border-bottom: var(--line);
}


/* color.css: 색상 변수 정의 및 전체 요소에 색상 적용 */

/* 기본 테마 (Light Mode) */
:root {
    --info-bg: #ffffff;
    --info-border: #cccccc;
    --info-text-color: #333333;

    --section1-bottom-border: #cccccc;

    --index-label: #8c8c8c;

    --table-bottom-line: 1px solid #E9ECEF;

    --bg-theme-info-container: #f2f6f9;

    --bg-tooltip: #F5F6F7;
    --text-tooltip: #333333;
    --tooltip-bottom-border: #cccccc;
    --text-nav: #8c8c8c;
    --detected-label: black;
}

/* 다크 모드 예시 (data-theme="dark"로 전환) */
.dark-mode {
    --info-bg: #444444;
    --info-border: #555555;
    --info-text-color: #ffffff;

    --bg-section1-bottom: #1e1e1e;
    --section1-bottom-border: #555555;

    --table-border: #555555;
    --header-bg-color: #444444;

    --index-label: #8c8c8c;

    --table-bottom-line: 1px solid #444;

    --bg-theme-info-container: #333333;

    --bg-tooltip: #1a1a1a;
    --text-tooltip: white;
    --tooltip-bottom-border: #555555;
    --text-nav: #555555;
    --detected-label: white;
}

/* ─── 기존 :root, .dark-mode 블록은 그대로 두고, 아래에 섹션3 변수 추가 ─── */

/* Light Mode */
:root {
  /* Section3 */
  --section3-bg: #ffffff;
  --section3-border: #cccccc;
  --section3-label-bg: #f3f6fa;
  --section3-hr: #dddddd;
  --section3-button-border: #bbbbbb;
  --section3-button-bg: #fafafa;
  --section3-button-hover-bg: #e8f0ff;
}

/* Dark Mode (data-theme="dark" 또는 .dark-mode) */
.dark-mode {
  /* Section3 */
  --section3-bg: #2b2b2b;
  --section3-border: #555555;
  --section3-label-bg: #333333;
  --section3-hr: #444444;
  --section3-button-border: #666666;
  --section3-button-bg: #3a3a3a;
  --section3-button-hover-bg: #4a4a4a;
}


/* 전체 요소에 색상 적용 */
body {
    background-color: var(--body-bg, #fafafa);
    color: var(--font-color);
}

header {
    background-color: var(--header-bg, #007bff);
    color: var(--header-text-color, #ffffff);
}

footer {
    background-color: var(--footer-bg, #007bff);
    color: var(--footer-text-color, #ffffff);
}

/* 섹션1 Top */
.section1-top {
    color: var(--info-text-color, #333333);
}

.section1-top .info-item {
    border: 1px solid var(--info-border, #cccccc);
}

/* 상승은 초록, 하락은 빨강 (원하면 color.css 변수로 변경) */
.section1-top .stock-item .change.up {
    color: #E5456C;
}

.section1-top .stock-item .change.down {
    color: #4079BF;
}

.section1-top .stock-item .label {
    color: var(--index-label);
}

#theme-stocks-table tbody td {
    border-bottom: var(--table-bottom-line);
}

.theme-info-container {
    background-color: var(--bg-theme-info-container);
}

#top3-theme-table .table-top-border {
    border-top: 5px solid var(--bg-section);
}

#tooltip-table {
    background-color: var(--bg-tooltip);
    color: var(--text-tooltip);
}

#tooltip-table td {
    border-bottom: 1px solid var(--tooltip-bottom-border);
}

.nav__link {
    color: var(--text-nav);
}

.nav__link.active {
    color: var(--text-color);
}

.login-btn,
.signup-btn {
    color: var(--text-color);
}

.theme-stock.up {
    color: #E5456C;
}

.theme-stock.down {
    color: #4079BF;
}

.theme-change.up {
    color: #E5456C;
}

.theme-change.down {
    color: #4079BF;
}

#theme-table tbody td {
    border-bottom: var(--table-bottom-line);
}

#tooltip-table {
    background-color: var(--bg-tooltip);
}

.first-break {
    color: #007bff;
}

.first-release {
    color: #6c757d;
}

.second-break {
    color: #28a745;
}

.second-extract {
    color: #dc3545;
}

.log-time {
    color: #888;
}

.detected-label {
    color: #4079BF;
}

.section2 .log-container {
    background: var(--log-container);
}

#top-picks-container {
    background-color: var(--top-pick-container);
}

.highlight-row {
    background: var(--top-pick-label)
}