:root { --charcoal:#1A1A1A; --warm-gray:#4A4A4A; --emerald:#00B894; --off-white:#F8F8F8; --light-gray:#E0E0E0; --font-size-base:clamp(16px,1.1vw,64px); }
/* A slide is height-constrained, not width-constrained: on a short-but-wide
   window (e.g. 1280x720) width-only scaling keeps type large while the
   available height collapses, and dense slides overflow. Desktop therefore
   scales on whichever axis is scarcer. Phones keep the width-based floor. */
@media (min-width:769px){ :root { --font-size-base:clamp(13px,min(1.1vw,2.15vh),64px); } }
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:calc(var(--font-size-base) * var(--font-scale, 1));-webkit-text-size-adjust:100%}
body{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#F8F8F8;color:#1A1A1A;line-height:1.6;overflow:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:700;line-height:1.2} h1{font-size:3.4rem;letter-spacing:-0.02em;margin-bottom:0.5em} h2{font-size:2.6rem;letter-spacing:-0.01em;margin-bottom:1.2em} h3{font-size:1.15rem;font-weight:500;color:#4A4A4A;margin-bottom:1.5em;letter-spacing:0.1em}
p{margin-bottom:1em} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:transparent} button:focus{outline:none} ul,ol{list-style:none}
::selection{background:#00B894;color:white} ::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border-radius:4px} *{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.2) transparent}

.highlight{color:#00B894;font-weight:700} .divider{width:60px;height:1px;background:#E0E0E0;margin:2em 0} .tagline{font-size:1.4rem;color:#4A4A4A;margin-bottom:1.5em;font-weight:400}
.sub-features{margin-bottom:2em;margin-top:1.5em} .sub-features p{font-size:1.15rem;color:#4A4A4A;font-weight:400;line-height:1.9}

.slides-container{width:100vw;height:100vh;position:relative;z-index:1}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;padding:8vh 10vw;display:flex;flex-direction:column;justify-content:center;align-items:center}
.slide-content{width:100%;max-width:clamp(900px,56vw,4500px)} .slide-content-wide{max-width:clamp(1000px,62vw,5000px)}

.slide-split .slide-content{max-width:clamp(1100px,72vw,5500px);display:flex;align-items:center;gap:5em}
.slide-split-text{flex:1;min-width:0} .slide-split-visual{flex:0 0 38%;max-width:clamp(360px,24vw,1800px)}

.img-placeholder{position:relative;border-radius:clamp(14px,0.9vw,40px);background:linear-gradient(145deg,rgba(0,0,0,0.015),rgba(0,0,0,0.035));border:1.5px dashed rgba(0,0,0,0.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.8em;overflow:hidden;aspect-ratio:4/3}
.img-placeholder::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 25% 35%,rgba(0,184,148,0.04),transparent 50%),radial-gradient(circle at 75% 65%,rgba(100,140,220,0.025),transparent 50%);pointer-events:none}
.img-placeholder-icon{color:rgba(0,0,0,0.12);position:relative;z-index:1} .img-placeholder-label{position:relative;z-index:1;font-size:0.82rem;font-weight:500;letter-spacing:0.06em;color:rgba(0,0,0,0.18)}
.img-placeholder-hint{position:relative;z-index:1;font-size:0.72rem;color:rgba(0,0,0,0.12);max-width:200px;text-align:center;line-height:1.5}
.img-placeholder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:clamp(14px,0.9vw,40px)}
.slide-dark .img-placeholder,.slide-cover .img-placeholder{background:linear-gradient(145deg,rgba(255,255,255,0.02),rgba(255,255,255,0.04));border-color:rgba(255,255,255,0.1)}
.slide-dark .img-placeholder::before,.slide-cover .img-placeholder::before{background:radial-gradient(circle at 25% 35%,rgba(0,184,148,0.06),transparent 50%),radial-gradient(circle at 75% 65%,rgba(100,180,220,0.04),transparent 50%)}
.slide-dark .img-placeholder-icon{color:rgba(255,255,255,0.1)} .slide-dark .img-placeholder-label{color:rgba(255,255,255,0.15)} .slide-dark .img-placeholder-hint{color:rgba(255,255,255,0.1)}
.img-placeholder-banner{aspect-ratio:21/6;border-radius:clamp(12px,0.8vw,36px);margin-bottom:2.5em}

.slide-cover{background:transparent}
.slide-cover .slide-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.slide-cover h3{color:rgba(255,255,255,0.6);font-size:1rem;letter-spacing:0.25em;margin-bottom:1.5em}
.slide-cover h1{color:rgba(255,255,255,0.95);font-size:3.2rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:0.8em;line-height:1.2}
.slide-cover .tagline{color:rgba(255,255,255,0.55);font-size:1.15rem;font-weight:400;line-height:1.7}
.slide-cover .divider{background:rgba(255,255,255,0.2);width:80px;margin:2.5em auto}

.aurora-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0a0a12 0%,#0d1117 50%,#0a0a12 100%);overflow:hidden}
.aurora-bg::before,.aurora-bg::after{content:'';position:absolute;width:200%;height:200%;top:-50%;left:-50%;animation:aurora 15s ease-in-out infinite}
.aurora-bg::before{background:radial-gradient(ellipse at 30% 20%,rgba(80,200,180,0.15),transparent 50%),radial-gradient(ellipse at 70% 60%,rgba(100,140,220,0.12),transparent 45%),radial-gradient(ellipse at 40% 80%,rgba(160,100,200,0.1),transparent 40%)}
.aurora-bg::after{background:radial-gradient(ellipse at 60% 30%,rgba(60,180,200,0.12),transparent 45%),radial-gradient(ellipse at 20% 70%,rgba(140,120,220,0.1),transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(80,160,180,0.08),transparent 40%);animation-delay:-7s}
@keyframes aurora{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}25%{transform:translate(2%,1%) rotate(1deg) scale(1.02)}50%{transform:translate(-1%,2%) rotate(-1deg) scale(0.98)}75%{transform:translate(-2%,-1%) rotate(0.5deg) scale(1.01)}}
.aurora-glow{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(120px);opacity:0.4;animation:glow-pulse 8s ease-in-out infinite}
.aurora-glow-1{top:-20%;left:10%;background:linear-gradient(180deg,rgba(60,200,180,0.3),rgba(80,140,200,0.2))}
.aurora-glow-2{top:30%;right:-10%;background:linear-gradient(180deg,rgba(100,120,200,0.25),rgba(140,100,180,0.15));animation-delay:-3s}
.aurora-glow-3{bottom:-10%;left:30%;background:linear-gradient(180deg,rgba(80,180,160,0.2),rgba(60,140,180,0.15));animation-delay:-5s}
@keyframes glow-pulse{0%,100%{transform:scale(1);opacity:0.4}50%{transform:scale(1.1);opacity:0.5}}

