/* css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

body {
    font-family: 'Noto Sans KR', sans-serif;
    /* 1. 바깥 배경을 '일상을 자유롭게' 포인트 컬러(#005CAF) 계열로 변경 */
    /* 조금 더 깊이감 있는 로열 블루로 설정하여 모바일 컨테이너를 강조합니다. */
    background-color: #004a8d; 
    margin: 0;
    display: flex;
    justify-content: center;
}

.mobile-container {
    width: 100%;
    max-width: 448px;
    background-color: white;
    min-height: 100vh;
    position: relative;
    /* 그림자에 블루 톤을 살짝 섞어 배경과 자연스럽게 어우러지게 합니다. */
    box-shadow: 0 25px 50px -12px rgba(0, 40, 80, 0.4);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* 2. 히어로 영역: 블루 그라데이션 유지 (상단 오버레이와 조화) */
.hero-gradient {
    background: linear-gradient(180deg, #E0F2FE 0%, #F0F9FF 60%, #FFFFFF 100%);
}

.bottom-nav {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 400px;
    z-index: 100;
}

/* 3. PC 배경 장식 (로열 블루 배경 위의 텍스트 설정) */
.pc-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 33.33%;
    height: 100%;
    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    pointer-events: none;
}

/* PC 배경 텍스트 컬러: 화이트와 민트 그린 포인트 */
.pc-bg h2 { color: #FFFFFF; } 
.pc-bg .h-1 { background-color: #34D399; } /* 조금 더 밝은 민트그린으로 가독성 확보 */
.pc-bg p { color: #BFDBFE; } /* 연한 블루로 부드럽게 표현 */

@media (min-width: 1024px) {
    .pc-bg {
        display: flex;
    }
}

/* 4. 스크롤바 숨기기 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }