/* =====================================================================
   One The Lab — Obsidian Publish 테마
   디자인시스템: https://util.onethelab.com/design-system/design_system.html
   - 다크/라이트 모두 지원 (Publish 대시보드에서 "테마 전환" 켜면 토글 노출)
   - 기본 테마는 Publish 설정 > 외형에서 지정
   ===================================================================== */

/* ---------- 브랜드/토큰 (테마 무관 고정) ---------- */
body {
  --hhg-yellow: #ffd400;
  --hhg-yellow-soft: #ffe766;
  --hhg-yellow-deep: #c9a600;
  --on-brand: #1a1a17;

  --success: #3fa66a;
  --warning: #e0941a;
  --error: #d24a4a;
  --info: #3a78c2;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 9999px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --sh-md: 0 1px 3px rgba(0, 0, 0, 0.08);
  --sh-lg: 0 5px 14px rgba(0, 0, 0, 0.16);

  --font-text-theme: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-monospace-theme: "JetBrains Mono", ui-monospace, "SFMono-Regular",
    Menlo, monospace;
}

/* ---------- 라이트 테마 ---------- */
body.theme-light {
  --canvas: #fafaf7;
  --surface: #ffffff;
  --surface-soft: #f4f3ee;
  --hairline: #e7e5dd;

  --background-primary: var(--canvas);
  --background-primary-alt: var(--surface-soft);
  --background-secondary: var(--surface-soft);
  --background-secondary-alt: #edebe3;
  --background-modifier-border: var(--hairline);
  --background-modifier-border-hover: #d9d7cd;

  --text-normal: #1a1a17; /* ink */
  --text-muted: #3d3d38; /* body */
  --text-faint: #7a7a72; /* muted */
  --text-on-accent: var(--on-brand);
  --text-accent: #c9a600; /* yellow-deep */
  --text-accent-hover: #ffd400;
  --text-selection: rgba(255, 212, 0, 0.28);
  --text-highlight-bg: #ffe76699;

  --interactive-accent: #ffd400;
  --interactive-accent-hover: #c9a600;
  --interactive-normal: var(--surface-soft);
  --interactive-hover: #edebe3;

  --code-bg: #161613;
  --code-fg: #fafaf7;
}

/* ---------- 다크 테마 ---------- */
body.theme-dark {
  --canvas: #121210;
  --surface: #1c1c17;
  --surface-soft: #26261f;
  --hairline: #33332b;

  --background-primary: var(--canvas);
  --background-primary-alt: #1a1a16;
  --background-secondary: #17170f;
  --background-secondary-alt: var(--surface-soft);
  --background-modifier-border: var(--hairline);
  --background-modifier-border-hover: #444339;

  --text-normal: #f5f4ec; /* ink */
  --text-muted: #cfcdc2; /* body */
  --text-faint: #8e8c82; /* muted */
  --text-on-accent: var(--on-brand);
  --text-accent: #ffd400; /* yellow */
  --text-accent-hover: #ffe766;
  --text-selection: rgba(255, 212, 0, 0.22);
  --text-highlight-bg: #c9a60088;

  --interactive-accent: #ffd400;
  --interactive-accent-hover: #ffe766;
  --interactive-normal: var(--surface-soft);
  --interactive-hover: #33332b;

  --code-bg: #0d0d0b;
  --code-fg: #f5f4ec;
}

/* =====================================================================
   사이트 레이아웃 / 크롬
   ===================================================================== */
.published-container {
  background: var(--background-primary);
  color: var(--text-normal);
}

/* 본문 최대폭 살짝 넓게 */
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
  max-width: 900px;
}

/* 임베드 좌측 보더 — 6px, 완전 투명 (폭만 차지) */
.markdown-embed {
  --embed-border-start: 6px solid transparent;
  --embed-border-left: var(--embed-border-start);
}

/* ---------- 브레드크럼 (상단 고정) — DOM은 publish.js 가 생성 ---------- */
body {
  --otl-crumb-h: 44px;
}

#otl-breadcrumb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  height: var(--otl-crumb-h);
  padding: 0 var(--s4);
  background: color-mix(in srgb, var(--background-primary) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  font-size: 1rem;
  line-height: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
#otl-breadcrumb::-webkit-scrollbar {
  display: none;
}

.otl-crumb {
  color: var(--hhg-yellow-deep);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 400;
}
a.otl-crumb:hover {
  text-decoration: underline;
}
.otl-crumb.is-current {
  color: var(--text-muted);
}
.otl-crumb-sep {
  color: var(--text-faint);
  opacity: 0.6;
  user-select: none;
}

/* 고정 바 높이만큼 본문/사이드바 내림 */
.site-body {
  padding-top: var(--otl-crumb-h);
}

