/* 금오산 야영장 v7 — 지도형. 크라프트 갈색 + 아이보리, 선 그림, 명조 제목(Noto Serif) + 고딕 본문. 첫 화면 = 금오산 명소까지 직선거리 목록 + 약도. */
:root{
  --kraft:#C49A6C;--kraft2:#B58B5D;--kraft3:#DDC29C;--ivory:#F6EFDF;--ivory2:#EDE2C8;--paper:#FBF7EE;
  --ink:#2E2116;--ink2:#5A4330;--ink3:#7A5E43;--rust:#A4481B;--pine:#394228;--tent:#E18325;
  --line:rgba(46,33,22,.22);--hd:68px;--rad:16px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 14px);background:var(--ivory)}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--ff);font-size:17px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
body.l-zh{word-break:normal;line-break:strict}
body.l-ja{word-break:auto-phrase;line-break:strict}
:lang(ko){word-break:keep-all}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
h1,h2,h3,.sf{font-family:var(--fs);font-weight:900;letter-spacing:-.01em}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--ivory);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:800}
.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
.i{width:20px;height:20px;flex:none}
.k{font-weight:600;color:var(--ink3);font-size:.8em;margin-left:.45em;letter-spacing:0}

/* ---------- 머리 */
.hd{position:sticky;top:0;z-index:50;background:var(--ivory);border-bottom:1.5px solid transparent;transition:border-color .2s,box-shadow .2s}
.hd.is-scrolled{border-bottom-color:var(--line);box-shadow:0 12px 24px -20px rgba(46,33,22,.55)}
.hd-in{display:flex;align-items:center;gap:20px;height:var(--hd)}
.logo{flex:none;text-decoration:none;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:44px}
.lg-f{padding-left:1.62rem;margin-top:2px;font-size:12px;font-weight:700;line-height:1.2;color:var(--ink2);white-space:nowrap}
.logo-t{display:inline-flex;align-items:center;gap:.3em;font-size:22px;line-height:1;color:var(--ink);white-space:nowrap}
.lg-ic{width:1.25em;height:1.25em;color:var(--rust);margin-right:.06em}
.lg-ic g{stroke-width:2}
.lg-a{font-family:var(--fs);font-weight:900;letter-spacing:-.02em}
.lg-b{font-family:var(--fs);font-weight:700;color:var(--ink2);letter-spacing:-.02em}
.gnb{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.gnb ul{display:flex;gap:2px;white-space:nowrap}
.gnb a{display:block;padding:8px 12px;font-size:15.5px;font-weight:800;text-decoration:none;color:var(--ink2);border-radius:10px;position:relative}
.l-zh .gnb a,.l-ja .gnb a{font-weight:500}
.gnb a:hover{color:var(--ink);background:rgba(46,33,22,.06)}
.gnb a[aria-current]{color:var(--ink)}
.gnb a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;border-bottom:2px dashed var(--rust)}
.hd-r{flex:none;display:flex;align-items:center;gap:10px}
.hd-tel{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);font-weight:800;font-size:15px;text-decoration:none;white-space:nowrap}
.hd-tel .i{width:17px;height:17px}
.hd-tel:hover{background:var(--ink);color:var(--ivory)}
.lsw{display:flex;border:1.5px solid var(--line);border-radius:999px;padding:3px}
.lsw a{display:flex;align-items:center;height:32px;padding:0 11px;border-radius:999px;font-size:13.5px;font-weight:800;text-decoration:none;color:var(--ink2);white-space:nowrap}
.lsw a:hover{color:var(--ink)}
.lsw a[aria-current]{background:var(--ink);color:var(--ivory)}
.lsel{display:none;position:relative}
.lsel summary{list-style:none;display:flex;align-items:center;gap:5px;height:40px;padding:0 10px;border:1.5px solid var(--line);border-radius:999px;font-size:14px;font-weight:800;cursor:pointer}
.lsel summary::-webkit-details-marker{display:none}
.lsel .i{width:18px;height:18px}
.lsel .ic{width:15px;height:15px}
.lsel-m{position:absolute;right:0;top:46px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:14px;padding:6px;box-shadow:0 16px 34px -14px rgba(46,33,22,.55);display:grid;min-width:120px;z-index:60}
.lsel-m a{padding:10px 12px;border-radius:9px;font-size:15px;font-weight:800;text-decoration:none}
.lsel-m a[aria-current]{background:var(--ivory2)}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;color:var(--ink)}
.burger>span{display:block;height:2.5px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.dr-open .burger>span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.dr-open .burger>span:nth-child(2){opacity:0}
.dr-open .burger>span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.drawer{position:fixed;left:0;right:0;top:var(--hd);bottom:0;z-index:49;background:var(--ivory);overflow:auto;padding:12px 0 40px;border-top:1.5px solid var(--line)}
.drawer[hidden]{display:none}
.dr-nav a{display:block;padding:15px 2px;border-bottom:1.5px dashed var(--line);font-size:20px;font-weight:800;text-decoration:none}
.dr-cta{display:grid;gap:10px;margin:22px 0}
.drawer .dr-lsw{display:inline-flex}
.drawer .dr-lsw a{height:40px;padding:0 14px}
html.gnb-fold .gnb{display:none}
html.gnb-fold .burger{display:flex}
html.gnb-fold .hd-in{justify-content:space-between}

/* ---------- 버튼 */
.cta{display:flex;flex-wrap:wrap;gap:10px}
.dir{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:54px;padding:0 20px;border-radius:14px;font-weight:800;font-size:16.5px;line-height:1.25;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-call{background:var(--ink);color:var(--ivory)}
.btn-call:hover{background:var(--rust)}
.btn-call .bn{font-weight:700;font-size:15.5px;padding-left:9px;border-left:1.5px solid rgba(246,239,223,.35)}
.btn-map{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
.btn-map:hover{background:#fff}
.btn-map .i:first-child{color:var(--rust)}
.btn .ie{width:15px;height:15px;opacity:.6}

/* ---------- 첫 화면: 금오산 명소까지 직선거리 + 약도 */
.hero,.dirs{--ink2:#35261A;--ink3:#3A2A1C}   /* 크라프트 면 위 보조 글 대비 ≥4.7:1(낟알 무늬 포함) */
.hero{position:relative;background:var(--kraft) var(--grain);padding:clamp(22px,4vh,48px) 0 clamp(48px,7vh,80px);border-bottom:2px solid var(--ink)}
.hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(28px,4.4vw,64px);align-items:start}
.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 10px;border-radius:999px;background:var(--paper);border:1.5px solid var(--ink);color:var(--ink);font-size:14px;font-weight:800;line-height:1.35}
.badge .i{width:18px;height:18px;color:var(--rust)}
.kicker{margin-top:18px;font-size:15.5px;font-weight:800;color:var(--ink2)}
.h1{margin-top:4px;font-size:clamp(44px,min(5.4vw,9vh),76px);line-height:1.08;letter-spacing:-.03em}
.l-en .h1,.l-zh .h1,.l-ja .h1{font-size:clamp(34px,min(3.8vw,6.6vh),50px)}
.h-tx{container-type:inline-size}
.l-en .h1{font-size:clamp(30px,min(8cqi,6.6vh),50px)}   /* 'Geumosan Campground' ≈ 12em — 글 칸 폭에 맞춰 한 줄 */
.h1-n{display:block}
.h1-k{display:block;margin:8px 0 0;line-height:1.3;font-family:var(--ff);font-weight:700;font-size:17px;color:var(--ink2)}
.h-info{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:12px;font-size:15.5px;font-weight:600;color:var(--ink2)}
.h-info a{display:inline-flex;align-items:center;gap:5px;padding:7px 0;margin:-7px 0;font-weight:800;text-decoration:none;color:var(--ink)}
.h-info .i{width:16px;height:16px;color:var(--rust)}
.lead{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,3.4vh,36px);font-size:clamp(21px,1.9vw,25px);font-weight:700;color:var(--ink)}
.lead::after{content:"";flex:1;min-width:40px;border-top:2px dashed rgba(46,33,22,.45)}
.nb{margin-top:12px;border-top:2px solid var(--ink)}
.nb-i{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;column-gap:14px;padding:9px 6px 10px 2px;border-bottom:1.5px dashed rgba(46,33,22,.4)}
.nb-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--ivory);font:800 14.5px/1 var(--ff);transition:background .15s,transform .15s}
.nb-t{display:flex;flex-direction:column;min-width:0}
.nb-name{font-size:18px;font-weight:800;line-height:1.3}
.nb-sub{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin-top:3px}
.nb-k{margin:0;font-size:13.5px;line-height:1.3}
.nb-dir{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--ink2);line-height:1.3}
.nb-ar{width:18px;height:18px;flex:none;color:var(--rust)}
.nb-km{display:flex;align-items:baseline;gap:3px;white-space:nowrap}
.nb-km small{font-size:13px;font-weight:700;color:var(--ink2)}
.nb-km b{font-family:var(--fs);font-weight:900;font-size:30px;line-height:1;color:var(--ink);margin:0 1px 0 4px}
.nb-bar{position:absolute;left:48px;bottom:-1.5px;height:3px;width:calc((100% - 48px) * var(--d));background:var(--rust);border-radius:2px;opacity:.8}
.nb-i:hover{background:rgba(251,247,238,.35)}
.nb-i:hover .nb-n{background:var(--rust);transform:scale(1.08)}
.nb-note{margin-top:10px;font-size:14px;font-weight:600;color:var(--ink2)}
.h-act{margin-top:20px;container-type:inline-size}
.h-act .cta{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:10px}
.h-act .dir{display:contents}
.h-act .btn{min-height:50px;padding:0 14px;gap:7px}
@container (max-width:480px){   /* 좁으면 전화 한 줄 + 지도 둘 — 언어와 상관없이 같은 모양 */
  .h-act .cta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .h-act .btn-call{grid-column:1/-1}
}
@container (max-width:300px){.h-act .btn{padding:0 10px}.h-act .btn .ie{display:none}}   /* 320 폭 JA 'NAVERマップ' 넘침 */
.check{display:flex;align-items:flex-start;gap:7px;margin-top:12px;font-size:14.5px;font-weight:600;line-height:1.55;color:var(--ink)}
.check .i{width:19px;height:19px;margin-top:1px;color:var(--rust)}

