/*
Theme Name: BREAKING
Theme URI: https://breakinglog.com
Author: BREAKING
Author URI: https://breakinglog.com
Description: BREAKING — AI·테크·대형 이슈를 가장 빠르게, 그리고 맥락까지. Claude Design 캔버스(BREAKING Design System v1)를 그대로 옮긴 뉴스 테마. 속보 스트립, 라이브 시계, 다크 모드, 데이터 시각화 블록(:::chart / :::flow / :::timeline)을 포함합니다.
Version: 1.0.1
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: breaking
Tags: news, magazine, dark-mode, korean, blog, editorial
*/

/* ==========================================================================
   1. 토큰 — Design System §2 / §4 (라이트 값 기준, 다크는 같은 이름에 대입)
   ========================================================================== */
:root{
  color-scheme:light;
  --bg:#FAFAF9; --ink:#111110; --body:#1D1D1B; --deck:#5C5B58; --meta:#6B6B68;
  --rank:#C9C8C3; --rule:#E6E5E1; --rule-2:#D9D8D3; --rule-3:#EFEEEA;
  --ph1:#ECEBE7; --ph2:#E3E2DE; --red:#D42A1F; --red-2:#FF5A4E;
  --band:#111110; --band-ink:#F2F1EC; --band-rule:#3A3937; --band-meta:#8A8985; --band-deck:#A8A7A2;
  --surface:#FFFFFF; --canvas:#E9E8E4; --hl:#FFE97A;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:48px; --sp-9:64px;

  --container:1200px; --gutter:24px;
  --rule-section:2px solid var(--ink);
  --rule-major:1px solid var(--ink);
  --rule-item:1px solid var(--rule);
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#0E0E0D; --ink:#F2F1EC; --body:#DDDCD6; --deck:#A9A8A2; --meta:#8C8B86;
  --rank:#3A3937; --rule:#262523; --rule-2:#3A3937; --rule-3:#1C1C1A;
  --ph1:#1A1A18; --ph2:#222220; --red:#FF4A3D; --red-2:#FF5A4E;
  --band:#1A1A18; --band-ink:#F2F1EC; --band-rule:#333230; --band-meta:#8C8B86; --band-deck:#A9A8A2;
  --surface:#161615; --canvas:#070706; --hl:#6B5A12;
}
:root[data-theme=dark] body{-webkit-font-smoothing:antialiased}

/* ==========================================================================
   2. 리셋 · 베이스
   ========================================================================== */
*{box-sizing:border-box;min-width:0}
[hidden]{display:none!important}
html,body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty;
}
body{min-height:100vh}
a{color:var(--ink);text-decoration:none;transition:color .12s}
a:hover{color:var(--red)}
img{max-width:100%;height:auto;display:block}
button{font:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.bk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bk-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bg);padding:12px 18px;font-weight:700;font-size:14px}
.bk-skip:focus{left:0}

@keyframes bk-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bk-toastIn{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes bk-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* 공통 컨테이너 */
.bk-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.bk-ph{background:repeating-linear-gradient(135deg,var(--ph1) 0 8px,var(--ph2) 8px 16px);position:relative;display:block;overflow:hidden}
.bk-ph img{width:100%;height:100%;object-fit:cover}
.bk-ph-note{position:absolute;left:12px;bottom:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--meta);letter-spacing:.04em}
.bk-tabnum{font-variant-numeric:tabular-nums}

/* ==========================================================================
   3. 워드마크 — Design System §1
   ========================================================================== */
