/* =====================================================================
   [공실드림 모듈] mobile.css (반응형 브레이크포인트 & 모바일 전담 스타일)
   - Desktop-First Cascade: 1400px -> 1200px -> 1150px -> 950px -> 900px -> 800px -> 640px
   - base.css, modal.css 뒤에 로드되어 모바일/태블릿 화면을 제어합니다.

   [설계 원칙]
   1) 1151px 이상(PC)에서는 기능/버튼/컬럼을 '숨기지' 않는다. (크기·간격 압축만 허용)
      → 창을 줄인 노트북, 즐겨찾기 패널을 연 브라우저도 PC로 취급
   2) 기능을 숨기는 규칙은 태블릿(950px 이하) → 폰(800/640px 이하) 순으로만 단계적으로 적용
   3) base.css 의 #id 셀렉터 !important 에 지지 않도록, 덮어쓸 때는 같은 #id 를 포함해서 선언
   ===================================================================== */

/* ─── PC/태블릿(641px 이상): 모바일 전용 플로팅 컨트롤 은닉 ───
   기존: 전 구간 display:none !important → 모바일에서도 JS가 켤 수 없었음.
   수정: 641px 이상에서만 은닉. 640px 이하는 아래 [8단계]가 표시를 담당. */
@media (min-width: 641px) {
  .mobile-toggle-btn,
  .mobile-fab-register {
    display: none !important;
  }
}

/* ─── [1단계] 1400px 이하 : 대화면 노트북 & 가로 태블릿 ─────────── */
@media (max-width: 1400px) {
  header { padding: 0 16px !important; gap: 10px !important; }
  .unified-header-select, #quickCitySelect, #quickGuSelect, #quickDongSelect { padding: 0 8px !important; font-size: 11.5px !important; min-width: auto !important; }
  .gp-view-switch button { padding: 0 9px !important; font-size: 11.5px !important; }
  .header-actions, .nav-links, .header-user-actions { gap: 6px !important; }
  .btn-register, .btn-membership { padding: 0 10px !important; font-size: 11.5px !important; }

  /* 필터바: 넘치면 가로 스크롤. PC에서는 얇은 스크롤바를 '보이게' 둬서 뒤에 항목이 더 있음을 알린다.
     (기존: scrollbar 완전 숨김 → 검색창/초기화 버튼이 화면 밖에 있는 줄 몰랐음) */
  .filter-bar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    padding: 0 12px !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }
  .filter-bar::-webkit-scrollbar { height: 6px; }
  .filter-bar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
  .filter-bar > * { flex-shrink: 0 !important; }
  #filterKeywordInput { width: 180px !important; }
  .sidebar { width: 480px !important; }
}

/* ─── [2단계] 1200px 이하 : 메인 인덱스 대시보드 ─────────────────── */
@media (max-width: 1200px) {
  .main-workspace { flex-wrap: wrap !important; }
  .forms-wrapper { width: 100% !important; max-width: 100% !important; }
  .dashboard-wrapper { width: 100% !important; min-width: 0 !important; }
  .forms-grid { grid-template-columns: 1fr 1fr !important; height: auto !important; }
  .dashboard-card-toss { height: 520px !important; }
}

/* ─── [3단계] 1150px 이하 : 중형 화면 (크기 압축만, 기능 은닉 없음) ─── */
@media (max-width: 1150px) {
  .gp-view-switch button { padding: 0 8px !important; }
  .sidebar { width: 400px !important; }
  /* 게시판 테이블은 전체 폭을 쓰므로 가장 덜 중요한 컬럼(썸네일/확인일)부터 이 구간에서 숨김 */
  .gp-board-table .gp-c-thumb, .gp-board-table .gp-c-updated { display: none !important; }
  .property-list::-webkit-scrollbar, .gp-board-table-wrap::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
}

/* ─── [4단계] 950px 이하 : 태블릿 세로 & 헤더 2단 분리 ───────────── */
@media (max-width: 950px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* 모바일 브라우저 주소창 때문에 100vh 가 실제 화면보다 큰 문제 해결 */
  @supports (height: 100dvh) { body { height: 100dvh; } }

  header { flex-wrap: wrap !important; height: auto !important; min-height: 56px !important; padding: 8px 12px !important; gap: 8px !important; }
  header .logo-area, header > .logo-brand { flex: 1 1 auto !important; min-width: 0 !important; }
  header .nav-links, header .header-actions, header .header-user-actions { flex: 0 0 auto !important; }

  /* 헤더 공간 절약: 이 구간부터 라벨/텍스트 축약 */
  .gp-view-switch button span:not(.gp-icon) { display: none !important; }
  .auth-pill-badge span:first-child { display: none !important; }
  .auth-pill-badge::before { content: "👤"; font-size: 13px; }

  .filter-bar button[onclick*="toggleReviewFilter"] { padding: 0 8px !important; font-size: 11px !important; }
  .sidebar { width: 340px !important; }
  .gp-board-table .gp-c-spec { display: none !important; }
  .gp-board-table .gp-c-secret { max-width: 180px !important; }
}

