/*
 * 다크 테마(html[data-theme="dark"]). 라이트는 app-compact.css 기본 색을 그대로 쓴다.
 * 색은 Blossom Trading 다크 테마(Blossom-Web-kotlin trading/css/dashboard.css의 :root)와 같다.
 * 아래 --blossom-* 값만 색의 원본이며, 나머지는 모두 이 값을 가리킨다. Blossom 색을 바꾸면 여기도 같이 바꾼다.
 * Bootstrap 5.2는 다크 모드가 없어 컴포넌트 변수와 색 유틸리티를 직접 바꾼다.
 * 선택자에 html[data-theme="dark"]를 붙여 Bootstrap·페이지 CSS보다 우선한다(링크 순서와 무관).
 */
html[data-theme="dark"] {
  color-scheme: dark;
  /* Blossom Trading 다크 색 */
  --blossom-bg: #080d16;
  --blossom-panel: #080d13;
  --blossom-panel-2: #0b1420;
  --blossom-line: #1d2a3a;
  --blossom-text: #e0eaf4;
  --blossom-soft: #91a1b5;
  --blossom-dim: #637286;
  --blossom-blue: #4d8dff;
  --blossom-green: #28d69a;
  --blossom-red: #ff5c72;
  --blossom-orange: #f5ad4e;
  --blossom-secondary: #253448;
  --blossom-secondary-text: #fff;
  --blossom-placeholder: #526174;
  --blossom-table-head: #0c1521;
  --blossom-row-hover: rgba(255, 255, 255, .018);

  /* app-compact.css 공통 변수 */
  --app-bg: var(--blossom-bg);
  --app-surface: var(--blossom-panel);
  --app-surface-muted: var(--blossom-panel-2);
  --app-surface-soft: rgba(77, 141, 255, .12);
  --app-border: var(--blossom-line);
  --app-border-strong: var(--blossom-line);
  --app-text: var(--blossom-text);
  --app-text-muted: var(--blossom-dim);
  --app-text-soft: var(--blossom-soft);
  --app-primary: var(--blossom-blue);
  --app-primary-hover: var(--blossom-blue);
  --app-primary-soft: rgba(77, 141, 255, .12);
  --app-primary-border: var(--blossom-blue);
  --app-danger: var(--blossom-red);
  --app-success: var(--blossom-green);
  --app-warning: var(--blossom-orange);
  --app-shadow-sm: none;
  --app-shadow-md: 0 24px 80px rgba(0, 0, 0, .55);
  --bs-primary: #4d8dff;
  --bs-primary-rgb: 77, 141, 255;
  --bs-link-color: var(--blossom-blue);
  --bs-link-hover-color: var(--blossom-blue);
  --bs-body-bg: var(--blossom-bg);
  --bs-body-color: var(--blossom-text);
  --bs-border-color: var(--blossom-line);
  --bs-heading-color: var(--blossom-text);

  /* 페이지 CSS의 직접 지정 색을 바꾼 변수(var(--theme-*, 원래 색)). 라이트에서는 정의하지 않아 원래 색을 쓴다. */
  --theme-surface-alt: var(--blossom-panel);
  --theme-surface-muted: var(--blossom-panel-2);
  --theme-row-hover: var(--blossom-row-hover);
  --theme-chip-bg: var(--blossom-secondary);
  --theme-primary-soft: rgba(77, 141, 255, .12);
  --theme-success-soft: rgba(40, 214, 154, .12);
  --theme-warning-soft: rgba(245, 173, 78, .12);
  --theme-danger-soft: rgba(255, 92, 114, .12);
  --theme-divider: var(--blossom-line);
  --theme-border: var(--blossom-line);
  --theme-border-strong: var(--blossom-line);
  --theme-primary-border: var(--blossom-blue);
  --theme-success-border: var(--blossom-green);
  --theme-warning-border: var(--blossom-orange);
  --theme-danger-border: var(--blossom-red);
  --theme-text: var(--blossom-text);
  --theme-text-soft: var(--blossom-soft);
  --theme-text-muted: var(--blossom-dim);
  --theme-primary-text: var(--blossom-blue);
  --theme-success-text: var(--blossom-green);
  --theme-warning-text: var(--blossom-orange);
  --theme-danger-text: var(--blossom-red);
  --theme-surface-glass: rgba(16, 25, 37, .94);
  /* 만세력 달력 항목 색(선택 색 30% + 기준색). 다크는 패널색과 섞고 글자는 앱 글자색 */
  --theme-pastel-base: var(--blossom-panel);
  --theme-pastel-text: var(--blossom-text);
  /* 꽉 찬 색 배지(업비트 위험·경고·유의·밈)의 다크 색: 색 글자 + 옅은 배경 */
  --theme-badge-danger-bg: rgba(255, 92, 114, .16);
  --theme-badge-danger-text: var(--blossom-red);
  --theme-badge-warning-bg: rgba(245, 173, 78, .16);
  --theme-badge-warning-text: var(--blossom-orange);
  --theme-badge-neutral-bg: var(--blossom-secondary);
  --theme-badge-neutral-text: var(--blossom-soft);
}

