/* =============================================================================

   Minimal for Obsidian Publish
   ---------------------------------------------------------------------------
   Adapted from the Minimal theme by @kepano (https://github.com/kepano/obsidian-minimal)
   to match this vault's settings:
     - Light scheme : minimal-things-light  (blue accent)
     - Dark scheme  : minimal-default-dark   (neutral gray)
     - Font         : LXGW WenKai KR, 16px body / 13px small, 40rem line width
     - Internal & external links underlined, borders on

   NOTE: This is an *adaptation*, not a 1:1 copy of theme.css (8,800 lines).
   The full Minimal theme styles the Obsidian app UI (sidebars, tabs, editor),
   none of which exists on Publish. This file reproduces Minimal's design
   tokens (colors, type, spacing) and maps them onto the Publish DOM
   (.published-container, .markdown-preview-view, .site-body, nav, etc.).

   Place this file as `publish.css` in the vault root — Obsidian Publish picks
   it up automatically.

============================================================================= */

/* -----------------------------------------------------------------------------
   Web font — LXGW WenKai KR  (https://github.com/lxgw/LxgwWenkaiKR)
   -----------------------------------------------------------------------------
   The real Korean fork, served from the repo's committed TTFs via jsDelivr
   (pinned to tag v0.901 for stable CDN caching, CORS-enabled).

   ⚠️ Size: these are full, un-subsetted CJK fonts (~14 MB each weight). We load
   only Regular (400) + Medium (500/bold) + a Mono for code to keep it as light
   as practical, with `font-display: swap` so text shows instantly in a system
   font while the webfont streams in. For a much lighter site, self-host
   subsetted .woff2 files (e.g. via pyftsubset/fontTools) and swap the src URLs.
-------------------------------------------------------------------------------*/
@font-face {
  font-family: "LXGW WenKai KR";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/lxgw/LxgwWenkaiKR@v0.901/fonts/TTF/LXGWWenKaiKR-Light.ttf") format("truetype");
}
@font-face {
  font-family: "LXGW WenKai KR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/lxgw/LxgwWenkaiKR@v0.901/fonts/TTF/LXGWWenKaiKR-Regular.ttf") format("truetype");
}
/* The KR font has no 700 weight; map all bold/heading weights (500–700) to Medium */
@font-face {
  font-family: "LXGW WenKai KR";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/lxgw/LxgwWenkaiKR@v0.901/fonts/TTF/LXGWWenKaiKR-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "LXGW WenKai Mono KR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/lxgw/LxgwWenkaiKR@v0.901/fonts/TTF/LXGWWenKaiMonoKR-Regular.ttf") format("truetype");
}

/* =============================================================================
   1. DESIGN TOKENS  (from Minimal)
============================================================================= */

body {
  /* Type */
  --font-text-theme: "LXGW WenKai KR", "Apple SD Gothic Neo", "Pretendard",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-interface-theme: var(--font-text-theme);
  --font-monospace-theme: "LXGW WenKai Mono KR", "SFMono-Regular",
    "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --font-text: var(--font-text-theme);
  --font-text-size: 16px;
  --font-small: 13px;
  --font-smaller: 12px;
  --font-smallest: 11px;
  --font-ui-small: 13px;

  /* Line measure */
  --line-width: 40rem;
  --line-width-wide: 50rem;
  --max-width: 88%;
  --line-height: 1.5;
  --line-height-normal: 1.5;
  --line-height-tight: 1.3;

  /* Headings — Minimal's understated scale */
  --h1-size: 1.8em;
  --h2-size: 1.4em;
  --h3-size: 1.15em;
  --h4-size: 1em;
  --h5-size: 0.9em;
  --h6-size: 0.85em;
  --h1-weight: 600;
  --h2-weight: 600;
  --h3-weight: 500;
  --h4-weight: 500;
  --h5-weight: 500;
  --h6-weight: 400;
  --bold-weight: 600;

  /* Spacing */
  --p-spacing: 1rem;
  --heading-spacing: 2.4em;
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 10px;
  --border-width: 1px;

  /* Shared accent colors (Minimal "things" palette) */
  --color-red:    #FF306C;
  --color-orange: #ff9502;
  --color-yellow: #FFD500;
  --color-green:  #4BBF5E;
  --color-cyan:   #49AEA4;
  --color-blue:   #1b61c2;
  --color-purple: #b051de;
  --color-pink:   #ff2e55;
}

