/* =============================================================================
   B4 운영 시스템 (/biz/system) — 페이지 전용
   섹션 형태 출처(PLAN.md B4): S1 MC-sub-HERO-DARK · S2 MC-index-02 · S3 MC-customer-02 · S4 MC-index-07
   S5 MC-REPLACE(대체 목록) · S6 MC-index-07 · S7 PL-Q1 · S8 HP-SETUP 자리 · S9 MC-index-05 + HP-GRID
   S10 HP-QUOTES · S11 DS accordion → details · S12 MH-index-02 + MC-START
   값은 DS 토큰. 장면(SVG) 안의 색은 일러스트라 원색 토큰을 쓴다.
   ========================================================================== */

/* ---- 공통 조각 -------------------------------------------------------------- */
.text-link { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-link); font-weight: var(--font-bold); }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.point-word { background: linear-gradient(100deg, var(--primary-300) 0%, var(--turquoise-300) 55%, var(--yellow-500) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- 기기 틀 (HP-EMBED · 제품 화면을 기기 안에) ---------------------------------- */
.dev { position: relative; }
.dev__screen { position: relative; overflow: hidden; background: var(--navy-900); }
.dev__screen > img, .dev__screen > svg { width: 100%; height: 100%; object-fit: cover; }
.dev--monitor .dev__screen { aspect-ratio: 16 / 10; border: 6px solid var(--navy-900); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.dev--monitor::after { content: ""; display: block; width: 22%; height: 18px; margin: 0 auto; background: linear-gradient(var(--cool-600), var(--cool-700)); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.dev--browser { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--cool-800); }
.dev--browser .dev__bar { display: flex; gap: var(--space-4); padding: var(--space-8) var(--space-12); background: var(--cool-700); }
.dev--browser .dev__bar i { width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: var(--white-a30); }
.dev--browser .dev__screen { aspect-ratio: 16 / 10; }
.dev--panel .dev__screen { aspect-ratio: 16 / 10; border: 8px solid var(--navy-900); border-bottom-width: 14px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.dev--phone .dev__screen { aspect-ratio: 180 / 380; border: 6px solid var(--navy-900); border-radius: 26px; box-shadow: var(--shadow-lg); }
/* PC 앱 = 매장 PC 바탕화면 오른쪽에 고정된 좁은 패널(2026-10-18 사용자). 손님은 화면을 나눠
   왼쪽 바탕화면의 파일을 오른쪽 PC 앱에 끌어다 놓는다 — HP 덱 7-1 장면(오른쪽 도킹 패널 + 왼쪽 파일)과 같은 구도 */
.dev--desk .dev__screen { aspect-ratio: 16 / 9; container-type: inline-size; }
.desk { position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary-600) 0%, var(--navy-600) 55%, var(--turquoise-800) 100%); }
.desk__files { position: absolute; left: 3cqw; top: 4cqw; display: flex; flex-direction: column; gap: 2.4cqw; }
.desk__files li { display: flex; flex-direction: column; align-items: center; gap: .6cqw; width: 12cqw; }
.desk__files .zg-object, .desk__drag .zg-object { --zg-object-size: 5cqw; }
.desk__files span { font: var(--font-medium) 1.3cqw / 1.2 var(--font-sans); color: var(--white); text-align: center; white-space: nowrap; text-shadow: 0 1px 2px var(--black-a50); }
.desk__drag { position: absolute; left: 44%; top: 38%; }
.desk__drag .zg-object { opacity: .9; }
.desk__drag svg { position: absolute; left: 3cqw; top: 3.4cqw; width: 2cqw; height: auto; fill: var(--white); stroke: var(--navy-900); stroke-width: 1; }
.dev--desk .dev__screen > .desk__app { position: absolute; top: 0; right: 0; width: auto; height: 100%; object-fit: contain; box-shadow: var(--shadow-left); }

/* =============================================================================
   S1 첫 화면 — MC-sub-HERO-DARK: 아이콘 라벨 + 큰 카피(강조어 그라데이션) + CTA, 아래로 갈라지는 선과 제품 화면
   ========================================================================== */
/* 첫 화면은 한 화면을 다 채우지 않는다 — 아래 섹션의 윗부분이 늘 조금 보이게 해서 '더 있다'를 알린다.
   모니터 높이가 제각각이라 고정 px 로 잡지 않고 **화면 높이에 비례**시킨다(daewoost 메인 .hero 와 같은 방식:
   고정 높이 대신 clamp(최소, 뷰포트 높이, 최대)). 여기서는 글·버튼의 높이가 고정이라 높이를 직접 주는 대신
   **여백과 장면(기기 줄) 크기**에 건다. 단위는 svh — 모바일 주소창이 접혔다 펴져도 높이가 흔들리지 않는다.
   calc(n*svh - m) 은 화면 높이보다 **빠르게** 줄어드는 기울기(글 높이는 안 줄어드니 여백이 더 많이 줄어야 한다),
   clamp 의 최소·최대가 너무 작아지거나 커지는 것을 막는다. 괄호 안은 넉넉한 화면에서의 기준값. */
.sys-hero { position: relative; overflow: hidden; text-align: center;
  /* 헤더 아래 첫 여백 — 머리말이 빠지며 글 묶음이 28px 올라갔다. 절반(14px)만 여백으로 돌려줘
     아래 섹션이 보이는 양을 원래 10~13% 대에 붙여 둔다(전부 돌려주면 작은 폰에서 기기 줄이 더 넘친다). */
  --hero-air:    clamp(52px, calc(14.5svh - 36px), 150px);
  --hero-gap:    clamp(12px, calc(3.2svh - 11px), 30px);   /* 제목 → 설명 사이 */
  --hero-gap-lg: clamp(18px, calc(4.2svh - 17px), 40px);   /* 설명 → 버튼 (40) */
  --hero-vgap:   clamp(30px, calc(8svh - 28px), 82px);   /* 글 묶음 → BI·선·장면 */
  --hero-lines:  clamp(44px, calc(15svh - 50px), 140px); /* 갈라지는 선 — 구슬이 올라오는 길이라 넉넉히 */
  --hero-foot:   clamp(26px, calc(6.6svh - 22px), 70px);   /* 장면 아래 여백 */
  --hero-dev:    clamp(134px, calc(41svh - 156px), 235px); /* 기기 줄 높이 (235 = 꽉 찬 폭) — 폭으로 맞춘다 */
  padding-top: calc(var(--site-hd-h) + var(--hero-air)); }
/* 배경 구체 — [KI] 복합기 앱의 배경을 **화면으로 맞춰 가며** 옮긴 것(2026-10-18, 코드만 보고 옮겼다가 두 번 틀렸다).
   실기 배경을 UI 만 숨기고 찍어 비교한 결과:
     · 구체가 매우 크다 — 캔버스 폭의 60% 안팎(1280 화면에서 지름 730~800px). 작게 두면 '구'로 안 보이고 얼룩이 된다.
     · **가장자리가 딱 끊긴다** — 실기 배경을 한 줄씩 재 보니 원 끝에서 색이 서서히 사라지지 않고 **한 번에 끊긴다**(20px 안에서 바탕색으로).
       그래서 마지막 색 멈춤을 99.5% 까지 끌고 가 바로 투명으로 떨어뜨린다. 서서히 번지게 두면 '구'가 아니라 얼룩이 된다.
     · 안쪽에 왼쪽 위로 치우친 하이라이트가 있다(구처럼 보이게 하는 요소).
   그래서 크기·자리는 실기(1280x800)의 값을 vw 로 환산해 그대로 쓰고(100vw = 1280), 색 멈춤도 실기 값을 쓴다.
   본체는 farthest-side 정원이라 상자 끝에서 깨끗하게 끝나고(네모 경계 없음), 하이라이트만 따로 한 겹 올린다.
   [DEV MEMO] 저사양에서 무거우면 .hero-orb 의 animation 만 빼면 멈춘다. */
/* 바탕도 복합기 앱과 같은 것을 쓴다 — 구체만 옮기면 바탕 명도가 달라 다른 화면으로 보인다(실기 배경 CSS 그대로) */
.sys-hero.zone-navy { background-color: #02081c;
  background-image: radial-gradient(150% 130% at 72% 4%, #1542a1 0%, #0a2875 26%, #041440 52%, #02081c 76%, #01030a 100%); }
.hero-orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-orb { position: absolute; display: block; border-radius: 50%; }
.hero-orb--b { width: 62.5vw; height: 62.5vw; left: 33.2vw; top: -34.4vw;
  background:
    radial-gradient(circle farthest-side at 38% 30%, rgba(255,255,255,.07), rgba(255,255,255,0) 56%),
    radial-gradient(circle farthest-side at 50% 50%, rgba(182,199,247,.80) 0%, rgba(102,139,227,.46) 44%, rgba(47,85,176,.17) 99.5%, rgba(47,85,176,0) 99.7%);
  animation: hero-orb-b 39s ease-in-out infinite; }
.hero-orb--g { width: 62.5vw; height: 62.5vw; left: -35.2vw; top: 10.6vw;
  background:
    radial-gradient(circle farthest-side at 38% 32%, rgba(255,255,255,.10), rgba(255,255,255,0) 54%),
    radial-gradient(circle farthest-side at 50% 50%, rgba(145,233,215,.68) 0%, rgba(53,176,150,.38) 45%, rgba(20,109,114,.16) 99.5%, rgba(20,109,114,0) 99.7%);
  animation: hero-orb-g 45s ease-in-out infinite; }
.hero-orb--c { width: 57vw; height: 57vw; left: 44.9vw; top: 30.9vw;
  background:
    radial-gradient(circle farthest-side at 40% 34%, rgba(255,255,255,.11), rgba(255,255,255,0) 52%),
    radial-gradient(circle farthest-side at 50% 50%, rgba(139,202,255,.74) 0%, rgba(46,134,239,.42) 46%, rgba(19,92,185,.15) 99.5%, rgba(19,92,185,0) 99.7%);
  animation: hero-orb-c 42s ease-in-out infinite; }
/* 궤적은 실기 그대로의 비율(캔버스 폭의 약 4%) — 화면이 커져도 같은 느낌으로 움직인다 */
@keyframes hero-orb-b { 0%,100% { transform: translate(0, 2.7vw); } 25% { transform: translate(3.75vw, 0); } 50% { transform: translate(0, -2.7vw); } 75% { transform: translate(-3.75vw, 0); } }
@keyframes hero-orb-g { 0%,100% { transform: translate(3.83vw, 2.7vw); } 25% { transform: translate(-1.72vw, 3.1vw); } 50% { transform: translate(-4.2vw, -1.64vw); } 75% { transform: translate(1.72vw, -3.1vw); } }
@keyframes hero-orb-c { 0%,100% { transform: translate(1.95vw, .55vw); } 25% { transform: translate(-3.1vw, 3.44vw); } 50% { transform: translate(-1.95vw, -.55vw); } 75% { transform: translate(3.1vw, -3.44vw); } }
.sys-hero__head { position: relative; z-index: 1; }
/* 제목·설명을 한 덩어리로 묶어 **가운데 놓되 글은 왼쪽 정렬** — 제목 두 줄과 설명의 왼쪽 선이 맞는다 */
.sys-hero__intro { display: inline-block; max-width: 100%; text-align: left; }
.sys-hero__title { font: var(--font-bold) max(40px, min(var(--hero-size), 6.4svh)) / 1.2 var(--font-sans); letter-spacing: var(--tracking); }
.sys-hero__lead { max-width: 860px; margin: var(--hero-gap) auto 0; font: var(--font-regular) var(--lead-size) / var(--lead-lh) var(--font-sans); color: var(--text-secondary); }
.sys-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--hero-gap-lg); }
.sys-hero__proof { display: inline-flex; align-items: center; gap: var(--space-8); margin-top: var(--hero-gap); font: var(--font-medium) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--text-secondary); }
/* 기기 줄의 높이는 폭을 따라간다(네 그림의 바닥선을 맞춘 뒤 다시 실측: 높이 = 폭 x 0.166 + 36). 화면이 낮으면 폭을 좁혀 높이를 맞춘다 */
.sys-hero__visual { position: relative; z-index: 1; margin-top: var(--hero-vgap); max-width: min(calc(var(--site-max) + var(--site-gutter) * 2), calc(var(--hero-dev) * 6.02 - 169px)); }
/* 선이 모이는 꼭지의 BI — 캡슐로 감싸 '여기로 모인다'가 분명해진다 */
.sys-hero__bi { position: relative; display: flex; width: max-content; align-items: center; margin: 0 auto calc(var(--hero-gap) * .7);
  padding: clamp(8px, 1vw, 13px) clamp(16px, 1.8vw, 26px); border-radius: var(--radius-full); background: var(--white-a10); }
/* 테두리에 그라데이션 — 출처: references/mycroft 의 .btn-go-rocket.type2(두 겹 배경 + background-clip).
   여기서는 안쪽이 비쳐야 해서 같은 결과를 **마스크로 뚫은 링**으로 만든다(안쪽 유리감을 살린다). */
.sys-hero__bi::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(100deg, var(--primary-400) 0%, var(--turquoise-300) 55%, var(--yellow-400) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.sys-hero__bi img { display: block; width: clamp(92px, 9vw, 142px); height: auto; }
.sys-hero__lines { width: 100%; height: var(--hero-lines); overflow: visible; }
/* 빛 구슬 — 끝이 둥근 0 길이 선. 선 그림이 세로로 눌려도(preserveAspectRatio=none) 동그랗게 남는다(non-scaling-stroke) */
.ln-bead { offset-rotate: 0deg; animation: bead var(--bead-dur) linear infinite; }
.sys-hero__lines .ln-bead path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }   /* 선 그리기 규칙(점선 600)을 물려받으면 점이 안 찍힌다 */
.sys-hero__lines .bead__halo { stroke: rgba(126,196,255,.32); stroke-width: 15; }
.sys-hero__lines .bead__core { stroke: #eaf4ff; stroke-width: 5; }
.sys-hero__lines { --bead-dur: 7.2s; }
.ln-bead--pc  { offset-path: path("M162 96 V52 Q162 40 174 40 H600 V0"); }
.ln-bead--ki  { offset-path: path("M480 96 V40 H600 V0"); animation-delay: calc(var(--bead-dur) * -.25); }
.ln-bead--ad  { offset-path: path("M786 96 V52 Q786 40 774 40 H600 V0"); animation-delay: calc(var(--bead-dur) * -.5); }
.ln-bead--iot { offset-path: path("M1110 96 V52 Q1110 40 1098 40 H600 V0"); animation-delay: calc(var(--bead-dur) * -.75); }
@keyframes bead { 0% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 38% { offset-distance: 100%; opacity: 1; } 44% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
.sys-hero__lines path { fill: none; stroke: var(--white-a30); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: hero-line 1.4s .3s var(--ease-standard) forwards; }
/* IoT 가지만 점선 — 같이 붙지만 별개라는 뜻. 점선이라 '그려지는' 연출 대신 흐리게 들어온다 */
.sys-hero__lines .ln-apart { stroke-dasharray: 5 6; stroke-dashoffset: 0; opacity: 0; animation: hero-line-apart .7s 1.1s var(--ease-standard) forwards; }
@keyframes hero-line { to { stroke-dashoffset: 0; } }
@keyframes hero-line-apart { to { opacity: 1; } }
/* 구상도 줄 — 앞의 셋은 한 묶음, IoT 는 5번째 칸(4번째 칸은 비워 둔 간격)으로 떨어뜨린다.
   칸 합 96% + 간격 4%(1% x 4) = 100% — 폭이 줄어도 넘치지 않게 간격도 %로 둔다.
   **이름표가 그림 위**에 온다(2026-10-18) — 선이 내려와 닿는 자리에 이름이 있어야 빛 구슬이 거기서 나와
   셀프린트로 합쳐지는 것처럼 읽힌다. 그래서 줄은 위쪽 정렬이고, 그림의 **윗선이 모두 같은 높이**가 된다
   (IoT 가 혼자 떠 보이던 것도 이걸로 해결된다. 복합기만 키가 커서 아래로 더 내려간다). */
.dev-row { position: relative; display: grid; grid-template-columns: 27% 24% 25% 5% 15%; align-items: start; gap: 0 1%; margin-top: var(--space-8); padding-bottom: var(--hero-foot); }   /* 선 끝과 이름표가 닿지 않게 살짝 띄운다 */
.dev-row__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-12); opacity: 0; transform: translateY(var(--space-24)); animation: hero-in .8s var(--ease-standard) forwards; }
.dev-row__item--pc { animation-delay: .5s; }
.dev-row__item--kiosk { animation-delay: .65s; }
.dev-row__item--admin { animation-delay: .8s; }
/* 관리자와 IoT 사이 구분선 — IoT 칸에 붙여 그린다.
   격자 칸(빈 칸)에 두고 absolute 로 띄웠더니 그 칸이 기준이 되지 않아 IoT 그림 위로 올라갔다(2026-10-18).
   IoT 칸은 기준점이 확실하므로(그 안의 ::before) 여기에 붙이고, 자리는 **두 그림 사이의 한가운데**로 잡는다:
   관리자 그림 오른끝 76.75% / IoT 그림 왼끝 85% → 가운데 80.875% → IoT 칸(85~100%) 기준 -27.5%.
   위는 이름표+간격만큼 비우고 아래는 그림 끝까지 — 옆 그림과 같은 구간을 덮는다. */
.dev-row__item--iot::before { content: ""; position: absolute; left: -27.5%; top: calc(var(--space-12) + 24px); bottom: 0; width: 1px;
  background: repeating-linear-gradient(var(--white-a30) 0 5px, transparent 5px 11px); }
.dev-row__item--iot { grid-column: 5; animation-delay: 1.1s; }
/* 앞 세 그림만 90% — 칸 사이가 그만큼 벌어져 숨통이 트인다. IoT 는 원래 작아 그대로 둔다(2026-10-18 사용자) */
.dev-row__item--pc .hv, .dev-row__item--kiosk .hv, .dev-row__item--admin .hv { width: 90%; }
.dev-row__name { display: inline-flex; padding: var(--space-4) var(--space-12); border-radius: var(--radius-full); background: var(--white-a10); box-shadow: inset 0 0 0 1px var(--border-subtle); font: var(--font-bold) var(--body-xs-size) / var(--body-xs-lh) var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

/* ---- 첫 화면 구상도의 그림 조각 ------------------------------------------------
   실제 화면(제품 캡처)은 아래 섹션에서 크게 보여 준다. 여기서는 기기의 윤곽과 '무엇이 어디에 있는지'만 그린다. */
.hv { display: block; width: 100%; height: auto; }
.hv-body { fill: var(--navy-800); stroke: var(--white-a30); stroke-width: 1.4; }
.hv-frame { fill: none; stroke: var(--white-a30); stroke-width: 1.4; }   /* 속이 비치는 틀 — 클래스의 fill 이 presentation attribute 를 이긴다 */
.hv-screen { fill: url(#g-scr); }
.hv-pane { fill: var(--white-a10); }
.hv-panel, .hv-tile, .hv-card { fill: var(--white-a10); stroke: var(--white-a30); stroke-width: 1.2; }
.hv-dashbox { fill: none; stroke: var(--white-a30); stroke-width: 1.2; stroke-dasharray: 5 4; }
.hv-bar { fill: var(--white-a30); }
.hv-barfill { fill: var(--white-a20); }
.hv-key { fill: var(--primary-500); }
.hv-dots circle { fill: var(--white-a30); }
.hv-ok { fill: var(--turquoise-300); }
.hv-drag { stroke: var(--white-a65); stroke-width: 1.2; }
.hv-dash { fill: none; stroke: var(--white-a30); stroke-width: 1.4; stroke-dasharray: 5 5; }
.hv-ico { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hv-ico-sm { fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* 복합기 그림만 실사에 가까워 혼자 튄다 — 어두운 바탕 위에서 살짝 투명하게 해 나머지 구상도와 무게를 맞춘다(그림 자체는 그대로) */
.dev-row__item--kiosk image { opacity: .88; }
/* svh 를 모르는 옛 브라우저(2022년 이전)는 같은 값을 vh 로 본다 — 주소창이 접힐 때만 조금 다르다 */
@supports not (height: 1svh) {
  .sys-hero { --hero-air: clamp(32px, calc(9.4vh - 40px), 96px); --hero-gap: clamp(10px, calc(2.6vh - 10px), 24px);
    --hero-gap-lg: clamp(18px, calc(4.2vh - 17px), 40px); --hero-vgap: clamp(18px, calc(5vh - 22px), 48px);
    --hero-lines: clamp(28px, calc(10vh - 44px), 96px); --hero-foot: clamp(16px, calc(4.4vh - 20px), 48px);
    --hero-dev: clamp(134px, calc(41vh - 156px), 235px); }
  .sys-hero__title { font-size: max(40px, min(var(--hero-size), 6.4vh)); }
}
@media (max-width: 860px) {
  .sys-hero__lines { display: none; }
  /* 2열로 쌓이면 높이 식이 달라진다(폭과 거의 1:1). 폰에서는 폭을 그대로 쓰고 — 줄이면 제품 화면이 너무 작아진다 —
     기기 줄 끝이 첫 화면 아래로 조금 넘어가게 둔다(폰에서는 그 자체가 '더 있다'는 표시다).
     태블릿처럼 폭이 넉넉하면 440px 까지만 — 그래야 2열 격자가 세로로 커지지 않아 아래 섹션이 보인다. */
  .sys-hero__visual { max-width: none; }
  /* 폰: 2줄 2열. 그림마다 세로 비율이 달라 높이를 같게 맞춰야 줄이 가지런하다(관리자는 아래로 이어지는 부분까지 포함한 높이) */
  .dev-row { grid-template-columns: 1fr 1fr; gap: var(--space-24) var(--space-16); margin-top: 0; max-width: min(100%, 440px); margin-inline: auto; justify-items: center; }
  .dev-row__item { width: 100%; }
  .dev-row__item .hv { width: auto; height: clamp(86px, 26vw, 118px); max-width: 100%; }
  .dev-row__item--iot { grid-column: auto; }
  .dev-row__item--iot::before { display: none; }   /* 2열로 쌓이면 칸 구분선은 뜻이 없다 */
  /* 폰에서는 줄바꿈을 강제하지 않는다 — 폭이 좁아 어차피 접히고, 강제하면 한 줄이 더 늘어난다 */
  .sys-hero__lead br { display: none; }
  .dev-row__item--iot .hv-dash { display: none; }   /* 가로로 갈라지는 선이 없는 배치라 이 점선만 남으면 어색하다 */
  .dev-row__item { margin: 0 !important; }
  .dev-row__item--iot > .dev { width: 46%; }
}
@media (max-width: 480px) {
  .dev-row { max-width: 92%; }   /* 한 화면 밖으로 나가는 양을 조금 줄인다 */
}
@media (prefers-reduced-motion: reduce) {
  .sys-hero__lines path, .sys-hero__lines .ln-apart, .dev-row__item { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .ln-bead { display: none; }
  .hero-orb { animation: none; }
}

/* =============================================================================
   S2 네 가지 시스템 — MC-index-02: 카드형 탭 줄(활성 카드 짙게) + 아래 큰 화면
   ========================================================================== */
.four-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
.four-tab {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-12); row-gap: var(--space-2);
  padding: var(--space-20); border: 0; border-radius: var(--radius-lg); text-align: start; cursor: pointer;
  background: var(--bg-subtle); color: var(--text-primary);
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.four-tab:hover { background: var(--bg-muted); }
.four-tab__icon { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--bg-default); color: var(--primary); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.four-tab__name { font: var(--font-bold) var(--body-md-size) / var(--body-md-lh) var(--font-sans); }
.four-tab__one { font: var(--font-regular) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--text-tertiary); }
.four-tab[aria-selected="true"] { background: var(--zone-navy); color: var(--gray-50); transform: translateY(calc(var(--space-4) * -1)); box-shadow: var(--shadow-md); }
.four-tab[aria-selected="true"] .four-tab__icon { background: var(--white-a10); color: var(--white); box-shadow: none; }
.four-tab[aria-selected="true"] .four-tab__one { color: var(--cool-300); }
/* 바탕은 밋밋한 한 색 대신 **비스듬한 그라디언트**(출처: references/mycroft 의 .bg-panel — 148도, 파랑 → 보라, 옅게) */
.four-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-48); align-items: center; margin-top: var(--space-32); padding: var(--space-48); border-radius: var(--radius-lg); overflow: hidden;
  background:
    linear-gradient(148deg, color-mix(in srgb, var(--primary-300) 30%, transparent) 0%, color-mix(in srgb, var(--purple-200) 46%, transparent) 100%),
    var(--bg-default); }
/* 그림이 떠 보이도록 바탕 위에 옅은 빛 한 겹 */
.four-panel::before { content: ""; position: absolute; inset: auto -10% -45% -10%; height: 70%; pointer-events: none;
  background: radial-gradient(50% 60% at 30% 50%, color-mix(in srgb, var(--white) 55%, transparent) 0%, transparent 70%); }
.four-panel > * { position: relative; }
.four-panel:focus-visible { box-shadow: var(--focus-ring); }
/* 그림 자리는 **복합기 앱 기준(16:10)으로 고정** — 탭을 옮길 때마다 패널 높이가 들쑥날쑥하지 않게(2026-10-18).
   가로로 긴 셋(복합기·PC·관리자)은 이 안에 맞춰 들어가고, 세로로 긴 IoT 는 줄이지 않고 **아래를 잘라** 넣는다
   (네 앱 모두 화면 아래쪽에 여백이 넉넉해 잘라도 내용이 가리지 않는다). */
.four-panel__media { aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }
.four-panel__media .dev { width: 100%; }        /* 가로로 긴 셋은 폭을 채우고, 자리보다 큰 부분(받침대·주소줄)은 아래가 잘린다 */
/* 폰은 자리 아래로 흘러 **패널 바닥선**에서 잘린다(그 사이 여백이 없다).
   자리(16:10)를 밀어내지 않도록 폰만 absolute 로 띄운다 — 안 그러면 패널이 폰 길이만큼 늘어난다. */
.four-panel__media--phone { position: relative; overflow: visible; }
.four-panel__media--phone .dev { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 41%; }
/* IoT 는 줄이지 않는다 — 폰 틀을 자리에 맞춰 낮추고 **화면 안쪽을 위에서부터** 보여 준다(아래 여백이 잘린다).
   틀까지 잘리면 기기가 깨져 보이므로 틀은 온전히 두고 내용만 자른다. */
/* 폰은 **자리 아래에서 잘린 모양**으로 둔다 — 길이는 그대로(180/380), 자리 밑으로 넘는 만큼 바탕 선에 맞춰 잘린다.
   잘린 티가 나도록 **아래쪽 라운드와 테두리를 없앤다**(둥근 끝이 보이면 '작은 폰'처럼 보이고 아래 여백이 생긴다). */
.four-panel__media--phone .dev__screen { aspect-ratio: 180 / 380; border-bottom-width: 0;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* 인라인 SVG 에는 object-position 이 듣지 않는다 — 자르는 기준은 SVG 의 preserveAspectRatio(xMidYMin slice)로 준다 */
.four-panel__title { font: var(--font-bold) var(--h4-size) / var(--h4-lh) var(--font-sans); letter-spacing: var(--tracking); }
.four-panel__text > p { margin-top: var(--space-12); font: var(--font-regular) var(--body-lg-size) / var(--body-lg-lh) var(--font-sans); color: var(--text-tertiary); }
/* '어디서' 줄 — 바탕이 그라디언트라 가는 구분선이 묻힌다. 선 대신 **흰 라운드 바탕**을 글 영역 너비만큼 깐다 */
.four-panel__meta { margin-top: var(--space-24); padding: var(--space-14, var(--space-12)) var(--space-20); border-radius: var(--radius-md);
  background: var(--white); box-shadow: 0 1px 2px color-mix(in srgb, var(--navy-900) 8%, transparent); }
.four-panel__meta div { display: flex; gap: var(--space-12); font: var(--font-regular) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); }
.four-panel__meta dt { flex: none; color: var(--text-muted); }
.four-panel__meta dd { margin: 0; font-weight: var(--font-medium); }
.four-panel__text .text-link { margin-top: var(--space-24); }
@media (max-width: 960px) {
  .four-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .four-panel { grid-template-columns: 1fr; gap: var(--space-24); padding: var(--space-24); }
  /* 폰에서는 자르지 않는다 — 세로로 쌓이는 배치라 잘린 기기가 글과 붙어 어색해진다 */
  .four-panel__media { aspect-ratio: auto; overflow: visible; }
  .four-panel__media--phone .dev { position: static; transform: none; width: 52%; }
  .four-panel__media--phone .dev__screen { aspect-ratio: 180 / 380; border-bottom-width: 6px; border-bottom-left-radius: 26px; border-bottom-right-radius: 26px; }
}
@media (max-width: 640px) {
  .four-tab { grid-template-columns: 1fr; padding: var(--space-16); }
  .four-tab__icon { grid-row: auto; width: 40px; height: 40px; margin-bottom: var(--space-8); }
  .four-tab__one { display: none; }
}

/* ---- S2 데모 — 제품 화면을 그대로 옮겨 그린 SVG 를 12초 한 바퀴로 반복 재생 -------------
   첫 화면(구상도)에서 못 보여 준 '실제 모습'이 이 섹션의 일이다.
   움직이는 것은 opacity 와 transform 뿐이고 JS 타이머는 없다. 탭이 바뀌면 숨은 패널은 display:none 이라
   브라우저가 애니메이션을 멈추고, 화면 밖으로 나가면 biz-system.js 가 .is-play 를 떼어 멈춘다. */
.demo { --dur: 8s; }                 /* 템포 — 12초는 답답했다(2026-10-18). 넉 장짜리 관리자만 조금 길게 */
.four-panel#four-ad .demo { --dur: 10s; }
.demo .dmo { display: block; width: 100%; height: 100%; }
.demo:not(.is-play) .dmo * { animation-play-state: paused !important; }
.demo.is-reset .dmo * { animation: none !important; }   /* 탭을 고르면 그림 애니메이션도 처음부터(biz-system.js) */
.dmo .c-yellow { fill: var(--yellow-400); }
.c-admin-bg { fill: var(--navy-900); }
.c-admin-side { fill: var(--navy-800); }

/* 임베드 — 목업을 **제 해상도 그대로** 띄우고, 무대째 틀 크기에 맞춰 줄인다(글자가 또렷하다).
   조작은 iframe 에 pointer-events:none 으로 막는다. 안에서 도는 자동 조작 스크립트는 assets/embed/drive-*.js.
   src 는 탭이 열릴 때 넣는다(data-src) — 네 목업이 2.3MB 라 한꺼번에 받지 않는다. */
.emb-wrap { position: relative; overflow: hidden; }
.emb-stage { position: absolute; left: 0; top: 0; width: var(--stage-w); height: var(--stage-h);
  transform: translate(var(--emb-dx, 0), var(--emb-dy, 0)) scale(var(--emb-k, .5)); transform-origin: top left; }
.emb { position: absolute; left: 0; top: 0; border: 0; pointer-events: none; background: var(--navy-900); }
.emb--ki { width: 1280px; height: 800px; }
.emb--pc { left: 1000px; top: 0; width: 600px; height: 1000px; box-shadow: var(--shadow-left); }
.emb--ad { width: 1440px; height: 900px; opacity: 0; transition: opacity .5s var(--ease-standard); }
.emb--ad.is-on { opacity: 1; }

/* PC 바탕화면 — 왼쪽은 그림, 오른쪽이 진짜 프로그램. 파일이 날아가 떨어지는 연출만 이쪽에서 그린다 */
.deskbg { position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; overflow: hidden;
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--navy-600) 55%, var(--turquoise-800) 100%); }
.deskbg::after { content: ""; position: absolute; left: -10%; bottom: -30%; width: 90%; aspect-ratio: 1; border-radius: var(--radius-full);
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--turquoise-400) 45%, transparent), transparent 85%); }
.deskbg .desk__files { position: absolute; left: 56px; top: 64px; display: flex; flex-direction: column; gap: 40px; margin: 0; padding: 0; list-style: none; }
.deskbg .desk__files li { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 150px; }
.deskbg .desk__files .zg-object { --zg-object-size: 72px; }
.deskbg .desk__files span { font: var(--font-medium) 19px / 1.2 var(--font-sans); color: var(--white); text-align: center; white-space: nowrap; text-shadow: 0 1px 2px var(--black-a50); }
.desk__fly { position: absolute; left: 92px; top: 196px; display: block; opacity: 0; z-index: 2; }
.desk__fly .zg-object { --zg-object-size: 72px; }
.desk__fly svg { position: absolute; left: 44px; top: 50px; width: 30px; height: 40px; fill: var(--white); stroke: var(--navy-900); stroke-width: 1; }
/* iframe 안에서 '지금 날아간다 / 떨어졌다'를 알려 주면 그때 맞춰 움직인다 */
.demo--pc.is-drag .desk__fly { animation: pc-fly 1.4s var(--ease-standard) forwards; }
@keyframes pc-fly { 0% { opacity: 0; transform: none; } 12% { opacity: 1; transform: none; }
  78% { opacity: 1; transform: translate(1120px, 190px) scale(.82); }
  100% { opacity: 0; transform: translate(1190px, 215px) scale(.35); } }

