/* munjasalad.com — 단일 스타일시트 · 디자인 2차(2026-10-24 사용자 "디자인이 또 안 예쁜 것 같은데 좀 예쁘게")
   - 색은 간판 실사에서 뽑았다: 검정 판(#0b0a10 계열) · 라일락 필기체(#ccbcef) · 로비 민트 조명(#7fd0a8, 그림에만).
   - 모양: 사진은 아치(위가 반원 — 로비 간판의 곡선) · 버튼은 둥근 알약. 면은 명도 단계로만 나눈다(그림자·그라데이션·1px 상자 없음).
   - 외부 글꼴·외부 요청 0건. 시스템 글꼴 + 워드마크는 SVG 윤곽(build.mjs). 클라이언트 JS 0KB — 상호작용은 CSS와 <details>뿐.
   - 움직임은 CSS만(스크롤 연동은 animation-timeline). 주의: opacity:0으로 시작하지 않는다 — 글이 숨겨진 채 남을 수 있고
     검수 「숨긴 텍스트」가 그것을 잡는다. 위치(translate)만 움직인다. 움직임 줄이기 설정이면 전부 끈다.
   - 검수 연동: 터치 타깃 48px(min-height) · 하단 고정 바 높이 --bar와 body 하단 여백 연동 · html/body 가로 넘침 차단 ·
     iOS safe-area. 기준표는 DESIGN.md. */

:root{
  --bg:#0b0a10;           /* 바탕 — 간판 검정 */
  --s1:#13111a;           /* 면 한 단계 */
  --s2:#1b1824;           /* 면 두 단계 (FAQ 열림·칩) */
  --s3:#252030;           /* 면 세 단계 (누름·호버) */
  --ink:#f3f0f8;          /* 본문 잉크 */
  --ink2:#e3dfeb;         /* 긴 답변 글 — 잉크보다 한 단계 부드럽게 */
  --mute:#aba5ba;         /* 보조 글 — 본문에는 쓰지 않는다 */
  --lilac:#ccbcef;        /* 강조 — 간판 필기체 색. 버튼·링크·사실 줄·워드마크 */
  --lilac2:#e4dbfa;       /* 밝은 강조 (호버) */
  --on:#17111f;           /* 라일락 위 글자 */
  --line:#2b2638;         /* 표 안의 줄에만 */
  --wrap:80rem;           /* 페이지 폭 */
  --gut:20px;             /* 휴대폰 좌우 여백 (PC 32px) */
  --r:16px;               /* 사진·면 모서리 */
  --bar:64px;             /* 하단 고정 바 높이 — body 여백과 같은 값을 쓴다(measure가 대조) */
  color-scheme:dark;
}

*{box-sizing:border-box}
/* 가로 넘침 차단 — clip은 스크롤 컨테이너를 만들지 않으므로 하단 고정 바를 건드리지 않는다 */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; touch-action:manipulation;
  /* 고정 바가 목차 이동·키보드 초점 대상을 가리지 않게 — 그 높이만큼 위에서 멈춘다 */
  scroll-padding-bottom:calc(var(--bar) + 16px)}
a,summary{-webkit-tap-highlight-color:rgba(204,188,239,.18)}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",
       "Hiragino Sans","Noto Sans JP","PingFang TC","Microsoft JhengHei","PingFang SC","Microsoft YaHei",sans-serif;
  /* 줄바꿈: 한국어만 어절 보존(keep-all). 일본어·중국어에 keep-all을 걸면 문장 전체가 한 낱말이 되어 「、」「，」가
     줄 머리로 밀려났다(2026-10-24 실측 — /ja/first-time·/zh-hk 첫 화면). 그쪽은 기본 규칙 + 금칙(line-break:strict). */
  overflow-wrap:break-word; overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  /* 하단 고정 바가 본문 마지막을 가리지 않게 한다 (iOS 홈바 포함) */
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom, 0px));
}
img,svg{max-width:100%}
:lang(ko){word-break:keep-all}
:lang(ja),:lang(zh){line-break:strict}
.nw{white-space:nowrap}   /* 제목 속 붙임표 낱말(Gunam-ro 등)이 붙임표에서 갈라지지 않게 — build.mjs가 감싼다 */

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;z-index:200;background:var(--lilac);color:var(--on);padding:12px 16px;border-radius:999px}
:focus-visible{outline:3px solid var(--lilac2);outline-offset:3px}

