@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;500;600;700&display=swap');

/* =========================================================
   AmaGetDon Trendy Premium Design System v3.0
   (Vercel / Linear / Stripe Inspired Ultra-Modern UI)
========================================================== */

/* ── 0. CSS Custom Properties ── */
:root {
    --trendy-radius-xs: 8px;
    --trendy-radius-sm: 12px;
    --trendy-radius-md: 16px;
    --trendy-radius-lg: 20px;
    --trendy-radius-xl: 24px;
    --trendy-blur: 24px;
    --trendy-blur-sm: 12px;
    --trendy-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --trendy-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --trendy-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
    --trendy-shadow-hover: 0 4px 12px rgba(0,0,0,0.06), 0 20px 48px rgba(0,0,0,0.1);
    --trendy-shadow-elevated: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.04);
    --trendy-border: 1px solid rgba(128, 128, 128, 0.1);
    --trendy-border-subtle: 1px solid rgba(128, 128, 128, 0.06);
    --trendy-glow-primary: 0 0 24px rgba(var(--falcon-primary-rgb), 0.2);
    --trendy-glow-success: 0 0 24px rgba(var(--falcon-success-rgb), 0.2);
    --trendy-glow-warning: 0 0 24px rgba(var(--falcon-warning-rgb), 0.2);
    --trendy-glow-danger: 0 0 24px rgba(var(--falcon-danger-rgb), 0.2);
    --trendy-glow-info: 0 0 24px rgba(var(--falcon-info-rgb), 0.2);
    --trendy-surface-1: rgba(255, 255, 255, 0.7);
    --trendy-surface-2: rgba(255, 255, 255, 0.5);
    --trendy-surface-3: rgba(255, 255, 255, 0.3);
    --trendy-accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --trendy-mesh-1: radial-gradient(at 40% 20%, rgba(var(--falcon-primary-rgb), 0.08) 0px, transparent 50%);
    --trendy-mesh-2: radial-gradient(at 80% 80%, rgba(var(--falcon-info-rgb), 0.05) 0px, transparent 50%);
}

[data-bs-theme="dark"] {
    --trendy-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 8px 32px rgba(0,0,0,0.25);
    --trendy-shadow-hover: 0 4px 12px rgba(0,0,0,0.2), 0 20px 48px rgba(0,0,0,0.35);
    --trendy-shadow-elevated: 0 8px 40px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.15);
    --trendy-border: 1px solid rgba(255, 255, 255, 0.06);
    --trendy-border-subtle: 1px solid rgba(255, 255, 255, 0.03);
    --trendy-surface-1: rgba(22, 27, 38, 0.7);
    --trendy-surface-2: rgba(22, 27, 38, 0.5);
    --trendy-surface-3: rgba(22, 27, 38, 0.3);
    --trendy-mesh-1: radial-gradient(at 40% 20%, rgba(var(--falcon-primary-rgb), 0.12) 0px, transparent 50%);
    --trendy-mesh-2: radial-gradient(at 80% 80%, rgba(var(--falcon-info-rgb), 0.08) 0px, transparent 50%);
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.01em;
}


/* ==========================================================
   Trade Theme — Trading 콘솔 표준 디자인 시스템
   (구 trade-theme.css 본체)
   ========================================================== */

/* === Trade Accent — 좌측 네비 컬러 트래킹 변수 ===
   --trade-accent-rgb 는 RGB triplet (그라디언트의 rgba() 합성용). */
