* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Rajdhani", sans-serif; }
.title-font { font-family: "Orbitron", sans-serif !important; }

:root {
    --bg-primary: #1a1d23;
    --bg-secondary: #25282f;
    --bg-tertiary: #2d3139;
    --text-primary: #ffffff;
    --text-muted: #9ca3af;
    --text-dim: #6b7280;
    --accent-cyan: #00d4ff;
    --accent-cyan-glow: rgba(0, 212, 255, 0.3);
    --buy-color: #00b450;
    --buy-bg: rgba(0, 180, 80, 0.15);
    --sell-color: #dc3246;
    --sell-bg: rgba(220, 50, 70, 0.15);
    --neutral-color: #646473;
    --border-color: #3f4451;
}

body {
    background: linear-gradient(135deg, #0a0c10 0%, #151821 50%, #0a0c10 100%);
    color: var(--text-primary);
    min-height: 100vh;
    /* ★ 모바일 롱프레스 방지 (구글 검색/텍스트 선택) */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* ★ 입력 필드는 텍스트 선택 허용 */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

.app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

.header {
    background: var(--bg-secondary);
    padding: 4px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    transition: padding 0.15s ease;
}

.header-title { font-family: 'Rajdhani', sans-serif; font-size: 23px; font-weight: 700; color: #ffffff; display: flex; align-items: center; letter-spacing: 0.5px; }
.header-status { display: flex; align-items: center; gap: 6px; font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600; color: #ffffff; letter-spacing: 0.3px; }
#modeBadge { font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.5px !important; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); animation: pulse 2s infinite; }
.status-dot.disconnected { background: var(--sell-color) !important; box-shadow: 0 0 8px var(--sell-color) !important; animation: none !important; }

.content { flex: 1; overflow-y: auto; padding-bottom: 70px; }
.page { display: none; padding: 15px 0px; }
.page.active { display: block; }
.page.zm-mode { padding: 0; }

.card {
    background: #1e2127;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
}
.card-title { font-size: 17px; font-weight: 700; color: #ffffff; margin-bottom: 12px; }
.info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-muted); font-size: 14px; }
.info-value { font-weight: 600; font-size: 14px; }

/* 홈 */
.welcome-banner {
    background: linear-gradient(135deg, #1e3a5f 0%, #0d1421 100%);
    border-radius: 12px; padding: 20px; margin-bottom: 15px; text-align: center;
    border: 1px solid rgba(0, 212, 255, 0.2);
}
.welcome-banner h2 { color: var(--accent-cyan); margin-bottom: 8px; font-size: 18px; }
.balance-display { font-size: clamp(24px, 8vw, 32px); font-weight: bold; color: var(--buy-color); }

/* 차트 */
.chart-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: var(--bg-secondary); }
.symbol-name { font-size: 16px; font-weight: bold; }
.timeframe-buttons { display: flex; gap: 5px; }
.tf-btn { background: #1e2127; border: 1px solid var(--border-color); color: var(--text-muted); padding: 5px 10px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.tf-btn.active { background: var(--accent-cyan); color: #0d1421; border-color: var(--accent-cyan); }
#chart-container { width: 100%; background: var(--bg-primary); }
.price-bar { display: flex; padding: 10px 15px; gap: 10px; }

/* Chart Symbol Selector - 상세 스타일은 chart.css에서 관리 */
.chart-symbol-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; margin-top: -5px; background: #000000; border-bottom: none; position: relative; }
.chart-symbol-info { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.chart-symbol-icon { font-size: 20px; }
.chart-symbol-name { font-size: 16px; font-weight: 700; }
.chart-symbol-id { font-size: 11px; color: var(--text-muted); }
.chart-symbol-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-secondary); border: 1px solid var(--accent-cyan); border-radius: 8px; margin-top: 5px; z-index: 50; max-height: 300px; overflow-y: auto; display: none; }
.chart-symbol-option { display: flex; align-items: center; gap: 10px; padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--border-color); }
.chart-symbol-option:hover { background: rgba(255,255,255,0.1); }
.chart-symbol-option:last-child { border-bottom: none; }
.chart-symbol-option.favorite { background: rgba(0,212,255,0.1); }
.favorite-star { color: #00b894; margin-left: auto; }

/* Chart Signal Section */
.chart-signal-section { padding: 15px; background: var(--bg-primary); }
.chart-signal-title { font-size: 16px; font-weight: 700; color: var(--accent-cyan); margin-bottom: 15px; letter-spacing: 0.5px; }
.chart-gauge-container { text-align: center; padding: 10px 0; }
.chart-gauge-status { font-size: 24px; font-weight: 900; letter-spacing: 2px; margin-top: 5px; transition: color 0.5s ease, text-shadow 0.5s ease; }
.chart-indicator-summary { display: flex; background: var(--bg-secondary); border-radius: 10px; overflow: hidden; margin-top: 15px; border: 1px solid var(--border-color); }
.chart-indicator-item { flex: 1; text-align: center; padding: 10px; }
.chart-indicator-item:not(:last-child) { border-right: 1px solid var(--border-color); }
.chart-indicator-count { font-size: 24px; font-weight: bold; }
.chart-indicator-label { font-size: 10px; color: var(--text-muted); }
.price-box { flex: 1; text-align: center; padding: 10px 15px; border-radius: 8px; }
.price-box.sell { background: linear-gradient(180deg, #dc3545, #c82333); }
.price-box.buy { background: linear-gradient(180deg, #00b894, #00a383); }
.price-label { font-size: 10px; opacity: 0.9; }
.price-value { font-size: 18px; font-weight: bold; }

/* EA 패널 */
.ea-panel {
    background: var(--bg-primary);
    /* [원본] border: 2px solid var(--accent-cyan); */
    border-top: none;
    border-bottom: none;
    border-left: 1px solid rgba(0, 212, 255, 0.25);
    border-right: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 16px;
    overflow: hidden;
    /* [원본] box-shadow: 0 0 40px var(--accent-cyan-glow), 0 25px 60px rgba(0,0,0,0.6); */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
}
/* 패널 하단 시안 그라데이션 라인 */
.ea-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    z-index: 10;
    pointer-events: none;
}
/* 글로우 박스 상단 시안 그라데이션 */
.target-glow-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    pointer-events: none;
}
/* 글로우 박스 하단 시안 그라데이션 (제거됨)
.target-glow-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    pointer-events: none;
} */
.ea-header {
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: none;
    position: relative;
}
.ea-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}
.ea-version {
    font-size: 0.5em;
    opacity: 0.6;
    vertical-align: super;
    font-weight: 400;
}

.ea-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}
.ea-title { font-size: clamp(20px, 6vw, 26px); font-weight: 900; letter-spacing: clamp(1.5px, 0.8vw, 3px); text-shadow: 0 0 20px var(--accent-cyan-glow); }
.ea-content { padding: 15px; }
.ea-footer { padding: 6px; text-align: center; font-size: 11px; color: var(--text-dim); border-top: 1px solid var(--border-color); background: var(--bg-secondary); }

/* Symbol Row */
.symbol-row {
    position: relative; display: flex; align-items: center;
    justify-content: flex-start;
    padding: 0 !important; 
    margin: 0 0 15px 0 !important;
}
.symbol-info { 
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 12px;
    margin-left: 0 !important;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.symbol-icon { font-size: 24px; }
.symbol-text { font-size: clamp(18px, 5.5vw, 22px); font-weight: bold; }
.settings-btn { 
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent; 
    border: none; 
    color: var(--text-muted); 
    width: 40px; height: 40px; padding: 0; border-radius: 8px; cursor: pointer; 
    transition: all 0.2s; display: flex; align-items: center; justify-content: center; 
}
.settings-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }

/* Stats Bar */
.stats-bar { display: flex; background: var(--bg-secondary); border-radius: 10px; overflow: hidden; margin-bottom: 15px; border: 1px solid var(--border-color); }
.stat-item { flex: 1; text-align: center; padding: 12px 8px; }
.stat-item:not(:last-child) { border-right: 1px solid var(--border-color); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.stat-value { font-size: clamp(14px, 4vw, 16px); font-weight: bold; }

/* Symbol & Stats Bar (통합) */
.symbol-stats-bar {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 15px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* 종목명 (컴팩트) */
.symbol-info-compact {
    flex: 1 1 0;
    text-align: center;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.symbol-icon-sm {
    font-size: 18px;
    flex-shrink: 0;
}
.symbol-text-sm {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 계좌정보 아이템 (컴팩트) */
.stat-item-compact {
    flex: 1 1 0;
    text-align: center;
    padding: 8px 6px;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stat-label-sm {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
    white-space: nowrap;
}
.stat-value-sm {
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gauge */
.gauge-container { text-align: center; padding: 0; margin-bottom: 10px; }
.gauge-status { font-size: clamp(20px, 6.5vw, 26px); font-weight: 900; letter-spacing: clamp(1px, 0.5vw, 2px); margin-top: -8px; transition: color 0.5s ease, text-shadow 0.5s ease; }

/* Indicator Summary */
.indicator-summary {
    display: flex;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    border: none;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
}
.indicator-item {
    flex: 1;
    text-align: center;
    padding: 1px 6px;
    position: relative;
}
.indicator-item:not(:last-child) { border-right: none; }
.indicator-count { font-size: clamp(18px, 5vw, 22px); font-weight: bold; margin-bottom: 0; }
.indicator-count.sell { color: var(--sell-color); text-shadow: 0 0 10px rgba(220,50,70,0.5); }
.indicator-count.neutral { color: var(--neutral-color); }
.indicator-count.buy { color: var(--buy-color); text-shadow: 0 0 10px rgba(0,180,80,0.5); }
.indicator-label { font-size: 10px; color: var(--text-muted); line-height: 1; }

/* Target Section */
.target-section { margin-bottom: 15px; }
.target-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; padding-top: 10px; }
/* Target 글로우 박스 */
.target-glow-box {
    background: linear-gradient(145deg, #12151a 0%, #0a0d12 100%);
    border-radius: 12px;
    /* [원본] border: 1px solid rgba(0, 212, 255, 0.25); */
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    padding: 6px 20px 15px 20px;
    margin-bottom: 15px;
    position: relative;
}
/*
.target-glow-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    border-radius: 12px 12px 0 0;
}
*/
.target-glow-box .target-label {
    padding-left: 0;
}
.target-glow-box .slider-container {
    width: 100%;
}
.target-glow-box .slider-labels {
    width: 100%;
}

.target-display { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; width: 70%; margin-left: auto; margin-right: auto; }
.target-btn { width: clamp(38px, 11vw, 44px); height: clamp(36px, 10vw, 40px); border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); font-size: clamp(16px, 5vw, 20px); font-weight: bold; cursor: pointer; transition: all 0.2s; }
.target-btn:hover { transform: scale(1.05); }
.target-btn:active { transform: scale(0.95); }
.target-value { font-size: clamp(28px, 9vw, 36px); font-weight: 300; min-width: clamp(100px, 35vw, 140px); text-align: center; }
.lot-display { text-align: center; font-size: 14px; color: #ffffff; margin-bottom: 8px; margin-top: -5px; }

/* Slider */
.slider-container { margin-bottom: 2px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; outline: none; cursor: pointer; background: #2d3139; transition: background 0.15s ease-out; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-cyan); cursor: pointer; box-shadow: 0 0 10px var(--accent-cyan), 0 0 20px rgba(0,212,255,0.5); border: 2px solid white; margin-top: 0px; }
.slider-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--text-muted); }

/* Position Info */
.position-card { border-radius: 10px; padding: 10px 15px; margin-bottom: 15px; }
.position-card.buy-pos { background: var(--buy-bg); border: 1px solid rgba(0,180,80,0.4); }
.position-card.sell-pos { background: var(--sell-bg); border: 1px solid rgba(220,50,70,0.4); }
.position-row { display: flex; justify-content: space-between; }
.position-item { flex: 1; text-align: center; }
.position-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.position-value { font-size: clamp(15px, 4.5vw, 18px); font-weight: bold; }

/* P/L Gauge */
.pl-gauge { margin-bottom: 35px; }
.pl-labels { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11px; font-weight: bold; }
.pl-bar-container { position: relative; height: 12px; background: var(--bg-tertiary); border-radius: 6px; overflow: visible; }
.pl-bar-center { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: var(--text-muted); transform: translateX(-50%); z-index: 5; }
.pl-bar-fill { position: absolute; top: 0; height: 100%; transition: all 0.03s linear; }
.pl-diamond { position: absolute; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; z-index: 10; transition: all 0.03s linear; }
.pl-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.pl-percent { font-size: 16px; font-weight: bold; }

/* Trade Buttons */
.trade-buttons { display: flex; gap: 12px; }
.trade-btn { flex: 1; padding: clamp(8px, 2.5vw, 10px); border: none; border-radius: 10px; font-size: clamp(15px, 4.5vw, 18px); font-weight: 900; letter-spacing: clamp(1px, 0.5vw, 2px); cursor: pointer; transition: all 0.2s; }
.trade-btn:hover { transform: scale(1.02); }
.trade-btn:active { transform: scale(0.98); }
.trade-btn.sell-btn { background: linear-gradient(135deg, var(--sell-color) 0%, #a52030 100%); color: white; box-shadow: 0 4px 20px rgba(220,50,70,0.5); }
.trade-btn.buy-btn { background: linear-gradient(135deg, var(--buy-color) 0%, #008040 100%); color: white; box-shadow: 0 4px 20px rgba(0,180,80,0.5); }
.trade-btn.close-btn { background: linear-gradient(135deg, #5a9ee0 0%, #4080c0 100%); color: white; box-shadow: 0 4px 20px rgba(74,144,217,0.5); width: 100%; }

/* Account */
.account-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.summary-box { background: #1e2127; border-radius: 10px; padding: 15px; text-align: center; border: 1px solid var(--border-color); }
.summary-box .value { font-size: clamp(16px, 5vw, 20px); font-weight: bold; color: var(--accent-cyan); }
.summary-box .label { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.history-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.history-item:last-child { border-bottom: none; }
.history-symbol { font-weight: 600; }
.history-time { font-size: 11px; color: var(--text-muted); }
.history-profit { font-weight: bold; }
.history-profit.positive { color: var(--buy-color); }
.history-profit.negative { color: var(--sell-color); }

/* My */
.profile-header { text-align: center; padding: 20px; background: var(--bg-secondary); border-radius: 12px; margin-bottom: 15px; border: 1px solid var(--border-color); }
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--accent-cyan); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 32px; }
.profile-name { font-size: 18px; font-weight: bold; }
.profile-level { font-size: 12px; color: var(--accent-cyan); margin-top: 5px; }
.menu-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #1e2127; border-radius: 10px; margin-bottom: 10px; cursor: pointer; border: 1px solid var(--border-color); }
.menu-item:hover { background: var(--bg-tertiary); }
.menu-left { display: flex; align-items: center; gap: 12px; }
.menu-icon { font-size: 20px; }
.menu-icon .material-icons-round { font-size: 22px; color: var(--accent-cyan); vertical-align: middle; }
.menu-arrow { color: var(--text-muted); }

/* Bottom Nav */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-secondary); border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; justify-content: space-around; padding: 5px 0 12px 0; padding-bottom: env(safe-area-inset-bottom, 12px); max-width: 480px; margin: 0 auto; z-index: 100; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 0px; padding: 0px 15px 6px; cursor: pointer; color: var(--text-muted); transition: all 0.2s; }
.nav-item.active { color: var(--accent-cyan); }
.nav-icon { font-size: 20px; }
.nav-label { font-size: 10px; margin-top: -6px; }

/* Toast */
.toast {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(30, 33, 39, 0.97);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 12px 18px 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(63, 68, 81, 0.6);
    z-index: 10000;
    min-width: 180px;
    max-width: 360px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.03);
    transition: opacity 0.25s ease;
    will-change: opacity;
    opacity: 0;
    font-size: 14px;
    color: #e0e0e0;
    line-height: 1.4;
    pointer-events: none;
}
.toast.show {
    opacity: 1;
    pointer-events: auto;
}
.toast .toast-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.toast .toast-content {
    flex: 1;
}
.toast .toast-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}
.toast .toast-message {
    font-size: 13px;
    color: #9ca3af;
}
.toast.success .toast-icon {
    background: rgba(0, 180, 80, 0.15);
    color: #00b450;
}
.toast.success {
    border-color: rgba(0, 180, 80, 0.3);
}
.toast.error .toast-icon {
    background: rgba(220, 50, 70, 0.15);
    color: #dc3246;
}
.toast.error {
    border-color: rgba(220, 50, 70, 0.3);
}
.toast.warning .toast-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}
.toast.warning {
    border-color: rgba(245, 158, 11, 0.3);
}
.toast.info .toast-icon {
    background: rgba(0, 212, 255, 0.15);
    color: #00d4ff;
}
.toast.info {
    border-color: rgba(0, 212, 255, 0.3);
}
.toast.buy .toast-icon {
    background: rgba(0, 180, 80, 0.15);
    color: #00b450;
}
.toast.buy {
    border-color: rgba(0, 180, 80, 0.3);
}
.toast.sell .toast-icon {
    background: rgba(220, 50, 70, 0.15);
    color: #dc3246;
}
.toast.sell {
    border-color: rgba(220, 50, 70, 0.3);
}
.toast.demo .toast-icon {
    background: rgba(0, 212, 255, 0.15);
    color: #00d4ff;
}
.toast.demo {
    border-color: rgba(0, 212, 255, 0.3);
}

/* Settings Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); }
.modal-overlay.show { display: flex; }
.settings-panel { background: #2d3035; border: 2px solid var(--accent-cyan); border-radius: 8px; width: 90%; max-width: 400px; max-height: 90vh; overflow-y: auto; box-shadow: 0 0 40px var(--accent-cyan-glow); }
.settings-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: #000; }
.settings-title { font-size: 18px; font-weight: bold; color: white; }
.settings-close { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; }
.settings-content { padding: 15px; }
.settings-section { margin-bottom: 15px; }
.settings-label { font-size: 14px; color: var(--accent-cyan); margin-bottom: 10px; font-weight: bold; letter-spacing: 1px; }

/* Settings 글로우 박스 */
.settings-glow-box {
    background: linear-gradient(145deg, #12151a 0%, #0a0d12 100%);
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
}
.settings-glow-box:last-child {
    margin-bottom: 5px;
}
.settings-glow-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    border-radius: 12px 12px 0 0;
}
.mode-option { padding: 10px 12px; background: var(--bg-tertiary); border: 1px solid transparent; border-radius: 6px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s; }
.mode-option:hover { background: rgba(255,255,255,0.05); }
.mode-option.selected { background: rgba(0,212,255,0.15); border-color: var(--accent-cyan); }
.mode-option-header { display: flex; align-items: center; gap: 8px; }
.mode-radio { color: var(--text-muted); }
.mode-option.selected .mode-radio { color: var(--accent-cyan); }
.mode-name { font-weight: bold; font-size: 13px; }
.mode-desc { font-size: 11px; color: var(--text-muted); }
.input-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.input-label { font-size: 12px; color: white; }
.input-hint { font-size: 10px; color: var(--text-muted); margin-left: 8px; }
.input-controls { display: flex; align-items: center; gap: 4px; }
.input-btn { width: 28px; height: 28px; background: #3f4451; border: none; color: white; border-radius: 4px; cursor: pointer; font-size: 12px; }
.input-btn:hover { background: #4f5461; }
.input-value { width: 80px; height: 28px; background: #25282f; border: 1px solid #3f4451; border-radius: 4px; color: white; text-align: center; font-size: 13px; font-weight: 600; line-height: 28px; display: flex; align-items: center; justify-content: center; }
.settings-divider { border-top: 1px solid var(--border-color); margin: 12px 0; }
.martin-row { display: flex; align-items: center; gap: 8px; }
.martin-checkbox { width: 22px; height: 22px; cursor: pointer; min-width: 22px; min-height: 22px; -webkit-tap-highlight-color: transparent; }
.martin-info { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.martin-max { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.martin-max-btn { padding: 2px 8px; background: var(--bg-secondary); border: 1px solid var(--accent-cyan); border-radius: 4px; color: var(--accent-cyan); font-size: 11px; font-weight: bold; cursor: pointer; }
.settings-footer { display: flex; gap: 10px; padding: 12px 15px; background: #000; }
.settings-footer-btn { flex: 1; padding: 12px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 14px; }
.settings-footer-btn.apply { background: var(--buy-color); color: white; }
.settings-footer-btn.reset { background: var(--sell-color); color: white; }

/* Symbol Dropdown */
.symbol-dropdown { background: var(--bg-secondary); border: 1px solid var(--accent-cyan); border-radius: 8px; margin-bottom: 15px; z-index: 50; overflow: hidden; display: none; }
.symbol-option { display: flex; align-items: center; gap: 10px; padding: 12px 15px; cursor: pointer; transition: all 0.2s; }
.symbol-option:hover { background: rgba(255,255,255,0.1); }
.symbol-option.selected { background: rgba(0,212,255,0.2); }
.symbol-option-icon { font-size: 20px; }
.symbol-option-name { font-weight: bold; font-size: 14px; }
.symbol-option-check { margin-left: auto; color: var(--accent-cyan); }

/* Mode Badge */
.mode-badge-demo {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    color: #000;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.8px;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.mode-badge-live {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    color: #000;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.8px;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

/* 종목 목록 (Watchlist) */
.watchlist-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.watchlist-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    margin-top: 6px;
    background: #000000;
    border-bottom: 2px solid rgba(255,255,255,0.3);
}
.watchlist-search {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
}
.watchlist-tabs {
    display: flex;
    gap: 0;
    flex: 1;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.watchlist-tabs::-webkit-scrollbar {
    display: none;
}
.watchlist-tab {
    flex: 0 0 auto;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    scroll-snap-align: start;
}
.watchlist-tab.active {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
}

/* 즐겨찾기 아이콘 */
.watchlist-favorite {
    padding: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.watchlist-favorite:hover {
    transform: scale(1.2);
}
.watchlist-favorite.active {
    color: #ffd700;
}

/* 검색 결과 추가 버튼 */
.search-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-cyan);
    border: none;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-add-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--accent-cyan);
}
.search-add-btn.added {
    background: #ffd700;
    color: #000;
}
.watchlist-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}
.watchlist-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border-color);
}
.watchlist-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.watchlist-item:active {
    background: rgba(0, 212, 255, 0.1);
}
.watchlist-icon {
    width: clamp(38px, 11vw, 44px);
    height: clamp(38px, 11vw, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 6vw, 24px);
    background: var(--bg-tertiary);
    border-radius: 10px;
    margin-right: clamp(8px, 3vw, 12px);
}
.watchlist-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.watchlist-symbol {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.watchlist-name {
    font-size: clamp(11px, 3vw, 12px);
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(100px, 30vw, 140px);
}
.watchlist-prices {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.watchlist-bid {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.watchlist-change {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}
.watchlist-change.up {
    color: var(--buy-color);
    background: rgba(0, 180, 80, 0.15);
}
.watchlist-change.down {
    color: var(--sell-color);
    background: rgba(220, 50, 70, 0.15);
}

/* Bid-Ask 연결 박스 스타일 */
.watchlist-price-row {
    display: flex;
    align-items: stretch;
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.watchlist-bid-box,
.watchlist-ask-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(4px, 1.5vw, 6px) clamp(6px, 2vw, 8px);
    min-width: clamp(60px, 18vw, 70px);
}
.watchlist-bid-box {
    background: var(--sell-color);
    color: white;
}
.watchlist-ask-box {
    background: var(--buy-color);
    color: white;
}
.watchlist-box-label {
    font-size: 9px;
    opacity: 0.9;
    font-weight: 500;
}
.watchlist-box-price {
    font-size: 12px;
    font-weight: 700;
}
.watchlist-change-center {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    min-width: 55px;
    padding: 0 6px;
    background: var(--bg-tertiary);
}
.watchlist-change-center.up {
    color: var(--buy-color);
}
.watchlist-change-center.down {
    color: var(--sell-color);
}

.chart-detail-container {
    display: none;
    margin: 0;
    padding: 0;
}

/* 종목 검색 모달 */
.search-category-btn {
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.search-category-btn.active {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: #000;
}
.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border-color);
}
.search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.search-result-item:active {
    background: rgba(0, 212, 255, 0.1);
}
.search-result-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-right: 12px;
}
.search-result-info {
    flex: 1;
}
.search-result-symbol {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.search-result-name {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.search-result-category {
    font-size: 10px;
    padding: 3px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-muted);
}

/* 공지 배너 */
.notice-banner {
    background: linear-gradient(135deg, #1e3a5f 0%, #0d1f33 100%);
    border: 1px solid var(--accent-cyan);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.notice-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.notice-icon {
    font-size: 18px;
}
.notice-text {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.notice-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}
.notice-close:hover {
    color: var(--text-primary);
}

/* 인사 섹션 */
.greeting-section {
    margin-bottom: 15px;
}
.greeting-text {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 4px;
}
.greeting-sub {
    font-size: 13px;
    color: var(--text-muted);
}

/* Today/Week 수익 */
.profit-summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.profit-box {
    text-align: center;
}
.profit-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--buy-color);
}
.profit-value.negative {
    color: var(--sell-color);
}
.profit-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.profit-divider {
    width: 1px;
    height: 30px;
    background: var(--border-color);
}

/* 오늘 거래 요약 */
.today-summary {
    margin-top: 12px;
    padding: 8px 15px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-muted);
    display: inline-block;
}

/* 프로모션 슬라이더 */
.promo-slider-container {
    margin-bottom: 15px;
    position: relative;
}
.promo-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 5px 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.promo-slider::-webkit-scrollbar {
    display: none;
}
.promo-card {
    min-width: 100%;
    scroll-snap-align: start;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.promo-icon {
    font-size: 32px;
    flex-shrink: 0;
}
.promo-content {
    flex: 1;
}
.promo-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.promo-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}
.promo-action {
    flex-shrink: 0;
}
.promo-btn {
    padding: 8px 14px;
    background: var(--buy-color);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s, opacity 0.2s;
}
.promo-btn:hover {
    transform: scale(1.05);
}
.promo-btn:active {
    transform: scale(0.95);
}

/* 슬라이드 인디케이터 */
.promo-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.promo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s;
}
.promo-dot.active {
    background: var(--accent-cyan);
    width: 20px;
    border-radius: 4px;
}


/* Trading Mode 선택 */
.trading-mode-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

/* Trading Mode 카드 - 위/아래 그라데이션 테두리 */
.trading-mode-card {
    border: none;
    position: relative;
}
.trading-mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    z-index: 1;
}
.trading-mode-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    z-index: 1;
}

.mode-select-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.mode-select-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}
.mode-select-btn.active {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}
.mode-select-btn.active.live-active {
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
}
.mode-select-icon {
    font-size: 24px;
}
.mode-select-info {
    text-align: left;
}
.mode-select-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.mode-select-desc {
    font-size: 11px;
    color: var(--text-muted);
}
.mode-select-check {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: var(--accent-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #000;
}
.mode-select-btn.live-active .mode-select-check {
    background: #00ff88;
}
.mode-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.mode-status.live {
    background: rgba(0, 255, 136, 0.1);
}
.mode-status.live strong {
    color: #ffffff;
}
.mode-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.mode-status-dot.demo {
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
}
.mode-status-dot.live {
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* MT5 Account 섹션 */
.mt5-not-connected {
    text-align: center;
    padding: 20px 10px;
}
.mt5-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.7;
}
.mt5-empty-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.mt5-empty-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.mt5-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mt5-connect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: var(--accent-cyan);
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.mt5-connect-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}
.mt5-guide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.mt5-guide-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* MT5 연결됨 상태 */
.mt5-connected {
    padding: 10px 0;
}
.mt5-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #00ff88;
    margin-bottom: 15px;
}
.mt5-status-dot {
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ff88;
    animation: pulse 2s infinite;
}
.mt5-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 15px;
}
.mt5-info-item {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 8px;
}
.mt5-info-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.mt5-info-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.mt5-disconnect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--sell-color);
    border-radius: 8px;
    color: var(--sell-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.mt5-disconnect-btn:hover {
    background: rgba(220, 50, 70, 0.1);
}

/* ========== 서브메뉴 (바텀시트) - New Design ========== */

/* 오버레이 */
.submenu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}
.submenu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* 서브메뉴 바텀시트 */
.submenu-sheet {
    position: fixed;
    bottom: 70px;
    left: 16px;
    right: 16px;
    max-width: 448px;
    margin: 0 auto;
    z-index: 250;
    background: rgba(17, 17, 27, 0.97);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(100, 116, 139, 0.5);
    box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(120%);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.submenu-overlay.show .submenu-sheet {
    transform: translateY(0);
    opacity: 1;
}

/* 드래그 핸들 */
.submenu-handle {
    display: flex;
    justify-content: center;
    padding: 16px 0 10px;
}
.submenu-handle::after {
    content: '';
    width: 40px;
    height: 4px;
    background: #8b95a5;
    border-radius: 4px;
}

/* 메뉴 헤더 */
.submenu-header {
    padding: 0 24px 16px;
}
.submenu-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.3px;
    text-align: left;
    padding: 0 24px 16px;
    border-bottom: none;
}
.submenu-subtitle {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* 메뉴 아이템 컨테이너 */
.submenu-items {
    padding: 0 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 메뉴 아이템 (카드형) */
.submenu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(31, 41, 55, 0.4);
    border: 1px solid rgba(55, 65, 81, 0.3);
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.submenu-item:hover {
    background: rgba(31, 41, 55, 0.7);
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateX(2px);
}
.submenu-item:active {
    transform: scale(0.98);
}

/* 메뉴 아이템 왼쪽 (아이콘 + 텍스트) */
.submenu-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 메뉴 아이콘 */
.submenu-item-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.submenu-item-icon.cyan {
    background: rgba(6, 182, 212, 0.12);
    color: #22d3ee;
}
.submenu-item-icon.emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
}

/* 메뉴 텍스트 */
.submenu-item-content {
    display: flex;
    flex-direction: column;
}
.submenu-item-title {
    font-size: 15px;
    font-weight: 500;
    color: white;
    margin-bottom: 3px;
}
.submenu-item-subtitle {
    font-size: 12px;
    color: #6b7280;
}

/* 메뉴 화살표 */
.submenu-item-arrow {
    color: #4b5563;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.submenu-item:hover .submenu-item-arrow {
    color: #22d3ee;
    transform: translateX(3px);
}

/* 기본 배지 */
.submenu-item-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 50px;
    background: var(--accent-cyan);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
}

/* 프로그레스 바 (길게 누르기) */
.submenu-item-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent-cyan);
    width: 0%;
    transition: width 0.5s linear;
}
.submenu-item.pressing .submenu-item-progress {
    width: 100%;
}

/* 힌트 영역 */
.submenu-hint {
    padding: 12px 24px 20px;
    border-top: 1px solid rgba(55, 65, 81, 0.3);
    text-align: center;
}
.submenu-hint p {
    font-size: 12px;
    color: #ffffff;
}

/* 서브메뉴 토스트 */
.submenu-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 17, 27, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--accent-cyan);
    border-radius: 16px;
    padding: 20px 24px;
    z-index: 300;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    max-width: 320px;
    width: 90%;
}
.submenu-toast.show {
    opacity: 1;
    visibility: visible;
}
.submenu-toast-icon {
    font-size: 32px;
    margin-bottom: 8px;
}
.submenu-toast-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-cyan);
    margin-bottom: 5px;
}
.submenu-toast-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* 네비게이션 길게 누르기 효과 */
.nav-item.long-pressing {
    transform: scale(0.95);
    opacity: 0.7;
}
.nav-item {
    transition: transform 0.2s, opacity 0.2s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ========== Multi Order Panel V5 ========== */
.multi-order-panel {
    display: none;
    padding: 12px;
}
.multi-order-panel.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 글로우 박스 공통 */
.multi-order-glow-box {
    background: linear-gradient(145deg, #12151a 0%, #0a0d12 100%);
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}
.multi-order-glow-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

/* ===== 섹션 1: 헤더 ===== */
.multi-order-header-section {
    padding: 16px;
}
.multi-order-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.multi-order-title-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.multi-order-icon-ring {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.05) 100%);
    border: 1px solid rgba(0, 212, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
}
.multi-order-title-text h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 2px;
    margin: 0;
}
.multi-order-title-text span {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.multi-order-title-right {
    text-align: right;
}
.multi-order-panels-count {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-cyan);
}
.multi-order-panels-label {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* 계좌 정보 그리드 */
.multi-order-account-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.multi-order-account-item {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.multi-order-account-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.multi-order-account-value.positive { color: var(--buy-color); }
.multi-order-account-value.negative { color: var(--sell-color); }
.multi-order-account-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== 섹션 2: 주문 영역 ===== */
.multi-order-order-section {
    padding: 16px;
    max-height: 420px;
    overflow-y: auto;
}

/* 종목 헤더 (심플) */
.multi-order-symbol-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.multi-order-symbol-simple {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background 0.2s;
}
.multi-order-symbol-simple:hover {
    background: rgba(255, 255, 255, 0.05);
}
.multi-order-symbol-icon {
    font-size: 24px;
}
.multi-order-symbol-id {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.multi-order-symbol-id .material-icons-round {
    font-size: 18px;
    color: var(--text-muted);
}

/* Market/Limit 토글 */
.multi-order-type-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}
.multi-order-toggle-label {
    font-size: 12px;
    color: var(--text-muted);
    transition: color 0.2s;
}
.multi-order-toggle-label.active {
    color: var(--accent-cyan);
    font-weight: 600;
}
.multi-order-toggle-switch {
    width: 44px;
    height: 24px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}
.multi-order-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--accent-cyan);
    border-radius: 50%;
    transition: all 0.3s;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}
