/* 인포그래픽 09~15 (제품 · 분야 묶음, info-biz) 무대와 움직임. style.css 는 그대로 두고 여기서 덮어쓴다 */

/* ═══════════ 공통 무대(.ib) — 기술 묶음(.its)과 같은 짙은 남색 · 글자 색 ═══════════
   그림은 ib-*.webp, 글자 · 지시선 · 번호는 HTML/SVG.
   움직임은 info-biz.js: .armed(준비) → 화면에 들어오면 .go(차례 등장) → .done(등장 끝 · 흐르는 점 시작) / 벗어나면 .off(멈춤).
   움직임 줄이기 · 스크립트 없음 · 인쇄 → 다 나온 정지 그림(.still 또는 .armed 없음) */
.ib{--ink:#EEF4FA;--tx:#B5C7DA;--mu:#8098B2;--ln:rgba(150,196,240,.26);--ga:#5CB8FF;--ta:#B48CFF;--ac:#7CC1F5;--du:#C9D3DE;
  --ease:cubic-bezier(.22,1,.36,1);
  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)}
.ib::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.07);pointer-events:none;z-index:40}
.ib-top{position:relative;z-index:6;display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:22px 26px 0}  /* 내부 번호는 뺌(최종 점검 P1-8) */
.ib12 .ib-top{justify-content:space-between}  /* 12: 왼쪽 「개발 중」 · 오른쪽 「개념 이미지」 */
.ib-cv{font-size:11.5px;font-weight:600;line-height:1;color:#D2DDE8;padding:6px 10px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.16);background:rgba(8,18,40,.5)}
.ib-cap{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;color:#7FA6C8;margin:0 0 14px}
.ib-cap>span{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em}
.ib-note{position:relative;z-index:6;margin:0;padding:8px 28px 26px;font-size:13px;line-height:1.65;color:var(--mu);text-align:center}
.ib-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%}
.ib-dot.b{background:var(--ga)}.ib-dot.v{background:var(--ta)}.ib-dot.g{background:var(--du)}
.ib .stage.on{background:rgba(92,184,255,.13);color:#A8D8FF}
.ib .stage.dev{background:rgba(180,140,255,.16);color:#D3C0FF}
.ib a{color:inherit}
.ib a:focus-visible{outline:2px solid #7CC1F5;outline-offset:3px}

/* 흐름선(SVG, 자리는 info-biz.js 가 요소 위치를 재서 그림) · 흐르는 점 */
.ib-rails{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.ib-r{fill:none;stroke:var(--ln);stroke-width:1.3;stroke-linecap:round;transition:stroke .4s,opacity .4s}
.ib-r.hl{stroke:rgba(124,193,245,.85)}
.ib-r.dim{opacity:.35}
.ib-pt .c{fill:#BFE3FF}
.ib-pt .h{fill:#5CB8FF;opacity:.22}
.ib-pt.v .c{fill:#DCCBFF}.ib-pt.v .h{fill:#B48CFF}
.ib.armed .ib-r{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.ib.go .ib-r{animation:ib-draw 1.1s var(--ease) var(--d,0s) forwards}
.ib.done .ib-r{animation:none;stroke-dasharray:none;stroke-dashoffset:0}  /* 등장 뒤 크기가 바뀌어 다시 그려도 바로 보이게 */
.ib.armed:not(.done) .ib-pts{visibility:hidden}
.ib.off *,.ib.off *::before,.ib.off *::after{animation-play-state:paused!important}  /* 화면 밖이면 고리 · 깜빡임(가상 요소)까지 멈춤 */
@keyframes ib-draw{to{stroke-dashoffset:0}}
@keyframes ib-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ib-in{from{opacity:0}to{opacity:1}}
@keyframes ib-zoom{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes ib-left{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes ib-right{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes ib-pulse{0%{opacity:.75;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.6)}}

/* ═══════════ 09 제품 라인업 — 소재(사진) → 핵심 구성(유리 칸) → 제품 3(실사 렌더) ═══════════ */
.ib09-st{position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);grid-template-areas:"mat core" "prods prods";
  align-items:center;column-gap:clamp(48px,7vw,104px);row-gap:clamp(56px,6.4vw,86px);padding:26px clamp(24px,3.6vw,48px) 6px}
.ib09-mat,.ib09-core,.ib09-prods{position:relative;z-index:2}
.ib09 .ib-rails{z-index:3}
.ib09-core,.ib09-prods{z-index:4}
.ib09 .ib-r.src{stroke:#CFEAFF;stroke-width:7;stroke-linecap:round}  /* 갈래가 시작하는 점(소재 사진 위) */
.ib09-mat{grid-area:mat}
.ib09-mim{position:relative;aspect-ratio:1100/734}
.ib09-mim img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%);
  mask-composite:intersect}
.ib09-pin{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#0B1A38;border:2px solid var(--ga);
  box-shadow:0 0 0 4px rgba(92,184,255,.22);transition:transform .35s var(--ease)}
.ib09-pin.a{left:38%;top:30%}
.ib09-pin.b{left:71%;top:77%;border-color:var(--ta);box-shadow:0 0 0 4px rgba(180,140,255,.22)}
.ib09-mlb{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:10px 14px;margin-top:4px;padding:0 4%}
.ib09-m{position:relative;padding-left:18px}
.ib09-m::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--ga)}
.ib09-m.b::before{background:var(--ta)}
.ib09-m b{display:block;font-size:clamp(20px,2vw,25px);line-height:1.2;letter-spacing:-.02em;color:#fff}
.ib09-m>span{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:#AFC2D6}
.ib09-plus{align-self:center;font-style:normal;font-family:var(--mono);font-size:20px;font-weight:700;color:#5E7A99}
.ib09-mat:hover .ib09-pin,.ib09-mat:focus-within .ib09-pin{transform:scale(1.25)}
.ib09-core{grid-area:core}
.ib09-core ul{display:grid;gap:12px}
.ib09-core li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:center;padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.ib09-core li svg{grid-row:1/span 2;width:44px;height:44px;padding:10px;border-radius:12px;color:#9FD3FF;
  background:radial-gradient(circle at 30% 25%,rgba(124,193,245,.22),rgba(124,193,245,.05));border:1px solid rgba(124,193,245,.22)}
.ib09-core li b{font-size:16.5px;line-height:1.35;color:var(--ink)}
.ib09-core li small{font-size:13px;line-height:1.45;color:#98AEC5}
.ib09-prods{grid-area:prods;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,34px)}
.ib09-prods::before{content:"";position:absolute;left:2%;right:2%;top:58%;height:22%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(110,170,235,.09),transparent 72%)}
.ib09-p{display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:20px;padding:0 6px 8px;transition:opacity .45s,filter .45s}
.ib09-pim{display:block;width:100%;max-width:320px;aspect-ratio:1;margin-bottom:6px;transition:transform .6s var(--ease)}
.ib09-pim img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%)}
.ib09-p b{font-size:clamp(17px,1.6vw,20px);line-height:1.35;color:#fff;letter-spacing:-.01em}
.ib09-ps{margin-top:4px;font-size:14.5px;color:#C4D3E2}
.ib09-p em{margin-top:4px;font-style:normal;font-size:13.5px;line-height:1.5;color:#8EA3BA}
.ib09-p .stage{margin-top:12px}
.ib09-p:hover .ib09-pim,.ib09-p:focus-visible .ib09-pim{transform:translateY(-8px) scale(1.03)}
.ib09[data-h] .ib09-p:not(.hl){opacity:.42;filter:saturate(.5)}
/* 등장: 사진 → 소재 이름 → 핵심 구성 차례 → 흐름선 → 제품 차례 */
.ib09.armed:not(.go) .ib09-mim,.ib09.armed:not(.go) .ib09-mlb,.ib09.armed:not(.go) .ib09-core li,.ib09.armed:not(.go) .ib09-p,
.ib09.armed:not(.go) .ib-cap{opacity:0}
.ib09.go .ib09-mim{animation:ib-zoom 1.3s var(--ease) both}
.ib09.go .ib09-mat .ib-cap,.ib09.go .ib09-mlb{animation:ib-up .9s var(--ease) .35s both}
.ib09.go .ib09-core .ib-cap{animation:ib-in .8s ease .45s both}
.ib09.go .ib09-core li{animation:ib-left .9s var(--ease) calc(.55s + var(--k) * .13s) both}
.ib09.go .ib09-p{animation:ib-up 1s var(--ease) calc(1.25s + var(--k) * .15s) both}
.ib09.done .ib09-p{animation:none}  /* 등장이 끝나면 풀어 줘야 마우스 강조(흐리게)가 먹는다 */
.ib09-pin::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(124,193,245,.6);opacity:0}
.ib09.done .ib09-pin.a::after{animation:ib-pulse 3.2s ease-out infinite}
@media (min-width:861px) and (max-height:900px){
  .ib09 .ib-top{padding-top:16px}
  .ib09-st{row-gap:20px;padding-top:2px}
  .ib09-mim{max-width:318px}
  .ib09-mlb{max-width:420px}
  .ib09-core li{padding:12px 16px}
  .ib09-pim{max-width:148px;margin-bottom:2px}
  .ib09-p .stage{margin-top:8px}
  .ib09 .ib-note{padding-top:4px;padding-bottom:18px}
}
@media (max-width:860px){
  .ib09-st{grid-template-columns:minmax(0,1fr);grid-template-areas:"mat" "core" "prods";row-gap:30px;padding:18px 18px 4px}
  .ib09 .ib-rails{display:none}
  .ib09-core ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ib09-core li{grid-template-columns:1fr;row-gap:8px;padding:14px}
  .ib09-core li svg{grid-row:auto}
  .ib09-core::before,.ib09-prods::after{content:"";position:absolute;left:50%;width:1px;height:22px;margin-left:-.5px;
    background:linear-gradient(180deg,rgba(124,193,245,0),rgba(124,193,245,.6))}
  .ib09-core::before{top:-26px}
  .ib09-prods::after{top:-26px}
}
@media (max-width:860px){  /* 태블릿 · 휴대폰: 그림 안 글씨 최소 12px */
  .ib .own,.ib .ib13-ch,.ib .ib-cv,.ib .ib13-n,.ib .ib15-n,.ib .ib12-z,.ib .stage,.lsc-10 .lsc-cv{font-size:12px}
  .ib-cap,.ib13-ht .lb{font-size:11.5px;letter-spacing:.14em}
}
@media (max-width:620px){
  .ib-top{padding:16px 16px 0}
  .ib-note{padding:6px 18px 20px;font-size:12.5px}
  .ib09-mlb{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:0;gap:8px}
  .ib09-m{padding-left:14px}
  .ib09-m::before{top:7px;width:7px;height:7px}
  .ib09-m b{font-size:18px}
  .ib09-m>span{font-size:12.5px}
  .ib09-core ul{grid-template-columns:1fr;gap:10px}
  .ib09-core li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:12px 14px}
  .ib09-core li svg{grid-row:1/span 2;width:40px;height:40px;padding:9px}
  .ib09-prods{grid-template-columns:1fr;gap:14px}
  .ib09-p{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:14px;align-items:center;text-align:left;padding:8px 10px 8px 0;
    border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
  .ib09-pim{grid-row:1/span 5;margin:0;max-width:none}
  .ib09-p b{font-size:17px}
  .ib09-ps{font-size:13.5px;margin-top:2px}
  .ib09-p em{font-size:12.5px;margin-top:2px}
  .ib09-p .stage{margin-top:8px;justify-self:start}
}

/* ═══════════ 13 적용 분야 맵 — 가운데 소재 원 → 여섯 분야 카드(예시 사진) ═══════════ */
.ib13-st{--g:clamp(44px,5.6vw,84px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,21vw,262px) minmax(0,1fr);align-items:center;
  column-gap:var(--g);padding:30px clamp(20px,3vw,40px) 20px}
.ib13-c{position:relative}
html:not(.js) .ib13-c::after{content:"";position:absolute;top:50%;width:var(--g);height:1px;background:rgba(150,196,240,.3)}  /* 스크립트 없음: 곧은 연결선 */
html:not(.js) .ib13-col.l .ib13-c::after{right:calc(var(--g) * -1)}
html:not(.js) .ib13-col.r .ib13-c::after{left:calc(var(--g) * -1)}
.ib13-col{position:relative;z-index:2;display:grid;gap:16px}
.ib13-c a{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:16px;align-items:center;padding:12px 16px 12px 12px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:opacity .4s,filter .4s,border-color .35s,background .35s,transform .45s var(--ease)}
.ib13-col.r .ib13-c a{grid-template-columns:minmax(0,1fr) 88px;padding:12px 12px 12px 16px}
.ib13-col.r .ib13-ph{order:2}
.ib13-ph{display:block;width:88px;height:88px;border-radius:13px;overflow:hidden;background:#0E1D3A}
.ib13-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .9s var(--ease),filter .5s}
.ib13-n{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;color:#7FB8E8}
.ib13-tx b{display:block;margin-top:2px;font-size:16.5px;line-height:1.35;color:var(--ink);letter-spacing:-.01em}
.ib13-chs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ib13-ch{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;line-height:1.25;padding:4px 9px;border-radius:999px;white-space:nowrap;
  transition:box-shadow .3s,background .3s}
.ib13-ch::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ib13-ch.on{background:rgba(92,184,255,.12);color:#A8D8FF}
.ib13-ch.dev{background:rgba(180,140,255,.15);color:#D3C0FF}
.ib13-ch.hl{box-shadow:inset 0 0 0 1px currentColor}
.ib13-c a:hover,.ib13-c a:focus-visible{transform:translateY(-3px)}
.ib13-c a:hover .ib13-ph img,.ib13-c a:focus-visible .ib13-ph img{transform:scale(1.08);filter:saturate(1.05)}
.ib13.focus .ib13-c:not(.hl) a{opacity:.38;filter:saturate(.4)}
.ib13.focus .ib13-c.hl a{border-color:rgba(124,193,245,.42);background:linear-gradient(180deg,rgba(124,193,245,.1),rgba(124,193,245,.03))}
/* 가운데 원 */
.ib13-hub{position:relative;z-index:2;display:grid;place-items:center;aspect-ratio:1}
.ib13-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(150,196,240,.2)}
.ib13-ring::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(150,196,240,.18)}
.ib13-disc{position:relative;display:grid;place-items:center;width:84%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 26px 60px rgba(0,0,0,.45)}
.ib13-disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.8)}
.ib13-disc::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(8,18,40,.62),rgba(8,18,40,.25) 70%,rgba(20,60,120,.15))}
.ib13-ht{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px;text-align:center}
.ib13-ht .lb{font-size:10px;letter-spacing:.18em;color:rgba(200,225,250,.82)}
.ib13-ht b{font-size:clamp(17px,1.6vw,21px);line-height:1.25;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.ib13 .ib-r.cap{stroke:#9FD3FF;stroke-width:6;stroke-linecap:round}  /* 선이 원 테두리에 닿는 자리 */
.ib13-hs{font-size:12.5px;line-height:1.5;color:#C8D6E4}
.ib13-keys{position:relative;z-index:6;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:4px 20px 2px;font-size:14px;color:var(--tx)}
.ib13-keys li{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid transparent;transition:border-color .3s,background .3s}
.ib13-keys li:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
/* 등장: 원 → 흐름선 → 카드 차례(가운데 쪽에서 밀려 나옴) */
.ib13.armed:not(.go) .ib13-disc,.ib13.armed:not(.go) .ib13-ring,.ib13.armed:not(.go) .ib13-c{opacity:0}
.ib13.go .ib13-disc{animation:ib-zoom 1.1s var(--ease) both}
.ib13.go .ib13-ring{animation:ib-in 1.4s ease .3s both}
.ib13.go .ib13-col.l .ib13-c{animation:ib-left .9s var(--ease) calc(.7s + var(--k) * .12s) both}
.ib13.go .ib13-col.r .ib13-c{animation:ib-right .9s var(--ease) calc(.7s + var(--k) * .12s) both}
.ib13.done .ib13-ring::before{animation:ib-spin 60s linear infinite;will-change:transform}
@keyframes ib-spin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .ib13-st{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:1fr;align-items:stretch;column-gap:14px;row-gap:14px;padding:22px 18px 16px}
  .ib13-hub{grid-column:1/-1;order:-1;width:min(240px,62vw);justify-self:center;align-self:center;margin-bottom:8px}
  .ib13-col{display:contents}
  html:not(.js) .ib13-c::after{display:none}
  .ib13-c a,.ib13-col.r .ib13-c a{grid-template-columns:72px minmax(0,1fr);padding:10px 12px 10px 10px;column-gap:12px}
  .ib13-col.r .ib13-ph{order:0}
  .ib13-c a{height:100%}  /* 같은 줄 카드 높이 맞춤 */
  .ib13-ph{width:72px;height:72px;border-radius:11px}
  .ib13.go .ib13-col.r .ib13-c,.ib13.go .ib13-col.l .ib13-c{animation-name:ib-up}
}
@media (max-width:620px){
  .ib13-st{grid-template-columns:1fr}
  .ib13-tx b{font-size:16px}
  .ib13-keys{font-size:13px}
}

/* ═══════════ 공통 범례 줄(점 · 선 견본) ═══════════ */
.ib-keys{position:relative;z-index:6;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;padding:10px 20px 0;font-size:14px;color:var(--tx)}
.ib-keys li{display:flex;align-items:center;gap:8px}
.ib-keys svg{display:inline-block;flex:none}
.ib-keys .k-line{display:inline-block;width:26px;height:0;border-top:2px dashed rgba(170,200,230,.6)}

/* ═══════════ 11 VOCs 집진기 — 실사 단면 + 번호 6 + 입자 흐름 ═══════════
   .ib11-vis 안 그림 · SVG · 번호는 같은 상자(그림 좌표 1080 × 1170) */
.ib11-st{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:20px clamp(28px,4vw,56px);
  padding:6px clamp(22px,3.6vw,48px) 8px}
.ib11-vis{position:relative;aspect-ratio:1080/1170;max-width:600px;width:100%;justify-self:center}
.ib11-vis::before,.ib12-vis::before{content:"";position:absolute;pointer-events:none;background:radial-gradient(closest-side,rgba(5,9,20,.72) 52%,rgba(5,9,20,0))}
.ib11-vis::before{inset:-6% -16% -4%}  /* 사진 둘레를 사진 바탕색 쪽으로 어둡게 → 네모 테두리가 안 보임 */
.ib11-vis img{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 88%,transparent 100%);
  mask-composite:intersect}
.ib11-ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ib11-f{fill:rgba(124,193,245,.08);stroke:rgba(150,210,255,.9);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .35s}
.ib11-route{fill:none;stroke:rgba(150,200,245,.22);stroke-width:1.2;stroke-dasharray:3 7;vector-effect:non-scaling-stroke}
.ib11-lns line{stroke:rgba(190,215,240,.55);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .3s}
.ib11-mk{position:absolute;z-index:3;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;color:#fff;background:#0F2A4A;border:1.5px solid rgba(150,210,255,.75);
  box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .3s var(--ease),background .3s,opacity .3s;cursor:default}
.ib11[data-k] .ib11-mk{opacity:.45}
.ib11[data-k="1"] .ib11-mk[data-k="1"],.ib11[data-k="2"] .ib11-mk[data-k="2"],.ib11[data-k="3"] .ib11-mk[data-k="3"],
.ib11[data-k="4"] .ib11-mk[data-k="4"],.ib11[data-k="5"] .ib11-mk[data-k="5"],.ib11[data-k="6"] .ib11-mk[data-k="6"]{opacity:1;transform:scale(1.18);background:#0071BB}
.ib11[data-k="1"] .ib11-f[data-k="1"],.ib11[data-k="2"] .ib11-f[data-k="2"],.ib11[data-k="3"] .ib11-f[data-k="3"],
.ib11[data-k="4"] .ib11-f[data-k="4"],.ib11[data-k="5"] .ib11-f[data-k="5"],.ib11[data-k="6"] .ib11-f[data-k="6"]{opacity:1}
.ib11[data-k="1"] .ib11-lns [data-k="1"],.ib11[data-k="2"] .ib11-lns [data-k="2"],.ib11[data-k="3"] .ib11-lns [data-k="3"],
.ib11[data-k="4"] .ib11-lns [data-k="4"],.ib11[data-k="5"] .ib11-lns [data-k="5"],.ib11[data-k="6"] .ib11-lns [data-k="6"]{stroke:#9FD3FF}
.ib11-lg{position:relative;z-index:2;display:grid;gap:4px}
.ib11-lg li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding:12px 14px;border-radius:14px;
  font-size:14.5px;line-height:1.6;color:#A9BCD0;border:1px solid transparent;transition:background .3s,border-color .3s,opacity .3s;outline:none}
.ib11-lg b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:1px}
.ib11-lg .k{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(150,210,255,.35);transition:background .3s}
.ib11-lg li:hover,.ib11-lg li:focus-visible,.ib11-lg li.on{background:rgba(124,193,245,.08);border-color:rgba(124,193,245,.28)}
.ib11-lg li.on .k{background:#0071BB;border-color:#0071BB}
.ib11[data-k] .ib11-lg li:not(.on){opacity:.82}
.ib11 .ib-pt.du .c{fill:#D3DCE6}.ib11 .ib-pt.du .h{fill:#C9D3DE}
.ib11 .ib-pt.fi .c{fill:#A9B8C8}.ib11 .ib-pt.fi .h{fill:#A9B8C8}
.ib11 .ib-pt.ga .c{fill:#7CC8FF}.ib11 .ib-pt.ga .h{fill:#5CB8FF}
.ib11 .ib-pt.air .c{fill:#E6F4FF}.ib11 .ib-pt.air .h{fill:#9FD3FF;opacity:.12}
.ib11 .ib-pt .ring{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:0}
/* 등장: 그림 → 번호 · 지시선 차례 → 설명 차례 */
.ib11.armed:not(.go) .ib11-vis img,.ib11.armed:not(.go) .ib11-mk,.ib11.armed:not(.go) .ib11-lns,.ib11.armed:not(.go) .ib11-lg li{opacity:0}
.ib11.go .ib11-vis img{animation:ib-zoom 1.3s var(--ease) both}
.ib11.go .ib11-lns{animation:ib-in .8s ease .6s both}
.ib11.go .ib11-mk{animation:ib-pop .6s var(--ease) calc(.5s + var(--k) * .1s) both}
.ib11.go .ib11-lg li{animation:ib-left .8s var(--ease) calc(.4s + var(--k) * .08s) both}
.ib11.done .ib11-mk,.ib11.done .ib11-lg li{animation:none}
@keyframes ib-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .ib11-st{grid-template-columns:1fr;padding:6px 18px 4px}
  .ib11-vis{max-width:460px}
}
@media (max-width:620px){
  .ib11-mk{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:11px}
  .ib11-lg li{grid-template-columns:24px minmax(0,1fr);gap:12px;padding:9px 10px;font-size:13.5px}
  .ib11-lg .k{width:24px;height:24px;font-size:11px}
  .ib11-lg b{font-size:15.5px}
  .ib-keys{font-size:13px}
}

/* ═══════════ 12 CO₂ 제거모듈 — 무대 = 밀폐공간 안, 오른쪽 점선 너머 = 밖. 흡착 → 재생 → 배출 → 재사용 차례로 ═══════════
   무대 좌표 1500 × 920. 그림 자리 x 330 · y 72 · 폭 960 → left 22% · top 7.826% · width 64% */
.ib12-vis{position:relative;aspect-ratio:1500/920;margin:2px clamp(12px,2.4vw,30px) 0}
.ib12-vis img{position:absolute;left:22%;top:7.826%;width:64%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  mask-composite:intersect}
.ib12-vis::before{left:14%;right:6%;top:-4%;bottom:-4%}
.ib12-out{position:absolute;left:89.33%;top:0;right:0;bottom:0;border-radius:0 18px 18px 0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 12px),linear-gradient(90deg,rgba(150,180,215,.06),rgba(150,180,215,.02))}
.ib12-ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ib12-wall{fill:none;stroke:rgba(180,205,230,.6);stroke-width:1.6;stroke-dasharray:7 7;vector-effect:non-scaling-stroke}
.ib12-g{fill:none;stroke:rgba(159,211,255,.38);stroke-width:1.6;stroke-dasharray:4 6;vector-effect:non-scaling-stroke;transition:stroke .5s}
.ib12-g.vent{stroke:rgba(201,174,255,.45)}
.ib12-heat{opacity:0;transition:opacity .9s ease}
.ib12-sweep{opacity:0}
.ib12-z{position:absolute;bottom:2.6%;margin:0;font-size:12px;font-weight:700;letter-spacing:.04em;color:#7F98B4}
.ib12-z.in{left:1.4%}
.ib12-z.out{left:90.4%}
.ib12-lg{position:relative;z-index:6;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px clamp(16px,3vw,36px) 0}
.ib12-lg li{position:relative;overflow:hidden;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;padding:14px 14px 16px;border-radius:14px;
  font-size:14px;line-height:1.6;color:#A9BCD0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  transition:background .4s,border-color .4s,opacity .4s;outline:none;cursor:default}
.ib12-lg b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:1px}
.ib12-lg .k{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(180,140,255,.4);transition:background .4s,border-color .4s}
.ib12-lg li::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#5CB8FF,#B48CFF)}
.ib12-lg li.on,.ib12-lg li:hover,.ib12-lg li:focus-visible{background:rgba(124,193,245,.08);border-color:rgba(124,193,245,.3)}
.ib12-lg li.on .k{background:#5C2D91;border-color:#B48CFF}
.ib12-lg li.on::after{animation:ib-prog var(--dur,3s) linear forwards}
.ib12.hold .ib12-lg li.on::after{animation:none;width:100%}
.ib12-lg li>span,.ib11-lg li>span,.ib15-d,.ib09-m>span,.ib-note{text-wrap:pretty}
@keyframes ib-prog{from{width:0}to{width:100%}}
/* 단계별 그림 */
.ib12.ph1 .ib12-g.in,.ib12.ph1 .ib12-g.back{stroke:rgba(159,211,255,.85)}
.ib12.ph3 .ib12-g.vent{stroke:rgba(214,192,255,.9)}
.ib12.ph2 .ib12-heat{opacity:1}
.ib12.ph2 .ib12-bedm .j{animation:ib-jit .32s steps(2,end) infinite}
.ib12.ph4 .ib12-sweep{animation:ib-sweep 1.7s ease-in-out both}
.ib12.hold.ph4 .ib12-sweep{animation:none;opacity:1;transform:translateX(210px)}
.ib12.armed .ib12-ventm{opacity:0}
.ib12.hold.ph3 .ib12-ventm{opacity:1}
.ib12-m{transition:opacity .5s}
@keyframes ib-jit{0%{transform:translate(-1.5px,1px)}50%{transform:translate(1.5px,-1px)}100%{transform:translate(-1.5px,1px)}}
@keyframes ib-sweep{0%{transform:translateX(0);opacity:0}20%,80%{opacity:1}100%{transform:translateX(430px);opacity:0}}
.ib12 .ib-pt .c{fill:#9FD3FF}
/* 등장 */
.ib12.armed:not(.go) .ib12-vis img,.ib12.armed:not(.go) .ib12-ov,.ib12.armed:not(.go) .ib12-z,.ib12.armed:not(.go) .ib12-lg li{opacity:0}
.ib12.go .ib12-vis img{animation:ib-zoom 1.3s var(--ease) both}
.ib12.go .ib12-ov,.ib12.go .ib12-z{animation:ib-in 1s ease .5s both}
.ib12.go .ib12-lg li{animation:ib-up .8s var(--ease) calc(.5s + var(--k) * .1s) both}
.ib12.done .ib12-lg li{animation:none}
@media (min-width:1000px){
  .ib12{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,24vw,300px);grid-template-areas:"top top" "vis lg" "keys keys" "note note";align-items:center}
  .ib12 .ib-top{grid-area:top}
  .ib12-vis{grid-area:vis;margin:0 0 0 clamp(10px,1.6vw,22px)}
  .ib12-lg{grid-area:lg;grid-template-columns:1fr;gap:8px;padding:0 clamp(16px,2.4vw,28px) 0 6px}
  .ib12-lg li{padding:12px 14px 14px;font-size:13.5px}
  .ib12-lg b{font-size:16px}
  .ib12 .ib-keys{grid-area:keys}
  .ib12 .ib-note{grid-area:note}
}
@media (max-width:860px){
  .ib12-lg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .ib12-vis{margin:8px 8px 0}
  .ib12-z{font-size:10.5px}
  .ib12-lg{grid-template-columns:1fr;gap:8px;padding:12px 16px 0}
  .ib12-lg li{grid-template-columns:24px minmax(0,1fr);padding:10px 12px 12px;font-size:13.5px}
  .ib12-lg b{font-size:15.5px}
}

/* ═══════════ 14 지식재산 연표 — 스크롤에 따라 선이 그려지고(--p 0~1) 이정표가 하나씩 켜짐(.lit) ═══════════
   PC: 가로 선 하나에 이정표 8(자리 --x), 카드는 선 위(up) · 아래(dn) 로 엇갈림. 860px 이하: 왼쪽 세로 선 */
.ib14-st{--px:clamp(20px,3vw,40px);position:relative;padding:26px var(--px) 6px}
.ib14-list{position:relative;height:clamp(392px,33vw,420px)}
.ib14-rail{position:absolute;left:var(--px);right:var(--px);top:50%;height:2px;margin-top:-1px;border-radius:2px;background:rgba(150,196,240,.15);z-index:1}
.ib14-fill{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(var(--p,1));
  background:linear-gradient(90deg,#4D9DE0,#7CC1F5 45%,#B48CFF);box-shadow:0 0 12px rgba(92,184,255,.35);will-change:transform}
.ib14-run{position:absolute;inset:0;opacity:0;border-radius:2px;background:linear-gradient(90deg,transparent 0,transparent 42%,rgba(220,240,255,.95) 50%,transparent 50.5%) no-repeat;
  background-size:200% 100%;background-position:100% 0}
/* 연도 숫자: 연혁 면 연표(.tlx)와 같은 말투 — 속이 빈 글씨가 선이 닿으면(.lit) 그라데이션으로 채워짐 */
.ib14-g,.ib14-g>ol{display:contents}
.ib14-yy{position:absolute;z-index:4;top:50%;left:var(--yx);transform:translate(-50%,-50%);padding:1px 12px 3px;border-radius:999px;
  background:#0C1C3B;border:1px solid rgba(150,196,240,.26)}
.ib14-g:first-child .ib14-yy{transform:translate(0,-50%)}
.ib14-yy b{display:block;font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px #8FB0CF;
  background:linear-gradient(90deg,#5CB8FF,#B48CFF) no-repeat 0 0/0% 100%;-webkit-background-clip:text;background-clip:text;
  transition:background-size 1.2s var(--ease) .1s,-webkit-text-stroke-color .6s}
.ib14-g.lit .ib14-yy b,.ib14:not(.armed) .ib14-yy b{background-size:100% 100%;-webkit-text-stroke-color:rgba(0,0,0,0)}
.ib14-i{position:absolute;inset:0;pointer-events:none}
.ib14-node{position:absolute;z-index:3;left:var(--x);top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#0B1A38;border:2px solid rgba(150,196,240,.38);transition:background .5s,border-color .5s,box-shadow .5s,transform .4s var(--ease)}
.ib14-i::before{content:"";position:absolute;left:var(--x);width:1px;height:26px;z-index:2;
  background:linear-gradient(180deg,rgba(150,196,240,.5),rgba(150,196,240,.12));transition:opacity .5s}
.ib14-i.up::before{bottom:calc(50% + 9px)}
.ib14-i.dn::before{top:calc(50% + 9px);transform:scaleY(-1)}
.ib14-card{position:absolute;left:clamp(0%,calc(var(--x) - 10.5%),79%);width:21%;pointer-events:auto;padding:14px 16px 15px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.022));border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .45s var(--ease),border-color .4s,opacity .6s,background .4s}
.ib14-i.up .ib14-card{bottom:calc(50% + 36px)}
.ib14-i.dn .ib14-card{top:calc(50% + 36px)}
.ib14-card time{display:block;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em;color:#7CC1F5}
.ib14-card b{display:block;margin-top:6px;font-size:15.5px;line-height:1.4;color:var(--ink)}
.ib14-sub{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:#98AEC5}
.ib14-card .own{margin:10px 0 0}
.ib .own-a{background:rgba(255,255,255,.07);color:#C9D6E2;border-color:rgba(255,255,255,.16)}
.ib .own-c{background:rgba(233,185,73,.12);color:#F2D9A4;border-color:rgba(233,185,73,.32)}
.ib14-card:hover{transform:translateY(-3px);border-color:rgba(124,193,245,.35)}
.ib14-i.up .ib14-card:hover{transform:translateY(-3px)}
/* 켜진 이정표: 점 색 = 명의 */
.ib14-i.lit .ib14-node{transform:scale(1.15)}
.ib14:not(.armed) .ib14-i.w-lucen .ib14-node,.ib14-i.lit.w-lucen .ib14-node{background:linear-gradient(135deg,#2F8FE0,#8A5CD6);border-color:#B9DCFF;box-shadow:0 0 0 5px rgba(124,193,245,.16)}
.ib14:not(.armed) .ib14-i.w-affil .ib14-node,.ib14-i.lit.w-affil .ib14-node{background:#7F93AB;border-color:#D5E0EB;box-shadow:0 0 0 5px rgba(170,190,215,.14)}
.ib14:not(.armed) .ib14-i.w-ceo .ib14-node,.ib14-i.lit.w-ceo .ib14-node{background:#D9A63E;border-color:#F6E2B3;box-shadow:0 0 0 5px rgba(233,185,73,.16)}
/* 움직일 때만: 선이 지나가기 전에는 카드가 옅고 내려앉아 있음 */
.ib14.armed .ib14-i:not(.lit) .ib14-card{opacity:.12;transform:translateY(10px)}
.ib14.armed .ib14-i.dn:not(.lit) .ib14-card{transform:translateY(-10px)}
.ib14.armed .ib14-i:not(.lit)::before{opacity:0}
.ib14.done .ib14-run{animation:ib-run 7s cubic-bezier(.45,0,.25,1) 1s infinite}
@keyframes ib-run{0%{background-position:100% 0;opacity:0}8%,88%{opacity:1}100%{background-position:0 0;opacity:0}}
@media (max-width:860px){
  .ib.ib14{overflow:hidden;overflow:clip}  /* hidden 은 붙어 따라오는 연도(sticky)를 막음 → clip(지원하는 브라우저만) */
  .ib14-st{--px:18px;padding:10px 18px 6px}
  .ib14-list{height:auto;display:grid;gap:18px;padding-left:34px}
  .ib14-g{display:block;position:relative}
  .ib14-g>ol{display:grid;gap:12px}
  .ib14-yy,.ib14-g:first-child .ib14-yy{position:sticky;top:62px;left:auto;transform:none;display:block;margin:0 -18px 10px -52px;padding:7px 18px 7px;
    border:0;border-radius:0;border-bottom:1px solid rgba(150,196,240,.22);background:#0B1835}
  .ib14-yy b{font-size:clamp(30px,8vw,38px);line-height:1;-webkit-text-stroke-width:1.2px}
  .ib14-rail{left:30px;right:auto;top:18px;bottom:18px;width:2px;height:auto;margin:0}
  .ib14-fill{transform-origin:50% 0;transform:scaleY(var(--p,1))}
  .ib14-run{display:none}
  .ib14-i{position:relative;inset:auto;pointer-events:auto}
  .ib14-i::before{display:none}
  .ib14-node{left:-21px;top:24px}
  .ib14-card,.ib14-i.up .ib14-card,.ib14-i.dn .ib14-card{position:relative;left:auto;top:auto;bottom:auto;width:auto}
  .ib14.armed .ib14-i:not(.lit) .ib14-card,.ib14.armed .ib14-i.dn:not(.lit) .ib14-card{transform:translateX(14px)}
}
@media (min-width:621px) and (max-width:860px){
  .ib14-list{padding-left:0}
  .ib14-rail{left:50%;margin-left:-1px}
  .ib14-g>ol{display:flex;flex-direction:column;gap:0}
  .ib14-i{width:calc(50% - 30px)}
  .ib14-i.up{align-self:flex-start}
  .ib14-i.dn{align-self:flex-end}
  .ib14-i+.ib14-i{margin-top:-62px}
  .ib14-i.up .ib14-node{left:calc(100% + 30px)}
  .ib14-i.dn .ib14-node{left:-30px}
  .ib14-yy,.ib14-g:first-child .ib14-yy{margin-left:-18px}
  .ib14.armed .ib14-i.up:not(.lit) .ib14-card{transform:translateX(-14px)}
}

/* ═══════════ 15 진행 절차 — 유리 칸 넷 + 진행선 + 실증 우회선 + 흐르는 빛 점 ═══════════ */
.ib15-st{position:relative;padding:34px clamp(20px,3vw,40px) 6px}
.ib15-list{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ib15-s{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px}
html:not(.js) .ib15-list::before{content:"";position:absolute;z-index:-1;left:12.5%;right:12.5%;top:41px;height:2px;background:rgba(124,193,245,.45)}
.ib15-ic{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:24px;color:#9FD3FF;
  background:linear-gradient(160deg,rgba(124,193,245,.16),rgba(124,193,245,.03) 60%),#0D1E3E;border:1px solid rgba(124,193,245,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.3);transition:transform .45s var(--ease),border-color .4s}
.ib15-ic svg{width:40px;height:40px}
.ib15-ic::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid rgba(159,211,255,.9);opacity:0;pointer-events:none}
.ib15-ic.ping::after{animation:ib-ping 1s ease-out}
@keyframes ib-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.28)}}
.ib15-s.opt .ib15-ic{color:#D3C0FF;border:1.5px dashed rgba(180,140,255,.6);background:linear-gradient(160deg,rgba(180,140,255,.16),rgba(180,140,255,.03) 60%),#130F35}
.ib15-s.opt .ib15-ic::after{border-color:rgba(214,192,255,.9)}
.ib15-n{margin-top:18px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;color:#7FB8E8}
.ib15-s.opt .ib15-n{color:#C3A8F5}
.ib15-s b{margin-top:6px;font-size:21px;line-height:1.3;color:#fff;letter-spacing:-.01em}
.ib15-d{margin:8px 0 14px;max-width:250px;font-size:14px;line-height:1.65;color:#A9BCD0}
.ib15-tag{margin-top:auto;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;color:#C9DCEE;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.ib15-s.opt .ib15-tag{color:#D3C0FF;background:rgba(180,140,255,.12);border-color:rgba(180,140,255,.35)}
.ib15-s:hover .ib15-ic{transform:translateY(-4px)}
.ib15 .ib-r{stroke:rgba(124,193,245,.5);stroke-width:1.6}
.ib15 .ib-r.by{stroke:rgba(180,140,255,.6);stroke-dasharray:5 6}
.ib15.armed .ib-r.by{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.ib15.done .ib-r.by{stroke-dasharray:5 6}
.ib15-pk .c{fill:#E6F4FF}.ib15-pk .h{fill:#7CC8FF;opacity:.3}
.ib15-back{position:relative;z-index:2;display:flex;justify-content:center;margin-top:26px}
.ib15-back span{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#A8D8FF;padding:10px 18px 10px 14px;border-radius:999px;
  border:1px dashed rgba(124,193,245,.45);background:rgba(124,193,245,.06)}
.ib15-back svg{width:20px;height:20px;flex:none}
.ib15-back span.spin svg{animation:ib-spin 1.4s var(--ease)}
/* 등장: 칸이 차례로 올라오며 아이콘이 그려짐 */
.ib15.armed:not(.go) .ib15-s,.ib15.armed:not(.go) .ib15-back{opacity:0}
.ib15.go .ib15-s{animation:ib-up .9s var(--ease) calc(.15s + var(--k) * .35s) both}
.ib15.go .ib15-back{animation:ib-up .9s var(--ease) 1.7s both}
.ib15.armed .ib15-ic svg path{stroke-dasharray:1;stroke-dashoffset:1}
.ib15.go .ib15-ic svg path{animation:ib-draw 1.2s ease calc(.45s + var(--k) * .35s) forwards}
.ib15.done .ib15-s,.ib15.done .ib15-back{animation:none}
.ib15.done .ib15-ic svg path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
@media (min-width:761px) and (max-width:1000px){.ib15-tag{padding:5px 8px;white-space:nowrap}}
@media (max-width:760px){
  .ib15-st{padding:16px 16px 4px}
  .ib15-list{grid-template-columns:1fr;gap:22px}
  html:not(.js) .ib15-list::before{left:31px;right:auto;top:32px;bottom:32px;width:2px;height:auto}
  .ib15-s{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:start;text-align:left;padding:0}
  .ib15-ic{grid-row:1/span 4;width:64px;height:64px;border-radius:18px}
  .ib15-ic svg{width:32px;height:32px}
  .ib15-n{margin-top:2px}
  .ib15-s b{margin-top:2px;font-size:18px}
  .ib15-d{max-width:none;margin:4px 0 0;font-size:13.5px}
  .ib15-tag{justify-self:start;margin-top:8px}
  .ib15-back{margin-top:22px}
  .ib15-back span{font-size:13px;padding:9px 14px 9px 12px}
}

/* ═══════════ 10 필터 카트리지(.lsc-10, 무대 · 움직임은 main.js) — 다른 인포와 같은 남색 무대 · 표식으로만 맞춤 ═══════════ */
.lsc.lsc-10{max-width:1120px;border-radius:26px;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);isolation:isolate}
.lsc.lsc-10::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.07);pointer-events:none;z-index:40}
.lsc-10 .lsc-top{padding:22px 26px 0;justify-content:flex-end}
.lsc-10 .lsc-cv{color:#D2DDE8;border-color:rgba(255,255,255,.16);background:rgba(8,18,40,.5)}
.lsc-10 .lsc-cyc{border-top-color:rgba(255,255,255,.09)}
.lsc-10 .lsc-cyc-h{font-size:12.5px;color:#86AACB}
.lsc-10 .lsc-cyc li{font-size:15.5px}
.lsc-10 .lsc-cap{font-size:13px;color:#98AEC5}
.lsc-10 .lsc-note{font-size:12.5px;color:#8098B2}
.lsc-10 .lsc-lb b{color:#E3ECF5}
.lsc-10 .lsc-lb>span{color:#A5B8CC}
.lsc-10 .lsc-lb,.lsc-10 .lsc-lb b,.lsc-10 .lsc-lb span{white-space:nowrap}  /* 이름표가 두 줄로 꺾이지 않게(인포 6 과 같음) */
@media (min-width:861px) and (max-height:900px){.lsc.lsc-10{max-width:980px}}
@media (min-width:621px) and (max-width:860px){
  .lsc-10 .lsc-lb b{font-size:12.5px}
  .lsc-10 .lsc-lb>span{display:none}
  .lsc-10 .lsc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;padding:2px 26px 6px}
  .lsc-10 .lsc-list li b{display:block;font-size:13.5px;font-weight:700;color:#D3DEE9}
  .lsc-10 .lsc-list li.em b{color:#fff}
  .lsc-10 .lsc-list li>span{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#A5B8CC}
}
@media (max-width:620px){.lsc-10 .lsc-cyc li{justify-content:flex-start}}

/* ═══════════ 움직임 줄이기 · 인쇄 → 다 나온 정지 그림 ═══════════ */
@media (prefers-reduced-motion:reduce){
  .ib *,.ib *::before,.ib *::after{animation:none!important;transition:none!important}
  .ib .ib-r{stroke-dasharray:none!important;stroke-dashoffset:0!important}
}
@media print{
  .ib *,.ib *::before,.ib *::after{animation:none!important;transition:none!important;opacity:1!important}
  .ib .ib-r,.ib .ib15-ic svg path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .ib .ib14-fill{transform:none!important}
  .ib .ib14-card{transform:none!important}
  .ib .ib-rails .ib-pts{display:none}
  .ib{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}