@font-face {
  font-family: "Pretendard";
  src: url("/media/shared/fonts/pretendard-300-800-vi-knowledge-ai.woff2")
    format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
}@font-face {
  font-family: "Geist";
  src: url("/media/shared/fonts/geist-100-900-en-career-application.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/media/shared/fonts/geist-mono-100-900-en-career-application.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
/* SIJE 웹 디자인 토큰 v1 (2026-09-14 확정: 색조합 B안, Pretendard + Geist)
   원본: 웹사이트/SIJE_색조합_토큰_v1.md · AGENTS.md §5
   규칙: 이 파일 밖에서 색·서체·간격 값을 직접 쓰지 않는다 */
/* ---------- 1. 서체 (전부 자체 호스팅, 가변 서브셋) ---------- */
:root {
  /* 스택: 영문·숫자는 Geist가 먼저 잡고, 한글 글리프는 Pretendard로 폴백 */
  --font-sans:
    "Geist", "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", system-ui,
    sans-serif;
  --font-mono: "Geist", "Pretendard", system-ui, sans-serif;

  /* ---------- 2. 색 램프 ---------- */
  --p-50: #f5f6ff;
  --p-100: #e8e9ff;
  --p-200: #d2d3fd;
  --p-300: #b5b5fe;
  --p-400: #948efd;
  --p-500: #7769eb;
  --p-600: #614cd5;
  --p-700: #4f38b8;
  --p-800: #3e2b92;
  --p-900: #2a1e66;
  --n-0: #fbfcfd;
  --n-50: #f6f6f9;
  --n-100: #eff0f4;
  --n-200: #dddde3;
  --n-300: #c3c3cb;
  --n-400: #9797a0;
  --n-500: #73747d;
  --n-550: #696a73; /* n-550: 라이트 배경 보조 텍스트 AA 통과용(#F6F6F9 대비 4.98) */
  --n-600: #54545d;
  --n-700: #373740;
  --n-800: #25252f;
  --n-850: #1b1c26;
  --n-900: #141521;
  --n-950: #0f0f1c;
  --brand-purple: #5a3ff5; /* 로고·인쇄 전용. UI 색으로 쓰지 않는다 */
  --monolis-blue: var(--bi-monolis); /* 제품 화면 콜아웃 전용 */

  /* ---------- 3. 시맨틱 (라이트) ---------- */
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-100);
  --text: var(--n-800);
  --muted: var(--n-550);
  --line: var(--n-200);
  --accent-text: var(--p-600);
  --accent-hover: var(--p-700);
  --accent-line: var(--p-300);
  --accent-tint: rgba(97, 76, 213, 0.1);
  --cta-bg: var(--p-600);
  --cta-bg-hover: var(--p-700);
  --cta-text: #ffffff;
  --danger: #e0605f;
  --success: #1fa391; /* 잠정: 현행 #F65959 #14B7A3 채도 완화안, 대표 확인 대기 */

  /* 도식: 테마 무관 고정값 */
  --dia-canvas: var(--n-950);
  --dia-skeleton: var(--n-500);
  --dia-node: var(--p-400);
  --dia-glow: rgba(148, 142, 253, 0.35);
  --dia-text: var(--n-200);
  --dia-value: var(--p-300);
  --dia-stroke: 1.25px;
  --dia-radius: var(--radius);
  --dia-ok: #3cc7b2;
  --dia-flat: var(--n-700);
  --dia-flat-2: var(--n-600);
  /* 톤인톤 액센트 5종. OKLCH L 0.72±0.03, C 0.12~0.16 고정, 색상만 회전. 도식 1장에 액센트 1종 + 민트(정합) 1종까지 */
  --acc-purple: var(--p-400);
  --acc-purple-hi: #b5b5fc;
  --acc-purple-deep: #7168d4;
  --acc-purple-tint: rgba(148, 142, 253, 0.12);
  --acc-mint: #3cc7b2;
  --acc-mint-hi: #6cd3c1;
  --acc-mint-deep: #038e7e;
  --acc-mint-tint: rgba(60, 199, 178, 0.12);
  --acc-blue: #39b0f1;
  --acc-blue-hi: #7dc7f7;
  --acc-blue-deep: #0383bd;
  --acc-blue-tint: rgba(57, 176, 241, 0.12);
  --acc-amber: #d09a21;
  --acc-amber-hi: #deb870;
  --acc-amber-deep: #9c720d;
  --acc-amber-tint: rgba(208, 154, 33, 0.12);
  --acc-coral: #f07b7b;
  --acc-coral-hi: #f8a4a2;
  --acc-coral-deep: #c74a4f;
  --acc-coral-tint: rgba(240, 123, 123, 0.12);
  /* 의미 역할. 색 이름이 아니라 역할로 호출한다 */
  --role-subject: var(--acc-purple); /* 시제·온톨로지·관계·강조 1개소 */
  --role-verified: var(--acc-mint); /* 정합·양품·검증 통과·완료 */
  --role-data: var(--acc-blue); /* 데이터 흐름·기간계·수집 */
  --role-manual: var(--acc-amber); /* 수작업·대기·수동 릴레이·주의 */
  --role-loss: var(--acc-coral); /* 손실·불일치·이상·클레임 */

  /* 브랜드 자산 색 (CI·BI 실측). 로고와 심볼에만 쓰고 UI 색으로 쓰지 않는다 */
  --ci-black: #0f0f1d;
  --ci-purple: #5a3ff5;
  --ci-grey: #d3d6d9;
  --bi-monolis: #4b37ff;
  --bi-monolog: #ff553c;

  /* ---------- 4. 타이포 스케일 ---------- */
  --fs-eyebrow: 11px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-h3: 22px;
  --fs-h2: 32px;
  --fs-h1: 48px;
  --fs-display: 64px;
  --lh-body: 1.7;
  --lh-head: 1.2;
  --ls-eyebrow: 0.1em;
  --ls-head: -0.015em;

  /* ---------- 5. 간격 (4px 배수만) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --radius: 6px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* 모션 토큰 (Carbon·M3 병합) */
  --dur-fast: 100ms;
  --dur-base: 200ms;
  --dur-moderate: 300ms;
  --dur-slow: 400ms;
  --dur-draw: 700ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  /* 테두리 알파 토큰 */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.24);
}
:not(html):not(body)[data-theme="dark"] {
  --bg: var(--n-900);
  --surface: var(--n-850);
  --surface-2: var(--n-800);
  --text: var(--n-200);
  --muted: var(--n-400);
  --line: var(--n-800);
  --accent-text: var(--p-400);
  --accent-hover: var(--p-300);
  --accent-line: var(--p-700);
  --accent-tint: rgba(148, 142, 253, 0.12);
  --cta-bg: var(--p-600);
  --cta-bg-hover: var(--p-500);
  --cta-text: #ffffff;
  --danger: #f07b7b;
  --success: #3cc7b2;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
}
/* ---------- 6. 글자 렌더링 (안티앨리어싱 필수) ---------- */
html {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased; /* macOS·iOS: 그레이스케일 AA (다크 배경에서 굵어짐 방지) */
  -moz-osx-font-smoothing: grayscale; /* macOS Firefox */
  text-rendering: optimizeLegibility; /* 커닝·합자 활성 */
  font-optical-sizing: auto;
  font-synthesis: none; /* 가짜 볼드·이탤릭 금지 */
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "calt" 1;
  -webkit-text-size-adjust: 100%;
}
/* 다크 배경에서 얇은 글자가 번지는 것 방지: 300 이하 굵기 금지, 본문은 400 이상 */
body {
  font-weight: 400;
}
/* 한글은 어절 단위로만 줄바꿈. 음절 중간 절단 금지. 극단적으로 긴 토큰만 강제 분리 */
:lang(ko),
:lang(ko) * {
  word-break: keep-all;
  overflow-wrap: break-word;
}
:lang(ko) p,
:lang(ko) li {
  text-wrap: pretty;
}
h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
}
.eyebrow {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== 페이지 그리드: 컨테이너 1200 + 여백 24, 12컬럼 78px, 거터 24 ===== */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
.wrap {
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
}
.twelve-column-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 0;
}
.grid-span-four {
  grid-column: span 4;
}
.grid-span-five {
  grid-column: span 5;
}
.grid-span-six {
  grid-column: span 6;
}
.grid-span-seven {
  grid-column: span 7;
}
.grid-span-eight {
  grid-column: span 8;
}
.grid-span-ten {
  grid-column: span 10;
}
.grid-span-twelve {
  grid-column: span 12;
}
.h-ko {
  max-width: 36em;
}
.gridlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  display: none;
}
.gridlines .twelve-column-grid {
  height: 100%;
}
.gridlines .twelve-column-grid::before {
  content: "";
  grid-column: 1/-1;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 0, 90, 0.1) 0 78px,
    transparent 78px 102px
  );
}
.show-grid .gridlines {
  display: block;
}
/* nav */
.nav {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.navigation-content {
  display: flex;
  align-items: center;
  gap: 48px;
  height: 64px;
}
/* CI·BI 자산: 로고는 서체로 조판하지 않고 정본 SVG를 쓴다 */
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}
.brand-wordmark {
  height: 20px;
  width: auto;
  display: block;
  fill: currentColor;
}
.nav.on-dark .logo,
.site-footer-brand .logo {
  color: var(--n-0);
}
.lt-monolog {
  height: 26px;
  width: auto;
  display: block;
  fill: currentColor;
}

.menu {
  display: flex;
  gap: 32px;
  font-size: 14px;
  color: var(--muted);
  flex: 1;
}
/* 메뉴 항목과 드롭다운. 드롭다운은 해당 페이지의 목차이지 별도 사이트맵이 아니다 */
.mi {
  position: relative;
}
.ml {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  height: 64px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.ml:hover,
.mi.cur > .ml {
  color: var(--text);
}
.nav.on-dark .ml:hover,
.nav.on-dark .mi.cur > .ml {
  color: var(--n-0);
}
.dd {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 248px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--dur-fast) linear,
    transform var(--dur-base) var(--ease-standard),
    visibility 0s linear var(--dur-base);
}
.mi:hover .dd,
.mi:focus-within .dd {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.dd-in {
  margin-top: 1px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.dd-i {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
}
a.dd-i:hover {
  background: var(--surface-2);
}
/* 미공개 페이지: 메뉴에는 두되 클릭을 막는다 */
.dd-i.off {
  cursor: default;
  color: var(--n-400);
}
.dd-i.off:hover {
  background: transparent;
}
.dd-i.off .dd-n {
  color: var(--n-400);
}
.dd-s {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--n-100);
  color: var(--n-500);
  flex: 0 0 auto;
}
.dd-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--accent-text);
  flex: 0 0 auto;
}
.dd-t {
  flex: 1;
}
.cta {
  background: var(--cta-bg);
  color: var(--cta-text);
  font-size: 14px;
  font-weight: 500;
  padding: 0 16px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.cta:hover {
  background: var(--cta-bg-hover);
}
/* section */
.sec-head {
  margin-bottom: 0;
}
.micro {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 12px;
}
.h-en {
  font-family: var(--font-sans);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}
.h-ko {
  margin: 0;
  color: var(--text);
}
.sub {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  margin-bottom: 12px;
}
p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.005em;
}
/* 측정폭(measure)은 문단이 아니라 텍스트 블록 단위로. 문단·주장·콜아웃이 같은 오른쪽 선을 공유한다 */
.prose {
  max-width: 36em;
}
.grid-span-eight.prose {
  max-width: none;
}
.sx .sn {
  display: block;
}
.sx {
  max-width: 46em;
}
.grid-span-ten.prose {
  max-width: none;
}
.f4 .sx {
  max-width: none;
} /* 4-F: "반영되면," 까지 한 줄(2026.09.19) */

.mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 도식은 직전 문단이 연 주제를 받는다. 위 간격을 줄이고 아래 간격을 남겨 다음 블록과 분리한다 */
.dia {
  margin: 36px 0 0;
}
.dia + .blk,
.dia + .grid-span-six {
  margin-top: 96px;
}
p b {
  font-weight: 600;
  color: var(--text);
}
.claim {
  font-size: 24px;
  line-height: 33px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.callout {
  background: var(--accent-tint);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 24px;
}
.callout p {
  max-width: none;
}
.callout .qh {
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  margin-bottom: 4px;
}
.callout p {
  margin: 0;
}
/* keys */
.key {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 32px;
}
/* 다크 히어로 위에서는 상단 바가 투명해진다 */
.nav.on-dark {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.nav.on-dark .logo {
  color: var(--n-0);
}
.nav.on-dark .menu {
  color: var(--n-400);
}

/* ===== 히어로: 다크 전폭. 페이지의 첫 화면 ===== */
.hero {
  position: relative;
  margin-top: -64px;
  padding-top: 184px;
  background: var(--n-950);
  color: var(--dia-text);
  overflow: hidden;
}
.hero-rule {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-rule .twelve-column-grid {
  height: 100%;
}
/* 세로 헤어라인 격자는 삭제(2026.09.18 대표 결정). 다크 배경 결은 회로도 관계망(circuitkit)만 */
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -220px;
  width: 900px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(148, 142, 253, 0.2),
    transparent 62%
  );
  pointer-events: none;
}
.hero > .wrap {
  position: relative;
  z-index: 1;
}
/* 히어로 2단 비대칭: 좌측 초대형 제목, 우측 상단 부제 */
.hero-t,
.hero-s {
  padding-bottom: 96px;
}
.grid-span-four.grid-start-eight {
  grid-column: 9 / span 4;
}
.grid-span-five.grid-start-eight {
  grid-column: 8 / span 5;
}
.hero-s {
  padding-top: 46px;
}
.sec-side {
  padding-top: 28px;
} /* 아이브로(16) + 간격(12) = 영문 제목 첫 줄 윗선. 우측 블록 윗선을 여기에 맞춘다(2026.09.19) */
/* 사이드 인덱스(시안 B). 리드 아래 소절·도식·마무리 목록. 문안은 본문 소제목 그대로 */
.sidx {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.sidx li {
  border-bottom: 1px solid var(--line);
}
.sidx a {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.sidx a span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}
.sidx a:hover,
.sidx a:focus-visible {
  color: var(--accent-text);
}
.sub,
.dia,
.close {
  scroll-margin-top: 96px;
}
.h1-en {
  font-family: var(--font-sans);
  font-size: 88px;
  line-height: 90px;
  font-weight: 400;
  letter-spacing: -0.045em;
  margin: 16px 0 0;
  color: var(--n-0);
}
.h1-ko {
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--n-200);
  margin: 0;
}
.h1-sub {
  font-size: 16px;
  line-height: 26px;
  color: var(--n-400);
  margin: 28px 0 0;
}
.text-link.on-dark {
  color: var(--dia-node);
}
.hero-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 24px;
  border-top: 1px solid rgba(221, 221, 227, 0.12);
}
.hn {
  display: block;
  padding: 24px 0 28px;
  text-decoration: none;
  border-top: 2px solid transparent;
  margin-top: -1px;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
/* 호버·포커스·현재 항목이 같은 상태다: 퍼플 선이 나타나고 번호는 퍼플, 제목은 밝아진다 */
.hn:hover,
.hn:focus-visible,
.hn.cur {
  border-top-color: var(--dia-node);
}
.hn-n {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--n-400);
  transition: color var(--dur-fast) var(--ease-standard);
}
.hn:hover .hn-n,
.hn:focus-visible .hn-n,
.hn.cur .hn-n {
  color: var(--dia-node);
}
.hn-t {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--n-300);
  margin-top: 4px;
  word-break: keep-all;
  transition: color var(--dur-fast) var(--ease-standard);
}
.hn:hover .hn-t,
.hn:focus-visible .hn-t,
.hn.cur .hn-t {
  color: var(--n-0);
}
.hn:focus-visible {
  outline: none;
}

/* ===== 프리푸터 CTA ===== */
/* 프리푸터: Palantir식 1px 테두리 2패널. 제목 좌상단, 원형 화살표 우상단, 설명 하단 고정 */
.prefoot {
  background: var(--bg);
  padding-block: 96px;
} /* 상단 구분선 삭제(2026.09.19 대표 지시: O5 링크 아래 가로줄) */
.product-workflow-head {
  margin-bottom: 56px;
}
.product-workflow-claim {
  font-size: 40px;
  line-height: 50px;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 16px 0 0;
  max-width: 20em;
}
.product-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
.product-workflow-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 32px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.product-workflow-card:hover {
  border-color: var(--accent-text);
}
.product-workflow-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.02em;
}
.product-workflow-a {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform var(--dur-base) var(--ease-standard),
    stroke var(--dur-fast) var(--ease-standard);
}
.product-workflow-card:hover .product-workflow-a {
  stroke: var(--accent-text);
  transform: translateX(4px);
}
.product-workflow-description {
  margin: auto 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted);
  max-width: 26em;
}

/* ===== 푸터 ===== */
.foot {
  background: var(--n-950);
  color: var(--n-300);
  padding-block: 80px 40px;
}
.site-footer-brand .logo {
  color: var(--n-0);
}
.site-footer-description {
  font-size: 14px;
  line-height: 22px;
  color: var(--n-400);
  margin: 16px 0 0;
  max-width: 22em;
}
.site-footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
}
.site-footer-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--n-400);
  margin-bottom: 16px;
}
.site-footer-nav a {
  display: block;
  font-size: 14px;
  line-height: 22px;
  color: var(--n-300);
  text-decoration: none;
  padding: 5px 0;
}
.site-footer-nav a:hover {
  color: var(--dia-node);
}
.site-footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid rgba(221, 221, 227, 0.12);
}
.site-footer-cert {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--n-400);
}
.site-footer-cert span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--n-400);
}
.site-footer-card {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--n-400);
}

/* ===================================================================
   섹션 스테이지: 라이트(제시) → 다크 전폭(기전) → 라이트(실행)
   레퍼런스: Palantir/Anduril 다크 밴드, Databricks 중앙 도입부,
             Stripe 컬럼 헤어라인, Samsara 스탯 스트립
   =================================================================== */
.o4 {
  padding-block: 0;
}
.open {
  padding-top: 120px;
}
.h-en {
  font-size: 58px;
  line-height: 64px;
  font-weight: 400;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
.h-ko {
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.lead {
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 29px;
  color: var(--muted);
}

/* 스탯 스트립: 근거 수치를 큰 타입으로. 표가 아니라 선언 */
.stats {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  border-top: 1px solid var(--line);
}
.st {
  padding: 32px 24px 40px 0;
  position: relative;
  border-top: 2px solid var(--accent-text);
  margin-top: -1px;
}

.st-n {
  font-family: var(--font-sans);
  font-size: 60px;
  line-height: 64px;
  font-weight: 400;
  letter-spacing: -0.035em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.st-n span {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-left: 2px;
  color: var(--accent-text);
}
.st-l {
  margin-top: 12px;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
  max-width: 22em;
  word-break: keep-all;
}
.src {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

/* 다크 스테이지: 전폭. 도식이 카드가 아니라 무대 위에 놓인다 */
.stage {
  position: relative;
  margin-top: 120px;
  padding-block: 120px;
  background: var(--n-950);
  color: var(--dia-text);
  isolation: isolate;
}
.stage-rule {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.stage-rule .twelve-column-grid {
  height: 100%;
}
/* 세로 헤어라인 격자 삭제(2026.09.18). 커서 반응은 회로도 관계망 결(circuitkit)이 맡는다 */
/* Previously ignored by browser error recovery: .stage > .wrap{position:relative;z-index:1} */
.stage-head {
  margin-bottom: 64px;
}
.eyebrow.ac {
  color: var(--dia-node);
}
.st-claim {
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-size: 44px;
  line-height: 56px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--dia-text);
  max-width: 20em;
}
.st-claim em {
  font-style: normal;
  color: var(--dia-node);
}
.stage .sub {
  color: var(--dia-node);
}
.stage .claim {
  color: var(--dia-text);
}
.stage p {
  color: var(--n-300);
}
.stage p b {
  color: var(--n-0);
}
.stage .callout {
  background: rgba(148, 142, 253, 0.1);
}
.stage .callout .qh {
  color: var(--dia-text);
}
/* 스테이지 위의 도식은 캔버스를 벗지 않되 무대와 한 몸으로 읽히게 한다 */
.stage .dia {
  background: transparent;
  background-image: none;
  padding: 0;
  margin: 48px 0 0;
}
.stage .dia + .blk {
  margin-top: 96px;
}

/* 라이트 실행부 */
.twelve-column-grid > .blk.first {
  margin-top: 128px;
}
.o4 > .wrap:last-of-type {
  padding-bottom: 120px;
}

/* ===== 수직 리듬 (레퍼런스: Samsara 20/160, Stripe 128-96-64-32-24-12-8) =====
   소제목 → 콘텐츠 20px, 블록 → 다음 블록 96px, 도식은 위 36 아래 96 */
.blk {
  margin-top: 96px;
}
.sec-head + .lead {
  margin-top: 0;
}
.grid-span-five.grid-start-one {
  grid-column: 8 / span 5;
}

/* ===== 표 통일 (레퍼런스: Samsara CM32 2:1:1, 무테두리, 강조 컬럼 풀 필) =====
   본문은 6컬럼, 표는 12컬럼 전폭. 폭·행높이·패딩·타입을 전 표에서 동일하게 쓴다 */
.tblwrap {
  margin-top: 32px;
  overflow-x: auto;
}
.tbl {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
  line-height: 26px;
}
.tbl th,
.tbl td {
  border: 0;
  text-align: left;
  vertical-align: top;
}
.tbl col {
}
.tbl thead th {
  height: 53px;
  padding: 14px 24px 14px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  border-top: 1px solid var(--text);
}
.tbl thead th:first-child,
.tbl tbody td:first-child {
  width: 13%;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 500;
}
.tbl thead th:not(:first-child),
.tbl tbody td:not(:first-child) {
  width: 29%;
  padding-left: 24px;
}
.tbl thead th.hi + th,
.tbl tbody td.hi + td {
  padding-left: 36px;
}
.tbl tbody td {
  padding: 22px 24px 22px 0;
  word-break: keep-all;
  border-top: 1px solid var(--line);
}
.tbl tbody td:first-child {
  padding-top: 28px;
}
.tbl .tm {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
  margin-top: 4px;
}
/* 강조 컬럼은 채움 대신 얇은 강조선과 옅은 틴트로. 팔란티어식 최소 선 */
.tbl th.hi,
.tbl td.hi {
  background: rgba(97, 76, 213, 0.055);
}
.tbl thead th.hi {
  border-top: 2px solid var(--accent-text);
  color: var(--accent-text);
}
.tbl tbody td.hi {
  border-top-color: rgba(97, 76, 213, 0.28);
}

.tbl tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}
.tbl tbody tr:last-child td.hi {
  border-bottom-color: rgba(97, 76, 213, 0.28);
}

/* ===== 4-D 디바이스 (레퍼런스: Tulip/Particle 1:1 제품 타일 + 무테두리 사양 + 링크 2개) ===== */
.device {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: 48px;
  align-items: stretch;
}
.device-txt {
  display: flex;
  flex-direction: column;
  min-height: 100%;
} /* 표·링크를 영상 밑단에 맞춘다(2026.09.19) */
.device-media {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  aspect-ratio: 2400/1656;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
} /* 루프 영상 v7 비율(2026.09.19) */
.device-media img,
.device-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  background: var(--n-950);
}

.device-eye {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.device-name {
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 42px;
  font-weight: 400;
  letter-spacing: -0.025em;
  margin-top: 4px;
}
.device-one {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 26px;
  max-width: 36em;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 22px;
  margin-top: auto;
} /* 행 간격 절반(16→8) */
.spec td {
  border: 0;
  padding: 8px 24px 8px 0;
  vertical-align: top;
  word-break: keep-all;
}
.spec td:first-child {
  width: 26%;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-top: 10px;
}
.device-links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 16px;
}
/* V1·V2 픽토그램 행: 본문과 표 사이 여백을 채운다. 이미지는 Higgsfield 상면 렌더(Clerk형 매트 픽토그램) */
.device-vers {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  column-gap: 20px;
  margin: 24px 0 20px;
  padding: 0;
}
.device-view {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.device-view-image {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  position: relative;
}
/* 호버 시 화면 점등(Clerk 에셋 방식): 꺼진 픽토그램 위에 같은 기하의 점등 렌더(Higgsfield 편집, 화면 영역만 합성)를 겹쳐 crossfade */
.device-view-image img.device-view-on {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition:
    opacity 0.5s var(--ease-standard),
    filter 0.5s var(--ease-standard);
  pointer-events: none;
}
.device-view:hover img.device-view-on,
.device-view:focus-within img.device-view-on {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(119, 105, 235, 0.18));
}
@media (hover: none) {
  .device-view-image img.device-view-on {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .device-view-image img.device-view-on {
    transition: none;
  }
}
.device-view-image img {
  display: block;
  height: var(--ih);
  width: auto;
}
.device-view-image-v1 {
  --ih: 112px;
}
.device-view-image-v2 {
  --ih: 90px;
}
.device-view-txt {
  min-width: 0;
}
.device-view-eye {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.device-view-name {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  margin-top: 4px;
  color: var(--text);
}
.device-view-description {
  font-size: 13px;
  line-height: 19px;
  color: var(--muted);
  margin-top: 2px;
  word-break: keep-all;
  white-space: nowrap;
}

/* ===== 텍스트 링크 공통 ===== */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: none;
  border-radius: var(--radius);
}
.text-link svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.text-link:hover svg {
  transform: translateX(4px);
}
.text-link:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 4px;
}

/* ===== 섹션 마무리 (레퍼런스: Anduril 링크 스택. 중간 섹션에 버튼 CTA를 두지 않는다) ===== */
.close {
  margin-top: 96px;
  padding-top: 48px;
  border-top: 1px solid var(--text);
}
.cl-claim {
  font-size: 34px;
  line-height: 44px;
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  max-width: 20em;
}
.cl-sub {
  font-size: 16px;
  line-height: 26px;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 40em;
}
/* PC에서는 주장 문장의 줄바꿈을 <br>로만 정한다. 측정폭(20em)으로 생기는 어중간한 자동 줄바꿈을 막는다 (2026.09.19 대표 지시) */
@media (min-width: 1024px) {
  .st-claim,
  .cl-claim {
    max-width: none;
  }
}

/* ===== 반응형 ===== */

/* ===== 반응형 (공통) ===== */
@media (max-width: 1023px) {
  .grid-span-four,
  .grid-span-five,
  .grid-span-six,
  .grid-span-seven,
  .grid-span-eight,
  .grid-span-ten {
    grid-column: span 12;
  }
  .grid-span-five.grid-start-one {
    grid-column: span 12;
  }
  .blk {
    margin-top: 64px;
  }
  .dia + .blk,
  .dia + .grid-span-six {
    margin-top: 64px;
  }
  .close {
    margin-top: 64px;
  }
  .device {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .device-txt {
    min-height: 0;
  }
  .spec {
    margin-top: 24px;
  }

  .cl-claim {
    font-size: 24px;
    line-height: 34px;
  }
  .cl-claim {
    font-size: 24px;
    line-height: 34px;
  }
  .lead {
    max-width: none;
    margin-bottom: 32px;
  }
  .mid {
    justify-content: flex-start;
  }
  .grid-span-six + .grid-span-six {
    margin-top: 40px;
  }
  .prose {
    max-width: none;
  } /* 단이 하나면 컨테이너 전폭. 측정폭 제한은 2단일 때만 */
  .h-en {
    font-size: 44px;
    line-height: 48px;
  }
  .h1-en {
    font-size: 52px;
    line-height: 56px;
  }
  .h1-ko {
    font-size: 22px;
    line-height: 30px;
  }
  .hero {
    padding-top: 136px;
  }
  .hero-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
  }
  .prefoot {
    padding-block: 72px;
  }
  .product-workflow-claim {
    font-size: 30px;
    line-height: 40px;
  }
  .product-workflow-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .product-workflow-card {
    min-height: 0;
  }
  .panel {
    padding: 28px;
  }
  .h1-en {
    font-size: 56px;
    line-height: 60px;
  }
  .grid-span-four.grid-start-eight,
  .grid-span-five.grid-start-eight {
    grid-column: span 12;
  }
  .hero-t {
    padding-bottom: 0;
  }
  .hero-s {
    padding-top: 32px;
  }
  .sec-side {
    padding-top: 32px;
  }
  .site-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
    margin-top: 40px;
  }
  .open {
    padding-top: 72px;
  }
  .stage {
    margin-top: 80px;
    padding-block: 80px;
  }
  .stage-head {
    margin-bottom: 64px;
  }
  .st-claim {
    font-size: 30px;
    line-height: 40px;
  }
  .h-ko {
    font-size: 22px;
    line-height: 30px;
  }
  .lead {
    margin-top: 32px;
    font-size: 18px;
    line-height: 28px;
  }
  .stats {
    margin-top: 64px;
    grid-template-columns: 1fr;
  }
  .st {
    padding: 28px 0;
  }
  .stats .st + .st {
    padding-left: 0;
    border-top: 1px solid var(--line);
  }
  .stats .st + .st::before {
    display: none;
  }
  .st-n {
    font-size: 44px;
    line-height: 48px;
  }
  .first {
    margin-top: 80px;
  }
  .o4 > .wrap:last-of-type {
    padding-bottom: 80px;
  }
  .stage .dia {
    padding: 24px;
  }
  /* D1 compact: 6모듈. 벤더 1-3 / 공장 4-6. FOB는 CM과 같은 행: 좌측 칩 2열×3행 (1-2) / CM (3-4) / 우측 칩 2열×3행 (5-6) */
  /* D2 compact: 6모듈. 장부 1-3 / 4-6 병렬, 공유 CM은 하단 중앙(2-6), 합의 바 전폭 */
  .menu {
    display: none;
  }
}
@keyframes unfoldU {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes unfoldD {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 639px) {
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .twelve-column-grid {
    column-gap: 16px;
  } /* padding 단축형이 .open{padding-top}을 덮어 모바일 섹션 머리글 상단 여백이 0이 되던 문제(2026.09.19, 결정 209) */
  .device {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .device-vers {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .spec td:first-child {
    width: 36%;
  }
  .tbl {
    min-width: 640px;
  }
  .h-en {
    font-size: 34px;
    line-height: 38px;
  }
  .h1-en {
    font-size: 38px;
    line-height: 42px;
  }
  .h1-sub {
    font-size: 16px;
    line-height: 26px;
  }
  .hero::after {
    width: 520px;
    height: 320px;
    top: -150px;
  }
  .hero-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-workflow-claim {
    font-size: 26px;
    line-height: 36px;
  }
  .panel {
    padding: 20px;
  }
  .product-workflow-card {
    padding: 24px;
  }
  .product-workflow-title {
    font-size: 20px;
    line-height: 28px;
  }
  .product-workflow-a {
    width: 36px;
    height: 36px;
  }
  .site-footer-nav {
    grid-template-columns: 1fr;
  }
  .site-footer-bot {
    margin-top: 48px;
  }
  .st-claim {
    font-size: 24px;
    line-height: 34px;
  }
  .st-n {
    font-size: 38px;
    line-height: 42px;
  }
  .stage {
    padding-block: 64px;
  }
  .stage .dia {
    padding: 16px;
  }
  .dia {
    padding: 16px;
  }
  .dia-head {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 4px;
    margin-bottom: 16px;
  }
  /* D2 mobile: 단일 컬럼 적층. 벤더 → 공유 CM → 공장 → 합의 */
  /* 390px에서는 좌우 병렬이 물리적으로 불가(모듈 47px). 칩 스트립을 그래프 아래 3행×4로 */
}

/* ===== 모바일 내비게이션(C안): 데모 신청은 우상단 고정, 상세 메뉴는 우측 드로어 ===== */
.burger {
  display: none;
  width: 34px;
  height: 34px;
  margin-left: 8px;
  border: 0;
  background: transparent;
  align-content: center;
  gap: 4.5px;
  padding: 0 5px;
  cursor: pointer;
}
.burger i {
  display: block;
  height: 1.4px;
  background: var(--text);
  border-radius: 1px;
  transition:
    transform var(--dur-base) var(--ease-standard),
    opacity var(--dur-fast);
}
.nav.on-dark .burger i {
  background: var(--n-0);
}
body.mobile-navigation-open .burger i:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.mobile-navigation-open .burger i:nth-child(2) {
  opacity: 0;
}
body.mobile-navigation-open .burger i:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.mobile-navigation-scrim {
  position: fixed;
  inset: 64px 0 0 0;
  background: rgba(10, 10, 20, 0.5);
  z-index: 4;
  opacity: 0;
  transition: opacity var(--dur-base);
}
body.mobile-navigation-open .mobile-navigation-scrim {
  opacity: 1;
}
/* 드로어: 좌측 세로 인덱스(104) + 우측 목차 */
.mobile-navigation-panel[hidden],
.mobile-navigation-scrim[hidden] {
  display: none;
} /* display 지정이 hidden 속성을 덮어써 닫힌 드로어가 가로 스크롤을 만들던 문제 */
.mobile-navigation-panel {
  position: fixed;
  top: 64px;
  bottom: 0;
  right: 0;
  width: 86%;
  max-width: 420px;
  z-index: 5;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px rgba(15, 15, 28, 0.14);
  transform: translateX(100%);
  transition: transform var(--dur-moderate) var(--ease-standard);
}
body.mobile-navigation-open .mobile-navigation-panel {
  transform: none;
}
.navigation-dropdown-tabs {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
}
.navigation-dropdown-tab {
  padding: 14px 12px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition:
    color var(--dur-fast),
    background var(--dur-fast);
}
.navigation-dropdown-tab.is-on {
  color: var(--text);
  border-left-color: var(--accent-text);
  background: var(--surface);
}
.navigation-dropdown-panes {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.navigation-dropdown-pane {
  display: none;
  padding: 10px 0 24px;
}
.navigation-dropdown-pane.is-on {
  display: block;
  animation: dr-in var(--dur-base) var(--ease-standard) both;
}
@keyframes dr-in {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.navigation-dropdown-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 16px 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.mm-list {
  display: flex;
  flex-direction: column;
}
.mm-i {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}
.mm-i.off {
  color: var(--n-400);
}
.mm-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  flex: 0 0 auto;
}
.mm-t {
  flex: 1;
}
.mm-s {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--muted);
}
.mm-arr {
  margin-left: auto;
  color: var(--muted);
}
@media (max-width: 1023px) {
  .menu {
    display: none;
  }
  .burger {
    display: grid;
  }
  .navigation-content {
    gap: 0;
  }
  .navigation-content .logo {
    flex: 1;
    min-width: 0;
  } /* 메뉴가 사라지면 로고가 남은 폭을 차지해 CTA와 겹치지 않는다 */
}
@media (min-width: 1024px) {
  .mobile-navigation-panel,
  .mobile-navigation-scrim {
    display: none;
  }
}

/* ===== 접근성 보정 (2026.09.16 검토) =====
   1. 라이트 배경 보조 텍스트는 --muted(n-550)만 쓴다. n-400은 다크 면 전용이다.
   2. 다크 면 보조 텍스트는 n-400을 쓴다. n-500/n-600은 다크에서 AA 미달이다.
   3. 인라인 링크는 최소 높이 24px을 확보한다. */
/* 푸터의 미공개 제품: 링크 없이 배지로만 알린다 */
.site-footer-soon {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--n-400);
}
.site-footer-soon i {
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--n-400);
}
h3.claim {
  margin: 0 0 16px;
} /* 의미만 h3으로 올리고 조판은 .claim 규칙을 그대로 쓴다 */
.text-link,
.dlink {
  min-height: 24px;
}
@media (max-width: 767px) {
  .text-link,
  .dlink {
    min-height: 28px;
    align-items: center;
  }
  .logo {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }
}

/* ===== 모바일 정보 밀도(2026.09.19, 결정 206) =====
   3단계(보조 표·마무리 보조 문장·주석·사이드 인덱스)는 767px 이하에서 숨기고, 2단계(근거 줄)는 첫 단위만 보이고 접는다. PC 무변경 */
.fold-btn {
  display: none;
}
@media (max-width: 767px) {
  .t11wrap,
  .cl-sub,
  .o4 .note.grid-span-twelve,
  .a-use,
  .sidx {
    display: none;
  }
  .fold:not(.unfolded) [data-fold] {
    display: none;
  }
  .fold.unfolded [data-fold] {
    animation: foldin 0.38s var(--ease-standard) both;
  }
  @keyframes foldin {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .fold.unfolded .fold-btn {
    animation: foldin 0.38s var(--ease-standard) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .fold.unfolded [data-fold],
    .fold.unfolded .fold-btn {
      animation: none;
    }
  }
  .fold-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: var(--accent-text);
  }
  .fold-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur-fast) var(--ease-standard);
  }
  .fold.unfolded .fold-btn svg {
    transform: rotate(180deg);
  }
  .stage .fold-btn {
    color: var(--dia-node);
  }
  .fold-btn:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 4px;
    border-radius: 2px;
  }
  .prose .ln,
  .prose .sx .sn {
    margin-bottom: 6px;
  }
}

