/* =====================================================
   BOKGIL SKIN PORTABLE v1.1.1 — style.css
   제작자: suwhayoo
   디자인 언어: 현대카드式 직각 미니멀 × iOS 26 리퀴드 글라스
   - 라운드: 카드/이미지 0px, 버튼/칩 2px (극한의 직각 기조)
   - 유리: backdrop-filter blur+saturate, 얇은 하이라이트 보더
   - 라이트 전용 (다크모드 미사용)
   - 외부 폰트/CDN 없음 (시스템 폰트 스택)
   ===================================================== */

/* ---------- 토큰 (라이트) ---------- */
:root {
  color-scheme: light;

  --bk-point: #1B1B1B;          /* 스킨 옵션에서 덮어씀 */
  --bk-accent: var(--bk-point); /* 블로그별 포인트 컬러 옵션을 강조 요소에 반영 */

  --bk-ink: #0A0A0A;
  --bk-body: #2E2E2E;
  --bk-muted: #6B6B6B;
  --bk-faint: #9A9A9A;

  --bk-bg: #FFFFFF;
  --bk-bg-sub: #F5F5F4;
  --bk-line: #E3E3E0;
  --bk-line-strong: #C9C9C5;

  /* 리퀴드 글라스 */
  --bk-glass-bg: rgba(255, 255, 255, 0.62);
  --bk-glass-bg-strong: rgba(255, 255, 255, 0.82);
  --bk-glass-line: rgba(255, 255, 255, 0.7);
  --bk-glass-edge: rgba(10, 10, 10, 0.08);
  --bk-glass-blur: saturate(180%) blur(20px);
  --bk-glass-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 32px rgba(0,0,0,.06);

  --bk-radius: 0px;             /* 카드·썸네일: 완전 직각 */
  --bk-radius-btn: 2px;         /* 버튼·칩: 2px */
  --bk-radius-glass: 14px;      /* 유리 패널만 소폭 라운드 */

  --bk-font: -apple-system, BlinkMacSystemFont, "SF Pro KR", "Pretendard Variable", Pretendard,
             "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Segoe UI", Roboto, sans-serif;
  --bk-container: 1180px;
  --bk-reading: 740px;
  --bk-header-h: 60px;
  --bk-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 토큰 (다크) — 미사용: 라이트 전용 스킨 ----------
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bk-point: #F2F2F2;
    --bk-accent: #FF5A2B;
    --bk-ink: #F7F7F5;
    --bk-body: #D6D6D2;
    --bk-muted: #9C9C97;
    --bk-faint: #6E6E69;
    --bk-bg: #0B0B0C;
    --bk-bg-sub: #141416;
    --bk-line: #26262A;
    --bk-line-strong: #3A3A40;
    --bk-glass-bg: rgba(22, 22, 25, 0.62);
    --bk-glass-bg-strong: rgba(18, 18, 21, 0.86);
    --bk-glass-line: rgba(255, 255, 255, 0.10);
    --bk-glass-edge: rgba(0, 0, 0, 0.5);
    --bk-glass-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bk-point: #F2F2F2;
  --bk-accent: #FF5A2B;
  --bk-ink: #F7F7F5;
  --bk-body: #D6D6D2;
  --bk-muted: #9C9C97;
  --bk-faint: #6E6E69;
  --bk-bg: #0B0B0C;
  --bk-bg-sub: #141416;
  --bk-line: #26262A;
  --bk-line-strong: #3A3A40;
  --bk-glass-bg: rgba(22, 22, 25, 0.62);
  --bk-glass-bg-strong: rgba(18, 18, 21, 0.86);
  --bk-glass-line: rgba(255, 255, 255, 0.10);
  --bk-glass-edge: rgba(0, 0, 0, 0.5);
  --bk-glass-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 32px rgba(0,0,0,.5);
}
---- */