.bk-logo{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.bk-logo img{display:block;height:28px;width:auto}
.bk-logo .lg-l{display:none}
:root[data-theme=dark] .bk-logo .lg-d{display:none}
:root[data-theme=dark] .bk-logo .lg-l{display:block}
.bk-logo b{font-weight:900;letter-spacing:-0.06em;line-height:1;font-size:24px}
.bk-logo:hover{color:var(--ink)}
/* 이미지 로고가 없을 때의 대체 워드마크 (스퀘어 = 폰트 × 0.25, 간격 = × 0.11) */
.bk-mark{display:flex;align-items:baseline;font-weight:900;letter-spacing:-0.06em;line-height:1}
.bk-mark::after{content:"";display:inline-block;width:.25em;height:.25em;background:var(--red);margin-left:.11em}

/* ==========================================================================
   4. 속보 스트립
   ========================================================================== */
.bk-strip{background:var(--band);color:var(--band-ink);height:52px;display:flex;align-items:stretch;border-bottom:3px solid var(--red)}
.bk-strip-in{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:stretch;white-space:nowrap;overflow:hidden}
.bk-strip-tag{display:flex;align-items:center;gap:9px;font-weight:900;font-size:15px;letter-spacing:.14em;color:#fff;background:var(--red);padding:0 16px;margin-left:calc(var(--gutter) * -1);flex-shrink:0}
.bk-strip-tag i{width:8px;height:8px;background:#fff;border-radius:50%;font-style:normal}
.bk-strip-view{flex:1;display:flex;align-items:center;overflow:hidden;font-size:16px;font-weight:700;letter-spacing:-0.01em;min-width:0;position:relative}
.bk-strip-track{display:flex;width:max-content;animation:bk-ticker var(--bk-ticker-speed,40s) linear infinite}
.bk-strip-view:hover .bk-strip-track{animation-play-state:paused}
.bk-strip-run{display:flex;align-items:center;flex-shrink:0}
.bk-strip-item{display:flex;align-items:center;gap:12px;padding:0 28px;color:var(--band-ink);white-space:nowrap}
.bk-strip-item:hover{color:var(--red-2)}
.bk-strip-item time{font-size:12px;font-weight:800;color:var(--red-2);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.bk-strip-item::after{content:"";width:6px;height:6px;background:var(--red-2);margin-left:28px;flex-shrink:0}
.bk-strip-live{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:12px;color:var(--band-meta);font-variant-numeric:tabular-nums;padding-left:16px;border-left:1px solid var(--band-rule)}
.bk-dot-live{width:7px;height:7px;border-radius:50%;background:var(--red-2);animation:bk-pulse 1.6s infinite;flex-shrink:0}

/* ==========================================================================
   5. 헤더 · 내비
   ========================================================================== */
.bk-header{border-bottom:var(--rule-major);background:var(--bg)}
.bk-header--sticky{position:sticky;top:0;z-index:5}
.bk-header-in{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);height:72px;display:flex;align-items:center;gap:24px;min-width:0}
.bk-header--compact .bk-header-in{height:60px;gap:32px}
.bk-header--compact .bk-logo b{font-size:26px}
.bk-header--compact .bk-logo img{height:30px}
.bk-header .bk-logo{flex-shrink:0}
.bk-header .bk-logo b{font-size:30px}
.bk-header .bk-logo img{height:36px}

.bk-nav{display:flex;gap:4px;font-size:15px;font-weight:600;margin-left:8px;white-space:nowrap;flex-shrink:0}
.bk-nav a{padding:8px 12px;display:flex;align-items:center;gap:6px}
.bk-nav a:hover{color:var(--red)}
.bk-nav a.is-current,.bk-nav a[aria-current]{color:var(--red);box-shadow:inset 0 -2px 0 var(--red)}
.bk-nav a.bk-nav-live{color:var(--red)}
.bk-nav a.bk-nav-live::before{content:"";width:6px;height:6px;background:var(--red);border-radius:50%;flex-shrink:0}
.bk-nav ul{display:contents;list-style:none;margin:0;padding:0}
.bk-nav li{display:contents}

/* 모바일 메뉴 패널 */
.bk-menu{display:none}
.bk-menu[hidden]{display:none!important}
.bk-menu-in{max-width:var(--container);margin:0 auto;padding:20px var(--gutter) 28px;display:flex;flex-direction:column;gap:20px}
.bk-menu-search{display:flex;border-bottom:3px solid var(--ink);align-items:center}
.bk-menu-search input{flex:1;border:0;background:transparent;font:inherit;font-size:20px;font-weight:700;letter-spacing:-0.02em;padding:8px 0 10px;outline:none;color:var(--ink)}
.bk-menu-search button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;padding:8px 0 8px 12px}
.bk-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bk-menu-list a{display:block;padding:14px 0;border-bottom:var(--rule-item);font-size:20px;font-weight:800;letter-spacing:-0.02em}
.bk-menu-sub{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--meta)}
.bk-menu-sub a{color:var(--meta)}

.bk-header-tools{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0}
.bk-header--compact .bk-header-tools{gap:16px}
.bk-searchlink{display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;border:1px solid var(--rule-2);color:var(--meta);font-size:14px;width:220px;max-width:220px;flex:1 1 120px;min-width:44px;white-space:nowrap;overflow:hidden}
.bk-searchlink:hover{border-color:var(--ink);color:var(--ink)}
.bk-searchlink i{width:12px;height:12px;border:1.8px solid currentColor;border-radius:50%;flex-shrink:0}
.bk-iconbtn{width:36px;height:36px;border:1px solid var(--rule-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;color:var(--ink);cursor:pointer}
.bk-iconbtn:hover{border-color:var(--ink)}
.bk-theme{height:36px;padding:0 12px;border:1px solid var(--rule-2);background:transparent;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0}
.bk-theme:hover{border-color:var(--ink)}
.bk-clock{font-size:13px;color:var(--meta);font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;align-items:center;gap:6px}
.bk-dot-red{width:6px;height:6px;border-radius:50%;background:var(--red);animation:bk-pulse 1.6s infinite;flex-shrink:0}
.bk-header-title{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink);font-size:13px}
.bk-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;color:var(--ink);margin-left:-12px}
.bk-burger span{display:flex;flex-direction:column;gap:5px}
.bk-burger span i{display:block;width:18px;height:2px;background:currentColor}

/* 읽기 진행 바 */
.bk-progress{height:2px;background:var(--rule)}
.bk-progress > i{display:block;height:2px;background:var(--red);width:0;transition:width .1s linear}

/* ==========================================================================
   6. 홈 — 리드
   ========================================================================== */
.bk-lead{display:grid;grid-template-columns:7fr 5fr;gap:40px;padding:32px 0 36px;border-bottom:var(--rule-major)}
.bk-lead-media{display:block}
/* 비율은 안쪽 플레이스홀더/이미지에 걸어야 한다 — 링크에만 걸면 내용이 없을 때 무너진다 */
.bk-lead-media .bk-ph{width:100%;aspect-ratio:16/10}
.bk-lead-body{display:flex;flex-direction:column;justify-content:center;gap:16px}
.bk-kicker{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.1em}
.bk-badge{background:var(--red);color:#fff;padding:4px 7px}
.bk-kicker .bk-cat{color:var(--meta)}
.bk-lead h1{margin:0;font-size:42px;line-height:1.18;letter-spacing:-0.03em;font-weight:800}
.bk-deck{margin:0;font-size:17px;line-height:1.6;color:var(--deck)}
.bk-byline{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--meta);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.bk-byline .bk-author{font-weight:600;color:var(--ink)}
.bk-byline .bk-live{color:var(--red);font-weight:600}
.bk-save{height:30px;padding:0 12px;border:1px solid var(--rule-2);background:transparent;color:var(--ink);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.bk-byline .bk-save{margin-left:auto}
.bk-save[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}

/* 2차 헤드라인 3열 */
.bk-secondary{display:grid;grid-template-columns:repeat(var(--bk-cols,3),1fr);border-bottom:var(--rule-item)}
.bk-secondary a{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px 0;margin-right:24px;border-right:var(--rule-item)}
.bk-secondary a:last-child{border-right:0;margin-right:0;padding-right:0}
.bk-label{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--meta)}
.bk-h-secondary{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-0.02em}
.bk-time{font-size:13px;color:var(--meta);font-variant-numeric:tabular-nums}

/* ==========================================================================
   7. 섹션 헤더 · 공통 리스트
   ========================================================================== */
.bk-cols{display:grid;grid-template-columns:8fr 4fr;gap:48px;padding:36px 0 40px;border-bottom:var(--rule-item)}
.bk-shead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:var(--rule-section);padding-bottom:10px;margin-bottom:6px}
.bk-shead h2{margin:0;font-size:14px;font-weight:800;letter-spacing:.1em;display:flex;align-items:center;gap:8px}
.bk-shead h2 .sq{width:8px;height:8px;background:var(--red)}
.bk-shead .bk-more{font-size:12px;color:var(--meta)}
.bk-shead .bk-more:hover{color:var(--red)}
.bk-shead--big{margin-bottom:24px}
.bk-shead--big h2{font-size:22px;font-weight:800;letter-spacing:-0.03em}
.bk-shead--big .bk-more{font-size:13px;font-weight:600}

