/* ============================================================
   R&D빌더스 와이어프레임 컴포넌트 CSS v1.0
   근거: DESIGN.md §2~§7 · SPEC_RESOLUTION.md · IA_SITEMAP.md §1
   규칙: 색·크기·간격은 tokens.css 변수 참조.
         px 직접 표기는 DESIGN.md 컴포넌트 표에 명시된 스펙 리터럴만.
   ============================================================ */

/* ---- 0. 리셋·베이스 ------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
  margin: 0;
}
img {
  max-width: 100%;
  display: block;
}
button {
  font-family: inherit;
}
a {
  color: inherit;
}
table {
  border-collapse: collapse;
}
/* 한글 어절 단위 줄바꿈 — 고아 글자 방지.
   제목에만 걸어 두면 본문이 "…안내합니 / 다." 로 어절 중간에서 쪼개진다.
   실측 2026-08-09: 본문 미적용 상태에서 6페이지 30건 검출 → 본문까지 확대. */
h1,
h2,
h3,
h4,
p,
li,
td,
th,
dd,
dt,
figcaption,
blockquote,
.hero__headline,
.cta-band__title {
  word-break: keep-all;
  text-wrap: pretty; /* 마지막 줄에 어절 1개만 남는 것을 브라우저가 당겨 올린다 */
}
.section-header__title,
.cta-band__title {
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-h1);
  color: var(--text-heading);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-h2);
  color: var(--text-heading);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-h3);
  color: var(--text-heading);
}
h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  font-weight: var(--fw-h4);
  color: var(--text-heading);
}
.link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 본문 텍스트 블록 행길이 가드 (§1.3) */
.prose-max {
  max-width: 640px;
}

/* 좌우 컬럼 높이 맞추기 — 그리드는 컬럼을 늘려도 안의 카드는 제 높이만큼만 찬다.
   실측 2026-08-09: #s-market 좌 289 vs 우 345, #s-team 우 384 vs 좌 561.
   차트·이미지가 컬럼 높이를 그대로 쓰게 만든다. */
@media (min-width: 1024px) {
  .fill-col {
    display: flex;
    flex-direction: column;
  }
  .fill-col > .chart {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fill-col > .chart > svg {
    width: 100%;
    height: auto;
  }
  .fill-col > .media-frame {
    flex: 1;
    aspect-ratio: auto; /* 비율 고정 해제 — 컬럼 높이를 따라간다 */
    min-height: 0;
  }
}

/* ---- 1. 레이아웃: 컨테이너·그리드·섹션 밴드 ----------------------- */
.container {
  max-width: calc(var(--container-max) + var(--page-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
}
.grid-12 > *,
.card-grid > * {
  min-width: 0; /* 내부 스크롤 요소(표·타임라인)의 min-content가 트랙을 밀어내지 않게 */
}
.col-3 {
  grid-column: span 3;
}
.col-4 {
  grid-column: span 4;
}
.col-5 {
  grid-column: span 5;
}
.col-6 {
  grid-column: span 6;
}
.col-7 {
  grid-column: span 7;
}
.col-8 {
  grid-column: span 8;
}
.col-12 {
  grid-column: 1 / -1;
}
@media (max-width: 1023px) {
  .col-3,
  .col-4 {
    grid-column: span 6;
  }
}
@media (max-width: 767px) {
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8 {
    grid-column: 1 / -1;
  }
}

/* 섹션 밴드 — --surface ↔ --surface-alt 교차, 다크 1회/페이지, 페이퍼는 히어로 전용 (§5.2-5) */
.band {
  padding-block: var(--sect-pad-y);
  background: var(--surface);
}
.band--alt {
  background: var(--surface-alt);
}
.band--dark {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.band--dark h2,
.band--dark h3,
.band--dark h4 {
  color: var(--text-inverse);
}

/* ---- 2. 스킵 링크 (§7) --------------------------------------------- */
.skip-link {
  position: fixed;
  left: var(--sp-2);
  top: -64px;
  z-index: 300;
  height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  background: var(--navy-800);
  color: var(--text-inverse);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible {
  top: var(--sp-2);
}

/* ---- 3. 버튼 (§4.1) — 4변형 × 3사이즈 ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-md);
  font-weight: 700;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn.lg {
  height: var(--btn-h-lg);
  padding: 0 28px;
  font-size: 19px;
}
.btn.md {
  height: var(--btn-h-md);
  padding: 0 20px;
  font-size: 16px;
}
.btn.sm {
  height: var(--btn-h-sm);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
}

.btn-primary {
  background: var(--navy-800);
  color: var(--text-inverse);
}
.btn-primary:hover {
  background: var(--navy-700);
}
.btn-primary:active {
  background: var(--navy-900);
}

/* btn-cta는 lg 전용 — 히어로 1 + 전환 밴드 1 이내 (§4.1) */
.btn-cta {
  background: var(--accent-cta);
  color: var(--text-inverse);
}
.btn-cta:hover {
  background: var(--orange-700);
}
.btn-cta:active {
  background: var(--orange-800);
}

.btn-secondary {
  background: var(--surface);
  color: var(--navy-800);
  border: 1.5px solid var(--navy-300);
}
.btn-secondary:hover {
  background: var(--navy-50);
}
.btn-secondary:active {
  background: var(--navy-100);
}

.btn-ghost {
  background: transparent;
  color: var(--navy-700);
}
.btn-ghost:hover {
  background: var(--slate-100);
}
.btn-ghost:active {
  background: var(--slate-200);
}

.btn:disabled,
.btn.is-disabled {
  pointer-events: none;
}
.btn-primary:disabled,
.btn-primary.is-disabled,
.btn-cta:disabled,
.btn-cta.is-disabled {
  background: var(--slate-100);
  color: var(--slate-400);
}
.btn-secondary:disabled,
.btn-secondary.is-disabled {
  border-color: var(--slate-300);
  color: var(--slate-300);
  background: var(--surface);
}
.btn-ghost:disabled,
.btn-ghost.is-disabled {
  color: var(--slate-300);
}

/* ---- 4. 로고 락업 (§2) — 심볼:워드마크 = 2:1 ----------------------- */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo-lockup__symbol {
  height: 32px;
}
.logo-lockup__wordmark {
  height: 16px;
  margin-left: 10px;
  color: var(--navy-800);
} /* 간격 = 심볼 × 0.32 */
.logo-lockup--footer .logo-lockup__symbol {
  height: 28px;
}
.logo-lockup--footer .logo-lockup__wordmark {
  height: 14px;
  margin-left: 9px;
  color: var(--text-inverse);
}

/* ---- 5. 내비게이션 바 (§4.2) --------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96); /* 스펙 리터럴 §4.2 */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: var(--bw-1) solid var(--border);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.navbar.is-condensed {
  box-shadow: var(--shadow-1);
}
.navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: var(--nav-h);
  transition: height var(--dur-base) var(--ease-out);
}
.navbar.is-condensed .navbar__inner {
  height: var(--nav-h-condensed);
}
.gnb {
  display: flex;
  gap: var(--sp-8);
  margin-left: auto;
  height: 100%;
}
.gnb__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.gnb__link:hover {
  color: var(--text-primary);
}
.gnb__link[aria-current="page"] {
  color: var(--navy-800);
}
.gnb__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--bw-2);
  background: var(--navy-800);
}
.navbar__cta {
  flex: none;
}
.nav-burger {
  display: none;
  position: relative;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--r-md);
}
.nav-burger__bar {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--navy-800);
  border-radius: 1px;
}
.nav-burger__bar:nth-child(1) {
  top: 15px;
}
.nav-burger__bar:nth-child(2) {
  top: 21px;
}
.nav-burger__bar:nth-child(3) {
  top: 27px;
}
@media (max-width: 1023px) {
  .gnb,
  .navbar__cta {
    display: none;
  }
  .nav-burger {
    display: block;
    margin-left: auto;
  }
  .navbar__inner {
    height: var(--nav-h-condensed);
  }
  .navbar .logo-lockup__symbol {
    height: 28px;
  }
  .navbar .logo-lockup__wordmark {
    height: 14px;
    margin-left: 9px;
  }
}

/* ---- 6. 모바일 메뉴 (§4.3) ----------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden; /* 슬라이드-인 대기 패널(translateX 100%)이 문서 가로 스크롤을 만들지 않게 */
}
.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}
.mobile-menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 27, 54, 0.4); /* 스펙 리터럴 §4.3 */
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  border: 0;
  padding: 0;
  width: 100%;
  cursor: default;
}
.mobile-menu.is-open .mobile-menu__scrim {
  opacity: 1;
}
.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  transform: translateX(100%);
  transition: transform 240ms var(--ease-out); /* 스펙 리터럴 §4.3 */
}
.mobile-menu.is-open .mobile-menu__panel {
  transform: translateX(0);
}
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h-condensed);
  padding-inline: var(--page-margin);
  border-bottom: var(--bw-1) solid var(--border);
}
.mobile-menu__close {
  width: var(--touch-min);
  height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--r-md);
  color: var(--navy-800);
}
.mobile-menu__list {
  flex: 1;
  overflow-y: auto;
}
.mobile-menu__link {
  display: flex;
  align-items: center;
  height: 56px;
  padding-inline: var(--page-margin);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: var(--bw-1) solid var(--border);
}
.mobile-menu__link[aria-current="page"] {
  color: var(--navy-800);
  box-shadow: inset 3px 0 0 var(--navy-800);
}
.mobile-menu__foot {
  padding: var(--sp-4) var(--page-margin) var(--sp-6);
  border-top: var(--bw-1) solid var(--border);
  text-align: center;
}
.mobile-menu__foot .btn {
  width: 100%;
}
.mobile-menu__tel {
  margin-top: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

/* ---- 7. 히어로 (§3 · SPEC_RESOLUTION 확정 슬롯) ---------------------
   2026-08-09: 우측 4:3 프레임 분할 → 전체배경으로 전환(6페이지 동일).
   슬롯 이미지가 화면 전체를 덮으므로 히어로 6장을 전부 4K 로 재생성했다.
   텍스트 스택 348px 고정은 그대로 유지한다. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900); /* 이미지 로드 전 바탕 */
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 38%;
}
/* 좌측 텍스트 영역(뷰포트 8~53%)은 90% 이상으로 덮어야 흰 글자가 산다.
   사진이 아무리 밝아도 94% 네이비 위 백색은 13.8:1 (계산 실측). */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(11, 27, 54, 0.94) 0%,
      rgba(11, 27, 54, 0.9) 45%,
      rgba(11, 27, 54, 0.55) 72%,
      rgba(11, 27, 54, 0.22) 100%
    ),
    linear-gradient(
      180deg,
      rgba(11, 27, 54, 0.3) 0%,
      rgba(11, 27, 54, 0) 38%,
      rgba(11, 27, 54, 0.42) 100%
    );
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: center;
  min-height: 620px;
  padding-block: var(--hero-pad-y);
}
.hero__text {
  grid-column: span 7;
  /* 슬롯 높이 합 = eyebrow 18 + 12 + 헤드라인 2줄 100 + 16
     + 서브 2줄 57.6 + 24 + 배지 36 + 32 + CTA 52 = 347.6
     페이지마다 서브 줄 수·CTA 유무가 달라도 이 높이로 고정해
     텍스트 시작점이 밀리지 않게 한다. */
  --hero-text-h: 348px;
  min-height: var(--hero-text-h);
}
/* ---- 배경 미디어 소프트포커스 (2026-08-09) ----
   생성 이미지·영상의 서류에 자모가 어긋난 한글이 찍혀 있다. 히어로는 우측
   스크림이 열려 있어 그 글자가 읽힌다. 배경은 원래 초점이 나가 있는 편이
   본문 가독성에도 유리하므로 약한 블러로 판독을 없앤다.
   scale 은 블러가 가장자리를 투명하게 만드는 것을 덮기 위한 오버스캔이다. */
.hero__media,
.bgsec__media {
  filter: blur(4px);
  transform: scale(1.05);
}

/* ---- 배경 영상 (히어로·섹션 배경 공용, 2026-08-09) ----
   poster 는 부모의 background-image 가 그대로 맡는다 — 영상이 안 뜨면 사진이 남는다. */
.media-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 자동재생 8초 루프 → WCAG 2.2.2 로 정지 수단이 필수다 */
.media-bg-toggle {
  position: absolute;
  right: var(--page-margin);
  bottom: calc(var(--sp-5) + 32px);
  z-index: 3;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(11, 27, 54, 0.55);
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.bgsec .media-bg-toggle {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.86);
  color: var(--navy-800);
}
.media-bg-toggle:hover {
  background: rgba(11, 27, 54, 0.78);
}
.bgsec .media-bg-toggle:hover {
  background: #fff;
}
.media-bg-toggle svg {
  width: 14px;
  height: 14px;
  display: block;
}
.media-bg-toggle .ico-play {
  display: none;
}
.media-bg-toggle.is-paused .ico-play {
  display: block;
}
.media-bg-toggle.is-paused .ico-pause {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  /* 정지 이미지(부모 background-image)만 남긴다 */
  .media-bg {
    display: none;
  }
  .media-bg-toggle {
    display: none;
  }
}