/* ---------- 리셋 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bk-header-h) + 16px); }
body {
  font-family: var(--bk-font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.021em;
  color: var(--bk-body);
  background: var(--bk-bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; transition: color .18s var(--bk-ease), opacity .18s var(--bk-ease); }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--bk-ink); color: var(--bk-bg); }
:focus-visible { outline: 2px solid var(--bk-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.bk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 10px 16px; background: var(--bk-ink); color: var(--bk-bg); font-size: 14px;
}
.bk-skip:focus { left: 8px; top: 8px; }

.bk-container { width: 100%; max-width: var(--bk-container); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .bk-container { padding: 0 16px; } }

/* =====================================================
   헤더 (리퀴드 글라스)
   ===================================================== */
.bk-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bk-glass-bg);
  -webkit-backdrop-filter: var(--bk-glass-blur);
  backdrop-filter: var(--bk-glass-blur);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--bk-ease), background-color .2s var(--bk-ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bk-header { background: var(--bk-bg); }
}
.bk-header.bk-scrolled { border-bottom-color: var(--bk-line); background: var(--bk-glass-bg-strong); }
.bk-header-inner { display: flex; align-items: center; gap: 20px; height: var(--bk-header-h); }

.bk-logo-text {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.03em; color: var(--bk-ink);
  white-space: nowrap;
}
.bk-logo-image-link img { max-height: 26px; width: auto; }

.bk-gnb { flex: 1; min-width: 0; }
.bk-gnb ul { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.bk-gnb ul::-webkit-scrollbar { display: none; }
.bk-gnb li a {
  display: block; padding: 7px 12px; font-size: 14px; font-weight: 500;
  color: var(--bk-muted); white-space: nowrap; border-radius: var(--bk-radius-btn);
}
.bk-gnb li a:hover { color: var(--bk-ink); background: var(--bk-bg-sub); }
@media (max-width: 900px) { .bk-gnb { display: none; } }

.bk-header-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.bk-icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--bk-body); border-radius: var(--bk-radius-btn);
  transition: background-color .18s var(--bk-ease), color .18s var(--bk-ease);
}
.bk-icon-button:hover { background: var(--bk-bg-sub); color: var(--bk-ink); }
.bk-drawer-open { display: inline-flex; }

/* 검색바 */
.bk-searchbar { border-top: 1px solid var(--bk-line); background: var(--bk-glass-bg-strong); }
.bk-searchbar-inner { display: flex; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
.bk-search-input {
  flex: 1; height: 40px; padding: 0 12px;
  font-family: inherit; font-size: 15px; color: var(--bk-ink);
  background: var(--bk-bg); border: 1px solid var(--bk-line-strong);
  border-radius: var(--bk-radius-btn);
}
.bk-search-input::placeholder { color: var(--bk-faint); }
.bk-search-input:focus { outline: none; border-color: var(--bk-ink); }
.bk-button {
  height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600;
  color: var(--bk-bg); background: var(--bk-ink);
  border-radius: var(--bk-radius-btn);
  transition: opacity .18s var(--bk-ease);
}
.bk-button:hover { opacity: .82; }

/* =====================================================
   드로어 (글라스 시트)
   ===================================================== */
.bk-drawer-dim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.bk-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(320px, 86vw); padding: 16px;
  background: var(--bk-glass-bg-strong);
  -webkit-backdrop-filter: var(--bk-glass-blur); backdrop-filter: var(--bk-glass-blur);
  border-left: 1px solid var(--bk-line);
  overflow-y: auto; overscroll-behavior: contain;
  animation: bk-slide-in .28s var(--bk-ease);
}
@keyframes bk-slide-in { from { transform: translateX(100%); } to { transform: none; } }
.bk-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bk-drawer-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--bk-muted); text-transform: uppercase; }
.bk-drawer-category ul { display: flex; flex-direction: column; }
.bk-drawer-category li a {
  display: block; padding: 11px 8px; font-size: 15px; color: var(--bk-body);
  border-bottom: 1px solid var(--bk-line);
}
.bk-drawer-category li a:hover { color: var(--bk-ink); }
.bk-drawer-category ul ul li a { padding-left: 22px; font-size: 14px; color: var(--bk-muted); }
.bk-drawer-links { display: flex; gap: 14px; margin-top: 18px; padding: 0 8px; font-size: 14px; color: var(--bk-muted); }

