/* massageblogs.xyz — 지역 디렉토리 스킨
 *
 * 설계 의도
 *  · 시인성 : 배경을 살짝 눌러(#F6F8FB) 흰 카드가 떠 보이게 한다. 텍스트는 잉크 계열 한 톤으로 통일.
 *  · 가독성 : 본문 폭 46rem 고정(한 줄 한글 40~45자) · 행간 1.75 · 라벨/값 대비를 색으로 분리.
 *  · 입체감 : 그림자를 두 겹으로 쌓는다(가까운 1px + 멀리 퍼지는 큰 그림자). 단색 테두리만 쓰면 납작해 보인다.
 *
 * ★색은 여기 :root 변수에서만 정의한다. 같은 선택자를 아래에서 또 정의하지 말 것
 *   (맨 뒤 정의가 이기면서 조용히 깨진다).
 */
:root{
  --ink:#0F1621;          /* 제목 */
  --body:#39424F;         /* 본문 */
  --muted:#6B7684;        /* 라벨·보조 */
  --faint:#98A2B3;        /* 각주 */
  --line:#E6EAF0;
  --bg:#F6F8FB;
  --surface:#FFFFFF;
  --brand:#0E6E62;        /* 딥 티일 — 웰니스 톤 */
  --brand-ink:#0A564D;
  --brand-soft:#E8F3F1;
  --shadow-1:0 1px 2px rgba(15,22,33,.05);
  --shadow-2:0 1px 2px rgba(15,22,33,.05), 0 10px 28px -14px rgba(15,22,33,.28);
  --shadow-3:0 2px 4px rgba(15,22,33,.06), 0 18px 40px -18px rgba(15,22,33,.34);
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font:16px/1.75 -apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--body);
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.mb-wrap{max-width:46rem;margin:0 auto;padding:0 1.15rem}

/* ── 헤더 : 스크롤해도 전화가 항상 보이게 고정 ───────────────── */
.mb-hd{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-1);
}
.mb-hd .mb-wrap{display:flex;align-items:center;justify-content:space-between;gap:.8rem;height:60px}
.mb-logo{font-weight:800;color:var(--ink);letter-spacing:-.02em;font-size:1.02rem}
.mb-logo:hover{text-decoration:none}
.mb-tel{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:800;font-size:.92rem;letter-spacing:-.01em;
  background:linear-gradient(180deg,#12897A 0%,var(--brand) 100%);
  color:#fff;padding:.55rem .95rem;border-radius:999px;
  box-shadow:0 1px 2px rgba(14,110,98,.25), 0 8px 18px -8px rgba(14,110,98,.65);
  white-space:nowrap;
}
.mb-tel::before{content:"📞";font-size:.9em}
.mb-tel:hover{text-decoration:none;background:linear-gradient(180deg,var(--brand) 0%,var(--brand-ink) 100%)}

/* ── 타이포 ──────────────────────────────────────────────── */
main{padding:1.6rem 0 3rem}
h1{
  font-size:1.5rem;line-height:1.42;margin:.3rem 0 1rem;
  color:var(--ink);font-weight:800;letter-spacing:-.025em;word-break:keep-all;
}
h2{
  position:relative;font-size:1.16rem;font-weight:800;color:var(--ink);
  margin:2.4rem 0 .95rem;padding-left:.72rem;letter-spacing:-.02em;word-break:keep-all;
}
h2::before{
  content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:4px;
  border-radius:2px;background:linear-gradient(180deg,#16A08D,var(--brand));
}
h3{font-size:1.04rem;margin:0 0 .55rem;color:var(--ink);font-weight:700;letter-spacing:-.015em;line-height:1.5;word-break:keep-all}

.mb-lead{
  color:var(--body);background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--brand);
  padding:.95rem 1.1rem;border-radius:0 var(--r) var(--r) 0;
  box-shadow:var(--shadow-1);margin:0 0 1.4rem;word-break:keep-all;
}

/* ── 업소 카드 : 떠 있는 면 ───────────────────────────────── */
.mb-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.15rem 1.2rem 1.05rem;
  margin:0 0 .9rem;
  box-shadow:var(--shadow-2);
  transition:transform .16s ease, box-shadow .16s ease;
}
.mb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.mb-eyebrow{
  display:inline-block;margin:0 0 .5rem;
  font-size:.74rem;font-weight:700;letter-spacing:.01em;
  color:var(--brand-ink);background:var(--brand-soft);
  padding:.22rem .58rem;border-radius:999px;
}
.mb-card dl{
  display:grid;grid-template-columns:5.4rem 1fr;gap:.42rem .8rem;
  margin:.7rem 0 .95rem;font-size:.94rem;
}
.mb-card dt{color:var(--muted);font-weight:600}
.mb-card dd{margin:0;color:var(--ink);word-break:keep-all}