/* ===== 결정 211: 전 페이지 내비를 Products 기준으로 통일. 독립 상자(모서리 --radius×2, 위 1px 하이라이트 + 아래 그림자), 데모 신청은 프리푸터에서만 ===== */
.nav {
  position: sticky;
  top: 12px;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 12px;
}
.nav .navigation-content {
  position: relative;
  height: 56px;
  padding: 0 8px 0 20px;
}
.navigation-background {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius) * 2);
  border: 1px solid var(--line);
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0.35)
    ),
    color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(15, 15, 28, 0.06),
    0 10px 28px rgba(15, 15, 28, 0.1);
}
.nav.on-dark {
  background: transparent;
  border-bottom: 0;
}
.nav.on-dark .navigation-background {
  border-color: rgba(221, 221, 227, 0.12);
  background:
    linear-gradient(
      180deg,
      rgba(221, 221, 227, 0.06),
      rgba(221, 221, 227, 0.02)
    ),
    rgba(15, 15, 28, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(221, 221, 227, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 12px 32px rgba(0, 0, 0, 0.45);
}
.nav .cta {
  display: none;
}

.on {
  background: var(--n-900);
  border: 1px solid rgba(221, 221, 227, 0.12);
  border-radius: var(--radius);
  padding: 20px;
}
.on.mid {
  border-color: var(--dia-node);
  border-width: 1.5px;
}
.ol {
  padding-top: 14px;
  border-top: 1px solid rgba(221, 221, 227, 0.12);
}
@keyframes o1up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes o1fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 639px) {
  .on {
    padding: 16px;
  }
}

/* ---- C ---- */
.c-stage {
  position: relative;
  min-height: 560px;
  padding: 48px 24px;
  background: radial-gradient(120% 90% at 50% 45%, #0d0d18 0%, #08080f 70%);
}
.c-bt {
  position: absolute;
  width: 150px;
  height: 78px;
  border: 1px solid rgba(148, 142, 253, 0.16);
  border-radius: 3px;
  background: rgba(20, 21, 33, 0.5);
  opacity: 0.5;
  padding: 9px 10px;
  left: calc(var(--c) * 17.2%);
  top: calc(48px + var(--r) * 122px);
}
.c-bg {
  position: absolute;
  inset: 24px;
  display: grid;
  grid-template-columns: repeat(var(--gc, 6), 1fr);
  grid-template-rows: repeat(var(--gr, 5), 1fr);
  place-items: center;
  pointer-events: none;
}
.c-bg .c-bt {
  position: static;
  width: 150px;
  max-width: calc(100% - 12px);
  height: 78px;
}
.c-bt span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(151, 151, 160, 0.55);
}
.c-bt i {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: rgba(119, 105, 235, 0.32);
}
.c-bt i:nth-child(3) {
  width: 78%;
}
.c-bt i:nth-child(4) {
  width: 54%;
}
.c-panel {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 44px auto 0;
  padding: 26px;
  border: 1px solid rgba(221, 221, 227, 0.14);
  border-radius: 4px;
  background: #0a0a13
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.022) 0 1px,
      transparent 1px 6px
    );
}
.c-grid {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), 1fr);
  gap: 18px;
}
.c-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--n-400);
  margin: -8px 0 10px;
}
.c-sys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -6px 0 10px;
}
.c-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(221, 221, 227, 0.14);
}
.c-bd {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.c-bdl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--n-400);
}
.c-bdv {
  font-size: 13px;
  color: var(--n-200);
}
.c-sys span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px solid rgba(221, 221, 227, 0.16);
  border-radius: 3px;
  color: var(--n-400);
}
.c-col {
  opacity: 0.4;
}
.c-cn {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--n-400);
}
.c-ct {
  display: block;
  font-size: 12px;
  color: var(--n-300);
  margin: 2px 0 12px;
}
.c-r {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 8px;
  margin-bottom: 7px;
  border: 1px solid rgba(221, 221, 227, 0.1);
  border-radius: 3px;
  background: rgba(20, 21, 33, 0.6);
}
.c-r i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(148, 142, 253, 0.5);
  flex: 0 0 auto;
}
.c-r b {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(221, 221, 227, 0.13);
}
.c-calls {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.c-call {
  position: absolute;
  top: var(--t);
  left: calc(
    50% - 380px + 26px + var(--c) * var(--cp, 191.5px) +
      (var(--colw, 173.5px) - 184px) / 2
  );
  width: 184px;
}
.c-cd {
  background: #0b0b16;
  border: 1px solid rgba(251, 252, 253, 0.55);
  border-radius: 4px;
  padding: 10px 12px;
}
.c-cl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--n-0);
}
.c-cs {
  display: block;
  font-size: 11px;
  line-height: 16px;
  color: var(--n-400);
  margin-top: 3px;
}
.c-line {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: var(--g);
  background: rgba(251, 252, 253, 0.42);
}
.c-mk {
  position: absolute;
  left: calc(50% - 5px);
  top: calc(100% + var(--g) - 5px);
  width: 10px;
  height: 10px;
  border: 1px solid rgba(251, 252, 253, 0.7);
  border-radius: 50%;
}

@media (max-width: 767px) {
  .a-de {
    display: none;
  }
}
@media (max-width: 1023px) {
  .c-stage {
    padding: 24px 16px;
    min-height: 0;
  }
  .c-bt,
  .c-bg {
    display: none;
  }
  .c-panel {
    max-width: 100%;
    margin-top: 0;
    padding: 16px;
    min-height: 252px;
  }
  /* 열은 접지 않는다. 열 자체가 "세 저장소"라는 정보이므로 열 수를 유지하고 칩만 감춘다 */
  .c-grid {
    grid-template-columns: repeat(var(--n, 4), 1fr);
    gap: 8px;
  }
  .c-sys {
    display: none;
  }
  .c-cn {
    font-size: 9px;
  }
  .c-ct {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .c-meta {
    font-size: 8px;
    margin: -6px 0 8px;
  }
  .c-r {
    height: 26px;
    padding: 0 5px;
    margin-bottom: 6px;
    gap: 5px;
  }
  .c-band {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }
  .c-bd {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 10px;
    align-items: baseline;
  }
  .c-bdv {
    font-size: 11.5px;
    line-height: 17px;
  }
  /* 콜아웃은 데스크톱과 같이 패널 위에 겹쳐 둔다. 좌표 배치만 세로 중앙 정렬로 바꾼다 */
  /* 열 머리글 아래(행 영역)에 콜아웃을 겹친다. 하단 3축 밴드는 가리지 않는다 */
  .c-calls {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 90px 20px 0;
    pointer-events: none;
  }
  .c-call {
    position: static;
    width: 100%;
    max-width: 300px;
  }
  .c-line,
  .c-mk {
    display: none;
  }
  .c-cd {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 7px 10px;
    background: rgba(11, 11, 22, 0.94);
    backdrop-filter: blur(2px);
  }
  .c-cl {
    font-size: 11.5px;
  }
  .c-cs {
    margin-top: 0;
    font-size: 10px;
    line-height: 14px;
  }
}

/* ---- C 모바일 세로형(.c-m). 데스크톱(.c-d)과 화면 폭으로 교체 ---- */
.c-stage.c-m {
  display: none;
}
@media (max-width: 1023px) {
  .c-stage.c-d {
    display: none;
  }
  .c-stage.c-m {
    display: block;
    padding: 20px 12px;
    min-height: 0;
  }
  .c-m .c-bg {
    display: grid;
    inset: 12px;
    grid-template-columns: repeat(var(--gc, 2), 1fr);
    grid-template-rows: repeat(var(--gr, 7), 1fr);
    place-items: center;
  }
  .c-m .c-bt {
    display: block;
    position: static;
    width: 120px;
    height: 62px;
    padding: 7px 8px;
    opacity: 0.5;
  }
  .c-m .c-bt span {
    font-size: 8px;
  }
  .c-m .c-bt i {
    height: 3px;
    margin-top: 5px;
  }
  .c-mflow {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .c-m .c-panel {
    max-width: none;
    margin: 0;
    padding: 12px 12px 10px;
    min-height: 0;
  }
  .c-m .c-mblk .c-col {
    opacity: 1;
  } /* 블록 전체를 흐리게 하지 않고 안쪽 행만 흐린다 */
  .c-m .c-cn {
    font-size: 9px;
  }
  .c-m .c-ct {
    font-size: 13px;
    margin: 2px 0 8px;
    display: inline-block;
  }
  .c-m .c-cn {
    display: inline-block;
    margin-right: 8px;
  }
  .c-m .c-meta {
    display: block;
    font-size: 9px;
    margin: -2px 0 6px;
  }
  .c-m .c-sys {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 8px;
  }
  .c-m .c-mrows {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    opacity: 0.55;
  }
  .c-m .c-r {
    height: 20px;
    padding: 0 5px;
    margin: 0;
    gap: 4px;
  }
  /* 콜아웃: 정적 흐름. 다리선은 위로(열 콜아웃) 또는 위·아래(릴레이) */
  .c-m .c-calls {
    display: none;
  }
  .c-m .c-call {
    position: static;
    width: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
  }
  .c-m .c-mcol {
    align-self: flex-end;
    width: 78%;
    margin: 0 12px;
  }
  .c-m .c-mrelay {
    width: 86%;
    align-self: center;
    margin: 0;
  }
  .c-m .c-line {
    position: static;
    display: block;
    width: 1px;
    height: 14px;
    transform-origin: top;
    left: auto;
    top: auto;
  }
  .c-m .c-mk {
    position: static;
    display: block;
    width: 10px;
    height: 10px;
    left: auto;
    top: auto;
    margin: -4px 0 -1px;
  }
  .c-m .c-mk.dn {
    margin: -1px 0 -4px;
  }
  .c-m .c-mrelay > .c-mk:first-child {
    margin-top: 6px;
  }
  .c-m .c-cd {
    display: block;
    width: 100%;
    padding: 8px 11px;
  }
  .c-m .c-cl {
    font-size: 12px;
    display: block;
  }
  .c-m .c-cs {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 14px;
  }
  .c-m .c-mband {
    margin-top: 12px;
  }
  .c-m .c-band {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .c-m .c-bd {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: baseline;
  }
  .c-m .c-bdv {
    font-size: 11.5px;
    line-height: 17px;
  }
}
/* ---- T4 단계 x 도구 동시 사용 행렬 ---- */
/* 카드 면은 반투명이다. 뒤로 흐르는 굵은 선이 비쳐 보여야 한다 */
.t4-panel {
  fill: #0a0a14;
  stroke: rgba(221, 221, 227, 0.1);
  rx: 8;
}
.t4-axis {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  fill: var(--n-400);
}
.t4-railh {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  fill: var(--n-400);
  text-anchor: end;
}
.t4-rail {
  font-family: var(--font-sans);
  font-size: 13px;
  fill: var(--n-300);
  text-anchor: end;
  dominant-baseline: central;
}
.t4-col {
  fill: rgba(20, 21, 33, 0.72);
  stroke: rgba(221, 221, 227, 0.1);
  rx: 6;
}
.t4-cn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--role-subject);
}
.t4-ck {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  fill: var(--n-0);
}
.t4-own {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.t4-own .p {
  fill: var(--n-200);
}
.t4-own .s {
  fill: var(--n-400);
}
.t4-hr {
  stroke: rgba(221, 221, 227, 0.12);
}
.t4-row {
  fill: rgba(12, 12, 23, 0.88);
  stroke: rgba(221, 221, 227, 0.08);
  rx: 4;
}
.t4-row.on {
  fill: rgba(148, 142, 253, 0.12);
  stroke: var(--role-subject);
  stroke-opacity: 0.5;
}
.t4-flash {
  fill: rgba(148, 142, 253, 0.24);
  stroke: var(--role-subject);
  stroke-width: 1.4;
  rx: 4;
}
.t4-cell {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  fill: var(--acc-purple-hi);
}
.t4-bind {
  stroke: var(--role-subject);
  stroke-width: 2;
  stroke-opacity: 0.7;
}
.t4-dot {
  fill: #0c0c17;
  stroke: var(--role-subject);
  stroke-width: 2;
}
.t4-dot.main {
  fill: var(--role-subject);
}
.t4-ln {
  stroke: rgba(221, 221, 227, 0.1);
  stroke-width: 1;
}
.t4-wire {
  fill: none;
  stroke: var(--role-subject);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t4-warr {
  fill: none;
  stroke: var(--role-subject);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t4-rail.m {
  text-anchor: middle;
  font-size: 9.5px;
  dominant-baseline: auto;
}
.t4-col.m {
  fill: rgba(20, 21, 33, 0.93);
}
.t4-ck.m {
  font-size: 13px;
}
.t4-own.m {
  font-size: 8.5px;
}
.t4-cell.m {
  font-size: 8.5px;
  letter-spacing: 0.04em;
}
.t4m {
  display: none;
}
@media (max-width: 767px) {
  .t4:not(.t4m) {
    display: none;
  }
  .t4m {
    display: block;
  }
}

/* ---- T8 번호 체인 ---- */
.t8 {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 48px;
  padding: 8px 0;
}
.t8-n {
  display: flex;
  flex-direction: column;
}
.t8-eb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--role-subject);
}
.t8-num {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1;
  font-weight: 600;
  color: var(--n-0);
  margin: 8px 0 18px;
  letter-spacing: -0.02em;
}
.t8-vis {
  height: 150px;
  border: 1px solid rgba(221, 221, 227, 0.14);
  border-radius: 6px;
  background: #0c0c17;
  overflow: hidden;
}
.t8-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.t8-t {
  font-size: 18px;
  font-weight: 600;
  color: var(--n-0);
  margin-top: 22px;
}
.t8-d {
  font-size: 14px;
  line-height: 22px;
  color: var(--n-400);
  margin-top: 6px;
}
@media (max-width: 767px) {
  .t8 {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* 번호와 픽토그램을 한 행에 두고, 픽토그램은 원본 2:1 비율을 지킨다 */
  .t8-n {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "eb eb" "num vis" "tt tt" "dd dd";
    column-gap: 16px;
    align-items: start;
  }
  .t8-eb {
    grid-area: eb;
  }
  /* 숫자의 캡 하이트를 그림 상단선에 맞춘다. line-height 1에서 Geist 캡 상단 여백은 약 0.09em */
  .t8-num {
    grid-area: num;
    font-size: 44px;
    line-height: 1;
    margin: 10px 0 0;
    padding-top: 4px;
  }
  .t8-vis {
    grid-area: vis;
    height: auto;
    aspect-ratio: 300 / 150;
    margin-top: 10px;
  }
  .t8-t {
    grid-area: tt;
    margin-top: 16px;
  }
  .t8-d {
    grid-area: dd;
  }
}
/* ---- T11 3열 행 ---- */
.t11 {
  border-top: 1px solid rgba(221, 221, 227, 0.16);
}
.t11-r {
  display: grid;
  grid-template-columns: 128px 1fr 85px;
  column-gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(221, 221, 227, 0.1);
  align-items: baseline;
}
.t11-h span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--n-400);
  text-transform: uppercase;
}
.t11-h {
  padding: 10px 0;
}
.t11-hv {
  text-align: right;
}
.t11-l {
  font-size: 16px;
  font-weight: 600;
  color: var(--n-0);
}
.t11-d {
  font-size: 16px;
  line-height: 24px;
  color: var(--n-300);
}
.t11-v {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--role-subject);
  text-align: right;
}

.iso-ic {
  shape-rendering: geometricPrecision;
}
.iso-ic polygon,
.iso-ic path,
.iso-ic ellipse {
  stroke-linejoin: round;
}
.iso-ic .ic {
  fill: #15161f;
  stroke: var(--n-200);
  stroke-width: 1;
}
.iso-ic .ic.f-t {
  fill: #232433;
}
.iso-ic .ic.f-l {
  fill: #15161f;
}
.iso-ic .ic.f-r {
  fill: #0d0d16;
}
.iso-ic .ic-lt {
  fill: #2b2c3d;
  stroke: var(--n-200);
  stroke-width: 1;
}
.iso-ic .ic-dk {
  fill: #0b0b13;
  stroke: var(--n-300);
  stroke-width: 1;
}
.iso-ic .ic-sheet {
  fill: #101018;
  stroke: var(--n-200);
  stroke-width: 1;
}
.iso-ic .ic-acc {
  fill: var(--acc-purple-tint);
  stroke: var(--role-subject);
  stroke-width: 1;
}
.iso-ic .ic-roof {
  fill: #232433;
  stroke: var(--n-200);
  stroke-width: 1;
}
.iso-ic .ic-roof-t {
  fill: #2b2c3d;
  stroke: var(--n-200);
  stroke-width: 1;
}
.iso-ic .ic-roof-s {
  fill: #0d0d16;
  stroke: var(--n-200);
  stroke-width: 1;
}
.iso-ic .ic-win {
  fill: rgba(148, 142, 253, 0.16);
  stroke: var(--role-subject);
  stroke-width: 0.7;
  stroke-opacity: 0.7;
}
.iso-ic .ic-door {
  fill: #0b0b13;
  stroke: var(--n-300);
  stroke-width: 0.8;
}
.iso-ic .ic-floor {
  fill: none;
  stroke: var(--role-subject);
  stroke-width: 0.7;
  stroke-opacity: 0.3;
  stroke-dasharray: 2 3;
}
.iso-ic .ic-arrow {
  fill: var(--role-subject);
  fill-opacity: 0.85;
  stroke: none;
}
.iso-ic .il {
  stroke: var(--n-200);
  stroke-width: 1;
}
.iso-ic .il-thin {
  stroke: var(--n-400);
  stroke-width: 0.55;
}
.iso-ic .il-grid {
  stroke: var(--role-subject);
  stroke-width: 0.5;
  stroke-opacity: 0.14;
}
.iso-ic .il-bold {
  stroke: var(--n-100);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.iso-ic .il-belt {
  stroke: var(--n-500);
  stroke-width: 0.7;
  stroke-dasharray: 3 3;
}

/* ---- T12 세계지도 ---- */
.t12 {
  display: block;
  width: 100%;
  height: auto;
}
.t12 .m-dots circle {
  fill: var(--n-700);
}
.t12 .m-arc {
  fill: none;
  stroke-linecap: round;
}
.t12 .m-arc.bv {
  stroke: var(--role-subject);
}
.t12 .m-arc.vf {
  stroke: var(--role-verified);
}
.t12 .m-arc.bv {
  stroke-width: 1.4;
  stroke-opacity: 0.7;
}
.t12 .m-arc.vf {
  stroke-width: 1.8;
  stroke-opacity: 0.9;
}
.t12 .mk-b {
  fill: none;
  stroke: var(--n-100);
  stroke-width: 1.2;
}
.t12 .mk-b-r {
  fill: none;
  stroke: var(--n-300);
  stroke-width: 0.7;
  stroke-opacity: 0.6;
}
.t12 .mk-v {
  fill: var(--role-subject);
}
.t12 .mk-v-r1 {
  fill: none;
  stroke: var(--role-subject);
  stroke-width: 1;
  stroke-opacity: 0.75;
}
.t12 .mk-v-r2 {
  fill: none;
  stroke: var(--role-subject);
  stroke-width: 0.7;
  stroke-opacity: 0.3;
}
.t12 .mk-f {
  fill: var(--role-verified);
}
.t12 .mk-f-r {
  fill: none;
  stroke: var(--role-verified);
  stroke-width: 0.8;
  stroke-opacity: 0.55;
}
.t12 .m-lab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  fill: var(--n-100);
}
/* 회항 뱃길. 오더 호와 달리 무채색 점선. 선박은 offset-path로 항적을 따라 돈다 */
.t12 .m-sea {
  fill: none;
  stroke: var(--n-200);
  stroke-width: 1;
  stroke-opacity: 0.55;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
}
.t12 .m-wake {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
}
.t12 .m-ship-b {
  fill: var(--n-100);
}
.t12 .m-ship-d {
  fill: var(--n-900);
}
.t12 .m-ship {
  offset-rotate: auto;
  offset-distance: 0%;
}
/* 라이트 변형: 배경 위 직접. 선은 deep, 마커는 진하게 */
.t12.light .m-dots circle {
  fill: var(--n-300);
}
.t12.light .m-arc.bv {
  stroke: var(--acc-purple-deep);
}
.t12.light .m-arc.vf {
  stroke: var(--acc-mint-deep);
}
.t12.light .mk-b {
  stroke: var(--n-800);
}
.t12.light .mk-b-r {
  stroke: var(--n-500);
}
.t12.light .mk-v {
  fill: var(--acc-purple-deep);
}
.t12.light .mk-v-r1,
.t12.light .mk-v-r2 {
  stroke: var(--acc-purple-deep);
}
.t12.light .mk-f {
  fill: var(--acc-mint-deep);
}
.t12.light .mk-f-r {
  stroke: var(--acc-mint-deep);
  stroke-opacity: 0.55;
}
.t12.light .m-lab {
  fill: var(--n-700);
}
.t12.light .m-sea {
  stroke: var(--n-800);
  stroke-opacity: 0.55;
}
.t12.light .m-ship-b {
  fill: var(--n-800);
}
.t12.light .m-ship-d {
  fill: var(--bg);
}
/* 1회 등장 모션. .anim 상태에서는 숨김, .in이 붙으면 지연(--d) 순서로 진행. 어떤 모션도 반복하지 않는다 */
.t12.anim .mk.blink {
  opacity: 0;
}
.t12.anim .m-arc.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.t12.anim .m-wake {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.t12.anim .m-ship {
  opacity: 0;
}
/* 점: 등장하며 두 번 깜빡이고(--d), 선이 도착하면 다시 두 번 깜빡인다(--a) */
.t12.anim.in .mk.blink {
  animation:
    t12-blink 1s var(--ease-standard) var(--d) both,
    t12-pulse 0.8s var(--ease-standard) var(--a) both;
}
/* 오더 호: 그려진 뒤 선박이 출항하면 옅어진다 */
.t12.anim.in .m-arc.draw {
  animation:
    t12-draw 0.9s var(--ease-standard) var(--d) both,
    t12-dim 0.8s var(--ease-standard) var(--tship) forwards;
}
/* 항적 마스크와 선박은 같은 지연·같은 길이·선형 진행. 선박이 앞서고 점선이 뒤따른다 */
.t12.anim.in .m-wake {
  animation: t12-draw var(--dur) linear var(--d) forwards;
}
.t12.anim.in .m-ship {
  animation: t12-sail var(--dur) linear var(--d) forwards;
}
/* 항적: 배가 입항하면 오더 호와 같은 농도로 옅어진다 */
.t12.anim.in .m-sea {
  animation: t12-dim 0.8s var(--ease-standard) var(--a) forwards;
}
@keyframes t12-blink {
  0% {
    opacity: 0;
    transform: scale(0.6);
    transform-box: fill-box;
    transform-origin: center;
  }
  25% {
    opacity: 1;
    transform: scale(1.3);
    transform-box: fill-box;
    transform-origin: center;
  }
  45% {
    opacity: 0.15;
    transform: scale(1);
    transform-box: fill-box;
    transform-origin: center;
  }
  65% {
    opacity: 1;
    transform: scale(1.15);
    transform-box: fill-box;
    transform-origin: center;
  }
  82% {
    opacity: 0.25;
    transform: scale(1);
    transform-box: fill-box;
    transform-origin: center;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    transform-box: fill-box;
    transform-origin: center;
  }
}
@keyframes t12-pulse {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.15;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.15;
  }
  100% {
    opacity: 1;
  }
}
@keyframes t12-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes t12-dim {
  to {
    opacity: 0.35;
  }
}
/* 도착하면 배는 사라지고(입항) 바이어 점이 두 번 깜빡인다. 항적만 남는다 */
@keyframes t12-sail {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t12.anim .mk.blink {
    opacity: 1;
    animation: none;
  }
  .t12.anim .m-arc.draw {
    stroke-dashoffset: 0;
    animation: none;
    opacity: 0.35;
  }
  .t12.anim .m-wake {
    stroke-dashoffset: 0;
    animation: none;
  }
  .t12.anim .m-sea {
    animation: none;
    opacity: 0.35;
  }
  .t12.anim .m-ship {
    animation: none;
    opacity: 0;
  }
}

