:root{
  --paper:#FFFFFF; --ink:#1A1A1A; --body:#565656; --muted:#8A8A8A;
  --line:#E4E4E4; --line-soft:#EFEFEF; --panel:#F5F5F4;
  --hero:#191919; --hero-line:#333333;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --maxw:1280px; --pad:clamp(22px,5vw,72px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#121212; --ink:#F2F2F2; --body:#ADADAD; --muted:#767676;
    --line:#2A2A2A; --line-soft:#202020; --panel:#1A1A1A;
    --hero:#0D0D0D; --hero-line:#2c2c2c;
  }
}
:root[data-theme="light"]{
  --paper:#FFFFFF; --ink:#1A1A1A; --body:#565656; --muted:#8A8A8A;
  --line:#E4E4E4; --line-soft:#EFEFEF; --panel:#F5F5F4; --hero:#191919; --hero-line:#333333;
}
:root[data-theme="dark"]{
  --paper:#121212; --ink:#F2F2F2; --body:#ADADAD; --muted:#767676;
  --line:#2A2A2A; --line-soft:#202020; --panel:#1A1A1A; --hero:#0D0D0D; --hero-line:#2c2c2c;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--paper);color:var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.6;letter-spacing:-0.006em;overflow-x:hidden;font-size:16px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
h1,h2,h3,h4{color:var(--ink);font-weight:700;text-wrap:balance}

.shell{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* type helpers */
.display{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.18;letter-spacing:-0.02em;font-weight:700}
.figure{font-weight:800;letter-spacing:-0.04em;font-variant-numeric:tabular-nums;color:var(--ink);line-height:.95}
.kicker{font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:0;display:inline-block}
.lead{font-size:clamp(.98rem,1.1vw,1.08rem);color:var(--body);line-height:1.6;max-width:44ch}

/* buttons — Emil: press feedback, custom ease */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.98rem;letter-spacing:-0.01em;
  padding:14px 24px;border-radius:100px;background:var(--bg);color:var(--fg);cursor:pointer;
  transition:transform 160ms var(--ease-out),opacity 160ms var(--ease-out),background 200ms var(--ease-out);
}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid color-mix(in srgb,currentColor 40%,transparent)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{opacity:.9}
  .btn.ghost:hover{background:color-mix(in srgb,currentColor 12%,transparent);opacity:1}
}

/* ---------- preview strip ---------- */
.preview{background:var(--ink);color:var(--paper);font-size:.74rem;letter-spacing:.01em;text-align:center;padding:7px 16px;font-weight:500}
.preview b{font-weight:700}

/* ---------- header (translucent glass, Apple materials) ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:50;transition:padding .35s var(--ease-out)}
header::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease-out);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line-soft);
}
header.scrolled::before{opacity:1}
header .bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--maxw);margin:0 auto;padding:20px var(--pad);transition:padding .35s var(--ease-out)}
header.scrolled .bar{padding-top:13px;padding-bottom:13px}
.logo{font-weight:800;font-size:1.12rem;letter-spacing:.01em;color:#fff;transition:color .35s var(--ease-out);line-height:1}
.logo b{font-weight:800}
.logo small{display:block;font-weight:500;font-size:.58rem;letter-spacing:.3em;opacity:.62;margin-top:3px}
nav{display:flex;gap:32px}
nav a{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.8);transition:color .2s}
.hcall{font-size:.88rem;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:8px;letter-spacing:-0.01em}
.hcall svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
header.scrolled .logo{color:var(--ink)}
header.scrolled nav a{color:var(--body)}
header.scrolled .hcall{color:var(--ink)}
@media (hover:hover){nav a:hover{color:#fff}header.scrolled nav a:hover{color:var(--ink)}}

/* mobile hamburger + menu */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:6px;width:38px;height:38px;padding:7px;background:none;border:0;cursor:pointer;position:relative;z-index:60}
.navtoggle span{display:block;height:2px;width:24px;background:#fff;border-radius:2px;transition:transform .32s var(--ease-out),opacity .2s,background .35s var(--ease-out)}
header.scrolled .navtoggle span{background:var(--ink)}
.navtoggle.open span{background:var(--ink)}
.navtoggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* 라이트/다크 수동 토글 버튼 */
.themetoggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:8px;margin-left:2px;background:none;border:0;cursor:pointer;color:#fff;transition:color .35s var(--ease-out)}
.themetoggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
header.scrolled .themetoggle,body.subpage .themetoggle{color:var(--ink)}
.themetoggle .ic-sun{display:none}
.themetoggle .ic-moon{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]) .themetoggle .ic-sun{display:block}
  :root:not([data-theme]) .themetoggle .ic-moon{display:none}
}
:root[data-theme="dark"] .themetoggle .ic-sun{display:block}
:root[data-theme="dark"] .themetoggle .ic-moon{display:none}
:root[data-theme="light"] .themetoggle .ic-sun{display:none}
:root[data-theme="light"] .themetoggle .ic-moon{display:block}
.mmenu{position:fixed;inset:0;z-index:55;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:40px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease-out),visibility .4s}
.mmenu.open{opacity:1;visibility:visible;pointer-events:auto}
.mmenu nav{display:flex;flex-direction:column;align-items:center;gap:2px}
.mmenu nav a{color:var(--ink);font-size:1.7rem;font-weight:700;letter-spacing:-0.03em;padding:15px 20px}
.mmenu-call{margin-top:30px;display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:1.12rem;font-weight:700;letter-spacing:-0.01em}
.mmenu-call svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;background:var(--hero);color:#fff;display:flex;flex-direction:column;overflow:hidden}
.hero-media .plabel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.28);font-size:.82rem;font-weight:500;text-align:center;line-height:1.6;padding:24px}
.hero-media .plabel svg{width:40px;height:40px;stroke:rgba(255,255,255,.28);fill:none;stroke-width:1.2;display:block;margin:0 auto 14px}
.hero-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;
  padding:112px var(--pad) 0;max-width:var(--maxw);margin:0 auto;width:100%;
  font-size:.8rem;color:rgba(255,255,255,.6);letter-spacing:.02em}
.hero-top span{display:inline-flex;gap:8px;align-items:center}
.hero-body{position:relative;z-index:2;margin-top:auto;padding:0 var(--pad) clamp(52px,9vh,104px);max-width:var(--maxw);
  margin-left:auto;margin-right:auto;width:100%}
.hero h1{color:#fff;font-weight:700;letter-spacing:-0.022em;line-height:1.14;font-size:clamp(1.95rem,4.4vw,3.15rem);max-width:19ch}
.hero .sub{margin-top:18px;font-size:clamp(.98rem,1.2vw,1.12rem);color:rgba(255,255,255,.82);max-width:34ch;line-height:1.56;font-weight:400}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero .btn{--bg:#fff;--fg:var(--hero)}
.hero .btn.ghost{--fg:#fff}
.cue{position:relative;z-index:2;align-self:center;margin-top:-30px;margin-bottom:20px;
  color:rgba(255,255,255,.5);font-size:.62rem;letter-spacing:.26em;display:flex;flex-direction:column;align-items:center;gap:8px}
.cue i{width:1px;height:30px;background:linear-gradient(rgba(255,255,255,.55),transparent);transform-origin:top;animation:cue 2.4s var(--ease-out) infinite}
@keyframes cue{0%,100%{transform:scaleY(0)}40%,60%{transform:scaleY(1)}}

/* ---------- section rhythm (deliberately varied) ---------- */
section{position:relative}
.pt-xl{padding-top:clamp(56px,8vw,92px)}
.pt-lg{padding-top:clamp(44px,6vw,66px)}
.pb-xl{padding-bottom:clamp(56px,8vw,92px)}
.pb-lg{padding-bottom:clamp(44px,6vw,66px)}

/* ---------- 2. brand statement (asymmetric, no cards) ---------- */
.brand .grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,6vw,80px);align-items:end}
.brand h2{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.2;letter-spacing:-0.02em}
.brand .grid p{color:var(--body);font-size:1.02rem;line-height:1.6;padding-bottom:6px}
.figrow{display:flex;margin-top:clamp(32px,5vw,52px);border-top:1px solid var(--line)}
.figrow .cell{flex:1;padding:20px 4px 0;border-right:1px solid var(--line)}
.figrow .cell:last-child{border-right:0}
.figrow .n{font-size:clamp(1.65rem,3vw,2.3rem)}
.figrow .n small{font-size:.32em;font-weight:700;margin-left:.15em;letter-spacing:0}
.figrow .l{margin-top:12px;font-size:.9rem;color:var(--muted);letter-spacing:-0.01em}

/* ---------- 2b. sauna signature ---------- */
.sauna .grid2{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(28px,5vw,76px);align-items:center}
.sauna-media.shot{aspect-ratio:4/5;border-radius:6px}
.sauna-copy .kicker{color:var(--muted)}
.sauna-copy h2{font-size:clamp(1.55rem,2.8vw,2.2rem);line-height:1.16;letter-spacing:-0.02em;margin-top:12px}
.sauna-copy p{margin-top:18px;color:var(--body);font-size:1.02rem;line-height:1.62;max-width:42ch}
.matrow{margin-top:26px;display:flex;border-top:1px solid var(--line)}
.matrow .m{flex:1;padding:18px 4px 0;border-right:1px solid var(--line)}
.matrow .m:last-child{border-right:0}
.matrow .m .mv{font-size:clamp(1.35rem,2.3vw,1.85rem);font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums}
.matrow .m .mv small{font-size:.42em;font-weight:700;margin-left:.12em}
.matrow .m .ml{margin-top:11px;font-size:.86rem;color:var(--muted)}

/* ---------- 3. facilities (editorial, uneven grid) ---------- */
.fac-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(26px,4vw,42px)}
.fac-intro h2{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.2;letter-spacing:-0.02em}
.fac-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
  margin-right:calc(-1*var(--pad));scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.fac-grid::-webkit-scrollbar{height:6px}
