/* 
 * 모바일 반응형 CSS
 * 웹 서비스 전용 추가 스타일
 */

/* ============================================ */
/* 모바일 최적화 (768px 이하) */
/* ============================================ */
@media (max-width: 768px) {

    /* 공통 */
    body {
        font-size: 14px;
    }

    /* 헤더 조정 */
    .v2-header {
        padding: 0 1rem;
        height: 48px;
    }

    .v2-header .icon-box {
        width: 28px;
        height: 28px;
    }

    .v2-header .font-bold {
        font-size: 1rem;
    }

    /* 랜딩 페이지 */
    .hero-section {
        padding: 1.5rem 1rem;
        min-height: calc(100vh - 48px);
    }

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .cta-group {
        flex-direction: column;
        width: 100%;
    }

    .cta-btn {
        width: 100%;
        justify-content: center;
    }

    .features-section {
        padding: 2rem 1rem;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .section-title {
        font-size: 1.5rem !important;
    }

    /* 로그인 페이지 */
    .login-container {
        padding: 1rem;
    }

    .login-card {
        padding: 1.5rem;
    }

    .login-title {
        font-size: 1.25rem;
    }

    .login-icon {
        width: 60px;
        height: 60px;
    }

    /* 가격표 페이지 */
    .pricing-container {
        padding: 2rem 1rem;
    }

    .pricing-title {
        font-size: 1.75rem !important;
    }

    .pricing-subtitle {
        font-size: 1rem !important;
    }

    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .pricing-card {
        padding: 1.5rem;
    }

    .pricing-amount {
        font-size: 2.5rem;
    }

    .comparison-section {
        margin-top: 2rem;
    }

    .comparison-title {
        font-size: 1.5rem;
    }

    .comparison-table {
        font-size: 0.75rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 0.5rem;
    }

    /* 대시보드 */
    .dashboard-container {
        padding: 1rem;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.75rem;
    }

    .service-card {
        padding: 1rem;
    }
}

/* ============================================ */
/* 태블릿 최적화 (769px ~ 1024px) */
/* ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-title {
        font-size: 2.75rem !important;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================ */
/* 터치 인터랙션 개선 */
/* ============================================ */
@media (hover: none) and (pointer: coarse) {

    /* 터치 디바이스에서 버튼 크기 증가 */
    .cta-btn,
    .v2-btn-run,
    .pricing-cta,
    .login-btn {
        min-height: 44px;
        /* iOS 권장 터치 타겟 크기 */
        padding: 0.875rem 1.5rem;
    }

    /* 호버 효과 제거 (터치 디바이스) */
    .feature-card:hover,
    .pricing-card:hover,
    .service-card:hover,
    .stat-card:hover {
        transform: none;
    }

    /* 터치 시 활성 상태 */
    .feature-card:active,
    .pricing-card:active,
    .service-card:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }

    /* 링크 터치 영역 증가 */
    a {
        padding: 0.25rem;
    }
}

/* ============================================ */
/* 작은 모바일 (480px 이하) */
/* ============================================ */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem !important;
    }

    .hero-subtitle {
        font-size: 0.875rem !important;
    }

    .pricing-amount {
        font-size: 2rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .feature-card,
    .pricing-card,
    .service-card {
        padding: 1rem;
    }

    /* 테이블 가로 스크롤 */
    .comparison-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ============================================ */
/* 접근성 개선 */
/* ============================================ */

/* 키보드 포커스 표시 */
*:focus-visible {
    outline: 2px solid #7c5cff;
    outline-offset: 2px;
}

/* 모션 감소 설정 */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 고대비 모드 */
@media (prefers-contrast: high) {

    .v2-header,
    .feature-card,
    .pricing-card,
    .service-card,
    .stat-card {
        border-width: 2px;
    }
}

/* ============================================ */
/* 인쇄 최적화 */
/* ============================================ */
@media print {

    /* 불필요한 요소 숨김 */
    .v2-header,
    .cta-group,
    #logout-btn,
    .pricing-cta,
    .login-btn {
        display: none !important;
    }

    /* 배경 제거 */
    body {
        background: white;
        color: black;
    }

    /* 페이지 나누기 */
    .feature-card,
    .pricing-card,
    .service-card {
        page-break-inside: avoid;
    }
}