/* ===== regions.php 전용: Sticky 필터바 + 요약 배지 ===== */
.filters-sticky{
  position: sticky;
  top: var(--menu-height, 56px);
  z-index: 50;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border);
}
.filter-summary{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:10px 12px; border-top:1px dashed var(--border);
  background: #fafafa;
}
html.dark .filter-summary{ background: rgba(255,255,255,.04); }
.chip-sm{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 8px; border:1px solid var(--border);
  border-radius:999px; background:var(--chip); font-size:.875rem; line-height:1;
  white-space:nowrap;
}
.chip-sm .k{ opacity:.7; }
.chip-sm.ok{ background:var(--brand-weak); border-color:#dbeafe; }
.chip-sm.warn{ background:#fff7ed; border-color:#fed7aa; }
.chip-sm.danger{ background:#fef2f2; border-color:#fecaca; }
.filters-sticky .card{ margin-bottom:0; border-radius:0; border-left:0; border-right:0; }
.filters-sticky .card-body{ padding-block:10px; }
@media (max-width: 640px){
  .filters-sticky .row{ gap:6px !important; }
}
/* 히어로 버튼/셀렉트 규격 */
.hero .hero-btn{ height:42px; display:inline-flex; align-items:center; gap:.5rem; }
.hero .select{ height:42px; }

/* === regions.php 고도화: 보조 스타일 === */
.chip.active{
  background:var(--brand-weak);
  border-color:#dbeafe;
  color:#1e3a8a;
  font-weight:700;
}
.hero #hgoRegion.btn{ height:42px; }

/* assets/style.css — 산후조리원 찾기 (공통 UI 고도화 v2025-08-29) */
/* 2025-08-27: 클릭형 별점(.stars), 모바일 상태배지 정렬, actions-grid */
/* 2025-08-29: iOS/Android 별점 채움 + 컴팩트 프리셋 + 그리드 안정화 */
:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#475569; --border:#e5e7eb;
  --brand:#2563eb; --brand-strong:#1d4ed8; --brand-weak:#eff6ff;
  --chip:#f1f5f9; --ok:#16a34a; --warn:#ea580c; --danger:#dc2626;
  --surface:#ffffff; --focus:#bfdbfe;
  --radius:10px; --radius-lg:12px; --radius-xl:16px;
  --shadow-sm:0 1px 0 rgba(0,0,0,.02);
  --shadow-md:0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 10px 28px rgba(2,6,23,.08);
  /* 별점 공통 */
  --star:#fbbf24;       /* main star */
  --star-empty:#e5e7eb; /* empty */
  --star-hover:#f59e0b; /* hover */
}

/* 전역 안정화 */
*,*::before,*::after{ box-sizing:border-box; }

html,body{height:100%}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,'Noto Sans KR',sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0 0 .6em 0; line-height:1.25}
h1{font-size:28px;font-weight:800}
h2{font-size:22px;font-weight:800}
h3{font-size:18px;font-weight:700}
h4{font-size:16px;font-weight:700}
p{margin:0 0 1em 0}
small,.muted{color:var(--muted)}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* 포커스 접근성 */
:where(a,button,[role="button"],.h-card,.btn,.iconbtn):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--radius-lg);
}

/* 레이아웃 */
.container{max-width:1080px; margin:0 auto; padding:0 16px}
.section{padding:20px 0}
.wrap{max-width:1080px}
.pt-0{padding-top:0!important}

/* 표준 그리드 */
.grid{display:grid; gap:12px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 별칭 그리드(기존 파일 호환) */
.grid-2{display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr))}

/* 두열 상세 */
.detail-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:12px}

/* 카드 */
.card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.card:hover{box-shadow:var(--shadow-md)}
.card.elevated{box-shadow:var(--shadow-lg)}
.rounded-xl{border-radius:16px}
.card-header{padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px}
.card-title{font-weight:700}
.card-subtitle{color:var(--muted); font-size:13px}
.card-body{padding:14px 16px}
.card-footer{padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; flex-wrap:wrap}

/* 헤더/브레드크럼 */
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:8px}
.breadcrumb .current{color:var(--fg); font-weight:600}
.breadcrumb .sep{opacity:.45}
.head-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.head-left{display:flex; flex-direction:column; gap:8px; min-width:0}
.detail-title{font-size:22px; font-weight:800; line-height:1.3; margin:0}
.detail-addr{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:14px}
.tagbar{margin-top:2px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; background:var(--chip); border:1px solid var(--border)}
.actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end}
.iconbtn{
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:#fff; text-decoration:none;
}
.iconbtn[disabled]{opacity:.5; pointer-events:none}
.mini-icon{border:0; background:transparent; cursor:pointer; padding:0 4px; font-size:14px; line-height:1}