.fac-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
.fac-grid .item{flex:0 0 clamp(200px,58vw,268px);scroll-snap-align:start}
.fac-grid .item:last-child{margin-right:var(--pad)}
.shot{position:relative;overflow:hidden;background:var(--panel);border-radius:8px}
.shot .plabel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;color:var(--muted);font-size:.8rem;font-weight:500;text-align:center;padding:16px}
.shot .plabel svg{width:26px;height:26px;stroke:var(--muted);fill:none;stroke-width:1.25;opacity:.8}
.shot .plabel em{font-style:normal;font-size:.68rem;opacity:.7;font-weight:400}
.item .cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:15px}
.item .cap h3{font-size:1.12rem;font-weight:600;letter-spacing:-0.02em}
.item .cap span{font-size:.76rem;color:var(--muted);white-space:nowrap;font-weight:500}
.item p{margin-top:5px;font-size:.9rem;color:var(--muted)}
.fac-grid .item .shot{aspect-ratio:4/5}

/* ---------- 4. emotion band ---------- */
.emotion{position:relative;background:var(--hero);color:#fff;min-height:56vh;display:flex;align-items:center;overflow:hidden}
.emotion .plabel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.24);
  font-size:.82rem;text-align:center;padding:24px;line-height:1.6}
.emotion .plabel svg{width:38px;height:38px;stroke:rgba(255,255,255,.24);fill:none;stroke-width:1.2;display:block;margin:0 auto 12px}
.emotion::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.15) 62%,transparent)}
.emotion .inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--pad)}
.emotion .box{max-width:26ch}
.emotion h2{color:#fff;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.24;letter-spacing:-0.02em}
.emotion p{margin-top:18px;color:rgba(255,255,255,.78);font-size:1.02rem;line-height:1.62;max-width:36ch}

/* ---------- 5. hygiene (spec-sheet list, no boxes) ---------- */
.hy-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(24px,4vw,40px)}
.hy-head h2{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.2;letter-spacing:-0.02em}
.spec{border-top:1px solid var(--line)}
.spec .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(16px,4vw,56px);
  padding:17px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.spec .row h3{font-size:1.02rem;font-weight:600;letter-spacing:-0.01em;display:flex;align-items:center;gap:12px}
.spec .row h3 svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.4;flex:none}
.spec .row p{color:var(--body);font-size:.96rem;line-height:1.55}
.hy-photo{margin-top:clamp(28px,4vw,44px)}
.hy-photo .shot{aspect-ratio:21/8}

/* ---------- 5b. proof (awards + inspection) ---------- */
.proof{background:var(--paper)}
.proof-lead{color:var(--muted);font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.7;letter-spacing:-0.01em;align-self:end}
.proof-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.pbadge{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.pbadge .pb-img{aspect-ratio:4/5;background:var(--panel);display:flex;align-items:center;justify-content:center;padding:clamp(16px,2vw,26px)}
.pbadge .pb-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;border-radius:6px}
.pbadge .pb-cap{padding:clamp(16px,1.8vw,22px);border-top:1px solid var(--line-soft)}
.pbadge .pb-cap h3{font-size:1.02rem;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.pbadge .pb-cap p{margin-top:6px;font-size:.83rem;color:var(--muted);line-height:1.55}
.proof-grade{display:flex;align-items:center;gap:13px;margin-top:clamp(18px,2.2vw,26px);padding:clamp(16px,1.8vw,20px) clamp(18px,2vw,24px);border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.proof-grade svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.4;flex:none}
.proof-grade b{font-weight:700;color:var(--ink)}
.proof-grade span{font-size:.92rem;color:var(--body);letter-spacing:-0.01em}
.proof-water{margin-top:clamp(34px,4.5vw,58px)}
.pw-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1.5px solid var(--line)}
.pw-head h3{font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:700;letter-spacing:-0.02em}
.pw-head .pw-meta{font-size:.85rem;color:var(--muted)}
.pw-head .pw-meta b{color:#1f7a4d;font-weight:700}
.pw-tablewrap{overflow-x:auto}
.pw-table{width:100%;border-collapse:collapse;min-width:560px;font-size:.92rem}
.pw-table th,.pw-table td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--line-soft)}
.pw-table thead th{font-weight:600;color:var(--body);vertical-align:top;white-space:nowrap}
.pw-table thead th span{display:block;font-weight:400;font-size:.7rem;color:var(--muted);margin-top:4px}
.pw-table tbody td{font-variant-numeric:tabular-nums;color:var(--body)}
.pw-table tbody td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.pw-table td.ok{color:#1f7a4d;font-weight:700}
.pw-foot{margin-top:16px;font-size:.82rem;color:var(--muted);line-height:1.65;letter-spacing:-0.01em}
/* 실제 검사표·성적서 원본 썸네일 */
.pw-docs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.3vw,16px);margin-top:20px}
.pw-docs-lg{grid-template-columns:repeat(5,1fr)}
.pw-doc{display:flex;flex-direction:column;gap:9px;padding:0;border:0;background:none;cursor:pointer;text-align:center;font:inherit;-webkit-tap-highlight-color:transparent}
.pw-doc img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.pw-doc span{font-size:.78rem;color:var(--muted);letter-spacing:-0.01em;line-height:1.35}
.pw-doc:hover img,.pw-doc:focus-visible img{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.12);border-color:var(--ink)}
.pw-doc:focus-visible{outline:none}
@media(max-width:760px){.pw-docs,.pw-docs-lg{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.pw-docs,.pw-docs-lg{grid-template-columns:repeat(2,1fr)}}
/* 라이트박스 */
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);background:rgba(14,14,16,.9);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.lightbox.open{opacity:1;visibility:visible}
.lightbox .lb-fig{max-width:min(920px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;margin:0}
.lightbox img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.45);transform:scale(.96);transition:transform .25s ease}
.lightbox.open img{transform:scale(1)}
.lightbox figcaption{color:rgba(255,255,255,.85);font-size:.86rem;letter-spacing:-0.01em;text-align:center}
.lb-close{position:absolute;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.lb-close:hover{background:rgba(255,255,255,.24)}
@media(max-width:760px){.proof-badges{grid-template-columns:1fr 1fr}}
/* 모바일 배지 가로 행 규칙은 파일 맨 끝에 있음 (de-card 오버라이드보다 뒤여야 함) */
/* 수질·대기 검사표: 모바일에서 구분선 방식으로 전환(가로 스크롤 없이 한눈에) */
@media(max-width:560px){
  .pw-tablewrap{overflow-x:visible}
  .pw-table{min-width:0;display:block;font-size:.9rem}
  .pw-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .pw-table tbody{display:block}
  .pw-table tbody tr{display:block;padding:6px 0 12px;border-bottom:1px solid var(--line)}
  .pw-table tbody tr:last-child{border-bottom:0}
  .pw-table tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;border-bottom:0;text-align:right;white-space:normal;color:var(--body)}
  .pw-table tbody td::before{content:attr(data-label);font-weight:600;color:var(--muted);text-align:left;letter-spacing:-0.01em}
  .pw-table tbody td:first-child{justify-content:flex-start;font-size:1.02rem;font-weight:700;color:var(--ink);padding:14px 0 8px}
  .pw-table tbody td:first-child::before{content:none}
}

/* ---------- 6. trust (figure band, no cards) ---------- */
.trust{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .band{display:flex;flex-wrap:wrap}
.trust .c{flex:1 1 200px;padding:clamp(24px,3vw,34px) clamp(8px,2vw,26px);border-right:1px solid var(--line)}
.trust .c:last-child{border-right:0}
.trust .k{font-size:.76rem;color:var(--muted);font-weight:600;letter-spacing:-0.01em}
.trust .v{margin-top:12px;color:var(--ink);font-weight:700;font-size:1.08rem;line-height:1.32;letter-spacing:-0.015em}
.trust .v .big{display:block;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;margin-bottom:2px}
.trust .v .big small{font-size:.4em;font-weight:700;margin-left:.1em}

/* ---------- 7. guide (pricelist, no cards) ---------- */
.guide .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);margin-top:clamp(26px,4vw,44px)}
.g-label{font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:-0.01em;padding-bottom:16px;border-bottom:1px solid var(--line)}
.price{list-style:none;margin-top:4px}
.price li{display:flex;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.price li .nm{color:var(--ink);font-weight:500;font-size:1.04rem;letter-spacing:-0.01em}
.price li .dot{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.price li .pr{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.g-hours{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;color:var(--ink);letter-spacing:-0.03em;font-variant-numeric:tabular-nums;margin-top:14px;line-height:1}
.g-hours span{display:block;font-size:.86rem;font-weight:500;color:var(--body);letter-spacing:-0.01em;margin-top:12px;line-height:1.55}
.g-meta{margin-top:26px;border-top:1px solid var(--line-soft);padding-top:20px}
.g-meta .r{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:.98rem}
.g-meta .r b{color:var(--ink);font-weight:600}
.tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-size:.82rem;color:var(--body);border:1px solid var(--line);padding:7px 13px;border-radius:100px;letter-spacing:-0.01em}

/* ---------- 8. reviews (editorial, hairline) ---------- */
.rev-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:clamp(32px,4vw,48px);border-bottom:1px solid var(--line)}
.rev-head h2{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.2;letter-spacing:-0.02em}
.score{display:flex;align-items:baseline;gap:14px}
.score .n{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:-0.03em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.score .meta{display:flex;flex-direction:column;gap:6px}
.stars{display:inline-flex;gap:2px}
.stars svg{width:16px;height:16px;fill:var(--ink);stroke:none}
.score .cnt{font-size:.86rem;color:var(--muted)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.quote{padding:clamp(28px,3vw,40px) 0;border-right:1px solid var(--line-soft)}
.quote{padding-left:clamp(0px,2vw,32px);padding-right:clamp(20px,2vw,32px)}
.quote:first-child{padding-left:0}
.quote:last-child{border-right:0;padding-right:0}
.quote p{color:var(--ink);font-size:1rem;line-height:1.6;font-weight:400;letter-spacing:-0.01em}
.quote .who{margin-top:18px;font-size:.86rem;color:var(--muted)}
.quote .who b{color:var(--body);font-weight:600}

/* ---------- 8b. gallery (raw photo mosaic) ---------- */
.gallery-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(26px,4vw,42px)}
.gtile .shot{border-radius:8px;aspect-ratio:1/1!important}
.gtile .plabel svg{width:22px;height:22px}
@media (max-width:900px){.gallery-cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gallery-cols{grid-template-columns:repeat(2,1fr)}}

/* ---------- 9. location ---------- */
.loc .grid{display:grid;grid-template-columns:1fr;max-width:680px;margin-top:clamp(34px,5vw,50px)}
.loc-map{position:relative;overflow:hidden;border-radius:6px;background:var(--panel);min-height:440px}
.loc-map .plabel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--muted);font-size:.84rem;font-weight:500;text-align:center;padding:20px}
.loc-map .plabel svg{width:34px;height:34px;stroke:var(--muted);fill:none;stroke-width:1.3}
.loc-map .plabel em{font-style:normal;font-size:.72rem;opacity:.72;font-weight:400}
.loc-info{display:flex;flex-direction:column}
.loc-blk{padding:22px 0;border-bottom:1px solid var(--line-soft)}
.loc-blk:first-child{padding-top:0}
.loc-blk .k{font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:-0.01em}
.loc-blk .v{margin-top:10px;color:var(--ink);font-size:1.06rem;font-weight:500;letter-spacing:-0.01em}
.loc-blk .v small{display:block;color:var(--body);font-weight:400;font-size:.92rem;margin-top:5px;line-height:1.55}
.loc-phone{font-size:clamp(1.5rem,2.5vw,1.95rem);font-weight:800;color:var(--ink);letter-spacing:-0.025em;font-variant-numeric:tabular-nums;line-height:1}
.loc-info .btn{margin-top:18px;width:100%;justify-content:center}

