/* /how 해킹 과정 (2026-10-25) — 공통(.btn·.kpi·머리글)은 index head CSS, 여기는 페이지 전용 + 장면 애니메이션 */
body.how-page{background:#081829;color:#eaf1fa}
body.how-page .sec-eyebrow{color:#ff9a9d}
.hpage .wrap{max-width:1180px}
.hhero{position:relative;overflow:hidden;background:#0A1C33 url('/img/how/hero.webp') right center/cover no-repeat;border-bottom:1px solid rgba(255,255,255,.08)}
.hhero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,28,51,.97) 0,rgba(10,28,51,.9) 45%,rgba(10,28,51,.3) 78%,rgba(10,28,51,.1) 100%)}
.hhero .wrap{position:relative;padding:58px 20px 56px}
.hhero h1{font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1.18;margin:12px 0 0;color:#fff}
.hhero .lead{max-width:60ch;color:#b9c7da;font-size:16.5px;margin:16px 0 0}
.hbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hbadges span{background:rgba(255,90,95,.14);border:1px solid rgba(255,90,95,.4);color:#ffb3b5;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:800}
.hsec{padding:38px 0 0}.hsec-h{margin-bottom:16px}.hsec-h h2{font-size:clamp(20px,2.6vw,26px);font-weight:900;color:#fff;margin:0}.hsec-h p{margin:6px 0 0;color:#9fb6cc;font-size:14px}
/* 장면 */
.flowgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:stretch}
.scenecard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:10px 10px 12px;display:flex;flex-direction:column}
.scene{flex:0 0 auto}
.scenedetail{flex:1;display:flex;gap:12px;align-items:flex-start;margin:10px 4px 0;padding:14px 16px;background:rgba(255,90,95,.06);border:1px solid rgba(255,90,95,.28);border-radius:12px}
.scenedetail .sd-n{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#ff5a5f;color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px}
.scenedetail b{display:block;color:#fff;font-size:16px}.scenedetail p{margin:6px 0 0;color:#cdd9ea;font-size:14px;line-height:1.65}
.scenecard{position:relative}.zoom-btn{position:absolute;top:14px;right:14px;z-index:3;background:rgba(6,18,34,.75);border:1px solid rgba(255,255,255,.22);color:#cdd9ea;border-radius:999px;padding:6px 12px;font:800 12.5px 'NanumSquareNeo',sans-serif;cursor:pointer;backdrop-filter:blur(4px)}.zoom-btn:hover{border-color:#5eead4;color:#fff}.scenecard.zoom .zoom-btn{top:16px;right:22px}
/* 크게 보기 — 같은 카드를 화면 가득 (애니메이션 유지) */
.scenecard.zoom{position:fixed;inset:0;z-index:500;border-radius:0;border:0;background:#071626;padding:18px 22px 16px;overflow:auto}
.scenecard.zoom .scene{width:auto;max-width:100%;height:min(66vh,calc((100vw - 44px) * 700 / 1000));margin:0 auto}
.scenecard.zoom .scenedetail{flex:0 0 auto;max-width:1100px;width:100%;margin:12px auto 0}
.scenecard.zoom .scenedetail b{font-size:20px}.scenecard.zoom .scenedetail p{font-size:16px}
.scenecard.zoom .scenebar{max-width:1100px;width:100%;margin:10px auto 0}
body.scene-zoom{overflow:hidden}
.scene{width:100%;height:auto;display:block;font-family:'NanumSquareNeo',system-ui,sans-serif}
.scene .lbl{fill:#9fb6cc;font-size:14px;font-weight:700}
.scene .net{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.22);stroke-dasharray:6 8;stroke-width:1.5}
.scene .mini rect{fill:#13294a;stroke:rgba(255,255,255,.18);stroke-width:1.2}.scene .mini circle{fill:#4fd6a0}
.scene .vis rect{fill:#13294a;stroke:rgba(255,255,255,.18)}.scene .vis rect:first-child{fill:#1a3356}
.scene .attacker .lap{fill:#0f2440;stroke:#2b4a6f;stroke-width:1.5}.scene .attacker .lscr{fill:url(#scr)}.scene .attacker .code rect{fill:#ff5a5f;opacity:.75}.scene .attacker .base{fill:#1a3356}
.scene .server .unit rect{fill:#13294a;stroke:rgba(255,255,255,.2);stroke-width:1.2}.scene .server .unit circle{fill:#4fd6a0}.scene .server .unit rect:last-child{fill:#1f3d63;stroke:none}
.scene .server .core{fill:rgba(20,184,166,.08);stroke:rgba(94,234,212,.35);stroke-width:1.5;transition:fill .5s,stroke .5s}
.scene .page rect:first-child{fill:#0f2440;stroke:#2b4a6f}.scene .page .pbar{fill:#1a3356}.scene .page circle{fill:#5b7490}.scene .page .pl{fill:#2b4a6f}.scene .page .pbtn{fill:#14B8A6}
.scene .phpb rect{fill:#2f3fa6}.scene .phpb text{fill:#fff;font-size:13px;font-weight:900}.scene .phpb .crack{stroke:#ff5a5f;stroke-width:2.5;fill:none;stroke-linecap:round;opacity:0;transition:opacity .3s}
.scene .route{fill:none;stroke:#ff5a5f;stroke-width:2;stroke-dasharray:8 10;opacity:0;transition:opacity .4s}
.scene .scan circle{fill:none;stroke:#5eead4;stroke-width:2;opacity:0}
.scene .pkt{opacity:0}.scene .pkt circle{fill:#ff5a5f}.scene .pkt .pk2{fill:rgba(255,90,95,.25)}
.scene .shell{opacity:0;transform-origin:858px 462px;transition:opacity .3s}.scene .shell rect{fill:#0b1f3a;stroke:#ff5a5f;stroke-width:2}.scene .shell text{fill:#ff9a9d;font-size:22px;font-weight:900;font-family:ui-monospace,Menlo,monospace}
.scene .shlink{fill:none;stroke:#ff5a5f;stroke-width:1.8;stroke-dasharray:6 9;opacity:0;transition:opacity .4s}
.scene .fly{opacity:0}.scene .fly rect{fill:#14263f;stroke:#ff9a9d;stroke-width:1.5}.scene .fly text{fill:#fff;font-size:14px;font-weight:800}
.scene .spread path{fill:none;stroke:#ff5a5f;stroke-width:1.8;stroke-dasharray:420;stroke-dashoffset:420;opacity:0}
.scene .loot rect{fill:#14263f;stroke:#ff9a9d;stroke-width:1.2;opacity:0}
/* 단계별 */
.scene[data-step="1"] .scan circle{animation:scan 2.4s ease-out infinite}.scene[data-step="1"] .scan circle:nth-child(2){animation-delay:.8s}.scene[data-step="1"] .scan circle:nth-child(3){animation-delay:1.6s}
@keyframes scan{0%{transform:scale(1);opacity:.9}100%{transform:scale(22);opacity:0}}
.scene .scan circle{transform-origin:205px 420px}
.scene[data-step="1"] .mini.old rect,.scene[data-step="2"] .mini.old rect,.scene[data-step="3"] .mini.old rect,.scene[data-step="4"] .mini.old rect{stroke:#f5a24e;fill:#2a2a3a}
.scene[data-step="1"] .mini.old circle,.scene[data-step="2"] .mini.old circle,.scene[data-step="3"] .mini.old circle,.scene[data-step="4"] .mini.old circle{fill:#f5a24e}
.scene[data-step="2"] .route{opacity:.9;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-36}}
.scene[data-step="2"] .pkt{opacity:1}.scene[data-step="2"] .pkt .pk2{animation:pulse 1s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.scene[data-step="3"] .server .core,.scene[data-step="4"] .server .core,.scene[data-step="5"] .server .core{fill:rgba(255,90,95,.14);stroke:#ff5a5f;filter:url(#glow)}
.scene[data-step="3"] .server .core{animation:flash .6s ease-in-out 3}
@keyframes flash{50%{fill:rgba(255,90,95,.45)}}
.scene[data-step="3"] .phpb .crack,.scene[data-step="4"] .phpb .crack,.scene[data-step="5"] .phpb .crack{opacity:1}
.scene[data-step="3"] .server .unit circle,.scene[data-step="4"] .server .unit circle,.scene[data-step="5"] .server .unit circle{fill:#ff5a5f}
.scene[data-step="3"] .page .pbtn,.scene[data-step="4"] .page .pbtn,.scene[data-step="5"] .page .pbtn{fill:#ff5a5f}
.scene[data-step="4"] .shell,.scene[data-step="5"] .shell{opacity:1;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.2)}100%{transform:scale(1)}}
.scene[data-step="4"] .shlink,.scene[data-step="5"] .shlink{opacity:.85;animation:dash 1.1s linear infinite reverse}
.scene[data-step="5"] .fly.on{opacity:1}
.scene[data-step="5"] .spread path{opacity:.85;animation:draw 1.4s ease-out forwards}
.scene[data-step="5"] .spread path:nth-child(2){animation-delay:.3s}.scene[data-step="5"] .spread path:nth-child(3){animation-delay:.6s}.scene[data-step="5"] .spread path:nth-child(4){animation-delay:.8s}.scene[data-step="5"] .spread path:nth-child(5){animation-delay:1s}.scene[data-step="5"] .spread path:nth-child(6){animation-delay:1.3s}.scene[data-step="5"] .spread path:nth-child(7){animation-delay:1.6s}
@keyframes draw{to{stroke-dashoffset:0}}
.scene[data-step="5"] .mini.old rect{stroke:#ff5a5f;fill:#3a1f2a;transition:all .4s 1.6s}.scene[data-step="5"] .mini.old circle{fill:#ff5a5f;transition:fill .4s 1.6s}
.scene[data-step="5"] .vis rect{stroke:#ff5a5f;transition:stroke .4s 1.2s}.scene[data-step="5"] .vis rect:first-child{fill:#3a1f2a;transition:fill .4s 1.2s}
.scene[data-step="5"] .loot rect{opacity:1;transition:opacity .4s}
.scenebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:0 4px}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.steps button{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#cdd9ea;border-radius:999px;padding:6px 12px 6px 6px;font:700 12.5px 'NanumSquareNeo',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.steps button b{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1);display:inline-grid;place-items:center;font-size:11px}
.steps button.on{background:rgba(255,90,95,.16);border-color:rgba(255,90,95,.6);color:#fff}.steps button.on b{background:#ff5a5f;color:#fff}
.replay{margin-left:auto;margin-right:6px;background:none;border:1px solid rgba(94,234,212,.5);color:#5eead4;border-radius:999px;padding:6px 12px;font:800 12.5px 'NanumSquareNeo',sans-serif;cursor:pointer}
.stepcards{display:grid;gap:10px}
.sc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px 14px 56px;position:relative;transition:border-color .3s,background .3s;cursor:pointer}
.sc .n{position:absolute;left:16px;top:15px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);color:#cdd9ea;display:grid;place-items:center;font-weight:900;font-size:13px}
.sc h3{font-size:15px;color:#fff;margin:0}.sc p{margin:6px 0 0;font-size:13.5px;color:#b9c7da;line-height:1.6}.sc p b{color:#ffb3b5}
.sc.on{border-color:rgba(255,90,95,.6);background:rgba(255,90,95,.08)}.sc.on .n{background:#ff5a5f;color:#fff}
/* 전리품 */
.lootgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lc{background:#0A1C33;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden}
.lc img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#0A1C33}
.lc h3{font-size:15px;color:#fff;margin:0;padding:12px 16px 0}.lc p{margin:6px 0 0;padding:0 16px 16px;font-size:13px;color:#b9c7da;line-height:1.6}
/* 왜 위험 · 타임라인 · 막기 */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px}.wc h3{font-size:15.5px;color:#fff;margin:0}.wc p{margin:8px 0 0;font-size:13.5px;color:#b9c7da;line-height:1.65}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tl li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 16px}
.tl time{font-weight:900;color:#ff9a9d;font-variant-numeric:tabular-nums;font-size:15px}.tl b{display:block;color:#fff;font-size:14.5px}.tl span{display:block;color:#9fb6cc;font-size:13px;margin-top:2px;line-height:1.55}
.hcta{text-align:center;padding:44px 0 48px}.hcta h2{font-size:clamp(22px,3vw,30px);color:#fff;margin:0}
.hcta-lead{color:#b9c7da;max-width:66ch;margin:10px auto 0;font-size:15px;line-height:1.65}
.fix{list-style:none;margin:22px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left}
.fix li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:10px}
@supports(grid-template-rows:subgrid){.fix li{display:grid;grid-template-rows:subgrid;grid-row:span 4;align-content:start}.fix .fx{height:100%;box-sizing:border-box}}  /* 세 열의 같은 칸(직접/함정/웹런)이 같은 높이로 — 서브그리드 (2026-10-25 진백 「안의 카드 크기가 같으면」) */.fix>li>b{display:block;color:#fff;font-size:17px;font-weight:900}
.fx{border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.fx.warn{background:rgba(255,90,95,.07);border-color:rgba(255,90,95,.3)}.fx.ok{background:rgba(20,184,166,.09);border-color:rgba(94,234,212,.4)}
.fx-k{display:inline-block;font-size:11.5px;font-weight:900;letter-spacing:.02em;color:#9fb6cc;margin-bottom:4px}.fx.warn .fx-k{color:#ff9a9d}.fx.ok .fx-k{color:#5eead4}
.fx p{margin:0;font-size:13.5px;color:#cdd9ea;line-height:1.6}.fx p b{color:#fff}.fx p em{font-style:normal;color:#5eead4;font-weight:800}
.mcta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.btn-gh{background:rgba(255,255,255,.08);color:#eaf1fa;border:1px solid rgba(255,255,255,.18)}
.hmeth{font-size:12px;color:#7f93ad;max-width:80ch;margin:28px auto 0;line-height:1.7}.hmeth a{color:#9fe3d8}
@media(max-width:960px){.flowgrid{grid-template-columns:1fr}.scenecard{position:static}.lootgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.whygrid,.fix{grid-template-columns:1fr}.hcta{text-align:left}.hcta .mcta{justify-content:flex-start}.hhero::before{background:linear-gradient(180deg,rgba(10,28,51,.9),rgba(10,28,51,.97))}.hhero{background-position:center}}
@media(max-width:560px){.lootgrid{grid-template-columns:1fr 1fr;gap:10px}.lc h3{font-size:14px;padding-top:10px}.lc p{font-size:12px}.hhero .wrap{padding:36px 20px 40px}.scene .lbl{font-size:18px}}