@font-face {
  font-family: "Pretendard";
  src: url("/media/shared/fonts/pretendard-300-800-vi-products.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
  );
}
/* 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);
}

.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;
} /* 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;
}
/* tables */
.tb {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 16px;
}
.tb th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
.tb td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tb td:first-child {
  color: var(--muted);
  white-space: nowrap;
  width: 96px;
}
/* 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 {
  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);
}
.st {
  padding: 32px 24px 40px 0;
  position: relative;
  border-top: 2px solid var(--accent-text);
  margin-top: -1px;
}
.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);
}
.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 .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;
}
.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;
}

/* ===== 텍스트 링크 공통 ===== */
.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;
}

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

/* ===== 반응형 (공통) ===== */
@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;
  }
  .spec {
    margin-top: 24px;
  }
  .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;
  }
  .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;
  }
  .h-ko {
    font-size: 22px;
    line-height: 30px;
  }
  .lead {
    margin-top: 32px;
    font-size: 18px;
    line-height: 28px;
  }
  .st {
    padding: 28px 0;
  }
  .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;
  }
  .spec td:first-child {
    width: 36%;
  }
  .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;
  }
  .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;
  }
  .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 {
  min-height: 24px;
}
@media (max-width: 767px) {
  .text-link {
    min-height: 28px;
    align-items: center;
  }
  .logo {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }
}
.nb {
  white-space: nowrap;
}

/* ===== 모바일 정보 밀도(2026.09.19, 결정 206) =====
   3단계(보조 표·마무리 보조 문장·주석·사이드 인덱스)는 767px 이하에서 숨기고, 2단계(근거 줄)는 첫 단위만 보이고 접는다. PC 무변경 */
.fold-btn {
  display: none;
}
@media (max-width: 767px) {
  .o4 .note.grid-span-twelve,
  .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;
}
/* flow graphic: 108px 노드 × 3, 화살표 영역 2, gap 16 */
.flow {
  display: grid;
  grid-template-columns: 108px 1fr 108px 1fr 108px;
  align-items: center;
  column-gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

/* ===== 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;
}
.dlabel {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dia-node);
}
.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);
}
@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;
  }
}

/* ===== D2: 두 장부. 내부 8컬럼, 거터 24 ===== */
.d2 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 24px;
  align-items: stretch;
}
.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.cm {
  background: var(--dia-node);
}
.note {
  margin: 24px 0 0;
  max-width: 36em;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

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

/* ===== 반응형 (O4 전용) ===== */
@media (max-width: 1279px) {
  .d2 {
    column-gap: 16px;
  }
}
@media (max-width: 1023px) {
  .band {
    grid-template-columns: 1fr;
    row-gap: 24px;
    padding: 24px;
  }
  /* D2 compact: 6모듈. 장부 1-3 / 4-6 병렬, 공유 CM은 하단 중앙(2-6), 합의 바 전폭 */
  .d2 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 16px;
  }
}
@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) {
  .flow {
    grid-template-columns: 1fr;
    row-gap: 8px;
    justify-items: center;
  }
  /* D2 mobile: 단일 컬럼 적층. 벤더 → 공유 CM → 공장 → 합의 */
  .d2 {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
} /* 모바일: 도식 머리글 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) {
  .lg {
    margin-top: 8px;
  }
  .lg li {
    margin-bottom: 2px;
    font-size: 11.5px;
    line-height: 16px;
  }
}
.o4 {
  overflow-x: clip;
}

/* 스테이지 안 산문: 첫 블록은 stage-head 바로 아래 */
.stage .prose .ln {
  color: var(--n-300);
}
.stage .prose h3.claim {
  color: var(--dia-text);
}
.card {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
@keyframes ccpop {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ccfade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ===== D-C3 3단 스택 ===== */
.stk {
  display: block;
  width: 100%;
  height: auto;
}
.stk text {
  font-family: var(--font-mono);
  fill: var(--n-400);
  font-size: 11px;
  letter-spacing: 0.06em;
}
@keyframes ccrise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ===== Products 개요 페이지 (2026.09.21) =====
   다크 히어로와 P1을 한 덩어리로 두고, 라이트 구간으로 넘어가는 경계만 각진 크롭으로 자른다(I-3).
   도식 규범은 Products 공통(다크 캔버스, 보라 1종 + 민트 1종, 모노 대문자 라벨). */

.pr-page .hero {
  padding-bottom: 0;
}
.pr-page .hero-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 히어로와 P1은 같은 다크 면이다. 사이에 라이트 띠가 생기지 않게 붙인다 */
.pr-page .stage.pr1 {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 168px;
}
.pr-page .stage.pr1 .stage-head {
  padding-top: 120px;
}
/* I-3 각진 크롭: 다크에서 라이트로 넘어가는 경계를 수평선이 아니라 사선으로 자른다 */
.pr-page .stage.pr1 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 72px));
}
.pr-page .stage.pr1 .stage-rule {
  z-index: 0;
}
.pr-page .pr2 {
  margin-top: -24px;
}

.pr-page .pr .open {
  padding-top: 120px;
}
.pr-page .pr3 {
  background: var(--surface-2);
}