/* ④ IoT — 기기 고르기 0~3.1s · 결제 3.2~6.2s · 사용 중 6.3~11.5s */
.di-s { opacity: 0; }
.di-list { opacity: 1; animation: di-list var(--dur) linear infinite; }
.di-pay { animation: di-pay var(--dur) linear infinite; }
.di-run { animation: di-run var(--dur) linear infinite; }
@keyframes di-list { 0%,24%{opacity:1} 26%,96%{opacity:0} 98%,100%{opacity:1} }
@keyframes di-pay  { 0%,24%{opacity:0} 26%,50%{opacity:1} 52%,100%{opacity:0} }
@keyframes di-run  { 0%,50%{opacity:0} 52%,96%{opacity:1} 98%,100%{opacity:0} }
.di-tap1, .di-tap2 { opacity: 0; transform-box: fill-box; transform-origin: center; }
.di-tap1 { animation: di-tap1 var(--dur) linear infinite; }
@keyframes di-tap1 { 0%,17%{opacity:0;transform:scale(.3)} 19%{opacity:.8;transform:scale(.7)} 24%{opacity:0;transform:scale(1.7)} 100%{opacity:0;transform:scale(1.7)} }
.di-tap2 { animation: di-tap2 var(--dur) linear infinite; }
@keyframes di-tap2 { 0%,43%{opacity:0;transform:scale(.3)} 45%{opacity:.8;transform:scale(.7)} 50%{opacity:0;transform:scale(1.7)} 100%{opacity:0;transform:scale(1.7)} }
.di-paybtn { animation: di-pulse var(--dur) linear infinite; }
@keyframes di-pulse { 0%,43%{opacity:1} 45%{opacity:.6} 48%,100%{opacity:1} }
.di-ring { stroke: var(--turquoise-300); stroke-dasharray: 654; stroke-dashoffset: 0; animation: di-ring var(--dur) linear infinite; }
@keyframes di-ring { 0%,52%{stroke-dashoffset:0} 96%,100%{stroke-dashoffset:520} }
.di-c1,.di-c2,.di-c3 { opacity: 0; }
.di-c1 { animation: di-c1 var(--dur) linear infinite; }
.di-c2 { animation: di-c2 var(--dur) linear infinite; }
.di-c3 { animation: di-c3 var(--dur) linear infinite; }
@keyframes di-c1 { 0%,52%{opacity:0} 54%,66%{opacity:1} 68%,100%{opacity:0} }
@keyframes di-c2 { 0%,66%{opacity:0} 68%,80%{opacity:1} 82%,100%{opacity:0} }
@keyframes di-c3 { 0%,80%{opacity:0} 82%,96%{opacity:1} 98%,100%{opacity:0} }

