/* ============================================================
   sections — 섹션별 레이아웃/스타일
   순서: nav · hero · problem · why · quiz · departments
         · results · process · trust · pricing · faq · contact · footer
   (색·간격·radius는 tokens.css 변수 사용)
   ============================================================ */

/* ── Nav ── */
header { position:sticky; top:0; z-index:20; padding:var(--header-top) 0 0; }
.nav { --r: var(--r-ctl); }

/* 다른 네 헤더와 같은 inline-flex 다. 이게 없으면 워드마크(display:block)가
   블록으로 흘러 제품명 아래로 쌓이고 브랜드 폭이 164px 로 줄어든다(실측). */
.nav .brand { display:inline-flex; align-items:center; gap: var(--space-2);
  font: 600 var(--fs-lead)/1 var(--font); letter-spacing:.4px; }
.nav .links { display:flex; gap: var(--space-5); font:500 var(--fs-body)/1 var(--font); color:var(--ink); }
.nav .links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
/* 로그인 = 자주색 아웃라인 필(보조 액션) — 텍스트 링크와 구분, 솔리드 CTA와 짝 */
/* 40 → 37px (요청). WCAG 2.5.8 최소 24px 는 넘지만 권장 44px 에서는 멀어진다 —
   내비 알약은 마우스·손가락 모두 여유가 있는 자리라 허용 범위로 본다. */
.nav .login { display:inline-flex; align-items:center; min-height:37px; padding: 0 var(--space-4); border-radius: var(--radius-input);
  font:600 var(--fs-body)/1 var(--font); text-decoration:none;
  transition: background var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out); }
.nav .login:hover { background:var(--inset-bg); box-shadow:0 6px 16px -8px var(--accent-glow); }
.nav .cta { display:inline-flex; align-items:center; min-height:37px; padding: 0 var(--space-4); border-radius: var(--radius-input); background:var(--surface-inverse); color:var(--ink-inverse); font:600 var(--fs-body)/1 var(--font); border:none; cursor:pointer; }
/* 로그인+시작하기 = 하나의 액션 짝(간격 10px), nav 링크와는 .in gap(24px)로 분리 */
.nav .nav-actions { display:inline-flex; align-items:center; gap: var(--space-3); }
header.over-dark .nav-burger span { background:var(--ink-inverse); }

/* 스티키 내비가 역전 섹션(#contact) 위를 지날 때 — 글자·로고 밝게(가독성) */
.nav .brand, .nav .links a, .nav .login, .nav .cta { transition: color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out), background var(--t-2) var(--ease-out); }
/* 알약 표면 자체도 뒤집는다 — 글자만 밝히면 라이트 테마의 흰 표면이 검은 밴드
   위에서 그대로 눈부시게 뜬다. 결과 카드가 이미 쓰는 처리와 같다: 밴드와 같은
   --gray-950 으로 맞춰 그림자로만 도드라지게 한다.
   x-lit 의 하이라이트 로브(--glass-edge)는 라이트 테마에서 불투명 흰색이라,
   검은 밴드 위에 두면 알약 테두리에 흰 후광이 번져 흰 배경일 때보다 더 눈부시다.
   glass.css 의 원칙("다크에서는 어두운 표면 위 하이라이트를 금지한다")대로
   하이라이트 로브를 버리고 그림자 로브만 남긴다 — hover 에서도 같은 그림자를
   유지해야 해서 .hoverable:hover 보다 특정도를 한 단 더 준다. */
.lg.nav { transition: background var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out); }
header.over-dark .lg.nav { background:var(--surface-inverse); box-shadow:none; }
header.over-dark .lg.nav.hoverable:hover { box-shadow:none; }
header.over-dark .nav .brand { color:var(--ink-inverse); }
/* 귀속 표기도 함께 뒤집는다 — --text-muted 는 테마만 따라가고 밴드는 못 본다.
   제품명(--dark-text-strong)보다 한 단 낮춰 락업 안의 위계를 유지한다. */
header.over-dark .nav .brand .brand-by { color:var(--ink-inverse-2); }
/* 다크 밴드 위에서는 워드마크도 뒤집는다 — 라이트 타일을 다크 배경에 올리는 것은
   디자인 시스템이 금지한다. 글자만 밝게 하고 워드마크를 두면 그 규칙을 어긴다. */
header.over-dark .nav .brand .xk-wordmark { content:url("../img/brand/wordmark-paper.png"); }
header.over-dark .nav .links a { color:var(--ink-inverse); }
header.over-dark .nav .links a:hover { color:var(--ink-inverse); }
header.over-dark .nav .login { color:var(--ink-inverse); border-color:var(--ink-inverse); }
header.over-dark .nav .login:hover { background:var(--inset-bg); }
/* 역상 밴드 위 헤더 CTA — 흰 면 + 검정 글자(라이트 검정 primary의 뒤집힘). */
header.over-dark .nav .cta { background:var(--ink-inverse); color:var(--surface-inverse); }

/* 스크롤-인지형 헤더 CTA — .cta-scroll(JS opt-in)일 때만 게이팅.
   최상단(히어로 노출)에선 폭·여백을 0으로 접어 '로그인'이 오른쪽 끝에 딱 붙게 하고(빈칸 없음).
   margin-left:-10px로 nav-actions의 gap(10px)까지 상쇄해 완전히 flush.
   히어로 버튼이 지나가면(.show-cta) 폭·여백이 부드럽게 펴지며 '로그인'이 자연스레 밀려
   등장한다 — 순간 점프 없음. 폭 트랜지션이라 전 브라우저 폴백(비게이팅 페이지는 영향 없음). */
header.cta-scroll .nav .cta {
  max-width:0; margin-left: calc(var(--space-3) * -1); padding-left:0; padding-right:0;
  opacity:0; overflow:hidden; white-space:nowrap; pointer-events:none;
  transition: max-width var(--t-state) var(--ease-out), margin-left var(--t-state) var(--ease-out),
    padding var(--t-state) var(--ease-out), opacity var(--t-2) var(--ease-out),
    background var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out); }
header.cta-scroll.show-cta .nav .cta {
  max-width:220px; margin-left:0; padding-left: var(--space-4); padding-right: var(--space-4);
  opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion:reduce) {
  header.cta-scroll .nav .cta { transition:opacity .01ms; }
}

