/* ─────────────────────────────────────────────────────────────
   skin01 v2 — 반응형 통합 스킨 (2026-08-28)
   · 구 skin01 은 .home-top{min-width:1920px}, .menu-section{width:1080px} 처럼
     고정폭이 17곳 있어 모바일에서 가로 스크롤이 발생했다. v2 는 고정폭을 쓰지 않는다.
   · PC/모바일 분리(/m/)를 없애고 한 벌로 통합한다.
   · 업체가 고른 메인컬러는 --brand 로 주입된다.
   ───────────────────────────────────────────────────────────── */

:root{
  --brand:#111827;              /* 업체 메인컬러로 덮어씀 */
  --brand-contrast:#ffffff;
  --ink:#111827;
  --ink-2:#4b5563;
  --ink-3:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;
  --bg-2:#f8fafc;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --header-h:64px;
  --container:1120px;
  --gap:clamp(16px, 4vw, 32px);
}
@media (min-width:1024px){ :root{ --header-h:76px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.7; word-break:keep-all;
  overflow-wrap:anywhere;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gap); }

/* ── 헤더 ───────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line); z-index:100;
}
.site-header .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; font-weight:800; font-size:clamp(17px,2.4vw,21px); color:var(--brand); }
.brand img{ max-height:calc(var(--header-h) - 26px); width:auto; }
.brand-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; cursor:pointer; flex:0 0 auto;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{ content:''; position:absolute; left:0; width:18px; height:2px; background:var(--ink); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

.site-nav{ display:none; }
.site-nav a{ padding:10px 2px; font-size:15px; font-weight:600; color:var(--ink-2); white-space:nowrap; border-bottom:2px solid transparent; }
.site-nav a:hover{ color:var(--brand); }
.site-nav a[aria-current="page"]{ color:var(--brand); border-bottom-color:var(--brand); }

/* 모바일 드로어 — 화면 밖 fixed 로 가로 스크롤이 생기지 않도록 visibility 로 감춘다 */
.nav-drawer{
  position:fixed; inset:var(--header-h) 0 auto 0; background:#fff;
  border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  display:grid; z-index:99;
  visibility:hidden; opacity:0; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-drawer.is-open{ visibility:visible; opacity:1; transform:none; }
.nav-drawer a{ padding:15px var(--gap); font-weight:600; border-top:1px solid var(--line); }
.nav-drawer a:first-child{ border-top:0; }

@media (min-width:900px){
  .nav-toggle,.nav-drawer{ display:none; }
  .site-nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); }
}

