/* 흰 바탕 / 흰 요소. 차트 색과 다크 테마는 원래 값을 쓴다. */
html:not(.dark-theme) {
  --mc-bg: #fff;
  --mc-surface: #fff;
  --mc-surface-2: #fff;
  --mc-surface-3: #fff;
  --mc-surface-hover: #f9fafb;
  --mc-backboard: var(--mc-bg);
  --mc-section-bg: #fff;
  --mc-border: #e5e7eb;
  --mc-border-light: #d1d5db;
  --mc-text-2: #4b5563;
  --mc-text-3: #6b7280;
  --mc-muted: #6b7280;
  --mc-control-accent: #1d4ed8;
}

html:not(.dark-theme) :is(.mc-menubar, .mc-toolbar) {
  background: var(--mc-bg);
}

html:not(.dark-theme) :is(.mc-toggle-group, .rk-filter-buttons) {
  background: #fff;
  box-shadow: 0 0 0 1px var(--mc-border), var(--mc-shadow-sm);
}

html:not(.dark-theme) :is(
  .mc-menu-item, .mc-tab, .mc-toggle, .mc-select, .mc-btn, .mc-ai-btn,
  .rk-filter-btn, .rk-filter-select, .rk-page-btn, .hc-page-btn,
  .trend-press-btn, .surge-tb-btn, .date-btn, .mm-platform-tab
) {
  background: #fff;
  color: var(--mc-text-2);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out, color 120ms ease-out;
}

html:not(.dark-theme) :is(.mc-menu-item, .mc-tab, .mc-select, .mc-btn, .mc-ai-btn) {
  box-shadow: var(--mc-shadow-sm);
}

html:not(.dark-theme) :is(
  .mc-menu-item, .mc-tab, .mc-toggle, .mc-btn, .mc-ai-btn, .rk-filter-btn,
  .rk-page-btn, .hc-page-btn, .trend-press-btn, .surge-tb-btn, .date-btn, .mm-platform-tab
):hover:not(:disabled) {
  background: #fff;
  color: var(--mc-text);
  border-color: #9ca3af;
  box-shadow: inset 0 0 0 1px var(--mc-border-light);
}

html:not(.dark-theme) :is(
  .mc-menu-item.active, .mc-tab.active, .mc-toggle.active, .mc-mgmt-item.active,
  .rk-filter-btn.active, .rk-page-btn.active, .hc-page-btn.active,
  .trend-press-btn.active, .surge-tb-btn.active, .surge-tb-btn.has-filter,
  .surge-dd-item.active, .date-btn.active, .mm-platform-tab.active,
  .cr-category-preset[aria-pressed="true"]
) {
  background: #fff;
  color: var(--mc-control-accent);
  border-color: var(--mc-border-light);
  font-weight: 600;
  box-shadow: inset 0 -2px var(--mc-control-accent), var(--mc-shadow-sm);
}

/* JS가 인라인 색을 설정하는 기간 버튼도 같은 규칙을 사용한다. */
html:not(.dark-theme) .hc-period-btn {
  background: #fff !important;
  color: var(--mc-text-2) !important;
  box-shadow: inset 0 0 0 1px var(--mc-border);
}
html:not(.dark-theme) .hc-period-btn.is-active {
  color: var(--mc-control-accent) !important;
  box-shadow: inset 0 -2px var(--mc-control-accent), var(--mc-shadow-sm);
}

html:not(.dark-theme) #crSelectedBar {
  border: 1px solid var(--mc-border);
}

html:not(.dark-theme) .mc-main :is(button, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mc-control-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.dark-theme) :is(.mc-menu-item, .mc-tab, .mc-toggle, .mc-btn, .rk-filter-btn, .surge-tb-btn) {
    transition: none;
  }
}