/* ── Hero ── */
.hero { text-align:center; padding: var(--space-8) 0 var(--space-9); }
.hero h1 { margin:0; font-family:var(--font); font-weight:600; font-size: var(--fs-display); line-height:1.14; letter-spacing:var(--ls-tighter); word-break:keep-all; text-wrap:balance; }
.hero .sub { margin: var(--space-5) auto 0; max-width:600px; font:400 var(--fs-body-lg)/1.65 var(--font); color:var(--ink); word-break:keep-all; }
/* 버튼 줄 — 히어로와 문의 밴드가 같은 배치를 쓴다. 문의 밴드는 한때 인라인
   style 로 가운데 정렬을 걸었는데, .row 자체에 display:flex 가 없어서 아무 효과가
   없었다. 두 버튼이 블록 흐름에 얹혀 왼쪽에 붙고 높이도 서로 어긋나 보였다
   (둘 다 min-height 54px 인데 flex 밖에서는 그 값이 같은 줄을 만들지 못한다). */
.hero .row,
.contact .row { display:flex; gap: var(--space-4); justify-content:center; margin-top: var(--space-6); flex-wrap:wrap; align-items:center; }
.chips { display:flex; gap: var(--space-3); justify-content:center; margin-top: var(--space-6); flex-wrap:wrap; }
.chip { --r: var(--r-ctl); cursor:default; }
/* 칩 내용은 "월 구독"·"전담 전문가" 같은 한글 문구다 — mono 는 데이터·기계값용 */
.chip .in { display:inline-flex; align-items:center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font:600 var(--fs-body-sm)/1 var(--font); color:var(--ink); }
.chip .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
/* v3.0.0: 칩은 유리가 아니라 솔리드. 점은 아쿠아 단색 하나. */
.chip.lg { background:var(--canvas); border:1px solid var(--secondary-border); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.hero .note { margin-top: var(--space-5); font:400 var(--fs-body-sm)/1.5 var(--font); color:var(--ink-2); }

/* ── ② Problem — 캔버스 위 읽기 유리. 섹션 크롬으로 --ink 슬랩을 쓰지 않는다. ── */
#problem { background: var(--canvas);
  padding-top: var(--gap-section, var(--space-7)); padding-bottom: var(--gap-section, var(--space-7)); }
.prob { max-width:900px; margin:0 auto; }
.prob-head { text-align:center; margin-bottom: var(--space-7); }
.prob-head h2 { font-family:var(--font); font-weight:600; font-size: var(--fs-h1); line-height:1.28; letter-spacing:var(--ls-tighter); color:var(--ink); margin:0; word-break:keep-all; }
.voices { display:flex; flex-direction:column; gap: var(--space-5); }
.voice { position:relative; max-width:62%; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md);
  background:var(--glass); color:var(--ink); word-break:keep-all;
  font: 500 var(--fs-lead)/1.55 var(--font);
  border:0;
  box-shadow:var(--shadow-float);
  -webkit-backdrop-filter:blur(var(--glass-reading-blur)) contrast(var(--glass-reading-contrast)) saturate(var(--glass-reading-saturation));
  backdrop-filter:blur(var(--glass-reading-blur)) contrast(var(--glass-reading-contrast)) saturate(var(--glass-reading-saturation));
  transition: transform var(--t-state) var(--ease-out), box-shadow var(--t-2) var(--ease-out); }
.voice .qmk { color:var(--ink); font-weight:600; }
.voice-q { margin:0; text-align:left; }
/* 클레이 꼬리 — 부풀어오른 점토 방울 2개(본체와 같은 클레이 음영) */
.voice::after, .voice::before { content:""; position:absolute; border-radius:50%; background:var(--glass);
  border:0; box-shadow:var(--shadow-float); }
.voice::after { width:18px; height:18px; bottom:-7px; }
.voice::before { width:9px; height:9px; bottom:-18px; }
.voice.l { align-self:flex-start; }
.voice.l::after { left:26px; }
.voice.l::before { left:22px; }
.voice.r { align-self:flex-end; text-align:right; }
.voice.r::after { right:26px; }
.voice.r::before { right:22px; }
/* 호버 스퀴시(C) — 점토 누르는 촉감(데스크탑 전용) */
@media (hover:hover) and (pointer:fine) {
  .voice:hover { transform:translateY(-1px);
    box-shadow:var(--shadow-float); }
}
@media (prefers-reduced-motion:reduce) { .voice:hover { transform:none; } }
.prob-bridge { text-align:center; margin: var(--space-7) 0 0; font:400 var(--fs-body-lg)/1.6 var(--font); color:var(--ink); word-break:keep-all; }
.prob-bridge b { color:var(--ink); font-weight:600; }
@media (max-width:760px){ .voice { max-width:88%; } }

/* ── ③ Why (일러스트 + 3기둥) ── */
/* 테두리·박스 없이 일러스트만 — 프레임(글래스 카드) 제거 */
.why-figure { max-width:820px; margin: 0 auto var(--space-6); }
/* 라인아트 PNG의 밝은 배경을 섹션에 녹여 박스 없이 선화만 (multiply) */
.why-figure img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }

/* ── AX OVERVIEW — 세로 모래시계(진단·컨설팅 → 교육 → PoC&MVP·내재화) ── */
.ax-hg { max-width:860px; margin:0 auto; }
.ax-hg-row { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-5); align-items:stretch; }
/* 개인 페이지는 3→1→3 (기업은 2→1→2) — 입구·출구가 세 갈래다 */
.ax-hg-row.is-3 { grid-template-columns:repeat(3,1fr); gap: var(--space-4); }
.ax-hg-row.is-3 .ax-hg-card { padding: var(--space-4) var(--space-4); }
.ax-hg-row.is-3 .ax-hg-name { font-size:var(--fs-body); }
.ax-hg-neck { display:flex; justify-content:center; }
.ax-hg-neck .ax-hg-card { width:min(64%, 520px); }

/* 수렴·발산 연결선 — 세로선은 카드 중심에 둔다. 2열은 (860 − 24) / 2 / 2 ÷ 860 = 24.3%·75.7% (SVG path 의 x 값과 .at-l/.at-r 이 같은 수).
   선은 카드 윗변 8px 위(V84)에서 멈추고 화살촉이 그 자리에 선다 — 카드에 닿지 않는다.
   라벨은 불투명 면(--n-100)이라 선이 글자를 지나가지 않는다. 선·화살촉·아이콘 굵기는 1.5px 하나. */
