/* 강남 도깨비(www.gangnam-goblin.com) 리뉴얼 시안 gg1 — 톤 「한지와 청사초롱」.
   미색 한지 바탕(css 노이즈, 이미지 0) · 먹 글자 · 홍은 주 CTA와 영업 칩 점만 · 청은 링크·세로 축·마디.
   카드·그림자 0(구역은 여백과 먹 10% 가는 선으로만 나눈다). 기능 요소(다이얼로그·입력)만 모서리 4px. 웹폰트 0. */
:root {
  --bg: #f6f1e6;
  --pane: #efe8d8;
  --ink: #1b1a17;
  --ink2: #5a554b;
  --hong: #b3262e;
  --cheong: #1f4e8c;
  --on: #ffffff;
  --hair: rgba(27, 26, 23, .1);
  --barh: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 12px;
  scroll-padding-bottom: calc(var(--barh) + 16px);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
html:lang(ja) { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; }
html:lang(zh) { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html:lang(ko) body { word-break: keep-all; }
body {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  overflow-wrap: break-word;
  background-color: var(--bg);
  /* 한지 섬유: 점 두 겹 + 비스듬한 가는 결 두 겹(아주 옅게) */
  background-image:
    radial-gradient(circle at 30% 40%, rgba(120, 96, 52, .06) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .5) 0 .8px, transparent 1.4px),
    repeating-linear-gradient(97deg, rgba(110, 88, 50, .028) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(11deg, rgba(110, 88, 50, .022) 0 1px, transparent 1px 14px);
  background-size: 7px 7px, 13px 11px, auto, auto;
  padding-bottom: calc(var(--barh) + 1px + env(safe-area-inset-bottom, 0px));
}
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: var(--cheong); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--cheong); outline-offset: 2px; }
h1, h2, h3 { font-weight: 800; }
.gg1-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.gg1-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gg1-nw { white-space: nowrap; }
.gg1-skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 14px; text-decoration: none; }
.gg1-skip:focus { top: 8px; }
.gg1-anchor { display: block; position: relative; top: -8px; height: 0; }

/* ---------- 상단: 모바일은 상호 글자 + 언어 링크만, PC는 오른쪽 4링크 ---------- */
.gg1-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; max-width: 1180px; margin: 0 auto; padding: 4px 14px 0 20px; }
.gg1-brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 800; font-size: 16px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.gg1-brand:lang(en) { font-size: 15px; }
.gg1-topr { display: flex; align-items: center; gap: 4px; }
.gg1-nav { display: none; }
.gg1-lang { display: flex; }
.gg1-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 5px; font-size: 13px; font-weight: 600; color: var(--cheong); text-decoration: none; white-space: nowrap; }
.gg1-lang a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

/* ---------- 히어로: 큰 상호 타이포 + 가는 사진 띠 ---------- */
.gg1-hero { padding: 0; }
.gg1-hero-in { max-width: 1180px; margin: 0 auto; padding: 10px 20px 0; }
.gg1-hero-head { display: block; }
.gg1-h1 { margin: 0; line-height: 1.04; letter-spacing: -.025em; color: var(--ink); }
.gg1-h1-name { display: block; font-size: clamp(48px, 14vw, 56px); font-weight: 800; }
.gg1-h1-name:lang(en), .gg1-h1-name:lang(zh), .gg1-h1-name:lang(ja) { font-size: clamp(34px, 10.4vw, 44px); letter-spacing: -.02em; }
.gg1-h1-kind { display: block; margin-top: 10px; font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--ink2); line-height: 1.3; }
.gg1-lead { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink2); }
.gg1-state { display: none; }
.js .gg1-state { display: inline-flex; align-items: center; gap: 9px; margin: 12px 0 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.js .gg1-state::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink2); }
.js .gg1-state[data-open="1"]::before { background: var(--hong); box-shadow: 0 0 0 3px rgba(179, 38, 46, .16); }
.gg1-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.gg1-cta .gg1-btn { flex: 1 1 auto; }
.gg1-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--hong); border-radius: 2px; background: var(--hong); color: var(--on); font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.gg1-btn-line { background: transparent; color: var(--ink); border-color: rgba(27, 26, 23, .38); }
.gg1-band { margin: 22px 0 0; }
.gg1-band img { display: block; width: 100%; height: 130px; object-fit: cover; object-position: 50% 50%; }
.gg1-band figcaption, .gg1-gal figcaption { font-size: 12px; line-height: 1.5; color: var(--ink2); }
.gg1-band figcaption { max-width: 1180px; margin: 0 auto; padding: 6px 20px 0; text-align: right; }