/* 약도 */
.h-map{position:sticky;top:calc(var(--hd) + 16px)}
.map{background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:12px 12px 10px;box-shadow:0 26px 40px -30px rgba(46,33,22,.85)}
.map-h{display:flex;align-items:center;gap:10px;padding:2px 6px 10px;font-size:16px;font-weight:700;color:var(--ink)}
.map-h::before{content:"";width:22px;border-top:3px solid var(--tent);border-radius:2px}
.map-c{position:relative;border-radius:12px;overflow:hidden;background:#FBF6EA;border:1.5px solid var(--line)}
.map-b{width:100%;height:auto}
.map-r{position:absolute;inset:0;width:100%;height:100%}
.ray{stroke:var(--tent);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1 9;transition:stroke .15s,stroke-width .15s}
.mk,.mk-camp,.ml{position:absolute}
.mk{transform:translate(-50%,-50%);z-index:2}
.mk-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--ivory);border:2px solid var(--paper);font:800 14px/1 var(--ff);transition:background .15s,transform .15s}
.mk-l{position:absolute;top:50%;transform:translateY(-50%);width:max-content;max-width:12em;padding:1px 7px;border-radius:6px;background:rgba(251,246,234,.92);font-size:13px;font-weight:800;line-height:1.3;color:var(--ink)}
.side-r .mk-l{left:calc(100% + 5px)}
.side-l .mk-l{right:calc(100% + 5px);text-align:right}
.mk-camp{transform:translate(-50%,-50%);z-index:3;display:grid;justify-items:center}
.mk-ti{width:40px;height:40px;padding:8px;border-radius:50%;background:var(--pine);color:var(--ivory);box-shadow:0 0 0 4px rgba(57,66,40,.22)}
.mk-ti g{stroke-width:2.1}
.mk-cl{position:absolute;top:calc(100% + 4px);white-space:nowrap;padding:1px 8px;border-radius:6px;background:var(--pine);color:var(--ivory);font-size:13px;font-weight:800;line-height:1.5}
.ml{font-size:12px;font-weight:700;line-height:1.2;color:var(--ink3);white-space:nowrap}
.ml-ring{transform:translate(-50%,0)}
.ml-road{transform:translate(-50%,-50%) rotate(90deg);font-style:italic;letter-spacing:.06em}
.ml-sc{transform:translate(0,-100%);text-align:center;color:var(--ink)}
.ml-n{transform:translate(-50%,0);font-weight:800;color:var(--ink)}
.ml-osm{position:absolute;right:8px;bottom:5px;font-size:12px;color:var(--ink3);opacity:.85}
.ml-key{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 6px;border-radius:6px;background:rgba(251,246,234,.92);font-size:12px;font-weight:700;line-height:1.4;color:var(--ink)}
.ml-key i{width:16px;height:11px;border:1.5px dashed var(--pine);border-radius:3px;background:rgba(57,66,40,.16)}
/* 목록 줄에 손을 올리면 약도의 같은 번호·직선이 붉게 */
.hero:has(.nb-i[data-n="1"]:hover) .mk[data-n="1"] .mk-n,.hero:has(.nb-i[data-n="2"]:hover) .mk[data-n="2"] .mk-n,
.hero:has(.nb-i[data-n="3"]:hover) .mk[data-n="3"] .mk-n,.hero:has(.nb-i[data-n="4"]:hover) .mk[data-n="4"] .mk-n,
.hero:has(.nb-i[data-n="5"]:hover) .mk[data-n="5"] .mk-n,.hero:has(.nb-i[data-n="6"]:hover) .mk[data-n="6"] .mk-n{background:var(--rust);transform:scale(1.18)}
.hero:has(.nb-i[data-n="1"]:hover) .ray:nth-child(1),.hero:has(.nb-i[data-n="2"]:hover) .ray:nth-child(2),
.hero:has(.nb-i[data-n="3"]:hover) .ray:nth-child(3),.hero:has(.nb-i[data-n="4"]:hover) .ray:nth-child(4),
.hero:has(.nb-i[data-n="5"]:hover) .ray:nth-child(5),.hero:has(.nb-i[data-n="6"]:hover) .ray:nth-child(6){stroke:var(--rust);stroke-width:5}
@media (prefers-reduced-motion:no-preference){
  .mk-ti{animation:camp 2.8s ease-out infinite}
  @keyframes camp{0%{box-shadow:0 0 0 0 rgba(57,66,40,.45)}70%,100%{box-shadow:0 0 0 14px rgba(57,66,40,0)}}
}