/* 그리드 조정(2026.09.16 대표 지시): 히어로 우측 블록과 O1 섹션 헤더를 왼쪽으로, 본문 블록을 오른쪽으로 확장 */
.hero .grid-span-four.grid-start-eight.hero-s {
  grid-column: 8 / span 5;
}
.o1 .grid-span-five.grid-start-eight.sec-side {
  grid-column: 8 / span 5;
  align-self: start;
}
.o1 .grid-span-eight.prose {
  grid-column: span 10;
  max-width: none;
}
@media (max-width: 1023px) {
  .hero .grid-span-four.grid-start-eight.hero-s,
  .o1 .grid-span-five.grid-start-eight.sec-side,
  .o1 .grid-span-eight.prose {
    grid-column: span 12;
  }
}
.o1map {
  margin: 40px 0 8px;
}
.o1map .t12 {
  width: 100%;
}
.o1map .t12m {
  display: none;
}
.o1map .t12t {
  display: none;
}
/* 모바일에서는 SVG 안의 범례가 축소되어 읽히지 않으므로 아래에 평면 목록으로 대체한다 */
.o1map-leg {
  display: none;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  gap: 6px 18px;
  flex-wrap: wrap;
}
.o1map-leg li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--n-600);
}
.o1map-leg i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}
.o1map-leg .lg-b {
  border: 1.2px solid var(--n-800);
  border-radius: 50%;
}
.o1map-leg .lg-v {
  background: var(--acc-purple-deep);
  border-radius: 50%;
}
.o1map-leg .lg-f {
  background: var(--acc-mint-deep);
}
.o1map-leg .lg-s {
  width: 14px;
  height: 0;
  border-top: 1.5px dashed var(--n-800);
}
@media (max-width: 767px) {
  /* 모바일 세로형 T12M으로 교체(2026.09.19, 결정 199). 가로 스크롤 지도는 폐기 */
  .o1 {
    overflow-x: clip;
  }
  .o1map {
    margin: 28px 0 0;
  }
  .o1map .t12:not(.t12m) {
    display: none;
  }
  .o1map .t12m {
    display: block;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
  }
  .o1map .t12 .mk {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.2);
  }
  .o1map .t12 .m-arc.bv {
    stroke-width: 1.8;
  }
  .o1map .t12 .m-arc.vf {
    stroke-width: 2.2;
  }
  .o1map .t12 .m-leg {
    display: none;
  }
  .o1map-leg {
    display: flex;
    position: sticky;
    left: 0;
  }
}
/* 태블릿(600~767px): 세로형 T12M과 같은 축척으로 지도 크롭만 좌우로 넓힌 T12T(2026.10.04, 결정 416).
   720px 이상에서는 높이를 세로형과 같은 452px로 고정하고 넘치는 좌우만 잘라 낸다 */
@media (min-width: 600px) and (max-width: 767px) {
  .o1map .t12.t12m {
    display: none;
  }
  .o1map .t12.t12t {
    display: block;
    width: 100%;
  }
}
@media (min-width: 720px) and (max-width: 767px) {
  .o1map .t12.t12t {
    height: 452px;
  }
}
/* ---- D-O1a 조립 모션: 부속이 사방에서 날아와 제자리에 앉는다. 전체 1초 이내 ---- */
.dia#do1a .iso-ic .pc {
  opacity: 0;
  transform: translate(var(--dx), var(--dy));
}
.dia#do1a.in .iso-ic .pc {
  animation: o1asm 760ms var(--ease-enter) forwards;
  animation-delay: calc(var(--p, 0) * 220ms + var(--i) * 52ms);
}
.dia#do1a.done .iso-ic .pc {
  opacity: 1;
  transform: none;
  animation: none;
}
@keyframes o1asm {
  from {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
/* 세 판넬은 도달 시 동시에 조립된다(2026.09.19 대표 지시. 이전 220ms 시차 폐기). 전체 약 1.3초 */
.dia#do1a .t8-n {
  --p: 0;
}
/* 판넬 클릭 시 그 판넬만 재조립. .done보다 특이도가 높아 고정 상태를 이긴다 */
.dia#do1a .t8-n.re .iso-ic .pc {
  opacity: 0;
  animation: o1asm-re 760ms var(--ease-enter) forwards;
  animation-delay: calc(var(--i) * 52ms);
}
/* 재생용 키프레임은 이름만 다른 복제본이다. 같은 이름(o1asm)이면 .in 상태(도달 후 ~5.6초, .done 전)에서
   animation-name이 바뀌지 않아 브라우저가 재시작하지 않는다. 그 구간의 클릭 무반응 원인 (2026.09.19) */
@keyframes o1asm-re {
  from {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dia#do1a .iso-ic .pc {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* ---- D-O1b 콜아웃 모션: 마커에서 상자가 올라오고 그 사이를 선이 잇는다 ---- */
.dia#do1b .c-mk {
  opacity: 0;
  transform: scale(0.3);
}
.dia#do1b .c-line {
  transform: scaleY(0);
  transform-origin: bottom;
}
.dia#do1b .c-cd {
  opacity: 0;
  transform: translateY(calc(var(--g) * 0.8));
}
.dia#do1b.in .c-mk {
  animation: o1mk 320ms var(--ease-enter) forwards;
  animation-delay: calc(var(--i) * 160ms);
}
.dia#do1b.in .c-line {
  animation: o1leg 340ms var(--ease-standard) forwards;
  animation-delay: calc(160ms + var(--i) * 160ms);
}
.dia#do1b.in .c-cd {
  animation: o1rise 460ms var(--ease-enter) forwards;
  animation-delay: calc(240ms + var(--i) * 160ms);
}
.dia#do1b.done .c-mk,
.dia#do1b.done .c-cd {
  opacity: 1;
  transform: none;
  animation: none;
}
.dia#do1b.done .c-line {
  transform: scaleY(1);
  animation: none;
}
/* 모바일 세로형: 다리선은 마커에서 아래로 자라고 카드는 위에서 내려온다(2026.09.19) */
.dia#do1b .c-m .c-line {
  transform-origin: top;
}
.dia#do1b .c-m .c-cd {
  transform: translateY(-14px);
}
.dia#do1b .c-m .c-line.dn {
  transform-origin: bottom;
}
.dia#do1b.done .c-m .c-cd {
  transform: none;
} /* 위 모바일 초기값(-14px)이 .done 규칙과 같은 우선순위라 뒤에서 이겨 버리던 문제(2026.09.19) */
@keyframes o1mk {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes o1leg {
  to {
    transform: scaleY(1);
  }
}
@keyframes o1rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dia#do1b .c-mk,
  .dia#do1b .c-cd {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .dia#do1b .c-line {
    transform: scaleY(1);
    animation: none;
  }
}
/* O1 전용: 라이브러리 템플릿을 .dia 캔버스 안에 앉힌다 */
.dia .t8 {
  padding: 0;
}
/* 도식 머리글과 첫 아이브로가 붙지 않도록 간격을 확보한다. 모바일에서는 머리글이 2행으로 접힌다 */
.dia .dia-head {
  margin-bottom: 32px;
}
@media (max-width: 767px) {
  .dia .dia-head {
    display: block;
    height: auto;
    margin-bottom: 28px;
  }
  .dia .dia-head .dcap {
    margin-top: 6px;
  }
}
.dia .t8-num {
  font-size: 48px;
}
.dia .c-stage {
  border-radius: 4px;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  min-height: 520px;
}
.t11wrap {
  margin-top: 32px;
}
/* 아래 T11 보정은 라이트 배경인 O1에만 적용한다. 범위를 열면 다크 섹션의 표가 저대비로 뒤집힌다 */
.o1 .t11.wide .t11-r {
  grid-template-columns: 160px 1fr 120px;
}
.o1 .t11-h span {
  color: var(--muted);
}
.dia .c-stage {
  min-height: 600px;
}
.o1 .t11.wide .t11-v {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--n-200);
}
.o1 .t11 {
  border-top-color: var(--text);
}
.o1 .t11-r {
  border-bottom-color: var(--line);
}
.o1 .t11-l {
  color: var(--text);
}
.o1 .t11-d {
  color: var(--text);
}
.o1 .t11.wide .t11-v {
  color: var(--muted);
}
@media (max-width: 767px) {
  .o1 .t11.wide .t11-r {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .o1 .t11.wide .t11-v {
    text-align: left;
  }
}
/* ---- D-O1a 모바일 세로형(2026.09.19, 결정 200): 카드 3장, 좌 픽토그램 상자 / 우 번호·아이브로·제목·설명. 카드 사이 세로 커넥터.
   마크업은 데스크톱과 같다(T8). diakit 기본 모바일 규칙(번호 좌·그림 우 2행)을 덮어쓴다 ---- */
@media (max-width: 767px) {
  .dia#do1a .t8 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dia#do1a .t8-n {
    display: grid;
    grid-template-columns: 132px 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    row-gap: 0;
    grid-template-areas: "vis eb" "vis tt" "vis dd";
    align-items: start;
    position: relative;
    padding: 0 0 22px;
  }
  .dia#do1a .t8-n + .t8-n {
    padding-top: 22px;
  }
  .dia#do1a .t8-n + .t8-n::before {
    content: "";
    position: absolute;
    left: 66px;
    top: -11px;
    width: 1px;
    height: 22px;
    background: var(--line);
  }
  .dia#do1a .t8-n:last-child {
    padding-bottom: 0;
  }
  .dia#do1a .t8-eb {
    grid-area: eb;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
  }
  .dia#do1a .t8-eb::before {
    content: attr(data-n);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--muted);
  }
  .dia#do1a .t8-num {
    display: none;
  }
  .dia#do1a .t8-vis {
    grid-area: vis;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    display: flex;
    align-items: center;
  }
  .dia#do1a .t8-vis .iso-ic {
    transform: scale(1.55);
    transform-origin: center;
  }
  .dia#do1a .t8-t {
    grid-area: tt;
    margin-top: 6px;
    font-size: 16px;
    line-height: 22px;
  }
  .dia#do1a .t8-d {
    grid-area: dd;
    margin-top: 6px;
    font-size: 13px;
    line-height: 20px;
  }
}
/* ---- O1 도식 라이트 변환(시안). D-O1a(T8 번호 체인 + 아이소 픽토그램) · D-O1b(C 스테이지 콜아웃)
   다크 토큰을 라이트 시맨틱으로 재매핑한다. 도식 안 색 값은 tokens.css 램프만 쓴다.
   변형 A(.lt-a): 흰 카드(surface) + line 테두리 + 옅은 점 격자
   변형 B(.lt-b): 카드 없음. 섹션 배경에 동화되고 상단 hairline만 남긴다. B 채택(2026.09.18 대표 결정) ---- */

/* 프레임 */
.o1 .dia.lt {
  color: var(--text);
}
.o1 .dia.lt-b {
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--line);
}
.o1 .dia.lt .dcap {
  color: var(--muted);
}
.o1 .dia.lt .dia-foot {
  border-top-color: var(--line);
}
.o1 .dia.lt .dlink {
  color: var(--text);
}
.o1 .dia.lt .dlink:hover,
.o1 .dia.lt .dlink:focus-visible {
  color: var(--accent-text);
}
.o1 .dia.lt .dlink:focus-visible {
  outline-color: var(--accent-text);
}

/* ---- D-O1a: T8 ---- */
.o1 .dia.lt .t8-eb {
  color: var(--accent-text);
}
.o1 .dia.lt .t8-num {
  color: var(--text);
}
.o1 .dia.lt .t8-vis {
  border-color: var(--line);
  background: var(--surface-2);
}
.o1 .dia.lt-b .t8-vis {
  background: var(--surface);
}
.o1 .dia.lt .t8-t {
  color: var(--text);
}
.o1 .dia.lt .t8-d {
  color: var(--muted);
}
/* 아이소 픽토그램: 면은 n-0/n-100/n-200 3단, 윤곽은 n-600. 액센트는 라이트 대비용 deep 계열 */
.o1 .dia.lt .iso-ic .ic {
  fill: var(--n-100);
  stroke: var(--n-600);
}
.o1 .dia.lt .iso-ic .ic.f-t {
  fill: var(--n-0);
}
.o1 .dia.lt .iso-ic .ic.f-l {
  fill: var(--n-100);
}
.o1 .dia.lt .iso-ic .ic.f-r {
  fill: var(--n-200);
}
.o1 .dia.lt .iso-ic .ic-lt {
  fill: var(--n-0);
  stroke: var(--n-600);
}
.o1 .dia.lt .iso-ic .ic-dk {
  fill: var(--n-300);
  stroke: var(--n-700);
}
.o1 .dia.lt .iso-ic .ic-sheet {
  fill: var(--n-0);
  stroke: var(--n-600);
}
.o1 .dia.lt .iso-ic .ic-acc {
  fill: var(--accent-tint);
  stroke: var(--acc-purple-deep);
}
.o1 .dia.lt .iso-ic .ic-roof {
  fill: var(--n-100);
  stroke: var(--n-600);
}
.o1 .dia.lt .iso-ic .ic-roof-t {
  fill: var(--n-0);
  stroke: var(--n-600);
}
.o1 .dia.lt .iso-ic .ic-roof-s {
  fill: var(--n-200);
  stroke: var(--n-600);
}
.o1 .dia.lt .iso-ic .ic-win {
  fill: rgba(97, 76, 213, 0.14);
  stroke: var(--acc-purple-deep);
  stroke-opacity: 0.8;
}
.o1 .dia.lt .iso-ic .ic-door {
  fill: var(--n-300);
  stroke: var(--n-700);
}
.o1 .dia.lt .iso-ic .ic-floor {
  stroke: var(--acc-purple-deep);
  stroke-opacity: 0.45;
}
.o1 .dia.lt .iso-ic .ic-arrow {
  fill: var(--acc-purple-deep);
}
.o1 .dia.lt .iso-ic .il {
  stroke: var(--n-600);
}
.o1 .dia.lt .iso-ic .il-thin {
  stroke: var(--n-400);
}
.o1 .dia.lt .iso-ic .il-grid {
  stroke: var(--acc-purple-deep);
  stroke-opacity: 0.22;
}
.o1 .dia.lt .iso-ic .il-bold {
  stroke: var(--n-800);
}
.o1 .dia.lt .iso-ic .il-belt {
  stroke: var(--n-400);
}

/* ---- D-O1b: C 스테이지 ---- */
.o1 .dia.lt .c-stage {
  background: var(--surface-2);
}
.o1 .dia.lt-b .c-stage {
  background: var(--n-100);
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
}
.o1 .dia.lt .c-bt {
  border-color: rgba(97, 76, 213, 0.2);
  background: rgba(255, 255, 255, 0.55);
}
.o1 .dia.lt .c-bt span {
  color: var(--n-500);
}
.o1 .dia.lt .c-bt i {
  background: rgba(97, 76, 213, 0.28);
}
.o1 .dia.lt .c-panel {
  border-color: var(--n-300);
  background: var(--surface)
    repeating-linear-gradient(
      0deg,
      rgba(15, 15, 28, 0.03) 0 1px,
      transparent 1px 6px
    );
}
.o1 .dia.lt .c-meta {
  color: var(--n-500);
}
.o1 .dia.lt .c-sys span {
  border-color: var(--line);
  color: var(--n-500);
}
.o1 .dia.lt .c-cn {
  color: var(--n-500);
}
.o1 .dia.lt .c-ct {
  color: var(--n-700);
}
.o1 .dia.lt .c-r {
  border-color: var(--line);
  background: var(--n-50);
}
.o1 .dia.lt .c-r i {
  background: var(--acc-purple-deep);
  opacity: 0.7;
}
.o1 .dia.lt .c-r b {
  background: var(--n-200);
}
.o1 .dia.lt .c-band {
  border-top-color: var(--line);
}
.o1 .dia.lt .c-bdl {
  color: var(--n-500);
}
.o1 .dia.lt .c-bdv {
  color: var(--n-700);
}
/* 콜아웃: 라이트에서는 진한 윤곽(n-800)으로 위계를 세운다. 다크의 흰 윤곽과 대칭 */
.o1 .dia.lt .c-cd {
  background: var(--surface);
  border-color: var(--n-800);
}
.o1 .dia.lt .c-cl {
  color: var(--text);
}
.o1 .dia.lt .c-cs {
  color: var(--muted);
}
.o1 .dia.lt .c-line {
  background: var(--n-800);
  opacity: 0.7;
}
.o1 .dia.lt .c-mk {
  border-color: var(--n-800);
}
@media (max-width: 1023px) {
  .o1 .dia.lt .c-cd {
    background: rgba(251, 252, 253, 0.94);
  }
  .o1 .dia.lt .c-stage {
    min-height: 0;
  }
}
/* 라이트에서는 열 골격이 .40으로는 사라진다. .62까지 올린다 */
.o1 .dia.lt .c-col {
  opacity: 0.62;
}
.o1 .dia.lt .c-bt {
  opacity: 0.55;
}

/* ===== O2 오더 생애주기 =====
   배경 문법은 O4와 같다. 라이트로 제시하고, 도식만 다크 스테이지 밴드에 올리고, 라이트로 닫는다.
   다크는 섹션 구분이 아니라 도식이 놓이는 무대라는 뜻으로만 쓴다 (2026.09.17 대표 결정 B안) */
.o2 {
  padding-block: 0;
}
/* 그리드: O1과 같은 비대칭. 헤더 7컬럼, 리드 우측 5컬럼, 본문 10컬럼 */
.o2 .grid-span-five.grid-start-eight.sec-side {
  grid-column: 8 / span 5;
  align-self: start;
}
.o2 .grid-span-eight.prose {
  grid-column: span 10;
  max-width: none;
}
@media (max-width: 1023px) {
  .o2 .grid-span-five.grid-start-eight.sec-side,
  .o2 .grid-span-eight.prose {
    grid-column: span 12;
  }
}
/* 스테이지 밴드: 주장 한 줄이 도식을 받는다 */
.o2 .stage-head {
  margin-bottom: 8px;
}
.o2 .stage .dia {
  margin: 40px 0 0;
}
.o2 .dia-head {
  margin-bottom: 24px;
}
.t4wrap {
  margin: 0;
}
.t4wrap .t4 {
  width: 100%;
  height: auto;
  display: block;
}
.t4wrap .t4m {
  display: none;
}
@media (max-width: 767px) {
  .t4wrap .t4:not(.t4m) {
    display: none;
  }
  .t4wrap .t4m {
    display: block;
    max-width: 375px;
    margin: 0 auto;
  }
}
/* 등장: 굵은 선이 카드 뒤로 흐르고, 선이 닿는 단계의 카드가 밝아졌다가 가라앉는다.
   선 3300ms 1회. 단계 간격 533ms는 선의 머리가 한 단계를 지나는 시간과 같다. 점등이 머리를 따라간다 */
.dia#do2a .t4-wire {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.dia#do2a .t4-warr {
  opacity: 0;
}
.dia#do2a .t4-cg {
  opacity: 0.32;
}
.dia#do2a .t4-flash {
  opacity: 0;
}
.dia#do2a .t4-bind {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.dia#do2a.in .t4-wire {
  animation: o2draw 3300ms linear forwards;
}
.dia#do2a.in .t4-warr {
  animation: o2fade 260ms linear 3300ms forwards;
}
.dia#do2a.in .t4-cg {
  animation: o2wake 420ms var(--ease-standard) forwards;
  animation-delay: calc(140ms + var(--i) * 533ms);
}
.dia#do2a.in .t4-bind {
  animation: o2draw 460ms var(--ease-standard) forwards;
  animation-delay: calc(300ms + var(--i) * 533ms);
}
.dia#do2a.in .t4-flash {
  animation: o2flash 1000ms var(--ease-standard) forwards;
  animation-delay: calc(160ms + var(--i) * 533ms);
}
.dia#do2a.done .t4-wire,
.dia#do2a.done .t4-bind {
  stroke-dashoffset: 0;
  animation: none;
}
.dia#do2a.done .t4-warr,
.dia#do2a.done .t4-cg {
  opacity: 1;
  animation: none;
}
.dia#do2a.done .t4-flash {
  opacity: 0;
  animation: none;
}
@keyframes o2draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes o2fade {
  to {
    opacity: 1;
  }
}
@keyframes o2wake {
  to {
    opacity: 1;
  }
}
@keyframes o2flash {
  0% {
    opacity: 0;
  }
  26% {
    opacity: 1;
  }
  52% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dia#do2a .t4-wire,
  .dia#do2a .t4-bind {
    stroke-dashoffset: 0;
    animation: none;
  }
  .dia#do2a .t4-warr,
  .dia#do2a .t4-cg {
    opacity: 1;
    animation: none;
  }
  .dia#do2a .t4-flash {
    opacity: 0;
    animation: none;
  }
}
/* 원장 표. 라이트 구간이므로 T11 기본값(다크용)을 라이트로 되돌린다 */
.o2tbl {
  margin-top: 32px;
}
.o2 .t11 {
  border-top-color: var(--text);
}
.o2 .t11-r {
  border-bottom-color: var(--line);
}
.o2 .t11.wide .t11-r {
  grid-template-columns: 150px 1fr 64px;
}
.o2 .t11-h span {
  color: var(--muted);
}
.o2 .t11-l {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
}
.o2 .t11-d {
  color: var(--text);
}
.o2 .t11.wide .t11-v {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.o2 > .wrap:last-of-type {
  padding-bottom: 0;
}
@media (max-width: 767px) {
  /* 가로 스크롤 지도는 폐기. 모바일은 T4M 세로형으로 교체(2026.09.19, 결정 201) */
  .o2 {
    overflow-x: clip;
  }
  .t4wrap {
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .o2 .t11-h {
    display: none;
  }
  .o2 .t11.wide .t11-r {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .o2 .t11.wide .t11-v {
    text-align: left;
  }
}

/* ===== O3 현장 데이터. 배경 문법은 O2와 동일 ===== */
.o3 {
  padding-block: 0;
}
.o3 .grid-span-five.grid-start-eight.sec-side {
  grid-column: 8 / span 5;
  align-self: start;
}
.o3 .grid-span-eight.prose {
  grid-column: span 10;
  max-width: none;
}
@media (max-width: 1023px) {
  .o3 .grid-span-five.grid-start-eight.sec-side,
  .o3 .grid-span-eight.prose {
    grid-column: span 12;
  }
}
.o3 .stage-head {
  margin-bottom: 8px;
}
.o3 .stage .dia {
  margin: 40px 0 0;
}
.o3 .dia-head {
  margin-bottom: 24px;
}
.t5wrap .iso {
  width: 100%;
  height: auto;
  display: block;
}
.dia#do3a.done [class^="t5-"] {
  opacity: 1;
  animation: none;
  transform: none;
}
@keyframes o3in {
  to {
    opacity: 1;
  }
}
@keyframes o3up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes o3spray {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 켜질 칸과 꺼질 칸이 서로 뒤집히며 반짝이다가 최종 상태로 멈춘다 */
@keyframes o3twk-lit {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  22% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  54% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  84% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes o3twk-dim {
  0% {
    opacity: 1;
  }
  8% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  38% {
    opacity: 0;
  }
  54% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  84% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dia#do3a [class^="t5-"] {
    opacity: 1;
    animation: none;
    transform: none;
  }
}
/* 계측 대상 표. 라이트 구간이므로 T11 기본값(다크용)을 라이트로 되돌린다 */
.o3tbl {
  margin-top: 32px;
}
.o3 .t11 {
  border-top-color: var(--text);
}
.o3 .t11-r {
  border-bottom-color: var(--line);
}
.o3 .t11.wide .t11-r {
  grid-template-columns: 120px 1fr 120px;
}
.o3 .t11-h span {
  color: var(--muted);
}
.o3 .t11-l {
  color: var(--text);
}
.o3 .t11-d {
  color: var(--text);
}
.o3 .t11.wide .t11-v {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--muted);
}
.o3 > .wrap:last-of-type {
  padding-bottom: 0;
}
@media (max-width: 767px) {
  /* 가로 스크롤 도식은 폐기. 모바일은 T5M 세로형으로 교체(2026.09.19, 결정 202) */
  .o3 {
    overflow-x: clip;
  }
  .t5wrap .iso:not(.t5m) {
    display: none;
  }
  .o3 .t11-h {
    display: none;
  }
  .o3 .t11.wide .t11-r {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .o3 .t11.wide .t11-v {
    text-align: left;
  }
}

/* ===== D-O3a v2 (결정 344): 사이클 막대 2줄 비교 + 시점 표시 ===== */
.t5wrap .s3m {
  display: none;
  width: 100%;
  height: auto;
}
.s3-cap {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.16em;
  fill: var(--n-400);
}
.s3-h {
  font: 500 14px var(--font-mono);
  letter-spacing: 0.18em;
  fill: var(--n-200);
}
.s3-h.hi {
  fill: var(--n-0);
}
.s3-sub {
  font: 400 10px var(--font-mono);
  letter-spacing: 0.12em;
  fill: var(--n-400);
}
.s3-tag {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.14em;
  fill: var(--role-subject);
}
.s3-tag.mute {
  fill: var(--n-400);
}
.s3-tag.hi {
  fill: var(--role-subject);
}
.s3-ax {
  stroke: rgba(221, 221, 227, 0.34);
}
.s3-div {
  stroke: rgba(221, 221, 227, 0.14);
}
.s3-bar.off {
  fill: #2a2a38;
}
.s3-bar.on {
  fill: var(--role-subject);
}
.s3-box {
  fill: none;
  stroke: var(--role-subject);
  stroke-width: 1;
}
.s3-box.dash {
  stroke-dasharray: 3 4;
}
.s3-path {
  fill: none;
  stroke: var(--role-subject);
  stroke-opacity: 0.7;
  stroke-dasharray: 2 5;
}
.s3-pill rect {
  fill: #0c0c17;
  stroke: rgba(221, 221, 227, 0.34);
}
.s3-pill text {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.14em;
  fill: var(--n-0);
}
.s3-pill.hi rect {
  stroke: var(--role-subject);
}
.s3-pill.fill rect {
  fill: var(--role-subject);
  stroke: var(--role-subject);
}
.s3-pill.fill text {
  fill: #0f0f1c;
  font-weight: 700;
}
/* 등장: 막대가 왼쪽부터 차오름(두 줄 동시) → 상자 · 꼬리표 → 점선 → 결과 */
.dia#do3a .s3-bar {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.dia#do3a .a1,
.dia#do3a .a2,
.dia#do3a .a3,
.dia#do3a .a4 {
  opacity: 0;
}
.dia#do3a.in .s3-bar {
  animation: s3bar 320ms var(--ease-enter) forwards;
  animation-delay: calc(200ms + var(--i) * 24ms);
}
.dia#do3a.in .a1 {
  animation: o3in 400ms linear 1900ms forwards;
}
.dia#do3a.in .a2 {
  animation: o3in 400ms linear 2300ms forwards;
}
.dia#do3a.in .a3 {
  animation: o3up 420ms var(--ease-enter) 2600ms forwards;
}
.dia#do3a.in .a4 {
  animation: o3up 420ms var(--ease-enter) 3000ms forwards;
}
.dia#do3a.done .s3-bar,
.dia#do3a.done .a1,
.dia#do3a.done .a2,
.dia#do3a.done .a3,
.dia#do3a.done .a4 {
  opacity: 1;
  animation: none;
  transform: none;
}
@keyframes s3bar {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dia#do3a .s3-bar,
  .dia#do3a .a1,
  .dia#do3a .a2,
  .dia#do3a .a3,
  .dia#do3a .a4 {
    opacity: 1;
    animation: none;
    transform: none;
  }
}
@media (max-width: 767px) {
  .t5wrap .s3d {
    display: none !important;
  }
  .t5wrap .s3m {
    display: block;
    max-width: 375px;
    margin: 0 auto;
  }
  .s3-h {
    font-size: 13px;
  }
}
/* 세로형 변형. 라벨 박스는 한글 위·영문 아래 두 줄로 쌓는다 */
.a-ko.m {
  font-size: 16px;
}
.a-en.m {
  font-size: 10px;
}
.a-ko {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  fill: var(--n-0);
  dominant-baseline: central;
}
.a-en {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  fill: var(--p-300);
  dominant-baseline: central;
}
.a-de {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--n-300);
  text-anchor: end;
  dominant-baseline: central;
}
.a-rail {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  fill: var(--n-400);
  dominant-baseline: central;
  text-anchor: end;
}
.a-dn {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--p-300);
  text-anchor: middle;
  dominant-baseline: central;
}

