/* ═══════════════════════════════════════════════════════════════════════════
   site.css — KEYSTONE 시안 공통 스타일 (2026-08-17 index.html 에서 추출)
   전 페이지가 이 파일 하나를 본다. 페이지 고유 스타일만 각 문서의 <style> 에 둔다.
   토큰은 tokens.storey.css · design-systems/keystone/tokens.css 에서만 온다 — hex 하드코딩 금지.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ══ 리셋 ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
/* 등장 모션(translateX)이 잠깐 화면 밖으로 나가며 가로 스크롤을 만든다 — clip 으로 막는다.
   hidden 과 달리 clip 은 스크롤 컨테이너를 만들지 않아 위치 계산에 영향이 없다. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--c-canvas);
  color:var(--c-ink);
  font-family:var(--ks-font-kr);
  font-size:var(--ks-w-body);
  line-height:var(--ks-w-lh-body);
  letter-spacing:var(--ks-w-track-kr);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ══ 공용 유틸 (STOREY 문법) ═══════════════════════════════════════════ */
.en{
  font-family:var(--ks-font-en);
  letter-spacing:var(--ks-w-track-en);
  text-transform:uppercase;
}
.label{font-size:var(--ks-w-micro);line-height:1.4;text-align:left;color:var(--sty-accent)}
.measure{max-width:var(--sty-measure)}
.dark{background:var(--c-ink);color:var(--c-canvas)}
.dark .rule{border-color:var(--c-line-on-dark)}
.dark .muted{color:var(--c-body-on-dark)}
.dark .label{color:var(--c-accent-on-dark)}
.muted{color:var(--c-body)}
.rule{border:0;border-top:var(--sty-hairline) solid var(--c-line)}

/* STOREY: 섹션 간 10vw / 모바일은 배율을 따로 올린다 */
.sec{padding-block:var(--sty-sec)}
/* 섹션 구분 — 좌우 여백 없는 전폭 헤어라인 (2026-08-18 대표 지시).
   다크·틴트처럼 배경이 이미 갈리는 경계에서는 배경이 구분을 맡고 선은 겹치지 않는다. */
main .sec{border-top:var(--sty-hairline) solid var(--c-line)}
main .sec.dark,main .dark + .sec,main .sec--deep + .sec,main .sec--tint + .sec,
main .phero + .sec,main .phero--img + .sec{border-top-color:transparent}
main .sec--deep,main .sec--tint{border-top-color:transparent}
/* ── 배색 2톤 ──────────────────────────────────────────────────────────
   팔레트에 블루 계열이 3단(틴트·틴트중·액센트) 있는데 v3 까지 하나도 안 쓰고
   중성(흰·차콜)만 돌려 썼다 — 그래서 단일 톤으로 보였다.
   라이트 섹션을 **중성 면 ↔ 블루 틴트 면**으로 교대시켜 두 톤이 번갈아 오게 한다. */
.sec--tint{background:var(--c-tint)}
.sec--deep{background:var(--c-tint-deep)}
/* 진한 틴트면(#C1C8D6) 위에서는 액센트 원색이 3.82:1 밖에 안 나온다 — 10px 라벨엔 부족.
   같은 계열을 유지한 채 잉크를 섞어 대비를 올린다. */
.sec--deep{--step-mark:color-mix(in srgb, var(--c-accent) 72%, var(--c-ink));
  --rule-c:color-mix(in srgb, var(--c-ink) 45%, var(--c-tint-deep))}
.sec--deep .label,.sec--deep .step__no{color:var(--step-mark)}
/* 진한 틴트면 위에서 --c-line(#C2C2C2) 은 배경과 명도가 겹쳐 선이 사라진다. */
.sec--deep .steps{border-top-color:var(--rule-c)}

/* ══ 점 매트릭스 아이콘 ═════════════════════════════════════════════════
   STOREY 의 유일한 그래픽 시그니처. 로고 옆·모든 CTA 우측에 반복되고 호버 시 회전한다.
   원본은 이미지, 여기서는 자체 SVG(라이브러리·외부 에셋 0). */
.dots{width:1.1em;height:1.1em;flex:none;transition:transform var(--sty-dur-base) var(--sty-ease-in-out)}
a:hover .dots,button:hover .dots{transform:rotate(115deg)}

/* ══ 헤더 ══════════════════════════════════════════════════════════════
   STOREY: 배경 판 없음. 사진 위에 텍스트만 뜨고 섹션 명도에 따라 색만 500ms 전환.

   ⚠️ 그 순정 방식이 한글에서 깨진다. 히어로를 지나면 본문이 헤더 밴드를 통과하는데,
   판이 없으니 nav 글자와 본문 글자가 같은 자리에서 포개져 둘 다 못 읽게 된다
   (측정 3단계 §3 에서 재현). 라틴 + 큰 여백인 원본에서는 덜 드러나는 고장이다.

   해법은 **이전 KEYSTONE 시안(홈_시안_v2.html `.gnb.solid`)이 이미 쓰던 것**을 계승:
   히어로 위에서는 판 없음(STOREY 순정 유지), 히어로를 지나야 옅은 스크림이 깔린다.
   값도 그 시안 그대로 — canvas 78% + blur 8px + saturate 1.2. */
.hdr{
  position:fixed;top:0;left:0;width:100%;z-index:40;
  padding-top:1.5vw;padding-bottom:.6vw;
  color:var(--c-canvas);
  transition:color var(--sty-dur-slow) var(--sty-ease-in-out),
             background var(--sty-dur-slow) var(--sty-ease-in-out);
}
.hdr.on-light{color:var(--c-ink)}
/* 히어로를 지난 뒤에만 판이 생긴다 */
.hdr.scrimmed{background:color-mix(in srgb, var(--c-ink) 62%, transparent);
  backdrop-filter:saturate(1.2) blur(8px)}
.hdr.scrimmed.on-light{background:color-mix(in srgb, var(--c-canvas) 78%, transparent)}
.hdr .sty-grid{align-items:center}
.hdr .brand{grid-column:span 3;display:flex;align-items:center;min-height:44px;
  font-family:var(--ks-font-en);font-size:var(--ks-w-gnb);letter-spacing:var(--ks-w-track-en);
  text-transform:uppercase}
/* 상단 CTA 를 뺐으므로 3분할(로고/nav/CTA)이 아니라 2분할(로고 좌 · nav 우)이다.
   nav 를 중앙에 남기면 우측이 통째로 비어 헤더가 한쪽으로 기운다. */
.hdr nav{grid-column:5 / span 8;display:flex;gap:1.6vw;justify-content:flex-end}
/* 메뉴는 대소문자 혼합 — 워드마크만 전체 대문자로 두어 둘의 격을 가른다 */
.nav--mixed{text-transform:none}
/* 프로그램 4개 ↔ Notes(콘텐츠) 역할 구분 — 간격 확대 + 세로 헤어라인 (2026-08-18) */
.hdr nav a[href*="notes"]{margin-left:1.6vw;position:relative}
.hdr nav a[href*="notes"]::before{content:'';position:absolute;left:-1.6vw;top:50%;
  transform:translateY(-50%);width:1px;height:1.05em;background:currentColor;opacity:.35}
.hdr nav a{font-size:var(--ks-w-gnb);position:relative;
  display:inline-flex;align-items:center;min-height:40px}
/* 밑줄을 글자에 붙임 — 40px 히트박스 하단이 아니라 텍스트 기준 (기존 간격의 30%, 2026-08-18 대표 지시) */
.hdr nav a::after{content:'';position:absolute;left:0;right:0;bottom:calc(50% - .95em);height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--sty-dur-fast) var(--sty-ease-out)}
.hdr nav a:hover::after{transform:scaleX(1)}
/* 현재 위치 표기 — 밑줄 고정 (2026-08-18 대표 지시) */
.hdr nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr .menu{display:none}
@media(max-width:1024px){
  .hdr nav{display:none}
  .hdr .brand{grid-column:span 3}
  .hdr .menu{display:block;grid-column:4 / span 3;justify-self:end;font-size:var(--ks-w-gnb)}
}

/* ══ 버튼 (STOREY 실측: 2종뿐 · radius 0 · 폰트 크기 동일 · 패딩만 다름) ══
   ⚠️ vw 전면 채택의 실제 대가: 패딩이 vw 라 640~1024 구간에서 버튼이 27px 까지
   내려앉는다(768 실측). STOREY 원본도 브레이크포인트가 640 하나뿐이라 같은 문제를
   갖는다 — 원본이 건축 포트폴리오라 드러나지 않을 뿐이다.
   그래서 인터랙티브 요소에만 px 하한을 건다. 스케일은 vw, 바닥은 px. */
.btn{
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:space-between;gap:2.5vw;
  font-family:var(--ks-font-en);font-size:var(--ks-w-label);letter-spacing:var(--ks-w-track-en);
  text-transform:uppercase;border-radius:var(--sty-radius);
  padding:.8vw 1.4vw .8vw 1.2vw;                      /* 우측 패딩 +0.2vw = 점 아이콘 광학 보정 */
  transition:background var(--sty-dur-fast) var(--sty-ease-out),
             color var(--sty-dur-fast) var(--sty-ease-out);
}
.btn--sm{padding:.7vw .9vw;gap:1.2vw}
.btn--fill{background:var(--c-canvas);color:var(--c-ink)}
.btn--fill:hover{background:var(--c-ink);color:var(--c-canvas)}
.btn--ink{background:var(--c-ink);color:var(--c-canvas)}
.btn--ink:hover{background:var(--c-canvas);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
.btn--line{box-shadow:inset 0 0 0 1px currentColor}
.btn--line:hover{background:var(--c-canvas);color:var(--c-ink)}
@media(max-width:1024px){
  /* 전폭 버튼은 좁은 화면에서만 옳다. 1024 에서 990px 짜리 버튼은 과녁이 아니라 띠가 된다. */
  .btn{padding:14px 18px;gap:24px;width:100%;max-width:360px}
  .btn--sm{padding:11px 14px}
}
@media(max-width:640px){ .btn{max-width:none} }

/* ══ 1. 히어로 — 핀 슬라이더 ════════════════════════════════════════════
   STOREY: 문서의 상당 구간이 고정 히어로. N구간 진행바가 채워지며
   사진과 문장이 크로스페이드한다. 여기선 4프로그램 = 4구간. */
/* 스크롤 연동 핀을 걷어내고 시간으로 도는 슬라이더로 바꿨다 — 히어로는 한 화면이다. */
.hero{position:relative;height:100svh}
.hero__pin{position:relative;height:100svh;overflow:hidden;background:var(--c-ink)}
.hero__media{position:absolute;inset:0}
.hero__media figure{position:absolute;inset:0;opacity:0;
  transition:opacity var(--sty-dur-slow) var(--sty-ease-in-out)}
.hero__media figure.is-on{opacity:1}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* 사진은 히어로 첫 장만 컬러로 남기고 전부 무채로 간다 — 팔레트에 액센트가 하나뿐인
   시스템에서 사진이 제각기 색을 내면 그 하나가 묻힌다. 첫 장만 예외로 색을 쥔다. */
.hero__media figure:not(:first-child) img{filter:grayscale(1)}
.pro__p img{filter:grayscale(1)}
.hero__media figure::after{content:'';position:absolute;inset:0;background:var(--c-ink);opacity:.58}
/* 2번 슬라이드 원본이 흰 벽이라 스크림만 한 단계 더 깐다 */
.hero__media figure:nth-child(2)::after{opacity:.72}
.hero__pin .sty-grid{position:relative;z-index:2;height:100%;align-content:end;
  padding-bottom:6vw;color:var(--c-canvas)}

/* 인디케이터 — 눌러서 그 장으로 간다. 번호를 밖에 따로 두지 않고 인디케이터가 겸한다.
   막대만 있으면 지금이 몇 번째인지 세어야 하고, 번호만 있으면 남은 시간이 안 보인다. */
.track{grid-column:1 / span 4;display:flex;gap:.7vw;margin-bottom:1.6vw}
.track__i{flex:1;display:block;text-align:left;cursor:pointer;padding:0}
/* 모바일 터치 타깃 — 진행선은 1px 그대로, 패딩으로만 40px 확보 */
@media (max-width:640px){ .track__i{padding-block:8px} }
.track__i i{display:block;height:1px;background:var(--c-track);position:relative;overflow:hidden}
.track__i i::after{content:'';position:absolute;inset:0;background:var(--c-canvas);
  transform:scaleX(0);transform-origin:left}
.track__i.is-done i::after{transform:scaleX(1)}
.track__i.is-run i::after{transform:scaleX(1);transition:transform 5s linear}
.track__i span{display:block;margin-top:.7em;font-family:var(--ks-font-en);
  font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);
  color:var(--c-canvas);opacity:.45;transition:opacity var(--sty-dur-base) var(--sty-ease-out)}
.track__i.is-on span,.track__i:hover span{opacity:1}
/* 터치 기기에서 인디케이터는 실제 조작 버튼이다 — 26px 로는 못 누른다.
   높이는 아래쪽 패딩으로만 벌린다(라인 위치가 밀리면 히어로 정렬이 깨진다). */
@media (pointer:coarse){ .track__i{padding-bottom:14px} }
.hero__slides{grid-column:1 / span 6;position:relative;
  min-height:calc(var(--ks-w-display-kr) * 2.1 + var(--ks-w-body) * 3.6)}