.multi-order-toggle-switch.limit::after {
    left: 22px;
}

/* 지정가 입력 섹션 */
.multi-order-limit-section {
    display: none;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 10px;
}
.multi-order-limit-section.show {
    display: block;
}
.multi-order-limit-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.multi-order-limit-label {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 80px;
}
.multi-order-limit-input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}
.multi-order-limit-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

/* 랏수 컨트롤 */
.multi-order-lot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.multi-order-lot-control {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.multi-order-lot-btn {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}
.multi-order-lot-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.multi-order-lot-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
}
.multi-order-lot-input:focus {
    outline: none;
}
.multi-order-lot-settings {
    width: 44px;
    height: 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.multi-order-lot-settings:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* SELL/BUY 버튼 */
.multi-order-trade-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.multi-order-trade-btn {
    flex: 1;
    padding: 18px 15px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.multi-order-trade-btn:hover {
    transform: scale(1.02);
}
.multi-order-trade-btn:active {
    transform: scale(0.98);
}
.multi-order-trade-btn.sell {
    background: linear-gradient(180deg, #dc3545 0%, #a71d2a 100%);
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4);
}
.multi-order-trade-btn.buy {
    background: linear-gradient(180deg, #00b894 0%, #00a383 100%);
    box-shadow: 0 4px 20px rgba(0, 184, 148, 0.4);
}
.multi-order-trade-btn-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: white;
    letter-spacing: 2px;
}
.multi-order-trade-btn-price {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

/* SL/TP 설정 버튼 */
.multi-order-sltp-btn {
    width: 100%;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    margin-bottom: 15px;
}
.multi-order-sltp-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* 포지션 리스트 */
.multi-order-position-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.multi-order-position-title {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.multi-order-position-count {
    background: var(--accent-cyan);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

/* 포지션 아이템 - SL/TP 한줄 표시 */
.multi-order-position-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.multi-order-position-item:last-child {
    margin-bottom: 0;
}
.multi-order-position-main {
    display: flex;
    align-items: center;
    gap: 10px;
}
.multi-order-position-symbol {
    flex: 1;
}
.multi-order-position-symbol-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.multi-order-position-symbol-info {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.multi-order-position-type {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}
.multi-order-position-type.buy {
    background: rgba(0, 184, 148, 0.2);
    color: #00b894;
}
.multi-order-position-type.sell {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}
.multi-order-position-profit {
    font-size: 15px;
    font-weight: 700;
    min-width: 70px;
    text-align: right;
}
.multi-order-position-profit.positive { color: var(--buy-color); }
.multi-order-position-profit.negative { color: var(--sell-color); }
.multi-order-position-close {
    width: 32px;
    height: 32px;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    color: #dc3545;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.multi-order-position-close:hover {
    background: #dc3545;
    color: white;
}

/* 포지션 SL/TP 한줄 표시 */
.multi-order-position-sltp {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.multi-order-position-sltp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}
.multi-order-position-sltp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.multi-order-position-sltp-dot.sl { background: var(--sell-color); }
.multi-order-position-sltp-dot.tp { background: var(--buy-color); }
.multi-order-position-sltp-label {
    color: var(--text-muted);
}
.multi-order-position-sltp-value {
    color: var(--text-primary);
    font-weight: 600;
}

.multi-order-position-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
}
.multi-order-position-empty .material-icons-round {
    font-size: 40px;
    opacity: 0.3;
    margin-bottom: 10px;
}

/* ===== 섹션 3: 청산 버튼 ===== */
.multi-order-close-section {
    padding: 16px;
}
.multi-order-close-title {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.multi-order-close-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.multi-order-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
}
.multi-order-close-btn:hover {
    transform: scale(1.02);
}
.multi-order-close-btn:active {
    transform: scale(0.98);
}
.multi-order-close-btn .material-icons-round {
    font-size: 18px;
}

/* 일괄청산 - 빨강 */
.multi-order-close-btn.all-close {
    background: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.3);
}
/* 현종목 청산 - 주황 */
.multi-order-close-btn.symbol-close {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 10px rgba(243, 156, 18, 0.3);
}
/* 매수만 청산 - 초록 테두리 */
.multi-order-close-btn.buy-close {
    border-color: var(--buy-color);
    color: var(--buy-color);
    background: rgba(0, 180, 80, 0.1);
}
.multi-order-close-btn.buy-close:hover {
    background: rgba(0, 180, 80, 0.2);
}
/* 매도만 청산 - 빨강 테두리 */
.multi-order-close-btn.sell-close {
    border-color: var(--sell-color);
    color: var(--sell-color);
    background: rgba(220, 50, 70, 0.1);
}
.multi-order-close-btn.sell-close:hover {
    background: rgba(220, 50, 70, 0.2);
}
/* 수익만 청산 - 초록 테두리 */
.multi-order-close-btn.profit-close {
    border-color: var(--buy-color);
    color: var(--buy-color);
    background: rgba(0, 180, 80, 0.1);
}
.multi-order-close-btn.profit-close:hover {
    background: rgba(0, 180, 80, 0.2);
}
/* 손실만 청산 - 빨강 테두리 */
.multi-order-close-btn.loss-close {
    border-color: var(--sell-color);
    color: var(--sell-color);
    background: rgba(220, 50, 70, 0.1);
}
.multi-order-close-btn.loss-close:hover {
    background: rgba(220, 50, 70, 0.2);
}

/* ===== 팝업 공통 ===== */
.multi-order-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
}
.multi-order-popup-overlay.show {
    display: flex;
}
.multi-order-popup {
    background: var(--bg-secondary);
    border: 1px solid var(--accent-cyan);
    border-radius: 20px;
    width: 90%;
    max-width: 360px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.2);
}
.multi-order-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}
.multi-order-popup-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.multi-order-popup-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
}
.multi-order-popup-content {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

/* 종목 팝업 */
.multi-order-symbol-popup-list {
    max-height: 300px;
    overflow-y: auto;
}
.multi-order-symbol-popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s;
    margin-bottom: 6px;
}
.multi-order-symbol-popup-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.multi-order-symbol-popup-item.selected {
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

/* 랏수 프리셋 팝업 */
.multi-order-lot-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.multi-order-lot-preset-btn {
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.multi-order-lot-preset-btn:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}

/* SL/TP 팝업 */
.multi-order-sltp-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 4px;
}
.multi-order-sltp-tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.multi-order-sltp-tab.active {
    background: var(--bg-secondary);
    color: var(--accent-cyan);
}
.multi-order-sltp-type-btns {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.multi-order-sltp-type-btn {
    flex: 1;
    padding: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.multi-order-sltp-type-btn.active {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}
.multi-order-sltp-input-group {
    margin-bottom: 16px;
}
.multi-order-sltp-input-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.multi-order-sltp-input-label-text {
    display: flex;
    align-items: center;
    gap: 8px;
}
.multi-order-sltp-input-label-text .indicator {
    width: 4px;
    height: 16px;
    border-radius: 2px;
}
.multi-order-sltp-input-label-text .indicator.tp { background: var(--buy-color); }
.multi-order-sltp-input-label-text .indicator.sl { background: var(--sell-color); }
.multi-order-sltp-input-hint {
    font-size: 10px;
    color: var(--text-muted);
}
.multi-order-sltp-input-field {
    width: 100%;
    padding: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
.multi-order-sltp-input-field:focus {
    outline: none;
    border-color: var(--accent-cyan);
}
.multi-order-sltp-save-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-cyan) 0%, #0099cc 100%);
    border: none;
    border-radius: 12px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.multi-order-sltp-save-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}

/* 스크롤바 */
.multi-order-order-section::-webkit-scrollbar,
.multi-order-symbol-popup-list::-webkit-scrollbar {
    width: 5px;
}
.multi-order-order-section::-webkit-scrollbar-track,
.multi-order-symbol-popup-list::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}
.multi-order-order-section::-webkit-scrollbar-thumb,
.multi-order-symbol-popup-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* 총 손익 바 */
.multi-order-total-pl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.multi-order-total-pl-label {
    font-size: 12px;
    color: var(--text-muted);
}
.multi-order-total-pl-value {
    font-size: 18px;
    font-weight: 700;
}
.multi-order-total-pl-value.positive { color: var(--buy-color); }
.multi-order-total-pl-value.negative { color: var(--sell-color); }

