/* static/css/mobile.css */
/* 반응형 CSS — 태블릿(1024px), 모바일(768px), 아이폰 미니(375px) */

/* =========================================
   태블릿 (1024px 이하)
   ========================================= */
@media screen and (max-width: 1024px) {
    /* 공통 */
    .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
    .section-grid { grid-template-columns: 1fr !important; }
    .product-list { grid-template-columns: repeat(3, 1fr) !important; }

    /* 백오피스 사이드바 — 태블릿에서 축소 (어드민+파트너 공통) */
    .sidebar { display: flex !important; flex-direction: column !important; width: 180px !important; font-size: 0.8rem; flex-shrink: 0 !important; position: static !important; left: auto !important; height: auto !important; }
    .menu-item { padding: 8px 12px !important; font-size: 0.8rem !important; }
    .menu-label, .menu-cat { font-size: 0.6rem !important; padding: 8px 12px 3px !important; }
    .logo-area { font-size: 0.95rem !important; padding: 12px 10px !important; }
    .admin-profile, .user-profile, .partner-profile-module, .admin-profile-module { display: none !important; }
    .mobile-header { display: none !important; }

    /* 메인 컨텐츠 — 사이드바 빼고 나머지 공간 차지 */
    .main-content, .workspace { flex: 1 !important; min-width: 0 !important; overflow-x: hidden !important; }
    .content-wrapper { padding: 15px !important; }
    .topbar { padding: 0 15px !important; }

    /* 통계 카드 */
    .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .stat-value { font-size: 1.5rem !important; }

    /* 그리드 */
    .dashboard-grid { grid-template-columns: 1fr !important; gap: 15px !important; }

    /* 테이블 */
    .table-container { overflow-x: auto; }
    table { font-size: 0.8rem; }

    /* 이용약관 / 개인정보처리방침 */
    body > .container > .card { padding: 25px !important; }
    body > .container > .card h1 { font-size: 1.5rem !important; }
    body > .container > .card h2 { font-size: 1rem !important; }
    body > .container > .card table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* =========================================
   모바일 (768px 이하)
   ========================================= */
@media screen and (max-width: 768px) {
    /* 공통 레이아웃 */
    body {
        flex-direction: column !important;
        height: auto !important;
        overflow-y: auto !important;
        font-size: 14px;
    }

    /* 백오피스 사이드바 — 모바일에서 숨김 (햄버거로 대체) */
    .sidebar {
        display: none !important;
    }
    /* 모바일에서 자체 모바일 헤더 다시 보이기 (1024px 구간에서 숨긴 것 복구) */
    .mobile-header { display: flex !important; }

    /* 메인 컨텐츠 */
    .main-content { padding: 0 !important; overflow: visible !important; }
    .topbar { height: 50px !important; padding: 0 15px !important; }
    .topbar-title { font-size: 1rem !important; }
    .content-wrapper { padding: 15px !important; }

    /* 통계 카드 */
    .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .stat-card { padding: 15px !important; }
    .stat-value { font-size: 1.5rem !important; }
    .stat-icon { font-size: 1.8rem !important; }

    /* 테이블 */
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 500px; font-size: 0.85rem; }
    th, td { padding: 8px 10px !important; }

    /* 제품 그리드 */
    .product-list { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .p-icon { height: 100px !important; }
    .p-name { font-size: 0.9rem !important; min-height: auto !important; }

    /* 카드 그리드 */
    .card-grid, .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

    /* 상담 화면 */
    .brand-filter-area { display: none !important; }
    .step-list {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding-bottom: 5px !important;
    }
    .step-item { font-size: 0.8rem; padding: 8px 12px; flex-shrink: 0; }
    .question-wrapper { padding-bottom: 80px; }
    .footer-nav {
        left: 0 !important; bottom: 0 !important; width: 100% !important;
        padding: 15px !important; box-sizing: border-box;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(5px);
        z-index: 999;
    }

    /* 결과 카드 */
    .rc-body { flex-direction: column !important; align-items: center; text-align: center; }
    .rc-thumb { margin-bottom: 15px; margin-right: 0 !important; }
    .rc-info { width: 100%; text-align: left; }
    .rc-score { width: 100%; text-align: center; height: auto !important; }
    .script-area { display: none !important; }

    /* 상세 화면 */
    .expert-container { flex-direction: column !important; height: auto !important; overflow: visible !important; }
    .client-list-area { width: 100% !important; height: 300px !important; border-right: none !important; border-top: 5px solid #eee; }
    .detail-area { width: 100% !important; height: auto !important; padding: 20px !important; overflow: visible !important; }

    /* ── 파트너 공통: 본문 풀폭 + 스크롤 ── */
    .main-content, .scroll-area { width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; }
    .scroll-area { padding: 15px !important; overflow-y: auto !important; }
    .welcome-msg h2 { font-size: 1.1rem !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; }
    .plan-badge { font-size: 0.65rem !important; padding: 3px 8px !important; }

    /* 파트너 대시보드 */
    .stats-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .stat-card { height: auto !important; padding: 18px !important; }
    .stat-value { font-size: 1.5rem !important; }
    .dashboard-row { grid-template-columns: 1fr !important; gap: 15px !important; }
    .content-card { padding: 15px !important; overflow: visible !important; }
    .content-card .table-wrapper { overflow-x: auto !important; }
    .content-card table { min-width: 0 !important; width: 100% !important; }
    .quick-actions { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .limit-container { flex-wrap: wrap !important; gap: 10px !important; }
    .limit-bar-wrap { width: 100% !important; margin: 0 !important; order: 3; }

    /* 파트너 설정 */
    .settings-grid { grid-template-columns: 1fr !important; }
    .set-card { grid-column: span 1 !important; overflow: hidden !important; word-break: break-word !important; }
    .form-row { grid-template-columns: 1fr !important; }
    .form-full { grid-column: span 1 !important; }
    .form-input, input[type="time"], input[type="text"], input[type="month"], select, textarea { width: 100% !important; box-sizing: border-box !important; }
    .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .page-header > div { flex-wrap: wrap !important; }
    .page-header h2 { font-size: 1.2rem !important; white-space: nowrap !important; }

    .check-group { flex-wrap: wrap !important; overflow: hidden !important; }
    .check-item { flex-shrink: 0 !important; }

    /* 파트너 고객 리스트 */
    .client-table { min-width: 0 !important; width: 100% !important; }
    .client-table th, .client-table td { padding: 8px !important; font-size: 0.8rem !important; white-space: normal !important; }
    .form-grid { grid-template-columns: 1fr !important; }
    .section-sub-title { grid-column: span 1 !important; }

    /* 파트너 매출 */
    .kpi-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .kpi-card { padding: 18px !important; }
    .chart-row { grid-template-columns: 1fr !important; }

    /* 파트너 설정 — 저장 버튼 축소 */
    .btn-save-main { padding: 10px 10px !important; font-size: 0.7rem !important; }

    /* 파트너 일정 — FullCalendar 모바일 대응 */
    .calendar-wrapper { padding: 10px !important; overflow: visible !important; }
    .fc-toolbar { flex-wrap: wrap !important; gap: 8px !important; }
    .fc-toolbar-title { font-size: 1rem !important; }
    .fc-button { padding: 4px 8px !important; font-size: 0.75rem !important; }
    .fc-header-toolbar { margin-bottom: 10px !important; }
    .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap !important; }

    /* 파트너 메시지 — 우측 패널 모바일 대응 */
    .panel-right { width: 100% !important; border-left: none !important; border-top: 1px solid #ddd !important; position: relative !important; }
    .asset-list { max-height: 50vh !important; overflow-y: auto !important; }
    .panel-right::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0; left: 0; right: 0;
        height: 40px !important;
        background: linear-gradient(transparent, rgba(253,253,253,0.95)) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    /* 변수 태그 가로 스크롤 (메시지/SMS 공통) */
    .variable-tags, .tag-list, .var-tags { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 8px !important; padding-bottom: 5px !important; }
    .variable-tags .tag, .tag-list .tag, .var-tags .tag, .var-btn { flex-shrink: 0 !important; }
    .msg-footer { flex-wrap: wrap !important; gap: 8px !important; }
    .msg-footer > div:first-child { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 6px !important; padding-bottom: 4px !important; }

    /* 파트너 견적서 */
    .quote-grid { grid-template-columns: 1fr !important; }

    /* 어드민 대시보드 — 인라인 그리드 덮기 */
    .section-grid[style] { grid-template-columns: 1fr !important; }
    .panel { overflow: hidden !important; }
    .panel-header { flex-wrap: wrap !important; gap: 8px !important; }
    .panel-header h3 { font-size: 0.95rem !important; white-space: nowrap !important; }
    .panel-header .btn-sm { font-size: 0.75rem !important; padding: 5px 8px !important; white-space: nowrap !important; }
    .panel-header select { font-size: 0.85rem !important; padding: 5px 8px !important; }
    .kpi-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .kpi-card { padding: 15px !important; }
    .kpi-value { font-size: 1.5rem !important; }
    /* 리드/리뷰 카드 내부 */
    .data-table tbody td .badge, .data-table tbody td .btn-sm { font-size: 0.7rem !important; padding: 3px 8px !important; }
    .data-table tbody td { max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; }

    /* 백과사전 */
    .rank-scroll { gap: 10px; }
    .rank-card { min-width: 120px; padding: 12px; }
    .search-input { font-size: 0.9rem; padding: 12px 15px 12px 40px; }
    .brand-chip { font-size: 0.85rem !important; padding: 6px 14px !important; }

    /* 견적서 */
    .control-panel { width: 100% !important; height: auto !important; max-height: 40vh !important; border-right: none !important; }
    .preview-area { width: 100% !important; padding: 10px !important; }
    .a4-paper { width: 100% !important; min-height: auto !important; padding: 10mm !important; font-size: 0.6rem !important; }
    .btn-print { position: fixed !important; bottom: 10px; right: 10px; left: 10px; width: calc(100% - 20px) !important; z-index: 100; }

    /* 팝업/모달 */
    .modal-box, .lead-popup { width: 95% !important; max-width: none !important; margin: 10px; }
    .lp-container { width: 95% !important; max-width: none !important; }

    /* 메인 네비게이션 */
    header { height: auto !important; padding: 10px 0 !important; }
    .header-inner { flex-wrap: wrap !important; gap: 10px; }
    .nav { display: none !important; }
    .header-utils { display: none !important; }
    .logo { font-size: 1.2rem !important; }
    .nav-bar { padding: 10px 15px !important; }
    .nav-bar .logo { font-size: 1.1rem !important; }

    /* 히어로/배너 */
    .hero { padding: 20px 0 !important; min-height: auto !important; }
    .hero h1 { font-size: 1.3rem !important; line-height: 1.4 !important; }
    .hero p { font-size: 0.85rem !important; }
    .hero-content { padding: 0 15px !important; }
    .search-wrapper { padding: 15px !important; margin-top: 0 !important; position: relative; z-index: 10; background: #1a1a2e !important; color: white !important; }
    .search-wrapper h2 { color: white !important; }
    .search-wrapper h2 { font-size: 1.1rem !important; }
    .search-header { margin-bottom: 10px !important; }
    .search-console { flex-direction: column !important; padding: 15px !important; border-radius: 12px !important; }
    .sc-inputs { flex-direction: column !important; gap: 10px !important; }
    .sc-select { width: 100% !important; border-right: none !important; border-bottom: 1px solid #eee; padding: 12px !important; }
    .sc-input-box { width: 100% !important; }
    .btn-search { width: 100% !important; padding: 14px !important; }

    /* 하이브리드 그리드 (매거진 + 리뷰) */
    .hybrid-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    .magazine-box { min-height: 200px !important; padding: 20px !important; }
    .magazine-box h3 { font-size: 1.3rem !important; }

    /* 리뷰 카드 */
    .review-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .review-card { padding: 15px !important; }

    /* 섹션 패딩 */
    section, .container { padding: 0 15px !important; }
    .sec-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px; }

    /* 스텝 카드 (국가지원금 등) — 세로 정렬 */
    .step-list {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .step-card {
        width: 100% !important;
        min-width: auto !important;
        white-space: normal !important;
        word-break: keep-all !important;
        flex-direction: row !important;
    }
    .step-content { overflow: hidden; flex: 1; }
    .step-icon { display: none !important; }
    .step-card::after { display: none !important; }

    /* 가로 넘침 근본 방지 */
    *, *::before, *::after { box-sizing: border-box !important; }
    img, video, canvas { max-width: 100% !important; }
    html, body { overflow-x: hidden !important; width: 100% !important; }
    body { height: auto !important; overflow-y: auto !important; }
    .main-content, .workspace, .content-wrapper { padding: 10px !important; }
    .dashboard-grid { grid-template-columns: 1fr !important; }

    /* 테이블 → 카드 리스트 변환 (data-table / client-table 만 대상, FullCalendar·staff-table 제외) */
    .data-table, .client-table { border: none !important; }
    .data-table thead, .client-table thead { display: none !important; }
    .data-table tbody tr, .client-table tbody tr {
        display: block !important;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 12px 15px !important;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .data-table tbody td, .client-table tbody td {
        display: block !important;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.85rem !important;
        text-align: left;
    }
    .data-table tbody td:last-child, .client-table tbody td:last-child { border-bottom: none; }
    .data-table tbody td[data-label], .client-table tbody td[data-label] {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        text-align: right;
    }
    .data-table tbody td[data-label]::before, .client-table tbody td[data-label]::before {
        content: attr(data-label);
        font-weight: 700;
        color: #374151;
        text-align: left;
        flex-shrink: 0;
        margin-right: 10px;
    }

    /* 플로팅 버튼 */
    .floating-btn { bottom: 20px !important; right: 15px !important; padding: 12px 18px !important; font-size: 0.85rem !important; z-index: 9999 !important; }

    /* 로그인 */
    .login-container { flex-direction: column !important; width: 100% !important; height: auto !important; border-radius: 0 !important; margin-top: 0 !important; }
    .brand-section { flex: none !important; padding: 30px !important; }
    .form-section { flex: none !important; padding: 30px !important; }
    body > div[style*="margin-top"] { margin-top: 15px !important; padding-top: 10px !important; }

    /* 차트 */
    .chart-container { height: 250px !important; }

    /* 애니메이션 */
    @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

    /* 이용약관 / 개인정보처리방침 */
    body > .container > .card { padding: 18px !important; }
    body > .container > .card h1 { font-size: 1.3rem !important; }
    body > .container > .card h2 { font-size: 0.95rem !important; }
    body > .container > .card p,
    body > .container > .card li { font-size: 0.85rem !important; }
    body > .container > .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.8rem; }
    body > .container > .card table th,
    body > .container > .card table td { padding: 8px; white-space: nowrap; }
}

/* =========================================
   아이폰 미니 (375px 이하)
   ========================================= */
@media screen and (max-width: 375px) {
    body { font-size: 13px; }

    /* 사이드바 더 축소 */
    .menu-item { padding: 6px 10px !important; font-size: 0.75rem !important; }
    .logo-area { font-size: 1rem !important; padding: 10px !important; }

    /* 통계 카드 1열 */
    .stats-row { grid-template-columns: 1fr !important; }
    .stat-value { font-size: 1.3rem !important; }

    /* 제품 1열 */
    .product-list { grid-template-columns: 1fr !important; }
    .card-grid, .grid-4 { grid-template-columns: 1fr !important; }

    /* 테이블 더 축소 */
    table { font-size: 0.75rem; }
    th, td { padding: 6px 8px !important; }

    /* 플로팅 버튼 */
    .floating-btn { padding: 10px 14px !important; font-size: 0.8rem !important; bottom: 15px !important; right: 10px !important; }
    .floating-btn .text { display: none; }
    .floating-btn i { font-size: 1.2rem; }

    /* 입력 폼 */
    .form-input, .input-field, .lp-input { font-size: 0.85rem !important; padding: 10px !important; }

    /* 네비 바 */
    .nav-bar { padding: 10px 12px !important; }
    .logo { font-size: 1rem !important; }

    /* 랭킹 카드 */
    .rank-card { min-width: 110px; padding: 10px; }
    .rank-name { font-size: 0.75rem; }

    /* 패널/카드 패딩 축소 */
    .panel { padding: 12px !important; }
    .content-wrapper, .scroll-area { padding: 8px !important; }
    .data-table tbody tr, .client-table tbody tr { padding: 8px 10px !important; }
    .content-card { padding: 10px !important; }
    .kpi-card { padding: 10px !important; }

    /* 모달 */
    .modal-box { padding: 15px !important; }
    .lp-body { padding: 15px !important; }
    .lp-step-title { font-size: 1rem !important; }
    .lp-opt-btn { padding: 10px 12px !important; font-size: 0.85rem !important; }
}