/* 모바일 최적화 스타일 */

/* 터치 친화적 기본 설정 */
@media (max-width: 768px) {
    /* 검색 폼 터치 최적화 */
    .search-input,
    input[type="text"],
    input[type="search"] {
        font-size: 16px !important; /* iOS 줌 방지 */
        min-height: 48px;
        padding: 12px 16px;
    }
    
    /* 버튼 터치 최적화 - Apple HIG 권장 */
    .btn,
    button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 24px;
        font-size: 16px;
    }
    
    /* 컨테이너 패딩 조정 */
    .container,
    .main-container {
        padding: 0 12px;
    }
    
    /* 그리드를 1열로 변경 */
    .grid-2,
    .grid-3,
    .grid-4,
    .source-cards {
        grid-template-columns: 1fr !important;
    }
    
    /* 메트릭 카드 2열 */
    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    /* 차트 모바일 스크롤 */
    .chart-container,
    .kw-trend__bars {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 테이블 가로 스크롤 */
    .table-wrapper,
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px; /* 최소 너비 확보 */
    }
    
    /* 네비게이션 간소화 */
    .nav-menu {
        flex-direction: column;
        width: 100%;
    }
    
    .nav-menu li {
        width: 100%;
        text-align: left;
    }
    
    /* 황금 키워드 제안 */
    .golden-auto-suggestions {
        padding: 12px;
    }
    
    .golden-auto-suggestions > div > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }
    
    .golden-auto-suggestions span[style*="display: flex"] {
        width: 100%;
        justify-content: flex-start !important;
    }
    
    /* 키워드 결과 카드 */
    .keyword-result-card {
        padding: 16px;
    }
    
    /* 폰트 크기 조정 */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    /* API 상태 경고 */
    .api-status-warning {
        padding: 12px;
        font-size: 0.875rem;
    }
    
    .api-status-warning > div {
        flex-direction: column;
        gap: 8px;
    }
    
    /* 섹션 간격 줄이기 */
    section,
    .section {
        margin-bottom: 24px;
    }
    
    /* 모달 전체 화면 */
    .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
    }
}

/* 태블릿 최적화 (768px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 24px;
    }
    
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .metric-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 가로 모드 최적화 */
@media (max-width: 768px) and (orientation: landscape) {
    .search-section {
        padding: 20px 0;
    }
    
    .hero-section {
        min-height: auto;
        padding: 40px 0;
    }
}

/* 작은 모바일 (320px ~ 375px) */
@media (max-width: 375px) {
    .btn {
        font-size: 14px;
        padding: 10px 16px;
    }
    
    .metric-grid {
        grid-template-columns: 1fr;
    }
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
}

/* 터치 디바이스 전용 최적화 */
@media (hover: none) and (pointer: coarse) {
    /* 터치 피드백 개선 */
    .btn:active,
    button:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    /* 링크 터치 영역 확대 */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* 호버 효과 제거 (터치에서는 불필요) */
    .golden-auto-suggestions > div > div:hover {
        transform: none;
    }
}