@charset "utf-8";
/* ==========================================================================
   ContentRix — sub.css   공용 컴포넌트 라이브러리
   메인 · 서브 모두가 함께 쓰는 조각들.
   ① 이미지 자리   ② 섹션 부품   ③ 사업/강점 카드   ④ 지표 밴드
   ⑤ 인사말        ⑥ 개념 다이어그램(매트릭스 전용)   ⑦ 프로세스
   ⑧ 사업 상세     ⑨ 문의/오시는 길
   ========================================================================== */

/* ==========================================================================
   ① 이미지 자리 (placeholder)
   --------------------------------------------------------------------------
   실제 이미지로 교체하는 법 :

     <div class="ph" style="--r:16/9"> … </div>
        ↓  통째로 아래 한 줄로 바꾸면 끝
     <img class="ph-img" style="--r:16/9" src="assets/img/파일명.jpg" alt="설명">

   --r 값(가로/세로 비율)은 그대로 두면 레이아웃이 흔들리지 않습니다.
   ========================================================================== */
.ph,
.ph-img {
  display: block;
  width: 100%;
  aspect-ratio: var(--r, 16 / 9);
  border-radius: var(--ph-radius, 16px);
}

.ph {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 16px;
  border: 1.5px dashed var(--ink-300);
  background-color: var(--paper-3);
  background-image: repeating-linear-gradient(
    -45deg, rgba(17, 24, 39, .035) 0 1px, transparent 1px 10px);
  color: var(--ink-400);
  text-align: center;
  overflow: hidden;
}
.ph__ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-400);
}
.ph__ico svg { width: 19px; height: 19px; }
.ph__t {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-600);
}
.ph__s {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.ph-img { object-fit: cover; }

/* 밝은 톤이 필요한 자리 (어두운 배경 위) */
.ph--onink {
  border-color: rgba(255, 255, 255, .22);
  background-color: rgba(255, 255, 255, .04);
  background-image: repeating-linear-gradient(
    -45deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 10px);
}
.ph--onink .ph__ico { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.7); }
.ph--onink .ph__t { color: rgba(255,255,255,.8); }
.ph--onink .ph__s { color: rgba(255,255,255,.42); }

/* 모서리 없는 배경형 (히어로 등) */
.ph--flat { border-radius: 0; border-width: 0; }
.ph--plain { border-style: solid; border-color: var(--line); }

/* 부모를 꽉 채우는 배경형 — 비율이 아니라 부모 크기를 따른다.
   실제 이미지로 바꿀 때는  <img class="ph-img ph-img--cover" src="…" alt="…">  */
.ph--cover,
.ph-img--cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.ph-img--cover { object-fit: cover; }

/* ==========================================================================
   ② 섹션 부품
   ========================================================================== */

/* 가운데 정렬 섹션 헤더 — 기업 사이트에서 가장 무난한 형태 */
.shead {
  max-width: 66ch;
  margin: 0 auto clamp(36px, 4.6vw, 62px);
  text-align: center;
}
.shead__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--se-bg, var(--o-50));
  color: var(--se-c, var(--o-600));
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.shead--t { --se-bg: var(--t-50); --se-c: var(--t-700); }
.shead--g { --se-bg: var(--g-50); --se-c: var(--g-700); }
.shead__title {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.042em;
  color: var(--ink-900);
}
.shead__desc { margin-top: 16px; }

/* 좌우 2단 섹션 헤더 (좌 제목 / 우 더보기) */
.shead-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: clamp(28px, 3.6vw, 44px);
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink-900);
}
/* 가운데 정렬 헤더(.shead__eyebrow)와 같은 알약 모양으로 통일 */
.shead-row__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--se-bg, var(--o-50));
  color: var(--se-c, var(--o-600));
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.shead-row__title {
  margin-top: 12px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--ink-900);
}

/* 더보기 링크 */
.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink-600);
  transition: color .22s, gap .3s var(--e-out);
}
.more:hover { color: var(--o-600); gap: 12px; }
.more svg { width: 14px; height: 14px; }

/* ==========================================================================
   ③ 사업영역 / 강점 카드
   ========================================================================== */
.bizgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.bizcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  transition: transform .45s var(--e-out), box-shadow .45s var(--e-out), border-color .3s;
}
.bizcard:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: transparent; }
.bizcard__media { position: relative; }
.bizcard__media .ph,
.bizcard__media .ph-img { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.bizcard__tag {
  position: absolute;
  left: 14px; top: 14px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--bc-c, var(--o-500));
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.bizcard__body { flex: 1 1 auto; padding: clamp(20px, 2.4vw, 28px); }
.bizcard__t {
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ink-900);
}
.bizcard__en {
  display: block;
  margin-top: 4px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.bizcard__d { margin-top: 14px; font-size: .875rem; line-height: 1.75; color: var(--ink-500); }
.bizcard__ul { margin-top: 16px; display: grid; gap: 7px; }
.bizcard__ul li {
  position: relative;
  padding-left: 16px;
  font-size: .8125rem;
  color: var(--ink-600);
}
.bizcard__ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--bc-c, var(--o-500));
}
.bizcard__foot {
  padding: 0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
}
.bizcard--o { --bc-c: var(--o-500); }
.bizcard--g { --bc-c: var(--g-600); }
.bizcard--t { --bc-c: var(--t-500); }