html[data-theme="dark"] body {
  background: radial-gradient(circle at 20% 0, rgba(48, 102, 190, .1), transparent 32%), var(--blossom-bg);
  background-attachment: fixed;
  color: var(--blossom-text);
}

html[data-theme="dark"] hr {
  color: var(--blossom-line);
}

/* 컴포넌트 */
html[data-theme="dark"] .card {
  --bs-card-bg: var(--blossom-panel);
  --bs-card-color: var(--blossom-text);
  --bs-card-border-color: var(--blossom-line);
  --bs-card-cap-bg: var(--blossom-panel);
  --bs-card-cap-color: var(--blossom-text);
}

html[data-theme="dark"] .modal {
  --bs-modal-bg: var(--blossom-panel);
  --bs-modal-color: var(--blossom-text);
  --bs-modal-border-color: var(--blossom-line);
  --bs-modal-header-border-color: var(--blossom-line);
  --bs-modal-footer-border-color: var(--blossom-line);
}

html[data-theme="dark"] .modal-backdrop {
  --bs-backdrop-bg: rgb(3, 7, 13);
  --bs-backdrop-opacity: .76;
}

html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas-lg,
html[data-theme="dark"] .offcanvas-md,
html[data-theme="dark"] .offcanvas-sm {
  --bs-offcanvas-bg: var(--blossom-panel);
  --bs-offcanvas-color: var(--blossom-text);
  --bs-offcanvas-border-color: var(--blossom-line);
}

html[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--blossom-panel);
  --bs-dropdown-color: var(--blossom-text);
  --bs-dropdown-border-color: var(--blossom-line);
  --bs-dropdown-link-color: var(--blossom-text);
  --bs-dropdown-link-hover-bg: var(--blossom-secondary);
  --bs-dropdown-link-hover-color: var(--blossom-text);
  --bs-dropdown-divider-bg: var(--blossom-line);
  --bs-dropdown-header-color: var(--blossom-dim);
}

html[data-theme="dark"] .table {
  --bs-table-color: var(--blossom-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--blossom-line);
  --bs-table-striped-color: var(--blossom-text);
  --bs-table-striped-bg: var(--blossom-row-hover);
  --bs-table-hover-color: var(--blossom-text);
  --bs-table-hover-bg: var(--blossom-row-hover);
  --bs-table-active-color: var(--blossom-text);
  --bs-table-active-bg: var(--blossom-row-hover);
  color: var(--blossom-text);
  border-color: var(--blossom-line);
}

html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-white {
  --bs-table-color: var(--blossom-dim);
  --bs-table-bg: var(--blossom-table-head);
  --bs-table-border-color: var(--blossom-line);
}

