/* 공통: 리셋 · 접근성 · 헤더 · 버튼 · 리뷰 캐러셀 · 지도 · 모션 기본(완성 상태) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
:root{--hdr:68px;--gut:clamp(16px,4vw,48px);--max:1320px;--r:14px}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
b,strong{font-weight:700}
.nw{white-space:nowrap}
a[href^="tel:"],.num{word-break:normal}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus,#1a73e8);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(56px,8vw,112px)}
section[id]{scroll-margin-top:calc(var(--hdr) + 8px)}
.ico{display:inline-block;vertical-align:-.18em;width:1.15em;height:1.15em;flex:none;fill:currentColor}
.ico[fill="none"]{fill:none}
.ico-out{width:.9em;height:.9em;margin-left:.25em;vertical-align:-.05em}
.tlink{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1.5px}
.tlink:hover{text-decoration-thickness:2.5px}

/* 버튼: 44px 이상 */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:12px 22px;border-radius:var(--btn-r,10px);border:2px solid transparent;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn .ico{width:1.2em;height:1.2em}

/* 헤더: 1024px 미만은 details 메뉴(스크롤·확대를 막지 않는다) */
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;min-height:var(--hdr);padding:8px var(--gut);background:var(--hdr-bg,var(--bg))}
.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;flex:none}
.lockup .smiley{width:42px;height:42px}
.lk-txt{display:flex;flex-direction:column;line-height:1.05}
.lk-en{white-space:nowrap}
.lk-en b{color:var(--kfood);font-size:.52em;letter-spacing:.04em;margin-left:.2em;vertical-align:.12em}
.hdr-nav{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto}
.hdr-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;font-size:15.5px;white-space:nowrap}
.hdr-nav a:hover{text-decoration:underline;text-underline-offset:.3em}
.hdr-call{min-height:44px;padding:9px 16px}
.hdr-menu{display:none;position:relative}
.hdr-menu summary{list-style:none;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;cursor:pointer}
.hdr-menu summary::-webkit-details-marker{display:none}
.hdr-menu summary .ico{width:26px;height:26px}
.hdr-menu nav{position:absolute;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;min-width:220px;padding:8px;border-radius:12px;background:var(--menu-bg,var(--bg));border:1.5px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.hdr-menu nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:8px;text-decoration:none;font-weight:600}
.hdr-menu nav a:hover{background:var(--soft)}
@media (max-width:1023px){
  .hdr-nav{display:none}
  .hdr-call{margin-left:auto}
  .hdr-menu{display:block}
}
@media (max-width:640px){
  :root{--hdr:62px}
  .hdr{gap:10px;padding-inline:16px}
  .lockup .smiley{width:36px;height:36px}
  .hdr-call{padding:9px 13px}
}
@media (max-width:420px){.hdr-call span{display:none}.hdr-call{width:46px;padding:0}}
/* 그리드 칸의 내용이 칸을 넓히지 않게 */
.wrap>*,[class*="-grid"]>*{min-width:0}