/* 움직임 줄이기 — 각 데모의 첫 화면만 세워 둔다 */
@media (prefers-reduced-motion: reduce) {
  .dmo * { animation: none !important; }
  .di-list { opacity: 1 !important; }
}

/* HP CWC 띠 — 좁고 넓게, 왼쪽에 로고 */
/* 좁고 넓은 띠 — 세로 여백을 줄여 '띠'로 읽히게 한다(2026-10-18 사용자). 로고가 40px 이라 띠 높이는 로고가 정한다 */
.cwc { display: flex; align-items: center; gap: var(--space-16); margin-top: var(--space-24); padding: var(--space-12) var(--space-20); border-radius: var(--radius-md); background: var(--bg-default); box-shadow: inset 0 0 0 1px var(--border-subtle); }
/* HP 공식 마크는 **원이 마크 안에 들어 있다** — 예전 임시 로고에 둘렀던 원형 테두리는 지웠다 */
.cwc__logo { flex: none; width: 40px; height: 40px; }
.cwc__text { font: var(--font-regular) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--text-tertiary); }
.cwc__text b { font-weight: var(--font-bold); color: var(--text-primary); }
@media (max-width: 640px) { .cwc { flex-direction: column; align-items: flex-start; gap: var(--space-12); } }

/* =============================================================================
   S3 설치부터 신세계 — 설치 5단계
   앞 넷(사람이 하는 일)은 흰 카드 한 줄, 다섯째(셀프린트가 알아서)는 네이비 띠.
   줄을 나누고 사이에 아래 화살표를 둬서 '여기까지가 내 일'이 한눈에 보이게 한다.
   ========================================================================== */
