/* =====================================================================
   Bubble Space — Outer Space (Publish Edition)
   ---------------------------------------------------------------------
   Obsidian Publish용 테마. 볼트 루트의 `publish.css`로 동작한다(.obsidian/ 안 아님).
   원작: Emrie-Candera/Bubble-Space-Theme v1.6 (2022) 의 다크 "Outer Space" 룩을
   Publish DOM에 맞춰 이식했다. 데스크톱 앱 테마는 .obsidian/themes/Bubble Space/.

   Publish DOM 계약(실제 배포 테마 kepano/chad-bennett/selfire1 기준):
     - 루트: .published-container  (상태 클래스: has-navigation/has-graph/
       has-outline/is-readable-line-width/is-left-column-open)
     - 3컬럼: .site-body-left-column / -center-column / -right-column
     - 내비: .nav-view-outer 안의 .tree-item / .tree-item-self(.mod-collapsible=폴더)
             / .tree-item-inner(라벨). 앱의 nav-folder / nav-file 계열은 무효.
     - 본문: .publish-renderer > .markdown-preview-view > .markdown-preview-sizer,
             콘텐츠 루트는 .markdown-rendered. 읽기모드 선택자가 그대로 적용됨.
     - 다크/라이트: body.theme-dark / body.theme-light (앱과 동일).
       CSS에서 강제 다크 불가 → 라이트에도 같은 다크값을 깔아 토글 무력화.
   ---------------------------------------------------------------------
   구성
     0. 폰트 (@import — 반드시 최상단)
     1. 팔레트 토큰 (원작 Space 변수 이식)
     2. Obsidian 시맨틱 변수 매핑 (다크 강제)
     3. 사이트 레이아웃 / 배경
     4. 사이트 헤더 · 좌측 내비게이션 (그라데이션 폴더)
     5. 페이지 타이틀
     6. 마크다운 본문 (헤딩 무지개 / 인라인 / 링크)
     7. 리스트 · 체크박스 (골드 별 불릿)
     8. 블록쿼트 · 콜아웃
     9. 표 · 코드 · HR · 태그
    10. 백링크 · 그래프 · 검색 · 푸터 · 기타
   ===================================================================== */

/* =====================================================================
   0. 폰트 — Google Fonts. @import 규칙은 반드시 스타일시트 최상단에 있어야
   브라우저가 무시하지 않는다.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Lilita+One&family=Source+Code+Pro:wght@300;400;500;600&display=swap');

/* =====================================================================
   1. 팔레트 토큰 — 원작 "Space" 기본(Outer Space) 값.
   ===================================================================== */