.ax-hg-flow { position:relative; }
.ax-hg-flow span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); min-height:24px; padding: 0 var(--space-3); display:inline-flex; align-items:center; border-radius: var(--radius-pill); background:var(--n-100); border:0; font: var(--fw-medium) var(--fs-caption)/1 var(--font); letter-spacing:.02em; color:var(--ink); white-space:nowrap; }
.ax-hg-link { display:block; width:100%; height:68px; overflow:visible; }
.ax-hg-link line, .ax-hg-link path { fill:none; stroke:var(--relationship-line); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
/* 흐름 방향 표시 — 선 끝의 셰브론. SVG marker 를 쓰면 안 되는 이유: .ax-hg-link 는
   preserveAspectRatio="none" 이라 가로로 늘어나고, 그 안의 마커도 같이 찌그러진다.
   위치는 클래스로 준다(인라인 style 속성 금지 규약). 아랫변은 카드 윗변에서 8px 떨어진다. */
.ax-hg-tip { position:absolute; bottom:8px; left:var(--at); width:8px; height:8px;
  border-right:1.5px solid var(--relationship-line); border-bottom:1.5px solid var(--relationship-line);
  transform:translateX(-50%) rotate(45deg); }
.ax-hg-tip.at-c { --at:50%; }
.ax-hg-tip.at-l { --at:24.3%; }
.ax-hg-tip.at-r { --at:75.7%; }
/* 3갈래(개인 페이지 업무·학습·커리어 / 시간·결과물·실력) — 1/6, 5/6 지점 */
.ax-hg-tip.at-l3 { --at:16.667%; }
.ax-hg-tip.at-r3 { --at:83.333%; }

/* 카드는 정보 카드 재질(.panel) — 흐림·유리 없음. 아이콘은 타일 없이 20px 선 아이콘만. 이름은 DS 제목3(20px/500). */
.ax-hg .ax-hg-card { padding: var(--space-4) var(--space-5); background:var(--glass-light),var(--panel-fill); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--panel-shadow); border-radius:var(--radius-card); }
.ax-hg-h { display:flex; align-items:center; gap: var(--space-3); flex-wrap:wrap; }
.ax-hg-ic { flex-shrink:0; width:24px; height:24px; border-radius:0; display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--ink); }
.ax-hg-ic .ic-svg, .ax-hg-row.is-3 .ax-hg-ic .ic-svg { width:20px; height:20px; stroke-width:1.5; }
.ax-hg-name { font:var(--fw-medium) var(--fs-h3)/1.3 var(--font); color:var(--ink); }
.ax-hg-d { font:400 var(--fs-body-sm)/1.65 var(--font); color:var(--ink); margin: var(--space-3) 0 0; word-break:keep-all; }


/* 모바일: 연결선 숨기고 세로 스택(흐름 순서 유지) */
@media (max-width:720px) {
  .ax-hg { display:flex; flex-direction:column; gap: var(--space-4); }
  .ax-hg-row, .ax-hg-row.is-3 { grid-template-columns:1fr; gap: var(--space-4); }
  .ax-hg-neck .ax-hg-card { width:100%; }
  .ax-hg-flow { display:none; }
  .ax-hg .ax-hg-card { padding: var(--space-4) var(--space-4); }
}

/* ── ④ Quiz — AI 활용 성숙도 진단(왼쪽 입력 + 오른쪽 간단 결과) ── */
.finder { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.94fr); gap: var(--space-6); align-items:start; max-width:1040px; margin:0 auto; }

/* 입력 — 5개 친근한 질문 + 시나리오 칩(용어 숨김, 딱딱하지 않게) */
.quiz { padding: var(--space-6) var(--space-6) var(--space-6); }
.quiz::before { background:linear-gradient(155deg,var(--rule),var(--rule)); }
.quiz-lead { font: 600 var(--fs-small)/1.4 var(--font); letter-spacing:var(--ls-label); color:var(--ink); margin: 0 0 var(--space-5); word-break:keep-all; }
.dg { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom:1px solid var(--rule); }
.dg:last-child { padding-bottom:0; margin-bottom:0; border-bottom:none; }
.dg-q { font: 600 var(--fs-body)/1.45 var(--font); color:var(--ink); margin: 0 0 var(--space-3); word-break:keep-all; }
.opts { display:flex; flex-wrap:wrap; gap: var(--space-2); }
.opts button { min-height:42px; padding: 0 var(--space-4); border-radius: var(--radius-input); border:0; background:var(--ground-hi); font:500 var(--fs-body-sm)/1 var(--font); color:var(--ink); cursor:pointer; transition: border-color var(--t-2) var(--ease-out), background var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out); }
.opts button:hover { background:var(--secondary-hover); }
.opts button.on { font-weight:600; background:var(--segment-selected); box-shadow:var(--secondary-shadow); }
/* 포커스 링은 옆 칸 테에 붙지 않게 2px 띄운다(칸 사이 8px). */
.quiz .opts button:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

/* 결과 — 선택값에서 가장 먼저 막힌 지점 하나만 보여주고 상담 CTA로 보낸다.
   배경은 여기서 정하지 않는다 — glass.css 가 이 카드를 '잉크 판'(--ink-bg,
   테마 불변 최암부)으로 이미 선언했고 그게 디자인 기준값이다. 같은 특정도라
   여기에 background 를 쓰면 나중에 로드되는 이 파일이 그걸 조용히 덮는다:
   실제로 --surface 로 덮여 라이트 테마에서 글자(--dark-text-strong, 근-백)와
   배경(근-백)이 겹쳐 카드가 통째로 안 보였다. 안쪽 글자색이 전부 on-dark
   토큰이라는 게 이 카드가 어두운 면이라는 전제다. */
.result { padding: var(--space-6) var(--space-6) var(--space-6); border-radius: var(--radius-md); color:var(--dark-text-strong); position:sticky; top:112px; align-self:start; min-width:0; overflow:hidden; box-shadow:inset 1px 1px 0 var(--glass-edge),var(--shadow-float); }
.result .rh { font:600 var(--fs-meta)/1 var(--font); letter-spacing:var(--ls-label); color:var(--on-dark-dim); text-transform:uppercase; }
/* 준비도 점수 — 결과 카드의 주인공. 어느 칩을 눌러도 바뀌므로 여기가 반응을 담당한다.
   숫자는 기계값이라 mono, 단위 /10 은 한 단계 낮춰 숫자를 먼저 읽게 한다.
   구 .rtitle/.rconc(처방 제목·요약)는 제거했다 — 5개 칩에서 나온 조언은 종류를 늘려도
   같은 말이 반복되고 진단을 단정하는 인상이 남는다. */
