/* =========================================
   1. 기본 설정 (RESET & BASE)
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: #000;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

/* =========================================
   2. 로딩 화면 (LOADER)
   ========================================= */
#loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    background-color: #000;
    transition: opacity 1.2s ease-in-out, visibility 1.2s;
}
.loader-bg {
    position: absolute; width: 100%; height: 100%;
    background: url('cockpit.png') no-repeat center center;
    background-size: cover;
    filter: brightness(0.4);
    z-index: -1;
}
.hud-container { text-align: center; color: #00d4ff; text-shadow: 0 0 10px #00d4ff; padding: 20px; }
.hud-target {
    width: 60px; height: 60px; border: 2px solid #00d4ff; border-radius: 50%;
    margin: 0 auto 20px; animation: pulse 1.5s infinite;
}
#loader.fade-out { opacity: 0; visibility: hidden; }

/* 시작 버튼 */
.start-btn {
    margin-top: 30px; padding: 15px 40px;
    background: rgba(0, 212, 255, 0.1); border: 1px solid #00d4ff;
    color: #00d4ff; font-family: 'Courier New', monospace;
    font-size: 1.2rem; font-weight: bold; letter-spacing: 3px;
    cursor: pointer; transition: 0.3s;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
    opacity: 0; transform: translateY(20px);
}
.start-btn.show { opacity: 1; transform: translateY(0); }
.start-btn.hidden { display: none; }
.start-btn:hover { background: #00d4ff; color: #000; box-shadow: 0 0 30px #00d4ff; }

/* =========================================
   3. 페이지 전환 (TRANSITION)
   ========================================= */
#page-transition {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000; z-index: 99999;
    display: flex; justify-content: center; align-items: center;
    opacity: 1; transition: opacity 0.5s ease-in-out; pointer-events: none;
}
#page-transition.reveal { opacity: 0; }
.transition-content { text-align: center; color: #00d4ff; font-family: 'Courier New', monospace; }
.system-text { font-size: 1.2rem; letter-spacing: 5px; animation: blink 0.5s infinite alternate; }
.scan-line { width: 0%; height: 2px; background: #00d4ff; margin: 10px auto; animation: scan 0.5s forwards; }

/* =========================================
   4. 네비게이션 (NAV)
   ========================================= */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 25px 50px; position: fixed; width: 100%; top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
    z-index: 100; transition: 0.3s;
}
nav .logo a { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: 4px; text-decoration: none; }
nav ul { display: flex; list-style: none; }
nav ul li { margin-left: 40px; }
nav ul li a {
    text-decoration: none; color: #ddd; 
    font-size: 1.1rem; font-weight: 800; 
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    transition: 0.3s; position: relative; padding-bottom: 5px;
}
nav ul li a:hover { color: #00d4ff; text-shadow: 0 0 10px #00d4ff; }
nav ul li a::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 2px; background: #00d4ff; transition: 0.3s;
}
nav ul li a:hover::after { width: 100%; }

/* =========================================
   5. 메인 레이아웃 (HERO)
   ========================================= */
.hero-image-section {
    position: relative; width: 100%; height: 60vh; 
    background: #000; overflow: hidden; padding-top: 80px; 
}
.main-image-container { position: relative; width: 100%; height: 100%; }
.main-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.image-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
}

.hero-text-section {
    position: relative; padding: 40px 20px 60px 20px;
    text-align: center; background-color: #000;
    margin-top: -50px; z-index: 10;
}
.hero-content { max-width: 800px; margin: 0 auto; }
.main-title { 
    font-size: 4rem; letter-spacing: 10px; margin: 15px 0; font-weight: 800; 
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.3); word-break: keep-all;
}
.sub-title { color: #00d4ff; letter-spacing: 8px; font-size: 1.2rem; font-weight: 700; }
.desc { font-size: 1rem; color: #ccc; letter-spacing: 2px; margin-top: 20px; line-height: 1.5; }
.scroll-indicator { margin-top: 40px; color: #666; animation: bounce 2s infinite; font-size: 0.8rem; }

/* =========================================
   6. 정보 섹션 (INFO - SPLIT)
   ========================================= */
.info-split-section {
    padding: 50px 20px 100px 20px;
    background: #000;
    display: flex; justify-content: center;
}
.info-container {
    display: flex;
    max-width: 1200px; width: 100%;
    gap: 50px; align-items: center;
}

/* 텍스트 박스 */
.info-text-box { flex: 1; text-align: right; padding: 20px; }
.info-title {
    font-size: 2rem; font-weight: 800; color: #fff;
    margin-bottom: 15px; letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.info-divider {
    width: 50px; height: 3px; background: #00d4ff;
    margin-bottom: 25px; box-shadow: 0 0 10px #00d4ff;
    margin-left: auto; margin-right: 0;
}
.info-desc {
    font-size: 1.1rem; line-height: 1.8; color: #ccc;
    margin-bottom: 20px; font-family: 'Segoe UI', sans-serif; word-break: keep-all;
}

/* 슬라이드 합체 이미지 컨테이너 */
.info-layered-images {
    flex: 1; position: relative; height: 450px; width: 100%;
    overflow: hidden; perspective: 1000px;
    background: rgba(0, 20, 40, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

/* 개별 이미지 공통 */
.layer-img-box {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    border: 1px solid rgba(0, 212, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
    mix-blend-mode: screen;
    filter: grayscale(50%) brightness(1.2) contrast(1.2);
    
    animation-duration: 1.8s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    animation-fill-mode: forwards;
}
.layer-img-box img { width: 100%; height: 100%; object-fit: cover; }
.layer-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,212,255,0.2), transparent, rgba(0,212,255,0.2));
    mix-blend-mode: overlay;
}

/* 애니메이션 키프레임 */
@keyframes slideMergeLeft {
    0% { opacity: 0; transform: translateX(-250%) skewX(-30deg) scale(0.8); }
    70% { opacity: 1; transform: translateX(5%) skewX(0deg) scale(1.02); }
    100% { opacity: 1; transform: translateX(0) scale(1); z-index: 10; border-color: #00d4ff; }
}
@keyframes slideMergeBottom {
    0% { opacity: 0; transform: translateY(250%) scale(0.5); }
    100% { opacity: 0.6; transform: translateY(0) scale(1); z-index: 5; }
}
@keyframes slideMergeRight {
    0% { opacity: 0; transform: translateX(250%) skewX(30deg) scale(0.8); }
    100% { opacity: 0.6; transform: translateX(0) scale(1); z-index: 6; }
}
@keyframes scanlineAppear {
    0% { width: 0; opacity: 0; }
    100% { width: 100%; opacity: 1; }
}

/* 애니메이션 적용 */
.main-layer { animation-name: slideMergeLeft; animation-delay: 2.0s; }
.sub-layer-1 { animation-name: slideMergeBottom; animation-delay: 2.5s; mix-blend-mode: color-dodge; }
.sub-layer-2 { animation-name: slideMergeRight; animation-delay: 3.0s; mix-blend-mode: color-dodge; }

.tech-decoration {
    position: absolute; top: 50%; left: 0;
    height: 2px; background: #00d4ff;
    box-shadow: 0 0 10px #00d4ff; z-index: 20;
    opacity: 0;
    animation: scanlineAppear 0.8s ease-out forwards; animation-delay: 3.8s;
}

.info-layered-images:hover .layer-img-box {
    filter: brightness(1.3) contrast(1.1);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}

/* =========================================
   7. 카테고리 카드 (CATEGORY)
   ========================================= */
.category-grid {
    display: flex; justify-content: center; gap: 20px;
    padding: 0 50px 150px 50px; /* 하단 여백: 플레이어 공간 */
    background: #000; flex-wrap: wrap;
}
.cat-card {
    position: relative; flex: 1; min-width: 300px; height: 450px;
    border: 1px solid rgba(0, 212, 255, 0.3); overflow: hidden;
    text-decoration: none; transition: 0.4s ease; background: #000;
}
.card-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: 0.5s ease; }
.card-bg img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(80%) brightness(0.6); transition: 0.5s ease;
}
.card-content { position: absolute; bottom: 30px; left: 30px; z-index: 2; color: #fff; }
.card-num {
    font-family: 'Courier New', monospace; font-size: 3rem; font-weight: bold;
    color: rgba(255, 255, 255, 0.1); position: absolute; top: -50px; left: 0; transition: 0.3s;
}
.card-content h3 { font-size: 2rem; font-weight: 800; letter-spacing: 2px; margin-bottom: 5px; text-shadow: 0 0 10px rgba(0,0,0,0.8); }
.card-content p { font-family: 'Courier New', monospace; font-size: 0.8rem; color: #00d4ff; letter-spacing: 1px; opacity: 0.7; }
.card-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.8) 100%); pointer-events: none; z-index: 1;
}

/* 카드 호버 */
.cat-card:hover { border-color: #00d4ff; box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); transform: translateY(-10px); }
.cat-card:hover .card-bg img { transform: scale(1.1); filter: grayscale(0%) brightness(1); }
.cat-card:hover .card-num { color: rgba(0, 212, 255, 0.2); transform: translateX(10px); }

/* =========================================
   8. 뮤직 플레이어 (PLAYER)
   ========================================= */
#music-player {
    position: fixed; bottom: 30px; left: 30px; width: 420px;
    background: rgba(0, 10, 20, 0.95); border: 1px solid #00d4ff; padding: 15px;
    z-index: 1001; color: #00d4ff; font-family: 'Courier New', monospace;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}
.player-main-content { display: flex; gap: 15px; align-items: center; }
.player-info-side { flex: 1; display: flex; flex-direction: column; }
.thumbnail-box {
    position: relative; width: 100px; height: 100px;
    border: 1px solid #00d4ff; overflow: hidden; background: #000; flex-shrink: 0;
}
#album-art { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.thumb-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(0,212,255,0.2) 0%, transparent 100%); pointer-events: none;
}
.player-header { border-bottom: 1px solid rgba(0, 212, 255, 0.3); padding-bottom: 8px; margin-bottom: 10px; }
#track-name { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 5px; }
.status-box { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: #aaa; }
.status-dot { width: 8px; height: 8px; background: #555; border-radius: 50%; display: inline-block; }
.player-controls { display: flex; gap: 8px; }
.ctrl-btn {
    flex: 1; background: rgba(0, 212, 255, 0.1); border: 1px solid #00d4ff;
    color: #00d4ff; padding: 8px 5px; cursor: pointer; transition: 0.3s;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
}
.ctrl-btn:hover { background: #00d4ff; color: #000; }
.ctrl-btn .icon { display: block; font-size: 0.8rem; }
.ctrl-btn .label { font-size: 0.55rem; }
#playlist-window { max-height: 120px; overflow-y: auto; margin-top: 10px; border-top: 1px dashed #00d4ff; padding-top: 5px; }
#playlist-window.hidden { display: none; }
.volume-box { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
#volume-slider { flex: 1; accent-color: #00d4ff; height: 2px; }

/* 애니메이션 공통 */
@keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0.5; } }
@keyframes bounce { 0%, 20%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes blink { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes scan { to { width: 100%; } }

/* =========================================
   9. 반응형 미디어 쿼리 (MOBILE RESPONSIVE)
   ========================================= */

/* 태블릿 & 모바일 공통 (768px 이하) */
@media (max-width: 768px) {
    /* 네비게이션 */
    nav { padding: 15px 20px; flex-direction: column; gap: 15px; background: rgba(0,0,0,0.95); }
    nav ul { gap: 15px; flex-wrap: wrap; justify-content: center; width: 100%; }
    nav ul li { margin: 0 5px; }
    nav ul li a { font-size: 0.9rem; }

    /* 메인 타이틀 */
    .hero-text-section { margin-top: -30px; }
    .main-title { font-size: 2.5rem; letter-spacing: 5px; }
    .sub-title { font-size: 1rem; letter-spacing: 4px; }
    .desc { font-size: 0.9rem; padding: 0 10px; }

    /* 정보 섹션 (이미지 위로, 텍스트 아래로) */
    .info-container { flex-direction: column-reverse; gap: 30px; }
    .info-text-box { text-align: center; padding: 0; }
    .info-divider { margin: 0 auto 25px auto; }
    .info-title { font-size: 1.5rem; }
    
    /* 슬라이드 이미지 (높이 축소) */
    .info-layered-images { height: 300px; }

    /* 카테고리 카드 */
    .category-grid { padding: 0 20px 180px 20px; } /* 하단 여백 늘림 (플레이어 고려) */
    .cat-card { width: 100%; min-width: 100%; height: 350px; flex: none; }

    /* 뮤직 플레이어 (하단바 형태로 변경) */
    #music-player {
        left: 0; bottom: 0; width: 100%; 
        border-radius: 0; border-left: none; border-right: none; border-bottom: none;
        padding: 10px;
    }
    .thumbnail-box { width: 60px; height: 60px; }
    .player-header { margin-bottom: 5px; padding-bottom: 5px; }
    #track-name { font-size: 0.7rem; }
    .status-box { display: none; } /* 공간 부족 시 숨김 */
    .volume-box { display: none; } /* 모바일은 기기 볼륨 사용하므로 숨김 */
}

/* 초소형 모바일 (480px 이하) */
@media (max-width: 480px) {
    .main-title { font-size: 2rem; letter-spacing: 2px; }
    .hero-image-section { height: 50vh; }
    .info-layered-images { height: 250px; }
}