/* 슬롯 ID 배지 — 발주표(assets-order)와의 대응을 화면에서 잃지 않게 */
.hero__slot {
  position: absolute;
  right: var(--page-margin);
  bottom: var(--sp-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 700;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-label);
  color: var(--cyan-700);
  margin-bottom: 12px;
}
.hero__eyebrow .logo-mark {
  height: 14px;
  color: var(--cyan-700);
}
.hero__eyebrow .logo-mark svg {
  display: block;
  height: 100%;
  width: auto;
}
.hero__headline {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-h1);
  color: var(--text-heading);
  margin-bottom: 16px;
}
/* 히어로 헤드라인은 6페이지 전부 h1 토큰으로 통일한다.
   (기존 .hero--home display 승격은 페이지 간 스타일이 갈려서 폐기) */
.hero__sub {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--text-secondary);
  margin-bottom: 24px;
  max-width: 640px;
  /* 2줄 자리 고정 — 1줄짜리 페이지에서 아래 슬롯이 위로 딸려 올라가지 않게 */
  min-height: calc(2em * var(--lh-body-lg));
}
.hero__badges,
ul.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  /* ul[class]{margin:0} 리셋보다 특이도가 높아야 적용된다 */
  margin-bottom: 32px;
}
.badge-trust {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: var(--bw-1) solid var(--navy-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  min-height: var(--btn-h-lg, 52px);
}
/* 주 CTA 가 없는 페이지(상담신청)도 CTA 행 높이를 그대로 차지한다 */
.hero__form-label {
  min-height: var(--btn-h-lg, 52px);
  display: flex;
  align-items: center;
}
.hero__form-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-tertiary);
}
/* ---- 전체배경 히어로 위 텍스트 반전 (2026-08-09) ---- */
.hero__eyebrow,
.hero__eyebrow .logo-mark {
  color: var(--focus-ring-inverse);
}
.hero__headline {
  color: var(--text-inverse);
}
.hero__sub {
  color: var(--text-inverse-muted);
}
.hero__form-label {
  color: var(--text-inverse-muted);
}
.hero .badge-trust {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-inverse);
  backdrop-filter: blur(3px);
}
.hero .btn-secondary {
  background: transparent;
  color: var(--text-inverse);
  border-color: rgba(255, 255, 255, 0.55);
}
.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.hero :focus-visible {
  outline-color: var(--focus-ring-inverse);
}
@media (max-width: 767px) {
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__text {
    min-height: 0;
    grid-column: 1 / -1;
  }
  .hero__sub {
    min-height: 0;
  }
  /* 모바일은 사진이 세로로 크게 잘려 인물·손이 어정쩡하게 걸린다.
     좌우 그라데이션도 의미가 없어지므로 균일하게 덮는다. */
  .hero__scrim {
    background: rgba(11, 27, 54, 0.9);
  }
  .hero__slot {
    right: var(--page-margin);
    bottom: var(--sp-3);
  }
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__cta .btn {
    width: 100%;
  }
}

/* 히어로 영상 일시정지 토글 32px (§3.3 · WCAG 2.2.2) */
.media-toggle {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  background: rgba(11, 27, 54, 0.62);
  color: var(--text-inverse);
}
.media-toggle::after {
  content: "";
  position: absolute;
  inset: -6px;
} /* 44px 히트 영역 */
.media-toggle svg {
  width: 14px;
  height: 14px;
  display: block;
}
.media-toggle .ico-play {
  display: none;
}
.media-toggle.is-paused .ico-pause {
  display: none;
}
.media-toggle.is-paused .ico-play {
  display: block;
}

/* ---- 8. 섹션 헤더 (§4.4) ------------------------------------------- */
.section-header {
  margin-bottom: var(--sect-header-mb);
}
.section-header__eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-label);
  color: var(--cyan-700);
  margin-bottom: 8px;
}
.section-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-400);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.section-header__title {
  margin-bottom: 12px;
}
.section-header__desc {
  color: var(--text-secondary);
  max-width: 640px;
}
.section-header--center {
  text-align: center;
}
.section-header--center .section-header__eyebrow {
  justify-content: center;
}
.section-header--center .section-header__desc {
  margin-inline: auto;
}
.band--dark .section-header__desc {
  color: var(--text-inverse-muted);
}

/* ---- 9. 데이터 카드 (§4.5) ------------------------------------------ */
.card-grid {
  display: grid;
  gap: var(--sp-6);
}
.card-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1023px) {
  .card-grid.cols-3,
  .card-grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .card-grid.cols-3,
  .card-grid.cols-4 {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}
.data-card {
  padding: var(--sp-6);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-alt); /* 배경 밴드 반전 (§4.5) */
  text-decoration: none;
  display: block;
}
.band--alt .data-card {
  background: var(--surface);
}
a.data-card {
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
a.data-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
}
.data-card__icon {
  display: block; /* span 인라인 상태에서는 width/height가 무시됨 */
  width: 24px;
  height: 24px;
  color: var(--navy-600);
  margin-bottom: var(--sp-3);
}
.data-card__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.data-card__value {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-3);
}
.data-card__title {
  margin-bottom: var(--sp-2);
}
.data-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.data-card__list {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.data-card__list li {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
}
.data-card__list li + li {
  margin-top: var(--sp-1);
}

/* ---- 10. 스탯 타일 (§4.6) ------------------------------------------- */
.stat-tile {
  min-width: 160px;
}
.stat-tile__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.stat-tile__value {
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  letter-spacing: var(--ls-stat);
  font-weight: var(--fw-stat);
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.stat-tile__unit {
  font-size: 16px;
  font-weight: 700;
  margin-left: 2px;
}
.stat-tile__meta {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 6px;
}
.stat-tile__meta.is-positive {
  color: var(--success);
}

/* ---- 11. KPI 행 (§4.7) — 페이지당 1회 ------------------------------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--bw-2) solid var(--navy-800);
  border-bottom: var(--bw-1) solid var(--border);
}
.kpi-row.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi-row > .stat-tile {
  min-width: 0;
  padding: var(--sp-8) var(--sp-6);
  border-left: var(--bw-1) solid var(--border);
}
.kpi-row > .stat-tile:first-child {
  border-left: 0;
}
@media (max-width: 767px) {
  .kpi-row,
  .kpi-row.cols-3 {
    /* .cols-3 는 특이도(0,2,0)가 높아 이 미디어쿼리를 그냥 무시한다.
       실측 2026-08-09: 393px 사례 패널에서 3열 유지 → 타일 98px,
       내용 폭 58px 로 "직원 15명 · 충남" 이 어절마다 쪼개졌다. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi-row.cols-3 > .stat-tile:last-child {
    grid-column: 1 / -1; /* 3타일 → 2+1. 남는 타일이 반쪽으로 뜨지 않게 */
  }
  .kpi-row > .stat-tile {
    border-left: 0;
    padding: var(--sp-5);
  }
  .kpi-row > .stat-tile:nth-child(n + 3) {
    border-top: var(--bw-1) solid var(--border);
  } /* 가로 디바이더만 */
}

/* ---- 12. 비교 매트릭스 표 (§4.8) ------------------------------------ */
.matrix-wrap {
  border: var(--bw-1) solid var(--border-strong);
  border-radius: var(--r-md);
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0; /* 그리드·플렉스 아이템 안에서도 내부 스크롤 유지 */
}
.matrix-table {
  width: 100%;
  min-width: 640px;
}
.matrix-table caption {
  text-align: left;
}
.matrix-table thead th {
  background: var(--navy-800);
  color: var(--text-inverse);
  font-size: 14px;
  font-weight: 700;
  height: 48px;
  padding: 0 16px;
  text-align: left;
  vertical-align: middle;
}
.matrix-table tbody th {
  background: var(--slate-50);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  width: 24%;
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  position: sticky;
  left: 0;
  z-index: 1; /* 모바일 1열 sticky */
}
.matrix-table tbody th::after {
  /* 우측 8px 페이드 */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -8px;
  width: 8px;
  background: linear-gradient(
    90deg,
    rgba(20, 24, 33, 0.05),
    rgba(20, 24, 33, 0)
  );
  pointer-events: none;
}
.matrix-table td {
  font-size: 15px;
  color: var(--text-secondary);
  padding: 14px 16px;
  vertical-align: top;
  border-left: var(--bw-1) solid var(--border);
}
.matrix-table tbody th,
.matrix-table tbody td {
  border-top: var(--bw-1) solid var(--border);
}
/* 강조 열 — 상단 3px 오렌지 라인 = 페이지 오렌지 예산 1 (§4.8) */
.matrix-table thead th.is-highlight {
  box-shadow: inset 0 3px 0 var(--accent);
}
.matrix-table td.is-highlight {
  background: var(--cyan-50);
  color: var(--navy-800);
  font-weight: 600;
}
.mark-yes {
  color: var(--success);
  font-weight: 700;
}
.mark-no {
  color: var(--danger);
  font-weight: 700;
}
.matrix-foot {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-tertiary);
}

