/* =============================================================================
   publish.css — Obsidian Publish 용 커스텀 스타일
   -----------------------------------------------------------------------------
   내 Obsidian 로컬 환경(Baseline 테마 by Alexis C)에 적용된 모습을 Publish 에
   재현합니다. Publish 는 Style Settings 플러그인을 실행하지 못하므로, 아래 설정을
   CSS 에 직접 "구워 넣었습니다(baked-in)".

     · 테마      : Baseline
     · 컬러 스킴 : Sanctum  (light: sanctum-light / dark: sanctum-dark)
     · 배경 대비 : light = tonal  /  dark = black
     · 강조색    : light = hsl(24,90%,61%) 오렌지 / dark = hsl(115,22%,49%) 그린
     · 밀도 0.75 · 모서리반경 0.5 · 아이콘 stroke 0.75
     · 제목 크기 : h1 2em·600 / h2 1.75em / h3 1.5em / h4 1.25em
     · 인용구    : edge(좌측 강조선) 스타일
     · 폰트      : LXGW WenKai KR (전역)

   설치: 이 파일을 Vault 최상위(루트)에 두고 Obsidian Publish 에서 게시하면
         자동으로 적용됩니다.  (파일명은 반드시 publish.css)
   ============================================================================= */


/* =============================================================================
   1. 폰트 — LXGW WenKai KR  (https://github.com/lxgw/LxgwWenkaiKR)
   -----------------------------------------------------------------------------
   KR(한글) 변형은 공식 woff2 웹폰트가 없어 jsDelivr 가 GitHub 저장소의 TTF 를
   그대로 서빙합니다. 한글 11,172자 전체를 담은 폰트라 용량이 큽니다(weight당 ≈13MB).
   font-display:swap 으로 비차단 로딩 → 먼저 시스템 한글 폰트로 보이다가 교체됩니다.
   local() 을 먼저 두어, 폰트가 설치된 기기(내 컴퓨터 등)는 다운로드를 건너뜁니다.

   ※ 용량을 줄이고 싶다면 이 파일 하단의 "폰트 경량화" 메모를 참고하세요.
   ============================================================================= */

/* Regular(400) — 본문 */
@font-face {
  font-family: "LXGW WenKai KR";
  font-style: normal;
  font-weight: 100 450;            /* Light~Regular 요청 → Regular 파일 */
  font-display: swap;
  src: local("LXGW WenKai KR"),
       url("https://cdn.jsdelivr.net/gh/lxgw/LxgwWenkaiKR@v0.901/fonts/TTF/LXGWWenKaiKR-Regular.ttf") format("truetype");
}

/* Medium(500) — 굵은 글씨 · 제목. CJK 는 가짜 볼드가 보기 나빠 Medium 으로 매핑 */
@font-face {
  font-family: "LXGW WenKai KR";
  font-style: normal;
  font-weight: 451 900;            /* Medium~Bold 요청 → Medium 파일 */
  font-display: swap;
  src: local("LXGW WenKai KR Medium"), local("LXGW WenKai KR"),
       url("https://cdn.jsdelivr.net/gh/lxgw/LxgwWenkaiKR@v0.901/fonts/TTF/LXGWWenKaiKR-Medium.ttf") format("truetype");
}

/* (선택) 코드용 고정폭 한글 폰트. 기본은 시스템 monospace 를 쓰며, 아래 주석을
   해제하면 코드 블록의 한글도 WenKai 고정폭으로 보입니다. (≈9MB 추가 다운로드)
@font-face {
  font-family: "LXGW WenKai Mono KR";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: local("LXGW WenKai Mono KR"),
       url("https://cdn.jsdelivr.net/gh/lxgw/LxgwWenkaiKR@v0.901/fonts/TTF/LXGWWenKaiMonoKR-Regular.ttf") format("truetype");
}
*/