/* 강점 4열 */
.whygrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.why {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 30px);
  background: #fff;
  transition: background .4s;
}
.why:hover { background: var(--paper-2); }
.why__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: var(--wy-bg, var(--o-50));
  color: var(--wy-c, var(--o-600));
}
.why__ico svg { width: 22px; height: 22px; }
.why:nth-child(1) { --wy-bg: var(--o-50); --wy-c: var(--o-600); }
.why:nth-child(2) { --wy-bg: var(--t-50); --wy-c: var(--t-700); }
.why:nth-child(3) { --wy-bg: var(--g-50); --wy-c: var(--g-700); }
.why:nth-child(4) { --wy-bg: var(--paper-3); --wy-c: var(--ink-800); }
.why__t {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.032em;
  color: var(--ink-900);
  /* 제목이 한 줄인 카드와 두 줄인 카드가 섞여도
     본문 시작 위치가 어긋나지 않도록 두 줄 높이를 확보한다 */
  min-height: 2.9em;
  margin-bottom: 10px;
}
.why__d { font-size: .875rem; line-height: 1.75; color: var(--ink-500); }

/* ==========================================================================
   ④ 지표 밴드
   ========================================================================== */
.numband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.numband--boxed {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.nbcell {
  padding: clamp(22px, 2.8vw, 34px) clamp(18px, 2.2vw, 28px);
  background: #fff;
  text-align: center;
}
.nbcell__v {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.nbcell__v i {
  font-style: normal;
  font-size: .44em;
  font-weight: 800;
  color: var(--nb-c, var(--o-500));
}
.nbcell__k { margin-top: 12px; font-size: .8125rem; font-weight: 600; color: var(--ink-500); }
.nbcell:nth-child(1) { --nb-c: var(--o-500); }
.nbcell:nth-child(2) { --nb-c: var(--g-600); }
.nbcell:nth-child(3) { --nb-c: var(--t-500); }
.nbcell:nth-child(4) { --nb-c: var(--ink-800); }

/* ==========================================================================
   ⑤ 인사말
   ========================================================================== */
.greet {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: start;
}
.greet__body p { font-size: .9375rem; line-height: 1.95; color: var(--ink-600); }
.greet__body p + p { margin-top: 1.15em; }
.greet__body strong { font-weight: 700; color: var(--ink-900); }

/* 인사말 첫 문장 — 큰 따옴표 장식 + 아래 짧은 강조선
   ※ 선택자를 .greet__body 로 한 단계 좁힌 이유 :
      위의 `.greet__body p` 가 더 높은 우선순위라, `.greet__lead` 만으로는
      글자 크기 · 색 · 행간이 전부 본문값으로 덮어써진다. */
.greet__body .greet__lead {
  position: relative;
  padding-top: clamp(30px, 4vw, 44px);
  margin-bottom: clamp(26px, 3vw, 36px);
  padding-bottom: clamp(22px, 2.6vw, 30px);
  font-size: clamp(1.4rem, 2.9vw, 2.05rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.045em;
  color: var(--ink-900);
}
.greet__lead::before {          /* 큰 여는 따옴표 */
  content: '\201C';
  position: absolute;
  top: clamp(-8px, -.6vw, -2px);
  left: -.03em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3.6rem, 6.4vw, 5.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--o-500);
  opacity: .3;
  pointer-events: none;
}
.greet__lead::after {           /* 짧은 강조선 */
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 52px; height: 3px;
  border-radius: 2px;
  background: var(--o-500);
}
.greet__sign {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.greet__sign span { font-size: .8125rem; color: var(--ink-500); }
.greet__sign b { font-size: 1.125rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900); }

@media (max-width: 900px) { .greet { grid-template-columns: 1fr; } }

/* ==========================================================================
   ⑥ 개념 다이어그램 — 회사소개 > 콘텐츠 매트릭스 페이지 전용
   ========================================================================== */

/* 인용 블록 */
.quote {
  position: relative;
  padding-left: clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--o-500);
}
.quote p {
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.52;
  letter-spacing: -.04em;
  color: var(--ink-900);
}
.quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-400);
}

