/* 기술 인포그래픽 02·03·04·05·06·07·08 무대(10/22 개편). style.css 는 그대로 두고 여기서 덮어쓴다 */

/* ═══════════ 스튜디오 무대(.its) — 기술 인포그래픽 공통 ═══════════
   짙은 남색 무대 위에 실사 렌더(SEM 화풍 · 소재 사진)를 놓고 글자 · 지시선 · 번호는 HTML/SVG 로 겹친다.
   움직임은 info-tech.js: .armed(준비) → 화면에 들어오면 .go(차례로 쌓임) → .done(쌓임 끝) / 벗어나면 .off(멈춤)
   움직임 줄이기 · 스크립트 없음 · 인쇄 → 다 쌓인 정지 그림 */
.its{--ink:#EEF4FA;--tx:#B5C7DA;--mu:#8098B2;--ln:rgba(196,218,240,.62);--ga:#5CB8FF;--ta:#B48CFF;--gr:#97A4B4;--ac:#7CC1F5;
  position:relative;max-width:1120px;margin:0 auto;border-radius:26px;overflow:hidden;color:var(--tx);isolation:isolate;
  background:radial-gradient(85% 75% at 26% 16%,#14294F 0%,#0B1A38 44%,#060E20 100%);
  box-shadow:0 30px 70px rgba(6,14,32,.22),0 2px 6px rgba(6,14,32,.12)}
.its::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.07);pointer-events:none;z-index:40}
.its-top{position:absolute;left:0;right:0;top:0;z-index:25;display:flex;justify-content:flex-end;align-items:center;gap:12px;
  padding:22px 26px 0;pointer-events:none}
.its-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:#C3D6E8;padding:6px 10px 5px;border-radius:999px;line-height:1;
  background:rgba(8,18,40,.55);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.its-cv{font-size:11.5px;font-weight:600;line-height:1;color:#D2DDE8;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(8,18,40,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.its-st{position:relative}
.its-vis{position:relative;aspect-ratio:16/9}
.its-note{position:relative;z-index:5;margin:0;padding:4px 28px 24px;font-size:12.5px;line-height:1.6;color:var(--mu);text-align:center}
.its .dot{width:8px;height:8px;margin:0 5px 0 1px;vertical-align:0}
.its .dot.b{background:var(--ga)}.its .dot.v{background:var(--ta)}.its .dot.g{background:var(--gr);width:8px;height:8px}

/* 배경 그림(무대 전체) · 그 위 좌표 SVG(그림과 같은 비율, slice = object-fit:cover) */
.its-bg{position:absolute;inset:0;overflow:hidden;z-index:1}
.its-bg picture,.its-bg img{display:block;width:100%;height:100%}
.its-bg img{object-fit:cover;transform-origin:30% 50%}
.its-ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* 확인 창: 앞은 또렷 → 오른쪽 확대 창 쪽으로 남색에 스며듦 */
.its-fade .its-bg{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 30%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.12) 70%,transparent 84%);
  mask-image:linear-gradient(90deg,#000 0,#000 30%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.12) 70%,transparent 84%)}
.its-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,14,32,.55) 0,rgba(6,14,32,0) 22%,rgba(6,14,32,0) 70%,rgba(6,14,32,.7) 100%)}

/* 겨누는 틀(레티클) */
.its-ret rect,.its-ret path{fill:none;stroke:#E3EEF8;stroke-width:1.6;vector-effect:non-scaling-stroke}
.its-ret rect{stroke:rgba(227,238,248,.5);stroke-dasharray:1;stroke-dashoffset:0}
.its-ret path{stroke-width:2.2}

/* 확대 창 */
.its-lens{position:absolute;left:47%;top:8%;width:32%;height:84%;z-index:8;border-radius:18px;overflow:hidden;background:#050B18;
  box-shadow:0 0 0 1px rgba(220,233,246,.3),0 28px 64px rgba(0,0,0,.5)}
.its-lens>picture,.its-lens>picture img{display:block;width:100%;height:100%}
.its-lens>picture img{object-fit:cover}
.its-lens canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.its.live .its-lens canvas{display:block}
.its-lens::after{content:"";position:absolute;inset:10px;z-index:6;pointer-events:none;opacity:.75;
  --c:rgba(227,238,248,.9);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px 16px no-repeat}
.its-lens::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(4,9,20,.55) 100%)}

/* 지시선 · 확대 연결선 (info-tech.js 가 실제 자리를 재서 그림) */
.its-ln{position:absolute;inset:0;width:100%;height:100%;z-index:14;pointer-events:none;overflow:visible}
.its-ln path{fill:none;stroke:var(--ln);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0}
.its-ln path.cn{stroke:rgba(196,218,240,.4)}
.its-ln circle{fill:#E3EEF8}
.its-ln circle.cn{fill:none;stroke:none}

/* 이름표: 넓은 화면은 무대 위(유리 카드 + 지시선), 좁은 화면은 무대 아래 목록 */
.its-cal{position:absolute;inset:0;z-index:16;pointer-events:none;margin:0}
.its-cal li{position:absolute;left:var(--x);top:var(--y);width:var(--w);pointer-events:auto;display:flex;gap:11px;align-items:flex-start;
  padding:12px 14px 13px;border-radius:14px;outline:none;cursor:default;
  background:rgba(7,16,36,.56);border:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);
  transition:background .3s,border-color .3s,box-shadow .3s}