/* ── 틀 ─────────────────────────────────── */
header.site,main > *,footer.site{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
main{display:block}

/* ── 머리 — 워드마크 + 언어 ─────────────── */
header.site{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--lilac);text-decoration:none}
.brand .wm{height:30px;width:auto;fill:currentColor;flex:none}
.brand .bn{color:var(--mute);font-size:13px;font-weight:600;letter-spacing:.04em;line-height:1.3;white-space:nowrap}

/* 언어 — <details> 한 개(JS 없음). 펼친 목록은 떠 있는 판이라 그림자를 허용한다 */
nav.lang{position:relative}
nav.lang summary{
  min-height:48px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;
  border-radius:999px;background:var(--s1);color:var(--ink);font-size:15px;font-weight:600;
  cursor:pointer;list-style:none;
}
nav.lang summary::-webkit-details-marker{display:none}
nav.lang .ic{width:18px;height:18px;fill:var(--lilac);flex:none}
nav.lang summary span{white-space:nowrap}
nav.lang summary::after{content:"";width:7px;height:7px;margin-left:2px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:translateY(-2px) rotate(45deg);transition:transform 200ms cubic-bezier(.2,.7,.2,1)}
nav.lang details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
nav.lang ul{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:14rem;margin:0;padding:8px;list-style:none;
  background:var(--s2);border-radius:18px;
}
/* 그림자는 펼쳤을 때만 — 접힌 목록은 화면에 없으므로 「쉬고 있는 그림자」가 아니게 한다 */
nav.lang details[open] ul{box-shadow:0 22px 48px rgba(0,0,0,.55)} /* taste-skill-ignore — 펼친 메뉴(떠 있는 판) */
nav.lang li{margin:0}
nav.lang li a,nav.lang li span{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;
  color:var(--ink);text-decoration:none;font-size:15px}
nav.lang li [aria-current]{color:var(--lilac);font-weight:700}

/* ── 브레드크럼 ── */
.crumb{margin:4px auto 12px}
.crumb ol{display:flex;flex-wrap:wrap;gap:.1em .55em;list-style:none;margin:0;padding:0;font-size:14px;color:var(--mute)}
.crumb li{display:flex;align-items:center;gap:.55em;min-height:1.6em}
.crumb li+li::before{content:"›";color:var(--mute)}
.crumb a{color:var(--mute);text-underline-offset:3px}
.crumb [aria-current]{color:var(--ink)}

/* ── 첫 화면 — 아치 사진 + 제목 ─────────── */
.hero{display:grid;gap:26px;padding-block:6px 8px}
.hero-ph{margin:0;border-radius:999px 999px var(--r) var(--r);overflow:hidden;background:var(--s1);isolation:isolate}
.hero-ph picture{display:block}
.hero-bg{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%}
.hero-in{container-type:inline-size}
.hero h1{
  margin:0 0 16px;font-weight:700;letter-spacing:-.025em;line-height:1.2;color:#fff;text-wrap:balance;
  font-size:clamp(1.5rem,7.4vw,2.4rem);
}
/* 두 줄 맞춤 — build.mjs가 제목 폭(--h1w, em)을 넘기면 글 칸 폭(cqi)으로 크기를 정한다 */
@supports (font-size:1cqi){ .hero h1{font-size:clamp(1.5rem,calc(100cqi * 1.6 / var(--h1w, 18)),2.5rem)} }
/* 일본어 제목은 구(句) 단위로 줄을 바꾼다(지원 브라우저만 — 아니면 기본 규칙). 「ど / の項目」처럼 낱말이 갈리는 것을 막는다 */
:lang(ja) h1,:lang(ja) h2,:lang(ja) summary{word-break:auto-phrase}
.hero .lede{margin:0;font-size:18px;line-height:1.75;color:var(--ink2);max-width:34em}
.hero .when{margin:16px 0 0;font-size:15px;line-height:1.55;font-weight:700;color:var(--lilac);font-variant-numeric:tabular-nums}
.go{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}