html[data-theme="dark"] .list-group {
  --bs-list-group-color: var(--blossom-text);
  --bs-list-group-bg: var(--blossom-panel);
  --bs-list-group-border-color: var(--blossom-line);
  --bs-list-group-action-color: var(--blossom-soft);
  --bs-list-group-action-hover-color: var(--blossom-text);
  --bs-list-group-action-hover-bg: var(--blossom-row-hover);
  --bs-list-group-action-active-color: var(--blossom-text);
  --bs-list-group-action-active-bg: var(--blossom-secondary);
  --bs-list-group-disabled-color: var(--blossom-dim);
  --bs-list-group-disabled-bg: var(--blossom-panel);
}

html[data-theme="dark"] .nav-tabs {
  --bs-nav-tabs-border-color: var(--blossom-line);
  --bs-nav-tabs-link-hover-border-color: var(--blossom-line) var(--blossom-line) var(--blossom-line);
  --bs-nav-tabs-link-active-color: var(--blossom-text);
  --bs-nav-tabs-link-active-bg: var(--blossom-panel);
  --bs-nav-tabs-link-active-border-color: var(--blossom-line) var(--blossom-line) var(--blossom-panel);
}

html[data-theme="dark"] .pagination {
  --bs-pagination-color: var(--blossom-soft);
  --bs-pagination-bg: var(--blossom-panel);
  --bs-pagination-border-color: var(--blossom-line);
  --bs-pagination-hover-color: var(--blossom-text);
  --bs-pagination-hover-bg: var(--blossom-secondary);
  --bs-pagination-hover-border-color: var(--blossom-line);
  --bs-pagination-focus-bg: var(--blossom-secondary);
  --bs-pagination-disabled-color: var(--blossom-dim);
  --bs-pagination-disabled-bg: var(--blossom-panel-2);
  --bs-pagination-disabled-border-color: var(--blossom-line);
}

html[data-theme="dark"] .accordion {
  --bs-accordion-color: var(--blossom-text);
  --bs-accordion-bg: var(--blossom-panel);
  --bs-accordion-border-color: var(--blossom-line);
  --bs-accordion-btn-color: var(--blossom-text);
  --bs-accordion-btn-bg: var(--blossom-panel);
  --bs-accordion-active-color: var(--blossom-text);
  --bs-accordion-active-bg: var(--blossom-secondary);
}

html[data-theme="dark"] .toast {
  --bs-toast-bg: var(--blossom-panel);
  --bs-toast-color: var(--blossom-text);
  --bs-toast-border-color: var(--blossom-line);
  --bs-toast-header-bg: var(--blossom-panel-2);
  --bs-toast-header-color: var(--blossom-soft);
}

html[data-theme="dark"] .popover {
  --bs-popover-bg: var(--blossom-panel);
  --bs-popover-border-color: var(--blossom-line);
  --bs-popover-body-color: var(--blossom-text);
  --bs-popover-header-bg: var(--blossom-panel-2);
  --bs-popover-header-color: var(--blossom-text);
}

/* 입력 요소: Blossom input·select와 같이 panel-2 배경, line 테두리 */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
  background-color: var(--blossom-panel-2);
  border-color: var(--blossom-line);
  color: var(--blossom-text);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: var(--blossom-panel-2);
  border-color: var(--blossom-blue);
  box-shadow: 0 0 0 .14rem rgba(77, 141, 255, .25);
  color: var(--blossom-text);
}

