/* ═══════════════════════════════════════════════════════════════════════
   골목지도 — 너울골 로컬 상점 지도
   구조: 지도가 홈이고 장소 목록이 보조. 이 축을 회사 소개 홈페이지로 되돌리지 않는다.
   색: Primary #F05A28 · Ground #EFE5CF · Ink #13314B
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 공통 뼈대(kit.css) ────────────────────────────────────────────────
   동작에 딸린 규칙만. 손대지 마라 — 인수 검사 20판이 여기에 걸려 있다. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; }
img { -webkit-user-drag: none; user-select: none; }

.frame { display: block; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .75rem 1rem; background: Canvas; color: CanvasText;
}
.skip-link:focus { left: 0; }

@media (max-width: 767px) {
  .site-header a, .site-header button,
  .drawer a, .drawer button,
  .dots button, .pager button, .tab {
    min-width: 44px; min-height: 44px;
  }
}

.scroll-x { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; }
.clip { overflow: clip; }

.acc-item .acc-panel { display: block; }
.js .acc-item .acc-panel { display: none; }
.js .acc-item.open .acc-panel { display: block; }

.js [role="tabpanel"][hidden] { display: none; }
[role="tabpanel"][hidden] { display: block; }

.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.in { opacity: 1; transform: none; }

html:not(.js) .js-only { display: none !important; }

:where([hidden]):not([role="tabpanel"]) { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

.menu-btn { display: none; }
@media (max-width: 767px) { .menu-btn { display: inline-flex; } }

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px);
  transform: translateX(100%); transition: transform .28s ease;
  z-index: 60; overflow-y: auto;
  visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }

.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgb(0 0 0 / .45);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

@media (min-width: 768px) { .drawer, .scrim { display: none; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 0;
  z-index: 80; pointer-events: none;
  opacity: 0; transition: opacity .25s ease, translate .25s ease;
}
.toast.show { opacity: 1; translate: -50% -6px; }

.agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agree input:focus-visible + label .box { outline: 2px solid currentColor; outline-offset: 2px; }

.spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: kit-spin .7s linear infinite;
}
@keyframes kit-spin { to { rotate: 360deg; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.section { padding-block: calc(var(--section, 96px) / 2); }
.section-lead { padding-top: var(--section, 96px); }
.section-last { padding-bottom: var(--section, 96px); }

/* ── 토큰 ──────────────────────────────────────────────────────────────
   color / type / spacing / border / breakpoint / z-index 를 한 자리에 모은다.
   radius 는 표시(원)와 알약 하나에만 쓰고, shadow 는 쓰지 않는다. */
:root {
  /* color */
  --ground: #EFE5CF;
  --paper: #F6EEDD;
  --ink: #13314B;
  --primary: #F05A28;
  --on-primary: #FFF7F1;
  --muted: rgba(19, 49, 75, .64);
  --faint: rgba(19, 49, 75, .40);
  --line: rgba(19, 49, 75, .20);
  --line-strong: rgba(19, 49, 75, .46);
  --tint: rgba(240, 90, 40, .10);
  --tint-2: rgba(240, 90, 40, .18);

  /* type */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* spacing */
  --wrap: 1240px;
  --pad: clamp(16px, 3.4vw, 44px);
  --section: clamp(52px, 6.4vw, 92px);
  --gap: clamp(20px, 2.4vw, 34px);
  --rail: 340px;

  /* border */
  --hair: 1px;

  /* z-index — 서랍 60 · 스크림 50 · 토스트 80 은 뼈대가 정한 값이다 */
  --z-map-pin: 3;
  --z-header: 40;
}

/* breakpoint: 767 이하 = 모바일(내비 숨김·서랍) · 1023 이하 = 한 줄 배치 · 1024 이상 = 지도+목록 두 줄 */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

.skip-link { background: var(--ink); color: var(--ground); font: 600 13px/1 var(--mono); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* ── 활자 ────────────────────────────────────────────────────────────── */
.display {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.05rem, 5.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.038em;
}
.h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  line-height: 1.24;
  letter-spacing: -.032em;
}
.h3 {
  margin: 0;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.024em;
}
.meta {
  font: 500 11.5px/1.5 var(--mono);
  letter-spacing: .12em;
  color: var(--muted);
}
.lead {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 1.02rem;
  color: var(--muted);
}
.body { margin: 12px 0 0; max-width: 62ch; }
.num { font: 500 11px/1 var(--mono); color: var(--faint); letter-spacing: .06em; }