/* 사이드바 폭 — 변수는 .published-container 에 선언해야 먹음 */
.published-container {
  --sidebar-left-width: 250px;
  --sidebar-right-width: 250px;
}

/* 좌측 사이드바 (내비/탐색기) */
.site-body-left-column {
  background: var(--background-secondary);
  border-right: 1px solid var(--background-modifier-border);
}

/* 우측 사이드바 (목차/그래프) */
.site-body-right-column {
  background: var(--background-primary);
}

/* 사이트 로고 — 내부 a/img 를 컨테이너에 맞춤 */
.site-body-left-column-site-logo {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.site-body-left-column-site-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.site-body-left-column-site-logo img,
.site-body-left-column-site-logo svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 사이트 이름 */
.site-body-left-column-site-name {
  color: var(--text-normal);
  font-weight: 800;
  letter-spacing: -0.01em;
  padding-right: 0;
  text-align: center;
}

/* ---------- 내비게이션 트리 (탐색기) ---------- */
.nav-file-title,
.nav-folder-title {
  border-radius: var(--r-sm);
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.55;
  transition: background 0.1s, color 0.1s;
}
.nav-file-title:hover,
.nav-folder-title:hover {
  background: var(--surface-soft);
  color: var(--text-normal);
}
.nav-folder-title {
  color: var(--text-normal);
  font-weight: 700;
}
/* 현재 페이지 = 브랜드 yellow */
.nav-file-title.is-active,
.tree-item-self.is-active > .nav-file-title {
  background: var(--hhg-yellow);
  color: var(--on-brand);
  font-weight: 600;
}

/* =====================================================================
   타이포그래피
   ===================================================================== */
.markdown-preview-view {
  font-family: var(--font-text-theme);
  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-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-normal);
}
.markdown-preview-view h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* h1/h2 밑줄 제거 — Publish 기본(app.css)이 border-bottom 넣음 */
.published-container .markdown-rendered h1,
.published-container .markdown-rendered h2 {
  border-bottom: none;
  padding-bottom: 0;
}

/* 링크 — 브랜드 강조 + 밑줄 */
.markdown-preview-view a,
.markdown-preview-view a.internal-link {
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-color: var(--hhg-yellow-deep);
  text-underline-offset: 2px;
  transition: color 0.1s, background 0.1s;
}
.markdown-preview-view a:hover {
  color: var(--text-accent-hover);
}

::selection {
  background: var(--text-selection);
  color: var(--text-normal);
}

/* 하이라이트 (==마크==) */
.markdown-preview-view mark {
  background: var(--text-highlight-bg);
  border-radius: var(--r-sm);
}

/* =====================================================================
   인용구 / 가로줄 / 코드
   ===================================================================== */
.markdown-preview-view blockquote {
  border-left: 3px solid var(--hhg-yellow);
  background: var(--surface-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 1rem 0;
  padding: 0.6rem 1rem;
  color: var(--text-muted);
}

.markdown-preview-view hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 2rem 0;
}

.markdown-preview-view code {
  font-family: var(--font-monospace-theme);
  border-radius: var(--r-sm);
}
.markdown-preview-view pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.markdown-preview-view pre > code {
  background: transparent;
  border-radius: 0;
}

/* =====================================================================
   테이블 (디자인시스템)
   ===================================================================== */
.markdown-preview-view table {
  border-collapse: collapse;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.markdown-preview-view th,
.markdown-preview-view td {
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 16px;
}
.markdown-preview-view thead th {
  background: var(--surface-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.markdown-preview-view tbody tr:last-child td {
  border-bottom: none;
}
.markdown-preview-view tbody tr:hover {
  background: var(--surface-soft);
}

/* =====================================================================
   콜아웃 — 디자인시스템 시맨틱 팔레트
   ===================================================================== */
.markdown-preview-view .callout {
  border-radius: var(--r-md);
  mix-blend-mode: normal;
  --callout-color-note: var(--hhg-yellow-deep);
}
/* 기본(note) = 브랜드 yellow-deep */
.markdown-preview-view .callout {
  --callout-color: 201, 166, 0;
}
.markdown-preview-view .callout[data-callout="info"],
.markdown-preview-view .callout[data-callout="todo"],
.markdown-preview-view .callout[data-callout="abstract"],
.markdown-preview-view .callout[data-callout="summary"] {
  --callout-color: 58, 120, 194;
}
.markdown-preview-view .callout[data-callout="tip"],
.markdown-preview-view .callout[data-callout="success"],
.markdown-preview-view .callout[data-callout="check"],
.markdown-preview-view .callout[data-callout="done"],
.markdown-preview-view .callout[data-callout="hint"] {
  --callout-color: 63, 166, 106;
}
.markdown-preview-view .callout[data-callout="warning"],
.markdown-preview-view .callout[data-callout="caution"],
.markdown-preview-view .callout[data-callout="attention"],
.markdown-preview-view .callout[data-callout="question"],
.markdown-preview-view .callout[data-callout="help"] {
  --callout-color: 224, 148, 26;
}
.markdown-preview-view .callout[data-callout="danger"],
.markdown-preview-view .callout[data-callout="error"],
.markdown-preview-view .callout[data-callout="failure"],
.markdown-preview-view .callout[data-callout="fail"],
.markdown-preview-view .callout[data-callout="bug"] {
  --callout-color: 210, 74, 74;
}

/* =====================================================================
   유틸리티 컴포넌트 — 노트에 raw HTML로 사용 (디자인시스템)
   ===================================================================== */
/* 버튼 */
.markdown-preview-view .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text-theme);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: 0.12s;
}
.markdown-preview-view .btn-primary,
.markdown-preview-view .btn.primary {
  background: var(--hhg-yellow);
  color: var(--on-brand);
}
.markdown-preview-view .btn-primary:hover,
.markdown-preview-view .btn.primary:hover {
  background: var(--hhg-yellow-deep);
  color: #fff;
}
.markdown-preview-view .btn-secondary,
.markdown-preview-view .btn.secondary {
  background: var(--surface);
  color: var(--text-normal);
  border-color: var(--hairline);
}
.markdown-preview-view .btn-secondary:hover,
.markdown-preview-view .btn.secondary:hover {
  background: var(--surface-soft);
}
.markdown-preview-view .btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}
.markdown-preview-view .btn-lg {
  padding: 14px 28px;
  font-size: 16px;
}

