/* ============================================================
   publish.css — deanjung.com (Obsidian Publish)

   앱 볼트 테마를 Publish로 이식.
   · 테마      : Baseline v3.2.11 (by Alexis C)
   · 색 스킴   : Light = Notion Light / Dark = Notion Dark
   · 커스터마이징: Style Settings(obsidian-style-settings) 값 기준

   Publish 기본 스타일(app.css)이 이미 --h1-size, --h1-weight,
   .theme-light/.theme-dark 등 동일 토큰을 소비하므로, 앱과 같은
   CSS 변수만 덮어써서 리딩뷰 외형을 재현한다.
   기준 스냅샷: 2026-07-05
   ============================================================ */

/* ------------------------------------------------------------
   1. 색 스킴 — Light (Notion Light)
   ------------------------------------------------------------ */
.theme-light {
  /* 액센트 (Notion, color-scheme-accent ON) */
  --accent-h: 217;
  --accent-s: 67%;
  --accent-l: 57%;

  /* 배경 */
  --background-primary: #ffffff;
  --background-primary-alt: #f9f8f7;
  --background-secondary: #f9f8f7;
  --background-modifier-hover: rgba(0, 0, 0, 0.03);
  --background-modifier-border: #e9e8e5;
  --background-modifier-border-hover: #e6e6e4;

  /* 텍스트 */
  --text-normal: #2c2c2b;
  --text-muted: #5f5e5b;
  --text-faint: #a8a49c;
  --text-selection: rgba(131, 201, 229, 0.3);

  /* 인용문 엣지 색 (Style Settings: light #2C2C2B) */
  --blockquote-border-color: #2c2c2b;
}

/* ------------------------------------------------------------
   2. 색 스킴 — Dark (Notion Dark)
   ------------------------------------------------------------ */
.theme-dark {
  --accent-h: 217;
  --accent-s: 67%;
  --accent-l: 57%;

  --background-primary: #191919;
  --background-primary-alt: #202020;
  --background-secondary: #202020;
  --background-modifier-hover: rgba(255, 255, 255, 0.055);
  --background-modifier-border: #313131;
  --background-modifier-border-hover: #30302e;

  --text-normal: #f0efed;
  --text-muted: #9b9b9b;
  --text-faint: #65645f;

  /* 인용문 엣지 색 (Style Settings: dark #F0EFED) */
  --blockquote-border-color: #f0efed;
}

/* ------------------------------------------------------------
   3. 공통 컬러 팔레트 (callout · 태그 · 코드 하이라이트)
      Notion 스킴은 라이트/다크 동일값 사용
   ------------------------------------------------------------ */
.theme-light,
.theme-dark {
  --color-red-rgb: 229, 100, 88;
  --color-orange-rgb: 213, 128, 59;
  --color-yellow-rgb: 216, 163, 47;
  --color-green-rgb: 70, 161, 113;
  --color-cyan-rgb: 55, 164, 180;
  --color-blue-rgb: 39, 131, 222;
  --color-purple-rgb: 181, 119, 214;
  --color-pink-rgb: 219, 105, 153;
}

/* ------------------------------------------------------------
   4. 타이포그래피 · 레이아웃 (라이트/다크 공통)
   ------------------------------------------------------------ */
body,
.published-container {
  /* 폰트: Baseline 인터페이스/본문 오버라이드 스택 + 한글·크로스플랫폼 폴백.
     (한글은 macOS·iOS의 Apple SD Gothic Neo, Windows의 맑은 고딕으로 폴백) */
  --font-text: ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Display", "Segoe UI", "Apple SD Gothic Neo",
    "Malgun Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-interface: var(--font-text);

  /* 본문 리듬 (Baseline) */
  --font-text-size: 16px;
  --line-height-normal: 1.6;
  --p-spacing: 1.75rem;
  --list-spacing: 0.175em;
  --heading-spacing: 2em;

  /* 헤딩 크기 (Style Settings) */
  --h1-size: 1.875em;
  --h2-size: 1.5em;
  --h3-size: 1.25em;
  --h4-size: 1em;
  --h5-size: 0.875em;
  --h6-size: 0.75em;

  /* 헤딩 굵기 (h1만 600으로 조정, 나머지는 Baseline 기본 700) */
  --h1-weight: 600;
  --h2-weight: 700;
  --h3-weight: 700;
  --h4-weight: 700;
  --h5-weight: 700;
  --h6-weight: 700;

  /* 모서리 반경 (radius-modifier 0.75 → 8·12·20·28px 를 0.75배) */
  --radius-s: 6px;
  --radius-m: 9px;
  --radius-l: 15px;
  --radius-xl: 21px;

  /* 링크 밑줄 OFF (Baseline 기본), 호버 시에만 밑줄 */
  --link-decoration: none;
  --link-external-decoration: none;
  --link-decoration-hover: underline;

  /* 인용문 (blockquote-edge · thickness 3px · 배경 투명) */
  --blockquote-border-thickness: 3px;
  --blockquote-background-color: transparent;
  --blockquote-font-style: normal;
}

/* 본문/인터페이스 폰트 확정 적용 */
.markdown-preview-view,
.markdown-rendered {
  font-family: var(--font-text);
}

/* ------------------------------------------------------------
   5. 인용문 엣지 스타일 (Baseline: blockquote-edge)
      왼쪽에 둥근 막대(::before), 배경 투명, 안쪽 여백 확보
   ------------------------------------------------------------ */
.markdown-preview-view blockquote {
  position: relative;
  border: none;
  background: var(--blockquote-background-color);
  border-radius: calc(var(--blockquote-border-thickness) / 2) var(--radius-s)
    var(--radius-s) calc(var(--blockquote-border-thickness) / 2);
  padding-block: 8px;
  padding-inline: calc(var(--blockquote-border-thickness) + 20px) 16px;
}

.markdown-preview-view blockquote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: var(--blockquote-border-thickness);
  border-radius: calc(var(--blockquote-border-thickness) / 2);
  background: var(--blockquote-border-color);
}