/* ---------- 섹션 공통 */
.sec{padding:clamp(64px,9vw,112px) 0}
.sec h2{font-size:clamp(30px,3.4vw,44px);line-height:1.2}
.sec-hd{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:16px;row-gap:4px;margin-bottom:clamp(28px,4vw,44px)}
.sec-k{grid-row:1/3;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:2px solid var(--ink);color:var(--rust)}
.sec-k .i{width:28px;height:28px}
.sec-s{font-size:16px;font-weight:600;color:var(--ink2)}

/* 편의시설 — 지도 범례처럼 */
.fac{background-color:var(--ivory);background-image:linear-gradient(rgba(46,33,22,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(46,33,22,.05) 1px,transparent 1px);background-size:28px 28px}
.fcs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.fc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:28px 12px 22px;border:2px solid var(--ink);border-radius:var(--rad);background:var(--paper);box-shadow:4px 4px 0 var(--kraft)}
.fic{width:64px;height:64px;color:var(--ink)}
.fc-n{display:flex;flex-direction:column;align-items:center;font-size:17px;font-weight:800;line-height:1.35}
.fc-k{display:block;margin:4px 0 0;font-size:13.5px}

/* 116면 — 짙은 잉크 면 + 약도 범례 줄(약도의 야영장 표시 = 116면) + 사진 한 장 */
.sites{background:var(--ink);color:var(--ivory)}
.st-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:center}
.st-key{padding:clamp(22px,2.6vw,32px);border:1.5px solid rgba(221,194,156,.45);border-radius:var(--rad);background:rgba(246,239,223,.04)}
.sites .st-row{display:grid;row-gap:14px;font-size:clamp(26px,2.6vw,34px);line-height:1.2;color:var(--ivory)}
.st-l{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:2px dashed rgba(221,194,156,.5)}
.st-ti{width:52px;height:52px;padding:11px;border-radius:50%;background:var(--pine);color:var(--ivory);box-shadow:0 0 0 5px rgba(221,194,156,.16)}
.st-ti g{stroke-width:2.1}
.st-v{justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:.12em;color:var(--kraft);line-height:.9}
.st-v b{font-size:clamp(92px,10vw,150px);letter-spacing:-.04em}
.st-u{font-size:clamp(28px,2.8vw,40px)}
.l-en .st-u{font-size:clamp(22px,2.2vw,30px)}
.l-en .st-v b{font-size:clamp(80px,8.4vw,124px)}   /* «116 campsites» 한 줄 */
.st-ko{margin-top:12px;text-align:right}
.st-ko .k{margin:0;font-size:16px;color:var(--kraft3)}
.ph{background:var(--paper);padding:10px 10px 0;border-radius:6px;box-shadow:0 30px 50px -30px rgba(0,0,0,.8)}
.ph img{width:100%;border-radius:2px}
.ph figcaption{padding:10px 4px 12px;font-family:var(--ff);font-size:14.5px;font-weight:600;color:var(--ink2)}