:root {
  /* 폰트 */
  /* 폴백에서 cursive(Comic Sans류) 제거 — 폰트 로드 실패 시 깔끔한 sans-serif로 */
  --bs-font-body: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --bs-font-head: 'Lilita One', 'Trebuchet MS', sans-serif;
  --bs-font-code: 'Source Code Pro', ui-monospace, monospace;

  /* 배경 (딥스페이스) */
  --bs-bg1: rgb(1, 1, 8);
  --bs-bg2: rgba(8, 18, 41, 0.824);
  --bs-bg3: rgb(3, 5, 21);
  --bs-border: rgba(48, 100, 168, 0.486);

  /* 텍스트 */
  --bs-text: rgb(240, 240, 240);
  --bs-muted: rgb(135, 137, 150);
  --bs-accent: rgb(133, 72, 161);        /* purple2 */
  --bs-link: rgb(90, 171, 236);          /* 내부 링크(가독성 위해 밝은 블루) */
  --bs-link-ext: rgb(110, 190, 214);     /* 외부 링크(teal2) */
  --bs-link-hover: rgb(0, 204, 255);     /* 호버 시안 */
  --bs-hl-bg: rgb(94, 16, 68);

  /* 무지개 헤딩 (h1→h6) */
  --bs-h1: rgb(212, 93, 172);            /* 가독성 위해 원작보다 살짝 밝은 마젠타 */
  --bs-h2: rgb(140, 116, 230);
  --bs-h3: rgb(56, 176, 196);
  --bs-h4: rgb(70, 150, 236);
  --bs-h5: rgb(176, 96, 228);
  --bs-h6: rgb(220, 165, 70);

  /* 인라인 서식 */
  --bs-bold: rgb(231, 81, 174);          /* pink14 */
  --bs-italic: rgb(0, 204, 255);         /* blue9 */
  --bs-code: rgb(159, 168, 240);         /* purple3 보정 */
  --bs-comment: rgb(158, 131, 194);

  /* 불릿 / 체크박스 */
  --bs-bullet: "\2605";                  /* ★ */
  --bs-bullet-col: rgb(214, 165, 60);    /* 별 골드(가독성 보정) */
  --bs-check-col: rgb(214, 165, 60);
  --bs-uncheck: "\2606";                 /* ☆ */
  --bs-check: "\2605";                   /* ★ */

  /* 블록쿼트 */
  --bs-bq-border: rgba(167, 135, 241, 0.479);
  --bs-bq-top: #549bc4af;
  --bs-bq-left: #e7a7d9b9;
  --bs-bq-shadow: inset -4px -4px 4px -3px #06244bd0;

  /* 표 */
  --bs-th-bg: rgb(63, 8, 80);
  --bs-td-border: rgb(98, 86, 150);      /* 원작은 거의 검정 → 셀 경계 식별되도록 대비 보정 */
  --bs-tr1: rgba(26, 9, 43, 0.788);
  --bs-tr2: rgba(2, 12, 59, 0.637);
  --bs-tr3: rgba(2, 18, 51, 0.671);
  --bs-tr-hover: rgb(39, 5, 36);

  /* 태그 */
  --bs-tag-border: rgb(167, 125, 202);
  --bs-tag-col: rgb(245, 237, 242);
  --bs-tag-prefix: "\1F31F";             /* 🌟 */
  --bs-tag-hov1: rgb(43, 19, 87);
  --bs-tag-hov2: rgb(37, 13, 94);
  --bs-tag-hov3: rgb(9, 18, 70);

  /* HR */
  --bs-hr-con: "\1F31F";                 /* 🌟 */
  --bs-hr-col: rgb(0, 174, 255);

  /* 사이트/페이지 타이틀 그라데이션 */
  --bs-title1: rgb(130, 57, 226);
  --bs-title2: rgb(82, 236, 247);

  /* 내비게이션 그라데이션 폴더 (8단: 블루→퍼플→마젠타) */
  --bs-fg1: #0c4375;
  --bs-fg2: rgb(27, 68, 156);
  --bs-fg3: rgb(33, 35, 150);
  --bs-fg4: rgb(83, 32, 179);
  --bs-fg5: rgba(135, 36, 173, 0.836);
  --bs-fg6: rgba(133, 18, 117, 0.849);
  --bs-fg7: rgb(105, 17, 105);
  --bs-fg8: rgb(83, 16, 61);

  /* 상단 장식 GIF (원작은 파일탐색기 위 Planets.gif). 끄려면 값을 none 으로. */
  --bs-planets: url("https://raw.githubusercontent.com/Emrie-Candera/Bubble-Space-Theme/v1.6/theme%20image/Planets.gif");
}

/* =====================================================================
   2. Obsidian 시맨틱 변수 매핑 — 다크/라이트 양쪽에 동일한 다크값을 깔아
   "Outer Space" 룩을 강제한다(원작은 다크 전용). body 한정자까지 붙여
   Publish 기본 라이트 변수를 확실히 덮는다.
   ===================================================================== */