/* ===== V5 추가 스타일 ===== */

/* 청산 섹션 글로우 박스 강화 */
.multi-order-close-section {
    padding: 16px;
    background: linear-gradient(145deg, #12151a 0%, #0a0d12 100%);
    border-radius: 20px !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}
.multi-order-close-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

/* 헤더 섹션 글로우 박스 강화 */
.multi-order-header-section {
    background: linear-gradient(145deg, #12151a 0%, #0a0d12 100%);
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}
.multi-order-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

/* 주문 섹션 글로우 박스 강화 */
.multi-order-order-section {
    background: linear-gradient(145deg, #12151a 0%, #0a0d12 100%);
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: visible;
}
.multi-order-order-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

/* 패널 전체 레이아웃 */
.multi-order-panel.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 드롭다운 위치 수정 */
#multiOrderSymbolDropdown {
    position: absolute;
    top: 60px;
    left: 16px;
    right: 16px;
    z-index: 100;
}

/* ========== Account 탭 v2 ========== */
.account-summary-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.summary-box-v2 {
    background: var(--bg-tertiary);
    border-radius: 9px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.summary-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 3px;
}
.summary-value.positive {
    color: var(--buy-color);
}
.summary-value.negative {
    color: var(--sell-color);
}
.summary-value.neutral {
    color: var(--text-primary);
}

.summary-label {
    font-size: 11px;
    color: var(--text-muted);
}

/* 필터 바 (한 줄) */
.history-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* 인라인 탭 (All/수익/손실) - 가로 확장 */
.history-tabs-inline {
    display: flex;
    gap: 0;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 2px;
    flex: 0 1 auto;
    min-width: 180px;
    max-width: 240px;
}

.history-tab-inline {
    flex: 1;
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.history-tab-inline:hover {
    color: var(--text-primary);
}
.history-tab-inline.active {
    background: var(--bg-secondary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.history-tab-inline[data-filter="all"] {
    font-size: 12px;
}

/* 기간 드롭다운 */
.period-dropdown-container {
    position: relative;
}

.period-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
    justify-content: center;
}
.period-dropdown-btn:hover {
    border-color: var(--accent-cyan);
}

.period-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-cyan);
    border-radius: 8px;
    overflow: hidden;
    z-index: 50;
    min-width: 100px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.period-dropdown.show {
    display: block;
}

.period-option {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.period-option:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}
.period-option.active {
    background: rgba(0, 212, 255, 0.15);
    color: var(--accent-cyan);
}

/* 기간별 서머리 */
.history-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
}

.history-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.history-summary-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.history-summary-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.history-summary-value.positive {
    color: var(--buy-color);
}
.history-summary-value.negative {
    color: var(--sell-color);
}

#summaryVolume {
    font-size: 13px;
}

.history-summary-divider {
    width: 1px;
    height: 30px;
    background: var(--border-color);
}

/* ========== Multi Order V5 패널 ========== */
.multi-v5-panel {
    display: none;
    padding: 4px;
}
.multi-v5-panel.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* V5 글로우 박스 */
.v5-glow-box {
    background: linear-gradient(145deg, #12151a 0%, #0a0d12 100%);
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}
.v5-glow-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

/* V5 헤더 섹션 */
.v5-header-section {
    padding: 16px;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.v5-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
}
.v5-title-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.v5-title-icon {
    width: 40px;
    height: 40px;
    border: 2px solid var(--accent-cyan);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.05);
    color: var(--accent-cyan);
}
.v5-title-text h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-primary);
    margin: 0 0 2px 0;
}
.v5-title-text span {
    font-size: 12px;
    color: var(--accent-cyan);
    letter-spacing: 1px;
}
.v5-title-right {
    text-align: right;
}
.v5-panels-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-cyan);
    font-family: 'Orbitron', sans-serif;
}
.v5-panels-label {
    font-size: 10px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* V5 계좌 그리드 */
.v5-account-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.v5-account-item {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    border: 1px solid var(--border-color);
}
.v5-account-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.v5-account-value.positive { color: var(--buy-color); }
.v5-account-value.negative { color: var(--sell-color); }
.v5-account-label {
    font-size: 10px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* V5 주문 섹션 */
.v5-order-section {
    padding: 16px;
    overflow-y: auto;
    margin-bottom: 8px;
}
.v5-order-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
}

/* V5 종목 헤더 */
.v5-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.v5-symbol-simple {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 0;
    transition: all 0.2s;
}
.v5-symbol-simple:hover {
    opacity: 0.8;
}
.v5-symbol-icon {
    font-size: 20px;
}
.v5-symbol-id {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.v5-symbol-id .material-icons-round {
    font-size: 18px;
    color: var(--text-muted);
}

/* V5 Market/Limit 토글 */
.v5-type-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.v5-toggle-label {
    font-size: 11px;
    color: var(--text-muted);
    transition: color 0.2s;
}
.v5-toggle-label.active {
    color: var(--accent-cyan);
    font-weight: 600;
}
.v5-toggle-switch {
    width: 36px;
    height: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}
.v5-toggle-switch.limit {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--accent-cyan);
}
.v5-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.3s;
}
.v5-toggle-switch.limit::after {
    left: 18px;
    background: var(--accent-cyan);
}

