/* StreetAd — 공통 반응형 CSS */ /* 모든 페이지 마지막에 추가: */ /* ========== 태블릿 (768px 이하) ========== */ @media (max-width: 768px) { /* NAV */ nav { padding: 0 16px !important; } .nav-links { display: none !important; } .nav-tabs { gap: 0 !important; overflow-x: auto; } .nav-tab { padding: 0 14px !important; font-size: 12px !important; white-space: nowrap; } /* STEP HEADER */ .step-header { padding: 16px !important; flex-wrap: wrap; gap: 10px !important; } .step-desc { display: none !important; } /* MAIN PADDING */ .main { padding: 16px !important; } /* 2-COLUMN GRID → 1 COLUMN */ .main[style*="grid-template-columns: 1fr 1fr"], .main { grid-template-columns: 1fr !important; } /* STATS GRID */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* CARD */ .card-header { padding: 14px 16px !important; } .card-body { padding: 16px !important; } /* TABLE → 스크롤 */ .table-wrap { overflow-x: auto !important; } table { min-width: 600px; } th, td { padding: 10px 12px !important; font-size: 12px !important; } /* FORM */ .form-row { grid-template-columns: 1fr !important; } /* AD LIST */ .ad-item { flex-wrap: wrap; } /* DELIVERY TRACK */ .delivery-track { overflow-x: auto; padding-bottom: 8px; } .track-label { font-size: 10px !important; } /* ITEM LIST */ .item-list { grid-template-columns: 1fr !important; } /* GUIDE STEPS */ .guide-steps { flex-direction: column !important; gap: 12px !important; } /* CERT BOXES */ .cert-boxes { grid-template-columns: 1fr !important; } /* VEHICLE LIST */ .vehicle-item { flex-wrap: wrap; gap: 8px !important; } /* TODAY STATS */ .today-stats { grid-template-columns: 1fr !important; gap: 8px !important; } /* REWARD SUMMARY */ .reward-amount { font-size: 36px !important; } .reward-breakdown { flex-direction: column !important; gap: 10px !important; } /* BILLING TABLE */ .billing-table { font-size: 11px !important; } .billing-table th, .billing-table td { padding: 8px !important; } /* INPUT GROUP */ .input-group { flex-wrap: wrap; } .input-sm { width: 100% !important; } /* DELIVERY INFO */ .delivery-info { flex-direction: column !important; gap: 16px !important; } /* MAP AREA */ .map-stats { gap: 16px !important; } } /* ========== 모바일 (480px 이하) ========== */ @media (max-width: 480px) { /* NAV */ .nav-logo { font-size: 20px !important; } .nav-badge { font-size: 10px !important; padding: 2px 8px !important; } .btn-refresh, .btn-logout { padding: 6px 10px !important; font-size: 11px !important; } /* STEP HEADER */ .step-title { font-size: 15px !important; } /* STATS */ .stats-grid { grid-template-columns: 1fr 1fr !important; } .stat-val { font-size: 20px !important; } /* CARD HEADER */ .card-header h3 { font-size: 13px !important; } .badge { font-size: 10px !important; padding: 2px 6px !important; } /* REWARD SUMMARY */ .reward-amount { font-size: 30px !important; } /* BLE STATUS */ .ble-status { flex-wrap: wrap; gap: 10px !important; } .ble-rssi { margin-left: 0 !important; } /* VERIFY STATUS */ .verify-status { flex-wrap: wrap; } .verify-badge { margin-left: 0 !important; } /* PAYOUT BTN */ .payout-btn, .btn-submit, .apply-btn { font-size: 13px !important; padding: 12px !important; } /* POINT SETTING */ .point-setting { flex-direction: column !important; align-items: flex-start !important; gap: 12px; } /* AD REWARD */ .ad-reward-val { font-size: 18px !important; } /* MONITOR HEADER */ .monitor-header { flex-wrap: wrap; gap: 8px; } /* TOAST */ .msg-toast { left: 16px !important; right: 16px !important; bottom: 16px !important; } } /* ========== 랜딩페이지 (index.html) 전용 ========== */ @media (max-width: 768px) { .hero { padding: 100px 24px 60px !important; min-height: auto !important; } .hero h1 { font-size: 60px !important; } .hero-desc { font-size: 14px !important; } .hero-buttons { flex-direction: column !important; gap: 12px !important; } .btn-primary, .btn-secondary { text-align: center; padding: 14px 24px !important; } .hero-stats { position: static !important; margin-top: 40px; justify-content: center; gap: 32px !important; } .section { padding: 60px 24px !important; } .section-title { font-size: 32px !important; } .how-grid { grid-template-columns: 1fr !important; gap: 40px !important; } .reward-tabs { width: 100% !important; } .tab-btn { flex: 1; padding: 10px 16px !important; font-size: 13px !important; } .tab-content.active { grid-template-columns: 1fr !important; } .kpi-row { grid-template-columns: 1fr 1fr !important; } .user-kpi-row { grid-template-columns: 1fr !important; } .dash-bottom { grid-template-columns: 1fr !important; } .data-grid { grid-template-columns: 1fr !important; } .structure-flow { flex-direction: column !important; align-items: center !important; } .flow-arrow { transform: rotate(90deg); } footer { padding: 32px 24px !important; } .footer-inner { flex-direction: column !important; gap: 16px; text-align: center; } } @media (max-width: 480px) { .hero h1 { font-size: 48px !important; } .stat-num { font-size: 36px !important; } .section-title { font-size: 28px !important; } .kpi-row { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { section[style*="background:var(--orange)"] div[style*="font-family"] { font-size: 36px !important; } } @media (max-width: 480px) { /* 히어로 텍스트 */ .hero h1 { font-size: 52px !important; line-height: 1.1 !important; } .hero-desc { font-size: 14px !important; } .hero-stats { flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; } /* 수익구조 flow */ .structure-flow { flex-direction: column !important; align-items: center !important; gap: 8px !important; } .flow-arrow { transform: rotate(90deg) !important; padding: 0 !important; } .flow-node { width: 80% !important; } /* HOW IT WORKS */ .how-grid { grid-template-columns: 1fr !important; } /* 탭 */ .tab-content.active { grid-template-columns: 1fr !important; } /* KPI */ .kpi-row { grid-template-columns: 1fr 1fr !important; } .dash-bottom { grid-template-columns: 1fr !important; } } /* 전체 폰트 clamp 적용 */ @media (max-width: 768px) { * { word-break: keep-all !important; overflow-wrap: break-word !important; } h1, .hero h1 { font-size: clamp(32px, 8vw, 72px) !important; line-height: 1.1 !important; } h2, .section-title { font-size: clamp(24px, 6vw, 44px) !important; } .reward-amount, .stat-num { font-size: clamp(28px, 7vw, 52px) !important; } .nav-links { display: none !important; } nav { overflow: hidden !important; } .nav-tab { font-size: clamp(10px, 2.5vw, 13px) !important; padding: 0 8px !important; } } @media (max-width: 768px) { .flow-arrow { transform: none !important; padding: 8px 0 !important; } .arrow-line { width: 2px !important; height: 40px !important; } .arrow-line::after { content: '▼' !important; right: -6px !important; top: auto !important; bottom: -12px !important; } }