/* 탭 (밑줄형) */
.bk-tabs{display:flex;gap:2px}
.bk-tabs button{border:0;background:transparent;font-size:12px;font-weight:700;padding:4px 10px 8px;cursor:pointer;color:var(--meta)}
.bk-tabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
.bk-tabs--md button{font-size:13px;padding:0 8px 8px}

/* 칩 (테두리형) */
.bk-chips{display:flex;gap:6px;padding:10px 0 4px;flex-wrap:wrap}
.bk-chips button,.bk-chips a{border:1px solid var(--rule-2);background:transparent;color:var(--ink);font-size:12px;font-weight:600;padding:5px 10px;cursor:pointer}
.bk-chips button[aria-pressed="true"],.bk-chips button[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.bk-chips button:hover,.bk-chips a:hover{border-color:var(--ink)}

/* 랭킹 리스트 */
.bk-ranked a{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:var(--rule-item)}
.bk-ranked .n{font-size:28px;font-weight:800;letter-spacing:-0.04em;color:var(--rank);line-height:1;font-variant-numeric:tabular-nums}
.bk-ranked .t{font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-0.02em}
.bk-ranked .c{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--meta)}

/* 타임라인 리스트 (최신) */
.bk-timelist a{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:13px 0;border-bottom:var(--rule-item)}
.bk-timelist .tm{font-size:12px;color:var(--meta);font-variant-numeric:tabular-nums;padding-top:3px}
.bk-timelist .t{font-size:15px;font-weight:600;line-height:1.45}
.bk-btn-block{display:block;margin-top:16px;padding:14px 0;text-align:center;border:var(--rule-major);font-size:13px;font-weight:700}
.bk-btn-block:hover{background:var(--ink);color:var(--bg)}

/* 섹션 블록 (AI / 테크 / 사회) */
.bk-section{padding:36px 0 40px;border-bottom:var(--rule-item)}
.bk-secgrid{display:grid;grid-template-columns:7fr 5fr;gap:40px}
.bk-seclead{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.bk-seclead .bk-ph{aspect-ratio:4/3}
.bk-seclead-body{display:flex;flex-direction:column;gap:10px}
.bk-seclead-body .k{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--red)}
.bk-seclead-body .t{font-size:24px;font-weight:800;line-height:1.25;letter-spacing:-0.03em}
.bk-seclead-body .d{font-size:15px;line-height:1.6;color:var(--deck)}
.bk-seclist{display:flex;flex-direction:column}
.bk-seclist a{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-bottom:var(--rule-item)}
.bk-seclist .t{font-size:17px;font-weight:700;line-height:1.4;letter-spacing:-0.02em}
.bk-seclist .m{font-size:12px;color:var(--meta);font-variant-numeric:tabular-nums}

/* 분석 밴드 */
.bk-band{background:var(--band);color:var(--band-ink);margin-top:48px}
.bk-band a{color:var(--band-ink)}
.bk-band a:hover{color:var(--red-2)}
.bk-band-in{max-width:var(--container);margin:0 auto;padding:44px var(--gutter) 52px}
.bk-band-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--band-rule);padding-bottom:12px;margin-bottom:28px}
.bk-band-head h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-0.03em}
.bk-band-head span{font-size:13px;color:var(--band-meta)}
.bk-band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.bk-band-grid a{display:flex;flex-direction:column;gap:14px}
.bk-band-grid .k{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--band-meta)}
.bk-band-grid .t{font-size:26px;font-weight:800;line-height:1.25;letter-spacing:-0.03em}
.bk-band-grid .d{font-size:14px;line-height:1.6;color:var(--band-deck)}
.bk-band-grid .m{font-size:13px;color:var(--band-meta)}

/* 많이 읽는 글 */
.bk-popular{max-width:var(--container);margin:0 auto;padding:40px var(--gutter) 56px}
.bk-popular .bk-shead{margin-bottom:8px}
.bk-popular-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.bk-popular-grid a{display:flex;flex-direction:column;gap:8px;padding-top:18px}
.bk-popular-grid .n{font-size:13px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}
.bk-popular-grid .t{font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-0.02em}
.bk-popular-grid .c{font-size:12px;color:var(--meta)}

/* ==========================================================================
   8. 푸터
   ========================================================================== */
.bk-footer{border-top:var(--rule-major)}
.bk-footer--slim{border-top:var(--rule-item)}
.bk-footer-top{max-width:var(--container);margin:0 auto;padding:36px var(--gutter) 40px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.bk-footer-brand{display:flex;flex-direction:column;gap:12px}
.bk-footer-brand p{margin:0;font-size:14px;line-height:1.6;color:var(--meta);max-width:340px}
.bk-footer-col{display:flex;flex-direction:column;gap:10px;font-size:14px}
.bk-footer-col .h{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--meta);margin-bottom:4px}
.bk-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.bk-footer-bar{border-top:var(--rule-item)}
.bk-footer--slim .bk-footer-bar{border-top:0}
.bk-footer-bar-in{max-width:var(--container);margin:0 auto;padding:16px var(--gutter);display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--meta);flex-wrap:wrap}
.bk-footer-bar-in nav{display:flex;gap:16px;flex-wrap:wrap}

/* ==========================================================================
   9. 기사 (single)
   ========================================================================== */