/* ---- 13. 스텝 플로우 (§4.9) ----------------------------------------- */
.step-flow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--grid-gutter);
}
.step {
  position: relative;
  text-align: center;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(50% + 30px);
  right: calc(-50% + 30px - var(--grid-gutter));
  height: var(--bw-2);
  background: var(--navy-200);
}
.step__node {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin-inline: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--navy-50);
  border: 1.5px solid var(--navy-200);
  font-size: 18px;
  font-weight: 800;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.step__dur {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.step__title {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
}
.step__desc {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
/* 태블릿(768~1023px)에서도 세로로 눕혀야 하는 좁은 스텝 플로우.
   사례 상세 패널·반폭 컬럼 안의 step-flow 는 이 구간에서 트랙이 108px·69px
   까지 줄어 제목이 "…양산성능평가 / 설계" 로 쪼개진다(실측 2026-08-09, 768px).
   전체 폭 step-flow(홈·서비스·회사소개·상담신청)는 200px 이상이라 그대로 둔다. */
@media (min-width: 768px) and (max-width: 1023px) {
  .acc-panel__content .step-flow,
  .grid-12 > [class*="col-"] .step-flow {
    grid-auto-flow: row;
    gap: var(--sp-6);
  }
  .acc-panel__content .step,
  .grid-12 > [class*="col-"] .step {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: var(--sp-4);
    text-align: left;
    align-items: start;
  }
  .acc-panel__content .step__node,
  .grid-12 > [class*="col-"] .step__node {
    margin: 0;
    grid-row: 1 / span 3;
  }
  .acc-panel__content .step:not(:last-child)::after,
  .grid-12 > [class*="col-"] .step:not(:last-child)::after {
    top: 52px;
    bottom: calc(var(--sp-6) * -1);
    left: 21px;
    right: auto;
    width: var(--bw-2);
    height: auto;
  }
  .acc-panel__content .step__dur,
  .acc-panel__content .step__title,
  .acc-panel__content .step__desc,
  .grid-12 > [class*="col-"] .step__dur,
  .grid-12 > [class*="col-"] .step__title,
  .grid-12 > [class*="col-"] .step__desc {
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  .step-flow {
    grid-auto-flow: row;
    gap: var(--sp-6);
  }
  .step {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: var(--sp-4);
    text-align: left;
    align-items: start;
  }
  .step__node {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin: 0;
    grid-row: 1 / span 3;
  }
  .step:not(:last-child)::after {
    top: 44px;
    bottom: calc(var(--sp-6) * -1);
    left: 17px;
    right: auto;
    width: var(--bw-2);
    height: auto;
  }
  .step__title {
    margin-top: var(--sp-2);
  }
  .step__dur,
  .step__title,
  .step__desc {
    grid-column: 2;
  }
}

/* ---- 14. 타임라인 세로형 (§4.10) ------------------------------------ */
.timeline-v {
  position: relative;
}
/* 세로 타임라인 옆 미디어는 스크롤을 따라 붙는다.
   7단계 타임라인(약 800px) 옆에 324px 이미지가 상단에만 붙어 있어
   우측 하단이 500px 가까이 비었다(실측 2026-08-09, #s-process 1,091px). */
@media (min-width: 1024px) {
  .timeline-v__aside {
    position: sticky;
    top: calc(var(--nav-h) + var(--sp-6));
  }
}
.timeline-v::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: var(--bw-2);
  background: var(--navy-200);
}
.timeline-v__item {
  position: relative;
  padding-left: var(--sp-8);
  padding-bottom: var(--sp-8);
}
.timeline-v__item:last-child {
  padding-bottom: 0;
}
.timeline-v__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: var(--r-full);
  background: var(--navy-800);
}
.timeline-v__item.is-active::before {
  left: -1px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border: 2px solid var(--success);
}
.timeline-v__period {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan-700);
  font-variant-numeric: tabular-nums;
}
.timeline-v__title {
  margin-top: var(--sp-1);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.timeline-v__body {
  margin-top: var(--sp-1);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- 15. 타임라인 수평형 (§4.10 — 공고 캘린더) ---------------------- */
.timeline-h {
  overflow-x: auto;
}
.timeline-h__inner {
  /* 헤드 176px + 12개월 × 최소 62px. 이보다 좁으면 바 라벨이 잘린다.
     좁은 화면에서는 .timeline-h 가 가로 스크롤한다. */
  min-width: 920px;
}
.timeline-h__scale {
  display: grid;
  grid-template-columns: 176px repeat(12, minmax(0, 1fr));
  font-size: 12px;
  color: var(--dv-tick);
  font-variant-numeric: tabular-nums;
  padding-bottom: var(--sp-2);
}
.timeline-h__scale span {
  text-align: left;
}
.timeline-h__row {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: center;
  border-top: var(--bw-1) solid var(--dv-grid);
}
.timeline-h__lanehead {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding-right: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.timeline-h__lane {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  height: 44px;
}
.timeline-h__bar {
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--navy-600);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.timeline-h__bar.is-upcoming {
  /* 접수 예정 = 점선 구분 (§4.10) */
  background: transparent;
  border: 1.5px dashed var(--navy-400);
  color: var(--text-secondary);
}

/* ---- 16. 차트 공통 (§4.11) ------------------------------------------ */
.chart {
  width: 100%;
}
.chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.chart text {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-label);
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}
.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}
.chart-legend__swatch.is-line {
  height: 2px;
  width: 14px;
  border-radius: 0;
}
.chart-legend__swatch.is-dashed {
  background: transparent;
  border: 1.5px dashed var(--dv-active);
}
.chart-tooltip {
  display: inline-block;
  background: rgba(20, 24, 33, 0.94);
  color: var(--text-inverse); /* 스펙 리터럴 §4.11 */
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: var(--shadow-2);
}
/* SVG 내부 클래스 */
.c-grid {
  stroke: var(--dv-grid);
  stroke-width: 1;
}
.c-axis {
  stroke: var(--dv-axis);
  stroke-width: 1;
}
.c-tick {
  fill: var(--dv-tick);
  font-size: 12px;
}
.c-label {
  fill: var(--dv-label);
  font-size: 12px;
  font-weight: 600;
}
.c-label--strong {
  fill: var(--dv-label);
  font-size: 13px;
  font-weight: 700;
}
.c-label--active {
  fill: var(--dv-active);
  font-size: 12px;
  font-weight: 600;
}
.c-bar {
  fill: var(--dv-cat-2);
}
.c-bar--cat1 {
  fill: var(--dv-cat-1);
}
.c-bar--active {
  fill: none;
  stroke: var(--dv-active);
  stroke-width: 2;
  stroke-dasharray: 4 3;
} /* 추진 중 */
.c-line {
  fill: none;
  stroke: var(--navy-800);
  stroke-width: 2;
}
.c-line--active {
  fill: none;
  stroke: var(--dv-active);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.c-area {
  fill: var(--navy-800);
  opacity: 0.08;
}
.c-dot {
  fill: var(--navy-800);
  stroke: var(--surface);
  stroke-width: 2;
}
.c-dot--active {
  fill: var(--dv-active);
  stroke: var(--surface);
  stroke-width: 2;
}
.c-seg {
  fill: none;
  stroke-width: 28;
}
/* SVG fill·stroke 색 유틸 (presentation attribute는 var() 불가 → 클래스로) */
.c-fill-cat1 {
  fill: var(--dv-cat-1);
}
.c-fill-cat2 {
  fill: var(--dv-cat-2);
}
.c-fill-cat3 {
  fill: var(--dv-cat-3);
}
.c-fill-cat4 {
  fill: var(--dv-cat-4);
}
.c-fill-cat5 {
  fill: var(--dv-cat-5);
}
.c-stroke-cat1 {
  stroke: var(--dv-cat-1);
}
.c-stroke-cat2 {
  stroke: var(--dv-cat-2);
}
.c-stroke-cat3 {
  stroke: var(--dv-cat-3);
}
.c-stroke-cat4 {
  stroke: var(--dv-cat-4);
}
.c-stroke-cat5 {
  stroke: var(--dv-cat-5);
}
/* 레전드 스와치 색 유틸 */
.sw-cat1 {
  background: var(--dv-cat-1);
}
.sw-cat2 {
  background: var(--dv-cat-2);
}
.sw-cat3 {
  background: var(--dv-cat-3);
}
.sw-cat4 {
  background: var(--dv-cat-4);
}
.sw-cat5 {
  background: var(--dv-cat-5);
}
.sw-navy {
  background: var(--navy-800);
}
/* 차트·타임라인 공용 각주 (표는 .matrix-foot) */
.fig-foot {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-tertiary);
}
.donut-layout {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.donut-figure {
  width: 200px;
  flex: none;
  position: relative;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.donut-center__total {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.donut-center__label {
  font-size: 12px;
  color: var(--text-tertiary);
}
.donut-legend {
  flex: 1;
  min-width: 220px;
}
.donut-legend li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
}
.donut-legend li + li {
  border-top: var(--bw-1) solid var(--border);
}
.donut-legend__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
}
.donut-legend__val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .donut-figure {
    width: 160px;
    margin-inline: auto;
  }
  .donut-layout {
    gap: var(--sp-5);
  }
}

/* ---- 17. 아코디언 (§4.12) ------------------------------------------- */
.accordion {
  border-top: var(--bw-1) solid var(--border);
}
.acc-item {
  border-bottom: var(--bw-1) solid var(--border);
}
.acc-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  width: 100%;
  min-height: 64px;
  padding: 20px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.acc-head:hover {
  background: var(--slate-50);
}
.acc-item.is-open .acc-head {
  background: var(--slate-50);
  box-shadow: inset 3px 0 0 var(--navy-800);
}
.acc-head__title {
  flex: 1;
  min-width: 160px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-800);
}
.acc-head__amount {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.acc-head__chev {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--slate-600);
  transition: transform var(--dur-base) var(--ease-out);
}
.acc-head__chev svg {
  display: block;
  width: 100%;
  height: 100%;
}
.acc-item.is-open .acc-head__chev {
  transform: rotate(180deg);
}
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-inout);
}
.acc-item.is-open .acc-panel {
  grid-template-rows: 1fr;
}
.acc-panel__inner {
  overflow: hidden;
  min-height: 0;
}
.acc-panel__content {
  background: var(--slate-50);
  padding: var(--sp-8);
}
@media (max-width: 767px) {
  .acc-head {
    padding: 16px var(--sp-4);
  }
  .acc-panel__content {
    padding: var(--sp-5);
  }
}
@media print {
  .acc-panel {
    grid-template-rows: 1fr;
  } /* 인쇄 시 전체 펼침 */
}

/* ---- 18. 필터 칩 (§4.13) -------------------------------------------- */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: var(--chip-h);
  padding: 0 16px;
  border-radius: var(--r-full);
  border: var(--bw-1) solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.chip__count {
  font-weight: 400;
}
.chip:hover {
  background: var(--slate-100);
}
.chip.is-selected {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--text-inverse);
}
.chip.is-selected:hover {
  background: var(--navy-700);
}
@media (max-width: 767px) {
  .chip-group.is-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--sp-1);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 calc(100% - 24px),
      transparent
    );
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .chip-group.is-scroll::-webkit-scrollbar {
    display: none;
  }
}

/* ---- 19. 태그 (§4.14) ------------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  height: var(--tag-h);
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.tag--neutral {
  background: var(--slate-100);
  color: var(--slate-800);
}
.tag--info {
  background: var(--cyan-100);
  color: var(--cyan-800);
}
.tag--success {
  background: var(--success-bg);
  color: var(--success);
}
.tag--warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.tag--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---- 20. 폼 요소 (§4.15) --------------------------------------------- */
.form-stack {
  max-width: 520px;
}
.form-q {
  margin-bottom: var(--sp-8);
}
.q-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.q-label .q-num {
  font-variant-numeric: tabular-nums;
}
.field {
  margin-bottom: var(--sp-5);
}
.field__label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.field__required {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
}
.input,
.select {
  width: 100%;
  height: var(--field-h);
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary); /* 16px = iOS 줌 방지 */
  background: var(--surface);
  border: var(--bw-1) solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input::placeholder {
  color: var(--text-tertiary);
}
.input:hover,
.select:hover {
  border-color: var(--slate-500);
}
.input:focus-visible,
.select:focus-visible {
  border-color: var(--focus-ring);
}
.input:disabled,
.select:disabled {
  background: var(--slate-100);
  color: var(--slate-400);
}
.select-wrap {
  position: relative;
}
.select {
  appearance: none;
  padding-right: 44px;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  pointer-events: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--slate-600);
  border-bottom: 2px solid var(--slate-600);
  transform: translateY(-70%) rotate(45deg);
}
.help-text {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.field.is-error .input,
.field.is-error .select {
  border-color: var(--danger);
}
.error-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
}
.error-msg svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* 라디오·체크박스 카드형 */
.choice-group {
  display: grid;
  gap: 10px;
}
.choice-group.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 767px) {
  .choice-group.cols-2 {
    grid-template-columns: 1fr;
  }
}
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: 14px 16px;
  border: var(--bw-1) solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  font-size: 15px;
  color: var(--text-primary);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.choice:hover {
  border-color: var(--slate-500);
}
.choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice__control {
  flex: none;
  width: 20px;
  height: 20px;
  position: relative;
  border: 1.5px solid var(--slate-400);
  border-radius: var(--r-full);
  background: var(--surface);
}
.choice--check .choice__control {
  border-radius: 4px;
}
.choice:has(.choice__input:checked) {
  border-color: var(--navy-800);
  background: var(--navy-50);
}
.choice:has(.choice__input:checked) .choice__control {
  border-color: var(--navy-800);
}
.choice:has(.choice__input:checked):not(.choice--check)
  .choice__control::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--r-full);
  background: var(--navy-800);
}
.choice--check:has(.choice__input:checked) .choice__control {
  background: var(--navy-800);
}
.choice--check:has(.choice__input:checked) .choice__control::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--text-inverse);
  border-bottom: 2px solid var(--text-inverse);
  transform: rotate(-45deg);
}
.choice:has(.choice__input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* 진행률 인디케이터 (IA §2.6 — "N/4 답변 완료" + 체크 점 4개) */
.form-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 16px;
  background: var(--surface);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-1);
}
.form-progress.is-sticky {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-3));
  z-index: 50;
}
.form-progress__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.form-progress__dots {
  display: flex;
  gap: 6px;
}
.form-progress__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--slate-300);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.form-progress__dot.is-done {
  background: var(--navy-800);
}