/* ---- LIGHT : minimal-things-light --------------------------------------- */
body,
body.theme-light {
  --bg1: #ffffff;
  --bg2: #f5f6f8;
  --bg3: rgba(162, 177, 187, 0.25);
  --ui1: #eef0f4;
  --ui2: #d8dadd;
  --ui3: #c1c3c6;
  --tx1: #26272b;
  --tx2: #7d7f84;
  --tx3: #a9abb0;
  --tx4: #5c5c5c;
  --ax1: hsl(215, 76%, 43%);
  --ax2: hsl(215, 76%, 35%);
  --ax3: hsl(215, 76%, 49%);
  --hl1: #cae2ff;
  --hl2: rgba(255, 225, 0, 0.5);
  --sp1: #ffffff;
}

/* ---- DARK : minimal-default-dark ---------------------------------------- */
body.theme-dark {
  --bg1: #262626;            /* hsl(0,0%,15%)  */
  --bg2: #212121;            /* hsl(0,0%,13%)  */
  --bg3: rgba(140, 140, 140, 0.12);
  --ui1: #363636;            /* hsl(0,0%,21%)  */
  --ui2: #454545;            /* hsl(0,0%,27%)  */
  --ui3: #595959;            /* hsl(0,0%,35%)  */
  --tx1: #d1d1d1;            /* hsl(0,0%,82%)  */
  --tx2: #999999;            /* hsl(0,0%,60%)  */
  --tx3: #595959;            /* hsl(0,0%,35%)  */
  --tx4: #a6a6a6;            /* hsl(0,0%,65%)  */
  --ax1: hsl(201, 17%, 60%);
  --ax2: hsl(201, 17%, 68%);
  --ax3: hsl(201, 17%, 55%);
  --hl1: hsla(201, 50%, 40%, 0.3);
  --hl2: rgba(255, 177, 80, 0.3);
  --sp1: #ffffff;

  --color-red:    #d04255;
  --color-orange: #d5763f;
  --color-yellow: #e5b567;
  --color-green:  #a8c373;
  --color-cyan:   #73bbb2;
  --color-blue:   #6c99bb;
  --color-purple: #9e86c8;
  --color-pink:   #b05279;
}

/* Follow OS dark mode when the visitor hasn't toggled a theme explicitly */
@media (prefers-color-scheme: dark) {
  body:not(.theme-light) {
    --bg1: #262626;
    --bg2: #212121;
    --bg3: rgba(140, 140, 140, 0.12);
    --ui1: #363636;
    --ui2: #454545;
    --ui3: #595959;
    --tx1: #d1d1d1;
    --tx2: #999999;
    --tx3: #595959;
    --tx4: #a6a6a6;
    --ax1: hsl(201, 17%, 60%);
    --ax2: hsl(201, 17%, 68%);
    --ax3: hsl(201, 17%, 55%);
    --hl1: hsla(201, 50%, 40%, 0.3);
    --hl2: rgba(255, 177, 80, 0.3);
  }
}

/* ---- Map tokens to Publish's semantic variables ------------------------- */
body {
  --background-primary: var(--bg1);
  --background-primary-alt: var(--bg2);
  --background-secondary: var(--bg2);
  --background-secondary-alt: var(--bg1);
  --background-modifier-border: var(--ui1);
  --background-modifier-border-hover: var(--ui2);
  --background-modifier-hover: var(--bg3);
  --background-modifier-active-hover: var(--bg3);

  --text-normal: var(--tx1);
  --text-muted: var(--tx2);
  --text-faint: var(--tx3);
  --text-accent: var(--ax1);
  --text-accent-hover: var(--ax2);
  --text-on-accent: var(--sp1);
  --text-selection: var(--hl1);
  --text-highlight-bg: var(--hl2);
  --text-bold: var(--tx1);
  --text-italic: var(--tx1);
  --text-blockquote: var(--tx2);
  --text-code: var(--tx4);
  --text-error: var(--color-red);

  --interactive-accent: var(--ax3);
  --interactive-accent-hover: var(--ax1);

  --link-color: var(--ax1);
  --link-color-hover: var(--ax2);
  --link-external-color: var(--ax1);
  --link-external-color-hover: var(--ax2);
  --link-decoration: underline;            /* internal links underlined */
  --link-external-decoration: underline;   /* external links underlined */

  --code-background: var(--bg2);
  --code-normal: var(--tx1);
  --blockquote-border-color: var(--ui2);

  --h1-color: var(--tx1);
  --h2-color: var(--tx1);
  --h3-color: var(--tx1);
  --h4-color: var(--tx1);
  --h5-color: var(--tx2);
  --h6-color: var(--tx2);
}