.mb-links{margin:0;display:flex;flex-wrap:wrap;gap:.5rem;font-size:.88rem}
.mb-links a{
  border:1px solid var(--line);border-radius:9px;padding:.42rem .78rem;
  color:var(--body);background:#FBFCFE;font-weight:600;
  box-shadow:var(--shadow-1);
}
.mb-links a:hover{text-decoration:none;border-color:#CFD6E0;background:#fff}
.mb-callbtn{
  border-color:transparent!important;
  background:linear-gradient(180deg,#12897A 0%,var(--brand) 100%)!important;
  color:#fff!important;font-weight:800!important;
  box-shadow:0 1px 2px rgba(14,110,98,.25), 0 8px 18px -10px rgba(14,110,98,.7)!important;
}
.mb-callbtn:hover{background:linear-gradient(180deg,var(--brand) 0%,var(--brand-ink) 100%)!important}

/* ── 칩 목록(동·업종·링크 휠) ─────────────────────────────── */
.mb-dongs,.mb-kws,.mb-wheel{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.mb-dongs li a,.mb-kws li a,.mb-wheel li a{
  display:inline-block;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;
  padding:.45rem .9rem;font-size:.9rem;color:var(--ink);font-weight:600;
  box-shadow:var(--shadow-1);
}
.mb-dongs li a:hover,.mb-kws li a:hover,.mb-wheel li a:hover{
  text-decoration:none;border-color:var(--brand);color:var(--brand-ink);
  background:var(--brand-soft);
}

/* ── 하단 FAQ ────────────────────────────────────────────── */
.mb-faq{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.4rem 1.2rem 1.3rem;box-shadow:var(--shadow-2);
}
.mb-faq h2{margin-top:1.3rem}
.mb-faq dl{margin:0}
/* ★.mb-card dl 은 2단 그리드다 — FAQ 는 별도 정의로 덮어쓴다 */
.mb-faq dt{
  display:grid;grid-template-columns:1.55rem 1fr;gap:.5rem;
  font-weight:700;color:var(--ink);margin:1.35rem 0 .45rem;line-height:1.55;word-break:keep-all;
}
.mb-faq dt:first-of-type{margin-top:.4rem}
.mb-faq dt::before{
  content:"Q";display:grid;place-items:center;
  width:1.55rem;height:1.55rem;border-radius:50%;
  background:var(--brand);color:#fff;font-size:.8rem;font-weight:800;
  box-shadow:0 4px 10px -4px rgba(14,110,98,.8);
}
.mb-faq dd{
  display:grid;grid-template-columns:1.55rem 1fr;gap:.5rem;
  margin:0;color:var(--body);font-size:.95rem;line-height:1.75;word-break:keep-all;
}
.mb-faq dd::before{
  content:"A";display:grid;place-items:center;
  width:1.55rem;height:1.55rem;border-radius:50%;
  background:#EEF1F6;color:var(--muted);font-size:.8rem;font-weight:800;
}
.mb-faq dd+dt{border-top:1px solid var(--line);padding-top:1.35rem}

/* ── 푸터 ────────────────────────────────────────────────── */
.mb-ft{
  border-top:1px solid var(--line);background:var(--surface);
  margin-top:3rem;padding:1.6rem 0 6rem;color:var(--muted);font-size:.9rem;
}
.mb-note{font-size:.83rem;color:var(--faint)}

/* ── 모바일 하단 고정 전화바 : 출장 예약이 메인 전환점 ───────── */
.mb-fab{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:.6rem 1.15rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -16px rgba(15,22,33,.5);
}
.mb-fab a{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  background:linear-gradient(180deg,#12897A 0%,var(--brand) 100%);
  color:#fff;font-weight:800;letter-spacing:-.01em;
  padding:.85rem 1rem;border-radius:12px;
  box-shadow:0 2px 4px rgba(14,110,98,.24), 0 12px 24px -12px rgba(14,110,98,.8);
}
.mb-fab a:hover{text-decoration:none}
@media(min-width:721px){
  .mb-fab{display:none}
  .mb-ft{padding-bottom:2.5rem}
}

@media(max-width:480px){
  h1{font-size:1.28rem}
  h2{font-size:1.08rem;margin-top:2.1rem}
  .mb-card{padding:1rem 1rem .95rem}
  .mb-card dl{grid-template-columns:4.6rem 1fr;font-size:.92rem}
  .mb-faq{padding:.3rem 1rem 1.1rem}
}

@media(prefers-reduced-motion:reduce){
  .mb-card{transition:none}
  .mb-card:hover{transform:none}
}

/* 하단 지도 — 높이를 미리 잡아 레이아웃 이동(CLS)을 막는다 */
.mb-mapbox{
  height:340px;border:1px solid var(--line);border-radius:var(--r);
  background:#EEF1F6;box-shadow:var(--shadow-2);overflow:hidden;
}
.mb-mapbox .leaflet-container{height:100%;border-radius:var(--r);font:inherit}
@media(max-width:480px){.mb-mapbox{height:280px}}

/* ── 업소 썸네일 = 인라인 SVG ────────────────────────────────
 * 파일이 아니라 문서 안의 <svg> 다 → 요청 0 · 디스크 0.
 * viewBox 320x200 을 CSS 로만 키운다. 벡터라 어떤 배율에서도 안 깨진다.
 */
.mb-card.has-thumb{display:grid;grid-template-columns:168px 1fr;gap:1.05rem;align-items:start}
.mb-thumb{
  display:block;width:168px;height:105px;
  border-radius:10px;
  box-shadow:0 1px 2px rgba(15,22,33,.08), 0 8px 18px -12px rgba(15,22,33,.5);
}
.mb-cardbody{min-width:0}
@media(max-width:600px){
  .mb-card.has-thumb{grid-template-columns:1fr;gap:.85rem}
  .mb-thumb{width:100%;height:auto;aspect-ratio:320/200;max-height:170px;object-fit:cover}
}