/* ── 히어로 ─────────────────────────────────────────────── */
.hero{
  position:relative; margin-top:var(--header-h);
  min-height:clamp(380px, 62vh, 620px);
  display:grid; place-items:center; text-align:center;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  color:#fff; padding:56px var(--gap);
}
.hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.55)); }
.hero-inner{ position:relative; z-index:1; max-width:760px; }
.hero h1{ margin:0 0 14px; font-size:clamp(26px,5.2vw,44px); font-weight:800; line-height:1.3; letter-spacing:-.02em; }
.hero p{ margin:0; font-size:clamp(15px,2.3vw,19px); line-height:1.75; opacity:.95; }
.hero-actions{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px; border-radius:999px; font-weight:700; font-size:15px;
  border:1px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-brand{ background:var(--brand); color:var(--brand-contrast); }
.btn-ghost{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(2px); }
.btn-line{ background:#fff; color:var(--ink); border-color:var(--line); }

/* ── 섹션 공통 ──────────────────────────────────────────── */
.section{ padding:clamp(48px,8vw,88px) 0; }
.section-alt{ background:var(--bg-2); }
.section-head{ text-align:center; margin-bottom:clamp(26px,4vw,44px); }
.section-head h2{ margin:0 0 8px; font-size:clamp(22px,3.4vw,32px); font-weight:800; letter-spacing:-.02em; }
.section-head p{ margin:0; color:var(--ink-3); font-size:15px; }

/* ── 메뉴/상품 그리드 ───────────────────────────────────── */
.menu-grid{ display:grid; gap:clamp(14px,2.4vw,26px); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:700px){ .menu-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .menu-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.menu-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.menu-card .thumb{ aspect-ratio:4/3; background:var(--bg-2) center/cover no-repeat; }
.menu-card .body{ padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.menu-card .name{ font-weight:700; font-size:15px; line-height:1.45; }
.menu-card .desc{ font-size:13.5px; color:var(--ink-3); line-height:1.6; }
.menu-card .price{ margin-top:auto; font-weight:800; color:var(--brand); font-size:15px; }
.menu-tag{ display:inline-block; align-self:flex-start; padding:2px 9px; border-radius:999px; background:var(--bg-2); color:var(--ink-3); font-size:12px; font-weight:600; }

/* ── 소개 + 정보카드 ────────────────────────────────────── */
.about{ position:relative; background-size:cover; background-position:center; color:#fff; }
.about::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.55); }
.about > .container{ position:relative; z-index:1; }
.about-grid{ display:grid; gap:clamp(24px,4vw,48px); }
@media (min-width:900px){ .about-grid{ grid-template-columns:1.1fr .9fr; align-items:start; } }
.about h2{ font-size:clamp(22px,3.4vw,32px); font-weight:800; margin:0 0 14px; }
.about-text{ font-size:15.5px; line-height:1.85; opacity:.95; }

.info-cards{ display:grid; gap:12px; }
@media (min-width:560px){ .info-cards{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } }
.info-card{ background:rgba(255,255,255,.97); color:var(--ink); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.info-card h3{ margin:0 0 10px; font-size:14px; font-weight:800; color:var(--brand); letter-spacing:.02em; }
.info-card .val{ font-size:15px; line-height:1.7; color:var(--ink-2); }
.info-card .val a{ color:inherit; }
.info-card .act{ margin-top:12px; }
.info-card .act .btn{ width:100%; min-height:44px; font-size:14px; }

/* ── 갤러리 ─────────────────────────────────────────────── */
.gallery-grid{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:700px){ .gallery-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } }
@media (min-width:1024px){ .gallery-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.gallery-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-sm); background:var(--bg-2); }

/* ── 공지 ───────────────────────────────────────────────── */
.notice-list{ display:grid; gap:10px; max-width:820px; margin-inline:auto; }
.notice-item{ display:flex; gap:14px; align-items:baseline; justify-content:space-between;
  padding:15px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); }
.notice-item .t{ font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notice-item .d{ color:var(--ink-3); font-size:13px; white-space:nowrap; flex:0 0 auto; }

/* ── 푸터 ───────────────────────────────────────────────── */
.site-footer{ background:#0f172a; color:#94a3b8; padding:clamp(38px,6vw,56px) 0 clamp(26px,4vw,36px); margin-top:auto; }
.site-footer a{ color:#cbd5e1; }
.site-footer h3{ margin:0 0 14px; font-size:12.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#64748b; }

.ft-grid{ display:grid; gap:clamp(28px,4vw,44px); }
@media (min-width:760px){ .ft-grid{ grid-template-columns:1.1fr .9fr 1.1fr; } }

.ft-name{ color:#fff; font-weight:800; font-size:19px; letter-spacing:-.02em; }
.ft-sub{ margin-top:5px; font-size:13px; color:#64748b; letter-spacing:.02em; }
.site-footer .biz-state{ margin:14px 0 0 !important; background:rgba(255,255,255,.07); }
.site-footer .biz-state.is-open{ background:rgba(34,197,94,.16); color:#86efac; }
.site-footer .biz-state.is-closed{ background:rgba(148,163,184,.14); color:#cbd5e1; }
.ft-sns{ display:flex; gap:8px; margin-top:16px; }
.ft-sns a{ width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); font-size:16px;
  transition:background .15s ease, transform .12s ease; }
.ft-sns a:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }

.ft-links{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
.ft-links a{ font-size:14.5px; transition:color .15s ease; }
.ft-links a:hover{ color:#fff; }

.ft-tel{ display:inline-block; color:#fff !important; font-size:19px; font-weight:800; letter-spacing:-.01em; }
.ft-addr{ margin:10px 0 0; font-size:14px; line-height:1.75; }
.ft-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ft-actions .btn{ min-height:40px; padding:0 16px; font-size:13.5px;
  background:transparent; color:#e2e8f0; border-color:rgba(255,255,255,.22); }
.ft-actions .btn:hover{ border-color:#fff; color:#fff; }

.ft-bottom{ margin-top:clamp(28px,4vw,40px); padding-top:18px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  font-size:12.5px; color:#64748b; }
.ft-top{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  color:#cbd5e1; padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:background .15s ease; }
.ft-top:hover{ background:rgba(255,255,255,.14); color:#fff; }

/* 하단 고정 액션 바 (모바일) — 전화/예약 도달률 */
.action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:98;
  display:grid; grid-auto-flow:column; gap:8px;
  padding:10px var(--gap) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); border-top:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.action-bar .btn{ min-height:46px; font-size:15px; }
body.has-action-bar{ padding-bottom:82px; }
@media (min-width:900px){ .action-bar{ display:none; } body.has-action-bar{ padding-bottom:0; } }

/* ── 업종 프리셋 ────────────────────────────────────────── */
body[data-preset="food"]   { --radius:12px; }
body[data-preset="food"]   .menu-card .thumb{ aspect-ratio:1/1; }
body[data-preset="beauty"] { --radius:18px; --radius-sm:14px; }
body[data-preset="beauty"] .hero h1{ font-weight:700; letter-spacing:.01em; }
body[data-preset="beauty"] .menu-card{ text-align:center; }
body[data-preset="beauty"] .menu-card .body{ align-items:center; }
body[data-preset="fitness"]{ --radius:10px; }
body[data-preset="fitness"] .section-head h2{ letter-spacing:-.03em; }
body[data-preset="stay"]   { --radius:16px; }
body[data-preset="stay"]   .menu-card .thumb{ aspect-ratio:16/10; }
body[data-preset="stay"]   .menu-grid{ grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:700px){ body[data-preset="stay"] .menu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ── 오시는 길 ──────────────────────────────────────────── */
.loc-map{
  width:100%; height:clamp(280px, 42vw, 420px);
  border-radius:var(--radius); overflow:hidden; background:var(--bg-2);
  border:1px solid var(--line);
}
.loc-map iframe{ width:100%; height:100%; border:0; display:block; }
.loc-info{ margin-top:18px; display:grid; gap:14px; }
@media (min-width:900px){ .loc-info{ grid-template-columns:1fr auto; align-items:center; } }
.loc-addr strong{ display:block; font-size:16px; font-weight:700; }
.loc-memo{ display:block; margin-top:4px; color:var(--ink-3); font-size:14px; }
.loc-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.loc-actions .btn{ min-height:44px; font-size:14px; padding:0 16px; }

/* ── 블로그 후기 ────────────────────────────────────────── */
.review-grid{ display:grid; gap:12px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:640px){ .review-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .review-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } }
.review-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.review-card:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow); }
.review-thumb{ aspect-ratio:16/10; background:var(--bg-2); overflow:hidden; }
.review-thumb img{ width:100%; height:100%; object-fit:cover; }
.review-body{ display:flex; flex-direction:column; gap:7px; padding:14px; flex:1; }
.review-card.no-thumb .review-body{ padding:16px; }
.review-card.no-thumb .review-body::before{
  content:'“'; font-size:34px; line-height:.7; color:var(--brand); opacity:.35; font-weight:800;
}
.review-title{ font-weight:700; font-size:15px; line-height:1.45; }
.review-desc{ font-size:13.5px; color:var(--ink-3); line-height:1.6; flex:1;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.review-meta{ display:flex; gap:10px; font-size:12.5px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:8px; }
.review-meta span:last-child{ margin-left:auto; }
.review-more{ margin-top:22px; text-align:center; }

/* ── 매장 정보 시트 (라벨/값 2열) ────────────────────────── */
.factsheet{ margin-top:20px; border-top:1px solid var(--line); background:#fff;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.fs-row{ display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--line); }
.fs-row:last-child{ border-bottom:0; }
@media (min-width:640px){ .fs-row{ grid-template-columns:150px minmax(0,1fr); } }
.fs-key{ display:flex; align-items:center; gap:8px; padding:14px 16px;
  background:var(--bg-2); font-size:14px; font-weight:700; color:var(--ink-2); }
@media (min-width:640px){ .fs-key{ border-right:1px solid var(--line); } }
.fs-val{ padding:14px 16px; font-size:14.5px; line-height:1.75; color:var(--ink-2); }
.fs-val a{ color:inherit; font-weight:600; }
.fs-memo{ display:block; margin-top:2px; font-size:13px; color:var(--ink-3); }
.fs-sub{ display:block; font-size:14px; color:var(--ink-3); }

/* 영업시간 표 */
.hours{ width:100%; border-collapse:collapse; margin-top:4px; }
.hours th{ text-align:left; font-weight:600; color:var(--ink-3); font-size:14px;
  padding:3px 12px 3px 0; white-space:nowrap; vertical-align:top; width:78px; }
.hours td{ padding:3px 0; font-size:14.5px; }
.hours tr.is-today th{ color:var(--brand); font-weight:800; }
.hours tr.is-today td{ font-weight:700; color:var(--ink); }
.today-tag{ margin-left:6px; padding:1px 7px; border-radius:999px;
  background:var(--brand); color:var(--brand-contrast); font-size:11px; font-weight:700; vertical-align:1px; }

/* 칩 (편의시설·SNS) */
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chips span, .chips a{ padding:4px 11px; border-radius:999px; background:var(--bg-2);
  border:1px solid var(--line); font-size:13px; color:var(--ink-2); }
.chips a{ font-weight:600; text-decoration:none; }
.chips a:hover{ border-color:var(--brand); color:var(--brand); }

/* ── 갤러리 라이트박스 ───────────────────────────────────── */
[data-lb]{ cursor:zoom-in; }
.lb{ position:fixed; inset:0; z-index:200; background:rgba(15,23,42,.92);
  display:grid; place-items:center; padding:clamp(16px,4vw,48px); }
.lb[hidden]{ display:none; }
.lb-img{ max-width:100%; max-height:82vh; width:auto; height:auto; object-fit:contain;
  border-radius:8px; background:#0f172a; }
.lb button{ position:absolute; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28);
  width:46px; height:46px; border-radius:999px; font-size:24px; line-height:1; cursor:pointer; }
.lb button:hover{ background:rgba(255,255,255,.22); }
.lb-close{ top:16px; right:16px; }
.lb-prev{ left:12px; top:50%; transform:translateY(-50%); }
.lb-next{ right:12px; top:50%; transform:translateY(-50%); }
/* 사진 출처를 아래에 깔기 때문에 장수 표시는 위로 올린다 */
.lb-count{ position:absolute; top:22px; left:50%; transform:translateX(-50%);
  color:#e2e8f0; font-size:13.5px; letter-spacing:.02em; }
@media (max-width:640px){ .lb-prev{ left:6px; } .lb-next{ right:6px; } }

/* ── 영업 상태 ──────────────────────────────────────────── */
.biz-state{ display:inline-flex; align-items:center; gap:7px; margin:0 0 8px !important;
  padding:5px 12px; border-radius:999px; font-size:13.5px; font-weight:700; }
.biz-state .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.biz-state.is-open{ background:#dcfce7; color:#15803d; }
.biz-state.is-open .dot{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.22); }
.biz-state.is-closed{ background:#f1f5f9; color:#64748b; }
.biz-state.is-closed .dot{ background:#94a3b8; }
.biz-detail{ font-weight:500; opacity:.85; }

/* 오늘 영업시간 강조 */
.hour-row.is-today{ font-weight:700; color:var(--ink); }
.hour-row.is-today .hour-day{ color:var(--brand); }
.hour-row.is-today::after{ content:'오늘'; margin-left:7px; padding:1px 7px; border-radius:999px;
  background:var(--brand); color:var(--brand-contrast); font-size:11.5px; font-weight:700; vertical-align:1px; }

/* 히어로 배지 묶음 */
.hero-badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:14px; }
.hero-badge{ display:inline-flex; align-items:center; gap:7px; margin:0; }
.hero-badge.state .dot{ width:7px; height:7px; border-radius:50%; }
.hero-badge.state.is-open{ background:rgba(34,197,94,.22); border-color:rgba(134,239,172,.7); }
.hero-badge.state.is-open .dot{ background:#4ade80; }
.hero-badge.state.is-closed{ background:rgba(148,163,184,.22); border-color:rgba(203,213,225,.5); }
.hero-badge.state.is-closed .dot{ background:#cbd5e1; }

/* 개수 배지 */
.count-badge{ display:inline-block; margin-left:6px; padding:2px 10px; border-radius:999px;
  background:var(--brand); color:var(--brand-contrast); font-size:14px; font-weight:800; vertical-align:2px; }

/* ── 메인 오시는 길 요약 ────────────────────────────────── */
.loc-summary{ display:grid; gap:18px; align-items:center; }
@media (min-width:820px){ .loc-summary{ grid-template-columns:1fr auto; } }
.ls-label{ display:inline-block; font-size:13px; font-weight:800; color:var(--brand); letter-spacing:.02em; }
.ls-addr{ margin:6px 0 10px; font-size:clamp(16px,2.2vw,19px); font-weight:700; line-height:1.6; }
.ls-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* 후기가 1~2건일 때 4열 그리드에 덩그러니 놓이지 않도록 레이아웃을 바꾼다 */
.review-grid[data-count="1"]{ grid-template-columns:minmax(0,1fr); max-width:720px; margin-inline:auto; }
.review-grid[data-count="1"] .review-card{ flex-direction:row; }
.review-grid[data-count="1"] .review-thumb{ flex:0 0 42%; aspect-ratio:auto; min-height:170px; }
.review-grid[data-count="1"] .review-body{ padding:18px 20px; }
.review-grid[data-count="1"] .review-title{ font-size:16.5px; }
.review-grid[data-count="1"] .review-desc{ -webkit-line-clamp:3; }
@media (max-width:560px){
  .review-grid[data-count="1"] .review-card{ flex-direction:column; }
  .review-grid[data-count="1"] .review-thumb{ flex:none; aspect-ratio:16/10; min-height:0; }
}
.review-grid[data-count="2"]{ max-width:840px; margin-inline:auto; }
@media (min-width:1024px){ .review-grid[data-count="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.review-grid[data-count="3"]{ max-width:1000px; margin-inline:auto; }
@media (min-width:1024px){ .review-grid[data-count="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* 카드 박스 — 요약 블록이 배경 위에 그냥 놓이지 않게 */
.card-box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,3.4vw,30px); box-shadow:var(--shadow); }

/* ── 방문자 평가 (카카오맵) ─────────────────────────────── */
.rate-box{ display:grid; gap:clamp(20px,3vw,32px); }
@media (min-width:820px){ .rate-box{ grid-template-columns:minmax(0,240px) minmax(0,1fr); align-items:start; } }
.rate-score{ text-align:center; }
@media (min-width:820px){ .rate-score{ border-right:1px solid var(--line); padding-right:28px; } }
.rate-num{ font-size:clamp(38px,6vw,52px); font-weight:800; line-height:1.1; color:var(--brand); }
.rate-stars{ margin:6px 0 8px; font-size:19px; letter-spacing:2px; color:var(--line); }
.rate-stars .star.is-on{ color:#f59e0b; }
.rate-stars .star.is-half{ background:linear-gradient(90deg,#f59e0b 50%,var(--line) 50%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.rate-meta{ font-size:13.5px; color:var(--ink-3); margin-bottom:14px; }
.rate-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.rate-list li{ padding-bottom:14px; border-bottom:1px solid var(--line); }
.rate-list li:last-child{ border-bottom:0; padding-bottom:0; }
.rl-head{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-3); margin-bottom:5px; }
.rl-star{ color:#f59e0b; letter-spacing:1px; }
.rl-who{ font-weight:700; color:var(--ink-2); }
.rl-date{ margin-left:auto; }
.rl-text{ margin:0; font-size:14.5px; line-height:1.7; color:var(--ink-2); }

/* ── 예약·문의 2단 레이아웃 ─────────────────────────────── */
.contact-layout{ display:grid; gap:clamp(20px,3vw,32px); }
@media (min-width:900px){ .contact-layout{ grid-template-columns:minmax(0,320px) minmax(0,1fr); align-items:start; } }
.contact-aside .card-box{ padding:clamp(20px,3vw,26px); }
.ca-name{ font-size:19px; font-weight:800; margin-bottom:10px; }
.ca-list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.ca-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); line-height:1.6; }
.ca-list li span{ flex:0 0 auto; }
.ca-list a{ color:inherit; font-weight:600; }
.ca-actions{ margin-top:18px; display:grid; gap:8px; }
.ca-actions .btn{ width:100%; }
.steps{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.steps li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-3); }
.steps b{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--brand);
  color:var(--brand-contrast); font-size:12.5px; display:grid; place-items:center; }
.contact-form{ padding:clamp(22px,3.4vw,32px); }
.field > label em{ font-style:normal; margin-left:5px; padding:1px 7px; border-radius:999px;
  background:#fef2f2; color:#b91c1c; font-size:11.5px; font-weight:700; vertical-align:1px; }

/* ── 공지 게시판 ────────────────────────────────────────── */
.board{ max-width:900px; margin-inline:auto; border-top:2px solid var(--ink); }
.board-head{ display:grid; grid-template-columns:76px 1fr 116px; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line);
  font-size:13.5px; font-weight:700; color:var(--ink-2); text-align:center; background:var(--bg-2); }
.bh-title{ text-align:left; }
.board-row{ display:grid; grid-template-columns:76px 1fr 116px; gap:10px; align-items:center;
  padding:16px 14px; border-bottom:1px solid var(--line); transition:background .12s ease; }
.board-row:hover{ background:var(--bg-2); }
.br-no{ text-align:center; font-size:13.5px; color:var(--ink-3); }
.br-title{ font-size:15.5px; font-weight:600; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-row:hover .br-title{ color:var(--brand); }
.br-date{ text-align:center; font-size:13px; color:var(--ink-3); white-space:nowrap; }
@media (max-width:640px){
  .board-head{ display:none; }
  .board-row{ grid-template-columns:1fr; gap:5px; padding:15px 4px; }
  .br-no{ display:none; }
  .br-title{ white-space:normal; }
  .br-date{ text-align:left; }
}

/* 빈 상태 */
.empty-card{ max-width:560px; margin-inline:auto; text-align:center; padding:clamp(30px,5vw,46px); }
.ec-ico{ font-size:40px; line-height:1; margin-bottom:12px; }
.empty-card h2{ margin:0 0 8px; font-size:18px; font-weight:800; }
.empty-card p{ margin:0; color:var(--ink-3); font-size:14.5px; line-height:1.8; }

/* ── 하위 페이지 공통 ────────────────────────────────────── */
.page-head{ margin-top:var(--header-h); padding:clamp(32px,6vw,60px) 0 clamp(20px,3vw,28px);
  background:var(--bg-2); border-bottom:1px solid var(--line); text-align:center; }
.page-head h1{ margin:0; font-size:clamp(24px,4vw,36px); font-weight:800; letter-spacing:-.02em; }
.page-head p{ margin:8px 0 0; color:var(--ink-3); font-size:15px; }
.page-badge{ display:inline-block; margin-bottom:10px; padding:5px 13px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--brand); }
.empty-note{ text-align:center; color:var(--ink-3); padding:48px 0; }
.about-more{ margin-top:clamp(22px,3vw,32px); text-align:center; }

/* 탭 */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:clamp(24px,4vw,36px); }
.tab{ padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:14.5px; font-weight:600; color:var(--ink-2); cursor:pointer; }
.tab.is-active{ background:var(--brand); color:var(--brand-contrast); border-color:var(--brand); }
.tab-panel{ display:none; } .tab-panel.is-active{ display:block; }

/* 가격 리스트형 메뉴 */
.price-list{ max-width:760px; margin-inline:auto; display:grid; gap:2px; }
.price-row{ display:flex; align-items:baseline; gap:10px; padding:14px 4px; border-bottom:1px dashed var(--line); }
.price-name{ font-weight:600; font-size:15.5px; }
.price-desc{ display:block; font-weight:400; font-size:13.5px; color:var(--ink-3); margin-top:3px; }
.price-dots{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-4px); min-width:20px; }
.price-value{ font-weight:800; color:var(--brand); white-space:nowrap; }

/* 메뉴판 사진형 */
.board-shots{ display:grid; gap:16px; max-width:900px; margin-inline:auto; }
.board-shots img{ width:100%; border-radius:var(--radius); border:1px solid var(--line); }

/* 페이지네이션 */
.pager{ display:flex; gap:6px; justify-content:center; margin-top:clamp(26px,4vw,40px); flex-wrap:wrap; }
.pager a{ min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:var(--ink-2); }
.pager a.is-current{ background:var(--brand); color:var(--brand-contrast); border-color:var(--brand); }

/* 업체소개 */
.intro-wrap{ display:grid; gap:clamp(22px,4vw,40px); }
@media (min-width:900px){ .intro-wrap{ grid-template-columns:minmax(0,420px) minmax(0,1fr); align-items:start; } }
.intro-photo{ max-width:420px; margin-inline:auto; }
.intro-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-2); }
.intro-body h2{ margin:0 0 14px; font-size:clamp(20px,3vw,28px); font-weight:800; }
.intro-text{ font-size:15.5px; line-height:1.9; color:var(--ink-2); }
.intro-actions{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }

/* 게시글 */
.post{ max-width:820px; margin-inline:auto; }
.post-title{ margin:0 0 10px; font-size:clamp(19px,2.6vw,25px); font-weight:800; line-height:1.4; }
.post-meta{ display:flex; gap:12px; font-size:13.5px; color:var(--ink-3); padding-bottom:16px; border-bottom:1px solid var(--line); }
.post-body{ padding:22px 0; font-size:15.5px; line-height:1.9; color:var(--ink-2); }
.post-actions{ margin-top:22px; text-align:center; }

/* 폼 */
.form-narrow{ max-width:620px; }
.field{ margin-bottom:18px; }
.field > label{ display:block; margin-bottom:7px; font-size:14px; font-weight:700; }
.field input[type=text],.field input[type=tel],.field input[type=number],
.field input[type=datetime-local],.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:15px; background:#fff; color:var(--ink); }
.field input:focus,.field textarea:focus{ outline:2px solid var(--brand); outline-offset:1px; border-color:transparent; }
.field input[readonly]{ background:var(--bg-2); color:var(--ink-3); }
.field-row{ display:flex; gap:8px; } .field-row input{ flex:1; min-width:0; }
.field-row .btn{ flex:0 0 auto; min-height:46px; font-size:14px; }
.field-grid{ display:grid; gap:18px; } @media (min-width:560px){ .field-grid{ grid-template-columns:1fr 1fr; } }
.msg{ margin:6px 0 0; font-size:13px; color:var(--ink-3); }
.msg.is-ok{ color:#15803d; } .msg.is-err{ color:#b91c1c; }
.hint{ margin:-8px 0 18px; font-size:13px; color:var(--ink-3); }
.agree-box{ max-height:150px; overflow-y:auto; padding:14px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--bg-2); font-size:13.5px; line-height:1.8; color:var(--ink-2); }
.check{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:14.5px; cursor:pointer; }
.btn-block{ width:100%; margin-top:8px; }

/* 마무리 안내 밴드 */
.cta-band{ display:grid; gap:18px; padding:clamp(24px,4vw,36px);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); text-align:center; }
@media (min-width:820px){ .cta-band{ grid-template-columns:1fr auto; align-items:center; text-align:left; } }
.cta-band h2{ margin:0 0 6px; font-size:clamp(19px,2.6vw,24px); font-weight:800; }
.cta-band p{ margin:0; color:var(--ink-3); font-size:14.5px; }
.cta-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* 자동 점검에서 미정의로 잡힌 보조 클래스 명시 */
.ls-main{ min-width:0; }
.board-head .bh-no, .board-head .bh-date{ text-align:center; }
.form{ margin:0; }

/* ═══════════════════════════════════════════════════════════
   디자인 업그레이드 (2026-08-29)
   · 기존 규칙을 덮어쓰는 방식으로 덧붙인다(구간 삭제 금지)
   ═══════════════════════════════════════════════════════════ */

:root{
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.10);
  --shadow-lg:0 2px 6px rgba(16,24,40,.06), 0 18px 40px -12px rgba(16,24,40,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── 타이포 정교화 ──────────────────────────────────────── */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.005em; }
h1,h2,h3{ letter-spacing:-.025em; }

/* ── 섹션 리듬 ──────────────────────────────────────────── */
.section{ padding:clamp(52px,9vw,96px) 0; }
.section-head{ margin-bottom:clamp(28px,4.5vw,48px); }
.section-head h2{ font-size:clamp(23px,3.6vw,34px); line-height:1.3; }
.eyebrow{ display:block; margin-bottom:10px; font-size:12.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand); opacity:.85; }

/* ── 히어로 ─────────────────────────────────────────────── */
.hero{ min-height:clamp(440px, 72vh, 680px); }
.hero::after{
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.62) 100%);
}
.hero-inner{ animation:heroUp .7s var(--ease) both; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hero h1{ font-size:clamp(28px,6vw,50px); text-shadow:0 2px 20px rgba(0,0,0,.35); }
.hero p{ text-shadow:0 1px 12px rgba(0,0,0,.3); max-width:44ch; margin-inline:auto; }
.hero-badges{ margin-bottom:16px; }
.hero-badge{ padding:7px 15px; font-size:12.5px; letter-spacing:.01em;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(6px); }

/* 스크롤 유도 */
.hero-scroll{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:1; width:26px; height:42px; border:2px solid rgba(255,255,255,.55); border-radius:14px; }
.hero-scroll::after{ content:''; position:absolute; left:50%; top:8px; width:3px; height:7px;
  margin-left:-1.5px; background:rgba(255,255,255,.9); border-radius:2px;
  animation:scrollDot 1.7s var(--ease) infinite; }
@keyframes scrollDot{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 70%{opacity:0;transform:translateY(12px)} 100%{opacity:0} }
@media (max-width:640px){ .hero-scroll{ display:none; } }

/* ── 버튼 ───────────────────────────────────────────────── */
.btn{ transition:transform .14s var(--ease), box-shadow .18s var(--ease), background .15s var(--ease); }
.btn-brand{ box-shadow:0 6px 16px -6px color-mix(in srgb, var(--brand) 55%, transparent); }
.btn-brand:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -8px color-mix(in srgb, var(--brand) 60%, transparent); }
.btn-line:hover{ border-color:var(--brand); color:var(--brand); }
.btn:focus-visible{ outline:3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset:2px; }

/* ── 카드 공통 ──────────────────────────────────────────── */
.menu-card{ box-shadow:var(--shadow-sm); transition:transform .16s var(--ease), box-shadow .2s var(--ease), border-color .16s var(--ease); }
.menu-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:transparent; }
.menu-card .thumb{ transition:transform .4s var(--ease); }
.menu-card:hover .thumb{ transform:scale(1.045); }
.menu-card{ overflow:hidden; }
.menu-card .price{ font-size:15.5px; }

.gallery-grid img{ transition:transform .35s var(--ease), box-shadow .2s var(--ease); }
.gallery-grid a:hover img, .gallery-grid img:hover{ transform:scale(1.03); box-shadow:var(--shadow); }

.review-card{ box-shadow:var(--shadow-sm); }
.review-card:hover{ box-shadow:var(--shadow-lg); }
.review-thumb img{ transition:transform .4s var(--ease); }
.review-card:hover .review-thumb img{ transform:scale(1.05); }

/* ── 헤더 ───────────────────────────────────────────────── */
.site-header{ transition:box-shadow .2s var(--ease), background .2s var(--ease); }
.site-header.is-stuck{ box-shadow:0 1px 0 var(--line), 0 6px 20px -12px rgba(16,24,40,.3); }
.site-nav a{ position:relative; }
.site-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:center; transition:transform .18s var(--ease); }
.site-nav a:hover::after{ transform:scaleX(1); }
.site-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.site-nav a[aria-current="page"]{ border-bottom-color:transparent; }

/* ── 모바일 최적화 ──────────────────────────────────────── */
@media (max-width:640px){
  body{ font-size:15.5px; }
  .container{ padding-inline:18px; }
  .section{ padding:44px 0; }
  .hero{ min-height:clamp(400px,66vh,520px); padding:44px 18px; }
  .hero h1{ font-size:clamp(25px,7.4vw,34px); }
  .hero p{ font-size:15px; line-height:1.7; }
  .hero-actions{ margin-top:22px; }
  .hero-actions .btn{ flex:1 1 auto; min-width:132px; }
  .section-head h2{ font-size:21px; }
  .menu-grid{ gap:12px; }
  .menu-card .body{ padding:12px; gap:5px; }
  .menu-card .name{ font-size:14.5px; }
  .menu-card .desc{ font-size:13px; }
  .notice-list{ gap:8px; }
  .btn{ min-height:46px; }
}

/* 하단 액션바 — 엄지 도달 영역, 홈 인디케이터 회피 */
.action-bar{ gap:10px; box-shadow:0 -1px 0 var(--line), 0 -8px 24px -16px rgba(16,24,40,.4); }
.action-bar .btn{ min-height:50px; font-size:15.5px; font-weight:700; border-radius:12px; }
body.has-action-bar{ padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
@media (min-width:900px){ body.has-action-bar{ padding-bottom:0; } }

/* 모바일 드로어 — 항목 간격과 터치 영역 */
@media (max-width:899px){
  .nav-drawer a{ padding:16px 18px; font-size:15.5px; }
  .nav-drawer a:active{ background:var(--bg-2); }
}

/* ── 접근성 ─────────────────────────────────────────────── */
a:focus-visible, button:focus-visible{ outline:3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset:2px; border-radius:6px; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:300; padding:12px 18px;
  background:var(--brand); color:var(--brand-contrast); border-radius:0 0 8px 0; font-weight:700; }
.skip-link:focus{ left:0; }

/* 긴 목록은 화면에 들어올 때만 그린다 */
.gallery-grid, .review-grid, .menu-grid{ content-visibility:auto; contain-intrinsic-size:400px; }

/* ── 다른 지면 안내 카드 ────────────────────────────────── */
.linkcards{ display:grid; gap:12px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:640px){ .linkcards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } }
.linkcard{ display:flex; flex-direction:column; gap:4px; padding:20px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:transform .16s var(--ease), box-shadow .2s var(--ease), border-color .16s var(--ease); }
.linkcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand); }
.lc-ico{ font-size:24px; line-height:1; margin-bottom:6px; }
.linkcard b{ font-size:16px; font-weight:800; }
.lc-sub{ font-size:13.5px; color:var(--ink-3); }

/* 공지: 작성일을 빼고 번호/제목 2열로 */
.board-head, .board-row{ grid-template-columns:76px minmax(0,1fr); }
@media (max-width:640px){ .board-head, .board-row{ grid-template-columns:1fr; } }
.notice-item{ justify-content:flex-start; }

/* 공지: 번호 · 제목 · 조회 3열 */
.board-head, .board-row{ grid-template-columns:70px minmax(0,1fr) 76px; }
.bh-hit, .br-hit{ text-align:center; }
.br-hit{ font-size:13px; color:var(--ink-3); white-space:nowrap; }
@media (max-width:640px){
  .board-head, .board-row{ grid-template-columns:1fr auto; }
  .br-hit{ font-size:12.5px; }
  .br-hit::before{ content:'조회 '; }
}

/* 방문자 리뷰에 사진 */
.rate-list li.has-photo{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px; align-items:start; }
.rl-photo{ width:88px; height:88px; object-fit:cover; border-radius:10px; background:var(--bg-2); cursor:zoom-in; }
.rl-body{ min-width:0; }

/* 방문자 사진 띠 */
.rate-photos{ margin-top:18px; display:grid; gap:8px;
  grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (min-width:700px){ .rate-photos{ grid-template-columns:repeat(8,minmax(0,1fr)); } }
.rate-photos img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px;
  background:var(--bg-2); cursor:zoom-in; transition:transform .3s var(--ease); }
.rate-photos img:hover{ transform:scale(1.05); }

/* ── 메인 정보 카드 (전화·위치·편의·링크) ───────────────── */
.info-card{ display:flex; flex-direction:column; gap:8px; padding:20px;
  background:rgba(255,255,255,.97); color:var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.6); }
.ic-head{ display:flex; align-items:center; gap:9px; padding-bottom:10px;
  border-bottom:1px solid var(--line); margin-bottom:2px; }
.ic-ico{ width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:9px; background:var(--bg-2); font-size:16px; }
.info-card h3{ margin:0; font-size:13.5px; font-weight:800; color:var(--ink-2);
  letter-spacing:.01em; }
.ic-main{ font-size:16px; font-weight:700; line-height:1.55; word-break:keep-all; }
.ic-sub{ font-size:13.5px; color:var(--ink-3); line-height:1.6; }
.ic-btn{ margin-top:auto; width:100%; min-height:44px; font-size:14.5px; }
.ic-chips{ margin-bottom:2px; }
.ic-chips span{ font-size:12.5px; padding:3px 10px; }

.ic-links{ display:grid; gap:7px; }
.ic-link{ display:flex; align-items:center; gap:9px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-2);
  font-size:14px; font-weight:600; color:var(--ink-2);
  transition:border-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease); }
.ic-link:hover{ border-color:var(--brand); color:var(--brand); transform:translateX(2px); }
.ic-link span{ font-size:15px; }

@media (max-width:560px){
  .info-card{ padding:16px; }
  .ic-main{ font-size:15px; }
}

/* 소개 섹션: 카드를 텍스트 옆이 아니라 아래 전체 폭에 일렬로 둔다
   (옆에 두면 폭이 좁아 3열이 되지 않는다) */
@media (min-width:900px){
  .about-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,44px); }
  .about-grid > div:first-child{ max-width:70ch; }
  .info-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
}
@media (min-width:560px) and (max-width:899px){
  .info-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ═══ 헤더 리디자인 (2026-08-29) ═══════════════════════════ */
:root{ --header-h:62px; }
@media (min-width:1024px){ :root{ --header-h:74px; } }

.site-header{ background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; }
.site-header.is-stuck{ background:rgba(255,255,255,.95);
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px -18px rgba(16,24,40,.5); }
.site-header .container{ gap:20px; }

/* 로고 — 상호 아래 지역·업종을 작게 */
.brand{ gap:0; }
.brand-box{ display:flex; flex-direction:column; justify-content:center; min-width:0; line-height:1.15; }
.brand-text{ font-size:clamp(16px,2.2vw,19px); font-weight:800; letter-spacing:-.02em; }
.brand-sub{ margin-top:2px; font-size:10.5px; font-weight:600; letter-spacing:.09em;
  color:var(--ink-3); text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:400px){ .brand-sub{ display:none; } }

/* 메뉴 */
.site-nav{ gap:clamp(16px,2vw,28px); margin-left:auto; }
.site-nav a{ padding:8px 0; font-size:14.5px; font-weight:600; color:var(--ink-2); border-bottom:0; }
.site-nav a::after{ bottom:0; height:2px; border-radius:2px; }
.site-nav a[aria-current="page"]{ color:var(--brand); font-weight:700; }

/* 오른쪽 영역 — 전화/예약 CTA */
.hd-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.hd-cta{ display:none; align-items:center; gap:7px; height:40px; padding:0 15px;
  border-radius:999px; background:var(--brand); color:var(--brand-contrast);
  font-size:14px; font-weight:700; white-space:nowrap;
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--brand) 65%, transparent);
  transition:transform .14s var(--ease), box-shadow .18s var(--ease); }
.hd-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
@media (min-width:560px){ .hd-cta{ display:inline-flex; } }
@media (max-width:559px){ .hd-cta{ display:inline-flex; padding:0 12px; height:38px; } .hd-cta-txt{ display:none; } }

/* 햄버거 — 3줄이 X 로 바뀐다 */
.nav-toggle{ width:40px; height:40px; flex-direction:column; gap:5px; border-radius:11px; }
.nav-toggle span{ width:17px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .22s var(--ease), opacity .16s var(--ease); }
.nav-toggle span::before, .nav-toggle span::after{ content:none; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* 메뉴가 많아 좁은 화면에서 겹치므로 1024px 부터 가로 메뉴 */
@media (max-width:1023px){ .site-nav{ display:none; } }
@media (min-width:1024px){ .site-nav{ display:flex; } .nav-toggle{ display:none; } .nav-drawer{ display:none; } }

/* 드로어 */
.nav-drawer{ padding:6px 0 10px; }
.nav-drawer a{ display:flex; align-items:center; justify-content:space-between;
  padding:15px 22px; font-size:15.5px; font-weight:600; border-top:0; }
.nav-drawer a::after{ content:'›'; color:var(--ink-3); font-size:19px; }
.nav-drawer a + a{ border-top:1px solid var(--line); }
.nav-drawer a:active{ background:var(--bg-2); }

/* ── 배경 사진이 없는 히어로 ────────────────────────────── */
.hero.no-photo{
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--brand) 78%, #ffffff) 0%, transparent 58%),
    radial-gradient(110% 80% at 100% 100%, color-mix(in srgb, var(--brand) 92%, #000000) 0%, transparent 60%),
    linear-gradient(140deg, color-mix(in srgb, var(--brand) 88%, #000000), color-mix(in srgb, var(--brand) 55%, #000000));
}
.hero.no-photo::after{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 40%, rgba(0,0,0,.30) 100%);
}
.hero.no-photo h1{ text-shadow:0 2px 24px rgba(0,0,0,.28); }


@media (max-width:600px){
  }

/* ── 사진을 걸지 않고 원본으로 보내는 안내 ──────────────────────
   남의 사진으로 지면을 채우는 대신 원본에서 보게 한다. */
.photo-offsite{
  max-width:560px; margin:0 auto; padding:40px 28px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  text-align:center;
}
.photo-offsite-lead{ margin:0 0 6px; font-size:15.5px; font-weight:600; color:var(--ink-1); }
.photo-offsite-sub{ margin:0 0 20px; font-size:13.5px; line-height:1.7; color:var(--ink-3); }

/* ── 후기 썸네일 카드 ────────────────────────────────────────
   남의 사진은 표지 크기로만 걸고, 누르면 원본 글로 보낸다.
   크게 띄우지 않는 것이 요점이므로 라이트박스를 붙이지 않는다. */
.thumbgrid-lead{
  max-width:760px; margin:0 auto clamp(20px,3vw,30px);
  text-align:center; font-size:14px; line-height:1.75; color:var(--ink-3);
}
.thumbgrid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:700px){ .thumbgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media (min-width:1024px){ .thumbgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.thumbcard{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); text-decoration:none; color:inherit;
  transition:transform .16s var(--ease), box-shadow .2s var(--ease), border-color .16s var(--ease);
}
.thumbcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand); }
.thumbcard-img{ display:block; aspect-ratio:4/3; background:var(--bg-2); overflow:hidden; }
.thumbcard-img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s var(--ease); }
.thumbcard:hover .thumbcard-img img{ transform:scale(1.04); }
/* 출처 줄을 뺐으므로 제목만 남는다 — 아래 여백을 줄인다 */
.thumbcard-body{ display:block; padding:11px 13px 12px; }
.thumbcard-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:13.5px; line-height:1.5; font-weight:600; color:var(--ink-1);
}
.thumbcard:hover 
/* ── 후기 카드 ──────────────────────────────────────────────
   목록형은 글이 길면 빽빽해 보인다. 한 건씩 카드로 끊어 읽기 쉽게 한다. */
