/* calc-kit — 계산기 UI. 색은 변수로 두고 prefers-color-scheme: dark 에서 바꾼다. */
:root{--ck-accent:#2563eb;--ck-accent-d:#1d4ed8;--ck-surface:#fff;--ck-bg:#f8fafc;--ck-line:#e2e8f0;--ck-input-line:#cbd5e1;--ck-text:#0f172a;--ck-mute:#64748b;--ck-err-bg:#fef2f2;--ck-err-line:#fecaca;--ck-err:#b91c1c;--ck-est:#b45309;--ck-icobg:#eff6ff}
@media (prefers-color-scheme:dark){:root{--ck-accent:#60a5fa;--ck-accent-d:#93c5fd;--ck-surface:#111827;--ck-bg:#1e293b;--ck-line:#334155;--ck-input-line:#475569;--ck-text:#e5e7eb;--ck-mute:#94a3b8;--ck-err-bg:#450a0a;--ck-err-line:#7f1d1d;--ck-err:#fca5a5;--ck-est:#fbbf24;--ck-icobg:#1e3a5f}}
.ck{margin:1.5rem 0;border:1px solid var(--ck-line);border-radius:14px;background:var(--ck-surface);padding:1.1rem;color:var(--ck-text)}
.ck-form{display:grid;gap:.85rem}
.ck-row{display:grid;gap:.3rem;font-size:.95rem}
.ck-lab{font-weight:600}
.ck-inwrap{display:flex;align-items:center;gap:.4rem}
.ck input,.ck select,.ck textarea{width:100%;box-sizing:border-box;min-height:46px;padding:.55rem .75rem;font:inherit;font-size:1rem;border:1px solid var(--ck-input-line);border-radius:10px;background:var(--ck-surface);color:inherit}
.ck textarea{padding:.65rem .75rem;resize:vertical;min-height:9rem}
.ck input:focus,.ck select:focus,.ck textarea:focus{outline:2px solid var(--ck-accent);outline-offset:1px;border-color:var(--ck-accent)}
.ck-unit{flex:none;color:var(--ck-mute);min-width:2.2em}
.ck-hint{font-size:.82rem;color:var(--ck-mute)}
.ck-msg:empty{display:none}
.ck-msg p{margin:.9rem 0 0;padding:.7rem .9rem;border-radius:10px;background:var(--ck-err-bg);color:var(--ck-err);border:1px solid var(--ck-err-line);font-size:.92rem;line-height:1.6}
.ck-result{margin-top:1.1rem}
.ck-main{background:var(--ck-bg);border-radius:12px;padding:1rem;text-align:center;border:1px solid var(--ck-line)}
.ck-main-l{font-size:.9rem;color:var(--ck-mute)}
.ck-main-v{font-size:1.65rem;font-weight:800;color:var(--ck-accent);margin:.2rem 0;word-break:keep-all}
.ck-main-s{font-size:.9rem;color:var(--ck-mute)}
.ck-list{display:grid;grid-template-columns:1fr auto;margin:.9rem 0 0;border-top:1px solid var(--ck-line)}
.ck-list dt,.ck-list dd{margin:0;padding:.55rem 0;border-bottom:1px solid var(--ck-line);font-size:.95rem}
.ck-list dd{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;padding-left:1rem}
.ck-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.ck-btn{flex:1 1 auto;min-height:44px;padding:.5rem .9rem;font:inherit;font-size:.92rem;font-weight:600;border-radius:10px;border:1px solid var(--ck-input-line);background:var(--ck-surface);color:inherit;cursor:pointer}
.ck-btn:hover:not(:disabled){border-color:var(--ck-accent);color:var(--ck-accent)}
.ck-btn:disabled{opacity:.5;cursor:default}
.ck-btn-main{background:var(--ck-accent);border-color:var(--ck-accent);color:#fff}
.ck-btn-main:hover:not(:disabled){background:var(--ck-accent-d);border-color:var(--ck-accent-d);color:#fff}
.ck-btn-ghost{flex:0 0 auto}
.ck-note{margin:.9rem 0 0;font-size:.85rem;color:var(--ck-mute)}
.ck-table{margin-top:1rem;overflow-x:auto}
.ck-table summary{cursor:pointer;font-weight:600;padding:.4rem 0}
.ck-table table{width:100%;border-collapse:collapse;font-size:.85rem;font-variant-numeric:tabular-nums}
.ck-table th,.ck-table td{padding:.4rem .5rem;border-bottom:1px solid var(--ck-line);text-align:right;white-space:nowrap}
.ck-table th:first-child,.ck-table td:first-child{text-align:center}
.ck-src{margin-top:1rem;padding-top:.8rem;border-top:1px dashed var(--ck-line);font-size:.82rem;color:var(--ck-mute);line-height:1.6}
.ck-src strong{color:var(--ck-text)}
.ck-src ul{margin:.3rem 0 .5rem 1.1rem;padding:0}
.ck-src .ck-est{color:var(--ck-est)}
/* 브레드크럼 */
.ck-crumb{margin:0 0 1rem;font-size:.85rem}
.ck-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.ck-crumb li{display:inline-flex;align-items:center;color:var(--ck-mute)}
.ck-crumb li+li::before{content:"›";margin:0 .45rem;color:var(--ck-mute)}
.ck-crumb a{color:var(--ck-mute);text-decoration:none}
.ck-crumb a:hover{color:var(--ck-accent);text-decoration:underline}
/* 관련 계산기 · 업데이트 */
.ck-related{margin:2.2rem 0 0}
.ck-related h2{font-size:1.1rem;margin:0 0 .7rem;border:0;padding:0}
.ck-rel-grid{display:grid;gap:.6rem}
.ck-rel-card{display:flex;gap:.8rem;align-items:center;padding:.75rem .9rem;border:1px solid var(--ck-line);border-radius:12px;text-decoration:none;color:var(--ck-text);background:var(--ck-surface)}
.ck-rel-card:hover,.ck-rel-card:focus{border-color:var(--ck-accent);color:var(--ck-text)}
.ck-rel-ico{flex:none;width:40px;height:40px;border-radius:10px;background:var(--ck-icobg);color:var(--ck-accent);display:grid;place-items:center}
.ck-rel-card b{display:block;font-size:.95rem;line-height:1.4}
.ck-rel-card small{display:block;color:var(--ck-mute);font-size:.82rem;line-height:1.45}
.ck-updated{margin:1.4rem 0 0;font-size:.82rem;color:var(--ck-mute)}
@media (min-width:600px){.ck-row{grid-template-columns:13rem 1fr;align-items:center}.ck-hint{grid-column:2}.ck-main-v{font-size:2rem}.ck-rel-grid{grid-template-columns:repeat(3,1fr)}.ck-rel-card{flex-direction:column;align-items:flex-start}}