:root{
  --brand:#1d4ed8; --brand-ink:#fff; --brand-soft:#eff4ff;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;
  --bg:#ffffff; --bg-2:#f6f8fb; --line:#e2e8f0;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px -16px rgba(15,23,42,.25);
  --gap:20px; --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic",system-ui,sans-serif;
  word-break:keep-all}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gap)}

/* ── 헤더 ─────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:18px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.logo .dot{width:24px;height:24px;border-radius:7px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800}
.hd nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.hd nav a{padding:8px 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2)}
.hd nav a:hover{background:var(--bg-2);color:var(--ink)}
.hd nav a.on{background:var(--brand-soft);color:var(--brand)}
@media(max-width:720px){
  /* 좁은 화면 헤더는 아래 '첫 화면에 업체가 보이게' 블록에서 한 줄로 정한다.
     여기서는 줄바꿈 금지만 남긴다 — 전에 있던 padding:10px 0 이
     .wrap 의 좌우 여백을 지워 메뉴가 화면 끝에 붙었다. */
  .hd nav a{white-space:nowrap}
}

/* ── 히어로 ───────────────────────────────────────── */
.hero{background:linear-gradient(170deg,#f8fafc,#eef4ff 60%,#fff);border-bottom:1px solid var(--line)}
.hero-in{padding-block:clamp(30px,5.5vw,72px) clamp(24px,4vw,54px);text-align:center}
.hero h1{margin:0 0 12px;font-size:clamp(24px,4.4vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.32}
.hero p{margin:0 auto;max-width:52ch;color:var(--ink-2);font-size:clamp(14px,2vw,16px)}
.hero .stat{margin-top:20px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.hero .stat b{display:block;font-size:clamp(20px,3.2vw,26px);font-weight:800;color:var(--brand)}
.hero .stat span{font-size:12.5px;color:var(--ink-3);font-weight:600}

/* ── 검색 ─────────────────────────────────────────── */
.search{margin:24px auto 0;max-width:620px;display:flex;gap:8px}
.search input{flex:1;min-width:0;height:52px;padding:0 18px;border:1px solid var(--line);
  border-radius:999px;font-size:15px;background:#fff;box-shadow:var(--shadow)}
.search input:focus{outline:2px solid color-mix(in srgb,var(--brand) 35%,transparent);outline-offset:1px;border-color:var(--brand)}
.search button{height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--brand);
  color:var(--brand-ink);font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
.search button:hover{filter:brightness(1.06)}

/* ── 섹션 ───────────────────────────────────────────
   ★ 세로 여백은 padding-block 으로만 준다. `padding: X 0` 로 쓰면
     <div class="wrap sec"> 처럼 .wrap 과 한 요소에 겹쳤을 때
     .wrap 의 좌우 padding 을 0 으로 덮어써 글자가 화면 끝에 붙는다
     (실측 390px 에서 좌우 여백 0 이었다). */
.sec{padding-block:clamp(30px,5vw,56px)}
.sec.alt{background:var(--bg-2)}
.sec-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.sec-hd h2{margin:0;font-size:clamp(18px,2.6vw,23px);font-weight:800;letter-spacing:-.02em}
.sec-hd .more{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--brand)}
.sec-hd p{margin:0;color:var(--ink-3);font-size:13.5px}

/* ── 칩 ───────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--line);
  border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--ink-2);
  transition:border-color .14s var(--ease),color .14s var(--ease),background .14s var(--ease)}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip .n{font-size:12px;font-weight:700;color:var(--ink-3)}
.chip.on .n,.chip:hover .n{color:inherit;opacity:.75}

/* ── 카드 ─────────────────────────────────────────── */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff;transition:transform .16s var(--ease),box-shadow .2s var(--ease),border-color .16s var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cbd5e1}
.card .ph{position:relative;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .ph .mark{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;font-weight:800;color:#fff}
.card .bd{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-size:13px;color:var(--ink-3);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.card .meta .sep{color:var(--line)}
.card .foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:8px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);font-size:11.5px;font-weight:700}
.badge.star{background:#fff7ed;color:#c2410c}

/* ── 목록 도구 ────────────────────────────────────── */
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.tools .cnt{font-size:14px;color:var(--ink-2)}
.tools .cnt b{color:var(--ink);font-weight:800}
.tools .sorts{margin-left:auto;display:flex;gap:6px}
.tools .sorts a{padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.tools .sorts a.on{background:var(--ink);color:#fff}
@media(max-width:640px){.tools .sorts{margin-left:0;width:100%;overflow-x:auto}}

.filters{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:22px;background:#fff}
.filters + .filters{margin-top:-10px}
.frow{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.frow + .frow{border-top:1px dashed var(--line)}
.frow > b{flex:0 0 62px;font-size:13px;font-weight:800;color:var(--ink-3);padding-top:9px}

/* ── 페이지 ───────────────────────────────────────── */
.pager{display:flex;gap:6px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;padding:0 12px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2)}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .on{background:var(--ink);border-color:var(--ink);color:#fff}
.pager .gap{border:0}

/* ── 상세 ─────────────────────────────────────────── */
.bh{padding-block:clamp(22px,4vw,44px) 0}
.crumb{font-size:13px;color:var(--ink-3);margin-bottom:14px;display:flex;gap:6px;flex-wrap:wrap}
.crumb a:hover{color:var(--brand)}
.bh-top{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.bh-mark{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;
  color:#fff;font-size:30px;font-weight:800;flex:0 0 auto}
.bh h1{margin:0 0 8px;font-size:clamp(22px,3.6vw,32px);font-weight:800;letter-spacing:-.02em}
.bh .sub{color:var(--ink-2);font-size:14.5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bh .acts{margin-top:18px;display:flex;gap:9px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;
  padding:0 20px;border-radius:999px;font-size:14.5px;font-weight:700;border:1px solid var(--line);background:#fff}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn:hover{filter:brightness(1.04)}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff}
.kv{display:grid;gap:0}
.kv div{display:flex;gap:14px;padding:11px 0;font-size:14.5px}
.kv div + div{border-top:1px solid var(--line)}
.kv b{flex:0 0 84px;color:var(--ink-3);font-weight:700;font-size:13.5px}
.cols{display:grid;gap:18px}
@media(min-width:900px){.cols{grid-template-columns:1.5fr 1fr;align-items:start}}
.shots{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.shots img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);background:var(--bg-2)}
.note{font-size:12px;color:var(--ink-3);margin-top:10px}

.empty{text-align:center;padding:60px 20px;color:var(--ink-3)}
.empty b{display:block;font-size:17px;color:var(--ink-2);margin-bottom:8px;font-weight:700}

/* ── 푸터 ─────────────────────────────────────────── */
.ft{margin-top:60px;border-top:1px solid var(--line);background:var(--bg-2);padding:34px 0;font-size:13.5px;color:var(--ink-3)}
.ft a{font-weight:600}
.ft a:hover{color:var(--brand)}
.ft-links{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}

/* 모바일에서 칩이 전부 줄바꿈되면 필터만으로 첫 화면이 다 찬다(서울은 25개 구가 나온다).
   줄바꿈을 끄고 옆으로 밀어 보게 한다 — 목록이 첫 화면에 들어온다. */
@media(max-width:720px){
  .frow{flex-direction:column;gap:7px}
  .frow > b{flex:none;padding:0}
  .frow .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .frow .chips::-webkit-scrollbar{display:none}
  .chips > .chip{flex:0 0 auto}
  .filters{padding:14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}

/* ── 모바일 실측으로 잡은 것 (390px, 2026-08-30) ─────────────────
   flex 자식은 min-width 가 auto(=min-content) 라 내용보다 좁아지지 않는다.
   .chips 에 overflow-x:auto 를 걸어도 컨테이너가 통째로 부풀어 페이지가 가로로 밀렸다
   (실측 문서폭: /region 3050px · 서울 목록 2422px · 전체 목록 1569px).
   min-width:0 한 줄이 처방이다. 그리드의 1fr 블로우아웃과 같은 병. */
.frow{min-width:0}
.frow > .chips,
.frow > div{min-width:0;max-width:100%}

/* 긴 상호("하나리더투어부설양평힐링센터")가 카드 밖으로 삐져나갔다.
   body 에 word-break:keep-all 이 걸려 있어 한글 긴 낱말이 안 쪼개진다. 제목에서만 푼다. */
.card h3{overflow-wrap:anywhere}
.bh h1{overflow-wrap:anywhere}

/* 터치 타겟 — 빵부스러기의 '홈'(11×21)과 '더 보기'(38×22)가 너무 작았다 */
.crumb a{display:inline-block;padding:5px 3px;margin:-5px -3px}
.sec-hd .more{display:inline-block;padding:9px 4px;margin:-9px -4px}
@media(max-width:720px){
  .hd nav a{padding:11px 12px}
  .tools .sorts a{padding:10px 13px}
}
.crumb a{padding:9px 7px;margin:-9px -7px}
.ft-links a{display:inline-block;padding:8px 6px;margin:-8px -6px}

/* ── 첫 화면에 업체가 보이게 (실측 390×844) ──────────────────────
   고치기 전: 헤더 104px(두 줄·sticky), 목록 첫 카드 y=727, 홈 첫 카드 y=1228.
   화면 하나를 다 지나야 업체가 나왔다. */
@media(max-width:720px){
  /* 헤더를 한 줄로. 상호가 길어 nav 가 아래로 밀렸다 — 좁을 때는 뒷말을 접는다. */
  /* padding:0 로 쓰면 .wrap 의 좌우 여백까지 지워져 메뉴가 화면 끝에 붙는다 */
  .hd-in{height:56px;padding-block:0;flex-wrap:nowrap;gap:12px}
  .logo{font-size:15.5px}
  .logo .lg-tail{display:none}
  .hd nav{margin-left:auto;width:auto;flex:1;justify-content:flex-end;
    overflow-x:auto;scrollbar-width:none}
  .hd nav::-webkit-scrollbar{display:none}
  .hd nav a{padding:9px 10px;font-size:13.5px}

  /* 홈의 업종·지역 칩도 한 줄로 민다. 줄바꿈이면 업종 5줄+지역 6줄이라
     지역 섹션조차 첫 화면 밖으로 나갔다. */
  .sec .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;min-width:0;max-width:100%;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sec .chips::-webkit-scrollbar{display:none}

  /* 필터 패널을 조금 눕힌다 */
  .frow{padding:7px 0}
  .chip{padding:8px 13px}
  .sec-hd{margin-bottom:14px}
}

/* 좁은 화면에서는 마지막 항목이 잘려 나가 스크롤한 것처럼 보였다 — 짧은 말로 바꾼다 */
.nv-short{display:none}
@media(max-width:720px){
  .nv-long{display:none}
  .nv-short{display:inline}
}

/* 상세 지면 좁은 화면 — 로고 판이 72px 를 먹고 본문 칸에 min-width:240px 이 걸려 있어
   제목과 버튼이 오른쪽 260px 안에 갇혔다(왼쪽 아래가 통째로 비었다). */
@media(max-width:720px){
  .bh-top{gap:14px}
  .bh-mark{width:52px;height:52px;border-radius:14px;font-size:23px}
  .bh-top > div{min-width:0}
  .bh .acts .btn{padding:0 15px;font-size:14px}
  .btn{min-height:44px}
  /* 사진 격자가 310px 에 딱 걸려 1열로 떨어졌다 */
  .shots{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .panel{padding:16px}
  .kv b{flex:0 0 66px}
}

/* .logo 는 flex 라 낱말마다 gap 이 붙는다 — 뒷말은 조금 흐리게 두어 브랜드와 설명을 구분한다 */
.logo .lg-tail{font-weight:600;color:var(--ink-2)}
.badge.open{background:#ecfdf5;color:#047857}