/* ---------- 타임라인 세로 축: 청 1.5px 선 + 구역마다 마디·이름 ---------- */
.gg1-axis { position: relative; max-width: 1000px; margin: 0 auto; padding: 0 20px 8px 50px; }
.gg1-axis::before { content: ""; position: absolute; left: 24px; top: 48px; bottom: 0; width: 1.5px; background: var(--cheong); }
.gg1-sec { position: relative; padding: 34px 0 30px; border-top: 1px solid var(--hair); }
.gg1-sec:first-child { border-top: 0; }
.gg1-sec h2 { position: relative; margin: 0 0 14px; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }
.gg1-sec h2::before { content: ""; position: absolute; left: -31.25px; top: 8.3px; width: 12px; height: 12px; border: 1.5px solid var(--cheong); border-radius: 50%; background: var(--bg); }
.gg1-sec h2 .gg1-no { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--cheong); }
.gg1-sec p { margin: 0 0 10px; max-width: 40em; }
.gg1-sec .gg1-note { font-size: 14px; line-height: 1.6; color: var(--ink2); }
.gg1-lines { list-style: none; margin: 0; padding: 0; }
.gg1-lines li { position: relative; padding: 8px 0 8px 18px; border-top: 1px solid var(--hair); }
.gg1-lines li:first-child { border-top: 0; padding-top: 0; }
.gg1-lines li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 9px; height: 1.5px; background: var(--cheong); }
.gg1-lines li:first-child::before { top: calc(1.15em - 8px); }
.gg1-lines p { margin: 0; }
.gg1-addr strong { font-weight: 600; }
.gg1-ac { display: none; }
.js .gg1-ac { display: inline-grid; vertical-align: middle; align-items: center; justify-items: center; min-width: 44px; min-height: 44px; margin: 2px 0 0 6px; padding: 0 12px; border: 1px solid rgba(31, 78, 140, .55); border-radius: 2px; background: transparent; color: var(--cheong); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.gg1-ac > span { grid-area: 1 / 1; }
.gg1-ac .gg1-l2 { visibility: hidden; }
.gg1-ac.is-ok .gg1-l1 { visibility: hidden; }
.gg1-ac.is-ok .gg1-l2 { visibility: visible; }
.gg1-steps { list-style: none; margin: 0; padding: 0; }
.gg1-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--hair); }
.gg1-steps li:first-child { border-top: 0; padding-top: 0; }
.gg1-steps .gg1-sn { font-size: 15px; font-weight: 800; color: var(--cheong); font-variant-numeric: tabular-nums; line-height: 1.7; }
.gg1-steps p { margin: 0; }
.gg1-week { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 14px 0 12px; padding: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); max-width: 520px; }
.gg1-week li { padding: 8px 0; text-align: center; font-size: 12px; line-height: 1.4; color: var(--ink2); }
.gg1-week li + li { border-left: 1px solid var(--hair); }
.gg1-week b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.gg1-week .is-off b { color: var(--ink2); }
.gg1-sec .gg1-glance { margin: 0; padding: 12px 0 12px 14px; border-left: 3px solid var(--cheong); font-size: 17px; font-weight: 600; line-height: 1.75; }
/* 공간 사진 3장(a·b·c): 모바일은 가로 넘김 띠(두 장 + 다음 장 끝이 보임, 스냅), PC는 3열 */
.gg1-gal { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; margin: 16px 0 16px; max-width: 560px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.gg1-gal figure { margin: 0; scroll-snap-align: start; }
.gg1-gal:focus-visible { outline: 2px solid var(--cheong); outline-offset: 2px; }
.gg1-gal img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.gg1-gal figcaption { padding-top: 5px; }
.gg1-faq details { border-top: 1px solid var(--hair); }
.gg1-faq details:last-child { border-bottom: 1px solid var(--hair); }
.gg1-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 10px 0; font-weight: 600; line-height: 1.5; cursor: pointer; list-style: none; }
.gg1-faq summary::-webkit-details-marker { display: none; }
.gg1-faq summary::after { content: "+"; flex: none; width: 20px; text-align: center; font-size: 22px; font-weight: 400; line-height: 1; color: var(--cheong); }
.gg1-faq details[open] summary::after { content: "\2212"; }
.gg1-faq details p { margin: 0 0 14px; color: var(--ink); }
.gg1-telno { margin: 6px 0 14px; font-size: 15px; color: var(--ink2); }
.gg1-telno a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px; font-size: 20px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.gg1-c-act { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- 푸터(해시 이력, v2.3 구조) ---------- */
.gg1-foot { border-top: 1px solid var(--hair); background: var(--pane); color: var(--ink); }
.gg1-foot-in { max-width: 1000px; margin: 0 auto; padding: 30px 20px 26px 50px; font-size: 14px; line-height: 1.6; }
.gg1-foot address { font-style: normal; display: grid; gap: 2px; }
.gg1-foot address strong { font-size: 16px; font-weight: 800; }
.gg1-foot-tel { display: inline-block; position: relative; z-index: 1; padding: 11px 2px; margin: 0; color: var(--cheong); }
.gg1-foot-nav { display: flex; flex-wrap: wrap; margin: 16px 0 12px -10px; }
.gg1-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--cheong); }
.gg1-foot-legal p { margin: 0 0 8px; color: var(--ink2); }
.gg1-foot-legal .gg1-adult { color: var(--ink); }
.gg1-foot-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.gg1-foot-proof > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gg1-proof-lab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gg1-foot-proof .gg1-ic { width: 16px; height: 16px; color: var(--cheong); }
.gg1-hash { display: inline-block; padding: 1px 7px; border-radius: 2px; background: rgba(31, 78, 140, .09); color: var(--ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.gg1-hash-long, dd > .gg1-hash:first-child + a { margin-top: 4px; }
.gg1-hash-long { display: block; max-width: 100%; padding: 6px 10px; overflow-wrap: anywhere; word-break: break-all; line-height: 1.5; }
.gg1-proofs { display: none; }
.js .gg1-proofs { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 4px 0 0 -4px; }
.gg1-linkbtn { display: none; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--cheong); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.js .gg1-linkbtn { display: inline-flex; }
.gg1-src { margin-top: 10px; }
.js .gg1-src { display: none; }
.gg1-src summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.gg1-src h3, .gg1-dlg h3 { margin: 16px 0 6px; font-size: 15px; }
.gg1-src dl, .gg1-dlg dl { margin: 0; }
.gg1-src dl > div, .gg1-dlg dl > div { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--hair); }
.gg1-src dt, .gg1-dlg dt { color: var(--ink2); }
.gg1-src dd, .gg1-dlg dd { margin: 0; min-width: 0; }
.gg1-src dd a, .gg1-dlg dd a { display: inline-block; position: relative; z-index: 1; padding: 11px 0; margin: 0; }
.gg1-log { list-style: none; margin: 0; padding: 0; }
.gg1-log li { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--hair); }
.gg1-law { margin: 0; padding-left: 1.3em; }
.gg1-law li { margin: 0 0 6px; }