html[data-theme="dark"] .form-control::placeholder {
  color: var(--blossom-placeholder);
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled {
  background-color: var(--blossom-panel);
  color: var(--blossom-dim);
}

html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2391a1b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .form-check-input:not(:checked) {
  background-color: var(--blossom-panel-2);
  border-color: var(--blossom-line);
}

html[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2391a1b5'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .form-text,
html[data-theme="dark"] .form-label {
  color: var(--blossom-soft);
}

/* 버튼: Blossom 기본 버튼(blue)·보조 버튼(secondary) 색 */
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--blossom-blue);
  --bs-btn-border-color: var(--blossom-blue);
  --bs-btn-hover-bg: var(--blossom-blue);
  --bs-btn-hover-border-color: var(--blossom-blue);
  --bs-btn-active-bg: var(--blossom-blue);
  --bs-btn-active-border-color: var(--blossom-blue);
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary {
  --bs-btn-color: var(--blossom-secondary-text);
  --bs-btn-bg: var(--blossom-secondary);
  --bs-btn-border-color: var(--blossom-secondary);
  --bs-btn-hover-color: var(--blossom-secondary-text);
  --bs-btn-hover-bg: var(--blossom-secondary);
  --bs-btn-hover-border-color: var(--blossom-line);
  --bs-btn-active-color: var(--blossom-secondary-text);
  --bs-btn-active-bg: var(--blossom-secondary);
  --bs-btn-active-border-color: var(--blossom-line);
}

html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--blossom-soft);
  --bs-btn-border-color: var(--blossom-line);
  --bs-btn-hover-color: var(--blossom-secondary-text);
  --bs-btn-hover-bg: var(--blossom-secondary);
  --bs-btn-hover-border-color: var(--blossom-secondary);
  --bs-btn-active-color: var(--blossom-secondary-text);
  --bs-btn-active-bg: var(--blossom-secondary);
  --bs-btn-active-border-color: var(--blossom-secondary);
}

/* 색 유틸리티(Bootstrap이 !important로 지정) */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body {
  background-color: var(--blossom-panel) !important;
}