.rvcards{ display:grid; gap:14px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:760px){ .rvcards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }

.rvcard{
  display:flex; flex-direction:column; gap:10px; padding:22px 20px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.rvcard-stars{ color:#f5a524; font-size:14px; letter-spacing:.08em; }
.rvcard-text{
  margin:0; flex:1; font-size:14.5px; line-height:1.75; color:var(--ink-2);
  word-break:keep-all;
}
.rvcard-who{ display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
.rvcard-avatar{
  flex:0 0 auto; width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--brand) 12%, #ffffff);
  color:var(--brand); font-weight:700; font-size:14px;
}
.rvcard-id{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.rvcard-name{ font-size:13.5px; font-weight:600; color:var(--ink-1); }
.rvcard-meta{ font-size:11.5px; color:var(--ink-3); }

/* 메뉴 곁의 작은 음식 사진 — 곁들여 보이는 정도로만 쓰고 누를 수 없다 */
.price-row.has-photo{ align-items:center; }
.price-photo{
  flex:0 0 auto; width:56px; height:56px; object-fit:cover;
  border-radius:var(--radius-sm); background:var(--bg-2);
  margin-right:12px; pointer-events:none; user-select:none;
}
@media (min-width:700px){ .price-photo{ width:64px; height:64px; } }

/* 소개 옆 사진 — 소개 지면의 절반을 차지하므로 본문과 균형이 맞게 키운다 */
.intro-photo.is-thumb{ max-width:none; }
.intro-photo.is-thumb img{ width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius); background:var(--bg-2); display:block;
  box-shadow:var(--shadow); }
.intro-photo.is-thumb a{ display:block; }
@media (min-width:900px){ .intro-photo.is-thumb img{ aspect-ratio:3/4; } }
.intro-photo.is-thumb a:hover ~ @media (max-width:760px){ .intro-photo.is-thumb img{ aspect-ratio:16/10; } }

/* ── 흐린 배경 ──────────────────────────────────────────────
   배경 사진이 없는 업체가 385곳, 소개 배경이 공용 샘플인 곳이 398곳이었다.
   카카오맵 사진을 흐리게 깔아 가게의 색과 결만 빌린다.
   사진 자체를 보여주는 것이 아니므로 원본을 대신하지 않는다.

   ::after 는 이미 어둡게 덮는 오버레이로 쓰고 있어 ::before 에 건다.
   filter 는 자식까지 흐려지므로 배경만 따로 깔고, blur 가장자리가 비치지 않게 살짝 키운다. */
.hero.is-blur, .about.is-blur{ background-image:none !important; overflow:hidden; }
/* 네이버 사진은 Referer 를 보고 403 을 준다.
   CSS background-image 로는 referrerpolicy 를 줄 수 없어 <img> 로 깐다. */
.hero.is-blur > .bg-blur, .about.is-blur > .bg-blur{
  position:absolute; inset:-4%;
  width:108%; height:108%; object-fit:cover;
  filter:blur(6px) saturate(1.1);
  transform:scale(1.04);
  z-index:0; pointer-events:none; user-select:none;
}
.hero.is-blur > *, .about.is-blur > *{ position:relative; z-index:2; }

/* 어둡게 덮는 오버레이도 함께 옅게 한다.
   흐리기와 어둡기가 겹치면 사진이 아예 보이지 않는다. */
.hero.is-blur::after{
  z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.42)) !important;
}
.about.is-blur::after{ z-index:1; background:rgba(0,0,0,.42) !important; }