:root,
body {
  /* 본문/UI 폰트 스택. 로딩 전엔 시스템 한글 폰트로 자연스럽게 대체됩니다. */
  --font-kr:
    "LXGW WenKai KR", "LXGW WenKai",
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard Variable", "Pretendard", "Malgun Gothic", "Noto Sans KR",
    sans-serif;
  --font-mono:
    "LXGW WenKai Mono KR", ui-monospace, SFMono-Regular, "SF Mono",
    "JetBrains Mono", Menlo, Consolas, "LXGW WenKai KR", monospace;

  /* Obsidian / Publish 가 참조하는 폰트 변수를 모두 KR 로 지정 */
  --font-text-theme: var(--font-kr);
  --font-interface-theme: var(--font-kr);
  --font-monospace-theme: var(--font-mono);
  --font-text: var(--font-kr);
  --font-interface: var(--font-kr);
  --font-monospace: var(--font-mono);
  --default-font: var(--font-kr);
}

/* 전역 강제 적용 — 본문·제목·네비게이션·검색·메뉴까지 한 번에 */
body,
input, button, select, textarea,
.markdown-preview-view, .markdown-rendered, .inline-title,
.site-name, .site-body, .nav-file-title, .nav-folder-title,
.tree-item, .menu, .suggestion-item, .search-result-file-title,
.graph-view, .mod-root {
  font-family: var(--font-kr) !important;
}

code, kbd, pre, samp,
.markdown-rendered code, .markdown-rendered pre,
.cm-inline-code, .HyperMD-codeblock {
  font-family: var(--font-mono) !important;
}


/* =============================================================================
   2. 컬러 스킴 — Sanctum  (palette → light/dark 역할 매핑)
   ============================================================================= */

/* 2-1. 팔레트 (라이트·다크 공통) ------------------------------------------- */
body {
  --white:   253, 254, 254;
  --gray-10: 244, 244, 240;
  --gray-20: 226, 224, 220;
  --gray-30: 199, 197, 194;
  --gray-40: 169, 168, 165;
  --gray-50: 142, 140, 139;
  --gray-60: 112, 110, 109;
  --gray-70:  84,  81,  81;
  --gray-80:  58,  56,  56;
  --gray-90:  38,  38,  37;
  --gray-100: 22,  22,  22;
  --black:     0,   0,   0;

  /* 강조 색상(콜아웃·태그·그래프 등) */
  --color-pink-rgb:   235,  86, 115;
  --color-red-rgb:    195,  65,  40;
  --color-orange-rgb: 245, 139,  66;
  --color-yellow-rgb: 243, 189,  79;
  --color-green-rgb:  102, 152,  97;
  --color-blue-rgb:    83, 111, 157;
  --color-cyan-rgb:    99, 149, 156;
  --color-purple-rgb: 165, 119, 218;

  /* 강조색에서 파생되는 링크/인터랙티브 색 (모드별 accent 변수를 따라감) */
  --link-color:              hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --link-color-hover:        hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 8%));
  --link-unresolved-color:   var(--text-muted);
  --text-accent:             hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --text-accent-hover:       var(--link-color-hover);
  --interactive-accent:      hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --interactive-accent-hover:var(--link-color-hover);
  --tag-color:               hsl(var(--accent-h), var(--accent-s), var(--accent-l));
}

/* 2-2. 라이트 모드 (sanctum-light + contrast=tonal) ------------------------ */
body {
  --background-primary:             rgb(var(--gray-10));      /* tonal: 따뜻한 종이색 */
  --background-primary-alt:         rgba(var(--gray-20), .5);
  --background-secondary:           rgb(var(--gray-10));
  --background-secondary-alt:       rgb(var(--gray-20));
  --background-modifier-hover:      rgba(var(--gray-50), .12);
  --background-modifier-border:     rgb(var(--gray-20));
  --background-modifier-border-hover:rgb(var(--gray-30));
  --background-modifier-border-focus:rgb(var(--gray-30));
  --interactive-normal:             rgb(var(--white));
  --interactive-hover:              rgb(var(--gray-10));
  --text-normal:                    rgb(var(--gray-100));
  --text-muted:                     rgb(var(--gray-70));
  --text-faint:                     rgb(var(--gray-40));
  --text-on-accent:                 rgb(var(--white));

  --accent-h: 24; --accent-s: 90%; --accent-l: 61%;          /* 오렌지 */

  /* 코드/카드용 미세 대비 surface (페이지가 gray-10 이라 별도 톤 부여) */
  --surface-raised: rgba(var(--gray-60), .08);

  --color-base-00: rgb(var(--white));
  --color-base-05: rgb(var(--gray-10));
  --color-base-10: rgb(var(--gray-20));
  --color-base-20: rgb(var(--gray-30));
  --color-base-25: rgb(var(--gray-40));
  --color-base-30: rgb(var(--gray-40));
  --color-base-35: rgb(var(--gray-50));
  --color-base-40: rgb(var(--gray-50));
  --color-base-50: rgb(var(--gray-60));
  --color-base-60: rgb(var(--gray-70));
  --color-base-70: rgb(var(--gray-80));
  --color-base-100:rgb(var(--gray-100));
}