/* 연락처 */
.contact{background:var(--ivory)}
.ct-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start}
.ct-k{margin-top:22px;font-size:15px;font-weight:800;color:var(--ink2)}
.ct-num{font-family:var(--fs);font-weight:900;font-size:clamp(40px,5.4vw,66px);line-height:1.1;letter-spacing:-.02em}
.ct-num a{text-decoration:none}
.btn-wide{margin-top:20px;min-width:min(100%,320px)}
.ct-more h3{font-size:21px;font-weight:700;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.lks{display:grid;gap:12px;margin-top:16px}
.lk{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:16px 18px;border:2px solid var(--ink);border-radius:var(--rad);background:var(--paper);text-decoration:none;transition:background .15s,box-shadow .15s}
.lk:hover{background:#fff;box-shadow:4px 4px 0 var(--kraft)}
.lk-t{grid-column:1;font-size:17px;font-weight:800;line-height:1.35}
.lk-k{display:block;margin:2px 0 0;font-size:13.5px}
.lk-h{grid-column:1;font-size:13.5px;font-weight:600;color:var(--ink3)}
.lk .ie{grid-column:2;grid-row:1/3;width:20px;height:20px}
.voice{display:flex;align-items:flex-start;gap:7px;margin-top:20px;font-size:14px;font-weight:600;color:var(--ink2);line-height:1.55}
.voice .i{width:18px;height:18px;margin-top:1px;color:var(--ink3)}

/* 길찾기 */
.dirs{background:var(--kraft) var(--grain);border-top:2px solid var(--ink)}
.dr-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start}
.dl{margin-top:26px;border-top:2px solid var(--ink)}
.dl>div{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:start;gap:14px;padding:16px 0;border-bottom:1.5px dashed rgba(46,33,22,.45)}
.dl dt{display:flex;align-items:center;gap:7px;padding-top:2px;font-size:15px;font-weight:800;color:var(--ink2);line-height:1.4}
.dl dt .i{color:var(--rust)}
.dl dd{font-size:18px;font-weight:800;line-height:1.45}
.adr{font-size:20px}
.adr-l{font-size:17px}
.gps{font-weight:700;font-size:16px}
.taxi{margin-top:12px;padding:14px 18px;border:2px dashed var(--ink);border-radius:14px;background:var(--paper)}
.taxi-k{font-size:13.5px;font-weight:700;color:var(--ink2)}
.taxi-a{margin-top:2px;font-size:clamp(22px,2.4vw,28px);font-weight:800;line-height:1.3;letter-spacing:-.01em}
.dr-r{padding-top:8px}
.dr-btns{display:grid;gap:12px}
.btn-big{min-height:66px;font-size:18px;justify-content:space-between;padding:0 22px}
.btn-big span{flex:1;text-align:left}
.tip{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:15px;font-weight:700;line-height:1.55}
.tip .i{margin-top:2px;color:var(--rust)}

/* ---------- 맨 아래 */
.ft{background:var(--ink);color:var(--ivory);padding:52px 0 40px}
.ft-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;padding-bottom:28px;border-bottom:1.5px solid rgba(246,239,223,.2)}
.ft-logo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.ft .logo-t{color:var(--ivory);font-size:26px}
.ft .lg-b{color:var(--kraft3)}
.ft .lg-ic{color:var(--kraft)}
.ft-en{font-size:15px;font-weight:700;color:var(--kraft3)}
.cta-f .btn-call{background:var(--kraft);color:var(--ink)}
.cta-f .btn-call .bn{border-left-color:rgba(46,33,22,.3)}
.cta-f .btn-call:hover{background:var(--kraft3)}
.cta-f .btn-map{background:transparent;color:var(--ivory);border-color:rgba(246,239,223,.55)}
.cta-f .btn-map .i:first-child{color:var(--kraft)}
.cta-f .btn-map:hover{background:rgba(246,239,223,.1)}
.ft-i{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:22px;font-size:15px;font-weight:600}
.ft-tel{display:inline-block;padding:10px 0;margin:-10px 0;font-weight:800;text-decoration:none}
.ft-src{margin-top:14px;font-size:13.5px;color:var(--kraft3)}
.ft-c{margin-top:4px;font-size:13.5px;font-weight:700;color:var(--ivory)}

