@charset "utf-8";
/* =========================================================
   JPW Gallery CSS — cleaned & deduplicated (2025-10-15)
   - 변수 정리
   - 중복 규칙 제거 및 섹션 통합
   - WebView X(삭제) 버튼 렌더링 안정화 (SVG 배경)
   - 캐러셀/스와이퍼 풀블리드 규칙 최소화 버전
   ========================================================= */

/* ------------------ Color variables ------------------ */
:root{
  --primary:#033760;
  --accent:#ffa21a;
  --price:#d9534f;
  --sep-color:#eef2f6;
}

/* ------------------ Sections wrapper ------------------ */
section.gallery_list,
section.gallery_write{
 padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin: var(--section-gap) 0;
}


/* ==================== LIST (카드형 목록) ==================== */
.gallery_grid{list-style:none;margin:0;padding:0;}
.gallery_grid .gallery_item{
  position:relative;
  display:flex;
  align-items:stretch;
  padding:14px 0 34px; /* 하단 여백 */
  border-bottom:1px solid #eee;
  background:#fff;
}

/* 썸네일 박스 */
.gallery_grid .gallery_item .thumb{
  flex:0 0 100px; /* 정사각 썸네일 크기 */
  max-width:100px;
  height:100px;
  aspect-ratio:1/1; /* 레이아웃 안정화 */
  margin-right:11px;
   white-space: nowrap;
  border-radius:8px;
  overflow:hidden;
  background:#f8f8f8;
  position:relative;
}

/* 앵커가 박스를 꽉 채우게 */
.gallery_grid .gallery_item .thumb > a{
  position:absolute;
  inset:0;
  display:block;
}

/* 이미지: cover 크롭 + 최하단 레이어 */
.gallery_grid .gallery_item .thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100% !important;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:1;
}

/* === 상태 배지 & 딤 (리스트 썸네일) === */
.gallery_item .thumb{ overflow:hidden; }
/* 예약중/완료에만 딤(판매중/숨김처리는 없음) */
.gallery_item.is-pending .thumb::after,
.gallery_item.is-hidden .thumb::after,
.gallery_item.is-completed .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.gallery_item.is-pending .thumb::after { background:rgba(0,0,0,.12); }
.gallery_item.is-completed .thumb::after { background:rgba(0,0,0,.30); }
.gallery_item.is-hidden .thumb::after { background:rgba(0,0,0,.30); }

