/* style.css */

/* =========================================
   전역 스크롤바 커스텀 (다크 테마)
========================================= */

/* Firefox 브라우저 지원 */
* {
    scrollbar-width: thin;
    scrollbar-color: #474d57 #181a20;
}

/* Webkit 브라우저 (Chrome, Edge, Safari 등) 지원 */
::-webkit-scrollbar {
    width: 8px;  /* 세로 스크롤바 두께 */
    height: 8px; /* 가로 스크롤바 두께 */
}

/* 스크롤바 바탕(트랙) */
::-webkit-scrollbar-track {
    background: #181a20; 
}

/* 스크롤바 막대(썸) */
::-webkit-scrollbar-thumb {
    background: #474d57; 
    border-radius: 4px;
}

/* 스크롤바 막대 마우스 오버 시 */
::-webkit-scrollbar-thumb:hover {
    background: #848e9c; /* 약간 더 밝은 회색으로 하이라이트 */
}

/* 가로/세로 스크롤바가 교차하는 우측 하단 모서리 */
::-webkit-scrollbar-corner {
    background: #181a20;
}

/* =========================================
   1. 기본 초기화 (Global Reset)
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: #181a20;
    color: #eaecef;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    
    flex-direction: column;
    height: 100vh;
}

/* =========================================
   2. 상단 헤더 및 컨트롤 영역
========================================= */
/* 구버전 헤더 (호환성을 위해 유지) */
.header {
    background-color: #181a20;
    border-bottom: 1px solid #2b3139;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 신규 차트 헤더 (데스크탑) */
.chart-header {
    display: flex;
    width:100%;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: #181a20;
    border-bottom: 1px solid #2b3139;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.asset-buttons, .timeframe-buttons {
    display: flex;
    gap: 6px;
}

/* 상단 버튼 공통 스타일 (구버전 중복 통합) */
.asset-buttons button, .timeframe-buttons button {
    background-color: #2b3139;
    color: #eaecef;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s, opacity 0.2s;
}

.asset-buttons button:hover, .timeframe-buttons button:hover {
    opacity: 0.8;
}

.asset-buttons button.active, .timeframe-buttons button.active {
    background-color: #fcd535 !important;
    color: #181a20 !important;
}

/* 현재가 표시 영역 */
.header-price-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    font-weight: bold;
    margin-left: auto!important; /* 우측 끝으로 밀어냄 */
    padding-right: 15px;
}

.ticker-info {
    display: flex;
    gap: 20px;
    font-size: 14px;
}