/* KPI */
.stat-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.stat{padding:12px; border-radius:12px; border:1px solid var(--border); background:#fff}
.stat .label{font-size:12px; color:var(--muted)}
.stat .value{font-size:18px; font-weight:800; margin-top:2px}

/* 섹션 타이틀/헤더 */
.section-title{display:flex; align-items:center; gap:8px; margin-bottom:16px}
.section-title .dot{width:4px; height:20px; background:var(--brand); border-radius:2px}
.section-title h2{margin:0; font-size:18px; font-weight:700}
.section-header{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px}

/* KPI 상태 줄 */
.kpi-status-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}

/* key-value */
.kv{display:grid; grid-template-columns:140px 1fr; gap:8px; padding:8px 0; border-top:1px dashed var(--border)}
.kv:first-of-type{border-top:0}
.kv > div:first-child{color:var(--muted); font-size:14px}
.kv > div:last-child{font-weight:500}

/* 주변 기관 그리드 */
.rel-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.rel-item{display:block; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff; text-decoration:none; color:inherit}
.rel-name{font-weight:700; margin-bottom:2px}
.distance-chip{display:inline-block; margin-top:4px; background:var(--chip); padding:2px 8px; border-radius:12px; font-size:12px}
.small{font-size:13px; color:var(--muted)}
.tag{display:inline-block; padding:2px 6px; background:var(--chip); border-radius:6px}

/* 버튼 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius);
  background:#fff; color:var(--fg); cursor:pointer; text-decoration:none; transition:.15s ease-in-out;
}
.btn:hover{background:#fafafa; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.disabled{opacity:.6; pointer-events:none}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-strong); border-color:var(--brand-strong)}
.btn-outline{background:#fff; border-color:var(--brand); color:var(--brand)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--brand)}
.btn-sm{padding:6px 10px; font-size:13px; border-radius:8px} /* 기본 sm */

