/* s-intro.css — 개편 층: 핵심부터(#highlights) · 왜 지금인가(#why) · 올바로(#allbaro).
 *
 * ★세 장은 옛 공용 규칙(.hl · .stats · .timeline · .cards · .ctable · .allbaro · .astep …)에서
 *   벗어나려고 **클래스 이름을 새로 지었다**. 옛 파일은 여러 장이 같이 쓰므로 고치지 않는다.
 *   여기서 쓰는 이름: ihl · pillar · pframe · kpi · imarq / iwhy · wtl · wpain · wreq · wvs /
 *   iab · abstep · abwin · abpoint · abnext. (.probe · .more · .pain 만 옛 조각을 덮어 쓴다)
 * ★색은 사이트 톤 안에서만 — 파랑 #2997ff · 남보라 #7d7aff · 보라 #bf5af2 · 분홍 #f064bd.
 *   상태색(안정·불안정·단절)은 제품과 같은 뜻으로만 쓴다: 연표의 «계도기간 종료» 와
 *   공단 응답 코드(0000 정상 / 9001·9004 오류)뿐이다. 장식에 쓰지 않는다.
 * ★움직임은 둘뿐이다. (1) 연표·스테퍼의 선이 **스크롤에 맞춰** 차오른다 — CSS 스크롤 연동
 *   애니메이션(view-timeline)이라 스크립트가 필요 없고, 모르는 브라우저·움직임 줄이기에서는
 *   처음부터 다 그어진 모습이다. (2) 업종 띠가 흐른다 — 움직임 줄이기면 멈춘다.
 * ★★«화면에 들어오면 .is-in» 에 기대지 않는다. site.js 는 4초 뒤 모든 data-reveal 에 .is-in 을
 *   붙이는 안전망이 있어서, 아래쪽 장의 전환은 사람이 거기까지 내려가기 전에 이미 끝나 버린다.
 *   스크롤 연동이면 «보는 순간» 에 차오른다.
 */

/* ══ 공통 — 장마다 다른 바탕 분위기 ══ */
#highlights, #why, #allbaro { position: relative; isolation: isolate; }
.ihl__ambient, .iwhy__ambient, .iab__ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ihl__ambient::after, .iab__ambient::after { content: ""; position: absolute; inset: 0; }

/* ══════════════════ 핵심부터 (#highlights) ══════════════════
 * 바탕: 가운데 푸른 발광 + 옅은 점 격자. 첫 화면(검정 + 위쪽 발광)과 도입 사례(검정)
 * 사이에서 «여기는 다른 장» 이 보이게 발광을 카드 뒤 한가운데에 둔다. */