.bk-article{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.bk-article-head{max-width:760px;margin:0 auto;padding:44px 0 28px;display:flex;flex-direction:column;gap:20px}
.bk-crumb{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.1em;flex-wrap:wrap}
.bk-crumb a{color:var(--meta)}
.bk-crumb a:hover{color:var(--red)}
.bk-crumb .sep{color:var(--rank)}
.bk-crumb .sub{color:var(--meta);font-weight:600;letter-spacing:0}
.bk-article-head h1{margin:0;font-size:46px;line-height:1.16;letter-spacing:-0.035em;font-weight:800}
.bk-article-head .bk-deck{font-size:19px;line-height:1.55}
.bk-meta{display:flex;align-items:center;gap:14px;border-top:var(--rule-item);padding-top:16px;flex-wrap:wrap}
.bk-avatar{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0;overflow:hidden}
.bk-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bk-meta-txt{display:flex;flex-direction:column;gap:3px;font-size:13px}
.bk-meta-txt .who a{font-weight:700}
.bk-meta-txt .who span{color:var(--meta)}
.bk-meta-txt .when{color:var(--meta);font-variant-numeric:tabular-nums}
.bk-meta-txt .when .upd{color:var(--red);font-weight:600}
.bk-toolbar{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.bk-fontsize{display:flex;border:1px solid var(--rule-2);height:34px}
.bk-fontsize button{border:0;background:transparent;font-weight:700;cursor:pointer;color:var(--ink);width:38px}
.bk-fontsize button:first-child{font-size:12px}
.bk-fontsize button:last-child{font-size:15px}
.bk-fontsize button:hover{background:var(--rule-3)}
.bk-fontsize .div{width:1px;background:var(--rule-2)}
.bk-tool{height:34px;padding:0 12px;border:1px solid var(--rule-2);background:transparent;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px}
.bk-tool:hover{border-color:var(--ink)}
.bk-tool[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.bk-tool--hl[aria-pressed="true"]{background:var(--rule-3);color:var(--ink)}
.bk-tool--hl i{width:10px;height:10px;background:var(--hl);border:1px solid var(--rule-2);flex-shrink:0}

/* 3줄 요약 */
.bk-summary{border:1px solid var(--rule-2);display:flex;flex-direction:column}
.bk-summary > button{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border:0;background:transparent;cursor:pointer;color:var(--ink);text-align:left;width:100%}
.bk-summary .lb{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.06em}
.bk-summary .lb .sq{width:8px;height:8px;background:var(--red);flex-shrink:0}
.bk-summary .lb em{font-style:normal;font-size:11px;font-weight:600;color:var(--meta);letter-spacing:0}
.bk-summary .st{font-size:12px;font-weight:600;color:var(--meta)}
.bk-summary ol{margin:0;padding:0 18px 16px 40px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.6;color:var(--body)}
.bk-summary[data-open="false"] ol{display:none}

.bk-hero{margin:0 auto 40px;max-width:1000px}
.bk-hero .bk-ph{aspect-ratio:2/1}
.bk-hero figcaption{font-size:13px;color:var(--meta);padding-top:10px;line-height:1.5}

.bk-article-grid{display:grid;grid-template-columns:minmax(0,680px) 240px;gap:56px;align-items:start;max-width:976px;margin:0 auto}
.bk-article-aside{position:sticky;top:90px;padding-top:6px}
.bk-sidelist{border-top:var(--rule-section);padding-top:12px;display:flex;flex-direction:column}
.bk-sidelist > .h{font-size:12px;font-weight:800;letter-spacing:.1em;margin-bottom:4px}
.bk-sidelist a{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:12px 0;border-bottom:var(--rule-item);font-size:14px;font-weight:600;line-height:1.45}
.bk-sidelist .n{color:var(--red);font-weight:800;font-variant-numeric:tabular-nums}

/* 반응 · 태그 */
.bk-react{margin:32px 0 0;padding:20px 24px;border-top:var(--rule-section);border-bottom:var(--rule-item);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bk-react > .q{font-size:15px;font-weight:700;color:var(--ink)}
.bk-react-btns{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.bk-react-btns button{height:36px;padding:0 14px;border:1px solid var(--rule-2);background:transparent;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap}
.bk-react-btns button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.bk-react-btns button span{font-weight:600;font-variant-numeric:tabular-nums;opacity:.7}
.bk-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.bk-tags a{font-size:13px;font-weight:600;padding:7px 12px;border:1px solid var(--rule-2);color:var(--ink)}
.bk-tags a:hover{border-color:var(--ink);background:var(--band);color:var(--band-ink)}

.bk-sources{margin:44px 0 0;padding-top:20px;border-top:var(--rule-item);display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--deck)}
.bk-sources .h{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--ink)}
.bk-sources ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;line-height:1.5}
.bk-sources .disc{font-size:13px;color:var(--meta)}
.bk-sources .disc a{text-decoration:underline}

/* 이 이슈 더 보기 */
.bk-related{max-width:var(--container);margin:56px auto 0;padding:0 var(--gutter)}
.bk-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.bk-related-grid a{display:flex;flex-direction:column;gap:10px}
.bk-related-grid .bk-ph{aspect-ratio:16/9}
.bk-related-grid .c{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--meta)}
.bk-related-grid .t{font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-0.02em}
.bk-related-grid .m{font-size:13px;color:var(--meta)}

/* 다음 기사 밴드 */
.bk-next{background:var(--band);color:var(--band-ink);margin-top:56px}
.bk-next-in{max-width:var(--container);margin:0 auto;padding:36px var(--gutter) 40px;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.bk-next a{color:var(--band-ink)}
.bk-next a:hover{color:var(--red-2)}
.bk-next-main{display:flex;flex-direction:column;gap:12px}
.bk-next-main .k{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--band-meta)}
.bk-next-main .t{font-size:30px;font-weight:800;line-height:1.22;letter-spacing:-0.03em}
.bk-next-main .m{font-size:14px;color:var(--band-deck)}
.bk-next-side{display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--band-rule);padding-left:48px}
.bk-next-side .k{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--band-meta)}
.bk-next-side a{font-size:17px;font-weight:700;line-height:1.4}

/* ==========================================================================
   10. 본문 프로즈 — Design System §9 + bk-viz 블록
   ========================================================================== */