/* ===== O5 제조지식 자산화. 배경 문법은 O2·O3와 동일 ===== */
/* T1 보조 라벨(.a-en)이 한글 풀이가 되었다. 모노 자간 .1em은 한글에 넓어 .01em, 서체는 산세리프 */
.o5 .a-en {
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  font-size: 11px;
  font-weight: 500;
}
.o5 .a-en.m {
  font-size: 10.5px;
}
.o5 {
  padding-block: 0;
}
.o5 .grid-span-five.grid-start-eight.sec-side {
  grid-column: 8 / span 5;
  align-self: start;
}
.o5 .grid-span-eight.prose {
  grid-column: span 10;
  max-width: none;
}
@media (max-width: 1023px) {
  .o5 .grid-span-five.grid-start-eight.sec-side,
  .o5 .grid-span-eight.prose {
    grid-column: span 12;
  }
}
.o5 .stage-head {
  margin-bottom: 8px;
}
.o5 .stage .dia {
  margin: 40px 0 0;
}
.o5 .dia-head {
  margin-bottom: 24px;
}
.t1wrap .iso {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes o5lay {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.o5 .t11 {
  border-top-color: var(--text);
}
.o5 .t11-r {
  border-bottom-color: var(--line);
}
.o5 .t11.wide .t11-r {
  grid-template-columns: 150px 1fr 120px;
}
.o5 .t11-h span {
  color: var(--muted);
}
.o5 .t11-l {
  color: var(--text);
}
.o5 .t11-d {
  color: var(--text);
}
.o5 .t11.wide .t11-v {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--muted);
}
.o5 > .wrap:last-of-type {
  padding-bottom: 0;
}
/* 위의 .t1wrap .iso{display:block}이 0,2,0이라 .t1m 단독 선택자(0,1,0)로는 눌리지 않는다 */
.t1wrap .t1m {
  display: none;
}
/* 좌우 여백을 두어 5단 전체가 한 화면에 들어오게 한다 */
.o5 .t1wrap {
  display: flex;
  justify-content: center;
}
@media (max-width: 767px) {
  .o5 {
    overflow-x: clip;
  }
  .t1wrap .iso {
    display: none;
  }
  .t1wrap .t1m {
    display: block;
    width: 100%;
  }
  .o5 .t11-h {
    display: none;
  }
  .o5 .t11.wide .t11-r {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .o5 .t11.wide .t11-v {
    text-align: left;
  }
}

/* ===== D-O5a v2: 등각 5단 적층(do5a2.py) ===== */
.s5d {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
  overflow: visible;
}
.s5-pb {
  fill: #0b0c16;
  stroke: rgba(221, 221, 227, 0.16);
  stroke-width: 0.8;
}
.s5-ph {
  fill: url(#s5h);
  stroke: none;
}
.s5m .s5-ph {
  fill: url(#s5hm);
}
.s5-hl {
  stroke: rgba(221, 221, 227, 0.13);
  stroke-width: 1;
}
.s5-pt {
  fill: url(#s5g);
  fill-opacity: 0.95;
  stroke: rgba(221, 221, 227, 0.34);
  stroke-width: 0.9;
}
.s5m .s5-pt {
  fill: url(#s5gm);
}
.s5-pi {
  fill: none;
  stroke: rgba(221, 221, 227, 0.07);
  stroke-width: 0.8;
}
.s5-gl {
  fill: none;
  stroke: rgba(221, 221, 227, 0.045);
  stroke-width: 0.6;
}
.s5-ck {
  fill: none;
  stroke: rgba(221, 221, 227, 0.3);
  stroke-width: 0.9;
  stroke-linecap: round;
}
.s5-pil {
  stroke: rgba(221, 221, 227, 0.2);
  stroke-width: 0.8;
  stroke-dasharray: 1.5 4;
}
.s5-sh {
  fill: #05060c;
  opacity: 0.55;
  filter: blur(8px);
}
.s5-L.top .s5-pt {
  stroke: var(--dia-node);
  stroke-opacity: 0.8;
}
.s5-L.top .s5-ck {
  stroke: var(--dia-node);
  stroke-opacity: 0.9;
}
/* 객체: 윗면 밝게, 앞 왼면 중간, 앞 오른면 어둡게. 접지 그림자, 윗면 베벨, 앞 모서리 하이라이트. 강조는 한 색 */
.s5-shd {
  fill: #04050a;
  opacity: 0.5;
  filter: blur(2.2px);
  stroke: none;
}
.s5-glow {
  fill: var(--dia-node);
  opacity: 0.3;
  filter: blur(9px);
  stroke: none;
}
.s5-b .s5-sd,
.s5-p .s5-sd {
  fill: #0c0d16;
  stroke: rgba(221, 221, 227, 0.16);
  stroke-width: 0.6;
}
.s5-fl {
  fill: #1c1d2b;
}
.s5-fr {
  fill: #11121b;
}
.s5-tp {
  fill: #2b2c3d;
  stroke: rgba(235, 235, 245, 0.3);
  stroke-width: 0.7;
}
.s5-bv {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 0.7;
}
.s5-hi {
  fill: none;
  stroke: rgba(255, 255, 255, 0.36);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s5-b.device .s5-tp {
  fill: #232432;
}
.s5-b.rec .s5-tp {
  fill: #313244;
}
.s5-b.key .s5-tp {
  fill: #2f3042;
}
.s5-b.key .s5-fl {
  fill: #20212f;
}
.s5-b.key .s5-fr {
  fill: #151620;
}
.s5-base {
  fill: none;
  stroke: rgba(221, 221, 227, 0.14);
  stroke-width: 0.7;
}
.s5-eye {
  fill: #0c0d16;
  opacity: 0.75;
}
.s5-p.lk .s5-base {
  stroke: var(--dia-node);
  stroke-opacity: 0.6;
}
.s5-p.lk .s5-eye {
  fill: var(--dia-node);
  opacity: 1;
}
.s5-b.acc .s5-tp,
.s5-p.acc .s5-tp {
  fill: var(--dia-node);
  stroke: rgba(255, 255, 255, 0.6);
}
.s5-b.acc .s5-bv,
.s5-p.acc .s5-bv {
  stroke: rgba(255, 255, 255, 0.28);
}
.s5-b.acc .s5-hi {
  stroke: rgba(255, 255, 255, 0.75);
}
.s5-b.acc .s5-fl {
  fill: var(--dia-node);
  filter: brightness(0.62);
}
.s5-b.acc .s5-fr {
  fill: var(--dia-node);
  filter: brightness(0.42);
}
.s5-b.acc .s5-sd,
.s5-p.acc .s5-sd {
  fill: var(--dia-node);
  filter: brightness(0.48);
  stroke: none;
}
.s5-p.acc .s5-eye {
  fill: #fff;
  opacity: 0.9;
}
.s5-p.acc .s5-base {
  stroke: var(--dia-node);
  stroke-opacity: 0.7;
}
.s5-fr2 {
  fill: none;
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 0.8;
}
.s5-scr {
  fill: #0b0c15;
  stroke: rgba(221, 221, 227, 0.24);
  stroke-width: 0.6;
}
.s5-cur {
  fill: var(--dia-node);
  animation: s5blink 1.1s steps(2, jump-none) infinite;
}
.s5-led {
  fill: var(--dia-node);
}
.s5-led.off {
  fill: rgba(221, 221, 227, 0.28);
}
.s5-dotw {
  fill: #fff;
  opacity: 0.9;
}
.s5-dotw.dim {
  fill: rgba(221, 221, 227, 0.4);
}
.s5-ic {
  fill: none;
  stroke: rgba(235, 235, 245, 0.8);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s5-ic.dim {
  stroke: rgba(221, 221, 227, 0.32);
}
.s5-ic.on {
  stroke: #fff;
  stroke-width: 1.3;
}
.s5-ic.thin {
  stroke-width: 0.9;
  stroke-opacity: 0.75;
}
.s5-cb {
  fill: none;
  stroke: rgba(221, 221, 227, 0.2);
  stroke-width: 0.8;
  stroke-dasharray: 2.5 3;
}
.s5-cb.acc,
.s5-ed.acc {
  stroke: var(--dia-node);
  stroke-opacity: 0.85;
  stroke-dasharray: 2.5 3;
}
.s5-ed {
  fill: none;
  stroke: rgba(221, 221, 227, 0.26);
  stroke-width: 0.8;
}
.s5-ring {
  fill: none;
  stroke: rgba(221, 221, 227, 0.14);
  stroke-width: 0.8;
  stroke-dasharray: 1.5 4;
}
.s5-ring.in {
  stroke: var(--dia-node);
  stroke-opacity: 0.45;
  stroke-dasharray: none;
}
.s5-up {
  stroke: var(--dia-node);
  stroke-width: 1.1;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
  opacity: 0.9;
  animation: s5flow 1.3s linear infinite;
  animation-delay: calc(var(--k) * -0.4s);
}
@keyframes s5flow {
  to {
    stroke-dashoffset: -12;
  }
}
@keyframes s5blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.15;
  }
}
.s5-tray {
  fill: rgba(8, 9, 17, 0.6);
  stroke: rgba(221, 221, 227, 0.2);
  stroke-width: 0.7;
}
.s5-lt {
  font: 500 9.5px var(--font-mono);
  letter-spacing: 0.14em;
  fill: rgba(221, 221, 227, 0.62);
}
.s5-lt.on {
  fill: #fff;
  font-size: 10.5px;
  letter-spacing: 0.12em;
}
.s5-lt.k {
  font: 600 17px var(--font-sans);
  letter-spacing: 0;
  fill: rgba(235, 235, 245, 0.86);
}
.s5-lt.k.on {
  fill: #fff;
}
/* 도식 밖 글자 */
.s5-dot {
  fill: var(--n-400);
}
.s5-ld {
  stroke: rgba(221, 221, 227, 0.3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.s5d .a-rail {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.14em;
  fill: var(--n-500);
  text-anchor: end;
}
.s5d .a-rail .a-dn {
  fill: var(--dia-node);
}
.s5d .a-ko {
  font: 600 18px var(--font-sans);
  letter-spacing: 0.01em;
  fill: var(--dia-text);
  text-anchor: end;
}
.s5d .a-en {
  font: 500 12px var(--font-sans);
  letter-spacing: 0.01em;
  fill: var(--dia-node);
  text-anchor: end;
}
.s5-de {
  display: flex;
  align-items: center;
  height: 46px;
}
.s5-de .a-de {
  margin: 0;
  font: 400 13.5px/21px var(--font-sans);
  color: var(--n-300);
  word-break: keep-all;
}
/* 등장: 아래층부터 한 장씩, 층 이름은 판 뒤에 */
.dia#do5a .s5-L {
  opacity: 0;
  transform: translateY(22px);
}
.dia#do5a .s5-t {
  opacity: 0;
}
.dia#do5a.in .s5-L {
  animation: o5lay 560ms var(--ease-enter) forwards;
  animation-delay: calc(160ms + var(--i) * 200ms);
}
.dia#do5a.in .s5-t {
  animation: s5in 420ms linear forwards;
  animation-delay: calc(520ms + var(--i) * 200ms);
}
.dia#do5a.done .s5-L,
.dia#do5a.done .s5-t {
  opacity: 1;
  transform: none;
  animation: none;
}
@keyframes s5in {
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dia#do5a .s5-L,
  .dia#do5a .s5-t {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .s5-up,
  .s5-cur {
    animation: none;
  }
}
.t1wrap .s5m {
  display: none;
}
@media (max-width: 767px) {
  .t1wrap .s5d {
    display: none;
  }
  .t1wrap .s5m {
    display: block;
    width: 100%;
  }
  .s5m svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .s5-mn {
    font: 500 11px var(--font-mono);
    letter-spacing: 0.08em;
    fill: var(--dia-node);
    text-anchor: end;
  }
  .s5-ml {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    border-top: 1px solid rgba(221, 221, 227, 0.14);
  }
  .s5-ml li {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(221, 221, 227, 0.14);
  }
  .s5-ml .a-dn {
    grid-row: 1 / span 3;
    font: 500 11px/24px var(--font-mono);
    letter-spacing: 0.08em;
    color: var(--dia-node);
  }
  .s5-ml .a-ko {
    font: 600 16px/24px var(--font-sans);
    color: var(--dia-text);
  }
  .s5-ml .a-en {
    font: 500 12px/18px var(--font-sans);
    color: var(--dia-node);
  }
  .s5-ml .a-ko,
  .s5-ml .a-en,
  .s5-ml .a-de {
    grid-column: 2;
    display: block;
  }
  .s5-ml .a-de {
    margin: 6px 0 0;
    font: 400 13.5px/21px var(--font-sans);
    color: var(--n-300);
    word-break: keep-all;
  }
}

/* ===== D1: 내부 8컬럼 120px, 거터 24, 행 48 ===== */
.dia {
  background: var(--dia-canvas);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--dia-text);
  background-image: radial-gradient(
    rgba(221, 221, 227, 0.07) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}
.dia-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: 24px;
  margin-bottom: 24px;
}
.dcap {
  font-size: 13px;
  color: var(--n-400);
}
/* 도식 심층 링크: 구분선은 캔버스 전폭, 클릭 범위는 링크 텍스트와 화살표까지만 */
.dia-foot {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(221, 221, 227, 0.12);
}
.dlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--dia-text);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease-standard);
}
.dlink svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.dlink:hover,
.dlink:focus-visible {
  color: var(--dia-node);
}
.dlink:hover svg {
  transform: translateX(4px);
}
.dlink:focus-visible {
  outline: 2px solid var(--dia-node);
  outline-offset: 4px;
}
.dg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: 88px 72px 88px 72px 88px;
  column-gap: 24px;
  row-gap: 0;
}
.wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}
.nd {
  position: relative;
  height: 88px;
  background: var(--n-900);
  border: 1px solid rgba(221, 221, 227, 0.12);
  border-radius: var(--radius);
  padding: 12px 16px 12px 44px;
}
.nd .ic {
  position: absolute;
  left: 16px;
  top: 14px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--n-400);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nd .t-lab {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--n-400);
  white-space: nowrap;
}
.nd .t-ko {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--dia-text);
  margin-top: 4px;
  white-space: nowrap;
}
.nd .t-mu {
  font-size: 12px;
  line-height: 16px;
  color: var(--n-400);
  margin-top: 4px;
  white-space: nowrap;
}
.dg .office {
  grid-area: 1/1/2/3;
}
.dg .floor {
  grid-area: 1/7/2/9;
}
.dg .cost {
  grid-area: 5/1/6/3;
}
.dg .prod {
  grid-area: 5/7/6/9;
}
.dg .cm {
  grid-area: 3/4/4/6;
  padding: 12px 16px;
  text-align: center;
  border-color: var(--dia-node);
  border-width: 1.5px;
  z-index: 1;
}
.dg .cm .ic {
  position: static;
  display: block;
  margin: 0 auto 4px;
  stroke: var(--dia-node);
}
.dg .cm .t-en {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.1em;
  color: var(--dia-node);
}
.dg .cm .t-cm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--dia-text);
  margin-top: 4px;
  white-space: nowrap;
}
.fob-lab {
  grid-area: 2/1/3/3;
  align-self: end;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--n-400);
  padding-bottom: 8px;
}
.gh {
  grid-column: var(--c);
  grid-row: 3;
  position: relative;
  height: 36px;
  margin-top: calc((var(--r) - 1) * 52px);
  align-self: start;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--dia-canvas);
  border: 1px solid rgba(221, 221, 227, 0.08);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--n-400);
  white-space: nowrap;
  z-index: 1;
  opacity: 0;
}
.gh::before,
.gh.last::after {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  line-height: 1;
  color: var(--n-400);
}
.gh.r::before,
.gh.l:not([style*="--c:1;"])::before {
  content: "+";
  left: -12px;
}
.gh.last::after {
  content: "+";
  right: -12px;
  transform: translate(50%, -50%);
}
.wires .ln {
  fill: none;
  stroke: var(--n-500);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.wires .glow {
  fill: var(--dia-node);
  opacity: 0;
  filter: url(#glow);
}
.nd {
  opacity: 0;
  transform: translateY(8px);
}
.in .nd.office,
.in .nd.floor {
  animation: rise var(--dur-slow) var(--ease-enter) forwards;
}
.in .wires .l1 {
  animation: draw var(--dur-draw) var(--ease-standard) 0.3s forwards;
}
.in .nd.cm {
  animation: rise var(--dur-slow) var(--ease-enter) 1s forwards;
}
.in .wires .glow {
  animation: glow 1s var(--ease-enter) 1.05s forwards;
}
.in .gh.l {
  animation: unfoldL var(--dur-slow) var(--ease-enter) forwards;
  animation-delay: calc(1.2s + var(--d) * 0.12s);
}
.in .gh.r {
  animation: unfoldR var(--dur-slow) var(--ease-enter) forwards;
  animation-delay: calc(1.2s + var(--d) * 0.12s);
}
.in .wires .l2 {
  animation: draw var(--dur-draw) var(--ease-standard) 1.7s forwards;
}
.in .nd.out {
  animation: rise var(--dur-slow) var(--ease-enter) 2.1s forwards;
}
.done .nd,
.done .gh {
  opacity: 1;
  transform: none;
  animation: none;
}
.done .wires .ln {
  stroke-dashoffset: 0;
  animation: none;
}
.done .wires .glow {
  opacity: 0.22;
  animation: none;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes glow {
  to {
    opacity: 0.22;
  }
}
@keyframes unfoldL {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes unfoldR {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nd,
  .gh {
    opacity: 1;
    transform: none;
  }
  .wires .ln {
    stroke-dashoffset: 0;
  }
  .wires .glow {
    opacity: 0.22;
  }
}

/* ===== D2: 두 장부. 내부 8컬럼, 거터 24 ===== */
.d2 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 24px;
  align-items: stretch;
}
.d2 .led {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  background: var(--n-900);
  border: 1px solid rgba(221, 221, 227, 0.12);
  border-radius: var(--radius);
  padding: 20px;
}
.d2 .led.v {
  grid-column: 1/4;
}
.d2 .led.f {
  grid-column: 6/9;
}
.d2 .ctr {
  grid-row: 1;
  grid-column: 4/6;
  align-self: center;
  background: var(--n-900);
  border: 1.5px solid var(--dia-node);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  z-index: 1;
}
.d2 .res {
  grid-row: 2;
  grid-column: 1/9;
  margin-top: 24px;
  background: var(--n-900);
  border: 1px solid rgba(221, 221, 227, 0.12);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
  row-gap: 4px;
}
.l-eye {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--n-400);
}
.l-eye.ac {
  color: var(--dia-node);
}
.l-eye.mu {
  color: var(--n-400);
}
.l-ttl {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--dia-text);
  margin-top: 2px;
}
.brk {
  margin-top: 20px;
  height: 22px;
  position: relative;
}
.brk::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  border: 1px solid var(--n-600);
  border-bottom: 0;
}
.brk.full::before {
  right: 0;
}
.brk.part::before {
  width: 93%;
}
.brk span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.04em;
  color: var(--n-400);
}
.bar {
  display: flex;
  height: 32px;
  margin-top: 6px;
  border-radius: var(--radius);
  overflow: hidden;
}
.sg {
  flex: var(--f) 0 0;
  min-width: 6px;
  position: relative;
}
.sg.flat {
  background: var(--dia-flat);
}
.sg.ok {
  background: var(--dia-ok);
}
.sg.cm {
  background: var(--dia-node);
}
.sg + .sg {
  border-left: 1px solid var(--dia-canvas);
}
.b-cap {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.06em;
  color: var(--dia-node);
  text-align: right;
}
.led.f .b-cap {
  text-align: left;
}
.lg {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.lg li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--n-400);
  margin-bottom: 4px;
}
.sw {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-top: 5px;
}
.sw.flat {
  background: var(--dia-flat-2);
}
.sw.ok {
  background: var(--dia-ok);
}
.sw.cm {
  background: var(--dia-node);
}
.lev {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(221, 221, 227, 0.12);
}
.lev b {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--dia-text);
  margin-top: 2px;
}
.asm {
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--n-400);
}
.fml {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  color: var(--dia-text);
  margin: 10px 0 14px;
}
.opp {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.opp td {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--n-400);
  padding: 4px 0;
  border-top: 1px solid rgba(221, 221, 227, 0.1);
}
.opp td:first-child {
  text-align: left;
  color: var(--n-400);
}
.opp td + td {
  text-align: right;
  color: var(--dia-text);
  width: 44px;
}
.r-txt {
  font-size: 16px;
  line-height: 22px;
  color: var(--dia-text);
  margin-top: 4px;
}
.r-fml {
  grid-row: 3;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--n-400);
}
.d2 .res .l-eye {
  grid-column: 1/2;
}
.r-ok {
  grid-column: 2;
  grid-row: 1/4;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dia-ok);
  white-space: nowrap;
}
/* 결정 349: 등장 모션 중 카드(transform)가 선 위에 그려져 선이 절반만 보이던 문제. 선 레이어를 처음부터 카드 위로 */
.d2 .wires {
  z-index: 2;
}
.d2 .wires .workflow-detail {
  stroke: var(--dia-node);
  stroke-width: 1.25;
}
.d2 .led,
.d2 .ctr,
.d2 .res {
  opacity: 0;
  transform: translateY(8px);
}
.in .d2 .led {
  animation: rise var(--dur-slow) var(--ease-enter) forwards;
}
.in .d2 .ctr {
  animation: rise var(--dur-slow) var(--ease-enter) 0.5s forwards;
}
.in .d2 .wires .workflow-detail {
  animation: draw var(--dur-draw) var(--ease-standard) 0.7s forwards;
}
.in .d2 .res {
  animation: rise var(--dur-slow) var(--ease-enter) 1.1s forwards;
}
.done .d2 .led,
.done .d2 .ctr,
.done .d2 .res {
  opacity: 1;
  transform: none;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .d2 .led,
  .d2 .ctr,
  .d2 .res {
    opacity: 1;
    transform: none;
  }
  .d2 .wires .workflow-detail {
    stroke-dashoffset: 0;
  }
}