a { color: inherit; }
.inline-link {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 1px;
}
.inline-link:hover { color: var(--primary); }

/* ── 머리 ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(239, 229, 207, .95);
  border-bottom: var(--hair) solid var(--line-strong);
}
@supports (backdrop-filter: blur(6px)) {
  .site-header { background: rgba(239, 229, 207, .86); backdrop-filter: blur(8px); }
}
.site-header.is-stuck { border-bottom-color: var(--ink); }

.header-inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 9px var(--pad);
  display: flex; align-items: center; gap: 18px;
}
.brand {
  font-weight: 800; font-size: 1.18rem; letter-spacing: -.04em;
  text-decoration: none; color: var(--ink);
}
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(10px, 1.5vw, 22px); }
.nav a {
  font: 500 12.5px/1 var(--mono); letter-spacing: .02em;
  color: var(--muted); text-decoration: none;
  padding: 9px 1px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--primary); }

.header-cta {
  font: 600 12px/1 var(--mono); letter-spacing: .02em;
  background: var(--primary); color: var(--on-primary);
  padding: 12px 15px; text-decoration: none;
}
.header-cta:hover { background: var(--ink); }

.menu-btn {
  margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: var(--hair) solid var(--line-strong);
  color: var(--ink); cursor: pointer;
}
.menu-bar, .menu-bar::before, .menu-bar::after {
  display: block; width: 18px; height: 2px; background: currentColor;
}
.menu-bar { position: relative; }
.menu-bar::before, .menu-bar::after { content: ""; position: absolute; left: 0; }
.menu-bar::before { top: -6px; }
.menu-bar::after { top: 6px; }

@media (max-width: 767px) { .nav, .header-cta { display: none; } }

/* ── 서랍 ────────────────────────────────────────────────────────────── */
.drawer {
  background: var(--ground);
  border-left: var(--hair) solid var(--ink);
  padding: 16px 20px 32px;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-head .brand { font-size: 1.05rem; }
.drawer-close {
  background: transparent; border: var(--hair) solid var(--line-strong);
  color: var(--ink); font: 500 12px/1 var(--mono); padding: 0 12px; cursor: pointer;
}
.drawer-nav { display: grid; margin-top: 22px; border-top: var(--hair) solid var(--line-strong); }
.drawer-nav a {
  display: flex; align-items: center;
  padding: 14px 2px; border-bottom: var(--hair) solid var(--line);
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.025em;
  text-decoration: none; color: var(--ink);
}
.drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 22px; padding: 16px;
  background: var(--primary); color: var(--on-primary);
  font-weight: 700; text-decoration: none;
}
.drawer-tel { margin: 16px 0 0; font: 500 13px/1.6 var(--mono); color: var(--muted); }
.drawer-tel a { text-decoration: none; }

/* ── 홈 첫 화면 ───────────────────────────────────────────────────────
   주인공은 업종 소개가 아니라 「지도 + 장소 목록」 구조 자체다. */
.hero-top {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: var(--gap); align-items: start;
}
.hero-title { padding-top: 6px; }
.hero-note { margin: 18px 0 0; max-width: 34ch; color: var(--muted); font-size: .96rem; }

.index-card { border: var(--hair) solid var(--line-strong); background: var(--paper); }
.index-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center; gap: 10px;
  min-height: 56px; padding: 12px 16px;
  border-bottom: var(--hair) solid var(--line);
  text-decoration: none; color: var(--ink);
}
.index-row:last-child { border-bottom: 0; }
.index-row .t { font-weight: 700; letter-spacing: -.026em; }
.index-row .a { font: 500 13px/1 var(--mono); color: var(--faint); text-align: right; }
.index-row:hover { background: var(--tint); }
.index-row:hover .a { color: var(--primary); }

.mapline {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: var(--gap); align-items: start; margin-top: var(--gap);
}
.map-wide { grid-template-columns: minmax(0, 1fr) 360px; }

@media (max-width: 1023px) {
  .hero-top, .mapline, .map-wide { grid-template-columns: minmax(0, 1fr); }
  :root { --rail: auto; }
}

/* ── 약도 ─────────────────────────────────────────────────────────────
   외부 지도 API 를 쓰지 않는다(키·유료화·오프라인 불가). 직접 그린 SVG 약도다.
   표시는 <a> 라 JS 가 없어도 목록의 해당 항목으로 내려간다. */