/* 조각 → 매트릭스 모프 */
.morph__inner {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 72px);
  /* center 로 두면 왼쪽 글이 큰 도형 높이의 절반만큼 아래로 밀려
     위쪽에 빈 공간이 크게 생긴다. 위 기준으로 맞춘다. */
  align-items: start;
}
.morph__switch {
  display: inline-flex;
  padding: 4px;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--sh-1);
}
.morph__switch button {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink-500);
  transition: background .32s var(--e-out), color .32s;
}
.morph__switch button[aria-selected='true'] { background: var(--ink-900); color: #fff; }

.morph__keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 칩 사이 간격은 화살표가 들어갈 자리 (--karr) */
  --karr: 30px;
  gap: 10px var(--karr);
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.morph__keys li {
  position: relative;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink-400);
  transition: color .5s var(--e-out) var(--kd, 0ms),
              border-color .5s var(--e-out) var(--kd, 0ms),
              background .5s var(--e-out) var(--kd, 0ms);
}
.morph.is-matrix .morph__keys li {
  color: var(--k-c, var(--o-600));
  border-color: currentColor;
  background: var(--k-bg, var(--o-50));
}
.morph__keys li:nth-child(1) { --kd: 260ms; --k-c: var(--o-600); --k-bg: var(--o-50); }
.morph__keys li:nth-child(2) { --kd: 360ms; --k-c: var(--g-700); --k-bg: var(--g-50); }
.morph__keys li:nth-child(3) { --kd: 460ms; --k-c: var(--t-700); --k-bg: var(--t-50); }
.morph__keys li:nth-child(4) { --kd: 560ms; --k-c: var(--ink-900); --k-bg: #fff; }

/* 칩을 잇는 화살표 — '연결된 시스템' 일 때만 앞 칩에서 뻗어 나온다.
   ::before = 선(왼→오른쪽으로 그어짐), ::after = 촉.
   색은 currentColor 라 각 칩의 상태 색을 그대로 따라간다. */
.morph__keys li + li::before,
.morph__keys li + li::after {
  content: '';
  position: absolute;
  top: 50%;
  pointer-events: none;
}
.morph__keys li + li::before {          /* 선 */
  right: calc(100% + 7px);
  width: calc(var(--karr) - 14px);
  height: 1.5px;
  margin-top: -.75px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s var(--e-out) var(--kd, 0ms);
}
.morph__keys li + li::after {           /* 촉 */
  right: calc(100% + 6px);
  width: 5px; height: 5px;
  margin-top: -3px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .26s var(--e-out) calc(var(--kd, 0ms) + 300ms);
}
.morph.is-matrix .morph__keys li + li::before { transform: scaleX(1); }
.morph.is-matrix .morph__keys li + li::after  { opacity: 1; }

@media (max-width: 400px) {
  .morph__keys { --karr: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .morph__keys li + li::before { transition: none; }
  .morph__keys li + li::after  { transition: none; }
}

/* 조각 상태에서 윗줄 칩이 위로 튀어 오르므로 그만큼 여유를 준다 */
.morph__viz { position: relative; padding-top: clamp(14px, 2.2vw, 34px); }
.morph__stage {
  position: relative;
  aspect-ratio: 1 / .92;
  width: min(100%, 520px);
  margin-inline: auto;
}
.morph__frame {
  position: absolute;
  inset: 6%;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.55);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .55s var(--e-out) .1s, transform .65s var(--e-out) .1s;
}
.morph.is-matrix .morph__frame { opacity: 1; transform: none; }

.mchip {
  position: absolute;
  left: var(--gx);
  top: var(--gy);
  width: 24%;
  aspect-ratio: 1;
  /* grid + % 높이 조합은 행 높이가 불확정이라 아이콘이 찌그러지고
     라벨이 아래로 밀렸다. flex 로 바꿔 세로 중앙 정렬을 확정한다. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px;
  border-radius: 18px;
  background: var(--mc-bg, #fff);
  color: var(--mc-fg, var(--ink-700));
  box-shadow: var(--sh-2);
  transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sr, 0deg));
  transition: transform .9s var(--e-out) var(--md, 0ms),
              border-radius .8s var(--e-out) var(--md, 0ms),
              box-shadow .8s var(--e-out) var(--md, 0ms);
}
.morph.is-matrix .mchip { transform: none; border-radius: 12px; box-shadow: var(--sh-1); }
.mchip svg {
  flex: none;
  width: 40%;
  height: auto;
  aspect-ratio: 1;   /* height:% 는 해석되지 않아 아이콘이 납작해진다 */
}
.mchip span {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
  text-align: center;
}
.mchip--o  { --mc-bg: var(--o-500); --mc-fg: #fff; }
.mchip--t  { --mc-bg: var(--t-500); --mc-fg: #fff; }
.mchip--g  { --mc-bg: var(--g-500); --mc-fg: #fff; }
.mchip--o2 { --mc-bg: var(--o-100); --mc-fg: var(--o-700); }
.mchip--t2 { --mc-bg: var(--t-100); --mc-fg: var(--t-700); }
.mchip--g2 { --mc-bg: var(--g-100); --mc-fg: var(--g-700); }
.mchip--brand { --mc-bg: var(--ink-900); --mc-fg: #fff; }
.mchip--brand b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }

@media (max-width: 900px) {
  .morph__inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   3단 구조 흐름 도식 — 카드 → 화살표 → 카드 → 화살표 → 카드
   가로 3열이 기본이고, 좁아지면 세로로 쌓이면서 화살표가 아래를 가리킨다.
   -------------------------------------------------------------------------- */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(8px, 1.4vw, 18px);
}

/* 화살표 — 카드 사이 여백에 놓인 연결 노드 */
.flow__arrow {
  align-self: center;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-inline: clamp(2px, .6vw, 8px);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-1);
  color: var(--ink-500);
}
.flow__arrow svg { width: 18px; height: 18px; }

.flow__step {
  --fl-c: var(--o-500);
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  transition: transform .45s var(--e-out), box-shadow .45s var(--e-out);
}
.flow__step::before {          /* 상단 색 띠 — 단계 구분 */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  z-index: 2;
  background: var(--fl-c);
}
.flow__step:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.flow__step--o { --fl-c: var(--o-500); }
.flow__step--g { --fl-c: var(--g-500); }
.flow__step--t { --fl-c: var(--t-500); }

.flow__media { position: relative; }
.flow__media .ph { border-left: 0; border-right: 0; border-top: 0; }
.flow__badge {                 /* 이미지 위 단계 번호 */
  position: absolute;
  left: 14px; top: 16px;
  z-index: 2;
  min-width: 34px;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--fl-c);
  color: #fff;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
}
.flow__step--g .flow__badge { color: var(--ink-900); }

.flow__body { flex: 1 1 auto; padding: clamp(18px, 2.2vw, 24px); }
.flow__en {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-400);
}
.flow__t {
  margin: 8px 0 11px;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.032em;
  color: var(--ink-900);
}
.flow__d { font-size: .875rem; line-height: 1.75; color: var(--ink-500); }

@media (max-width: 900px) {
  /* 세로 적층 — 화살표를 아래로 돌린다 */
  .flow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flow__arrow { justify-self: center; margin-inline: 0; }
  .flow__arrow svg { transform: rotate(90deg); }
  .flow__media { max-width: 420px; }
}

/* --------------------------------------------------------------------------
   도식이 만드는 결과 — 위 .flow 바로 아래에 놓인다.
   흰 카드를 한 번 더 쓰면 리듬이 그대로 반복되므로,
   테두리·배경 없이 얇은 구분선 위의 3열 텍스트로 위계를 한 단 낮춘다.
   -------------------------------------------------------------------------- */
.outcome {
  margin-top: clamp(20px, 2.6vw, 32px);
  padding: clamp(26px, 3.2vw, 40px) clamp(24px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.outcome__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(22px, 2.6vw, 30px);
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink-900);
}
.outcome__head::after {        /* 제목 오른쪽으로 뻗는 가는 선 */
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
/* auto-fit 을 쓰면 폭에 따라 2열로 접히는데, 그때 항목 사이 구분선이
   엉뚱한 자리에 남는다. 3열 아니면 1열, 둘 중 하나만 되도록 고정한다. */
.outcome__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px);
}
@media (max-width: 780px) {
  .outcome__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vw, 34px); }
}
.outcome__item { position: relative; --oc-c: var(--o-600); --oc-bg: var(--o-50); min-width: 0; }
.outcome__item--o { --oc-c: var(--o-600); --oc-bg: var(--o-50); }
.outcome__item--g { --oc-c: var(--g-700); --oc-bg: var(--g-50); }
.outcome__item--t { --oc-c: var(--t-700); --oc-bg: var(--t-50); }
/* 아이콘을 제목 왼쪽에 붙여 한 줄로 — 세로로 쌓으면 허전해 보인다 */
.outcome__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--oc-bg);
  color: var(--oc-c);
}
.outcome__ico svg { width: 16px; height: 16px; }
.outcome__t {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.032em;
  color: var(--ink-900);
}
.outcome__d { font-size: .875rem; line-height: 1.78; color: var(--ink-500); }