/* 메뉴가 준비중이면 히어로와 소개가 맞닿는다.
   둘 다 흐린 사진을 화면 가득 깔던 터라 다른 배경 두 장이 이어 붙어 겹쳐 보였다.
   맞닿을 때는 아래쪽에 사진을 걸지 않고 업체 색으로 세워 경계를 분명히 한다. */
.about.is-plain{
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--brand) 62%, #000000) 0%, transparent 62%),
    linear-gradient(200deg, color-mix(in srgb, var(--brand) 52%, #000000), color-mix(in srgb, var(--brand) 26%, #000000));
}
.about.is-plain::after{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, transparent 45%, rgba(0,0,0,.22) 100%);
}
/* 눈썹 글씨는 업체 색이라 같은 색 판 위에서 사라진다 — 흰 계열로 둔다 */
.about.is-plain .eyebrow{ color:rgba(255,255,255,.7); opacity:1; }

/* 남의 사진을 거는 격자 — 썸네일 크기로만 두고 확대하지 않는다.
   누르면 원문으로 가므로 커서와 여백으로 링크임을 알린다. */
.gallery-grid.is-thumbs a{ display:block; border-radius:var(--radius-sm); overflow:hidden;
  position:relative; background:var(--bg-2); }
.gallery-grid.is-thumbs img{ transition:transform .3s var(--ease), opacity .2s var(--ease); }
.gallery-grid.is-thumbs a:hover img{ transform:scale(1.04); opacity:.92; }
.gallery-grid.is-thumbs a::after{
  content:'원문 보기'; position:absolute; left:0; right:0; bottom:0;
  padding:6px 8px; font-size:11px; color:#fff; text-align:center;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  opacity:0; transition:opacity .2s var(--ease);
}
.gallery-grid.is-thumbs a:hover::after{ opacity:1; }

