/* Ensure ASCII art diagrams render with proper monospace alignment */
.md-typeset pre > code {
  font-variant-ligatures: none;
}

/* Slightly larger code font for readability */
.md-typeset code {
  font-size: 0.82em;
}

/* 오른쪽 "현재 페이지" 목차를 되살린다.

   예전에는 감췄다. 본문이 빈 공간으로 넓어지는 것이 이득이라고 봤는데, 그 결과
   영문 본문이 한 줄에 130자 가까이 담겨 시선이 되돌아올 자리를 잃었다(권장 60~80자).
   목차를 되살리면 본문 폭이 읽을 만한 범위로 줄고, 긴 장에서 지금 어디쯤인지도
   보인다. docs.nestjs.com도 "ON THIS PAGE"를 오른쪽에 둔다. */

/* ─── 언어 전환 탭 ────────────────────────────────────────────────────────────
   이 저장소의 가이드는 한 절을 다섯 언어 탭으로 낸다. 기본 스타일은 탭 라벨이
   본문 글씨와 같은 크기여서, 독자가 "지금 무슨 언어를 보고 있는지"를 놓친다.
   라벨을 키우고 고른 탭에 색을 채워 현재 언어가 먼저 보이게 한다. */
.md-typeset .tabbed-labels > label {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.5em 0.85em;
  letter-spacing: 0.01em;
}

.md-typeset .tabbed-set > input:checked + label {
  color: var(--md-primary-fg-color);
  background-color: var(--md-code-bg-color);
  border-radius: 0.2rem 0.2rem 0 0;
}

/* 탭 줄 아래에 얇은 바탕선을 깔아 탭 묶음의 범위를 보이게 한다. */
.md-typeset .tabbed-labels {
  box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset;
}

/* 탭 내용이 어느 탭에 속하는지 왼쪽 선으로 잇는다. */
.md-typeset .tabbed-content {
  border-left: 0.15rem solid var(--md-default-fg-color--lightest);
  padding-left: 0.9rem;
}

/* ─── 절 제목 색 띠 ──────────────────────────────────────────────────────────
   설치 문서처럼 한 페이지가 성격이 다른 갈래로 나뉠 때, 제목을 색이 든 띠로 만들어
   지금 어느 갈래를 읽고 있는지 글을 읽기 전에 보이게 한다. 색은 admonition과 같은
   계열을 쓰고, 왼쪽 굵은 선으로 구획의 시작을 표시한다. */
.md-typeset h2.zlink-band {
  margin-top: 2.2em;
  padding: 0.55rem 0.9rem;
  border-radius: 0.2rem;
  border-left: 0.32rem solid var(--zlink-band-accent);
  background-color: var(--zlink-band-bg);
  box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.06);
}

/* 띠 안의 아이콘을 같은 계열 색으로 칠한다. */
.md-typeset h2.zlink-band .twemoji {
  color: var(--zlink-band-accent);
}

/* 서버 쪽 — 이 저장소의 primary와 같은 teal. */
.md-typeset h2.band-server {
  --zlink-band-accent: #00897b;
  --zlink-band-bg: rgba(0, 137, 123, 0.10);
}

/* client 쪽 — mesh 바깥이라는 것이 색으로 갈라지게 amber. */
.md-typeset h2.band-client {
  --zlink-band-accent: #f57c00;
  --zlink-band-bg: rgba(245, 124, 0, 0.10);
}

/* 부가 구획 — 중립 회색. */
.md-typeset h2.band-aside {
  --zlink-band-accent: var(--md-default-fg-color--light);
  --zlink-band-bg: var(--md-code-bg-color);
}

/* 어두운 테마에서는 바탕을 옅게 두고 선으로 구분한다. */
[data-md-color-scheme="slate"] .md-typeset h2.band-server {
  --zlink-band-bg: rgba(0, 137, 123, 0.18);
}
[data-md-color-scheme="slate"] .md-typeset h2.band-client {
  --zlink-band-bg: rgba(245, 124, 0, 0.16);
}

/* 상단 언어 선택기 — 생성기가 각 장 머리에 넣는 "다른 언어로 보기" 줄.
   헤더의 언어 탭은 그 언어의 가이드 홈으로 가므로, 같은 장에 머무르며 언어만
   바꾸는 길은 이 줄뿐이다. 문장처럼 묻히지 않도록 탭 모양으로 낸다. */
