/* 쇼츠 보충 자료(/bonus/{slug}/, 글 종류 shorts_bonus) — 노션처럼 읽는 한 장짜리 문서.
 * 사이트 머리·꼬리 없이 single-shorts_bonus.php 가 이 파일과 tokens.css 만 싣는다(등록·칸·노출 막기는 inc/shorts-bonus.php).
 * 편집기(비주얼 탭) 미리 보기에도 이 파일이 실린다 — 그 안에선 body 가 .bn 이다.
 * 정본 시안: 캔버스 「쇼츠 보충 자료 시안」 › 「C 오빠두 스타일」(2026-10-06 운영자 확정).
 * 수식 상자 색(--bn-code-*)은 2024 가이드북 문법(= · { } 노랑, 인수 하늘색)이라 이 파일 이름으로 둔다.
 *
 * 본문(post_content) 부품 — 머리(경로·아이콘·제목·부제·단추)와 꼬리는 템플릿이 만든다. 본문엔 아래만 쓴다.
 * ⛔ 본문에 <svg>·<button>·<details> 를 쓰지 않는다 — 비주얼 편집기(TinyMCE 4)가 지우거나 망가뜨린다.
 *    아이콘은 이 파일이 그리고(::before 마스크), [복사] 단추·접기 동작은 js/bonus.js 가 붙인다.
 *   aside.bn-callout > div.bn-callout-body > p.bn-callout-title + ul                  사용 조건(정보 안내)
 *   nav.bn-toc > p.bn-toc-head + div.bn-toc-list > a[href=#sN] > span.bn-toc-num      목차(새 함수 절은 span.bn-toc-num.bn-ic-new)
 *   section.bn-sec#sN > h2.bn-h2 > span.bn-num + span(제목) + span.bn-h2-sub?         단계(마지막 참고 절은 .bn-sec--end, 번호 대신 span.bn-num.bn-ic-new)
 *     + span.bn-time(「0:19」 — 영상에서 그 단계가 나오는 시각, 2026-10-07). 쇼츠 화면 [보충 자료] 탭이 [▶ 0:19] 단추로 바꾼다(js/shorts-feed.js).
 *       이 한 장짜리 문서·인쇄에선 감추고, 편집기에선 회색 꼬리표로 보여 글자처럼 고친다.
 *   p > kbd · code · span.highlight-yellow(핵심 구절 하나 — 편집기 「형광펜」 단추와 같다)  본문 글
 *   div.bn-code > p.bn-code-head(라벨) + div.bn-code-body > code                     수식 상자 — span.t-eq(= { }) · t-fn(함수) · t-arg(인수)
 *   figure.bn-fig > img(.bn-narrow 는 최대 320px) + figcaption > span.bn-chip + span   엑셀 화면
 *     AI 초안은 그림 대신 img[src="[IMG: 설명]"] 자리만 둔다 — 손님 화면에선 그 figure 를 빼고, 편집기·편집자에겐 점선 상자(.bn-ph)
 *   div.bn-toggle > p.bn-toggle-title + div.bn-toggle-body > img + p                   「예전엔 어땠나요?」 접기 · 넓은 그림은 div.bn-scroll > img.bn-w520
 *   div.bn-table-wrap > table.bn-table · td.bn-fn(함수 이름 칸)                         표 */

@font-face {
	font-family: 'Pretendard';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/PretendardVariable.woff2') format('woff2-variations'), url('../fonts/PretendardVariable.woff2') format('woff2');
}

