/* ==========================================================================
   Common Section Layout Styles
   - 공통 섹션 컨테이너 & 헤더/컨텐츠 배치
   ========================================================================== */

.section-container {
    width: 100%;
    /* min-height 제거: 콘텐츠가 없을 때 불필요한 스크롤바 방지 */
    min-height: auto;
    display: block;
    position: relative;
}

.section-container.active {
    display: flex !important;
    flex-direction: column !important;
    /* min-height 대신 height: auto 사용 - 콘텐츠에 맞춤 */
    min-height: auto !important;
    height: auto !important;
    max-height: none !important; /* 스크롤이 필요한 경우에만 body에서 처리 */
    overflow: visible !important;
}

.section-container:not(.active) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.section-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: #495057;
    padding: 12px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header h3 i {
    color: #007bff;
}

.section-content {
    padding: 0 20px;
}

/* ==========================================================================
   Section Visibility & Conditional Display Styles
   ========================================================================== */

/* 차트 섹션이 활성화된 경우 네비게이션과 컨트롤 표시 */
body.chart-active .navbar-nav.mx-auto,
.section-container.active#chart-section ~ nav .navbar-nav.mx-auto {
    display: flex !important;
    visibility: visible !important;
}

body.chart-active #top-controls,
.section-container.active#chart-section ~ #top-controls {
    display: block !important;
    visibility: visible !important;
}

/* 차트 섹션이 아닐 때는 top-controls만 숨김 (네비게이션은 항상 표시) */
body:not(.chart-active) #top-controls {
    display: none !important;
}

/* AI지표생성 섹션 활성화 시 body 클래스 기반 스타일링 */
body.indicator-creator-active #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.indicator-creator-active #top-controls {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* 차트 섹션일 때 네비게이션과 컨트롤 표시 */
body.chart-active .navbar-nav.mx-auto {
    display: flex !important;
}

body.chart-active #top-controls {
    display: block !important;
}