:root {
    --trade-accent: var(--falcon-primary, #3b82f6);
    --trade-accent-soft: rgba(59, 130, 246, 0.12);
    --trade-accent-text: var(--falcon-primary, #3b82f6);
    --trade-accent-rgb: 59, 130, 246;
}

[data-bs-theme="dark"] {
    --trade-accent: #475569;
    --trade-accent-soft: rgba(100, 116, 139, 0.22);
    --trade-accent-text: #94a3b8;
    --trade-accent-rgb: 100, 116, 139;
}

/* 좌측 네비가 inverted/darker 로 바뀌면 자동 슬레이트 다운 */
body:has(.navbar-vertical.navbar-inverted),
body:has(.navbar-vertical.navbar-darker) {
    --trade-accent: #1e293b;
    --trade-accent-soft: rgba(30, 41, 59, 0.1);
    --trade-accent-text: #1e293b;
    --trade-accent-rgb: 71, 85, 105;
}
[data-bs-theme="dark"] body:has(.navbar-vertical.navbar-inverted),
[data-bs-theme="dark"] body:has(.navbar-vertical.navbar-darker) {
    --trade-accent: #475569;
    --trade-accent-soft: rgba(148, 163, 184, 0.18);
    --trade-accent-text: #94a3b8;
    --trade-accent-rgb: 100, 116, 139;
}

/* === Navbar 다크 추적 — 카드 내부 Bootstrap 강조색도 함께 슬레이트 다운 ===
   좌측 네비가 inverted/darker 면 본문 카드의 .text-primary/.btn-primary/.bg-info-subtle 등도
   같은 --trade-accent 톤으로 통일. 카드 외부(메뉴/토스트/모달 등) 에는 영향 없음.
   .btn-danger 등 위험 액션 색상은 의미 전달이라 의도적으로 추적 제외. */
body:has(.navbar-vertical.navbar-inverted) .card :is(.text-primary, .text-info, .text-info-emphasis, .text-primary-emphasis),
body:has(.navbar-vertical.navbar-darker) .card :is(.text-primary, .text-info, .text-info-emphasis, .text-primary-emphasis) {
    color: var(--trade-accent-text) !important;
}
body:has(.navbar-vertical.navbar-inverted) .card .btn-primary,
body:has(.navbar-vertical.navbar-darker) .card .btn-primary {
    background-color: var(--trade-accent);
    border-color: var(--trade-accent);
}
body:has(.navbar-vertical.navbar-inverted) .card .btn-primary:hover,
body:has(.navbar-vertical.navbar-darker) .card .btn-primary:hover,
body:has(.navbar-vertical.navbar-inverted) .card .btn-primary:focus,
body:has(.navbar-vertical.navbar-darker) .card .btn-primary:focus,
body:has(.navbar-vertical.navbar-inverted) .card .btn-primary:active,
body:has(.navbar-vertical.navbar-darker) .card .btn-primary:active {
    background-color: var(--trade-accent-text);
    border-color: var(--trade-accent-text);
    color: #fff;
}
body:has(.navbar-vertical.navbar-inverted) .card :is(.btn-outline-primary, .btn-outline-info, .btn-outline-secondary),
body:has(.navbar-vertical.navbar-darker) .card :is(.btn-outline-primary, .btn-outline-info, .btn-outline-secondary) {
    color: var(--trade-accent-text);
    border-color: var(--trade-accent);
}
body:has(.navbar-vertical.navbar-inverted) .card :is(.btn-outline-primary, .btn-outline-info):hover,
body:has(.navbar-vertical.navbar-darker) .card :is(.btn-outline-primary, .btn-outline-info):hover {
    background-color: var(--trade-accent);
    border-color: var(--trade-accent);
    color: #fff;
}
body:has(.navbar-vertical.navbar-inverted) .card :is(.badge-soft-primary, .badge.bg-primary),
body:has(.navbar-vertical.navbar-darker) .card :is(.badge-soft-primary, .badge.bg-primary) {
    background-color: var(--trade-accent-soft) !important;
    color: var(--trade-accent-text) !important;
}
body:has(.navbar-vertical.navbar-inverted) .card :is(.bg-info-subtle, .bg-primary-subtle),
body:has(.navbar-vertical.navbar-darker) .card :is(.bg-info-subtle, .bg-primary-subtle) {
    background-color: var(--trade-accent-soft) !important;
}
body:has(.navbar-vertical.navbar-inverted) .card :is(.form-control, .form-select):focus,
body:has(.navbar-vertical.navbar-darker) .card :is(.form-control, .form-select):focus {
    border-color: var(--trade-accent);
    box-shadow: 0 0 0 0.2rem var(--trade-accent-soft);
}

/* === Hero (Soft gradient blob — 좌측 네비 색상 자동 추적) ===
   --trade-accent-rgb 단일 톤이 navbar 색을 따라감. variant 클래스(.hero-ocean 등)는
   마크업에 남아있어도 무력화 — 모든 페이지의 hero 가 동일한 navbar 톤. */
.trade-hero {
    background: var(--falcon-card-bg, #ffffff);
    border: 1px solid var(--falcon-border-color);
    border-radius: 0.7rem;
    color: var(--falcon-emphasis-color);
    position: relative;
    overflow: hidden;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
[data-bs-theme="dark"] .trade-hero {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* 우측 — Falcon spot illustration (corner-4.png) */
.trade-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    pointer-events: none;
    background-image: url('/img/icons/spot-illustrations/corner-4.png');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}
[data-bs-theme="dark"] .trade-hero::after {
    opacity: 0.6;
}

.trade-hero > * { position: relative; z-index: 1; }

/* 좌측 아이콘 — 둥근 사각형, navbar 톤 soft tint */
.trade-hero .hero-icon {
    width: 44px; height: 44px;
    border-radius: 0.55rem;
    background: var(--trade-accent-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--trade-accent-text);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.trade-hero .hero-eyebrow {
    color: var(--falcon-tertiary-color);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.trade-hero h6,
.trade-hero .hero-title {
    color: var(--falcon-emphasis-color);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    font-size: 1.35rem;
    letter-spacing: -0.015em;
}
/* accent 텍스트 — navbar-tracked 톤 (단색) */
.trade-hero .hero-title .accent {
    color: var(--trade-accent-text);
    font-weight: 700;
}

.trade-hero small,
.trade-hero .hero-desc {
    color: var(--falcon-secondary-color);
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 500;
    margin-top: 0.2rem;
}

.trade-hero .hero-meta {
    color: var(--falcon-secondary-color);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

.trade-hero .hero-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--falcon-card-bg, #fff);
    border: 1px solid var(--falcon-border-color);
    border-radius: 0.5rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    color: var(--falcon-emphasis-color);
    font-weight: 600;
    white-space: nowrap;
}
.trade-hero .hero-action-pill i { color: var(--trade-accent-text); }

.trade-hero .hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--trade-accent-soft);
    color: var(--trade-accent-text);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.trade-hero .hero-mini {
    background: var(--falcon-bg-100, #f8fafc);
    border: 1px solid var(--falcon-border-color);
    border-radius: 0.5rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.72rem;
    color: var(--falcon-body-color);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.trade-hero .hero-mini b { color: var(--falcon-emphasis-color); font-weight: 700; }

/* === 카드 헤더 — 좌우 카드 간 높이 일관 보정 ===
   버튼이 들어가는 헤더(.btn 약 2.375rem + padding) 와 텍스트만 있는 헤더의 높이를 통일.
   3.875rem = 버튼(2.375) + 헤더 padding 위/아래(0.75 * 2). */
.card-header.bg-body-tertiary {
    min-height: 3.875rem !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
.card-header.bg-body-tertiary > h6:only-child {
    flex: 1 1 auto;
}
/* 헤더 안의 버튼은 작게(.btn-sm 수준) 강제 — 헤더 높이 부풀림 방지 */
.card-header.bg-body-tertiary > .btn {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    line-height: 1.4 !important;
}

/* === 카드 본문 상단 정렬 ===
   .card.h-100 안에서 .card-body 가 늘어날 때, 그리드/플렉스 콘텐츠가 상단에 고정되도록.
   하단에 빈 공간이 남아도 콘텐츠는 위에서부터 쌓인다. */
.card.h-100 > .card-body.d-grid,
.card-body.d-grid {
    align-content: start;
}
.card.h-100 > .card-body.d-flex.flex-column {
    justify-content: flex-start;
}

/* === Form 입력 요소 높이 통일 — 강제 보정 === */
/* Bootstrap/Falcon input-group 내 요소 높이가 들쭉날쭉한 문제 해결.
   카드 본문(.card-body) 내부에만 적용. form-select 도 동일 높이로 정렬. */
.card-body .form-control:not(.form-control-sm):not(.form-control-lg),
.card-body .form-select:not(.form-select-sm):not(.form-select-lg) {
    height: 2.375rem !important;
    min-height: 2.375rem !important;
    line-height: 1.5 !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
}
/* form-select 는 우측 화살표 공간이 추가로 필요 */
.card-body .form-select:not(.form-select-sm):not(.form-select-lg) {
    padding-right: 2.25rem !important;
}
/* 같은 row 안에서 .btn 도 인풋과 같은 라인에 정렬되도록 */
.card-body .row > [class*="col-"] > .btn:not(.btn-sm):not(.btn-lg) {
    height: 2.375rem;
    min-height: 2.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.card-body .input-group:not(.input-group-sm):not(.input-group-lg) {
    align-items: stretch;
}
.card-body .input-group:not(.input-group-sm):not(.input-group-lg) > .form-control {
    height: 2.375rem !important;
    min-height: 2.375rem !important;
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    font-size: 0.875rem !important;
}
.card-body .input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-text {
    height: 2.375rem !important;
    min-height: 2.375rem !important;
    padding: 0 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: 0.875rem !important;
}
.card-body .input-group:not(.input-group-sm):not(.input-group-lg) > .btn {
    height: 2.375rem !important;
    min-height: 2.375rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* === Trade Card (KPI / 정보 카드) === */
.trade-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.7rem;
    border: 1px solid var(--falcon-border-color);
    background: var(--falcon-card-bg, #fff);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.trade-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.trade-card .ribbon {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.22rem 0.7rem;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    border-radius: 0 0 0.5rem 0;
    z-index: 1;
}

/* ribbon 이 있는 trade-card 는 상단 여유 추가 (icon 과 ribbon 간 호흡) */
.trade-card:has(> .ribbon) {
    padding-top: 1.6rem !important;
}
.trade-card .icon-tile {
    width: 46px; height: 46px;
    border-radius: 0.7rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.trade-card .icon-tile.tile-lg {
    width: 56px; height: 56px;
    border-radius: 0.85rem;
    font-size: 1.3rem;
}
.trade-card .price-num {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--falcon-emphasis-color);
}
.trade-card .price-num small {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--falcon-secondary-color);
}

/* === Ribbon — 모두 trade-accent 단색 통일 === */
.ribbon-primary,
.ribbon-success,
.ribbon-warning,
.ribbon-danger,
.ribbon-info,
.ribbon-pink,
.ribbon-onyx {
    background: var(--trade-accent);
    color: #fff;
}

/* === Icon tile — accent soft tint === */
.icon-tile {
    color: var(--trade-accent-text);
    background: var(--trade-accent-soft);
}
.tile-primary,
.tile-success,
.tile-warning,
.tile-danger,
.tile-info,
.tile-pink,
.tile-onyx {
    background: var(--trade-accent-soft);
    color: var(--trade-accent-text);
}

.deco-bar {
    display: inline-block;
    height: 4px;
    border-radius: 2px;
    background: var(--trade-accent-soft);
}

/* === Category Tree (사이드바) === */
.cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.65rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.83rem;
    color: var(--falcon-body-color);
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.cat-item:hover {
    background: var(--trade-accent-soft);
    color: var(--trade-accent-text);
}
.cat-item.active {
    background: var(--trade-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}
.cat-item.active .cat-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.cat-count {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--falcon-bg-200, #f1f5f9);
    color: var(--falcon-secondary-color);
}

/* === Filter chips === */
.filter-chip {
    border: 1px solid var(--falcon-border-color);
    background: transparent;
    color: var(--falcon-body-color);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.filter-chip:hover {
    border-color: var(--trade-accent);
    color: var(--trade-accent-text);
}
.filter-chip.active {
    background: var(--trade-accent);
    border-color: var(--trade-accent);
    color: #fff;
}
.filter-chip.active-warning {
    background: var(--falcon-warning);
    border-color: var(--falcon-warning);
    color: var(--falcon-dark);
}
.filter-chip.active-danger {
    background: var(--falcon-danger);
    border-color: var(--falcon-danger);
    color: #fff;
}

/* === Trade Promo (배너) === */
.trade-promo {
    border-radius: 0.85rem;
    overflow: hidden;
    position: relative;
    color: #fff;
    min-height: 160px;
    display: flex;
    align-items: center;
    padding: 1.5rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.trade-promo:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.trade-promo .promo-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.95);
    color: var(--falcon-emphasis-color);
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.7rem;
}

/* === Trade Row (거래 내역 / 목록 행) === */
.trade-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--falcon-border-color);
    transition: background 0.15s ease;
}
.trade-row:last-child { border-bottom: none; }
.trade-row:hover { background: var(--trade-accent-soft); }
.trade-row .row-thumb {
    width: 44px;
    height: 44px;
    border-radius: 0.55rem;
    background: var(--trade-accent-soft);
    color: var(--trade-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.trade-row .row-title {
    font-weight: 700;
    color: var(--falcon-emphasis-color);
    font-size: 0.88rem;
    line-height: 1.3;
}
.trade-row .row-meta {
    font-size: 0.72rem;
    color: var(--falcon-secondary-color);
}

/* === Status pills === */
.status-pill {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-paid     { background: #d1fae5; color: #065f46; }
.status-pending  { background: #fef3c7; color: #92400e; }
.status-failed   { background: #fee2e2; color: #991b1b; }
.status-shipped  { background: #dbeafe; color: #1e40af; }
.status-draft    { background: #e2e8f0; color: #475569; }
.status-active   { background: #dcfce7; color: #166534; }
.status-paused   { background: #fed7aa; color: #9a3412; }

/* === Trade Section Header === */
.trade-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--falcon-border-color);
}
.trade-section-header h5 {
    margin: 0;
    color: var(--falcon-emphasis-color);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.trade-section-header .section-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--trade-accent-text);
    margin-bottom: 0.2rem;
}

/* === Empty state === */
.trade-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--falcon-secondary-color);
}
.trade-empty .empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--falcon-bg-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.7rem;
    color: var(--falcon-secondary-color);
}

/* === 다크 모드 Hero/Card 명시 보정 === */
[data-bs-theme="dark"] .trade-hero {
    background: var(--falcon-card-bg);
    border-color: var(--falcon-border-color);
}
[data-bs-theme="dark"] .trade-hero .hero-icon {
    background: rgba(100, 116, 139, 0.18);
    border-color: rgba(100, 116, 139, 0.25);
    color: #94a3b8;
}
[data-bs-theme="dark"] .trade-hero .hero-action-pill {
    background: var(--falcon-bg-100);
    border-color: var(--falcon-border-color);
    color: var(--falcon-body-color);
}
[data-bs-theme="dark"] .trade-hero .hero-pill {
    background: rgba(100, 116, 139, 0.22);
    color: #cbd5e1;
}

/* 다크 모드: KPI 카드 ribbon 추가 톤다운 */
[data-bs-theme="dark"] .ribbon-primary,
[data-bs-theme="dark"] .ribbon-success,
[data-bs-theme="dark"] .ribbon-warning,
[data-bs-theme="dark"] .ribbon-danger,
[data-bs-theme="dark"] .ribbon-info,
[data-bs-theme="dark"] .ribbon-pink,
[data-bs-theme="dark"] .ribbon-onyx {
    background: rgba(100, 116, 139, 0.4);
    color: #cbd5e1;
}

/* === Toolbar Button (Auto/Clear 등) — 좌측 네비 색 자동 추적 === */
.toolbar-btn,
.toolbar-btn.btn {
    background: transparent;
    border: 1px solid var(--trade-accent);
    color: var(--trade-accent-text);
    transition: all 0.15s ease;
}
.toolbar-btn:hover,
.toolbar-btn.btn:hover {
    background: var(--trade-accent);
    border-color: var(--trade-accent);
    color: #fff;
}
.toolbar-btn.active,
.toolbar-btn.btn.active,
.btn-check:checked + .toolbar-btn,
.btn-check:checked + .toolbar-btn.btn {
    background: var(--trade-accent) !important;
    border-color: var(--trade-accent) !important;
    color: #fff !important;
}
.toolbar-btn:focus,
.toolbar-btn.btn:focus,
.toolbar-btn:focus-visible,
.btn-check:focus + .toolbar-btn {
    box-shadow: 0 0 0 0.2rem var(--trade-accent-soft);
    outline: none;
}
[data-bs-theme="dark"] .toolbar-btn,
[data-bs-theme="dark"] .toolbar-btn.btn {
    color: var(--trade-accent-text);
}
[data-bs-theme="dark"] .toolbar-btn:hover,
[data-bs-theme="dark"] .toolbar-btn.active,
[data-bs-theme="dark"] .btn-check:checked + .toolbar-btn {
    color: #f1f5f9 !important;
}

/* === Log Stream — 카드 톤과 일관성 (모노스페이스만 보존) === */
#logOutput {
    background: var(--falcon-card-bg) !important;
    color: var(--falcon-body-color);
    border: 1px solid var(--falcon-border-color) !important;
    border-radius: 0.55rem !important;
    font-family: 'SFMono-Regular', 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

/* 헤더 바 — 카드 헤더 톤과 일치 */
#logOutput .log-header {
    background-color: var(--falcon-bg-100, #f8fafc) !important;
    color: var(--falcon-secondary-color) !important;
    border-bottom: 1px solid var(--falcon-border-color) !important;
}

/* 줄무늬 옅게 */
#logOutput .log-entry {
    border-bottom: 1px solid var(--falcon-border-color) !important;
}
#logOutput .log-entry:nth-child(even) {
    background: rgba(128, 128, 128, 0.025) !important;
}
#logOutput .log-entry:hover {
    background: var(--trade-accent-soft) !important;
}

/* 컬럼별 색 — 테마 토큰 사용 */
#logOutput .log-entry .log-ts  { color: var(--falcon-tertiary-color) !important; }
#logOutput .log-entry .log-src { color: var(--falcon-secondary-color) !important; }
#logOutput .log-entry .log-msg { color: var(--falcon-emphasis-color) !important; }
#logOutput .log-entry .log-msg mark {
    background: var(--falcon-warning);
    color: var(--falcon-dark);
    padding: 0 3px;
    border-radius: 2px;
}

/* 좌측 레벨 보더 — 의미 색 (WRN/ERR) + 트레이드 액센트 (INF) */
#logOutput .log-entry.level-info {
    border-left-color: var(--trade-accent) !important;
}
#logOutput .log-entry.level-debug {
    border-left-color: rgba(128, 128, 128, 0.2) !important;
}
#logOutput .log-entry.level-warning {
    border-left-color: var(--falcon-warning) !important;
    background: rgba(245, 158, 11, 0.04) !important;
}
#logOutput .log-entry.level-error {
    border-left-color: var(--falcon-danger) !important;
    background: rgba(239, 68, 68, 0.05) !important;
}
#logOutput .log-entry.level-fatal {
    border-left-color: #b91c1c !important;
    background: rgba(239, 68, 68, 0.09) !important;
}

/* 카테고리 배지 — 트레이드 액센트 통일 */
#logOutput .log-entry .log-cat {
    background-color: var(--trade-accent-soft) !important;
    color: var(--trade-accent-text) !important;
    border: none !important;
}

/* 레벨 배지: INF 만 trade-accent, DBG 회색, WRN/ERR 의미 유지 */
#logOutput .log-entry .log-level.badge-subtle-info,
#logOutput .log-entry .log-level.badge-subtle-primary {
    background-color: var(--trade-accent-soft) !important;
    color: var(--trade-accent-text) !important;
}
#logOutput .log-entry .log-level.badge-subtle-secondary {
    background-color: rgba(128, 128, 128, 0.12) !important;
    color: var(--falcon-secondary-color) !important;
}

