@font-face{font-family:'NanumSquare Neo OTF';font-weight:350;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/tomasyoon/fonts@main/NanumSquareNeoTTF-aLt.woff2') format('woff2'),url('https://cdn.jsdelivr.net/gh/tomasyoon/fonts@main/NanumSquareNeoOTF-Lt.otf') format('opentype');}
@font-face{font-family:'NanumSquare Neo OTF';font-weight:400;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/tomasyoon/fonts@main/NanumSquareNeoTTF-bRg.woff2') format('woff2'),url('https://cdn.jsdelivr.net/gh/tomasyoon/fonts@main/NanumSquareNeoOTF-Rg.otf') format('opentype');}
@font-face{font-family:'NanumSquare Neo OTF';font-weight:700;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/tomasyoon/fonts@main/NanumSquareNeoTTF-cBd.woff2') format('woff2'),url('https://cdn.jsdelivr.net/gh/tomasyoon/fonts@main/NanumSquareNeoOTF-Bd.otf') format('opentype');}
@font-face{font-family:'NanumSquare Neo OTF';font-weight:800;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/tomasyoon/fonts@main/NanumSquareNeoTTF-dEb.woff2') format('woff2'),url('https://cdn.jsdelivr.net/gh/tomasyoon/fonts@main/NanumSquareNeoOTF-Eb.otf') format('opentype');}
@font-face{font-family:'NanumSquare Neo OTF';font-weight:900;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/tomasyoon/fonts@main/NanumSquareNeoTTF-eHv.woff2') format('woff2'),url('https://cdn.jsdelivr.net/gh/tomasyoon/fonts@main/NanumSquareNeoOTF-Hv.otf') format('opentype');}
:root{--deep:#0E3B43;--teal:#2F7D74;--amber:#E3A72F;--red:#B5462F;--ink:#1D2B2F;--muted:#5B6B6E;--soft:#EEF4F3;--line:#D5E0DE;--white:#fff;--grey:#B9CFCB;--bg:#E6ECEB;}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'NanumSquare Neo OTF','나눔스퀘어 네오 OTF','Malgun Gothic',sans-serif;background:var(--bg);color:var(--ink);font-weight:400;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit}
/* top bar */
.bar{position:fixed;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--deep);color:#fff;z-index:20}
.brand{font-weight:800;font-size:15px;letter-spacing:.2px;white-space:nowrap}
.brand span{color:var(--amber)}
.spacer{flex:1}
.count{font-size:13px;font-weight:700;opacity:.85;min-width:56px;text-align:center}
.seg{display:flex;border:1px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden}
.seg button{background:transparent;border:0;color:#fff;font:inherit;font-size:13px;font-weight:800;padding:7px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--amber);color:var(--deep)}
.iconbtn{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;font:inherit;font-size:13px;font-weight:700;padding:7px 12px;cursor:pointer;white-space:nowrap}
/* stage */
#viewport{position:fixed;top:52px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center}
#deck{position:relative;width:1280px;height:720px;transform-origin:center center}
.slide{position:absolute;inset:0;background:#fff;box-shadow:0 10px 40px rgba(14,59,67,.18);overflow:hidden;display:none}
.slide.on{display:block}
.slide.dark{background:var(--deep);color:#fff}
.nav{position:fixed;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(14,59,67,.85);color:#fff;font-size:22px;cursor:pointer;z-index:15;display:flex;align-items:center;justify-content:center}
.nav.prev{left:12px}.nav.next{right:12px}
.nav:disabled{opacity:.25;cursor:default}
/* scroll mode */
body.scroll{overflow:auto}
body.scroll #viewport{position:static;display:block;padding:68px 0 24px}
body.scroll #deck{width:auto;height:auto;transform:none!important}
body.scroll .slide{display:block;position:relative;inset:auto;margin:0 auto 20px;transform-origin:top left}
body.scroll .slidewrap{margin:0 auto 18px;overflow:hidden}
body.scroll .nav{display:none}
/* slide inner */
.in{position:absolute;inset:0;padding:40px 58px 0}
.kicker{font-weight:800;font-size:16px;color:var(--teal);margin-bottom:8px}
.title{font-weight:900;font-size:33px;line-height:1.25;color:var(--ink);letter-spacing:-.3px}
.foot{position:absolute;left:58px;right:58px;bottom:18px;display:flex;justify-content:space-between;font-weight:350;font-size:12px;color:var(--muted)}
.src{font-weight:350;font-size:12px;color:var(--muted);line-height:1.45}
.src a{color:var(--muted)}
.card{background:var(--soft);border-radius:10px}
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--deep);color:#fff;font-weight:900;flex:none}
.badge.amber{background:var(--amber);color:var(--deep)}
.chead{display:flex;gap:20px;align-items:flex-start}
.chead .badge{width:88px;height:88px;font-size:26px}
.chead .kicker{margin-top:4px}
.chead .title{font-size:31px}
.lead{font-weight:700;font-size:18px;color:var(--deep);line-height:1.45}
/* cover */
.cover{padding:76px 78px}
.cover .tag{color:var(--amber);font-weight:800;font-size:18px}
.cover h1{font-weight:900;font-size:52px;line-height:1.2;margin-top:22px;color:#fff;letter-spacing:-.5px}
.cover .sub{font-size:23px;color:#CFE3E0;margin-top:26px}
.cover .flags{display:flex;gap:40px;margin-top:64px}
.cover .flag{text-align:center;font-weight:700;font-size:16px}
.cover .flag .badge{width:80px;height:80px;font-size:24px;margin-bottom:10px}
.cover .by{position:absolute;right:78px;bottom:50px;font-weight:800;font-size:18px}
/* timeline */
.tl{position:relative;margin-top:44px;height:330px}
.tl .axis{position:absolute;left:0;right:0;top:92px;height:3px;background:var(--teal)}
.tl .ev{position:absolute;top:0;width:220px}
.tl .date{font-weight:900;font-size:26px;color:var(--deep);height:60px;display:flex;align-items:flex-end}
.tl .ev.hot .date{color:var(--red)}
.tl .dot{width:22px;height:22px;border-radius:50%;background:var(--deep);border:3px solid #fff;margin:20px 0 0 -2px;box-shadow:0 0 0 1px var(--deep)}
.tl .ev.hot .dot{background:var(--red);box-shadow:0 0 0 1px var(--red)}
.tl .name{font-weight:800;font-size:17px;margin-top:22px;line-height:1.35}
.tl .desc{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.5}
.callout{background:var(--soft);border-radius:10px;padding:20px 26px;font-weight:700;font-size:18px;color:var(--deep);line-height:1.45}
/* stat cards */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.stat{padding:22px 22px 18px;min-height:250px;display:flex;flex-direction:column}
.stat b{font-weight:900;font-size:44px;color:var(--deep);line-height:1.1;min-height:70px}
.stat b.sm{font-size:34px}
.stat p{font-size:16px;line-height:1.5;margin-top:12px;flex:1}
.stat small{font-weight:350;font-size:12px;color:var(--muted)}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:14px}
.four h4{font-weight:900;font-size:19px;color:var(--teal)}
.four p{font-size:16px;margin-top:6px}
.h3{font-weight:800;font-size:20px;margin-top:30px}
/* headlines */
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.hcard{border:1px solid var(--line);border-radius:10px;padding:18px 20px;height:218px;display:flex;flex-direction:column;background:#fff;text-decoration:none;transition:box-shadow .15s,border-color .15s}
.hcard:hover{box-shadow:0 6px 20px rgba(14,59,67,.15);border-color:var(--teal)}
.hcard .top{display:flex;gap:12px;align-items:center}
.hcard .badge{width:48px;height:48px;font-size:15px}
.hcard .out{font-weight:800;font-size:14px;color:var(--teal);line-height:1.3}
.hcard p{font-size:15px;line-height:1.5;margin-top:12px;flex:1}
.hcard .go{font-weight:700;font-size:13px;color:var(--teal)}
/* tables */
table.t{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
table.t th{background:var(--deep);color:#fff;font-weight:800;text-align:left;padding:11px 14px}
table.t td{border:1px solid var(--line);padding:10px 14px;line-height:1.4;vertical-align:middle}
table.t td:first-child{font-weight:800;white-space:nowrap}
table.t td.theme{color:var(--teal);font-weight:700}
html[lang=en] table.t{font-size:14px}html[lang=en] table.t td{padding:8px 12px}html[lang=en] .note{font-size:15px}
.note{font-weight:700;font-size:17px;color:var(--deep);margin-top:20px}
/* country risk */
.risk{display:grid;grid-template-columns:412px 1fr;gap:26px;margin-top:26px;height:478px}
.chartcard{padding:18px 20px 14px;display:flex;flex-direction:column}
.chartcard h5{font-weight:800;font-size:16px;color:var(--deep);line-height:1.4;white-space:pre-line}
.chartbox{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 0}
.bars{width:100%}
.barrow{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:10px;margin:9px 0;font-size:14px}
.barrow .lab{text-align:right;color:var(--ink)}
.barrow .trk{display:flex;align-items:center;gap:8px}
.barrow .fill{height:24px;border-radius:3px}
.barrow .val{font-size:14px;color:var(--ink);white-space:nowrap}
.donut{display:flex;flex-direction:column;align-items:center;gap:14px}
.ring{width:210px;height:210px;border-radius:50%;position:relative}
.ring::after{content:"";position:absolute;inset:44px;border-radius:50%;background:var(--soft)}
.ring .big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;font-weight:900;font-size:30px;color:var(--deep)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:13px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.rightcol{display:flex;flex-direction:column}
.rightcol .label{font-weight:900;font-size:19px;color:var(--teal)}
.rlist{margin-top:10px;flex:1}
.rlist h6{font-weight:800;font-size:17px;color:var(--deep);margin-top:13px}
.rlist h6:first-child{margin-top:4px}
.rlist p{font-size:15px;line-height:1.5;margin-top:3px}
.issue{background:var(--deep);color:#fff;border-radius:10px;padding:14px 20px}
.issue b{display:block;font-weight:800;font-size:15px;color:var(--amber)}
.issue span{display:block;font-weight:700;font-size:15px;margin-top:6px;line-height:1.45}
/* country task */
.tasks{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.task{padding:18px 22px;min-height:172px;display:grid;grid-template-columns:42px 1fr;gap:4px}
.task .n{font-weight:900;font-size:30px;color:var(--amber);line-height:1}
.task h6{font-weight:900;font-size:19px;line-height:1.35}
.task p{font-size:15.5px;line-height:1.55;margin-top:8px;grid-column:2}
.when{display:flex;gap:24px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:18px 24px;margin-top:20px;font-size:16px}
.when b{font-weight:800;color:var(--teal);white-space:nowrap}
/* 2030 */
.out2030 .row{display:grid;grid-template-columns:64px 160px 1fr;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.out2030 .row:last-child{border-bottom:0}
.out2030 .badge{width:58px;height:58px;font-size:17px}
.out2030 .nm{font-weight:900;font-size:19px}
.out2030 .tx{font-size:17px;line-height:1.5}
/* who */
.wstats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px}
.wstats b{display:block;font-weight:900;font-size:38px;color:var(--deep)}
.wstats span{font-size:15px;color:var(--muted)}
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.wcard{padding:16px 18px;min-height:150px}
.wcard h6{font-weight:900;font-size:17px;color:var(--deep)}
.wcard p{font-size:14px;line-height:1.5;margin-top:8px}
.ph{color:#B97C0E;font-weight:700}
@media (max-width:640px){.brand .long{display:none}.iconbtn .long{display:none}}
@media print{.bar,.nav{display:none}body{overflow:visible;background:#fff}#viewport{position:static;display:block}#deck{transform:none!important;width:1280px;height:auto}.slide{display:block!important;position:relative;page-break-after:always;box-shadow:none}}
/* shared additions */
.title em{font-style:normal;color:#C98A12}
.bar select{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;font:inherit;font-size:13px;font-weight:700;padding:6px 10px;max-width:180px}
.bar select option{color:#1D2B2F}
a.ed{text-decoration:none;border-bottom:1px dotted var(--teal)}
a.ed:hover{color:var(--teal)}
.cover .cbig .badge{width:96px;height:96px;font-size:30px;margin-top:40px}
.cover .partof{position:absolute;left:78px;bottom:50px;font-size:15px;color:#CFE3E0;max-width:760px;line-height:1.5}
.seen{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;margin-top:30px}
.hcard.big{height:auto;min-height:380px;padding:28px 30px}
.hcard.big .badge{width:58px;height:58px;font-size:18px}
.hcard.big .out{font-size:17px}
.hcard.big p{font-size:21px;line-height:1.6;margin-top:22px}
.hcard.big .go{font-size:16px}
.mrow{display:flex;flex-direction:column;gap:14px}
.mrow>div{background:var(--soft);border-radius:10px;padding:18px 22px;flex:1}
.mrow h6{font-weight:800;font-size:15px;color:var(--teal)}
.mrow p{font-size:18px;line-height:1.5;margin-top:6px;font-weight:700;color:var(--deep)}
.vision{margin-top:56px;font-weight:900;font-size:34px;line-height:1.45;color:var(--deep);border-left:6px solid var(--amber);padding-left:28px}
/* scripts not covered by NanumSquare Neo */
html[lang=vi] body{font-family:'Noto Sans','NanumSquare Neo OTF',sans-serif}
html[lang=th] body{font-family:'NanumSquare Neo OTF','Noto Sans Thai',sans-serif}
html[lang=km] body{font-family:'NanumSquare Neo OTF','Noto Sans Khmer',sans-serif}
html[lang=th] .rlist p,html[lang=th] .task p,html[lang=km] .rlist p,html[lang=km] .task p{line-height:1.6}
html[lang=en] table.t,html[lang=id] table.t,html[lang=vi] table.t{font-size:14px}
html[lang=en] table.t td,html[lang=id] table.t td{padding:8px 12px}
html[lang=en] .note{font-size:15px}
.who .title{font-size:29px}
.who .wstats{margin-top:18px}
.who .wgrid{margin-top:18px}
html[lang=km] .who .wcard p,html[lang=th] .who .wcard p,html[lang=vi] .who .wcard p{font-size:13px}
.seg button,.bar select{font-family:'NanumSquare Neo OTF','Noto Sans Khmer','Noto Sans Thai','Noto Sans',sans-serif}
/* ---- narrator ---- */
.narbtn{background:var(--amber);color:var(--deep);border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:800;padding:8px 14px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px}
.narbtn[aria-pressed="true"]{background:#fff}
#narrator{position:fixed;right:22px;bottom:22px;z-index:30;display:flex;align-items:flex-end;gap:12px;pointer-events:none}
#narrator.on{pointer-events:auto}
#narrator .bubble{background:#fff;color:var(--deep);font-weight:800;font-size:15px;border-radius:14px 14px 4px 14px;padding:10px 14px;box-shadow:0 6px 24px rgba(14,59,67,.22);max-width:260px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
#narrator.greet .bubble{opacity:1;transform:none}
#narrator .face{position:relative;width:118px;height:118px;border-radius:50%;transform:scale(0);transform-origin:bottom right;transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
#narrator.on .face{transform:scale(1)}
#narrator .ring{position:absolute;inset:-6px;border-radius:50%;border:4px solid var(--amber);box-shadow:0 8px 30px rgba(14,59,67,.35);transition:transform .08s linear}
#narrator .img{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--deep) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:34px}
#narrator.greet .img{animation:nod 1.6s ease-in-out}
@keyframes nod{0%{transform:rotate(0)}20%{transform:rotate(-6deg) translateY(-2px)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(1deg)}100%{transform:rotate(0)}}
#narrator .wave{position:absolute;left:-14px;top:-6px;font-size:34px;opacity:0;transform-origin:70% 80%}
#narrator.greet .wave{animation:wave 1.8s ease-in-out}
@keyframes wave{0%{opacity:0;transform:rotate(0)}10%{opacity:1}20%{transform:rotate(18deg)}35%{transform:rotate(-10deg)}50%{transform:rotate(18deg)}65%{transform:rotate(-6deg)}80%{opacity:1;transform:rotate(10deg)}100%{opacity:0;transform:rotate(0)}}
#narrator .ctrl{position:absolute;left:-8px;bottom:-4px;display:flex;gap:4px}
#narrator .ctrl button{width:30px;height:30px;border-radius:50%;border:0;background:var(--deep);color:#fff;font-size:12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#caption{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);max-width:min(900px,calc(100vw - 220px));background:rgba(14,59,67,.9);color:#fff;font-size:18px;font-weight:700;line-height:1.5;padding:10px 20px;border-radius:10px;text-align:center;z-index:29;display:none}
body.narrating #caption.show{display:block}
@media (max-width:760px){#narrator .face{width:84px;height:84px}#narrator .img{font-size:24px}#caption{left:12px;right:110px;transform:none;max-width:none;font-size:13px;bottom:16px}#narrator{right:12px;bottom:12px}}
body.scroll .narbtn{display:none}