/* QuantiqDSL 문서 커스텀 스타일 */

/* ─── 색상 변수 ─────────────────────────────── */
:root {
  --md-primary-fg-color: #6e56cf;
  --md-accent-fg-color: #f59e0b;

  --q-radius-sm: 0.5rem;
  --q-radius-md: 0.85rem;
  --q-radius-lg: 1.2rem;

  --q-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --q-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
  --q-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);

  --q-card-bg: #ffffff;
  --q-card-border: rgba(110, 86, 207, 0.14);
  --q-grid-gap: 1rem;

  --q-step-accent: #6e56cf;
  --q-step-bg: rgba(110, 86, 207, 0.06);
}

[data-md-color-scheme="slate"] {
  --q-card-bg: rgba(255, 255, 255, 0.03);
  --q-card-border: rgba(245, 158, 11, 0.20);
  --q-shadow-sm: 0 2px 8px rgba(2, 6, 23, 0.30);
  --q-shadow-md: 0 8px 24px rgba(2, 6, 23, 0.40);
  --q-shadow-lg: 0 16px 40px rgba(2, 6, 23, 0.50);
  --q-step-bg: rgba(110, 86, 207, 0.10);
}

/* ─── 타이포그래피 ─────────────────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  letter-spacing: -0.018em;
}

.md-typeset h1 {
  font-weight: 800;
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.md-typeset h2 {
  font-weight: 720;
  margin-top: 2.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
}

.md-typeset h3 {
  font-weight: 660;
  margin-top: 1.6rem;
}

/* 첫 h1 아래 서브타이틀 스타일 */
.md-typeset > h1 + p {
  font-size: 1.08em;
  color: color-mix(in srgb, var(--md-default-fg-color) 72%, transparent);
  line-height: 1.65;
  margin-bottom: 1.6rem;
}

/* ─── 코드 블록 ─────────────────────────────── */
.md-typeset code {
  font-size: 0.83em;
  border-radius: 0.3rem;
  padding: 0.15em 0.4em;
}

.md-typeset .highlight,
.md-typeset pre > code {
  border-radius: var(--q-radius-md);
}

.md-typeset .highlight {
  box-shadow: var(--q-shadow-sm);
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
}

/* 코드 블록 파일명 레이블 */
.md-typeset .highlight .filename {
  font-size: 0.78em;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

/* ─── 테이블 ─────────────────────────────────── */
.md-typeset table:not([class]) {
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
  border-radius: var(--q-radius-md);
  overflow: hidden;
  box-shadow: var(--q-shadow-sm);
  font-size: 0.9em;
}

.md-typeset table:not([class]) th {
  font-weight: 700;
  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
  white-space: nowrap;
}

.md-typeset table:not([class]) td {
  vertical-align: middle;
}

.md-typeset table:not([class]) tr:hover {
  background: color-mix(in srgb, var(--md-primary-fg-color) 5%, transparent);
}

/* ─── 어드모니션(callout) ────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--q-radius-md);
  border-width: 1px;
  box-shadow: var(--q-shadow-sm);
  font-size: 0.92em;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: color-mix(in srgb, var(--md-accent-fg-color) 60%, transparent);
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: color-mix(in srgb, var(--md-primary-fg-color) 40%, transparent);
}

/* ─── 카드 그리드 ────────────────────────────── */
.md-typeset .grid.cards > ul {
  gap: var(--q-grid-gap);
}

.md-typeset .grid.cards > ul > li {
  border-radius: var(--q-radius-md);
  border: 1px solid var(--q-card-border);
  background: var(--q-card-bg);
  box-shadow: var(--q-shadow-sm);
  transition: transform 140ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-3px);
  box-shadow: var(--q-shadow-md);
  border-color: color-mix(in srgb, var(--md-accent-fg-color) 45%, var(--q-card-border));
}

.md-typeset .grid.cards > ul > li > p:first-child {
  font-size: 0.88em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  opacity: 0.65;
}

/* ─── 함수 시그니처 블록 ─────────────────────── */
.md-typeset .func-signature {
  background: color-mix(in srgb, var(--md-primary-fg-color) 7%, var(--q-card-bg));
  border: 1px solid var(--q-card-border);
  border-left: 4px solid var(--md-accent-fg-color);
  border-radius: 0 var(--q-radius-sm) var(--q-radius-sm) 0;
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.88em;
  line-height: 1.6;
}

.md-typeset .returns {
  background: color-mix(in srgb, var(--md-primary-fg-color) 8%, var(--q-card-bg));
  border-left: 4px solid var(--md-primary-fg-color);
  border-radius: var(--q-radius-sm);
  padding: 0.6rem 1rem;
  margin: 0.8rem 0;
  font-size: 0.9em;
}

/* ─── 체크리스트 (task list) ─────────────────── */
.md-typeset .task-list-item {
  list-style: none;
  position: relative;
  padding-left: 0.2em;
}

.md-typeset .task-list-control {
  margin-right: 0.5em;
  accent-color: var(--md-primary-fg-color);
}

/* ─── 헤더 & 탭 ─────────────────────────────── */
.md-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.md-header__title {
  font-weight: 760;
  letter-spacing: -0.02em;
}

.md-tabs {
  border-bottom: 1px solid color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
}