/* =====================================================
   히어로
   ===================================================== */
.bk-main { min-height: 60vh; padding-bottom: 80px; }
.bk-hero { padding: 72px 0 56px; border-bottom: 1px solid var(--bk-line); overflow: hidden; }
.bk-hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bk-accent); }
.bk-hero-title {
  margin-top: 12px; font-size: clamp(30px, 5vw, 52px); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1.12; color: var(--bk-ink);
}
.bk-hero-subtitle { margin-top: 14px; max-width: 620px; font-size: 16px; color: var(--bk-muted); }
.bk-hero-glass {
  background: var(--bk-glass-bg);
  -webkit-backdrop-filter: var(--bk-glass-blur); backdrop-filter: var(--bk-glass-blur);
}
@media (max-width: 640px) { .bk-hero { padding: 44px 0 36px; } }

/* =====================================================
   목록 / 카드 그리드 (직각)
   ===================================================== */
.bk-list { padding-top: 44px; }
.bk-list-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 2px solid var(--bk-ink); }
.bk-list-title { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--bk-ink); }
.bk-list-count { font-size: 13px; font-weight: 600; color: var(--bk-faint); }
.bk-section-title { margin-bottom: 16px; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; color: var(--bk-ink); }

/* 그리드: 회색 바닥+1px gap 헤어라인 방식은 카드가 불투명해야 성립 —
   투명 카드(파티클 투과)를 위해 개별 테두리 방식으로 전환 */
.bk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bk-grid-2 .bk-grid { grid-template-columns: repeat(2, 1fr); }
.bk-grid-4 .bk-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .bk-grid, .bk-grid-4 .bk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bk-grid, .bk-grid-2 .bk-grid, .bk-grid-4 .bk-grid { grid-template-columns: 1fr; } }

