:root{--bg:#f7fafc;--paper:#fff;--ink:#172033;--muted:#5c6b7d;--line:#d7e0ea;--blue:#2563eb;--green:#159957;--orange:#f28c28;--red:#e84a5f;--purple:#7c3aed;--shadow:0 24px 70px rgba(26,41,61,.14)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{position:relative;overflow:hidden;background:var(--bg);color:var(--ink);font-family:"Nanum Gothic",system-ui,sans-serif}button{font:inherit}h1,h2,h3,p{margin:0}
.deck{position:absolute;top:50%;left:50%;width:1920px;height:1080px;container-type:size;overflow:hidden;transform:translate(-50%,-50%) scale(var(--deck-scale,1));transform-origin:center;background:var(--paper);box-shadow:var(--shadow)}
.slide{position:absolute;inset:0;display:none;padding:40px 44px;flex-direction:column;gap:18px}.slide.active{display:flex}.slide::before{position:absolute;inset:0 0 auto;height:12px;background:linear-gradient(90deg,var(--blue),var(--green),var(--orange));content:""}
.slide-header{position:relative}.unit{margin-bottom:6px;color:var(--blue);font-size:34px;font-weight:900}.page-ref{position:absolute;top:4px;right:0;border:2px solid var(--line);border-radius:999px;padding:8px 16px;background:#f6f8fb;color:var(--muted);font-size:23px;font-weight:900}h1{font-size:74px;line-height:1}.subtitle{margin-top:10px;color:var(--muted);font-size:30px;font-weight:800}.subtitle strong{color:var(--blue)}
.before-after{display:grid;flex:1;grid-template-columns:1fr 76px 1fr;gap:16px}.before-after>article{display:flex;flex-direction:column;gap:16px;border:2px solid var(--line);border-top:11px solid var(--orange);border-radius:10px;padding:22px;background:#fffaf3}.before-after>article:last-child{border-top-color:var(--blue);background:#f6f9ff}.before-after header span{border-radius:999px;padding:8px 14px;background:#fff0da;color:#b85d0e;font-size:20px;font-weight:900}.before-after article:last-child header span{background:#eaf1ff;color:var(--blue)}.before-after h2{font-size:40px}.versus{display:grid;place-items:center;color:#8a98a9;font-size:30px;font-weight:900}.before-after p{color:var(--muted);font-size:24px;font-weight:800}
.visual-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;flex:1}.visual-row.four{grid-template-columns:repeat(4,1fr)}
.vcard{display:flex;flex-direction:column;gap:12px;border:2px solid var(--line);border-radius:16px;padding:22px;background:#fff}.vcard .emoji{font-size:64px;text-align:center}.vcard h3{font-size:28px;text-align:center}.vcard p{color:var(--muted);font-size:20px;font-weight:700;text-align:center}
.vcard.blue{border-top:8px solid var(--blue)}.vcard.green{border-top:8px solid var(--green)}.vcard.orange{border-top:8px solid var(--orange)}.vcard.purple{border-top:8px solid var(--purple)}
.diagram{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:18px;border-radius:16px;background:#f8fafc;border:2px solid var(--line)}
.diagram .node{min-width:140px;padding:16px;border-radius:14px;background:#fff;border:2px solid var(--line);text-align:center;font-size:22px;font-weight:900}.diagram .node.hi{background:var(--blue);color:#fff}.diagram .arrow{font-size:28px;font-weight:900;color:var(--muted)}
.scene{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;flex:1}.scene .panel{border:2px solid var(--line);border-radius:16px;padding:22px;background:#fff}.scene .art{display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#fff7ed,#ffedd5);border:2px solid #fed7aa;font-size:100px}
.hero-visual{display:grid;place-items:center;min-height:220px;border-radius:20px;background:radial-gradient(circle at 30% 30%,#dbeafe,#eff6ff);border:2px solid #bfdbfe;position:relative}.hero-visual .big{font-size:120px}.hero-visual .orbit{position:absolute;width:180px;height:180px;border:3px dashed #93c5fd;border-radius:50%;opacity:.55}
.badge-list{display:flex;flex-wrap:wrap;gap:10px}.badge-list span{border-radius:999px;padding:10px 16px;background:#eef2ff;color:#3730a3;font-weight:800}
.nav-zone{position:fixed;top:0;bottom:0;z-index:5;width:12cqw;border:0;background:transparent;cursor:pointer}.nav-prev{left:0}.nav-next{right:0}.nav-zone span{position:absolute;top:50%;width:30px;height:30px;opacity:.28;transform:translateY(-50%) rotate(45deg)}.nav-prev span{left:20px;border-bottom:6px solid var(--ink);border-left:6px solid var(--ink)}.nav-next span{right:20px;border-top:6px solid var(--ink);border-right:6px solid var(--ink)}.footer{position:fixed;right:22px;bottom:18px;left:22px;z-index:6;display:flex;justify-content:center;gap:18px;pointer-events:none}.footer p{border-radius:999px;padding:7px 12px;background:rgba(255,255,255,.86);color:var(--muted);font-weight:900}.dots{display:flex;gap:8px;pointer-events:auto}.dot{width:12px;height:12px;border:0;border-radius:50%;background:#b6c4d6;cursor:pointer}.dot.active{width:34px;border-radius:999px;background:var(--blue)}