/* ---------- 다이얼로그(기능 요소: 모서리 4px) ---------- */
.gg1-dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid rgba(27, 26, 23, .28); border-radius: 4px; background: var(--bg); color: var(--ink); }
.gg1-dlg[open] { display: flex; flex-direction: column; }
.gg1-dlg::backdrop { background: rgba(27, 26, 23, .5); }
.gg1-dlg-top { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-bottom: 1px solid var(--hair); }
.gg1-dlg-top .gg1-ic { color: var(--cheong); }
.gg1-dlg-top h2 { flex: 1; margin: 0; font-size: 17px; }
.gg1-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.gg1-dlg-body { overflow: auto; padding: 4px 18px 14px; font-size: 14px; line-height: 1.6; }
.gg1-dlg-body > p { margin: 10px 0 0; color: var(--ink2); }
.gg1-dlg-foot { padding: 10px 18px 14px; border-top: 1px solid var(--hair); }
.gg1-dlg-foot .gg1-btn { min-height: 44px; }

/* ---------- 하단 탭(모바일): 길·시간·요금·연락, 불투명 미색, 위 1px 청선 ---------- */
.gg1-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--bg); border-top: 1px solid var(--cheong); padding-bottom: env(safe-area-inset-bottom, 0px); }
.gg1-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: var(--barh); padding: 4px 2px; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; }
.gg1-bar .gg1-ic { width: 20px; height: 20px; color: var(--cheong); }