.hero__slide{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity var(--sty-dur-base) var(--sty-ease-in-out)}
.hero__slide.is-on{opacity:1;pointer-events:auto}
/* 프로그램명은 한글이 주(主)다. 화면에서 가장 큰 텍스트가 영문이면 방문자가 3초에
   못 읽고, 한글 검색어도 히어로에서 사라진다(기획서 v1.4 S2). 영문은 위 작은 라벨로 남긴다. */
.hero__slide .prog__en{font-size:var(--ks-w-micro);line-height:1.4;
  letter-spacing:var(--ks-w-track-en);color:var(--c-canvas);opacity:.6;margin-bottom:.5em}
.hero__slide .prog{font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-display-kr);line-height:var(--ks-w-lh-display-kr);
  letter-spacing:var(--ks-w-track-kr-display)}
/* 프로그램 한글 설명은 흰색으로 — 사진 위에서 회색은 한 단 물러나 보인다 */
.hero__slide .prog-kr{font-size:var(--ks-w-body);color:var(--c-canvas);margin-top:1vw;max-width:var(--sty-measure)}

/* STOREY 히어로에는 거대 타입이 없다 — 진행바 + 본문 스케일 문장 + CTA 뿐이고,
   거대 스테이트먼트는 중간 풀블리드 섹션(.statement)이 맡는다. 그 배분을 따랐다.
   H1 을 md(2.2vw)로 두는 것은 위계 격하가 아니다 — 이 시스템은 위계를 크기가 아니라
   위치와 여백으로 만든다. */
h1.hero__h1{grid-column:8 / span 5;align-self:end;
  font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-body);line-height:1.5;
  letter-spacing:var(--ks-w-track-kr-display)}
.hero__cta{grid-column:8 / span 5;display:flex;gap:.8vw;margin-top:2vw}
@media(max-width:1024px){
  .track,.hero__no,.hero__slides{grid-column:1 / -1}
  .hero__slides{min-height:calc(var(--ks-w-display-kr) * 2.4 + var(--ks-w-body) * 5.4)}
  h1.hero__h1{grid-column:1 / -1;margin-top:6vw}
  .hero__cta{grid-column:1 / -1;flex-direction:column;margin-top:6vw}
}


/* ══ 공통 — 섹션 헤드 · 번호 라벨 ═══════════════════════════════════ */
/* 헤드는 바깥 12컬럼 중 1~7 을 차지하되, 내부를 같은 폭의 7컬럼으로 다시 나눈다.
   → 내부 컬럼이 바깥 그리드와 정확히 겹치므로 라벨은 1번, 제목은 **2번째 컬럼**부터 선다. */
/* 4레일 그리드 — 라벨 레일(1) · 제목/사진(2~5) · 프로필(6~8) · 서브카피/레퍼런스(10~12).
   헤드는 바깥 1~5 를 차지하고 내부를 같은 폭 5컬럼으로 나눠 라벨과 제목을 가른다. */
.head{grid-column:1 / span 5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:var(--sty-gutter);align-items:start}
.head .label{grid-column:1 / span 1;text-align:left}
.head h2{grid-column:2 / span 4;font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-title);line-height:var(--ks-w-lh-title);
  letter-spacing:var(--ks-w-track-kr-display)}
/* 서브 카피는 우측 정렬 — 좌측 제목과 마주 보게 한다 */
/* 서브 카피는 **블록만 우측**으로 붙이고 줄은 좌측 정렬이다.
   text-align:right 로 두면 각 줄 왼쪽 가장자리가 들쭉날쭉해져 한글에서 특히 읽기 나쁘다. */
/* 서브 카피의 좌측 기준선 = **02 섹션 3번 항목의 텍스트 시작선**.
   3열 그룹 중 세 번째는 그리드 9번에서 시작하고, 그 안에서 원형 배지(34px)와
   배지-텍스트 간격만큼 더 들어간 자리가 글이 서는 선이다. 서브 카피도 그 선에 세운다
   — 컬럼 8 에 두면 그 선보다 한 컬럼 앞으로 튀어나간다. */
/* 서브 카피의 좌측 기준선 = **02 섹션 3번 항목의 숫자(원형 배지) 시작선**.
   3열 그룹 중 세 번째는 그리드 9번에서 시작하므로 그 선에 세운다. */
/* 서브 카피의 좌측 기준선 = **2번 레일** — 제목과 같은 시작선이다.
   헤드가 1~5 를 차지하므로 자동으로 다음 행에 놓이고, 제목 바로 아래에 정렬된다. */
.note,.sub{grid-column:2 / span 4;align-self:start;text-align:left;
  margin-top:var(--sty-item);
  font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-ink)}
.dark .note,.dark .sub{color:var(--c-body-on-dark)}
.label b{font-weight:400;margin-right:.6em;opacity:.55}
.n{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);line-height:var(--ks-w-lh-label);
  text-align:left;letter-spacing:var(--ks-w-track-en);color:var(--sty-accent)}
.dark .n{color:var(--c-accent-on-dark)}
@media(max-width:1024px){
  .head{grid-column:1 / -1;grid-template-columns:repeat(6,minmax(0,1fr))}
  /* 이 줄에 있던 grid-column 해제는 각 컴포넌트 정의보다 앞이라 죽어 있었다 —
     파일 끝의 '모바일 컬럼 해제' 블록으로 옮겼다. */
  .head .label{grid-column:1 / -1}
  .head h2{grid-column:1 / -1;margin-top:calc(var(--sty-item) * .6)}
  /* 좁은 화면에서 우측 정렬은 들쭉날쭉해 보인다 — 좌측으로 되돌린다 */
  .note,.sub{grid-column:1 / -1;text-align:left;margin-top:var(--sty-item)}
}

/* ══ 7대 지표 — 상담의 세 국면으로 묶는다 ══════════════════════════
   이름만 일곱 개 늘어놓으면 무엇을 재는지 읽히지 않는다. 지표 정의는 이 시안이
   지어낼 수 없으므로(대표 확정 사항), 대신 **어느 국면을 보는 지표인가**로 묶어
   "상담을 세 구간으로 나눠 잰다"가 보이게 했다. */
.metrics{grid-column:2 / -1;margin-top:var(--sty-block);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sty-gutter);
  border-top:var(--sty-hairline) solid var(--rule-c, var(--c-line));
  --lead:var(--sty-row);--pad:calc(var(--sty-row) * 1.7);padding-top:var(--pad)}
/* 아래 3단계(.steps)와 같은 부품을 쓴다 — 한 줄 가로선 위에 그룹마다 점을 찍고,
   점에서 질문까지 세로 꼭지를 내린다. 두 블록이 같은 문법으로 읽히게. */
.mgroup{position:relative}
/* Method 이중 레일 해소 — 지표 그룹 줄은 '단계'가 아니다: 점·세로선을 걷어 그룹으로 강등 (게이트 렌즈) */
.mgroup__dot{display:none !important}
.mgroup::before{display:none !important}
.mgroup__dot{position:absolute;left:0;top:calc((var(--pad) + 4px) * -1);
  width:9px;height:9px;border-radius:999px;background:var(--step-mark, var(--sty-accent))}
.mgroup::before{content:'';position:absolute;left:4px;width:var(--sty-hairline);
  top:calc((var(--pad) + 4px) * -1 + 9px);height:calc(var(--lead) - 5px);
  background:var(--rule-c, var(--c-line))}
.mgroup__q{font-size:var(--ks-w-sub);font-family:var(--ks-font-kr-sb);font-weight:600;
  line-height:1.4;letter-spacing:var(--ks-w-track-kr-display);color:var(--c-ink);
  margin-bottom:calc(var(--sty-item) * .55)}
.metric{display:flex;align-items:center;gap:calc(var(--sty-item) * .55);padding:0}
/* 아이콘은 점·세로선보다 한 단 진하게 — 도형이 라벨보다 먼저 눈에 걸려야 뜻이 먼저 온다 */
.metric svg{width:26px;height:26px;flex:none;fill:none;
  stroke:color-mix(in srgb, var(--step-mark, var(--sty-accent)) 42%, var(--c-ink));
  stroke-width:var(--sty-hairline);
  vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.metric svg *{vector-effect:non-scaling-stroke}
.metric span{font-size:var(--ks-w-sub);line-height:1.4;color:var(--c-body)}
@media(max-width:1024px){
  .metrics{grid-column:2 / -1;grid-template-columns:1fr;row-gap:var(--sty-block);
    border-top:0;padding-top:0}
  .mgroup{--lead:var(--sty-row);--pad:var(--sty-row);padding-top:var(--pad);border-top:var(--sty-hairline) solid var(--rule-c, var(--c-line))}
  .mgroup__dot{top:-4px}
  .mgroup::before{top:5px}
}

/* ══ 03 METHOD — 가로 3열 표 ═══════════════════════════════════════
   상단 한 줄 헤어라인 위에 각 스텝 시작점마다 액센트 점을 찍어 3구간을 표로 읽게 한다. */
.method{padding-block:var(--sty-sec)}
/* 지표 그룹(.metrics)과 같은 --lead / --pad 를 쓴다 — 두 블록이 같은 부품이므로
   가로선에서 첫 글자까지의 거리가 서로 달라 보이면 안 된다. */
.steps{grid-column:2 / -1;margin-top:var(--sty-sec);
  --lead:var(--sty-row);--pad:calc(var(--sty-row) * 1.7);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sty-gutter);
  border-top:var(--sty-hairline) solid var(--c-line);padding-top:var(--pad)}
.step{position:relative}
.step__dot{position:absolute;left:0;top:calc((var(--pad) + 4px) * -1);
  width:9px;height:9px;border-radius:999px;background:var(--step-mark, var(--sty-accent))}
/* 점에서 STEP 라벨까지 내려오는 세로 라인. 점 중심(x 4.5px)에 맞춰 1px 로 긋고,
   점 하단에서 라벨 상단까지만 잇는다 — 색은 점과 같은 마크 색을 공유한다. */
.step::before{content:'';position:absolute;left:4px;width:var(--sty-hairline);
  top:calc((var(--pad) + 4px) * -1 + 9px);height:calc(var(--lead) - 5px);
  background:var(--rule-c, var(--c-line))}
.step__no{font-size:var(--ks-w-micro);line-height:1.4;letter-spacing:var(--ks-w-track-en);
  color:var(--sty-accent)}
.step__en{margin-top:calc(var(--sty-item) * .4);font-family:var(--ks-font-en);
  font-size:var(--ks-w-subtitle);line-height:1.1;letter-spacing:var(--ks-w-track-en);
  color:var(--c-ink)}
.step__t{margin-top:calc(var(--sty-item) * .5);font-size:var(--ks-w-body);
  font-family:var(--ks-font-kr-sb);font-weight:600;line-height:1.4;
  letter-spacing:var(--ks-w-track-kr-display);color:var(--c-ink)}
.step__d{margin-top:calc(var(--sty-item) * .5);font-size:var(--ks-w-sub);line-height:1.7;
  color:var(--c-body);max-width:var(--sty-measure)}
@media(max-width:1024px){
  .steps{grid-template-columns:1fr;row-gap:var(--sty-block)}
  .step{padding-top:var(--sty-row);border-top:var(--sty-hairline) solid var(--c-line)}
  .steps{border-top:0;padding-top:0}
  .step__dot{top:-4px}
  .step::before{top:5px;height:calc(var(--sty-row) - 5px)}
}

/* ══ 02 PROBLEM — 사진 배경 + 원형 번호 배지 3열 ════════════════════
   구획선을 긋지 않는다. 번호는 원형 아웃라인 배지로 좌측에 서고, 제목·본문은
   그 오른쪽 한 컬럼에 정렬된다 — 배지가 시각적 불릿 역할을 한다.
   (radius 0 은 이 시스템의 원칙이지만 **번호 배지만 예외** — 원형이 곧 그 부품의 형태다) */
.problem{padding-block:var(--sty-sec)}
.problem > .sty-grid{position:relative;z-index:2}
/* 02 는 헤드와 항목 사이를 한 단 더 벌린다 — 3개 항목이 한 덩어리로 읽히게 하는 간격이다 */
/* 02 는 세로로 쌓는다 — 세 문제가 순서대로 읽히는 편이 병렬보다 낫다 */
/* align-self:start 가 핵심이다. 없으면 .cols 가 우측 비주얼(582px)만큼 stretch 되고,
   내부 3개 트랙이 남는 세로 공간을 나눠 가져 항목 사이가 제멋대로 벌어진다. */
.problem .cols{grid-column:2 / span 5;margin-top:var(--sty-sec);
  align-self:start;align-content:start;
  display:grid;grid-template-columns:1fr;row-gap:var(--sty-block)}

/* 우측 추상 비주얼 — 같은 격자 위에 있어야 할 점 몇 개가 제자리를 벗어나 미세하게 흔들린다.
   '지점마다 응대가 다르다'는 이 섹션의 문제를 도형으로만 말한다(외부 에셋 0).
   모션은 STOREY 지속시간 축을 그대로 쓰지 않는다 — 배경 요소라 훨씬 느리게 돈다. */
/* 높이는 좌측 항목 목록에 맞춘다. svg 를 absolute 로 띄워 자기 콘텐츠 높이가
   행 높이를 밀지 않게 하고, figure 는 stretch 로 행 높이(=좌측 목록)를 그대로 받는다. */
