/* MediProp 사용자 페이지 공통 스타일 (지도·매물등록·상세·리포트)
   관리자(admin.css)와 분리된 사용자 전용 디자인 시스템 */
:root{
  --bg:#f9fafb; --card:#fff; --line:#e5e7eb; --line2:#f1f5f9;
  --text:#111827; --muted:#6b7280; --primary:#2563eb; --primary-d:#1d4ed8;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased;
}
a{ color:var(--primary); text-decoration:none; }

/* ===== 공통 헤더 / 네비게이션 ===== */
.site-header{
  display:flex; align-items:center; gap:18px; padding:12px 22px;
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.site-header .brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px; color:var(--text); }
.site-header .brand .logo{
  width:28px; height:28px; border-radius:8px; background:var(--primary);
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px;
}
.site-header .brand small{ font-size:12px; font-weight:500; color:var(--muted); margin-left:4px; }
.site-nav{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.site-nav a{ padding:7px 12px; border-radius:8px; font-size:14px; color:#374151; }
.site-nav a:hover{ background:#f3f4f6; }
.site-nav a.active{ color:var(--primary); font-weight:600; background:#eff6ff; }

/* ===== 레이아웃 ===== */
.wrap{ max-width:960px; margin:24px auto; padding:0 16px; }
.wrap.narrow{ max-width:640px; }
.wrap.mid{ max-width:860px; }

/* ===== 카드 ===== */
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:20px; }
.card h2{ margin:0 0 14px; font-size:16px; }

/* ===== 버튼 ===== */
.btn,
.card button{
  margin-top:14px; background:var(--primary); color:#fff; border:0;
  border-radius:8px; padding:10px 16px; font-size:14px; cursor:pointer;
}
.btn:hover, .card button:hover{ background:var(--primary-d); }
.card button.sub{ background:#374151; }
.card button.sub:hover{ background:#1f2937; }
.btn-ghost{ background:#fff; color:var(--text); border:1px solid var(--line); }
.btn-ghost:hover{ background:#f9fafb; }

/* ===== 폼 ===== */
label{ display:block; font-size:13px; margin:10px 0 4px; color:#374151; }
input, select, textarea{ width:100%; padding:9px 10px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.row{ display:flex; gap:10px; } .row > div{ flex:1; }
.hint{ font-size:12px; color:var(--muted); }
.msg{ font-size:13px; margin-top:10px; padding:8px 10px; border-radius:8px; display:none; }
.msg.ok{ background:#ecfdf5; color:#065f46; display:block; }
.msg.err{ background:#fef2f2; color:#991b1b; display:block; }
.pharmacy-only, .clinic-only{ display:none; }

/* ===== 테이블 ===== */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--line2); }
th{ color:var(--muted); font-weight:600; }

/* ===== 상세 페이지 (탭/입지점수) ===== */
.title{ font-size:22px; margin:0 0 4px; }
.sub{ color:var(--muted); font-size:14px; margin-bottom:16px; }
.tabs{ display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:16px; flex-wrap:wrap; }
.tabs button{ border:0; background:none; padding:10px 16px; font-size:14px; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-2px; }
.tabs button.active{ color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.panel{ display:none; } .panel.active{ display:block; }
.detail-table th{ width:140px; }
.grade-badge{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:#eef2ff; color:#4338ca; font-size:28px; font-weight:700; }
.score-head{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.score-head .num{ font-size:30px; font-weight:700; } .score-head .num small{ font-size:14px; color:var(--muted); font-weight:400; }
.note{ font-size:13px; color:var(--muted); margin-top:10px; line-height:1.6; }
.disclaimer{ font-size:12px; color:#9ca3af; border-top:1px solid var(--line2); padding-top:12px; margin-top:16px; }
.soon{ color:#9ca3af; font-size:14px; }

/* 입지분석 지표별 표 (점수·가중치·출처) */
.score-breakdown{ margin-top:18px; font-size:13px; }
.score-breakdown th{ font-size:12px; color:var(--muted); font-weight:600; }
.score-breakdown td{ vertical-align:middle; }
.score-breakdown .sb-score{ font-weight:700; color:#0f172a; white-space:nowrap; }
.score-breakdown .sb-w{ color:#475569; white-space:nowrap; }
.score-breakdown .sb-src{ font-size:12px; color:var(--muted); }
.score-breakdown tr.sb-off td{ color:#b6bcc6; }
.score-breakdown tr.sb-off .sb-score{ color:#b6bcc6; font-weight:600; }
.score-breakdown .sb-na{ font-size:11.5px; color:#b6bcc6; }

/* ===== 리포트 시트 ===== */
.sheet{ max-width:820px; margin:20px auto; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:32px; }
.sheet h1{ font-size:22px; margin:0 0 4px; } .sheet .meta{ color:var(--muted); font-size:13px; margin-bottom:24px; }
.sheet h2{ font-size:16px; border-left:4px solid var(--primary); padding-left:8px; margin:26px 0 12px; }
.sheet th{ width:160px; }
.kpi{ display:flex; gap:12px; flex-wrap:wrap; }
.kpi div{ flex:1; min-width:120px; background:var(--bg); border:1px solid #eef2f7; border-radius:10px; padding:12px; }
.kpi b{ display:block; font-size:20px; } .kpi span{ color:var(--muted); font-size:12px; }
.grade{ display:inline-block; background:#eef2ff; color:#4338ca; border-radius:6px; padding:2px 10px; font-weight:700; }
.none{ color:#9ca3af; font-size:13px; }

/* ===== 지도 페이지 ===== */
.filters{ display:flex; align-items:center; gap:8px; padding:10px 20px; border-bottom:1px solid var(--line2); background:#fff; }
.filters button{ border:1px solid #d1d5db; background:#fff; border-radius:999px; padding:6px 14px; cursor:pointer; font-size:13px; }
.filters button.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
#map{ width:100%; height:100%; }
.iw{ padding:8px 10px; font-size:13px; line-height:1.5; min-width:160px; }
.iw b{ font-size:14px; }
.iw .grade{ display:inline-block; background:#eef2ff; color:#4338ca; border-radius:4px; padding:1px 6px; margin-left:4px; }
.empty{ position:absolute; top:14px; left:50%; transform:translateX(-50%); background:#111827cc; color:#fff; padding:8px 14px; border-radius:8px; font-size:13px; display:none; z-index:5; }
.fac-hint{ position:absolute; top:14px; left:50%; transform:translateX(-50%); background:#0f766ecc; color:#fff; padding:8px 14px; border-radius:8px; font-size:13px; display:none; z-index:5; }
.fac-dot{ width:17px; height:17px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; transition:width .1s,height .1s; }
.fac-dot:hover{ width:21px; height:21px; }
.fac-dot.sel{ width:26px; height:26px; border:3px solid #fbbf24; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.legend{ position:absolute; right:14px; bottom:16px; background:#ffffffee; border:1px solid var(--line); border-radius:8px; padding:8px 11px; font-size:12px; z-index:6; line-height:1.8; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.legend > div{ display:flex; align-items:center; cursor:pointer; padding:1px 6px; margin:0 -6px; border-radius:6px; user-select:none; }
.legend > div:hover{ background:#f3f4f6; }
.legend > div.active{ background:#eff6ff; color:var(--primary); font-weight:600; }
.legend .dot{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:7px; vertical-align:middle; border:1.5px solid #fff; box-shadow:0 0 1px rgba(0,0,0,.4); }
.legend .dot.pin{ background:#ea4335; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }

/* ===== 매물 상세 — 히어로 / 갤러리 / 액션 버튼 ===== */
.prop-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.prop-header .title{ margin:0 0 4px; }
.prop-actions{ display:flex; gap:7px; flex-shrink:0; padding-top:2px; }
.btn-icon{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:#fff; cursor:pointer; font-size:17px; display:grid; place-items:center;
  transition:background .12s,border-color .12s; text-decoration:none; line-height:1;
}
.btn-icon:hover{ background:#f3f4f6; border-color:#d1d5db; }
.btn-icon.fav-on{ background:#fff1f2; border-color:#fca5a5; }
.hero-metrics{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px;
}
.metric-card{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; display:flex; flex-direction:column; gap:3px;
}
.metric-label{ font-size:12px; color:var(--muted); }
.metric-val{ font-size:15px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gallery{
  overflow-x:auto; display:flex; gap:8px; padding-bottom:8px; margin-bottom:20px;
  scrollbar-width:thin; scrollbar-color:#d1d5db transparent;
}
.gallery img{
  height:200px; width:auto; min-width:260px; border-radius:10px; object-fit:cover;
  flex:0 0 auto; border:1px solid var(--line); cursor:pointer;
}
.gallery img:hover{ opacity:.9; }
.prop-skeleton{ background:#f3f4f6; border-radius:8px; animation:sk-pulse 1.4s ease-in-out infinite; }
@keyframes sk-pulse{ 0%,100%{opacity:1} 50%{opacity:.42} }
@media(max-width:600px){
  .hero-metrics{ grid-template-columns:repeat(2,1fr); }
  .gallery img{ height:150px; min-width:200px; }
  .prop-actions .btn-icon{ width:34px; height:34px; font-size:15px; }
}

/* ===== 지도 2단 레이아웃 (목록 + 지도) ===== */
.map-layout{ display:flex; height:calc(100vh - 57px); }
.map-side{ width:368px; flex:0 0 368px; border-right:1px solid var(--line); background:#fff; display:flex; flex-direction:column; min-height:0; }
.map-pane{ flex:1; position:relative; min-width:0; }
.side-search{ display:flex; gap:8px; padding:14px 16px 10px; position:relative; }
.side-search input{ flex:1; margin:0; border-radius:10px; }
.side-search button{
  width:44px; height:40px; flex:0 0 44px; border:0; cursor:pointer; color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-d));
  border-radius:10px; display:grid; place-items:center;
  box-shadow:0 1px 4px rgba(37,99,235,.35); transition:transform .08s, box-shadow .12s;
}
.side-search button:hover{ box-shadow:0 2px 8px rgba(37,99,235,.45); }
.side-search button:active{ transform:scale(.94); }
.side-search button svg{ width:19px; height:19px; }
/* 검색 제안 드롭다운 */
.sug-box{
  display:none; position:absolute; left:16px; right:16px; top:calc(100% - 4px); z-index:40;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.14); overflow:hidden; max-height:340px; overflow-y:auto;
}
.sug-title{ font-size:11px; color:var(--muted); padding:8px 14px 4px; background:#fafafa; }
.sug-item{ display:flex; align-items:center; gap:9px; padding:9px 14px; cursor:pointer; font-size:13.5px; }
.sug-item:hover{ background:#f3f6ff; }
.sug-item svg{ width:16px; height:16px; color:#6b7280; flex:0 0 16px; }
.sug-item .sug-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; border:1.5px solid #fff; box-shadow:0 0 1px rgba(0,0,0,.4); }
.sug-item > span:last-child{ min-width:0; }
.sug-item small{ display:block; color:var(--muted); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug-empty{ padding:14px; text-align:center; color:#9ca3af; font-size:13px; }
.side-chips{ display:flex; gap:6px; padding:0 16px 10px; overflow-x:auto; }
.side-chips button{ white-space:nowrap; border:1px solid #d1d5db; background:#fff; border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; }
.side-chips button.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.side-bar2{ display:flex; align-items:center; justify-content:space-between; padding:9px 16px; border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); }
.side-bar2 .count{ font-size:13px; color:var(--muted); } .side-bar2 .count b{ color:var(--text); }
.side-bar2 select{ width:auto; margin:0; padding:6px 8px; font-size:13px; }
.side-list{ flex:1; overflow-y:auto; min-height:0; }
.list-group-title{ font-size:12px; color:var(--muted); padding:12px 16px 4px; background:#fafafa; border-bottom:1px solid var(--line2); }
.place-item{ display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line2); cursor:pointer; }
.place-item:hover{ background:#f6f8fc; }
.place-item .thumb{ width:60px; height:60px; border-radius:8px; background:#eef2f7; flex:0 0 60px; display:grid; place-items:center; color:#9aa5b1; font-size:11px; text-align:center; }
.place-item .pi-body{ min-width:0; flex:1; }
.place-item .pi-name{ font-weight:600; font-size:14px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.place-item .pi-meta{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.place-item .pi-price{ font-size:13px; color:var(--text); margin-top:4px; }
.place-item.is-prop{ background:#f5f8ff; }
.place-item .badge{ display:inline-block; font-size:11px; padding:1px 7px; border-radius:999px; background:#dbeafe; color:#1e40af; margin-right:6px; }
.grade-chip{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#fff; font-size:11px; font-weight:700; margin-left:6px; vertical-align:1px; }
.place-item.sel{ background:#eef2ff; box-shadow:inset 3px 0 0 var(--primary); }
.list-empty{ padding:30px 16px; text-align:center; color:#9ca3af; font-size:13px; }

/* 좌측 상세 패널 */
.side-detail{ flex:1; overflow-y:auto; min-height:0; display:none; }
.detail-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line2); position:sticky; top:0; background:#fff; }
.detail-head .back{ border:0; background:none; color:var(--primary); font-size:14px; cursor:pointer; padding:4px 0; margin:0; }
.detail-body{ padding:18px 18px 28px; }
.d-badge{ display:inline-block; font-size:12px; font-weight:600; color:#fff; padding:2px 10px; border-radius:999px; margin-bottom:10px; }
.detail-body h2{ font-size:20px; margin:0 0 6px; }
.d-meta{ font-size:13px; color:var(--muted); margin-bottom:4px; }
.d-addr{ font-size:13px; color:#374151; margin:8px 0; line-height:1.5; }
.d-price{ background:#f5f8ff; border:1px solid #e0e7ff; border-radius:10px; padding:12px 14px; margin:14px 0; font-size:14px; line-height:1.9; }
.d-price .k{ color:var(--muted); display:inline-block; width:64px; }
.d-actions{ display:flex; gap:8px; margin-top:16px; }
.d-actions .btn{ margin-top:0; flex:1; text-align:center; }

/* ===== 의료기관 상세 헤더 (직방 스타일) ===== */
.fac-hero{ padding:2px 0 4px; }
.fac-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 11px 3px 9px; border-radius:999px; }
.fac-chip i{ width:7px; height:7px; border-radius:50%; }
.detail-body .fac-hero h2{ font-size:21px; font-weight:800; letter-spacing:-.5px; margin:9px 0 7px; line-height:1.25; color:#0f172a; }
.fac-addr{ display:flex; align-items:flex-start; gap:6px; font-size:13px; color:#475569; line-height:1.5; }
.fac-addr svg{ width:15px; height:15px; flex:0 0 15px; color:#94a3b8; margin-top:1px; }
.fac-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.fac-tag{ font-size:11.5px; color:#475569; background:#f1f5f9; border-radius:7px; padding:3px 9px; font-weight:500; }

/* 상세 탭 (알약형 세그먼트) */
.dtabs{ display:flex; gap:0; background:#f3f4f6; border:0; border-radius:11px; padding:3px; margin:16px 0 14px; }
.dtabs button{ flex:1; border:0; background:none; border-radius:8px; padding:8px 4px; font-size:12.5px; color:#64748b; cursor:pointer; font-weight:600; transition:.12s; }
.dtabs button.active{ color:var(--primary); background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.12); }

/* ===== 입지분석 — 점수 히어로 ===== */
.score-hero{ display:flex; align-items:center; gap:18px; background:linear-gradient(135deg, color-mix(in srgb, var(--gc) 8%, #fff), #fff); border:1px solid color-mix(in srgb, var(--gc) 22%, #eef0f3); border-radius:16px; padding:18px 20px; }
.sh-ring{ position:relative; width:80px; height:80px; flex:0 0 80px; }
.sh-ring svg{ width:80px; height:80px; transform:rotate(-90deg); }
.sh-ring .shr-bg{ fill:none; stroke:#eef2f7; stroke-width:7; }
.sh-ring .shr-fg{ fill:none; stroke:var(--gc); stroke-width:7; stroke-linecap:round; }
.sh-ring .shr-grade{ position:absolute; inset:0; display:grid; place-items:center; font-size:30px; font-weight:800; color:var(--gc); letter-spacing:-1px; }
.sh-meta .sh-score{ font-size:30px; font-weight:800; color:#0f172a; letter-spacing:-1px; line-height:1; }
.sh-meta .sh-score small{ font-size:14px; color:#94a3b8; font-weight:600; }
.sh-meta .sh-desc{ font-size:13px; color:var(--gc); font-weight:700; margin-top:6px; }
.score-note{ background:#f8fafc; border:1px solid #eef1f5; border-radius:12px; padding:12px 14px; font-size:12.5px; color:#475569; line-height:1.7; margin-top:12px; }

/* ===== 진료수익 — 결과 히어로 + 입력 카드 ===== */
.rev-hero{ background:linear-gradient(135deg,#1e3a8a,#2563eb); border-radius:16px; padding:18px 20px; color:#fff; box-shadow:0 8px 22px -8px rgba(37,99,235,.5); }
.rev-hero .rh-label{ font-size:12px; opacity:.85; }
.rev-hero .rh-big{ font-size:30px; font-weight:800; letter-spacing:-.8px; margin:5px 0 8px; line-height:1.1; }
.rev-hero .rh-net{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16); border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:600; }
.rev-hero .rh-net-dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; }
.rev-hero .rh-band{ font-size:11.5px; opacity:.8; margin-top:9px; }
.rev-card{ background:#fff; border:1px solid #eef0f3; border-radius:14px; padding:14px 15px; margin-top:12px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.rev-card-t{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#0f172a; margin-bottom:6px; flex-wrap:wrap; }
.rev-card-t svg{ width:14px; height:14px; color:#94a3b8; }
.rev-card-t small{ font-weight:400; font-size:11px; color:#94a3b8; flex-basis:100%; margin-left:20px; }
.rev-basis{ display:flex; align-items:flex-start; gap:7px; background:#eff6ff; border:1px solid #dbeafe; border-radius:11px; padding:10px 13px; margin-top:11px; font-size:12px; color:#1e40af; line-height:1.55; }
.rev-basis svg{ width:14px; height:14px; flex:0 0 14px; margin-top:1px; color:#3b82f6; }
.auto-badge{ display:inline-block; margin-left:6px; font-size:10px; font-weight:700; color:#2563eb; background:#dbeafe; border-radius:5px; padding:1px 6px; vertical-align:1px; }
.living-type{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:color-mix(in srgb, var(--lc) 9%, #fff); border:1px solid color-mix(in srgb, var(--lc) 25%, #eef0f3); border-radius:11px; padding:9px 13px; margin-bottom:10px; }
.living-type b{ color:var(--lc); font-size:13.5px; font-weight:800; }
.living-type span{ font-size:11.5px; color:#64748b; }
.sld{ margin:12px 0; }
.sld label{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; margin:0 0 5px; color:#475569; }
.sld label b{ color:#0f172a; font-size:13px; font-weight:700; }
.sld input[type=range]{ width:100%; height:5px; -webkit-appearance:none; appearance:none; background:#e5e9f0; border-radius:4px; outline:none; }
.sld input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:#2563eb; border:3px solid #fff; box-shadow:0 1px 4px rgba(37,99,235,.5); cursor:pointer; }
.sld input[type=range]::-moz-range-thumb{ width:15px; height:15px; border-radius:50%; background:#2563eb; border:3px solid #fff; box-shadow:0 1px 4px rgba(37,99,235,.5); cursor:pointer; }
.dtab-body{ font-size:13px; }
.dtab-body .kv-line{ font-size:12.5px; color:#475569; margin:0 0 10px; }
.dtab-body .kv-line b{ color:#0f172a; }
.dtab-body .note{ font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:10px; }
.score-big{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.score-big .g{ width:52px; height:52px; border-radius:50%; background:#eef2ff; color:#4338ca; display:grid; place-items:center; font-size:22px; font-weight:700; }
.score-big .n{ font-size:24px; font-weight:700; } .score-big .n small{ font-size:12px; color:var(--muted); font-weight:400; }
.rev-out{ text-align:center; background:#f5f8ff; border:1px solid #e0e7ff; border-radius:10px; padding:12px; margin-bottom:10px; }
.rev-out .big{ font-size:22px; font-weight:700; margin-top:2px; }
.sld{ margin:11px 0; }
.sld label{ display:flex; justify-content:space-between; font-size:12px; margin:0 0 3px; color:#374151; }
.sld input[type=range]{ width:100%; }
/* ===== 상권리포트 v3 — 프리미엄 카드 ===== */
.dtab-body{ padding-top:4px; }
.dtab-body .rep-sec{
  background:#fff; border:1px solid #edf0f4; border-radius:16px;
  padding:16px 17px; margin:0 0 13px; box-shadow:0 2px 10px -4px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.04);
}
.rep-sec h4{
  display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700;
  color:#0f172a; margin:0 0 13px; padding:0; border:0; letter-spacing:-.3px; flex-wrap:wrap;
}
.rep-sec h4 .rs-ico{ width:28px; height:28px; flex:0 0 28px; border-radius:9px; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
.rep-sec h4 .rs-ico svg{ width:15px; height:15px; display:block; }
.rep-sec h4 .rs-title{ flex:0 1 auto; }
.rep-sec h4 small{
  flex-basis:100%; margin-left:37px; margin-top:-3px; font-weight:400;
  font-size:11px; color:#9aa3af; white-space:normal; line-height:1.35;
}
/* KPI 카드 */
.rep-kpi{ display:flex; gap:9px; flex-wrap:wrap; }
.rep-kpi div{
  position:relative; flex:1; min-width:70px; background:#fbfcfe;
  border:1px solid #eef1f5; border-radius:13px; padding:12px 9px 11px; text-align:center;
  transition:transform .12s, box-shadow .12s;
}
.rep-kpi div:hover{ transform:translateY(-1px); box-shadow:0 4px 12px -4px rgba(15,23,42,.14); }
.rep-kpi b{ display:block; font-size:19px; font-weight:800; color:#0f172a; letter-spacing:-.5px; line-height:1.15; font-variant-numeric:tabular-nums; }
.rep-kpi span{ font-size:11px; color:#94a3b8; margin-top:3px; display:flex; align-items:center; justify-content:center; gap:4px; }
.rep-kpi span .kdot{ width:7px; height:7px; border-radius:50%; }
.muted-note{ color:#9aa3af; font-size:11px; margin-top:9px; line-height:1.5; }
.dtab-body .kv-line{ font-size:12.5px; color:#64748b; margin:-2px 0 11px; }
.dtab-body .kv-line b{ color:#0f172a; font-weight:700; }

/* 막대 게이지 행 (진료과목·질병 공용) */
.bar-row{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.bar-row + .bar-row{ border-top:1px solid #f4f6f9; }
.bar-row .br-rk{ flex:0 0 19px; height:19px; border-radius:6px; font-size:10.5px; font-weight:800; display:grid; place-items:center; background:#eef2ff; color:#4f46e5; }
.bar-row.top1 .br-rk{ background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#fff; }
.bar-row.top2 .br-rk{ background:linear-gradient(135deg,#cbd5e1,#94a3b8); color:#fff; }
.bar-row.top3 .br-rk{ background:linear-gradient(135deg,#fdba74,#fb923c); color:#fff; }
.bar-row .br-mid{ flex:1; min-width:0; }
.bar-row .br-name{ font-size:12.5px; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.bar-row .br-track{ height:7px; background:#f1f5f9; border-radius:6px; overflow:hidden; }
.bar-row .br-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,#60a5fa,#2563eb); transition:width .5s ease; }
.bar-row.dz .br-fill{ background:linear-gradient(90deg,#fca5a5,#ef4444); }
.bar-row .br-val{ flex:0 0 auto; text-align:right; font-size:12px; color:#0f172a; font-weight:700; font-variant-numeric:tabular-nums; }
.bar-row .br-val small{ display:block; color:#94a3b8; font-weight:500; font-size:10.5px; }

/* (구버전 호환) */
.rank-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #f1f5f9; font-size:13px; }
.rank-row:last-child{ border-bottom:0; }
.rank-row .rk{ flex:0 0 20px; height:20px; border-radius:6px; background:#eff6ff; color:#2563eb; font-size:11px; font-weight:700; display:grid; place-items:center; }
.rank-row .rn{ flex:1; }
.rank-row .rv{ flex:0 0 auto; color:#0f172a; font-weight:600; font-size:12.5px; }
.dz-list{ display:flex; flex-direction:column; gap:6px; }
.dz-item{ display:flex; align-items:center; gap:9px; font-size:13px; color:#334155; }
.dz-item .dz-rk{ flex:0 0 18px; height:18px; border-radius:50%; background:#f1f5f9; color:#64748b; font-size:10.5px; font-weight:700; display:grid; place-items:center; }
.dz-item .dz-n{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dz-item .dz-c{ color:#94a3b8; font-size:11.5px; }

/* 클러스터 원형 마커 */
.cluster{ display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:700;
  background:rgba(91,79,196,.92); border:3px solid rgba(91,79,196,.35); box-shadow:0 1px 5px rgba(0,0,0,.3); cursor:pointer; }
.cluster.s{ width:34px; height:34px; font-size:12px; }
.cluster.m{ width:46px; height:46px; font-size:13px; }
.cluster.l{ width:58px; height:58px; font-size:14px; }
.cluster.xl{ width:72px; height:72px; font-size:15px; }

/* 지도 컨트롤 버튼 (내위치/로드뷰/확대/축소) */
.map-controls{ position:absolute; top:12px; right:12px; z-index:20; display:flex; flex-direction:column; gap:8px; }
.map-ctrl-btn{ width:40px; height:40px; padding:0; border:1px solid var(--line); background:#fff; border-radius:10px; display:grid; place-items:center; cursor:pointer; color:#374151; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.map-ctrl-btn:hover{ background:#f3f4f6; }
.map-ctrl-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.map-ctrl-btn svg{ width:20px; height:20px; }
/* 로드뷰 */
.roadview-pane{ position:absolute; inset:0; z-index:30; display:none; }
.rv-container{ width:100%; height:100%; }
.rv-close{ position:absolute; top:12px; right:12px; z-index:31; width:40px; height:40px; border:0; border-radius:10px; background:#111827cc; color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.rv-close:hover{ background:#111827; }

/* ===== 모바일: 지도 전체화면 + 하단 시트 ===== */
@media (max-width:760px){
  .site-header{ padding:10px 14px; gap:10px; }
  .site-header .brand small{ display:none; }
  .site-nav a{ padding:6px 9px; font-size:13px; }

  .map-layout{ position:relative; display:block; height:calc(100vh - 53px); height:calc(100dvh - 53px); overflow:hidden; }
  .map-pane{ position:absolute; inset:0; }

  /* 하단 시트 */
  .map-side{
    position:absolute; left:0; right:0; bottom:0; top:auto; z-index:25;
    width:100%; flex:none; border-right:0; border-top:1px solid var(--line);
    border-radius:16px 16px 0 0; box-shadow:0 -4px 18px rgba(0,0,0,.14);
    height:200px; transition:height .22s ease; overflow:hidden;
  }
  .map-side.expanded{ height:78vh; height:78dvh; }
  .sheet-handle{
    display:block; width:100%; padding:12px 0 8px; background:#fff; border:0; cursor:grab;
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .sheet-handle:active{ cursor:grabbing; }
  .sheet-handle::before{
    content:""; display:block; width:44px; height:5px; border-radius:3px;
    background:#d1d5db; margin:0 auto;
  }
  /* 시트 자체는 터치 허용, 내부 리스트만 세로 스크롤 */
  .side-list, .side-detail{ touch-action:pan-y; }
  .side-search{ padding:6px 14px 8px; }
  .side-chips{ padding:0 14px 8px; }
  .side-list{ -webkit-overflow-scrolling:touch; }
  .side-detail{ -webkit-overflow-scrolling:touch; }

  /* 지도 위 요소 정리 */
  .legend{ display:none; }
  .map-controls{ top:8px; right:8px; gap:6px; }
  .map-ctrl-btn{ width:36px; height:36px; border-radius:9px; }
  .map-ctrl-btn svg{ width:18px; height:18px; }
  .area-hint{ top:8px; max-width:88vw; white-space:normal; text-align:center; font-size:12px; }
  .rv-close{ top:8px; right:8px; }

  /* 일반 페이지(등록/상세/리포트) */
  .wrap{ margin:14px auto; }
  .row{ flex-direction:column; gap:0; }
  .sheet{ padding:18px 14px; margin:10px; }
  .card{ padding:14px; }
  .d-actions{ flex-direction:column; }
}

/* ===== 영역분석 (지도 그리기·리포트) ===== */
.area-hint{ position:absolute; top:14px; left:50%; transform:translateX(-50%); display:none;
  background:#1f2937ee; color:#fff; font-size:12.5px; padding:7px 14px; border-radius:20px; z-index:12;
  box-shadow:0 2px 8px rgba(0,0,0,.25); white-space:nowrap; pointer-events:none; }
.area-vertex{ width:10px; height:10px; border-radius:50%; background:#2563eb; border:2px solid #fff;
  box-shadow:0 0 3px rgba(0,0,0,.4); }
.gender-bar{ display:flex; height:26px; border-radius:8px; overflow:hidden; margin-top:10px; font-size:11.5px; font-weight:600; color:#fff; }
.gender-bar .gm{ background:linear-gradient(90deg,#2563eb,#3b82f6); display:flex; align-items:center; padding-left:9px; min-width:40px; }
.gender-bar .gf{ background:linear-gradient(90deg,#ec4899,#f472b6); display:flex; align-items:center; padding-left:9px; min-width:40px; }
.store-row{ display:flex; align-items:center; gap:9px; font-size:12.5px; padding:5px 0; border-bottom:1px solid #f1f5f9; }
.store-row:last-child{ border-bottom:0; }
.store-row .sn{ flex:0 0 86px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#334155; }
.store-row .sb{ flex:1; height:8px; background:#f1f5f9; border-radius:5px; overflow:hidden; }
.store-row .sb i{ display:block; height:100%; background:linear-gradient(90deg,#3b82f6,#2563eb); border-radius:5px; }
.store-row .sc{ flex:0 0 42px; text-align:right; color:#0f172a; font-weight:700; }

/* ===== 상세 패널 v2 (정보행·하트·문의) ===== */
.info-rows{ background:#fafbfc; border:1px solid var(--line2); border-radius:10px; padding:4px 12px; margin-top:8px; }
.irow{ display:flex; align-items:flex-start; gap:9px; padding:8px 0; font-size:13px; border-bottom:1px solid var(--line2); }
.irow:last-child{ border-bottom:0; }
.irow .ik{ flex:0 0 16px; color:#94a3b8; margin-top:1px; }
.irow .ik svg{ width:16px; height:16px; display:block; }
.irow .il{ flex:0 0 52px; color:var(--muted); }
.irow .iv{ flex:1; color:var(--text); line-height:1.5; word-break:keep-all; }
.type-pill{ display:inline-block; padding:1px 9px; border-radius:999px; font-size:12px; font-weight:600; }
.d-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.detail-body h2{ letter-spacing:-.2px; }
.dtabs{ gap:0; background:#f3f4f6; border:0; border-radius:10px; padding:3px; margin:16px 0 14px; }
.dtabs button{ flex:1; border-radius:8px; padding:7px 4px; margin:0; border-bottom:0; }
.dtabs button.active{ background:#fff; color:var(--primary); box-shadow:0 1px 3px rgba(0,0,0,.12); border-bottom:0; }
.d-actions .btn svg{ width:15px; height:15px; vertical-align:-2px; margin-right:4px; }

/* 하트(즐겨찾기) */
.fav-btn{ border:1px solid var(--line); background:#fff; border-radius:50%; width:32px; height:32px;
  display:grid; place-items:center; cursor:pointer; color:#9ca3af; flex:0 0 32px; align-self:center;
  transition:color .12s, border-color .12s, transform .08s; padding:0; }
.fav-btn svg{ width:17px; height:17px; }
.fav-btn:hover{ color:#ef4444; border-color:#fecaca; }
.fav-btn:active{ transform:scale(.88); }
.fav-btn.on{ color:#ef4444; border-color:#fecaca; background:#fef2f2; }
.pi-fav{ margin-left:auto; }
.fav-chip{ border:1px solid var(--line); background:#fff; border-radius:8px; width:32px; height:30px;
  display:grid; place-items:center; cursor:pointer; color:#9ca3af; padding:0; }
.fav-chip svg{ width:16px; height:16px; }
.fav-chip.on{ color:#fff; background:#ef4444; border-color:#ef4444; }

/* 문의 폼 */
.consult-form{ background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:12px; }
.consult-form h4{ margin:0 0 10px; font-size:13.5px; }
.consult-form input, .consult-form textarea{ margin-bottom:8px; background:#fff; }
.consult-form .cf-actions{ display:flex; }
.consult-form .cf-actions .btn{ flex:1; margin-top:2px; }
.cf-msg{ font-size:12.5px; margin-top:8px; display:none; }
.cf-msg.ok{ display:block; color:#065f46; }
.cf-msg.err{ display:block; color:#991b1b; }

/* ===== 인쇄 ===== */
@media print{
  body{ background:#fff; } .site-header{ display:none; }
  .sheet{ border:0; border-radius:0; margin:0; max-width:none; padding:0; }
}

/* =========================================================================
   ★ 당근 스타일 리디자인 오버라이드 (2026-06 / mediteo_redesign_preview 승인분)
   - 따뜻한 캐롯 오렌지 + 웜 뉴트럴 + 둥근 카드 + 부드러운 그림자
   - 기존 규칙을 덮어쓰는 방식(되돌리려면 이 블록만 삭제)
   ========================================================================= */
:root{
  --primary:#FF6F0F; --primary-d:#E8590C;
  --primary-soft:#FFF3EC; --primary-line:#FFE2CF;
  --bg:#FAFAF8; --card:#FFFFFF; --line:#F0ECE7; --line2:#F6F3EF;
  --text:#1F2024; --muted:#9AA0A6;
  --r-card:18px; --r-sm:12px;
  --shadow-soft:0 2px 4px rgba(31,32,36,.04), 0 8px 24px -12px rgba(31,32,36,.14);
}
body{ font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif; }

/* 헤더 / 네비 */
.site-header{ padding:14px 22px; }
.site-header .brand{ font-size:18px; }
.site-header .brand .logo{ width:34px; height:34px; border-radius:11px;
  background:linear-gradient(135deg,#FF8A3D,#FF6F0F); font-size:16px;
  box-shadow:0 4px 10px -2px rgba(255,111,15,.5); }
.site-nav a{ font-weight:600; border-radius:11px; }
.site-nav a:hover{ background:#F7F4F0; }
.site-nav a.active{ background:var(--primary-soft); color:var(--primary-d); }

/* 카드 / 버튼 / 폼 */
.card{ border-radius:var(--r-card); border-color:var(--line); box-shadow:var(--shadow-soft); }
.btn, .card button{ border-radius:13px; font-weight:700;
  box-shadow:0 6px 14px -5px rgba(255,111,15,.5); }
.btn-ghost{ box-shadow:none; }
input, select, textarea{ border-radius:12px; border-color:#E7E2DB; }
input:focus, select:focus, textarea:focus{ border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-soft); }

/* 칩 / 필터 / 탭 */
.filters button, .side-chips button{ border-radius:999px; font-weight:600; border-color:var(--line); }
.filters button.active, .side-chips button.active{ background:var(--primary); border-color:var(--primary);
  box-shadow:0 3px 8px -3px rgba(255,111,15,.5); }
.tabs button.active{ color:var(--primary); border-bottom-color:var(--primary); }
.dtabs button.active{ color:var(--primary-d); }

/* 지도 목록(직방형 카드) */
.side-search input{ border-radius:12px; }
.place-item{ padding:16px; }
.place-item:hover{ background:#FCFAF8; }
.place-item .thumb{ border-radius:14px; background:linear-gradient(135deg,#FFF1E6,#FFE3CE); color:#FF8A3D; }
.place-item .pi-name{ font-weight:800; letter-spacing:-.3px; }
.place-item.sel{ background:var(--primary-soft); box-shadow:inset 3px 0 0 var(--primary); }
.place-item .badge{ background:var(--primary-soft); color:var(--primary-d); }

/* 지도 핀 / 클러스터 / 범례 */
.cluster{ background:rgba(255,111,15,.92); border-color:rgba(255,111,15,.28);
  box-shadow:0 4px 14px -2px rgba(255,111,15,.55); }
.legend{ border-radius:14px; box-shadow:var(--shadow-soft); }
.legend > div.active{ background:var(--primary-soft); color:var(--primary-d); }
.map-ctrl-btn{ border-radius:13px; box-shadow:var(--shadow-soft); }
.map-ctrl-btn.active{ background:var(--primary); border-color:var(--primary); }

/* 입지점수 등급 배지 → 브랜드 톤 */
.grade-badge, .score-big .g{ background:var(--primary-soft); color:var(--primary-d); }

/* 권리금 결과 히어로 → 오렌지 그라데이션 */
.rev-hero{ background:linear-gradient(135deg,#FF8A3D,#FF6F0F);
  box-shadow:0 12px 28px -10px rgba(255,111,15,.6); }
.rev-out{ background:var(--primary-soft); border-color:var(--primary-line); }
.d-price{ background:var(--primary-soft); border-color:var(--primary-line); }

/* 슬라이더 손잡이 → 오렌지 */
.sld input[type=range]::-webkit-slider-thumb{ background:var(--primary);
  box-shadow:0 1px 4px rgba(255,111,15,.5); }
.sld input[type=range]::-moz-range-thumb{ background:var(--primary); }

/* 데이터 막대(상권리포트·진료과목) → 웜 오렌지 */
.bar-row .br-fill{ background:linear-gradient(90deg,#FFB454,#FF6F0F); }
.store-row .sb i{ background:linear-gradient(90deg,#FFB454,#FF6F0F); }
.rep-kpi b{ color:#1F2024; }

/* 즐겨찾기 하트는 레드 유지(가독), 문의 폼만 카드 톤 정리 */
.consult-form{ border-radius:var(--r-card); }
.rep-sec{ border-radius:var(--r-card); }

/* =========================================================================
   ★ 심화 재설계 — 단독 페이지 컴포넌트 형태/간격/구성 업그레이드
   (색뿐 아니라 모양까지 시안 수준으로. 매물상세·리포트·등록·로그인)
   ========================================================================= */

/* 본문 여백·타이포 톤업 */
.wrap{ padding:0 18px; }
.title{ font-size:26px; font-weight:800; letter-spacing:-.7px; margin:0 0 6px; }
.sub{ font-size:14px; }
.card{ padding:22px; margin-bottom:18px; }
.card h2{ font-size:16.5px; font-weight:800; letter-spacing:-.3px; }
label{ font-weight:600; color:#52575C; }
input, select, textarea{ padding:12px 13px; font-size:14.5px; }
.btn, .card button{ padding:13px 18px; font-size:15px; }

/* 매물 상세 탭 → 알약형 세그먼트 컨트롤 (밑줄 탭 폐기) */
.tabs{ background:#F4F1ED; border:0; border-radius:14px; padding:4px; gap:4px; margin-bottom:18px; }
.tabs button{ flex:1; border:0; border-bottom:0; margin-bottom:0; border-radius:11px;
  padding:11px 6px; font-size:13.5px; font-weight:700; color:#74787E; }
.tabs button.active{ background:#fff; color:var(--primary-d); border-bottom:0;
  box-shadow:0 2px 6px -1px rgba(31,32,36,.14); }

/* 입지점수 헤더 → 큰 링형 등급 배지 + 큰 점수 */
.score-head{ gap:18px; padding:18px 20px; border-radius:var(--r-card);
  background:linear-gradient(135deg,var(--primary-soft),#fff); border:1px solid var(--primary-line); }
.grade-badge{ width:74px; height:74px; font-size:32px; font-weight:900;
  background:#fff; color:var(--primary-d);
  box-shadow:0 0 0 3px var(--primary-line), 0 8px 18px -8px rgba(255,111,15,.45); }
.score-head .num{ font-size:34px; font-weight:900; letter-spacing:-1px; }
.score-head .num small{ font-size:15px; }

/* 지표별 표 더 또렷하게 */
.score-breakdown{ margin-top:20px; }
.score-breakdown td{ padding:12px 6px; }
.score-breakdown .sb-score{ font-size:14px; }

/* 기본정보 표 → 카드형 행 */
.detail-table th{ width:120px; color:var(--muted); font-weight:700; }
.detail-table th, .detail-table td{ padding:12px 6px; }

/* 상권 리포트 시트 → 프리미엄 카드 */
.sheet{ border-radius:22px; padding:30px 32px; box-shadow:var(--shadow-soft); }
.sheet h1{ font-size:24px; font-weight:800; letter-spacing:-.6px; }
.sheet h2{ font-size:16px; font-weight:800; border-left-width:5px; border-radius:0 4px 4px 0;
  padding-left:11px; margin:28px 0 14px; }
.kpi{ gap:12px; }
.kpi div{ border-radius:16px; padding:16px 14px; background:#FCFBF9; border-color:var(--line); text-align:center;
  transition:transform .12s, box-shadow .12s; }
.kpi div:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.kpi b{ font-size:24px; font-weight:900; letter-spacing:-.5px; }
.kpi span{ font-size:12px; }

/* 등록/회원가입 폼 — 행 간격·라벨 */
.wrap.narrow .card{ padding:24px; }

/* 매물 목록 카드(직방형) 한층 강화 */
.side-search input{ background:#F5F2EE; border:1.5px solid transparent; padding:12px 14px; }
.side-search input:focus{ background:#fff; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.side-chips button{ padding:8px 15px; font-size:13.5px; }
.place-item{ gap:14px; }
.place-item .thumb{ width:72px; height:72px; flex:0 0 72px; font-size:22px; }
.place-item .pi-name{ font-size:15px; }
.place-item .pi-price{ font-size:15px; font-weight:800; letter-spacing:-.3px; margin-top:5px; }
.place-item .pi-meta{ font-size:12.5px; }

/* 좌측 상세 패널 가격 박스 */
.d-price{ border-radius:14px; padding:14px 16px; }
.d-actions .btn{ border-radius:13px; }

/* 헤더 sticky 살짝 블러 느낌 */
.site-header{ backdrop-filter:saturate(1.1); }

/* =========================================================================
   ★ 시안 컴포넌트 (mediteo_redesign_preview.html 이식) — 페이지 재구성용 공통 클래스
   ========================================================================= */
/* 공통 태그/칩/버튼 */
.tag{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:7px; background:var(--primary-soft); color:var(--primary-d); }
.tag.rent{ background:#EAF1FF; color:#2563EB; }
.tag.presale{ background:#F3EEFF; color:#7C3AED; }
.tag.kind{ background:#EAF7EE; color:#16A34A; }
.btn-pri{ width:100%; border:0; border-radius:13px; padding:14px; font-size:15px; font-weight:800; cursor:pointer;
  background:var(--primary); color:#fff; box-shadow:0 6px 14px -4px rgba(255,111,15,.55); }
.btn-pri:hover{ background:var(--primary-d); }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:#52575C; margin:0 0 6px; }
.field input, .field textarea, .field select{ width:100%; border:1.5px solid var(--line); border-radius:12px;
  padding:12px 13px; font-size:14.5px; outline:none; font-family:inherit; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }

/* 매물 상세 — 2단 레이아웃 */
.detail-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:0; background:#fff;
  border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-soft); }
.detail-main{ padding:26px 28px; border-right:1px solid var(--line); }
.detail-side{ padding:24px; background:#FCFBF9; }
.d-tags{ display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap; }
.d-title{ font-size:25px; font-weight:800; letter-spacing:-.7px; margin:0 0 8px; }
.d-addr{ display:flex; align-items:center; gap:7px; color:var(--sub,#74787E); font-size:14px; }
.d-addr svg{ width:16px; height:16px; color:var(--muted); }
/* 세그먼트 탭 */
.seg{ display:flex; gap:4px; background:#F4F1ED; border-radius:14px; padding:4px; margin:22px 0 18px; }
.seg button{ flex:1; border:0; background:none; padding:11px 6px; font-size:13.5px; font-weight:700; color:#74787E;
  border-radius:11px; cursor:pointer; }
.seg button.on{ background:#fff; color:var(--primary-d); box-shadow:0 2px 6px -1px rgba(31,32,36,.14); }
.seg-panel{ display:none; } .seg-panel.on{ display:block; }
/* 입지점수 링 히어로 */
.score-hero2{ display:flex; align-items:center; gap:20px; padding:22px; border-radius:18px;
  background:linear-gradient(135deg,#F0FBF4,#fff); border:1px solid #DCF3E4; }
.ring{ position:relative; width:92px; height:92px; flex:0 0 92px; }
.ring svg{ transform:rotate(-90deg); }
.ring .rg{ position:absolute; inset:0; display:grid; place-items:center; font-size:34px; font-weight:900; }
.score-hero2 .sc{ font-size:30px; font-weight:900; letter-spacing:-1px; }
.score-hero2 .sc small{ font-size:15px; color:var(--muted); font-weight:700; }
.score-hero2 .ds{ font-weight:800; font-size:13.5px; margin-top:4px; }
.score-hero2 .nt{ font-size:12.5px; color:var(--sub,#74787E); margin-top:6px; }
/* 지표 표 */
.brk{ width:100%; border-collapse:collapse; margin-top:18px; font-size:13.5px; }
.brk th{ text-align:left; color:var(--muted); font-weight:700; font-size:12px; padding:0 6px 8px; }
.brk td{ padding:11px 6px; border-top:1px solid var(--line2); }
.brk .lab{ font-weight:700; } .brk .scv{ font-weight:800; }
.brk .wv{ color:var(--sub,#74787E); } .brk .srcv{ color:var(--muted); font-size:12px; }
.brk tr.off td{ color:#C3BFB9; } .brk .na{ font-size:11.5px; color:#C3BFB9; font-weight:700; }
/* 권리금 결과 + 슬라이더 + 중개사 */
.rev-hero2{ background:linear-gradient(135deg,#FF8A3D,#FF6F0F); color:#fff; border-radius:18px;
  padding:20px 22px; box-shadow:0 12px 28px -10px rgba(255,111,15,.6); }
.rev-hero2 .lb{ font-size:12.5px; opacity:.9; font-weight:600; }
.rev-hero2 .big{ font-size:30px; font-weight:900; letter-spacing:-1px; margin:5px 0 8px; }
.rev-hero2 .band{ display:inline-block; background:rgba(255,255,255,.2); border-radius:999px; padding:5px 13px; font-size:12.5px; font-weight:700; }
.sld2{ margin:15px 2px; }
.sld2 .top{ display:flex; justify-content:space-between; font-size:13px; color:var(--sub,#74787E); font-weight:600; margin-bottom:8px; }
.sld2 .top b{ color:var(--ink,#1F2024); font-weight:800; }
.sld2 input[type=range]{ width:100%; height:6px; -webkit-appearance:none; appearance:none; background:#EEE9E3; border-radius:6px; outline:none; }
.sld2 input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--primary); border:3px solid #fff; box-shadow:0 2px 6px rgba(255,111,15,.5); cursor:pointer; }
.sld2 input[type=range]::-moz-range-thumb{ width:17px; height:17px; border-radius:50%; background:var(--primary); border:3px solid #fff; cursor:pointer; }
.broker2{ border:1px solid var(--line); border-radius:18px; padding:16px 18px; margin-top:16px; background:#fff; }
.broker2 h4{ margin:0 0 10px; font-size:13.5px; font-weight:800; }
.broker2 .brow{ display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:1px solid var(--line2); }
.broker2 .brow:last-child{ border-bottom:0; } .broker2 .brow .k{ color:var(--sub,#74787E); }
.consult2{ margin-top:18px; } .consult2 h3{ font-size:15px; font-weight:800; margin:0 0 12px; }

/* 매물 상세 — 로드뷰 탭 */
.prop-rv-map{ width:100%; height:180px; border-radius:14px; overflow:hidden; margin-bottom:8px; background:#e5e7eb; }
.prop-rv-view{ width:100%; height:320px; border-radius:14px; overflow:hidden; position:relative; background:#1f2937; }
.prop-rv-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; color:#9ca3af; background:#f3f4f6; }
.prop-rv-hint{ font-size:12px; color:#9ca3af; margin:8px 0 0; }

/* 상권 리포트 카드 */
.rsec{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 22px; margin-bottom:16px; box-shadow:var(--shadow-soft); }
.rsec h3{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; margin:0 0 16px; }
.rsec h3 .ic{ width:30px; height:30px; border-radius:10px; background:var(--primary-soft); color:var(--primary-d); display:grid; place-items:center; font-size:15px; }
.rkpi{ display:flex; gap:12px; flex-wrap:wrap; }
.rkpi div{ flex:1; min-width:110px; background:#FCFBF9; border:1px solid var(--line); border-radius:14px; padding:15px; text-align:center; }
.rkpi b{ display:block; font-size:22px; font-weight:900; letter-spacing:-.5px; }
.rkpi span{ font-size:12px; color:var(--muted); font-weight:600; }
.rbar{ display:flex; align-items:center; gap:12px; padding:9px 0; }
.rbar + .rbar{ border-top:1px solid var(--line2); }
.rbar .rk{ width:22px; height:22px; border-radius:7px; background:var(--primary-soft); color:var(--primary-d); font-size:11.5px; font-weight:800; display:grid; place-items:center; }
.rbar.top .rk{ background:linear-gradient(135deg,#FFB454,#FF8A3D); color:#fff; }
.rbar .nm{ flex:1; font-size:13.5px; font-weight:600; }
.rbar .tk{ flex:1.2; height:8px; background:#F1ECE6; border-radius:5px; overflow:hidden; }
.rbar .tk i{ display:block; height:100%; background:linear-gradient(90deg,#FFB454,#FF6F0F); border-radius:5px; }
.rbar .vl{ font-size:13px; font-weight:800; min-width:54px; text-align:right; }

/* 인증(로그인/회원가입) 2단 */
.auth-grid{ display:grid; grid-template-columns:1fr 1fr; background:#fff; border:1px solid var(--line);
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow-soft); max-width:880px; margin:30px auto; }
.auth-card{ padding:34px 36px; }
.auth-card.alt{ background:linear-gradient(160deg,#FFF6EF,#FFEFE2); border-left:1px solid var(--line); }
.auth-card h2{ font-size:21px; font-weight:800; letter-spacing:-.5px; margin:0 0 6px; }
.auth-card .asub{ color:var(--sub,#74787E); font-size:14px; margin:0 0 22px; }
.role2{ display:flex; gap:10px; margin-bottom:14px; }
.role2 div{ flex:1; border:1.5px solid var(--line); border-radius:14px; padding:14px 6px; text-align:center; cursor:pointer; background:#fff; }
.role2 div.on{ border-color:var(--primary); background:var(--primary-soft); }
.role2 .ri{ font-size:22px; display:flex; justify-content:center; color:var(--primary-d); }
.role2 .ri svg{ width:24px; height:24px; }
.role2 div.on .ri{ color:var(--primary); }
.role2 .rt{ font-size:13px; font-weight:800; margin-top:6px; }
.benefit{ display:flex; gap:11px; align-items:flex-start; margin:14px 0; }
.benefit .bi{ width:34px; height:34px; border-radius:10px; background:#fff; border:1px solid var(--primary-line); display:grid; place-items:center; flex:0 0 34px; color:var(--primary-d); font-size:18px; }
.benefit .bi svg{ width:18px; height:18px; }
.benefit .bt b{ font-size:14px; font-weight:800; } .benefit .bt span{ font-size:12.5px; color:var(--sub,#74787E); }
@media (max-width:760px){ .detail-grid, .auth-grid{ grid-template-columns:1fr; } .detail-main{ border-right:0; border-bottom:1px solid var(--line); } }

/* =========================================================================
   ★ 지도 인포 카드 + 세련된 마커 (map.php)
   ========================================================================= */
/* 커스텀 인포 카드 (카카오 기본 InfoWindow 대체) */
.map-tip{ position:relative; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:11px 30px 11px 13px; min-width:148px; max-width:250px;
  box-shadow:0 10px 26px -8px rgba(31,32,36,.30), 0 2px 6px rgba(31,32,36,.10);
  font-family:inherit; animation:tipPop .14s ease-out; }
@keyframes tipPop{ from{ opacity:0; transform:translateY(4px) scale(.96); } to{ opacity:1; transform:none; } }
.map-tip::after{ content:""; position:absolute; left:50%; bottom:-7px; width:13px; height:13px;
  background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg); }
.map-tip .mt-row{ display:flex; gap:9px; align-items:flex-start; }
.map-tip .mt-dot{ width:10px; height:10px; border-radius:50%; margin-top:4px; flex:0 0 10px; box-shadow:0 0 0 3px rgba(0,0,0,.05); }
.map-tip .mt-name{ font-weight:800; font-size:14px; letter-spacing:-.3px; color:var(--text); line-height:1.3; }
.map-tip .mt-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.map-tip .map-tip-x{ position:absolute; top:6px; right:9px; cursor:pointer; color:#c3bfb9; font-size:16px; line-height:1; font-weight:400; }
.map-tip .map-tip-x:hover{ color:var(--text); }
.map-tip .mt-rv{ display:block; width:100%; margin-top:8px; padding:6px 0; border:0; border-radius:8px; background:var(--primary-soft); color:var(--primary-d); font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.map-tip .mt-rv:hover{ background:var(--primary-line); }

/* 의료기관 마커 — 물방울형 핀(흰 중심 + 그림자) */
.fac-dot{ width:24px; height:24px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  border:2.5px solid #fff; box-shadow:0 4px 8px -1px rgba(31,32,36,.38); display:grid; place-items:center;
  transition:transform .1s ease; }
.fac-dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
.fac-dot:hover{ transform:rotate(-45deg) scale(1.15); z-index:6; }
.fac-dot.sel{ transform:rotate(-45deg) scale(1.28); border-color:#fff;
  box-shadow:0 0 0 3px var(--primary-soft), 0 6px 16px -3px rgba(31,32,36,.5); z-index:20; }

/* 매물 핀 — 오렌지 버블 + 스템 (직방/당근형) */
.prop-pin{ display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.prop-pin b{ background:linear-gradient(135deg,#F2675A,#EA4335); color:#fff; font-size:12px; font-weight:800;
  letter-spacing:-.2px; padding:5px 11px; border-radius:12px; white-space:nowrap; border:1.5px solid #fff;
  box-shadow:0 6px 14px -4px rgba(234,67,53,.6); }
.prop-pin i{ width:2px; height:8px; background:#EA4335; display:block; }
.prop-pin:hover b{ filter:brightness(1.04); }

/* 클러스터 — 개수 구간별 선명한 색상(적음 초록 → 많음 보라). 테두리 없음, 흰 글자 */
.cluster{ border:0 !important; color:#fff !important; box-shadow:0 5px 14px -3px rgba(31,32,36,.4) !important; }
.cluster.t0{ background:#10B981; }   /* <20 */
.cluster.t1{ background:#65A30D; }   /* 20~99 */
.cluster.t2{ background:#CA8A04; }   /* 100~499 */
.cluster.t3{ background:#F59E0B; }   /* 500~999 */
.cluster.t4{ background:#F97316; }   /* 1000~1999 */
.cluster.t5{ background:#EA580C; }   /* 2000~4999 */
.cluster.t6{ background:#EF4444; }   /* 5000~9999 */
.cluster.t7{ background:#DC2626; }   /* 10000~19999 */
.cluster.t8{ background:#9333EA; }   /* 20000+ */

/* 지도 컨트롤 버튼 — 마우스 오버 커스텀 툴팁(좌측 표시) */
.map-ctrl-btn{ position:relative; }
.map-ctrl-btn[data-tip]::after{
  content:attr(data-tip); position:absolute; right:calc(100% + 11px); top:50%;
  transform:translateY(-50%) translateX(6px); background:#1F2024; color:#fff;
  font-size:12px; font-weight:600; letter-spacing:-.2px; white-space:nowrap;
  padding:7px 11px; border-radius:10px; box-shadow:0 8px 20px -5px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .14s ease, transform .14s ease; z-index:40;
}
.map-ctrl-btn[data-tip]::before{
  content:""; position:absolute; right:calc(100% + 5px); top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-left-color:#1F2024;
  opacity:0; transition:opacity .14s ease; z-index:40;
}
.map-ctrl-btn[data-tip]:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }
.map-ctrl-btn[data-tip]:hover::before{ opacity:1; }
/* 모바일에선 컨트롤 툴팁 숨김(터치 환경) */
@media (max-width:760px){ .map-ctrl-btn[data-tip]::after, .map-ctrl-btn[data-tip]::before{ display:none; } }

/* =========================================================================
   ★ 영역분석/상세 패널 섹션 간 여백 확대 (섹션이 서로 붙는 문제)
   ========================================================================= */
.detail-body .rep-sec{ margin:0 0 18px; padding:18px 18px; }
.detail-body .rep-sec:last-of-type{ margin-bottom:14px; }
.detail-body .rep-sec h4{ margin-bottom:15px; }
.detail-body .living-type{ margin-bottom:13px; }
.detail-body .rep-sec .muted-note{ margin-top:12px; }
.detail-body .rep-sec .kv-line{ margin-bottom:13px; }
.detail-body .rep-sec .store-row{ padding:7px 0; }
.detail-body .d-actions{ margin-top:20px; gap:10px; }

/* =========================================================================
   ★ 사이드바 리스트 카드 리디자인 (2026-07)
   ========================================================================= */

/* 그룹 타이틀 */
.list-group-title{
  font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--muted); padding:14px 16px 6px; background:var(--bg); border-bottom:0;
}

/* 공통 카드 */
.place-item{
  display:flex; gap:11px; padding:13px 14px;
  border-bottom:1px solid var(--line2); cursor:pointer;
  align-items:flex-start; transition:background .12s;
}
.place-item:hover{ background:var(--primary-soft); }
.place-item.sel{ background:var(--primary-soft); box-shadow:inset 3px 0 0 var(--primary); }
.place-item.is-prop{ background:#fff; }
.place-item.is-prop:hover{ background:var(--primary-soft); }

/* 썸네일 아이콘 — 작고 세련된 형태 */
.place-item .thumb{
  width:46px; height:46px; flex:0 0 46px;
  border-radius:13px; font-size:10.5px; font-weight:800;
  letter-spacing:-.2px; line-height:1.25; text-align:center;
  padding:0 3px; display:grid; place-items:center;
}

/* 본문 영역 */
.place-item .pi-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }

/* 배지(매물 타입) — 제목 위 별도 줄 */
.place-item .badge{
  display:inline-block; font-size:10px; font-weight:800;
  padding:2px 7px; border-radius:6px;
  background:var(--primary-soft); color:var(--primary-d);
  margin-right:5px; vertical-align:2px; flex-shrink:0;
}

/* 이름 — 2줄 클램프, 줄바꿈 허용 */
.place-item .pi-name{
  font-size:14px; font-weight:800; line-height:1.4; color:var(--text);
  white-space:normal; overflow:hidden; letter-spacing:-.3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* 부가 정보(유형, 주소) */
.place-item .pi-meta{
  font-size:11.5px; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; line-height:1.5;
}

/* 가격 */
.place-item .pi-price{
  font-size:13px; font-weight:800; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:-.3px; margin-top:3px;
}

/* 등급 칩 */
.grade-chip{
  display:inline-grid; place-items:center;
  width:17px; height:17px; border-radius:50%;
  color:#fff; font-size:10px; font-weight:800;
  margin-left:4px; vertical-align:2px; flex-shrink:0;
}

/* 즐겨찾기 버튼 */
.fav-btn{
  border:1.5px solid var(--line); background:#fff; border-radius:50%;
  width:30px; height:30px; display:grid; place-items:center;
  cursor:pointer; color:#c3bfb9; flex:0 0 30px; align-self:flex-start;
  transition:color .12s, border-color .12s, transform .08s; padding:0; margin-top:2px;
}
.fav-btn svg{ width:15px; height:15px; }
.fav-btn:hover{ color:#ef4444; border-color:#fecaca; background:#fff5f5; }
.fav-btn:active{ transform:scale(.88); }
.fav-btn.on{ color:#ef4444; border-color:#fecaca; background:#fef2f2; }
.pi-fav{ margin-left:0; }

/* 매물 — 거래유형 태그 + 등급칩 행 */
.pi-row1{ display:flex; align-items:center; gap:5px; margin-bottom:3px; }
.pi-deal-tag{
  display:inline-block; font-size:10px; font-weight:800;
  padding:2px 7px; border-radius:6px;
  background:var(--primary-soft); color:var(--primary-d); flex-shrink:0;
}

/* 주소 — 조금 더 흐리게 */
.pi-addr{ color:#c3bfb9 !important; font-size:11px !important; }
.pi-type{ font-weight:600; color:#74787E !important; }