/* =========================================================
   전기 어린이 승합차 사전예약 랜딩 — 랜딩 전용 스타일
   토큰·유틸(.display .title .lead .cap .pill .topbar .rise)은 base.css 에 있다.
   여기에는 '이 페이지에만 있는 형태'만 둔다.

   지면 순서(위→아래): surface → paper → warm → surface → paper → STAGE → surface → warm → surface
   밝은 지면이 계속 이어지다 법적 기준 한 곳만 암전된다. 차가 선명한 노란색이라
   지면까지 색을 쓰면 사진이 죽는다 — 노랑은 행동과 결론 숫자 하나에만(오너 확정: 버튼·포인트만).

   규칙 출처: apple-design 스킬
     §1  피드백은 누르는 순간
     §11 애니메이션은 transform·opacity만
     §12 크롬은 반투명 재질, 큰 면일수록 그림자가 깊다
     §14 reduced-motion / reduced-transparency / contrast 셋 다 대응
     §15 트래킹은 크기별로
   ========================================================= */

/* ---------- 지면과 리듬 ---------- */
.band{padding:clamp(3.5rem,9vw,7rem) var(--pad-page);}
.band.surface{background:var(--surface);}
.band.paper{background:var(--paper);}
.band.warm{background:var(--warm);}
.band.stage{background:var(--stage);color:var(--text-on-stage);}
/* 암전 지면에서는 base.css 의 검정 포커스 링이 사라진다 — 밝은 쪽으로 뒤집는다 */
.band.stage :focus-visible{outline-color:var(--text-on-stage);}

.wrap{max-width:72rem;margin-inline:auto;}
.wrap-narrow{max-width:46rem;}

/* 한국어는 기본 줄바꿈이 글자 단위라 '확인/하세요' 처럼 낱말이 반토막 난다.
   keep-all 로 어절을 지키고, 끊을 데가 없는 긴 토큰만 예외로 쪼갠다. */
.hero,.band{word-break:keep-all;overflow-wrap:break-word;}

/* 상단 크롬이 sticky라 앵커로 점프하면 제목이 그 밑에 깔린다 */
#catalog{scroll-margin-top:4.5rem;}

.eyebrow{color:var(--bus-ink);}
/* 암전 지면에서는 --bus-ink 가 배경과 붙어 사실상 안 읽힌다(약 2.5:1). 암전용 노랑으로 갈아탄다. */
.band.stage .eyebrow{color:var(--bus-lit);}
.band.stage .lead{color:var(--muted-on-stage);}

/* 각주는 근거를 대는 자리다. 작지만 읽히긴 해야 하므로 muted 까지만 내린다. */
.note{
  margin-top:1.5rem;
  font-size:0.75rem;line-height:1.65;color:var(--muted);letter-spacing:0;
}

/* 전화번호는 상단에서 가장 자주 눌리는 표적 — 탭 영역을 44px 로 벌린다.
   flex 컨테이너는 자식 사이의 공백 문자를 버리므로 '고객센터'와 번호가 붙는다. gap 으로 되돌린다. */
.topbar .telnum{
  display:inline-flex;align-items:center;gap:.3em;min-height:2.75rem;
  font-weight:600;color:var(--text);
}

/* ---------- 스크롤 등장 ----------
   base.css 의 .rise 는 로드 즉시 재생된다(히어로용). 아래로 내려가야 보이는 섹션은
   IntersectionObserver 로 켜야 하므로 transition 기반의 .rise-in 을 따로 둔다.
   '등장 전' 상태는 .js 가 붙었을 때만 — JS가 막히면 처음부터 다 보여야 한다. */
.js .rise-in{
  opacity:0;transform:translateY(1.1rem);
  transition:opacity .62s var(--ease-spring), transform .62s var(--ease-spring);
}
.js .rise-in.is-in{opacity:1;transform:none;}
.js .rise-in.dly1{transition-delay:.06s;}
.js .rise-in.dly2{transition-delay:.13s;}
.js .rise-in.dly3{transition-delay:.2s;}

