/* ============================================================
 * 마켓 공통 UI — 토스트 알림 + Confirm 모달
 * (futures, trade 양쪽에서 공유)
 * ============================================================ */
:root {
    --mui-bg-1: #11141a;
    --mui-bg-2: #1a1f27;
    --mui-line: #2a313a;
    --mui-line-2: #3a424c;
    --mui-ink-0: #ffffff;
    --mui-ink-1: #eaecef;
    --mui-ink-2: #b7bdc6;
    --mui-ink-3: #848e9c;
    --mui-accent: #a259ff;
    --mui-green: #0ecb81;
    --mui-red: #f6465d;
    --mui-yellow: #f0b90b;
}

/* ── 토스트 컨테이너 ── */
#muiToastContainer {
    position: fixed; bottom: 28px; left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex; flex-direction: column; gap: 12px;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}
.mui-toast {
    pointer-events: auto;
    background: linear-gradient(135deg, var(--mui-bg-2) 0%, var(--mui-bg-1) 100%);
    border: 1px solid var(--mui-line-2);
    border-left: 5px solid var(--mui-accent);
    border-radius: 12px;
    padding: 16px 22px 16px 18px;
    min-width: 340px; max-width: 560px;
    color: var(--mui-ink-1);
    font-size: 14px;
    display: flex; align-items: flex-start; gap: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset;
    opacity: 0; transform: translateY(24px) scale(.95);
    transition: opacity .28s cubic-bezier(.2,.9,.3,1.2), transform .28s cubic-bezier(.2,.9,.3,1.2);
    cursor: default;
    position: relative;
    overflow: hidden;
}
.mui-toast.is-on { opacity: 1; transform: translateY(0) scale(1); }
.mui-toast.is-off { opacity: 0; transform: translateY(-12px) scale(.96); }
.mui-toast-ic {
    font-size: 26px; flex: 0 0 auto; line-height: 1;
    margin-top: -2px; font-weight: 800; letter-spacing: -.02em;
}
.mui-toast-body { flex: 1; min-width: 0; }
.mui-toast-title { font-weight: 800; font-size: 14px; margin-bottom: 4px; color: #fff; letter-spacing: -.01em; }
.mui-toast-msg { font-size: 13px; line-height: 1.5; color: var(--mui-ink-2); }
.mui-toast-msg b { color: var(--mui-ink-0); font-weight: 700; }
.mui-toast-x {
    background: transparent; border: 0;
    color: var(--mui-ink-3); font-size: 22px; line-height: 1;
    cursor: pointer; padding: 0 2px; flex: 0 0 auto;
    transition: color .15s;
}
.mui-toast-x:hover { color: #fff; }
.mui-toast-bar {
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--mui-accent);
    transform-origin: left;
    animation: muiToastBar linear forwards;
}
@keyframes muiToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.mui-toast-success { border-left-color: var(--mui-green); }
.mui-toast-success .mui-toast-ic, .mui-toast-success .mui-toast-bar { color: var(--mui-green); background: var(--mui-green); }
.mui-toast-success .mui-toast-title { color: var(--mui-green); }

.mui-toast-error { border-left-color: var(--mui-red); }
.mui-toast-error .mui-toast-ic, .mui-toast-error .mui-toast-bar { color: var(--mui-red); background: var(--mui-red); }
.mui-toast-error .mui-toast-title { color: var(--mui-red); }

.mui-toast-warn { border-left-color: var(--mui-yellow); }
.mui-toast-warn .mui-toast-ic, .mui-toast-warn .mui-toast-bar { color: var(--mui-yellow); background: var(--mui-yellow); }
.mui-toast-warn .mui-toast-title { color: var(--mui-yellow); }

.mui-toast-long {
    border-left-color: var(--mui-green);
    background: linear-gradient(135deg, rgba(14,203,129,.16) 0%, var(--mui-bg-1) 60%);
}
.mui-toast-long .mui-toast-ic, .mui-toast-long .mui-toast-bar { color: var(--mui-green); background: var(--mui-green); }
.mui-toast-long .mui-toast-title { color: var(--mui-green); font-size: 15px; letter-spacing: .02em; }

.mui-toast-short {
    border-left-color: var(--mui-red);
    background: linear-gradient(135deg, rgba(246,70,93,.16) 0%, var(--mui-bg-1) 60%);
}
.mui-toast-short .mui-toast-ic, .mui-toast-short .mui-toast-bar { color: var(--mui-red); background: var(--mui-red); }
.mui-toast-short .mui-toast-title { color: var(--mui-red); font-size: 15px; letter-spacing: .02em; }

.mui-toast-pnl {
    border-left-color: var(--mui-accent);
    background: linear-gradient(135deg, rgba(162,89,255,.14) 0%, var(--mui-bg-1) 60%);
}
.mui-toast-pnl .mui-toast-ic, .mui-toast-pnl .mui-toast-bar { color: var(--mui-accent); background: var(--mui-accent); }
.mui-toast-pnl .mui-toast-title { color: #c490ff; }

.mui-toast-buy { /* 현물 매수 */
    border-left-color: var(--mui-green);
    background: linear-gradient(135deg, rgba(14,203,129,.12) 0%, var(--mui-bg-1) 60%);
}
.mui-toast-buy .mui-toast-ic, .mui-toast-buy .mui-toast-bar { color: var(--mui-green); background: var(--mui-green); }
.mui-toast-buy .mui-toast-title { color: var(--mui-green); }

.mui-toast-sell { /* 현물 매도 */
    border-left-color: var(--mui-red);
    background: linear-gradient(135deg, rgba(246,70,93,.12) 0%, var(--mui-bg-1) 60%);
}
.mui-toast-sell .mui-toast-ic, .mui-toast-sell .mui-toast-bar { color: var(--mui-red); background: var(--mui-red); }
.mui-toast-sell .mui-toast-title { color: var(--mui-red); }


/* ============================================================
 * Confirm 모달
 * ============================================================ */
body.mui-modal-open { overflow: hidden; }

.mui-confirm {
    position: fixed; inset: 0;
    z-index: 100001;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.mui-confirm.is-on { display: flex; animation: muiCfmIn .18s ease-out; }
@keyframes muiCfmIn { from { opacity: 0; } to { opacity: 1; } }

.mui-cfm-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(6px);
}
.mui-cfm-box {
    position: relative;
    width: 100%; max-width: 460px;
    background: linear-gradient(180deg, var(--mui-bg-2) 0%, var(--mui-bg-1) 100%);
    border: 1px solid var(--mui-line-2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.8);
    transform: translateY(20px) scale(.96);
    opacity: 0;
    transition: transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .25s;
}
.mui-confirm.is-on .mui-cfm-box { transform: translateY(0) scale(1); opacity: 1; }

.mui-cfm-accent {
    height: 4px;
    background: var(--mui-accent);
}
.mui-cfm-long .mui-cfm-accent { background: linear-gradient(90deg, var(--mui-green), #07a86b); }
.mui-cfm-short .mui-cfm-accent { background: linear-gradient(90deg, var(--mui-red), #cf304a); }
.mui-cfm-buy .mui-cfm-accent { background: var(--mui-green); }
.mui-cfm-sell .mui-cfm-accent { background: var(--mui-red); }

.mui-cfm-head {
    padding: 22px 26px 12px;
    display: flex; align-items: center; gap: 14px;
}
.mui-cfm-ic {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800;
    flex-shrink: 0;
}
.mui-cfm-long .mui-cfm-ic { background: rgba(14,203,129,.15); color: var(--mui-green); border: 1px solid rgba(14,203,129,.4); }
.mui-cfm-short .mui-cfm-ic { background: rgba(246,70,93,.15); color: var(--mui-red); border: 1px solid rgba(246,70,93,.4); }
.mui-cfm-buy .mui-cfm-ic { background: rgba(14,203,129,.15); color: var(--mui-green); border: 1px solid rgba(14,203,129,.4); }
.mui-cfm-sell .mui-cfm-ic { background: rgba(246,70,93,.15); color: var(--mui-red); border: 1px solid rgba(246,70,93,.4); }
.mui-cfm-default .mui-cfm-ic { background: rgba(162,89,255,.15); color: var(--mui-accent); border: 1px solid rgba(162,89,255,.4); }
.mui-cfm-danger .mui-cfm-ic { background: rgba(246,70,93,.15); color: var(--mui-red); border: 1px solid rgba(246,70,93,.4); }

.mui-cfm-title {
    font-size: 18px; font-weight: 800;
    color: #fff; letter-spacing: -.01em;
    margin: 0;
}

.mui-cfm-body {
    padding: 0 26px 22px;
    color: var(--mui-ink-2);
    font-size: 14px; line-height: 1.6;
    max-height: 50vh; overflow-y: auto;
}
.mui-cfm-body b { color: var(--mui-ink-0); font-weight: 700; }
.mui-cfm-body table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.mui-cfm-body table td {
    padding: 8px 0; border-bottom: 1px dashed var(--mui-line);
    font-size: 13px;
}
.mui-cfm-body table td:first-child { color: var(--mui-ink-3); }
.mui-cfm-body table td:last-child { color: var(--mui-ink-1); text-align: right; font-weight: 700; }

.mui-cfm-foot {
    padding: 16px 26px 22px;
    display: flex; gap: 10px; justify-content: flex-end;
    background: rgba(0,0,0,.2);
    border-top: 1px solid var(--mui-line);
}
.mui-cfm-btn {
    padding: 11px 22px;
    border: 0; border-radius: 9px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, background .12s;
    min-width: 92px;
}
.mui-cfm-btn:hover { transform: translateY(-1px); }
.mui-cfm-btn:active { transform: translateY(0); }
.mui-cfm-btn-cancel {
    background: var(--mui-line);
    color: var(--mui-ink-2);
}
.mui-cfm-btn-cancel:hover { background: var(--mui-line-2); color: #fff; }
.mui-cfm-btn-ok {
    background: var(--mui-accent); color: #fff;
    box-shadow: 0 4px 14px rgba(162,89,255,.4);
}
.mui-cfm-long .mui-cfm-btn-ok {
    background: linear-gradient(180deg, var(--mui-green), #089f6b);
    box-shadow: 0 4px 14px rgba(14,203,129,.45);
}
.mui-cfm-short .mui-cfm-btn-ok {
    background: linear-gradient(180deg, var(--mui-red), #cf304a);
    box-shadow: 0 4px 14px rgba(246,70,93,.45);
}
.mui-cfm-buy .mui-cfm-btn-ok {
    background: linear-gradient(180deg, var(--mui-green), #089f6b);
    box-shadow: 0 4px 14px rgba(14,203,129,.45);
}
.mui-cfm-sell .mui-cfm-btn-ok {
    background: linear-gradient(180deg, var(--mui-red), #cf304a);
    box-shadow: 0 4px 14px rgba(246,70,93,.45);
}
.mui-cfm-danger .mui-cfm-btn-ok {
    background: linear-gradient(180deg, var(--mui-red), #cf304a);
    box-shadow: 0 4px 14px rgba(246,70,93,.45);
}

@media (max-width: 540px) {
    .mui-toast { min-width: 280px; }
    .mui-cfm-head { padding: 18px 18px 10px; }
    .mui-cfm-body, .mui-cfm-foot { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
 * 다크 셸 (현물/선물/초단타에서 글로벌 헤더·티커·푸터 다크화)
 * body.spk-dark-shell 가 있을 때만 적용
 * ============================================================ */

/* 페이지 배경 — 어두운 무드 */
body.spk-dark-shell {
    background: #0a0c10 !important;
    color: #eaecef;
}

/* 트레이딩 페이지 (선물/현물/초단타) — main 이 GNB 바로 아래에 붙도록 */
body.spk-dark-shell .spk-ticker-wrap { display: none !important; }
/* GNB 는 항상 화면 상단에 sticky (메뉴 사용 위해) — 기본 sticky 그대로 유지 */
body.spk-dark-shell .spk-shell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.spk-dark-shell .spk-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
    gap: 0 !important;
}
body.spk-dark-shell .fx-wrap,
body.spk-dark-shell .tx-wrap {
    margin: 0 !important;
    padding-top: 0 !important;
}
body.spk-dark-shell .fx-header,
body.spk-dark-shell .tx-header { margin-top: 0 !important; }

/* fx-header / tx-header — 평범하게 노출 (스크롤 업 시 보임) */
body.spk-dark-shell .fx-header,
body.spk-dark-shell .tx-header {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-left: 0; border-right: 0;
}
/* 탭바 sticky — GNB 바로 아래 위치 (GNB 높이 56px) */
body.spk-dark-shell .fx-tabs,
body.spk-dark-shell .tx-tabs {
    position: sticky;
    top: 56px;
    z-index: 55;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* 상단 종목 티커 */
body.spk-dark-shell .spk-ticker-wrap {
    background: #0c0f14 !important;
    border-bottom: 1px solid #1e2329;
}
body.spk-dark-shell .spk-ticker-item { color: #b7bdc6; }
body.spk-dark-shell .spk-ticker-league { color: #848e9c; }
body.spk-dark-shell .spk-ticker-team { color: #eaecef; }
body.spk-dark-shell .spk-ticker-score { color: #b7bdc6; }

/* 글로벌 헤더 */
body.spk-dark-shell .spk-header {
    background: rgba(11, 14, 17, .94) !important;
    border-bottom: 1px solid #1e2329 !important;
    backdrop-filter: blur(14px);
}

/* 로고 (밝은 PNG 가 어두운 배경에서 묻히지 않도록 살짝 강조) */
body.spk-dark-shell .spk-logo img {
    filter: drop-shadow(0 0 8px rgba(255,255,255,.15));
}
body.spk-dark-shell .spk-logo span { color: #c490ff; }

/* GNB 메뉴 텍스트 */
body.spk-dark-shell .spk-gnb-item > a {
    color: #b7bdc6 !important;
    transition: color .15s, background .15s;
}
body.spk-dark-shell .spk-gnb-item:hover > a {
    background: rgba(162, 89, 255, .14) !important;
    color: #c490ff !important;
}

/* GNB 드롭다운 */
body.spk-dark-shell .spk-dropdown {
    background: #181c23 !important;
    border-color: #2a313a !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.7);
}
body.spk-dark-shell .spk-dropdown a {
    color: #b7bdc6 !important;
}
body.spk-dark-shell .spk-dropdown a:hover {
    background: rgba(162, 89, 255, .14) !important;
    color: #c490ff !important;
}

/* 헤더 우측 액션 버튼들 */
body.spk-dark-shell .spk-action-button.is-secondary {
    background: #1f242c !important;
    color: #eaecef !important;
    border: 1px solid #2a313a;
}
body.spk-dark-shell .spk-action-button.is-secondary:hover {
    background: #2a313a !important;
}
body.spk-dark-shell .spk-action-button.is-primary {
    background: linear-gradient(135deg, #a259ff, #6e2ed6) !important;
    box-shadow: 0 6px 16px rgba(162,89,255,.3) !important;
}

/* 모바일 햄버거 */
body.spk-dark-shell .spk-mobile-burger { color: #eaecef; }

/* 사이드바 / 카드 (풀스크린 모드 아닐 때 — guide·position·history·leaderboard 등) */
body.spk-dark-shell:not(.tx-fullscreen):not(.fx-fullscreen) .spk-card,
body.spk-dark-shell:not(.tx-fullscreen):not(.fx-fullscreen) .spk-section,
body.spk-dark-shell:not(.tx-fullscreen):not(.fx-fullscreen) .spk-hero,
body.spk-dark-shell:not(.tx-fullscreen):not(.fx-fullscreen) .spk-promo-banner,
body.spk-dark-shell:not(.tx-fullscreen):not(.fx-fullscreen) .spk-quick-card {
    background: #11141a !important;
    border-color: #2a313a !important;
    color: #eaecef;
}
body.spk-dark-shell:not(.tx-fullscreen):not(.fx-fullscreen) .spk-card-head,
body.spk-dark-shell:not(.tx-fullscreen):not(.fx-fullscreen) .spk-section-head {
    background: linear-gradient(135deg, #a259ff, #6e2ed6) !important;
    border-bottom: 1px solid #2a313a;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
body.spk-dark-shell:not(.tx-fullscreen):not(.fx-fullscreen) .spk-empty {
    color: #848e9c;
}

/* 사이드바 로그인 폼 */
body.spk-dark-shell .spk-login-form input[type="text"],
body.spk-dark-shell .spk-login-form input[type="password"] {
    background: #0c0f14 !important;
    border-color: #2a313a !important;
    color: #eaecef !important;
}
body.spk-dark-shell .spk-login-form input:focus {
    border-color: #a259ff !important;
    box-shadow: 0 0 0 3px rgba(162,89,255,.2) !important;
}
body.spk-dark-shell .spk-login-form button {
    background: linear-gradient(135deg, #a259ff, #6e2ed6) !important;
}

/* 푸터 */
body.spk-dark-shell .spk-footer {
    background: #0c0f14 !important;
    border-top: 1px solid #1e2329 !important;
    color: #848e9c;
}
body.spk-dark-shell .spk-footer a { color: #b7bdc6; }
body.spk-dark-shell .spk-footer a:hover { color: #c490ff; }

/* 모바일 메뉴 패널 (스카-모바일-네비) — 글로벌 컴포넌트 다크화 */
body.spk-dark-shell .spk-mobile-nav {
    background: #11141a !important;
    color: #eaecef;
}
body.spk-dark-shell .spk-mobile-nav a { color: #b7bdc6; }

/* ============================================================
 * 이용설명 가이드 모달 (spkGuide)
 * ============================================================ */
.mui-guide {
    position: fixed; inset: 0;
    z-index: 99980;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.mui-guide.is-on { display: flex; }
.mui-guide-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.74);
    backdrop-filter: blur(4px);
    animation: muiGuideFade .18s ease-out;
}
@keyframes muiGuideFade { from { opacity: 0; } to { opacity: 1; } }
.mui-guide-box {
    position: relative;
    background: linear-gradient(180deg, var(--mui-bg-2) 0%, var(--mui-bg-1) 100%);
    border: 1px solid var(--mui-line-2);
    border-radius: 14px;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
    color: var(--mui-ink-1);
    animation: muiGuideUp .26s cubic-bezier(.2,.9,.3,1.2);
    overflow: hidden;
}
@keyframes muiGuideUp {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mui-guide-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--mui-line);
    background: linear-gradient(135deg, rgba(162,89,255,.15), rgba(14,203,129,.08));
}
.mui-guide-title-wrap { display: flex; align-items: center; gap: 12px; }
.mui-guide-ic { font-size: 22px; line-height: 1; }
.mui-guide-title { font-size: 17px; font-weight: 800; margin: 0; color: var(--mui-ink-0); }
.mui-guide-x {
    background: transparent; border: 0;
    color: var(--mui-ink-2);
    font-size: 28px; line-height: 1; cursor: pointer;
    padding: 0 4px;
    transition: color .15s, transform .15s;
}
.mui-guide-x:hover { color: var(--mui-ink-0); transform: rotate(90deg); }
.mui-guide-body {
    flex: 1 1 auto;
    padding: 20px 24px;
    overflow-y: auto;
    font-size: 14px; line-height: 1.65;
    color: var(--mui-ink-1);
}
.mui-guide-body::-webkit-scrollbar { width: 8px; }
.mui-guide-body::-webkit-scrollbar-track { background: transparent; }
.mui-guide-body::-webkit-scrollbar-thumb { background: #2a313a; border-radius: 4px; }
.mui-guide-body::-webkit-scrollbar-thumb:hover { background: #3a424c; }

.mui-guide-body h4 {
    font-size: 15px; font-weight: 800;
    margin: 22px 0 10px;
    padding-left: 10px;
    border-left: 3px solid var(--mui-accent);
    color: var(--mui-ink-0);
}
.mui-guide-body h4:first-child { margin-top: 0; }
.mui-guide-body p { margin: 8px 0; color: var(--mui-ink-1); }
.mui-guide-body b, .mui-guide-body strong { color: var(--mui-ink-0); font-weight: 700; }
.mui-guide-body code {
    background: var(--mui-bg-1);
    border: 1px solid var(--mui-line);
    color: var(--mui-yellow);
    padding: 2px 6px; border-radius: 4px;
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
}
.mui-guide-body ul, .mui-guide-body ol {
    margin: 10px 0; padding-left: 22px; color: var(--mui-ink-1);
}
.mui-guide-body li { margin: 6px 0; }
.mui-guide-body table {
    width: 100%; border-collapse: collapse;
    margin: 10px 0;
    background: var(--mui-bg-1);
    border-radius: 8px; overflow: hidden;
    font-size: 13px;
}
.mui-guide-body th, .mui-guide-body td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mui-line);
    text-align: left;
    vertical-align: top;
}
.mui-guide-body th { background: var(--mui-bg-2); color: var(--mui-ink-0); font-weight: 700; width: 130px; }
.mui-guide-body tr:last-child th, .mui-guide-body tr:last-child td { border-bottom: 0; }
.mui-guide-body .mui-g-card {
    background: var(--mui-bg-1);
    border: 1px solid var(--mui-line);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0;
}
.mui-guide-body .mui-g-card.is-warn  { border-color: rgba(240,185,11,.4); background: rgba(240,185,11,.06); }
.mui-guide-body .mui-g-card.is-long  { border-color: rgba(14,203,129,.35); background: rgba(14,203,129,.05); }
.mui-guide-body .mui-g-card.is-short { border-color: rgba(246,70,93,.35);  background: rgba(246,70,93,.05); }
.mui-guide-body .mui-g-card.is-info  { border-color: rgba(162,89,255,.4);  background: rgba(162,89,255,.06); }
.mui-guide-body .mui-g-card.is-danger{ border-color: rgba(246,70,93,.5);   background: rgba(246,70,93,.08); }
.mui-guide-body .mui-g-card-title { font-weight: 800; color: var(--mui-ink-0); margin-bottom: 6px; display: block; }
.mui-guide-body .mui-g-eq {
    display: block;
    background: #0a0c10;
    border: 1px dashed var(--mui-line-2);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 8px 0;
    font-family: 'Consolas', monospace;
    font-size: 12.5px;
    color: var(--mui-yellow);
}
.mui-guide-body .mui-g-pos { color: var(--mui-green); font-weight: 700; }
.mui-guide-body .mui-g-neg { color: var(--mui-red);   font-weight: 700; }

.mui-guide-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--mui-line);
    background: var(--mui-bg-1);
}
.mui-guide-link {
    color: var(--mui-accent);
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    transition: color .15s;
}
.mui-guide-link:hover { color: #c490ff; text-decoration: underline; }
.mui-guide-close {
    background: var(--mui-accent);
    color: #fff;
    border: 0;
    padding: 9px 22px;
    border-radius: 8px;
    font-size: 13px; font-weight: 800;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.mui-guide-close:hover { background: #b370ff; }
.mui-guide-close:active { transform: scale(.97); }

/* CSV 다운로드 버튼 (현물·선물 history 공용) */
.mui-csv-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(14, 203, 129, .12);
    border: 1px solid rgba(14, 203, 129, .4);
    color: var(--mui-green);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.mui-csv-btn:hover {
    background: rgba(14, 203, 129, .22);
    border-color: var(--mui-green);
    color: #5dd9a8;
    text-decoration: none;
}
.mui-csv-btn:active { transform: scale(.97); }

/* 트리거 버튼 (각 거래소 상단에 두는 헬프 버튼) */
.mui-guide-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(162, 89, 255, .12);
    border: 1px solid rgba(162, 89, 255, .35);
    color: var(--mui-accent);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.mui-guide-trigger:hover {
    background: rgba(162, 89, 255, .22);
    border-color: var(--mui-accent);
    color: #c490ff;
}
.mui-guide-trigger .mui-gt-ic { font-size: 14px; }

@media (max-width: 720px) {
    .mui-guide { padding: 0; }
    .mui-guide-box { max-height: 100vh; border-radius: 0; max-width: 100%; }
    .mui-guide-body { padding: 16px 18px; font-size: 13.5px; }
    .mui-guide-body th { width: 110px; }
}