.its-cal li:hover,.its-cal li:focus-visible,.its-cal li.on{background:rgba(14,30,62,.74);border-color:rgba(124,193,245,.45);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.its-cal li:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.its-n{flex:none;margin-top:2px;padding:3px 6px 2px;border-radius:6px;background:#DCE9F6;color:#0B1A38;
  font-family:var(--mono);font-size:11px;font-weight:700;line-height:1.25;letter-spacing:.04em}
.its-cal p{margin:0;font-size:13.5px;line-height:1.58;color:var(--tx)}
.its-cal b{display:block;margin-bottom:3px;font-size:16px;line-height:1.35;color:#fff;letter-spacing:-.01em}
.its-cal .ky{display:block;padding-left:15px;text-indent:-15px}
.its-cal .ky+.ky{margin-top:2px}
/* 무대 위 번호표(좁은 화면에서만 — 아래 목록과 짝) */
.its-mk{display:none}
/* 번호표 층은 분자 캔버스보다 위(분자가 번호표 위로 지나가지 않게) */
.its .its-lens .its-ov.its-mks,.its .its-bg .its-ov.its-mks{z-index:4;pointer-events:none}
.its-mk rect{fill:#DCE9F6}
.its-mk text{font-family:var(--mono);font-size:36px;font-weight:700;fill:#0B1A38;text-anchor:middle;dominant-baseline:central}

/* 강조(이름표에 마우스 · 초점) — data-hl 에 번호 */
.its-bg,.its-lens,.its-ret,.its-pr,.its-sm{transition:opacity .45s ease,filter .45s ease}
.its[data-hl] .its-ln path:not(.cn){opacity:.35}
.its[data-hl] .its-ln path[data-k]{transition:opacity .3s}
.its[data-hl="1"] .its-ln path[data-k="1"],.its[data-hl="2"] .its-ln path[data-k="2"],.its[data-hl="3"] .its-ln path[data-k="3"]{opacity:1;stroke:#E3EEF8}

/* ── 움직임 ── */
.its-bg{transition:opacity 1.3s ease-out,transform 2.4s var(--ease),filter .45s ease}
.its.armed:not(.go) .its-bg{opacity:0;transform:scale(1.07)}
.its.armed:not(.go) .its-ret rect,.its.armed:not(.go) .its-ret path{stroke-dashoffset:1}
.its-ret path{stroke-dasharray:1}
.its-ret rect,.its-ret path{transition:stroke-dashoffset .9s var(--ease) .55s}
.its-lens{transition:opacity .9s ease-out 1.05s,transform 1.3s var(--ease) 1.05s,clip-path 1.3s var(--ease) 1.05s,filter .45s ease}
.its.armed:not(.go) .its-lens{opacity:0;transform:translateX(-6%) scale(.9);clip-path:inset(46% 0 46% 0 round 18px)}
.its-lens>picture img{transition:transform 2.2s var(--ease) 1.05s}
.its.armed:not(.go) .its-lens>picture img{transform:scale(1.35)}
.its-cal li{transition:opacity .7s ease-out calc(1.75s + var(--k,0) * .18s),transform .9s var(--ease) calc(1.75s + var(--k,0) * .18s),
  background .3s,border-color .3s,box-shadow .3s}
.its.armed:not(.go) .its-cal li{opacity:0;transform:translateY(12px)}
.its-ln path{transition:stroke-dashoffset 1s var(--ease) var(--d,0s),opacity .3s}
.its.armed:not(.go) .its-ln path{stroke-dashoffset:1}
.its-ln circle{transition:opacity .5s ease-out var(--d,0s)}
.its.armed:not(.go) .its-ln circle{opacity:0}
.its.done *{transition-delay:0s!important}
/* 느린 다가가기: 그림과 겨누는 틀을 함께, 틀 가운데를 축으로 (연결선이 어긋나지 않게) */
.its-bg>picture,.its-bg>.its-ov{transform-origin:var(--kb,30% 49%)}
.its.go .its-bg>picture,.its.go .its-bg>.its-ov{animation:its-kb 26s ease-in-out 2.4s infinite alternate}
@keyframes its-kb{to{transform:scale(1.06)}}
.its.off *{animation-play-state:paused!important}
/* 스크롤 깊이감: 배경은 느리게, 창 · 이름표는 조금 더 (JS 가 --sp -1~1) */
.its-bg{translate:0 calc(var(--sp,0) * 16px)}
.its-lens{translate:0 calc(var(--sp,0) * -12px)}
.its-cal li{translate:0 calc(var(--sp,0) * -6px)}

/* ═══════════ 02 — 섬유 매트 → 섬유 표면 미세공 ═══════════ */
.its-02 .its-pr circle{fill:none;stroke:#D9C8FF;stroke-width:2.4;opacity:.9}
.its-02 .its-pr{opacity:0}
.its-02[data-hl="2"] .its-pr{opacity:1}
.its-02[data-hl="1"] .its-lens{opacity:.4;filter:saturate(.6)}
.its-02[data-hl="2"] .its-bg,.its-02[data-hl="3"] .its-bg{opacity:.35}
.its-02[data-hl="1"] .its-bg{filter:brightness(1.18)}
.its.live .its-sm .m{opacity:0;transition:opacity .6s}
.its.go .its-ref{animation:its-bob 5s ease-in-out infinite alternate}
@keyframes its-bob{to{transform:translate(10px,6px)}}
.its-ref,.its-ref *{transform-box:fill-box}

/* ═══════════ 05 — ZIF-8 결정이 담지된 섬유 → 결정 격자(소달라이트 우리) ═══════════ */
.its-05 .its-lens{background:#060D1F}
/* 확대 창 바탕: 겨눈 결정 자리를 4배로 흐리게(무대가 화면에 들어올 때 불러옴 — .go · 움직임 줄이기는 .still) */
.its-zoom{position:absolute;inset:0;transform:scale(1.08);filter:blur(7px) brightness(.42) saturate(.8);
  background:#060D1F no-repeat 22.8% 49%/400% auto}
.its-05.go .its-zoom,.its-05.still .its-zoom{background-image:url(../img/it-05-mof-960.webp);
  background-image:image-set(url(../img/it-05-mof-960.avif) type("image/avif"),url(../img/it-05-mof-960.webp) type("image/webp"))}
.its-05 .its-zoom{transition:transform 2.2s var(--ease) 1.05s}
.its-05.armed:not(.go) .its-zoom{transform:scale(1.4)}
.its-05 .its-lens .its-ov{z-index:2}
.its-05 .its-lens canvas{z-index:3}
.its-05.live .its-cage{opacity:0}
.its-05[data-hl="1"] .its-lens,.its-05[data-hl="2"] .its-lens{opacity:.4;filter:saturate(.6)}
.its-05[data-hl="3"] .its-bg{opacity:.35}
.its-05[data-hl="1"] .its-bg,.its-05[data-hl="2"] .its-bg{filter:brightness(1.15)}

/* ═══════════ 03 — 두 시료 나란히(입상활성탄 · 섬유 단면), 같은 빠르기의 분자 ═══════════ */
.its-defs{position:absolute;width:0;height:0;overflow:hidden}
.its-03,.its-04{background:linear-gradient(180deg,#0D1E40 0%,#0A1733 46%,#060E20 100%)}
.its-duo{position:relative;display:grid;grid-template-columns:1fr 1fr}
.its-sp{position:relative;transition:opacity .45s ease,filter .45s ease}
.its-sp-im{position:relative;aspect-ratio:1/.86;overflow:hidden}
.its-sp-im>picture,.its-sp-im img{display:block;width:100%;height:100%}
.its-sp-im img{object-fit:cover}
.its-sp-im::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,14,32,.5) 0,rgba(6,14,32,0) 18%,rgba(6,14,32,0) 78%,rgba(6,14,32,.75) 100%)}
.its-sp+.its-vs+.its-sp .its-sp-im::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;z-index:3;
  background:linear-gradient(180deg,transparent,rgba(214,228,242,.28) 30%,rgba(214,228,242,.28) 70%,transparent)}
.its-vs{position:absolute;left:50%;top:0;margin-top:21.5%;z-index:6;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;color:#0B1A38;background:#DCE9F6;
  padding:8px 10px 7px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.its-sp-tag{position:absolute;left:18px;bottom:16px;z-index:4;font-size:12px;font-weight:600;letter-spacing:.04em;color:#D6E4F2;
  padding:6px 10px 5px;border-radius:999px;line-height:1;background:rgba(8,18,40,.6);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.its-sp-t{margin:0;padding:18px 30px 4px;font-size:14.5px;line-height:1.65;color:var(--tx)}
.its-sp-t b{display:block;margin-bottom:4px;font-size:17px;color:#fff;letter-spacing:-.01em}
.its-sp-im .its-ov{z-index:2}
.its-net path{fill:none;stroke:rgba(150,205,255,.4);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.its-rt{fill:none;stroke:rgba(150,205,255,.3);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:5 11}
.its-pth{fill:none;stroke:#86CBFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 0}
.its-sp .rg{fill:none;stroke:#D9C8FF;stroke-width:3}
.its-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:0;padding:18px 24px 4px;font-size:13.5px;color:var(--tx)}
.its-keys li{display:flex;align-items:center;gap:8px}
.its-kl{display:inline-block;width:24px;height:0;border-top:3px dashed rgba(150,205,255,.7)}
.its-03[data-hl="1"] .its-sp[data-f="2"],.its-03[data-hl="2"] .its-sp[data-f="1"]{opacity:.42;filter:saturate(.6)}
.its-03.live .its-sm .m{opacity:0}
/* 움직임: 두 시료가 양쪽에서 → VS → 통로가 그려짐 → 분자 출발 */
.its-03 .its-sp{transition:opacity .9s ease-out,transform 1.1s var(--ease),filter .45s ease}
.its-03 .its-sp[data-f="2"]{transition-delay:.18s,.18s,0s}
.its-03.armed:not(.go) .its-sp[data-f="1"]{opacity:0;transform:translateX(-36px)}
.its-03.armed:not(.go) .its-sp[data-f="2"]{opacity:0;transform:translateX(36px)}
.its-03 .its-vs{transition:opacity .6s ease-out .7s,transform .8s var(--ease) .7s}
.its-03.armed:not(.go) .its-vs{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.its-03 .its-net path{transition:stroke-dashoffset 1.4s var(--ease) 1s}
.its-03.armed:not(.go) .its-net path{stroke-dashoffset:1}
.its-03 .its-keys,.its-03 .its-sp-t{transition:opacity .8s ease-out 1.1s}
.its-03.armed:not(.go) .its-keys,.its-03.armed:not(.go) .its-sp-t{opacity:0}
.its-03.armed:not(.go) .its-pth{stroke-dasharray:0 1}

/* ═══════════ 04 — 공정 레일: 시료 여섯 장 + 레일을 따라 흐르는 빛(9.6초에 한 바퀴, 단계마다 1.6초) ═══════════ */
.its-04{padding-top:78px}
.its-proc{--gap:18px;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 var(--gap);margin:0;padding:0 30px}
.its-proc li{position:relative;display:flex;flex-direction:column;outline:none;cursor:default;
  transition:opacity .7s ease-out calc(.15s + var(--k) * .14s),transform .9s var(--ease) calc(.15s + var(--k) * .14s)}
.its-pn{position:relative;z-index:2;align-self:center;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font-family:var(--mono);font-size:11px;font-weight:700;color:#0B1A38;background:#DCE9F6;box-shadow:0 0 0 5px #0B1938}
.its-proc li.io .its-pn{width:14px;height:14px;margin:8px 0;background:#0B1938;box-shadow:0 0 0 2px #DCE9F6,0 0 0 7px #0B1938}
.its-proc li:not(:last-child)::after{content:"";position:absolute;z-index:1;left:50%;top:15px;width:calc(100% + var(--gap));height:2px;margin-top:-1px;
  transform-origin:left center;transition:transform .7s var(--ease) calc(.55s + var(--k) * .14s);
  background:rgba(196,218,240,.2)}
.its-pi{margin-top:18px;border-radius:16px;overflow:hidden;aspect-ratio:1;background:#0A1226;
  box-shadow:0 0 0 1px rgba(220,233,246,.14),0 18px 40px rgba(0,0,0,.35);transition:box-shadow .4s,transform .5s var(--ease),filter .4s}
.its-pi picture,.its-pi img{display:block;width:100%;height:100%}
.its-pi img{object-fit:cover;transition:transform 1.4s var(--ease) calc(.2s + var(--k) * .14s)}
.its-pt{margin:14px 2px 0;font-size:13px;line-height:1.58;color:var(--tx)}
.its-pt b{display:block;margin-bottom:4px;font-size:16px;color:#fff;letter-spacing:-.01em}
.its-pt span{display:block}
.its-proc li:hover .its-pi,.its-proc li:focus-visible .its-pi,.its-proc li.on .its-pi{transform:translateY(-4px)}
.its-proc li:hover .its-pi::after,.its-proc li:focus-visible .its-pi::after,.its-proc li.on .its-pi::after{opacity:1;animation:none}
.its-proc li:focus-visible{outline:2px solid var(--ac);outline-offset:6px;border-radius:12px}
.its-04[data-hl] .its-proc li:not(.on){opacity:.5}
.its-04[data-hl] *{animation-play-state:paused!important}
/* 차례로 놓임 → 레일이 이어짐 */
.its-04.armed:not(.go) .its-proc li{opacity:0;transform:translateY(18px)}
.its-04.armed:not(.go) .its-proc li::after{transform:scaleX(0)}
.its-04.armed:not(.go) .its-pi img{transform:scale(1.14)}
/* 흐름: 레일 조각 k 는 [k, k+1]×1.6초에 빛이 지나가고, 그 끝 단계가 밝아짐 */
/* 빛 줄기(li::before): 레일 조각 길이의 30% 막대가 조각을 0.6초에 지나감 — 단계 k 에 1.0초 머문 뒤 출발 */
.its-proc li:not(:last-child)::before{content:"";position:absolute;z-index:1;left:50%;top:14px;width:calc((100% + var(--gap)) * .3);height:2px;
  pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(154,210,255,.9) 30%,#fff 50%,rgba(154,210,255,.9) 70%,transparent)}
.its-04.go .its-proc li:not(:last-child)::before{animation:its-streak 9.6s linear calc(2.4s + var(--k) * 1.6s) infinite}
@keyframes its-streak{0%,10.4%{opacity:0;transform:translateX(-50%)}11%{opacity:1}16%{opacity:1}16.6%,100%{opacity:0;transform:translateX(283%)}}
/* 마디 물결(.its-pn::after)과 시료 테두리(.its-pi::after)는 opacity · transform 만 */
.its-pn::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(124,193,245,.6);opacity:0;pointer-events:none}
.its-pi{position:relative}
.its-pi::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(124,193,245,.85);opacity:0;pointer-events:none}
.its-04.go .its-pn::after{animation:its-ring 9.6s ease-out calc(2.4s + var(--k) * 1.6s) infinite}
.its-04.go .its-pi::after{animation:its-lit 9.6s ease-in-out calc(2.4s + var(--k) * 1.6s) infinite}
@keyframes its-streakv{0%,10.4%{opacity:0;transform:translateY(-50%)}11%{opacity:1}16%{opacity:1}16.6%,100%{opacity:0;transform:translateY(283%)}}
@keyframes its-ring{0%{opacity:.9;transform:scale(1)}10%{opacity:0;transform:scale(1.9)}10.1%,100%{opacity:0;transform:scale(1)}}
@keyframes its-lit{0%{opacity:0}2%,11%{opacity:1}14%,100%{opacity:0}}
.its-04 .its-note{padding-top:22px}

/* ═══════════ 07 — 전기 재생 순환: 펠트 판 + 바닥 고리, 네 단계(data-ph 0~3 — info-tech.js) ═══════════ */
.its-07 .its-bg::after{background:linear-gradient(180deg,rgba(6,14,32,.35) 0,rgba(6,14,32,0) 16%,rgba(6,14,32,0) 82%,rgba(6,14,32,.6) 100%)}
.its-07 .its-bg canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:none}
.its-07.live .its-bg canvas{display:block}
.its-07 .its-bg .its-ov{z-index:2}
.its-heat{opacity:0;transition:opacity 1.4s ease}
.its-07[data-ph="1"] .its-heat{opacity:.3}
.its-07[data-ph="2"] .its-heat{opacity:.16}
.its-cur path{fill:none;stroke:#D6ECFF;stroke-width:2.2;stroke-dasharray:7 15;stroke-linecap:round;opacity:0;transition:opacity .6s ease}
.its-07[data-ph="1"] .its-cur path{opacity:.75;animation:its-flow .7s linear infinite}
@keyframes its-flow{to{stroke-dashoffset:-22}}
.its-shine .sw{transform:translateX(0)}
.its-07[data-ph="3"] .its-shine .sw{animation:its-shine 1.9s cubic-bezier(.45,0,.25,1) .1s both}
@keyframes its-shine{to{transform:translateX(1950px)}}
.its-rg0{fill:none;stroke:rgba(196,218,240,.16);stroke-width:2}
.its-arc{fill:none;stroke:rgba(159,211,255,.5);stroke-width:2.2}
.its-prog{fill:none;stroke:#CFE8FF;stroke-width:3;stroke-linecap:round;stroke-dasharray:0 1;opacity:.9}
.its-ctr{position:absolute;left:48.8%;top:44%;z-index:6;transform:translate(-50%,-50%);font-size:13px;font-weight:700;color:#EAF2FA;white-space:nowrap;
  padding:7px 12px;border-radius:999px;background:rgba(8,18,40,.55);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.its-cyc{position:absolute;inset:0;z-index:16;margin:0;pointer-events:none}
.its-cyc li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);pointer-events:auto;display:flex;align-items:center;gap:9px;white-space:nowrap;
  padding:8px 14px 8px 9px;border-radius:999px;font-size:15px;font-weight:700;color:#EAF2FA;outline:none;cursor:default;
  background:rgba(7,16,36,.62);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .45s,color .45s,border-color .45s,box-shadow .45s,opacity .7s ease-out calc(1.2s + var(--k) * .16s)}
.its-cyc li .its-n{margin:0}
.its-07[data-ph="0"] .its-cyc li[data-f="1"],.its-07[data-ph="1"] .its-cyc li[data-f="2"],.its-07[data-ph="2"] .its-cyc li[data-f="3"],.its-07[data-ph="3"] .its-cyc li[data-f="4"],
.its-cyc li:hover,.its-cyc li:focus-visible,.its-cyc li.on{background:#EAF2FA;color:#0B1A38;border-color:#EAF2FA;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.its-07[data-ph="0"] .its-cyc li[data-f="1"] .its-n,.its-07[data-ph="1"] .its-cyc li[data-f="2"] .its-n,.its-07[data-ph="2"] .its-cyc li[data-f="3"] .its-n,.its-07[data-ph="3"] .its-cyc li[data-f="4"] .its-n,
.its-cyc li:hover .its-n,.its-cyc li.on .its-n{background:#0B1A38;color:#EAF2FA}
.its-cyc li:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.its-07 .its-mk{display:none}
.its-now{display:none;position:absolute;left:14px;bottom:12px;z-index:7;margin:0;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;
  font-size:13px;color:#fff;background:#0F2A4A;box-shadow:0 8px 20px rgba(15,42,74,.25)}
.its-07 .its-now .its-n{background:#fff;color:#0F2A4A;margin:0}
.its-07 .its-mk.on rect{fill:#0071BB}
/* 등장: 판 → 고리가 그려짐 → 단계 이름표 차례로 */
.its-07 .its-ring{transition:opacity 1.2s ease-out .6s}
.its-07.armed:not(.go) .its-ring{opacity:0}
.its-07.armed:not(.go) .its-cyc li,.its-07.armed:not(.go) .its-ctr{opacity:0}
.its-07 .its-ctr{transition:opacity .8s ease-out 1s}

/* ═══════════ 08 — 재생 전후 계기판(0~100 눈금, 축 자르지 않음) ═══════════ */
.its-08{padding-top:78px}
.its-08::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.1;
  -webkit-mask-image:radial-gradient(70% 90% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 90% at 50% 40%,#000,transparent)}
.its-08.go::before,.its-08.still::before{background:url(../img/it-02-mat-960.webp) center/cover;
  background-image:image-set(url(../img/it-02-mat-960.avif) type("image/avif"),url(../img/it-02-mat-960.webp) type("image/webp"))}
.its-lg{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px;font-size:12.5px;color:var(--tx)}
.its-lg span{display:inline-flex;align-items:center;gap:8px}
.its-lg i{display:inline-block;width:18px;height:8px;border-radius:2px}
.its-lg .sw0{background:rgba(77,157,224,.62)}.its-lg .sw1{background:linear-gradient(90deg,#4D9DE0,#9AD2FF)}
.its-mtrs{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:4px 28px 0}
.its-mtr{position:relative;padding:24px 26px 20px;border-radius:20px;outline:none;cursor:default;
  background:linear-gradient(180deg,rgba(20,40,78,.72),rgba(10,22,48,.62));border:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity .8s ease-out calc(.1s + var(--k) * .15s),transform 1s var(--ease) calc(.1s + var(--k) * .15s),border-color .35s,box-shadow .35s}
.its-mtr:hover,.its-mtr:focus-visible,.its-mtr.on{border-color:rgba(124,193,245,.5);box-shadow:0 18px 44px rgba(0,0,0,.32)}
/* 제목이 두 줄인 카드가 있어도 두 카드의 막대 높이가 같게: 막대 묶음을 카드 아래로 */
.its-mtr{display:flex;flex-direction:column}
.its-mtr>.its-row:first-of-type{margin-top:auto}
.its-mtr:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.its-mcat{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#86AACB}
.its-mh{margin:8px 0 16px;font-size:18px;line-height:1.4;color:#fff;letter-spacing:-.01em}
.its-mh .tr{font-size:12px;font-weight:400;color:var(--mu)}
.its-row{display:grid;grid-template-columns:56px minmax(0,1fr) 116px;gap:14px;align-items:center;padding:6px 0}
.its-row .k{font-size:13px;color:var(--tx)}
.its-row .tk{position:relative;height:12px;border-radius:6px;overflow:hidden;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.13) calc(10% - 1px) 10%),rgba(255,255,255,.06)}
.its-row .tk i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);border-radius:6px;background:rgba(77,157,224,.62);
  transform-origin:left center;transition:transform 1.3s var(--ease) calc(.55s + var(--k) * .2s)}
.its-row.on .tk i{background:linear-gradient(90deg,#4D9DE0,#9AD2FF);transition-duration:1.6s;transition-delay:calc(1.05s + var(--k) * .2s)}
.its-row .v{font-family:var(--mono);font-size:14px;color:var(--tx);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.its-row.on .v b{font-family:var(--sans);font-size:34px;line-height:1;font-weight:700;color:#fff;letter-spacing:-.02em}
.its-ax{display:grid;grid-template-columns:repeat(3,1fr);margin:2px 130px 0 70px;font-family:var(--mono);font-size:10.5px;color:var(--mu)}
.its-ax span:nth-child(2){text-align:center}.its-ax span:last-child{text-align:right}
.its-amt{display:grid;gap:3px;margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;line-height:1.6;font-variant-numeric:tabular-nums;
  color:#A9BED4;opacity:.62;transition:opacity .35s,color .35s}
.its-mtr:hover .its-amt,.its-mtr:focus-visible .its-amt,.its-mtr.on .its-amt{opacity:1;color:#DCE9F6}
.its-08[data-hl] .its-mtr:not(.on){opacity:.55}
.its-08.armed:not(.go) .its-mtr{opacity:0;transform:translateY(16px)}
.its-08.armed:not(.go) .tk i{transform:scaleX(0)}
.its-08 .its-note{position:relative;z-index:1;padding-top:16px}

/* ═══════════ 06 — 4층 복합필터(10/18 층 렌더 v2): 같은 무대 문법으로만 맞춤 — 남색 무대 · 번호표 · 단서 · 강조.
   style.css 의 .lsc 규칙(움직임 · 자리)은 그대로, 인포 10(info-biz) 과 카탈로그(style.css 만 읽음)는 안 바뀜 ═══════════ */
.lsc.lsc-06{max-width:1120px;border-radius:26px;isolation:isolate;
  background:radial-gradient(85% 75% at 26% 16%,#14294F 0%,#0B1A38 44%,#060E20 100%);box-shadow:0 30px 70px rgba(6,14,32,.22),0 2px 6px rgba(6,14,32,.12)}
.lsc.lsc-06::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.07);pointer-events:none;z-index:40}
.lsc-06 .lsc-top{padding:22px 26px 0;justify-content:flex-end}
.lsc-06 .lsc-tag{font-size:10.5px;letter-spacing:.2em;color:#C3D6E8;padding:6px 10px 5px;border-radius:999px;line-height:1;
  background:rgba(8,18,40,.55);border:1px solid rgba(255,255,255,.1)}
.lsc-06 .lsc-cv{color:#D2DDE8;border-color:rgba(255,255,255,.16);background:rgba(8,18,40,.5)}
.lsc-06 .lsc-in{background:
    radial-gradient(56% 64% at 52% 56%,rgba(64,96,150,.34),rgba(7,9,14,0) 72%),
    linear-gradient(180deg,rgba(7,9,14,0) 87.1%,rgba(170,198,226,.09) 87.3%,rgba(170,198,226,.03) 92%,rgba(7,9,14,0) 100%)}
.lsc-06 .lsc-note{margin-top:14px;font-size:12.5px;line-height:1.6;color:#8098B2}
/* 층 이름표는 한 줄(면 공통 p{text-wrap:pretty} 가 nowrap 을 덮지 않게 더 구체적으로) */
.lsc-06 .lsc-lb{white-space:nowrap}
/* 층에 마우스 · 목록에 초점 → 그 층만 또렷하게 */
.lsc-06 .lsc-ly{transition:transform 1.6s cubic-bezier(.2,.75,.15,1),opacity 1.2s ease-out,filter .4s ease}
.lsc-06[data-hl] .lsc-ly:not(.hl){filter:brightness(.42) saturate(.6)}
.lsc-06[data-hl] .lsc-ly.hl .lsc-lb b{color:#fff}
.lsc-06[data-hl] .lsc-ly.hl .lsc-lb span{color:#DCE9F6}
/* 붙잡히는 순간의 번짐을 낮춤(다른 기술 인포의 무광 분자와 맞춤) */
.lsc-06 .lsc-pt .h{opacity:.1}
.lsc-06.go .lsc-pt .h{animation-name:its-halo}
@keyframes its-halo{0%,56%{opacity:0;transform:scale(.6)}59.5%{opacity:.26;transform:scale(1)}74%,100%{opacity:0;transform:scale(2.1)}}
.lsc-06 .lsc-list li{outline:none;border-radius:10px;transition:background .3s}
.lsc-06 .lsc-list li.hl,.lsc-06 .lsc-list li:focus-visible{background:rgba(255,255,255,.07)}
.lsc-06 .lsc-list li:focus-visible{outline:2px solid #7CC1F5;outline-offset:2px}

/* ═══════════ 밝은 무대(.its-lt) — 04 공정 · 07 재생 순환: 면 전체가 무거워지지 않게, 밝은 스튜디오(연회색 배경 사진) ═══════════ */
.its.its-lt{--ink:#0F2A4A;--tx:#41607C;--mu:#6A86A1;--ln:rgba(15,42,74,.35);--ac:#0071BB;color:var(--tx);
  background:linear-gradient(180deg,#F8FAFD 0%,#EEF2F7 100%);box-shadow:0 1px 2px rgba(15,42,74,.05),0 22px 50px rgba(15,42,74,.09)}
.its.its-lt::after{border-color:rgba(15,42,74,.08)}
.its-lt .its-tag{color:#0071BB;background:#fff;border-color:#DCE7F1;-webkit-backdrop-filter:none;backdrop-filter:none}
.its-lt .its-cv{color:#0F2A4A;background:rgba(255,255,255,.88);border-color:#DCE7F1}
.its-lt .its-note{color:var(--mu)}
.its-lt .its-n{background:#0F2A4A;color:#fff}
/* 04 */
.its-04.its-lt .its-pn{color:#fff;background:#0F2A4A;box-shadow:0 0 0 5px #F3F6FA}
.its-04.its-lt .its-proc li.io .its-pn{background:#fff;box-shadow:0 0 0 2px #0F2A4A,0 0 0 7px #F3F6FA}
.its-04.its-lt .its-proc li:not(:last-child)::after{background-color:rgba(15,42,74,.16);
}
.its-04.its-lt .its-pi{background:#EEF2F6;box-shadow:0 0 0 1px #DCE7F1,0 14px 30px rgba(15,42,74,.10)}
.its-04.its-lt .its-pt b{color:#0F2A4A}
.its-04.its-lt .its-proc li:not(:last-child)::before{background:linear-gradient(90deg,transparent,rgba(0,113,187,.75) 30%,#0071BB 50%,rgba(0,113,187,.75) 70%,transparent)}
.its-04.its-lt .its-pn::after{border-color:rgba(0,113,187,.55)}
.its-04.its-lt .its-pi::after{box-shadow:inset 0 0 0 2px #0071BB}
/* 07 */
.its-07.its-lt .its-bg::after{background:linear-gradient(180deg,rgba(248,250,253,.5) 0,rgba(248,250,253,0) 14%,rgba(248,250,253,0) 86%,rgba(238,242,247,.7) 100%)}
.its-07.its-lt .its-rg0{stroke:rgba(15,42,74,.16)}
.its-07.its-lt .its-arc{stroke:rgba(0,113,187,.45)}
.its-07.its-lt .its-prog{stroke:#0071BB;opacity:.85}
.its-07.its-lt .its-mk rect{fill:#0F2A4A}
.its-07.its-lt .its-mk text{fill:#fff}
.its-07.its-lt .its-mk.on rect{fill:#0071BB}
.its-lt .its-ctr{color:#0F2A4A;background:rgba(255,255,255,.86);border-color:#DCE7F1}
.its-lt .its-cyc li{color:#0F2A4A;background:rgba(255,255,255,.86);border-color:#DCE7F1;box-shadow:0 6px 18px rgba(15,42,74,.08)}
.its-07.its-lt[data-ph="0"] .its-cyc li[data-f="1"],.its-07.its-lt[data-ph="1"] .its-cyc li[data-f="2"],.its-07.its-lt[data-ph="2"] .its-cyc li[data-f="3"],.its-07.its-lt[data-ph="3"] .its-cyc li[data-f="4"],
.its-lt .its-cyc li:hover,.its-lt .its-cyc li:focus-visible,.its-lt .its-cyc li.on{background:#0F2A4A;color:#fff;border-color:#0F2A4A;box-shadow:0 10px 26px rgba(15,42,74,.22)}
.its-07.its-lt[data-ph="0"] .its-cyc li[data-f="1"] .its-n,.its-07.its-lt[data-ph="1"] .its-cyc li[data-f="2"] .its-n,.its-07.its-lt[data-ph="2"] .its-cyc li[data-f="3"] .its-n,.its-07.its-lt[data-ph="3"] .its-cyc li[data-f="4"] .its-n,
.its-lt .its-cyc li:hover .its-n,.its-lt .its-cyc li.on .its-n{background:#fff;color:#0F2A4A}

/* 06 절 아래 4층 목록: 강조 때 글을 8px 밀지 않고 왼쪽 막대로만(점검 P2-18 — 모바일에서 L-01 만 밀려 보임) */
#layers .layer-list li,#layers .layer-list li:hover,#layers .layer-list li.on{padding-left:12px}
#layers .layer-list li{transition:box-shadow .3s}
#layers .layer-list li:hover,#layers .layer-list li.on{box-shadow:inset 3px 0 0 var(--accent)}

/* ═══════════ 좁은 화면 ═══════════ */
@media (max-width:900px){
  .its-07 .its-cyc{display:none}
  .its-07.live .its-now{display:inline-flex}
  .its *,.lsc-06 *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .its-cal li{background:rgba(9,20,44,.9)}
  .its-tag,.its-cv,.its-sp-tag,.its-ctr{background:rgba(8,18,40,.82)}
  .its-lt .its-cv,.its-lt .its-ctr{background:#fff}
  .lsc-06 .lsc-lb b,.lsc-06 .em .lsc-lb b{font-size:12px}
  .lsc-06 .lsc-lb span{display:none}
  .lsc-06 .lsc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding:8px 22px 4px}
  .lsc-06 .lsc-list li b{display:block;font-size:13.5px;font-weight:700;color:#D3DEE9}
  .lsc-06 .lsc-list li.em b{color:#fff}
  .lsc-06 .lsc-list li span{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#8FA3B8}
  .its-mtrs{grid-template-columns:1fr}
  .its-cyc{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:16px 20px 4px}
  .its-cyc li{position:static;transform:none;justify-content:center;font-size:14px}
  .its-07 .its-mk{display:block}
  .its-proc{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px var(--gap)}
  .its-proc li:nth-child(3)::after,.its-proc li:nth-child(3)::before{display:none}
  .its-cal{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px 20px 6px}
  .its-cal li{position:static;width:auto;translate:none}
  .its-ln path:not(.cn),.its-ln circle:not(.cn){display:none}
  .its-mk{display:block}
}
@media (max-width:620px){
  .its{border-radius:20px}
  .its-top{padding:16px 16px 0}
  .its-vis{aspect-ratio:3/4}
  .its-bg{bottom:auto;height:54%}
  .its-fade .its-bg{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%)}
  .its-lens{left:6%;width:88%;top:40%;height:57%;border-radius:16px}
  .its.armed:not(.go) .its-lens{transform:translateY(-6%) scale(.92)}
  .its-cal{grid-template-columns:1fr;gap:8px;padding:14px 14px 4px}
  .its-cal li{padding:11px 13px}
  .its-cal b{font-size:15px}
  .its-cal p{font-size:13.5px}
  .its-note{padding:6px 18px 20px}
  .its-duo{grid-template-columns:1fr}
  .its-vs{position:relative;left:auto;top:auto;margin:6px auto -17px;justify-self:center;transform:none}
  .its-03.armed:not(.go) .its-vs{transform:scale(.6)}
  .its-sp+.its-vs+.its-sp .its-sp-im::before{display:none}
  .its-sp-im{aspect-ratio:1/.9}
  .its-sp-t{padding:14px 18px 10px}
  .its-04{padding-top:64px}
  .its-07 .its-vis{aspect-ratio:4/3}
  .its-08{padding-top:64px}
  .its-08 .its-top{flex-direction:column;align-items:flex-start}
  .its-lg{justify-content:flex-start;margin-top:8px}
  .its-mtrs{grid-template-columns:1fr;gap:12px;padding:30px 14px 0}
  .its-mtr{padding:20px 18px 16px}
  .its-mh{font-size:16.5px}
  .its-row{grid-template-columns:46px minmax(0,1fr) 98px;gap:10px}
  .its-row.on .v b{font-size:28px}
  .its-ax{margin:2px 108px 0 56px}
  .its-07 .its-bg{height:100%}
  .its-07 .its-ring,.its-07 .its-mks{display:none}
  .its-cyc{grid-template-columns:1fr 1fr;padding:14px 14px 4px}
  .its-ctr{font-size:12px;top:42%}
  .its-proc{grid-template-columns:1fr;gap:18px 0;padding:0 16px}
  .its-proc li{display:grid;grid-template-columns:30px 96px minmax(0,1fr);gap:0 14px;align-items:start}
  .its-pn{grid-column:1;grid-row:1;align-self:start;margin-top:33px}
  .its-proc li.io .its-pn{margin:41px 0 0 8px}
  .its-pi{grid-column:2;grid-row:1;margin-top:0;border-radius:14px}
  .its-pt{grid-column:3;grid-row:1;margin:4px 0 0}
  .its-pt b{font-size:15.5px}
  .its-proc li:nth-child(3)::after,.its-proc li:nth-child(3)::before{display:block}
  .its-proc li:not(:last-child)::after{left:15px;top:48px;width:2px;height:calc(100% + 18px);margin:0 0 0 -1px;transform-origin:center top}
  .its-proc li:not(:last-child)::before{left:14px;top:48px;width:2px;height:calc((100% + 18px) * .3);
    background:linear-gradient(180deg,transparent,rgba(154,210,255,.9) 30%,#fff 50%,rgba(154,210,255,.9) 70%,transparent)}
  .its-04.its-lt .its-proc li:not(:last-child)::before{background:linear-gradient(180deg,transparent,rgba(0,113,187,.75) 30%,#0071BB 50%,rgba(0,113,187,.75) 70%,transparent)}
  .its-04.go .its-proc li:not(:last-child)::before{animation-name:its-streakv}
  .its-04.armed:not(.go) .its-proc li::after{transform:scaleY(0)}
  .its-keys{justify-content:flex-start;gap:6px 18px;padding:12px 18px 2px}
}
/* 움직임 줄이기 · 인쇄 → 다 쌓인 정지 그림 */
@media (prefers-reduced-motion:reduce){
  .its *{animation:none!important;transition:none!important}
  .its .its-bg,.its .its-lens,.its .its-cal li,.its .its-sp,.its .its-keys,.its .its-sp-t,.its .its-proc li,.its .its-proc li::after,.its .its-pi img,.its .its-cyc li,.its .its-ring,.its .its-ctr,.its .its-mtr,.its .tk i{opacity:1!important;transform:none!important;clip-path:none!important;translate:none!important}
  .its .its-lens>picture img{transform:none!important}
}
@media print{
  .its *{animation:none!important;transition:none!important}
  .its .its-bg,.its .its-lens,.its .its-cal li,.its .its-sp,.its .its-keys,.its .its-sp-t,.its .its-proc li,.its .its-proc li::after,.its .its-pi img,.its .its-cyc li,.its .its-ring,.its .its-ctr,.its .its-mtr,.its .tk i{opacity:1!important;transform:none!important;clip-path:none!important;translate:none!important}
}