.rscore { display:flex; align-items:baseline; justify-content:center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2);
  font:600 var(--fs-body-sm)/1 var(--font); color:var(--on-dark-dim); }
.rscore b { font: 600 var(--fs-h1)/1 var(--font); letter-spacing:var(--ls-tighter); color:var(--dark-text-strong); font-variant-numeric:tabular-nums; }
.rscore i { font: 500 var(--fs-lead)/1 var(--font); font-style:normal; color:var(--on-dark-dim); margin-left: calc(var(--space-1) * -1); font-variant-numeric:tabular-nums; }
/* 전문가로 넘기는 한 줄 — 고정 문구다. 사실 위에 조언을 얹지 않는다. */
.rhand { font: 500 var(--fs-body)/1.7 var(--font); color:var(--on-dark); margin: var(--space-4) 0 0; word-break:keep-all; text-align:center; }
.result .rcta { display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2); width:100%; margin-top: var(--space-5); min-height:52px; padding: 0 var(--space-5); border:none; border-radius: var(--radius-md); background:var(--dark-text-strong); color:var(--ink); font: 600 var(--fs-body)/1 var(--font); cursor:pointer; text-decoration:none; box-shadow:var(--shadow-float); }
@keyframes resultReveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

@media (max-width:640px) {
  .quiz { padding: var(--space-5) var(--space-5); }
  .result { padding: var(--space-5) var(--space-5); }
}

/* ── Departments ── */
.dept-tabs { display:flex; gap: var(--space-2); flex-wrap:wrap; justify-content:center; margin-bottom: var(--space-5); }
.dept-tabs button { min-height:44px; padding: 0 var(--space-4); border-radius: var(--radius-input); border:1px solid var(--secondary-border); background:var(--ground-hi); font:600 var(--fs-body-sm)/1 var(--font); color:var(--ink); cursor:pointer; }
.dept-tabs button.on { font-weight:600; }
.dept-panel { max-width:880px; margin:0 auto; padding: var(--space-6) var(--space-6); display:none; }
.dept-panel.on { display:block; }
/* 지금(병목) — 헤더 블록 */
.dept-panel .dh { display:flex; flex-direction:column; align-items:flex-start; gap: var(--space-2); margin-bottom:0; padding-bottom: var(--space-4); border-bottom:1px solid var(--rule); }
.dept-panel .dh b { font: 600 var(--fs-h2)/1.25 var(--font); color:var(--ink); }
.dept-panel .dh span { font:400 var(--fs-body)/1.6 var(--font); color:var(--ink); word-break:keep-all; }
/* AI가 하는 일 — 크게·상세하게(단일 열 큰 행 + 체크 칩 + 구분선) */
.dept-grid { display:flex; flex-direction:column; }
.dept-grid .row { display:flex; gap: var(--space-4); align-items:flex-start; padding: var(--space-4) 0; border-bottom:1px solid var(--rule); }
.dept-grid .row:last-child { border-bottom:none; padding-bottom:0; }
.dept-grid .ck { width:28px; height:28px; border-radius: var(--radius-sm); background:var(--inset-bg); color:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dept-grid .row span:last-child { font: 500 var(--fs-lead)/1.6 var(--font); color:var(--ink); word-break:keep-all; }
.dept-foot { display:flex; gap: var(--space-2); align-items:center; margin-top: var(--space-4); padding-top: var(--space-4); border-top:1px solid var(--rule); font: 400 var(--fs-small)/1.5 var(--font); color:var(--ink-2); }

/* ── ⑤ Results ── */
.out-grid { display:grid; grid-template-columns:repeat(5,1fr); gap: var(--space-4); max-width:980px; margin: 0 auto var(--space-6); }
.out-grid .c { padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); }
.out-grid .ic { width:38px; height:38px; border-radius: var(--radius-md); background:var(--inset-bg); color:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-3); }
.out-grid .t { font:600 var(--fs-body)/1.3 var(--font); color:var(--ink); word-break:keep-all; }
.out-grid .d { font: 400 var(--fs-small)/1.55 var(--font); color:var(--ink); margin-top: var(--space-2); word-break:keep-all; }
.report { max-width:680px; margin:0 auto; }
.report .rlabel { text-align:center; margin-bottom: var(--space-4); font:600 var(--fs-meta)/1 var(--font); letter-spacing:var(--ls-label); color:var(--ink-2); text-transform:uppercase; }
.report .rtop { display:flex; align-items:center; justify-content:space-between; padding: var(--space-4) var(--space-5); border-bottom:1px solid var(--rule); background:var(--glass-chrome-a); }
.report .rtop b { font:600 var(--fs-body-sm)/1 var(--font); color:var(--ink); }
.report .rtop .tag { font:600 var(--fs-meta)/1 var(--font); letter-spacing:var(--ls-label); color:var(--ink-2); border:0; border-radius: var(--radius-input); padding: var(--space-1) var(--space-3); }
.report .rbody { padding: var(--space-5); }
/* 성숙도 = 성장 여정 스텝퍼(지난 단계→현재→다음). 트랙+마커로 진행을 보여줌.
   상태의 근거는 아래 결론 헤드라인 문장이고, 자주색 마커는 보조 장식(report-guide). */
.report .stages { display:flex; gap:0; margin: var(--space-4) 0 var(--space-5); }
.report .stages .stage { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap: var(--space-3);
  text-align:center; padding:0; background:none; border:none; word-break:keep-all; cursor:pointer;
  font: 500 var(--fs-small)/1.25 var(--font); color:var(--ink-2);
  transition: color var(--t-2) var(--ease-out); }
/* 연결 트랙(각 마커 오른쪽으로 다음 마커까지) */
.report .stages .stage::after { content:""; position:absolute; top:8px; left:50%; width:100%; height:2px; background:var(--rule); z-index:0; }
.report .stages .stage:last-child::after { display:none; }
/* 마커(점) */
.report .stages .stage::before { content:""; width:16px; height:16px; border-radius:50%; box-sizing:border-box;
  background:var(--ground-hi); border:2px solid var(--rule); position:relative; z-index:1; }
