/* ==========================================================================
   Parking Status (hp-ps) - SAFE scoped CSS
   - Home (/parking-status/)
   - Search (/parking-status/search/)
   - Detail (/parking-status/detail/)
   --------------------------------------------------------------------------
   ✅ 중요: 이 CSS는 .hp-ps-* 범위만 스타일링합니다(메인 사이트 영향 최소화).
   ✅ Search 좌측 폭은 CSS가 아니라 PHP 인라인(--hp-ps-left-w)로만 관리합니다.
   ========================================================================== */


/* =========================
   0) Common (scoped)
   ========================= */
.hp-ps-muted{ color:#6b7280; font-size:12px; }
.hp-ps-h1{ margin:0; font-size:18px; }
.hp-ps-h2{ margin:0 0 10px; font-size:18px; }
.hp-ps-title{ margin:0 0 6px; font-size:28px; color:#111827; }
.hp-ps-desc{ margin:0; color:#374151; }

.hp-ps-card{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  background:#fff;
}

.hp-ps-error{
  padding:10px 12px;
  border:1px solid #ef4444;
  border-radius:10px;
  background:#fff5f5;
  margin:10px 0 12px;
}

.hp-ps-card-head{ margin-bottom: 30px; }  

/* =========================
   1) Home (안내+인증) /parking-status/
   ========================= */
.hp-ps-shell{ width:100%; padding:18px 0; }

/* 홈은 1280 유지(원하면 1180으로 줄이세요) */
.hp-ps-wrap--wide{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

.hp-ps-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
}
@media (max-width:980px){
  .hp-ps-hero{ flex-direction:column; }
}

.hp-ps-hero-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.hp-ps-pill{
  font-size:12px;
  padding:6px 10px;
  border:1px solid #ddd;
  border-radius:999px;
  color:#333;
  white-space:nowrap;
}

/* 홈 2열 */
.hp-ps-grid2{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:14px;
}
@media (max-width:980px){
  .hp-ps-grid2{ grid-template-columns:1fr; }
}

/* 홈 contact */
.hp-ps-contact{ margin-top:12px; display:grid; gap:8px; }
.hp-ps-contact-item{ display:flex; gap:12px; }
.hp-ps-label{ width:72px; color:#666; }
.hp-ps-value{ color:#222; }

/* 홈 인증 2열 */
.hp-ps-auth-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:980px){
  .hp-ps-auth-2col{ grid-template-columns:1fr; }
}
.hp-ps-auth-box{ border:1px solid #eee; border-radius:12px; padding:12px; }
.hp-ps-auth-title{ font-size:14px; font-weight:700; margin-bottom:4px; }
.hp-ps-input{
  width:100%;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  margin:12px 0;
  font-size:13px;
}


/* =========================
   2) Search (좌 검색 / 우 결과) /parking-status/search/
   ========================= */

/* ✅ Search 전체 컨테이너
   - 좌측 폭(--hp-ps-left-w)은 CSS에서 지정하지 않습니다.
   - PHP에서: <div class="hp-ps-split" style="--hp-ps-left-w: 480px;"> 형태로만 관리 */
.hp-ps-split{
  max-width:1180px;
  width:100%;
  margin:0 auto;
  padding:16px 14px;
  display:flex;
  gap:14px;
}

/*
.hp-ps-left{ width:var(--hp-ps-left-w); flex:0 0 var(--hp-ps-left-w); }
*/
.hp-ps-left{ width:var(--hp-ps-search-left-w); flex:0 0 var(--hp-ps-search-left-w); }

.hp-ps-left-inner{
  position:sticky;
  top:14px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  /* background:#fff;  */
  background: #f4f6f8;   
  padding:14px;
}

.hp-ps-right{ flex:1 1 auto; min-width:0; }
.hp-ps-right-inner{
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  padding:14px;
  min-height:420px; /* ✅ 결과 0건이어도 동일 높이 */
}

@media (max-width:980px){
  .hp-ps-split{ flex-direction:column; }
  .hp-ps-left{ width:100%; flex-basis:auto; }
  .hp-ps-left-inner{ position:relative; top:auto; }
}

.hp-ps-left-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}

/* ✅ 검색 조건 간격(여기 숫자만 조정) */
.hp-ps-field{ margin-top:20px; } /* 22~26으로 올리면 더 넓어짐 */

/* 라벨(필드용) */
.hp-ps-field > label{
  display:block;
  font-size:12px;
  color:#111827;
  margin-bottom:6px;
}

/* 입력/셀렉트 */
.hp-ps-field input[type="text"],
.hp-ps-field input[type="number"],
.hp-ps-field select{
  width:100%;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:13px;
  outline:none;
  background:#fff;
}

/* 2열 */
.hp-ps-field-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* 체크박스 그룹 */
.hp-ps-checks{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}

/* ✅ 체크박스 색상(그레이) + 스케일 */
.hp-ps-check input[type="checkbox"]{
  accent-color:#9ca3af;
  transform:scale(0.9);
  transform-origin:left center;
  margin:0;
}

.hp-ps-check{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid #e5e7eb;
  border-radius:999px;
  white-space:nowrap;
  line-height:1.2;
  background:#fff;
}
.hp-ps-check span{ font-size:12px; color:#111827; }

/* 토글(차고지/전용공간) */
.hp-ps-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}
.hp-ps-toggle-label{ font-size:12px; color:#111827; white-space:nowrap; }

/* 토글 스위치(그레이, 그림자 제거) */
.hp-ps-switch{
  position:relative;
  display:inline-block;
  width:44px;
  height:24px;
  flex:0 0 auto;
}
.hp-ps-switch input{ opacity:0; width:0; height:0; }
.hp-ps-slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  border:1px solid #d1d5db;
  border-radius:999px;
  background:#f3f4f6;
  transition:0.18s;
  box-shadow:none;
}
.hp-ps-slider:before{
  content:"";
  position:absolute;
  height:18px;
  width:18px;
  left:3px;
  top:2px;
  border-radius:999px;
  background:#fff;
  border:1px solid #d1d5db;
  transition:0.18s;
  box-shadow:none;
}
.hp-ps-switch input:checked + .hp-ps-slider{
  background:#e5e7eb;
  border-color:#9ca3af;
}
.hp-ps-switch input:checked + .hp-ps-slider:before{
  transform:translateX(20px);
  border-color:#9ca3af;
}

/* 요금 슬라이더: 선(line) 스타일 + 그림자 제거 */
.hp-ps-range{ display:flex; gap:10px; align-items:center; }
.hp-ps-range input[type="range"]{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  height:18px;
  margin:0;
}
.hp-ps-range input[type="range"]::-webkit-slider-runnable-track{
  height:2px; background:#d1d5db; border-radius:999px; box-shadow:none;
}
.hp-ps-range input[type="range"]::-moz-range-track{
  height:2px; background:#d1d5db; border-radius:999px; box-shadow:none;
}
.hp-ps-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px; height:12px;
  border-radius:999px;
  background:#9ca3af;
  border:1px solid #9ca3af;
  margin-top:-5px;
  box-shadow:none;
}
.hp-ps-range input[type="range"]::-moz-range-thumb{
  width:12px; height:12px;
  border-radius:999px;
  background:#9ca3af;
  border:1px solid #9ca3af;
  box-shadow:none;
}

/* 검색/초기화 버튼: 크기 + 줄바꿈 방지 */
.hp-ps-actions{
  margin-top:18px;
  display:flex;
  gap:10px;
}
.hp-ps-actions .button{
  flex:1 1 0;
  padding:10px 12px;
  font-size:13px;
  white-space:nowrap;
}

/* 결과 헤더/빈 화면 */
.hp-ps-result-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  margin-bottom:12px;
}
.hp-ps-result-head h2{ margin:0; font-size:18px; }

.hp-ps-empty{
  border:1px dashed #d1d5db;
  border-radius:14px;
  padding:18px;
  text-align:center;
}
.hp-ps-empty h2{ margin:0 0 6px; font-size:18px; }
.hp-ps-empty p{ margin:0; color:#6b7280; }

/* 결과 카드 */
.hp-ps-cards{ display:flex; flex-direction:column; gap:12px; }
.hp-ps-card-item{
  display:flex;
  gap:12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.hp-ps-card-thumb{
  width:160px;
  flex:0 0 160px;
  background:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hp-ps-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hp-ps-thumb-ph{ font-size:12px; color:#9ca3af; }

.hp-ps-card-body{ padding:8px; flex:1 1 auto; min-width:0; }

.hp-ps-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.hp-ps-card-title{ margin:0; font-size:16px; color:#111827; }

/*  상세보기 버튼 강조(한 번만 정의) */
.hp-ps-detail-btn{
  font-size:12px;
  font-weight:700;
  padding:3px 12px;
  border-radius:10px;
  border:1px solid #9ca3af;
  background:#111827;
  color:#ffffff;
  text-decoration:none;
}
.hp-ps-detail-btn:hover{ background:#000; border-color:#000; }

.hp-ps-card-addr{ margin-top:4px; color:#4b5563; font-size:13px; }
.hp-ps-card-meta{ display:flex; flex-wrap:wrap; gap:16px; font-size:13px; margin-top:6px; color:#111827; }

/*  기준일(좌) + p_code(우) */
.hp-ps-card-foot{
  margin-top:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

/*  p_code: 보더 제거 + bold(한 번만 정의) */
.hp-ps-code{
  border:none !important;
  background:transparent !important;
  padding:0 !important;
  font-weight:800;
  color:#111827;
  font-size:12px;
}

/* 페이징 */
.hp-ps-paging{
  margin-top:12px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.hp-ps-paging a{
  padding:3px 6px;
  border:1px solid #d1d5db;
  border-radius:8px;
  text-decoration:none;
  font-size:11px;
  line-height:1.1;
  color:#111827;
  background:#fff;
}
.hp-ps-paging a.is-active{ font-weight:700; border-color:#6b7280; }

/* 가능면수/가능대수 입력 폰트 */
#hp-ps-min-free,
#hp-ps-min-avail{
  font-size:12px;
  padding:9px 10px;
}
label[for="hp-ps-min-free"],
label[for="hp-ps-min-avail"]{
  font-size:12px;
}


/* =========================
   3) Detail (상세) /parking-status/detail/
   - ✅ grid2만 사용(기존 grid 제거)
   ========================= */
.hp-ps-detail-wrap{
  max-width:1180px ; 
  margin:0 auto;
  padding:16px 14px;
}

.hp-ps-detail-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.hp-ps-detail-back{ text-decoration:none; font-size:13px; }

.hp-ps-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-top:6px;
}
.hp-ps-detail-head-left{ min-width:0; }
.hp-ps-detail-head-right{ text-align:right; }
.hp-ps-detail-title{ margin:0; font-size:22px; color:#111827; }
.hp-ps-detail-addr{ margin-top:6px; color:#4b5563; font-size:13px; }
.hp-ps-detail-code{ font-size:13px; color:#111827; }

/*  상세 2열 그리드(좌 넓게 / 우 좁게) */
.hp-ps-detail-grid2{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr; /* 더 넓게 원하면 1.75/0.25 */
  gap:12px;
  align-items:start;
}
@media (max-width:980px){
  .hp-ps-detail-grid2{ grid-template-columns:1fr; }
}

/* 우측 컬럼은 좁으니 값은 좌측정렬이 더 보기 좋음 */
.hp-ps-detail-grid2 .hp-ps-col:last-child .hp-ps-row-val{ text-align:left; }

/* 상세 카드 내부(공용) */
.hp-ps-card-titlebar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.hp-ps-card-titlebar--map .hp-ps-map-link{ margin-left:auto; }

/* 상세 Key-Value */
.hp-ps-kv{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (min-width:1100px){
  .hp-ps-kv{ grid-template-columns:repeat(4, 1fr); }
}
.hp-ps-kv-item{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.hp-ps-kv-label{ font-size:12px; color:#6b7280; }
.hp-ps-kv-val{ font-size:18px; font-weight:800; color:#111827; margin-top:4px; }

.hp-ps-divider{ height:0px; background:#e5e7eb; margin:12px 0; }

/* 상세 rows */
.hp-ps-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-top:1px solid #f1f5f9;
}
.hp-ps-row:first-of-type{ border-top:none; }
.hp-ps-row-label{ font-size:12px; color:#6b7280; }
.hp-ps-row-val{ font-size:13px; color:#111827; text-align:right; }

.hp-ps-ok{ color:#16a34a; }
.hp-ps-no{ color:#6b7280; }

/* 상세 badges */
.hp-ps-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #d1d5db;
  font-size:12px;
  font-weight:700;
  color:#111827;
  background:#fff;
  margin-right:6px;
  margin-bottom:6px;
}

/* 상세 etc1 */
.hp-ps-note{ font-size:13px; color:#111827; line-height:1.5; }

/* ✅ 상세 mini map(한 군데에서만) */
.hp-ps-mini-map{
  width:100%;
  height:340px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  overflow:hidden;
  background:#f9fafb;
}
.hp-ps-mini-map--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:980px){
  .hp-ps-mini-map{ height:260px; }
}

/* 상세 map link */
.hp-ps-map-link{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid #9ca3af;
  background:#111827;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}

/* 상세 문의 버튼 */
.hp-ps-inquiry-bar{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content: flex-end;
}
.hp-ps-inquiry-btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #9ca3af;
  background:#111827;
  color:#fff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.hp-ps-inquiry-btn:hover{ background:#000; border-color:#000; }
.hp-ps-inquiry-btn.is-disabled,
.hp-ps-inquiry-btn:disabled{
  background:#e5e7eb;
  border-color:#d1d5db;
  color:#6b7280;
  cursor:not-allowed;
}

/* 상세 모달 */
.hp-ps-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.hp-ps-modal.is-open{ display:block; }
.hp-ps-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.hp-ps-modal-panel{
  position:relative;
  width:min(560px, calc(100% - 24px));
  margin:70px auto 0;
  background:#fff;
  border-radius:14px;
  border:1px solid #e5e7eb;
  padding:12px;
}
.hp-ps-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:6px 6px 10px;
  border-bottom:1px solid #e5e7eb;
}
.hp-ps-modal-title{ font-size:15px; font-weight:900; color:#111827; }
.hp-ps-modal-x{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.hp-ps-modal-form{ padding:10px 6px 6px; }
.hp-ps-modal-row{ margin-top:12px; }
.hp-ps-modal-row label{ display:block; font-size:12px; color:#111827; margin-bottom:6px; }
.hp-ps-modal-val{ font-size:13px; color:#111827; }
.hp-ps-modal-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:13px;
  resize:vertical;
}
.hp-ps-modal-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.hp-ps-modal-btn{
  padding:9px 12px;
  border-radius:10px;
  border:1px solid #d1d5db;
  background:#fff;
  font-size:13px;
  cursor:pointer;
}
.hp-ps-modal-btn--primary{
  background:#111827;
  border-color:#111827;
  color:#fff;
  font-weight:800;
}
.hp-ps-modal-btn--primary:hover{ background:#000; border-color:#000; }


/* ===== Detail: row fixed heights + swap g3/g4 positions ===== */

/* ✅ 여기에서 높이만 바꾸면 됩니다 */
:root{
  --hp-ps-row1-h: 300px; /* 1그룹+2그룹(상단 행) 높이 */
  --hp-ps-row2-h: 420px; /* 4그룹+3그룹(하단 행) 높이 */
}

.hp-ps-detail-grid2--fixed{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;                 /* 좌/우 비율(원하면 조절) */
  grid-template-rows: var(--hp-ps-row1-h) var(--hp-ps-row2-h); /* ✅ 행별 고정 */
  gap:12px;
  align-items:stretch;
}

/*  위치 고정(4는 왼쪽 아래, 3은 오른쪽 아래) */
.hp-ps-detail-grid2--fixed .hp-ps-g1{ grid-column:1; grid-row:1; }
.hp-ps-detail-grid2--fixed .hp-ps-g2{ grid-column:2; grid-row:1; }
.hp-ps-detail-grid2--fixed .hp-ps-g4{ grid-column:1; grid-row:2; } /* 지도(좌하) */
.hp-ps-detail-grid2--fixed .hp-ps-g3{ grid-column:2; grid-row:2; } /* 추가정보(우하) */

/*  카드: 헤더 고정 + 본문만 스크롤 */
.hp-ps-detail-grid2--fixed .hp-ps-detail-card{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.hp-ps-detail-grid2--fixed .hp-ps-card-titlebar{
  flex:0 0 auto;
}
.hp-ps-detail-grid2--fixed .hp-ps-card-body{
  flex:1 1 auto;
  overflow:auto;         /*  내용이 길면 카드 내부 스크롤 */
  padding-right:4px;     /* 스크롤바 여백 */
}

/* 지도는 카드 높이에 맞게 채움 */
.hp-ps-detail-grid2--fixed .hp-ps-g4 .hp-ps-mini-map{
  height: calc(var(--hp-ps-row2-h) - 120px); /* 대략: 카드 padding+헤더 높이 제외 */
  min-height: 260px;
}

/* 모바일에서는 고정 높이 해제(자연스러운 세로) */
@media (max-width:980px){
  .hp-ps-detail-grid2--fixed{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .hp-ps-detail-grid2--fixed .hp-ps-g1,
  .hp-ps-detail-grid2--fixed .hp-ps-g2,
  .hp-ps-detail-grid2--fixed .hp-ps-g3,
  .hp-ps-detail-grid2--fixed .hp-ps-g4{
    grid-column:auto;
    grid-row:auto;
  }
  .hp-ps-detail-grid2--fixed .hp-ps-detail-card{
    height:auto;
    overflow:visible;
  }
  .hp-ps-detail-grid2--fixed .hp-ps-card-body{
    overflow:visible;
    padding-right:0;
  }
  .hp-ps-detail-grid2--fixed .hp-ps-g4 .hp-ps-mini-map{
    height:260px;
    min-height:260px;
  }
}

/* ✅ Detail 페이지(페이지 ID로 한정)만 본문 폭 100% 강제 */
body.page-id-9129 #primary,
body.page-id-9129 .content-area{
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
}

/* 사이드바가 남아있으면 숨김 */
body.page-id-9129 #secondary{
  display:none !important;
}

/* 상세 래퍼 폭 */
body.page-id-9129 .hp-ps-detail-wrap{
  max-width: 1180px !important; /* 원하는 값 */
  width: calc(100% - 28px) !important;
  margin: 0 auto !important;
}



/* ✅ 주차장현황(홈/검색/상세) 페이지 배경을 흰색으로 통일 */
body.hp-ps-page,
body.hp-ps-page .site,
body.hp-ps-page .site-content{
  background:#fff !important;
}

/* 컨텐츠 영역도 통일감 있게 */
body.hp-ps-page .hp-ps-shell{
  background:#fff;
}

/* ✅ 인증 해제 버튼 강조 */
.hp-ps-logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #ef4444;
  background:#ef4444;
  color:#fff !important;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
}
.hp-ps-logout-btn:hover{
  background:#dc2626;
  border-color:#dc2626;
  color:#fff !important;
}