/* 항목 사이 세로 구분선 — 열 간격 한가운데에 그린다(레이아웃에 영향 없음) */
@media (min-width: 781px) {
  .outcome__item + .outcome__item::before {
    content: '';
    position: absolute;
    left: calc(clamp(22px, 3vw, 40px) / -2);
    top: 2px; bottom: 2px;
    width: 1px;
    background: var(--line);
  }
}

/* 순환 다이어그램 */
.orbit { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.orbit__ring {
  position: absolute;
  inset: 14%;
  border: 1px dashed var(--ink-300);
  border-radius: 50%;
  animation: spin 18s linear infinite;
}
.orbit__ring::after {
  content: '';
  position: absolute;
  left: 50%; top: -5px;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--o-500);
}
.orbit__core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 2px solid var(--t-500);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-2);
  text-align: center;
}
.orbit__core b {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: var(--ink-900);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
}
.orbit__core strong { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink-900); }
.orbit__core span { margin-top: 2px; font-size: .8125rem; font-weight: 600; color: var(--ink-400); }

/* --x/--y 는 링 위의 좌표다. translate(-50%,-50%) 로 노드 '전체'를 맞추면
   아래 글자 높이의 절반만큼 아이콘이 위로 밀려 링에서 벗어난다.
   가로만 중앙 정렬하고, 세로는 아이콘 높이의 절반만 올려 아이콘 중심을 링에 얹는다. */
.orbit__node {
  --nd-ico: 64px;
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, calc(var(--nd-ico) / -2));
  width: 27%;
  text-align: center;
}
.orbit__node i {
  display: grid;
  place-items: center;
  width: var(--nd-ico); height: var(--nd-ico);
  margin: 0 auto 10px;
  border-radius: 17px;
  background: var(--nd-bg);
  color: #fff;
  box-shadow: var(--sh-2);
  transition: transform .45s var(--e-out);
}
.orbit__node:hover i { transform: translateY(-4px) scale(1.05); }
.orbit__node i svg { width: 28px; height: 28px; }
.orbit__node b { display: block; font-size: .9375rem; font-weight: 800; letter-spacing: -.028em; color: var(--ink-900); }
.orbit__node span { display: block; margin-top: 2px; font-size: .8125rem; color: var(--ink-500); }