/* 배경 투명 — weather-fx 파티클이 카드 글자 뒤로도 지나가게 */
.bk-card { background: transparent; border: 1px solid var(--bk-line); transition: background-color .2s var(--bk-ease); }
.bk-card:hover { background: var(--bk-bg-sub); }
.bk-card-link { display: block; height: 100%; }
.bk-card-thumb {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--bk-bg-sub); border-radius: var(--bk-radius);
}
.bk-card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bk-card-body { padding: 16px 18px 20px; }
.bk-chip {
  display: inline-block; padding: 3px 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--bk-muted); background: var(--bk-bg-sub); border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius-btn);
}
.bk-chip-link:hover { color: var(--bk-ink); border-color: var(--bk-line-strong); }
.bk-card-title {
  margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; color: var(--bk-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-card-summary {
  margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: var(--bk-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-card-meta { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; color: var(--bk-faint); }
.bk-dot { width: 2px; height: 2px; background: currentColor; opacity: .6; }

/* 공지 줄 */
.bk-notice-row {
  display: flex; align-items: center; gap: 10px; margin-top: 28px; padding: 13px 16px;
  background: var(--bk-bg-sub); border-left: 2px solid var(--bk-accent);
}
.bk-notice-badge { font-size: 11px; font-weight: 800; color: var(--bk-accent); }
.bk-notice-row-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--bk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-notice-row-date { font-size: 12px; color: var(--bk-faint); }

/* =====================================================
   글 상세
   ===================================================== */
.bk-post { max-width: var(--bk-reading); margin: 0 auto; padding: 56px 0 0; }
.bk-post-header { padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--bk-line); }
.bk-post-title {
  margin-top: 14px; font-size: clamp(26px, 4vw, 38px); font-weight: 800;
  line-height: 1.25; letter-spacing: -0.04em; color: var(--bk-ink);
}
.bk-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--bk-faint); }
.bk-admin-menu { display: inline-flex; gap: 8px; }
.bk-admin-menu a:hover { color: var(--bk-accent); }

.bk-article { font-size: 17px; line-height: 1.85; color: var(--bk-body); }
.bk-article > * + * { margin-top: 1.05em; }
.bk-article h2 {
  margin-top: 2.1em; padding-top: .55em; font-size: 23px; font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.35; color: var(--bk-ink); border-top: 2px solid var(--bk-ink);
}
.bk-article h3 { margin-top: 1.7em; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--bk-ink); }
.bk-article h4 { margin-top: 1.5em; font-size: 17px; font-weight: 700; color: var(--bk-ink); }
.bk-article p { word-break: keep-all; }
.bk-article a { color: var(--bk-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--bk-line-strong); }
.bk-article a:hover { text-decoration-color: var(--bk-accent); color: var(--bk-accent); }
.bk-article img { border-radius: var(--bk-radius); }
.bk-article figure figcaption { margin-top: 8px; font-size: 13px; color: var(--bk-faint); text-align: center; }
.bk-article blockquote {
  padding: 4px 0 4px 18px; border-left: 2px solid var(--bk-ink);
  font-size: 16.5px; color: var(--bk-muted);
}
.bk-article ul, .bk-article ol { padding-left: 1.15em; }
.bk-article ul li { list-style: disc; }
.bk-article ol li { list-style: decimal; }
.bk-article li + li { margin-top: .35em; }
.bk-article li::marker { color: var(--bk-faint); }
.bk-article hr { height: 1px; background: var(--bk-line); border: 0; margin: 2.2em 0; }
.bk-article code {
  padding: 2px 5px; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bk-bg-sub); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-btn);
}
.bk-article pre {
  padding: 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.6;
  background: var(--bk-bg-sub); border: 1px solid var(--bk-line);
}
.bk-article pre code { padding: 0; background: none; border: 0; }
.bk-article table { width: 100%; border-collapse: collapse; font-size: 14.5px; display: block; overflow-x: auto; }
.bk-article th, .bk-article td { padding: 10px 12px; border: 1px solid var(--bk-line); text-align: left; }
.bk-article th { background: var(--bk-bg-sub); font-weight: 700; color: var(--bk-ink); }

/* 목차 (넓은 화면: 본문 왼쪽 여백에 유리 패널로 고정) */
.bk-toc { display: none; }
@media (min-width: 1280px) {
  .bk-toc {
    display: block; position: fixed; top: calc(var(--bk-header-h) + 40px);
    left: max(24px, calc(50vw - var(--bk-container) / 2));
    width: 200px; max-height: 60vh; overflow-y: auto; padding: 14px 16px;
    background: var(--bk-glass-bg);
    -webkit-backdrop-filter: var(--bk-glass-blur); backdrop-filter: var(--bk-glass-blur);
    border: 1px solid var(--bk-glass-line); border-radius: var(--bk-radius-glass);
    box-shadow: var(--bk-glass-shadow);
  }
  .bk-toc-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bk-faint); }
  .bk-toc-list { margin-top: 10px; }
  .bk-toc-list li { margin-top: 7px; font-size: 13px; line-height: 1.45; }
  .bk-toc-list li.bk-toc-h3 { padding-left: 10px; font-size: 12.5px; }
  .bk-toc-list a { color: var(--bk-muted); }
  .bk-toc-list a:hover, .bk-toc-list li.bk-toc-active > a { color: var(--bk-ink); font-weight: 600; }
}

.bk-post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 40px; }
.bk-post-tags a, .bk-tag {
  padding: 5px 10px; font-size: 12.5px; color: var(--bk-muted);
  background: var(--bk-bg-sub); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-btn);
}
.bk-post-tags a:hover, .bk-tag:hover { color: var(--bk-ink); border-color: var(--bk-line-strong); }