/* ---------- 1. 히어로 ---------- */
.hero{
  position:relative;
  background:var(--surface);
  padding:clamp(2rem,6vh,4rem) var(--pad-page) clamp(2rem,5vh,3.5rem);
  text-align:center;
  overflow:hidden;
}
/* 정지된 그라디언트 한 겹. 움직이는 전면 배경은 쓰지 않는다(§14) */
.hero::before{
  content:'';position:absolute;left:50%;top:30%;
  width:min(120rem,190%);aspect-ratio:2/1;transform:translate(-50%,-50%);
  /* 노랑은 지면을 물들이면 안 된다 — 색이 아니라 빛으로만 읽히게 앰버 때보다 더 옅게 깐다 */
  background:radial-gradient(ellipse at center,rgba(234,224,18,.055) 0%,rgba(234,224,18,.02) 38%,transparent 70%);
  pointer-events:none;
}
.hero>*{position:relative;}
.hero h1{margin:.7rem auto 0;}
.hero-lead{margin:1.1rem auto 0;max-width:46ch;}
.hero-act{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;margin-top:1.75rem;}

/* 사진 폭을 화면 높이에 묶는다(1755×995 → 폭 = 높이×1.764).
   가로로 넓은 화면에서 사진이 첫 화면을 다 먹으면 아래가 있다는 걸 알 수 없다. */
.hero-shot{margin:clamp(1.5rem,4vh,2.75rem) auto 0;max-width:min(72rem,100%,calc(44vh * 1.764));}
.hero-shot img{width:100%;height:auto;display:block;border-radius:var(--r-card);}

/* ---------- 2. 핵심 수치 ---------- */
.stats{
  list-style:none;margin:1.75rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.6vw,1.15rem);
}
.stat{background:var(--surface);border-radius:var(--r-card);padding:clamp(1.25rem,2.5vw,1.75rem);}
.stat-v{
  display:flex;align-items:baseline;flex-wrap:wrap;
  font-size:clamp(1.9rem,4.2vw,2.7rem);font-weight:700;
  line-height:1.05;letter-spacing:-0.032em;      /* §15 : 큰 숫자는 조인다 */
}
/* 카운트업 중에 자릿수가 늘면 옆 글자가 밀린다 — 최종 폭을 JS가 미리 잡아 준다 */
.stat-v .num{display:inline-block;}
/* 숫자와 단위는 한 덩어리다 — 줄이 바뀌면서 'Nm'만 아래로 떨어지면 값이 둘로 읽힌다 */
.stat-v .pair{display:inline-flex;align-items:baseline;white-space:nowrap;}
.stat-u{font-size:.42em;font-weight:600;letter-spacing:-0.01em;color:var(--muted);margin-left:.14em;}
.stat-sep{font-size:.5em;font-weight:400;color:var(--muted);margin:0 .3em;}
.stat-l{margin-top:.8rem;font-size:.9375rem;font-weight:600;letter-spacing:-0.015em;}
.stat-s{margin-top:.15rem;font-size:.8125rem;color:var(--muted);}

/* ---------- 3. 공통: 화면에서만 숨기기 ----------
   유지비 절감 블록이 가격표(pricetag.css)로 바뀌면서 옛 비교표 스타일은 전부 걷어냈다.
   .vh 는 스크린리더 전용 라벨용으로 남겨 둔다(예약 폼과 표 캡션이 언제든 쓴다). */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- 4-b. 전용 사양 탭 (실내 / 외부) ----------
   g-tower 층별 안내와 같은 방식 — 위에서 고르면 아래 묶음이 통째로 바뀐다.
   탭은 알약 두 개를 한 트랙에 넣어 '둘 중 하나'임이 형태로 보이게 한다.
   .cards 는 손대지 않는다 — 카드 생김새는 그대로 두고 담는 그릇만 바뀌는 것이다. */
