/* ============================================================
   v28 — Mobile UX Overhaul
   참고: Toss, Apple HIG, Google Material 3, Supabase
   터치 최적화 · 카드 디자인 · 타이포그래피 · 모달 · 내비 · 피드백
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   1. 카드 디자인 — Toss/Apple 스타일
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* 카드: 더 부드러운 그림자 + 큰 라운드 */
  .card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    background: var(--c-surface);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  [data-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.06);
  }
  /* 카드 터치 피드백 */
  .card:active:not(.no-press) {
    transform: scale(0.98);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  }
  /* 카드 내부 패딩 통일 */
  .card {
    padding: 16px;
  }
  .card .card-head {
    padding: 0;
    margin-bottom: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   2. 타이포그래피 — 모바일 가독성 강화
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  /* 페이지 제목: 컴팩트하게 */
  .section-head .h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
  }
  .section-head .sub {
    font-size: 13px;
    color: var(--c-text-mute);
    margin-top: 2px;
  }
  /* 카드 제목 */
  .card .h3, .card-head .h3 {
    font-size: 15px;
    font-weight: 700;
  }
  /* 본문 텍스트 */
  .card p, .card .small {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* ═══════════════════════════════════════════════════════════
   3. 탑바 — Apple 스타일 컴팩트 헤더
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .topbar {
    height: 52px;
    padding: 0 12px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(255,255,255,0.85);
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
  }
  [data-theme="dark"] .topbar {
    background: rgba(10,24,22,0.85);
    border-bottom-color: rgba(255,255,255,0.08);
  }
  /* 브랜드 로고 축소 */
  .topbar .brand .brand-logo-img {
    height: 18px;
  }
  .topbar .brand .brand-symbol {
    width: 24px;
    height: 24px;
  }
  /* 액션 버튼 간격 축소 */
  .topbar-actions {
    gap: 4px;
  }
  .topbar-actions .icon-btn {
    width: 36px;
    height: 36px;
  }
  /* 날씨 칩 컴팩트 */
  .weather-chip {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 12px;
  }
  .weather-chip .temp {
    font-size: 13px;
    font-weight: 700;
  }
  .weather-chip .weather-loc {
    display: none;
  }
  /* 검색 박스 축소 */
  .search-box {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   4. 사이드내비 드로어 — Material 3 스타일
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .sidenav {
    border-radius: 0 24px 24px 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    width: 280px;
    padding: 16px 12px;
  }
  [data-theme="dark"] .sidenav {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  /* 메뉴 아이템 간격 */
  .sidenav .nav-item {
    border-radius: 12px;
    padding: 10px 14px;
    margin: 1px 0;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease;
  }
  .sidenav .nav-item:active {
    background: var(--c-surface-3);
  }
  .sidenav .nav-item.active {
    background: var(--c-primary-soft, rgba(136,199,20,0.12));
    color: var(--c-primary);
    font-weight: 700;
  }
  /* 섹션 구분선 */
  .sidenav .nav-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-text-mute);
    padding: 16px 14px 6px;
  }
  /* 스크림 개선 */
  .scrim.drawer-only {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
  }
}

/* ═══════════════════════════════════════════════════════════
   5. 하단 탭바 — iOS/Toss 스타일
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .mobile-tab-bar {
    display: flex;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 0.5px solid rgba(0,0,0,0.08);
    box-shadow: 0 -1px 8px rgba(0,0,0,0.04);
  }
  [data-theme="dark"] .mobile-tab-bar {
    background: rgba(10,24,22,0.96);
    border-top-color: rgba(255,255,255,0.08);
    box-shadow: 0 -1px 8px rgba(0,0,0,0.2);
  }
  .mobile-tab-bar .tab-item {
    font-size: 10px;
    letter-spacing: -0.1px;
  }
  .mobile-tab-bar .tab-item [data-lucide] {
    stroke-width: 1.6;
  }
  .mobile-tab-bar .tab-item:active {
    transform: scale(0.88);
    transition: transform 0.1s ease;
  }
  .mobile-tab-bar .tab-item.active {
    color: var(--c-primary);
  }
  .mobile-tab-bar .tab-item.active::after {
    width: 20px;
    height: 2.5px;
    border-radius: 2px;
    top: -2px;
  }
}

/* ═══════════════════════════════════════════════════════════
   6. 버튼 & 인터랙티브 — 터치 피드백 강화
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* 기본 버튼 */
  .btn {
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    transition: transform 0.12s ease, opacity 0.12s ease;
  }
  .btn:active {
    transform: scale(0.96);
    opacity: 0.85;
  }
  /* Primary 버튼 */
  .btn.primary, .btn-primary {
    box-shadow: 0 2px 8px rgba(136,199,20,0.3);
  }
  /* Chip/Pill */
  .chip {
    border-radius: 8px;
    font-size: 12px;
    padding: 4px 10px;
    font-weight: 600;
  }
  /* 아이콘 버튼 */
  .icon-btn {
    border-radius: 12px;
    transition: transform 0.12s ease;
  }
  .icon-btn:active {
    transform: scale(0.88);
  }
}