/* 배지 */
.markdown-preview-view .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.markdown-preview-view .badge.dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.markdown-preview-view .b-yellow {
  background: rgba(255, 212, 0, 0.16);
  color: var(--hhg-yellow-deep);
}
.markdown-preview-view .b-success {
  background: rgba(63, 166, 106, 0.16);
  color: var(--success);
}
.markdown-preview-view .b-warning {
  background: rgba(224, 148, 26, 0.16);
  color: var(--warning);
}
.markdown-preview-view .b-error {
  background: rgba(210, 74, 74, 0.16);
  color: var(--error);
}
.markdown-preview-view .b-info {
  background: rgba(58, 120, 194, 0.16);
  color: var(--info);
}

/* eyebrow 라벨 */
.markdown-preview-view .eyebrow {
  display: inline-block;
  background: var(--code-bg);
  color: var(--hhg-yellow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

/* KPI 카드 그리드 */
.markdown-preview-view .dash {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.markdown-preview-view .kpi {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--sh-sm);
}
.markdown-preview-view .kpi .label {
  font-size: 12px;
  color: var(--text-faint);
}
.markdown-preview-view .kpi .num {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-normal);
  letter-spacing: -0.02em;
  margin-top: 4px;
}

/* ---------------------------------------------------------------------
   카드 — 중첩 콜아웃 기반
   div 로 마크다운을 감쌀 수 없음(Obsidian은 빈 줄에서 HTML 블록을 닫아
   빈 div만 남김). 콜아웃은 진짜 부모-자식 DOM이라 자식 셀렉터가 먹음.
   [!cards] > [!card]   : 콘텐츠 카드 (320px, 세로 구성)
   [!grid]  > [!gcard]  : 인덱스 갤러리 카드 (220x210, 이미지 위/제목 아래)
   --------------------------------------------------------------------- */

/* 컨테이너 콜아웃 = 껍데기 없이 flex 만 */
.markdown-preview-view .callout[data-callout="cards"],
.markdown-preview-view .callout[data-callout="grid"] {
  background: none;
  border: none;
  padding: 0;
  margin: 1.5rem 0;
  mix-blend-mode: normal;
}
.markdown-preview-view .callout[data-callout="cards"] > .callout-title,
.markdown-preview-view .callout[data-callout="grid"] > .callout-title,
.markdown-preview-view .callout[data-callout="card"] > .callout-title,
.markdown-preview-view .callout[data-callout="gcard"] > .callout-title {
  display: none;
}
/* 콘텐츠 카드도 grid — grid-auto-rows:1fr 이라 행이 달라도 카드 높이가 전부 같음
   (flex-wrap 은 같은 줄끼리만 높이가 맞아서 2행 이상이면 어긋남) */
.markdown-preview-view .callout[data-callout="cards"] > .callout-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  padding: 0;
  gap: 20px;
}
/* 갤러리는 grid — 마지막 줄도 나머지 줄과 같은 열폭으로 정렬 */
.markdown-preview-view .callout[data-callout="grid"] > .callout-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  padding: 0;
  gap: 16px;
}

/* 카드 공통 */
.markdown-preview-view .callout[data-callout="card"],
.markdown-preview-view .callout[data-callout="gcard"] {
  position: relative; /* 링크 오버레이(::after)의 기준 */
  margin: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-md);
  mix-blend-mode: normal;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
