@charset "utf-8";

/* ============================================================
   pc.css  —  점포왕 PC(데스크탑) "중앙 앱 프레임" 레이아웃
   ------------------------------------------------------------
   목표:
   - PC에서도 전체 폭을 넓게 쓰지 않고, 화면 가운데에
     모바일 앱 화면(약 720px)이 놓인 것처럼 보이게 한다.
   - 좌우는 연한 배경 + 프레임 그림자로 처리.
   - 모바일/WebView(앱)에서는 기존 100% 폭을 그대로 유지.

   안전장치(2중):
   1) head.sub.php에서 "앱이 아닐 때만" 이 파일을 로드한다.
   2) 모든 규칙은 @media (min-width:1024px) 안에만 둔다.
      → 폭이 좁은 모바일/앱 화면에는 절대 적용되지 않음.

   ※ 프레임 폭을 바꾸려면 --app-w 값만 수정하면 된다 (600~720px 권장).
   ============================================================ */

@media (min-width: 1024px) {

  :root {
    --app-w: 740px;          /* 중앙 앱 프레임 폭 (680~760 권장 / 상단 메뉴 공간 확보) */
    --app-side-bg: #e9ecef;  /* 프레임 바깥(좌우) 배경색 */
  }

  /* --------------------------------------------------------
     1) 바깥 배경 + 본문(body)을 가운데 프레임으로 제한
        - body 안의 모든 일반 콘텐츠(헤더/본문/푸터)가
          --app-w 폭 안으로 들어온다.
     -------------------------------------------------------- */
  html {
    background: var(--app-side-bg);
  }

  body {
    max-width: var(--app-w);
    /* ✅ !important: 인증/멤버 스킨(skin/member/basic/style.css 등)의 body{margin:0}
       이 중앙정렬을 덮어써서 남색 body 가 프레임 왼쪽에 붙던 문제 방지.
       → 로그인/회원가입/약관동의/정보수정 등 모든 페이지를 메인과 동일하게 중앙 프레임으로. */
    margin-left: auto !important;
    margin-right: auto !important;
    /* ✅ 중앙 컨텐츠 영역은 흰색 유지 (좌우 바깥 html 만 회색) */
    background: #fff;
    /* ❌ 좌우 세로 라인/테두리/그림자 없음 — 흰/회색 경계는 자연스러운 색 전환만 */
    box-shadow: none !important;
    border: 0 !important;
    /* 본문이 프레임 밖으로 새지 않도록 */
    overflow-x: hidden;
    /* ✅ 흰색 프레임이 항상 화면 아래까지 이어지게(글 적은 페이지=구해요 대응).
       body 는 box-sizing:border-box(default.css) 이므로 패딩 포함 정확히 화면높이 → 불필요한 스크롤 없음. */
    min-height: 100vh;
  }

  /* 프레임 래퍼들에 혹시 남아있는 좌우 그림자/세로 테두리 제거 */
  #wrapper,
  #container,
  #hd,
  #app-main {
    box-shadow: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* 섹션 구분선(.ui-band): 모바일은 width:100vw 로 화면 전체를 가로지르는데,
     PC 프레임에서는 그게 화면을 가로지르는 "두꺼운 회색 띠"로 보인다.
     → 프레임 폭 안으로 가두고, 흰 배경 위에서 거의 안 보이는 얇은 구분선으로. */
  .ui-band {
    width: 100% !important;
    left: auto !important;
    transform: none !important;
    height: 1px !important;
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 1px solid #f0f2f5 !important;
    margin: 8px 0 !important;
  }

  /* full-bleed(100vw) 요소 일괄 보정 — 앱 프레임 공통
     모바일은 width:100vw=화면폭(=프레임폭)이라 정상이지만,
     PC 가운데 740px 프레임에서는 1920px로 빠져나가 좌우가 잘린다.
     → 프레임 폭(100%) 안으로 가둔다.
     (구해요 상단 배너 .rqst-intro-wrap.fullbleed, view .view-toolbar.fullbleed 등) */
  .fullbleed {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .rqst-intro-track {
    max-width: 100% !important;
  }
  .view-toolbar.fullbleed::before {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }

  /* 상세(view) 페이지 섹션 구분 밴드(.ui-aaa): 모바일은 width:100vw 회색 12px 띠인데,
     PC 프레임에서는 회색 띠가 프레임 양끝을 넘어 좌우 회색 배경과 맞닿아
     "화면을 가로지르는 회색 띠"처럼 보인다.
     → 100vw 해제 + 회색 채움 제거하고, 프레임 내부의 얇은 구분선으로. */
  .ui-aaa {
    width: 100% !important;
    left: auto !important;
    margin-left: 0 !important;
    height: 1px !important;
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 1px solid #f0f2f5 !important;
  }

  /* --------------------------------------------------------
     2) 고정(fixed) 상단 네비 — 프레임 폭으로 가운데 정렬
        (.navbar 는 position:fixed; left:0; right:0 이므로
         뷰포트 기준 전체폭 → 프레임 폭으로 보정)
     -------------------------------------------------------- */
  .navbar {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateZ(0);
    width: 100%;
    max-width: var(--app-w);
  }

  /* ✅ PC 상단 메뉴(로고+팔아요+구해요+채팅+MY+알림)는 그대로 유지.
     (default.css 의 @media(min-width:769px) 규칙이 표시하므로 여기서 숨기지 않음) */

  /* --------------------------------------------------------
     3) 하단 고정 CTA / 액션 바 — 프레임 폭으로 가운데 정렬
        .view-sticky-cta        : 매물 상세 하단 버튼바
        .jpw-page-foot          : 필터 페이지 하단 "적용" 바
        .lis_write .write_btns  : 팔아요 글쓰기 하단 목록/등록 바
        .req_write .write_btns  : 구해요 글쓰기 하단 목록/등록 바
        (모두 position:fixed; left:0; right:0 → 뷰포트 전체폭이라 프레임으로 보정)
     -------------------------------------------------------- */
  .view-sticky-cta,
  .jpw-page-foot,
  .lis_write .write_btns,
  .req_write .write_btns {
    /* !important: 스킨 style.css 가 pc.css 보다 늦게 로드되며 left:0;right:0 로
       되돌리는 것을 막아, 항상 프레임 폭 가운데로 고정 */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: var(--app-w) !important;
  }

  /* --------------------------------------------------------
     3-1) 인증/멤버 페이지 하단 버튼바 — 프레임 폭으로 가운데
        .btn_confirm            : 회원가입/약관동의 하단(취소/회원가입)
        .edit-bottom-bar        : 회원정보 수정 하단(취소/저장, position:fixed)
        ※ position:static(흐름) 이든 fixed 든 안전하게 중앙:
          fixed(left:0;right:0)면 max-width+margin auto 로 뷰포트 중앙,
          static 이면 컨테이너(가운데 body) 안에서 중앙 — transform 미사용(흐름 요소 어긋남 방지).
     -------------------------------------------------------- */
  /* ⚠ 명시도 주의: register_form.skin.php 인라인 <style> 이
     .btn_confirm{position:fixed!important; left:0;right:0; width:100%!important; margin:0!important}
     로 하단바를 전체폭·좌측 고정한다. 같은 명시도(.btn_confirm)로는 나중 로드된 인라인이 이기므로,
     여기서는 'body .btn_confirm'(명시도 ↑)로 그 !important 를 이겨 프레임 중앙으로 되돌린다.
     ※ transform 대신 left/right:0 + max-width + margin:auto → fixed(정보입력)·static(약관) 모두 안전 */
  body .btn_confirm,
  body .edit-bottom-bar,
  body .profile-edit-page .edit-bottom-bar {
    max-width: var(--app-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* 글쓰기 하단 바: PC에서는 무거운 고정바 느낌을 줄여 폼 버튼처럼 슬림하게 */
  .lis_write .write_btns,
  .req_write .write_btns {
    padding: 8px 16px !important;
    box-shadow: 0 -4px 14px rgba(0,0,0,.05) !important;
  }
  .lis_write .write_btns .btn,
  .lis_write .write_btns button,
  .lis_write .write_btns a,
  .req_write .write_btns .btn,
  .req_write .write_btns button,
  .req_write .write_btns a {
    height: 44px !important;
  }

  /* --------------------------------------------------------
     4) 우하단 플로팅 버튼(FAB) — 프레임 오른쪽 안쪽에 붙이기
        (.fab-write / .floating_actions 는 right:18px 고정)
     -------------------------------------------------------- */
  .fab-write,
  .floating_actions {
    right: calc(50% - (var(--app-w) / 2) + 18px) !important;
  }

  /* --------------------------------------------------------
     5) 콘텐츠가 프레임 폭을 벗어나지 않도록 정리
        - 기존에 넣었던 1180px 확장 / 다단 그리드는 모두 제거.
        - 프레임 안에서는 앱과 동일한 1열/슬라이더 레이아웃 유지.
     -------------------------------------------------------- */
  .inner,
  .inner02,
  #wrapper,
  .container {
    max-width: 100%;
  }

  /* 푸터 아래 공백 제거:
     #app-main 의 padding-bottom:72px 는 "모바일 하단 네비" 자리용인데
     PC에서는 하단 네비가 없으므로 제거한다.
     (footer가 #app-main 안에 있어 그대로 두면 푸터 밑 빈공간이 됨) */
  #app-main {
    padding-bottom: 0 !important;
  }
  /* 모바일 하단 네비는 PC에서 확실히 숨김(공간 차지 방지) */
  .bottom_nav {
    display: none !important;
  }

  /* 필터 페이지(.jpw-filter-page)도 프레임 안에서 자연스럽게 꽉 차게 */
  body.filter-fullscreen .jpw-filter-page {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* --------------------------------------------------------
     6) 마우스 환경 미세 보정
     -------------------------------------------------------- */
  .reco-wrap .reco-card,
  .gallery_grid .gallery_item,
  .cat-card {
    cursor: pointer;
  }

  /* ========================================================
     7) 매물 목록 페이지 — 상단 메뉴 ↔ 검색창 여백 (PC 전용)
        ※ 전체선택/선택삭제 바, 카드 체크박스 정렬은
          전 기기 공통이라 skin/board/gallery_custom/style.css 에서 처리.
     ======================================================== */
  .jpw-searchrow.inner {
    margin-top: 24px;     /* PC: 상단 메뉴 아래 충분한 여백 */
  }
}