@media (max-width: 640px) {
  .orbit__node { --nd-ico: 50px; }
  .orbit__node i { border-radius: 14px; }
  .orbit__node i svg { width: 22px; height: 22px; }
  .orbit__node b { font-size: .8125rem; }
  .orbit__node span { font-size: .6875rem; }
}
@media (max-width: 480px) {
  .orbit__node { --nd-ico: 42px; }
  .orbit__node i { border-radius: 12px; }
  .orbit__node i svg { width: 19px; height: 19px; }
  .orbit__node b { font-size: .75rem; }
  .orbit__node span { display: none; }
}

/* ==========================================================================
   ⑦ 프로세스
   ========================================================================== */
.proc__grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pgap, clamp(12px, 1.8vw, 22px));
}
/* 자동 순환 연출 — 01 → 04 순서로 하나씩 떠올랐다 내려앉는다.
   전체 주기 7s 를 카드·화살표·순환 점이 공유하고, 카드는 --i 만큼 지연시켜
   한 장씩 이어지게 만든다.
   ※ hover 효과는 넣지 않는다. 마우스가 개별 카드를 자동 연출에서 빼내면
      01 → 04 순서가 그때부터 흐트러진다. */
.pcard {
  position: relative;
  padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.2vw, 28px) clamp(26px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  animation: pcard-lift 7s var(--e-out) infinite;
  animation-delay: calc(var(--i, 0) * 1.1s);
}
.pcard::after {                   /* 상단 색 띠 — 카드가 뜰 때 왼쪽에서 그어진다 */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--pc-c);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: pcard-bar 7s var(--e-out) infinite;
  animation-delay: calc(var(--i, 0) * 1.1s);
}

@keyframes pcard-lift {
  0%          { transform: translateY(0);   box-shadow: 0 0 0 0 rgba(20, 24, 31, 0); }
  7%          { transform: translateY(-7px); box-shadow: var(--sh-3); }
  16%, 100%   { transform: translateY(0);   box-shadow: 0 0 0 0 rgba(20, 24, 31, 0); }
}
@keyframes pcard-bar {
  0%          { transform: scaleX(0); }
  7%, 16%     { transform: scaleX(1); }
  24%, 100%   { transform: scaleX(0); }
}

/* hover 로 개별 카드가 자동 연출에서 빠지면 01→04 순서가 흐트러진다.
   이 카드들은 마우스에 반응하지 않고 자동 순환만 한다. */
.pcard:nth-child(1) { --pc-c: var(--o-500); }
.pcard:nth-child(2) { --pc-c: var(--g-500); }
.pcard:nth-child(3) { --pc-c: var(--t-500); }
.pcard:nth-child(4) { --pc-c: var(--ink-900); }
.pcard__n { display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .2em; color: var(--pc-c); margin-bottom: 14px; }
.pcard__big {
  position: absolute;
  right: 14px; top: 2px;
  font-size: 4.4rem;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: var(--ink-900);
  opacity: .05;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.pcard__t { font-size: 1.125rem; font-weight: 800; letter-spacing: -.035em; color: var(--ink-900); margin-bottom: 15px; }
.pcard__ul li { position: relative; padding-left: 15px; font-size: .8125rem; line-height: 1.62; color: var(--ink-500); }
.pcard__ul li + li { margin-top: 8px; }
.pcard__ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 1.5px;
  background: var(--pc-c);
  opacity: .55;
}
/* --------------------------------------------------------------------------
   순환 표현 — 카드 사이 화살표 + 04 에서 01 로 되돌아가는 U자 선
   4열 등폭 그리드라 열·간격 위치를 계산으로 정확히 맞출 수 있다.
     카드폭 c = (W - 3g) / 4
     n번째 간격 중심 = 25%·n·W + (n-2)·g/4
     1번 카드 중심   = 12.5%·W - 0.375g   (4번 카드 중심은 좌우 대칭)
   -------------------------------------------------------------------------- */
/* 순환선 위에 얹힌 문구가 .proc__cycle 밖으로 반쯤 걸치므로 그만큼 자리를 비워 둔다 */
.proc { --pgap: clamp(14px, 2.4vw, 32px); padding-bottom: 20px; }

/* 카드 사이 화살촉.
   ※ .proc__grid 는 data-rv-stagger 라 자식마다 data-rv 가 자동으로 붙고,
      등장 애니메이션이 이 요소의 transform 을 덮어쓴다.
      회전은 ::before 로 내려 두어야 화살표 모양이 유지된다. */