/* ---------- footer ---------- */
footer{background:var(--hero);color:rgba(255,255,255,.68);padding:clamp(28px,3.6vw,42px) 0 22px}
.foot-top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--hero-line)}
.foot-logo{font-weight:800;font-size:1.3rem;color:#fff;letter-spacing:.01em}
.foot-logo small{display:block;font-weight:500;font-size:.68rem;letter-spacing:.08em;opacity:.55;margin-top:7px}
.foot-cols{display:flex;gap:clamp(36px,6vw,72px);flex-wrap:wrap}
.foot-col h4{font-size:.72rem;letter-spacing:.02em;color:rgba(255,255,255,.46);font-weight:600;margin-bottom:14px}
.foot-col p,.foot-col a{font-size:.92rem;line-height:1.95;color:rgba(255,255,255,.76);display:block}
.foot-bot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:28px;font-size:.8rem;color:rgba(255,255,255,.42)}
@media (hover:hover){.foot-col a:hover{color:#fff}}

/* ---------- mobile bottom bar ---------- */
.mbar{position:fixed;inset:auto 0 0 0;z-index:60;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border-top:1px solid var(--line)}
.mbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.95rem;padding:14px;border-radius:12px;
  transition:transform 160ms var(--ease-out)}
.mbar a:active{transform:scale(.97)}
.mbar svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.mbar .call{background:var(--ink);color:var(--paper)}
.mbar .map{background:transparent;color:var(--ink);border:1px solid var(--line)}

/* ---------- reveal (Emil: custom ease, subtle) ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rise.in{opacity:1;transform:none}
.unveil .shot,.unveil.shot{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-io)}
.unveil.in .shot,.unveil.shot.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .unveil .shot,.unveil.shot{clip-path:none;transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  header .bar>nav,.hcall{display:none}
  .navtoggle{display:flex}
  .themetoggle{margin-left:auto}
  .mbar{display:none}
  
  .brand .grid,.fac-intro,.hy-head,.guide .grid,.loc .grid{grid-template-columns:1fr;align-items:start}
  .i-lead,.i-tall,.i-third{grid-column:span 6}
  .i-lead .shot{aspect-ratio:16/10}
  .quotes{grid-template-columns:1fr}
  .quote{border-right:0;border-bottom:1px solid var(--line-soft);padding:26px 0}
  .quote:last-child{border-bottom:0}
  .quote:first-child{padding-top:0}
  .loc-map{min-height:300px}
  .trust .c{flex-basis:50%}
  .trust .c:nth-child(2){border-right:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .fac-grid{grid-template-columns:1fr}
  .i-lead,.i-tall,.i-third{grid-column:span 1}
  .i-tall .shot{aspect-ratio:5/4}
  .figrow{flex-wrap:wrap}
  .figrow .cell{flex-basis:50%;border-bottom:1px solid var(--line);padding-bottom:22px}
  .figrow .cell:nth-child(2){border-right:0}
  .spec .row{grid-template-columns:1fr;gap:8px}
  .trust .c{flex-basis:100%;border-right:0;border-bottom:1px solid var(--line)}
  .trust .c:last-child{border-bottom:0}
  .hy-photo .shot{aspect-ratio:16/10}
}
.foodph{position:relative;border:1.5px dashed var(--line);border-radius:14px;background:var(--panel);aspect-ratio:16/6;min-height:200px;display:flex;align-items:center;justify-content:center;margin-top:clamp(20px,3vw,34px)}
.foodlabel{display:flex;flex-direction:column;align-items:center;gap:11px;color:var(--muted);text-align:center;padding:20px}
.foodlabel svg{width:36px;height:36px;stroke:var(--muted);fill:none;stroke-width:1.3;opacity:.85}
.foodlabel b{color:var(--body);font-weight:600;font-size:1.02rem;letter-spacing:-0.01em}
.foodlabel em{font-style:normal;font-size:.8rem;opacity:.8}

.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(220px,24vw);gap:clamp(6px,0.7vw,12px);width:100vw;margin-left:calc(50% - 50vw);padding:0 clamp(14px,4vw,120px)}
.mtile{position:relative;overflow:hidden;border-radius:12px;background:var(--panel) center/cover no-repeat;display:block;min-height:168px}
.mtile.big{grid-column:span 2;grid-row:span 2}
.mtile.wide{grid-column:span 2}
.mtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.6))}
.mtile .cap{position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;gap:9px;padding:clamp(14px,1.6vw,22px);color:#fff;font-weight:700;font-size:clamp(.98rem,1.2vw,1.16rem);letter-spacing:-0.02em;text-shadow:0 1px 10px rgba(0,0,0,.45)}


@media(max-width:760px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(150px,42vw)}.mtile.big{grid-row:span 1}}
@media(max-width:480px){.mosaic{gap:7px;grid-auto-rows:minmax(130px,44vw)}}

.intro{text-align:center;padding:clamp(74px,11vw,140px) 0}
.intro h1{font-size:clamp(1.9rem,4.6vw,3rem);letter-spacing:-0.045em;line-height:1.14;color:var(--ink);font-weight:800}
.intro p{margin:20px auto 0;max-width:none;white-space:nowrap;color:var(--body);font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.62}
.intro-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;margin-top:clamp(30px,4vw,40px)}
.intro-stats span{font-size:.9rem;color:var(--muted);letter-spacing:-0.01em}
.intro-stats b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

.foods{background:#201d18;color:#fff;padding:clamp(64px,9vw,112px) 0}
.foods-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(30px,5vw,66px);align-items:center}
.foods-carousel{min-width:0}
.foods-track{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px;scrollbar-width:none}
.foods-track::-webkit-scrollbar{display:none}
.food-tile{flex:0 0 44%;scroll-snap-align:start;margin:0;min-width:0}
.food-tile .fbox{aspect-ratio:1/1;border-radius:10px;background:#2b2721;border:1px dashed rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:rgba(255,255,255,.42);padding:14px}
.food-tile .fbox svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.2;opacity:.7}
.food-tile .fbox em{font-style:normal;font-size:.68rem;letter-spacing:.02em}
.food-tile figcaption{margin-top:14px;font-weight:700;font-size:1rem;color:#fff;letter-spacing:-0.02em}
.foods-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(20px,2.6vw,30px)}
.foods-nav button{width:26px;height:26px;border:none;background:transparent;color:rgba(255,255,255,.85);font-size:1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .2s,transform .12s ease-out}
.foods-nav button:hover{color:#fff}
.foods-nav button:active{transform:scale(.9)}
.foods-nav button:disabled{color:rgba(255,255,255,.2);cursor:default}
.foods-nav .dots{display:flex;align-items:center;gap:9px}
.foods-nav .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);transition:background .2s,transform .2s}
.foods-nav .dots i.on{background:#fff;transform:scale(1.15)}
.foods-side .foods-kicker{font-size:1.9rem;font-weight:800;letter-spacing:.02em;color:#fff;display:block}
.foods-side h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-0.04em;margin-top:4px}
.foods-btn{display:inline-block;margin:22px 0;padding:14px 24px;border:1px solid rgba(255,255,255,.55);border-radius:8px;color:#fff;font-weight:700;font-size:.96rem;letter-spacing:-0.01em;transition:background .2s,color .2s}
.foods-btn:hover{background:#fff;color:#201d18}
.foods-side p{color:rgba(255,255,255,.72);line-height:1.85;font-size:.95rem;letter-spacing:-0.01em}
@media(max-width:860px){.foods-grid{grid-template-columns:1fr;gap:30px}.foods-side{order:-1}}

.mtile.more{display:none}
.mosaic.expanded .mtile.more{display:block}
.more-wrap{text-align:center;margin-top:clamp(20px,3vw,38px);padding-bottom:4px}
.more-btn{font-family:inherit;font-weight:700;font-size:.96rem;letter-spacing:-0.01em;color:var(--ink);background:transparent;border:1.5px solid var(--ink);padding:14px 32px;border-radius:100px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),transform .16s var(--ease)}
.more-btn:active{transform:scale(.97)}
@media(hover:hover){.more-btn:hover{background:var(--ink);color:var(--paper,#fff)}}

.hyslide-sec{padding:clamp(6px,1vw,14px) 0 clamp(58px,8vw,100px)}
.hy-slider{position:relative}
.hy-track{display:flex;gap:clamp(12px,1.5vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.hy-track::-webkit-scrollbar{display:none}
.hy-slide{flex:0 0 clamp(270px,42%,430px);scroll-snap-align:start;margin:0}
.hy-slide img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;background:var(--panel);display:block}
.hy-arrows{display:flex;justify-content:center;gap:12px;margin-top:clamp(20px,2.5vw,28px)}
.hy-arrows button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:1.35rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s var(--ease),color .2s var(--ease)}
@media(hover:hover){.hy-arrows button:hover{background:var(--ink);color:var(--paper,#fff)}}
.price li .nm small{color:var(--muted);font-weight:400;font-size:.8em;margin-left:5px}

/* splash */
.splash{position:fixed;inset:0;z-index:9999;background:#17130e;display:flex;align-items:center;justify-content:center;transition:opacity .7s cubic-bezier(.22,.61,.36,1),visibility .7s}
.splash-in{text-align:center;padding:20px}
.splash-logo{font-size:clamp(2.1rem,7vw,3.4rem);font-weight:800;color:#fff;letter-spacing:-0.035em;line-height:1;opacity:0;transform:translateY(12px);animation:sfin .85s cubic-bezier(.22,.61,.36,1) .1s forwards}
.splash-logo b{color:#cba24e;font-weight:800}
.splash-logo em{font-style:normal;font-size:.4em;font-weight:600;color:rgba(255,255,255,.5);margin-left:.2em;vertical-align:0.35em}
.splash-sub{margin-top:14px;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.5);opacity:0;animation:sfin .85s cubic-bezier(.22,.61,.36,1) .38s forwards}
.splash-bar{width:118px;height:2px;background:rgba(255,255,255,.14);margin:28px auto 0;border-radius:2px;overflow:hidden}
.splash-bar i{display:block;height:100%;width:0;background:#cba24e;animation:sbar 1.4s cubic-bezier(.22,.61,.36,1) .2s forwards}
@keyframes sfin{to{opacity:1;transform:none}}
@keyframes sbar{to{width:100%}}
@media(prefers-reduced-motion:reduce){.splash-logo,.splash-sub{animation:none;opacity:1;transform:none}.splash-bar i{animation:none;width:100%}}
.loc-map{cursor:pointer;text-decoration:none}
a.loc-map .plabel{transition:color .2s}
@media(hover:hover){a.loc-map:hover .plabel{color:var(--ink)}a.loc-map:hover .plabel svg{stroke:var(--ink)}}
.loc-map.has-map{position:relative;overflow:hidden;min-height:340px}
.loc-map.has-map .map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.loc-map.has-map .map-pill{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.8);color:#fff;font-size:.82rem;font-weight:600;padding:9px 15px;border-radius:100px;letter-spacing:-0.01em}
.loc-map.has-map .map-pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
@media(hover:hover){a.loc-map.has-map:hover .map-pill{background:#111}}
.map-link{color:#2f6fed;font-weight:600;font-size:.86rem;margin-left:8px;white-space:nowrap}
@media(hover:hover){.map-link:hover{text-decoration:underline}}

/* ===== mobile optimization ===== */
html{overflow-x:hidden}
@media(max-width:640px){
  .intro p{white-space:normal}
}
@media(max-width:560px){
  :root{--pad:18px}
  .hero-top{flex-wrap:wrap;row-gap:4px}
  .hero h1{font-size:clamp(2rem,9vw,2.8rem)}
  /* price rows: drop dot leader, name left / price right, wrap safely */
  .price li .dot{display:none}
  .price li{justify-content:space-between;gap:12px}
  .price li .nm{flex:1;min-width:0;overflow-wrap:anywhere}
  .price li .nm small{display:block;margin-left:0;margin-top:2px}
  .price li .pr{flex:none;white-space:nowrap}
  /* location + footer wrapping */
  .loc-blk .v,.loc-blk .v [style]{overflow-wrap:anywhere}
  .foot{flex-direction:column;gap:26px}
  .foot-cols{gap:22px 28px}
  .foot-col{flex:1 1 42%}
  .foot-bot{flex-direction:column;gap:8px;align-items:flex-start}
}

/* gallery swipe carousel */
.gallery-sec{overflow:hidden}
.gal-track{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(16px,4vw,80px) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal-item{position:relative;flex:0 0 clamp(280px,72vw,560px);scroll-snap-align:center;margin:0;overflow:hidden;border-radius:14px}
.gal-item img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--panel)}
.gal-nav{display:flex;justify-content:center;gap:12px;margin-top:clamp(20px,2.5vw,28px)}
.gal-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:1.35rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s var(--ease),color .2s var(--ease)}
@media(hover:hover){.gal-nav button:hover{background:var(--ink);color:#fff}}
@media(max-width:560px){.gal-item{flex-basis:86vw;border-radius:10px}}
body,h1,h2,h3,h4,p,span,a,div,li,figcaption{word-break:keep-all;overflow-wrap:break-word}

/* ---------- multipage: solid header on subpages ---------- */
body.subpage header::before{opacity:1}
body.subpage .logo{color:var(--ink)}
body.subpage nav a{color:var(--body)}
body.subpage .hcall{color:var(--ink)}
body.subpage .navtoggle span{background:var(--ink)}
header nav a.active{color:#fff;font-weight:700}
body.subpage header nav a.active{color:var(--ink)}
/* page hero */
.page-hero{padding:clamp(104px,13vw,150px) 0 clamp(30px,5vw,54px);border-bottom:1px solid var(--line-soft)}
.page-hero .crumb{font-size:.78rem;letter-spacing:.02em;color:var(--muted);margin-bottom:14px;display:flex;gap:8px;align-items:center}
.page-hero .crumb a{color:var(--muted)}
.page-hero .crumb a:hover{color:var(--ink)}
.page-hero .crumb span{opacity:.5}
.page-hero h1{font-size:clamp(1.9rem,4.4vw,2.8rem);letter-spacing:-0.045em;line-height:1.12;color:var(--ink);font-weight:800}
.page-hero .lead{margin-top:16px;max-width:640px;color:var(--body);font-size:clamp(.98rem,1.5vw,1.1rem);line-height:1.7;letter-spacing:-0.01em;word-break:keep-all}
/* home hub */
.hub{padding:clamp(48px,7vw,92px) 0}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.hub-card{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--panel);aspect-ratio:4/5;color:#fff}
.hub-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.hub-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72))}
.hub-card .hc-body{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(18px,2vw,26px)}
.hub-card h3{font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:700;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px}
.hub-card h3 i{font-style:normal;transition:transform .3s var(--ease-out)}
.hub-card p{margin-top:6px;font-size:.86rem;color:rgba(255,255,255,.82);line-height:1.5;letter-spacing:-0.01em}
@media(hover:hover){.hub-card:hover img{transform:scale(1.05)}.hub-card:hover h3 i{transform:translateX(5px)}}
@media(max-width:760px){.hub-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.hub-grid{grid-template-columns:1fr}}

/* ---------- home preview sections ---------- */
.home-sec{padding:clamp(58px,8vw,108px) 0}
.home-sec.alt{background:var(--panel)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-bottom:clamp(26px,3.6vw,42px)}
.sec-head .sh-l{max-width:660px}
.sec-head .kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;display:block;margin-bottom:13px}
.sec-head h2{font-size:clamp(1.55rem,3vw,2.3rem);letter-spacing:-0.038em;line-height:1.14;color:var(--ink);font-weight:800}
.sec-head p{margin-top:13px;color:var(--body);font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.65;letter-spacing:-0.01em;word-break:keep-all}
.more-link{flex:none;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.94rem;color:var(--ink);letter-spacing:-0.01em;padding-bottom:3px;border-bottom:1.5px solid var(--ink);white-space:nowrap}
.more-link i{font-style:normal;transition:transform .3s var(--ease-out)}
@media(hover:hover){.more-link:hover i{transform:translateX(4px)}}
.price-mini{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:760px){.price-mini{grid-template-columns:1fr;gap:34px}}
.loc-mini{max-width:760px}

/* home food preview images */
.food-imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.food-imgs figure{margin:0;border-radius:14px;overflow:hidden;background:var(--panel)}
.food-imgs img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
@media(hover:hover){.food-imgs a:hover img{transform:scale(1.04)}}
@media(max-width:560px){.food-imgs{grid-template-columns:1fr}}

/* dish tiles (home + food) */
.dish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.dish{margin:0}
.dish img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block;background:var(--panel)}
.dish figcaption{margin-top:12px;font-weight:700;font-size:1rem;letter-spacing:-0.02em;color:var(--ink)}
@media(max-width:640px){.dish-grid{grid-template-columns:1fr 1fr}}
.food-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block;background:var(--panel)}

/* foods carousel on light home bg (color overrides) */
.home-sec .food-tile figcaption{color:var(--ink)}
.home-sec .foods-nav button{color:var(--ink)}
.home-sec .foods-nav button:hover{color:var(--muted)}
.home-sec .foods-nav button:disabled{color:rgba(0,0,0,.18)}
.home-sec .foods-nav .dots i{background:rgba(0,0,0,.2)}
.home-sec .foods-nav .dots i.on{background:var(--ink)}

/* food detail: dishes as full gallery grid (dark section) */
.foods-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,46px)}
.foods-head .foods-kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:600;display:block;margin-bottom:14px}
.foods-head p{color:rgba(255,255,255,.82);font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.7;max-width:660px;letter-spacing:-0.01em;word-break:keep-all}
.foods .dish-grid figcaption{color:#fff}

/* facilities detail: full spacious gallery grid */
.facil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.3vw,20px);width:100vw;margin-left:calc(50% - 50vw);padding:0 clamp(16px,4vw,72px)}
.facil-grid .gal-item{flex:none;width:auto;scroll-snap-align:none}
.facil-grid .gal-item img{aspect-ratio:4/5}
@media(max-width:900px){.facil-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.facil-grid{grid-template-columns:repeat(2,1fr);gap:8px;padding:0 14px}}

