/* ==========================================================
   ezVision 페이지 전용 스타일 (리뉴얼 시안)
   색상은 OKLCH 기준 / 기존 사이트 primary #1b7eff 계열 유지
   ========================================================== */
:root {
  --ink: oklch(0.22 0.02 255);
  --ink-2: oklch(0.45 0.02 255);
  --line: oklch(0.9 0.01 255);
  --paper: oklch(0.99 0.003 255);
  --tint: oklch(0.965 0.01 245);
  --navy: oklch(0.2 0.045 258);
  --navy-2: oklch(0.27 0.05 258);
  --on-navy: oklch(0.96 0.01 250);
  --on-navy-2: oklch(0.78 0.02 250);
  --blue: oklch(0.6 0.19 258);          /* ≈ #1b7eff */
  --sky: oklch(0.8 0.12 225);
  --ok: oklch(0.7 0.15 150);
  --check: oklch(0.8 0.14 80);
  --ng: oklch(0.63 0.2 27);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Noto Sans KR', system-ui, sans-serif;
}

.ezv-body { background: var(--paper); color: var(--ink); font-family: var(--sans); word-break: keep-all; }
.ezv-body h1, .ezv-body h2, .ezv-body h3 { font-family: var(--sans); letter-spacing: -0.02em; text-transform: none; }
.ezv-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ezv-body .pc { display: inline; }