.point-num { color: var(--text-link); }
/* '설치는 3분이면 충분'의 3분만 **굵기로** 강조한다 — 색은 제목 그대로(2026-10-18 사용자).
   디자인 시스템의 굵기는 700(--font-bold)이 끝이라 제목과 같아져 버린다. 이 한 군데만 800 으로 한 단계 더 올린다
   (Pretendard Variable 이라 중간 굵기가 실제로 나온다). 다른 섹션의 .point-num(시스템 자동 유지의 '언제나')은 건드리지 않았다. */
.sys-setup .point-num { color: inherit; font-weight: 800; }
/* ---- 칸 짜임 ----------------------------------------------------------------
   references/mycroft/customer.html #workCustomer03 .visual-area.dot-area 를 그대로 옮긴 것(2026-10-18 사용자):
     · 작은 칸 둘(296x511) + 큰 칸 하나(428x614) · gap 20
     · align-items:flex-end — **아래가 한 줄로 맞고** 큰 칸만 위로 솟는다. 이게 이 짜임의 핵심이다
     · 작은 칸: radius 27 · 테두리 1px · 안쪽에 8px 들여 한 겹 더(::before) · 그림자 0 20px 40px
     · 큰 칸: radius 20 · 테두리 2px(그쪽은 보라, 우리는 primary) · 그림자 4px 8px 20px
     · 칸 위에 걸친 동그란 배지(top:-25px) + 반투명 고리 두 겹
   mycroft 는 row-reverse 로 큰 칸을 오른쪽에 뒀지만 그러면 DOM 이 3·1·2 가 된다 — 여기선 DOM 1·2·3 + 보통 row(보이는 모습 같음).
   폭은 고정 px 대신 같은 비율(296:296:428 = 1:1:1.45)로 나눠 화면에 맞춘다. 점 바탕은 가져오지 않았다. */
/* 세 칸은 **아래가 한 줄로 맞고 큰 칸만 위로 솟는다**(mycroft .visual-area.dot-area 의 그 모습).
   요령: 세 칸을 모두 같은 키로 늘이고(align-items:stretch — 이러면 작은 칸 둘의 키가 저절로 같다),
   작은 칸만 위에서 내려 깐다(margin-top). 바닥은 늘이기 때문에 저절로 맞고, 위는 내린 만큼 큰 칸이 솟는다.
   격자의 두 줄짜리 칸 걸치기로도 해 봤지만, 걸친 칸의 남는 키가 아랫줄로 나뉘어 작은 칸까지 같이 늘어났다
   (실측: 작은 칸 459 · 큰 칸 499 — 솟는 맛이 사라졌다. max-content 로 못 박아도 같았다).
   폭은 mycroft 와 **같은 수치**로 맞췄다(2026-10-18 사용자): 작은 칸 296 · 큰 칸 428 · 사이 20 — 합 1060.
   본문 폭(1200)보다 좁으므로 줄을 1060 으로 묶어 **가운데로 모은다**(그래서 참조 사이트와 전체 너비가 같다).
   flex-grow 에 그 수치를 그대로 넣어(296:296:428) 화면이 좁아져도 비율이 유지된다. */
.setup__row { display: flex; align-items: stretch; gap: 20px; width: 100%; max-width: 1060px;
  margin-inline: auto; padding: 34px 0 0; list-style: none; }
/* 폭은 비율을 직접 계산해 준다 — flex-grow(296:296:428)로는 칸 안쪽 사정 때문에 몇 px 씩 어긋났다(실측 302/302/416).
   줄에서 사이 여백 40px 을 뺀 나머지를 296:296:428 로 정확히 나눈다. */
.setup__step--sm { flex: 0 0 auto; width: calc((100% - 40px) * 296 / 1020); margin-top: clamp(48px, 7.4vw, 103px); }   /* 511:614 — 큰 칸이 솟는 높이도 mycroft 비율 */
.setup__step--lg { flex: 0 0 auto; width: calc((100% - 40px) * 428 / 1020); min-height: clamp(460px, 38vw, 580px); }

/* li(.setup__step)는 자리만 잡고, 보이는 칸은 안쪽 .setup__card 가 그린다(2026-10-19).
   차례가 아닌 칸을 흐리게 하는 opacity 를 칸에만 걸어야 칸 아래 타임바가 같이 흐려지지 않기 때문이다. */
.setup__step { position: relative; display: flex; min-width: 0; }   /* min-width:0 — 이게 없으면 칸 안의 글·버튼이 줄바꿈을 거부해 폭이 참조 수치(296/428)보다 벌어진다 */
.setup__card { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-12);
  min-width: 0; padding: var(--space-32) var(--space-24) var(--space-24); text-align: center; }
/* 흰 바탕은 작은 칸에만 — 3번 칸은 .zone-navy 배경을 쓴다 */
.setup__step--sm .setup__card { background: var(--bg-default); border-radius: 27px;
  box-shadow: inset 0 0 0 1px var(--border-subtle), 0 20px 40px rgba(0, 0, 0, .10); }
.setup__step--sm .setup__card::before { content: ""; position: absolute; inset: 8px; border-radius: 20px; border: 1px solid var(--border-subtle); pointer-events: none; }
.setup__step--lg .setup__card { border-radius: 20px; box-shadow: 4px 8px 20px rgba(0, 0, 0, .16); }
/* 테두리는 히어로의 셀프린트 BI 캡슐과 같은 그라데이션 한 줄(2026-10-18 사용자).
   안이 비쳐야 해서 같은 수법으로 — 배경 두 장을 mask-composite 로 가운데만 뚫어 테두리만 남긴다 */
.setup__step--lg .setup__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, var(--primary-400) 0%, var(--turquoise-300) 55%, var(--yellow-400) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }

/* ---- 번호 배지 --------------------------------------------------------------
   mycroft .user-image 의 고리 두 겹을 숫자에 붙였다. **차례가 온 칸만** 파랗고 파동이 돈다(2026-10-18 사용자):
   기다리는 동안과 끝난 뒤에는 회색으로 가만히 있는다. 시각(delay)은 아래 '차례' 표에 모아 뒀다. */
.setup__n { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--border-strong); color: var(--white); font: var(--font-bold) var(--body-md-size) / 1 var(--font-sans); }
/* 숫자 대신 걸리는 시간 '1분'·'2분'(2026-10-19 사용자) — 둘을 더하면 제목의 '3분'. 단위는 한 단계 작게 */
.setup__n small { font-size: var(--body-xs-size); font-weight: inherit; margin-left: 1px; }
.setup__n::before, .setup__n::after { content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); border-radius: var(--radius-full); background: var(--primary); opacity: 0; z-index: -1; }
.setup__n::before { width: 62px; height: 62px; }
.setup__n::after { width: 80px; height: 80px; }
/* 3단계 배지는 디자인 시스템의 AI 아이콘 — 차례가 오기 전에는 빛을 죽여 둔다 */
/* AI 아이콘은 숫자 배지와 **같은 44px**(2026-10-18 사용자). 디자인 시스템이 정한 크기는 md 20·lg 24·xl 32 뿐이고
   --zg-ai-icon-size 는 원래 문서 페이지의 돋보기용이다 — 여기서는 사용자 지시로 규격 밖 크기를 쓴다(이 한 군데만). */
.setup__n--ai { background: none; width: auto; height: auto; top: -22px; }
.setup__n--ai .zg-ai-icon { --zg-ai-icon-size: 44px; }
.setup__n--ai::before, .setup__n--ai::after { display: none; }

.setup__where { font: var(--font-bold) var(--body-xs-size) / var(--body-xs-lh) var(--font-sans); color: var(--text-tertiary); letter-spacing: .04em; }
.setup__t { font: var(--font-bold) var(--body-lg-size) / var(--body-lg-lh) var(--font-sans); letter-spacing: var(--tracking); }
.setup__fig { width: 100%; margin: var(--space-4) 0 0; }
/* 작은 칸은 키를 늘여 맞추느라 아래가 비는데, 가운데 것(그림·흐름)을 남는 자리 한가운데에 둬서 빈 곳을 위아래로 나눈다 */
.setup__step--sm .setup__fig, .setup__flow { margin-block: auto; }
.setup__fig svg { display: block; width: 100%; height: auto; }
/* 버튼·링크를 바닥에 붙이지 않고 한 뼘 띄운다(2026-10-18 사용자). 이 값이 **세 칸의 밑줄 기준선**이다 —
   3단계의 체크리스트도 같은 값만큼 띄워 마지막 줄의 아랫선이 1·2단계의 버튼·링크와 맞는다. */
.setup { --rail: clamp(28px, 4vw, 56px); }
.setup__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); margin-bottom: var(--rail); }
/* 버튼에 margin-top:auto 를 주면 남는 자리를 버튼이 한 몫 더 가져가, 가운데 것(그림·흐름) 아래가 위보다 넓어진다.
   버튼은 아래 --rail 로 자리가 정해지므로 auto 를 빼고, 남는 자리는 가운데 것의 위아래 auto 둘이 똑같이 나눈다. */
/* 버튼보다 가볍게 — 밑줄 링크(2026-10-18 사용자) */
.setup__link { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0;
  font: var(--font-bold) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--text-link);
  text-decoration: underline; text-underline-offset: 4px; }
.setup__link:hover { text-decoration-thickness: 2px; }