/* 빈 상태 */
#logOutput #logEmpty {
    color: var(--falcon-secondary-color) !important;
    background: transparent;
}

/* 다크 모드 줄무늬 보정 */
[data-bs-theme="dark"] #logOutput .log-entry:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}
[data-bs-theme="dark"] #logOutput .log-header {
    background-color: var(--falcon-card-bg) !important;
}

/* === 다크 모드 보정 === */
[data-bs-theme="dark"] .trade-card { background: var(--falcon-card-bg); }
[data-bs-theme="dark"] .trade-row:hover { background: var(--trade-accent-soft); }
[data-bs-theme="dark"] .cat-item:hover { background: var(--trade-accent-soft); }
[data-bs-theme="dark"] .status-paid    { background: rgba(16,185,129,0.18); color: #34d399; }
[data-bs-theme="dark"] .status-pending { background: rgba(245,158,11,0.18); color: #fbbf24; }
[data-bs-theme="dark"] .status-failed  { background: rgba(239,68,68,0.18); color: #f87171; }
[data-bs-theme="dark"] .status-shipped { background: rgba(59,130,246,0.18); color: #60a5fa; }
[data-bs-theme="dark"] .status-draft   { background: rgba(100,116,139,0.18); color: #94a3b8; }
[data-bs-theme="dark"] .status-active  { background: rgba(34,197,94,0.18); color: #4ade80; }
[data-bs-theme="dark"] .status-paused  { background: rgba(249,115,22,0.18); color: #fb923c; }

/* ==========================================================
   레거시 보존 섹션 — Animations / Pulse Dots / Deploy Log /
   Log Viewer / Ticker Row / Password Toggle / Toast / etc
   (구 site-trendy.css §11~§39)
   ========================================================== */

/* ── 11. Animations ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── 12. Pulse / Connection Dots ── */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.pulse-dot.connected {
    background: var(--falcon-success);
    box-shadow: 0 0 0 0 rgba(var(--falcon-success-rgb), 0.4);
    animation: pulse 2s infinite;
}

.pulse-dot.disconnected {
    background: var(--falcon-danger);
}

.pulse-dot.reconnecting {
    background: var(--falcon-warning);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--falcon-success-rgb), 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(var(--falcon-success-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--falcon-success-rgb), 0); }
}

/* ── 13. Deploy Log (Publish page) — 카드 톤과 일관성, 모노스페이스만 보존 ── */
.deploy-terminal {
    background: var(--falcon-bg-100, rgba(148, 163, 184, 0.06));
    color: var(--falcon-emphasis-color);
    border-radius: var(--trendy-radius-md);
    border: 1px solid var(--falcon-border-color);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8rem;
    line-height: 1.55;
    overflow-y: auto;
    max-height: 400px;
    padding: 0.85rem 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: thin;
}

.deploy-terminal::-webkit-scrollbar { width: 6px; }
.deploy-terminal::-webkit-scrollbar-thumb {
    background: var(--falcon-border-color);
    border-radius: 3px;
}
.deploy-terminal::-webkit-scrollbar-thumb:hover {
    background: var(--falcon-secondary-color);
}

/* ── 14. Log Viewer ── */
.log-header {
    display: grid;
    grid-template-columns: 88px 46px 84px 156px 1fr;
    gap: 0 10px;
    font-family: 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--falcon-tertiary-color);
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(128,128,128,0.2);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--trendy-surface-2);
    align-items: center;
}
.log-entry {
    display: grid;
    grid-template-columns: 88px 46px 84px 156px 1fr;
    gap: 0 10px;
    align-items: center;
    font-family: 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    border-left: 4px solid transparent;
    border-bottom: 1px solid rgba(128,128,128,0.08);
    padding: 0.55rem 1rem;
    transition: background 0.12s ease, border-left-color 0.12s ease;
}
.log-entry:nth-child(even) { background: rgba(128,128,128,0.035); }
.log-entry:hover {
    background: rgba(var(--falcon-primary-rgb), 0.08);
}
.log-entry.level-error {
    border-left-color: var(--falcon-danger);
    background: rgba(var(--falcon-danger-rgb), 0.06);
}
.log-entry.level-error:hover { background: rgba(var(--falcon-danger-rgb), 0.10); }
.log-entry.level-fatal {
    border-left-color: #7f1d1d;
    background: rgba(var(--falcon-danger-rgb), 0.10);
}
.log-entry.level-warning {
    border-left-color: var(--falcon-warning);
    background: rgba(var(--falcon-warning-rgb), 0.05);
}
.log-entry.level-warning:hover { background: rgba(var(--falcon-warning-rgb), 0.10); }
.log-entry.level-info { border-left-color: var(--falcon-info); }
.log-entry.level-debug { border-left-color: rgba(128,128,128,0.25); }

/* 라인 번호 컬럼 숨김 (공간 회수) */
.log-entry .log-num,
.log-header > span:first-child {
    display: none;
}

/* 타임스탬프 */
.log-entry .log-ts {
    color: var(--falcon-tertiary-color);
    font-size: 0.7rem;
    letter-spacing: 0;
    white-space: nowrap;
}

/* 레벨/카테고리 배지 — JS 의 inline style 을 덮어쓴다 */
.log-entry .log-level,
.log-entry .log-cat {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 5px !important;
    text-align: center;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 소스 컨텍스트 */
.log-entry .log-src {
    color: var(--falcon-secondary-color);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 메시지 — 최대 폭 확보 + 긴 텍스트 줄바꿈 */
.log-entry .log-msg {
    color: var(--falcon-emphasis-color);
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.log-entry .log-msg mark {
    background: var(--falcon-warning);
    color: var(--falcon-dark);
    padding: 0 3px;
    border-radius: 3px;
}

/* ── 15. Ticker / Row Items ── */
.ticker-row {
    border-radius: var(--trendy-radius-sm);
    transition: var(--trendy-transition);
    border: 1px solid transparent;
}

.ticker-row:hover {
    background: rgba(var(--falcon-primary-rgb), 0.03);
    border-color: rgba(var(--falcon-primary-rgb), 0.08);
}

/* ── 16. Password Toggle ── */
.pwd-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--falcon-tertiary-color);
    z-index: 5;
    transition: color 0.15s;
}

.pwd-toggle:hover { color: var(--falcon-primary); }

/* ── 19. Toast Upgrade ── */
.toast {
    border-radius: var(--trendy-radius-md) !important;
    backdrop-filter: blur(20px);
    border: var(--trendy-border) !important;
    box-shadow: var(--trendy-shadow-elevated) !important;
}

.toast .toast-header {
    border-radius: var(--trendy-radius-md) var(--trendy-radius-md) 0 0 !important;
}

/* ── 20. Card Header Icon Pattern ── */
.card-header .icon-item {
    transition: var(--trendy-transition);
}

.card:hover .card-header .icon-item {
    transform: scale(1.05);
}

/* ── 34. Seed/Progress Bar ── */
.seed-bar-track {
    height: 6px; border-radius: 3px;
    background: rgba(128,128,128,0.1);
    overflow: hidden; margin-top: 0.5rem;
}
.seed-bar-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--falcon-primary), var(--falcon-info));
    transition: width 1.5s cubic-bezier(0.4,0,0.2,1);
}

/* ── 36. Non-Falcon 테마 상단 통일 ──
   Falcon 이외의 테마에서:
   (a) 사이드바 상단 로고 영역이 본체와 다른 배경으로 "흰색 섬" 처럼 보이는 현상,
   (b) 탑 네비의 Falcon 기본 흰색/반투명 배경이 본문 배경과 불일치하는 현상을
   한꺼번에 해결한다. Falcon 은 기본 스타일 유지.
   사용자 지시(2026-04-12): "팔콘은 상단이 본문 배경색이 이어져있어 자연스러운데
   다른 테마들은 배경색상이 달라서 보더도 보이고 이상해". */

/* 사이드바 내부 자식 요소(로고 링크, 햄버거, 메뉴 본체, 스크롤 컨테이너)의
   배경을 부모로부터 상속 — 각 테마 CSS 가 `.d-flex` 에 body 색을 직접 지정하므로
   `.d-flex`/`.d-flex.align-items-center` 자체는 여기 포함하지 않는다.
   (포함하면 :not() 특수성 가산으로 테마 CSS 를 이기는 문제 발생.) */
html[data-theme]:not([data-theme="falcon"]) .navbar-vertical .navbar-brand,
html[data-theme]:not([data-theme="falcon"]) .navbar-vertical .collapse.navbar-collapse,
html[data-theme]:not([data-theme="falcon"]) .navbar-vertical .navbar-vertical-content,
html[data-theme]:not([data-theme="falcon"]) .navbar-vertical .toggle-icon-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 탑 네비의 시각적 구분선(border/shadow) 만 해제한다.
   배경은 각 테마 CSS 파일에서 body 와 동일한 gradient/solid 로 개별 지정한다
   (transparent 로 두면 본문이 비쳐 겹침 현상 발생). */
html[data-theme]:not([data-theme="falcon"]) .navbar-top,
html[data-theme]:not([data-theme="falcon"]) .navbar.navbar-top,
html[data-theme]:not([data-theme="falcon"]) .navbar-glass.navbar-top {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Falcon 에서 오는 하단 divider/border 잔재 제거 */
html[data-theme]:not([data-theme="falcon"]) .navbar-vertical::before,
html[data-theme]:not([data-theme="falcon"]) .navbar-vertical::after,
html[data-theme]:not([data-theme="falcon"]) .navbar-top::before,
html[data-theme]:not([data-theme="falcon"]) .navbar-top::after {
    display: none !important;
}

/* ── 37. AJAX 네비게이션 로딩 피드백 ──
   UpdateContent() 가 사이드바 클릭으로 호출될 때 사용자가 느끼는
   "화면이 걸린 듯한" 공백을 해결한다. 상단 progress bar + 본문 fade. */
#ama-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--falcon-primary), var(--falcon-info));
    box-shadow: 0 0 10px rgba(var(--falcon-primary-rgb), 0.55),
                0 0 4px rgba(var(--falcon-primary-rgb), 0.8);
    z-index: 10000;
    opacity: 0;
    transition: width 0.3s ease-out, opacity 0.3s ease-out;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
}
#ama-progress-bar.is-active { opacity: 1; }
#ama-progress-bar.is-done  { opacity: 0; }

#contentBody.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
#contentBody {
    transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    #ama-progress-bar { transition: opacity 0.2s ease; }
    #contentBody,
    #contentBody.is-loading { transition: none; }
}

/* 페이지 로더 — UpdateContent 진입 즉시 본문을 이것으로 교체 */
.ama-page-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    gap: 1.1rem;
    padding: 3rem 1rem;
    animation: ama-fade-in 0.25s ease-out both;
}
.ama-page-loader-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(var(--falcon-primary-rgb), 0.15);
    border-top-color: var(--falcon-primary);
    border-right-color: var(--falcon-info);
    border-radius: 50%;
    animation: ama-spin 0.85s linear infinite;
    box-shadow: 0 0 20px rgba(var(--falcon-primary-rgb), 0.15);
}
.ama-page-loader-text {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--falcon-tertiary-color);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ama-page-loader-sub {
    font-size: 0.72rem;
    color: var(--falcon-tertiary-color);
    opacity: 0.7;
}