/* D-P1 */
.pr-page #dp1 svg.dp1 {
  display: block;
  width: 100%;
  height: auto;
}
.pr-page #dp1 svg.dp1.mob {
  display: none;
}
.pr-page .dp-band {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.pr-page .dp-band.on {
  opacity: 1;
}
.pr-page .dp-hit {
  cursor: pointer;
}
.pr-page .dp-say {
  margin-top: 20px;
  font-size: 15px;
  line-height: 24px;
  color: var(--n-300);
  min-height: 48px;
  word-break: keep-all;
}
.pr-page .dp-say b {
  color: var(--dia-node);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 400;
  margin-right: 10px;
}
.pcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.pcard .pr-sc {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

/* P4 도입 단계 */
.phs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  margin-top: 48px;
  border-top: 1px solid var(--text);
}
.ph {
  padding: 28px 24px 32px 0;
}
.ph-n {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
.ph-t {
  margin-top: 12px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ph-d {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
  word-break: keep-all;
}
.ph + .ph {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}

/* 다크 구간(P1)의 글자와 선. 라이트 토큰이 그대로 내려오면 본문이 배경에 묻힌다 */
.pr-page .stage .h-en {
  color: var(--n-0);
}
.pr-page .stage .h-ko {
  color: var(--dia-text);
}
.pr-page .stage .lead {
  color: var(--n-400);
}
.pr-page .stage .sidx {
  border-top-color: rgba(221, 221, 227, 0.14);
}
.pr-page .stage .sidx li {
  border-bottom-color: rgba(221, 221, 227, 0.14);
}
.pr-page .stage .sidx a {
  color: var(--n-300);
}
.pr-page .stage .sidx a span {
  color: var(--dia-node);
}
.pr-page .stage .sidx a:hover,
.pr-page .stage .sidx a:focus-visible {
  color: var(--n-0);
}
.pr-page .stage .dia {
  border-top: 1px solid rgba(221, 221, 227, 0.14);
  padding-top: 32px;
}
.pr-page .stage .dia-head {
  color: var(--n-400);
}
.pr-page .stage .dlabel {
  color: var(--dia-node);
}
.pr-page .stage .dcap {
  color: var(--n-400);
}
.pr-page .stage .dia-foot {
  border-top-color: rgba(221, 221, 227, 0.14);
}

/* P1 안의 세로 간격: 다크 구간이 길어 보이지 않게 조인다 */
.pr-page .stage.pr1 .stage-head {
  margin-bottom: 0;
}
.pr-page .stage.pr1 .twelve-column-grid > .blk.first {
  margin-top: 88px;
}
.pr-page .stage.pr1 .dia {
  margin-top: 48px;
}

.pr-sc {
  position: relative;
  background: #0f0f1c;
  border: 1px solid #1b1c26;
  border-radius: var(--radius);
  overflow: hidden;
}
.pr-sc .sc {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .pr-sc .sc:not(.scm) {
    display: none;
  }
}
.pr-sc::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 0%,
    rgba(148, 142, 253, 0.1),
    transparent 62%
  );
}
@keyframes scSlide {
  from {
    transform: translateX(var(--dx));
    opacity: 0.35;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes scSnap {
  from {
    transform: translateX(150px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes scFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scRise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scDraw {
  from {
    stroke-dashoffset: 120;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes scPop {
  from {
    opacity: 0;
    transform: scale(0.4);
    transform-origin: 280px 56px;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes scRing {
  0% {
    opacity: 0.7;
    r: 9;
  }
  70% {
    opacity: 0;
    r: 22;
  }
  100% {
    opacity: 0;
    r: 22;
  }
}
@keyframes scDrawWave {
  from {
    stroke-dashoffset: 640;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pr-sc .sc * {
    animation: none !important;
  }
}
/* ===== 모바일 타입 스케일(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 .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 .product-workflow-claim {
    font-size: 20px;
    line-height: 29px;
    letter-spacing: -0.01em;
  }
  body .product-workflow-title {
    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 {
    font-size: 13px;
    line-height: 20px;
  }
  body .eyebrow,
  body .sub,
  body .dlabel {
    font-size: 11px;
    line-height: 16px;
  }
}
/* 도식 글자 하한(9px) 적용 시 도형 안 글자 맞춤(모바일) */
@media (max-width: 767px) {
  #dc1 text.code {
    letter-spacing: 0;
  }
  #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,
  .burger {
    position: relative;
  }
  .fold-btn::after,
  .text-link::after,
  .burger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}
/* ===== Products 모바일 (767px 이하). 에셋은 그대로 두고 좌표계만 바꾼다 ===== */
@media (max-width: 1100px) {
  .phs {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
  }
  .ph {
    padding: 22px 0 24px;
    border-top: 1px solid var(--line);
  }
  .ph + .ph {
    border-left: 0;
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  .pr-page .hero-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pr-page .hn {
    padding: 16px 0 18px;
  }
  .pr-page .stage.pr1 {
    padding-bottom: 96px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 36px));
  }
  .pr-page .stage.pr1 .stage-head {
    padding-top: 72px;
  }
  .pr-page .pr .open {
    padding-top: 72px;
  }
  .pr-page .twelve-column-grid > .blk.first {
    margin-top: 56px;
  }
  .pr-page .blk {
    margin-top: 56px;
  }
  .pr-page #dp1 svg.dp1.mob {
    display: block;
    margin: 0 auto;
    max-width: 343px;
  }
  .pr-page .dp-say {
    font-size: 14px;
    line-height: 22px;
    min-height: 66px;
  }
}
.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;
  }
}
#w1 {
  --wr: 1.0775;
}
.w1host p.lead b {
  color: var(--n-200);
  font-weight: 500;
}
.w1host .dia-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: 24px;
  margin-bottom: 24px;
}
.w1host .dlabel {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--p-400);
}
.w1host .dcap {
  font-size: 14px;
  color: var(--n-400);
}
.w1host .t4wrap {
  position: relative;
  overflow: visible;
  transition: height 700ms var(--ease-standard);
}
.w1host .t4w {
  display: block;
  width: calc(100% * var(--wr));
  height: auto;
}
.w1host svg text {
  font-family: var(--font-sans);
}
.w1host .t4-panel {
  fill: #0a0a14;
  stroke: rgba(221, 221, 227, 0.1);
  rx: 8;
}
.w1host .t4-axis,
.w1host .t4-railh {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  fill: var(--n-400);
}
.w1host .t4-railh {
  text-anchor: end;
}
.w1host .t4-rail {
  font-size: 13px;
  fill: var(--n-300);
  text-anchor: end;
  dominant-baseline: central;
}
.w1host .t4-col {
  fill: rgba(20, 21, 33, 0.72);
  stroke: rgba(221, 221, 227, 0.1);
  rx: 6;
}
.w1host .t4-cn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--role-subject);
}
.w1host .t4-ck {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  fill: var(--n-0);
}
.w1host .t4-own {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.w1host .t4-own .p {
  fill: var(--n-200);
}
.w1host .t4-own .s {
  fill: var(--n-400);
}
.w1host .t4-own .d {
  fill: var(--n-500);
  letter-spacing: 0;
}
.w1host .t4-hr {
  stroke: rgba(221, 221, 227, 0.12);
}
.w1host .t4-row {
  fill: rgba(12, 12, 23, 0.88);
  stroke: rgba(221, 221, 227, 0.08);
  rx: 4;
}
.w1host .t4-ln {
  stroke: rgba(221, 221, 227, 0.1);
  stroke-width: 1;
}
.w1host .t4-mk {
  fill: #0c0c17;
  stroke: var(--n-400);
  stroke-width: 1.1;
}
.w1host .t4-mk.main {
  fill: var(--n-300);
  stroke: var(--n-300);
}
.w1host .t4-wire {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--n-600);
}
.w1host .t4-warr {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--n-400);
}
.w1host .t4-bind {
  stroke-width: 2;
  stroke-opacity: 0.7;
  stroke: var(--n-400);
}
.w1host .t4-gh {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  fill: var(--n-100);
  text-anchor: end;
}
.w1host .t4-gh .n {
  fill: var(--role-subject);
  letter-spacing: 0;
}
.w1host .t4-grule {
  stroke: rgba(221, 221, 227, 0.22);
}
.w1host .t4-grp {
  rx: 6;
}
.w1host .g0 .t4-grp {
  fill: rgba(221, 221, 227, 0.055);
}
.w1host .g1 .t4-grp {
  fill: rgba(221, 221, 227, 0.032);
}
.w1host .g2 .t4-grp {
  fill: rgba(221, 221, 227, 0.012);
}
.w1host .t4-name {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  fill: var(--n-0);
}
.w1host .t4-cell {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.w1host .t4-base {
  fill: var(--n-950);
  rx: 4;
}
.w1host .t4-row.on {
  fill: rgba(221, 221, 227, 0.07);
  stroke: rgba(221, 221, 227, 0.3);
}
.w1host .t4-cell.a {
  fill: var(--n-400);
}
.w1host .t4-cell.b {
  fill: var(--acc-purple-hi);
  opacity: 0;
}
.w1host .e path {
  fill: none;
}
.w1host .e-f {
  stroke: rgba(221, 221, 227, 0.34);
  stroke-width: 1;
}
.w1host .e-fh {
  stroke: rgba(221, 221, 227, 0.5);
  stroke-width: 1;
}
.w1host .e-b {
  stroke: var(--n-300);
  stroke-width: 2;
}
.w1host .e-bh {
  stroke: var(--n-300);
  stroke-width: 1.6;
}
.w1host .e-fl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  fill: var(--n-600);
  text-anchor: middle;
}
.w1host .e-bl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  fill: var(--n-300);
  text-anchor: middle;
}
.w1host .e,
.w1host .e-fl,
.w1host .e-bl {
  transition: opacity 220ms var(--ease-standard);
}
.w1host .focus .e {
  opacity: 0.12;
}
.w1host .focus .e.hit {
  opacity: 1;
}
.w1host .focus .e.hit .e-f {
  stroke: rgba(221, 221, 227, 0.8);
}
.w1host .focus .e.hit .e-fl {
  fill: var(--n-100);
}
.w1host .focus .e.hit .e-bl {
  fill: var(--n-0);
}
.w1host .focus .e.hit .e-f,
.w1host .focus .e.hit .e-b {
  transition: stroke 300ms;
}
.w1host .focus .e.hit .media-view {
  animation: mvrun 720ms cubic-bezier(0.35, 0, 0.45, 1) forwards;
}
.w1host .tobe.focus .L-b .r,
.w1host .m-a.tobe.focus .L-b .r.up,
.w1host .m-a.tobe.focus .L-b .r.dn,
.w1host .m-a.tobe.focus .L-b .r.arc {
  opacity: 0.1;
  transition: opacity 220ms 0ms;
}
.w1host .tobe.focus .L-b .r.hit,
.w1host .m-a.tobe.focus .L-b .r.hit {
  opacity: 1;
  transition-delay: 0ms;
}
.w1host .tobe.focus .L-b .r.hit .media-view {
  animation: mvrev 720ms cubic-bezier(0.35, 0, 0.45, 1) forwards;
}
.w1host .tobe.focus .L-b .r.arc.hit .media-view {
  animation-name: mvrun;
}
.w1host .m-a.tobe.focus .L-b .chip,
.w1host .tobe.focus .L-b .chip {
  opacity: 0.22;
  transition: opacity 220ms 0ms;
}
.w1host .m-a.tobe.focus .L-b .chip.hit,
.w1host .tobe.focus .L-b .chip.hit {
  opacity: 1;
  transition-delay: 0ms;
}
.w1host .tobe.focus .L-b .chip.hit .t4-field {
  fill: var(--n-0);
}
.w1host .colhd {
  cursor: default;
}
.w1host .cell {
  cursor: default;
}
.w1host .cell.dim .t4-row.on {
  fill: transparent;
  stroke: rgba(221, 221, 227, 0.1);
}
.w1host .cell.dim .t4-name {
  fill: var(--n-600);
}
.w1host .cell.dim .t4-cell {
  fill: var(--n-700);
}
.w1host .cell {
  transition: opacity 220ms;
}
.w1host .v2 .hid {
  opacity: 0;
}
.w1host .v2.focus .e.hit .hid {
  opacity: 1;
}
.w1host .v12 .e-f {
  stroke: rgba(221, 221, 227, 0.15);
}
.w1host .v12 .e-fh {
  fill: rgba(221, 221, 227, 0.28);
  stroke: none;
}
.w1host .v12 .e-b {
  stroke: var(--n-400);
  stroke-width: 1.8;
}
.w1host .v12 .e-bh {
  fill: var(--n-400);
  stroke: none;
}
.w1host .v12 .e-bl {
  fill: var(--n-300);
}
.w1host .v12 .hid {
  opacity: 0;
}
.w1host .v12.focus .e.hit .hid {
  opacity: 1;
}
.w1host .v12.focus .e.hit .e-fl {
  fill: var(--n-100);
}
.w1host .v12 .LQ .e-f {
  stroke-dasharray: 1.5 3;
}
.w1host .v12 .LC .e-f {
  stroke-dasharray: 6 3 1.5 3;
}
.w1host .v12 .LD .e-f {
  stroke-dasharray: 5 3;
}
.w1host .v12 .LQ .e-b {
  stroke-dasharray: 2 3;
}
.w1host .v12 .LC .e-b {
  stroke-dasharray: 7 3 2 3;
}
.w1host .v12 .LD .e-b {
  stroke-dasharray: 6 3;
}
.w1host .v12.sel .e {
  opacity: 0.08;
}
.w1host .v12.sel .e.on {
  opacity: 1;
}
.w1host .v12.sel .e.on .e-f {
  stroke: var(--role-subject);
  stroke-opacity: 0.9;
}
.w1host .v12.sel .e.on .e-fh {
  fill: var(--role-subject);
}
.w1host .v12.sel .e.on .e-b {
  stroke: var(--acc-purple-hi);
}
.w1host .v12.sel .e.on .e-bh {
  fill: var(--acc-purple-hi);
}
.w1host .v12.sel .e.on .hid {
  opacity: 1;
}
.w1host .v12.sel .e.on .e-fl {
  fill: var(--acc-purple-hi);
}
.w1host .v12.sel .e.on .e-bl {
  fill: var(--n-0);
}
.w1host .v2 .e-f {
  stroke: rgba(221, 221, 227, 0.26);
}
.w1host .v2 .e-fh {
  fill: rgba(221, 221, 227, 0.4);
  stroke: none;
}
.w1host .v2 .e-bh {
  fill: var(--n-300);
  stroke: none;
}
.w1host .v2 .LP .e-f {
  stroke-dasharray: none;
}
.w1host .v2 .LQ .e-f {
  stroke-dasharray: 1.5 3;
}
.w1host .v2 .LC .e-f {
  stroke-dasharray: 6 3 1.5 3;
}
.w1host .v2 .LD .e-f {
  stroke-dasharray: 5 3;
}
.w1host .v2 .LQ .e-b {
  stroke-dasharray: 2 3;
}
.w1host .v2 .LC .e-b {
  stroke-dasharray: 7 3 2 3;
}
.w1host .v2 .LD .e-b {
  stroke-dasharray: 6 3;
}
.w1host .v2.sel .e {
  opacity: 0.08;
}
.w1host .v2.sel .e.on {
  opacity: 1;
}
.w1host .v2.sel .e.on .e-f {
  stroke: var(--role-subject);
  stroke-opacity: 0.9;
}
.w1host .v2.sel .e.on .e-fh {
  fill: var(--role-subject);
}
.w1host .v2.sel .e.on .e-b {
  stroke: var(--acc-purple-hi);
}
.w1host .v2.sel .e.on .e-bh {
  fill: var(--acc-purple-hi);
}
.w1host .v2.sel .e.on .hid {
  opacity: 1;
}
.w1host .v2.sel .e.on .e-fl {
  fill: var(--acc-purple-hi);
}
.w1host .v2.sel .e.on .e-bl {
  fill: var(--n-0);
}
.w1host .v3 .e-fl {
  fill: var(--n-400);
}
.w1host .v3 .e-bl {
  fill: var(--n-100);
}
.w1host .r .LQ,
.w1host .LQ .t4-ps,
.w1host .LQ .t4-wr {
  stroke-dasharray: 1.5 3;
}
.w1host .LC .t4-ps,
.w1host .LC .t4-wr {
  stroke-dasharray: 6 3 1.5 3;
}
.w1host .LD .t4-ps,
.w1host .LD .t4-wr {
  stroke-dasharray: 5 3;
}
.w1host .r {
  transition: opacity 220ms;
}
.w1host .sel .r {
  opacity: 0.08;
}
.w1host .sel .r.on {
  opacity: 1;
}
.w1host .L-b {
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms linear;
}
.w1host .t4-band {
  fill: rgba(21, 19, 42, 0.94);
  stroke: var(--role-subject);
  stroke-opacity: 0.42;
  rx: 8;
}
.w1host .t4-bandl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  fill: var(--role-subject);
}
.w1host .t4-wire.b,
.w1host .t4-warr.b {
  stroke: var(--role-subject);
}
.w1host .t4-drvd {
  fill: var(--role-subject);
}
.w1host .t4-wr {
  fill: none;
  stroke: var(--n-300);
  stroke-width: 1.5;
}
.w1host .t4-ps {
  fill: none;
  stroke: var(--acc-purple-deep);
  stroke-width: 1;
  stroke-opacity: 0.8;
}
.w1host .t4-psl {
  font-size: 9px;
  fill: var(--acc-purple-hi);
  text-anchor: start;
}
.w1host .t4-wt {
  fill: none;
  stroke: var(--acc-amber);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}
