/* ==========================================================================
   Chart & Multi-View Layout Styles
   - 메인 차트 레이아웃
   - 멀티 타임프레임 뷰
   - 코인 비교 뷰
   - 패널/배지 공통 스타일
   ========================================================================== */

/* 메인 차트 영역 */
#chart-area { 
    flex-grow: 1; 
    display: flex !important;
    flex-direction: column !important;
    padding: 0 1rem 0.5rem 1rem !important;
    padding-top: 0; 
    min-height: 0;
    height: auto !important;
    max-height: calc(100vh - 50px) !important;
    overflow: hidden;
}

#chart-container { 
    flex: 1 1 auto !important;
    min-height: 400px !important;
    height: calc(100vh - 250px) !important;
    max-height: calc(100vh - 250px) !important;
    position: relative !important;
    background-color: #ffffff; 
    border-radius: 0.25rem; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 100 !important;
    overflow: hidden !important;
}

/* 🚀 차트 좌측 상단 OHLCV 레이블 */
#chart-ohlcv-label {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background: transparent;
    padding: 4px 0;
    font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

#chart-ohlcv-label .ohlcv-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

#chart-ohlcv-label .ohlcv-label {
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
    min-width: 16px;
}

#chart-ohlcv-label .ohlcv-value {
    color: #000000;
    font-weight: 500;
    display: inline-block;
    min-width: 90px;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* 데이터 상태 메시지 스타일 */
.chart-status-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 50;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
}

.status-loading {
    color: #007bff;
}

.status-loading .status-icon {
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

.status-no-data {
    color: #6c757d;
}

.status-error {
    color: #dc3545;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Multi-Timeframe Layout */
#multi-chart-container {
    display: none;
    flex-grow: 1;
    min-height: 400px;
    height: calc(100vh - 200px); /* 상단 영역을 고려한 높이 계산 */
    max-height: calc(100vh - 200px); /* 최대 높이 제한 */
    position: relative;
    background-color: #ffffff;
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#multi-chart-container.active {
    display: grid !important;
    /* 기본값: 4분할 (2x2) */
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    grid-gap: 2px;
    height: calc(100vh - 200px); /* 상단 영역을 고려한 높이 계산 */
    max-height: calc(100vh - 200px); /* 최대 높이 제한 */
    min-height: 600px; /* 최소 높이 확보 */
    z-index: 1000; /* 최상위로 올림 */
    position: relative;
    background: white;
}

/* 4분할 강제 설정 - 다른 CSS 규칙보다 우선순위 높게 */
#multi-chart-container.active:not(.nine-split) {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    grid-auto-flow: row !important;
}

/* 4분할 전용 강제 설정 - 최고 우선순위 */
#multi-chart-container.active[style*="display: grid"]:not(.nine-split) {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    grid-auto-flow: row !important;
    grid-template-areas: 
        "panel1 panel2"
        "panel3 panel4" !important;
}

/* 패널 순서 강제 설정 */
#multi-chart-container.active:not(.nine-split) #chart-panel-1 {
    grid-area: panel1 !important;
}
#multi-chart-container.active:not(.nine-split) #chart-panel-2 {
    grid-area: panel2 !important;
}
#multi-chart-container.active:not(.nine-split) #chart-panel-3 {
    grid-area: panel3 !important;
}
#multi-chart-container.active:not(.nine-split) #chart-panel-4 {
    grid-area: panel4 !important;
}

/* 9분할용 스타일 */
#multi-chart-container.active.nine-split {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
}

/* 9분할 모드에서 5-9번 패널 표시 */
#multi-chart-container.active.nine-split #chart-panel-5,
#multi-chart-container.active.nine-split #chart-panel-6,
#multi-chart-container.active.nine-split #chart-panel-7,
#multi-chart-container.active.nine-split #chart-panel-8,
#multi-chart-container.active.nine-split #chart-panel-9 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* 패널 숨김 처리 */
.multi-chart-panel[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 4분할 모드에서 5-9번 패널 완전 숨김 */
#multi-chart-container.active:not(.nine-split) #chart-panel-5,
#multi-chart-container.active:not(.nine-split) #chart-panel-6,
#multi-chart-container.active:not(.nine-split) #chart-panel-7,
#multi-chart-container.active:not(.nine-split) #chart-panel-8,
#multi-chart-container.active:not(.nine-split) #chart-panel-9 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Multi-Coin Layout */
#multi-coin-container {
    display: none;
    flex-grow: 1;
    min-height: 400px;
    position: relative;
}

#multi-coin-container.active {
    display: grid !important;
    /* 기본값: 4분할 (2x2) - 다른 클래스가 없을 때만 적용 */
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    grid-gap: 2px;
    height: calc(100vh - 200px); /* 상단 영역을 고려한 높이 계산 */
    max-height: calc(100vh - 200px); /* 최대 높이 제한 */
    min-height: 600px; /* 최소 높이 확보 */
    z-index: 1000; /* 최상위로 올림 */
    position: relative;
    background: white;
    grid-auto-flow: row !important;
}

