/* 해솔 홈페이지 — A안 「신호판」 (design/base.css + design/a/a.css 에서 이어짐) */
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex/ibm-plex-sans-condensed-latin-500-normal.25db464417d3.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex/ibm-plex-sans-condensed-latin-600-normal.bac89dc82014.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --paper: #F4F6F8;       /* 차가운 강판 톤 바탕 */
  --surface: #FFFFFF;
  --ink: #1C2127;         /* 흑연 */
  --muted: #56616C;       /* 강철 회색 */
  --rule: #D5DBE1;
  --brand: #EF4328;       /* 공식 CI 레드 — 장식·대형 글자 */
  --action: #E02D11;      /* 흰 글자 대비 4.6:1 — 버튼·링크 */
  --action-hover: #BF260E;
  --focus: #1F6FEB;

  --bg: var(--surface);
  --font-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: "IBM Plex Sans Condensed", "Pretendard Variable", Pretendard, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.005em;
  --radius: 2px;

  --header-bg: #FFFFFF; --header-ink: var(--ink); --header-shadow: 0 1px 0 var(--rule);
  --utility-bg: var(--paper); --utility-ink: var(--muted); --utility-accent: var(--action);
  --menu-bg: #FFFFFF; --menu-shadow: 0 12px 28px rgba(28, 33, 39, .10);
  --quiet-bg: var(--paper); --quiet-hover: #E8ECF0;
  --cta-bg: var(--ink); --cta-ink: #FFFFFF; --cta-muted: #C3CBD2;
  --footer-bg: #FFFFFF; --footer-ink: var(--muted); --footer-rule: var(--rule);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.7;
  word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
}
body.drawer-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 16px; background: var(--ink); color: #fff; }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border: 1.5px solid transparent; border-radius: var(--radius);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.3; text-decoration: none; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--action { background: var(--action); color: #fff; }
.btn--action:hover { background: var(--action-hover); }
.btn--ghost { border-color: currentColor; }
.btn--quiet { background: var(--quiet-bg); color: var(--ink); }
.btn--quiet:hover { background: var(--quiet-hover); }
.btn--small { min-height: 40px; padding: 8px 14px; font-size: 0.875rem; }
.btn--large { min-height: 52px; padding: 14px 26px; font-size: 1rem; }

/* 헤더 */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); color: var(--header-ink); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: var(--header-shadow); }
.utility { font-size: 0.8125rem; background: var(--utility-bg); color: var(--utility-ink); }
.utility__inner { display: flex; justify-content: flex-end; align-items: center; gap: 24px; min-height: 36px; }
.utility__tel { font-weight: 600; text-decoration: none; color: var(--utility-accent); }
.lang { display: flex; gap: 16px; }
.lang a { text-decoration: none; letter-spacing: .02em; opacity: .75; }
.lang a[aria-current] { opacity: 1; font-weight: 700; }
.lang a:hover { opacity: 1; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; transition: min-height .2s; }
.is-scrolled .masthead__inner { min-height: 64px; }
.brand { display: block; line-height: 0; }
.brand img { width: 178px; height: auto; }
.brand__light { display: none; }
.gnb__list { display: flex; gap: 4px; }
.gnb__link { display: block; padding: 12px 16px; font-weight: 600; font-size: 1rem; text-decoration: none; }
.gnb__group { position: relative; }
.gnb__group > button::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.gnb__sub {
  display: none; position: absolute; left: 0; top: 100%; min-width: 220px; padding: 8px 0;
  background: var(--menu-bg); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--menu-shadow);
}
.gnb__group:hover > .gnb__sub, .gnb__group:focus-within > .gnb__sub, .gnb__group > button[aria-expanded="true"] + .gnb__sub { display: block; }
.gnb__sub a { display: block; padding: 9px 20px; text-decoration: none; font-size: 0.9375rem; white-space: nowrap; }
.gnb__sub a:hover { background: var(--quiet-bg); color: var(--action); }
.menu-toggle { display: none; width: 44px; height: 44px; position: relative; }
.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after { position: absolute; left: 11px; width: 22px; height: 2px; background: currentColor; content: ""; }
.menu-toggle__bar { top: 21px; }
.menu-toggle__bar::before { left: 0; top: -7px; }
.menu-toggle__bar::after { left: 0; top: 7px; }
@media (max-width: 1023px) {
  .gnb, .utility { display: none; }
  .menu-toggle { display: block; }
  .masthead__inner { min-height: 60px; }
  .brand img { width: 150px; }
}

/* 모바일 메뉴 */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(10, 16, 22, .5); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: min(88vw, 380px); overflow-y: auto; padding: 16px 20px 32px; background: #fff; color: var(--ink); }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.drawer__top .utility__tel { color: var(--action); }
.drawer__close { width: 44px; height: 44px; font-size: 28px; line-height: 1; }
.drawer__home, .drawer summary { display: flex; align-items: center; min-height: 52px; font-weight: 700; font-size: 1.0625rem; text-decoration: none; border-bottom: 1px solid var(--rule); cursor: pointer; list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; margin-left: auto; font-weight: 400; font-size: 1.375rem; color: var(--muted); }
.drawer details[open] summary::after { content: "−"; }
.drawer details ul { padding: 6px 0 10px 12px; border-bottom: 1px solid var(--rule); }
.drawer details a { display: block; padding: 8px 0; text-decoration: none; color: var(--muted); }
.lang--drawer { margin-top: 20px; font-size: 0.875rem; }

/* 공통 섹션 */
.section-title { font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; }
.section-head p { margin-top: 12px; color: var(--muted); max-width: 60ch; }

/* 메인 */
.hero__title { font-family: var(--font-display); font-weight: var(--display-weight); line-height: .95; letter-spacing: var(--display-tracking); font-size: clamp(3.25rem, 7.4vw, 6.75rem); }
.hero__lead { margin-top: 24px; font-size: clamp(1rem, 1.4vw, 1.1875rem); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.solutions, .services { padding-block: clamp(64px, 9vw, 120px); }
.plate__name { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.1; }
.plate__name a { text-decoration: none; }
.plate__name a:hover { color: var(--action); }
.plate__body p { margin-top: 12px; color: var(--muted); max-width: 52ch; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags a { display: inline-block; padding: 5px 12px; border: 1px solid var(--rule); border-radius: var(--radius); font-size: 0.875rem; text-decoration: none; color: var(--ink); }
.tags a:hover { border-color: var(--action); color: var(--action); }

.services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.service img { width: 100%; aspect-ratio: 450 / 260; object-fit: cover; }
.service h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; }
.service p { margin-top: 8px; color: var(--muted); }
.more { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--action); text-underline-offset: 4px; }
@media (max-width: 767px) { .services__grid { grid-template-columns: 1fr; } }

.cta { padding-block: clamp(56px, 7vw, 88px); background: var(--cta-bg); color: var(--cta-ink); }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta__title { font-size: clamp(1.75rem, 3.2vw, 2.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.cta__text p { margin-top: 10px; color: var(--cta-muted); max-width: 46em; }
@media (max-width: 767px) { .cta__inner { flex-direction: column; align-items: flex-start; } }
/* 개편 상담 띠(kr): 네이비 바탕 + 옅은 심볼, 소개 | 진행 절차 | 버튼 2개 */
.cta--v2 { position: relative; overflow: hidden; padding-block: clamp(40px, 5vw, 56px); background: #1B2A4A; }
.cta--v2::after { content: ""; position: absolute; right: -48px; bottom: -72px; width: 360px; height: 238px; background: url("../img/ci-symbol.437753da1068.svg") no-repeat center / contain; opacity: .07; pointer-events: none; }
.cta--v2 .cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; align-items: center; gap: 40px; }
.cta--v2 .cta__text p.cta__eyebrow { margin: 0; font-family: var(--font-display); font-size: .875rem; font-weight: 600; letter-spacing: .16em; color: var(--brand); }
.cta--v2 .cta__title { margin-top: 8px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.cta--v2 .cta__text p:not([class]) { max-width: none; font-size: .9375rem; color: #C9D2DE; }
.cta__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cta__steps li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; font-size: .9375rem; font-weight: 700; }
.cta__steps b { font-family: var(--font-display); font-size: .875rem; font-weight: 600; color: var(--brand); }
.cta__btns { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1099px) {
  .cta--v2 .cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 24px 32px; }
  .cta--v2 .cta__text { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .cta--v2 .cta__inner { grid-template-columns: minmax(0, 1fr); }
  .cta--v2 .cta__btns .btn { width: 100%; }
}

/* 푸터 */
.site-footer { padding-block: 48px 56px; background: var(--footer-bg); color: var(--footer-ink); font-size: 0.875rem; }
.site-footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 48px; align-items: start; }
.site-footer__brand img { width: 200px; height: auto; }
.company p { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.company p + p { margin-top: 4px; }
.footer-links { display: flex; gap: 10px; }
.footer-links a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--footer-rule); border-radius: 50%; }
.footer-links a:hover { border-color: var(--action); color: var(--action); }
.footer-links svg { width: 20px; height: 20px; }
@media (max-width: 1023px) { .site-footer__inner { grid-template-columns: 1fr; } }

/* 쿠키 안내 */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 360px; padding: 16px 18px; background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20, 30, 40, .12); font-size: 0.875rem; }
.cookie[hidden] { display: none; }
.cookie__actions { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 480px) { .cookie { left: 8px; right: 8px; bottom: 8px; max-width: none; } }

/* 이미지 확대 */
.zoom { max-width: min(1100px, 94vw); padding: 0; border: 0; border-radius: var(--radius); background: #fff; }
.zoom::backdrop { background: rgba(10, 16, 22, .75); }
.zoom figure { padding: 16px; }
.zoom figcaption { margin-top: 8px; font-size: 0.875rem; color: var(--muted); }
.zoom__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 28px; background: #fff; border-radius: 50%; }

/* 서브 페이지 */
.page-head__inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "crumbs crumbs" "title tools" "tabs tabs"; align-items: end; gap: 8px 24px; padding-top: 28px; }
.crumbs { grid-area: crumbs; font-size: 0.8125rem; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin: 0 8px; opacity: .5; }
.crumbs a { text-decoration: none; }
.page-head__title { grid-area: title; font-size: clamp(1.875rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.page-head__title span { font-family: var(--font-display); font-weight: 500; font-size: .55em; letter-spacing: 0; margin-left: 6px; color: var(--muted); }
.page-head__tools { grid-area: tools; display: flex; gap: 8px; flex-wrap: wrap; }
.siblings { grid-area: tabs; display: flex; gap: 4px; margin-top: 16px; overflow-x: auto; }
.siblings a { padding: 12px 20px; font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 767px) {
  .page-head__inner { grid-template-columns: 1fr; grid-template-areas: "crumbs" "title" "tools" "tabs"; }
}

.product { padding-block: clamp(48px, 7vw, 96px); }
.product__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.product__name { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.05; }
.product__name small { display: block; margin-top: 8px; font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0; color: var(--muted); }
.product__text > p { margin-top: 20px; max-width: 60ch; }
.benefit { margin-top: 28px; }
.benefit__label { font-size: 0.9375rem; font-weight: 800; }
.benefit ul { margin-top: 10px; display: grid; gap: 6px; }
.benefit li { position: relative; padding-left: 18px; }
.benefit li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; background: var(--brand); }
@media (max-width: 767px) { .product__inner { grid-template-columns: 1fr; gap: 28px; } }

.detail { padding-bottom: clamp(64px, 8vw, 112px); }
.tabbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tabs { display: flex; overflow-x: auto; }
.tabs [role="tab"] { padding: 14px 22px; font-weight: 700; white-space: nowrap; }
.panel { padding-top: 40px; }
.panel[hidden] { display: none; }
.panel__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
.panel__title:not(:first-child) { margin-top: 56px; }
.panel__lead { margin-top: 12px; max-width: 72ch; color: var(--muted); }
.diagram { display: block; margin-top: 28px; cursor: zoom-in; }
.diagram img { margin-inline: auto; }
.notes { margin-top: 28px; display: grid; gap: 8px; }
.notes div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; }
.notes dt { font-weight: 700; }
@media (max-width: 480px) { .notes div { grid-template-columns: 1fr; gap: 0; } }

.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.module h4 { font-size: 1.0625rem; font-weight: 800; }
.module ul { margin-top: 10px; font-size: 0.9375rem; color: var(--muted); display: grid; gap: 2px; }
@media (max-width: 1023px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .modules { grid-template-columns: 1fr; } }

.screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; margin-top: 28px; }
.screens a { display: block; cursor: zoom-in; }
.screens img { width: 100%; aspect-ratio: 450 / 250; object-fit: cover; border: 1px solid var(--rule); }
.screens h4 { margin-top: 10px; font-size: 0.9375rem; font-weight: 600; }
@media (max-width: 1023px) { .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.metrics__num { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: 1; font-variant-numeric: tabular-nums; }
.metrics__num em { font-style: normal; font-size: .45em; margin-left: 2px; }
.metrics h4 { margin-top: 12px; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; }
@media (max-width: 1023px) { .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; } }
@media (max-width: 480px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.effects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.effects h4 { font-size: 1.125rem; font-weight: 800; }
.effects ul { margin-top: 12px; columns: 2; column-gap: 24px; }
.effects li { padding: 6px 0; break-inside: avoid; border-bottom: 1px solid var(--rule); }
@media (max-width: 767px) { .effects { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .effects ul { columns: 1; } }

/* 동작 줄이기: 흐름도(svg.mesflow)·1일 컨설팅 애니메이션(.hs-ca)은 제외 — 애니메이션 효과를 꺼 둔 방문자에게도 움직이게(사용자 요청 2026-09-28, 2026-10-22) */
@media (prefers-reduced-motion: reduce) {
  :not(.mesflow, .mesflow *, .hs-ca, .hs-ca *), ::before, ::after { animation: none !important; transition: none !important; }
}


.site-header { border-bottom: 1px solid var(--rule); }
.gnb__link:hover, .gnb__group:hover > button { color: var(--action); }
.gnb__sub { border-top: 3px solid var(--brand); }

/* 히어로: 좌측 문구 + 우측 액자형 이미지(원본 1200px을 늘리지 않는다) */
.hero { background: var(--paper); padding-block: clamp(48px, 7vw, 104px); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__text { position: relative; padding-left: 36px; }
.hero__text::before {  /* 신호 막대 — 페이지의 유일한 굵은 장식 */
  content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: calc(100% - 6px);
  background: linear-gradient(var(--brand) 0 42%, transparent 42% 46%, var(--brand) 46% 100%);
  transform-origin: top; animation: signal .9s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes signal { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hero__title { color: var(--ink); }
.hero__lead { color: var(--muted); }
.hero__actions .btn--ghost { color: var(--ink); border-color: var(--ink); }
.hero__actions .btn--ghost:hover { background: var(--ink); color: #fff; }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius); box-shadow: 0 1px 0 var(--rule); }
@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__text { padding-left: 24px; }
  .hero__text::before { width: 8px; }
}

/* 솔루션: 설비 명판처럼 가로로 긴 줄 — 카드 격자 대신 */
.solutions .section-title--latin { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: 0; }
.plates { margin-top: 40px; border-bottom: 1px solid var(--rule); }
.plate { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: 28px; border-top: 1px solid var(--rule); }
.plate__media img { width: 100%; aspect-ratio: 458 / 285; object-fit: contain; }
.plate__name { font-size: clamp(2rem, 3.6vw, 2.875rem); }
@media (max-width: 767px) {
  .plate { grid-template-columns: 1fr; gap: 12px; }
  .plate__media { max-width: 320px; }
}

/* 서비스 */
.services { background: var(--paper); }
.service { background: var(--surface); border: 1px solid var(--rule); }
.service__body { padding: 24px 28px 28px; }

/* 서브 페이지 */
.page-head { background: var(--paper); border-bottom: 1px solid var(--rule); }
.page-head .btn--quiet { background: var(--surface); border: 1px solid var(--rule); }
.siblings { margin-bottom: -1px; }
.siblings a { color: var(--muted); border-bottom: 3px solid transparent; }
.siblings a:hover { color: var(--ink); }
.siblings a[aria-current] { color: var(--ink); border-bottom-color: var(--brand); }
@media (max-width: 479px) { .siblings { gap: 0; } .siblings a { padding: 12px 11px; } } /* 솔루션 탭이 5개(AI Agent 추가)라도 휴대폰 폭에 모두 보이게 */
.product__img { width: 100%; aspect-ratio: 458 / 285; object-fit: contain; }
.benefit__label { color: var(--ink); }

.tabbar { border-bottom: 1px solid var(--rule); align-items: center; }
.cols + .tabbar:not(.feats-head) { margin-top: 32px; } /* 소개 글이 왼쪽 그림보다 길어져도 탭·버튼과 붙지 않게 */
.tabs [role="tab"] { color: var(--muted); border-bottom: 3px solid transparent; }
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }

.diagram img { border: 1px solid var(--rule); }
.notes { padding: 20px 24px; background: var(--paper); border-left: 4px solid var(--brand); }

.module { padding: 20px 22px; border: 1px solid var(--rule); border-top: 3px solid var(--ink); }
.metrics { border-block: 1px solid var(--rule); padding-block: 28px; }
.metrics__num { color: var(--brand); }
.metrics__num em { color: var(--ink); }
.effects section { padding: 24px 26px; background: var(--paper); }

.site-footer { border-top: 1px solid var(--rule); }
.site-footer__brand .brand__light { display: none; }

/* ===== 언어별 글꼴 ===== */
html[lang="zh-CN"] body { --font-body: "Noto Sans SC", "Pretendard Variable", "PingFang SC", "Microsoft YaHei", sans-serif; word-break: normal; line-break: strict; }
html[lang="en"] body { word-break: normal; }

/* ===== 변환된 본문(원본 콘텐츠) ===== */
.block { padding-block: clamp(40px, 6vw, 80px); }
.block + .block { padding-top: 0; }
.block--map { padding: 0; }
.block h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.block h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; }
.block h4 { font-size: 1.0625rem; font-weight: 700; line-height: 1.45; }
.block h2 + *, .block h3 + *, .block h4 + * { margin-top: 12px; }
.block p + p, .block p + ul, .block ul + p, .block p + .cols, .block .cols + p { margin-top: 14px; }
.block * + h2, .block * + h3 { margin-top: 40px; }
.block * + h4 { margin-top: 24px; }
.block p { max-width: 78ch; }
.block .center, .block .center p { text-align: center; margin-inline: auto; }
.block .left { text-align: left; }
.block .lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--muted); }
.block ul:not([class]) { display: grid; gap: 4px; }
.block ul:not([class]) > li { position: relative; padding-left: 16px; }
.block ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; background: var(--brand); }
.block ol:not([class]) { padding-left: 1.4em; list-style: decimal; }
.block a:not(.btn) { color: var(--action); text-underline-offset: 3px; }
.block header { margin-bottom: 32px; }
.block header.center, .block header .center { text-align: center; }
.i { font-style: normal; font-weight: 500; font-size: .6em; color: var(--muted); letter-spacing: 0; }
.block h2 .i { display: inline-block; margin-left: 6px; font-family: var(--font-body); }

.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px clamp(12px, 2.4vw, 32px); align-items: start; } /* 12칸 간격 합이 좁은 화면 폭을 넘지 않게 */
.cols + .cols { margin-top: 32px; }
.cols > :not(.col) { grid-column: 1 / -1; } /* 칸(col) 없이 격자에 바로 들어온 요소는 한 줄 전체 */
.col { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) {
  .span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
  .span-9 { grid-column: span 9; } .span-10 { grid-column: span 10; } .span-11 { grid-column: span 11; } .span-12 { grid-column: span 12; }
}
@media (min-width: 560px) and (max-width: 767px) { .span-2, .span-3, .span-4 { grid-column: span 6; } }

.figure { margin: 0; }
.block p.figure--wide { max-width: none; } /* 글자가 작은 가로형 도식은 본문 글줄 폭(78ch)을 넘어 패널 폭 전체를 쓴다 */
.block p.figure--wide img { width: 100%; }
.block p.text--full { max-width: none; }
.block .figure--wide + h3 { margin-top: 56px; } /* .figure + * (20px)가 h3의 40px를 덮어쓰므로 큰 도식 뒤 소제목은 따로 띄운다 */
.block .figure--wide + h4 { margin-top: 72px; }
.figure img, .block picture img { margin-inline: auto; }
.block .figure + * { margin-top: 20px; }
.thumb img { border: 1px solid var(--rule); }
.caption { margin-top: 8px; font-size: .9375rem; font-weight: 600; }
.subtitle { padding-left: 14px; border-left: 4px solid var(--brand); }
.heading { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }

.badge { display: inline-block; padding: 1px 9px; margin-right: 6px; border-radius: var(--radius); background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; vertical-align: 2px; line-height: 1.6; }

