/* ==========================================================================
   바로냄 모바일 — 아이패드(태블릿) 최적화 레이어  (여울, 2026-07-27)
   - @media (min-width:768px) 안에서만 동작 → 폰(<768px)·PC(별도 도메인 /)에는 영향 0
   - 화면별 스코프: <body class="pg-홈/pg-contract/pg-task/pg-progress"> (header.php가 부여)
   - 목표: 좁은 모바일 컬럼이 아이패드에서 늘어나 여백 낭비되던 문제 해결
           → 폭을 캡·중앙정렬하고, 카드 목록은 화면폭에 맞춰 2~3열 그리드로 채움
   ========================================================================== */

/* 현장관리 콘솔 탭은 아이패드(사이드바)에서만 노출. 폰 하단탭에는 숨김(기본) */
.menu-bottom li[data-menu="console"]{ display: none; }

@media (min-width: 768px){

  /* 콘솔 진입 항목: 아이패드 사이드바에서만 표시 */
  .menu-bottom li[data-menu="console"]{ display: block !important; }

  /* =======================================================================
     0) 공통 — 하단 탭바를 "좌측 사이드바 레일"로 전환 (아이패드다움의 핵심)
     .menu-bottom > ul > li(홈/계약현장/일정표/채팅/더보기) 를 세로 고정 레일로.
     inline <style> 를 이기기 위해 !important 사용 (ios-skin 뒤에 로드되므로 우선).
     ======================================================================= */
  .menu-bottom{
    display: flex !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important;
    width: 96px !important; height: 100vh !important;
    flex-direction: column !important;
    align-items: stretch !important; justify-content: flex-start !important;
    border-top: none !important; border-right: 0.5px solid rgba(0,0,0,.1) !important;
    padding-bottom: 0 !important;
    z-index: 1000 !important;
  }
  .menu-bottom ul{
    display: flex !important; flex-direction: column !important;
    width: 100% !important; max-width: none !important; height: auto !important;
    margin: 0 !important; padding: 72px 0 0 !important; gap: 2px !important;
    align-items: stretch !important;
  }
  .menu-bottom ul li{ width: 100% !important; }
  .menu-bottom ul li a{
    width: 100% !important; flex-direction: column !important;
    padding: 13px 0 !important; gap: 3px !important;
  }
  .menu-bottom ul li img{ width: 27px !important; height: 27px !important; }
  .menu-bottom ul li span{ font-size: 11px !important; }
  .menu-bottom .tk-tabdot{ left: calc(50% + 13px) !important; }
  /* 사이드바 활성 표시: 왼쪽 파란 바 + 옅은 배경 */
  .menu-bottom ul li.active,
  .menu-bottom ul li.tapped{ background: #e9f1ff !important; box-shadow: inset 3px 0 0 #007aff; }

  /* 상단 바를 사이드바 오른쪽에서 시작 */
  .menu-top-breadcrumb{ left: 96px !important; width: calc(100vw - 96px) !important; }
  .menu-top-blank{ width: auto !important; }
  /* 하단 spacer 는 사이드바 레이아웃에서 불필요 + 100vw 가로 스크롤 유발 → 무력화 */
  .menu-bottom-blank{ width: auto !important; height: 0 !important; }

  /* 본문(.wrap)을 사이드바 폭만큼 우측으로. border-box 로 가로 스크롤 방지 */
  .wrap{
    box-sizing: border-box !important; min-width: 0 !important;
    width: 100vw !important; padding-left: 96px !important;
  }

  /* =======================================================================
     1) 홈 대시보드  (.pg-home)
     인사말 + 통계카드는 상단 전체폭, 그 아래 4개 섹션은 CSS 멀티컬럼 2열.
     (마크업 수정 없이 column-span:all + break 규칙으로 헤더와 카드박스를 한 쌍으로 유지)
     ======================================================================= */
  .pg-home .home-wrap{
    width: 100%; max-width: 1000px; margin: 0 auto; padding: 24px 26px 44px;
    column-count: 2; column-gap: 26px;
  }
  .pg-home .home-greet{
    column-span: all; -webkit-column-span: all;
    padding: 6px 4px 16px;
  }
  .pg-home .home-greet .g1{ font-size: 27px; letter-spacing:-.5px; }
  .pg-home .home-greet .g2{ font-size: 15px; margin-top: 5px; }

  /* 상단 통계 카드: 전체폭 + 크게 */
  .pg-home .stat-row{
    column-span: all; -webkit-column-span: all;
    gap: 12px !important; margin-bottom: 4px;
  }
  .pg-home .stat-card{ padding: 22px 8px 18px !important; border-radius: 20px; }
  .pg-home .stat-ic{ width: 50px !important; height: 50px !important; font-size: 22px !important; margin-bottom: 9px; }
  .pg-home .stat-label{ font-size: 13.5px !important; letter-spacing: 0 !important; }
  .pg-home .stat-num{ font-size: 25px; margin-top: 3px; }

  /* 각 섹션 헤더는 바로 아래 카드박스와 붙어 한 컬럼 안에 유지 */
  .pg-home .sec-head{ break-after: avoid; -webkit-column-break-after: avoid; page-break-after: avoid; padding-top: 18px; }
  .pg-home .sec-head .t{ font-size: 18px; }
  .pg-home .card-box{ break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; border-radius: 18px; margin-bottom: 4px; }

  /* =======================================================================
     2) 계약현장 / 견적  (.pg-contract)  — 계약 카드 목록
     컨테이너 .mobile-continer 는 .contract-row 만 자식으로 가짐 → 그리드 안전
     ======================================================================= */
  .pg-contract .mobile-continer{
    width: 100%; max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px; padding: 16px 20px 24px !important;
  }
  /* ios-skin 이 .contract-row 를 흰 카드로 만들어 둠. 그리드 셀 안에서 상하 마진 제거 */
  .pg-contract .mobile-continer .contract-row{ margin-bottom: 0 !important; height: 100%; box-sizing: border-box; }
  .pg-contract .mobile-continer .contract-row + .contract-row{ border-top: none !important; padding-top: 14px !important; }

  /* =======================================================================
     3) 협업업무  (.pg-task)  — list.php / flow_list.php 공통 클래스
     .mtk-wrap 안: 상단 칩/필터 + 현장 폴더(.mfold). 폴더 내부 업무카드(.mfbody>.mtk-card)
     ======================================================================= */
  /* 현장 폴더(.mfold)를 CSS 멀티컬럼 2열로 → 넓은 화면을 채움.
     상단 칩/필터는 전체폭(column-span:all), 폴더는 컬럼 내에서 쪼개지지 않게 break-inside:avoid */
  .pg-task .mtk-wrap{
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px 22px 96px;
    column-count: 2; column-gap: 20px;
  }
  .pg-task .mtk-chips,
  .pg-task .mtk-sfilter{ column-span: all; -webkit-column-span: all; }
  .pg-task .mfold{ break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }

  /* =======================================================================
     4) 현장별 공정현황  (.pg-progress)  — list.php (전체모드/현장모드)
     전체모드: #listup_container > .site-card,  현장모드: .mobile-continer > .pcard
     ======================================================================= */
  /* 상단 검색/필터 폭 정렬 */
  .pg-progress .pf-bar{ max-width: 1120px; margin: 0 auto; }

  /* 전체모드: 현장 카드 2~3열 */
  .pg-progress #listup_container{
    width: 100%; max-width: 1120px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px; padding: 8px 20px 28px;
  }
  .pg-progress #listup_container .site-card{ margin-bottom: 0 !important; }

  /* 현장모드: 공정 카드 2~3열 (그리드는 site_search 없는 상세뷰에만 적용되게 #listup_container 제외) */
  .pg-progress .pg-head{ width: 100%; max-width: 1120px; margin: -1rem auto 16px; }
  .pg-progress .mobile-continer:not(#listup_container){
    width: 100%; max-width: 1120px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px; padding: 4px 20px 28px !important;
  }
  .pg-progress .mobile-continer:not(#listup_container) .pcard{ margin-bottom: 0 !important; }

}

/* 넓은 아이패드(가로/12.9")에서 카드가 지나치게 커지지 않도록 3열 힌트 */
@media (min-width: 1180px){
  .pg-home .home-secs{ gap: 6px 30px; }
}

/* =========================================================================
   embed 모드 — iframe 안에 끼워 넣을 때 상단바/사이드바/하단탭 숨김 (모든 폭)
   ?embed=1 → <body class="... embed">  (header.php가 부여)
   ========================================================================= */
.embed .menu-top-breadcrumb,
.embed .menu-bottom,
.embed .menu-top-blank,
.embed .menu-bottom-blank{ display: none !important; }
.embed .wrap{ padding-left: 0 !important; }
body.embed{ background: #f2f2f7 !important; }

/* =========================================================================
   아이패드 현장관리 (.pg-site  /  /m/page/site/console.php)
   모바일 사이드바 + 콘텐츠 영역에 PC 현장관리 허브(site_manage.php?embed=1) iframe 꽉 채움
   ========================================================================= */
.pg-site .sc-embed-wrap{ width: 100%; }
.pg-site .sc-embed{
  width: 100%; height: calc(100vh - 60px); border: 0; display: block; background: #f2f2f7;
}