/* 버튼 포커스 일관화 */
.btn:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* 입력 폼 */
.field{margin:0 0 12px 0}
.label{display:block; font-weight:600; margin:0 0 6px 0}
.input,.select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; color:var(--fg);
}
.input:focus,.select:focus,textarea:focus{outline:2px solid #dbeafe; border-color:#bfdbfe}
.input-group{display:flex; gap:8px; align-items:stretch}
.input-group .input{flex:1}
.help{color:var(--muted); font-size:12px; margin-top:6px}
.checkbox,.radio{display:inline-flex; align-items:center; gap:8px; cursor:pointer}
.checkbox input,.radio input{width:16px; height:16px}
::placeholder{color:#9aa5b1}

/* 배지/칩/태그 */
.badge{display:inline-block; padding:3px 8px; border-radius:999px; background:var(--chip); color:#0f172a; font-size:12px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--chip); color:#0f172a; border:1px solid var(--border); font-size:13px}

/* 테이블 */
.table{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left}
.table thead th{background:#f8fafc; font-weight:700}
.table tr:last-child td{border-bottom:none}

/* 알림 & 토스트 */
.alert{border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:#fff; display:flex; gap:10px; align-items:flex-start}
.alert-info{border-color:#bfdbfe; background:#eff6ff; color:#1e3a8a}
.alert-success{border-color:#bbf7d0; background:#f0fdf4; color:#14532d}
.alert-warning{border-color:#fed7aa; background:#fff7ed; color:#7c2d12}
.alert-danger{border-color:#fecaca; background:#fef2f2; color:#7f1d1d}
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px);
  background:#111827; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.2); opacity:0; transition:all .2s ease; z-index:60; font-size:13px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* 유틸리티 */
.mt-0{margin-top:0}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.p-0{padding:0}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-6{padding:24px}
.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.row.right{justify-content:flex-end}
.row.between{justify-content:space-between}
.center{display:grid; place-items:center}
.text-center{text-align:center}
.w-full{width:100%}
.truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.line-clamp-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.line-clamp-3{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.hidden{display:none!important}

/* 스켈레톤 */
.skeleton{position:relative; overflow:hidden; background:#f1f5f9; border-radius:8px}
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-100%); animation:skeleton 1.2s infinite;
}
@keyframes skeleton{to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){
  .skeleton::after{animation:none}
  .btn:active{transform:none}
}

/* Hover 공통 */
.hover-card{transition:transform .12s ease, box-shadow .12s ease}
.hover-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}

/* ========= 지도 (Leaflet) ========= */
.mapbox{
  width:100%; height:350px !important; min-height:350px;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  position:relative; background:#f5f5f5; display:block !important;
}
#map{width:100% !important; height:100% !important; position:relative !important; display:block !important}
.leaflet-container{
  width:100% !important; height:100% !important; position:relative !important;
  font-family:inherit !important; font-size:inherit !important; line-height:inherit !important;
  touch-action:pan-x pan-y; -webkit-tap-highlight-color:transparent;
}
.leaflet-container img{max-width:none !important; max-height:none !important; width:auto !important; height:auto !important}
.leaflet-tile-container img{width:256px !important; height:256px !important}
.leaflet-pane{z-index:400 !important}
.leaflet-tile-pane{z-index:200 !important}
.leaflet-overlay-pane{z-index:400 !important}
.leaflet-shadow-pane{z-index:500 !important}
.leaflet-marker-pane{z-index:600 !important}
.leaflet-tooltip-pane{z-index:650 !important}
.leaflet-popup-pane{z-index:700 !important}
.leaflet-control{z-index:800 !important}

/* 스켈레톤 로딩 상태 */
.mapbox.skeleton::before{
  content:'🗺️ 지도 로딩중...';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--muted); font-size:14px; z-index:1;
}

/* ===== FAQ 아코디언 & 탭 ===== */
.card button.card-header,
.card [data-accordion="trigger"]{
  width:100%; background:transparent; border:0;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  cursor:pointer; text-align:left;
}
.card [data-accordion="trigger"]:hover{background:#f8fafc; text-decoration:none}
.card [data-accordion="trigger"]:focus-visible{outline:2px solid var(--focus); border-radius:10px}
.card [data-accordion="trigger"] .caret{transition:transform .2s ease}
.card [data-accordion="trigger"][aria-expanded="true"] .caret{transform:rotate(180deg)}
.faq-item .card-body.hidden{display:none !important}
.chip[data-cat]{cursor:pointer; user-select:none}
.chip[aria-selected="true"]{
  background:var(--brand-weak);
  border-color:#dbeafe;
  color:#1e3a8a;
  font-weight:700;
}
.chip[aria-selected="false"]:hover{filter:brightness(0.98)}

/* ===============================================================
 * 히어로/필터/네비
 * =============================================================== */
.hero{
  background: radial-gradient(1200px 600px at 10% 0%, var(--brand-weak), transparent 60%),
              linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
}
.hero h1{ font-size:28px; font-weight:900; letter-spacing:-.2px; }
.hero-detail{ background-color:#f8faffa; } /* center.php 인라인 → CSS로 이동 */
.kicker{ font-size:13px; color:var(--muted); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.filter-bar .input, .filter-bar .select { height:42px; }

/* 액션 버튼 그리드 */
.actions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px; margin-top:12px;
}
.actions-grid .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; line-height:1.4; font-weight:600; padding:10px 12px; height:auto;
}
.actions-grid .btn .i{ font-size:16px; line-height:1; }

/* 모바일에서 상태배지 우측 고정 */
.hero .row.between{flex-wrap:wrap; align-items:flex-start;}
.hero .tagbar{margin-left:auto; min-width:120px; display:flex; justify-content:flex-end;}
@media (max-width:720px){
  .hero .tagbar{width:100%; justify-content:flex-end;}
}

/* 병원 → 조리원 카드 메트릭 호환 */
.hospital-card .metrics,
.center-card .metrics{ display:flex; gap:8px; flex-wrap:wrap; margin:.5rem 0 0; }
.metric{ display:inline-flex; align-items:center; gap:6px; background:#f8fafc; border:1px solid var(--border); padding:6px 10px; border-radius:10px; font-size:12px; }
.badge-cat{ display:inline-flex; align-items:center; gap:6px; background:#f1f5f9; padding:6px 10px; border-radius:999px; font-size:12px; }
.addr{ color:var(--muted); font-size:14px; }

/* Pill 네비게이션 */
.pill-nav{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:12px; margin-top:12px; }
@media (max-width:920px){ .pill-nav{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
.pill-nav .pill{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border:1px solid var(--border); border-radius:999px;
  text-decoration:none; color:var(--fg); background:#fff;
  transition:transform .08s ease, box-shadow .08s ease, background .2s ease;
  font-size:14px;
}
.pill-nav .pill:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(2,6,23,.06); background:#fcfdff; text-decoration:none; }
.pill-nav .pill .i{ font-size:18px; line-height:1; }
.pill-nav .pill .cnt{ font-size:12px; padding:4px 8px; border-radius:999px; background:#f1f5f9; color:#334155; }
.pill-nav .pill[aria-current="true"]{ background:var(--brand); color:#fff; border-color:var(--brand); }
.pill-nav .pill[aria-current="true"] .cnt{ background:rgba(255,255,255,.2); color:#fff; }

/* ===============================================================
 * 검색/지역 카드 (h-card) — 전역 공용
 * =============================================================== */
.h-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
@media (max-width:920px){ .h-grid{ grid-template-columns:1fr; } }

.h-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:14px;
  transition:transform .06s ease, box-shadow .12s ease, border-color .12s ease;
  cursor:pointer;
}
.h-card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(2,6,23,.07);
  border-color:#e2e8f0;
}
.h-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.h-title{ margin:0; font-size:18px; font-weight:800; line-height:1.35; }
.h-card .badge-cat{ display:inline-flex; align-items:center; gap:6px; background:#f1f5f9; padding:6px 10px; border-radius:999px; font-size:12px; white-space:nowrap; }
.h-addr{ color:var(--muted); font-size:14px; margin-top:6px; }
.h-card .meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.h-card .meta .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; font-size:12px;
}
.h-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.h-actions .btn{ padding:8px 12px; }
.h-card:focus{ outline:3px solid var(--focus); outline-offset:2px; }
/* 전체 클릭 오버레이: 인터랙션 방해 금지 */
.h-card [data-stretched]{ position:absolute; inset:0; opacity:0; pointer-events:none; }

/* 모바일 카드 안정화 */
.h-head > *{ min-width:0; }
.h-title{
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.h-addr{ word-break:break-word; overflow-wrap:anywhere; line-height:1.45; }
.h-card .meta .chip{ line-height:1.35; }
.h-card .badge-cat{ max-width:50vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:720px){
  .h-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .h-actions .btn{ flex:1 1 140px; min-height:38px; }
}

/* iOS(WebKit) 보강 */
@supports (-webkit-touch-callout: none){
  .h-actions{ gap:0; margin:-4px; }
  .h-actions .btn{ margin:4px; }
  .h-card .meta{ gap:0; margin:-3px; }
  .h-card .meta .chip{ margin:3px; }
  .h-head > *, .h-card .meta, .h-addr{ min-width:0; }
}

/* ===============================================================
 * 산후조리원 전용 요소 (상태/정원/면적/층/인력 등)
 * =============================================================== */
.ppc-status{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:#fff}
.ppc-status.ok{border-color:#86efac; background:#f0fdf4; color:#14532d}
.ppc-status.warn{border-color:#fdba74; background:#fff7ed; color:#7c2d12}
.ppc-status.danger{border-color:#fca5a5; background:#fef2f2; color:#7f1d1d}

.ppc-metrics{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.ppc-metric{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border:1px solid var(--border); border-radius:10px; font-size:12px; background:#fff}
.ppc-metric .k{color:var(--muted)}
.ppc-metric .v{font-weight:700}
.ppc-chip{display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border-radius:999px; background:var(--chip); border:1px solid var(--border); font-size:12px}
.ppc-chip.ok{border-color:#86efac}
.ppc-chip.warn{border-color:#fdba74}
.ppc-chip.danger{border-color:#fca5a5}

/* 정원·면적 강조 */
.ppc-quota{display:flex; gap:8px; flex-wrap:wrap}
.ppc-quota .item{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border:1px dashed var(--border); border-radius:10px; background:#fff; font-size:12px}
.ppc-area{display:flex; gap:8px; flex-wrap:wrap}
.ppc-area .item{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; font-size:12px}

/* 층/건물/인력 칩 */
.ppc-floor,.ppc-staff{display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border-radius:10px; border:1px solid var(--border); background:#fff; font-size:12px}

/* ===============================================================
 * 별점(노란 별) — 클릭/호버/모바일 터치 대응
 * =============================================================== */
.stars{ display:inline-flex; gap:4px; align-items:center; }
.stars input{ display:none; }
.stars label{
  font-size:20px; line-height:1; cursor:pointer; user-select:none;
  color:var(--star-empty);
  -webkit-text-stroke: 1px var(--star-empty);
  text-shadow: 0 0 0 var(--star-empty);
  transition: transform .08s ease, color .08s ease;
}
.stars label:hover{ transform: scale(1.08); }

/* 패턴 A: input 다음에 label이 오는 구조(일반적) */
.stars input:checked ~ label{
  color:var(--star); -webkit-text-stroke: 1px var(--star); text-shadow: 0 0 0 var(--star);
}
/* 패턴 B: label 다음에 input이 오는 구조(일부 템플릿) - :has 지원 브라우저 */
.stars label:has(~ input:checked),
.stars label:has(+ input:checked){
  color:var(--star); -webkit-text-stroke: 1px var(--star); text-shadow: 0 0 0 var(--star);
}
/* 호버 프리뷰 */
.stars label:hover, .stars label:hover ~ label{
  color:var(--star-hover); -webkit-text-stroke: 1px var(--star-hover);
}

/* iOS 터치 영역 확대 */
@supports (-webkit-touch-callout: none){
  .stars label{ padding:4px; font-size:22px; }
}

/* 읽기 전용 별점 (.sr-star) */
.sr-star{ color:var(--star); font-size:16px; line-height:1; display:inline-block; }
.sr-star.empty{ color:var(--star-empty); }

/* ===============================================================
 * 컴팩트 프리셋 — “검색 조건 너무 큼” 대응
 * =============================================================== */
/* 컨테이너에 .is-compact를 주면 내부 컨트롤 높이·여백 축소 */
.is-compact .btn{ padding:6px 10px; font-size:13px; border-radius:8px; height:36px }
.is-compact .select,.is-compact .input{ padding:8px 10px; height:36px; font-size:14px }
.is-compact .row{ gap:8px }
.is-compact .card-body{ padding:10px 12px }
.is-compact .label{ font-size:12.5px; margin:0 }
/* 충돌 방지: 기존 .btn-sm 그대로 두고, 컴팩트 컨텍스트에서만 높이 지정 */
.is-compact .btn-sm{ height:36px; padding:0 12px; font-size:13px; border-radius:8px }
.select-sm,.input-sm{ height:36px; padding:8px 10px; font-size:14px; border-radius:8px }
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.filter-bar .group{ display:flex; gap:8px; align-items:center }
.filter-bar .spacer{ flex:1 }
.filter-bar .select, .filter-bar .input{ height:42px }
.filter-bar.is-compact .select, .filter-bar.is-compact .input{ height:36px }

/* ===============================================================
 * 푸터/기타
 * =============================================================== */
.footer{margin-top:24px; padding:18px 0; color:var(--muted); font-size:13px; border-top:1px solid var(--border)}

/* === index 전용: 리뷰/추천 카드 간격 보정 v2025-09-01 === */

/* (1) 사용자 리뷰 간격 */
.reviews-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
@media(max-width:920px){.reviews-grid{grid-template-columns:1fr}}
.review-card{
  border:1px solid var(--border); border-radius:14px; background:#fff; padding:14px;
  display:flex; flex-direction:column; gap:8px; min-height:0;
}
.review-header{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.reviewer-info{display:flex; align-items:center; gap:10px; min-width:0;}
.reviewer-name{font-weight:700}
.review-meta{font-size:12px; color:var(--muted)}
.avatar{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:800;
  border:1px solid #dbeafe; background:#eef2ff;}
.avatar.avc-1{background:#fef3c7;border-color:#fde68a}
.avatar.avc-2{background:#dcfce7;border-color:#bbf7d0}
.avatar.avc-3{background:#e0e7ff;border-color:#c7d2fe}
.avatar.avc-4{background:#fee2e2;border-color:#fecaca}
.avatar.avc-5{background:#cffafe;border-color:#a5f3fc}
.avatar.avc-6{background:#fae8ff;border-color:#f5d0fe}
.review-text{
  margin:.25rem 0 0; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.review-card .center-link{font-size:14px}

/* 읽기전용 별 아이콘 (.star-rating) - 줄높이 균일화 */
.star-rating{display:inline-flex; gap:3px; line-height:1;}
.star-rating .star{font-size:16px; color:var(--star-empty);}
.star-rating .full{color:var(--star);}
.star-rating .empty{color:var(--star-empty);}
.star-rating .half{
  background:linear-gradient(90deg,var(--star) 50%,var(--star-empty) 50%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* (2) 오늘의 추천 카드(h-card) 버튼을 하단 정렬 → 카드 높이가 달라도 줄맞춤 */
.h-card{display:flex; flex-direction:column;}
.reco-card-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px;}
.reco-card-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto;}
.h-head .text-sm{min-width:110px; text-align:right;}