/* 남의 사진·자료를 쓴 지면 아래 출처 한 줄.
   본문을 방해하지 않게 작고 흐리게, 가운데로 둔다. */
.source-note{
  max-width:760px; margin:20px auto 0;
  font-size:11.5px; line-height:1.65;
  color:var(--ink-3); opacity:.8;
  text-align:center;
}
.source-note a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.source-note a:hover{ color:var(--brand); opacity:1; }
@media (max-width:600px){ .source-note{ font-size:11px; padding:0 8px; } }

/* ── 로고 이니셜 심볼 ────────────────────────────────────────
   글자만 놓인 로고가 1,800곳이라 어느 가게인지 눈에 남지 않았다.
   상호 첫 글자를 색 배지로 세워 표시를 만든다.
   색은 업체가 고른 값이고, 검정 계열이면 상호에서 뽑아 가게마다 다르게 한다. */
.brand{ gap:9px; }
.brand-mark{
  flex:0 0 auto;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:11px;
  background:var(--mark, var(--brand));
  color:#fff;
  font-size:17px; font-weight:800; line-height:1;
  letter-spacing:-.02em;
  box-shadow:0 2px 8px -2px color-mix(in srgb, var(--mark, var(--brand)) 55%, transparent);
  transition:transform .18s var(--ease), box-shadow .2s var(--ease);
}
.brand:hover .brand-mark{
  transform:translateY(-1px) rotate(-3deg);
  box-shadow:0 5px 14px -3px color-mix(in srgb, var(--mark, var(--brand)) 60%, transparent);
}
.brand-text{ letter-spacing:-.025em; }
@media (max-width:400px){ .brand-mark{ width:30px; height:30px; border-radius:9px; font-size:15px; } }