body.theme-dark,
body.theme-light,
.theme-dark,
.theme-light,
.published-container {
  color-scheme: dark;

  --background-primary: var(--bs-bg1);
  --background-primary-alt: var(--bs-bg3);
  --background-secondary: var(--bs-bg2);
  --background-secondary-alt: var(--bs-bg1);
  --background-modifier-border: var(--bs-border);
  --background-modifier-border-hover: var(--bs-accent);
  --background-modifier-cover: rgba(0, 0, 0, 0.7);

  --text-normal: var(--bs-text);
  --text-muted: var(--bs-muted);
  --text-faint: var(--bs-muted);
  --text-accent: var(--bs-link);
  --text-accent-hover: var(--bs-link-hover);
  --text-on-accent: white;
  --text-selection: var(--bs-hl-bg);
  --text-highlight-bg: var(--bs-hl-bg);

  --interactive-accent: var(--bs-accent);
  --interactive-accent-hover: var(--bs-link-hover);

  /* 폰트 */
  --font-text-theme: var(--bs-font-body);
  --font-text: var(--bs-font-body);
  --font-interface-theme: var(--bs-font-body);
  --font-interface: var(--bs-font-body);
  --font-monospace-theme: var(--bs-font-code);
  --font-monospace: var(--bs-font-code);

  /* 헤딩 */
  --h1-color: var(--bs-h1);
  --h2-color: var(--bs-h2);
  --h3-color: var(--bs-h3);
  --h4-color: var(--bs-h4);
  --h5-color: var(--bs-h5);
  --h6-color: var(--bs-h6);
  --h1-font: var(--bs-font-head);
  --h2-font: var(--bs-font-head);
  --h3-font: var(--bs-font-head);
  --h4-font: var(--bs-font-head);
  --h5-font: var(--bs-font-head);
  --h6-font: var(--bs-font-head);
  --heading-formatting: var(--bs-muted);

  /* 인라인 */
  --bold-color: var(--bs-bold);
  --bold-weight: 800;
  --italic-color: var(--bs-italic);
  --code-normal: var(--bs-code);
  --code-background: var(--bs-bg3);

  /* 링크 */
  --link-color: var(--bs-link);
  --link-color-hover: var(--bs-link-hover);
  --link-external-color: var(--bs-link-ext);
  --link-external-color-hover: var(--bs-link-hover);
  --link-unresolved-color: rgb(140, 141, 150);
  --link-unresolved-opacity: 1;

  /* 리스트 / HR / 블록쿼트 */
  --list-marker-color: var(--bs-bullet-col);
  --hr-color: var(--bs-hr-col);
  --hr-thickness: 2px;
  --blockquote-border-color: var(--bs-bq-border);
  --blockquote-background-color: transparent;
  --blockquote-color: var(--bs-text);

  /* 표 */
  --table-header-background: var(--bs-th-bg);
  --table-header-color: var(--bs-text);
  --table-border-color: var(--bs-td-border);
  --table-row-background-hover: var(--bs-tr-hover);
  --table-row-alt-background: var(--bs-tr2);

  /* 태그 */
  --tag-color: var(--bs-tag-col);
  --tag-background: transparent;
  --tag-border-color: var(--bs-tag-border);
  --tag-border-width: 1px;
  --tag-radius: 10px;

  /* 콜아웃 */
  --callout-border-width: 1px;
  --callout-border-opacity: 0.5;
  --callout-radius: 16px;
  --callout-padding: 12px 16px;
  --callout-blend-mode: normal;

  /* Publish 전용 사이드바 변수(있을 경우) */
  --sidebar-left-background: var(--bs-bg1);
  --sidebar-right-background: var(--bs-bg1);

  /* 스크롤바 */
  --scrollbar-thumb-bg: rgba(143, 96, 219, 0.4);
  --scrollbar-bg: transparent;
  --scrollbar-active-thumb-bg: rgba(143, 96, 219, 0.7);
}

/* Publish 전용 변수 — 테마 클래스(body)가 아니라 .published-container 에 두는 것이
   Publish의 권장 계약(레이아웃/폰트/타이틀). 색은 위 블록에서 이미 처리. */
.published-container {
  --page-title-font: var(--bs-font-head);
  --page-title-color: var(--bs-title2);
  --page-title-weight: 400;
  --page-title-line-height: 1.15;
  --site-name-font: var(--bs-font-head);
  --site-name-color: var(--bs-title2);
  --component-title-font: var(--bs-font-head);
  --nav-item-color: var(--bs-text);
  --nav-parent-item-color: rgb(253, 254, 255);
}