.proc__ar {
  position: absolute;
  top: 50%;
  left: calc(25% * var(--n) + (var(--n) - 2) * var(--pgap) / 4);
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  pointer-events: none;
}
.proc__ar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 2px solid var(--ink-400);
  border-right: 2px solid var(--ink-400);
  transform: rotate(45deg);
  /* 앞 카드가 떠오른 직후 이 화살표가 잠깐 진해진다 */
  animation: proc-ar 7s linear infinite;
  animation-delay: calc(var(--n) * 1.1s);
}
@keyframes proc-ar {
  0%, 3%   { border-color: var(--ink-400); }
  6%       { border-color: var(--o-500); }
  14%,100% { border-color: var(--ink-400); }
}

.proc__cycle {                    /* U자 되돌림 경로 */
  position: relative;
  height: clamp(48px, 5.6vw, 72px);
  margin: 0 calc(12.5% - var(--pgap) * .375);
  border: 1.5px dashed var(--ink-300);
  border-top: 0;
  border-radius: 0 0 20px 20px;
}
.proc__cycle::before {            /* 01 카드로 되돌아가는 화살촉 (위쪽) */
  content: '';
  position: absolute;
  left: -7px; top: -2px;
  width: 12px; height: 12px;
  border-top: 2px solid var(--ink-400);
  border-left: 2px solid var(--ink-400);
  transform: rotate(45deg);
  animation: proc-tip 7s linear infinite;   /* 점이 도착하는 순간 반짝 */
}
@keyframes proc-tip {
  0%, 91%   { border-color: var(--ink-400); }
  95%       { border-color: var(--o-500); }
  100%      { border-color: var(--ink-400); }
}

/* 04 → 01 로 순환선을 타고 흐르는 점.
   카드 4장이 다 떠오른 뒤(≈4.4s)에 출발해 왼쪽 화살촉까지 간다.
   모서리 반경(20px)에 맞춰 꺾이는 지점을 따로 잡아 선을 타고 돈다. */
.proc__dot {
  position: absolute;
  left: 100%; top: 0;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--o-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--o-500) 18%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: proc-flow 7s linear infinite;
}
@keyframes proc-flow {
  0%, 62%   { left: 100%;                 top: 0;                  opacity: 0; }
  63%       { left: 100%;                 top: 0;                  opacity: 1; }
  69%       { left: 100%;                 top: calc(100% - 20px);  opacity: 1; }
  72%       { left: calc(100% - 20px);    top: 100%;               opacity: 1; }
  86%       { left: 20px;                 top: 100%;               opacity: 1; }
  89%       { left: 0;                    top: calc(100% - 20px);  opacity: 1; }
  94%       { left: 0;                    top: 0;                  opacity: 1; }
  97%, 100% { left: 0;                    top: 0;                  opacity: 0; }
}
/* 문구는 U자 '안쪽'에 둔다. 아래 선 위에 얹으면 불투명 배경이
   순환 점의 경로를 가려 점이 중간에 사라져 보인다. */
.proc__loop {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-500);
  white-space: nowrap;
}
.proc__loop svg { width: 19px; height: 19px; flex: none; color: var(--t-500); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .proc__grid { grid-template-columns: repeat(2, 1fr); }
  /* 2열·1열로 접히면 U자 경로가 성립하지 않는다. 기존 알약 형태로 되돌린다. */
  .proc__ar { display: none; }
  .proc__cycle { height: auto; margin: clamp(24px, 3vw, 34px) 0 0; border: 0; }
  .proc__cycle::before { display: none; }
  .proc__dot { display: none; }          /* 탈 경로가 없으므로 흐르는 점도 끈다 */
  .proc__loop {
    position: static;
    transform: none;
    white-space: normal;
    padding: 15px 22px;
    border: 1px dashed var(--ink-300);
    border-radius: 999px;
    background: transparent;
  }
}
@media (max-width: 540px) { .proc__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   ⑧ 사업 상세 블록 (사업분야 페이지)
   ========================================================================== */
.sgroup {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-block: clamp(38px, 4.6vw, 60px) 4px;
  scroll-margin-top: calc(var(--head-h) + 70px);
}
.sgroup__line { flex: 1 1 auto; height: 1px; background: var(--line); }
.sgroup__t { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900); }
.sgroup__d { font-size: .8125rem; color: var(--ink-500); }

.sblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 4.6vw, 66px);
  align-items: center;
  padding-block: clamp(42px, 5.4vw, 76px);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--head-h) + 70px);
}
/* 구분선은 블록 '사이'에만 필요하다.
   첫 블록의 윗선은 상단 탭 바로 아래에 줄만 하나 덩그러니 남는다. */
.sblock:first-child { border-top: 0; }
.sblock--rev .sblock__copy { order: 2; }

.sblock__n { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sblock__n em {
  font-style: normal;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--sb-c, var(--o-500));
  font-variant-numeric: tabular-nums;
}
.sblock__n s { text-decoration: none; width: 24px; height: 1px; background: var(--line); }
.sblock__en { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.sblock__t {
  margin: 8px 0 15px;
  font-size: clamp(1.4rem, 3vw, 2.05rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.04em;
  color: var(--ink-900);
}
.sblock__lead { max-width: 48ch; }
.sblock__q {
  margin-top: 20px;
  padding: 15px 19px;
  border-radius: 12px;
  background: var(--sb-bg, var(--o-50));
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--sb-c, var(--o-700));
}
.sblock__pts { margin-top: 24px; display: grid; gap: 2px; }
.spt {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
}
.spt:last-child { border-bottom: 1px solid var(--line-soft); }
/* 제목 · 본문 크기는 약관 페이지(.legal h2 / .legal p)와 동일하게 맞춘다 */
.spt__n { font-size: .75rem; font-weight: 800; color: var(--sb-c, var(--o-500)); padding-top: 5px; font-variant-numeric: tabular-nums; }
.spt__t { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900); }
.spt__d { display: block; margin-top: 5px; font-size: .9375rem; line-height: 1.9; color: var(--ink-500); }

