/* Design values and keyframes adapted from the supplied reference. */

body{margin:0;background:#0b1924}
a{color:var(--mint,#82e3cf);text-decoration:none}
a:hover{color:#ffffff}

/* ── 기본 ───────────────────────────── */
.stage{--mint:#82e3cf;--expo:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.76,0,.24,1);--inx:cubic-bezier(.7,0,.84,0);--back:cubic-bezier(.34,1.4,.64,1)}
.stage *{box-sizing:border-box}
.stage.paused,.stage.paused *,.stage.paused *::before,.stage.paused *::after{animation-play-state:paused !important}
.en{font-family:'Archivo','Gothic A1',sans-serif;font-stretch:125%;font-weight:900}
.mono{font-family:'Geist Mono','Gothic A1',ui-monospace,Consolas,monospace}
.outline{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.92)}
.ic-s{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-f{fill:currentColor;flex:none}

/* ── 씬 전환 ─────────────────────────── */
.scene{position:absolute;inset:0;overflow:hidden;--grid:rgba(255,255,255,.05);will-change:transform;animation:cam 11s linear both}
.scene.lt{background:#f4f6f4;color:#142c34;--grid:rgba(20,44,52,.06)}
.scene.gr{background:#28665b;color:#ffffff;--grid:rgba(255,255,255,.09)}
@keyframes cam{from{transform:scale(1)}to{transform:scale(1.035)}}
.scene::before{content:"";position:absolute;inset:-120px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:120px 120px;animation:gridDrift 16s linear infinite}
@keyframes gridDrift{to{transform:translate(120px,-120px)}}
.scene::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 16px);z-index:20;background:var(--next,#0b1924);border-top:8px solid var(--mint);transform:translateY(101%);animation:cover .6s var(--io) var(--out,99s) forwards}
@keyframes cover{to{transform:translateY(-16px)}}

/* ── 공용 모션 ───────────────────────── */
.m{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.m.il{display:inline-block;vertical-align:top}
.r{display:block;transform:translateY(112%) rotate(4deg);transform-origin:left bottom;animation:rise 1.05s var(--expo) forwards}
.r.dn{transform:translateY(-112%) rotate(-4deg);transform-origin:left top}
@keyframes rise{to{transform:translateY(0) rotate(0deg)}}
.fu{opacity:0;animation:fadeUp .9s var(--expo) forwards}
@keyframes fadeUp{from{opacity:0;filter:blur(10px);transform:translateY(34px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
.fi{opacity:0;animation:fadeIn .8s ease forwards}
@keyframes fadeIn{to{opacity:1}}
.gx{transform:scaleX(0);transform-origin:left center;animation:growX 1s var(--io) forwards}
.gx.ctr{transform-origin:center}
@keyframes growX{to{transform:scaleX(1)}}
.gy{transform:scaleY(0);transform-origin:center top;animation:growY .6s var(--io) forwards}
@keyframes growY{to{transform:scaleY(1)}}
.pop{opacity:0;animation:pop .7s var(--back) forwards}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.ty{display:inline-block;white-space:nowrap;clip-path:inset(0 100% 0 0);animation:typeIn 1.2s linear forwards}
@keyframes typeIn{to{clip-path:inset(0 0 0 0)}}
.caret{position:absolute;left:0;top:14%;bottom:10%;width:6px;background:var(--mint);opacity:0;animation:caretOn .01s linear forwards,caretGo 1.2s linear forwards,caretOff .01s linear forwards}
@keyframes caretOn{to{opacity:1}}
@keyframes caretGo{to{left:100%}}
@keyframes caretOff{to{opacity:0}}

/* ── 01 반복되는 확인 ─────────────────── */
.frag{position:absolute;white-space:nowrap}
.frag-in{opacity:0;animation:fragIn 1s var(--expo) forwards}
@keyframes fragIn{from{opacity:0;filter:blur(16px);transform:translateY(34px) scale(1.05)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes drift{from{translate:0 0}to{translate:18px -12px}}
.cv1{animation:drift 5s ease-in-out infinite alternate,conv1 .65s var(--inx) 3.7s forwards}
.cv2{animation:drift 6s ease-in-out infinite alternate-reverse,conv2 .65s var(--inx) 3.76s forwards}
.cv3{animation:drift 4.4s ease-in-out infinite alternate,conv3 .65s var(--inx) 3.82s forwards}
.cv4{animation:drift 5.6s ease-in-out infinite alternate-reverse,conv4 .65s var(--inx) 3.88s forwards}
@keyframes conv1{to{transform:translate(200px,250px) scale(.8,.02);opacity:0;filter:blur(6px)}}
@keyframes conv2{to{transform:translate(-160px,92px) scale(.8,.02);opacity:0;filter:blur(6px)}}
@keyframes conv3{to{transform:translate(160px,-86px) scale(.8,.02);opacity:0;filter:blur(6px)}}
@keyframes conv4{to{transform:translate(-130px,-262px) scale(.8,.02);opacity:0;filter:blur(6px)}}

.grain{animation:grain 1s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-70px,40px)}40%{transform:translate(50px,-90px)}60%{transform:translate(-110px,-30px)}80%{transform:translate(90px,70px)}}
.bands{position:absolute;inset:0;transform-origin:50% 540px;opacity:0;animation:fadeIn 1.2s ease .2s forwards,squash .6s var(--inx) 3.7s forwards}
@keyframes squash{to{transform:scaleY(0);opacity:0}}
.band{position:absolute;left:-700px;white-space:nowrap;font-size:214px;font-weight:900;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.13);animation:bandL 9s linear infinite}
.band.rv{animation-name:bandR}
@keyframes bandL{from{transform:translateX(0)}to{transform:translateX(-640px)}}
@keyframes bandR{from{transform:translateX(-640px)}to{transform:translateX(0)}}

/* ── 02 타이틀 ───────────────────────── */
.cab{opacity:0;animation:cabIn 1.7s var(--expo) .7s forwards}
@keyframes cabIn{from{opacity:0;transform:translateY(110px) scale(1.06)}to{opacity:1;transform:translateY(0) scale(1)}}
.cab-img{animation:slowPush 7s linear forwards}
@keyframes slowPush{from{transform:scale(1)}to{transform:scale(1.035)}}
.cab-scan{opacity:0;box-shadow:0 0 28px 4px var(--mint);animation:scanDown 1.9s var(--io) 1.9s forwards}
@keyframes scanDown{0%{opacity:0;transform:translateY(40px)}12%{opacity:.9}88%{opacity:.9}100%{opacity:0;transform:translateY(770px)}}

/* ── 03 제품 구성 ─────────────────────── */
.floaty{animation:floatY 4.5s ease-in-out infinite alternate}
@keyframes floatY{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.plate{position:absolute;inset:0;border-radius:32px;opacity:0;animation:plate0 1.1s var(--back) forwards}
.pz0{transform:translateZ(0);box-shadow:-4px 4px 0 #050d13,-8px 8px 0 #050d13,-12px 12px 0 #050d13,-16px 16px 0 #050d13,-20px 20px 0 #050d13,-24px 24px 0 #050d13}
.pz1{transform:translateZ(92px);animation-name:plate1;box-shadow:-4px 4px 0 #173f38,-8px 8px 0 #173f38,-12px 12px 0 #173f38,-16px 16px 0 #173f38,-20px 20px 0 #173f38,-24px 24px 0 #173f38}
.pz2{transform:translateZ(184px);animation-name:plate2;box-shadow:-4px 4px 0 #4fae9b,-8px 8px 0 #4fae9b,-12px 12px 0 #4fae9b,-16px 16px 0 #4fae9b,-20px 20px 0 #4fae9b,-24px 24px 0 #4fae9b}
.pz3{transform:translateZ(276px);animation-name:plate3;border:3px solid #142c34;box-shadow:-4px 4px 0 #142c34,-8px 8px 0 #142c34,-12px 12px 0 #142c34,-16px 16px 0 #142c34,-20px 20px 0 #142c34,-24px 24px 0 #142c34}
@keyframes plate0{from{opacity:0;transform:translateZ(340px)}to{opacity:1;transform:translateZ(0)}}
@keyframes plate1{from{opacity:0;transform:translateZ(432px)}to{opacity:1;transform:translateZ(92px)}}
@keyframes plate2{from{opacity:0;transform:translateZ(524px)}to{opacity:1;transform:translateZ(184px)}}
@keyframes plate3{from{opacity:0;transform:translateZ(616px)}to{opacity:1;transform:translateZ(276px)}}
.plate-t{position:absolute;left:32px;bottom:24px;font-size:40px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.chip-k{display:inline-block;padding:10px 20px;border-radius:999px;background:#142c34;color:#ffffff;font-size:24px;font-weight:700}

/* ── 04 내부망 ───────────────────────── */
.orbit{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:2 16;transform-origin:400px 400px;animation:spin 70s linear infinite}
.ring{fill:none;stroke:var(--mint);stroke-width:3;stroke-dasharray:2011;stroke-dashoffset:2011;transform-origin:400px 400px;transform:rotate(-90deg);animation:dash0 1.7s var(--io) .5s forwards}
.ring-scan{fill:none;stroke:#ffffff;stroke-width:5;stroke-linecap:round;stroke-dasharray:70 1941;opacity:0;animation:fadeIn .6s ease 2.3s forwards,ringRun 5s linear 2.3s infinite}
.spoke{stroke:var(--mint);stroke-opacity:.55;stroke-width:2;stroke-dasharray:212;stroke-dashoffset:212;animation:dash0 .7s var(--io) forwards}
@keyframes dash0{to{stroke-dashoffset:0}}
@keyframes ringRun{from{stroke-dashoffset:0}to{stroke-dashoffset:-2011}}
@keyframes spin{to{transform:rotate(360deg)}}
.sat{position:absolute;width:108px;height:108px;border-radius:50%;border:2px solid var(--mint);background:#0b1924;color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;z-index:2}
.halo{opacity:0;animation:halo 2.6s ease-out 2.4s infinite}
@keyframes halo{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
.pulse{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--mint);opacity:0;z-index:1}
.pu1{animation:pu1 1.7s linear 3s infinite}
.pu2{animation:pu2 1.7s linear 3.5s infinite}
.pu3{animation:pu3 1.7s linear 4s infinite}
@keyframes pu1{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(0,210px)}}
@keyframes pu2{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(182px,-105px)}}
@keyframes pu3{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(-182px,-105px)}}

/* ── 05 수명주기 ─────────────────────── */
.node{display:block;position:relative;z-index:1;margin-top:36px;width:28px;height:28px;border-radius:50%;background:#28665b;box-shadow:0 0 0 7px #f4f6f4}
.rec{display:inline-block;margin-top:10px;padding:12px 16px;border-radius:10px;background:var(--mint);color:#0b1924;font-size:22px;font-weight:800;letter-spacing:-.02em;transform-origin:left center}

/* ── 일정 간트 ───────────────────────── */
.grow{display:grid;grid-template-columns:110px 380px minmax(0,1fr) 290px;gap:24px;align-items:center;height:60px;border-top:1px solid rgba(255,255,255,.24);opacity:0;animation:fadeUp .7s var(--expo) forwards}
.gtrack{position:relative;display:block;height:26px;border-radius:13px;background:rgba(11,25,36,.3)}
.gbar{position:absolute;top:0;bottom:0;border-radius:13px;background:var(--mint);transform:scaleX(0);transform-origin:left center;animation:growX .9s var(--expo) forwards}
.gsweep{position:absolute;left:538px;top:36px;width:2px;height:540px;background:#ffffff;opacity:0;animation:gsweep 3.2s linear 1.4s forwards}
@keyframes gsweep{0%{opacity:0;transform:translateX(0)}5%{opacity:.9}95%{opacity:.9}100%{opacity:0;transform:translateX(828px)}}

/* ── 07 AI 초안 ──────────────────────── */
.gen{display:block;height:14px;border-radius:7px;background:rgba(20,44,52,.16);transform:scaleX(0);transform-origin:left center;animation:genLine .75s var(--io) forwards}
@keyframes genLine{0%{transform:scaleX(0);background:var(--mint)}65%{transform:scaleX(1);background:var(--mint)}100%{transform:scaleX(1);background:rgba(20,44,52,.16)}}
.okc{display:inline-flex;align-items:center;gap:8px;justify-self:end;padding:9px 16px 9px 12px;border-radius:999px;background:#28665b;color:#ffffff;font-size:18px;font-weight:700;white-space:nowrap}
.scanbar{position:absolute;left:0;right:0;top:170px;height:110px;background:linear-gradient(to bottom,rgba(40,102,91,0),rgba(40,102,91,.16));border-bottom:2px solid #28665b;opacity:0;animation:scanDoc 1.6s var(--io) 4.1s forwards}
@keyframes scanDoc{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(285px)}}
.stamp{opacity:0;animation:stamp .5s cubic-bezier(.2,1.3,.3,1) 5.8s forwards}
@keyframes stamp{from{opacity:0;transform:scale(2.4)}to{opacity:1;transform:scale(1)}}

/* ── 08 근거 연결 ─────────────────────── */
.card{position:relative;height:236px;padding:26px;border-radius:18px;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.03);opacity:0;animation:fadeUp .9s var(--expo) forwards,lit .5s ease forwards}
@keyframes lit{to{border-color:var(--mint);background:rgba(130,227,207,.09)}}
.link{position:absolute;right:-37.5px;top:50%;width:36px;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:left center;animation:growX .4s var(--io) forwards}
.ride{position:absolute;left:113px;top:303px;width:14px;height:14px;border-radius:50%;background:var(--mint);box-shadow:0 0 20px 2px var(--mint);opacity:0;animation:ride 1.55s linear 2.95s forwards}
@keyframes ride{0%{opacity:0;transform:translateX(0)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateX(1680px)}}

/* ── 09 보안과 감사 ───────────────────── */
.r.flash{animation:rise 1.05s var(--expo) forwards,flash 1s ease both}
@keyframes flash{0%,100%{color:#ffffff}35%,65%{color:var(--mint)}}

/* ── 10 기록 보존 ─────────────────────── */
.strip{display:flex;align-items:center;justify-content:space-between;height:72px;margin-bottom:14px;padding:0 24px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);opacity:0;animation:slideL .9s var(--expo) forwards}
@keyframes slideL{from{opacity:0;transform:translateX(140px)}to{opacity:1;transform:translateX(0)}}
.frame{opacity:0;animation:frameIn .8s var(--expo) 2.2s forwards}
@keyframes frameIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}

/* ── 11 검증 범위 ─────────────────────── */
.odo{display:flex;align-items:flex-start;height:1em;line-height:1em;overflow:hidden;font-variant-numeric:tabular-nums}
.oc{display:block;animation:roll12 2.2s var(--expo) both}
.dg{display:block;height:1em;line-height:1em;text-align:center}
@keyframes roll11{from{transform:translateY(0)}to{transform:translateY(-11em)}}
@keyframes roll12{from{transform:translateY(0)}to{transform:translateY(-12em)}}
@keyframes roll14{from{transform:translateY(0)}to{transform:translateY(-14em)}}
@keyframes roll15{from{transform:translateY(0)}to{transform:translateY(-15em)}}
@keyframes roll17{from{transform:translateY(0)}to{transform:translateY(-17em)}}
.tchip{display:inline-block;padding:12px 24px;border-radius:999px;border:2px solid #28665b;color:#28665b;font-size:22px;font-weight:800}

/* ── 12 도입 문의 ─────────────────────── */
.photo{clip-path:inset(100% 0 0 0 round 26px);animation:photoIn 1.4s var(--expo) .5s forwards}
@keyframes photoIn{to{clip-path:inset(0 0 0 0 round 26px)}}
.photo-img{animation:photoPush 9.5s linear forwards}
@keyframes photoPush{from{transform:scale(1.02)}to{transform:scale(1.1)}}

/* ── 플레이어 ─────────────────────────── */

/* Accessible production player; controls stay outside the scaled artboard. */
:root{color-scheme:dark;--mint:#82e3cf}
html,body{margin:0;width:100%;background:#0b1924;color:#f4f6f4;font-family:'Gothic A1','Noto Sans KR','Malgun Gothic',sans-serif}
body{overflow-x:clip}button,select,input{font:inherit}button,a,input,select{touch-action:manipulation}
html.is-embedded,html.is-embedded body{overflow:hidden}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.viewport:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.player{width:100%;margin:0 auto;background:#0b1924}
.viewport{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0b1924;isolation:isolate}
.stage{position:absolute!important;inset:0 auto auto 0;width:1920px;height:1080px;transform-origin:top left;color:#fff;font-family:'Gothic A1','Noto Sans KR','Malgun Gothic',sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased}
.scene[data-last]::after{display:none}
.chrome{position:absolute;top:40px;z-index:5;font-size:14px;letter-spacing:.14em;color:var(--chrome,rgba(255,255,255,.6));pointer-events:none}
.chrome-brand{left:48px}.chrome-chapter{right:48px}
.start-cover{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,20,29,.84);padding:20px;text-align:center;box-sizing:border-box}
.start-cover[hidden]{display:none}.start-cover strong{font-family:'Archivo','Gothic A1',sans-serif;font-size:clamp(26px,5vw,70px);font-weight:900;letter-spacing:.03em}.start-cover span{font-size:clamp(13px,1.6vw,20px);line-height:1.6;color:#c8dad8}.cover-detail{display:block}
.control-area{padding:14px 18px 12px;box-sizing:border-box;border-top:1px solid #314650;background:#10232e}
.control-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.control-row button,.start-cover button{border:1px solid #456069;border-radius:8px;background:#173541;color:#f4f6f4;min-width:44px;min-height:44px;padding:9px 13px;cursor:pointer;font-size:14px;font-weight:700}
.control-row button:hover,.start-cover button:hover{background:#255264}.control-row .primary,.start-cover .primary{background:var(--mint);color:#0b1924;border-color:var(--mint)}
.control-row button:disabled{opacity:.5;cursor:default}.control-row select{min-height:44px;max-width:100%;padding:8px;border:1px solid #456069;border-radius:8px;background:#173541;color:white;font-size:14px}
.motion-label{display:flex;align-items:center;gap:8px;font-size:13px}.time{margin-left:auto;font-variant-numeric:tabular-nums;font-family:'Geist Mono',monospace;font-size:14px;white-space:nowrap}
.timeline{display:flex;align-items:center;gap:12px;margin-top:5px}.timeline input{width:100%;min-height:44px;accent-color:var(--mint);margin:0;cursor:pointer}.chapter-label{font-size:13px;min-width:120px;color:#dbe8e7}.control-note{margin:2px 0 0;font-size:12px;line-height:1.7;color:#bed0d2}.chapter-list{margin-top:6px}.chapter-list summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:#dbe8e7;font-size:13px}.chapter-list summary::before{content:'＋';margin-right:8px}.chapter-list[open] summary::before{content:'−'}.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;padding:3px 0 10px}.chapters button{min-height:44px;border:1px solid #3c555f;border-radius:6px;background:#173541;color:#fff;padding:10px;text-align:left;cursor:pointer;font-size:13px;line-height:1.5}.chapters button[aria-current=true]{border-color:var(--mint);color:var(--mint);background:#1c4248}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.player:fullscreen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;background:#07121a}.player:fullscreen .viewport{flex:none;max-width:100%}.player:fullscreen .control-area{flex:none;width:100%;max-width:1920px}.player:fullscreen .chapter-list[open]{max-height:170px;overflow:auto}
@media(max-width:600px){.control-area{padding:10px}.control-row{gap:6px}.control-row button{padding:8px 10px}.motion-label{width:100%}.time{margin-left:auto}.chapter-label{min-width:92px;font-size:12px}.control-note{font-size:11px}.start-cover{gap:6px;padding:10px;background:#0b1924}.start-cover strong{font-size:20px;line-height:1.1}.start-cover .cover-summary{font-size:12px;line-height:1.45;white-space:nowrap}.start-cover .cover-name,.start-cover .cover-detail{display:none}}
@media(prefers-reduced-motion:reduce){.chrome{transition:none}}