.w1host .t4-wtl {
  font-size: 9px;
  fill: var(--acc-amber-hi);
}
.w1host .t4-rd {
  stroke-width: 1.4;
  fill: #0c0c17;
}
.w1host .t4-rd.w {
  stroke: var(--n-300);
}
.w1host .t4-rd.p {
  stroke: var(--acc-purple-deep);
}
.w1host .t4-rd.a {
  stroke: var(--acc-amber);
}
.w1host .t4-bound {
  stroke: var(--role-subject);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-opacity: 0;
}
@keyframes t4pulse {
  0%,
  100% {
    stroke-opacity: 0.55;
    filter: drop-shadow(0 0 4px rgba(148, 142, 253, 0.45));
  }
  50% {
    stroke-opacity: 1;
    filter: drop-shadow(0 0 10px rgba(148, 142, 253, 0.9));
  }
}
.w1host .t4-cta {
  fill: var(--n-900);
  stroke: var(--role-subject);
  stroke-opacity: 0.6;
}
.w1host .t4-ctat {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  fill: var(--acc-purple-hi);
  text-anchor: middle;
}
.w1host .bound,
.w1host .togb {
  cursor: pointer;
}
.w1host .togb:hover .t4-cta {
  fill: var(--n-850);
}
.w1host .togb:focus,
.w1host .bound:focus {
  outline: none;
}
.w1host .togb:focus-visible {
  outline: 1px dashed var(--acc-purple-hi);
  outline-offset: 4px;
}
.w1host .tog {
  transition: transform 700ms var(--ease-standard);
}
.w1host .tobe .tog {
  transform: translateY(var(--dy));
}
.w1host .tog .toff {
  opacity: 0;
}
.w1host .tog .ton,
.w1host .tog .toff,
.w1host .t4-click {
  transition: opacity 300ms;
}
.w1host .t4-click {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  fill: var(--n-500);
  text-anchor: middle;
}
.w1host .tobe .tog .ton {
  opacity: 0;
}
.w1host .tobe .tog .toff {
  opacity: 1;
}
.w1host .tobe .tog .t4-cta {
  fill: var(--n-900);
  stroke: rgba(221, 221, 227, 0.35);
  animation: none;
}
.w1host .tobe .tog .t4-ctat {
  fill: var(--n-200);
}
.w1host .tobe .togb:hover .t4-cta {
  fill: var(--n-850);
}
.w1host .pre .tog {
  opacity: 0;
}
.w1host .intro .tog {
  transition: opacity 500ms linear 4400ms;
}
.w1host .fac,
.w1host .cell.fac,
.w1host .t4-rail.fac,
.w1host .t4-ln.fac,
.w1host .t4-row.fac,
.w1host .t4-dot.fac {
  transition: transform 700ms var(--ease-standard);
}
.w1host .t4-panel.grow,
.w1host .t4-col.grow {
  transition: height 700ms var(--ease-standard);
}
.w1host .L-a,
.w1host .bound,
.w1host .t4-cell,
.w1host .t4-row,
.w1host .t4-name,
.w1host .t4-dot,
.w1host .t4-bind {
  transition:
    opacity 450ms linear,
    fill 450ms linear,
    stroke 450ms linear;
}
.w1host .tobe .fac,
.w1host .tobe .cell.fac,
.w1host .tobe .t4-rail.fac,
.w1host .tobe .t4-ln.fac,
.w1host .tobe .t4-row.fac,
.w1host .tobe .t4-dot.fac {
  transform: translateY(156px);
}
.w1host .tobe .t4-panel.grow,
.w1host .tobe .t4-col.grow {
  height: calc(var(--h) + 156px);
}
.w1host .tobe .L-a,
.w1host .tobe .t4-bind.a {
  opacity: 0;
  pointer-events: none;
}
.w1host .tobe .bound {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.w1host .tobe .L-b {
  opacity: 1;
  pointer-events: auto;
}
.w1host .tobe .cell.auto .t4-row.on {
  fill: var(--acc-purple-tint);
  stroke: var(--role-subject);
  stroke-opacity: 0.5;
}
.w1host .tobe .cell.auto .t4-cell.b {
  opacity: 1;
}
.w1host .tobe .cell.auto .t4-cell.a {
  opacity: 0;
}
.w1host .tobe .cell.hum .t4-row.on {
  fill: transparent;
  stroke: rgba(221, 221, 227, 0.1);
}
.w1host .tobe .cell.hum .t4-name {
  fill: var(--n-500);
}
.w1host .tobe .cell.hum .t4-cell.a {
  fill: var(--n-600);
}
.w1host .tobe .t4-mk {
  stroke: var(--role-subject);
  fill: #0c0c17;
}
.w1host .tobe .t4-mk.auto {
  fill: var(--role-subject);
}
.w1host .lsel .cell.dim .t4-mk {
  opacity: 0.25;
}
.w1host .lsel .t4-dot.dim {
  opacity: 0.18;
}
.w1host .lsel .t4-bind.dim {
  opacity: 0.18;
}
.w1host .tobe.lsel .cell.dim .t4-row.on {
  fill: transparent;
  stroke: rgba(221, 221, 227, 0.08);
}
.w1host .tobe.lsel .cell.dim .t4-name {
  fill: var(--n-700);
}
.w1host .tobe.lsel .cell.dim .t4-cell.b,
.w1host .tobe.lsel .cell.dim .t4-cell.a {
  fill: var(--n-800);
}
.w1host .tobe.lsel .cell.hum:not(.dim) .t4-row.on {
  stroke: var(--role-subject);
  stroke-opacity: 0.6;
}
.w1host .tobe.lsel .cell.hum:not(.dim) .t4-name {
  fill: var(--n-100);
}
.w1host .tobe.lsel .cell.hum:not(.dim) .t4-cell.a {
  fill: var(--n-300);
}
.w1host .dia-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  padding-left: 114px;
}
.w1host .solbar {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
}
.w1host .solbar .sbl {
  color: var(--n-500);
  margin-right: 4px;
}
.w1host .solbar button {
  appearance: none;
  background: #0f0f1c;
  border: 1px solid rgba(221, 221, 227, 0.14);
  border-radius: 6px;
  color: var(--n-300);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 7px 11px 6px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 0;
}
.w1host .solbar button i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.w1host .solbar button .pwm {
  display: block;
  fill: currentColor;
}
.w1host .solbar button:hover {
  color: var(--n-100);
  border-color: var(--n-500);
}
.w1host .solbar button[data-sol="MLS"] i {
  background: var(--acc-mint);
}
.w1host .solbar button[data-sol="MLG"] i {
  background: var(--acc-coral);
}
.w1host .solbar button[data-sol="MPT"] i {
  background: var(--acc-blue);
}
.w1host .solbar button[aria-pressed="true"] {
  color: var(--n-0);
  background: var(--n-900);
}
.w1host .solbar button[data-sol="MLS"][aria-pressed="true"] {
  border-color: var(--acc-mint);
}
.w1host .solbar button[data-sol="MLG"][aria-pressed="true"] {
  border-color: var(--acc-coral);
}
.w1host .solbar button[data-sol="MPT"][aria-pressed="true"] {
  border-color: var(--acc-blue);
}
.w1host .hull {
  opacity: 0;
  transition: opacity 260ms;
  pointer-events: none;
}
.w1host .hull.fac {
  transition:
    opacity 260ms,
    transform 700ms var(--ease-standard);
}
.w1host .hull.MLS {
  fill: var(--acc-mint-tint);
  stroke: var(--acc-mint);
  stroke-opacity: 0.45;
}
.w1host .hull.MLG {
  fill: var(--acc-coral-tint);
  stroke: var(--acc-coral);
  stroke-opacity: 0.45;
}
.w1host .hull.MPT {
  fill: var(--acc-blue-tint);
  stroke: var(--acc-blue);
  stroke-opacity: 0.45;
}
.w1host .sol-MLS .hull.MLS,
.w1host .sol-MLG .hull.MLG,
.w1host .sol-MPT .hull.MPT {
  opacity: 1;
}
.w1host .tobe.sol-MLS .cell:not([data-cov~="MLS"]) .t4-row.on {
  fill: transparent;
  stroke: var(--n-700);
  stroke-opacity: 1;
}
.w1host .tobe.sol-MLS .cell:not([data-cov~="MLS"]) .t4-name {
  fill: var(--n-500);
}
.w1host .tobe.sol-MLS .cell:not([data-cov~="MLS"]) .t4-cell {
  fill: var(--n-600);
}
.w1host .tobe.sol-MLS .cell:not([data-cov~="MLS"]) .t4-mk {
  fill: #0c0c17;
  stroke: var(--n-600);
}
.w1host .tobe.sol-MLS .cell:not([data-cov~="MLS"]) .t4-rd,
.w1host .tobe.sol-MLS .cell:not([data-cov~="MLS"]) .t4-dot {
  opacity: 0.4;
}
.w1host .tobe.sol-MLG .cell:not([data-cov~="MLG"]) .t4-row.on {
  fill: transparent;
  stroke: var(--n-700);
  stroke-opacity: 1;
}
.w1host .tobe.sol-MLG .cell:not([data-cov~="MLG"]) .t4-name {
  fill: var(--n-500);
}
.w1host .tobe.sol-MLG .cell:not([data-cov~="MLG"]) .t4-cell {
  fill: var(--n-600);
}
.w1host .tobe.sol-MLG .cell:not([data-cov~="MLG"]) .t4-mk {
  fill: #0c0c17;
  stroke: var(--n-600);
}
.w1host .tobe.sol-MLG .cell:not([data-cov~="MLG"]) .t4-rd,
.w1host .tobe.sol-MLG .cell:not([data-cov~="MLG"]) .t4-dot {
  opacity: 0.4;
}
.w1host .tobe.sol-MPT .cell:not([data-cov~="MPT"]) .t4-row.on {
  fill: transparent;
  stroke: var(--n-700);
  stroke-opacity: 1;
}
.w1host .tobe.sol-MPT .cell:not([data-cov~="MPT"]) .t4-name {
  fill: var(--n-500);
}
.w1host .tobe.sol-MPT .cell:not([data-cov~="MPT"]) .t4-cell {
  fill: var(--n-600);
}
.w1host .tobe.sol-MPT .cell:not([data-cov~="MPT"]) .t4-mk {
  fill: #0c0c17;
  stroke: var(--n-600);
}
.w1host .tobe.sol-MPT .cell:not([data-cov~="MPT"]) .t4-rd,
.w1host .tobe.sol-MPT .cell:not([data-cov~="MPT"]) .t4-dot {
  opacity: 0.4;
}
.w1host .sol-MLS .cell[data-cov~="MLS"] .t4-row.on {
  fill: var(--acc-mint-tint);
  stroke: var(--acc-mint);
  stroke-opacity: 0.7;
}
.w1host .sol-MLG .cell[data-cov~="MLG"] .t4-row.on {
  fill: var(--acc-coral-tint);
  stroke: var(--acc-coral);
  stroke-opacity: 0.7;
}
.w1host .sol-MPT .cell[data-cov~="MPT"] .t4-row.on {
  fill: var(--acc-blue-tint);
  stroke: var(--acc-blue);
  stroke-opacity: 0.7;
}
.w1host .sol-MLS .cell[data-cov~="MLS"] .t4-name,
.w1host .sol-MLG .cell[data-cov~="MLG"] .t4-name,
.w1host .sol-MPT .cell[data-cov~="MPT"] .t4-name {
  fill: var(--n-0);
}
.w1host .t4-lzt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  fill: var(--n-300);
  text-anchor: middle;
}
.w1host .lzt-y {
  display: none;
}
.w1host .paused .lzt-p {
  display: none;
}
.w1host .paused .lzt-y {
  display: inline;
}
.w1host .lzc[aria-pressed="true"] .t4-lzt {
  fill: var(--n-200);
}
.w1host .t4w {
  pointer-events: none;
}
.w1host .cell,
.w1host .colhd,
.w1host .bound,
.w1host .togb,
.w1host .rb,
.w1host .lzc,
.w1host .fsb {
  pointer-events: auto;
}
.w1host .e-fl,
.w1host .e-bl,
.w1host .t4-busl,
.w1host .t4-psl,
.w1host .t4-wtl {
  paint-order: stroke fill;
  stroke: var(--n-950);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.w1host .fs {
  font-size: 13.5px;
  color: var(--n-200);
}
.w1host .lg {
  display: flex;
  gap: 18px;
  font-size: 11px;
  color: var(--n-400);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.w1host .lg i {
  display: inline-block;
  width: 18px;
  border-top: 1px solid currentColor;
  margin-right: 6px;
  vertical-align: middle;
}
.w1host .lg .k0 i {
  border-top-width: 4px;
  color: var(--n-500);
}
.w1host .lg .k1 i {
  color: rgba(221, 221, 227, 0.5);
}
.w1host .lg .k2 i {
  border-top-width: 2px;
  color: var(--n-300);
}
.w1host .lg i.dot {
  width: 7px;
  height: 7px;
  border: 1.2px solid var(--n-400);
  border-radius: 1.5px;
  background: #0c0c17;
  margin-right: 6px;
}
.w1host .lg i.dot.f {
  background: var(--n-300);
  border-color: var(--n-300);
}
.w1host .lg i.dot.p {
  border-color: var(--acc-purple);
  background: var(--acc-purple);
}
.w1host .lg i.dot.pb {
  border-color: var(--acc-purple);
}
.w1host .lg i.dot.x {
  border-style: dashed;
  border-color: var(--n-500);
  background: transparent;
}
.w1host .tobe .cell.hum:not(.ext) .t4-row.on {
  stroke: var(--role-subject);
  stroke-opacity: 0.45;
}
.w1host .tobe .cell.hum:not(.ext) .t4-name {
  fill: var(--n-200);
}
.w1host .lg span {
  white-space: nowrap;
}
.w1host .tobe .cell.ext .t4-row.on {
  fill: transparent;
  stroke: rgba(221, 221, 227, 0.22);
  stroke-dasharray: 3 2;
}
.w1host .tobe .cell.ext .t4-name {
  fill: var(--n-600);
}
.w1host .tobe .cell.ext .t4-cell {
  fill: var(--n-700);
}
.w1host .tobe .cell.ext .t4-mk {
  opacity: 0;
}
.w1host .lg i.sw {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 0;
  vertical-align: middle;
}
.w1host .lg i.sw.monolis {
  background: var(--acc-mint);
}
.w1host .lg i.sw.monolog {
  background: var(--acc-coral);
}
.w1host .lg i.sw.monoparts {
  background: var(--acc-blue);
}
.w1host .lg .k13 i {
  border-top-width: 1.5px;
  color: var(--acc-mint);
}
.w1host .lg .k14 i {
  color: var(--n-400);
  border-top-style: dashed;
}
.w1host .lg .k3 i {
  border-top-width: 1.5px;
  color: var(--n-300);
}
.w1host .lg .k4 i {
  color: var(--acc-purple);
}
.w1host .lg .k5 i {
  color: var(--acc-purple-deep);
}
.w1host .lg .k6 i {
  color: var(--acc-amber);
  border-top-style: dashed;
}
.w1host .t4-rline {
  fill: none;
  stroke: var(--acc-purple-hi);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.w1host .t4-railglow {
  fill: none;
  stroke: var(--role-subject);
  stroke-opacity: 0.14;
  stroke-width: 9;
  stroke-linecap: round;
}
.w1host .t4-bus {
  fill: none;
  stroke: var(--acc-purple);
  stroke-opacity: 0.75;
  stroke-width: 1;
}
.w1host .t4-busl {
  font-size: 9px;
  fill: var(--acc-purple-hi);
  text-anchor: middle;
}
.w1host .LQ .t4-bus {
  stroke-dasharray: 1.5 3;
}
.w1host .LC .t4-bus {
  stroke-dasharray: 6 3 1.5 3;
}
.w1host .LD .t4-bus {
  stroke-dasharray: 5 3;
}
.w1host .b3 .t4-band.ledgerbg {
  fill: rgba(12, 12, 23, 0.92);
  stroke: none;
}
.w1host .t4-row1 {
  fill: rgba(148, 142, 253, 0.06);
  stroke: none;
}
.w1host .t4-rowbot {
  stroke: rgba(148, 142, 253, 0.22);
}
.w1host .t4-sep {
  stroke: rgba(221, 221, 227, 0.14);
}
.w1host .t4-field {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--n-100);
}
.w1host .t4-bandl .d {
  fill: var(--n-600);
}
.w1host .t4-lexp {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--n-300);
  text-anchor: end;
}
.w1host .t4-remh {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  fill: var(--n-500);
  text-anchor: middle;
}
.w1host .rb {
  cursor: pointer;
}
.w1host .rb rect {
  fill: #0f0f1c;
  stroke: rgba(221, 221, 227, 0.14);
}
.w1host .rb text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  fill: var(--n-400);
  text-anchor: middle;
}
.w1host .rb:hover rect {
  stroke: var(--n-500);
}
.w1host .rb:hover text {
  fill: var(--n-200);
}
.w1host .rb:focus {
  outline: none;
}
.w1host .rb[aria-pressed="true"] rect {
  fill: rgba(148, 142, 253, 0.12);
  stroke: var(--role-subject);
}
.w1host .rb[aria-pressed="true"] text {
  fill: var(--acc-purple-hi);
}
.w1host .t4-logo path {
  fill: var(--acc-purple-hi);
}
.w1host .t4-cta.glim {
  stroke-opacity: 0.7;
}
@keyframes laser {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  30% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  36% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
.w1host .lzc {
  transition: opacity 300ms;
}
.w1host .pre .lzc {
  opacity: 0;
}
.w1host .intro .lzc {
  transition: opacity 500ms linear 4400ms;
}
.w1host .paused .r.fl .media-view {
  animation: none;
}
.w1host .fsb {
  display: none;
  cursor: pointer;
  transition: transform 700ms var(--ease-standard);
}
.w1host .fsb:focus {
  outline: none;
}
.w1host .t4-fsi {
  fill: none;
  stroke: var(--n-300);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.w1host .fst-c {
  display: none;
}
.w1host .fsb[aria-pressed="true"] .fst-o {
  display: none;
}
.w1host .fsb[aria-pressed="true"] .fst-c {
  display: inline;
}
.w1host .lzc {
  cursor: pointer;
}
.w1host .lzc:focus {
  outline: none;
}
.w1host .t4-lzc {
  fill: rgba(221, 221, 227, 0.07);
  stroke: rgba(221, 221, 227, 0.22);
}
.w1host .lzc:hover .t4-lzc {
  fill: rgba(221, 221, 227, 0.12);
}
.w1host .lzc:hover .t4-lzc {
  stroke: var(--n-500);
}
.w1host .lzc[aria-pressed="true"] .t4-lzc {
  stroke: rgba(221, 221, 227, 0.3);
}
.w1host .t4-lzp {
  stroke: var(--n-300);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.w1host .t4-lzy {
  fill: var(--n-300);
  display: none;
}
.w1host .paused .t4-lzp {
  display: none;
}
.w1host .paused .t4-lzy {
  display: block;
}
.w1host .spmv {
  fill: none;
  stroke: var(--acc-purple-hi);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 0.1 1;
  stroke-dashoffset: 0.1;
  opacity: 0;
  pointer-events: none;
}
.w1host .pre .cell {
  opacity: 0;
  transform: scale(0.7);
}
.w1host .cell {
  transform-box: fill-box;
  transform-origin: center;
}
.w1host .intro .cell {
  transition:
    opacity 420ms ease-out,
    transform 560ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
  transition-delay: calc(var(--c) * 110ms);
}
.w1host .pre .L-a .e {
  opacity: 0;
  transform: scale(0.15);
}
.w1host .intro .L-a .e {
  transition:
    opacity 380ms ease-out,
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--c) * 110ms + 650ms);
}
.w1host .pre .L-a .t4-wire {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.w1host .intro .L-a .t4-wire {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 3000ms cubic-bezier(0.4, 0, 0.2, 1) 1300ms;
}
.w1host .pre .L-a .t4-warr {
  opacity: 0;
}
.w1host .intro .L-a .t4-warr {
  transition: opacity 300ms linear 4250ms;
}
.w1host .intro .spmv {
  animation: spmv 3000ms cubic-bezier(0.4, 0, 0.2, 1) 1350ms 1 forwards;
}
@keyframes spmv {
  0% {
    stroke-dashoffset: 0.1;
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
}
.w1host .pre .bound,
.w1host .pre .t4-lexp,
.w1host .pre .remote {
  opacity: 0;
}
.w1host .intro .bound,
.w1host .intro .t4-lexp,
.w1host .intro .remote {
  transition: opacity 500ms linear 4400ms;
}
@keyframes mvrev {
  0% {
    stroke-dashoffset: -1;
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0.16;
    opacity: 0;
  }
}
.w1host .tobe .run .r.on:not(.arc) .media-view {
  animation-name: mvrev;
}
.w1host .r.fl .media-view {
  animation: mvrev 950ms cubic-bezier(0.35, 0, 0.45, 1) forwards;
}
.w1host .r.arc.fl .media-view {
  animation-name: mvrun;
}
.w1host .media-view {
  fill: none;
  stroke: var(--acc-purple-hi);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0.16 1;
  stroke-dashoffset: 0.16;
  opacity: 0;
  pointer-events: none;
}
.w1host .run .on .media-view {
  animation: mvrun 950ms cubic-bezier(0.35, 0, 0.45, 1) forwards;
  animation-delay: calc(var(--c) * 210ms + 120ms);
}
@keyframes mvrun {
  0% {
    stroke-dashoffset: 0.16;
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
}
.w1host .tobe .L-a .media-view {
  display: none;
}
.w1host .L-cov {
  pointer-events: none;
}
.w1host .L-cov .seg {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition:
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 300ms linear;
  transition-delay: calc(var(--c) * 110ms);
}
.w1host .L-cov .seg.lab,
.w1host .L-cov .seg.flow,
.w1host .coverage-tns .seg {
  transform-origin: 50% 50%;
}
.w1host .L-cov .seg {
  transform: scaleX(0);
  opacity: 0;
}
.w1host .coverage .L-cov .seg {
  transform: none;
  opacity: 1;
}
.w1host .cov0 .L-cov .seg {
  transform: scaleX(0);
  opacity: 0;
}
.w1host .cov0 .coverage-tns .seg,
.w1host .coverage .coverage-tns .seg {
  transition-delay: calc(var(--c) * 110ms + 900ms);
}
.w1host .L-cov .coverage-tl,
.w1host .L-cov .coverage-td,
.w1host .L-cov .coverage-len,
.w1host .L-cov .coverage-lko {
  opacity: 0;
  transition: opacity 400ms linear;
}
.w1host .coverage .coverage-tl,
.w1host .coverage .coverage-td,
.w1host .coverage .coverage-len,
.w1host .coverage .coverage-lko {
  opacity: 1;
  transition-delay: 200ms;
}
.w1host .coverage-tl {
  stroke: var(--role-subject);
  stroke-opacity: 0.45;
  stroke-width: 1;
}
.w1host .coverage-td {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  fill: var(--n-500);
  text-anchor: end;
}
.w1host .coverage-dia {
  fill: var(--role-subject);
  fill-opacity: 0.8;
}
.w1host .coverage-drop {
  stroke: var(--role-subject);
  stroke-opacity: 0.4;
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.w1host .coverage-len {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  fill: var(--n-500);
  text-anchor: end;
}
.w1host .coverage-lko {
  font-size: 13px;
  font-weight: 500;
  fill: var(--n-200);
  text-anchor: end;
}
.w1host .coverage-p .coverage-wordmark {
  fill: var(--n-0);
}
.w1host .coverage-korean {
  font-size: 11px;
  fill: var(--n-400);
}
.w1host .coverage-bar {
  fill: var(--n-400);
}
.w1host .MLS .coverage-bar {
  fill: var(--acc-mint);
}
.w1host .MLG .coverage-bar {
  fill: var(--acc-coral);
}
.w1host .MPT .coverage-bar {
  fill: var(--acc-blue);
}
.w1host .coverage-chip {
  fill: rgba(12, 12, 23, 0.9);
  stroke: rgba(221, 221, 227, 0.16);
}
.w1host .coverage-cht {
  font-family: var(--font-sans);
  fill: var(--n-200);
}
.w1host .coverage-cht .m {
  font-family: var(--font-mono);
  fill: var(--n-500);
  font-size: 8.5px;
}
.w1host .coverage-upload {
  stroke: var(--acc-mint);
  stroke-width: 1.3;
  fill: none;
}
.w1host .coverage-uph {
  fill: var(--acc-mint);
}
.w1host .coverage-dn {
  stroke: var(--n-400);
  stroke-width: 1.1;
  stroke-dasharray: 3 4;
  fill: none;
}
.w1host .coverage-dnh {
  fill: var(--n-400);
}
.w1host .coverage-fl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}
.w1host .coverage-fl.up {
  fill: var(--acc-mint);
}
.w1host .coverage-fl.dn {
  fill: var(--n-400);
}
.w1host .t4-rail,
.w1host .t4-gh,
.w1host .t4-grule,
.w1host .t4-grp,
.w1host .t4-railh,
.w1host .t4-ln {
  transition: opacity 300ms linear;
}
.w1host .coverage .t4-rail,
.w1host .coverage .t4-gh,
.w1host .coverage .t4-grule,
.w1host .coverage .t4-railh,
.w1host .coverage .t4-ln,
.w1host .coverage .t4-row:not(.on) {
  opacity: 0;
}
.w1host .coverage .g0 .t4-grp {
  opacity: 0;
}
.w1host .coverage .solbar {
  opacity: 0;
  pointer-events: none;
}
.w1host .solbar {
  transition: opacity 300ms;
}
.w1host .coverage .fsb {
  opacity: 0;
  pointer-events: none;
}
.w1host .fsb {
  transition:
    opacity 300ms,
    transform 700ms var(--ease-standard);
}
.w1host .ph0 .scan {
  opacity: 1;
  animation: scanx 1100ms linear forwards;
}
.w1host .L-a .t4-wire {
  transition: stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.w1host .L-a .t4-warr {
  transition: opacity 300ms linear;
}
.w1host .noanim,
.w1host .noanim * {
  transition: none !important;
  animation: none !important;
}
.w1host .noscan .scan {
  animation: none !important;
  opacity: 0 !important;
}
.w1host .scan,
.w1host .prog {
  opacity: 0;
  pointer-events: none;
}
.w1host .scan {
  stroke: var(--acc-purple-hi);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(181, 181, 252, 0.9));
}
.w1host .prog {
  stroke: var(--acc-purple-hi);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.w1host .mo {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--n-500);
}
.w1host .mo button {
  border-style: dashed;
}
.w1host .e {
  transform-box: fill-box;
  transform-origin: center;
}
.w1host .bandrect {
  transform-box: view-box;
  transform-origin: 0 420px;
}
.w1host .chip {
  transform-box: fill-box;
  transform-origin: center;
}
.w1host .m-a.ph1 .scan {
  opacity: 1;
  animation: scanx 1100ms linear forwards;
}
@keyframes scanx {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(1100px);
  }
}
.w1host .m-a.ph1 .L-a .e {
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 300ms ease-in,
    transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--c) * 140ms + 80ms);
}
.w1host .m-a.ph1 .L-a .t4-wire,
.w1host .m-a.ph1 .L-a .t4-warr {
  opacity: 0;
  transition: opacity 900ms linear 200ms;
}
.w1host .m-a.ph1 .cell.auto .t4-row.on {
  fill: var(--acc-purple-tint);
  stroke: var(--role-subject);
  stroke-opacity: 0.5;
  transition-delay: calc(var(--c) * 140ms + 120ms);
}
.w1host .m-a.ph1 .cell.auto .t4-cell.b {
  opacity: 1;
  transition-delay: calc(var(--c) * 140ms + 120ms);
}
.w1host .m-a.ph1 .cell.auto .t4-cell.a {
  opacity: 0;
  transition-delay: calc(var(--c) * 140ms + 120ms);
}
.w1host .m-a .bandrect {
  transform: scaleY(0.04);
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.w1host .m-a.tobe .bandrect {
  transform: none;
}
.w1host .m-a .L-b .chip {
  opacity: 0;
  transition: opacity 260ms linear;
}
.w1host .m-a.tobe .L-b .chip {
  opacity: 1;
  transition-delay: calc(var(--c) * 60ms + 320ms);
}
.w1host .m-a .L-b .r {
  transition: clip-path 460ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.w1host .m-a .L-b .r.up {
  clip-path: inset(100% -6px -6px -6px);
}
.w1host .m-a .L-b .r.dn {
  clip-path: inset(-6px -6px 100% -6px);
}
.w1host .m-a .L-b .r.arc {
  clip-path: inset(-6px 50% -6px 50%);
}
.w1host .m-a.tobe .L-b .r.up,
.w1host .m-a.tobe .L-b .r.dn {
  clip-path: inset(-6px);
  transition-delay: calc(var(--c) * 90ms + 620ms);
}
.w1host .m-a.tobe .L-b .r.arc {
  clip-path: inset(-6px);
  transition-delay: calc(var(--c) * 90ms + 900ms);
}
.w1host .m-a.tobe.off .L-b .r.up {
  clip-path: inset(100% -6px -6px -6px);
}
.w1host .m-a.tobe.off .L-b .r.dn {
  clip-path: inset(-6px -6px 100% -6px);
}
.w1host .m-a.tobe.off .L-b .r.arc {
  clip-path: inset(-6px 50% -6px 50%);
}
.w1host .m-a.tobe.off .L-b .r.up,
.w1host .m-a.tobe.off .L-b .r.dn,
.w1host .m-a.tobe.off .L-b .r.arc {
  transition-delay: calc((6 - var(--c)) * 90ms);
  transition-duration: 380ms;
}
.w1host .m-a.off .L-b .chip {
  opacity: 0;
  transition-delay: calc((6 - var(--c)) * 40ms);
}
.w1host .m-a.off .L-a .e {
  opacity: 0;
  transform: scale(0.15);
  transition: none;
}
.w1host .m-a.off .L-a,
.w1host .m-a.rein .L-a {
  transition: none;
}
.w1host .m-a.off .L-a .t4-wire,
.w1host .m-a.off .L-a .t4-warr {
  opacity: 0;
  transition: none;
}
.w1host .m-a.rein .L-a .e {
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms ease-out,
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--c) * 110ms + 200ms);
}
.w1host .m-a.rein .L-a .t4-wire {
  transition: opacity 600ms linear 300ms;
}
.w1host .m-a .t4-bandl,
.w1host .m-a .t4-wire.b,
.w1host .m-a .t4-warr.b {
  opacity: 0;
  transition: opacity 400ms linear;
}
.w1host .m-a.tobe .t4-bandl,
.w1host .m-a.tobe .t4-wire.b,
.w1host .m-a.tobe .t4-warr.b {
  opacity: 1;
  transition-delay: 380ms;
}
.w1host .m-a.ph1 .t4-bind.a {
  opacity: 0;
  transition: opacity 260ms linear;
  transition-delay: calc(var(--c) * 140ms + 80ms);
}
.w1host .tobe .scan,
.w1host .tobe .prog {
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .w1host * {
    transition: none !important;
    animation: none !important;
  }
}
#w1 .lg {
  margin: 0;
  list-style: none;
  padding: 0;
}
/* ===== 결정 213: P1 W1 모바일 세로형 ===== */
.pr-page .mobile-workflow {
  display: none;
  margin: 0;
  color: var(--n-0);
}
@media (max-width: 767px) {
  .pr-page .w1host .dia {
    display: none;
  }
  .pr-page .w1scroll {
    height: calc(100svh * 2.8) !important;
  }
  .pr-page .w1scroll #w1 {
    position: sticky;
    top: var(--mstk, 72px);
  }
  .pr-page .mobile-workflow {
    display: block;
    width: var(--mw, 100%);
    margin: 0 auto;
  }
}
.mobile-workflow .m-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mobile-workflow .m-dl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--acc-purple, #7168d4);
}
.mobile-workflow .m-tabs {
  display: flex;
  gap: 2px;
  background: rgba(221, 221, 227, 0.06);
  border: 1px solid rgba(221, 221, 227, 0.12);
  border-radius: 8px;
  padding: 2px;
}
.mobile-workflow .m-tab {
  appearance: none;
  border: 0;
  background: none;
  color: var(--n-400);
  font: 500 11.5px/1 var(--font-sans, inherit);
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
}
.mobile-workflow.s0 .m-tab[data-s="0"],
.mobile-workflow.s1 .m-tab[data-s="1"],
.mobile-workflow.s2 .m-tab[data-s="2"] {
  background: rgba(221, 221, 227, 0.12);
  color: var(--n-0);
}
.mobile-workflow .m-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.mobile-workflow text {
  font-family: var(--font-sans, inherit);
}
.mobile-workflow .m-hr {
  stroke: rgba(221, 221, 227, 0.14);
  stroke-width: 0.8;
}
.mobile-workflow .m-sn {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--acc-purple, #7168d4);
}
.mobile-workflow .m-sa {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--n-400);
  letter-spacing: 0.04em;
}
.mobile-workflow .m-gh {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  fill: var(--n-500);
}
.mobile-workflow .m-ln {
  font-size: 10px;
  fill: var(--n-200);
}
.mobile-workflow .m-lg {
  stroke: rgba(221, 221, 227, 0.07);
  stroke-width: 0.6;
}
.mobile-workflow .m-nb {
  fill: #15151f;
  stroke: rgba(221, 221, 227, 0.3);
  stroke-width: 0.8;
}
.mobile-workflow .m-nt {
  font-size: 10.5px;
  font-weight: 500;
  fill: var(--n-0);
}
.mobile-workflow .m-e {
  fill: none;
  stroke: rgba(221, 221, 227, 0.55);
  stroke-width: 0.9;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.mobile-workflow .m-b {
  fill: none;
  stroke: var(--acc-coral);
  stroke-opacity: 0.75;
  stroke-width: 0.9;
  stroke-dasharray: 2 2;
  opacity: 0;
}
.mobile-workflow .m-sp {
  stroke: var(--acc-purple, #7168d4);
  stroke-width: 3;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: top;
  transform: scaleY(0);
}
.mobile-workflow .m-sq {
  fill: var(--acc-purple, #7168d4);
  opacity: 0;
}
.mobile-workflow .m-c {
  stroke: var(--acc-purple, #7168d4);
  stroke-opacity: 0.55;
  stroke-width: 1;
  stroke-dasharray: 3 2;
  opacity: 0;
}
.mobile-workflow .m-c.a {
  stroke-dasharray: none;
  stroke-opacity: 0.8;
}
.mobile-workflow .m-n {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.6);
}
.mobile-workflow .m-grid,
.mobile-workflow .m-cov {
  transition: opacity 420ms ease;
}
/* 커버리지 */
.mobile-workflow .mc-wm {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--n-0);
  letter-spacing: -0.01em;
}
.mobile-workflow .mc-for {
  font-family: var(--font-mono);
  font-size: 8.5px;
  fill: var(--n-400);
}
.mobile-workflow .mc-bar {
  stroke-width: 3;
  stroke-linecap: round;
}
.mobile-workflow .mc-bar.off {
  stroke: rgba(221, 221, 227, 0.12);
}
.mobile-workflow .mc-t {
  font-size: 11px;
  fill: var(--n-100);
}
.mobile-workflow .mc-n {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--n-400);
}
.mobile-workflow .mc-tns {
  stroke: var(--acc-purple, #7168d4);
  stroke-opacity: 0.5;
}
.mobile-workflow .mc-tnsl {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--acc-purple, #7168d4);
}
.mobile-workflow .mc-dia {
  fill: var(--acc-purple, #7168d4);
}
.mobile-workflow .mc-ar {
  stroke: var(--n-200);
  stroke-width: 1;
  fill: none;
}
.mobile-workflow .mc-ar.dn {
  stroke-dasharray: 3 2;
}
.mobile-workflow .m-arh {
  fill: var(--n-200);
}
.mobile-workflow .mc-arl {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--n-400);
  letter-spacing: 0.06em;
}
.mobile-workflow .m-scan {
  stroke: var(--acc-purple, #7168d4);
  stroke-width: 1.5;
  opacity: 0;
}
/* 상태 */
.mobile-workflow.s0 .m-p2 {
  opacity: 0;
}
.mobile-workflow .m-p2 {
  transition: opacity 300ms ease;
}
.mobile-workflow:not(.s0) .m-cov {
  opacity: 0;
  pointer-events: none;
}
.mobile-workflow.s0 .m-cov .mc-r {
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms ease,
    transform 380ms ease;
  transition-delay: calc(var(--r) * 60ms);
}
.mobile-workflow .m-cov .mc-r {
  opacity: 0;
  transform: translateY(6px);
}
.mobile-workflow:not(.s0) .m-n {
  opacity: 1;
  transform: none;
  transition:
    opacity 320ms ease-out,
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--r) * 90ms + 120ms);
}
.mobile-workflow.s1 .m-e {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 700ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--r) * 90ms + 420ms);
}
.mobile-workflow.s1 .m-b {
  opacity: 1;
  transition: opacity 400ms ease;
  transition-delay: calc(var(--r) * 90ms + 900ms);
}
.mobile-workflow.s2 .m-e {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 420ms ease-in;
  transition-delay: calc((6 - var(--r)) * 50ms);
}
.mobile-workflow.s2 .m-b {
  opacity: 0;
  transition: opacity 240ms ease;
}
.mobile-workflow.s2 .m-sp {
  transform: scaleY(1);
  transition: transform 1100ms cubic-bezier(0.4, 0, 0.2, 1) 380ms;
}
.mobile-workflow.s2 .m-sq {
  opacity: 1;
  transition: opacity 300ms ease;
  transition-delay: calc(var(--r) * 150ms + 480ms);
}
.mobile-workflow.s2 .m-c {
  opacity: 1;
  transition: opacity 360ms ease;
  transition-delay: calc(var(--r) * 150ms + 620ms);
}
.mobile-workflow.s2 .m-n.h .m-nb {
  stroke: var(--acc-purple, #7168d4);
  transition-delay: calc(var(--r) * 150ms + 700ms);
}
.mobile-workflow.s2 .m-n.x {
  opacity: 0.55;
}
.mobile-workflow.s2 .m-n.x .m-nb {
  stroke-dasharray: 3 2;
}
.mobile-workflow .m-lg .bx.h {
  border-color: var(--acc-purple, #7168d4);
}
.mobile-workflow .m-lg .bx.x {
  border-style: dashed;
  border-color: var(--n-500);
}
.mobile-workflow.s2 .m-n.a .m-nb {
  fill: #1f1b45;
  stroke: var(--acc-purple, #7168d4);
  stroke-width: 1;
  transition:
    fill 300ms ease,
    stroke 300ms ease;
  transition-delay: calc(var(--r) * 150ms + 700ms);
}
.mobile-workflow .m-nb {
  transition:
    fill 240ms ease,
    stroke 240ms ease;
}
.mobile-workflow.m-scanon .m-scan {
  animation: mscan 1100ms linear forwards;
}
@keyframes mscan {
  0% {
    opacity: 0.9;
    transform: translateY(0);
  }
  90% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(var(--mh, 560px));
  }
}
.mobile-workflow.snap * {
  transition: none !important;
}
/* 범례 · 자세히 보기 */
.mobile-workflow .m-lg {
  display: none;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 16px;
  color: var(--n-300);
}
.mobile-workflow.s0 .m-lg0,
.mobile-workflow.s1 .m-lg1,
.mobile-workflow.s2 .m-lg2 {
  display: flex;
}
.mobile-workflow .m-lg span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.mobile-workflow .m-lg .sw {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.mobile-workflow .m-lg .ln {
  width: 16px;
  height: 0;
  border-top: 1px solid var(--n-200);
  display: inline-block;
}
.mobile-workflow .m-lg .ln.dn {
  border-top-style: dashed;
}
.mobile-workflow .m-lg .ln.bk {
  border-top: 1px dashed var(--acc-coral);
}
.mobile-workflow .m-lg .ln.order-lineage {
  border-top: 3px solid var(--acc-purple, #7168d4);
}
.mobile-workflow .m-lg .bx {
  width: 10px;
  height: 8px;
  border: 1px solid rgba(221, 221, 227, 0.4);
  border-radius: 2px;
  display: inline-block;
}
.mobile-workflow .m-lg .bx.a {
  border-color: var(--acc-purple, #7168d4);
  background: #1f1b45;
}
.mobile-workflow .m-more {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--n-0);
  font: 500 14px/22px var(--font-sans, inherit);
  cursor: pointer;
}
.mobile-workflow .m-more svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-workflow * {
    transition: none !important;
    animation: none !important;
  }
}
/* 결정 215: 풀버전 오버레이(모바일 · 터치) = PC 도식을 PC 비율 그대로 화면에 맞춘다. 세로 화면에서는 90도 돌려 긴 변을 쓴다. 확대 버튼으로 2.2배 + 끌어서 이동 */
.pr-page .workflow-rot,
.pr-page .workflow-zm {
  display: none;
}
@media (pointer: coarse), (max-width: 767px), (max-height: 500px) {
  .pr-page div.w1full {
    padding: 0;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: contain;
  }
  .pr-page .w1full.mob #w1f > .dia {
    display: none;
  }
  .pr-page .w1full .mobile-workflow-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1200px;
    margin: 0;
    transform-origin: center center;
    transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px))
      rotate(var(--rot, 0deg)) scale(var(--fs, 1));
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .pr-page .w1full.drag .mobile-workflow-stage {
    transition: none;
  }
  .pr-page .w1full .mobile-workflow-stage .dia {
    display: block !important;
    width: 100% !important;
    margin: 0;
    border-top: 0;
    padding-top: 0;
  }
  .pr-page .w1full .mobile-workflow-stage .fsb {
    display: none !important;
  }
  .pr-page .w1full .workflow-fs {
    display: inline-flex !important;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 3;
  }
  .pr-page .w1full.on .workflow-zm {
    display: inline-flex;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 3;
    align-items: center;
    gap: 6px;
    appearance: none;
    background: rgba(15, 15, 28, 0.72);
    border: 1px solid rgba(221, 221, 227, 0.14);
    border-radius: var(--radius);
    color: var(--n-200);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 6px 10px;
    cursor: pointer;
  }
}
@media (pointer: coarse) and (orientation: portrait),
  (max-width: 767px) and (orientation: portrait) {
  .pr-page .w1full.on .workflow-rot {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(15, 15, 28, 0.92);
    border: 1px solid rgba(221, 221, 227, 0.16);
    color: var(--n-100);
    font-size: 13px;
    line-height: 19px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .pr-page .workflow-rot svg {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .pr-page .workflow-rot button {
    margin-left: auto;
    appearance: none;
    border: 0;
    background: none;
    color: var(--n-400);
    font-size: 16px;
    padding: 4px 2px;
    cursor: pointer;
  }
  .pr-page .w1full.rot-x .workflow-rot,
  .pr-page .w1full.zoom .workflow-rot {
    display: none;
  }
}

/* ===== v4: Clerk형 경계(모서리 6px = --radius 라운드). 다크 판 SVG가 섹션 밑으로 44px 내려오고, 그림자가 라이트 면 위에 드리운다 ===== */
.pr-page .stage.pr1 {
  padding-bottom: 202px;
  clip-path: none;
  overflow: visible;
  z-index: 2;
}
/* 결정 203: 그림자는 SVG 한 장(4000px, 가운데 노치)이 화면 끝까지 잇는다. 섹션 box-shadow는 제거(양끝 이중 그림자 · 끊김 원인). 불투명도 .26 → .21 */
.pr-page .pr1-edgew {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -72px;
  height: 120px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.pr-page .pr1-edge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 4000px;
  height: 120px;
  display: block;
}
@media (max-width: 767px) {
  .pr-page .pr1-edgew {
    bottom: calc(-72 * 100vw / 1368);
    height: calc(120 * 100vw / 1368);
  }
  .pr-page .pr1-edge {
    width: calc(4000 * 100vw / 1368);
    height: calc(120 * 100vw / 1368);
  }
}
.pr-page .pr2 {
  margin-top: 0;
}
/* ===== v4: 내비를 독립 상자로. 모서리는 --radius의 배수(12px), 위 1px 하이라이트 + 아래 그림자로 얕은 입체 ===== */
.pr-page .nav {
  position: sticky;
  top: 12px;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  padding: 0 12px;
}
.pr-page .nav .navigation-content {
  height: 56px;
  padding: 0 8px 0 20px;
}
.pr-page .navigation-background {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius) * 2);
  border: 1px solid var(--line);
  transform: translateZ(-1px);
  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);
}
.pr-page .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);
}
.pr-page .nav .cta {
  display: none;
} /* 데모 신청은 각 페이지의 프리푸터에서. 이 페이지 내비에서는 뺀다 */