/* 페이지 에러 플레이스홀더 */
.ama-page-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
}
.ama-page-error-icon {
    font-size: 2.5rem;
    color: var(--falcon-danger);
    opacity: 0.7;
}
.ama-page-error-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--falcon-emphasis-color);
}
.ama-page-error-msg {
    font-size: 0.78rem;
    color: var(--falcon-tertiary-color);
    max-width: 480px;
}

@keyframes ama-spin {
    to { transform: rotate(360deg); }
}
@keyframes ama-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ama-page-loader-spinner { animation-duration: 1.6s; }
    .ama-page-loader { animation: none; }
}

/* ── 38. 백테스트 히스토리 (DataTable 기반) ──
   localStorage 에 저장된 실행 히스토리를 DataTable ViewComponent 로
   시간순 테이블 렌더한다. 셀 내부 chip 과 신규 row 강조만 정의. */
#BtHistoryTable .bt-hc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.62rem;
    padding: 0.14rem 0.45rem;
    background: rgba(148, 163, 184, 0.14);
    color: var(--falcon-secondary-color);
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    line-height: 1.3;
}
#BtHistoryTable .bt-hc-chip b {
    color: var(--falcon-emphasis-color);
    font-weight: 700;
}

#BtHistoryTable tbody tr.bt-history-row-latest {
    background: rgba(var(--falcon-primary-rgb), 0.08) !important;
    box-shadow: inset 3px 0 0 var(--falcon-primary);
    animation: bt-history-pulse 2s ease-out 1;
}
@keyframes bt-history-pulse {
    0%   { background: rgba(var(--falcon-primary-rgb), 0.18); }
    100% { background: rgba(var(--falcon-primary-rgb), 0.08); }
}

#BtHistoryTable tbody td {
    vertical-align: middle;
}

#btHistoryTableWrapper .dataTables_wrapper {
    min-height: 0;
}
#btHistoryTableWrapper .dataTables_scrollBody,
#btHistoryTableWrapper .dataTables_wrapper {
    max-height: 380px !important;
}
#btHistoryTableWrapper table.dataTable td,
#btHistoryTableWrapper table.dataTable th {
    padding: 8px 10px;
}

@media (prefers-reduced-motion: reduce) {
    #BtHistoryTable tbody tr.bt-history-row-latest { animation: none; }
}

/* ── 39. 파라미터 자동 최적화 ── */
#btOptModal .opt-param-group {
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: var(--trendy-surface-2, rgba(148, 163, 184, 0.06));
    border: 1px solid rgba(128, 128, 128, 0.14);
    transition: opacity 0.2s ease, background 0.2s ease;
}
#btOptModal .opt-param-group.disabled {
    opacity: 0.42;
}
#btOptModal .opt-param-group.disabled .opt-min,
#btOptModal .opt-param-group.disabled .opt-max,
#btOptModal .opt-param-group.disabled .opt-step,
#btOptModal .opt-param-group.disabled .opt-chip {
    pointer-events: none;
}
#btOptModal .opt-param-group .form-check-label {
    cursor: pointer;
}
#btOptModal .opt-combo-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.5rem;
    background: rgba(44, 123, 229, 0.14);
    color: #2c7be5;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
#btOptModal .opt-preview {
    padding: 0.35rem 0.55rem;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    word-break: keep-all;
}
#btOptModal .opt-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--falcon-secondary-color);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#btOptModal .opt-chip:hover {
    background: rgba(44, 123, 229, 0.14);
    color: #2c7be5;
}
#btOptModal .opt-chip.active {
    background: rgba(44, 123, 229, 0.22);
    color: #2c7be5;
    border-color: rgba(44, 123, 229, 0.4);
}

#btOptModal .opt-summary-card {
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(44, 123, 229, 0.08), rgba(44, 123, 229, 0.03));
    border: 1px solid rgba(44, 123, 229, 0.18);
}
#btOptModal .opt-combo-total {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--falcon-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
#btOptModal .opt-combo-total.warn { color: #eab308; }
#btOptModal .opt-combo-total.err { color: #ef4444; }

#btOptModal .opt-progress-wrap {
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(128, 128, 128, 0.12);
}

/* 결과 테이블 */
#BtOptimizeTable .opt-rank-1 { color: #d4a017; font-weight: 900; }
#BtOptimizeTable .opt-rank-2 { color: #868e96; font-weight: 900; }
#BtOptimizeTable .opt-rank-3 { color: #c77d24; font-weight: 900; }
#BtOptimizeTable .opt-phase-coarse {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    background: rgba(148, 163, 184, 0.16);
    color: #475569;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
#BtOptimizeTable .opt-phase-fine {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    background: rgba(44, 123, 229, 0.18);
    color: #2c7be5;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
#btOptTableWrapper table.dataTable td,
#btOptTableWrapper table.dataTable th {
    padding: 7px 9px;
    vertical-align: middle;
}
#btOptTableWrapper .dataTables_scrollBody,
#btOptTableWrapper .dataTables_wrapper {
    max-height: 520px !important;
}

[data-bs-theme="dark"] #btOptModal .opt-combo-badge {
    background: rgba(44, 123, 229, 0.22);
    color: #9ec5fe;
}
[data-bs-theme="dark"] #btOptModal .opt-chip {
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
}
[data-bs-theme="dark"] #btOptModal .opt-chip.active {
    background: rgba(44, 123, 229, 0.3);
    color: #9ec5fe;
    border-color: rgba(44, 123, 229, 0.55);
}
[data-bs-theme="dark"] #BtOptimizeTable .opt-phase-coarse {
    background: rgba(148, 163, 184, 0.22); color: #cbd5e1;
}
[data-bs-theme="dark"] #BtOptimizeTable .opt-phase-fine {
    background: rgba(44, 123, 229, 0.28); color: #9ec5fe;
}

/* ── 39-2. 최적화 모달 v2 — 프리셋 + 그룹 + 3-mode 토글 ── */

/* 상단 안내 배너 */
#btOptModal .opt-hero {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.95rem;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--falcon-secondary-color);
}
[data-bs-theme="dark"] #btOptModal .opt-hero {
    background: rgba(245, 158, 11, 0.14);
    color: #fde68a;
}

/* 프리셋 4-버튼 */
#btOptModal .opt-preset-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
}
@media (max-width: 768px) {
    #btOptModal .opt-preset-row { grid-template-columns: repeat(2, 1fr); }
}
#btOptModal .opt-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.5rem;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.08);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 96px;
    text-align: center;
}
#btOptModal .opt-preset-btn:hover {
    background: rgba(44, 123, 229, 0.08);
    transform: translateY(-1px);
}
#btOptModal .opt-preset-btn.active {
    background: rgba(44, 123, 229, 0.14);
    border-color: rgba(44, 123, 229, 0.5);
    box-shadow: 0 2px 12px rgba(44, 123, 229, 0.18);
}
#btOptModal .opt-preset-icon {
    font-size: 1.55rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}
#btOptModal .opt-preset-title {
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--falcon-emphasis-color);
    margin-bottom: 0.12rem;
}
#btOptModal .opt-preset-badge {
    display: inline-block;
    font-size: 0.55rem;
    padding: 1px 5px;
    background: #f59e0b;
    color: #fff;
    border-radius: 4px;
    vertical-align: middle;
    font-weight: 800;
    margin-left: 2px;
}
#btOptModal .opt-preset-desc {
    font-size: 0.62rem;
    color: var(--falcon-tertiary-color);
    line-height: 1.2;
}
[data-bs-theme="dark"] #btOptModal .opt-preset-btn {
    background: rgba(148, 163, 184, 0.12);
}
[data-bs-theme="dark"] #btOptModal .opt-preset-btn.active {
    background: rgba(44, 123, 229, 0.22);
    border-color: rgba(96, 165, 250, 0.6);
}

/* 카테고리 그룹 */
#btOptModal .opt-category {
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(128, 128, 128, 0.13);
    border-radius: 12px;
    overflow: hidden;
}
#btOptModal .opt-category-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.95rem;
    background: rgba(44, 123, 229, 0.06);
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}
#btOptModal .opt-category-header i { font-size: 0.85rem; }
#btOptModal .opt-category-title {
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--falcon-emphasis-color);
    letter-spacing: 0.01em;
}
#btOptModal .opt-category-desc {
    font-size: 0.66rem;
    color: var(--falcon-tertiary-color);
    margin-left: auto;
}
#btOptModal .opt-category-body {
    padding: 0.75rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
[data-bs-theme="dark"] #btOptModal .opt-category {
    background: rgba(148, 163, 184, 0.05);
    border-color: rgba(128, 128, 128, 0.18);
}
[data-bs-theme="dark"] #btOptModal .opt-category-header {
    background: rgba(44, 123, 229, 0.12);
}

/* 파라미터 카드 */
#btOptModal .opt-param {
    padding: 0.7rem 0.85rem;
    background: var(--falcon-card-bg, #fff);
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#btOptModal .opt-param.is-active {
    border-color: rgba(44, 123, 229, 0.38);
    box-shadow: 0 1px 8px rgba(44, 123, 229, 0.1);
}
[data-bs-theme="dark"] #btOptModal .opt-param {
    background: #1e293b;
    border-color: rgba(128, 128, 128, 0.22);
}
[data-bs-theme="dark"] #btOptModal .opt-param.is-active {
    border-color: rgba(96, 165, 250, 0.55);
}

#btOptModal .opt-param-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.55rem;
}
#btOptModal .opt-param-title {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--falcon-emphasis-color);
    line-height: 1.3;
}
#btOptModal .opt-param-desc {
    display: block;
    font-weight: 400;
    font-size: 0.66rem;
    color: var(--falcon-tertiary-color);
    margin-top: 2px;
}
#btOptModal .opt-param-current {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(34, 197, 94, 0.14);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #15803d;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
#btOptModal .opt-param-current-label {
    opacity: 0.75;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[data-bs-theme="dark"] #btOptModal .opt-param-current {
    background: rgba(34, 197, 94, 0.22);
    color: #86efac;
}

/* 3-mode 토글 */
#btOptModal .opt-mode-toggle {
    display: inline-flex;
    gap: 0;
    padding: 3px;
    background: rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    margin-bottom: 0.55rem;
}
#btOptModal .opt-mode-btn {
    padding: 0.3rem 0.95rem;
    border: 0;
    background: transparent;
    color: var(--falcon-secondary-color);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 56px;
}
#btOptModal .opt-mode-btn:hover {
    color: var(--falcon-emphasis-color);
}
#btOptModal .opt-mode-btn.active {
    background: #ffffff;
    color: #2c7be5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
[data-bs-theme="dark"] #btOptModal .opt-mode-toggle {
    background: rgba(148, 163, 184, 0.2);
}
[data-bs-theme="dark"] #btOptModal .opt-mode-btn.active {
    background: #0f172a;
    color: #60a5fa;
}

/* 값 미리보기 chips */
#btOptModal .opt-preview-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    min-height: 1.3rem;
}
#btOptModal .opt-chip-val {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: rgba(148, 163, 184, 0.16);
    color: var(--falcon-secondary-color);
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
#btOptModal .opt-chip-val.active {
    background: rgba(34, 197, 94, 0.2);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.35);
    font-weight: 800;
}
#btOptModal .opt-chip-val-muted {
    color: var(--falcon-tertiary-color);
    font-size: 0.66rem;
    font-style: italic;
}
#btOptModal .opt-chip-count {
    margin-left: 0.35rem;
    padding: 2px 7px;
    background: rgba(44, 123, 229, 0.16);
    color: #2c7be5;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
}
[data-bs-theme="dark"] #btOptModal .opt-chip-val {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}
[data-bs-theme="dark"] #btOptModal .opt-chip-val.active {
    background: rgba(34, 197, 94, 0.28);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.45);
}
[data-bs-theme="dark"] #btOptModal .opt-chip-count {
    background: rgba(44, 123, 229, 0.26);
    color: #9ec5fe;
}