.boxlist { height: 100%; padding: 22px 24px; background: var(--paper); border-top: 3px solid var(--ink); }
.boxlist h4 { margin-top: 0; }
.boxlist hr { border: 0; border-top: 1px solid var(--rule); margin: 12px 0; }
.boxlist ul { display: grid; gap: 2px; }
.boxlist li { padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.boxlist li:last-child { border-bottom: 0; }
.software ul li::before { display: none; }

/* 소프트웨어 모듈 맵 — 아키텍처 SVG와 같은 색·카드·선 아이콘(생산 흐름 6단계 / fastMES Core / 기반·지원) */
.modmap { --mm-navy: #1B2A4A; --mm-red: #D7262C; --mm-line: #D9DEE5; --mm-gray: #5A6472; --mm-arrow: #8A94A3;
  margin-top: 24px; padding: clamp(16px, 2.4vw, 28px); background: #F5F7FA; border-radius: 10px; }
.block .modmap p.modmap__label { margin: 0 0 12px; font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--mm-gray); }
.block .modmap .modmap__flow + p.modmap__label { margin-top: 28px; }
.modmap__flow, .modmap__base { display: grid; gap: 16px; }
.modmap__flow { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 24px; }
.modmap__flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* 컨설팅 프로세스 5단계 */
.modmap__flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 1일 컨설팅 진행 절차 4단계 */
.modmap__flow > .modmap__card { padding-inline: 14px; } /* 6열 카드는 좁아 좌우 여백을 조금 줄여 항목이 한 줄에 들어가게 */
.modmap__base { grid-template-columns: 2fr 1fr 1fr; }
.modmap__base--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 기반 모듈 4개(반도체MES) */
.modmap__card { position: relative; display: flex; flex-direction: column; padding: 16px 16px 14px; background: #fff; border: 1px solid var(--mm-line); border-radius: 8px; box-shadow: 0 2px 6px rgba(27, 42, 74, .07); }
.modmap__flow > .modmap__card:not(:last-child)::after { /* 단계 사이 꺾쇠 */
  content: ""; position: absolute; top: 31px; right: -17px; width: 9px; height: 9px;
  border-top: 2px solid var(--mm-arrow); border-right: 2px solid var(--mm-arrow); transform: rotate(45deg); }
.modmap__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--mm-line); }
.block .modmap__head > * { margin: 0; }
.block .modmap__head h4 { font-size: 1rem; line-height: 1.35; color: var(--mm-navy); }
.modmap__flow .modmap__head { flex-wrap: wrap; row-gap: 12px; }
.block .modmap__flow .modmap__head h4 { order: 3; flex-basis: 100%; } /* 흐름 카드는 폭이 좁아 아이콘·번호 아래 줄에 모듈명 */
.modmap__step { margin-left: auto; font-family: var(--font-display); font-size: .8125rem; font-weight: 600; color: var(--mm-arrow); }
.modmap__ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: var(--mm-navy); }
.modmap__ico svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.modmap__items { display: grid; gap: 2px; }
.modmap__items li { position: relative; padding: 3px 0 3px 13px; font-size: .9375rem; line-height: 1.45; color: #2B3440; }
.modmap__items li::before { content: ""; position: absolute; left: 0; top: .78em; width: 5px; height: 5px; border-radius: 50%; background: var(--mm-arrow); }
.modmap__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.modmap__chips li { padding: 4px 11px; font-size: .875rem; line-height: 1.45; color: #2B3440; background: #F5F7FA; border: 1px solid var(--mm-line); border-radius: 6px; }
.block .modmap .modmap__devs { display: flex; flex-wrap: wrap; gap: 4px; max-width: none; margin-top: auto; padding-top: 12px; } /* 사용 단말 배지는 카드 맨 아래 */
.modmap__devs span:not(.sr-only) { padding: 1px 7px; border-radius: 4px; background: #EAEEF3; color: var(--mm-navy); font-size: .75rem; font-weight: 600; line-height: 1.6; }

/* 사용 환경(단말) — 4칸, 아래 Core 띠로 연결선 */
.modmap__clients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.modmap__client { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--mm-line); border-radius: 8px; box-shadow: 0 2px 6px rgba(27, 42, 74, .07); }
.modmap__client::after { content: ""; position: absolute; left: 50%; bottom: -27px; width: 2px; height: 26px; background: var(--mm-arrow); }
.modmap__dev { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #F5F7FA; border: 1px solid var(--mm-line); }
.modmap__dev svg { width: 22px; height: 22px; fill: none; stroke: var(--mm-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.block .modmap__client h4 { font-size: 1rem; line-height: 1.4; color: var(--mm-navy); }
.modmap__who { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 4px; background: #EAEEF3; color: var(--mm-gray); font-size: .75rem; font-weight: 600; line-height: 1.6; vertical-align: 1px; }
.block .modmap__client p { margin-top: 4px; font-size: .875rem; line-height: 1.5; color: var(--mm-gray); }
.modmap__client p span { white-space: nowrap; } /* 줄바꿈은 " · " 자리에서만 */

.modmap__core { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; margin: 28px 0 24px; padding: 14px 24px; border-radius: 8px; background: var(--mm-red); color: #fff; box-shadow: 0 2px 8px rgba(215, 38, 44, .22); } /* 아키텍처 그림의 fastMES 서버 상자와 같은 빨강 */
.modmap__core-name { display: flex; align-items: center; gap: 10px; }
.modmap__core .modmap__ico { width: 30px; height: 30px; background: rgba(255, 255, 255, .18); }
.modmap__core strong { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: .02em; }
.block .modmap__core p { margin: 0; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .4); font-size: .9375rem; font-weight: 500; }
.modmap__pill { padding: 3px 12px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.modmap__badge { padding: 2px 10px; border-radius: 999px; background: #fff; color: var(--mm-red); font-size: .75rem; font-weight: 700; line-height: 1.6; } /* Core 띠의 '자체 개발' 표시 */

/* HiMB 데이터 연계 구성도: 연계 시스템 줄, 핵심 시나리오(단계 흐름), 교차 지표, 부서 연계 */
.modmap__sources { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.modmap__sources li { position: relative; padding: 12px 8px; text-align: center; background: #fff; border: 1px solid var(--mm-line); border-radius: 8px; box-shadow: 0 2px 6px rgba(27, 42, 74, .07); }
.modmap__sources li::after { content: ""; position: absolute; left: 50%; bottom: -27px; width: 2px; height: 26px; background: var(--mm-arrow); } /* 사용 환경 칸처럼 Core 띠로 연결선 */
.modmap__sources strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--mm-navy); } /* 글자 크기는 사용 환경 칸(.modmap__client)과 같게 */
.modmap__sources span { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.5; color: var(--mm-gray); }
.modmap__devs span.modmap__devs-label { padding: 1px 2px 1px 0; background: none; color: var(--mm-gray); font-weight: 600; }
.block .modmap .modmap__base + p.modmap__label, .block .modmap .modmap__scen + p.modmap__label { margin-top: 28px; }

.modmap__scen { padding: 18px 20px 20px; background: #fff; border: 1px solid var(--mm-line); border-radius: 8px; box-shadow: 0 2px 6px rgba(27, 42, 74, .07); }
.modmap__scen + .modmap__scen { margin-top: 16px; }
.modmap__scen-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--mm-line); } /* 모듈 카드 머리(.modmap__head)와 같은 모양 */
.block .modmap__scen-head > * { margin: 0; }
.block .modmap__scen-head h4 { font-size: 1rem; line-height: 1.35; color: var(--mm-navy); }
.modmap__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; margin-top: 16px; }
.modmap__steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #F5F7FA; border: 1px solid var(--mm-line); border-radius: 8px; }
.modmap__steps li:not(:last-child)::after { /* 단계 사이 꺾쇠 */
  content: ""; position: absolute; top: 50%; right: -19px; width: 9px; height: 9px; margin-top: -5px;
  border-top: 2px solid var(--mm-arrow); border-right: 2px solid var(--mm-arrow); transform: rotate(45deg); }
.modmap__steps strong { font-size: .9375rem; line-height: 1.45; color: var(--mm-navy); } /* 모듈 카드 항목과 같은 크기 */
.modmap__steps li > span:last-child { font-size: .875rem; line-height: 1.45; color: var(--mm-gray); }
.modmap__sys { align-self: flex-start; margin-bottom: 4px; padding: 1px 8px; border-radius: 4px; background: var(--mm-navy); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.6; }
.modmap__sys--core { background: var(--mm-red); }
.modmap__outcome { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.modmap__outcome div { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border-left: 3px solid var(--mm-red); background: #FDF3F3; border-radius: 0 6px 6px 0; }
.modmap__outcome dt { flex: none; font-size: .8125rem; font-weight: 700; color: var(--mm-red); }
.modmap__outcome dd { font-size: .9375rem; font-weight: 600; color: var(--mm-navy); }

.block .modmap p.modmap__q { margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: #2B3440; }
.block .modmap p.modmap__act { margin: 8px 0 0; font-size: .875rem; color: var(--mm-gray); }
.modmap__act span { margin-right: 8px; font-weight: 700; color: var(--mm-red); }

.modmap__depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.modmap__depts li { display: grid; gap: 2px; padding: 14px 16px; background: #fff; border: 1px solid var(--mm-line); border-radius: 8px; }
.modmap__depts strong { font-size: 1rem; color: var(--mm-navy); }
.modmap__depts span { font-size: .875rem; line-height: 1.45; color: var(--mm-gray); }
.modmap__depts em { font-style: normal; font-size: .9375rem; font-weight: 600; color: #2B3440; }
.modmap__depts em::before { content: "→ "; color: var(--mm-red); }
.block .modmap p.modmap__share { max-width: none; margin: 14px 0 0; font-size: .875rem; font-weight: 600; color: var(--mm-gray); text-align: center; }

/* AI Agent MESIA 처리 구성도: 입력 채널(5칸) → Core → 연계 데이터(위로 연결선), 일반 방식 비교, 운영 환경 */
.modmap__sources--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.modmap__sources--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modmap__core + .modmap__sources--up { margin-top: 28px; } /* Core 아래 여백(24)과 겹쳐 28 — 위쪽 줄과 같은 연결선 길이 */
.modmap__sources--up li::after { top: -27px; bottom: auto; }
.modmap__sources--plain li::after { display: none; }.block .modmap p.modmap__label--after { margin: 10px 0 0; }
.block .modmap .modmap__label--after + p.modmap__label, .block .modmap .modmap__compare + p.modmap__label { margin-top: 28px; }
.modmap__compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.modmap__compare > div { padding: 16px 20px 18px; background: #fff; border: 1px solid var(--mm-line); border-radius: 8px; }
.block .modmap__compare h4 { margin: 0 0 10px; padding-bottom: 10px; font-size: 1rem; color: var(--mm-gray); border-bottom: 1px solid var(--mm-line); }
.modmap__compare > .modmap__compare-ours { border-top: 3px solid var(--mm-red); box-shadow: 0 2px 6px rgba(27, 42, 74, .07); }
.block .modmap__compare-ours h4 { color: var(--mm-red); }

/* 마지막 탭 '기능 · 효과': 운영 화면 + 핵심 기능 카드(2열), 도입 전·후 비교표 */
.modmap__feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.block .modmap .modmap__feats + p.modmap__label { margin-top: 28px; } /* 카드 묶음이 둘 이상일 때(AI Agent 현장 운영·지식 협업) */
.modmap__feats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* HiMB: 영역마다 현황판 3장 */
/* HiMB 활용 환경: 사진 + 장소 이름 */
.modmap__uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.modmap__uses img { display: block; width: 100%; height: auto; aspect-ratio: 846 / 460; object-fit: cover; border-radius: 6px; }
.modmap__uses span { display: block; margin-top: 8px; font-size: .9375rem; font-weight: 600; text-align: center; color: var(--mm-navy); }
/* AI Agent 기능 카드: 대화·알림·일정 보드 예시 화면(HTML로 그린 목업) */
.aiview { display: flex; flex: 1 0 auto; flex-direction: column; gap: 7px; min-height: 270px; /* 늘어나서 나란한 두 카드의 제목 줄을 맞춘다 */ margin-bottom: 14px; padding: 10px 12px 12px; background: #fff; border: 1px solid var(--mm-line); border-radius: 6px; font-size: .8125rem; line-height: 1.45; color: var(--mm-navy); }
.block .modmap .aiview p { max-width: none; margin: 0; }
.block .modmap .aiview__bar { margin: 0 -12px 2px; padding: 0 12px 8px; border-bottom: 1px solid var(--mm-line); font-size: .75rem; font-weight: 700; color: var(--mm-gray); }
.aiview__bar::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--mm-red); vertical-align: 1px; }
.aiview__sys { align-self: center; padding: 2px 10px; border: 1px dashed var(--mm-arrow); border-radius: 12px; font-size: .75rem; color: var(--mm-gray); }
.aiview__msg { max-width: 88%; padding: 6px 10px; border-radius: 10px; }
.aiview__msg--user { align-self: flex-end; background: var(--mm-navy); color: #fff; border-bottom-right-radius: 3px; }
.aiview__msg--ai { align-self: flex-start; background: #EEF1F5; border-bottom-left-radius: 3px; }
.aiview__msg strong { color: var(--mm-red); }
.aiview__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.aiview__chips span { padding: 0 6px; background: #fff; border: 1px solid var(--mm-line); border-radius: 4px; font-size: .6875rem; font-weight: 600; line-height: 1.7; color: var(--mm-navy); }
.aiview__push { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; background: #FDF7F7; border: 1px solid #F1D3D4; border-left: 3px solid var(--mm-red); border-radius: 6px; }
.aiview__push > span:not([class]) { color: #2B3440; }
.aiview__btns { display: flex; gap: 6px; margin-top: 6px; }
.aiview__btn { padding: 1px 10px; background: var(--mm-red); border: 1px solid var(--mm-red); border-radius: 4px; font-size: .75rem; font-weight: 700; color: #fff; }
.aiview__btn--line { background: #fff; color: var(--mm-red); }
.aiview__ir { display: flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; }
.aiview__ir span { padding: 0 6px; background: #EAEEF3; border-radius: 4px; font-size: .6875rem; font-weight: 600; line-height: 1.7; color: var(--mm-navy); }
.aiview__ir span:first-child { background: var(--mm-navy); color: #fff; } /* MESIA가 질문을 지표·차원·기간으로 해석한 결과 */
.aiview__via { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); font-size: .6875rem; font-weight: 700; } /* 사진·음성 보고 표시 */
.aiview__alert { padding: 5px 9px; background: #FDF7F7; border: 1px solid #F1D3D4; border-radius: 6px; font-weight: 700; color: var(--mm-red); }
.aiview__cap { font-size: .6875rem; font-weight: 700; color: var(--mm-gray); }
/* 일정 보드 한 줄: 수주 번호 + 공정 막대(완료·진행·예정·지연) */
.aiview__gantt { display: flex; gap: 3px; }
.aiview__gantt-id { flex: 0 0 54px; align-self: center; font-size: .6875rem; font-weight: 700; color: var(--mm-gray); }
.aiview__seg { flex: 1 1 0; min-width: 0; padding: 2px 6px; overflow: hidden; background: #F5F7FA; border: 1px solid var(--mm-line); border-radius: 4px; font-size: .6875rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--mm-gray); }
.aiview__seg--2 { flex-grow: 2; }
.aiview__seg--done { background: #E6F4EA; border-color: #BFE3C8; color: #1E6B34; }
.aiview__seg--now { background: var(--mm-navy); border-color: var(--mm-navy); color: #fff; }
.aiview__seg--late { background: repeating-linear-gradient(135deg, #FBE3E4 0 6px, #FDF7F7 6px 12px); border-color: var(--mm-red); color: var(--mm-red); }
/* AI 조치 제안·수주 검토 대안 */
.aiview__opts { display: grid; gap: 4px; }
.aiview__msg .aiview__opts { margin-top: 6px; }
.aiview__opts li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; background: #fff; border: 1px solid var(--mm-line); border-radius: 6px; font-weight: 600; }
.aiview__opts em { flex: none; font-size: .6875rem; font-style: normal; font-weight: 700; color: #1E6B34; }
.aiview__opts em.aiview__warn { color: var(--mm-red); }
/* 설비 이력 카드 */
.aiview__kv div { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--mm-line); }
.aiview__kv dt { flex: 0 0 60px; font-weight: 600; color: var(--mm-gray); }
.aiview__kv dd { margin: 0; }
.aiview__log { display: grid; gap: 3px; }
.aiview__log li { display: flex; align-items: baseline; gap: 6px; }
.aiview__tag { flex: none; padding: 0 5px; background: #E6F4EA; border-radius: 3px; font-size: .6875rem; font-weight: 700; line-height: 1.6; color: #1E6B34; }
.aiview__tag--open { background: #FBE3E4; color: var(--mm-red); }
.modmap__feat { display: flex; flex-direction: column; padding: 14px 16px; background: #fff; border: 1px solid var(--mm-line); border-radius: 8px; box-shadow: 0 2px 6px rgba(27, 42, 74, .07); }
.block .modmap__feat .modmap__head h4 { flex: 1; } /* 단계 번호를 오른쪽 끝으로 */
.block .modmap p.modmap__shot { max-width: none; margin: 0 0 14px; }
.modmap__shot img { width: 100%; aspect-ratio: 450 / 250; object-fit: cover; border: 1px solid var(--mm-line); border-radius: 4px; }
/* MES·WMS·HMI 기능 카드 화면: 캡처 대신 HTML로 그린 대시보드(캡처와 같은 9:5 비율, 내용이 넘치면 늘어남) */
.mock { display: flex; flex: 1 0 auto; /* 나란한 카드의 제목 줄을 맞춘다 */ flex-direction: column; gap: 8px; aspect-ratio: 9 / 5; margin-bottom: 14px; padding: 10px 12px 12px; background: #fff; border: 1px solid var(--mm-line); border-radius: 6px; font-size: .8125rem; line-height: 1.4; color: var(--mm-navy); }
.block .modmap .mock p { max-width: none; margin: 0; }
.block .modmap .mock__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 -12px; padding: 0 12px 8px; border-bottom: 1px solid var(--mm-line); font-size: .75rem; font-weight: 700; color: var(--mm-gray); }
.mock__bar > span:first-child { flex: none; white-space: nowrap; }
.mock__meta { min-width: 0; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; } /* 좁은 폭에서는 보조 정보를 말줄임 */
.mock__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mock__kpis li { display: flex; flex-direction: column; padding: 5px 10px; background: #F5F7FA; border-radius: 6px; }
.mock__kpis span { font-size: .6875rem; font-weight: 600; color: var(--mm-gray); }
.mock__kpis strong { font-size: 1.1875rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.mock__kpis small { margin: 0 2px 0 1px; font-size: .75rem; font-weight: 600; color: var(--mm-gray); }
/* 가동 타임라인: 라인 이름 | 구간 막대(SVG, 가로 540 = 08~17시 분) | 가동률 */
.mock__tl { display: grid; gap: 5px; }
.mock__tl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 34px; align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; }
.mock__tl-row svg { display: block; width: 100%; height: 12px; border-radius: 2px; }
.mock__tl-row em { font-style: normal; font-weight: 700; text-align: right; }
.mock__tl-row em.is-low { color: var(--mm-red); }
.block .modmap .mock__ticks { display: flex; justify-content: space-between; margin: -2px 42px 0 48px; font-size: .6875rem; color: var(--mm-arrow); }
.seg-run { fill: #3DAA6A; } .seg-setup { fill: #F0A93B; } .seg-rest { fill: #B8C0CC; } .seg-wait { fill: var(--mm-red); } .seg-idle { fill: #E3E7ED; }
.mock__legend { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .6875rem; color: var(--mm-gray); }
.mock__legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
.k-run::before { background: #3DAA6A; } .k-setup::before { background: #F0A93B; } .k-rest::before { background: #B8C0CC; } .k-wait::before { background: var(--mm-red); } .k-idle::before { background: #D3D9E1; }
.k-done::before { background: #BFE3C8; } .k-now::before { background: var(--mm-navy); } .k-plan::before { background: #DDE2E9; } .k-a::before { background: var(--mm-navy); } .k-b::before { background: #8A94A3; }
.mock__legend .k-unit { margin-left: auto; } .mock__legend .k-unit::before { display: none; }
.mock__kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mock__kpis--sm { gap: 6px; } .mock__kpis--sm li { padding: 4px 8px; } .mock__kpis--sm strong { font-size: 1rem; } /* Wafer Map 옆 좁은 칸 */
/* 이름 | 진척·수량 막대(SVG) | 값 [| 상태] */
.mock__rows { display: grid; flex: 1 0 auto; align-content: space-evenly; gap: 6px; } /* 남는 높이에 행을 고르게 */
.mock__rows li { display: grid; grid-template-columns: 84px minmax(0, 1fr) 46px; align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; }
.mock__rows--chip li { grid-template-columns: 84px minmax(0, 1fr) 38px 34px; }
.mock__rows li > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mock__rows svg { display: block; width: 100%; height: 10px; border-radius: 2px; }
.mock__rows em { white-space: nowrap; font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.mock .trk { fill: #EAEEF3; } .mock .bar { fill: var(--mm-navy); } .mock .bar-b { fill: #8A94A3; } .mock .bar-done { fill: #3DAA6A; }
.mock__chip { padding: 0 4px; background: #EAEEF3; border-radius: 3px; font-size: .6875rem; font-weight: 700; line-height: 1.6; text-align: center; }
.mock__chip.is-done { background: #E6F4EA; color: #1E6B34; } .mock__chip.is-lock { background: #FBE3E4; color: var(--mm-red); }
/* 설비별 간트: 30분 단위 칸 수만큼 flex 비율(f1~f8), 08~17시 */
.mock__gt { position: relative; display: grid; gap: 8px; margin-top: 4px; }
.mock__gt-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; }
.mock__gt-row > span { white-space: nowrap; }
.block .modmap .mock__gt-track { display: flex; gap: 2px; height: 26px; }
.mock__gt-track i { flex: 1 1 0; min-width: 0; overflow: hidden; padding: 0 5px; border-radius: 3px; font-size: .6875rem; font-style: normal; font-weight: 700; line-height: 26px; white-space: nowrap; }
.mock__gt-track .f1 { flex-grow: 1; } .mock__gt-track .f2 { flex-grow: 2; } .mock__gt-track .f3 { flex-grow: 3; } .mock__gt-track .f4 { flex-grow: 4; } .mock__gt-track .f5 { flex-grow: 5; } .mock__gt-track .f6 { flex-grow: 6; } .mock__gt-track .f7 { flex-grow: 7; } .mock__gt-track .f8 { flex-grow: 8; }
.b-done { background: #E6F4EA; color: #1E6B34; } .b-now { background: var(--mm-navy); color: #fff; } .b-plan { background: #EAEEF3; color: var(--mm-gray); } .b-setup { background: #F0A93B; } .b-empty { visibility: hidden; }
.mock__gt-now { position: absolute; top: -3px; bottom: 14px; left: calc(70px + (100% - 70px) * .6667); width: 2px; background: var(--mm-red); } /* 현재 시각 14시 */
.block .modmap .mock__ticks--gt { margin: -2px 0 0 70px; }
/* 시간대별 막대 */
.mock__bars { display: block; width: 100%; height: 84px; }
.mock__bars .bv { fill: var(--mm-navy); } .mock__bars .bv-sel { fill: var(--mm-red); } .mock__bars .bv-low { fill: #B8C0CC; } .mock__bars .bv-now { fill: #C9D3E0; }
.mock__bars .tgt { fill: none; stroke: var(--mm-red); stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.block .modmap .mock__hours { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: 3px; font-size: .6875rem; text-align: center; color: var(--mm-arrow); }
.block .modmap .mock__note { padding: 4px 8px; background: #F5F7FA; border-left: 3px solid var(--mm-red); border-radius: 0 4px 4px 0; font-size: .75rem; color: #2B3440; }
.mock__note b { margin-right: 6px; color: var(--mm-red); }
/* LOT 추적 트리: 자재 → 제품 LOT → 출하, 칸 사이 연결선은 SVG */
.mock__seg { display: inline-flex; padding: 2px; background: #EAEEF3; border-radius: 5px; }
.mock__seg span { padding: 0 8px; border-radius: 4px; font-size: .6875rem; line-height: 1.6; }
.mock__seg .is-on { background: var(--mm-navy); color: #fff; }
.block .modmap .mock__lot-hd, .mock__lot { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); }
.block .modmap .mock__lot-hd { margin-bottom: -4px; font-size: .6875rem; font-weight: 600; color: var(--mm-gray); }
.mock__lot-hd span:nth-child(2) { grid-column: 3; } .mock__lot-hd span:nth-child(3) { grid-column: 5; }
.mock__lot { flex: 1 0 auto; min-height: 126px; }
.mock__lot-col { display: flex; flex-direction: column; justify-content: space-around; min-width: 0; } /* 칸 높이를 노드 수로 나눠 중심이 SVG 연결선(1/6·1/2·5/6, 1/4·3/4)과 맞는다 */
.mock__lot svg { display: block; width: 100%; height: 100%; }
.mock__lot .lk { fill: none; stroke: var(--mm-arrow); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.block .modmap .mock__node { padding: 3px 7px; background: #F5F7FA; border: 1px solid var(--mm-line); border-radius: 5px; font-size: .6875rem; line-height: 1.35; }
.mock__node strong, .mock__node span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mock__node strong { font-size: .75rem; }
.mock__node span { color: var(--mm-gray); }
.block .modmap .mock__node--main { background: var(--mm-navy); border-color: var(--mm-navy); color: #fff; }
.mock__node--main span { color: #C9D2E0; }
/* 반도체: 그림(Wafer Map·캐리어) | 정보 2단 */
.mock__split { display: grid; flex: 1 0 auto; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.mock__side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mock__wafer { display: block; width: 148px; height: 148px; }
.mock__wafer .w-disc { fill: #F5F7FA; stroke: #B8C0CC; stroke-width: 1; }
.mock__wafer .w-g { fill: #3DAA6A; } .mock__wafer .w-b2 { fill: #F0A93B; } .mock__wafer .w-b7 { fill: var(--mm-red); }
.mock__wafer .w-notch { fill: #fff; stroke: #B8C0CC; stroke-width: 1; }
.mock__wafer .w-cross { fill: none; stroke: var(--mm-navy); stroke-width: .6; stroke-dasharray: 2 2; opacity: .6; }
.mock__wafer .w-sel { fill: none; stroke: var(--mm-navy); stroke-width: 1.4; }
.mock__foup { display: block; width: 64px; height: 134px; }
.mock__foup .f-box { fill: #F5F7FA; stroke: #B8C0CC; stroke-width: 1; }
.f-done { fill: var(--mm-navy); } .f-now { fill: var(--mm-red); } .f-wait { fill: #D3D9E1; } .f-split { fill: #F0A93B; }
.k-fdone::before { background: var(--mm-navy); } .k-fnow::before { background: var(--mm-red); } .k-fwait::before { background: #D3D9E1; } .k-fsplit::before { background: #F0A93B; }
/* Route 단계 */
.mock__route { display: flex; gap: 14px; }
.mock__route li { position: relative; flex: 1 1 0; min-width: 0; padding: 3px 0; background: #EAEEF3; border-radius: 4px; font-size: .6875rem; font-weight: 700; text-align: center; color: var(--mm-gray); }
.mock__route li:not(:last-child)::after { content: "›"; position: absolute; right: -11px; top: 2px; color: var(--mm-arrow); }
.mock__route .is-done { background: #E6F4EA; color: #1E6B34; } .mock__route .is-now { background: var(--mm-navy); color: #fff; }
.mock__kv { display: grid; gap: 2px; }
.mock__kv div { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--mm-line); font-size: .75rem; }
.mock__kv dt { flex: 0 0 48px; font-weight: 600; color: var(--mm-gray); }
.mock__kv dd { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-weight: 600; }
.block .modmap .mock__btns { display: flex; gap: 6px; }
.mock__btns span { padding: 1px 10px; background: #fff; border: 1px solid var(--mm-line); border-radius: 4px; font-size: .6875rem; font-weight: 700; }
.mock__btns .is-main { background: var(--mm-navy); border-color: var(--mm-navy); color: #fff; } .mock__btns .is-warn { border-color: var(--mm-red); color: var(--mm-red); }
/* 추적 경로 · 공정 이력 */
.block .modmap .mock__path { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .6875rem; font-weight: 700; }
.mock__path span { position: relative; padding: 1px 8px; background: #EAEEF3; border-radius: 4px; }
.mock__path span:not(:last-child)::after { content: "›"; position: absolute; right: -12px; color: var(--mm-arrow); }
.mock__path .is-hit { background: #FBE3E4; color: var(--mm-red); }
.mock__hist { display: grid; gap: 4px; min-width: 0; }
.mock__hist li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 4px 8px; background: #F5F7FA; border-radius: 4px; font-size: .75rem; }
.mock__hist span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mm-gray); }
.mock__hist .is-hit { background: #FDF7F7; box-shadow: inset 3px 0 0 var(--mm-red); } .mock__hist .is-hit b, .mock__hist .is-hit span { color: var(--mm-red); }
/* BIN 비율 · Wafer별 수율 */
.mock__rows--bin li { grid-template-columns: 96px minmax(0, 1fr) 40px; }
.mock__rows--bin li > span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
.mock__rows--bin .k-g::before { background: #3DAA6A; } .mock__rows--bin .k-b2::before { background: #F0A93B; } .mock__rows--bin .k-b7::before { background: var(--mm-red); }
.mock .bar-amber { fill: #F0A93B; } .mock .bar-red { fill: var(--mm-red); }
.mock__rows em.is-low { color: var(--mm-red); }
.mock__spark { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: .6875rem; font-weight: 600; color: var(--mm-gray); }
.mock__spark svg { display: block; width: 100%; height: 26px; }
.mock__spark .sp { fill: none; stroke: var(--mm-navy); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .mock__spark .sp-lim { fill: none; stroke: var(--mm-red); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; } .mock__spark .sp-hit { fill: var(--mm-red); }
.mock__spark em { font-style: normal; font-weight: 700; color: var(--mm-red); }
/* 통계 차트 2개 */
.mock__charts { display: grid; flex: 1 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.block .modmap .mock__charts figure { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; margin: 0; padding: 6px 8px; background: #F5F7FA; border-radius: 6px; }
.mock__charts svg { display: block; width: 100%; height: auto; }
.mock__charts figcaption { font-size: .6875rem; font-weight: 600; color: var(--mm-gray); }
.mock__charts .hist { fill: var(--mm-navy); opacity: .85; } .mock__charts .norm { fill: none; stroke: #F0A93B; stroke-width: 2; }
.mock__charts .spec { fill: none; stroke: var(--mm-red); stroke-width: 1.4; stroke-dasharray: 4 3; } .mock__charts .axis { stroke: #B8C0CC; }
.mock__charts .ctl { fill: none; stroke: var(--mm-red); stroke-width: 1.2; stroke-dasharray: 4 3; } .mock__charts .cl { stroke: #8A94A3; stroke-width: 1; }
.mock__charts .xbar { fill: none; stroke: var(--mm-navy); stroke-width: 2; stroke-linejoin: round; } .mock__charts .pt { fill: var(--mm-red); }
.mock__kpis strong.is-ok { color: #1E6B34; }
/* FAB 베이별 설비 배치 */
.mock__fab { display: grid; flex: 1 0 auto; align-content: space-evenly; gap: 6px; }
.mock__bay { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; font-size: .6875rem; font-weight: 700; color: var(--mm-gray); }
.mock__bay ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mock__bay li { display: flex; flex-direction: column; min-width: 0; padding: 3px 6px; white-space: nowrap; border-radius: 4px; border-left: 3px solid; line-height: 1.3; }
.mock__bay b { font-size: .6875rem; color: var(--mm-navy); } .mock__bay li span { font-weight: 600; }
.t-run { background: #E6F4EA; border-color: #3DAA6A; color: #1E6B34; } .t-idle { background: #FDF3E3; border-color: #F0A93B; color: #9A5B00; }
.t-down { background: #FBE3E4; border-color: var(--mm-red); color: var(--mm-red); } .t-off { background: #EEF1F5; border-color: #B8C0CC; color: var(--mm-gray); }
/* WMS: 스캐너 PDA 화면 */
.block .modmap .mock__phone { display: flex; flex-direction: column; gap: 5px; width: 138px; padding: 12px 8px 8px; background: #fff; border: 6px solid var(--mm-navy); border-radius: 14px; font-size: .6875rem; }
.block .modmap .mock__phone-hd { margin: -6px -2px 0; padding-bottom: 4px; border-bottom: 1px solid var(--mm-line); font-weight: 700; text-align: center; }
.block .modmap .mock__scan { display: flex; justify-content: space-between; padding: 2px 6px; background: #E6F4EA; border-radius: 4px; font-weight: 600; color: #1E6B34; }
.block .modmap .mock__loc { display: flex; flex-direction: column; align-items: center; padding: 4px 0; background: #F5F7FA; border-radius: 4px; }
.mock__loc span { font-size: .625rem; color: var(--mm-gray); } .mock__loc strong { font-size: 1.0625rem; font-weight: 800; letter-spacing: .02em; color: var(--mm-red); }
.mock__phone .mock__kv div { padding: 1px 0; font-size: .6875rem; } .mock__phone .mock__kv dt { flex-basis: 26px; }
.block .modmap .mock__phone-btn { padding: 3px 0; background: var(--mm-navy); border-radius: 4px; font-weight: 700; text-align: center; color: #fff; }
.mock__steps { display: grid; gap: 4px; }
.mock__steps li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px 4px 22px; background: #F5F7FA; border-radius: 4px; position: relative; font-size: .75rem; font-weight: 700; color: var(--mm-gray); }
.mock__steps li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #C9D3E0; }
.mock__steps li span { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.mock__steps .is-done { color: #1E6B34; } .mock__steps .is-done::before { background: #3DAA6A; }
.mock__steps .is-now { background: var(--mm-navy); color: #fff; } .mock__steps .is-now::before { background: var(--mm-red); box-shadow: 0 0 0 2px #fff; }
/* WMS: 창고 배치도(Zone·Rack 칸 색 = 적재율) */
.mock__rack { display: block; width: 100%; height: auto; }
.mock__rack .r-floor, .mock__rack .r-panel { fill: #F5F7FA; }
.mock__rack .r-dock { fill: #E3E7ED; } .mock__rack .r-dock-t { font-size: 7px; font-weight: 700; text-anchor: middle; fill: var(--mm-gray); }
.mock__rack .r-zone { font-size: 8px; font-weight: 800; text-anchor: middle; fill: var(--mm-gray); }
.mock__rack .r-title { font-size: 8px; font-weight: 800; letter-spacing: .04em; fill: var(--mm-navy); }
.mock__rack .r-lv, .mock__rack .r-bay { font-size: 7px; font-weight: 700; text-anchor: middle; fill: var(--mm-arrow); }
.mock__rack .r-up { fill: none; stroke: #8A94A3; stroke-width: 1.4; } .mock__rack .r-beam { fill: none; stroke: #F0A93B; stroke-width: 1.6; } /* 랙 기둥(회색)·선반 빔(주황) */
.mock__rack .r-empty { fill: #fff; stroke: #B8C0CC; stroke-width: .8; stroke-dasharray: 2 1.5; }
.mock__rack .r-link { fill: none; stroke: var(--mm-red); stroke-width: 1; stroke-dasharray: 3 2; }
.r-l0 { fill: #fff; stroke: #C9D3E0; stroke-width: .6; background: #fff; box-shadow: inset 0 0 0 1px #C9D3E0; }
.r-l1 { fill: #D5E0F0; background: #D5E0F0; } .r-l2 { fill: #93AED6; background: #93AED6; } .r-l3 { fill: #4A6FA8; background: #4A6FA8; } .r-l4 { fill: var(--mm-navy); background: var(--mm-navy); }
.mock__rack .r-sel { fill: none; stroke: var(--mm-red); stroke-width: 1.6; }
.mock__rackinfo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.block .modmap .mock__heat { display: flex; align-items: center; gap: 3px; font-size: .6875rem; font-weight: 600; color: var(--mm-gray); }
.mock__heat i { width: 12px; height: 10px; border-radius: 2px; } .mock__heat span:first-child { margin-right: 4px; } .mock__heat span:last-child { margin-left: 4px; }
/* WMS: 선입선출 LOT 목록 · 경과일 분포 */
.mock__fifo { display: grid; flex: 1 0 auto; align-content: space-evenly; gap: 4px; }
.mock__fifo li { display: grid; grid-template-columns: 18px minmax(0, 1.4fr) minmax(0, 1fr) 40px auto; align-items: center; gap: 8px; padding: 3px 8px; background: #F5F7FA; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.mock__fifo li > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mock__fifo li > span:nth-child(3) { color: var(--mm-gray); } .mock__fifo li > span:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.mock__fifo b { display: grid; place-items: center; width: 18px; height: 18px; background: #D3D9E1; border-radius: 50%; font-size: .6875rem; color: #fff; }
.mock__fifo em { padding: 0 6px; background: #EAEEF3; border-radius: 3px; font-size: .6875rem; font-style: normal; font-weight: 700; color: var(--mm-gray); white-space: nowrap; }
.mock__fifo .is-next { background: #fff; box-shadow: inset 0 0 0 1.5px var(--mm-navy); } .mock__fifo .is-next b { background: var(--mm-navy); } .mock__fifo .is-next em { background: var(--mm-navy); color: #fff; }
.mock__fifo em.is-warn { background: #FBE3E4; color: var(--mm-red); }
.mock__aging { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: .6875rem; font-weight: 600; color: var(--mm-gray); }
.mock__aging svg { display: block; width: 100%; height: 12px; border-radius: 2px; }
.ag1 { fill: #3DAA6A; } .ag2 { fill: #93AED6; } .ag3 { fill: #F0A93B; } .ag4 { fill: var(--mm-red); }
.k-ag1::before { background: #3DAA6A; } .k-ag2::before { background: #93AED6; } .k-ag3::before { background: #F0A93B; } .k-ag4::before { background: var(--mm-red); }
/* WMS: 출하지시별 피킹·검수·상차 */
.mock__pick { display: grid; flex: 1 0 auto; align-content: space-evenly; gap: 5px; }
.block .modmap .mock__pick-hd, .mock__pick li { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; }
.block .modmap .mock__pick-hd { font-size: .6875rem; font-weight: 600; color: var(--mm-gray); }
.mock__pick-list { display: grid; gap: 6px; }
.mock__pick li { font-size: .6875rem; color: var(--mm-gray); }
.mock__pick li > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mock__pick li b { margin-right: 4px; font-size: .75rem; color: var(--mm-navy); }
.mock__pick svg { display: block; width: 100%; height: 10px; border-radius: 2px; }
/* WMS: 이동 유형별 재고 트랜잭션 · ERP 전표 */
.mock__mvt { display: grid; flex: 1 0 auto; align-content: space-evenly; gap: 4px; }
.mock__mvt li { display: grid; grid-template-columns: 34px 58px minmax(0, 1fr) 38px auto; align-items: center; gap: 8px; padding: 3px 8px; background: #F5F7FA; border-radius: 4px; font-size: .75rem; }
.mock__mvt b { padding: 0 4px; border-radius: 3px; font-size: .6875rem; text-align: center; color: #fff; font-variant-numeric: tabular-nums; }
.mv-in { background: #3DAA6A; } .mv-mv { background: #4A6FA8; } .mv-out { background: var(--mm-navy); } .mv-adj { background: #F0A93B; } /* 입고·이동·출고·조정 */
.mock__mvt span { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .mock__mvt span + span { font-weight: 500; color: var(--mm-gray); }
.mock__mvt em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .mock__mvt em.is-plus { color: #1E6B34; }
.mock__mvt i { font-size: .6875rem; font-style: normal; font-weight: 700; color: #1E6B34; white-space: nowrap; }
.mock__mvt .is-wait { background: #FDF3E3; } .mock__mvt .is-wait i { color: #9A5B00; }
/* WMS: 재고 실사 */
.mock__rows--zone li { grid-template-columns: 52px minmax(0, 1fr) 40px; }
.mock__diff { display: grid; gap: 4px; }
.mock__diff li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 3px 8px; background: #FDF7F7; border-radius: 4px; font-size: .75rem; }
.mock__diff span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mm-gray); }
.mock__diff em { font-style: normal; font-weight: 800; color: #1E6B34; } .mock__diff em.is-minus { color: var(--mm-red); }
.mock__diff i { padding: 0 6px; background: var(--mm-navy); border-radius: 3px; font-size: .6875rem; font-style: normal; font-weight: 700; color: #fff; white-space: nowrap; }
/* 어두운 관제 화면(HMI) */
.mock--dark { background: #13203A; border-color: #13203A; color: #DCE3EE; }
.block .modmap .mock--dark .mock__bar { border-color: #26355A; color: #AEB9CC; }
.mock__live { display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem; letter-spacing: .08em; color: #3DDC84; }
.mock__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .2); }
.mock__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mock__tags span { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; background: #1C2B4A; border-radius: 4px; font-size: .6875rem; color: #AEB9CC; }
.mock__tags span::before { content: ""; align-self: center; width: 10px; height: 2px; border-radius: 1px; }
.mock__tags b { font-size: .875rem; font-weight: 700; color: #fff; }
.mock__tags .t1::before { background: #4FC3F7; } .mock__tags .t2::before { background: #F2B84B; } .mock__tags .t3::before { background: #FF6B6B; }
.mock__tags .is-alarm { background: rgba(255, 107, 107, .16); color: #FF9A9A; } .mock__tags .is-alarm b { color: #FF6B6B; }
.mock__chart { display: block; width: 100%; height: auto; }
.mock__chart .g { fill: none; stroke: #22314F; stroke-width: 1; }
.mock__chart .lim { fill: none; stroke: #FF6B6B; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .8; }
.mock__chart .s { fill: none; stroke-width: 2; stroke-linejoin: round; } .mock__chart .s1 { stroke: #4FC3F7; } .mock__chart .s2 { stroke: #F2B84B; } .mock__chart .s3 { stroke: #FF6B6B; }
.mock__chart .cur { stroke: #AEB9CC; stroke-dasharray: 3 3; opacity: .6; }
.mock__chart .alm { fill: #FF6B6B; } .mock__chart .alm-ring { fill: none; stroke: #FF6B6B; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: mock-pulse 1.6s ease-out infinite; }
@keyframes mock-pulse { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .mock__chart .alm-ring { animation: none; opacity: .5; } }
.block .modmap .mock__axis { display: flex; justify-content: space-between; margin-top: -5px; font-size: .6875rem; color: #7F8CA3; }
.mock__alarms { display: grid; gap: 4px; }
.mock__alarms li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 8px; background: #1C2B4A; border-radius: 4px; font-size: .75rem; }
.mock__alarms time { font-variant-numeric: tabular-nums; color: #8A97AD; }
.mock__alarms em { font-size: .6875rem; font-style: normal; font-weight: 700; color: #8A97AD; }
.mock__alarms .is-new { background: rgba(255, 107, 107, .14); box-shadow: inset 3px 0 0 #FF6B6B; } .mock__alarms .is-new em { color: #FF6B6B; }
/* 어두운 화면 공통 부품 색 */
.mock--dark .mock__kpis li { background: #1C2B4A; } .mock--dark .mock__kpis span, .mock--dark .mock__kpis small { color: #8A97AD; } .mock--dark .mock__kpis strong { color: #fff; }
.mock--dark .mock__kpis strong.is-txt { font-size: .9375rem; line-height: 1.6; }
.mock--dark .mock__legend { color: #8A97AD; }
.k-hrun::before { background: #3DDC84; } .k-halm::before { background: #FF6B6B; } .k-hstop::before { background: #5B6B8C; }
.mock--dark .mock__seg { background: #1C2B4A; } .mock--dark .mock__seg span { color: #8A97AD; } .mock--dark .mock__seg .is-on { background: #4FC3F7; color: #0E1729; }
.mock--dark .mock__route li { background: #1C2B4A; color: #8A97AD; } .mock--dark .mock__route li::after { color: #5B6B8C; }
.mock--dark .mock__route .is-done { background: rgba(61, 220, 132, .14); color: #3DDC84; } .mock--dark .mock__route .is-now { background: #4FC3F7; color: #0E1729; }
/* HMI 라인 상태 타일 */
.mock__lines { display: grid; flex: 1 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: space-evenly; gap: 6px; }
.mock__lines li { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; background: #1C2B4A; border-radius: 5px; --st: #3DDC84; } /* --st: 상태 글자·진행 막대 색 */
.mock__lines .is-alm { --st: #FF6B6B; background: rgba(255, 107, 107, .14); animation: hm-blink 1.4s ease-in-out infinite; } .mock__lines .is-stop { --st: #5B6B8C; }
.block .modmap .mock__lines p { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; white-space: nowrap; }
.ln-hd b { font-size: .75rem; color: #fff; } .ln-hd span { font-size: .625rem; font-weight: 800; letter-spacing: .06em; color: var(--st); }
.ln-v { font-size: .875rem; font-weight: 700; color: #fff; } .ln-v small { margin-left: 1px; font-size: .625rem; font-weight: 500; color: #8A97AD; }
.ln-c { font-size: .625rem; color: #8A97AD; }
.mock__lines svg, .mock__pop svg { display: block; width: 100%; height: 6px; }
.p-trk { fill: #26355A; } .p-run { fill: #3DDC84; } .p-alm { fill: #FF6B6B; } .p-stop { fill: #5B6B8C; }
@keyframes hm-blink { 50% { background: rgba(255, 107, 107, .28); } }
/* HMI 설비 SVG(공정도·배치도·P&ID) */
.hm { display: block; width: 100%; height: auto; }
.hm .eq { fill: #1C2B4A; stroke: #3A4C72; stroke-width: 1.2; } .hm .eq2 { fill: #26355A; stroke: #4A5D86; stroke-width: 1; }
.hm .strip, .hm .pipe { fill: none; stroke: #4A5D86; stroke-width: 3; stroke-linejoin: round; }
.hm .flow { fill: none; stroke: #4FC3F7; stroke-width: 1.4; stroke-dasharray: 5 7; stroke-linejoin: round; animation: hm-flow 1s linear infinite; } /* 흐르는 소재·유체 */
@keyframes hm-flow { to { stroke-dashoffset: -12; } }
.hm .lb, .hm .tk, .hm .rm { font-size: 7.5px; font-weight: 600; text-anchor: middle; fill: #8A97AD; } .hm .rm { text-anchor: start; font-weight: 700; fill: #AEB9CC; } .hm .lb-l { text-anchor: start; }
.hm .tk { fill: #AEB9CC; font-weight: 700; } .hm .tkv { font-size: 11px; font-weight: 800; text-anchor: middle; fill: #fff; }
.hm .bd rect { fill: #0E1729; stroke: #2E3F63; stroke-width: 1; } .hm .bd text { font-size: 7.5px; font-weight: 700; text-anchor: middle; fill: #fff; }
.hm .bd.hot rect { stroke: #FF9F43; } .hm .bd.hot text { fill: #FFB86B; } .hm .bd.env text { fill: #4FC3F7; font-weight: 600; }
.hm .run { fill: #3DDC84; }
.hm .spark { fill: #F2B84B; } .hm .roll { fill: #26355A; stroke: #8A97AD; stroke-width: 1.2; } .hm .wave { fill: none; stroke: #FF9F43; stroke-width: 1.2; stroke-linecap: round; }
.hm .drop { fill: #4FC3F7; } .hm .blade { stroke: #AEB9CC; stroke-width: 2; stroke-linecap: round; } .hm .coat { fill: none; stroke: #4FC3F7; stroke-width: 1.4; stroke-linecap: round; }
.hm .bldg { fill: #0E1729; stroke: #26355A; } .hm .room { fill: #16243F; stroke: #2E3F63; stroke-dasharray: 3 2; }
.hm .eqp rect { fill: #3DDC84; fill-opacity: .2; stroke: #3DDC84; stroke-width: 1.2; } .hm .eqp text { font-size: 6.5px; font-weight: 700; text-anchor: middle; fill: #DCE3EE; }
.hm .eqp.is-stop rect { fill: #5B6B8C; fill-opacity: .25; stroke: #5B6B8C; } .hm .eqp.is-alm rect { fill: #FF6B6B; fill-opacity: .35; stroke: #FF6B6B; }
.hm .alm-ring { fill: none; stroke: #FF6B6B; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: mock-pulse 1.6s ease-out infinite; }
.hm .lvl { fill: #4FC3F7; fill-opacity: .35; } .hm .lvl-b { fill: #F2B84B; }
.hm .pump { fill: #3DDC84; } .hm .shaft, .hm .blades path { fill: none; stroke: #AEB9CC; stroke-width: 1.6; stroke-linecap: round; } .hm .motor { fill: #3A4C72; }
.hm .blades { transform-box: fill-box; transform-origin: center; animation: hm-spin-x 1.2s ease-in-out infinite alternate; } /* 교반 날개 */
@keyframes hm-spin-x { to { transform: scaleX(-1); } }
.hm .vl { stroke: #0E1729; stroke-width: .8; } .hm .vl.is-open { fill: #3DDC84; } .hm .vl.is-close { fill: #5B6B8C; }
.hm .arw { fill: none; stroke: #4A5D86; stroke-width: 1.6; }
.hm .z1 { fill: #FF9F43; fill-opacity: .35; } .hm .z2 { fill: #FF7A3D; fill-opacity: .5; } .hm .z3 { fill: #FF5A3D; fill-opacity: .62; }
.hm .zt { font-size: 6.5px; font-weight: 700; text-anchor: middle; fill: #FFD7B0; } .hm .zv { font-size: 8.5px; font-weight: 800; text-anchor: middle; fill: #fff; }
.hm .fan circle { fill: #1C2B4A; stroke: #4A5D86; } .hm .fan-b { animation: hm-rot 1s linear infinite; } .hm .fan-b path { stroke: #4FC3F7; stroke-width: 1.4; stroke-linecap: round; }
@keyframes hm-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hm .flow, .hm .fan-b, .hm .blades, .hm .alm-ring, .mock__lines .is-alm { animation: none; } }
/* 배치 설정값 · POP 패널 */
.block .modmap .mock__sp { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; color: #8A97AD; }
.mock__sp b { margin-left: 4px; padding: 0 6px; background: #0E1729; border: 1px solid #4FC3F7; border-radius: 3px; color: #fff; }
.mock__sp em { margin-left: 4px; font-style: normal; font-weight: 700; color: #fff; }
.mock__pop { display: grid; gap: 6px; padding: 8px 10px; background: #1C2B4A; border-radius: 6px; }
.block .modmap .mock__pop .pop-hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: .6875rem; color: #8A97AD; }
.pop-hd b { margin-left: 3px; color: #fff; }
.block .modmap .mock__pop .pop-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pop-btns span { padding: 3px 0; background: #26355A; border-radius: 4px; font-size: .6875rem; font-weight: 700; text-align: center; color: #DCE3EE; }
.pop-btns .is-main { background: #4FC3F7; color: #0E1729; }
.modmap__ba { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--mm-line); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(27, 42, 74, .07); font-size: .9375rem; line-height: 1.5; }
.modmap__ba th, .modmap__ba td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mm-line); }
.modmap__ba tbody tr:last-child > * { border-bottom: 0; }
.modmap__ba thead th { padding-block: 10px; background: var(--mm-navy); color: #fff; font-size: .875rem; font-weight: 700; }
.modmap__ba thead th:last-child { background: var(--mm-red); } /* 도입 후 열은 Core 띠와 같은 빨강 */
.modmap__ba tbody th { width: 150px; font-size: 1rem; font-weight: 700; color: var(--mm-navy); white-space: nowrap; }
.modmap__ba td:nth-child(2) { width: 38%; color: var(--mm-gray); }
.modmap__ba td:last-child { position: relative; padding-left: 42px; background: #FDF7F7; font-weight: 600; color: var(--mm-navy); }
.modmap__ba td:last-child::before { content: "→"; position: absolute; left: 18px; font-weight: 700; color: var(--mm-red); }
/* 서비스(컨설팅·유지보수) 페이지 */
.svc-cycle { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; } /* 수명주기 원형도: 컨설팅(빨강)·유지보수(네이비) */
.svc-cycle .cy-ring { fill: none; stroke: #EEF1F5; stroke-width: 14; }
.svc-cycle .cy-con { fill: none; stroke: #D7262C; stroke-width: 3; } .svc-cycle .cy-sm { fill: none; stroke: #1B2A4A; stroke-width: 3; stroke-dasharray: 6 5; }
.svc-cycle .cy-chev { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .svc-cycle .cy-chev--con { stroke: #D7262C; } .svc-cycle .cy-chev--sm { stroke: #1B2A4A; }
.svc-cycle .cy-node circle { fill: #fff; stroke-width: 2; } .svc-cycle .n-con circle { stroke: #D7262C; } .svc-cycle .n-sm circle { stroke: #1B2A4A; }
.svc-cycle .cy-no { font-size: 11px; font-weight: 700; text-anchor: middle; fill: #5A6472; }
.svc-cycle .cy-nm { font-size: 15px; font-weight: 800; text-anchor: middle; fill: #1B2A4A; }
.svc-cycle--con .n-con circle { fill: #D7262C; } .svc-cycle--con .n-con text { fill: #fff; }
.svc-cycle--sm .n-sm circle { fill: #1B2A4A; } .svc-cycle--sm .n-sm text { fill: #fff; }
.svc-cycle .cy-c1 { font-size: 20px; font-weight: 800; text-anchor: middle; fill: #D7262C; } .svc-cycle .cy-c2 { font-size: 15px; font-weight: 700; text-anchor: middle; fill: #1B2A4A; }
.svc-cycle--sm .cy-c1 { font-size: 15px; font-weight: 700; } .svc-cycle--sm .cy-c2 { font-size: 20px; font-weight: 800; }
/* 프로세스 위 컨설팅 구분 띠(5단계 = 전략 2 · 구현 2 · 운영관리 1) */
.block .modmap p.svc-phase { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; max-width: none; margin: 0 0 12px; }
.svc-phase span { padding-top: 6px; border-top: 3px solid; font-size: .875rem; font-weight: 700; }
.svc-phase__s { grid-column: span 2; border-color: #D7262C; color: #D7262C; } .svc-phase__i { grid-column: span 2; border-color: #1B2A4A; color: #1B2A4A; } .svc-phase__o { border-color: #8A94A3; color: #5A6472; }
/* SAP 모듈 ↔ 현장 업무 */
.block .modmap p.svc-map__hd, .svc-map li { display: grid; grid-template-columns: 230px minmax(0, 1fr); column-gap: 48px; }
.block .modmap p.svc-map__hd { max-width: none; margin: 0 0 8px; padding-inline: 18px; font-size: .875rem; font-weight: 700; color: var(--mm-gray); }
.svc-map { display: grid; gap: 10px; }
.svc-map li { position: relative; align-items: center; padding: 12px 18px; background: #fff; border: 1px solid var(--mm-line); border-radius: 8px; box-shadow: 0 2px 6px rgba(27, 42, 74, .07); }
.svc-map li::after { content: "⇄"; position: absolute; left: calc(18px + 230px + 14px); top: 50%; transform: translateY(-50%); font-size: 1.125rem; font-weight: 700; color: var(--mm-red); }
.svc-map__mod { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--mm-gray); }
.svc-map__mod b { min-width: 44px; padding: 2px 0; background: var(--mm-navy); border-radius: 5px; font-size: .9375rem; text-align: center; color: #fff; }
.block .modmap .svc-map p { max-width: none; margin: 0; font-size: .9375rem; font-weight: 600; color: #2B3440; }
/* 데이터·AI 고도화 계단 */
.svc-stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 16px; }
.svc-stairs > li:nth-child(1) { margin-top: 72px; } .svc-stairs > li:nth-child(2) { margin-top: 48px; } .svc-stairs > li:nth-child(3) { margin-top: 24px; }
.svc-stairs .modmap__card { border-top: 3px solid #93AED6; } .svc-stairs > li:nth-child(2) { border-top-color: #4A6FA8; } .svc-stairs > li:nth-child(3) { border-top-color: var(--mm-navy); } .svc-stairs > li:nth-child(4) { border-top-color: var(--mm-red); }
.svc-stairs .modmap__head { flex-direction: column; align-items: flex-start; gap: 2px; }
.svc-stairs .modmap__step { margin-left: 0; font-size: .75rem; letter-spacing: .06em; }
/* 정부 지원사업 이력 */
.block .modmap p.svc-award { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; max-width: none; margin: 16px 0 0; }
.svc-award span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: #fff; border: 1px solid var(--mm-line); border-radius: 999px; font-size: .875rem; font-weight: 700; color: var(--mm-navy); }
.svc-award span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mm-red); }
/* 유지보수 관리 시스템: 요청 목록 화면 | 주요 기능 */
.svc-sys { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; gap: 20px; }
.svc-sys .mock { margin-bottom: 0; }
.mock--auto { aspect-ratio: auto; }
.mock__tickets { display: grid; flex: 1 0 auto; align-content: space-evenly; gap: 5px; }
.mock__tickets li { display: grid; grid-template-columns: 40px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 10px; background: #F5F7FA; border-radius: 4px; font-size: .8125rem; }
.mock__tickets b { padding: 0 4px; border-radius: 3px; font-size: .6875rem; text-align: center; color: #fff; }
.sy-mes { background: var(--mm-navy); } .sy-pop { background: #4A6FA8; } .sy-hmi { background: #2A7F8F; } .sy-wms { background: #3DAA6A; }
.mock__tickets span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mock__tickets span:nth-of-type(1) { font-weight: 700; color: var(--mm-gray); }
.mock__tickets em { padding: 0 7px; border-radius: 3px; font-size: .6875rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.st-new { background: #FBE3E4; color: var(--mm-red); } .st-ing { background: #FDF3E3; color: #9A5B00; } .st-done { background: #E6F4EA; color: #1E6B34; }
/* 유지보수 신청(고객지원): 신청 버튼·신청 후 진행·안내 배너 */
.block p.svc-cta { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; margin-top: 24px; }
.block p.svc-cta__url { margin-top: 10px; font-size: .875rem; color: var(--muted); }
.block .svc-next { margin-top: 0; }
.svc-next__steps { position: relative; display: grid; gap: 14px; }
.svc-next__steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--mm-line); } /* 단계를 잇는 세로선 */
.svc-next__steps li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 12px; }
.svc-next__steps b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mm-navy); font-size: .75rem; color: #fff; }
.svc-next__steps li:first-child b { background: var(--mm-red); }
.svc-next__steps strong { display: block; font-size: .9375rem; color: var(--mm-navy); }
.svc-next__steps span { display: block; font-size: .875rem; color: var(--mm-gray); }
.block .modmap .svc-check p { max-width: none; margin: 0; font-size: .9375rem; color: #2B3440; }
.svc-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 40px; padding: 20px 24px; border: 1px solid var(--rule); border-left: 4px solid var(--brand); border-radius: 8px; }
.svc-banner strong { display: block; font-size: 1.0625rem; } .svc-banner span { display: block; margin-top: 2px; font-size: .9375rem; color: var(--muted); }
/* 채용공고: 채용 개요 · 직무 카드 · 제출 서류 · 개인정보 처리 안내 */
.block .rc-facts { margin-top: 0; }
.rc-facts__list { display: grid; margin: 0; }
.rc-facts__list > div, .rc-privacy > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mm-line); }
.rc-facts__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rc-facts__list dt { font-size: .875rem; font-weight: 700; color: var(--mm-gray); }
.rc-facts__list dd { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--mm-navy); }
.rc-facts__list dd span { display: block; font-size: .875rem; font-weight: 400; color: var(--mm-gray); }
.block .modmap p.rc-job__label { max-width: none; margin: 4px 0 4px; font-size: .875rem; font-weight: 700; color: var(--mm-gray); }
.block .modmap .modmap__items + p.rc-job__label { margin-top: 14px; }
.rc-docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.block .modmap .rc-docs p { max-width: none; margin: 0; font-size: .9375rem; color: #2B3440; }
.block .rc-docs .modmap__head h4 { flex: 1; }
.rc-tag { flex: none; padding: 1px 8px; border-radius: 4px; background: #EAEEF3; font-size: .75rem; font-weight: 700; line-height: 1.6; color: var(--mm-gray); }
.rc-tag--req { background: #FBE3E4; color: var(--mm-red); }
.rc-privacy { --mm-line: #D9DEE5; --mm-gray: #5A6472; display: grid; margin: 16px 0 0; padding: 6px 24px; background: #F5F7FA; border-radius: 10px; }
.rc-privacy > div { grid-template-columns: 100px minmax(0, 1fr); padding: 12px 0; }
.rc-privacy > div:last-child { border-bottom: 0; }
.rc-privacy dt { font-size: .9375rem; font-weight: 700; color: #1B2A4A; }
.rc-privacy dd { margin: 0; font-size: .9375rem; color: #2B3440; }
/* 채용안내: 네이비 히어로(소개 + 솔루션 타일) → 인재상(독립 띠, 큰 3단) → 복리후생 */
.rc-eyebrow { font-family: var(--font-display); font-size: .875rem; font-weight: 600; letter-spacing: .16em; color: var(--brand); }
.rc-hero { padding-block: clamp(48px, 6.5vw, 88px); background: #1B2A4A; color: #fff; }
.rc-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 56px; }
.rc-hero h2 { margin-top: 14px; font-size: clamp(1.75rem, 3.2vw, 2.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.rc-hero__text > p:not([class]) { max-width: 40em; margin-top: 20px; font-size: 1.0625rem; color: #C9D2DE; }
.rc-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.rc-hero__label { margin-bottom: 12px; font-size: .875rem; font-weight: 700; color: #C9D2DE; }
.rc-sol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rc-sol li { padding: 14px 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-left: 3px solid var(--brand); border-radius: 6px; }
.rc-sol strong { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: .01em; }
.rc-sol span { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.5; color: #C9D2DE; }
.block.rc-band { padding-block: clamp(56px, 7vw, 96px); background: var(--paper); }
.block.rc-benefit { padding-top: clamp(56px, 7vw, 96px); }
.block .rc-sec-head h2 { margin-top: 8px; font-size: clamp(1.75rem, 2.8vw, 2.25rem); }
.block .rc-sec-head .lead { margin-top: 14px; }
.rc-ideal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.rc-ideal > li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 44px 32px 36px; background: #fff; border-top: 4px solid var(--brand); border-radius: 0 0 10px 10px; box-shadow: 0 10px 28px rgba(27, 42, 74, .08); text-align: center; }
.rc-ideal__no { position: absolute; top: 14px; right: 20px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: #D9DEE5; }
.rc-ideal__ico { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #1B2A4A; box-shadow: 0 0 0 8px #EEF1F5; }
.rc-ideal__ico svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.block .rc-ideal h3 { margin-top: 28px; font-family: var(--font-display); font-size: clamp(1.625rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: 0; line-height: 1.15; color: #1B2A4A; }
.block .rc-ideal p { max-width: none; }
.block .rc-ideal p.rc-ideal__ko { margin-top: 6px; font-size: 1rem; font-weight: 800; color: var(--brand); }
.block .rc-ideal p.rc-ideal__ko + p { margin-top: 18px; padding-top: 18px; border-top: 1px solid #D9DEE5; font-size: 1rem; line-height: 1.7; color: #2B3440; }
.block .rc-ideal p.rc-ideal__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: auto; padding-top: 20px; }
.rc-ideal__keys span { padding: 3px 12px; background: #EEF1F5; border-radius: 999px; font-size: .875rem; font-weight: 700; color: #1B2A4A; }
.rc-note { display: block; font-size: .875rem; color: var(--mm-gray); }
/* 회사소개: 흰 바탕 정의 문장 + 숫자 → 사업 영역(회색 띠) → 대표 인사말 → 기업 개요 · 인증 */
.ab-hero { padding-block: clamp(48px, 6vw, 88px); }
.ab-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 56px; }
.ab-hero h2 { margin-top: 14px; font-size: clamp(1.75rem, 3.2vw, 2.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: #1B2A4A; }
.ab-hero__text > p:not([class]) { max-width: 40em; margin-top: 20px; font-size: 1.0625rem; color: var(--muted); }
.ab-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; background: var(--paper); border-top: 4px solid var(--brand); border-radius: 0 0 10px 10px; }
.ab-kpi > div { padding: 22px 24px; border-bottom: 1px solid var(--rule); }
.ab-kpi > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.ab-kpi > div:nth-last-child(-n+2) { border-bottom: 0; }
.ab-kpi dt { font-size: .875rem; font-weight: 700; color: var(--muted); }
.ab-kpi dd { margin: 0; }
.ab-kpi b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: clamp(2.25rem, 3.6vw, 3rem); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: #1B2A4A; }
.ab-kpi em { margin-left: 3px; font-family: var(--font-body); font-size: 1rem; font-style: normal; font-weight: 700; }
.ab-kpi span { display: block; margin-top: 6px; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.block.ab-band { padding-block: clamp(56px, 7vw, 96px); background: var(--paper); }
.ab-biz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ab-biz__group { padding: 28px 28px 12px; background: #fff; border-top: 4px solid #1B2A4A; border-radius: 0 0 10px 10px; box-shadow: 0 10px 28px rgba(27, 42, 74, .08); }
.ab-biz__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #D9DEE5; }
.ab-biz__ico { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #1B2A4A; }
.ab-biz__ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.block .ab-biz h3 { margin: 0; font-size: 1.25rem; color: #1B2A4A; }
.block .ab-biz__head p { margin-top: 2px; font-size: .875rem; color: #5A6472; }
.ab-biz__list li + li { border-top: 1px solid #EEF1F5; }
.block .ab-biz__list a { position: relative; display: block; padding: 14px 24px 14px 0; color: inherit; text-decoration: none; }
.ab-biz__list a::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #8A94A3; border-right: 2px solid #8A94A3; transform: translateY(-50%) rotate(45deg); }
.ab-biz__list strong { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: .01em; color: #1B2A4A; }
.ab-biz__list span { display: block; font-size: .9375rem; color: #5A6472; }
.ab-biz__list a:hover strong, .ab-biz__list a:focus-visible strong { color: var(--action); }
.ab-biz__list a:hover::after { border-color: var(--action); }
.ab-own { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 4px; background: #FBE3E4; font-size: .75rem; font-style: normal; font-weight: 700; line-height: 1.6; color: #D7262C; vertical-align: 1px; }
.ab-ind { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px 24px; margin-top: 24px; padding: 20px 24px; background: #fff; border: 1px solid #D9DEE5; border-radius: 10px; }
.block p.ab-ind__label { font-size: 1rem; font-weight: 800; color: #1B2A4A; }
.ab-ind__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.ab-ind__list li { padding: 2px 16px; border-left: 1px solid #D9DEE5; }
.ab-ind__list strong { display: block; font-size: 1rem; color: #1B2A4A; }
.ab-ind__list span { display: block; font-size: .875rem; line-height: 1.5; color: #5A6472; }
.block.ab-ceo { padding-top: clamp(56px, 7vw, 96px); }
.ab-ceo__inner { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 64px; }
.ab-ceo__photo { overflow: hidden; background: var(--paper); border-radius: 10px; }
.ab-ceo__photo img { width: 100%; mix-blend-mode: multiply; } /* 사진의 흰 바탕을 회색 판에 맞춘다 */
.block .ab-ceo__text h2 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 600; letter-spacing: 0; line-height: 1.15; color: #1B2A4A; }
.ab-ceo__text h2 span { display: block; margin-top: 10px; font-family: var(--font-body); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; color: var(--brand); }
.block .ab-ceo__text h2 + p { margin-top: 24px; }
.block .ab-ceo__text p:not([class]) { max-width: none; font-size: 1.0625rem; color: #2B3440; }
.block p.ab-ceo__sign { max-width: none; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: .9375rem; color: var(--muted); }
.ab-ceo__sign strong { margin-left: 8px; font-size: 1.125rem; color: var(--ink); }
.block.ab-info { padding-top: clamp(56px, 7vw, 96px); background: var(--paper); }
.block .ab-info .rc-sec-head h2 { margin-top: 8px; font-size: clamp(1.75rem, 2.8vw, 2.25rem); }
.ab-info__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ab-facts { margin: 0; padding: 6px 24px; background: #fff; border: 1px solid #D9DEE5; border-radius: 10px; }
.ab-facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid #EEF1F5; }
.ab-facts > div:last-child { border-bottom: 0; }
.ab-facts dt { font-size: .9375rem; font-weight: 700; color: #1B2A4A; }
.ab-facts dd { margin: 0; font-size: .9375rem; color: #2B3440; }
.ab-facts > .ab-facts__btns { grid-template-columns: minmax(0, 1fr); padding-block: 16px; }
.ab-facts__btns dd { display: flex; flex-wrap: wrap; gap: 8px; }
.block h3.ab-sub { margin-top: 56px; padding-left: 14px; border-left: 4px solid var(--brand); font-size: 1.25rem; line-height: 1.3; color: #1B2A4A; }
.ab-cert { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.ab-cert li { padding: 16px 16px 18px; background: #fff; border: 1px solid #D9DEE5; border-radius: 10px; text-align: center; }
.ab-cert img { width: 100%; aspect-ratio: 890 / 1257; object-fit: cover; border: 1px solid #EEF1F5; }
.ab-cert strong { display: block; margin-top: 14px; font-size: 1rem; color: #1B2A4A; }
.ab-cert span { display: block; font-size: .875rem; color: #5A6472; }
.ab-rec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ab-rec li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff; border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0; }
.ab-rec b { flex: none; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: #1B2A4A; }
.ab-rec span { font-size: .9375rem; font-weight: 700; line-height: 1.45; color: var(--ink); }
.ab-rec small { display: block; font-size: .875rem; font-weight: 400; color: #5A6472; }
@media (max-width: 1099px) {
  .ab-hero__inner { gap: 32px; }
  .ab-biz { gap: 16px; }
  .ab-biz__group { padding: 24px 20px 10px; }
  .ab-ind { grid-template-columns: minmax(0, 1fr); }
  .ab-ind__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .ab-ceo__inner { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
  .ab-cert { gap: 16px; }
}
@media (max-width: 767px) {
  .ab-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .ab-kpi > div { padding: 16px; }
  .ab-biz { grid-template-columns: minmax(0, 1fr); }
  .ab-ind { padding: 16px; }
  .ab-ind__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-ind__list li { padding: 2px 12px; }
  .ab-ceo__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ab-ceo__photo { width: 200px; }
  .ab-info__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ab-facts { padding: 4px 16px; }
  .ab-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .ab-cert { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ab-cert li { padding: 10px 10px 14px; }
  .ab-rec { grid-template-columns: minmax(0, 1fr); }
}
/* 사업 연혁: 네이비 성장 단계 → 단계별 전체 연혁(해외·기업 배지, 연도 안 항목 2단) */
.hi-hero { padding-block: clamp(48px, 6.5vw, 88px); background: #1B2A4A; color: #fff; }
.hi-hero__head h2 { margin-top: 14px; font-size: clamp(1.75rem, 3.2vw, 2.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.hi-hero__head > p:not([class]) { max-width: 46em; margin-top: 20px; font-size: 1.0625rem; color: #C9D2DE; }
.hi-phase { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.hi-phase::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(255, 255, 255, .2); } /* 단계를 잇는 가로선 */
.hi-phase > li { position: relative; padding-top: 36px; }
.hi-phase > li::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 3px solid #8A94A3; border-radius: 50%; background: #1B2A4A; }
.hi-phase > li.is-now::before { border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 6px rgba(239, 67, 40, .25); }
.hi-phase__yr { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: .02em; color: #C9D2DE; }
.hi-phase h3 { margin-top: 4px; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; }
.hi-phase__list { display: grid; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.hi-phase__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: .9375rem; line-height: 1.5; color: #DCE3EC; }
.hi-phase__list b { font-family: var(--font-display); font-weight: 600; color: var(--brand); }
.block.hi-body { padding-top: clamp(56px, 7vw, 96px); }
.block header.hi-body__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.block p.hi-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; max-width: none; font-size: .875rem; color: var(--muted); }
.badge--key { background: var(--action); }
.block h3.hi-era { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 56px; padding: 14px 20px; background: var(--paper); border-left: 4px solid #1B2A4A; font-size: 1.125rem; color: #1B2A4A; }
.block header + h3.hi-era { margin-top: 0; }
.hi-era span { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--brand); }
.block .hi-era + .timeline--hi { margin-top: 0; }
.timeline--hi > .timeline__year:first-child { border-top: 0; }
.timeline--hi .timeline__items { display: block; columns: 2; column-gap: 48px; }
.timeline--hi .timeline__items > li { padding-block: 4px; break-inside: avoid; }
.timeline--hi .timeline__items > li.is-key { font-weight: 700; color: #1B2A4A; }
.timeline--hi .timeline__month { top: 4px; }
@media (max-width: 1099px) {
  .hi-phase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .hi-phase::before { display: none; } /* 두 줄로 바뀌면 가로선 대신 단계별 점만 둔다 */
  .timeline--hi .timeline__items { columns: 1; }
}
@media (max-width: 767px) {
  .hi-phase { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }
  .block h3.hi-era { padding: 12px 16px; }
  .timeline--hi .timeline__year > h3 { font-size: 1.5rem; }
}
/* 적용사례 & 보도자료: 대표 사례(큰 사진 + 개요) → 주요 적용 내용 카드 · 영상(회색 띠) → 보도 자료 카드 */
.cs-hero { padding-block: clamp(48px, 6vw, 80px); }
.cs-hero__head h2 { margin-top: 14px; font-size: clamp(1.75rem, 3.2vw, 2.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: #1B2A4A; }
.cs-hero__head > p:not([class]) { max-width: 52em; margin-top: 20px; font-size: 1.0625rem; color: var(--muted); }
.cs-hero__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; margin-top: 40px; }
.cs-hero__photo { margin: 0; overflow: hidden; border-radius: 10px; }
.cs-hero__photo img { width: 100%; height: 100%; aspect-ratio: 846 / 460; object-fit: cover; }
.cs-facts { align-self: start; margin: 0; padding: 6px 24px; background: #fff; border: 1px solid #D9DEE5; border-top: 4px solid #1B2A4A; border-radius: 0 0 10px 10px; box-shadow: 0 10px 28px rgba(27, 42, 74, .08); }
.cs-facts > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid #EEF1F5; }
.cs-facts > div:last-child { border-bottom: 0; }
.cs-facts dt { font-size: .9375rem; font-weight: 700; color: #5A6472; }
.cs-facts dd { margin: 0; font-size: 1rem; font-weight: 700; color: #1B2A4A; }
.cs-facts dd span { display: block; font-size: .875rem; font-weight: 400; color: #5A6472; }
.cs-facts dd.cs-facts__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-facts dd.cs-facts__chips span { display: inline-block; padding: 1px 10px; background: #EEF1F5; border-radius: 999px; font-size: .875rem; font-weight: 700; line-height: 1.7; color: #1B2A4A; }
.block.cs-body { padding-block: clamp(56px, 7vw, 96px); background: var(--paper); }
.cs-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cs-points > li { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 10px 28px rgba(27, 42, 74, .08); }
.cs-points img { width: 100%; aspect-ratio: 846 / 460; object-fit: cover; }
.cs-points__text { padding: 22px 24px 26px; }
.cs-points__no { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; letter-spacing: .04em; color: var(--brand); }
.block .cs-points h3 { margin-top: 4px; font-size: 1.1875rem; color: #1B2A4A; }
.block .cs-points p { max-width: none; margin-top: 10px; font-size: .9375rem; color: #2B3440; }
.cs-points > li.cs-points__log { justify-content: center; background: #1B2A4A; color: #fff; }
.block .cs-points__log h3 { color: #fff; }
.block .cs-points__log p { color: #C9D2DE; }
.cs-log { display: grid; margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.cs-log li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: .9375rem; color: #DCE3EC; }
.cs-log b { font-family: var(--font-display); font-weight: 600; color: var(--brand); }
.cs-video { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: 40px; margin-top: 56px; padding: 32px; background: #1B2A4A; border-radius: 10px; color: #fff; }
.block .cs-video h3 { margin-top: 4px; font-size: 1.375rem; color: #fff; }
.block .cs-video__text p:not([class]) { margin-top: 12px; font-size: .9375rem; color: #C9D2DE; }
.block p.cs-video__note { margin-top: 16px; font-size: .875rem; color: #8A94A3; }
.block .cs-video video { display: block; max-width: none; aspect-ratio: 16 / 9; background: #0E1830; border-radius: 6px; }
.block.cs-press { padding-top: clamp(56px, 7vw, 96px); }
.block .cs-press .rc-sec-head h2 { margin-top: 8px; font-size: clamp(1.75rem, 2.8vw, 2.25rem); }
.cs-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cs-news > li { display: flex; flex-direction: column; padding: 24px 24px 22px; border: 1px solid #D9DEE5; border-top: 4px solid var(--brand); border-radius: 0 0 10px 10px; }
.block p.cs-news__meta { display: flex; gap: 10px; font-family: var(--font-display); font-size: .9375rem; color: #5A6472; }
.cs-news__meta b { font-family: var(--font-body); font-weight: 800; color: #1B2A4A; }
.block .cs-news h3 { margin-top: 10px; font-size: 1.125rem; line-height: 1.45; color: #1B2A4A; }
.block .cs-news h3 + p { margin-top: 12px; font-size: .9375rem; color: #2B3440; }
.block p.cs-news__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cs-news__tags span { padding: 1px 8px; background: #EEF1F5; border-radius: 4px; font-size: .75rem; font-weight: 700; line-height: 1.7; color: #1B2A4A; }
.block a.cs-news__link { align-self: flex-start; margin-top: auto; padding-top: 18px; font-size: .9375rem; font-weight: 700; text-decoration: none; }
.cs-news__link::after { content: " ↗"; }
.cs-news__link:hover { text-decoration: underline; }
@media (max-width: 1099px) {
  .cs-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cs-news { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cs-video { gap: 24px; padding: 24px; }
}
@media (max-width: 767px) {
  .cs-hero__body { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
  .cs-facts { padding: 4px 16px; }
  .cs-points { grid-template-columns: minmax(0, 1fr); }
  .cs-points__text { padding: 18px 18px 22px; }
  .cs-news > li { padding: 20px 18px; }
  .cs-video { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; padding: 20px 16px; }
}
/* 조직도: HTML 조직도(대표이사 → 경영지원 갈래 → 사업본부 → 부서 카드) → 문의 안내(회색 띠) */
.og-chart { display: flex; flex-direction: column; align-items: center; }
.og-ceo { display: grid; place-content: center; justify-items: center; width: 136px; height: 136px; border-radius: 50%; background: #1B2A4A; box-shadow: 0 0 0 8px #EEF1F5; color: #fff; }
.og-ceo span { font-family: var(--font-display); font-size: .8125rem; font-weight: 600; letter-spacing: .16em; color: #C9D2DE; }
.og-ceo strong { font-size: 1.25rem; font-weight: 800; }
.og-branch { display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); width: 100%; margin-top: 8px; } /* 가운데 줄기에서 오른쪽으로 경영지원이 갈라진다 */
.og-stem { grid-column: 2; background: var(--brand); }
.og-staff { position: relative; grid-column: 3; justify-self: start; margin: 28px 0 28px 48px; padding: 12px 20px; background: #fff; border: 1px solid #D9DEE5; border-left: 4px solid #1B2A4A; border-radius: 0 8px 8px 0; }
.og-staff::before { content: ""; position: absolute; right: calc(100% + 4px); top: 50%; width: 48px; height: 2px; margin-top: -1px; background: var(--brand); }
.og-staff strong { display: block; font-size: 1rem; color: #1B2A4A; }
.og-staff span { display: block; font-size: .875rem; color: #5A6472; }
.og-split { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; width: 100%; padding-top: 28px; }
.og-split::before { content: ""; position: absolute; top: 0; left: calc(33.333% - 8px); right: calc(16.667% - 4px); height: 2px; background: var(--brand); } /* 사업본부 · 연구소 가운데를 잇는 가로대 */
.og-unit { position: relative; display: flex; flex-direction: column; padding: 0 20px 20px; background: #F5F7FA; border-top: 4px solid #D7262C; border-radius: 0 0 12px 12px; }
.og-unit::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 32px; margin-left: -1px; background: var(--brand); }
.og-unit--lab { border-top-color: #1B2A4A; }
.og-unit__head { padding: 18px 0; text-align: center; }
.block .og-unit__head h3 { font-size: 1.375rem; color: #1B2A4A; }
.block .og-unit__head p { max-width: none; margin-top: 2px; font-size: .9375rem; color: #5A6472; }
.og-depts { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.og-unit--lab .og-depts { grid-template-columns: minmax(0, 1fr); }
.og-depts > li { padding: 20px 20px 18px; background: #fff; border: 1px solid #D9DEE5; border-radius: 8px; }
.block .og-depts h4 { font-size: 1.125rem; color: #1B2A4A; }
.block p.og-depts__role { margin-top: 2px; font-size: .875rem; font-weight: 700; color: #D7262C; }
.og-unit--lab p.og-depts__role { color: #1B2A4A; }
.og-items { display: grid; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #EEF1F5; }
.og-items li { position: relative; padding-left: 14px; font-size: .9375rem; color: #2B3440; }
.og-items li::before { content: ""; position: absolute; left: 0; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: #1B2A4A; }
.block.og-band { padding-block: clamp(56px, 7vw, 96px); background: var(--paper); }
.og-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.og-contact > li { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 26px; background: #fff; border-radius: 10px; box-shadow: 0 10px 28px rgba(27, 42, 74, .08); }
.og-contact__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #1B2A4A; }
.og-contact__ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.block .og-contact h3 { margin-top: 18px; font-size: 1.1875rem; color: #1B2A4A; }
.block .og-contact p { max-width: none; margin-top: 8px; font-size: .9375rem; color: #2B3440; }
.block .og-contact p.og-contact__meta { margin: 10px 0 20px; font-size: .875rem; font-weight: 700; color: #5A6472; }
.og-contact .btn { margin-top: auto; }
@media (max-width: 1099px) {
  .og-split { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .og-split::before, .og-unit::before { display: none; } /* 본부가 세로로 쌓이면 가로대 없이 줄기만 남긴다 */
  .og-unit--lab .og-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .og-contact { gap: 16px; }
  .og-contact > li { padding: 24px 20px; }
}
@media (max-width: 767px) {
  .og-ceo { width: 112px; height: 112px; }
  .og-staff { margin: 20px 0 20px 24px; padding: 10px 14px; }
  .og-staff::before { width: 24px; }
  .og-unit { padding: 0 12px 12px; }
  .og-depts, .og-unit--lab .og-depts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .og-contact { grid-template-columns: minmax(0, 1fr); }
}
/* 오시는길: 지도 + 네이비 주소 카드 → 찾아오시는 길 카드(회색 띠). en·cn의 .map 기본 모양은 그대로 */
.block.mp { padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 80px); }
.mp-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px; }
.mp .map { height: auto; min-height: 460px; overflow: hidden; border: 1px solid #D9DEE5; border-radius: 10px; }
.mp .map picture img { max-height: 460px; }
.mp-card { padding: 32px 28px; background: #1B2A4A; border-radius: 10px; color: #fff; }
.block .mp-card h2 { margin-top: 8px; font-size: clamp(1.625rem, 2.4vw, 2rem); }
.block .mp-card p { max-width: none; }
.block p.mp-card__addr { margin-top: 14px; font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
.mp-facts { margin: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.mp-facts > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.mp-facts dt { font-size: .875rem; font-weight: 700; color: #C9D2DE; }
.mp-facts dd { margin: 0; font-size: .9375rem; }
.block .mp-facts a { color: #fff; }
.block p.mp-apps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.mp-apps span { flex-basis: 100%; font-size: .875rem; font-weight: 700; color: #C9D2DE; }
.mp-apps img { flex: none; width: 20px; height: 20px; }
.block.mp-band { padding-block: clamp(56px, 7vw, 96px); background: var(--paper); }
.mp-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mp-ways > li { padding: 28px 26px; background: #fff; border-radius: 10px; box-shadow: 0 10px 28px rgba(27, 42, 74, .08); }
.block .mp-ways h3 { margin-top: 18px; font-size: 1.1875rem; color: #1B2A4A; }
.mp-steps, .mp-notes { display: grid; gap: 10px; margin-top: 14px; }
.mp-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 10px; font-size: .9375rem; color: #2B3440; }
.mp-steps b { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: #1B2A4A; font-size: .75rem; color: #fff; }
.mp-steps li:first-child b { background: var(--action); }
.mp-notes li { position: relative; padding-left: 14px; font-size: .9375rem; color: #2B3440; }
.mp-notes li::before { content: ""; position: absolute; left: 0; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: #1B2A4A; }
@media (max-width: 1099px) {
  .mp-top { grid-template-columns: minmax(0, 1fr); }
  .mp .map { min-height: 380px; }
  .mp-ways { gap: 16px; }
  .mp-ways > li { padding: 24px 20px; }
}
@media (max-width: 767px) {
  .mp .map { min-height: 300px; }
  .mp .map picture img { max-height: 300px; }
  .mp-card { padding: 24px 18px; }
  .mp-ways { grid-template-columns: minmax(0, 1fr); }
}
/* CI규정: 소개 + 심볼 무대 → 심볼의 의미(회색 띠) → 로고 조합 · 컬러 · 내려받기 */
.ci-hero { padding-block: clamp(48px, 6vw, 88px); }
.ci-hero__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 56px; }
.ci-hero h2 { margin-top: 14px; font-size: clamp(1.75rem, 3.2vw, 2.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: #1B2A4A; }
.ci-hero__text > p:not([class]) { max-width: 34em; margin-top: 20px; font-size: 1.0625rem; color: var(--muted); }
.ci-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ci-stage { display: grid; place-items: center; margin: 0; aspect-ratio: 16 / 10; background-color: var(--paper); background-image: linear-gradient(#E3E7EC 1px, transparent 1px), linear-gradient(90deg, #E3E7EC 1px, transparent 1px); background-size: 24px 24px; border-radius: 12px; } /* 로고 제작 격자 느낌의 바탕 */
.ci-stage img { width: 52%; height: auto; }
.block.ci-band { padding-block: clamp(56px, 7vw, 96px); background: var(--paper); }
.ci-meaning { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ci-meaning > li { padding: 30px 28px; background: #fff; border-top: 4px solid var(--brand); border-radius: 0 0 10px 10px; box-shadow: 0 10px 28px rgba(27, 42, 74, .08); }
.ci-meaning__no { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--brand); }
.block .ci-meaning h3 { margin-top: 6px; font-size: 1.25rem; color: #1B2A4A; }
.block .ci-meaning p { max-width: none; margin-top: 10px; font-size: .9375rem; color: #2B3440; }
.block .ci-meaning p.ci-meaning__key { margin-top: 4px; padding-bottom: 14px; border-bottom: 1px solid #EEF1F5; font-size: .875rem; font-weight: 700; color: var(--brand); }
.block .ci-meaning p.ci-meaning__key + p { margin-top: 14px; }
.block.ci-body { padding-top: clamp(56px, 7vw, 96px); }
.block .ci-body .wrap > h3.ab-sub:first-child { margin-top: 0; }
.ci-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.ci-logos > li { overflow: hidden; background: #fff; border: 1px solid #D9DEE5; border-radius: 10px; }
.ci-logos__art { display: grid; place-items: center; height: 180px; padding: 24px; border-bottom: 1px solid #EEF1F5; }
.ci-logos__art--dark { background: #1B2A4A; border-bottom-color: #1B2A4A; }
.ci-logos__art img { width: min(80%, 260px); height: auto; }
.ci-logos strong, .ci-files strong { display: block; font-size: 1rem; color: #1B2A4A; }
.ci-logos strong { padding: 16px 20px 0; }
.ci-logos span { display: block; padding: 0 20px 16px; font-size: .875rem; color: #5A6472; }
.ci-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.ci-colors > li { display: grid; grid-template-columns: 140px minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid #D9DEE5; border-radius: 10px; }
.ci-colors__chip { min-height: 150px; }
.ci-colors__chip--red { background: #EF4328; }
.ci-colors__chip--black { background: #231F20; }
.ci-colors > li > div { padding: 20px 24px; }
.ci-colors strong { display: block; font-size: 1.125rem; color: #1B2A4A; }
.ci-colors > li > div > span { display: block; font-size: .875rem; color: #5A6472; }
.ci-colors dl { margin: 12px 0 0; }
.ci-colors dl > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 4px 0; }
.ci-colors dt { font-family: var(--font-display); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: #5A6472; }
.ci-colors dd { margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.ci-files { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.ci-files > li { display: flex; flex-direction: column; align-items: flex-start; padding: 18px 18px 20px; background: #fff; border: 1px solid #D9DEE5; border-radius: 8px; }
.ci-files span { font-size: .875rem; color: #5A6472; }
.ci-files .btn { margin-top: 14px; }
@media (max-width: 1099px) {
  .ci-hero__inner { gap: 32px; }
  .ci-meaning, .ci-logos { gap: 16px; }
  .ci-meaning > li { padding: 24px 20px; }
  .ci-files { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ci-hero__inner, .ci-meaning, .ci-logos, .ci-colors { grid-template-columns: minmax(0, 1fr); }
  .ci-logos__art { height: 140px; }
  .ci-colors > li { grid-template-columns: 96px minmax(0, 1fr); }
  .ci-colors__chip { min-height: 120px; }
  .ci-files { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* 메인(kr): 네이비 첫 화면(메시지 + 제품 화면 겹침) → 숫자 띠 → 솔루션 쇼케이스(탭 6) */
.block.hx-hero { padding-block: clamp(48px, 6vw, 88px) clamp(56px, 6vw, 80px); background: #1B2A4A; color: #fff; }
.hx-hero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 56px; }
.hx-hero h1 { margin-top: 14px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.block .hx-hero__text > p:not([class]) { max-width: 36em; margin-top: 20px; font-size: 1.0625rem; color: #C9D2DE; }
.block p.hx-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; margin-top: 32px; }
.hx-hero .btn--ghost { color: #fff; }
.hx-stage.modmap { position: relative; margin: 0; padding: 0 0 150px; background: none; }
.hx-stage .mock, .hx-stage .aiview { margin: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.hx-stage__main { width: 88%; margin-left: auto; } /* 뒤: 관제 화면(윗부분이 보이게) */
.hx-stage__sub { position: absolute; left: 0; top: 40%; width: 54%; } /* 앞 왼쪽: 생산 실적 */
.hx-stage__ai { position: absolute; right: -16px; top: 44%; width: 42%; } /* 앞 오른쪽: AI 브리핑(아래를 흐리게 잘라 낸다) */
.hx-stage__ai .aiview { min-height: 0; max-height: 230px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.hx-kpi { background: linear-gradient(to bottom, #1B2A4A 50%, var(--paper) 50%); } /* 카드가 네이비와 회색 경계에 걸치게 */
.hx-kpi__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; background: #fff; border-top: 4px solid var(--brand); border-radius: 0 0 10px 10px; box-shadow: 0 14px 34px rgba(27, 42, 74, .14); }
.hx-kpi__list > div { padding: 22px 24px; }
.hx-kpi__list > div + div { border-left: 1px solid var(--rule); }
.hx-kpi dt { font-size: .875rem; font-weight: 700; color: var(--muted); }
.hx-kpi dd { margin: 0; }
.hx-kpi b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: #1B2A4A; }
.hx-kpi em { margin-left: 3px; font-family: var(--font-body); font-size: 1rem; font-style: normal; font-weight: 700; }
.hx-kpi span { display: block; margin-top: 6px; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.block.hx-show { padding-block: clamp(56px, 7vw, 96px); background: var(--paper); }
.block p.hx-tabs__grp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: none; margin: 0 0 8px; }
.hx-tabs__grp span { padding-bottom: 6px; border-bottom: 2px solid #D9DEE5; font-size: .8125rem; font-weight: 700; text-align: center; color: #5A6472; }
.hx-tabs__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.hx-tabs__list [role="tab"] { padding: 14px 8px; background: #fff; border: 1px solid #D9DEE5; border-radius: 8px; font: inherit; font-size: 1.0625rem; font-weight: 700; color: #1B2A4A; cursor: pointer; transition: background-color .15s, color .15s; }
.hx-tabs__list [role="tab"]:hover { border-color: #1B2A4A; }
.hx-tabs__list [role="tab"][aria-selected="true"] { background: #1B2A4A; border-color: #1B2A4A; box-shadow: 0 8px 18px rgba(27, 42, 74, .2); color: #fff; }
.hx-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px; margin-top: 20px; padding: 40px; background: #fff; border-radius: 12px; box-shadow: 0 10px 28px rgba(27, 42, 74, .08); }
.hx-panel[hidden] { display: none; }
.block p.hx-panel__kind { max-width: none; font-size: .875rem; font-weight: 700; color: var(--brand); }
.block .hx-panel h3 { margin-top: 6px; font-family: var(--font-display); font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: 0; color: #1B2A4A; }
.hx-panel h3 small { margin-left: 8px; font-size: .5em; color: #5A6472; }
.block p.hx-panel__lead { max-width: none; margin-top: 12px; font-size: 1.0625rem; color: #2B3440; }
.hx-points { display: grid; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #EEF1F5; }
.hx-points li { position: relative; padding-left: 18px; }
.hx-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--brand); }
.hx-points strong { display: block; font-size: 1rem; color: #1B2A4A; }
.hx-points span { display: block; font-size: .9375rem; color: #5A6472; }
.hx-panel__text .btn { margin-top: 24px; }
.hx-panel__media.modmap { margin: 0; padding: 20px; }
.hx-panel__media .mock, .hx-panel__media .aiview, .block .hx-panel__media p.modmap__shot { margin: 0; }
/* 메인 2차: 통합 구성도(흰) → AI 특별 소개(네이비) → 산업 · 실적(회색) → 수명주기 · 인증(흰) */
.hx-more { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 700; color: var(--action); }
.hx-more::after { content: "→"; }
.block.hx-flow, .block.hx-ref, .block.hx-svc { padding-block: clamp(56px, 7vw, 96px); }
.hx-flow__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.hx-flow__list > li { position: relative; display: flex; }
.hx-flow__list > li + li::before { content: ""; position: absolute; left: -21px; top: 50%; width: 12px; height: 12px; border-top: 2px solid #8A94A3; border-right: 2px solid #8A94A3; transform: translateY(-50%) rotate(45deg); } /* 단계 사이 꺾쇠 */
.block .hx-flow__node { display: flex; flex: 1; flex-direction: column; padding: 22px 20px; background: #fff; border: 1px solid #D9DEE5; border-top: 4px solid #1B2A4A; border-radius: 0 0 10px 10px; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.block a.hx-flow__node:hover { box-shadow: 0 12px 26px rgba(27, 42, 74, .12); transform: translateY(-2px); }
.hx-flow__core .hx-flow__node { border-top-color: #D7262C; background: #FFF7F6; }
.hx-flow__no { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; color: var(--brand); }
.hx-flow__node strong { margin-top: 6px; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: #1B2A4A; }
.hx-flow__node span:not(.hx-flow__no) { margin-top: 4px; font-size: .9375rem; color: #2B3440; }
.hx-flow__node em { margin-top: auto; padding-top: 14px; font-size: .8125rem; font-style: normal; font-weight: 700; color: #5A6472; }
.block.hx-ai { padding-block: clamp(56px, 7vw, 96px); background: #1B2A4A; color: #fff; }
.hx-ai__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 56px; }
.block .hx-ai h2 { margin-top: 10px; font-size: clamp(1.75rem, 2.8vw, 2.375rem); line-height: 1.3; }
.block .hx-ai__text > p:not([class]) { max-width: 40em; margin-top: 18px; font-size: 1.0625rem; color: #C9D2DE; }
.hx-ai__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.hx-ai__steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; padding: 14px 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; }
.hx-ai__steps b { grid-row: span 2; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--brand); }
.hx-ai__steps strong { font-size: 1rem; }
.hx-ai__steps span { font-size: .875rem; line-height: 1.5; color: #C9D2DE; }
.block p.hx-ai__note { max-width: none; margin-top: 18px; padding-left: 12px; border-left: 3px solid var(--brand); font-size: .9375rem; color: #DCE3EC; }
.block p.hx-ai__btns { margin-top: 28px; }
.hx-ai__media.modmap { display: grid; gap: 14px; margin: 0; padding: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.hx-ai__media .aiview { min-height: 0; margin: 0; color: var(--mm-navy); }
.block.hx-ref { background: var(--paper); }
.hx-ind { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.hx-ind li { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 20px; background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(27, 42, 74, .06); }
.hx-ind strong { margin-top: 14px; font-size: 1.0625rem; color: #1B2A4A; }
.hx-ind span:not(.og-contact__ico) { margin-top: 2px; font-size: .875rem; line-height: 1.5; color: #5A6472; }
.hx-ref__row { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; margin-top: 24px; }
.block a.hx-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 10px 28px rgba(27, 42, 74, .08); color: inherit; text-decoration: none; }
.hx-case img { width: 100%; height: 100%; object-fit: cover; }
.hx-case__text { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; }
.block .hx-case h3 { margin-top: 6px; font-size: 1.375rem; color: #1B2A4A; }
.block .hx-case__text > p:not([class]) { max-width: none; margin-top: 10px; font-size: .9375rem; color: #2B3440; }
.block p.hx-case__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hx-case__chips span { padding: 1px 10px; background: #EEF1F5; border-radius: 999px; font-size: .8125rem; font-weight: 700; line-height: 1.7; color: #1B2A4A; }
.hx-case .hx-more { margin-top: auto; padding-top: 18px; }
.block a.hx-case:hover .hx-more { text-decoration: underline; }
.hx-global { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; background: #1B2A4A; border-radius: 10px; color: #fff; }
.block p.hx-global__num { margin-top: 10px; font-size: 1.0625rem; font-weight: 700; }
.hx-global__num b { margin-right: 2px; font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; line-height: 1; }
.hx-global__num b + b, .hx-global__num b:last-of-type { margin-left: 10px; }
.block .hx-global > p:not([class]) { max-width: none; margin-top: 12px; font-size: .9375rem; color: #C9D2DE; }
.hx-global__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hx-global__list li { padding: 2px 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; font-size: .8125rem; font-weight: 700; }
.hx-global .hx-more { margin-top: auto; padding-top: 18px; color: #fff; }
/* 대외 인정(산업 · 실적 구역 안): 대표 인정 1장(네이비) + 기술 역량 4장 */
.hx-award { margin-top: 24px; padding: 28px; background: #fff; border-radius: 10px; box-shadow: 0 10px 28px rgba(27, 42, 74, .08); }
.hx-award__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 18px; }
.block .hx-award__head h3 { font-size: 1.25rem; color: #1B2A4A; }
.hx-award__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; }
.hx-award__ico { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #1B2A4A; }
.hx-award__ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hx-award__main { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; background: #1B2A4A; border-radius: 8px; color: #fff; }
.hx-award__main .hx-award__ico { background: var(--brand); }
.block p.hx-award__meta { margin-top: 14px; font-size: .875rem; font-weight: 700; color: #C9D2DE; }
.hx-award__main strong { margin-top: 2px; font-size: 1.25rem; line-height: 1.4; }
.block .hx-award__main > p:not([class]) { max-width: none; margin-top: 8px; font-size: .9375rem; color: #C9D2DE; }
.hx-award__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hx-award__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: center; column-gap: 14px; padding: 16px 18px; border: 1px solid #D9DEE5; border-radius: 8px; }
.hx-award__list .hx-award__ico { grid-row: span 2; align-self: center; }
.hx-award__list strong { font-size: 1rem; color: #1B2A4A; }
.hx-award__list span:not(.hx-award__ico) { font-size: .875rem; color: #5A6472; }
/* 서비스: 5단계 흐름선(컨설팅 빨강 · 유지보수 네이비) + 다시 진단으로 돌아가는 순환선 → 서비스 카드 2장 */
.hx-life__steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.hx-life__steps::before { content: ""; position: absolute; top: 22px; left: calc(10% - 6px); right: calc(10% - 6px); height: 3px; background: linear-gradient(to right, #D7262C 0 87.5%, #1B2A4A 87.5% 100%); } /* 첫 칸~끝 칸 가운데를 잇는 흐름선, 4·5단계 사이에서 색이 바뀐다 */
.hx-life__steps li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hx-life__no { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #D7262C; box-shadow: 0 0 0 6px #fff; font-family: var(--font-display); font-weight: 600; color: #fff; }
.hx-life__steps li.is-sm .hx-life__no { background: #1B2A4A; }
.hx-life__steps strong { margin-top: 14px; font-size: 1.1875rem; color: #1B2A4A; }
.block .hx-life__steps p { max-width: none; margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: #2B3440; }
.block .hx-life__steps p.hx-life__out { align-self: stretch; margin-top: 12px; padding: 8px 12px; background: #FFF7F6; border-radius: 6px; font-size: .875rem; font-weight: 700; color: #1B2A4A; }
.hx-life__out b { display: block; font-size: .75rem; color: #D7262C; }
.block .hx-life__steps li.is-sm p.hx-life__out { background: #EEF1F5; }
.hx-life__steps li.is-sm .hx-life__out b { color: #1B2A4A; }
.block p.hx-life__loop { position: relative; height: 40px; max-width: none; margin: 18px calc(10% - 6px) 0; border: 2px dashed #8A94A3; border-top: 0; border-radius: 0 0 14px 14px; } /* 5단계 아래에서 1단계 아래로 돌아가는 순환선 */
.hx-life__loop::before { content: ""; position: absolute; left: -8px; top: -12px; border: 7px solid transparent; border-top: 0; border-bottom: 10px solid #8A94A3; } /* 1단계를 가리키는 화살촉 */
.hx-life__loop span { position: absolute; left: 50%; bottom: -12px; padding: 0 12px; background: #fff; font-size: .875rem; font-weight: 700; white-space: nowrap; color: #5A6472; transform: translateX(-50%); }
.hx-svc2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.block a.hx-svccard { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; background: #fff; border: 1px solid #D9DEE5; border-top: 4px solid #D7262C; border-radius: 0 0 10px 10px; color: inherit; text-decoration: none; transition: box-shadow .15s; }
.block a.hx-svccard:hover { box-shadow: 0 12px 26px rgba(27, 42, 74, .12); }
.block a.hx-svccard--sm { border-top-color: #1B2A4A; }
.block p.hx-svccard__range { font-size: .875rem; font-weight: 700; color: #D7262C; }
.block .hx-svccard--sm p.hx-svccard__range { color: #1B2A4A; }
.block .hx-svccard h3 { margin-top: 6px; font-size: 1.375rem; color: #1B2A4A; }
.block .hx-svccard > p:not([class]) { max-width: none; margin-top: 10px; font-size: .9375rem; color: #2B3440; }
.hx-svccard__pts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hx-svccard__pts li { padding: 2px 10px; background: #EEF1F5; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: #1B2A4A; }
.hx-svccard .hx-more { margin-top: auto; padding-top: 20px; }
@media (max-width: 1099px) {
  .hx-flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hx-flow__list > li + li::before { display: none; } /* 줄이 바뀌면 단계 번호로 순서를 읽는다 */
  .hx-ai__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hx-ind { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-ref__row { grid-template-columns: minmax(0, 1fr); }
  .hx-award__body { grid-template-columns: minmax(0, 1fr); }
  .hx-life__steps { gap: 10px; }
}
@media (max-width: 767px) {
  .hx-flow__list, .hx-ai__steps { grid-template-columns: minmax(0, 1fr); }
  .hx-flow__list { gap: 8px; }
  .block .hx-flow__node { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 12px 16px; border-top-width: 3px; } /* 좁은 화면은 번호 | 이름 · 설명 한 줄씩 */
  .hx-flow__node strong { grid-column: 2; margin-top: 0; font-size: 1.0625rem; }
  .hx-flow__node span:not(.hx-flow__no) { grid-column: 2; margin-top: 0; }
  .hx-flow__no { grid-row: span 2; padding-top: 2px; }
  .hx-flow__node em { display: none; }
  .hx-ai__media .aiview + .aiview { display: none; } /* 좁은 화면은 AI 화면 한 장만 */
  .hx-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hx-ind li { padding: 16px; }
  .block a.hx-case { grid-template-columns: minmax(0, 1fr); }
  .hx-case img { aspect-ratio: 846 / 460; height: auto; }
  .hx-case__text, .hx-global { padding: 20px 18px; }
  .hx-award { padding: 20px 16px; }
  .hx-award__list { grid-template-columns: minmax(0, 1fr); }
  /* 좁은 화면: 세로 타임라인(번호 | 내용), 순환선 대신 안내 문장 */
  .hx-life__steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hx-life__steps::before { top: 0; bottom: 0; left: 22px; right: auto; width: 3px; height: auto; background: linear-gradient(to bottom, #D7262C 0 80%, #1B2A4A 80% 100%); }
  .hx-life__steps li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; align-items: start; text-align: left; }
  .hx-life__no { grid-row: span 3; }
  .hx-life__steps strong { margin-top: 10px; }
  .block .hx-life__steps p { margin-top: 4px; }
  .block p.hx-life__loop { height: auto; margin: 16px 0 0; border: 0; text-align: center; }
  .hx-life__loop::before { display: none; }
  .hx-life__loop span { position: static; padding: 0; white-space: normal; transform: none; }
  .hx-svc2 { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
  .block a.hx-svccard { padding: 22px 18px; }
}
@media (max-width: 1099px) {
  .hx-hero__inner, .hx-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hx-stage.modmap { max-width: 720px; }
  .hx-kpi__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* 위 3칸 + 아래 2칸(넓게) */
  .hx-kpi__list > div { grid-column: span 2; }
  .hx-kpi__list > div:nth-child(n+4) { grid-column: span 3; }
  .hx-kpi__list > div:nth-child(4) { border-left: 0; }
  .hx-kpi__list > div:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .block p.hx-tabs__grp { display: none; }
  .hx-tabs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-panel { padding: 28px; }
}
@media (max-width: 767px) {
  .hx-stage.modmap { padding: 0; }
  .hx-stage__main { width: 100%; }
  .hx-stage__sub { display: none; } /* 좁은 화면은 관제 화면 + AI 말풍선만 */
  .hx-stage__ai { position: static; width: auto; margin: -24px 12px 0; }
  .hx-kpi__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-kpi__list > div, .hx-kpi__list > div:nth-child(n+4) { grid-column: auto; padding: 16px; }
  .hx-kpi__list > div:nth-child(n) { border-left: 0; border-top: 1px solid var(--rule); }
  .hx-kpi__list > div:nth-child(-n+2) { border-top: 0; }
  .hx-kpi__list > div:nth-child(even) { border-left: 1px solid var(--rule); }
  .hx-kpi__list > div:last-child { grid-column: 1 / -1; }
  .hx-tabs__list { display: flex; overflow-x: auto; }
  .hx-tabs__list [role="tab"] { flex: none; padding: 10px 14px; font-size: .9375rem; }
  .hx-panel { padding: 20px 16px; }
  .hx-panel__media.modmap { padding: 12px; }
}
@media (max-width: 1099px) {
  .modmap__sources { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .modmap__sources li::after { display: none; } /* 두 줄로 바뀌면 연결선을 생략 */
  .modmap__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .modmap__steps li::after { display: none; }
  .modmap__depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modmap__flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .modmap__flow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 4단계는 3+1 대신 2×2 */
  .modmap__flow > .modmap__card::after { display: none; } /* 줄이 바뀌면 꺾쇠 대신 단계 번호로 순서를 읽는다 */
  .modmap__base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modmap__base > :first-child { grid-column: 1 / -1; }
  .modmap__base--4 > :first-child { grid-column: auto; }
  .block .modmap p.svc-phase { display: none; } /* 줄이 바뀌면 카드의 구분 배지로 읽는다 */
  .svc-stairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-stairs > li:nth-child(n) { margin-top: 0; }
  .rc-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-hero__inner { gap: 32px; }
  .rc-ideal { gap: 16px; }
  .rc-ideal > li { padding: 40px 20px 28px; }
}
@media (max-width: 767px) {
  .modmap__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .modmap__sources { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .modmap__steps, .modmap__outcome, .modmap__depts, .modmap__compare { grid-template-columns: 1fr; }
  .modmap__scen { padding: 14px 12px 16px; }
  .modmap__base { grid-template-columns: 1fr; }
  .modmap__card { padding: 14px 12px 12px; }
  .modmap__clients { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .modmap__client { flex-direction: column; gap: 10px; padding: 14px 12px; }
  .modmap__client::after { display: none; } /* 2줄 배치에서는 연결선을 생략 */
  .modmap__who { display: table; margin: 4px 0 0; }
  .modmap__core { flex-direction: column; margin: 20px 0; padding: 16px; text-align: center; }
  .block .modmap__core p { padding-left: 0; border-left: 0; }
  .modmap__items li { font-size: .875rem; }
  .modmap__feats { grid-template-columns: minmax(0, 1fr); gap: 12px; } /* 목업 안의 긴 줄이 카드를 화면 밖으로 밀지 않게 */
  .aiview__seg { flex: 1 1 auto; padding-inline: 4px; } /* 좁은 폭에서는 공정 막대를 글자 길이만큼 나눠 이름이 잘리지 않게 */
  .aiview__gantt-id { flex-basis: 46px; }
  .mock__kpis { gap: 6px; }
  .mock__kpis li { padding-inline: 6px; }
  .mock__kpis strong { font-size: 1rem; }
  .mock__split { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; } /* 그림 위, 정보 아래로 쌓는다 */
  .mock__side, .mock__hist { width: 100%; }
  .mock__kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock__bay { grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
  .mock__bay ul { gap: 3px; }
  .mock__bay li { padding: 2px 3px; border-left-width: 2px; font-size: .625rem; }
  .mock__bay b { font-size: .625rem; }
  .mock__fifo li { grid-template-columns: 18px minmax(0, 1fr) 40px auto; }
  .mock__fifo li > span:nth-child(3) { display: none; } /* 좁은 폭에서는 위치 칸을 숨긴다 */
  .mock__mvt li { grid-template-columns: 34px minmax(0, 1fr) 38px auto; }
  .mock__mvt span + span { display: none; }
  .mock__lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modmap__feat { padding: 12px; }
  .modmap__uses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .block .modmap p.svc-map__hd { display: none; }
  .svc-map li { grid-template-columns: 1fr; row-gap: 6px; padding: 12px 14px; }
  .svc-map li::after { display: none; }
  .svc-stairs { grid-template-columns: minmax(0, 1fr); }
  .svc-sys { grid-template-columns: minmax(0, 1fr); }
  .rc-docs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rc-privacy { padding: 4px 16px; }
  .rc-privacy > div { grid-template-columns: 1fr; gap: 2px; }
  .rc-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rc-sol li { padding: 12px; }
  .rc-ideal { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .rc-ideal > li { padding: 36px 20px 28px; }
  .rc-ideal__ico { width: 72px; height: 72px; }
  .rc-ideal__ico svg { width: 34px; height: 34px; }
  /* 비교표는 행마다 카드처럼 쌓고, 칸 앞에 '도입 전·후' 이름표(data-label)를 붙인다 */
  .modmap__ba, .modmap__ba tbody, .modmap__ba tr, .modmap__ba th, .modmap__ba td { display: block; width: auto; }
  .modmap__ba thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .modmap__ba tr { padding: 12px 14px; border-bottom: 1px solid var(--mm-line); }
  .modmap__ba tbody tr:last-child { border-bottom: 0; }
  .modmap__ba tbody th, .modmap__ba td, .modmap__ba td:nth-child(2), .modmap__ba td:last-child { width: auto; padding: 0; border: 0; background: none; white-space: normal; }
  .modmap__ba tbody th { margin-bottom: 6px; }
  .modmap__ba td, .modmap__ba td:last-child { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; }
  .modmap__ba td + td { margin-top: 4px; }
  .modmap__ba td::before, .modmap__ba td:last-child::before { content: attr(data-label); position: static; font-size: .75rem; font-weight: 700; color: var(--mm-gray); }
  .modmap__ba td:last-child::before { color: var(--mm-red); }
}

blockquote { margin: 0 0 32px; padding: 20px 28px; border-left: 4px solid var(--brand); background: var(--paper); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 600; }

.timeline { position: relative; display: grid; gap: 8px; margin-top: 32px; }
.timeline__year { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 32px; padding: 20px 0; border-top: 1px solid var(--rule); }
.timeline__year > h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.1; color: var(--ink); }
.timeline__items { display: grid; gap: 8px; }
.timeline__items > li { position: relative; padding-left: 48px; }
.timeline__month { position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand); }
@media (max-width: 560px) { .timeline__year { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; margin-top: 16px; }
.table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { padding: 12px 14px; border: 1px solid var(--rule); vertical-align: top; text-align: left; }
.table th { background: var(--paper); font-weight: 700; white-space: nowrap; }
.table ul { display: grid; gap: 2px; }

.info-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; }
.info-list dt { font-weight: 700; }
.info-list dd { margin: 0; }
@media (max-width: 560px) { .info-list { grid-template-columns: 1fr; gap: 2px; } .info-list dd { margin-bottom: 10px; } }
.meta-list { display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--muted); font-size: .9375rem; }

.map { position: relative; height: clamp(320px, 45vh, 480px); background: var(--paper); }
.map picture, .map > img { position: absolute; inset: 0; }
.map img { width: 100%; height: 100%; object-fit: cover; }
.map.is-live picture, .map.is-live > img { display: none; }

iframe.embed { display: block; width: 100%; min-height: 70vh; border: 1px solid var(--rule); }
.block video { width: 100%; max-width: 960px; margin-inline: auto; background: #000; }

/* 폼 */
.block .consult-anim { margin-bottom: clamp(40px, 6vw, 80px); } /* 1일 무상 컨설팅(kr) 신청 폼 제목 위 애니메이션 — .hs-ca의 margin: 0 auto보다 앞서게 .block을 붙인다 */
.form { margin-top: 8px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.form__field--wide { grid-column: 1 / -1; }
.form label { display: block; margin-bottom: 6px; font-weight: 700; font-size: .9375rem; }
.form input[type=text], .form input[type=email], .form input[type=date], .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #B9C2CB; border-radius: var(--radius); background: #fff; font: inherit; color: var(--ink);
}
.form textarea { min-height: 200px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--ink); }
.form__help { margin-top: 4px; font-size: .8125rem; color: var(--muted); }
.form__error { margin-top: 6px; font-size: .875rem; font-weight: 600; color: var(--action); }
.form [aria-invalid="true"] { border-color: var(--action); }
.form__errors { margin-bottom: 20px; padding: 14px 18px; border-left: 4px solid var(--action); background: #FDF0EE; }
.form__actions { margin-top: 28px; display: flex; justify-content: center; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__notes { margin-top: 16px; font-size: .875rem; color: var(--muted); }
.block p.form__group { grid-column: 1 / -1; max-width: none; margin: 8px 0 -6px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 1rem; font-weight: 800; } /* 항목 묶음 제목(회사·담당자 / 상담 내용) */
.block .form__grid > p.form__group:first-child { margin-top: 0; }
/* 개인정보 수집·이용 동의 */
.form__consent { padding: 18px 20px; background: var(--paper, #F5F7FA); border: 1px solid var(--rule); border-radius: 8px; }
.block p.form__consent-title { max-width: none; margin: 0 0 10px; font-size: .9375rem; font-weight: 800; }
.form__consent-rows { display: grid; gap: 4px; margin: 0; font-size: .875rem; }
.form__consent-rows div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.form__consent-rows dt { font-weight: 700; } .form__consent-rows dd { margin: 0; color: var(--muted); }
.form .form__check { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: .9375rem; cursor: pointer; }
.form__check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--action); }
@media (max-width: 767px) { .form__consent-rows div { grid-template-columns: 1fr; gap: 0; } .form__consent { padding: 14px; } }
@media (max-width: 767px) { .form__grid { grid-template-columns: 1fr; } }

/* 페이지 머리 도구 버튼 아이콘 */
.page-head__tools .btn svg { width: 16px; height: 16px; }
.map__canvas { position: absolute; inset: 0; }
.gnb__link.is-current { color: var(--ink); box-shadow: inset 0 -3px 0 var(--brand); }
.error-page { min-height: 40vh; }
.error-page .lead { margin-top: 12px; }
.error-page__action { margin-top: 24px; }
.is-zoomable { cursor: zoom-in; }
.zoom img { max-height: 80vh; width: auto; margin-inline: auto; }

/* 히어로 제목: 단어 중간에서 줄바꿈하지 않고(FACTOR/Y 방지), 글자 크기는 화면이 아니라 제목 칸 폭에 맞춘다 */
.hero__text { container-type: inline-size; }
.hero__title { overflow-wrap: normal; word-break: normal; hyphens: none; }
@supports (font-size: 1cqi) {
  .hero__title { font-size: clamp(2.75rem, 22cqi, 6.75rem); } /* FACTORY(약 4em 폭)가 칸 안에 들어가는 크기 */
}

/* 오시는길 대체 지도(기존 사이트의 지도 캡처 565×421): 늘리거나 잘라내지 않고 원래 크기로 가운데 — 회사 위치 핀이 보이게 */
.map { display: grid; place-items: center; }
.map picture, .map > img { position: static; inset: auto; }
.map picture img, .map > img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.map picture { height: 100%; width: 100%; display: grid; place-items: center; }
.map picture img, .map > img { max-height: clamp(320px, 45vh, 480px); } /* .map 높이와 같은 공식 — 부모 기준 %는 계산되지 않는다 */

/* ===== MES 생산현장 정보 흐름 애니메이션(sol_mes 왼쪽 그림, tools/make_mes_flow.py) ===== */
/* mesflow:start — tools/make_mes_flow.py 가 생성(직접 고치지 말 것)
   생산라인 3초 주기: 0~1.8초 정지(가공) · 1.8~3초 한 칸(2.1칸) 이동. 제품 하나는 12초에 투입→프레스→용접→검사 */
.mesflow { display: block; width: 100%; height: auto; font-family: var(--font-body); overflow: visible; }
.mesflow text { font-family: var(--font-body); }
.mesflow .belt { stroke-dasharray: 6 9.225; animation: mf-belt 3s infinite; }
@keyframes mf-belt { 0%, 60% { stroke-dashoffset: 0; animation-timing-function: ease-in-out; } 100% { stroke-dashoffset: -60.90; } }
.mesflow .prod { animation: mf-prod 12s infinite; }
.mesflow .pv { animation-duration: 12s; animation-timing-function: linear; animation-iteration-count: infinite; }
.mesflow .pv-raw { animation-name: mf-pv-raw; } .mesflow .pv-mid { animation-name: mf-pv-mid; }
.mesflow .pv-done { animation-name: mf-pv-done; } .mesflow .pv-ok { animation-name: mf-pv-ok; }
.mesflow .prod1, .mesflow .prod1 .pv { animation-delay: -3s; }
.mesflow .prod2, .mesflow .prod2 .pv { animation-delay: -6s; }
.mesflow .prod3, .mesflow .prod3 .pv { animation-delay: -9s; }
@keyframes mf-prod {
  0% { transform: translate(0px, -12px); opacity: 0; }
  4% { transform: translate(0px, 0px); opacity: 1; }
  15% { transform: translate(0px, 0px); animation-timing-function: ease-in-out; }
  25% { transform: translate(52.74px, 30.45px); }
  40% { transform: translate(52.74px, 30.45px); animation-timing-function: ease-in-out; }
  50% { transform: translate(105.48px, 60.90px); }
  65% { transform: translate(105.48px, 60.90px); animation-timing-function: ease-in-out; }
  75% { transform: translate(158.22px, 91.35px); }
  88% { transform: translate(158.22px, 91.35px); opacity: 1; }
  96%, 100% { transform: translate(158.22px, 77.35px); opacity: 0; }
}
@keyframes mf-pv-raw { 0%, 29.4% { opacity: 1; } 29.5%, 100% { opacity: 0; } } /* 프레스가 찍는 순간(3.54초)에 바뀐다 */
@keyframes mf-pv-mid { 0%, 29.4% { opacity: 0; } 29.5%, 59.9% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes mf-pv-done { 0%, 59.9% { opacity: 0; } 60%, 100% { opacity: 1; } } /* 용접 중(7.2초)에 바뀐다 */
@keyframes mf-pv-ok { 0%, 82.9% { opacity: 0; } 83%, 100% { opacity: 1; } } /* 검사 위치에서 PDA 스캔 뒤 합격 */
.mesflow .ram { animation: mf-ram 3s infinite; }
@keyframes mf-ram { 0%, 8% { transform: translateY(0px); animation-timing-function: ease-in; } 18%, 30% { transform: translateY(9.0px); animation-timing-function: ease-out; } 45%, 100% { transform: translateY(0px); } }
.mesflow .hit { transform-box: fill-box; transform-origin: center; animation: mf-hit 3s ease-out infinite; }
@keyframes mf-hit { 0%, 17% { opacity: 0; transform: scale(.5); } 19% { opacity: 1; transform: scale(1); } 34%, 100% { opacity: 0; transform: scale(1.8); } }
.mesflow .weld { animation: mf-weld 3s infinite; }
@keyframes mf-weld { 0%, 11% { opacity: 0; } 13% { opacity: 1; } 19% { opacity: .35; } 25% { opacity: 1; } 31% { opacity: .4; } 37% { opacity: 1; } 43% { opacity: .5; } 48%, 100% { opacity: 0; } }
.mesflow .spark { transform-box: fill-box; transform-origin: 50% 100%; animation: mf-spark .3s linear infinite alternate; }
@keyframes mf-spark { from { transform: scale(.55); } to { transform: scale(1.25); } }
.mesflow .prog { transform-box: fill-box; transform-origin: 100% 50%; animation: mf-prog 3s infinite; }
@keyframes mf-prog { 0%, 4% { transform: scaleX(0); } 48%, 58% { transform: scaleX(1); } 60%, 100% { transform: scaleX(0); } }
.mesflow .lamp-g { animation: mf-blink 1.4s steps(1) infinite; }
.mesflow .lamp-g.m2 { animation-delay: -.7s; }
.mesflow .led, .mesflow .live { animation: mf-blink 1.1s steps(1) infinite; }
.mesflow .led1 { animation-delay: -.3s; } .mesflow .led2 { animation-delay: -.6s; } .mesflow .led3 { animation-delay: -.9s; }
@keyframes mf-blink { 50% { opacity: .25; } }
.mesflow .arm { transform-box: fill-box; transform-origin: 20% 10%; animation: mf-arm 1.6s ease-in-out infinite alternate; }
.mesflow .arm3 { animation-duration: 1.9s; animation-delay: -.8s; }
@keyframes mf-arm { to { transform: rotate(-14deg); } }
.mesflow .scan { animation: mf-scan 1.2s ease-in-out infinite alternate; }
@keyframes mf-scan { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
.mesflow .tick { opacity: 0; animation: mf-tick 5.4s ease infinite; }
.mesflow .tick1 { animation-delay: .6s; } .mesflow .tick2 { animation-delay: 1.2s; }
@keyframes mf-tick { 0%, 15% { opacity: 0; } 25%, 85% { opacity: 1; } 100% { opacity: 0; } }
.mesflow .chart { stroke-dasharray: 90; animation: mf-draw 3s ease-in-out infinite; }
@keyframes mf-draw { 0% { stroke-dashoffset: 90; } 60%, 100% { stroke-dashoffset: 0; } }
.mesflow .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: mf-bar 3s ease-in-out infinite alternate; }
.mesflow .bar1 { animation-duration: 2.6s; animation-delay: -1.1s; } .mesflow .bar2 { animation-duration: 3.4s; animation-delay: -.4s; }
.mesflow .bar3 { animation-duration: 2.2s; animation-delay: -1.7s; } .mesflow .bar4 { animation-duration: 3.8s; animation-delay: -2.3s; }
@keyframes mf-bar { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.mesflow .ring { transform-box: fill-box; transform-origin: center; animation: mf-ring 3.2s ease-out infinite; }
.mesflow .ring-erp { animation-delay: -.8s; } /* ERP에 실적 점이 도착할 때(3.2초 주기) */
.mesflow .ring-mes { animation-duration: 2.4s; animation-delay: -1.5s; } /* fastMES에 LOT 점이 도착할 때 */
@keyframes mf-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.mesflow .orbit { stroke-dasharray: 4 10; animation: mf-orbit 1.4s linear infinite; }
@keyframes mf-orbit { to { stroke-dashoffset: -28; } }
.mesflow .lot { transform-box: fill-box; transform-origin: center; animation: mf-lot 1.2s ease-in-out infinite; }
@keyframes mf-lot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.mesflow.is-paused, .mesflow.is-paused * { animation-play-state: paused !important; }
/* mesflow:end */
/* wmsflow:start — tools/make_wms_flow.py 가 생성(직접 고치지 말 것). 한 주기 16초(라인출고 8초) */
.wmsflow .w-f1, .wmsflow .w-f1-fork, .wmsflow .w-pick, .wmsflow .w-f2, .wmsflow .w-f2-fork, .wmsflow .w-line { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.wmsflow .w-rcv, .wmsflow .w-rcv-ok, .wmsflow .w-f1-load, .wmsflow .w-slot, .wmsflow .w-pk, .wmsflow .w-cb, .wmsflow .w-pal, .wmsflow .w-pal-add, .wmsflow .w-pal-wrap, .wmsflow .w-pal-ok, .wmsflow .w-f2-load, .wmsflow .w-truck-new, .wmsflow .w-doc { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: linear; }
.wmsflow .w-line, .wmsflow .w-lb, .wmsflow .w-conv { animation-duration: 8s; }
.wmsflow .w-lb, .wmsflow .w-conv { animation-iteration-count: infinite; animation-timing-function: linear; }
.wmsflow .w-f1 { animation-name: w-f1; } .wmsflow .w-f1-fork { animation-name: w-f1-fork; } .wmsflow .w-f1-load { animation-name: w-f1-load; }
.wmsflow .w-rcv { animation-name: w-rcv; } .wmsflow .w-rcv-ok { animation-name: w-rcv-ok; } .wmsflow .w-slot { animation-name: w-slot; }
.wmsflow .w-pick { animation-name: w-pick; } .wmsflow .w-pk1 { animation-name: w-pk1; } .wmsflow .w-pk2 { animation-name: w-pk2; }
.wmsflow .w-cb0 { animation-name: w-cb0; } .wmsflow .w-cb1 { animation-name: w-cb1; }
.wmsflow .w-pal { animation-name: w-pal; } .wmsflow .w-pal-add { animation-name: w-pal-add; } .wmsflow .w-pal-wrap { animation-name: w-pal-wrap; } .wmsflow .w-pal-ok { animation-name: w-pal-ok; }
.wmsflow .w-f2 { animation-name: w-f2; } .wmsflow .w-f2-fork { animation-name: w-f2-fork; } .wmsflow .w-f2-load { animation-name: w-f2-load; } .wmsflow .w-truck-new { animation-name: w-truck-new; }
.wmsflow .w-line { animation-name: w-line; } .wmsflow .w-lb { animation-name: w-lb; } .wmsflow .w-conv { animation-name: w-conv; }
.wmsflow .w-doc { animation-name: w-doc; transform-box: fill-box; transform-origin: center; }
.wmsflow .w-belt { stroke-dasharray: 5 7; animation: w-belt .8s linear infinite; }
@keyframes w-belt { to { stroke-dashoffset: -12; } }
.wmsflow .w-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: 16s linear infinite; }
.wmsflow .w-ring-rcv { animation-name: w-ring-rcv; } .wmsflow .w-ring-pick { animation-name: w-ring-pick; } .wmsflow .w-ring-dock { animation-name: w-ring-dock; }
.wmsflow .w-ring-line { animation-name: w-ring-line; animation-duration: 8s; }
@keyframes w-f1 { 0.000% { transform: translate(0.00px, 0.00px); } 15.625% { transform: translate(0.00px, 0.00px); } 25.000% { transform: translate(21.82px, -12.60px); } 43.750% { transform: translate(67.90px, -39.20px); } 50.000% { transform: translate(67.90px, -39.20px); } 56.250% { transform: translate(95.78px, -55.30px); } 59.375% { transform: translate(95.78px, -55.30px); } 65.625% { transform: translate(67.90px, -39.20px); } 71.875% { transform: translate(67.90px, -39.20px); } 93.750% { transform: translate(0.00px, 0.00px); } 100.000% { transform: translate(0.00px, 0.00px); } }
@keyframes w-f1-fork { 0.000% { transform: translate(0px, 0.00px); } 43.750% { transform: translate(0px, 0.00px); } 50.000% { transform: translate(0px, -28.00px); } 56.250% { transform: translate(0px, -28.00px); } 59.375% { transform: translate(0px, -26.60px); } 65.625% { transform: translate(0px, -26.60px); } 71.875% { transform: translate(0px, 0.00px); } 100.000% { transform: translate(0px, 0.00px); } }
@keyframes w-pick { 0.000% { transform: translate(0.00px, 0.00px); } 12.500% { transform: translate(0.00px, 0.00px); } 21.875% { transform: translate(35.16px, 20.30px); } 28.125% { transform: translate(35.16px, 20.30px); } 43.750% { transform: translate(117.00px, 67.55px); } 55.000% { transform: translate(117.00px, 67.55px); } 78.125% { transform: translate(0.00px, 0.00px); } 100.000% { transform: translate(0.00px, 0.00px); } }
@keyframes w-f2 { 0.000% { transform: translate(0.00px, 0.00px); } 57.500% { transform: translate(0.00px, 0.00px); } 62.500% { transform: translate(25.46px, 14.70px); } 75.000% { transform: translate(72.75px, 42.00px); } 78.750% { transform: translate(72.75px, 42.00px); } 82.500% { transform: translate(101.84px, 58.80px); } 84.375% { transform: translate(101.84px, 58.80px); } 87.500% { transform: translate(72.75px, 42.00px); } 90.625% { transform: translate(72.75px, 42.00px); } 100.000% { transform: translate(0.00px, 0.00px); } }
@keyframes w-f2-fork { 0.000% { transform: translate(0px, 0.00px); } 75.000% { transform: translate(0px, 0.00px); } 78.750% { transform: translate(0px, -28.00px); } 82.500% { transform: translate(0px, -28.00px); } 84.375% { transform: translate(0px, -26.60px); } 87.500% { transform: translate(0px, -26.60px); } 90.625% { transform: translate(0px, 0.00px); } 100.000% { transform: translate(0px, 0.00px); } }
@keyframes w-line { 0.000% { transform: translate(0.00px, 0.00px); } 6.250% { transform: translate(0.00px, 0.00px); } 37.500% { transform: translate(-48.50px, 28.00px); } 47.500% { transform: translate(-48.50px, 28.00px); } 78.750% { transform: translate(0.00px, 0.00px); } 100.000% { transform: translate(0.00px, 0.00px); } }
@keyframes w-rcv { 0% { opacity: 0; transform: translate(0px, -14px); } 5% { opacity: 1; transform: translate(0px, 0px); } 24.99% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes w-rcv-ok { 0.000% { opacity: 0; } 11.250% { opacity: 0; } 11.312% { opacity: 1; } 25.000% { opacity: 1; } 25.062% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-f1-load { 0.000% { opacity: 0; } 25.000% { opacity: 0; } 25.062% { opacity: 1; } 59.375% { opacity: 1; } 59.438% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-slot { 0.000% { opacity: 0; } 59.375% { opacity: 0; } 59.438% { opacity: 1; } 95.625% { opacity: 1; } 100.000% { opacity: 0; } }
@keyframes w-pk1 { 0.000% { opacity: 1; } 9.375% { opacity: 1; } 9.438% { opacity: 0; } 93.750% { opacity: 0; } 100.000% { opacity: 1; } }
@keyframes w-pk2 { 0.000% { opacity: 1; } 25.000% { opacity: 1; } 25.062% { opacity: 0; } 93.750% { opacity: 0; } 100.000% { opacity: 1; } }
@keyframes w-cb0 { 0.000% { opacity: 0; } 9.375% { opacity: 0; } 9.438% { opacity: 1; } 47.500% { opacity: 1; } 47.562% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-cb1 { 0.000% { opacity: 0; } 25.000% { opacity: 0; } 25.062% { opacity: 1; } 47.500% { opacity: 1; } 47.562% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-pal { 0% { opacity: 0; transform: translate(0px, -14px); } 3% { opacity: 1; transform: translate(0px, 0px); } 62.49% { opacity: 1; } 62.5%, 100% { opacity: 0; } }
@keyframes w-pal-add { 0.000% { opacity: 0; } 47.500% { opacity: 0; } 47.562% { opacity: 1; } 62.500% { opacity: 1; } 62.562% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-pal-wrap { 0.000% { opacity: 0; } 53.750% { opacity: 0; } 53.812% { opacity: 1; } 62.500% { opacity: 1; } 62.562% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-pal-ok { 0.000% { opacity: 0; } 52.500% { opacity: 0; } 52.562% { opacity: 1; } 62.500% { opacity: 1; } 62.562% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-f2-load { 0.000% { opacity: 0; } 62.500% { opacity: 0; } 62.562% { opacity: 1; } 84.375% { opacity: 1; } 84.438% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-truck-new { 0.000% { opacity: 0; } 84.375% { opacity: 0; } 84.438% { opacity: 1; } 96.250% { opacity: 1; } 100.000% { opacity: 0; } }
@keyframes w-lb { 0% { opacity: 0; transform: translate(0px, -10px); } 5% { opacity: 1; transform: translate(0px, 0px); } 42.49% { opacity: 1; } 42.5%, 100% { opacity: 0; } }
@keyframes w-conv { 0%, 42.49% { opacity: 0; transform: translate(0px, 0px); } 42.5% { opacity: 1; transform: translate(0px, 0px); } 70% { opacity: 1; } 80%, 100% { opacity: 0; transform: translate(19.40px, 11.20px); } }
@keyframes w-doc { 0% { opacity: 0; transform: translate(0px, 0px); } 1.5% { opacity: 1; transform: translate(0px, 0px); } 7% { opacity: 1; transform: translate(-199.4px, 218.8px) scale(.8); } 8.5%, 100% { opacity: 0; transform: translate(-199.4px, 218.8px) scale(.8); } }
@keyframes w-ring-rcv { 0% { opacity: 0; transform: scale(.5); } 8.688% { opacity: 0; transform: scale(.5); } 8.750% { opacity: 1; transform: scale(.6); } 12.500% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes w-ring-pick { 0% { opacity: 0; transform: scale(.5); } 6.188% { opacity: 0; transform: scale(.5); } 6.250% { opacity: 1; transform: scale(.6); } 10.000% { opacity: 0; transform: scale(1.7); } 22.438% { opacity: 0; transform: scale(.5); } 22.500% { opacity: 1; transform: scale(.6); } 26.250% { opacity: 0; transform: scale(1.7); } 49.938% { opacity: 0; transform: scale(.5); } 50.000% { opacity: 1; transform: scale(.6); } 53.750% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes w-ring-dock { 0% { opacity: 0; transform: scale(.5); } 84.938% { opacity: 0; transform: scale(.5); } 85.000% { opacity: 1; transform: scale(.6); } 88.750% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes w-ring-line { 0% { opacity: 0; transform: scale(.5); } 37.375% { opacity: 0; transform: scale(.5); } 37.500% { opacity: 1; transform: scale(.6); } 45.000% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
/* wmsflow:end */
/* hmiflow:start — tools/make_hmi_flow.py 가 생성(직접 고치지 말 것). 알람 시나리오 12초 */
.hmiflow .h-flow { stroke-dasharray: 4 6; animation: h-flow .7s linear infinite; }
.hmiflow .h-belt { stroke-dasharray: 5 7; animation: h-belt 0.59s linear infinite; }
@keyframes h-belt { to { stroke-dashoffset: -12; } }
.hmiflow .h-powder { stroke-dasharray: 2 5; animation-duration: 1.2s; }
@keyframes h-flow { to { stroke-dashoffset: -10; } }
.hmiflow .h-in { animation-name: h-flow, h-in; animation-duration: .7s, 12s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes h-in { 0%, 58.33% { opacity: 1; } 58.75%, 87.50% { opacity: 0; } 87.92%, 100% { opacity: 1; } }
.hmiflow .h-vo, .hmiflow .h-vc { animation: 12s linear infinite; } .hmiflow .h-vo { animation-name: h-vo; } .hmiflow .h-vc { animation-name: h-vc; }
@keyframes h-vo { 0%, 58.33% { opacity: 1; } 58.75%, 87.50% { opacity: 0; } 87.92%, 100% { opacity: 1; } }
@keyframes h-vc { 0%, 58.33% { opacity: 0; } 58.75%, 87.50% { opacity: 1; } 87.92%, 100% { opacity: 0; } }
.hmiflow .h-lv { transform-box: fill-box; transform-origin: 50% 100%; }
.hmiflow .h-lv1 { animation: h-lv1 4s ease-in-out infinite alternate; }
@keyframes h-lv1 { from { transform: scaleY(.55); } to { transform: scaleY(.7); } }
.hmiflow .h-lv2 { animation: h-lv2 12s ease-in-out infinite; }
@keyframes h-lv2 { 0% { transform: scaleY(.55); } 56.67%, 60.00% { transform: scaleY(.97); } 95.83%, 100% { transform: scaleY(.55); } }
.hmiflow .h-silo { transform-box: fill-box; transform-origin: 50% 100%; animation: h-silo 12s ease-in-out infinite alternate; }
@keyframes h-silo { from { transform: scaleY(.85); } to { transform: scaleY(.55); } }
.hmiflow .h-beacon, .hmiflow .h-al, .hmiflow .h-alrow, .hmiflow .h-banner { opacity: 0; animation: 12s steps(1) infinite; }
.hmiflow .h-beacon { animation-name: h-alarm; } .hmiflow .h-al { animation-name: h-al; } .hmiflow .h-alrow, .hmiflow .h-banner { animation-name: h-alarm; }
@keyframes h-alarm { 41.67% { opacity: 1; } 45.83% { opacity: 0.25; } 50.00% { opacity: 1; } 54.17% { opacity: 0.25; } 58.33% { opacity: 1; } 62.50% { opacity: 0.25; } 66.67% { opacity: 1; } 70.83% { opacity: 0.25; } 0%, 41.58%, 75.00%, 100% { opacity: 0; } }
@keyframes h-al { 0%, 41.58% { opacity: 0; } 41.67%, 74.92% { opacity: 1; } 75.00%, 100% { opacity: 0; } }
.hmiflow .h-press { transform-box: fill-box; transform-origin: 50% 0%; animation: h-press 12s ease-in-out infinite; }
@keyframes h-press { 0%, 46.67% { transform: rotate(0deg); } 50.83%, 55.00% { transform: rotate(-150deg); } 59.17%, 100% { transform: rotate(0deg); } }
.hmiflow .h-spin { transform-box: fill-box; transform-origin: center; animation: h-spin .9s linear infinite; }
@keyframes h-spin { to { transform: rotate(360deg); } }
.hmiflow .h-needle { transform-box: fill-box; transform-origin: 50% 100%; animation: h-needle 2.4s ease-in-out infinite alternate; }
@keyframes h-needle { from { transform: rotate(-35deg); } to { transform: rotate(40deg); } }
.hmiflow .h-fm { transform-box: fill-box; transform-origin: 0 50%; animation: h-fm 1.6s ease-in-out infinite alternate; }
@keyframes h-fm { from { transform: scaleX(.4); } to { transform: scaleX(1); } }
.hmiflow .h-v { opacity: 0; animation: h-v 6s steps(1) infinite; } .hmiflow .h-v1 { animation-delay: -4s; } .hmiflow .h-v2 { animation-delay: -2s; }
@keyframes h-v { 0% { opacity: 1; } 33.33% { opacity: 0; } }
.hmiflow .h-bot { animation: h-bot 10s linear infinite; }
.hmiflow .h-be, .hmiflow .h-bf { animation: 10s linear infinite; } .hmiflow .h-be { animation-name: h-be; } .hmiflow .h-bf { animation-name: h-bf; }
.hmiflow .h-bot1, .hmiflow .h-bot1 .h-be, .hmiflow .h-bot1 .h-bf { animation-delay: -2.0s; } .hmiflow .h-bot2, .hmiflow .h-bot2 .h-be, .hmiflow .h-bot2 .h-bf { animation-delay: -4.0s; } .hmiflow .h-bot3, .hmiflow .h-bot3 .h-be, .hmiflow .h-bot3 .h-bf { animation-delay: -6.0s; } .hmiflow .h-bot4, .hmiflow .h-bot4 .h-be, .hmiflow .h-bot4 .h-bf { animation-delay: -8.0s; }
@keyframes h-bot { 0% { transform: translate(0px, 0px); opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translate(177.02px, 102.20px); opacity: 0; } }
@keyframes h-be { 0%, 20.55% { opacity: 1; } 20.65%, 100% { opacity: 0; } }
@keyframes h-bf { 0%, 20.55% { opacity: 0; } 20.65%, 100% { opacity: 1; } }
.hmiflow .h-eye { opacity: .15; animation: h-eye 2s linear infinite; animation-delay: 0.63s; }
@keyframes h-eye { 0%, 8% { opacity: 1; } 12%, 100% { opacity: .15; } }
.hmiflow .h-plus { opacity: 0; animation: h-plus 2s ease-out infinite; animation-delay: 0.63s; }
@keyframes h-plus { 0% { opacity: 1; transform: translateY(0px); } 40%, 100% { opacity: 0; transform: translateY(-12px); } }
/* hmiflow:end */
/* himbflow:start — tools/make_himb_flow.py 가 생성(직접 고치지 말 것) */
.himbflow .b-v { opacity: 0; animation: b-v 6s steps(1) infinite; } .himbflow .b-v1 { animation-delay: -4s; } .himbflow .b-v2 { animation-delay: -2s; }
@keyframes b-v { 0% { opacity: 1; } 33.33% { opacity: 0; } }
.himbflow .b-needle { transform-box: fill-box; transform-origin: 50% 100%; animation: b-needle 2.6s ease-in-out infinite alternate; }
@keyframes b-needle { from { transform: rotate(-50deg); } to { transform: rotate(45deg); } }
.himbflow .b-donut { transform-box: fill-box; transform-origin: center; animation: b-spin 8s linear infinite; }
@keyframes b-spin { to { transform: rotate(360deg); } }
.himbflow .b-card { animation: b-float 3s ease-in-out infinite alternate; } .himbflow .b-card1 { animation-delay: -1s; } .himbflow .b-card2 { animation-delay: -2s; }
@keyframes b-float { from { transform: translateY(3px); } to { transform: translateY(-4px); } }
.himbflow .b-merge { animation: b-merge 1.3s ease-in-out infinite alternate; }
@keyframes b-merge { from { opacity: .55; } to { opacity: 1; } }
/* himbflow:end */
/* aiflow:start — tools/make_ai_flow.py 가 생성(직접 고치지 말 것) */
.aiflow .ai-node { transform-box: fill-box; transform-origin: center; animation: ai-node 1.6s ease-in-out infinite alternate; }
.aiflow .ai-node1 { animation-delay: -.4s; } .aiflow .ai-node2 { animation-delay: -.8s; } .aiflow .ai-node3 { animation-delay: -1.2s; }
@keyframes ai-node { from { transform: scale(.75); opacity: .55; } to { transform: scale(1.25); opacity: 1; } }
.aiflow .ai-net { animation: ai-float 3.2s ease-in-out infinite alternate; }
@keyframes ai-float { from { transform: translateY(2px); } to { transform: translateY(-4px); } }
.aiflow .ai-alert { animation: ai-alert 1.2s steps(1) infinite; }
@keyframes ai-alert { 50% { opacity: .15; } }
.aiflow .ai-card { animation: ai-card 6s ease-in-out infinite; }
@keyframes ai-card { 0%, 25% { transform: translate(0px, 0px); } 40%, 60% { transform: translate(16.5px, 7px); } 75%, 100% { transform: translate(33px, 14px); } }
.aiflow .ai-type { transform-box: fill-box; transform-origin: 0 50%; animation: ai-type 4s ease-out infinite; }
.aiflow .ai-type1 { animation-name: ai-type1; } .aiflow .ai-type2 { animation-name: ai-type2; }
@keyframes ai-type { 0% { transform: scaleX(0); } 20%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ai-type1 { 0%, 20% { transform: scaleX(0); } 40%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ai-type2 { 0%, 40% { transform: scaleX(0); } 60%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.aiflow .ai-wrench { transform-box: fill-box; transform-origin: 20% 80%; animation: ai-wrench .8s ease-in-out infinite alternate; }
@keyframes ai-wrench { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.aiflow .ai-ok { transform-box: fill-box; transform-origin: center; animation: ai-ok 4s ease-out infinite; }
@keyframes ai-ok { 0%, 45% { opacity: 0; transform: scale(.4); } 55%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.aiflow .ai-tag { transform-box: fill-box; transform-origin: 50% 100%; animation: ai-tag 4.5s ease-out infinite; }
.aiflow .ai-tag1 { animation-name: ai-tag1; } .aiflow .ai-tag2 { animation-name: ai-tag2; }
@keyframes ai-tag { 0% { opacity: 0; transform: scale(.3); } 12%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes ai-tag1 { 0%, 20% { opacity: 0; transform: scale(.3); } 32%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes ai-tag2 { 0%, 40% { opacity: 0; transform: scale(.3); } 52%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.aiflow .ai-dot { animation: ai-dot .9s ease-in-out infinite alternate; } .aiflow .ai-dot1 { animation-delay: -.3s; } .aiflow .ai-dot2 { animation-delay: -.6s; }
@keyframes ai-dot { from { transform: translateY(1.5px); opacity: .5; } to { transform: translateY(-1.5px); opacity: 1; } }
.aiflow .ai-join { animation: ai-join 5s ease-out infinite; }
@keyframes ai-join { 0%, 15% { opacity: 0; transform: translateX(12px); } 30%, 90% { opacity: 1; transform: translateX(0px); } 100% { opacity: 0; transform: translateX(0px); } }
/* aiflow:end */

/* 솔루션 주요 기능 카드(AI 에이전트 페이지) */
.feats-head { margin-top: clamp(40px, 6vw, 72px); padding-bottom: 12px; }
.feats { margin-top: 24px; }
.feat { border-top: 2px solid var(--ink); padding-top: 14px; }
.feat h4 { font-size: 1.0625rem; font-weight: 800; line-height: 1.4; }
.feat p { margin-top: 6px; color: var(--muted); font-size: .9375rem; line-height: 1.65; }

/* 접수 완료 페이지(원본 row에 칸 없이 아이콘·문구·버튼만 있음) — 가운데 정렬 묶음 */
.done { display: grid; justify-items: center; text-align: center; padding-block: clamp(16px, 4vw, 48px); }
.done .figure img { width: min(240px, 60vw); height: auto; }
.block .done h2 { max-width: 44ch; margin-top: 8px; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.55; }
.block .done h2 + * { margin-top: 28px; }
.done__check { width: 72px; height: 72px; margin-bottom: 8px; } .done__check circle { fill: #E6F4EA; stroke: #3DAA6A; stroke-width: 2.5; } .done__check path { fill: none; stroke: #1E6B34; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.block .done .lead { margin-top: 12px; }
.done__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 28px; }
.done__steps li { position: relative; padding: 6px 14px; background: #F5F7FA; border: 1px solid var(--rule); border-radius: 999px; font-size: .875rem; font-weight: 700; color: var(--muted); }
.done__steps li:not(:last-child)::after { content: "›"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.done__steps .is-done { background: #E6F4EA; border-color: #BFE3C8; color: #1E6B34; }
.block p.done__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: none; margin-top: 32px; }

/* 유지보수 신청: 입력 폼 대신 외부 시스템 링크(as.haesol.net, 2026-09-27) */
.as-link { display: grid; justify-items: center; gap: 16px; max-width: 720px; margin: 24px auto 0; padding: clamp(28px, 5vw, 48px) 20px; text-align: center; background: var(--paper); border: 1px solid var(--rule); }
.as-link p { max-width: 48ch; }
.as-link .as-link__url { color: var(--muted); font-size: .875rem; }
/* semiflow:start — tools/make_semi_flow.py 가 생성(직접 고치지 말 것). 전공정 22초(설비 4대 × 5초 + 돌아오기), 층 표시 66초, 후공정 3초 한 칸 */
.semiflow .sf-op { animation: sf-op 22s ease-in-out infinite; }
@keyframes sf-op { 0.00% { transform: translate(0.00px, 0.00px); } 18.64% { transform: translate(0.00px, 0.00px); } 22.73% { transform: translate(50.49px, 29.15px); } 41.36% { transform: translate(50.49px, 29.15px); } 45.45% { transform: translate(100.98px, 58.30px); } 64.09% { transform: translate(100.98px, 58.30px); } 68.18% { transform: translate(151.47px, 87.45px); } 86.82% { transform: translate(151.47px, 87.45px); } 100.00% { transform: translate(0.00px, 0.00px); } }
.semiflow .sf-hand { animation: sf-hand 22s linear infinite; }
@keyframes sf-hand { 0.00% { opacity: 1; } 1.14% { opacity: 1; } 1.68% { opacity: 0; } 18.18% { opacity: 0; } 18.73% { opacity: 1; } 23.86% { opacity: 1; } 24.41% { opacity: 0; } 40.91% { opacity: 0; } 41.45% { opacity: 1; } 46.59% { opacity: 1; } 47.14% { opacity: 0; } 63.64% { opacity: 0; } 64.18% { opacity: 1; } 69.32% { opacity: 1; } 69.86% { opacity: 0; } 86.36% { opacity: 0; } 86.91% { opacity: 1; } 100.00% { opacity: 1; } }
.semiflow .sf-pop, .semiflow .sf-tpop { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation-duration: 22s; animation-iteration-count: infinite; animation-timing-function: ease-out; }
.semiflow .sf-pop-in { animation-name: sf-pop-in; } .semiflow .sf-pop-out { animation-name: sf-pop-out; }
@keyframes sf-pop-in { 0.00% { opacity: 0; transform: scale(.6); } 2.27% { opacity: 0; transform: scale(.6); } 3.09% { opacity: 1; transform: scale(1); } 7.27% { opacity: 1; transform: scale(1); } 8.09% { opacity: 0; transform: scale(.6); } 25.00% { opacity: 0; transform: scale(.6); } 25.82% { opacity: 1; transform: scale(1); } 30.00% { opacity: 1; transform: scale(1); } 30.82% { opacity: 0; transform: scale(.6); } 47.73% { opacity: 0; transform: scale(.6); } 48.55% { opacity: 1; transform: scale(1); } 52.73% { opacity: 1; transform: scale(1); } 53.55% { opacity: 0; transform: scale(.6); } 70.45% { opacity: 0; transform: scale(.6); } 71.27% { opacity: 1; transform: scale(1); } 75.45% { opacity: 1; transform: scale(1); } 76.27% { opacity: 0; transform: scale(.6); } 100.00% { opacity: 0; transform: scale(.6); } }
@keyframes sf-pop-out { 0.00% { opacity: 0; transform: scale(.6); } 16.82% { opacity: 0; transform: scale(.6); } 17.64% { opacity: 1; transform: scale(1); } 19.55% { opacity: 1; transform: scale(1); } 20.36% { opacity: 0; transform: scale(.6); } 39.55% { opacity: 0; transform: scale(.6); } 40.36% { opacity: 1; transform: scale(1); } 42.27% { opacity: 1; transform: scale(1); } 43.09% { opacity: 0; transform: scale(.6); } 62.27% { opacity: 0; transform: scale(.6); } 63.09% { opacity: 1; transform: scale(1); } 65.00% { opacity: 1; transform: scale(1); } 65.82% { opacity: 0; transform: scale(.6); } 85.00% { opacity: 0; transform: scale(.6); } 85.82% { opacity: 1; transform: scale(1); } 87.73% { opacity: 1; transform: scale(1); } 88.55% { opacity: 0; transform: scale(.6); } 100.00% { opacity: 0; transform: scale(.6); } }
.semiflow .sf-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: 22s linear infinite; }
.semiflow .sf-ring-fe { animation-name: sf-ring-fe; }
@keyframes sf-ring-fe { 0% { opacity: 0; transform: scale(.5); } 2.23% { opacity: 0; transform: scale(.5); } 2.27% { opacity: 1; transform: scale(.6); } 5.00% { opacity: 0; transform: scale(1.7); } 16.77% { opacity: 0; transform: scale(.5); } 16.82% { opacity: 1; transform: scale(.6); } 19.55% { opacity: 0; transform: scale(1.7); } 24.95% { opacity: 0; transform: scale(.5); } 25.00% { opacity: 1; transform: scale(.6); } 27.73% { opacity: 0; transform: scale(1.7); } 39.50% { opacity: 0; transform: scale(.5); } 39.55% { opacity: 1; transform: scale(.6); } 42.27% { opacity: 0; transform: scale(1.7); } 47.68% { opacity: 0; transform: scale(.5); } 47.73% { opacity: 1; transform: scale(.6); } 50.45% { opacity: 0; transform: scale(1.7); } 62.23% { opacity: 0; transform: scale(.5); } 62.27% { opacity: 1; transform: scale(.6); } 65.00% { opacity: 0; transform: scale(1.7); } 70.41% { opacity: 0; transform: scale(.5); } 70.45% { opacity: 1; transform: scale(.6); } 73.18% { opacity: 0; transform: scale(1.7); } 84.95% { opacity: 0; transform: scale(.5); } 85.00% { opacity: 1; transform: scale(.6); } 87.73% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
.semiflow .sf-ring-in { animation: sf-ring-in 3s linear infinite; } .semiflow .sf-ring-out { animation: sf-ring-out 3s linear infinite; }
@keyframes sf-ring-in { 0% { opacity: 0; transform: scale(.5); } 4.67% { opacity: 0; transform: scale(.5); } 5.00% { opacity: 1; transform: scale(.6); } 25.00% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes sf-ring-out { 0% { opacity: 0; transform: scale(.5); } 33.00% { opacity: 0; transform: scale(.5); } 33.33% { opacity: 1; transform: scale(.6); } 53.33% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
.semiflow .sf-fly { opacity: 0; } .semiflow .sf-fly, .semiflow .sf-flyy { animation-duration: 22s; animation-iteration-count: infinite; animation-timing-function: linear; }
.semiflow .sf-loop { animation: sf-loop 1s linear infinite; }
@keyframes sf-loop { to { stroke-dashoffset: 12; } }
.semiflow .sf-lay { opacity: 0; animation: 66s linear infinite; }
.semiflow .sf-lay0 { animation-name: sf-lay0; }
@keyframes sf-lay0 { 0.00% { opacity: 1; } 33.33% { opacity: 1; } 33.79% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-lay1 { animation-name: sf-lay1; }
@keyframes sf-lay1 { 0.00% { opacity: 0; } 33.33% { opacity: 0; } 33.79% { opacity: 1; } 66.67% { opacity: 1; } 67.12% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-lay2 { animation-name: sf-lay2; }
@keyframes sf-lay2 { 0.00% { opacity: 0; } 66.67% { opacity: 0; } 67.12% { opacity: 1; } 100.00% { opacity: 1; } }
.semiflow .sf-port { animation: sf-port 22s ease-out infinite; } .semiflow .sf-act { animation: sf-act 22s linear infinite; }
.semiflow .sf-run { animation: sf-run 22s linear infinite; }
.semiflow .sf-bar { transform-box: fill-box; transform-origin: 0% 50%; animation: sf-bar 22s linear infinite; }
.semiflow .sf-rpop { animation-name: sf-rpop; } .semiflow .sf-dpop { animation-name: sf-dpop; }
@keyframes sf-port { 0.00% { opacity: 0; transform: translate(0px, -12px); } 1.14% { opacity: 0; transform: translate(0px, -12px); } 2.27% { opacity: 1; transform: translate(0px, 0px); } 18.18% { opacity: 1; transform: translate(0px, 0px); } 19.32% { opacity: 0; transform: translate(0px, -12px); } 100.00% { opacity: 0; transform: translate(0px, -12px); } }
@keyframes sf-act { 0.00% { opacity: 0; } 8.64% { opacity: 0; } 9.55% { opacity: 1; } 15.91% { opacity: 1; } 16.82% { opacity: 0; } 100.00% { opacity: 0; } }
@keyframes sf-run { 0.00% { opacity: 0; } 6.82% { opacity: 0; } 7.27% { opacity: 1; } 16.82% { opacity: 1; } 17.27% { opacity: 0; } 100.00% { opacity: 0; } }
@keyframes sf-bar { 0.00% { transform: scaleX(0); } 8.64% { transform: scaleX(0); } 15.91% { transform: scaleX(1); } 18.18% { transform: scaleX(1); } 18.41% { transform: scaleX(0); } 100.00% { transform: scaleX(0); } }
@keyframes sf-rpop { 0.00% { opacity: 0; transform: scale(.6); } 6.82% { opacity: 0; transform: scale(.6); } 7.50% { opacity: 1; transform: scale(1); } 10.45% { opacity: 1; transform: scale(1); } 11.14% { opacity: 0; transform: scale(.6); } 100.00% { opacity: 0; transform: scale(.6); } }
@keyframes sf-dpop { 0.00% { opacity: 0; transform: scale(.6); } 11.14% { opacity: 0; transform: scale(.6); } 11.82% { opacity: 1; transform: scale(1); } 16.36% { opacity: 1; transform: scale(1); } 17.05% { opacity: 0; transform: scale(.6); } 100.00% { opacity: 0; transform: scale(.6); } }
.semiflow .sf-flot { animation-name: sf-flot; } .semiflow .sf-flot-y { animation-name: sf-flot-y; }
@keyframes sf-flot { 0.00% { opacity: 0; transform: translateX(0px); } 2.45% { opacity: 0; transform: translateX(0px); } 2.50% { opacity: 1; transform: translateX(0px); animation-timing-function: linear; } 6.59% { opacity: 1; transform: translateX(var(--dx)); } 6.64% { opacity: 0; transform: translateX(var(--dx)); } 6.68% { opacity: 0; transform: translateX(0px); } 17.00% { opacity: 0; transform: translateX(0px); } 17.05% { opacity: 1; transform: translateX(0px); animation-timing-function: linear; } 20.91% { opacity: 1; transform: translateX(var(--dx)); } 20.95% { opacity: 0; transform: translateX(var(--dx)); } 21.00% { opacity: 0; transform: translateX(0px); } 100.00% { opacity: 0; transform: translateX(0px); } } @keyframes sf-flot-y { 0.00% { transform: translateY(0px); } 2.50% { transform: translateY(0px); animation-timing-function: ease-out; } 6.59% { transform: translateY(var(--dy)); } 6.68% { transform: translateY(0px); } 17.05% { transform: translateY(0px); animation-timing-function: ease-out; } 20.91% { transform: translateY(var(--dy)); } 21.00% { transform: translateY(0px); } 100.00% { transform: translateY(0px); } }
.semiflow .sf-frcp { animation-name: sf-frcp; } .semiflow .sf-frcp-y { animation-name: sf-frcp-y; }
@keyframes sf-frcp { 0.00% { opacity: 0; transform: translateX(0px); } 2.68% { opacity: 0; transform: translateX(0px); } 2.73% { opacity: 1; transform: translateX(0px); animation-timing-function: linear; } 6.82% { opacity: 1; transform: translateX(var(--dx)); } 6.86% { opacity: 0; transform: translateX(var(--dx)); } 6.91% { opacity: 0; transform: translateX(0px); } 100.00% { opacity: 0; transform: translateX(0px); } } @keyframes sf-frcp-y { 0.00% { transform: translateY(0px); } 2.73% { transform: translateY(0px); animation-timing-function: ease-in; } 6.82% { transform: translateY(var(--dy)); } 6.91% { transform: translateY(0px); } 100.00% { transform: translateY(0px); } }
.semiflow .sf-fdat0 { animation-name: sf-fdat0; } .semiflow .sf-fdat0-y { animation-name: sf-fdat0-y; }
@keyframes sf-fdat0 { 0.00% { opacity: 0; transform: translateX(0px); } 9.50% { opacity: 0; transform: translateX(0px); } 9.55% { opacity: 1; transform: translateX(0px); animation-timing-function: linear; } 13.41% { opacity: 1; transform: translateX(var(--dx)); } 13.45% { opacity: 0; transform: translateX(var(--dx)); } 13.50% { opacity: 0; transform: translateX(0px); } 100.00% { opacity: 0; transform: translateX(0px); } } @keyframes sf-fdat0-y { 0.00% { transform: translateY(0px); } 9.55% { transform: translateY(0px); animation-timing-function: ease-out; } 13.41% { transform: translateY(var(--dy)); } 13.50% { transform: translateY(0px); } 100.00% { transform: translateY(0px); } }
.semiflow .sf-fdat1 { animation-name: sf-fdat1; } .semiflow .sf-fdat1-y { animation-name: sf-fdat1-y; }
@keyframes sf-fdat1 { 0.00% { opacity: 0; transform: translateX(0px); } 12.45% { opacity: 0; transform: translateX(0px); } 12.50% { opacity: 1; transform: translateX(0px); animation-timing-function: linear; } 16.36% { opacity: 1; transform: translateX(var(--dx)); } 16.41% { opacity: 0; transform: translateX(var(--dx)); } 16.45% { opacity: 0; transform: translateX(0px); } 100.00% { opacity: 0; transform: translateX(0px); } } @keyframes sf-fdat1-y { 0.00% { transform: translateY(0px); } 12.50% { transform: translateY(0px); animation-timing-function: ease-out; } 16.36% { transform: translateY(var(--dy)); } 16.45% { transform: translateY(0px); } 100.00% { transform: translateY(0px); } }
.semiflow .sf-d0 { --dx: 12.5px; --dy: -97.2px; } .semiflow .sf-d1 { --dx: 239.4px; --dy: 107.4px; } .semiflow .sf-d2 { --dx: 68.7px; --dy: -69.4px; } .semiflow .sf-d3 { --dx: 68.7px; --dy: -69.4px; } .semiflow .sf-d4 { --dx: -38.0px; --dy: -126.3px; } .semiflow .sf-d5 { --dx: 289.9px; --dy: 136.5px; } .semiflow .sf-d6 { --dx: 18.2px; --dy: -107.8px; } .semiflow .sf-d7 { --dx: 18.2px; --dy: -107.8px; } .semiflow .sf-d8 { --dx: -88.5px; --dy: -155.5px; } .semiflow .sf-d9 { --dx: 340.3px; --dy: 165.7px; } .semiflow .sf-d10 { --dx: -32.3px; --dy: -138.3px; } .semiflow .sf-d11 { --dx: -32.3px; --dy: -138.3px; } .semiflow .sf-d12 { --dx: -139.0px; --dy: -184.6px; } .semiflow .sf-d13 { --dx: 390.8px; --dy: 194.8px; } .semiflow .sf-d14 { --dx: -82.8px; --dy: -167.4px; } .semiflow .sf-d15 { --dx: -82.8px; --dy: -167.4px; }
.semiflow .sf-k1 { animation-delay: -17s; } .semiflow .sf-k2 { animation-delay: -12s; } .semiflow .sf-k3 { animation-delay: -7s; }
.semiflow .sf-shot { opacity: .12; animation: sf-shot 1.35s steps(1) infinite; }
.semiflow .sf-shot0 { animation-delay: -1.35s; } .semiflow .sf-shot1 { animation-delay: -1.20s; } .semiflow .sf-shot2 { animation-delay: -1.05s; } .semiflow .sf-shot3 { animation-delay: -0.90s; } .semiflow .sf-shot4 { animation-delay: -0.75s; } .semiflow .sf-shot5 { animation-delay: -0.60s; } .semiflow .sf-shot6 { animation-delay: -0.45s; } .semiflow .sf-shot7 { animation-delay: -0.30s; } .semiflow .sf-shot8 { animation-delay: -0.15s; }
@keyframes sf-shot { 0% { opacity: 1; } 11.1%, 100% { opacity: .15; } }
.semiflow .sf-halo { transform-box: fill-box; transform-origin: center; animation: sf-halo .9s ease-in-out infinite alternate; }
@keyframes sf-halo { from { transform: scale(.8); opacity: .25; } to { transform: scale(1.15); opacity: .7; } }
.semiflow .sf-plasma { animation: sf-plasma .35s steps(2) infinite; }
@keyframes sf-plasma { 50% { opacity: .55; } }
.semiflow .sf-spin { animation: sf-spin .5s linear infinite; } .semiflow .sf-spinb { animation: sf-spin .35s linear infinite; }
@keyframes sf-spin { to { stroke-dashoffset: -12; } }
.semiflow .sf-drop { animation: sf-drop .8s ease-in infinite; }
@keyframes sf-drop { 0% { transform: translate(0px, 0px); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(0px, 9px); opacity: 0; } }
.semiflow .sf-fall { animation: sf-fall 1s linear infinite; } .semiflow .sf-fall1 { animation-delay: -.33s; } .semiflow .sf-fall2 { animation-delay: -.66s; }
@keyframes sf-fall { from { transform: translate(0px, -2px); opacity: 1; } to { transform: translate(0px, 6px); opacity: 0; } }
.semiflow .sf-belt { stroke-dasharray: 6 3.938; animation: sf-belt 3s infinite; }
@keyframes sf-belt { 0%, 60% { stroke-dashoffset: 0; animation-timing-function: ease-in-out; } 100% { stroke-dashoffset: -39.75; } }
.semiflow .sf-prod { animation: sf-prod 18s infinite; }
@keyframes sf-prod { 0.00% { opacity: 0; transform: translate(15.49px, -8.94px); } 2.22% { opacity: 1; transform: translate(0.00px, 0.00px); } 10.00% { opacity: 1; transform: translate(0.00px, 0.00px); animation-timing-function: ease-in-out; } 16.67% { opacity: 1; transform: translate(-34.42px, 19.88px); } 26.67% { opacity: 1; transform: translate(-34.42px, 19.88px); animation-timing-function: ease-in-out; } 33.33% { opacity: 1; transform: translate(-68.85px, 39.75px); } 43.33% { opacity: 1; transform: translate(-68.85px, 39.75px); animation-timing-function: ease-in-out; } 50.00% { opacity: 1; transform: translate(-103.27px, 59.62px); } 60.00% { opacity: 1; transform: translate(-103.27px, 59.62px); animation-timing-function: ease-in-out; } 66.67% { opacity: 1; transform: translate(-137.70px, 79.50px); } 76.67% { opacity: 1; transform: translate(-137.70px, 79.50px); animation-timing-function: ease-in-out; } 83.33% { opacity: 1; transform: translate(-172.12px, 99.38px); } 93.33% { opacity: 1; transform: translate(-172.12px, 99.38px); animation-timing-function: ease-in-out; } 97.78% { opacity: 1; transform: translate(-187.61px, 108.32px); } 100.00% { opacity: 0; transform: translate(-189.33px, 109.31px); } }
.semiflow .sf-pv { opacity: 0; animation-duration: 18s; animation-timing-function: linear; animation-iteration-count: infinite; }
.semiflow .sf-prod1, .semiflow .sf-prod1 .sf-pv { animation-delay: -3s; } .semiflow .sf-prod2, .semiflow .sf-prod2 .sf-pv { animation-delay: -6s; } .semiflow .sf-prod3, .semiflow .sf-prod3 .sf-pv { animation-delay: -9s; } .semiflow .sf-prod4, .semiflow .sf-prod4 .sf-pv { animation-delay: -12s; } .semiflow .sf-prod5, .semiflow .sf-prod5 .sf-pv { animation-delay: -15s; }
.semiflow .sf-pv0 { animation-name: sf-pv0; }
@keyframes sf-pv0 { 0.00% { opacity: 1; } 5.00% { opacity: 1; } 5.33% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-pv1 { animation-name: sf-pv1; }
@keyframes sf-pv1 { 0.00% { opacity: 0; } 5.00% { opacity: 0; } 5.33% { opacity: 1; } 21.67% { opacity: 1; } 22.00% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-pv2 { animation-name: sf-pv2; }
@keyframes sf-pv2 { 0.00% { opacity: 0; } 21.67% { opacity: 0; } 22.00% { opacity: 1; } 38.33% { opacity: 1; } 38.67% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-pv3 { animation-name: sf-pv3; }
@keyframes sf-pv3 { 0.00% { opacity: 0; } 38.33% { opacity: 0; } 38.67% { opacity: 1; } 55.00% { opacity: 1; } 55.33% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-pv4 { animation-name: sf-pv4; }
@keyframes sf-pv4 { 0.00% { opacity: 0; } 55.00% { opacity: 0; } 55.33% { opacity: 1; } 71.67% { opacity: 1; } 72.00% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-pv5 { animation-name: sf-pv5; }
@keyframes sf-pv5 { 0.00% { opacity: 0; } 71.67% { opacity: 0; } 72.00% { opacity: 1; } 100.00% { opacity: 1; } }
.semiflow .sf-ok { animation-name: sf-ok; transform-box: fill-box; transform-origin: center; }
@keyframes sf-ok { 0.00% { opacity: 0; transform: scale(.6); } 88.33% { opacity: 0; transform: scale(.6); } 88.89% { opacity: 1; transform: scale(1); } 98.33% { opacity: 1; transform: scale(1); } 98.89% { opacity: 0; transform: scale(.6); } 100.00% { opacity: 0; transform: scale(.6); } }
.semiflow .sf-grind { animation: sf-grind 3s ease-in-out infinite; }
@keyframes sf-grind { 0%, 6% { transform: translate(0px, -3.18px); } 16%, 50% { transform: translate(0px, 0.00px); } 60%, 100% { transform: translate(0px, -3.18px); } }
.semiflow .sf-slurry { opacity: 0; animation: sf-slurry 3s linear infinite; } .semiflow .sf-slurry1 { animation-delay: -.25s; } .semiflow .sf-slurry2 { animation-delay: -.5s; }
@keyframes sf-slurry { 0%, 12% { opacity: 0; transform: translate(0px, -4px); } 14% { opacity: 1; } 22% { opacity: 0; transform: translate(0px, 8px); } 23%, 28% { opacity: 0; transform: translate(0px, -4px); } 30% { opacity: 1; } 38% { opacity: 0; transform: translate(0px, 8px); } 100% { opacity: 0; } }
.semiflow .sf-dice { animation: sf-dice 3s ease-in-out infinite; }
@keyframes sf-dice { 0%, 8% { transform: translate(4.59px, -2.65px); } 22% { transform: translate(-4.59px, 2.65px); } 34% { transform: translate(4.59px, -2.65px); } 46% { transform: translate(-4.59px, 2.65px); } 56%, 100% { transform: translate(4.59px, -2.65px); } }
.semiflow .sf-spray { opacity: 0; animation: sf-spray 3s steps(1) infinite; }
@keyframes sf-spray { 8% { opacity: 1; } 54% { opacity: 0; } }
.semiflow .sf-da { animation: sf-da 3s ease-in-out infinite; }
@keyframes sf-da { 0%, 10% { transform: translate(0px, -7.95px); } 24%, 30% { transform: translate(0px, 0.00px); } 42%, 100% { transform: translate(0px, -7.95px); } }
.semiflow .sf-dadie { animation: sf-dadie 3s steps(1) infinite; }
@keyframes sf-dadie { 0% { opacity: 1; } 30% { opacity: 0; } 70% { opacity: 1; } }
.semiflow .sf-wb { animation: sf-wb 3s ease-in-out infinite; }
@keyframes sf-wb { 8% { transform: translate(0px, -3.71px); } 14% { transform: translate(0px, 0.00px); } 20% { transform: translate(0px, -3.71px); } 26% { transform: translate(0px, 0.00px); } 32% { transform: translate(0px, -3.71px); } 38% { transform: translate(0px, 0.00px); } 44% { transform: translate(0px, -3.71px); } 50% { transform: translate(0px, 0.00px); } 56%, 100% { transform: translate(0px, -3.71px); } }
.semiflow .sf-wbspark { opacity: 0; animation: sf-wbspark .25s steps(1) infinite; }
@keyframes sf-wbspark { 50% { opacity: 1; } }
.semiflow .sf-mold { animation: sf-mold 3s ease-in-out infinite; }
@keyframes sf-mold { 0%, 6% { transform: translate(0px, -7.95px); } 18%, 46% { transform: translate(0px, 0.00px); } 58%, 100% { transform: translate(0px, -7.95px); } }
.semiflow .sf-heatg { opacity: 0; animation: sf-heatg 3s ease-in-out infinite; }
@keyframes sf-heatg { 0%, 18% { opacity: 0; } 26%, 42% { opacity: .75; } 52%, 100% { opacity: 0; } }
.semiflow .sf-et { animation: sf-et 3s ease-in-out infinite; }
@keyframes sf-et { 0%, 10% { transform: translate(0px, -6.62px); } 20%, 40% { transform: translate(0px, 0.00px); } 52%, 100% { transform: translate(0px, -6.62px); } }
.semiflow .sf-pass { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: sf-pass 3s ease-out infinite; }
@keyframes sf-pass { 0%, 32% { opacity: 0; transform: scale(.6); } 36%, 56% { opacity: 1; transform: scale(1); } 62%, 100% { opacity: 0; transform: scale(.6); } }
/* semiflow:end */