/* buttons */
.ezv-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.ezv-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border-radius: 4px; font-size: 16px; font-weight: 700; transition: background .2s, color .2s, border-color .2s; }
.ezv-btn:hover, .ezv-btn:focus { text-decoration: none; }
.ezv-btn--primary { background: var(--blue); color: #fff; }
.ezv-btn--primary:hover { background: oklch(0.54 0.19 258); color: #fff; }
.ezv-btn--ghost { border: 1px solid oklch(1 0 0 / 0.4); color: var(--on-navy); }
.ezv-btn--ghost:hover { border-color: var(--sky); color: var(--sky); }

/* ---------- HERO ---------- */
.ezv-hero { position: relative; background: #fff; color: var(--ink); padding: 180px 0; overflow: hidden; }
.ezv-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center right; opacity: .55; }
.ezv-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 18%, oklch(1 0 0 / 0.55) 60%, oklch(1 0 0 / 0.2)); }
.ezv-hero-inner { position: relative; padding-bottom: 64px; }
.ezv-eyebrow { font-family: var(--mono); font-size: 14px; letter-spacing: .18em; color: var(--blue); margin: 0 0 20px; }
.ezv-hero-title { font-size: 60px; line-height: 1.25; font-weight: 700; color: var(--ink); margin: 0; }
.ezv-hero-title strong { color: var(--blue); font-weight: 900; }
.ezv-hero-desc { font-size: 19px; line-height: 1.7; color: var(--ink-2); margin: 24px 0 0; }
/* 적용 공정 로드맵: 브로슈어 표지와 동일하게 적용 중(실선·채움) → 확장 예정(점선·비움) */
.ezv-hero-process { position: relative; display: grid; grid-template-columns: 1fr 5fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ezv-pgroup { padding: 28px 0 30px; }
.ezv-pgroup.is-on { background: oklch(0.97 0.02 245); }
.ezv-pgroup-head { display: flex; align-items: center; gap: 10px; height: 24px; margin: 0 0 22px; padding: 0 32px; font-size: 15px; line-height: 1; }
.ezv-pgroup-head b { font-weight: 700; }
.ezv-pgroup-head span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; padding: 3px 8px; border-radius: 999px; }
.is-on .ezv-pgroup-head b { color: var(--blue); }
.is-on .ezv-pgroup-head span { background: var(--blue); border: 1px solid var(--blue); color: #fff; }
.is-next .ezv-pgroup-head b { color: var(--ink-2); }
.is-next .ezv-pgroup-head span { border: 1px dashed oklch(0.7 0.015 255); color: var(--ink-2); }
.ezv-pgroup ol { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
.ezv-pgroup ol::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; transform-origin: left center; }
.is-on ol::before { background: var(--blue); }
.is-next ol::before { background: repeating-linear-gradient(90deg, oklch(0.78 0.015 255) 0 6px, transparent 6px 12px); }
/* 적용 중 트랙 위를 흐르는 빛 */
.is-on ol::after { content: ""; position: absolute; top: 5px; left: 0; width: 80px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, oklch(0.85 0.12 225), transparent); opacity: 0; pointer-events: none; }
.ezv-pgroup li { position: relative; padding: 30px 8px 0; text-align: center; font-size: 16px; line-height: 1.4; }
.ezv-pgroup li::before { content: ""; position: absolute; z-index: 1; top: 0; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; box-sizing: border-box; }
.is-on li { color: var(--ink); font-weight: 700; }
.is-on li::before { background: var(--blue); box-shadow: 0 0 0 4px oklch(0.6 0.19 258 / 0.18); }
/* 적용 중 노드의 퍼지는 링 */
.is-on li::after { content: ""; position: absolute; top: 0; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--blue); box-sizing: border-box; opacity: 0; pointer-events: none; }
.is-next li { color: oklch(0.55 0.015 255); }
.is-next li::before { background: #fff; border: 2px dashed oklch(0.7 0.015 255); }

/* 등장 → 지속 애니메이션 (AOS가 .aos-animate를 붙이는 시점에 시작) */
.ezv-hero-process .ezv-pgroup ol::before { transform: scaleX(0); }
.ezv-hero-process .ezv-pgroup li { opacity: 0; transform: translateY(10px); }
.ezv-hero-process.aos-animate .is-on ol::before { animation: ezv-draw .8s .3s cubic-bezier(.65,0,.35,1) forwards; }
.ezv-hero-process.aos-animate .is-next ol::before { animation: ezv-draw .8s 1.1s cubic-bezier(.65,0,.35,1) forwards, ezv-march .9s 1.9s linear infinite; }
.ezv-hero-process.aos-animate .ezv-pgroup li { animation: ezv-rise .5s cubic-bezier(.2,.7,.3,1) forwards; }
.ezv-hero-process.aos-animate .is-on li:nth-child(1) { animation-delay: .35s; }
.ezv-hero-process.aos-animate .is-on li:nth-child(2) { animation-delay: .6s; }
.ezv-hero-process.aos-animate .is-on li:nth-child(3) { animation-delay: .85s; }
.ezv-hero-process.aos-animate .is-next li:nth-child(1) { animation-delay: 1.15s; }
.ezv-hero-process.aos-animate .is-next li:nth-child(2) { animation-delay: 1.4s; }
.ezv-hero-process.aos-animate .is-next li:nth-child(3) { animation-delay: 1.65s; }
.ezv-hero-process.aos-animate .is-next li:nth-child(4) { animation-delay: 1.9s; }
.ezv-hero-process.aos-animate .is-next li:nth-child(5) { animation-delay: 2.15s; }
.ezv-hero-process.aos-animate .is-on ol::after { animation: ezv-flow 2.6s 1.6s ease-in-out infinite; }
.ezv-hero-process.aos-animate .is-on li::after { animation: ezv-pulse 2.4s 1.6s ease-out infinite; }
.ezv-hero-process.aos-animate .is-on li:nth-child(2)::after { animation-delay: 2s; }
.ezv-hero-process.aos-animate .is-on li:nth-child(3)::after { animation-delay: 2.4s; }
.ezv-hero-process.aos-animate .is-next li::before { animation: ezv-spin 8s 1.9s linear infinite; }

@keyframes ezv-draw { to { transform: scaleX(1); } }
@keyframes ezv-rise { to { opacity: 1; transform: none; } }
@keyframes ezv-march { from { background-position: 0 0; } to { background-position: 12px 0; } }
@keyframes ezv-flow { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 80px); opacity: 0; } }
@keyframes ezv-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ezv-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ezv-hero-process .ezv-pgroup ol::before { transform: none; }
  .ezv-hero-process .ezv-pgroup li { opacity: 1; transform: none; }
  .ezv-hero-process.aos-animate * , .ezv-hero-process.aos-animate *::before, .ezv-hero-process.aos-animate *::after { animation: none !important; }
}