/* ---------- 반응형 */
/* 짧은 노트북(1366×657·1280×720·1440×900 EN): 첫 화면에 거리 목록 6줄이 다 보이게 */
@media (min-width:1001px) and (max-height:920px){
  .hero{padding-top:14px}
  .kicker{display:none}
  .h1{margin-top:10px}
  .h-info{margin-top:6px}
  .h-act{margin-top:12px}
  .lead{margin-top:12px;line-height:1.3;font-size:22px}
  .nb{margin-top:6px}
  .nb-i{padding:5px 6px 6px 2px}
  .nb-t{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .nb-sub{margin-top:0}
}
@media (max-width:1180px){
  .fcs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hd-tel span{display:none}
  .hd-tel{width:40px;padding:0;justify-content:center}
}
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr}
  .h-map{position:static;margin-top:36px}
  .st-in,.ct-in,.dr-in{grid-template-columns:1fr}
  .gnb{display:none}
  .burger{display:flex}
  .hd-in{justify-content:space-between}
}
@media (max-width:720px){
  :root{--hd:60px}
  body{font-size:16px}
  .lsw{display:none}
  .drawer .dr-lsw{display:inline-flex}
  .lsel{display:block}
  .logo-t{font-size:20px}
  .lg-f{padding-left:1.5rem}
  .mk-l{display:none}
  .mk-n{width:24px;height:24px;font-size:13px}
  .mk-ti{width:34px;height:34px;padding:7px}
  .ml-road{display:none}
  .nb-km b{font-size:26px}
  .fcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .fc{padding:22px 10px 18px}
  .fic{width:54px;height:54px}
  .dl>div{grid-template-columns:1fr;gap:4px}
  .sec-k{width:48px;height:48px}
}
@media (max-width:440px){
  .btn{font-size:16px;padding:0 16px}
  .nb-i{grid-template-columns:30px minmax(0,1fr) auto;column-gap:10px}
  .nb-bar{left:40px;width:calc((100% - 40px) * var(--d))}
  .nb-name{font-size:17px}
  .nb-km{display:grid;grid-template-columns:auto auto;align-items:baseline;justify-items:end;column-gap:2px}
  .nb-km small:first-child{grid-column:1/-1;font-size:12px;line-height:1.2}
  .cta-f,.cta-f .dir{width:100%}
  .lead::after{display:none}   /* 좁은 폭: 제목이 줄을 바꾸면 점선이 토막으로 남는다 */
  .st-v b{font-size:min(92px,22vw)}
  .cta-f .btn{flex:1 1 100%}
  .hd-r{gap:6px}
  .hd-tel{display:none}          /* 전화는 바로 아래 첫 화면 버튼·서랍에 있다 — 좁은 폭에서 머리 줄이 넘치지 않게 */
  .lsel .ic{display:none}
  .lsel summary{padding:0 10px 0 8px}
  .logo-t{font-size:19px}
}
@media (max-width:340px){.lg-f{display:none}}   /* 320 폭: 외국어 이름 줄이 머리 줄을 넘친다 — 바로 아래 h1 에 있다 */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}