/* 2-3. 다크 모드 (sanctum-dark + contrast=black) --------------------------- */
body.theme-dark,
.theme-dark body {
  --background-primary:             #000;                     /* black contrast */
  --background-primary-alt:         rgb(var(--gray-100));
  --background-secondary:           #000;
  --background-secondary-alt:       rgb(var(--gray-90));
  --background-modifier-hover:      rgba(255, 255, 255, .07);
  --background-modifier-border:     rgb(var(--gray-80));
  --background-modifier-border-hover:rgb(var(--gray-70));
  --background-modifier-border-focus:rgb(var(--gray-70));
  --interactive-normal:             rgb(var(--gray-90));
  --interactive-hover:              rgba(var(--gray-80), .5);
  --text-normal:                    rgb(var(--gray-10));
  --text-muted:                     rgb(var(--gray-30));
  --text-faint:                     rgb(var(--gray-60));
  --text-on-accent:                 rgb(var(--gray-10));

  --accent-h: 115; --accent-s: 22%; --accent-l: 49%;         /* 세이지 그린 */

  --surface-raised: rgb(var(--gray-100));                     /* 검정 위 살짝 띄운 면 */

  --color-base-00: #000;
  --color-base-05: rgb(var(--gray-100));
  --color-base-10: rgb(var(--gray-90));
  --color-base-20: rgb(var(--gray-80));
  --color-base-25: rgb(var(--gray-80));
  --color-base-30: rgb(var(--gray-70));
  --color-base-35: rgb(var(--gray-70));
  --color-base-40: rgb(var(--gray-60));
  --color-base-50: rgb(var(--gray-50));
  --color-base-60: rgb(var(--gray-40));
  --color-base-70: rgb(var(--gray-30));
  --color-base-100:rgb(var(--gray-10));
}

/* 전체 배경/글자색 반영 */
body,
.published-container,
.site-body {
  background-color: var(--background-primary);
  color: var(--text-normal);
}


/* =============================================================================
   3. 디자인 토큰 — 모서리 반경(0.5) · 밀도(0.75)
   ============================================================================= */
body {
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
  --radius-xl: 12px;
}


/* =============================================================================
   4. 본문 타이포그래피 (reading view)
   ============================================================================= */
.markdown-preview-view,
.markdown-rendered {
  font-size: 1.0625rem;          /* ≈17px */
  line-height: 1.75;             /* WenKai + 한글에 넉넉한 행간 */
  color: var(--text-normal);
  --file-line-width: 46rem;
  letter-spacing: .005em;
}

/* 읽기 좋은 본문 폭 + 가운데 정렬 */
.markdown-preview-sizer,
.markdown-preview-view .markdown-preview-sizer {
  max-width: var(--file-line-width);
  margin-inline: auto;
}

/* 문단/리스트 간격 — 밀도 0.75 반영(약간 촘촘하게) */
.markdown-rendered p { margin: .9em 0; }
.markdown-rendered li { margin: .2em 0; }
.markdown-rendered li > p { margin: .35em 0; }
.markdown-rendered ul,
.markdown-rendered ol { padding-inline-start: 1.6em; }