.problem__viz{grid-column:8 / span 5;margin:var(--sty-sec) 0 0;
  position:relative;align-self:start;min-height:0;
  /* viewBox 비율과 같게 고정한다 — 상자 비율이 어긋나면 preserveAspectRatio 가
     레터박스를 만들어 도식이 상자 안쪽으로 들어가 보인다. */
  aspect-ratio:163.2 / 99.2}
.problem__viz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.viz__rule{fill:none;stroke:var(--c-line-on-dark);stroke-width:var(--sty-hairline);
  vector-effect:non-scaling-stroke}
.problem__viz circle{fill:var(--c-body-on-dark);opacity:.5;
  animation:vizDrift var(--d,4s) var(--t,0s) ease-in-out infinite alternate}
/* 이탈한 점은 눈에 먼저 걸려야 한다 — 기본 점(r 1.6)의 약 2배로 키운다 */
.problem__viz circle.is-off{fill:var(--c-accent-on-dark);opacity:1;r:3.2}
@keyframes vizDrift{
  from{transform:translateY(calc(var(--y,4px) * -1))}
  to{transform:translateY(var(--y,4px))}
}
@media(max-width:1024px){
  .problem .cols{grid-column:1 / -1}
  /* 320px 상한이 있으면 도식만 본문(358px)보다 좁아 한 칸 들어가 보인다 —
     위 텍스트와 같은 폭까지 채운다. */
  /* 도식은 앞 리스트와 다른 층위다 — 붙어 있으면 리스트의 연장처럼 읽힌다.
     위아래를 섹션 호흡(--sty-sec)만큼 띄워 독립된 블록으로 세운다. */
  .problem__viz{grid-column:1 / -1;align-self:start;
    margin-top:var(--sty-sec);margin-bottom:var(--sty-block);
    max-width:none}
}
.problem .cols > div{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:calc(var(--sty-item) * .7);row-gap:calc(var(--sty-item) * .5);align-items:center}
.badge{grid-row:1;grid-column:1;width:34px;height:34px;flex:none;
  border:var(--sty-hairline) solid currentColor;border-radius:999px;
  display:inline-grid;place-items:center;
  font-size:var(--ks-w-micro);line-height:1;letter-spacing:var(--ks-w-track-en)}
.problem .cols h3{grid-row:1;grid-column:2;font-size:var(--ks-w-card-title);
  font-family:var(--ks-font-kr-sb);font-weight:600;line-height:1.3;
  letter-spacing:var(--ks-w-track-kr-display)}
.problem .cols p{grid-row:2;grid-column:2;font-size:var(--ks-w-body);
  color:var(--c-body-on-dark);max-width:var(--sty-measure)}


/* ══ 04 PROGRAMS — 4열 카드 격자 ═══════════════════════════════════
   카드는 서로 붙어 하나의 표를 이룬다. 각 카드에 border 를 다 주면 맞닿는 선이 2px 가
   되므로, 바깥 테두리는 컨테이너가 갖고 카드는 왼쪽 선만 그린다(첫 장 제외). */
.prog-list{grid-column:2 / -1;margin-top:var(--sty-sec);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:var(--sty-hairline) solid var(--c-line)}
.prog-item{display:flex;flex-direction:column;
  padding:var(--sty-row) var(--sty-item) calc(var(--sty-row) * .8);
  border-left:var(--sty-hairline) solid var(--c-line);
  transition:background var(--sty-dur-base) var(--sty-ease-in-out)}
.prog-item:first-child{border-left:0}
.prog-item:hover{background:var(--c-tint)}
.prog-item__k{font-size:var(--ks-w-micro);line-height:1.4;
  letter-spacing:var(--ks-w-track-en);color:var(--sty-accent)}
.prog-item__t{margin-top:calc(var(--sty-item) * .6);font-size:var(--ks-w-card-title);
  font-family:var(--ks-font-kr-sb);font-weight:600;line-height:1.35;
  letter-spacing:var(--ks-w-track-kr-display);
  transition:transform var(--sty-dur-base) var(--sty-ease-in-out)}
.prog-item:hover .prog-item__t{transform:translateY(-2px)}
.prog-item__d{margin-top:calc(var(--sty-item) * .5);font-size:var(--ks-w-sub);
  line-height:1.7;color:var(--c-body)}
/* 카드 안 정보는 세 덩어리다 — ① 정체(카테고리) ② 내용(제목·설명) ③ 메타(타깃·링크).
   ①만 액센트를 쓴다. 위아래 라벨이 둘 다 블루면 어느 쪽이 상위인지 알 수 없다.
   메타는 헤어라인으로 잘라 내려 두고 색은 본문 보조색으로 낮춘다. */
.prog-item__tg{margin-top:auto;padding-top:var(--sty-row);
  border-top:var(--sty-hairline) solid var(--c-line);
  font-size:var(--ks-w-micro);line-height:1.5;letter-spacing:var(--ks-w-track-en);
  color:var(--c-body)}
.prog-item__go{padding-top:calc(var(--sty-item) * .5);
  display:inline-flex;align-items:center;gap:.6em;min-height:40px;
  font-size:var(--ks-w-sub);color:var(--c-ink)}
@media(max-width:1024px){
  .prog-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prog-item:nth-child(-n+2){border-top:0}
  .prog-item:nth-child(odd){border-left:0}
  .prog-item:nth-child(n+3){border-top:var(--sty-hairline) solid var(--c-line)}
}
@media(max-width:640px){
  .prog-list{grid-template-columns:1fr}
  .prog-item{border-left:0}
  .prog-item + .prog-item{border-top:var(--sty-hairline) solid var(--c-line)}
  .prog-item__go{padding-top:var(--sty-row)}
}

/* ══ 05 DELIVERABLES ════════════════════════════════════════════════ */
.dlv .kv{grid-column:2 / -1;margin-top:var(--sty-block);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sty-gutter)}
/* 넘버링을 빼고 각 항목 위에 라인 일러스트를 세운다.
   선 두께는 원형 배지 테두리와 같은 1px 고정 — non-scaling-stroke 로 viewBox 배율과 무관하게
   화면 위 실제 두께를 1px 로 묶는다(그렇지 않으면 56/48 = 1.17px 로 굵어진다). */
.dlv .kv div{display:block}
.dlv__ill{display:block;width:56px;height:56px;margin-bottom:var(--sty-item);
  fill:none;stroke:currentColor;stroke-width:var(--sty-hairline);
  vector-effect:non-scaling-stroke;color:var(--c-ink)}
.dlv__ill *{vector-effect:non-scaling-stroke}
.dlv dt{font-size:var(--ks-w-card-title);font-family:var(--ks-font-kr-sb);
  font-weight:600;line-height:1.3;letter-spacing:var(--ks-w-track-kr-display)}
.dlv dd{margin:calc(var(--sty-item) * .5) 0 0;font-size:var(--ks-w-body);color:var(--c-body);
  max-width:var(--sty-measure)}
.dlv .meta{margin:var(--sty-item) 0 0;font-family:var(--ks-font-en);font-size:var(--ks-w-gnb);
  line-height:1.2;letter-spacing:var(--ks-w-track-en);color:var(--c-body-strong)}
@media(max-width:1024px){
  .dlv .kv{grid-template-columns:1fr;row-gap:var(--sty-block)}
}

/* ══ 06 NEXT STEP ═══════════════════════════════════════════════════ */
.nx{padding-block:var(--sty-sec)}
/* 질문 테이블은 가로를 다 쓴다 — 우측을 비워 두면 문항이 좁아 보인다.
   버튼은 그 아래 행으로 내려 목록을 다 읽은 뒤 만나게 한다. */
/* 질문 테이블은 가로를 다 쓴다. 답변은 <details> 네이티브 아코디언 —
   질문(summary)이 제자리에 고정된 채 답변만 아래로 열린다. JS 없이 동작하고
   키보드·스크린리더도 그대로 먹는다. */
.nx__q{grid-column:2 / -1;margin-top:var(--sty-block)}
.nx details{border-top:var(--sty-hairline) solid var(--c-line)}
.nx details:last-of-type{border-bottom:var(--sty-hairline) solid var(--c-line)}
.nx summary{list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sty-row);
  padding:calc(var(--sty-row) * .55) 0;min-height:44px;
  font-size:var(--ks-w-card-title);font-family:var(--ks-font-kr-sb);font-weight:600;
  line-height:1.35;letter-spacing:var(--ks-w-track-kr-display);
  transition:color var(--sty-dur-fast) var(--sty-ease-out)}
.nx summary::-webkit-details-marker{display:none}
.nx summary:hover{color:var(--c-accent)}
/* + / − 표시. 두께는 이 시스템의 헤어라인 1px 그대로. */
.nx__ico{position:relative;width:14px;height:14px;flex:none}
.nx__ico::before,.nx__ico::after{content:'';position:absolute;background:currentColor;
  transition:transform var(--sty-dur-base) var(--sty-ease-in-out)}
.nx__ico::before{left:0;top:50%;width:14px;height:var(--sty-hairline);margin-top:-.5px}
.nx__ico::after{top:0;left:50%;height:14px;width:var(--sty-hairline);margin-left:-.5px}
.nx details[open] .nx__ico::after{transform:scaleY(0)}
.nx__a{margin:0;padding:0 0 calc(var(--sty-row) * .75);max-width:var(--sty-measure);
  font-size:var(--ks-w-body);line-height:var(--ks-w-lh-body);color:var(--c-body)}
.nx .tbd{display:block;margin-top:.5em;font-family:var(--ks-font-en);
  font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.nx__cta{grid-column:2 / span 4;margin-top:var(--sty-row);
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}  /* 버튼 쌍 밀착 방지 (게이트 렌즈) */
@media(max-width:1024px){ .nx__q,.nx__cta{grid-column:1 / -1} }

/* ══ 01 PROFILE & REFERENCES — 3단 ═════════════════════════════════ */
/* 사진은 제목과 **같은 레일(2~5)** — 시작선도 폭도 제목과 일치한다.
   높이는 레퍼런스 테이블(607px)에 맞춰 늘리지 않는다. 그 높이를 그대로 받으면
   인물이 과하게 길어져 얼굴이 화면에서 작아진다. 정사각으로 잘라 길이를 줄였다. */
/* 레퍼런스 테이블 높이(909px)를 그대로 받으면 사진이 과하게 길어진다.
   4:5 로 고정해 길이를 줄이고, 남는 부분은 상단 기준으로 잘라 머리가 살게 한다. */
.pro__p{grid-column:2 / span 4;margin:var(--sty-block) 0 0;align-self:start}
/* cover 로 꽉 채우면 정사각 크롭에서 머리 위가 잘린다. contain 으로 바꿔 인물을
   프레임 안쪽에 온전히 앉히고, 남는 여백은 면으로 받는다. */
.pro__p img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  filter:grayscale(1)}
/* 캡션은 사진 안 하단으로. 인물 사진은 아래쪽이 어두운 편이지만 늘 그렇지는 않아
   옅은 그라데이션 스크림을 깔아 흰 글자가 어떤 사진에서도 읽히게 한다. */
.pro__p{position:relative}
.pro__p::after{content:'';position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c-ink) 62%, transparent))}
.pro__p figcaption{position:absolute;z-index:2;left:var(--sty-item);right:var(--sty-item);
  bottom:var(--sty-item);margin:0;font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-canvas)}
.pro__t{grid-column:6 / span 3;margin-top:var(--sty-block)}
.phero__cta--flow{grid-column:auto;margin-top:var(--sty-block)}
/* about 전용: 소개글이 길어 6컬럼 사용 (2026-08-18 — 인라인에서 시트로 이관) */
.pro--wide .pro__t{grid-column:7 / span 6}
.pro--wide .pro__p{grid-column:2 / span 4}
/* 첫 문단은 위 여백을 지워 오른쪽 REFERENCES 라벨과 같은 선에서 시작하게 한다 */
.pro__t p{margin-top:var(--sty-item);font-size:var(--ks-w-body);color:var(--c-ink);max-width:var(--sty-measure)}
.pro__t p:first-child{margin-top:0}
.pro__r{grid-column:9 / span 4;margin-top:var(--sty-block)}
/* REFERENCES 라벨은 액센트를 쓰지 않는다 — 목록 자체가 주인공이라 라벨이 앞설 이유가 없다 */
.pro__r .label{color:var(--c-ink)}
.pro__r ol{margin-top:calc(var(--sty-item) * .6)}
/* 로고가 있는 항목과 없는 항목이 한 줄에서 어긋나지 않게 2열 격자로 세운다.
   ⚠️ 상표 사용은 사명 언급과 별개 권한이다(기획서 v1.4 O11) — 실배포 전 확인 필요. */
.pro__r li{padding:calc(var(--sty-item) * .7) 0;
  border-top:var(--sty-hairline) solid var(--c-line);
  display:grid;grid-template-columns:minmax(0,1fr) 144px;
  column-gap:calc(var(--sty-item) * .8);align-items:center}
/* 로고 열 78px. 한 항목에 브랜드가 둘이면(GM = 캐딜락·쉐보레) 가로로 나란히 세우고
   각자 절반씩 쓴다. jpg 원본이 흰·회색 배경이라 multiply 로 판을 죽인다. */
/* `.pro__r li span{display:block}` 이 특정성(0,1,2)으로 이 규칙(0,1,0)을 덮어
   로고 두 개가 세로로 쌓였다 — 셀렉터를 같은 층위로 올려 가로 배치를 되찾는다. */