.stage {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--paper);
  border: var(--hair) solid var(--line-strong);
}
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-svg .blocks polygon { fill: rgba(19, 49, 75, .07); }
.map-svg .roads path {
  fill: none; stroke: var(--ink);
  stroke-linecap: round; stroke-linejoin: round;
}
.map-svg .r-main { stroke-width: 44; }
.map-svg .r-cross { stroke-width: 26; }
.map-svg .r-alley { stroke-width: 22; }
.map-svg .r-thin { stroke-width: 17; }
.map-svg .map-labels text {
  fill: var(--muted); stroke: var(--paper); stroke-width: 6px; paint-order: stroke;
  font: 500 18px/1 var(--mono); letter-spacing: .06em;
}
.map-svg .map-scale line { stroke: var(--faint); stroke-width: 3; }
.map-svg .map-scale text { fill: var(--faint); font: 500 15px/1 var(--mono); }
@media (max-width: 767px) { .map-svg .map-labels, .map-svg .map-scale { display: none; } }

.pins { position: absolute; inset: 0; pointer-events: none; }
.pin {
  position: absolute; left: var(--x); top: var(--y);
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center;
  text-decoration: none; z-index: var(--z-map-pin); pointer-events: auto;
}
.pin::before {
  content: ""; position: absolute; inset: 8px;
  border-radius: 50%; background: var(--primary);
  border: 2px solid var(--paper);
  transition: transform .22s ease, background-color .22s ease;
}
.pin::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid var(--ink);
  opacity: 0; transform: scale(.62);
  transition: opacity .22s ease, transform .22s ease;
}
.pin-num {
  position: relative; z-index: 1;
  font: 600 11px/1 var(--mono); color: var(--on-primary);
}
.pin:hover::before, .pin:focus-visible::before { transform: scale(1.16); }
/* 닫힌 곳은 색만이 아니라 「속 빈 표시」로도 갈라 놓는다 */
.pin[data-open="no"]::before { background: var(--paper); border-color: var(--primary); }
.pin[data-open="no"] .pin-num { color: var(--primary); }
/* 선택 — 이 벌의 시그니처 인터랙션(지도 ↔ 목록 맞물림) */
.pin[aria-current="true"]::before { transform: scale(1.28); }
.pin[aria-current="true"]::after { opacity: 1; transform: scale(1); }

.map-cap {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  margin-top: 12px; font: 500 11.5px/1.6 var(--mono); color: var(--muted);
}
.map-cap span { display: inline-flex; align-items: center; gap: 7px; }
.key-dot, .key-ring, .key-road, .key-alley { display: inline-block; flex: none; }
.key-dot, .key-ring {
  width: 13px; height: 13px; border-radius: 50%; background: var(--primary);
}
.key-ring { background: transparent; border: 2px solid var(--primary); }
.key-road, .key-alley { width: 22px; height: 8px; background: var(--ink); }
.key-alley { height: 4px; }

/* ── 장소 목록 (지도의 짝 — 지도를 못 보는 사람도 같은 정보를 얻는다) ─── */
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px;
}
.plist { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--line-strong); }
.pitem {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 4px 10px; align-items: start;
  padding: 12px 6px 12px 4px;
  border-bottom: var(--hair) solid var(--line);
  scroll-margin-top: 90px;
  transition: background-color .22s ease, box-shadow .22s ease;
}
.pitem .pn { font: 500 11px/1.9 var(--mono); color: var(--faint); }
.pname { grid-column: 2; margin: 0; font-weight: 700; font-size: .98rem; letter-spacing: -.026em; }
.pmeta { grid-column: 2; margin: 2px 0 0; font: 500 11.5px/1.6 var(--mono); color: var(--muted); }
.pwhere { grid-column: 2; margin: 3px 0 0; font-size: .86rem; color: var(--muted); }
.pstat { grid-column: 2; margin-top: 7px; }
.pfocus {
  grid-column: 3; grid-row: 1 / span 4; align-self: center;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  background: transparent; border: var(--hair) solid var(--line-strong);
  color: var(--ink); font: 500 11.5px/1 var(--mono); cursor: pointer;
}
.pfocus:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.pitem.is-picked, .pitem:target {
  background: var(--tint);
  box-shadow: inset 3px 0 0 var(--primary);
}