.spectabs{
  margin-top:1.6rem;display:inline-flex;gap:.25rem;padding:.25rem;
  border-radius:var(--r-pill);background:var(--paper);
}
.spectab{
  appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;
  /* 손가락으로 눌러야 하므로 세로 44px 이상을 확보한다 */
  padding:.7rem 1.25rem;min-height:2.75rem;border-radius:var(--r-pill);
  background:transparent;color:var(--muted);
  font:inherit;font-size:.9375rem;font-weight:600;letter-spacing:-0.01em;
  transition:background .22s var(--ease-spring), color .22s var(--ease-spring);
}
.spectab .n{
  font-size:.75rem;font-weight:700;letter-spacing:0;
  color:currentColor;opacity:.55;font-variant-numeric:tabular-nums;
}
@media (hover:hover) and (pointer:fine){
  .spectab:not(.is-on):hover{color:var(--text);}
}
/* 선택된 탭만 흰 알약으로 떠오른다. 노란 면을 쓰면 이 페이지에서 CTA와 경쟁한다. */
.spectab.is-on{
  background:var(--surface);color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
}
.spectab:active{transform:scale(.97);}

.specpanel-lead{
  margin-top:1.5rem;font-size:.875rem;font-weight:600;letter-spacing:-0.01em;color:var(--muted);
}
.specpanel-lead+.swipe{margin-top:.85rem;}
/* 탭을 바꿀 때 새 묶음이 아주 짧게 떠오른다 — 자리가 바뀐 것을 눈이 놓치지 않게. */
.js .specpanel[data-swapped]{animation:spec-swap .34s var(--ease-spring);}
@keyframes spec-swap{from{opacity:0;transform:translateY(.4rem);}to{opacity:1;transform:none;}}
/* 검토용 우회: html.force-motion 이 붙은 동안만 이 블록이 비켜선다(landing.js 의 ?motion=on). 실제 방문자에겐 클래스가 없어 접근성 규칙 그대로. */
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) .js .specpanel[data-swapped]{animation:none;}
  html:not(.force-motion) .spectab{transition:none;}
}

/* ---------- 4·5. 사양 카드 ----------
   9장과 12장 모두 3열에서 딱 떨어진다(3×3, 3×4). auto-fill 로 두면 마지막 줄이 늘 어중간하다. */
.cards{
  list-style:none;margin:1.75rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1.6vw,1.25rem);
}
.cards>li{display:flex;}
.card{
  margin:0;display:flex;flex-direction:column;width:100%;
  background:var(--surface);border-radius:var(--r-card);overflow:hidden;
  /* 흰 지면 위에서도 카드가 서야 하므로 선 대신 그림자로 띄운다(§12) */
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.05);
}
.card img{
  width:100%;height:auto;display:block;
  aspect-ratio:789/522;object-fit:cover;background:var(--paper);
}
.card figcaption{padding:1.05rem 1.15rem 1.25rem;}
.card h3{font-size:1rem;font-weight:700;letter-spacing:-0.018em;line-height:1.3;}
.card figcaption p{margin-top:.4rem;font-size:.8125rem;line-height:1.6;color:var(--muted);}

/* ---------- 4-c. 전용 사양 스와이프 (오너 지시 2026-08-21) ----------
   한 화면에 한 장씩만 보여 준다. 3열로 늘어놓으면 눈이 훑고 지나가는데,
   한 장씩 넘기면 사진과 설명을 한 쌍으로 읽게 된다.

   구현은 네이티브 가로 스냅 스크롤이다 — 손가락 스와이프·트랙패드·스크롤바가
   전부 브라우저 것이라 JS가 죽어도 넘길 수 있다. JS는 좌우 버튼과 '3 / 5' 표시만 얹는다.
   그래서 .swipe-nav 는 .js 가 붙었을 때만 나온다(없는 버튼을 보여 주지 않는다). */
.swipe{margin-top:1.75rem;}
.swipe-track{
  /* .cards 의 grid 를 덮어쓴다 — 카드 생김새(.card)는 그대로 두고 담는 그릇만 바꾼다 */
  display:flex;margin:0;padding:.25rem 0;
  max-width:44rem;margin-inline:auto;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:thin;               /* 숨기지 않는다 — 스크롤바가 '더 있다'의 단서다(.gallery 와 같은 규칙) */
}
/* 한 장이 트랙을 꽉 채운다. 여기서 폭을 줄이면 옆 장이 걸쳐 보여 '한 장씩'이 깨진다. */
.swipe-track>li{flex:0 0 100%;scroll-snap-align:center;}
.swipe-track:focus-visible{outline:2px solid var(--text);outline-offset:6px;border-radius:var(--r-card);}