/* 호버 — 부모 콜아웃의 overflow:hidden 에 잘리므로 transform 안 씀 */
.markdown-preview-view .callout[data-callout="card"]:hover,
.markdown-preview-view .callout[data-callout="gcard"]:hover {
  border-color: var(--text-accent);
  box-shadow: var(--sh-lg);
}

/* 카드 전체를 링크로 — 제목 링크의 클릭 영역을 카드 전체로 확장.
   카드당 링크 1개 전제. 대신 카드 안 텍스트 선택은 안 됨. */
.markdown-preview-view .callout[data-callout="card"] a::after,
.markdown-preview-view .callout[data-callout="gcard"] a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.markdown-preview-view .callout[data-callout="card"]:hover a,
.markdown-preview-view .callout[data-callout="gcard"]:hover a {
  color: var(--text-accent);
}
/* 카드 호버 시 커서를 손가락으로 — 오버레이가 a 라 자동이지만 명시 */
.markdown-preview-view .callout[data-callout="card"],
.markdown-preview-view .callout[data-callout="gcard"] {
  cursor: pointer;
}

/* 콘텐츠 카드 */
.markdown-preview-view .callout[data-callout="card"] {
  width: auto; /* 폭은 부모 grid 가 관리 */
  border-radius: 12px;
}
.markdown-preview-view .callout[data-callout="card"] > .callout-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}
.markdown-preview-view .callout[data-callout="card"] h2 {
  margin: 16px 16px 8px;
  padding: 0;
  border: none;
  font-size: 1.05rem;
}
.markdown-preview-view .callout[data-callout="card"] p {
  margin: 0 16px 10px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.markdown-preview-view .callout[data-callout="card"] ul {
  margin: 0 16px 14px;
  padding-left: 18px;
  font-size: 0.83rem;
}
.markdown-preview-view .callout[data-callout="card"] ul > li {
  margin: 3px 0;
}
/* 이미지 문단 — 카드 하단에 고정, full-bleed.
   img 자체가 아니라 img 를 감싼 p 가 flex 아이템이라 margin:auto 는 p 에 걸어야 함. */
.markdown-preview-view .callout[data-callout="card"] > .callout-content > p:has(img) {
  margin: auto 0 0 0;
  padding: 0;
}
.markdown-preview-view .callout[data-callout="card"] img {
  margin: 0;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
  background: var(--surface-soft);
}
/* 캡션 — 이미지 위 오버레이. 문서 흐름에서 빼야 캡션 유무로 이미지 위치가 안 밀림 */
.markdown-preview-view .callout[data-callout="card"] > .callout-content > p:has(small) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 14px 12px 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.markdown-preview-view .callout[data-callout="card"] small {
  display: block;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  opacity: 1;
}
@media (max-width: 750px) {
  .markdown-preview-view .callout[data-callout="cards"] > .callout-content {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

/* 인덱스 갤러리 카드 — 이미지 위, 제목 아래 */
.markdown-preview-view .callout[data-callout="gcard"] {
  width: auto; /* 폭은 부모 grid 가 관리 */
  height: 210px;
  border-radius: 10px;
}
.markdown-preview-view .callout[data-callout="gcard"] > .callout-content {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.markdown-preview-view .callout[data-callout="gcard"] p {
  margin: 0;
  display: contents;
}
.markdown-preview-view .callout[data-callout="gcard"] img {
  order: -1; /* md는 제목→이미지 순 — 렌더는 이미지 위/제목 아래 */
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  border-radius: 0;
  background: var(--surface-soft); /* 이미지 없거나 로딩 중 빈칸 방지 */
}
/* 제목칸 = 항상 2줄 높이 고정.
   1줄짜리도 2줄 자리를 차지해야 이미지 노출 높이가 카드마다 같아짐. */
.markdown-preview-view .callout[data-callout="gcard"] a {
  flex: 0 0 auto;
  height: calc(0.85rem * 1.3 * 2 + 18px);
  box-sizing: border-box;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  font-style: normal;
  text-decoration: none;
  color: var(--text-normal);
  background: var(--surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.markdown-preview-view .callout[data-callout="gcard"] a:hover {
  color: var(--text-accent);
}
/* 좁은 화면 — minmax(200px) 는 1열로 떨어짐. 기존처럼 2열 유지 */
@media (max-width: 480px) {
  .markdown-preview-view .callout[data-callout="grid"] > .callout-content {
    grid-template-columns: repeat(2, 1fr);
  }
  .markdown-preview-view .callout[data-callout="gcard"] {
    height: 190px;
  }
}

/* 이미지 캡션 <small> */
.markdown-preview-view small {
  opacity: 0.6;
}

/* =====================================================================
   스크롤바
   ===================================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: var(--r-pill);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--hhg-yellow-deep);
}