/* [모듈명]: 메인 레이아웃 시스템 (v16.2 - Twitter Specs) */

@import url('tabs_update.css?v=14.2.6.4');
@import url('sandbox_lounge.css?v=14.2.6.4');

:root {
    --bg-dark: #000000;
    /* 프로필과 동일한 다크 컬러 */
    --bg-card: #181818;
    --text-white: #FFFFFF;
    --text-gray: #9BA3A0;
    --border-dark: #2A2A2A;
    --point-blue: #1D9BF0;
    --header-height: 100px;
    --footer-height: 80px;
    --max-width: 600px;

    /* 오행 공식 색상 팔레트 */
    --clr-wood: #16A34A;
    /* 목(木) - 초록 */
    --clr-fire: #DC2626;
    /* 화(火) - 빨강 */
    --clr-earth: #CA8A04;
    /* 토(土) - 황토 */
    --clr-metal: #94A3B8;
    /* 금(金) - 금색/회색 */
    --clr-water: #2563EB;
    /* 수(水) - 파랑 */
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* [1] 상단 섹터 (Top Navigation) */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(0, 0, 0, 0.8);
    /* #000000 기반 투명도 조정 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: none;
    /* 분절감 제거를 위해 테두리 삭제 */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fixed-header.hide-up {
    transform: translateY(-100%);
}

.top-app-bar {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    justify-content: space-between;
}

.logo-container img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    /* 화이트 수레바퀴 엠블럼 */
}

.sector-nav {
    height: 50px;
    display: flex;
    width: 100%;
}

.sector-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-gray);
    position: relative;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sector-item.active {
    color: var(--text-white);
    font-weight: 900;
}

/* [2] 메인 콘텐츠 영역 (Main Content) */
/* [v14.2.6.6] 스크롤 시 헤더가 숨겨지면 라운지 카테고리 바를 완전히 은닉 */
.fixed-header.hide-up~#main-view .lounge-chip-scrollview {
    transform: translateY(-100px);
    opacity: 0;
    pointer-events: none;
}

#main-view {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-top: var(--header-height);
    padding-bottom: 90px;
    /* 알약형 네비 높이(60px) + 하단 여백(20px) + 여유(10px) */
    min-height: 100dvh;
}

/* 사파리 스크롤바 숨기기 */
.scroll-hide::-webkit-scrollbar {
    display: none;
}

/* [SPA] 콘텐츠 노출 제어 - router.js에서 인라인 스타일(opacity)로 관리합니다. */
#main-content-area {
    will-change: opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}