/* system.css — 개편 층: 통합 시스템 구조도(#system) · 작동 방식 여정(#how).
 *
 * ★클래스는 전부 sx-(구조도) · jr-(여정) 접두어. 옛 공용 CSS 의 .node .link .layer .flow 와
 *   겹치지 않게 새 이름을 지었다(옛 규칙을 고치지 않고 벗어난다).
 * ★색 토큰은 apple-core.css 의 :root 를 쓴다. 상태색은 제품과 같은 뜻으로만:
 *   #EF4444 = 끊김 ✕ 하나, #34D399 = 폰 화면 속 «안정» 하나. 장식에 쓰지 않는다.
 * ★구조도 좌표는 1280×900 설계 단위(u). 무대 폭 1280px 에서 1u = 1px 이고,
 *   --u = 100cqw / 1280 으로 무대 폭에 비례한다. 작은 글은 max(12px, …) 로 하한을 건다.
 */

/* ── 장 바탕: 원장 자리에 모이는 파란 발광 + 옅은 점 격자 ── */
.sx { position: relative; isolation: isolate; overflow: clip; padding: clamp(96px, 10vw, 150px) 0 clamp(72px, 8vw, 110px); background: #000; }
.sx__bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse 34% 30% at 58% 46%, rgba(41, 151, 255, .20), transparent 70%),
  radial-gradient(ellipse 24% 24% at 86% 26%, rgba(191, 90, 242, .12), transparent 72%),
  radial-gradient(ellipse 28% 30% at 14% 58%, rgba(41, 151, 255, .08), transparent 72%),
  radial-gradient(ellipse 60% 22% at 50% 100%, rgba(240, 100, 189, .06), transparent 70%), #000; }