/* ---------- SECTION COMMON ---------- */
.ezv-sec { padding: 130px 0; }
.ezv-sec--tint { background: var(--tint); }
/* 바로 위 어두운 섹션(AI 판정 알고리즘)과 한 덩어리로 이어지는 섹션: 위 여백 대신 구분선 */
.ezv-sec.ezv-sec--join { padding-top: 0; }
.ezv-sec--join > .ezv-wrap { padding-top: 100px; border-top: 1px solid oklch(1 0 0 / 0.1); background-clip: padding-box; }
@media (max-width: 768px) { .ezv-sec--join > .ezv-wrap { padding-top: 60px; } }
.ezv-sec--dark { background: var(--navy); color: var(--on-navy); }
.ezv-label { font-family: var(--mono); font-size: 14px; letter-spacing: .16em; color: var(--blue); margin: 0 0 16px; }
.ezv-sec--dark .ezv-label { color: var(--sky); }
.ezv-title { font-size: 44px; line-height: 1.3; font-weight: 700; margin: 0 0 24px; color: inherit; }
.ezv-sec--dark .ezv-title { color: #fff; }
.ezv-lead { font-size: 18px; line-height: 1.75; color: var(--ink-2); max-width: 760px; margin: 0; }
.ezv-sec--dark .ezv-lead { color: var(--on-navy-2); }
.ezv-note { font-size: 14px; color: var(--ink-2); margin: 20px 0 0; }
.ezv-note--dark { color: var(--on-navy-2); }
.ezv-sub { font-size: 24px; font-weight: 700; margin: 90px 0 0; color: #fff; }

.ezv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ezv-split--rev { grid-template-columns: 0.8fr 1.2fr; }

/* ---------- 3 ZONE ---------- */
.ezv-zone { display: grid; grid-template-columns: 1.1fr 0.9fr 1fr; gap: 4px; }
.ezv-zone .z { padding: 34px 22px; display: flex; flex-direction: column; gap: 8px; color: var(--navy); }
.ezv-zone .z b { font-size: 26px; font-weight: 900; }
.ezv-zone .z span { font-size: 15px; font-weight: 500; }
.ezv-zone .z-ok { background: var(--ok); border-radius: 6px 0 0 6px; }
.ezv-zone .z-check { background: var(--check); }
.ezv-zone .z-ng { background: var(--ng); color: #fff; border-radius: 0 6px 6px 0; }
.ezv-zone .z-axis { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 10px 0 0; font-family: var(--mono); font-size: 12px; color: var(--on-navy-2); position: relative; }
.ezv-zone .z-axis::before { content: ""; position: absolute; left: 110px; right: 50px; top: 50%; height: 1px; background: oklch(1 0 0 / 0.25); }

/* ---------- SCREENS ---------- */
.ezv-shot { margin: 0; }
.ezv-shot img { display: block; width: 100%; height: auto; border-radius: 6px; background: oklch(0.88 0 0); border: 1px solid var(--line); }
.ezv-shot figcaption { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ezv-shot figcaption b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.ezv-shot--wide { margin-top: 64px; }
.ezv-shot-row { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 40px; margin-top: 56px; align-items: start; }
.ezv-shot-row .ezv-shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.ezv-shot-row .ezv-shot:last-child img { aspect-ratio: auto; }
.ezv-shot--tall img { max-width: 360px; margin: 0 auto; }
.ezv-shot--tall figcaption { text-align: center; }

/* ---------- MLOPS LOOP ---------- */
.ezv-loop { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: none; position: relative; }
.ezv-loop::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(var(--blue), var(--sky)); }
.ezv-loop li { position: relative; display: flex; align-items: center; gap: 20px; padding: 12px 0; font-size: 18px; font-weight: 500; }
.ezv-loop li span { position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); border: 2px solid var(--blue); font-family: var(--mono); font-size: 12px; color: var(--blue); display: grid; place-items: center; }
.ezv-loop li:nth-child(4) span { background: var(--blue); color: #fff; }

/* ---------- ARCHITECTURE ---------- */
/* 두 흐름의 색: 검사 흐름 = 블루, 학습 흐름 = 앰버 (브로슈어의 2색 구분과 동일) */
#architecture { --run: var(--blue); --run-soft: oklch(0.96 0.03 250); --learn: oklch(0.66 0.15 62); --learn-soft: oklch(0.97 0.04 80); }
.ezv-lead .t-run { color: var(--run); }
.ezv-lead .t-learn { color: var(--learn); }

/* 4개 영역 카드 */
.ezv-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 64px; }
.ezv-zcard { display: grid; grid-template-columns: 44% 1fr; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: box-shadow .3s, border-color .3s; }
.ezv-zcard:hover { border-color: oklch(0.6 0.19 258 / 0.35); box-shadow: 0 18px 40px -20px oklch(0.4 0.12 258 / 0.35); }
.ezv-zcard-img { background: oklch(0.2 0.03 258); min-height: 100%; }
.ezv-zcard-img img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; transition: transform .6s; }
.ezv-zcard:hover .ezv-zcard-img img { transform: scale(1.04); }
.ezv-zcard-img--diagram { background: oklch(0.97 0.005 255); }
.ezv-zcard-img--diagram img { object-fit: contain; padding: 16px; box-sizing: border-box; }
.ezv-zcard-body { display: flex; flex-direction: column; padding: 28px 28px 26px; }
.ezv-zcard-label { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--blue); margin: 0 0 8px; }
.ezv-zcard h3 { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.ezv-zcard ul { list-style: none; margin: 0; padding: 0; }
.ezv-zcard li { position: relative; padding-left: 14px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.ezv-zcard li + li { margin-top: 6px; }
.ezv-zcard li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: oklch(0.75 0.02 255); }
.ezv-zcard-steps { display: flex; gap: 6px; margin: auto 0 0; padding-top: 20px; }
.st { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--mono); font-size: 13px; font-weight: 700; color: #fff; }
.st--run { background: var(--run); }
.st--learn { background: var(--learn); }

/* ---------- 아키텍처 구성도 (4개 영역 + ①~⑨ 흐름) ---------- */
.ezv-archmap { margin-top: 56px; padding: 28px 32px 32px; background: #fff; border: 1px solid var(--line); border-radius: 24px; }

.ezv-map-body { display: grid; gap: 40px; }
/* 3열(노드 | 연결 통로 | 노드) × 3행(노드 | 통로 | 노드). 노드 높이는 내용에 맞춰 자동 */
.ezv-map { position: relative; display: grid; grid-template-columns: 1fr minmax(140px, 0.42fr) 1fr; grid-template-rows: auto 120px auto; }
.ezv-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }

/* 연결선: 점선이 진행 방향으로 흐름 */
.ezv-map .edge { transition: opacity .3s; }
.ezv-map .edge path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 8; animation: ezv-edge 1s linear infinite; }
.ezv-map .edge--dash path { stroke-dasharray: 2 8; }
.ezv-map .edge[data-flow="run"] path { stroke: var(--run); }
.ezv-map .edge[data-flow="learn"] path { stroke: var(--learn); }
.ezv-map .mk-run { fill: var(--run); }
.ezv-map .mk-learn { fill: var(--learn); }
.ezv-map .bd circle { stroke: #fff; stroke-width: 3; transition: r .2s; }
.ezv-map .edge[data-flow="run"] .bd circle { fill: var(--run); }
.ezv-map .edge[data-flow="learn"] .bd circle { fill: var(--learn); }
.ezv-map .bd text { fill: #fff; font-family: var(--mono); font-size: 16px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
@keyframes ezv-edge { to { stroke-dashoffset: -18; } }

/* 영역 노드: 이미지 + 설명 */
.ezv-map .node { position: relative; z-index: 1; display: grid; grid-template-columns: 42% 1fr; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .3s, box-shadow .3s, opacity .3s; }
.ezv-map .node--sw { grid-area: 1 / 1; }
.ezv-map .node--data { grid-area: 1 / 3; }
.ezv-map .node--mon { grid-area: 3 / 1; }
.ezv-map .node--hw { grid-area: 3 / 3; }
.ezv-map .node-img { background: oklch(0.2 0.03 258); }
.ezv-map .node-img img { display: block; width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
.ezv-map .node-img--diagram { background: var(--tint); }
.ezv-map .node-img--diagram img { object-fit: contain; padding: 14px; box-sizing: border-box; }
.ezv-map .node-body { display: flex; flex-direction: column; padding: 22px 22px 20px; }
.ezv-map .node-body > p { margin: 0 0 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--blue); }
.ezv-map .node h3 { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.ezv-map .node ul { list-style: none; margin: 0; padding: 0; }
.ezv-map .node li { position: relative; padding-left: 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.ezv-map .node li + li { margin-top: 4px; }
.ezv-map .node li::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: oklch(0.75 0.02 255); }
.ezv-map .chips { display: flex; gap: 6px; margin-top: auto; padding-top: 14px; }
.ezv-map .chips i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-family: var(--mono); font-size: 13px; font-weight: 700; color: #fff; transition: transform .25s, box-shadow .25s, opacity .3s; }
.ezv-map .chips .c-run { background: var(--run); }
.ezv-map .chips .c-learn { background: var(--learn); }

/* 단계 목록 */
.ezv-map-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ezv-map-steps .grp.is-run { --c: var(--run); --cs: var(--run-soft); }
.ezv-map-steps .grp.is-learn { --c: var(--learn); --cs: var(--learn-soft); }
.ezv-map-steps .grp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.ezv-map-steps .grp-head h3 { font-size: 18px; font-weight: 700; margin: 0; color: var(--c); }
.ezv-map-steps .grp-head span { font-size: 13px; color: var(--ink-2); }
.ezv-map-steps .grp-head em { flex-basis: 100%; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--c); }
.ezv-map-steps ol { list-style: none; margin: 0; padding: 0; }
.ezv-map-steps li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 12px; cursor: pointer; transition: background .25s, opacity .3s; }
.ezv-map-steps li:hover, .ezv-map-steps li.is-on { background: var(--cs); }
.ezv-map-steps li i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-family: var(--mono); font-size: 13px; font-weight: 700; }
.ezv-map-steps li b { display: block; font-size: 15px; font-weight: 700; }
.ezv-map-steps li p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ezv-map-steps li small { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--ink-2); padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }

/* 흐름 선택: 다른 흐름은 흐리게 */
.ezv-archmap[data-mode="run"] .edge[data-flow="learn"],
.ezv-archmap[data-mode="learn"] .edge[data-flow="run"] { opacity: .1; }
.ezv-archmap[data-mode="run"] .chips .c-learn,
.ezv-archmap[data-mode="learn"] .chips .c-run,
.ezv-archmap[data-mode="run"] .grp.is-learn,
.ezv-archmap[data-mode="learn"] .grp.is-run { opacity: .3; }

/* 단계 강조 (자동 재생 또는 클릭·호버) */
.ezv-archmap.has-focus .edge { opacity: .12; }
.ezv-archmap.has-focus .edge.is-on { opacity: 1; }
.ezv-archmap.has-focus .edge.is-on path { stroke-width: 4.5; }
.ezv-archmap.has-focus .edge.is-on .bd circle { r: 21; }
.ezv-archmap.has-focus .node { opacity: .45; }
.ezv-archmap.has-focus .node.is-on { opacity: 1; background: #fff; border-color: var(--c, var(--blue)); box-shadow: 0 14px 34px -16px oklch(0.4 0.12 258 / 0.45); }
.ezv-archmap.has-focus .node.is-on.f-learn { border-color: var(--learn); }
.ezv-archmap.has-focus .node.is-on.f-run { border-color: var(--run); }
.ezv-archmap.has-focus .chips i { opacity: .35; }
.ezv-archmap.has-focus .chips i.is-on { opacity: 1; transform: scale(1.25); box-shadow: 0 0 0 4px #fff, 0 0 0 6px currentColor; }
.ezv-archmap.has-focus .chips .c-run.is-on { color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--run); }
.ezv-archmap.has-focus .chips .c-learn.is-on { color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--learn); }