/* ── 상태 표시 (색만으로 전달하지 않는다 — 모양 + 글자 병기) ─────────── */
.stat {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1 var(--mono); letter-spacing: .02em;
  padding: 6px 9px; border: var(--hair) solid var(--line-strong); color: var(--muted);
}
.stat::before { content: "○"; font-size: 12px; line-height: 1; }
.stat[data-s="open"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.stat[data-s="open"]::before { content: "●"; }
.stat[data-s="soon"] { border-color: var(--primary); color: var(--primary); }
.stat[data-s="soon"]::before { content: "◐"; }
.stat[data-s="before"] { border-color: var(--line-strong); color: var(--ink); }
.stat[data-s="before"]::before { content: "○"; }
.stat[data-s="off"] { border-style: dashed; color: var(--muted); }
.stat[data-s="off"]::before { content: "✕"; }

/* ── 줄 구획(카드화하지 않는다) ───────────────────────────────────────── */
.rows { border-top: var(--hair) solid var(--line-strong); }
.row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 6px 18px; align-items: start;
  padding: 18px 2px;
  border-bottom: var(--hair) solid var(--line);
}
.row .rt { font-weight: 700; letter-spacing: -.026em; }
.row .rd { color: var(--muted); }
@media (max-width: 767px) {
  .row { grid-template-columns: 30px minmax(0, 1fr); }
  .row .rd { grid-column: 2; }
}

.sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 20px; padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}

/* ── 사진 (역할 고정: 골목의 결을 보여 주는 참고 사진 한 장) ─────────── */
.plist-brief .pwhere { display: none; }
.plist-brief .pitem { padding-block: 10px; }

.photo { margin: 22px 0 0; max-width: 100%; }
.photo img { display: block; border: var(--hair) solid var(--line-strong); }
.photo figcaption { margin-top: 8px; font: 500 11.5px/1.6 var(--mono); color: var(--muted); }
.photo-wide { max-width: 731px; }
.photo-wide img { width: 100%; height: auto; }

/* 걷기 코스 면의 사진은 설명과 나란히 둔다 — 넓은 화면에서 오른쪽이 비지 않게 */
@media (min-width: 768px) {
  .photo-side { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: end; }
  .photo-side figcaption { margin-top: 0; padding-bottom: 4px; max-width: 40ch; }
}

/* ── 조작기 (검색·필터) ──────────────────────────────────────────────── */
.tools {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center;
  padding: 16px 0; border-top: var(--hair) solid var(--line-strong);
  border-bottom: var(--hair) solid var(--line-strong);
}
.search { display: flex; align-items: center; gap: 0; flex: 1 1 260px; min-width: 0; }
.search input {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 12px;
  background: var(--paper); border: var(--hair) solid var(--line-strong); border-right: 0;
  color: var(--ink); font: 500 14px/1 var(--font);
}
.search button {
  min-height: 46px; min-width: 56px; padding: 0 14px;
  background: var(--ink); color: var(--ground); border: var(--hair) solid var(--ink);
  font: 500 12.5px/1 var(--mono); cursor: pointer;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 14px;
  background: transparent; border: var(--hair) solid var(--line-strong);
  color: var(--ink); font: 500 12.5px/1 var(--mono); cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.count { margin-left: auto; font: 500 12px/1 var(--mono); color: var(--muted); }

.empty {
  padding: 26px 4px; border-bottom: var(--hair) solid var(--line);
  color: var(--muted);
}
.empty .h3 { color: var(--ink); }

/* ── 고른 곳 자세히 (DetailView) ─────────────────────────────────────── */
.detail {
  margin-top: var(--gap);
  border: var(--hair) solid var(--line-strong); background: var(--paper);
  padding: 20px clamp(16px, 2vw, 24px) 22px;
}
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.detail dl {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: 0; margin: 16px 0 0; border-top: var(--hair) solid var(--line);
}
.detail dt {
  padding: 10px 0; border-bottom: var(--hair) solid var(--line);
  font: 500 11.5px/1.6 var(--mono); color: var(--muted); letter-spacing: .06em;
}
.detail dd {
  margin: 0; padding: 10px 0; border-bottom: var(--hair) solid var(--line);
}
@media (max-width: 559px) {
  .detail dl { grid-template-columns: minmax(0, 1fr); }
  .detail dt { border-bottom: 0; padding-bottom: 0; }
}

/* ── 이어보기 (검색·선택 상태 보존) ──────────────────────────────────── */
.resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-bottom: 18px; padding: 12px 14px;
  border: var(--hair) solid var(--primary); background: var(--tint);
  font: 500 12.5px/1.5 var(--mono);
}
.resume b { font-weight: 700; }
.resume button {
  margin-left: auto; min-height: 44px; padding: 0 12px;
  background: transparent; border: var(--hair) solid var(--line-strong);
  color: var(--ink); font: 500 12px/1 var(--mono); cursor: pointer;
}