.ticker-name { color: #eaecef; }
.ticker-price { font-size: 20px; font-weight: bold; color: #0ecb81; }
.down-color { color: #f6465d !important; }
.up-color { color: #0ecb81 !important; }

/* =========================================
   3. 메인 레이아웃 및 차트
========================================= */
/* 좌측 차트, 우측 호가창 (중복 속성 통합) */
.main-container {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: row;
    width: 100%;
    position: relative;
    background: url('https://images.unsplash.com/photo-1608222351212-18fe0ec7b13b?q=80&w=1920&auto=format&fit=crop') center center / cover no-repeat;
}

.chart-and-order {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

#chart-container {
    flex: 1;
    position: relative;
    background-color: #181a20;
    overflow: hidden;
    min-height: 300px;
}

/* =========================================
   4. 우측 호가창 (Order Book)
========================================= */
/* 중복 속성 통합 */
.order-book {
    width: 320px;
    background-color: #181a20;
    border-left: 1px solid #2b3139;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    overflow-y: auto;
}

.ob-header {
    display: flex;
    padding: 10px;
    color: #848e9c;
    border-bottom: 1px solid #2b3139;
}
.ob-header span { flex: 1; text-align: right; }
.ob-header span:first-child { text-align: left; }

.ob-list { flex: 1; overflow-y: hidden; display: flex; flex-direction: column; padding: 5px 0; }
.ob-row {
    display: flex;
    padding: 2px 10px;
    cursor: pointer;
}
.ob-row:hover { background-color: #2b3139; }
.ob-row span { flex: 1; text-align: right; }
.ob-row span:first-child { text-align: left; }
.ob-sell span:first-child { color: #f6465d; }
.ob-buy span:first-child { color: #0ecb81; }

.ob-center {
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-top: 1px solid #2b3139;
    border-bottom: 1px solid #2b3139;
}

/* =========================================
   5. 주문(베팅) 패널 (데스크탑/모바일 공통 베이스)
========================================= */
/* 💡 모바일용 토글 핸들은 데스크탑에서 숨김 */
.mobile-panel-toggle { display: none; }
/* 데스크탑에서는 내부 래퍼(content)가 flex 흐름을 그대로 유지하게 함 */
.trading-panel-content { display: contents; } 

.trading-panel {
    background-color: #1e2329;
    border-top: 1px solid #2b3139;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.panel-header { font-size: 14px; color: #848e9c; text-align:right }
.money-val { color: #eaecef; font-weight: bold; font-size: 16px; margin-left: 10px; }

.panel-body {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.panel-body input {
    flex: 1;
    background-color: #2b3139;
    border: 1px solid #474d57;
    color: #eaecef;
    padding: 10px;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
}
.panel-body input:focus { border-color: #fcd535; }

.panel-body button {
    width: 150px;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    transition: opacity 0.2s;
}
.panel-body button:hover { opacity: 0.8; }

.btn-buy { background-color: #0ecb81; }
.btn-sell { background-color: #f6465d; }
.btn-group { display: flex; gap: 10px; flex: 1; }
.btn-group button { flex: 1; }

/* =========================================
   6. 커스텀 알럿 모달
========================================= */
.custom-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.custom-modal-box {
    background-color: #1e2329; border: 1px solid #2b3139; border-radius: 8px;
    padding: 24px 32px; min-width: 320px; max-width: 80%;
    text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.custom-modal-content { color: #eaecef; font-size: 16px; margin-bottom: 24px; line-height: 1.5; white-space: pre-wrap; }
.custom-modal-btn {
    background-color: #fcd535; color: #181a20; border: none; padding: 10px 32px;
    border-radius: 4px; font-size: 16px; font-weight: bold; cursor: pointer; transition: opacity 0.2s;
}
.custom-modal-btn:hover { opacity: 0.8; }

/* =========================================
   7. 바이낸스 로고 동적 로딩 오버레이
========================================= */
.binance-loader-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(24, 26, 32, 0.85); backdrop-filter: blur(4px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 99998; opacity: 0; transition: opacity 0.3s ease;
}
.binance-logo-anim { position: relative; width: 60px; height: 60px; margin-bottom: 25px; }
.binance-diamond {
    position: absolute; width: 16px; height: 16px; background-color: #fcd535;
    transform: rotate(45deg); animation: binance-flash 1.5s infinite ease-in-out;
}
.bd-center { top: 22px; left: 22px; animation-delay: 0s; }
.bd-top    { top: 0px;  left: 22px; animation-delay: 0.2s; }
.bd-bottom { top: 44px; left: 22px; animation-delay: 0.2s; }
.bd-left   { top: 22px; left: 0px;  animation-delay: 0.4s; }
.bd-right  { top: 22px; left: 44px; animation-delay: 0.4s; }

@keyframes binance-flash {
    0%, 100% { opacity: 0.1; transform: rotate(45deg) scale(0.7); }
    50% { opacity: 1; transform: rotate(45deg) scale(1.1); box-shadow: 0 0 10px rgba(252, 213, 53, 0.5); }
}

.loading-text { color: #fcd535; font-size: 14px; font-weight: bold; letter-spacing: 1px; animation: pulse-text 1.5s infinite ease-in-out; }
@keyframes pulse-text { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.btn-buy:disabled, .btn-sell:disabled {
    background-color: #2b3139 !important;
    color: #474d57 !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

/* =========================================
   투자 금액 숏컷 버튼
========================================= */
.money-shortcuts {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.money-shortcuts button {
    flex: 1;
    background-color: transparent;
    color: #848e9c;
    border: 1px solid #474d57;
    padding: 6px 2px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.money-shortcuts button:hover {
    background-color: #2b3139;
    color: #eaecef;
    border-color: #848e9c;
}
.money-shortcuts button.btn-max { color: #fcd535; border-color: #fcd535; }
.money-shortcuts button.btn-clear { color: #f6465d; border-color: #f6465d; }

/* =========================================
   거래 내역 (Order History)
========================================= */
.history-panel {
    margin-top: 10px;
    background-color: #181a20;
    border: 1px solid #2b3139;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.history-header {
    padding: 12px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #eaecef;
    border-bottom: 1px solid #2b3139;
    background-color: #1e2329;
    flex-shrink: 0;
}

.history-content {
    overflow-y: auto;
    overflow-x: auto;
    flex: 1;
}

.history-table {
    width: 100%;
    min-width: 450px;
    border-collapse: collapse;
    font-size: 12px;
}

.history-table th, .history-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #2b3139;
    color: #eaecef;
    white-space: nowrap;
    text-align: left;
}

.history-table th {
    color: #848e9c;
    font-weight: normal;
    position: sticky;
    top: 0;
    background-color: #181a20;
    z-index: 2;
}

.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

/* 상태별 포인트 컬러 */
.pos-buy { color: #0ecb81 !important; font-weight: bold; text-align:center!important; }
.pos-sell { color: #f6465d !important; font-weight: bold; text-align:center!important; }
.status-pending { color: #fcd535 !important; }
.status-win { color: #0ecb81 !important; font-weight: bold; }
.status-lose { color: #f6465d !important; font-weight: bold; }
.status-tie { color: #848e9c !important; }

/* =========================================
   8. 모바일 & 태블릿 반응형 (992px 이하)
========================================= */
@media screen and (max-width: 992px) {
    .main-container {
        flex-direction: column;
        overflow-y: auto;
        position: relative;
    }

    /* 💡 모바일 차트 영역 하단 여백 추가 (토글 버튼에 안가려지게) */
    #chart-container {
        flex: 1;
        padding-bottom: 65px; 
    }

    /* =======================================
       💡 슬라이드 토글 패널 (Bottom Sheet) 적용
    ======================================= */
    .mobile-panel-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 55px; /* 손잡이 영역 높이 */
        cursor: pointer;
        border-bottom: 1px solid #2b3139;
        margin-bottom: 10px;
        background-color: #1e2329;
        border-radius: 20px 20px 0 0;
    }
    
    .toggle-handle {
        width: 45px; height: 5px;
        background: #474d57;
        border-radius: 3px;
        margin-bottom: 6px;
    }
    
    .toggle-text { color: #fcd535; font-size: 13px; font-weight: bold; }

    /* 패널 내부 스크롤 래퍼 */
    .trading-panel-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: auto;
        padding-bottom: 20px;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 메인 주문/거래 패널을 화면 하단 고정형 슬라이드로 변경 */
    .trading-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: #1e2329;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.8);
        padding: 0; /* 패딩은 내부 컨텐츠로 옮김 */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        
        /* 슬라이드 애니메이션 설정 */
        height: 85vh; /* 열렸을 때 화면의 85%까지 올라옴 */
        /* 기본 닫힘 상태: 85vh 높이에서 손잡이 영역(55px)만 남기고 밑으로 숨김 */
        transform: translateY(calc(100% - 55px)); 
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* 패널이 열렸을 때 (JavaScript로 클래스 제어) */
    .trading-panel.open {
        transform: translateY(0);
    }

    .panel-body { flex-wrap: wrap; gap: 8px; }
    .panel-body input { width: 100%; flex: 0 0 100%; padding: 12px; }
    .btn-group { width: 100%; flex: 0 0 100%; gap: 8px; }
    .btn-group button { padding: 14px; font-size: 16px; }

    /* 상단 헤더 가로 스크롤 제거 및 자동 축소 */
    .chart-header { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 8px; }
    .header-controls { flex-direction: row; flex-wrap: nowrap; overflow: hidden; width: 100%; justify-content: space-between; gap: 2px; }
    .asset-buttons { display: flex; flex: 1; gap: 2px; }
    .timeframe-buttons { display: flex; flex: none; gap: 2px; margin-left: 4px; padding-left: 4px; border-left: 1px solid #2b3139; }
    .asset-buttons button, .timeframe-buttons button { padding: 6px 2px; font-size: 11px; letter-spacing: -0.5px; flex: 1; text-align: center; white-space: nowrap; }
    .header-price-info { margin-left: 0; padding-right: 0; width: 100%; justify-content: space-between; font-size: 16px; padding-top: 5px; }
}

/* =========================================
   공통 레이아웃 (마스터 페이지 관련 생략 - 기존과 동일)
========================================= */
.main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.site-header { display: flex; align-items: center; justify-content: space-between; background-color: #181a20; padding: 0 20px; height: 60px; border-bottom: 1px solid #2b3139; flex-shrink: 0; }
.site-logo { color: #fcd535; font-size: 20px; font-weight: bold; text-decoration: none; letter-spacing: 1px; }
.desktop-nav { display: flex; gap: 30px; }
.desktop-nav a { color: #eaecef; text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.2s; line-height: 60px; }
.desktop-nav a:hover, .desktop-nav a.active { color: #fcd535; }
.site-footer { background-color: #121418; color: #474d57; text-align: center; padding: 15px; font-size: 12px; border-top: 1px solid #2b3139; flex-shrink: 0; }

.hamburger-btn { display: none; }
.mobile-overlay { display: none; }
.mobile-panel { display: none; }

@media screen and (max-width: 992px) {
    .desktop-nav { display: none; } 
    .site-header { position: relative; display: flex; flex-direction: row !important; align-items: center; justify-content: flex-start !important; }
    .logo-area { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 5; }
    .hamburger-btn { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: transparent; border: none; cursor: pointer; order: -1; z-index: 10; }
    .hamburger-btn span { width: 100%; height: 2px; background-color: #eaecef; border-radius: 2px; }
    .mobile-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 100000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
    .mobile-panel { display: flex; flex-direction: column; position: fixed; top: 0; left: -280px; width: 280px; height: 100%; background-color: #1e2329; z-index: 100001; transition: left 0.3s ease; box-shadow: 5px 0 15px rgba(0,0,0,0.5); }
    .mobile-overlay.show { opacity: 1; visibility: visible; }
    .mobile-panel.show { left: 0; }
    .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #2b3139; }
    .close-btn { background: transparent; border: none; color: #eaecef; font-size: 24px; cursor: pointer; }
    .mobile-nav-links { display: flex; flex-direction: column; padding: 10px 0; }
    .mobile-nav-links a { color: #eaecef; text-decoration: none; padding: 15px 20px; font-size: 16px; border-bottom: 1px solid #2b3139; }
    .mobile-nav-links a.active { color: #fcd535; font-weight: bold; }


    .chart-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 10px;
    }

    .header-controls {
        display: flex;
        flex-direction: column; /* 종목 그룹과 분봉 그룹을 위아래로 분리 */
        overflow: visible; /* 잘림 방지 */
        width: 100%;
        gap: 8px;
    }

    .asset-buttons {
        display: flex;
        flex-wrap: wrap; /* 화면이 좁으면 자동으로 여러 줄로 떨어짐 */
        gap: 4px;
        width: 100%;
    }

    .timeframe-buttons {
        display: flex;
        gap: 4px;
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: none; /* 데스크탑용 구분선 제거 */
    }

    /* 종목 버튼: 좁은 화면에서는 한 줄에 3개씩(약 33%) 2줄로 깔끔하게 배치 */
    .asset-buttons button {
        flex: 1 1 calc(33.333% - 4px); 
        padding: 8px 4px;
        font-size: 12px;
        letter-spacing: normal;
    }

    /* 분봉 버튼: 한 줄에 3개가 꽉 차게 균등 배치 */
    .timeframe-buttons button {
        flex: 1; 
        padding: 8px 4px;
        font-size: 12px;
        letter-spacing: normal;
    }

    /* 현재가 표시 영역 */
    .header-price-info {
        margin-left: 0;
        padding-right: 0;
        width: 100%;
        justify-content: space-between;
        font-size: 16px; 
        padding-top: 5px;
        border-top: 1px solid #2b3139; /* 버튼들과의 경계선 추가 */
    }
    
}