/* ===== W2 단계별 기능 매트릭스 (라이트). 세로선 없이 가로 경계선과 여백으로만 구분한다 ===== */
.w2wrap {
  margin-top: 48px;
}
.pr-page .pr2 {
  padding-bottom: 120px;
}
.pr-page .pr3 {
  padding-bottom: 144px;
}
.pr-page .prose .act {
  margin-top: 20px;
} /* 결정 209: 4-C IO 자세히 보기 → /company/#c2-c */ /* 결정 208: 카드 끝에서 배경이 바로 끝나지 않게 P4 진입 여백 */
.workflow-detail-pb {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 0;
  color: var(--text);
  border-bottom: 2px solid transparent;
  font: inherit;
}
.workflow-detail-pb .pwm {
  display: block;
  fill: currentColor;
}
.workflow-detail-pb:hover {
  color: var(--accent-text);
}
.workflow-detail-pb[aria-pressed="true"] {
  border-bottom-color: var(--text);
}
.workflow-detail-all {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  cursor: pointer;
  margin-left: 12px;
  line-height: 1;
}
.workflow-detail-all[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--text);
}
.workflow-detail .sw {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 auto;
}
.workflow-detail .sw.MLS {
  background: var(--acc-mint);
}
.workflow-detail .sw.MLG {
  background: var(--acc-coral);
}
.workflow-detail .sw.MPT {
  background: var(--acc-blue);
}
.workflow-detail-grid {
  border-top: 1px solid var(--text);
}
.workflow-detail-row {
  display: grid;
  grid-template-columns: 172px repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  border-bottom: 1px solid var(--line);
  transition: opacity var(--dur-base) var(--ease-standard);
}
.workflow-detail-row.workflow-detail-hd {
  border-bottom: 1px solid var(--line);
}
.workflow-detail-card {
  padding: 18px 0 22px;
  min-width: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.workflow-detail-hd .workflow-detail-card {
  padding: 10px 0 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  color: var(--text);
}
.workflow-detail-hd .workflow-detail-card.workflow-detail-step {
  flex-direction: row;
  align-items: center;
  gap: 0;
}
.workflow-detail-hd .workflow-detail-card .pwm {
  display: block;
  fill: currentColor;
}
.workflow-detail-axis {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--n-400);
}
.workflow-detail-clogo,
.workflow-detail-mlg,
.workflow-detail-cnt,
.workflow-detail-chev,
.workflow-detail-preview,
.workflow-detail-hint {
  display: none;
} /* 결정 214: 모바일 단계별 접기 전용 */
.workflow-detail-sb {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  font: inherit;
}
.workflow-detail-number {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
.workflow-detail-sen {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 20px;
}
.workflow-detail-sko {
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}
.workflow-detail-sb:hover .workflow-detail-sen {
  color: var(--accent-text);
}
.workflow-detail-sb[aria-pressed="true"] .workflow-detail-sen {
  color: var(--accent-text);
}
.workflow-detail-item {
  padding: 6px 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--text);
  word-break: keep-all;
}
.workflow-detail-item + .workflow-detail-item {
  border-top: 1px solid var(--line);
}
.workflow-detail-item b {
  font-weight: 500;
  display: block;
}
.workflow-detail-cell.P-TNS .workflow-detail-item b {
  color: var(--muted);
  font-weight: 400;
}
/* 필터: 제품은 열, 단계는 행을 남긴다 */
.workflow-detail.fp .workflow-detail-card.P-MLS,
.workflow-detail.fp .workflow-detail-card.P-MLG,
.workflow-detail.fp .workflow-detail-card.P-MPT {
  opacity: 0.18;
}
.workflow-detail.fp.p-MLS .workflow-detail-card.P-MLS,
.workflow-detail.fp.p-MLG .workflow-detail-card.P-MLG,
.workflow-detail.fp.p-MPT .workflow-detail-card.P-MPT {
  opacity: 1;
}
.workflow-detail.fs .workflow-detail-row:not(.workflow-detail-hd) {
  opacity: 0.18;
}
.workflow-detail.fs .workflow-detail-row.on {
  opacity: 1;
}
@media (max-width: 1100px) {
  .workflow-detail-row {
    grid-template-columns: 140px repeat(3, minmax(0, 1fr));
    column-gap: 16px;
  }
}
@media (max-width: 767px) {
  .w2wrap {
    margin-top: 32px;
  }
  .workflow-detail-row.workflow-detail-hd {
    display: none;
  }
  .workflow-detail-row {
    display: block;
    padding: 16px 0 6px;
  }
  .workflow-detail-card {
    padding: 0;
  }
  .workflow-detail-card.workflow-detail-step {
    padding-bottom: 10px;
  }
  .workflow-detail-sb {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .workflow-detail-cell {
    padding: 8px 0 12px;
  }
  .workflow-detail-cell.empty {
    display: none;
  }
  .workflow-detail-row {
    padding: 0;
  }
  .workflow-detail-row[data-s] {
    border-bottom: 1px solid var(--line);
  }
  .workflow-detail-card.workflow-detail-step {
    padding: 0;
  }
  .workflow-detail-sb {
    width: 100%;
    display: grid !important;
    grid-template-columns: 22px auto 1fr auto 26px;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 3px;
    align-items: baseline;
    padding: 14px 0 13px;
  }
  .workflow-detail-sb .workflow-detail-number {
    grid-column: 1;
    grid-row: 1;
  }
  .workflow-detail-sb .workflow-detail-sen {
    grid-column: 2;
    grid-row: 1;
  }
  .workflow-detail-sb .workflow-detail-sko {
    grid-column: 3;
    grid-row: 1;
    font-size: 12px;
  }
  .workflow-detail-preview {
    display: block !important;
    grid-column: 2 / 5;
    grid-row: 2;
    font-size: 12px;
    line-height: 17px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .workflow-detail-cnt {
    grid-column: 4;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    justify-self: end;
  }
  .workflow-detail-cnt i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    margin-left: 7px;
  }
  .workflow-detail-cnt em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
  }
  .workflow-detail-chev {
    display: inline-flex !important;
    grid-column: 5;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    width: 16px;
    height: 16px;
    position: relative;
  } /* 결정 217: 원형 +/- 대신 얇은 셰브런 */
  .workflow-detail-chev::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 3px;
    width: 7px;
    height: 7px;
    border-right: 1.3px solid var(--muted);
    border-bottom: 1.3px solid var(--muted);
    transform: rotate(45deg);
    transition:
      transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
      top 280ms;
  }
  .workflow-detail-row.workflow-detail-open .workflow-detail-chev::before {
    transform: rotate(-135deg);
    top: 7px;
    border-color: var(--text);
  }
  .workflow-detail-row.workflow-detail-open .workflow-detail-preview {
    visibility: hidden;
  }
  .workflow-detail-cell {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    transition:
      max-height 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 260ms ease,
      padding 380ms ease;
  }
  .workflow-detail-cell.empty {
    display: none;
  }
  .workflow-detail-row.workflow-detail-open .workflow-detail-cell:not(.empty) {
    max-height: 1400px;
    opacity: 1;
    padding: 2px 0 12px;
  }
  .workflow-detail-clogo {
    display: flex !important;
    align-items: center;
    gap: 7px;
    margin: 6px 0 2px;
    color: var(--text);
  }
  .workflow-detail-clogo i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }
  .workflow-detail-clogo .pwm {
    display: block;
    fill: currentColor;
  }
  .workflow-detail-mlg {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 0 0 12px;
    color: var(--text);
  }
  .workflow-detail-mlk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .workflow-detail-mlk i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }
  .workflow-detail-mlk .pwm {
    display: block;
    fill: currentColor;
  }
  .workflow-detail-hint {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 0 12px;
    border-top: 1px solid var(--text);
    font-size: 12px;
    line-height: 17px;
    color: var(--muted);
  }
  .workflow-detail-hint b {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 4px 3px 2px;
    border-right: 1.3px solid var(--muted);
    border-bottom: 1.3px solid var(--muted);
    transform: rotate(45deg);
  }
  .workflow-detail.fp .workflow-detail-cell,
  .workflow-detail.fs .workflow-detail-row {
    opacity: 1;
  }
}