/* ── 버튼 ───────────────────────────────── */
.btn,.btn2{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;line-height:1.25;text-align:center;
  transition:transform 160ms cubic-bezier(.2,.7,.2,1),background-color 160ms ease-out,color 160ms ease-out;
}
.btn{background:var(--lilac);color:var(--on)}
.btn2{background:var(--s2);color:var(--lilac)}
.btn:active,.btn2:active,.ch:active{transform:scale(.97)}

/* ── 목차 — 첫 화면 다음 자리를 조용하게 ── */
nav.toc{margin-block:28px 0}
nav.toc ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
nav.toc li{margin:0}
nav.toc a{min-height:48px;display:flex;align-items:center;font-size:15px;line-height:1.35;color:var(--mute);text-decoration:none}

/* ── 본문 절 ────────────────────────────── */
/* 절 사이 96px — 앞 절의 마지막 캡션·단추가 다음 제목의 「꼬리표」처럼 붙어 보이지 않는 거리(디자인 점검 eyebrow: 72px 이내를 꼬리표로 읽는다) */
main > section:not(.hero){margin-block:96px 0}
main > .hero{margin-top:4px}
h2{
  margin:0 0 18px;font-size:clamp(1.5rem,5.4vw,2rem);line-height:1.28;letter-spacing:-.02em;font-weight:700;
  text-wrap:balance;color:#fff;
}
p{margin:0 0 1.1em}
.body > :last-child{margin-bottom:0}
a{color:var(--lilac);text-underline-offset:4px;text-decoration-thickness:1.5px}
strong{color:#fff;font-weight:700}
em{color:var(--lilac);font-style:normal}
.note{font-size:15px;color:var(--mute);line-height:1.7}
.intro{color:var(--ink2)}

/* ── 표 — 진짜 표는 줄을 가진다 ─────────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1em;border-radius:var(--r);background:var(--s1);padding:6px 8px}
table{width:100%;border-collapse:collapse;font-size:15px}
caption{text-align:left;color:var(--mute);font-size:14px;padding:16px 18px 6px}
th,td{border-bottom:1px solid var(--line);padding:13px 18px;text-align:left;vertical-align:top;font-variant-numeric:tabular-nums}
thead th{color:var(--lilac);font-size:14px;white-space:nowrap}
tbody th{color:#fff;font-weight:700;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* ── 단계 — 진짜 <ol>. 번호는 가는 라일락 숫자 ── */
ol.steps{counter-reset:s;list-style:none;margin:0;padding:0}
ol.steps li{counter-increment:s;position:relative;padding:0 0 26px 56px;margin:0}
ol.steps li::before{
  content:counter(s);position:absolute;left:0;top:-4px;width:40px;text-align:center;
  font-size:30px;line-height:1.2;font-weight:300;color:var(--lilac);font-variant-numeric:tabular-nums;
}
ol.steps li:last-child{padding-bottom:0}
ol.steps strong{display:block;margin-bottom:2px;font-size:18px}

/* ── 사진 모음 — 사진 비율 그대로(자르지 않는다), 세로 사진은 아치 ── */
.gal{columns:1;column-gap:14px;margin-top:6px}
.gal[data-n="4"],.gal[data-n="5"],.gal[data-n="6"]{columns:2}
.gal figure{break-inside:avoid;margin:0 0 14px}
.gal picture{display:block}
.gal img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--s1)}
.gal figure[data-shape="tall"] img{border-radius:999px 999px var(--r) var(--r)}
.gal figcaption,figcaption{font-size:14px;color:var(--mute);line-height:1.5;padding:8px 2px 0}