/* ===== 4-C 3자 체인: 가로 3열 레일 + 접점 박스 (Option A) ===== */
.chain {
  margin-top: 32px;
}
.a-grid {
  display: grid;
  grid-template-columns: 1fr 184px 1fr 184px 1fr;
  align-items: start;
}
.a-col {
  padding-right: 32px;
}
.a-ic {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--p-700);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  margin-bottom: 16px;
}
.a-step {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.09em;
  color: var(--p-600);
}
.a-nm {
  font-size: 19px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-top: 2px;
}
.a-use {
  font-size: 14px;
  line-height: 22px;
  color: var(--p-700);
  margin: 10px 0 0;
}
.a-if {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding-top: 4px;
  padding-right: 32px;
}
.a-line {
  width: 1px;
  background: rgba(97, 76, 213, 0.25);
}
.a-if .a-line:first-child {
  flex: 0 0 16px;
}
.a-if .a-line:last-child {
  flex: 1;
}
.a-box {
  display: block;
  text-align: center;
  padding: 10px 18px;
  margin: 8px 0;
  border-radius: var(--radius);
  border: 1px solid rgba(97, 76, 213, 0.35);
  background: transparent;
  white-space: nowrap;
}
.a-box b {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--p-700);
}
.a-box i {
  display: block;
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  color: var(--p-600);
  margin-top: 2px;
}
.a-box.on {
  background: var(--p-600);
  border-color: var(--p-600);
}
.a-box.on b {
  color: #fff;
  font-size: 14px;
}
.a-box.on i {
  color: rgba(255, 255, 255, 0.72);
}
.a-dec {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(97, 76, 213, 0.2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--p-700);
}
.a-dec b {
  font-weight: 500;
  background: rgba(97, 76, 213, 0.14);
  padding: 2px 6px;
  border-radius: 3px;
}
.note {
  margin: 24px 0 0;
  max-width: 36em;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

/* ===== 반응형 ===== */

/* ===== 반응형 (O4 전용) ===== */
@media (max-width: 1279px) {
  .dg {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 16px;
  }
  .nd .t-mu {
    display: none;
  }
  .nd {
    height: 72px;
  }
  .dg {
    grid-template-rows: 72px 64px 88px 64px 72px;
  }
  .dg .cm {
    height: 88px;
  }
  .gh {
    padding: 0 8px;
    font-size: 10px;
  }
  .d2 {
    column-gap: 16px;
  }
  .d2 .led,
  .d2 .ctr {
    padding: 16px;
  }
  .d2 .res {
    padding: 16px 20px;
  }
}
@media (max-width: 1023px) {
  /* D1 compact: 6모듈. 벤더 1-3 / 공장 4-6. FOB는 CM과 같은 행: 좌측 칩 2열×3행 (1-2) / CM (3-4) / 우측 칩 2열×3행 (5-6) */
  .dg {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 72px 56px 140px 56px 72px;
    column-gap: 16px;
  }
  .dg .office {
    grid-area: 1/1/2/4;
  }
  .dg .floor {
    grid-area: 1/4/2/7;
  }
  .dg .cost {
    grid-area: 5/1/6/4;
  }
  .dg .prod {
    grid-area: 5/4/6/7;
  }
  .dg .cm {
    grid-area: 3/3/4/5;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .fob-lab {
    grid-area: 2/1/3/3;
  }
  .gh {
    grid-row: 3;
    height: 36px;
    padding: 0 8px;
    font-size: 10px;
  }
  .dg > div.gh:nth-of-type(3) {
    grid-column: 1/2;
    margin-top: 0px;
  }
  .dg > div.gh:nth-of-type(3)::before {
    content: "";
  }
  .dg > div.gh:nth-of-type(3)::after {
    content: "";
    left: auto;
    right: -8px;
    transform: translate(50%, -50%);
    position: absolute;
    top: 50%;
    font-size: 12px;
    color: var(--n-400);
  }
  .dg > div.gh:nth-of-type(4) {
    grid-column: 2/3;
    margin-top: 0px;
  }
  .dg > div.gh:nth-of-type(4)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(4)::after {
    content: "+";
    left: auto;
    right: -8px;
    transform: translate(50%, -50%);
    position: absolute;
    top: 50%;
    font-size: 12px;
    color: var(--n-400);
  }
  .dg > div.gh:nth-of-type(5) {
    grid-column: 1/2;
    margin-top: 52px;
  }
  .dg > div.gh:nth-of-type(5)::before {
    content: "";
  }
  .dg > div.gh:nth-of-type(5)::after {
    content: "";
    left: auto;
    right: -8px;
    transform: translate(50%, -50%);
    position: absolute;
    top: 50%;
    font-size: 12px;
    color: var(--n-400);
  }
  .dg > div.gh:nth-of-type(6) {
    grid-column: 2/3;
    margin-top: 52px;
  }
  .dg > div.gh:nth-of-type(6)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(6)::after {
    content: "+";
    left: auto;
    right: -8px;
    transform: translate(50%, -50%);
    position: absolute;
    top: 50%;
    font-size: 12px;
    color: var(--n-400);
  }
  .dg > div.gh:nth-of-type(7) {
    grid-column: 1/2;
    margin-top: 104px;
  }
  .dg > div.gh:nth-of-type(7)::before {
    content: "";
  }
  .dg > div.gh:nth-of-type(7)::after {
    content: "";
    left: auto;
    right: -8px;
    transform: translate(50%, -50%);
    position: absolute;
    top: 50%;
    font-size: 12px;
    color: var(--n-400);
  }
  .dg > div.gh:nth-of-type(8) {
    grid-column: 2/3;
    margin-top: 104px;
  }
  .dg > div.gh:nth-of-type(8)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(8)::after {
    content: "+";
    left: auto;
    right: -8px;
    transform: translate(50%, -50%);
    position: absolute;
    top: 50%;
    font-size: 12px;
    color: var(--n-400);
  }
  .dg > div.gh:nth-of-type(10) {
    grid-column: 5/6;
    margin-top: 0px;
  }
  .dg > div.gh:nth-of-type(10)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(11) {
    grid-column: 6/7;
    margin-top: 0px;
  }
  .dg > div.gh:nth-of-type(11)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(12) {
    grid-column: 5/6;
    margin-top: 52px;
  }
  .dg > div.gh:nth-of-type(12)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(13) {
    grid-column: 6/7;
    margin-top: 52px;
  }
  .dg > div.gh:nth-of-type(13)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(14) {
    grid-column: 5/6;
    margin-top: 104px;
  }
  .dg > div.gh:nth-of-type(14)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(15) {
    grid-column: 6/7;
    margin-top: 104px;
  }
  .dg > div.gh:nth-of-type(15)::before {
    content: "+";
    left: -8px;
  }
  /* D2 compact: 6모듈. 장부 1-3 / 4-6 병렬, 공유 CM은 하단 중앙(2-6), 합의 바 전폭 */
  .d2 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 16px;
  }
  .d2 .led.v {
    grid-column: 1/4;
  }
  .d2 .led.f {
    grid-column: 4/7;
  }
  .d2 .ctr {
    grid-row: 2;
    grid-column: 2/6;
    align-self: start;
    margin-top: 56px;
  }
  .d2 .res {
    grid-row: 3;
    grid-column: 1/7;
  }
}
@keyframes unfoldU {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes unfoldD {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 639px) {
  .a-grid {
    grid-template-columns: 1fr;
  }
  .a-col {
    padding: 20px 0 0;
  }
  .a-if {
    flex-direction: row;
    height: auto;
    padding: 16px 0;
    gap: 12px;
  }
  .a-if .a-line {
    width: auto;
    height: 1px;
    flex: 1;
    min-height: 1px;
  }
  .a-if .a-line:first-child {
    flex: 0 0 16px;
  }
  .a-box {
    margin: 0;
  }
  /* D2 mobile: 단일 컬럼 적층. 벤더 → 공유 CM → 공장 → 합의 */
  .d2 {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .d2 .led.v {
    grid-area: 1/1/2/2;
  }
  .d2 .ctr {
    grid-area: 2/1/3/2;
    align-self: stretch;
    margin: 56px 0 0;
  }
  .d2 .led.f {
    grid-area: 3/1/4/2;
    margin-top: 56px;
  }
  .d2 .res {
    grid-area: 4/1/5/2;
    grid-template-columns: 1fr;
  }
  .r-ok {
    grid-column: 1;
    grid-row: 4;
    margin-top: 8px;
  }
  .led.f .b-cap,
  .b-cap {
    text-align: left;
  }
  /* 390px에서는 좌우 병렬이 물리적으로 불가(모듈 47px). 칩 스트립을 그래프 아래 3행×4로 */
  .dg {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 8px;
    grid-template-rows: auto 32px 88px 32px auto 16px 24px 32px 32px 32px 32px;
  }
  .dg .office {
    grid-area: 1/1/2/7;
  }
  .dg .floor {
    grid-area: 1/7/2/13;
  }
  .dg .cost {
    grid-area: 5/1/6/7;
  }
  .dg .prod {
    grid-area: 5/7/6/13;
  }
  .nd {
    height: auto;
    min-height: 64px;
    padding: 10px 12px 10px 36px;
  }
  .nd .ic {
    left: 12px;
    top: 12px;
  }
  .nd .t-lab {
    font-size: 10px;
    letter-spacing: 0.06em;
    white-space: normal;
  }
  .nd .t-ko {
    white-space: normal;
    font-size: 13px;
    line-height: 18px;
  }
  .dg .cm {
    grid-area: 3/2/4/12;
    height: 88px;
  }
  .fob-lab {
    grid-area: 7/1/8/13;
    align-self: center;
    padding: 0;
  }
  .fob-lab::after {
    content: " · 12 components besides CM";
  }
  .gh {
    height: 28px;
    padding: 0 8px;
    font-size: 10px;
    align-self: center;
  }
  .in .gh.l,
  .in .gh.r {
    animation-name: unfoldU;
  }
  .dg > div.gh:nth-of-type(3) {
    grid-area: 8/1/9/5;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(3)::before {
    content: "";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(3)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(4) {
    grid-area: 8/5/9/9;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(4)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(4)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(5) {
    grid-area: 8/9/9/13;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(5)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(5)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(6) {
    grid-area: 9/1/10/5;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(6)::before {
    content: "";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(6)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(7) {
    grid-area: 9/5/10/9;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(7)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(7)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(8) {
    grid-area: 9/9/10/13;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(8)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(8)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(10) {
    grid-area: 10/1/11/5;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(10)::before {
    content: "";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(10)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(11) {
    grid-area: 10/5/11/9;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(11)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(11)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(12) {
    grid-area: 10/9/11/13;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(12)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(12)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(13) {
    grid-area: 11/1/12/5;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(13)::before {
    content: "";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(13)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(14) {
    grid-area: 11/5/12/9;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(14)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(14)::after {
    content: "";
  }
  .dg > div.gh:nth-of-type(15) {
    grid-area: 11/9/12/13;
    margin-top: 0;
  }
  .dg > div.gh:nth-of-type(15)::before {
    content: "+";
    left: -8px;
  }
  .dg > div.gh:nth-of-type(15)::after {
    content: "";
  }
} /* 모바일: 도식 머리글 2줄 분리(라벨 / 캡션). 데스크톱의 height:24px 한 줄 배치가 375px에서 겹치던 문제(2026.09.19, 결정 203) */
@media (max-width: 767px) {
  .o4 .dia-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 4px;
    margin-bottom: 16px;
  }
  .o4 .dia {
    padding: 16px;
  }
}
/* D-O4b 모바일 조밀화(2026.09.19, 결정 203): 골격(벤더 → 공유 CM → 공장 → 합의) 유지, 여백·막대·연결 간격만 줄여 약 900px */
@media (max-width: 639px) {
  .d2 .led {
    padding: 14px;
  }
  .d2 .ctr {
    margin: 36px 0 0;
    padding: 14px 12px;
  }
  .d2 .led.f {
    margin-top: 36px;
  }
  .d2 .res {
    margin-top: 16px;
    padding: 14px 16px;
  }
  .brk {
    margin-top: 12px;
    height: 20px;
  }
  .bar {
    height: 22px;
  }
  .lg {
    margin-top: 8px;
  }
  .lg li {
    margin-bottom: 2px;
    font-size: 11.5px;
    line-height: 16px;
  }
  .lev {
    padding-top: 10px;
  }
  .lev b {
    font-size: 15px;
    line-height: 20px;
  }
  .fml {
    margin: 8px 0 10px;
  }
  .opp {
    margin-bottom: 8px;
  }
}
.o4 {
  overflow-x: clip;
} /* 1024px에서 D-O4a 칩의 + 의사요소가 3px 넘쳐 가로 스크롤을 만들던 것 차단(2026.09.19) */

/* ---- 회로도 관계망 결(circuitkit, ERD B안). 다크 구간 배경 ---- */
.hero-rule,
.stage-rule {
  overflow: hidden;
}
/* 룰 레이어 전폭(뷰포트 폭)에 건다. 2560 뷰박스가 화면 폭에 맞춰 축소되고 높이는 폭의 900/2560 */
.cx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 스테이지에서는 상단(주장 문장 뒤)에 걸고 아래(도식 자리)로 옅어진다. 페이드 위치는 뷰포트 폭 기준 */
.stage-rule .cx {
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    rgba(0, 0, 0, 0.6) 18vw,
    transparent 34vw
  );
  mask-image: linear-gradient(
    180deg,
    #000 0,
    rgba(0, 0, 0, 0.6) 18vw,
    transparent 34vw
  );
}
@media (max-width: 767px) {
  .cx {
    display: none;
  }
}

.mvx {
  display: none;
}
@media (max-width: 767px) {
  #do2a .t4m,
  #do1b .c-m {
    display: none !important;
  }
  .mvx {
    display: block;
  }
  .mv2a .sc {
    list-style: none;
    margin: 0 0 0 6px;
    padding: 0 0 0 18px;
    border-left: 1.5px solid #7168d4;
  }
  .mv2a .st {
    position: relative;
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid #25252f;
    border-radius: 6px;
    background: #141521;
  }
  .mv2a .st:last-child {
    margin-bottom: 0;
  }
  .mv2a .st::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0f0f1c;
    border: 2px solid #948efd;
  }
  .mv2a .st-h {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .mv2a .sn {
    font: 11px var(--font-mono);
    color: #948efd;
  }
  .mv2a .sname {
    font-weight: 600;
    font-size: 14px;
    color: #eff0f4;
    letter-spacing: 0.02em;
  }
  .mv2a .chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .mv2a .chips li {
    font: 10px/14px var(--font-mono);
    letter-spacing: 0.03em;
    color: #c3c3cb;
    border: 1px solid #373740;
    border-radius: 4px;
    padding: 5px 8px;
  }
  .mv2a .chips li b {
    display: block;
    font-weight: 500;
    color: #73747d;
    font-family: var(--font-sans);
    font-size: 9.5px;
    letter-spacing: 0;
  }
  .mv2a .chips li.on {
    border-color: #948efd;
    background: rgba(148, 142, 253, 0.12);
    color: #eff0f4;
  }
  .mv2a .chips li.on b {
    color: #948efd;
  }
  .mv1b .tri {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .mv1b .tc {
    background: #fff;
    border: 1px solid #dddde3;
    border-radius: 6px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .mv1b .sn {
    font: 11px var(--font-mono);
    color: #5a3ff5;
  }
  .mv1b .nm {
    font-weight: 600;
    font-size: 14px;
    color: #25252f;
  }
  .mv1b .tg {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 6px;
  }
  .mv1b .tg i {
    font: normal 8.5px var(--font-mono);
    color: #55556a;
    border: 1px solid #dddde3;
    border-radius: 3px;
    padding: 2px 4px;
  }
  .mv1b .frl {
    margin-top: 12px;
    background: #fff;
    border: 1px solid #dddde3;
    border-radius: 6px;
    padding: 4px 12px;
  }
  .mv1b .frl-h {
    font: 10px var(--font-mono);
    color: #5a3ff5;
    letter-spacing: 0.06em;
    padding: 10px 0 4px;
  }
  .mv1b .fl {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #eff0f4;
  }
  .mv1b .frl-h + .fl {
    border-top: 0;
  }
  .mv1b .wh {
    font: 10px var(--font-mono);
    color: #5a3ff5;
    width: 52px;
    flex: 0 0 52px;
    padding-top: 2px;
  }
  .mv1b .fl b {
    display: block;
    font-size: 13px;
    color: #25252f;
  }
  .mv1b .fl span {
    display: block;
    font-size: 12px;
    line-height: 17px;
    color: #55556a;
  }
  .mv1b .fl b {
    line-height: 19px;
  }
  .mv1b .site-footer {
    margin: 14px 0 0;
    border-top: 1px solid #25252f;
  }
  .mv1b .site-footer div {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #dddde3;
  }
  .mv1b .site-footer dt {
    font: 10px var(--font-mono);
    color: #9797a0;
    width: 44px;
    flex: 0 0 44px;
    padding-top: 2px;
  }
  .mv1b .site-footer dd {
    margin: 0;
    font-size: 12.5px;
    line-height: 18px;
    color: #55556a;
  }
  .mv1b .site-footer dd b {
    display: block;
    color: #25252f;
    font-weight: 500;
  }
}

@keyframes mvUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mvIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mvDraw {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes mvX {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mvPop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  70% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .dia:not(.in) .mvx .st,
  .dia:not(.in) .mvx .chips li,
  .dia:not(.in) .mvx .tc,
  .dia:not(.in) .mvx .fl,
  .dia:not(.in) .mvx .site-footer div {
    opacity: 0;
  }
  /* D-O2a: 척추선이 위에서 아래로 그려지고 단계 카드가 차례로, 칩은 카드 뒤에 */
  .mv2a .sc {
    position: relative;
    border-left-color: transparent;
  }
  .mv2a .sc::before {
    content: "";
    position: absolute;
    left: -1.5px;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: #7168d4;
    transform-origin: top;
  }
  .dia.in:not(.done) .mv2a .sc::before {
    animation: mvDraw 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) both;
  }
  .dia.in:not(.done) .mv2a .st {
    animation: mvUp 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--k) * 0.22s);
  }
  .dia.in:not(.done) .mv2a .chips li {
    animation: mvIn 0.4s ease both;
    animation-delay: calc(var(--k) * 0.22s + 0.25s + var(--j) * 0.06s);
  }
  .dia.in:not(.done) .mv2a .chips li.on {
    animation: mvPop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--k) * 0.22s + 0.25s);
  }
  /* D-O1b: 3개 주체가 차례로, 수작업 구간이 한 줄씩 들어온다 */
  .dia.in:not(.done) .mv1b .tc {
    animation: mvUp 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--k) * 0.15s);
  }
  .dia.in:not(.done) .mv1b .fl {
    animation: mvX 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(0.6s + var(--k) * 0.16s);
  }
  .dia.in:not(.done) .mv1b .site-footer div {
    animation: mvIn 0.5s ease both;
    animation-delay: calc(1.5s + var(--k) * 0.12s);
  }
}
/* ===== 모바일 타입 스케일(767px 이하, 2026.09.20). Company·Knowledge AI 공통 =====
   단계: 표시 32 · 섹션 영문 30 · 섹션 국문 20 · 블록 헤드라인 20 · 카드 제목 18 · 리드 16 · 본문 15 · 보조 13 · 메타 11 */
@media (max-width: 767px) {
  body .h1-en {
    font-size: 32px;
    line-height: 38px;
  }
  body .st-n {
    font-size: 32px;
    line-height: 38px;
  }
  body .st-n span {
    font-size: 22px;
    line-height: 1;
  }
  body .h-en {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
  body .h-ko:not(.big),
  body .h1-ko,
  html body .sec-side .h-ko:not(.big) {
    font-size: 20px;
    line-height: 28px;
  }
  body .claim,
  body .st-claim,
  body .cl-claim,
  body .product-workflow-claim {
    font-size: 20px;
    line-height: 29px;
    letter-spacing: -0.01em;
  }
  body .st-claim em,
  body .cl-claim em {
    font-size: inherit;
    line-height: inherit;
  }
  body .product-workflow-title,
  body .a-nm {
    font-size: 18px;
    line-height: 26px;
  }
  body .lead,
  body .h1-sub {
    font-size: 16px;
    line-height: 26px;
  }
  body .ln,
  body .device-one,
  body .product-workflow-description {
    font-size: 15px;
    line-height: 24px;
  }
  body .dcap,
  body .t8-d,
  body .device-view-description,
  body .a-dec {
    font-size: 13px;
    line-height: 20px;
  }
  body .eyebrow,
  body .sub {
    font-size: 11px;
    line-height: 16px;
  }
}
/* 도식 글자 하한(9px) 적용 시 도형 안 글자 맞춤(모바일) */
@media (max-width: 767px) {
  #dc1 circle[r="36"] {
    r: 42px;
  }
}
/* 모바일 푸터 요약(2026.09.20): 설명문 제거, 메뉴 2열 2행, 링크 간격 압축, 인증·저작권 한 덩어리 */
@media (max-width: 767px) {
  body .foot {
    padding-block: 48px 28px;
  }
  body .site-footer-description {
    display: none;
  }
  body .site-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px;
    row-gap: 24px !important;
    margin-top: 28px !important;
  }
  body .site-footer-heading {
    margin-bottom: 8px;
  }
  body .site-footer-nav a,
  body .site-footer-soon {
    font-size: 13px;
    line-height: 18px;
    padding: 4px 0;
  }
  body .site-footer-bot {
    margin-top: 28px !important;
    padding-top: 16px;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }
  body .site-footer-cert {
    gap: 4px 12px;
  }
  body .site-footer-cert span,
  body .site-footer-card {
    font-size: 10px;
  }
}
/* QA 2026.09.21: 모바일 터치 타깃 44px 확보(시각 크기는 유지, 보이지 않는 히트 영역만 확장) */
@media (max-width: 767px) {
  .fold-btn,
  .text-link,
  .dlink,
  .burger {
    position: relative;
  }
  .fold-btn::after,
  .text-link::after,
  .dlink::after,
  .burger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}
/* ===== Knowledge AI 모바일 보정(v14, 2026.09.20 대표 검토) ===== */
@media (max-width: 767px) {
  /* D-O4a FOB 구성 칸의 +는 칸 사이 간격(8px) 정중앙 */
  #do4a .dg .gh::before {
    left: -4px !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  #do4a .dg .gh::after {
    right: -4px !important;
    left: auto !important;
    transform: translate(50%, -50%) !important;
  }
  /* 4-D 사전원가 3단계 표(시점·근거·결정 사항) 삭제 */
  .o4 .tblwrap:has(.tbl.stk) {
    display: none;
  }
  /* 4-E 주체별 거래 단위 도식 삭제 */
  .o4 .chain.panel {
    display: none;
  }
  /* 4-F Monolog V1·V2: 2열 그리드, 그림 위·설명 아래 */
  .device-vers {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
  }
  .device-vers .device-view {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin: 0 !important;
    padding: 16px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
  }
  .device-vers .device-view-image {
    width: auto !important;
    height: 96px !important;
    flex: none !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .device-vers .device-view-image img {
    height: 100% !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
  }
  .device-vers .device-view-txt {
    padding: 0 !important;
  }
}
/* 제품 로고(monolis·monolog): viewBox가 글자 외곽에 딱 붙어 오른쪽·아래 가장자리가 잘리던 문제. 전 화면 폭 공통 */
.device-name svg {
  overflow: visible;
}
/* D-O5a 라벨 크기 축소(2026.09.20): 층 이름 16→14px(모바일 13px, 화면 약 12.5px), 한글 풀이 11→10px */
#do5a .a-ko {
  font-size: 14px;
}
#do5a .a-en {
  font-size: 10px;
}
#do5a .a-ko.m {
  font-size: 13px;
  letter-spacing: 0.01em;
}
#do5a .a-en.m {
  font-size: 10px;
}
.hero .hero-t,
.hero .hero-s {
  padding-bottom: 96px;
}
.hero .hero-s {
  padding-top: 46px;
}

@media (max-width: 1023px) {
  .hero {
    padding-top: 136px;
  }
  .hero .hero-t {
    padding-bottom: 0;
  }
  .hero .hero-s {
    padding-top: 32px;
    padding-bottom: 56px;
  }
}

/* 5-B 쇼케이스 카드(Products 3-A 와 같은 규격, 결정 419). 상태 클래스는 ks-in · ks-vis: KAI 에는 .on{padding} 규칙이 있어 .on 을 쓰면 카드에 여백이 생긴다 */
.ksw {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}
.knowledge-showcase {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms linear,
    transform 800ms var(--ease-enter, ease);
}
.knowledge-showcase.knowledge-showcase-content {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 90ms);
}
.knowledge-showcase-image {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--n-50);
  overflow: hidden;
  perspective: 900px;
}
.knowledge-showcase-image img,
.knowledge-showcase-image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04) translateY(8px);
  transition: transform 1200ms var(--ease-enter, ease);
  background: var(--n-50);
}
.knowledge-showcase.knowledge-showcase-content .knowledge-showcase-image img,
.knowledge-showcase.knowledge-showcase-content .knowledge-showcase-image video {
  transform: none;
}
.knowledge-showcase:hover .knowledge-showcase-image img,
.knowledge-showcase:hover .knowledge-showcase-image video {
  transform: scale(1.03) rotateX(2deg) rotateY(-2deg);
}
@media (prefers-reduced-motion: reduce) {
  .knowledge-showcase-image video {
    display: none;
  }
  .knowledge-showcase {
    opacity: 1;
    transform: none;
  }
}
.knowledge-showcase-button {
  padding: 18px 20px 22px;
}
.knowledge-showcase-title {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--text);
}
.knowledge-showcase-description {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
  word-break: keep-all;
}
@media (max-width: 1100px) {
  .ksw {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .ksw {
    margin-top: 32px;
    gap: 10px;
  }
  .knowledge-showcase-button {
    padding: 12px 12px 14px;
  }
  .knowledge-showcase-title {
    font-size: 13.5px;
    line-height: 19px;
  }
  .knowledge-showcase-description {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 19px;
  }
}

/* 내비 언어 선택(navlang.py) */
.language-menu {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
}
.language-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font: 500 12px var(--font-mono);
  letter-spacing: 0.08em;
  transition:
    color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}
.language-menu-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
.language-menu-button:hover,
.language-menu.lg-on .language-menu-button {
  color: var(--text);
  background: rgba(15, 15, 28, 0.05);
}
.nav.on-dark .language-menu-button {
  color: var(--n-400);
}
.nav.on-dark .language-menu-button:hover,
.nav.on-dark .language-menu.lg-on .language-menu-button {
  color: var(--n-0);
  background: rgba(221, 221, 227, 0.08);
}
.language-menu-m {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 272px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15, 15, 28, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    visibility 0s linear var(--dur-fast);
  z-index: 6;
}
.language-menu.lg-on .language-menu-m {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.language-menu-icon {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
}
.language-menu-icon b {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--accent-text);
  width: 20px;
  flex: 0 0 auto;
}
.language-menu-icon span {
  flex: 1;
  white-space: nowrap;
}
.language-menu-icon.cur {
  background: rgba(15, 15, 28, 0.04);
}
.language-menu-icon.off {
  color: var(--n-400);
  cursor: default;
}
.language-menu-icon.off b {
  color: var(--n-400);
}
.language-menu-icon em {
  font: normal 9px var(--font-mono);
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--n-100);
  color: var(--n-500);
  flex: 0 0 auto;
}
.nav.on-dark .language-menu-m {
  background: #14151f;
  border-color: rgba(221, 221, 227, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.nav.on-dark .language-menu-icon {
  color: var(--n-0);
}
.nav.on-dark .language-menu-icon.cur {
  background: rgba(221, 221, 227, 0.07);
}
.nav.on-dark .language-menu-icon.off {
  color: var(--n-500);
}
.nav.on-dark .language-menu-icon.off b {
  color: var(--n-500);
}
.nav.on-dark .language-menu-icon em {
  background: rgba(221, 221, 227, 0.08);
  color: var(--n-400);
}
@media (max-width: 1023px) {
  .language-menu {
    margin-left: 0;
  }
  .language-menu-button {
    padding: 0 8px;
  }
}

/* ===== 모바일 도식 원칙(결정 391 · 393): 한 화면에 전체 구조, 관계 도식은 A(전용 전체판), 단계 도식은 B(작은 그림 + 글) ===== */
@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  svg {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  /* B · Knowledge AI 2-A 여섯 단계: 단계 줄 간격 축소 */
  #do2a .sc .st {
    padding: 8px 10px;
  }
  #do2a .sc .chips {
    gap: 4px;
    margin-top: 6px;
  }
  #do2a .sc .chips li {
    padding: 3px 7px;
  } /* 가로 밀기용으로 키워 둔 글자를 원래 크기로(전체를 폭에 맞추므로) */
  /* A · Knowledge AI 5-A 지식 층: 그림을 줄이고 아래 층 목록으로 읽기 */
  #do5a .s5m > svg {
    width: 60%;
    height: auto;
    margin-inline: auto;
    display: block;
  }
}
/* ===== 결정 396: 요약문 · 전체판 · 중복 축소 ===== */
@media (min-width: 768px) {
  .mo-t,
  .d2m {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .pc-t {
    display: none !important;
  }
  /* Knowledge AI 4-C: 모바일 전용 전체판(공유 수치 → 벤더 · 공장 두 장부 → 합의) */
  #do4b .d2 {
    display: none !important;
  }
  .d2m-c,
  .d2m-r,
  .d2m-l {
    background: var(--n-900);
    border: 1px solid rgba(221, 221, 227, 0.12);
    border-radius: var(--radius);
  }
  .d2m-c {
    border: 1.5px solid var(--dia-node);
    padding: 10px 12px;
    text-align: center;
  }
  .d2m .fml {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
  }
  .d2m-j {
    height: 16px;
    background:
      linear-gradient(var(--dia-node), var(--dia-node)) 25% 0/1.25px 100%
        no-repeat,
      linear-gradient(var(--dia-node), var(--dia-node)) 75% 0/1.25px 100%
        no-repeat;
  }
  .d2m-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  .d2m-l {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    min-width: 0;
  }
  .d2m .l-eye {
    font-size: 10px;
    line-height: 14px;
  }
  .d2m .l-ttl {
    font-size: 14px;
    line-height: 20px;
  }
  .d2m-u {
    font-family: var(--font-mono);
    font-size: 9.5px;
    line-height: 14px;
    color: var(--n-400);
  }
  .d2m-k {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 12px;
    letter-spacing: 0.02em;
    color: var(--n-400);
  }
  .d2m .bar {
    height: 14px;
    margin-top: 5px;
  }
  .d2m .b-cap {
    margin-top: 5px;
    font-size: 9px;
    text-align: right;
  }
  .d2m .d2m-l.f .b-cap {
    text-align: left;
  }
  .d2m .lg {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
  }
  .d2m .lg li {
    font-size: 10.5px;
    line-height: 14px;
    gap: 6px;
    margin-bottom: 3px;
  }
  .d2m .sw {
    width: 7px;
    height: 7px;
    margin-top: 3.5px;
  }
  .d2m .lev {
    margin-top: auto;
    padding-top: 8px;
  }
  .d2m .lg + .lev {
    border-top: 1px solid rgba(221, 221, 227, 0.12);
  }
  .d2m .lev b {
    font-size: 14px;
    line-height: 20px;
  }
  .d2m .asm {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 15px;
  }
  .d2m-r {
    padding: 12px;
  }
  .d2m .r-txt {
    font-size: 14px;
    line-height: 20px;
    margin-top: 2px;
  }
  .d2m .r-fml {
    font-size: 11px;
    line-height: 16px;
    margin-top: 2px;
  }
  .d2m .r-ok {
    font-size: 11px;
    margin-top: 6px;
  }
  body .foot {
    padding-block: 48px 28px;
  }
  body .foot .site-footer-description {
    display: none;
  }
  body .foot .site-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px;
    row-gap: 24px !important;
    margin-top: 28px !important;
  }
  body .foot .site-footer-nav a,
  body .foot .site-footer-soon {
    font-size: 13px;
    line-height: 18px;
    padding: 4px 0;
  }
  /* 결정 397 · 모바일 메뉴바: 본문 요소가 메뉴 위로 올라오던 문제, 메뉴를 열었을 때 바 주변이 어두워지지 않던 문제, 다크 바 뒤로 본문 글자가 비치던 문제 */
  header.nav {
    z-index: 62;
  }
  .mobile-navigation-scrim {
    z-index: 60;
    inset: 0 !important;
    background: rgba(10, 10, 20, 0.62);
  }
  .mobile-navigation-panel {
    z-index: 61;
    top: 76px !important;
    border-top-left-radius: calc(var(--radius) * 2);
    border-top: 1px solid var(--line);
  }
  html body header.nav.on-dark .navigation-background {
    opacity: 1 !important;
    background: rgba(15, 15, 28, 0.97) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  html body.mobile-navigation-open header.nav .navigation-background {
    opacity: 1 !important;
    background: var(--bg) !important;
  }
  html body.mobile-navigation-open header.nav.on-dark .navigation-background {
    background: #0f0f1c !important;
  }
  /* 결정 398 · 메뉴 서랍: 상단 바가 다크일 때는 서랍도 다크. 탭 왼쪽 세로 막대 삭제 */
  .mobile-navigation-panel .navigation-dropdown-tab,
  .mobile-navigation-panel .navigation-dropdown-tab.is-on {
    border-left: 0 !important;
  }
  .mobile-navigation-panel .navigation-dropdown-tab.is-on {
    font-weight: 600;
  }
  header.nav.on-dark ~ .mobile-navigation-panel {
    --surface: #17172a;
    --surface-2: #0f0f1c;
    --line: rgba(221, 221, 227, 0.14);
    --text: #fbfcfd;
    --muted: #9a9aad;
    --accent-text: var(--dia-node, #948efd);
    background: #17172a;
    color: #fbfcfd;
    border-color: rgba(221, 221, 227, 0.14);
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.5);
  }
  header.nav.on-dark ~ .mobile-navigation-panel .mm-i {
    color: #fbfcfd;
  }
  header.nav.on-dark ~ .mobile-navigation-panel .mm-i.off,
  header.nav.on-dark ~ .mobile-navigation-panel .mm-i.off * {
    color: #6e6e82;
  }
  header.nav.on-dark ~ .mobile-navigation-panel .mm-arr {
    color: #9a9aad;
  }
}