/* ---- 21. 고지·디스클레이머 블록 (§4.16) ------------------------------ */
.notice {
  background: var(--surface-alt);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.band--alt .notice {
  background: var(--surface);
}
.notice--civil {
  background: var(--navy-50);
  border: 0;
  border-left: 3px solid var(--navy-800);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.notice-footnote {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

/* ---- 22. 미디어 프레임 (§4.17) --------------------------------------- */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: var(--bw-1) solid var(--border);
  background: var(--slate-100);
}
.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.r-21x9 {
  aspect-ratio: 21/9;
}
.r-16x9 {
  aspect-ratio: 16/9;
}
.r-4x3 {
  aspect-ratio: 4/3;
}
.r-3x2 {
  aspect-ratio: 3/2;
}
.r-1x1 {
  aspect-ratio: 1/1;
}
.r-3x4 {
  aspect-ratio: 3/4;
}
.r-16x10 {
  aspect-ratio: 16/10;
}
.media-frame.is-placeholder {
  border: 1.5px dashed var(--slate-400);
}
.media-ph {
  position: absolute;
  inset: 0 0 var(--sp-8) 0; /* 하단 여백 = 우하단 영상 토글과 텍스트 겹침 방지 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-4);
  text-align: center;
}
.media-ph__slot {
  display: inline-flex;
  align-items: center;
  height: var(--tag-h);
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--navy-100);
  color: var(--navy-800);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.media-ph__line {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--slate-600);
}
.media-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  margin-top: 10px;
}
.media-caption__text {
  font-size: 13px;
  color: var(--text-tertiary);
}
/* 촬영 출처는 실사 촬영이 확정되기 전까지 화면에서 감춘다.
   마크업은 남겨 두므로 값이 정해지면 이 display 한 줄만 지우면 된다.
   (AI 생성물에 "사진: 자사 촬영"이라 적혀 있던 것을 2026-08-09 에 걷어냈다) */
.media-caption__src {
  display: none;
  font-size: 12px;
  color: var(
    --text-tertiary
  ); /* slate-400 은 회색 밴드 위 2.12:1 — 12px 본문에 쓸 수 없다 */
  flex: none;
}
/* ============================================================
   상담신청 폼 — PC 2열 + 모바일 바텀시트 (2026-08-09)
   4문항을 1열로 쌓으면 PC 에서 한 화면에 안 들어온다.
   좌: 자가진단 2×2 / 우 380px: 연락처·제출 sticky.
   모바일은 선택형 3문항을 바텀시트로 접어 "질문 + 고른 답" 한 줄만 남긴다.
   입력 요소는 원본 radio/checkbox 그대로다 — 시트는 그것을 옮겨 담을 뿐이라
   제출값·키보드·스크린리더가 전부 유지된다.
   ============================================================ */
.fx {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
  max-width: none; /* .form-stack 의 520px 제한 해제 — 2열은 컨테이너 전폭을 쓴다 */
}
@media (min-width: 1024px) {
  .fx {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--sp-10);
  }
  .fx__aside {
    position: sticky;
    top: calc(var(--nav-h) + var(--sp-4));
  }
}
.fx__qs {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 768px) {
  .fx__qs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fx__qs > .form-q--wide {
    grid-column: 1 / -1;
  }
  .fx__qs > .form-q--wide .choice-group.cols-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.fx .form-q {
  margin: 0;
  padding: var(--sp-5);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.fx__aside .form-q {
  background: var(--slate-50);
}
.fx__sum {
  display: flex;
  flex-direction: column;
  margin: var(--sp-3) 0 var(--sp-5);
}
.fx__sum-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text-secondary);
}
.fx__sum-k {
  flex: none;
  white-space: nowrap;
}
.fx__sum-row b {
  color: var(--text-heading);
  font-weight: 700;
  text-align: right;
  min-width: 0;
}
.fx__sum-row .is-empty {
  color: var(--text-tertiary);
  font-weight: 400;
}
.field__optional {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
}

/* ---- 바텀시트 (모바일 전용 · JS 켜졌을 때만) ---- */
.sheet-trigger {
  display: none;
}
.sheet__grip,
.sheet__title,
.sheet__done {
  display: none;
}
@media (max-width: 767px) {
  html.js .form-q--sheet.is-sheet > .q-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.js .form-q--sheet.is-sheet > .sheet-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 56px;
    padding: 10px var(--sp-4);
    background: var(--surface);
    border: var(--bw-1) solid var(--border-strong);
    border-radius: var(--r-md);
    text-align: left;
    cursor: pointer;
    font: inherit;
  }
  html.js .form-q--sheet.is-sheet > .sheet-trigger.is-filled {
    border-color: var(--navy-600);
  }
  .sheet-trigger__k {
    display: block;
    font-size: 13px;
    color: var(--text-tertiary);
  }
  .sheet-trigger__v {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading);
  }
  .sheet-trigger__v.is-empty {
    font-weight: 400;
    color: var(--text-tertiary);
  }
  .sheet-trigger__chev {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--slate-600);
  }

  html.js .form-q--sheet.is-sheet > .form-q__body {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 81;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    padding: var(--sp-3) var(--sp-5)
      calc(var(--sp-6) + env(safe-area-inset-bottom));
    max-height: 82vh;
    overflow-y: auto;
    transform: translateY(101%);
    visibility: hidden;
    transition:
      transform var(--dur-slow) var(--ease-out),
      visibility 0s linear var(--dur-slow);
  }
  html.js .form-q--sheet.is-sheet.is-open > .form-q__body {
    transform: translateY(0);
    visibility: visible;
    transition:
      transform var(--dur-slow) var(--ease-out),
      visibility 0s;
  }
  html.js .form-q--sheet.is-sheet .sheet__grip {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
    margin: 0 auto var(--sp-4);
  }
  html.js .form-q--sheet.is-sheet .sheet__title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: var(--sp-4);
  }
  html.js .form-q--sheet.is-sheet .sheet__done {
    display: inline-flex;
    margin-top: var(--sp-5);
  }
  html.js .form-q--sheet.is-sheet .choice {
    min-height: 52px;
  }
  .sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(11, 27, 54, 0.5);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }
  .sheet-scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--dur-base) var(--ease-out),
      visibility 0s;
  }
}

/* ============================================================
   섹션 배경 이미지 — "카드 부양" (2026-08-09 채택)
   실사 이미지를 본문 아래 독립 블록으로 두면 PC 에서 섹션 높이의
   37~57% 를 먹는다(실측 8곳·합계 4,864px). 배경으로 내리고
   콘텐츠 카드를 흰색 solid 로 띄운다.
   텍스트가 전부 solid 위에 놓이므로 사진 위 대비를 따로 검증할 필요가 없다.
   ============================================================ */
.bgsec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.bgsec > .container {
  position: relative;
  z-index: 2;
}
.bgsec__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 42%;
}
/* 상하 끝은 거의 불투명 → 인접 밴드와 경계가 튀지 않는다.
   가운데 82% 구간에서만 사진이 보인다. */
.bgsec__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.82) 34%,
    rgba(255, 255, 255, 0.82) 66%,
    rgba(255, 255, 255, 0.97) 100%
  );
}
.bgsec .data-card,
.bgsec .step-flow,
.bgsec .chart,
.bgsec .matrix-wrap,
.bgsec .kpi-row,
.bgsec .timeline-v {
  background: var(--surface);
  box-shadow: var(--shadow-2);
  border-radius: var(--r-lg);
}
.bgsec .step-flow {
  padding: var(--sp-6) var(--sp-5);
}
.bgsec .chart,
.bgsec .timeline-v {
  padding: var(--sp-4);
}
.bgsec .kpi-row {
  padding: 0 var(--sp-4);
}
/* 슬롯 ID 배지 — 발주표(assets-order)와 1:1 대응을 화면에서 잃지 않게 */
.bgsec__badge {
  position: absolute;
  left: var(--page-margin);
  bottom: var(--sp-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: rgba(18, 41, 77, 0.86);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  /* 모바일은 사진이 세로로 크게 잘려 텍스트 뒤가 산만해진다.
     스크림을 더 올려 질감만 남긴다. */
  .bgsec__scrim {
    background: rgba(255, 255, 255, 0.93);
  }
  .bgsec .step-flow {
    padding: var(--sp-5) var(--sp-4);
  }
}

/* 스크림 — 이미지 위 텍스트를 얹는 경우에만 (§3.3) */
.media-frame__scrim {
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  pointer-events: none;
}
.media-frame__caption-overlay {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-3);
  z-index: 1;
  color: var(--text-inverse);
  font-size: 13px;
  font-weight: 600;
}

/* ---- 23. CTA 밴드 (IA §1.4) ------------------------------------------ */
.cta-band {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: center;
  padding-block: var(--sp-16);
}
.cta-band__text {
  grid-column: span 7;
}
.cta-band__action {
  grid-column: span 5;
}
.cta-band__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-h2);
  color: var(--text-inverse);
}
.cta-band__sub {
  margin-top: var(--sp-3);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-inverse-muted);
}
.intake-strip {
  margin-bottom: var(--sp-5);
}
.intake-strip__cells {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
}
.intake-strip__cell {
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
}
.intake-strip__cell.is-open {
  background: var(--accent);
} /* 접수 구간 표시 (IA §1.4) */
/* 접수창 막대 라벨은 11px 를 유지한다. 12px 로 올리면 좁은 막대에서 날짜가
   잘리고(10개 중 1개 실측), 같은 일정 전문이 바로 아래 문단에 텍스트로 있다.
   차트 데이터 라벨이라 WCAG 최소 글꼴 요건에도 걸리지 않는다. */
.intake-strip__months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-inverse-faint);
  font-variant-numeric: tabular-nums;
}
.intake-strip__note {
  margin-top: var(--sp-2);
  font-size: 12px;
  color: var(--text-inverse-faint);
}
@media (max-width: 767px) {
  .cta-band__inner {
    grid-template-columns: 1fr;
  }
  .cta-band__text,
  .cta-band__action {
    grid-column: 1 / -1;
  }
  .cta-band__action .btn {
    width: 100%;
  }
}

/* ---- 24. 푸터 (§4.18) ------------------------------------------------- */
.site-footer {
  background: var(--surface-footer);
  color: var(--text-inverse);
  padding-top: 56px;
  padding-bottom: 40px;
  font-size: 14px;
  line-height: 1.65;
}
.footer-grid {
  display: grid;
  grid-template-columns: 5fr 3fr 4fr;
  gap: var(--grid-gutter);
}
/* 1024~1279 구간에서 사업자정보 열이 299px 로 좁아져 주소·연락처가
   중간에 끊겼다(실측). 이 구간만 비율을 바꿔 한 줄에 담는다. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-grid {
    grid-template-columns: 4fr 2fr 6fr;
  }
}
.footer-brand__line {
  margin-top: var(--sp-4);
  color: var(--text-inverse-muted);
}
.footer-notice {
  margin-top: var(--sp-4);
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06); /* 스펙 리터럴 §4.18 */
  border-left: 3px solid var(--cyan-400);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-inverse);
}
.footer-col__title {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-label);
  color: var(--text-inverse-faint);
  margin-bottom: var(--sp-3);
}
.footer-menu li + li {
  margin-top: var(--sp-2);
}
.footer-menu a {
  color: var(--text-inverse-muted);
  text-decoration: none;
}
.footer-menu a:hover {
  color: var(--text-inverse);
}
.footer-info {
  color: var(--text-inverse-faint);
  font-size: 13px;
}
.footer-info li + li {
  margin-top: var(--sp-1);
}
.footer-bottom {
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: var(--bw-1) solid rgba(255, 255, 255, 0.12); /* 스펙 리터럴 §4.18 */
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  font-size: 12px;
  color: var(--text-inverse-faint);
}
.footer-bottom a {
  color: var(--text-inverse-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* ---- 25. 모바일 하단 고정바 (IA §1.3 — 상담신청 제외 5페이지) --------- */

/* ---- 26. 모션 (§6 허용 목록 전용) ------------------------------------- */
/* 스크롤 진입: opacity 0→1 + translateY(12px→0). JS 활성 시에만 숨김 */
html.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal[data-reveal-order="2"] {
  transition-delay: 80ms;
}
.reveal[data-reveal-order="3"] {
  transition-delay: 160ms;
}
.reveal[data-reveal-order="4"] {
  transition-delay: 240ms;
}
/* 차트 최초 드로우: 바 성장 480ms 1회 (§6.2-6) */
html.js .chart[data-draw] .c-bar,
html.js .chart[data-draw] .c-bar--active,
html.js .chart[data-draw] .c-bar--cat1 {
  transform: scaleY(0);
  transform-origin: bottom;
  transform-box: fill-box;
  transition: transform var(--dur-reveal) var(--ease-out);
}
html.js .chart[data-draw].is-drawn .c-bar,
html.js .chart[data-draw].is-drawn .c-bar--active,
html.js .chart[data-draw].is-drawn .c-bar--cat1 {
  transform: scaleY(1);
}
html.js .chart[data-draw] .c-hbar {
  transform: scaleX(0);
  transform-origin: left;
  transform-box: fill-box;
  transition: transform var(--dur-reveal) var(--ease-out);
}
html.js .chart[data-draw].is-drawn .c-hbar {
  transform: scaleX(1);
}
html.js .chart[data-draw] .c-seg {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out);
}
html.js .chart[data-draw].is-drawn .c-seg {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
  }
  html.js .chart[data-draw] .c-bar,
  html.js .chart[data-draw] .c-bar--active,
  html.js .chart[data-draw] .c-bar--cat1,
  html.js .chart[data-draw] .c-hbar {
    transform: none;
  }
  html.js .chart[data-draw] .c-seg {
    opacity: 1;
  }
}

/* ---- 27. 스페이싱 유틸 (인라인 style 대체 — 토큰 참조) ---------------- */
.mt-2 {
  margin-top: var(--sp-2);
}
.mt-3 {
  margin-top: var(--sp-3);
}
.mt-4 {
  margin-top: var(--sp-4);
}
.mt-5 {
  margin-top: var(--sp-5);
}
.mt-6 {
  margin-top: var(--sp-6);
}
.mt-8 {
  margin-top: var(--sp-8);
}
.mb-3 {
  margin-bottom: var(--sp-3);
}
.mb-5 {
  margin-bottom: var(--sp-5);
}
.mb-6 {
  margin-bottom: var(--sp-6);
}
.mb-8 {
  margin-bottom: var(--sp-8);
}
.w-full {
  width: 100%;
}

/* 폼 fieldset 리셋 (.form-q를 fieldset으로 쓸 때) */
fieldset.form-q {
  border: 0;
  padding: 0;
  min-width: 0;
}
legend.q-label {
  padding: 0;
}

/* 아코디언 확장 영역 인용·본문 텍스트 */
.acc-panel__quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.acc-panel__quote + .notice {
  margin-top: var(--sp-4);
}

/* 푸터 락업 전체를 백색 currentColor로 (mono 심볼 포함) */
.logo-lockup--footer {
  color: var(--text-inverse);
}
.logo-lockup--footer .logo-lockup__symbol {
  color: var(--text-inverse);
}

