:root{
  --navy:#0D3349; --teal:#14A5A0; --ink:#1e293b; --muted:#64748b; --line:#e2e8f0; --soft:#f6f8fb;
  --red:#E11D48; --amber-bg:#FEF3C7; --amber:#92400E; --green-bg:#ECFDF5; --green:#065F46; --blue-bg:#EFF6FF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff}
body{font-family:'Noto Sans CJK KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:var(--ink);font-size:10.4pt;line-height:1.62;word-break:keep-all}
@media screen{ body{background:#eef1f5;padding:24px 12px} .page{max-width:820px;margin:0 auto 24px;background:#fff;padding:40px 44px;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.06)} }
@media print{ .page{padding:0} }
.page{page-break-after:always;break-after:page}
.page:last-child{page-break-after:auto;break-after:auto}

/* 표지 */
.cover{display:flex;flex-direction:column;min-height:255mm;padding:0}
.cover .band{background:var(--navy);color:#fff;border-radius:14px;padding:34px 34px 30px;position:relative;overflow:hidden}
.cover .band:after{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--teal)}
.cover .band img{width:68px;height:68px;border-radius:12px;display:block;margin-bottom:22px}
.cover .kicker{font-size:10pt;letter-spacing:2px;color:#9fd8d5;font-weight:700}
.cover h1{font-size:30pt;line-height:1.2;margin:8px 0 10px;font-weight:900;letter-spacing:-.5px}
.cover .sub{font-size:12pt;color:#d6e2ea}
.cover .meta{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cover .meta div{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:9pt;color:var(--muted)}
.cover .meta b{display:block;color:var(--ink);font-size:11pt;margin-top:2px}
.cover .promise{margin-top:22px;background:var(--soft);border-radius:12px;padding:18px 20px}
.cover .promise h3{margin:0 0 6px;font-size:11pt;color:var(--navy)}
.cover .promise ul{margin:0;padding-left:18px}
.cover .fine{margin-top:auto;font-size:8.2pt;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}

/* 목차 */
.toc{width:100%;border-collapse:collapse;margin-top:6px}
.toc td{padding:7px 4px;border-bottom:1px dashed var(--line);font-size:10pt;vertical-align:top}
.toc td.ch{width:44px;font-weight:800;color:var(--teal)}
.toc td.st{width:120px;text-align:right;font-size:8.5pt;color:var(--muted)}
.toc tr.in td{color:var(--ink)}
.toc tr.later td{color:#94a3b8}
.toc .tag{display:inline-block;font-size:7.6pt;font-weight:800;padding:1px 6px;border-radius:5px;background:#e2e8f0;color:#475569;margin-left:6px;vertical-align:1px}
.toc .tag.dx{background:#DBEAFE;color:#1E40AF}.toc .tag.pm{background:#EDE9FE;color:#5B21B6}

/* 제목 */
.chap{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.chap .no{background:var(--navy);color:#fff;font-weight:900;border-radius:10px;padding:6px 12px;font-size:12pt}
.chap h1{margin:0;font-size:19pt;color:var(--navy);letter-spacing:-.3px}
.lead{color:var(--muted);margin:2px 0 16px;font-size:10.2pt}
h2{font-size:13.5pt;color:var(--navy);margin:22px 0 8px;padding-bottom:5px;border-bottom:2px solid var(--line);break-after:avoid;page-break-after:avoid}
h2 .sn{color:var(--teal);margin-right:6px}
h3{font-size:11pt;margin:16px 0 6px;color:var(--ink);break-after:avoid;page-break-after:avoid}
p{margin:6px 0}

/* 그림 + 표 묶음 */
figure{margin:10px 0 6px;break-inside:avoid;page-break-inside:avoid}
figure img{display:block;max-width:100%;border:1px solid var(--line);border-radius:8px}
figure img.w70{max-width:72%}
figure img.w60{max-width:62%}
figure img.w50{max-width:52%}
figcaption{font-size:8.6pt;color:var(--muted);margin-top:5px}
.keep{break-inside:avoid;page-break-inside:avoid}

table.f{width:100%;border-collapse:collapse;margin:6px 0 10px;font-size:9.2pt;break-inside:auto}
table.f th{background:var(--navy);color:#fff;text-align:left;padding:6px 8px;font-weight:700;font-size:8.8pt}
table.f td{border-bottom:1px solid var(--line);padding:6px 8px;vertical-align:top}
table.f tr{break-inside:avoid;page-break-inside:avoid}
table.f tr:nth-child(even) td{background:#fafbfd}
table.f td.n{width:34px;text-align:center}
table.f td.k{width:118px;font-weight:700}
table.f td.ex{color:#0f766e;font-size:8.8pt;width:150px}
table.f td.req{width:40px;text-align:center;font-weight:800;color:var(--red)}
.nb{display:inline-block;min-width:19px;height:19px;padding:0 4px;border-radius:19px;background:var(--red);color:#fff;font-weight:800;font-size:8.6pt;line-height:19px;text-align:center;vertical-align:1px}
.btn{display:inline-block;border:1px solid #cbd5e1;background:#f8fafc;border-radius:5px;padding:0 6px;font-size:.92em;font-weight:700;line-height:1.55;white-space:nowrap}

/* 따라하기 */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:8px 0}
ol.steps>li{counter-increment:s;position:relative;padding:7px 10px 7px 40px;border-left:3px solid var(--teal);background:var(--soft);border-radius:0 8px 8px 0;margin-bottom:6px;break-inside:avoid}
ol.steps>li:before{content:counter(s);position:absolute;left:10px;top:7px;width:21px;height:21px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;font-size:9pt;text-align:center;line-height:21px}

/* 상자 */
.box{border-radius:10px;padding:10px 14px;margin:10px 0;font-size:9.6pt;break-inside:avoid}
.box b.t{display:block;margin-bottom:2px}
.warn{background:var(--amber-bg);border:1.5px solid #F59E0B;color:var(--amber)}
.tip{background:var(--green-bg);border:1.5px solid #34D399;color:var(--green)}
.info{background:var(--blue-bg);border:1.5px solid #93C5FD;color:#1E3A8A}
.dlg{border:1px solid #cbd5e1;border-radius:8px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.08);padding:10px 14px;margin:8px 0;max-width:430px;font-size:9.2pt;break-inside:avoid}
.dlg .dt{font-size:8pt;color:var(--muted);margin-bottom:4px}
.dlg .bt{text-align:right;margin-top:8px}
.dlg .bt span{display:inline-block;border-radius:5px;padding:2px 12px;font-size:8.6pt;margin-left:6px;border:1px solid #cbd5e1}
.dlg .bt span.ok{background:#2563EB;color:#fff;border-color:#2563EB}

.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
table.cmp{width:100%;border-collapse:collapse;font-size:9.2pt;margin:6px 0}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
table.cmp th{background:var(--soft)}
.legend{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;font-size:9.6pt}
.check li{list-style:'☐  '}