/* Wavegram 메인 v2
   톤: IBM Carbon (Plex Sans KR, Gray/Blue 팔레트, 각진 타일)
   레이아웃: 큰 타이포, 넓은 여백, 중앙 정렬 히어로와 대형 화면 */

:root {
  --bg: #ffffff;
  --layer: #f4f4f4;
  --layer-2: #e8e8e8;
  --text: #161616;
  --text-2: #525252;
  --text-3: #8d8d8d;
  --border: #e0e0e0;
  --border-strong: #8d8d8d;
  --blue: #0f62fe;
  --blue-hover: #0353e9;
  --blue-10: #edf5ff;
  --blue-70: #0043ce;
  --green-10: #defbe6;
  --green-70: #0e6027;
  --purple-10: #f6f2ff;
  --purple-70: #6929c4;
  --red: #da1e28;
  --dark: #161616;
  --dark-layer: #262626;
  --dark-border: #393939;
  --dark-text: #f4f4f4;
  --dark-text-2: #c6c6c6;
  --font: 'IBM Plex Sans KR', 'IBM Plex Sans', 'Malgun Gothic', sans-serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Sans KR', monospace;
  --header-h: 64px;
  --ease: cubic-bezier(.2, 0, .38, .9);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.dark a:focus-visible, .dark button:focus-visible, .dark [tabindex]:focus-visible { outline-color: #fff; }
::selection { background: #d0e2ff; color: var(--text); }
[hidden] { display: none !important; }

.i { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.wrap { width: min(1312px, 100% - 64px); margin-inline: auto; }
.skip { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--blue); color: #fff; padding: 12px 16px; }
.skip:focus { top: 16px; }

/* ---------- 헤더 ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgb(255 255 255 / .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.header.scrolled { border-bottom-color: var(--border); }
.header-in { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; padding-left: 32px; }
.nav { display: flex; align-items: stretch; height: 100%; font-size: 14px; }
.nav > a:not(.btn) { display: flex; align-items: center; padding: 0 16px; color: var(--text-2); position: relative; transition: color .15s; }
.nav > a:not(.btn):hover { color: var(--text); }
.nav > a:not(.btn)::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform .2s var(--ease); }
.nav > a:not(.btn):hover::after { transform: scaleX(1); }
.nav-cta { height: 100%; margin-left: 16px; }
.menu-btn { display: none; width: 64px; height: 100%; background: none; border: 0; position: relative; }
.menu-btn span { position: absolute; left: 22px; width: 20px; height: 2px; background: var(--text); transition: transform .2s var(--ease), top .2s var(--ease); }
.menu-btn span:first-child { top: 27px; }
.menu-btn span:last-child { top: 35px; }
.menu-btn[aria-expanded=true] span:first-child { top: 31px; transform: rotate(45deg); }
.menu-btn[aria-expanded=true] span:last-child { top: 31px; transform: rotate(-45deg); }

/* ---------- 제품 메가 메뉴 ---------- */
.mega { position: static; display: flex; align-items: stretch; }
.mega-btn { display: flex; align-items: center; gap: 6px; padding: 0 16px; background: none; border: 0; font-size: 14px; color: var(--text-2); position: relative; }
.mega-btn .i { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.mega-btn:hover, .mega-btn[aria-expanded=true], .mega-btn[data-current] { color: var(--text); }
.mega-btn[aria-expanded=true] .i { transform: rotate(180deg); }
.mega-btn::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform .2s var(--ease); }
.mega-btn[aria-expanded=true]::after, .mega-btn[data-current]::after { transform: scaleX(1); }
.mega-panel { display: none; position: absolute; top: 100%; left: 32px; width: min(960px, calc(100vw - 64px)); background: #fff; border: 1px solid var(--border); box-shadow: 0 24px 48px -16px rgb(22 22 22 / .2); padding: 24px; grid-template-columns: repeat(3, 1fr); gap: 8px 24px; z-index: 60; }
.mega-btn[aria-expanded=true] + .mega-panel { display: grid; }
.mega-group { padding: 12px 0; border-top: 1px solid var(--border); }
.mega-title { display: block; font-size: 16px; font-weight: 500; padding: 4px 0; }
.mega-title small { display: block; font-size: 12px; font-weight: 400; color: var(--text-2); margin-top: 2px; }
.mega-title:hover { color: var(--blue); }
.mega-items { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.mega-items a { font-size: 13px; color: var(--text-2); padding: 4px 0; }
.mega-items a:hover, .mega-items a[aria-current] { color: var(--blue); }
.footer .footer-grid-6 { grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1fr 1fr 1.4fr; }
.footer-grid h4 a:hover { color: #fff; }

/* ---------- 버튼 · 링크 (Carbon) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
  min-height: 48px; padding: 0 16px;
  font-size: 14px; letter-spacing: .01em;
  border: 1px solid transparent;
  transition: background .12s, color .12s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-tertiary { border-color: var(--blue); color: var(--blue); background: rgb(255 255 255 / .6); }
.btn-tertiary:hover { background: var(--blue); color: #fff; }
.link-row { display: flex; gap: 32px; flex-wrap: wrap; }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 16px; margin-top: 32px; }
.link .i { transition: transform .2s var(--ease); }
.link:hover .i { transform: translateX(4px); }
.dark .link { color: #78a9ff; }

/* ---------- 히어로 ---------- */
.hero {
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 600px; max-height: 1100px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 24px 24px 72px;
  overflow: hidden;
}
.hero-wave {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 80%);
  mask-image: linear-gradient(to bottom, transparent 34%, #000 80%);
}
.hero-copy { position: relative; max-width: 1100px; }
h1 {
  font-size: clamp(38px, 6.2vw, 92px);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -.035em;
}
h1 .line { display: block; }
h1 .ch { opacity: 0; }
h1 .ch.on { opacity: 1; }
h1 .caret { display: inline-block; width: .06em; height: .95em; margin-left: .06em; background: var(--blue); vertical-align: -.1em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { margin-top: 20px; font-size: clamp(16px, 1.5vw, 20px); color: var(--text-2); line-height: 1.75; }
.hero-actions { margin-top: 40px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.hero-actions .btn { min-width: 200px; }

/* ---------- 글자 효과 ---------- */
.hsplit .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.hsplit .wd > span { display: inline-block; transform: translateY(115%); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.hsplit.hsplit-in .wd > span { transform: none; }
.hero-rotate { margin-top: 28px; min-height: 34px; font-size: clamp(16px, 1.5vw, 20px); color: var(--text-2); display: flex; justify-content: center; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hero-rotate .rot-name { font-family: var(--mono); color: var(--blue); font-weight: 500; }
.hero-rotate .rot-name::before { content: '> '; color: var(--text-3); }
.hero-rotate.typing .rot-desc::after, .hero-rotate:not(.typing) .rot-desc::after { content: ''; display: inline-block; width: 2px; height: 1em; background: var(--blue); margin-left: 3px; vertical-align: -.15em; animation: blink 1s steps(1) infinite; }
.bigtype { overflow: hidden; padding: 24px 0 120px; user-select: none; }
.bigtype-row { display: flex; gap: .5em; white-space: nowrap; font-size: clamp(64px, 13vw, 220px); font-weight: 600; letter-spacing: -.05em; line-height: 1.02; will-change: transform; margin-left: -20%; }
.bigtype-row span { color: var(--text); }
.bigtype-row span.o { color: transparent; -webkit-text-stroke: 1.5px var(--text); }
.bigtype-row span.b { color: var(--blue); }
.motion-toggle { background: none; border: 0; color: inherit; font-size: 12px; padding: 0; text-decoration: underline; }
.motion-toggle:hover { color: #fff; }
.footer-base > span, .footer-base > div { display: flex; gap: 20px; align-items: center; }

/* ---------- 대표 화면 ---------- */

.window { background: #fff; border: 1px solid var(--border); box-shadow: 0 40px 80px -24px rgb(22 22 22 / .18); }
.window-bar { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.window-bar strong { font-weight: 600; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--layer-2); }
.sample { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ws { display: grid; grid-template-columns: 200px minmax(0, 1fr) 320px; text-align: left; }
.ws-side { background: var(--layer); padding: 16px 0; display: flex; flex-direction: column; font-size: 13px; color: var(--text-2); }
.ws-side span { padding: 9px 16px; border-left: 3px solid transparent; }
.ws-side .ws-group { font-size: 11px; color: var(--text-3); letter-spacing: .04em; padding-top: 16px; }
.ws-side .on { background: var(--layer-2); border-left-color: var(--blue); color: var(--text); font-weight: 500; }
.ws-main { padding: 28px 32px 32px; min-width: 0; }
.ws-head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ws-title { font-size: 24px; font-weight: 400; letter-spacing: -.01em; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 24px; }
.kpi { background: #fff; padding: 16px; }
.kpi small { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.kpi b { font-size: 30px; font-weight: 300; letter-spacing: -.02em; }
.kpi em { font-style: normal; font-size: 14px; color: var(--text-2); margin-left: 2px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; white-space: nowrap; }
th { background: var(--layer-2); font-weight: 600; height: 40px; padding: 0 16px; }
td { height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--text-2); }
td:first-child { color: var(--text); }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 12px; font-size: 12px; background: var(--layer-2); color: var(--text); white-space: nowrap; }
.tag-blue { background: var(--blue-10); color: var(--blue-70); }
.tag-green { background: var(--green-10); color: var(--green-70); }
.tag-purple { background: var(--purple-10); color: var(--purple-70); }
.ws-echo { border-left: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; }
.ws-echo-head { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .04em; }
.spark { width: 14px; height: 14px; background: linear-gradient(135deg, var(--blue), #8a3ffc); display: inline-block; transform: rotate(45deg) scale(.8); flex-shrink: 0; }
.bubble { padding: 12px 14px; background: var(--layer); line-height: 1.6; font-size: 13px; }
.bubble.me { background: var(--blue-10); color: var(--blue-70); margin-left: 24px; }
.plan { display: grid; gap: 8px; color: var(--text-2); }
.plan li { display: flex; align-items: center; gap: 8px; }
.plan .i { width: 16px; height: 16px; fill: #198038; }

/* ---------- 소개 문장 ---------- */
.statement { padding: 160px 0; }
.statement p { font-size: clamp(28px, 4vw, 56px); font-weight: 300; line-height: 1.4; letter-spacing: -.025em; max-width: 1100px; }
[data-fill] .w { color: #c6c6c6; transition: color .25s; }
[data-fill] .w.on { color: var(--text); }
.dark [data-fill] .w { color: #525252; }
.dark [data-fill] .w.on { color: #fff; }

/* ---------- AI 응용 · 전체 제품 ---------- */
.ai { padding-top: 0; }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.ai-item { background: #fff; padding: 28px 28px 40px; min-height: 260px; }
.ai-num { font-family: var(--mono); font-size: 13px; color: var(--blue); }
.ai-item h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 40px 0 12px; }
.ai-item p { font-size: 15px; color: var(--text-2); line-height: 1.8; }
.catalog { margin-top: 96px; }
.catalog-head { margin-bottom: 8px; }
.catalog-list { margin: 0; border-top: 1px solid var(--text); }
.catalog-list > div { display: grid; grid-template-columns: 2fr 2.5fr 5fr; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--border); }
.catalog-list dt { font-size: 28px; font-weight: 300; letter-spacing: -.02em; }
.catalog-list dt a { display: inline-flex; align-items: center; gap: 12px; }
.catalog-list dt a::after { content: ''; width: 20px; height: 20px; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transition: opacity .15s, transform .2s var(--ease); }
.catalog-list dt a:hover { color: var(--blue); }
.catalog-list dt a:hover::after { opacity: 1; transform: translateX(4px); }
.catalog-list dd { margin: 0; font-size: 15px; }
.catalog-list dd.desc { color: var(--text-2); }

/* ---------- 숫자 · 레퍼런스 · 연혁 ---------- */
.numbers { padding: 96px 0 0; }
.numbers .stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--text); }
.numbers .stats > div { display: flex; flex-direction: column; padding: 24px 24px 0 0; }
.numbers .stats > div + div { padding-left: 24px; border-left: 1px solid var(--border); }
.numbers .stats dd { order: -1; margin: 0; font-size: clamp(40px, 5vw, 76px); font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--blue); }
.numbers .stats dt { margin-top: 12px; font-size: 14px; color: var(--text-2); }
.refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.refs-4 { grid-template-columns: repeat(4, 1fr); }
.ref { background: #fff; padding: 28px 24px 24px; min-height: 260px; display: flex; flex-direction: column; transition: background .15s; }
.ref:hover { background: var(--layer); }
.ref small { font-size: 15px; font-weight: 600; color: var(--blue); }
.ref h3 { font-size: 21px; font-weight: 400; letter-spacing: -.02em; line-height: 1.35; margin: 20px 0 12px; }
.ref p { font-size: 14px; color: var(--text-2); line-height: 1.75; }
.ref-tag { margin-top: auto; padding-top: 20px; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.timeline { border-top: 1px solid var(--text); }
.timeline li { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--border); }
.timeline .yr { font-size: clamp(36px, 4vw, 56px); font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--text); }
.timeline li:last-child .yr { color: var(--blue); }
.timeline b { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; }
.timeline p { font-size: 15px; color: var(--text-2); line-height: 1.8; }

/* ---------- 주요 고객사 ---------- */
.customers { padding-bottom: 96px; }
.customers .sec-head { margin-bottom: 40px; }
.marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 90s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { flex: 0 0 auto; padding: 36px 56px; font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--text-2); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
.customers .note { margin-top: 16px; }

/* ---------- 공통 섹션 ---------- */
.section { padding: 128px 0; }
.section.layer { background: var(--layer); }
.section.dark { background: var(--dark); color: var(--dark-text); }
.sec-head { max-width: 860px; margin-bottom: 64px; }
.eyebrow { font-family: var(--mono); font-size: 14px; color: var(--blue); letter-spacing: .02em; margin-bottom: 24px; }
.dark .eyebrow { color: #78a9ff; }
h2 { font-size: clamp(32px, 4.4vw, 60px); font-weight: 300; line-height: 1.22; letter-spacing: -.03em; }
.lead { margin-top: 24px; font-size: 18px; line-height: 1.75; color: var(--text-2); max-width: 640px; }
.dark .lead { color: var(--dark-text-2); }
.ticks { margin-top: 32px; display: grid; }
.ticks li { padding: 14px 0 14px 28px; border-top: 1px solid var(--border); position: relative; font-size: 15px; }
.ticks li:last-child { border-bottom: 1px solid var(--border); }
.ticks li::before { content: ''; position: absolute; left: 4px; top: 22px; width: 8px; height: 8px; background: var(--blue); }
.dark .ticks li { border-color: var(--dark-border); }
.dark .ticks li::before { background: #78a9ff; }
.note { margin-top: 24px; font-size: 12px; color: var(--text-3); }

/* ---------- ECHO AI ---------- */
.tabs { display: flex; border-bottom: 1px solid var(--dark-border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 24px 0 16px; height: 56px; min-width: 160px; text-align: left; font-size: 16px; color: var(--dark-text-2); white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.tabs button:hover { color: #fff; background: var(--dark-layer); }
.tabs button[aria-selected=true] { color: #fff; border-bottom-color: #4589ff; font-weight: 600; }
.scene { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; padding-top: 56px; align-items: start; }
.scene.enter { animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.scene-kicker { font-size: 14px; color: var(--dark-text-2); margin-bottom: 16px; }
.scene h3 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; line-height: 1.35; letter-spacing: -.02em; }
.scene-copy > p:not(.scene-kicker) { margin-top: 20px; color: var(--dark-text-2); line-height: 1.8; }
.screen { background: #fff; color: var(--text); min-width: 0; }
.screen-bar { display: flex; align-items: center; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--border); font-size: 13px; }
.screen-body { padding: 24px; display: grid; gap: 18px; min-height: 380px; align-content: start; }
.mini-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.plan-lg { gap: 0; font-size: 14px; color: var(--text); }
.plan-lg li { padding: 12px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.plan-lg li span:first-of-type { flex: 1; }
.result { background: var(--layer); border-left: 3px solid var(--blue); padding: 16px; font-size: 14px; color: var(--text-2); line-height: 1.7; }
.result strong { display: block; color: var(--text); font-weight: 600; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.metrics div { background: #fff; padding: 14px 16px; }
.metrics small { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.metrics b { font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.metrics .blue { color: var(--blue); }
.metrics .red { color: var(--red); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart path { fill: none; vector-effect: non-scaling-stroke; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .line1 { stroke: var(--blue); stroke-width: 2; }
.chart .line2 { stroke: #8a3ffc; stroke-width: 2; stroke-dasharray: 4 4; }
.chart .line3 { stroke: var(--red); stroke-width: 2; }
.legend { display: flex; gap: 20px; font-size: 12px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 2px; display: inline-block; }
.lg1 { background: var(--blue); }
.lg2 { background: repeating-linear-gradient(90deg, #8a3ffc 0 4px, transparent 4px 8px); }
.lg3 { background: var(--red); }
.search { height: 40px; background: var(--layer); border-bottom: 1px solid var(--border-strong); padding: 0 16px 0 40px; display: flex; align-items: center; font-size: 14px; position: relative; }
.search::before { content: ''; position: absolute; left: 14px; top: 12px; width: 10px; height: 10px; border: 1.5px solid var(--text-2); border-radius: 50%; }
.search::after { content: ''; position: absolute; left: 25px; top: 24px; width: 6px; height: 1.5px; background: var(--text-2); transform: rotate(45deg); }

/* ---------- WaveWorks 타일 ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.tile { background: var(--bg); padding: 24px 24px 72px; min-height: 320px; position: relative; display: flex; flex-direction: column; transition: background .15s; }
.tile:hover { background: var(--layer); }
.tile small { font-size: 14px; color: var(--text-2); }
.tile h3 { font-size: clamp(40px, 4.4vw, 64px); font-weight: 300; letter-spacing: -.03em; line-height: 1.1; margin: 48px 0 20px; }
.tile p { font-size: 15px; color: var(--text-2); line-height: 1.75; }
.tile > .i { position: absolute; left: 24px; bottom: 24px; fill: var(--blue); transition: transform .2s var(--ease); }
.tile:hover > .i { transform: translateX(6px); }

/* ---------- LINKER ---------- */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.diagram { background: #fff; border: 1px solid var(--border); padding: 40px 32px; display: grid; grid-template-columns: 1fr 56px auto 56px 1fr; align-items: center; }
.dg-col { display: grid; gap: 8px; }
.dg-cap { font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.dg-node { border: 1px solid var(--border-strong); padding: 14px 12px; font-size: 14px; text-align: center; background: #fff; }
.dg-hub { background: var(--blue); color: #fff; padding: 40px 24px; text-align: center; }
.dg-hub strong { display: block; font-size: 24px; font-weight: 400; letter-spacing: .02em; }
.dg-hub small { display: block; margin-top: 8px; font-size: 12px; opacity: .85; white-space: nowrap; }
.dg-wire { height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 12px); background-size: 12px 2px; animation: flow .8s linear infinite; }
@keyframes flow { to { background-position: 12px 0; } }

/* ---------- WaveDesk · Rx ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.duo.trio { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trio .card { padding: 36px 28px; }
.trio .card h2 { font-size: clamp(24px, 2vw, 30px); }
.card { background: var(--layer); padding: 48px; display: flex; flex-direction: column; }
.card h2 { font-size: clamp(28px, 3vw, 42px); }
.card .lead { font-size: 16px; }
.card .link { margin-top: auto; padding-top: 32px; }
.mini { margin-top: 40px; background: #fff; border: 1px solid var(--border); }
.dev { display: grid; grid-template-columns: 8px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.dev:last-child { border-bottom: 0; }
.dev b { font-weight: 500; }
.dev span { font-family: var(--mono); color: var(--text-2); font-size: 12px; }
.dev em { font-style: normal; color: var(--blue); min-width: 56px; text-align: right; }
.dev em.off { color: var(--text-3); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #c6c6c6; }
.dot.on { background: #24a148; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { border: 1px solid var(--border-strong); padding: 6px 12px; font-size: 13px; font-family: var(--mono); background: #fff; }
.mini.chips { padding: 20px; }

/* ---------- 도입 분야 ---------- */
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(32px, calc((100% - 1312px) / 2)) 16px; scrollbar-width: thin; }
.persona { flex: 0 0 min(420px, 82vw); scroll-snap-align: start; scroll-margin-left: max(32px, calc((100vw - 1312px) / 2)); background: #fff; padding: 32px; min-height: 380px; display: flex; flex-direction: column; border-top: 3px solid var(--text); }
.persona .num { font-family: var(--mono); font-size: 14px; color: var(--text-3); }
.persona h3 { font-size: 32px; font-weight: 300; letter-spacing: -.02em; margin: 56px 0 16px; }
.persona p { color: var(--text-2); font-size: 15px; line-height: 1.8; }
.persona .chips { margin-top: auto; padding-top: 32px; }

/* ---------- 문의 ---------- */
.cta-title { font-size: clamp(40px, 7vw, 104px); letter-spacing: -.04em; line-height: 1.12; margin-bottom: 72px; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cta { background: var(--layer); padding: 32px; min-height: 320px; display: flex; flex-direction: column; transition: background .15s; }
.cta:hover { background: var(--layer-2); }
.cta small { font-family: var(--mono); font-size: 14px; color: var(--text-2); }
.cta h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; line-height: 1.45; letter-spacing: -.02em; margin-top: 24px; max-width: 480px; }
.cta-foot { margin-top: auto; padding-top: 40px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.cta-foot .i { transition: transform .2s var(--ease); }
.cta:hover .cta-foot .i { transform: translateX(6px); }
.cta-blue { background: var(--blue); color: #fff; }
.cta-blue:hover { background: var(--blue-hover); }
.cta-blue small { color: #d0e2ff; }

/* ---------- 푸터 ---------- */
.footer { background: var(--dark); color: var(--dark-text-2); padding-top: 80px; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; font-size: 14px; }
.footer h4 { color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 16px; }
.footer-grid a { display: block; padding: 6px 0; }
.footer a:hover { color: #fff; text-decoration: underline; }
.wordmark { font-size: clamp(80px, 23vw, 400px); font-weight: 600; letter-spacing: -.06em; line-height: .8; color: #262626; text-align: center; margin: 80px 0 0; user-select: none; white-space: nowrap; }
.footer-base { display: flex; justify-content: space-between; padding: 24px 0; font-size: 12px; border-top: 1px solid var(--dark-border); position: relative; background: var(--dark); }

/* ---------- 등장 모션 ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) {
  .ws { grid-template-columns: 180px minmax(0, 1fr); }
  .ws-echo { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }
  .scene, .split { grid-template-columns: 1fr; gap: 40px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile { min-height: 260px; }
  .nav > a:not(.btn) { padding: 0 10px; }
  .ai-grid { grid-template-columns: 1fr 1fr; }
  .refs, .refs-4 { grid-template-columns: 1fr 1fr; }
  .numbers .stats { grid-template-columns: 1fr 1fr; }
  .numbers .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ai-item { min-height: 0; }
  .catalog-list > div { grid-template-columns: 1fr 1fr; }
  .catalog-list dd.desc { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .header-in { padding-left: 16px; }
  .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; height: auto; flex-direction: column; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 16px 32px rgb(0 0 0 / .08); }
  .nav.open { display: flex; }
  .nav > a:not(.btn) { height: 52px; padding: 0 16px; border-top: 1px solid var(--border); font-size: 16px; color: var(--text); }
  .nav > a:not(.btn)::after { display: none; }
  .nav-cta { margin: 0; height: 56px; }
  .duo, .duo.trio, .cta-grid { grid-template-columns: 1fr; }
  .footer-grid, .footer .footer-grid-6 { grid-template-columns: 1fr 1fr; }
  .mega { flex-direction: column; }
  .mega-btn { height: 52px; padding: 0 16px; justify-content: space-between; font-size: 16px; color: var(--text); border-top: 1px solid var(--border); }
  .mega-btn::after { display: none; }
  .mega-panel { position: static; width: auto; border: 0; box-shadow: none; padding: 0 16px 16px; background: var(--layer); }
  .mega-btn[aria-expanded=true] + .mega-panel { display: block; }
  .mega-group { border-top: 0; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .hero { padding: 24px 16px 72px; min-height: 560px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-sub br { display: none; }
  .sample { font-size: 11px; white-space: normal; text-align: right; line-height: 1.3; }
  .ws { grid-template-columns: 1fr; }
  .ws-side { display: none; }
  .ws-main { padding: 20px 16px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi b { font-size: 26px; }
  .statement { padding: 96px 0; }
  .section { padding: 80px 0; }
  .sec-head { margin-bottom: 40px; }
  .lead { font-size: 16px; }
  .tabs button { min-width: 0; padding: 0 16px; font-size: 15px; }
  .scene { padding-top: 40px; }
  .screen-body { padding: 16px; min-height: 0; }
  .metrics b { font-size: 17px; }
  .metrics div { padding: 12px 10px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .tile h3 { margin-top: 24px; }
  .diagram { grid-template-columns: 1fr; padding: 24px 16px; gap: 0; }
  .dg-col { grid-template-columns: 1fr 1fr; }
  .dg-cap { grid-column: 1 / -1; }
  .dg-wire { width: 2px; height: 32px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 12px); animation: none; }
  .dg-hub { padding: 24px; }
  .card { padding: 32px 20px; }
  .dev { grid-template-columns: 8px 1fr auto; }
  .dev span { display: none; }
  .rail { padding-inline: 16px; }
  .persona { min-height: 340px; padding: 24px; scroll-margin-left: 16px; }
  .persona h3 { margin-top: 40px; font-size: 28px; }
  .cta-title { margin-bottom: 40px; }
  .cta { min-height: 260px; padding: 24px; }
  .cta-foot { font-size: 14px; }
  .wordmark { margin-top: 56px; }
  .ai-grid { grid-template-columns: 1fr; }
  .refs, .refs-4 { grid-template-columns: 1fr; }
  .ref { min-height: 0; }
  .numbers { padding-top: 64px; }
  .numbers .stats > div, .numbers .stats > div + div { padding: 20px 12px 0 0; }
  .numbers .stats > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--border); }
  .numbers .stats dd { font-size: 36px; }
  .timeline li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .ai-item { padding: 24px 20px 28px; }
  .ai-item h3 { margin-top: 20px; }
  .catalog { margin-top: 64px; }
  .catalog-list > div { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .catalog-list dt { font-size: 24px; }
  .marquee-track li { padding: 24px 28px; font-size: 20px; }
}

/* 모션 끄기: 방문자가 푸터에서 직접 끈 경우에만 적용 (html.motion-off) */
html.motion-off { scroll-behavior: auto; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; transition: none !important; }
html.motion-off [data-reveal] { opacity: 1; transform: none; }
html.motion-off .marquee { -webkit-mask-image: none; mask-image: none; }
html.motion-off .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; }
html.motion-off .marquee-track li[aria-hidden] { display: none; }

/* ---------- 픽토그램 (IBM Carbon 스타일 선 그림) ---------- */
.picto { width: 48px; height: 48px; flex-shrink: 0; fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; display: block; }
.dark .picto { stroke: #78a9ff; }
.picto-lg { width: 64px; height: 64px; }
.ai-item .picto, .persona .picto, .tile .picto { margin-bottom: 4px; }
.ai-item h3 { margin-top: 28px; }
.ref .picto { width: 40px; height: 40px; margin-bottom: 24px; }
.tile .picto { margin-top: 8px; }
.tile h3 { margin-top: 32px; }
.persona .picto { margin-top: 32px; }
.persona h3 { margin-top: 20px; }

/* ---------- 사례 카드 (과제 · 방법 · 달라진 점) ---------- */
.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.case-card { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--blue); padding: 32px; display: flex; flex-direction: column; }
.section.layer .case-card { border-color: transparent; border-top-color: var(--blue); }
.case-head { display: flex; align-items: center; gap: 16px; }
.case-head .picto { width: 40px; height: 40px; }
.case-head small { font-size: 14px; font-weight: 600; color: var(--blue); }
.case-card h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 400; letter-spacing: -.02em; line-height: 1.35; margin: 24px 0 24px; }
.case-card dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.case-card dl > div { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.case-card dt { font-family: var(--mono); font-size: 13px; color: var(--text-2); padding-top: 2px; }
.case-card dd { margin: 0; font-size: 15px; line-height: 1.75; color: var(--text); }
.case-card .ref-tag { margin-top: auto; padding-top: 20px; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
@media (max-width: 900px) {
  .cases-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .case-card { padding: 24px 20px; }
  .case-card dl > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- 캠페인 히어로 ---------- */
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; font-family: var(--mono); font-size: 14px; color: var(--blue); letter-spacing: .02em; }
.hk-dot { width: 8px; height: 8px; background: var(--blue); animation: blink 1.2s steps(1) infinite; }
.hero h1 { min-height: 2.4em; }
.hero h1 .line { min-height: 1.16em; }
.hero-sub { height: 1.75em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity .35s var(--ease); max-width: 900px; margin-left: auto; margin-right: auto; }
.hero-sub.fade { opacity: 0; }
.hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.hero-dots button { width: 28px; height: 3px; padding: 0; border: 0; background: #c6c6c6; cursor: pointer; transition: background .2s, width .2s; }
.hero-dots button[aria-selected=true] { background: var(--blue); width: 48px; }
.hero-dots button:hover { background: var(--text-2); }
.hero-actions { margin-top: 32px; }
@media (max-width: 640px) { .hero h1 { min-height: 3.6em; } .hero-sub { height: auto; min-height: 3.5em; white-space: normal; } }

.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 10px; border-radius: 11px; background: #fff8e1; color: #8e6a00; font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: 0; vertical-align: middle; }

/* ---------- 대표 화면: ECHO AI 에이전트 데모 ---------- */
.echo-demo { --ed-h: 640px; }
.ed { display: grid; grid-template-columns: 200px minmax(0, 1fr) 380px; height: var(--ed-h); text-align: left; }
.ed-side { background: var(--layer); padding: 16px 0; display: flex; flex-direction: column; font-size: 13px; color: var(--text-2); overflow: hidden; }
.ed-new { margin: 0 12px 12px; padding: 9px 12px; background: var(--blue); color: #fff; font-size: 13px; }
.ed-cap { font-size: 11px; color: var(--text-3); padding: 14px 16px 6px; letter-spacing: .02em; }
.ed-conv { background: none; border: 0; border-left: 3px solid transparent; text-align: left; padding: 9px 13px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.ed-conv:hover { background: var(--layer-2); }
.ed-conv.on { background: #fff; border-left-color: var(--blue); color: var(--text); font-weight: 500; }
.ed-tool { display: flex; align-items: center; gap: 8px; padding: 5px 16px; }
.ed-tool i { width: 6px; height: 6px; border-radius: 50%; background: #24a148; }

.ed-main { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border); }
.ed-thread { flex: 1; overflow-y: auto; padding: 24px 28px 24px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: auto; scrollbar-width: thin; }
.ed-msg.me { align-self: flex-end; max-width: 78%; background: var(--blue); color: #fff; padding: 12px 16px; font-size: 14px; line-height: 1.6; animation: ed-in .3s var(--ease); }
@keyframes ed-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ed-spark { width: 12px; height: 12px; background: linear-gradient(135deg, var(--blue), #8a3ffc); display: inline-block; transform: rotate(45deg); flex-shrink: 0; }
.ed-plan { border: 1px solid var(--border); background: #fff; animation: ed-in .3s var(--ease); }
.ed-plan-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.ed-plan-state { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--blue); }
.ed-plan.finished .ed-plan-state { color: #198038; }
.ed-plan ol { padding: 6px 14px 8px; }
.ed-plan li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 13px; animation: ed-in .25s var(--ease); }
.ed-plan li .src { font-size: 11px; color: var(--text-2); background: var(--layer); padding: 2px 8px; letter-spacing: .02em; }
.ed-plan li .ic { width: 14px; height: 14px; border-radius: 50%; }
.ed-plan li.run .ic { border: 2px solid var(--border); border-top-color: var(--blue); animation: spin .8s linear infinite; }
.ed-plan li.done .ic { background: #24a148; position: relative; }
.ed-plan li.done .ic::after { content: ''; position: absolute; left: 4px; top: 2px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.ed-answer { display: flex; flex-direction: column; gap: 12px; animation: ed-in .3s var(--ease); }
.ed-who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ed-text { font-size: 15px; line-height: 1.75; }
.ed-h { font-size: 13px; font-weight: 600; margin-top: 4px; }
.ed-block { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.ed-block.on { opacity: 1; transform: none; }
.ed-chart { border: 1px solid var(--border); padding: 12px 14px 6px; background: #fff; }
.ed-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.ed-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ed-legend i { width: 12px; height: 8px; display: inline-block; }
.ed-legend .lb { background: var(--blue); }
.ed-legend .ll { height: 2px; background: #da1e28; }
.ed-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.ed-chart .grid { stroke: var(--border); fill: none; }
.ed-chart .bar { fill: var(--blue); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.ed-chart .bar.low { fill: #a6c8ff; }
.ed-chart .val { font-size: 11px; fill: var(--text-2); text-anchor: middle; opacity: 0; transition: opacity .3s; }
.ed-chart .tick { font-size: 11px; fill: var(--text-3); text-anchor: middle; }
.ed-chart .line { fill: none; stroke: #da1e28; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease .6s; }
.ed-chart .dot { fill: #fff; stroke: #da1e28; stroke-width: 2; opacity: 0; transition: opacity .2s; }
.ed-block.on .bar { transform: scaleY(1); }
.ed-block.on .val, .ed-block.on .dot { opacity: 1; }
.ed-block.on .line { stroke-dashoffset: 0; }
.ed-hbars { border: 1px solid var(--border); padding: 14px; display: grid; gap: 10px; background: #fff; }
.ed-hbar { display: grid; grid-template-columns: 96px 1fr 56px; gap: 10px; align-items: center; font-size: 13px; }
.ed-hbar .track { height: 14px; background: var(--layer); }
.ed-hbar .fill { display: block; height: 100%; width: 0; background: #ff8389; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.ed-hbar .fill.hot { background: #da1e28; }
.ed-block.on .fill { width: var(--w); }
.ed-hbar .v { font-family: var(--mono); font-size: 12px; text-align: right; color: #a2191f; }
.ed-table { border: 1px solid var(--border); overflow-x: auto; background: #fff; }
.ed-table table { font-size: 12px; }
.ed-table th { height: 34px; padding: 0 12px; font-size: 12px; }
.ed-table td { height: 34px; padding: 0 12px; }
.ed-table tr { opacity: 0; transition: opacity .3s; }
.ed-table thead tr, .ed-block.on .ed-table tr { opacity: 1; }
.ed-table tr.hot td { background: #fff1f1; color: #a2191f; }
.ed-insights { display: grid; gap: 8px; padding-left: 0; counter-reset: ins; }
.ed-insights li { position: relative; padding: 10px 12px 10px 40px; background: var(--layer); font-size: 14px; line-height: 1.6; min-height: 42px; }
.ed-insights li::before { counter-increment: ins; content: counter(ins); position: absolute; left: 12px; top: 10px; width: 18px; height: 18px; background: var(--blue); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
ul.ed-insights li::before { content: '!'; background: #da1e28; }
.ed-check { display: grid; gap: 6px; }
.ed-check li { position: relative; padding: 8px 12px 8px 36px; border: 1px solid var(--border); font-size: 14px; min-height: 38px; }
.ed-check li::before { content: ''; position: absolute; left: 12px; top: 11px; width: 14px; height: 14px; border: 1.5px solid var(--text-2); }
.ed-approve { border: 1px solid var(--blue); background: var(--blue-10); padding: 14px; display: grid; gap: 12px; opacity: 0; transition: opacity .3s; }
.ed-approve.on { opacity: 1; }
.ed-approve p { font-size: 14px; line-height: 1.6; }
.ed-approve div { display: flex; gap: 8px; }
.ed-approve button { height: 36px; padding: 0 16px; border: 1px solid var(--blue); background: #fff; color: var(--blue); font-size: 13px; }
.ed-approve button.ok { background: var(--blue); color: #fff; }
.ed-approve.clicked button.ok { background: #002d9c; box-shadow: 0 0 0 3px #a6c8ff; }
.ed-approved { color: #198038; font-weight: 600; font-size: 14px; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 8px; opacity: 0; transition: opacity .3s; }
.ed-chips.on { opacity: 1; }
.ed-chips button { height: 34px; padding: 0 14px; border: 1px solid var(--blue); background: #fff; color: var(--blue); font-size: 13px; border-radius: 17px; }
.ed-chips.picked button { background: var(--blue); color: #fff; }
.ed-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.ed-kpis div { background: #fff; padding: 14px 16px; }
.ed-kpis small { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.ed-kpis b { font-size: 32px; font-weight: 300; letter-spacing: -.02em; color: var(--blue); }
.ed-kpis em { font-style: normal; font-size: 14px; color: var(--text-2); margin-left: 2px; }
.ed-input { position: relative; display: flex; align-items: center; margin: 12px 20px 20px; min-height: 52px; padding: 0 56px 0 16px; border: 1px solid var(--border-strong); background: #fff; font-size: 15px; }
.ed-caret { width: 2px; height: 20px; background: var(--blue); margin-left: 1px; opacity: 0; }
.echo-demo.typing .ed-caret { opacity: 1; animation: blink 1s steps(1) infinite; }
.ed-ph { color: var(--text-3); }
.echo-demo.typing .ed-ph { display: none; }
.ed-send { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }

/* 오른쪽: 지금 화면에서 일어나는 일을 큰 글자로 설명 */
.ed-story { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 32px 28px; background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%); overflow: hidden; }
.ed-story::before { content: ''; position: absolute; right: -120px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgb(15 98 254 / .10), transparent 70%); pointer-events: none; }
.ed-story-top { display: flex; align-items: baseline; gap: 12px; font-size: 13px; color: var(--text-2); }
.ed-story-no { font-family: var(--mono); font-size: 12px; color: var(--blue); }
.ed-story-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 0; }
.ed-story-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--blue); min-height: 1.4em; }
.ed-story-h { font-size: clamp(26px, 2.1vw, 34px); font-weight: 300; line-height: 1.3; letter-spacing: -.025em; color: var(--text); min-height: 2.6em; transition: opacity .22s, transform .22s; }
.ed-story-h.out { opacity: 0; transform: translateY(-8px); }
.ed-story-h .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); animation: ed-word .7s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms); }
.ed-story-h .w.em { color: var(--blue); font-weight: 400; }
@keyframes ed-word { to { opacity: 1; transform: none; filter: none; } }
.ed-story-sub { font-size: 15px; line-height: 1.7; color: var(--text-2); opacity: 0; transform: translateY(6px); }
.ed-story-sub.on { opacity: 1; transform: none; transition: opacity .6s var(--ease) .45s, transform .6s var(--ease) .45s; }
.ed-story-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.ed-story-steps li { display: grid; gap: 8px; font-size: 12px; color: var(--text-3); transition: color .3s; }
.ed-story-steps li::before { content: ''; height: 2px; background-color: var(--border); background-image: linear-gradient(var(--blue), var(--blue)); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .6s var(--ease); }
.ed-story-steps li.on { color: var(--text); font-weight: 500; }
.ed-story-steps li.on::before, .ed-story-steps li.done::before { background-size: 100% 100%; }
.ed-story-steps li.done { color: var(--text-2); }
html.motion-off .ed-story-h .w { animation: none; opacity: 1; transform: none; filter: none; }

/* 품목 누르기 */
.ed-hbar .n { background: none; border: 0; padding: 0; font: inherit; text-align: left; color: inherit; }
.ed-hbar button.n { color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(15 98 254 / .35); }
.ed-hint { font-size: 12px; color: var(--text-3); }
.ed-pick { border: 1px solid var(--border); background: #fff; display: grid; }
.ed-pick > span { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 11px 14px; font-size: 14px; border-top: 1px solid var(--border); position: relative; transition: background .25s; }
.ed-pick > span:first-child { border-top: 0; }
.ed-pick small { color: #a2191f; font-family: var(--mono); font-size: 12px; }
.ed-pick i { font-style: normal; color: var(--text-3); }
.ed-pick > span.press { background: var(--blue-10); }
.ed-pick > span.press::after { content: ''; position: absolute; left: 60%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: rgb(15 98 254 / .35); animation: ed-tap .6s var(--ease) forwards; }
@keyframes ed-tap { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.ed-msg.me.click::before { content: '\2197  '; opacity: .8; }

/* 품목 이력 카드 */
.ed-item { border: 1px solid var(--border); background: #fff; }
.ed-item-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.ed-item-head small { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.ed-item-head b { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.ed-item-head .meta { display: block; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.ed-item-stats { display: flex; gap: 24px; }
.ed-item-stats b { font-size: 24px; font-weight: 300; color: var(--blue); }
.ed-item-stats b.bad { color: #da1e28; }
.ed-tl { position: relative; height: 150px; margin: 0 70px; }
.ed-tl-axis { position: absolute; left: -40px; right: -40px; top: 74px; height: 2px; background: var(--border); }
.ed-tl-axis::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease); }
.ed-block.on .ed-tl-axis::after { transform: scaleX(1); }
.ed-tl-tick { position: absolute; top: 84px; font-size: 11px; color: var(--text-3); transform: translateX(-50%); white-space: nowrap; }
.ed-ev { position: absolute; top: 0; width: 0; height: 100%; opacity: 0; transition: opacity .4s var(--ease); transition-delay: var(--d); }
.ed-block.on .ed-ev { opacity: 1; }
.ed-ev i { position: absolute; left: -6px; top: 69px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
.ed-ev .lb { position: absolute; left: -60px; width: 120px; white-space: nowrap; top: 14px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.ed-ev .lb b { display: block; color: var(--text); font-weight: 500; }
.ed-ev.bad i { background: #da1e28; border-color: #da1e28; box-shadow: 0 0 0 5px rgb(218 30 40 / .15); }
.ed-ev.bad .lb b { color: #a2191f; }
.ed-ev .note { position: absolute; left: -72px; width: 144px; top: 104px; text-align: center; font-size: 12px; line-height: 1.4; color: #a2191f; background: #fff1f1; padding: 4px 6px; }
.ed-report { border-left: 3px solid var(--blue); background: var(--layer); padding: 14px 16px; display: grid; gap: 10px; }
.ed-report-h { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.ed-report-h span { font-weight: 400; color: var(--text-3); font-size: 12px; }
.ed-report .ed-insights li { background: #fff; }

@media (max-width: 1100px) {
  .ed { grid-template-columns: minmax(0, 1fr) 300px; }
  .ed-story { padding: 22px 22px; }
  .ed-side { display: none; }
}
@media (max-width: 760px) {
  .echo-demo { --ed-h: 560px; }
  .ed { grid-template-columns: 1fr; }
  .ed-story { display: none; }
  .ed-main { border-right: 0; }
  .ed-thread { padding: 16px 14px 8px; }
  .ed-input { margin: 8px 12px 12px; }
  .ed-kpis b { font-size: 24px; }
  .ed-hbar { grid-template-columns: 76px 1fr 44px; }
  .ed-plan li .src { display: none; }
  .ed-tl { margin: 0 56px; }
  .ed-ev .lb { font-size: 11px; }
}

/* ---------- 사례 카드 산업 일러스트 ---------- */
.case-visual { margin: -32px -32px 24px; height: 180px; background: linear-gradient(135deg, #edf5ff 0%, #f6f2ff 100%); border-bottom: 1px solid var(--border); overflow: hidden; }
.case-scene { width: 100%; height: 100%; display: block; }
.case-scene .l { stroke: #0f62fe; stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.case-scene .f { fill: #d0e2ff; }
.case-scene .f.l { fill: #d0e2ff; }
.case-scene .w { fill: #fff; }
.case-scene .w.l { fill: #fff; }
.case-scene .a { fill: #0f62fe; }
.case-scene .g { stroke: #a8a8a8; stroke-width: 1; fill: none; }
.case-scene .d { stroke: #8a3ffc; stroke-width: 2; fill: none; stroke-linejoin: round; }
.case-scene .d2 { stroke: #0f62fe; stroke-width: 2; fill: none; stroke-dasharray: 5 4; }
.case-scene .s { stroke: #da1e28; stroke-width: 2; fill: none; stroke-linecap: round; }
.case-scene .s0 { fill: #da1e28; }
.case-scene .sw { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; }
.case-scene .ok { stroke: #24a148; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.case-scene .bb { stroke: #24a148; stroke-width: 2.5; fill: none; }
.case-scene .beam { fill: #0f62fe; opacity: .12; }
.case-head .picto { display: none; }
.case-head small { font-size: 14px; }
@media (max-width: 640px) { .case-visual { margin: -24px -20px 20px; height: 150px; } }

/* ---------- 고객사 로고 띠 ---------- */
.marquee-track li.logo { display: flex; align-items: center; padding: 28px 44px; }
.marquee-track li.logo img { height: 40px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .25s, opacity .25s; }
.marquee-track li.logo:hover img { filter: none; opacity: 1; }
.marquee-track li.word { display: flex; align-items: center; padding: 28px 44px; font-size: 22px; font-weight: 600; color: #8d8d8d; letter-spacing: -.02em; }
@media (max-width: 640px) { .marquee-track li.logo, .marquee-track li.word { padding: 20px 26px; } .marquee-track li.logo img { height: 30px; } .marquee-track li.word { font-size: 17px; } }

.footer-grid h4 { line-height: 20px; min-height: 20px; }

/* ---------- 히어로 아래 스크롤 표시 ---------- */
.hero-scroll { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--text-2); z-index: 2; }
.hero-scroll i { width: 1px; height: 36px; background: linear-gradient(var(--blue), transparent); animation: drop 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 에이전트 무대: 스크롤하면 고정된 채 커지고, 지나가면 작아진다 ---------- */
.ed-stage { position: relative; height: 320vh; --p: 0; --dk: 0; --sc: .78; }
.ed-pin { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px 24px 24px; background: rgb(22 22 22 / var(--dk)); overflow: hidden; }
.ed-stage-cap { font-size: clamp(18px, 1.6vw, 24px); font-weight: 300; letter-spacing: -.01em; color: rgb(244 244 244 / var(--dk)); height: 1.4em; transition: none; }
.ed-stage-cap span { font-family: var(--mono); font-size: .7em; color: rgb(120 169 255 / var(--dk)); margin-right: 10px; }
.ed-pin .echo-demo { width: min(1440px, 100%); flex: 1; min-height: 0; max-height: 900px; display: flex; flex-direction: column; transform: scale(var(--sc)); transform-origin: center center; box-shadow: 0 40px 120px -20px rgb(0 0 0 / calc(.25 + var(--dk) * .35)); will-change: transform; }
.ed-pin .ed { flex: 1; height: auto; min-height: 0; }
.ed-pin .window-bar { flex-shrink: 0; }
.ed-thread > * { max-width: 820px; width: 100%; margin-left: auto; margin-right: auto; }
.ed-thread > .ed-msg.me { margin-right: 0; width: auto; }
.ed-plan li .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-chart svg { max-height: 260px; }
@media (max-width: 760px) {
  .ed-stage { height: auto; }
  .ed-pin { position: static; height: auto; background: none; padding: 32px 16px; }
  .ed-pin .echo-demo { transform: none; height: 600px; flex: none; }
  .ed-stage-cap { color: var(--text); }
}
html.motion-off .ed-stage { height: auto; }
html.motion-off .ed-pin { position: static; height: auto; background: none; }
html.motion-off .ed-pin .echo-demo { transform: none; height: 680px; flex: none; }

/* 대화 칸 높이 고정: 내용이 길어도 입력창은 늘 바닥에 */
.ed { grid-template-rows: minmax(0, 1fr); }
.ed-main, .ed-side, .ed-story { min-height: 0; overflow: hidden; }
.ed-main { display: flex; flex-direction: column; }
.ed-thread { flex: 1 1 0; min-height: 0; overscroll-behavior: contain; }
.ed-input { flex-shrink: 0; }

/* ---------- 히어로 배경: Signal Field ---------- */
.hero-field {
  position: absolute; inset: 0; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 22%, #000 70%);
  mask-image: linear-gradient(to bottom, transparent 22%, #000 70%);
}
.hero-field .signal-wave__canvas, .hero-field .signal-field__canvas { display: block; width: 100%; height: 100%; }
.hero-copy, .hero-scroll { z-index: 2; }

/* 어두운 첫 화면 미리보기 (?hero=dark) */
.hero--dark { background: radial-gradient(ellipse at 50% 45%, #0b1020 0%, #05070d 60%, #020306 100%); color: #f4f4f4; }
.hero--dark .hero-sub { color: #c6c6c6; }
.hero--dark .hero-kicker { color: #78a9ff; }
.hero--dark .hk-dot { background: #78a9ff; }
.hero--dark .hero-dots button { background: #525252; }
.hero--dark .hero-dots button[aria-selected=true] { background: #78a9ff; }
.hero--dark .btn-tertiary { background: transparent; border-color: #78a9ff; color: #78a9ff; }
.hero--dark .btn-tertiary:hover { background: #78a9ff; color: #161616; }
.hero--dark .hero-scroll { color: #a8a8a8; }

/* ---------- 에이전트 데모: 실제 R2 화면 구성을 따라 그린 MES 캡처 ---------- */
.ed > .ed-side { grid-column: 1; grid-row: 1; }
.ed > .ed-main { grid-column: 2; grid-row: 1; }
.ed > .ed-story { grid-column: 3; grid-row: 1; }
.ed-mes { grid-column: 1 / 3; grid-row: 1; z-index: 3; position: relative; display: block; min-height: 0; overflow: hidden; background: #dde1e6; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; text-align: left; }
.echo-demo.mes-on .ed-mes { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.echo-demo.mes-on.mes-out .ed-mes { opacity: 0; transform: scale(.975) translateY(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mes-shot { position: absolute; inset: 28px 36px; transform-origin: 0 0; transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 0 rgb(0 0 0 / .04), 0 28px 70px -20px rgb(0 0 0 / .4); font-size: 12px; }
.mes-app { position: relative; display: flex; flex-direction: column; height: 100%; }
/* 상단 바: 로고 · 사이드 토글 · 화면 제목 · 사용자 · [AI] · 알림 */
.mes-top { flex-shrink: 0; height: 44px; display: flex; align-items: stretch; background: #161616; color: #fff; }
.mes-logo { display: flex; align-items: center; gap: 8px; padding: 0 14px; width: 170px; font-size: 14px; font-weight: 600; }
.mes-side-btn { width: 44px; border-left: 1px solid #393939; border-right: 1px solid #393939; display: flex; align-items: center; justify-content: center; }
.mes-side-btn i { width: 14px; height: 12px; border: 1.5px solid #c6c6c6; border-left-width: 5px; }
.mes-title { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; line-height: 1.3; }
.mes-title b { font-size: 13px; font-weight: 400; }
.mes-title small { font-size: 10px; color: #a8a8a8; }
.mes-right { margin-left: auto; display: flex; align-items: center; gap: 16px; padding-right: 14px; }
.mes-user { font-size: 12px; font-weight: 300; }
.mes-aibtn { width: 22px; height: 22px; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; transition: background .2s, color .2s, box-shadow .3s; }
.mes-aibtn.pressed { background: #fff; color: #161616; }
.mes-bell, .mes-person { width: 14px; height: 14px; border: 1.5px solid #c6c6c6; border-radius: 7px 7px 3px 3px; }
.mes-person { border-radius: 50% 50% 3px 3px; }
.mes-main { flex: 1; display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 0; }
/* 왼쪽 메뉴: 흰 바탕 · 그룹 제목 · 선택 항목 왼쪽 파란 막대 */
.mes-nav { background: #fff; border-right: 1px solid #e0e0e0; padding: 10px 0; display: flex; flex-direction: column; overflow: hidden; }
.mes-ws { padding: 2px 14px 10px; font-size: 12px; line-height: 1.3; }
.mes-ws small { display: block; font-size: 10px; color: #8d8d8d; }
.mes-search { margin: 0 10px 8px; padding: 7px 10px; background: #f4f4f4; color: #a8a8a8; font-size: 11px; }
.mes-grp { padding: 10px 14px 4px; font-size: 10px; color: #8d8d8d; }
.mes-nav span:not(.mes-search) { display: flex; align-items: center; gap: 9px; padding: 6px 14px 6px 11px; border-left: 3px solid transparent; color: #393939; }
.mes-nav span i { width: 9px; height: 9px; background: #a8a8a8; border-radius: 2px; }
.mes-nav span.on { border-left-color: var(--blue); background: #e8e8e8; color: #161616; font-weight: 600; }
.mes-nav span.on i { background: #161616; }
.mes-ver { margin-top: auto; padding: 8px 14px 0; font-size: 10px; color: #8d8d8d; }
.mes-shot.zoom .mes-nav, .mes-shot.zoom .mes-body { opacity: .5; transition: opacity .6s var(--ease); }
.mes-nav, .mes-body { transition: opacity .6s var(--ease); }
/* 본문: 탭 · 목록 제목 · 검색 · 표 */
.mes-body { background: #f4f4f4; padding: 10px 12px 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mes-tabs { display: flex; gap: 4px; }
.mes-tabs span { padding: 8px 16px; background: #e0e0e0; color: #393939; font-size: 12px; }
.mes-tabs span.on { background: #161616; color: #fff; }
.mes-sheet { flex: 1; background: #fff; display: flex; flex-direction: column; min-height: 0; }
.mes-bar { display: flex; align-items: center; gap: 18px; padding: 10px 14px; border-bottom: 1px solid #e0e0e0; }
.mes-bar b { font-size: 13px; font-weight: 600; }
.mes-q { color: #525252; }
.mes-q::before { content: '\21BB  '; color: #8d8d8d; }
.mes-find { padding: 8px 14px 8px 34px; border-bottom: 1px solid #e0e0e0; color: #a8a8a8; font-size: 11px; position: relative; }
.mes-find::before { content: ''; position: absolute; left: 14px; top: 10px; width: 9px; height: 9px; border: 1.5px solid #525252; border-radius: 50%; }
.mes-table { overflow: hidden; }
.mes-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mes-table th { background: #e0e0e0; text-align: left; height: 30px; padding: 0 12px; font-weight: 400; color: #393939; }
.mes-table td { height: 31px; padding: 0 12px; border-top: 1px solid #e0e0e0; white-space: nowrap; }
/* 오른쪽 Echo 창 (R2: 420px · 둥근 16px · 위 끌기 막대 · 머리 줄 · 현재 작업 컨텍스트 · 추천 작업) */
.mes-echo { position: absolute; top: 52px; right: 8px; bottom: 8px; width: min(420px, 44%); display: flex; flex-direction: column; background: #fff; border: 1px solid #a8a8a8; border-radius: 16px; overflow: hidden; box-shadow: 0 0 2px rgb(0 0 0 / .08), 0 18px 50px -12px rgb(0 0 0 / .3); transform: translateX(calc(100% + 16px)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.mes-echo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 50%, rgb(174 204 255 / 16%) 70%, rgb(148 187 255 / 28%) 100%); }
.mes-shot.echo-open .mes-echo { transform: none; }
.mes-drag { align-self: center; width: 70px; height: 3px; border-radius: 2px; background: #8d8d8d; margin: 8px 0 6px; }
.mes-echo-head { display: flex; align-items: center; gap: 10px; margin: 0 10px; padding: 0 10px; height: 36px; background: #f4f4f4; border-radius: 8px; }
.mes-hist { width: 13px; height: 11px; border: 1.5px solid #393939; border-left-width: 4px; }
.mes-badge { width: 18px; height: 18px; border: 1px solid #161616; font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.mes-gap { flex: 1; }
.mes-more { color: #393939; }
.mes-ctx { margin: 10px 10px 0; padding: 9px 12px; background: #f4f4f4; display: grid; gap: 1px; }
.mes-ctx b { font-size: 12px; font-weight: 600; }
.mes-ctx small { font-size: 10px; color: #525252; }
.mes-welcome { flex: 1; padding: 22px 18px 0; overflow: hidden; }
.mes-hello { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mes-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 10px; padding: 0 10px; height: 40px; border: 1px solid #c6c6c6; border-radius: 8px; background: #fff; font-size: 11px; }
.mes-in span { color: #525252; font-size: 15px; }
.mes-in em { flex: 1; font-style: normal; color: #a8a8a8; }
.mes-in i { width: 12px; height: 12px; background: #8d8d8d; clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 50%); }
.ed-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; pointer-events: none; }
.ed-cursor i { display: block; width: 100%; height: 100%; transition: transform .12s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 9-6.2 1.3L7.6 19z' fill='%23161616' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
.ed-cursor.down i { transform: scale(.82); }
.ed-cursor.down::after { content: ''; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; background: rgb(15 98 254 / .35); animation: ed-tap .5s var(--ease) forwards; }

/* ---------- 대화 화면: R2 Echo 디자인에 맞춤 ---------- */
.ed-spark { width: 18px; height: 18px; display: inline-block; flex-shrink: 0; transform: none; background: linear-gradient(to left, #0f62feb0, #0f62fe7d 50%, #0f62fed9 75%, #0f62fe 75%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 23c-.2 0-.4 0-.5-.1l-5-3c-.3-.2-.5-.5-.5-.9v-6c0-.4.2-.7.5-.9l5-3c.1-.1.3-.1.5-.1s.4 0 .5.1l5 3c.3.2.5.5.5.9v6c0 .4-.2.7-.5.9l-5 3c-.1.1-.3.1-.5.1zm-4-4.6 4 2.4 4-2.4v-4.9l-4-2.4-4 2.4v4.9z'/%3E%3Cpath d='M16 31c-.2 0-.3 0-.5-.1l-12-7c-.3-.2-.5-.5-.5-.9V9c0-.4.2-.7.5-.9l12-7c.2-.1.3-.1.5-.1s.3 0 .5.1l12 7-1 1.7L16 3.2 5 9.6v12.9l11 6.4 11-6.4V15h2v8c0 .4-.2.7-.5.9l-12 7c-.2.1-.3.1-.5.1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 23c-.2 0-.4 0-.5-.1l-5-3c-.3-.2-.5-.5-.5-.9v-6c0-.4.2-.7.5-.9l5-3c.1-.1.3-.1.5-.1s.4 0 .5.1l5 3c.3.2.5.5.5.9v6c0 .4-.2.7-.5.9l-5 3c-.1.1-.3.1-.5.1zm-4-4.6 4 2.4 4-2.4v-4.9l-4-2.4-4 2.4v4.9z'/%3E%3Cpath d='M16 31c-.2 0-.3 0-.5-.1l-12-7c-.3-.2-.5-.5-.5-.9V9c0-.4.2-.7.5-.9l12-7c.2-.1.3-.1.5-.1s.3 0 .5.1l12 7-1 1.7L16 3.2 5 9.6v12.9l11 6.4 11-6.4V15h2v8c0 .4-.2.7-.5.9l-12 7c-.2.1-.3.1-.5.1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ed-spark.w { background: #fff; }
.ed-side { background: #fff; border-right: 1px solid var(--border); padding: 18px 0; }
.ed-side .ed-cap { font-size: 14px; font-weight: 600; color: var(--text); padding: 0 16px 12px; letter-spacing: 0; }
.ed-new { display: flex; justify-content: space-between; align-items: center; margin: 0 12px 14px; padding: 9px 12px; background: #fff; color: var(--blue); border: 1px solid var(--blue); border-radius: 8px; font-size: 13px; }
.ed-new i { font-style: normal; font-size: 16px; line-height: 1; }
.ed-conv { display: grid; gap: 2px; margin: 0 8px; padding: 9px 10px; border: 0; border-radius: 6px; }
.ed-conv b { font-weight: 400; font-size: 13px; color: var(--text); }
.ed-conv small { font-size: 11px; color: var(--text-3); }
.ed-conv.on { background: #f4f4f4; border-left: 0; font-weight: 400; }
.ed-conv.on b { font-weight: 600; }
.ed-main { background: radial-gradient(1200px 520px at 100% 0%, #edf4ff, #f8fbff 45%, #fff); position: relative; }
.ed-main::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 60%, rgb(174 204 255 / 14%) 80%, rgb(148 187 255 / 24%) 100%); }
.ed-thread, .ed-input { position: relative; z-index: 1; }
.ed-msg.me { background: #f4f4f4; color: #161616; border-radius: 25px 4px 25px 25px; max-width: 450px; padding: 12px 18px; font-size: 14px; line-height: 1.6; }
.ed-ctxbar { display: grid; gap: 1px; padding: 10px 14px; background: #f4f4f4; border-left: 3px solid var(--blue); animation: ed-in .3s var(--ease); }
.ed-ctxbar b { font-size: 13px; font-weight: 600; }
.ed-ctxbar small { font-size: 12px; color: #525252; }
.ed-answer { gap: 10px; }
.ed-answer > :not(.ed-who) { margin-left: 32px; }
.ed-who { gap: 10px; font-size: 14px; font-weight: 400; }
.ed-time { font-size: 11px; opacity: .7; margin-left: -4px; }
.ed-text { font-size: 14px; line-height: 24px; color: #161616; }
/* 진행 표시 */
.ed-act { display: grid; gap: 6px; }
.ed-act-now { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.ed-act-txt { font-size: 13px; background: linear-gradient(90deg, #0f62fe, #a6c8ff, #0f62fe); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ed-sweep 1.6s linear infinite; }
@keyframes ed-sweep { from { background-position: 200% 0; } to { background-position: 0 0; } }
.ed-dots { display: inline-flex; gap: 4px; }
.ed-dots i { width: 6px; height: 6px; border-radius: 50%; background: #0f62fe; animation: ed-dot 1.15s ease-in-out infinite; }
.ed-dots i:nth-child(2) { animation-delay: .16s; }
.ed-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes ed-dot { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
.ed-act ol { display: grid; gap: 4px; overflow: hidden; transition: max-height .4s var(--ease), opacity .3s; max-height: 260px; }
.ed-act ol li { display: flex; gap: 10px; font-size: 13px; color: #525252; animation: ed-up .24s var(--ease); }
.ed-act ol li .k { font-size: 11px; color: var(--blue); min-width: 26px; }
@keyframes ed-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ed-act.done ol { max-height: 0; opacity: 0; }
.ed-act-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: #161616; opacity: .65; }
.ed-act-toggle i { font-style: normal; }
/* 차트·표: ApexCharts 기본 파랑, 마크다운 표 */
.ed-chart { border: 0; padding: 4px 0 0; background: transparent; }
.ed-chart .bar { fill: #2196f3; }
.ed-chart .bar.low { fill: #90caf9; }
.ed-legend .lb { background: #2196f3; }
.ed-table { border: 0; background: transparent; }
.ed-table table { border-collapse: collapse; }
.ed-table th, .ed-table td { border: 1px solid #c6c6c6; }
.ed-table th { background: #fff; font-weight: 600; }
.ed-table tbody tr:nth-child(odd) td { background: #f7f7f7; }
.ed-table tr.hot td { background: #fff1f1 !important; }
.ed-hbars { border: 0; padding: 4px 0; background: transparent; }
/* 승인 · 추가 확인 · 답변 아이콘 */
.ed-approve { border: 1px solid #c6c6c6; background: #fff; gap: 6px; }
.ed-approve small { font-size: 12px; color: #8a3800; font-weight: 600; }
.ed-approve b { font-size: 14px; }
.ed-approve p { font-size: 13px; color: #393939; }
.ed-approve div { margin-top: 6px; }
.ed-clarify { border: 1px solid #c6c6c6; background: #fff; padding: 14px 16px; display: grid; gap: 8px; }
.ed-clarify small { font-size: 12px; font-weight: 600; color: var(--blue); }
.ed-clarify .ed-text { margin: 0; }
.ed-need { font-size: 12px; color: #525252; }
.ed-acts { display: flex; gap: 6px; color: #393939; }
.ed-acts span { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
/* 입력창: 둥근 8px · 왼쪽 첨부 · 오른쪽 보내기 */
.ed-input { border: 1px solid #c6c6c6; border-radius: 8px; padding: 0 56px 0 52px; }
.ed-up { position: absolute; left: 8px; top: 8px; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #525252; }
.ed-send { border-radius: 8px; }

@media (max-width: 1100px) {
  .ed > .ed-main { grid-column: 1; }
  .ed > .ed-story { grid-column: 2; }
  .ed-mes { grid-column: 1 / 2; }
  .mes-main { grid-template-columns: minmax(0, 1fr); }
  .mes-nav { display: none; }
  .mes-shot { inset: 20px 24px; }
}
@media (max-width: 760px) {
  .ed > .ed-main, .ed-mes { grid-column: 1 / -1; }
  .mes-shot { inset: 12px; }
  .mes-logo { width: auto; }
  .mes-user, .mes-side-btn { display: none; }
  .mes-echo { width: calc(100% - 16px); }
  .mes-table th:nth-child(n+4), .mes-table td:nth-child(n+4) { display: none; }
  .ed-answer > :not(.ed-who) { margin-left: 0; }
}

/* ---------- 결과 블록: 실제 제품 화면처럼 차분하게 (Carbon · 마크다운 렌더 기준) ---------- */
.ed-check { gap: 4px; padding-left: 0; }
.ed-check li { border: 0; padding: 0 0 0 24px; min-height: 0; font-size: 14px; line-height: 24px; }
.ed-check li::before { left: 2px; top: 5px; width: 12px; height: 12px; border: 1px solid #8d8d8d; }
.ed-h { font-size: 14px; font-weight: 600; margin-top: 8px; }
.ed-kpis { gap: 0; background: none; border: 1px solid #e0e0e0; }
.ed-kpis div { padding: 14px 16px; border-left: 1px solid #e0e0e0; display: grid; gap: 4px; }
.ed-kpis div:first-child { border-left: 0; }
.ed-kpis small { margin: 0; font-size: 12px; color: #525252; }
.ed-kpis b { font-size: 28px; font-weight: 400; color: #161616; letter-spacing: -.01em; }
.ed-kpis em { font-size: 14px; color: #525252; }
.ed-kpis span { font-size: 12px; }
.ed-kpis .bad { color: #da1e28; }
.ed-kpis .good { color: #198038; }
.ed-hbar .fill, .ed-hbar .fill.hot { background: #2196f3; }
.ed-hbar .track { background: #f4f4f4; height: 12px; }
.ed-hbar .v { font-family: inherit; color: #161616; }
.ed-pick { border: 1px solid #c6c6c6; }
.ed-pick > span { font-size: 14px; padding: 9px 12px; border-top-color: #e0e0e0; }
.ed-pick > span[data-item] { color: var(--blue); }
.ed-pick small { font-family: inherit; color: #525252; }
.ed-item { border: 1px solid #e0e0e0; }
.ed-item-head { justify-content: flex-start; align-items: center; gap: 10px; padding: 14px 16px; }
.ed-item-head b { font-size: 16px; font-weight: 600; }
.ed-item-head .tag { font-size: 12px; padding: 2px 8px; border-radius: 12px; background: #e0e0e0; color: #393939; }
.ed-props { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e0e0e0; }
.ed-props dt { font-size: 12px; color: #6f6f6f; }
.ed-props dd { margin: 2px 0 0; font-size: 13px; color: #161616; }
.ed-props dd.bad { color: #da1e28; }
.ed-item-cap { padding: 12px 16px 0; font-size: 12px; color: #525252; }
.ed-tl { height: 128px; }
.ed-tl-axis { top: 62px; height: 1px; background: #c6c6c6; }
.ed-tl-axis::after { background: #8d8d8d; }
.ed-tl-tick { top: 70px; }
.ed-ev i { top: 58px; left: -4px; width: 8px; height: 8px; border-radius: 0; border: 0; background: #0f62fe; }
.ed-ev.bad i { background: #da1e28; box-shadow: none; }
.ed-ev .lb { top: 6px; font-size: 12px; color: #525252; }
.ed-ev .lb b { font-weight: 400; color: #161616; }
.ed-ev.bad .lb b { color: #da1e28; }
.ed-ev .note { top: 82px; background: none; padding: 0; font-size: 12px; color: #da1e28; }
.ed-report { border-left: 0; background: none; padding: 0; gap: 6px; }
.ed-report-h { font-size: 14px; justify-content: flex-start; gap: 10px; align-items: baseline; }
@media (max-width: 760px) { .ed-props { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ed-kpis b { font-size: 22px; } }

/* ---------- 화면 안 AI 분석 버튼 · 메뉴 (각 화면 연동 예정 기능) ---------- */
.mes-aiwrap { position: relative; margin-left: auto; }
.mes-aipage { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--blue); color: var(--blue); background: #fff; font-size: 12px; transition: background .2s, color .2s, box-shadow .3s; }
.mes-aipage .ed-spark { width: 14px; height: 14px; }
.mes-shot.zoom .mes-aipage { box-shadow: 0 0 0 3px rgb(15 98 254 / .3); }
.mes-aipage.pressed { background: var(--blue); color: #fff; }
.mes-aipage.pressed .ed-spark { background: #fff; }
.mes-menu { position: absolute; right: 0; top: 34px; z-index: 3; width: 270px; display: grid; gap: 2px; padding: 8px; background: #fff; box-shadow: 0 8px 24px -4px rgb(0 0 0 / .25); border-top: 2px solid var(--blue); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .2s; }
.mes-menu.on { opacity: 1; transform: none; }
.mes-menu small { padding: 2px 6px 6px; font-size: 10px; color: #6f6f6f; }
.mes-menu button { display: grid; gap: 2px; text-align: left; padding: 7px 8px; border: 0; background: #fff; font: inherit; transition: background .15s; }
.mes-menu strong { font-size: 12px; font-weight: 600; color: #161616; }
.mes-menu span { font-size: 10px; color: #525252; }
.mes-menu button.hover { background: #e8e8e8; }
.mes-menu button.pressed { background: #d0e2ff; }
.mes-shot.zoom .mes-body { opacity: 1; }
.mes-shot.zoom .mes-table { opacity: .45; transition: opacity .6s var(--ease); }
.mes-req { margin-left: auto; max-width: 86%; width: fit-content; background: #f4f4f4; border-radius: 18px 4px 18px 18px; padding: 9px 13px; font-size: 11px; line-height: 1.5; }
.mes-welcome .mes-hello { margin-top: 16px; font-size: 12px; }
.mes-hello small { font-size: 10px; opacity: .7; margin-left: 4px; }
.mes-thinking { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 26px; font-size: 11px; }
.mes-thinking .ed-act-txt { font-size: 11px; }
/* 왼쪽: 시나리오 목록 */
.ed-conv { grid-template-columns: 22px 1fr; align-items: baseline; gap: 6px; }
.ed-conv i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--blue); }
.ed-side-note { margin-top: auto; padding: 12px 16px 0; font-size: 11px; line-height: 1.5; color: var(--text-3); }

/* ---------- 시나리오 선택: 창 밖 홈페이지 버튼 (제품 화면과 구분) ---------- */
.ed { grid-template-columns: minmax(0, 1fr) 380px; }
.ed > .ed-main { grid-column: 1; }
.ed > .ed-story { grid-column: 2; }
.ed-mes { grid-column: 1 / 2; }
.ed-scn { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; --tx: color-mix(in srgb, #f4f4f4 calc(var(--dk) * 100%), #161616); }
.ed-scn .ed-conv { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; padding: 7px 14px; border: 1px solid color-mix(in srgb, #6f6f6f calc(var(--dk) * 100%), #c6c6c6); border-radius: 18px; background: transparent; color: var(--tx); font-size: 13px; font-weight: 400; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.ed-scn .ed-conv i { font-style: normal; font-family: var(--mono); font-size: 11px; color: #78a9ff; }
.ed-scn .ed-conv:hover { border-color: #78a9ff; }
.ed-scn .ed-conv.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.ed-scn .ed-conv.on i { color: #d0e2ff; }
.ed-scn .ed-conv:focus-visible { outline: 2px solid #78a9ff; outline-offset: 2px; }
/* 판매·설비 시나리오: LINKER 실시간 표시와 선 그래프 */
.ed-live { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: #525252; }
.ed-live i { width: 8px; height: 8px; border-radius: 50%; background: #24a148; box-shadow: 0 0 0 0 rgb(36 161 72 / .5); animation: ed-live 1.8s infinite; }
@keyframes ed-live { 0% { box-shadow: 0 0 0 0 rgb(36 161 72 / .45); } 70% { box-shadow: 0 0 0 6px rgb(36 161 72 / 0); } 100% { box-shadow: 0 0 0 0 rgb(36 161 72 / 0); } }
.ed-chart .line.blue { stroke: #2196f3; }
.ed-chart .dot.blue { stroke: #2196f3; }
.ed-chart .base { stroke: #8d8d8d; stroke-dasharray: 4 4; fill: none; }
.ed-legend .ll2 { height: 2px; background: #2196f3; }
.ed-legend .lbase { height: 0; border-top: 2px dashed #8d8d8d; }
@media (max-width: 1100px) { .ed { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 760px) {
  .ed { grid-template-columns: minmax(0, 1fr); }
  .ed > .ed-main, .ed-mes { grid-column: 1 / -1; }
  .ed-scn { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .ed-scn .ed-conv { flex-shrink: 0; color: var(--text); }
}
html.motion-off .ed-scn .ed-conv { color: var(--text); }

/* 막대 그래프 비교 막대(계획·지난주) */
.ed-chart .bar.plan { fill: #c6c6c6; }
.ed-legend .lp { background: #c6c6c6; }


/* 히어로 캠페인 표시: 알약 모양 제품 칩 (누르면 그 제품으로) */
.hero-kicker { gap: 10px; padding: 6px 8px 6px 14px; border: 1px solid #c6c6c6; border-radius: 999px; background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; text-decoration: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.hero-kicker:hover { border-color: var(--blue); background: #fff; box-shadow: 0 6px 20px -8px rgb(15 98 254 / .45); }
.hero-kicker:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.hk-dot { border-radius: 50%; animation: hk-pulse 1.8s ease-in-out infinite; }
@keyframes hk-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(15 98 254 / .45); } 60% { box-shadow: 0 0 0 5px rgb(15 98 254 / 0); } }
.hk-go { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 12px; border-left: 1px solid #e0e0e0; border-radius: 0 999px 999px 0; font-family: var(--font, inherit); font-size: 13px; color: var(--text); letter-spacing: 0; }
.hk-go .i { width: 14px; height: 14px; transition: transform .2s; }
.hero-kicker:hover .hk-go .i { transform: translateX(3px); }
.hero--dark .hero-kicker { border-color: #525252; background: rgb(22 22 22 / .6); }
.hero--dark .hk-go { color: #f4f4f4; border-left-color: #525252; }
html.motion-off .hk-dot { animation: none; }

/* 칩: 점 없이 제품명 + 제품 보기 */
.hero-kicker { padding-left: 16px; }
/* 숫자 띠 아래 인증 줄 */

/* 숫자는 크게, 단위는 작게 (한 줄 유지) */
.numbers .stats dd { white-space: nowrap; }
.numbers .stats dd small { margin-left: 6px; font-size: .36em; letter-spacing: -.01em; color: var(--text); font-weight: 400; }

/* 푸터 맨 아래: 인증·특허 */
.footer-cert { color: var(--dark-text-2, #8d8d8d); }
@media (max-width: 640px) { .footer-base > span { flex-wrap: wrap; gap: 6px 20px; } }

/* 실제 화면 캡처 */
.screen-body-flush { padding: 0; min-height: 0; display: block; }
.screen .shot { display: block; width: 100%; height: auto; }

/* 실제 화면 캡처: 제목 줄을 얇고 어둡게 해서 캡처에 시선이 가게 */
.screen-real { background: #161616; border-color: #393939; }
.screen-real .screen-bar { height: 30px; padding: 0 14px; background: #262626; border-bottom: 1px solid #393939; color: #a8a8a8; font-size: 11px; letter-spacing: .01em; }
.screen-real .screen-bar strong { font-weight: 400; }

/* 제조 현장 적용: 실제 화면 두 장을 겹쳐 놓는다 */
.screen-stack { position: relative; padding-bottom: 24%; min-width: 0; }
.screen-stack > .screen:first-child { width: 90%; }
.screen-stack > .screen + .screen { position: absolute; right: 0; bottom: 0; width: 60%; box-shadow: 0 28px 56px -16px rgb(0 0 0 / .7); }
@media (max-width: 760px) { .screen-stack { padding-bottom: 0; display: grid; gap: 12px; } .screen-stack > .screen:first-child, .screen-stack > .screen + .screen { position: static; width: 100%; } }

/* 오케스트레이터: 반복 업무 → 사람은 검토 (벡터 그림) */
.scene-art { min-width: 0; display: flex; align-items: center; justify-content: center; }
.scene-art svg { width: 100%; max-width: 620px; height: auto; overflow: visible; font-family: inherit; }
.scene-art .ln-b { fill: none; stroke: #78a9ff; stroke-width: 2; }
.scene-art .ln-g { fill: none; stroke: #8d8d8d; stroke-width: 1.5; }
.scene-art .ln-w { fill: none; stroke: #f4f4f4; stroke-width: 2; }
.scene-art .ln-d { fill: none; stroke: #6f6f6f; stroke-width: 1.5; stroke-dasharray: 4 5; animation: art-dash 1.2s linear infinite; }
.scene-art .dot-b { fill: #78a9ff; }
.scene-art .art-hand, .scene-art .art-hand2 { stroke: #f4f4f4; stroke-width: 2.5; stroke-linecap: round; transform-origin: 78px 132px; }
.scene-art .art-hand { animation: art-spin 6s linear infinite; }
.scene-art .t-s { font-size: 12px; fill: #a8a8a8; }
.scene-art .t-m { font-size: 14px; fill: #f4f4f4; }
.scene-art .t-w { font-size: 14px; fill: #fff; }
.scene-art .art-card rect { fill: #262626; stroke: #393939; }
.scene-art .art-card { opacity: 0; animation: art-in .5s var(--ease) forwards; animation-delay: var(--d); }
.scene-art .art-ok { opacity: 0; transform-box: fill-box; transform-origin: center; animation: art-pop .35s var(--ease) forwards; animation-delay: var(--d); }
.scene-art .art-ok circle { fill: #24a148; }
.scene-art .art-ok path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene-art .art-banner rect { fill: #0f62fe; }
.scene-art .art-banner { opacity: 0; animation: art-in .5s var(--ease) 1.8s forwards; }
@keyframes art-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes art-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-dash { to { stroke-dashoffset: -18; } }
html.motion-off .scene-art * { animation: none !important; opacity: 1 !important; }

/* 적용 사례 목록 */
.case-pick { display: grid; gap: 0; margin: 8px 0 28px; padding: 0; list-style: none; border-top: 1px solid #393939; }
.case-pick li { border-bottom: 1px solid #393939; }
.case-pick button { display: grid; grid-template-columns: 36px 1fr; gap: 4px 8px; width: 100%; padding: 18px 12px 18px 0; border: 0; border-left: 3px solid transparent; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.case-pick button span { grid-row: span 2; padding-left: 12px; font-family: var(--mono); font-size: 12px; color: #78a9ff; line-height: 24px; }
.case-pick button b { font-size: 17px; font-weight: 500; color: #c6c6c6; transition: color .2s; }
.case-pick button small { font-size: 14px; line-height: 1.6; color: #8d8d8d; }
.case-pick button:hover b { color: #f4f4f4; }
.case-pick button.on { border-left-color: #78a9ff; background: rgb(255 255 255 / .04); }
.case-pick button.on b { color: #fff; }
.case-pick button.on small { color: #c6c6c6; }
.screen-stack > .screen { transition: opacity .18s; }
.screen-stack.swapping > .screen { opacity: .2; }
.screen-stack > .screen + .screen { cursor: pointer; }

/* 메인 제품 칸: 제품마다 핵심 한 줄 */
.prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.prod { display: flex; flex-direction: column; gap: 10px; min-height: 280px; padding: 32px 28px 28px; background: #fff; color: var(--text); text-decoration: none; transition: background .2s; }
.prod .picto { width: 44px; height: 44px; margin-bottom: 18px; }
.prod small { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.prod h3 { font-size: 22px; font-weight: 300; line-height: 1.35; letter-spacing: -.01em; }
.prod p { font-size: 15px; line-height: 1.65; color: var(--text-2); }
.prod .more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--blue); }
.prod .more .i { width: 16px; height: 16px; transition: transform .2s; }
.prod:hover { background: #f4f4f4; }
.prod:hover .more .i { transform: translateX(4px); }
@media (max-width: 1100px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prod-grid { grid-template-columns: minmax(0, 1fr); } .prod { min-height: 0; } }

/* 제품 메뉴: 헤더 아래 전체 폭으로 펼치고, 안쪽은 본문 폭에 맞춘다 */
.mega-panel { left: 0; right: 0; width: auto; border-left: 0; border-right: 0; padding: 28px max(32px, calc((100% - 1312px) / 2)) 32px; gap: 8px 40px; }

/* 도입 분야: 업종 카드 */
.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ind-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); min-width: 0; }
.ind-visual { height: 132px; background: linear-gradient(135deg, #edf5ff 0%, #f6f2ff 100%); border-bottom: 1px solid var(--border); overflow: hidden; }
.ind-visual .case-scene { width: 100%; height: 100%; display: block; }
.ind-card small { margin: 20px 22px 0; font-size: 14px; font-weight: 500; color: var(--blue); }
.ind-card h3 { margin: 8px 22px 0; font-size: 18px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; }
.ind-card ul { margin: 14px 22px 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ind-card li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ind-card li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--blue); }
.ind-card .chips { margin: auto 22px 22px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.ind-card .chips span { font-size: 12px; padding: 3px 9px; background: var(--layer); color: var(--text-2); }
@media (max-width: 1100px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ind-grid { grid-template-columns: minmax(0, 1fr); } }

/* 상품 화면 칸의 벡터 그림 (LINKER 연결 구성 등) */
.screen-art { padding: 28px 20px; background: #161616; }
.screen-art svg { max-width: none; }
.scene-art .dot-g { fill: #6f6f6f; }
.scene-art .ln-line { fill: none; stroke: #393939; }
.scene-art .ln-tile { fill: none; stroke: #6f6f6f; stroke-width: 3; stroke-linecap: round; }
.scene-art .tile { fill: #393939; }
.scene-art .addr { fill: #161616; }
.scene-art .t-xs { font-size: 9px; fill: #8d8d8d; }
.scene-art .t-hub { font-size: 20px; font-weight: 300; fill: #fff; }
.scene-art .t-sub { font-size: 12px; fill: #d0e2ff; }
.scene-art .art-hub rect { fill: #0f62fe; }
.scene-art .art-hub { opacity: 0; animation: art-in .5s var(--ease) .7s forwards; }
.scene-art .art-ok .live { fill: #42be65; }
.scene-art .flow-dot { fill: #78a9ff; }
html.motion-off .scene-art .flow-dots { display: none; }
/* OS의 "애니메이션 효과 끄기"(회사 PC에 흔함)로는 끄지 않는다. 움직임은 푸터의 "모션 끄기"(html.motion-off)로만 끈다. */
.scene-art .ln-w.thin { stroke-width: 1.5; }
.scene-art .dot-w { fill: #fff; }
.scene-art .win { fill: #161616; stroke: #393939; }
.scene-art .ln-tile.on { stroke: #78a9ff; }
.scene-art .t-num { font-size: 15px; fill: #f4f4f4; }
.scene-art .flow-card > rect:first-child { fill: #1c2433; stroke: #4589ff; }
.scene-art .t-flow { font-size: 20px; font-weight: 400; fill: #fff; }
.scene-art .t-acc { font-size: 13px; fill: #78a9ff; }
.scene-art .t-s2 { font-size: 13px; fill: #c6c6c6; }
.scene-art .t-step { font-family: var(--mono); font-size: 13px; fill: #78a9ff; }
.scene-art .t-verb { font-size: 15px; font-weight: 500; fill: #f4f4f4; }
.scene-art .t-step.w { fill: #d0e2ff; }
.scene-art .t-verb.w { fill: #fff; }
.scene-art .t-cap { font-size: 13px; fill: #a8a8a8; }
.scene-art .t-big { font-size: 28px; font-weight: 300; fill: #fff; }
.scene-art .ln-sep { stroke: rgb(255 255 255 / .35); }
.scene-art .tile.alert { fill: #3a1d1f; stroke: #fa4d56; }
.scene-art .t-alert { font-size: 13px; fill: #ff8389; }
.scene-art .t-alert-s { font-size: 8px; fill: #ff8389; }
.scene-art .ln-r { fill: none; stroke: #fa4d56; stroke-width: 2; }
.scene-art .dot-r { fill: #fa4d56; }
.scene-art .art-card .win { fill: #161616; stroke: #393939; }
.scene-art .art-card .tile { fill: #2e2e2e; stroke: none; }
.scene-art .art-card .tile.alert { fill: #3a1d1f; stroke: #fa4d56; }
.scene-art .art-card .addr { fill: #262626; stroke: none; }
.scene-art .art-card .dot-b { fill: #78a9ff; stroke: none; }
.scene-art .art-card .dot-r { fill: #fa4d56; stroke: none; }

/* 테두리 없는 그림(.art-light): 밝은 바탕에서는 밝게, 어두운 칸(.dark)에서는 어둡게 */
.art-light { --a-card: #fff; --a-line: #e0e0e0; --a-text: #161616; --a-sub: #6f6f6f; --a-icon: #8d8d8d; --a-dash: #a8a8a8; --a-dot: #c6c6c6; --a-blue: #0f62fe;
  --a-win: #f4f4f4; --a-tile: #e8e8e8; --a-flow: #edf5ff; --a-alert-bg: #fff1f1; --a-alert: #da1e28; --a-s2: #393939; }
.dark .art-light { --a-card: #262626; --a-line: #393939; --a-text: #f4f4f4; --a-sub: #a8a8a8; --a-icon: #8d8d8d; --a-dash: #6f6f6f; --a-dot: #6f6f6f; --a-blue: #78a9ff;
  --a-win: #161616; --a-tile: #2e2e2e; --a-flow: #1c2433; --a-alert-bg: #3a1d1f; --a-alert: #ff8389; --a-s2: #c6c6c6; }
.scene-art.art-light { padding: 0; background: none; }
.scene-art.art-light .art-card rect { fill: var(--a-card); stroke: var(--a-line); }
.scene-art.art-light .t-m, .scene-art.art-light .t-verb, .scene-art.art-light .t-flow, .scene-art.art-light .t-num { fill: var(--a-text); }
.scene-art.art-light .t-s, .scene-art.art-light .t-xs, .scene-art.art-light .t-cap { fill: var(--a-sub); }
.scene-art.art-light .t-s2 { fill: var(--a-s2); }
.scene-art.art-light .t-step, .scene-art.art-light .t-acc { fill: var(--a-blue); }
.scene-art.art-light .t-step.w { fill: #d0e2ff; }
.scene-art.art-light .t-verb.w { fill: #fff; }
.scene-art.art-light .ln-g { stroke: var(--a-icon); }
.scene-art.art-light .ln-b { stroke: var(--a-blue); }
.scene-art.art-light .ln-d { stroke: var(--a-dash); }
.scene-art.art-light .ln-line { stroke: var(--a-line); }
.scene-art.art-light .ln-tile { stroke: var(--a-dash); }
.scene-art.art-light .ln-tile.on { stroke: var(--a-blue); }
.scene-art.art-light .dot-g, .scene-art.art-light .art-card .dot-g { fill: var(--a-dot); stroke: none; }
.scene-art.art-light .dot-b, .scene-art.art-light .art-card .dot-b, .scene-art.art-light .flow-dot { fill: var(--a-blue); stroke: none; }
.scene-art.art-light .art-card .win { fill: var(--a-win); stroke: var(--a-line); }
.scene-art.art-light .art-card .tile { fill: var(--a-tile); stroke: none; }
.scene-art.art-light .art-card .addr { fill: var(--a-card); stroke: none; }
.scene-art.art-light .art-card .tile.alert { fill: var(--a-alert-bg); stroke: var(--a-alert); }
.scene-art.art-light .t-alert, .scene-art.art-light .t-alert-s { fill: var(--a-alert); }
.scene-art.art-light .flow-card > rect:first-child { fill: var(--a-flow); stroke: var(--a-blue); }
.scene-art.art-light .art-hub rect { fill: #0f62fe; stroke: none; }
.scene-art.art-light .art-card .dot-r { fill: var(--a-alert); stroke: none; }

/* 사례 카드: 실제 화면을 그림 자리에 (위 왼쪽 기준으로 잘라 보여 준다) */
.case-visual .case-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* LINKER 개념 그림 */
.scene-art.art-light .ic { fill: none; stroke: #525252; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene-art.art-light .ic-dot { fill: #8d8d8d; }
.scene-art.art-light .ic-dot.b { fill: #0f62fe; }
.scene-art.art-light .ic-b { fill: none; stroke: #0f62fe; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene-art.art-light .sig { fill: none; stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.scene-art.art-light .s0 { stroke: #8a3ffc; fill: #8a3ffc; }
.scene-art.art-light .s1 { stroke: #ff832b; fill: #ff832b; }
.scene-art.art-light .s2 { stroke: #009d9a; fill: #009d9a; }
.scene-art.art-light .s3 { stroke: #8d8d8d; fill: #8d8d8d; stroke-dasharray: 10 6; }
.scene-art.art-light .s4 { stroke: #d2a106; fill: #d2a106; stroke-dasharray: 2 5; }
.scene-art.art-light .sig.s0, .scene-art.art-light .sig.s1, .scene-art.art-light .sig.s2, .scene-art.art-light .sig.s3, .scene-art.art-light .sig.s4 { fill: none; }
.scene-art.art-light .fd { stroke: none; }
.scene-art.art-light .sig-out { fill: none; stroke: #0f62fe; stroke-width: 2.5; }
.scene-art.art-light .fd-out { fill: #fff; stroke: #0f62fe; stroke-width: 2; }
.scene-art.art-light .node { fill: #0f62fe; }
.scene-art.art-light .t-node { font-size: 17px; font-weight: 600; letter-spacing: .08em; fill: #fff; }
.scene-art .node-ring { fill: none; stroke: #0f62fe; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: node-ring 2.4s ease-out 1s infinite; }
@keyframes node-ring { from { opacity: .45; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
html.motion-off .scene-art .node-ring { display: none; }

/* 사례 카드: 글꼴은 그대로, '과제'는 현장의 하소연처럼 말풍선으로 */
.case-card dl > div:first-child { align-items: start; }
.case-card dl > div:first-child dt { color: #da1e28; font-weight: 500; padding-top: 14px; }
.case-card dl > div:first-child dd { position: relative; padding: 12px 16px; background: #fff1f1; border-radius: 4px; font-size: 15px; font-weight: 500; color: #161616; }
.case-card dl > div:first-child dd::before { content: ''; position: absolute; left: -7px; top: 18px; border: 7px solid transparent; border-left: 0; border-right-color: #fff1f1; }
.case-card dl > div + div dd { color: var(--text-2); }
@media (max-width: 640px) { .case-card dl > div:first-child dt { padding-top: 0; } .case-card dl > div:first-child dd::before { left: 18px; top: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #fff1f1; } }
.scene-art.art-light .t-node2 { font-size: 12px; font-weight: 500; letter-spacing: .18em; fill: #d0e2ff; }

/* ECHO AI 개념 그림 */
.scene-art.art-light .sig-in { fill: none; stroke: #a8a8a8; stroke-width: 1.6; stroke-dasharray: 5 5; }
.scene-art.art-light .fd-in { fill: #8d8d8d; }
.scene-art.art-light .sig-ok { fill: none; stroke: #24a148; stroke-width: 2; stroke-dasharray: 4 5; }
.scene-art.art-light .person { fill: none; stroke: #393939; stroke-width: 2; }
.scene-art.art-light .art-ok circle { fill: #24a148; }
.scene-art.art-light .art-ok path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 오케스트레이터 그림을 밝은 바탕에 바로 얹을 때 */
.scene-art.art-light .ln-w { stroke: #393939; }
.scene-art.art-light .art-hand, .scene-art.art-light .art-hand2 { stroke: #161616; }
.scene-art.art-light .t-w { fill: #fff; }
.scene-art.art-light .art-banner rect { fill: #0f62fe; stroke: none; }
.scene-art.art-light .art-ok circle { fill: #24a148; stroke: none; }

/* 오케스트레이터 화면 칸 개념 그림 (어두운 바탕) */
.scene-art .hex { fill: #0f62fe; }
.scene-art .t-hex { font-size: 13px; font-weight: 600; letter-spacing: .08em; fill: #fff; }
.scene-art .t-b { font-size: 12px; fill: #78a9ff; }
.scene-art .t-badge { font-size: 7.5px; font-weight: 600; fill: #fff; }
.scene-art .t-k { font-size: 12px; fill: #191919; }
.scene-art .ln-line-b { fill: none; stroke: #a6c8ff; stroke-width: 2; stroke-linejoin: round; }
.scene-art .hand-static { stroke: #f4f4f4; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.scene-art .art-card .ph { fill: #393939; stroke: none; }
.scene-art .art-card .ph-b { fill: #4589ff; opacity: .55; stroke: none; }
.scene-art .art-card .bar { fill: #4589ff; stroke: none; }
.scene-art .art-card .bar-hi { fill: #a6c8ff; stroke: none; }
.scene-art .art-card .bar2 { fill: #393939; stroke: none; }
.scene-art .art-card .hl { fill: rgb(69 137 255 / .14); stroke: #4589ff; }
.scene-art .art-card .tile-d { fill: #161616; stroke: #393939; }
.scene-art .art-card .chk { fill: none; stroke: #8d8d8d; }
.scene-art .art-card .btn-b { fill: #0f62fe; stroke: none; }
.scene-art .art-card .btn-o { fill: none; stroke: #6f6f6f; }
.scene-art .art-card .phone { fill: #161616; stroke: #525252; }
.scene-art .art-card .bub-b { fill: #0f62fe; stroke: none; }
.scene-art .art-card .bub-k { fill: #fee500; stroke: none; }
.scene-art .art-card .b-pur { fill: #8a3ffc; stroke: none; }
.scene-art .art-card .b-grn { fill: #24a148; stroke: none; }
.scene-art .art-card .b-org { fill: #ff832b; stroke: none; }
.scene-art .art-card .b-red { fill: #da1e28; stroke: none; }
.scene-art .cursor { fill: #fff; stroke: #161616; stroke-width: 1; }
.scene-art .art-cursor { opacity: 0; animation: art-in .4s var(--ease) 1.6s forwards; }
html.motion-off .scene-art .art-cursor { opacity: 1; }
.scene-art .t-wb { font-size: 12px; fill: #fff; }

/* Catalog · VISION 그림 */
.scene-art.art-light .ic-dot.r { fill: #da1e28; }
.scene-art.art-light .ic-r { fill: none; stroke: #da1e28; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene-art .t-badge2 { font-size: 10px; font-weight: 500; fill: #fff; }
.scene-art .t-xs2 { font-size: 11px; fill: #8d8d8d; }
.scene-art .t-s2d { font-size: 13px; fill: #e0e0e0; }
.scene-art .t-b2 { font-size: 12px; font-weight: 500; }
.scene-art .t-b2.ok { fill: #42be65; } .scene-art .t-b2.mask { fill: #f1c21b; } .scene-art .t-b2.no { fill: #ff8389; }
.scene-art .t-r, .scene-art .t-s.r { font-size: 13px; fill: #ff8389; }
.scene-art .t-s.r { font-size: 12px; }
.scene-art .ln-dr { fill: none; stroke: #fa4d56; stroke-width: 1.5; stroke-dasharray: 4 5; animation: art-dash 1.2s linear infinite; }
.scene-art .lock-r { fill: none; stroke: #ff8389; stroke-width: 1.6; }
.scene-art .art-ok.ng circle { fill: #da1e28; }
.scene-art .art-ok.warn circle { fill: #f1c21b; }
.scene-art .art-ok.warn path { stroke: #161616; }
.scene-art .art-row { opacity: 0; animation: art-in .4s var(--ease) forwards; animation-delay: var(--d); }
html.motion-off .scene-art .art-row { opacity: 1; animation: none; }
.scene-art .art-card .b-blu { fill: #0f62fe; stroke: none; }
.scene-art .art-card .b-gry { fill: #6f6f6f; stroke: none; }
.scene-art .art-card .av { fill: #393939; stroke: none; }
.scene-art .art-card .bar-r { fill: #fa4d56; stroke: none; }
.scene-art .cam { fill: #393939; stroke: #6f6f6f; }
.scene-art .beam-d { fill: rgb(69 137 255 / .08); }
.scene-art .conv { fill: #262626; stroke: #525252; }
.scene-art .roll { fill: #525252; }
.scene-art .prod { fill: #393939; stroke: #6f6f6f; }
.scene-art .prod-l { fill: none; stroke: #6f6f6f; }
.scene-art .defect { fill: #fa4d56; }
.scene-art .bb-g { fill: none; stroke: #42be65; stroke-width: 2; }
.scene-art .bb-r { fill: none; stroke: #fa4d56; stroke-width: 2; }
.scene-art .art-card rect.bb-g { fill: none; stroke: #42be65; }
.scene-art .art-card rect.bb-r { fill: none; stroke: #fa4d56; }
.scene-art .art-card .pouch { fill: #e8e8e8; stroke: none; }
.scene-art .t-mono { font-family: var(--mono); font-size: 16px; font-weight: 500; fill: #161616; }
.scene-art .t-mono.smudge { opacity: .45; filter: blur(.7px); }
.scene-art .step { fill: #0f62fe; }
.scene-art .step-w { fill: none; stroke: #6f6f6f; }
.scene-art .art-card circle.step { fill: #0f62fe; stroke: none; }
.scene-art .art-card circle.step-w { fill: none; stroke: #6f6f6f; }
.scene-art .t-step2 { font-size: 11px; font-weight: 600; fill: #fff; }
.scene-art .art-ok.run circle { fill: #0f62fe; }
.scene-art .wait { fill: none; stroke: #6f6f6f; stroke-width: 1.5; stroke-dasharray: 3 3; }
.scene-art .zone { fill: rgb(255 255 255 / .03); stroke: #525252; stroke-dasharray: 5 5; }
.scene-art .b-blu { fill: #0f62fe; } .scene-art .b-grn { fill: #24a148; } .scene-art .b-red { fill: #da1e28; } .scene-art .b-gry { fill: #6f6f6f; } .scene-art .b-pur { fill: #8a3ffc; }
.scene-art .art-card .dot-ok { fill: #24a148; stroke: none; }

/* 첫 화면 장면 그림 (h-*) */
.scene-art.art-light .h-ph, .scene-art.art-light .art-card .h-ph { fill:#e0e0e0;stroke:none; }
.scene-art.art-light .h-ph-b, .scene-art.art-light .art-card .h-ph-b { fill:#a6c8ff;stroke:none; }
.scene-art.art-light .h-ph-w, .scene-art.art-light .art-card .h-ph-w { fill:#fff;opacity:.85;stroke:none; }
.scene-art.art-light .h-pill, .scene-art.art-light .art-card .h-pill { fill:#fff;stroke:#c6c6c6; }
.scene-art.art-light .h-wire, .scene-art.art-light .art-card .h-wire { fill:none;stroke:#0f62fe;stroke-width:2; }
.scene-art.art-light .h-wire-g, .scene-art.art-light .art-card .h-wire-g { fill:none;stroke:#a8a8a8;stroke-width:1.5;stroke-dasharray:4 4; }
.scene-art.art-light .h-wire-r, .scene-art.art-light .art-card .h-wire-r { fill:none;stroke:#da1e28;stroke-width:1.5;stroke-dasharray:4 4; }
.scene-art.art-light .h-wire-a, .scene-art.art-light .art-card .h-wire-a { fill:none;stroke:#f1c21b;stroke-width:1.5;stroke-dasharray:4 4; }
.scene-art.art-light .h-blue, .scene-art.art-light .art-card .h-blue { fill:#0f62fe;stroke:none; }
.scene-art.art-light .h-red, .scene-art.art-light .art-card .h-red { fill:#da1e28;stroke:none; }
.scene-art.art-light .h-amber, .scene-art.art-light .art-card .h-amber { fill:#f1c21b;stroke:none; }
.scene-art.art-light .h-green, .scene-art.art-light .art-card .h-green { fill:#24a148;stroke:none; }
.scene-art.art-light .h-tile, .scene-art.art-light .art-card .h-tile { fill:#e8e8e8;stroke:none; }
.scene-art.art-light .h-tile-r, .scene-art.art-light .art-card .h-tile-r { fill:#fff1f1;stroke:#da1e28; }
.scene-art.art-light .h-line-b, .scene-art.art-light .art-card .h-line-b { fill:none;stroke:#0f62fe;stroke-width:2;stroke-linejoin:round; }
.scene-art.art-light .h-dev, .scene-art.art-light .art-card .h-dev { fill:#fff;stroke:#393939;stroke-width:2; }
.scene-art.art-light .h-screen, .scene-art.art-light .art-card .h-screen { fill:#f4f4f4;stroke:#c6c6c6; }
.scene-art.art-light .h-cursor, .scene-art.art-light .art-card .h-cursor { fill:#161616;stroke:#fff;stroke-width:1; }
.scene-art.art-light .h-wall, .scene-art.art-light .art-card .h-wall { fill:none;stroke:#8d8d8d;stroke-width:2;stroke-dasharray:8 6; }
.scene-art.art-light .h-gate, .scene-art.art-light .art-card .h-gate { fill:#edf5ff;stroke:#0f62fe;stroke-width:2; }
.scene-art.art-light .h-stroke, .scene-art.art-light .art-card .h-stroke { fill:none;stroke:#393939;stroke-width:2;stroke-linecap:round; }
.scene-art.art-light .h-stroke-b, .scene-art.art-light .art-card .h-stroke-b { fill:none;stroke:#0f62fe;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.scene-art.art-light .h-stroke-w, .scene-art.art-light .art-card .h-stroke-w { fill:none;stroke:#fff;stroke-width:2.5;stroke-linejoin:round; }
.scene-art.art-light .h-stroke-thin, .scene-art.art-light .art-card .h-stroke-thin { fill:none;stroke:#393939;stroke-width:1.5; }
.scene-art.art-light .h-machine, .scene-art.art-light .art-card .h-machine { fill:#e8e8e8;stroke:#393939;stroke-width:1.5; }
.scene-art.art-light .h-bubble, .scene-art.art-light .art-card .h-bubble { fill:#fff;stroke:#e0e0e0; }
.scene-art.art-light .h-tag, .scene-art.art-light .art-card .h-tag { fill:#fff;stroke:#c6c6c6; }
.scene-art.art-light .h-win, .scene-art.art-light .art-card .h-win { fill:#fff;stroke:#c6c6c6; }
.scene-art.art-light .h-winbar, .scene-art.art-light .art-card .h-winbar { fill:#f4f4f4;stroke:#c6c6c6; }
.scene-art.art-light .h-dot, .scene-art.art-light .art-card .h-dot { fill:#c6c6c6;stroke:none; }
.scene-art.art-light .h-slot, .scene-art.art-light .art-card .h-slot { fill:none;stroke:#a6c8ff;stroke-width:1.5;stroke-dasharray:5 4; }
.scene-art.art-light .h-block, .scene-art.art-light .art-card .h-block { fill:#fff;stroke:#0f62fe;stroke-width:1.5; }
.scene-art.art-light .h-guide, .scene-art.art-light .art-card .h-guide { fill:none;stroke:#78a9ff;stroke-width:1.5;stroke-dasharray:3 4; }
.scene-art.art-light .h-bar, .scene-art.art-light .art-card .h-bar { fill:#a6c8ff;stroke:none; }
.scene-art.art-light .h-hexs, .scene-art.art-light .art-card .h-hexs { fill:#0f62fe;stroke:none; }
.scene-art.art-light .h-input, .scene-art.art-light .art-card .h-input { fill:#f4f4f4;stroke:#c6c6c6; }
.scene-art.art-light .h-cardw, .scene-art.art-light .art-card .h-cardw { fill:#fff;stroke:#e0e0e0; }
.scene-art.art-light .h-shelf, .scene-art.art-light .art-card .h-shelf { fill:none;stroke:#8d8d8d;stroke-width:3;stroke-linecap:round; }
.scene-art.art-light .h-cam, .scene-art.art-light .art-card .h-cam { fill:#393939;stroke:none; }
.scene-art.art-light .h-lens, .scene-art.art-light .art-card .h-lens { fill:#78a9ff;stroke:#fff;stroke-width:3; }
.scene-art.art-light .h-beam, .scene-art.art-light .art-card .h-beam { fill:rgb(15 98 254 / .07);stroke:none; }
.scene-art.art-light .h-conv, .scene-art.art-light .art-card .h-conv { fill:#e0e0e0;stroke:#a8a8a8; }
.scene-art.art-light .h-roll, .scene-art.art-light .art-card .h-roll { fill:#a8a8a8;stroke:none; }
.scene-art.art-light .h-prod, .scene-art.art-light .art-card .h-prod { fill:#d8c3a5;stroke:#a68a64; }
.scene-art.art-light .h-prod-l, .scene-art.art-light .art-card .h-prod-l { fill:none;stroke:#a68a64; }
.scene-art.art-light .h-label, .scene-art.art-light .art-card .h-label { fill:#fff;stroke:#c6c6c6; }
.scene-art.art-light .h-defect, .scene-art.art-light .art-card .h-defect { fill:#da1e28;stroke:none; }
.scene-art.art-light .h-bb-g, .scene-art.art-light .art-card .h-bb-g { fill:none;stroke:#24a148;stroke-width:3; }
.scene-art.art-light .h-bb-r, .scene-art.art-light .art-card .h-bb-r { fill:none;stroke:#da1e28;stroke-width:3; }
.scene-art.art-light .h-cyl-top, .scene-art.art-light .art-card .h-cyl-top { fill:#0f62fe;stroke:none; }
.scene-art.art-light .h-cyl, .scene-art.art-light .art-card .h-cyl { fill:#edf5ff;stroke:#0f62fe;stroke-width:2; }
.scene-art.art-light .h-cyl-l, .scene-art.art-light .art-card .h-cyl-l { fill:none;stroke:#78a9ff;stroke-width:1.5; }
.scene-art.art-light .h-road, .scene-art.art-light .art-card .h-road { fill:none;stroke:#e0e0e0;stroke-width:10;stroke-linecap:round; }
.scene-art.art-light .h-road-on, .scene-art.art-light .art-card .h-road-on { fill:none;stroke:#0f62fe;stroke-width:10;stroke-linecap:round; }
.scene-art.art-light .h-stop, .scene-art.art-light .art-card .h-stop { fill:#fff;stroke:#c6c6c6;stroke-width:2; }
.scene-art.art-light .h-stop-on, .scene-art.art-light .art-card .h-stop-on { fill:#0f62fe;stroke:none; }
.scene-art.art-light .ic-w, .scene-art.art-light .art-card .ic-w { fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.scene-art.art-light .h-link, .scene-art.art-light .art-card .h-link { fill:none;stroke:#0f62fe;stroke-width:4; }
.scene-art.art-light .h-link-m, .scene-art.art-light .art-card .h-link-m { fill:none;stroke:#78a9ff;stroke-width:4; }
.scene-art.art-light .h-avatar, .scene-art.art-light .art-card .h-avatar { fill:#edf5ff;stroke:#a6c8ff; }
.scene-art.art-light .h-time, .scene-art.art-light .art-card .h-time { fill:none;stroke:#c6c6c6;stroke-width:2; }
.scene-art.art-light .h-tdot, .scene-art.art-light .art-card .h-tdot { fill:#fff;stroke:#0f62fe;stroke-width:3; }
.scene-art.art-light .h-side, .scene-art.art-light .art-card .h-side { fill:#f4f4f4;stroke:#c6c6c6; }
.scene-art.art-light .h-side-on, .scene-art.art-light .art-card .h-side-on { fill:#edf5ff;stroke:#a6c8ff; }
.scene-art.art-light .h-none, .scene-art.art-light .art-card .h-none { fill:none;stroke:none; }
.scene-art.art-light .h-chat, .scene-art.art-light .art-card .h-chat { fill:#fff;stroke:#0f62fe;stroke-width:1.5; }
.scene-art.art-light .h-stamp, .scene-art.art-light .art-card .h-stamp { fill:none;stroke:#da1e28;stroke-width:3; }
.scene-art.art-light .h-orbit, .scene-art.art-light .art-card .h-orbit { fill:none;stroke:#c6c6c6;stroke-width:1.5;stroke-dasharray:4 6; }
.scene-art.art-light .t-s2l { font-size: 13px; fill: #393939; }
.scene-art.art-light .t-w-s { font-size: 13px; font-weight: 500; fill: #fff; }
.scene-art.art-light .t-big-d { font-size: 20px; font-weight: 500; fill: #161616; }
.scene-art.art-light .t-b-l { font-size: 13px; font-weight: 500; fill: #0f62fe; }
.scene-art.art-light .t-stamp { font-size: 15px; font-weight: 700; fill: #da1e28; letter-spacing: .08em; }
.scene-art.art-light .art-ok.ng circle { fill: #da1e28; }
.scene-art.art-light .art-ok.warn circle { fill: #f1c21b; }
.scene-art.art-light .art-ok.warn path { stroke: #161616; }
.hero-shot { display: block; width: 85%; height: auto; margin: 0 auto; }
.scene-art .t-mono-d { font-family: var(--mono); font-size: 12px; fill: #c6c6c6; }

/* Analyze 첫 화면: 머신러닝 순환 고리 */
.scene-art.art-light .an-ring { fill: none; stroke: #0f62fe; stroke-width: 2.5; stroke-linecap: round; }
.scene-art.art-light .an-loop { fill: none; stroke: #0f62fe; stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.scene-art.art-light .art-card circle.an-st { fill: #fff; stroke: #0f62fe; stroke-width: 2; }
.scene-art.art-light .art-card circle.an-st.b { fill: #0f62fe; }
.scene-art.art-light .an-st-n { font-size: 12px; font-weight: 600; fill: #0f62fe; }
.scene-art.art-light .an-st-n.b { fill: #fff; }
.dark .scene-art.art-light .art-card circle.an-st { fill: #161616; }

/* Catalog 첫 화면: 검색 + 자산 격자 + 자산 카드 */
.scene-art.art-light .art-card rect.ct-search { fill: #fff; stroke: #c6c6c6; }
.scene-art.art-light .ct-caret { stroke: #0f62fe; stroke-width: 1.6; animation: blink 1s steps(1) infinite; }
.scene-art.art-light .art-card rect.ct-sel { fill: #edf5ff; stroke: #0f62fe; stroke-width: 2; }
.scene-art.art-light .ct-tl { font-size: 10.5px; fill: #525252; }
.scene-art.art-light .ct-tl.b { fill: #0f62fe; font-weight: 600; }
.scene-art.art-light .ct-link { stroke: #0f62fe; stroke-width: 2; }
.scene-art.art-light .art-card rect.ct-card { stroke: #0f62fe; stroke-width: 1.5; }
.scene-art.art-light .ct-v { font-size: 12px; fill: #161616; }
.scene-art.art-light .art-card rect.ct-chip { fill: #f4f4f4; stroke: #e0e0e0; }
.scene-art.art-light .ct-chip-t { font-size: 10.5px; fill: #393939; }
.scene-art.art-light .art-card rect.ct-chip.b { fill: #edf5ff; stroke: #a6c8ff; } .scene-art.art-light .ct-chip-t.b { fill: #0043ce; }
.scene-art.art-light .art-card rect.ct-chip.ok { fill: #defbe6; stroke: #a7f0ba; } .scene-art.art-light .ct-chip-t.ok { fill: #0e6027; }
.scene-art.art-light .art-card rect.ct-chip.warn { fill: #fcf4d6; stroke: #f1c21b; } .scene-art.art-light .ct-chip-t.warn { fill: #8e6a00; }
.scene-art.art-light .art-card rect.ct-chip.no { fill: #fff1f1; stroke: #ffb3b8; } .scene-art.art-light .ct-chip-t.no { fill: #a2191f; }
.scene-art.art-light .ct-arr { stroke: #8d8d8d; stroke-width: 1.4; }
.scene-art.art-light .ct-track { stroke: #e0e0e0; stroke-width: 8; stroke-linecap: round; }
.scene-art.art-light .ct-fill { stroke: #24a148; stroke-width: 8; stroke-linecap: round; }
.scene-art.art-light .ct-av { fill: #d0e2ff; }
.scene-art.art-light .ct-up { stroke: #a8a8a8; stroke-width: 1.4; stroke-dasharray: 4 4; }
.scene-art.art-light .art-card rect.ct-pill { fill: #0f62fe; stroke: none; }
.scene-art.art-light .ct-pill-t { font-size: 12px; font-weight: 600; fill: #fff; }
.scene-art.art-light .ct-arr { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* VISION 첫 화면: 아이소메트릭 검사 라인 */
.scene-art.art-light .vs-floor { fill: #e8e8e8; opacity: .6; }
.scene-art.art-light .vs-belt { fill: #c6c6c6; }
.scene-art.art-light .vs-slat { stroke: #a8a8a8; stroke-width: 1.4; fill: none; }
.scene-art.art-light .vs-side { fill: #6f6f6f; }
.scene-art.art-light .vs-end { fill: #525252; }
.scene-art.art-light .vs-leg { stroke: #525252; stroke-width: 5; stroke-linecap: round; }
.scene-art.art-light .vs-post { fill: none; stroke: #8d8d8d; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.scene-art.art-light .vb-t { fill: #d0e2ff; } .scene-art.art-light .vb-l { fill: #a6c8ff; } .scene-art.art-light .vb-r { fill: #78a9ff; }
.scene-art.art-light .vb-x { fill: none; stroke: #da1e28; stroke-width: 2.2; stroke-linecap: round; }
.scene-art.art-light .vs-beam { fill: #0f62fe; opacity: .12; }
.scene-art.art-light .vs-ok { fill: none; stroke: #24a148; stroke-width: 2.5; }
.scene-art.art-light .vs-ng { fill: rgb(218 30 40 / .12); stroke: #da1e28; stroke-width: 2.5; }
.scene-art.art-light .vs-cam-t { fill: #525252; } .scene-art.art-light .vs-cam-s { fill: #262626; } .scene-art.art-light .vs-cam-r { fill: #393939; }
.scene-art.art-light .vs-lens { fill: #0f62fe; stroke: #fff; stroke-width: 2; }
.scene-art.art-light .vs-col { stroke: #525252; stroke-width: 12; stroke-linecap: round; }
.scene-art.art-light .vs-base { fill: #393939; }
.scene-art.art-light .vs-arm { stroke: #0f62fe; stroke-width: 12; stroke-linecap: round; }
.scene-art.art-light .vs-arm2 { stroke: #4589ff; stroke-width: 9; stroke-linecap: round; }
.scene-art.art-light .vs-joint { fill: #fff; stroke: #0043ce; stroke-width: 3; }
.scene-art.art-light .vs-grip { fill: none; stroke: #262626; stroke-width: 3; stroke-linecap: round; }
.scene-art.art-light .vs-bin-b { fill: #ffb3b8; } .scene-art.art-light .vs-bin-in { fill: #ffd7d9; }
.scene-art.art-light .vs-bin-f { fill: #fa4d56; opacity: .92; } .scene-art.art-light .vs-bin-s { fill: #da1e28; }
.scene-art.art-light .vs-call { fill: none; stroke: #a8a8a8; stroke-width: 1.4; stroke-dasharray: 4 4; }
.scene-art.art-light .vs-dot { fill: #0f62fe; }
.scene-art.art-light .vs-okt { font-size: 12px; font-weight: 600; fill: #198038; }
.scene-art.art-light .vs-ngt { font-size: 12px; font-weight: 600; fill: #da1e28; }

/* VISION 첫 화면 다듬기 */
.scene-art.art-light .vb-t { fill: #d0e2ff; } .scene-art.art-light .vb-l { fill: #a6c8ff; } .scene-art.art-light .vb-r { fill: #78a9ff; }
.scene-art.art-light .vb-tape { fill: none; stroke: #edf5ff; stroke-width: 4; stroke-linejoin: round; }
.scene-art.art-light .vb-crack { fill: none; stroke: #da1e28; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene-art.art-light .vb-dot { fill: #da1e28; }
.scene-art.art-light .vs-rail { stroke: #8d8d8d; stroke-width: 2.5; stroke-linecap: round; }
.scene-art.art-light .vs-lg-t, .scene-art.art-light .vs-lg-l { fill: #6f6f6f; } .scene-art.art-light .vs-lg-r { fill: #525252; }
.scene-art.art-light .vs-pst-t { fill: #c6c6c6; } .scene-art.art-light .vs-pst-l { fill: #a8a8a8; } .scene-art.art-light .vs-pst-r { fill: #8d8d8d; }
.scene-art.art-light .vs-cam-t { fill: #6f6f6f; } .scene-art.art-light .vs-cam-l { fill: #393939; } .scene-art.art-light .vs-cam-r { fill: #262626; }
.scene-art.art-light .vs-ped-t { fill: #6f6f6f; } .scene-art.art-light .vs-ped-l { fill: #525252; } .scene-art.art-light .vs-ped-r { fill: #393939; }
.scene-art.art-light .vs-colm-t { fill: #a8a8a8; } .scene-art.art-light .vs-colm-l { fill: #8d8d8d; } .scene-art.art-light .vs-colm-r { fill: #6f6f6f; }
.scene-art.art-light .vs-scan { stroke: #0f62fe; stroke-width: 2; opacity: .55; }
.scene-art.art-light .vs-arm-o { stroke: #0043ce; stroke-width: 16; stroke-linecap: round; }
.scene-art.art-light .vs-arm { stroke: #0f62fe; stroke-width: 11; stroke-linecap: round; }
.scene-art.art-light .vs-arm2-o { stroke: #0043ce; stroke-width: 13; stroke-linecap: round; }
.scene-art.art-light .vs-arm2 { stroke: #4589ff; stroke-width: 8; stroke-linecap: round; }
.scene-art.art-light .vs-joint-c { fill: #0043ce; }
.scene-art.art-light .vs-grip-b { fill: #393939; }
.scene-art.art-light .vs-grip { fill: none; stroke: #393939; stroke-width: 3; stroke-linecap: round; }
.scene-art.art-light .vs-bin-in { fill: #ffd7d9; } .scene-art.art-light .vs-bin-w { fill: #ffb3b8; } .scene-art.art-light .vs-bin-w2 { fill: #ff8389; }
.scene-art.art-light .vs-bin-l { fill: #fa4d56; opacity: .94; } .scene-art.art-light .vs-bin-r { fill: #da1e28; opacity: .94; }
.scene-art.art-light .vs-bin-rim { fill: none; stroke: #a2191f; stroke-width: 2; stroke-linejoin: round; }
.scene-art.art-light .vs-hcam { fill: none; stroke: #0f62fe; stroke-width: 1.8; stroke-linejoin: round; }
.scene-art.art-light .vs-axle { fill: #c6c6c6; stroke: #393939; stroke-width: 2; }

/* 예지보전 첫 화면 */
.scene-art.art-light .pd-band { fill: #defbe6; opacity: .7; }
.scene-art.art-light .pd-lim { stroke: #f1c21b; stroke-width: 1.4; stroke-dasharray: 5 4; }
.scene-art.art-light .pd-sig { fill: none; stroke: #0f62fe; stroke-width: 2; stroke-linejoin: round; }
.scene-art.art-light .pd-head { fill: #fff; stroke: #0f62fe; stroke-width: 2.5; }
.scene-art.art-light .pd-head.w { stroke: #f1c21b; }
.scene-art.art-light .pd-floor { fill: #e8e8e8; opacity: .6; }
.scene-art.art-light .pd-base-t { fill: #8d8d8d; } .scene-art.art-light .pd-base-l { fill: #6f6f6f; } .scene-art.art-light .pd-base-r { fill: #525252; }
.scene-art.art-light .pd-mot-t { fill: #a6c8ff; } .scene-art.art-light .pd-mot-l { fill: #4589ff; } .scene-art.art-light .pd-mot-r { fill: #0f62fe; }
.scene-art.art-light .pd-fin { stroke: #0043ce; stroke-width: 2; stroke-linecap: round; opacity: .55; }
.scene-art.art-light .pd-cpl-t { fill: #c6c6c6; } .scene-art.art-light .pd-cpl-l { fill: #8d8d8d; } .scene-art.art-light .pd-cpl-r { fill: #6f6f6f; }
.scene-art.art-light .pd-pmp-t { fill: #e0e0e0; } .scene-art.art-light .pd-pmp-l { fill: #c6c6c6; } .scene-art.art-light .pd-pmp-r { fill: #a8a8a8; }
.scene-art.art-light .pd-pipe-t { fill: #c6c6c6; } .scene-art.art-light .pd-pipe-l { fill: #a8a8a8; } .scene-art.art-light .pd-pipe-r { fill: #8d8d8d; }
.scene-art.art-light .pd-sen { fill: #24a148; stroke: #fff; stroke-width: 2; }
.scene-art.art-light .pd-ring { fill: none; stroke: #24a148; stroke-width: 2; }
.scene-art.art-light .pd-sen.w { fill: #f1c21b; } .scene-art.art-light .pd-ring.w { stroke: #f1c21b; }
.scene-art.art-light .pd-link { fill: none; stroke: #a8a8a8; stroke-width: 1.4; stroke-dasharray: 4 4; }
.scene-art.art-light .pd-track { fill: none; stroke: #e0e0e0; stroke-width: 10; }
.scene-art.art-light .pd-arc { fill: none; stroke: #24a148; stroke-width: 10; stroke-linecap: round; }
.scene-art.art-light .pd-num { font-size: 28px; font-weight: 600; fill: #161616; }
.scene-art.art-light .pd-num.w { fill: #8e6a00; }
.scene-art.art-light .pd-alert { fill: #fff; stroke: #f1c21b; stroke-width: 1.5; }
.scene-art.art-light .pd-alert-bar { fill: #f1c21b; }
.scene-art.art-light .pd-tri { fill: #f1c21b; }
.scene-art.art-light .pd-tri-m { stroke: #161616; stroke-width: 2.2; stroke-linecap: round; }
.scene-art.art-light .pd-live { fill: #24a148; }
.scene-art.art-light .pd-okc { fill: #24a148; }
.scene-art.art-light .pd-okm { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene-art.art-light .art-card rect.pd-alert { fill: #fffbeb; stroke: #f1c21b; stroke-width: 1.5; }
.scene-art.art-light .art-card rect.pd-alert-bar { fill: #f1c21b; stroke: none; }

/* ERP 첫 화면 */
.scene-art.art-light .er-tile { fill: #e8e8e8; }
.scene-art.art-light .er-tile-on { fill: #d0e2ff; }
.scene-art.art-light .er-doc-t { fill: #fff; } .scene-art.art-light .er-doc-l { fill: #e0e0e0; } .scene-art.art-light .er-doc-r { fill: #c6c6c6; }
.scene-art.art-light .er-line { stroke: #a8a8a8; stroke-width: 2; stroke-linecap: round; }
.scene-art.art-light .er-stamp { fill: #0f62fe; }
.scene-art.art-light .er-bx-t { fill: #d0e2ff; } .scene-art.art-light .er-bx-l { fill: #a6c8ff; } .scene-art.art-light .er-bx-r { fill: #78a9ff; }
.scene-art.art-light .er-cargo-t { fill: #e0e0e0; } .scene-art.art-light .er-cargo-l { fill: #c6c6c6; } .scene-art.art-light .er-cargo-r { fill: #a8a8a8; }
.scene-art.art-light .er-cab-t { fill: #78a9ff; } .scene-art.art-light .er-cab-l { fill: #4589ff; } .scene-art.art-light .er-cab-r { fill: #0f62fe; }
.scene-art.art-light .er-wheel { fill: #393939; stroke: #fff; stroke-width: 2; }
.scene-art.art-light .er-coin-s { fill: #d2a106; stroke: #b28600; stroke-width: .8; }
.scene-art.art-light .er-coin-t { fill: #f1c21b; stroke: #d2a106; stroke-width: 1; }
.scene-art.art-light .er-won { font-size: 12px; font-weight: 700; fill: #8e6a00; }
.scene-art.art-light .er-track { stroke: #c6c6c6; stroke-width: 3; stroke-linecap: round; }
.scene-art.art-light .er-dot { fill: #fff; stroke: #a8a8a8; stroke-width: 2; }
.scene-art.art-light .er-dot.on { fill: #0f62fe; stroke: #0f62fe; }
.scene-art.art-light .er-down { stroke: #c6c6c6; stroke-width: 1.4; stroke-dasharray: 3 4; }
.scene-art.art-light .er-chip { fill: #0f62fe; }
.scene-art.art-light .er-chip-t { font-size: 11px; font-weight: 600; fill: #fff; letter-spacing: .02em; }
.scene-art.art-light .art-card rect.er-kpi { fill: #f4f4f4; stroke: none; }
.scene-art.art-light .er-val { font-size: 20px; font-weight: 600; fill: #161616; }
.scene-art.art-light .er-gp { font-size: 13px; font-weight: 600; fill: #198038; }

/* MES 첫 화면 */
.scene-art.art-light .ms-floor { fill: #e8e8e8; opacity: .6; }
.scene-art.art-light .ms-belt { fill: #c6c6c6; } .scene-art.art-light .ms-belt-s { fill: #6f6f6f; } .scene-art.art-light .ms-belt-r { fill: #525252; }
.scene-art.art-light .ms-p-t { fill: #d0e2ff; } .scene-art.art-light .ms-p-l { fill: #a6c8ff; } .scene-art.art-light .ms-p-r { fill: #78a9ff; }
.scene-art.art-light .ms-kiosk-t { fill: #e0e0e0; } .scene-art.art-light .ms-kiosk-l { fill: #c6c6c6; } .scene-art.art-light .ms-kiosk-r { fill: #a8a8a8; }
.scene-art.art-light .ms-scan { stroke: #da1e28; stroke-width: 2; stroke-linecap: round; }
.scene-art.art-light .ms-cnc-t { fill: #a6c8ff; } .scene-art.art-light .ms-cnc-l { fill: #4589ff; } .scene-art.art-light .ms-cnc-r { fill: #0f62fe; }
.scene-art.art-light .ms-win { fill: #edf5ff; opacity: .85; }
.scene-art.art-light .ms-asm-t { fill: #c6c6c6; } .scene-art.art-light .ms-asm-l { fill: #8d8d8d; } .scene-art.art-light .ms-asm-r { fill: #6f6f6f; }
.scene-art.art-light .ms-qc-t { fill: #e0e0e0; } .scene-art.art-light .ms-qc-l { fill: #c6c6c6; } .scene-art.art-light .ms-qc-r { fill: #a8a8a8; }
.scene-art.art-light .ms-cam { fill: #262626; }
.scene-art.art-light .ms-pack-t { fill: #f1c21b; } .scene-art.art-light .ms-pack-l { fill: #d2a106; } .scene-art.art-light .ms-pack-r { fill: #b28600; }
.scene-art.art-light .ms-lamp { fill: #24a148; stroke: #fff; stroke-width: 2; }
.scene-art.art-light .ms-ring { fill: none; stroke: #24a148; stroke-width: 2; }
.scene-art.art-light .ms-lb { font-size: 12px; fill: #525252; }
.scene-art.art-light .ms-link { fill: none; stroke: #a8a8a8; stroke-width: 1.4; stroke-dasharray: 4 4; }
.scene-art.art-light .art-card rect.ms-badge { fill: #0f62fe; stroke: none; }
.scene-art.art-light .ms-badge-t { font-size: 11px; font-weight: 600; fill: #fff; }
.scene-art.art-light .ms-live { fill: #24a148; }
.scene-art.art-light .ms-big { font-size: 36px; font-weight: 600; fill: #161616; }
.scene-art.art-light .ms-of { font-size: 16px; fill: #6f6f6f; }
.scene-art.art-light .art-card rect.ms-track { fill: #e0e0e0; stroke: none; }
.scene-art.art-light .art-card rect.ms-fill { fill: #0f62fe; stroke: none; }
.scene-art.art-light .ms-kv { font-size: 18px; font-weight: 600; fill: #161616; }
.scene-art.art-light .art-card rect.ms-chip { fill: #f4f4f4; stroke: #e0e0e0; }
.scene-art.art-light .art-card rect.ms-chip.ok { fill: #defbe6; stroke: #a7f0ba; }
.scene-art.art-light .ms-chip-t { font-size: 11px; fill: #393939; } .scene-art.art-light .ms-chip-t.ok { fill: #0e6027; font-weight: 600; }
.scene-art.art-light .ms-arr { stroke: #8d8d8d; stroke-width: 1.4; }
.scene-art.art-light .ms-tag rect { fill: #fff; stroke: #c6c6c6; }
.scene-art.art-light .ms-tag text { font-size: 11px; font-weight: 500; fill: #262626; }

/* MES 화면 칸 */
.scene-art .mm-sw { fill: #525252; } .scene-art .mm-sw.on { fill: #0f62fe; }
.scene-art .mm-knob { fill: #c6c6c6; } .scene-art .mm-knob.on { fill: #fff; }
.scene-art .art-card rect.mm-hl { fill: none; stroke: #4589ff; stroke-width: 2; }
.scene-art .mm-item { fill: #393939; }
.scene-art .mm-dot { fill: #42be65; }
.scene-art .mm-hex { fill: #0f62fe; }
.scene-art .art-card rect.ml-s { fill: #42be65; stroke: none; }
.scene-art .art-card rect.ml-m { fill: #f1c21b; stroke: none; }
.scene-art .art-card rect.ml-more { fill: #6f6f6f; stroke: none; }
.scene-art .ml-k { font-size: 11px; font-weight: 700; fill: #161616; }
.scene-art .ml-lv { font-size: 9px; font-weight: 600; fill: #161616; }
.scene-art .ml-lot { font-size: 13px; font-weight: 600; fill: #f4f4f4; }
.scene-art .ml-ln { fill: none; stroke: #8d8d8d; stroke-width: 1.5; }
.scene-art .mm-chk { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene-art .mm-sw { fill: #393939; } .scene-art .mm-sw.on { fill: #0f62fe; }

/* MES AI 화면 */
.scene-art .art-card rect.ma-q { fill: #0f62fe; stroke: none; }
.scene-art .ma-qt { font-size: 12.5px; fill: #fff; }
.scene-art .art-card rect.ma-warn { fill: #3e3303; stroke: #f1c21b; }
.scene-art .ma-warn-t { font-size: 11.5px; fill: #f1c21b; }
.scene-art .art-card rect.ma-btn { fill: #0f62fe; stroke: none; }
.scene-art .ma-btn-t { font-size: 12px; font-weight: 600; fill: #fff; }
.scene-art .art-card rect.ma-bar { fill: #fa4d56; stroke: none; }
.scene-art .art-card rect.ml-meta { fill: #262626; stroke: #4589ff; }
.scene-art .ml-mv { font-size: 12px; font-weight: 600; fill: #f4f4f4; }
.scene-art .ml-sel { stroke: #4589ff; stroke-dasharray: 3 3; }

/* CRM 첫 화면 */
.scene-art.art-light .cr-base-t { fill: #e0e0e0; } .scene-art.art-light .cr-base-l { fill: #c6c6c6; } .scene-art.art-light .cr-base-r { fill: #a8a8a8; }
.scene-art.art-light .cr-bld-t { fill: #a6c8ff; } .scene-art.art-light .cr-bld-l { fill: #4589ff; } .scene-art.art-light .cr-bld-r { fill: #0f62fe; }
.scene-art.art-light .cr-bld2-t { fill: #d0e2ff; } .scene-art.art-light .cr-bld2-l { fill: #a6c8ff; } .scene-art.art-light .cr-bld2-r { fill: #78a9ff; }
.scene-art.art-light .cr-win { fill: #edf5ff; opacity: .9; }
.scene-art.art-light .cr-name { font-size: 18px; font-weight: 600; fill: #161616; }
.scene-art.art-light .cr-kv { font-size: 16px; font-weight: 600; fill: #161616; }
.scene-art.art-light .cr-rail { stroke: #e0e0e0; stroke-width: 3; }
.scene-art.art-light .cr-rail-on { stroke: #0f62fe; stroke-width: 3; fill: none; }
.scene-art.art-light .cr-dot { stroke: #fff; stroke-width: 3; }
.scene-art.art-light .cr-dot.b { fill: #0f62fe; } .scene-art.art-light .cr-dot.g { fill: #24a148; } .scene-art.art-light .cr-dot.p { fill: #8a3ffc; }
.scene-art.art-light .cr-ic { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scene-art.art-light .cr-next { fill: #edf5ff; stroke: #a6c8ff; }
.scene-art.art-light .cr-next-t { font-size: 12px; font-weight: 600; fill: #0043ce; }

/* CRM AI 화면 */
.scene-art .cr2-act { font-size: 11.5px; fill: #78a9ff; }
.scene-art .cr2-down { font-size: 15px; font-weight: 600; fill: #ff8389; }
.scene-art .cr2-spark { fill: none; stroke: #ff8389; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.scene-art .cr2-down { font-size: 12.5px; }

/* RxComponents 첫 화면 */
.scene-art.art-light .art-card rect.rx-ed { fill: #161616; stroke: #393939; }
.scene-art.art-light .rx-ed-ln { stroke: #393939; }
.scene-art.art-light .art-card rect.rx-chip { fill: #262626; stroke: none; }
.scene-art.art-light .art-card rect.rx-chip.on { fill: #0f62fe; }
.scene-art.art-light .rx-chip-t { font-size: 11px; font-weight: 600; fill: #fff; }
.scene-art.art-light .rx-code { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; }
.scene-art.art-light .rx-tag { fill: #78a9ff; } .scene-art.art-light .rx-at { fill: #be95ff; } .scene-art.art-light .rx-v { fill: #42be65; }
.scene-art.art-light .rx-db-s { fill: #4589ff; } .scene-art.art-light .rx-db-t { fill: #a6c8ff; stroke: #0f62fe; stroke-width: 1; } .scene-art.art-light .rx-db-m { fill: none; stroke: #0043ce; stroke-width: 1.2; }
.scene-art.art-light .rx-flow { stroke: #a8a8a8; stroke-width: 1.4; stroke-dasharray: 4 4; }
.scene-art.art-light .rx-dot1 { fill: #fa4d56; } .scene-art.art-light .rx-dot2 { fill: #f1c21b; } .scene-art.art-light .rx-dot3 { fill: #42be65; }
.scene-art.art-light .art-card rect.rx-th { fill: #e0e0e0; stroke: none; }
.scene-art.art-light .rx-thx { font-size: 10.5px; font-weight: 600; fill: #393939; }
.scene-art.art-light .art-card rect.rx-tr { fill: #fff; stroke: none; } .scene-art.art-light .art-card rect.rx-tr2 { fill: #f4f4f4; stroke: none; }
.scene-art.art-light .art-card rect.rx-cell { fill: #c6c6c6; stroke: none; }
.scene-art.art-light .art-card rect.rx-s1 { fill: #a7f0ba; stroke: none; } .scene-art.art-light .art-card rect.rx-s2 { fill: #d0e2ff; stroke: none; } .scene-art.art-light .art-card rect.rx-s3 { fill: #fcf4d6; stroke: none; }
.scene-art.art-light .art-card rect.rx-tag { fill: #edf5ff; stroke: #a6c8ff; } .scene-art.art-light .rx-tag-t { font-size: 10.5px; font-weight: 600; fill: #0043ce; }
.scene-art.art-light .art-card rect.rx-bar { fill: #0f62fe; stroke: none; transform-box: fill-box; transform-origin: bottom; animation: rx-grow .6s var(--ease) both; animation-delay: var(--d); }
.scene-art.art-light .art-card rect.rx-g { stroke: none; } .scene-art.art-light .art-card rect.rx-g.b { fill: #4589ff; } .scene-art.art-light .art-card rect.rx-g.p { fill: #a56eff; } .scene-art.art-light .art-card rect.rx-g.g { fill: #42be65; }
.scene-art.art-light .art-card rect.rx-ai { fill: #161616; stroke: none; }
.scene-art.art-light .rx-ai-hex { fill: #4589ff; }
.scene-art.art-light .rx-ai-t { font-size: 12px; font-weight: 600; fill: #fff; }
.scene-art.art-light .rx-ai-s { font-size: 11.5px; fill: #c6c6c6; }
@keyframes rx-grow { from { transform: scaleY(0); } to { transform: none; } }

/* Rx 가상화 */
.scene-art .rv-stack { fill: #262626; stroke: #393939; }
.scene-art .rv-ln { stroke: #525252; stroke-width: 2; stroke-linecap: round; }
.scene-art .rv-win { fill: rgb(69 137 255 / .18); stroke: #4589ff; stroke-width: 2; }
.scene-art .rv-ray { stroke: #4589ff; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.scene-art .rv-range { font-size: 12.5px; font-weight: 600; fill: #78a9ff; }
.scene-art .art-card rect.rv-r { fill: #262626; stroke: none; } .scene-art .art-card rect.rv-r2 { fill: #2e2e2e; stroke: none; }
.scene-art .art-card rect.rv-cell { fill: #6f6f6f; stroke: none; } .scene-art .art-card rect.rv-cell.b { fill: #4589ff; }
.scene-art .art-card rect.rv-track { fill: #393939; stroke: none; } .scene-art .art-card rect.rv-thumb { fill: #4589ff; stroke: none; }
.scene-art .art-card rect.rv-bar { fill: #4589ff; stroke: none; }
/* 모션 끄기: SMIL로 바꿔 보이던 요소는 처음 상태만 보이게 */
html.motion-off .scene-art [opacity="0"] { opacity: 0 !important; }

/* 도입 문의 페이지 */
.contact-page { padding: 112px 0 96px; background: linear-gradient(180deg, #f4f4f4 0%, #fff 60%); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.contact-copy h1 { font-size: clamp(40px, 5vw, 60px); font-weight: 300; line-height: 1.15; margin: 12px 0 24px; letter-spacing: -.01em; }
.contact-copy .lead { color: #525252; font-size: 17px; line-height: 1.7; max-width: 30em; }
.contact-meta { margin: 40px 0 0; border-top: 1px solid #e0e0e0; }
.contact-meta div { display: flex; gap: 24px; padding: 16px 0; border-bottom: 1px solid #e0e0e0; }
.contact-meta dt { width: 88px; color: #6f6f6f; font-size: 14px; }
.contact-meta dd { margin: 0; font-size: 15px; }
.contact-meta a { color: #0f62fe; text-decoration: none; }
.contact-form-wrap { background: #fff; border: 1px solid #e0e0e0; padding: 40px; }
.contact-form { display: grid; gap: 20px; }
.contact-form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form .f-field { display: grid; gap: 8px; font-size: 13px; color: #525252; }
.contact-form .f-field b, .contact-form .f-check b { color: #da1e28; font-weight: 500; }
.contact-form input:not([type=checkbox]), .contact-form select, .contact-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: #161616; background: #f4f4f4; border: 0; border-bottom: 1px solid #8d8d8d; padding: 12px 14px; border-radius: 0; outline: 2px solid transparent; outline-offset: -2px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline-color: #0f62fe; }
.contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.contact-form .input-validation-error { outline-color: #da1e28 !important; }
.contact-form .f-msg { color: #da1e28; font-size: 12px; min-height: 0; }
.contact-form .f-msg:empty { display: none; }
.contact-form .f-privacy { font-size: 13px; color: #525252; background: #f4f4f4; padding: 12px 14px; }
.contact-form .f-privacy summary { cursor: pointer; }
.contact-form .f-privacy p { margin: 10px 0 0; line-height: 1.7; }
.contact-form .f-check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #161616; cursor: pointer; }
.contact-form .f-check input { width: 18px; height: 18px; accent-color: #0f62fe; }
.contact-form .f-submit { justify-self: start; min-width: 220px; }
.contact-form .form-error { margin: 0; padding: 12px 14px; background: #fff1f1; border-left: 3px solid #da1e28; color: #a2191f; font-size: 14px; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-done { text-align: left; padding: 24px 0; }
.contact-done .done-ic { width: 48px; height: 48px; }
.contact-done .done-ic circle { fill: #24a148; }
.contact-done .done-ic path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.contact-done h2 { font-size: 28px; font-weight: 400; margin: 20px 0 8px; }
.contact-done p { color: #525252; margin: 0 0 28px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } .contact-form-wrap { padding: 24px 16px; } .contact-form .f-row { grid-template-columns: 1fr; } .contact-page { padding: 88px 0 64px; } }

/* 회사 소개 페이지 */
.company-hero { padding: 112px 0 72px; background: linear-gradient(180deg, #f4f4f4 0%, #fff 100%); }
.company-hero h1 { font-size: clamp(44px, 6vw, 76px); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; margin: 16px 0 28px; }
.company-hero .lead { max-width: 46em; font-size: 18px; line-height: 1.75; color: var(--text-2); }
.sec-lead { margin-top: 20px; font-size: 17px; line-height: 1.75; color: var(--text-2); max-width: 44em; }
.co-tech { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--text); }
.co-tech-item { padding: 28px 24px 32px 0; border-right: 1px solid var(--border); }
.co-tech-item + .co-tech-item { padding-left: 24px; }
.co-tech-item:last-child { border-right: 0; }
.co-tech-item .num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--blue); }
.co-tech-item h3 { font-size: 22px; font-weight: 400; margin: 16px 0 10px; }
.co-tech-item p { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.co-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.co-value { background: var(--bg, #fff); padding: 28px 24px 32px; border-top: 3px solid var(--blue); }
.co-value small { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--blue); }
.co-value h3 { font-size: 26px; font-weight: 400; margin: 12px 0 10px; }
.co-value p { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.co-info-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.co-info { margin: 0; border-top: 1px solid var(--text); }
.co-info div { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.co-info dt { color: var(--text-2); font-size: 14px; }
.co-info dd { margin: 0; font-size: 16px; line-height: 1.6; }
.co-info a { color: var(--blue); text-decoration: none; margin-left: 8px; }
@media (max-width: 900px) {
  .co-tech, .co-values { grid-template-columns: 1fr 1fr; }
  .co-tech-item { padding: 24px 16px 24px 0; }
  .co-tech-item:nth-child(2n) { border-right: 0; }
  .co-info-grid { grid-template-columns: 1fr; gap: 24px; }
  .co-info div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 560px) { .co-tech, .co-values { grid-template-columns: 1fr; } .co-tech-item { border-right: 0; padding-left: 0 !important; border-bottom: 1px solid var(--border); } }

.co-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.co-cert { border: 1px solid var(--border); padding: 28px 24px; background: #fff; }
.co-cert-ic { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; box-sizing: border-box; border-radius: 22px; background: #edf5ff; color: var(--blue); font-weight: 600; font-size: 15px; }
.co-cert h3 { font-size: 20px; font-weight: 400; margin: 20px 0 8px; }
.co-cert p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.co-org { display: grid; gap: 0; justify-items: center; }
.co-org-top { position: relative; padding: 18px 48px; background: var(--blue); color: #fff; font-size: 18px; }
.co-org-top::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 32px; background: var(--text-2); }
.co-org-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; margin-top: 64px; }
.co-org-row::before { content: ''; position: absolute; top: -32px; left: 16.66%; right: 16.66%; border-top: 1px solid var(--text-2); }
.co-org-unit { position: relative; display: grid; gap: 6px; text-align: center; padding: 22px 16px; background: #fff; border-top: 3px solid var(--blue); }
.co-org-unit::before { content: ''; position: absolute; left: 50%; top: -35px; width: 1px; height: 32px; background: var(--text-2); }
.co-org-unit b { font-size: 18px; font-weight: 500; }
.co-org-unit span { font-size: 14px; color: var(--text-2); }
@media (max-width: 900px) { .co-certs { grid-template-columns: 1fr 1fr; } .co-org-row { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; } .co-org-row::before, .co-org-unit::before { display: none; } .co-org-top::after { height: 32px; } }

.co-proof { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--text); }
.co-proof > div { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 32px 24px 36px 0; border-bottom: 1px solid var(--border); }
.co-proof > div:not(:nth-child(3n)) { border-right: 1px solid var(--border); }
.co-proof > div:not(:nth-child(3n+1)) { padding-left: 24px; }
.co-proof dd { margin: 0; font-size: clamp(44px, 5vw, 64px); font-weight: 300; letter-spacing: -.03em; color: var(--blue); line-height: 1; }
.co-proof dd small { font-size: 18px; letter-spacing: 0; margin-left: 6px; color: var(--text); }
.co-proof dt { font-size: 15px; line-height: 1.65; color: var(--text-2); }
@media (max-width: 900px) { .co-proof { grid-template-columns: 1fr 1fr; } .co-proof > div { border-right: 0 !important; padding-left: 0 !important; padding-right: 16px; } }
@media (max-width: 560px) { .co-proof { grid-template-columns: 1fr; } }

/* 언어 선택 */
.lang-sw { position: relative; }
.lang-sw summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 0 14px; height: 100%; min-height: 48px; font-size: 14px; color: var(--text); }
.lang-sw summary::-webkit-details-marker { display: none; }
.lang-sw summary .i { width: 18px; height: 18px; fill: currentColor; }
.lang-sw[open] summary, .lang-sw summary:hover { background: var(--layer, #f4f4f4); }
.lang-menu { position: absolute; right: 0; top: 100%; min-width: 160px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 24px rgb(0 0 0 / .12); display: grid; z-index: 60; }
.lang-menu a { padding: 12px 16px; font-size: 14px; color: var(--text); text-decoration: none; }
.lang-menu a:hover { background: var(--layer, #f4f4f4); }
.lang-menu a[aria-current="true"] { color: var(--blue); font-weight: 500; box-shadow: inset 3px 0 0 var(--blue); }
@media (max-width: 900px) { .lang-menu { position: static; box-shadow: none; border: 0; } .lang-sw summary { padding: 12px 0; } }

/* 채용 */
.co-jobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.co-job { position: relative; display: grid; gap: 8px; align-content: start; min-height: 180px; padding: 28px 24px 56px; background: #fff; border-top: 3px solid var(--blue); color: var(--text); text-decoration: none; transition: background .15s; }
.co-job:hover { background: #edf5ff; }
.co-job small { font-family: var(--mono); font-size: 13px; color: var(--blue); }
.co-job h3 { font-size: 20px; font-weight: 400; margin: 4px 0 0; }
.co-job p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.co-job .i { position: absolute; right: 20px; bottom: 20px; width: 20px; height: 20px; fill: var(--blue); }
.co-career-note { margin-top: 28px; font-size: 15px; color: var(--text-2); }
.co-career-note a { color: var(--blue); }
@media (max-width: 900px) { .co-jobs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .co-jobs { grid-template-columns: 1fr; } }

/* WaveWorks 첫 화면: 같은 데이터 판 위에 제품이 하나씩 */
.scene-art.art-light .ww-base-t { fill: #f4f4f4; } .scene-art.art-light .ww-base-l { fill: #e0e0e0; } .scene-art.art-light .ww-base-r { fill: #c6c6c6; }
.scene-art.art-light .ww-top-on { fill: #edf5ff; }
.scene-art.art-light .ww-slot { fill: none; stroke: #a8a8a8; stroke-width: 1.4; stroke-dasharray: 5 5; }
.scene-art.art-light .ww-link { fill: none; stroke: #c6c6c6; stroke-width: 2; stroke-linecap: round; }
.scene-art.art-light .ww-link.on { stroke: #78a9ff; }
.scene-art.art-light .ww-b-t { fill: #a6c8ff; } .scene-art.art-light .ww-b-l { fill: #4589ff; } .scene-art.art-light .ww-b-r { fill: #0f62fe; }
.scene-art.art-light .ww-p-t { fill: #d4bbff; } .scene-art.art-light .ww-p-l { fill: #a56eff; } .scene-art.art-light .ww-p-r { fill: #8a3ffc; }
.scene-art.art-light .ww-t-t { fill: #9ef0f0; } .scene-art.art-light .ww-t-l { fill: #08bdba; } .scene-art.art-light .ww-t-r { fill: #007d79; }
.scene-art.art-light .ww-g-t { fill: #a7f0ba; } .scene-art.art-light .ww-g-l { fill: #42be65; } .scene-art.art-light .ww-g-r { fill: #198038; }
.scene-art.art-light .ww-tag { fill: #fff; stroke: #c6c6c6; }
.scene-art.art-light .ww-tag-t { font-size: 11.5px; font-weight: 600; fill: #161616; letter-spacing: .02em; }
.scene-art.art-light .ww-base-chip { fill: #161616; }
.scene-art.art-light .ww-chip-t { font-size: 12px; font-weight: 500; fill: #fff; }
.scene-art.art-light .art-card circle.ww-num, .scene-art.art-light .ww-num { fill: #e0e0e0; }
.scene-art.art-light .ww-num-on.b { fill: #0f62fe; } .scene-art.art-light .ww-num-on.p { fill: #8a3ffc; } .scene-art.art-light .ww-num-on.t { fill: #007d79; } .scene-art.art-light .ww-num-on.g { fill: #198038; }
.scene-art.art-light .ww-num-t { font-size: 12px; font-weight: 600; fill: #fff; }
.scene-art.art-light .art-card rect.ww-done { fill: #defbe6; stroke: #a7f0ba; }
.scene-art.art-light .ww-done-t { font-size: 12px; font-weight: 600; fill: #0e6027; }

/* TEAMS 첫 화면: 메일 한 통이 일이 되기까지 */
.scene-art.art-light .tm-ic.b { fill: #0f62fe; } .scene-art.art-light .tm-ic.p { fill: #8a3ffc; }
.scene-art.art-light .tm-icl { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scene-art.art-light .art-card rect.tm-btn { fill: #fff; stroke: #0f62fe; }
.scene-art.art-light .art-card rect.tm-btn.on { fill: #edf5ff; stroke: #0f62fe; }
.scene-art.art-light .tm-btn-t { font-size: 11.5px; font-weight: 600; fill: #0f62fe; }
.scene-art.art-light .tm-wire { fill: none; stroke: #a8a8a8; stroke-width: 1.4; stroke-dasharray: 4 4; }
.scene-art.art-light .art-card rect.tm-q { fill: #f4f4f4; stroke: none; }
.scene-art.art-light .tm-q-t { font-size: 12.5px; fill: #161616; }
.scene-art.art-light .art-card rect.tm-a { fill: #edf5ff; stroke: #d0e2ff; }
.scene-art.art-light .tm-hex { fill: #0f62fe; }
.scene-art.art-light .tm-a-t { font-size: 12.5px; font-weight: 600; fill: #0043ce; }
.scene-art.art-light .art-card rect.tm-track { fill: #d0e2ff; stroke: none; } .scene-art.art-light .art-card rect.tm-fill { fill: #0f62fe; stroke: none; }
.scene-art.art-light .art-card rect.tm-ok { fill: #defbe6; stroke: none; }
.scene-art.art-light .tm-ok-t { font-size: 11.5px; font-weight: 600; fill: #0e6027; }
.scene-art.art-light .tm-rail { fill: none; stroke: #e0e0e0; stroke-width: 3; }
.scene-art.art-light .tm-rail.on { stroke: #24a148; }
.scene-art.art-light .tm-step { fill: #fff; stroke: #c6c6c6; stroke-width: 2; }
.scene-art.art-light .tm-step.on { fill: #24a148; stroke: #24a148; }
.scene-art.art-light .tm-step-m { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene-art.art-light .art-card rect.tm-col { fill: #f4f4f4; stroke: none; }
.scene-art.art-light .tm-col-t { font-size: 12px; font-weight: 600; fill: #525252; }
.scene-art.art-light .art-card rect.tm-ph { fill: #fff; stroke: #e0e0e0; } .scene-art.art-light .art-card rect.tm-ph-l { fill: #e0e0e0; stroke: none; }
.scene-art.art-light rect.tm-task { fill: #fff; stroke: #0f62fe; stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .12)); }
.scene-art.art-light .tm-task-t { font-size: 12.5px; font-weight: 600; fill: #161616; }
.scene-art.art-light .tm-task-s { font-size: 11px; fill: #6f6f6f; }
.scene-art.art-light .tm-av { fill: #8a3ffc; }
.scene-art.art-light .tm-bell { fill: none; stroke: #525252; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.scene-art.art-light .tm-badge { fill: #da1e28; }
.scene-art.art-light .tm-badge-t { font-size: 10px; font-weight: 600; fill: #fff; }

/* RxControls 화면 칸: ECHO AI Client, 변경 추적 · 한 번에 저장 */
.scene-art .ec-code { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.scene-art .ec-tag { fill: #78a9ff; } .scene-art .ec-at { fill: #be95ff; } .scene-art .ec-v { fill: #42be65; }
.scene-art .art-card rect.ec-sel { fill: rgb(69 137 255 / .14); stroke: #4589ff; stroke-dasharray: 3 3; }
.scene-art .art-card rect.ec-panel { fill: #161616; stroke: #4589ff; }
.scene-art .art-card rect.ec-ans { fill: #262626; stroke: #393939; }
.scene-art .art-card rect.ec-hb { fill: #6f6f6f; stroke: none; } .scene-art .art-card rect.ec-hb.b { fill: #fa4d56; }
.scene-art .art-card rect.ec-act { fill: #0f62fe; stroke: none; }
.scene-art .ec-act-t { font-size: 10.5px; font-weight: 600; fill: #fff; }
.scene-art .art-card rect.ec-input { fill: #262626; stroke: #525252; }
.scene-art .ec-wire { fill: none; stroke: #4589ff; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.scene-art .tx-pulse { fill: none; stroke: #4589ff; stroke-width: 2; }
.scene-art .tx-undo { fill: none; stroke: #f1c21b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene-art .art-card rect.tx-slot { fill: none; stroke: #525252; stroke-dasharray: 3 3; }
.scene-art .tx-db-s { fill: #393939; stroke: #6f6f6f; } .scene-art .tx-db-t { fill: #525252; stroke: #6f6f6f; }
.scene-art .tx-db-l { font-size: 13px; font-weight: 600; fill: #f4f4f4; }
.scene-art .ec-cap { font-size: 10px; fill: #8d8d8d; }
.scene-art .ec-h { font-size: 12px; fill: #e0e0e0; }
.scene-art.art-light .tm-task-t { font-size: 12px; }

/* LinkerFlow 첫 화면: 위젯 끌어 놓기 · 기준 초과 · 여러 기기 */
.scene-art.art-light .art-card rect.lf-chip { fill: #f4f4f4; stroke: #e0e0e0; }
.scene-art.art-light .lf-chip-t { font-size: 12px; font-weight: 500; fill: #161616; }
.scene-art.art-light .lf-ic { fill: none; stroke: #6f6f6f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene-art.art-light .lf-ic.b { stroke: #0f62fe; }
.scene-art.art-light .lf-ic-t { font-size: 11px; font-weight: 700; fill: #0f62fe; }
.scene-art.art-light .lf-ghost { fill: #fff; stroke: #0f62fe; stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .18)); }
.scene-art.art-light .art-card rect.lf-slot { fill: none; stroke: #c6c6c6; stroke-dasharray: 5 5; }
.scene-art.art-light .lf-w { fill: #fff; stroke: #e0e0e0; }
.scene-art.art-light .lf-w-alert { fill: #fff1f1; stroke: #da1e28; stroke-width: 1.5; }
.scene-art.art-light .lf-wl { font-size: 11.5px; fill: #525252; } .scene-art.art-light .lf-wl.r { fill: #a2191f; }
.scene-art.art-light .lf-ws { font-size: 11px; fill: #6f6f6f; }
.scene-art.art-light .lf-big { font-size: 22px; font-weight: 600; fill: #161616; } .scene-art.art-light .lf-big.r { fill: #da1e28; }
.scene-art.art-light .lf-mid { font-size: 13px; font-weight: 600; fill: #161616; }
.scene-art.art-light .lf-alert-b { fill: #da1e28; } .scene-art.art-light .lf-alert-t { font-size: 11px; font-weight: 600; fill: #fff; }
.scene-art.art-light .lf-g-track { fill: none; stroke: #e0e0e0; stroke-width: 10; }
.scene-art.art-light .lf-g-fill { fill: none; stroke: #24a148; stroke-width: 10; }
.scene-art.art-light .lf-axis { stroke: #e0e0e0; }
.scene-art.art-light .lf-line { fill: none; stroke: #0f62fe; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.scene-art.art-light .lf-d-track { fill: none; stroke: #ffd7d9; stroke-width: 9; }
.scene-art.art-light .lf-d-fill { fill: none; stroke: #0f62fe; stroke-width: 9; }
.scene-art.art-light .lf-live { fill: #24a148; }
.scene-art.art-light .lf-wire { fill: none; stroke: #a8a8a8; stroke-width: 1.4; stroke-dasharray: 4 4; }
.scene-art.art-light .art-card rect.lf-src { fill: #161616; stroke: none; }
.scene-art.art-light .lf-src-t { font-size: 12px; font-weight: 600; fill: #fff; letter-spacing: .02em; }
.scene-art.art-light .art-card rect.lf-dev { fill: #393939; stroke: none; }
.scene-art.art-light .lf-stand { fill: none; stroke: #8d8d8d; stroke-width: 3; stroke-linecap: round; }
.scene-art.art-light .art-card rect.lf-m { fill: #525252; stroke: none; }
.scene-art.art-light .art-card rect.lf-m.on { fill: #78a9ff; } .scene-art.art-light .art-card rect.lf-m.r { fill: #fa4d56; }