/* ── 지도와 입구 ────────────────────────── */
.vgrid{display:grid;gap:18px;margin-top:6px}
.vgrid figure{margin:0}
.v-route,.v-hours{background:var(--s1);border-radius:var(--r);padding:18px 12px 14px}
.v-route img,.v-hours img{display:block;width:100%;max-width:360px;height:auto;margin:0 auto}
.v-route figcaption{text-align:center}
.v-side{display:grid;gap:18px;align-content:start}
.v-photo img{display:block;width:100%;height:auto;border-radius:var(--r)}
.v-addr{margin:0;font-weight:700;color:#fff}
.v-maps{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.v-maps span{width:100%;font-size:15px;color:var(--mute)}

/* ── 자주 묻는 질문 ─────────────────────── */
.faq details{margin:0 0 10px;background:var(--s1);border-radius:var(--r);overflow:hidden}
.faq details[open]{background:var(--s2)}
summary{
  cursor:pointer;padding:16px 56px 16px 20px;font-weight:700;line-height:1.5;
  min-height:56px;display:flex;align-items:center;position:relative;list-style:none;
}
summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--lilac);border-bottom:2px solid var(--lilac);
  transform:translateY(-70%) rotate(45deg);transition:transform 200ms cubic-bezier(.2,.7,.2,1);
}
.faq details[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 20px 10px;color:var(--ink2)}
.faq .a p{margin:0 0 1em}

/* ── 문의 — 로비 간판 사진 위의 판 ──────── */
/* 사진은 CSS 바탕(make.mjs가 이 파일의 url()을 읽어 자산으로 등록한다). 글자 대비는 단색 막 한 장(그라데이션 아님) */
.cta{
  position:relative;isolation:isolate;overflow:hidden;border-radius:28px;
  margin-top:96px;padding:56px 24px;text-align:center;
  background-color:var(--s2);
  background-image:url(/images/lobby-wide-600.jpg);
  background-image:image-set(url(/images/lobby-wide-600.webp) type("image/webp"),url(/images/lobby-wide-600.jpg) type("image/jpeg"));
  background-size:cover;background-position:50% 50%;
}
main > .cta{margin-inline:var(--gut)}   /* 휴대폰: 화면 끝에 붙지 않는 판 */
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,10,16,.82)}
.cta h2{margin:0 0 12px}
.cta p{max-width:34em;margin-inline:auto}
.cta p:last-child{margin-bottom:0}

/* ── 연락 수단 ──────────────────────────── */
.ids{font-weight:700;color:#fff}
.ids code{color:var(--lilac);font-family:inherit;font-weight:700}
ul.chan{list-style:none;margin:0 0 1em;padding:0;display:flex;flex-wrap:wrap;gap:10px}
ul.chan li{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ch{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;
  text-decoration:none;background:var(--s2);color:var(--ink);font-weight:600;font-size:15px;
  transition:transform 160ms cubic-bezier(.2,.7,.2,1),background-color 160ms ease-out}
ul.chan code{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:999px;
  color:var(--lilac);background:var(--s1);font-family:inherit;font-size:15px}
/* WeChat QR — 코드는 선명도가 생명이라 흰 바탕을 그대로 둔다(어두운 바탕 반전으로 못 읽는 스캐너가 있다) */
.chan li.qr{display:block;width:100%;padding:8px 0}
.chan li.qr>strong{display:block;margin:0 0 8px;color:var(--lilac)}
.chan li.qr img{display:block;width:100%;max-width:15rem;height:auto;background:#fff;padding:10px;border-radius:12px}
.chan li.qr .note{display:block;margin:10px 0 0}
.chan code.mid{user-select:all;-webkit-user-select:all}
.chan li.qr code.mid{margin:0 0 10px}

/* ── 하단 고정 문의 바 — 떠 있는 것은 이것 하나 ── */
nav.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;gap:8px;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
  background:rgba(11,10,16,.94);
  box-shadow:0 -10px 30px rgba(0,0,0,.5); /* taste-skill-ignore — 화면에 떠 있는 고정 바(허용 예외) */
}
nav.bar a{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 10px;
  border-radius:999px;background:var(--s2);color:var(--ink);text-decoration:none;
  font-weight:700;font-size:15px;line-height:1.2;text-align:center;
  transition:background-color 140ms ease-out,transform 140ms cubic-bezier(.2,.7,.2,1);
}
nav.bar a:active{transform:scale(.97)}
nav.bar a.pri{background:var(--lilac);color:var(--on)}
nav.bar a:focus-visible{outline:3px solid #fff;outline-offset:-3px}

/* ── 바닥 — 간판 문면 그대로(Velvet / HOST BAR) ── */
footer.site{margin-top:112px;padding-block:56px 40px;color:var(--mute);font-size:15px;text-align:center}
.lockup{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--lilac);margin:0 0 40px}
.lockup .wm-big{width:min(17rem,62vw);height:auto;fill:currentColor}
.lockup .hb{width:min(9rem,34vw);height:auto;fill:currentColor}
.nap{margin:0 0 8px;line-height:1.75}
.nap strong{color:var(--ink);font-size:16px}
footer.site a{min-height:48px;display:inline-flex;align-items:center}
/* 전체 페이지 색인 (루트 홈만) */
.idx{margin:0 0 40px;text-align:left}
.idx h2{font-size:15px;margin:0 0 12px;color:var(--mute);font-weight:600;letter-spacing:0}
.idx>ul{list-style:none;margin:0;padding:0;display:grid;gap:18px 24px;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.idx>ul>li>strong{display:block;font-size:14px;color:var(--lilac);margin:0 0 4px}
.idx ul ul{list-style:none;margin:0;padding:0}
.idx ul ul li{margin:0}
.idx ul ul a{display:inline-block;padding:.3em 0;font-size:15px;min-height:unset;color:var(--ink2);text-decoration:none}

/* ── 404 ── */
.nf main > h1{font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.25;margin:40px auto 16px;letter-spacing:-.02em}
.nf-lang{list-style:none;margin:0 0 1.2em;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.nf-lang a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;background:var(--s2);text-decoration:none}

/* ── 마우스 기기에서만 호버 — 휴대폰 탭 뒤 색이 남지 않게 ── */
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--lilac2)}
  .btn:hover{background:var(--lilac2);color:var(--on)}
  .btn2:hover,.ch:hover{background:var(--s3);color:var(--lilac2)}
  summary:hover{background:var(--s3)}
  nav.lang summary:hover,nav.lang li a:hover{background:var(--s3)}
  nav.toc a:hover{color:var(--ink)}
  nav.bar a:hover{background:var(--s3);color:var(--ink)}
  nav.bar a.pri:hover{background:var(--lilac2);color:var(--on)}
  .idx ul ul a:hover{color:var(--lilac2)}
}