.sx__bg::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.3px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 56% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 52% at 56% 50%, #000 20%, transparent 78%); }
.sx__wrap { width: min(100% - 48px, 1320px); margin: 0 auto; }
.sx__head { text-align: center; margin-bottom: clamp(34px, 4vw, 56px); }
.sx__eyebrow { color: var(--accent); font-size: 15px; font-weight: 600; margin: 0 0 16px; }
.sx__title { margin: 0; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.055em; font-weight: 700; text-wrap: balance; }
.sx__grad { background: linear-gradient(90deg, #2997ff, #7d7aff 52%, #f064bd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sx__lead { margin: 18px auto 0; max-width: 720px; color: var(--text-muted); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; }

/* ── 좁은 화면 맨 위 요약 띠 ── */
.sx-mini { display: flex; align-items: center; gap: 6px; max-width: 620px; margin: 0 auto 26px; padding-top: 22px; font-size: 13px; color: #d2d2d7; }
.sx-mini__n { flex: none; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); font-weight: 600; white-space: nowrap; }
.sx-mini__n--hub { color: #fff; border-color: rgba(41, 151, 255, .6); background: rgba(41, 151, 255, .16); box-shadow: 0 0 22px rgba(41, 151, 255, .3); }
.sx-mini__l { position: relative; flex: 1 1 0; min-width: 0; height: 30px; display: flex; align-items: flex-start; justify-content: center; }
.sx-mini__l::before { content: ""; position: absolute; left: 0; right: 6px; top: 50%; height: 2px; background: #bf5af2; }
.sx-mini__l::after { content: ""; position: absolute; right: 0; top: calc(50% - 5px); border: 5px solid transparent; border-left: 7px solid #bf5af2; border-right: 0; }
.sx-mini__l--ledger::before { height: 5px; margin-top: -1.5px; background: linear-gradient(90deg, #1667c9, #2997ff); box-shadow: 0 0 12px rgba(41, 151, 255, .8); }
.sx-mini__l--ledger::after { border-left-color: #8cc8ff; }
.sx-mini__l b { position: relative; top: -26px; font-size: 12px; font-weight: 700; white-space: nowrap; color: #bfe0ff; }
.sx-mini__l--view b { color: #e5c2ff; font-weight: 600; }

/* ── 무대 (기본 = 좁은 화면의 세로 흐름) ── */
.sx-fig { margin: 0; }
.sx-box { container-type: inline-size; max-width: 1280px; margin: 0 auto; }
.sx-stage { position: relative; display: flex; flex-direction: column; max-width: 620px; margin: 0 auto; font-size: 14px; }
.sx-lines, .sx-lbl, .sx-info, .sx-info[hidden] { display: none; }
.sx-stage button { font: inherit; color: inherit; letter-spacing: inherit; }

/* 공통 노드 */
.sx-node { position: relative; display: block; width: 100%; text-align: left; cursor: pointer; color: inherit;
  border: 1px solid var(--line); border-radius: 18px; padding: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(14, 14, 16, .78);
  transition: border-color .25s ease, box-shadow .25s ease, opacity .3s ease; }
.sx-node:hover, .sx-node.is-sel { border-color: rgba(41, 151, 255, .65); box-shadow: 0 0 0 1px rgba(41, 151, 255, .22), 0 0 34px rgba(41, 151, 255, .24); }
.sx-node:focus-visible, .sx-lbl:focus-visible, .sx-offline__btn:focus-visible, .sx-offline__main:focus-visible { outline: 3px solid rgba(41, 151, 255, .75); outline-offset: 3px; }
.sx-t { display: block; font-weight: 700; color: #fff; font-size: 1.1em; letter-spacing: -.025em; line-height: 1.25; }
.sx-p { display: block; color: #8e8e93; font-size: max(12px, .86em); margin-top: .15em; }
.sx-s { display: block; color: var(--text-muted); font-size: max(12px, .88em); line-height: 1.45; margin-top: .3em; }
.sx-chip { display: inline-flex; align-items: center; gap: .35em; padding: .2em .62em; border-radius: 99px; font-size: max(12px, .8em); font-weight: 600; line-height: 1.3; white-space: nowrap; vertical-align: middle; }
.sx-chip--view { color: #e5c2ff; background: rgba(191, 90, 242, .14); border: 1px solid rgba(191, 90, 242, .42); }
.sx-chip--now { color: #bfe0ff; background: rgba(41, 151, 255, .14); border: 1px solid rgba(41, 151, 255, .42); }
.sx-chip--plat { color: #d2d2d7; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .2); }
.sx-chip--ready { color: #d1d1d6; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .5); }
.sx-chip--site { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
.sx-art { display: block; flex: none; overflow: visible; }

/* 가운데 원장(허브) */
.sx-hub { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 6px 16px; padding: 18px;
  border-color: rgba(41, 151, 255, .45); border-radius: 26px; z-index: 2;
  background: radial-gradient(120% 90% at 20% 30%, rgba(41, 151, 255, .22), transparent 60%), radial-gradient(90% 90% at 100% 100%, rgba(191, 90, 242, .14), transparent 60%), #05070d;
  box-shadow: 0 0 60px rgba(41, 151, 255, .22); }
.sx-hub__art { position: relative; width: 116px; height: 116px; }
.sx-hub__art svg { width: 100%; height: 100%; display: block; }
.sx-hub__k { display: block; color: #9ccfff; font-size: max(12px, .84em); font-weight: 600; }
.sx-hub__t { display: block; margin-top: .1em; font-size: 1.9em; font-weight: 800; letter-spacing: -.05em; line-height: 1.1;
  background: linear-gradient(92deg, #fff, #cfe6ff 45%, #ecd0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sx-hub__s { display: block; margin-top: .35em; color: var(--text-muted); font-size: max(12px, .84em); line-height: 1.4; }
.sx-hcaps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* ★둘레 칩은 각진 사각 + 자물쇠 — 글자만 있는 선 이름표와 모양으로 가른다 */
.sx-hcap { display: inline-flex; align-items: center; gap: .45em; font-size: max(12px, .82em); font-weight: 600; padding: .34em .7em; border-radius: 5px; color: #d8e9ff; background: rgba(8, 14, 26, .92); border: 1px solid rgba(41, 151, 255, .45); white-space: nowrap; }
.sx-hcap svg { width: .95em; height: 1.1em; flex: none; fill: rgba(140, 200, 255, .25); stroke: #8cc8ff; stroke-width: 1.3; }

/* 세로 흐름의 등뼈 — 원장에서 내려와 가지를 친다 */
.sx-grp { position: relative; padding: 30px 0 6px 30px; }
.sx-grp::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: rgba(191, 90, 242, .55); }
.sx-grp--in::before { left: 8px; width: 7px; border-radius: 4px; background: linear-gradient(0deg, #155fb8, #2997ff 70%, #8cc8ff); box-shadow: 0 0 18px rgba(41, 151, 255, .65); }
.sx-grp--ext::before { background: rgba(255, 255, 255, .22); bottom: auto; height: 46px; }
.sx-grp__h { position: relative; margin: 0 0 14px; font-size: .95em; font-weight: 700; color: #fff; line-height: 1.35; }
.sx-grp__h small { display: block; margin-top: 3px; color: var(--text-muted); font-size: max(12px, .88em); font-weight: 500; }
.sx-grp__h::before { content: ""; position: absolute; left: -19px; top: .62em; width: 14px; height: 2px; background: rgba(191, 90, 242, .8); }
.sx-grp--in .sx-grp__h::before { background: #2997ff; height: 3px; }
.sx-grp--ext .sx-grp__h::before { background: rgba(255, 255, 255, .4); }
.sx-grp__h::after { content: ""; position: absolute; left: -24px; top: calc(.62em - 5px); border: 6px solid transparent; }
.sx-grp--in .sx-grp__h::after { border-bottom-color: #8cc8ff; top: calc(.62em - 17px); left: -17px; }
.sx-grp--out .sx-grp__h::after { border-top-color: #e5c2ff; top: calc(.62em + 3px); left: -21px; }

/* 사업장 묶음 — 뒤에 겹친 B·C 판이 «사업장마다 같은 길» 을 말한다 */
.sx-site { position: relative; margin-top: 50px; }
.sx-site__ghost { position: absolute; inset: 0; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)), #0b0b0d; transform-origin: 50% 0; }
.sx-site__ghost span, .sx-site__ghost em { position: absolute; top: 5px; font-size: 12px; color: var(--text-faint); font-weight: 600; font-style: normal; }
.sx-site__ghost span { left: 16px; }
.sx-site__ghost em { right: 16px; color: #8cc8ff; }
.sx-site__ghost--c { transform: translateY(-44px) scale(.92); opacity: .55; }
.sx-site__ghost--b { transform: translateY(-22px) scale(.96); opacity: .85; }
.sx-site__panel { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), #0c0c0e;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sx-site__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sx-site__head > span:last-child { color: var(--text-muted); font-size: max(12px, .82em); }

/* 레인 장면 — 시안 2 조감도 조각을 비스듬한 정면으로 한 번 뽑은 정적 SVG */
.sx-lane { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(80% 90% at 60% 110%, rgba(41, 151, 255, .16), transparent 60%), linear-gradient(#0a1020, #050608 70%); }
.sx-lane svg { display: block; width: 100%; height: auto; }
.sx-lane__prep { color: rgba(255, 255, 255, .6); }
.sx-lane__prep * { stroke-dasharray: 3 2.4; }
.sx-lane__rdy, .sx-lane__lpr { position: absolute; font-size: max(12px, .78em); font-weight: 600; line-height: 1.2; white-space: nowrap; border-radius: 7px; }
.sx-lane__rdy { left: 3%; top: 5%; padding: .18em .6em; color: #e5e5ea; background: rgba(0, 0, 0, .66); border: 1px dashed rgba(255, 255, 255, .6); border-radius: 99px; }
.sx-lane__lpr { right: 3%; bottom: 5%; display: flex; align-items: center; gap: .5em; padding: .26em .6em .26em .3em; color: #9fd0ff; background: rgba(10, 14, 22, .86); border: 1px solid rgba(124, 196, 255, .6); }
.sx-lane__lpr b { padding: .12em .42em; border-radius: 4px; color: #111; background: #f2f3f5; font-weight: 700; letter-spacing: .01em; }
.sx-lane__flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(22% 40% at 79% 42%, rgba(220, 238, 255, .55), transparent 70%); }

.sx-devs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sx-devs li:last-child { grid-column: 1 / -1; }
.sx-dev { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; height: 100%; }
.sx-dev .sx-art { width: 44px; height: 34px; }
.sx-dev .sx-t { font-size: max(12px, .9em); }
.sx-dev .sx-p { color: var(--text-muted); }
.sx-dev--ready { border-style: dashed; border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .02); }
.sx-dev--ready .sx-art, .sx-dev--ready .sx-dev__txt { opacity: .78; }
.sx-dev--ready .sx-chip { margin-left: auto; }
/* 현장 배선 — 회색 실선(범례 «장치 연결 · 계정» 과 같은 선) */
.sx-wire { position: relative; display: flex; justify-content: center; margin: 0; font-size: max(12px, .8em); color: #c7c7cc; padding: 8px 0; }
.sx-wire::before { content: ""; position: absolute; inset: 0 12%;
  background: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, .42)) 0 0 / 1.5px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, .42)) 33% 0 / 1.5px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, .42)) 67% 0 / 1.5px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, .42)) 100% 0 / 1.5px 100% no-repeat; }
.sx-wire span { position: relative; padding: 2px 10px; border-radius: 99px; background: #0c0c0e; border: 1px solid rgba(255, 255, 255, .26); }

.sx-station { display: grid; grid-template-columns: 124px 1fr; gap: 10px 12px; align-items: center; border-color: rgba(41, 151, 255, .4);
  background: radial-gradient(90% 120% at 0% 0%, rgba(41, 151, 255, .14), transparent 60%), rgba(12, 14, 20, .9); }
.sx-station .sx-art { width: 124px; height: auto; }
.sx-station .sx-t { font-size: 1.16em; }
.sx-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.sx-tag { font-size: max(12px, .8em); padding: .28em .62em; border-radius: 8px; color: #d8e9ff; background: rgba(41, 151, 255, .09); border: 1px solid rgba(41, 151, 255, .22); white-space: nowrap; transition: opacity .3s ease; }
.sx-tag--key { color: #fff; background: rgba(41, 151, 255, .26); border-color: rgba(41, 151, 255, .6); }

/* 끊겨도 돈다 — 사업장 판 맨 아래 */
.sx-offline { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start;
  padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(41, 151, 255, .45); transition: opacity .3s ease, border-color .3s ease;
  background: linear-gradient(135deg, rgba(41, 151, 255, .16), rgba(191, 90, 242, .08)), rgba(8, 10, 16, .92); }
.sx-offline__ico { width: 26px; height: 26px; color: #8cc8ff; grid-row: span 2; margin-top: 2px; }
.sx-offline__main { all: unset; cursor: pointer; display: block; border-radius: 8px; }
.sx-offline__t { display: block; font-weight: 700; font-size: .96em; color: #fff; line-height: 1.3; }
.sx-offline__s { display: block; color: #bcd8f5; font-size: max(12px, .82em); margin-top: 3px; line-height: 1.45; }
.sx-offline__row { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.sx-qs { display: flex; gap: 4px; }
.sx-q { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); transition: background .3s, box-shadow .3s, transform .7s ease-in, opacity .7s ease-in; }
.sx-q.on { background: #2997ff; border-color: #9ccfff; box-shadow: 0 0 10px rgba(41, 151, 255, .8); }
.is-flush .sx-q.on { transform: translate(70px, -40px); opacity: 0; }
.is-flush .sx-q:nth-child(2) { transition-delay: .12s; } .is-flush .sx-q:nth-child(3) { transition-delay: .24s; }
.is-flush .sx-q:nth-child(4) { transition-delay: .36s; } .is-flush .sx-q:nth-child(5) { transition-delay: .48s; }
.sx-offline__btn { cursor: pointer; font-size: max(12px, .78em); font-weight: 600; padding: .38em .8em; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff; white-space: nowrap; }
.sx-offline__btn:hover { background: rgba(255, 255, 255, .14); }
.sx-offline__btn[aria-pressed="true"] { border-color: rgba(239, 68, 68, .7); background: rgba(239, 68, 68, .14); }
.is-offline .sx-offline { border-color: rgba(239, 68, 68, .55); }
.is-offline .sx-grp--in::before { background: repeating-linear-gradient(180deg, #4b5058 0 8px, transparent 8px 14px); box-shadow: none; }

/* 보는 화면 3개 (기사앱 · 업주니 · 관제) */
.sx-scr { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; margin-top: 10px; }
.sx-scr .sx-art { width: 84px; height: auto; justify-self: center; }
.sx-scr--console { grid-template-columns: 130px 1fr; }
.sx-scr--console .sx-art { width: 130px; }
.sx-scr__txt .sx-chip { margin: 8px 4px 0 0; }

/* 외부 시스템 */
.sx-ext { display: grid; gap: 8px; }
.sx-ext__card { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-content: start; }
.sx-ext__card .sx-art { width: 52px; height: 40px; grid-row: 1; grid-column: 2; }
.sx-ext__k { display: block; font-size: max(12px, .78em); color: var(--text-faint); font-weight: 600; }
.sx-ext__rows { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 8px; }
.sx-ext__row { display: flex; align-items: flex-start; gap: 6px; font-size: max(12px, .84em); color: #d2d2d7; line-height: 1.35; }
.sx-ext__row .sx-chip { font-size: max(12px, .78em); padding: .1em .5em; }
.sx-ext__row--ready { color: var(--text-muted); }
.sx-arrow { flex: none; font-weight: 700; color: #e5c2ff; }
.sx-ext__card[data-node="mes"] .sx-ext__row:last-child { color: var(--text-faint); }

/* ── 캡션: 핵심 문장 · 범례 · 숫자 · 출처 ── */
.sx-foot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px 32px; align-items: start; max-width: 1280px;
  margin: 30px auto 0; padding: 24px 26px; border-radius: 24px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), rgba(22, 22, 23, .8); }
.sx-foot p { margin: 0; }
.sx-foot__k { color: var(--accent); font-size: 13px; font-weight: 700; margin-bottom: 8px !important; }
.sx-foot__big { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; font-weight: 700; color: #fff; letter-spacing: -.03em; text-wrap: balance; }
.sx-foot__sub { margin-top: 8px !important; color: var(--text-muted); font-size: 16px; line-height: 1.5; }
.sx-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: #d2d2d7; }
.sx-legend li { display: grid; grid-template-columns: 40px auto 1fr; align-items: center; gap: 10px; }
.sx-legend small { color: var(--text-faint); font-size: 13px; }
.sx-lg { display: block; width: 40px; height: 0; border-radius: 3px; }
.sx-lg--ledger { border-top: 5px solid #2997ff; box-shadow: 0 0 10px rgba(41, 151, 255, .9); }
.sx-lg--batch { border-top: 1.5px solid rgba(140, 200, 255, .75); }
.sx-lg--view { border-top: 2px solid #bf5af2; }
.sx-lg--wire { border-top: 1.5px solid rgba(255, 255, 255, .55); }
.sx-lg--ready { height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 5px, transparent 5px 9px); }
/* ★왼쪽 = 핵심 문장 + 숫자, 오른쪽 = 범례 + 출처 — 두 칸 높이를 맞춘다 */
.sx-foot__msg { grid-column: 1; grid-row: 1; }
.sx-legend { grid-column: 2; grid-row: 1 / span 2; }
.sx-stats { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.sx-stats div { padding: 12px 12px 10px; border-radius: 14px; border: 1px solid rgba(41, 151, 255, .22); background: linear-gradient(160deg, rgba(41, 151, 255, .12), rgba(191, 90, 242, .06)); }
.sx-stats dt { order: 2; color: var(--text-muted); font-size: 12px; }
.sx-stats dd { margin: 0 0 2px; font-size: 14px; color: #bfe0ff; font-weight: 600; }
.sx-stats dd b { font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff, #9ccfff 60%, #d9b3ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sx-stats div { display: flex; flex-direction: column-reverse; }
.sx-src { grid-column: 1 / -1; grid-row: 3; margin-top: 2px !important; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--text-faint); font-size: 13px; }

/* ── 한눈에 요약(넓은 화면) · 글로 읽기 ── */
.sx-sum { display: none; }
.sx-text { max-width: 1280px; margin: 14px auto 0; border-radius: 18px; border: 1px solid var(--line); background: rgba(22, 22, 23, .55); }
.sx-text summary { cursor: pointer; padding: 15px 22px; font-size: 15px; font-weight: 600; color: #d2d2d7; }
.sx-text summary:focus-visible { outline: 3px solid rgba(41, 151, 255, .75); outline-offset: 2px; border-radius: 18px; }
.sx-text__cols { display: grid; gap: 18px; padding: 4px 22px 22px; }
.sx-text h3 { margin: 0 0 8px; font-size: 15px; color: #fff; }
.sx-text h3 small { margin-left: 6px; color: var(--text-faint); font-weight: 500; font-size: 13px; }
.sx-text ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.sx-text li b { color: #fff; margin-right: 6px; }
.sx-text li .sx-chip { margin-right: 6px; font-size: 12px; }
.sx-text li > span:last-child { display: block; }

/* ── 태블릿: 세로 흐름을 유지하되 화면·외부 시스템은 3열 ── */
@media (min-width: 760px) and (max-width: 1279px) {
  .sx-stage, .sx-mini { max-width: 880px; }
  .sx-grp--out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch; }
  .sx-grp--out .sx-grp__h { grid-column: 1 / -1; margin-bottom: 4px; }
  .sx-grp--out .sx-scr { grid-template-columns: 1fr; justify-items: center; text-align: center; margin: 0; align-content: start; }
  .sx-grp--out .sx-scr .sx-art { width: 84px; }
  .sx-grp--out .sx-scr--console .sx-art { width: 190px; }
  .sx-ext { grid-template-columns: repeat(3, 1fr); }
  .sx-station { grid-template-columns: 170px 1fr; }
  .sx-station .sx-art { width: 170px; }
}

/* ── 넓은 화면: 좌표 무대 ── */
@media (min-width: 1280px) {
  .sx-mini { display: none; }
  .sx-box { --u: calc(100cqw / 1280); }
  .sx-stage { display: block; max-width: none; aspect-ratio: 1280 / 900; font-size: calc(14 * var(--u)); }
  .sx-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .sx-abs { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); margin: 0; z-index: 1; }
  .sx-grp { display: contents; }
  .sx-grp::before, .sx-grp__h { display: none; }

  /* 허브: 빛나는 원 + 둘레의 성질 칩 */
  .sx-hub { display: block; height: calc(240 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; z-index: 2; }
  .sx-hub::before { content: ""; position: absolute; inset: -4%; border-radius: 50%;
    box-shadow: 0 0 calc(70 * var(--u)) rgba(41, 151, 255, .5), 0 0 calc(160 * var(--u)) rgba(125, 122, 255, .28); }
  .sx-hub:hover, .sx-hub.is-sel { box-shadow: none; }
  .sx-hub:hover .sx-hub__art, .sx-hub.is-sel .sx-hub__art { filter: brightness(1.18); }
  .sx-hub__art { position: absolute; inset: 0; width: 100%; height: 100%; }
  .sx-seal, .sx-mob { display: none; }
  .sx-hub__txt { position: absolute; left: 0; right: 0; top: 24%; text-align: center; }
  .sx-hub__t { font-size: 2.3em; }
  .sx-hub__s { margin-top: .5em; }
  .sx-hcaps { display: block; margin: 0; }
  .sx-hcap { position: absolute; left: calc(var(--cx) * var(--u)); top: calc(var(--cy) * var(--u)); transform: translate(-50%, -50%); }

  /* 사업장 판 */
  .sx-site { height: calc(812 * var(--u)); margin: 0; }
  .sx-site__ghost--c { transform: translateY(calc(-44 * var(--u))) scale(.92); }
  .sx-site__ghost--b { transform: translateY(calc(-22 * var(--u))) scale(.96); }
  .sx-site__ghost span, .sx-site__ghost em { top: calc(3 * var(--u)); font-size: max(12px, .86em); }
  .sx-site__panel { height: 100%; gap: calc(10 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(22 * var(--u)); }
  .sx-site__head { height: calc(26 * var(--u)); }
  .sx-lane { border-radius: calc(12 * var(--u)); flex: none; }
  .sx-devs { gap: calc(6 * var(--u)); }
  .sx-dev { height: calc(52 * var(--u)); gap: calc(8 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(12 * var(--u)); }
  .sx-dev .sx-art { width: calc(44 * var(--u)); height: calc(34 * var(--u)); }
  /* ★트럭스케일 · 인디케이터는 이름이 길어 한 줄을 다 쓴다. 준비 장치는 반 칸 — 그림 대신 이름 두 줄 + «준비» */
  .sx-devs li:first-child { grid-column: 1 / -1; }
  .sx-devs li:last-child { grid-column: auto; }
  .sx-dev--ready { position: relative; padding-right: calc(52 * var(--u)); }
  .sx-dev--ready .sx-art, .sx-dev--ready .sx-p { display: none; }
  .sx-dev--ready .sx-t { font-size: max(12px, .86em); line-height: 1.2; }
  .sx-dev--ready .sx-chip { position: absolute; right: calc(8 * var(--u)); top: 50%; transform: translateY(-50%); }
  .sx-wire { padding: 0; height: calc(24 * var(--u)); align-items: center; }
  .sx-station { flex: 1; grid-template-columns: calc(150 * var(--u)) 1fr; align-content: start; gap: calc(10 * var(--u)) calc(12 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(16 * var(--u)); }
  .sx-station .sx-art { width: calc(150 * var(--u)); }
  .sx-tags { gap: calc(5 * var(--u)); }
  .sx-offline { padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); gap: calc(4 * var(--u)) calc(10 * var(--u)); }
  .sx-offline__ico { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
  .sx-q { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

  /* 궤도 위의 화면들 — 카드 없이 기기만 떠 있다 */
  .sx-obj { border: 0; background: none; padding: 0; border-radius: calc(18 * var(--u)); margin: 0; }
  .sx-obj:hover, .sx-obj.is-sel { box-shadow: none; }
  .sx-obj .sx-art { transition: filter .3s ease; filter: drop-shadow(0 calc(18 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .7)); }
  .sx-obj:hover .sx-art, .sx-obj.is-sel .sx-art { filter: drop-shadow(0 0 calc(18 * var(--u)) rgba(41, 151, 255, .55)); }
  .sx-scr { gap: calc(12 * var(--u)); }
  .sx-scr .sx-art { width: calc(92 * var(--u)); }
  .sx-scr--driver { grid-template-columns: 1fr calc(92 * var(--u)); align-items: start; }
  .sx-scr--driver .sx-art { order: 2; }
  .sx-scr--driver .sx-scr__txt { text-align: right; margin-top: calc(10 * var(--u)); }
  .sx-scr--owner, .sx-scr--console { grid-template-columns: 1fr; justify-items: center; text-align: center; align-content: start; }
  .sx-scr--console .sx-art { width: calc(260 * var(--u)); }
  .sx-scr__txt { padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(0, 0, 0, .55); }

  .sx-ext { grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)); }
  .sx-ext__card { height: calc(150 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(16 * var(--u)); }
  .sx-ext__card .sx-art { width: calc(52 * var(--u)); height: calc(40 * var(--u)); }

  /* 선 위의 이름표 — ★글자만(칩과 모양을 가른다). 검은 후광으로 선을 끊어 읽히게 한다 */
  .sx-lbl { display: block; position: absolute; left: calc(var(--cx) * var(--u)); top: calc(var(--cy) * var(--u)); transform: translate(-50%, -50%);
    z-index: 1; white-space: nowrap; font-size: max(12px, .9em); font-weight: 600; line-height: 1.25; padding: .12em .45em; border-radius: 6px;
    color: #eed6ff; background: #000; box-shadow: 0 0 calc(10 * var(--u)) calc(4 * var(--u)) #000; transition: opacity .3s ease; }
  .sx-lbl--batch { color: #bfe0ff; font-weight: 500; }
  .sx-lbl--wire { color: #e5e5ea; }
  .sx-lbl--ready { color: #c7c7cc; font-weight: 500; }
  .sx-lbl--key { cursor: pointer; text-align: left; font-size: .9em; padding: .55em 1em; border-radius: calc(14 * var(--u)); color: #fff; z-index: 3;
    border: 1px solid rgba(41, 151, 255, .75); background: linear-gradient(135deg, rgba(41, 151, 255, .34), rgba(8, 12, 22, .96) 70%);
    box-shadow: 0 0 calc(30 * var(--u)) rgba(41, 151, 255, .38); }
  .sx-lbl--key b { display: block; font-size: 1.14em; }
  .sx-lbl--key span { display: block; color: #a9cff5; font-size: max(12px, .9em); font-weight: 500; margin-top: .12em; }

  /* 안내판 */
  .sx-info { display: block; z-index: 4; padding: calc(12 * var(--u)) calc(15 * var(--u)); border-radius: calc(16 * var(--u));
    border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(10, 10, 12, .86);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: max(12px, .9em); line-height: 1.5; color: var(--text-muted); }
  .sx-info[hidden] { display: none; }
  .sx-info b { display: block; color: #fff; font-size: 1.1em; margin-bottom: .2em; }
  .sx-info__k { display: block; color: var(--accent); font-size: max(12px, .86em); font-weight: 700; margin-bottom: .25em; }
  .sx-info__hint { display: block; color: #c7c7cc; }
  .sx-info ul { list-style: none; margin: .55em 0 0; padding: .5em 0 0; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: .25em; }
  .sx-info li { color: #d2d2d7; }
  .sx-info li i { font-style: normal; font-weight: 700; margin-right: .3em; color: #e5c2ff; }
  .sx-info li i.is-ledger { color: #8cc8ff; }
  .sx-info li em { font-style: normal; color: var(--text-muted); }

  /* 강조: 고른 노드와 그 이웃만 남기고 흐리게. ★스테이션 태그·끊김 카드도 같은 규칙으로 흐린다 */
  .has-sel .sx-node:not(.is-sel):not(.is-near), .has-sel .sx-lbl:not(.is-near):not(.is-sel) { opacity: .28; }
  .has-sel .sx-offline:not(:has(.is-sel, .is-near)) { opacity: .28; }
  .has-sel .sx-station:not(.is-sel) .sx-tag:not(.is-rel) { opacity: .3; }
  .has-sel .sx-ln:not(.is-on) { opacity: .1; }

  /* 한눈에 요약 — 4열 */
  .sx-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1280px; margin: 14px auto 0; }
  .sx-sum__col { padding: 18px 18px 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(22, 22, 23, .6); }
  .sx-sum__col--in { border-top: 3px solid rgba(255, 255, 255, .5); }
  .sx-sum__col--link { border-top: 3px solid #2997ff; }
  .sx-sum__col--out { border-top: 3px solid #bf5af2; }
  .sx-sum__col--ext { border-top: 3px solid rgba(255, 255, 255, .28); }
  .sx-sum h3 { margin: 0 0 10px; font-size: 15px; color: #fff; letter-spacing: -.02em; }
  .sx-sum ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .sx-sum li { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
  .sx-sum li b { color: #e5e5ea; font-weight: 600; margin-right: 5px; }
  .sx-sum li .sx-chip { font-size: 12px; padding: 0 .5em; margin-right: 5px; }
  .sx-sum li span:last-child { display: block; }
  .sx-text__cols { grid-template-columns: repeat(4, 1fr); }
}

/* ── 선(SVG) ── */
.sx-ln { transition: opacity .3s ease; }
.sx-core { fill: none; stroke-linecap: round; }
.sx-glow { fill: none; stroke: #2997ff; stroke-width: 18; stroke-opacity: .17; stroke-linecap: round; }
.sx-ln--ledger .sx-core { stroke: url(#sx-g-ledger); stroke-width: 5.5; }
.sx-ln--batch .sx-core { stroke: rgba(140, 200, 255, .72); stroke-width: 1.4; }
.sx-ln--view .sx-core { stroke: #bf5af2; stroke-width: 1.9; stroke-opacity: .7; }
.sx-ln--wire .sx-core { stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.sx-ln--ready .sx-core { stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; stroke-dasharray: 5 5; }
.sx-ln.is-on .sx-core { stroke-opacity: 1; }
.sx-ln--view.is-on .sx-core { stroke-width: 2.6; }
.sx-ring { fill: none; stroke: rgba(255, 255, 255, .1); }
.sx-ring--pulse { stroke: #8cc8ff; stroke-width: 2; stroke-opacity: 0; }
/* ★혜성(흐르는 빛)은 실선 위에만 얹는다. 멈추면 숨는다 — 점선처럼 보여 «준비» 와 헷갈리지 않게 */
.sx-comet { fill: none; stroke-linecap: round; stroke-dasharray: 14 200; stroke-dashoffset: 14; }
.sx-comet--ledger { stroke: #fff; stroke-width: 5; filter: drop-shadow(0 0 7px #8cc8ff); }
.sx-comet--view { stroke: #f7e8ff; stroke-width: 4.2; filter: drop-shadow(0 0 6px #bf5af2); }
.sx-cut { opacity: 0; transition: opacity .3s; }
.is-offline .sx-cut { opacity: 1; }
.is-offline [data-id="ledger"] .sx-core { stroke: #5a5f68; stroke-dasharray: 7 9; }
.is-offline [data-id="ledger"] .sx-glow, .is-offline [data-id="relay"], .is-offline [data-id="batch"] { opacity: .08; }
.is-offline .sx-comet { visibility: hidden; }

/* ── 6초 순환 하나: 레인 카메라 번쩍 → 원장 선을 따라 빛 덩이 → 원 → 보라 덩이가 화면·MES 로 ──
 * ★멈춘 상태(JS 없음 · 화면 밖 · 움직임 줄이기)는 0% 프레임 = 평소 그림이다. */
.sx-lane__flash, .sx-lane__fov, .sx-lane__led, .sx-lane__lpr, .sx-comet--ledger, .sx-comet--view,
.sx-ring--pulse, .sx-rownew, .sx-notif, .sx-ping, .sx-hub::before {
  animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; }
.sx-lane__flash { animation-name: sx-flash; }
.sx-lane__fov { animation-name: sx-fov; }
.sx-lane__led { animation-name: sx-led; }
.sx-lane__lpr { animation-name: sx-lpr; }
.sx-comet--ledger { animation-name: sx-go-ledger; }
.sx-comet--view { animation-name: sx-go-view; }
.sx-ring--pulse { animation-name: sx-pulse; }
.sx-hub .sx-rownew { animation-name: sx-row-hub; }
.sx-station .sx-rownew { animation-name: sx-row-st; }
.sx-scr--console .sx-rownew, .sx-ping { animation-name: sx-row-out; }
.sx-notif { animation-name: sx-notif; }
.sx-hub::before { animation-name: sx-halo; }
.is-live .sx-lane__flash, .is-live .sx-lane__fov, .is-live .sx-lane__led, .is-live .sx-lane__lpr, .is-live .sx-comet,
.is-live .sx-ring--pulse, .is-live .sx-rownew, .is-live .sx-notif, .is-live .sx-ping, .is-live .sx-hub::before { animation-play-state: running; }
@keyframes sx-flash { 0%, 1% { opacity: 0; } 3% { opacity: 1; } 11%, 100% { opacity: 0; } }
@keyframes sx-fov { 0%, 1% { filter: none; } 3% { filter: brightness(2.4); } 12%, 100% { filter: none; } }
@keyframes sx-led { 0%, 1% { fill: #7cc4ff; } 3% { fill: #fff; } 10%, 100% { fill: #7cc4ff; } }
@keyframes sx-lpr { 0%, 3% { box-shadow: none; } 6% { box-shadow: 0 0 0 2px rgba(124, 196, 255, .55), 0 0 18px rgba(124, 196, 255, .6); } 16%, 100% { box-shadow: none; } }
@keyframes sx-row-st { 0%, 5% { filter: none; } 8% { filter: brightness(2.2); } 16%, 100% { filter: none; } }
@keyframes sx-go-ledger { 0%, 9% { stroke-dashoffset: 14; } 38%, 100% { stroke-dashoffset: -100; } }
@keyframes sx-pulse { 0%, 37% { stroke-opacity: 0; stroke-width: 2; } 41% { stroke-opacity: .95; stroke-width: 6; } 56%, 100% { stroke-opacity: 0; stroke-width: 2; } }
@keyframes sx-row-hub { 0%, 38% { filter: none; } 42% { filter: brightness(2); } 52%, 100% { filter: none; } }
@keyframes sx-halo { 0%, 38% { opacity: .8; } 44% { opacity: 1; } 58%, 100% { opacity: .8; } }
@keyframes sx-go-view { 0%, 46% { stroke-dashoffset: 14; } 72%, 100% { stroke-dashoffset: -100; } }
@keyframes sx-row-out { 0%, 70% { filter: none; } 74% { filter: brightness(2.2); } 84%, 100% { filter: none; } }
@keyframes sx-notif { 0%, 58% { opacity: 1; transform: none; } 62%, 69% { opacity: 0; transform: translateY(-6px); } 74%, 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sx *, .sx *::before, .sx *::after { animation: none !important; transition: none !important; }
  .sx-comet { display: none; }
}

/* ── 좁은 화면 ── */
@media (max-width: 759px) {
  .sx__wrap { width: min(100% - 32px, 1320px); }
  .sx__head { text-align: left; }
  .sx__lead { margin-left: 0; }
  .sx-stage { font-size: 13.5px; }
  .sx-hub { grid-template-columns: 92px 1fr; padding: 16px; }
  .sx-hub__art { width: 92px; height: 92px; }
  .sx-hub__t { font-size: 1.7em; }
  .sx-grp { padding-left: 26px; }
  .sx-station { grid-template-columns: 100px 1fr; }
  .sx-station .sx-art { width: 100px; }
  .sx-dev { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
  .sx-devs li:last-child .sx-dev { flex-direction: row; align-items: center; }
  .sx-scr { grid-template-columns: 62px 1fr; }
  .sx-scr .sx-art { width: 62px; }
  .sx-scr--console { grid-template-columns: 112px 1fr; }
  .sx-scr--console .sx-art { width: 112px; }
  .sx-foot { grid-template-columns: 1fr; padding: 20px 18px; }
  .sx-foot__msg, .sx-legend, .sx-stats, .sx-src { grid-column: 1; grid-row: auto; }
  .sx-stats { grid-template-columns: repeat(2, 1fr); }
  .sx-legend li { grid-template-columns: 34px 1fr; }
  .sx-legend small { grid-column: 2; margin-top: -6px; }
  .sx-lg { width: 34px; }
  .sx-text__cols { padding: 2px 16px 18px; }
  .sx-text ol { font-size: 14px; }
}
@media (max-width: 380px) {
  .sx-mini { font-size: 12px; gap: 4px; }
  .sx-mini__n { padding: 6px 7px; }
}

/* ══════════════ 작동 방식 — 차량 한 대의 여정 (#how) ══════════════
 * ★구조도와 바탕을 가른다: 구조도는 가운데 파란 발광 + 점 격자, 여기는 아래로 깔린 «길» 빛 + 가는 가로결.
 * ★넓은 화면의 길: 윗줄 01→04, 오른쪽에서 돌아 아랫줄 05→08(오른쪽에서 왼쪽). 줄 높이를 같게(1fr)
 *   두어 04 의 돌림 곡선이 정확히 05 의 원에 닿는다. */
#how.jr { position: relative; isolation: isolate; background: #050506; }
.jr__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(ellipse 36% 30% at 34% 78%, rgba(41, 151, 255, .16), transparent 70%),
  radial-gradient(ellipse 40% 30% at 86% 30%, rgba(191, 90, 242, .09), transparent 70%),
  linear-gradient(180deg, #000 0, transparent 18%), #050506; }
.jr__bg::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 42px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 80%, transparent); }
.jr__head { margin-bottom: clamp(28px, 3vw, 40px); }
.jr__head .shead__lead { text-wrap: balance; }
.jr-legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0 0 clamp(34px, 4vw, 56px); padding: 0; font-size: 14px; color: #c7c7cc; }
.jr-legend li { display: flex; align-items: center; gap: 8px; }
.jr-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.jr-dot--ledger { background: #2997ff; box-shadow: 0 0 10px rgba(41, 151, 255, .9); }
.jr-dot--view { background: #bf5af2; }

.jr-list { --node: 58px; --gx: 26px; --gy: 54px; --line: rgba(255, 255, 255, .2);
  position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.jr-step { position: relative; padding-left: calc(var(--node) + 18px); min-width: 0; }
.jr-node { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%;
  color: #e5e5ea; background: radial-gradient(circle at 35% 30%, #2a2c32, #121316 70%); border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); }
.jr-step--view .jr-node { color: #e5c2ff; border-color: rgba(191, 90, 242, .55); background: radial-gradient(circle at 35% 30%, #2d2140, #120f18 70%); }
.jr-step--ledger .jr-node { color: #fff; border: 2px solid #8cc8ff; background: radial-gradient(circle at 35% 30%, #1d5fb8, #0a1a36 72%);
  box-shadow: 0 0 0 6px rgba(41, 151, 255, .14), 0 0 34px rgba(41, 151, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .3); }
.jr-no { display: block; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #8e8e93; padding-top: 4px; font-variant-numeric: tabular-nums; }
.jr-step--view .jr-no { color: #c99bff; }
.jr-step--ledger .jr-no { color: #8cc8ff; }
.jr-title { margin: 3px 0 6px; font-size: 19px; letter-spacing: -.03em; color: #fff; }
.jr-step--ledger .jr-title { background: linear-gradient(90deg, #fff, #9ccfff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.jr-body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.jr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.jr-who, .jr-ready { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.jr-who { color: #d2d2d7; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); }
.jr-step--view .jr-who { color: #e5c2ff; background: rgba(191, 90, 242, .12); border-color: rgba(191, 90, 242, .4); }
.jr-step--ledger .jr-who { color: #fff; background: rgba(41, 151, 255, .24); border-color: rgba(41, 151, 255, .65); }
.jr-ready { color: #d1d1d6; border: 1px dashed rgba(255, 255, 255, .5); }
/* 원장 확정 칸 — 유리 판 한 장을 뒤에 깐다 */
.jr-step--ledger::after { content: ""; position: absolute; z-index: -1; inset: -14px -14px -14px -14px; border-radius: 20px;
  border: 1px solid rgba(41, 151, 255, .35); background: linear-gradient(160deg, rgba(41, 151, 255, .14), rgba(41, 151, 255, .02) 70%); }

/* 좁은 화면: 세로 타임라인 — 원과 원을 세로 선이 잇는다 */
.jr-step:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: var(--node); width: 2px;
  height: calc(100% - var(--node) + 30px); background: linear-gradient(180deg, var(--line), rgba(255, 255, 255, .08)); }
.jr-step:nth-child(6)::before { background: linear-gradient(180deg, rgba(191, 90, 242, .6), #2997ff); }
.jr-step:nth-child(7)::before { background: linear-gradient(180deg, #2997ff, rgba(191, 90, 242, .6)); }

/* 길의 방향 표지(꺾쇠) — 선 가운데에 하나씩 */
.jr-arrow { position: absolute; z-index: 1; width: 9px; height: 9px; margin: -5px 0 0 -5px; border: solid rgba(255, 255, 255, .7); border-width: 0 2px 2px 0;
  left: calc(var(--node) / 2 + 1px); top: calc(var(--node) + (100% - var(--node) + 30px) / 2); transform: rotate(45deg); }
.jr-step:nth-child(6) .jr-arrow { border-color: #8cc8ff; }
.jr-step:nth-child(7) .jr-arrow { border-color: #e5c2ff; }

@media (max-width: 999px) {
  .jr-list { max-width: 640px; margin: 0 auto; }
  .jr-step--ledger::after { inset: -12px -10px -12px -10px; }
}

@media (min-width: 1000px) {
  .jr-list { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; column-gap: var(--gx); row-gap: var(--gy); padding-right: 44px; }
  .jr-step { padding: calc(var(--node) + 16px) 6px 0 0; }
  .jr-step:nth-child(-n + 4) { grid-row: 1; }
  .jr-step:nth-child(5) { grid-area: 2 / 4; }
  .jr-step:nth-child(6) { grid-area: 2 / 3; }
  .jr-step:nth-child(7) { grid-area: 2 / 2; }
  .jr-step:nth-child(8) { grid-area: 2 / 1; }
  /* 이웃 원까지 잇는 가로 선 — 윗줄은 오른쪽으로, 아랫줄은 왼쪽으로 */
  .jr-step:not(:last-child)::before { top: calc(var(--node) / 2 - 1px); height: 2px; left: calc(var(--node) / 2); width: calc(100% + var(--gx));
    background-color: var(--line); background-image: linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%);
    background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0; }
  .jr-step:nth-child(n + 5):not(:last-child)::before { left: calc(var(--node) / 2 - 100% - var(--gx)); background-position: 0 0; }
  .jr-step:nth-child(6)::before { background-color: rgba(41, 151, 255, .75); }
  .jr-step:nth-child(7)::before { background-color: rgba(191, 90, 242, .7); }
  .jr-step:nth-child(4)::before { display: none; }
  /* 04 → 05: 오른쪽으로 나가 돌아 내려오는 길 */
  .jr-step:nth-child(4)::after { content: ""; position: absolute; left: calc(var(--node) / 2); top: calc(var(--node) / 2 - 1px);
    width: calc(100% - var(--node) / 2 + 30px); height: calc(100% + var(--gy)); border: 2px solid var(--line); border-left: 0;
    border-radius: 0 64px 64px 0; pointer-events: none; }
  .jr-step--ledger::after { inset: -16px -12px -16px -16px; }
  .jr-arrow { top: calc(var(--node) / 2); left: calc(var(--node) / 2 + (100% + var(--gx)) / 2); transform: rotate(-45deg); }
  .jr-step:nth-child(n + 5) .jr-arrow { left: calc(var(--node) / 2 - (100% + var(--gx)) / 2); transform: rotate(135deg); }
  .jr-step:nth-child(4) .jr-arrow { left: calc(100% + 29px); top: calc(var(--node) / 2 + (100% + var(--gy)) / 2); transform: rotate(45deg); }
}

/* 차례로 밝히기 — 6.4초에 한 바퀴. 멈춘 상태(0%)는 평소 그림 */
.jr-node, .jr-step::before, .jr-step:nth-child(4)::after { animation: 6.4s linear infinite paused; animation-delay: calc(var(--i) * .8s); }
.jr-node { animation-name: jr-lit; }
.jr-step--ledger .jr-node { animation-name: jr-lit-key; }
.jr-step:nth-child(4)::after { animation-name: jr-turn; animation-delay: 2.8s; }
.is-live .jr-node, .is-live .jr-step::before, .is-live .jr-step:nth-child(4)::after { animation-play-state: running; }
@keyframes jr-lit { 0%, 100% { transform: none; filter: none; } 3% { transform: scale(1.1); filter: brightness(1.6) drop-shadow(0 0 12px rgba(140, 200, 255, .8)); } 13% { transform: none; filter: none; } }
@keyframes jr-lit-key { 0%, 100% { transform: none; filter: none; } 3% { transform: scale(1.14); filter: brightness(1.5) drop-shadow(0 0 22px #2997ff); } 16% { transform: none; filter: none; } }
@keyframes jr-turn { 0%, 100% { border-color: var(--line); } 4% { border-color: rgba(255, 255, 255, .9); } 12% { border-color: var(--line); } }
@media (min-width: 1000px) {
  .jr-step::before { animation-name: jr-sweep; }
  .jr-step:nth-child(n + 5)::before { animation-name: jr-sweep-back; }
}
@keyframes jr-sweep { 0% { background-position: 100% 0; } 11%, 100% { background-position: 0 0; } }
@keyframes jr-sweep-back { 0% { background-position: 0 0; } 11%, 100% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .jr *, .jr *::before, .jr *::after { animation: none !important; }
}