/* V5 지정가 입력 */
.v5-limit-section {
    display: none;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 10px;
    animation: v5SlideDown 0.2s ease;
}
.v5-limit-section.show {
    display: block;
}
@keyframes v5SlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.v5-limit-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.v5-limit-row label {
    font-size: 12px;
    color: var(--accent-cyan);
    font-weight: 600;
    white-space: nowrap;
}
.v5-limit-input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}
.v5-limit-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

/* V5 랏수 */
.v5-lot-section {
    margin-bottom: 12px;
}
.v5-lot-row {
    display: flex;
    gap: 8px;
}
.v5-lot-control {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.v5-lot-btn {
    width: 44px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}
.v5-lot-btn:hover {
    color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}
.v5-lot-input {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 8px;
    outline: none;
}
.v5-lot-settings {
    width: 44px;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.v5-lot-settings:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* V5 주문 버튼 */
.v5-order-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.v5-order-buttons-row {
    display: flex;
    gap: 8px;
}
.v5-order-btn {
    flex: 1;
    padding: 12px 10px;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.v5-order-btn:hover { transform: scale(1.02); }
.v5-order-btn:active { transform: scale(0.98); }
.v5-order-btn.sell {
    background: linear-gradient(135deg, var(--sell-color) 0%, #a52030 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 50, 70, 0.3);
}
.v5-order-btn.buy {
    background: linear-gradient(135deg, var(--buy-color) 0%, #008040 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 180, 80, 0.3);
}
.v5-order-btn-price {
    font-size: 13px;
    font-family: 'Rajdhani', sans-serif;
    opacity: 0.9;
    font-weight: 500;
    letter-spacing: 0;
}
.v5-order-btn.close-position {
    background: linear-gradient(135deg, #5a9ee0 0%, #4080c0 100%);
    color: white;
    font-size: 15px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(74, 144, 217, 0.3);
    flex-direction: row;
    justify-content: center;
}

/* V5 포지션 리스트 */
.v5-position-list {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    display: none;
}
.v5-position-list.has-positions {
    display: block;
}
.v5-position-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.v5-position-title {
    font-size: 11px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.v5-sltp-btn {
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.v5-sltp-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* V5 포지션 아이템 */
.v5-position-wrapper {
    margin-bottom: 8px;
}
.v5-position-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid var(--buy-color);
}
.v5-position-item.sell {
    border-left-color: var(--sell-color);
}
.v5-position-item.has-sltp {
    border-radius: 8px 8px 0 0;
}
.v5-position-type {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 10px;
    min-width: 36px;
    text-align: center;
}
.v5-position-type.buy {
    background: rgba(0, 180, 80, 0.15);
    color: var(--buy-color);
}
.v5-position-type.sell {
    background: rgba(220, 50, 70, 0.15);
    color: var(--sell-color);
}
.v5-position-info {
    flex: 1;
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}
.v5-position-info span {
    color: var(--text-primary);
    font-weight: 600;
}
.v5-position-profit {
    font-size: 13px;
    font-weight: 700;
    margin-right: 8px;
    min-width: 55px;
    text-align: right;
}
.v5-position-profit.positive { color: var(--buy-color); }
.v5-position-profit.negative { color: var(--sell-color); }
.v5-position-close {
    width: 26px;
    height: 26px;
    background: rgba(220, 50, 70, 0.1);
    border: 1px solid rgba(220, 50, 70, 0.3);
    border-radius: 5px;
    color: var(--sell-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.v5-position-close:hover {
    background: var(--sell-color);
    color: white;
}

/* V5 포지션 SL/TP */
.v5-position-sltp {
    display: flex;
    gap: 16px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 8px 8px;
    border-left: 3px solid var(--border-color);
    font-size: 11px;
}
.v5-position-sltp .sl { color: var(--sell-color); }
.v5-position-sltp .tp { color: var(--buy-color); }
.v5-position-sltp .label { color: var(--text-muted); margin-right: 4px; }

/* V5 포지션 빈 상태 */
.v5-position-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 12px;
}

/* V5 패널 추가 버튼 */
.v5-add-panel-btn {
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.v5-add-panel-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* V5 청산 섹션 */
.v5-close-section {
    padding: 14px 16px;
}
.v5-close-main {
    margin-bottom: 10px;
}
.v5-close-all-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(220, 50, 70, 0.3);
}
.v5-close-all-btn:hover { transform: scale(1.02); }
.v5-close-all-btn:active { transform: scale(0.98); }

/* V5 하단 청산 버튼 그룹 */
.v5-close-group {
    display: flex;
    gap: 6px;
}
.v5-close-btn {
    flex: 1;
    padding: 8px 6px;
    background: linear-gradient(180deg, #2d3139 0%, #1a1d23 100%);
    border: 1px solid #3a3f47;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.v5-close-btn:hover {
    transform: translateY(-2px);
}
.v5-close-btn.buy-only,
.v5-close-btn.profit-only {
    color: var(--buy-color);
}
.v5-close-btn.buy-only:hover,
.v5-close-btn.profit-only:hover {
    border-color: var(--buy-color);
    box-shadow: 0 0 15px rgba(0, 180, 80, 0.25);
}
.v5-close-btn.sell-only,
.v5-close-btn.loss-only {
    color: var(--sell-color);
}
.v5-close-btn.sell-only:hover,
.v5-close-btn.loss-only:hover {
    border-color: var(--sell-color);
    box-shadow: 0 0 15px rgba(220, 50, 70, 0.25);
}

/* V5 팝업 */
.v5-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.v5-popup-overlay.show {
    display: flex;
}
.v5-popup {
    background: var(--bg-secondary);
    border: 1px solid var(--accent-cyan);
    border-radius: 16px;
    width: 90%;
    max-width: 340px;
    max-height: 70vh;
    overflow: hidden;
    box-shadow: 0 0 30px var(--accent-cyan-glow);
}
.v5-popup-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.v5-popup-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    gap: 8px;
}
.v5-popup-close {
    width: 30px;
    height: 30px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.v5-popup-content {
    padding: 16px;
    max-height: 55vh;
    overflow-y: auto;
}

/* V5 스크롤바 */
.v5-order-section::-webkit-scrollbar {
    width: 5px;
}
.v5-order-section::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}
.v5-order-section::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* V5 랏수 프리셋 버튼 */
.v5-lot-preset {
    padding: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.v5-lot-preset:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.1);
}

/* V5 패널 삭제 버튼 (인라인 - 헤더 줄에 위치) */
.v5-panel-delete-btn-inline {
    width: 28px;
    height: 28px;
    background: rgba(220, 50, 70, 0.15);
    border: 1px solid rgba(220, 50, 70, 0.4);
    border-radius: 6px;
    color: var(--sell-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: 8px;
}

.v5-panel-delete-btn-inline:hover {
    background: var(--sell-color);
    color: white;
}

.v5-panel-delete-btn-inline .material-icons-round {
    font-size: 16px;
}

/* V5 헤더 오른쪽 그룹 (Market/Limit + 삭제 버튼) */
.v5-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Hero Mode Badge - 박스 제거 + 폰트 스타일 */
#heroModeBadge {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 600 !important;
    font-size: 24px !important;
}

/* ========== 모바일 반응형 (360px 이하) ========== */
@media screen and (max-width: 480px) {
    /* 헤더 */
    .header {
        padding: 4px 10px;
    }
    .header-title {
        font-size: 14px;
    }

    /* 페이지 패딩 */
    .page {
        padding: 10px 0;
    }

    /* 카드 */
    .card {
        padding: 12px;
        border-radius: 10px;
    }

    /* EA 패널 */
    .ea-panel {
        border-radius: 12px;
    }
    .ea-header {
        padding: 12px 15px;
    }
    .ea-content {
        padding: 12px;
    }

    /* 심볼 행 */
    .symbol-row {
        padding: 0;
    }

    /* 통계 바 */
    .stat-item {
        padding: 10px 6px;
    }
    .stat-label {
        font-size: 10px;
    }

    /* 게이지 상태 텍스트 */
    .gauge-status {
        font-size: 21px;
        letter-spacing: 1px;
    }

    /* 인디케이터 카드 */
    .indicator-summary {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 12px;
    }

    /* 지표 아이템 */
    .indicator-item {
        padding: 2px 6px;
    }
    .indicator-count {
        font-size: 22px;
    }
    .indicator-label {
        font-size: 10px;
    }

    /* 타겟 글로우 박스 */
    .target-glow-box {
        padding: 6px 15px 12px 15px;
        margin-bottom: 12px;
    }

    /* 타겟 버튼 위치 */
    .target-display {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    /* 포지션 카드 */
    .position-card {
        padding: 10px 15px;
    }

    /* P/L 게이지 */
    .pl-gauge {
        margin-bottom: 30px;
    }

    /* 타겟 섹션 */
    .target-display {
        gap: 10px;
    }
    .target-label {
        font-size: 10px;
        padding-top: 10px;
    }
    .lot-display {
        font-size: 12px;
    }

    /* 트레이드 버튼 */
    .trade-buttons {
        gap: 8px;
    }

    /* 하단 네비게이션 */
    .nav-item {
        padding: 3px 8px;
        gap: 1px;
    }
    .nav-icon {
        font-size: 18px;
    }
    .nav-label {
        font-size: 9px;
    }

    /* 워치리스트 */
    .watchlist-item {
        padding: 10px 12px;
    }
    .watchlist-symbol {
        font-size: 14px;
    }
    .watchlist-bid {
        font-size: 14px;
    }

    /* 설정 모달 */
    .settings-panel {
        width: 95%;
    }

    /* 프로모션 카드 */
    .promo-card {
        padding: 12px;
    }
    .promo-icon {
        font-size: 26px;
    }
    .promo-title {
        font-size: 13px;
    }
    .promo-desc {
        font-size: 11px;
    }

    /* 웰컴 배너 */
    .welcome-banner {
        padding: 15px;
    }
    .welcome-banner h2 {
        font-size: 16px;
    }

    /* 인사 섹션 */
    .greeting-text {
        font-size: 18px;
    }
    .greeting-sub {
        font-size: 12px;
    }

    /* 수익 요약 */
    .profit-summary {
        padding: 10px 15px;
        gap: 15px;
    }
    .profit-value {
        font-size: 16px;
    }

    /* 계정 요약 */
    .account-summary {
        gap: 8px;
    }
    .summary-box {
        padding: 12px;
    }
    .summary-box .label {
        font-size: 10px;
    }
}

/* ========== 홈 통합 슬라이더 ========== */
.home-slider-container {
    margin-bottom: 15px;
    background: linear-gradient(145deg, #12151a 0%, #0a0d12 100%);
    border-radius: 16px;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
}
/* 상단 시안 그라데이션 라인 */
.home-slider-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    z-index: 1;
}
/* 하단 시안 그라데이션 라인 */
.home-slider-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    z-index: 1;
}

.home-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.home-slider::-webkit-scrollbar {
    display: none;
}

.home-slide {
    min-width: 100%;
    scroll-snap-align: start;
    flex-shrink: 0;
}

.home-slide-content {
    padding: 28px 24px 24px;
    text-align: center;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ===== 카드 1: 인사말 슬라이드 ===== */
.greeting-slide .greeting-section {
    margin-bottom: 16px;
}
.greeting-slide .greeting-text {
    display: block;
    font-size: clamp(30px, 9vw, 38px);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
.greeting-slide .greeting-sub {
    display: block;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 500;
    color: var(--accent-cyan);
    letter-spacing: 0.3px;
}

/* 라이브 CTA (심플 버전) */
.live-cta-simple {
    margin-top: 4px;
    width: 100%;
    max-width: 320px;
}
.live-cta-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}
.live-cta-desc.success {
    color: var(--text-primary);
}
.live-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 24px;
    background: var(--accent-cyan);
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.live-cta-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.4);
}
.live-cta-btn.success {
    background: #00ff88;
}
.live-cta-btn.success:hover {
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.4);
}
.live-cta-btn .material-icons-round {
    font-size: 18px;
}

/* ===== 카드 2: 이용가이드 슬라이드 ===== */
.guide-slide {
    background: linear-gradient(180deg, rgba(138, 43, 226, 0.08) 0%, transparent 100%);
}
.guide-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.15);
    padding: 4px 12px;
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 20px;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3), inset 0 0 8px rgba(0, 212, 255, 0.1);
}
.guide-title {
    font-size: clamp(26px, 7vw, 32px);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}
.guide-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.5;
}
.guide-desc-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #5a9ee0 0%, #4080c0 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(74, 144, 217, 0.4);
}
.guide-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(74, 144, 217, 0.5);
}
.guide-btn .material-icons-round {
    font-size: 18px;
}