/* ===== 2-A 구간에서 내비가 뒤집혀 제품 열 머리가 된다(3D flip). 앞면 = 메뉴, 뒷면 = 제품 워드마크(열 x좌표에 맞춤) ===== */
.pr-page .nav {
  perspective: 1400px;
}
.pr-page .nav .navigation-content {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 640ms var(--ease);
}
.pr-page .nav .navigation-content > .logo,
.pr-page .nav .navigation-content > .menu,
.pr-page .nav .navigation-content > .burger,
.pr-page .nav .navigation-content > .cta {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pr-page .nav.flip .navigation-content {
  transform: rotateX(180deg);
}
.pr-page .navalt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  transform: rotateX(180deg) translateZ(2px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: var(--text);
  pointer-events: none;
}
.pr-page .nav.flip .navalt {
  pointer-events: auto;
}
.pr-page .nav.on-dark .navalt {
  color: var(--n-0);
}
.pr-page .nav-flip {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.pr-page .nav-flip .ic {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pr-page .nav-flip i {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
}
.pr-page .nav-flip:hover {
  color: var(--accent-text);
}
.pr-page .na-p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--x, 0);
  display: block;
  line-height: 0;
  opacity: 0;
  transition: opacity 300ms linear 300ms;
}
.pr-page .nav.flip .na-p {
  opacity: 1;
}
.pr-page .na-p .pwm {
  display: block;
  fill: currentColor;
}
.pr-page .na-div {
  position: absolute;
  top: 50%;
  left: var(--x, 0);
  width: 1px;
  height: 26px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 300ms linear 300ms;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(15, 15, 28, 0.16) 20%,
    rgba(15, 15, 28, 0.16) 80%,
    transparent
  );
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.65);
} /* 음각: 어두운 선 + 오른쪽 1px 하이라이트 */
.pr-page .nav.on-dark .na-div {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 0, 0, 0.55) 20%,
    rgba(0, 0, 0, 0.55) 80%,
    transparent
  );
  box-shadow: 1px 0 0 rgba(221, 221, 227, 0.1);
}
.pr-page .nav.flip .na-div {
  opacity: 1;
}
/* 결정 286: 2-A 제품 열 구분선. 평소에는 보이지 않고 마우스가 가까이 가면 커서 주변(반경 260px)만 드러난다(Knowledge AI 히어로 스포트라이트와 같은 방식). 머리 행 아래부터 06 FINISHING 행 끝까지 */
.workflow-detail-grid {
  position: relative;
}
.workflow-detail-vl {
  position: absolute;
  width: 1px;
  pointer-events: none;
  z-index: 2;
  background: rgba(15, 15, 28, 0.22);
  opacity: 0;
  transition: opacity 350ms;
  -webkit-mask-image: radial-gradient(
    circle 260px at var(--mx, -999px) var(--my, -999px),
    #000 0,
    rgba(0, 0, 0, 0.55) 45%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle 260px at var(--mx, -999px) var(--my, -999px),
    #000 0,
    rgba(0, 0, 0, 0.55) 45%,
    transparent 100%
  );
}
.workflow-detail-grid.vl-on .workflow-detail-vl {
  opacity: 1;
}
@media (hover: none), (max-width: 1099px), (prefers-reduced-motion: reduce) {
  .workflow-detail-vl {
    display: none;
  }
}
@media (max-width: 1099px) {
  .pr-page .nav.flip .navigation-content {
    transform: none;
  }
  .pr-page .navalt {
    display: none;
  }
}