/* ---- 1단계 그림: 끌어다 놓아 설치 ------------------------------------------- */
.iv-body { fill: var(--bg-subtle); stroke: var(--border-default); stroke-width: 1.4; }
.iv-screen { fill: var(--bg-default); }
.iv-neck { fill: var(--border-default); }
.iv-win { fill: var(--white); stroke: var(--border-default); stroke-width: 1.2; }
.iv-dots circle { fill: var(--border-strong); }
.iv-arrow { fill: none; stroke: var(--text-tertiary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 4; }
.iv-slot { fill: var(--bg-subtle); stroke: var(--text-tertiary); stroke-width: 1.4; stroke-dasharray: 5 4; }
.iv-folder { fill: var(--text-tertiary); }
.iv-appbox { fill: var(--primary); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .22)); }
.iv-appico { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 2단계 그림: 세 가지 작은 일 ---------------------------------------------
   캡슐을 벗기고(2026-10-18 사용자) 아이콘 + 글자만 남겼다. 사이를 짧은 선으로 이어 '차례대로'를 보인다.
   왼쪽으로 쏠리지 않게 **글 길이만큼만 잡아 가운데에** 둔다(width:max-content + margin-inline:auto). */
/* margin:auto 로 **네 방향 모두** 남는 자리를 나눠 가진다 — 가로로는 가운데, 세로로는 위아래 여백이 비슷해진다.
   (margin-block:auto 만 주면 아래 .setup__flow 의 margin 단축이 덮어써서 위로 붙어 버린다) */
.setup__flow { display: grid; gap: var(--space-4); margin: auto; padding: 0; list-style: none; width: max-content; max-width: 100%; }
.setup__flow-i { position: relative; display: flex; align-items: center; gap: var(--space-12); padding: var(--space-4) 0; text-align: left; opacity: 0; }
.setup__flow-i + .setup__flow-i::before { content: ""; position: absolute; left: 19px; top: calc(var(--space-4) * -1 - 7px); width: 2px; height: 14px; background: var(--border-default); }
.setup__flow-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--primary-50); box-shadow: inset 0 0 0 1px var(--primary-200); color: var(--primary); }
.setup__flow-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.setup__flow-t { font: var(--font-bold) var(--body-md-size) / var(--body-md-lh) var(--font-sans); color: var(--text-primary); }

/* ---- 3단계 -------------------------------------------------------------------- */
.setup__auto-d { font: var(--font-regular) var(--body-md-size) / var(--body-md-lh) var(--font-sans); color: var(--text-secondary); }
.setup__auto-d b { color: var(--text-primary); font-weight: var(--font-bold); }
.setup__fig--auto { margin-block: auto; }
.setup__auto-list { width: 100%; max-width: 420px; margin: var(--space-8) auto var(--rail); padding: 0; list-style: none; display: grid; gap: var(--space-8); text-align: left; }
.su-tick { display: flex; align-items: flex-start; gap: var(--space-8); font: var(--font-regular) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--text-secondary); opacity: .35; }
.su-tick__box { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: .12em; border-radius: var(--radius-xs); background: var(--white-a10); box-shadow: inset 0 0 0 1px var(--white-a30); }
.su-tick__box .p-icon { width: 14px; height: 14px; fill: var(--white); opacity: 0; transform: scale(.5); }
.setup__scene { position: relative; }
.setup__scene svg { display: block; width: 100%; height: auto; }
.setup__chores { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none;
  animation: su-chores-in .45s var(--t3) 1 var(--ease-standard) both; }
@keyframes su-chores-in { from { opacity: 0; } to { opacity: 1; } }
.setup__chores li { position: absolute; left: var(--x); top: var(--y); max-width: 44%;
  padding: var(--space-2) var(--space-8); border-radius: var(--radius-full);
  background: var(--white-a10); box-shadow: inset 0 0 0 1px var(--white-a30); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font: var(--font-medium) var(--body-xs-size) / var(--body-xs-lh) var(--font-sans); color: var(--text-secondary); white-space: nowrap; }

/* ===== 차례 =====================================================================
   1단계 → 2단계 → 3단계 **한 번만** 차례로 돈다(2026-10-18 사용자). 시각은 전부 여기 한 곳에 모아 둔다.
     0.0~3.6   1단계 : 배지 파랑 + 파동 / 아이콘을 끌어다 놓아 설치 → 체크
     3.6~7.3   2단계 : 배지 파랑 + 파동 / 로그인 → 매장 추가 → 복합기 추가 가 차례로 뜬다
     7.3~12.5  3단계 : AI 아이콘에 빛이 들어오고 → 전파 → 쪽지가 사라지며 체크가 하나씩 → 마지막에 복합기에서 파동 + 체크 → 로고
   **칸 아래 타임바가 이 차례를 끌고 간다**(2026-10-19 사용자): 막대가 1번 칸을 다 지나면 2번, 2번을 지나면 3번이 돈다.
   막대는 한 줄로 **같은 빠르기**로 나아가므로, 칸마다 걸리는 시간을 그 칸 아래 막대의 길이에 비례시켰다.
     막대 길이(데스크톱, 줄 1060 기준 — 칸 사이 20px 은 반씩 나눠 가진다): 1번 306 · 2번 316 · 3번 438
     → 시간 3.6 · 3.7 · 5.2초(초당 약 85px). 3번의 5.2초는 원래 3단계 연출(로고까지)이 끝나는 길이 그대로다.
   .setup 이 화면 밖이면 .setup:not(.is-play) 규칙이 전부 멈춰 둔다(들어올 때 처음부터 돈다). */
.setup { --d1: 3.6s; --d2: 3.7s; --d3: 5.2s;
  --t2: var(--d1); --t3: calc(var(--d1) + var(--d2)); }
/* 차례가 아닌 칸은 흐리게 둔다 — 지금 어디를 보면 되는지가 분명해진다(2026-10-18 사용자).
   마우스를 올리면 그 칸만 또렷해진다(!important 는 애니메이션을 이기므로 흐려진 중에도 먹는다). */
/* 참조 사이트(mycroft .visual-area.dot-area)의 점 바탕. 원본은 점 하나하나를 그린 280KB SVG 라 옮기지 않고
   **같은 값으로 다시 깐다**: 지름 3px · 9px 간격 · #C9D1D7 을 40% 로. 줄(1060)보다 넓은 본문(1200)에 깔려
   카드 바깥으로 70px 씩 번져 나간다 — 참조 사이트에서도 점밭이 카드보다 넓다. */
.setup { --dim: .42;
  background-image: radial-gradient(circle, rgba(201, 209, 215, .4) 0 1.5px, transparent 1.6px);
  background-size: 9px 9px; }
/* 흐려지고 밝아지는 건 칸(.setup__card)만 — 차례가 바뀌는 시각(--t2·--t3)을 가운데 두고 .4초 동안 */
.setup__card { transition: opacity .2s var(--ease-standard); }
.setup__card:hover, .setup__card:focus-within { opacity: 1 !important; }
.setup__step--s1 .setup__card { animation: su-off .4s calc(var(--t2) - .2s) 1 linear both; }
.setup__step--s2 .setup__card { animation: su-on .4s calc(var(--t2) - .2s) 1 linear both, su-off .4s calc(var(--t3) - .2s) 1 linear forwards; }
.setup__step--lg .setup__card { animation: su-on .4s calc(var(--t3) - .2s) 1 linear both; }
@keyframes su-on { from { opacity: var(--dim); } to { opacity: 1; } }
@keyframes su-off { from { opacity: 1; } to { opacity: var(--dim); } }

/* ---- 타임바 ------------------------------------------------------------------
   칸마다 바로 아래에 제 몫의 막대가 있고, 제 차례 동안 왼쪽에서 오른쪽으로 찬다 — **막대만** 찬다(앞머리 점은 뺐다, 2026-10-20 사용자).
   색은 회색 바탕에 검정으로 차오른다(같은 날 사용자 — 파랑이 아니라). 검정은 DS 의 글자 검정(gray-900).
   데스크톱에서는 세 칸의 아래가 한 줄로 맞으므로 막대 셋이 **이어져 한 줄**이 된다 —
   칸 사이(20px)를 반씩(10px) 나눠 가져 틈 없이 붙고, 바깥 두 끝만 둥글다.
   좁은 화면에서 칸이 줄을 바꾸면 막대도 칸을 따라 나뉜다(아래 @media).
   막대는 칸(.setup__card) 밖에 있어 흐려지지 않는다. 색은 .setup 에서 정해 둬 3번(다크 칸) 아래에서도 같은 색이다. */
.setup { position: relative; --bar-y: 28px; --bar-h: 4px; --replay: 32px;
  --su-track: var(--gray-200); --su-fill: var(--gray-900); }
.setup__time { position: absolute; top: calc(100% + var(--bar-y)); left: 0; right: 0; height: var(--bar-h);
  border-radius: var(--rl, 0) var(--rr, 0) var(--rr, 0) var(--rl, 0); background: var(--su-track); pointer-events: none; }
.setup__time::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--su-fill);
  transform-origin: left center; animation: su-bar var(--d) var(--s) 1 linear both; }
@keyframes su-bar { from { transform: scaleX(0); } to { transform: none; } }
.setup__step--s1 .setup__time { --d: var(--d1); --s: 0s;       --rl: 999px; right: -10px; }
.setup__step--s2 .setup__time { --d: var(--d2); --s: var(--t2); left: -10px; right: -10px; }
.setup__step--lg .setup__time { --d: var(--d3); --s: var(--t3); --rr: 999px; left: -10px; }

/* ---- 처음부터 다시(되감기) -----------------------------------------------------
   타임바 오른쪽 끝의 동그란 버튼(2026-10-20 사용자) — 누르면 1단계부터 다시 돈다(biz-system.js).
   DS icon-button --round(동그라미) + rotate-left(되감기 화살표). DS 의 --round 는 24px 이라 누르기 작아
   기본 icon-button 의 누르는 자리와 같은 32px 로 키우고, 회색 바탕 위에서 보이도록 흰 바탕 + 테두리를 둔다.
   자리: 막대에서 떨어뜨리지 않고 **막대 끝에 겹친다**(2026-10-20 사용자) — 버튼 오른쪽 가장자리를 막대 끝(= 3번 칸 오른쪽 끝)에 맞춰,
   막대가 동그라미 속으로 들어가 끝난다. 막대 길이는 그대로라 같은 빠르기도 그대로고, 화면 폭이 달라도 규칙 하나로 맞는다. */
.setup__replay { position: absolute; z-index: 1;
  top: calc(100% + var(--bar-y) + var(--bar-h) / 2 - var(--replay) / 2);
  right: calc(50% - min(50%, 530px));   /* 530 = 줄 1060 의 절반 → 줄 오른쪽 끝. 줄이 본문을 꽉 채우는 폭에서는 0 */
  --icon-button-round-size: var(--replay);
  background: var(--bg-default); box-shadow: inset 0 0 0 1px var(--border-default), var(--shadow-sm); color: var(--su-fill); }
.setup__replay:hover { background: var(--bg-muted); }
.setup__replay > .zg-icon { --zg-icon-size: var(--icon-md); }