/* ===== 카드 3: 셀퍼럴 슬라이드 ===== */
.referral-slide {
    background: linear-gradient(180deg, rgba(0, 255, 136, 0.06) 0%, transparent 100%);
}
.referral-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.referral-highlight {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}
.referral-amount {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(32px, 10vw, 42px);
    font-weight: 700;
    color: #00ff88;
}
.referral-unit {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}
.referral-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 18px;
    line-height: 1.5;
}
.referral-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 20px;
    color: #00ff88;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.referral-btn:hover {
    background: rgba(0, 255, 136, 0.25);
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}
.referral-btn .material-icons-round {
    font-size: 16px;
}

/* ===== 홈 슬라이더 인디케이터 ===== */
.home-slider-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 0 18px;
}
.home-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s;
}
.home-dot.active {
    background: var(--accent-cyan);
    width: 24px;
    border-radius: 4px;
}

/* ===== 모바일 반응형 ===== */
@media screen and (max-width: 360px) {
    .home-slide-content {
        padding: 24px 18px 20px;
        min-height: 150px;
    }
    .greeting-slide .greeting-text {
        font-size: 24px;
    }
    .greeting-slide .greeting-sub {
        font-size: 13px;
    }
    .guide-title {
        font-size: 24px;
    }
}

/* ========== FUMA 패널 모바일 최적화 (Galaxy S20 360x800) ========== */
@media screen and (max-width: 400px) {
    /* EA 패널 전체 */
    .ea-panel {
        border-radius: 10px;
        border-width: 1px;
    }
    .ea-header {
        padding: 10px 15px;
    }
    .ea-title {
        font-size: 15px;
        letter-spacing: 1px;
    }
    .ea-content {
        padding: 10px;
    }
    .ea-footer {
        padding: 6px;
        font-size: 10px;
    }

    /* 심볼 행 */
    .symbol-row {
        padding: 8px 40px 8px 10px;
        margin-bottom: 10px;
        border-radius: 8px;
    }
    .symbol-text {
        font-size: 18px;
    }
    .symbol-icon {
        font-size: 20px;
    }

    /* Stats Bar */
    .stats-bar {
        margin-bottom: 10px;
        border-radius: 8px;
    }
    .stat-item {
        padding: 8px 4px;
    }
    .stat-label {
        font-size: 10px;
        margin-bottom: 2px;
    }
    .stat-value {
        font-size: 13px;
    }

    /* 게이지 - 핵심 축소 */
    .gauge-container {
        padding: 5px 0;
        margin-bottom: 10px;
    }
    .gauge-container svg {
        width: 240px !important;
        height: 100px !important;
    }
    .gauge-status {
        font-size: 18px;
        letter-spacing: 1px;
        margin-top: 3px;
    }

    /* 인디케이터 */
    .indicator-summary {
        margin-bottom: 12px;
        border-radius: 8px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .indicator-item {
        padding: 2px 6px;
    }
    .indicator-count {
        font-size: 20px;
    }
    .indicator-label {
        font-size: 10px;
    }

    /* 타겟 글로우 박스 */
    .target-glow-box {
        padding: 6px 12px 10px 12px;
        margin-bottom: 10px;
    }

    /* 타겟 버튼 위치 */
    .target-display {
        width: 78%;
        margin-left: auto;
        margin-right: auto;
    }

    /* 포지션 카드 */
    .position-card {
        padding: 8px 12px;
    }

    /* P/L 게이지 */
    .pl-gauge {
        margin-bottom: 28px;
    }

    /* 타겟 섹션 */
    .target-section {
        margin-bottom: 10px;
    }
    .target-label {
        font-size: 10px;
        margin-bottom: 5px;
        padding-top: 10px;
    }
    .target-display {
        gap: 10px;
        margin-bottom: 6px;
    }
    .target-btn {
        width: 36px;
        height: 34px;
        font-size: 16px;
        border-radius: 6px;
    }
    .target-value {
        font-size: 26px;
        min-width: 100px;
    }
    .lot-display {
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 6px;
        margin-top: -5px;
    }

    /* 슬라이더 */
    .slider-container {
        margin-bottom: 0px;
    }
    input[type="range"] {
        height: 6px;
    }
    input[type="range"]::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }
    .slider-labels {
        margin-top: 5px;
        font-size: 10px;
    }

    /* 트레이드 버튼 */
    .trade-buttons {
        gap: 8px;
    }
    .trade-btn {
        padding: 6px;
        font-size: 14px;
        letter-spacing: 1px;
        border-radius: 8px;
    }
}