/* 보호글 */
.bk-protected { padding: 40px 0; text-align: center; }
.bk-protected-message { font-size: 15px; color: var(--bk-muted); }
.bk-protected-form { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.bk-protected-form .bk-search-input { max-width: 220px; }

/* 관련 글 */
.bk-related { margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--bk-line); }
.bk-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 640px) { .bk-related-grid { grid-template-columns: repeat(2, 1fr); } }
.bk-related-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bk-bg-sub); }
.bk-related-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bk-related-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 9px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--bk-ink);
}
.bk-related-date { display: block; margin-top: 5px; font-size: 12px; color: var(--bk-faint); }

/* 댓글 */
.bk-comments { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--bk-line); }
.bk-comments textarea, .bk-comments input[type="text"], .bk-comments input[type="password"] {
  font-family: inherit; font-size: 14px; color: var(--bk-ink);
  background: var(--bk-bg); border: 1px solid var(--bk-line-strong); border-radius: var(--bk-radius-btn);
  padding: 9px 11px;
}
.bk-comments textarea:focus, .bk-comments input:focus { outline: none; border-color: var(--bk-ink); }

/* 태그 클라우드 / 방명록 */
.bk-tagcloud, .bk-guestbook { padding-top: 44px; }
.bk-tagcloud-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* 페이지네이션 */
.bk-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 48px; }
.bk-page-number, .bk-page-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; font-size: 14px; color: var(--bk-muted);
  border: 1px solid transparent; border-radius: var(--bk-radius-btn);
}
.bk-page-number:hover, .bk-page-arrow:hover { color: var(--bk-ink); background: var(--bk-bg-sub); }
.bk-page-number.selected, .bk-page-number[href=""] { color: var(--bk-bg); background: var(--bk-ink); font-weight: 700; }

/* 위로가기 (유리 알약) */
.bk-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; color: var(--bk-ink);
  background: var(--bk-glass-bg-strong);
  -webkit-backdrop-filter: var(--bk-glass-blur); backdrop-filter: var(--bk-glass-blur);
  border: 1px solid var(--bk-glass-line); border-radius: var(--bk-radius-glass);
  box-shadow: var(--bk-glass-shadow);
  transition: transform .2s var(--bk-ease), opacity .2s var(--bk-ease);
}
.bk-top:hover { transform: translateY(-2px); }

/* =====================================================
   밤하늘 (별빛) — .bk-sky 구간
   캔버스는 script.js가 주입, 배경/문자색은 여기서
   ===================================================== */
