/* ck-basis v2 10/29 (live since 10/29): 김프 계산 기준 page (kimp_basis.php) on the owner's design reference -
   numbered colour cards (blue / green / amber / red), white boxes inside, check lists, icon tiles, the 김프 지수's last 24 hours.
   Loaded by that page only (media="all" keeps it out of the shared CSS bundle, so the home page CSS is unchanged). */
.kb{--ink:#191f28;--sub:#4e5968;--mute:#6b7684;--up:#d6293e;--dn:#1f5fd6;margin:0 0 24px;color:var(--ink);word-break:keep-all;overflow-wrap:break-word;container-type:inline-size}
/* the page has its own title (red bar), so the theme's title bar is not shown - like the other pages with their own h1 */
html body .gxcon_area:has(> .kb h1.kb-h1) > h2.con_title{display:none}
.kb .up{color:var(--up)}.kb .dn{color:var(--dn)}.kb .zero{color:var(--mute)}
.kb .kb-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:2px 0 12px;font-size:13.5px;color:var(--mute)}
.kb .kb-crumb a{display:inline-flex;align-items:center;gap:5px;color:var(--mute);text-decoration:none}
.kb .kb-crumb svg{width:15px;height:15px}
.kb .kb-crumb i{font-style:normal;color:#b0b8c1}
.kb .kb-crumb b{font-weight:600;color:var(--ink)}
.kb h1.kb-h1{position:relative;float:none;width:auto;height:auto;margin:0 0 10px;padding:0 0 0 18px;font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.5px;color:var(--ink);text-align:left}
.kb h1.kb-h1::before{content:"";position:absolute;top:.2em;bottom:.2em;left:0;width:6px;border-radius:3px;background:#e5252a}
.kb .kb-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 14px;font-size:13.5px;color:var(--mute)}
.kb .kb-meta span{display:inline-flex;align-items:center;gap:6px}
.kb .kb-meta svg{width:16px;height:16px}
.kb .kb-lead{margin:0 0 20px;font-size:15px;line-height:1.75;color:var(--sub)}
.kb a.kb-in{color:#1a5fcf;font-weight:600;text-decoration:underline}

/* section cards */
.kb .kb-sec{--c:#2563eb;--bg:#f4f8ff;--ln:#dde8fb;--ct:#eef4ff;margin:0 0 16px;padding:22px 24px;border:1px solid var(--ln);border-radius:16px;background:var(--bg)}
.kb .kb-green{--c:#16a34a;--bg:#f2faf5;--ln:#d5efde;--ct:#e2f5e9}
.kb .kb-amber{--c:#d97706;--bg:#fffaf0;--ln:#f6e5c0;--ct:#fff1d4}
.kb .kb-red{--c:#e11d48;--bg:#fff5f6;--ln:#f9dbe1;--ct:#fde6ea}
.kb h2.kb-h2{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:0;border:0;font-size:21px;font-weight:800;line-height:1.35;color:var(--ink)}
.kb h2.kb-h2 b{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--c);color:#fff;font-size:19px;font-weight:800}
.kb .kb-box{padding:16px 18px;border:1px solid var(--ln);border-radius:12px;background:#fff}
.kb .kb-box h3,.kb .kb-h3s{margin:0 0 6px;padding:0;font-size:16px;font-weight:700;line-height:1.4;color:var(--ink)}
.kb .kb-h3s small{margin-left:6px;font-size:13px;font-weight:500;color:var(--mute)}
.kb .kb-h3s small em{font-style:normal;font-weight:700}
.kb .kb-box p,.kb .kb-p{margin:0;font-size:14.5px;line-height:1.75;color:var(--sub)}
.kb .kb-p{margin:0 0 12px}
.kb .kb-mt{margin-top:12px}
.kb .kb-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kb .kb-split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start}

/* 1: the formula as a fraction, the live example, check marks */
.kb .kb-formula{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;padding:20px 18px;font-size:16px;font-weight:700;color:var(--ink)}
.kb .kb-frac{display:inline-flex;flex-direction:column;align-items:center;text-align:center}
.kb .kb-num{padding:0 8px 7px;border-bottom:1.6px solid var(--ink)}
.kb .kb-den{padding:7px 8px 0}
.kb .kb-ex{margin:10px 0 0;font-size:13.5px;line-height:1.7;color:var(--mute);font-variant-numeric:tabular-nums}
.kb .kb-ex b{font-weight:800}
.kb ul.kb-checks{margin:12px 0 0;padding:0;list-style:none}
.kb ul.kb-checks li{position:relative;margin:0 0 7px;padding:0 0 0 29px;font-size:14.5px;line-height:1.7;color:var(--sub);list-style:none}
.kb ul.kb-checks li svg{position:absolute;top:3px;left:0;width:19px;height:19px;color:var(--c)}
.kb ul.kb-checks b{color:var(--ink)}

/* 2-3: boxes with logos / icon */
.kb .kb-pc{display:flex;align-items:flex-start;gap:14px}
.kb .kb-logos{display:inline-flex;flex-wrap:wrap;gap:6px;flex:none;max-width:68px}
.kb .kb-logos img{width:30px;height:30px;border-radius:8px}
.kb .kb-logos img:only-child{width:46px;height:46px;border-radius:12px}
.kb .kb-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:14px;background:var(--ct)}
.kb .kb-ico svg{width:30px;height:30px}
.kb table.kb-fxt{width:100%;margin:4px 0 0;border:0;border-collapse:collapse;font-size:14px}
.kb table.kb-fxt th,.kb table.kb-fxt td{padding:6px 0;border:0;border-bottom:1px solid #f0f1f4;background:none;color:var(--sub);text-align:left;font-weight:400}
.kb table.kb-fxt td{color:var(--ink);font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kb table.kb-fxt tr.kb-sum th,.kb table.kb-fxt tr.kb-sum td{border-bottom:0;font-weight:800}
.kb table.kb-fxt tr.kb-sum td.up{color:var(--up)}.kb table.kb-fxt tr.kb-sum td.dn{color:var(--dn)}
.kb ul.kb-dots{margin:12px 0 0;padding:0;list-style:none}
.kb ul.kb-dots li{position:relative;margin:0 0 6px;padding:0 0 0 16px;font-size:14px;line-height:1.75;color:var(--sub);list-style:none}
.kb ul.kb-dots li::before{content:"";position:absolute;top:.72em;left:2px;width:6px;height:6px;border-radius:50%;background:var(--c)}
.kb ul.kb-dots b{margin-right:4px;color:var(--ink)}

/* 4: icon tiles */
.kb h3.kb-sub{margin:18px 0 10px;padding:0;font-size:16px;font-weight:700;color:var(--ink)}
.kb .kb-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kb .kb-tile{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--ln);border-radius:12px;background:#fff}
.kb .kb-tile:last-child:nth-child(odd){grid-column:1 / -1}
.kb .kb-tile h4{margin:2px 0 4px;padding:0;font-size:15px;font-weight:700;color:var(--ink)}
.kb .kb-tile p{margin:0;font-size:13.5px;line-height:1.7;color:var(--sub)}
.kb .kb-ti{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:12px}
.kb .kb-ti svg{width:22px;height:22px}
.kb .t-or{background:#fff1e0;color:#e8590c}.kb .t-bl{background:#e7f0ff;color:#2563eb}.kb .t-pu{background:#f1eaff;color:#7c3aed}
.kb .t-te{background:#e3f6f3;color:#0d9488}.kb .t-rd{background:#fde6e9;color:#e11d48}.kb .t-pk{background:#fde8f3;color:#c2185b}.kb .t-gy{background:#eef0f4;color:#4e5968}
.kb .kb-tag{display:inline-block;padding:0 6px;border-radius:4px;background:#fdecee;color:#b4232f;font-size:12.5px;line-height:1.7}

/* 6: chart + update cycle */
.kb .kb-chart{position:relative;min-height:200px;margin-top:6px}
.kb .kb-chart svg{display:block;width:100%;height:auto;overflow:visible}
.kb .kb-chart .fr{fill:none;stroke:#e5e8ed}
.kb .kb-chart line.g{stroke:#eef0f4}
.kb .kb-chart .g0{stop-color:#2563eb;stop-opacity:.26}.kb .kb-chart .g1{stop-color:#2563eb;stop-opacity:.02}
.kb .kb-chart path.a{stroke:none}
.kb .kb-chart path.m{fill:none;stroke:#2563eb;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.kb .kb-chart text{font-size:11px;fill:#8b95a1;font-variant-numeric:tabular-nums}
.kb .kb-chart text.ya{text-anchor:end}.kb .kb-chart text.xa{text-anchor:middle}
.kb .kb-chart circle.mk{fill:#fff;stroke-width:2.4}.kb .kb-chart circle.hi{stroke:#e03131}.kb .kb-chart circle.lo{stroke:#2563eb}
.kb .kb-chart text.ml{text-anchor:middle;font-size:12px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.kb .kb-chart text.hi{fill:var(--up)}.kb .kb-chart text.lo{fill:var(--dn)}
.kb .kb-cycle .kb-h3s{display:flex;align-items:center;gap:8px}
.kb .kb-cycle .kb-h3s svg{width:20px;height:20px;color:var(--c)}
.kb .kb-cycle dl{display:grid;grid-template-columns:auto auto;gap:6px 14px;margin:6px 0 0;font-size:14px}
.kb .kb-cycle dt{color:var(--sub);font-weight:400}
.kb .kb-cycle dd{margin:0;color:var(--ink);font-weight:700;text-align:right;white-space:nowrap}

/* 7-8: three numbered tiles */
.kb ol.kb-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.kb ol.kb-three li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:14px 16px;border:1px solid var(--ln);border-radius:12px;background:#fff;list-style:none}
.kb ol.kb-three li > b{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--ct);color:var(--c);font-size:16px;font-weight:800}
.kb-amber ol.kb-three li > b{color:#b45309}
.kb ol.kb-three h4{margin:3px 0 4px;padding:0;font-size:15px;font-weight:700;color:var(--ink)}
.kb ol.kb-three p{margin:0;font-size:13.5px;line-height:1.65;color:var(--sub)}
.kb .kb-note{margin:12px 0 0;font-size:13.5px;line-height:1.7;color:var(--mute)}

/* 참고 */
.kb .kb-info{display:flex;align-items:flex-start;gap:12px;margin:0;padding:16px 20px;border:1px solid #dfe8f6;border-radius:14px;background:#f5f8fd}
.kb .kb-ii{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:#2563eb;color:#fff;font-family:Georgia,serif;font-size:16px;font-weight:700;font-style:italic}
.kb .kb-il{flex:none;margin-top:3px;font-size:14.5px;color:var(--ink)}
.kb .kb-info p{margin:2px 0 0;font-size:14px;line-height:1.7;color:var(--sub)}
.kb .kb-info small{display:block;margin-top:4px;font-size:12.5px;color:var(--mute)}

/* narrow page column (the side column takes its share, or a tablet): boxes and tiles one under another */
@container (max-width:680px){
	.kb .kb-two,.kb .kb-split,.kb .kb-tiles{grid-template-columns:1fr}
	.kb .kb-tile:last-child:nth-child(odd){grid-column:auto}
	.kb ol.kb-three{grid-template-columns:1fr}
}
@media (max-width:640px){
	.kb h1.kb-h1{padding-left:14px;font-size:22px}
	.kb h1.kb-h1::before{width:5px}
	.kb .kb-lead{font-size:14px}
	.kb .kb-sec{padding:18px 15px;border-radius:14px}
	.kb h2.kb-h2{gap:10px;font-size:18px}
	.kb h2.kb-h2 b{width:34px;height:34px}
	.kb .kb-formula{padding:16px 10px;font-size:13.5px}
	.kb .kb-num,.kb .kb-den{padding-right:4px;padding-left:4px}
	.kb .kb-box p,.kb .kb-p,.kb ul.kb-checks li{font-size:14px}
	.kb .kb-chart{min-height:170px}
	.kb .kb-info{flex-wrap:wrap;padding:14px 15px}
}

/* dark mode (gear panel) */
body.dm .kb{--ink:#eceef1;--sub:#c4c9d0;--mute:#a3a9b3;--up:#ff7d8f;--dn:#6aa4ff}
body.dm .kb .kb-sec{--bg:#262e3d;--ln:#34405a;--ct:#2f3b55}
body.dm .kb .kb-green{--bg:#23302a;--ln:#2f4a3a;--ct:#2b4234}
body.dm .kb .kb-amber{--bg:#332d22;--ln:#4d4130;--ct:#45391f}
body.dm .kb .kb-red{--bg:#35262b;--ln:#523640;--ct:#4a2e36}
body.dm .kb .kb-box,body.dm .kb .kb-tile,body.dm .kb ol.kb-three li{background:#2b2b2b}
body.dm .kb .kb-num{border-bottom-color:#eceef1}
body.dm .kb table.kb-fxt th,body.dm .kb table.kb-fxt td{border-bottom-color:#3a3d42}
body.dm .kb .kb-tag{background:#4a2328;color:#ffb3bb}
body.dm .kb .kb-info{border-color:#3a3d42;background:#2b2b2b}
body.dm .kb .kb-ii{background:#3b74f0}
body.dm .kb a.kb-in{color:#7fb3ff}
body.dm .kb .kb-chart .fr{stroke:#44474d}body.dm .kb .kb-chart line.g{stroke:#383b40}
body.dm .kb .kb-chart .g0{stop-color:#6aa4ff;stop-opacity:.3}body.dm .kb .kb-chart .g1{stop-color:#6aa4ff;stop-opacity:.02}
body.dm .kb .kb-chart path.m{stroke:#6aa4ff}body.dm .kb .kb-chart text{fill:#a3a9b3}
body.dm .kb .kb-chart circle.mk{fill:#2b2b2b}body.dm .kb .kb-chart text.ml{stroke:#2b2b2b}
body.dm .kb .t-or,body.dm .kb .t-bl,body.dm .kb .t-pu,body.dm .kb .t-te,body.dm .kb .t-rd,body.dm .kb .t-pk,body.dm .kb .t-gy{background:#3a3d42}