#highlights.ihl { background: #050507; }
.ihl__ambient {
  background:
    radial-gradient(55% 38% at 50% 44%, rgba(41, 151, 255, .15), transparent 72%),
    radial-gradient(34% 30% at 12% 62%, rgba(125, 122, 255, .12), transparent 72%),
    radial-gradient(34% 30% at 88% 66%, rgba(240, 100, 189, .09), transparent 72%);
}
.ihl__ambient::after {
  background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(65% 50% at 50% 42%, #000 15%, transparent 78%);
  mask-image: radial-gradient(65% 50% at 50% 42%, #000 15%, transparent 78%);
}

/* 세 기둥 — 글이 위, 증거 그림이 아래에서 카드 밖으로 흘러내린다(애플 하이라이트 타일). */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 1001px) {
  /* ★본문 폭(1120)보다 조금 넓게 — 그림이 한 칸 360px 에 갇히면 증거가 안 읽힌다. */
  /*   지표 띠·업종 띠도 같은 폭으로 맞춘다 — 가장자리가 한 줄로 서야 한 장으로 읽힌다. */
  .pillars, .kpis, .imarq { --w: min(1240px, 100vw - 64px); width: var(--w); margin-left: calc((100% - var(--w)) / 2); }
}
.pillar {
  --hue: 41, 151, 255;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  min-height: clamp(520px, 42vw, 600px); border-radius: 30px;
  background: linear-gradient(180deg, #18181b 0%, #0e0e10 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 80px rgba(0, 0, 0, .45);
}
.pillar--2 { --hue: 125, 122, 255; }
.pillar--3 { --hue: 240, 100, 189; }
/* 아래에서 올라오는 은은한 발광 — 그림 뒤에 깔린다. */
.pillar::before {
  content: ""; position: absolute; left: 50%; bottom: -28%; width: 130%; height: 78%;
  translate: -50% 0; pointer-events: none; opacity: .8;
  background: radial-gradient(closest-side, rgba(var(--hue), .34), rgba(var(--hue), .08) 55%, transparent);
  transition: opacity .6s var(--ease);
}
/* 머리카락 굵기의 발광 테두리 — 위와 아래가 기둥 색으로 살짝 물든다. */
.pillar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--hue), .5), rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, .04) 62%, rgba(var(--hue), .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.pillar:hover::before { opacity: 1; }
.pillar__copy { position: relative; z-index: 1; padding: 36px 36px 0; }
.pillar__tag { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgb(var(--hue)); }
.pillar__icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: rgba(var(--hue), .14);
  box-shadow: inset 0 0 0 1px rgba(var(--hue), .35), 0 0 24px rgba(var(--hue), .28);
}
.pillar__icon .ico { width: 19px; height: 19px; }
.pillar h3 { margin-top: 20px; font-size: clamp(32px, 3vw, 42px); line-height: 1.04; letter-spacing: -.05em; color: #fff; }
.pillar__body { margin-top: 12px; max-width: 21em; font-size: 17px; line-height: 1.5; color: #a1a1a6; }
.pillar__proof { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; flex: 1; margin: 0; padding-top: 26px; }
.pillar__src {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  margin: 0 36px 18px; font-size: 12px; line-height: 1.4; color: #8e8e93;
}
.pillar__srcdot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--hue)); box-shadow: 0 0 10px rgba(var(--hue), .9); }

