/* 03-solution — 현장 데이터 솔루션 (spec §5.4). 레이아웃·간격만. 색은 밴드 변수·토큰 변수만 참조. */

/* 섹션 루트 + 도트 그리드 배경(§4.8, opacity 절반) */
.sec-solution{overflow-x:clip}
.sec-solution::before{
  content:"";position:absolute;inset:0;z-index:var(--z-contour);pointer-events:none;opacity:.5;
  background-image:radial-gradient(var(--c-ink-dots) .6px,transparent .8px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 65% 45%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 60% at 65% 45%,#000 40%,transparent 100%)
}
.sec-solution>.container{position:relative;z-index:var(--z-content)}

/* 섹션 헤더: 라벨 + 상태 태그 한 줄 */
.sol__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}

/* 블록 간격 */
.sol__block+.sol__block{margin-top:var(--s-9)}
@media (max-width:767px){.sol__block+.sol__block{margin-top:var(--s-8)}}

/* ---------- 파이프라인 ---------- */
.pipe{position:relative}
.pipe__grid{display:grid;grid-template-columns:1fr}
.pipe__head{font:500 var(--fs-label)/1.4 var(--ff);letter-spacing:var(--ls-label);color:var(--fg-2);padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.pipe__col{display:grid}
.pipe__text{display:flex;flex-direction:column;min-width:0}
.pipe__label{font:500 var(--fs-small)/1.4 var(--ff);color:var(--fg)}
.pipe__sub{font:500 var(--fs-caption)/1.4 var(--ff);color:var(--fg-2);margin-top:2px}
.pipe__shape{width:16px;height:16px;flex:none;display:block;color:var(--fg)}
.pipe__in{display:flex;align-items:center;gap:12px;min-height:56px}
.pipe__out{display:flex;align-items:center;gap:12px;min-height:64px}
.pipe__out .dot{transform-origin:center;margin:0 5px}  /* <768: 6px 점 중심 x=8 = 입력 아이콘(16px) 중심, 텍스트 x=28 정렬 */

/* 중앙 레이어: 시간축 눈금(상단 8px, 팔레트 1색 반복) + 등고선 단면 + 라벨 */
.pipe__layer{position:relative;height:96px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:10px}
.pipe__ticks{position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,var(--c-ink-line-3) 0 1px,transparent 1px 40px)}
.pipe__section{position:absolute;left:0;top:8px;width:100%;height:56px;display:block;overflow:visible}
.pipe__section path{stroke:var(--contour-line);stroke-width:1}
.pipe__section--top path{stroke:var(--mint);stroke-width:1.5}
.pipe__layer .pipe__label{position:relative;padding-left:28px}  /* <768: 입력·활용 텍스트(x=28)와 정렬 */

/* 커넥터: <768 = 아이콘 컬럼(x=8)에 맞춘 CSS 세로선 1개(32px) + 끝 hollow 노드 / ≥768 = 48×288 px 고정 svg
   세로선 x: 아이콘 16px 중심 8 → left 7px·width 1px. 노드 10px: left 3px(중심 8)·top 31px(선 끝 32와 접함). 총 높이 44px */
.pipe__conn{position:relative;height:44px}
.pipe__conn::before{content:"";position:absolute;left:7px;top:0;width:1px;height:32px;background:var(--c-ink-line-3)}
.pipe__conn .node{position:absolute;left:3px;top:31px;transform-origin:center}
.pipe__conn path,.pipe__conn line{stroke:var(--c-ink-line-3);stroke-width:1}
.pipe__conn--h{display:none}
.packet{display:none}

/* 설명문 */
.pipe__desc{margin-top:var(--s-6);max-width:40em;font:400 var(--fs-lead)/1.7 var(--ff);color:var(--fg-2)}

@media (min-width:768px){
  .pipe__grid{grid-template-columns:3fr 48px 4fr 48px 3fr;grid-template-rows:auto 288px}
  .pipe__head{margin-bottom:12px}
  .pipe__head--in{grid-area:1/1}
  .pipe__head--layer{grid-area:1/3}
  .pipe__head--out{grid-area:1/5}
  .pipe__col--in{grid-area:2/1;grid-template-rows:repeat(4,72px)}
  .pipe__conn--l{grid-area:2/2}
  .pipe__col--layer{grid-area:2/3;grid-template-rows:repeat(3,96px)}
  .pipe__conn--r{grid-area:2/4}
  .pipe__col--out{grid-area:2/5;grid-template-rows:repeat(3,96px)}
  .pipe__in{height:72px;min-height:0;padding-right:12px}
  .pipe__out{height:96px;min-height:0;padding-left:12px}
  .pipe__out .dot{margin:0}
  .pipe__layer .pipe__label{padding-left:12px}
  .pipe__conn{width:48px;height:288px}
  .pipe__conn::before,.pipe__conn .node{display:none}
  .pipe__conn--h{display:block;position:absolute;left:0;top:0;width:48px;height:288px;overflow:visible}
  /* 신호 패킷: 커넥터 svg와 같은 px 좌표계의 offset-path. 기본 opacity 0(1회 재생 후에도 0). */
  .packet{display:block;position:absolute;top:0;left:0;width:4px;height:4px;border-radius:50%;background:var(--mint);opacity:0;offset-rotate:0deg;offset-distance:0%}
  .packet--0{offset-path:path('M0,36 C24,36 24,48 48,48')}
  .packet--1{offset-path:path('M0,180 C24,180 24,144 48,144')}
  .packet--2{offset-path:path('M0,48 C24,48 24,48 48,48')}
}
@media (min-width:768px) and (max-width:1023px){
  .pipe__label{font-size:var(--fs-caption)}
}

/* ---------- 3단계 기능: 번호 40px 800 tabular(var(--fg-3) 유지 — #7A8494 텍스트 금지) · 제목 24px ---------- */
.sol__features .hairlist__num{font-size:var(--fs-num);color:var(--fg);margin-bottom:16px}
.sol__features .hairlist__title{font-size:1.5rem;line-height:1.3}

/* ---------- 로드맵 ----------
   선 2조각: ::after = 시작→현재 노드 var(--fg) 1.5px(그리기) / ::before = 현재 노드 이후 var(--c-ink-line-3) 1px.
   <768 세로: padding-top 24 + mark top 3 + 노드 반지름 6 → 현재 노드 중심 y=33 (x: left 5 + 12px 노드 → 중심 6)
   ≥768 가로: padding-left 40(시간축 눈금 간격과 동일) + 노드 반지름 6 → 현재 노드 중심 x=46 (y: top 0 → 중심 6) */
.roadmap{position:relative;display:grid;gap:20px;padding-top:24px}
.roadmap::before{content:"";position:absolute;left:5px;top:33px;bottom:10px;width:1px;background:var(--c-ink-line-3)}
.roadmap::after{content:"";position:absolute;left:5px;top:0;width:1.5px;height:33px;background:var(--fg);display:none}
.roadmap__step{position:relative;padding-left:28px;min-height:12px}
.roadmap__mark{position:absolute;left:0;top:3px;width:12px;height:12px;display:block;transform-origin:center}
.roadmap__mark .node{position:absolute;inset:0;display:block}
.roadmap__ring{position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--mint);opacity:.6;transform-origin:center;pointer-events:none}
.roadmap__label{display:block;font:500 var(--fs-caption)/1.5 var(--ff);color:var(--fg-2)}
.roadmap__step.is-current .roadmap__label{color:var(--fg)}
@media (min-width:768px){
  .roadmap{grid-template-columns:repeat(3,1fr);gap:32px;padding-top:0;padding-left:40px}
  .roadmap::before{left:46px;right:0;top:5px;bottom:auto;width:auto;height:1px}
  .roadmap::after{display:block;left:0;top:5px;width:46px;height:1.5px}
  .roadmap__step{padding-left:0;padding-top:28px}
  .roadmap__mark{top:0}
}

/* ---------- 모션(섹션 전용 오버라이드) — 기본 상태 = 완성 상태 ---------- */
/* 단절 문자 A~E: 400→800 font-variation-settings 400ms 1회(≥768만, <768은 800 고정. will-change 없음) */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  html.js:not([data-motion="reduce"]) .sec-solution .ledger__key{font-variation-settings:'wght' 400;transition:font-variation-settings 400ms var(--ease)}
  html.js:not([data-motion="reduce"]) .sec-solution .ledger__row.is-in .ledger__key{font-variation-settings:'wght' 800}
  html.js:not([data-motion="reduce"]) .sec-solution .ledger__row.st-1 .ledger__key{transition-delay:var(--st-1)}
  html.js:not([data-motion="reduce"]) .sec-solution .ledger__row.st-2 .ledger__key{transition-delay:var(--st-2)}
  html.js:not([data-motion="reduce"]) .sec-solution .ledger__row.st-3 .ledger__key{transition-delay:var(--st-3)}
  html.js:not([data-motion="reduce"]) .sec-solution .ledger__row.st-4 .ledger__key{transition-delay:var(--st-4)}
}
/* <768 커넥터 세로선: scaleY 0→1 600ms(grow--y 어휘와 동일값, ::before 라 섹션에서 정의). 노드는 .pop.st-6 */
@media (prefers-reduced-motion:no-preference) and (max-width:767px){
  html.js:not([data-motion="reduce"]) .sec-solution .pipe__conn::before{transform:scaleY(0);transform-origin:top;transition:transform 600ms var(--ease)}
  html.js:not([data-motion="reduce"]) .sec-solution .pipe__conn.is-in::before{transform:none}
  html.js:not([data-motion="reduce"]) .sec-solution .roadmap::after{transform:scaleY(0);transform-origin:top;transition:transform 600ms var(--ease) var(--st-3)}
}
/* 로드맵 fg 선: grow 어휘(scaleX 0→1 600ms, origin left)를 ::after 에 재현 — ol 은 li 외 자식을 못 가져 의사요소 사용 */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  html.js:not([data-motion="reduce"]) .sec-solution .roadmap::after{transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease) var(--st-3)}
}
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion="reduce"]) .sec-solution .roadmap.is-in::after{transform:none}
  /* 커넥터: drawLine 600ms, 50ms 스태거(--k 0..11) */
  html.js:not([data-motion="reduce"]) .sec-solution .pipe__conn.is-in path,
  html.js:not([data-motion="reduce"]) .sec-solution .pipe__conn.is-in line{animation-duration:600ms;animation-delay:calc(var(--k,0) * 50ms)}
  /* 레이어 단면: 하단부터 200ms 스태거(--k 0=하단, 2=최상단) */
  html.js:not([data-motion="reduce"]) .sec-solution .pipe__section.is-in path{animation-delay:calc(var(--k,0) * 200ms)}
  /* 신호 패킷: .pipe.is-run 시 2400ms linear 1회, 지연 0/800/1600ms, 종료 후 opacity 0 */
  @supports (offset-path: path('M0,0 L1,1')){
    html.js:not([data-motion="reduce"]) .sec-solution .pipe.is-run .packet{animation:solPacketRun 2400ms linear calc(var(--k,0) * 800ms) 1 forwards}
  }
  @keyframes solPacketRun{
    0%{offset-distance:0%;opacity:1}
    92%{opacity:1}
    100%{offset-distance:100%;opacity:0}
  }
}