/* ═══════════════════════════════════════════════════════════
   7. KPI 카드 — Toss 스타일 숫자 강조
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .kpi {
    border-radius: 16px;
    padding: 14px 16px;
    text-align: left;
  }
  .kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-mute);
    margin-bottom: 6px;
    letter-spacing: 0;
  }
  .kpi-value {
    font-size: 24px !important;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
  }
  .kpi-delta {
    font-size: 12px;
    margin-top: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   8. 모달/바텀시트 — iOS Action Sheet 스타일
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  /* 일반 모달 오버레이 */
  .modal-overlay, .crud-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  /* 모달 컨텐츠: 바텀시트 형태 */
  .modal-content, .crud-modal-backdrop .crud-modal {
    border-radius: 24px 24px 0 0 !important;
    max-height: 92vh !important;
    height: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    animation: bottomSheetUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }
  /* 바텀시트 핸들 바 */
  .modal-content::before, .crud-modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--c-text-mute);
    opacity: 0.3;
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }
  /* 모달 헤더 */
  .modal-header, .crud-modal-head {
    padding: 12px 20px !important;
    border-bottom: 0.5px solid var(--c-line);
  }
  .modal-header h3, .crud-modal-head h3 {
    font-size: 17px;
    font-weight: 700;
  }
  /* 모달 본문 스크롤 */
  .modal-content > div:not(.modal-header),
  .crud-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@keyframes bottomSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   9. 폼 입력 — Material/Apple 스타일
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  input[type="text"], input[type="date"], input[type="number"],
  input[type="email"], input[type="tel"], input[type="url"],
  input[type="password"], select, textarea {
    border-radius: 12px;
    border: 1.5px solid var(--c-line);
    padding: 12px 14px;
    font-size: 16px; /* iOS zoom 방지 */
    background: var(--c-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(136,199,20,0.15);
    outline: none;
  }
  [data-theme="dark"] input:focus,
  [data-theme="dark"] select:focus,
  [data-theme="dark"] textarea:focus {
    box-shadow: 0 0 0 3px rgba(136,199,20,0.2);
  }
  /* 라벨 */
  label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-soft);
    margin-bottom: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   10. 리스트/타임라인 — 터치 최적화
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* 타임라인 아이템 */
  .tl-item {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 6px;
    transition: background 0.12s ease;
  }
  .tl-item:active {
    background: var(--c-surface-2);
  }
  /* 테이블 행 터치 피드백 */
  .tbl tbody tr {
    transition: background 0.12s ease;
  }
  .tbl tbody tr:active {
    background: var(--c-surface-2);
  }
}

/* ═══════════════════════════════════════════════════════════
   11. 캘린더 모바일 최적화
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  /* 캘린더 그리드: 컴팩트 */
  #grid-wrap {
    border-radius: 0 0 16px 16px;
  }
  /* 날짜 셀 크기 */
  .cal-grid-card .cal-cell {
    min-height: 52px;
    padding: 2px;
  }
  /* 이벤트 바 */
  .cal-ev {
    font-size: 10px;
    padding: 1px 4px;
    margin-bottom: 1px;
  }
  /* 일별 상세 */
  .day-detail {
    border-radius: 16px;
    margin: 8px 0 !important;
    padding: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  .day-detail header h2 {
    font-size: 18px;
    font-weight: 800;
  }
}