/* ── 아코디언 (주간 영업시간 펼치기 — FAQ 가 아니라 자료의 단계 공개) ─── */
.acc { border-top: var(--hair) solid var(--line-strong); }
.acc-item { border-bottom: var(--hair) solid var(--line); }
.pitem .acc-trigger { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
.pitem .acc-panel { grid-column: 1 / -1; }
.acc-trigger {
  min-height: 44px; padding: 0 12px;
  background: transparent; border: var(--hair) solid var(--line-strong);
  color: var(--ink); font: 500 11.5px/1 var(--mono); cursor: pointer;
}
.acc-trigger::after { content: " ▾"; }
.acc-item.open .acc-trigger::after { content: " ▴"; }
.acc-panel { padding: 4px 4px 18px; }
.week {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 0; margin: 0; border-top: var(--hair) solid var(--line);
}
.week div { border-bottom: var(--hair) solid var(--line); padding: 9px 2px; }
.week dt { font: 500 11px/1.5 var(--mono); color: var(--muted); letter-spacing: .08em; }
.week dd { margin: 2px 0 0; font-size: .92rem; }
.week .is-off dd { color: var(--muted); }

/* ── 걷기 코스 ───────────────────────────────────────────────────────── */
.course { padding: 26px 0; border-bottom: var(--hair) solid var(--line); }
.course:first-of-type { border-top: var(--hair) solid var(--line-strong); }
.course-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
}
.course-meta { font: 500 11.5px/1.6 var(--mono); color: var(--muted); }

.tl { position: relative; margin: 26px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .tl::before {
    content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 20px;
    height: 3px; background: var(--ink);
  }
  .tl-step { display: grid; justify-items: center; text-align: center; padding: 0 8px; }
  .tl-body { margin-top: 12px; }
}
.tl-step { position: relative; }
.tl-dot {
  position: relative; z-index: 1;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  font: 600 12px/42px var(--mono); text-align: center;
}
.tl-name { display: block; font-weight: 700; letter-spacing: -.026em; }
.tl-sub { display: block; font: 500 11.5px/1.6 var(--mono); color: var(--muted); }
@media (max-width: 767px) {
  .tl { margin-left: 4px; }
  .tl::before {
    content: ""; position: absolute; left: 20px; top: 10px; bottom: 26px;
    width: 3px; background: var(--ink);
  }
  .tl-step { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 20px; }
  .tl-body { padding-top: 8px; }
}
.course-act { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 22px; }
.course.is-picked { background: var(--tint); box-shadow: inset 3px 0 0 var(--primary); padding-inline: 14px; }

/* ── 주요 행동 ───────────────────────────────────────────────────────── */
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 16px 28px;
  background: var(--primary); color: var(--on-primary);
  border: 0; font: 700 1rem/1 var(--font); letter-spacing: -.02em;
  text-decoration: none; cursor: pointer;
}
.act::after { content: "→"; font: 500 1rem/1 var(--mono); }
.act:hover { background: var(--ink); }
.act-wide { display: flex; width: 100%; }
.act-2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px;
  background: transparent; border: var(--hair) solid var(--ink); color: var(--ink);
  font: 600 .92rem/1 var(--font); text-decoration: none; cursor: pointer;
}
.act-2:hover { background: var(--ink); color: var(--ground); }

/* ── 안내문 ──────────────────────────────────────────────────────────── */
.notice {
  margin: 22px 0 0; padding: 12px 0 12px 14px;
  border-left: 3px solid var(--primary);
  font-size: .92rem; color: var(--muted);
}
.notice strong { color: var(--ink); font-weight: 700; }

/* ── 폼 ──────────────────────────────────────────────────────────────── */
.form-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gap); align-items: start;
}
@media (max-width: 1023px) { .form-wrap { grid-template-columns: minmax(0, 1fr); } }

.inquiry-form { display: grid; gap: 16px; margin-top: 4px; }
.field { display: grid; gap: 6px; }
.field label, .agree-t { font: 500 11.5px/1.6 var(--mono); color: var(--muted); letter-spacing: .08em; }
.control {
  width: 100%; min-height: 48px; padding: 12px 13px;
  background: var(--paper); border: var(--hair) solid var(--line-strong);
  color: var(--ink); font: 500 15px/1.5 var(--font);
}
textarea.control { min-height: 118px; resize: vertical; }
select.control { padding-right: 12px; }
.control:focus { border-color: var(--ink); }
.field .err { display: none; margin: 0; font: 500 12px/1.5 var(--mono); color: var(--primary); }
.field.invalid .control { border-color: var(--primary); border-width: 2px; }
.field.invalid .err { display: block; }
.counter { margin: 0; font: 500 11px/1.5 var(--mono); color: var(--faint); text-align: right; }