/* 커스텀 비율 입력 */
#btOptModal .opt-ratios-custom {
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(128, 128, 128, 0.15);
}
#btOptModal .opt-chip-remove {
    cursor: pointer;
    margin-left: 3px;
    opacity: 0.5;
    font-weight: 900;
    font-size: 0.85rem;
    line-height: 1;
    vertical-align: middle;
}
#btOptModal .opt-chip-remove:hover {
    opacity: 1;
    color: #ef4444;
}

/* ==========================================================
   DataTable Modern Styles (병합본 — 구 datatable-modern.css)
   ========================================================== */

/* ============================================
   DataTable Modern Override - Linear/Minimal Style
   ============================================
   기존 dataTables.bootstrap5.css 위에 오버라이드
   Falcon 테마 호환, 라이트/다크 모드 지원
   ============================================ */

/* --- CSS Variables --- */
:root {
    --dt-modern-bg: #ffffff;
    --dt-modern-border: rgba(0, 0, 0, 0.06);
    --dt-modern-header-text: #8b95a2;
    --dt-modern-body-text: #2d3436;
    --dt-modern-body-secondary: #636e72;
    --dt-modern-hover: rgba(0, 0, 0, 0.02);
    --dt-modern-selected: rgba(9, 132, 227, 0.06);
    --dt-modern-selected-accent: #0984e3;
    --dt-modern-radius: 12px;
    --dt-modern-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --dt-modern-row-height: 48px;
    --dt-modern-font-size: 13.5px;
    --dt-modern-header-font-size: 11.5px;
    --dt-modern-cell-px: 16px;
    --dt-modern-pagination-active: #0984e3;
}

[data-bs-theme="dark"] {
    --dt-modern-bg: #0b1727;
    --dt-modern-border: rgba(255, 255, 255, 0.06);
    --dt-modern-header-text: #6e7f96;
    --dt-modern-body-text: #d5dce4;
    --dt-modern-body-secondary: #8a97a8;
    --dt-modern-hover: rgba(255, 255, 255, 0.03);
    --dt-modern-selected: rgba(9, 132, 227, 0.1);
    --dt-modern-selected-accent: #3da5f4;
    --dt-modern-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* =============================================
   1. Card Wrapper - 깔끔한 컨테이너
   ============================================= */

.dt-modern-card {
    background-color: var(--dt-modern-bg);
    border: 1px solid var(--dt-modern-border);
    border-radius: var(--dt-modern-radius);
    box-shadow: var(--dt-modern-shadow);
    overflow: hidden;
}

.dt-modern-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--dt-modern-border);
    padding: 14px 20px;
}

.dt-modern-card .card-header h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--dt-modern-body-text);
    letter-spacing: -0.01em;
}

.dt-modern-card .card-body {
    padding: 0 !important;
}


/* =============================================
   2. Table Header - 투명 + 미니멀
   ============================================= */

.dt-modern-card table.dataTable thead,
.dt-modern-card table.dataTable thead th {
    background: transparent !important;
    border-top: none !important;
}

.dt-modern-card table.dataTable > thead > tr > th,
.dt-modern-card table.dataTable > thead > tr > td {
    font-size: var(--dt-modern-header-font-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dt-modern-header-text);
    border-bottom: 1px solid var(--dt-modern-border) !important;
    padding: 12px var(--dt-modern-cell-px);
    white-space: nowrap;
}


/* =============================================
   3. Table Body - 클린한 행 스타일
   ============================================= */

.dt-modern-card table.dataTable tbody {
    font-size: var(--dt-modern-font-size) !important;
}

.dt-modern-card table.dataTable tbody td {
    padding: 0 var(--dt-modern-cell-px);
    height: var(--dt-modern-row-height);
    vertical-align: middle;
    color: var(--dt-modern-body-text);
    border-bottom: 1px solid var(--dt-modern-border);
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease;
}

/* 마지막 행 보더 제거 */
.dt-modern-card table.dataTable tbody tr:last-child td {
    border-bottom: none;
}

/* 호버 효과 - 은은하게 */
.dt-modern-card table.dataTable tbody tr:hover > td {
    background-color: var(--dt-modern-hover) !important;
}

/* 스트라이프 비활성 (모던 스타일에서는 기본 off) */
.dt-modern-card table.dataTable.table-striped tbody tr:nth-of-type(odd) > td {
    background-color: transparent;
}

.dt-modern-card table.dataTable.table-striped tbody tr:nth-of-type(odd):hover > td {
    background-color: var(--dt-modern-hover) !important;
}


/* =============================================
   4. Row Selection - 좌측 악센트 바
   ============================================= */

.dt-modern-card table.dataTable tbody tr.selected > td {
    background-color: var(--dt-modern-selected) !important;
    color: var(--dt-modern-body-text) !important;
    box-shadow: none !important;
}

.dt-modern-card table.dataTable tbody tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--dt-modern-selected-accent) !important;
}

.dt-modern-card table.dataTable tbody tr.selected:hover > td {
    background-color: var(--dt-modern-selected) !important;
}


/* =============================================
   5. Sorting Icons - 미니멀 chevron
   ============================================= */

.dt-modern-card table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
.dt-modern-card table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after,
.dt-modern-card table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
.dt-modern-card table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after {
    opacity: 0 !important;
}

.dt-modern-card table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
.dt-modern-card table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
    content: "↑" !important;
    opacity: 0.5 !important;
    font-size: 0.7em;
}

.dt-modern-card table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
.dt-modern-card table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    content: "↓" !important;
    opacity: 0.5 !important;
    font-size: 0.7em;
}

/* 호버 시 정렬 가능 표시 outline 제거 */
.dt-modern-card table.dataTable thead > tr > th.dt-orderable-asc:hover,
.dt-modern-card table.dataTable thead > tr > th.dt-orderable-desc:hover,
.dt-modern-card table.dataTable thead > tr > td.dt-orderable-asc:hover,
.dt-modern-card table.dataTable thead > tr > td.dt-orderable-desc:hover {
    outline: none !important;
    color: var(--dt-modern-body-text);
}


/* =============================================
   6. Pagination - 미니멀 pill 스타일
   ============================================= */

.dt-modern-card .dataTables_wrapper .dataTables_paginate {
    padding: 12px 16px;
    border-top: 1px solid var(--dt-modern-border);
}

.dt-modern-card .dataTables_wrapper .dataTables_paginate .paginate_button,
.dt-modern-card .dataTables_wrapper .dataTables_paginate .page-link {
    border: none !important;
    background: transparent !important;
    color: var(--dt-modern-body-secondary) !important;
    font-size: 12.5px;
    font-weight: 500;
    padding: 4px 10px !important;
    margin: 0 1px;
    border-radius: 6px !important;
    min-width: 28px;
    text-align: center;
    transition: all 0.15s ease;
}

.dt-modern-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dt-modern-card .dataTables_wrapper .dataTables_paginate .page-link:hover {
    background-color: var(--dt-modern-hover) !important;
    color: var(--dt-modern-body-text) !important;
}

.dt-modern-card .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dt-modern-card .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--dt-modern-pagination-active) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: none !important;
}

.dt-modern-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dt-modern-card .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    opacity: 0.3 !important;
    cursor: default;
}

/* page-item 보더 제거 */
.dt-modern-card .dataTables_wrapper .pagination .page-item .page-link {
    border: none !important;
    box-shadow: none !important;
}


/* =============================================
   7. Info & Length - 하단 영역
   ============================================= */

.dt-modern-card .dataTables_wrapper .dataTables_info {
    font-size: 12px;
    color: var(--dt-modern-body-secondary);
    padding: 12px 16px;
}

.dt-modern-card .dataTables_wrapper .dataTables_length {
    padding: 8px 16px;
}

.dt-modern-card .dataTables_wrapper .dataTables_length label {
    font-size: 12px;
    color: var(--dt-modern-body-secondary);
    font-weight: 500;
}

.dt-modern-card .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--dt-modern-border);
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 8px;
    background-color: transparent;
    color: var(--dt-modern-body-text);
}


/* =============================================
   8. Search Input - 모던 인풋
   ============================================= */

.dt-modern-card .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--dt-modern-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    background-color: transparent;
    color: var(--dt-modern-body-text);
    transition: border-color 0.2s ease;
}

.dt-modern-card .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--dt-modern-selected-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(9, 132, 227, 0.1);
}


/* =============================================
   9. Buttons - Ghost 스타일
   ============================================= */

.dt-modern-card .dataTables_wrapper .dt-buttons .dt-button,
.dt-modern-card .dataTables_wrapper .dt-buttons .btn {
    background: transparent !important;
    border: 1px solid var(--dt-modern-border) !important;
    border-radius: 8px !important;
    color: var(--dt-modern-body-secondary) !important;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px !important;
    transition: all 0.15s ease;
}

.dt-modern-card .dataTables_wrapper .dt-buttons .dt-button:hover,
.dt-modern-card .dataTables_wrapper .dt-buttons .btn:hover {
    background-color: var(--dt-modern-hover) !important;
    color: var(--dt-modern-body-text) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="dark"] .dt-modern-card .dataTables_wrapper .dt-buttons .dt-button:hover,
[data-bs-theme="dark"] .dt-modern-card .dataTables_wrapper .dt-buttons .btn:hover {
    border-color: rgba(255, 255, 255, 0.1) !important;
}


/* =============================================
   10. Scrollbar - 모던 슬림
   ============================================= */

.dt-modern-card .dt-scroll-body::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.dt-modern-card .dt-scroll-body::-webkit-scrollbar-track {
    background: transparent;
}

.dt-modern-card .dt-scroll-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

[data-bs-theme="dark"] .dt-modern-card .dt-scroll-body::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
}


/* =============================================
   11. Empty State
   ============================================= */

.dt-modern-card table.dataTable td.dataTables_empty {
    color: var(--dt-modern-body-secondary);
    font-size: 13px;
    padding: 40px 0;
    text-align: center;
}


/* =============================================
   12. Processing Indicator
   ============================================= */

.dt-modern-card div.dt-processing {
    background: var(--dt-modern-bg);
    border: 1px solid var(--dt-modern-border);
    border-radius: 8px;
    box-shadow: var(--dt-modern-shadow);
    font-size: 12px;
    color: var(--dt-modern-body-secondary);
}


/* =============================================
   13. Settings Modal Override
   ============================================= */

.dt-modern-modal .modal-content {
    border: 1px solid var(--dt-modern-border);
    border-radius: var(--dt-modern-radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.dt-modern-modal .modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--dt-modern-border);
    padding: 16px 24px;
}

.dt-modern-modal .modal-header .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--dt-modern-body-text);
}

.dt-modern-modal .modal-body {
    padding: 20px 24px;
}

.dt-modern-modal .modal-body label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dt-modern-header-text);
}

.dt-modern-modal .modal-footer {
    background: transparent !important;
    border-top: 1px solid var(--dt-modern-border);
    padding: 12px 24px;
}

.dt-modern-modal .modal-footer .btn-primary {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 20px;
}


/* =============================================
   14. FixedHeader Override
   ============================================= */