html, body.bn-body { margin: 0; padding: 0; background: var(--surface-white, #ffffff); }
.bn, .bn *, .bn *::before, .bn *::after { box-sizing: border-box; }

.bn {
	--bn-code-bg: #202020;
	--bn-code-line: #333333;
	--bn-code-btn-line: #3a3a3a;
	--bn-code-text: #d5d5d5;
	--bn-code-eq: #ffcd00;
	--bn-code-arg: #7cc8ff;
	--bn-mono: Consolas, 'SF Mono', Menlo, 'Pretendard', monospace;
	/* Lucide 아이콘 — 마스크로 쓰고 색은 background-color 로 칠한다 */
	--bn-ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
	--bn-ic-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M8 6h13'/%3E%3C/svg%3E");
	--bn-ic-new: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3C/svg%3E");
	--bn-ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
	color: var(--text-primary, #343434);
	-webkit-font-smoothing: antialiased;
	word-break: keep-all;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
}
.bn-wrap { max-width: 720px; margin: 0 auto; padding: 56px 20px 72px; }
/* 편집기(비주얼 탭) — 본문 폭을 실제 페이지와 같게 */
.mce-content-body.bn { max-width: 720px; margin: 0 auto; padding: 16px 20px 48px; }

/* ── 머리 ───────────────────────────────────── */
/* 맨 윗줄: 왼쪽 경로 · 오른쪽 [PDF로 저장] */
.bn-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 18px; }
.bn-top .bn-crumb { margin: 0; min-width: 0; }
.bn-crumb { margin: 0 0 18px; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--primary, #037450); }
.bn-crumb img { display: block; flex: none; width: 16px; height: 16px; }
.bn-crumb a { color: inherit; text-decoration: none; }
.bn-crumb-sep { color: var(--gray-400, #a2a2a2); font-weight: 400; }
.bn-icon { width: 56px; height: 56px; margin-bottom: 18px; border-radius: 12px; background: var(--primary, #037450); color: var(--surface-white, #ffffff); display: flex; align-items: center; justify-content: center; }
.bn-icon svg { width: 30px; height: 30px; }
.bn-title { margin: 0 0 10px; font-size: 32px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; color: var(--gray-900, #181818); text-wrap: balance; }
.bn-sub { margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--text-muted, #727272); }

.bn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.bn-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--gray-300, #d5d5d5); border-radius: var(--radius-md, 5px); background: var(--surface-white, #ffffff); color: var(--gray-800, #282828); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
.bn-btn:hover { background: var(--gray-50, #f7f7f7); color: var(--gray-800, #282828); }
.bn-btn svg { flex: none; width: 17px; height: 17px; }
.bn-btn--sm { min-height: 34px; padding: 0 12px; gap: 5px; font-size: 13.5px; }
.bn-btn--sm svg { width: 15px; height: 15px; }
/* 실제 로고(색을 스스로 가진 SVG) — [쇼츠 다시 보기] 유튜브 · [PDF로 저장] PDF 파일 아이콘 (2026-10-07 운영자) */
.bn-btn .bn-logo-yt { width: 22px; height: 16px; }
.bn-btn .bn-logo-pdf { width: 22px; height: 22px; margin: -2px -1px -2px -3px; }
.bn-btn--primary { padding: 0 18px; border-color: var(--brand-action, #059669); background: var(--brand-action, #059669); color: var(--surface-white, #ffffff); }
.bn-btn--primary:hover { border-color: var(--brand-hover, #037450); background: var(--brand-hover, #037450); color: var(--surface-white, #ffffff); }
.bn-btn:focus-visible, .bn-toc-list a:focus-visible, .bn-copy:focus-visible, .bn-toggle-btn:focus-visible { outline: 2px solid var(--primary, #037450); outline-offset: 2px; }

/* ── 안내 상자(정보) ─────────────────────────── */
.bn-callout { display: flex; gap: 12px; margin: 0 0 28px; padding: 16px 18px; border-radius: 8px; background: var(--color-info-bg, #eaf1f8); }
.bn-callout::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 2px; background-color: var(--color-info, #3e6fd6); -webkit-mask: var(--bn-ic-info) center / contain no-repeat; mask: var(--bn-ic-info) center / contain no-repeat; }
.bn-callout-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bn-callout-title { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 700; color: var(--color-info-text, #2564d7); }
.bn-callout ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.75; color: var(--text-primary, #343434); }
.bn-callout b, .bn-callout strong { color: var(--gray-900, #181818); }

/* ── 목차 ───────────────────────────────────── */
.bn-toc { display: block; margin: 0 0 8px; border: 1px solid var(--gray-200, #e7e7e7); border-radius: 8px; overflow: hidden; }
.bn-toc-head { margin: 0; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--gray-50, #f7f7f7); border-bottom: 1px solid var(--gray-200, #e7e7e7); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--gray-800, #282828); }
.bn-toc-head::before { content: ''; flex: none; width: 16px; height: 16px; background-color: var(--text-muted, #727272); -webkit-mask: var(--bn-ic-list) center / contain no-repeat; mask: var(--bn-ic-list) center / contain no-repeat; }
.bn-toc-list { display: flex; flex-direction: column; padding: 6px 0; }
.bn-toc-list a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px; font-size: 15px; line-height: 1.5; color: var(--text-primary, #343434); text-decoration: none; }
.bn-toc-list a:hover { background: var(--gray-50, #f7f7f7); }
.bn-toc-num { flex: none; width: 24px; height: 24px; border-radius: var(--radius-md, 5px); background: var(--primary-50, #e4efea); color: var(--primary-700, #036546); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* 번호 대신 아이콘(새 함수 절) — 글자 「새」는 감추고(읽기 도구·복사엔 남는다) 반짝이 아이콘을 그린다 */
.bn-toc-num.bn-ic-new, .bn-num.bn-ic-new { font-size: 0; }
.bn-ic-new::before { content: ''; width: 13px; height: 13px; background-color: currentColor; -webkit-mask: var(--bn-ic-new) center / contain no-repeat; mask: var(--bn-ic-new) center / contain no-repeat; }
.bn-num.bn-ic-new::before { width: 16px; height: 16px; }

/* ── 단계 ───────────────────────────────────── */
.bn-sec { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; scroll-margin-top: 16px; }
.bn-sec--end { padding-top: 48px; }
.bn-h2 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 12px; border-bottom: 2px solid var(--primary-50, #e4efea); font-size: 22px; line-height: 1.4; font-weight: 800; letter-spacing: -0.01em; color: var(--gray-900, #181818); }
.bn-num { flex: none; width: 30px; height: 30px; border-radius: var(--radius-md, 5px); background: var(--primary, #037450); color: var(--surface-white, #ffffff); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bn-h2-sub { font-size: 15px; font-weight: 600; color: var(--text-muted, #727272); }
/* 단계 시각 — 이 문서·인쇄엔 안 보인다(영상이 없다). 편집기에선 고칠 수 있게 회색 꼬리표 */
.bn-time { display: none; }
.mce-content-body.bn .bn-time { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: var(--radius-md, 5px); background: var(--gray-100, #f4f4f4); color: var(--gray-600, #545454); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.bn-sec > p { margin: 0; font-size: 16px; line-height: 1.85; }
/* 형광펜 — 편집기 「형광펜」 단추(span.highlight-yellow)와 같은 모양: 굵게 + 아래 초록 밑칠 */
.bn .highlight-yellow, .bn .bn-mark { font-weight: 700; color: var(--gray-900, #181818); background: none; box-shadow: inset 0 -0.42em 0 var(--brand-marker, rgba(5, 150, 105, 0.2)); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bn kbd { display: inline-block; padding: 0 7px; border: 1px solid var(--gray-300, #d5d5d5); border-bottom-width: 2px; border-radius: var(--radius-md, 5px); background: var(--surface-white, #ffffff); font-family: inherit; font-size: 13px; line-height: 20px; font-weight: 700; color: var(--gray-800, #282828); vertical-align: 1px; }
.bn-sec > p code { padding: 1px 6px; border-radius: 4px; background: var(--gray-100, #f4f4f4); font-family: var(--bn-mono); font-size: 14px; color: var(--gray-800, #282828); }

/* 수식 상자 — [복사] 단추는 js/bonus.js 가 .bn-code-head 끝에 붙인다 */
.bn-code { border-radius: 8px; background: var(--bn-code-bg); overflow: hidden; }
.bn-code-head { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 43px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--bn-code-line); font-size: 13px; line-height: 20px; color: var(--gray-400, #a2a2a2); }
.bn-copy { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border: 1px solid var(--bn-code-btn-line); border-radius: var(--radius-md, 5px); background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--bn-code-text); cursor: pointer; }
.bn-copy:hover { border-color: var(--gray-600, #545454); color: var(--surface-white, #ffffff); }
.bn-copy svg { width: 13px; height: 13px; }
.bn-copy.is-done { border-color: var(--color-success, #059669); color: var(--surface-white, #ffffff); }
.bn-code-body { padding: 16px 16px 18px; overflow-x: auto; }
.bn-code-body code { display: block; font-family: var(--bn-mono); font-size: 15px; line-height: 1.6; color: var(--bn-code-text); white-space: pre; }
.bn-code .t-eq { color: var(--bn-code-eq); }
.bn-code .t-fn { color: var(--surface-white, #ffffff); font-weight: 700; }
.bn-code .t-arg { color: var(--bn-code-arg); }

/* 화면 */
.bn-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bn-fig img, .bn-toggle-body img { display: block; width: 100%; height: auto; border: 1px solid var(--gray-200, #e7e7e7); border-radius: 8px; }
.bn .bn-fig img.bn-narrow, .bn .bn-toggle-body img.bn-narrow { max-width: 320px; }
.bn-fig figcaption { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 21px; color: var(--text-muted, #727272); }
.bn-chip { flex: none; display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: var(--radius-md, 5px); background: var(--gray-100, #f4f4f4); color: var(--gray-700, #404040); font-size: 12px; font-weight: 600; }
.bn-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--gray-200, #e7e7e7); border-radius: 8px; }
.bn .bn-scroll img { width: auto; max-width: none; border: 0; border-radius: 0; }
.bn .bn-scroll img.bn-w520 { width: 520px; }
/* 그림 자리 — AI 초안이 비워 둔 [IMG: …]. 페이지에선 편집할 수 있는 사람에게만 보이고(손님에겐 템플릿이 뺀다),
   편집기 안에선 깨진 그림 대신 점선 상자로 보인다 */
.bn-ph { display: block; padding: 18px 16px; border: 1px dashed var(--amber-300, #ddb257); border-radius: 8px; background: var(--amber-50, #faf2e1); color: var(--amber-700, #95650a); font-size: 14px; line-height: 1.6; text-align: center; }
.mce-content-body.bn img[src^="[IMG"] { min-height: 96px; border: 1px dashed var(--amber-300, #ddb257); background: var(--amber-50, #faf2e1); }

/* 접기 「예전엔 어땠나요?」 — 스크립트가 켜진 화면(.bn-js)에서만 닫힌다. 편집기·인쇄·스크립트 없는 화면에선 펼친 채 */
.bn-toggle-title { margin: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 8px; background: var(--gray-50, #f7f7f7); font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--gray-700, #404040); }
.bn-toggle-title::before, .bn-toggle-btn::before { content: ''; flex: none; width: 16px; height: 16px; background-color: var(--brand-action, #059669); -webkit-mask: var(--bn-ic-chev) center / contain no-repeat; mask: var(--bn-ic-chev) center / contain no-repeat; transform: rotate(90deg); }
.bn-js .bn-toggle-title { padding: 0; }
.bn-js .bn-toggle-title::before { display: none; }
.bn-toggle-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.bn-toggle-btn:hover { background: var(--gray-100, #f4f4f4); }
.bn-toggle-btn[aria-expanded="false"]::before { transform: none; }
.bn-toggle-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 4px 14px; }
.bn-toggle-body p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-secondary, #545454); }
@media screen {
	.bn-js .bn-toggle:not(.is-open) > .bn-toggle-body { display: none; }
}

/* 표 */
.bn-table-wrap { overflow-x: auto; border: 1px solid var(--gray-200, #e7e7e7); border-radius: 8px; }
.bn-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.bn-table th { padding: 10px 16px; background: var(--gray-50, #f7f7f7); border-bottom: 1px solid var(--gray-200, #e7e7e7); text-align: left; font-size: 13.5px; font-weight: 700; color: var(--text-secondary, #545454); }
.bn-table td { padding: 11px 16px; border-bottom: 1px solid var(--gray-100, #f4f4f4); vertical-align: middle; }
.bn-table tr:last-child td { border-bottom: 0; }
.bn-table .bn-fn { width: 46%; font-family: var(--bn-mono); font-size: 14px; font-weight: 700; color: var(--primary, #037450); }

/* ── 꼬리 ───────────────────────────────────── */
.bn-foot { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--gray-200, #e7e7e7); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.bn-foot img { display: block; height: 26px; width: auto; }
.bn-foot p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-muted, #727272); }

@media (max-width: 480px) {
	.bn-wrap { padding-top: 40px; }
	.bn-title { font-size: 28px; }
	.bn-table th, .bn-table td { padding-left: 12px; padding-right: 12px; }
}

/* ── 인쇄 · PDF(미리 만든 PDF 도 이 규칙으로 찍는다) ──────────── */
@page { size: A4; margin: 14mm 13mm 16mm; }
@media print {
	html, body.bn-body { background: #ffffff; }
	.bn { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.bn-wrap { max-width: none; padding: 0; }
	.bn-actions, .bn-copy, .bn-pdf, .bn-ph { display: none; }
	.bn-icon { width: 44px; height: 44px; border-radius: 10px; }
	.bn-icon svg { width: 24px; height: 24px; }
	.bn-title { font-size: 26px; }
	.bn-sec { padding-top: 26px; gap: 12px; }
	.bn-callout, .bn-toc, .bn-fig, .bn-code, .bn-toggle-body, .bn-table-wrap, .bn-h2 { break-inside: avoid; }
	.bn-h2, .bn-toggle-title { break-after: avoid; }
	.bn-toc-list a { min-height: 30px; }
	.bn-toggle-title { min-height: 34px; background: none; padding: 0; font-size: 13px; color: var(--text-muted, #727272); }
	.bn-toggle-title::before, .bn-toggle-btn::before { display: none; }
	.bn-toggle-btn { min-height: 0; padding: 0; }
	.bn-toggle-body { padding: 4px 0 0; }
	/* 수식 상자 — 종이에 검은 면 대신 밝게 */
	.bn-code { background: var(--gray-50, #f7f7f7); border: 1px solid var(--gray-200, #e7e7e7); }
	.bn-code-head { min-height: 0; padding: 6px 14px; border-bottom-color: var(--gray-200, #e7e7e7); color: var(--text-muted, #727272); }
	.bn-code-body { padding: 10px 14px 12px; overflow: visible; }
	.bn-code-body code { color: var(--gray-800, #282828); white-space: pre-wrap; }
	.bn-code .t-eq { color: var(--amber-700, #95650a); }
	.bn-code .t-fn { color: var(--gray-900, #181818); }
	.bn-code .t-arg { color: var(--color-info-text, #2564d7); }
	.bn-scroll { overflow: visible; }
	.bn-foot { margin-top: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
	.bn-toggle-btn::before { transition: transform 0.15s ease; }
}