html[data-theme="dark"] .bg-light {
  background-color: var(--blossom-panel-2) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body {
  color: var(--blossom-text) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
  color: var(--blossom-dim) !important;
}

html[data-theme="dark"] .border-light {
  border-color: var(--blossom-line) !important;
}

/* SweetAlert2: Blossom 알림창(trading-alert-popup)과 같은 panel 배경 */
html[data-theme="dark"] .swal2-popup {
  background: var(--blossom-panel);
  color: var(--blossom-text);
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
  color: var(--blossom-text) !important;
}

html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select {
  background: var(--blossom-panel-2);
  border-color: var(--blossom-line);
  color: var(--blossom-text);
}

html[data-theme="dark"] .swal2-validation-message {
  background: rgba(245, 173, 78, .12) !important;
  color: var(--blossom-orange) !important;
}

/* app-compact.css 공통 화면 요소(색을 직접 지정한 곳) */
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .list-group-item {
  border-color: var(--blossom-line);
}

html[data-theme="dark"] .table thead th {
  border-bottom-color: var(--blossom-line);
  background: var(--blossom-table-head);
  color: var(--blossom-dim);
}

html[data-theme="dark"] .table tbody tr:hover {
  background: var(--blossom-row-hover);
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-body {
  background: var(--blossom-panel);
}

html[data-theme="dark"] .modal-content {
  border: 1px solid var(--blossom-line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .pending-popup-footer {
  border-color: var(--blossom-line);
  background: var(--blossom-panel);
}

html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .compact-page-title,
html[data-theme="dark"] .compact-panel-title,
html[data-theme="dark"] .app-loading-text {
  color: var(--blossom-text);
}

html[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--blossom-line);
}

html[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--blossom-dim);
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--blossom-blue);
  border-color: var(--blossom-line) var(--blossom-line) var(--blossom-panel);
  background: var(--blossom-panel);
}

html[data-theme="dark"] .app-toolbar {
  border-color: var(--blossom-line);
  background: var(--blossom-panel-2);
}

html[data-theme="dark"] .app-panel {
  border-color: var(--blossom-line);
  background: var(--blossom-panel);
  box-shadow: none;
}

html[data-theme="dark"] .app-section-title,
html[data-theme="dark"] .compact-muted,
html[data-theme="dark"] .kis-price-krw,
html[data-theme="dark"] .market-ai-probability-label {
  color: var(--blossom-dim);
}

html[data-theme="dark"] .app-muted-note {
  color: var(--blossom-dim) !important;
}

html[data-theme="dark"] .app-list-row::after {
  background: var(--blossom-line);
}

html[data-theme="dark"] .app-list-row:hover {
  background: var(--blossom-row-hover);
  box-shadow: inset 3px 0 0 var(--blossom-blue);
}

html[data-theme="dark"] .app-image-modal-preview,
html[data-theme="dark"] .app-lightbox-content,
html[data-theme="dark"] .app-lightbox-header,
html[data-theme="dark"] .app-lightbox-body,
html[data-theme="dark"] .app-lightbox-footer {
  background: var(--blossom-panel) !important;
  background-color: var(--blossom-panel) !important;
}

html[data-theme="dark"] .app-info-soft {
  background-color: rgba(77, 141, 255, .12) !important;
  color: var(--blossom-blue) !important;
}

html[data-theme="dark"] .app-loading-popup {
  background: var(--blossom-panel) !important;
}

html[data-theme="dark"] .app-loading-bar {
  background: var(--blossom-line);
}

html[data-theme="dark"] .loading-layer {
  background: rgba(3, 7, 13, .76) !important;
  color: var(--blossom-text) !important;
}

html[data-theme="dark"] .loading-layer .spinner,
html[data-theme="dark"] .spinner:not(.spinner-border) {
  border-color: var(--blossom-line) !important;
}

html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .search-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .panel-card {
  border-color: var(--blossom-line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .app-main-header {
  border-bottom-color: var(--blossom-line);
  background: rgba(8, 13, 22, .94);
  box-shadow: none;
}

html[data-theme="dark"] .app-main-header .dropdown-menu {
  border-color: var(--blossom-line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .clickable-user-label {
  border-color: var(--blossom-line);
  background: var(--blossom-panel);
  color: var(--blossom-soft) !important;
}

/* 상승·횡보·하락 배지: Blossom 상태 배지처럼 색 글자 + 12% 배경 */
html[data-theme="dark"] .market-ai-probability-badge--rise {
  border-color: transparent;
  background: rgba(77, 141, 255, .12);
  color: var(--blossom-blue);
}

html[data-theme="dark"] .market-ai-probability-badge--sideways {
  border-color: transparent;
  background: rgba(40, 214, 154, .12);
  color: var(--blossom-green);
}

html[data-theme="dark"] .market-ai-probability-badge--fall {
  border-color: transparent;
  background: rgba(245, 173, 78, .12);
  color: var(--blossom-orange);
}

/* Bootstrap 알림 박스: Blossom 상태 배지처럼 색 글자 + 12% 배경 */
html[data-theme="dark"] .alert-primary,
html[data-theme="dark"] .alert-info {
  --bs-alert-color: var(--blossom-blue);
  --bs-alert-bg: rgba(77, 141, 255, .12);
  --bs-alert-border-color: rgba(77, 141, 255, .3);
  --bs-alert-link-color: var(--blossom-blue);
}

html[data-theme="dark"] .alert-success {
  --bs-alert-color: var(--blossom-green);
  --bs-alert-bg: rgba(40, 214, 154, .12);
  --bs-alert-border-color: rgba(40, 214, 154, .3);
  --bs-alert-link-color: var(--blossom-green);
}

html[data-theme="dark"] .alert-warning {
  --bs-alert-color: var(--blossom-orange);
  --bs-alert-bg: rgba(245, 173, 78, .12);
  --bs-alert-border-color: rgba(245, 173, 78, .3);
  --bs-alert-link-color: var(--blossom-orange);
}

html[data-theme="dark"] .alert-danger {
  --bs-alert-color: var(--blossom-red);
  --bs-alert-bg: rgba(255, 92, 114, .12);
  --bs-alert-border-color: rgba(255, 92, 114, .3);
  --bs-alert-link-color: var(--blossom-red);
}

html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-dark {
  --bs-alert-color: var(--blossom-soft);
  --bs-alert-bg: var(--blossom-panel-2);
  --bs-alert-border-color: var(--blossom-line);
  --bs-alert-link-color: var(--blossom-text);
}

/* Bootstrap 연한 배경 배지·유틸리티(bg-*-subtle은 5.3 전용이라 5.2의 bg-light 계열만) */
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-bg-light {
  background-color: var(--blossom-secondary) !important;
  color: var(--blossom-text) !important;
}

/* Bootstrap 빨강·주황·초록 요소: 꽉 찬 원색 대신 Blossom처럼 색 글자 + 옅은 배경(눈부심 방지) */
html[data-theme="dark"] .text-danger { color: var(--blossom-red) !important; }
html[data-theme="dark"] .text-success { color: var(--blossom-green) !important; }
html[data-theme="dark"] .text-warning { color: var(--blossom-orange) !important; }
html[data-theme="dark"] .border-danger { border-color: rgba(255, 92, 114, .45) !important; }

html[data-theme="dark"] .badge.bg-danger,
html[data-theme="dark"] .badge.text-bg-danger {
  background-color: rgba(255, 92, 114, .16) !important;
  color: var(--blossom-red) !important;
}

html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.text-bg-warning {
  background-color: rgba(245, 173, 78, .16) !important;
  color: var(--blossom-orange) !important;
}

html[data-theme="dark"] .badge.bg-success,
html[data-theme="dark"] .badge.text-bg-success {
  background-color: rgba(40, 214, 154, .16) !important;
  color: var(--blossom-green) !important;
}

html[data-theme="dark"] .btn-outline-danger {
  --bs-btn-color: var(--blossom-red);
  --bs-btn-border-color: rgba(255, 92, 114, .45);
  --bs-btn-hover-color: var(--blossom-red);
  --bs-btn-hover-bg: rgba(255, 92, 114, .16);
  --bs-btn-hover-border-color: rgba(255, 92, 114, .6);
  --bs-btn-active-color: var(--blossom-red);
  --bs-btn-active-bg: rgba(255, 92, 114, .22);
  --bs-btn-active-border-color: rgba(255, 92, 114, .6);
}

html[data-theme="dark"] .btn-outline-success {
  --bs-btn-color: var(--blossom-green);
  --bs-btn-border-color: rgba(40, 214, 154, .45);
  --bs-btn-hover-color: var(--blossom-green);
  --bs-btn-hover-bg: rgba(40, 214, 154, .16);
  --bs-btn-hover-border-color: rgba(40, 214, 154, .6);
  --bs-btn-active-color: var(--blossom-green);
  --bs-btn-active-bg: rgba(40, 214, 154, .22);
  --bs-btn-active-border-color: rgba(40, 214, 154, .6);
}

html[data-theme="dark"] .btn-outline-warning {
  --bs-btn-color: var(--blossom-orange);
  --bs-btn-border-color: rgba(245, 173, 78, .45);
  --bs-btn-hover-color: var(--blossom-orange);
  --bs-btn-hover-bg: rgba(245, 173, 78, .16);
  --bs-btn-hover-border-color: rgba(245, 173, 78, .6);
  --bs-btn-active-color: var(--blossom-orange);
  --bs-btn-active-bg: rgba(245, 173, 78, .22);
  --bs-btn-active-border-color: rgba(245, 173, 78, .6);
}

html[data-theme="dark"] .btn-danger {
  --bs-btn-color: var(--blossom-red);
  --bs-btn-bg: rgba(255, 92, 114, .16);
  --bs-btn-border-color: rgba(255, 92, 114, .45);
  --bs-btn-hover-color: var(--blossom-red);
  --bs-btn-hover-bg: rgba(255, 92, 114, .24);
  --bs-btn-hover-border-color: rgba(255, 92, 114, .6);
  --bs-btn-active-color: var(--blossom-red);
  --bs-btn-active-bg: rgba(255, 92, 114, .28);
  --bs-btn-active-border-color: rgba(255, 92, 114, .6);
}

/*
 * Blossom Trading 대시보드 안(iframe, ?embed=blossom)에서는 대시보드 팝업과 같은 색을 쓴다.
 * 패널·글자는 Blossom 원래 값(dashboard.css :root)이고, 바탕은 팝업 패널색이라 팝업과 이어져 보인다.
 */
html[data-theme="dark"][data-embed="blossom"] {
  --blossom-panel: #101925;
  --blossom-text: #edf3fa;
}

html[data-theme="dark"][data-embed="blossom"] body {
  background: var(--blossom-panel);
}