.bk-prose{font-size:18px;line-height:1.85;color:var(--body)}
.bk-prose > *:first-child{margin-top:0}
.bk-prose p{margin:0 0 28px}
.bk-prose strong,.bk-prose b{font-weight:800;color:var(--ink)}
.bk-prose h2{font-size:28px;line-height:1.3;letter-spacing:-0.03em;font-weight:800;margin:44px 0 16px;color:var(--ink);scroll-margin-top:100px}
.bk-prose h3{font-size:21px;line-height:1.35;letter-spacing:-0.02em;font-weight:800;margin:36px 0 14px;color:var(--ink);scroll-margin-top:100px}
.bk-prose h4{font-size:18px;font-weight:800;margin:28px 0 12px;color:var(--ink)}
.bk-prose ul,.bk-prose ol{margin:0 0 28px;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.bk-prose ul{list-style:none;padding-left:0}
.bk-prose ul li{display:grid;grid-template-columns:14px 1fr;gap:14px}
.bk-prose ul li::before{content:"";width:7px;height:7px;background:var(--red);margin-top:13px}
.bk-prose blockquote{margin:36px 0;padding:0 0 0 28px;border-left:3px solid var(--ink);font-size:24px;line-height:1.45;letter-spacing:-0.02em;font-weight:700;color:var(--ink)}
.bk-prose blockquote p{margin:0}
.bk-prose blockquote cite,.bk-prose blockquote footer{display:block;font-size:14px;font-weight:500;color:var(--meta);margin-top:12px;letter-spacing:0;font-style:normal}
.bk-prose pre{margin:0 0 28px;padding:20px 22px;background:var(--band);color:var(--band-ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:1.65;overflow-x:auto;border-radius:0}
.bk-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--rule-3);padding:1px 5px}
.bk-prose pre code{background:transparent;padding:0;font-size:inherit}
.bk-prose .bk-code{margin:0 0 28px;border:1px solid var(--band-rule);background:var(--band)}
.bk-prose .bk-code pre{margin:0;border:0}
.bk-prose .bk-code-h{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 8px 22px;border-bottom:1px solid var(--band-rule);font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--band-meta)}
.bk-prose .bk-code-h button{border:1px solid var(--band-rule);background:transparent;color:var(--band-ink);font-size:11px;font-weight:700;padding:4px 10px;cursor:pointer}
.bk-prose table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 28px;font-variant-numeric:tabular-nums}
.bk-prose th{text-align:left;padding:10px 0;font-weight:800;border-bottom:var(--rule-section)}
.bk-prose td{padding:12px 0;border-bottom:var(--rule-item)}
.bk-prose mark{background:var(--hl);color:inherit;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.bk-prose a{text-decoration:underline}
.bk-prose figure{margin:0 0 32px}
.bk-prose figcaption{font-size:13px;color:var(--meta);padding-top:10px;line-height:1.5}
.bk-prose img{margin:0}
.bk-prose .bk-callout{margin:36px 0;padding:22px 24px;border:var(--rule-major);display:flex;flex-direction:column;gap:8px}
.bk-prose .bk-callout b{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--red)}
.bk-prose figure.bk-img{margin:32px 0;display:flex;flex-direction:column;gap:8px}
.bk-prose figure.bk-img img{width:100%;display:block}
.bk-prose figure.bk-img figcaption{font-size:13px;color:var(--meta);line-height:1.5;padding-top:0}
.bk-prose .bk-img-ph{aspect-ratio:16/9;background:repeating-linear-gradient(135deg,var(--ph1) 0 8px,var(--ph2) 8px 16px);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--meta)}
.bk-prose .bk-viz{margin:32px 0;border:var(--rule-item);padding:18px 20px 14px;display:flex;flex-direction:column;gap:12px}
.bk-prose .bk-viz svg{max-width:100%;height:auto}
.bk-prose .bk-viz .bk-mm svg{max-width:none;min-width:100%;font-size:16px!important}
.bk-prose .bk-viz-cap{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--meta);display:flex;justify-content:space-between;gap:12px}
.bk-prose .bk-viz-cap i{font-style:normal;font-weight:600;letter-spacing:0}
.bk-prose .bk-mm{overflow-x:auto}
.bk-prose .bk-mm svg{max-width:none;min-width:100%}
.bk-prose .bk-viz-err{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--red);white-space:pre-wrap}
.bk-prose .wp-block-image,.bk-prose .wp-caption{margin:0 0 32px}
.bk-prose .alignwide{max-width:none}
.bk-prose mark.bk-hl{cursor:pointer}

/* ==========================================================================
   11. 아카이브 · 카테고리
   ========================================================================== */