.text-gradient-animate{background:linear-gradient(90deg,#00B894,#55EFC4,#00CEC9,#55EFC4,#00B894);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gs 3s ease-in-out infinite}
.text-gradient-animate-light{background:linear-gradient(90deg,#4ECDC4,#44A08D,#6DD5ED,#44A08D,#4ECDC4);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gs 3s ease-in-out infinite}
@keyframes gs{0%,100%{background-position:0% center}50%{background-position:100% center}}

/* Background Animations */
.bg-fx{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;overflow:hidden}
.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0;animation:od 30s ease-in-out infinite}
.bg-orb.v{opacity:1;transition:opacity 0.8s ease}
.bg-orb-a{width:500px;height:500px;top:-10%;left:-5%;background:rgba(0,184,148,0.04)} .bg-orb-b{width:400px;height:400px;bottom:-5%;right:-5%;background:rgba(100,140,220,0.035);animation-delay:-12s} .bg-orb-c{width:350px;height:350px;top:40%;left:50%;background:rgba(80,180,160,0.03);animation-delay:-20s}
@keyframes od{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(0.95)}}
.bg-particle{position:absolute;border-radius:50%;opacity:0;animation:pf 25s ease-in-out infinite} .bg-particle.v{opacity:1;transition:opacity 0.8s ease}
@keyframes pf{0%,100%{transform:translate(0,0)}25%{transform:translate(60px,-40px)}50%{transform:translate(-30px,-70px)}75%{transform:translate(40px,-20px)}}
.bg-scanline{position:absolute;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,184,148,0.25),transparent);animation:sl 8s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes sl{0%{top:-1px;opacity:0}10%{opacity:0.6}90%{opacity:0.6}100%{top:100%;opacity:0}}
.bg-grid{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;opacity:0;background-image:linear-gradient(rgba(0,184,148,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,184,148,0.03) 1px,transparent 1px);background-size:80px 80px;animation:gd 30s linear infinite;transition:opacity 0.6s ease}
.bg-grid.v{opacity:1} @keyframes gd{0%{transform:translate(0,0)}100%{transform:translate(80px,80px)}}

/* Dark Theme */
.slide-dark{background:#0a0a12}
.slide-dark::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right,#0a0a12 0%,transparent 30%,transparent 70%,#0a0a12 100%);z-index:1;pointer-events:none}
.slide-dark .slide-content{position:relative;z-index:2}
.slide-dark h2,.slide-dark .content-title,.slide-dark .content-desc,.slide-dark .conclusion{color:rgba(255,255,255,0.9)}
.slide-dark h3{color:rgba(255,255,255,0.5)} .slide-dark .content-item{border-bottom-color:rgba(255,255,255,0.15)} .slide-dark .highlight{color:#2BE8B6} .slide-dark .divider{background:rgba(255,255,255,0.15)}

/* Content Patterns */
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5em 5em;margin-top:1em}
.content-grid-3{grid-template-columns:1fr 1fr 1fr;gap:2em 3.5em} .content-grid-3 .content-item{padding:0.8em 0} .content-grid-3 .content-title{font-size:1.15rem} .content-grid-3 .content-desc{font-size:0.95rem}
.content-item{padding:1em 0;border-bottom:1px solid #E0E0E0} .content-title{font-size:1.25rem;font-weight:600;margin-bottom:0.5em;color:#1A1A1A} .content-desc{font-size:1.05rem;color:#4A4A4A;line-height:1.7}
.stats{display:flex;gap:4em;margin-top:1em} .stat-item{text-align:left} .stat-value{font-size:2.6rem;font-weight:700;color:#00B894} .stat-label{font-size:1.05rem;color:#4A4A4A;margin-top:0.3em}
.conclusion{margin-top:2em;font-size:1.2rem;color:#1A1A1A;font-weight:500}

/* Summary Cards */
.sum-card{border:1px solid #E0E0E0;border-radius:clamp(12px,0.8vw,32px);padding:1.8em 2.2em;margin-bottom:1.5em}
.sum-card-ao{border-color:rgba(0,184,148,0.25);background:rgba(0,184,148,0.02)}
.sum-card-vo{border-color:rgba(26,26,26,0.12);background:rgba(26,26,26,0.015)}
.sum-card-name{font-size:1.4rem;font-weight:700;color:#1A1A1A;margin-bottom:0.15em}
.sum-card-name.accent{color:#00B894}
.sum-card-desc{font-size:0.95rem;color:#4A4A4A;line-height:1.7}
.sum-children{display:grid;grid-template-columns:1fr 1fr;gap:1.2em;margin-top:1.3em}
.sum-child{padding:1.2em 1.5em;border:1px solid #E0E0E0;border-radius:clamp(8px,0.5vw,20px);background:white}
.sum-child-name{font-size:1.05rem;font-weight:600;color:#1A1A1A;margin-bottom:0.15em}
.sum-child-sub{font-size:0.7rem;color:#00B894;font-weight:500;letter-spacing:0.06em;margin-bottom:0.5em}
.sum-child-desc{font-size:0.88rem;color:#4A4A4A;line-height:1.6}

/* Comparison Layout */
.cmp-layout{display:flex;gap:3em;margin-top:1.5em;width:100%}
.cmp-col{flex:1;padding:2em;border-radius:clamp(12px,0.8vw,32px)}
.cmp-old{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08)}
.cmp-new{background:rgba(0,184,148,0.08);border:1px solid rgba(0,184,148,0.3)}
.cmp-title{font-size:1.3rem;font-weight:700;color:rgba(255,255,255,0.85);margin-bottom:0.2em}
.cmp-sub{font-size:0.88rem;color:rgba(255,255,255,0.35);margin-bottom:1.2em;padding-bottom:0.8em;border-bottom:1px solid rgba(255,255,255,0.08)}
.cmp-item{padding:0.4em 0 0.4em 1.2em;font-size:0.95rem;color:rgba(255,255,255,0.5);line-height:1.6;position:relative}
.cmp-item::before{content:'·';position:absolute;left:0;font-weight:700}
.cmp-new .cmp-title{color:#00B894} .cmp-new .cmp-item{color:rgba(255,255,255,0.85)}
.cmp-new .cmp-item::before{color:#00B894}

/* Quote */
.quote-block{font-size:1.25rem;font-weight:500;line-height:1.8;color:#1A1A1A;border-left:3px solid #00B894;padding-left:1.5em;margin:1.5em 0}

/* Architecture */
.arch-diagram{display:flex;flex-direction:column;align-items:center;margin:1.5em auto 0;width:100%;max-width:clamp(680px,44vw,3500px)}
.arch-tier{display:flex;justify-content:center;gap:1.2em;width:100%}
.arch-box{padding:0.6em 1.2em;border-radius:8px;text-align:center;background:white;border:1px solid #E0E0E0;transition:all 0.3s ease}
.arch-box:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,0.06)}
.arch-box-full{width:100%} .arch-box-sm{flex:1}
.arch-accent{background:rgba(0,184,148,0.06);border:1px solid rgba(0,184,148,0.25)} .arch-accent:hover{box-shadow:0 4px 20px rgba(0,184,148,0.1)}
.arch-name{font-size:1.05rem;font-weight:600;color:#1A1A1A} .arch-label{font-size:0.72rem;color:#4A4A4A;letter-spacing:0.05em;margin-bottom:0.15em}
.arch-node{flex:1;text-align:center;font-size:0.82rem;color:#4A4A4A;padding:0.4em 0}
.arch-conn{display:flex;justify-content:center;padding:0.18em 0} .arch-conn-multi{display:flex;justify-content:space-around;width:80%;padding:0.4em 0} .arch-vline{width:1px;height:1.2em;background:#E0E0E0}
.slide-dark .arch-accent{background:rgba(0,184,148,0.12);border-color:rgba(0,184,148,0.4)} .slide-dark .arch-box:not(.arch-accent){background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.15)} .slide-dark .arch-name{color:rgba(255,255,255,0.9)} .slide-dark .arch-label{color:rgba(255,255,255,0.45)} .slide-dark .arch-node{color:rgba(255,255,255,0.4)} .slide-dark .arch-vline{background:rgba(255,255,255,0.2)}

/* Navigation */
.nav-bar{position:fixed;bottom:4vh;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;pointer-events:none}
.nav-bar>*{pointer-events:auto}
.nav-bar-btn{display:none;border:none;background:transparent;cursor:pointer;padding:0}
.nav-bar-dots{display:flex;gap:12px}
.nav-bar-num{position:absolute;left:5vw;font-size:0.85rem;color:#4A4A4A}
.nav-dot{width:8px;height:8px;border-radius:50%;background:#E0E0E0;cursor:pointer;transition:background 0.3s ease,transform 0.3s ease} .nav-dot.active{background:#1A1A1A;transform:scale(1.2)}
.click-zone{position:fixed;top:0;height:100%;width:8%;cursor:pointer;z-index:50;display:flex;align-items:center;justify-content:center} .click-zone.prev{left:0} .click-zone.next{right:0}
.click-zone svg{color:#999;opacity:0.35;transition:opacity 0.3s ease;pointer-events:none} .click-zone:hover svg{opacity:0.6}

/* Toolbar */
.toolbar{position:fixed;top:16px;right:16px;z-index:1100;display:flex;align-items:center;gap:6px}
.toolbar-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(30,30,40,0.5);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:rgba(255,255,255,0.6);cursor:pointer;transition:all 0.2s ease;padding:0;flex-shrink:0}
.toolbar-btn:hover,.toolbar-btn.active{background:rgba(30,30,40,0.8);color:rgba(255,255,255,0.95);border-color:rgba(255,255,255,0.2)}
.toolbar-btn.mag-on{border-color:rgba(0,184,148,0.5);color:#00B894;background:rgba(0,184,148,0.12)}
/* Font Size Control */
.font-ctrl{display:flex;align-items:center;height:36px;background:rgba(30,30,40,0.5);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);border-radius:8px;overflow:hidden;flex-shrink:0}
.font-ctrl-btn{width:30px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;transition:all 0.15s;padding:0}
.font-ctrl-btn:hover{color:rgba(255,255,255,0.95);background:rgba(255,255,255,0.08)}
.font-ctrl-btn:disabled{opacity:0.2;cursor:default}.font-ctrl-btn:disabled:hover{background:none;color:rgba(255,255,255,0.6)}
.font-ctrl-lbl{min-width:38px;height:36px;display:flex;align-items:center;justify-content:center;padding:0 2px;font-size:11px;font-family:inherit;color:rgba(255,255,255,0.35);background:none;border:none;border-left:1px solid rgba(255,255,255,0.08);border-right:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:color 0.15s;letter-spacing:-0.02em}
.font-ctrl-lbl:hover{color:rgba(255,255,255,0.7)}
/* Magnifier Strip */
.magnifier{position:fixed;left:0;width:100%;height:40vh;overflow:hidden;pointer-events:none;z-index:99999;border-top:1.5px solid rgba(0,184,148,0.35);border-bottom:1.5px solid rgba(0,184,148,0.35);box-shadow:0 4px 40px rgba(0,0,0,0.35);display:none;will-change:transform}
.magnifier::before{content:'';position:absolute;left:0;right:0;top:0;height:24px;background:linear-gradient(to bottom,rgba(0,0,0,0.18),transparent);pointer-events:none;z-index:2}
.magnifier::after{content:'';position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(to top,rgba(0,0,0,0.18),transparent);pointer-events:none;z-index:2}
.magnifier-inner{position:absolute;transform-origin:0 0;pointer-events:none}
.magnifier-center{position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(0,184,148,0.2);z-index:3;pointer-events:none;transform:translateY(-0.5px)}
.toc-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1050}
.toc-panel{position:fixed;top:60px;right:16px;z-index:1100;width:max-content;min-width:200px;max-height:calc(100vh - 120px);overflow-y:auto;background:rgba(20,20,28,0.92);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:16px 0}
.toc-title{padding:0 20px 12px;font-size:0.75rem;font-weight:500;letter-spacing:0.15em;color:rgba(255,255,255,0.35);text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:4px}
.toc-list{display:flex;flex-direction:column}
.toc-item{display:flex;align-items:center;gap:12px;padding:9px 20px;cursor:pointer;transition:background 0.15s ease} .toc-item:hover{background:rgba(255,255,255,0.06)} .toc-item.active{background:rgba(0,184,148,0.12)}
.toc-item-num{font-size:0.72rem;font-weight:500;color:rgba(255,255,255,0.25);min-width:18px;font-variant-numeric:tabular-nums} .toc-item.active .toc-item-num{color:#00B894}
.toc-item-label{font-size:0.85rem;color:rgba(255,255,255,0.6);font-weight:400;white-space:nowrap} .toc-item.active .toc-item-label{color:rgba(255,255,255,0.95);font-weight:500}
.toc-item-sec{margin-top:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.06)} .toc-item-sec .toc-item-label{font-weight:500;color:rgba(255,255,255,0.4);font-size:0.78rem;letter-spacing:0.08em}

/* Responsive */
@media(min-width:1920px){.divider{width:80px}.nav-dot{width:10px;height:10px}.nav-bar-dots{gap:14px}.aurora-glow{width:800px;height:800px}}
@media(min-width:2560px){.divider{width:100px}.nav-dot{width:12px;height:12px}.nav-bar-dots{gap:16px}.aurora-glow{width:1000px;height:1000px;filter:blur(160px)}}
@media(min-width:3840px){.divider{width:140px;height:2px}.nav-dot{width:16px;height:16px}.nav-bar-dots{gap:20px}.slide-number{font-size:1rem}.toolbar{top:24px;right:24px;gap:8px}.toolbar-btn{width:48px;height:48px;border-radius:10px}.font-ctrl{height:48px;border-radius:10px}.font-ctrl-btn{width:40px;height:48px}.font-ctrl-lbl{min-width:48px;height:48px;font-size:14px}.magnifier{height:200px;border-width:2px}.toc-panel{min-width:420px;top:80px;right:24px;border-radius:16px}.toc-item{padding:12px 24px}.toc-item-label{font-size:1rem}.aurora-glow{width:1400px;height:1400px;filter:blur(200px)}.arch-box{padding:1.2em 2em;border-radius:12px}}
@media(min-width:5120px){.divider{width:180px}.nav-dot{width:20px;height:20px}.nav-bar-dots{gap:24px}.toolbar{top:32px;right:32px;gap:10px}.toolbar-btn{width:56px;height:56px;border-radius:12px}.font-ctrl{height:56px;border-radius:12px}.font-ctrl-btn{width:48px;height:56px}.font-ctrl-lbl{min-width:56px;height:56px;font-size:16px}.magnifier{height:250px}.toc-panel{min-width:520px;top:100px;right:32px;border-radius:20px}.aurora-glow{width:1800px;height:1800px;filter:blur(260px)}}
@media(min-width:7680px){.divider{width:240px;height:3px}.nav-dot{width:28px;height:28px}.nav-bar-dots{gap:32px}.toolbar{top:40px;right:40px;gap:12px}.toolbar-btn{width:72px;height:72px;border-radius:16px}.font-ctrl{height:72px;border-radius:16px}.font-ctrl-btn{width:60px;height:72px}.font-ctrl-lbl{min-width:72px;height:72px;font-size:20px}.magnifier{height:320px;border-width:3px}.toc-panel{min-width:680px;top:128px;right:40px;border-radius:24px}.aurora-glow{width:2600px;height:2600px;filter:blur(360px)}.arch-box{padding:1.5em 2.5em;border-radius:16px;border-width:2px}.arch-name{font-size:1.5rem}.arch-vline{width:2px}}
/* Mobile */
@media(max-width:768px){
  body{overflow:hidden}
  .slides-container{height:100dvh;height:100vh}
  .slide{position:absolute;top:0;left:0;width:100%;height:100dvh;height:100%;padding:56px 5vw 8vh;overflow:hidden;justify-content:flex-start}
  .slide-content,.slide-content-wide{max-width:100%!important;margin-top:0;margin-bottom:0}
  .slide-cover .slide-content{margin-top:auto;margin-bottom:auto}
  .slide-split .slide-content{max-width:100%!important}

  h1{font-size:1.5rem!important;margin-bottom:0.3em}
  h2{font-size:1.2rem!important;margin-bottom:0.5em}
  h3{font-size:0.7rem!important;margin-bottom:0.5em;letter-spacing:0.08em}
  .tagline{font-size:0.88rem}
  .sub-features{margin-bottom:0.8em;margin-top:0.8em} .sub-features p{font-size:0.82rem;line-height:1.6}
  .conclusion{font-size:0.85rem;margin-top:0.8em}
  .divider{width:32px;margin:0.6em 0}

  /* Cover */
  .slide-cover .divider{margin:0.8em auto}

  /* Split — stack, hide image on mobile */
  .slide-split .slide-content{flex-direction:column;gap:1em}
  .slide-split-visual{display:none}

  /* Compare — stack */
  .cmp-layout{flex-direction:column;gap:0.8em;margin-top:0.5em}
  .cmp-col{padding:0.8em 1em;border-radius:10px}
  .cmp-title{font-size:0.95rem}
  .cmp-sub{font-size:0.72rem;margin-bottom:0.5em;padding-bottom:0.4em}
  .cmp-item{font-size:0.78rem;padding:0.2em 0 0.2em 1em;line-height:1.4}

  /* Grid — single column */
  .content-grid,.content-grid-3{grid-template-columns:1fr!important;gap:0!important}
  .content-item{padding:0.35em 0}
  .content-title{font-size:0.88rem!important;margin-bottom:0.15em}
  .content-desc{font-size:0.78rem!important;line-height:1.5}

  /* Stats */
  .stats{gap:1.2em;flex-wrap:wrap;margin-top:0.3em}
  .stat-value{font-size:1.4rem}
  .stat-label{font-size:0.75rem}

  /* Quote */
  .quote-block{font-size:0.85rem;line-height:1.5;padding-left:0.8em;margin:0.6em 0}

  /* Architecture */
  .arch-diagram{max-width:100%}
  .arch-box{padding:0.4em 0.5em}
  .arch-name{font-size:0.72rem}
  .arch-label{font-size:0.5rem}
  .arch-node{font-size:0.6rem}
  .arch-tier{gap:0.4em}

  /* Summary */
  .sum-card{padding:0.8em 1em;margin-bottom:0.8em}
  .sum-card-name{font-size:1rem}
  .sum-card-desc{font-size:0.78rem}
  .sum-children{grid-template-columns:1fr;gap:0.5em;margin-top:0.8em}
  .sum-child{padding:0.6em 0.8em}
  .sum-child-name{font-size:0.82rem}
  .sum-child-desc{font-size:0.72rem}

  /* Banner — hide on mobile */
  .img-placeholder-banner{display:none}

  /* Navigation */
  .nav-bar{bottom:1.5vh}
  .nav-bar-btn{display:flex;width:32px;height:32px;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);background:rgba(20,20,28,0.6);border:1px solid rgba(255,255,255,0.12)!important;border-radius:50%;backdrop-filter:blur(8px);flex-shrink:0;margin:0 4px}
  .nav-bar-btn:disabled{opacity:0.15}
  .nav-bar-dots{gap:4px}
  .nav-bar-num{display:none}
  .nav-dot{width:5px;height:5px}
  .click-zone{display:none}

  /* Toolbar */
  .toolbar{top:12px;right:12px;gap:4px}
  .toolbar-btn{width:34px;height:34px}
  .font-ctrl{height:34px}
  .font-ctrl-btn{width:28px;height:34px}
  .font-ctrl-lbl{min-width:34px;height:34px;font-size:10px}
  .magnifier{height:35vh}
  /* TOC */
  .toc-panel{width:calc(100vw - 32px);min-width:unset;max-width:300px;max-height:calc(100vh - 80px)}
  .toc-item-label{font-size:0.78rem;white-space:normal}

  /* Map */
  .map-title{bottom:auto;top:52px;left:5vw}
  .map-title h2{font-size:1.1rem!important;margin-bottom:0.15em}
  .map-title h3{margin-bottom:0.3em!important}
  .map-title p{font-size:0.7rem!important}
  .map-legend{bottom:8vh;left:5vw;right:auto;gap:0.6em 1.2em;flex-wrap:wrap}
  .map-legend-item{font-size:0.5rem}
  .map-zoom-ctrl{bottom:calc(1.5vh + 44px)}
  .map-zoom-btn{width:38px;height:38px;border-radius:10px}

  /* Aurora */
  .aurora-glow{width:300px;height:300px;filter:blur(80px)}

  /* Feature — hide image, stack */
  .feature-top{flex-direction:column;gap:0}
  .feature-visual{display:none}
  .slide-dark::before{display:none}
}

/* Feature layout */
.feature-top{display:flex;gap:4em;align-items:flex-start}
.feature-text{flex:1}
.feature-visual{flex:0 0 35%;padding-top:3.5em}

/* Map active — prevent body scroll on map slide */
body.map-active{overflow:hidden!important}
body.map-active .slide{position:absolute!important;top:0;left:0;width:100%;height:100%;min-height:unset!important;overflow:hidden!important}
@media(max-width:768px){body.map-active .map-container{padding:10vh 0 10vh}}

/* World Map */
.world-map{position:absolute;inset:0;z-index:2}
.world-map-svg{position:absolute;inset:0;width:100%;height:100%}
.map-cont{fill:none;stroke:rgba(255,255,255,0.06);stroke-width:0.3}
.map-line{fill:none;stroke:rgba(0,184,148,0.12);stroke-width:0.3;stroke-dasharray:3 2;animation:lflow 4s linear infinite}
.map-line-hub{stroke:rgba(0,184,148,0.2);stroke-width:0.5}
.map-line-ctr{stroke:rgba(0,184,148,0.3);stroke-width:0.7}
@keyframes lflow{from{stroke-dashoffset:0}to{stroke-dashoffset:-60}}
.map-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:3;pointer-events:none}
.map-dot{border-radius:50%}
.mn-cam .map-dot{width:6px;height:6px;background:rgba(255,255,255,0.35)}
.mn-hub .map-dot{width:10px;height:10px;background:rgba(0,184,148,0.2);border:1.5px solid rgba(0,184,148,0.5)}
.mn-ctr .map-dot{width:14px;height:14px;background:rgba(0,184,148,0.4);border:2px solid #00B894}
.mn-ao .map-dot{width:22px;height:22px;background:#00B894;border:2px solid #55EFC4;box-shadow:0 0 20px rgba(0,184,148,0.4);animation:aop 2s ease-in-out infinite}
@keyframes aop{0%,100%{box-shadow:0 0 20px rgba(0,184,148,0.4)}50%{box-shadow:0 0 40px rgba(0,184,148,0.5),0 0 80px rgba(0,184,148,0.15)}}
.map-lbl{font-size:0.55rem;font-weight:600;color:rgba(255,255,255,0.6);white-space:nowrap;margin-top:4px;letter-spacing:0.04em}
.map-city{font-size:0.48rem;color:rgba(255,255,255,0.3);white-space:nowrap}
.mn-ao .map-lbl{color:#00B894;font-size:0.7rem} .mn-ao .map-city{color:rgba(255,255,255,0.5);font-size:0.55rem}
.map-title{position:absolute;bottom:8vh;left:10vw;z-index:4}
.map-legend{position:absolute;bottom:8vh;right:10vw;z-index:4;display:flex;gap:1.8em}
.map-legend-item{display:flex;align-items:center;gap:0.5em;font-size:0.6rem;color:rgba(255,255,255,0.35)}
.ao-glow{animation:aog 2s ease-in-out infinite} @keyframes aog{0%,100%{opacity:0.15;transform:scale(1)}50%{opacity:0.7;transform:scale(1.15)}}
.conn-line{animation:lflow 2s linear infinite}
.rsm-svg{overflow:visible}
.rsm-geography{transition:fill 0.2s ease}

/* Node Modal */
.node-modal{position:fixed;background:rgba(20,20,28,0.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.12);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.5);display:flex;flex-direction:column;overflow:hidden;min-width:280px;min-height:200px}
.node-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.08);cursor:move;user-select:none;flex-shrink:0}
.node-modal-title{font-size:0.8rem;font-weight:600;color:rgba(255,255,255,0.85);letter-spacing:0.02em}
.node-modal-close{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:rgba(255,255,255,0.35);font-size:1rem;cursor:pointer;border-radius:4px;transition:all 0.15s}
.node-modal-close:hover{color:rgba(255,255,255,0.9);background:rgba(255,255,255,0.1)}
.node-modal-body{flex:1;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.node-modal-body img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.node-modal-ph{display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,0.12)}
.node-modal-ph span{font-size:0.72rem;color:rgba(255,255,255,0.18)}
.node-modal-rs{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize}
.node-modal-rs::after{content:'';position:absolute;bottom:4px;right:4px;width:8px;height:8px;border-right:2px solid rgba(255,255,255,0.15);border-bottom:2px solid rgba(255,255,255,0.15)}
/* Marker tap & pulse */
.marker-tap{pointer-events:auto}
.marker-tap:hover circle:first-child{fill:rgba(0,184,148,0.08)!important}
.marker-tap:hover .thumb-bd{stroke:rgba(0,184,148,0.6)}
.marker-pulse{animation:mkpulse 2.5s ease-in-out infinite}
@keyframes mkpulse{0%,100%{r:inherit;opacity:0.4;stroke-width:0.8}50%{opacity:1;stroke-width:1.2}}
/* Zoom controls */
.map-zoom-ctrl{position:absolute;bottom:calc(4vh + 36px);left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:4px}
.map-zoom-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(20,20,28,0.7);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.12);border-radius:8px;color:rgba(255,255,255,0.6);cursor:pointer;transition:all 0.15s;pointer-events:auto}
.map-zoom-btn:hover{background:rgba(20,20,28,0.9);color:rgba(255,255,255,0.95);border-color:rgba(255,255,255,0.25)}
.map-zoom-btn:active{transform:scale(0.92)}
.map-zoom-reset{margin-left:2px}
@media(min-width:3840px){.mn-cam .map-dot{width:10px;height:10px}.mn-hub .map-dot{width:16px;height:16px}.mn-ctr .map-dot{width:22px;height:22px}.mn-ao .map-dot{width:32px;height:32px}.map-lbl{font-size:0.6rem}.map-city{font-size:0.52rem}.mn-ao .map-lbl{font-size:0.75rem}.map-legend-item{font-size:0.65rem}}
@media(min-width:7680px){.mn-cam .map-dot{width:16px;height:16px}.mn-hub .map-dot{width:24px;height:24px;border-width:2px}.mn-ctr .map-dot{width:32px;height:32px;border-width:3px}.mn-ao .map-dot{width:48px;height:48px;border-width:3px}.map-line{stroke-width:0.6}.map-line-hub{stroke-width:1}.map-line-ctr{stroke-width:1.4}}

/* ══════════════════════════════════════════════════════════
   AssetOne-specific components
   ══════════════════════════════════════════════════════════ */

/* ── Product screenshot frame ── */
.shot{position:relative;border-radius:clamp(10px,0.7vw,28px);overflow:hidden;background:#0f1419;border:1px solid rgba(0,0,0,0.1);box-shadow:0 10px 40px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06)}
.slide-dark .shot,.slide-cover .shot{border-color:rgba(255,255,255,0.12);box-shadow:0 10px 50px rgba(0,0,0,0.5)}
.shot-bar{display:flex;align-items:center;gap:0.45em;padding:0.55em 0.9em;background:#1b2028;border-bottom:1px solid rgba(255,255,255,0.06)}
.shot-bar i{width:0.5em;height:0.5em;border-radius:50%;background:rgba(255,255,255,0.16);flex-shrink:0}
.shot-bar i:first-child{background:rgba(0,184,148,0.55)}
.shot-bar span{margin-left:0.5em;font-size:0.6rem;letter-spacing:0.04em;color:rgba(255,255,255,0.3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Screenshots always render at FULL WIDTH — a UI capture loses its meaning if
   the left/right edges (panel trees, side rails) are cut off. Height is the
   only dimension we ever trim, and only where a slide needs a banner strip:
   the frame gets a fixed/max height and clips the bottom of the image. */
.shot-img{display:block;width:100%;height:auto}
.shot-crop{position:relative;width:100%;overflow:hidden}
.shot-cap{margin-top:0.8em;font-size:0.72rem;color:#4A4A4A;letter-spacing:0.02em;line-height:1.5}
.slide-dark .shot-cap{color:rgba(255,255,255,0.4)}


/* ── KPI strip (product telemetry bar) ── */
.kpi-strip{display:flex;align-items:stretch;gap:0;background:#12161d;border:1px solid rgba(255,255,255,0.07);border-radius:clamp(10px,0.7vw,26px);padding:1.2em 0;margin:1.2em 0 0.4em;overflow:hidden}
.kpi{flex:1;padding:0 1.4em;border-left:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;justify-content:center;min-width:0}
.kpi:first-child{border-left:none}
.kpi-v{font-size:1.5rem;font-weight:700;color:#2BE8B6;line-height:1.15;letter-spacing:-0.01em;white-space:nowrap}
.kpi-v.dim{color:rgba(255,255,255,0.82)}
.kpi-l{font-size:0.66rem;color:rgba(255,255,255,0.38);margin-top:0.35em;letter-spacing:0.05em;line-height:1.4}

/* ── Network topology (5-tier) ── */
.topo{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:clamp(560px,38vw,3000px);margin:0.8em auto 0}
.topo-row{display:flex;align-items:center;gap:1.2em}
.topo-tag{flex:0 0 clamp(88px,7vw,340px);text-align:right;font-size:0.62rem;font-weight:600;letter-spacing:0.12em;color:#00B894;padding-right:0.9em;border-right:2px solid rgba(0,184,148,0.3);line-height:1.3}
.topo-tag em{display:block;font-style:normal;font-size:0.55rem;font-weight:400;letter-spacing:0.03em;color:#4A4A4A;margin-top:0.15em}
.slide-dark .topo-tag em{color:rgba(255,255,255,0.35)}
.topo-node{flex:1;display:flex;align-items:center;gap:0.8em;background:white;border:1px solid #E0E0E0;border-radius:8px;padding:0.7em 1.1em;min-width:0}
.slide-dark .topo-node{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.14)}
.topo-node.on{background:rgba(0,184,148,0.07);border-color:rgba(0,184,148,0.4)}
.slide-dark .topo-node.on{background:rgba(0,184,148,0.13);border-color:rgba(0,184,148,0.45)}
.topo-chip{flex:0 0 auto;font-size:0.55rem;font-weight:700;letter-spacing:0.06em;color:#00B894;background:rgba(0,184,148,0.1);border:1px solid rgba(0,184,148,0.25);border-radius:4px;padding:0.2em 0.5em}
.topo-nm{font-size:0.92rem;font-weight:600;color:#1A1A1A;line-height:1.3;min-width:0}
.slide-dark .topo-nm{color:rgba(255,255,255,0.9)}
.topo-nm em{display:block;font-style:normal;font-size:0.66rem;font-weight:400;color:#4A4A4A;margin-top:0.1em}
.slide-dark .topo-nm em{color:rgba(255,255,255,0.38)}
.topo-link{margin-left:calc(clamp(88px,7vw,340px) + 2.1em);width:2px;height:1.1em;background:linear-gradient(180deg,rgba(0,184,148,0.5),rgba(0,184,148,0.18))}

/* ── Dashboard view chips ── */
.vchip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.9em;margin-top:1.2em}
.vchip{border:1px solid #E0E0E0;border-radius:clamp(8px,0.5vw,20px);padding:1em 1.2em;background:white}
.slide-dark .vchip{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.12)}
.vchip.on{border-color:rgba(0,184,148,0.4);background:rgba(0,184,148,0.05)}
.slide-dark .vchip.on{background:rgba(0,184,148,0.11);border-color:rgba(0,184,148,0.42)}
.vchip-n{font-size:0.95rem;font-weight:600;color:#1A1A1A;margin-bottom:0.3em;line-height:1.3}
.slide-dark .vchip-n{color:rgba(255,255,255,0.9)}
.vchip.on .vchip-n{color:#00B894}
.vchip-d{font-size:0.76rem;color:#4A4A4A;line-height:1.55}
.slide-dark .vchip-d{color:rgba(255,255,255,0.45)}

/* ── Hierarchy tree (회사 → 건물 → 자산) ── */
.tree{display:flex;align-items:stretch;gap:1.4em;margin-top:1.4em;width:100%}
.tree-col{flex:1;display:flex;flex-direction:column;min-width:0}
.tree-hd{font-size:0.62rem;font-weight:700;letter-spacing:0.12em;color:#00B894;margin-bottom:0.7em}
.tree-box{border:1px solid #E0E0E0;border-radius:clamp(8px,0.5vw,20px);background:white;padding:1.1em 1.3em;flex:1}
.slide-dark .tree-box{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.12)}
.tree-t{font-size:1.05rem;font-weight:600;color:#1A1A1A;margin-bottom:0.2em}
.slide-dark .tree-t{color:rgba(255,255,255,0.9)}
.tree-c{font-size:0.68rem;color:#00B894;font-weight:600;letter-spacing:0.04em;margin-bottom:0.6em}
.tree-d{font-size:0.8rem;color:#4A4A4A;line-height:1.6}
.slide-dark .tree-d{color:rgba(255,255,255,0.45)}

/* ── Responsive ── */
@media(min-width:3840px){
  .shot-bar i{width:0.55em;height:0.55em}
  .kpi-strip{border-radius:20px}
  .topo-node{border-radius:12px;padding:0.9em 1.4em}
}
@media(max-width:768px){
  .shot-cap{display:none}
  .kpi-strip{flex-wrap:wrap;gap:0.7em 0;padding:0.8em 0;margin:0.6em 0 0.2em}
  .kpi{flex:0 0 50%;padding:0 0.9em;border-left:none}
  .kpi-v{font-size:1rem}
  .kpi-l{font-size:0.58rem;margin-top:0.15em}
  .topo{max-width:100%;margin-top:0.4em}
  .topo-row{gap:0.5em}
  .topo-tag{flex:0 0 62px;font-size:0.5rem;letter-spacing:0.06em;padding-right:0.45em}
  .topo-tag em{display:none}
  .topo-node{padding:0.4em 0.6em;gap:0.45em;border-radius:6px}
  .topo-chip{font-size:0.46rem;padding:0.12em 0.32em}
  .topo-nm{font-size:0.72rem}
  .topo-nm em{font-size:0.55rem}
  .topo-link{margin-left:calc(62px + 0.75em);height:0.6em}
  .vchip-grid{grid-template-columns:1fr;gap:0.35em;margin-top:0.5em}
  .vchip{padding:0.4em 0.6em;border-radius:6px}
  .vchip-n{font-size:0.8rem;margin-bottom:0.1em}
  .vchip-d{font-size:0.68rem;line-height:1.4}
  .tree{flex-direction:column;gap:0.5em;margin-top:0.6em}
  .tree-hd{font-size:0.52rem;margin-bottom:0.25em}
  .tree-box{padding:0.55em 0.8em}
  .tree-t{font-size:0.85rem}
  .tree-c{font-size:0.6rem;margin-bottom:0.25em}
  .tree-d{font-size:0.7rem;line-height:1.45}
}

/* ── Layout fit guards ─────────────────────────────────────
   Screenshots are near-square; cap their height per layout
   context so dense slides never overflow the viewport.      */
.feature-visual{padding-top:1.6em}
.feature-visual .shot-crop{max-height:min(24vh,250px)}
.feature-visual .shot-cap{font-size:0.64rem;margin-top:0.5em;line-height:1.4}
/* Feature slides carry a heading block + screenshot + item grid:
   tighten the grid rhythm so all three fit. */
.feature-grid.content-grid{gap:1.05em 5em;margin-top:0.2em}
.feature-grid .content-item{padding:0.55em 0}
/* Wide showcase screenshot */
.shot-fit .shot-crop{height:min(40vh,420px)}
.shot-fit .shot-cap{font-size:0.68rem;margin-top:0.6em}

@media(max-width:768px){
  .feature-grid.content-grid{gap:0!important}
  .feature-grid .content-item{padding:0.35em 0}
  .shot-fit .shot-crop{height:30vh}
  .feature-visual .shot-crop{max-height:none}
}

/* ── Dense slides: reclaim vertical padding ── */
.slide-dense{padding-top:5vh;padding-bottom:9vh}
@media(max-width:768px){.slide-dense{padding-top:56px;padding-bottom:8vh}}

/* Summary carries 4 child cards (vs 2 in the VisionOne deck) — compact it */
.sum-card{padding:1.15em 1.6em;margin-bottom:0.85em}
.sum-card-name{font-size:1.25rem}
.sum-children{gap:0.9em;margin-top:1em}
.sum-child{padding:1em 1.2em}
.sum-child-desc{font-size:0.85rem}

/* ── Side navigation arrows ─────────────────────────────────
   Explicit prev/next controls pinned to the left/right edges,
   vertically centred and always visible (not hover-only).     */
.side-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:1000;
  width:clamp(38px,2.9vw,84px);height:clamp(38px,2.9vw,84px);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;padding:0;
  background:rgba(255,255,255,0.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,0.10);color:#1A1A1A;
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease,
             box-shadow 0.2s ease,opacity 0.2s ease,transform 0.2s ease}
.side-nav-prev{left:clamp(10px,1.6vw,48px)}
.side-nav-next{right:clamp(10px,1.6vw,48px)}
.side-nav:hover{background:#fff;border-color:rgba(0,184,148,0.55);color:#00B894;
  box-shadow:0 6px 24px rgba(0,0,0,0.16)}
.side-nav:active{transform:translateY(-50%) scale(0.93)}
.side-nav:disabled{opacity:0.18;cursor:default;box-shadow:none}
.side-nav:disabled:hover{background:rgba(255,255,255,0.72);border-color:rgba(0,0,0,0.10);color:#1A1A1A}
.side-nav svg{width:clamp(17px,1.25vw,38px);height:clamp(17px,1.25vw,38px)}
/* Dark slides: invert the chip so it stays legible on near-black */
.sn-dark{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.85);box-shadow:0 4px 18px rgba(0,0,0,0.35)}
.sn-dark:hover{background:rgba(0,184,148,0.20);border-color:rgba(0,184,148,0.65);color:#2BE8B6}
.sn-dark:disabled:hover{background:rgba(255,255,255,0.09);
  border-color:rgba(255,255,255,0.18);color:rgba(255,255,255,0.85)}
/* Phones: the bottom nav bar already has arrows — avoid double controls
   and keep the edges clear for swipe/tap on the slide itself. */
@media(max-width:768px){.side-nav{display:none}}

/* ── Korean line breaking ───────────────────────────────────
   By default Hangul may wrap between ANY two syllables, so a
   heading can strand a single character on its own line
   ("… 백로그 관 / 리"). `keep-all` restricts breaks to spaces
   (word boundaries); `overflow-wrap:break-word` is the escape
   hatch for a segment that genuinely cannot fit on one line
   (long ·-joined runs, URLs), so keep-all can never cause a
   horizontal overflow.
   `text-wrap:balance` evens out heading lines; `pretty` keeps
   body copy from ending on a lone orphan word.              */
html{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,.tagline,.conclusion,.quote-block,
.cmp-title,.cmp-sub,.content-title,.vchip-n,.tree-t,.sum-card-name,
.sum-child-name,.topo-nm,.arch-name,.kpi-v{text-wrap:balance}
.sub-features p,.content-desc,.shot-cap,.vchip-d,.tree-d,.kpi-l,
.cmp-item,.sum-card-desc,.sum-child-desc,.topo-nm em,.arch-node{text-wrap:pretty}