:root{
  --navy:#10263d;--amber:#f5ad1b;--blue:#1688d8;--green:#0fa968;
  --purple:#7c3aed;--orange:#d97706;--red:#e53e3e;
  --text:#1a1a2e;--muted:#6b7280;--bg:#f8fafc;--card:#fff;--border:#e5e7eb;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;}
.hdr{background:var(--navy);padding:13px 20px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:100;}
.hdr a{color:rgba(255,255,255,.7);text-decoration:none;font-size:13px;white-space:nowrap;}
.hdr .ttl{color:#fff;font-weight:700;font-size:14px;}
.hdr .breadcrumb{font-size:12px;color:rgba(255,255,255,.5);}
.page{max-width:860px;margin:0 auto;padding:24px 16px 80px;}
.card{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:20px;margin-bottom:16px;}
.card-title{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--bg);}
.section{margin-bottom:32px;}
.section-title{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:4px;}
.section-sub{font-size:13px;color:var(--muted);margin-bottom:16px;}
.tag{font-size:10px;padding:2px 8px;border-radius:8px;font-weight:600;display:inline-block;}
.tag-blue{background:#eff6ff;color:#1d4ed8;}
.tag-green{background:#f0fdf4;color:#166534;}
.tag-purple{background:#faf5ff;color:#6b21a8;}
.tag-amber{background:#fef3c7;color:#92400e;}
.tag-red{background:#fef2f2;color:#991b1b;}
.tip{background:#fef3c7;border:1px solid #f6d860;border-radius:8px;padding:12px 14px;font-size:13px;color:#92400e;line-height:1.7;margin-top:10px;}
.tip b{font-weight:700;}
.note{background:#f0f7ff;border-left:3px solid var(--blue);padding:10px 12px;border-radius:0 8px 8px 0;font-size:13px;color:var(--navy);line-height:1.6;margin-top:8px;}
.pro-badge{background:var(--amber);color:var(--navy);font-size:9px;font-weight:800;padding:2px 7px;border-radius:6px;vertical-align:middle;margin-left:6px;}
.btn-primary{display:inline-block;background:var(--navy);color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:700;border:none;cursor:pointer;text-decoration:none;transition:opacity .15s;}
.btn-primary:hover{opacity:.85;}
.btn-amber{background:var(--amber);color:var(--navy);}
@media(max-width:600px){
  .page{padding:16px 12px 80px;}
  .card{padding:14px;}
}