/* 배지 — 제 차례에만 파랗고, 고리 두 겹이 퍼진다(mycroft .user-image.on 의 scaleCircle 과 같은 결) */
@keyframes su-n-on { 0%, 100% { background: var(--border-strong); } 4%, 92% { background: var(--primary); } }
@keyframes su-ripple { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  20% { opacity: var(--o); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }
.setup__step--s1 .setup__n { animation: su-n-on var(--d1) 0s 1 linear both; }
.setup__step--s2 .setup__n { animation: su-n-on var(--d2) var(--t2) 1 linear both; }
.setup__step--s1 .setup__n::before { --o: .26; animation: su-ripple 1.1s 0s 3 ease-out both; }
.setup__step--s1 .setup__n::after  { --o: .12; animation: su-ripple 1.1s .3s 3 ease-out both; }
.setup__step--s2 .setup__n::before { --o: .26; animation: su-ripple 1.1s var(--t2) 3 ease-out both; }
.setup__step--s2 .setup__n::after  { --o: .12; animation: su-ripple 1.1s calc(var(--t2) + .3s) 3 ease-out both; }
/* 1단계 그림 — 한 번만 돌고 '설치된 자리'에 머문다 */
.iv-app { transform-box: view-box; transform-origin: 88px 80px; animation: iv-drag 3s .2s 1 var(--ease-standard) both; }
@keyframes iv-drag { 0%, 10% { transform: none; opacity: 1; } 55% { transform: translateX(104px); opacity: 1; }
  66%, 100% { transform: translateX(104px) scale(.55); opacity: 0; } }
.iv-drop { transform-box: view-box; transform-origin: 192px 80px; animation: iv-drop 3s .2s 1 var(--ease-standard) both; }
@keyframes iv-drop { 0%, 60% { transform: none; } 70% { transform: scale(1.14); } 80%, 100% { transform: none; } }
.iv-ok { transform-box: fill-box; transform-origin: center; animation: iv-ok 3s .2s 1 var(--ease-standard) both; }
@keyframes iv-ok { 0%, 68% { opacity: 0; transform: scale(.5); } 80%, 100% { opacity: 1; transform: scale(1); } }
/* 2단계 — 세 가지가 차례로 뜬다 */
.setup__flow-i { animation: su-flow-on .5s var(--ease-standard) both; }
.setup__flow-i:nth-child(1) { animation-delay: calc(var(--t2) + .4s); }
.setup__flow-i:nth-child(2) { animation-delay: calc(var(--t2) + 1.2s); }
.setup__flow-i:nth-child(3) { animation-delay: calc(var(--t2) + 2s); }
@keyframes su-flow-on { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 3단계 — AI 아이콘에 빛이 들어온다 */
.setup__n--ai { opacity: .35; filter: grayscale(1); animation: su-ai-on .7s var(--t3) 1 var(--ease-standard) both; }
@keyframes su-ai-on { from { opacity: .35; filter: grayscale(1); transform: translateX(-50%) scale(.86); }
  to { opacity: 1; filter: none; transform: translateX(-50%) scale(1); } }
/* 전파 — 먼저 나오고, 체크리스트가 다 처리되면 사라진다 */
.su-wave path { opacity: 0; }
.su-w1 { animation: su-wave 2.4s calc(var(--t3) + .3s) linear infinite; }
.su-w2 { animation: su-wave 2.4s calc(var(--t3) + .55s) linear infinite; }
.su-w3 { animation: su-wave 2.4s calc(var(--t3) + .8s) linear infinite; }
@keyframes su-wave { 0%{opacity:0} 15%{opacity:.9} 55%{opacity:0} 100%{opacity:0} }
.su-wave { animation: su-wave-off .5s calc(var(--t3) + 3.4s) 1 linear both; }
/* 보내는 알갱이 — PC 에서 복합기로 또르르 건너간다. 전파와 같이 시작해 같이 멎는다 */
.su-pkt { fill: var(--primary-300); transform-box: view-box; animation: su-pkt 1.5s linear infinite; }
.su-pkt--1 { animation-delay: calc(var(--t3) + .3s); }
.su-pkt--2 { animation-delay: calc(var(--t3) + .8s); }
.su-pkt--3 { animation-delay: calc(var(--t3) + 1.3s); }
@keyframes su-pkt { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; }
  82% { opacity: 1; } 100% { transform: translateX(62px); opacity: 0; } }
.su-pkts { animation: su-wave-off .5s calc(var(--t3) + 3.4s) 1 linear both; }
/* 다 끝나면 복합기 전면(짙은 파랑)에 셀프린트 로고가 뜬다 — 체크보다 한 박자 뒤 */
.su-logo { transform-box: fill-box; transform-origin: center;
  animation: su-logo-in .6s calc(var(--t3) + 4.6s) 1 var(--ease-standard) both; }
@keyframes su-logo-in { 0% { opacity: 0; transform: scale(.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes su-wave-off { 0% { opacity: 1; } 100% { opacity: 0; } }
/* 해야 할 일 쪽지가 하나씩 사라진다 */
.setup__chores li { animation: su-chore .5s calc(var(--t3) + .5s + var(--i) * .32s) var(--ease-standard) both; }
@keyframes su-chore { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px) scale(.86); filter: blur(2px); } }
/* 체크가 하나씩 처리된다 */
.su-tick { animation: su-tick-on .45s var(--ease-standard) both; }
.su-tick:nth-child(1) { animation-delay: calc(var(--t3) + 1s); }
.su-tick:nth-child(2) { animation-delay: calc(var(--t3) + 1.9s); }
.su-tick:nth-child(3) { animation-delay: calc(var(--t3) + 2.8s); }
@keyframes su-tick-on { from { opacity: .35; } to { opacity: 1; } }
.su-tick__box { animation: su-tick-box .35s var(--ease-standard) both; }
.su-tick__box .p-icon { animation: su-tick-mark .35s var(--ease-standard) both; }
.su-tick:nth-child(1) .su-tick__box, .su-tick:nth-child(1) .p-icon { animation-delay: calc(var(--t3) + 1.15s); }
.su-tick:nth-child(2) .su-tick__box, .su-tick:nth-child(2) .p-icon { animation-delay: calc(var(--t3) + 2.05s); }
.su-tick:nth-child(3) .su-tick__box, .su-tick:nth-child(3) .p-icon { animation-delay: calc(var(--t3) + 2.95s); }
@keyframes su-tick-box { from { background: var(--white-a10); box-shadow: inset 0 0 0 1px var(--white-a30); }
  to { background: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); } }
@keyframes su-tick-mark { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
/* 셋이 다 처리된 **뒤에** 복합기에서 파동 세 겹이 퍼지고 체크가 뜬다 — 배지의 파동과 같은 결 */
/* .c-found-ring(점선 8 6)이 이 파일 뒤쪽에 있어 같은 특이도로는 진다 — 한 단계 더 좁혀 점선을 푼다 */
.setup__scene .su-ring { stroke-dasharray: none; stroke-width: 2.2; }
.su-ring { transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: su-ring-out 1.3s 1 ease-out both; }
.su-ring--1 { animation-delay: calc(var(--t3) + 3.4s); }
.su-ring--2 { animation-delay: calc(var(--t3) + 3.62s); }
.su-ring--3 { animation-delay: calc(var(--t3) + 3.84s); }
@keyframes su-ring-out { 0% { opacity: 0; transform: scale(.62); } 18% { opacity: .9; } 100% { opacity: 0; transform: scale(1.22); } }
.su-ok { transform-box: fill-box; transform-origin: center;
  animation: su-ok-in .5s calc(var(--t3) + 4.1s) 1 var(--ease-standard) both; }
@keyframes su-ok-in { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
.setup:not(.is-play) *, .setup:not(.is-play) *::before, .setup:not(.is-play) *::after { animation-play-state: paused !important; }
/* 되감기 — biz-system.js 가 잠깐 붙였다 떼어 애니메이션을 새로 만든다(그다음 .is-play 전까지 1단계 첫 모습으로 멈춰 있다) */
.setup.is-reset *, .setup.is-reset *::before, .setup.is-reset *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .setup *, .setup *::before, .setup *::after { animation: none !important; }
  .setup__card { opacity: 1; }   /* 타임바는 애니메이션이 없으면 다 찬 모습(기본값)으로 선다 */
  .setup__replay { display: none; }   /* 돌 것이 없으니 되감기도 없다 */
  .setup__n { background: var(--primary); }
  .setup__n--ai { opacity: 1; filter: none; }
  .iv-app { opacity: 0; } .iv-ok { opacity: 1; }
  .setup__flow-i, .su-tick { opacity: 1; }
  .setup__chores { display: none; }
  .su-wave path, .su-ring--1, .su-ok, .su-logo { opacity: 1; }
  .su-pkts { display: none; }
  .su-tick__box { background: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
  .su-tick__box .p-icon { opacity: 1; transform: none; } }
@media (max-width: 1024px) {
  /* 세 칸이 한 줄에 다 들어가지 않는다 — 작은 칸 둘을 위에 나란히, 큰 칸을 아래에 통으로 */
  .setup__row { flex-wrap: wrap; }
  .setup__step--sm { flex: 1 1 calc(50% - 20px); width: auto; margin-top: 0; }
  /* 윗줄 아래에 타임바가 들어가므로 3번 칸을 그만큼 더 내린다(막대 28+4 · 배지가 솟는 22 · 여유) */
  .setup__step--lg { flex: 1 1 100%; width: auto; margin-top: 82px; }
  .setup__fig--auto { width: min(100%, 520px); margin-inline: auto; }
  /* 1·2번 막대는 윗줄에서 이어지고, 3번은 제 칸 아래 따로 — 줄이 끝나는 쪽 끝을 둥글게 */
  .setup__step--s2 .setup__time { right: 0; --rr: 999px; }
  .setup__step--lg .setup__time { left: 0; --rl: 999px; }
}
@media (max-width: 640px) {
  .setup__step--sm { flex: 1 1 100%; width: auto; }
  .setup__step--sm + .setup__step--sm { margin-top: 82px; }
  /* 칸이 한 줄에 하나 — 막대도 칸마다 하나씩 */
  .setup__step--s1 .setup__time { right: 0; --rr: 999px; }
  .setup__step--s2 .setup__time { left: 0; --rl: 999px; }
}

/* =============================================================================
   S3-2 시스템 자동 유지 — **카드 넷 나란히**(2026-10-20 사용자: 슬라이드 → 나란히, 'CASE n'·이름표 삭제)
   칸 모양은 mycroft index #index6 .pointcard-list(MC-index-07): 회색 둥근 칸(#F5F8FA · 테두리 없음 · radius 20),
   왼쪽 정렬, 제목 20px 굵게 + 설명. 바탕 #F5F8FA 는 DS bg-subtle(gray-50 #F6F8F9)로 옮겼다.
   바꾼 곳: MC 는 그림이 칸 바닥에 붙지만, 여기서는 **작은 검정 아이콘(48)을 위에** 두고 그 아래 제목·설명(사용자).
   아이콘은 index.html sprite 의 ks-*(새로 그림) — 48 격자 · 선 2 · 검정(DS gray-900) + 오른쪽 아래 배지(검정 동그라미 + 흰 DS 글리프).
   ========================================================================== */
.keep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-20); margin: 0; padding: 0; list-style: none; }
.keep-card { --ks-cut: var(--bg-subtle);   /* 배지 둘레를 카드 바탕색으로 한 겹 — 본체 선과 배지를 떼어 보인다 */
  padding: var(--space-32) var(--space-32) var(--space-40); border-radius: 20px; background: var(--bg-subtle); }
.keep-card__ico { display: block; width: 48px; height: 48px; color: var(--gray-900); }
.keep-card__t { margin-top: var(--space-24); font: var(--font-bold) var(--h6-size) / var(--h6-lh) var(--font-sans); letter-spacing: var(--tracking); }
.keep-card__d { margin-top: var(--space-8); font: var(--font-regular) var(--body-md-size) / var(--body-md-lh) var(--font-sans); color: var(--text-tertiary); }
.keep-card__d b { font-weight: var(--font-bold); color: var(--text-primary); }
/* 아이콘 안쪽(sprite 의 symbol 이 <use> 로 복제되어도 이 규칙이 그대로 먹는다) */
.ks-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ks-dot { fill: currentColor; }
.ks-badge { fill: currentColor; stroke: var(--ks-cut, var(--white)); stroke-width: 5; paint-order: stroke; }   /* 테두리를 칠 밑에 깔아 바깥 2.5px 만 남긴다 */
.ks-glyph { fill: var(--white); }
.ks-cutline { fill: none; stroke: var(--ks-cut, var(--white)); stroke-width: 6; stroke-linecap: round; }   /* 빗금이 지나는 자리의 선을 끊는 바탕색 띠 */
@media (max-width: 1024px) { .keep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  /* 한 줄에 하나 — 아이콘을 왼쪽에 두고 글을 옆에 붙여 키를 줄인다 */
  .keep-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .keep-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-16); align-items: start; padding: var(--space-24); }
  .keep-card__ico { grid-row: 1 / span 2; }
  .keep-card__t { margin-top: 0; }
  .keep-card__d { margin-top: var(--space-4); }
}