/* ---------- PC ---------- */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  html { scroll-padding-bottom: 16px; }
  .gg1-bar { display: none; }
  .gg1-top { padding: 10px 40px 0; }
  .gg1-brand { font-size: 18px; }
  .gg1-nav { display: flex; margin-right: 18px; }
  .gg1-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
  .gg1-nav a:hover { color: var(--cheong); text-decoration: underline; }
  .gg1-lang { padding-left: 14px; border-left: 1px solid var(--hair); }
  .gg1-hero-in { padding: 40px 40px 0; }
  .gg1-h1-name { font-size: 104px; }
  .gg1-h1-name:lang(en), .gg1-h1-name:lang(zh), .gg1-h1-name:lang(ja) { font-size: 84px; }
  .gg1-h1-kind { font-size: 22px; margin-top: 14px; }
  .gg1-lead { font-size: 17px; margin-top: 20px; }
  .gg1-cta { margin-top: 22px; }
  .gg1-cta .gg1-btn { flex: 0 0 auto; min-width: 180px; }
  .gg1-band { margin-top: 40px; }
  .gg1-band img { height: 260px; }
  .gg1-band figcaption { padding: 6px 40px 0; }
  .gg1-axis { max-width: 1180px; padding: 12px 40px 24px 130px; }
  .gg1-axis::before { left: 40px; top: 73px; }
  .gg1-sec { max-width: 680px; padding: 44px 0 38px; }
  .gg1-sec h2 { font-size: 26px; }
  .gg1-sec h2::before { left: -95.25px; top: 10.9px; }
  .gg1-sec p { font-size: 17px; }
  .gg1-gal { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; overflow: visible; padding-bottom: 0; }
  .gg1-foot-in { max-width: 1180px; padding: 36px 40px 40px 130px; }
  .gg1-foot-in > * { max-width: 680px; }
}

/* r6 C3: 요일 칸(section#hours ol.gg1-week) 글자와 세로 구분선 사이 여백 4px 이상 보장(글자 8% 확대 포함) */
.gg1-week li { padding-inline: 4px; }
@media (max-width: 440px) {
  .gg1-week li { font-size: 11px; letter-spacing: -.02em; }
  .gg1-week b { font-size: 13px; }
}

/* route.css — 공식홈 공통 부품 「찾아오는 길」 약도 + 「지도 앱으로 열기」(design M002.P024.T018).
   색은 전부 변수다. 사이트는 .rt 에 --rt-* 값만 준다(견본 samples 아래 사이트 폴더의 site-route.css). 웹폰트·url()·@import 0, 외부 요청 0.
   큰 제목 규칙: 제목 안 nowrap span 0, 크기는 clamp, 카드 안 글은 줄바꿈 허용. 누름 대상 최소 높이 48px(>= 44). */
.rt {
  --rt-acc: #4a4a4a;
  --rt-ink: #202020;
  --rt-ink2: #555555;
  --rt-paper: #ffffff;
  --rt-road: #e7e3dd;
  --rt-soft: #2020200f;
  --rt-line: #20202026;
  --rt-on: #ffffff;
  min-width: 0;
  -webkit-hyphens: none;
  hyphens: none; /* 부품 전체 하이픈 분절 0. 고유 표기의 하이픈은 생성기가 U+2011(줄 안 갈리는 하이픈)로 바꾼다 */
}
.rt *, .rt *::before, .rt *::after { box-sizing: border-box; }
.rt-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* 제목·단서 */
.rt-h { margin: 0 0 6px; font-size: clamp(22px, 6vw, 30px); line-height: 1.25; overflow-wrap: break-word; }
.rt-h3 { margin: 0 0 8px; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.3; overflow-wrap: break-word; }
.rt:lang(ko) .rt-h, .rt:lang(ko) .rt-h3 { word-break: keep-all; }
/* T018: 부품 글 전체(걷는 순서·범례·단서) 낱말 중간 꺾임 0. ko 는 어절 단위, ja 는 구 단위(auto-phrase 미지원 브라우저는 무시). nowrap 아님 */
.rt:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
.rt:lang(ja) { word-break: auto-phrase; overflow-wrap: break-word; }
.rt-cue { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--rt-ink2); overflow-wrap: break-word; }