/* ---------- image logo ---------- */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:34px;width:auto;display:block}
.logo .logo-k{display:none}
header.scrolled .logo .logo-w,body.subpage .logo .logo-w{display:none}
header.scrolled .logo .logo-k,body.subpage .logo .logo-k{display:block}
/* 다크모드(시스템, 수동 미지정): 배경이 어두우므로 화이트 로고 유지 */
@media(prefers-color-scheme:dark){
  :root:not([data-theme]) header.scrolled .logo .logo-w,:root:not([data-theme]) body.subpage .logo .logo-w{display:block}
  :root:not([data-theme]) header.scrolled .logo .logo-k,:root:not([data-theme]) body.subpage .logo .logo-k{display:none}
}
/* 수동 다크 → 화이트 로고 */
:root[data-theme="dark"] header.scrolled .logo .logo-w,:root[data-theme="dark"] body.subpage .logo .logo-w{display:block}
:root[data-theme="dark"] header.scrolled .logo .logo-k,:root[data-theme="dark"] body.subpage .logo .logo-k{display:none}
/* 수동 라이트 → 블랙 로고 (시스템이 다크여도 강제) */
:root[data-theme="light"] header.scrolled .logo .logo-w,:root[data-theme="light"] body.subpage .logo .logo-w{display:none}
:root[data-theme="light"] header.scrolled .logo .logo-k,:root[data-theme="light"] body.subpage .logo .logo-k{display:block}
@media(max-width:560px){.logo img{height:29px}}
.foot-logo img{height:44px;width:auto;display:block;margin-bottom:15px}
.splash-logo-img{width:min(240px,58vw);height:auto;opacity:0;transform:translateY(12px);animation:sfin .85s cubic-bezier(.22,.61,.36,1) .1s forwards}