/* ── 태블릿(48~60rem) — 사진이 화면 폭을 다 먹어 제목이 첫 화면 아래(고정 바 뒤)로 밀리지 않게 사진 폭만 줄인다.
   2026-10-24 디자인 점검(768px): 정사각 아치가 728px이 되어 H1이 고정 바에 절반 가렸고, 두 칸으로 나누자
   이번에는 사진·제목이 둘 다 작아져 「첫 화면에 주인공이 없다」가 됐다 → 한 칸 + 사진 30rem. ── */
@media (min-width:48rem){
  .hero-ph{width:min(100%,30rem)}   /* 한 칸 그대로 두고 사진만 30rem으로 — 제목이 첫 화면 안에서 크게(약 5vw) 선다 */
}

/* ── 넓은 화면 — 제목은 왼쪽 칸, 내용은 오른쪽 칸 ── */
@media (min-width:60rem){
  :root{--gut:32px}
  body{font-size:17.5px}
  header.site{padding-block:20px}
  .brand .wm{height:40px}
  nav.lang summary{padding:0 16px;gap:8px}
  /* 첫 화면 — 글 왼쪽 · 아치 사진 오른쪽. 사진 칸 폭은 build.mjs heroSizes와 같은 값 */
  .hero{grid-template-columns:minmax(0,1fr) min(40rem,45vw);align-items:center;column-gap:4rem;padding-block:28px 8px}
  .hero[data-shape="tall"]{grid-template-columns:minmax(0,1fr) min(36rem,40vw)}
  .hero-ph{order:2;width:auto}
  .hero-bg{aspect-ratio:auto}
  .hero h1{font-size:clamp(2.25rem,3.6vw,3.6rem)}
  @supports (font-size:1cqi){ .hero h1{font-size:clamp(2.25rem,calc(100cqi * 1.6 / var(--h1w, 18)),3.75rem)} }
  .hero .lede{font-size:19px}
  .hero .when{font-size:16px}
  nav.toc{margin-top:44px}
  nav.toc ul{display:flex;flex-wrap:wrap;gap:0 22px}
  /* 절 = 왼쪽 제목 칸(21rem) + 오른쪽 내용 칸. 첫 화면·문의 판은 제외. 제목은 두 줄 안(1.4rem × 21rem ≈ 한글 15자/줄) */
  main > section:not(.hero):not(.cta){margin-top:128px;display:grid;grid-template-columns:21rem minmax(0,1fr);column-gap:4rem;align-items:start}
  main > section:not(.hero):not(.cta) > h2{grid-column:1;font-size:1.4rem;line-height:1.4}
  main > section:not(.hero):not(.cta) > :not(h2){grid-column:2;min-width:0}
  main > section .body{max-width:43rem}
  main > section.gallery .intro,main > section.visit .intro{grid-column:1;grid-row:2;font-size:16px;color:var(--mute)}
  main > section.gallery .gal,main > section.visit .vgrid{grid-row:1 / span 2;margin-top:0}
  .gal,.gal[data-n]{columns:2}
  .vgrid{align-items:start}
  .faq .body{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;max-width:none}
  .faq .body details{margin:0}
  .faq .body > p{grid-column:1 / -1;margin-top:8px}
  .contact .body{max-width:none}
  /* 문의 판 — 본문 폭 전체 */
  main > section.cta{display:block;padding:80px 40px;margin-top:136px;max-width:calc(var(--wrap) - 2 * var(--gut));margin-inline:auto}
  /* 고정 바 — PC는 가운데 작은 판. 검수 규칙: PC에서 숨기지 않는다 */
  nav.bar{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:auto;min-width:30rem;
    padding:8px;border-radius:999px;background:rgba(27,24,36,.96)}
  nav.bar a{flex:1 1 auto;padding:0 22px}
  body{padding-bottom:calc(var(--bar) + 16px + env(safe-area-inset-bottom, 0px))}
  footer.site{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center}
  .idx{width:100%}
}

