@font-face {
  font-family: "Pretendard";
  src: url("/media/shared/fonts/pretendard-300-800-vi-monoparts.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,
.value {
  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;
}
/* 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;
}
.sub,
.dia,
.close {
  scroll-margin-top: 96px;
}
.h1-en {
  font-family: var(--font-sans);
  font-size: 88px;
  line-height: 90px;
  font-weight: 400;
  letter-spacing: -0.045em;
  margin: 16px 0 0;
  color: var(--n-0);
}
.h1-ko {
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--n-200);
  margin: 0;
}
.h1-sub {
  font-size: 16px;
  line-height: 26px;
  color: var(--n-400);
  margin: 28px 0 0;
}
.text-link.on-dark {
  color: var(--dia-node);
}
.hero-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 24px;
  border-top: 1px solid rgba(221, 221, 227, 0.12);
}
.hn {
  display: block;
  padding: 24px 0 28px;
  text-decoration: none;
  border-top: 2px solid transparent;
  margin-top: -1px;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
/* 호버·포커스·현재 항목이 같은 상태다: 퍼플 선이 나타나고 번호는 퍼플, 제목은 밝아진다 */
.hn:hover,
.hn:focus-visible,
.hn.cur {
  border-top-color: var(--dia-node);
}
.hn-n {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--n-400);
  transition: color var(--dur-fast) var(--ease-standard);
}
.hn:hover .hn-n,
.hn:focus-visible .hn-n,
.hn.cur .hn-n {
  color: var(--dia-node);
}
.hn-t {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--n-300);
  margin-top: 4px;
  word-break: keep-all;
  transition: color var(--dur-fast) var(--ease-standard);
}
.hn:hover .hn-t,
.hn:focus-visible .hn-t,
.hn.cur .hn-t {
  color: var(--n-0);
}
.hn:focus-visible {
  outline: none;
}

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

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

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

.st-n {
  font-family: var(--font-sans);
  font-size: 60px;
  line-height: 64px;
  font-weight: 400;
  letter-spacing: -0.035em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.st-n span {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-left: 2px;
  color: var(--accent-text);
}
.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} */
.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;
}
.device-one {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 26px;
  max-width: 36em;
}

/* ===== 텍스트 링크 공통 ===== */
.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;
}
.text-link.to-monolis {
  color: var(--acc-mint-deep);
}
.text-link.on-dark.to-monolis {
  color: var(--acc-mint);
}
.text-link.to-monolis:focus-visible {
  outline-color: currentColor;
}

/* ===== 섹션 마무리 (레퍼런스: Anduril 링크 스택. 중간 섹션에 버튼 CTA를 두지 않는다) ===== */
.close {
  margin-top: 96px;
  padding-top: 48px;
  border-top: 1px solid var(--text);
}

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

/* ===== 반응형 (공통) ===== */
@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;
  }
  .blk {
    margin-top: 64px;
  }
  .dia + .blk,
  .dia + .grid-span-six {
    margin-top: 64px;
  }
  .close {
    margin-top: 64px;
  }
  .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;
  }
  .h-ko {
    font-size: 22px;
    line-height: 30px;
  }
  .lead {
    margin-top: 32px;
    font-size: 18px;
    line-height: 28px;
  }
  .st {
    padding: 28px 0;
  }
  .st-n {
    font-size: 44px;
    line-height: 48px;
  }
  .first {
    margin-top: 80px;
  }
  .o4 > .wrap:last-of-type {
    padding-bottom: 80px;
  }
  .stage .dia {
    padding: 24px;
  }
  /* D1 compact: 6모듈. 벤더 1-3 / 공장 4-6. FOB는 CM과 같은 행: 좌측 칩 2열×3행 (1-2) / CM (3-4) / 우측 칩 2열×3행 (5-6) */
  /* D2 compact: 6모듈. 장부 1-3 / 4-6 병렬, 공유 CM은 하단 중앙(2-6), 합의 바 전폭 */
  .menu {
    display: none;
  }
}
@keyframes unfoldU {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes unfoldD {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 639px) {
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .twelve-column-grid {
    column-gap: 16px;
  }
  .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;
  }
  .st-n {
    font-size: 38px;
    line-height: 42px;
  }
  .stage {
    padding-block: 64px;
  }
  .stage .dia {
    padding: 16px;
  }
  .dia {
    padding: 16px;
  }
  /* D2 mobile: 단일 컬럼 적층. 벤더 → 공유 CM → 공장 → 합의 */
  /* 390px에서는 좌우 병렬이 물리적으로 불가(모듈 47px). 칩 스트립을 그래프 아래 3행×4로 */
}

/* 상태 배지: 미탑재 기능을 현재형으로 쓰지 않기 위한 표기 장치 */
.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ===== 모바일 내비게이션(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;
  }
}

/* ===== 모바일 정보 밀도(2026.09.19, 결정 206) =====
   3단계(보조 표·마무리 보조 문장·주석·사이드 인덱스)는 767px 이하에서 숨기고, 2단계(근거 줄)는 첫 단위만 보이고 접는다. PC 무변경 */
.fold-btn {
  display: none;
}
@media (max-width: 767px) {
  .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;
}

/* ===== 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;
}
@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;
}
.b-cap {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.06em;
  color: var(--dia-node);
  text-align: right;
}

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

/* ===== 반응형 (O4 전용) ===== */
@media (max-width: 1279px) {
  .d2 {
    column-gap: 16px;
  }
}
@media (max-width: 1023px) {
  /* 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) {
  /* D2 mobile: 단일 컬럼 적층. 벤더 → 공유 CM → 공장 → 합의 */
  .d2 {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .b-cap {
    text-align: left;
  }
} /* 모바일: 도식 머리글 2줄 분리(라벨 / 캡션). 데스크톱의 height:24px 한 줄 배치가 375px에서 겹치던 문제(2026.09.19, 결정 203) */
@media (max-width: 767px) {
  .o4 .dia {
    padding: 16px;
  }
}
.o4 {
  overflow-x: clip;
}

/* 스테이지 안 산문: 첫 블록은 stage-head 바로 아래 */
.stage .prose .ln {
  color: var(--n-300);
}
.stage .prose h3.claim {
  color: var(--dia-text);
}
@keyframes ccpop {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ccfade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.dia#dc3.in .l1 {
  animation-delay: 0.05s;
}
.dia#dc3.in .l3 {
  animation-delay: 0.75s;
}
@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;
}
/* 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);
}
.pc-h {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ph {
  padding: 28px 24px 32px 0;
}
.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 .dia {
  border-top: 1px solid rgba(221, 221, 227, 0.14);
  padding-top: 32px;
}
.pr-page .stage.pr1 .twelve-column-grid > .blk.first {
  margin-top: 88px;
}
.pr-page .stage.pr1 .dia {
  margin-top: 48px;
}
/* ===== 모바일 타입 스케일(767px 이하, 2026.09.20). Company·Knowledge AI 공통 =====
   단계: 표시 32 · 섹션 영문 30 · 섹션 국문 20 · 블록 헤드라인 20 · 카드 제목 18 · 리드 16 · 본문 15 · 보조 13 · 메타 11 */
@media (max-width: 767px) {
  body .h1-en {
    font-size: 32px;
    line-height: 38px;
  }
  body .st-n {
    font-size: 32px;
    line-height: 38px;
  }
  body .st-n span {
    font-size: 22px;
    line-height: 1;
  }
  body .h-en {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.02em;
  }
  body .h-ko:not(.big),
  body .h1-ko,
  html body .sec-side .h-ko:not(.big) {
    font-size: 20px;
    line-height: 28px;
  }
  body .claim,
  body .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 .ds {
    font-size: 13px;
    line-height: 20px;
  }
  body .eyebrow,
  body .sub {
    font-size: 11px;
    line-height: 16px;
  }
}
/* 도식 글자 하한(9px) 적용 시 도형 안 글자 맞춤(모바일) */
@media (max-width: 767px) {
  #dc1 circle[r="36"] {
    r: 42px;
  }
}
/* 모바일 푸터 요약(2026.09.20): 설명문 제거, 메뉴 2열 2행, 링크 간격 압축, 인증·저작권 한 덩어리 */
@media (max-width: 767px) {
  body .foot {
    padding-block: 48px 28px;
  }
  body .site-footer-description {
    display: none;
  }
  body .site-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px;
    row-gap: 24px !important;
    margin-top: 28px !important;
  }
  body .site-footer-heading {
    margin-bottom: 8px;
  }
  body .site-footer-nav a,
  body .site-footer-soon {
    font-size: 13px;
    line-height: 18px;
    padding: 4px 0;
  }
  body .site-footer-bot {
    margin-top: 28px !important;
    padding-top: 16px;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }
  body .site-footer-cert {
    gap: 4px 12px;
  }
  body .site-footer-cert span,
  body .site-footer-card {
    font-size: 10px;
  }
}
/* QA 2026.09.21: 모바일 터치 타깃 44px 확보(시각 크기는 유지, 보이지 않는 히트 영역만 확장) */
@media (max-width: 767px) {
  .fold-btn,
  .text-link,
  .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) {
  .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 .pr .open {
    padding-top: 72px;
  }
  .pr-page .twelve-column-grid > .blk.first {
    margin-top: 56px;
  }
  .pr-page .blk {
    margin-top: 56px;
  }
}
.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;
  }
}

/* ===== 라이트 히어로 (2026.09.22 확정) =====
   Company는 구조와 여백을 다크 히어로와 동일하게 쓰고 톤만 라이트로 바꾼다.
   영문 제목이 좌측에서 크게, 한글 제목과 설명문이 우측에서 작게 놓이는 배치는 세 페이지가 같다. */
.hero.hero-lt {
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.hero.hero-lt::after {
  display: none;
}
.hero.hero-lt .eyebrow {
  color: var(--accent-text);
}
.hero.hero-lt .h1-en {
  color: var(--text);
}
.hero.hero-lt .h1-ko {
  color: var(--text);
}
.hero.hero-lt .h1-sub {
  color: var(--muted);
}
.hero.hero-lt .hero-nav {
  border-top-color: var(--line);
}
.hero.hero-lt .hn-n {
  color: var(--muted);
}
.hero.hero-lt .hn-t {
  color: var(--text);
}
.hero.hero-lt .hn:hover,
.hero.hero-lt .hn:focus-visible,
.hero.hero-lt .hn.cur {
  border-top-color: var(--accent-text);
}
.hero.hero-lt .hn:hover .hn-n,
.hero.hero-lt .hn:focus-visible .hn-n,
.hero.hero-lt .hn.cur .hn-n {
  color: var(--accent-text);
}
.hero.hero-lt .hn:hover .hn-t,
.hero.hero-lt .hn:focus-visible .hn-t {
  color: var(--text);
}
/* 제품 상세 공통(Monolis v1에서 추출, 제품색 --pc · --pcd) */

.pd-page {
  --accent-text: var(--pcd);
  --accent-line: var(--pc);
}
.pd-page .nav {
  position: sticky;
  top: 12px;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  padding: 0 12px;
}
.pd-page .nav .navigation-content {
  height: 56px;
  padding: 0 8px 0 20px;
}
.pd-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);
}
.pd-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.55);
  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);
}
.pd-page .nav .cta {
  display: none;
}

/* ===== 영상 히어로: 문구 쪽을 더 어둡게, 영상은 오른쪽에서 살아 있게 ===== */
.mh-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(640px, 88vh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.mh-hero > .wrap {
  width: 100%;
  box-sizing: border-box;
}
.mh-hero::after {
  display: none;
}
.mh-hero .h1-ko,
.mh-hero .h1-en {
  text-shadow: 0 1px 24px rgba(15, 15, 28, 0.35);
}
.mh-hero .h1-sub {
  color: var(--n-200);
}
.mh-hero .eyebrow {
  color: var(--pc);
}
.mh-hero .hero-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mh-hero .hn:hover,
.mh-hero .hn:focus-visible {
  border-top-color: var(--pc);
}
.mh-hero .hn:hover .hn-n,
.mh-hero .hn:focus-visible .hn-n {
  color: var(--pc);
}
@media (max-width: 767px) {
  .mh-hero {
    min-height: auto;
  }
  .mh-hero .hero-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== 6단계 위치 띠 ===== */
.mst {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 40px 0 36px;
}
.mst-c {
  font-size: 15px;
  line-height: 24px;
  color: var(--text);
}
.mst-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 16px;
  border-top: 1px solid var(--text);
}
.st {
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}
.st-ic {
  height: 62px;
  display: flex;
  align-items: center;
}
.st-ic svg {
  height: 62px;
  width: auto;
  display: block;
}
.st.off .st-ic,
.st.base .st-ic {
  filter: grayscale(1);
  opacity: 0.35;
}
.st-t {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}
.st-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--n-400);
}
.st-en {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--n-400);
}
.st-ko {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--n-400);
}
.st.on {
  border-bottom: 2px solid var(--pc);
}
.st.on .st-n,
.st.on .st-en {
  color: var(--pcd);
}
.st.on .st-ko {
  color: var(--text);
  font-weight: 500;
}
.st.base .st-ko {
  color: var(--n-500);
}
.mst-f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}
.mst-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mst-lg i {
  width: 14px;
  height: 2px;
  background: var(--pc);
  display: inline-block;
}
.mst-lg i.base {
  background: none;
  border-top: 1px dashed var(--n-400);
  height: 0;
}
.mst-f .text-link {
  margin-left: auto;
}
@media (max-width: 1023px) {
  .mst-l {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.mst .st-n,
.mst .st-en {
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}
.mst .mst-l .st {
  border-bottom: 1px solid var(--line) !important;
  border-top: 0 !important;
}
.mst .mst-l .st.on {
  border-bottom: 2px solid var(--pc) !important;
}
@media (max-width: 767px) {
  .mst {
    padding: 28px 0;
  }
  .mst-l {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-ic,
  .st-ic svg {
    height: 48px;
  }
  .mst-f .text-link {
    margin-left: 0;
  }
}

/* ===== 공통 ===== */
.pdx .open {
  padding-top: 120px;
}
.pdx {
  padding-bottom: 120px;
}
.mnote {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--n-500);
  word-break: keep-all;
}
.mnote .text-link {
  margin-left: 8px;
}
.mtb {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--text);
}
.mtb th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: var(--n-500);
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
}
.mtb td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 24px;
  color: var(--text);
  vertical-align: top;
  word-break: keep-all;
}
.mtb td.ar {
  font-weight: 500;
  white-space: nowrap;
}
.mtb tr.out td {
  color: var(--n-400);
}
.mtb tr.out td.ar {
  font-weight: 400;
}
.mtb tbody tr:last-child td {
  border-bottom: 1px solid var(--n-300);
}
.mtb.two td.ar {
  width: 28%;
  color: var(--muted);
  font-weight: 400;
}
.mtb {
  table-layout: auto;
}
@media (max-width: 767px) {
  .mtb thead {
    display: none;
  }
  .mtb tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .mtb td {
    display: block;
    border: 0;
    padding: 2px 0;
  }
  .mtb tbody tr:last-child td {
    border: 0;
  }
  .mtb td.ar {
    white-space: normal;
  }
  .mtb.two tr {
    display: grid;
    grid-template-columns: 30% 1fr;
    column-gap: 12px;
  }
  .mtb.two td.ar {
    width: auto;
  }
}

/* ===== M2 척추 ===== */
.order-lineage {
  position: relative;
  margin-top: 64px;
  --axw: 168px;
}
.order-lineage-axis-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--axw);
  height: 100%;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
.order-lineage-axis-line line {
  stroke: var(--pcd);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}