.sblock--o { --sb-c: var(--o-600); --sb-bg: var(--o-50); }
.sblock--g { --sb-c: var(--g-700); --sb-bg: var(--g-50); }
.sblock--t { --sb-c: var(--t-700); --sb-bg: var(--t-50); }
.sblock--k { --sb-c: var(--ink-900); --sb-bg: var(--paper-3); }

@media (max-width: 900px) {
  .sblock { grid-template-columns: 1fr; }
  .sblock--rev .sblock__copy { order: 0; }
}

/* ==========================================================================
   ⑨ 문의 / 오시는 길
   ========================================================================== */
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}
@media (max-width: 900px) { .contact__inner { grid-template-columns: 1fr; } }

/* 좌우 표의 아래 끝선을 맞추는 변형 (오시는 길).
   기본 .contact__inner 는 align-items:start 라 왼쪽 표가 짧으면 그만큼 떠 보인다.
   두 열을 같은 높이로 늘린 뒤, 항목 수가 적은 왼쪽 표가 남는 높이를 균등하게 나눠 갖는다. */
@media (min-width: 901px) {
  .contact__inner--even { align-items: stretch; }
  .contact__inner--even > * { display: flex; flex-direction: column; }
  /* 남는 높이를 행 '사이'로 흘려보낸다.
     grid-auto-rows:1fr 로 하면 모든 행이 가장 큰 행 높이로 커져서
     왼쪽 표가 오른쪽보다 오히려 길어진다. */
  .contact__inner--even .cinfo { flex: 1 1 auto; align-content: space-between; }
  /* flex 자식은 기본으로 가로를 꽉 채운다. 라벨 알약은 글자 폭만 차지해야 한다. */
  .contact__inner--even .shead__eyebrow { align-self: flex-start; }
}

.cinfo { display: grid; gap: 2px; }
.cinfo__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 19px 0;
  border-top: 1px solid var(--line);
}
.cinfo__row:last-child { border-bottom: 1px solid var(--line); }
.cinfo__ico {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--paper-3);
  color: var(--ink-600);
}
.cinfo__ico svg { width: 20px; height: 20px; }
.cinfo__k { font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
.cinfo__v { margin-top: 5px; font-size: 1rem; font-weight: 700; letter-spacing: -.028em; color: var(--ink-900); line-height: 1.6; }
.cinfo__v small { display: block; margin-top: 3px; font-size: .8125rem; font-weight: 500; color: var(--ink-500); }
.cinfo__v a:hover { color: var(--o-600); }

/* 서비스 선택 칩 */
.pickset { display: flex; flex-wrap: wrap; gap: 8px; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink-600);
  cursor: pointer;
  transition: border-color .22s, background .22s, color .22s;
}
.pick span::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background .22s;
}
.pick:hover span { border-color: var(--ink-300); }
.pick input:checked + span { border-color: var(--o-500); background: var(--o-50); color: var(--o-700); }
.pick input:checked + span::before { background: var(--o-500); }
.pick input:focus-visible + span { outline: 2px solid var(--o-500); outline-offset: 3px; }

/* 지도 자리 */
.map-slot {
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(280px, 36vw, 440px);
  border: 1.5px dashed var(--ink-300);
  border-radius: 18px;
  background-color: var(--paper-3);
  background-image: repeating-linear-gradient(-45deg, rgba(17,24,39,.035) 0 1px, transparent 1px 10px);
  color: var(--ink-400);
  overflow: hidden;
  text-align: center;
}
.map-slot iframe { width: 100%; height: 100%; border: 0; }
.map-slot svg { width: 26px; height: 26px; margin: 0 auto 10px; }
.map-slot p { font-size: .875rem; line-height: 1.8; }

/* 실제 지도가 들어간 상태 — 안내용 점선·빗금·고정 높이를 걷어낸다.
   카카오 로프맵은 인라인 style 로 크기를 박아 넣으므로 !important 가 필요하다. */
.map-slot--live {
  display: block;
  height: auto;
  border: 1px solid var(--line);
  background-image: none;
}
.map-slot--live .root_daum_roughmap { width: 100% !important; }
.map-slot--live .root_daum_roughmap .wrap_map { height: clamp(280px, 34vw, 400px) !important; }
/* 지도 아래 카카오 기본 정보 영역은 감춘다.
   .wrap_controllers = kakaomap 로고 + 길찾기 바 / .cont = 주소 · 전화 표
   (주소는 바로 아래 '사무실 안내'에 이미 있고, 전화는 카카오 장소정보가 비어 '-' 로 나온다.
    지도 안 우측 하단의 kakao 워터마크는 그대로 남아 출처 표기는 유지된다.) */
