/* ---------- Guide library pages (2026-10-27): the long how-to guides, the market regulation table, the glossary,
   the templates and the calculators. Loaded only by those pages, next to starter.css.
   Prefix gl-. Colors and radii come from site.css custom properties. ---------- */

/* on this page */
.gl-toc{background:var(--band);border-radius:var(--r);padding:16px 20px;margin-top:24px}
.gl-toc b{display:block;font-size:14px;letter-spacing:.01em;margin-bottom:6px}
.article .gl-toc ol{margin:0 0 0 20px;columns:2;column-gap:28px}
.article .gl-toc li{font-size:15px;line-height:1.45;margin-top:4px;break-inside:avoid}
.gl-toc a{text-decoration:none}
.gl-toc a:hover{text-decoration:underline}

/* short answer */
.gl-answer{border-inline-start:4px solid var(--accent);background:var(--panel);padding:4px 0 4px 18px;margin-top:22px}
.article .gl-answer p{margin-top:6px}
.gl-answer b{display:block;font-size:14px;letter-spacing:.01em;color:var(--accent-dark)}

/* numbered steps */
.article ol.gl-steps{list-style:none;margin:16px 0 0;padding:0;counter-reset:gls}
.article ol.gl-steps>li{counter-increment:gls;position:relative;padding:14px 16px 14px 58px;margin-top:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.article ol.gl-steps>li::before{content:counter(gls);position:absolute;inset-inline-start:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center}
.article ol.gl-steps>li>b:first-child{display:block;font-size:17px;letter-spacing:-.005em}
.article ol.gl-steps>li p{margin-top:6px;font-size:16px}
.article ol.gl-steps>li ul{margin-top:6px}
.article ol.gl-steps>li li{font-size:15.5px}

/* checklist */
.gl-check{background:var(--mint);border-radius:var(--r);padding:16px 20px;margin-top:22px}
.gl-check>b{display:block;font-size:16px;margin-bottom:4px}
.article .gl-check ul{list-style:none;margin:6px 0 0;padding:0}
.article .gl-check li{position:relative;padding-inline-start:30px;font-size:15.5px;line-height:1.5;margin-top:8px}
.article .gl-check li::before{content:"";position:absolute;inset-inline-start:0;top:3px;width:17px;height:17px;border:2px solid #146b45;border-radius:4px;background:#fff}

/* common mistakes */
.gl-warn{background:var(--peach);border-radius:var(--r);padding:16px 20px;margin-top:22px}
.gl-warn>b{display:block;font-size:16px;margin-bottom:4px}
.article .gl-warn ul{margin-top:6px}
.article .gl-warn li{font-size:15.5px}

/* key numbers */
.gl-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.gl-nums div{border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;background:var(--panel)}
.gl-nums b{display:block;font-size:20px;letter-spacing:-.02em;line-height:1.15}
.gl-nums span{display:block;margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--ink2)}

/* how KoreanOEM helps */
.gl-help{background:var(--accent-soft);border-radius:var(--r);padding:20px 22px;margin-top:32px}
.gl-help h2{margin-top:0;font-size:24px}
.article .gl-help ul{margin-top:8px}
.article .gl-help li{font-size:16px}
.gl-help .row{margin-top:16px;flex-wrap:wrap;gap:10px}

/* templates */
.gl-tpl{position:relative;margin-top:18px;border:1px solid var(--line2);border-radius:var(--r);background:var(--band)}
.gl-tpl-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.gl-tpl-h b{font-size:15px}
.gl-tpl-h .btn{padding:7px 12px;font-size:13px}
.gl-tpl pre{margin:0;padding:14px 16px;white-space:pre-wrap;word-break:break-word;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);max-height:520px;overflow:auto}

/* glossary */
.gl-az{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.gl-az a{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border:1.5px solid var(--line);border-radius:var(--r2);font-weight:700;font-size:14px;text-decoration:none!important}
.gl-az a:hover{border-color:var(--ink)}
.gl-terms{margin-top:8px}
.gl-terms dt{font-weight:800;font-size:16.5px;margin-top:16px;scroll-margin-top:90px}
.gl-terms dd{margin:4px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.gl-terms dd a{text-decoration:underline;text-underline-offset:2px}
.gl-filter{margin-top:18px;max-width:420px}

/* calculators */
.gl-calc{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start;margin-top:8px}
.gl-calc fieldset{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 18px;margin:0 0 14px;background:var(--panel)}
.gl-calc legend{font-weight:800;font-size:16px;padding:0 6px}
.gl-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.gl-fields .field .help{line-height:1.4}
.gl-out{position:sticky;top:calc(var(--nav-h) + 16px);border-radius:var(--r);padding:18px 20px;background:var(--ink);color:#fff}
.gl-out h2{font-size:15px;color:rgba(255,255,255,.75);margin:0;letter-spacing:.01em}
.gl-out .big{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:6px}
.gl-out dl{margin:14px 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:14px}
.gl-out dt{color:rgba(255,255,255,.75)}
.gl-out dd{margin:0;font-weight:700;text-align:end}
.gl-out .sep{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.18);margin:4px 0}
.gl-out p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.7);margin-top:12px}
.gl-out .btn{margin-top:12px;width:100%;justify-content:center}

/* market table */
.gl-mt td,.gl-mt th{font-size:13px}
.gl-mt td:first-child{white-space:nowrap}

@media (max-width:960px){.gl-calc{grid-template-columns:minmax(0,1fr)}.gl-out{position:static}}
@media (max-width:700px){.article .gl-toc ol{columns:1}.gl-nums{grid-template-columns:minmax(0,1fr)}.gl-fields{grid-template-columns:minmax(0,1fr)}}
@media print{.gl-toc,.gl-help .row,.gl-tpl-h .btn{display:none}.gl-tpl pre{max-height:none}}