/* ============================================================
   접근성 보정 — 터치 히트영역 44×44 확보 (DESIGN.md §7)
   시각 치수는 그대로 두고 ::after 로 히트영역만 확장한다.
   대상: 디자인상 44px 미만인 요소(칩 36 / sm 버튼 36 / 영상토글 32 /
        로고 락업 28~32 / 푸터·GNB 텍스트 링크)
   ============================================================ */
@media (hover: none), (max-width: 1023px) {
  .chip,
  .btn.sm,
  .media-toggle,
  .logo-lockup,
  .gnb__link,
  .link,
  .footer-menu a,
  .footer-bottom a {
    position: relative;
  }
  .chip::after,
  .btn.sm::after,
  .media-toggle::after,
  .logo-lockup::after,
  .gnb__link::after,
  .link::after,
  .footer-menu a::after,
  .footer-bottom a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
  }
  /* 표 셀 안 텍스트 링크(«사례 6 · 사례 13 · 사례 14»)는 가로로 붙고 줄바꿈까지 되어
     ::after 확장영역이 상하좌우로 겹친다. 앞 링크가 뒤 링크에 탭을 뺏겼다(실측).
     확장영역 대신 링크 자체를 44px 로 키워 겹침을 원천 제거한다. */
  .matrix-table td .link {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 6px;
  }
  .matrix-table td .link::after {
    content: none;
  }
  /* 세로로 촘촘히 쌓인 링크는 확장영역이 겹치지 않도록 간격 확보.
     링크 높이 23px + 간격이 44px 를 넘어야 인접 항목에 히트영역을 뺏기지 않는다.
     --sp-3(12px)면 피치가 35px 라 9px 씩 겹쳤다(실측). --sp-6 으로 올려 47px. */
  .footer-menu li + li {
    margin-top: var(--sp-6);
  }
  .footer-bottom a {
    display: inline-block;
  }
}

/* 산점도(cases) — 모바일 터치 예외 처리
   점 간 최소 간격이 390px에서 6.6px라 히트영역을 키우면 오탭이 늘어난다.
   WCAG 2.5.8 예외(Equivalent·Essential) 적용: 동일 링크가 아래 사례 카드에 전부 존재하고,
   점의 위치 자체가 데이터(매출×확보액)라 이동·확대가 불가능하다.
   모바일에서는 포인터 활성화만 해제하고 키보드 포커스·스크린리더 라벨은 유지한다. */
@media (max-width: 767px) {
  [data-case-link] {
    pointer-events: none;
  }
}
/* 모바일 전용 안내 문구 */
.u-mobile-only {
  display: none;
}
@media (max-width: 767px) {
  .u-mobile-only {
    display: inline;
  }
}

/* ============================================================
   헤더 브랜드 태그라인 — 로고 오른쪽, 세로 구분선 + 2줄
   1행 상환 의무 없는 지원금 / 2행 착수금 0원 · 선정 시에만 정산
   ============================================================ */
.brand-tagline {
  display: none; /* 데스크톱에서만 노출 (아래 미디어쿼리) */
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  margin: 0 0 0 16px;
  padding-left: 16px;
  border-left: var(--bw-1) solid var(--border);
  white-space: nowrap;
}
.brand-tagline__main {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}
.brand-tagline__sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-tertiary);
}
@media (min-width: 1024px) {
  .brand-tagline {
    display: flex;
  }
}
/* 내비 축소 시에도 2줄이 들어가도록 로고와 함께 높이 여유를 유지한다 */
.navbar.is-condensed .brand-tagline__main {
  font-size: 12px;
}
.navbar.is-condensed .brand-tagline__sub {
  font-size: 11px;
}

/* ============================================================
   사례 카드 그리드 (.accordion.cases-grid)
   목록형 → 카드형. 카드를 열면 그 자리에서 전체 폭으로 펼쳐진다.
   DOM 은 아코디언 구조 그대로라 접근성 속성(aria-expanded/controls)이 유지된다.
   ============================================================ */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}
.cases-grid .acc-item {
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.cases-grid .acc-item:hover {
  border-color: var(--navy-300);
  box-shadow: var(--shadow-1);
}
.cases-grid .acc-item.is-open {
  grid-column: 1 / -1;
  border-color: var(--navy-800);
}
/* 카드 얼굴 — 세로 스택 */
.cases-grid .acc-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 168px;
  padding: 20px;
  position: relative;
}
.cases-grid .acc-head__title {
  flex: none;
  min-width: 0;
  font-size: 18px;
  line-height: 1.4;
  word-break: keep-all;
}
.cases-grid .acc-head__amount {
  margin-top: auto;
  flex-wrap: wrap;
}
.cases-grid .acc-head__chev {
  position: absolute;
  right: 18px;
  bottom: 18px;
}
/* 펼친 카드는 얼굴을 가로형으로 되돌려 상세와 위계를 맞춘다.
   단 768px 이상에서만. 모바일은 카드가 닫혀 있어도 이미 전체 폭이라
   가로형으로 바꿔 봐야 얻는 게 없고, 태그 줄(flex:0 0 auto·159px)이
   335px 행을 선점해 제목이 5px 로 찌그러진다(실측 2026-08-09, 393px). */
@media (min-width: 768px) {
  .cases-grid .acc-item.is-open .acc-head {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    min-height: 64px;
    padding: 20px 24px;
  }
  .cases-grid .acc-item.is-open .acc-head__title {
    flex: 1;
  }
  .cases-grid .acc-item.is-open .acc-head__amount {
    margin-top: 0;
  }
  .cases-grid .acc-item.is-open .acc-head__chev {
    position: static;
  }
}
@media (max-width: 1023px) {
  .cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .cases-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .cases-grid .acc-head {
    min-height: 0;
  }
}

/* ============================================================
   연차 순차 모션 — 1년차부터 한 해씩 그래프가 완성된다
   막대가 자란 뒤 금액 라벨이 뜨고, 다음 해로 넘어간다.
   ============================================================ */
html.js .chart[data-seq] .c-bar,
html.js .chart[data-seq] .c-bar--active {
  transition-delay: calc(var(--seq, 0) * 300ms);
}
html.js .chart[data-seq] .c-label,
html.js .chart[data-seq] .c-label--active,
html.js .chart[data-seq] .c-tick {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--seq, 0) * 300ms + 240ms);
}
html.js .chart[data-seq].is-drawn .c-label,
html.js .chart[data-seq].is-drawn .c-label--active,
html.js .chart[data-seq].is-drawn .c-tick {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html.js .chart[data-seq] .c-bar,
  html.js .chart[data-seq] .c-bar--active,
  html.js .chart[data-seq] .c-label,
  html.js .chart[data-seq] .c-label--active,
  html.js .chart[data-seq] .c-tick {
    transition-delay: 0s;
    opacity: 1;
  }
}

/* 연차 모션 재생 리셋 — is-drawn 제거도 트랜지션을 타기 때문에
   되감기 없이 즉시 0으로 되돌리려면 이 구간만 트랜지션을 꺼야 한다. */
html.js .chart[data-seq].is-resetting *,
html.js .chart[data-seq].is-resetting {
  transition: none !important;
}

/* ============================================================
   사례 카드 얼굴 — 홈 H5 그래프형 카드와 동일 구조
   태그 → 제목 → 인용구 → 누적 스파크라인 → 금액
   button 안이라 모든 요소를 span 으로 두고 display 로 블록화한다.
   ============================================================ */
.cases-grid .acc-head__tags,
.cases-grid .acc-head__quote,
.cases-grid .acc-head .chart {
  display: block;
  width: 100%;
}
.cases-grid .acc-head__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cases-grid .acc-head__quote {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  word-break: keep-all;
}
.cases-grid .acc-head .chart {
  margin-top: 4px;
}
.cases-grid .acc-head .chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.cases-grid .acc-head {
  min-height: 0;
  padding-bottom: 52px; /* 셰브론 자리 */
}
/* 펼친 카드에서는 얼굴을 요약 행으로 되돌린다 */
.cases-grid .acc-item.is-open .acc-head__quote,
.cases-grid .acc-item.is-open .acc-head .chart {
  display: none;
}
.cases-grid .acc-item.is-open .acc-head {
  padding-bottom: 20px;
}
.cases-grid .acc-item.is-open .acc-head__tags {
  width: auto;
  flex: none;
}

/* ============================================================
   사례 그래프 카드 — 결과 우선 · 트리거 재생
   기본은 완성된 그래프를 보여준다. 18장이 한꺼번에 움직이면 산만하다.
   PC 는 카드 호버, 모바일은 카드를 열 때만 1년차부터 다시 그린다.
   대상: 홈 H5 케이스 카드 + 성공사례 카드의 스파크라인
   ============================================================ */
html.js .chart--spark .c-line,
html.js .chart--spark .c-line--active {
  stroke-dasharray: var(--len, 0) var(--len, 0);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 620ms var(--ease-out);
}
html.js .chart--spark .c-line--active {
  /* 추진 중 구간은 확정 선이 다 그려진 뒤에 이어진다 */
  transition-delay: 560ms;
}
html.js .chart--spark .c-dot,
html.js .chart--spark .c-dot--active,
html.js .chart--spark .c-label,
html.js .chart--spark .c-label--active,
html.js .chart--spark .c-tick {
  opacity: 1;
  transition: opacity 220ms var(--ease-out);
}

/* 재생 중(is-playing)일 때만 0 → 완성 */
html.js .chart--spark.is-playing .c-line,
html.js .chart--spark.is-playing .c-line--active {
  stroke-dashoffset: var(--len, 0);
}
html.js .chart--spark.is-playing .c-dot,
html.js .chart--spark.is-playing .c-dot--active,
html.js .chart--spark.is-playing .c-label,
html.js .chart--spark.is-playing .c-label--active,
html.js .chart--spark.is-playing .c-tick {
  opacity: 0;
}
/* 점·라벨은 선이 지나간 뒤 순서대로 */
html.js .chart--spark .c-dot,
html.js .chart--spark .c-dot--active {
  transition-delay: calc(var(--seq, 0) * 180ms + 120ms);
}
html.js .chart--spark .c-label,
html.js .chart--spark .c-label--active,
html.js .chart--spark .c-tick {
  transition-delay: 700ms;
}
html.js .chart--spark.is-playing .c-line,
html.js .chart--spark.is-playing .c-line--active,
html.js .chart--spark.is-playing .c-dot,
html.js .chart--spark.is-playing .c-dot--active,
html.js .chart--spark.is-playing .c-label,
html.js .chart--spark.is-playing .c-label--active,
html.js .chart--spark.is-playing .c-tick {
  transition: none; /* 리셋 순간은 즉시 */
}
@media (prefers-reduced-motion: reduce) {
  html.js .chart--spark .c-line,
  html.js .chart--spark .c-line--active {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  html.js .chart--spark .c-dot,
  html.js .chart--spark .c-dot--active,
  html.js .chart--spark .c-label,
  html.js .chart--spark .c-label--active,
  html.js .chart--spark .c-tick {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ============================================================
   접수창 스트립 — 모션그래픽
   전하려는 것: "미리 준비해 둬야 공고가 떴을 때 지원하고 확보한다"
   1) 준비 구간이 접수창 앞에서 차오른다
   2) 접수창이 열린다
   3) 지원 → 확보
   준비가 안 된 경우는 창을 지나쳐 다음 접수까지 기다린다.
   ============================================================ */
.intake-strip__stage {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-inverse-muted);
}
.intake-strip__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--dv-cat2, #23a2c8);
  flex: none;
  transition: background-color 300ms var(--ease-out);
}
.intake-strip.s-3 .intake-strip__dot {
  background: var(--accent);
}
.intake-strip.s-4 .intake-strip__dot {
  background: var(--dv-cat2, #23a2c8);
}
.intake-strip__track {
  position: relative;
  height: 8px;
}
.intake-strip__cells {
  position: relative;
  z-index: 1;
}
/* 2026년 실제 접수월 = 1·3·4·6월 (상반기 집중).
   나머지 8개월이 준비 기간이라는 것을 칸 색으로 보여준다.
   오버레이 막대는 지나간 접수창을 덮어서 쓰지 않는다. */
.intake-strip__prep {
  display: none;
}
.intake-strip__cell {
  transition: background-color 300ms var(--ease-out);
}

/* s-2 — 접수 사이 짧은 준비(2·5월) */
.intake-strip.s-2 .intake-strip__cell:nth-child(2),
.intake-strip.s-2 .intake-strip__cell:nth-child(5) {
  background: #23a2c8;
}
/* s-3 — 하반기 7~12월, 좌에서 우로 차오른다 */
.intake-strip.s-3 .intake-strip__cell:nth-child(n + 7) {
  background: #23a2c8;
}
.intake-strip.s-3 .intake-strip__cell:nth-child(7) {
  transition-delay: 0ms;
}
.intake-strip.s-3 .intake-strip__cell:nth-child(8) {
  transition-delay: 110ms;
}
.intake-strip.s-3 .intake-strip__cell:nth-child(9) {
  transition-delay: 220ms;
}
.intake-strip.s-3 .intake-strip__cell:nth-child(10) {
  transition-delay: 330ms;
}
.intake-strip.s-3 .intake-strip__cell:nth-child(11) {
  transition-delay: 440ms;
}
.intake-strip.s-3 .intake-strip__cell:nth-child(12) {
  transition-delay: 550ms;
}
/* 접수창 — 준비가 닿으면 열린다 */
.intake-strip__cell.is-open {
  background: rgba(242, 103, 34, 0.28);
  transition:
    background-color 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out);
}
.intake-strip.s-2 .intake-strip__cell:nth-child(3),
.intake-strip.s-3 .intake-strip__cell:nth-child(3),
.intake-strip.s-4 .intake-strip__cell:nth-child(3),
.intake-strip.s-4 .intake-strip__cell:nth-child(9) {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 103, 34, 0.18);
}
/* 확보 칩 */
.intake-strip__won {
  position: absolute;
  top: -6px;
  /* 접수창(3번째 칸) 을 덮지 않도록 그 오른쪽 빈 구간에 놓는다 */
  left: calc((100% - 33px) / 12 * 3 + 12px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out);
}
.intake-strip.s-3 .intake-strip__won,
.intake-strip.s-4 .intake-strip__won {
  opacity: 1;
  transform: translateY(0);
}
/* 준비바가 길어지는 구간은 조금 더 천천히 */
.intake-strip.s-4 .intake-strip__prep {
  transition-duration: 1400ms;
}
@media (prefers-reduced-motion: reduce) {
  .intake-strip__prep,
  .intake-strip__won,
  .intake-strip__cell.is-open,
  .intake-strip__dot {
    transition: none !important;
  }
}