/* =============================================================================
   S4 네 가지 원칙 — MC-index-07(둥근 카드 + 아이콘) · 다크
   ========================================================================== */
.rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.rule-card { position: relative; overflow: hidden; padding: var(--space-32); border-radius: var(--radius-lg); background: var(--white-a5); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.rule-card::after { content: ""; position: absolute; right: -20%; bottom: -60%; width: 60%; aspect-ratio: 1; border-radius: var(--radius-full); background: radial-gradient(closest-side, color-mix(in srgb, var(--primary-400) 22%, transparent), transparent); pointer-events: none; }
.rule-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-500) 22%, transparent); color: var(--primary-300); }
.rule-card__title { margin-top: var(--space-24); font: var(--font-bold) var(--h5-size) / var(--h5-lh) var(--font-sans); letter-spacing: var(--tracking); }
.rule-card p { margin-top: var(--space-12); font: var(--font-regular) var(--body-md-size) / var(--body-md-lh) var(--font-sans); color: var(--text-secondary); }
@media (max-width: 760px) { .rule-grid { grid-template-columns: 1fr; } .rule-card { padding: var(--space-24); } .rule-card__title { font-size: var(--h6-size); line-height: var(--h6-lh); } }

/* =============================================================================
   S5 점주의 일 — 장면 ② + 대체 목록(MC-REPLACE 의 "대체" 개념을 목록으로)
   ========================================================================== */
.owner-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-48); align-items: start; }
.owner-grid__scene { position: sticky; top: calc(var(--site-hd-h) + var(--space-24)); }
.swap-list li { padding: var(--space-16) 0; border-bottom: 1px solid var(--border-subtle); }
.swap-list li:first-child { padding-top: 0; }
.swap-list__before { display: flex; align-items: center; gap: var(--space-8); font: var(--font-regular) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.swap-list__after { display: flex; gap: var(--space-8); margin-top: var(--space-4); font: var(--font-medium) var(--body-md-size) / var(--body-md-lh) var(--font-sans); color: var(--text-primary); }
.swap-list__after > .zg-icon { margin-top: var(--space-2); }
@media (max-width: 960px) {
  .owner-grid { grid-template-columns: 1fr; gap: var(--space-32); }
  .owner-grid__scene { position: static; }
}

/* =============================================================================
   S6 손님은 혼자서도 — MC-index-07 카드 3×3 (첫 카드 강조)
   ========================================================================== */
.guest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.guest-card { padding: var(--space-32) var(--space-24); border-radius: var(--radius-lg); background: var(--bg-default); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.guest-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--primary-50); color: var(--primary); }
.guest-card h3 { margin-top: var(--space-20); font: var(--font-bold) var(--h6-size) / var(--h6-lh) var(--font-sans); letter-spacing: var(--tracking); }
.guest-card p { margin-top: var(--space-8); font: var(--font-regular) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--text-tertiary); }
.guest-card--key { background: var(--zone-navy); color: var(--gray-50); box-shadow: var(--shadow-md); }
.guest-card--key .guest-card__icon { background: var(--white-a10); color: var(--yellow-500); }
.guest-card--key p { color: var(--cool-300); }
@media (max-width: 960px) { .guest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .guest-grid { grid-template-columns: 1fr; } .guest-card { padding: var(--space-24); } }

/* =============================================================================
   S7 IoT — 장면 ③ + PL-Q1 기기 카드(상태 배지) · 다크
   ========================================================================== */
.iot-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-48); align-items: start; }
.iot-item { display: flex; gap: var(--space-16); padding: var(--space-20); border-radius: var(--radius-lg); background: var(--white-a5); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.iot-item + .iot-item { margin-top: var(--space-8); }
.iot-item__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--white-a10); color: var(--primary-300); }
.iot-item h3 { display: flex; align-items: center; gap: var(--space-8); font: var(--font-bold) var(--body-lg-size) / var(--body-lg-lh) var(--font-sans); }
.iot-item p { margin-top: var(--space-4); font: var(--font-regular) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--text-secondary); }
.iot-item:first-child { background: color-mix(in srgb, var(--primary-500) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-400) 50%, transparent); }
.iot-item:first-child .iot-item__icon { background: var(--primary-500); color: var(--white); }
.iot-list__more { margin-top: var(--space-24); color: var(--primary-300); }
@media (max-width: 960px) { .iot-grid { grid-template-columns: 1fr; gap: var(--space-32); } }

/* =============================================================================
   S8 시작이 쉽습니다 — 항목 목록 + 장면 ④
   ========================================================================== */
.easy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-48); align-items: center; }
.easy-item { display: flex; gap: var(--space-16); padding: var(--space-20) 0; border-bottom: 1px solid var(--border-subtle); }
.easy-item:first-child { padding-top: 0; }
.easy-item__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--primary-50); color: var(--primary); }
.easy-item h3 { font: var(--font-bold) var(--body-lg-size) / var(--body-lg-lh) var(--font-sans); }
.easy-item p { margin-top: var(--space-4); font: var(--font-regular) var(--body-md-size) / var(--body-md-lh) var(--font-sans); color: var(--text-tertiary); }
.easy-item--key .easy-item__icon { background: var(--primary); color: var(--white); }
@media (max-width: 960px) { .easy-grid { grid-template-columns: 1fr; gap: var(--space-32); } .easy-grid__scene { order: -1; } }

/* =============================================================================
   S9 기능 전체 — MC-index-05(필터 pill) + HP-GRID(완료/진행 배지)
   ========================================================================== */
.feat-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-24); }
.feat-filter .zg-tabs { flex-wrap: wrap; }
.feat-legend { display: flex; gap: var(--space-8); }
.feat-groups { display: flex; flex-direction: column; gap: var(--space-32); }
.feat-group__title { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-12); font: var(--font-bold) var(--body-lg-size) / var(--body-lg-lh) var(--font-sans); }
.feat-group__title .p-icon, .feat-group__title .zg-icon { color: var(--primary); }
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.feat { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); background: var(--bg-default); box-shadow: inset 0 0 0 1px var(--border-subtle); font: var(--font-regular) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); }
.feat > .zg-lozenge { flex: none; }
.feat:has(.zg-lozenge:not(.zg-lozenge--primary)) { color: var(--text-tertiary); }
@media (max-width: 760px) {
  .feat-grid { grid-template-columns: 1fr; }
  /* DS tab-group 규칙: 옆으로 넘기는 줄은 더 있는 쪽에 여백 없이 잘린 항목이 가장자리까지 */
  .feat-filter .zg-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--site-gutter) * -1); padding-inline: var(--site-gutter); }
  .feat-filter .zg-tabs::-webkit-scrollbar { display: none; }
  .feat-filter .zg-tab { flex: none; }
}

/* =============================================================================
   S10 현장의 목소리 — HP-QUOTES (공개 전 실제 인터뷰로 교체)
   ========================================================================== */
.voice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.voice { padding: var(--space-32) var(--space-24); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.voice__tag { font: var(--font-bold) var(--body-xs-size) / var(--body-xs-lh) var(--font-sans); color: var(--danger); }
.voice blockquote { margin: var(--space-16) 0 0; font: var(--font-bold) var(--h6-size) / var(--h6-lh) var(--font-sans); }
.voice__story { margin-top: var(--space-12); font: var(--font-regular) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--text-tertiary); }
.voice__who { margin-top: var(--space-16); font: var(--font-medium) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--text-muted); }
@media (max-width: 860px) { .voice-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   S11 자주 묻는 질문 — DS Section accordion(머리 줄 + 꺾쇠)을 FAQ 크기로
   ========================================================================== */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-48); align-items: start; }
.faq-layout .sect-head { position: sticky; top: calc(var(--site-hd-h) + var(--space-24)); margin-bottom: 0; }
.faq { border-top: 1px solid var(--border-default); }
.faq__item { border-bottom: 1px solid var(--border-default); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-20) var(--space-4); cursor: pointer; list-style: none; font: var(--font-bold) var(--body-lg-size) / var(--body-lg-lh) var(--font-sans); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--text-link); }
.faq__chevron { flex: none; transition: transform var(--duration-base) var(--ease-standard); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__a { padding: 0 var(--space-4) var(--space-24); font: var(--font-regular) var(--body-md-size) / var(--body-md-lh) var(--font-sans); color: var(--text-tertiary); }
@media (max-width: 960px) { .faq-layout { grid-template-columns: 1fr; gap: var(--space-24); } .faq-layout .sect-head { position: static; } .faq__item summary { font-size: var(--body-md-size); line-height: var(--body-md-lh); } }

/* =============================================================================
   S12 나에게 맞는 시작 — MH-index-02(세 갈래 타일 + 화살표 버튼) + MC-START(동심원 마무리)
   ========================================================================== */
.door-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.door { position: relative; display: flex; flex-direction: column; min-height: 280px; padding: var(--space-32); border-radius: var(--radius-lg); overflow: hidden; background: var(--white-a5); box-shadow: inset 0 0 0 1px var(--border-subtle); transition: background-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.door:hover { background: var(--white-a10); transform: translateY(calc(var(--space-4) * -1)); }
.door:focus-visible { box-shadow: var(--focus-ring); }
.door__icon { color: var(--primary-300); }
.door__kicker { margin-top: auto; font: var(--font-bold) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); color: var(--primary-300); }
.door__text { margin-top: var(--space-8); font: var(--font-bold) var(--h5-size) / var(--h5-lh) var(--font-sans); letter-spacing: var(--tracking); }
.door__go { display: inline-flex; align-items: center; justify-content: space-between; margin-top: var(--space-24); padding: var(--space-12) var(--space-16); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font: var(--font-medium) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans); }
.door:hover .door__go { border-color: var(--white-a50); }
@media (max-width: 860px) { .door-grid { grid-template-columns: 1fr; } .door { min-height: 0; } .door__kicker { margin-top: var(--space-24); } }

.start-band { position: relative; overflow: hidden; margin-top: var(--space-48); padding: calc(var(--space-48) * 1.5) var(--space-24); border-radius: var(--radius-lg); text-align: center; background: var(--white-a5); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.start-band__rings { position: absolute; inset: 0; pointer-events: none; }
.start-band__rings i { position: absolute; left: 50%; top: 100%; width: calc(var(--n, 1) * 360px); aspect-ratio: 1; border-radius: var(--radius-full); border: 1px solid var(--white-a10); transform: translate(-50%, -50%); }
.start-band__rings i:nth-child(1) { --n: 1; } .start-band__rings i:nth-child(2) { --n: 2; } .start-band__rings i:nth-child(3) { --n: 3; }
.start-band__title { position: relative; font: var(--font-bold) var(--title-size) / var(--title-lh) var(--font-sans); letter-spacing: var(--tracking); }
.start-band__lead { position: relative; margin-top: var(--space-12); font: var(--font-regular) var(--lead-size) / var(--lead-lh) var(--font-sans); color: var(--text-secondary); }
.start-band__actions { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); }

/* =============================================================================
   장면 그림 — 색(일러스트 원색 토큰) · 글자 · 단계별 움직임
   ========================================================================== */