.bk-sky {
  position: relative; isolation: isolate;
  background: #05060A;
  background-image:
    radial-gradient(120% 90% at 20% 0%, #101728 0%, rgba(16,23,40,0) 60%),
    radial-gradient(90% 70% at 85% 20%, #0C1322 0%, rgba(12,19,34,0) 65%);
  color: #E9EDF6;
}
.bk-starfield {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}

/* 밤하늘 히어로 */
.bk-hero-night { border-bottom: 0; padding: 96px 0 84px; overflow: hidden; }
.bk-hero-night .bk-hero-title { color: #FFFFFF; }
.bk-hero-night .bk-hero-subtitle { color: rgba(233, 237, 246, .72); }
.bk-hero-night .bk-hero-eyebrow { color: #7FB0FF; }
@media (max-width: 640px) { .bk-hero-night { padding: 60px 0 52px; } }

/* 히어로는 홈(index)에서만 표시 — 글/카테고리/태그 등에서는 숨김 */
body:not(#tt-body-index) .bk-hero { display: none; }

/* 이미지 없는 텍스트 히어로 */
.bk-hero { position: relative; }
.bk-hero-inner {
  display: grid; align-items: center; gap: 32px;
  grid-template-columns: minmax(0, 1fr);
}
.bk-hero-copy { position: relative; z-index: 2; min-width: 0; max-width: 900px; }
@media (max-width: 900px) {
  .bk-hero-inner { gap: 22px; }
  .bk-hero-subtitle { max-width: none; }
}

/* 광고 (수동 슬롯) — CLS 방지 예약 + 라벨 */
.bk-ad {
  position: relative; margin: 34px 0; min-height: 120px;
  background: var(--bk-bg-sub); border: 1px solid var(--bk-line);
}
.bk-ad::before {
  content: "AD"; position: absolute; top: -1px; left: -1px;
  padding: 2px 7px; font-size: 9px; font-weight: 800; letter-spacing: .12em;
  color: var(--bk-faint); background: var(--bk-bg); border: 1px solid var(--bk-line);
}
.bk-ad ins.adsbygoogle { display: block; min-height: 120px; }
@media (min-width: 768px) { .bk-ad, .bk-ad ins.adsbygoogle { min-height: 280px; } }
.bk-ad.bk-ad-loaded { background: none; border: 0; }
.bk-ad.bk-ad-loaded::before { display: none; }

/* 푸터 */
.bk-footer { border-top: 1px solid var(--bk-line); background: var(--bk-bg-sub); }
.bk-footer-stats {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 18px;
  padding: 8px 16px; border: 1px solid var(--bk-line);
  font-size: 12.5px; letter-spacing: .02em; color: var(--bk-muted); background: var(--bk-bg);
}
.bk-footer-stats b { font-weight: 700; color: var(--bk-ink); }
.bk-footer-stats .bk-dot { width: 3px; height: 3px; background: var(--bk-line-strong); }
.bk-footer-inner { padding: 48px 24px 56px; text-align: center; }
.bk-footer-brand { font-size: 15px; font-weight: 800; letter-spacing: -0.03em; color: var(--bk-ink); }
.bk-footer-text { margin-top: 8px; font-size: 13.5px; color: var(--bk-muted); }
.bk-footer-copyright { margin-top: 14px; font-size: 12px; color: var(--bk-faint); }
.bk-footer-credit { margin-top: 6px; font-size: 11px; color: var(--bk-faint); }


/* =====================================================
   티스토리 자동 주입 모듈: '카테고리의 다른 글'
   (스킨 마크업이 아니라 티스토리가 본문 끝에 넣는 박스 —
    기본 스타일을 덮어써 스킨 결에 맞춤. .bk-article 프리픽스로 우선순위 확보)
   ===================================================== */
.bk-article .another_category {
  margin: 48px 0 8px; padding: 18px 20px 6px;
  border: 1px solid var(--bk-line) !important;
  border-radius: var(--bk-radius);
  background: var(--bk-bg);
}
.bk-article .another_category h4 {
  margin: 0 0 10px; padding: 0; border: 0;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--bk-muted);
}
.bk-article .another_category h4 a { color: var(--bk-ink); text-decoration: none; border: 0; }
.bk-article .another_category h4 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bk-article .another_category table {
  width: 100% !important; margin: 0; border-collapse: collapse; table-layout: fixed;
}
.bk-article .another_category table th,
.bk-article .another_category table td {
  padding: 10px 0; border: 0; border-top: 1px solid var(--bk-line);
  background: none; font-weight: 400;
}
.bk-article .another_category table th { text-align: left; font-size: 14px; }
.bk-article .another_category table th a {
  display: inline-block; max-width: calc(100% - 40px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  color: var(--bk-body); text-decoration: none; border: 0;
}
.bk-article .another_category table th a:hover {
  color: var(--bk-ink); text-decoration: underline; text-underline-offset: 3px;
}
.bk-article .another_category table th span { color: var(--bk-faint); font-size: 12px; }
.bk-article .another_category table td {
  width: 86px; text-align: right; white-space: nowrap;
  font-size: 12px; color: var(--bk-faint); vertical-align: middle;
}
@media (max-width: 640px) {
  .bk-article .another_category { padding: 14px 14px 2px; }
  .bk-article .another_category table td { width: 76px; }
}


/* =====================================================
   켄번즈 — 썸네일이 천천히 확대·축소되며 살아있는 느낌
   (modooilbo.com 방식: scale 1 → 1.1, 10s ease-in-out 무한)
   .bk-kb-run은 화면에 보일 때만 붙어서 오프스크린 애니메이션을 멈춘다
   ===================================================== */
@keyframes bk-kenburns {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
/* 기본으로 켜두고, 화면 밖일 때만 .bk-kb-off로 끈다
   (JS가 실패해도 애니메이션은 살아 있도록 fail-open) */
.bk-card-thumb img,
.bk-related-thumb img {
  will-change: transform;
  animation: bk-kenburns 10s ease-in-out infinite;
}
.bk-card-thumb img.bk-kb-off,
.bk-related-thumb img.bk-kb-off { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .bk-card-thumb img,
  .bk-related-thumb img { animation: none; }
}

/* =====================================================
   헤더 날씨 칩 (Open-Meteo, 키 없음)
   ===================================================== */
.bk-weather { position: relative; margin-right: 2px; }
.bk-weather[hidden] { display: none; }
.bk-weather-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 9px;
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius-btn);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--bk-body);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--bk-bg); cursor: pointer;
  transition: border-color .2s var(--bk-ease), background .2s var(--bk-ease);
}
.bk-weather-btn:hover { border-color: var(--bk-line-strong); background: var(--bk-bg-sub); }
.bk-weather-icon { display: inline-flex; font-size: 15px; line-height: 1; }
.bk-weather-icon svg { width: 100%; height: 100%; }
.bk-weather-place { color: var(--bk-faint); font-weight: 500; }
.bk-weather-caret { color: var(--bk-faint); flex: none; }

.bk-weather-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 130;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  min-width: 210px; padding: 6px;
  border: 1px solid var(--bk-line-strong); border-radius: var(--bk-radius-btn);
  background: var(--bk-bg); box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.bk-weather-menu[hidden] { display: none; }
.bk-weather-item {
  padding: 8px 4px; border: 0; border-radius: var(--bk-radius-btn);
  font: inherit; font-size: 13px; color: var(--bk-body);
  background: none; cursor: pointer; transition: background .15s var(--bk-ease);
}
.bk-weather-item:hover { background: var(--bk-bg-sub); }
.bk-weather-item-on { font-weight: 700; color: var(--bk-ink); background: var(--bk-bg-sub); }
@media (max-width: 720px) { .bk-weather-place { display: none; } }
@media (max-width: 560px) { .bk-weather { display: none; } }

/* =====================================================
   본문 이미지 — 마우스를 올렸을 때만 살짝 확대
   (figure에 잘라내기가 없으면 확대분이 문단을 덮으므로 overflow: hidden 필수)
   ===================================================== */
.bk-article figure.imageblock,
.bk-article .imageblock { overflow: hidden; }
.bk-article figure.imageblock img,
.bk-article .imageblock img { transition: transform .5s var(--bk-ease); }
@media (hover: hover) {
  .bk-article figure.imageblock:hover img,
  .bk-article .imageblock:hover img { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .bk-article figure.imageblock img,
  .bk-article .imageblock img { transition: none; }
  .bk-article figure.imageblock:hover img,
  .bk-article .imageblock:hover img { transform: none; }
}

/* =====================================================
   weather-fx 배경 연출이 본문을 덮지 않도록 콘텐츠를 위로 올린다
   (캔버스는 position:fixed z-index:0 — 헤더 100 / 드로어 110·120 / 위로가기 90은 그대로 위)
   ===================================================== */
.bk-main, .bk-footer { position: relative; z-index: 1; }

/* 날씨 메뉴 '내 위치' 항목 */
.bk-weather-item-gps { display: flex; align-items: center; gap: 6px; font-weight: 700; border-bottom: 1px solid var(--bk-line); }
.bk-weather-item-gps svg { color: var(--bk-accent); }