/* 중앙 원형 배지: 라벨이 있을 때만 (= pending/completed) */
.gallery_item .thumb[data-status-label]::before{
  content:attr(data-status-label);
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(20px,13vw,60px);
  height:clamp(20px,13vw,60px);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.9);
  color:#fff;
  font-weight:700;
  font-size:clamp(10px,3.6vw,12px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  z-index:3;
  animation:listStatusPop .18s ease-out;
}
@keyframes listStatusPop{
  from{ transform:translate(-50%,-50%) scale(.92); opacity:.85; }
  to  { transform:translate(-50%,-50%) scale(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .gallery_item .thumb[data-status-label]::before{ animation:none; }
}

/* 상태 레이어 우선순위 보장 (이미지 z:1, 딤 z:2, 배지 z:3) */
.gallery_grid .gallery_item .thumb img{ z-index:1; }
.gallery_item .thumb::after{ z-index:2; }
.gallery_item .thumb::before{ z-index:3; }

/* 정보 */
.gallery_grid .gallery_item .gallery_info{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.gallery_info{margin-bottom:10px;}
.gallery_info .gi-content{display:block;color:inherit;text-decoration:none;}
.gallery_info .gi-header{position:relative;padding-right:40px;}
.gallery_info .gi-top{display:flex;flex-wrap:wrap;gap:6px;}

/* 라벨 */
.label{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;
  background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0;
}
.label-type{background:#f19208;border-color:#d78001;color:#fff;}
.label-type2{background:#2a3563;border-color:#0c1746;color:#fff;}
.label-type1{background:#f1f5f9;}

/* 메타(관리비/면적/주소) */
.gallery_info .price{
  font-size:16px;font-weight:600;color:#0f172a;margin:16px 0 10px;
}

/* 메타(권리금/관리비/전용) */
.gallery_info .meta-line{
  display:flex;flex-wrap:wrap;gap:4px 6px;margin-bottom:8px;
}
/* 첫 두 항목(권리금, 관리비)은 같은 줄 유지 */
.gallery_info .meta-line > *:nth-child(1),
.gallery_info .meta-line > *:nth-child(2){
  white-space:nowrap;flex:0 0 auto;
}
/* 세 번째 항목(전용)은 줄바꿈 강제 */
.gallery_info .meta-line > *:nth-child(3){
  flex-basis:100%;margin-top:0px;
}
.gallery_info .meta-line > *{
  display:inline-flex;align-items:center;gap:6px;min-width:0;
}
/* 아이콘 컬러 */
.gallery_info .meta i{ font-size:13px;color:#777; }

/* ✅ 주소 한 줄로 고정 + 말줄임 */
.gallery_info .meta{
  font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:block; /* inline이면 ellipsis 적용 안됨 */
  line-height:1;color:#111111;margin-top:2px;font-weight:400;
}

/* 하단 통계(채팅/좋아요) */
.gallery_info .gi-stats{
  position:absolute;right:0;bottom:8px; /* ✅ 위쪽으로 약간 띄워 여유 확보 */
  display:flex;align-items:center;justify-content:flex-end;
  gap:0px; /* ✅ 아이콘 묶음 간격 조정 (10→6) */
  font-size:12px;color:#8a8f98;padding-top:4px;margin-bottom:10px;font-weight:300;
}
.gallery_info .gi-stats .stat{display:inline-flex;align-items:center;gap:4px;line-height:1;}
.gallery_info .gi-stats .stat i{font-size:14px;color:#8a8f98;}
.gallery_info .gi-stats .good-count,
.gallery_info .gi-stats .chat-count{min-width:1.2em;text-align:left;}

@media (max-width:360px){
  .gallery_grid .gallery_item{padding-bottom:36px;} /* ✅ 모바일에서도 통계 간격 확보 */
  .gallery_info .gi-header{padding-right:36px;}
}


/* ===== 리스트 썸네일 하단 리본 ===== */
.gallery_item .thumb {
  position: relative;
}

.gallery_item .thumb > a {
  position: absolute;
  inset: 0;
  z-index: 1;        /* ← 덮는 링크는 1로 내리고 */
}



.thumb-ribbon-row {
  position: absolute;
  left: 0; bottom: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  z-index: 3;
  padding-left: 0;
  padding-bottom: 0;
}
.thumb-ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px 0 16px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: #6D4CFF;
  border-radius: 0 8px 0 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  white-space: nowrap;
}
.thumb-ribbon::before {
  content: "";
  position: absolute;
  left: -8px; top: 0; bottom: 0;
  width: 12px;
  background: inherit;
  transform: skewX(-18deg);
  transform-origin: left bottom;
}
.thumb-ribbon::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -4px;
  border-style: solid;
  border-width: 5px 5px 0 0;
  border-color: attr(data-fold color, #4b3bbd) transparent transparent transparent;
  opacity: .45;
}
.thumb-ribbon {
  max-width: 70vw;
  overflow: hidden;
  text-overflow: ellipsis;
}




/* 테마별 색상 (메인과 맞춤) */
.gallery_item .thumb .thumb-ribbon--초보창업
{
  background:#04bdb2;
}
.gallery_item .thumb .thumb-ribbon--시니어창업 {
  background:#6d4cff;
}
.gallery_item .thumb .thumb-ribbon--여성창업 {
  background:#ff5c8a;
}
.gallery_item .thumb .thumb-ribbon--소자본창업 {
  background:#ff8a00;
}
.gallery_item .thumb .thumb-ribbon--프랜차이즈 {
  background:#0ea5e9;
}
.gallery_item .thumb .thumb-ribbon--수익성창업,
.gallery_item .thumb .thumb-ribbon--프리미엄 {
  background:#111827;
}


/* ======================== 공지 핀(⭐) & 좋아요(❤️) 최종 배치 규칙 ======================== */
/* ⭐ 공지 핀: 썸네일 우측 상단 */
.gallery_grid .gallery_item .thumb{position:relative;}
.gallery_grid .gallery_item .thumb .btn-fav2{
  position:absolute;top:6px;right:6px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:rgba(255,255,255,.85);border-radius:50%;
  cursor:pointer;z-index:5;box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.btn-pin i.fa-solid.fa-star{display:none;color:#facc15;} /* 채운 별 */
.btn-pin i.fa-regular.fa-star{display:inline-block;color:#94a3b8;} /* 빈 별 */
.btn-pin.active i.fa-solid.fa-star{display:inline-block;}
.btn-pin.active i.fa-regular.fa-star{display:none;}

/* ❤️ 하트: 라벨 라인과 같은 높이(gi-header 우측) */
.gallery_info .gi-header{
  position:relative;display:flex;align-items:center; /* 라벨 수직 정렬 */
  min-height:32px; /* 라벨 높이만큼 베이스라인 확보 */
}
.gallery_info .gi-header .gi-top{display:flex;align-items:center;gap:6px;}

/* ❤️ 하트: gi-header의 세로 중앙 + 오른쪽 끝 */
.gallery_info .gi-ctls{
  position:absolute;right:0;top:50%;transform:translateY(-50%); /* ← 세로 중앙 정렬 핵심 */
  display:flex;align-items:center;gap:6px;width:32px; /* 클릭 영역 보장(선택) */
  height:32px;z-index:4;
}
/* 버튼 기본 스타일 */
.gallery_info .gi-ctls .btn-fav{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;
}
.gallery_info .gi-ctls .btn-fav i{font-size:18px; /* ← 여기를 조절 */ }
.gallery_info .gi-header .btn-fav i.fa-regular{color:#94a3b8;}
.gallery_info .gi-header .btn-fav i.fa-solid{display:none;color:#ef4444;}
.gallery_info .gi-header .btn-fav.active i.fa-solid{display:inline-block;}
.gallery_info .gi-header .btn-fav.active i.fa-regular{display:none;}


/* 썸네일은 포지셔닝 컨테이너 */
.gallery_item .thumb{
  position: relative;
  overflow: hidden; /* 기존 유지 */
}

/* 이미지는 가장 아래(z=0) */
.gallery_item .thumb > a{ position:absolute; inset:0; display:block; }
.gallery_item .thumb > a > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index: 0;
}

/* ✅ 추천 배지: 이미지 위로 */
.gallery_item .thumb-badges{
  position:absolute;
  left:10px; top:10px;
  z-index: 3;          /* 이미지(0)와 리본(2)보다 위 */
  display:flex; gap:6px; flex-wrap:wrap;
  pointer-events: none; /* 클릭 막지 않게 */
}
.gallery_item .thumb-badges .badge{ pointer-events:auto; }

.gallery_item .badge{
  display:inline-block;
  padding:5px 8px;
  font-size:11px; font-weight:600;
  border-radius:5px; color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.gallery_item .badge-reco{ background:#10b981; }

/* 썸네일 하단 리본/관리자 핀의 z-index 정리 */
.gallery_item .thumb-ribbon-row{ position:absolute; left:0; bottom:0; z-index:2; }
.gallery_item .btn-pin{ position:absolute; right:10px; top:10px; z-index:4; }



/* =========================================================
   VIEW (상세) — maintainable pack
   - 변수로 크기/비율/색 분리
   - 캐러셀(부트스트랩) vs 스와이퍼 정리
   - 상태 배지/라이트박스/CTA/스펙/키워드 등 섹션화
   - 기존 클래스명 100% 유지 (drop-in)
   ========================================================= */

/* ------------------
   Tunables (edit here)
------------------ */
:root{
  /* Swiper height on mobile/tablet */
  --swiper-m-min: 260px;
  --swiper-m-ideal: 50vh;
  --swiper-m-max: 380px;
  --swiper-t-min: 360px;
  --swiper-t-ideal: 35vh;
  --swiper-t-max: 720px;

  /* Center badge (view) */
  --badge-min: 96px;
  --badge-max: 160px;
  --badge-size-vw: 22vw;
  --badge-font-min: 18px;
  --badge-font-max: 28px;

  /* Colors */
  --view-text:#111;
  --muted:#6b7280;
  --line:#eef2f6;
  --kebab-bg:#f7f7f7;
  --danger:#e11d48;
}

/* ====================
   0) Basic blocks
==================== */
.info_box{padding:15px;}
.view-title{font-size:15px; font-weight:500; line-height:1.4; color:var(--view-text); margin-bottom:0;}
.view-price-display{font-size:17px; font-weight:700; color:#000; margin:6px 0;}
.view_txt{font-size:15px; line-height:1.4; color:#111; padding-bottom:30px; font-weight:400;}

.section-title{font-size:14px; font-weight:600; letter-spacing:-.2px; padding:12px 0; margin-bottom:8px;}

.facts{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.facts-left{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.facts-right{display:flex; align-items:center; transform:translateY(-1px);}
.facts-right .listing-id{font-size:10px; color:#667085; background:#f6f7f9; padding:2px 8px; border-radius:15px;}

.point-title{font-size:12px; font-weight:600; letter-spacing:-.2px; padding:12px 0; margin-bottom:8px;}

/* ====================
   1) Bootstrap Carousel (if used)
==================== */
.gallery_view #galleryCarousel{
  margin-left:-16px; margin-right:-16px; width:calc(100% + 32px);
  border:0; border-radius:0;
}
.gallery_view .carousel-inner,
.gallery_view .carousel-item{ aspect-ratio:4/3; width:100%; }
.gallery_view .carousel-item{ position:relative; }
.gallery_view .carousel-inner img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
@supports not (aspect-ratio:1){
  .gallery_view .carousel-item::before{content:""; display:block; padding-bottom:75%;}
  .gallery_view .carousel-inner img{position:absolute; inset:0;}
}
/* indicators/controls */
.gallery_view .carousel-indicators li{background-color:rgba(255,255,255,.7);}
.gallery_view .carousel-indicators .active{background-color:var(--primary);}
.gallery_view .carousel-control-prev-icon,
.gallery_view .carousel-control-next-icon{background-size:100% 100%; filter:invert(100%);}
/* count chip */
.carousel-count{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  padding:4px 10px; border-radius:12px; background:rgba(0,0,0,.55);
  color:#fff; font-size:12px; line-height:1; z-index:20; pointer-events:none; user-select:none;
}
.carousel-count .ccur{font-weight:700;}
/* modal close (for bootstrap lightbox) */
.btn-close-x{
  position:absolute; top:8px; right:12px; z-index:1051;
  width:44px; height:44px; border:0; background:transparent; color:#fff;
  font-size:32px; line-height:1; text-align:center; cursor:pointer; opacity:.9;
}
.btn-close-x:hover{opacity:1;}

/* ====================
   2) Swiper Main Gallery (#gallerySwiper)
==================== */
#gallerySwiper{
  width:100%; background:#000; border-radius:0 !important; overflow:hidden; position:relative;
  aspect-ratio:4/3; /* default */
}
@media (min-width:768px){ #gallerySwiper{ aspect-ratio:4/3; } }
@media (min-width:1200px){ #gallerySwiper{ aspect-ratio:16/9; height:auto; } }
/* Fallback for old browsers */
@supports not (aspect-ratio:1){
  #gallerySwiper{ position:relative; }
  #gallerySwiper::before{ content:""; display:block; padding-bottom:75%; }
  #gallerySwiper .swiper-wrapper{ position:absolute; inset:0; }
}
/* Slides & images */
#gallerySwiper .swiper-slide{ display:flex; align-items:center; justify-content:center; }
#gallerySwiper .swiper-slide img{
  position:absolute; inset:0; width:100%; height:100% !important;
  object-fit:cover; object-position:center; display:block;
}
/* Shorter height on small screens */
@media (max-width:767px){
  #gallerySwiper{
    aspect-ratio:auto !important;
    height: clamp(var(--swiper-m-min), var(--swiper-m-ideal), var(--swiper-m-max)) !important;
  }
}
@media (min-width:768px) and (max-width:1199px){
  #gallerySwiper{
    aspect-ratio:auto !important;
    height: clamp(var(--swiper-t-min), var(--swiper-t-ideal), var(--swiper-t-max)) !important;
  }
}
/* remove bottom gradient (theme-specific) */
#gallerySwiper::after{ height:0 !important; }
/* Fraction pagination as small chip */
#gallerySwiper .swiper-pagination{
  position:absolute; right:12px; bottom:12px; left:auto;
  width:auto !important; height:auto; transform:none; z-index:20;
}
#gallerySwiper .swiper-pagination-fraction{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0 10px; border-radius:999px;
  background:rgba(0,0,0,.75); color:#fff; font-weight:800; font-size:12.5px; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:0 4px 12px rgba(0,0,0,.28);
  user-select:none; pointer-events:none;
}
#gallerySwiper .swiper-pagination-fraction .swiper-pagination-current{ margin-right:2px; }
#gallerySwiper .swiper-pagination-fraction .swiper-pagination-total{ margin-left:2px; }

/* ====================
   3) Kebab (edit/delete)
==================== */
.kebab-wrap{ position:relative; }
.kebab-btn{
  width:36px; height:36px; border-radius:10px; border:0;
  background:var(--kebab-bg); display:grid; place-items:center; color:#333;
}
.kebab-menu{
  position:absolute; right:0; top:44px; min-width:120px;
  background:#fff; border:1px solid #e9ecef; border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.08); overflow:hidden;
}
.kebab-item{
  display:block; width:100%; padding:10px 12px; text-align:left;
  color:#222; text-decoration:none; font-size:14px;
}
.kebab-item:hover{ background:#f8f9fa; }
.kebab-item.danger{ color:var(--danger); }
/* resets inside menu */
.kebab-menu .kebab-item{
  border:none; outline:none; box-shadow:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent;
}
.kebab-menu .kebab-item:hover,
.kebab-menu .kebab-item:active,
.kebab-menu .kebab-item:focus,
.kebab-menu .kebab-item:focus-visible{
  background:#f8f9fa; border:none !important; outline:none !important; box-shadow:none !important;
}

/* ====================
   4) Meta under title
==================== */
.post-meta-icons{
  margin-top:8px; display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  color:var(--muted); font-size:13px; line-height:1.4;
}
.post-meta-icons i{ font-size:15px; vertical-align:middle; margin-right:4px; color:#94a3b8; }
.post-meta-icons .dot{ width:4px; height:4px; border-radius:50%; background:#cbd5e1; display:inline-block; }
@media (max-width:480px){
  .post-meta-icons{ font-size:12px; gap:8px; }
  .post-meta-icons i{ font-size:14px; margin-right:3px; }
  .post-meta-icons .dot{ width:3px; height:3px; }
}

/* ====================
   5) Specs list (rows)
==================== */
.gallery_view .info_view.specs{ display:block; margin-top:2px; }
.gallery_view .info_view.specs .row{
  display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);
}
.gallery_view .info_view.specs .row:first-child{ padding-top:0; }
.gallery_view .info_view.specs .row:last-child{ border-bottom:none; padding-bottom:0; }
.gallery_view .info_view.specs .col_th{
  flex:0 0 88px; min-width:88px; font-size:14px; font-weight:700; line-height:1.4; padding-top:2px;
}
.gallery_view .info_view.specs .col_td{
  flex:1 1 auto; font-size:14px; color:#0f172a; line-height:1.45; word-break:break-word;
}
.gallery_view .info_view.specs .col_td .unit,
.gallery_view .info_view.specs .col_td small{ font-weight:600; color:var(--muted); }
@media (max-width:300px){
  .gallery_view .info_view.specs .col_th{ flex-basis:80px; min-width:80px; }
  .gallery_view .info_view.specs .col_td{ font-size:14.5px; }
}

/* ====================
   6) Map
==================== */
#map{ width:100%; height:400px; border:1px solid #ddd; border-radius:8px; }

/* ====================
   7) Buttons row
==================== */
.gallery_view .gallery_buttons{ display:flex; gap:8px; margin-top:20px; }
.gallery_view .gallery_buttons a{
  flex:1; height:46px; border-radius:14px; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.gallery_view .btn_list{ background:#f8fafc; color:var(--primary); border:1px solid #e2e8f0; }
.gallery_view .btn_edit{ background:#3267a8; color:#fff; }
.gallery_view .btn_delete{ background:#d9534f; color:#fff; }
.gallery_view .btn_write{ background:var(--primary); color:#fff; }

/* ====================
   8) Floating actions
==================== */
.floating_actions{
  position:fixed; right:16px; bottom:calc(80px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:12px;
}
.floating_actions .action_btn{
  width:56px; height:56px; border-radius:50%; border:none; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer;
}
.floating_actions .btn-scrap.active{ background:#d9534f; }

/* ====================
   9) Keyword tiles
==================== */
.kw-grid-view{
  list-style:none; margin:10px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
}
@media (max-width:768px){ .kw-grid-view{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:420px){ .kw-grid-view{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.kw-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; height:76px; border:1px solid #e9eef5; border-radius:14px; background:#fff; color:#222;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.kw-tile .kw-ico{ font-size:24px; line-height:1; opacity:.9; }
.kw-tile .kw-label{ font-size:12px; font-weight:600; letter-spacing:.02em; }

/* ====================
   10) Sticky CTA (bottom)
==================== */
.gallery-swiper-wrap{ position:relative; } /* overlay base */
body.view-noheader .bottom_nav, body.view-noheader .fab-write{ display:none !important; }
.view-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:99999;
  background:#fff; border-top:1px solid #eee; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:10px; justify-content:space-between; align-items:center;
}
.view-sticky-cta .cta-btn{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:8px;
  height:46px; border-radius:12px; font-size:12px; font-weight:600; border:0; cursor:pointer; position:relative;
}
.view-sticky-cta .cta-btn i{ font-size:18px; line-height:1; }
.view-sticky-cta .cta-like{ background:#f2f3f5; color:#222; }
.view-sticky-cta .cta-like .fa-solid.fa-heart{ display:none; }
.view-sticky-cta .cta-like.active{ background:#ffe8e8; color:#d94141; }
.view-sticky-cta .cta-like.active .fa-regular.fa-heart{ display:none; }
.view-sticky-cta .cta-like.active .fa-solid.fa-heart{ display:inline-block; }
.view-sticky-cta .cta-chat{ background:#033760; color:#fff; }
.btn-scrap .fa-solid.fa-bookmark{ display:none; }
.btn-scrap.active .fa-regular.fa-bookmark{ display:none; }
.btn-scrap.active .fa-solid.fa-bookmark{ display:inline-block; }
@media (max-width:991.98px){ body.view-noheader{ padding-bottom:90px; } }
body.view-noheader{ padding-bottom:90px; }
.cta-open-app{
  flex:1; height:48px; border-radius:12px; background:#033760; color:#fff; font-weight:700; font-size:15px;
  border:0; display:flex; align-items:center; justify-content:center; gap:8px;
}
.cta-open-app i{ font-size:18px; }

/* =========================
   11) Status badge (center on images)
========================= */
.gallery_view .gallery-swiper-wrap{ position:relative; } /* ensure overlay anchor */

/* kill any legacy corner badges/overlays */
.gallery_view.is-pending  .gallery-swiper-wrap::after,
.gallery_view.is-completed .gallery-swiper-wrap::after
.gallery_view.is-hidden .gallery-swiper-wrap::after
{ content:none !important; }
.gallery_view.is-completed .swiper-slide::before{ content:none !important; }

/* dim behind the circle */
.gallery_view .gallery-swiper-wrap > .swiper{ position:relative; }
.gallery_view.is-pending  .gallery-swiper-wrap > .swiper::before,
.gallery_view.is-hidden  .gallery-swiper-wrap > .swiper::before,
.gallery_view.is-completed .gallery-swiper-wrap > .swiper::before{
  content:""; position:absolute; inset:0; z-index:8; pointer-events:none;
}
.gallery_view.is-pending  .gallery-swiper-wrap > .swiper::before{ background:rgba(0,0,0,.15); }
.gallery_view.is-completed .gallery-swiper-wrap > .swiper::before{ background:rgba(0,0,0,.35); }
.gallery_view.is-hidden  .gallery-swiper-wrap > .swiper::before{ background:rgba(0,0,0,.15); }

/* center circle */
.gallery_view.is-pending  .gallery-swiper-wrap::before,
.gallery_view.is-hidden  .gallery-swiper-wrap::before,
.gallery_view.is-completed .gallery-swiper-wrap::before{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  width:92px;
  height:92px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:8px;
  box-sizing:border-box;

  text-align:center;
  white-space:normal;
  word-break:keep-all;
  line-height:1.2;

  font-weight:800;
  font-size:13px;
  letter-spacing:0;
  color:#fff;

  background:rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  backdrop-filter:blur(1.5px);

  z-index:9;
  pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  animation:statusPop .18s ease-out;
  content:"";
}
.gallery_view.is-pending  .gallery-swiper-wrap::before{ content:"예약중"; }
.gallery_view.is-completed .gallery-swiper-wrap::before{ content:"거래완료"; }
.gallery_view.is-hidden .gallery-swiper-wrap::before{ content:"숨김"; }

@keyframes statusPop{
  from{ transform:translate(-50%,-50%) scale(.92); opacity:.85; }
  to  { transform:translate(-50%,-50%) scale(1); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .gallery_view.is-pending  .gallery-swiper-wrap::before,
    .gallery_view.is-hidden  .gallery-swiper-wrap::before,
  .gallery_view.is-completed .gallery-swiper-wrap::before{ animation:none; }
}

/* 숨김 상태에서 좋아요/스크랩 버튼 비활성화 */
.js-like-btn.is-disabled,
.js-scrap-btn.is-disabled {
  opacity: .45;
  pointer-events: none;
}


/* 하트 + 북마크를 세로로 배치 */
.gallery_info .gi-ctls {
  flex-direction: column;  /* 기존 display:flex 그대로 두고 방향만 세로 */
  gap: 2px;
  height: auto;            /* 버튼이 2개일 때도 여유 있게 */
}


/* 🔖 북마크 버튼 (하트 아래) */
.gallery_info .gi-ctls .btn-scrap-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* 채워진/라인 토글 */
.gallery_info .gi-ctls .btn-scrap-toggle i.fa-solid {
  display: none;
  color: #999;  /* 북마크 포인트 색(원하면 변경) */
}
.gallery_info .gi-ctls .btn-scrap-toggle i.fa-regular {
  color: #94a3b8;
}

/* is-scrapped 상태일 때 = 채워진 아이콘 표시 */
.gallery_info .gi-ctls .btn-scrap-toggle.is-scrapped i.fa-solid {
  display: inline-block;
}
.gallery_info .gi-ctls .btn-scrap-toggle.is-scrapped i.fa-regular {
  display: none;
}

/* 하트 아래 북마크 위치 살짝 내리기 */
.gallery_info .gi-ctls .btn-scrap-toggle {
  margin-top: 20px;  /* 🔽 북마크를 약간 아래로 내림 (2~6px로 조정 가능) */
}

/* 기본적으로는 스크랩 버튼을 숨김 */
.btn-scrap-toggle {
  display: none;
}

/* 카드 안, 하트 밑에 있는 스크랩 버튼만 보이게 */
.gallery_info .gi-ctls .btn-scrap-toggle {
  display: flex;
}




/* ====================
   12) Lightbox (Swiper-based LB)
==================== */
#lbModal, #lbModal .lb-panel, #lbSwiper, #lbSwiper .swiper-wrapper, #lbSwiper .swiper-slide{ height:100%; }
#lbSwiper .swiper-wrapper{ align-items:center; }
#lbSwiper .swiper-slide{ display:flex; align-items:center; justify-content:center; }
#lbSwiper .lb-imgbox{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  will-change:transform; backface-visibility:hidden;
}
#lbSwiper img{
  max-width:100%; max-height:100%; object-fit:contain;
  image-rendering:-webkit-optimize-contrast; user-select:none; -webkit-user-drag:none; transform:translateZ(0);
}
/* fraction as button-like chip */
#lbSwiper .swiper-pagination{
  position:absolute; left:50%; bottom:calc(12px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:20; width:auto; height:auto;
  padding:6px 10px; border-radius:9999px; background:rgba(0,0,0,.65); color:#fff;
  font-weight:700; line-height:1; letter-spacing:.02em; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
#lbSwiper .swiper-pagination-fraction,
#lbSwiper .swiper-pagination-current,
#lbSwiper .swiper-pagination-total{ color:#fff !important; }
#lbModal .lb-panel > div:last-child{ position:relative; }
#lbModal #lbClose{ touch-action:manipulation; }







/* ==================== WRITE (글쓰기) ==================== */
.lis_write{
  max-width:820px;margin:0 auto;padding:12px 30px 50px;box-sizing:border-box;background:#fff;
}
.lis_write .form-row{margin-bottom:14px;}
.lis_write .flex-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lis_write .form-label{display:block;margin-bottom:8px;font-weight:800;color:#0f172a;font-size:14px;}
.lis_write .req{color:#d9534f;}
.lis_write .input-text,
.lis_write .input-select,
.lis_write .input-textarea{
  width:100%;height:44px;padding:10px 12px;font-size:12px;box-sizing:border-box;
  border:1px solid #e2e8f0;border-radius:14px;background:#fff;outline:none;
  transition:border .15s ease, box-shadow .15s ease;
}
.lis_write .input-textarea{min-height:160px;height:auto;line-height:1.5;resize:vertical;}
.lis_write .input-text:focus,
.lis_write .input-select:focus,
.lis_write .input-textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(3,55,96,.08);
}
.lis_write .check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#334155;}
.lis_write .help{margin-top:6px;font-size:12px;color:#888;}
.lis_write .frm_input{
  width:100%;height:44px;padding:10px 12px;font-size:12px;box-sizing:border-box;
  border:1px solid #e2e8f0;border-radius:14px;background:#fff;outline:none;
  transition:border .15s ease, box-shadow .15s ease;
}
.lis_write .frm_input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(3,55,96,.08);}
.lis_write .full_input{width:100%!important;}
/* number 스핀 제거 */
.lis_write input[type=number]::-webkit-outer-spin-button,
.lis_write input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.lis_write input[type=number]{-moz-appearance:textfield;}
/* iOS select */
.lis_write select.input-select{height:44px;-webkit-appearance:none;background-image:none;}
/* 1열 */
@media (max-width:360px){
  .lis_write{padding:10px 12px 80px;}
  .lis_write .flex-2{grid-template-columns:1fr;}
}
/* 주소 행 */
.lis_write .addr-row{display:grid!important;grid-template-columns:1fr!important;}
.lis_write .addr-row .form-label{display:block;margin-bottom:8px;}
.lis_write .addr-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.lis_write .addr-group .frm_input{flex:1 1 240px;min-width:180px;}
.addr-clickable{cursor:pointer;background:#fff;}
.addr-clickable::placeholder{color:#9ca3af;}

/* 우편번호 레이어 (단일 정의) */
#postcodeWrap{display:none;}
.postcode-wrap{position:fixed;inset:0;z-index:9999;}
.postcode-dim{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.postcode-inner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(600px,92vw);height:min(520px,80vh);background:#fff;border-radius:8px;
  overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.postcode-close{
  position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;background:transparent;
  font-size:24px;line-height:1;cursor:pointer;
}

/* 지도 미리보기 */
#map_preview{
  width:100%;height:250px;margin-top:10px;border:1px solid #e9eef3;border-radius:12px;display:none;
}

/* ===== 단위(input + 단위텍스트)를 같은 줄에 정렬 ===== */
.unit-field{display:flex;align-items:center;gap:6px;}
.unit-field input{flex:1;min-width:0;}
/* 단위(span.unit)를 인라인으로 정렬 */
.unit-field .unit{
  display:inline-block;font-size:13px;color:#555;line-height:1; /* 높이 정렬 보정 */
  white-space:nowrap;
}
/* 모바일에서도 깨지지 않게 */
@media (max-width:768px){
  .unit-field{gap:4px;}
  .unit-field .unit{font-size:12px;}
}
.check-inline{font-weight:normal;font-size:13px;color:#555;margin-left:8px;}
.check-inline input{margin-right:3px;vertical-align:middle;}

/* ✅ 없음 체크시 회색 처리 */
.unit-field.disabled{opacity:.5;pointer-events:none;}
.unit-field.disabled input{background:#f4f5f6;color:#999;}
.unit-field.disabled .unit{color:#aaa;}

/* 두 컬럼 컨테이너 */
.floor-parking-block .col{
  display:flex;flex-direction:column;gap:8px; /* 라벨 ↔ 입력칸 간격 */
}
/* 층정보 입력칸 (현재층 / 총층) 한 줄 */
.floor-inline{display:flex;align-items:center;gap:8px;}
/* 작은 입력칸 폭 */
.unit-field.xs{width:110px;}
.unit-field.xs input{width:100%;}
.sep{color:#9ca3af;}
/* 도움말 */
.floor-help{margin-top:6px;color:#6b7280;font-size:12px;}
/* 모바일일 때 폭 살짝 줄임 */
@media (max-width:640px){ .unit-field.xs{width:96px;} }






/* 대표 키워드 관련 체크박스 칩 스타일 — 있으면 보기 좋음 */
.kw-grid{display:flex;flex-wrap:wrap;gap:8px;}
.kw-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;
  font-size:13px;line-height:1;cursor:pointer;background:#fff;
}
.kw-chip input{transform:translateY(1px);}
.kw-chip:hover{border-color:#cbd5e1;}

/* Flatpickr 캘린더 스타일 보정 */
.flatpickr-calendar{border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.15);font-size:14px;}
/* 입력 필드 높이 맞춤 */
.flatpickr-input[readonly]{cursor:text;}
input.flatpickr-input,.flatpickr-input{height:40px;border-radius:8px;}
/* 지우기 버튼 (×) */
.fp-clear-btn{
  position:absolute;top:6px;right:8px;background:none;border:none;
  font-size:18px;line-height:1;color:#999;cursor:pointer;transition:color .2s ease;
}
.fp-clear-btn:hover{color:#000;}



/* 하단 고정 버튼 바 */
.lis_write .write_btns{
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 4000; /* 네비보다 위 */
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,.98);
  backdrop-filter: saturate(120%) blur(6px);
  padding: 10px 16px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.08);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}



.lis_write .btn{
  height:48px;padding:0 16px;border-radius:14px;font-weight:600; font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  flex:1 1 auto;border:1px solid transparent;cursor:pointer;
}
.lis_write .btn.primary{background:var(--primary);color:#fff;}
.lis_write .btn.line{background:#f8fafc;color:var(--primary);border:1px solid #e2e8f0;}

/* ==================== MULTI UPLOADER ==================== */
.uploader-drop{
  display:block;position:relative;width:100%;height:120px;
  border:1px dashed #cfd6de;border-radius:14px;background:#f8fafc;
  overflow:hidden;cursor:pointer;text-align:center;
}
.uploader-drop.dragging{background:#eef6ff;border-color:#8fbff5;}
.uploader-input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.uploader-guide{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:#5c6672;
}
.uploader-guide strong{font-size:14px;font-weight:800;color:#0f172a;}
.uploader-guide span{font-size:12px;color:#64748b;}

/* 미리보기 그리드 */
.uploader-previews{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;width:100%;
}
@media (max-width:360px){
  .uploader-previews{grid-template-columns:repeat(3,1fr);gap:8px;}
  .uploader-drop{height:110px;}
}
@media (min-width:560px){
  .uploader-previews{grid-template-columns:repeat(4,1fr);}
}
.preview-item{
  position:relative;width:100%;padding-bottom:100%;border-radius:12px;overflow:hidden;background:#f5f6f8;
}
.preview-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* 대표 배지 */
.preview-item .badge-rep{
  position:absolute;top:6px;left:6px;background:var(--primary);color:#fff;
  font-size:11px;font-weight:800;padding:3px 7px;border-radius:999px;display:none;
}
.preview-item.representative{outline:2px solid var(--primary);outline-offset:-2px;}
.preview-item.representative .badge-rep:not([hidden]){display:inline-block;}
.badge-rep[hidden]{display:none!important;}

/* 삭제 버튼: WebView 안정화 (SVG 배경) */
.preview-item .btn-delete-file{
  position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);-webkit-appearance:none;appearance:none;z-index:10;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;color:transparent;
}

/* 기존 첨부(수정모드) */
.upload-existing-grid{display:flex;flex-wrap:wrap;gap:12px;}
.upload-existing-item{position:relative;width:108px;height:108px;overflow:hidden;background:#fff;}
.upload-thumb{
  width:100%;height:100%;border-radius:10px;overflow:hidden;display:block;
  background:#f5f6f8;padding:0;margin:0;border:0;cursor:pointer;
}
.upload-thumb img{width:100%;height:100%;object-fit:cover;border:0;box-shadow:none;}
.upload-meta .name{display:none!important;}
.upload-meta .del{
  position:absolute;bottom:5px;right:6px;display:inline-flex;align-items:center;gap:4px;
  padding:2px 6px;font-size:12px;border:1px solid #e5e7eb;border-radius:10px;background:rgba(255,255,255,.92);
}
.upload-meta .del input{margin:0;}
.upload-existing-item .badge-rep{
  position:absolute;top:8px;left:8px;z-index:5;padding:2px 6px;font-size:12px;line-height:1;
  border-radius:10px;background:#003760;color:#fff;display:none;
}
.upload-existing-item.is-rep .badge-rep:not([hidden]){display:inline-block;}
.upload-existing-item .upload-thumb:focus{outline:2px solid #93c5fd;outline-offset:2px;}
@media (max-width:480px){.upload-existing-item{width:92px;height:92px;}}

/* 접근성 포커스 */
.lis_write .btn:focus-visible,
.lis_write .uploader-drop:focus-visible,
.lis_write .frm_input:focus-visible,
.lis_write .input-text:focus-visible,
.lis_write .input-select:focus-visible,
.lis_write .input-textarea:focus-visible{
  outline:2px solid rgba(3,55,96,.26);outline-offset:2px;
}

/* ==================== 상태 변경 바텀시트 ==================== */
.status-pannel{display:flex;justify-content:flex-end;margin-top:8px;}
.status-trigger{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #e6e6e6;
  border-radius:12px;background:#fff;font-size:12px;font-weight:500;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.status-trigger__text{line-height:1;}
.status-trigger i{font-size:12px;opacity:.7}
.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.05) inset; }
.status-available{background:#2ecc71;}
.status-pending{background:#f1c40f;}
.status-completed{background:#3498db;}
.status-hidden{background:#bdc3c7;}

.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:9997;}
.status-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:9998;background:#fff;
  border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -8px 24px rgba(0,0,0,.2);
  transform:translateY(100%);transition:transform .22s ease;padding:8px 14px 14px;
}
.status-text{font-size:12px;font-weight:500;}

/* ===== 비로그인 또는 타인일 때 상태 텍스트 중앙정렬 ===== */
.view-toolbar .toolbar-left{display:flex;align-items:center;}
/* 기본은 왼쪽 정렬 (내 게시물일 때) */
.view-toolbar.has-manage .toolbar-left{justify-content:flex-start;}
/* 본인이 아니거나 로그아웃 상태일 때는 중앙 정렬 */
.view-toolbar:not(.has-manage) .toolbar-left{justify-content:center;width:100%;}

/* 바텀시트가 CTA(99999)보다 위로 */
.status-sheet{z-index:100050;}
/* 배경 딤도 CTA 위로 */
.sheet-backdrop{z-index:100040;}
/* 시트 안 내용이 CTA나 홈바에 가리지 않게 하단 여백 추가 */
.status-sheet{
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px) + var(--cta-height, 4px) /* CTA 높이 가정치 */);
}
.status-sheet.open{transform:translateY(0);}
.sheet-handle{width:44px;height:4px;border-radius:2px;background:#ddd;margin:8px auto 10px;}
.sheet-title{text-align:center;font-weight:700;margin-bottom:6px;font-size:15px;}
.sheet-list{list-style:none;margin:0;padding:0;}
.sheet-item{
  width:100%;padding:14px 10px;border:none;background:#fff;font-size:14px;font-weight:500;
  border-bottom:1px solid #f1f1f1;cursor:pointer;display:flex;align-items:center; /* 세로 가운데 */
  justify-content:center; /* 가로 가운데 ← 핵심 */
  gap:10px;text-align:center; /* 텍스트 줄바꿈 시 중앙 유지 */
}
.sheet-item:last-child{border-bottom:none;}
.sheet-item.danger{color:#d64545;}
/* 점 크기 고정(옵션) — 가운데 정렬 시 폭 흔들림 방지 */
.sheet-item .status-dot{flex:0 0 9px;}
.sheet-item:last-child{border-bottom:none;}
.sheet-item.danger{color:#d64545;}
.sheet-item .sheet-label{margin:0 auto;}

.sheet-cancel{
  width:100%;margin-top:8px;padding:13px 10px;border:none;background:#f5f5f5;
  border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;
}
.sheet-confirm{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px;margin-top:10px;border:1px solid #eee;border-radius:10px;background:#fafafa;
}
.sheet-confirm__text{font-size:14px;line-height:1.4;}
.sheet-confirm__actions{display:flex;gap:8px;}
.btn-outline{padding:8px 14px;border:1px solid #ddd;background:#fff;border-radius:8px;font-weight:600;}
.btn-primary{padding:8px 14px;border:0;background:#2e7dff;color:#fff;border-radius:8px;font-weight:700;}

.status-toast{
  position:fixed;left:50%;top:48vh;transform:translate(-50%, -50%);
  z-index:100200;max-width:min(640px, 96vw);min-width:280px;
  padding:12px 16px;border-radius:14px;background:rgba(0,0,0,.88);color:#fff;
  display:flex;align-items:center;justify-content:center; /* ← 가운데 정렬 */
  gap:0; /* 버튼 없어졌으니 간격 0 */
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.status-toast .msg{flex:0 1 auto;text-align:center;line-height:1.4;}
.status-toast[hidden]{display:none !important;}
/* 혹시 CSS만으로 임시로 감추고 싶으면(HTML 수정 못할 때) */
.status-toast .undo{display:none !important;}

/* ================================ FAB (글쓰기 버튼) & 하단 네비 처리 ================================ */
:root{ --tabbar-h: 64px; } /* 하단 네비 높이(환경에 맞게 조절) */

.fab-write{
  position:fixed;right:18px;bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom,0px));
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#003760;color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,0.25);
  z-index:1100; 
}
.navbar,.bottom-nav,.app-bottom-nav{z-index:1000;}
@media (max-width:360px){
  .fab-write{bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom,0px));}
}
@media (prefers-color-scheme: dark){
  .fab-write{background:#ffb648;color:#1b1f24;}
}


/* =========================================================
   ⑦ 플로팅 작성 버튼 (FAB)
========================================================= */
.fab-write {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 1050;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #003760;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}


/* ==================== Empty state (즐겨찾기) ==================== */
.empty_favorites{
  text-align:center;margin:50px 0;padding:30px;border:1px solid #ddd;border-radius:8px;background:#fafafa;
}
.empty_favorites p{font-size:1.2em;margin-bottom:20px;color:#555;}
.btn_go_listing{
  display:inline-block;padding:10px 20px;font-size:1em;color:#fff;background:var(--primary);
  border-radius:6px;text-decoration:none;font-weight:700;
}
.btn_go_listing:hover{opacity:.9;}

/* ==================== Gallery slider (reco) ==================== */
.gal-title{
  font-size:18px;font-weight:900;margin:16px 0 10px;display:flex;align-items:center;gap:8px;
}
.gal-subtitle{font-size:16px;font-weight:800;margin:16px 0 8px;}
.gal-slider{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 14px);gap:14px;
  overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.gal-slider::-webkit-scrollbar{display:none;}
.gal-card{
  scroll-snap-align:start;background:#fff;border:1px solid #eef0f2;border-radius:14px;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.gal-thumb{position:relative;width:100%;padding-bottom:66.66%;background:#f5f6f8;}
.gal-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.gal-body{padding:10px;}
.gal-title2{
  font-weight:800;color:#111;font-size:14.5px;line-height:1.35;height:3.6em;overflow:hidden;
}
.gal-meta{
  display:flex;gap:10px;align-items:center;color:#8a8f98;font-size:12.5px;margin-top:6px;
}
.gal-meta i{font-size:12px;}

/* ==================== View toolbar & actions ==================== */
.view-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-bottom:1px solid #f1f3f5;border-top:1px solid #f1f3f5;
  background:#f7f7f7;position:sticky;top:0;z-index:5;
}
.view-back-btn{position:absolute;top:var(--safe-top,16px);left:12px;z-index:50;}
.view-back-btn button{
  background:transparent;border:0;padding:6px;cursor:pointer;color:#fff;line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.35);
}
.view-back-btn i{font-size:22px;}
.view-actions{position:absolute;top:var(--safe-top,16px);right:12px;z-index:50;display:flex;gap:14px;}
.view-actions button{
  background:transparent;border:0;cursor:pointer;color:#fff;line-height:1;padding:6px;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.35);
}
.view-actions i{font-size:22px;}
.btn-like i.fa-solid{display:none;}
.btn-like.active i.fa-regular{display:none;}
.btn-like.active i.fa-solid{display:inline;color:#fff;}

/* ===== 구분선 유틸 ===== */
.ui-band{
  height:10px;background:#f8fafc;border-top:1px solid var(--sep-color);border-bottom:1px solid var(--sep-color);
  margin:12px 0;border-radius:6px;
}
.ui-divider{
  display:flex;align-items:center;gap:10px;margin:14px 0;color:#6b7280;font-weight:700;font-size:13px;
}
.ui-divider::before,
.ui-divider::after{
  content:"";flex:1 1 0;height:1px;background:linear-gradient(to right, transparent, var(--sep-color), transparent);
}
.ui-sep--solid{background:var(--sep-color);}

/* ===== 스펙 카드 그리드 ===== */
.spec-grid{
  list-style:none;margin:0;padding:0 0 20px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
@media (min-width:992px){ .spec-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
.spec-card{
  background:#fff;border:1px solid #f0f2f4;border-radius:12px;padding:12px 14px;min-height:64px;
  display:flex;flex-direction:column;justify-content:center;box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.spec-label{font-size:12px;color:#6b7280;margin-bottom:4px;}
.spec-value{font-size:12px;color:#111;font-weight:600;}

/* 라벨 + 작은 아이콘 */
.spec-label{
  display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;
}
.spec-label i{
  font-size:18px; /* 라벨 왼쪽 작은 아이콘 */
  color:#6b7280;line-height:1;flex-shrink:0;
}

/* 카드 기본 + 배경 아이콘 자리잡기 */
.spec-card{
  position:relative; /* 배경아이콘 absolute 기준 */
  background:#f8f8f8;border:1px solid #f0f2f4;border-radius:12px;padding:12px 14px;min-height:64px;
  display:flex;flex-direction:column;justify-content:center;box-shadow:0 1px 0 rgba(0,0,0,.02);
}
/* 오른쪽 하단 ‘배경처럼’ 보이는 큰 아이콘 */
.spec-bgicon{
  position:absolute;right:10px;bottom:8px;font-size:22px; /* 필요 시 조정 */
  color:#000;opacity:.0; /* 연하게 */ pointer-events:none;line-height:1;
}


/* Remix 아이콘은 꼭 Remix 폰트로 찍히게 */
[class^="ri-"], [class*=" ri-"]{ font-family:"remixicon" !important; }




/* 뷰포트 양끝을 꽉 채우는 페일 밴드 */
.ui-aaa{
  position:relative;left:50%;width:100vw;margin-left:-50vw;height:12px;
  background:#f7f8fb;border-top:1px solid #eef2f6;border-bottom:1px solid #eef2f6;
}

/* 맵 래퍼는 절대배치 기준이 필요 */
.map-wrap{position:relative;width:100%;height:auto;border-radius:12px;overflow:hidden;}

/* 지도의 높이를 CSS로 보장 (모바일 16:10) */
@media (max-width:767px){
  #map{
    width:100%;height:auto !important; /* 과거 height:400px 같은 규칙 무력화 */
    aspect-ratio:16 / 10; /* 당근 느낌 */
    border:1px solid #ddd;border-radius:12px;display:block;
  }
}
@media (min-width:768px){
  #map{
    width:100%;height:400px; /* 데스크탑은 기존 느낌 유지 */
    border:1px solid #ddd;border-radius:12px;display:block;
  }
}
/* aspect-ratio 미지원 폴백 */
@supports not (aspect-ratio: 1){
  @media (max-width:767px){
    .map-wrap{position:relative;}
    .map-wrap::before{content:"";display:block;padding-bottom:62.5%; /* 16:10 */ }
    #map{position:absolute;inset:0;width:100%;height:100% !important;}
  }
}
/* 덮개 버튼이 지도를 전체 덮도록 (클릭 가능) */
#openFullMapBtn{
  position:absolute;inset:0;border:0;background:transparent;cursor:pointer;z-index:10;display:block; /* 누를 수 있게 블록화 */
}

/* ===== LIST 썸네일 HARD OVERRIDE — 인덱스 방식 이식 ===== */
:root{ --list-thumb-w: 1; --list-thumb-h: 1; } /* 정사각 비율 변수 */
ul.gallery_grid > li.gallery_item > .thumb{
  position:relative !important;flex:0 0 100px !important;max-width:100px !important;
  height:100px !important;aspect-ratio:var(--list-thumb-w) / var(--list-thumb-h) !important;
  overflow:hidden !important;border-radius:8px !important;background:#f6f7f9 !important;
}
/* anchor 를 박스 전체로 */
ul.gallery_grid > li.gallery_item > .thumb > a{
  position:absolute !important;inset:0 !important;display:block !important;line-height:0 !important;
}
/* 어떤 전역 img 규칙이 와도 ‘무조건’ 꽉 채움 */
ul.gallery_grid > li.gallery_item > .thumb > a > img{
  position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;object-fit:cover !important;object-position:center !important;display:block !important;
}
/* 상태 배지 레이어 보장 */
.gallery_item .thumb::before{ z-index:2 !important; }
.gallery_item .thumb::after { z-index:1 !important; }

/* aspect-ratio 미지원 폴백 */
@supports not (aspect-ratio: 1 / 1){
  ul.gallery_grid > li.gallery_item > .thumb::before{
    content:"";display:block;padding-top:100%;
  }
}

/* =========================================================
   Bottom overlap (list + view) — FINAL
   - 변수는 여기 한 군데만 유지
   - 섹션 꼬리에 ::after 스페이서로 항상 안전 여백 확보
   - "팔아요 전체보기" 버튼은 가운데 정렬만
   ========================================================= */

/* 하단 고정 UI 치수(숫자만 바꾸면 전체 반영) */
:root{
  --tabbar-h: 56px;  /* 하단 네비 높이 */
  --cta-h:    52px;  /* 뷰 하단 CTA(관심/채팅) 높이 */
  --fab-size: 0px;   /* FAB 없으면 0, 있으면 지름값(예: 56px) */
}

/* 리스트/뷰 공통: 섹션의 '바깥쪽 끝'에 안전 여백 생성 */
section.gallery_list::after,
section.gallery_view::after{
  content: "";
  display: block;
  height: calc(
    max(var(--tabbar-h), var(--fab-size))
    + env(safe-area-inset-bottom, 0px)
    + 6px
  );
}

/* 뷰 페이지에서 하단 CTA가 있을 때는 더 크게 확보 */
body.view-noheader section.gallery_view::after{
  height: calc(
    max(var(--cta-h), var(--tabbar-h), var(--fab-size))
    + env(safe-area-inset-bottom, 0px)
    + 6px
  );
}

/* 뷰 페이지 본문 자체의 패딩은 최소화(겹침 방지) */
section.gallery_view{ padding-bottom: 0 !important; margin-top: -10px;}
/* 필요하면 아주 작은 버퍼만 */
body.view-noheader{ padding-bottom: 8px !important; }

/* "팔아요 전체보기" 영역 — 원래 버튼 스타일 유지, 가운데 정렬만 보장 */
.gal-more-wrap{
  position: relative;
  text-align: center;
  padding: 18px 0 20px;   /* 과한 margin/padding 금지 */
  /* ▼ 아래 두 줄이 있었다면 반드시 제거: margin-bottom / ::after */
  /* margin-bottom: ...  (삭제) */
  /* ::after{ ... }      (삭제) */
}

.empty_list {width: 100%; text-align: center;}



/* ============================================================
   매물 목록 관리(어드민) UI (전체선택/선택삭제 바, 카드 체크박스)는
   팔아요·구해요 공통이라 theme/jpw/css/default.css 에서 일괄 정의합니다.
   → 여기(스킨별 style.css)에서는 더 이상 정의하지 않음 (중복 방지/공통화).
   ============================================================ */