/* 접수창 스트립 범례 — 색이 무엇을 뜻하는지 그 자리에서 읽히게 */
.intake-strip__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-inverse-muted);
}
.intake-strip__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.intake-strip__legend i {
  width: 12px;
  height: 6px;
  border-radius: 2px;
  flex: none;
}
.intake-strip__legend .lg-prep {
  background: #23a2c8;
}
.intake-strip__legend .lg-open {
  background: var(--accent);
}
.intake-strip__legend .lg-idle {
  background: rgba(255, 255, 255, 0.14);
}
/* lg-idle 은 "아직 지나지 않은 기간" 을 뜻한다 */

/* 접수창(1·3·4·6월) — 준비 규칙보다 뒤에 두어 항상 오렌지를 유지한다 */
.intake-strip .intake-strip__cell.is-open {
  background: rgba(242, 103, 34, 0.3);
}
.intake-strip.s-1 .intake-strip__cell.is-open,
.intake-strip.s-2 .intake-strip__cell.is-open,
.intake-strip.s-3 .intake-strip__cell.is-open {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 103, 34, 0.18);
}
/* 마지막 단계에서 다음 해 첫 접수(1월)를 다시 지목한다 */
.intake-strip.s-3 .intake-strip__cell:nth-child(1) {
  box-shadow: 0 0 0 3px rgba(242, 103, 34, 0.45);
}
.intake-strip.s-3 .intake-strip__dot {
  background: var(--accent);
}

/* 좁은 화면에서 가로 스크롤이 가능하다는 것을 알린다 */
.timeline-h {
  scrollbar-width: thin;
}
@media (max-width: 1023px) {
  .timeline-h::after {
    content: "← 좌우로 밀어서 12개월 전체 보기";
    display: block;
    padding-top: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
  }
}
/* 월 칸이 85px 아래로 좁아지면 바 안의 날짜를 접고 차수만 남긴다.
   컨테이너 1200px(뷰포트 1280 이상)부터 날짜가 들어간다. title 로 전체 기간은 유지. */
@media (max-width: 1279px) {
  .timeline-h__bar {
    font-size: 11px;
  }
  .tl-date {
    display: none;
  }
}

/* ============================================================
   CTA 밴드 배경 미디어 — 전환 직전에 실사 한 장을 깐다
   텍스트 가독성은 다크 스크림으로 확보한다(합성 대비 AA 이상).
   ============================================================ */
.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-band__media .media-frame {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}
.cta-band__media .media-ph {
  height: 100%;
  background: var(--navy-900);
  color: var(--text-inverse-muted);
  border-color: rgba(255, 255, 255, 0.16);
}
.cta-band__media .media-ph__slot {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-inverse);
}
/* 스크림 — 배경 위 텍스트 가독성 확보 */
.cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 27, 54, 0.94) 0%,
    rgba(11, 27, 54, 0.86) 46%,
    rgba(11, 27, 54, 0.72) 100%
  );
}
.cta-band__inner {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .cta-band__media::after {
    background: linear-gradient(
      180deg,
      rgba(11, 27, 54, 0.9) 0%,
      rgba(11, 27, 54, 0.94) 100%
    );
  }
}

/* 영상 예정 배지 — 실사 이미지는 붙었고 영상만 아직인 슬롯 */
.media-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: rgba(11, 27, 54, 0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* CTA 밴드 배경은 이미지가 프레임을 꽉 채워야 한다 */
.cta-band__media .media-frame,
.cta-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 준비 중 카드 — 링크는 있으나 아직 연결 대상이 없다 */
.data-card.is-pending {
  cursor: default;
}
.data-card.is-pending:hover {
  border-color: var(--border);
  box-shadow: none;
}
.data-card.is-pending .media-frame img {
  opacity: 0.86;
}

/* ============================================================
   §12 인트로 시퀀스 (index 한정 · 세션당 1회)
   문안 2비트 → 로고 마무리. "여기서 같이 준비해서 지원금을 받는다"를
   첫 화면에서 이해시키는 것이 목적이다.
   배색 근거: assets/favicon/favicon.svg 온다크 확정본
             밝은 면 #74c6de(cyan-300) · 어두운 면 #ffffff
   타이밍 표: app.js §13 의 BEATS · IN · OUT · FINALE 상수
   ============================================================ */

/* 시퀀스가 뜰 차례면 히어로가 먼저 보이지 않게 본문을 감춘다.
   index <head> 인라인 스크립트가 data-intro 를 걸고, 3초 뒤 스스로 푼다. */
html[data-intro="on"] {
  background: var(--navy-900);
}
html[data-intro="on"] body {
  visibility: hidden;
}
html[data-intro="on"] body .intro {
  visibility: visible;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--page-margin, 24px);
  background: var(--navy-900);
  overflow: hidden;
  /* 어느 페이지에 얹혀도 본 사이트 서체로 나오게 못박는다 */
  font-family: var(--font-sans);
}

/* ---- 문안 비트 ---- */
.intro__beats {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--page-margin, 24px);
}
.intro-beat {
  position: absolute;
  max-width: 24ch;
  margin: 0;
  text-align: center;
  font-size: clamp(26px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--text-inverse);
  word-break: keep-all;
  opacity: 0;
  transform: translateY(12px);
}
.intro-beat em {
  font-style: normal;
  color: var(--cyan-300);
}
.intro-beat.is-in {
  animation: introBeatIn 320ms var(--ease-out) forwards;
}
.intro-beat.is-out {
  animation: introBeatOut 260ms var(--ease-inout) forwards;
}
@keyframes introBeatIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes introBeatOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ---- 마무리 로고 — 비트가 끝나야(.is-final) 등장한다 ---- */
.intro__logo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  visibility: hidden;
}
.intro.is-final .intro__logo {
  visibility: visible;
}
.intro__sym {
  display: block;
  width: 84px;
  height: auto;
  overflow: visible;
}
.intro__wm {
  display: block;
  width: 240px;
  height: auto;
  color: var(--text-inverse);
}
.intro__tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 2px 0 0;
  text-align: center;
}
.intro__tag-main {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--cyan-300);
  word-break: keep-all;
}
.intro__tag-sub {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-inverse-muted, rgba(255, 255, 255, 0.66));
  word-break: keep-all;
}
@media (max-width: 480px) {
  .intro__tag-main {
    font-size: 15px;
  }
  .intro__tag-sub {
    font-size: 13px;
  }
}

.intro__grp {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.intro__grp.g4 {
  transform-origin: 40% 70%;
}
.intro__stroke {
  fill: none;
  stroke: var(--cyan-300);
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0;
}

/* ---- 건너뛰기 · 진행선 ---- */
.intro__skip {
  position: absolute;
  right: var(--page-margin, 24px);
  bottom: calc(var(--page-margin, 24px) + 10px);
  z-index: 3;
  appearance: none;
  height: 36px;
  padding: 0 14px;
  border: var(--bw-1, 1px) solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-full);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.intro__skip:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.intro__skip:focus-visible {
  outline: 2px solid var(--cyan-300);
  outline-offset: 2px;
}
.intro__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.intro__progress i {
  display: block;
  height: 100%;
  background: var(--cyan-300);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- 걷힘 (공통) ---- */
.intro.is-out {
  animation: introOut 460ms var(--ease-inout) forwards;
}
@keyframes introOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.045);
    visibility: hidden;
  }
}
.intro.is-out .intro__logo {
  animation: introLogoOut 460ms var(--ease-inout) forwards;
}
@keyframes introLogoOut {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-14px);
  }
}