.swipe-nav{display:none;}
.js .swipe-nav{
  display:flex;align-items:center;justify-content:center;gap:.85rem;
  max-width:44rem;margin:.9rem auto 0;
}
.swipe-btn{
  appearance:none;cursor:pointer;
  width:2.75rem;height:2.75rem;flex:none;   /* 손가락 탭 타깃 44px */
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--text);
  transition:background .18s var(--ease-spring), opacity .18s var(--ease-spring);
}
.swipe-btn svg{width:1.15rem;height:1.15rem;}
/* 끝에 닿으면 흐려진다. disabled 를 쓰지 않는 이유는 초점이 사라져 키보드 자리를 잃기 때문. */
.swipe-btn[aria-disabled="true"]{opacity:.32;cursor:default;}
.swipe-btn:active{transform:scale(.96);}
@media (hover:hover) and (pointer:fine){
  .swipe-btn:not([aria-disabled="true"]):hover{background:var(--paper);}
}
.swipe-count{
  min-width:3.25rem;text-align:center;
  font-size:.8125rem;font-weight:700;letter-spacing:0;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) .swipe-track{scroll-behavior:auto;}
  html:not(.force-motion) .swipe-btn{transition:none;}
}

/* ---------- 5. 편의성과 안전 = 2열 × 6줄 (오너 지시 2026-08-21) ----------
   12장이라 2열이면 정확히 6줄로 떨어진다. 좁은 화면에서는 2열이면 칸이 반으로 줄어
   설명 두 줄이 대여섯 줄로 늘어지므로 한 줄로 되돌린다. */
.cards.cards-2{grid-template-columns:repeat(2,1fr);}
/* 좁은 화면에서도 2열을 지킨다(오너 지시 2026-08-21 — 폰에서도 한 줄에 2장).
   칸이 반으로 줄어드는 만큼 설명 글자와 안쪽 여백을 같이 줄이지 않으면
   카드 하나가 화면 한 판을 넘어가 '한눈에 훑는 격자'가 되지 못한다. */
@media (max-width:40rem){
  .cards.cards-2{gap:.6rem;}
  .cards-2 .card figcaption{padding:.7rem .75rem .85rem;}
  .cards-2 .card h3{font-size:.8125rem;line-height:1.35;}
  .cards-2 .card figcaption p{margin-top:.3rem;font-size:.6875rem;line-height:1.55;}
}

/* ---------- 6. 전기차라서 달라지는 것 (암전) ----------
   법적 기준 칩 목록이 있던 자리를 대신한다(오너 지시 2026-08-20).
   짧은 라벨 여러 개가 아니라 세 문단이라, 칩이 아니라 글줄로 짠다. */
.comfort{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:1.75rem;}
.comfort li{position:relative;padding-left:1.15rem;}
/* 항목의 시작을 점이 아니라 짧은 세로선으로 표시한다 — 어두운 지면에서 점은 먼지처럼 보인다. */
.comfort li::before{
  content:'';position:absolute;left:0;top:.35rem;bottom:.35rem;width:2px;
  border-radius:2px;background:var(--bus-lit);
}
/* 어두운 지면 위 글자는 한 단계 굵게, 자간은 살짝 벌려야 뭉치지 않는다(§12 vibrancy) */
.comfort h3{
  font-size:1.0625rem;font-weight:700;letter-spacing:-0.01em;line-height:1.35;
  color:var(--text-on-stage);
}
.comfort p{
  margin-top:.45rem;font-size:.9375rem;line-height:1.7;letter-spacing:0.005em;
  color:var(--muted-on-stage);
  /* 지정 줄바꿈이 있는 문장이라, 자동 줄바꿈이 끼어들 때도 낱말이 쪼개지지 않게 한다 */
  word-break:keep-all;
}
/* 제목은 기둥이 넓어져도 한 호흡에 읽히게 폭을 묶는다. 리드는 오너가 "한 줄로" 지정한
   문장이라 묶지 않는다 — 폭을 제한하면 넓은 화면에서도 접힌다. */