.dt-modern-card table.dataTable.fixedHeader-floating thead th,
table.fixedHeader-floating > thead > tr > th {
    background-color: var(--dt-modern-bg) !important;
    border-bottom: 1px solid var(--dt-modern-border) !important;
    font-size: var(--dt-modern-header-font-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dt-modern-header-text);
}


/* =============================================
   15. Responsive Collapsed Row
   ============================================= */

.dt-modern-card table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
.dt-modern-card table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    border-color: var(--dt-modern-body-secondary);
    box-shadow: none;
}

/* ==========================================================
   Backtest 페이지 — DataTable 스크롤 (페이지 ID 한정, 충돌 없음)
   ========================================================== */

#backtestTradesWrapper .dataTables_scrollBody,
#backtestTradesWrapper .dataTables_wrapper {
    max-height: min(70vh, 720px) !important;
    overflow-y: auto !important;
}
#backtestTradesWrapper .dataTables_wrapper .dataTables_paginate {
    padding: 4px 0;
    font-size: 0.75rem;
}
#backtestTradesWrapper table.dataTable {
    font-size: 0.75rem;
}
#backtestTradesWrapper table.dataTable td,
#backtestTradesWrapper table.dataTable th {
    padding: 4px 6px;
    white-space: nowrap;
}

/* ==========================================================
   Trade Generic Utility Classes
   - .trade-progress-row : 다단 작업 진행 행 (펄스 애니메이션 포함)
   - .trade-divider      : 점선 섹션 구분자 (라벨 칩 포함)
   - .trade-hero-gradient: KPI 히어로 wrapper 그라디언트 카드
   ========================================================== */

/* ── 진행 행 (캔들 수집 등 다단 작업의 타임프레임/단계 카드) ── */
.trade-progress-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--trendy-surface-2, rgba(148,163,184,0.08));
    border: 1px solid rgba(128,128,128,0.12);
    border-left-width: 3px;
    border-left-color: transparent;
    font-size: 0.72rem;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.trade-progress-icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(148,163,184,0.15);
    color: var(--falcon-tertiary-color);
    flex-shrink: 0;
    font-size: 0.7rem;
}
.trade-progress-row.is-active {
    background: rgba(44,123,229,0.10);
    border-left-color: var(--falcon-primary, #2c7be5);
}
.trade-progress-row.is-active .trade-progress-icon {
    background: rgba(44,123,229,0.22);
    color: var(--falcon-primary, #2c7be5);
    animation: tradeProgressPulse 1.2s ease-in-out infinite;
}
.trade-progress-row.is-done {
    border-left-color: var(--falcon-success, #22c55e);
    background: rgba(34,197,94,0.07);
}
.trade-progress-row.is-done .trade-progress-icon {
    background: rgba(34,197,94,0.20);
    color: var(--falcon-success, #22c55e);
}
.trade-progress-row.is-failed {
    border-left-color: var(--falcon-danger, #ef4444);
    background: rgba(239,68,68,0.07);
}
.trade-progress-row.is-failed .trade-progress-icon {
    background: rgba(239,68,68,0.20);
    color: var(--falcon-danger, #ef4444);
}
@keyframes tradeProgressPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
    .trade-progress-row.is-active .trade-progress-icon { animation: none; }
}

/* ── 점선 섹션 구분자 (라벨 칩) ── */
.trade-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0 0.1rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.35);
}
.trade-divider-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--falcon-tertiary-color, #6b7280);
    background: rgba(148, 163, 184, 0.12);
    padding: 2px 8px;
    border-radius: 999px;
}
[data-bs-theme="dark"] .trade-divider {
    border-top-color: rgba(148, 163, 184, 0.22);
}

/* ── KPI 히어로 그라디언트 wrapper ── */
.trade-hero-gradient {
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 0.06) 0%,
        rgba(37, 99, 235, 0.015) 60%,
        rgba(34, 197, 94, 0.025) 100%);
    border: 1px solid rgba(37, 99, 235, 0.10);
    border-radius: 14px;
    padding: 14px 14px 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
[data-bs-theme="dark"] .trade-hero-gradient {
    background: linear-gradient(135deg,
        rgba(96, 165, 250, 0.10) 0%,
        rgba(96, 165, 250, 0.02) 60%,
        rgba(74, 222, 128, 0.03) 100%);
    border-color: rgba(96, 165, 250, 0.18);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

/* ==========================================================
   Dashboard 페이지 전용 (구 Dashboard/Index.cshtml inline)
   ========================================================== */

/* Position 행 클릭 (offcanvas 트리거) */
#DashboardOpenPositions tbody tr { cursor: pointer; transition: background 0.15s ease; }
#DashboardOpenPositions tbody tr:hover { background: rgba(var(--falcon-primary-rgb), 0.04); }
#DashboardClosedPositions tbody tr { cursor: pointer; transition: background 0.15s ease; }
#DashboardClosedPositions tbody tr:hover { background: rgba(var(--falcon-success-rgb), 0.04); }

/* Position Offcanvas 25vw (desktop) / 40vw (tablet) / 100vw (mobile) */
#positionOffcanvas {
    width: 25vw !important;
    max-width: 25vw !important;
    min-width: 420px !important;
}
@media (min-width: 768px) and (max-width: 1439.98px) {
    #positionOffcanvas {
        width: 40vw !important;
        max-width: 40vw !important;
        min-width: 380px !important;
    }
}
@media (max-width: 767.98px) {
    #positionOffcanvas {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
    }
}

/* Offcanvas redesign (compact for 25vw) */
.oc-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--falcon-tertiary-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}
.oc-hero {
    background: var(--falcon-bg-100, #f8fafc);
    border: 1px solid var(--falcon-border-color);
    border-radius: 0.7rem;
    padding: 1rem 0.75rem;
    text-align: center;
}
.oc-hero-pnl { font-size: 1.6rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.oc-hero-row {
    display: flex; justify-content: center; align-items: center;
    gap: 0.75rem; margin-top: 0.5rem;
    font-size: 0.72rem; color: var(--falcon-tertiary-color);
    flex-wrap: wrap;
}
.oc-hero-row span { display: flex; align-items: center; gap: 0.3rem; }
.oc-hero-row i { font-size: 0.62rem; opacity: 0.5; }
.oc-price-arrow { color: var(--falcon-tertiary-color); font-size: 0.65rem; opacity: 0.5; }

.oc-metric-list {
    display: flex; flex-direction: column;
    background: var(--falcon-bg-100, #f8fafc);
    border: 1px solid var(--falcon-border-color);
    border-radius: 0.7rem;
    overflow: hidden;
}
.oc-metric-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid rgba(128,128,128,0.08);
    font-size: 0.8rem;
}
.oc-metric-row:last-child { border-bottom: none; }
.oc-metric-row .oc-metric-label {
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--falcon-tertiary-color);
    font-size: 0.72rem;
    font-weight: 500;
}
.oc-metric-row .oc-metric-label i { width: 14px; text-align: center; opacity: 0.55; }
.oc-metric-row .oc-metric-value {
    font-weight: 600; color: var(--falcon-emphasis-color);
    font-size: 0.8rem;
}

.activity-item {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(128,128,128,0.06);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.activity-dot-buy { background: rgba(var(--falcon-success-rgb), 0.1); color: var(--falcon-success); }
.activity-dot-sell { background: rgba(var(--falcon-danger-rgb), 0.1); color: var(--falcon-danger); }

/* ==========================================================
   News 페이지 전용 (구 News/Index.cshtml inline)
   ========================================================== */

.news-page { margin: 0 auto; }

/* Category Tabs */
.news-page .news-tab-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.news-page .news-tab {
    padding: 0.45rem 1.1rem; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600;
    text-decoration: none; transition: all 0.2s ease;
    border: 1px solid transparent;
}
.news-page .news-tab-active {
    background: var(--falcon-primary);
    color: #fff !important;
}
.news-page .news-tab-inactive {
    background: var(--trendy-surface-2);
    color: var(--falcon-secondary-color);
    border-color: rgba(128,128,128,0.12);
}
.news-page .news-tab-inactive:hover {
    background: rgba(var(--falcon-primary-rgb), 0.08);
    color: var(--falcon-primary);
}

/* News Swiper */
.news-swiper { position: relative; padding: 0.5rem 2.5rem 3rem; }
.news-swiper .swiper-slide { height: auto; }

.news-swiper .news-card {
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    height: 100%;
    min-height: 160px;
    padding: 1.1rem 1.15rem;
    background: var(--trendy-surface-1);
    border: var(--trendy-border-subtle);
    border-radius: var(--trendy-radius-md);
    text-decoration: none;
    color: inherit;
    transition: var(--trendy-transition);
    backdrop-filter: blur(var(--trendy-blur-sm));
    position: relative;
    overflow: hidden;
}
.news-swiper .news-card::before {
    content: ''; position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--falcon-primary), var(--falcon-info));
    border-radius: 0 3px 3px 0;
    opacity: 0; transition: opacity 0.25s ease;
}
.news-swiper .news-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--trendy-shadow);
    border-color: rgba(var(--falcon-primary-rgb), 0.18);
    color: inherit;
}
.news-swiper .news-card:hover::before { opacity: 1; }

.news-swiper .news-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--falcon-emphasis-color);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.news-swiper .news-card-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(128,128,128,0.08);
    font-size: 0.7rem;
    color: var(--falcon-tertiary-color);
    white-space: nowrap;
}
.news-swiper .news-card-date { font-weight: 500; }
.news-swiper .news-card-time-ago { color: var(--falcon-primary); font-weight: 600; }

/* Swiper 컨트롤 */
.news-swiper .swiper-button-prev,
.news-swiper .swiper-button-next {
    color: var(--falcon-primary);
    width: 2.2rem; height: 2.2rem;
    background: var(--trendy-surface-2);
    border: var(--trendy-border-subtle);
    border-radius: 50%;
    box-shadow: var(--trendy-shadow-sm);
    transition: var(--trendy-transition);
    top: 45%;
    margin-top: 0;
}
.news-swiper .swiper-button-prev::after,
.news-swiper .swiper-button-next::after {
    font-size: 0.85rem; font-weight: 700;
}
.news-swiper .swiper-button-prev:hover,
.news-swiper .swiper-button-next:hover {
    background: rgba(var(--falcon-primary-rgb), 0.12);
    transform: translateY(-1px);
}
.news-swiper .swiper-button-disabled { opacity: 0.35; pointer-events: none; }

.news-swiper .swiper-pagination { bottom: 0.5rem; }
.news-swiper .swiper-pagination-bullet {
    background: var(--falcon-tertiary-color);
    opacity: 0.4;
}
.news-swiper .swiper-pagination-bullet-active {
    background: var(--falcon-primary);
    opacity: 1;
}

@media (max-width: 575.98px) {
    .news-swiper { padding: 0.5rem 0.5rem 2.5rem; }
    .news-swiper .swiper-button-prev,
    .news-swiper .swiper-button-next { display: none; }
    .news-swiper .news-card { backdrop-filter: none; } /* 모바일 블러 절감 */
}

@media (prefers-reduced-motion: reduce) {
    .news-swiper .news-card { transition: none; }
    .news-swiper .news-card:hover { transform: none; }
}

/* 보조 위젯 섹션 */
.news-page .news-insights-row { margin-top: 0; }

/* 카드 공통 깊이감 */
.news-page .tv-chart-card {
    background: var(--trendy-surface-1);
    border: 1px solid rgba(128,128,128,0.10);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 16px rgba(0,0,0,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
}
.news-page .tv-chart-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--falcon-primary), var(--falcon-info));
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 2;
}
.news-page .tv-chart-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.06),
        0 8px 24px rgba(0,0,0,0.10);
    border-color: rgba(var(--falcon-primary-rgb), 0.22);
}
.news-page .tv-chart-card:hover::before { opacity: 1; }