/* ===== 결정 202: D-P1 + D-P2 합본. 인라인 #w1은 스크롤 고정(sticky) 3단계(커버리지 → AS-IS → TO-BE), 전체 화면 #w1f는 여유 간격 변형 + 리모컨 ===== */
.pr-page .w1scroll {
  height: calc(100vh * 2.8);
}
.pr-page .w1host {
  position: relative;
}
.pr-page #w1 {
  position: sticky;
  top: var(--stk, 72px);
}
.pr-page #w1 .dia {
  width: var(--diaw, 100%);
  margin-left: auto;
  margin-right: auto;
  border-top: 0;
  padding-top: 0;
} /* 2026.09.29(결정 283): 도식 본체 기준 가운데 정렬(오른쪽 PQCD 리모컨 열은 폭 계산에서 제외). 상단 테두리선 삭제 */
.pr-page #w1 .dia-head {
  height: 16px;
  margin-bottom: 8px;
  align-items: center;
}
.pr-page #w1 .dia-foot {
  margin-top: 8px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  padding-left: 0;
  width: 100%;
  max-width: none;
  position: static;
  transform: none;
} /* 결정 286: SOLUTION 버튼 위치를 D-P1 · D-P2 모두 도식 왼쪽 끝(D-P2 기준)에 고정, 범례는 그 뒤에 이어 붙임 */
.pr-page #w1 .solbar {
  flex: none;
  gap: 6px;
}
.pr-page #w1 .solbar button {
  padding: 4px 8px 3px 7px;
  font-size: 11px;
}
.pr-page #w1 .lg {
  flex: none;
  flex-wrap: nowrap;
  gap: 14px;
  letter-spacing: 0.02em;
}
/* 2026.10.01(결정 317): 도식 크기를 상태별로 맞춘다. D-P1(커버리지)은 도식 본체(1200 단위)를 그리드 폭까지 키우고, D-P2는 높이 기준. 균형 유지를 위해 svg 전체를 같은 배율로만 확대 */
.pr-page #w1 .t4w {
  width: var(--svgw, calc(100% * var(--wr))) !important;
}
.pr-page #w1.s0 .t4wrap {
  overflow: hidden;
} /* 커버리지 상태에서는 오른쪽 리모컨 열이 비어 있으므로 잘라 가로 스크롤을 막는다 */
/* 결정 317: 범례는 도식 머리 줄 오른쪽(도식 틀 오른쪽 끝 정렬), SOLUTION 바는 아래 줄 왼쪽(레인 이름 열 정렬) */
.pr-page #w1 .dia-head {
  height: auto;
  min-height: 16px;
  margin-bottom: 10px;
  align-items: center;
  gap: 24px;
}
.pr-page #w1 .dia-head .dcap {
  display: none;
}
.pr-page #w1 .dlabel,
.pr-page #w1m .m-dl,
.pr-page #w1f .dlabel {
  display: none;
} /* 결정 318: 도식 번호(D-P1 · D-P2) 표기 삭제. 머리 줄은 범례만 오른쪽 정렬 */
.pr-page #w1 .dia-head .lg {
  margin-left: auto;
  justify-content: flex-end;
}
.pr-page #w1 .dia-foot {
  display: none;
}
.pr-page #w1 .dia-head {
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 16px;
}
.pr-page #w1 .dia-head .lg {
  gap: 12px;
  word-spacing: -0.2em;
} /* 결정 319: 고정폭 글꼴의 넓은 띄어쓰기를 줄여 SOLUTION 바와 범례를 1280px에서도 한 줄로 */
.pr-page #w1 .coverage .solbar {
  opacity: 1;
  pointer-events: none;
} /* 결정 285: D-P1(커버리지)도 D-P2와 같은 SOLUTION 바 + 범례 한 줄. 커버리지 상태에서는 표시만(필터 동작 없음) */
.pr-page #w1 .lg .k10,
.pr-page #w1 .lg .k11,
.pr-page #w1 .lg .k12 {
  display: none;
}