a.ext {
  font-weight: 500;
  text-decoration: none;
}
a.ext svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-fast, 160ms) var(--ease-standard, ease);
}
a.ext:hover svg {
  transform: translate(2px, -2px);
}
a.dlink.ext,
.o1 .dia.lt a.dlink.ext {
  color: var(--accent-text);
}
.product-wordmark {
  display: inline-block;
  height: 0.86em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
  margin: 0 0.02em 0 0.03em;
}
.product-wordmark > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.product-wordmark-lis {
  width: 3.983em;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTU4IDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkiPjxwYXRoIGQ9Ik0xOTEwMCAyNDAwIGwwIC0yMzMwIDQ0OCAwIDQ0NyAwIDAgMjMzMCAwIDIzMzAgLTQ0NyAwIC00NDggMCAwIC0yMzMweiBNMjA3NTAgNDQwMCBsMCAtMzMwIDQ2NSAwIDQ2NSAwIDAgMzMwIDAgMzMwIC00NjUgMCAtNDY1IDAgMCAtMzMweiBNMTgwMiAzNzY5IGMtNDI1IC00MSAtNzY4IC0yMTQgLTkwOSAtNDU4IGwtMzAgLTUyIC02IDEwNyBjLTQgNTkgLTcgMTU4IC03IDIyMSBsMCAxMTMgLTQyMiAwIC00MjMgMCAwIC0xODE1IDAgLTE4MTUgNDUwIDAgNDUwIDAgMCAxMDg3IGMwIDEwMDEgMSAxMDk3IDE4IDEyMDIgNjUgNDEyIDIxOSA1NjQgNjA3IDYwMiAzOTMgMzkgNjYyIC01NyA3NzIgLTI3NSA5NCAtMTg2IDEwMCAtMjg5IDk2IC0xNTY5IGwtMyAtMTA0NyA0NDUgMCA0NDUgMCAwIDEwNDcgYzAgMTA3OSAyIDExMzAgNDEgMTMyMiA3NiAzNjkgMjUxIDUwNiA2NzQgNTI3IDQ0MSAyMiA2NzIgLTExMyA3NTAgLTQzOSAzOCAtMTU3IDQxIC0yOTAgMzggLTEzOTUgbC0zIC0xMDYyIDQ0OSAwIDQ0OSAwIC02IDExNzggYy04IDE2MTIgLTIwIDE4MjQgLTEyMSAyMDI3IC03MiAxNDUgLTE4MCAyNTEgLTM0OSAzNDAgLTM5MyAyMDkgLTExMTYgMjIwIC0xNTUzIDI1IC0xNjQgLTc0IC0zMzAgLTIxOCAtMzk1IC0zNDQgLTE5IC0zNiAtMzYgLTY2IC0zOSAtNjYgLTMgMCAtMTggMjQgLTMzIDU0IC0xODQgMzUzIC03NDAgNTQ3IC0xMzg1IDQ4NXogTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogTTEyNDk4IDM3NzAgYy00MTUgLTQ0IC03MzMgLTIwMSAtODg3IC00NDAgbC0zOSAtNTkgLTYgMzEgYy0zIDE3IC02IDExMyAtNiAyMTQgbDAgMTg0IC00MjUgMCAtNDI1IDAgMCAtMTgxNSAwIC0xODE1IDQ1MCAwIDQ0OSAwIDQgMTEwOCBjNCAxMTkzIDQgMTE4OCA1OCAxMzY3IDk2IDMxNyAzMzggNDQ0IDgwNCA0MjEgNDQ4IC0yMiA2MDkgLTE2NSA2NjcgLTU5MiAxMCAtNzggMTMgLTMzNCAxMyAtMTIwMiBsMCAtMTEwMiA0NDUgMCA0NDUgMCAtMSAxMzc4IGMwIDEyMjkgLTIgMTM4OCAtMTcgMTQ3OSAtODIgNTA1IC0zMDUgNzM3IC03OTQgODI0IC0xMzQgMjQgLTU3NiAzNSAtNzM1IDE5eiBNMTYyODUgMzc3NCBjLTEwMDEgLTY1IC0xMzc4IC00MDUgLTE0ODIgLTEzMzQgLTIxIC0xOTcgLTI1IC04NTcgLTUgLTEwNTAgNTEgLTQ5NSAxNTkgLTc4NiAzNzIgLTEwMDEgMjcyIC0yNzUgNjU5IC0zODMgMTM4MCAtMzg0IDEyNzEgLTEgMTY5MyAzNTEgMTc3MSAxNDgwIDE2IDIyOCA3IDgxMyAtMTYgOTk1IC0xMDIgODQ1IC00MzEgMTE3NiAtMTI2NSAxMjc1IC0xMzAgMTYgLTYxOCAyOCAtNzU1IDE5eiBtNTM1IC03OTkgYzQ4MCAtNzMgNjI2IC0zNTUgNjA3IC0xMTc1IC0xNiAtNjcxIC0xNTEgLTkxMCAtNTYyIC05OTEgLTEyMiAtMjQgLTUzNyAtMTkgLTY1NCA5IC0zMDkgNzIgLTQ0NiAyNDggLTUwMyA2NDcgLTIxIDE0NyAtMTggNzM5IDYgODkwIDYwIDM5NSAyMTYgNTYzIDU3NiA2MjAgMTE3IDE4IDQxMiAxOCA1MzAgMHogTTIzNjMwIDM3NDMgYy01NjQgLTM4IC04NTUgLTEzOSAtMTA0MiAtMzYxIC0xNTQgLTE4MyAtMjI3IC01MDkgLTE5OCAtODgxIDQ4IC02MTAgMjkxIC03NzcgMTQwMCAtOTYxIDU4MCAtOTYgODE1IC0xOTMgODYxIC0zNTIgMzUgLTEyMSA3IC0yOTQgLTYxIC0zNzEgLTk2IC0xMDggLTM0NiAtMTU5IC03MDUgLTE0MiAtNTUzIDI1IC03MDQgMTI5IC03MDUgNDgzIGwwIDkzIC0yMTcgLTYgYy0xMjAgLTMgLTMxNCAtOCAtNDMyIC0xMSBsLTIxMyAtNiA2IC0xMzIgYzQxIC03NjYgMjgwIC05OTQgMTEzMSAtMTA3OCAyMDUgLTIwIDg4MSAtMTcgMTA3MCA1IDc5NCA5MyAxMDQ5IDM2MyAxMDQ4IDExMTIgMCA3MTggLTI2MCA5MjAgLTE0MjggMTEwNiAtNzY3IDEyMiAtODg1IDE4MyAtODg1IDQ2NCAwIDE5OCA5MCAzMDYgMjkxIDM1MyAxMDkgMjQgNTU3IDI0IDY4NCAtMSAyNTAgLTUwIDM0NCAtMTYwIDM0NSAtNDAwIGwwIC03OSAyNTMgNiBjMTM4IDQgMzM0IDkgNDM1IDEyIGwxODMgNiAtNiAxMDIgYy0zMyA1MzYgLTE1NiA3NjIgLTQ5MiA5MDYgLTI0NSAxMDQgLTg1NSAxNjYgLTEzMjMgMTMzeiBNMjA3NTAgMTg5MCBsMCAtMTgxMCA0NjggMCA0NjcgMCAwIDE4MTAgMCAxODEwIC00NjcgMCAtNDY4IDAgMCAtMTgxMHoiLz48L2c+PC9zdmc+);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTU4IDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkiPjxwYXRoIGQ9Ik0xOTEwMCAyNDAwIGwwIC0yMzMwIDQ0OCAwIDQ0NyAwIDAgMjMzMCAwIDIzMzAgLTQ0NyAwIC00NDggMCAwIC0yMzMweiBNMjA3NTAgNDQwMCBsMCAtMzMwIDQ2NSAwIDQ2NSAwIDAgMzMwIDAgMzMwIC00NjUgMCAtNDY1IDAgMCAtMzMweiBNMTgwMiAzNzY5IGMtNDI1IC00MSAtNzY4IC0yMTQgLTkwOSAtNDU4IGwtMzAgLTUyIC02IDEwNyBjLTQgNTkgLTcgMTU4IC03IDIyMSBsMCAxMTMgLTQyMiAwIC00MjMgMCAwIC0xODE1IDAgLTE4MTUgNDUwIDAgNDUwIDAgMCAxMDg3IGMwIDEwMDEgMSAxMDk3IDE4IDEyMDIgNjUgNDEyIDIxOSA1NjQgNjA3IDYwMiAzOTMgMzkgNjYyIC01NyA3NzIgLTI3NSA5NCAtMTg2IDEwMCAtMjg5IDk2IC0xNTY5IGwtMyAtMTA0NyA0NDUgMCA0NDUgMCAwIDEwNDcgYzAgMTA3OSAyIDExMzAgNDEgMTMyMiA3NiAzNjkgMjUxIDUwNiA2NzQgNTI3IDQ0MSAyMiA2NzIgLTExMyA3NTAgLTQzOSAzOCAtMTU3IDQxIC0yOTAgMzggLTEzOTUgbC0zIC0xMDYyIDQ0OSAwIDQ0OSAwIC02IDExNzggYy04IDE2MTIgLTIwIDE4MjQgLTEyMSAyMDI3IC03MiAxNDUgLTE4MCAyNTEgLTM0OSAzNDAgLTM5MyAyMDkgLTExMTYgMjIwIC0xNTUzIDI1IC0xNjQgLTc0IC0zMzAgLTIxOCAtMzk1IC0zNDQgLTE5IC0zNiAtMzYgLTY2IC0zOSAtNjYgLTMgMCAtMTggMjQgLTMzIDU0IC0xODQgMzUzIC03NDAgNTQ3IC0xMzg1IDQ4NXogTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogTTEyNDk4IDM3NzAgYy00MTUgLTQ0IC03MzMgLTIwMSAtODg3IC00NDAgbC0zOSAtNTkgLTYgMzEgYy0zIDE3IC02IDExMyAtNiAyMTQgbDAgMTg0IC00MjUgMCAtNDI1IDAgMCAtMTgxNSAwIC0xODE1IDQ1MCAwIDQ0OSAwIDQgMTEwOCBjNCAxMTkzIDQgMTE4OCA1OCAxMzY3IDk2IDMxNyAzMzggNDQ0IDgwNCA0MjEgNDQ4IC0yMiA2MDkgLTE2NSA2NjcgLTU5MiAxMCAtNzggMTMgLTMzNCAxMyAtMTIwMiBsMCAtMTEwMiA0NDUgMCA0NDUgMCAtMSAxMzc4IGMwIDEyMjkgLTIgMTM4OCAtMTcgMTQ3OSAtODIgNTA1IC0zMDUgNzM3IC03OTQgODI0IC0xMzQgMjQgLTU3NiAzNSAtNzM1IDE5eiBNMTYyODUgMzc3NCBjLTEwMDEgLTY1IC0xMzc4IC00MDUgLTE0ODIgLTEzMzQgLTIxIC0xOTcgLTI1IC04NTcgLTUgLTEwNTAgNTEgLTQ5NSAxNTkgLTc4NiAzNzIgLTEwMDEgMjcyIC0yNzUgNjU5IC0zODMgMTM4MCAtMzg0IDEyNzEgLTEgMTY5MyAzNTEgMTc3MSAxNDgwIDE2IDIyOCA3IDgxMyAtMTYgOTk1IC0xMDIgODQ1IC00MzEgMTE3NiAtMTI2NSAxMjc1IC0xMzAgMTYgLTYxOCAyOCAtNzU1IDE5eiBtNTM1IC03OTkgYzQ4MCAtNzMgNjI2IC0zNTUgNjA3IC0xMTc1IC0xNiAtNjcxIC0xNTEgLTkxMCAtNTYyIC05OTEgLTEyMiAtMjQgLTUzNyAtMTkgLTY1NCA5IC0zMDkgNzIgLTQ0NiAyNDggLTUwMyA2NDcgLTIxIDE0NyAtMTggNzM5IDYgODkwIDYwIDM5NSAyMTYgNTYzIDU3NiA2MjAgMTE3IDE4IDQxMiAxOCA1MzAgMHogTTIzNjMwIDM3NDMgYy01NjQgLTM4IC04NTUgLTEzOSAtMTA0MiAtMzYxIC0xNTQgLTE4MyAtMjI3IC01MDkgLTE5OCAtODgxIDQ4IC02MTAgMjkxIC03NzcgMTQwMCAtOTYxIDU4MCAtOTYgODE1IC0xOTMgODYxIC0zNTIgMzUgLTEyMSA3IC0yOTQgLTYxIC0zNzEgLTk2IC0xMDggLTM0NiAtMTU5IC03MDUgLTE0MiAtNTUzIDI1IC03MDQgMTI5IC03MDUgNDgzIGwwIDkzIC0yMTcgLTYgYy0xMjAgLTMgLTMxNCAtOCAtNDMyIC0xMSBsLTIxMyAtNiA2IC0xMzIgYzQxIC03NjYgMjgwIC05OTQgMTEzMSAtMTA3OCAyMDUgLTIwIDg4MSAtMTcgMTA3MCA1IDc5NCA5MyAxMDQ5IDM2MyAxMDQ4IDExMTIgMCA3MTggLTI2MCA5MjAgLTE0MjggMTEwNiAtNzY3IDEyMiAtODg1IDE4MyAtODg1IDQ2NCAwIDE5OCA5MCAzMDYgMjkxIDM1MyAxMDkgMjQgNTU3IDI0IDY4NCAtMSAyNTAgLTUwIDM0NCAtMTYwIDM0NSAtNDAwIGwwIC03OSAyNTMgNiBjMTM4IDQgMzM0IDkgNDM1IDEyIGwxODMgNiAtNiAxMDIgYy0zMyA1MzYgLTE1NiA3NjIgLTQ5MiA5MDYgLTI0NSAxMDQgLTg1NSAxNjYgLTEzMjMgMTMzeiBNMjA3NTAgMTg5MCBsMCAtMTgxMCA0NjggMCA0NjcgMCAwIDE4MTAgMCAxODEwIC00NjcgMCAtNDY4IDAgMCAtMTgxMHoiLz48L2c+PC9zdmc+);
}
.product-wordmark-log {
  width: 4.429em;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyODQ0IDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkgdHJhbnNsYXRlKDAsLTcxMCkiPjxwYXRoIGQ9Ik0xOTIyNSAzMTA1IGwwIC0yMzI1IDQzNSAwIDQzNSAwIDAgMjMyNSAwIDIzMjUgLTQzNSAwIC00MzUgMCAwIC0yMzI1eiBNMjYxODAgNDQ3OSBjLTc2NyAtNzUgLTExMDAgLTM5MiAtMTIwNSAtMTE0OSAtNDAgLTI4NSAtMzAgLTc4NyAyMCAtMTAzNiAxNTAgLTc0NiA1NTEgLTEwMTYgMTUxMCAtMTAxOCA1OTUgLTEgODc5IDk0IDEwOTQgMzY0IGw0NCA1NSAtNiAtMTYwIGMtMjAgLTQ5MyAtNzcgLTYzMiAtMzA0IC03NDQgLTE0NCAtNzIgLTM0OCAtOTUgLTc2OCAtODggLTU3OCA5IC03MDAgNjAgLTc0NiAzMTEgbC0xMyA2OSAtMzc0IC02IGMtMjA2IC0zIC0zNzYgLTcgLTM3NyAtOSAtOSAtOCAzOCAtMjQzIDY2IC0zMzMgMTYyIC01MjQgNTkyIC03MzUgMTQ5NCAtNzM1IDExMTAgMSAxNjI5IDI2MiAxNzY1IDg4OSA1NSAyNTEgNTMgMTk2IDU0IDE5MjggbDEgMTYwMyAtMzc3IDAgLTM3OCAwIC0xIC0xMDIgYy0xIC01NyAtNCAtMTQ1IC04IC0xOTcgbC02IC05NSAtMzYgNTUgYy0xNDMgMjE1IC0zMzAgMzIwIC02NzQgMzgwIC0xMzcgMjQgLTYwMiAzNSAtNzc1IDE4eiBtNjU2IC02OTkgYzU3OSAtMzUgNzY3IC0yMzYgNzkxIC04NDAgMjIgLTU3NiAtMTUzIC04NDkgLTYwMiAtOTM3IC0xMjYgLTI0IC00OTcgLTI0IC02NDAgMCAtMzQyIDYwIC01MDEgMTk3IC01ODAgNTAyIC02NSAyNTMgLTUwIDYzMyAzNSA4NjYgOTYgMjY0IDMwNiAzODQgNzE1IDQwOSA2NiA0IDEyMiA4IDEyNSA4IDMgMSA3MyAtMyAxNTYgLTh6IE0xNzQwIDQ0NjAgYy00MTggLTUxIC03MzQgLTIxNSAtODgwIC00NTggbC00MCAtNjcgMCAyMzMgMCAyMzIgLTQxMCAwIC00MTAgMCAwIC0xODEwIDAgLTE4MTAgNDM1IDAgNDM0IDAgNCAxMTEyIGM0IDEyMjIgMyAxMjAwIDY3IDEzODggMTAzIDMwNSAzNDAgNDI2IDc5NSA0MDcgNDAwIC0xNyA1NjggLTE0OSA2NDggLTUwNyAyMCAtOTMgMjEgLTExOSAyNCAtMTI0NyBsNCAtMTE1MyA0MjkgMCA0MzAgMCAwIDEwMTggYzAgNjA5IDQgMTA2MSAxMCAxMTI3IDQzIDQ2NyAxNzkgNjY5IDQ5OCA3MzggMTQ0IDMxIDQ1OSAzMSA1ODYgLTEgMjgwIC03MCA0MDggLTI0NyA0NDUgLTYxNiA3IC03MiAxMSAtNDc4IDExIC0xMTg4IGwwIC0xMDc4IDQzMCAwIDQzMCAwIDAgOTczIGMwIDE1MTYgLTIxIDE5ODcgLTk1IDIxNjkgLTExMCAyNzAgLTM3OCA0NDYgLTc4OSA1MjEgLTE3OSAzMiAtNjA0IDMyIC03ODUgLTEgLTM3MiAtNjcgLTY1MyAtMjM3IC03NzMgLTQ2OCBsLTMxIC02MCAtMzYgNzAgYy05MiAxODUgLTMyNiAzNDcgLTYwMyA0MjEgLTIxMyA1NiAtNjAyIDgyIC04MjggNTV6IE03ODMwIDQ0NjAgYy05MzQgLTg3IC0xMjgxIC00MjIgLTEzODIgLTEzMzUgLTkgLTgxIC0xMyAtMjU4IC0xMyAtNTQwIDAgLTI4MiA0IC00NTkgMTMgLTU0MCA5OSAtODkxIDQzNCAtMTIyOSAxMzE3IC0xMzI3IDE4MyAtMjAgNzMxIC0xNyA5MTUgNSA0NjAgNTYgNzIzIDE2NSA5MjggMzgyIDI0NyAyNjIgMzQ1IDYzMiAzNTkgMTM1NSAyNyAxMzkxIC0yNjcgMTg1NSAtMTI1NyAxOTg2IC0xNDUgMTkgLTcyNSAyOCAtODgwIDE0eiBtNjU5IC03NjYgYzM2NyAtNTcgNTI4IC0yNDYgNTg1IC02ODYgMzQgLTI2MCAzMCAtNjg5IC0xMCAtOTE3IC04MSAtNDY3IC0zMDQgLTYzMSAtODU5IC02MzEgLTU2NCAwIC03ODMgMTU4IC04NjYgNjI1IC0yOSAxNTkgLTM1IDc1NyAtMTEgOTQwIDYzIDQ2NiAyNDggNjQ0IDcwOCA2ODUgMTI0IDExIDMyOSAzIDQ1MyAtMTZ6IE0xMjU3NSA0NDY0IGMtNDUyIC00OCAtNzk3IC0yMTkgLTkzOCAtNDY2IC0xMiAtMjEgLTI1IC0zOCAtMjkgLTM4IC01IDAgLTggOTkgLTggMjIwIGwwIDIyMCAtNDEwIDAgLTQxMCAwIDAgLTE4MTAgMCAtMTgxMCA0MzUgMCA0MzQgMCA0IDExMDggYzMgMTA2NSA0IDExMTEgMjQgMTIxMyA4NSA0NDAgMjgyIDU4OSA3ODMgNTg5IDQzNyAwIDY0NiAtMTIxIDcyOSAtNDIwIDQ5IC0xNzYgNTEgLTIyNSA1MSAtMTM5NiBsMCAtMTA5NCA0MzMgMCA0MzIgMCAtMSAxMzU4IGMtMSAxNDgxIDAgMTQ2MCAtNTkgMTY3OSAtOTcgMzY0IC0zNDQgNTY1IC03NzcgNjMzIC03MSAxMiAtNjEzIDIyIC02OTMgMTR6IE0xNjMyNSA0NDYzIGMtOTcxIC02NCAtMTM1NSAtNDQwIC0xNDM0IC0xNDA2IC0xNCAtMTYyIC0xNCAtNzg0IC0xIC05MzcgNzUgLTg3NyAzODMgLTEyNTQgMTEyMCAtMTM3NCA0MDUgLTY2IDEwMTcgLTU3IDEzODMgMjAgNTU0IDExNyA4NDQgNDA5IDk1NiA5NjUgOTEgNDQ4IDkxIDEyNzMgLTEgMTcxNCAtMTU0IDc1MCAtNjI1IDEwMzAgLTE3MTggMTAyMyAtMTQwIC0xIC0yNzcgLTMgLTMwNSAtNXogbTQ3MCAtNzUzIGM0NjkgLTM4IDY0MiAtMTk1IDcyMSAtNjUwIDI1IC0xNDQgMzEgLTY3MCAxMCAtODUwIC01MSAtNDQ2IC0xOTcgLTY0NSAtNTI2IC03MjIgLTE0MiAtMzMgLTU1OSAtMzMgLTcwMCAwIC0yNDQgNTYgLTM5NCAxODcgLTQ3MSA0MDkgLTc4IDIyNyAtMTAxIDg0MyAtNDQgMTE5MyA2OCA0MTIgMjYyIDU4NCA3MDAgNjE5IDE0OCAxMiAxNzAgMTIgMzEwIDF6IE0yMjI2NSA0NDY0IGMtOTM3IC03MyAtMTMwNyAtMzk3IC0xNDE5IC0xMjQ0IC00MSAtMzA0IC00MSAtOTY1IC0xIC0xMjY0IDEwOSAtODExIDQzOSAtMTEzMiAxMjY1IC0xMjMzIDE4NCAtMjIgNzMyIC0yNSA5MTUgLTUgODYxIDk2IDExODMgNDAzIDEzMDEgMTI0MiAyMSAxNTMgMzEgODg0IDE1IDEwODYgLTc4IDk0NiAtMzkzIDEyOTIgLTEyODEgMTQwNCAtODQgMTEgLTY5NyAyMSAtNzk1IDE0eiBtNDY4IC03NTUgYzQ1OSAtMzQgNjQwIC0xOTUgNzE5IC02MzcgMzEgLTE3NCAzNCAtNzU2IDUgLTk0MSAtODAgLTUwMiAtMjk5IC02NzEgLTg3MyAtNjcxIC01MzMgMCAtNzY0IDE1MyAtODQ4IDU2MSAtNjUgMzE4IC01NSA5NTggMjAgMTIxNyA4OCAzMDIgMjg1IDQ0MSA2NjkgNDcxIDE0NyAxMiAxNTggMTIgMzA4IDB6Ii8+PC9nPjwvc3ZnPg==);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyODQ0IDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkgdHJhbnNsYXRlKDAsLTcxMCkiPjxwYXRoIGQ9Ik0xOTIyNSAzMTA1IGwwIC0yMzI1IDQzNSAwIDQzNSAwIDAgMjMyNSAwIDIzMjUgLTQzNSAwIC00MzUgMCAwIC0yMzI1eiBNMjYxODAgNDQ3OSBjLTc2NyAtNzUgLTExMDAgLTM5MiAtMTIwNSAtMTE0OSAtNDAgLTI4NSAtMzAgLTc4NyAyMCAtMTAzNiAxNTAgLTc0NiA1NTEgLTEwMTYgMTUxMCAtMTAxOCA1OTUgLTEgODc5IDk0IDEwOTQgMzY0IGw0NCA1NSAtNiAtMTYwIGMtMjAgLTQ5MyAtNzcgLTYzMiAtMzA0IC03NDQgLTE0NCAtNzIgLTM0OCAtOTUgLTc2OCAtODggLTU3OCA5IC03MDAgNjAgLTc0NiAzMTEgbC0xMyA2OSAtMzc0IC02IGMtMjA2IC0zIC0zNzYgLTcgLTM3NyAtOSAtOSAtOCAzOCAtMjQzIDY2IC0zMzMgMTYyIC01MjQgNTkyIC03MzUgMTQ5NCAtNzM1IDExMTAgMSAxNjI5IDI2MiAxNzY1IDg4OSA1NSAyNTEgNTMgMTk2IDU0IDE5MjggbDEgMTYwMyAtMzc3IDAgLTM3OCAwIC0xIC0xMDIgYy0xIC01NyAtNCAtMTQ1IC04IC0xOTcgbC02IC05NSAtMzYgNTUgYy0xNDMgMjE1IC0zMzAgMzIwIC02NzQgMzgwIC0xMzcgMjQgLTYwMiAzNSAtNzc1IDE4eiBtNjU2IC02OTkgYzU3OSAtMzUgNzY3IC0yMzYgNzkxIC04NDAgMjIgLTU3NiAtMTUzIC04NDkgLTYwMiAtOTM3IC0xMjYgLTI0IC00OTcgLTI0IC02NDAgMCAtMzQyIDYwIC01MDEgMTk3IC01ODAgNTAyIC02NSAyNTMgLTUwIDYzMyAzNSA4NjYgOTYgMjY0IDMwNiAzODQgNzE1IDQwOSA2NiA0IDEyMiA4IDEyNSA4IDMgMSA3MyAtMyAxNTYgLTh6IE0xNzQwIDQ0NjAgYy00MTggLTUxIC03MzQgLTIxNSAtODgwIC00NTggbC00MCAtNjcgMCAyMzMgMCAyMzIgLTQxMCAwIC00MTAgMCAwIC0xODEwIDAgLTE4MTAgNDM1IDAgNDM0IDAgNCAxMTEyIGM0IDEyMjIgMyAxMjAwIDY3IDEzODggMTAzIDMwNSAzNDAgNDI2IDc5NSA0MDcgNDAwIC0xNyA1NjggLTE0OSA2NDggLTUwNyAyMCAtOTMgMjEgLTExOSAyNCAtMTI0NyBsNCAtMTE1MyA0MjkgMCA0MzAgMCAwIDEwMTggYzAgNjA5IDQgMTA2MSAxMCAxMTI3IDQzIDQ2NyAxNzkgNjY5IDQ5OCA3MzggMTQ0IDMxIDQ1OSAzMSA1ODYgLTEgMjgwIC03MCA0MDggLTI0NyA0NDUgLTYxNiA3IC03MiAxMSAtNDc4IDExIC0xMTg4IGwwIC0xMDc4IDQzMCAwIDQzMCAwIDAgOTczIGMwIDE1MTYgLTIxIDE5ODcgLTk1IDIxNjkgLTExMCAyNzAgLTM3OCA0NDYgLTc4OSA1MjEgLTE3OSAzMiAtNjA0IDMyIC03ODUgLTEgLTM3MiAtNjcgLTY1MyAtMjM3IC03NzMgLTQ2OCBsLTMxIC02MCAtMzYgNzAgYy05MiAxODUgLTMyNiAzNDcgLTYwMyA0MjEgLTIxMyA1NiAtNjAyIDgyIC04MjggNTV6IE03ODMwIDQ0NjAgYy05MzQgLTg3IC0xMjgxIC00MjIgLTEzODIgLTEzMzUgLTkgLTgxIC0xMyAtMjU4IC0xMyAtNTQwIDAgLTI4MiA0IC00NTkgMTMgLTU0MCA5OSAtODkxIDQzNCAtMTIyOSAxMzE3IC0xMzI3IDE4MyAtMjAgNzMxIC0xNyA5MTUgNSA0NjAgNTYgNzIzIDE2NSA5MjggMzgyIDI0NyAyNjIgMzQ1IDYzMiAzNTkgMTM1NSAyNyAxMzkxIC0yNjcgMTg1NSAtMTI1NyAxOTg2IC0xNDUgMTkgLTcyNSAyOCAtODgwIDE0eiBtNjU5IC03NjYgYzM2NyAtNTcgNTI4IC0yNDYgNTg1IC02ODYgMzQgLTI2MCAzMCAtNjg5IC0xMCAtOTE3IC04MSAtNDY3IC0zMDQgLTYzMSAtODU5IC02MzEgLTU2NCAwIC03ODMgMTU4IC04NjYgNjI1IC0yOSAxNTkgLTM1IDc1NyAtMTEgOTQwIDYzIDQ2NiAyNDggNjQ0IDcwOCA2ODUgMTI0IDExIDMyOSAzIDQ1MyAtMTZ6IE0xMjU3NSA0NDY0IGMtNDUyIC00OCAtNzk3IC0yMTkgLTkzOCAtNDY2IC0xMiAtMjEgLTI1IC0zOCAtMjkgLTM4IC01IDAgLTggOTkgLTggMjIwIGwwIDIyMCAtNDEwIDAgLTQxMCAwIDAgLTE4MTAgMCAtMTgxMCA0MzUgMCA0MzQgMCA0IDExMDggYzMgMTA2NSA0IDExMTEgMjQgMTIxMyA4NSA0NDAgMjgyIDU4OSA3ODMgNTg5IDQzNyAwIDY0NiAtMTIxIDcyOSAtNDIwIDQ5IC0xNzYgNTEgLTIyNSA1MSAtMTM5NiBsMCAtMTA5NCA0MzMgMCA0MzIgMCAtMSAxMzU4IGMtMSAxNDgxIDAgMTQ2MCAtNTkgMTY3OSAtOTcgMzY0IC0zNDQgNTY1IC03NzcgNjMzIC03MSAxMiAtNjEzIDIyIC02OTMgMTR6IE0xNjMyNSA0NDYzIGMtOTcxIC02NCAtMTM1NSAtNDQwIC0xNDM0IC0xNDA2IC0xNCAtMTYyIC0xNCAtNzg0IC0xIC05MzcgNzUgLTg3NyAzODMgLTEyNTQgMTEyMCAtMTM3NCA0MDUgLTY2IDEwMTcgLTU3IDEzODMgMjAgNTU0IDExNyA4NDQgNDA5IDk1NiA5NjUgOTEgNDQ4IDkxIDEyNzMgLTEgMTcxNCAtMTU0IDc1MCAtNjI1IDEwMzAgLTE3MTggMTAyMyAtMTQwIC0xIC0yNzcgLTMgLTMwNSAtNXogbTQ3MCAtNzUzIGM0NjkgLTM4IDY0MiAtMTk1IDcyMSAtNjUwIDI1IC0xNDQgMzEgLTY3MCAxMCAtODUwIC01MSAtNDQ2IC0xOTcgLTY0NSAtNTI2IC03MjIgLTE0MiAtMzMgLTU1OSAtMzMgLTcwMCAwIC0yNDQgNTYgLTM5NCAxODcgLTQ3MSA0MDkgLTc4IDIyNyAtMTAxIDg0MyAtNDQgMTE5MyA2OCA0MTIgMjYyIDU4NCA3MDAgNjE5IDE0OCAxMiAxNzAgMTIgMzEwIDF6IE0yMjI2NSA0NDY0IGMtOTM3IC03MyAtMTMwNyAtMzk3IC0xNDE5IC0xMjQ0IC00MSAtMzA0IC00MSAtOTY1IC0xIC0xMjY0IDEwOSAtODExIDQzOSAtMTEzMiAxMjY1IC0xMjMzIDE4NCAtMjIgNzMyIC0yNSA5MTUgLTUgODYxIDk2IDExODMgNDAzIDEzMDEgMTI0MiAyMSAxNTMgMzEgODg0IDE1IDEwODYgLTc4IDk0NiAtMzkzIDEyOTIgLTEyODEgMTQwNCAtODQgMTEgLTY5NyAyMSAtNzk1IDE0eiBtNDY4IC03NTUgYzQ1OSAtMzQgNjQwIC0xOTUgNzE5IC02MzcgMzEgLTE3NCAzNCAtNzU2IDUgLTk0MSAtODAgLTUwMiAtMjk5IC02NzEgLTg3MyAtNjcxIC01MzMgMCAtNzY0IDE1MyAtODQ4IDU2MSAtNjUgMzE4IC01NSA5NTggMjAgMTIxNyA4OCAzMDIgMjg1IDQ0MSA2NjkgNDcxIDE0NyAxMiAxNTggMTIgMzA4IDB6Ii8+PC9nPjwvc3ZnPg==);
}
.product-wordmark-mpt {
  width: 5.995em;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODUwIDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkiPjxwYXRoIGQ9Ik0xODAyIDM3NjkgYy00MjUgLTQxIC03NjggLTIxNCAtOTA5IC00NTggbC0zMCAtNTIgLTYgMTA3IGMtNCA1OSAtNyAxNTggLTcgMjIxIGwwIDExMyAtNDIyIDAgLTQyMyAwIDAgLTE4MTUgMCAtMTgxNSA0NTAgMCA0NTAgMCAwIDEwODcgYzAgMTAwMSAxIDEwOTcgMTggMTIwMiA2NSA0MTIgMjE5IDU2NCA2MDcgNjAyIDM5MyAzOSA2NjIgLTU3IDc3MiAtMjc1IDk0IC0xODYgMTAwIC0yODkgOTYgLTE1NjkgbC0zIC0xMDQ3IDQ0NSAwIDQ0NSAwIDAgMTA0NyBjMCAxMDc5IDIgMTEzMCA0MSAxMzIyIDc2IDM2OSAyNTEgNTA2IDY3NCA1MjcgNDQxIDIyIDY3MiAtMTEzIDc1MCAtNDM5IDM4IC0xNTcgNDEgLTI5MCAzOCAtMTM5NSBsLTMgLTEwNjIgNDQ5IDAgNDQ5IDAgLTYgMTE3OCBjLTggMTYxMiAtMjAgMTgyNCAtMTIxIDIwMjcgLTcyIDE0NSAtMTgwIDI1MSAtMzQ5IDM0MCAtMzkzIDIwOSAtMTExNiAyMjAgLTE1NTMgMjUgLTE2NCAtNzQgLTMzMCAtMjE4IC0zOTUgLTM0NCAtMTkgLTM2IC0zNiAtNjYgLTM5IC02NiAtMyAwIC0xOCAyNCAtMzMgNTQgLTE4NCAzNTMgLTc0MCA1NDcgLTEzODUgNDg1eiAgTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogIE0xMjQ5OCAzNzcwIGMtNDE1IC00NCAtNzMzIC0yMDEgLTg4NyAtNDQwIGwtMzkgLTU5IC02IDMxIGMtMyAxNyAtNiAxMTMgLTYgMjE0IGwwIDE4NCAtNDI1IDAgLTQyNSAwIDAgLTE4MTUgMCAtMTgxNSA0NTAgMCA0NDkgMCA0IDExMDggYzQgMTE5MyA0IDExODggNTggMTM2NyA5NiAzMTcgMzM4IDQ0NCA4MDQgNDIxIDQ0OCAtMjIgNjA5IC0xNjUgNjY3IC01OTIgMTAgLTc4IDEzIC0zMzQgMTMgLTEyMDIgbDAgLTExMDIgNDQ1IDAgNDQ1IDAgLTEgMTM3OCBjMCAxMjI5IC0yIDEzODggLTE3IDE0NzkgLTgyIDUwNSAtMzA1IDczNyAtNzk0IDgyNCAtMTM0IDI0IC01NzYgMzUgLTczNSAxOXogIi8+PHBhdGggZD0iTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4Mzc0LDApIi8+PHBhdGggZD0iTTIwNzUwIDQ0MDAgbDAgLTMzMCA0NjUgMCA0NjUgMCAwIDMzMCAwIDMzMCAtNDY1IDAgLTQ2NSAwIDAgLTMzMHogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTY4MCwtNDAwMCkiLz48cGF0aCBkPSJNMjA3NTAgNDQwMCBsMCAtMzMwIDQ2NSAwIDQ2NSAwIDAgMzMwIDAgMzMwIC00NjUgMCAtNDY1IDAgMCAtMzMweiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNjgwLC05NTApIi8+PHJlY3QgeD0iMjA3NDAiIHk9Ii03MTAiIHdpZHRoPSI5MDAiIGhlaWdodD0iNDQ5MCIvPjxwYXRoIGQ9Ik03ODYwIDM3NzAgYy05NDggLTczIC0xMzE2IC00MDYgLTE0MjUgLTEyOTAgLTIzIC0xNzkgLTMyIC03ODYgLTE2IC0xMDAwIDg0IC0xMTI0IDUwNiAtMTQ3NCAxNzcxIC0xNDc0IDExNDMgMCAxNTkzIDMwMiAxNzI0IDExNTkgNjAgMzk1IDU4IDEwODEgLTQgMTQ3MCAtMTAzIDY0NiAtNDAxIDk2NCAtMTAxNCAxMDg1IC0yNDcgNDkgLTc0MSA3MiAtMTAzNiA1MHogbTU5MCAtNzk1IGM0MTYgLTYzIDU2MSAtMjY3IDYwMSAtODQ1IDEzIC0xOTAgNiAtNDg1IC0xNiAtNjUyIC02OCAtNTE4IC0yNzYgLTY4OCAtODQ1IC02ODggLTU2MyAwIC03NzggMTYxIC04NDkgNjM3IC01MCAzMzIgLTI0IDkzNiA0OCAxMTQ2IDg0IDI0MSAyNTYgMzY3IDU1NiA0MDcgMTA1IDEzIDQwMyAxMSA1MDUgLTV6ICIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQzMjksMCkiLz48cGF0aCBkPSJNNzg2MCAzNzcwIGMtOTQ4IC03MyAtMTMxNiAtNDA2IC0xNDI1IC0xMjkwIC0yMyAtMTc5IC0zMiAtNzg2IC0xNiAtMTAwMCA4NCAtMTEyNCA1MDYgLTE0NzQgMTc3MSAtMTQ3NCAxMTQzIDAgMTU5MyAzMDIgMTcyNCAxMTU5IDYwIDM5NSA1OCAxMDgxIC00IDE0NzAgLTEwMyA2NDYgLTQwMSA5NjQgLTEwMTQgMTA4NSAtMjQ3IDQ5IC03NDEgNzIgLTEwMzYgNTB6IG01OTAgLTc5NSBjNDE2IC02MyA1NjEgLTI2NyA2MDEgLTg0NSAxMyAtMTkwIDYgLTQ4NSAtMTYgLTY1MiAtNjggLTUxOCAtMjc2IC02ODggLTg0NSAtNjg4IC01NjMgMCAtNzc4IDE2MSAtODQ5IDYzNyAtNTAgMzMyIC0yNCA5MzYgNDggMTE0NiA4NCAyNDEgMjU2IDM2NyA1NTYgNDA3IDEwNSAxMyA0MDMgMTEgNTA1IC01eiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NjE5LDApIi8+PHJlY3QgeD0iMjc2NzciIHk9IjcwIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjM3MTAiLz48Y2xpcFBhdGggaWQ9InJjIj48cmVjdCB4PSIyOTMyMCIgeT0iMCIgd2lkdGg9IjIyNTAiIGhlaWdodD0iNDAwMCIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI3JjKSI+PHBhdGggZD0iTTEyNDk4IDM3NzAgYy00MTUgLTQ0IC03MzMgLTIwMSAtODg3IC00NDAgbC0zOSAtNTkgLTYgMzEgYy0zIDE3IC02IDExMyAtNiAyMTQgbDAgMTg0IC00MjUgMCAtNDI1IDAgMCAtMTgxNSAwIC0xODE1IDQ1MCAwIDQ0OSAwIDQgMTEwOCBjNCAxMTkzIDQgMTE4OCA1OCAxMzY3IDk2IDMxNyAzMzggNDQ0IDgwNCA0MjEgNDQ4IC0yMiA2MDkgLTE2NSA2NjcgLTU5MiAxMCAtNzggMTMgLTMzNCAxMyAtMTIwMiBsMCAtMTEwMiA0NDUgMCA0NDUgMCAtMSAxMzc4IGMwIDEyMjkgLTIgMTM4OCAtMTcgMTQ3OSAtODIgNTA1IC0zMDUgNzM3IC03OTQgODI0IC0xMzQgMjQgLTU3NiAzNSAtNzM1IDE5eiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NjEwLDApIi8+PC9nPjxyZWN0IHg9IjMyOTUwIiB5PSI3MCIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI0NDMwIi8+PHJlY3QgeD0iMzIzMDAiIHk9IjI5OTUiIHdpZHRoPSIyMjAwIiBoZWlnaHQ9Ijc4NSIvPjxwYXRoIGQ9Ik0yMzYzMCAzNzQzIGMtNTY0IC0zOCAtODU1IC0xMzkgLTEwNDIgLTM2MSAtMTU0IC0xODMgLTIyNyAtNTA5IC0xOTggLTg4MSA0OCAtNjEwIDI5MSAtNzc3IDE0MDAgLTk2MSA1ODAgLTk2IDgxNSAtMTkzIDg2MSAtMzUyIDM1IC0xMjEgNyAtMjk0IC02MSAtMzcxIC05NiAtMTA4IC0zNDYgLTE1OSAtNzA1IC0xNDIgLTU1MyAyNSAtNzA0IDEyOSAtNzA1IDQ4MyBsMCA5MyAtMjE3IC02IGMtMTIwIC0zIC0zMTQgLTggLTQzMiAtMTEgbC0yMTMgLTYgNiAtMTMyIGM0MSAtNzY2IDI4MCAtOTk0IDExMzEgLTEwNzggMjA1IC0yMCA4ODEgLTE3IDEwNzAgNSA3OTQgOTMgMTA0OSAzNjMgMTA0OCAxMTEyIDAgNzE4IC0yNjAgOTIwIC0xNDI4IDExMDYgLTc2NyAxMjIgLTg4NSAxODMgLTg4NSA0NjQgMCAxOTggOTAgMzA2IDI5MSAzNTMgMTA5IDI0IDU1NyAyNCA2ODQgLTEgMjUwIC01MCAzNDQgLTE2MCAzNDUgLTQwMCBsMCAtNzkgMjUzIDYgYzEzOCA0IDMzNCA5IDQzNSAxMiBsMTgzIDYgLTYgMTAyIGMtMzMgNTM2IC0xNTYgNzYyIC00OTIgOTA2IC0yNDUgMTA0IC04NTUgMTY2IC0xMzIzIDEzM3ogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjkyMiwwKSIvPjwvZz48L3N2Zz4=);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODUwIDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkiPjxwYXRoIGQ9Ik0xODAyIDM3NjkgYy00MjUgLTQxIC03NjggLTIxNCAtOTA5IC00NTggbC0zMCAtNTIgLTYgMTA3IGMtNCA1OSAtNyAxNTggLTcgMjIxIGwwIDExMyAtNDIyIDAgLTQyMyAwIDAgLTE4MTUgMCAtMTgxNSA0NTAgMCA0NTAgMCAwIDEwODcgYzAgMTAwMSAxIDEwOTcgMTggMTIwMiA2NSA0MTIgMjE5IDU2NCA2MDcgNjAyIDM5MyAzOSA2NjIgLTU3IDc3MiAtMjc1IDk0IC0xODYgMTAwIC0yODkgOTYgLTE1NjkgbC0zIC0xMDQ3IDQ0NSAwIDQ0NSAwIDAgMTA0NyBjMCAxMDc5IDIgMTEzMCA0MSAxMzIyIDc2IDM2OSAyNTEgNTA2IDY3NCA1MjcgNDQxIDIyIDY3MiAtMTEzIDc1MCAtNDM5IDM4IC0xNTcgNDEgLTI5MCAzOCAtMTM5NSBsLTMgLTEwNjIgNDQ5IDAgNDQ5IDAgLTYgMTE3OCBjLTggMTYxMiAtMjAgMTgyNCAtMTIxIDIwMjcgLTcyIDE0NSAtMTgwIDI1MSAtMzQ5IDM0MCAtMzkzIDIwOSAtMTExNiAyMjAgLTE1NTMgMjUgLTE2NCAtNzQgLTMzMCAtMjE4IC0zOTUgLTM0NCAtMTkgLTM2IC0zNiAtNjYgLTM5IC02NiAtMyAwIC0xOCAyNCAtMzMgNTQgLTE4NCAzNTMgLTc0MCA1NDcgLTEzODUgNDg1eiAgTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogIE0xMjQ5OCAzNzcwIGMtNDE1IC00NCAtNzMzIC0yMDEgLTg4NyAtNDQwIGwtMzkgLTU5IC02IDMxIGMtMyAxNyAtNiAxMTMgLTYgMjE0IGwwIDE4NCAtNDI1IDAgLTQyNSAwIDAgLTE4MTUgMCAtMTgxNSA0NTAgMCA0NDkgMCA0IDExMDggYzQgMTE5MyA0IDExODggNTggMTM2NyA5NiAzMTcgMzM4IDQ0NCA4MDQgNDIxIDQ0OCAtMjIgNjA5IC0xNjUgNjY3IC01OTIgMTAgLTc4IDEzIC0zMzQgMTMgLTEyMDIgbDAgLTExMDIgNDQ1IDAgNDQ1IDAgLTEgMTM3OCBjMCAxMjI5IC0yIDEzODggLTE3IDE0NzkgLTgyIDUwNSAtMzA1IDczNyAtNzk0IDgyNCAtMTM0IDI0IC01NzYgMzUgLTczNSAxOXogIi8+PHBhdGggZD0iTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4Mzc0LDApIi8+PHBhdGggZD0iTTIwNzUwIDQ0MDAgbDAgLTMzMCA0NjUgMCA0NjUgMCAwIDMzMCAwIDMzMCAtNDY1IDAgLTQ2NSAwIDAgLTMzMHogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTY4MCwtNDAwMCkiLz48cGF0aCBkPSJNMjA3NTAgNDQwMCBsMCAtMzMwIDQ2NSAwIDQ2NSAwIDAgMzMwIDAgMzMwIC00NjUgMCAtNDY1IDAgMCAtMzMweiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNjgwLC05NTApIi8+PHJlY3QgeD0iMjA3NDAiIHk9Ii03MTAiIHdpZHRoPSI5MDAiIGhlaWdodD0iNDQ5MCIvPjxwYXRoIGQ9Ik03ODYwIDM3NzAgYy05NDggLTczIC0xMzE2IC00MDYgLTE0MjUgLTEyOTAgLTIzIC0xNzkgLTMyIC03ODYgLTE2IC0xMDAwIDg0IC0xMTI0IDUwNiAtMTQ3NCAxNzcxIC0xNDc0IDExNDMgMCAxNTkzIDMwMiAxNzI0IDExNTkgNjAgMzk1IDU4IDEwODEgLTQgMTQ3MCAtMTAzIDY0NiAtNDAxIDk2NCAtMTAxNCAxMDg1IC0yNDcgNDkgLTc0MSA3MiAtMTAzNiA1MHogbTU5MCAtNzk1IGM0MTYgLTYzIDU2MSAtMjY3IDYwMSAtODQ1IDEzIC0xOTAgNiAtNDg1IC0xNiAtNjUyIC02OCAtNTE4IC0yNzYgLTY4OCAtODQ1IC02ODggLTU2MyAwIC03NzggMTYxIC04NDkgNjM3IC01MCAzMzIgLTI0IDkzNiA0OCAxMTQ2IDg0IDI0MSAyNTYgMzY3IDU1NiA0MDcgMTA1IDEzIDQwMyAxMSA1MDUgLTV6ICIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQzMjksMCkiLz48cGF0aCBkPSJNNzg2MCAzNzcwIGMtOTQ4IC03MyAtMTMxNiAtNDA2IC0xNDI1IC0xMjkwIC0yMyAtMTc5IC0zMiAtNzg2IC0xNiAtMTAwMCA4NCAtMTEyNCA1MDYgLTE0NzQgMTc3MSAtMTQ3NCAxMTQzIDAgMTU5MyAzMDIgMTcyNCAxMTU5IDYwIDM5NSA1OCAxMDgxIC00IDE0NzAgLTEwMyA2NDYgLTQwMSA5NjQgLTEwMTQgMTA4NSAtMjQ3IDQ5IC03NDEgNzIgLTEwMzYgNTB6IG01OTAgLTc5NSBjNDE2IC02MyA1NjEgLTI2NyA2MDEgLTg0NSAxMyAtMTkwIDYgLTQ4NSAtMTYgLTY1MiAtNjggLTUxOCAtMjc2IC02ODggLTg0NSAtNjg4IC01NjMgMCAtNzc4IDE2MSAtODQ5IDYzNyAtNTAgMzMyIC0yNCA5MzYgNDggMTE0NiA4NCAyNDEgMjU2IDM2NyA1NTYgNDA3IDEwNSAxMyA0MDMgMTEgNTA1IC01eiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NjE5LDApIi8+PHJlY3QgeD0iMjc2NzciIHk9IjcwIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjM3MTAiLz48Y2xpcFBhdGggaWQ9InJjIj48cmVjdCB4PSIyOTMyMCIgeT0iMCIgd2lkdGg9IjIyNTAiIGhlaWdodD0iNDAwMCIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI3JjKSI+PHBhdGggZD0iTTEyNDk4IDM3NzAgYy00MTUgLTQ0IC03MzMgLTIwMSAtODg3IC00NDAgbC0zOSAtNTkgLTYgMzEgYy0zIDE3IC02IDExMyAtNiAyMTQgbDAgMTg0IC00MjUgMCAtNDI1IDAgMCAtMTgxNSAwIC0xODE1IDQ1MCAwIDQ0OSAwIDQgMTEwOCBjNCAxMTkzIDQgMTE4OCA1OCAxMzY3IDk2IDMxNyAzMzggNDQ0IDgwNCA0MjEgNDQ4IC0yMiA2MDkgLTE2NSA2NjcgLTU5MiAxMCAtNzggMTMgLTMzNCAxMyAtMTIwMiBsMCAtMTEwMiA0NDUgMCA0NDUgMCAtMSAxMzc4IGMwIDEyMjkgLTIgMTM4OCAtMTcgMTQ3OSAtODIgNTA1IC0zMDUgNzM3IC03OTQgODI0IC0xMzQgMjQgLTU3NiAzNSAtNzM1IDE5eiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NjEwLDApIi8+PC9nPjxyZWN0IHg9IjMyOTUwIiB5PSI3MCIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI0NDMwIi8+PHJlY3QgeD0iMzIzMDAiIHk9IjI5OTUiIHdpZHRoPSIyMjAwIiBoZWlnaHQ9Ijc4NSIvPjxwYXRoIGQ9Ik0yMzYzMCAzNzQzIGMtNTY0IC0zOCAtODU1IC0xMzkgLTEwNDIgLTM2MSAtMTU0IC0xODMgLTIyNyAtNTA5IC0xOTggLTg4MSA0OCAtNjEwIDI5MSAtNzc3IDE0MDAgLTk2MSA1ODAgLTk2IDgxNSAtMTkzIDg2MSAtMzUyIDM1IC0xMjEgNyAtMjk0IC02MSAtMzcxIC05NiAtMTA4IC0zNDYgLTE1OSAtNzA1IC0xNDIgLTU1MyAyNSAtNzA0IDEyOSAtNzA1IDQ4MyBsMCA5MyAtMjE3IC02IGMtMTIwIC0zIC0zMTQgLTggLTQzMiAtMTEgbC0yMTMgLTYgNiAtMTMyIGM0MSAtNzY2IDI4MCAtOTk0IDExMzEgLTEwNzggMjA1IC0yMCA4ODEgLTE3IDEwNzAgNSA3OTQgOTMgMTA0OSAzNjMgMTA0OCAxMTEyIDAgNzE4IC0yNjAgOTIwIC0xNDI4IDExMDYgLTc2NyAxMjIgLTg4NSAxODMgLTg4NSA0NjQgMCAxOTggOTAgMzA2IDI5MSAzNTMgMTA5IDI0IDU1NyAyNCA2ODQgLTEgMjUwIC01MCAzNDQgLTE2MCAzNDUgLTQwMCBsMCAtNzkgMjUzIDYgYzEzOCA0IDMzNCA5IDQzNSAxMiBsMTgzIDYgLTYgMTAyIGMtMzMgNTM2IC0xNTYgNzYyIC00OTIgOTA2IC0yNDUgMTA0IC04NTUgMTY2IC0xMzIzIDEzM3ogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjkyMiwwKSIvPjwvZz48L3N2Zz4=);
}
.product-wordmark-title {
  display: inline-block;
  width: 2.89em;
  height: 0.7em;
  vertical-align: 0;
  margin: 0 0.06em;
  background: currentColor;
  opacity: 0.42;
  -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMTgyNi4wMDAwMDBwdCIgaGVpZ2h0PSI0NDIuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAxODI2LjAwMDAwMCA0NDIuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+CjxtZXRhZGF0YT4KQ3JlYXRlZCBieSBwb3RyYWNlIDEuMTYsIHdyaXR0ZW4gYnkgUGV0ZXIgU2VsaW5nZXIgMjAwMS0yMDE5CjwvbWV0YWRhdGE+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDQ0Mi4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCmZpbGw9IiMwMDAwMDAiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0xMDM1IDQ0MDkgYy0xMjEgLTMgLTI4MCAtNyAtMzUyIC04IGwtMTMzIC0xIDAgLTM0NSAwIC0zNDUgLTI3NSAwCi0yNzUgMCAwIC0zOTUgMCAtMzk1IDI3NSAwIDI3NCAwIDMgLTEwNDIgMyAtMTA0MyAyMyAtMTA5IGMxMTcgLTU1MiA0ODEgLTcxMQoxNTMxIC02NjcgMzI2IDEzIDM1NSAxNyAzNDcgMzggLTQgOCAtNiAxODIgLTYgMzg3IGwwIDM3MyAtMzEyIC0xIGMtNDczIC0xCi01NzIgMzEgLTYzMSAyMDQgLTIyIDY1IC0yMiA2NiAtMjUgOTYzIGwtMyA4OTcgNDg2IDAgNDg1IDAgMCAzOTUgMCAzOTUgLTQ4NQowIC00ODUgMCAwIDM1NSAwIDM1NSAtMTEyIC0yIGMtNjIgLTEgLTIxMiAtNSAtMzMzIC05eiBNNDM1MCAzNzc0IGMtMTA2NyAtOTUKLTE0MTIgLTUwNiAtMTQ0NiAtMTcyNCAtMTAgLTM3OCAxOSAtNzg3IDcyIC0xMDE4IDE3MyAtNzQ2IDY0NCAtMTAyNyAxNzI0Ci0xMDI2IDEyMTIgMiAxNjM0IDMwMCAxNjc2IDExODMgbDcgMTM4IC0yMzkgNyBjLTEzMSAzIC0zMzkgOSAtNDYxIDEzIGwtMjIzCjYgMCAtNjUgYzAgLTc5IC0zMSAtMjA2IC02NCAtMjYzIC05NSAtMTYyIC0zMTMgLTIzNSAtNzAyIC0yMzUgLTU5MiAwIC03OTIKMTg3IC04NDAgNzg4IGwtNyA4MiAxMjY4IDAgMTI2OCAwIC02IDM0OCBjLTQgMjE0IC0xMiAzOTUgLTIxIDQ3MiAtMTAyIDgzMQotNDIzIDExNjcgLTEyMTYgMTI3NiAtMTEwIDE1IC02NzYgMjggLTc5MCAxOHogbTY0NSAtNzE4IGMyNzggLTY0IDM5MiAtMjQ4CjQyMSAtNjc4IGw3IC05OCAtNzg3IDAgLTc4NyAwIDYgNTggYzU2IDUyMCAxODIgNjc3IDU5MCA3MzYgNzUgMTEgNDgyIC0zIDU1MAotMTh6IE04ODcyIDM3NzAgYy00MjQgLTQ0IC03MzQgLTE5NiAtODk0IC00MzkgbC00OCAtNzQgMCAyMDYgYzAgMTEzIC0zIDIxMgotNiAyMjEgLTUgMTQgLTUyIDE2IC00MjUgMTYgbC00MTkgMCAwIC0xODE1IDAgLTE4MTUgNDQ5IDAgNDQ4IDAgLTQgOTA4IGMtOAoxMzA2IDggMTUwOCAxMzAgMTcyMiAxMTIgMTk2IDM1OCAyODUgNzQyIDI2NiA0NTAgLTIyIDYxNSAtMTc0IDY2NSAtNjExIDYKLTU2IDEwIC01MDYgMTAgLTExODcgbDAgLTEwOTggNDQ4IDAgNDQ3IDAgLTEgMTM0MyBjMCAxMjg2IC0yIDE0MDAgLTI2IDE1NDcKLTc1IDQ3NSAtMzIyIDcxNyAtODEzIDc5NiAtMTE2IDE5IC01NzEgMjggLTcwMyAxNHogTTEyMjQ1IDM3NjkgYy04MzIgLTY4Ci0xMTM1IC0zNjYgLTExMzUgLTExMTYgMCAtNjY0IDIwNiAtODc1IDEwMTkgLTEwNDQgNTMgLTExIDIxMiAtNDAgMzU1IC02NAo2MDcgLTEwNSA4MDEgLTE3NyA4NzMgLTMyMyA0MiAtODUgNDEgLTI0MCAtMSAtMzI1IC03MiAtMTQ3IC0yMjUgLTE5MiAtNjQ2Ci0xOTEgLTYyOCAyIC03OTAgMTA4IC03OTAgNTE1IGwwIDYwIC0xNTIgLTUgYy04NCAtMyAtMjgyIC05IC00NDEgLTEyIGwtMjg3Ci02IDYgLTEyNyBjMjggLTYxMyAxNzMgLTg2OCA1NzUgLTEwMDkgNDI2IC0xNTAgMTQ4NCAtMTY3IDIwMDIgLTMyIDQ4NyAxMjYKNjc0IDM4NCA3MDMgOTY1IDE3IDM1MCAtNDkgNjE1IC0xOTMgNzc0IC0xOTAgMjExIC00ODkgMzE2IC0xMjY1IDQ0NSAtNzIxCjEyMSAtODIyIDE2NSAtODU4IDM3OCAtMzIgMTg2IDQ4IDMzOSAyMDQgMzg3IDE4MiA1NiA2MDYgNTYgODE2IDAgMTg4IC01MQoyNTcgLTE0MSAyNjcgLTM1MSBsNiAtMTA4IDM2IDAgYzE3NCAxIDgxNyAyMSA4MzcgMjYgbDI3IDcgLTcgMTE2IGMtNDMgNzQ2Ci0zMDMgOTc5IC0xMTYxIDEwNDEgLTE2MiAxMiAtNjQ0IDExIC03OTAgLTF6IE0xNjI0MCAzNzczIGMtMTk5IC0xOCAtMjcyIC0yOAotMzc4IC00OSAtNzY5IC0xNTMgLTEwNTMgLTYwMCAtMTA3OCAtMTY5NCAtMjkgLTEyMjEgMjM1IC0xNzUzIDk2MCAtMTk0MCA0OTEKLTEyNiAxMzU1IC0xMTQgMTgwMCAyNyAzMTcgMTAwIDUzMSAyOTcgNjI3IDU3NiA1MCAxNDcgODkgMzk2IDg5IDU3OCBsMCA1NgotMjM3IDcgYy0xMzEgMyAtMzM4IDkgLTQ2MCAxMyBsLTIyMyA2IDAgLTU5IGMtMSAtMzcyIC0yNDggLTUyMCAtODMzIC01MDEKLTUxOCAxNyAtNzA0IDE4MiAtNzYyIDY3NyAtOCA2OSAtMTUgMTQwIC0xNSAxNTcgbDAgMzMgMTI2NiAwIDEyNjcgMCAtNiAzMzgKYy02IDM2MCAtMjAgNTIwIC02MyA3MzEgLTEzNiA2NzcgLTUwOSA5NzEgLTEzMTkgMTA0MSAtMTA5IDkgLTU0OSAxMiAtNjM1IDN6Cm02NDYgLTcyMiBjMjUxIC02MSAzNTggLTIxNCAzOTkgLTU3MSA4IC02OSAxNSAtMTQyIDE1IC0xNjIgbDAgLTM4IC03ODYgMAotNzg2IDAgNyA2OCBjNDcgNDgwIDE3NiA2NTQgNTM1IDcxOCAxMjYgMjIgNTAyIDEzIDYxNiAtMTV6Ii8+CjwvZz4KPC9zdmc+Cg==)
    left center/contain no-repeat;
  mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMTgyNi4wMDAwMDBwdCIgaGVpZ2h0PSI0NDIuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAxODI2LjAwMDAwMCA0NDIuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+CjxtZXRhZGF0YT4KQ3JlYXRlZCBieSBwb3RyYWNlIDEuMTYsIHdyaXR0ZW4gYnkgUGV0ZXIgU2VsaW5nZXIgMjAwMS0yMDE5CjwvbWV0YWRhdGE+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDQ0Mi4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCmZpbGw9IiMwMDAwMDAiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0xMDM1IDQ0MDkgYy0xMjEgLTMgLTI4MCAtNyAtMzUyIC04IGwtMTMzIC0xIDAgLTM0NSAwIC0zNDUgLTI3NSAwCi0yNzUgMCAwIC0zOTUgMCAtMzk1IDI3NSAwIDI3NCAwIDMgLTEwNDIgMyAtMTA0MyAyMyAtMTA5IGMxMTcgLTU1MiA0ODEgLTcxMQoxNTMxIC02NjcgMzI2IDEzIDM1NSAxNyAzNDcgMzggLTQgOCAtNiAxODIgLTYgMzg3IGwwIDM3MyAtMzEyIC0xIGMtNDczIC0xCi01NzIgMzEgLTYzMSAyMDQgLTIyIDY1IC0yMiA2NiAtMjUgOTYzIGwtMyA4OTcgNDg2IDAgNDg1IDAgMCAzOTUgMCAzOTUgLTQ4NQowIC00ODUgMCAwIDM1NSAwIDM1NSAtMTEyIC0yIGMtNjIgLTEgLTIxMiAtNSAtMzMzIC05eiBNNDM1MCAzNzc0IGMtMTA2NyAtOTUKLTE0MTIgLTUwNiAtMTQ0NiAtMTcyNCAtMTAgLTM3OCAxOSAtNzg3IDcyIC0xMDE4IDE3MyAtNzQ2IDY0NCAtMTAyNyAxNzI0Ci0xMDI2IDEyMTIgMiAxNjM0IDMwMCAxNjc2IDExODMgbDcgMTM4IC0yMzkgNyBjLTEzMSAzIC0zMzkgOSAtNDYxIDEzIGwtMjIzCjYgMCAtNjUgYzAgLTc5IC0zMSAtMjA2IC02NCAtMjYzIC05NSAtMTYyIC0zMTMgLTIzNSAtNzAyIC0yMzUgLTU5MiAwIC03OTIKMTg3IC04NDAgNzg4IGwtNyA4MiAxMjY4IDAgMTI2OCAwIC02IDM0OCBjLTQgMjE0IC0xMiAzOTUgLTIxIDQ3MiAtMTAyIDgzMQotNDIzIDExNjcgLTEyMTYgMTI3NiAtMTEwIDE1IC02NzYgMjggLTc5MCAxOHogbTY0NSAtNzE4IGMyNzggLTY0IDM5MiAtMjQ4CjQyMSAtNjc4IGw3IC05OCAtNzg3IDAgLTc4NyAwIDYgNTggYzU2IDUyMCAxODIgNjc3IDU5MCA3MzYgNzUgMTEgNDgyIC0zIDU1MAotMTh6IE04ODcyIDM3NzAgYy00MjQgLTQ0IC03MzQgLTE5NiAtODk0IC00MzkgbC00OCAtNzQgMCAyMDYgYzAgMTEzIC0zIDIxMgotNiAyMjEgLTUgMTQgLTUyIDE2IC00MjUgMTYgbC00MTkgMCAwIC0xODE1IDAgLTE4MTUgNDQ5IDAgNDQ4IDAgLTQgOTA4IGMtOAoxMzA2IDggMTUwOCAxMzAgMTcyMiAxMTIgMTk2IDM1OCAyODUgNzQyIDI2NiA0NTAgLTIyIDYxNSAtMTc0IDY2NSAtNjExIDYKLTU2IDEwIC01MDYgMTAgLTExODcgbDAgLTEwOTggNDQ4IDAgNDQ3IDAgLTEgMTM0MyBjMCAxMjg2IC0yIDE0MDAgLTI2IDE1NDcKLTc1IDQ3NSAtMzIyIDcxNyAtODEzIDc5NiAtMTE2IDE5IC01NzEgMjggLTcwMyAxNHogTTEyMjQ1IDM3NjkgYy04MzIgLTY4Ci0xMTM1IC0zNjYgLTExMzUgLTExMTYgMCAtNjY0IDIwNiAtODc1IDEwMTkgLTEwNDQgNTMgLTExIDIxMiAtNDAgMzU1IC02NAo2MDcgLTEwNSA4MDEgLTE3NyA4NzMgLTMyMyA0MiAtODUgNDEgLTI0MCAtMSAtMzI1IC03MiAtMTQ3IC0yMjUgLTE5MiAtNjQ2Ci0xOTEgLTYyOCAyIC03OTAgMTA4IC03OTAgNTE1IGwwIDYwIC0xNTIgLTUgYy04NCAtMyAtMjgyIC05IC00NDEgLTEyIGwtMjg3Ci02IDYgLTEyNyBjMjggLTYxMyAxNzMgLTg2OCA1NzUgLTEwMDkgNDI2IC0xNTAgMTQ4NCAtMTY3IDIwMDIgLTMyIDQ4NyAxMjYKNjc0IDM4NCA3MDMgOTY1IDE3IDM1MCAtNDkgNjE1IC0xOTMgNzc0IC0xOTAgMjExIC00ODkgMzE2IC0xMjY1IDQ0NSAtNzIxCjEyMSAtODIyIDE2NSAtODU4IDM3OCAtMzIgMTg2IDQ4IDMzOSAyMDQgMzg3IDE4MiA1NiA2MDYgNTYgODE2IDAgMTg4IC01MQoyNTcgLTE0MSAyNjcgLTM1MSBsNiAtMTA4IDM2IDAgYzE3NCAxIDgxNyAyMSA4MzcgMjYgbDI3IDcgLTcgMTE2IGMtNDMgNzQ2Ci0zMDMgOTc5IC0xMTYxIDEwNDEgLTE2MiAxMiAtNjQ0IDExIC03OTAgLTF6IE0xNjI0MCAzNzczIGMtMTk5IC0xOCAtMjcyIC0yOAotMzc4IC00OSAtNzY5IC0xNTMgLTEwNTMgLTYwMCAtMTA3OCAtMTY5NCAtMjkgLTEyMjEgMjM1IC0xNzUzIDk2MCAtMTk0MCA0OTEKLTEyNiAxMzU1IC0xMTQgMTgwMCAyNyAzMTcgMTAwIDUzMSAyOTcgNjI3IDU3NiA1MCAxNDcgODkgMzk2IDg5IDU3OCBsMCA1NgotMjM3IDcgYy0xMzEgMyAtMzM4IDkgLTQ2MCAxMyBsLTIyMyA2IDAgLTU5IGMtMSAtMzcyIC0yNDggLTUyMCAtODMzIC01MDEKLTUxOCAxNyAtNzA0IDE4MiAtNzYyIDY3NyAtOCA2OSAtMTUgMTQwIC0xNSAxNTcgbDAgMzMgMTI2NiAwIDEyNjcgMCAtNiAzMzgKYy02IDM2MCAtMjAgNTIwIC02MyA3MzEgLTEzNiA2NzcgLTUwOSA5NzEgLTEzMTkgMTA0MSAtMTA5IDkgLTU0OSAxMiAtNjM1IDN6Cm02NDYgLTcyMiBjMjUxIC02MSAzNTggLTIxNCAzOTkgLTU3MSA4IC02OSAxNSAtMTQyIDE1IC0xNjIgbDAgLTM4IC03ODYgMAotNzg2IDAgNyA2OCBjNDcgNDgwIDE3NiA2NTQgNTM1IDcxOCAxMjYgMjIgNTAyIDEzIDYxNiAtMTV6Ii8+CjwvZz4KPC9zdmc+Cg==)
    left center/contain no-repeat;
}
.product-wordmark-title > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
svg.brand-wordmark,
svg[class*="lt-"],
svg[aria-label="SIJE"],
svg[aria-label="Monolis"],
svg[aria-label="Monolog"],
svg[aria-label="Mono:parts"],
svg[aria-label="Tense AI"] {
  overflow: visible;
}
.product-wordmark {
  box-sizing: content-box;
  padding: 1px;
  margin: -1px calc(0.02em - 1px) -1px calc(0.03em - 1px);
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
}
.product-wordmark-title {
  box-sizing: content-box;
  padding: 1px;
  margin: -1px calc(0.06em - 1px);
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
}
section.hero .hero-s {
  grid-column: 8 / span 5 !important;
}
@media (max-width: 1023px) {
  section.hero .hero-s {
    grid-column: 1 / -1 !important;
  }
}
.site-footer-nav .site-footer-soon,
.site-footer-nav .site-footer-soon .product-wordmark-title {
  font-size: 14px;
}
body .foot .site-footer-nav .site-footer-soon {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0;
  line-height: 22px;
}
@media (max-width: 767px) {
  body .foot .site-footer-nav .site-footer-soon {
    height: 26px;
    line-height: 18px;
  }
}
#o4 .st,
#o4 .hi {
  border-top-color: var(--line) !important;
  border-top-width: 1px !important;
}
.a-use {
  color: var(--text) !important;
}
#o4 .tbl thead th.hi {
  border-top-color: var(--text) !important;
}
#o4 .tbl tbody tr:last-child td.hi {
  border-bottom-color: var(--line);
}
/* 결정 375: 도식 코드 삭제 후 머리줄 정리 */
.dia-head .dcap {
  margin-top: 0 !important;
}
a.navigation-dropdown-tab {
  display: block;
  text-decoration: none;
  box-sizing: border-box;
}
a.language-menu-icon {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
html:lang(en) .home-tab-korean {
  display: none;
}
html[lang="vi"] body {
  word-break: normal;
  overflow-wrap: break-word;
}
svg.brand-wordmark,
svg[class*="lt-"],
svg[aria-label="SIJE"],
svg[aria-label="Monolis"],
svg[aria-label="Monolog"],
svg[aria-label="Mono:parts"],
svg[aria-label="Tense AI"] {
  overflow: visible;
}
.product-wordmark {
  box-sizing: content-box;
  padding: 1px;
  margin: -1px calc(0.02em - 1px) -1px calc(0.03em - 1px);
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
}
.product-wordmark-title {
  box-sizing: content-box;
  padding: 1px;
  margin: -1px calc(0.06em - 1px);
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
}
html[lang="vi"] .w1host .t4-name {
  font-size: 9.5px !important;
}
html[lang="vi"] .mobile-workflow .m-nt {
  font-size: 8px;
}
html[lang="vi"] .mobile-workflow .m-ln {
  font-size: 9px;
}
html[lang="vi"] .workflow-detail-sko,
html[lang="vi"] .m2-nm2 i {
  display: none;
}
html[lang="vi"] .device-media {
  max-width: 100%;
}
html[lang="vi"] .contact-form-steps li {
  grid-template-columns: 36px 68px 1fr;
}
@media (max-width: 767px) {
  html[lang="vi"] .contact-form-steps li {
    grid-template-columns: 30px 58px 1fr;
  }
  html[lang="vi"] .aitb td {
    font-size: 0.85em;
  }
}
@media (min-width: 1024px) {
  html[lang="vi"] .cl-sub,
  html[lang="vi"] .sx {
    max-width: none;
  }
  html:lang(en) .st-l {
    max-width: none;
    white-space: nowrap;
  }
  html[lang="vi"] .o1 .t11.wide .t11-r {
    grid-template-columns: 160px 1fr 150px;
  }
  html[lang="vi"] .o1 .t11.wide .t11-v {
    white-space: nowrap;
  }
}
.contact-form-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 32px;
}
.contact-form-type-description {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
}
.contact-form-type-description b {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.contact-form-type-description span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}
.contact-form-type-description.on {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}
.contact-form-type-description:not(.on):hover {
  border-color: var(--n-400, #9797a0);
}
.contact-form-type-description:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .contact-form-type {
    grid-template-columns: 1fr;
    margin-bottom: 24px;
  }
}
.contact-form-primary-heading svg.h1-wm {
  height: 0.72em;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
  margin-top: 0.14em;
  color: currentColor;
}
.foot .site-footer-description.site-footer-co {
  color: var(--n-0);
  font-weight: 500;
}
.foot .site-footer-description.site-footer-d2 {
  margin-top: 4px;
}
.foot .site-footer-description.site-footer-biz {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}
.site-footer-card .site-footer-preview {
  color: inherit;
  text-decoration: none;
  margin-right: 16px;
  display: inline-block;
  padding: 6px 0;
  font-family: Geist, Pretendard, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
}
.site-footer-card .site-footer-preview:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-form-preview-label {
  margin-left: 14px;
}
.contact-form-preview-label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-form-preview-label::before {
  content: "·";
  margin-right: 14px;
}
/* ===== 결정 467(2026.10.05 대표 지시): 모바일 도식 전수 점검 보정. 측정 기준은 390x844.
   ① 세로 빈 띠 100px 이하 ② 도식 블록은 가능한 한 화면 안 ③ 도식 속 글자 9px 미만은 키우거나 숨김 ④ 좁은 도식은 가운데 정렬
   규칙은 이 파일 한 곳에서 관리하고 build_en._fin 이 국문 · 영문 전 페이지에 마지막 순서로 넣는다. ===== */