/* TradingView 2x2 그리드 */
.news-page .tv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.news-page .tv-chart-card {
    display: flex;
    flex-direction: column;
    height: 260px;
    padding: 0;
}
.news-page .tv-chart-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid rgba(128,128,128,0.08);
    background: rgba(var(--falcon-primary-rgb), 0.04);
    flex-shrink: 0;
}
.news-page .tv-chart-icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(var(--falcon-primary-rgb), 0.14);
    color: var(--falcon-primary);
    font-size: 0.72rem;
    flex-shrink: 0;
}
.news-page .tv-chart-label {
    font-size: 0.78rem; font-weight: 700;
    color: var(--falcon-emphasis-color);
    letter-spacing: 0.01em;
}
.news-page .tv-chart-source {
    font-size: 0.62rem;
    color: var(--falcon-tertiary-color);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.news-page .tv-chart-body {
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
}
.news-page .tv-chart-body iframe {
    width: 100%; height: 100%; border: 0; display: block;
}

@media (max-width: 767.98px) {
    .news-page .tv-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .news-page .tv-chart-card { height: 230px; }
}

/* 사이드 패널 */
.news-page .news-side-panel {
    display: flex; flex-direction: column; gap: 0.85rem;
}

/* Fear & Greed 게이지 카드 */
.news-page .fng-card { padding-bottom: 1.1rem; position: relative; }
.news-page .fng-card #fngGauge {
    height: 210px !important;
    position: relative;
    z-index: 1;
}
.news-page .fng-card::after {
    content: '';
    position: absolute;
    top: 3rem; left: 50%;
    transform: translateX(-50%);
    width: 170px; height: 170px;
    background: radial-gradient(circle, rgba(var(--falcon-primary-rgb), 0.18), transparent 70%);
    filter: blur(22px);
    pointer-events: none;
    z-index: 0;
}
.news-page .fng-card > *:not(::after) { position: relative; z-index: 1; }

