/* 케이비즈 뉴스레터 — 카드뉴스 디자인 (news.html · admin-news.html 공용)
   카드는 인쇄물처럼 항상 밝은 바탕(다크 모드에서도 동일) — 이미지 저장·메일과 같은 모양 */
.kn{--c:#0047AB;--c2:#003A8C;--g:#A8823A;--gon:#E3C27A;--sub:#C5D3EA;--k:#0F1C2E;--k2:#4A5668;--ln:#DDE2E9;--pp:#F5F6F8;--soft:#EEF3FB;--red:#B3261E;--grn:#1E7A4C;--gsoft:#F6EFDF;
  width:100%;max-width:560px;margin:0 auto;background:#fff;color:var(--k);border:1px solid var(--ln);font-family:"IBM Plex Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;line-height:1.6;word-break:keep-all;box-shadow:0 18px 40px -24px rgba(0,40,100,.35);overflow:hidden}
.kn *{box-sizing:border-box}
.kn-top{background:var(--c);color:#fff;padding:22px 24px 22px;position:relative;overflow:hidden}
.kn-top::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;border:28px solid rgba(255,255,255,.07)}
.kn-brand{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--sub);position:relative;z-index:1}
.kn-brand img{height:20px;width:auto;display:block}
.kn-chips{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 10px;position:relative;z-index:1}
.kn-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}
.kn-chip.lb{background:var(--gon);color:var(--k)}
.kn-chip.lb.l2{background:#BFD3F2}.kn-chip.lb.l3{background:#E3E7EE}
.kn-row{display:flex;gap:16px;align-items:flex-start;position:relative;z-index:1}
.kn-title{flex:1;min-width:0}
.kn-title h2{font-family:"Noto Serif KR",serif;font-size:clamp(21px,3.4vw,25px);font-weight:700;line-height:1.38;margin:0 0 8px;color:#fff;letter-spacing:-.01em}
.kn-title p{margin:0;font-size:14.5px;color:var(--sub);line-height:1.6}
.kn-ring{flex:none;width:76px;text-align:center}
.kn-ring svg{display:block;width:76px;height:76px}
.kn-ring small{display:block;font-size:11px;color:var(--sub);margin-top:2px}
.kn-why{background:var(--gsoft);color:#6B4F17;font-size:13.5px;padding:9px 24px}
.kn-why.cm{background:var(--pp);color:var(--k2)}
.kn-sec{padding:16px 24px 0}
.kn-sec:last-of-type{padding-bottom:4px}
.kn-h{font-size:12px;font-weight:700;color:var(--g);letter-spacing:.06em;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.kn-h::after{content:"";flex:1;height:1px;background:var(--ln)}
.kn-amt{display:flex;align-items:stretch;gap:14px;background:var(--soft);border-left:4px solid var(--c);padding:12px 16px}
.kn-amt b{display:block;font-size:30px;font-weight:800;color:var(--c);line-height:1.15;letter-spacing:-.02em}
.kn-amt span{font-size:12.5px;color:var(--k2)}
.kn-pts{list-style:none;margin:0;padding:0;counter-reset:p}
.kn-pts li{counter-increment:p;display:flex;gap:10px;font-size:15px;margin:0 0 8px;line-height:1.55}
.kn-pts li::before{content:counter(p);flex:none;width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.kn-req{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kn-req li{display:flex;gap:8px;font-size:14.5px;line-height:1.5;padding:7px 10px;border:1px solid var(--ln);background:#fff}
.kn-req li::before{content:"✓";color:var(--grn);font-weight:800;flex:none}
.kn-tl{position:relative;padding:4px 0 0}
.kn-bar{height:8px;background:var(--ln);border-radius:4px;position:relative;margin:8px 0 6px}
.kn-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--c);border-radius:4px}
.kn-bar i.hot{background:var(--red)}
.kn-bar em{position:absolute;top:-22px;transform:translateX(-50%);font-style:normal;font-size:11px;font-weight:700;color:var(--c);white-space:nowrap}
.kn-tlx{display:flex;justify-content:space-between;font-size:12px;color:var(--k2)}
.kn-steps{display:flex;gap:0;flex-wrap:wrap}
.kn-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:13px;line-height:1.45}
.kn-step .dt{width:12px;height:12px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 2px var(--c)}
.kn-step.f .dt{background:#fff}
.kn-step b{font-size:12.5px}
.kn-steps.line{position:relative}
.kn-steps.line::before{content:"";position:absolute;left:6px;right:6px;top:5px;height:2px;background:var(--ln)}
.kn-how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kn-how div{background:var(--pp);border-top:3px solid var(--c);padding:9px 10px;font-size:13px;line-height:1.45;position:relative}
.kn-how div b{display:block;color:var(--c);font-size:12px;margin-bottom:2px}
.kn-how div:not(:last-child)::after{content:"›";position:absolute;right:-8px;top:50%;transform:translateY(-50%);color:var(--c);font-weight:800;font-size:18px;z-index:1}
.kn-foot{margin-top:18px;padding:14px 24px 18px;border-top:1px solid var(--ln);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;font-size:12px;color:var(--k2)}
.kn-foot .src{flex:1 1 220px}
.kn-foot .mk{font-weight:800;color:var(--c);letter-spacing:.04em}
.kn-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px auto 0;max-width:560px}
.kn-acts a,.kn-acts button{font:inherit;font-size:14.5px;font-weight:700;padding:11px 18px;border:1px solid var(--ln);background:var(--surface,#fff);color:var(--ink,#0F1C2E);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.kn-acts .pri{background:#0047AB;border-color:#0047AB;color:#fff}
.kn-acts a:hover,.kn-acts button:hover{border-color:#A8823A}
.kn-acts .pri:hover{background:#A8823A;border-color:#A8823A}

/* 목록 타일 */
.kn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.kn-tile{display:flex;flex-direction:column;background:var(--surface,#fff);border:1px solid var(--line,#DDE2E9);text-decoration:none;color:var(--ink,#0F1C2E);min-height:100%;transition:border-color .2s,transform .2s}
.kn-tile:hover{border-color:var(--brass,#A8823A);transform:translateY(-2px)}
.kn-tile .t-top{background:#0047AB;color:#fff;padding:14px 16px 16px;min-height:118px}
.kn-tile .t-top .kn-chips{margin:0 0 8px}
.kn-tile h3{margin:0;font-size:16.5px;line-height:1.45;font-weight:700;color:#fff}
.kn-tile .t-body{padding:12px 16px 14px;font-size:13.5px;color:var(--ink-2,#4A5668);flex:1;display:flex;flex-direction:column;gap:8px}
.kn-tile .t-amt{font-size:20px;font-weight:800;color:#0047AB}
.kn-tile .t-meta{margin-top:auto;display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2,#4A5668)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .kn-tile .t-amt{color:#7FB2F5}}
:root[data-theme="dark"] .kn-tile .t-amt{color:#7FB2F5}
@media (max-width:480px){.kn-top,.kn-sec,.kn-foot{padding-left:18px;padding-right:18px}.kn-why{padding-left:18px;padding-right:18px}.kn-ring{width:64px}.kn-ring svg{width:64px;height:64px}.kn-how{grid-template-columns:1fr}.kn-how div:not(:last-child)::after{content:"⌄";right:auto;left:50%;top:auto;bottom:-14px;transform:translateX(-50%)}}