/* 폰트 로딩 최적화 */
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");

/* 🔥🔥🔥 CRITICAL: 페이지 전체 스크롤 자연스럽게 활성화 🔥🔥🔥 */
html, body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
    background: #ffffff !important; /* 회색 배경을 흰색으로 변경 */
    margin: 0; 
    padding: 0;
    /* min-height 제거: 콘텐츠가 없을 때 불필요한 스크롤바 방지 */
    min-height: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    overflow-x: hidden !important; /* 가로 스크롤 방지 */
}

/* 페이지 기본 스크롤 동작: 필요 시 자동 표시 */
body {
    /* overflow-y를 auto 대신 필요할 때만 표시되도록 변경 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* 스크롤바 공간 항상 확보: 모달이 열릴 때 레이아웃 시프트 방지 */
    scrollbar-gutter: auto !important;
}

html {
    scrollbar-width: auto !important;
    box-sizing: border-box;
    /* 스크롤바 공간 항상 확보: 모달이 열릴 때 레이아웃 시프트 방지 */
    scrollbar-gutter: auto !important;
}

/* 🔥 모든 브라우저에서 스크롤바 강제 표시 */
::-webkit-scrollbar {
    width: 8px !important;
    background: transparent !important; /* 밝은 배경색 */
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important; /* 회색 */
    border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: #495057 !important; /* 호버 시 더 진한 회색 */
}

*, *::before, *::after {
    scrollbar-width: auto !important;  /* Firefox */
    scrollbar-color: #6c757d #e9ecef !important;  /* Firefox */
    box-sizing: border-box;
}
.wrapper { 
    display: flex; 
    flex-direction: column; 
    /* min-height 제거: 콘텐츠가 없을 때 불필요한 스크롤바 방지 */
    min-height: auto;
    height: auto;
    overflow: visible;
    position: relative;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding-top: 0 !important; /* 네비게이션바와 본문 사이 공간 제거 */
    margin-top: 0 !important; /* 네비게이션바와 본문 사이 공간 제거 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#content { 
    flex: 1;
    display: flex; 
    flex-direction: column; 
    transition: margin-right 0.3s ease;
    overflow: visible;
    /* min-height 제거: 콘텐츠가 없을 때 불필요한 스크롤바 방지 */
    min-height: auto;
    height: auto;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding-top: 0 !important; /* 네비게이션바와 본문 사이 공간 제거 */
    margin-top: 0 !important; /* 네비게이션바와 본문 사이 공간 제거 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#content.sidebar-open { margin-right: 400px; }
#sidebar { 
    position: fixed; 
    top: 0; 
    right: -400px; 
    width: 400px; 
    height: 100vh; 
    background: white; 
    border-left: 1px solid #dee2e6; 
    z-index: 1050; 
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}
#sidebar.open { right: 0; }
#sidebar-header { 
    padding: 1rem; 
    border-bottom: 1px solid #dee2e6; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
#sidebar-close-btn {
    padding: 0.5rem;
    margin: -0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}
#sidebar-close-btn:hover {
    background-color: rgba(0,0,0,0.1);
}
#sidebar-close-btn::before {
    content: "✕";
    display: block;
    color: #6c757d;
}
#sidebar-body { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}
#top-controls { 
    display: block;
    padding: 0.5rem 1rem; 
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-bottom: 1px solid #bfdbfe;
    position: relative;  /* 🔥 z-index 컨텍스트 */
    z-index: 1500;  /* 🔥 차트보다 높게 */
    overflow: visible !important;  /* 🔥 서브버튼이 밖으로 나올 수 있게 */
}

/* 네비게이션 메뉴와 컨트롤 기본 표시 보장은 navigation.css와 section-layout.css로 이동되었습니다. */

/* top-controls 내부 레이아웃 개선 */
#top-controls > div {
    min-height: 48px;
}

/* 반응형 - 작은 화면에서 OHLC 정보가 아래로 내려가도록 */
@media (max-width: 1200px) {
    #top-controls .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #top-controls .d-flex.justify-content-between > div:last-child {
        margin-top: 0.5rem;
        align-self: flex-end;
    }
}
#interval-controls { flex-shrink: 0; padding: 0.5rem 0; }
#interval-controls .btn, #indicator-controls .btn { font-weight: 600; }
#indicator-controls { display: flex; align-items: center; gap: 0.5rem; }