/* ---------- premium splash (kiln-glow + gold sweep + curtain reveal) ---------- */
.splash{position:fixed;inset:0;z-index:9999;background:#17130e;display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:transform 1s cubic-bezier(.76,0,.24,1),visibility 1s;will-change:transform}
.splash-glow{position:absolute;left:50%;top:54%;width:130vmax;height:130vmax;pointer-events:none;
  transform:translate(-50%,-50%) scale(.8);opacity:0;
  background:radial-gradient(circle,rgba(217,168,78,.22) 0%,rgba(168,96,32,.12) 20%,rgba(23,19,14,0) 52%);
  animation:glowin 1.8s cubic-bezier(.22,.61,.36,1) .1s forwards, glowbreathe 4s ease-in-out 1.9s infinite}
@keyframes glowin{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes glowbreathe{0%,100%{opacity:1}50%{opacity:.72}}
.splash-in{position:relative;z-index:2;text-align:center;padding:20px}
.splash-logo{position:relative;display:inline-block;width:min(250px,60vw);
  opacity:0;transform:translateY(16px) scale(.975);animation:sfin .95s cubic-bezier(.22,.61,.36,1) .3s forwards}
.splash-logo img{display:block;width:100%;height:auto}
.splash-logo .lg-gold{position:absolute;inset:0;clip-path:inset(0 100% 0 0);
  filter:drop-shadow(0 0 18px rgba(217,168,78,.45));animation:goldsweep 1.5s cubic-bezier(.6,0,.3,1) .85s forwards}
@keyframes goldsweep{to{clip-path:inset(0 0 0 0)}}
.splash-sub{margin-top:22px;font-size:.82rem;letter-spacing:.14em;color:rgba(255,255,255,.5);
  opacity:0;animation:sfin .9s ease .7s forwards}
.splash-bar{width:132px;height:2px;background:rgba(255,255,255,.1);margin:32px auto 0;border-radius:2px;overflow:hidden}
.splash-bar i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#b07f33,#e8c874);
  animation:sbar 2.2s cubic-bezier(.5,0,.15,1) .35s forwards}
@media(prefers-reduced-motion:reduce){
  .splash-glow,.splash-logo,.splash-logo .lg-gold,.splash-sub,.splash-bar i{animation:none;opacity:1;clip-path:none;transform:none}
  .splash{transition:opacity .4s ease}.splash.done{transform:none;opacity:0}
}

/* ---------- splash refinement: soft light-wash + glint + refined glow ---------- */
.splash-glow{
  background:
    radial-gradient(circle at 50% 52%, rgba(238,208,138,.15) 0%, rgba(238,208,138,0) 25%),
    radial-gradient(circle at 50% 55%, rgba(196,134,64,.10) 0%, rgba(23,19,14,0) 48%) !important;
}
.splash::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 260px 70px rgba(0,0,0,.5)}
/* white base logo softly dims as gold washes in */
.splash-logo .lg-base{opacity:.9}
/* gold washes in on a soft diagonal (no hard highlighter edge) */
.splash-logo .lg-gold{
  clip-path:none;
  -webkit-mask-image:linear-gradient(102deg,#000 32%,transparent 55%);
          mask-image:linear-gradient(102deg,#000 32%,transparent 55%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:240% 100%;mask-size:240% 100%;
  -webkit-mask-position:132% 0;mask-position:132% 0;
  filter:drop-shadow(0 0 16px rgba(217,168,78,.32));
  animation:goldwash 1.9s cubic-bezier(.45,0,.18,1) .8s forwards !important;
}
@keyframes goldwash{to{-webkit-mask-position:-22% 0;mask-position:-22% 0}}
/* soft specular glint travelling once across the mark */
.splash-logo .lg-glint{
  position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:url(images/logo-gold.png) center/contain no-repeat;
          mask:url(images/logo-gold.png) center/contain no-repeat;
  background:linear-gradient(100deg,transparent 43%,rgba(255,249,231,.72) 50%,transparent 57%);
  background-repeat:no-repeat;background-size:230% 100%;background-position:165% 0;opacity:0;
  animation:lgglint 1.6s cubic-bezier(.4,0,.2,1) 1.6s forwards;
}
@keyframes lgglint{
  0%{background-position:165% 0;opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{background-position:-55% 0;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .splash-logo .lg-gold{animation:none;-webkit-mask:none;mask:none}
  .splash-logo .lg-glint{display:none}
}

/* ---------- splash: clean crossfade white->gold + glint (fixes partial reveal) ---------- */
.splash-logo .lg-base{opacity:1;-webkit-mask:none;mask:none;animation:lgfadeout 1.3s ease .95s forwards}
@keyframes lgfadeout{to{opacity:0}}
.splash-logo .lg-gold{
  clip-path:none;-webkit-mask:none;mask:none;
  opacity:0;filter:drop-shadow(0 0 15px rgba(217,168,78,.30));
  animation:lgfadein 1.3s cubic-bezier(.3,0,.2,1) .95s forwards !important;
}
@keyframes lgfadein{to{opacity:1}}
.splash-logo .lg-glint{
  animation:lgglint 1.7s cubic-bezier(.38,0,.2,1) 1.35s forwards;
}
@media(prefers-reduced-motion:reduce){
  .splash-logo .lg-base{animation:none;opacity:0}
  .splash-logo .lg-gold{animation:none !important;opacity:1}
}

/* splash exit: fade out (not curtain-up) */
.splash{transition:opacity .8s ease,visibility .8s;will-change:opacity}
.splash.done{transform:none;opacity:0;visibility:hidden;pointer-events:none}

/* ---------- 360 tour section (home) ---------- */
.tour-box{position:relative;border-radius:18px;overflow:hidden;background:#1c1a17;aspect-ratio:16/8;min-height:280px}
.tour-box::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.06),transparent 60%)}
.tour-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:28px;color:#fff}
.tour-ph .t-ico{width:66px;height:66px;stroke:rgba(255,255,255,.9);fill:none;stroke-width:1.5}
.tour-ph b{font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-0.02em}
.tour-ph em{font-style:normal;font-size:.86rem;letter-spacing:.02em;color:rgba(255,255,255,.55)}
.tour-ph .t-badge{display:inline-flex;align-items:center;gap:8px;margin-top:2px;padding:9px 16px;border:1px solid rgba(255,255,255,.28);border-radius:100px;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.85)}
.tour-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============ editorial refresh: square corners (de-AI) ============ */
.shot,.sauna-media.shot,
.gal-item,.gal-item img,.facil-grid .gal-item,.facil-grid .gal-item img,
.dish img,.food-tile img,.food-tile .fbox,.hy-slide img,
.hub-card,.tour-box,.mtile,.foodph,.loc-map,.gtile .shot,
.pbadge,.pbadge .pb-img img,.proof-grade,
.foods-btn,.more-btn,.btn,.tags span,.t-badge,.map-pill,
.gal-nav button,.hy-arrows button,.foods-nav button{border-radius:0}
@media(max-width:560px){.gal-item{border-radius:0}}

/* square the remaining higher-specificity pills */
.tour-ph .t-badge,.loc-map.has-map .map-pill{border-radius:0 !important}

/* ============ editorial: 섹션 헤더 룰 + 헤딩 크기 ============ */
.home-sec .sec-head{
  align-items:flex-start;
  border-top:1px solid var(--ink);
  padding-top:clamp(16px,2vw,24px);
  margin-bottom:clamp(30px,4.5vw,58px);
}
/* 배경이 바뀌는 alt 섹션은 배경 자체가 경계 — 선 중복 제거 */
.home-sec.alt .sec-head{border-top:0;padding-top:0}
.home-sec .sec-head .more-link{align-self:flex-start;margin-top:3px}
.home-sec .sec-head h2{font-size:clamp(1.55rem,3vw,2.3rem);letter-spacing:-0.038em;line-height:1.14;margin-top:clamp(12px,1.4vw,16px)}
/* margin-top 은 구 규칙에서 승계(기반 13px 보다 큼) — 지우면 여백 줄어듦 */
.home-sec .sec-head p{margin-top:clamp(13px,1.4vw,18px);font-size:clamp(.95rem,1.4vw,1.05rem)}
.foods-head p{font-size:clamp(1rem,1.4vw,1.12rem)}
.intro h1{font-size:clamp(1.9rem,4.6vw,3rem);letter-spacing:-0.045em;line-height:1.14}
.page-hero h1{font-size:clamp(1.9rem,4.4vw,2.8rem);letter-spacing:-0.045em;line-height:1.12}

/* ============ facility editorial blocks (sauna-tokyo style) ============ */
.fac-list{padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,40px)}
.fac-block{display:flex;gap:clamp(26px,4.5vw,72px);align-items:center;margin-bottom:clamp(52px,8vw,116px)}
.fac-block:last-child{margin-bottom:0}
.fac-block:nth-child(even){flex-direction:row-reverse}
.fac-media{flex:1 1 56%;min-width:0;display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:4/3.1}
.fac-media img{width:100%;height:100%;object-fit:cover;display:block;background:var(--panel)}
.fac-media img:first-of-type{grid-row:1 / span 2}
.fac-text{flex:1 1 44%;min-width:0}
.fac-no{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;background:var(--ink);color:var(--paper);font-weight:800;font-size:.98rem;margin-bottom:clamp(16px,2vw,22px)}
.fac-text h2{font-size:clamp(1.4rem,2.4vw,1.95rem);font-weight:800;letter-spacing:-0.035em;line-height:1.18;color:var(--ink)}
.fac-text h2 em{display:block;font-style:normal;font-weight:600;font-size:.5em;letter-spacing:.06em;color:var(--muted);margin-top:8px;text-transform:uppercase}
.fac-text p{margin-top:clamp(16px,2vw,22px);color:var(--body);font-size:clamp(.96rem,1.35vw,1.05rem);line-height:1.85;letter-spacing:-0.01em;word-break:keep-all;max-width:46ch}
.fac-more h2{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:800;letter-spacing:-0.03em;border-top:1.5px solid var(--ink);padding-top:clamp(16px,2vw,24px);margin-bottom:clamp(24px,3.5vw,40px)}
@media(max-width:760px){
  .fac-block,.fac-block:nth-child(even){flex-direction:column;gap:20px}
  .fac-media{width:100%;aspect-ratio:4/3}
  .fac-text p{max-width:none}
}