.bk-archive-head{padding:40px 0 28px;border-bottom:var(--rule-major);display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.bk-archive-head .bk-label{margin-bottom:0}
.bk-archive-head-txt{display:flex;flex-direction:column;gap:12px}
.bk-archive-head h1{margin:0;font-size:64px;line-height:1;letter-spacing:-0.05em;font-weight:900}
.bk-archive-head p{margin:0;font-size:16px;color:var(--deck);max-width:560px;line-height:1.6}
.bk-filters{display:flex;gap:6px;font-size:13px;font-weight:600;flex-wrap:wrap}
.bk-filters button,.bk-filters a{padding:8px 14px;border:1px solid var(--rule-2);background:transparent;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.bk-filters button[aria-pressed="true"],.bk-filters a[aria-current]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.bk-filters button:hover,.bk-filters a:hover{border-color:var(--ink)}

.bk-archive-lead{display:grid;grid-template-columns:7fr 5fr;gap:40px;padding:32px 0 36px;border-bottom:var(--rule-item)}
.bk-archive-lead > a{display:flex;flex-direction:column;gap:14px}
.bk-archive-lead .bk-ph{aspect-ratio:16/9}
.bk-archive-lead .t{font-size:34px;font-weight:800;line-height:1.2;letter-spacing:-0.03em}
.bk-archive-lead .d{font-size:16px;line-height:1.6;color:var(--deck)}
.bk-archive-lead .m{font-size:13px;color:var(--meta)}
.bk-archive-top{display:flex;flex-direction:column}
.bk-archive-top a{display:flex;flex-direction:column;gap:8px;padding:18px 0;border-bottom:var(--rule-item)}
.bk-archive-top .t{font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-0.02em}
.bk-archive-top .m{font-size:13px;color:var(--meta)}

.bk-day{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:24px 0;border-bottom:var(--rule-item)}
.bk-day > .d{font-size:13px;font-weight:800;color:var(--ink);padding-top:4px;position:sticky;top:20px;align-self:start}
.bk-day-items{display:flex;flex-direction:column}
.bk-day-items a{display:grid;grid-template-columns:1fr 140px;gap:24px;padding:16px 0;border-bottom:1px solid var(--rule-3);align-items:start}
.bk-day-items .txt{display:flex;flex-direction:column;gap:6px}
.bk-day-items .t{font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-0.02em}
.bk-day-items .d{font-size:14px;line-height:1.55;color:var(--deck)}
.bk-day-items .m{font-size:12px;color:var(--meta);font-variant-numeric:tabular-nums}
.bk-day-items .bk-ph{aspect-ratio:4/3}

.bk-aside-stack{display:flex;flex-direction:column;gap:36px}
.bk-minilist a{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:12px 0;border-bottom:var(--rule-item);font-size:15px;font-weight:600;line-height:1.45}
.bk-minilist .n{color:var(--red);font-weight:800;font-variant-numeric:tabular-nums}
.bk-topics{display:flex;flex-wrap:wrap;gap:8px}
.bk-topics a{font-size:13px;font-weight:600;padding:7px 12px;border:1px solid var(--rule-2)}
.bk-topics a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.bk-promo{background:var(--band);color:var(--band-ink);padding:24px;display:flex;flex-direction:column;gap:12px}
.bk-promo .k{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--red-2)}
.bk-promo .t{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-0.02em}
.bk-promo form{display:flex;border:1px solid var(--band-rule);margin-top:4px}
.bk-promo input{flex:1;background:transparent;border:0;color:var(--bg);padding:12px 14px;font:inherit;font-size:14px;outline:none;min-width:0}
.bk-promo input::placeholder{color:var(--band-deck)}
.bk-promo button{background:var(--band-ink);color:var(--band);border:0;padding:0 16px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}

/* 페이지네이션 */
.bk-pagination{margin-top:24px}
.bk-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bk-pagination .page-numbers{padding:10px 14px;border:1px solid var(--rule-2);font-size:13px;font-weight:700}
.bk-pagination .page-numbers.current,.bk-pagination .page-numbers:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ==========================================================================
   12. 필진 (author)
   ========================================================================== */
.bk-author-head{display:grid;grid-template-columns:120px 1fr auto;gap:36px;align-items:start;padding:48px 0 36px;border-bottom:var(--rule-major)}
.bk-author-av{width:120px;height:120px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:40px;letter-spacing:-0.04em;overflow:hidden}
.bk-author-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bk-author-txt{display:flex;flex-direction:column;gap:12px}
.bk-author-txt h1{margin:0;font-size:44px;line-height:1.1;letter-spacing:-0.04em;font-weight:900}
.bk-author-txt p{margin:0;font-size:17px;line-height:1.65;color:var(--body);max-width:640px}
.bk-author-beats{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.bk-author-beats a,.bk-author-beats span{font-size:13px;font-weight:600;padding:6px 10px;border:1px solid var(--rule-2)}
.bk-author-stats{display:flex;flex-direction:column;gap:10px;font-size:13px;min-width:200px}
.bk-author-nums{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:14px;border-bottom:var(--rule-item)}
.bk-author-nums > span{display:flex;flex-direction:column;gap:2px}
.bk-author-nums b{font-size:24px;font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.bk-author-nums em{font-style:normal;color:var(--meta)}
.bk-author-links a{font-weight:600;display:block}
.bk-author-list a{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:20px 0;border-bottom:var(--rule-item);align-items:baseline}
.bk-author-list .dt{font-size:13px;color:var(--meta);font-variant-numeric:tabular-nums}
.bk-author-list .txt{display:flex;flex-direction:column;gap:6px}
.bk-author-list .t{font-size:21px;font-weight:700;line-height:1.35;letter-spacing:-0.025em}
.bk-author-list .d{font-size:14px;line-height:1.55;color:var(--deck)}
.bk-policy{border:var(--rule-major);padding:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.6;color:var(--body)}
.bk-policy .h{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--ink)}
.bk-policy a{text-decoration:underline}
.bk-people a{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0;border-bottom:var(--rule-item);align-items:center}
.bk-people .av{width:36px;height:36px;border-radius:50%;background:var(--rule);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--ink);overflow:hidden}
.bk-people .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bk-people .txt{display:flex;flex-direction:column;gap:2px}
.bk-people .nm{font-size:15px;font-weight:700}
.bk-people .bt{font-size:12px;color:var(--meta)}

/* ==========================================================================
   13. 검색
   ========================================================================== */
.bk-search-page{display:flex;flex-direction:column;min-height:100vh}
.bk-search-page > main{flex:1}
.bk-search-hero{max-width:800px;padding:44px 0 0}
.bk-search-form{display:flex;border-bottom:3px solid var(--ink);align-items:center;gap:12px}
.bk-search-form input[type=search]{flex:1;border:0;background:transparent;font:inherit;font-size:40px;font-weight:800;letter-spacing:-0.03em;padding:8px 0 14px;outline:none;color:var(--ink);-webkit-appearance:none;appearance:none}
.bk-search-form input::placeholder{color:var(--band-deck)}
.bk-search-form input::-webkit-search-cancel-button{display:none}
.bk-search-form button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--meta);cursor:pointer;padding:8px}
.bk-search-form button:hover{color:var(--red)}
.bk-search-bar{display:flex;align-items:center;gap:20px;padding:14px 0 0;font-size:13px;color:var(--meta)}
.bk-search-sort{display:flex;gap:4px;margin-left:auto;font-weight:600}
.bk-search-sort a{font-size:13px;padding:6px 10px;color:var(--meta)}
.bk-search-sort a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.bk-results{display:flex;flex-direction:column}
.bk-results a{display:grid;grid-template-columns:1fr 160px;gap:24px;padding:22px 0;border-bottom:var(--rule-item);align-items:start}
.bk-results .txt{display:flex;flex-direction:column;gap:8px}
.bk-results .c{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--meta)}
.bk-results .t{font-size:22px;font-weight:700;line-height:1.3;letter-spacing:-0.025em}
.bk-results .d{font-size:15px;line-height:1.6;color:var(--deck)}
.bk-results .m{font-size:12px;color:var(--meta);font-variant-numeric:tabular-nums}
.bk-results .bk-ph{aspect-ratio:4/3}
.bk-facets{display:flex;flex-direction:column;font-size:14px;font-weight:600}
.bk-facets a{display:flex;justify-content:space-between;padding:10px 0;border-bottom:var(--rule-item)}
.bk-facets a span:last-child{color:var(--meta);font-weight:500;font-variant-numeric:tabular-nums}
.bk-empty{max-width:800px;padding:56px 0 80px;display:flex;flex-direction:column;gap:28px}
.bk-empty h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-0.03em;line-height:1.25}
.bk-empty p{margin:0;font-size:16px;color:var(--deck);line-height:1.6}
.bk-suggest{display:flex;flex-wrap:wrap;gap:8px}
.bk-suggest a{font-size:14px;font-weight:600;padding:9px 14px;border:var(--rule-major);color:var(--ink)}
.bk-suggest a:hover{background:var(--ink);color:var(--bg)}
.bk-trendlist{border-top:var(--rule-section);padding-top:14px;display:flex;flex-direction:column}
.bk-trendlist > .h{font-size:12px;font-weight:800;letter-spacing:.1em;margin-bottom:4px}
.bk-trendlist a{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:12px 0;border-bottom:var(--rule-item);font-size:17px;font-weight:700;line-height:1.4}
.bk-trendlist .n{color:var(--red);font-weight:800}

