/*
 * AdCarry Docs Site — v0.2
 * 레퍼런스: strategy.amzcarry.com (미니멀, 흰 캔버스, 보라는 액센트만)
 * Owner: JangCarry / Updated: 2026-05-15
 */

/* ============ 폰트 ============ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============ 디자인 토큰 ============ */
:root {
  /* AdCarry Brand */
  --violet-50:   #F5F3FF;
  --violet-100:  #EDE9FE;
  --violet-200:  #DDD6FE;
  --violet-300:  #C4B5FD;
  --violet-500:  #8B5CF6;
  --violet-600:  #7C3AED;
  --violet-700:  #6D28D9;
  --violet-800:  #5B21B6;

  /* Slate */
  --slate-50:    #F8FAFC;
  --slate-100:   #F1F5F9;
  --slate-200:   #E2E8F0;
  --slate-300:   #CBD5E1;
  --slate-400:   #94A3B8;
  --slate-500:   #64748B;
  --slate-600:   #475569;
  --slate-700:   #334155;
  --slate-800:   #1E293B;
  --slate-900:   #0F172A;

  /* Surface */
  --bg:          #FFFFFF;
  --bg-subtle:   #F8FAFC;
  --bg-soft:     #FAFAFB;
  --text:        #0F172A;
  --text-2:      #475569;
  --text-3:      #94A3B8;
  --border:      #E2E8F0;

  /* Material 변수 매핑 */
  --md-primary-fg-color:        var(--violet-600);
  --md-primary-fg-color--light: var(--violet-500);
  --md-primary-fg-color--dark:  var(--violet-700);
  --md-accent-fg-color:         var(--violet-600);

  /* 헤더 — 흰색 배경 (핵심 변경) */
  --md-primary-bg-color:        var(--text);          /* 헤더 텍스트 = 슬레이트 */
  --md-primary-bg-color--light: var(--text-2);

  /* 본문 */
  --md-default-fg-color:        var(--text);
  --md-default-fg-color--light: var(--text-2);
  --md-default-fg-color--lighter: var(--text-3);
  --md-default-bg-color:        var(--bg);

  /* 코드 */
  --md-code-bg-color: var(--slate-100);
  --md-code-fg-color: var(--violet-700);

  /* 그림자 (미세, 보라 틴트) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow:    0 4px 16px rgba(124, 58, 237, 0.06);
}

/* ============ Dark mode (상단 명시적 먹금) ============ */
/* 아래 세세한 다크모드 재설계 블록에 앞서 먹금만 */

/* ============ Body — base 15px 고정 ============ */
html {
  font-size: 15px;  /* Material 기본 16px → 15px */
}

body, .md-typeset {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.md-typeset {
  font-size: 0.92rem;       /* 14px 기준 약 13px */
  line-height: 1.7;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* ============ 헤더 — 흰 배경 + 슬레이트 텍스트 (핵심 변경) ============ */
.md-header {
  background: var(--bg) !important;
  color: var(--text);
  box-shadow: 0 1px 0 var(--border);
  border-bottom: 1px solid var(--border);
}

.md-header__title,
.md-header__topic {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-header__button,
.md-header__option {
  color: var(--text-2);
}

.md-header__button:hover {
  color: var(--violet-600);
}

/* 로고 보정 */
.md-header__button.md-logo {
  padding: 0.25rem 0.5rem;
}
.md-header__button.md-logo img {
  height: 1.5rem;
  width: auto;
  fill: var(--violet-600);
}

/* ============ 탭 (상단 네비) — 흰 배경 ============ */
.md-tabs {
  background: var(--bg) !important;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}

.md-tabs__link {
  color: var(--text-2);
  opacity: 1;
  font-weight: 500;
}

.md-tabs__link:hover {
  color: var(--violet-600);
}

.md-tabs__link--active {
  color: var(--violet-600) !important;
  font-weight: 600;
}

/* ============ 검색박스 (헤더 위) ============ */
.md-search__input {
  background: var(--slate-100);
  color: var(--text);
  border-radius: 8px;
}

.md-search__input::placeholder {
  color: var(--text-3);
}

.md-search__input + .md-search__icon {
  color: var(--text-3);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  background: var(--bg);
  border: 1px solid var(--violet-300);
}

/* ============ 본문 영역 — 큰 여백 ============ */
.md-main__inner {
  margin-top: 1.5rem;
}

.md-content {
  padding: 0 1.5rem;
}

.md-content__inner {
  margin: 0 auto;
  max-width: 64rem;  /* 구조도 같은 다이어그램 페이지 위해 대폭 증가 */
  padding-top: 1rem;
}

/* ============ Mermaid 다이어그램 ============ */
.md-typeset .mermaid {
  text-align: center;
  margin: 1.5rem 0;
  background: transparent;
}

.md-typeset .mermaid svg {
  max-width: 100%;
  height: auto !important;
  min-height: 320px;  /* 너무 낮게 짜부라지는 거 방지 */
}

/* 다이어그램 노드 내 텍스트 강제 키우기 */
.md-typeset .mermaid .nodeLabel,
.md-typeset .mermaid .edgeLabel,
.md-typeset .mermaid .label {
  font-size: 15px !important;
  font-family: 'Pretendard', sans-serif !important;
}

.md-typeset .mermaid .cluster-label {
  font-size: 14px !important;
  font-weight: 700 !important;
}

.md-content__inner::before {
  display: none; /* 위쪽 빈 공간 제거 */
}

/* ============ 헤딩 ============ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.md-typeset h1 {
  font-size: 1.65rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-bottom: 0;
  border-bottom: none;
}

.md-typeset h2 {
  font-size: 1.2rem;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.md-typeset h3 {
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--slate-800);
}

.md-typeset h4 {
  font-size: 0.9rem;
  color: var(--slate-700);
  margin-top: 1.15rem;
}

/* ============ 본문 텍스트 ============ */
.md-typeset p {
  color: var(--text);
  margin: 0.75rem 0;
}

.md-typeset strong {
  color: var(--slate-800);
  font-weight: 700;
}

/* ============ 링크 — 보라 액센트 ============ */
.md-typeset a {
  color: var(--violet-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.md-typeset a:hover {
  color: var(--violet-700);
  border-bottom-color: var(--violet-300);
}

/* ============ 인라인 코드 ============ */
.md-typeset code {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--slate-100);
  color: var(--violet-700);
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-feature-settings: 'tnum';
}

/* ============ 코드 블록 ============ */
.md-typeset pre > code {
  background: var(--slate-900);
  color: #E2E8F0;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  line-height: 1.7;
  box-shadow: var(--shadow-xs);
}

.md-typeset pre {
  margin: 1.25rem 0;
}

/* ============ 테이블 — 미니멀 (보라 헤더 X) ============ */
.md-typeset table:not([class]) {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  font-size: 0.78rem;
  margin: 1.25rem 0;
}

.md-typeset table:not([class]) th {
  background: var(--bg-subtle);
  color: var(--slate-700);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--border);
  padding: 0.75rem 1rem;
  color: var(--text);
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background: var(--bg-soft);
}

.md-typeset table:not([class]) tr:hover {
  background: var(--violet-50);
}

/* ============ 사이드바 ============ */
.md-sidebar {
  background: transparent;
}

.md-nav {
  font-size: 0.78rem;
}

.md-nav__title {
  color: var(--slate-700);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem;
}

.md-nav__link {
  color: var(--text-2);
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  transition: all 0.12s ease;
}

.md-nav__link:hover {
  color: var(--violet-600);
  background: transparent;
}

.md-nav__link--active,
.md-nav__link[data-md-state="blur"]--active {
  color: var(--violet-600) !important;
  font-weight: 600;
  background: transparent;
}

/* TOC (오른쪽) */
.md-sidebar--secondary .md-nav__title {
  color: var(--text-3);
  font-size: 0.72rem;
}

.md-sidebar--secondary .md-nav__link {
  color: var(--text-3);
  border-left: 2px solid transparent;
  border-radius: 0;
  padding-left: 0.75rem;
}

.md-sidebar--secondary .md-nav__link--active {
  color: var(--violet-600) !important;
  border-left-color: var(--violet-600);
  background: transparent;
}

/* ============ 인용구 ============ */
.md-typeset blockquote {
  border-left: 3px solid var(--violet-400, var(--violet-300));
  background: var(--violet-50);
  border-radius: 0 6px 6px 0;
  padding: 0.75rem 1rem;
  color: var(--slate-700);
  margin: 1rem 0;
}

/* ============ Admonition (info/warning/note) ============ */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  font-size: 0.78rem;
  margin: 1.25rem 0;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
  background: transparent;
  font-size: 0.8rem;
}

/* info: 보라 액센트 */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-left-color: var(--violet-500);
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  background-color: var(--violet-500);
}

/* warning: amber */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: #F59E0B;
}

/* ============ 카드 그리드 (홈) ============ */
.md-typeset .grid.cards > * {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.md-typeset .grid.cards > *:hover {
  box-shadow: var(--shadow);
  border-color: var(--violet-300);
  transform: translateY(-2px);
}

/* 카드 안 버튼 */
.md-typeset .md-button {
  background: transparent;
  color: var(--violet-600);
  border: 1px solid var(--violet-300);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  margin-top: 0.5rem;
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background: var(--violet-50);
  color: var(--violet-700);
  border-color: var(--violet-500);
}

/* ============ 푸터 ============ */
.md-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.md-footer-meta {
  background: var(--bg);
  color: var(--text-3);
  font-size: 0.82rem;
}

.md-footer-meta a {
  color: var(--text-2);
}

/* ============ 스크롤바 ============ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--slate-200);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--slate-300);
}

/* ============ Dark mode — 전면 재설계 ============ */
[data-md-color-scheme="slate"] {
  /* Surface */
  --bg:        #0F1218;
  --bg-subtle: #181B23;
  --bg-soft:   #1A1D26;
  --text:      #F1F5F9;     /* 새하얀 본문 */
  --text-2:    #CBD5E1;     /* 보조 */
  --text-3:    #94A3B8;     /* 흡림 */
  --border:    #2A2F3A;

  /* Material 내장 변수 와이드 오버라이드 */
  --md-default-bg-color: #0F1218;
  --md-default-fg-color: #F1F5F9;
  --md-default-fg-color--light:   #CBD5E1;
  --md-default-fg-color--lighter: #94A3B8;
  --md-typeset-color:    #F1F5F9;
  --md-code-bg-color:    #1A1D26;
  --md-code-fg-color:    #C4B5FD;
  --md-primary-bg-color: #F1F5F9;
  --md-accent-fg-color:  #A78BFA;
}

/* 헤딩 — 흐린 회색 금지, 대비 명확 */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #FFFFFF;
  border-bottom-color: var(--border);
}
[data-md-color-scheme="slate"] .md-typeset h3 { color: #E2E8F0; }
[data-md-color-scheme="slate"] .md-typeset h4 { color: #CBD5E1; }
[data-md-color-scheme="slate"] .md-typeset strong { color: #FFFFFF; }
[data-md-color-scheme="slate"] .md-typeset p { color: var(--text); }

/* 헤더 / 탭 */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background: var(--bg) !important;
  border-bottom-color: var(--border);
  color: var(--text);
}
[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header__topic { color: #F1F5F9; }
[data-md-color-scheme="slate"] .md-header__button { color: #CBD5E1; }
[data-md-color-scheme="slate"] .md-tabs__link { color: #CBD5E1; }
[data-md-color-scheme="slate"] .md-tabs__link--active { color: #C4B5FD !important; }

/* 검색박스 */
[data-md-color-scheme="slate"] .md-search__input {
  background: var(--bg-subtle);
  color: var(--text);
}
[data-md-color-scheme="slate"] .md-search__input::placeholder { color: var(--text-3); }

/* 인라인 코드 */
[data-md-color-scheme="slate"] .md-typeset code {
  background: var(--bg-subtle);
  color: #C4B5FD;
}

/* 코드 블록 */
[data-md-color-scheme="slate"] .md-typeset pre > code {
  background: #0A0D14;
  color: #E2E8F0;
  border: 1px solid var(--border);
}

/* 테이블 */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border-color: var(--border);
  background: var(--bg-subtle);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: var(--bg-soft);
  color: #F1F5F9;
  border-bottom-color: var(--border);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-top-color: var(--border);
  color: var(--text);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background: rgba(139, 92, 246, 0.08);
}

/* 사이드바 */
[data-md-color-scheme="slate"] .md-nav__title { color: #CBD5E1; }
[data-md-color-scheme="slate"] .md-nav__link { color: var(--text-2); }
[data-md-color-scheme="slate"] .md-nav__link:hover { color: #C4B5FD; }
[data-md-color-scheme="slate"] .md-nav__link--active { color: #C4B5FD !important; }
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link--active {
  border-left-color: #C4B5FD;
}

/* 인용구 */
[data-md-color-scheme="slate"] .md-typeset blockquote {
  background: rgba(139, 92, 246, 0.08);
  border-left-color: #8B5CF6;
  color: var(--text);
}

/* Admonition */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
}
[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset summary { color: #F1F5F9; }

/* 카드 그리드 — 가장 문제었던 히어로 박스/카드 */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > * {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > *:hover {
  background: var(--bg-soft);
  border-color: #6D28D9;
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > * h2,
[data-md-color-scheme="slate"] .md-typeset .grid.cards > * h3 {
  color: #FFFFFF;
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > * p {
  color: var(--text-2);
}

/* 버튼 — 쟁하지 않게 톤다운 */
[data-md-color-scheme="slate"] .md-typeset .md-button {
  background: transparent;
  color: #C4B5FD;
  border: 1px solid rgba(196, 181, 253, 0.4);
}
[data-md-color-scheme="slate"] .md-typeset .md-button:hover,
[data-md-color-scheme="slate"] .md-typeset .md-button:focus {
  background: rgba(139, 92, 246, 0.15);
  color: #DDD6FE;
  border-color: #8B5CF6;
}

/* 링크 */
[data-md-color-scheme="slate"] .md-typeset a { color: #C4B5FD; }
[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #DDD6FE;
  border-bottom-color: rgba(196, 181, 253, 0.5);
}

/* 푸터 */
[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer-meta {
  background: var(--bg);
  border-top-color: var(--border);
  color: var(--text-3);
}

/* 스크롤바 */
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: #2A2F3A;
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: #3A3F4A;
}