.pro__r li span.pro__logo{grid-column:2;grid-row:1 / span 2;
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
  justify-content:flex-end;gap:10px;height:100%;margin-top:0}
.pro__logo img{flex:0 1 auto;min-width:0;max-width:100%;max-height:38px;
  width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) contrast(1.15);opacity:.9;mix-blend-mode:multiply}
/* 두 개일 때도 단독과 비슷한 존재감이 나오게 — 열을 넓혀 각자 절반을 크게 쓴다 */
.pro__logo img:not(:only-child){max-width:calc(50% - 5px);max-height:34px}
/* 새 제약 로고는 3.5:1 로 길쭉하다 — 가로 80px 면 높이가 23px 밖에 안 나와 다른 줄보다
   작아 보인다. 폭을 105px 로 키워 높이 30px 선을 맞추고, 그만큼 이 줄의 로고 열을 넓힌다. */
/* 현대는 원본이 1.42:1 이라 공통 높이(38px)에서 폭이 54px 밖에 안 나온다 — 그 줄만 키운다 */
.pro__r li:nth-of-type(5) .pro__logo img{max-height:54px}
.pro__r li:last-of-type{grid-template-columns:minmax(0,1fr) 224px}
.pro__r li:last-of-type .pro__logo img{max-width:105px;max-height:none}
.pro__r li > b{grid-column:1}
.pro__r li > span:not(.pro__logo){grid-column:1}
.pro__r li:last-of-type{border-bottom:var(--sty-hairline) solid var(--c-line)}
.pro__r li b{display:block;font-weight:400;font-size:var(--ks-w-gnb);line-height:1.4}
.pro__r li span{display:block;font-size:var(--ks-w-gnb);color:var(--c-body-strong);
  margin-top:.35em;line-height:1.5}
@media(max-width:1024px){
  .pro__p,.pro__t,.pro__r{grid-column:1 / -1}
  /* 원본이 500×968(1:1.94)이라 4/3 으로 자르면 소스의 위 39% 만 남아 턱이 잘린다.
     모바일에서도 데스크탑과 같은 4/5 를 써서 머리~가슴이 온전히 들어오게 둔다. */
  .pro__p img{aspect-ratio:4/5}
}
/* 390px 에서 로고 열이 144px 고정이면 텍스트가 202px 로 눌리고 로고는 우측 마진에
   딱 붙어 잘려 보인다. 좁은 화면에선 로고를 텍스트 아래 줄로 내리고 왼쪽 정렬한다. */
@media(max-width:640px){
  .pro__r li,
  .pro__r li:last-of-type{grid-template-columns:minmax(0,1fr)}
  /* 마크업상 로고가 첫 자식이라 1열이 되면 로고가 맨 위로 올라가 앞 행의 구분선에
     붙어 보인다 — order 로 텍스트 아래에 내려 자기 항목에 붙인다. */
  .pro__r li span.pro__logo{grid-column:1;grid-row:auto;order:2;
    justify-content:flex-start;height:auto;margin-top:calc(var(--sty-item) * .5)}
  .pro__logo img,
  .pro__logo img:not(:only-child){max-width:132px;max-height:30px}
  .pro__r li:nth-of-type(5) .pro__logo img{max-height:42px}
  .pro__r li:last-of-type .pro__logo img{max-width:96px;max-height:30px}
}

/* ══ 푸터 ══════════════════════════════════════════════════════════════
   3단(브랜드 · Programs · Company) + 하단 법적 바.
   칼럼 헤더와 바닥 바만 영문 UPPERCASE 라벨이고, 링크는 한글로 읽는다 —
   메뉴명을 영문으로 두면 상품명(AI 리더십 코치)이 무엇인지 푸터에서 안 보인다. */
/* 푸터는 본문 섹션과 같은 호흡일 필요가 없다 — 마감 영역이라 더 조인다.
   행 여백은 본문 리듬의 절반으로 간다. */
/* 상단은 앞 섹션이 닫힌 여백(--sty-sec)과 같게, 하단만 조인다 */
.ft{padding-block:var(--sty-sec) calc(var(--sty-block) / 2)}
.ft .c1{grid-column:1 / span 5}
.ft .c2{grid-column:6 / span 3}
.ft .c3{grid-column:9 / span 3}
.ft__mark{font-family:var(--ks-font-en);font-size:var(--ks-w-subtitle);line-height:1.2;
  letter-spacing:var(--ks-w-track-en);color:var(--c-canvas)}
.ft__lead{margin-top:calc(var(--sty-item) / 2);font-size:var(--ks-w-gnb);line-height:var(--ks-w-lh-body);
  color:var(--c-body-on-dark);max-width:var(--sty-measure)}
.ft__h{font-size:var(--ks-w-gnb);line-height:var(--ks-w-lh-label);color:var(--c-muted);
  margin-bottom:calc(var(--sty-item) * .2)}
/* 링크 사이가 벌어져 보이던 건 터치 타깃용 min-height:40px 때문이었다.
   마우스 환경에서는 그 하한이 필요 없으므로 pointer 로 갈라 준다 —
   터치 기기에서는 44px 를 그대로 유지한다. */
/* li 자체가 body 행간(16.56px × 1.8 = 30px)을 상속해 링크 사이가 벌어지고 있었다.
   a 만 줄여도 li 의 line box 가 그대로라 간격이 안 좁아진다 — li 에도 걸어야 한다. */
/* 칼럼 헤더(영문 라벨)는 12px, **한글 메뉴는 14px**. 서체도 한글 주도로 바꾼다 —
   --ks-font-en 은 한글 글리프가 없어 Helvetica→시스템 폰트로 떨어지고,
   그러면 같은 줄 안에서 'AI' 와 '리더십' 의 굵기·높이가 어긋난다. */
.ft li{font-size:var(--ks-w-sub);line-height:1.5}
.ft li a{display:inline-flex;align-items:center;min-height:0;padding:2px 0;
  font-family:var(--ks-font-kr);font-size:var(--ks-w-sub);letter-spacing:var(--ks-w-track-kr);
  line-height:1.5;color:var(--c-canvas)}
/* 터치 타깃 40px — pointer:coarse 는 헤드리스·데스크탑 좁은 창에서 발동하지 않으므로 폭 기준을 병행 */
@media (pointer:coarse){ .ft li a{min-height:40px} }
@media (max-width:640px){ .ft li a{min-height:40px} }
.ft li a:hover{color:var(--c-body-on-dark)}
/* 하단 구분선은 화면 끝까지 간다 — .sty-grid 의 좌우 마진만큼 의사요소를 밖으로 뻗는다.
   border-top 으로 두면 마진 안쪽에서 끊긴다. */
.ft .base{grid-column:1 / -1;position:relative;
  margin-top:calc(var(--sty-block) / 2);padding-top:calc(var(--sty-item) / 2);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sty-row);
  font-size:var(--ks-w-gnb);line-height:var(--ks-w-lh-label);color:var(--c-muted)}
.ft .base::before{content:'';position:absolute;top:0;
  left:calc(var(--sty-margin) * -1);right:calc(var(--sty-margin) * -1);
  height:var(--sty-hairline);background:var(--c-line-on-dark)}
.ft__legal{display:flex;gap:var(--sty-row)}
.ft .base a{display:inline-flex;align-items:center;min-height:40px}
.ft .base a:hover{color:var(--c-canvas)}
@media(max-width:1024px){
  .ft .c1,.ft .c2,.ft .c3{grid-column:1 / -1}
  /* 3단이 1열로 접히면 그룹 간격·헤더 간격·항목 간격이 전부 16px 로 같아져
     PROGRAMS·COMPANY 가 어느 묶음의 머리인지 안 보인다. 간격을 3단으로 벌린다 —
     그룹 사이(32) > 항목 사이(~12) > 헤더와 자기 목록(6). 가까운 것이 한 덩어리다. */
  .ft .c2,.ft .c3{margin-top:calc(var(--sty-block) * 1.4)}
  .ft__h{margin-bottom:calc(var(--sty-item) * .25)}
  .ft .base{flex-direction:column;align-items:flex-start;gap:var(--sty-item);
    margin-top:calc(var(--sty-block) * 1.4)}
}

/* ══ 프리로더 (STOREY 시그니처) ════════════════════════════════════════ */
.pre{position:fixed;inset:0;z-index:999;background:var(--c-ink);
  transition:opacity var(--sty-dur-slow) var(--sty-ease-in-out);pointer-events:none}
.pre.gone{opacity:0}

/* ══ 스크롤 인터랙션 ═══════════════════════════════════════════════
   섹션마다 다른 방식으로 등장시킨다 — 전부 같은 페이드면 스크롤이 단조로워지고,
   무엇이 새 정보인지 눈이 구분하지 못한다.
   지연은 --i(순번)로 계산해 한 덩어리 안에서 시간차를 만든다. */
.rv{opacity:0;
  transition:opacity .65s var(--sty-ease-out), transform .65s var(--sty-ease-out);
  transition-delay:calc(var(--i, 0) * 70ms)}
.rv[data-rv="up"]    {transform:translateY(20px)}
.rv[data-rv="left"]  {transform:translateX(-22px)}
.rv[data-rv="right"] {transform:translateX(22px)}
.rv[data-rv="scale"] {transform:scale(.96)}
.rv[data-rv="fade"]  {transform:none}
.rv.is-in{opacity:1;transform:none}
/* 05 일러스트: stroke-dash 드로잉은 rect 의 getTotalLength 지원이 갈리고 관찰 전에는
   선이 통째로 사라져 보인다 — 도형이 뜻을 말하는 부품이라 그 위험을 지지 않는다.
   대신 도형만 살짝 늦게 떠오르게 해 텍스트보다 먼저 눈에 들어오게 한다. */
.dlv__ill{opacity:0;transform:translateY(8px) scale(.94);transform-origin:left center;
  transition:opacity .6s var(--sty-ease-out), transform .6s var(--sty-ease-out);
  transition-delay:calc(var(--i, 0) * 70ms + 120ms)}
.rv.is-in .dlv__ill{opacity:1;transform:none}

/* ══ 접근성 — 모션 최소화 ══════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .hero{height:auto}
  .hero__pin{position:static;height:auto;padding-block:24vw 8vw}
  .hero__media figure{opacity:0}
  .hero__media figure:first-child{opacity:1}
  .hero__slides{position:static;min-height:0}
  .hero__slide{position:static;opacity:1;pointer-events:auto}
  .hero__slide + .hero__slide{margin-top:4vw}
  .pre{display:none}
  .problem__viz circle{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .dlv__ill{opacity:1;transform:none;transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   하위 페이지 공통 블록 (2026-08-17 추가)
   index 에서 확정한 규칙을 그대로 쓴다 — 4레일 그리드 · 헤어라인 구획 · 라운딩 0 ·
   그림자 0 · 액센트는 카테고리 라벨 1곳 · 본문은 --sty-measure 로 끊는다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 하위 페이지 히어로 ─────────────────────────────────────────────────
   홈 히어로(사진 위 흰 글자)와 다르다. 하위 페이지는 사진을 깔지 않고 흰 면 위에
   라벨 레일 + 제목 + 설명 + CTA 만 둔다 — 프로그램 정체를 3초에 읽히는 것이 목적이다. */
.phero{padding-block:calc(var(--sty-sec) * 1.7) var(--sty-sec)}
.phero__l{grid-column:1 / span 1}
.phero__t{grid-column:2 / span 6;font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-display-kr);line-height:var(--ks-w-lh-display-kr);
  letter-spacing:var(--ks-w-track-kr-display)}
.phero__en{grid-column:2 / span 6;margin-bottom:calc(var(--sty-item) * .6);
  font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--sty-accent)}
.phero__s{grid-column:2 / span 5;margin-top:var(--sty-row);max-width:var(--sty-measure);
  font-size:var(--ks-w-body);line-height:var(--ks-w-lh-body);color:var(--c-body-strong)}
.phero__cta{grid-column:2 / span 6;margin-top:var(--sty-block);align-self:start;
  display:flex;align-items:flex-start;gap:var(--sty-item);flex-wrap:wrap}
/* 우측 메타 레일 — 대상·형태·기간을 한눈에. 값이 없으면 행 자체를 안 쓴다. */
.phero__meta{grid-column:9 / span 4;align-self:start;
  border-top:var(--sty-hairline) solid var(--c-line);margin-top:var(--sty-block)}
.phero__meta div{display:grid;grid-template-columns:88px minmax(0,1fr);
  gap:var(--sty-item);padding:calc(var(--sty-item) * .6) 0;
  border-bottom:var(--sty-hairline) solid var(--c-line);
  font-size:var(--ks-w-sub);line-height:1.6}
.phero__meta dt,.phero__meta b{font-family:var(--ks-font-en);font-weight:400;
  font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.phero__meta span{color:var(--c-body-strong)}
@media(max-width:1024px){
  .phero{padding-block:calc(var(--sty-sec) * 1.2) var(--sty-block)}
  .phero__l,.phero__t,.phero__en,.phero__s,.phero__cta,.phero__meta{grid-column:1 / -1}
  .phero__l{margin-bottom:var(--sty-item)}
  .phero__meta{margin-top:var(--sty-block)}
}

/* ── 서브 히어로 사진판 — 홈 히어로와 같은 문법(사진 + 잉크 스크림 + 흰 글자).
   프로그램 페이지는 홈 히어로 슬라이드와 같은 이미지를 매칭해 깐다. 사진은 무채 —
   컬러는 홈 첫 장 하나만 쥔다(액센트 단일 원칙). 다크 판정은 .dark 가 겸한다(헤더 포함). */
.phero--img{position:relative;overflow:hidden}
.phero--img .phero__media{position:absolute;inset:0}
.phero--img .phero__media img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.82)}  /* 밝은 원본(매거진 월)에서도 텍스트 밴드 확보 */
/* 스크림은 좌(텍스트 밴드) 진하게 → 우로 빠지는 그라디언트 — 밝은 사진(retail)에서도
   텍스트 밴드 배경 휘도를 확보한다 (평가자 A·D축) */