.order-lineage-number {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--axw) minmax(0, 1fr);
  column-gap: 40px;
  align-items: center;
  padding: 40px 0;
}
.order-lineage-number.l .order-lineage-card {
  grid-column: 3;
  grid-row: 1;
}
.order-lineage-number.r .order-lineage-card {
  grid-column: 1;
  grid-row: 1;
}
.order-lineage-axis {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.order-lineage-icon {
  width: 104px;
  height: auto;
  display: block;
  background: var(--surface-2);
  padding: 8px 0;
  box-sizing: content-box;
}
.order-lineage-korean {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.order-lineage-number.l .order-lineage-korean {
  justify-content: flex-end;
}
.sp-no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--pcd);
}
.order-lineage-arrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--surface);
}
.order-lineage-heading {
  margin: 12px 0 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.order-lineage-description {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 25px;
  color: var(--muted);
  word-break: keep-all;
}
.order-lineage-adjustment {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
  text-align: left;
}
.order-lineage-adjustment i {
  display: inline-block;
  width: 18px;
  border-top: 1.5px dashed currentColor;
  transform: translateY(-4px);
}
.order-lineage-adjustment b {
  font-weight: 600;
}
.order-lineage-card {
  margin: 0;
}
.order-lineage-image {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(15, 15, 28, 0.04),
    0 12px 32px rgba(15, 15, 28, 0.07);
}
.order-lineage-image img {
  display: block;
  width: 100%;
  height: auto;
}
.order-lineage-card figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--n-400);
}
.order-lineage-number.r .order-lineage-card figcaption {
  text-align: right;
}
.order-lineage-calculation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.order-lineage-calculation path {
  fill: none;
  stroke: var(--n-950);
  stroke-width: 1;
}
.order-lineage-calculation .ah {
  fill: var(--n-950);
  stroke: none;
}
.order-lineage-calculation circle {
  fill: var(--n-950);
}
.order-lineage-calculation-panel {
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 118px;
  border-radius: 12px;
  background: var(--n-950);
  color: var(--n-0);
  font: 600 10px var(--font-mono);
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: none;
}
.order-lineage-number .order-lineage-card {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms linear,
    transform 800ms var(--ease);
}
.order-lineage-number.on .order-lineage-card {
  opacity: 1;
  transform: none;
}
.order-lineage-number.on .order-lineage-card {
  transition-delay: 120ms;
}
@media (prefers-reduced-motion: reduce) {
  .order-lineage-number .order-lineage-card {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1023px) {
  .order-lineage {
    --axw: 96px;
  }
  .order-lineage-icon {
    width: 76px;
  }
  .order-lineage-number {
    column-gap: 24px;
  }
}
@media (max-width: 767px) {
  .order-lineage {
    --axw: 44px;
  }
  .order-lineage-axis-line {
    left: 22px;
    transform: translateX(-50%);
    width: 24px;
  }
  .order-lineage-number {
    grid-template-columns: var(--axw) minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 28px 0;
  }
  .order-lineage-number.l .order-lineage-card,
  .order-lineage-number.r .order-lineage-card {
    grid-column: 2;
    grid-row: 2;
    margin-top: 16px;
  }
  .order-lineage-number.l .order-lineage-korean {
    justify-content: flex-start;
  }
  .order-lineage-axis {
    grid-column: 1;
    grid-row: 1;
  }
  .order-lineage-icon {
    width: 44px;
    padding: 4px 0;
  }
  .order-lineage-heading {
    font-size: 20px;
    line-height: 28px;
  }
  .order-lineage-calculation,
  .order-lineage-calculation-panel {
    display: none !important;
  }
  .order-lineage-number.r .order-lineage-card figcaption {
    text-align: left;
  }
}

/* ===== M5 ===== */
.m5-c {
  margin-top: 8px;
}
.m5-c .sub {
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .m5-c + .m5-c {
    margin-top: 40px;
  }
}

/* ===== 라이트 히어로 변형(Mono:parts): 도식이 히어로 안에 들어간다 ===== */
.mh-hero.hero-lt {
  min-height: auto;
  background: var(--bg);
}
.mh-hero.hero-lt .eyebrow {
  color: var(--pcd);
}
.mh-hero.hero-lt .h1-ko,
.mh-hero.hero-lt .h1-en {
  text-shadow: none;
}
.mh-hero.hero-lt .h1-sub {
  color: var(--muted);
}
.mh-hero.hero-lt .hn:hover,
.mh-hero.hero-lt .hn:focus-visible {
  border-top-color: var(--pcd);
}
.mh-hero.hero-lt .hn:hover .hn-n,
.mh-hero.hero-lt .hn:focus-visible .hn-n {
  color: var(--pcd);
}
.mh-fig {
  margin: 0 0 24px;
}
.mh-hero .eyebrow {
  color: var(--pc);
}

/* ===== 페이지 끝 6단계 띠(대표 지시: 가장 마지막) ===== */
.mst.mst-end {
  padding: 96px 0 88px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.mst-top {
  margin-bottom: 32px;
}
.mst-top .eyebrow {
  color: var(--pcd);
}
.mst-h2 {
  margin: 14px 0 0;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
}
.mst-top .mst-c {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--muted);
}
.order-lineage-direction {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.order-lineage-direction path {
  fill: none;
  stroke: var(--pcd);
  stroke-width: 1;
  opacity: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes mdflow {
  to {
    stroke-dashoffset: -66;
  }
}
.fh-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fh-tabs button {
  appearance: none;
  cursor: pointer;
  font: inherit;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--muted);
}
.fh-tabs button span {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.12em;
}
.fh-tabs button b {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.fh-tabs button[aria-pressed="true"] {
  border-color: var(--pcd);
  color: var(--pcd);
}
.fh-tabs button[aria-pressed="true"] b {
  color: var(--pcd);
}
@keyframes cgp {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
.hd {
  fill: var(--n-300);
  opacity: 0.75;
}
.hd.acc {
  fill: var(--acc-coral);
  opacity: 1;
}

.ic {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .ic {
    grid-template-columns: 1fr;
  }
}

.monoparts-page {
  --pc: var(--acc-blue);
  --pcd: var(--acc-blue-deep);
  --accent-text: var(--acc-blue-deep);
  --accent-line: var(--acc-blue);
}
.monoparts-hero .mh-fig {
  margin-top: -40px;
}
.monoparts-hero .hero-t,
.monoparts-hero .hero-s {
  padding-bottom: 24px;
}
.pdx2 {
  background: var(--surface-2);
}
.p3-fig {
  margin-top: 40px;
}
.p3-sub {
  margin-top: 24px;
}
.p4-t {
  margin-top: 56px;
}
.order-lineage-adjustment.mint i,
.order-lineage-adjustment.mint b {
  color: var(--acc-mint-deep);
}
@media (max-width: 767px) {
  .monoparts-hero .mh-fig,
  .p3-fig {
    overflow-x: auto;
  }
}
.p3-in {
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .p3-fig,
  .monoparts-hero .mh-fig {
    overflow: visible;
  }
  .p3-in {
    min-width: 0;
  }
  .monoparts-hero .mh-fig {
    margin-top: 8px;
  }
  .fh-tabs button {
    padding: 6px 11px;
  }
}

/* 4-A 쇼케이스(Monolis M4와 같은 문법) */
.shw {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.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: var(--n-50);
  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);
}
.sh-b {
  padding: 18px 20px 22px;
}
.sh-t {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--text);
}
.sh-d {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
  word-break: keep-all;
}
@media (prefers-reduced-motion: reduce) {
  .sh-img video {
    display: none;
  }
  .sh {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1100px) {
  .shw {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .shw {
    gap: 10px;
    margin-top: 28px;
  }
  .sh-b {
    padding: 12px 12px 14px;
  }
  .sh-t {
    font-size: 13.5px;
    line-height: 19px;
  }
  .sh-d {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 19px;
  }
}
/* 4-B · 4-C 한 줄 표(Monolis 5-A · 5-B) */
.m5t td.ar {
  width: 30%;
}
@media (min-width: 1024px) {
  .m5t td {
    white-space: nowrap;
  }
}
.m5t .brand-wordmark {
  height: 13px;
  width: auto;
  display: block;
  color: var(--muted);
  margin-top: 5px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* P1 화면 카드 확대 */
.order-lineage-image {
  position: relative;
}
.order-lineage-image .order-lineage-video {
  cursor: zoom-in;
}
.order-lineage-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 200ms;
}
.order-lineage-zoom svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.order-lineage-image:hover .order-lineage-zoom {
  opacity: 1;
}
.image-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 15, 28, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  opacity: 0;
  transition: opacity 250ms;
}
.image-dialog.on {
  opacity: 1;
}
.image-dialog-field {
  margin: 0;
  max-width: min(92vw, 1600px);
  max-height: 88vh;
  overflow: auto;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.image-dialog-field img {
  display: block;
  width: 100%;
  height: auto;
}
.image-dialog-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.4vh;
  text-align: center;
  font: 500 11px var(--font-mono);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}
.image-dialog-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(221, 221, 227, 0.3);
  background: rgba(15, 15, 28, 0.6);
  color: #fff;
  font: 400 22px/1 var(--font-sans);
  cursor: pointer;
}
body.image-dialog-lock {
  overflow: hidden;
}
@media (max-width: 767px) {
  .image-dialog {
    padding: 0;
    align-items: center;
  }
  .image-dialog-field {
    max-width: none;
    width: 100vw;
    max-height: 80vh;
    border-radius: 0;
    overflow: auto;
  }
  .image-dialog-field img {
    width: 200%;
    max-width: none;
  }
  .order-lineage-zoom {
    width: 30px;
    height: 30px;
    right: 8px;
    bottom: 8px;
  }
}
@font-face {
  font-family: "Switzer";
  src: url("/media/shared/fonts/switzer-400-en-monoparts.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/media/shared/fonts/switzer-500-en-monoparts.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/media/shared/fonts/switzer-600-en-monoparts.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/media/shared/fonts/switzer-700-en-monoparts.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* 결정 322: P1 1-A(축소는 transform 대신 zoom: 글자를 최종 크기로 배치해 자간 뭉침 방지) AI 발주 처리 화면 v2(Mono:parts 실제 UI · [Monolis] Design System) */
.automation-timeline {
  margin: 40px 0 0;
}
.automation-timeline-step {
  position: relative;
} /* 결정 323: 검은 무대 삭제, 화면을 그리드 폭 전체로 키우고 경계는 옅은 선 + 부드러운 그림자 */
.aiv {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px var(--line),
    0 28px 72px -28px rgba(15, 15, 28, 0.22),
    0 4px 14px -6px rgba(15, 15, 28, 0.08);
}
.aid {
  --b: #24232e;
  --g50: #fafcff;
  --g100: #f5f8fc;
  --g150: #ebf1f7;
  --g200: #e3e9ef;
  --g300: #dae0e6;
  --g400: #c2cad1;
  --g600: #838c94;
  --g700: #69727a;
  --g800: #515961;
  --bl: #5550ff;
  --bl50: #f6f6ff;
  --bl100: #eeedff;
  --bl200: #dddcff;
  --bl500: #aaa7ff;
  --aig: linear-gradient(108deg, #5e77f6 0%, #5ec9e0 101.66%);
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 700px;
  zoom: var(--k, 0.86);
  background: #fff;
  color: var(--b);
  font-family: "Switzer", "Pretendard", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
  display: flex;
  -webkit-font-smoothing: antialiased;
  font-feature-settings:
    "liga" 0,
    "clig" 0,
    "dlig" 0,
    "calt" 0;
  font-variant-ligatures: none;
  font-kerning: normal;
  text-transform: none;
}
.aid * {
  box-sizing: border-box;
}
.aii {
  display: block;
  flex: none;
}
/* 내비(접힘 64) */
.automation-input {
  position: relative;
  flex: 0 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px 32px;
  background: var(--g50);
  border-right: 1px solid var(--g200);
  border-radius: 0 16px 16px 0;
  z-index: 2;
}
.automation-input-av {
  padding: 12px 4px;
  display: flex;
}
.automation-input-av img {
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--g200);
}
.automation-input-cb {
  position: absolute;
  right: -13px;
  top: 40px;
  width: 32px;
  height: 32px;
  border-radius: 100px;
  border: 1px solid var(--g200);
  background: var(--g50);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.automation-input-cb .aii {
  width: 16px;
  height: 16px;
}
.automation-input-m {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0;
  width: 100%;
}
.automation-input-icon {
  height: 32px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.automation-input-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--g600);
  stroke-width: 1.33;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.automation-input-icon.act {
  background: var(--bl100);
}
.automation-input-icon.act svg {
  stroke: var(--bl);
}
.automation-input-description {
  display: block;
  height: 1px;
  background: var(--g200);
  border-radius: 1px;
  width: 100%;
}
.automation-input-lg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 400;
  color: var(--g600);
}
.automation-input-lg .ailogo {
  width: 24px;
  height: auto;
  display: block;
}
/* 머리 */
.aim {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.aih-pt {
  height: 32px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 4px 20px 0;
  border-bottom: 1px solid var(--g200);
}
.aih-tb {
  height: 27px;
  min-width: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px 5px 12px;
  border: 1px solid var(--g150);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--g600);
}
.aih-tb .aii {
  width: 12px;
  height: 12px;
}
.aih-tb.act {
  height: 28px;
  background: #fff;
  border-color: var(--g200);
  font-weight: 600;
  color: var(--b);
  margin-bottom: -1px;
}
.aih-tb.act i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bl);
  margin-right: -2px;
}
.aih-bc {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  background: var(--g50);
  border-bottom: 1px solid var(--g200);
  font-size: 12px;
  font-weight: 400;
  color: var(--g600);
}
.aih-ti {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--g200);
}
.automation-button-icon {
  width: 30px;
  height: 30px;
  border: 1px solid var(--g200);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.automation-button-icon .aii {
  width: 16px;
  height: 16px;
}
.aih-h {
  font-size: 22px;
  font-weight: 700;
}
.aih-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.automation-button-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--g200);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--g700);
}
.automation-button-title .aii {
  width: 12px;
  height: 12px;
}
.ai-run {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px 6px 6px;
  border-radius: 6px;
  background: var(--aig);
  color: #fff;
  font-size: 12px;
  transition:
    background 0.3s,
    color 0.3s;
}
.ai-run .aii {
  width: 12px;
  height: 12px;
}
.ai-run.idle {
  background: var(--g100);
  color: var(--g400);
}
.ai-run.idle path {
  fill: var(--g300);
}
.aih-ut {
  height: 46px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid var(--g200);
}
.ut {
  height: 36px;
  font-size: 16px;
  font-weight: 400;
  color: var(--g400);
  position: relative;
  transition: color 0.25s;
}
.ut.act {
  font-weight: 700;
  color: var(--b);
}
.ut.act:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--b);
}
/* 본문 */
.automation-button {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  padding: 16px 24px 20px;
}
.automation-timeline-label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.automation-timeline-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  position: relative;
}
.ail-h {
  display: flex;
  align-items: baseline;
  gap: 6px;
  height: 32px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}
.ail-h em {
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  color: var(--g700);
}
/* 파일 카드 */
.fc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--g200);
  border-radius: 8px;
  background: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s,
    transform 0.35s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.fc.vis {
  opacity: 1;
  transform: none;
}
.fc .aii {
  width: 16px;
  height: 16px;
}
.fc .fdoc {
  fill: none;
  stroke: var(--g600);
  stroke-width: 1.33;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.fc-n {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.fc-n b {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-n span {
  font-size: 12px;
  font-weight: 400;
  color: var(--g600);
}
/* 배지 · 칩 */
.bdg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 3px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background 0.3s,
    color 0.3s;
}
.bdg.b-pr {
  background: var(--bl100);
  color: var(--bl);
}
.bdg.b-wn {
  background: #fff5ec;
  color: #ff9b3f;
}
.bdg.b-ok {
  background: #e9f8f0;
  color: #1eba66;
}
.bdg.b-gy {
  background: var(--g100);
  color: var(--g600);
}
.bdg .aii {
  width: 12px;
  height: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  height: 22px;
  border: 1px solid var(--g300);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 400;
  color: var(--g800);
  background: #fff;
}
/* AI 카드 · 입력 */
.aq {
  border: 1px solid var(--g200);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s,
    transform 0.35s;
}
.aq.vis {
  opacity: 1;
  transform: none;
}
.aq-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.aq-h i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--aig);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aq-h i .aii {
  width: 12px;
  height: 12px;
}
.aq-h span {
  background: var(--aig);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ipt {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--g200);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--b);
  transition: border-color 0.3s;
}
.ipt.foc {
  border-color: var(--bl);
}
.ipt .tx:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  background: var(--b);
  vertical-align: -3px;
  margin-left: 1px;
  animation: aitcar 1s steps(1) infinite;
}
.ipt.dn .tx:after {
  display: none;
}
@keyframes aitcar {
  50% {
    opacity: 0;
  }
}
/* 표 조작줄 */
.tc {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tc-t {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--g700);
}
.tc-t b {
  font-size: 15px;
  font-weight: 500;
  color: #3a4148;
}
.tc-t em {
  font-style: normal;
  font-size: 13px;
}
.tc-s {
  width: 1px;
  height: 20px;
  background: var(--g200);
  margin: 0 4px;
}
.tc-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-p {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 10px;
  border-radius: 6px;
  background: var(--bl);
  color: #fff;
  font-size: 14px;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.12s;
}
.btn-p .aii {
  width: 16px;
  height: 16px;
}
.btn-p.prs {
  transform: scale(0.95);
}
.btn-p.dis {
  background: var(--g100);
  color: var(--g300);
}
.btn-p.dis path {
  fill: var(--g300);
}
.btn-ai {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 10px;
  border-radius: 6px;
  background: var(--aig);
  color: #fff;
  font-size: 14px;
  transition:
    background 0.3s,
    color 0.3s;
}
.btn-ai .aii {
  width: 16px;
  height: 16px;
}
.btn-ai.ld {
  background: var(--g100);
  color: var(--g300);
}
.btn-ai.ld path {
  fill: var(--g300);
}
.spin {
  animation: aispin 1s linear infinite;
}
@keyframes aispin {
  to {
    transform: rotate(360deg);
  }
}
/* 표(Cell/Default) */
.tw {
  border: 1px solid var(--g150);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.aitb {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}
.aitb th {
  height: 36px;
  padding: 8px 12px;
  background: var(--g100);
  border-right: 1px solid var(--g150);
  border-bottom: 1px solid var(--g150);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aitb td {
  height: 36px;
  padding: 8px 12px;
  background: #fff;
  border-right: 1px solid var(--g150);
  border-bottom: 1px solid var(--g150);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.45s;
}
.aitb th:last-child,
.aitb td:last-child {
  border-right: 0;
}
.aitb tr:last-child td {
  border-bottom: 0;
}
.aitb .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.aitb .sep {
  width: 4px;
  padding: 0;
  background: var(--g150) !important;
  border: 0;
}
.aitb .u {
  color: var(--g800);
  margin-left: 4px;
}
.aitb .ko {
  color: var(--g600);
  font-weight: 400;
}
.aitb tr.rw {
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.aitb tr.rw.vis {
  opacity: 1;
  transform: none;
}
.aitb tr.lm td:not(.sep) {
  background: #fffbe5;
}
.aitb td.miss {
  box-shadow: inset 0 0 0 1.5px #f65959;
  color: var(--g400);
}
.aitb .old {
  color: var(--g400);
  text-decoration: line-through;
  margin-right: 6px;
  font-weight: 400;
}
.aitb .new {
  color: var(--bl);
  font-weight: 600;
}
.aitb td.fill {
  color: var(--bl);
}
.scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bl);
  opacity: 0;
  left: 0;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(85, 80, 255, 0.4);
}
.scan.go {
  animation: aitscan 1.4s linear forwards;
}
@keyframes aitscan {
  0% {
    left: 0;
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    left: calc(100% - 2px);
    opacity: 0;
  }
}
/* 결정 323: 데이터 이동 안내선(Monolis 웹루프 영상 문법: 안내 상자 · 연결선 · 값 칩, 색은 Mono:parts 식별색) */
.gd {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}
.gd .gb {
  fill: rgba(57, 176, 241, 0.07);
  stroke: #39b0f1;
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.35s;
}
.gd .gb.on {
  opacity: 1;
}
.gd .gl {
  fill: none;
  stroke: #39b0f1;
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.gd .gp {
  fill: #39b0f1;
}
.gd .gk rect {
  fill: #0383bd;
}
.gd .gk text {
  fill: #fff;
  font:
    600 12px "Switzer",
    "Pretendard",
    sans-serif;
  text-anchor: middle;
}
.gd .gk {
  opacity: 0;
  transition: opacity 0.3s 0.55s;
}
.gd .gk.on {
  opacity: 1;
}
/* 탭 · 설명(화면 바깥, 사이트 문법) */
.automation-timeline-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 40px;
  gap: 0 16px;
  margin-top: 16px;
}
.automation-timeline-tab {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
}
.automation-timeline-number {
  font: 500 12px/18px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.automation-timeline-korean {
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
}
.automation-timeline-tab.on .automation-timeline-number,
.automation-timeline-tab.on .automation-timeline-korean {
  color: var(--text);
}
.automation-timeline-p {
  display: block;
  height: 2px;
  margin-top: 8px;
  background: var(--line);
}
.automation-timeline-p b {
  display: block;
  height: 100%;
  width: 0;
  background: var(--text);
}
.automation-timeline-tab:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 4px;
}
.automation-timeline-play-pause {
  all: unset;
  cursor: pointer;
  width: 32px;
  height: 32px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.automation-timeline-play-pause svg {
  width: 12px;
  height: 12px;
  fill: var(--text);
}
.automation-timeline-play-pause .i-play,
.automation-timeline.paused .automation-timeline-play-pause .i-pause {
  display: none;
}
.automation-timeline.paused .automation-timeline-play-pause .i-play {
  display: block;
}
.automation-timeline-caps {
  margin-top: 20px;
  min-height: 52px;
}
.automation-timeline-caption {
  display: none;
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
  word-break: keep-all;
  max-width: 44em;
}
.automation-timeline-caption.on {
  display: block;
}
.automation-timeline-note {
  margin-top: 12px;
  font: 500 11px/16px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--n-400);
}

@media (max-width: 767px) {
  .aid {
    width: 480px;
    height: 760px;
  }
  .automation-input,
  .aih-pt,
  .aih-bc {
    display: none;
  }
  .aih-r .automation-button-title {
    display: none;
  }
  .aih-h {
    font-size: 18px;
  }
  .automation-button {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    padding: 12px 14px;
    gap: 16px;
  }
  .automation-timeline-label .ail-h {
    display: none;
  }
  .aitb {
    table-layout: auto;
  }
  .aitb .hm {
    display: none;
  }
  .aitb .old {
    display: none;
  }
  .aitb .ko {
    display: none;
  }
  .aitb td,
  .aitb th {
    padding: 8px;
  }
  .aitb .sep,
  .aitb col.sp4 {
    display: none;
  }
  .automation-timeline-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
  }
  .automation-timeline-play-pause {
    grid-column: 1/-1;
    justify-self: end;
  }
  .automation-timeline-caption {
    font-size: 15px;
    line-height: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aitb tr.rw,
  .fc,
  .aq {
    transition: none;
  }
  .scan {
    display: none;
  }
  .spin {
    animation: none;
  }
}

/* 결정 315: P2 네 마디 2×2 격자. 결정 386: 화면 이미지 → 영상 */
.g4 .order-lineage-image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
.image-dialog-field video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  background: #fff;
}
.g4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 24px;
  margin-top: 40px;
}
.g4c {
  min-width: 0;
}
.g4 .order-lineage-card {
  margin: 0;
}
.g4 .order-lineage-image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line);
  background: #fff;
}
.g4 .order-lineage-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  cursor: zoom-in;
}
.g4 figcaption {
  margin-top: 10px;
  font: 500 11px/16px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--n-400);
}
.g4t {
  margin-top: 14px;
}
.g4t .order-lineage-korean {
  display: flex;
  gap: 10px;
  font: 500 12px/18px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.g4t .order-lineage-heading {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  color: var(--text);
}
.g4t .order-lineage-description {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
  word-break: keep-all;
}
.g4t .order-lineage-adjustment {
  margin-top: 12px;
}
#p4 .p4-auto {
  margin-top: 72px;
}
@media (min-width: 1024px) {
  #p4 .shw {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .g4 {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  #p4 .p4-auto {
    margin-top: 48px;
  }
}