@media (prefers-reduced-motion: reduce) { .ezv-map .edge path { animation: none; } }

.ezv-keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 56px 0 0; padding: 0; }
.ezv-keywords li { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }

/* ---------- ANY PROCESS ---------- */
.ezv-proc { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid oklch(1 0 0 / 0.2); border-bottom: 1px solid oklch(1 0 0 / 0.2); }
.ezv-proc li { padding: 30px 16px; font-size: 16px; font-weight: 500; color: var(--on-navy-2); text-align: center; }
.ezv-proc li + li { border-left: 1px solid oklch(1 0 0 / 0.12); }
.ezv-proc li.on { color: #fff; background: oklch(0.6 0.19 258 / 0.25); }
.ezv-proc li span { display: block; font-size: 12px; color: var(--sky); margin-top: 6px; font-family: var(--mono); }

.ezv-phase { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.ezv-phase li { font-size: 15px; line-height: 1.7; color: var(--on-navy-2); border-top: 2px solid var(--sky); padding-top: 20px; }
.ezv-phase li span { display: block; font-family: var(--mono); font-size: 13px; color: var(--sky); }
.ezv-phase li b { display: block; font-size: 20px; color: #fff; margin: 6px 0 10px; }

/* ---------- REFERENCE ---------- */
.ezv-ref-org { font-size: 17px; font-weight: 700; color: var(--blue); margin: 0 0 10px; }
.ezv-stat { margin: 40px 0 0; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; gap: 28px; align-items: center; }
.ezv-stat strong { font-family: var(--mono); font-size: 64px; line-height: 1; color: var(--ink); font-weight: 500; white-space: nowrap; }
.ezv-stat strong small { font-family: var(--sans); font-size: 16px; color: var(--ink-2); margin-left: 8px; }
.ezv-stat p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ezv-status { list-style: none; padding: 0; margin: 28px 0 0; }
.ezv-status li { position: relative; padding: 6px 0 6px 18px; font-size: 15px; color: var(--ink-2); }
.ezv-status li::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.ezv-shot--photo img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- CTA ---------- */
.ezv-cta { background: var(--navy-2); color: var(--on-navy); padding: 110px 0; text-align: center; }
.ezv-cta h2 { font-size: 36px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.ezv-cta p { font-size: 17px; color: var(--on-navy-2); margin: 0; }
.ezv-cta .ezv-hero-actions { justify-content: center; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .ezv-hero-title { font-size: 46px; }
  .ezv-title { font-size: 36px; }
  .ezv-split, .ezv-split--rev { grid-template-columns: 1fr; gap: 48px; }
  .ezv-zones { grid-template-columns: 1fr; }
  .ezv-map .node { grid-template-columns: 1fr; }
  .ezv-map .node-img img { min-height: 0; aspect-ratio: 16 / 9; }
  .ezv-proc { grid-template-columns: repeat(3, 1fr); }
  .ezv-proc li:nth-child(4) { border-left: 0; }
  .ezv-phase { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ezv-wrap { padding: 0 16px; }
  .ezv-body .pc { display: none; }
  .ezv-hero { padding-top: 130px; }
  .ezv-hero-inner { padding-bottom: 40px; }
  .ezv-hero-title { font-size: 32px; }
  .ezv-hero-desc { font-size: 16px; }
  .ezv-hero-process { grid-template-columns: 1fr; }
  .ezv-pgroup { padding: 22px 0 24px; }
  .ezv-pgroup-head { padding: 0 20px; margin-bottom: 18px; }
  .ezv-pgroup li { padding: 26px 4px 0; font-size: 13px; }
  .is-next ol { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .is-next ol::before { display: none; }
  .ezv-sec { padding: 80px 0; }
  .ezv-title { font-size: 28px; }
  .ezv-lead { font-size: 16px; }
  .ezv-phase, .ezv-shot-row { grid-template-columns: 1fr; }
  .ezv-proc { grid-template-columns: repeat(2, 1fr); }
  .ezv-proc li:nth-child(odd) { border-left: 0; }
  .ezv-proc li:nth-child(4) { border-left: 1px solid oklch(1 0 0 / 0.12); }
  .ezv-zcard { grid-template-columns: 1fr; }
  /* 모바일: 구성도 대신 단계 목록만 */
  .ezv-archmap { padding: 20px 14px; border-radius: 18px; }
  .ezv-map > svg { display: none; }
  .ezv-map { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .ezv-map .node { grid-area: auto; }
  .ezv-map-steps { grid-template-columns: 1fr; }
  .ezv-map-steps li { grid-template-columns: 28px 1fr; padding: 9px 8px; }
  .ezv-map-steps li small { grid-column: 2; justify-self: start; }
  .ezv-zcard-img img { min-height: 0; aspect-ratio: 16 / 9; }
  .ezv-zcard-body { padding: 22px 20px; }
  .ezv-zone .z { padding: 24px 12px; }
  .ezv-zone .z b { font-size: 20px; }
  .ezv-stat { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ezv-stat strong { font-size: 48px; }
  .ezv-cta h2 { font-size: 26px; }
}

/* 화면 3개 1행 배치 (2026-10-19, ezvision-merged.html) */
.ezv-shot-row--3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ezv-shot-row--3 .ezv-shot img,
.ezv-shot-row--3 .ezv-shot:last-child img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 1024px) { .ezv-shot-row--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ezv-shot-row--3 { grid-template-columns: 1fr; } }

/* ==========================================================
   호버 효과 (2026-10-20) — 과하지 않게: 살짝 떠오름·색 변화만
   data-aos가 붙은 요소는 AOS가 transform을 쓰므로 안쪽 요소를 움직이거나
   .aos-animate:hover로 우선순위를 높여 적용
   ========================================================== */
.ezv-btn--primary { transition: background .2s, transform .2s, box-shadow .2s; }
.ezv-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px oklch(0.6 0.19 258 / 0.7); }

/* 검사 화면·현장 사진: 이미지가 살짝 떠오름 */
.ezv-shot img { transition: transform .35s ease, box-shadow .35s ease; }
.ezv-shot:hover img { transform: translateY(-4px); box-shadow: 0 18px 36px -18px oklch(0.3 0.08 258 / 0.45); }

/* 3 Zone 블록 */
.ezv-zone .z { transition: filter .25s ease; }
.ezv-zone .z:hover { filter: brightness(1.06); }
/* AOS의 transition-property 지정을 덮어써서 호버 색 변화도 부드럽게 */
.ezv-zone .z[data-aos][data-aos] { transition-property: opacity, transform, filter; }

/* 어떤 공정이든: 공정 칸, 맞춤 적용 4단계 */
.ezv-proc li { transition: background .25s, color .25s; }
.ezv-proc li:hover { background: oklch(1 0 0 / 0.05); color: #fff; }
.ezv-proc li.on:hover { background: oklch(0.6 0.19 258 / 0.32); }
.ezv-proc li[data-aos][data-aos] { transition-property: opacity, transform, background, color; }
.ezv-phase li[data-aos][data-aos] { transition-property: opacity, transform, border-color; }
.ezv-phase li { transition: border-color .25s; }
.ezv-phase li b { transition: color .25s; }
.ezv-phase li:hover { border-top-color: #fff; }
.ezv-phase li:hover b { color: var(--sky); }

/* 구성도 영역 박스 (단계 강조 중이 아닐 때만) */
.ezv-archmap:not(.has-focus) .ezv-map .node:hover { border-color: oklch(0.6 0.19 258 / 0.45); box-shadow: 0 14px 30px -18px oklch(0.4 0.12 258 / 0.4); }
.ezv-map .node-img img { transition: transform .5s ease; }
.ezv-map .node:hover .node-img img { transform: scale(1.04); }

/* 키워드 칩 */
.ezv-keywords li { transition: border-color .2s, color .2s; }
.ezv-keywords li:hover { border-color: var(--blue); color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .ezv-body [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ezv-shot:hover img, .ezv-map .node:hover .node-img img, .ezv-btn--primary:hover { transform: none; }
}