/* =========================================================================
   page-solutions.css — LLM Capsule /solutions
   1:1 port of https://llmcapsule.ai/solutions (Framer sections s1..s9).
   Unified namespaced .sol-* component: hero, partner marquee, six industry
   blocks (accent via --acc / --acc-soft / --acc-dark modifiers), dark CTA.
   Palette tokens use the reference Framer values via var() fallbacks — same
   convention as page-architecture.css (no :root override).
   Auto-enqueued by functions.php (slug "solutions"), depends on capsule-site.
   ========================================================================= */

.sol-page {
  container-type: inline-size;
  /* 브랜드 폰트(Manrope). --f-display는 미정의 토큰이라 Inter로 폴백돼 페이지 전체가
     비브랜드 폰트로 렌더되던 버그 수정 — 홈/제품과 동일한 Manrope로 통일. */
  font-family: var(--font-sans, 'Manrope', 'Pretendard Variable', 'Pretendard', sans-serif);
  -webkit-font-smoothing: antialiased;
  --container-max: 1280px;
  --s-page: clamp(20px, 4cqi, 80px);
  --s-section: clamp(64px, 8cqi, 128px);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
}

.sol-container {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  /* 좌우 패딩 = 사이트 표준 .container(--container-px: 40px / 모바일 24px)에 맞춘다.
     이전 clamp(20~80px)은 넓은 화면에서 다른 섹션보다 여백이 넓어 내용이 짜부됐다(실측). */
  padding: 0 var(--container-px, 40px);
}

/* -------------------------------------------------------------------------
   S1 Hero — 2026-08-10 리디자인 (cubig-design 스킬 · capsule-web-system).
   제품 페이지(/product) 히어로 레이아웃 이식: 좌측 카피 2단(.sph — 모노 텍스트
   eyebrow + 블루 강조 H1 + 본문 + 고스트/솔리드 2 CTA). 우측 카드는 솔루션 전용 =
   세로 마퀴 고객사 로고 리스트(.svm, 아래 참조). 카피 레이아웃(.sph)은 /product 히어로와
   형제 — 동반 검토. Bible 가드: 보안 아이콘·과장·절대주장 없음.
   ------------------------------------------------------------------------- */
