/* ══════════════════════════════════════════════════════════════════════
   채온홈타이 — 앱형 디렉토리 UI (2026-08-28 개편)
   ★사용자 참고 사이트: 꾹꾹(xn--wv0b.com) — Next.js 앱형 마사지 디렉토리.
     그 **레이아웃·정보구조**를 가져오되 색은 우리 브랜드(딥그린+브론즈)로 간다.
   ★가져오지 않은 것 — 우리 데이터에 없는 것을 지어내지 않는다:
     · 거리(0.3km)  : 위치정보 없음
     · 평점·리뷰    : 실제 후기 없음([[massagepower-no-fake-reviews]])
     · 할인율·취소선 : 요금표가 고정값이다([[client-price-table-standing]]) — 가짜 할인 금지
     대신 **해시태그 칩·업종 그리드·코스 블록**처럼 사실로 채울 수 있는 것만 가져왔다.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#14201C; --ink2:#3A4A44; --mute:#63736C; --line:#E6E2D8;
  --green:#1B3A32; --green-d:#122A24; --green-l:#2A5348;
  --bronze:#B48950; --bronze-l:#D0AE77; --bronze-t:#8A6534;
  --cream:#F7F4EC; --paper:#FFFFFF; --soft:#F4F2EB;
  --serif:'Nanum Myeongjo','Noto Serif KR',serif;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:15px;line-height:1.7;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.35}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--green);color:#fff;padding:9px 14px;z-index:99}

/* ── 헤더: 로고 + 내비 + 검색 ── */
.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hd-in{display:flex;align-items:center;gap:26px;height:72px}
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.logo-mk{width:32px;height:32px;border-radius:50%;background:var(--green);position:relative}
.logo-mk::before{content:'';position:absolute;left:8px;right:8px;top:11px;height:1.6px;
  background:var(--bronze-l);box-shadow:0 4px 0 var(--bronze-l),0 8px 0 rgba(208,174,119,.5)}
.logo-tx b{display:block;font-size:19px;letter-spacing:-.05em;font-weight:800}
.logo-tx em{display:block;font-style:normal;font-size:9px;letter-spacing:.22em;color:var(--bronze-t)}
.hd-nav{display:flex;gap:20px;font-size:15px;font-weight:700;color:var(--ink2)}
.hd-nav a{padding:5px 0;border-bottom:2px solid transparent}
.hd-nav a:hover{color:var(--green);border-bottom-color:var(--green)}
.hd-sch{margin-left:auto;position:relative;flex:1;max-width:380px}
.hd-sch input{width:100%;height:44px;border:1.6px solid var(--green);border-radius:999px;
  padding:0 50px 0 20px;font-size:14px;font-family:inherit;outline:none;background:#fff}
.hd-sch input::placeholder{color:#9AA8A2}
.hd-sch button{position:absolute;right:4px;top:4px;width:36px;height:36px;border:0;border-radius:50%;
  background:var(--green);color:#fff;cursor:pointer;font-size:15px}
.hd-tel{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end}
.hd-tel em{font-style:normal;font-size:10px;color:var(--mute)}
.hd-tel b{font-size:16px;color:var(--bronze-t);letter-spacing:-.02em}

/* ── 빵부스러기 ── */
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:14px;
  font-size:12px;color:var(--mute)}
.crumb b{color:var(--ink2);font-weight:600}

/* ── 히어로 배너 ── */
.hero{color:#fff;padding:74px 0 68px;position:relative;overflow:hidden;margin-top:14px;
  border-radius:var(--r);background:var(--green-d);isolation:isolate}
/* ★배경 사진 — 글자가 반드시 읽히도록 **두 겹**을 깐다:
     ① 브랜드 색 오버레이(딥그린) ② 좌→우 어두운 그라데이션.
     사진만 깔면 밝은 부분에서 흰 글자가 사라진다(윤슬 히어로에서 대비 1.41 사고를 냈다). */
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,26,22,.93) 0%,rgba(15,34,29,.86) 42%,rgba(20,45,38,.62) 100%),
             linear-gradient(to top,rgba(11,26,22,.55),transparent 60%)}