/* ═══════════════════════════════════════════════════════════
   12. 토스트 — 모바일 중앙 하단
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .toast-stack {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
  .toast {
    border-radius: 14px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    backdrop-filter: blur(12px);
  }
}

/* ═══════════════════════════════════════════════════════════
   13. Person Badge — 모바일 터치 영역 확대
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .p-badge {
    min-width: 28px;
    min-height: 28px;
  }
  .p-badge-group .p-badge {
    border-width: 2px;
  }
}

/* ═══════════════════════════════════════════════════════════
   14. 프라이버시 & 잠금 오버레이 — 모바일 최적화
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .privacy-overlay, .lock-overlay {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
}

/* ═══════════════════════════════════════════════════════════
   15. 스크롤바 숨김 (모바일)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .view-root {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .view-root::-webkit-scrollbar {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   16. Drawer (메모, 알림) — 바텀시트화
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .drawer {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 80vh !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }
  .drawer[aria-hidden="false"], .drawer.open {
    transform: translateY(0) !important;
  }
  .drawer::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--c-text-mute);
    opacity: 0.3;
    border-radius: 2px;
    margin: 8px auto 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   17. 스와이프 힌트 & 제스처 안내
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* 좌우 스와이프 가능 영역 표시 */
  .swipe-hint::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.03));
    pointer-events: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   18. 빈 상태 — 감성적 디자인
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .empty-state, .empty {
    padding: 40px 24px;
  }
  .empty-state [data-lucide], .empty [data-lucide] {
    width: 56px;
    height: 56px;
    opacity: 0.25;
    margin-bottom: 16px;
  }
  .empty-state .empty-title {
    font-size: 16px;
    font-weight: 700;
  }
}

/* ═══════════════════════════════════════════════════════════
   19. 사진/미디어 그리드 — Apple Photos 스타일
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .photo-grid {
    gap: 2px !important;
    border-radius: 0;
  }
  .photo-grid img, .photo-grid .photo-thumb {
    border-radius: 0;
    aspect-ratio: 1;
    object-fit: cover;
  }
}

/* ═══════════════════════════════════════════════════════════
   20. 뷰 전환 애니메이션
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .view-root {
    animation: viewFadeIn 0.2s ease;
  }
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   21. 메모 드로어 입력 영역 — 하단 고정
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .drawer-foot {
    position: sticky;
    bottom: 0;
    background: var(--c-surface);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: 0.5px solid var(--c-line);
  }
  .drawer-foot input {
    flex: 1;
  }
}

/* ═══════════════════════════════════════════════════════════
   22. AI 플로팅 버튼 — 모바일 위치 조정
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .ai-float-btn {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 4px 16px rgba(99,102,241,0.3);
  }
}

/* ═══════════════════════════════════════════════════════════
   23. 탭 (itab) — 가로 스크롤 + 스냅
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .itab {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 4px;
    padding: 4px 0;
    flex-wrap: nowrap !important;
  }
  .itab::-webkit-scrollbar { display: none; }
  .itab button {
    scroll-snap-align: start;
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: 10px;
    font-size: 13px;
    padding: 6px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════
   24. sub-nav-strip — 모바일 가로 스크롤
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .sub-nav-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sub-nav-strip::-webkit-scrollbar { display: none; }
  .sub-nav-inner {
    flex-wrap: nowrap !important;
    gap: 6px;
    padding: 4px 0;
  }
  .sub-nav-inner a, .sub-nav-inner button {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════
   25. view-root — 하단 탭바 가림 방지
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .view-root {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   26. 글로벌 검색 — 모바일 풀스크린
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .global-search-overlay {
    padding-top: 0 !important;
    align-items: stretch !important;
  }
  .global-search-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100vh;
  }
  .global-search-input-wrap {
    padding: 12px 16px !important;
    gap: 10px;
  }
  .global-search-input-wrap input {
    font-size: 16px !important; /* iOS zoom 방지 */
  }
  .global-search-kbd {
    display: none !important;
  }
  .global-search-results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  /* 검색 결과 항목 터치 영역 확대 */
  .gs-row {
    padding: 12px 16px !important;
    min-height: 52px;
  }
  .gs-row:active {
    background: var(--c-surface-2);
  }
}

/* ═══════════════════════════════════════════════════════════
   27. 캘린더 이벤트 추가 버튼 — 모바일 위치 조정
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .cal-add-btn, .fab-add {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   28. 날씨 패널 — 모바일 바텀시트
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .weather-panel {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 75vh !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12) !important;
    animation: bottomSheetUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }
  .weather-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--c-text-mute);
    opacity: 0.3;
    border-radius: 2px;
    margin: 8px auto 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   29. 선택/필터 칩 그룹 — 모바일 가로 스크롤
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .filter-chips, .owner-tabs, .tab-pills {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    gap: 6px;
    padding: 4px 0;
  }
  .filter-chips::-webkit-scrollbar,
  .owner-tabs::-webkit-scrollbar,
  .tab-pills::-webkit-scrollbar { display: none; }
  .filter-chips > *, .owner-tabs > *, .tab-pills > * {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════
   30. 테이블 셀 — 모바일 텍스트 줄바꿈
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .tbl td {
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .tbl th {
    white-space: nowrap;
    font-size: 12px;
  }
}