/* 지난 단계 = 채운 자주 + 트랙 자주(여기까지 지나옴) */
.report .stages .stage.done { color:var(--ink); }
.report .stages .stage.done::before { background:var(--inset-bg); border-color:var(--ink); }
.report .stages .stage.done::after { background:var(--inset-bg); }
/* 현재 = 자주 링 + 후광 + 강조 라벨(지금 여기) */
.report .stages .stage.on { color:var(--ink); font-weight:600; }
.report .stages .stage.on::before { border: 5px solid var(--accent); background:var(--ground-hi); box-shadow: 0 0 0 4px var(--selected-fill); }
/* 다음 단계 = 옅은 회색 아웃라인 */
.report .stages .stage.todo { color:var(--ink-2); }
.report .stages .stage:hover { color:var(--ink); }
/* 미리보기 = 지금 보고 있는 단계(라벨 밑줄) */
.report .stages .stage.sel { color:var(--ink); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; text-decoration-color:var(--ink); }
.report .rk { font:600 var(--fs-meta)/1 var(--font); letter-spacing:var(--ls-label); color:var(--ink-2); text-transform:uppercase; }
.report .rtitle { font: 600 var(--fs-h3)/1.35 var(--font); color:var(--ink); margin: var(--space-2) 0; letter-spacing:-.01em; word-break:keep-all; }
.report .rdesc { font: 400 var(--fs-body)/1.6 var(--font); color:var(--ink-2); word-break:keep-all; margin: 0 0 var(--space-5); }
.report .decide { display:flex; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4) var(--space-4); border-radius: var(--radius-md); background:var(--inset-bg); border:0; font: 600 var(--fs-small)/1.55 var(--font); color:var(--ink); word-break:keep-all; }

/* 예시 리포트 — 부서별 활용 미니 막대 차트 (데이터=mono, 폭은 CSS에서 지정: 인라인 스타일 금지) */
.report .rchart { margin-top: var(--space-5); padding: var(--space-4) var(--space-4); border-radius: var(--radius-md); background:var(--ground-hi); border:0; }
.report .rchart-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: var(--space-4); }
.report .rchart-head b { font: 600 var(--fs-small)/1 var(--font); color:var(--ink); }
.report .rchart-head .u { font:500 var(--fs-meta)/1 var(--font); letter-spacing:var(--ls-label); color:var(--ink-2); text-transform:uppercase; }
.report .rchart-rows { display:flex; flex-direction:column; gap: var(--space-3); }
.report .rbar { display:grid; grid-template-columns:96px 1fr 30px; align-items:center; gap: var(--space-3); }
.report .rbar-l { font: 500 var(--fs-small)/1.3 var(--font); color:var(--ink); word-break:keep-all; }
.report .rbar-t { height:8px; border-radius: var(--radius-input); background:var(--rule); overflow:hidden; }
.report .rbar-t i { display:block; height:100%; border-radius: var(--radius-input); background:var(--ink); }
.report .rbar-v { font: 600 var(--fs-small)/1 var(--font); color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.report .rbar-t i[data-v="5"]  { width:5%; }
.report .rbar-t i[data-v="10"] { width:10%; }
.report .rbar-t i[data-v="15"] { width:15%; }
.report .rbar-t i[data-v="20"] { width:20%; }
.report .rbar-t i[data-v="25"] { width:25%; }
.report .rbar-t i[data-v="40"] { width:40%; }
.report .rbar-t i[data-v="55"] { width:55%; }
.report .rbar-t i[data-v="60"] { width:60%; }
.report .rbar-t i[data-v="65"] { width:65%; }
.report .rbar-t i[data-v="70"] { width:70%; }
.report .rbar-t i[data-v="75"] { width:75%; }
.report .rbar-t i[data-v="80"] { width:80%; }
.report .rbar-t i[data-v="85"] { width:85%; }
.report .rbar-t i[data-v="90"] { width:90%; }
.report .rbar-t i[data-v="95"] { width:95%; }

/* 단계 패널 — 선택된 단계만 표시 */
.report .rstage { display:none; }
.report .rstage.on { display:block; animation:resultReveal .34s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .report .rstage.on { animation:none; } }
/* 단계별 집중 사항 리스트 */
.report .rfocus { list-style:none; margin: var(--space-4) 0 0; padding:0; display:flex; flex-direction:column; gap: var(--space-2); }
.report .rfocus li { display:flex; align-items:flex-start; gap: var(--space-2); font: 500 var(--fs-body)/1.5 var(--font); color:var(--ink); word-break:keep-all; }
.report .rfocus .ck { flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--inset-bg); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.report .rfocus .ck .ic-svg { width:12px; height:12px; }

/* ── ⑥ Process ── */
.ax-note { display:flex; gap: var(--space-2); align-items:center; justify-content:center; margin-top: var(--space-6); font: 500 var(--fs-small)/1.5 var(--font); color:var(--ink); }

/* ── ⑦ Trust ── */
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-4); }
.trust-card { padding: var(--space-6) var(--space-5); border-radius: var(--radius-md); }
.trust-card .h { font: 600 var(--fs-lead)/1.35 var(--font); color:var(--ink); margin: 0 0 var(--space-2); word-break:keep-all; }
.trust-card .l { font:400 var(--fs-body)/1.6 var(--font); color:var(--ink-2); margin: 0 0 var(--space-4); word-break:keep-all; }
.trust-card ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-3); }
.trust-card li { display:flex; gap: var(--space-2); font: 500 var(--fs-small)/1.5 var(--font); color:var(--ink); word-break:keep-all; }
.trust-card .ck { color:var(--ink); flex-shrink:0; margin-top:1px; }

/* ── Pricing ── */
/* 상세 금액·범위는 접지 않고 바로 보인다. 독립 요금제 페이지와 같은 조각을 인라인한다. */
.pricing-inline {
  margin-top:0;
}

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; gap: var(--space-3); max-width:820px; margin:0 auto; }
.faq { border-radius: var(--radius-md); }
.faq .qbtn { width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border:none; background:transparent; cursor:pointer; text-align:left; font: 600 var(--fs-body)/1.4 var(--font); color:var(--ink); }
.faq .qbtn .cv { color:var(--ink-2); transition: transform var(--t-2) var(--ease-out); display:inline-flex; }
.faq.open .qbtn .cv { transform:rotate(180deg); }
.faq .ans { padding: 0 var(--space-5) var(--space-5); font:400 var(--fs-body)/1.65 var(--font); color:var(--ink); word-break:keep-all; }
.faq:not(.open) .ans { display:none; }

