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

/* 기본 테마 (Light Mode) */
:root {
  /* 전체 페이지 */
  --body-bg: #F5F6F7;
  --font-color: #333333;

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

  /* 헤더 */
  --header-bg: #F5F6F7;
  --header-text-color: #333333;

  /* 푸터 */
  --footer-bg: #ffffff;
  --footer-text-color: #333333;

  --bg-section: #fdfdfd;

  --info-bg: #ffffff;
  --info-border: #cccccc;
  --info-text-color: #333333;

  /* 섹션1 Bottom (테마뷰 영역) */
  --section1-bottom-border: #cccccc;

  /* 섹션2 (등락률 TOP30) */
  --table-border: #cccccc;
  --header-bg-color: #eaeaea;

  --empty-star: url('/static/image/dark_empty_star.png');
  --filled-star: url('/static/image/filled_star.png');

  --bottom-line-color: #8c8c8c;

  --index-label: #8c8c8c;

  --value-toggle-active: #ff2f85;
  --change-toggle-active: #4079BF;
  --toggle-background: #F4F4F4;
  --toggle-text: #8c8c8c;

  --bg-tooltip: #F5F6F7;
  --text-tooltip: #333333;
  --tooltip-bottom-border: #cccccc;
  --text-nav: #8c8c8c;
  --bg-period-button: #E9ECEF;
  --bg-period-button-hover: #BCC6CF;
  --bg-period-button-active: #007bff;
  --period-button-active: white;
  --img-logo: url('/static/image/light_logo_domestic.png');
  --img-logo-global: url('/static/image/light_logo_global.png');
  --theme-selected: #e0f3ff;  /* 원하는 색상으로 조정 */
  --emp-title: #ff2f85;
}

/* 다크 모드 예시 (data-theme="dark"로 전환) */
.dark-mode {
  --body-bg: #1a1a1a;
  --font-color: white;

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

  --header-bg: #1a1a1a;
  --header-text-color: #white;

  --footer-bg: #1e1e1e;
  --footer-text-color: #white;

  --bg-section: #252525;

  --info-bg: #444444;
  --info-border: #555555;
  --info-text-color: #ffffff;

  --section1-bottom-border: #555555;

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

  --empty-star: url('/static/image/empty_star.png');
  --filled-star: url('/static/image/filled_star.png');

  --bottom-line-color: #8c8c8c;

  --index-label: #8c8c8c;

  --value-toggle-active: #ff2f85;
  --change-toggle-active: #4079BF;
  --toggle-background: #333333;
  --toggle-text: #8c8c8c;

  --bg-tooltip: #1a1a1a;
  --text-tooltip: white;
  --tooltip-bottom-border: #555555;
  --text-nav: #555555;
  --bg-period-button: #6B6B6B;
  --bg-period-button-hover: #595959;
  --bg-period-button-active: white;
  --period-button-active: black;
  --theme-selected: #474747;
  --img-logo: url('/static/image/dark_logo_domestic.png');
  --img-logo-global: url('/static/image/dark_logo_global.png');
}

.theme-issue-list tbody td,
.theme-table tbody td,
#favorites-table tbody td {
  border-bottom: var(--theme-table-bottom-line);
}

.stock-summary, .issue-list {
  background-color: var(--info-bg);
}

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

.modal-content, .summary, .indicator-block {
  background-color: var(--bg-section);
}

.tech-summary > .summary-left > .code {
  color: var(--bottom-line-color);
}
.modal-body {
  background-color: var(--body-bg);
}

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

.logo.domestic {
  background-image: var(--img-logo);
  background-size: cover;
}

.logo.global {
  background-image: var(--img-logo-global);
  background-size: cover;
}

.favorite-button.empty {
  background-image: var(--empty-star);
  background-size: cover;
}

.favorite-button.filled {
  background-image: var(--filled-star);
  background-size: cover;
}

.stock-rate.up, .indicator-header .label.up, .indicator-table td.up {
  color: #E5456C;
}

.stock-rate.down, .indicator-header .label.down, .indicator-table td.down {
  color: #4079BF;
}

.bottom-line {
  color: var(--bottom-line-color);
}

.toggle-buttons {
  background-color: var(--toggle-background);
}

.toggle-button {
  color: var(--toggle-text);
}

.toggle-button.change.active {
  background-color: var(--change-toggle-active);
  color: white;
}

.toggle-button.value.active {
  background-color: var(--value-toggle-active);
  color: white;
}

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

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

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

.emp-title {
color: var(--emp-title);
}

.section
{
    background-color: var(--bg-section);
}

.stock-summary .left .code {
    color: var(--bottom-line-color);
}

.period-button, .sub-tab-button {
  background-color: var(--bg-period-button);
}

.period-button:hover, .sub-tab-button:hover {
  background-color: var(--bg-period-button-hover);
}

.period-button.active, .sub-tab-button.active {
  background-color: var(--bg-period-button-active);
  color: var(--period-button-active);
}

tr.selected {
  background-color: var(--theme-selected);
}