/* Publish layout + page-title variables — the supported way to control the
   readable column width and the note title (h1.page-header). Driving these
   instead of overriding .markdown-preview-sizer geometry keeps Publish's
   sidebar-aware centering intact. */
.published-container {
  --page-width: var(--line-width);     /* 40rem readable column (Minimal) */
  --page-side-padding: 1.5rem;
  --page-title-size: 2em;
  --page-title-weight: var(--h1-weight);
  --page-title-color: var(--text-normal);
  --page-title-font: var(--font-text);
  --page-title-line-height: var(--line-height-tight);
  --page-title-variant: normal;
  --page-title-style: normal;
}

/* =============================================================================
   2. PAGE LAYOUT
============================================================================= */

body {
  font-family: var(--font-text);
  font-size: var(--font-text-size);
  line-height: var(--line-height);
  color: var(--text-normal);
  background-color: var(--background-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.published-container,
.site-body {
  background-color: var(--background-primary);
}

/* Vertical breathing room — width/centering handled by --page-width above,
   NOT by overriding the sizer's margins (Publish's own rules win on specificity
   and account for the sidebars). */
.published-container .markdown-preview-sizer {
  padding-top: 1.5rem;
  padding-bottom: 6rem;
}

/* Full-width media inside the readable column (fullWidthMedia: true) */
.markdown-preview-view img,
.markdown-preview-view video,
.markdown-preview-view .image-embed {
  border-radius: var(--radius-s);
}

/* =============================================================================
   3. TYPOGRAPHY
============================================================================= */

/* Note title — Publish renders it as `h1.page-header` inside .markdown-rendered.
   Left-aligned to sit on the same left edge as the body text (Minimal style). */
.published-container .markdown-rendered h1.page-header {
  font-family: var(--font-text);
  font-weight: var(--h1-weight);
  font-size: var(--page-title-size);
  line-height: var(--line-height-tight);
  color: var(--text-normal);
  text-align: left;
  letter-spacing: -0.015em;
  margin-top: 0.25em;
  margin-bottom: 1.2rem;
}

.markdown-preview-view {
  font-family: var(--font-text);
  color: var(--text-normal);
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-family: var(--font-text);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  margin-top: var(--heading-spacing);
  margin-bottom: 0.6rem;
}
.markdown-preview-view h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); color: var(--h1-color); }
.markdown-preview-view h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); color: var(--h2-color); }
.markdown-preview-view h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); color: var(--h3-color); }
.markdown-preview-view h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); color: var(--h4-color); }
.markdown-preview-view h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); color: var(--h5-color); font-variant: small-caps; }
.markdown-preview-view h6 { font-size: var(--h6-size); font-weight: var(--h6-weight); color: var(--h6-color); font-variant: small-caps; }

.markdown-preview-view p,
.markdown-preview-view li {
  line-height: var(--line-height);
}
.markdown-preview-view p {
  margin-block: var(--p-spacing);
}

.markdown-preview-view strong { font-weight: var(--bold-weight); color: var(--text-bold); }
.markdown-preview-view em { color: var(--text-italic); }
.markdown-preview-view mark { background: var(--text-highlight-bg); color: var(--text-normal); border-radius: 2px; padding: 0 1px; }

/* Links — underlined, accent colored */
.markdown-preview-view a,
.markdown-preview-view a.internal-link,
.markdown-preview-view a.external-link {
  color: var(--link-color);
  text-decoration: var(--link-decoration);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--ui3);
}
.markdown-preview-view a:hover {
  color: var(--link-color-hover);
  text-decoration-color: var(--link-color-hover);
}
/* Unresolved internal links */
.markdown-preview-view a.internal-link.is-unresolved {
  color: var(--text-muted);
  opacity: 0.7;
}

/* =============================================================================
   4. BLOCK ELEMENTS
============================================================================= */

/* Blockquotes — thin left border, muted text (Minimal style) */
.markdown-preview-view blockquote {
  border: none;
  border-inline-start: var(--border-width) solid var(--blockquote-border-color);
  background: transparent;
  color: var(--text-blockquote);
  font-style: normal;
  margin-inline: 0;
  padding: 0 0 0 1.1em;
}