.phero--img .phero__media::after{content:'';position:absolute;inset:0;opacity:1;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--c-ink) 84%, transparent) 0%,
    color-mix(in srgb, var(--c-ink) 66%, transparent) 55%,
    color-mix(in srgb, var(--c-ink) 52%, transparent) 100%)}
.phero--img > .sty-grid{position:relative;z-index:2}
.phero--img .phero__s{color:var(--c-canvas)}
/* 메타 레일 가로라인은 화이트 — 다크 사진 위에서 잉크믹스 라인이 묻힌다 (대표 지시 2026-08-18) */
.phero--img .phero__meta{border-top-color:var(--c-canvas)}
.phero--img .phero__meta div{border-bottom-color:var(--c-canvas)}
.phero--img .phero__meta b{color:var(--c-body-on-dark)}
.phero--img .phero__meta span{color:var(--c-canvas)}

/* ── web-parts 직결 (2026-08-18 대표 확정) — 부품은 parts.css 원본을 그대로 소비.
   여기는 배치 글루 + KEYSTONE 정본 준수를 위한 타이포 보정만 둔다. 형태 재구현 금지. */
.wpwrap{grid-column:2 / -1;margin-top:var(--sty-block)}
/* 모바일: 컬럼 오프셋을 풀고 페이지 마진에 정렬 (sop 모바일 좌 78px 들여쓰기 지적) */
@media(max-width:1024px){ .wpwrap{grid-column:1 / -1} }
.wp-splitlead{margin-top:var(--sty-item);max-width:var(--sty-measure);
  font-size:var(--ks-w-body);line-height:var(--ks-w-lh-body);color:var(--c-body-strong)}
.wp-numbered h4,.wp-cards h4{margin:0;font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-card-title);line-height:1.4;letter-spacing:var(--ks-w-track-kr-display)}
.wp-numbered p{margin:.55em 0 0;font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body-strong)}
.wp-numbered ul,.wp-cards ul{list-style:none;margin:var(--sty-item) 0 0;padding:0}
.wp-numbered ul li,.wp-cards ul li{position:relative;padding-left:14px;
  font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body-strong)}
.wp-numbered ul li + li,.wp-cards ul li + li{margin-top:calc(var(--sty-item) * .35)}
.wp-numbered ul li::before,.wp-cards ul li::before{content:'';position:absolute;left:0;top:.72em;
  width:5px;height:1px;background:var(--c-ink)}
.wp-numbered ul li:only-child,.wp-cards ul li:only-child{padding-left:0}
.wp-numbered ul li:only-child::before,.wp-cards ul li:only-child::before{display:none}
/* 제목 줄수 차이로 열 리스트 시작선이 어긋나지 않게 — 제목 블록 2줄분 고정 (평가자 F축) */
.wp-cards h4{min-height:calc(1.4em * 2);padding-right:24px}
.step__en{min-height:calc(1.35em * 2)}

/* wp-cards 박스 해체 — 전역 문법(박스 대신 라인·여백·면) 준수: 4변 테두리 → 상단 룰만 */
.wp-cards{background:transparent;border:0;gap:var(--sty-gutter);row-gap:var(--sty-block)}
.wp-cards > article{background:transparent;padding:calc(var(--sty-item) * .8) 0 0;
  border-top:var(--sty-hairline) solid var(--c-ink)}
/* 모바일 비교표 — 가로 스크롤 대신 라벨 부착 스택 (평가자 D축: 3열 중 1열만 전달되던 절단 해소.
   여정 표의 data-l 패턴과 동일 문법. 셀의 열 이름은 data-h 로 마크업에 있다.) */
@media(max-width:640px){
  .cmp__wrap{overflow-x:visible}
  .cmp__wrap .cmp{min-width:0}
  .cmp thead{display:none}
  .cmp tbody tr{display:block;padding:calc(var(--sty-item) * .8) 0;
    border-bottom:var(--sty-hairline) solid var(--rule-c, var(--c-line))}
  .cmp tbody th,.cmp tbody td{display:block;border:0;padding:2px 0}
  .cmp tbody td::before{content:attr(data-h) ' — ';font-family:var(--ks-font-kr-sb);
    font-weight:600;color:inherit}
}

/* 프로그램 리스트 — 링 넘버 + 가로 2단 (2026-08-18 대표 지시 · 레퍼런스: 원형 링 번호.
   원형은 점 매트릭스 시그니처와 같은 도형 어휘 — 카드 라운딩 규칙과 별개) */
.wp-numbered--grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--sty-gutter)}
.wp-numbered--grid2 > li:nth-child(2){border-top:1px solid var(--wp-line-strong, var(--c-ink))}
.wp-numbered--ring > li{grid-template-columns:64px 1fr;padding:calc(var(--sty-row) * .9) 0}
.wp-numbered--ring > li::before{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--c-ink);border-radius:50%;
  font-size:var(--ks-w-sub);font-weight:400;color:var(--c-ink);line-height:1}
@media(max-width:640px){ .wp-numbered--grid2{grid-template-columns:minmax(0,1fr)}
  .wp-numbered--grid2 > li:nth-child(2){border-top:0} }

/* 지표 스탯: 지표명은 한글 — 정본 한글 서체·자간으로 보정, 질문 7회 액센트 반복은 잉크로 */
.wp-stats dd{font-family:var(--ks-font-kr-sb);font-size:var(--ks-w-card-title);line-height:1.35;
  letter-spacing:var(--ks-w-track-kr-display)}
.wp-stats span{color:var(--c-body)}
.wp-stats dt{font-family:var(--ks-font-en);letter-spacing:var(--ks-w-track-en)}

/* ── Outcomes 스태거 그리드 — 행 테이블 반복을 깨는 변주 (2026-08-18 대표 지시).
   3열 계단 오프셋 + 고스트 넘버. 박스 없이 헤어라인·여백으로만. */
.oc{grid-column:2 / -1;margin-top:var(--sty-block);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sty-gutter)}
.oc--4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sty-block)}
.oc__i{border-top:var(--sty-hairline) solid var(--c-ink);padding-top:var(--sty-item)}
.oc__i:nth-child(2){margin-top:calc(var(--sty-sec) * .55)}
.oc__i:nth-child(3){margin-top:calc(var(--sty-sec) * 1.1)}
/* 4항목(2×2)은 스태거를 걸지 않는다 — 넓은 화면에서 들쭉날쭉한 여백으로 읽힘 (2026-08-18 실검수) */
.oc--4 .oc__i:nth-child(n){margin-top:0}
.oc--4 .oc__n{font-size:calc(var(--ks-w-chapter-num) * .7)}
.oc__d{max-width:var(--sty-measure)}
.oc__n{font-family:var(--ks-font-en);font-size:var(--ks-w-chapter-num);line-height:1;
  color:var(--c-tint-deep)}
.oc__t{margin-top:var(--sty-item);font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-card-title);line-height:1.4;letter-spacing:var(--ks-w-track-kr-display)}
.oc__d{margin-top:calc(var(--sty-item) * .7);font-size:var(--ks-w-sub);line-height:1.7;
  color:var(--c-body-strong)}
.oc__o{margin-top:var(--sty-item);font-size:var(--ks-w-sub);line-height:1.6}
.oc__o b{display:block;font-family:var(--ks-font-en);font-weight:400;
  font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
@media(max-width:1024px){
  .oc,.oc--4{grid-template-columns:minmax(0,1fr);row-gap:var(--sty-row)}
  .oc__i:nth-child(n),.oc--4 .oc__i:nth-child(n){margin-top:0}
}

/* ── 지그재그 리스트 — 중앙 관통선 좌우 교차 (2026-08-18 그리드 변주 2차).
   지표처럼 병렬 항목을 카드 그리드가 아닌 세로 리듬으로. */
.zz{grid-column:2 / -1;margin-top:var(--sty-block);position:relative}
.zz::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--c-line)}
.zz__i{position:relative;width:calc(50% - var(--sty-gutter) * 1.5)}
.zz__i + .zz__i{margin-top:calc(var(--sty-row) * 1.2)}
.zz__i:nth-child(even){margin-left:auto}
.zz__i::after{content:'';position:absolute;top:.5em;width:7px;height:7px;border-radius:0;
  background:var(--c-ink)}
.zz__i:nth-child(odd)::after{right:calc(-1 * var(--sty-gutter) * 1.5 - 3px)}
.zz__i:nth-child(even)::after{left:calc(-1 * var(--sty-gutter) * 1.5 - 3px)}
.zz__i:nth-child(odd){text-align:right}
.zz__n{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--sty-accent)}
.zz__t{margin-top:.3em;font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-card-title);line-height:1.4;letter-spacing:var(--ks-w-track-kr-display)}
.zz__en{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.zz__d{margin-top:.5em;font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body-strong)}
@media(max-width:640px){
  .zz::before{left:3px}
  .zz__i{width:auto;margin-left:calc(var(--sty-gutter) * 1.5)}
  .zz__i:nth-child(odd){text-align:left}
  .zz__i:nth-child(even){margin-left:calc(var(--sty-gutter) * 1.5)}
  .zz__i:nth-child(n)::after{left:calc(-1 * var(--sty-gutter) * 1.5 - 3px);right:auto}
}

/* ── 색인형 행 — 큰 활자 유형명 + 우측 세부 리스트 (Scope 용. 인라인 나열은 가독성 저하로 폐기) */
.sx{grid-column:2 / -1;margin-top:var(--sty-block);border-top:1px solid var(--c-ink)}
.sx__r{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  column-gap:var(--sty-gutter);align-items:start;
  padding:var(--sty-row) 0;border-bottom:var(--sty-hairline) solid var(--c-line)}
.sx__t{font-family:var(--ks-font-kr-sb);font-weight:600;font-size:var(--ks-w-card-title);
  line-height:1.4;letter-spacing:var(--ks-w-track-kr-display)}
.sx__d{list-style:none;margin:0;padding:0}
.sx__d li{position:relative;padding-left:14px;font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body-strong)}
.sx__d li + li{margin-top:calc(var(--sty-item) * .35)}
.sx__d li::before{content:'';position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--c-ink)}
@media(max-width:640px){ .sx__r{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--sty-item) * .5)} }

/* 항목이 하나뿐인 리스트엔 대시 마커 불필요 (2026-08-18 대표 지시) */
.group li:only-child,.sx__d li:only-child,.agx__p li:only-child,.narticle__ul li:only-child{padding-left:0}
.group li:only-child::before,.sx__d li:only-child::before,
.agx__p li:only-child::before,.narticle__ul li:only-child::before{display:none}

/* 틴트 면 위에서 뮤티드 텍스트가 묻힌다 — 한 단계 진하게 (2026-08-18 대표 지시) */
.sec--deep .cmp tbody th,.sec--deep .cmp thead th:first-child,
.sec--tint .cmp tbody th,.sec--tint .cmp thead th:first-child,
.sec--deep .ir__en,.sec--tint .ir__en,
.sec--deep .zz__en,.sec--tint .zz__en{color:var(--c-body-strong)}

/* 여정 표 가독 — 다크 면 위 셀 본문·헤더를 본문급으로 (평가자 지적: 묻힘) */
.jrn__r p{font-size:var(--ks-w-body);color:var(--c-body-on-dark)}
.jrn__h span{font-size:var(--ks-w-sub)}
/* 모바일 히어로: 메타 3행을 사진 노이즈에서 분리 — 잉크 단색 패널 */
@media(max-width:640px){
  .phero--img .phero__meta{background:var(--c-ink);padding:var(--sty-item);
    border-top:var(--sty-hairline) solid var(--c-canvas)}
}
/* 벤핏·리스트 본문이 "읽지 않아도 되는 텍스트"로 오인되지 않게 — 한 단계 진하게 */
.wp-steps p,.wp-numbered p{color:var(--c-body-strong)}

/* 고객여정 표 — 한글 주 표기·영문 보조 (2026-08-18 대표 지시 "한글이 더 강조되게") */
.jrn__r > div{display:flex;flex-direction:column-reverse}
.jrn__r .jrn__k{margin-top:0;font-size:var(--ks-w-card-title);line-height:1.35;
  letter-spacing:var(--ks-w-track-kr-display)}
.jrn__r .jrn__s{margin-top:calc(var(--sty-item) * .3);color:var(--c-muted)}
.dark .jrn__r .jrn__s{color:var(--c-body-on-dark)}

/* ── 에이전트 넘버드 스택 — 고스트 번호 + 제목·설명 + 우측 세부 (분할 뷰 폐기, 전 항목 노출) */
.agx{grid-column:1 / -1;margin-top:var(--sty-block)}
/* 내부 열은 페이지 12컬럼 트랙에 정확히 앉힌다 — 임의 fr 분할은 관통 그리드를 깨뜨린다 (2026-08-18 실검수) */
.agx__i{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--sty-gutter);align-items:start;
  border-top:var(--sty-hairline) solid var(--c-ink);
  padding:calc(var(--sty-row) * 1.1) 0 calc(var(--sty-row) * 1.3)}
