/* ============================================
   메인 화면 반응형 스타일
   (세로/가로 모드 모두 포함)
   ============================================ */

/* ============================================
   세로 모드
   ============================================ */

/* 모바일 세로 모드 (768px 이하) */
@media (max-width: 768px) and (orientation: portrait) {
    .main-screen {
        padding: 1.5rem 1rem;
        min-height: 100vh;
    }
    
    .main-screen .title {
        font-size: clamp(2rem, 10vw, 3.5rem);
        margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
    }
    
    .main-screen .mode-selection {
        flex-direction: column;
        gap: 1.5rem;
        max-width: 100%;
        width: 100%;
    }
    
    .main-screen .mode-btn {
        width: 100%;
        max-width: 100%;
        min-width: auto !important;
        padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2rem);
    }
    
    .main-screen .mode-btn h2 {
        font-size: clamp(1.1rem, 5vw, 1.8rem);
        margin-bottom: clamp(0.4rem, 1vw, 0.6rem);
    }
    
    .main-screen .mode-btn p {
        font-size: clamp(0.75rem, 2.5vw, 1rem);
    }
}

/* 작은 모바일 세로 모드 (480px 이하) */
@media (max-width: 480px) and (orientation: portrait) {
    .main-screen {
        padding: 1rem 0.75rem;
    }
    
    .main-screen .title {
        font-size: clamp(1.75rem, 12vw, 2.5rem);
        margin-bottom: clamp(1rem, 3vh, 2rem);
    }
    
    .main-screen .mode-selection {
        gap: 1rem;
    }
    
    .main-screen .mode-btn {
        padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 1.5rem);
        border-radius: 15px;
        min-width: auto !important;
    }
    
    .main-screen .mode-btn h2 {
        font-size: clamp(1rem, 5.5vw, 1.6rem);
        margin-bottom: clamp(0.3rem, 1vw, 0.5rem);
    }
    
    .main-screen .mode-btn p {
        font-size: clamp(0.7rem, 3vw, 0.95rem);
    }
}

/* ============================================
   가로 모드
   ============================================ */

/* 모바일 가로 모드 (768px 이하, 가로 방향) */
@media (max-width: 768px) and (orientation: landscape) {
    .main-screen {
        padding: 1rem;
        min-height: 100vh;
    }
    
    .main-screen .title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
        margin-bottom: clamp(1rem, 3vh, 1.5rem);
    }
    
    .main-screen .mode-selection {
        flex-direction: row;
        gap: 1rem;
        max-width: 100%;
    }
    
    .main-screen .mode-btn {
        flex: 1;
        min-width: clamp(120px, 20vw, 150px) !important;
        max-width: clamp(180px, 35vw, 300px);
        padding: clamp(1rem, 2vw, 1.25rem) clamp(1.25rem, 2.5vw, 1.5rem);
    }
    
    .main-screen .mode-btn h2 {
        font-size: clamp(1rem, 4vw, 1.4rem);
        margin-bottom: clamp(0.3rem, 0.8vw, 0.4rem);
    }
    
    .main-screen .mode-btn p {
        font-size: clamp(0.7rem, 2.2vw, 0.9rem);
    }
}

/* 작은 모바일 가로 모드 (500px 이하, 가로 방향) */
@media (max-width: 500px) and (orientation: landscape) {
    .main-screen {
        padding: 0.75rem;
    }
    
    .main-screen .title {
        font-size: clamp(1.25rem, 7vw, 2rem);
        margin-bottom: clamp(0.75rem, 2vh, 1rem);
    }
    
    .main-screen .mode-selection {
        gap: 0.75rem;
    }
    
    .main-screen .mode-btn {
        padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.25rem);
        min-width: clamp(100px, 18vw, 120px) !important;
        max-width: clamp(150px, 30vw, 250px);
    }
    
    .main-screen .mode-btn h2 {
        font-size: clamp(0.9rem, 4.5vw, 1.2rem);
        margin-bottom: clamp(0.25rem, 0.6vw, 0.3rem);
    }
    
    .main-screen .mode-btn p {
        font-size: clamp(0.65rem, 2.5vw, 0.8rem);
    }
}

/* 태블릿 가로 모드 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .main-screen {
        padding: 2rem;
    }
    
    .main-screen .title {
        font-size: clamp(3rem, 6vw, 4rem);
        margin-bottom: clamp(2rem, 4vh, 3rem);
    }
    
    .main-screen .mode-selection {
        gap: 2rem;
        max-width: 700px;
    }
    
    .main-screen .mode-btn {
        padding: 2rem 3rem;
    }
}