@media (max-width: 767px) {
  /* ── 세로 리듬: 빈 띠 100px 이하 ── */
  .blk {
    margin-top: 48px !important;
  }
  .stage .blk {
    margin-top: 40px !important;
  }
  div.stage {
    padding-block: 44px !important;
    margin-top: 40px !important;
  }
  .stage-head {
    margin-bottom: 24px !important;
  }
  .wrap.open {
    padding-top: 48px !important;
  }
  .home-section .wrap.open {
    padding-top: 8px !important;
  }
  .sec-side .lead {
    margin-bottom: 8px !important;
  }
  section.pr {
    padding-bottom: 48px !important;
  }
  section[class^="o"] > .wrap.twelve-column-grid:last-child,
  section.company > .wrap.twelve-column-grid:last-child {
    padding-bottom: 44px !important;
  }
  #mission {
    padding-bottom: 36px !important;
  }
  .mst,
  .mcl,
  .prefoot,
  .vietnam-services-section {
    padding-block: 48px !important;
  }
  .product-workflow-head {
    margin-bottom: 28px !important;
  }
  .vietnam-services-pre {
    padding-bottom: 48px !important;
  }
  .home-section {
    padding-block: 44px !important;
  }
  figure.dia {
    margin-top: 24px !important;
  }
  .close {
    margin-top: 40px !important;
    padding-top: 32px !important;
  }
  /* ── Knowledge AI 1-A: 역할 카드 그림 132 → 96 ── */
  #do1a .t8-n {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    padding-bottom: 14px !important;
  }
  #do1a .t8-vis {
    width: 96px !important;
    height: 96px !important;
  }
  #do1a .t8-vis svg {
    width: 94px !important;
    height: 94px !important;
  }
  /* ── Mono:parts 히어로 · 3-A: 판 이름은 9px 이상, 읽히지 않는 알약 글자는 숨김 ── */
  .mp0 {
    width: 66% !important;
  }
  .mp0-m .m0-pl-l {
    font-size: 15px !important;
  }
  .mp0-m .m0-vp text {
    font-size: 13.5px !important;
  }
  .mp3 .m3-fg {
    width: 62% !important;
  }
  .mp3-m .m3-pl-l {
    font-size: 15px !important;
  }
  .mp3-m .m3-pi {
    display: none !important;
  }
  /* ── Mono:parts 2-A: 롯트 줄을 접어 세 장이 한 화면 남짓에 ── */
  .mp2 .m2-lots {
    display: none !important;
  }
  /* ── SIJE VINA V1: 3층 그림 축소 ── */
  .vietnam-services-d1g {
    width: 196px !important;
    margin-inline: auto !important;
    padding: 8px !important;
  }
  .vietnam-services-d1s {
    width: 180px !important;
    height: auto !important;
  }
  /* ── Monolis 3-A: 연결부 높이 축소 ── */
  .ml3m .media-view-link {
    height: auto !important;
    min-height: 0 !important;
  }
  .ml3m .media-view-link i {
    height: 14px !important;
  }
  .mp0-m .m0-tl,
  .mp0-m .m0-dt {
    display: none !important;
  }
  /* ── Monolog 1-A: 왼쪽으로 치우친 격자를 가운데로 ── */
  /* ── Monolog 5-A: 판 가장자리 글자와 외부 제공 글자 9px 이상 ── */
  .g5-fig .md-o .f-edge,
  .g5-fig .md-o .f-ext-t {
    font-size: 19px !important;
  }
  /* ── Company 4-B 기술 스택: 양옆 특허 카드(3px 글자)는 숨기고 가운데 3층만 크게, 묶음 이름은 아래 목록으로 ── */
  #dc4 {
    overflow: hidden;
  }
  #dc4 svg.tstack {
    width: 236% !important;
    max-width: none !important;
    margin-left: -68% !important;
    height: auto !important;
  }
  #dc4 .ts-box,
  #dc4 .ts-ln,
  #dc4 .ts-dot {
    display: none !important;
  }
  #dc4 .ts-ml {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
  }
  #dc4 .ts-ml li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 0;
    border-top: 1px solid var(--line, #dddde3);
    font-size: 14px;
    line-height: 20px;
  }
  #dc4 .ts-ml b {
    font: 500 11px/16px var(--font-mono, "Geist", monospace);
    letter-spacing: 0.06em;
    color: var(--muted, #696a73);
  }
}
@media (min-width: 768px) {
  #dc4 .ts-ml {
    display: none;
  }
}