.band.stage #h-comfort{max-width:34ch;}
/* 넓은 화면에서는 제목을 왼쪽 기둥으로 빼고 본문에 폭을 몰아 준다.
   3열로 쪼개면 칸이 22rem 밖에 안 돼, 오너가 정해 준 줄바꿈보다 브라우저 줄바꿈이 먼저 온다. */
@media (min-width:48rem){
  .comfort{gap:1.9rem;}
  .comfort li{display:grid;grid-template-columns:16rem 1fr;gap:0 2rem;align-items:baseline;}
  .comfort p{margin-top:0;}
}

/* ---------- 7. 실차 갤러리 ---------- */
.gallery{
  list-style:none;margin:1.75rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.6vw,1.15rem);
}
.gallery img{
  width:100%;height:auto;display:block;
  aspect-ratio:1182/694;object-fit:cover;
  border-radius:var(--r-card);background:var(--paper);
}
.gallery:focus-visible{outline:2px solid var(--text);outline-offset:6px;border-radius:var(--r-card);}

/* ---------- 8. 카탈로그 ---------- */
.cat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;}
.cat-shot{margin:0;}
.cat-shot img{width:100%;height:auto;display:block;border-radius:var(--r-card);}
.cat-copy h2{margin-top:.6rem;}
.cat-copy .lead{margin-top:.9rem;max-width:34ch;}
.cat-dl{margin-top:1.6rem;}
.ic-dl{width:1.05em;height:1.05em;flex:none;}
.cat-dl .sz{font-weight:500;font-size:.8125rem;opacity:.75;}

/* ---------- 9. 마감 CTA ---------- */
.closing{text-align:center;}
.closing .display{max-width:16ch;margin-inline:auto;}
.closing-act{margin-top:2rem;}
.pill.lg{padding:1rem 2.1rem;font-size:1.0625rem;}

/* ---------- 우하단 고정 도크 (요구사항 2) ----------
   푸터를 덮지 않게 하는 방법: 도크가 비켜나는 게 아니라 푸터가 자기 아래에 자리를 비운다.
   landing.js 가 --foot-clear 에 도크 높이를 넣으면 site-foot.css 의
   padding-bottom:calc(2rem + var(--foot-clear,0px)) 가 그만큼 벌어진다.
   도크가 사라졌다 나타났다 하면 '항상 떠 있어야 한다'는 요구가 깨지므로 이 방식을 쓴다. */
.dock{
  position:fixed;z-index:60;
  right:clamp(.85rem,2.5vw,1.5rem);
  bottom:calc(clamp(.85rem,2.5vw,1.5rem) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:.5rem;
  transform-origin:100% 100%;
  transition:opacity .45s var(--ease-spring), transform .45s var(--ease-spring);
}
/* 히어로가 화면을 채운 최초 상태에서는 반 발짝 물러나 있다가, 스크롤이 시작되면 또렷해진다.
   요란한 등장 대신 '있었는데 이제 앞으로 나온다' 정도로만. */
.js .dock{opacity:.68;transform:translateY(.4rem) scale(.95);}
.js .dock.is-lifted{opacity:1;transform:none;}

.dock-btn{
  display:flex;align-items:center;justify-content:center;
  min-height:2.875rem;                 /* 46px — 최소 탭 타깃 44px 위 */
  padding:.7rem 1.3rem;border:0;border-radius:var(--r-pill);
  font-size:.875rem;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;
  transition:transform .1s ease-out, background .18s var(--ease-spring);
}
.dock-btn:active{transform:scale(.97);}   /* §1 : 누르는 순간 */
/* 용량 표기(landing.js 가 붙인다) — 4.7MB 가 예고 없이 시작되지 않게 */
.dock-pdf .sz{margin-left:.4rem;font-weight:500;font-size:.75rem;opacity:.6;}
/* 사진 위에 뜨는 버튼이라 반투명 재질을 쓰지 않는다 — 노란 차체 위에서 글자가 죽는다 */
.dock-pdf{
  background:var(--surface);color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.10), 0 10px 26px rgba(0,0,0,.16), inset 0 0 0 1px var(--line);
}
/* 도크는 히어로의 노란 차체 위에도 뜬다 — 안쪽 선이 없으면 차와 버튼이 한 덩어리로 뭉친다 */
.dock-reserve{
  background:var(--bus);color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.16);
}