/* 결정 320: D-MP0 v2 */
.mp0 {
  position: relative;
  margin: 0 auto;
  max-width: 1020px;
} /* 결정 321: 그리드 폭의 85% */
.mp0 svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.mp0 .mp0-m {
  display: none;
}
@media (max-width: 767px) {
  .mp0 .mp0-d {
    display: none;
  }
  .mp0 .mp0-m {
    display: block;
    max-width: 420px;
    margin: 0 auto;
  }
  .mp0-m .m0-lab:not(.m0-tlab) {
    display: none;
  }
}
.mp0 path,
.mp0 rect,
.mp0 circle,
.mp0 line {
  vector-effect: non-scaling-stroke;
}
.mp0 .m0-lp-s,
.mp0 .m0-sp-s {
  fill: url(#mp0h);
  stroke: var(--n-700);
  stroke-width: 1;
}
.mp0 .m0-lp-t,
.mp0 .m0-sp-t {
  fill: var(--n-0);
  stroke: var(--n-700);
  stroke-width: 1;
}
.mp0 .m0-ce-s {
  fill: var(--n-100);
  stroke: var(--n-400);
  stroke-width: 0.8;
}
.mp0 .m0-ce-t {
  fill: var(--n-0);
  stroke: var(--n-400);
  stroke-width: 0.8;
  transition:
    fill 0.5s,
    stroke 0.5s;
}
.mp0 .m0-ic * {
  fill: none;
  stroke: var(--n-500);
  stroke-width: 1;
  transition: stroke 0.5s;
}
.mp0 .m0-ic .m0-th {
  stroke-width: 0.8;
  stroke: var(--n-400);
}
.mp0 .m0-ic .m0-fl {
  fill: var(--n-500);
  stroke: none;
}
.mp0 .m0-ic .m0-fw {
  fill: var(--n-0);
}
.mp0 .m0-ic .m0-ds {
  stroke-dasharray: 1.6 1.6;
  stroke: var(--n-400);
}
.mp0 .m0-ic .m0-hd {
  fill: var(--n-200);
  stroke: none;
}
.mp0 .m0-ic .m0-hd.m0-acc {
  fill: var(--n-200);
  transition: fill 0.5s;
}
.mp0 .m0-ic .m0-tk {
  stroke: var(--n-600);
  stroke-width: 1.4;
}
.mp0 .m0-dt {
  font: 600 6.4px var(--font-mono);
  letter-spacing: 0.06em;
  text-anchor: middle;
  fill: var(--n-600);
  stroke: none !important;
}
.mp0 .m0-empty rect {
  fill: none;
  stroke: var(--n-300);
  stroke-width: 0.8;
  stroke-dasharray: 2.4 2.4;
}
.mp0 .m0-lab text {
  stroke: none;
}
.mp0 .m0-il {
  font: 500 9.6px var(--font-mono);
  letter-spacing: 0.06em;
  fill: var(--n-600);
}
.mp0 .m0-sl {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.08em;
  fill: var(--n-500);
}
.mp0 .m0-pn {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  fill: var(--n-800);
}
.mp0 .m0-tb-s {
  fill: url(#mp0h);
  stroke: var(--n-400);
  stroke-width: 0.8;
}
.mp0 .m0-tb-t {
  fill: var(--n-0);
  stroke: var(--n-400);
  stroke-width: 0.8;
  stroke-dasharray: 2.4 2.4;
  transition: all 0.5s;
}
.mp0 .m0-tl {
  font: 600 8.4px var(--font-mono);
  letter-spacing: 0.1em;
  fill: var(--n-400);
  text-anchor: middle;
  transition: fill 0.5s;
}
.mp0 .m0-pl-l {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  fill: var(--n-500);
  text-anchor: middle;
}
.mp0 .m0-str {
  fill: none;
  stroke: var(--n-400);
  stroke-width: 0.9;
  stroke-dasharray: 2.4 4.2;
  opacity: 0.75;
}
.mp0 .m0-str.m0-acc {
  stroke: var(--pcd);
}
.mp0 .m0-s-out,
.mp0 .m0-s-sup {
  opacity: 0.22;
  transition: opacity 0.6s;
}
.mp0 .m0-s-sup:not(.m0-acc) {
  stroke: var(--n-400);
}
.mp0 .m0-pls {
  fill: none;
  stroke: var(--pcd);
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}
.mp0 .m0-vp rect {
  stroke-width: 1;
  transition:
    fill 0.45s,
    stroke 0.45s;
}
.mp0 .m0-vp text {
  font: 500 9.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-anchor: middle;
  transition: fill 0.45s;
}
.mp0 .m0-vp .m0-ck {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.4s;
}
.mp0 .m0-vp.m0-ai rect {
  fill: var(--n-0);
  stroke: var(--pcd);
}
.mp0 .m0-vp.m0-ai text {
  fill: var(--pcd);
}
.mp0 .m0-vp.m0-ai .m0-ck {
  display: none;
}
.mp0 .m0-vp.m0-ap rect {
  fill: var(--n-0);
  stroke: var(--n-950);
}
.mp0 .m0-vp.m0-ap text {
  fill: var(--n-950);
}
.mp0 .m0-vp.m0-ap .m0-ck {
  stroke: var(--n-0);
}
.mp0 .m0-sup .m0-sp-t,
.mp0 .m0-sup .m0-doc {
  transition: opacity 0.5s;
}
.mp0 .m0-sup .m0-doc {
  opacity: 0.35;
}
.mp0 .m0-pl-l.m0-u0,
.mp0 .m0-pl-l.m0-u1,
.mp0 .m0-pl-l.m0-u2 {
  transition: fill 0.5s;
}
.mp0 .m0-acard rect {
  fill: var(--n-0);
  stroke: var(--n-950);
  stroke-width: 1.1;
}
.mp0 .m0-acard line {
  stroke: var(--n-200);
  stroke-width: 1;
}
.mp0 .m0-ca-e {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.12em;
  fill: var(--pcd);
}
.mp0 .m0-ca-t {
  font: 500 15px var(--font-sans);
  fill: var(--n-900);
}
.mp0 .m0-ca-s {
  font: 400 11px var(--font-mono);
  fill: var(--n-500);
}
.mp0 .m0-ck-k {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.08em;
  fill: var(--n-500);
}
.mp0 .m0-ck-v {
  font: 500 11.5px var(--font-mono);
  fill: var(--n-800);
  text-anchor: end;
}
.mp0 .m0-ck-v.m0-acc {
  fill: var(--pcd);
}
.mp0 .m0-ck-big {
  font: 600 20px var(--font-mono);
  fill: var(--n-900);
  text-anchor: end;
}
.mp0 .m0-cr {
  opacity: 0.18;
  transition: opacity 0.45s;
}
.mp0 .m0-lead {
  fill: none;
  stroke: var(--pcd);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity 0.5s;
}
/* 장면 1: 요청이 흘러 AI로 */
.mp0[data-st="1"] .m0-s-in,
.mp0[data-st="2"] .m0-s-in,
.mp0[data-st="3"] .m0-s-in,
.mp0[data-st="1"] .m0-s-in2,
.mp0[data-st="2"] .m0-s-in2,
.mp0[data-st="3"] .m0-s-in2 {
  animation: mp0f 1.1s linear infinite;
  stroke: var(--n-500);
}
@keyframes mp0f {
  to {
    stroke-dashoffset: -13.2;
  }
}
.mp0:not([data-st="0"]) .m0-vp.m0-ai rect {
  fill: var(--pcd);
}
.mp0:not([data-st="0"]) .m0-vp.m0-ai text {
  fill: var(--n-0);
}
/* 장면 2: AI가 아이템 칸에 놓고 한 줄로 합산 */
.mp0[data-st="2"] .m0-pls,
.mp0[data-st="3"] .m0-pls {
  animation: mp0d 0.7s ease-out forwards;
}
.mp0 .m0-pls.m0-p1 {
  animation-delay: 0.14s !important;
}
.mp0 .m0-pls.m0-p2 {
  animation-delay: 0.28s !important;
}
@keyframes mp0d {
  0% {
    opacity: 0.9;
    stroke-dashoffset: 100;
  }
  80% {
    opacity: 0.9;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
.mp0[data-st="2"] .m0-cell.m0-on .m0-ct,
.mp0[data-st="3"] .m0-cell.m0-on .m0-ct {
  fill: color-mix(in srgb, var(--pc) 16%, var(--n-0));
  stroke: var(--pcd);
}
.mp0[data-st="2"] .m0-cell.m0-on .m0-ce-s,
.mp0[data-st="3"] .m0-cell.m0-on .m0-ce-s {
  fill: url(#mp0ha);
  stroke: var(--pcd);
}
.mp0[data-st="2"] .m0-cell.m0-on .m0-ic *,
.mp0[data-st="3"] .m0-cell.m0-on .m0-ic * {
  stroke: var(--pcd);
}
.mp0[data-st="2"] .m0-cell.m0-on .m0-ic .m0-fl,
.mp0[data-st="3"] .m0-cell.m0-on .m0-ic .m0-fl {
  fill: var(--pcd);
}
.mp0 .m0-cell.m0-o1 * {
  transition-delay: 0.14s !important;
}
.mp0 .m0-cell.m0-o2 * {
  transition-delay: 0.28s !important;
}
.mp0[data-st="2"] .m0-tb-t,
.mp0[data-st="3"] .m0-tb-t {
  fill: var(--pcd);
  stroke: var(--pcd);
  stroke-dasharray: none;
  transition-delay: 0.7s;
}
.mp0[data-st="2"] .m0-tb-s,
.mp0[data-st="3"] .m0-tb-s {
  fill: url(#mp0ha);
  stroke: var(--pcd);
}
.mp0[data-st="2"] .m0-tl,
.mp0[data-st="3"] .m0-tl {
  fill: var(--n-0);
  transition-delay: 0.7s;
}
.mp0[data-st="2"] .m0-lead,
.mp0[data-st="3"] .m0-lead {
  opacity: 0.9;
  transition-delay: 0.4s;
}
.mp0[data-st="2"] .m0-cr,
.mp0[data-st="3"] .m0-cr {
  opacity: 1;
}
.mp0 .m0-cr.m0-r1 {
  transition-delay: 0.15s;
}
.mp0 .m0-cr.m0-r2 {
  transition-delay: 0.3s;
}
.mp0 .m0-cr.m0-r3 {
  transition-delay: 0.75s;
}
.mp0 .m0-cr.m0-r4 {
  transition-delay: 1.05s;
}
.mp0[data-st="2"] .m0-cr.m0-r5 {
  opacity: 0.18;
}
/* 장면 3: 사람이 승인하면 업체별 발주서 */
.mp0[data-st="3"] .m0-vp.m0-ap rect {
  fill: var(--n-950);
}
.mp0[data-st="3"] .m0-vp.m0-ap text {
  fill: var(--n-0);
}
.mp0[data-st="3"] .m0-vp.m0-ap .m0-ck {
  opacity: 1;
}
.mp0[data-st="3"] .m0-s-out {
  opacity: 0.9;
  animation: mp0f 1.1s linear infinite;
}
.mp0[data-st="3"] .m0-s-sup {
  opacity: 0.75;
  animation: mp0f 1.1s linear infinite;
  transition-delay: 0.5s;
}
.mp0[data-st="3"] .m0-s-sup.m0-acc {
  opacity: 0.95;
}
.mp0[data-st="3"] .m0-sup .m0-doc {
  opacity: 1;
}
.mp0 .m0-sup.m0-u0 .m0-doc {
  transition-delay: 0.7s;
}
.mp0 .m0-sup.m0-u1 .m0-doc {
  transition-delay: 0.85s;
}
.mp0 .m0-sup.m0-u2 .m0-doc {
  transition-delay: 1s;
}
.mp0[data-st="3"] .m0-sup.m0-on .m0-hd.m0-acc {
  fill: var(--pcd);
}
.mp0[data-st="3"] .m0-sup.m0-on .m0-dt.m0-acc {
  fill: var(--n-0);
}
.mp0[data-st="3"] .m0-sup.m0-on .m0-sp-t {
  stroke: var(--pcd);
}
.mp0 .m0-sup.m0-on .m0-hd.m0-acc,
.mp0 .m0-sup.m0-on .m0-dt.m0-acc {
  transition: fill 0.5s 0.8s;
}
.mp0 .m0-pl-l.m0-acc {
  fill: var(--pcd);
}
.mp0[data-st="0"] .m0-pl-l.m0-u0,
.mp0[data-st="1"] .m0-pl-l.m0-u0,
.mp0[data-st="2"] .m0-pl-l.m0-u0 {
  fill: var(--n-500);
}
.mp0[data-st="3"] .m0-cr.m0-r5 {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .mp0 * {
    animation: none !important;
    transition: none !important;
  }
}

/* 결정 325: D-MP2a v3, [Monolis] Design System 정렬 */
.mp2 {
  --m2b: #24232e;
  --m2g50: #fafcff;
  --m2g100: #f5f8fc;
  --m2g150: #ebf1f7;
  --m2g200: #e3e9ef;
  --m2g300: #dae0e6;
  --m2g400: #c2cad1;
  --m2g600: #838c94;
  --m2g700: #69727a;
  --m2g800: #515961;
  --m2k0: color-mix(in srgb, var(--pc) 38%, #fff);
  --m2k1: color-mix(in srgb, var(--pc) 66%, #fff);
  --m2k2: var(--pc);
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) auto minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 40px;
}
.m2-p {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.m2-p.acc {
  border-color: color-mix(in srgb, var(--pc) 45%, var(--line));
}
.m2-t {
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 20px;
  word-break: keep-all;
}
.m2-t b {
  display: block;
  font: 500 11px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--text);
  margin-bottom: 6px;
}
.m2-p.acc .m2-t b {
  color: var(--pcd);
}
/* DS 카드 내부: Switzer · Cool Gray */
.m2-c,
.m2-it {
  font-family: "Switzer", "Pretendard", sans-serif;
  line-height: 1.4;
  color: var(--m2b);
  -webkit-font-smoothing: antialiased;
  font-feature-settings:
    "liga" 0,
    "clig" 0;
  letter-spacing: 0;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  background: #fff;
  border: 1px solid var(--m2g300);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(36, 35, 46, 0.04);
}
.m2-i {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--m2g700);
  stroke-width: 1.15;
}
.m2-i .t {
  stroke-width: 0.85;
  stroke: var(--m2g600);
}
.m2-i .f {
  fill: var(--m2g700);
  stroke: none;
}
.m2-i .d {
  stroke-dasharray: 1.4 1.2;
}
.m2-th {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--m2g100);
  border: 1px solid var(--m2g150);
}
.m2-th.s24 {
  width: 24px;
  height: 24px;
}
.m2-th.s32 {
  width: 32px;
  height: 32px;
}
.m2-th.s32 .m2-i {
  width: 20px;
  height: 20px;
}
.m2-d {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: var(--m2g700);
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.m2-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.m2-dot.k0,
.m2-b i.k0 {
  background: var(--m2k0);
}
.m2-dot.k1,
.m2-b i.k1 {
  background: var(--m2k1);
}
.m2-dot.k2,
.m2-b i.k2 {
  background: var(--m2k2);
}
/* Badge/Rectangle · Chip/Pill */
.m2-bg {
  margin-left: auto;
  padding: 2px 6px 3px;
  border-radius: 4px;
  background: var(--m2g150);
  color: var(--m2g800);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.m2-pl {
  margin-left: auto;
  font-style: normal;
  padding: 2px 9px;
  border: 1px solid var(--m2g300);
  border-radius: 20px;
  background: #fff;
  color: var(--m2g800);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
/* 표 행 */
.m2-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  background: var(--m2g100);
  border-bottom: 1px solid var(--m2g150);
}
.m2-hd b {
  font-size: 14px;
  font-weight: 700;
}
.m2-tb {
  display: flex;
  flex-direction: column;
}
.m2-tr {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--m2g150);
  position: relative;
  font-size: 13px;
  font-weight: 500;
}
.m2-tr b {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  font-feature-settings: "tnum" 1;
}
.m2-nm {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  padding: 7px 0;
}
.m2-nm em {
  font-style: normal;
  font-size: 12px;
  color: var(--m2g600);
  overflow: hidden;
  text-overflow: ellipsis;
}
.m2-c .m2-tb {
  flex: none;
}
.m2-c .m2-tr {
  min-height: 50px;
}
.m2-c .m2-hd {
  height: 42px;
}
.m2-c .m2-po {
  margin: 14px 10px 12px;
  height: 38px;
}
.m2-grp {
  position: relative;
  border-bottom: 1px solid var(--m2g150);
  padding-bottom: 8px;
  transition: background 0.4s calc(var(--d) * 0.18s + 0.2s);
}
.m2-grp .m2-tr {
  border-bottom: 0;
}
.m2-grp:before {
  content: "";
  position: absolute;
  inset: 3px 5px;
  border-radius: 6px;
  border: 1px dashed var(--m2g600);
  opacity: 0;
  transition: opacity 0.4s calc(var(--d) * 0.18s + 0.2s);
  pointer-events: none;
}
.mp2[data-in="1"] .m2-grp {
  background: var(--m2g50);
}
.mp2[data-in="1"] .m2-grp:before {
  opacity: 1;
}
/* 납기 Lot 행: 품목명 글자 시작선(12 + 썸네일 24 + 8)에 맞춰 들여쓰기, 세로 막대 없음 */
.m2-lots {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: -2px 12px 0 44px;
}
.m2-lot {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0;
  border-top: 1px dashed var(--m2g200);
  font-size: 12px;
  font-weight: 500;
  color: var(--m2g700);
}
.m2-lb {
  padding: 1px 5px 2px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--m2g300);
  color: var(--m2g800);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.m2-lt {
  color: var(--m2g600);
  white-space: nowrap;
}
.m2-lot b {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--m2g800);
  font-feature-settings: "tnum" 1;
}
.m2-lot {
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.35s,
    transform 0.35s;
  transition-delay: calc(var(--d) * 0.18s + 0.35s);
}
.m2-lot + .m2-lot {
  transition-delay: calc(var(--d) * 0.18s + 0.45s);
}
.mp2[data-in="1"] .m2-lot {
  opacity: 1;
  transform: none;
}
.m2-po {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px;
  padding: 0 6px 0 10px;
  height: 36px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--m2g300);
  font-size: 13px;
  font-weight: 500;
  color: var(--m2g700);
  white-space: nowrap;
}
.m2-po span b {
  font-weight: 700;
  color: var(--m2b);
  margin-left: 2px;
}
.m2-po .m2-pl {
  padding: 1px 8px;
  font-size: 11.5px;
}
.m2-c .m2-po {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.4s calc(var(--d) * 0.18s + 0.6s),
    transform 0.4s calc(var(--d) * 0.18s + 0.6s);
}
.mp2[data-in="1"] .m2-c .m2-po {
  opacity: 1;
  transform: none;
}
/* 결과 줄(사이트 문법) */
.m2-ft {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
  word-break: keep-all;
}
.m2-ft b {
  color: var(--text);
  font-weight: 600;
}
.m2-k {
  display: inline-block;
  margin-right: 8px;
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--n-400);
}
.m2-k.acc {
  color: var(--pcd);
}
.m2-cs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  align-items: center;
}
/* 아이템 축 */
.m2-it {
  flex: 1;
  border-color: color-mix(in srgb, var(--pc) 40%, var(--m2g300));
}
.m2-ih {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--m2g150);
}
.m2-ih .m2-th {
  background: color-mix(in srgb, var(--pc) 8%, #fff);
  border-color: color-mix(in srgb, var(--pc) 22%, #fff);
}
.m2-ih .m2-i {
  stroke: var(--pcd);
}
.m2-ih .m2-i .t {
  stroke: var(--pcd);
}
.m2-ih .m2-i .f {
  fill: var(--pcd);
}
.m2-nm2 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.m2-nm2 em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--m2g600);
}
.m2-th2 {
  min-height: 36px;
  background: var(--m2g100);
  font-size: 13px;
  font-weight: 700;
}
.m2-th2 span:last-child {
  margin-left: auto;
}
.m2-r {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 52px;
  gap: 10px;
  min-height: 36px;
}
.m2-st {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--m2g800);
}
.m2-b {
  height: 8px;
  border-radius: 4px;
  background: var(--m2g150);
  overflow: hidden;
}
.m2-b i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1)
    calc(var(--d) * 0.15s + 0.3s);
}
.mp2[data-in="1"] .m2-b i {
  width: var(--w);
}
.m2-r b {
  text-align: right;
}
.m2-sub {
  min-height: 36px;
  background: var(--m2g100);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.5s 0.85s;
}
.m2-sub b {
  font-weight: 700;
}
.mp2[data-in="1"] .m2-sub {
  opacity: 1;
}
.m2-sum {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.5s 1.05s;
}
.mp2[data-in="1"] .m2-sum {
  opacity: 1;
}
.m2-sum div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m2-sum span {
  font-size: 12px;
  font-weight: 500;
  color: var(--m2g600);
}
.m2-sum b {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  font-feature-settings: "tnum" 1;
}
.m2-sum .big {
  text-align: right;
}
.m2-sum div:first-child b {
  padding-bottom: 3px;
}
.m2-sum .big b {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pcd);
}
.m2-po.one {
  margin: 0 12px 12px;
  border-color: color-mix(in srgb, var(--pc) 40%, var(--m2g300));
  opacity: 0;
  transition: opacity 0.5s 1.3s;
}
.m2-po.one .m2-d {
  stroke: var(--pcd);
}
.mp2[data-in="1"] .m2-po.one {
  opacity: 1;
}
.m2-or {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.m2-or span {
  font: 600 12px var(--font-mono);
  color: var(--n-400);
}
@media (max-width: 1100px) {
  .mp2 {
    grid-template-columns: 1fr;
  }
  .m2-or {
    flex-direction: row;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .m2-cs {
    grid-template-columns: 1fr;
  }
  .m2-p {
    padding: 18px 16px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mp2 * {
    transition: none !important;
  }
}

/* 결정 327: D-MP3a v2 역할 도식(D-MP0와 같은 벡터 등각 문법) */
.mp3 {
  max-width: 1020px;
  margin: 0 auto;
}
.mp3 .m3-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mp3 .m3-tabs button {
  appearance: none;
  cursor: pointer;
  font: inherit;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--muted);
  transition:
    border-color 0.3s,
    color 0.3s;
}
.mp3 .m3-tabs button span {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.12em;
}
.mp3 .m3-tabs button b {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: color 0.3s;
}
.mp3 .m3-tabs button[aria-pressed="true"] {
  border-color: var(--pcd);
  color: var(--pcd);
}
.mp3 .m3-tabs button[aria-pressed="true"] b {
  color: var(--pcd);
}
.mp3 .m3-fg {
  margin: 0;
}
.mp3 svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.mp3 .mp3-m {
  display: none;
}
@media (max-width: 767px) {
  .mp3 .mp3-d {
    display: none;
  }
  .mp3 .mp3-m {
    display: block;
    max-width: 420px;
    margin: 0 auto;
  }
  .mp3 .m3-lab {
    display: none;
  }
}
.mp3 path,
.mp3 rect,
.mp3 circle,
.mp3 line {
  vector-effect: non-scaling-stroke;
}
.mp3 .m3-rl {
  transition: opacity 0.45s;
}
.mp3 .m3-sp-s,
.mp3 .m3-ly-s {
  fill: url(#mp3h);
  stroke: var(--n-700);
  stroke-width: 1;
  transition: stroke 0.45s;
}
.mp3 .m3-sp-t,
.mp3 .m3-ly-t {
  fill: var(--n-0);
  stroke: var(--n-700);
  stroke-width: 1;
  transition:
    stroke 0.45s,
    fill 0.45s;
}
.mp3 .m3-ly-off,
.mp3 .m3-ly-pur {
  fill-opacity: 0.86;
}
.mp3 .m3-ic * {
  fill: none;
  stroke: var(--n-500);
  stroke-width: 1;
  transition: stroke 0.45s;
}
.mp3 .m3-ic .m3-th {
  stroke-width: 0.8;
  stroke: var(--n-400);
}
.mp3 .m3-ic .m3-fl {
  fill: var(--n-500);
  stroke: none;
}
.mp3 .m3-ic .m3-fw {
  fill: var(--n-0);
}
.mp3 .m3-ic .m3-ds {
  stroke-dasharray: 1.6 1.6;
  stroke: var(--n-400);
}
.mp3 .m3-ic .m3-cb {
  fill: var(--n-50);
  stroke: var(--n-300);
  stroke-width: 0.8;
}
.mp3 .m3-ic .m3-pc {
  fill: var(--n-0);
  stroke: var(--n-400);
  stroke-width: 0.8;
}
.mp3 .m3-ic .m3-cur {
  font: 500 14px var(--font-mono);
  text-anchor: middle;
  fill: var(--n-500);
  stroke: none !important;
  transition: fill 0.45s;
}
.mp3 .m3-lab text {
  stroke: none;
}
.mp3 .m3-pn {
  font: 500 12px var(--font-mono);
  letter-spacing: 0.08em;
  fill: var(--n-800);
  transition: fill 0.45s;
}
.mp3 .m3-pl-l {
  font: 500 12px var(--font-mono);
  letter-spacing: 0.08em;
  fill: var(--n-500);
  text-anchor: middle;
  transition:
    fill 0.45s,
    opacity 0.45s;
}
.mp3 .m3-str {
  fill: none;
  stroke: var(--n-400);
  stroke-width: 0.9;
  stroke-dasharray: 2.4 4.2;
  opacity: 0.75;
  transition:
    stroke 0.45s,
    opacity 0.45s;
}
.mp3[data-r="0"] .m3-str {
  animation: m3f 1.6s linear infinite;
}
@keyframes m3f {
  to {
    stroke-dashoffset: -13.2;
  }
}
.mp3 .m3-pi rect {
  fill: var(--n-0);
  stroke: var(--n-400);
  stroke-width: 1;
  transition:
    fill 0.45s,
    stroke 0.45s;
}
.mp3 .m3-pi text {
  font: 500 11.5px var(--font-mono);
  letter-spacing: 0.1em;
  text-anchor: middle;
  fill: var(--n-700);
  transition: fill 0.45s;
}
.mp3 .ch {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.1em;
  fill: var(--n-800);
  text-anchor: middle;
  transition: fill 0.45s;
}
.mp3 .m3-nts {
  min-height: 26px;
  margin-top: 12px;
}
.mp3 .m3-nt {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--text);
  display: none;
  word-break: keep-all;
}
.mp3[data-r="0"] .m3-nt[data-i="0"],
.mp3[data-r="1"] .m3-nt[data-i="1"],
.mp3[data-r="2"] .m3-nt[data-i="2"],
.mp3[data-r="3"] .m3-nt[data-i="3"] {
  display: block;
}
.mp3[data-r="1"] .m3-rl:not(.m3-h) {
  opacity: 0.2;
}
.mp3[data-r="1"] .m3-str.m3-h {
  stroke: var(--pcd);
  opacity: 0.95;
  animation: m3f 1.1s linear infinite;
}
.mp3[data-r="1"] .m3-rp.m3-h .m3-sp-t {
  stroke: var(--pcd);
}
.mp3[data-r="1"] .m3-rp.m3-h .m3-sp-s {
  fill: url(#mp3ha);
  stroke: var(--pcd);
}
.mp3[data-r="1"] .m3-rp.m3-h .m3-ic * {
  stroke: var(--pcd);
}
.mp3[data-r="1"] .m3-rp.m3-h .m3-ic .m3-fl {
  fill: var(--pcd);
}
.mp3[data-r="1"] .m3-pl-l.m3-h {
  fill: var(--pcd);
}
.mp3[data-r="1"] .m3-pi.m3-h rect {
  fill: var(--pcd);
  stroke: var(--pcd);
}
.mp3[data-r="1"] .m3-pi.m3-h text {
  fill: var(--n-0);
}
.mp3[data-r="1"] .m3-lyr.m3-h:not(.m3-lib) .m3-ly-t {
  stroke: var(--pcd);
  fill: color-mix(in srgb, var(--pc) 7%, var(--n-0));
  fill-opacity: 0.9;
}
.mp3[data-r="1"] .m3-lyr.m3-h:not(.m3-lib) .m3-ly-s {
  fill: url(#mp3ha);
  stroke: var(--pcd);
}
.mp3[data-r="1"] .m3-lyr.m3-h:not(.m3-lib) .m3-pc {
  stroke: var(--pcd);
}
.mp3[data-r="1"] .m3-lyr.m3-h:not(.m3-lib) .m3-cur {
  fill: var(--pcd);
}
.mp3[data-r="1"] .m3-lyr.m3-h:not(.m3-lib) .m3-pn {
  fill: var(--pcd);
}
.mp3[data-r="1"] .col.m3-c1 {
  fill: color-mix(in srgb, var(--pc) 10%, var(--n-0));
}
.mp3[data-r="1"] .ch.m3-c1 {
  fill: var(--pcd);
  font-weight: 600;
}
.mp3[data-r="1"] .m3-no.m3-c1 {
  stroke: var(--pcd);
}
.mp3[data-r="2"] .m3-rl:not(.m3-b) {
  opacity: 0.2;
}
.mp3[data-r="2"] .m3-str.m3-b {
  stroke: var(--pcd);
  opacity: 0.95;
  animation: m3f 1.1s linear infinite;
}
.mp3[data-r="2"] .m3-rp.m3-b .m3-sp-t {
  stroke: var(--pcd);
}
.mp3[data-r="2"] .m3-rp.m3-b .m3-sp-s {
  fill: url(#mp3ha);
  stroke: var(--pcd);
}
.mp3[data-r="2"] .m3-rp.m3-b .m3-ic * {
  stroke: var(--pcd);
}
.mp3[data-r="2"] .m3-rp.m3-b .m3-ic .m3-fl {
  fill: var(--pcd);
}
.mp3[data-r="2"] .m3-pl-l.m3-b {
  fill: var(--pcd);
}
.mp3[data-r="2"] .m3-pi.m3-b rect {
  fill: var(--pcd);
  stroke: var(--pcd);
}
.mp3[data-r="2"] .m3-pi.m3-b text {
  fill: var(--n-0);
}
.mp3[data-r="2"] .m3-lyr.m3-b:not(.m3-lib) .m3-ly-t {
  stroke: var(--pcd);
  fill: color-mix(in srgb, var(--pc) 7%, var(--n-0));
  fill-opacity: 0.9;
}
.mp3[data-r="2"] .m3-lyr.m3-b:not(.m3-lib) .m3-ly-s {
  fill: url(#mp3ha);
  stroke: var(--pcd);
}
.mp3[data-r="2"] .m3-lyr.m3-b:not(.m3-lib) .m3-pc {
  stroke: var(--pcd);
}
.mp3[data-r="2"] .m3-lyr.m3-b:not(.m3-lib) .m3-cur {
  fill: var(--pcd);
}
.mp3[data-r="2"] .m3-lyr.m3-b:not(.m3-lib) .m3-pn {
  fill: var(--pcd);
}
.mp3[data-r="2"] .col.m3-c2 {
  fill: color-mix(in srgb, var(--pc) 10%, var(--n-0));
}
.mp3[data-r="2"] .ch.m3-c2 {
  fill: var(--pcd);
  font-weight: 600;
}
.mp3[data-r="2"] .m3-no.m3-c2 {
  stroke: var(--pcd);
}
.mp3[data-r="3"] .m3-rl:not(.m3-r) {
  opacity: 0.2;
}
.mp3[data-r="3"] .m3-str.m3-r {
  stroke: var(--pcd);
  opacity: 0.95;
  animation: m3f 1.1s linear infinite;
}
.mp3[data-r="3"] .m3-rp.m3-r .m3-sp-t {
  stroke: var(--pcd);
}
.mp3[data-r="3"] .m3-rp.m3-r .m3-sp-s {
  fill: url(#mp3ha);
  stroke: var(--pcd);
}
.mp3[data-r="3"] .m3-rp.m3-r .m3-ic * {
  stroke: var(--pcd);
}
.mp3[data-r="3"] .m3-rp.m3-r .m3-ic .m3-fl {
  fill: var(--pcd);
}
.mp3[data-r="3"] .m3-pl-l.m3-r {
  fill: var(--pcd);
}
.mp3[data-r="3"] .m3-pi.m3-r rect {
  fill: var(--pcd);
  stroke: var(--pcd);
}
.mp3[data-r="3"] .m3-pi.m3-r text {
  fill: var(--n-0);
}
.mp3[data-r="3"] .m3-lyr.m3-r:not(.m3-lib) .m3-ly-t {
  stroke: var(--pcd);
  fill: color-mix(in srgb, var(--pc) 7%, var(--n-0));
  fill-opacity: 0.9;
}
.mp3[data-r="3"] .m3-lyr.m3-r:not(.m3-lib) .m3-ly-s {
  fill: url(#mp3ha);
  stroke: var(--pcd);
}
.mp3[data-r="3"] .m3-lyr.m3-r:not(.m3-lib) .m3-pc {
  stroke: var(--pcd);
}
.mp3[data-r="3"] .m3-lyr.m3-r:not(.m3-lib) .m3-cur {
  fill: var(--pcd);
}
.mp3[data-r="3"] .m3-lyr.m3-r:not(.m3-lib) .m3-pn {
  fill: var(--pcd);
}
.mp3[data-r="3"] .col.m3-c3 {
  fill: color-mix(in srgb, var(--pc) 10%, var(--n-0));
}
.mp3[data-r="3"] .ch.m3-c3 {
  fill: var(--pcd);
  font-weight: 600;
}
.mp3[data-r="3"] .m3-no.m3-c3 {
  stroke: var(--pcd);
}
@media (prefers-reduced-motion: reduce) {
  .mp3 * {
    animation: none !important;
    transition: none !important;
  }
}

@media (min-width: 1024px) {
  .mp3 {
    max-width: none;
    margin-bottom: 56px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: 24px;
    align-items: start;
  }
  /* 결정 332: 왼쪽 열 위 · 아래 끝을 도식 위 · 아래 끝에 맞춤(탭 = 도식 상단, 표 하단 = 도식 하단), 탭 높이 · 글자 축소 */
  .mp3 .m3-tabs {
    grid-column: 1 / span 3;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0;
    padding: 0;
  }
  .mp3 .m3-tabs button {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    min-width: 0;
  }
  .mp3 .m3-tabs button span {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
  .mp3 .m3-tabs button b {
    font-size: 12.5px;
    white-space: nowrap;
  }
  .mp3 .m3-nts {
    grid-column: 1 / span 3;
    grid-row: 2;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    min-height: 0;
  }
  .mp3 .m3-nt {
    font-size: 13.5px;
    line-height: 21px;
  }
  .mp3 .m3-fg {
    grid-column: 4 / span 9;
    grid-row: 1 / span 3;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  .mp3 .m3-fg svg {
    width: 100%;
  }
  .mp3 .m3-tw {
    grid-column: 1 / span 3;
    grid-row: 3;
    align-self: end;
    margin-top: 16px;
  }
  .mp3 .m3-tb th,
  .mp3 .m3-tb td {
    padding: 6px 3px;
    font-size: 10px;
  }
}

.mp3 .m3-tw {
  margin-top: 20px;
}
.mp3 .m3-te {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--pcd);
  margin-bottom: 8px;
}
.mp3 .m3-tb {
  width: 100%;
  border-collapse: collapse;
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.04em;
}
.mp3 .m3-tb th,
.mp3 .m3-tb td {
  padding: 8px 4px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--n-700);
  transition:
    background 0.45s,
    color 0.45s;
}
.mp3 .m3-tb tr:first-child th {
  border-top: 0;
  color: var(--n-800);
  letter-spacing: 0.08em;
}
.mp3 .m3-tb tr:last-child th,
.mp3 .m3-tb tr:last-child td {
  border-bottom: 1px solid var(--line);
}
.mp3 .m3-tb tr th:first-child {
  text-align: left;
  color: var(--n-500);
  padding-left: 0;
  white-space: nowrap;
}
.mp3 .m3-tb .m3-no {
  display: inline-block;
  width: 12px;
  height: 0;
  border-top: 1.2px solid var(--n-300);
  vertical-align: middle;
}
.mp3[data-r="1"] .m3-tb .m3-c1 {
  background: color-mix(in srgb, var(--pc) 9%, transparent);
  color: var(--pcd);
  font-weight: 600;
}
.mp3[data-r="1"] .m3-tb .m3-c1 .m3-no {
  border-color: var(--pcd);
}
.mp3[data-r="2"] .m3-tb .m3-c2 {
  background: color-mix(in srgb, var(--pc) 9%, transparent);
  color: var(--pcd);
  font-weight: 600;
}
.mp3[data-r="2"] .m3-tb .m3-c2 .m3-no {
  border-color: var(--pcd);
}
.mp3[data-r="3"] .m3-tb .m3-c3 {
  background: color-mix(in srgb, var(--pc) 9%, transparent);
  color: var(--pcd);
  font-weight: 600;
}
.mp3[data-r="3"] .m3-tb .m3-c3 .m3-no {
  border-color: var(--pcd);
}

/* 결정 329: D-MP3b v2 발주 상태 스윔레인 궤적 */
.b3 {
  margin: 20px 0 0;
} /* 결정 330: 그리드 12열 전폭 */
.b3-g {
  position: relative;
  display: grid;
  grid-template-columns: calc((100% - 264px) / 12 * 3 + 72px) repeat(
      6,
      minmax(0, 1fr)
    );
  grid-auto-rows: auto;
} /* 결정 330: 레인 라벨 = 12열 중 3열(+거터), 단계 영역 = D-MP3a 도식 열과 같은 시작선 */
.b3-c {
  grid-row: var(--r);
  grid-column: var(--c);
  min-width: 0;
}
.b3-hd {
  appearance: none;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0 10px 16px;
  text-align: left;
}
.b3-no {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--n-400);
  transition: color 0.4s;
}
.b3-bd {
  display: inline-block;
  padding: 3px 8px 4px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: 500 12.5px/1.2 var(--font-mono);
  color: var(--n-500);
  white-space: nowrap;
  transition: all 0.4s;
}
.b3-ln {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 10px 0 0;
  border-top: 1px solid var(--line);
}
.b3-ln b {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--n-700);
}
.b3-ln span {
  font-size: 12.5px;
  color: var(--muted);
}
.b3-cell {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-top: 1px solid var(--line);
  transition: background 0.4s;
}
.b3-cell.b3-bot,
.b3-ln.b3-last {
  border-bottom: 1px solid var(--line);
}
.b3-chip {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 13px;
  border: 1px solid var(--n-300);
  background: var(--n-0);
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--n-500);
  white-space: nowrap;
  transition: all 0.4s;
}
.b3-sv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.b3-sv path {
  fill: none;
  stroke-width: 1.2;
}
.b3-pa {
  stroke: var(--n-300);
  stroke-dasharray: 2.4 4.2;
}
.b3-pd {
  stroke: var(--n-700);
}
.b3-pc {
  stroke: var(--pcd);
  stroke-width: 1.6 !important;
  stroke-dasharray: 3 4;
  animation: b3f 1s linear infinite;
}
@keyframes b3f {
  to {
    stroke-dashoffset: -14;
  }
}
.b3-tk {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--pcd);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc) 22%, transparent);
  transition:
    left 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.b3-nts {
  margin-top: 16px;
  min-height: 24px;
}
.b3-nt {
  margin: 0;
  display: none;
  font-size: 15px;
  line-height: 24px;
  color: var(--text);
  word-break: keep-all;
}
.b3-nn {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--pcd);
  margin-right: 10px;
}
.b3-cx {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
  word-break: keep-all;
}
.b3-bd.x {
  color: var(--n-500);
  border-style: dashed;
  font-size: 11.5px;
}
@media (max-width: 767px) {
  .b3-g {
    grid-template-columns: 72px repeat(3, minmax(0, 1fr));
  }
  .b3-c {
    grid-row: var(--c);
    grid-column: var(--r);
  }
  .b3-corner {
    display: none;
  }
  .b3-hd {
    padding: 0 6px 0 0;
    justify-content: center;
    gap: 6px;
    height: 64px;
    border-top: 1px solid var(--line);
  }
  .b3-bd {
    font-size: 11px;
    padding: 2px 6px 3px;
  }
  .b3-ln {
    padding: 0 4px 12px;
    border-top: 0;
    justify-content: flex-end;
    text-align: center;
    align-items: center;
  }
  .b3-ln b {
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }
  .b3-ln span {
    font-size: 11px;
  }
  .b3-cell {
    height: 64px;
  }
  .b3-cell.b3-bot,
  .b3-ln.b3-last {
    border-bottom: 0;
  }
  .b3-g > .b3-cell.b3k5,
  .b3-g > .b3-hd.b3k5 {
    border-bottom: 1px solid var(--line);
  }
  .b3-chip {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    height: auto;
    min-height: 24px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    justify-content: center;
    max-width: calc(100% - 8px);
    border-radius: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .b3 * {
    animation: none !important;
    transition: none !important;
  }
}

.b3-cell {
  flex-direction: column;
  gap: 6px;
}
.b3-chip.b3-alt {
  border-style: dashed;
  color: var(--n-400);
}
.b3-band {
  grid-row: var(--r);
  grid-column: var(--c1) / var(--c2);
  align-self: end;
  margin: 0 8px 7px;
  height: 16px;
  border-radius: 8px;
  border: 1px dashed var(--n-300);
  display: flex;
  align-items: center;
  padding: 0 10px;
  z-index: 1;
  pointer-events: none;
}
.b3-band span {
  font: 500 9.5px var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--n-500);
  background: var(--bg, #f6f6f9);
  padding: 0 6px;
}
.b3-cell.b3-v {
  align-items: center;
  justify-content: center;
  padding-bottom: 18px;
}
@media (max-width: 767px) {
  .b3-band {
    display: none;
  }
  .b3-cell.b3-v {
    padding-bottom: 0;
  }
  .b3-cell {
    gap: 4px;
  }
}
.b3[data-s="0"] .b3-cell.b3k0 {
  background: color-mix(in srgb, var(--pc) 6%, transparent);
}
.b3[data-s="0"] .b3-hd.b3k0 .b3-bd {
  background: var(--pcd);
  border-color: var(--pcd);
  color: var(--n-0);
}
.b3[data-s="0"] .b3-hd.b3k0 .b3-no {
  color: var(--pcd);
}
.b3[data-s="0"] .b3-chip[data-st="0"] {
  border-color: var(--pcd);
  color: var(--pcd);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 12%, transparent);
}
.b3[data-s="0"] .b3-nt[data-i="0"] {
  display: block;
}
.b3[data-s="1"] .b3-cell.b3k1 {
  background: color-mix(in srgb, var(--pc) 6%, transparent);
}
.b3[data-s="1"] .b3-hd.b3k1 .b3-bd {
  background: var(--pcd);
  border-color: var(--pcd);
  color: var(--n-0);
}
.b3[data-s="1"] .b3-hd.b3k1 .b3-no {
  color: var(--pcd);
}
.b3[data-s="1"] .b3-chip[data-st="1"] {
  border-color: var(--pcd);
  color: var(--pcd);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 12%, transparent);
}
.b3[data-s="1"] .b3-nt[data-i="1"] {
  display: block;
}
.b3[data-s="1"] .b3-hd.b3k0 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="1"] .b3-chip[data-st="0"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="2"] .b3-cell.b3k2 {
  background: color-mix(in srgb, var(--pc) 6%, transparent);
}
.b3[data-s="2"] .b3-hd.b3k2 .b3-bd {
  background: var(--pcd);
  border-color: var(--pcd);
  color: var(--n-0);
}
.b3[data-s="2"] .b3-hd.b3k2 .b3-no {
  color: var(--pcd);
}
.b3[data-s="2"] .b3-chip[data-st="2"] {
  border-color: var(--pcd);
  color: var(--pcd);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 12%, transparent);
}
.b3[data-s="2"] .b3-nt[data-i="2"] {
  display: block;
}
.b3[data-s="2"] .b3-hd.b3k0 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="2"] .b3-chip[data-st="0"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="2"] .b3-hd.b3k1 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="2"] .b3-chip[data-st="1"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="3"] .b3-cell.b3k3 {
  background: color-mix(in srgb, var(--pc) 6%, transparent);
}
.b3[data-s="3"] .b3-hd.b3k3 .b3-bd {
  background: var(--pcd);
  border-color: var(--pcd);
  color: var(--n-0);
}
.b3[data-s="3"] .b3-hd.b3k3 .b3-no {
  color: var(--pcd);
}
.b3[data-s="3"] .b3-chip[data-st="3"] {
  border-color: var(--pcd);
  color: var(--pcd);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 12%, transparent);
}
.b3[data-s="3"] .b3-nt[data-i="3"] {
  display: block;
}
.b3[data-s="3"] .b3-hd.b3k0 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="3"] .b3-chip[data-st="0"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="3"] .b3-hd.b3k1 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="3"] .b3-chip[data-st="1"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="3"] .b3-hd.b3k2 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="3"] .b3-chip[data-st="2"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="4"] .b3-cell.b3k4 {
  background: color-mix(in srgb, var(--pc) 6%, transparent);
}
.b3[data-s="4"] .b3-hd.b3k4 .b3-bd {
  background: var(--pcd);
  border-color: var(--pcd);
  color: var(--n-0);
}
.b3[data-s="4"] .b3-hd.b3k4 .b3-no {
  color: var(--pcd);
}
.b3[data-s="4"] .b3-chip[data-st="4"] {
  border-color: var(--pcd);
  color: var(--pcd);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 12%, transparent);
}
.b3[data-s="4"] .b3-nt[data-i="4"] {
  display: block;
}
.b3[data-s="4"] .b3-hd.b3k0 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="4"] .b3-chip[data-st="0"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="4"] .b3-hd.b3k1 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="4"] .b3-chip[data-st="1"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="4"] .b3-hd.b3k2 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="4"] .b3-chip[data-st="2"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="4"] .b3-hd.b3k3 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="4"] .b3-chip[data-st="3"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="5"] .b3-cell.b3k5 {
  background: color-mix(in srgb, var(--pc) 6%, transparent);
}
.b3[data-s="5"] .b3-hd.b3k5 .b3-bd {
  background: var(--pcd);
  border-color: var(--pcd);
  color: var(--n-0);
}
.b3[data-s="5"] .b3-hd.b3k5 .b3-no {
  color: var(--pcd);
}
.b3[data-s="5"] .b3-chip[data-st="5"] {
  border-color: var(--pcd);
  color: var(--pcd);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 12%, transparent);
}
.b3[data-s="5"] .b3-nt[data-i="5"] {
  display: block;
}
.b3[data-s="5"] .b3-hd.b3k0 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="5"] .b3-chip[data-st="0"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="5"] .b3-hd.b3k1 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="5"] .b3-chip[data-st="1"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="5"] .b3-hd.b3k2 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="5"] .b3-chip[data-st="2"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="5"] .b3-hd.b3k3 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="5"] .b3-chip[data-st="3"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="5"] .b3-hd.b3k4 .b3-bd {
  border-color: var(--n-700);
  color: var(--n-800);
}
.b3[data-s="5"] .b3-chip[data-st="4"]:not(.b3-alt) {
  border-color: var(--n-700);
  color: var(--n-800);
}
.monoparts-hero .mh-fig {
  margin-top: -24px;
}
.p3-in {
  max-width: none;
}
/* 결정 424: 히어로 설명문과 도식(Item 예시 카드) 사이 간격. 종전 음수 여백(-24px)으로 글자와 카드가 붙어 보였다 */
body .monoparts-hero .mh-fig {
  margin-top: 36px;
}
@media (max-width: 767px) {
  body .monoparts-hero .mh-fig {
    margin-top: 20px;
  }
}