/* ── Contact (역상 면) ── */
.contact { background:var(--surface-inverse); color:var(--ink-inverse); }
.contact .ch { text-align:center; max-width:720px; margin: 0 auto var(--space-7); }
.contact .ck { font:600 var(--fs-label)/1 var(--font); letter-spacing:var(--ls-label); color:var(--ink-inverse-2); text-transform:uppercase; margin-bottom: var(--space-4); }
.contact h2 { font-family:var(--font); font-weight:600; font-size: var(--fs-h1); line-height:1.28; letter-spacing:var(--ls-tight); color:var(--ink-inverse); margin:0; word-break:keep-all; }
.contact .cp { font: 400 var(--fs-body)/1.65 var(--font); color:var(--ink-inverse-2); margin: var(--space-4) auto 0; max-width:580px; word-break:keep-all; }
/* 버튼 줄 아래 회신 안내 — .cp 는 .ch(가운데 정렬 블록) 안에 있는 것을 전제로 하는데
   이 문장은 그 밖에 있어 왼쪽에 붙었다. 자기 정렬을 갖는 별도 클래스로 둔다. */
.contact .cnote { margin: var(--space-4) auto 0; text-align:center; font: 400 var(--fs-body)/1.6 var(--font); color:var(--ink-inverse-2); word-break:keep-all; }
.contact .btn-glass .in { color:var(--ink-inverse); }
/* 유리 잔재 — .btn 은 gap 이 있는 inline-flex 라 빈 .rf·.tn 도 칸을 차지해 글자가 오른쪽으로 밀렸다. */
.v6-marketing .btn :is(.rf,.tn) { display:none; }
/* 역상 면의 주 행동 — 기본 --primary-base 가 면 색(잉크)과 같아 글자만 남았다. 주 버튼 한 개만
   밝은 채움으로 뒤집는다. 면 전체에 data-theme 을 걸면 보조 버튼 색까지 바뀌므로 걸지 않는다. */
.v6-marketing .contact .btn-primary { --primary-base:var(--ink-inverse); --primary-border:var(--ink-inverse); --primary-text:var(--surface-inverse); --primary-hover:var(--ink-inverse-2); }
.cform { max-width:520px; margin:0 auto; padding: var(--space-6); border-radius: var(--radius-md); display:flex; flex-direction:column; gap: var(--space-4); }
.cform label { font:600 var(--fs-body-sm)/1 var(--font); color:var(--ink); display:block; margin-bottom: var(--space-2); }
.cform .fld { width:100%; box-sizing:border-box; min-height:48px; padding: 0 var(--space-4); border-radius: var(--radius-md); border:1px solid var(--rule); background:var(--canvas); font:400 var(--fs-body)/1 var(--font); color:var(--ink); }
.cform textarea.fld { min-height:96px; padding: var(--space-3) var(--space-4); resize:vertical; }
.cselect { position:relative; }
.cselect-btn { display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); text-align:left; cursor:pointer; }
.cselect-btn .ic-svg { width:18px; height:18px; color:var(--ink-2); transition: transform var(--t-2) var(--ease-out); }
.cselect.open .cselect-btn { border-color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--rule); }
.cselect.open .cselect-btn .ic-svg { transform:rotate(180deg); }
.cselect-menu { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 8px); padding: var(--space-2); border-radius: var(--radius-md); border:1px solid var(--rule); background:var(--rule); box-shadow:inset 1px 1px 0 var(--glass-edge),var(--shadow-float); }
.cselect-menu button { width:100%; min-height:40px; padding: 0 var(--space-3); border:0; border-radius: var(--radius-sm); background:transparent; text-align:left; font:600 var(--fs-body-sm)/1 var(--font); color:var(--ink); cursor:pointer; }
.cselect-menu button:hover,
.cselect-menu button:focus-visible { background:var(--inset-bg); color:var(--ink); outline:none; }
.cselect-menu button[aria-selected="true"] { background:var(--glass-navigation); color:var(--ink); border:1px solid var(--plane-edge); border-top-color:var(--plane-rim);
  -webkit-backdrop-filter: blur(var(--glass-blur)) contrast(var(--glass-navigation-contrast)) saturate(var(--glass-navigation-saturation));
  backdrop-filter: blur(var(--glass-blur)) contrast(var(--glass-navigation-contrast)) saturate(var(--glass-navigation-saturation)); }
.cform .sub { min-height:52px; font: 600 var(--fs-body)/1 var(--font); cursor:pointer; }
.cform .sub { transition: transform var(--t-2) var(--ease-out); }
.cform .sub:active:not(:disabled) { transform:translateY(1px); }
/* 보내는 중·보냈습니다는 고장이 아니라 진행이다 — 빗금(비활성)을 쓰지 않는다.
   흐리게(opacity)도 쓰지 않는다. 눌린 채 기다리고, 글자가 한 단 물러난다.
   진행 알림은 문구가 한다(스피너 금지 규칙): 문의하기 → 보내는 중 → 보냈습니다 ✓ */
.cform .sub:disabled { cursor:default; transform:translateY(1px); color:var(--action-text-dim); }
.cform-msg { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background:var(--inset-bg);
  color:color-mix(in srgb, var(--ok) 78%, var(--ink));
  font:500 var(--fs-body-sm)/1.5 var(--font); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent); word-break:keep-all; }
.cform-msg--error { background:var(--inset-bg); color:color-mix(in srgb, var(--bad) 78%, var(--ink));
  border-color:color-mix(in srgb, var(--bad) 30%, transparent); }