/* 그라데이션 정지점 */
.s-navy-6 { stop-color: var(--navy-600); }
.s-primary-8 { stop-color: var(--primary-800); }
.s-primary-4 { stop-color: var(--primary-400); }
.s-turq { stop-color: var(--turquoise-500); }
.s-turq-8 { stop-color: var(--turquoise-800); }
.s-primary-6 { stop-color: var(--primary-600); }
.s-success { stop-color: var(--success); }
.s-gray-1 { stop-color: var(--gray-50); }
.s-gray-2 { stop-color: var(--gray-200); }
/* 면 */
.c-bezel { fill: var(--navy-900); }
.c-stand { fill: var(--cool-500); }
.c-line { fill: var(--white-a30); }
.c-line-strong { fill: var(--white-a65); }
.c-glass { fill: var(--white-a10); }
.c-glass-2 { fill: var(--white-a20); }
.c-glass-line { stroke: var(--white-a20); stroke-width: 1; }
.c-dock-edge { fill: var(--white-a30); }
.c-dash { fill: var(--white-a5); stroke: var(--white-a50); stroke-width: 1.5; stroke-dasharray: 5 5; }
.c-folder { fill: var(--primary-400); }
.c-white { fill: var(--white); }
.c-white-line { stroke: var(--gray-200); stroke-width: 1; }
.c-paper { fill: var(--white); stroke: var(--gray-200); stroke-width: 1; }
.c-sheet { fill: var(--white); stroke: var(--gray-300); stroke-width: 1; }
.c-ink { fill: var(--gray-300); }
.c-ink-2 { fill: var(--gray-150); }
.c-card { fill: var(--white); }
.c-primary { fill: var(--primary-500); }
.c-primary-soft { fill: var(--primary-400); }
.c-success { fill: var(--success); }
.c-danger { fill: var(--danger); }
.c-ok-soft { fill: color-mix(in srgb, var(--success) 26%, transparent); }
.c-busy-soft { fill: var(--white-a20); }
.c-danger-soft { fill: color-mix(in srgb, var(--danger) 26%, transparent); }
.c-warn-chip { fill: var(--yellow-500); }
.c-admin { fill: var(--navy-900); }
.c-ping { fill: none; stroke: var(--primary-400); stroke-width: 3; }
.c-scanline { fill: var(--turquoise-300); }
.c-beam { fill: none; stroke: var(--primary-400); stroke-width: 2; stroke-dasharray: 4 7; stroke-linecap: round; }
.c-stroke-white { fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-pick { stroke: var(--primary-300); stroke-width: 2; }
.c-pick-solid { fill: var(--primary-500); }
.c-chip { fill: var(--gray-100); }
.c-sheet-panel { fill: var(--white); }
.c-cam { fill: var(--navy-900); }
.c-counter { fill: var(--bg-subtle); }
.c-cable { fill: none; stroke: var(--gray-400); stroke-width: 4; stroke-linecap: round; }
.c-lam-top { fill: var(--gray-100); }
.c-lam-slot { fill: var(--navy-900); }
.c-lam-tray { fill: var(--gray-300); }
.c-lam-label { fill: var(--gray-300); }
.c-led { fill: var(--gray-400); transition: fill 300ms var(--ease-standard); }
.c-ring-track { fill: none; stroke: var(--white-a20); stroke-width: 10; }
.c-ring { fill: none; stroke: var(--success); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 352; stroke-dashoffset: 0; }
.c-track { fill: var(--gray-150); }
.c-cursor { fill: var(--white); stroke: var(--navy-900); stroke-width: 1.2; }
.c-tap { fill: var(--white-a50); }
.c-dot { fill: var(--white); }
.c-wave { fill: none; stroke: var(--primary-400); stroke-width: 2; }
.c-found-ring { fill: none; stroke: var(--primary-400); stroke-width: 2.5; stroke-dasharray: 8 6; }
.c-link { fill: none; stroke: var(--primary-500); stroke-width: 3; stroke-linecap: round; }
.c-toner-c { fill: var(--sky-500); }
.c-toner-m { fill: var(--pink-500); }
.c-toner-y { fill: var(--yellow-500); }
.c-toner-k { fill: var(--cool-300); }
/* <use> 아이콘 */
.u-ink { fill: none; stroke: var(--navy-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u-ink-strong { fill: none; stroke: var(--gray-900); stroke-width: 1.6; stroke-linecap: square; }
.u-white { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u-white-fill { fill: var(--white); }
.u-ink-fill { fill: var(--navy-700); }
.i-bolt { fill: var(--gray-400); transition: fill 300ms var(--ease-standard); }
/* 글자 */
.t { font-family: var(--font-sans); fill: var(--white); letter-spacing: var(--tracking); }
.t-3xs { font-size: 7px; } .t-2xs { font-size: 9px; } .t-xs { font-size: 11px; } .t-sm { font-size: 13px; } .t-md { font-size: 16px; } .t-lg { font-size: 22px; }
.t-pin { font-size: 40px; font-weight: 700; letter-spacing: .06em; }
.t-pin-panel { font-size: 26px; font-weight: 700; letter-spacing: .04em; }
.t-pin-sm { fill: var(--primary-300); font-weight: 700; letter-spacing: .04em; }
.t-b { font-weight: 700; } .t-mid { text-anchor: middle; } .t-end { text-anchor: end; }
.t-muted { fill: var(--white-a65); } .t-ink { fill: var(--gray-500); } .t-ink-strong { fill: var(--gray-900); }
.t-ok { fill: var(--turquoise-300); } .t-busy { fill: var(--white-a65); } .t-danger { fill: var(--red-300); }
.t-warn-ink { fill: var(--gray-900); } .t-on-success { fill: var(--white); }

/* 공통 움직임 */
@keyframes sc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sc-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sc-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sc-ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes sc-tap { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.scene.is-idle svg * { animation-play-state: paused !important; }

/* ② 점주는 휴대폰으로 */
.scene[data-step="1"] .o-ring { animation: sc-ping 1.2s ease-out infinite; }
.o-fail-row { transition: stroke 300ms var(--ease-standard); }
.scene[data-step="2"] .o-fail-row, .scene[data-step="3"] .o-fail-row { stroke: var(--danger); stroke-width: 1.5; }
.o-done { opacity: 0; }
.scene[data-step="3"] .o-fail { animation: sc-out .3s 1.6s both; }
.scene[data-step="3"] .o-done { animation: sc-in .3s 1.7s both; }
.o-tap { opacity: 0; }
.scene[data-step="3"] .o-tap { animation: sc-tap .7s .8s ease-out both; }
.o-toast { opacity: 0; }
.scene[data-step="3"] .o-toast { animation: sc-pop .4s 1.4s var(--ease-standard) both; }
.o-out { opacity: 0; }
.scene[data-step="3"] .o-out { animation: f-out .9s 1.5s var(--ease-standard) both; }
.o-k { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(.35); }
.scene[data-step="4"] .o-k { animation: o-drain 1.6s .4s var(--ease-standard) both; }
@keyframes o-drain { from { transform: scaleY(.35); fill: var(--cool-300); } to { transform: scaleY(.08); fill: var(--danger); } }
.o-order { opacity: 0; }
.scene[data-step="4"] .o-order { animation: sc-pop .4s 2.2s var(--ease-standard) both; }
.o-chk { opacity: 0; }
.scene[data-step="5"] .o-chk--1 { animation: sc-pop .35s .9s var(--ease-standard) both; }
.scene[data-step="5"] .o-chk--2 { animation: sc-pop .35s 1.9s var(--ease-standard) both; }
.scene[data-step="5"] .o-pickup { animation: o-away 1.2s 1.9s var(--ease-standard) both; }
@keyframes o-away { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-70px); } }

/* ③ QR 한 번으로 코팅기 켜기 */
.scene[data-step="1"] .i-scan { animation: i-scan 1s ease-in-out infinite alternate; }
@keyframes i-scan { from { transform: translateY(0); } to { transform: translateY(76px); } }
.scene[data-step="2"] .i-pick { animation: sc-pop .3s .6s both; }
.scene[data-step="2"] .i-sheet-up { animation: i-up .5s 1.6s var(--ease-standard) both; }
@keyframes i-up { from { transform: translateY(170px); } to { transform: none; } }
.i-glow { opacity: 0; transition: opacity 400ms var(--ease-standard); }
.scene[data-step="3"] .i-glow, .scene[data-step="4"] .i-glow { opacity: 1; }
.scene[data-step="3"] .i-led, .scene[data-step="4"] .i-led,
.scene[data-step="3"] .i-plug-led, .scene[data-step="4"] .i-plug-led { fill: var(--success); }
.scene[data-step="3"] .i-bolt, .scene[data-step="4"] .i-bolt { fill: var(--yellow-500); }
.scene[data-step="4"] .i-led, .scene[data-step="4"] .i-plug-led { animation: i-off .3s 3.3s both; }
.scene[data-step="4"] .i-glow { animation: sc-out .3s 3.3s both; }
.scene[data-step="4"] .i-bolt { animation: i-bolt-off .3s 3.3s both; }
@keyframes i-off { to { fill: var(--gray-400); } }
@keyframes i-bolt-off { to { fill: var(--gray-400); } }
.i-sheet { opacity: 0; }
.scene[data-step="3"] .i-sheet { animation: sc-in .4s .8s both; }
.scene[data-step="4"] .i-sheet { animation: i-feed 2.6s .2s ease-in-out both; }
@keyframes i-feed { 0% { opacity: 1; transform: none; } 85% { opacity: 1; transform: translateY(36px); } 100% { opacity: 0; transform: translateY(40px); } }
.scene[data-step="4"] .i-ring { animation: i-ring 3.3s linear both; }
@keyframes i-ring { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 352; } }
.i-done { opacity: 0; }
.scene[data-step="4"] .i-done { animation: sc-in .3s 3.3s both; }

/* ④ [복합기 추가] 한 번 */
.scene[data-step="1"] .s-dock { animation: s-dock-in .5s 3s var(--ease-standard) both; }
@keyframes s-dock-in { from { opacity: 0; transform: translateX(108px); } to { opacity: 1; transform: none; } }
.s-progress { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.scene[data-step="1"] .s-progress { animation: s-fill 2.4s .3s var(--ease-standard) both; }
@keyframes s-fill { to { transform: scaleX(1); } }
.scene[data-step="1"] .s-installing { animation: sc-out .2s 2.7s both; }
.s-installed { opacity: 0; }
.scene[data-step="1"] .s-installed { animation: sc-pop .3s 2.8s both; }
.s-cursor { opacity: 0; }
.scene[data-step="2"] .s-cursor { animation: s-cursor 1.4s .4s var(--ease-standard) both; }
@keyframes s-cursor { 0% { opacity: 0; transform: translate(186px, 214px); } 20% { opacity: 1; } 100% { opacity: 1; transform: translate(134px, 160px); } }
.s-tap { opacity: 0; }
.scene[data-step="2"] .s-tap { animation: sc-tap .6s 1.8s ease-out both; }
.scene[data-step="2"] .s-add { animation: s-press .3s 1.8s both; }
@keyframes s-press { 50% { fill: var(--primary-700); } }
.scene[data-step="3"] .s-wave { animation: s-wave 2.4s ease-out infinite; }
.scene[data-step="3"] .s-wave--2 { animation-delay: .8s; } .scene[data-step="3"] .s-wave--3 { animation-delay: 1.6s; }
@keyframes s-wave { 0% { opacity: .7; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.2); } }
.scene[data-step="3"] .s-dot { animation: s-dot .9s ease-in-out infinite; }
.scene[data-step="3"] .s-dot--2 { animation-delay: .15s; } .scene[data-step="3"] .s-dot--3 { animation-delay: .3s; }
@keyframes s-dot { 50% { transform: translateY(-5px); } }
.s-found { opacity: 0; }
.scene[data-step="3"] .s-found { animation: sc-in .4s 2.2s var(--ease-standard) both; }
.scene[data-step="3"] .c-found-ring { transition-delay: 2s; }
.s-chk, .s-ok { opacity: 0; }
.scene[data-step="4"] .s-chk--1 { animation: sc-pop .3s .4s both; }
.scene[data-step="4"] .s-chk--2 { animation: sc-pop .3s .9s both; }
.scene[data-step="4"] .s-chk--3 { animation: sc-pop .3s 1.4s both; }
.scene[data-step="4"] .s-ok { animation: sc-pop .3s 2s both; }
.scene[data-step="4"] .c-link { stroke-dasharray: 300; animation: s-link 1s var(--ease-standard) both; }
@keyframes s-link { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }