/* owner: consulting / spec §5.3 — 레이아웃·간격만. 색은 밴드 변수(--fg/--fg-2/--line/--mint/--contour-line/--node-*)만 참조. */
.sec-consulting{overflow:clip}
.sec-consulting__block{margin-top:var(--s-9)}
@media (max-width:767px){.sec-consulting__block{margin-top:var(--s-8)}}

/* 5.3-2 대상 고객 — 제목 18px */
.csl-targets .hairlist__title{font-size:1.125rem}

/* 5.3-3 방법론 계단 타임라인 — 트랙·간격·상승 조각 치수는 .stair 의 변수 한 곳에서만 관리(px 단위 없는 숫자, calc 에서 ×1px)
   --stair-track-h 200 : 트랙 높이 · --stair-gap 24 : 트랙→본문 margin · --stair-rise 48 : 상승 조각 높이(24×48 SVG)
   레벨 y_k = 168 − 48k (168/120/72/24) · 노드 top = y_k − (트랙 + 간격) = y_k − 224 (본문 기준 좌표) */
.stair{position:relative;--stair-track-h:200;--stair-gap:24;--stair-rise:48}
.stair__track{position:relative;height:calc(var(--stair-track-h) * 1px);display:grid;grid-template-columns:repeat(4,1fr)}
.stair__col{position:relative}
.stair__col:nth-child(1),.stair__step:nth-child(1){--y:168}
.stair__col:nth-child(2),.stair__step:nth-child(2){--y:120}
.stair__col:nth-child(3),.stair__step:nth-child(3){--y:72}
.stair__col:nth-child(4),.stair__step:nth-child(4){--y:24}
.stair__line{position:absolute;left:0;right:24px;top:calc(var(--y) * 1px);height:1.5px;background:var(--contour-line)}
.stair__col:nth-child(4) .stair__line{right:0}
.stair__line-fill{position:absolute;left:0;right:24px;top:calc(var(--y) * 1px - .25px);height:2px;background:var(--mint);transform-origin:left}
.stair__col:nth-child(4) .stair__line-fill{right:0}
.stair__riser,.stair__riser-fill{position:absolute;right:0;top:calc((var(--y) - var(--stair-rise)) * 1px);width:24px;height:calc(var(--stair-rise) * 1px);display:block;overflow:visible}
.stair__riser{color:var(--contour-line)}
.stair__riser-fill path{stroke:var(--mint)}
/* 본문 4컬럼 — 트랙과 같은 컬럼 폭(gap 대신 padding-right 32px)이라 노드 x=50% 가 정확히 일치 */
.stair__body{display:grid;grid-template-columns:repeat(4,1fr);margin-top:calc(var(--stair-gap) * 1px)}
.stair__step{position:relative;padding-right:32px}
.stair__node{position:absolute;left:50%;top:calc((var(--y) - var(--stair-track-h) - var(--stair-gap)) * 1px);transform:translate(-50%,-50%);transition:transform 150ms var(--ease)}
.stair__node.is-pop{transform:translate(-50%,-50%) scale(1.25)}
.stair__num{display:block;font:800 var(--fs-num)/1 var(--ff);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-heading);color:var(--fg)}
.stair__name{margin-top:12px;font:700 var(--fs-item)/1.35 var(--ff);color:var(--fg)}
.stair__desc{margin-top:8px;font:500 var(--fs-small)/1.7 var(--ff);color:var(--fg-2)}
.stair__out{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
@media (max-width:767px){
  /* 세로 레일 변형: 트랙 = 좌측 2px 레일(높이 = 본문), 상승 조각 없음, 본문 padding-left 56px */
  .stair__track{position:absolute;left:24px;top:0;bottom:0;width:2px;height:auto;grid-template-columns:none;grid-template-rows:repeat(4,1fr)}
  .stair__line,.stair__col:nth-child(4) .stair__line{left:0;right:auto;top:0;bottom:0;width:1.5px;height:auto}
  .stair__line-fill,.stair__col:nth-child(4) .stair__line-fill{left:-.25px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:top}
  .stair__riser,.stair__riser-fill{display:none}
  .stair__body{grid-template-columns:1fr;gap:32px;margin-top:0;padding-left:56px}
  .stair__step{padding-right:0}
  .stair__node{left:-31px;top:20px}
}

/* 5.3-4 서비스 라인 6 — 번호 01~06 은 계단 숫자와 같은 40px 800 tabular 네이비(.mask 로 솟음), 제목 24px */
.svc .hairlist__num{font:800 var(--fs-num)/1 var(--ff);letter-spacing:var(--ls-heading);color:var(--fg);margin-bottom:16px}
.svc .hairlist__title{font-size:1.5rem;transition:color var(--d-hover) var(--ease)}
.svc__sub{display:flex;flex-wrap:wrap;gap:0 .5em;margin-top:10px;font:500 var(--fs-caption)/1.6 var(--ff);letter-spacing:var(--ls-caption);color:var(--fg-2)}
.svc__sub li:not(:last-child)::after{content:"·";margin-left:.5em;color:var(--deco)}
@media (hover:hover){.svc .hairlist__item:hover .hairlist__title{color:var(--link)}}

/* 5.3-5 차별점 4 — 4/8, 좌측 sticky(헤더 높이 + 32px). 항목 = [40px 번호 | 점 | 제목·설명 | 순환 아이콘], 상단 헤어라인은 .grow 로 좌→우 드로잉 */
.why{display:grid;gap:var(--grid-gap)}
@media (min-width:1024px){
  .why{grid-template-columns:repeat(12,1fr)}
  .why__aside{grid-column:1/5;position:sticky;top:calc(var(--header-h) + var(--s-6));align-self:start}
  .why__list{grid-column:5/13}
}
.why__item{position:relative;display:grid;grid-template-columns:64px 16px 1fr auto;gap:8px 12px;padding:24px 0;align-items:start}
.why__rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.why__num{grid-column:1;grid-row:1/3;display:block;font:800 var(--fs-num)/1 var(--ff);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-heading);color:var(--fg)}
.why__item .dot{grid-column:2;grid-row:1;margin-top:.6em}
.why__title{grid-column:3;grid-row:1;font:700 var(--fs-item)/1.35 var(--ff);color:var(--fg)}
.why__cycle{grid-column:4;grid-row:1/3;display:block;width:64px;height:64px;color:var(--fg)}
.why__desc{grid-column:3;grid-row:2;font:500 var(--fs-small)/1.7 var(--ff);color:var(--fg-2)}
@media (max-width:767px){
  .why__item{grid-template-columns:56px 16px 1fr auto}
  .why__cycle{width:48px;height:48px;grid-row:1}
  .why__desc{grid-column:3/5}
}