/* ══════════ A안 · 조립 ══════════ */
.intro[data-v="a"] .intro__grp {
  opacity: 0;
}
.intro[data-v="a"].is-final .g1 {
  animation: introRise 340ms var(--ease-out) 80ms forwards;
}
.intro[data-v="a"].is-final .g2 {
  animation: introRise 340ms var(--ease-out) 200ms forwards;
}
.intro[data-v="a"].is-final .g3 {
  animation: introRise 340ms var(--ease-out) 320ms forwards;
}
.intro[data-v="a"].is-final .g4 {
  animation: introTip 420ms cubic-bezier(0.22, 1.22, 0.34, 1) 470ms forwards;
}
@keyframes introRise {
  0% {
    opacity: 0;
    transform: translateY(24%) scaleY(0.7);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
@keyframes introTip {
  0% {
    opacity: 0;
    transform: translate(-16%, 22%) scale(0.7);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
.intro[data-v="a"].is-final .intro__wm {
  animation: introWipe 420ms var(--ease-out) 660ms both;
}
.intro[data-v="a"].is-final .intro__tag {
  animation: introUp 380ms var(--ease-out) 860ms both;
}

/* ══════════ B안 · 도면 드로잉 ══════════ */
.intro[data-v="b"].is-final .intro__stroke {
  opacity: 1;
}
.intro[data-v="b"].is-final .intro__stroke .lp {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    introDraw 620ms var(--ease-inout) both,
    introStrokeOut 240ms linear both;
}
.intro[data-v="b"] .intro__fill .lp {
  opacity: 0;
}
.intro[data-v="b"].is-final .intro__fill .lp {
  animation: introFill 300ms var(--ease-out) both;
}
.intro[data-v="b"].is-final .intro__stroke .s1 {
  animation-delay: 0ms, 880ms;
}
.intro[data-v="b"].is-final .intro__stroke .s2 {
  animation-delay: 55ms, 905ms;
}
.intro[data-v="b"].is-final .intro__stroke .s3 {
  animation-delay: 110ms, 930ms;
}
.intro[data-v="b"].is-final .intro__stroke .s4 {
  animation-delay: 165ms, 955ms;
}
.intro[data-v="b"].is-final .intro__stroke .s5 {
  animation-delay: 220ms, 980ms;
}
.intro[data-v="b"].is-final .intro__stroke .s6 {
  animation-delay: 275ms, 1005ms;
}
.intro[data-v="b"].is-final .intro__stroke .s7 {
  animation-delay: 330ms, 1030ms;
}
.intro[data-v="b"].is-final .intro__fill .p1 {
  animation-delay: 560ms;
}
.intro[data-v="b"].is-final .intro__fill .p2 {
  animation-delay: 605ms;
}
.intro[data-v="b"].is-final .intro__fill .p3 {
  animation-delay: 650ms;
}
.intro[data-v="b"].is-final .intro__fill .p4 {
  animation-delay: 695ms;
}
.intro[data-v="b"].is-final .intro__fill .p5 {
  animation-delay: 740ms;
}
.intro[data-v="b"].is-final .intro__fill .p6 {
  animation-delay: 785ms;
}
.intro[data-v="b"].is-final .intro__fill .p7 {
  animation-delay: 830ms;
}
@keyframes introDraw {
  0% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes introStrokeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes introFill {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.intro[data-v="b"].is-final .intro__wm {
  animation: introUp 460ms var(--ease-out) 900ms both;
}
.intro[data-v="b"].is-final .intro__tag {
  animation: introUp 380ms var(--ease-out) 1120ms both;
}

/* ══════════ C안 · 상승 ══════════ */
.intro[data-v="c"].is-final .intro__sym {
  animation: introSymRise 640ms var(--ease-out) both;
}
@keyframes introSymRise {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.84);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.intro[data-v="c"].is-final .intro__wm {
  animation: introWipe 440ms var(--ease-out) 560ms both;
}
.intro[data-v="c"].is-final .intro__tag {
  animation: introUp 380ms var(--ease-out) 780ms both;
}

/* ---- 공통 키프레임 ---- */
@keyframes introWipe {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes introUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- 감속 모션 선호 — 문안 비트를 건너뛰고 로고만 정지 상태로 보여준다 ---- */
@media (prefers-reduced-motion: reduce) {
  .intro * {
    animation: none !important;
  }
  .intro__beats {
    display: none;
  }
  .intro .intro__grp,
  .intro .intro__sym,
  .intro .intro__wm,
  .intro .intro__tag,
  .intro .intro__fill .lp {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .intro .intro__stroke {
    opacity: 0 !important;
  }
  .intro .intro__progress {
    display: none;
  }
  .intro.is-out {
    animation: introRmOut 200ms linear forwards !important;
  }
  @keyframes introRmOut {
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
}

/* ============================================================
   §13 심사 기준 대비 (.judge) — service.html #s-structure
   비교표 위에 같은 내용을 한 번 더 시각화한다. 새 주장은 만들지 않는다.

   글자는 반드시 HTML 로 둔다. SVG <text> 로 넣으면 컨테이너가 좁아질 때
   통째로 눌린다 — 570 뷰박스가 393px 폭에서 0.59배가 되어 18px 글자가
   10.6px 로 렌더된다(실측). SVG 는 체크·엑스 아이콘에만 쓴다.

   진입 트리거는 app.js §7 의 공용 관찰자를 쓴다 —
   `data-draw` 를 달면 화면에 들어올 때 `.is-drawn` 이 붙는다.
   ============================================================ */
.judge {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .judge {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}

.jcard {
  position: relative;
  overflow: hidden;
  padding: var(--sp-6);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
@media (min-width: 768px) {
  .jcard {
    padding: var(--sp-8) var(--sp-8) var(--sp-6);
  }
}
.jcard--hi {
  border-color: var(--navy-200);
  background: #f2f7fb;
}
/* 강조 패널 상단 4px 띠 — 비교표 is-highlight 열과 같은 신호 */
.jcard--hi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent);
}

.jcard__cap {
  margin: 0 0 var(--sp-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.jcard--hi .jcard__cap {
  color: var(--accent-text);
}
.jcard__title {
  margin: 0 0 var(--sp-6);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  word-break: keep-all;
}
@media (min-width: 768px) {
  .jcard__title {
    font-size: 20px;
  }
}
.jcard--hi .jcard__title {
  color: var(--navy-800);
}

.jcard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.j-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.j-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  word-break: keep-all;
}
@media (min-width: 768px) {
  .j-text {
    font-size: 17px;
  }
}
.j-text--hi {
  font-weight: 700;
  color: var(--text-heading);
}
.j-text--off {
  color: var(--text-tertiary);
}

.j-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: var(--slate-100);
  border: 1.5px solid var(--slate-300);
  color: var(--slate-600);
}
.j-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.j-icon--hi {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}
.j-icon--off {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--border-strong);
}
.j-icon--off svg {
  stroke-width: 2.2;
}

/* 좌 3개 → 우 3개 순으로 등장 */
html.js .judge .j-row {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 240ms);
}
html.js .judge.is-drawn .j-row {
  opacity: 1;
  transform: none;
}
html.js .judge .j-icon {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 260ms var(--ease-out),
    transform 320ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 240ms + 150ms);
}
html.js .judge.is-drawn .j-icon {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html.js .judge .j-row,
  html.js .judge .j-icon {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   §14 모션그래픽 모음 — 원본 내용 위에 한 번 더 시각화하는 블록들
   진입 트리거는 전부 app.js §7 공용 관찰자(`data-draw` → `.is-drawn`).

   ── 모바일 규칙 (실측 근거) ──
   모션그래픽 안에 SVG <text> 를 쓰지 않는다. 뷰박스가 컨테이너 폭에 맞춰
   축소되면 글자까지 같이 눌린다 — 570 뷰박스 18px 글자가 393px 폭에서
   10.6px, 360px 에서 9.6px 로 렌더된다. 글자는 HTML, SVG 는 도형·아이콘만.
   ============================================================ */

/* ------------------------------------------------------------
   14-1 권한 관계도 (.relmap) — about #s-relation
   "심사·결정 권한은 정부에 있다"를 그림으로 못박는다.
   가로 흐름도로는 권한의 위치가 읽히지 않는다.
   ------------------------------------------------------------ */
.relmap {
  display: grid;
  gap: var(--sp-2);
  align-items: stretch;
}
@media (min-width: 860px) {
  .relmap {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--sp-3);
    align-items: stretch;
  }
  /* 세 노드의 높이를 맞춘다. 배지가 있는 정부 노드만 커 보이면
     권한 강조가 아니라 정렬 실수로 읽힌다. */
  .relmap__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.relmap__node {
  position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}
.relmap__node--us {
  border-color: var(--navy-200);
  background: #f2f7fb;
}
.relmap__node--gov {
  border-color: var(--navy-800);
  background: var(--navy-800);
  padding-bottom: var(--sp-5);
}
.relmap__role {
  margin: 0 0 var(--sp-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.relmap__node--gov .relmap__role {
  color: rgba(255, 255, 255, 0.66);
}
.relmap__name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  word-break: keep-all;
}
.relmap__node--gov .relmap__name {
  color: var(--text-inverse);
}
.relmap__note {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  word-break: keep-all;
}
.relmap__node--gov .relmap__note {
  color: rgba(255, 255, 255, 0.72);
}
/* 결정 권한 배지 — 정부 노드 안에 둔다.
   카드 밖으로 걸치면 아래 단계 흐름도와 겹칠 여지가 생긴다. */
.relmap__badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin-top: var(--sp-4);
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--cyan-300);
  color: var(--navy-900);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* 연결선 — 데스크톱 가로, 모바일 세로 */
.relmap__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
}
.relmap__link::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 2px;
  transform: translateX(-50%);
  background: var(--border-strong);
}
.relmap__linklabel {
  position: relative;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--surface-alt, #f2f5fa);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}
@media (min-width: 860px) {
  .relmap__link {
    min-width: 96px;
    min-height: 0;
    padding: 0 var(--sp-2);
  }
  .relmap__link::before {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
  }
}

html.js .relmap .relmap__node {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 200ms);
}
html.js .relmap.is-drawn .relmap__node {
  opacity: 1;
  transform: none;
}
html.js .relmap .relmap__link::before {
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: transform 380ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 200ms + 220ms);
}
html.js .relmap.is-drawn .relmap__link::before {
  transform: translateX(-50%) scaleY(1);
}
html.js .relmap .relmap__linklabel {
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 200ms + 420ms);
}
html.js .relmap.is-drawn .relmap__linklabel {
  opacity: 1;
}
html.js .relmap .relmap__badge {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 260ms var(--ease-out),
    transform 320ms cubic-bezier(0.22, 1.22, 0.34, 1);
  transition-delay: 760ms;
}
html.js .relmap.is-drawn .relmap__badge {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 860px) {
  html.js .relmap .relmap__link::before {
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
  }
  html.js .relmap.is-drawn .relmap__link::before {
    transform: translateY(-50%) scaleX(1);
  }
}

/* ------------------------------------------------------------
   14-2 산업군별 확보액 막대 (.mixbar) — cases #s-dashboard
   소재·부품 57.2(6) / 기계·장비 46.2(4) / IT·SW 35.5(5) / 바이오·생활 15.2(3)
   합 154.1억. 대시보드 KPI 와 같은 출처이며 새 수치를 만들지 않는다.
   ------------------------------------------------------------ */
.mixbar__cap {
  margin: 0 0 var(--sp-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.mixbar__track {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--slate-100);
}
.mixbar__seg {
  height: 100%;
  flex: 0 0 auto;
}
.mixbar__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-4);
}
@media (min-width: 768px) {
  .mixbar__legend {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.mixbar__key {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--text-secondary);
  word-break: keep-all;
}
.mixbar__swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  transform: translateY(-1px);
}
.mixbar__amt {
  font-weight: 700;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}

html.js .mixbar .mixbar__seg {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 160ms);
}
html.js .mixbar.is-drawn .mixbar__seg {
  transform: scaleX(1);
}
html.js .mixbar .mixbar__key {
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 160ms + 380ms);
}
html.js .mixbar.is-drawn .mixbar__key {
  opacity: 1;
}

/* ------------------------------------------------------------
   14-3 사전검토 3분기 (.gate) — service #s-eligibility
   §13 심사 기준 카드와 같은 어휘를 쓴다. 세 갈래 모두 상담으로 이어진다는
   것이 요점이라 종점 배지를 공통으로 붙인다.
   ------------------------------------------------------------ */
.gate {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .gate {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }
}
.gate__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  /* 사진 배경 섹션(bgsec)에서 위 흰 패널과 경계가 죽지 않게 띄운다 */
  box-shadow: var(--shadow-1);
}
.gate__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.gate__name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
  word-break: keep-all;
}
.gate__when {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  word-break: keep-all;
}
.gate__next {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: auto 0 0;
  padding-top: var(--sp-3);
  border-top: var(--bw-1) solid var(--border);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-800);
  word-break: keep-all;
}
.gate__next svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  fill: none;
  stroke: var(--success);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.js .gate .gate__card {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 180ms);
}
html.js .gate.is-drawn .gate__card {
  opacity: 1;
  transform: none;
}
html.js .gate .gate__next svg {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
  transition:
    opacity 240ms var(--ease-out),
    transform 300ms cubic-bezier(0.22, 1.22, 0.34, 1);
  transition-delay: calc(var(--i, 0) * 180ms + 320ms);
}
html.js .gate.is-drawn .gate__next svg {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------------------
   14-4 접수창 막대 그려지기 — insight #s-calendar
   "창은 짧고 준비는 길다"는 막대가 좌→우로 그려질 때 체감된다.
   ------------------------------------------------------------ */
html.js .timeline-h[data-draw] .timeline-h__bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease-out);
}
html.js .timeline-h[data-draw] .timeline-h__row:nth-child(1) .timeline-h__bar {
  transition-delay: 60ms;
}
html.js .timeline-h[data-draw] .timeline-h__row:nth-child(2) .timeline-h__bar {
  transition-delay: 180ms;
}
html.js .timeline-h[data-draw] .timeline-h__row:nth-child(3) .timeline-h__bar {
  transition-delay: 300ms;
}
html.js .timeline-h[data-draw] .timeline-h__row:nth-child(4) .timeline-h__bar {
  transition-delay: 420ms;
}
html.js .timeline-h[data-draw] .timeline-h__row:nth-child(5) .timeline-h__bar {
  transition-delay: 540ms;
}
html.js
  .timeline-h[data-draw]
  .timeline-h__row:nth-child(n + 6)
  .timeline-h__bar {
  transition-delay: 660ms;
}
html.js .timeline-h[data-draw].is-drawn .timeline-h__bar {
  transform: scaleX(1);
}

/* ------------------------------------------------------------
   14-5 정적 도형 진입 — 파이 조각(.dv-pie) · 산점도 점(a[data-case-link])
        · 카드 아이콘(.data-card__icon)
   클래스는 기존 마크업의 것을 그대로 쓴다.
   ------------------------------------------------------------ */
html.js .chart[data-draw] .dv-pie {
  opacity: 0;
  transform: scale(0.82);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 320ms var(--ease-out),
    transform 520ms cubic-bezier(0.22, 1.14, 0.34, 1);
}
html.js .chart[data-draw].is-drawn .dv-pie {
  opacity: 1;
  transform: scale(1);
}
html.js .chart[data-draw] a[data-case-link] {
  opacity: 0;
  transform: translateY(7px);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 300ms var(--ease-out),
    transform 420ms cubic-bezier(0.22, 1.18, 0.34, 1);
}
html.js .chart[data-draw].is-drawn a[data-case-link] {
  opacity: 1;
  transform: none;
}
/* 카드가 올라온 뒤 아이콘이 한 박자 늦게 자리잡는다 */
html.js .reveal .data-card__icon {
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 240ms var(--ease-out),
    transform 320ms cubic-bezier(0.22, 1.22, 0.34, 1);
  transition-delay: calc(var(--reveal-order, 1) * 90ms + 180ms);
}
html.js .reveal.is-visible .data-card__icon {
  opacity: 1;
  transform: scale(1);
}

/* ---- 감속 모션 선호 — 전부 정지 상태로 ---- */
@media (prefers-reduced-motion: reduce) {
  html.js .relmap .relmap__node,
  html.js .relmap .relmap__linklabel,
  html.js .relmap .relmap__badge,
  html.js .mixbar .mixbar__seg,
  html.js .mixbar .mixbar__key,
  html.js .gate .gate__card,
  html.js .gate .gate__next svg,
  html.js .timeline-h[data-draw] .timeline-h__bar,
  html.js .chart[data-draw] .dv-pie,
  html.js .chart[data-draw] a[data-case-link],
  html.js .reveal .data-card__icon {
    opacity: 1;
    transition: none;
  }
  html.js .relmap .relmap__node,
  html.js .mixbar .mixbar__seg,
  html.js .gate .gate__card,
  html.js .gate .gate__next svg,
  html.js .timeline-h[data-draw] .timeline-h__bar,
  html.js .chart[data-draw] .dv-pie,
  html.js .chart[data-draw] a[data-case-link],
  html.js .reveal .data-card__icon {
    transform: none;
  }
  html.js .relmap .relmap__link::before {
    transform: translateX(-50%) scaleY(1);
    transition: none;
  }
  html.js .mixbar .mixbar__seg {
    transform: scaleX(1);
  }
  html.js .timeline-h[data-draw] .timeline-h__bar {
    transform: scaleX(1);
  }
}

