/* 글 본문 스킨 4종 — src/lib/bodySkin.ts 가 본문을 .bs.bs-<id> 로 감싼다.
   🔴 .bs 안쪽만 고친다. 사이트 머리·메뉴·목록은 이 파일이 건드리지 않는다 (대표: 「스킨은 글 본문만」).
   색은 사이트 설정의 기본색(--primary 등)을 따른다 — 스킨을 바꿔도 사이트 색은 그대로다. */

/* ── 공통 ── */
.bs { word-break:keep-all; overflow-wrap:anywhere; }
.bs img { border-radius:10px; }
.bs table { width:100%; border-collapse:collapse; margin:1.4em 0; font-size:15px; line-height:1.6; }
.bs :is(th,td) { text-align:left; vertical-align:top; padding:11px 12px; }
.bs hr { border:0; border-top:1px solid #e5e7eb; margin:2.2em 0; }
.bs .bs-tbl { overflow-x:auto; margin:1.4em 0; -webkit-overflow-scrolling:touch; }
.bs .bs-tbl > table { margin:0; }

/* ── 기본형 — 깔끔한 블로그 ── */
.bs-standard h2 { border:0; padding:2px 0 2px 14px; border-left:4px solid var(--primary); line-height:1.4; }
.bs-standard h3 { color:var(--heading); }
.bs-standard strong { color:var(--strong); }
.bs-standard a { color:var(--link); text-decoration:underline; text-underline-offset:3px; }
.bs-standard blockquote { background:#f9fafb; border-left:3px solid var(--primary); color:#374151;
    padding:14px 18px; border-radius:0 8px 8px 0; }
.bs-standard blockquote > :last-child { margin-bottom:0; }
.bs-standard th { background:var(--primary-light); color:var(--heading); font-weight:700; }
.bs-standard td { border-bottom:1px solid #eef0f3; }
.bs-standard tbody tr:nth-child(even) td { background:#fafafa; }

/* ── 임팩트 — 진한 띠와 형광펜 ── */
.bs-impact { font-size:17.5px; }
.bs-impact h2 { position:relative; border:0; margin:2.3em 0 .8em; padding:14px 18px 14px 22px;
    background:var(--primary-light); color:var(--heading); border-radius:10px; font-weight:800; line-height:1.4; }
.bs-impact h2::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:6px;
    border-radius:0 6px 6px 0; background:var(--primary); }
.bs-impact h3 { color:var(--primary); font-weight:800; }
.bs-impact strong { color:var(--heading); font-weight:800;
    background:linear-gradient(180deg, transparent 58%, #fde68a 58%); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.bs-impact a { color:var(--link); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.bs-impact ul { list-style:none; padding-left:0; }
.bs-impact ul > li { position:relative; padding-left:28px; }
.bs-impact ul > li::before { content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; margin-top:.25em;
    display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; background:var(--primary); border-radius:50%; }
.bs-impact blockquote { border:0; margin:1.6em 0; padding:18px 20px; border-radius:12px;
    background:var(--primary); color:#fff; font-weight:600; }
.bs-impact blockquote :is(a,strong) { color:#fff; background:none; }
.bs-impact blockquote > :last-child { margin-bottom:0; }
.bs-impact .bs-tbl { border-radius:10px; box-shadow:inset 0 0 0 1px #e5e7eb; }
.bs-impact th { background:var(--primary); color:#fff; font-weight:700; }
.bs-impact td { border-bottom:1px solid #eef0f3; }
.bs-impact td:first-child { font-weight:700; color:var(--heading); }

/* ── 종이 매거진 — 번호 붙은 장, 넉넉한 여백 ── */
.bs-paper { counter-reset:ch; font-size:18px; line-height:1.9; color:#302f29; }
.bs-paper .bs-intro { padding:4px 0 22px; margin:0 0 8px; border-bottom:1px solid #e7e2d8; }
.bs-paper .bs-intro p { font-size:19.5px; line-height:1.85; color:#2a2925; }
.bs-paper .bs-intro > p:first-child::first-letter { float:left; font-size:3.2em; line-height:.9;
    margin:.06em .12em 0 0; font-weight:800; color:var(--primary); }
.bs-paper .bs-sec { counter-increment:ch; padding:30px 0 8px; border-bottom:1px solid #e7e2d8; }
.bs-paper .bs-sec:last-child { border-bottom:0; }
.bs-paper h2 { border:0; padding:0; margin:0 0 .7em; font-size:26px; font-weight:750; letter-spacing:-.03em; line-height:1.4; color:#2a2925; }
.bs-paper .bs-sec > h2::before { content:counter(ch, decimal-leading-zero); display:block; margin-bottom:6px;
    font-size:14px; font-weight:800; letter-spacing:.08em; color:var(--primary); }
.bs-paper strong { color:#2a2925; }
.bs-paper a { color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.bs-paper blockquote { border:0; margin:1.8em 0; padding:0 0 0 22px; border-left:2px solid var(--primary);
    font-size:20px; line-height:1.7; font-style:italic; color:#4a4740; }
.bs-paper blockquote > :last-child { margin-bottom:0; }
.bs-paper th { color:var(--primary); font-weight:750; border-bottom:2px solid #2a2925; }
.bs-paper td { border-bottom:1px solid #e7e2d8; }
.bs-paper td:first-child { font-weight:700; }
@media (max-width:640px) {
    .bs-paper { font-size:17px; }
    .bs-paper .bs-intro p { font-size:18px; }
    .bs-paper h2 { font-size:22px; }
    .bs-paper blockquote { font-size:18px; }
}

/* ── 모던 카드 — 소제목마다 카드 ── */
.bs-cards { counter-reset:ch; }
.bs-cards .bs-intro { background:var(--primary); color:#fff; border-radius:18px; padding:24px 26px; margin:0 0 18px; }
.bs-cards .bs-intro :is(p,li,strong,a) { color:#fff; }
.bs-cards .bs-intro p { font-size:18px; line-height:1.8; }
.bs-cards .bs-intro > :last-child { margin-bottom:0; }
.bs-cards .bs-sec { counter-increment:ch; position:relative; background:#fff; border:1px solid #e3e7ec;
    border-radius:18px; padding:26px 26px 10px; margin:0 0 16px; box-shadow:0 4px 16px #20304a0a; }
.bs-cards h2 { border:0; margin:0 0 .7em; padding:0 0 0 52px; min-height:38px; display:flex; align-items:center;
    font-size:23px; font-weight:750; line-height:1.4; color:var(--heading); }
.bs-cards .bs-sec > h2::before { content:counter(ch, decimal-leading-zero); position:absolute; left:26px; top:26px;
    width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
    background:var(--primary-light); color:var(--primary); font-size:15px; font-weight:800; }
.bs-cards strong { color:var(--strong); }
.bs-cards a { color:var(--link); text-decoration:underline; text-underline-offset:3px; }
.bs-cards blockquote { border:0; margin:1.3em 0; padding:16px 18px; background:var(--primary-light);
    border-radius:12px; color:var(--heading); }
.bs-cards blockquote > :last-child { margin-bottom:0; }
.bs-cards .bs-tbl { border-radius:12px; box-shadow:inset 0 0 0 1px #e3e7ec; }
.bs-cards th { background:var(--primary-light); color:var(--primary); font-weight:750; }
.bs-cards td { border-top:1px solid #eef0f3; }
.bs-cards td:first-child { color:var(--primary); font-weight:700; }
@media (max-width:640px) {
    .bs-cards .bs-intro { padding:20px 18px; border-radius:14px; }
    .bs-cards .bs-intro p { font-size:17px; }
    .bs-cards .bs-sec { padding:20px 16px 6px; border-radius:14px; }
    .bs-cards h2 { font-size:20px; padding-left:44px; min-height:34px; }
    .bs-cards .bs-sec > h2::before { left:16px; top:20px; width:34px; height:34px; font-size:13px; border-radius:10px; }
}

/* 본문 첫 줄 위 여백 — blog.css 의 「첫 자식 여백 0」이 감싼 상자 안까지는 닿지 않는다 */
.bs > :first-child, .bs > .bs-intro > :first-child, .bs > .bs-sec:first-child > :first-child { margin-top:0; }