.sph {
  position: relative;
  background-color: #ffffff;
  border-bottom: 1px solid var(--c-border-light, #e6e6e4);
  font-family: var(--font-sans, 'Manrope', sans-serif);
  -webkit-font-smoothing: antialiased;
  padding-top: clamp(64px, 7vw, 104px);
  /* 로고 위 여백(.svm margin-top)과 동일 값 → 로고 띠가 위아래 같은 여백을 갖는다 */
  padding-bottom: clamp(48px, 6vw, 72px);
}
.sph__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-px, 40px);
}
@media (max-width: 640px) {
  .sph__inner { padding-left: 24px; padding-right: 24px; }
}
.sph__copy { text-align: center; min-width: 0; max-width: 780px; margin: 0 auto; }
/* eyebrow — 모노 텍스트(필 아님), 브랜드 블루 Strong */
.sph__eyebrow {
  display: block; font-family: var(--font-mono, monospace);
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-green-strong, #1458D4); margin-bottom: 16px;
}
html[lang^="ko"] .sph__eyebrow {
  font-family: var(--font-sans, 'Manrope', sans-serif); letter-spacing: 0.02em;
}
.sph__title {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: clamp(30px, 3.7vw, 46px); line-height: 1.22; letter-spacing: -0.02em;
  font-weight: 700; color: var(--color-heading, #0F1130);
  max-width: 19ch; margin: 0 auto 18px;
  word-break: keep-all; text-wrap: balance; overflow-wrap: break-word;
}
.sph__accent { color: var(--color-primary, #1A6FFF); }
.sph__desc {
  font-size: 16.5px; line-height: 1.68; color: var(--color-text-muted, #6B7280);
  max-width: 60ch; margin: 0 auto 30px; word-break: keep-all; text-wrap: pretty;
}
.sph__cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sph__btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 15px; font-weight: 600; padding: 11px 20px;
  text-decoration: none; transition: opacity .15s ease, transform .1s ease;
}
.sph__btn--primary { background: var(--color-primary, #1A6FFF); border: 1px solid transparent; color: #fff; }
.sph__btn--ghost { background: transparent; border: 1px solid var(--color-primary-soft, #85B3FF); color: var(--color-primary-hover, #1458D4); }
.sph__btn:hover { opacity: .85; transform: translateY(-1px); }

/* ── Hero 하단 풀폭 가로 로고 마퀴 (공홈 front-page .cap-customers 이식, 컬러) ──
   그레이스케일 해제 = 컬러 그대로. 좌우 mask 페이드 + 무한 가로 스크롤(48s).
   트랙 = 로고 2벌 → translateX(-50%) seamless. hover 정지. reduced-motion이면
   정지+wrap. 로고는 테마 로컬 clients/partner-*.png. */
.svm { margin-top: clamp(48px, 6vw, 72px); overflow-x: clip; }
.svm__logos {
  width: 100%; max-width: 100%; overflow-x: clip; overflow-y: visible;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
}
.svm__track { display: flex; width: max-content; animation: svm-marquee 48s linear infinite; }
.svm__logos:hover .svm__track { animation-play-state: paused; }
@keyframes svm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.svm__row { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
/* 컬러 그대로 (그레이스케일 없음). 크기는 공홈과 동일 110px. */
.svm__logo { height: 110px; width: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .svm__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .svm__row[aria-hidden] { display: none; }
  .svm__row { flex-wrap: wrap; justify-content: center; gap: 24px 44px; padding-right: 0; width: 100%; }
  .svm__logos { -webkit-mask: none; mask: none; }
}
@media (max-width: 640px) {
  .svm__logo { height: 60px; }
  .svm__row { gap: 44px; padding-right: 44px; }
  .svm__logos {
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}
/* ---------- S2 · Partner marquee ---------- */
.sol-marquee {
  padding: 32px 0;
  background-color: var(--color-surface-subtle, #F7F8FB);   /* 교차: legal(흰) 다음 회색 */
  border-bottom: 1px solid var(--c-rule, #e5e7eb);
  overflow: hidden;
}
.sol-marquee__label {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--c-muted, #6b7280);
  text-align: center; margin-bottom: 20px;
  padding: 0 var(--s-page, clamp(20px, 4cqi, 80px));
}
.sol-marquee__wrap { overflow: hidden; scrollbar-width: none; }
.sol-marquee__wrap::-webkit-scrollbar { display: none; }
.sol-marquee__track {
  display: flex; gap: 24px; width: max-content;
  animation: sol-marquee 32s linear infinite;
}
.sol-marquee__track:hover { animation-play-state: paused; }
@keyframes sol-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.sol-logo {
  flex-shrink: 0; width: 120px; height: 64px;
  background-color: var(--c-bg, #ffffff);
  border: 1px solid var(--c-rule, #e5e7eb);
  border-radius: var(--r-sm, 6px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 12px 16px;
}
.sol-logo img {
  max-width: 100%; max-height: 36px; object-fit: contain;
  filter: grayscale(1) opacity(0.65); transition: filter 0.2s;
}
.sol-logo:hover img { filter: grayscale(0) opacity(1); }
.sol-logo__text {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 700;
  color: var(--c-ink-soft, #3a3d5e);
  letter-spacing: 0.05em; text-align: center; opacity: 0.65;
}

/* ---------- S3–S8 · Industry blocks (unified) ---------- */
.sol-ind {
  padding: var(--s-section, clamp(64px, 8cqi, 128px)) 0;
  border-bottom: 1px solid var(--c-rule, #e5e7eb);
  background-color: var(--color-bg, #fff);
  /* 산업 accent 팔레트 (2026-08-13 재설계) — 6개가 겹치지 않고 한 가족처럼.
     빨강은 'Without(문제)' 상태 전용이라 accent에서 뺀다. 명도·채도를 맞춰 통일.
     Telecom=블루(브랜드) / Healthcare=틸 / Finance=골드 / OT=그린 / Legal=퍼플 / Defense=슬레이트.
     --acc-dark는 라벨·아이콘 텍스트 대비용(soft 위 4.5:1↑). */
  --acc: #1A6FFF;        /* 브랜드 블루 유지 */
  --acc-soft: #EAF2FF;
  --acc-dark: #1652CC;   /* 이전 #3b2fbf(바이올렛) → 블루 계열로 정렬 */
}
/* 교차배경: S3(흰) 다음 산업들이 회색↔흰으로 번갈아 → 페이지 전체 리듬 유지.
   telecom(1·회색)·healthcare(2·흰)·finance(3·회색)·defense(4·흰)·ot(5·회색)·legal(6·흰). */
.sol-explore .sol-ind:nth-of-type(odd)  { background-color: var(--color-surface-subtle, #F7F8FB); }
.sol-explore .sol-ind:nth-of-type(even) { background-color: var(--color-bg, #fff); }

/* ═══ 산업 상세 그리드 (2026-08-12 재설계) ═══════════════════════════════════
   서사: ① 상황 → ② 전환(Without│With) → ③ 증거(제품 화면) → ④ 운영 → ⑤ 증명.

   이전에는 블록마다 제 나름의 레이아웃(flex column / 1fr auto / repeat(4,1fr))을 쓰고
   여백도 clamp() 3종이 따로 놀아, 헤드라인·카드·워크플로우의 왼쪽 끝이 서로 어긋났다.
   이제 컨테이너가 12칼럼 마스터 그리드를 소유하고, 모든 자식이 그 칼럼에 스냅된다.
   자식 블록(.sol-ind__top 등)도 같은 12칼럼·같은 거터를 쓰므로 폭이 동일 → 중첩해도
   칼럼 경계가 부모와 정확히 일치한다(subgrid 없이 성립). */
.sol-ind {
  /* 섹션 세로 패딩 = 사이트 표준 섹션 리듬(capsule-site.css --section-py: 92px / 모바일 60px)에
     맞춘다. 다른 페이지 섹션과 같은 호흡 — 2단 압축으로 한 화면은 어차피 근접하므로 리듬 우선. */
  padding: var(--section-py, 92px) 0;
  --sol-gutter: 24px;  /* 칼럼 사이 */
  --sol-band: 48px;    /* 밴드(①~⑤) 사이 */
  --sol-stack: 20px;   /* 밴드 안 요소 사이 */
  --sol-tight: 8px;    /* 밀착 */
}
.sol-ind > .sol-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sol-gutter);
  row-gap: var(--sol-band);
}
.sol-ind > .sol-container > * { grid-column: 1 / -1; min-width: 0; }

/* ── 2단 압축 배치 (2026-08-12) ──────────────────────────────────────────────
   세로 5밴드로는 산업 1개가 1,516px이라 한 화면(912)에 절대 안 들어갔다. 최대 병목이
   데모 491px이라, 데모를 옆으로 붙여 그 높이를 텍스트와 같은 행에 흡수시킨다.

     좌 5칼럼 = ① 상황 + ② 전환   (문제와 주장)
     우 7칼럼 = ③ 증거            (그게 실제로 돌아가는 화면, 두 행에 걸침)
     아래 전체폭 = ④ 운영 → ⑤ 증명

   시선이 좌→우로 한 번 건너는 그 이동이 "막힘 → 증거"가 된다(Z의 가로선).
   Without/With는 좌측에서 세로로 쌓이고 화살표가 ↓로 바뀐다 — 작은 가로 전환을
   내주고 더 큰 가로 이동을 얻는 교환.

   [주의] 배치 규칙은 반드시 `.sol-ind > .sol-container > …` 형태로 쓸 것. 위의 기본값
   (`> * { grid-column: 1 / -1 }`)이 특이도 (0,2,0)이라, `.sol-ind__top`(0,1,0)처럼
   짧게 쓰면 기본값에 밀려 2단이 통째로 안 먹는다(실측으로 한 번 당함). */
.sol-ind > .sol-container { row-gap: var(--sol-band); }
/* 좌측 서사 셀(narr) = 헤드라인 + Without/With 를 세로로. 데모와 같은 한 행에 들어가고
   align-self:start라 데모가 더 커도 늘어나지 않는다 → 헤드라인↔카드 간격은 아래 gap(28px)로
   고정(이전엔 데모 2행 span 탓에 그 간격이 94px까지 벌어졌다). */
.sol-ind > .sol-container > .sol-ind__narr {
  grid-column: 1 / span 5; align-self: start;
  display: flex; flex-direction: column; gap: 28px;
}
/* 데모 top을 eyebrow가 아니라 헤드라인(헤드카피)에 맞춘다 — eyebrow(태그) 높이 + 여백만큼 내림. */
.sol-ind > .sol-container > .sol-ind__demo  { grid-column: 6 / -1; align-self: start; margin-top: calc(1.5em + var(--sol-stack)); }
/* ④·⑤는 전체폭. 서사 블록(①②)보다 한 단계 크게 띄워 밴드 경계를 만든다. */
.sol-ind > .sol-container > .sol-flows      { margin-top: calc(var(--sol-band) - var(--sol-stack)); }

/* ① 상황 — 좌측 칼럼 안에서는 단순 세로 스택 */
.sol-ind__top { display: flex; flex-direction: column; align-items: flex-start; }
.sol-ind__head { min-width: 0; }
.sol-ind__head .sol-ind__tag  { margin-bottom: var(--sol-stack); }
.sol-ind__head .sol-ind__h2   { margin: 0 0 14px; font-size: clamp(24px, 2.3cqi, 30px); }
.sol-ind__head .sol-ind__lead { margin: 0; }
/* 심화 읽기 링크 = 헤드라인 블록의 "꼬리". pill 디자인(기본 .sol-read)을 그대로 쓰고
   위 여백만 준다 — 이전 헤어라인+전체폭+호버밑줄은 pill 전환으로 제거(2026-08-20). */
.sol-ind__top .sol-read--top { margin: 20px 0 0; align-self: flex-start; }

/* ③ 증거 — 제품 화면 */
.sol-ind__demo { display: flex; flex-direction: column; gap: 12px; }
.sol-ind__demo .sol-shot { width: 100%; margin: 0; }
.sol-shot__cap {
  margin: 0; text-align: left;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 12px; letter-spacing: 0.01em; color: var(--color-text-muted, #6B7280);
}

/* 좁은 화면: 2단을 세로 스택으로 되돌린다. DOM 순서가 곧 서사 순서(①②③④⑤)라
   span만 무효화하면 읽는 순서는 그대로 유지된다. */
@container (max-width: 900px) {
  .sol-ind { --sol-band: 40px; }  /* 섹션 패딩은 site --section-py(모바일 60px)를 그대로 상속 */
  /* narr(좌 서사)·demo를 전체폭으로 풀어 세로 스택. 같은 특이도(0,3,0)로 써야 기본값을 이긴다. */
  .sol-ind > .sol-container > .sol-ind__narr { grid-column: 1 / -1; gap: 24px; }
  .sol-ind > .sol-container > .sol-ind__demo { grid-column: 1 / -1; margin-top: 0; }
}
/* 공통 그룹 라벨 — 워크플로·프루프가 같은 문법을 쓴다(라벨은 항상 카드 밖, 2026-08-13 통일).
   Without/With 라벨만 카드 안 — 상태 의미(전/후)라서 의도적으로 다르게 둔다. */
.sol-lab {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--acc-dark); margin-bottom: var(--sol-stack); /* 흰 배경 대비 위해 dark */
}

/* ⑤ 증명 — 결론 블록. [메달│이름+뱃지│설명] 한 덩어리로 압축(줄바꿈·여백 소음 제거). */
.sol-proofline {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: 16px;
  background: var(--acc-soft, #EAF2FF);
  border: 1px solid color-mix(in srgb, var(--acc, #1A6FFF) 22%, #fff);
}
.sol-proofline__medal {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: #fff; color: var(--acc, #1A6FFF);
  border: 1px solid color-mix(in srgb, var(--acc, #1A6FFF) 20%, #fff);
}
.sol-proofline__medal svg { width: 22px; height: 22px; }
.sol-proofline__body { flex: 1 1 auto; min-width: 0; }
.sol-proofline__hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sol-proofline__badge {
  display: inline-flex; align-items: center;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  color: #fff; background: var(--acc, #1A6FFF);
  padding: 3px 10px; border-radius: 999px;
}
.sol-proofline__name { display: block; font-size: 15.5px; font-weight: 700; color: var(--c-ink, #0f1130); letter-spacing: -0.01em; line-height: 1.35; word-break: keep-all; }
.sol-proofline__d {
  display: block; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-soft, #3a3d5e);
  word-break: keep-all; overflow-wrap: break-word;
}

/* ── 산업 상세 스티키 스크롤 (2026-08-13, 현세 요청 — 6개 산업 전체 적용) ──────────
   왼쪽 목업 고정 + 오른쪽 서사(①②→④→⑤) 스크롤. 데스크톱 ≥960px만 스티키, 그 이하는
   기존 세로 스택. telecom=네이티브 HTML 목업(.sol-mock), 나머지 5개=이미지 목업(.sol-shot). */
@media (min-width: 960px) {
  .sol-ind--sticky > .sol-container {
    /* 목업이 정보 밀도가 높아 왼쪽을 살짝 넓게(1.12:1) — 목업 내부 갑갑함 해소 */
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    column-gap: var(--sol-band, 48px);
    /* 오른쪽 스택 리듬 — 밴드(48px)는 목업 없는 레이아웃 기준이라 좁은 컬럼에선 헐거움 → 34px */
    row-gap: 34px;
    align-items: start;
  }
  /* 왼쪽 = 목업, 오른쪽 3행 높이만큼 span 후 그 안에서 sticky 고정 */
  .sol-ind--sticky > .sol-container > .sol-ind__demo {
    grid-column: 1; grid-row: 1 / span 3; margin-top: 0;
    position: sticky; top: calc(var(--header-h, 64px) + 70px); align-self: start;
  }
  /* 목업 프레임 패딩 축소 — 좁은 컬럼에서 내용이 꽉 차 보이게 */
  .sol-ind--sticky .sol-mock { padding: clamp(12px, 1.8cqi, 20px); }
  /* 오른쪽 = 서사 스택 */
  .sol-ind--sticky > .sol-container > .sol-ind__narr  { grid-column: 2; grid-row: 1; }
  .sol-ind--sticky > .sol-container > .sol-flows      { grid-column: 2; grid-row: 2; margin-top: 0; }
  .sol-ind--sticky > .sol-container > .sol-proof-blk  { grid-column: 2; grid-row: 3; }
  .sol-ind--sticky .sol-lab { margin-bottom: 14px; }
  /* 워크플로 = 카드 4개가 아니라 패널 1개 + 행 4개(헤어라인 구분).
     행 높이는 내용만큼만 — 2줄/4줄 카드 높이 불일치·과잉 여백 문제를 구조로 제거. */
  .sol-ind--sticky .sol-flows__list {
    display: block;
    background: var(--c-bg, #fff); border: 1px solid var(--c-rule, #e5e7eb);
    border-radius: 14px; padding: 4px 18px;
  }
  .sol-ind--sticky .sol-flows__list > li {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 0; border: 0; border-radius: 0; background: transparent;
  }
  .sol-ind--sticky .sol-flows__list > li + li { border-top: 1px solid var(--c-rule-light, #eef0f4); }
  .sol-ind--sticky .sol-flows__ico { width: 34px; height: 34px; border-radius: 9px; }
  .sol-ind--sticky .sol-flows__ico svg { width: 18px; height: 18px; }
  .sol-ind--sticky .sol-flows__list li strong { margin-bottom: 2px; }
  /* 프루프 — 압축 구조(베이스와 동일) 그대로, 컬럼 폭에 맞춰 패딩만 */
  .sol-ind--sticky .sol-proofline { padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-ind--sticky > .sol-container > .sol-ind__demo { position: static; }
}

/* (.sol-pdp__actions / .sol-pdp__btn 제거 — 산업 섹션 내 "Run a sample proof" 버튼을 없앴다.
   6개 산업에서 반복되면 CTA 무게가 0이 되어, 페이지 하단 CTA 한 곳으로 일원화. 2026-08-12) */

/* accent variants */
/* 새 팔레트(리터럴 — 전역 토큰과 분리, 이 페이지에 스코프). 클래스명(teal/amber/coral/ink)은
   PHP 유지 위해 그대로 두되 값만 새 색으로. coral=이제 그린, ink=이제 슬레이트. */
.sol-ind--teal  { --acc: #0EA5A4; --acc-soft: #E1F5F4; --acc-dark: #0A7C7B; }  /* Healthcare — 틸 */
.sol-ind--amber { --acc: #E0952B; --acc-soft: #FAF0DB; --acc-dark: #9E6612; }  /* Finance — 골드 */
.sol-ind--coral { --acc: #3E9B57; --acc-soft: #E6F4EA; --acc-dark: #2C7340; }  /* OT — 그린(빨강 회피) */
.sol-ind--legal { --acc: #6D4FCF; --acc-soft: #EDE9FB; --acc-dark: #4E36A8; }  /* Legal — 퍼플(블루와 분리) */
.sol-ind--ink   { --acc: #5A6474; --acc-soft: #EEEFF3; --acc-dark: #3B4251; }  /* Defense — 슬레이트 */

.sol-ind__head { margin-bottom: 0; }
.sol-ind__tag {
  display: inline-block;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--acc-dark); /* soft pill 위 대비 확보(골드·틸 등 저채도 accent 가독) */
  background-color: var(--acc-soft);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 16px;
}
.sol-ind--ink .sol-ind__tag { border: 1px solid var(--c-rule, #e5e7eb); }
.sol-ind__h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700; line-height: 1.22; letter-spacing: -0.02em;
  color: var(--c-ink, #0f1130); margin: 0 0 14px;
  word-break: keep-all; overflow-wrap: break-word; text-wrap: balance;
}
.sol-ind__lead {
  font-size: clamp(15px, 1.1vw, 16.5px);
  color: var(--c-ink-soft, #3a3d5e); line-height: 1.65; margin: 0;
  word-break: keep-all; overflow-wrap: break-word;
}

/* ② 전환 — 좌측 5칼럼 안에서 Without 위 / With 아래로 쌓는다. 둘 사이 ↓ 화살표가
   전환을 표시(2단 배치에서는 가로 전환을 데모로 넘겼다). */
.sol-states {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  row-gap: var(--sol-stack); margin-bottom: 0;
}
/* Without → With 전환 표시 — 두 카드 사이 gap 정중앙에 납작한 삼각형(▾을 세로로 눌러 폭은
   넓게, 높이는 낮게). 원형 뱃지 없음.
   ⚠ states 전체 중앙(top:50%)에 두면 두 카드 높이가 다를 때 어긋난다(통신: With 카피가
   짧아 -10px). → blocked 카드 하단(top:100%) 기준 + gap 절반으로 배치해 카드 높이와 무관하게
   항상 두 카드 사이 정중앙. (2026-08-20 통신 어긋남 수정) */
.sol-state--blocked { position: relative; }
.sol-state--blocked::after {
  content: '\25BE'; position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, calc(-50% + var(--sol-stack) / 2)) scaleY(0.55); transform-origin: center;
  z-index: 2; font-size: 28px; line-height: 1; color: var(--acc); pointer-events: none;
}
/* 카드 = [아이콘 칼럼 | 본문]. 아이콘을 별도 칼럼으로 빼서 크게 키우고, 라벨·제목·설명은
   본문 칼럼에서 왼쪽 끝을 하나로 맞춘다(예전엔 라벨 앞 아이콘 때문에 라벨만 안쪽으로 밀렸다). */
.sol-state {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start;
  padding: 22px; border-radius: 14px;
  background-color: var(--c-bg, #ffffff); border: 1px solid var(--c-rule, #e5e7eb);
}
/* Without=문제(빨강 고정) / With=해결(산업 accent tint). 모든 산업 공통 문법.
   (구 ink·coral 특례 제거 2026-08-13 — OT가 빨강이 아니게 되어 With를 accent-soft로 통일) */
.sol-state--blocked { background-color: var(--c-coral-soft, #fce9e8); border-color: transparent; }
.sol-state--enabled { background-color: var(--acc-soft); border-color: transparent; }

/* 아이콘 — blocked ✕ / enabled ✓. 28px 원으로 키워 상태가 한눈에. 제목 높이에 시선을 맞춤. */
.sol-state__icon {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 14px; font-weight: 700; color: #fff; line-height: 1; margin-top: 1px;
}
.sol-state--blocked .sol-state__icon { background: var(--c-coral, #ef5350); }
.sol-state--blocked .sol-state__icon::before { content: '\2715'; }
.sol-state--enabled .sol-state__icon { background: var(--acc); }
.sol-state--enabled .sol-state__icon::before { content: '\2713'; }

.sol-state__body { min-width: 0; }
.sol-state__label {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 6px;
}
.sol-state--blocked .sol-state__label { color: var(--c-coral-dark, #c73e3a); }
.sol-state--enabled .sol-state__label { color: var(--acc-dark); }
.sol-state__h { font-size: 14.5px; font-weight: 700; color: var(--c-ink, #0f1130); margin-bottom: 6px; line-height: 1.3; }
.sol-state__d { font-size: 13px; color: var(--c-ink-soft, #3a3d5e); line-height: 1.55; word-break: keep-all; overflow-wrap: break-word; }

/* ④ 운영 — 워크플로우 4칸. 각 칸이 3칼럼(12÷4)이라 첫 칸의 왼쪽 끝은 헤드라인·Without과,
   마지막 칸의 오른쪽 끝은 With·심화링크와 같은 선에 떨어진다. */
.sol-flows { margin-top: 0; }
/* (그룹 라벨은 공통 .sol-lab 사용 — §⑤ 위에 정의. 구 .sol-flows__h 제거, 2026-08-13) */
.sol-flows__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sol-gutter); row-gap: var(--sol-gutter);
}
.sol-flows__list > li { grid-column: span 3; }
@container (max-width: 899px) { .sol-flows__list > li { grid-column: span 6; } }
@container (max-width: 560px) { .sol-flows__list > li { grid-column: 1 / -1; } }
/* 카드 = 아이콘 타일 + 텍스트. 밋밋한 4개 동일 박스였던 것을 아이콘·위계·hover로 승격
   (2026-08-13). 아이콘 타일은 산업 accent tint, hover 시 살짝 뜨고 accent 테두리. */
/* 클릭 불가한 정보 카드 — hover 리프트/그림자는 넣지 않는다(버튼처럼 오해됨, 현세 지적 2026-08-13). */
.sol-flows__list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px; border-radius: 14px;
  background-color: var(--c-bg, #fff); border: 1px solid var(--c-rule, #e5e7eb);
  word-break: keep-all; overflow-wrap: break-word;
}
.sol-flows__ico {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--acc-soft, #EAF2FF); color: var(--acc, #1A6FFF);
}
.sol-flows__ico svg { width: 20px; height: 20px; }
.sol-flows__txt { min-width: 0; display: flex; flex-direction: column; }
.sol-flows__list li strong { color: var(--c-ink, #0f1130); font-weight: 700; display: block; margin-bottom: 3px; font-size: 14px; }
.sol-flows__d { font-size: 13px; color: var(--c-ink-soft, #3a3d5e); line-height: 1.5; }

/* Customer proof — 캡슐 기본 화이트 카드(1px 테두리, 그림자 없음) */
.sol-proof {
  background-color: #ffffff; color: var(--c-ink, #0f1130);
  border: 1px solid var(--c-rule, #e5e7eb);
  border-radius: 14px; padding: 20px 22px; margin: 0;
}
.sol-proof__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--color-eyebrow, #1458D4); margin-bottom: 8px;
}
.sol-proof__label svg { flex: none; }
.sol-proof__name { font-size: 15px; font-weight: 700; color: var(--c-ink, #0f1130); margin-bottom: 6px; line-height: 1.35; }
.sol-proof__detail { font-size: 13px; color: var(--color-text-muted, #6B7280); line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; }

/* Screenshot — 브라우저 프레임(상단 바 + 3점)에 담아 '제품 화면'처럼 */
.sol-shot {
  margin: 0; border-radius: 16px; overflow: hidden;
  background-color: #fff; border: 1px solid var(--c-rule, #e5e7eb);
  box-shadow: 0 24px 60px -34px rgba(15, 17, 48, 0.4);
}
.sol-shot__bar {
  display: block; position: relative; height: 34px;
  background: var(--color-surface-subtle, #f7f8fb); border-bottom: 1px solid var(--c-rule, #e5e7eb);
}
.sol-shot__bar::before {
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: #E1584D; box-shadow: 16px 0 0 #F5B94A, 32px 0 0 #4FB865;
}
.sol-shot img { width: 100%; height: auto; object-fit: contain; display: block; }
.sol-shot--dark { background-color: var(--c-bg-dark, #0f1130); border-color: var(--c-bg-dark-2, #1b1d4a); }
.sol-shot--dark .sol-shot__bar { background: #1b1d4a; border-bottom-color: rgba(255,255,255,0.1); }

/* ── 텔레콤 제품 화면 목업 (외부 이미지 대체 — 네이티브 HTML) ──
   그라디언트 백드롭 위 화이트 티켓 카드. 백드롭 색은 캡슐 브랜드 블루 계열(--acc 연동)로.
   (보라 단독은 방향성 없는 슬롭 느낌이라 브랜드 블루로 톤 통일 — 2026-08-12) */
.sol-mock {
  /* 프레임 = 산업 accent 그라데이션 (2026-08-14) — 목업 액자도 산업 색을 타 통일. */
  background: linear-gradient(135deg,
    var(--acc, #1A6FFF) 0%,
    color-mix(in srgb, var(--acc, #1A6FFF) 62%, #fff) 55%,
    color-mix(in srgb, var(--acc, #1A6FFF) 34%, #fff) 100%);
  padding: clamp(20px, 3cqi, 40px);
}
.sol-mock__card {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(15, 17, 48, 0.45);
  font-size: 12.5px; line-height: 1.5; color: var(--c-ink, #0f1130); text-align: left;
}
.sol-mock svg { display: block; width: 100%; height: 100%; }

/* 헤더 = [문서 아이콘 타일 | 제목·메타 | 우측 상태] */
.sol-mock__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--c-rule, #e5e7eb);
}
.sol-mock__doc {
  flex: none; width: 38px; height: 38px; border-radius: 10px; padding: 9px;
  background: var(--color-primary, #1A6FFF); color: #fff;
}
.sol-mock__headmain { flex: 1 1 auto; min-width: 0; }
.sol-mock__headmain b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.sol-mock__meta { display: block; color: var(--color-text-muted, #6B7280); font-size: 11.5px; margin-top: 3px; }
.sol-mock__headmeta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 11.5px; color: var(--color-text-muted, #6B7280); }
.sol-mock__headmeta b { color: var(--c-ink, #0f1130); font-weight: 600; }

/* 칩 */
.sol-mock__chip {
  display: inline-block; font-style: normal; font-weight: 700;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; vertical-align: 1px;
}
.sol-mock__chip--blue  { background: #EAF2FF; color: #1458D4; }
.sol-mock__chip--red   { background: #FDECEC; color: #C73E3A; }
.sol-mock__chip--green { background: #E7F6EC; color: #1E7F3C; }

/* 본문 = 좌(데이터) | 우(AI) 2열. 컨테이너 여백을 줄여 폭이 넉넉해졌고, 세로로 쌓으면
   카드가 과하게 길어져(755px) 원래 높이(~560)를 유지하려 좌우로 둔다. 좁은 폭에서만 스택. */
.sol-mock__body { display: grid; grid-template-columns: 1fr 1fr; }
.sol-mock__pane { padding: 16px 18px; min-width: 0; }
.sol-mock__pane--ai { border-left: 1px solid var(--c-rule, #e5e7eb); background: #FAFBFF; }
@container (max-width: 640px) {
  /* (세로 1열 스택 규칙은 가로 스와이프로 대체돼 제거 — 2026-08-20) */

  /* 모바일 헤더 정리 — headmeta가 우측끝 정렬로 감기며 어정쩡해짐(현세 지적)
     → 타이틀 아래 왼쪽 정렬 한 줄(랩 허용)로. */
  .sol-mock__head { align-items: flex-start; row-gap: 8px; }
  .sol-mock__headmeta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px 14px; width: 100%; }

  /* ── 모바일 목업: 세로 스택 → 가로 스와이프 2장 (2026-08-20, 전 산업) ──
     문제: 두 pane 세로 스택이라 목업이 991~1172px(폰 화면 1.2~1.4장) → -32%.
     스크롤 스냅 + 다음 장 12% peek + 점 인디케이터(JS가 .sol-mock__dots 주입,
     스크롤 연동)로 넘김을 알림. 프레임·패딩 다이어트 동반. */
  .sol-mock { padding: 14px; }
  .sol-mock__head { padding: 13px 15px; }
  .sol-mock__body {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sol-mock__body::-webkit-scrollbar { display: none; }
  .sol-mock__pane {
    flex: 0 0 88%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 14px 15px;
  }
  .sol-mock__pane--ai { border-top: 0; border-left: 1px solid var(--c-rule, #e5e7eb); }
  .sol-mock__kv { margin-bottom: 11px; }
}

/* 스와이프 점 인디케이터 — JS(.sol-mock__dots 주입)가 스크롤 가능할 때만 .is-on.
   활성 점은 pill로 늘려 캐러셀 관례를 분명히. 컨테이너쿼리 밖(전 뷰포트 정의, 표시는 is-on이 제어). */
.sol-mock__dots { display: none; }
.sol-mock__dots.is-on { display: flex; justify-content: center; gap: 6px; padding: 10px 0 12px; background: #fff; }
.sol-mock__dots i { width: 7px; height: 7px; border-radius: 5px; background: #D5DAE6; transition: background 0.2s ease, width 0.2s ease; }
.sol-mock__dots i.is-act { width: 18px; background: var(--acc, #1A6FFF); }

/* 섹션 헤더 = 아이콘 타일 + 라벨 + (우측 칩) */
.sol-mock__panehd {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-eyebrow, #1458D4);
}
.sol-mock__paneic { flex: none; width: 26px; height: 26px; border-radius: 7px; padding: 5px; background: #EAF2FF; color: var(--color-primary, #1A6FFF); }
.sol-mock__paneic--ai { background: #EEEBFF; color: #6D5AE6; }
.sol-mock__panehd .sol-mock__chip { margin-left: auto; }

/* 데이터 행 = [아이콘 타일 | 라벨 | 값] */
.sol-mock__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef0f4; }
.sol-mock__row:last-child { border-bottom: 0; }
.sol-mock__ric { flex: none; width: 24px; height: 24px; border-radius: 6px; padding: 5px; background: var(--color-surface-subtle, #f7f8fb); color: var(--color-text-muted, #6B7280); }
.sol-mock__rlab { flex: 0 0 82px; color: var(--color-text-muted, #6B7280); font-size: 11.5px; }
.sol-mock__rval { font-family: var(--f-mono, 'JetBrains Mono', monospace); font-size: 12px; font-weight: 700; color: var(--c-ink, #0f1130); font-variant-numeric: tabular-nums; }

/* AI kv = [아이콘 타일 | (제목 + 본문)] */
.sol-mock__kv { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sol-mock__kv .sol-mock__ric { background: #EEEBFF; color: #6D5AE6; margin-top: 1px; }
.sol-mock__kv b { display: block; font-size: 12px; font-weight: 700; color: var(--c-ink, #0f1130); margin-bottom: 3px; }
.sol-mock__kv span { color: var(--color-text-muted, #6B7280); font-size: 12px; line-height: 1.5; }

/* 권고안 = 번호 원 */
.sol-mock__acts { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: act; display: flex; flex-direction: column; gap: 7px; }
.sol-mock__acts li { counter-increment: act; position: relative; padding-left: 27px; font-size: 12px; color: var(--color-text-muted, #6B7280); line-height: 1.45; }
.sol-mock__acts li::before {
  content: counter(act); position: absolute; left: 0; top: -1px;
  width: 19px; height: 19px; border-radius: 50%;
  border: 1px solid var(--color-primary-soft, #85B3FF); color: var(--color-primary-hover, #1458D4);
  font-family: var(--f-mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
.sol-mock__gen { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--color-text-muted, #6B7280); margin-top: 4px; }
.sol-mock__gen svg { width: 14px; height: 14px; flex: none; }

/* Findings = 불릿(번호 아님). 방사선 소견은 순서가 아니라 목록이라 점 마커로 (2026-08-14). */
.sol-mock__acts--bul { counter-reset: none; }
.sol-mock__acts--bul li { counter-increment: none; padding-left: 15px; }
.sol-mock__acts--bul li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; top: 7px; left: 3px;
  border: 0; background: var(--acc, #0EA5A4);
}

/* 헬스케어 시그니처 비주얼 — 실제 흉부 CT 썸네일 + Study Context 플레이스홀더.
   좌 pane 하단에 놓여 "텍스트만"이 아니라 실제 의료 이미지가 보이게 (2026-08-14). */
.sol-mock__scan { display: flex; gap: 12px; align-items: flex-start; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--c-rule-light, #eef0f4); }
/* .sol-shot 접두사로 특이도 확보 — 이미지 폴백용 `.sol-shot img{width:100%}`가 이기지 않게. */
.sol-shot .sol-mock__scanimg { flex: none; width: 78px; height: 62px; border-radius: 8px; object-fit: cover; background: #0b0d14; border: 1px solid var(--c-rule, #e5e7eb); display: block; }
.sol-mock__scanctx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.sol-mock__scanctx b { font-size: 11px; color: var(--c-ink, #0f1130); }
.sol-mock__line { height: 6px; border-radius: 3px; background: var(--c-rule, #e5e7eb); }
.sol-mock__line--short { width: 60%; }

/* 푸터 = 그린 밴드. 방패(Bible 금지) 대신 체크 원. */
.sol-mock__foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; font-size: 11.5px; font-weight: 600;
  background: #E7F6EC; color: #1E7F3C; border-top: 1px solid #d3ecd9;
}
.sol-mock__footok, .sol-mock__footlog { display: inline-flex; align-items: center; gap: 8px; }
.sol-mock__footok svg, .sol-mock__footlog svg { width: 16px; height: 16px; flex: none; }
.sol-mock__footlog { color: #3f6b4c; }

/* ── 산업 목업 확장 4종 (2026-08-20) ── */
/* 공용: amber 칩(HIGH·Pending 등 — red는 텔레콤 CRITICAL 전용) */
.sol-mock__chip--amber { background: #FDF3E3; color: #9E6612; }

/* Finance 시그니처 — 분류 칩 + Confidence·Fraud-risk 미터 바 */
.sol-mock__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sol-mock__tags em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #EAF2FF; color: #1458D4; }
.sol-mock__meter { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.sol-mock__meterbar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: #EEF0F4; overflow: hidden; }
.sol-mock__meterbar b { display: block; height: 100%; border-radius: 3px; background: #2FA75B; margin: 0; }
.sol-mock__meter i { font-style: normal; flex: none; font-size: 10.5px; font-weight: 700; color: #1E7F3C; }
b.sol-mock__inval { display: inline; margin: 0; font-size: inherit; }

/* OT 시그니처 — 변수 트렌드 스파크라인(이상점 amber 마커, 라인은 산업 accent) */
.sol-mock__spark { margin-top: 11px; padding: 10px 12px 9px; border: 1px solid var(--c-rule-light, #eef0f4); border-radius: 10px; background: var(--color-surface-subtle, #f7f8fb); color: var(--acc, #3E9B57); }
.sol-mock__spark b { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; color: var(--c-ink, #0f1130); margin: 0 0 7px; }
.sol-mock__spark b em { font-style: normal; font-size: 9.5px; font-weight: 700; color: #9E6612; text-transform: uppercase; letter-spacing: 0.05em; }
.sol-mock .sol-mock__spark svg { width: 100%; height: 44px; }

/* Legal 시그니처 — Risk Flags 불릿(붉은 점; acts--bul과 함께 사용) */
.sol-mock__acts--risk li::before { background: #C73E3A; }
/* (defense 다크 변형은 라이트 통일로 제거 — 현세 피드백 2026-08-20) */

/* Read link — 산업 accent 소프트 pill (2026-08-20 디벨롭, 이전 맨 텍스트+호버밑줄).
   태그·프레임과 같은 accent 시스템으로 묶고 모바일 터치 타깃 확보. 화살표는 호버 슬라이드. */
.sol-read {
  margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--acc-dark, #1458D4); background: var(--acc-soft, #EAF2FF);
  padding: 9px 16px; border-radius: 999px;
  text-decoration: none; transition: background 0.15s ease;
}
.sol-read:hover { background: color-mix(in srgb, var(--acc, #1A6FFF) 17%, #fff); }
.sol-read__arr { flex: none; transition: transform 0.15s ease; }
.sol-read:hover .sol-read__arr { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .sol-read__arr { transition: none; }
  .sol-read:hover .sol-read__arr { transform: none; }
}

/* ---------- S9 · Dark CTA ---------- */
/* S6 CTA — 캡슐 제품/홈 최종 CTA(.pp-finalcta)와 동일 스타일: 밝은 섹션 + 은은한
   블루 radial 워시, 네이비 헤딩·회색 desc(중앙), 8px 라운드 블루 버튼
   (솔리드 주 + 블루 아웃라인 보조). 실측값 기준(https://llmcapsule.ai/product). */
.sol-cta {
  padding: clamp(72px, 9cqi, 106px) var(--s-page, clamp(20px, 4cqi, 40px));
  background:
    radial-gradient(620px 300px at 14% -8%, rgba(26, 111, 255, 0.13), transparent 62%),
    radial-gradient(700px 340px at 88% 108%, rgba(82, 144, 255, 0.15), transparent 62%),
    var(--color-bg, #ffffff);
}
.sol-cta__card {
  max-width: var(--container-max, 1280px); margin: 0 auto;
  background: transparent; padding: 0; border-radius: 0; overflow: visible;
  text-align: center; color: inherit;
}
.sol-cta__bg { display: none; }
.sol-cta__inner { max-width: 720px; margin: 0 auto; }
.sol-cta__title {
  font-size: clamp(26px, 3.2cqi, 36px);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.02em;
  color: #0F1130; margin-bottom: 14px;
  word-break: keep-all; text-wrap: balance;
}
.sol-cta__desc {
  font-size: 15.5px; color: var(--color-text-muted, #6B7280);
  max-width: 620px; margin: 0 auto 26px; line-height: 1.7;
  word-break: keep-all; overflow-wrap: break-word;
}
.sol-cta__actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.sol-cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 8px;
  font-family: inherit; font-weight: 600; font-size: 15px; line-height: 22px;
  cursor: pointer; text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  border: 1px solid transparent;
}
/* 주 버튼 — 솔리드 브랜드 블루. 제품 페이지와 동일하게 호버 시 색 변화 없음(transform·shadow 없음). */
.sol-cta__btn--invert { background: var(--color-primary, #1A6FFF); color: #ffffff; }
.sol-cta__btn--invert:hover { background: var(--color-primary, #1A6FFF); color: #ffffff; border-color: transparent; }
/* 보조 버튼 — 블루 아웃라인. 호버 시 연블루 배경 + 진블루 테두리·글자(제품 동일). */
.sol-cta__btn--ghost { background: transparent; color: #1458D4; border-color: var(--color-primary-soft, #85B3FF); }
.sol-cta__btn--ghost:hover { background: #EAF2FF; border-color: var(--color-primary, #1A6FFF); color: #0F43A8; }

/* ---------- Responsive (container queries against .sol-page) ---------- */
@container (max-width: 599px) {
  /* .sol-states는 2단 배치 이후 항상 세로 스택(1fr)이고 화살표도 기본이 ↓라,
     예전의 rotate(90deg) 보정은 오히려 ←로 뒤집었다(실측). 그래서 제거. */
  .sol-flows__list > li { grid-column: 1 / -1; }
  .sol-logo { width: 100px; height: 56px; }
  .sol-cta__actions { flex-direction: column; align-items: center; }
  .sol-cta__btn { width: 100%; max-width: 320px; }
}

/* -------------------------------------------------------------------------
   Scaffold placeholders (2026-08-07) — S2 셀렉터 · S3 Round-Trip.
   실제 컴포넌트로 교체 예정. 점선 박스로 자리만 표시(디자인 아님).
   ------------------------------------------------------------------------- */
/* S2·S3 모두 실제 구현(.sel-* / .rt-*). placeholder 점선 박스 제거.
   교차배경: S2 회색 → S3 흰색. */
.sol-roundtrip { padding: clamp(56px, 7vw, 96px) 0; background: var(--color-bg, #fff); }
.sol-ph__tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-accent-violet, #5290FF); margin: 0 0 10px;
}
.sol-ph__h { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.02em;
  color: var(--c-text-heading, #1c1c1c); margin: 0 0 10px; }
.sol-ph__d { font-size: 15px; line-height: 1.6; color: var(--c-text-muted, #5f5f5d); margin: 0; max-width: 60ch; }

/* -------------------------------------------------------------------------
   S2 · Industry selector (2026-08-10) — 6산업 셀렉터 카드(탭). 클릭 시 S4 상세 전환.
   중립 라인 아이콘, active=브랜드 블루. Bible 가드: 보안 아이콘·과장 없음.
   ------------------------------------------------------------------------- */
.sel-head { max-width: 760px; margin: 0 0 clamp(28px, 4vw, 44px); }
.sel-eyebrow {
  display: block; font-family: var(--font-mono, monospace);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-eyebrow, #1458D4); margin-bottom: 12px;
}
html[lang^="ko"] .sel-eyebrow { font-family: var(--font-sans, 'Manrope', sans-serif); letter-spacing: 0.02em; }
.sel-h2 {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em;
  color: var(--color-heading, #0F1130); margin: 0 0 12px; word-break: keep-all; text-wrap: balance;
}
.sel-sub {
  font-size: 16px; line-height: 1.6; color: var(--color-text-muted, #6B7280);
  margin: 0; word-break: keep-all; text-wrap: pretty;
}
.sel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.sel-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 22px 20px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--c-border-light, #E5E7EB); border-radius: 16px;
  font-family: inherit; color: inherit; min-width: 0;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .1s ease;
}
.sel-card:hover { border-color: var(--color-primary-soft, #85B3FF); transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(15, 17, 48, 0.35); }
.sel-card:focus-visible { outline: 2px solid var(--color-primary, #1A6FFF); outline-offset: 2px; }
.sel-card.is-active {
  border-color: var(--color-primary, #1A6FFF); background: #F5F9FF;
  box-shadow: inset 0 0 0 1px var(--color-primary, #1A6FFF);
}
.sel-card__ico {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: #EEF4FF; color: var(--color-primary, #1A6FFF); flex: none;
  transition: background .18s ease, color .18s ease;
}
.sel-card.is-active .sel-card__ico { background: var(--color-primary, #1A6FFF); color: #fff; }
.sel-card__ico svg { width: 23px; height: 23px; display: block; }
.sel-card__name {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--color-heading, #0F1130); word-break: keep-all;
}
.sel-card__pain {
  font-size: 13px; line-height: 1.45; color: var(--color-text-muted, #6B7280); word-break: keep-all;
}
@media (max-width: 900px) { .sel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sel-grid { grid-template-columns: 1fr; } }

/* S2 섹션 — 교차배경: 여기서부터 회색(hero=흰). 위아래 여백 대칭(회색 밴드라 상단 과여백 제거). */
.sol-selector { padding: clamp(56px, 7vw, 96px) 0; background: var(--color-surface-subtle, #F7F8FB); }

/* -------------------------------------------------------------------------
   Sticky 서브네비 (미니 산업 탭) — 스크롤 중 헤더(--header-h) 바로 밑에 붙는다.
   .sol-explore(서브네비 + S4 패널) 안에서만 sticky → 상세 구간 벗어나면 해제.
   S2 카드와 같은 data-ind 상태 공유(JS). ------------------------------------ */
/* 견고한 sticky — 산업 구간(.sol-explore) 안에서 헤더 밑에 붙었다가 구간을 벗어나면
   자연히 해제. JS 리빌 없이 브라우저 sticky로만 동작(패널 접힘에도 튀지 않음). */
/* 헤더 밑 미니 산업 탭 — 히어로 바로 아래에서 시작해 산업 상세 구간 내내 sticky.
   S2/S3 제거 후 상시 노출되는 기본 산업 셀렉터로 사용(스크롤 리빌 없음). */
.sol-subnav {
  position: sticky; top: var(--header-h, 64px); z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-border-light, #E5E7EB);
}
.sol-subnav__inner {
  max-width: var(--container-max, 1280px); margin: 0 auto;
  padding: 10px var(--container-px, 40px);
  display: flex; gap: 8px; justify-content: center; overflow-x: auto; scrollbar-width: none;
}
.sol-subnav__inner::-webkit-scrollbar { display: none; }
.sub-pill {
  flex: none; white-space: nowrap; cursor: pointer;
  font-family: var(--font-sans, 'Manrope', sans-serif); font-size: 14px; font-weight: 600;
  color: var(--color-text-muted, #6B7280);
  background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 8px 16px;
  transition: background .15s ease, color .15s ease;
}
.sub-pill:hover { color: var(--color-heading, #0F1130); background: var(--color-surface-subtle, #F7F8FB); }
.sub-pill.is-active { color: #fff; background: var(--color-primary, #1A6FFF); }
.sub-pill:focus-visible { outline: 2px solid var(--color-primary, #1A6FFF); outline-offset: 2px; }
@media (max-width: 640px) { .sol-subnav__inner { padding: 8px 20px; } }
/* 탭 클릭으로 패널에 스크롤할 때 헤더+서브네비에 가리지 않게 */
.sol-ind[data-ind] { scroll-margin-top: calc(var(--header-h, 64px) + 58px); }

/* -------------------------------------------------------------------------
   S3 · How it works, once (2026-08-10) — 라운드 트립 도식.
   고객사 환경 경계(01 원본 · 03 복원은 안에) + 승인 모델(02, 치환본만 오감).
   Bible 가드: 보안 아이콘·과장 없음, Zero Exposure는 하단 note(proof)로만.
   ------------------------------------------------------------------------- */
.rt-head { max-width: 720px; margin: 0 0 clamp(28px, 4vw, 44px); }
.rt-eyebrow {
  display: block; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-eyebrow, #1458D4); margin-bottom: 12px;
}
html[lang^="ko"] .rt-eyebrow { font-family: var(--font-sans, 'Manrope', sans-serif); letter-spacing: 0.02em; }
.rt-h2 {
  font-family: var(--font-sans, 'Manrope', sans-serif); font-size: clamp(24px, 3vw, 36px); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.02em; color: var(--color-heading, #0F1130);
  margin: 0 0 12px; word-break: keep-all; text-wrap: balance;
}
.rt-sub { font-size: 16px; line-height: 1.6; color: var(--color-text-muted, #6B7280); margin: 0; max-width: 62ch; word-break: keep-all; text-wrap: pretty; }

.rt-diagram { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .rt-diagram { grid-template-columns: minmax(0, 1fr) 128px minmax(280px, 340px); gap: 0; align-items: center; } }

.rt-env, .rt-model { position: relative; border-radius: 18px; padding: 40px 22px 22px; }
.rt-env { border: 1.5px solid var(--color-primary-soft, #85B3FF); background: #fff; display: flex; flex-direction: column; gap: 12px; }
.rt-model { border: 1.5px solid var(--c-border-light, #E5E7EB); background: #fff; }
.rt-env__label, .rt-model__label {
  position: absolute; top: -11px; left: 18px; font-family: var(--font-mono, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: #fff; padding: 2px 10px; border-radius: 999px;
}
.rt-env__label { color: var(--color-primary-hover, #1458D4); border: 1px solid var(--color-primary-soft, #85B3FF); }
.rt-model__label { color: var(--color-text-muted, #6B7280); border: 1px solid var(--c-border-light, #E5E7EB); }
html[lang^="ko"] .rt-env__label, html[lang^="ko"] .rt-model__label { font-family: var(--font-sans, 'Manrope', sans-serif); letter-spacing: 0.01em; }

.rt-node { display: flex; align-items: flex-start; gap: 12px; background: var(--color-surface-subtle, #F7F8FB); border: 1px solid var(--c-border-light, #E5E7EB); border-radius: 12px; padding: 14px; }
.rt-node--result { border-color: var(--color-primary-soft, #85B3FF); background: #F5F9FF; }
.rt-node__k { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700; color: #fff; background: var(--color-primary, #1A6FFF); }
.rt-node__t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rt-node__t b { font-family: var(--font-sans, 'Manrope', sans-serif); font-size: 14.5px; font-weight: 700; color: var(--color-heading, #0F1130); line-height: 1.25; word-break: keep-all; }
.rt-node__t span { font-size: 12.5px; line-height: 1.45; color: var(--color-text-muted, #6B7280); word-break: keep-all; }

/* 브리지 — 라벨(줄바꿈 허용) 위, 화살표 선 아래. 데스크톱: 세로 2행. 모바일: 가로 2칸. */
.rt-bridge { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 0 6px; }
.rt-flow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rt-flow__label {
  max-width: 130px; text-align: center; line-height: 1.25; white-space: normal;
  font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-text-muted, #6B7280);
}
.rt-flow--out .rt-flow__label { color: var(--color-primary-hover, #1458D4); }
html[lang^="ko"] .rt-flow__label { font-family: var(--font-sans, 'Manrope', sans-serif); }
.rt-flow__line { position: relative; width: 100%; height: 2px; background: var(--c-border, #E5E7EB); }
.rt-flow--out .rt-flow__line { background: var(--color-primary-soft, #85B3FF); }
.rt-flow__line::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 2px solid; border-right: 2px solid; }
.rt-flow--out .rt-flow__line::after { right: 0; transform: translateY(-50%) rotate(45deg); border-color: var(--color-primary, #1A6FFF); }
.rt-flow--back .rt-flow__line::after { left: 0; transform: translateY(-50%) rotate(-135deg); border-color: #9AA3B2; }
@media (prefers-reduced-motion: no-preference) {
  .rt-flow--out .rt-flow__line { background-image: linear-gradient(90deg, var(--color-primary, #1A6FFF) 50%, transparent 0); background-size: 11px 2px; animation: rt-dash 0.9s linear infinite; }
}
@keyframes rt-dash { to { background-position: -11px 0; } }
@media (max-width: 899px) {
  .rt-bridge { flex-direction: row; gap: 20px; padding: 2px 0; }
  .rt-flow { flex: 1; flex-direction: row; align-items: center; gap: 8px; }
  .rt-flow__label { max-width: none; flex: 1; text-align: left; }
  .rt-flow__line { width: 2px; height: 46px; flex: none; }
  .rt-flow--out .rt-flow__line::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .rt-flow--back .rt-flow__line::after { left: 50%; top: -1px; transform: translateX(-50%) rotate(-45deg); }
  @media (prefers-reduced-motion: no-preference) {
    .rt-flow--out .rt-flow__line { background-image: linear-gradient(180deg, var(--color-primary, #1A6FFF) 50%, transparent 0); background-size: 2px 11px; animation: rt-dash-v 0.9s linear infinite; }
  }
}
@keyframes rt-dash-v { to { background-position: 0 11px; } }

.rt-note { margin: clamp(24px, 3vw, 36px) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted, #6B7280); text-align: center; }