/* home facility blocks: no number badge, tighter top */
.home-facs{padding-top:0}
.home-facs .fac-block{margin-bottom:clamp(40px,6vw,84px)}

/* ============ vertical square label on facility media (sauna-tokyo) ============ */
.fac-media{position:relative;overflow:visible}
.fac-tag{position:absolute;left:0;bottom:-16px;z-index:4;
  background:var(--ink);color:var(--paper);
  writing-mode:vertical-rl;text-orientation:upright;
  font-weight:700;font-size:clamp(.92rem,1.3vw,1.08rem);letter-spacing:.14em;line-height:1;
  padding:clamp(16px,1.8vw,22px) clamp(11px,1vw,14px);
  min-height:clamp(96px,12vw,128px);
  display:inline-flex;align-items:center;justify-content:center}
@media(max-width:760px){.fac-tag{bottom:-12px}}

/* ============ trust: de-card (frameless awards + ruled grade) ============ */
.pbadge{border:0 !important;background:transparent;overflow:visible}
.pbadge .pb-img{background:transparent;padding:0;aspect-ratio:3/4;align-items:flex-end}
.pbadge .pb-img img{border-radius:0;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.pbadge .pb-cap{border-top:0 !important;padding:16px 0 0}
.pbadge .pb-cap h3{font-size:1rem;font-weight:700}
.pbadge .pb-cap p{margin-top:5px}
.proof-badges{gap:clamp(20px,3vw,44px)}
/* hygiene grade: ruled line instead of boxed card */
.proof-grade{border:0 !important;background:transparent;border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;padding:clamp(16px,2vw,22px) 2px !important}

/* 4-image block: clean 2x2 grid */
.fac-media.m4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1/1}
.fac-media.m4 img:first-of-type{grid-row:auto;grid-column:auto}

/* 2-image block: side by side */
.fac-media.m2{grid-template-columns:1fr 1fr;grid-template-rows:1fr;aspect-ratio:2/1.15}
.fac-media.m2 img:first-of-type{grid-row:auto;grid-column:auto}

/* 1-image block: single photo */
.fac-media.m1{grid-template-columns:1fr;grid-template-rows:1fr;aspect-ratio:4/3}
.fac-media.m1 img:first-of-type{grid-row:auto;grid-column:auto}
@media(max-width:760px){.fac-media.m1{aspect-ratio:4/5}}

/* 황토방(m4): show a single image on mobile */
@media(max-width:760px){
  .fac-media.m4{grid-template-columns:1fr;grid-template-rows:1fr;aspect-ratio:4/3}
  .fac-media.m4 img:not(:first-of-type){display:none}
}

/* 황토방 single mobile image: larger (portrait) */
@media(max-width:760px){.fac-media.m4{aspect-ratio:4/5}}

/* home 황토방: single large image on desktop too */
.home-facs .fac-media.m4{grid-template-columns:1fr;grid-template-rows:1fr;aspect-ratio:4/5}
.home-facs .fac-media.m4 img:not(:first-of-type){display:none}

/* ============ de-tech: remove EN uppercase labels + section numbers ============ */
.home-sec .sec-head .kicker{display:none}      /* removes EN kicker + counter number */
.fac-no{display:none}                          /* facility 01..06 number badges */
.foods-head .foods-kicker{display:none}        /* FOODS label */
.fac-text h2 em{display:none}                  /* EN facility subtitles */
/* tidy heading spacing now that kicker is gone */
.home-sec .sec-head h2{margin-top:clamp(4px,0.6vw,8px)}
.fac-text h2{margin-bottom:0}

/* ============ giant faint 黃土 hanja watermark (traditional layer) ============ */
.intro{position:relative;overflow:hidden}
.intro .shell{position:relative;z-index:2}
.hanja-bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  font-family:"Nanum Myeongjo","AppleMyungjo","Songti SC","SimSun",serif;font-weight:900;
  font-size:clamp(240px,46vw,640px);line-height:.82;letter-spacing:.06em;white-space:nowrap;
  color:var(--ink);opacity:.05}

/* ============ per-facility hanja watermark ============ */
.fac-block{position:relative}
.fac-block>.fac-media,.fac-block>.fac-text{position:relative;z-index:1}
.fac-hanja{position:absolute;z-index:0;pointer-events:none;user-select:none;top:50%;transform:translateY(-50%);
  font-family:"Nanum Myeongjo","AppleMyungjo","Songti SC","SimSun",serif;font-weight:900;
  font-size:clamp(170px,27vw,400px);line-height:.72;color:var(--ink);opacity:.05}
.fac-block:nth-child(odd) .fac-hanja{right:1%}
.fac-block:nth-child(even) .fac-hanja{left:1%}
@media(max-width:760px){.fac-hanja{font-size:clamp(150px,45vw,240px);opacity:.045}}

/* ============ layered/overlapping mosaic (3-image blocks) ============ */
.fac-media:not(.m2):not(.m4){overflow:visible}
.fac-media:not(.m2):not(.m4) img{outline:5px solid var(--paper);outline-offset:0}
.fac-media:not(.m2):not(.m4) img:first-of-type{position:relative;z-index:1}
.fac-media:not(.m2):not(.m4) img:nth-of-type(2),
.fac-media:not(.m2):not(.m4) img:nth-of-type(3){position:relative;z-index:2;transform:translateX(-14%);
  box-shadow:-12px 0 34px rgba(0,0,0,.16)}
@media(max-width:760px){
  .fac-media:not(.m2):not(.m4) img:nth-of-type(2),
  .fac-media:not(.m2):not(.m4) img:nth-of-type(3){transform:none;box-shadow:none}
}

/* fix: keep 黃土 fully inside intro (no clipping) */
.intro{overflow:hidden;padding:clamp(120px,16vw,210px) 0;min-height:0}
.hanja-bg{font-size:min(40vw,460px);line-height:1;letter-spacing:.04em;
  max-width:96vw;overflow:visible}

/* 360 tour embed: taller viewer + framed */
.tour-box{aspect-ratio:16/9;min-height:420px}
.tour-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:560px){.tour-box{aspect-ratio:3/4;min-height:460px}}

/* mobile 黃土: hard-fit width, no clip */
@media(max-width:640px){.hanja-bg{font-size:34vw;letter-spacing:0;white-space:nowrap}}

/* mobile menu close (X) button */
.mmenu-close{position:absolute;top:14px;right:14px;z-index:3;width:46px;height:46px;padding:0;
  background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.mmenu-close svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
@media(hover:hover){.mmenu-close:hover{opacity:.6}}

/* ============ hero tagline (bottom-left, large) ============ */
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(48px,7vw,92px);z-index:3;
  padding:0 var(--pad);pointer-events:none}
.hero-copy .hc-title{color:#fff;font-weight:800;letter-spacing:-0.02em;line-height:1.02;
  font-size:clamp(2.6rem,7.6vw,6rem);text-shadow:0 2px 30px rgba(0,0,0,.35);
  opacity:0;transform:translateY(20px);
  animation:heroCopyIn 1s cubic-bezier(.22,.61,.36,1) .15s forwards}
.hero-copy .hc-sub{color:rgba(255,255,255,.92);font-weight:400;
  font-size:clamp(.98rem,1.7vw,1.28rem);letter-spacing:-0.01em;word-break:keep-all;
  margin-top:clamp(14px,1.8vw,22px);max-width:32em;text-shadow:0 1px 16px rgba(0,0,0,.4);
  opacity:0;transform:translateY(20px);
  animation:heroCopyIn 1s cubic-bezier(.22,.61,.36,1) .3s forwards}
@keyframes heroCopyIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero-copy .hc-title,.hero-copy .hc-sub{animation:none;opacity:1;transform:none}}

/* hero slideshow — 3 images cross-fade */
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.4s ease;z-index:0}
.hero-slide.on{opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.12) 62%,rgba(0,0,0,.6) 100%)}

/* hero slideshow progress bars */
.hero-prog{position:absolute;right:var(--pad);bottom:clamp(48px,7vw,92px);z-index:3;
  display:flex;gap:10px}