/* ─── [5단계] 900px 이하 : 매물 상세 모달 반응형 ─────────────────── */
@media (max-width: 900px) {
  #detailModal .detail-modal-box { width: 94vw !important; padding: 18px 20px !important; }
  #detailModal .detail-spec-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #detailModal .detail-actions-bar { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  #detailModal #stakeholderCurrentCards { grid-template-columns: 1fr !important; }
}

/* ─── [6단계] 800px 이하 : 태블릿 세로/폰 가로 콤팩트 ─────────────── */
@media (max-width: 800px) {
  /* #id 셀렉터로 선언해야 아래 [8단계]/base.css 와의 우선순위 충돌이 없음 */
  #quickCitySelect, .unified-header-select#quickCitySelect { max-width: 90px !important; }
  #quickGuSelect, .unified-header-select#quickGuSelect { max-width: 100px !important; }
  #quickDongSelect, .unified-header-select#quickDongSelect { max-width: 100px !important; }
  .unified-header-btn { display: none !important; }
  .gp-view-switch button { padding: 0 6px !important; min-width: 34px !important; justify-content: center !important; }
  .filter-bar button[onclick*="toggleReviewFilter"] { padding: 0 6px !important; }
  .gp-board-table .gp-c-contact, .gp-board-table .gp-c-type { display: none !important; }
  .forms-grid { grid-template-columns: 1fr !important; }
  .page-title { font-size: 24px !important; }

  /* 터치 기기 폭에서는 스크롤바 숨김 (손가락 스와이프) */
  .filter-bar { scrollbar-width: none !important; -ms-overflow-style: none !important; }
  .filter-bar::-webkit-scrollbar { display: none !important; }

  /* 기존 header{padding:0 14px} 가 [4단계]의 세로 패딩(8px)을 지워서 2단 헤더가 딱 붙던 문제 수정 */
  header { padding: 8px 14px !important; }
}

/* =====================================================================
   [7단계] 640px 이하 : 방식 A 직방/호갱노노형 풀스크린 단일 렌더링 엔진
   ===================================================================== */
