/* ══════════════════════════════════════════════════
   BLOOM — MOBILE RESPONSIVE FIX  (v3.5.3)
   모달 풀스크린 + 레이아웃 보강 + 텍스트 잘림 처리
   ※ 기존 CSS를 오버라이드하는 보조 파일
══════════════════════════════════════════════════ */

/* ═══ 1. 모달 — 모바일 풀스크린(바텀시트) 처리 ═══ */

/* couple/matching.php  견적요청 모달 */
@media (max-width: 640px) {
  .qm-overlay {
    align-items: flex-end !important;
  }
  .qm-box {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    max-height: 92vh !important;
    animation: slideUp .3s ease;
  }
  .qm-field textarea,
  .qm-field select {
    font-size: 16px !important;  /* iOS zoom 방지 */
  }
}

/* couple/budget.php  예산 모달 */
@media (max-width: 640px) {
  .budget-modal .modal-box,
  .budget-modal .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    max-height: 92vh !important;
  }
  .m-row {
    grid-template-columns: 1fr !important;
  }
}

/* couple/schedule.php  일정 모달 */
@media (max-width: 640px) {
  .sm-modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    max-height: 92vh !important;
    align-self: flex-end;
  }
  .sm-row-3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* planner/quote.php  견적서 모달 */
@media (max-width: 640px) {
  .modal-box,
  .quote-modal .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    max-height: 92vh !important;
  }
  .mf-row {
    grid-template-columns: 1fr !important;
  }
}

/* 공통 모달 오버레이 바텀시트 정렬 */
@media (max-width: 640px) {
  [class*="-overlay"].show,
  .modal-overlay.show {
    align-items: flex-end !important;
  }
}

/* 바텀시트 슬라이드업 애니메이션 */
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ═══ 2. 모바일 상세그리드 1열 강제 (≤480px) ═══ */
@media (max-width: 480px) {
  .mrc-detail-row,
  .qr-detail-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ═══ 3. couple/budget.php — 모바일 결제상태 표시 ═══ */
@media (max-width: 780px) {
  /* 기존에 display:none 처리된 상태/액션 컬럼을 카드 내부로 변환 */
  .budget-row {
    position: relative;
  }
  .budget-row .br-status,
  .budget-row .br-actions {
    display: block !important;
    position: static !important;
    margin-top: 6px;
  }
  .budget-row .br-status {
    font-size: 11px;
  }
}


/* ═══ 4. planner/calendar.php — 캘린더 그리드 모바일 ═══ */
@media (max-width: 640px) {
  .cal-grid {
    grid-template-columns: repeat(7, 1fr) !important;
    font-size: 11px !important;
    gap: 1px !important;
  }
  .cal-grid .cal-cell {
    min-height: 38px !important;
    padding: 2px !important;
    font-size: 11px !important;
  }
  .cal-cell .event-dot {
    width: 5px !important;
    height: 5px !important;
  }
  .cal-header-cell {
    font-size: 10px !important;
    padding: 4px 0 !important;
  }
  /* 일정 텍스트는 숨기고 dot만 표시 */
  .cal-cell .event-text {
    display: none !important;
  }
  .cal-cell .event-dot-wrap {
    display: flex !important;
    justify-content: center;
    gap: 2px;
  }
  /* 캘린더 모달 풀스크린 */
  .cal-modal,
  .event-modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 16px !important;
    max-height: 90vh !important;
  }
}


/* ═══ 5. 텍스트 잘림 방지 (text-overflow) ═══ */
@media (max-width: 640px) {
  .pcard-name,
  .fc-name,
  .planner-name,
  .vendor-name,
  .budget-item-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ═══ 6. schedule.php — 필터 칩 모바일 래핑 ═══ */
@media (max-width: 640px) {
  .filter-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .filter-row .add-btn {
    margin-left: 0 !important;
    width: 100%;
    text-align: center;
  }
}


/* ═══ 7. planner/portfolio.php — 모바일 갤러리 ═══ */
@media (max-width: 640px) {
  .gallery-grid,
  .portfolio-grid,
  .photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .upload-zone {
    min-height: 120px !important;
    padding: 24px 16px !important;
  }
  .gallery-item,
  .portfolio-item,
  .photo-item {
    border-radius: 10px !important;
  }
}
@media (max-width: 360px) {
  .gallery-grid,
  .portfolio-grid,
  .photo-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ═══ 8. 공통 — 탭 네비게이션 모바일 스크롤 ═══ */
@media (max-width: 640px) {
  .page-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px !important;
    padding-bottom: 4px;
  }
  .page-tabs::-webkit-scrollbar { display: none; }
  .page-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
}


/* ═══ 9. 공통 — 테이블 수평 스크롤 래퍼 ═══ */
@media (max-width: 640px) {
  .table-wrap,
  .data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .table-wrap table,
  .data-table-wrap table {
    min-width: 600px;
  }
}


/* ═══ 10. 공통 — 버튼 풀너비 & 텍스트 잘림 방지 ═══ */
@media (max-width: 640px) {
  .btn-fill,
  .btn-line {
    font-size: 13px !important;
    padding: 10px 16px !important;
    white-space: nowrap !important;
  }
  /* 카드 내부 액션 버튼 행 */
  .card-actions,
  .qr-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .card-actions .btn-sm,
  .qr-actions .btn-sm {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center;
  }
}


/* ═══ 11. 공통 — 콘텐츠 패딩 safe area ═══ */
@media (max-width: 640px) {
  .main-content {
    padding-bottom: calc(var(--bottom-nav-h, 60px) + 20px) !important;
  }
}


/* ═══ 12. couple/matching.php — stat-row 반응형 ═══ */
@media (max-width: 640px) {
  .stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat-card {
    padding: 12px !important;
  }
  .sc-num {
    font-size: 20px !important;
  }
  .sc-label {
    font-size: 10px !important;
  }
}
@media (max-width: 360px) {
  .stat-row {
    grid-template-columns: 1fr !important;
  }
}


/* ═══ 13. iOS 입력 포커스 시 줌 방지 ═══ */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ═══ 14. 토스트 위치 — 바텀 네비 위 ═══ */
@media (max-width: 640px) {
  .toast-container,
  #toastWrap {
    bottom: calc(var(--bottom-nav-h, 60px) + 16px) !important;
  }
}