/* ============================================
   모바일 최적화 CSS
   - 터치 영역 보장 (최소 44x44px)
   - 폰트 크기 가독성 개선
   - 네비게이션 및 레이아웃 최적화
   ============================================ */

/* 태블릿 및 모바일 (768px 이하) */
@media (max-width: 768px) {

    /* === 기본 폰트 크기 ==== */
    body {
        font-size: 16px;
        /* iOS 자동 줌 방지 */
    }

    /* === 터치 영역 보장 === */
    button,
    .btn,
    a.btn,
    .btn-quick-nav,
    .quick-menu-header-btn,
    .nav-btn,
    .btn-tab,
    .option-buttons button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 14px;
    }

    /* === 헤더 최적화 === */
    .header-top {
        padding: 12px 15px;
        flex-wrap: nowrap;
    }

    .logo a {
        font-size: 1.5em;
    }

    .contact-info .tel {
        font-size: 1.1em;
    }

    /* AI 플래너 링크 모바일 최적화 */
    .ai-calculator-link-header {
        padding: 0 40px;
        height: 38px;
        font-size: 0.9em;
    }

    .ai-calculator-link-header .ai-icon {
        height: 55px;
        left: 15px;
    }

    /* === 네비게이션 최적화 === */
    .category-nav {
        padding: 10px 0;
    }

    .category-nav ul {
        gap: 12px;
        padding: 0 10px;
    }

    .category-nav ul a {
        font-size: 0.85em;
        padding: 8px 5px;
    }

    /* === 히어로 섹션 === */
    .hero-swiper {
        height: 400px;
    }

    .hero-slide-content {
        padding: 60px 15px;
    }

    .hero-slide-content h1 {
        font-size: 2rem;
        /* 32px */
        margin-bottom: 0.8rem;
    }

    .hero-slide-content .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .hero-btn-group {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .hero-btn-group .btn {
        width: 100%;
    }

    /* === 섹션 패딩 조정 === */
    .section {
        padding: 50px 0;
    }

    .section-title {
        font-size: 1.8em;
        margin-bottom: 0.5em;
    }

    .section-subtitle {
        font-size: 0.95em;
    }

    /* === Quick Nav 버튼 === */
    .quick-nav-buttons {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .btn-quick-nav {
        padding: 15px 10px;
        font-size: 0.85em;
    }

    .btn-quick-nav i {
        font-size: 20px;
    }

    /* === AI 스캐너 === */
    .ai-scanner-container {
        height: 350px;
        max-width: 500px;
    }

    .ai-scanner-core {
        width: 80px;
        height: 80px;
        font-size: 20px;
    }

    /* 스캐너 카드 거리 조정 */
    .scanner-card:nth-child(1) {
        transform: rotate(0deg) translateY(-150px) rotate(0deg);
    }

    .scanner-card:nth-child(2) {
        transform: rotate(60deg) translateY(-150px) rotate(-60deg);
    }

    .scanner-card:nth-child(3) {
        transform: rotate(120deg) translateY(-150px) rotate(-120deg);
    }

    .scanner-card:nth-child(4) {
        transform: rotate(180deg) translateY(-150px) rotate(-180deg);
    }

    .scanner-card:nth-child(5) {
        transform: rotate(240deg) translateY(-150px) rotate(-240deg);
    }

    .scanner-card:nth-child(6) {
        transform: rotate(300deg) translateY(-150px) rotate(-300deg);
    }

    /* === 계산기 섹션 === */
    .calculator-wrapper {
        flex-direction: column;
    }

    .selection-panel,
    .quote-panel {
        width: 100%;
        min-height: auto;
    }

    /* === 폼 입력 === */
    input,
    select,
    textarea {
        font-size: 16px;
        /* iOS 자동 줌 방지 */
        min-height: 44px;
    }

    /* === 카드 그리드 === */
    .trust-elements {
        flex-direction: column;
        gap: 30px;
    }

    .review-grid,
    .event-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* === Sticky Bar === */
    .summary-sticky-bar {
        padding: 12px 15px;
    }

    .summary-sticky-bar-content {
        flex-direction: column;
        gap: 10px;
    }

@media (max-width: 768px) {

    /* === 기본 폰트 크기 ==== */
    body {
        font-size: 16px;
        /* iOS 자동 줌 방지 */
    }

    /* === 터치 영역 보장 === */
    button,
    .btn,
    a.btn,
    .btn-quick-nav,
    .quick-menu-header-btn,
    .nav-btn,
    .btn-tab,
    .option-buttons button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 14px;
    }

    /* === 헤더 최적화 === */
    .header-top {
        padding: 12px 15px;
        flex-wrap: nowrap;
    }

    .logo a {
        font-size: 1.5em;
    }

    .contact-info .tel {
        font-size: 1.1em;
    }

    /* AI 플래너 링크 모바일 최적화 */
    .ai-calculator-link-header {
        padding: 0 40px;
        height: 38px;
        font-size: 0.9em;
    }

    .ai-calculator-link-header .ai-icon {
        height: 55px;
        left: 15px;
    }

    /* === 네비게이션 최적화 === */
    .category-nav {
        padding: 10px 0;
    }

    .category-nav ul {
        gap: 12px;
        padding: 0 10px;
    }

    .category-nav ul a {
        font-size: 0.85em;
        padding: 8px 5px;
    }

    /* === 히어로 섹션 === */
    .hero-swiper {
        height: 400px;
    }

    .hero-slide-content {
        padding: 60px 15px;
    }

    .hero-slide-content h1 {
        font-size: 2rem;
        /* 32px */
        margin-bottom: 0.8rem;
    }

    .hero-slide-content .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .hero-btn-group {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .hero-btn-group .btn {
        width: 100%;
    }

    /* === 섹션 패딩 조정 === */
    .section {
        padding: 50px 0;
    }

    .section-title {
        font-size: 1.8em;
        margin-bottom: 0.5em;
    }

    .section-subtitle {
        font-size: 0.95em;
    }

    /* === Quick Nav 버튼 === */
    .quick-nav-buttons {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .btn-quick-nav {
        padding: 15px 10px;
        font-size: 0.85em;
    }

    .btn-quick-nav i {
        font-size: 20px;
    }

    /* === AI 스캐너 === */
    .ai-scanner-container {
        height: 350px;
        max-width: 500px;
    }

    .ai-scanner-core {
        width: 80px;
        height: 80px;
        font-size: 20px;
    }

    /* 스캐너 카드 거리 조정 */
    .scanner-card:nth-child(1) {
        transform: rotate(0deg) translateY(-150px) rotate(0deg);
    }

    .scanner-card:nth-child(2) {
        transform: rotate(60deg) translateY(-150px) rotate(-60deg);
    }

    .scanner-card:nth-child(3) {
        transform: rotate(120deg) translateY(-150px) rotate(-120deg);
    }

    .scanner-card:nth-child(4) {
        transform: rotate(180deg) translateY(-150px) rotate(-180deg);
    }

    .scanner-card:nth-child(5) {
        transform: rotate(240deg) translateY(-150px) rotate(-240deg);
    }

    .scanner-card:nth-child(6) {
        transform: rotate(300deg) translateY(-150px) rotate(-300deg);
    }

    /* === 계산기 섹션 === */
    .calculator-wrapper {
        flex-direction: column;
    }

    .selection-panel,
    .quote-panel {
        width: 100%;
        min-height: auto;
    }

    /* === 폼 입력 === */
    input,
    select,
    textarea {
        font-size: 16px;
        /* iOS 자동 줌 방지 */
        min-height: 44px;
    }

    /* === 카드 그리드 === */
    .trust-elements {
        flex-direction: column;
        gap: 30px;
    }

    .review-grid,
    .event-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* === Sticky Bar === */
    .summary-sticky-bar {
        padding: 12px 15px;
    }

    .summary-sticky-bar-content {
        flex-direction: column;
        gap: 10px;
    }

    /* === 모달 === */
    .modal-content {
        width: 95%;
        max-width: 95%;
        padding: 20px;
        margin: 20px auto;
    }

    /* === 비밀혜택 모달 모바일 === */
    .secret-benefit-content { flex-direction: column; }
    .benefit-visual { flex-basis: auto; height: 180px; padding: 20px; border-radius: 16px 16px 0 0; flex-shrink: 0; }
    .benefit-visual h2 { display: none; }
    .benefit-form { flex-basis: auto; padding: 30px 20px; overflow-y: auto; flex-grow: 1; }
    .benefit-visual video { transform: translate(-50%, -30%); }
    #qs-telecom-options { grid-template-columns: repeat(3, 1fr); }

    /* === 버튼 그룹 === */
    .button-group-quote {
        flex-direction: column;
    }

    .button-group-quote .btn {
        width: 100%;
    }
}

    /* === 버튼 그룹 === */
    .button-group-quote {
        flex-direction: column;
    }

    .button-group-quote .btn {
        width: 100%;
    }
}

/* 소형 모바일 (360px 이하) */
@media (max-width: 360px) {

    /* === 더 작은 폰트 === */
    .hero-swiper {
        height: 350px;
    }

    .hero-slide-content h1 {
        font-size: 1.75rem;
        /* 28px */
    }

    .logo a {
        font-size: 1.3em;
    }

    .contact-info .tel {
        font-size: 1em;
    }

    /* === 네비게이션 더 축소 === */
    .category-nav ul {
        gap: 8px;
    }

    .category-nav ul a {
        font-size: 0.8em;
        padding: 6px 3px;
    }

    /* === Quick Nav 2열로 === */
    .quick-nav-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    /* === AI 스캐너 더 축소 === */
    .ai-scanner-container {
        height: 300px;
    }

    .scanner-card {
        width: 100px;
        height: 70px;
    }

    .scanner-card img {
        max-width: 70px;
        max-height: 35px;
    }
}

/* 가로 모드 모바일 최적화 */
@media (max-width: 768px) and (orientation: landscape) {

    .hero-swiper {
        height: 100vh;
        min-height: 400px;
    }

    .hero-slide-content {
        padding: 40px 15px;
    }

    .hero-slide-content h1 {
        font-size: 1.8rem;
    }
}

/* 터치 디바이스 전용 최적화 */
@media (hover: none) and (pointer: coarse) {

    /* 터치 피드백 강화 */
    button:active,
    .btn:active,
    a:active {
        opacity: 0.7;
        transform: scale(0.98);
    }

    /* 호버 효과 제거 (터치 디바이스에서 불필요) */
    button:hover,
    .btn:hover,
    a:hover {
        transform: none;
    }

    /* 스크롤 성능 개선 */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

    /* 스크롤 스냅 부드럽게 */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}