/* 아주 넓은 화면 — 지도 구역은 약도(360px 그대로)와 사진·영업시간 그림을 나란히 */
@media (min-width:75rem){
  .vgrid{grid-template-columns:360px minmax(0,1fr)}
}

/* ── 움직임 — CSS만. 위치만 움직이고(opacity를 쓰지 않는다) 움직임 줄이기 설정이면 없다 ── */
@media (prefers-reduced-motion:no-preference){
  /* 첫 화면: 아치가 살짝 올라오며 자리 잡고, 사진은 아주 느리게 숨 쉰다(한 장의 움직이는 그림) */
  .hero-ph{animation:rise 900ms cubic-bezier(.2,.7,.2,1) both}
  .hero-bg{animation:breathe 18s ease-in-out 900ms infinite alternate}
  .hero-in > *{animation:rise 700ms cubic-bezier(.2,.7,.2,1) both}
  .hero-in > :nth-child(2){animation-delay:60ms}
  .hero-in > :nth-child(3){animation-delay:120ms}
  .hero-in > :nth-child(4){animation-delay:180ms}
  .brand .wm{animation:rise 800ms cubic-bezier(.2,.7,.2,1) both}
  /* 스크롤: 절의 제목·사진·그림·단계·질문이 각자 들어온다 */
  @supports (animation-timeline:view()){
    /* 제목은 짧게(12px — 아래 문단과 겹치지 않는 거리 · margin-bottom 18px 안), 사진·판은 24px */
    main > section > h2{animation:enter-s linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .gal figure,.vgrid figure,.v-maps,ol.steps li,.faq details,.tw,.cta,.lockup{
      animation:enter linear both;animation-timeline:view();animation-range:entry 0% entry 70%;
    }
    .gal figure:nth-child(even){animation-range:entry 8% entry 78%}
  }
}
@keyframes rise{from{translate:0 18px}to{translate:0 0}}
@keyframes enter{from{translate:0 16px;scale:.985}to{translate:0 0;scale:1}}
@keyframes enter-s{from{translate:0 12px}to{translate:0 0}}
@keyframes breathe{from{scale:1}to{scale:1.05}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn2,.ch,nav.bar a,.faq summary::after,nav.lang summary::after{transition:none}
  .btn:active,.btn2:active,.ch:active,nav.bar a:active{transform:none}
}