/* 4-1. 제목 (Style Settings 값 그대로) ------------------------------------- */
.markdown-rendered h1, .inline-title { font-size: 2em;     font-weight: 600; line-height: 1.25; }
.markdown-rendered h2 { font-size: 1.75em; font-weight: 600; line-height: 1.3; }
.markdown-rendered h3 { font-size: 1.5em;  font-weight: 600; line-height: 1.35; }
.markdown-rendered h4 { font-size: 1.25em; font-weight: 600; line-height: 1.4; }
.markdown-rendered h5 { font-size: 1.0625em; font-weight: 600; }
.markdown-rendered h6 { font-size: 1em; font-weight: 600; color: var(--text-muted); }

.markdown-rendered :is(h1,h2,h3,h4,h5,h6) {
  color: var(--text-normal);
  margin: 1.6em 0 .6em;
}
.markdown-rendered :is(h1,h2):first-child,
.inline-title { margin-top: .2em; }
.inline-title { color: var(--text-normal); margin-bottom: .1em; }


/* =============================================================================
   5. 콘텐츠 요소
   ============================================================================= */

/* 5-1. 링크 — 강조색 + 은은한 밑줄 ---------------------------------------- */
.markdown-rendered a,
.markdown-rendered a.internal-link {
  color: var(--link-color);
  text-decoration: none;
  border-bottom: 1px solid hsla(var(--accent-h), var(--accent-s), var(--accent-l), .35);
  transition: border-color .12s ease, color .12s ease;
}
.markdown-rendered a:hover {
  color: var(--link-color-hover);
  border-bottom-color: var(--link-color-hover);
}
.markdown-rendered a.internal-link.is-unresolved {
  color: var(--text-muted);
  border-bottom-style: dashed;
}

/* 5-2. 인용구 — edge(좌측 강조선) 스타일 ---------------------------------- */
.markdown-rendered blockquote {
  margin-inline: 0;
  padding: .25em 0 .25em 1.1em;
  border: none;
  border-left: 3px solid hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-style: normal;
}
.markdown-rendered blockquote p { margin: .35em 0; }

/* 5-3. 콜아웃 — Sanctum 색상으로 자동 틴트 -------------------------------- */
.markdown-rendered .callout {
  --callout-radius: var(--radius-m);
  border: 1px solid rgba(var(--callout-color), .22);
  border-left: 3px solid rgb(var(--callout-color));
  border-radius: var(--radius-m);
  background: rgba(var(--callout-color), .07);
  padding: .7em 1em;
  mix-blend-mode: normal;
}
.markdown-rendered .callout-title { font-weight: 600; padding: 0; }
.markdown-rendered .callout-title-inner { color: var(--text-normal); }

/* 5-4. 코드 -------------------------------------------------------------- */
.markdown-rendered :not(pre) > code {
  background: var(--surface-raised);
  color: var(--text-normal);
  padding: .12em .4em;
  border-radius: var(--radius-s);
  font-size: .88em;
}
.markdown-rendered pre {
  background: var(--surface-raised);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: .85em 1em;
  line-height: 1.55;
}
.markdown-rendered pre > code {
  background: transparent;
  padding: 0;
  font-size: .9em;
}

/* Baseline 라이트 코드 하이라이트(One Light 계열) */
body {
  --code-normal:      #383a42;
  --code-comment:     #a6a6a6;
  --code-function:    #b76b02;
  --code-keyword:     #e45749;
  --code-property:    #62afef;
  --code-string:      #0d97b3;
  --code-tag:         #e45749;
  --code-value:       #a626a4;
  --code-punctuation: #383a42;
}
body.theme-dark,
.theme-dark body {
  --code-normal:      #abb2bf;
  --code-comment:     #6b7280;
  --code-function:    #e5c07b;
  --code-keyword:     #c678dd;
  --code-property:    #61afef;
  --code-string:      #98c379;
  --code-tag:         #e06c75;
  --code-value:       #d19a66;
  --code-punctuation: #abb2bf;
}