@media (hover:hover) and (pointer:fine){
  /* .card 는 <figure>다 — 누를 수 없는 것이 손을 올릴 때 떠오르면, 없는 동작을 약속하게 된다.
     호버는 실제로 눌리는 것(도크 버튼)에만 준다. */
  .dock-pdf:hover{background:#fff;}
  .dock-reserve:hover{background:var(--bus-press);}
}

/* ---------- 반응형 ---------- */
@media (max-width:64rem){
  .stats{grid-template-columns:repeat(2,1fr);}
  .cards{grid-template-columns:repeat(2,1fr);}

  /* 좁은 화면 갤러리는 가로 스냅 스크롤. 좌우로 화면 끝까지 흘러야 '더 있다'가 보이므로
     밴드 좌우 여백만큼 밖으로 뺐다가 안쪽 패딩으로 되돌린다 — 문서 전체 가로 스크롤은 생기지 않는다. */
  .gallery{
    display:flex;gap:.75rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad-page);
    margin-inline:calc(-1 * var(--pad-page));
    padding:.25rem var(--pad-page);
    scrollbar-width:thin;                 /* 숨기지 않는다 — 스크롤바가 유일한 단서다 */
  }
  .gallery>li{flex:0 0 min(80%,24rem);scroll-snap-align:center;}
}
@media (max-width:56rem){
  .cat{grid-template-columns:1fr;}
  .cat-copy .lead{max-width:none;}
}
@media (max-width:40rem){
  .cards{grid-template-columns:1fr;}
}
@media (max-width:30rem){
  .stats{grid-template-columns:1fr;}
  .bar-row{grid-template-columns:2.2rem 1fr auto;gap:.65rem;}
}
/* 도크는 화면을 가리면 안 된다 — 작게 만들되 44px 탭 타깃은 지킨다 */
@media (max-width:44rem){
  .dock{gap:.45rem;right:.85rem;}
  .dock-btn{min-height:2.75rem;padding:.6rem 1.05rem;font-size:.8125rem;}
}

/* ---------- 접근성 대응 (§14) ---------- */
/* 검토용 우회: html.force-motion 이 붙은 동안만 이 블록이 비켜선다(landing.js 의 ?motion=on). 실제 방문자에겐 클래스가 없어 접근성 규칙 그대로. */
@media (prefers-reduced-motion:reduce){
  /* 이동은 버리고 페이드만 남긴다. 카운트업은 landing.js 가 최종값으로 즉시 확정한다. */
  html:not(.force-motion) .js .rise-in{transform:none;transition:opacity .2s linear;}
  html:not(.force-motion) .js .dock{transform:none;}
  html:not(.force-motion) .card,html:not(.force-motion) .dock-btn{transition:none;}
  html:not(.force-motion) .gallery{scroll-behavior:auto;}
}
@media (prefers-reduced-transparency:reduce){
  .hero::before{display:none;}
}
@media (prefers-contrast:more){
  .stat,.card{box-shadow:none;outline:1px solid var(--line);}
  .card{outline-offset:-1px;}
  .dock-reserve{box-shadow:0 10px 26px rgba(0,0,0,.2), inset 0 0 0 2px var(--text);}
  .dock-pdf{box-shadow:0 10px 26px rgba(0,0,0,.2), inset 0 0 0 2px var(--text);}
  .note{color:var(--text);}
}

/* 인쇄는 이 페이지의 용도가 아니다 — 화면 위에 떠 있는 것만 걷어낸다 */
@media print{
  .dock{display:none;}
}