/* 허니팟 — 화면에서만 감춘다. display:none 이면 봇도 건너뛴다. */
.cform-hp { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.cform .fine { text-align:center; font: 400 var(--fs-small)/1.5 var(--font); color:var(--ink-2); }

/* ── Footer (dark) ── */
footer { position:relative; z-index:2; background:var(--surface-inverse); color:var(--ink-inverse); border-top:1px solid var(--rule-inverse); padding: var(--space-8) 0 var(--space-6); }
.foot-top { display:flex; justify-content:space-between; align-items:flex-start; gap: var(--space-7); }
/* 워드마크 통일 규칙 지오메트리 그대로다 — height 20px(821px 미만
   16px) · width auto. 크기를 우리 마음대로 정하면 통일이 아니다.
   텍스트 30px + letter-spacing 6px 로 워드마크를 흉내 내던 것을 걷어냈다:
   E 는 막대, O 는 링+점이라 서체로는 재현되지 않는다. */

.foot-tag { font:600 var(--fs-body-sm)/1.4 var(--font); letter-spacing:1.6px; color:var(--ink-inverse-2); margin: var(--space-6) 0 0; }
.foot-info { max-width:560px; text-align:right; color:var(--ink-inverse); }
.foot-info p { margin: 0 0 var(--space-4); font:500 var(--fs-body)/1.5 var(--font); word-break:keep-all; }
.foot-info a { color:var(--ink-inverse); text-decoration:none; }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-5); border-top:1px solid var(--rule-inverse); }
.foot-copy { font: 600 var(--fs-small)/1 var(--font); letter-spacing:.2px; color:var(--ink-inverse-2); }