/* ========== 차트 로딩 오버레이 (지표 변경 시 번쩍임 방지) ========== */
.chart-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #131722;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chart-loading-overlay.active {
    display: flex;
    opacity: 1;
}

.chart-loading-overlay.fade-out {
    opacity: 0;
}

.chart-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.chart-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 212, 255, 0.2);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: chartSpinner 0.8s linear infinite;
}

@keyframes chartSpinner {
    to { transform: rotate(360deg); }
}

.chart-loading-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
}

/* ===== MT5 연결 스텝 가이드 ===== */
.mt5-step-guide {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 16px 16px 12px;
}
.mt5-step-item {
    display: flex;
    gap: 14px;
    padding-bottom: 16px;
    position: relative;
}
/* 타임라인 세로줄 */
.mt5-step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(0, 212, 255, 0.4), rgba(0, 212, 255, 0.1));
}
.mt5-step-number {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: linear-gradient(135deg, #00b4d8, #00d4ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    z-index: 1;
}
.mt5-step-content {
    padding-top: 4px;
}
.mt5-step-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.mt5-step-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ===== PWA 설치 슬라이드 ===== */
.pwa-slide {
    background: linear-gradient(180deg, rgba(0,212,255,0.07) 0%, transparent 100%);
}
.pwa-platform {
    display: flex; align-items: center; gap: 9px;
    font-size: 16px; font-weight: 700;
    color: var(--accent-cyan); letter-spacing: 0.3px;
    margin: 0 0 22px 0;
}
.pwa-platform .material-icons-round { font-size: 19px; }
.pwa-platform-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(0,212,255,0.45); }
.pwa-lines {
    display: flex; flex-direction: column; gap: 6px;
    margin: 0;
}
.pwa-line-sm {
    font-size: 15px; font-weight: 600;
    color: var(--text-muted); letter-spacing: -0.1px;
    line-height: 1.3;
}
.pwa-line-lg {
    font-size: clamp(26px, 7.5vw, 32px); font-weight: 700;
    color: #ffffff; line-height: 1.2; letter-spacing: -0.3px;
}
.pwa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #00c8f0 0%, #0098c8 50%, #0078aa 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff; font-size: 14px; font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(0,212,255,0.3), 0 1px 0 rgba(255,255,255,0.15) inset;
    letter-spacing: 0.2px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}
.pwa-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
    border-radius: 10px 10px 0 0;
}
.pwa-btn:active {
    box-shadow: 0 2px 10px rgba(0,212,255,0.3);
    transform: scale(0.98);
}
.pwa-btn .material-icons-round { font-size: 16px; position: relative; }
.pwa-btn span:last-child { position: relative; }