.news-page .fng-compare {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(128,128,128,0.08);
}
.news-page .fng-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.38rem 0.7rem;
    background: var(--trendy-surface-2);
    border-radius: 999px;
    font-size: 0.62rem;
    transition: background 0.2s ease;
}
.news-page .fng-pill:hover { background: rgba(var(--falcon-primary-rgb), 0.08); }
.news-page .fng-pill-label {
    color: var(--falcon-tertiary-color);
    font-weight: 500;
}
.news-page .fng-pill-value {
    color: var(--falcon-emphasis-color);
    font-weight: 700;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
.news-page .fng-pill.up .fng-pill-value { color: #22c55e; }
.news-page .fng-pill.down .fng-pill-value { color: #ef4444; }

/* 미국장 상태 */
.news-page .mkt-status-card { border-left: 3px solid #94a3b8; }
.news-page .mkt-status-card.is-open {
    border-left-color: #22c55e;
    background: linear-gradient(135deg, rgba(34,197,94,0.04), transparent 60%), var(--trendy-surface-1);
}
.news-page .mkt-status-value {
    font-size: 1.15rem; font-weight: 700;
    color: var(--falcon-emphasis-color);
}
.news-page .mkt-status-card.is-open .mkt-status-value { color: #22c55e; }
.news-page .mkt-status-next {
    font-size: 0.72rem;
    color: var(--falcon-secondary-color);
    margin-top: 0.25rem;
}
.news-page .mkt-status-time {
    font-size: 0.64rem;
    color: var(--falcon-tertiary-color);
    margin-top: 0.45rem;
    font-variant-numeric: tabular-nums;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(128,128,128,0.12);
}

/* 포지션 요약 */
.news-page .pos-list {
    display: flex; flex-direction: column; gap: 0.4rem;
}
.news-page .pos-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: var(--trendy-surface-2);
    border-radius: 8px;
    font-size: 0.72rem;
    align-items: center;
    transition: background 0.2s ease, transform 0.2s ease;
    border-left: 2px solid transparent;
}
.news-page .pos-row:hover {
    background: rgba(var(--falcon-primary-rgb), 0.06);
    transform: translateX(2px);
}
.news-page .pos-ticker {
    font-weight: 700;
    color: var(--falcon-emphasis-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.news-page .pos-avg {
    color: var(--falcon-tertiary-color);
    font-variant-numeric: tabular-nums;
    font-size: 0.65rem;
}
.news-page .pos-pnl {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.news-page .pos-pnl.up {
    color: #22c55e;
    background: rgba(34,197,94,0.10);
}
.news-page .pos-pnl.down {
    color: #ef4444;
    background: rgba(239,68,68,0.10);
}

/* 포지션 Empty */
.news-page .pos-empty-box {
    text-align: center;
    padding: 1rem 0.5rem 0.3rem;
}
.news-page .pos-empty-icon {
    width: 48px; height: 48px;
    margin: 0 auto 0.7rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    font-size: 1.1rem;
}
.news-page .pos-empty-title {
    font-size: 0.82rem; font-weight: 700;
    color: var(--falcon-emphasis-color);
    margin-bottom: 0.2rem;
}
.news-page .pos-empty-desc {
    font-size: 0.68rem;
    color: var(--falcon-tertiary-color);
    margin-bottom: 0.85rem;
}
.news-page .pos-empty-link {
    display: inline-flex; align-items: center;
    padding: 0.4rem 0.95rem;
    background: rgba(var(--falcon-primary-rgb), 0.12);
    color: var(--falcon-primary);
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.news-page .pos-empty-link:hover {
    background: rgba(var(--falcon-primary-rgb), 0.22);
    transform: translateY(-1px);
}

/* 트렌딩 코인 */
.news-page .trend-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.news-page .trend-item {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.72rem;
    padding: 0.45rem 0.55rem 0.45rem 0.55rem;
    background: var(--trendy-surface-2);
    border-radius: 8px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.news-page .trend-item:hover {
    background: rgba(var(--falcon-primary-rgb), 0.08);
    transform: translateX(2px);
}
.news-page .trend-pos {
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--trendy-surface-1);
    color: var(--falcon-tertiary-color);
    font-size: 0.6rem; font-weight: 800;
    border: 1px solid rgba(128,128,128,0.12);
    flex-shrink: 0;
}
.news-page .trend-item.top-1 .trend-pos {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff; border-color: #fbbf24;
    box-shadow: 0 2px 6px rgba(251,191,36,0.35);
}
.news-page .trend-item.top-2 .trend-pos {
    background: linear-gradient(135deg, #e2e8f0, #94a3b8);
    color: #fff; border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(148,163,184,0.3);
}
.news-page .trend-item.top-3 .trend-pos {
    background: linear-gradient(135deg, #d97706, #92400e);
    color: #fff; border-color: #d97706;
    box-shadow: 0 2px 6px rgba(217,119,6,0.3);
}
.news-page .trend-item img { border-radius: 50%; flex-shrink: 0; }
.news-page .trend-name {
    color: var(--falcon-emphasis-color);
    font-weight: 600;
    flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.news-page .trend-sym {
    color: var(--falcon-tertiary-color);
    font-weight: 500;
    font-size: 0.62rem;
}
.news-page .trend-rank {
    color: var(--falcon-primary);
    font-weight: 800;
    font-size: 0.62rem;
    padding: 0.1rem 0.4rem;
    background: rgba(var(--falcon-primary-rgb), 0.12);
    border-radius: 4px;
}

/* 진입 stagger 애니메이션 */
@keyframes newsFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.news-page .news-swiper,
.news-page .tv-chart-card {
    animation: newsFadeUp 0.42s ease-out both;
}
.news-page .tv-chart-card:nth-of-type(1) { animation-delay: 0.08s; }
.news-page .tv-chart-card:nth-of-type(2) { animation-delay: 0.14s; }
.news-page .tv-chart-card:nth-of-type(3) { animation-delay: 0.20s; }
.news-page .tv-chart-card:nth-of-type(4) { animation-delay: 0.26s; }

/* News 모바일 보호 */
@media (max-width: 575.98px) {
    .news-page .tv-chart-card { height: 220px; }
    .news-page .fng-card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .news-page .news-swiper,
    .news-page .tv-chart-card {
        animation: none;
    }
    .news-page .tv-chart-card:hover,
    .news-page .pos-row:hover,
    .news-page .trend-item:hover {
        transform: none;
    }
}

/* ==========================================================
   Operations · Seed 페이지 전용 (구 Operations/Seed.cshtml inline)
   ========================================================== */

/* Seed 페이지 한정 — 표준 카드 패턴(.card.card-header.card-body) 채택, status-card/step-marker 폐기 */
.seed-status-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 0; font-size: 0.85rem;
}
.seed-lbl { color: var(--falcon-secondary-color); }
.seed-val { color: var(--falcon-emphasis-color); font-variant-numeric: tabular-nums; font-weight: 600; }

.seed-chip {
    display: inline-flex; align-items: center;
    padding: 5px 11px;
    background: var(--falcon-bg-200, rgba(148, 163, 184, 0.15));
    color: var(--falcon-secondary-color);
    border-radius: 999px; font-size: 0.72rem; font-weight: 700;
}
.seed-chip.ok { background: rgba(34, 197, 94, 0.16); color: #15803d; }
.seed-chip.warn { background: rgba(234, 179, 8, 0.18); color: #a16207; }
.seed-chip.err { background: rgba(239, 68, 68, 0.16); color: #b91c1c; }
[data-bs-theme="dark"] .seed-chip.ok { color: #86efac; }
[data-bs-theme="dark"] .seed-chip.warn { color: #fde68a; }
[data-bs-theme="dark"] .seed-chip.err { color: #fca5a5; }

.seed-result-success, .seed-result-fail {
    padding: 0.85rem 1rem; border-radius: 0.7rem;
    font-size: 0.83rem; line-height: 1.55;
}
.seed-result-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #15803d;
}
.seed-result-fail {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #b91c1c;
}
[data-bs-theme="dark"] .seed-result-success { color: #86efac; }
[data-bs-theme="dark"] .seed-result-fail { color: #fca5a5; }

/* ==========================================================
   Operations · Publish 페이지 전용 (구 Operations/Publish.cshtml inline)
   ========================================================== */

@keyframes pulse-deploy {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}
.badge-deploying { animation: pulse-deploy 1.2s ease-in-out infinite; }
.deploy-step { transition: all .3s ease; }
.deploy-step .step-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    transition: all .3s ease;
}
.deploy-step .step-connector {
    flex: 1; height: 3px;
    background: var(--falcon-border-color, #d8e2ef);
    transition: background .3s ease;
    border-radius: 999px;
}
.deploy-step.active .step-connector { background: var(--falcon-primary); }
.deploy-step.done .step-connector { background: var(--falcon-success); }

/* ==========================================================
   Mobile Responsive — 모바일 반응형 보강 (2026-05-04)
   적용 breakpoint:
   - ≤991.98px : 태블릿 (large/medium)
   - ≤767.98px : 태블릿 portrait / 큰 폰
   - ≤575.98px : 폰 (small)
   원칙:
   - cshtml inline <style> 금지 → 모든 모바일 처리는 이 섹션
   - Falcon vendor (assets/css) 수정 없이 specificity로 덮어쓰기
   - 16개 테마 color token 그대로 사용
   ========================================================== */

/* ── 991.98px 이하 (태블릿) ── */
@media (max-width: 991.98px) {
    /* Hero 카드 패딩/타이틀 약하게 축소 — corner-4.png 일러스트도 살짝 좁힘 */
    .trade-hero {
        padding: 1rem 1.1rem;
    }
    .trade-hero .hero-title,
    .trade-hero h6 {
        font-size: clamp(1.05rem, 3vw, 1.35rem);
    }
    .trade-hero::after {
        width: 40%;
        opacity: 0.55;
    }
    [data-bs-theme="dark"] .trade-hero::after {
        opacity: 0.35;
    }
}

/* ── 767.98px 이하 (태블릿 portrait / 큰 폰) ── */
@media (max-width: 767.98px) {
    /* === Hero === */
    .trade-hero {
        padding: 0.85rem 0.95rem;
    }
    .trade-hero .hero-icon {
        width: 36px; height: 36px;
        font-size: 0.95rem;
        border-radius: 0.5rem;
    }
    .trade-hero .hero-title,
    .trade-hero h6 {
        font-size: clamp(0.95rem, 4vw, 1.2rem);
        line-height: 1.25;
    }
    /* hero 우측 corner-4.png 가 텍스트와 겹치지 않도록 추가 축소 */
    .trade-hero::after {
        width: 35%;
        opacity: 0.4;
    }
    [data-bs-theme="dark"] .trade-hero::after {
        opacity: 0.25;
    }
    .trade-hero small,
    .trade-hero .hero-desc {
        font-size: 0.7rem;
    }

    /* === Trade Card / KPI === */
    .trade-card {
        padding: 0.75rem !important;
    }
    .trade-card.p-3 {
        padding: 0.75rem !important;
    }
    .trade-card:has(> .ribbon) {
        padding-top: 1.5rem !important;
    }
    .trade-card .ribbon {
        padding: 0.18rem 0.55rem;
        font-size: 0.55rem;
    }
    .trade-card .icon-tile {
        width: 38px; height: 38px;
        border-radius: 0.55rem;
        font-size: 0.85rem;
    }
    .trade-card .icon-tile.tile-lg {
        width: 44px; height: 44px;
        font-size: 1rem;
    }
    /* === KPI 가격/숫자 — 모바일에서 카드 폭 부족으로 잘리는 문제 해결 ===
       - clamp() 로 폰트 자동 축소 (1rem ~ 1.6rem 사이)
       - white-space:nowrap + overflow:hidden + text-overflow: ellipsis 로 잘림 방지
       - data-countup 안의 span 도 동일 (countUp.js 가 textNode 또는 span 생성)
       - flex-grow-1.min-w-0 컨테이너 안에서 작동하도록 min-width:0 보강 */
    .trade-card .price-num {
        font-size: clamp(0.95rem, 4.5vw, 1.6rem);
        line-height: 1.15;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .trade-card .price-num small {
        font-size: 0.62rem;
    }
    .trade-card h6 {
        font-size: 0.82rem;
        line-height: 1.25;
    }
    /* KPI 라벨 (TOTAL ASSETS 등) — letter-spacing 약하게 */
    .trade-card .text-uppercase {
        letter-spacing: 0.02em;
    }

    /* === Card Header === */
    .card-header.bg-body-tertiary {
        min-height: 3.4rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .card-header.bg-body-tertiary > h6 {
        font-size: 0.85rem !important;
    }

    /* === Form 폼 컨트롤 — 데스크톱 2.375rem 유지하되 fontSize/padding 만 살짝 ===
       모바일 iOS 자동 zoom 방지 위해 min font-size 16px 보장 */
    .card-body .form-control:not(.form-control-sm):not(.form-control-lg),
    .card-body .form-select:not(.form-select-sm):not(.form-select-lg),
    .card-body .input-group:not(.input-group-sm):not(.input-group-lg) > .form-control {
        font-size: 0.9rem !important;
    }

    /* === Sidebar/Top Brand "AmaGetDon" 텍스트 모바일 축소 ===
       Falcon .navbar-brand 의 .font-sans-serif span 이 너무 커서 헤더 ~50% 차지하는 문제 해결.
       .navbar-vertical (좌측 사이드바) + .navbar-top (상단 navbar) + Home 의 navbar-glass 모두 적용 */
    .navbar-vertical .navbar-brand .font-sans-serif,
    .navbar-top .navbar-brand .font-sans-serif,
    .navbar-glass .navbar-brand .font-sans-serif {
        font-size: 1rem !important;
        font-weight: 800;
    }
    .navbar-vertical .navbar-brand,
    .navbar-top .navbar-brand,
    .navbar-glass .navbar-brand {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    /* Home 의 nav.navbar-vertical 모바일 토글 햄버거가 아주 좌측에 붙어 brand 가 화면 ~50% 차지하는 케이스 보강 */
    .navbar-vertical .navbar-brand {
        max-width: calc(100vw - 110px);
        overflow: hidden;
    }
    .navbar-vertical .navbar-brand .d-flex.align-items-center {
        min-width: 0;
        max-width: 100%;
    }

    /* === Floating Settings Popover (톱니) ===
       모바일에서 카드 hover/콘텐츠와 시각 겹침 — 크기 축소 + 우측 살짝 안쪽 + opacity
       Falcon 의 .settings-popover 는 fixed positioned (right:0, bottom:80px 등). z-index 낮추진 않음 (사용자 access 우선) */
    .settings-popover {
        right: 8px !important;
        transform: scale(0.78);
        transform-origin: bottom right;
        opacity: 0.85;
    }
    .settings-popover:hover,
    .settings-popover:focus-within {
        opacity: 1;
        transform: scale(0.9);
    }

    /* === DataTable 모바일 ===
       기본 .dt-modern-card 의 row-height 48px 는 모바일에서 답답 — 보수적 축소 */
    .dt-modern-card table.dataTable tbody td {
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .dt-modern-card .dataTables_wrapper .dataTables_filter input {
        font-size: 0.82rem;
        padding: 5px 10px;
    }

    /* === Dashboard Open Positions Tab Pills 모바일 wrap === */
    .nav-pills.nav-pills-falcon {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* === Backtest 결과 요약 그리드 (trade-hero-gradient) 모바일 패딩 ===
       6개 KPI 가 col-6 으로 들어갈 때 폭 부족 방지 */
    .trade-hero-gradient {
        padding: 10px 10px 8px;
    }
}

/* ── 575.98px 이하 (폰) ── */
@media (max-width: 575.98px) {
    /* === Hero — 한층 더 축소 === */
    .trade-hero {
        padding: 0.7rem 0.85rem;
    }
    .trade-hero .hero-icon {
        width: 32px; height: 32px;
        font-size: 0.85rem;
        border-radius: 0.45rem;
    }
    .trade-hero .hero-title,
    .trade-hero h6 {
        font-size: clamp(0.9rem, 4.5vw, 1.1rem);
    }
    /* 폰에서는 corner-4.png 일러스트 숨김 (텍스트 가독성 우선) */
    .trade-hero::after {
        display: none;
    }

    /* === Trade Card — KPI 가독성 우선 === */
    .trade-card .price-num {
        font-size: clamp(0.9rem, 5.5vw, 1.4rem);
    }
    /* 폰에서 KPI 카드 라벨 (TOTAL ASSETS 등) 더 작게 */
    .trade-card .text-uppercase.fs--2 {
        font-size: 0.6rem;
    }
    /* 폰에서 ribbon 작게 */
    .trade-card .ribbon {
        padding: 0.15rem 0.45rem;
        font-size: 0.5rem;
        letter-spacing: 0.04em;
    }
    /* 폰에서 fs--2 안의 보조 텍스트 (Seed: ₩xxx, Invested xxx 등) — 잘림 방지 */
    .trade-card p.fs--2,
    .trade-card .fs--2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    /* 단, badge rounded-pill 안의 fs--2 는 nowrap 안 쪽이라 영향 없음 — 보수적 추가 */
    .trade-card .badge.fs--2 {
        white-space: nowrap;
        overflow: visible;
    }

    /* === 카드 본문 padding 축소 === */
    .card-body {
        padding: 0.85rem;
    }
    /* 카드 헤더는 더 작게 */
    .card-header.bg-body-tertiary > h6 {
        font-size: 0.8rem !important;
    }
    .card-header.bg-body-tertiary {
        min-height: 3rem !important;
        padding: 0.55rem 0.75rem !important;
    }

    /* === Container fluid 모바일 좌우 padding 축소 ===
       container-fluid.px-0 는 그대로, .container 만 영향 — 카드 호흡 확보 */
    .container.px-0,
    .container-fluid.px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* main 영역 padding 축소 (Home의 .content) */
    .content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* === 사이드바/탑 브랜드 한층 더 작게 === */
    .navbar-vertical .navbar-brand .font-sans-serif,
    .navbar-top .navbar-brand .font-sans-serif,
    .navbar-glass .navbar-brand .font-sans-serif {
        font-size: 0.92rem !important;
    }
    .navbar-vertical .navbar-brand {
        max-width: calc(100vw - 95px);
    }

    /* === Floating Settings 더 작게 + 더 투명 === */
    .settings-popover {
        right: 6px !important;
        transform: scale(0.65);
    }

    /* === Backtest 결과 KPI 그리드 (id="backtestSummaryGrid")
       JS 가 col-6 col-md-4 col-xl-2 등으로 .font-monospace .fs-1/.fs-2 으로 채움 — 폰에서 잘림 방지 === */
    #backtestSummaryGrid .price-num,
    #backtestSummaryGrid .text-body-emphasis,
    #backtestSummaryGrid .font-monospace.fs-1,
    #backtestSummaryGrid .font-monospace.fs-2,
    #backtestSummaryGrid .card-body .fw-bold.fs-1,
    #backtestSummaryGrid .card-body .fw-bold.fs-2 {
        font-size: clamp(0.9rem, 4.6vw, 1.4rem) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
    }
    #backtestSummaryGrid .card-body {
        padding: 0.75rem !important;
    }
    #backtestSummaryGrid .text-uppercase {
        letter-spacing: 0.02em;
    }

    /* === Hero 우측 corner-4.png 와 함께 출현하는 우측 hero-action-pill / hero-mini ===
       폰에서는 hero 가 위/아래 stack 될 수 있으므로 nowrap 강제는 풀고 글자 작게 */
    .trade-hero .hero-meta,
    .trade-hero .hero-pill,
    .trade-hero .hero-action-pill {
        font-size: 0.68rem;
    }

    /* === Modal 폰 가독성 보강 === */
    .modal-dialog {
        margin: 0.5rem;
    }
    .modal-body {
        padding: 0.85rem;
    }

    /* === Dashboard Tab Pills (오픈/클로즈드) 폰에서 한 줄 유지 === */
    .nav-pills.nav-pills-falcon .nav-link {
        padding: 0.3rem 0.7rem;
        font-size: 0.78rem;
    }

    /* === Strategy Monitoring 카드 안 .price-num 인라인 style="font-size:1.1rem" 보강 ===
       inline style 의 specificity 가 높아 우리 .trade-card .price-num 보다 강해서 따로 처리 */
    .trade-card .price-num[style*="1.1rem"] {
        font-size: clamp(0.85rem, 4.2vw, 1.1rem) !important;
    }
}

/* ── Touch device — hover 효과 약화 ── */
@media (hover: none) and (pointer: coarse) {
    /* tap-target 인 ticker-row, trade-row 의 hover 효과는 유지하되 transform 효과만 비활성 */
    .news-page .news-card:hover,
    .news-page .pos-row:hover,
    .news-page .trend-item:hover,
    .news-page .tv-chart-card:hover {
        transform: none;
    }
    .trade-card:hover {
        transform: none;
        box-shadow: var(--trendy-shadow);
    }
}