.hero::after{content:'';position:absolute;right:-70px;top:-50px;width:300px;height:300px;
  border:1px solid rgba(208,174,119,.30);border-radius:50%;z-index:-1}
.hero .eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.16em;color:var(--bronze-l);
  border:1px solid rgba(208,174,119,.5);padding:5px 13px;border-radius:999px;margin-bottom:16px}
.hero .rule{width:44px;height:2px;background:var(--bronze-l);margin:20px 0 0}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:36px;color:#fff;letter-spacing:-.045em;line-height:1.28;
  text-shadow:0 1px 12px rgba(0,0,0,.28)}
.hero p{margin:18px 0 0;font-size:15.5px;color:#DFE8E4;max-width:46ch;line-height:1.85;
  text-shadow:0 1px 8px rgba(0,0,0,.25)}
.hero-cta{display:inline-flex;align-items:baseline;gap:10px;margin-top:22px;background:var(--bronze);
  color:#14201C;padding:13px 22px;border-radius:999px;font-weight:800}
.hero-cta b{font-size:19px;letter-spacing:-.02em}
.hero-cta span{font-size:12px}
.hero-cta:hover{background:var(--bronze-l)}

/* ── 업종 그리드(꾹꾹의 카테고리 카드 자리) ── */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
.cat{position:relative;height:132px;border-radius:var(--r);overflow:hidden;display:block;
  background:var(--soft);border:1px solid var(--line)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease}
/* ★사진 위 글자는 반드시 어두운 그라데이션을 깔고 얹는다 — 사진 밝기에 따라 글자가 사라진다 */
.cat::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,22,18,.82) 0%,rgba(10,22,18,.30) 42%,rgba(10,22,18,0) 72%)}
.cat b{position:absolute;left:14px;bottom:12px;color:#fff;font-size:15.5px;font-weight:800;
  letter-spacing:-.03em;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.cat:hover img{transform:scale(1.06)}

/* ── 섹션 ── */
.sec{padding:38px 0}
.sec-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.sec-hd h2{font-size:21px}
.sec-hd .more{margin-left:auto;font-size:13px;color:var(--bronze-t);font-weight:700}
.sec-hd p{margin:0;color:var(--mute);font-size:13.5px}
.sec.alt{background:var(--cream)}

/* ── 업소 카드(꾹꾹 카드 구조: 헤더 / 위치 / 해시태그 / 요금) ── */
.shops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.shop{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:box-shadow .18s,transform .18s,border-color .18s;
  box-shadow:0 1px 2px rgba(20,32,28,.05)}
.shop:hover{border-color:var(--bronze-l);transform:translateY(-2px);
  box-shadow:0 12px 26px -14px rgba(20,32,28,.35)}
.shop-top{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.shop-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease}
.shop:hover .shop-top img{transform:scale(1.05)}
.shop-top em{position:absolute;left:10px;top:10px;font-style:normal;font-size:10.5px;font-weight:700;
  color:#14201C;background:rgba(255,255,255,.94);padding:4px 10px;border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.14);z-index:2}
.shop-b{padding:13px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.shop-b h3{font-size:14.5px;line-height:1.45}
.shop-loc{font-size:12px;color:var(--mute);display:flex;align-items:center;gap:5px}
.shop-tags{display:flex;flex-wrap:wrap;gap:5px}
.shop-tags span{font-size:11px;color:var(--green-l);background:var(--soft);
  border:1px solid var(--line);padding:2px 8px;border-radius:999px}
.shop-price{margin-top:auto;padding-top:9px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:6px}
.shop-price b{font-size:17px;font-weight:800;color:var(--green);letter-spacing:-.03em}
.shop-price em{font-style:normal;font-size:11px;color:var(--mute)}

/* ── 칩 ── */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips a{padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:13.5px;color:var(--ink2);font-weight:600}
.chips a:hover{border-color:var(--green);color:var(--green);background:var(--soft)}

/* ── 상세 ── */
.dt-top{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;padding-top:24px}
.dt-title{font-size:26px;letter-spacing:-.04em}
.dt-sub{margin:8px 0 0;font-size:13.5px;color:var(--mute)}
.dt-info{margin:22px 0 0;display:grid;grid-template-columns:96px 1fr;gap:11px 16px;font-size:14px}
.dt-info dt{color:var(--mute);font-size:13px}
.dt-info dd{margin:0;color:var(--ink2)}
.dt-info dd a{color:var(--bronze-t);font-weight:700}
.dt-card{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.dt-card h2{font-size:16px}
.dt-card .tel{display:block;margin-top:9px;font-size:25px;font-weight:800;color:var(--bronze-t);
  letter-spacing:-.03em}
.dt-card p{margin:8px 0 0;font-size:12.5px;color:var(--mute);line-height:1.75}

/* 코스 블록(꾹꾹의 A코스 형태) */
.course{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:12px}
.course-h{background:var(--soft);padding:11px 16px;font-weight:800;font-size:14.5px;
  border-bottom:1px solid var(--line)}
.course-r{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line)}
.course-r:last-child{border-bottom:0}
.course-r b{font-size:14.5px;min-width:52px}
.course-r span{font-size:12.5px;color:var(--mute);flex:1}
.course-r i{font-style:normal;font-size:16px;font-weight:800;color:var(--green);letter-spacing:-.03em}

/* 주요 테마 아이콘 */
.themes{display:flex;flex-wrap:wrap;gap:22px;margin-top:14px}
.theme{text-align:center;width:76px}
.theme span{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  margin:0 auto 7px;border-radius:50%;background:var(--soft);border:1px solid var(--line)}
.theme b{display:block;font-size:11.5px;font-weight:600;color:var(--ink2)}

/* ── 본문 ── */
.prose{max-width:74ch;font-size:15px;line-height:1.95;color:var(--ink2)}
.prose h2{font-size:19px;color:var(--ink);margin:30px 0 10px}
.prose ul{padding-left:18px}
.panel{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.panel h3{font-size:14.5px;color:var(--green);margin-bottom:8px}
.panel ul{margin:0;padding-left:17px;font-size:13.5px;color:var(--ink2);line-height:1.85}

/* ── 요금표 ── */
.price{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;font-size:14px}
.price th,.price td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:center}
.price thead th{background:var(--green);color:#fff;font-weight:700;font-size:13px}
.price tbody th{text-align:left;font-size:14.5px;font-weight:800}
.price tbody th small{display:block;font-size:11.5px;color:var(--mute);font-weight:400;margin-top:4px}
.price td b{font-weight:800;color:var(--green)}
.price tbody tr:last-child th,.price tbody tr:last-child td{border-bottom:0}
.price-note{margin:12px 0 0;font-size:12.5px;color:var(--mute)}

/* ── 푸터 ── */
.ft{background:var(--green-d);color:#B3C2BC;margin-top:48px;padding:38px 0 26px;font-size:13px}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px}
.ft-brand b{font-size:18px;color:#fff;display:block;font-weight:800}
.ft-brand p{margin:10px 0 0;line-height:1.8;max-width:40ch}
.ft-tel{display:block;margin-top:14px;font-size:21px;color:var(--bronze-l);font-weight:800}
.ft-tel span{display:block;font-size:11.5px;color:#8FA09A;margin-top:2px;font-weight:400}
.ft-col h3{font-size:12.5px;color:#fff;letter-spacing:.04em;margin-bottom:10px}
.ft-col a{display:block;padding:4px 0;color:#B3C2BC}
.ft-col a:hover{color:var(--bronze-l)}
.ft-note{margin:28px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px;line-height:1.85;color:#889892}
.ft-copy{margin:10px 0 0;font-size:11.5px;color:#788882}

/* ── 하단 탭바 ── */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;text-align:center;padding:12px 4px;font-size:12px;color:var(--ink2);font-weight:700}
.tabbar a.on{background:var(--bronze);color:#14201C}

/* ── 반응형 ── */
@media(max-width:1000px){ .cats{grid-template-columns:repeat(3,1fr)} .shops{grid-template-columns:repeat(3,1fr)}
  .dt-top{grid-template-columns:1fr} .ft-top{grid-template-columns:1fr 1fr} }
@media(max-width:820px){
  .hd-nav{display:none} .hd-in{height:62px;gap:12px} .hd-tel{display:none}
  .hero{padding:46px 0 42px} .hero h1{font-size:26px} .hero p{font-size:14.5px}
  .hero .eyebrow{font-size:10.5px;margin-bottom:12px}
  .cats{grid-template-columns:repeat(2,1fr);gap:9px} .cat{height:96px}
  .shops{grid-template-columns:repeat(2,1fr);gap:10px}
  .sec{padding:30px 0} .tabbar{display:flex} body{padding-bottom:54px} .ft{margin-bottom:54px}
}
@media(max-width:560px){
  .ft-top{grid-template-columns:1fr;gap:22px} .dt-info{grid-template-columns:82px 1fr}
  .price th,.price td{padding:10px 6px;font-size:12.5px}
  .shop-b h3{font-size:13.5px} .dt-title{font-size:21px}
}

/* ── 상세 상단 사진 ── */
.dt-photo{position:relative;aspect-ratio:16/7;border-radius:var(--r);overflow:hidden;
  margin-top:16px;background:var(--soft)}
.dt-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dt-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,22,18,.55),transparent 55%)}
.dt-photo span{position:absolute;left:16px;bottom:13px;z-index:2;color:#fff;font-size:12px;
  background:rgba(20,32,28,.55);padding:5px 11px;border-radius:999px;backdrop-filter:blur(3px)}
@media(max-width:560px){ .dt-photo{aspect-ratio:16/9} }

/* ══════════════════════════════════════════════════════════════════════
   업소 상세 — 모바일 하단 전화 고정바 (사용자 지시 2026-08-28)
   ★일반 탭바를 **대체**한다. 두 개를 겹쳐 두면 화면 아래가 100px 넘게 잡아먹힌다.
   ★데스크톱에서는 안 띄운다 — 우측 카드에 이미 큰 번호가 있고, 마우스로 전화를 걸지 않는다.
   ══════════════════════════════════════════════════════════════════════ */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -6px 20px -14px rgba(20,32,28,.55);
  padding-bottom:env(safe-area-inset-bottom)}
.callbar-in{display:flex;align-items:center;gap:12px;padding:10px 16px}
.callbar-tx{display:flex;flex-direction:column;min-width:0}
.callbar-tx b{font-size:17px;font-weight:800;color:var(--bronze-t);letter-spacing:-.03em;
  white-space:nowrap}
.callbar-tx em{font-style:normal;font-size:11px;color:var(--mute);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.callbar-btn{margin-left:auto;flex:0 0 auto;background:var(--green);color:#fff;font-weight:800;
  font-size:15px;padding:13px 26px;border-radius:999px;letter-spacing:-.02em}
.callbar-btn:active{background:var(--green-d)}

@media(max-width:820px){
  .callbar{display:block}
  /* ★고정바가 본문 마지막 줄을 가린다 — 그만큼 아래 여백을 준다 */
  body:has(.callbar){padding-bottom:72px}
  body:has(.callbar) .ft{margin-bottom:72px}
}
/* :has 미지원 브라우저 대비 — 상세는 어차피 탭바가 없으므로 기본 여백을 준다 */
@supports not selector(:has(*)){
  @media(max-width:820px){ .callbar ~ *{margin-bottom:0} body{padding-bottom:72px} }
}