/* 신묘한 만세력 - Mobile Specific Styles */

@media (max-width: 768px) {

    /* iOS 스크롤 바운스 현상(Overscroll) 및 하단 주소창 대비 100dvh 적용 (Issue 1) */
    html,
    body {
        height: 100dvh;
        overscroll-behavior-y: none;
        overflow-x: hidden;
        touch-action: manipulation;
        /* 더블 탭 줌 및 네이티브 피커 충돌 방지 */
    }

    /* 1. 기본 레이아웃 전환: 가로 3단 -> 세로 1단 */
    .container {
        flex-direction: column;
        padding: 10px;
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
    }

    /* 사이드바(왼쪽/오른쪽) 기본 숨김 처리 (드로어/상태 관리를 위함) */
    .section-left,
    .section-right {
        width: 100%;
        max-width: none;
        height: auto;
        min-height: auto;
        margin: 0;
        padding: 15px;
    }

    /* 초기 상태: 입력창(오른쪽) 숨김 (모바일 전용 상태 관리 클래스 활용 예정) */
    .section-right.mobile-hidden {
        display: none;
    }

    .section-left.mobile-hidden {
        display: none;
    }

    /* 2. 인트로 화면 (Hero Overlay) 최적화 */
    #hero-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, rgba(15, 23, 42, 0.9) 0%, rgba(2, 6, 17, 1) 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        cursor: pointer;
        pointer-events: auto !important;
        /* Issue 1 fix */
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    #hero-overlay.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none !important;
    }

    .hero-icon-container {
        width: 180px;
        height: 180px;
        margin-bottom: 30px;
    }

    .hero-title {
        font-size: 2.5rem;
        text-align: center;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }

    /* 터치 유도 문구 */
    .hero-overlay::after {
        content: "어디든 터치하여 시작하세요";
        position: absolute;
        bottom: 10%;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.9rem;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 0.3;
        }

        50% {
            opacity: 0.8;
        }
    }

    /* 3. 메인 결과 레이아웃 최적화 */
    .section-middle {
        width: 100%;
        padding: 10px;
    }

    /* 사주 그리드 (년/월/일/시) 촘촘하게 조정 */
    .saju-grid {
        gap: 8px;
    }

    .saju-cell {
        padding: 5px;
        min-width: 60px;
    }

    .saju-cell .ganji {
        font-size: 1.4rem;
    }

    .saju-cell .label {
        font-size: 0.75rem;
    }

    /* 3-1. 사주 원국표 (결과 화면 메인 영역) 모바일 축소 (Issue 1) */
    .saju-grid {
        gap: 10px;
        padding: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 오행 분포표 아이템을 아래 칸으로 넘겨 세로 찌그러짐 방지 (Issue 2) */
    .element-counter-wrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
        /* 오행 분포표 우측 구분선 숨김 (Issue 3) */
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }

    /* 오행 분포 텍스트 라벨 모바일 UI 정렬을 위해 숨김 처리 (Issue 5) */
    .element-counter-wrapper .pillar-title {
        display: none;
    }

    .saju-pillar {
        gap: 5px;
        width: 50px;
    }

    .pillar-title {
        font-size: 0.8rem;
    }

    .saju-char {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
        border-radius: 12px;
    }

    /* 대운/세운/월운 카드 가로 스크롤 최적화 */
    .luck-container {
        padding-bottom: 15px;
        /* 스크롤바 공간 */
        -webkit-overflow-scrolling: touch;
    }

    /* 4. 헤더 및 상단 메뉴 */
    .top-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(15, 23, 42, 0.85);
        backdrop-filter: blur(10px);
        margin-bottom: 15px;
        padding: 40px 10px 10px;
        /* 햄버거 메뉴 공간 확보 */
    }

    /* 햄버거 메뉴 버튼 스타일 (SVG 방식) */
    .menu-toggle {
        display: flex !important;
        position: fixed;
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        background: rgba(34, 211, 238, 0.1);
        border: 1px solid rgba(34, 211, 238, 0.3);
        border-radius: 8px;
        cursor: pointer;
        z-index: 3000;
        transition: all 0.3s ease;
        padding: 0;
        color: #22d3ee;
    }

    /* 메뉴 아이콘 공통 설정 (img 태그) */
    .menu-toggle img {
        width: 24px;
        height: 24px;
        display: none;
        /* 디폴트 숨김 */
    }

    /* 평상시: 햄버거 노출 / X 숨김 */
    .menu-toggle .icon-hamburger {
        display: block !important;
    }

    .menu-toggle .icon-close {
        display: none !important;
    }

    /* Active 상태: 햄버거 숨김 / X 노출 */
    .menu-toggle.active .icon-hamburger {
        display: none !important;
    }

    .menu-toggle.active .icon-close {
        display: block !important;
    }

    /* 드로어 메뉴 스타일 (기록 섹션) */
    .section-left {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100%;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(20px);
        z-index: 2500;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .section-left.active {
        right: 0;
        display: block !important;
    }

    /* 뒤로가기 버튼 스타일 (모바일 전용) */
    .btn-mobile-back {
        display: none;
        /* 기본 숨김, JS로 제어 */
        position: absolute;
        left: 10px;
        top: 15px;
        background: none;
        border: none;
        color: #22d3ee;
        font-size: 1.8rem;
        cursor: pointer;
        z-index: 1100;
        padding: 5px;
    }

    /* 6. 결과창 상단 헤더 및 버튼 겹침 방지 (Issue 6) */
    .result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .btn-prompt-header,
    .btn-close {
        padding: 8px 12px;
        font-size: 0.85rem;
        flex: 1;
        text-align: center;
    }

    /* 유틸리티 */
    .mobile-hidden {
        display: none !important;
    }

    /* 5. 애니메이션 클래스 */
    .fade-transition {
        animation: fadeIn 0.4s ease-out forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 6. 모바일 푸터 최적화 (한 줄 표기) */
    #app-footer {
        padding: 15px 5px;
        gap: 8px;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: center;
        width: 100%;
    }

    .footer-link {
        font-size: 0.70rem;
        padding: 5px 2px;
    }

    .footer-sep {
        font-size: 0.70rem;
        margin: 0 1px;
    }
}