.md-tabs__link {
  font-weight: 560;
  letter-spacing: -0.01em;
}

.md-tabs__link--active {
  font-weight: 700;
}

/* ─── 사이드바 내비게이션 ────────────────────── */
.md-nav__link--active {
  font-weight: 700;
  color: var(--md-primary-fg-color) !important;
}

.md-nav__item .md-nav__link:hover {
  font-weight: 600;
}

.md-nav__title {
  font-weight: 700;
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 14.5rem;
  }
}

/* ─── 검색 ──────────────────────────────────── */
.md-search__form {
  border-radius: 999px;
}

/* ─── 수평선 구분자 ──────────────────────────── */
.md-typeset hr {
  border-color: color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
  margin: 2.2rem 0;
}

/* ─── 홈페이지 히어로 섹션 ──────────────────── */
.q-hero {
  padding: 3rem 0 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
}

.q-hero__title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.q-hero__subtitle {
  font-size: 1.15rem;
  line-height: 1.6;
  opacity: 0.72;
  max-width: 44rem;
  margin-bottom: 1.5rem;
}

/* ─── 단계 번호 강조 ──────────────────────────── */
.md-typeset h2[id^="1"] + *,
.md-typeset h2[id^="2"] + *,
.md-typeset h2[id^="3"] + *,
.md-typeset h2[id^="4"] + * {
  /* 단계별 콘텐츠 여백 */
  margin-top: 0.8rem;
}

/* ─── 키보드 단축키 ──────────────────────────── */
.md-typeset kbd {
  border-radius: 0.3rem;
  font-size: 0.8em;
  padding: 0.15em 0.45em;
  box-shadow: 0 1px 0 1px color-mix(in srgb, var(--md-default-fg-color) 25%, transparent);
}

/* ─── 푸터 ──────────────────────────────────── */
.md-footer {
  border-top: 1px solid color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
}

/* ─── 반응형: 모바일 ─────────────────────────── */
@media screen and (max-width: 59.9375em) {
  .md-typeset h1 {
    font-size: 1.65rem;
  }

  .md-typeset .grid.cards > ul {
    grid-template-columns: 1fr;
  }
}

/* ─── 접근성: 포커스 링 ──────────────────────── */
:focus-visible {
  outline: 2px solid var(--md-primary-fg-color);
  outline-offset: 2px;
}

/* ─── 인라인 링크 강조 ───────────────────────── */
.md-typeset a:not([class]) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--md-primary-fg-color) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms ease, color 120ms ease;
}

.md-typeset a:not([class]):hover {
  text-decoration-color: var(--md-accent-fg-color);
  color: var(--md-primary-fg-color);
}

/* ─── 학습 경로 스텝 스타일 ─────────────────── */
.md-typeset h2 .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  background: var(--md-primary-fg-color);
  color: #fff;
  border-radius: 50%;
  font-size: 0.65em;
  font-weight: 800;
  margin-right: 0.4em;
  vertical-align: middle;
}

/* ─── 글로벌 순서 있는 목록 ──────────────────── */
.md-typeset ol > li {
  padding-left: 0.2em;
}

.md-typeset ol > li::marker {
  color: var(--md-primary-fg-color);
  font-weight: 700;
}

/* ─── 본문 내 강한 강조 ──────────────────────── */
.md-typeset strong {
  color: inherit;
  font-weight: 720;
}

/* ─── 함수 시그니처 다중 줄 지원 ────────────── */
.md-typeset .func-signature {
  white-space: pre-wrap;
  word-break: break-all;
}

/* ─── 코드 블록 상단 여백 축소 ──────────────── */
.md-typeset .highlight:not(:first-child) {
  margin-top: 0.8rem;
}

/* ─── 표 내 코드 ────────────────────────────── */
.md-typeset table code {
  font-size: 0.82em;
  background: color-mix(in srgb, var(--md-primary-fg-color) 9%, transparent);
  padding: 0.12em 0.38em;
  border-radius: 0.28rem;
}

/* ─── content에서 HR 아래 여백 ──────────────── */
.md-typeset hr + * {
  margin-top: 0;
}

/* ─── 예제 코드 h3 레이블 ────────────────────── */
.md-typeset h3 + .highlight {
  margin-top: 0.5rem;
}

/* ─── "다음 단계" / "관련 문서" 섹션 구분자 ── */
.md-typeset h2:is([id*="next"], [id*="related"], [id*="-"]) {
  margin-top: 2.8rem;
}

/* ─── 다크모드: 테이블 헤더 ─────────────────── */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: color-mix(in srgb, var(--md-primary-fg-color) 18%, transparent);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background: color-mix(in srgb, var(--md-primary-fg-color) 8%, transparent);
}

/* ─── 다크모드: 코드 블록 테두리 ────────────── */
[data-md-color-scheme="slate"] .md-typeset .highlight {
  border-color: color-mix(in srgb, var(--md-default-fg-color) 18%, transparent);
}

/* ─── 미디엄 화면 최적화 ─────────────────────── */
@media screen and (min-width: 60em) and (max-width: 76.24em) {
  .md-typeset h1 {
    font-size: 1.8rem;
  }
}

/* ─── 인쇄 스타일 ───────────────────────────── */
@media print {
  .md-typeset .admonition,
  .md-typeset details {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .md-typeset .highlight {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}