.agx__n{grid-column:1 / span 2}
.agx__i > div{grid-column:3 / span 6}
.agx__p{grid-column:9 / span 4}
.agx__n{font-family:var(--ks-font-en);font-size:var(--ks-w-chapter-num);line-height:.85;
  color:var(--c-tint-deep)}
.agx__t{font-family:var(--ks-font-kr-sb);font-weight:600;font-size:var(--ks-w-title);
  line-height:var(--ks-w-lh-title);letter-spacing:var(--ks-w-track-kr-display)}
.agx__d{margin-top:var(--sty-item);max-width:var(--sty-measure);
  font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body-strong)}
.agx__p{list-style:none;margin:0;padding:0;align-self:center}
.agx__p li{position:relative;padding-left:14px;font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body-strong)}
.agx__p li + li{margin-top:calc(var(--sty-item) * .4)}
.agx__p li::before{content:'';position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--c-ink)}
@media(max-width:1024px){
  .agx__i{grid-template-columns:minmax(0,1fr);row-gap:var(--sty-item)}
  .agx__n,.agx__i > div,.agx__p{grid-column:1 / -1}
  .agx__n{font-size:calc(var(--ks-w-chapter-num) * .55)}
}

/* ── 지표 가로 레일 — 7열 한 줄 (지그재그 폐기: "가로로") */
/* 7열 한 줄 (가로로 — 대표 지시) · 좌변은 본문 공통 138 라인 */
.ir{grid-column:2 / -1;margin-top:var(--sty-block);display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));column-gap:var(--sty-gutter)}
.ir__i{border-top:var(--sty-hairline) solid var(--c-ink);padding-top:var(--sty-item)}
.ir__n{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--sty-accent)}
.ir__t{margin-top:.4em;font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-sub);line-height:1.4;letter-spacing:var(--ks-w-track-kr)}
.ir__en{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.ir__d{margin-top:.6em;font-size:var(--ks-w-sub);line-height:1.6;color:var(--c-body)}
/* 모바일: 가로 스크롤은 항목이 잘려 "존재 자체가 안 보인다"(평가자 D축 3점) — 격자 적층으로 전 항목 노출 */
@media(max-width:1024px){
  .ir{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sty-row)}
}
@media(max-width:480px){
  .ir{grid-template-columns:minmax(0,1fr)}
}

/* 분할 뷰 상세의 불릿 (program 분할 뷰 공용) */
.narticle__ul{list-style:none;margin:var(--sty-block) 0 0;padding:0;max-width:var(--sty-measure)}
.narticle__ul li{position:relative;padding-left:14px;font-size:var(--ks-w-sub);
  line-height:1.7;color:var(--c-body-strong)}
.narticle__ul li + li{margin-top:calc(var(--sty-item) * .4)}
.narticle__ul li::before{content:'';position:absolute;left:0;top:.72em;
  width:5px;height:1px;background:var(--c-ink)}

/* 에이전트 리스트의 2열 카드 그리드 변형 — 행 테이블과 다른 두 번째 형태 */
.agents--grid{border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--sty-gutter);row-gap:var(--sty-block)}
.agents--grid .agent{display:block;border-top:var(--sty-hairline) solid var(--c-ink);
  border-bottom:0;padding:calc(var(--sty-item) * .8) 0 0}
.agents--grid .agent__d{margin-top:calc(var(--sty-item) * .7)}
.agents--grid .agent__p{margin-top:var(--sty-item)}
@media(max-width:640px){ .agents--grid{grid-template-columns:minmax(0,1fr)} }

/* ── 에이전트 · 항목 리스트 (번호 + 제목 + 설명 + 하위 불릿) ────────────
   카드 박스를 쓰지 않는다. 구획은 헤어라인 하나로 만든다. */
.agents{grid-column:2 / -1;margin-top:var(--sty-block);
  border-top:var(--sty-hairline) solid var(--c-line)}
.agent{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);
  column-gap:var(--sty-gutter);align-items:start;
  padding:var(--sty-row) 0;border-bottom:var(--sty-hairline) solid var(--c-line)}
.agent__n{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--sty-accent)}
.agent__t{margin-top:calc(var(--sty-item) * .45);font-family:var(--ks-font-kr-sb);
  font-weight:600;font-size:var(--ks-w-card-title);line-height:1.35;
  letter-spacing:var(--ks-w-track-kr-display)}
.agent__d{font-size:var(--ks-w-body);line-height:var(--ks-w-lh-body);color:var(--c-body-strong)}
.agent__p{list-style:none;margin:0;padding:0}
.agent__p li{position:relative;padding-left:14px;
  font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body)}
.agent__p li + li{margin-top:calc(var(--sty-item) * .3)}
.agent__p li::before{content:'';position:absolute;left:0;top:.72em;
  width:5px;height:var(--sty-hairline);background:var(--c-line)}
.dark .agent,.dark .agents{border-color:var(--c-line-on-dark)}
.dark .agent__d{color:var(--c-body-on-dark)}
.dark .agent__p li{color:var(--c-body-on-dark)}
.dark .agent__p li::before{background:var(--c-line-on-dark)}
.dark .agent__n{color:var(--c-accent-on-dark)}
@media(max-width:1024px){
  .agents{grid-column:1 / -1}
  .agent{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--sty-item) * .7)}
}

/* ── 키·값 표 (도입 절차 · 규모 구간 · 산정 기준) ───────────────────── */
.kv2{grid-column:2 / -1;margin-top:var(--sty-block);
  border-top:var(--sty-hairline) solid var(--c-line)}
.kvrow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  column-gap:var(--sty-gutter);align-items:start;
  padding:calc(var(--sty-row) * .8) 0;border-bottom:var(--sty-hairline) solid var(--c-line)}
.kvrow > b{font-family:var(--ks-font-kr-sb);font-weight:600;font-size:var(--ks-w-sub);
  line-height:1.6;letter-spacing:var(--ks-w-track-kr)}
.kvrow > span{font-size:var(--ks-w-body);line-height:var(--ks-w-lh-body);color:var(--c-body-strong)}
.dark .kv2,.dark .kvrow{border-color:var(--c-line-on-dark)}
.dark .kvrow > span{color:var(--c-body-on-dark)}
@media(max-width:1024px){
  .kv2{grid-column:1 / -1}
  .kvrow{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--sty-item) * .45)}
}

/* ── 필드노트 목록 ──────────────────────────────────────────────────── */
.notes{grid-column:2 / -1;margin-top:var(--sty-block);
  border-top:var(--sty-hairline) solid var(--c-line)}
/* 노트 히어로 — 다크 면 · 타이트 (2026-08-18 대표 지시) */
.phero--tight{padding-block:calc(var(--sty-sec) * .9) calc(var(--sty-sec) * .6)}
.phero--tight .phero__s{color:var(--c-body-on-dark)}

/* ── 노트 분할 뷰 — 목록과 본문을 한 화면에 (2026-08-18 대표 지시 "뎁스 다시").
   좌측 리스트(스티키·타이트) + 우측 본문 패널. 박스 없이 헤어라인·좌측 라인으로만 구획. */
/* 노트 리스트 — 라벨은 트랙 1, 리스트는 본문 좌변(트랙 2)에서 시작 (2026-08-18 대표 레퍼런스) */
.nlist-label{grid-column:1 / span 1;align-self:start;margin-top:var(--sty-block);
  position:sticky;top:96px}
.nlist{grid-column:2 / span 3;align-self:start;margin-top:var(--sty-block);
  border-top:var(--sty-hairline) solid var(--c-ink);position:sticky;top:96px}
.nlist__i{display:block;width:100%;text-align:left;padding:calc(var(--sty-item) * .45) 0;
  border-bottom:var(--sty-hairline) solid var(--c-line)}
.nlist__i i{font-style:normal;font-family:var(--ks-font-en);
  font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.nlist__i b{display:block;font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-sub);line-height:1.5;color:var(--c-body-strong);
  transition:color var(--sty-dur-base) var(--sty-ease-out)}
.nlist__i .nrow{display:flex;justify-content:space-between;gap:12px;margin-top:.28em}
.nnew{font-style:normal;display:inline-block;margin-left:8px;padding:1px 6px;
  background:var(--sty-accent);color:var(--c-canvas);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);vertical-align:.15em}
.nlist__i.is-on b,.nlist__i:hover b{color:var(--sty-accent)}
.nlist__i.is-on i{color:var(--c-body)}
.nbody{grid-column:5 / span 8;margin-top:var(--sty-block);
  border-top:var(--sty-hairline) solid var(--c-ink);padding-top:var(--sty-row)}
/* 페이징 — 리스트 하단 (2026-08-18 대표 지시) */
.npag{display:flex;gap:6px;padding-top:var(--sty-item)}
.npag__b{min-width:28px;height:28px;padding:0 6px;text-align:center;
  font-family:var(--ks-font-en);font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);
  color:var(--c-muted);border-bottom:1px solid transparent}
.npag__b.is-on{color:var(--c-ink);border-bottom-color:var(--c-ink)}
.npag__b:hover{color:var(--c-ink)}
.narticle{display:none}
.narticle.is-on{display:block}
.narticle__k{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--sty-accent)}
.narticle h3{margin-top:calc(var(--sty-item) * .8);font-family:var(--ks-font-kr-sb);
  font-weight:600;font-size:var(--ks-w-title);line-height:var(--ks-w-lh-title);
  letter-spacing:var(--ks-w-track-kr-display)}
.narticle__lead{margin-top:var(--sty-item);max-width:var(--sty-measure);
  font-size:var(--ks-w-body);line-height:var(--ks-w-lh-body);color:var(--c-body-strong)}
.narticle__frame{margin-top:var(--sty-block);padding-left:var(--sty-item);
  border-left:2px solid var(--c-ink)}
.narticle__frame p{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.narticle__frame ol{margin-top:calc(var(--sty-item) * .5);padding-left:1.2em;
  font-size:var(--ks-w-sub);line-height:1.8;color:var(--c-body-strong)}
.narticle__note{margin-top:var(--sty-block);max-width:var(--sty-measure);
  font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-muted)}
/* 노트 본문 이미지 — 리드 아래 1장, 무채 처리 (2026-08-18 대표 지시) */
.narticle__img{margin:var(--sty-block) 0 0;max-width:var(--n-measure)}
.narticle__img img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1)}

/* 노트 본문 전문 (2026-08-18 5편 주입) —
   본문 폭은 공통 measure(34em)보다 넓게 쓴다 (대표 지시: 가로 더). */
.narticle{--n-measure:46em;
  /* 행간 규칙 (2026-08-18 재조정): 넓힌 컬럼(46em)에 맞춰 본문 1.7 기준.
     리드·리스트 1.65, 표 셀 1.55, 소제목 1.35 — 값은 여기 한 곳에서만 관리 */
  --n-lh-body:1.7;--n-lh-lead:1.65;--n-lh-list:1.65;--n-lh-cell:1.55;--n-lh-h4:1.35}
.narticle h4{margin-top:calc(var(--sty-sec) * .55);font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-card-title);line-height:var(--n-lh-h4);letter-spacing:var(--ks-w-track-kr-display);
  max-width:var(--n-measure)}
.narticle .np{margin-top:calc(var(--sty-item) * 1.1);max-width:var(--n-measure);
  font-size:var(--ks-w-body);line-height:var(--n-lh-body);color:var(--c-body)}
.narticle .ntab{margin-top:var(--sty-block);width:100%;max-width:var(--n-measure);
  border-collapse:collapse;border-top:var(--sty-hairline) solid var(--c-ink)}
.narticle .ntab th,.narticle .ntab td{text-align:left;vertical-align:top;
  padding:calc(var(--sty-item) * .6) 12px calc(var(--sty-item) * .6) 0;
  border-bottom:var(--sty-hairline) solid var(--c-line);
  font-size:var(--ks-w-sub);line-height:var(--n-lh-cell);color:var(--c-body)}
.narticle .ntab th{font-family:var(--ks-font-kr-sb);font-weight:600;color:var(--c-body-strong)}
.nfaq{margin:var(--sty-block) 0 0;max-width:var(--sty-measure)}
.nfaq dt{font-family:var(--ks-font-kr-sb);font-weight:600;font-size:var(--ks-w-sub);
  line-height:1.5;color:var(--c-body-strong);padding-top:calc(var(--sty-item) * .8);
  border-top:var(--sty-hairline) solid var(--c-line)}
.nfaq dt:first-child{border-top:0;padding-top:0}
.nfaq dd{margin:calc(var(--sty-item) * .4) 0 calc(var(--sty-item) * .8);
  font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body)}
.narticle__ul li b{font-weight:600;color:var(--c-body-strong)}
.narticle .narticle__lead,.narticle .narticle__ul{max-width:var(--n-measure)}
.narticle .narticle__lead{line-height:var(--n-lh-lead)}
.narticle .narticle__ul li{line-height:var(--n-lh-list)}
.narticle__cta{margin-top:var(--sty-block)}
/* 하단 마감 라인은 상단 본문 시작 라인과 같은 전폭 (2026-08-18 대표 지시: 위아래 라인 동일) */
.narticle__foot{margin-top:calc(var(--sty-sec) * .6);padding-top:var(--sty-item);
  border-top:var(--sty-hairline) solid var(--c-line);
  font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-muted)}