.hp-bar{width:clamp(34px,4vw,52px);height:3px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.30);position:relative;overflow:hidden;display:block}
.hp-bar i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.hp-bar.active i{animation:hpFill 5s linear forwards}
.hp-bar.done i{transform:scaleX(1)}
@keyframes hpFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.hp-bar.active i{animation:none;transform:scaleX(1)}}
@media(max-width:640px){.hero-prog{right:auto;left:var(--pad);bottom:clamp(28px,6vw,44px)}}

/* ============ 모바일: 인증 배지를 가로 행 리스트로 (3개가 한 화면에) ============
   de-card 블록(.pbadge{border:0!important})보다 뒤에 와야 하므로 파일 끝에 배치 */
@media(max-width:480px){
  .proof-badges{grid-template-columns:1fr;max-width:none;margin:0;gap:0}
  .pbadge{flex-direction:row;align-items:center;gap:16px;padding:15px 0;
    border-bottom:1px solid var(--line-soft)!important}
  .pbadge:last-child{border-bottom:0!important}
  .pbadge .pb-img{flex:0 0 92px;aspect-ratio:3/4;align-items:center;justify-content:flex-start}
  .pbadge .pb-cap{flex:1;min-width:0;padding:0}
}

/* ============ 스플래시: 실제 대욕장 배경 + 웜 다크 스크림 ============
   .splash 정의가 앞쪽에 3곳(477·637·722행) 있어 이 규칙이 파일 끝에 있어야 적용됨.
   스크림 농도(.82/.92)를 낮추면 사진이 더 드러나고, 높이면 더 묻힙니다. */
.splash{
  background-color:#17130e;
  background-image:
    linear-gradient(rgba(23,19,14,.82),rgba(23,19,14,.92)),
    url(../images/splash-bath.jpg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ============ 서브페이지: 홈으로 돌아가기 쉽게 ============
   breadcrumb 의 '홈' 이 .78rem/muted 라 모바일에서 보이지도 눌리지도 않아 보강.
   (앞쪽 .page-hero .crumb 정의보다 뒤여야 적용됨) */
.page-hero .crumb{font-size:.85rem}
.page-hero .crumb a{color:var(--body);font-weight:600;
  padding:9px 2px;margin:-9px 0;display:inline-flex;align-items:center;gap:5px}
.page-hero .crumb a::before{content:"←";font-weight:700;opacity:.8}
@media(hover:hover){.page-hero .crumb a:hover{color:var(--ink)}}
/* 모바일 메뉴 '홈' 은 첫 항목이라 살짝 구분 */
@media(max-width:900px){
  .mmenu nav a[href="index.html"]{position:relative;margin-bottom:6px}
  .mmenu nav a[href="index.html"]::after{content:"";position:absolute;left:20px;right:20px;bottom:0;
    height:1px;background:var(--line)}
}

/* ============ 라이트박스: 갤러리 이전/다음 ============ */
.gal-item img,.fac-media img{cursor:zoom-in}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.lb-prev{left:clamp(6px,2vw,22px)}
.lb-next{right:clamp(6px,2vw,22px)}
@media(hover:hover){.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.26)}}

/* ============ 데스크탑 헤더: 메뉴를 우측으로 ============
   .bar 가 justify-content:space-between 이라 자식 5개(로고·메뉴·전화·토글·햄버거)가
   균등 분산되면서 메뉴가 좌측에 치우쳤다. 로고만 좌측에 고정하고 나머지를 우측으로 묶는다.
   (모바일 ≤900 은 기존 규칙 유지 — 메뉴·전화가 숨고 햄버거만 노출) */
@media(min-width:901px){
  header .bar{justify-content:flex-end}
  header .bar>.logo{margin-right:auto}
  header .bar>nav{margin-right:14px}
}

/* ============ 본문 줄바꿈 다듬기 ============
   word-break:keep-all 은 단어 안은 안 자르지만 '띄어쓰기'에선 자른다.
   그래서 링크 라벨('청결과 인증')이나 고유명사('강원 정선')가 두 줄로 갈라진다.
   .nb 로 감싼 덩어리는 통째로 붙여서 넘긴다. */
.nb{white-space:nowrap}
.pw-foot .pw-em{color:var(--ink);font-weight:700}
.pw-foot .pw-link{color:var(--ink);font-weight:700;text-decoration:underline;white-space:nowrap}

/* ============ 포인트 컬러 #ffbe00 ============
   대비: 흰 지면 1.66:1 / 패널 1.53:1 → 밝은 배경의 '글자'로는 절대 쓰지 않는다.
         다크 지면 11.3:1 / 푸터 10.6:1 → 어두운 면에서는 글자에도 안전.
   역할을 하나로 고정한다: (A) '누를 수 있다'는 신호, (C) 푸터의 라벨.
   지난번(daed52b) 실패는 색이 아니라 '역할 없는 장식 블록'이었던 게 원인. */
:root{--accent:#ffbe00}

/* A. 상호작용 — hover 시 글자·화살표·밑줄이 모두 앰버로
   주의: 흰 지면 대비 1.66:1 이라 밝은 배경에서는 흐리게 보인다.
   기본 상태(검정)는 대비를 충족하고 hover 는 일시적 상태라 감수한 선택.
   너무 흐리면 --accent 대신 #b88900(3.17:1) 정도로 낮추면 된다. */
.more-link{transition:color .18s var(--ease-out),border-bottom-color .18s var(--ease-out)}
.more-link i{transition:transform .3s var(--ease-out),color .18s var(--ease-out)}
@media(hover:hover){
  .more-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .more-link:hover i{color:var(--accent)}
}
/* 키보드 포커스 — 기존엔 표시가 없었다. 접근성 개선 겸 포인트 컬러 활용 */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* C. 푸터(#191919, 대비 10.6:1) — 여기서는 글자에 써도 안전 */
.foot-col h4{color:var(--accent)}
@media(hover:hover){.foot-col a:hover{color:var(--accent)}}

/* ============ 히어로 높이 축소 ============
   100svh 는 첫 화면을 꽉 채우면서 담긴 건 한 줄뿐이라 '빈 큰 화면'으로 읽혔다.
   72svh 로 줄여 아래 섹션이 살짝 걸치게 하면 스크롤 유도가 자연스러워진다.
   (히어로 내부 요소는 모두 bottom 기준이라 함께 올라온다) */
.hero{min-height:72svh}
@supports not (height:1svh){.hero{min-height:72vh}}

/* ============ 인트로 브랜드 문장 ============
   시(詩) 형식이라 행갈이가 의미를 갖는다. 모바일에서 한 줄이 두 줄로 접히면
   운율이 깨지므로 글자 크기를 억제하고 keep-all 로 단어 중간 절단을 막는다. */
.intro-poem{margin:clamp(24px,3.4vw,40px) auto 0;color:var(--body);
  font-size:clamp(.98rem,1.35vw,1.14rem);line-height:2.1;letter-spacing:-0.01em;
  word-break:keep-all;white-space:normal}
.intro-poem span{display:block;margin-top:1.5em}
@media(max-width:560px){.intro-poem{font-size:.94rem;line-height:1.95}}

/* ============ 인트로: 가운데 정렬 ============
   앞서 2열 비대칭(제목 좌 / 문장 우)을 시도했다가 되돌린 자리다.
   덧칠이 쌓이지 않도록 관련 규칙을 여기 한 블록으로 모아둔다. */
.intro{text-align:center}
.intro .shell{display:block}
.intro-poem{margin:clamp(30px,4vw,58px) auto 0;text-align:center}
@media(max-width:760px){.intro-poem{margin-top:clamp(24px,4.5vw,38px)}}

/* 인트로 배경 일러스트 — .intro 는 position:relative + overflow:hidden 이고
   .shell 이 z-index:2 라 ::before 를 깔면 글자 뒤로 들어간다.
   다크모드에서는 밝은 그림이 떠 보이므로 더 낮춘다. */
.intro::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../images/intro-bg.jpg) center/cover no-repeat;opacity:.17}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .intro::before{opacity:.08}}
:root[data-theme="dark"] .intro::before{opacity:.08}

/* 시설 섹션 하단 CTA — 시설 3개를 다 본 직후가 '전체 보기'를 누르는 자리 */
.fac-cta{margin-top:clamp(30px,4.5vw,56px)}

/* 시설 하단 CTA 여백 정리 — .fac-list 아래 패딩과 .fac-cta 위 마진이 겹쳐 쌓여
   버튼이 위아래 똑같이 떠 있었다(96px / 108px). 위쪽에 붙여 소속을 분명히 한다. */
.home-facs{padding-bottom:0}
.fac-cta{margin-top:clamp(26px,3.2vw,40px)}

/* 시설 하단 CTA — 글자 폭에 붙지 않고 콘텐츠 폭 전체로 늘린다.
   화살표를 오른쪽 끝으로 밀어 한 줄 전체가 클릭 영역이 되고,
   밑줄이 섹션을 가로지르는 룰 라인 역할까지 한다. */
/* 홈에 없는 세 곳(원목 사우나·대욕장·냉탕)을 썸네일로 먼저 보여주고 버튼으로 잇는다.
   '더 있다'를 문장으로 설명하는 대신 눈으로 보여주는 방식. */
.fac-cta{text-align:center}
.fac-cta-link{display:block;color:inherit}
.fm-thumbs{display:flex;justify-content:center;gap:clamp(9px,1.3vw,18px);flex-wrap:wrap}
.fm-t{display:block;width:clamp(90px,13vw,148px)}
.fm-t img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--panel);
  transition:transform .5s var(--ease-out)}
.fm-t em{display:block;margin-top:9px;font-style:normal;font-size:.78rem;
  color:var(--muted);letter-spacing:-0.01em;word-break:keep-all}
.fm-btn{display:inline-block;margin-top:clamp(22px,2.8vw,32px);
  padding:14px 28px;border:1.5px solid var(--accent);color:var(--accent);
  font-weight:700;font-size:.96rem;letter-spacing:-0.01em;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out),
    background .2s var(--ease-out)}