/* =====================================================================
   3. 사이트 레이아웃 / 배경 — 전면 딥스페이스.
   ===================================================================== */
body,
.published-container,
.site-body,
.render-container,
.site-body-left-column,
.site-body-center-column,
.site-body-right-column {
  background-color: var(--bs-bg1) !important;
  color: var(--bs-text);
}

body {
  font-family: var(--bs-font-body);
}

/* 본문 가독성 */
.published-container .markdown-preview-view,
.published-container .markdown-rendered {
  font-family: var(--bs-font-body);
  color: var(--bs-text);
  line-height: 1.7em;
}

/* 측면 컬럼은 살짝 흐리게 두고 호버 시 또렷하게(배포 테마 관용구) */
.site-body-left-column,
.site-body-right-column {
  border-color: var(--bs-border);
}

/* =====================================================================
   4. 사이트 헤더 · 좌측 내비게이션
   ===================================================================== */
/* 사이트 이름 — Lilita + 보라→시안 그라데이션 (원작 볼트명 스타일) */
.site-body-left-column-site-name,
.site-body-left-column .site-body-left-column-site-name {
  font-family: var(--bs-font-head) !important;
  letter-spacing: 0.5px;
  background: linear-gradient(120deg, var(--bs-title1), var(--bs-title2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  color: var(--bs-title2);
}

/* 좌측 내비 상단 Planets.gif 장식 (원작 파일탐색기 헤더 오마주) */
.nav-view-outer::before {
  content: "";
  display: block;
  height: 84px;
  margin: 2px 8px 10px;
  background: center / contain no-repeat var(--bs-planets);
  opacity: 0.95;
}

/* 모바일 헤더(햄버거) */
.site-header { background-color: var(--bs-bg1); }
.site-header .clickable-icon { color: var(--bs-text); }

/* 내비/아웃라인/검색 트리 라벨 (Publish는 .tree-item-* 구조) */
.nav-view-outer .tree-item-inner,
.outline-view-outer .tree-item-inner {
  color: var(--bs-text);
}
.nav-view-outer .tree-item-self,
.outline-view-outer .tree-item-self {
  border-radius: 10px;
}
.nav-view-outer .tree-item-self:hover,
.outline-view-outer .tree-item-self:hover {
  background-color: var(--bs-bg2);
}
.nav-view-outer .tree-item-self:hover .tree-item-inner,
.outline-view-outer .tree-item-self:hover .tree-item-inner {
  color: white;
}
/* 현재 페이지 행 */
.nav-view-outer .tree-item-self.mod-active,
.nav-view-outer .tree-item-self.is-active {
  background-color: var(--bs-accent) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--bs-link-hover);
}
.nav-view-outer .tree-item-self.mod-active .tree-item-inner,
.nav-view-outer .tree-item-self.is-active .tree-item-inner {
  color: white;
}
/* 폴더(접을 수 있는 행) 라벨은 굵게 */
.nav-view-outer .tree-item-self.mod-collapsible .tree-item-inner {
  font-weight: 700;
}

/* 그라데이션(이터러티브) 컬러 폴더 — 폴더 행(.mod-collapsible)만 코스믹 그라데이션
   알약으로 칠한다. 파일 행은 어둡게 두어 가독성 유지.
   ※ nth-child 방식은 파일/폴더가 형제로 섞이고 서브트리마다 인덱스가 리셋되어
     8단 순환이 깨진다(리뷰에서 확인). 그래서 위치가 아니라 "중첩 깊이"로 색을
     옮긴다 — .tree-item-children 는 중첩 폴더의 실제 컨테이너라 견고하다. */
.nav-view-outer .tree-item-self.mod-collapsible {
  background-image: linear-gradient(90deg, var(--bs-fg1), var(--bs-fg2) 28%, var(--bs-fg4) 60%, var(--bs-fg6));
}
.nav-view-outer .tree-item-children .tree-item-self.mod-collapsible {
  background-image: linear-gradient(90deg, var(--bs-fg3), var(--bs-fg5) 55%, var(--bs-fg7));
}
.nav-view-outer .tree-item-children .tree-item-children .tree-item-self.mod-collapsible {
  background-image: linear-gradient(90deg, var(--bs-fg5), var(--bs-fg7) 55%, var(--bs-fg8));
}
.nav-view-outer .tree-item-self.mod-collapsible:hover { filter: brightness(1.18); }

/* 폴더별 고정 색 (data-path) — 원작의 "폴더별 무지개"를 재현. 폴더 경로로 직접
   지정해 견고하다(파일 끼임·중첩 무관). 위→아래로 블루→퍼플→마젠타→와인 흐름.
   ※ 폴더 이름을 바꾸거나 새 폴더를 추가하면 그 폴더만 위의 기본 그라데이션으로
     표시된다 — 새 data-path 한 줄을 추가하면 색이 입혀진다. */
.nav-view-outer .tree-item-self[data-path="00_Meta"]       { background-image: linear-gradient(90deg, var(--bs-fg1), var(--bs-fg2)) !important; }
.nav-view-outer .tree-item-self[data-path="1NEWTOPICNOT"]  { background-image: linear-gradient(90deg, var(--bs-fg2), var(--bs-fg3)) !important; }
.nav-view-outer .tree-item-self[data-path="10_Sources"]    { background-image: linear-gradient(90deg, var(--bs-fg3), var(--bs-fg4)) !important; }
.nav-view-outer .tree-item-self[data-path="20_Entry"]      { background-image: linear-gradient(90deg, var(--bs-fg4), var(--bs-fg5)) !important; }
.nav-view-outer .tree-item-self[data-path="30_Topics"]     { background-image: linear-gradient(90deg, var(--bs-fg5), var(--bs-fg6)) !important; }
.nav-view-outer .tree-item-self[data-path="40_Evergreens"] { background-image: linear-gradient(90deg, var(--bs-fg6), var(--bs-fg7)) !important; }
.nav-view-outer .tree-item-self[data-path="50_Projects"]   { background-image: linear-gradient(90deg, var(--bs-fg7), var(--bs-fg8)) !important; }
.nav-view-outer .tree-item-self[data-path="80_Creations"]  { background-image: linear-gradient(90deg, var(--bs-fg8), var(--bs-fg6)) !important; }
.nav-view-outer .tree-item-self[data-path="Readwise"]      { background-image: linear-gradient(90deg, var(--bs-fg1), var(--bs-fg4)) !important; }

/* 컬러 폴더 위 글자는 항상 밝게 */
.nav-view-outer .tree-item-self.mod-collapsible .tree-item-inner { color: rgb(253, 254, 255); }

/* =====================================================================
   5. 페이지 타이틀
   Publish의 노트 제목은 본문 첫 H1로 렌더되어 6장 헤딩 규칙(무지개 h1 +
   Lilita)을 그대로 받는다. 별도 .page-header 가 보일 경우에도 동일 톤으로.
   브리틀한 nth-child 해킹은 의도적으로 쓰지 않는다.
   ===================================================================== */
.published-container .page-header,
.published-container h1.page-header,
.published-container .page-header h1,
.published-container .mod-header h1 {
  font-family: var(--bs-font-head) !important;
  font-weight: 400;
  letter-spacing: 1px;
  background: linear-gradient(120deg, var(--bs-title1), var(--bs-title2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  color: var(--bs-title2);
}

/* 노트 제목/인포박스가 `<s class="topic-title">`/`<s class="aside-in">` 처럼
   취소선 태그로 감싸져 있어 기본 line-through 가 그어진다 — 원작은 .topic-title/
   .aside-in 을 따로 스타일했었으나 그 CSS가 없으면 줄이 그대로 보인다. 제거. */
.published-container s.topic-title,
.published-container .topic-title,
.published-container s.aside-in,
.published-container .aside-in {
  text-decoration: none !important;
}

/* =====================================================================
   6. 마크다운 본문 — 헤딩(무지개) / 인라인 / 링크
   읽기모드와 동일 선택자가 Publish 본문에도 적용된다. 기본 CSS 특이도를
   이기기 위해 .published-container 로 스코프하고 핵심 색엔 !important.
   ===================================================================== */
.published-container .markdown-rendered h1,
.published-container .markdown-rendered h2,
.published-container .markdown-rendered h3,
.published-container .markdown-rendered h4,
.published-container .markdown-rendered h5,
.published-container .markdown-rendered h6 {
  font-family: var(--bs-font-head) !important;
  letter-spacing: 1px;
  line-height: 1.15em;
  margin-bottom: 0.3em;
  border: none;
}
.published-container .markdown-rendered h1 { color: var(--bs-h1) !important; font-size: 1.9em; }
.published-container .markdown-rendered h2 { color: var(--bs-h2) !important; font-size: 1.65em; }
.published-container .markdown-rendered h3 { color: var(--bs-h3) !important; font-size: 1.5em; }
.published-container .markdown-rendered h4 { color: var(--bs-h4) !important; font-size: 1.35em; }
.published-container .markdown-rendered h5 { color: var(--bs-h5) !important; font-size: 1.25em; }
.published-container .markdown-rendered h6 { color: var(--bs-h6) !important; font-size: 1.1em; }

/* 헤딩 내부 링크는 헤딩 색을 따라가고 밑줄 */
.published-container .markdown-rendered :is(h1,h2,h3,h4,h5,h6) a {
  color: inherit !important;
  text-decoration: underline;
}

/* 볼드 / 이탤릭 / 인라인 코드 / 하이라이트 */
.published-container .markdown-rendered strong { color: var(--bs-bold) !important; font-weight: 800; }
.published-container .markdown-rendered em { color: var(--bs-italic) !important; }
.published-container .markdown-rendered :not(pre) > code {
  color: var(--bs-code) !important;
  background: var(--bs-bg3);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}
.published-container .markdown-rendered mark {
  background-color: var(--bs-hl-bg) !important;
  color: var(--bs-text) !important;
  border-radius: 8px;
  padding: 0 4px;
}

/* 링크 — 내부 굵게, 호버 밑줄 */
.published-container .markdown-rendered a.internal-link {
  color: var(--bs-link) !important;
  text-decoration: none;
  font-weight: 700;
}
.published-container .markdown-rendered a.external-link {
  color: var(--bs-link-ext) !important;
  font-weight: 700;
}
.published-container .markdown-rendered a:hover { text-decoration: underline; }
/* 비존재(미생성) 노트 — 존재 노트(굵은 파랑)와 확실히 구분: 중립 회색 +
   점선 밑줄 + 약한 굵기로 "아직 없는 노트"임을 분명히 한다. */
.published-container .markdown-rendered a.internal-link.is-unresolved {
  opacity: 1;
  color: rgb(140, 141, 150) !important;
  font-weight: 500;
  text-decoration: underline dashed;
  text-decoration-color: rgba(140, 141, 150, 0.55);
  text-underline-offset: 2px;
}
.published-container .markdown-rendered a.internal-link.is-unresolved:hover {
  color: rgb(176, 178, 190) !important;
  text-decoration: underline dashed;
}

/* =====================================================================
   7. 리스트 · 체크박스 — 골드 별 불릿
   ===================================================================== */
.published-container .markdown-rendered ul { padding-inline-start: 22px; line-height: 1.7em; }
.published-container .markdown-rendered ul > li::marker {
  content: var(--bs-bullet);
  color: var(--bs-bullet-col);
  font-size: 0.85em;
}
.published-container .markdown-rendered ol > li::marker { color: var(--bs-bullet-col); }

/* 중첩 리스트(2단계+) 들여쓰기 축소 — 기본 레벨당 ~58px(ul 22 + li 36)는 과해서
   nested ul 패딩과 li 마진을 줄여 레벨당 ~30px로. 1단계는 그대로. */
.published-container .markdown-rendered ul ul,
.published-container .markdown-rendered ol ol,
.published-container .markdown-rendered ul ol,
.published-container .markdown-rendered ol ul { padding-inline-start: 8px; }
.published-container .markdown-rendered ul ul li,
.published-container .markdown-rendered ol ol li,
.published-container .markdown-rendered ul ol li,
.published-container .markdown-rendered ol ul li { margin-inline-start: 22px; }

/* 체크박스 — ☆/★ 글리프로 치환 */
.published-container .markdown-rendered li.task-list-item::marker { content: none; }
.published-container .markdown-rendered .task-list-item-checkbox {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 1.1em;
  height: 1.1em;
  border: none;
  background: transparent;
  margin-inline-end: 6px;
  vertical-align: middle;
}
.published-container .markdown-rendered .task-list-item-checkbox::before {
  content: var(--bs-uncheck);
  position: absolute;
  left: 0;
  top: -0.15em;
  font-size: 1.1em;
  color: var(--bs-check-col);
}
.published-container .markdown-rendered .task-list-item-checkbox:checked::before { content: var(--bs-check); }

/* =====================================================================
   8. 블록쿼트 · 콜아웃
   ===================================================================== */
.published-container .markdown-rendered blockquote {
  border: 1px solid var(--bs-bq-border);
  border-top: 2px solid var(--bs-bq-top);
  border-left: 1px solid var(--bs-bq-left);
  box-shadow: var(--bs-bq-shadow);
  border-radius: 20px;
  background: transparent;
  font-family: var(--bs-font-code);
  font-size: 0.92em;
  padding: 10px 16px;
  margin-inline: 0;
}
.published-container .markdown-rendered blockquote p { margin: 0.3em 0; }
/* 인용구 안 제목 바로 뒤 문단이 제목과 붙지/겹치지 않게 간격 확보 */
.published-container .markdown-rendered blockquote :is(h1, h2, h3, h4, h5, h6) + p { margin-top: 0.8em; }

/* 콜아웃 — 스페이시 반투명 + 보라 테두리 */
.published-container .markdown-rendered .callout {
  background-color: var(--bs-bg2);
  border: 1px solid var(--bs-bq-border);
  border-radius: 16px;
  box-shadow: var(--bs-bq-shadow);
  mix-blend-mode: normal;
}
.published-container .markdown-rendered .callout-title { font-family: var(--bs-font-head); letter-spacing: 0.5px; }

/* =====================================================================
   9. 표 · 코드블록 · HR · 태그
   ===================================================================== */
.published-container .markdown-rendered table {
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.9em;
}
.published-container .markdown-rendered th {
  background-color: var(--bs-th-bg) !important;
  color: var(--bs-text) !important;
  border: 1px solid var(--bs-th-bg) !important;
  font-weight: 500;
}
.published-container .markdown-rendered td { border: 1px solid var(--bs-td-border) !important; }
.published-container .markdown-rendered tbody tr:nth-child(3n+1) { background-color: var(--bs-tr1) !important; }
.published-container .markdown-rendered tbody tr:nth-child(3n+2) { background-color: var(--bs-tr2) !important; }
.published-container .markdown-rendered tbody tr:nth-child(3n)   { background-color: var(--bs-tr3) !important; }
.published-container .markdown-rendered tbody tr:hover { background-color: var(--bs-tr-hover) !important; }
/* 넓은 표는 새 Publish 빌드의 .table-wrapper 안에서 가로 스크롤 */
.published-container .markdown-rendered .table-wrapper { overflow-x: auto; }

/* 코드블록 (Publish는 Prism 사용) */
.published-container .markdown-rendered pre {
  background-color: var(--bs-bg3) !important;
  border: 1px solid var(--bs-border);
  border-radius: 12px;
}
.published-container .markdown-rendered pre code { color: var(--bs-text); background: transparent !important; }
/* Prism 토큰 색을 팔레트에 맞춤 */
.published-container .markdown-rendered .token.comment { color: var(--bs-comment); }
.published-container .markdown-rendered .token.keyword,
.published-container .markdown-rendered .token.tag { color: var(--bs-bold); }
.published-container .markdown-rendered .token.string { color: var(--bs-link-ext); }
.published-container .markdown-rendered .token.function { color: var(--bs-h4); }
.published-container .markdown-rendered .token.number,
.published-container .markdown-rendered .token.boolean { color: var(--bs-h6); }

/* HR — 가운데 🌟 배지 (원작 별 오마주) */
.published-container .markdown-rendered hr {
  border: none;
  border-top: 2px solid var(--bs-border);
  position: relative;
  overflow: visible;
  margin: 2em 0;
}
.published-container .markdown-rendered hr::after {
  content: var(--bs-hr-con);
  color: var(--bs-hr-col);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 0.6rem;
  background-color: var(--bs-bg1);
  font-size: 0.9em;
}

/* 태그 — 🌟 접두 + 둥근 알약 + 호버 그라데이션. :not(.token)로 Prism 회피. */
.published-container .markdown-rendered .tag:not(.token) {
  border: 1px solid var(--bs-tag-border);
  color: var(--bs-tag-col) !important;
  background: transparent;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 0.8em;
  text-decoration: none;
}
.published-container .markdown-rendered .tag:not(.token)::before {
  content: var(--bs-tag-prefix);
  margin-inline-end: 2px;
  font-size: 0.85em;
}
.published-container .markdown-rendered .tag:not(.token):hover {
  background: linear-gradient(90deg, var(--bs-tag-hov1) 5%, var(--bs-tag-hov2) 18%, var(--bs-tag-hov3) 45%);
  color: var(--bs-text) !important;
}

/* 임베드/트랜스클루전 */
.published-container .markdown-rendered .markdown-embed {
  border-left: 2px solid var(--bs-bq-border);
  border-radius: 12px;
}

/* =====================================================================
   10. 백링크 · 그래프 · 검색 · 푸터 · 기타
   ===================================================================== */
/* 섹션 헤더("Links to this page" / "Interactive graph") */
.published-container .published-section-header {
  font-family: var(--bs-font-head);
  letter-spacing: 0.5px;
  color: var(--bs-text);
}

/* 백링크 박스 */
.published-container .backlink-items-container,
.published-container .backlinks {
  background-color: var(--bs-bg1);
  color: var(--bs-text);
  border-color: var(--bs-border);
}

/* 검색 입력 */
.search-view-outer input,
.search-view-container input,
.published-container input[type="text"],
.published-container input[type="search"] {
  background-color: var(--bs-bg3);
  color: var(--bs-text);
  border: 1px solid var(--bs-border);
  border-radius: 12px;
}

/* 그래프 뷰 */
.graph-view.color-fill { color: var(--bs-accent); }
.graph-view.color-line { color: rgba(139, 155, 241, 0.45); }
.graph-view.color-text { color: var(--bs-text); }
.graph-view.color-circle { color: var(--bs-text); }
.graph-view.color-fill-unresolved { color: var(--bs-muted); }
.graph-view.color-fill-highlight { color: rgb(184, 121, 28); }
.graph-view.color-line-highlight { color: var(--bs-link-hover); }

/* 코드 카피 버튼 */
.published-container .copy-code-button {
  background: var(--bs-bg2);
  color: var(--bs-text);
  border-radius: 8px;
}

/* Publish 푸터 — 사용자 요청으로 숨김 ("Published with Obsidian") */
.site-footer { display: none !important; }

/* 스크롤바 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background-color: rgba(143, 96, 219, 0.4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(143, 96, 219, 0.7); }
::-webkit-scrollbar-track { background: transparent; }

/* 모바일 드로어 뒤 딤 오버레이 */
.nav-backdrop { background-color: rgba(0, 0, 0, 0.6); }

/* =====================================================================
   11. 모바일 (≤1000px) — Publish는 좌측 컬럼을 transform 드로어로 전환한다.
   여기선 색만 바꿔 드로어 동작은 건드리지 않되, 상단 Planets 배너만 숨겨
   좁은 화면의 세로 공간을 아낀다.
   ===================================================================== */
@media screen and (max-width: 1000px) {
  .nav-view-outer::before { display: none; }
}