#w1 .tog,
#w1 .bound {
  display: none;
} /* 페이지에서는 클릭 전환 없음. 스크롤이 상태를 정한다 */
.pr-page .workflow-fs {
  position: fixed;
  right: 24px;
  top: 20px;
  appearance: none;
  background: none;
  border: 1px solid rgba(221, 221, 227, 0.14);
  border-radius: var(--radius);
  color: var(--n-300);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 6px 10px 6px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
}
.pr-page .workflow-fs:hover {
  color: var(--n-0);
  border-color: var(--n-500);
}
.w1host .fsb {
  display: block;
  pointer-events: auto;
}
.pr-page .w1full {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--n-950);
  display: none;
  padding: 64px 48px 32px;
  overflow: auto;
}
.pr-page .w1full.on {
  display: block;
}
.pr-page .w1full .w1host {
  max-width: none;
}
.pr-page .w1full .dia {
  width: 100%;
  margin: 0 auto;
  border-top: 0;
  padding-top: 0;
} /* 결정 203: 양끝 48px 여백만 두고 폭을 채운다. 높이는 AS-IS에서도 TO-BE 기준(data-fixh)으로 확보해 전환 시 레이아웃이 뛰지 않는다 */
#w1f .fsb {
  display: none;
} /* 우상단 CLOSE만 남긴다 */
.pr-page .w1full .dia-head {
  margin-bottom: 16px;
}
.pr-page .w1full .dia-foot {
  flex-wrap: nowrap;
}
.pr-page .w1full .lg {
  flex-wrap: nowrap;
}
.pr-page .w1full .lg span {
  white-space: nowrap;
}
.pr-page .w1full .t4w {
  width: 100%;
}
body.workflow-lock {
  overflow: hidden;
}
body.workflow-lock .pr-page .nav {
  opacity: 0;
  pointer-events: none;
}
.pr-page .stage.pr1:has(.w1full.on) {
  z-index: 60;
  isolation: auto;
}
@media (max-width: 767px) {
  .pr-page .workflow-fs {
    display: none;
  }
}
/* ===== 열 머리 장치: 라이트 배경 위 픽토그램(Knowledge AI 계열). 진입 시 올라오고 화면 프레임(on)이 켜진다 ===== */
.workflow-detail-dev {
  position: relative;
  width: 100%;
  aspect-ratio: 4/2.6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
}
.workflow-detail-dbox {
  position: relative;
  transform: translateY(14px);
  opacity: 0;
  transition:
    transform 900ms var(--ease),
    opacity 700ms linear;
}
.workflow-detail-dev.on .workflow-detail-dbox {
  transform: none;
  opacity: 1;
}
.workflow-detail-dbox img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 결정 189: 세 칸 공통 바닥선(헤어라인). 오브젝트는 바닥선에 접지, 스크린 카드는 바닥선 위로 떠 있다. 강조색은 카드 상단 3px 선 + 헤더 점에만 */
.workflow-detail-dev::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 14px;
  border-top: 1px solid var(--n-300);
}
/* 결정 198: 모니터·디바이스 정면 픽토그램. 세 칸 같은 바닥선 */
.workflow-detail-scr {
  position: absolute;
  overflow: hidden;
  border-radius: 2px;
}
.workflow-detail-scr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.workflow-detail-dbox.workflow-detail-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6%;
  aspect-ratio: 1168/785;
} /* 결정 208: 모니터 화면 중심과 세로 중앙 정렬(모니터 화면 중심 = 상자 37% 지점 근사) */
.workflow-detail-devb {
  position: relative;
  height: 62%;
  aspect-ratio: 300/649;
  align-self: flex-end;
  transform: translateY(-2%);
} /* 결정 284: 디바이스 4% 위로(상자 높이의 2.5%) */ /* 결정 221: 디바이스 본체 밑면(이미지 y 580/649, 아래는 접지 그림자)을 모니터 받침 밑면(모니터 상자 y 746/785)에 맞춘다. 실측 보정 후 +2%. 태블릿은 화면 중심 정렬 유지 */
.workflow-detail-devb img.workflow-detail-dimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.workflow-detail-tab {
  position: relative;
  height: 68%;
  aspect-ratio: 600/440;
  transform: translateY(-21.4%);
} /* 결정 284: 디바이스가 올라간 만큼(상자 높이의 2.5%) 태블릿을 아래로 */ /* 1.2배, 17%/68% */
.workflow-detail-tab img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.workflow-detail-ph .workflow-detail-pb {
  display: inline-flex;
  align-items: center;
}
.workflow-detail-ph .workflow-detail-lab {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
@media (max-width: 900px) {
  .workflow-detail-ph .workflow-detail-lab {
    gap: 8px;
    flex-wrap: wrap;
  }
} /* 결정 210: 768px에서 for Trims 0.8px 넘침(QA)*/
.workflow-detail-for {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--n-400);
  white-space: nowrap;
}
/* STAGE / PRODUCT 라벨을 단계 열(00 SAMPLE)과 같은 좌측 그리드에 맞춘다 */
.workflow-detail-hd .workflow-detail-card.workflow-detail-step {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: 14px;
}
.workflow-detail-pb {
  border-bottom: 2px solid transparent;
}
.workflow-detail-caption {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 1px 1.2px rgba(15, 15, 28, 0.12));
}
/* 결정 221: 열 머리 스켈레톤 화면 모션. 도달(.w2-dev.on) 시 게이지가 차고, 표 행이 위로 흐르고, 태블릿 막대가 오르내리고, 디바이스 수치가 갱신된다 */
.workflow-detail-scr .sk-flow,
.workflow-detail-scr .sk-grow,
.workflow-detail-scr .sk-vb,
.workflow-detail-scr .sk-tick {
  transform-box: fill-box;
}
.workflow-detail-scr .sk-flow {
  transform-box: view-box;
}
.workflow-detail-scr .sk-grow {
  transform-origin: left center;
  transform: scaleX(0);
}
.workflow-detail-dev.on .workflow-detail-scr .sk-grow {
  animation: skGrow 1.4s cubic-bezier(0.2, 0.7, 0.2, 1)
    calc(0.9s + var(--gd, 0s)) both;
}
.workflow-detail-dev.on .workflow-detail-scr .sk-g2 {
  animation-delay: 1.3s;
}
@keyframes skGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.workflow-detail-dev.on .workflow-detail-scr .sk-flow {
  animation: skFlow 14s linear 1.2s infinite;
}
@keyframes skFlow {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--fy));
  }
}
.workflow-detail-scr .sk-vb {
  transform-origin: center bottom;
}
.workflow-detail-dev.on .workflow-detail-scr .sk-vb {
  animation: skVb 3.6s ease-in-out calc(0.9s + var(--vd, 0s)) infinite alternate;
}
@keyframes skVb {
  0% {
    transform: scaleY(0.2);
  }
  35% {
    transform: scaleY(1);
  }
  70% {
    transform: scaleY(0.82);
  }
  100% {
    transform: scaleY(1.06);
  }
}
.workflow-detail-scr .sk-tick {
  transform-origin: left center;
}
.workflow-detail-dev.on .workflow-detail-scr .sk-tick {
  animation: skTick 2.4s steps(1, end) 1s infinite;
}
.workflow-detail-dev.on .workflow-detail-scr .sk-t2 {
  animation-duration: 3.6s;
}
@keyframes skTick {
  0% {
    transform: scaleX(0.72);
  }
  25% {
    transform: scaleX(0.8);
  }
  50% {
    transform: scaleX(0.88);
  }
  75% {
    transform: scaleX(0.95);
  }
  100% {
    transform: scaleX(0.72);
  }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-detail-scr .sk-grow {
    transform: none;
  }
  .workflow-detail-dev.on .workflow-detail-scr .sk-grow,
  .workflow-detail-dev.on .workflow-detail-scr .sk-flow,
  .workflow-detail-dev.on .workflow-detail-scr .sk-vb,
  .workflow-detail-dev.on .workflow-detail-scr .sk-tick {
    animation: none;
  }
}

.workflow-detail-ph .workflow-detail-pb .pwm {
  margin-bottom: -2px;
}
/* 모션 타일(결정 200 시안): 라이트 배경, SVG 애니메이션 */
.sh-img.lt {
  background: var(--n-50);
}
.sh-img.lt .sh-sheen {
  display: none;
}
/* ===== P3 쇼케이스: 다크 타일 안의 3D 렌더가 떠 있고, 스크롤 진입 시 올라오며 광택이 한 번 지나간다 ===== */
.shw {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
} /* 결정 220: 8장 4×2 */
.sh {
  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);
}
.sh.on {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 90ms);
}
.sh-img {
  position: relative;
  aspect-ratio: 4/3;
  background: #0f0f1c;
  overflow: hidden;
  perspective: 900px;
}
.sh-img img,
.sh-img video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04) translateY(8px);
  transition: transform 1200ms var(--ease);
  background: var(--n-50);
}
.sh.on .sh-img img,
.sh.on .sh-img video {
  transform: none;
}
.sh:hover .sh-img img,
.sh:hover .sh-img video {
  transform: scale(1.03) rotateX(2deg) rotateY(-2deg);
}
@media (prefers-reduced-motion: reduce) {
  .sh-img video {
    display: none;
  }
}
.sh-sheen {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(221, 221, 227, 0.1) 50%,
    transparent 60%
  );
  transform: translateX(-60%);
  pointer-events: none;
}
.sh.on .sh-sheen {
  animation: shsheen 1600ms var(--ease) calc(var(--i) * 90ms + 500ms) 1 both;
}
@keyframes shsheen {
  from {
    transform: translateX(-60%);
  }
  to {
    transform: translateX(60%);
  }
}
.sh-b {
  padding: 18px 20px 22px;
}
.sh-t {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--text);
} /* = .w2-it b */
.sh-d {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
  word-break: keep-all;
} /* = .w2-it */
@media (max-width: 1100px) {
  .shw {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .pr-page .ph-t {
    font-size: 17px;
    line-height: 25px;
  }
  .pr-page .ph-d {
    font-size: 14.5px;
    line-height: 23px;
  }
}
@media (max-width: 767px) {
  /* 결정 216: 모바일 2열(결정 220으로 8장이라 숨김 규칙 불필요) */
  .shw {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
    gap: 10px;
  }
  .sh-b {
    padding: 12px 12px 14px;
  }
  .sh-t {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 19px;
  }
  .sh-d {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 19px;
  }
}
/* ===== P1 W1 호스트: 다크 구간 안의 도식. 페이지의 .dia 규칙과 겹치지 않게 호스트에만 여백을 준다 ===== */
.pr-page .w1host {
  margin-top: 48px;
}
#w1 .dia-foot {
  margin-top: 2px;
  padding-top: 0;
  border-top: 0;
}
#w1 .lg,
#w1 .solbar {
  line-height: 1.25;
}
@media (max-width: 1399px) {
  #w1 .t4w {
    width: 100%;
  }
}