.md-typeset p.zlink-langswitch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 1.2em;
  padding: 0.3rem 0.4rem;
  font-size: 0.72rem;
  border-radius: 0.2rem;
  background-color: var(--md-code-bg-color);
}
/* 앞의 "다른 언어로 보기 —" 안내 문구는 작게 눕힌다. */
.md-typeset p.zlink-langswitch {
  color: var(--md-default-fg-color--light);
}
.md-typeset p.zlink-langswitch > a,
.md-typeset p.zlink-langswitch > strong {
  padding: 0.35em 0.8em;
  border-radius: 0.2rem;
  font-weight: 600;
  line-height: 1.2;
}
.md-typeset p.zlink-langswitch > strong {
  color: var(--md-primary-bg-color);
  background-color: var(--md-primary-fg-color);
}
.md-typeset p.zlink-langswitch > a {
  color: var(--md-default-fg-color--light);
  background-color: var(--md-default-bg-color);
}
.md-typeset p.zlink-langswitch > a:hover {
  color: var(--md-primary-bg-color);
  background-color: var(--md-accent-fg-color);
}

/* archify 다이어그램을 담는 iframe.

   높이를 주지 않으면 브라우저가 기본값 150px을 쓴다. 문서에는 `width:100%`만 적혀
   있어 그림이 잘린 채 나왔다. 그림마다 비율이 달라 높이를 하나로 정할 수 없으므로
   실제 높이는 `zlink-diagram.js`가 안쪽 문서를 재서 넣는다. 여기 적는 값은 그 전까지의
   자리와, 재지 못했을 때의 기본값이다. */
.md-typeset iframe.zlink-diagram {
  display: block;
  height: 20rem;
  margin-bottom: 0.3rem;
  border-radius: 0.2rem;
  background-color: var(--md-code-bg-color);
}

/* 헤더의 언어 선택기. 로케일(한국어/English) 선택기와 같은 `md-select` 마크업이라
   자리와 동작은 테마가 맡는다. 여기서는 아이콘 크기만 맞춘다.
   zlink-lang.js가 자리를 잡기 전에는 hidden이라 깜박이지 않는다. 테마의
   `.md-header__option { display: flex }`가 hidden 속성을 덮어쓰므로 여기서 되살린다. */
.md-header__option.zlink-lang[hidden] {
  display: none;
}
.zlink-lang .md-header__button svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* 아이콘 옆에 지금 고른 언어의 이름을 적는다. 아이콘만으로는 무엇을 고르는 자리인지
   드러나지 않아, 상단에서 언어를 바꿀 수 있다는 사실 자체가 보이지 않는다.
   이름은 zlink-lang.js가 채운다. */
.zlink-lang__button {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  width: auto;
  padding-right: 0.4rem;
}
.zlink-lang__label {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
/* 좁은 화면에서는 아이콘만 남긴다. 헤더에 이름까지 둘 폭이 없다. */
@media screen and (max-width: 59.9375em) {
  .zlink-lang__label { display: none; }
}

/* 고른 언어의 nav 묶음을 1차 메뉴로 편다.
   Material은 언어 항목을 접히는 묶음으로 내는데, 그 한 겹을 걷어 안의 묶음
   (시작·기능별 가이드·동작 원리 …)이 바로 1차가 되게 한다.

   좁은 화면에서는 걸지 않는다. 그쪽 사이드바는 슬라이드 패널이라 한 겹을 강제로 펴면
   패널 전환이 어긋난다. 고르지 않은 언어를 감추는 것은 폭과 무관하게 JS가 한다. */
@media screen and (min-width: 76.25em) {
  .md-nav__item.zlink-lang-current > .md-nav__link,
  .md-nav__item.zlink-lang-current > label.md-nav__link,
  .md-nav__item.zlink-lang-current > .md-nav__toggle { display: none; }
  .md-nav__item.zlink-lang-current > .md-nav {
    display: block;
    visibility: visible;
    opacity: 1;
    margin-left: 0;
    padding-left: 0;
    transform: none;
  }
  .md-nav__item.zlink-lang-current > .md-nav > .md-nav__title { display: none; }
  .md-nav__item.zlink-lang-current > .md-nav > .md-nav__list { padding-left: 0; }
}