/* 4분할 강제 설정 - 다른 CSS 규칙보다 우선순위 높게 */
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    grid-auto-flow: row !important;
    grid-template-areas: 
        "panel1 panel2"
        "panel3 panel4" !important;
}

/* 패널 순서 강제 설정 */
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-1 {
    grid-area: panel1 !important;
}
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-2 {
    grid-area: panel2 !important;
}
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-3 {
    grid-area: panel3 !important;
}
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-4 {
    grid-area: panel4 !important;
}

/* 코인비교뷰 9분할용 스타일 - 최고 우선순위 */
#multi-coin-container.active.nine-split:not(.sixteen-split) {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
    grid-auto-flow: row !important;
}

/* 코인비교뷰 16분할용 스타일 - 최고 우선순위 */
#multi-coin-container.active.sixteen-split {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr 1fr !important;
    grid-auto-flow: row !important;
}

/* 코인비교뷰 4분할 모드에서 5-16번 패널 완전 숨김 */
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-5,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-6,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-7,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-8,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-9,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-10,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-11,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-12,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-13,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-14,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-15,
#multi-coin-container.active:not(.nine-split):not(.sixteen-split) #coin-panel-16 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* 코인비교뷰 9분할 모드에서 5-9번 패널 표시, 10-16번 패널 숨김 */
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-5,
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-6,
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-7,
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-8,
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-9 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-10,
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-11,
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-12,
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-13,
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-14,
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-15,
#multi-coin-container.active.nine-split:not(.sixteen-split) #coin-panel-16 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* 코인비교뷰 16분할 모드에서 모든 패널 표시 */
#multi-coin-container.active.sixteen-split #coin-panel-1,
#multi-coin-container.active.sixteen-split #coin-panel-2,
#multi-coin-container.active.sixteen-split #coin-panel-3,
#multi-coin-container.active.sixteen-split #coin-panel-4,
#multi-coin-container.active.sixteen-split #coin-panel-5,
#multi-coin-container.active.sixteen-split #coin-panel-6,
#multi-coin-container.active.sixteen-split #coin-panel-7,
#multi-coin-container.active.sixteen-split #coin-panel-8,
#multi-coin-container.active.sixteen-split #coin-panel-9,
#multi-coin-container.active.sixteen-split #coin-panel-10,
#multi-coin-container.active.sixteen-split #coin-panel-11,
#multi-coin-container.active.sixteen-split #coin-panel-12,
#multi-coin-container.active.sixteen-split #coin-panel-13,
#multi-coin-container.active.sixteen-split #coin-panel-14,
#multi-coin-container.active.sixteen-split #coin-panel-15,
#multi-coin-container.active.sixteen-split #coin-panel-16 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background-color: #ffffff;
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 코인비교뷰 분할 선택 스타일 */
.coin-split-options {
    display: flex;
    gap: 2px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #dee2e6;
}

.coin-split-options input[type="radio"] {
    display: none;
}

/* 패널 공통 카드 스타일 */
.multi-chart-panel {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.multi-chart-panel:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0,123,255,0.25);
}