@media(max-width:1024px){
  .nlist{grid-column:1 / -1;position:static}
  .nbody{grid-column:1 / -1}
}

.note-item{display:grid;grid-template-columns:96px minmax(0,1fr) 120px;
  column-gap:var(--sty-gutter);align-items:baseline;
  padding:var(--sty-row) 0;border-bottom:var(--sty-hairline) solid var(--c-line)}
.note-item__d,.note-item__s{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.note-item__s{text-align:right}
.note-item__t{font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-card-title);line-height:1.4;letter-spacing:var(--ks-w-track-kr-display)}
.note-item__x{margin-top:calc(var(--sty-item) * .4);font-family:var(--ks-font-kr);font-weight:400;
  font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body);letter-spacing:var(--ks-w-track-kr)}
@media(max-width:1024px){
  .notes{grid-column:1 / -1}
  .note-item{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--sty-item) * .4)}
  .note-item__s{text-align:left}
}

/* ── 문의 폼 ────────────────────────────────────────────────────────────
   입력 박스도 라운딩 0 · 그림자 0. 밑줄 하나로 필드를 만든다. */
/* notes 구조와 동일 배치 (2026-08-18 대표 지시): 좌 틴트 안내 레일 · 우 본문(폼) */
.form{grid-column:5 / span 8;margin-top:var(--sty-block);max-width:46em}
.form__row{margin-top:var(--sty-row)}
.form__row:first-child{margin-top:0}
.form label{display:block;font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.form label .kr{font-family:var(--ks-font-kr);font-size:var(--ks-w-label);
  letter-spacing:var(--ks-w-track-kr);color:var(--c-body-strong)}
.form label .req{color:var(--sty-accent)}
.form input,.form textarea,.form select{width:100%;margin-top:calc(var(--sty-item) * .35);
  padding:calc(var(--sty-item) * .55) 0;min-height:44px;
  background:transparent;border:0;border-bottom:var(--sty-hairline) solid var(--c-line);
  border-radius:var(--sty-radius);color:var(--c-ink);
  font-family:var(--ks-font-kr);font-size:var(--ks-w-body);line-height:1.6;
  letter-spacing:var(--ks-w-track-kr)}
.form textarea{min-height:104px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-bottom-color:var(--c-accent)}
.form__radios{display:flex;flex-wrap:wrap;gap:var(--sty-item);margin-top:calc(var(--sty-item) * .5)}
.form__radios label{display:inline-flex;align-items:center;gap:.5em;min-height:44px;
  font-family:var(--ks-font-kr);font-size:var(--ks-w-sub);letter-spacing:var(--ks-w-track-kr);
  color:var(--c-body-strong)}
.form__radios input{width:auto;min-height:0;margin:0}
.form__agree{margin-top:var(--sty-block);padding-top:var(--sty-row);
  border-top:var(--sty-hairline) solid var(--c-line)}
.form__agree p{font-size:var(--ks-w-sub);line-height:1.75;color:var(--c-body)}
.form__agree .chk{display:flex;align-items:flex-start;gap:.6em;margin-top:var(--sty-item);
  min-height:44px;font-size:var(--ks-w-sub);line-height:1.6;color:var(--c-body-strong)}
.form__agree .chk input{width:auto;min-height:0;margin-top:.35em}
.form__note{margin-top:var(--sty-item);font-size:var(--ks-w-micro);line-height:1.7;color:var(--c-muted)}
/* 폼 상단 고정 블록 — 이 자리에서 무엇을 하고 무엇을 하지 않는지 먼저 못박는다 */
.gate{grid-column:2 / span 3;margin-top:var(--sty-block);align-self:start;
  position:sticky;top:96px;padding:var(--sty-row);background:var(--c-tint)}
.gate h3{font-family:var(--ks-font-kr-sb);font-weight:600;font-size:var(--ks-w-sub);
  line-height:1.5;letter-spacing:var(--ks-w-track-kr)}
.gate ol,.gate ul{margin:calc(var(--sty-item) * .5) 0 0;padding-left:1.1em}
.gate li{font-size:var(--ks-w-sub);line-height:1.8;color:var(--c-body-strong)}
.gate .gate__h{margin-top:var(--sty-row);font-family:var(--ks-font-en);
  font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
@media(max-width:1024px){ .form,.gate{grid-column:1 / -1} }

/* ── 법정 고지 본문 (개인정보 처리방침 · 이용약관) ───────────────────── */
.legal{grid-column:2 / span 8;margin-top:var(--sty-block)}
.legal h3{margin-top:var(--sty-block);font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-card-title);line-height:1.4;letter-spacing:var(--ks-w-track-kr-display)}
.legal h3:first-child{margin-top:0}
.legal p{margin-top:var(--sty-item);max-width:var(--sty-measure);
  font-size:var(--ks-w-body);line-height:var(--ks-w-lh-body);color:var(--c-body-strong)}
.legal ul{margin:var(--sty-item) 0 0;padding-left:1.1em;max-width:var(--sty-measure)}
.legal li{font-size:var(--ks-w-body);line-height:var(--ks-w-lh-body);color:var(--c-body-strong)}
.legal .tbd{font-family:var(--ks-font-en);font-size:var(--ks-w-sub);
  letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
@media(max-width:1024px){ .legal{grid-column:1 / -1} }

/* ── 인용 스테이트먼트 ──────────────────────────────────────────────── */
.stmt{grid-column:4 / span 8;margin-top:var(--sty-block)}
/* 배너형 — 섹션명·타이틀 없이 인용만 (2026-08-18 대표 지시) */
.stmt--banner{grid-column:1 / -1;margin-top:0;text-align:center}
.stmt--banner blockquote{max-width:none}
.stmt--banner cite{margin-top:var(--sty-row)}
/* 신뢰 브리지 — 서술 대신 저장소(홈 REFERENCES·대표 소개)로 잇는 1줄 (2026-08-18 대표 확정) */
.stmt__bridge{margin-top:var(--sty-item);font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-muted)}
.stmt__bridge a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.stmt blockquote{margin:0;font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-title);line-height:var(--ks-w-lh-title);
  letter-spacing:var(--ks-w-track-kr-display)}
.stmt cite{display:block;margin-top:var(--sty-row);font-style:normal;
  font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.dark .stmt cite{color:var(--c-body-on-dark)}
@media(max-width:1024px){ .stmt{grid-column:1 / -1} }

/* ── 지표 그리드 (7대 지표 등 균질한 항목 나열) ─────────────────────────
   박스를 만들지 않는다. 항목마다 위 헤어라인 하나로 구획하고, 번호는 액센트로. */
.idx{grid-column:2 / -1;margin-top:var(--sty-block);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--sty-gutter);row-gap:var(--sty-row)}
.idx__i{padding-top:calc(var(--sty-item) * .8);
  border-top:var(--sty-hairline) solid var(--rule-c, var(--c-line))}
.idx__n{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--step-mark, var(--sty-accent))}
.idx__t{margin-top:calc(var(--sty-item) * .4);font-family:var(--ks-font-kr-sb);
  font-weight:600;font-size:var(--ks-w-sub);line-height:1.4;
  letter-spacing:var(--ks-w-track-kr)}
.idx__en{margin-top:2px;font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.idx__d{margin-top:calc(var(--sty-item) * .5);font-size:var(--ks-w-sub);
  line-height:1.7;color:var(--c-body)}
.dark .idx__i{border-top-color:var(--c-line-on-dark)}
.dark .idx__d{color:var(--c-body-on-dark)}
.dark .idx__n{color:var(--c-accent-on-dark)}
@media(max-width:1024px){
  .idx{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){ .idx{grid-template-columns:minmax(0,1fr)} }

/* ── 그룹 리스트 (수행 영역 · 레퍼런스 그룹) ────────────────────────── */
.groups{grid-column:2 / -1;margin-top:var(--sty-block);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sty-gutter);
  row-gap:var(--sty-block)}
.group{border-top:var(--sty-hairline) solid var(--rule-c, var(--c-line));
  padding-top:calc(var(--sty-item) * .8)}
.group__t{font-family:var(--ks-font-kr-sb);font-weight:600;font-size:var(--ks-w-card-title);
  line-height:1.4;letter-spacing:var(--ks-w-track-kr-display)}
/* 제목 1줄·서브카피 1줄이 한 호흡으로 읽히게 — 사이 간격 축소 (2026-08-18 대표 지시) */
.group ul{list-style:none;margin:calc(var(--sty-item) * .45) 0 0;padding:0}
.group li{position:relative;padding-left:14px;font-size:var(--ks-w-sub);
  line-height:1.7;color:var(--c-body)}
.group li + li{margin-top:calc(var(--sty-item) * .35)}
.group li::before{content:'';position:absolute;left:0;top:.72em;
  width:5px;height:var(--sty-hairline);background:var(--c-line)}
.dark .group{border-top-color:var(--c-line-on-dark)}
.dark .group li{color:var(--c-body-on-dark)}
.dark .group li::before{background:var(--c-line-on-dark)}
@media(max-width:1024px){ .groups{grid-column:2 / -1;grid-template-columns:minmax(0,1fr)} }

/* ── 스텝 — 다항목 변형 (.steps--wrap) ─────────────────────────────────
   index 의 .steps 는 항목 3개가 가로줄 하나에 매달린 형태다. 5단계처럼 줄바꿈이
   생기면 둘째 줄의 점·세로선이 걸릴 가로줄이 없어 공중에 뜬다.
   변형에서는 가로줄을 컨테이너가 아니라 **항목마다** 긋는다 — 몇 개가 되든 걸린다. */
.steps--wrap{border-top:0;padding-top:0;row-gap:var(--sty-block)}
.steps--wrap .step{border-top:var(--sty-hairline) solid var(--rule-c, var(--c-line));
  padding-top:var(--pad)}
.steps--wrap .step__dot{top:-4px}
.steps--wrap .step::before{top:5px;height:calc(var(--lead) - 5px)}
/* 5단계는 한 줄에 다 세운다 — 순서가 한눈에 읽히는 것이 이 블록의 존재 이유다 */
.steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps--5 .step__en{font-size:var(--ks-w-card-title);line-height:1.15}
@media(max-width:1024px){ .steps--5{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){ .steps--5{grid-template-columns:minmax(0,1fr)} }

/* 어두운 면 위에서의 스텝·지표 — 잉크색 글자는 검정-온-검정이 된다 */
.dark .step__en,.dark .step__t{color:var(--c-canvas)}
.dark .step__no{color:var(--c-accent-on-dark)}
.dark .step__d{color:var(--c-body-on-dark)}
.dark .steps{border-top-color:var(--c-line-on-dark)}
.dark .steps--wrap .step{border-top-color:var(--c-line-on-dark)}
.dark .steps{--rule-c:var(--c-line-on-dark);--step-mark:var(--c-accent-on-dark)}

/* 딥 면(#C1C8D6) 위에서는 --c-muted(#AEAEAE) 가 바탕과 거의 붙어 안 읽힌다.
   보조 라벨을 잉크 쪽으로 섞어 최소 대비를 확보한다. */
.sec--deep .idx__en,
.sec--deep .note-item__d,
.sec--deep .note-item__s{color:color-mix(in srgb, var(--c-ink) 78%, var(--c-tint-deep))}

/* ── 고객여정 표 (단계 / 온라인 / 현장) ─────────────────────────────── */
/* ── 상황 이미지 병치 (2026-08-18 테스트, retail 먼저) — 정보 옆에 상황 사진을 붙여
   맥락 이해를 돕는다(레퍼런스: Hanvit 패턴). 사진은 무채 규율 그대로. */
.imgsplit{grid-column:2 / -1;margin-top:var(--sty-block);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sty-gutter);align-items:start}
/* 사진 종결선 = 우측 본문 종결선 — 행 높이는 본문이 정하고 사진이 따라 잘린다 */
.imgsplit__ph{grid-column:1;margin:0;position:relative;align-self:stretch}
.imgsplit__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}

/* ── AI 질문·답변 일러스트 (2026-08-18 대표 지시 — 사진 대신 추상 UI) —
   도형 어휘는 시스템 그대로: 직각 패널·헤어라인 스켈레톤 바·점 매트릭스·원형 링. */
.imgsplit__ph--ill{background:var(--c-tint);display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sty-row) * 1.2)}
.aiq{position:relative;width:min(78%,420px)}
.aiq__panel{background:var(--c-canvas);border:var(--sty-hairline) solid var(--c-line);
  padding:calc(var(--sty-item) * 1.6) calc(var(--sty-item) * 1.8)}