@media (max-width: 640px) {
  /* 1. 헤더 50px 1줄 압축 (줄바꿈 원천 차단) */
  header {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 10px !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    /* 기존 overflow:hidden → 지역선택 팝오버/드롭다운이 헤더 높이(50px)에 잘리던 문제.
       가로로만 자르고(clip) 세로는 살린다. */
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  .logo-area { gap: 6px !important; flex: 1 !important; min-width: 0 !important; }
  .logo-area > div { padding-left: 6px !important; border-left: none !important; gap: 4px !important; }
  .brand-name { font-size: 16px !important; }
  .brand-name .brand-en { display: none !important; }
  .brand-symbol { width: 24px !important; height: 24px !important; }

  /* 헤더 내 불필요한 데스크톱 요소 숨김 */
  #quickDongSelect,
  .unified-header-select#quickDongSelect,
  .unified-header-btn,
  .gp-view-switch,
  header .btn-register {
    display: none !important;
  }

  /* 기존: [6단계]의 #id 규칙(max-width 90/100px)에 밀려 75px 제한이 적용되지 않고 헤더가 넘치던 문제.
     같은 #id 를 포함해 선언하여 확실히 적용 */
  .unified-header-select,
  #quickCitySelect, #quickGuSelect,
  .unified-header-select#quickCitySelect, .unified-header-select#quickGuSelect {
    height: 32px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
    max-width: 78px !important;
    min-width: 0 !important;
  }

  /* 헤더 계정 상태 뱃지 간소화 */
  .agent-auth-status { gap: 4px !important; font-size: 11px !important; }
  .agent-auth-status strong,
  .agent-auth-status span:not(.auth-role-tag) {
    display: none !important;
  }
  .btn-manage-staff { display: none !important; }
  .btn-logout { padding: 6px 8px !important; font-size: 11px !important; min-height: 30px !important; }

  /* 2. 필터바 슬림화 (42px) + 터치 영역 확대 */
  .filter-bar {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch;
  }
  /* base.css 가 #btnXxx(!important)로 28px 를 고정하므로 같은 #id 를 포함해서 덮어씀 */
  .filter-chip,
  #btnGroupBuilding, #btnCompletedFilter, #btnRecommendFilter,
  .filter-action-btn, .btn-reset-filter {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  /* iOS Safari: 입력창 글자가 16px 미만이면 포커스 때 화면이 자동 확대됨 → 16px 고정 */
  #filterKeywordInput {
    width: 150px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  /* 3. 본문 컨테이너 100% 풀스크린 단일 뷰 */
  .main-container {
    height: calc(100vh - 92px) !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }
  /* 게시판 뷰도 106px(PC 기준) → 92px(모바일 헤더+필터바) 로 맞춤 */
  body.gp-mode-board #gpBoardView { height: calc(100vh - 92px) !important; }
  @supports (height: 100dvh) {
    .main-container { height: calc(100dvh - 92px) !important; }
    body.gp-mode-board #gpBoardView { height: calc(100dvh - 92px) !important; }
  }

  /* [모드 1: 지도 풀스크린 (기본값)] - 매물 카드를 메모리상 숨겨 이미지 Egress 0원 유지 */
  body:not(.mobile-view-list) #map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    display: block !important;
  }
  body:not(.mobile-view-list) .sidebar {
    display: none !important;
  }

  /* [모드 2: 목록 풀스크린 (버튼 클릭 시)] - 지도를 잠시 숨기고 시원한 매물 피드 제공 */
  body.mobile-view-list #map {
    display: none !important;
  }
  body.mobile-view-list .sidebar {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    border-left: none !important;
  }
  body.mobile-view-list .sidebar-header {
    padding: 10px 14px !important;
  }
  /* sidebar 상단 컨트롤이 좁은 화면에서 넘치지 않도록 줄바꿈 허용 */
  body.mobile-view-list .control-row,
  body.mobile-view-list .tool-group {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
  /* 기존: .property-list 만 지정 → base.css 의 #property-list{padding:...!important}(ID)에 밀려
     하단 90px 여백이 적용되지 않아 마지막 카드가 플로팅 버튼에 가려질 수 있었음 */
  body.mobile-view-list #property-list,
  body.mobile-view-list .property-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 10px 12px calc(90px + env(safe-area-inset-bottom, 0px)) 12px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* 매물 카드: 터치 친화 (버튼 24px → 34px, 줄바꿈 허용) */
  .card-actions-bar { flex-wrap: wrap !important; gap: 6px !important; }
  .actions-left-group { flex-wrap: wrap !important; gap: 6px !important; }
  .btn-act-compact {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
  .property-row input[type="checkbox"] { width: 20px; height: 20px; }

  /* 4. 엄지손가락 전용 플로팅 조작 체계 (모달 z-index 2000보다 낮은 1100으로 설정해 팝업 시 은닉)
        iPhone 하단 홈 인디케이터와 겹치지 않도록 safe-area 반영
        (HTML viewport 메타에 viewport-fit=cover 가 있어야 값이 적용됨) */
  .mobile-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    position: fixed !important;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1100 !important;
    max-width: calc(100vw - 110px) !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 12px 22px !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }
  .mobile-toggle-btn:active { transform: translateX(-50%) scale(0.97) !important; }

  .mobile-fab-register {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    z-index: 1100 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #991b1b !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(153, 27, 27, 0.45) !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
  }
  .mobile-fab-register:active { transform: scale(0.94) !important; }

  /* 5. 모바일 모달 공통: 폭 초과 방지 + 주소창 고려한 높이 + 입력창 확대 방지 */
  .modal-box,
  .modal-content-card,
  .print-modal-box {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 16px !important;
  }
  /* 로그인 게이트: 고정 440px 라서 360px폰에서 가로 넘침 → 컨테이너 폭에 맞춤 */
  .auth-gate-box {
    width: 100% !important;
    max-width: 440px !important;
    padding: 24px 18px !important;
  }
  /* [5단계]의 #detailModal(ID) 규칙에 밀리지 않도록 #id 포함 */
  #detailModal .detail-modal-box,
  .detail-modal-box {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 14px !important;
  }
  @supports (height: 100dvh) {
    .modal-box, .modal-content-card, .print-modal-box, .auth-gate-box,
    #detailModal .detail-modal-box, .detail-modal-box { max-height: 92dvh !important; }
  }

  .form-group input,
  .form-group select,
  .form-group textarea,
  .auth-input-group input {
    height: 42px !important;
    font-size: 16px !important;
  }
  .form-group textarea { height: auto !important; min-height: 84px !important; }
  .btn-submit, .btn-cancel, .btn-close { padding: 13px 0 !important; font-size: 14px !important; }
  .btn-auth-submit { padding: 14px 0 !important; }

  /* 상세 모달 */
  #detailModal .detail-price-big { font-size: 18px !important; }
  #detailModal .btn-detail-action { height: 44px !important; }
  #detailModal .detail-thumb-item { width: 60px !important; height: 45px !important; }

  /* 직원 관리 테이블: 폭이 넘치면 모달 안에서 가로 스크롤 */
  .staff-table { display: block !important; overflow-x: auto !important; white-space: nowrap !important; }

  /* 구독 결제 모달: 1단 + 결제수단 3열 유지(좁은 폭용 패딩) */
  #subscriptionModal .pricing-card-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 18px !important; }
  #subscriptionModal .pricing-card { padding: 16px 14px !important; }
  #subscriptionModal .payment-method-row { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  #subscriptionModal .pay-method-btn { padding: 12px 4px !important; font-size: 12px !important; }

  /* 브리핑(A4 미리보기): 세로로 쌓기 */
  .briefing-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .briefing-card { flex-direction: column !important; }
  .briefing-card-thumb { width: 100% !important; height: auto !important; }

  /* 6. 터치 UX: 더블탭 확대 지연/탭 하이라이트 제거 */
  button, a, select, label, .filter-chip, .property-row, .btn-act-compact {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ─── 터치 기기: 탭 후 hover 효과가 남아 있는 현상 제거 (선택된 카드는 유지) ─── */
@media (hover: none) {
  .property-row:not(.active):hover {
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
  }
}