/* 5.3-6 CTA — 제목을 --fs-h3(20→24px) 700 으로 (컴포넌트 기본 22px 대비 섹션 오버라이드) */
.sec-consulting .cta-box__title{font-size:var(--fs-h3);line-height:1.3}

/* 모션 — 계단 진행선·노드 점등 (data-manual: JS 가 .is-in → .is-lit → 노드 .is-lit/.is-pop 순차 부여). 기본 = 완성 상태 */
@media (prefers-reduced-motion: no-preference){
  html.js:not([data-motion="reduce"]) .stair__line-fill{transform:none;transition:transform 300ms var(--ease);transition-delay:calc(var(--k,0) * 150ms)}
  html.js:not([data-motion="reduce"]) .stair:not(.is-lit) .stair__line-fill{transform:scaleX(0)}
  html.js:not([data-motion="reduce"]) .stair__riser-fill path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 150ms linear;transition-delay:calc(var(--k,0) * 150ms)}
  html.js:not([data-motion="reduce"]) .stair:not(.is-lit) .stair__riser-fill path{stroke-dashoffset:1}
  html.js:not([data-motion="reduce"]) .stair__node.node:not(.is-lit){background:var(--node-fill);border-color:var(--node-stroke)}
}
@media (prefers-reduced-motion: no-preference) and (max-width:767px){
  html.js:not([data-motion="reduce"]) .stair:not(.is-lit) .stair__line-fill{transform:scaleY(0)}
  html.js:not([data-motion="reduce"]) .stair__line.grow:not(.is-in){transform:scaleY(0);transform-origin:top}
}