.aiq__tag{font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
/* 답변 아래 입력창 — 질문을 입력하는 중인 채팅 컴포저 */
.aiq__input{margin-top:calc(var(--sty-item) * 1.6);border:var(--sty-hairline) solid var(--c-ink);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(var(--sty-item) * .55) calc(var(--sty-item) * .55)
          calc(var(--sty-item) * .55) calc(var(--sty-item) * 1.0)}
.aiq__typing{font-family:var(--ks-font-kr-sb);font-weight:600;font-size:var(--ks-w-sub);
  line-height:1.4;color:var(--c-ink)}
.aiq__caret{display:inline-block;width:1.5px;height:.95em;background:var(--c-ink);
  vertical-align:-.12em;margin-left:2px;animation:aiq-blink 1.1s steps(1) infinite}
@keyframes aiq-blink{50%{opacity:0}}
.aiq__send{flex:none;width:34px;height:34px;background:var(--c-ink);color:var(--c-canvas);
  display:flex;align-items:center;justify-content:center}
.aiq__send .dots{width:14px;height:14px}
.aiq__bar{display:block;height:8px;background:var(--c-line);width:var(--w,80%);
  margin-top:calc(var(--sty-item) * .8);opacity:.75}
@media(max-width:1024px){
  .imgsplit__ph--ill{min-height:300px}
  .imgsplit__ph--ill,.aiq{position:relative}
}
.imgsplit__bd{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--sty-gutter);row-gap:var(--sty-block)}
.phcards{grid-column:2 / -1;margin-top:var(--sty-block);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sty-gutter);row-gap:var(--sty-block)}
.phcard{margin:0}
.phcard img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1)}
.phcard figcaption{margin-top:calc(var(--sty-item) * .9);border-top:var(--sty-hairline) solid var(--c-ink);
  padding-top:calc(var(--sty-item) * .8)}
@media(max-width:1024px){
  .imgsplit__ph,.imgsplit__bd{grid-column:1 / -1}
  .imgsplit__ph{position:static}
  .imgsplit__ph img{position:static;height:auto;aspect-ratio:16/10}
  .imgsplit__bd{margin-top:var(--sty-row)}
  .phcards{grid-template-columns:minmax(0,1fr)}
}

/* ── Measure EN·KR 가로 3단 (2026-08-18 대표 지시 — 열마다 EN 디스플레이 위·한글 아래, 타이포 대비) */
.msr{grid-column:2 / -1;margin-top:var(--sty-block);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sty-gutter)}
.msr__row{border-top:var(--sty-hairline) solid var(--c-line);
  padding-top:calc(var(--sty-item) * 1.2)}
.msr__no{font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.msr__t{margin-top:calc(var(--sty-item) * .9);font-family:var(--ks-font-en);
  font-size:var(--ks-w-subtitle);line-height:var(--ks-w-lh-subtitle);
  letter-spacing:var(--ks-w-track-en);color:var(--c-ink)}
.msr__kr{margin-top:calc(var(--sty-item) * 1.6)}
.msr__kr .group__t{font-size:var(--ks-w-card-title)}
.msr__kr ul{list-style:none;margin:calc(var(--sty-item) * .5) 0 0;padding:0}
.msr__kr li{font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body)}
@media(max-width:1024px){
  .msr{grid-template-columns:minmax(0,1fr);row-gap:var(--sty-row)}
}

/* ── 라인 일러스트 카드 4열 (2026-08-18 대표 지시 — 번호·일러스트·타이틀·설명) —
   세로 헤어라인으로 컬럼 구분, 일러스트는 1px 라인워크(도형 어휘: 원·직선·직각). */
.ilcards{grid-column:2 / -1;margin-top:var(--sty-block);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.ilcard{border-left:var(--sty-hairline) solid var(--c-line);
  padding-left:var(--sty-gutter);padding-right:calc(var(--sty-gutter) * .5)}
.ilcard__no{font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.ilcard__ic{width:88px;height:88px;margin-top:calc(var(--sty-item) * 2.2);display:block;
  fill:none;stroke:var(--c-ink);stroke-width:1;vector-effect:non-scaling-stroke}
.ilcard__ic *{vector-effect:non-scaling-stroke}
.ilcard .group__t{margin-top:calc(var(--sty-item) * 1.8)}
.ilcard__d{margin-top:calc(var(--sty-item) * .6);font-size:var(--ks-w-sub);
  line-height:1.7;color:var(--c-body)}
@media(max-width:1024px){ .ilcards{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sty-block)} }
@media(max-width:640px){ .ilcards{grid-template-columns:minmax(0,1fr)} }

/* ── 여정 리스트 (2026-08-18 대표 지시: 스텝 표기 + 연속 라인) —
   Step 번호가 위, 한글 단계명, 그 아래 Online·On-site 리스트. 4열 × 2단.
   상단 라인은 스텝 부품처럼 행 전체를 한 줄로 잇는다 (gap 0 + 컬럼 내부 여백). */
.jny{grid-column:2 / -1;margin-top:var(--sty-block);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;
  row-gap:calc(var(--sty-sec) * .5)}
.jny__col{display:grid;grid-template-rows:auto auto auto;align-content:start;
  border-top:1px solid var(--c-line-on-dark);
  padding-right:var(--sty-gutter)}
.jny__axis{grid-row:1;position:relative;padding-top:calc(var(--sty-item) * .8)}
.jny__axis::before{content:'';position:absolute;top:-3.5px;left:0;width:7px;height:7px;
  border-radius:50%;background:var(--c-canvas)}
.jny__k{font-family:var(--ks-font-kr-sb);font-weight:600;font-size:var(--ks-w-card-title);
  line-height:1.35;letter-spacing:var(--ks-w-track-kr-display);color:var(--c-canvas)}
.jny__s{margin:0 0 .55em;font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-accent-on-dark)}
.jny__on,.jny__off{font-size:var(--ks-w-sub);line-height:1.6;
  color:color-mix(in srgb,var(--c-canvas) 86%,var(--c-ink))}
.jny__on{grid-row:2;margin-top:calc(var(--sty-item) * .9)}
.jny__off{grid-row:3;margin-top:calc(var(--sty-item) * .7)}
.jny__on::before,.jny__off::before{display:block;font-family:var(--ks-font-en);
  font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);
  color:var(--c-body-on-dark);opacity:.6;margin-bottom:2px}
.jny__on::before{content:'Online'}
.jny__off::before{content:'On-site'}
@media(max-width:1024px){
  .jny{grid-template-columns:minmax(0,1fr);row-gap:0}
  .jny__col{border-top:0;border-bottom:var(--sty-hairline) solid var(--c-line-on-dark);
    padding:calc(var(--sty-item) * .9) 0}
  .jny__axis{border-top:0;padding-top:0}
  .jny__axis::before{display:none}
}

/* 표 폭을 8열로 좁히고 행 패딩을 줄여 행 단위 정보 매칭이 붙게 (2026-08-18 대표 지시) */
.jrn{grid-column:2 / span 8;margin-top:var(--sty-block);
  border-top:var(--sty-hairline) solid var(--rule-c, var(--c-line))}
.jrn__h,.jrn__r{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);
  column-gap:var(--sty-gutter);align-items:center;
  padding:calc(var(--sty-row) * .45) 0;
  border-bottom:var(--sty-hairline) solid var(--rule-c, var(--c-line))}
.jrn__h{padding-block:calc(var(--sty-item) * .5)}
.jrn__h span{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
.jrn__s{font-family:var(--ks-font-en);font-size:var(--ks-w-micro);
  letter-spacing:var(--ks-w-track-en);color:var(--step-mark, var(--sty-accent))}
.jrn__k{margin-top:calc(var(--sty-item) * .3);font-family:var(--ks-font-kr-sb);font-weight:600;
  font-size:var(--ks-w-sub);line-height:1.4;letter-spacing:var(--ks-w-track-kr)}
.jrn__r p{font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body)}
.dark .jrn,.dark .jrn__r,.dark .jrn__h{border-color:var(--c-line-on-dark)}
.dark .jrn__r p{color:var(--c-body-on-dark)}
.dark .jrn__s{color:var(--c-accent-on-dark)}
.dark .jrn__h span{color:var(--c-body-on-dark)}
@media(max-width:1024px){
  .jrn{grid-column:1 / -1}
  .jrn__h{display:none}
  .jrn__r{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--sty-item) * .35)}
  /* 열 이름이 사라지므로 값 앞에 라벨을 붙여 준다 */
  .jrn__r p::before{content:attr(data-l);padding-right:8px;font-family:var(--ks-font-en);
    font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);color:var(--c-muted)}
  .dark .jrn__r p::before{color:var(--c-body-on-dark)}
}

/* ── 비교표 (규모 구간) ─────────────────────────────────────────────── */
.cmp{grid-column:2 / -1;margin-top:var(--sty-block);width:100%;
  border-collapse:collapse;table-layout:fixed}
.cmp{border-top:var(--sty-hairline) solid var(--rule-c, var(--c-line))}
.cmp th,.cmp td{width:25%;text-align:left;vertical-align:top;  /* 4열 균등 — 위 5열 그리드와 트랙 근사 스냅 */
  padding:calc(var(--sty-row) * .4) var(--sty-item) calc(var(--sty-row) * .4) 0;
  border-bottom:var(--sty-hairline) solid var(--rule-c, var(--c-line));
  font-size:var(--ks-w-sub);line-height:1.7;font-weight:400}
.cmp thead th{border-bottom-width:var(--sty-hairline);
  font-family:var(--ks-font-kr-sb);font-weight:600;letter-spacing:var(--ks-w-track-kr)}
.cmp tbody th{color:var(--c-muted);font-family:var(--ks-font-en);
  font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en)}
.cmp td{color:var(--c-body-strong)}
.cmp thead th:first-child{color:var(--c-muted);font-family:var(--ks-font-en);
  font-size:var(--ks-w-micro);letter-spacing:var(--ks-w-track-en);font-weight:400}
.cmp__wrap{grid-column:2 / -1;overflow-x:auto}
.cmp__wrap .cmp{grid-column:auto;min-width:640px;margin-top:var(--sty-block)}
@media(max-width:1024px){ .cmp__wrap{grid-column:1 / -1} }

/* ── 2단 그룹 ───────────────────────────────────────────────────────── */
.groups--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.groups--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1024px){ .groups--2,.groups--4{grid-template-columns:minmax(0,1fr)} }

/* 본문 안내 한 줄 (자료 링크 등) */
.aside-line{grid-column:2 / -1;margin-top:var(--sty-row);
  font-size:var(--ks-w-sub);line-height:1.7;color:var(--c-body)}
.aside-line a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px}
.dark .aside-line{color:var(--c-body-on-dark)}
.dark .aside-line a{color:var(--c-accent-on-dark)}
@media(max-width:1024px){ .aside-line{grid-column:1 / -1} }

/* 리셋이 ul,ol 의 마커를 전부 껐다 — 순서·법정 고지처럼 마커가 의미인 곳만 되살린다 */
.gate ol{list-style:decimal}
.gate ul,.legal ul{list-style:disc}
.gate li,.legal li{padding-left:2px}
.gate li::marker,.legal li::marker{color:var(--c-muted)}
/* 폼 라벨의 영문 보조(선택 표기)가 10px 이라 한글 필드명과 단차가 과하다 */
.form label{font-size:var(--ks-w-gnb)}


/* ═══════════════════════════════════════════════════════════════════════════
   모바일 컬럼 해제 — 반드시 파일 맨 끝에 둔다
   본문 블록은 데스크탑에서 라벨 레일을 비우려고 `grid-column:2 / -1` 로 한 칸
   들여쓴다. 좁은 화면에서는 라벨이 위로 빠지므로 그 들여쓰기를 풀어야 하는데,
   해제 규칙이 컴포넌트 정의보다 **앞**에 있으면 특이성이 같아 뒤가 이겨 죽는다.
   (2026-08-17 모바일 감사 — 02~05 섹션이 왼쪽에 한 칸씩 밀려 보이던 원인)
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .problem .cols,
  .steps,
  .prog-list,
  .dlv .kv,
  .chips,
  .nx__q,
  .nx__cta,
  .metrics{grid-column:2 / -1}
}


/* 04 SOP 슬라이드 — 원본(1672×941)의 'AI SOP' 문구가 가로 64% 지점에 있다.
   세로 화면에서 cover 는 높이로 스케일되어 폭의 26% 만 남으므로, 가운데를 자르면
   문구가 오른쪽에서 잘린다. 창 중심에 문구가 오도록 크롭 기준점을 옮긴다. */
@media(max-width:1024px){
  .hero__media figure:nth-child(4) img{object-position:74% center}
}
/* 640 이하에서는 화면 높이를 다 채우면(cover) 문구 폭 430px 이 화면 390px 을 넘어 잘린다.
   높이를 88% 로 낮추면 표시 배율이 내려가 문구가 화면 폭 안에 정확히 들어온다.
   남는 12% 는 히어로 바닥(CTA 자리)이라 잉크 면으로 받는다. */
@media(max-width:640px){
  .hero__media figure:nth-child(4){background:var(--c-ink)}
  .hero__media figure:nth-child(4) img{height:83%;object-position:69% center}
}

/* ── 모바일 전폭 일괄 (2026-08-18 라이브 실사고: 데스크탑 2/-1 이 모바일에서 들여쓰기로 남음) —
   본문 컨테이너는 ≤1024 에서 예외 없이 전폭. 개별 리셋 누락이 재발하지 않도록 한 곳에 모은다. */
@media(max-width:1024px){
  .sty-grid .metrics,.sty-grid .steps,.sty-grid .groups,.sty-grid .jny,.sty-grid .msr,
  .sty-grid .ilcards,.sty-grid .phcards,.sty-grid .prog-list,.sty-grid .kv,
  .sty-grid .gate,.sty-grid .oc,.sty-grid .sub,.sty-grid .sx,.sty-grid .zz,
  .sty-grid .cols,.sty-grid .nx__q,.sty-grid .nx__a,.sty-grid .imgsplit,
  .sty-grid .pro__t,.sty-grid .pro__meta,.sty-grid .pro__p,.sty-grid .pro__r{grid-column:1 / -1}
}