/* 바큇살 자전거 — 동네 자전거 수리·판매점 디자인 샘플 (디코랩)
   구성: 부품 매뉴얼. 히어로 = 분해도, 번호 풍선 = 섹션 메뉴, 오른쪽(모바일은 위) 부품 목록표가 지금 위치를 표시.
   색은 정비소 실물에서: 경고 테이프 노랑, 선화 먹, 매뉴얼 종이, 공구 강철, 꼬리표 빨강 */
:root {
  --color-hazard: #F6C700;        /* 경고 테이프 노랑 — 전화 버튼·지금 부품·의심 부품 (theme-color) */
  --color-hazard-deep: #D9AF00;
  --color-hazard-soft: #FBE27A;
  --color-ink: #1B1C19;           /* 본문 글자·선화 */
  --color-manual: #F2F1EB;        /* 매뉴얼 종이 배경 */
  --color-sheet: #FBFBF8;         /* 부품 면·표 */
  --color-steel: #2C3338;         /* 공구 강철 — 안내 띠·푸터 */
  --color-graphite: #575A54;      /* 보조 글자 */
  --color-rule: #D5D4CB;
  --color-tag: #C2361C;           /* 꼬리표 빨강 — 하루 맡김·주의에만 */
  --color-kakao: #FEE500;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-code: "Nanum Gothic Coding", var(--font);

  --fs-h1: clamp(1.85rem, 1.2rem + 2.4vw, 3.05rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  --fs-h3: 1.12rem;
  --fs-body: 1rem;
  --fs-small: .86rem;

  --head-h: 60px;
  --strip-h: 54px;
  --sec-gap: clamp(64px, 8vw, 112px);
  --gutter: 18px;
}
@media (min-width: 1024px) {
  :root { --head-h: 68px; --strip-h: 0px; --gutter: 32px; --fs-body: 1.04rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + var(--strip-h) + 14px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--color-ink);
  background: var(--color-manual);
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { body { padding-bottom: 0; } }
h1, h2, h3 { line-height: 1.28; letter-spacing: -.025em; margin: 0; text-wrap: balance; font-weight: 800; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.code { font-family: var(--font-code); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-ink); color: #fff; border-radius: 4px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 실제 정보 자리 */
.ph { display: inline-block; padding: 0 .4em; border: 1.5px dashed currentColor; border-radius: 3px; opacity: .8; font-size: .92em; line-height: 1.5; }

/* 샘플 안내 띠 */
.sample-banner { background: var(--color-steel); color: #E6E8E4; font-size: .8rem; line-height: 1.6; }
.sample-banner__inner { display: flex; gap: 10px; align-items: baseline; max-width: 1320px; margin-inline: auto; padding: 8px var(--gutter); }
.sample-banner__tag { flex: none; padding: 1px 8px; border-radius: 2px; background: var(--color-hazard); color: var(--color-ink); font-weight: 700; font-size: .74rem; }
.sample-banner a { color: var(--color-hazard); font-weight: 600; }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 20px;
  border: 2px solid var(--color-ink); border-radius: 4px;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: background-color .18s, color .18s, transform .18s;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn--hazard { background: var(--color-hazard); color: var(--color-ink); box-shadow: 3px 3px 0 var(--color-ink); }
.btn--hazard:hover { background: var(--color-hazard-deep); }
.btn--hazard:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn--line { background: var(--color-sheet); color: var(--color-ink); }
.btn--line:hover { background: #fff; }
.btn--kakao { background: var(--color-kakao); border-color: var(--color-kakao); color: #191919; }
.btn--sm { min-height: 42px; padding: 0 14px; font-size: .95rem; box-shadow: none; }
.btn--block { width: 100%; }

/* ---------- 헤더 ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-manual); }
.site-header__inner { display: flex; align-items: center; gap: 14px; height: calc(var(--head-h) - 6px); max-width: 1320px; margin-inline: auto; padding: 0 var(--gutter); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo__mark { width: 36px; height: 36px; }
.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__text b { font-size: 1.08rem; font-weight: 800; letter-spacing: -.03em; }
.logo__text small { font-size: .74rem; color: var(--color-graphite); }
.site-header__open { display: none; font-size: .86rem; color: var(--color-graphite); }
.site-header__tel span { font-family: var(--font-code); font-weight: 700; }
@media (max-width: 420px) {
  .site-header__tel span { display: none; }
  .site-header__tel { width: 46px; padding: 0; }
  .site-header__tel::after { content: "전화"; font-size: 0; }
}
@media (min-width: 1024px) { .site-header__open { display: block; } .logo__mark { width: 40px; height: 40px; } }
/* 경고 테이프 띠 */
.tape { height: 6px; background: repeating-linear-gradient(-45deg, var(--color-hazard) 0 12px, var(--color-ink) 12px 24px); }

/* ---------- 매뉴얼 지면: 본문 + 부품 목록표 ---------- */
.manual { max-width: 1320px; margin-inline: auto; padding: 0 var(--gutter); }
@media (min-width: 1024px) {
  .manual { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "main side"; gap: 44px; }
  .manual > main { grid-area: main; min-width: 0; }
  .plist { grid-area: side; align-self: start; }
}

/* 부품 목록표 — 모바일: 헤더 아래 번호 띠 */
.plist {
  position: sticky; top: var(--head-h); z-index: 40;
  margin: 0 calc(var(--gutter) * -1);
  padding: 7px var(--gutter) 6px;
  background: var(--color-manual);
  border-bottom: 2px solid var(--color-ink);
}
.plist__mini, .plist__title, .plist__call, .plist__sec, .plist__name { display: none; }
.plist__rows { display: flex; gap: 6px; justify-content: space-between; }
.plist__rows li { flex: 1 1 0; }
.plist__rows a {
  display: flex; align-items: center; justify-content: center;
  height: 40px; border-radius: 50%; text-decoration: none;
}
.plist__no {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 2px solid var(--color-ink); border-radius: 50%; background: var(--color-sheet);
  font-family: var(--font-code); font-weight: 700; font-size: .98rem;
  transition: background-color .2s, transform .25s;
}
.plist__rows a.is-active .plist__no { background: var(--color-hazard); transform: scale(1.12); }
.plist__now { margin-top: 2px; font-size: .8rem; line-height: 1.3; color: var(--color-graphite); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist__now b { color: var(--color-ink); }

@media (min-width: 1024px) {
  .plist {
    top: calc(var(--head-h) + 22px);
    margin: 22px 0 0; padding: 0;
    background: var(--color-sheet); border: 2px solid var(--color-ink); border-radius: 4px;
  }
  .plist__mini { display: block; padding: 10px 10px 4px; border-bottom: 1.5px solid var(--color-ink); background: var(--color-manual); }
  .mini { width: 100%; height: auto; aspect-ratio: 700 / 470; }
  .plist__title { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px 8px; font-weight: 800; border-bottom: 1.5px solid var(--color-ink); }
  .plist__title small { font-weight: 400; font-size: .76rem; color: var(--color-graphite); }
  .plist__rows { display: block; }
  .plist__rows a {
    display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
    height: auto; border-radius: 0; padding: 7px 14px;
    border-bottom: 1px solid var(--color-rule);
    transition: background-color .2s;
  }
  .plist__rows li:last-child a { border-bottom: 0; }
  .plist__rows a:hover { background: #F1F0E8; }
  .plist__no { width: 28px; height: 28px; font-size: .86rem; }
  .plist__rows a.is-active { background: var(--color-hazard); }
  .plist__rows a.is-active .plist__no { transform: none; background: var(--color-sheet); }
  .plist__name { display: block; font-weight: 700; font-size: .95rem; }
  .plist__sec { display: block; font-size: .78rem; color: var(--color-graphite); }
  .plist__rows a.is-active .plist__sec { color: var(--color-ink); }
  .plist__now { display: none; }
  .plist__call { display: block; padding: 12px 14px 14px; border-top: 2px solid var(--color-ink); background: var(--color-manual); }
  .plist__call p { font-size: .84rem; color: var(--color-graphite); margin-bottom: 8px; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .plist__call { display: none; }
  .plist__rows a { padding-block: 5px; }
}

/* 분해도 부품 (모든 <use> 그림 공통) — 부품마다 --dx/--dy 방향으로 --ex 배만큼 떨어져 있다 */
.pt {
  transform: translate(calc(var(--dx) * var(--ex) * 1px), calc(var(--dy) * var(--ex) * 1px));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  animation: var(--an);
}
.pf { fill: var(--pf); transition: fill .3s; }
.pf-s { stroke: var(--pf); transition: stroke .3s; }
.ln { vector-effect: non-scaling-stroke; }
@keyframes part-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- 히어로: 그림 1 ---------- */
.hero { display: grid; gap: 22px; padding: 24px 0 8px; }
.hero__kicker { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--color-graphite); margin-bottom: 10px; }
.hero__kicker .code { padding: 1px 7px; border: 1.5px solid var(--color-ink); border-radius: 2px; color: var(--color-ink); font-size: .82rem; }
.hero__title { font-size: var(--fs-h1); }
.hero__lead { margin-top: 12px; max-width: 34em; color: #34362F; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero__actions .btn { flex: 1 1 auto; }
.spec { margin: 0; border: 2px solid var(--color-ink); border-radius: 4px; background: var(--color-sheet); font-size: .9rem; }
.spec > div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: baseline; padding: 8px 12px; border-bottom: 1px solid var(--color-rule); }
.spec > div:last-child { border-bottom: 0; }
.spec dt { font-size: .78rem; color: var(--color-graphite); }
.spec dd { margin: 0; font-weight: 600; line-height: 1.45; }
.spec dd small { font-weight: 400; color: var(--color-graphite); }
.spec__today { background: var(--color-steel); color: #fff; }
.spec__today dt { color: #C9CDC8; }
@media (max-width: 719px) { .spec { display: none; } }
.hero__fig { margin: 0; }
.art { width: 100%; height: auto; overflow: visible; }
.hero .art { aspect-ratio: 740 / 470; }
.fig-cap { display: block; margin-top: 8px; font-size: .84rem; color: var(--color-graphite); }
.fig-cap .code { color: var(--color-ink); font-weight: 700; margin-right: 6px; }

/* 번호 풍선 */
.bln { cursor: pointer; text-decoration: none; }
.bln__lead { fill: none; stroke: var(--color-ink); stroke-width: 1.4; }
.bln circle { fill: var(--color-sheet); stroke: var(--color-ink); stroke-width: 2.4; transition: fill .2s; }
.bln text { font-family: var(--font-code); font-weight: 700; font-size: 21px; text-anchor: middle; dominant-baseline: central; fill: var(--color-ink); }
.bln:hover circle, .bln:focus-visible circle, .bln.is-active circle { fill: var(--color-hazard); }
.bln:focus-visible { outline: none; }
.bln:focus-visible circle { stroke-width: 4; }

@media (min-width: 720px) {
  .hero { grid-template-columns: minmax(0, 1fr) 270px; align-items: end; column-gap: 32px; }
  .hero__fig { grid-column: 1 / -1; }
}
@media (min-width: 1024px) { .hero { padding-top: 34px; } }

/* ---------- 섹션 = 부품 하나 ---------- */
.part { margin-top: var(--sec-gap); }
.part__head { display: grid; gap: 16px; padding-top: 14px; border-top: 2px solid var(--color-ink); margin-bottom: 26px; }
.zoom-fig { margin: 0; }
.zoom { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--color-sheet); border: 1.5px solid var(--color-ink); border-radius: 4px; }
.zlabel path { fill: none; stroke: var(--color-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.zlabel text { font-family: var(--font); font-weight: 700; font-size: 11px; fill: var(--color-ink); paint-order: stroke; stroke: var(--color-sheet); stroke-width: 3px; }
#ebike .zlabel text, #sale .zlabel text, #checkup .zlabel text { font-size: 9px; }
#faq .zlabel text { font-size: 7px; }
#visit .zlabel text { font-size: 10px; }
.part__no { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.part__count { margin-left: auto; font-size: .78rem; font-weight: 400; color: var(--color-graphite); }
.bln-s {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px;
  border: 2px solid var(--color-ink); border-radius: 50%; background: var(--color-hazard);
  font-family: var(--font-code); font-weight: 700; font-size: 1rem;
}
.bln-s--sm { width: 22px; height: 22px; font-size: .74rem; border-width: 1.5px; margin-right: 6px; vertical-align: -5px; }
.part__title h2 { font-size: var(--fs-h2); }
.part__lead { margin-top: 10px; max-width: 36em; color: #34362F; }
.part__lead strong { background: linear-gradient(transparent 62%, var(--color-hazard-soft) 62%); }
@media (min-width: 720px) {
  .part__head { grid-template-columns: 260px minmax(0, 1fr); gap: 30px; align-items: center; }
  .zoom { aspect-ratio: 4 / 3; }
}
@media (min-width: 1200px) { .part__head { grid-template-columns: 300px minmax(0, 1fr); } }

/* 섹션 시작: 부품이 분해도에서 빠져나와 커진다 (화면에 들어오면 한 번, 기본은 보이는 상태) */
.zoom-fig svg { transform-origin: 30% 70%; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.has-motion .zoom-fig:not(.is-in) svg { transform: translate(-14%, 10%) scale(.42) rotate(-8deg); opacity: .35; }

.note { margin-top: 14px; font-size: var(--fs-small); color: var(--color-graphite); }

/* ① 공임표 */
.price { width: 100%; border-collapse: collapse; background: var(--color-sheet); border: 2px solid var(--color-ink); font-variant-numeric: tabular-nums; }
.price th, .price td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.price thead th { background: var(--color-steel); color: #fff; font-size: .84rem; font-weight: 600; border-bottom: 0; }
.price tbody th { font-weight: 700; }
.price tbody th small { display: block; font-weight: 400; font-size: .78rem; color: var(--color-graphite); }
.price td { font-family: var(--font-code); font-size: .95rem; white-space: nowrap; }
.price tbody tr:hover { background: #FFF8D6; }
@media (max-width: 719px) {
  .price thead { display: none; }
  .price, .price tbody, .price tr, .price th, .price td { display: block; }
  .price tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--color-ink); }
  .price tr:last-child { border-bottom: 0; }
  .price tbody th { grid-column: 1 / -1; background: #EDECE4; border-bottom: 1px solid var(--color-rule); padding: 8px 12px; }
  .price td { padding: 6px 12px; border-bottom: 0; white-space: normal; }
  .price td::before { content: attr(data-l); display: block; font-family: var(--font); font-size: .72rem; color: var(--color-graphite); }
}

/* ② 증상으로 찾기 */
.diag fieldset { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.diag legend { padding: 0; margin-bottom: 8px; font-weight: 800; font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  border: 2px solid var(--color-ink); border-radius: 4px; background: var(--color-sheet);
  font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: background-color .18s;
}
.chip input:checked + span { background: var(--color-ink); color: var(--color-hazard); }
.chip input:focus-visible + span { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.chip:hover input:not(:checked) + span { background: #FFF8D6; }
.diag__board { display: grid; gap: 18px; margin-top: 8px; }
.diag__fig { margin: 0; padding: 10px; background: var(--color-sheet); border: 2px solid var(--color-ink); border-radius: 4px; }
.diag__art { aspect-ratio: 700 / 440; }
.slip { background: var(--color-sheet); border: 2px solid var(--color-ink); border-radius: 4px; padding: 16px; }
.slip__title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 800; font-size: 1.1rem; padding-bottom: 10px; border-bottom: 2px solid var(--color-ink); }
.slip__title .code { font-size: .82rem; font-weight: 700; padding: 1px 8px; background: var(--color-hazard); border: 1.5px solid var(--color-ink); border-radius: 2px; }
.trouble { width: 100%; border-collapse: collapse; font-size: .92rem; }
.trouble th, .trouble td { padding: 9px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-rule); }
.trouble thead th { font-size: .74rem; color: var(--color-graphite); font-weight: 600; padding-top: 10px; }
.trouble tbody th { white-space: nowrap; font-weight: 700; }
.trouble b { font-weight: 700; white-space: nowrap; }
@media (max-width: 559px) {
  .trouble thead { display: none; }
  .trouble tr { display: grid; grid-template-columns: 1fr; padding: 8px 0; border-bottom: 1px solid var(--color-rule); }
  .trouble th, .trouble td { border: 0; padding: 2px 0; }
}
.slip__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--color-graphite); }
.slip__meta p:first-child span { display: block; font-size: .76rem; color: var(--color-graphite); }
.slip__meta p:first-child b { font-size: 1.3rem; }
.stamp {
  padding: 6px 14px; border: 3px double currentColor; border-radius: 4px;
  font-weight: 800; font-size: 1rem; transform: rotate(-4deg); color: #1D6B3A; background: rgba(255,255,255,.6);
}
.stamp[data-kind="maybe"] { color: #8A5A00; }
.stamp[data-kind="stay"] { color: var(--color-tag); }
.slip__check { padding-top: 12px; }
.slip__label { font-weight: 800; font-size: .92rem; margin-bottom: 6px; }
.slip__check li { position: relative; padding-left: 26px; font-size: .93rem; margin-bottom: 4px; }
.slip__check li::before { content: ""; position: absolute; left: 0; top: .38em; width: 15px; height: 15px; border: 2px solid var(--color-ink); border-radius: 2px; background: var(--color-sheet); }
.slip__check li.is-warn { color: var(--color-tag); font-weight: 600; }
.slip__check li.is-warn::before { border-color: var(--color-tag); background: var(--color-tag); }
.slip__say { margin-top: 12px; padding: 10px 12px; background: var(--color-manual); border-left: 4px solid var(--color-hazard); font-size: .92rem; }
.slip__say q { font-weight: 700; quotes: "“" "”"; }
.slip__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.slip__actions .btn { flex: 1 1 auto; }
.diag__fig .fig-cap span:last-child { color: var(--color-ink); font-weight: 700; }
@media (min-width: 1100px) {
  .diag__board { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .diag__fig { position: sticky; top: calc(var(--head-h) + 20px); }
}

/* ③ 과정·점검표 */
.steps { counter-reset: s; display: grid; gap: 0; border-left: 3px solid var(--color-ink); margin-left: 14px; }
.steps li { counter-increment: s; position: relative; padding: 0 0 18px 30px; }
.steps li::before {
  content: counter(s); position: absolute; left: -16px; top: 0;
  display: grid; place-items: center; width: 29px; height: 29px;
  background: var(--color-sheet); border: 2px solid var(--color-ink); border-radius: 50%;
  font-family: var(--font-code); font-weight: 700; font-size: .86rem;
}
.steps b { display: block; font-size: 1.04rem; }
.steps p { color: #34362F; font-size: .95rem; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(5, 1fr); border-left: 0; border-top: 3px solid var(--color-ink); margin: 20px 0 0; gap: 16px; }
  .steps li { padding: 26px 0 0; }
  .steps li::before { left: 0; top: -16px; }
}
.sheet { margin-top: 26px; padding: 16px; background: var(--color-sheet); border: 2px solid var(--color-ink); border-radius: 4px; }
.sheet__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-weight: 800; padding-bottom: 10px; border-bottom: 2px solid var(--color-ink); margin-bottom: 8px; }
.sheet__title .code { font-weight: 400; font-size: .84rem; color: var(--color-graphite); }
.sheet__list { display: grid; grid-template-columns: 1fr; }
.sheet__list li { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--color-rule); font-size: .95rem; }
.box { flex: none; width: 18px; height: 18px; border: 2px solid var(--color-ink); border-radius: 2px; }
@media (min-width: 640px) { .sheet__list { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (min-width: 1200px) { .sheet__list { grid-template-columns: 1fr 1fr 1fr; } }

/* ④ 전기자전거 */
.cols { display: grid; gap: 14px; }
.col { padding: 16px; border: 2px solid var(--color-ink); border-radius: 4px; background: var(--color-sheet); }
.col h3 { font-size: var(--fs-h3); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1.5px solid var(--color-ink); }
.col--bring { background: var(--color-manual); border-style: dashed; }
.dash li { position: relative; padding-left: 18px; margin-bottom: 6px; font-size: .95rem; }
.dash li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 2px; background: var(--color-ink); }
@media (min-width: 820px) { .cols { grid-template-columns: 1.15fr 1fr .9fr; } }

/* ⑤ 판매·피팅 */
.sale { display: grid; gap: 22px; }
.kinds { margin: 0; border-top: 2px solid var(--color-ink); }
.kinds > div { padding: 12px 0; border-bottom: 1px solid var(--color-rule); }
.kinds dt { font-weight: 800; font-size: 1.05rem; }
.kinds dd { margin: 2px 0 0; color: #34362F; font-size: .95rem; }
.kinds .tagline { display: inline-block; margin-top: 2px; font-size: .82rem; font-weight: 600; color: var(--color-ink); background: #EDECE4; padding: 0 7px; border-radius: 2px; }
.size { width: 100%; border-collapse: collapse; background: var(--color-sheet); border: 2px solid var(--color-ink); font-variant-numeric: tabular-nums; }
.size caption { text-align: left; font-weight: 800; padding-bottom: 8px; }
.size caption small { font-weight: 400; font-size: .78rem; color: var(--color-graphite); }
.size th, .size td { padding: 8px 10px; border-bottom: 1px solid var(--color-rule); text-align: left; font-size: .93rem; }
.size thead th { background: var(--color-steel); color: #fff; font-weight: 600; font-size: .8rem; }
.size td { font-family: var(--font-code); }
.fit__formula { margin-top: 12px; font-size: .92rem; color: #34362F; }
.fit__formula .code { display: block; width: fit-content; margin-bottom: 4px; padding: 3px 9px; background: var(--color-ink); color: var(--color-hazard); border-radius: 2px; font-weight: 700; }
@media (min-width: 820px) { .sale { grid-template-columns: 1fr 1fr; gap: 34px; } }

/* ⑥ FAQ */
.faq { border-top: 2px solid var(--color-ink); }
.qa { border-bottom: 1px solid var(--color-rule); }
.qa h3 { font-size: 1rem; }
.qa button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  padding: 15px 2px; background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1.02rem; color: var(--color-ink);
}
.qa button::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--color-ink); border-radius: 50%; font-family: var(--font-code); transition: transform .25s, background-color .2s; }
.qa.is-open button::after { content: "−"; background: var(--color-hazard); }
.qa__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s; }
.qa__a > p { overflow: hidden; min-height: 0; padding: 0 2px 16px; color: #34362F; max-width: 40em; }
.js .qa:not(.is-open) .qa__a { grid-template-rows: 0fr; }
.js .qa:not(.is-open) .qa__a > p { padding-bottom: 0; visibility: hidden; }

/* ⑦ 오시는 길 */
.visit { display: grid; gap: 22px; }
.map { margin: 0; }
.map svg { width: 100%; height: auto; border: 2px solid var(--color-ink); border-radius: 4px; }
.map__t { font-family: var(--font); font-size: 14px; font-weight: 700; fill: #4A4D47; }
.map__shop { font-family: var(--font); font-size: 15px; font-weight: 800; fill: var(--color-ink); }
.map__bus { font-family: var(--font); font-size: 11px; font-weight: 700; fill: #fff; }
.info { margin: 0 0 16px; border-top: 2px solid var(--color-ink); }
.info > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-rule); font-size: .95rem; }
.info dt { font-weight: 700; }
.info dd { margin: 0; }
.hours { width: 100%; border-collapse: collapse; background: var(--color-sheet); border: 2px solid var(--color-ink); }
.hours caption { text-align: left; font-weight: 800; padding-bottom: 6px; }
.hours th, .hours td { padding: 8px 12px; border-bottom: 1px solid var(--color-rule); text-align: left; }
.hours td { font-family: var(--font-code); }
.hours .is-off td { color: var(--color-tag); font-family: var(--font); font-weight: 700; }
.hours .is-today { background: var(--color-hazard); }
.hours__today { margin-left: 6px; padding: 0 6px; background: var(--color-ink); color: var(--color-hazard); font-size: .72rem; border-radius: 2px; vertical-align: 1px; }
.visit__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.visit__actions .btn { flex: 1 1 auto; }
@media (min-width: 820px) { .visit { grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: start; } }

/* ---------- 푸터 ---------- */
.site-footer { margin-top: var(--sec-gap); background: var(--color-steel); color: #D6D9D4; font-size: .84rem; }
.site-footer__inner { max-width: 1320px; margin-inline: auto; padding: 28px var(--gutter) 30px; display: grid; gap: 8px; }
.site-footer__logo { font-weight: 800; font-size: 1.05rem; color: #fff; }
.site-footer__links a { margin-right: 14px; }
.site-footer__links .strong { font-weight: 800; color: #fff; }
.site-footer__credit a { color: var(--color-hazard); }

/* ---------- 모바일 하단 고정 바 ---------- */
.quickbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr 1.5fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-sheet); border-top: 2px solid var(--color-ink);
}
.quickbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 60px; text-decoration: none; font-weight: 700; font-size: .9rem; }
.quickbar a + a { border-left: 1px solid var(--color-rule); }
.quickbar svg { width: 19px; height: 19px; }
.quickbar__cta { background: var(--color-hazard); }
@media (min-width: 1024px) { .quickbar { display: none; } }

/* 안내 토스트 */
.toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 70; transform: translateX(-50%); width: min(92vw, 420px); padding: 12px 16px; background: var(--color-ink); color: #fff; border-radius: 4px; font-size: .9rem; }

/* ---------- 동작 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* 색·투명도 피드백은 남긴다 */
  .btn, .chip span, .plist__no, .plist__rows a, .bln circle, .pf, .pf-s, .qa__a { transition-duration: .2s !important; }
}