/* 업종 아이콘을 담을 때는 글자 대신 선 아이콘이 들어간다 */
.brand-mark.has-icon{ font-size:0; }
.brand-mark svg{ width:19px; height:19px; display:block; }
@media (max-width:400px){ .brand-mark svg{ width:17px; height:17px; } }

/* 첫 화면 지도는 전용 지면보다 낮게 두어 아래 정보가 함께 보이게 한다 */
.loc-map.is-summary{ height:clamp(220px, 32vw, 320px); margin-bottom:16px; }

/* 인사말 대제목 위에 놓는 업체명 — 제목을 가리지 않게 작고 흐리게 */
.intro-eyebrow{
  margin:0 0 8px; font-size:12.5px; font-weight:700;
  letter-spacing:.06em; color:var(--brand); opacity:.9;
}

/* 소개 섹션 제목 위 상호 — 배경이 어두우므로 흰 계열로 둔다 */
.about-name{ margin:0 0 6px; font-size:13px; font-weight:700;
  letter-spacing:.05em; color:rgba(255,255,255,.82); }

/* ── 공유 · 맨 위로 ─────────────────────────────────────────
   조금 내려간 뒤에 나타나 첫 화면을 가리지 않는다.
   모바일에서는 하단 액션바(전화·예약) 위로 띄운다. */