/* 결정 237: 3-B 본문은 줄바꿈 표시대로 한 줄씩 들어가도록 이 섹션에 한정해 측정폭 제한을 푼다 */
.knowledge-timeline-prose.prose {
  max-width: none;
}
.knowledge-timeline-prose .ln {
  max-width: none;
}
/* ---- 3-B 제조지식 자산화 6단계(.ka6). 색은 tokens.css 램프만 ---- */
.knowledge-timeline {
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
}
.knowledge-timeline-rail {
  position: relative;
  border-right: 1px solid var(--line);
}
.knowledge-timeline-rail i {
  position: absolute;
  left: 6px;
  top: 10px;
  width: 13px;
  height: 13px;
  border: 1px solid var(--n-600);
  border-radius: 50%;
}
.knowledge-timeline-rail span {
  position: absolute;
  left: 6px;
  top: 34px;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--n-700);
}
.knowledge-timeline-content {
  position: relative;
  width: 100%;
  aspect-ratio: 1400/1250;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .knowledge-timeline-content {
    max-width: 1040px;
    margin: 0 auto;
  }
  .knowledge-timeline .knowledge-timeline-content .flab {
    font-size: 16.93px;
  }
  .knowledge-timeline .knowledge-timeline-content .big {
    font-size: 16.93px;
  }
  .knowledge-timeline .knowledge-timeline-content .olab {
    font-size: 12.98px;
  }
  .knowledge-timeline .knowledge-timeline-content .pill text {
    font-size: 12.98px;
  }
  .knowledge-timeline .knowledge-timeline-content .pill.lg text {
    font-size: 12.42px;
  }
  .knowledge-timeline .knowledge-timeline-content .pill.org text {
    font-size: 11.85px;
  }
  .knowledge-timeline .knowledge-timeline-content .contact-form {
    font-size: 13.55px;
  }
  .knowledge-timeline .knowledge-timeline-content .cx {
    font-size: 11.29px;
  }
  .knowledge-timeline .knowledge-timeline-content .ck {
    font-size: 12.42px;
  }
  .knowledge-timeline .knowledge-timeline-content .cv {
    font-size: 12.42px;
  }
  .knowledge-timeline .knowledge-timeline-content .cb {
    font-size: 20.32px;
  }
  .knowledge-timeline .knowledge-timeline-content .cu {
    font-size: 12.42px;
  }
  .knowledge-timeline .knowledge-timeline-content .wbp text {
    font-size: 11.29px;
  }
} /* 결정 285: 폭 축소(1174 → 1040)로 작아진 SVG 글자를 원래 화면 크기로(x 1.129) */ /* 결정 284: D-P3c가 같은 페이지 다른 도식보다 커 보여 폭 1174 → 1040 상한(약 89%) */
.knowledge-timeline-cam {
  position: absolute;
  inset: 0;
}
.knowledge-timeline-cam > svg,
.knowledge-timeline-cam > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* 오버레이 */
.knowledge-timeline .ov text {
  font-family: var(--font-sans);
}
.knowledge-timeline .str {
  fill: none;
  stroke: var(--n-400);
  stroke-width: 0.9;
  stroke-dasharray: 2.4 4.2;
  animation: ka6flow 7s linear infinite;
}
@keyframes ka6flow {
  to {
    stroke-dashoffset: -66;
  }
}
.knowledge-timeline .flab {
  font: 600 15px var(--font-mono);
  letter-spacing: 0.08em;
  fill: var(--n-700);
}
.knowledge-timeline .big {
  font: 600 15px var(--font-sans);
  letter-spacing: 0.14em;
  fill: var(--text);
  text-anchor: middle;
}
.knowledge-timeline .mid-logo {
  fill: var(--n-600);
} /* 2026.09.30: 봉제 전용 데이터 사전 위 SIJE 워드마크, 순흑 대신 n-600 */
.knowledge-timeline .olab {
  font-size: 11.5px;
  fill: var(--muted);
  text-anchor: middle;
  font-weight: 500;
}
.knowledge-timeline .olab,
.knowledge-timeline .big {
  paint-order: stroke;
  stroke: var(--n-50);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.knowledge-timeline .pill text {
  font-size: 11.5px;
  text-anchor: middle;
  font-weight: 600;
}
.knowledge-timeline .pill.rel-p rect {
  fill: var(--n-0);
  stroke: var(--acc-purple-deep);
  stroke-width: 0.9;
}
.knowledge-timeline .pill.rel-p text {
  fill: var(--accent-text);
}
.knowledge-timeline .pill.lg rect {
  fill: var(--n-0);
  stroke: var(--n-300);
  stroke-width: 0.9;
}
.knowledge-timeline .pill.lg text {
  fill: var(--text);
  font-weight: 400;
  font-size: 11px;
}
.knowledge-timeline .pill.org rect {
  fill: var(--n-0);
  stroke: var(--n-600);
  stroke-width: 0.9;
}
.knowledge-timeline .pill.org text {
  fill: var(--text);
  font-size: 10.5px;
  font-weight: 400;
}
.knowledge-timeline .card rect {
  fill: var(--n-0);
  stroke: var(--n-800);
  stroke-width: 1;
}
.knowledge-timeline .card line {
  stroke: var(--line);
}
.knowledge-timeline .contact-form {
  font-size: 12px;
  font-weight: 600;
  fill: var(--text);
}
.knowledge-timeline .cx {
  font-size: 10px;
  font-weight: 600;
  fill: var(--accent-text);
  text-anchor: end;
}
.knowledge-timeline .ck {
  font-size: 11px;
  fill: var(--muted);
}
.knowledge-timeline .cv {
  font: 11px var(--font-mono);
  fill: var(--text);
  text-anchor: end;
}
.knowledge-timeline .cb {
  font: 600 18px var(--font-mono);
  fill: var(--text);
  text-anchor: end;
}
.knowledge-timeline .cu {
  font-size: 11px;
  font-weight: 400;
}
.knowledge-timeline .lead {
  fill: none;
  stroke: var(--n-600);
  stroke-width: 0.8;
}
.knowledge-timeline .wb {
  fill: none;
  stroke: var(--n-600);
  stroke-width: 1;
}
.knowledge-timeline .wbd {
  fill: var(--n-600);
}
.knowledge-timeline .wba {
  fill: var(--n-600);
}
.knowledge-timeline .wbp rect {
  fill: var(--n-0);
  stroke: var(--n-600);
  stroke-width: 1;
}
.knowledge-timeline .wbp text {
  font: 600 10px var(--font-mono);
  letter-spacing: 0.14em;
  fill: var(--n-700);
  text-anchor: middle;
}
@media (max-width: 767px) {
  .knowledge-timeline {
    grid-template-columns: minmax(0, 1fr);
  }
  .knowledge-timeline-rail {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .knowledge-timeline .str {
    animation: none;
  }
}
/* 결정 238: 3-B 단계 표(디자인 시스템 6-A-3 표 앵커: 본문색 상단선 · 헤더 53px · 행 헤어라인 · td 22px · 라운드 · 배지 없음) */
.knowledge-timeline-table-wrap {
  position: relative;
  margin: 40px 0 0;
  padding-right: 84px;
}
.knowledge-timeline-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.knowledge-timeline-table th {
  height: 53px;
  padding: 14px 24px 14px 0;
  text-align: left;
  font: 500 12px/18px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  border-top: 1px solid var(--text);
}
.knowledge-timeline-table td {
  padding: 12px 24px 12px 0;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.knowledge-timeline-table tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}
.knowledge-timeline-table-section {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 20px;
  align-content: center;
}
.knowledge-timeline-table-icon {
  grid-row: 1 / span 2;
  width: 96px;
  height: 64px;
  display: block;
}
.knowledge-timeline-table-number {
  align-self: end;
  font: 500 12px/18px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.knowledge-timeline-table-english {
  align-self: start;
  font: 500 12px/18px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--accent-text);
  margin-top: 4px;
}
.knowledge-timeline-table-m b {
  display: block;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--text);
}
.knowledge-timeline-table-m span {
  display: block;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
  margin-top: 2px;
}
.knowledge-timeline-table-w {
  font-size: 14px;
  line-height: 22px;
  color: var(--text);
}
.knowledge-timeline-table-o {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 14px;
  white-space: nowrap;
}
.knowledge-timeline-table-o:not(:has(i)) {
  white-space: normal;
}
.knowledge-timeline-table-sw {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex: none;
}
.knowledge-timeline-table-lp {
  position: absolute;
  right: 0;
  top: 0;
  width: 84px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.knowledge-timeline-table-lp .lp-l {
  fill: none;
  stroke: var(--n-600);
  stroke-width: 1;
}
.knowledge-timeline-table-lp .lp-a,
.knowledge-timeline-table-lp .lp-d {
  fill: var(--n-600);
}
.knowledge-timeline-table-lpt {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translate(50%, -50%) rotate(-90deg);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--n-700);
  background: var(--n-0);
  border: 1px solid var(--n-600);
  border-radius: var(--radius);
  padding: 7px 12px;
  white-space: nowrap;
}
.knowledge-timeline-table-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}
@media (max-width: 1100px) {
  .knowledge-timeline-table-section {
    grid-template-columns: 1fr;
  }
  .knowledge-timeline-table-icon {
    grid-row: auto;
    width: 120px;
    height: 80px;
    margin-bottom: 6px;
  }
}
@media (max-width: 767px) {
  .knowledge-timeline-table-wrap {
    padding-right: 0;
    overflow-x: auto;
  }
  .knowledge-timeline-table {
    min-width: 640px;
  }
  .knowledge-timeline-table-lp,
  .knowledge-timeline-table-lpt {
    display: none;
  }
  .knowledge-timeline-table td {
    padding: 16px 16px 16px 0;
  }
}
@media (max-width: 767px) {
  .mob-h {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .knowledge-timeline.mob-h {
    display: none !important;
  }
  .knowledge-timeline-table-wrap {
    overflow: visible;
  }
  .knowledge-timeline-table {
    min-width: 0;
  }
  .knowledge-timeline-table thead {
    display: none;
  }
  .knowledge-timeline-table tr {
    display: grid;
    grid-template-columns: 1fr;
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }
  .knowledge-timeline-table td {
    display: block;
    border: 0;
    padding: 2px 0;
  }
  .knowledge-timeline-table tbody tr:last-child td {
    border: 0;
  }
  .knowledge-timeline-table-section {
    grid-template-columns: 72px 1fr;
    column-gap: 12px;
  }
  .knowledge-timeline-table-icon {
    grid-row: 1 / span 2;
    width: 72px;
    height: 48px;
    margin: 0;
  }
}
@media (max-width: 767px) {
  .knowledge-timeline-table,
  .knowledge-timeline-table tbody {
    display: block;
    width: 100%;
  }
  .knowledge-timeline-table colgroup {
    display: none;
  }
  .knowledge-timeline-table td {
    width: auto !important;
  }
}

/* 내비 언어 선택(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;
  }
  /* 수정 E · 기능 카드: 2열 세로 카드 → 1열 가로 카드(그림 왼쪽, 글 오른쪽) */
  .shw {
    grid-template-columns: 1fr !important;
  }
  .shw .sh {
    flex-direction: row !important;
    align-items: stretch;
  }
  .shw .sh .sh-img {
    flex: 0 0 36%;
    width: 36%;
    height: auto;
    aspect-ratio: auto;
    min-height: 104px;
  }
  .shw .sh .sh-img > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .shw .sh .sh-b {
    flex: 1 1 0;
    min-width: 0;
  }
}
/* ===== 결정 396: 요약문 · 전체판 · 중복 축소 ===== */
@media (min-width: 768px) {
  .mo-t {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .pc-t {
    display: none !important;
  }
  /* Products 3-B: 6단계는 표 하나로(작은 아이콘 + 글) */
  .knowledge-timeline-table tr {
    grid-template-columns: 60px minmax(0, 1fr) !important;
    column-gap: 12px;
    padding: 12px 0 !important;
  }
  .knowledge-timeline-table tr > td:first-child,
  .knowledge-timeline-table .knowledge-timeline-table-section {
    display: contents !important;
  }
  .knowledge-timeline-table .knowledge-timeline-table-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 60px !important;
    height: 40px !important;
    margin: 2px 0 0 !important;
    align-self: start;
  }
  .knowledge-timeline-table .knowledge-timeline-table-number {
    grid-column: 2;
    grid-row: 1;
    font-size: 11px;
    line-height: 16px;
  }
  .knowledge-timeline-table .knowledge-timeline-table-english {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 0 68px;
    font-size: 11px;
    line-height: 16px;
    justify-self: start;
  }
  .knowledge-timeline-table td.knowledge-timeline-table-m {
    grid-column: 2;
    grid-row: 2;
    padding: 0 !important;
  }
  .knowledge-timeline-table td.knowledge-timeline-table-w {
    grid-column: 2;
    grid-row: 3;
    padding: 2px 0 0 !important;
    font-size: 12px;
    line-height: 18px;
    color: var(--muted);
  }
  .knowledge-timeline-table-m b {
    font-size: 16px;
    line-height: 24px;
  }
  .knowledge-timeline-table-m span {
    font-size: 13px;
    line-height: 20px;
    margin-top: 0;
  }
  /* Knowledge AI 4-C: 모바일 전용 전체판(공유 수치 → 벤더 · 공장 두 장부 → 합의) */
  #do4b .d2 {
    display: none !important;
  }
  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);
}
.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;
}

.mz-b {
  display: none;
}
@media (max-width: 767px) {
  .pr-page .w1scroll {
    height: auto !important;
  }
  .pr-page #w1 {
    position: static !important;
  } /* Products D-P1: 모바일은 스크롤 고정 없음(빈 화면 약 1,700px 제거) */
  .mz-h {
    position: relative;
  }
  .mz-b {
    display: flex;
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    appearance: none;
    cursor: pointer;
    border: 1px solid rgba(15, 15, 28, 0.14);
    background: rgba(255, 255, 255, 0.92);
    padding: 0;
  }
  .mz-b svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #25252f;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}
.diagram-zoom-dialog {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.diagram-zoom-dialog-bar {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  width: 100vw;
  box-sizing: border-box;
  font: 500 11px var(--font-mono, monospace);
  letter-spacing: 0.1em;
  color: #6e6f7a;
}
.diagram-zoom-dialog.dk .diagram-zoom-dialog-bar {
  color: #9797a0;
}
.diagram-zoom-dialog-close {
  appearance: none;
  border: 1px solid rgba(15, 15, 28, 0.16);
  background: rgba(255, 255, 255, 0.95);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font: 400 20px/1 sans-serif;
  color: #25252f;
  cursor: pointer;
}
.diagram-zoom-dialog.dk .diagram-zoom-dialog-close {
  background: rgba(15, 15, 28, 0.9);
  border-color: rgba(221, 221, 227, 0.24);
  color: #dddde3;
}
.diagram-zoom-dialog-content {
  width: max(760px, 210vw);
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 20px 40px;
  box-sizing: border-box;
}
.diagram-zoom-dialog-content > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.diagram-zoom-dialog .mz-b {
  display: none !important;
}

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;
  }
}
#p4 .ph {
  border-left: 0 !important;
}
.pin-pr {
  margin-top: 0 !important;
}
.pr-page #w1 {
  top: calc(var(--stk, 72px) - var(--pinoff, 0px)) !important;
}
/* 결정 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"] .wrap.twelve-column-grid > .grid-span-ten.prose {
    grid-column: 1/-1;
  }
}
@media (max-width: 1023px) {
  html[lang="vi"] .product-workflow-claim br {
    display: none;
  }
}
.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;
}

/* 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;
} /* A8 */
.mobile-workflow .m-more,
.career-application-back,
.contact-form-box {
  position: relative;
}
.mobile-workflow .m-more::after,
.career-application-back::after,
.contact-form-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 24px;
  transform: translateY(-50%);
} /* 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);
}

html.is-scr #w1 *,
html.is-scr .g1-pin * {
  pointer-events: none !important;
}

/* 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;
  }
}