/* 5-5. 표 -------------------------------------------------------------- */
.markdown-rendered table {
  border-collapse: collapse;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.markdown-rendered th,
.markdown-rendered td {
  border: 1px solid var(--background-modifier-border);
  padding: .45em .75em;
}
.markdown-rendered thead th {
  background: var(--background-secondary-alt);
  font-weight: 600;
}
.markdown-rendered tbody tr:nth-child(even) {
  background: rgba(var(--gray-60), .04);
}

/* 5-6. 기타 ------------------------------------------------------------- */
.markdown-rendered hr {
  border: none;
  border-top: 1px solid var(--background-modifier-border);
  margin: 2em 0;
}
.markdown-rendered img,
.markdown-rendered video {
  border-radius: var(--radius-l);
}
.markdown-rendered mark {
  background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .22);
  color: inherit;
  border-radius: 3px;
  padding: 0 .15em;
}
.markdown-rendered .tag {
  background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .12);
  color: var(--text-accent);
  border: none;
  border-radius: 999px;
  padding: .05em .6em;
  font-size: .82em;
  text-decoration: none;
}
.markdown-rendered strong { font-weight: 600; }


/* =============================================================================
   6. Publish 레이아웃 (사이드바·네비게이션·검색)
   ============================================================================= */
.site-body-left-column,
.site-body-right-column {
  background: var(--background-secondary);
  border-color: var(--background-modifier-border);
}

.site-name {
  font-weight: 600;
  color: var(--text-normal);
  letter-spacing: .01em;
}

/* 네비게이션 항목 — nav-item-subtle */
.nav-file-title,
.nav-folder-title {
  border-radius: var(--radius-s);
  color: var(--text-muted);
  transition: background-color .1s ease, color .1s ease;
}
.nav-file-title:hover,
.nav-folder-title:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.nav-file-title.is-active,
.tree-item-self.is-active,
.tree-item-self.is-active .tree-item-inner {
  background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .12);
  color: var(--text-normal);
  font-weight: 600;
}

/* 네비게이션 액션 가운데 정렬 — nav-action-center */
.site-body-left-column .nav-buttons-container {
  justify-content: center;
}

/* 검색 입력창 */
.search-input-container input,
input[type="search"] {
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  color: var(--text-normal);
}
.search-input-container input:focus {
  border-color: var(--background-modifier-border-focus);
}

/* 우측 칼럼(목차·백링크·그래프) */
.outline-view-item:hover,
.backlink-pane .tree-item-self:hover {
  background: var(--background-modifier-hover);
  border-radius: var(--radius-s);
}

/* 스크롤바 — 은은하게 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--gray-50), .35);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--gray-50), .55); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }


/* =============================================================================
   ★ 폰트 경량화 메모 (선택)
   -----------------------------------------------------------------------------
   현재는 jsDelivr 가 KR 폰트 TTF(weight당 ≈13MB)를 통째로 제공합니다. 더 빠른
   로딩을 원하면 두 가지 방법이 있습니다.

   (A) Regular 한 가지만 사용  ── 위 Medium @font-face 블록을 지우면 됩니다.
       (굵은 글씨는 브라우저가 합성 → CJK 품질은 약간 떨어짐)

   (B) 직접 서브셋(권장)  ── 실제 사용하는 글자만 추린 woff2 를 만들어 Vault 에
       올리고 경로만 바꿔주면 수십 MB → 수백 KB 로 줄어듭니다.
         pip install fonttools brotli
         pyftsubset LXGWWenKaiKR-Regular.ttf \
           --unicodes="U+AC00-D7A3,U+0000-00FF,U+3000-303F,U+FF00-FFEF,U+4E00-9FFF" \
           --flavor=woff2 --output-file=LxgwKR-subset.woff2
       (한글 음절 U+AC00–D7A3 + 라틴 + 한중 부호 + CJK 한자 일부)
       만든 woff2 를 Vault 에 두고 위 @font-face 의 url() 을 "LxgwKR-subset.woff2"
       (상대경로)로 교체하세요. Publish 는 Vault 의 파일을 그대로 서빙합니다.
   ============================================================================= */