.page-tools{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:80; display:flex; flex-direction:column; gap:8px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.page-tools.is-on{ opacity:1; visibility:visible; transform:none; }
.pt-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:42px; padding:0 13px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  color:var(--ink-1); font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .16s var(--ease), box-shadow .2s var(--ease), border-color .16s var(--ease);
}
.pt-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--brand); color:var(--brand); }
.pt-btn svg{ width:17px; height:17px; flex:0 0 auto; }
.js-to-top{ width:42px; padding:0; justify-content:center; }

.share-toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%, 8px);
  z-index:90; max-width:min(92vw, 420px);
  padding:11px 18px; border-radius:999px;
  background:rgba(17,24,39,.92); color:#fff; font-size:13px;
  opacity:0; transition:opacity .25s var(--ease), transform .25s var(--ease);
  word-break:break-all; text-align:center;
}
.share-toast.is-on{ opacity:1; transform:translate(-50%, 0); }

@media (max-width:860px){
  .page-tools{ bottom:calc(74px + env(safe-area-inset-bottom)); right:12px; }
  .pt-label{ display:none; }
  .pt-btn{ width:42px; padding:0; justify-content:center; }
}

/* 장소 키워드 — 히어로 아래 작은 칩으로 둔다.
   손님이 실제로 찾는 말이라 화면에도 보이고 본문에도 남는다. */
.hero-tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  margin:16px 0 0; padding:0; list-style:none;
}
.hero-tags li{
  padding:5px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.13); backdrop-filter:blur(3px);
  font-size:12px; font-weight:600; color:rgba(255,255,255,.94);
  letter-spacing:-.01em;
}
@media (max-width:600px){
  .hero-tags{ gap:5px; margin-top:13px; }
  .hero-tags li{ padding:4px 9px; font-size:11.5px; }
  .hero-tags li:nth-child(n+5){ display:none; }
}

/* ── 메뉴판처럼 글자가 빽빽한 사진(문서 모드) ─────────────────────
   화면에 맞춰 줄이면 휴대폰에서 글자가 6~7px 가 되어 읽히지 않는다.
   원본 크기로 띄우고 손으로 밀어 보게 한다(원본 가로 960~1280px). */
.lb.is-doc{ display:block; place-items:initial; padding:0; overflow:auto;
  -webkit-overflow-scrolling:touch; }
.lb.is-doc .lb-img{ max-width:none; max-height:none; width:auto; height:auto;
  border-radius:0; margin:56px auto 40px; display:block; }
.lb.is-doc .lb-close{ position:fixed; }
.lb.is-doc .lb-count{ position:fixed; }
.lb.is-doc .lb-prev,
.lb.is-doc .lb-next{ position:fixed; }

/* 누를 수 있다는 표시가 없어 확대가 있는 줄 몰랐다 */
.board-shots.is-doc img{ cursor:zoom-in; }
.shots-hint{ margin:0 0 12px; text-align:center; font-size:13px; color:var(--ink-3); }
.menu-jump{ margin:18px 0 0; text-align:center; font-size:14px; }
.menu-jump a{ color:var(--brand); font-weight:700; }
/* 메뉴판에 분류가 적혀 있으면 그대로 살린다 */
.price-sec{ margin:22px 0 8px; font-size:13px; font-weight:800; letter-spacing:.04em;
  color:var(--brand); text-transform:uppercase; }
.price-sec:first-child{ margin-top:0; }

/* ── 첫 화면 정리 (2026-08-30) ─────────────────────────────────────
   히어로가 화면의 69%(390×844 실측 580px)를 먹어 메뉴가 한 번도 안 보였다. */
.hero{ min-height:clamp(400px, 58vh, 600px); }

/* 언제 여는지를 배지 안에 함께 보인다 */
.hero-badge.state em{ font-style:normal; opacity:.85; margin-left:6px; font-weight:600; }

/* 하단 고정바가 전화를 담당하는 폭에서는 히어로의 전화 버튼을 숨긴다 */
@media (max-width:899px){ .hero-actions .hide-on-bar{ display:none; } }

/* ── 업종별 화면 차등 (2026-08-31) ────────────────────────────────
   전에는 모서리 반경 정도만 달랐고, 판정도 업종 첫 토큰만 봐서
   미용실 상당수가 base 로 떨어졌다(296→120곳). 갈래를 바로잡고 실제로 다르게 짠다. */

/* 음식 — 사진이 먼저 눈에 들어와야 한다 */
body[data-preset="food"] .menu-card .thumb{ aspect-ratio:1/1; }
body[data-preset="food"] .menu-card .price{ font-size:16px; font-weight:800; }

/* 미용 — 시술은 사진보다 이름·가격이다. 카드를 조용하게, 예약을 눈에 띄게 */
body[data-preset="beauty"]{ --radius:18px; --radius-sm:14px; }
body[data-preset="beauty"] .hero h1{ font-weight:700; letter-spacing:.01em; }
body[data-preset="beauty"] .menu-card{ text-align:center; }
body[data-preset="beauty"] .menu-card .body{ align-items:center; }
body[data-preset="beauty"] .menu-card .thumb{ aspect-ratio:4/3; }
body[data-preset="beauty"] .action-bar .btn-line{ border-color:var(--brand); color:var(--brand); font-weight:800; }

/* 헬스·교육 — 프로그램은 목록으로 훑는다. 값이 큰 글씨로 */
body[data-preset="fitness"]{ --radius:10px; }
body[data-preset="fitness"] .section-head h2{ letter-spacing:-.03em; }
body[data-preset="fitness"] .price-row{ padding:15px 0; }
body[data-preset="fitness"] .price-value{ font-size:16.5px; font-weight:800; }
body[data-preset="fitness"] .menu-grid{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }

/* 숙박 — 객실은 크게 보여야 고른다 */
body[data-preset="stay"]{ --radius:16px; }
body[data-preset="stay"] .menu-card .thumb{ aspect-ratio:16/10; }
body[data-preset="stay"] .menu-grid{ grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:700px){ body[data-preset="stay"] .menu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
body[data-preset="stay"] .menu-card .name{ font-size:17px; }

/* 쇼핑 — 상품은 여러 개를 한눈에 */
body[data-preset="shop"]{ --radius:12px; }
body[data-preset="shop"] .menu-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
body[data-preset="shop"] .menu-card .thumb{ aspect-ratio:1/1; }
body[data-preset="shop"] .menu-card .body{ padding:12px; }
body[data-preset="shop"] .menu-card .name{ font-size:14.5px; }

/* 반려동물 — 사람 대상 업종과 섞이지 않게 따로 둔다. 부드럽게 */
body[data-preset="pet"]{ --radius:20px; --radius-sm:16px; }
body[data-preset="pet"] .menu-card{ text-align:center; }
body[data-preset="pet"] .menu-card .body{ align-items:center; }
body[data-preset="pet"] .hero-badge{ border-radius:999px; }

/* ═════════════════════════════════════════════════════════════
   업종별 색 테마 (2026-09-02)
   ─────────────────────────────────────────────────────────────
   · data-preset = 모양(모서리·비율). 기존 그대로 유지한다.
   · data-theme  = 색 캔버스(바탕·글자·선). 이 블록이 새로 추가된 층이다.
   · 업체가 고른 --brand(메인컬러)는 그대로 포인트로 남는다.
   · data-theme 이 없으면(=clean) 이 블록은 아무 것도 적용하지 않는다
     → 아직 테마를 안 받은 업체는 예전과 1px도 다르지 않다.
   해제하려면 header.php 의 data-theme 출력 한 줄만 지우면 된다.
   ═════════════════════════════════════════════════════════════ */

/* warm — 크림·테라코타 (음식점·카페) */
html[data-theme="warm"] {
    --bg:#FBF7F2; --bg-2:#F3EBE1; --line:#E6D9C9;
    --ink:#2A211A; --ink-2:#5C4C3F; --ink-3:#8B7967;
    --radius:16px; --radius-sm:12px;
    --shadow:0 1px 2px rgba(90,66,44,.05), 0 10px 28px rgba(90,66,44,.09);
}
html[data-theme="warm"] .site-header { background:rgba(251,247,242,.93); }
html[data-theme="warm"] .menu-card,
html[data-theme="warm"] .info-card { background:#FFFDFA; }

/* soft — 뉴트럴 소프트 (미용·네일) */
html[data-theme="soft"] {
    --bg:#FAF9F9; --bg-2:#F2EFEF; --line:#E8E2E2;
    --ink:#241F21; --ink-2:#574E51; --ink-3:#8A8085;
    --radius:20px; --radius-sm:15px;
    --shadow:0 1px 2px rgba(60,45,50,.05), 0 10px 28px rgba(60,45,50,.08);
}
html[data-theme="soft"] .site-header { background:rgba(250,249,249,.93); }

/* craft — 내추럴 린넨·우드 (공방·클래스·스튜디오)
   wood — 같은 결. 숙박(펜션)용으로 확대 스위치만 따로 둔 이름이다. */
html[data-theme="craft"], html[data-theme="wood"] {
    --bg:#F7F5F1; --bg-2:#EDE9E2; --line:#DED8CD;
    --ink:#23211D; --ink-2:#55504A; --ink-3:#877F74;
    --radius:6px; --radius-sm:4px;
    --shadow:0 1px 2px rgba(70,62,48,.05), 0 10px 26px rgba(70,62,48,.09);
}
html[data-theme="craft"] .site-header, html[data-theme="wood"] .site-header { background:rgba(247,245,241,.93); }
html[data-theme="craft"] .section-head h2, html[data-theme="wood"] .section-head h2 { letter-spacing:-.02em; }

/* bloom — 파스텔 보태니컬 (꽃집) */
html[data-theme="bloom"] {
    --bg:#FCFBF8; --bg-2:#F1F0E8; --line:#E3E4DA;
    --ink:#2C302A; --ink-2:#5A6055; --ink-3:#8A9084;
    --radius:22px; --radius-sm:16px;
    --shadow:0 1px 2px rgba(70,78,62,.05), 0 12px 30px rgba(70,78,62,.09);
}
html[data-theme="bloom"] .site-header { background:rgba(252,251,248,.93); }
html[data-theme="bloom"] .hero h1 { font-weight:700; letter-spacing:-.01em; }

/* calm — 세이지 (요가·필라테스·웰니스) */
html[data-theme="calm"] {
    --bg:#F6F7F3; --bg-2:#E9EDE3; --line:#DCE1D3;
    --ink:#232720; --ink-2:#4F564A; --ink-3:#808877;
    --radius:4px; --radius-sm:3px;
    --shadow:0 1px 2px rgba(56,66,48,.05), 0 10px 26px rgba(56,66,48,.09);
}
html[data-theme="calm"] .site-header { background:rgba(246,247,243,.93); }

/* bold — 다크 하이컨트라스트 (헬스·스포츠) */
html[data-theme="bold"] {
    --bg:#0F1113; --bg-2:#16191C; --line:rgba(255,255,255,.10);
    --ink:#F2F4F5; --ink-2:#B6BDC2; --ink-3:#868E94;
    --radius:12px; --radius-sm:9px;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 36px rgba(0,0,0,.45);
}
html[data-theme="bold"] body { background:var(--bg); }
html[data-theme="bold"] .site-header { background:rgba(15,17,19,.92); border-bottom-color:var(--line); }
html[data-theme="bold"] .nav-toggle,
html[data-theme="bold"] .nav-drawer,
html[data-theme="bold"] .menu-card,
html[data-theme="bold"] .info-card { background:#1C2024; border-color:var(--line); color:var(--ink); }
html[data-theme="bold"] .nav-toggle span,
html[data-theme="bold"] .nav-toggle span::before,
html[data-theme="bold"] .nav-toggle span::after { background:var(--ink); }
html[data-theme="bold"] .btn-line { background:#1C2024; color:var(--ink); border-color:var(--line); }
html[data-theme="bold"] .menu-tag { background:#262B30; color:var(--ink-2); }
html[data-theme="bold"] .action-bar { background:rgba(15,17,19,.96); border-top-color:var(--line); }
html[data-theme="bold"] input, html[data-theme="bold"] textarea, html[data-theme="bold"] select {
    background:#1C2024; color:var(--ink); border-color:var(--line);
}
html[data-theme="bold"] .brand { color:var(--ink); }

/* 다크 테마에서 상품 썸네일 바탕 — 2026-09-03
   업체가 올린 이미지가 흰 배경 JPG 와 배경 투명 PNG 로 섞여 있어,
   어두운 바탕(--bg-2)을 그대로 두면 카드마다 배경이 달라 보인다.
   흰 바탕으로 통일해 두면 어느 쪽이든 같은 판 위에 놓인다. */
html[data-theme="bold"] .menu-card .thumb,
html[data-theme="bold"] .gall-item,
html[data-theme="bold"] .thumb { background-color: #FFFFFF; }

/* 다크 테마 — 어두운 브랜드색 보정 (2026-09-03)
   업체 메인컬러가 진한 남색·보라·검정이면 어두운 바탕 위 글자로는 안 읽힌다
   (컬러핏의 'PROGRAM' 라벨이 거의 안 보였다).
   --brand-on-dark 를 흰색과 섞어 밝혀서 글자에만 쓴다. 버튼 배경은 원래 색 그대로 둔다. */
html[data-theme="bold"] {
    --brand-on-dark: color-mix(in srgb, var(--brand) 55%, #FFFFFF);
}
html[data-theme="bold"] .brand,
html[data-theme="bold"] .site-nav a:hover,
html[data-theme="bold"] .site-nav a[aria-current="page"],
html[data-theme="bold"] .menu-card .price,
html[data-theme="bold"] .info-card h3,
html[data-theme="bold"] .hours tr.is-today th,
html[data-theme="bold"] .hour-row.is-today .hour-day,
html[data-theme="bold"] .ls-label,
html[data-theme="bold"] .rate-num,
html[data-theme="bold"] .board-row:hover .br-title,
html[data-theme="bold"] .price-value,
html[data-theme="bold"] .section-head .eyebrow,
html[data-theme="bold"] .eyebrow,
html[data-theme="bold"] .chips a:hover,
html[data-theme="bold"] .btn-line:hover { color: var(--brand-on-dark); }

html[data-theme="bold"] .site-nav a[aria-current="page"] { border-bottom-color: var(--brand-on-dark); }