.agree { position: relative; display: grid; gap: 6px; }
.agree label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .94rem; }
.agree .box {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px;
  border: var(--hair) solid var(--line-strong); background: var(--paper);
}
.agree input:checked + label .box { background: var(--primary); border-color: var(--primary); }
.agree input:checked + label .box::after {
  content: "✓"; display: block; color: var(--on-primary);
  font: 700 14px/20px var(--mono); text-align: center;
}
.agree .err { display: none; margin: 0; font: 500 12px/1.5 var(--mono); color: var(--primary); }
.agree.invalid .err { display: block; }
.agree.invalid .box { border-color: var(--primary); border-width: 2px; }

.form-errors {
  margin: 0; padding: 14px 16px;
  border: 2px solid var(--primary); background: var(--tint);
}
.form-errors .h3 { color: var(--primary); }
.form-errors ul { margin: 8px 0 0; padding-left: 18px; font-size: .92rem; }

.form-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 60px; padding: 18px;
  background: var(--primary); color: var(--on-primary); border: 0;
  font: 700 1.02rem/1 var(--font); letter-spacing: -.02em; cursor: pointer;
}
.form-submit:hover { background: var(--ink); }
.form-submit[aria-disabled="true"] { background: var(--faint); cursor: progress; }

/* 완료 결과 확인 */
.receipt { margin-top: 22px; border: 2px solid var(--ink); background: var(--paper); padding: 20px; }
.receipt dl {
  display: grid; grid-template-columns: 108px minmax(0, 1fr);
  margin: 14px 0 0; border-top: var(--hair) solid var(--line);
}
.receipt dt {
  padding: 9px 0; border-bottom: var(--hair) solid var(--line);
  font: 500 11.5px/1.6 var(--mono); color: var(--muted); letter-spacing: .06em;
}
.receipt dd { margin: 0; padding: 9px 0; border-bottom: var(--hair) solid var(--line); }
.receipt-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.aside-box {
  border: var(--hair) solid var(--line-strong); background: var(--paper);
  padding: 18px 18px 20px;
}
.aside-box + .aside-box { margin-top: 16px; }
.aside-box ul { margin: 10px 0 0; padding-left: 18px; font-size: .93rem; color: var(--muted); }
.aside-box .tel {
  display: block; margin-top: 12px; font: 700 1.06rem/1.4 var(--mono);
  letter-spacing: -.02em; text-decoration: none;
}

/* ── 토스트 ──────────────────────────────────────────────────────────── */
.toast {
  max-width: min(92vw, 460px);
  padding: 13px 18px; background: var(--ink); color: var(--ground);
  font: 500 13.5px/1.5 var(--font);
}

/* ── 꼬리 ────────────────────────────────────────────────────────────── */
.site-footer { margin-top: var(--section); border-top: 2px solid var(--ink); background: var(--ground); }
.footer-inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 40px var(--pad) 52px;
  display: grid; gap: 16px;
}
.footer-brand { margin: 0; font-weight: 800; font-size: 1.16rem; letter-spacing: -.04em; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-nav a { font: 500 12.5px/1 var(--mono); color: var(--muted); text-decoration: none; padding: 6px 0; }
.footer-nav a:hover { color: var(--ink); }
.footer-note { margin: 0; max-width: 66ch; font-size: .88rem; color: var(--muted); }
.footer-note strong { color: var(--ink); font-weight: 700; }
.footer-biz { margin: 0; font-style: normal; font-size: .86rem; line-height: 1.9; color: var(--muted); }
.footer-biz a { text-decoration: none; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.footer-legal a { font: 500 12px/1 var(--mono); color: var(--muted); padding: 6px 0; }
.footer-copy { margin: 0; font: 500 11.5px/1 var(--mono); color: var(--faint); }

/* ── 200% 확대·좁은 폭 대비 ─────────────────────────────────────────── */
@media (max-width: 559px) {
  .pitem { grid-template-columns: 26px minmax(0, 1fr); }
  .pfocus, .pitem .acc-trigger { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 8px; }
  .count { margin-left: 0; width: 100%; }
  .detail dl { grid-template-columns: minmax(0, 1fr); }
}