.map-slot--live .root_daum_roughmap .wrap_controllers,
.map-slot--live .root_daum_roughmap .cont { display: none !important; }

/* 교통편 등 정의 목록 */
.deflist { display: grid; gap: 2px; }
.deflist__row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 4px;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
}
.deflist__row:last-child { border-bottom: 1px solid var(--line); }
.deflist dt { font-weight: 700; color: var(--ink-900); }
.deflist dd { margin: 0; color: var(--ink-600); line-height: 1.75; }

/* 버스 — 정류장별로 묶고, 노선마다 유형 배지를 붙인다 */
.busstop { display: block; }
.busstop + .busstop { margin-top: 18px; }
.busstop__t { display: block; font-weight: 700; color: var(--ink-900); }
.busstop__id { display: block; margin-top: 1px; font-size: .75rem; color: var(--ink-400); }
.busstop__list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 8px;
}
.busno {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-800);
  white-space: nowrap;
}
.bus {                            /* 유형 배지 — 카카오맵 색 체계를 따른다 */
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .6875rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.45;
  color: #fff;
}
.bus--gansun    { background: #2f6fd0; }   /* 간선 */
.bus--jisun     { background: #1f9a52; }   /* 지선 */
.bus--ilban     { background: #12a0a0; }   /* 일반 */
.bus--maeul     { background: #5aa832; }   /* 마을 */
.bus--gwangyeok { background: #d9443b; }   /* 광역 */

/* --------------------------------------------------------------------------
   약관 · 방침 등 긴 본문
   -------------------------------------------------------------------------- */
.legal { color: var(--ink-600); }
.legal__lead {
  margin-bottom: clamp(12px, 1.6vw, 20px);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-700);
}
.legal__items { margin: 14px 0 0; }
.legal h2 {
  margin: clamp(34px, 4vw, 46px) 0 12px;
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink-900);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { font-size: .9375rem; line-height: 1.9; }
.legal p + p { margin-top: .9em; }
.legal ol, .legal ul { margin-top: 10px; display: grid; gap: 7px; }
.legal li {
  position: relative;
  padding-left: 24px;
  font-size: .9375rem;
  line-height: 1.85;
}
.legal ol { counter-reset: legal; }
.legal ol > li::before {          /* 1. 2. 3. */
  counter-increment: legal;
  content: counter(legal) '.';
  position: absolute;
  left: 0; top: 0;
  font-weight: 700;
  color: var(--o-600);
  font-variant-numeric: tabular-nums;
}
.legal ul > li::before {          /* 점 */
  content: '';
  position: absolute;
  left: 6px; top: .78em;
  width: 5px; height: 5px;
  border-radius: 2px;
  background: var(--o-500);
  opacity: .6;
}
.legal p + ol, .legal p + ul, .legal p + .deflist { margin-top: 14px; }
.legal ol + p, .legal ul + p, .legal .deflist + p { margin-top: 1.2em; }
.legal__date {
  margin-top: clamp(34px, 4vw, 46px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink-900);
}
.legal__info { margin-top: 18px; }

/* --------------------------------------------------------------------------
   자주 묻는 질문 — 라운드 박스 + 접힘/펼침
   <details> 를 써서 JS 없이 동작한다. JS 가 꺼져 있어도 내용을 읽을 수 있다.
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 10px; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .25s, box-shadow .3s var(--e-out);
}
.faq__item[open] { border-color: transparent; box-shadow: var(--sh-2); }

.faq__q {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: clamp(16px, 2vw, 20px) clamp(18px, 2.2vw, 24px);
  cursor: pointer;
  list-style: none;                 /* 기본 삼각형 마커 제거 */
}
.faq__q::-webkit-details-marker { display: none; }
.faq__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 29px; height: 29px;
  border-radius: 9px;
  background: var(--o-50);
  color: var(--o-600);
  font-size: .875rem;
  font-weight: 800;
}
.faq__t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink-900);
}
.faq__ico {                         /* 아래를 가리키는 꺾쇠 */
  flex: none;
  width: 9px; height: 9px;
  margin-right: 3px;
  border-right: 2px solid var(--ink-400);
  border-bottom: 2px solid var(--ink-400);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--e-out), border-color .25s;
}
.faq__item[open] .faq__ico {
  transform: translateY(2px) rotate(225deg);
  border-color: var(--o-500);
}
.faq__q:hover .faq__t { color: var(--o-600); }

.faq__a {
  padding: 0 clamp(18px, 2.2vw, 24px) clamp(18px, 2.2vw, 22px);
  padding-left: calc(clamp(18px, 2.2vw, 24px) + 29px + 13px);   /* Q 배지 폭만큼 들여쓰기 */
}
.faq__a p { font-size: .875rem; line-height: 1.8; color: var(--ink-600); }
.faq__a strong { font-weight: 700; color: var(--ink-900); }

@media (max-width: 520px) {
  .faq__a { padding-left: clamp(18px, 2.2vw, 24px); }
}
@media (max-width: 600px) {
  .deflist__row { grid-template-columns: 1fr; gap: 6px; }
}