/* Inline & block code */
.markdown-preview-view code {
  font-family: var(--font-monospace-theme);
  font-size: 0.85em;
  color: var(--text-code);
  background: var(--code-background);
  border-radius: var(--radius-s);
  padding: 0.1em 0.35em;
}
.markdown-preview-view pre {
  background: var(--code-background);
  border: var(--border-width) solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: 1em 1.25em;
}
.markdown-preview-view pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--code-normal);
  font-size: 0.85em;
  line-height: 1.5;
}

/* Horizontal rule */
.markdown-preview-view hr {
  border: none;
  border-top: var(--border-width) solid var(--background-modifier-border);
  margin: var(--heading-spacing) 0;
}

/* Tables — borders on (bordersToggle: true) */
.markdown-preview-view table {
  font-size: var(--font-small);
  border-collapse: collapse;
  width: 100%;
}
.markdown-preview-view th,
.markdown-preview-view td {
  border: var(--border-width) solid var(--background-modifier-border);
  padding: 0.4em 0.75em;
}
.markdown-preview-view thead th {
  background: var(--background-secondary);
  font-weight: var(--bold-weight);
  color: var(--text-normal);
}
.markdown-preview-view tbody tr:nth-child(even) td {
  background: var(--background-primary-alt);
}

/* Lists */
.markdown-preview-view ul,
.markdown-preview-view ol {
  padding-inline-start: 1.5em;
}
.markdown-preview-view li { margin-block: 0.1em; }
.markdown-preview-view ul > li::marker { color: var(--tx3); }

/* Task checkboxes */
.markdown-preview-view input[type="checkbox"] {
  accent-color: var(--interactive-accent);
}

/* Callouts */
.markdown-preview-view .callout {
  border-radius: var(--radius-m);
  border: var(--border-width) solid var(--background-modifier-border);
  background: var(--background-secondary);
  mix-blend-mode: normal;
}

/* =============================================================================
   5. PUBLISH CHROME  (site header, navigation, columns)
============================================================================= */

/* Site header / top bar */
.site-header {
  background: var(--background-primary);
  border-bottom: var(--border-width) solid var(--background-modifier-border);
}
.site-header-title,
.site-header-text {
  font-family: var(--font-text);
  font-weight: var(--bold-weight);
  color: var(--text-normal);
}

/* Search */
.site-search-button,
.search-input-container input {
  font-family: var(--font-text);
  color: var(--text-normal);
}

/* Left nav tree + right column (TOC, backlinks) */
.site-body-left-column,
.site-body-right-column {
  font-size: var(--font-ui-small);
}

.nav-folder-title,
.nav-file-title {
  font-family: var(--font-text);
  color: var(--nav-item-color, var(--text-muted));
  border-radius: var(--radius-s);
  padding: 2px 8px;
  line-height: 1.5;
}
.nav-file-title:hover,
.nav-folder-title:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}
.nav-file-title.is-active,
.tree-item-self.is-active {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
  font-weight: 500;
}
.nav-folder-title {
  color: var(--text-normal);
  font-weight: 500;
}

/* Table of contents (right column) */
.toc .tree-item-self {
  color: var(--text-muted);
  border-radius: var(--radius-s);
}
.toc .tree-item-self:hover { color: var(--text-normal); }

/* Backlinks / outgoing links panels */
.embedded-backlinks,
.outgoing-link-pane,
.backlink-pane {
  font-size: var(--font-ui-small);
  color: var(--text-muted);
}
.embedded-backlinks .tree-item-self:hover { color: var(--text-normal); }

/* Graph view (Publish) */
.graph-view.color-fill { color: var(--ax1); }
.graph-view.color-line { color: var(--ui2); }
.graph-view.color-text { color: var(--text-muted); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--ui1);
  border-radius: 6px;
  border: 2px solid var(--background-primary);
}
::-webkit-scrollbar-thumb:hover { background: var(--ui3); }
::-webkit-scrollbar-track { background: transparent; }

/* =============================================================================
   6. RESPONSIVE
============================================================================= */
@media (max-width: 750px) {
  .published-container {
    --page-width: 100%;
    --page-side-padding: 1rem;
    --page-title-size: 1.7em;
  }
  .published-container .markdown-preview-sizer { padding-top: 1rem; }
}