/* ==========================================================================
   14. 404
   ========================================================================== */
.bk-404{max-width:var(--container);margin:0 auto;padding:64px var(--gutter) 80px;width:100%;flex:1;display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
.bk-404-txt{display:flex;flex-direction:column;gap:24px}
.bk-404-txt h1{margin:0;font-size:56px;line-height:1.1;letter-spacing:-0.04em;font-weight:900}
.bk-404-txt p{margin:0;font-size:18px;line-height:1.6;color:var(--deck);max-width:560px}
.bk-404 form{display:flex;border-bottom:3px solid var(--ink);max-width:560px;margin-top:8px;align-items:center}
.bk-404 form input{flex:1;border:0;background:transparent;font:inherit;font-size:22px;font-weight:700;letter-spacing:-0.02em;padding:10px 0 12px;outline:none;color:var(--ink)}
.bk-404 form button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;padding:14px 0 0 16px;flex-shrink:0;cursor:pointer;color:var(--ink)}
.bk-404 form button:hover{color:var(--red)}
.bk-404-cta{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.bk-btn{padding:12px 18px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:700;display:inline-block}
.bk-btn:hover{background:var(--red);color:#fff}
.bk-btn--ghost{background:transparent;border:var(--rule-major);color:var(--ink)}
.bk-btn--ghost:hover{background:transparent;border-color:var(--red);color:var(--red)}
.bk-404 .bk-trendlist a{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:14px 0;letter-spacing:-0.02em}
.bk-404 .bk-trendlist .n{color:var(--rank);font-weight:800;font-size:20px;line-height:1.1}

/* ==========================================================================
   15. 토스트 · 페이지 (일반)
   ========================================================================== */
.bk-toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;background:var(--ink);color:var(--bg);border:0;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:bk-toastIn .4s cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.bk-toast i{width:8px;height:8px;border-radius:50%;background:var(--red-2);animation:bk-pulse 1.4s infinite}
.bk-page{max-width:760px;margin:0 auto;padding:48px 0 72px}
.bk-page h1{margin:0 0 24px;font-size:46px;line-height:1.16;letter-spacing:-0.035em;font-weight:800}
.bk-comments{max-width:680px;margin:56px auto 0;padding-bottom:40px}
.bk-comments h2{font-size:14px;font-weight:800;letter-spacing:.1em;border-bottom:var(--rule-section);padding-bottom:10px;margin:0 0 16px}
.bk-comments ol{list-style:none;margin:0;padding:0}
.bk-comments .comment-body{padding:16px 0;border-bottom:var(--rule-item);font-size:15px;line-height:1.7}
.bk-comments input[type=text],.bk-comments input[type=email],.bk-comments input[type=url],.bk-comments textarea{width:100%;border:1px solid var(--rule-2);background:transparent;color:var(--ink);font:inherit;font-size:15px;padding:10px 12px;margin-bottom:12px}
.bk-comments .submit{padding:12px 18px;background:var(--ink);color:var(--bg);border:0;font-size:14px;font-weight:700;cursor:pointer}

/* ==========================================================================
   16. 반응형 — 1024 (사이드 아래로) / 720 (1열) · Mobile 아트보드 기준
   ========================================================================== */
@media (max-width:1100px){
  .bk-header .bk-searchlink{display:none}
  .bk-article-grid{grid-template-columns:minmax(0,1fr);gap:0;max-width:760px}
  .bk-article-aside{position:static;border-top:var(--rule-item);margin-top:40px;padding-top:24px}
}
@media (max-width:1024px){
  .bk-cols{grid-template-columns:1fr;gap:40px}
  .bk-lead{grid-template-columns:1fr;gap:20px}
  .bk-lead h1{font-size:34px}
  .bk-secgrid{grid-template-columns:1fr;gap:28px}
  .bk-archive-lead{grid-template-columns:1fr;gap:28px}
  .bk-band-grid{grid-template-columns:1fr;gap:28px}
  .bk-band-grid .t{font-size:22px}
  .bk-popular-grid{grid-template-columns:repeat(2,1fr)}
  .bk-author-head{grid-template-columns:88px 1fr;gap:24px}
  .bk-author-av{width:88px;height:88px;font-size:30px}
  .bk-author-stats{grid-column:1 / -1;min-width:0}
  .bk-next-in{grid-template-columns:1fr;gap:28px}
  .bk-next-side{border-left:0;padding-left:0;border-top:1px solid var(--band-rule);padding-top:24px}
  .bk-related-grid{grid-template-columns:1fr;gap:24px}
  .bk-404{grid-template-columns:1fr;gap:40px}
  .bk-archive-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .bk-results a{grid-template-columns:1fr 120px;gap:16px}
}
/* 모바일 마스트헤드 — Mobile 아트보드: 햄버거 · 가운데 워드마크 · 검색, 그 아래 섹션 스크롤 줄 */
@media (max-width:820px){
  .bk-header-in{flex-wrap:wrap;height:auto;gap:0;align-items:center}
  .bk-burger{display:flex;order:1}
  .bk-header .bk-logo{order:2;margin:0 auto;height:54px}
  .bk-header--compact .bk-header-in{height:auto}
  .bk-header--compact .bk-logo{height:50px}
  .bk-header .bk-logo b,.bk-header--compact .bk-logo b{font-size:24px}
  .bk-header .bk-logo img,.bk-header--compact .bk-logo img{height:26px}
  .bk-header-tools{order:3;margin-left:0;margin-right:-8px;gap:4px}
  .bk-header-title,.bk-clock,.bk-searchlink{display:none}
  .bk-theme{border:0;padding:0 8px;height:44px}
  .bk-iconbtn{border:0;width:44px;height:44px}
  .bk-nav{order:4;flex-basis:100%;width:100%;margin:0 calc(var(--gutter) * -1);padding:10px 12px;gap:4px;border-top:var(--rule-item);overflow-x:auto;font-size:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .bk-nav::-webkit-scrollbar{display:none}
  .bk-menu{display:block;border-bottom:var(--rule-major);background:var(--bg)}
  .bk-menu[hidden]{display:none!important}
}
@media (max-width:720px){
  :root{--gutter:16px}
  .bk-strip{height:32px;border-bottom-width:2px}
  .bk-strip-tag{font-size:11px;letter-spacing:.1em;padding:0 10px;gap:6px}
  .bk-strip-tag i{width:6px;height:6px}
  .bk-strip-view{font-size:13px}
  .bk-strip-item{gap:8px;padding:0 16px}
  .bk-strip-item::after{margin-left:16px}
  .bk-strip-live{display:none}

  .bk-lead{padding:20px 0 22px;gap:12px}
  .bk-lead h1{font-size:28px;line-height:1.2}
  .bk-deck{font-size:15px;line-height:1.55}
  .bk-byline .bk-save{margin-left:0;order:9}
  .bk-secondary{grid-template-columns:1fr}
  .bk-secondary a{padding:16px 0;margin-right:0;border-right:0;border-bottom:var(--rule-item)}
  .bk-secondary a:last-child{border-bottom:0}
  .bk-h-secondary{font-size:18px}

  .bk-cols{padding:28px 0 8px;gap:28px}
  .bk-ranked a{grid-template-columns:32px 1fr;gap:12px;padding:14px 0}
  .bk-ranked .n{font-size:24px}
  .bk-ranked .t{font-size:17px}
  .bk-ranked .c{display:none}
  .bk-timelist a{grid-template-columns:40px 1fr;gap:10px}

  .bk-shead--big h2{font-size:20px}
  .bk-seclead{grid-template-columns:1fr;gap:10px}
  .bk-seclead-body .t{font-size:21px}
  .bk-popular-grid{grid-template-columns:1fr;gap:0}
  .bk-popular-grid a{padding:14px 0;border-bottom:var(--rule-item)}

  .bk-band{margin-top:28px}
  .bk-band-in{padding:28px var(--gutter) 36px}
  .bk-band-grid .t{font-size:22px}

  .bk-footer-top{grid-template-columns:1fr 1fr;gap:24px;padding:28px var(--gutter) 28px}
  .bk-footer-brand{grid-column:1 / -1}
  .bk-footer-bar-in{flex-direction:column;gap:8px}

  .bk-article-head{padding:22px 0 18px;gap:14px}
  .bk-article-head h1{font-size:30px;line-height:1.18}
  .bk-article-head .bk-deck{font-size:16px}
  .bk-meta{gap:10px}
  .bk-toolbar{margin-left:0;width:100%;order:9}
  .bk-hero .bk-ph{aspect-ratio:3/2}
  .bk-prose{font-size:17px;line-height:1.8}
  .bk-prose h2{font-size:23px;margin:32px 0 12px}
  .bk-prose h3{font-size:19px}
  .bk-prose blockquote{font-size:20px;padding-left:18px;margin:28px 0}
  .bk-prose pre{padding:16px;font-size:12.5px}
  .bk-prose .bk-callout{padding:16px 18px;margin:28px 0}
  .bk-react{padding:16px 0}
  .bk-react-btns{margin-left:0}
  .bk-next-main .t{font-size:24px}
  .bk-related{margin-top:32px}

  .bk-archive-head{padding:24px 0 16px}
  .bk-archive-head h1{font-size:48px}
  .bk-archive-head p{font-size:14px}
  .bk-filters{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
  .bk-filters::-webkit-scrollbar{display:none}
  .bk-archive-lead .t{font-size:25px}
  .bk-day{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .bk-day > .d{position:static;padding-top:0}
  .bk-day-items a{grid-template-columns:1fr 88px;gap:14px}
  .bk-day-items .t{font-size:17px}
  .bk-day-items .d{display:none}
  .bk-day-items .bk-ph{aspect-ratio:1}

  .bk-author-head{padding:28px 0 20px}
  .bk-author-txt h1{font-size:32px}
  .bk-author-txt p{font-size:15px}
  .bk-author-list a{grid-template-columns:1fr;gap:6px}
  .bk-author-list .t{font-size:18px}

  .bk-search-hero{padding:24px 0 0}
  .bk-search-form input[type=search]{font-size:28px}
  .bk-results a{grid-template-columns:1fr;gap:10px}
  .bk-results .bk-ph{display:none}
  .bk-results .t{font-size:18px}
  .bk-results .d{font-size:14px}

  .bk-404{padding:36px var(--gutter) 56px;gap:32px}
  .bk-404-txt h1{font-size:34px}
  .bk-404-txt p{font-size:16px}
  .bk-404 form input{font-size:18px}
}
@media (max-width:480px){
  .bk-lead h1{font-size:25px}
  .bk-article-head h1{font-size:26px}
  .bk-footer-top{grid-template-columns:1fr}
}

/* ==========================================================================
   17. 인쇄
   ========================================================================== */
@media print{
  .bk-strip,.bk-header-tools,.bk-toolbar,.bk-react,.bk-toast,.bk-progress,.bk-article-aside,.bk-next,.bk-related,.bk-nav{display:none!important}
  html,body{background:#fff;color:#000}
  .bk-article-grid{grid-template-columns:1fr}
}