/* ══════════════════════════════════════════════════════════
   §15 비용 타임라인 (.costline) — index #s-offer
   본반영 시 이 블록만 wireframe.css 로 옮긴다.

   이 섹션이 증명하려는 것은 "비용이 붙는 지점이 딱 하나이고,
   그것도 마지막 분기의 한쪽뿐"이다. 기존 4단계 균등 흐름도로는
   0원 구간의 길이가 보이지 않고, 분기가 아래 카드 2장으로
   떨어져 나가 분기로 읽히지 않는다.

   모바일 규칙(§13 실측): SVG <text> 를 쓰지 않는다. 글자는 HTML.
   진입 트리거는 app.js §7 공용 관찰자(data-draw → .is-drawn).
   ══════════════════════════════════════════════════════════ */
.costline {
  --stem: 26px; /* 분기 줄기 길이 */
}

/* ---- 진행 구간 3단계 ---- */
.costline__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 768px) {
  .costline__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}
.costline__step {
  position: relative;
  padding-top: var(--sp-6);
}
/* 단계를 잇는 가로선 — 데스크톱에서만 그린다 */
.costline__step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: var(--bw-2);
  background: var(--navy-200);
  transform: scaleX(0);
  transform-origin: left center;
}
.costline__step:last-child::before {
  display: none;
}
.costline__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: var(--bw-2) solid var(--navy-600);
}
.costline__name {
  margin: 0 0 var(--sp-1);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  word-break: keep-all;
}
.costline__desc {
  margin: 0 0 var(--sp-3);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}
.costline__cost {
  display: inline-flex;
  align-items: center;
  height: var(--tag-h);
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--cyan-100);
  color: var(--cyan-700);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- 0원 구간 브래킷 ---- */
.costline__span {
  position: relative;
  margin: var(--sp-6) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--cyan-100);
  color: var(--cyan-700);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  word-break: keep-all;
}

/* ---- 분기 ---- */
.costline__fork {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  margin-top: calc(var(--stem) + var(--sp-4));
}
@media (min-width: 768px) {
  .costline__fork {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
}
/* 줄기 — 브래킷 가운데에서 아래로 */
.costline__fork::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--stem) * -1 - var(--sp-4));
  width: var(--bw-2);
  height: var(--stem);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  background: var(--border-strong);
}
/* 가지 — 두 갈래를 잇는 가로선 (데스크톱만) */
.costline__fork::after {
  content: "";
  position: absolute;
  /* 2열 그리드에서 각 카드의 중앙 = (100% - gap) / 4 */
  left: calc((100% - var(--sp-5)) / 4);
  right: calc((100% - var(--sp-5)) / 4);
  top: calc(var(--sp-4) * -1);
  height: var(--bw-2);
  background: var(--border-strong);
  transform: scaleX(0);
  display: none;
}
@media (min-width: 768px) {
  .costline__fork::after {
    display: block;
  }
}
.costline__branch {
  position: relative;
  padding: var(--sp-5);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
@media (min-width: 768px) {
  /* 가로선에서 각 카드로 내려오는 짧은 수직선 */
  .costline__branch::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--sp-4) * -1);
    width: var(--bw-2);
    height: var(--sp-4);
    transform: translateX(-50%);
    background: var(--border-strong);
  }
}
.costline__branch--yes {
  border-color: var(--navy-200);
  background: #f2f7fb;
}
.costline__blabel {
  display: inline-flex;
  align-items: center;
  height: var(--tag-h);
  margin: 0 0 var(--sp-3);
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--slate-100);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}
.costline__branch--yes .costline__blabel {
  background: var(--navy-800);
  color: var(--text-inverse);
}
.costline__bname {
  margin: 0 0 var(--sp-2);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  word-break: keep-all;
}
.costline__bdesc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  word-break: keep-all;
}
/* 첫 비용 마커 — 이 지점이 이 섹션의 결론이다 */
.costline__first {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: var(--bw-1) solid var(--accent);
  background: transparent;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.costline__first svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 진입 모션 ---- */
html.js .costline .costline__step,
html.js .costline .costline__span,
html.js .costline .costline__branch {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}
html.js .costline .costline__step {
  transition-delay: calc(var(--i, 0) * 160ms);
}
html.js .costline .costline__span {
  transition-delay: 620ms;
}
html.js .costline .costline__branch {
  transition-delay: calc(var(--i, 0) * 160ms + 900ms);
}
html.js .costline.is-drawn .costline__step,
html.js .costline.is-drawn .costline__span,
html.js .costline.is-drawn .costline__branch {
  opacity: 1;
  transform: none;
}
html.js .costline .costline__step::before {
  transition: transform 420ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 160ms);
}
html.js .costline.is-drawn .costline__step::before {
  transform: scaleX(1);
}
html.js .costline .costline__cost {
  opacity: 0;
  transform: scale(0.65);
  transition:
    opacity 240ms var(--ease-out),
    transform 300ms cubic-bezier(0.22, 1.22, 0.34, 1);
  transition-delay: calc(var(--i, 0) * 160ms + 260ms);
}
html.js .costline.is-drawn .costline__cost {
  opacity: 1;
  transform: scale(1);
}
html.js .costline .costline__fork::before {
  transition: transform 320ms var(--ease-out);
  transition-delay: 820ms;
}
html.js .costline.is-drawn .costline__fork::before {
  transform: translateX(-50%) scaleY(1);
}
html.js .costline .costline__fork::after {
  transform-origin: center;
  transition: transform 360ms var(--ease-out);
  transition-delay: 1080ms;
}
html.js .costline.is-drawn .costline__fork::after {
  transform: scaleX(1);
}
html.js .costline .costline__first {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 260ms var(--ease-out),
    transform 340ms cubic-bezier(0.22, 1.22, 0.34, 1);
  transition-delay: 1560ms;
}
html.js .costline.is-drawn .costline__first {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html.js .costline .costline__step,
  html.js .costline .costline__span,
  html.js .costline .costline__branch,
  html.js .costline .costline__cost,
  html.js .costline .costline__first {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js .costline .costline__step::before {
    transform: scaleX(1);
    transition: none;
  }
  html.js .costline .costline__fork::before {
    transform: translateX(-50%) scaleY(1);
    transition: none;
  }
  html.js .costline .costline__fork::after {
    transform: scaleX(1);
    transition: none;
  }
}

/* bgsec 안에서 흰 패널로 띄운다 — .step-flow 와 같은 대우 */
.bgsec .costline {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
@media (min-width: 768px) {
  .bgsec .costline {
    padding: var(--sp-8);
  }
}
/* ---- 결론 — 두 분기가 하나로 수렴한다 ----
   착수금이 없다는 사실의 결론은 "우리 수익이 귀사의 선정에서만 나온다"이다.
   분기에서 끝내면 비용 안내로 읽히고, 여기까지 와야 구조의 의미가 닫힌다.
   미선정 쪽도 같은 결론으로 모이므로 두 갈래를 모두 수렴시킨다. */
.costline__concl {
  position: relative;
  margin-top: calc(var(--sp-5) + var(--sp-4));
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--navy-800);
  color: var(--text-inverse);
}
@media (min-width: 768px) {
  .costline__concl {
    padding: var(--sp-6) var(--sp-8);
  }
  /* 두 갈래를 잇는 수렴 가로선 — 분기 가지의 거울상 */
  .costline__concl::before {
    content: "";
    position: absolute;
    left: calc((100% - var(--sp-5)) / 4);
    right: calc((100% - var(--sp-5)) / 4);
    top: calc(var(--sp-4) * -1);
    height: var(--bw-2);
    background: var(--border-strong);
    transform: scaleX(0);
    transform-origin: center;
  }
  /* 각 갈래에서 아래로 내려오는 짧은 수직선 */
  .costline__branch::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--sp-4) * -1);
    width: var(--bw-2);
    height: var(--sp-4);
    transform: translateX(-50%);
    background: var(--border-strong);
  }
}
.costline__cname {
  margin: 0 0 var(--sp-2);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-inverse);
  word-break: keep-all;
}
@media (min-width: 768px) {
  .costline__cname {
    font-size: 20px;
  }
}
.costline__cdesc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-inverse-muted);
  word-break: keep-all;
}
@media (min-width: 768px) {
  .costline__cdesc {
    font-size: 15px;
  }
}

html.js .costline .costline__concl {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
  transition-delay: 1780ms;
}
html.js .costline.is-drawn .costline__concl {
  opacity: 1;
  transform: none;
}
html.js .costline .costline__concl::before {
  transition: transform 360ms var(--ease-out);
  transition-delay: 1620ms;
}
html.js .costline.is-drawn .costline__concl::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  html.js .costline .costline__concl {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js .costline .costline__concl::before {
    transform: scaleX(1);
    transition: none;
  }
}

/* ============================================================
   §16 고정 내비 — 모바일 하단 GNB · 상담 스트립 · TOP · PC 상담 플로팅
   기존 .mobile-cta-bar 를 대체한다.

   모바일에서는 내비 태그라인이 숨어(1024px 미만) 오퍼 조건이 상시로 보이는
   자리가 없다. 스트립이 그 자리를 대신하므로 폼 길이 안내가 아니라
   «착수금 0원 · 선정 시에만 컨설팅비용 정산» 을 싣는다.
   ============================================================ */

/* ---- 모바일 하단 GNB ---- */
.gnb-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: none;
  background: var(--surface);
  border-top: var(--bw-1) solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(18, 41, 77, 0.08);
}
.gnb-bar__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.gnb-bar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 2px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.gnb-bar__link svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gnb-bar__link[aria-current="page"] {
  color: var(--navy-800);
}
.gnb-bar__link[aria-current="page"] svg {
  stroke-width: 2.2;
}

/* ---- 상담 스트립 (GNB 위) ---- */
.cta-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 151;
  display: none;
  background: var(--navy-800);
  transform: translateY(110%);
  transition: transform var(--dur-base) var(--ease-out);
}
.cta-strip.is-visible {
  transform: translateY(0);
}
.cta-strip__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-4) 8px var(--sp-5);
  color: var(--text-inverse);
  text-decoration: none;
}
.cta-strip__copy {
  flex: 1 1 auto;
  min-width: 0;
}
.cta-strip__main {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.cta-strip__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-inverse-muted);
}
/* 라벨 버튼 대신 원형 화살표 — 360px 에서 «착수금 0원 …»(227px)이
   버튼(85px)에 밀려 두 줄로 깨졌다(실측). 화살표는 36px 라 가용폭 276px. */
.cta-strip__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--accent-cta);
  color: #fff;
}
.cta-strip__go svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- TOP 버튼 (PC·모바일 공통) ---- */
.to-top {
  position: fixed;
  right: var(--page-margin);
  bottom: 24px;
  z-index: 160;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy-800);
  cursor: pointer;
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 상담 플로팅 (PC 전용 — 모바일은 스트립이 그 역할) ---- */
.cta-float {
  position: fixed;
  right: var(--page-margin);
  bottom: 80px;
  z-index: 160;
  display: none;
  align-items: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 18px 0 15px;
  border-radius: var(--r-full);
  background: var(--accent-cta);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base);
}
.cta-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.cta-float svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 768px) {
  .cta-float {
    display: inline-flex;
  }
}
@media (max-width: 767px) {
  .gnb-bar {
    display: block;
  }
  .cta-strip {
    display: block;
    bottom: calc(56px + env(safe-area-inset-bottom));
  }
  /* 하단 고정요소(GNB 56 + 스트립 52)만큼 본문 아래 여백 */
  body {
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }
  .to-top {
    bottom: calc(120px + env(safe-area-inset-bottom));
  }
  /* 푸터 메뉴는 하단 GNB 가 대신한다 — 같은 링크를 두 번 두지 않는다 */
  .site-footer nav.footer-col[aria-label="푸터 메뉴"] {
    display: none;
  }
}

/* ---- 28. 해시 앵커 착지 위치 (CTA → contact.html#s-form) ---------------
   내비가 sticky 라 앵커로 점프하면 헤더가 착지 지점을 덮는다. 헤더 높이만큼
   내려서 세운다. 12px 은 제목이 헤더에 딱 붙어 답답해 보이지 않게 하는 여백이다.
   내비는 스크롤하면 60px 로 줄지만 여기서는 줄기 전 높이(76px)를 기준으로 잡는다 —
   덜 잡으면 가려지고, 더 잡으면 조금 위가 비는 정도라 과하게 잡는 쪽이 안전하다. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 12px);
}