/* 결정 425: 1-A AI 자동화(5탭). 틀과 컴포넌트는 결정 322 · 323 그대로, 추가분만 */
.ait5 .automation-timeline-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr)) 40px;
}
.aih-tn {
  font-style: normal;
}
.aid .ck path {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aitb .cu {
  color: var(--g600);
  font-weight: 400;
  margin-right: 4px;
}
.aitb td.ph {
  color: var(--g400);
  font-weight: 400;
}
.aitb td.neg {
  color: #f65959;
}
.aitb td.sel {
  position: relative;
  padding-right: 28px;
}
.aitb td.sel .aii {
  position: absolute;
  right: 10px;
  top: 12px;
  width: 12px;
  height: 12px;
}
.aitb td.fill {
  color: var(--bl);
}
.rt-l {
  font-size: 12px;
  font-weight: 500;
  color: var(--g700);
}
.aq.pl {
  opacity: 1;
  transform: none;
}
.mo-h {
  display: none;
}
.ai-run {
  white-space: nowrap;
}
/* 결정 427 시안(04 출고 등록): 원본 서류 펼침 · 값 이동 · AI 가 채운 칸 */
.ait5 .aih-bc,
.ait5 .aih-ut {
  display: none;
}
.automation-button.wd {
  grid-template-columns: 400px minmax(0, 1fr);
}
.dc {
  border: 1px solid var(--g200);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    border-color 0.5s,
    box-shadow 0.5s;
}
.dc.vis {
  opacity: 1;
  transform: none;
}
.dc.rdg {
  border-color: #5e77f6;
  box-shadow: 0 0 10px rgba(94, 119, 246, 0.18);
}
.dc-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.dc-h .aii {
  width: 16px;
  height: 16px;
}
.dc-h .fdoc {
  fill: none;
  stroke: var(--g600);
  stroke-width: 1.33;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.dc-h b {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-h .bdg .aii {
  width: 12px;
  height: 12px;
}
.dc-b {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s ease;
}
.dc.opn .dc-b {
  max-height: 230px;
}
.sht.nrn td:first-child {
  padding-left: 10px;
}
.dc.lib .dc-h b {
  font-weight: 600;
}
.ipt.rd {
  border-color: #5e77f6;
  box-shadow: 0 0 8px rgba(94, 119, 246, 0.25);
}
.sht {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  border-top: 1px solid var(--g150);
}
.sht td {
  height: 24px;
  padding: 0 8px;
  border-right: 1px solid var(--g150);
  border-bottom: 1px solid var(--g150);
  color: var(--g800);
  font-weight: 400;
  white-space: nowrap;
  transition:
    background 0.35s ease,
    color 0.35s ease;
}
.sht td:last-child {
  border-right: 0;
}
.sht tr:last-child td {
  border-bottom: 0;
}
.sht .rn {
  width: 26px;
  padding: 0;
  background: var(--g100);
  color: var(--g600);
  text-align: center;
  font-size: 10px;
}
.sht .hd td {
  background: var(--g100);
  font-weight: 600;
  color: var(--b);
}
.sht .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sht td.rd,
.wb-n.rd {
  background: var(--aig);
  color: #fff;
}
.sht td.dn,
.wb-n.dn {
  color: #5e77f6;
  font-weight: 600;
}
.wb {
  display: flex;
  gap: 8px;
  padding: 0 10px 10px;
}
.wbs {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--g200);
  border-radius: 6px;
  background: var(--g50);
}
.wb-bar {
  display: block;
  height: 20px;
  background: repeating-linear-gradient(
    90deg,
    var(--b) 0 2px,
    transparent 2px 4px,
    var(--b) 4px 5px,
    transparent 5px 8px,
    var(--b) 8px 11px,
    transparent 11px 12px
  );
}
.wb-bar.b2 {
  background: repeating-linear-gradient(
    90deg,
    var(--b) 0 1px,
    transparent 1px 3px,
    var(--b) 3px 6px,
    transparent 6px 7px,
    var(--b) 7px 8px,
    transparent 8px 11px
  );
}
.wb-n {
  align-self: flex-start;
  padding: 1px 6px;
  margin-left: -6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  transition:
    background 0.35s ease,
    color 0.35s ease;
}
.wb-d {
  font-size: 11px;
  font-weight: 400;
  color: var(--g600);
}
.aitb td.aif {
  color: #5e77f6;
  font-weight: 600;
  animation: aipop 1.1s ease;
}
@keyframes aipop {
  0% {
    box-shadow:
      inset 0 0 0 2px #5e77f6,
      inset 0 0 0 40px rgba(94, 201, 224, 0.22);
  }
  100% {
    box-shadow:
      inset 0 0 0 2px rgba(94, 119, 246, 0),
      inset 0 0 0 40px rgba(94, 201, 224, 0);
  }
}
.gd .fl {
  fill: none;
  stroke: #5e77f6;
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.45;
  transition: stroke-dashoffset 0.6s ease;
}
.gd .fk rect {
  fill: #5e77f6;
}
.gd .fk text {
  fill: #fff;
  font:
    600 12px "Switzer",
    "Pretendard",
    sans-serif;
  text-anchor: middle;
}
@media (max-width: 767px) {
  .dc-b {
    display: none;
  }
  .automation-button.wd {
    grid-template-columns: 1fr;
  }
}
/* 결정 426: 장면 전환을 서서히(내보내기 .32s → 바꾸기 → 들이기 .6s), 움직임은 느리게, 입력 커서는 깜빡이지 않게 */
.ait5 .automation-button,
.ait5 .aih-ti,
.ait5 .aih-ut,
.ait5 .aih-bc,
.ait5 .aih-tn {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.ait5 .aid.out .automation-button,
.ait5 .aid.out .aih-ti,
.ait5 .aid.out .aih-ut,
.ait5 .aid.out .aih-bc,
.ait5 .aid.out .aih-tn {
  opacity: 0;
  transition-duration: 0.32s;
}
.ait5 .aid.out .automation-button {
  transform: translateY(8px);
}
.ait5 .aitb tr.rw {
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.ait5 .aitb td {
  transition:
    background 0.8s ease,
    color 0.5s ease;
}
.ait5 .fc {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    border-color 0.5s,
    box-shadow 0.5s;
}
.ait5 .aq {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.ait5 .bdg,
.ait5 .ai-run,
.ait5 .btn-ai,
.ait5 .btn-p {
  transition:
    background 0.5s ease,
    color 0.5s ease,
    transform 0.18s ease;
}
.ait5 .gd .gb {
  transition: opacity 0.55s ease;
}
.ait5 .gd .gl {
  transition: stroke-dashoffset 1.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ait5 .scan.go {
  animation-duration: 2.1s;
}
.ait5 .ipt .tx:after {
  animation: none;
  opacity: 0;
}
.ait5 .ipt.foc .tx:after {
  opacity: 1;
}
.ait5 .automation-timeline-caption.on {
  animation: aitcap 0.6s ease;
}
@keyframes aitcap {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ait5 .automation-timeline-caption.on {
    animation: none;
  }
}
@media (max-width: 767px) {
  .ait5 .aitb {
    table-layout: fixed;
  }
  .ait5 .aitb col.hm {
    display: none;
  }
  .pc-h {
    display: none;
  }
  .mo-h {
    display: inline;
  }
  .ait5 .automation-timeline-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .aitb tr.mh,
  .automation-timeline-label .fc.mh {
    display: none;
  }
  .aitb td.sel {
    padding-right: 8px;
  }
  .aitb td.sel .aii {
    display: none;
  }
}

/* 결정 429: 1-A 탭 설명문은 한 줄로(PC) */
@media (min-width: 768px) {
  .ait5 .automation-timeline-caption {
    max-width: none;
  }
  .ait5 .automation-timeline-caps {
    min-height: 26px;
  }
}
/* 결정 429: 마우스를 올리면 재생. 멈춰 있을 때만 재생 표시 */
@media (hover: hover) and (pointer: fine) {
  .order-lineage-card .order-lineage-image:before {
    content: "";
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    background: rgba(15, 15, 28, 0.72)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 3.5v9l7-4.5z' fill='%23fff'/%3E%3C/svg%3E")
      center/14px no-repeat;
    transition: opacity 0.3s ease;
  }
  .order-lineage-card.ply .order-lineage-image:before {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .order-lineage-card .order-lineage-image:before {
    display: none;
  }
}

/* 내비 언어 선택(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;
  }
  /* ===== 2차(결정 394) ===== */
  /* A · Mono:parts 히어로 도식 · 3-A 역할 도식: 폭을 줄여 한 화면에 전체 */
  .mp0 {
    width: 60%;
    margin-inline: auto;
  }
  .mp3 .m3-fg {
    width: 56%;
    margin-inline: auto;
  }
  /* A · Company 4-B 특허 세 층: 가로 밀기 대신 전체를 폭에 맞춤(자세한 글은 확대 또는 아래 목록) */
  #dc4 {
    overflow-x: visible;
    -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;
  }
  /* 결정 395 · Monolis 9마디 화면 영상: 모바일은 정사각 판 */
  .order-lineage-number .order-lineage-image video.order-lineage-video {
    aspect-ratio: 1/1;
    object-fit: cover;
  }
}
/* ===== 결정 396: 요약문 · 전체판 · 중복 축소 ===== */
@media (min-width: 768px) {
  .mo-t {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .pc-t {
    display: none !important;
  }
  /* Company 2-B: 모바일 전용 전체판(IO → MG → DR → AX · TA/DA → PRODUCT, FEEDBACK) */
  #dc2 .product-workflow > .product-workflow-svg {
    display: none !important;
  }
  #dc2 .product-workflow {
    padding: 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;
  }
  /* 정방형 화면 영상(Monolog 1-A · Mono:parts 2-B) */
  .g4 .order-lineage-image {
    aspect-ratio: 1/1 !important;
  }
  .monoparts-page
    .order-lineage-number
    .order-lineage-image
    video.order-lineage-video,
  .order-lineage-number .order-lineage-image video.order-lineage-video {
    aspect-ratio: 1/1;
    object-fit: cover;
  }
  /* 결정 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;
  }
}

.product-wordmark {
  display: inline-block;
  height: 0.86em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
  margin: 0 0.02em 0 0.03em;
}
.product-wordmark > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.product-wordmark-lis {
  width: 3.983em;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTU4IDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkiPjxwYXRoIGQ9Ik0xOTEwMCAyNDAwIGwwIC0yMzMwIDQ0OCAwIDQ0NyAwIDAgMjMzMCAwIDIzMzAgLTQ0NyAwIC00NDggMCAwIC0yMzMweiBNMjA3NTAgNDQwMCBsMCAtMzMwIDQ2NSAwIDQ2NSAwIDAgMzMwIDAgMzMwIC00NjUgMCAtNDY1IDAgMCAtMzMweiBNMTgwMiAzNzY5IGMtNDI1IC00MSAtNzY4IC0yMTQgLTkwOSAtNDU4IGwtMzAgLTUyIC02IDEwNyBjLTQgNTkgLTcgMTU4IC03IDIyMSBsMCAxMTMgLTQyMiAwIC00MjMgMCAwIC0xODE1IDAgLTE4MTUgNDUwIDAgNDUwIDAgMCAxMDg3IGMwIDEwMDEgMSAxMDk3IDE4IDEyMDIgNjUgNDEyIDIxOSA1NjQgNjA3IDYwMiAzOTMgMzkgNjYyIC01NyA3NzIgLTI3NSA5NCAtMTg2IDEwMCAtMjg5IDk2IC0xNTY5IGwtMyAtMTA0NyA0NDUgMCA0NDUgMCAwIDEwNDcgYzAgMTA3OSAyIDExMzAgNDEgMTMyMiA3NiAzNjkgMjUxIDUwNiA2NzQgNTI3IDQ0MSAyMiA2NzIgLTExMyA3NTAgLTQzOSAzOCAtMTU3IDQxIC0yOTAgMzggLTEzOTUgbC0zIC0xMDYyIDQ0OSAwIDQ0OSAwIC02IDExNzggYy04IDE2MTIgLTIwIDE4MjQgLTEyMSAyMDI3IC03MiAxNDUgLTE4MCAyNTEgLTM0OSAzNDAgLTM5MyAyMDkgLTExMTYgMjIwIC0xNTUzIDI1IC0xNjQgLTc0IC0zMzAgLTIxOCAtMzk1IC0zNDQgLTE5IC0zNiAtMzYgLTY2IC0zOSAtNjYgLTMgMCAtMTggMjQgLTMzIDU0IC0xODQgMzUzIC03NDAgNTQ3IC0xMzg1IDQ4NXogTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogTTEyNDk4IDM3NzAgYy00MTUgLTQ0IC03MzMgLTIwMSAtODg3IC00NDAgbC0zOSAtNTkgLTYgMzEgYy0zIDE3IC02IDExMyAtNiAyMTQgbDAgMTg0IC00MjUgMCAtNDI1IDAgMCAtMTgxNSAwIC0xODE1IDQ1MCAwIDQ0OSAwIDQgMTEwOCBjNCAxMTkzIDQgMTE4OCA1OCAxMzY3IDk2IDMxNyAzMzggNDQ0IDgwNCA0MjEgNDQ4IC0yMiA2MDkgLTE2NSA2NjcgLTU5MiAxMCAtNzggMTMgLTMzNCAxMyAtMTIwMiBsMCAtMTEwMiA0NDUgMCA0NDUgMCAtMSAxMzc4IGMwIDEyMjkgLTIgMTM4OCAtMTcgMTQ3OSAtODIgNTA1IC0zMDUgNzM3IC03OTQgODI0IC0xMzQgMjQgLTU3NiAzNSAtNzM1IDE5eiBNMTYyODUgMzc3NCBjLTEwMDEgLTY1IC0xMzc4IC00MDUgLTE0ODIgLTEzMzQgLTIxIC0xOTcgLTI1IC04NTcgLTUgLTEwNTAgNTEgLTQ5NSAxNTkgLTc4NiAzNzIgLTEwMDEgMjcyIC0yNzUgNjU5IC0zODMgMTM4MCAtMzg0IDEyNzEgLTEgMTY5MyAzNTEgMTc3MSAxNDgwIDE2IDIyOCA3IDgxMyAtMTYgOTk1IC0xMDIgODQ1IC00MzEgMTE3NiAtMTI2NSAxMjc1IC0xMzAgMTYgLTYxOCAyOCAtNzU1IDE5eiBtNTM1IC03OTkgYzQ4MCAtNzMgNjI2IC0zNTUgNjA3IC0xMTc1IC0xNiAtNjcxIC0xNTEgLTkxMCAtNTYyIC05OTEgLTEyMiAtMjQgLTUzNyAtMTkgLTY1NCA5IC0zMDkgNzIgLTQ0NiAyNDggLTUwMyA2NDcgLTIxIDE0NyAtMTggNzM5IDYgODkwIDYwIDM5NSAyMTYgNTYzIDU3NiA2MjAgMTE3IDE4IDQxMiAxOCA1MzAgMHogTTIzNjMwIDM3NDMgYy01NjQgLTM4IC04NTUgLTEzOSAtMTA0MiAtMzYxIC0xNTQgLTE4MyAtMjI3IC01MDkgLTE5OCAtODgxIDQ4IC02MTAgMjkxIC03NzcgMTQwMCAtOTYxIDU4MCAtOTYgODE1IC0xOTMgODYxIC0zNTIgMzUgLTEyMSA3IC0yOTQgLTYxIC0zNzEgLTk2IC0xMDggLTM0NiAtMTU5IC03MDUgLTE0MiAtNTUzIDI1IC03MDQgMTI5IC03MDUgNDgzIGwwIDkzIC0yMTcgLTYgYy0xMjAgLTMgLTMxNCAtOCAtNDMyIC0xMSBsLTIxMyAtNiA2IC0xMzIgYzQxIC03NjYgMjgwIC05OTQgMTEzMSAtMTA3OCAyMDUgLTIwIDg4MSAtMTcgMTA3MCA1IDc5NCA5MyAxMDQ5IDM2MyAxMDQ4IDExMTIgMCA3MTggLTI2MCA5MjAgLTE0MjggMTEwNiAtNzY3IDEyMiAtODg1IDE4MyAtODg1IDQ2NCAwIDE5OCA5MCAzMDYgMjkxIDM1MyAxMDkgMjQgNTU3IDI0IDY4NCAtMSAyNTAgLTUwIDM0NCAtMTYwIDM0NSAtNDAwIGwwIC03OSAyNTMgNiBjMTM4IDQgMzM0IDkgNDM1IDEyIGwxODMgNiAtNiAxMDIgYy0zMyA1MzYgLTE1NiA3NjIgLTQ5MiA5MDYgLTI0NSAxMDQgLTg1NSAxNjYgLTEzMjMgMTMzeiBNMjA3NTAgMTg5MCBsMCAtMTgxMCA0NjggMCA0NjcgMCAwIDE4MTAgMCAxODEwIC00NjcgMCAtNDY4IDAgMCAtMTgxMHoiLz48L2c+PC9zdmc+);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTU4IDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkiPjxwYXRoIGQ9Ik0xOTEwMCAyNDAwIGwwIC0yMzMwIDQ0OCAwIDQ0NyAwIDAgMjMzMCAwIDIzMzAgLTQ0NyAwIC00NDggMCAwIC0yMzMweiBNMjA3NTAgNDQwMCBsMCAtMzMwIDQ2NSAwIDQ2NSAwIDAgMzMwIDAgMzMwIC00NjUgMCAtNDY1IDAgMCAtMzMweiBNMTgwMiAzNzY5IGMtNDI1IC00MSAtNzY4IC0yMTQgLTkwOSAtNDU4IGwtMzAgLTUyIC02IDEwNyBjLTQgNTkgLTcgMTU4IC03IDIyMSBsMCAxMTMgLTQyMiAwIC00MjMgMCAwIC0xODE1IDAgLTE4MTUgNDUwIDAgNDUwIDAgMCAxMDg3IGMwIDEwMDEgMSAxMDk3IDE4IDEyMDIgNjUgNDEyIDIxOSA1NjQgNjA3IDYwMiAzOTMgMzkgNjYyIC01NyA3NzIgLTI3NSA5NCAtMTg2IDEwMCAtMjg5IDk2IC0xNTY5IGwtMyAtMTA0NyA0NDUgMCA0NDUgMCAwIDEwNDcgYzAgMTA3OSAyIDExMzAgNDEgMTMyMiA3NiAzNjkgMjUxIDUwNiA2NzQgNTI3IDQ0MSAyMiA2NzIgLTExMyA3NTAgLTQzOSAzOCAtMTU3IDQxIC0yOTAgMzggLTEzOTUgbC0zIC0xMDYyIDQ0OSAwIDQ0OSAwIC02IDExNzggYy04IDE2MTIgLTIwIDE4MjQgLTEyMSAyMDI3IC03MiAxNDUgLTE4MCAyNTEgLTM0OSAzNDAgLTM5MyAyMDkgLTExMTYgMjIwIC0xNTUzIDI1IC0xNjQgLTc0IC0zMzAgLTIxOCAtMzk1IC0zNDQgLTE5IC0zNiAtMzYgLTY2IC0zOSAtNjYgLTMgMCAtMTggMjQgLTMzIDU0IC0xODQgMzUzIC03NDAgNTQ3IC0xMzg1IDQ4NXogTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogTTEyNDk4IDM3NzAgYy00MTUgLTQ0IC03MzMgLTIwMSAtODg3IC00NDAgbC0zOSAtNTkgLTYgMzEgYy0zIDE3IC02IDExMyAtNiAyMTQgbDAgMTg0IC00MjUgMCAtNDI1IDAgMCAtMTgxNSAwIC0xODE1IDQ1MCAwIDQ0OSAwIDQgMTEwOCBjNCAxMTkzIDQgMTE4OCA1OCAxMzY3IDk2IDMxNyAzMzggNDQ0IDgwNCA0MjEgNDQ4IC0yMiA2MDkgLTE2NSA2NjcgLTU5MiAxMCAtNzggMTMgLTMzNCAxMyAtMTIwMiBsMCAtMTEwMiA0NDUgMCA0NDUgMCAtMSAxMzc4IGMwIDEyMjkgLTIgMTM4OCAtMTcgMTQ3OSAtODIgNTA1IC0zMDUgNzM3IC03OTQgODI0IC0xMzQgMjQgLTU3NiAzNSAtNzM1IDE5eiBNMTYyODUgMzc3NCBjLTEwMDEgLTY1IC0xMzc4IC00MDUgLTE0ODIgLTEzMzQgLTIxIC0xOTcgLTI1IC04NTcgLTUgLTEwNTAgNTEgLTQ5NSAxNTkgLTc4NiAzNzIgLTEwMDEgMjcyIC0yNzUgNjU5IC0zODMgMTM4MCAtMzg0IDEyNzEgLTEgMTY5MyAzNTEgMTc3MSAxNDgwIDE2IDIyOCA3IDgxMyAtMTYgOTk1IC0xMDIgODQ1IC00MzEgMTE3NiAtMTI2NSAxMjc1IC0xMzAgMTYgLTYxOCAyOCAtNzU1IDE5eiBtNTM1IC03OTkgYzQ4MCAtNzMgNjI2IC0zNTUgNjA3IC0xMTc1IC0xNiAtNjcxIC0xNTEgLTkxMCAtNTYyIC05OTEgLTEyMiAtMjQgLTUzNyAtMTkgLTY1NCA5IC0zMDkgNzIgLTQ0NiAyNDggLTUwMyA2NDcgLTIxIDE0NyAtMTggNzM5IDYgODkwIDYwIDM5NSAyMTYgNTYzIDU3NiA2MjAgMTE3IDE4IDQxMiAxOCA1MzAgMHogTTIzNjMwIDM3NDMgYy01NjQgLTM4IC04NTUgLTEzOSAtMTA0MiAtMzYxIC0xNTQgLTE4MyAtMjI3IC01MDkgLTE5OCAtODgxIDQ4IC02MTAgMjkxIC03NzcgMTQwMCAtOTYxIDU4MCAtOTYgODE1IC0xOTMgODYxIC0zNTIgMzUgLTEyMSA3IC0yOTQgLTYxIC0zNzEgLTk2IC0xMDggLTM0NiAtMTU5IC03MDUgLTE0MiAtNTUzIDI1IC03MDQgMTI5IC03MDUgNDgzIGwwIDkzIC0yMTcgLTYgYy0xMjAgLTMgLTMxNCAtOCAtNDMyIC0xMSBsLTIxMyAtNiA2IC0xMzIgYzQxIC03NjYgMjgwIC05OTQgMTEzMSAtMTA3OCAyMDUgLTIwIDg4MSAtMTcgMTA3MCA1IDc5NCA5MyAxMDQ5IDM2MyAxMDQ4IDExMTIgMCA3MTggLTI2MCA5MjAgLTE0MjggMTEwNiAtNzY3IDEyMiAtODg1IDE4MyAtODg1IDQ2NCAwIDE5OCA5MCAzMDYgMjkxIDM1MyAxMDkgMjQgNTU3IDI0IDY4NCAtMSAyNTAgLTUwIDM0NCAtMTYwIDM0NSAtNDAwIGwwIC03OSAyNTMgNiBjMTM4IDQgMzM0IDkgNDM1IDEyIGwxODMgNiAtNiAxMDIgYy0zMyA1MzYgLTE1NiA3NjIgLTQ5MiA5MDYgLTI0NSAxMDQgLTg1NSAxNjYgLTEzMjMgMTMzeiBNMjA3NTAgMTg5MCBsMCAtMTgxMCA0NjggMCA0NjcgMCAwIDE4MTAgMCAxODEwIC00NjcgMCAtNDY4IDAgMCAtMTgxMHoiLz48L2c+PC9zdmc+);
}
.product-wordmark-log {
  width: 4.429em;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyODQ0IDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkgdHJhbnNsYXRlKDAsLTcxMCkiPjxwYXRoIGQ9Ik0xOTIyNSAzMTA1IGwwIC0yMzI1IDQzNSAwIDQzNSAwIDAgMjMyNSAwIDIzMjUgLTQzNSAwIC00MzUgMCAwIC0yMzI1eiBNMjYxODAgNDQ3OSBjLTc2NyAtNzUgLTExMDAgLTM5MiAtMTIwNSAtMTE0OSAtNDAgLTI4NSAtMzAgLTc4NyAyMCAtMTAzNiAxNTAgLTc0NiA1NTEgLTEwMTYgMTUxMCAtMTAxOCA1OTUgLTEgODc5IDk0IDEwOTQgMzY0IGw0NCA1NSAtNiAtMTYwIGMtMjAgLTQ5MyAtNzcgLTYzMiAtMzA0IC03NDQgLTE0NCAtNzIgLTM0OCAtOTUgLTc2OCAtODggLTU3OCA5IC03MDAgNjAgLTc0NiAzMTEgbC0xMyA2OSAtMzc0IC02IGMtMjA2IC0zIC0zNzYgLTcgLTM3NyAtOSAtOSAtOCAzOCAtMjQzIDY2IC0zMzMgMTYyIC01MjQgNTkyIC03MzUgMTQ5NCAtNzM1IDExMTAgMSAxNjI5IDI2MiAxNzY1IDg4OSA1NSAyNTEgNTMgMTk2IDU0IDE5MjggbDEgMTYwMyAtMzc3IDAgLTM3OCAwIC0xIC0xMDIgYy0xIC01NyAtNCAtMTQ1IC04IC0xOTcgbC02IC05NSAtMzYgNTUgYy0xNDMgMjE1IC0zMzAgMzIwIC02NzQgMzgwIC0xMzcgMjQgLTYwMiAzNSAtNzc1IDE4eiBtNjU2IC02OTkgYzU3OSAtMzUgNzY3IC0yMzYgNzkxIC04NDAgMjIgLTU3NiAtMTUzIC04NDkgLTYwMiAtOTM3IC0xMjYgLTI0IC00OTcgLTI0IC02NDAgMCAtMzQyIDYwIC01MDEgMTk3IC01ODAgNTAyIC02NSAyNTMgLTUwIDYzMyAzNSA4NjYgOTYgMjY0IDMwNiAzODQgNzE1IDQwOSA2NiA0IDEyMiA4IDEyNSA4IDMgMSA3MyAtMyAxNTYgLTh6IE0xNzQwIDQ0NjAgYy00MTggLTUxIC03MzQgLTIxNSAtODgwIC00NTggbC00MCAtNjcgMCAyMzMgMCAyMzIgLTQxMCAwIC00MTAgMCAwIC0xODEwIDAgLTE4MTAgNDM1IDAgNDM0IDAgNCAxMTEyIGM0IDEyMjIgMyAxMjAwIDY3IDEzODggMTAzIDMwNSAzNDAgNDI2IDc5NSA0MDcgNDAwIC0xNyA1NjggLTE0OSA2NDggLTUwNyAyMCAtOTMgMjEgLTExOSAyNCAtMTI0NyBsNCAtMTE1MyA0MjkgMCA0MzAgMCAwIDEwMTggYzAgNjA5IDQgMTA2MSAxMCAxMTI3IDQzIDQ2NyAxNzkgNjY5IDQ5OCA3MzggMTQ0IDMxIDQ1OSAzMSA1ODYgLTEgMjgwIC03MCA0MDggLTI0NyA0NDUgLTYxNiA3IC03MiAxMSAtNDc4IDExIC0xMTg4IGwwIC0xMDc4IDQzMCAwIDQzMCAwIDAgOTczIGMwIDE1MTYgLTIxIDE5ODcgLTk1IDIxNjkgLTExMCAyNzAgLTM3OCA0NDYgLTc4OSA1MjEgLTE3OSAzMiAtNjA0IDMyIC03ODUgLTEgLTM3MiAtNjcgLTY1MyAtMjM3IC03NzMgLTQ2OCBsLTMxIC02MCAtMzYgNzAgYy05MiAxODUgLTMyNiAzNDcgLTYwMyA0MjEgLTIxMyA1NiAtNjAyIDgyIC04MjggNTV6IE03ODMwIDQ0NjAgYy05MzQgLTg3IC0xMjgxIC00MjIgLTEzODIgLTEzMzUgLTkgLTgxIC0xMyAtMjU4IC0xMyAtNTQwIDAgLTI4MiA0IC00NTkgMTMgLTU0MCA5OSAtODkxIDQzNCAtMTIyOSAxMzE3IC0xMzI3IDE4MyAtMjAgNzMxIC0xNyA5MTUgNSA0NjAgNTYgNzIzIDE2NSA5MjggMzgyIDI0NyAyNjIgMzQ1IDYzMiAzNTkgMTM1NSAyNyAxMzkxIC0yNjcgMTg1NSAtMTI1NyAxOTg2IC0xNDUgMTkgLTcyNSAyOCAtODgwIDE0eiBtNjU5IC03NjYgYzM2NyAtNTcgNTI4IC0yNDYgNTg1IC02ODYgMzQgLTI2MCAzMCAtNjg5IC0xMCAtOTE3IC04MSAtNDY3IC0zMDQgLTYzMSAtODU5IC02MzEgLTU2NCAwIC03ODMgMTU4IC04NjYgNjI1IC0yOSAxNTkgLTM1IDc1NyAtMTEgOTQwIDYzIDQ2NiAyNDggNjQ0IDcwOCA2ODUgMTI0IDExIDMyOSAzIDQ1MyAtMTZ6IE0xMjU3NSA0NDY0IGMtNDUyIC00OCAtNzk3IC0yMTkgLTkzOCAtNDY2IC0xMiAtMjEgLTI1IC0zOCAtMjkgLTM4IC01IDAgLTggOTkgLTggMjIwIGwwIDIyMCAtNDEwIDAgLTQxMCAwIDAgLTE4MTAgMCAtMTgxMCA0MzUgMCA0MzQgMCA0IDExMDggYzMgMTA2NSA0IDExMTEgMjQgMTIxMyA4NSA0NDAgMjgyIDU4OSA3ODMgNTg5IDQzNyAwIDY0NiAtMTIxIDcyOSAtNDIwIDQ5IC0xNzYgNTEgLTIyNSA1MSAtMTM5NiBsMCAtMTA5NCA0MzMgMCA0MzIgMCAtMSAxMzU4IGMtMSAxNDgxIDAgMTQ2MCAtNTkgMTY3OSAtOTcgMzY0IC0zNDQgNTY1IC03NzcgNjMzIC03MSAxMiAtNjEzIDIyIC02OTMgMTR6IE0xNjMyNSA0NDYzIGMtOTcxIC02NCAtMTM1NSAtNDQwIC0xNDM0IC0xNDA2IC0xNCAtMTYyIC0xNCAtNzg0IC0xIC05MzcgNzUgLTg3NyAzODMgLTEyNTQgMTEyMCAtMTM3NCA0MDUgLTY2IDEwMTcgLTU3IDEzODMgMjAgNTU0IDExNyA4NDQgNDA5IDk1NiA5NjUgOTEgNDQ4IDkxIDEyNzMgLTEgMTcxNCAtMTU0IDc1MCAtNjI1IDEwMzAgLTE3MTggMTAyMyAtMTQwIC0xIC0yNzcgLTMgLTMwNSAtNXogbTQ3MCAtNzUzIGM0NjkgLTM4IDY0MiAtMTk1IDcyMSAtNjUwIDI1IC0xNDQgMzEgLTY3MCAxMCAtODUwIC01MSAtNDQ2IC0xOTcgLTY0NSAtNTI2IC03MjIgLTE0MiAtMzMgLTU1OSAtMzMgLTcwMCAwIC0yNDQgNTYgLTM5NCAxODcgLTQ3MSA0MDkgLTc4IDIyNyAtMTAxIDg0MyAtNDQgMTE5MyA2OCA0MTIgMjYyIDU4NCA3MDAgNjE5IDE0OCAxMiAxNzAgMTIgMzEwIDF6IE0yMjI2NSA0NDY0IGMtOTM3IC03MyAtMTMwNyAtMzk3IC0xNDE5IC0xMjQ0IC00MSAtMzA0IC00MSAtOTY1IC0xIC0xMjY0IDEwOSAtODExIDQzOSAtMTEzMiAxMjY1IC0xMjMzIDE4NCAtMjIgNzMyIC0yNSA5MTUgLTUgODYxIDk2IDExODMgNDAzIDEzMDEgMTI0MiAyMSAxNTMgMzEgODg0IDE1IDEwODYgLTc4IDk0NiAtMzkzIDEyOTIgLTEyODEgMTQwNCAtODQgMTEgLTY5NyAyMSAtNzk1IDE0eiBtNDY4IC03NTUgYzQ1OSAtMzQgNjQwIC0xOTUgNzE5IC02MzcgMzEgLTE3NCAzNCAtNzU2IDUgLTk0MSAtODAgLTUwMiAtMjk5IC02NzEgLTg3MyAtNjcxIC01MzMgMCAtNzY0IDE1MyAtODQ4IDU2MSAtNjUgMzE4IC01NSA5NTggMjAgMTIxNyA4OCAzMDIgMjg1IDQ0MSA2NjkgNDcxIDE0NyAxMiAxNTggMTIgMzA4IDB6Ii8+PC9nPjwvc3ZnPg==);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyODQ0IDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkgdHJhbnNsYXRlKDAsLTcxMCkiPjxwYXRoIGQ9Ik0xOTIyNSAzMTA1IGwwIC0yMzI1IDQzNSAwIDQzNSAwIDAgMjMyNSAwIDIzMjUgLTQzNSAwIC00MzUgMCAwIC0yMzI1eiBNMjYxODAgNDQ3OSBjLTc2NyAtNzUgLTExMDAgLTM5MiAtMTIwNSAtMTE0OSAtNDAgLTI4NSAtMzAgLTc4NyAyMCAtMTAzNiAxNTAgLTc0NiA1NTEgLTEwMTYgMTUxMCAtMTAxOCA1OTUgLTEgODc5IDk0IDEwOTQgMzY0IGw0NCA1NSAtNiAtMTYwIGMtMjAgLTQ5MyAtNzcgLTYzMiAtMzA0IC03NDQgLTE0NCAtNzIgLTM0OCAtOTUgLTc2OCAtODggLTU3OCA5IC03MDAgNjAgLTc0NiAzMTEgbC0xMyA2OSAtMzc0IC02IGMtMjA2IC0zIC0zNzYgLTcgLTM3NyAtOSAtOSAtOCAzOCAtMjQzIDY2IC0zMzMgMTYyIC01MjQgNTkyIC03MzUgMTQ5NCAtNzM1IDExMTAgMSAxNjI5IDI2MiAxNzY1IDg4OSA1NSAyNTEgNTMgMTk2IDU0IDE5MjggbDEgMTYwMyAtMzc3IDAgLTM3OCAwIC0xIC0xMDIgYy0xIC01NyAtNCAtMTQ1IC04IC0xOTcgbC02IC05NSAtMzYgNTUgYy0xNDMgMjE1IC0zMzAgMzIwIC02NzQgMzgwIC0xMzcgMjQgLTYwMiAzNSAtNzc1IDE4eiBtNjU2IC02OTkgYzU3OSAtMzUgNzY3IC0yMzYgNzkxIC04NDAgMjIgLTU3NiAtMTUzIC04NDkgLTYwMiAtOTM3IC0xMjYgLTI0IC00OTcgLTI0IC02NDAgMCAtMzQyIDYwIC01MDEgMTk3IC01ODAgNTAyIC02NSAyNTMgLTUwIDYzMyAzNSA4NjYgOTYgMjY0IDMwNiAzODQgNzE1IDQwOSA2NiA0IDEyMiA4IDEyNSA4IDMgMSA3MyAtMyAxNTYgLTh6IE0xNzQwIDQ0NjAgYy00MTggLTUxIC03MzQgLTIxNSAtODgwIC00NTggbC00MCAtNjcgMCAyMzMgMCAyMzIgLTQxMCAwIC00MTAgMCAwIC0xODEwIDAgLTE4MTAgNDM1IDAgNDM0IDAgNCAxMTEyIGM0IDEyMjIgMyAxMjAwIDY3IDEzODggMTAzIDMwNSAzNDAgNDI2IDc5NSA0MDcgNDAwIC0xNyA1NjggLTE0OSA2NDggLTUwNyAyMCAtOTMgMjEgLTExOSAyNCAtMTI0NyBsNCAtMTE1MyA0MjkgMCA0MzAgMCAwIDEwMTggYzAgNjA5IDQgMTA2MSAxMCAxMTI3IDQzIDQ2NyAxNzkgNjY5IDQ5OCA3MzggMTQ0IDMxIDQ1OSAzMSA1ODYgLTEgMjgwIC03MCA0MDggLTI0NyA0NDUgLTYxNiA3IC03MiAxMSAtNDc4IDExIC0xMTg4IGwwIC0xMDc4IDQzMCAwIDQzMCAwIDAgOTczIGMwIDE1MTYgLTIxIDE5ODcgLTk1IDIxNjkgLTExMCAyNzAgLTM3OCA0NDYgLTc4OSA1MjEgLTE3OSAzMiAtNjA0IDMyIC03ODUgLTEgLTM3MiAtNjcgLTY1MyAtMjM3IC03NzMgLTQ2OCBsLTMxIC02MCAtMzYgNzAgYy05MiAxODUgLTMyNiAzNDcgLTYwMyA0MjEgLTIxMyA1NiAtNjAyIDgyIC04MjggNTV6IE03ODMwIDQ0NjAgYy05MzQgLTg3IC0xMjgxIC00MjIgLTEzODIgLTEzMzUgLTkgLTgxIC0xMyAtMjU4IC0xMyAtNTQwIDAgLTI4MiA0IC00NTkgMTMgLTU0MCA5OSAtODkxIDQzNCAtMTIyOSAxMzE3IC0xMzI3IDE4MyAtMjAgNzMxIC0xNyA5MTUgNSA0NjAgNTYgNzIzIDE2NSA5MjggMzgyIDI0NyAyNjIgMzQ1IDYzMiAzNTkgMTM1NSAyNyAxMzkxIC0yNjcgMTg1NSAtMTI1NyAxOTg2IC0xNDUgMTkgLTcyNSAyOCAtODgwIDE0eiBtNjU5IC03NjYgYzM2NyAtNTcgNTI4IC0yNDYgNTg1IC02ODYgMzQgLTI2MCAzMCAtNjg5IC0xMCAtOTE3IC04MSAtNDY3IC0zMDQgLTYzMSAtODU5IC02MzEgLTU2NCAwIC03ODMgMTU4IC04NjYgNjI1IC0yOSAxNTkgLTM1IDc1NyAtMTEgOTQwIDYzIDQ2NiAyNDggNjQ0IDcwOCA2ODUgMTI0IDExIDMyOSAzIDQ1MyAtMTZ6IE0xMjU3NSA0NDY0IGMtNDUyIC00OCAtNzk3IC0yMTkgLTkzOCAtNDY2IC0xMiAtMjEgLTI1IC0zOCAtMjkgLTM4IC01IDAgLTggOTkgLTggMjIwIGwwIDIyMCAtNDEwIDAgLTQxMCAwIDAgLTE4MTAgMCAtMTgxMCA0MzUgMCA0MzQgMCA0IDExMDggYzMgMTA2NSA0IDExMTEgMjQgMTIxMyA4NSA0NDAgMjgyIDU4OSA3ODMgNTg5IDQzNyAwIDY0NiAtMTIxIDcyOSAtNDIwIDQ5IC0xNzYgNTEgLTIyNSA1MSAtMTM5NiBsMCAtMTA5NCA0MzMgMCA0MzIgMCAtMSAxMzU4IGMtMSAxNDgxIDAgMTQ2MCAtNTkgMTY3OSAtOTcgMzY0IC0zNDQgNTY1IC03NzcgNjMzIC03MSAxMiAtNjEzIDIyIC02OTMgMTR6IE0xNjMyNSA0NDYzIGMtOTcxIC02NCAtMTM1NSAtNDQwIC0xNDM0IC0xNDA2IC0xNCAtMTYyIC0xNCAtNzg0IC0xIC05MzcgNzUgLTg3NyAzODMgLTEyNTQgMTEyMCAtMTM3NCA0MDUgLTY2IDEwMTcgLTU3IDEzODMgMjAgNTU0IDExNyA4NDQgNDA5IDk1NiA5NjUgOTEgNDQ4IDkxIDEyNzMgLTEgMTcxNCAtMTU0IDc1MCAtNjI1IDEwMzAgLTE3MTggMTAyMyAtMTQwIC0xIC0yNzcgLTMgLTMwNSAtNXogbTQ3MCAtNzUzIGM0NjkgLTM4IDY0MiAtMTk1IDcyMSAtNjUwIDI1IC0xNDQgMzEgLTY3MCAxMCAtODUwIC01MSAtNDQ2IC0xOTcgLTY0NSAtNTI2IC03MjIgLTE0MiAtMzMgLTU1OSAtMzMgLTcwMCAwIC0yNDQgNTYgLTM5NCAxODcgLTQ3MSA0MDkgLTc4IDIyNyAtMTAxIDg0MyAtNDQgMTE5MyA2OCA0MTIgMjYyIDU4NCA3MDAgNjE5IDE0OCAxMiAxNzAgMTIgMzEwIDF6IE0yMjI2NSA0NDY0IGMtOTM3IC03MyAtMTMwNyAtMzk3IC0xNDE5IC0xMjQ0IC00MSAtMzA0IC00MSAtOTY1IC0xIC0xMjY0IDEwOSAtODExIDQzOSAtMTEzMiAxMjY1IC0xMjMzIDE4NCAtMjIgNzMyIC0yNSA5MTUgLTUgODYxIDk2IDExODMgNDAzIDEzMDEgMTI0MiAyMSAxNTMgMzEgODg0IDE1IDEwODYgLTc4IDk0NiAtMzkzIDEyOTIgLTEyODEgMTQwNCAtODQgMTEgLTY5NyAyMSAtNzk1IDE0eiBtNDY4IC03NTUgYzQ1OSAtMzQgNjQwIC0xOTUgNzE5IC02MzcgMzEgLTE3NCAzNCAtNzU2IDUgLTk0MSAtODAgLTUwMiAtMjk5IC02NzEgLTg3MyAtNjcxIC01MzMgMCAtNzY0IDE1MyAtODQ4IDU2MSAtNjUgMzE4IC01NSA5NTggMjAgMTIxNyA4OCAzMDIgMjg1IDQ0MSA2NjkgNDcxIDE0NyAxMiAxNTggMTIgMzA4IDB6Ii8+PC9nPjwvc3ZnPg==);
}
.product-wordmark-mpt {
  width: 5.995em;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODUwIDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkiPjxwYXRoIGQ9Ik0xODAyIDM3NjkgYy00MjUgLTQxIC03NjggLTIxNCAtOTA5IC00NTggbC0zMCAtNTIgLTYgMTA3IGMtNCA1OSAtNyAxNTggLTcgMjIxIGwwIDExMyAtNDIyIDAgLTQyMyAwIDAgLTE4MTUgMCAtMTgxNSA0NTAgMCA0NTAgMCAwIDEwODcgYzAgMTAwMSAxIDEwOTcgMTggMTIwMiA2NSA0MTIgMjE5IDU2NCA2MDcgNjAyIDM5MyAzOSA2NjIgLTU3IDc3MiAtMjc1IDk0IC0xODYgMTAwIC0yODkgOTYgLTE1NjkgbC0zIC0xMDQ3IDQ0NSAwIDQ0NSAwIDAgMTA0NyBjMCAxMDc5IDIgMTEzMCA0MSAxMzIyIDc2IDM2OSAyNTEgNTA2IDY3NCA1MjcgNDQxIDIyIDY3MiAtMTEzIDc1MCAtNDM5IDM4IC0xNTcgNDEgLTI5MCAzOCAtMTM5NSBsLTMgLTEwNjIgNDQ5IDAgNDQ5IDAgLTYgMTE3OCBjLTggMTYxMiAtMjAgMTgyNCAtMTIxIDIwMjcgLTcyIDE0NSAtMTgwIDI1MSAtMzQ5IDM0MCAtMzkzIDIwOSAtMTExNiAyMjAgLTE1NTMgMjUgLTE2NCAtNzQgLTMzMCAtMjE4IC0zOTUgLTM0NCAtMTkgLTM2IC0zNiAtNjYgLTM5IC02NiAtMyAwIC0xOCAyNCAtMzMgNTQgLTE4NCAzNTMgLTc0MCA1NDcgLTEzODUgNDg1eiAgTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogIE0xMjQ5OCAzNzcwIGMtNDE1IC00NCAtNzMzIC0yMDEgLTg4NyAtNDQwIGwtMzkgLTU5IC02IDMxIGMtMyAxNyAtNiAxMTMgLTYgMjE0IGwwIDE4NCAtNDI1IDAgLTQyNSAwIDAgLTE4MTUgMCAtMTgxNSA0NTAgMCA0NDkgMCA0IDExMDggYzQgMTE5MyA0IDExODggNTggMTM2NyA5NiAzMTcgMzM4IDQ0NCA4MDQgNDIxIDQ0OCAtMjIgNjA5IC0xNjUgNjY3IC01OTIgMTAgLTc4IDEzIC0zMzQgMTMgLTEyMDIgbDAgLTExMDIgNDQ1IDAgNDQ1IDAgLTEgMTM3OCBjMCAxMjI5IC0yIDEzODggLTE3IDE0NzkgLTgyIDUwNSAtMzA1IDczNyAtNzk0IDgyNCAtMTM0IDI0IC01NzYgMzUgLTczNSAxOXogIi8+PHBhdGggZD0iTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4Mzc0LDApIi8+PHBhdGggZD0iTTIwNzUwIDQ0MDAgbDAgLTMzMCA0NjUgMCA0NjUgMCAwIDMzMCAwIDMzMCAtNDY1IDAgLTQ2NSAwIDAgLTMzMHogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTY4MCwtNDAwMCkiLz48cGF0aCBkPSJNMjA3NTAgNDQwMCBsMCAtMzMwIDQ2NSAwIDQ2NSAwIDAgMzMwIDAgMzMwIC00NjUgMCAtNDY1IDAgMCAtMzMweiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNjgwLC05NTApIi8+PHJlY3QgeD0iMjA3NDAiIHk9Ii03MTAiIHdpZHRoPSI5MDAiIGhlaWdodD0iNDQ5MCIvPjxwYXRoIGQ9Ik03ODYwIDM3NzAgYy05NDggLTczIC0xMzE2IC00MDYgLTE0MjUgLTEyOTAgLTIzIC0xNzkgLTMyIC03ODYgLTE2IC0xMDAwIDg0IC0xMTI0IDUwNiAtMTQ3NCAxNzcxIC0xNDc0IDExNDMgMCAxNTkzIDMwMiAxNzI0IDExNTkgNjAgMzk1IDU4IDEwODEgLTQgMTQ3MCAtMTAzIDY0NiAtNDAxIDk2NCAtMTAxNCAxMDg1IC0yNDcgNDkgLTc0MSA3MiAtMTAzNiA1MHogbTU5MCAtNzk1IGM0MTYgLTYzIDU2MSAtMjY3IDYwMSAtODQ1IDEzIC0xOTAgNiAtNDg1IC0xNiAtNjUyIC02OCAtNTE4IC0yNzYgLTY4OCAtODQ1IC02ODggLTU2MyAwIC03NzggMTYxIC04NDkgNjM3IC01MCAzMzIgLTI0IDkzNiA0OCAxMTQ2IDg0IDI0MSAyNTYgMzY3IDU1NiA0MDcgMTA1IDEzIDQwMyAxMSA1MDUgLTV6ICIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQzMjksMCkiLz48cGF0aCBkPSJNNzg2MCAzNzcwIGMtOTQ4IC03MyAtMTMxNiAtNDA2IC0xNDI1IC0xMjkwIC0yMyAtMTc5IC0zMiAtNzg2IC0xNiAtMTAwMCA4NCAtMTEyNCA1MDYgLTE0NzQgMTc3MSAtMTQ3NCAxMTQzIDAgMTU5MyAzMDIgMTcyNCAxMTU5IDYwIDM5NSA1OCAxMDgxIC00IDE0NzAgLTEwMyA2NDYgLTQwMSA5NjQgLTEwMTQgMTA4NSAtMjQ3IDQ5IC03NDEgNzIgLTEwMzYgNTB6IG01OTAgLTc5NSBjNDE2IC02MyA1NjEgLTI2NyA2MDEgLTg0NSAxMyAtMTkwIDYgLTQ4NSAtMTYgLTY1MiAtNjggLTUxOCAtMjc2IC02ODggLTg0NSAtNjg4IC01NjMgMCAtNzc4IDE2MSAtODQ5IDYzNyAtNTAgMzMyIC0yNCA5MzYgNDggMTE0NiA4NCAyNDEgMjU2IDM2NyA1NTYgNDA3IDEwNSAxMyA0MDMgMTEgNTA1IC01eiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NjE5LDApIi8+PHJlY3QgeD0iMjc2NzciIHk9IjcwIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjM3MTAiLz48Y2xpcFBhdGggaWQ9InJjIj48cmVjdCB4PSIyOTMyMCIgeT0iMCIgd2lkdGg9IjIyNTAiIGhlaWdodD0iNDAwMCIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI3JjKSI+PHBhdGggZD0iTTEyNDk4IDM3NzAgYy00MTUgLTQ0IC03MzMgLTIwMSAtODg3IC00NDAgbC0zOSAtNTkgLTYgMzEgYy0zIDE3IC02IDExMyAtNiAyMTQgbDAgMTg0IC00MjUgMCAtNDI1IDAgMCAtMTgxNSAwIC0xODE1IDQ1MCAwIDQ0OSAwIDQgMTEwOCBjNCAxMTkzIDQgMTE4OCA1OCAxMzY3IDk2IDMxNyAzMzggNDQ0IDgwNCA0MjEgNDQ4IC0yMiA2MDkgLTE2NSA2NjcgLTU5MiAxMCAtNzggMTMgLTMzNCAxMyAtMTIwMiBsMCAtMTEwMiA0NDUgMCA0NDUgMCAtMSAxMzc4IGMwIDEyMjkgLTIgMTM4OCAtMTcgMTQ3OSAtODIgNTA1IC0zMDUgNzM3IC03OTQgODI0IC0xMzQgMjQgLTU3NiAzNSAtNzM1IDE5eiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NjEwLDApIi8+PC9nPjxyZWN0IHg9IjMyOTUwIiB5PSI3MCIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI0NDMwIi8+PHJlY3QgeD0iMzIzMDAiIHk9IjI5OTUiIHdpZHRoPSIyMjAwIiBoZWlnaHQ9Ijc4NSIvPjxwYXRoIGQ9Ik0yMzYzMCAzNzQzIGMtNTY0IC0zOCAtODU1IC0xMzkgLTEwNDIgLTM2MSAtMTU0IC0xODMgLTIyNyAtNTA5IC0xOTggLTg4MSA0OCAtNjEwIDI5MSAtNzc3IDE0MDAgLTk2MSA1ODAgLTk2IDgxNSAtMTkzIDg2MSAtMzUyIDM1IC0xMjEgNyAtMjk0IC02MSAtMzcxIC05NiAtMTA4IC0zNDYgLTE1OSAtNzA1IC0xNDIgLTU1MyAyNSAtNzA0IDEyOSAtNzA1IDQ4MyBsMCA5MyAtMjE3IC02IGMtMTIwIC0zIC0zMTQgLTggLTQzMiAtMTEgbC0yMTMgLTYgNiAtMTMyIGM0MSAtNzY2IDI4MCAtOTk0IDExMzEgLTEwNzggMjA1IC0yMCA4ODEgLTE3IDEwNzAgNSA3OTQgOTMgMTA0OSAzNjMgMTA0OCAxMTEyIDAgNzE4IC0yNjAgOTIwIC0xNDI4IDExMDYgLTc2NyAxMjIgLTg4NSAxODMgLTg4NSA0NjQgMCAxOTggOTAgMzA2IDI5MSAzNTMgMTA5IDI0IDU1NyAyNCA2ODQgLTEgMjUwIC01MCAzNDQgLTE2MCAzNDUgLTQwMCBsMCAtNzkgMjUzIDYgYzEzOCA0IDMzNCA5IDQzNSAxMiBsMTgzIDYgLTYgMTAyIGMtMzMgNTM2IC0xNTYgNzYyIC00OTIgOTA2IC0yNDUgMTA0IC04NTUgMTY2IC0xMzIzIDEzM3ogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjkyMiwwKSIvPjwvZz48L3N2Zz4=);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODUwIDU0NCI+PGcgZmlsbD0iIzAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NzMpIHNjYWxlKC4xLC0uMSkiPjxwYXRoIGQ9Ik0xODAyIDM3NjkgYy00MjUgLTQxIC03NjggLTIxNCAtOTA5IC00NTggbC0zMCAtNTIgLTYgMTA3IGMtNCA1OSAtNyAxNTggLTcgMjIxIGwwIDExMyAtNDIyIDAgLTQyMyAwIDAgLTE4MTUgMCAtMTgxNSA0NTAgMCA0NTAgMCAwIDEwODcgYzAgMTAwMSAxIDEwOTcgMTggMTIwMiA2NSA0MTIgMjE5IDU2NCA2MDcgNjAyIDM5MyAzOSA2NjIgLTU3IDc3MiAtMjc1IDk0IC0xODYgMTAwIC0yODkgOTYgLTE1NjkgbC0zIC0xMDQ3IDQ0NSAwIDQ0NSAwIDAgMTA0NyBjMCAxMDc5IDIgMTEzMCA0MSAxMzIyIDc2IDM2OSAyNTEgNTA2IDY3NCA1MjcgNDQxIDIyIDY3MiAtMTEzIDc1MCAtNDM5IDM4IC0xNTcgNDEgLTI5MCAzOCAtMTM5NSBsLTMgLTEwNjIgNDQ5IDAgNDQ5IDAgLTYgMTE3OCBjLTggMTYxMiAtMjAgMTgyNCAtMTIxIDIwMjcgLTcyIDE0NSAtMTgwIDI1MSAtMzQ5IDM0MCAtMzkzIDIwOSAtMTExNiAyMjAgLTE1NTMgMjUgLTE2NCAtNzQgLTMzMCAtMjE4IC0zOTUgLTM0NCAtMTkgLTM2IC0zNiAtNjYgLTM5IC02NiAtMyAwIC0xOCAyNCAtMzMgNTQgLTE4NCAzNTMgLTc0MCA1NDcgLTEzODUgNDg1eiAgTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogIE0xMjQ5OCAzNzcwIGMtNDE1IC00NCAtNzMzIC0yMDEgLTg4NyAtNDQwIGwtMzkgLTU5IC02IDMxIGMtMyAxNyAtNiAxMTMgLTYgMjE0IGwwIDE4NCAtNDI1IDAgLTQyNSAwIDAgLTE4MTUgMCAtMTgxNSA0NTAgMCA0NDkgMCA0IDExMDggYzQgMTE5MyA0IDExODggNTggMTM2NyA5NiAzMTcgMzM4IDQ0NCA4MDQgNDIxIDQ0OCAtMjIgNjA5IC0xNjUgNjY3IC01OTIgMTAgLTc4IDEzIC0zMzQgMTMgLTEyMDIgbDAgLTExMDIgNDQ1IDAgNDQ1IDAgLTEgMTM3OCBjMCAxMjI5IC0yIDEzODggLTE3IDE0NzkgLTgyIDUwNSAtMzA1IDczNyAtNzk0IDgyNCAtMTM0IDI0IC01NzYgMzUgLTczNSAxOXogIi8+PHBhdGggZD0iTTc4NjAgMzc3MCBjLTk0OCAtNzMgLTEzMTYgLTQwNiAtMTQyNSAtMTI5MCAtMjMgLTE3OSAtMzIgLTc4NiAtMTYgLTEwMDAgODQgLTExMjQgNTA2IC0xNDc0IDE3NzEgLTE0NzQgMTE0MyAwIDE1OTMgMzAyIDE3MjQgMTE1OSA2MCAzOTUgNTggMTA4MSAtNCAxNDcwIC0xMDMgNjQ2IC00MDEgOTY0IC0xMDE0IDEwODUgLTI0NyA0OSAtNzQxIDcyIC0xMDM2IDUweiBtNTkwIC03OTUgYzQxNiAtNjMgNTYxIC0yNjcgNjAxIC04NDUgMTMgLTE5MCA2IC00ODUgLTE2IC02NTIgLTY4IC01MTggLTI3NiAtNjg4IC04NDUgLTY4OCAtNTYzIDAgLTc3OCAxNjEgLTg0OSA2MzcgLTUwIDMzMiAtMjQgOTM2IDQ4IDExNDYgODQgMjQxIDI1NiAzNjcgNTU2IDQwNyAxMDUgMTMgNDAzIDExIDUwNSAtNXogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4Mzc0LDApIi8+PHBhdGggZD0iTTIwNzUwIDQ0MDAgbDAgLTMzMCA0NjUgMCA0NjUgMCAwIDMzMCAwIDMzMCAtNDY1IDAgLTQ2NSAwIDAgLTMzMHogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTY4MCwtNDAwMCkiLz48cGF0aCBkPSJNMjA3NTAgNDQwMCBsMCAtMzMwIDQ2NSAwIDQ2NSAwIDAgMzMwIDAgMzMwIC00NjUgMCAtNDY1IDAgMCAtMzMweiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNjgwLC05NTApIi8+PHJlY3QgeD0iMjA3NDAiIHk9Ii03MTAiIHdpZHRoPSI5MDAiIGhlaWdodD0iNDQ5MCIvPjxwYXRoIGQ9Ik03ODYwIDM3NzAgYy05NDggLTczIC0xMzE2IC00MDYgLTE0MjUgLTEyOTAgLTIzIC0xNzkgLTMyIC03ODYgLTE2IC0xMDAwIDg0IC0xMTI0IDUwNiAtMTQ3NCAxNzcxIC0xNDc0IDExNDMgMCAxNTkzIDMwMiAxNzI0IDExNTkgNjAgMzk1IDU4IDEwODEgLTQgMTQ3MCAtMTAzIDY0NiAtNDAxIDk2NCAtMTAxNCAxMDg1IC0yNDcgNDkgLTc0MSA3MiAtMTAzNiA1MHogbTU5MCAtNzk1IGM0MTYgLTYzIDU2MSAtMjY3IDYwMSAtODQ1IDEzIC0xOTAgNiAtNDg1IC0xNiAtNjUyIC02OCAtNTE4IC0yNzYgLTY4OCAtODQ1IC02ODggLTU2MyAwIC03NzggMTYxIC04NDkgNjM3IC01MCAzMzIgLTI0IDkzNiA0OCAxMTQ2IDg0IDI0MSAyNTYgMzY3IDU1NiA0MDcgMTA1IDEzIDQwMyAxMSA1MDUgLTV6ICIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQzMjksMCkiLz48cGF0aCBkPSJNNzg2MCAzNzcwIGMtOTQ4IC03MyAtMTMxNiAtNDA2IC0xNDI1IC0xMjkwIC0yMyAtMTc5IC0zMiAtNzg2IC0xNiAtMTAwMCA4NCAtMTEyNCA1MDYgLTE0NzQgMTc3MSAtMTQ3NCAxMTQzIDAgMTU5MyAzMDIgMTcyNCAxMTU5IDYwIDM5NSA1OCAxMDgxIC00IDE0NzAgLTEwMyA2NDYgLTQwMSA5NjQgLTEwMTQgMTA4NSAtMjQ3IDQ5IC03NDEgNzIgLTEwMzYgNTB6IG01OTAgLTc5NSBjNDE2IC02MyA1NjEgLTI2NyA2MDEgLTg0NSAxMyAtMTkwIDYgLTQ4NSAtMTYgLTY1MiAtNjggLTUxOCAtMjc2IC02ODggLTg0NSAtNjg4IC01NjMgMCAtNzc4IDE2MSAtODQ5IDYzNyAtNTAgMzMyIC0yNCA5MzYgNDggMTE0NiA4NCAyNDEgMjU2IDM2NyA1NTYgNDA3IDEwNSAxMyA0MDMgMTEgNTA1IC01eiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NjE5LDApIi8+PHJlY3QgeD0iMjc2NzciIHk9IjcwIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjM3MTAiLz48Y2xpcFBhdGggaWQ9InJjIj48cmVjdCB4PSIyOTMyMCIgeT0iMCIgd2lkdGg9IjIyNTAiIGhlaWdodD0iNDAwMCIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI3JjKSI+PHBhdGggZD0iTTEyNDk4IDM3NzAgYy00MTUgLTQ0IC03MzMgLTIwMSAtODg3IC00NDAgbC0zOSAtNTkgLTYgMzEgYy0zIDE3IC02IDExMyAtNiAyMTQgbDAgMTg0IC00MjUgMCAtNDI1IDAgMCAtMTgxNSAwIC0xODE1IDQ1MCAwIDQ0OSAwIDQgMTEwOCBjNCAxMTkzIDQgMTE4OCA1OCAxMzY3IDk2IDMxNyAzMzggNDQ0IDgwNCA0MjEgNDQ4IC0yMiA2MDkgLTE2NSA2NjcgLTU5MiAxMCAtNzggMTMgLTMzNCAxMyAtMTIwMiBsMCAtMTEwMiA0NDUgMCA0NDUgMCAtMSAxMzc4IGMwIDEyMjkgLTIgMTM4OCAtMTcgMTQ3OSAtODIgNTA1IC0zMDUgNzM3IC03OTQgODI0IC0xMzQgMjQgLTU3NiAzNSAtNzM1IDE5eiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NjEwLDApIi8+PC9nPjxyZWN0IHg9IjMyOTUwIiB5PSI3MCIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI0NDMwIi8+PHJlY3QgeD0iMzIzMDAiIHk9IjI5OTUiIHdpZHRoPSIyMjAwIiBoZWlnaHQ9Ijc4NSIvPjxwYXRoIGQ9Ik0yMzYzMCAzNzQzIGMtNTY0IC0zOCAtODU1IC0xMzkgLTEwNDIgLTM2MSAtMTU0IC0xODMgLTIyNyAtNTA5IC0xOTggLTg4MSA0OCAtNjEwIDI5MSAtNzc3IDE0MDAgLTk2MSA1ODAgLTk2IDgxNSAtMTkzIDg2MSAtMzUyIDM1IC0xMjEgNyAtMjk0IC02MSAtMzcxIC05NiAtMTA4IC0zNDYgLTE1OSAtNzA1IC0xNDIgLTU1MyAyNSAtNzA0IDEyOSAtNzA1IDQ4MyBsMCA5MyAtMjE3IC02IGMtMTIwIC0zIC0zMTQgLTggLTQzMiAtMTEgbC0yMTMgLTYgNiAtMTMyIGM0MSAtNzY2IDI4MCAtOTk0IDExMzEgLTEwNzggMjA1IC0yMCA4ODEgLTE3IDEwNzAgNSA3OTQgOTMgMTA0OSAzNjMgMTA0OCAxMTEyIDAgNzE4IC0yNjAgOTIwIC0xNDI4IDExMDYgLTc2NyAxMjIgLTg4NSAxODMgLTg4NSA0NjQgMCAxOTggOTAgMzA2IDI5MSAzNTMgMTA5IDI0IDU1NyAyNCA2ODQgLTEgMjUwIC01MCAzNDQgLTE2MCAzNDUgLTQwMCBsMCAtNzkgMjUzIDYgYzEzOCA0IDMzNCA5IDQzNSAxMiBsMTgzIDYgLTYgMTAyIGMtMzMgNTM2IC0xNTYgNzYyIC00OTIgOTA2IC0yNDUgMTA0IC04NTUgMTY2IC0xMzIzIDEzM3ogIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjkyMiwwKSIvPjwvZz48L3N2Zz4=);
}
.product-wordmark-title {
  display: inline-block;
  width: 2.89em;
  height: 0.7em;
  vertical-align: 0;
  margin: 0 0.06em;
  background: currentColor;
  opacity: 0.42;
  -webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMTgyNi4wMDAwMDBwdCIgaGVpZ2h0PSI0NDIuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAxODI2LjAwMDAwMCA0NDIuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+CjxtZXRhZGF0YT4KQ3JlYXRlZCBieSBwb3RyYWNlIDEuMTYsIHdyaXR0ZW4gYnkgUGV0ZXIgU2VsaW5nZXIgMjAwMS0yMDE5CjwvbWV0YWRhdGE+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDQ0Mi4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCmZpbGw9IiMwMDAwMDAiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0xMDM1IDQ0MDkgYy0xMjEgLTMgLTI4MCAtNyAtMzUyIC04IGwtMTMzIC0xIDAgLTM0NSAwIC0zNDUgLTI3NSAwCi0yNzUgMCAwIC0zOTUgMCAtMzk1IDI3NSAwIDI3NCAwIDMgLTEwNDIgMyAtMTA0MyAyMyAtMTA5IGMxMTcgLTU1MiA0ODEgLTcxMQoxNTMxIC02NjcgMzI2IDEzIDM1NSAxNyAzNDcgMzggLTQgOCAtNiAxODIgLTYgMzg3IGwwIDM3MyAtMzEyIC0xIGMtNDczIC0xCi01NzIgMzEgLTYzMSAyMDQgLTIyIDY1IC0yMiA2NiAtMjUgOTYzIGwtMyA4OTcgNDg2IDAgNDg1IDAgMCAzOTUgMCAzOTUgLTQ4NQowIC00ODUgMCAwIDM1NSAwIDM1NSAtMTEyIC0yIGMtNjIgLTEgLTIxMiAtNSAtMzMzIC05eiBNNDM1MCAzNzc0IGMtMTA2NyAtOTUKLTE0MTIgLTUwNiAtMTQ0NiAtMTcyNCAtMTAgLTM3OCAxOSAtNzg3IDcyIC0xMDE4IDE3MyAtNzQ2IDY0NCAtMTAyNyAxNzI0Ci0xMDI2IDEyMTIgMiAxNjM0IDMwMCAxNjc2IDExODMgbDcgMTM4IC0yMzkgNyBjLTEzMSAzIC0zMzkgOSAtNDYxIDEzIGwtMjIzCjYgMCAtNjUgYzAgLTc5IC0zMSAtMjA2IC02NCAtMjYzIC05NSAtMTYyIC0zMTMgLTIzNSAtNzAyIC0yMzUgLTU5MiAwIC03OTIKMTg3IC04NDAgNzg4IGwtNyA4MiAxMjY4IDAgMTI2OCAwIC02IDM0OCBjLTQgMjE0IC0xMiAzOTUgLTIxIDQ3MiAtMTAyIDgzMQotNDIzIDExNjcgLTEyMTYgMTI3NiAtMTEwIDE1IC02NzYgMjggLTc5MCAxOHogbTY0NSAtNzE4IGMyNzggLTY0IDM5MiAtMjQ4CjQyMSAtNjc4IGw3IC05OCAtNzg3IDAgLTc4NyAwIDYgNTggYzU2IDUyMCAxODIgNjc3IDU5MCA3MzYgNzUgMTEgNDgyIC0zIDU1MAotMTh6IE04ODcyIDM3NzAgYy00MjQgLTQ0IC03MzQgLTE5NiAtODk0IC00MzkgbC00OCAtNzQgMCAyMDYgYzAgMTEzIC0zIDIxMgotNiAyMjEgLTUgMTQgLTUyIDE2IC00MjUgMTYgbC00MTkgMCAwIC0xODE1IDAgLTE4MTUgNDQ5IDAgNDQ4IDAgLTQgOTA4IGMtOAoxMzA2IDggMTUwOCAxMzAgMTcyMiAxMTIgMTk2IDM1OCAyODUgNzQyIDI2NiA0NTAgLTIyIDYxNSAtMTc0IDY2NSAtNjExIDYKLTU2IDEwIC01MDYgMTAgLTExODcgbDAgLTEwOTggNDQ4IDAgNDQ3IDAgLTEgMTM0MyBjMCAxMjg2IC0yIDE0MDAgLTI2IDE1NDcKLTc1IDQ3NSAtMzIyIDcxNyAtODEzIDc5NiAtMTE2IDE5IC01NzEgMjggLTcwMyAxNHogTTEyMjQ1IDM3NjkgYy04MzIgLTY4Ci0xMTM1IC0zNjYgLTExMzUgLTExMTYgMCAtNjY0IDIwNiAtODc1IDEwMTkgLTEwNDQgNTMgLTExIDIxMiAtNDAgMzU1IC02NAo2MDcgLTEwNSA4MDEgLTE3NyA4NzMgLTMyMyA0MiAtODUgNDEgLTI0MCAtMSAtMzI1IC03MiAtMTQ3IC0yMjUgLTE5MiAtNjQ2Ci0xOTEgLTYyOCAyIC03OTAgMTA4IC03OTAgNTE1IGwwIDYwIC0xNTIgLTUgYy04NCAtMyAtMjgyIC05IC00NDEgLTEyIGwtMjg3Ci02IDYgLTEyNyBjMjggLTYxMyAxNzMgLTg2OCA1NzUgLTEwMDkgNDI2IC0xNTAgMTQ4NCAtMTY3IDIwMDIgLTMyIDQ4NyAxMjYKNjc0IDM4NCA3MDMgOTY1IDE3IDM1MCAtNDkgNjE1IC0xOTMgNzc0IC0xOTAgMjExIC00ODkgMzE2IC0xMjY1IDQ0NSAtNzIxCjEyMSAtODIyIDE2NSAtODU4IDM3OCAtMzIgMTg2IDQ4IDMzOSAyMDQgMzg3IDE4MiA1NiA2MDYgNTYgODE2IDAgMTg4IC01MQoyNTcgLTE0MSAyNjcgLTM1MSBsNiAtMTA4IDM2IDAgYzE3NCAxIDgxNyAyMSA4MzcgMjYgbDI3IDcgLTcgMTE2IGMtNDMgNzQ2Ci0zMDMgOTc5IC0xMTYxIDEwNDEgLTE2MiAxMiAtNjQ0IDExIC03OTAgLTF6IE0xNjI0MCAzNzczIGMtMTk5IC0xOCAtMjcyIC0yOAotMzc4IC00OSAtNzY5IC0xNTMgLTEwNTMgLTYwMCAtMTA3OCAtMTY5NCAtMjkgLTEyMjEgMjM1IC0xNzUzIDk2MCAtMTk0MCA0OTEKLTEyNiAxMzU1IC0xMTQgMTgwMCAyNyAzMTcgMTAwIDUzMSAyOTcgNjI3IDU3NiA1MCAxNDcgODkgMzk2IDg5IDU3OCBsMCA1NgotMjM3IDcgYy0xMzEgMyAtMzM4IDkgLTQ2MCAxMyBsLTIyMyA2IDAgLTU5IGMtMSAtMzcyIC0yNDggLTUyMCAtODMzIC01MDEKLTUxOCAxNyAtNzA0IDE4MiAtNzYyIDY3NyAtOCA2OSAtMTUgMTQwIC0xNSAxNTcgbDAgMzMgMTI2NiAwIDEyNjcgMCAtNiAzMzgKYy02IDM2MCAtMjAgNTIwIC02MyA3MzEgLTEzNiA2NzcgLTUwOSA5NzEgLTEzMTkgMTA0MSAtMTA5IDkgLTU0OSAxMiAtNjM1IDN6Cm02NDYgLTcyMiBjMjUxIC02MSAzNTggLTIxNCAzOTkgLTU3MSA4IC02OSAxNSAtMTQyIDE1IC0xNjIgbDAgLTM4IC03ODYgMAotNzg2IDAgNyA2OCBjNDcgNDgwIDE3NiA2NTQgNTM1IDcxOCAxMjYgMjIgNTAyIDEzIDYxNiAtMTV6Ii8+CjwvZz4KPC9zdmc+Cg==)
    left center/contain no-repeat;
  mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMTgyNi4wMDAwMDBwdCIgaGVpZ2h0PSI0NDIuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAxODI2LjAwMDAwMCA0NDIuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+CjxtZXRhZGF0YT4KQ3JlYXRlZCBieSBwb3RyYWNlIDEuMTYsIHdyaXR0ZW4gYnkgUGV0ZXIgU2VsaW5nZXIgMjAwMS0yMDE5CjwvbWV0YWRhdGE+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDQ0Mi4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCmZpbGw9IiMwMDAwMDAiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0xMDM1IDQ0MDkgYy0xMjEgLTMgLTI4MCAtNyAtMzUyIC04IGwtMTMzIC0xIDAgLTM0NSAwIC0zNDUgLTI3NSAwCi0yNzUgMCAwIC0zOTUgMCAtMzk1IDI3NSAwIDI3NCAwIDMgLTEwNDIgMyAtMTA0MyAyMyAtMTA5IGMxMTcgLTU1MiA0ODEgLTcxMQoxNTMxIC02NjcgMzI2IDEzIDM1NSAxNyAzNDcgMzggLTQgOCAtNiAxODIgLTYgMzg3IGwwIDM3MyAtMzEyIC0xIGMtNDczIC0xCi01NzIgMzEgLTYzMSAyMDQgLTIyIDY1IC0yMiA2NiAtMjUgOTYzIGwtMyA4OTcgNDg2IDAgNDg1IDAgMCAzOTUgMCAzOTUgLTQ4NQowIC00ODUgMCAwIDM1NSAwIDM1NSAtMTEyIC0yIGMtNjIgLTEgLTIxMiAtNSAtMzMzIC05eiBNNDM1MCAzNzc0IGMtMTA2NyAtOTUKLTE0MTIgLTUwNiAtMTQ0NiAtMTcyNCAtMTAgLTM3OCAxOSAtNzg3IDcyIC0xMDE4IDE3MyAtNzQ2IDY0NCAtMTAyNyAxNzI0Ci0xMDI2IDEyMTIgMiAxNjM0IDMwMCAxNjc2IDExODMgbDcgMTM4IC0yMzkgNyBjLTEzMSAzIC0zMzkgOSAtNDYxIDEzIGwtMjIzCjYgMCAtNjUgYzAgLTc5IC0zMSAtMjA2IC02NCAtMjYzIC05NSAtMTYyIC0zMTMgLTIzNSAtNzAyIC0yMzUgLTU5MiAwIC03OTIKMTg3IC04NDAgNzg4IGwtNyA4MiAxMjY4IDAgMTI2OCAwIC02IDM0OCBjLTQgMjE0IC0xMiAzOTUgLTIxIDQ3MiAtMTAyIDgzMQotNDIzIDExNjcgLTEyMTYgMTI3NiAtMTEwIDE1IC02NzYgMjggLTc5MCAxOHogbTY0NSAtNzE4IGMyNzggLTY0IDM5MiAtMjQ4CjQyMSAtNjc4IGw3IC05OCAtNzg3IDAgLTc4NyAwIDYgNTggYzU2IDUyMCAxODIgNjc3IDU5MCA3MzYgNzUgMTEgNDgyIC0zIDU1MAotMTh6IE04ODcyIDM3NzAgYy00MjQgLTQ0IC03MzQgLTE5NiAtODk0IC00MzkgbC00OCAtNzQgMCAyMDYgYzAgMTEzIC0zIDIxMgotNiAyMjEgLTUgMTQgLTUyIDE2IC00MjUgMTYgbC00MTkgMCAwIC0xODE1IDAgLTE4MTUgNDQ5IDAgNDQ4IDAgLTQgOTA4IGMtOAoxMzA2IDggMTUwOCAxMzAgMTcyMiAxMTIgMTk2IDM1OCAyODUgNzQyIDI2NiA0NTAgLTIyIDYxNSAtMTc0IDY2NSAtNjExIDYKLTU2IDEwIC01MDYgMTAgLTExODcgbDAgLTEwOTggNDQ4IDAgNDQ3IDAgLTEgMTM0MyBjMCAxMjg2IC0yIDE0MDAgLTI2IDE1NDcKLTc1IDQ3NSAtMzIyIDcxNyAtODEzIDc5NiAtMTE2IDE5IC01NzEgMjggLTcwMyAxNHogTTEyMjQ1IDM3NjkgYy04MzIgLTY4Ci0xMTM1IC0zNjYgLTExMzUgLTExMTYgMCAtNjY0IDIwNiAtODc1IDEwMTkgLTEwNDQgNTMgLTExIDIxMiAtNDAgMzU1IC02NAo2MDcgLTEwNSA4MDEgLTE3NyA4NzMgLTMyMyA0MiAtODUgNDEgLTI0MCAtMSAtMzI1IC03MiAtMTQ3IC0yMjUgLTE5MiAtNjQ2Ci0xOTEgLTYyOCAyIC03OTAgMTA4IC03OTAgNTE1IGwwIDYwIC0xNTIgLTUgYy04NCAtMyAtMjgyIC05IC00NDEgLTEyIGwtMjg3Ci02IDYgLTEyNyBjMjggLTYxMyAxNzMgLTg2OCA1NzUgLTEwMDkgNDI2IC0xNTAgMTQ4NCAtMTY3IDIwMDIgLTMyIDQ4NyAxMjYKNjc0IDM4NCA3MDMgOTY1IDE3IDM1MCAtNDkgNjE1IC0xOTMgNzc0IC0xOTAgMjExIC00ODkgMzE2IC0xMjY1IDQ0NSAtNzIxCjEyMSAtODIyIDE2NSAtODU4IDM3OCAtMzIgMTg2IDQ4IDMzOSAyMDQgMzg3IDE4MiA1NiA2MDYgNTYgODE2IDAgMTg4IC01MQoyNTcgLTE0MSAyNjcgLTM1MSBsNiAtMTA4IDM2IDAgYzE3NCAxIDgxNyAyMSA4MzcgMjYgbDI3IDcgLTcgMTE2IGMtNDMgNzQ2Ci0zMDMgOTc5IC0xMTYxIDEwNDEgLTE2MiAxMiAtNjQ0IDExIC03OTAgLTF6IE0xNjI0MCAzNzczIGMtMTk5IC0xOCAtMjcyIC0yOAotMzc4IC00OSAtNzY5IC0xNTMgLTEwNTMgLTYwMCAtMTA3OCAtMTY5NCAtMjkgLTEyMjEgMjM1IC0xNzUzIDk2MCAtMTk0MCA0OTEKLTEyNiAxMzU1IC0xMTQgMTgwMCAyNyAzMTcgMTAwIDUzMSAyOTcgNjI3IDU3NiA1MCAxNDcgODkgMzk2IDg5IDU3OCBsMCA1NgotMjM3IDcgYy0xMzEgMyAtMzM4IDkgLTQ2MCAxMyBsLTIyMyA2IDAgLTU5IGMtMSAtMzcyIC0yNDggLTUyMCAtODMzIC01MDEKLTUxOCAxNyAtNzA0IDE4MiAtNzYyIDY3NyAtOCA2OSAtMTUgMTQwIC0xNSAxNTcgbDAgMzMgMTI2NiAwIDEyNjcgMCAtNiAzMzgKYy02IDM2MCAtMjAgNTIwIC02MyA3MzEgLTEzNiA2NzcgLTUwOSA5NzEgLTEzMTkgMTA0MSAtMTA5IDkgLTU0OSAxMiAtNjM1IDN6Cm02NDYgLTcyMiBjMjUxIC02MSAzNTggLTIxNCAzOTkgLTU3MSA4IC02OSAxNSAtMTQyIDE1IC0xNjIgbDAgLTM4IC03ODYgMAotNzg2IDAgNyA2OCBjNDcgNDgwIDE3NiA2NTQgNTM1IDcxOCAxMjYgMjIgNTAyIDEzIDYxNiAtMTV6Ii8+CjwvZz4KPC9zdmc+Cg==)
    left center/contain no-repeat;
}
.product-wordmark-title > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
svg.brand-wordmark,
svg[class*="lt-"],
svg[aria-label="SIJE"],
svg[aria-label="Monolis"],
svg[aria-label="Monolog"],
svg[aria-label="Mono:parts"],
svg[aria-label="Tense AI"] {
  overflow: visible;
}
.product-wordmark {
  box-sizing: content-box;
  padding: 1px;
  margin: -1px calc(0.02em - 1px) -1px calc(0.03em - 1px);
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
}
.product-wordmark-title {
  box-sizing: content-box;
  padding: 1px;
  margin: -1px calc(0.06em - 1px);
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
}
section.hero .hero-s {
  grid-column: 8 / span 5 !important;
}
@media (max-width: 1023px) {
  section.hero .hero-s {
    grid-column: 1 / -1 !important;
  }
}
.site-footer-nav .site-footer-soon,
.site-footer-nav .site-footer-soon .product-wordmark-title {
  font-size: 14px;
}
body .foot .site-footer-nav .site-footer-soon {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0;
  line-height: 22px;
}
@media (max-width: 767px) {
  body .foot .site-footer-nav .site-footer-soon {
    height: 26px;
    line-height: 18px;
  }
}
.b3-claim {
  margin: 8px 0 24px;
}
.automation-timeline figcaption {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 20px;
}

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;
  }
  html[lang="vi"] .product-workflow-claim {
    max-width: none;
  }
}
@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;
}

/* L3 */
@media (min-width: 1024px) and (max-width: 1199px) {
  html[lang="vi"] .m5t td {
    white-space: normal;
  }
} /* L4 */
@media (min-width: 1024px) {
  html[lang="vi"] .mp3 .m3-tabs {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  html[lang="ko"] .mp3 .m3-tabs {
    grid-template-columns: 1fr;
  }
} /* L5 */
@media (min-width: 1101px) and (max-width: 1199px) {
  .mp2 {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .m2-c .m2-po {
    flex-wrap: wrap;
    height: auto;
    min-height: 38px;
    padding: 6px 6px 6px 10px;
    row-gap: 4px;
  }
  .m2-c .m2-nm {
    white-space: normal;
  }
  .m2-c .m2-nm em {
    overflow: visible;
    text-overflow: clip;
  }
} /* L8 */
@media (min-width: 768px) and (max-width: 1023px) {
  .b3-g {
    grid-template-columns: 112px repeat(6, minmax(0, 1fr));
  }
  .b3-hd {
    padding: 0 6px 16px;
  }
  .b3-bd {
    font-size: 11px;
    padding: 2px 6px 3px;
    white-space: normal;
    text-align: center;
  }
  .b3-chip {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    height: auto;
    min-height: 24px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    justify-content: center;
    max-width: calc(100% - 8px);
    border-radius: 12px;
  }
} /* 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;
} /* C2 */
:where(.monoparts-page) .eyebrow,
:where(.monoparts-page) .dd-n,
:where(.monoparts-page) .eyebrow,
:where(.monoparts-page) .sub,
:where(.monoparts-page) .st-n span,
:where(.monoparts-page) .text-link,
:where(.monoparts-page) .hero.hero-lt .eyebrow,
:where(.monoparts-page) .hero.hero-lt .hn:hover .hn-n,
:where(.monoparts-page) .hero.hero-lt .hn:focus-visible .hn-n,
:where(.monoparts-page) .hero.hero-lt .hn.cur .hn-n,
:where(.monoparts-page) .st.on .st-n,
:where(.monoparts-page) .st.on .st-en,
:where(.monoparts-page) .sp-no,
:where(.monoparts-page) .mh-hero.hero-lt .eyebrow,
:where(.monoparts-page) .mh-hero.hero-lt .hn:hover .hn-n,
:where(.monoparts-page) .mh-hero.hero-lt .hn:focus-visible .hn-n,
:where(.monoparts-page) .mst-top .eyebrow,
:where(.monoparts-page) .fh-tabs button[aria-pressed="true"],
:where(.monoparts-page) .fh-tabs button[aria-pressed="true"] b,
:where(.monoparts-page) .m2-p.acc .m2-t b,
:where(.monoparts-page) .m2-k.acc,
:where(.monoparts-page) .m2-sum .big b,
:where(.monoparts-page) .mp3 .m3-tabs button[aria-pressed="true"],
:where(.monoparts-page) .mp3 .m3-tabs button[aria-pressed="true"] b,
:where(.monoparts-page) .mp3 .m3-te,
:where(.monoparts-page) .mp3[data-r="1"] .m3-tb .m3-c1,
:where(.monoparts-page) .mp3[data-r="2"] .m3-tb .m3-c2,
:where(.monoparts-page) .mp3[data-r="3"] .m3-tb .m3-c3,
:where(.monoparts-page) .b3-nn,
:where(.monoparts-page) .b3[data-s="0"] .b3-hd.b3k0 .b3-no,
:where(.monoparts-page) .b3[data-s="0"] .b3-chip[data-st="0"],
:where(.monoparts-page) .b3[data-s="1"] .b3-hd.b3k1 .b3-no,
:where(.monoparts-page) .b3[data-s="1"] .b3-chip[data-st="1"],
:where(.monoparts-page) .b3[data-s="2"] .b3-hd.b3k2 .b3-no,
:where(.monoparts-page) .b3[data-s="2"] .b3-chip[data-st="2"],
:where(.monoparts-page) .b3[data-s="3"] .b3-hd.b3k3 .b3-no,
:where(.monoparts-page) .b3[data-s="3"] .b3-chip[data-st="3"],
:where(.monoparts-page) .b3[data-s="4"] .b3-hd.b3k4 .b3-no,
:where(.monoparts-page) .b3[data-s="4"] .b3-chip[data-st="4"],
:where(.monoparts-page) .b3[data-s="5"] .b3-hd.b3k5 .b3-no,
:where(.monoparts-page) .b3[data-s="5"] .b3-chip[data-st="5"],
:where(.monoparts-page) .language-menu-icon b {
  color: #0374a8;
}
:where(.monoparts-page) .text-link.to-monolis,
:where(.monoparts-page) .order-lineage-adjustment.mint i,
:where(.monoparts-page) .order-lineage-adjustment.mint b {
  color: #037b6d;
}
@media (max-width: 767px) {
  :where(.monoparts-page) .fold-btn {
    color: #0374a8;
  }
}
:where(.monoparts-page)
  :is(
    .eyebrow,
    .sub,
    .text-link,
    .sp-no,
    .m2-k,
    .m3-te,
    .b3-nn,
    .b3-no,
    .b3-chip,
    .fh-tabs,
    .m3-tabs,
    .hn-n
  )
  :is(.product-wordmark, .product-wordmark-title) {
  color: var(--pcd);
}
:where(.monoparts-page)
  :is(.text-link.to-monolis, .order-lineage-adjustment.mint)
  :is(.product-wordmark, .product-wordmark-title) {
  color: var(--acc-mint-deep);
} /* C3 */
:where(.monoparts-page) .automation-input-lg,
:where(.monoparts-page) .aih-tb,
:where(.monoparts-page) .aih-bc,
:where(.monoparts-page) .fc-n span,
:where(.monoparts-page) .bdg.b-gy,
:where(.monoparts-page) .aitb .ko,
:where(.monoparts-page) .m2-nm em,
:where(.monoparts-page) .m2-lt,
:where(.monoparts-page) .m2-nm2 em,
:where(.monoparts-page) .m2-sum span,
:where(.monoparts-page) .aitb .cu,
:where(.monoparts-page) .sht .rn,
:where(.monoparts-page) .wb-d {
  color: #69727a;
} /* 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);
}

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