/* 별점 막대(4.6 → 92%) */
.starbar{position:relative;display:inline-block;line-height:1;letter-spacing:.06em;white-space:nowrap}
.sb-base{color:var(--star-off,rgba(0,0,0,.18))}
.sb-fill{position:absolute;left:0;top:0;overflow:hidden;color:var(--star,#1e1e1e)}
.stars5{display:block;color:var(--star,#1e1e1e);letter-spacing:.08em;line-height:1}

/* 리뷰 캐러셀: 네이티브 가로 스크롤 + 이전/다음. 스크롤러는 position:relative (sr 라벨이 페이지를 넓히지 않게) */
.rv{position:relative;min-width:0}
.rv-track{position:relative;display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:6px 2px 14px;scrollbar-width:thin}
.rv-card{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;min-width:0}
.rv-card blockquote{flex:1}
.rv-card footer{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.35}
.rv-av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;font-weight:700}
.rv-who{display:flex;flex-direction:column;min-width:0}
.rv-ctl{display:flex;align-items:center;gap:10px;margin-top:10px}
.rv-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;cursor:pointer;background:transparent;border:2px solid currentColor}
.rv-btn .ico{width:20px;height:20px}
.rv-btn[disabled]{opacity:.35;cursor:default}

/* 지도: OSM 도로 → SVG. 지도 전체가 Google 지도 링크 */
.map{min-width:0}
.map-link{display:block;border-radius:inherit;overflow:hidden}
.map svg{width:100%;height:auto}
.map .rd{fill:none;stroke-linecap:round;stroke-linejoin:round}
.map .rd-0{stroke-width:5}
.map .rd-1{stroke-width:9}
.map .rd-2{stroke-width:14}
.map .rd-3{stroke-width:18}
.map .rd-hl,.map .rd-hl-case{fill:none;stroke-linecap:round;stroke-linejoin:round}
.map .rd-hl-case{stroke-width:24}
.map .rd-hl{stroke-width:15}
.map .lb{font:700 24px/1 "Pretendard Variable",Pretendard,system-ui,sans-serif;text-anchor:middle;paint-order:stroke;stroke-width:7px;stroke-linejoin:round}
.map .pin-name{font:800 30px/1 "Pretendard Variable",Pretendard,system-ui,sans-serif;paint-order:stroke;stroke-width:8px;stroke-linejoin:round}
.map .pin-sub{font:600 22px/1 "Pretendard Variable",Pretendard,system-ui,sans-serif;paint-order:stroke;stroke-width:7px;stroke-linejoin:round}
.map figcaption{margin-top:10px;font-size:13.5px;line-height:1.5}
.map .osm{display:inline-block;opacity:.8}

/* 사실 고지 */
.notice{font-size:13.5px;line-height:1.6}
.notice p+p{margin-top:4px}

/* 공지 상자: 네 변 같은 테두리 */
.note-box{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;line-height:1.5}
.note-box .ico{margin-top:2px}
.note-box b{display:block}
.note-box .ko{display:block}

/* 모션 기본값은 완성 상태. JS 가 화면 아래 요소에만 .m-pre 를 붙였다가 .m-run 으로 바꾼다 */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* 모바일 지도: 정사각에 가깝게 가운데를 잘라 보이고(slice), 글자는 키운다 */
@media (max-width:640px){
  .map svg{aspect-ratio:1/1}
  .map .lb{font-size:34px;stroke-width:9px}
  .map .pin-name{font-size:42px}
  .map .pin-sub{font-size:31px}
  .btns.btns-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .btns.btns-2 .btn{padding-inline:12px}
}

/* C · M3 「K-FOOD 전단」 — K-FOOD 빨강 · 스마일 옐로 · 먹 검정. Anton / Black Han Sans / Pretendard */
.c{--bg:#fff;--ink:#141414;--red:#D52B1E;--kfood:#E8392B;--yellow:#F7C51E;--grey:#D0D0CC;--soft:#2a2a2a;--line:#3a3a3a;--muted:#5a5a56;
  --disp:"Anton","Arial Narrow",Impact,sans-serif;--disp-ko:"Black Han Sans","Apple SD Gothic Neo",sans-serif;
  --h1:clamp(30px,3vw,46px);--h2:clamp(32px,3.4vw,50px);--poster:clamp(46px,5.4vw,80px);--btn-r:8px;--focus:#F7C51E;
  --hdr-bg:#141414;--menu-bg:#141414}
.c h1,.c .h2,.c .c-poster,.c .c-h2-sm{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;text-wrap:balance}
.c .h2{font-size:var(--h2)}
.c .btn{font-weight:800}
.c .btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.c .btn-red:hover{background:#b9231a;border-color:#b9231a}
.c .btn-yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.c .btn-yellow:hover{background:#ffd84a}
.c .btn-white{background:#fff;color:var(--ink);border-color:#fff}
.c .btn-white:hover{background:#eaeae6}
.c :focus-visible{outline-color:var(--yellow)}
.c .c-products :focus-visible{outline-color:var(--ink)}

/* 헤더(검정) */
.c-hdr{color:#fff}
.c-lock .lk-en{font-family:var(--disp);font-size:25px;letter-spacing:.03em}
.c-lock .lk-en b{font-family:var(--disp);font-weight:400;font-size:.62em;letter-spacing:.06em}
.c-lock .lk-ko{font-size:12px;font-weight:600;color:#bdbdb8;margin-top:4px}
.c-hdr .hdr-menu summary{color:#fff}
.c-hdr .hdr-menu nav{border-color:#444;color:#fff}

/* 01 히어로: 간판 사진(노란 면과 스마일이 네온처럼 켜진다) + 아래 검정 띠에 제목·시간 배지·버튼.
   사진 위에 어두운 그라데이션을 깔지 않는다(준 2026-10-20 "검은 구름 같이 하지 말고 밝게"). */
.c-hero{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;height:min(calc(100svh - var(--hdr)),calc(56.25vw + 200px));min-height:640px;background:#141414;color:#fff}
.c-hero-media{position:relative;min-height:0;overflow:hidden;background:#d8c9bd}
.c-hero-pic,.c-hero-pic img{display:block;width:100%;height:100%}
.c-hero-pic img{object-fit:cover}
.sign{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sign-m{display:none}
.c-hero-copy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;padding:26px max(var(--gut),calc((100% - var(--max)) / 2)) 28px;border-top:4px solid var(--yellow)}
.c-hero-head{flex:1 1 520px;min-width:0}
.c h1{font-size:var(--h1);max-width:17em;color:#fff}
.c-ko{margin-top:8px;font-family:var(--disp-ko);font-size:clamp(18px,1.6vw,22px);color:var(--yellow)}
.c-hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
.c-badge{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:8px 22px 8px 40px;background:var(--yellow);color:var(--ink);clip-path:polygon(20px 0,100% 0,100% 100%,20px 100%,0 50%);line-height:1.1}
.c-badge::before{content:"";position:absolute;left:16px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--ink)}
.c-badge .ico{width:24px;height:24px}
.c-badge b{display:block;font-family:var(--disp);font-weight:400;font-size:26px;letter-spacing:.02em;text-transform:uppercase}
.c-badge .ko{display:block;margin-top:2px;font-size:13.5px;font-weight:700}

/* 간판 네온 점등(첫 진입 1회). 기본 CSS 는 켜진 완성 상태 — 대기(.sign-wait/.sign-pre) 동안만 꺼 둔다.
   면이 먼저 깜빡이며 켜지고, 스마일이 이어서 켜지고, 그 뒤 시간 배지 */
.sign-pre .sign .glow,.sign-wait .sign .glow{opacity:0}
.sign-pre .c-badge,.sign-wait .c-hero .c-badge{opacity:0}
@keyframes neon-panel{0%{opacity:0}8%{opacity:.85}12%{opacity:.1}22%{opacity:.9}27%{opacity:.35}40%{opacity:1}46%{opacity:.6}58%,100%{opacity:1}}
/* TODO(human): 스마일 점등 리듬. 지금은 0.7초 단순 페이드(스테이징 8d87e07f). 배포 전 이 줄은 지웁니다. */
@keyframes neon-smile{0%{opacity:0}100%{opacity:1}}
@keyframes badgein{0%{opacity:0;transform:translateY(8px) scale(.94)}100%{opacity:1;transform:none}}
.sign-run .glow-panel{animation:neon-panel .9s linear .18s both}
.sign-run .glow-smile{animation:neon-smile .7s linear .95s both}
.sign-run .c-badge{animation:badgein .34s cubic-bezier(.2,.8,.2,1) 1.55s both}

/* 02 무엇을 파나: 높이가 번갈아 다른 3×2 타일 + 노란 태그 배지 */
.c-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.pill{display:inline-flex;align-items:center;padding:6px 18px;border-radius:999px;background:var(--red);color:#fff;font-family:var(--disp);font-size:clamp(22px,2.2vw,30px);letter-spacing:.04em;line-height:1.2}
.c-owner{margin-top:16px;font-family:var(--disp-ko);font-size:clamp(24px,2.5vw,36px);line-height:1.3}
.c-src{margin-top:6px;font-size:15px;color:var(--muted)}
.c-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:16px;height:clamp(600px,56vw,800px);margin-top:36px}
.c-tile{position:relative;min-height:0;border:3px solid var(--ink);border-radius:6px;overflow:hidden;background:#eee}
.c-tile img{width:100%;height:100%;object-fit:cover}
.c-tile-0{grid-area:1/1/4/2}.c-tile-3{grid-area:4/1/6/2}
.c-tile-1{grid-area:1/2/3/3}.c-tile-4{grid-area:3/2/6/3}
.c-tile-2{grid-area:1/3/4/4}.c-tile-5{grid-area:4/3/6/4}
.ctag{position:relative;display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;padding:6px 16px 6px 32px;background:var(--yellow);color:var(--ink);clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%);line-height:1.15}
.ctag::before{content:"";position:absolute;left:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--ink)}
.ctag b{font-size:15px;font-weight:800}
.ctag .ko{font-size:12.5px;font-weight:700}
.c-tile .ctag{position:absolute;left:12px;top:12px;max-width:calc(100% - 24px)}
.c-also{margin-top:22px;font-weight:700;font-size:16.5px}

/* 03 김치: 빨간 전폭 띠, 왼쪽 글 / 오른쪽 냉장고 속 김치통 */
.c-kimchi{background:var(--red);color:#fff;padding-block:clamp(56px,7vw,96px)}
.c-kimchi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
.c-poster{font-size:var(--poster);color:#fff}
.c-claim{margin-top:12px;font-family:var(--disp-ko);font-size:clamp(22px,2.2vw,32px);line-height:1.3}
.c-kimchi .c-src{color:#ffe1dc}
.c-qtag{position:relative;display:inline-block;margin-block:24px 26px;padding:14px 22px 14px 40px;background:var(--yellow);color:var(--ink);clip-path:polygon(20px 0,100% 0,100% 100%,20px 100%,0 50%)}
.c-qtag::before{content:"";position:absolute;left:15px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--ink)}
.c-qtag p{font-family:var(--disp);font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:.01em}
.c-qtag footer{margin-top:4px;font-size:13.5px;font-weight:700}
.c-kimchi-pic img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:62% 50%;border:3px solid var(--ink);border-radius:6px}

/* 04 과자·라면 벽: 전폭 사진 + 왼쪽 아래 검정 패널 */
.c-snacks{position:relative;background:var(--ink)}
.c-snacks-pic img{width:100%;height:clamp(600px,54vw,780px);object-fit:cover}
.c-snacks-panel{position:absolute;left:max(var(--gut),calc((100% - var(--max)) / 2));bottom:clamp(24px,4vw,48px);width:min(500px,44%);padding:28px 30px 30px;background:var(--ink);color:#fff;border:3px solid #fff;border-radius:6px}
.c-k{font-family:var(--disp);font-size:28px;color:#FF4A3A;letter-spacing:.04em;line-height:1}
.c-h2-sm{margin-top:10px;font-size:clamp(28px,2.6vw,38px)}
.c-h2-sm .ko{display:block;margin-top:6px;font-family:var(--disp-ko);font-size:.6em;text-transform:none;color:var(--yellow)}
.c-snacks-panel blockquote{margin-top:16px;padding-top:14px;border-top:1px solid #3a3a3a}
.c-snacks-panel blockquote p{font-size:16.5px;font-weight:600;line-height:1.5}
.c-snacks-panel blockquote footer{margin-top:4px;font-size:13.5px;color:#c9c9c4}
.c-mini{display:flex;flex-wrap:wrap;gap:10px;margin-block:20px 22px}

/* 05 리뷰: 노란 띠, 큰 4.6, 살짝 기운 카드(테두리는 네 변 동일) */
.c-reviews{background:var(--yellow);padding-block:clamp(56px,7vw,96px)}
.c-rv-grid{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:32px 48px;align-items:center}
.c-label{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
.c-label .ko{margin-left:6px;letter-spacing:0}
.c-big{font-family:var(--disp);font-size:clamp(104px,11vw,160px);line-height:.95;margin-top:4px}
.c-sb{font-size:30px;--star:var(--ink);--star-off:rgba(20,20,20,.22)}
.c-count{margin-block:12px 6px;font-weight:700;font-size:15px}
.c-rv .rv-track{padding:22px 14px 30px;gap:22px;scroll-padding-inline:14px}
.c-rv .rv-card{width:calc((100% - 44px) / 3);padding:22px;background:#fff;border:3px solid var(--ink);border-radius:4px;transform:rotate(var(--r,0deg));box-shadow:4px 5px 0 rgba(20,20,20,.18)}
.c-rv .stars5{font-size:20px}
.c-rv blockquote p{font-size:17px;font-weight:600;line-height:1.5}
.c-rv .rv-av{background:var(--red);color:#fff}
.c-rv .rv-who span{color:var(--muted)}
.c-rv .rv-btn{background:#fff;border-width:3px}
.m-pre .c-rv .rv-card{transform:rotate(var(--r,0deg)) scale(1.03);box-shadow:10px 14px 0 rgba(20,20,20,.2)}
.m-run .c-rv .rv-card{transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease-out;transition-delay:calc(var(--i,0) * 80ms)}

/* 06 영업시간·위치: 검정 바탕, 왼쪽 어두운 지도 / 오른쪽 배지·주소·버튼, 아래 가게 앞 창 띠 */
.c-visit{background:var(--ink);color:#fff;padding-top:clamp(56px,7vw,96px)}
.c-visit-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"map info";gap:32px clamp(28px,4vw,56px);align-items:start}
.c-visit-info{grid-area:info}
.c-map{grid-area:map}
.c-badge-lg{margin-block:18px 20px;min-height:72px}
.c-badge-lg b{font-size:32px}
.c-facts{margin-top:22px}
.c-facts li{display:flex;gap:12px;align-items:flex-start;padding-block:12px;font-size:18px;font-weight:600;line-height:1.45}
.c-facts li:not(:last-child){border-bottom:1px solid #3a3a3a}
.c-facts .ico{margin-top:3px;color:var(--yellow)}
.c-gmaps{margin-block:12px 18px;font-size:15px;color:#d6d6d2}
.c-gmaps .ko{display:block}
.c-note{border-color:#5a5a5a}
.c-note .ico{color:var(--yellow)}
.c-map .map-link{border:3px solid #3a3a3a;border-radius:6px}
.c-map .map-bg{fill:#1d1d1d}
.c-map .rd{stroke:#3b3b3b}
.c-map .rd-hl-case{stroke:#1d1d1d}
.c-map .rd-hl{stroke:var(--yellow)}
.c-map .lb{fill:#bdbdb8;stroke:#1d1d1d}
.c-map .lb-hl{fill:#fff}
.c-map .pin-halo{fill:rgba(247,197,30,.25)}
.c-map .pin-body{fill:var(--yellow);stroke:#141414;stroke-width:3}
.c-map .pin-dot{fill:#141414}
.c-map .pin-name,.c-map .pin-sub{fill:#fff;stroke:#1d1d1d}
.c-map figcaption{color:#bdbdb8}
.c-strip{margin-top:clamp(40px,6vw,72px)}
.c-strip img{width:100%;height:clamp(220px,26vw,400px);object-fit:cover;object-position:50% 40%}

/* 푸터 */
.c-ftr{background:var(--ink);color:#fff;padding-block:40px 56px;border-top:1px solid #2c2c2c}
.c-ftr .wrap{display:grid;gap:14px}
.c-ftr p{font-size:15px}
.c-notice{color:#c9c9c4;padding-top:14px;border-top:1px solid #2c2c2c}

@media (max-width:1023px){
  .c-kimchi-grid{grid-template-columns:minmax(0,1fr)}
  .c-snacks-pic img{height:auto;aspect-ratio:4/3}
  .c-snacks-panel{position:relative;left:auto;bottom:auto;width:auto;margin:-48px var(--gut) 0;z-index:1}
  .c-snacks{padding-bottom:var(--gut)}
  .c-rv-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .c-rv .rv-card{width:calc((100% - 22px) / 2)}
  .c-visit-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"info" "map"}
}
/* 900px 이하: 사진 아래에 글(가게 정면이 가려지지 않게) */
@media (max-width:900px){
  .c-hero{display:block;height:auto;min-height:0}
  .c-hero-media{aspect-ratio:16/9}
  .c-hero-copy{display:block;padding:24px var(--gut) 32px}
  .c-hero-row{margin-top:20px}
}
@media (max-width:640px){
  .c-lock .lk-en{font-size:21px}
  .c-hero-media{aspect-ratio:3/2}
  .sign-d{display:none}.sign-m{display:block}
  .c-hero-row{flex-direction:column;align-items:stretch}
  .c-badge{align-self:flex-start}
  .c-tiles{display:block;height:auto;columns:2;column-gap:12px}
  .c-tile{break-inside:avoid;margin-bottom:12px;border-width:2px}
  .c-tile img{height:auto;aspect-ratio:1/1}
  .c-tile-0 img,.c-tile-4 img,.c-tile-2 img{aspect-ratio:4/5}
  .c-tile .ctag{left:8px;top:8px;padding:5px 12px 5px 26px}
  .ctag b{font-size:13.5px}
  .c-snacks-panel{margin:-36px 16px 0;padding:22px 18px 24px}
  .c-rv .rv-card{width:84%}
  .c-badge-lg b{font-size:26px}
}
