@font-face{font-family:"Be Vietnam Pro";font-weight:300;src:url(fonts/bvp-300.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;src:url(fonts/bvp-400.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Be Vietnam Pro";font-weight:500;src:url(fonts/bvp-500.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;src:url(fonts/bvp-600.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Be Vietnam Pro";font-weight:700;src:url(fonts/bvp-700.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Be Vietnam Pro";font-weight:800;src:url(fonts/bvp-800.ttf) format("truetype");font-display:swap}
:root{--navy:#142C55;--gold:#C4A24A;--paper:#fff;--ink:#142C55;--mute:#4A5670;--line:#C9D0DD;--desk:#E9ECF1}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Be Vietnam Pro",system-ui,sans-serif;color:var(--ink);background:var(--desk);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* toolbar (screen only) */
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.bar b{font-weight:700;font-size:14px}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:10px 18px;min-height:44px;line-height:24px}
.btn:hover{background:#0d1f3d}
.credit{text-align:center;font-size:12px;color:var(--mute);padding:20px 16px 32px}

/* ---------- mobile-first flow ---------- */
.page{background:var(--paper);margin:12px auto;padding:28px 20px 24px;max-width:560px;position:relative;overflow:hidden}
.g{display:grid;gap:16px}
.sec{display:flex;flex-direction:column;gap:16px}
h1,h2,h3{font-weight:800;line-height:1.08;letter-spacing:-.015em}
.logo{height:22px;width:auto;display:block}
.rule{height:1px;background:var(--gold);width:48px;border:0}
.num{font-weight:800;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.lab{font-size:12px;font-weight:600;letter-spacing:.02em}
.sub{font-size:16px;font-weight:400;line-height:1.5;color:var(--ink);max-width:46ch}
.ph{position:relative;background:#fff;border:1px solid var(--line);width:100%}
.ph.r169{aspect-ratio:16/9}.ph.r32{aspect-ratio:3/2}.ph.r43{aspect-ratio:4/3}
.tag{position:absolute;top:0;left:0;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--navy);font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 8px}
.cap{font-size:12px;line-height:1.5;color:var(--mute);margin-top:8px;max-width:62ch}
.fig .cap b{color:var(--navy);font-weight:600}
.pf{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--mute);border-top:1px solid var(--navy);padding-top:8px;margin-top:28px;font-variant-numeric:tabular-nums}
.pf span:last-child{color:var(--navy);font-weight:700}
.navy{background:var(--navy);color:#fff}
.navy .num,.navy .gold{color:var(--gold)}
.gold{color:var(--gold)}

/* cover */
.cover .band{background:var(--navy);color:#fff;margin:8px -20px -24px;padding:24px 20px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.cover .band .gold{font-weight:600}
.cover h1{font-size:44px}
/* toc */
.toc{list-style:none;border-top:1px solid var(--navy)}
.toc li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:16px}
.toc li i{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
/* panel pages */
.panel{background:var(--navy);color:#fff;margin:-28px -20px 8px;padding:28px 20px;display:flex;flex-direction:column;gap:28px}
.panel .num{font-size:96px;color:var(--gold)}
.panel h2{font-size:30px}
.panel .lab{color:var(--gold)}
.item{display:grid;grid-template-columns:44px 1fr;gap:8px;border-top:1px solid var(--navy);padding:14px 0}
.item .n{font-size:30px;font-weight:800;line-height:1;color:var(--navy)}
.item p{font-size:16px;font-weight:600;line-height:1.45}
.item .d{font-size:13px;color:var(--mute);margin-top:4px;font-weight:400}
.item ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.item li{font-size:14px;font-weight:400;border-left:1px solid var(--gold);padding-left:12px}
.item li b{display:block;font-weight:700}
.vals{display:flex;flex-direction:column}
.vals p+p{margin-top:6px}
.vals p{font-weight:500;font-size:15px}
.vals p:first-child{font-weight:700;font-size:16px}
.tier{font-size:13px;font-weight:700;margin-bottom:-4px}
/* diagram */
.dia{display:flex;flex-direction:column;gap:12px}
.ph-h{border-top:3px solid var(--navy);padding:12px 0}
.ph-h .num{font-size:12px;font-weight:700;color:var(--navy)}
.ph-h b{display:block;font-size:20px;font-weight:800}
.ph-h p{font-size:13px;color:var(--mute)}
.pair{display:flex;flex-direction:column;gap:0}
.cellx{border:1px solid var(--navy);padding:14px;background:#fff}
.cellx small,.cellv small{display:block;font-size:11px;font-weight:600;color:var(--mute);letter-spacing:.02em}
.cellx b,.cellv b{display:block;font-size:17px;font-weight:800;line-height:1.2;margin:2px 0}
.cellx span,.cellv span{font-size:13px}
.cellv{background:var(--navy);color:#fff;padding:14px;border:1px solid var(--navy)}
.cellv small{color:var(--gold)}
.note{font-size:12px;color:var(--mute);border-top:1px solid var(--line);padding-top:10px}
.gh{font-size:12px;font-weight:700}
.gh i{font-style:normal;font-weight:500;color:var(--mute)}
/* appendix */
.chan{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--navy);padding-top:14px}
.chan .a{display:flex;align-items:baseline;gap:12px}
.chan .a .num{font-size:44px;color:var(--navy)}
.chan h3{font-size:22px}
.spec{display:grid;grid-template-columns:96px 1fr;gap:4px 12px;font-size:14px}
.spec dt{font-weight:700;border-top:1px solid var(--line);padding-top:6px}
.spec dd{border-top:1px solid var(--line);padding-top:6px;color:var(--ink)}
.strip{font-size:13px;font-weight:500;border-top:1px solid var(--gold);padding-top:10px}
.pgh{display:flex;align-items:flex-end;gap:16px}
.pgh .num{font-size:72px;color:var(--navy)}
.hd{font-size:32px}

/* ---------- A4 page mode (desktop screen + print) ---------- */
@media (min-width:860px),print{
 .page{width:210mm;height:297mm;max-width:none;margin:14px auto;padding:20mm 18mm 0;display:block;page-break-after:always;break-after:page;break-inside:avoid}
 .pf{position:absolute;left:18mm;right:18mm;bottom:11mm;margin:0;font-size:8.5pt}
 .g{grid-template-columns:repeat(12,1fr);column-gap:4mm;row-gap:0}
 .logo{height:7mm}
 .sub{font-size:12.5pt}
 .cap{font-size:8pt;margin-top:2.5mm}
 .tag{font-size:6.5pt;padding:1mm 2.5mm}
 .lab{font-size:8.5pt}
 /* cover */
 .cover{padding:0}
 .cover .top{position:absolute;left:18mm;right:18mm;top:20mm}
 .cover h1{font-size:50pt;position:absolute;left:18mm;top:50mm;width:150mm}
 .cover .rule{position:absolute;left:18mm;top:104mm;width:20mm}
 .cover .sub{position:absolute;left:18mm;top:110mm;width:90mm;font-size:13pt;line-height:1.5}
 .cover .fig{position:absolute;left:58mm;right:18mm;top:158mm}
 .cover .fig .cap{font-size:8pt}
 .cover .band{position:absolute;left:0;right:0;bottom:0;height:46mm;margin:0;padding:0 18mm;flex-direction:row;align-items:center;justify-content:space-between;font-size:9.5pt}
 .cover .band div:first-child{width:60mm}
 .cover .band .gold{display:block}
 /* toc page */
 .tp .head{position:absolute;left:18mm;right:18mm;top:20mm}
 .tp .big{font-size:96pt;color:var(--navy)}
 .tp h2{font-size:44pt;margin:6mm 0 5mm}
 .tp .sub{width:108mm;font-size:11.5pt}
 .tp .toc{position:absolute;left:18mm;top:128mm;width:72mm}
 .tp .toc li{font-size:10.5pt;padding:2.6mm 0;grid-template-columns:9mm 1fr}
 .tp .fig{position:absolute;left:100mm;right:18mm;top:128mm}
 /* panel pages */
 .split{padding:0}
 .panel{position:absolute;top:0;bottom:0;width:62mm;margin:0;padding:20mm 8mm 26mm 18mm;justify-content:space-between;gap:0}
 .panel .num{font-size:100pt}
 .panel h2{font-size:24pt}
 .split.l .panel{left:0}
 .split.r .panel{right:0;padding:20mm 18mm 26mm 8mm}
 .split .body{position:absolute;top:20mm;bottom:26mm;display:flex;flex-direction:column;justify-content:space-between}
 .split.l .body{left:80mm;right:18mm}
 .split.r .body{left:18mm;right:80mm}
 .split.l .pf{left:80mm}
 .split.r .pf{right:80mm}
 .split .pf{font-size:7.5pt}
 .item{grid-template-columns:12mm 1fr;padding:5mm 0}
 .item .n{font-size:28pt}
 .item p{font-size:12pt}
 .item .d{font-size:9.5pt}
 .item li{font-size:10pt}
 .vals p{font-size:10.5pt}.vals p:first-child{font-size:11.5pt}
 .tier{font-size:10pt}
 /* top band page */
 .topb .band{position:absolute;left:0;right:0;top:0;height:92mm;background:var(--navy);color:#fff;padding:20mm 18mm 0}
 .topb .band .num{font-size:110pt;color:var(--gold);position:absolute;right:18mm;top:14mm}
 .topb .band h2{position:absolute;left:18mm;bottom:12mm;font-size:30pt;width:100mm}
 .topb .band .lab{color:var(--gold)}
 .topb .body{position:absolute;left:18mm;right:18mm;top:104mm;bottom:26mm;display:flex;flex-direction:column;justify-content:space-between}
 .topb .lv{display:grid;grid-template-columns:12mm 1fr;padding:5mm 0;border-top:1px solid var(--navy)}
 .topb .lv:nth-child(2){margin-left:20mm}
 .topb .lv:nth-child(3){margin-left:40mm}
 .topb .lv .n{font-size:28pt;font-weight:800;line-height:1}
 .topb .lv p{font-size:13pt;font-weight:700}
 .topb .lv small{font-size:10pt;color:var(--mute);display:block;margin-top:1mm}
 .topb .fig{width:calc((174mm - 44mm)/12*8 + 28mm);margin-left:auto}
 /* diagram */
 .dg .hd{font-size:30pt;margin-top:4mm}
 .dg .lead{margin:4mm 0 8mm;font-size:11.5pt;font-weight:500;width:130mm}
 .dia{position:relative;gap:0}
 .dia::before,.dia::after{content:"";position:absolute;top:0;bottom:0;border-left:1px dashed var(--navy);z-index:0}
 .dia::before{left:calc((100% - 44mm)/12*4 + 4mm + 2mm - 2mm)}
 .dia::after{left:calc((100% - 44mm)/12*8 + 8mm + 6mm - 2mm)}
 .dia::before{left:calc(((100% - 44mm)/12*4) + 4*4mm - 2mm)}
 .dia::after{left:calc(((100% - 44mm)/12*8) + 8*4mm - 2mm)}
 .dia>*{position:relative;z-index:1}
 .tl{display:grid;grid-template-columns:repeat(3,1fr);column-gap:4mm;margin-bottom:6mm}
 .tl>div{padding:3mm 0 0}
 .ph-h .num{font-size:9pt}.ph-h b{font-size:15pt}.ph-h p{font-size:9pt;line-height:1.4}
 .ph-h{padding:3mm 4mm 3mm 0}
 .ph-h{background:#fff}
 .gh{font-size:9pt;margin:2mm 0 3mm;background:#fff;display:inline-block;padding-right:3mm}
 .pairs{display:flex;flex-direction:column;gap:5mm}
 .pair{display:grid;grid-template-columns:repeat(12,1fr);column-gap:4mm}
 .pair>.cellx{grid-column:1/7}.pair>.cellv{grid-column:7/13}
 .cellx,.cellv{padding:4mm 5mm;min-height:30mm}
 .cellx b,.cellv b{font-size:12.5pt}
 .cellx span,.cellv span{font-size:9pt;line-height:1.4;display:block}
 .cellx small,.cellv small{font-size:7.5pt}
 .dg .note{position:absolute;left:18mm;right:18mm;bottom:21mm;font-size:8pt;padding-top:2.5mm}
 /* appendix */
 .ap .top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:5mm}
 .ap .hd{font-size:30pt}
 .ap .strip{font-size:9pt;margin-bottom:6mm}
 .chans{display:flex;flex-direction:column;gap:6mm}
 .chan{display:grid;grid-template-columns:repeat(12,1fr);column-gap:4mm;padding-top:5mm;height:61mm}
 .chan>.fig{grid-column:1/6}
 .chan>.tx{grid-column:7/13}
 .chan.flip>.fig{grid-column:8/13;grid-row:1}
 .chan.flip>.tx{grid-column:1/7;grid-row:1}
 .chan .a .num{font-size:30pt}
 .chan h3{font-size:14pt}
 .spec{grid-template-columns:22mm 1fr;font-size:9.5pt;margin-top:3mm;gap:1mm 3mm}
 .chan .a{gap:4mm;align-items:baseline}
 .chan .cap{font-size:7pt;line-height:1.4;margin-top:1.5mm}
}
@media print{
 @page{size:A4;margin:0}
 html,body{background:#fff}
 .bar,.credit{display:none}
 .page{margin:0}
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}