@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}

/* ================= mobile reading view (portrait phones) ================= */
body.read{overflow:auto;background:#E9EFEE;word-break:keep-all;overflow-wrap:anywhere}
body.read #viewport{position:static;display:block;padding:62px 0 90px}
body.read #deck{width:auto;height:auto;transform:none!important}
body.read .nav{display:none}
body.read .slide{display:block!important;position:relative;inset:auto;width:auto;height:auto;margin:0 10px 14px;border-radius:14px;box-shadow:0 4px 18px rgba(14,59,67,.10);overflow:hidden;scroll-margin-top:62px}
body.read .in{position:static;padding:20px 16px 14px}
body.read .kicker{font-size:12.5px;margin-bottom:6px;line-height:1.4}
body.read .title{font-size:21px;line-height:1.35}
body.read .foot{position:static;margin:10px 16px 12px;font-size:10.5px}
body.read .foot span:first-child{display:none}
body.read .foot{justify-content:flex-end}
body.read .src{font-size:11.5px;line-height:1.5}
body.read .callout{font-size:15px;padding:14px 16px;margin-top:14px}
/* cover */
body.read .cover{padding:30px 20px 26px}
body.read .cover .tag{font-size:13px}
body.read .cover h1{font-size:27px;margin-top:14px;line-height:1.3}
body.read .cover .sub{font-size:15px;margin-top:14px;line-height:1.5}
body.read .cover .flags{gap:10px 12px;margin-top:22px;flex-wrap:wrap}
body.read .cover .flag{font-size:11.5px;width:56px}
body.read .cover .flag .badge{width:44px;height:44px;font-size:14px;margin-bottom:5px}
body.read .cover .cbig .badge{width:58px;height:58px;font-size:19px;margin-top:18px}
body.read .cover .by,body.read .cover .partof{position:static;display:block;margin-top:18px;font-size:13px}
body.read .cover .by{text-align:right}
/* timeline → vertical list */
body.read .tl{height:auto;margin-top:16px}
body.read .tl .axis,body.read .tl .dot{display:none}
body.read .tl .ev{position:static;width:auto;border-left:3px solid var(--teal);padding:2px 0 2px 12px;margin-bottom:14px}
body.read .tl .ev.hot{border-color:var(--red)}
body.read .tl .date{font-size:18px;height:auto}
body.read .tl .name{font-size:15px;margin-top:3px}
body.read .tl .desc{font-size:13px;margin-top:3px}
/* stats */
body.read .stats{grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
body.read .stat{min-height:0;padding:14px 12px}
body.read .stat b{font-size:27px;min-height:0}
body.read .stat b.sm{font-size:19px}
body.read .stat p{font-size:13px;margin-top:8px}
body.read .stat small{font-size:10.5px;margin-top:6px}
body.read .h3{font-size:16px;margin-top:20px}
body.read .four{grid-template-columns:1fr 1fr;gap:12px}
body.read .four h4{font-size:14.5px}
body.read .four p{font-size:13px}
/* headline cards */
body.read .hl{grid-template-columns:1fr;gap:10px;margin-top:16px}
body.read .hcard{height:auto;padding:14px}
body.read .hcard p{font-size:14px;margin:10px 0}
body.read .hcard .badge{width:40px;height:40px;font-size:13px}
body.read .hcard .out{font-size:12.5px}
/* tables → stacked cards */
body.read table.t,body.read table.t tbody,body.read table.t tr,body.read table.t td{display:block;width:auto}
body.read table.t{margin-top:14px;font-size:14px}
body.read table.t thead{display:none}
body.read table.t tr{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
body.read table.t td{border:0;border-top:1px solid var(--line);padding:8px 12px;white-space:normal!important}
body.read table.t td:first-child{border-top:0;background:var(--deep);color:#fff;font-size:15px}
body.read table.t td:first-child a{color:#fff}
body.read table.t td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:800;color:var(--teal);margin-bottom:2px}
body.read .note{font-size:14px}
/* country headers */
body.read .chead{gap:12px}
body.read .chead .badge{width:46px;height:46px;font-size:15px}
body.read .chead .title{font-size:19px}
/* risk */
body.read .risk{grid-template-columns:1fr;height:auto;gap:14px;margin-top:16px}
body.read .chartcard h5{font-size:14px}
body.read .ring{width:150px;height:150px}
body.read .ring::after{inset:32px}
body.read .ring .big{font-size:24px}
body.read .barrow{grid-template-columns:86px 1fr;font-size:13px}
body.read .rightcol .label{font-size:16px}
body.read .rlist h6{font-size:15px;margin-top:12px}
body.read .rlist p{font-size:14px;line-height:1.55}
body.read .issue{margin-top:12px}
body.read .issue b,body.read .issue span{font-size:14px}
/* tasks */
body.read .tasks{grid-template-columns:1fr;gap:10px;margin-top:16px}
body.read .task{min-height:0;padding:14px;grid-template-columns:30px 1fr}
body.read .task .n{font-size:24px}
body.read .task h6{font-size:16px}
body.read .task p{font-size:14px}
body.read .when{flex-direction:column;align-items:flex-start;gap:6px;font-size:14px;padding:12px 14px;margin-top:14px}
/* 2030 */
body.read .out2030 .row{grid-template-columns:44px 1fr;gap:6px 10px;padding:12px 0}
body.read .out2030 .badge{width:40px;height:40px;font-size:13px}
body.read .out2030 .nm{font-size:16px}
body.read .out2030 .tx{grid-column:1/-1;font-size:14.5px}
body.read .vision{font-size:21px;margin-top:20px;padding-left:16px;border-left-width:5px}
/* single-country "seen" */
body.read .seen{grid-template-columns:1fr;gap:12px;margin-top:16px}
body.read .hcard.big{min-height:0;padding:16px}
body.read .hcard.big p{font-size:15.5px;margin-top:12px}
body.read .mrow p{font-size:15px}
/* who */
body.read .who .title{font-size:20px}
body.read .wstats{grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
body.read .wstats b{font-size:24px}
body.read .wstats span{font-size:12px}
body.read .wgrid{grid-template-columns:1fr;gap:8px;margin-top:14px}
body.read .wcard{min-height:0;padding:12px 14px}
body.read .wcard h6{font-size:15px}
body.read .wcard p{font-size:13.5px}
/* header bar on phones */
@media (max-width:600px){
  .bar{gap:5px;padding:0 6px}
  .bar .brand{display:none}
  .bar select{max-width:88px;font-size:12px;padding:6px 4px}
  .bar .count{display:none}
  .iconbtn{padding:6px 9px;font-size:12px}
  .seg button{padding:6px 8px;font-size:12px;white-space:nowrap}
  .iconbtn{white-space:nowrap}
  .narbtn{padding:7px 10px;font-size:12px}
  .narbtn .long{display:none}
}
#rotHint{position:fixed;left:50%;top:64px;transform:translate(-50%,-10px);background:rgba(14,59,67,.94);color:#fff;font-size:13px;font-weight:700;padding:9px 14px;border-radius:999px;z-index:40;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:calc(100vw - 32px);text-align:center}
#rotHint.on{opacity:1;transform:translate(-50%,0)}
#kakaoBar{position:fixed;left:0;right:0;top:52px;z-index:25;background:#FEE500;color:#3A1D1D;font-size:12.5px;font-weight:700;display:flex;gap:8px;align-items:center;padding:8px 10px}
#kakaoBar span{flex:1;line-height:1.35}
#kakaoBar a{background:#3A1D1D;color:#FEE500;text-decoration:none;border-radius:999px;padding:6px 10px;white-space:nowrap}
#kakaoBar button{border:0;background:transparent;font-size:18px;color:#3A1D1D}
body.kakao.read #viewport{padding-top:108px}

/* phones in landscape: compact bar, slide fills the screen */
#viewport{top:var(--barH,52px)}
body:not(.read) #kakaoBar{display:none}
@media (max-height:500px) and (orientation:landscape){
  .bar{height:40px;gap:6px;padding:0 8px}
  .bar .brand{font-size:13px}
  .bar .brand .long{display:none}
  .bar select,.iconbtn,.seg button,.narbtn{padding:4px 9px;font-size:12px}
  .nav{width:34px;height:34px;font-size:18px;opacity:.55}
  .nav.prev{left:4px}.nav.next{right:4px}
  #narrator .face{width:72px;height:72px}
}

/* ================= v4 시각화 (발표 PPT v4와 같은 그림·구성) ================= */
.flg{display:inline-block;height:20px;width:auto;border:1px solid var(--line);border-radius:2px;vertical-align:middle;flex:none}
/* cover map */
.cmap{position:absolute;right:0;top:0;width:823px;height:720px;background:url('img/v4/cover_map.jpg') center/cover no-repeat}
.slide.dark .in{z-index:1}
.cover .cbig{display:flex;align-items:center;gap:18px}
.cover .cbig .cflag{height:44px;margin-top:40px;border-color:rgba(255,255,255,.4)}
/* country header flag */
.chead{position:relative}
.chead .chf{position:absolute;right:0;top:-6px;height:32px}
.chead>div{padding-right:70px}
/* timeline v4 */
.tl2{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:26px}
.tl2 .band{position:absolute;left:0;right:0;top:31px;height:38px;background:#DCE6E4}
.tl2 .ev{position:relative;display:flex;flex-direction:column;align-items:center}
.tl2 .cir{width:100px;height:100px;border-radius:50%;background:#fff;border:3px solid var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.tl2 .cir small{font-weight:700;font-size:13px;color:var(--muted)}
.tl2 .cir b{font-weight:900;font-size:24px;color:var(--deep)}
.tl2 .ev.hot .cir{border-color:var(--red)}
.tl2 .ev.hot .cir b{color:var(--red)}
.tl2 .ar{display:block;width:28px;height:24px;margin:8px 0;background:var(--grey);clip-path:polygon(30% 0,70% 0,70% 48%,100% 48%,50% 100%,0 48%,30% 48%)}
.tl2 .ar.sm{width:22px;height:18px;margin:6px 0 4px}
.tl2 .cd{flex:1;width:100%;border:1.5px solid var(--deep);border-radius:8px;padding:12px 12px 10px;text-align:center;background:#fff}
.tl2 .cd img{width:38px;height:38px}
.tl2 .nm{font-weight:800;font-size:15px;color:var(--deep);line-height:1.3;margin-top:6px}
.tl2 .ds{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:7px}
.tl2 .ev.hot .cd{background:var(--amber);border-color:var(--amber)}
.tl2 .ev.hot .ds{color:var(--deep)}
.callout.dk{background:var(--deep);color:#fff;font-size:17px;padding:16px 24px}
/* stats + lens */
.lensrow{display:grid;grid-template-columns:600px 1fr;gap:26px;margin-top:22px;align-items:start}
.lens{margin:0}
.lens .lpic{position:relative}
.lens img{display:block;width:100%;height:auto}
.lens .lc{position:absolute;transform:translate(-50%,-50%);text-align:center;font-weight:700;font-size:13px;color:#4A5759;line-height:1.25}
.lens figcaption{position:relative;height:50px;margin-top:8px;font-size:14px}
.lens figcaption div{position:absolute;left:0;top:0;max-width:37%;color:var(--muted);line-height:1.4}
.lens figcaption div.now{left:39%;max-width:61%;color:var(--deep)}
.lens figcaption b{display:block;font-weight:800}
.stats.s2{grid-template-columns:1fr 1fr;gap:14px;margin-top:0}
.stats.s2 .stat{min-height:160px;padding:14px 18px 12px}
.stats.s2 .stat b{font-size:34px;min-height:0}
.stats.s2 .stat b.sm{font-size:27px}
.stats.s2 .stat p{font-size:13.5px;line-height:1.45;margin-top:6px}
.stats.s2 .stat small{font-size:11px}
.lensrow+.h3{margin-top:18px}
/* headline flags */
.hcard .top .hf{margin-left:auto;height:22px}
/* matrix v4 */
.mx{display:grid;grid-template-columns:232px repeat(6,1fr);margin-top:20px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.mx .mh{background:var(--deep);color:#fff;font-weight:800;font-size:14px;height:48px;display:flex;align-items:center;gap:8px;padding:0 10px;text-decoration:none;border-right:1px solid #24525A}
.mx .mh:hover span{text-decoration:underline}
.mx .mh .flg{height:16px;border-color:rgba(255,255,255,.4)}
.mx .mt,.mx .mc{height:94px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.mx .alt{background:#F6F9F8}
.mx .mt{padding:10px 14px;display:flex;flex-direction:column;justify-content:center}
.mx .mt b{font-weight:800;font-size:15px;color:var(--deep)}
.mx .mt span{font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:3px}
.mx .mc{padding:5px}
.mx .on{height:100%;background:#E2EFEC;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px}
.mx .ics{display:flex;gap:8px;align-items:center}
.mx .ics img{height:40px;width:auto}
.mx .on span{font-weight:700;font-size:11px;text-align:center;line-height:1.25}
.mx .is{height:64px;background:var(--soft)}
.mx .mc.is{font-size:11.5px;line-height:1.35;padding:6px 10px;display:flex;align-items:center}
.mxl{display:none}
/* risk v4 */
.risk{grid-template-columns:440px 1fr}
.chartcard{padding:14px 18px 12px}
.ill{height:172px;display:flex;align-items:center;justify-content:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px}
.ill .ipic{position:relative;display:inline-block;max-width:100%}
.ill .ipic img{display:block;max-height:160px;max-width:100%;width:auto;height:auto}
.ill.wc .ipic img{max-width:250px}
.ill .co{width:150px;flex:none}
.ill .co b{display:block;font-weight:900;font-size:30px;color:var(--red);line-height:1.1}
.ill .co span{display:block;font-weight:700;font-size:12.5px;line-height:1.4;margin-top:6px}
.ill .ov{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:20px;color:#fff}
.ill .arw{position:absolute;display:flex;align-items:center;justify-content:flex-start;padding-left:4px;background:var(--deep);color:#fff;font-weight:800;font-size:10px;white-space:nowrap;clip-path:polygon(0 22%,74% 22%,74% 0,100% 50%,74% 100%,74% 78%,0 78%)}
.ill .gap{position:absolute;font-weight:800;font-size:12px;color:var(--red);line-height:1.2;white-space:nowrap}
.chartcard h5{font-size:14px}
.chartbox{padding:4px 0}
.chartcard .barrow{margin:4px 0;font-size:13px}
.chartcard .barrow .fill{height:18px}
.chartcard .donut{flex-direction:row;gap:22px}
.chartcard .ring{width:150px;height:150px}
.chartcard .ring::after{inset:32px}
.chartcard .ring .big{font-size:24px}
.chartcard .legend{flex-direction:column;align-items:flex-start;font-size:13.5px;gap:8px}
.chartcard .legend b{font-weight:900;color:var(--deep)}
/* task v4 */
.task{grid-template-columns:44px 1fr}
.task .ck{width:32px;height:32px;margin-top:-2px}
.when{padding:14px 24px}
.sched{flex:1;display:flex;position:relative;padding-top:18px}
.sched::before{content:"";position:absolute;left:6px;right:20px;top:6px;height:2px;background:var(--grey)}
.sched .it{flex:1;position:relative;padding-right:12px;font-size:14px;line-height:1.35}
.sched .it i{position:absolute;left:0;top:-18px;width:13px;height:13px;border-radius:50%;background:var(--teal);border:2px solid #fff}
.sched .it.d i{background:var(--amber)}
.sched strong{font-weight:900;color:var(--deep)}
/* summary flags */
table.t td .tf{height:16px;margin-right:9px;vertical-align:-2px}
/* trust (bridge) */
.bridge{position:relative;width:998px;margin:20px auto 0}
.bridge img{display:block;width:100%;height:auto;border-radius:6px}
.bridge .bl{position:absolute;top:66%;text-align:center;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.bridge .bl.l{left:3%;width:30%}
.bridge .bl.r{left:66%;width:33%}
.bridge .bl b{display:block;font-weight:900;font-size:24px}
.bridge .bl span{display:block;font-size:15px;margin-top:4px}
.callout.trust{margin-top:16px;text-align:center;font-weight:400;font-size:16px;color:var(--ink);border:1px solid var(--grey)}
.callout.trust b{font-weight:800;color:var(--deep)}
/* foundations (pillars) */
.pillars{width:1060px;margin:24px auto 0}
.pillars .roof{height:20px;background:var(--deep)}
.pillars .cols{display:flex;justify-content:space-between;padding:0 34px}
.pillars .pl{width:318px;display:flex;flex-direction:column}
.pillars .cap{display:block;height:13px;background:var(--teal);margin:0 -12px}
.pillars .sh{background:var(--soft);height:336px;padding:22px 26px;text-align:center}
.pillars .sh img{width:96px;height:96px;object-fit:contain}
.pillars h6{font-weight:900;font-size:20px;color:var(--deep);line-height:1.3;margin-top:14px}
.pillars p{font-size:15px;line-height:1.55;margin-top:14px}
.note.c{text-align:center;color:var(--teal);font-size:16px;margin-top:16px}
/* 2030 arrow */
.arrow30{display:flex;margin-top:26px;height:440px;position:relative}
.arrow30 .body{flex:1;background:var(--deep);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;padding:22px 10px 22px 26px;color:#fff}
.arrow30 .o{padding:6px 22px 10px 0;margin-right:22px;border-right:1px solid #2C5C63}
.arrow30 .o:nth-child(3n){border-right:0;margin-right:0}
.arrow30 .o:nth-child(-n+3){border-bottom:1px solid #2C5C63;margin-bottom:6px}
.arrow30 .o:nth-child(n+4){padding-top:20px}
.arrow30 .h{display:flex;align-items:center;gap:10px}
.arrow30 .h .flg{height:24px;border-color:rgba(255,255,255,.3)}
.arrow30 .h b{font-weight:900;font-size:18px;color:#9FD3CA;white-space:pre}
.arrow30 .o p{font-size:16px;line-height:1.55;margin-top:10px}
.arrow30 .head{width:170px;margin:-24px 0;background:var(--teal);clip-path:polygon(0 0,100% 50%,0 100%);display:flex;align-items:center}
.arrow30 .head span{font-weight:900;font-size:28px;color:#fff;padding-left:12px}
/* who */
.who .wstats{position:relative;padding:12px 16px;border-radius:10px;overflow:hidden}
.who .wstats::before{content:"";position:absolute;inset:0;background:url('img/v4/dashboard.jpg') center/cover;opacity:.18}
.who .wstats>div{position:relative}
.who .wstats b{color:#C98A12;font-size:40px;line-height:1.15;margin-bottom:4px}
.who .wstats span{color:var(--ink);font-weight:700}
/* closing */
.cover.close h1{font-size:42px;line-height:1.45;margin-top:170px}
.cover.close .ty{font-weight:800;font-size:23px;color:#CFE3E0;margin-top:48px}
.cover.close .lk{font-weight:700;font-size:21px;color:var(--amber);margin-top:14px}

/* ---- v4 읽기형(휴대폰 세로) ---- */
body.read .cmap{width:100%;height:100%;opacity:.45}
body.read .cover.close h1{font-size:23px;margin-top:10px}
body.read .cover.close .ty{font-size:16px;margin-top:22px}
body.read .cover.close .lk{font-size:15px}
body.read .cover .cbig .cflag{height:30px;margin-top:18px}
body.read .chead .chf{height:22px;top:0}
body.read .chead>div{padding-right:40px}
body.read .tl2{grid-template-columns:1fr;gap:10px;margin-top:14px}
body.read .tl2 .band,body.read .tl2 .ar{display:none}
body.read .tl2 .ev{flex-direction:row;align-items:stretch;gap:10px}
body.read .tl2 .cir{width:64px;height:64px;flex:none;border-width:2px}
body.read .tl2 .cir small{font-size:10px}
body.read .tl2 .cir b{font-size:15px}
body.read .tl2 .cd{text-align:left;padding:10px 12px}
body.read .tl2 .cd img{width:26px;height:26px;float:right;margin-left:6px}
body.read .tl2 .nm{font-size:14.5px;margin-top:0}
body.read .tl2 .ds{font-size:12.5px;margin-top:4px}
body.read .callout.dk{font-size:14.5px;padding:12px 14px}
body.read .lensrow{grid-template-columns:1fr;gap:12px;margin-top:14px}
body.read .lens .lc{font-size:10px}
body.read .lens figcaption{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px}
body.read .lens figcaption div{position:static;max-width:none}
body.read .stats.s2 .stat{min-height:0}
body.read .stats.s2 .stat b{font-size:26px}
body.read .stats.s2 .stat b.sm{font-size:19px}
body.read .hcard .top .hf{height:18px}
body.read .mx{display:none}
body.read .mxl{display:block;margin-top:14px}
body.read .mxc{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
body.read .mxc .nm{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:16px}
body.read .mxc .th{color:var(--teal);font-weight:800;font-size:13px;margin-top:4px}
body.read .mxc .row{display:flex;align-items:center;gap:8px;background:#E2EFEC;border-radius:8px;padding:6px 10px;margin-top:8px;font-weight:700;font-size:13px}
body.read .mxc .row img{height:30px;width:auto}
body.read .mxc p{font-size:13px;line-height:1.5;margin-top:8px}
body.read .mxc p b{color:var(--teal);font-weight:800;margin-right:4px}
body.read .ill{height:auto;flex-wrap:wrap}
body.read .ill .ipic img{max-height:130px}
body.read .ill .co{width:auto;flex:1;min-width:120px}
body.read .ill .co b{font-size:24px}
body.read .chartcard .donut{gap:14px}
body.read .chartcard .ring{width:120px;height:120px}
body.read .chartcard .ring::after{inset:26px}
body.read .task .ck{width:24px;height:24px}
body.read .when{gap:12px}
body.read .sched{flex-direction:column;padding-top:0;padding-left:20px;gap:8px;width:100%}
body.read .sched::before{left:5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
body.read .sched .it i{left:-20px;top:3px}
body.read .sched .it{font-size:13.5px}
body.read .bridge{width:auto;margin-top:14px}
body.read .bridge .bl b{font-size:13px}
body.read .bridge .bl span{font-size:10px}
body.read .callout.trust{font-size:14px}
body.read .pillars{width:auto;margin-top:14px}
body.read .pillars .roof{display:none}
body.read .pillars .cols{flex-direction:column;padding:0;gap:10px}
body.read .pillars .pl{width:auto}
body.read .pillars .cap{display:none}
body.read .pillars .sh{height:auto;border-radius:10px;padding:14px;display:grid;grid-template-columns:56px 1fr;gap:4px 12px;text-align:left}
body.read .pillars .sh img{width:56px;height:56px;grid-row:span 2}
body.read .pillars h6{font-size:16px;margin-top:0}
body.read .pillars h6 br{display:none}
body.read .pillars p{font-size:13.5px;margin-top:0}
body.read .note.c{font-size:13.5px}
body.read .arrow30{display:block;height:auto;margin-top:14px}
body.read .arrow30 .head{display:none}
body.read .arrow30 .body{display:block;border-radius:10px;padding:6px 14px}
body.read .arrow30 .o{border-right:0;margin:0;padding:12px 0;border-bottom:1px solid #2C5C63}
body.read .arrow30 .o:last-child{border-bottom:0}
body.read .arrow30 .h b{font-size:15px}
body.read .arrow30 .o p{font-size:14px;margin-top:6px}
body.read .who .wstats b{font-size:24px}
/* v4 보정: 긴 문장 언어(en·vi·th·km·id)에서 넘치지 않게 */
.lensrow{grid-template-columns:560px 1fr;margin-top:16px}
.stats.s2 .stat{min-height:150px}
.stats.s2 .stat p{font-size:13px;line-height:1.4}
.stats.s2 .stat small{font-size:10.5px;line-height:1.3;margin-top:4px}
html:not([lang=ko]) .stats.s2 .stat b.sm{font-size:22px}
.lensrow~.h3{margin-top:12px;font-size:17px}
.lensrow~.four{margin-top:6px;gap:18px}
.lensrow~.four h4{font-size:16px;line-height:1.3}
.lensrow~.four p{font-size:13.5px;margin-top:3px;line-height:1.4}
.bridge{width:940px}
.bridge .bl{top:64%}
.bridge .bl.l{left:2%;width:31%}
.bridge .bl.r{left:65%;width:34%}
html:not([lang=ko]) .bridge .bl b{font-size:20px}
html:not([lang=ko]) .bridge .bl span{font-size:12.5px}
.pillars .sh{height:auto;min-height:300px;flex:1}
.pillars .cols{align-items:stretch}
html:not([lang=ko]) .pillars h6{font-size:18px}
html:not([lang=ko]) .pillars p{font-size:14px;line-height:1.5}
html[lang=en] .cover.close h1{font-size:38px}
.bridge .bl.r{left:67%;width:32%}
body.read .pillars .sh{min-height:0}
html body.read .bridge .bl{top:60%}
html body.read .bridge .bl b{font-size:12.5px;line-height:1.25}
html body.read .bridge .bl span{display:none}
html body.read .bridge .bl.l{left:1%;width:34%}
body.read .slide.dark .in{position:relative;z-index:1}