/* 배치: 좁은 폭 위아래, 768 이상 약도 7 : 안내 5 */
.rt-body { display: grid; gap: 16px; }
@media (min-width: 768px) { .rt-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.rt-fig { margin: 0; min-width: 0; }

/* 약도 SVG(글자 0). 변주 class: rt-s3|s5|s8 · rt-miter|round · rt-dot-* · rt-pin-* · rt-grid-on|off */
.rt-svg { display: block; width: 100%; height: auto; max-width: 640px; border: 1px solid var(--rt-line); }
.rt-bg { fill: var(--rt-paper); }
.rt-grid { fill: none; stroke: var(--rt-soft); stroke-width: 1; }
.rt-road { fill: none; stroke: var(--rt-road); }
.rt-s3 .rt-road-big { stroke-width: 16; } .rt-s3 .rt-road-st { stroke-width: 10; }
.rt-s5 .rt-road-big { stroke-width: 20; } .rt-s5 .rt-road-st { stroke-width: 12; }
.rt-s8 .rt-road-big { stroke-width: 24; } .rt-s8 .rt-road-st { stroke-width: 14; }
.rt-path { fill: none; stroke: var(--rt-acc); stroke-linecap: round; }
.rt-s3 .rt-path { stroke-width: 3; }
.rt-s5 .rt-path { stroke-width: 5; stroke-dasharray: 10 7; stroke-linecap: butt; }
.rt-s8 .rt-path { stroke-width: 7; stroke-dasharray: 0.1 13; }
.rt-miter .rt-path { stroke-linejoin: miter; }
.rt-round .rt-path { stroke-linejoin: round; }
.rt-start { fill: var(--rt-paper); stroke: var(--rt-ink); stroke-width: 4; }
.rt-start-core { fill: var(--rt-ink); }
.rt-pin { fill: var(--rt-acc); stroke: var(--rt-paper); stroke-width: 3; stroke-linejoin: round; }
.rt-pin-hole { fill: var(--rt-paper); }
.rt-pin-pole { fill: none; stroke: var(--rt-ink); stroke-width: 3; stroke-linecap: round; }
.rt-num-bg { fill: var(--rt-ink); }
.rt-num { fill: none; stroke: var(--rt-paper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rt-north { fill: var(--rt-ink); }
.rt-north-n { stroke: var(--rt-ink); }
/* 2차 방위판: 곧은 방위선(가는 점선)과 축척 막대(둘 다 정밀 좌표일 때만) */
.rt-bear { fill: none; stroke: var(--rt-ink2); stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; }
.rt-scale { fill: none; stroke: var(--rt-ink); stroke-width: 2; stroke-linecap: square; }

/* 범례(SVG 밖 HTML) */
.rt-legend ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; line-height: 1.4; }
.rt-k { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.rt-k-note { color: var(--rt-ink2); }
.rt-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px;
  border-radius: 50%; background: var(--rt-ink); color: var(--rt-paper); font-size: 12px; font-weight: 700; line-height: 1; vertical-align: -5px; }
.rt-k .rt-badge { margin-right: 0; }
.rt-k-lm .rt-badge { border-radius: 3px; }
.rt-sw { flex: none; width: 16px; height: 16px; border: 3px solid var(--rt-ink); background: var(--rt-paper); }
.rt-sw-circle { border-radius: 50%; }
.rt-sw-ring { border-radius: 50%; background: radial-gradient(circle, var(--rt-ink) 0 3px, var(--rt-paper) 3.5px); }
.rt-sw-diamond { width: 13px; height: 13px; margin: 0 2px; transform: rotate(45deg); }
.rt-sw-pin { border: 0; background: var(--rt-acc); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.rt-sw-bear { width: 18px; height: 0; border: 0; border-top: 2px dotted var(--rt-ink2); background: none; }
.rt-sw-scale { width: 18px; height: 8px; border: 2px solid var(--rt-ink); border-top: 0; background: none; }
/* 그림 0 상태(정보가 출구와 가게 둘뿐): figure 없이 안내 카드만 한 칸 */
@media (min-width: 768px) { .rt-noart .rt-body { grid-template-columns: minmax(0, 1fr); max-width: 720px; } }

/* 안내 카드 */
.rt-card { min-width: 0; padding: 16px; border: 1px solid var(--rt-line); background: var(--rt-paper); color: var(--rt-ink); }
.rt-steps { margin: 0 0 16px; padding-left: 1.4em; }
.rt-steps li { margin: 4px 0; overflow-wrap: break-word; }
/* 번호 표지는 글 줄 밖 왼쪽 고정 칸: 글은 표지 없이 한 덩어리로 줄바꿈된다 */
.rt-steps li.rt-st-b { position: relative; padding-left: 30px; }
.rt-st-b > .rt-badge { position: absolute; left: 0; top: calc(0.75em - 11px); margin: 0; vertical-align: 0; }
.rt-addr-line { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; overflow-wrap: anywhere; }
.rt-addr-k { font-size: 13px; color: var(--rt-ink2); }
.rt-tag { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border: 1px solid var(--rt-acc); color: var(--rt-acc); font-size: 13px; line-height: 1.5; }
.rt-group-k { margin: 12px 0 6px; font-size: 14px; font-weight: 700; }

/* 버튼 묶음: 넓은 폭 한 줄 흐름, 599 이하 2열.
   버튼 라벨은 9자 안팎 짧은 글이라 한 줄로 묶는다(nowrap). 글자 크기는 묶음 폭(cqi) 기준 clamp 로 2열 칸에 들어오게 한다.
   12px 바닥에서도 넘치는 좁은 묶음에서만 그 언어만 낱말 경계로 꺾는다(아래 @container, 문턱은 tools/btnfit_calc.py 추정 + 여유 4px). */
.rt-acts { position: relative; display: flex; flex-wrap: wrap; gap: 8px; container-type: inline-size; }
.rt-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; max-width: 100%; min-height: 48px;
  padding: 10px 14px; border: 1px solid var(--rt-acc); background: var(--rt-paper); color: var(--rt-acc); font: inherit;
  font-size: clamp(12px, 4.2vw, 15px); font-size: clamp(12px, calc(6.8cqi - 3px), 15px);
  font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; white-space: nowrap; overflow-wrap: normal; cursor: pointer; }
.rt-btn:focus-visible { outline: 2px solid var(--rt-ink); outline-offset: 2px; }
@media (hover: hover) { .rt-map:hover { background: var(--rt-acc); color: var(--rt-on); } }
.rt-copy { display: inline-grid; place-items: center; background: var(--rt-acc); color: var(--rt-on); }
.rt-copy > span { grid-area: 1 / 1; }
.rt-copy .rt-l2, .rt-copy.is-ok .rt-l1 { visibility: hidden; }
.rt-copy.is-ok .rt-l2 { visibility: visible; }
html:not(.js) .rt-copy { display: none; }
/* 애플 지도: iOS(WebKit 터치)에서만. JS 0 — -webkit-touch-callout 은 iOS·iPadOS WebKit 만 지원한다 */
.rt-apple { display: none; }
@supports (-webkit-touch-callout: none) { .rt-apple { display: inline-flex; } }
@media (max-width: 599px) {
  .rt-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-btn { width: 100%; padding: 10px 8px; }
  @supports (-webkit-touch-callout: none) { .rt-apple { grid-column: 1 / -1; } }
}
/* 12px 바닥에서도 넘치는 언어만 줄바꿈 허용 — 낱말 경계로만(en 빈칸, ko·zh keep-all, ja keep-all + auto-phrase + 생성기 wbr) */
@container (max-width: 215.98px) { .rt:lang(ja) .rt-btn { white-space: normal; word-break: keep-all; word-break: auto-phrase; } }
@container (max-width: 206.98px) { .rt:lang(en) .rt-btn { white-space: normal; } }
@container (max-width: 186.98px) { .rt:lang(zh) .rt-btn { white-space: normal; word-break: keep-all; } }
@container (max-width: 174.98px) { .rt:lang(ko) .rt-btn { white-space: normal; word-break: keep-all; } }
@media (forced-colors: active) {
  .rt-path, .rt-pin-pole, .rt-bear, .rt-scale { stroke: CanvasText; }
  .rt-pin, .rt-num-bg, .rt-north { fill: CanvasText; }
  .rt-btn { border-color: ButtonText; }
}

/* 강남 도깨비(gg1 한지와 청사초롱) 「찾아오는 길」 부품 색 값. route.css 뒤에 싣는다. 값은 gg1.css :root 변수에서 옮겼다(홍 #b3262e, 청 #1f4e8c). 모서리 2px. 변주: s3 · round · ring · flag · grid on. */
.rt {
  --rt-acc: #b3262e;
  --rt-ink: #1b1a17;
  --rt-ink2: #5a554b;
  --rt-paper: #fbf8f0;
  --rt-road: #e6dcc6;
  --rt-soft: #1b1a1712;
  --rt-line: rgba(27, 26, 23, .22);
  --rt-on: #ffffff;
}
.rt-svg, .rt-card, .rt-btn, .rt-tag { border-radius: 2px; }
.rt { margin-top: 22px; }

/* 강남 도깨비 gg1 다크 팔레트 「밤의 한지」 — design M002.P024.T020 생성물(tools/gg_dark.py, 손으로 고치지 말 것).
   gg1.css 뒤에 붙인다(dev 빌드). 걸리는 경우: html[data-theme=dark] 또는 시스템 다크에서 html[data-theme=system]·data-theme 없음(JS 끔).
   토큰: 바탕 --bg · 면 --pane · 글 --ink · 보조 글 --ink2 · 선 --hair · 강조 --hong/--cheong · 버튼 --hong/--on/--btn-line · 사진 자리 --photo */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17150f;
  --pane: #201d16;
  --ink: #ece4d3;
  --ink2: #b5ac99;
  --hong: #c8323a;
  --cheong: #8db0e6;
  --on: #ffffff;
  --hair: rgba(236, 228, 211, .14);
  --photo: #2a261d;
  --btn-line: rgba(236, 228, 211, .46);
  --ac-line: rgba(141, 176, 230, .6);
  --hash-bg: rgba(141, 176, 230, .14);
}
:root[data-theme="dark"] body { background-image:
    radial-gradient(circle at 30% 40%, rgba(236, 228, 211, .035) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .25) 0 .8px, transparent 1.4px),
    repeating-linear-gradient(97deg, rgba(236, 228, 211, .018) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(11deg, rgba(236, 228, 211, .014) 0 1px, transparent 1px 14px); }
:root[data-theme="dark"].js .gg1-state[data-open="1"]::before { box-shadow: 0 0 0 3px rgba(200, 50, 58, .3); }
:root[data-theme="dark"] .gg1-btn-line { border-color: var(--btn-line); }
:root[data-theme="dark"].js .gg1-ac { border-color: var(--ac-line); }
:root[data-theme="dark"] .gg1-hash { background: var(--hash-bg); }
:root[data-theme="dark"] .gg1-dlg { border-color: rgba(236, 228, 211, .28); }
:root[data-theme="dark"] .gg1-dlg::backdrop { background: rgba(0, 0, 0, .62); }
:root[data-theme="dark"] .gg1-band img, :root[data-theme="dark"] .gg1-gal img { background-color: var(--photo); }
:root[data-theme="dark"] .rt { --rt-acc: #d9686e; --rt-ink: #ece4d3; --rt-ink2: #b5ac99; --rt-paper: #201d16; --rt-road: #403b2d; --rt-soft: rgba(236, 228, 211, .08); --rt-line: rgba(217, 104, 110, .35); --rt-on: #17150f; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"], :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #17150f;
    --pane: #201d16;
    --ink: #ece4d3;
    --ink2: #b5ac99;
    --hong: #c8323a;
    --cheong: #8db0e6;
    --on: #ffffff;
    --hair: rgba(236, 228, 211, .14);
    --photo: #2a261d;
    --btn-line: rgba(236, 228, 211, .46);
    --ac-line: rgba(141, 176, 230, .6);
    --hash-bg: rgba(141, 176, 230, .14);
  }
  :root[data-theme="system"] body, :root:not([data-theme]) body { background-image:
    radial-gradient(circle at 30% 40%, rgba(236, 228, 211, .035) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .25) 0 .8px, transparent 1.4px),
    repeating-linear-gradient(97deg, rgba(236, 228, 211, .018) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(11deg, rgba(236, 228, 211, .014) 0 1px, transparent 1px 14px); }
  :root[data-theme="system"].js .gg1-state[data-open="1"]::before, :root:not([data-theme]).js .gg1-state[data-open="1"]::before { box-shadow: 0 0 0 3px rgba(200, 50, 58, .3); }
  :root[data-theme="system"] .gg1-btn-line, :root:not([data-theme]) .gg1-btn-line { border-color: var(--btn-line); }
  :root[data-theme="system"].js .gg1-ac, :root:not([data-theme]).js .gg1-ac { border-color: var(--ac-line); }
  :root[data-theme="system"] .gg1-hash, :root:not([data-theme]) .gg1-hash { background: var(--hash-bg); }
  :root[data-theme="system"] .gg1-dlg, :root:not([data-theme]) .gg1-dlg { border-color: rgba(236, 228, 211, .28); }
  :root[data-theme="system"] .gg1-dlg::backdrop, :root:not([data-theme]) .gg1-dlg::backdrop { background: rgba(0, 0, 0, .62); }
  :root[data-theme="system"] .gg1-band img, :root:not([data-theme]) .gg1-band img, :root[data-theme="system"] .gg1-gal img, :root:not([data-theme]) .gg1-gal img { background-color: var(--photo); }
  :root[data-theme="system"] .rt, :root:not([data-theme]) .rt { --rt-acc: #d9686e; --rt-ink: #ece4d3; --rt-ink2: #b5ac99; --rt-paper: #201d16; --rt-road: #403b2d; --rt-soft: rgba(236, 228, 211, .08); --rt-line: rgba(217, 104, 110, .35); --rt-on: #17150f; }
}

/* 공식홈 공통 부품: 라이트/다크 테마 토글 단추 (design M002.P024.T020, spec.md).
   사이트 css 뒤, 사이트 다크 팔레트(sites/*-dark.css) 앞이나 뒤 어디든 된다(서로 다른 속성만 만진다).
   단추 색은 머리말 글색을 물려받는다(color: inherit) — 아이콘 대비는 사이트의 글/바탕 대비와 같다. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.theme-btn { display: none; }
.js .theme-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-btn svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.theme-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (hover: hover) { .js .theme-btn:hover { background: rgba(127, 127, 127, .14); } }
/* 아이콘은 aria-pressed가 아니라 data-theme으로 고른다 — theme.js가 돌기 전 첫 그림부터 맞는 아이콘이 나온다.
   라이트에서는 달(다크로), 다크에서는 해(라이트로). */
.theme-sun { display: none !important; }
:root[data-theme="dark"] .theme-sun { display: block !important; }
:root[data-theme="dark"] .theme-moon { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .theme-sun { display: block !important; }
  :root[data-theme="system"] .theme-moon { display: none !important; }
}