/* ── Icon 유틸 (인라인 SVG 스프라이트 <use>) ── */
.ic-svg { width:1em; height:1em; display:inline-block; vertical-align:-0.125em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.why-cards .ic .ic-svg,.out-grid .ic .ic-svg,.result .ic .ic-svg { width:20px; height:20px; }
.chip .ic-svg,.prob .a .ic-svg,.dept-grid .ck .ic-svg,.trust-card .ck .ic-svg,.result .pts .ck .ic-svg,.ax-note .ic-svg,.dept-foot .ic-svg { width:16px; height:16px; }
.btn-dark .ic-svg,.btn-glass .ic-svg,.rcta .ic-svg,.faq .cv .ic-svg { width:18px; height:18px; }

/* ── Responsive ── */
@media (max-width:900px){
  .prob,.finder { grid-template-columns:1fr; }
  .result { position:static; }
  .dept-grid { grid-template-columns:1fr; }
  .why-cards,.out-grid,.steps,.trust-grid { grid-template-columns:1fr 1fr; }
  .nav .links,.nav .login { display:none; }
  .foot-top { flex-direction:column; gap: var(--space-5); }
  .foot-info { text-align:left; }
}
@media (max-width:560px){
  .why-cards,.out-grid,.steps { grid-template-columns:1fr; }
  :root { --section-y:var(--section-space-mobile); --page-x:var(--gutter-mobile); }
}

/* ── 자가진단 오각형 ── 결과 카드(역상) 안에 놓이므로 밝은 선·글자를 쓴다.
   축 5개 = 문항 5개, 반지름 = 답변 점수(0·1·2). 부족한 축이 바로 보이게 하는 게 목적이다.
   라벨은 SVG <text> 가 아니라 HTML 이다. viewBox 스케일에 글자가 커지고
   .x-site svg { max-width:100% } 가 .radar 의 max-width 를 덮어 카드 밖으로
   잘리던 것이 이 카드의 실제 버그였다. */
.radar-board {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:
    ".  n  ."
    "nw c  ne"
    "sw c  se";
  column-gap: var(--space-2); row-gap: var(--space-1);
  align-items:center;
  width:100%; margin: var(--space-4) 0 var(--space-2);
}
.radar-label {
  min-width:0; max-width:100%;
  font:500 var(--fs-caption)/1.3 var(--font);
  color:var(--on-dark);
  word-break:keep-all; overflow-wrap:anywhere;
}
.radar-label[data-slot="n"]  { grid-area:n;  justify-self:center; text-align:center; }
.radar-label[data-slot="nw"] { grid-area:nw; justify-self:end;    text-align:end; }
.radar-label[data-slot="ne"] { grid-area:ne; justify-self:start;  text-align:start; }
.radar-label[data-slot="sw"] { grid-area:sw; justify-self:end;    text-align:end; align-self:end; }
.radar-label[data-slot="se"] { grid-area:se; justify-self:start;  text-align:start; align-self:end; }
.radar-label.is-weak { color:var(--warn); font-weight:600; }
.x-site .result .radar, .result .radar {
  grid-area:c; display:block; width:100%; max-width:200px;
  aspect-ratio:1; margin:0; justify-self:center; overflow:visible;
}
.radar-ring { fill:none; stroke:var(--on-dark-line); stroke-width:.7; }
.radar-axis { stroke:var(--on-dark-line); stroke-width:.7; }
.radar-area { fill:var(--on-dark-fill); stroke:var(--ink-inverse); stroke-width:1.1; stroke-linejoin:round;
  transition:d var(--t-state) var(--ease-out), points var(--t-state) var(--ease-out); }
.radar-dot { fill:var(--ink-inverse); transition: fill var(--t-2) var(--ease-out), r var(--t-2) var(--ease-out); }
.radar-dot.is-weak { fill:var(--warn); r:2.6; }
.radar-hint { margin:0; text-align:center; font:500 var(--fs-body)/1.55 var(--font); color:var(--on-dark); word-break:keep-all; }

/* 일러스트는 투명 배경 97% 에 어두운 잉크 100% 인 무채색 선화다(채도 최대 3).
   밝은 배경 전용이라 다크에서는 배경에 묻혀 거의 보이지 않는다. 무채색이므로
   반전이 안전하다 — 색이 뒤집힐 유채 영역이 없다. */
[data-theme="dark"] .why-figure img { filter:invert(1); }

/* 자가진단이 문의에 함께 실릴 때 뜨는 줄. 다크 문의 섹션 위라 고정 잉크를 쓴다
   (테마를 따라가면 어두운 밴드에서 사라진다). */
.cform-diag { display:flex; flex-direction:column; gap: var(--space-1); margin:0;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background:var(--on-dark-line); border:1px solid var(--on-dark-line); }
.cform-diag b { font:600 var(--fs-body-sm)/1.4 var(--font); color:var(--dark-text-strong); }
.cform-diag .num { font:500 var(--fs-meta)/1.5 var(--font); color:var(--on-dark); word-break:keep-all; font-variant-numeric:tabular-nums; }
.cform-diag[hidden] { display:none; }

/* ══════════ 6판-B 공개 표면 보정 ══════════
   명암 전환·Aquamarine 강조어·등장(700ms)·카운트업은 공용 /css/v6-marketing.css ·
   /assets/js/v6-marketing.js 가 main.v6-marketing 범위에서 맡는다. 여기에는 이 폴더
   화면의 보정만 둔다.
   잉크 면 = section.mk-band--ink[data-theme="dark"]. tokens.css 의 원 토큰(--ink ·
   --muted · --line · --accent · --surface-raised · 버튼 토큰)은 그 안에서 다크 값으로
   뒤집힌다. service.css 별칭(--ink-2 · --rule · --inset-bg · --ground-hi)은 :root 에서
   값이 굳어 뒤집히지 않으므로, 잉크 면 안에서는 원 토큰으로 다시 적는다. */

/* 공용 헤더가 잉크 히어로 위에 겹친다(body[data-v6-dark-hero]) — 헤더 높이만큼 내린다. */
body.public-site .v6-marketing .hero.mk-band--ink { padding: calc(var(--space-8) + var(--space-8)) 0 var(--space-9); }
/* site-pages.css 의 히어로 문단색(--ink-2, :root 값)보다 한 단 세게 — 잉크 면 값으로 다시 적는다. */
body.public-site .v6-marketing .hero.mk-band--ink .sub { color:var(--ink); }
body.public-site .v6-marketing .hero.mk-band--ink .note { color:var(--muted); }
/* 칩은 솔리드 무채 알약 그대로, 잉크 면에서는 테두리만 밝힌다. 점 = 다크 Aquamarine. */
.v6-marketing .hero.mk-band--ink .chip.lg { background:transparent; border-color:var(--line-strong); }
@media (max-width:700px){
  body.public-site .v6-marketing .hero.mk-band--ink { padding: calc(var(--space-8) + var(--space-7)) 0 var(--space-8); }
}

/* 잉크 면 위 흐름도(AX 개요 · 클라우드 진행 방식) — 카드는 불투명 면, 선·라벨은 밝은 무채. */
.v6-marketing .mk-band--ink .eyebrow { color:var(--muted); }
.v6-marketing .mk-band--ink .ax-hg-card {
  background:var(--surface-raised); border:1px solid var(--line); box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* 수렴 지점(교육·파일럿) = 활성 단계 — Aquamarine 테두리와 태그 글자. */
.v6-marketing .mk-band--ink .ax-hg-card.is-core { border-color:var(--accent); }
.v6-marketing .mk-band--ink .ax-hg-ic { background:var(--ice); color:var(--ink); }
.v6-marketing .mk-band--ink .ax-hg-flow span { background:var(--canvas);  color:var(--ink); }
.v6-marketing .mk-band--ink .ax-hg-link :is(line,path) { stroke:var(--muted); }
.v6-marketing .mk-band--ink .ax-hg-tip { border-color:var(--muted); }

/* 자문 AI — 소개(대표 사진·한 줄) + 예시 카드. 예시 카드는 운영 리포트 예시(.report)의 틀을 함께 쓴다.
   다섯 칸 표제는 앱 답 카드와 같은 순서다. 칸 구분은 가는 선(전폭)만 쓰고 색 띠는 두지 않는다. */
.advisor-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap: var(--space-7); align-items:start; max-width:1080px; margin:0 auto; }
.advisor-intro .advisor-photo { display:block; width:88px; height:88px; object-fit:cover; border-radius: var(--radius-md); margin-bottom: var(--space-5); }
.advisor-intro .eyebrow { color:var(--ink-2); margin: 0 0 var(--space-2); }
.advisor-intro h2 { margin: 0 0 var(--space-4); word-break:keep-all; }
.advisor-intro .advisor-lead { font: 400 var(--fs-body)/1.65 var(--font); color:var(--ink); margin: 0 0 var(--space-4); word-break:keep-all; }
.advisor-intro .advisor-points { list-style:none; padding:0; margin: 0 0 var(--space-5); display:flex; flex-direction:column; gap: var(--space-3); }
.advisor-intro .advisor-points li { display:flex; gap: var(--space-3); align-items:flex-start; font: 500 var(--fs-body)/1.55 var(--font); color:var(--ink); word-break:keep-all; }
.advisor-intro .advisor-points .ck { flex:none; margin-top: var(--space-1); }
.advisor-intro .advisor-note { font:400 var(--fs-caption)/1.6 var(--font); color:var(--ink-2); margin: var(--space-4) 0 0; word-break:keep-all; }
.advisor-example { max-width:none; margin:0; }
.advisor-example .advisor-q { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-4); border-radius: var(--radius-md); background:var(--inset-bg); font: 500 var(--fs-body)/1.6 var(--font); color:var(--ink); word-break:keep-all; }
.advisor-example .advisor-answer { margin:0; }
.advisor-example .advisor-row { display:grid; grid-template-columns:96px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top:1px solid var(--rule); }
.advisor-example .advisor-row:first-child { border-top:none; padding-top:0; }
.advisor-example dt { font: 600 var(--fs-small)/1.6 var(--font); color:var(--ink-2); word-break:keep-all; }
.advisor-example dd { margin:0; font: 400 var(--fs-body)/1.6 var(--font); color:var(--ink); word-break:keep-all; }
.advisor-example dd.advisor-judgment { font: 600 var(--fs-body)/1.5 var(--font); }
.advisor-example dd ul { list-style:none; padding:0; margin:0; }
.advisor-example dd ol { list-style:decimal; padding-left:1.25em; margin:0; }
/* 목록 기호를 지키려고 flex 대신 여백으로 띄운다(flex 자식은 번호가 사라진다). */
.advisor-example dd li + li { margin-top: var(--space-2); }
.advisor-example .advisor-expert { margin-top: var(--space-4); }
.advisor-example .advisor-foot { font:400 var(--fs-caption)/1.5 var(--font); color:var(--ink-2); margin: var(--space-3) 0 0; }
@media (max-width: 860px) {
  .advisor-grid { grid-template-columns:1fr; gap: var(--space-6); }
}
@media (max-width: 520px) {
  .advisor-example .advisor-row { grid-template-columns:1fr; gap: var(--space-1); }
}

/* 좁은 화면: clamp() 글자 크기를 DS 토큰 두 단계로 나눈 작은 쪽(DS 준수 이관 2026-10-20) */
@media (max-width: 700px) {
  .hero h1 { font-size: var(--fs-h1); }
  .prob-head h2 { font-size: var(--fs-h2); }
  .voice { font: 500 var(--fs-body)/1.55 var(--font); }
  .dept-panel .dh b { font: 600 var(--fs-h3)/1.25 var(--font); }
  .contact h2 { font-size: var(--fs-h2); }
}