.multi-chart-panel:hover .panel-timeframe-badge,
.multi-chart-panel:hover .panel-coin-badge {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

.multi-chart-panel.selected {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.multi-chart-panel.selected .panel-coin-badge {
    background: #0056b3 !important;  /* 진한 파란색 배경 */
    color: #ffffff !important;
    box-shadow: 0 3px 6px rgba(0,86,179,0.4) !important;
    transform: scale(1.05) !important;
    border: 2px solid #0056b3 !important;  /* 배경색과 동일한 테두리 */
}

.multi-chart-panel.selected .panel-timeframe-badge {
    background: #0056b3 !important;  /* 진한 파란색 배경 */
    color: #ffffff !important;
    box-shadow: 0 3px 6px rgba(0,86,179,0.4) !important;
    transform: scale(1.05) !important;
    border: 2px solid #0056b3 !important;  /* 배경색과 동일한 테두리 */
}

.multi-chart-panel .panel-header {
    background: transparent;  /* 배경 투명하게 */
    padding: 0;  /* 패딩 제거 */
    border-bottom: none;  /* 하단 테두리 제거 */
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0;  /* 높이 제거 */
    position: relative;  /* 배지 위치를 위한 상대 위치 */
}

.multi-chart-panel .panel-content {
    height: 100%;  /* 전체 높이 사용 */
    position: relative;
}

.panel-timeframe-badge {
    position: absolute;
    top: 8px;  /* 패널 상단에서 8px */
    left: 8px;  /* 패널 좌측에서 8px */
    background: #007bff !important;  /* 다시 파란색 배경 */
    color: #ffffff !important;       /* 흰색 글씨 강제 */
    padding: 4px 10px !important;   /* 패딩 증가 */
    border-radius: 16px !important;
    font-size: 12px !important;     /* 폰트 크기 증가 */
    font-weight: 700 !important;    /* 폰트 굵기 증가 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;  /* 그림자 진하게 */
    border: 2px solid #007bff !important;  /* 배경색과 동일한 테두리 */
    transition: all 0.2s ease !important;
    letter-spacing: 0.5px !important;  /* 글자 간격 */
    z-index: 10;  /* 차트 위에 표시 */
}

/* 더 구체적인 선택자로 강제 적용 */
.multi-chart-container .panel-timeframe-badge,
#multiTimeframeView .panel-timeframe-badge,
span.panel-timeframe-badge,
.panel-timeframe-badge * {
    background: #007bff !important;
    color: #ffffff !important;
}

/* 모든 가능한 상황에서 배지 글씨색 강제 적용 */
span[class*="timeframe-badge"] {
    background: #007bff !important;
    color: #ffffff !important;
}

/* 패널 선택 안내 애니메이션 */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

.panel-coin-badge {
    position: absolute;
    top: 8px;  /* 패널 상단에서 8px */
    left: 8px;  /* 패널 좌측에서 8px */
    background: #007bff !important;  /* 코인 배지도 파란색 */
    color: #ffffff !important;       /* 흰색 글씨 강제 */
    padding: 4px 10px !important;   /* 패딩 증가 */
    border-radius: 16px !important;
    font-size: 12px !important;     /* 폰트 크기 증가 */
    font-weight: 700 !important;    /* 폰트 굵기 증가 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;  /* 그림자 진하게 */
    border: 2px solid #007bff !important;  /* 배경색과 동일한 테두리 */
    transition: all 0.2s ease !important;
    letter-spacing: 0.5px !important;  /* 글자 간격 */
    z-index: 10;  /* 차트 위에 표시 */
}

/* 🎯 코인비교뷰 배지 흰색 텍스트 강제 적용 (최고 우선순위) */
#multi-coin-container .panel-coin-badge,
#multi-coin-container .panel-coin-badge * {
    color: #ffffff !important;
    background: #007bff !important;
}

/* 더 구체적인 선택자로 강제 적용 */
.multi-chart-container .panel-coin-badge,
#multiCoinView .panel-coin-badge,
span.panel-coin-badge,
.panel-coin-badge * {
    background: #007bff !important;
    color: #ffffff !important;
}

/* 모든 가능한 상황에서 배지 글씨색 강제 적용 */
span[class*="coin-badge"] {
    background: #007bff !important;
    color: #ffffff !important;
}

/* 최고 우선순위로 배지 스타일 강제 적용 */
.panel-timeframe-badge,
.panel-coin-badge {
    color: white !important;
    background-color: #007bff !important;
}

/* 텍스트 컬러를 덮어쓰는 모든 요소에 대한 대응 */
[class*="-badge"]:not(.badge-outline) {
    color: #ffffff !important;
    background: #007bff !important;
}

.panel-price-info {
    font-size: 11px;
    color: #6c757d;
    display: none;  /* 가격 정보 숨기기 */
}

/* ==========================================================================
   Indicator Overlay Styles
   ========================================================================== */

#indicator-overlay {
    position: absolute;
    top: 32px;  /* OHLCV 레이블 아래에 위치 */
    left: 10px;
    /* z-index는 z-index-system.css에서 관리 (100) */
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.indicator-overlay-item { 
    display: flex; 
    align-items: center; 
    font-size: 14px; 
    font-weight: 500; 
    padding: 4px 8px; 
    border-radius: 4px; 
    pointer-events: all; 
}

/* ==========================================================================
   Chart Section Visibility Styles
   ========================================================================== */

/* 차트 섹션 활성화 시 고정 높이 레이아웃 */
#chart-section.section-container.active {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 60px) !important; /* ⭐ 고정 높이로 화면에 맞춤 */
    max-height: calc(100vh - 60px) !important;
    overflow: hidden !important; /* ⭐ 섹션 자체는 스크롤 없음 */
    position: relative; /* 절대 위치 기준점 제공 */
}

/* 차트 섹션이 비활성화된 경우 완전히 숨김 */
#chart-section:not(.active) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* 차트 섹션이 비활성화되면 내부 요소도 숨김 */
#chart-section:not(.active) #chart-area,
#chart-section:not(.active) #chart-container,
#chart-section:not(.active) #multi-chart-container,
#chart-section:not(.active) #multi-coin-container {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Scroll bottom residue guard for chart section */
#chart-section,
#chart-area,
#chart-container,
.wrapper,
#content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}