/* 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; }
}