/* 액자 — 모니터 창 / 폰 / 종이. 셋 다 카드 아래로 흘러내려(음수 여백) «카드 밖으로 이어지는» 느낌. */
.pframe { position: relative; margin-top: auto; margin-bottom: -44px; transition: translate .7s var(--ease); }
.pillar:hover .pframe { translate: 0 -8px; }
.pframe img { display: block; width: 100%; height: auto; }
.pframe--window {
  width: calc(100% - 48px); overflow: hidden; border-radius: 14px 14px 0 0;
  background: #06121a; border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 -12px 70px rgba(var(--hue), .3), 0 30px 60px rgba(0, 0, 0, .6);
}
.pframe__bar {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px;
  background: linear-gradient(#2a2a2e, #1d1d20); border-bottom: 1px solid rgba(0, 0, 0, .6);
}
.pframe__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.pframe--phone {
  width: min(66%, 262px); padding: 10px 10px 0; border-radius: 44px 44px 0 0;
  background: linear-gradient(160deg, #3a3a3e, #121214 30%, #0b0b0c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 -12px 70px rgba(var(--hue), .34), 0 30px 60px rgba(0, 0, 0, .6);
}
/* 폰 화면 — 앱 바탕색(#081014, 캡처 가장자리 색)을 이어 붙여 위쪽 섬(카메라 자리)과 아래 여백을 채운다.
 * ★섬은 틀의 일부다(캡처에는 없다). 캡처의 글자 위에 겹치지 않게 캡처 **위** 여백에만 둔다. */
.pframe--phone { isolation: isolate; }
.pframe--phone::before {
  content: ""; position: absolute; inset: 10px 10px 0; z-index: -1;
  border-radius: 34px 34px 0 0; background: #081014;
}
.pframe__island { display: block; width: 84px; height: 24px; margin: 10px auto 12px; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.pframe--phone img { padding-bottom: 60px; background: #081014; }
/* 밝은 화면의 앱(업주니) — 폰 틀은 같고 화면 바탕만 앱 바탕색으로. */
.pframe--phone.pframe--light::before, .pframe--phone.pframe--light img { background: #fdfcf9; }
.pframe--sheet {
  width: min(74%, 300px); padding: 18px 16px 70px; border-radius: 18px 18px 0 0;
  background: #fffdfc; rotate: -3deg; transform-origin: 50% 100%;
  box-shadow: 0 -10px 70px rgba(var(--hue), .32), 0 24px 50px rgba(0, 0, 0, .55);
}
/* 뒤에 한 장 더 — 겹친 종이(«원장에 쌓인다») 느낌. 글자는 없다. */
.pframe--sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #e9e6ee; rotate: 6deg; transform-origin: 50% 100%; opacity: .5;
}

/* 핵심 지표 넷 — 크고 그라데이션. 네 칸을 가로지르는 한 번의 색 흐름(파랑 → 분홍)이다. */
.kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(80px, 9vw, 128px); border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 90px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.kpi { position: relative; padding: 40px 30px 38px; }
.kpi + .kpi::before {
  content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .16), transparent);
}
.kpi__value { display: flex; align-items: baseline; gap: 8px; line-height: .9; }
.kpi__value .num {
  font-family: var(--font); font-size: clamp(64px, 7vw, 108px); font-weight: 800; letter-spacing: -.06em;
  background: linear-gradient(100deg, #2997ff 0%, #7d7aff 38%, #bf5af2 66%, #f064bd 100%);
  background-size: 400% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(125, 122, 255, .28));
}
.kpi:nth-child(2) .num { background-position: 33% 0; }
.kpi:nth-child(3) .num { background-position: 66% 0; }
.kpi:nth-child(4) .num { background-position: 100% 0; }
.kpi__unit { font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; color: #f5f5f7; }
.kpi__label { margin-top: 20px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: #f5f5f7; }
.kpi__note { margin-top: 6px; font-size: 14px; line-height: 1.45; color: #8e8e93; }

/* 적용 산업 — 천천히 흐르는 띠. ★같은 목록이 두 번 이어져 있어 -50% 가 정확히 한 벌이다
 *   (그래서 간격을 gap 이 아니라 칸마다 margin-right 로 준다). 마우스를 얹으면 멈춘다. */
.imarq { display: flex; align-items: center; gap: 24px; margin-top: clamp(56px, 6vw, 84px); }
.imarq__label { flex: none; font-size: 13px; font-weight: 600; color: #8e8e93; }
.imarq__viewport {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.imarq__track { display: flex; width: max-content; animation: imarq 42s linear infinite; }
.imarq:hover .imarq__track { animation-play-state: paused; }
.imarq__track li {
  flex: none; display: flex; align-items: center; gap: 10px; margin-right: 12px; padding: 10px 18px;
  border-radius: 999px; font-size: 15px; font-weight: 500; color: #d2d2d7; white-space: nowrap;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.imarq__track li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #2997ff, #f064bd); }
@keyframes imarq { to { transform: translateX(-50%); } }

/* ══════════════════ 왜 지금인가 (#why) ══════════════════
 * 바탕: 검정 위 왼쪽 위 보라 발광 + 오른쪽 옅은 파랑. 가로 머리카락 선 격자(달력의 결). */
#why.iwhy { background: #000; }
.iwhy__ambient {
  background:
    radial-gradient(48% 34% at 16% 8%, rgba(125, 122, 255, .13), transparent 72%),
    radial-gradient(40% 30% at 92% 22%, rgba(41, 151, 255, .08), transparent 72%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 72px);
}

/* 연표 — 점과 점 사이 선이 차례로 차오르고, 마지막 점에서 붉게 멈춘다. */
.wtl { max-width: 1100px; margin-inline: auto; }
.wtl__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wtl__item { --c0: #2997ff; --c1: #7d7aff; position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 10px; text-align: center; }
.wtl__item:nth-child(2) { --c0: #7d7aff; --c1: #bf5af2; }
.wtl__item:nth-child(3) { --c0: #bf5af2; --c1: var(--state-offline); }
/* 칸마다 «내 점 → 다음 점» 선. ::before 가 바탕, ::after 가 채움. */
.wtl__item::before, .wtl__item::after {
  content: ""; position: absolute; top: 26px; left: 50%; width: 100%; height: 4px; border-radius: 4px;
}
.wtl__item::before { background: rgba(255, 255, 255, .09); }
.wtl__item::after {
  background: linear-gradient(90deg, var(--c0), var(--c1));
  box-shadow: 0 0 18px color-mix(in srgb, var(--c1) 55%, transparent);
  transform-origin: left center;
}
.wtl__item:last-child::before, .wtl__item:last-child::after { display: none; }
.wtl__node {
  position: relative; z-index: 1; width: 20px; height: 20px; margin: 18px 0 28px; border-radius: 50%;
  background: radial-gradient(circle, var(--c0) 0 32%, #000 38%);
  border: 2px solid var(--c0);
  box-shadow: 0 0 0 6px #000, 0 0 18px color-mix(in srgb, var(--c0) 70%, transparent);
}
.wtl__when {
  display: block; font-family: var(--font); font-size: clamp(32px, 3.6vw, 50px); font-weight: 800;
  line-height: 1; letter-spacing: -.045em; color: #f5f5f7;
}
.wtl__what { display: block; margin-top: 14px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.wtl__note { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: #a1a1a6; }
/* 마지막 — 계도기간 종료. 붉은 점 + 번지는 고리(2.4초에 한 번 — 1Hz 아래). */
.wtl__item.is-now { --c0: var(--state-offline); }
.wtl__item.is-now .wtl__node {
  width: 28px; height: 28px; margin: 14px 0 24px; background: var(--state-offline); border-color: #fca5a5;
  box-shadow: 0 0 0 6px #000, 0 0 34px rgba(239, 68, 68, .85);
}
.wtl__item.is-now .wtl__node::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(239, 68, 68, .6);
  animation: wtl-ring 2.4s ease-out infinite;
}
.wtl__item.is-now .wtl__when { color: var(--state-offline); text-shadow: 0 0 34px rgba(239, 68, 68, .45); }
@keyframes wtl-ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }

/* 현장의 문제 셋 — 큰 아이콘 + 한 문장. */
.wpains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(80px, 9vw, 120px); }
.wpain {
  position: relative; overflow: hidden; padding: 30px 30px 32px; border-radius: 26px;
  background: linear-gradient(180deg, #141416, #0d0d0f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.wpain__icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: #fff;
  background: linear-gradient(135deg, #2997ff, #7d7aff); box-shadow: 0 12px 34px rgba(41, 151, 255, .3);
}
.wpain:nth-child(2) .wpain__icon { background: linear-gradient(135deg, #7d7aff, #bf5af2); box-shadow: 0 12px 34px rgba(125, 122, 255, .3); }
.wpain:nth-child(3) .wpain__icon { background: linear-gradient(135deg, #bf5af2, #f064bd); box-shadow: 0 12px 34px rgba(240, 100, 189, .28); }
.wpain__icon .ico { width: 26px; height: 26px; }
.wpain h3 { margin-top: 24px; font-size: 21px; line-height: 1.3; letter-spacing: -.03em; color: #fff; }
.wpain p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: #a1a1a6; }

/* 제도가 요구하는 것 — 보이는 체크리스트. 왼쪽 머리(큰 숫자) + 오른쪽 목록. */
.wreq {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.62fr); gap: clamp(32px, 5vw, 72px);
  margin-top: 18px; padding: clamp(28px, 4vw, 56px); border-radius: 32px;
  background:
    radial-gradient(70% 110% at 0% 0%, rgba(41, 151, 255, .12), transparent 60%),
    linear-gradient(180deg, #121214, #0b0b0c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.wreq__eyebrow { font-size: 13px; font-weight: 600; color: #2997ff; }
.wreq__head h3 { margin-top: 10px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.045em; color: #fff; }
.wreq__count { display: flex; align-items: baseline; gap: 6px; margin-top: 24px; font-size: 19px; font-weight: 700; color: #f5f5f7; }
.wreq__count .num {
  font-family: var(--font); font-size: 84px; font-weight: 800; line-height: .9; letter-spacing: -.05em;
  background: linear-gradient(120deg, #2997ff, #7d7aff 50%, #f064bd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wreq__lead { margin-top: 16px; font-size: 15px; line-height: 1.55; color: #a1a1a6; }
.wreq__item { --t: 41, 151, 255; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.wreq__item:first-child { padding-top: 4px; border-top: 0; }
.wreq__item:last-child { padding-bottom: 0; }
.wreq__item--must { --t: 240, 100, 189; }
.wreq__item--ready { --t: 125, 122, 255; }
.wreq__item--channel { --t: 191, 90, 242; }
.wreq__mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: rgb(var(--t));
  background: rgba(var(--t), .16); box-shadow: inset 0 0 0 1px rgba(var(--t), .5), 0 0 20px rgba(var(--t), .2);
}
.wreq__mark { font-size: 13px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
/* ★준비 — 채운 고리가 아니라 점선 고리. «지금 되는 것» 처럼 그리지 않는다. */
.wreq__item--ready .wreq__mark { background: transparent; box-shadow: none; border: 1.5px dashed rgba(var(--t), .7); }
.wreq__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wreq__title strong { font-size: 19px; letter-spacing: -.025em; color: #fff; }
.wreq__tag {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: rgb(var(--t));
  background: rgba(var(--t), .12); border: 1px solid rgba(var(--t), .38);
}
.wreq__item--ready .wreq__tag { border-style: dashed; }
.wreq__body { margin-top: 6px; font-size: 15px; line-height: 1.55; color: #a1a1a6; }
.wmore { margin-top: 28px; }
.wmore__list .pain { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.wmore__icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #a9a7ff;
  background: rgba(125, 122, 255, .12); box-shadow: inset 0 0 0 1px rgba(125, 122, 255, .3);
}
.wmore__icon .ico { width: 18px; height: 18px; }

/* 지금까지의 계근 vs 계그니 — 오른쪽 칸 뒤에 발광 기둥(.wvs__glow)을 세운다.
 * ★기둥 위치는 열 폭(22% · 34% · 44%)에서 온다 — 열 폭을 바꾸면 left 도 같이 바꾼다. */
.wvs { max-width: 1060px; margin: clamp(88px, 10vw, 136px) auto 0; }
.wvs__title { margin-bottom: 40px; text-align: center; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -.045em; color: #fff; }
.wvs__title span { margin-inline: 10px; font-weight: 400; color: #6e6e73; }
.wvs__frame { position: relative; }
.wvs__glow {
  position: absolute; top: -14px; bottom: -14px; left: 56%; right: 0; border-radius: 26px;
  background: linear-gradient(180deg, rgba(41, 151, 255, .15), rgba(125, 122, 255, .08) 50%, rgba(240, 100, 189, .11));
  box-shadow: inset 0 0 0 1px rgba(125, 122, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 90px rgba(41, 151, 255, .18);
}
.wvs__table { position: relative; z-index: 1; width: 100%; table-layout: fixed; border-collapse: collapse; }
.wvs__c1 { width: 22%; }
.wvs__c2 { width: 34%; }
.wvs__c3 { width: 44%; }
.wvs__table th, .wvs__table td { padding: 16px 24px; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.wvs__table tbody tr:last-child > * { border-bottom: 0; }
.wvs__table thead th { padding-block: 8px 16px; font-size: 13px; font-weight: 600; color: #86868b; border-bottom-color: rgba(255, 255, 255, .1); }
.wvs__brand {
  font-size: 17px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(90deg, #2997ff, #7d7aff 52%, #f064bd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wvs__table tbody th { font-size: 15px; font-weight: 600; color: #c7c7cc; }
.wvs__table td.wvs__old { font-size: 15px; color: #86868b; }
.wvs__table td.wvs__new { font-size: 16px; font-weight: 600; color: #fff; }
.wvs__table td.wvs__new::before {
  content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 12px;
  border-radius: 50%; vertical-align: -3px; font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2997ff, #7d7aff);
}

/* ══════════════════ 올바로 (#allbaro) ══════════════════
 * 바탕: 옅은 설계도 격자 + 창 뒤 푸른 발광. «설정 화면» 장이라 기술 문서의 결을 준다. */
#allbaro.iab { background: #060709; }
.iab__ambient {
  background:
    radial-gradient(50% 42% at 34% 64%, rgba(41, 151, 255, .14), transparent 72%),
    radial-gradient(36% 30% at 86% 30%, rgba(125, 122, 255, .09), transparent 72%);
}
.iab__ambient::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 50%, #000 25%, transparent 80%);
  mask-image: radial-gradient(70% 55% at 50% 50%, #000 25%, transparent 80%);
}

/* 절차 넷 — 번호 점을 선으로 잇는 스테퍼. 선은 칸마다 «내 점 → 다음 점» 이다. */
.absteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: clamp(56px, 7vw, 92px); }
.abstep { --c0: #2997ff; --c1: #7d7aff; position: relative; }
.abstep:nth-child(2) { --c0: #7d7aff; --c1: #9d6cf7; }
.abstep:nth-child(3) { --c0: #9d6cf7; --c1: #bf5af2; }
.abstep:nth-child(4) { --c0: #bf5af2; }
.abstep::before, .abstep::after { content: ""; position: absolute; top: 27px; left: 70px; right: -14px; height: 2px; border-radius: 2px; }
.abstep::before { background: rgba(255, 255, 255, .1); }
.abstep::after { background: linear-gradient(90deg, var(--c0), var(--c1)); box-shadow: 0 0 12px color-mix(in srgb, var(--c1) 60%, transparent); transform-origin: left center; }
.abstep:last-child::before, .abstep:last-child::after { display: none; }
.abstep__no {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font-family: var(--font); font-size: 18px; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 32% 28%, #2c2c31, #0f0f12 70%);
  box-shadow: inset 0 0 0 1.5px var(--c0), 0 0 0 6px #060709, 0 0 26px color-mix(in srgb, var(--c0) 50%, transparent);
}
.abstep__body { margin-top: 22px; }
.abstep h3 { font-size: 21px; letter-spacing: -.03em; color: #fff; }
.abstep p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: #a1a1a6; }

/* 실제 설정 화면 — 제목 표시줄·그림자가 있는 앱 창. 표기는 창 밖 아래. */
.abstage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 1001px) {
  /* ★창은 본문 폭보다 넓게 — 1320px 캡처가 660px 칸에 갇히면 입력칸 글자가 안 읽힌다. */
  .abstage { --w: min(1240px, 100vw - 64px); width: var(--w); margin-left: calc((100% - var(--w)) / 2); grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 36px; }
}
.abwin { position: relative; margin: 0; }
.abwin::after {
  /* 창 아래로 번지는 빛 — 바닥에 비친 화면 빛. */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 18px; height: 70px; z-index: -1;
  background: radial-gradient(closest-side, rgba(41, 151, 255, .35), transparent); filter: blur(10px);
}
.abwin__frame {
  overflow: hidden; border-radius: 12px; background: #0b1318;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 50px 110px rgba(0, 0, 0, .75), 0 0 120px rgba(41, 151, 255, .16);
}
.abwin__bar {
  display: flex; align-items: center; justify-content: space-between; height: 34px; padding-left: 14px;
  background: linear-gradient(#2e3035, #222428); border-bottom: 1px solid rgba(0, 0, 0, .7);
  font-size: 12px; font-weight: 500; color: #c7c7cc;
}
.abwin__title { display: inline-flex; align-items: center; gap: 8px; }
.abwin__title::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, #2997ff, #7d7aff); }
.abwin__ctl { display: flex; height: 100%; }
.abwin__ctl i { position: relative; width: 44px; height: 100%; }
.abwin__ctl i::before, .abwin__ctl i::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.abwin__min::before { width: 10px; height: 1px; background: #aeaeb2; }
.abwin__max::before { width: 9px; height: 9px; border: 1px solid #aeaeb2; }
.abwin__close::before, .abwin__close::after { width: 12px; height: 1px; background: #aeaeb2; }
.abwin__close::before { rotate: 45deg; }
.abwin__close::after { rotate: -45deg; }
.abwin img { display: block; width: 100%; height: auto; }
.abwin figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; font-size: 13px; color: #8e8e93; }
.abwin__zoom { margin-left: auto; font-size: 13px; color: #2997ff; }
.abwin__zoom::after { content: " ↗"; }
.abwin__real {
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #2997ff;
  border: 1px solid rgba(41, 151, 255, .45); background: rgba(41, 151, 255, .1);
}
/* 접속 확인 예시 — 유리 패널. (옛 .probe 조각을 이 장에서만 덮는다) */
#allbaro .probe {
  padding: 30px; border-radius: 26px; color: #f5f5f7;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 80px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
#allbaro .probe__row { background: rgba(0, 0, 0, .35); }

/* 요점 넷 — 작은 타일. */
.abpoints { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 6vw, 80px); }
.abpoint { padding: 24px 24px 26px; border-radius: 22px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.abpoint__tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #a9a7ff; background: rgba(125, 122, 255, .12); border: 1px solid rgba(125, 122, 255, .35); }
.abpoint h3 { margin-top: 14px; font-size: 18px; line-height: 1.3; letter-spacing: -.025em; color: #fff; }
.abpoint p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: #a1a1a6; }

/* 다음 단계 — 점선 상자 = 아직 아닌 것. */
.abnext {
  display: flex; align-items: flex-start; gap: 16px; margin-top: 18px; padding: 20px 24px;
  border: 1px dashed rgba(255, 255, 255, .26); border-radius: 20px; font-size: 15px; line-height: 1.6; color: #a1a1a6;
}
.abnext strong {
  flex: none; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: #a9a7ff; border: 1px dashed rgba(125, 122, 255, .65);
}

/* ══ 좁은 화면 ══ */
@media (max-width: 1000px) {
  .pillars { grid-template-columns: 1fr; gap: 18px; }
  .pillar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 380px; }
  .pillar__copy { padding-bottom: 36px; }
  .pillar__proof { padding-top: 36px; }
  .pillar__src { margin-inline: 0 24px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3)::before { display: none; }
  .kpi:nth-child(n + 3) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
  .wpains { grid-template-columns: 1fr; }
  .wreq { grid-template-columns: 1fr; }
  .abstage { grid-template-columns: 1fr; }
  .abpoints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* 스테퍼는 세로로 — 선이 점 아래로 내려간다. */
  .absteps { grid-template-columns: 1fr; gap: 28px; }
  .abstep { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; }
  .abstep__body { margin-top: 4px; }
  .abstep::before, .abstep::after { top: 64px; left: 27px; right: auto; width: 2px; height: calc(100% - 44px); }
  .abstep::after { background: linear-gradient(180deg, var(--c0), var(--c1)); transform-origin: center top; }
}
@media (max-width: 720px) {
  /* 연표도 세로로 — 점이 왼쪽에 서고 선이 아래로 내려간다. */
  .wtl__list { grid-template-columns: 1fr; gap: 34px; }
  .wtl__item { align-items: flex-start; padding: 0 0 0 52px; text-align: left; }
  .wtl__item::before, .wtl__item::after { top: 18px; left: 12px; width: 4px; height: calc(100% + 34px); }
  .wtl__item::after { background: linear-gradient(180deg, var(--c0), var(--c1)); transform-origin: center top; }
  .wtl__node { position: absolute; left: 4px; top: 4px; margin: 0; }
  .wtl__item.is-now .wtl__node { left: 0; top: 0; margin: 0; }
  .wtl__what { margin-top: 10px; }

  /* 비교표 — ★카드 9장이 아니라 **빽빽한 행** 이다. 행마다 «항목 / 옛 방식(흐리게) → 계그니(굵게)».
     ★카드로 쌓았더니 이 표만 1,340px 였다(개편 검토 지적: 같은 모양 카드 9장 · #why 4,300px). */
  .wvs__glow, .wvs__table colgroup { display: none; }
  .wvs__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wvs__table, .wvs__table tbody, .wvs__table tr, .wvs__table th, .wvs__table td { display: block; width: auto; }
  .wvs__table tr {
    display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 2px 12px; align-items: baseline;
    padding: 11px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .wvs__table tbody tr:last-child { border-bottom: 0; }
  .wvs__table th, .wvs__table td { padding: 0; border: 0; }
  .wvs__table tbody th { grid-row: span 2; font-size: 13px; color: #2997ff; }
  /* ★취소선을 긋지 않는다 — «차량 식별: RFID·번호인식기 → 그대로 활용» 처럼 옛 것을 살리는 행이 있다. */
  .wvs__table td.wvs__old { font-size: 13px; color: #6e6e73; }
  .wvs__table td.wvs__new { font-size: 15px; }
  .wvs__table td.wvs__old::before, .wvs__table td.wvs__new::before { content: none; }
  .wreq__item { padding: 14px 0; }
  .wreq__title strong { font-size: 17px; }
  .wreq__body { font-size: 14px; }
}
@media (max-width: 640px) {
  .pillar { display: flex; min-height: 0; border-radius: 26px; }
  .pillar__copy { padding: 28px 26px 0; }
  .pillar__proof { padding-top: 24px; min-height: 280px; }
  .pillar__src { margin-inline: 26px; }
  .pillar h3 { font-size: 32px; }
  .pillar__body { font-size: 16px; }
  .kpi { padding: 28px 18px 26px; }
  .kpi__value .num { font-size: clamp(52px, 15vw, 64px); }
  .kpi__label { margin-top: 14px; font-size: 16px; }
  .kpi__note { font-size: 13px; }
  .imarq { flex-direction: column; align-items: stretch; gap: 14px; }
  .imarq__label { text-align: left; }
  .wpain { padding: 24px; }
  .wreq { padding: 26px 20px; border-radius: 24px; }
  .wreq__count .num { font-size: 64px; }
  .wvs__title { text-align: left; font-size: 28px; }
  .abpoints { grid-template-columns: 1fr; }
  .abnext { flex-direction: column; gap: 10px; padding: 18px 20px; }
  #allbaro .probe { padding: 24px; }
}

/* ══ 스크롤에 맞춰 차오르는 선 (연표 · 스테퍼) ══
 * ★점 i 에서 다음 점까지의 선(::after)이 스크롤 구간의 한 조각씩을 맡는다. 점은 선이 닿는 순간 켜진다.
 *   구간 값(cover %)은 «장이 화면 아래에서 가운데로 올라오는 동안» 이 다 차도록 잡았다.
 * ★모르는 브라우저·움직임 줄이기에서는 이 블록 전체가 없는 셈 — 처음부터 다 그어져 있다. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wtl { view-timeline-name: --wtl; }
    .absteps { view-timeline-name: --abs; }
    .wtl__item::after, .wtl__node { animation: linear both; animation-timeline: --wtl; }
    .abstep::after, .abstep__no { animation: linear both; animation-timeline: --abs; }
    .wtl__item::after, .abstep::after { animation-name: fill-x; }
    .wtl__node { animation-name: wtl-node; }
    .abstep__no { animation-name: ab-node; }
    .wtl__item:nth-child(1)::after { animation-range: cover 10% cover 19%; }
    .wtl__item:nth-child(2)::after { animation-range: cover 19% cover 28%; }
    .wtl__item:nth-child(3)::after { animation-range: cover 28% cover 37%; }
    .wtl__item:nth-child(1) .wtl__node { animation-range: cover 7% cover 10%; }
    .wtl__item:nth-child(2) .wtl__node { animation-range: cover 18.5% cover 20%; }
    .wtl__item:nth-child(3) .wtl__node { animation-range: cover 27.5% cover 29%; }
    .wtl__item:nth-child(4) .wtl__node { animation-range: cover 36.5% cover 39%; }
    .abstep:nth-child(1)::after { animation-range: cover 8% cover 17%; }
    .abstep:nth-child(2)::after { animation-range: cover 17% cover 26%; }
    .abstep:nth-child(3)::after { animation-range: cover 26% cover 35%; }
    .abstep:nth-child(1) .abstep__no { animation-range: cover 5% cover 8%; }
    .abstep:nth-child(2) .abstep__no { animation-range: cover 16.5% cover 18%; }
    .abstep:nth-child(3) .abstep__no { animation-range: cover 25.5% cover 27%; }
    .abstep:nth-child(4) .abstep__no { animation-range: cover 34.5% cover 36%; }
  }
}
/* 끝 값(to)은 적지 않는다 — 각 점·선의 원래 모양(파랑·보라·붉은 점)으로 돌아간다. */
@keyframes fill-x { from { transform: scaleX(0); } }
@keyframes fill-y { from { transform: scaleY(0); } }
@keyframes wtl-node { from { background: #000; border-color: rgba(255, 255, 255, .22); box-shadow: 0 0 0 6px #000; } }
@keyframes ab-node { from { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), 0 0 0 6px #060709; } }
@media (max-width: 900px) { .abstep::after { animation-name: fill-y; } }
@media (max-width: 720px) { .wtl__item::after { animation-name: fill-y; } }

/* ══ 움직임 줄이기 ══ — 흐르는 띠는 멈추고 한 벌만 여러 줄로. 고리 번짐도 끈다. */
@media (prefers-reduced-motion: reduce) {
  .imarq__track { flex-wrap: wrap; justify-content: center; gap: 10px 0; width: auto; animation: none; }
  .imarq__dup { display: none !important; }
  .imarq__viewport { -webkit-mask-image: none; mask-image: none; }
  .wtl__item.is-now .wtl__node::after { animation: none; opacity: 0; }
  .pframe, .pillar::before { transition: none; }
  .pillar:hover .pframe { translate: none; }
}