/* 썸네일 영역이 잘려 보이지 않게 컨테이너는 overflow 를 막지 않는다 */
.fm-t{overflow:hidden}
@media(hover:hover){
  .fac-cta-link:hover .fm-t img{transform:scale(1.06)}
  /* 기본이 이미 앰버라 hover 는 옅은 앰버 바탕으로 구분 (레이아웃 변화 없음) */
  .fac-cta-link:hover .fm-btn{background:color-mix(in srgb,var(--accent) 15%,transparent)}
}

/* ============ 섹션 여백 축소 + 리듬 부여 ============
   기존: 모든 home-sec 이 위아래 108px 로 동일 → 흰↔흰 경계에서 216px 빈 띠가 생기고
   6개가 예외 없이 같아 기계적으로 읽혔다.
   흰 섹션은 줄이고, 배경색이 깔린 alt 섹션은 색 블록 안쪽 숨통이 필요하므로 조금 더 준다. */
.home-sec{padding:clamp(48px,6.2vw,84px) 0}
.home-sec.alt{padding:clamp(56px,7.4vw,100px) 0}

/* ============ 시설 스크롤 스트립 ============
   세로 스크롤 진행도에 맞춰 가로로 흐르는 이미지 줄.
   .shell 안에 있으므로 코드베이스가 이미 쓰는 풀블리드 기법(100vw + 음수 마진)으로 화면 끝까지 뺀다. */
.fac-strip{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
  margin-top:clamp(30px,4vw,54px)}
/* 자동 무한 흐름. JS가 원본 세트를 한 벌 복제해 트랙이 정확히 2배가 되므로
   -50% 가 원본 시작과 겹쳐 이음매가 보이지 않는다.
   간격은 flex gap 이 아니라 각 이미지의 margin-right 로 준다 —
   gap 은 마지막 항목 뒤에 간격이 없어 -50% 지점이 반 칸 어긋난다. */
.fs-track{display:flex;width:max-content;will-change:transform;
  animation:fsMarquee 42s linear infinite}
@keyframes fsMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* aspect-ratio 를 명시해야 lazy 이미지가 로드되기 전에도 폭을 차지한다 */
.fs-track img{height:clamp(140px,20vw,260px);aspect-ratio:4/3;width:auto;display:block;
  object-fit:cover;background:var(--panel);flex:none;margin-right:clamp(8px,1vw,14px)}
@media(hover:hover){.fac-strip:hover .fs-track{animation-play-state:paused}}
/* 모션을 줄인 사용자: 자동 이동을 끄고 손으로 넘기게 */
@media(prefers-reduced-motion:reduce){
  .fac-strip{overflow-x:auto}
  .fs-track{animation:none}
}

/* ============ 인트로 여유롭게 ============
   제목이 800/-0.045em/1.14 로 꽉 조인 '임팩트' 세팅이라 아래 시(詩)의 차분함과 부딪혔다.
   굵기를 낮추고 자간·행간을 풀어 호흡을 준다. 여백만 늘리면 그냥 비어 보인다.
   (.intro h1 은 427·762행에 두 번 정의돼 있어 이 블록이 파일 뒤쪽에 있어야 적용됨) */
.intro h1{font-weight:700;letter-spacing:-0.018em;line-height:1.42}
.intro-poem{margin-top:clamp(60px,7.6vw,128px);line-height:2.3;letter-spacing:0}
.intro-poem span{margin-top:1.7em}
@media(max-width:760px){.intro-poem{margin-top:clamp(40px,6.5vw,62px);line-height:2.05}}

/* 인트로 글자 크기 — 문장 28px, 제목은 그보다 살짝 크게.
   1037행에 560px 이하 문장 크기 규칙이 있는데 이 블록이 더 뒤라 덮어쓴다.
   → 모바일 값을 여기서 다시 지정해야 28px 이 작은 화면까지 튀지 않는다. */
.intro h1{font-size:clamp(2rem,4.9vw,3.3rem)}
.intro-poem{font-size:clamp(1.02rem,1.95vw,1.75rem)}
@media(max-width:560px){.intro-poem{font-size:.98rem;line-height:2}}

/* 지도보기 링크 — 사이트에서 유일하게 팔레트 밖이던 파랑(#2f6fed)을 포인트 컬러로 통일.
   다크(기본값) 11.26:1 로 선명. 라이트에서는 1.66:1 이라 흐리므로 밑줄을 상시 노출해
   색에만 의존하지 않게 한다(색각 이상 사용자에게도 링크임이 전달됨). */
.map-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){.map-link:hover{text-decoration-thickness:2px}}

/* '자세히 보기' 링크 — hover 때만이 아니라 기본 상태부터 포인트 컬러.
   다크(현재 기본값)에서 11.26:1 로 선명. 색이 이미 앰버라 hover 구분은
   기존 화살표 이동(.more-link:hover i)이 맡는다. */
.more-link{color:var(--accent);border-bottom-color:var(--accent)}

/* ============ 히어로 스크롤 유도 ============
   기존은 1px 선이 scaleY 로 늘었다 줄었다 하는 방식이라, SCROLL 글자를 빼고 나니
   거의 안 보였다. 가는 트랙 위로 밝은 빛이 '아래로 흘러내리게' 해서
   글자 없이도 방향(아래로)이 읽히게 한다. (앞쪽 .cue 규칙보다 뒤여야 적용됨) */
.cue{margin-top:0;margin-bottom:clamp(8px,1.2vw,14px);gap:0}
.cue i{position:relative;width:1px;height:clamp(44px,5vw,64px);overflow:hidden;
  background:rgba(255,255,255,.22);transform:none;animation:none}
.cue i::after{content:"";position:absolute;left:0;top:0;width:100%;height:45%;
  background:linear-gradient(transparent,rgba(255,255,255,.95));
  animation:cueRun 2.3s cubic-bezier(.45,0,.25,1) infinite}
@keyframes cueRun{0%{transform:translateY(-110%)}70%,100%{transform:translateY(240%)}}
@media(prefers-reduced-motion:reduce){
  .cue i::after{animation:none;transform:translateY(120%)}
}
/* .hero 는 flex-direction:column 인데 히어로 카피를 지운 뒤 흐름에 남은 자식이
   .cue 하나뿐이라 맨 위(헤더 뒤)로 올라가 안 보였다. auto 마진으로 하단에 붙인다. */
.cue{margin-top:auto}

/* ============ 화면에서만 감추기 ============
   opacity:0 이나 visibility:hidden 은 자리를 그대로 차지해 빈 여백이 남는다.
   clip 방식은 자리까지 없애면서 스크린리더·검색엔진에는 그대로 읽힌다
   (이 사이트가 .pw-table thead 에 이미 쓰는 기법). */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 인증 섹션은 보이는 제목이 없으므로 상단 여백을 줄인다 */
#proof.pt-xl{padding-top:clamp(28px,3.4vw,48px)}

/* ============ 푸터: 로고+SNS / 세로 사업자정보 / 저작권 (Spadium 레퍼런스) ============ */
.foot-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.foot-head .foot-logo{margin:0}
.foot-head .foot-logo img{height:40px;width:auto;display:block;margin:0}
.foot-sns{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:rgba(255,255,255,.08);color:#fff;transition:background .2s var(--ease-out)}
.foot-sns svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.foot-social{display:flex;align-items:center;gap:9px}
@media(hover:hover){.foot-sns:hover{background:rgba(255,255,255,.18)}}
/* 사업자정보 — 한 항목 한 줄, '라벨 : 값' */
.foot-biz{display:flex;flex-direction:column;gap:5px;margin-top:clamp(14px,2vw,22px);
  font-size:.85rem;line-height:1.45;color:rgba(255,255,255,.56);letter-spacing:-0.01em}
.foot-biz i{font-style:normal;color:rgba(255,255,255,.4)}
.foot-biz i::after{content:" :";white-space:pre}
.foot-biz a{color:inherit}
@media(hover:hover){.foot-biz a:hover{color:rgba(255,255,255,.9)}}
/* 저작권 한 줄 */
footer .foot-bot{display:block;margin-top:clamp(12px,1.6vw,18px);padding-top:13px;
  border-top:1px solid var(--hero-line);font-size:.8rem;color:rgba(255,255,255,.4)}

/* ============ 언어 전환 (KR / EN) ============
   테마 토글과 같은 색 규칙: 히어로 위에선 흰색, 스크롤·서브페이지에선 잉크색. */
.langtoggle{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;letter-spacing:.02em}
.langtoggle a{color:rgba(255,255,255,.5);transition:color .2s var(--ease-out)}    /* 히어로: 비활성=흐린 흰색 */
.langtoggle a[aria-current]{color:#fff}                                          /* 히어로: 활성=흰색 */
.langtoggle a:not([aria-current]){cursor:pointer}
.langtoggle a + a::before{content:"/";margin-right:6px;color:rgba(255,255,255,.32);font-weight:400}
/* 스크롤·서브페이지(밝은 배경): 활성=검정, 비활성=회색 */
header.scrolled .langtoggle a,body.subpage .langtoggle a{color:var(--muted)}
header.scrolled .langtoggle a[aria-current],body.subpage .langtoggle a[aria-current]{color:var(--ink)}
header.scrolled .langtoggle a + a::before,body.subpage .langtoggle a + a::before{color:var(--line)}
@media(hover:hover){.langtoggle a:not([aria-current]):hover{color:var(--accent)}}
/* 모바일에서도 헤더에 KR/EN 노출 — 우측(테마·햄버거)과 묶는다.
   기존엔 숨기고 햄버거 메뉴에만 있었는데 잘 안 보인다는 피드백. */
@media(max-width:900px){
  .bar .langtoggle{display:inline-flex;margin-left:auto}
  .bar .themetoggle{margin-left:6px}
}
.mmenu-lang{margin-top:22px;display:inline-flex;gap:10px;font-size:1rem;font-weight:700;color:var(--muted)}
.mmenu-lang a{padding:6px 12px;border:1px solid var(--line);border-radius:100px;color:var(--ink)}
.mmenu-lang a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}