/* ===== 결정 468(2026.10.05 대표 지시): 모바일 오류 8건. 스크립트는 mobile_468.js ===== */
@media (max-width: 767px) {
  /* ── 결정 468 ① 로고(홈) 눌림 보강 ── */
  header.nav a.logo {
    position: relative;
    z-index: 3;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  /* ── ② 홈 산업군: 오른쪽으로 밀려나던 가로 줄 → 2열 ── */
  .home-industries .home-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 20px !important;
    overflow: visible !important;
  }
  .home-industries .home-tabs .home-tab {
    flex: none !important;
    min-width: 0;
  }
  .home-industries .home-tabs .home-play-pause {
    grid-column: auto !important;
    justify-self: end;
    align-self: center;
    margin-top: 0 !important;
  }
  /* ── ④ Products 1-A: 스크롤로 단계 전환. 도식 아랫변을 화면 아래에 맞춰 고정 ── */
  body .pr-page .w1scroll {
    height: calc(var(--w1fh, 700px) + 110svh) !important;
  }
  body .pr-page .w1scroll #w1 {
    position: sticky !important;
    top: calc(100svh - var(--w1fh, 700px) - 12px) !important;
  }
  body .pr-page .mobile-workflow .m-more {
    margin-top: 8px;
  }
  /* ── ⑤ Monolog 1-A: 단계 탭 → 격자 → 설명 → 라인 밸런스 → 화면(작게) ── */
  .g1-fig .cgw {
    display: flex;
    flex-direction: column;
  }
  .g1-fig .factory-layout {
    order: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(221, 221, 227, 0.12);
  }
  .g1-fig .factory-layout button {
    padding: 12px 4px 12px 12px !important;
    border-top: 0 !important;
  }
  .g1-fig .factory-layout button[aria-pressed="true"] {
    box-shadow: inset 0 -2px 0 var(--acc-coral);
  }
  .g1-fig .factory-layout-korean {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap;
  }
  .g1-fig
    .factory-layout
    button[aria-pressed="true"]
    .factory-layout-korean::before {
    margin-right: 5px !important;
  }
  .g1-fig .factory-layout b {
    font-size: 13px !important;
    line-height: 18px !important;
    margin-top: 4px !important;
  }
  .g1-fig .factory-layout-description {
    display: none !important;
  }
  .g1-fig .cg-top {
    order: 2;
    display: flex;
    flex-direction: column;
  }
  .g1-fig .cg-sv {
    padding-top: 6px;
  }
  .g1-fig .cg-pill {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.5);
  }
  .g1-md {
    margin: 2px 16px 14px;
    font-size: 14px;
    line-height: 22px;
    color: var(--n-200);
    min-height: 66px;
  }
  .g1-fig .cg-top .lb {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
    margin: 0 12px 12px !important;
    padding: 12px 14px 10px !important;
    background: none !important;
  }
  .g1-fig .lb-s {
    max-height: none !important;
  }
  .g1-fig .factory-media {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    margin: 0 12px 14px !important;
  }
  .g1-fig .factory-media .factory-media-box {
    width: 96px;
    grid-row: 1/4;
  }
  .g1-fig .factory-media-caption {
    margin: 0 !important;
  }
  .g1-fig .factory-media-zoom {
    width: 26px !important;
    height: 26px !important;
    right: 5px !important;
    bottom: 5px !important;
  }
  /* ── ⑥ Monolog 2-A: 층 그림 옆에 층 이름을 같은 높이로. 누른 층의 설명만 아래에 ── */
  .g2-fig {
    display: grid !important;
    grid-template-columns: 44% 56%;
    align-items: start;
    overflow: visible !important;
  }
  .g2-fig svg.mgf2m {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    margin: 0 !important;
  }
  .g2-fig .hnl {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    display: block !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .g2-fig .hnl li {
    position: absolute;
    left: 0;
    right: 2px;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    height: 24px;
    margin-top: -12px;
    padding: 0 !important;
    border: 0 !important;
    cursor: pointer;
  }
  .g2-fig .hnl .hn-k {
    display: none !important;
  }
  .g2-fig .hnl li:nth-child(6) .hn-k {
    display: inline-grid !important;
    order: 2;
    width: 19px;
    height: 19px;
    font-size: 10px;
    border-color: var(--acc-coral);
  }
  .g2-fig .hnl .hn-e {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    text-align: right;
    white-space: nowrap;
  }
  .g2-fig .hnl .hn-e b {
    font: 500 12.5px/18px var(--font-sans);
    letter-spacing: 0;
    color: var(--n-400);
  }
  .g2-fig .hnl li.on .hn-e b {
    color: var(--n-0);
    font-weight: 600;
  }
  .g2-fig .hnl .hn-d {
    display: none !important;
  }
  .g2-cap {
    grid-column: 1/-1;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(221, 221, 227, 0.12);
    min-height: 92px;
  }
  .g2-cap .hn-e {
    margin: 0;
    font: 500 11px/18px var(--font-mono);
    letter-spacing: 0.1em;
    color: var(--n-400);
  }
  .g2-cap .hn-e b {
    margin-left: 8px;
    font: 600 15px/22px var(--font-sans);
    letter-spacing: 0;
    color: var(--n-0);
  }
  .g2-cap .hn-d {
    display: block !important;
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--n-300);
  }
  /* ── ⑥ Monolog 4-A: 시간축(왼쪽)과 사건 기록(오른쪽)을 같은 시간 눈금에 ── */
  .g4-fig .rc {
    padding: 14px 12px 12px !important;
  }
  .g4-fig .rc-g {
    grid-template-columns: 57% 43% !important;
    gap: 0 !important;
    align-items: start !important;
  }
  .g4-fig .rc-g .rc-p {
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
  }
  .g4-fig .rc-g .rc-p:first-child {
    order: 2;
  }
  .g4-fig .rc-g .rc-h {
    margin-bottom: 8px;
    white-space: nowrap;
  }
  .g4-fig .rc-g .rc-p:first-child .rc-h {
    padding-left: 24px;
  }
  .g4-fig .rc-p ul {
    position: relative;
  }
  .g4-fig .rc-p li.lg {
    position: absolute;
    left: 24px;
    right: 0;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .g4-fig .lg .t {
    display: block;
    font: 500 9.5px/12px var(--font-mono) !important;
  }
  .g4-fig .lg b {
    display: block;
    font-size: 12px;
    line-height: 16px;
  }
  .g4-fig .lg em {
    display: none;
  }
  .g4-fig .t-svg.tv {
    margin: 0 !important;
  }
  .g4-fig .tv .t-le {
    font-size: 15px;
  }
  .g4-fig .tv .t-lk {
    font-size: 16px !important;
  }
  .g4-fig .tv .t-tm {
    font-size: 16px;
  }
  .g4-fig .tv .t-bl {
    font-size: 16px;
  }
  .rc-ld {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    overflow: visible;
    pointer-events: none;
  }
  .rc-ld path {
    fill: none;
    stroke: rgba(221, 221, 227, 0.34);
    stroke-width: 1;
  }
  .rc-now {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(221, 221, 227, 0.12);
    min-height: 30px;
    font-size: 13px;
    line-height: 20px;
    color: var(--n-200);
  }
  /* ── ⑦ Mono:parts 2-A: 스타일 카드 세 장을 한 줄에(PC와 같은 3열) ── */
  .mp2 .m2-p {
    padding: 14px 12px 12px !important;
  }
  .mp2 .m2-t {
    margin-bottom: 12px !important;
  }
  .mp2 .m2-cs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: start !important;
  }
  .mp2 .m2-c .m2-hd {
    height: 32px !important;
    padding: 0 7px !important;
    gap: 5px !important;
  }
  .mp2 .m2-c .m2-hd b {
    font-size: 12.5px !important;
  }
  .mp2 .m2-c .m2-bg {
    display: none !important;
  }
  .mp2 .m2-c .m2-tr {
    min-height: 34px !important;
    padding: 0 7px !important;
    gap: 4px !important;
  }
  .mp2 .m2-c .m2-th {
    display: none !important;
  }
  .mp2 .m2-c .m2-nm {
    font-size: 11.5px !important;
    padding: 4px 0 !important;
  }
  .mp2 .m2-c .m2-nm em {
    display: none !important;
  }
  .mp2 .m2-c .m2-tr b {
    font-size: 12px !important;
  }
  .mp2 .m2-c .m2-grp {
    padding-bottom: 0 !important;
  }
  .mp2 .m2-c .m2-po {
    margin: 6px !important;
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  .mp2 .m2-c .m2-po .m2-pl {
    display: none !important;
  }
  .mp2 .m2-ft {
    margin-top: 12px !important;
    padding-top: 10px !important;
  }
}
@media (min-width: 768px) {
  .g1-md,
  .g2-cap,
  .rc-now,
  .rc-ld {
    display: none;
  }
}
@media (max-width: 767px) {
  .g4-fig .tv .t-ph text {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .g1-fig .cg-top .lb {
    padding-right: 40px !important;
  }
}
@media (max-width: 767px) {
  .g4-fig .tv .t-lk {
    font-size: 15px !important;
  }
  .g4-fig .rc-g .rc-h {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    overflow: hidden;
  }
}
@media (max-width: 767px) {
  .g4-fig .rc-g {
    grid-template-columns: 60% 40% !important;
  }
  .g4-fig .tv .t-lk,
  .g4-fig .tv .t-tm,
  .g4-fig .tv .t-bl,
  .g4-fig .tv .t-ph text {
    font-size: 17px !important;
  }
  .g4-fig .tv .t-le {
    font-size: 16px;
  }
  .g4-fig .lg b {
    font-size: 11.5px;
    letter-spacing: -0.01em;
  }
  html:lang(en) .g2-fig {
    grid-template-columns: 52% 48%;
  }
  html:lang(en) .g2-fig .hnl .hn-e b {
    font-size: 11px;
  }
}
@media (max-width: 767px) {
  .g4-fig .tv .t-lk {
    font-size: 15px !important;
    letter-spacing: -0.02em;
  }
}

/* ===== 결정 469(2026.10.05 대표 지시): 태블릿 전 페이지 QA. 세로 태블릿은 폭 1100 PC 구성으로 보인다(결정 400) ===== */
@media (min-width: 768px) and (max-width: 1100px) {
  .bgs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .lgw.lgw-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) and (min-height: 1200px) {
  .g1-pin > .g1-fig {
    top: max(96px, calc((100vh - 800px) / 2)) !important;
  }
}

.st0 {
  fill: currentColor;
}

.st0 {
  fill: currentColor;
}

.st0 {
  fill: currentColor;
}

/* L10 */
@media (min-width: 1024px) and (max-width: 1279px) {
  html:lang(en) .st-l {
    white-space: normal;
  }
  .device-view-description {
    white-space: normal;
  }
} /* A1 */
.w1host .rb:focus-visible,
.w1host .lzc:focus-visible,
.w1host .fsb:focus-visible {
  outline: 2px solid var(--acc-purple-hi, #b5b5fc);
  outline-offset: 3px;
}
.w1host .bound:focus-visible .t4-bound {
  stroke: var(--acc-purple-hi, #b5b5fc);
  stroke-width: 2;
}
.w1host .pre .remote,
.w1host .pre .lzc,
.w1host .pre .bound,
.w1host .pre .tog,
.w1host .coverage .fsb,
.w1host .coverage .solbar {
  visibility: hidden;
}
.w1host .intro .remote,
.w1host .intro .bound,
.w1host .intro .tog,
.w1host .intro .lzc {
  transition:
    opacity 500ms linear 4400ms,
    visibility 0s linear 4400ms;
}
.home-play-pause:focus-visible,
.automation-timeline-play-pause:focus-visible {
  outline: 2px solid var(--accent-text, #614cd5);
  outline-offset: 3px;
}
.contact-form-button:focus-visible {
  outline: 2px solid var(--p-600, #614cd5);
  outline-offset: 3px;
}
.text-link:focus-visible,
.fold-btn:focus-visible {
  outline: 2px solid var(--p-600, #614cd5);
  outline-offset: 4px;
}
.contact-form-chip input:focus-visible + span,
.contact-form-box input:focus-visible + .ct-bx,
.career-application-upload
  input[type="file"]:focus-visible
  + .career-application-pick {
  outline: 2px solid var(--p-600, #614cd5);
  outline-offset: 2px;
}
.contact-form-field input:focus,
.contact-form-field textarea:focus,
.contact-form-field select:focus {
  border-color: var(--p-600, #614cd5);
} /* A2 */
.sije-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  display: inline-block;
  padding: 10px 16px;
  background: #0f0f1c;
  color: #fbfcfd;
  font-family: var(--font-sans, inherit);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius, 8px);
  transform: translateY(calc(-100% - 12px));
  opacity: 0;
  pointer-events: none;
  transition: none;
}
.sije-skip:focus,
.sije-skip:focus-visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--acc-purple-hi, #b5b5fc);
  outline-offset: 2px;
}
.sije-skip-target {
  scroll-margin-top: 64px;
}
.sije-skip-target:focus {
  outline: none;
} /* A4 */
.home-sw-number,
.workflow-detail-axis,
.workflow-detail-for,
.m1-click,
.mst-l .st-n,
.mst-l .st-en,
.mst-l .st-ko,
.automation-timeline-note,
.m2-k,
.b3-no,
.mvB-s,
.mv1b .site-footer dt,
.contact-form-select select:invalid {
  color: #707079;
}
.contact-form-field input::placeholder {
  color: #707079;
}
.order-lineage-card figcaption,
.m2-or span {
  color: #6c6c75;
} /* C4 */
:where(.home-page, .company-page, .pr-page:not(.monolog-page))
  .notice-table-description,
:where(.home-page, .company-page, .pr-page:not(.monolog-page)) .mtb th,
:where(.home-page, .company-page, .pr-page:not(.monolog-page)) .mnote,
:where(.home-page, .company-page, .pr-page:not(.monolog-page)) .contact-form-bh,
:where(.home-page, .company-page, .pr-page:not(.monolog-page)) small.poc,
:where(.home-page, .company-page, .pr-page:not(.monolog-page))
  .order-lineage-calculation-panel,
:where(.home-page, .company-page, .pr-page:not(.monolog-page)) .media-view-lab,
:where(.home-page, .company-page, .pr-page:not(.monolog-page))
  .media-view-caption,
:where(.home-page, .company-page, .pr-page:not(.monolog-page)) .st.base .st-ko,
:where(.home-page, .company-page, .pr-page:not(.monolog-page))
  .mp3
  .m3-tb
  tr
  th:first-child,
:where(.home-page, .company-page, .pr-page:not(.monolog-page)) .b3-band span {
  color: var(--n-550, #696a73);
}
:where(.home-page, .company-page, .pr-page:not(.monolog-page))
  :is(
    .mtb th,
    .mnote,
    .contact-form-bh,
    .notice-table-description,
    .media-view-lab,
    .media-view-caption,
    .st-ko
  )
  :is(.product-wordmark, .product-wordmark-title):not(.text-link *) {
  color: var(--n-500);
} /* C6 */
.a-box.on i {
  color: rgba(255, 255, 255, 0.82);
}
:where(.stage) .dia:not(.lt) a.dlink.ext {
  color: var(--p-500, #7769eb);
}

/* 2026-10-30 운영 반영: 1024px 이상 터치 기기는 상단 메뉴를 첫 탭에 엽니다(NavigationInteractions). */
@media (hover: none), (pointer: coarse) {
  .mi:hover .dd,
  .mi:focus-within .dd {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
  }
  .mi.nt-open .dd {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .mi.nt-open > .ml {
    color: var(--text);
  }
  .nav.on-dark .mi.nt-open > .ml {
    color: var(--n-0);
  }
}
/* 2026-10-30 운영 반영: 768~1023px 화면의 좌우 밀림 방지 */
html,
body {
  overflow-x: clip;
}
/* 2026-10-30 운영 반영: Knowledge AI 4-F 영상 칸 비율 고정, 휴대폰 제품 카드 썸네일 4:3 */
.device .device-media {
  align-self: start;
}
@media (max-width: 767px) {
  .shw .sh .sh-img {
    align-self: center;
    aspect-ratio: 4/3;
    height: auto;
    min-height: 0;
  }
}
/* 2026-11-02 운영 반영: 히어로 영문 제목 크기 통일(PC 64 · 태블릿 48 · 휴대폰 32) */
@media (min-width: 1024px) {
  .hero .h1-en:not(.hero-reel),
  .vietnam-services-primary-heading {
    font-size: 64px;
    line-height: 72px;
    letter-spacing: -0.035em;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero .h1-en:not(.hero-reel),
  .vietnam-services-primary-heading {
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -0.035em;
  }
}
@media (max-width: 767px) {
  .hero .h1-en:not(.hero-reel),
  .vietnam-services-primary-heading {
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.035em;
  }
}