/* ==========================================================================
   차트 레이아웃 관련 스타일은 chart-layout.css로 이동되었습니다.
   - #chart-area, #chart-container
   - .chart-status-message 및 상태 스타일
   - #multi-chart-container, #multi-coin-container
   - .multi-chart-panel, .panel-timeframe-badge, .panel-coin-badge
   - .timeframe-split-options, .coin-split-options
   ========================================================================== */

/* 코인 리스트 관련 스타일은 coin-list.css로 이동되었습니다. */
/* 검색/팔레트 관련 스타일은 search-palette.css로 이동되었습니다. */
/* 인디케이터 오버레이 스타일은 chart-layout.css로 이동되었습니다. */
/* 트레이딩 시그널 알림 스타일은 trading-signals.css로 이동되었습니다. */

/* 공통 컴포넌트 스타일은 common-components.css로 이동되었습니다. */

/* 기술분석 글 작성 관련 스타일은 technical-analysis-editor.css로 이동되었습니다. */

/* Community/Analysis 섹션 관련 스타일은 community-analysis-section.css로 이동되었습니다. */

/* 공통 컴포넌트 스타일은 common-components.css로 이동되었습니다. */

/* 차트 타입 셀렉트 박스 스타일 */
#chart-type-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* 차트 섹션 추가 설정 - 고정 높이 레이아웃 */
/* 차트 섹션 관련 스타일은 chart-layout.css로 이동되었습니다. */

/* 회원정보 관리 섹션 - bg-primary + text-white 조합 시 텍스트 흰색 강제 */
#member-management-section .card-header.bg-primary.text-white,
#member-management-section .card-header.bg-primary.text-white h5,
#member-management-section .card-header.bg-primary.text-white h6,
#member-management-section .card-header.bg-primary.text-white * {
    color: #ffffff;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .navbar-nav .nav-link {
        padding: 6px 8px !important;
        font-size: 0.85rem;
    }
    
    .navbar-nav .nav-link span {
        display: none;
    }
    
    .section-content {
        padding: 0 10px;
    }
    
    .section-header {
        padding: 10px 15px;
        margin-bottom: 15px;
    }
    
    .section-header h3 {
        font-size: 1.1rem;
    }
}

/* Scroll bottom residue guard는 chart-layout.css로 이동되었습니다. */

/* 공통 컴포넌트 스타일(.creator-card, #strategy-description 등)은 common-components.css로 이동되었습니다. */

/* Indicator Creator 섹션 관련 스타일은 indicator-creator-section.css로 이동되었습니다. */

/* 섹션별 조건부 표시/숨김 CSS는 section-layout.css로 이동되었습니다. */
/* 네비게이션 드롭다운 스타일은 navigation.css로 이동되었습니다. */

/* 백테스트 히스토리 테이블 정렬 기능 */
.sortable {
    user-select: none;
    position: relative;
    transition: background-color 0.2s ease, color 0.2s ease;
    color: #ffffff !important;
}

.sortable:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.sortable i {
    opacity: 0.7;
    transition: opacity 0.2s ease;
    color: #ffffff !important;
}

.sortable:hover i {
    opacity: 1;
    color: #ffffff !important;
}

.sortable.sort-asc i:before {
    content: "\f0de"; /* fa-sort-up */
    color: #17a2b8 !important;
}

.sortable.sort-desc i:before {
    content: "\f0dd"; /* fa-sort-down */
    color: #17a2b8 !important;
}

.sortable.sort-asc,
.sortable.sort-desc {
    background-color: rgba(23, 162, 184, 0.3) !important;
    color: #ffffff !important;
}

.sortable.sort-asc:hover,
.sortable.sort-desc:hover {
    background-color: rgba(23, 162, 184, 0.5) !important;
    color: #ffffff !important;
}

/* 정렬된 컬럼 하이라이트 */

/* 트레이더 리그 스타일은 trader-league.css로 이동되었습니다. */

/* 집단지성 예측 시스템 스타일은 prediction-system.css로 이동되었습니다. */

/* 백테스트 상세 모달 스타일은 backtest-detail-modal.css로 이동되었습니다. */

/* 다크 모드 스타일은 dark-mode.css로 이동되었습니다. */