/* unwiki 테마: Material 위에 얹는 Look & Feel.
 *
 * 방향: 회색 단계 + 액센트 1개, 그림자 없이 1px 보더로 구분, 라벨/메타는 모노스페이스.
 * 라이트는 흰 바탕에 블랙 액션(Vercel 풍), 다크는 #171717 바탕에 그린 액센트(Supabase 풍).
 * Material 의 CSS 변수를 덮어써서 두 팔레트가 하나의 시스템으로 움직이게 한다.
 * 첫 페이지 전용 스타일은 uw-home.css 에 따로 둔다. */

:root {
  /* Material 이 CSS mask 로 그리는 아이콘도 Lucide 로 (copy, chevron-left/right, text, x) */
  --md-clipboard-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>');
  --md-nav-icon--prev: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>');
  --md-nav-icon--next: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>');
  --md-toc-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 6H3"/><path d="M15 12H3"/><path d="M17 18H3"/></svg>');
  --uw-icon-x: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
  --uw-sans: "Geist", "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --uw-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --uw-radius: 8px;
  --uw-radius-lg: 10px;
}

/* ---------- 팔레트 ---------- */

[data-md-color-scheme="default"] {
  --uw-bg: #ffffff;
  --uw-surface: #fafafa;
  --uw-surface-2: #f2f2f2;
  --uw-border: #eaeaea;
  --uw-border-strong: #d4d4d4;
  --uw-fg: #171717;
  --uw-fg-strong: #000000;
  --uw-muted: #666666;
  --uw-link: #0068d6;
  --uw-accent: #171717;
  --uw-accent-contrast: #ffffff;
  --uw-code-bg: #fafafa;

  --md-default-bg-color: var(--uw-bg);
  --md-default-fg-color: var(--uw-fg);
  --md-default-fg-color--light: var(--uw-muted);
  --md-default-fg-color--lighter: #8a8a8a;
  --md-default-fg-color--lightest: var(--uw-border);
  --md-primary-fg-color: var(--uw-bg);
  --md-primary-fg-color--light: var(--uw-surface);
  --md-primary-fg-color--dark: var(--uw-surface-2);
  --md-primary-bg-color: var(--uw-fg);
  --md-primary-bg-color--light: var(--uw-muted);
  --md-accent-fg-color: var(--uw-link);
  --md-accent-fg-color--transparent: rgba(0, 104, 214, 0.08);
  --md-accent-bg-color: #ffffff;
  --md-typeset-a-color: var(--uw-link);
  --md-typeset-color: var(--uw-fg);
  --md-code-bg-color: var(--uw-code-bg);
  --md-code-fg-color: var(--uw-fg);
  --md-code-hl-color: rgba(0, 104, 214, 0.10);
  --md-code-hl-color--light: rgba(0, 104, 214, 0.06);
  --md-typeset-table-color: var(--uw-border);
  --md-typeset-table-color--light: var(--uw-surface);
  --md-typeset-kbd-color: var(--uw-surface);
  --md-typeset-kbd-accent-color: #ffffff;
  --md-typeset-kbd-border-color: var(--uw-border-strong);
  --md-typeset-mark-color: rgba(255, 213, 0, 0.35);
  --md-footer-bg-color: var(--uw-surface);
  --md-footer-bg-color--dark: var(--uw-surface);
  --md-footer-fg-color: var(--uw-fg);
  --md-footer-fg-color--light: var(--uw-muted);
  --md-footer-fg-color--lighter: var(--uw-muted);
  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;

  /* Pygments: GitHub 라이트에 가까운 차분한 톤 */
  --md-code-hl-keyword-color: #8250df;
  --md-code-hl-function-color: #0068d6;
  --md-code-hl-number-color: #0550ae;
  --md-code-hl-string-color: #0a6b3f;
  --md-code-hl-constant-color: #0550ae;
  --md-code-hl-special-color: #cf222e;
  --md-code-hl-name-color: var(--uw-fg);
  --md-code-hl-operator-color: var(--uw-muted);
  --md-code-hl-punctuation-color: var(--uw-muted);
  --md-code-hl-comment-color: #6e7781;
  --md-code-hl-generic-color: var(--uw-muted);
  --md-code-hl-variable-color: #953800;
}

[data-md-color-scheme="slate"] {
  --uw-bg: #171717;
  --uw-surface: #1c1c1c;
  --uw-surface-2: #232323;
  --uw-border: #2e2e2e;
  --uw-border-strong: #3a3a3a;
  --uw-fg: #ededed;
  --uw-fg-strong: #ffffff;
  --uw-muted: #a0a0a0;
  --uw-link: #3ecf8e;
  --uw-accent: #3ecf8e;
  --uw-accent-contrast: #0b1f16;
  --uw-code-bg: #111111;

  --md-hue: 0;
  --md-default-bg-color: var(--uw-bg);
  --md-default-bg-color--light: var(--uw-surface);
  --md-default-bg-color--lighter: var(--uw-surface-2);
  --md-default-bg-color--lightest: var(--uw-border);
  --md-default-fg-color: var(--uw-fg);
  --md-default-fg-color--light: var(--uw-muted);
  --md-default-fg-color--lighter: #7a7a7a;
  --md-default-fg-color--lightest: var(--uw-border);
  --md-primary-fg-color: var(--uw-bg);
  --md-primary-fg-color--light: var(--uw-surface);
  --md-primary-fg-color--dark: var(--uw-surface-2);
  --md-primary-bg-color: var(--uw-fg);
  --md-primary-bg-color--light: var(--uw-muted);
  --md-accent-fg-color: var(--uw-link);
  --md-accent-fg-color--transparent: rgba(62, 207, 142, 0.10);
  --md-accent-bg-color: var(--uw-accent-contrast);
  --md-typeset-a-color: var(--uw-link);
  --md-typeset-color: var(--uw-fg);
  --md-code-bg-color: var(--uw-code-bg);
  --md-code-fg-color: var(--uw-fg);
  --md-code-hl-color: rgba(62, 207, 142, 0.12);
  --md-code-hl-color--light: rgba(62, 207, 142, 0.07);
  --md-typeset-table-color: var(--uw-border);
  --md-typeset-table-color--light: var(--uw-surface);
  --md-typeset-kbd-color: var(--uw-surface);
  --md-typeset-kbd-accent-color: var(--uw-surface-2);
  --md-typeset-kbd-border-color: var(--uw-border-strong);
  --md-typeset-mark-color: rgba(62, 207, 142, 0.25);
  --md-admonition-fg-color: var(--uw-fg);
  --md-admonition-bg-color: var(--uw-surface);
  --md-footer-bg-color: #121212;
  --md-footer-bg-color--dark: #121212;
  --md-footer-fg-color: var(--uw-fg);
  --md-footer-fg-color--light: var(--uw-muted);
  --md-footer-fg-color--lighter: var(--uw-muted);
  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;

  --md-code-hl-keyword-color: #c792ea;
  --md-code-hl-function-color: #3ecf8e;
  --md-code-hl-number-color: #f78c6c;
  --md-code-hl-string-color: #c3e88d;
  --md-code-hl-constant-color: #f78c6c;
  --md-code-hl-special-color: #ff6e6e;
  --md-code-hl-name-color: var(--uw-fg);
  --md-code-hl-operator-color: var(--uw-muted);
  --md-code-hl-punctuation-color: var(--uw-muted);
  --md-code-hl-comment-color: #7f7f7f;
  --md-code-hl-generic-color: var(--uw-muted);
  --md-code-hl-variable-color: #f0a35e;
}

/* ---------- 레이아웃 ---------- */

/* Material 은 1600px / 2000px 이상에서 html 글자 크기를 137.5% / 150% 로 키워
 * rem 으로 잡힌 글자와 여백이 모두 커진다. 125%(1rem = 20px) 로 고정하고
 * 넓은 화면은 본문 너비로 쓴다. */
html {
  font-size: 125%;
}
.md-grid {
  max-width: none; /* 화면 끝까지 쓴다 (사이드바는 양 끝에 붙고 남는 너비는 본문으로) */
}
/* 메뉴 글자가 헤더 로고와 같은 선(24px)에 오도록 */
.md-main__inner {
  padding: 0 0.6rem;
}
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 12rem; /* 240px */
  }
}
@media screen and (min-width: 60em) {
  .md-sidebar--secondary {
    width: 10rem; /* 200px */
  }
}
/* 데스크톱에서 붙어 있는 사이드바만 헤더 아래에 둔다 (드로어는 화면 맨 위부터) */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    top: 2.8rem; /* 헤더 높이 */
  }
}
@media screen and (min-width: 60em) {
  .md-sidebar--secondary {
    top: 2.8rem;
  }
}
.md-main__inner {
  margin-top: 0;
}
@media screen and (min-width: 60em) {
  .md-content__inner {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}

/* ---------- 기본 타이포 ---------- */

body,
.md-typeset {
  font-family: var(--uw-sans);
  -webkit-font-smoothing: antialiased;
}
.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: var(--uw-mono);
}
.md-typeset {
  font-size: 0.75rem; /* 15px */
  line-height: 1.65;
}
.md-typeset h1 {
  margin: 0 0 1.2rem;
  font-size: 1.5rem; /* 30px */
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--uw-fg-strong);
}
.md-typeset h2 {
  margin: 2em 0 0.6em;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--uw-border);
  font-size: 1.1rem; /* 22px */
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--uw-fg-strong);
}
.md-typeset h3 {
  margin: 1.6em 0 0.5em;
  font-size: 0.9rem; /* 18px */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--uw-fg-strong);
}
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--uw-fg-strong);
}
.md-typeset a {
  text-decoration: none;
}
.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--uw-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.md-typeset a code {
  color: var(--uw-link);
}
.md-typeset hr {
  border-bottom: 1px solid var(--uw-border);
}
/* 제목 아래 문서 정보 (partials/content.html) */
.md-typeset .uw-lede {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  margin: -0.9rem 0 1.2rem;
  font-family: var(--uw-mono);
  font-size: 0.65rem;
  color: var(--uw-muted);
}
.md-typeset .uw-lede span + span::before {
  content: "·";
  margin-right: 0.6rem;
}

/* ---------- 헤더 ---------- */

.md-header {
  background: var(--uw-bg);
  color: var(--uw-fg);
  border-bottom: 1px solid var(--uw-border);
  box-shadow: none !important;
  transition: none;
}
.md-header--shadow {
  box-shadow: none;
}
.md-header__inner {
  height: 2.8rem; /* 56px */
  padding: 0 1.2rem;
  gap: 0.2rem;
}
/* 아이콘 버튼: 36px 정사각, 테두리 없이 호버 때만 회색 바탕 */
.md-header__button {
  color: var(--uw-fg);
  margin: 0;
}
.md-header__button.md-icon:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border-radius: var(--uw-radius);
}
.md-header__button.md-icon svg {
  width: 0.9rem; /* 18px */
  height: 0.9rem;
}
.md-header__button:hover {
  opacity: 1;
  color: var(--uw-fg-strong);
}
/* 팔레트 토글: Material 의 .md-option:checked + label { display: block } 보다 세게 */
.md-option:checked + .md-header__button.md-icon:not([hidden]) {
  display: inline-flex;
}
.md-header__button.md-icon:hover {
  background: var(--uw-surface-2);
}
/* 로고: 흰 바탕의 아바타 그림(theme.logo)을 32px 타일 안에 22px 로, 사방 5px 여백 */
.md-header__button.md-logo {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 -0.2rem;
  padding: 0.2rem;
  border-radius: var(--uw-radius-lg);
}
.md-header__button.md-logo img {
  display: block;
  box-sizing: content-box;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0.2rem;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius);
  background: #fff;
}
@media screen and (min-width: 76.25em) {
  .md-header__button.md-icon[for="__drawer"] {
    display: none;
  }
}
/* 좁은 화면에서도 메뉴 버튼 옆에 로고를 둔다 */
@media screen and (max-width: 76.234375em) {
  .md-header__button.md-logo {
    display: inline-flex;
  }
}
/* 메뉴 버튼은 로고 앞에 */
.md-header__button[for="__drawer"] {
  order: -1;
}
[dir="ltr"] .md-header__title {
  margin-left: 0.3rem;
}
.md-header__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 2.8rem;
  height: 2.8rem;
}
.md-header__topic:first-child {
  font-weight: 600;
}
.md-header__topic + .md-header__topic {
  font-weight: 500;
  color: var(--uw-muted);
}
/* 검색 버튼과 팔레트 토글 사이 구분선 (partials/header.html) */
.uw-header-divider {
  flex: none;
  width: 1px;
  height: 1rem;
  margin: 0 0.2rem;
  background: var(--uw-border);
}
.md-header__option {
  margin: 0;
}

/* 게임·도구 메뉴 (partials/header.html, javascripts/uw-nav-menu.js): shadcn/ui Navigation Menu 처럼
 * 고스트 버튼(아이콘 + 꺾쇠), 아래로 펼쳐지는 보더 패널 안에 아이콘·제목·설명 격자 */
.uw-navmenu {
  position: relative;
  flex: none;
  margin-right: 0.4rem;
}
.uw-navmenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  height: 1.8rem;
  padding: 0 0.5rem 0 0.6rem;
  border: 0;
  border-radius: var(--uw-radius);
  background: transparent;
  color: var(--uw-fg);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
}
.uw-navmenu__trigger:hover,
.uw-navmenu__trigger[aria-expanded="true"],
.uw-navmenu__trigger[data-active] {
  background: var(--uw-surface-2);
  color: var(--uw-fg-strong);
}
.uw-navmenu__trigger:focus-visible {
  outline: 2px solid var(--uw-border-strong);
  outline-offset: 1px;
}
.uw-navmenu__trigger svg {
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
}
.uw-navmenu__trigger svg:first-child {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.15rem;
}
.uw-navmenu__trigger .lucide-chevron-down {
  transition: transform 0.2s;
}
/* 슬라이드 버튼: 메뉴 버튼 모양의 링크 (펼칠 패널이 없다) */
.uw-navlink {
  flex: none;
  margin-right: 0.4rem;
  padding-right: 0.6rem;
  text-decoration: none;
}
.uw-navmenu__trigger[aria-expanded="true"] .lucide-chevron-down {
  transform: rotate(180deg);
}
.uw-navmenu__content {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 10;
  box-sizing: border-box;
  width: 30rem; /* 게임 설명 문장이 두 줄 안에 들어가도록 */
  padding: 0.3rem;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  background: var(--uw-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.2rem) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.15s, transform 0.15s, visibility 0s 0.15s;
}
.uw-navmenu[data-state="open"] .uw-navmenu__content {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.15s, transform 0.15s;
}
.uw-navmenu__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 긴 설명이 열을 패널 밖으로 밀어내지 않게 */
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.uw-navmenu__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  border-radius: var(--uw-radius);
  color: var(--uw-fg);
}
.uw-navmenu__link:hover,
.uw-navmenu__link:focus-visible,
.uw-navmenu__link[aria-current="page"] {
  background: var(--uw-surface-2);
  color: var(--uw-fg-strong);
  outline: none;
}
.uw-navmenu__link img,
.uw-navmenu__link > svg {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.35rem;
}
.uw-navmenu__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.uw-navmenu__title {
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
}
/* 설명(mkdocs.yml 의 description)은 문장이라 두 줄까지 보이고 넘치면 말줄임 */
.uw-navmenu__desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.6rem;
  line-height: 1.4;
  color: var(--uw-muted);
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.uw-navmenu__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.3rem;
  padding: 0.5rem 0.5rem 0.4rem;
  border-top: 1px solid var(--uw-border);
  font-size: 0.65rem;
  color: var(--uw-muted);
}
.uw-navmenu__all:hover {
  color: var(--uw-fg-strong);
}
.uw-navmenu__all svg {
  width: 0.7rem;
  height: 0.7rem;
}
/* 묶음 메뉴(도구): 항목이 많아 묶음 제목 아래 한 줄짜리 항목을 여러 단으로. 트리거가 헤더 오른쪽 끝에서
 * 멀어도 화면 밖으로 나가지 않게 헤더 오른쪽 여백(1.2rem)에 맞춰 화면 기준으로 띄운다 */
.uw-navmenu--grouped .uw-navmenu__content {
  position: fixed;
  top: 2.7rem;
  right: 1.2rem;
  width: min(36rem, calc(100vw - 2.4rem));
  max-height: calc(100vh - 3.3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.uw-navmenu__groups {
  columns: 3;
  column-gap: 0.3rem;
}
.uw-navmenu__group {
  break-inside: avoid;
  padding-bottom: 0.3rem;
}
.uw-navmenu__group-title {
  display: block;
  padding: 0.4rem 0.5rem 0.2rem;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--uw-muted);
}
.uw-navmenu--grouped .uw-navmenu__grid {
  grid-template-columns: minmax(0, 1fr); /* 긴 제목이 단을 밀어내지 않고 말줄임되게 */
}
.uw-navmenu--grouped .uw-navmenu__link {
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
}
.uw-navmenu--grouped .uw-navmenu__link > svg {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0;
  color: var(--uw-muted);
}
.uw-navmenu--grouped .uw-navmenu__link:hover > svg,
.uw-navmenu--grouped .uw-navmenu__link:focus-visible > svg,
.uw-navmenu--grouped .uw-navmenu__link[aria-current="page"] > svg {
  color: inherit;
}
.uw-navmenu--grouped .uw-navmenu__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 좁은 화면: 버튼은 아이콘만, 패널은 화면 폭에 맞춰 헤더 바로 아래에 */
@media screen and (max-width: 44.9375em) {
  .uw-navmenu {
    position: static;
  }
  .uw-navmenu__trigger {
    justify-content: center;
    width: 1.8rem;
    padding: 0;
  }
  .uw-navmenu__trigger svg:first-child {
    margin-right: 0;
  }
  .uw-navmenu__label,
  .uw-navmenu__trigger .lucide-chevron-down {
    display: none;
  }
  .uw-navmenu__content {
    position: fixed;
    top: 3.1rem;
    left: 0.6rem;
    right: 0.6rem;
    width: auto;
  }
  .uw-navmenu__grid {
    grid-template-columns: 1fr;
  }
  .uw-navmenu--grouped .uw-navmenu__content {
    top: 3.1rem;
    right: 0.6rem;
    width: auto;
    max-height: calc(100vh - 3.7rem);
  }
  .uw-navmenu__groups {
    columns: 2;
  }
}

/* 검색 버튼 (Pagefind 모달 열기) */
.uw-search-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-sizing: border-box;
  height: 1.8rem;
  margin: 0 0 0 auto;
  padding: 0 0.3rem 0 0.6rem;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius);
  background: var(--uw-surface);
  color: var(--uw-muted);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  width: 100%;
  max-width: 14rem; /* 280px */
}
.uw-search-button:hover {
  border-color: var(--uw-border-strong);
  color: var(--uw-fg);
}
.uw-search-button svg {
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
}
.uw-search-button__label {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uw-search-button kbd {
  display: inline-flex;
  align-items: center;
  height: 1.1rem;
  box-sizing: border-box;
  font-family: var(--uw-mono);
  font-size: 0.55rem;
  line-height: 1;
  padding: 0 0.3rem;
  border: 1px solid var(--uw-border);
  border-radius: 5px;
  background: var(--uw-bg);
  color: var(--uw-muted);
}
@media screen and (max-width: 59.9375em) {
  .uw-search-button {
    width: 1.8rem;
    padding: 0;
    justify-content: center;
    margin-left: auto;
  }
  .uw-search-button__label,
  .uw-search-button kbd {
    display: none;
  }
}

/* 검색 모달 */
.uw-search-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--uw-fg);
}
.uw-search-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.uw-search-dialog__panel {
  box-sizing: border-box;
  width: min(44rem, calc(100% - 2rem));
  max-height: calc(100% - 4rem);
  margin: 4rem auto 0;
  padding: 0.8rem 1rem 1rem;
  overflow: auto;
  border: 1px solid var(--uw-border);
  border-radius: 12px;
  background: var(--uw-bg);
}
.uw-search-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
  font-family: var(--uw-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uw-muted);
}
.uw-search-dialog__close {
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--uw-border);
  border-radius: 5px;
  background: var(--uw-surface);
  color: var(--uw-muted);
  cursor: pointer;
}
.uw-search-dialog__close:hover {
  color: var(--uw-fg);
}
/* 문서 이름 검색 (javascripts/uw-search.js) */
.uw-search__input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius);
  background: var(--uw-surface);
  color: var(--uw-fg);
  font: 400 0.8rem var(--uw-sans);
}
.uw-search__input:focus {
  outline: 2px solid var(--uw-link);
  outline-offset: -1px;
}
.uw-search__status {
  margin: 0.6rem 0 0.3rem;
  font-size: 0.62rem;
  color: var(--uw-muted);
}
.uw-search__results {
  margin: 0;
  padding: 0;
  list-style: none;
}
.uw-search__results li {
  margin: 0;
  border-top: 1px solid var(--uw-border);
}
.uw-search__results a {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  color: var(--uw-fg);
  text-decoration: none;
}
.uw-search__results li[aria-selected="true"] a {
  background: var(--uw-surface-2);
}
.uw-search__title {
  font-size: 0.75rem;
  font-weight: 600;
}
.uw-search__target {
  font-size: 0.65rem;
  color: var(--uw-muted);
}
.uw-search-dialog mark {
  background: var(--md-typeset-mark-color);
  color: inherit;
}

/* ---------- 사이드바 / 목차 ---------- */

.md-sidebar {
  padding-top: 1.2rem;
}
.md-nav {
  font-size: 0.7rem; /* 14px */
}
.md-nav__title {
  font-family: var(--uw-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--uw-muted);
}
.md-nav--primary .md-nav__title {
  padding-left: 0.4rem;
}
/* 데스크톱 사이드바 제목: 사이트 이름 대신 "분야" */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    font-size: 0;
    line-height: 0;
    padding-bottom: 0.4rem;
  }
  .md-nav--primary > .md-nav__title::after {
    content: "분야";
  }
  html[lang="en"] .md-nav--primary > .md-nav__title::after {
    content: "Fields";
  }
  .md-nav--primary > .md-nav__title::after {
    font-family: var(--uw-sans);
    font-size: 0.6rem;
    line-height: 1.4;
    letter-spacing: 0;
  }
}
/* 목차 제목: Lucide text 아이콘 + 진한 라벨 */
.md-nav--secondary .md-nav__title {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-left: 0;
  box-shadow: none;
  background: transparent;
  font-size: 0.65rem;
  color: var(--uw-fg);
}
.md-nav--secondary .md-nav__title::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background-color: currentColor;
  -webkit-mask: var(--md-toc-icon) center / contain no-repeat;
  mask: var(--md-toc-icon) center / contain no-repeat;
}
.md-nav__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.md-nav--primary .md-nav__item {
  padding: 0;
}
.md-nav--primary .md-nav__link {
  margin: 0;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  color: var(--uw-muted);
  line-height: 1.4;
}
.md-nav--primary .md-nav__link:hover,
.md-nav--primary .md-nav__link:focus {
  color: var(--uw-fg);
  background: var(--uw-surface);
}
.md-nav--primary .md-nav__link--active,
.md-nav--primary .md-nav__link--active:hover {
  color: var(--uw-fg-strong);
  background: var(--uw-surface-2);
  font-weight: 500;
}
/* 다크: 왼쪽 띠 없이 바탕만 한 단계 밝게 (shadcn 의 accent 바탕) */
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link--active:hover {
  background: #2a2a2a;
}
/* 사이드바 맨 아래 외부 링크 (partials/nav.html): "분야" 와 같은 라벨, 항목 모양은 메뉴와 같게 */
.uw-nav-ext {
  margin-top: 1rem;
}
.uw-nav-ext__title {
  padding: 0 0.4rem 0.4rem;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--uw-muted);
}
.md-nav--primary .uw-nav-ext__link {
  align-items: center;
  gap: 0.4rem;
}
.uw-nav-ext__link img,
.uw-nav-ext__link > svg:first-child {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
}
/* 새 탭으로 열린다는 표시 */
.uw-nav-ext__link > svg:last-child {
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  margin-left: auto;
  color: var(--uw-muted);
}
@media screen and (max-width: 76.234375em) {
  .uw-nav-ext {
    margin-top: 0;
    padding: 0.8rem 0.6rem;
    border-top: 1px solid var(--uw-border);
  }
}
/* 목차 (shadcn 식): 세로선 없이 들여쓰기만, 현재 항목은 진한 글자.
 * Material 이 목록마다 주는 왼쪽/아래 여백은 없애고 들여쓰기는 링크 padding 으로만 준다. */
[dir] .md-nav--secondary .md-nav__list {
  gap: 0;
  padding: 0;
}
[dir] .md-nav--secondary .md-nav__item > .md-nav__link {
  margin-right: 0;
}
.md-nav--secondary .md-nav__item {
  padding: 0;
}
.md-nav--secondary .md-nav__item .md-nav {
  margin: 0;
  padding: 0;
}
.md-nav--secondary .md-nav__link {
  margin: 0;
  padding: 0.2rem 0;
  color: var(--uw-muted);
  font-size: 0.65rem; /* 13px */
  line-height: 1.4;
  transition: color 120ms;
}
.md-nav--secondary .md-nav__item .md-nav__item .md-nav__link {
  padding-left: 0.8rem;
}
.md-nav--secondary .md-nav__item .md-nav__item .md-nav__item .md-nav__link {
  padding-left: 1.6rem;
}
.md-nav--secondary .md-nav__link:hover {
  color: var(--uw-fg);
}
.md-nav--secondary .md-nav__link--active {
  color: var(--uw-fg-strong);
  font-weight: 500;
}
.md-nav--secondary .md-nav__link--active > :first-child {
  color: inherit;
}

/* 모바일 드로어: 화면 맨 위부터, 헤더와 같은 56px 머리(로고 + 이름 + 닫기 X),
 * 항목은 데스크톱 사이드바와 같은 크기/모양 */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.8rem;
    padding: 0 0.6rem 0 1.2rem;
    border-bottom: 1px solid var(--uw-border);
    background: var(--uw-bg);
    font-family: var(--uw-sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--uw-fg);
  }
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background: var(--uw-bg);
    color: var(--uw-fg);
    font-weight: 600;
  }
  .md-nav--primary .md-nav__title .md-nav__button.md-logo {
    position: static;
    display: block;
    flex: none;
    margin: 0;
    padding: 0;
  }
  .md-nav--primary .md-nav__title .md-nav__button.md-logo img {
    box-sizing: content-box;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0.2rem;
    border: 1px solid var(--uw-border);
    border-radius: var(--uw-radius);
    background: #fff;
  }
  /* 닫기 (제목 label 이 __drawer 를 토글한다) */
  .md-nav--primary .md-nav__title[for="__drawer"]::after {
    content: "";
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    margin-left: auto;
    border-radius: var(--uw-radius);
    background-color: var(--uw-muted);
    -webkit-mask: var(--uw-icon-x) center / 0.9rem no-repeat;
    mask: var(--uw-icon-x) center / 0.9rem no-repeat;
  }
  .md-nav--primary .md-nav__title[for="__drawer"]:hover::after {
    background-color: var(--uw-fg);
  }
  .md-nav--primary .md-nav__item,
  .md-nav--primary .md-nav__title ~ .md-nav__list {
    font-size: 0.7rem; /* 14px, 데스크톱과 같게 */
    line-height: 1.4;
  }
  .md-nav--primary .md-nav__title ~ .md-nav__list {
    box-shadow: none;
    padding: 0.8rem 0.6rem;
  }
  /* 데스크톱 사이드바처럼 "분야" 라벨 */
  .md-nav--primary > .md-nav__list::before {
    content: "분야";
  }
  html[lang="en"] .md-nav--primary > .md-nav__list::before {
    content: "Fields";
  }
  .md-nav--primary > .md-nav__list::before {
    padding: 0 0.4rem 0.4rem;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--uw-muted);
  }
  .md-nav--primary .md-nav__item {
    border-top: 0;
  }
  .md-nav--primary .md-nav__link {
    margin: 0;
    padding: 0.3rem 0.4rem;
  }
  .md-nav--primary .md-nav__item--active > .md-nav__link,
  .md-nav--primary .md-nav__item--active > .md-nav__link:hover {
    color: var(--uw-fg-strong);
  }
  /* 현재 문서 옆의 목차 열기 아이콘 */
  .md-nav--primary .md-nav__link[for="__toc"] .md-icon {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--uw-muted);
  }
}

/* ---------- 본문 요소 ---------- */

.md-content {
  min-height: calc(100vh - 10rem); /* 짧은 문서에서도 푸터가 화면 아래쪽에 오게 */
}
.md-content__inner {
  margin-top: 1.4rem;
  padding-bottom: 2rem;
}
.md-content__inner::before {
  height: 0;
}
.md-content__button {
  color: var(--uw-muted);
}

/* 코드 블록: 보더 + 둥근 모서리, 파일명/언어 탭 */
.md-typeset pre > code {
  padding: 0.8rem 1rem;
  border-radius: var(--uw-radius-lg);
  font-size: 0.66rem;
  line-height: 1.65;
}
.md-typeset .highlight,
.md-typeset pre {
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  overflow: hidden;
}
.md-typeset .highlight pre {
  border: 0;
  border-radius: 0;
  margin: 0;
}
.md-typeset .highlight + .highlight,
.md-typeset pre + pre {
  margin-top: 0.8em;
}
.md-typeset .highlight span.filename {
  border-bottom: 1px solid var(--uw-border);
  border-radius: 0;
  background: var(--uw-surface);
  font-family: var(--uw-mono);
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--uw-muted);
  padding: 0.5rem 1rem;
}
.md-typeset .highlight .linenos {
  color: var(--uw-muted);
  opacity: 0.6;
}
.md-typeset .md-clipboard {
  color: var(--uw-muted);
  border-radius: 6px;
}
.md-typeset .md-clipboard:hover {
  color: var(--uw-fg);
}
.md-typeset code {
  padding: 0.1em 0.4em;
  border: 1px solid var(--uw-border);
  border-radius: 5px;
  background: var(--uw-code-bg);
  font-size: 0.84em;
  word-break: break-word;
}
.md-typeset pre code,
.md-typeset .highlight code {
  border: 0;
  border-radius: 0;
}
.md-typeset kbd {
  border-radius: 5px;
  box-shadow: none;
  border: 1px solid var(--md-typeset-kbd-border-color);
  background: var(--md-typeset-kbd-color);
  color: var(--uw-fg);
  font-size: 0.7em;
  padding: 0.1em 0.45em;
  vertical-align: 0.1em;
}

/* 표 */
.md-typeset table:not([class]) {
  font-size: 0.7rem;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  box-shadow: none;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--uw-surface);
  color: var(--uw-muted);
  font-family: var(--uw-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55em 1em;
  border-bottom: 1px solid var(--uw-border);
  min-width: 0;
}
.md-typeset table:not([class]) td {
  padding: 0.65em 1em;
  border-top: 1px solid var(--uw-border);
  vertical-align: top;
}
.md-typeset table:not([class]) tbody tr:hover {
  background: var(--uw-surface);
  box-shadow: none;
}
/* 위키에서 변환된 레이아웃용 표(markdown="1" 가 붙은 표)는 흐리게만 */
.md-typeset table[markdown] {
  font-size: inherit;
}
/* 한 칸짜리 분류 상자(틀:List 등, 본문이 칸 하나인 표): 본문 너비로 펼치고 목록을 여러 단으로.
 * Material JS 가 표를 .md-typeset__table 로 감싸므로 그것도 블록으로 편다. */
.md-typeset__table:has(> table:not([class]) > tbody > tr:only-child > td:only-child) {
  display: block;
}
/* 표 칸에는 다단(columns)이 먹지 않으므로 표 구조를 블록으로 푼다 */
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child),
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) > *,
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) > * > tr,
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) > * > tr > td {
  display: block;
}
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) {
  font-size: 0.7rem;
}
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) thead td {
  padding: 0.5em 0.8rem;
  background: var(--uw-surface);
  font-weight: 500;
}
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) thead td > p {
  margin: 0;
}
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) tbody td:has(> ul) {
  columns: 3 12rem;
  column-gap: 1.6rem;
  padding: 0.7em 0.8rem;
}
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) tbody td:has(> ul) > p {
  break-after: avoid;
  break-inside: avoid;
}
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) tbody td:has(> ul) li {
  margin-top: 0.15em;
  margin-bottom: 0.15em;
}
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) tbody td:has(> ul) ul {
  margin-top: 0.15em;
  margin-bottom: 0.6em;
}
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) tbody td:has(> ul) li:not(:has(ul)) {
  break-inside: avoid;
}
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) tbody td:has(> ul) > hr,
.md-typeset table:not([class]):has(> tbody > tr:only-child > td:only-child) tbody td:has(> ul) > p:has(> br:only-child) {
  display: none;
}

/* 인용 / 어드모니션: 색 띠 없이 보더 박스 */
.md-typeset blockquote {
  margin: 1em 0;
  padding: 0.6em 1em;
  border-left: 2px solid var(--uw-border-strong);
  color: var(--uw-muted);
}
.md-typeset .admonition,
.md-typeset details {
  font-size: 0.7rem;
  border: 1px solid var(--uw-border);
  border-left-width: 1px;
  border-radius: var(--uw-radius-lg);
  background: var(--uw-surface);
  box-shadow: none;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent !important;
  border: 0;
  font-weight: 600;
  padding-left: 2.2rem;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--uw-link);
}
.md-typeset .admonition > :last-child {
  margin-bottom: 0.8em;
}

/* 각주, 수식 */
.md-typeset .footnote {
  color: var(--uw-muted);
  font-size: 0.65rem;
}
.md-typeset .footnote-ref {
  font-family: var(--uw-mono);
}
/* 긴 블록 수식은 본문 폭을 넘기지 않고 가로로 스크롤한다 */
.md-typeset mjx-container[display="true"] {
  overflow-x: auto;
  overflow-y: hidden;
}

/* 이미지 */
.md-typeset img {
  border-radius: var(--uw-radius);
}
.md-typeset figure {
  margin: 1em 0;
}
.md-typeset figcaption {
  font-family: var(--uw-mono);
  font-size: 0.6rem;
  color: var(--uw-muted);
  max-width: none;
}

/* 문서 하단 메타 (main.html 이 넣는다) */
.md-typeset .uw-meta,
.uw-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 2.4rem 0 0;
  padding: 0.7rem 0;
  border-top: 1px solid var(--uw-border);
  font-family: var(--uw-mono);
  font-size: 0.6rem;
  color: var(--uw-muted);
}
.uw-meta b {
  font-weight: 500;
  color: var(--uw-fg);
}
.uw-meta a {
  color: var(--uw-muted);
}
.uw-meta a:hover {
  color: var(--uw-fg);
}
.uw-meta .uw-meta__spacer {
  flex: 1 1 auto;
}

/* 게임·도구·슬라이드 iframe (overrides/partials/embed.html, hooks/games.py, hooks/tools.py, hooks/slides.py) */
.uw-embed {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.uw-embed__frame {
  display: block;
  flex: 1 0 0; /* 남는 높이 (아래 html:has(.uw-embed)) */
  width: 100%;
  min-height: 10rem;
  border: 0;
  background: #000;
}
.uw-embed__ad {
  margin-top: 1rem;
}
.uw-embed__ad:empty {
  display: none;
}
/* iframe 이 있는 문서는 헤더 아래를 iframe 이 모두 채운다. 사이드바·푸터·여백은 없애고 남는 높이는 iframe 이 받으므로
 * 문서는 스크롤되지 않는다. 바깥 문서도 스크롤되면 iframe 안의 스크롤이 끝에 닿을 때 바깥 문서가 이어서 움직여 헷갈린다.
 * Material 의 flex 열(min-height: 100% 인 body → .md-container → .md-main)을 iframe 까지 잇는다.
 * 화면이 낮아 iframe 이 min-height 보다 작아질 때만 문서가 스크롤된다.
 * 사이드바는 데스크톱에서만 숨긴다. 좁은 화면의 드로어(헤더의 메뉴 버튼)는 그대로 쓴다.
 * 문서 목록으로 돌아가는 버튼, 제목, 전체 화면 버튼은 헤더에 있다 (partials/header.html).
 * .uw-embed 가 있는 문서에 모두 걸리므로 embed_frame 을 쓰는 새 문서는 따로 할 일이 없다. */
html:has(.uw-embed) {
  overscroll-behavior: none; /* iframe 에서 이어진 당겨서 새로고침, 바운스 */
}
html:has(.uw-embed) .md-footer {
  display: none;
}
@media screen and (min-width: 76.25em) {
  html:has(.uw-embed) .md-sidebar--primary {
    display: none;
  }
}
html:has(.uw-embed) .md-main,
html:has(.uw-embed) .md-content,
html:has(.uw-embed) .md-content__inner {
  display: flex;
  flex-direction: column;
}
html:has(.uw-embed) .md-main__inner {
  flex: 1 0 auto;
  width: 100%; /* .md-grid 의 margin: 0 auto 때문에 flex 안에서는 내용 너비로 줄어든다 */
  height: auto;
  margin: 0;
  padding: 0;
}
html:has(.uw-embed) .md-content {
  min-height: 0; /* 위의 calc(100vh - 10rem) 대신 남는 높이를 받는다 */
}
html:has(.uw-embed) .md-content__inner,
html:has(.uw-embed) .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
  /* 두 번째 선택자: 숨긴 사이드바 옆이라고 Material 이 주는 왼쪽 여백 ([dir=ltr] .md-sidebar--primary:not([hidden]) ~ …) */
  flex: 1 0 auto;
  margin: 0;
  padding: 0;
}
/* 헤더: 목록으로 돌아가는 버튼은 맨 앞(메뉴 버튼보다 앞), 제목은 문서 제목(h1)이지만 헤더 글자 모양 그대로 */
.md-header__button.uw-header-back {
  order: -2;
}
/* 휴대폰 폭에서는 버튼이 찌그러지지 않고 제목이 보이도록 헤더 자리를 줄인다. 로고(첫 화면은 메뉴 버튼의 드로어로 간다),
 * 지금 문서를 가리키는 슬라이드 버튼, 구분선, 한/영 전환 버튼, 양옆·메뉴 사이 여백을 뺀다 */
@media screen and (max-width: 44.9375em) {
  html:has(.uw-embed) .md-header__button.md-logo,
  html:has(.uw-embed) .uw-navlink[aria-current],
  html:has(.uw-embed) .uw-header-divider,
  html:has(.uw-embed) .uw-lang-switch {
    display: none;
  }
  html:has(.uw-embed) .md-header__inner {
    padding: 0 0.2rem;
  }
  html:has(.uw-embed) .md-header__button,
  html:has(.uw-embed) .uw-search-button {
    flex: none;
  }
  html:has(.uw-embed) .uw-navmenu,
  html:has(.uw-embed) .uw-navlink {
    margin-right: 0;
  }
  html:has(.uw-embed) .md-header__title {
    flex: 1 1 0;
    min-width: 0;
  }
}
/* 세로 휴대폰 폭의 게임·도구 문서는 목록 버튼 몫까지 모자라 검색 버튼도 뺀다 (검색은 목록에서 한다) */
@media screen and (max-width: 29.9375em) {
  html:has(.uw-header-back) .uw-search-button {
    display: none;
  }
}
.md-header__title .uw-header-heading {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* 게임·도구 목록 (overrides/catalog.html, javascripts/uw-catalog.js): 도구 사이트(../tools)의 첫 화면처럼
 * 검색 칸, 태그 칩(누르면 거른다), 개수 줄, 아이콘·이름·설명·태그 카드 격자. 카드 전체가 링크이고 태그는 따로 누른다. */
.uw-catalog [hidden] {
  display: none !important; /* 아래 display: flex 들보다 세게 */
}
.uw-catalog__bar {
  position: sticky;
  top: 2.8rem; /* 헤더 높이 */
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--uw-border);
  background: var(--uw-bg);
}
/* 좁은 화면은 태그가 여러 줄이라 붙여 두면 목록을 가린다 (도구 사이트도 sm 이상에서만 붙인다) */
@media screen and (max-width: 44.9375em) {
  .uw-catalog__bar {
    position: static;
  }
}
.uw-catalog__search {
  position: relative;
  display: flex;
  align-items: center;
}
.uw-catalog__search > svg {
  position: absolute;
  left: 0.6rem;
  width: 0.8rem;
  height: 0.8rem;
  color: var(--uw-muted);
  pointer-events: none;
}
.uw-catalog__input {
  box-sizing: border-box;
  width: 100%;
  height: 1.8rem;
  padding: 0 1.8rem;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius);
  background: var(--uw-surface);
  color: var(--uw-fg);
  font: 400 0.7rem var(--uw-sans);
}
.uw-catalog__input::-webkit-search-cancel-button {
  display: none;
}
.uw-catalog__input:focus {
  outline: 2px solid var(--uw-link);
  outline-offset: -1px;
}
.uw-catalog__clear {
  position: absolute;
  right: 0.3rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: var(--uw-radius);
  background: var(--uw-muted);
  -webkit-mask: var(--uw-icon-x) center / 0.7rem no-repeat;
  mask: var(--uw-icon-x) center / 0.7rem no-repeat;
  cursor: pointer;
}
.uw-catalog__clear:hover {
  background: var(--uw-fg-strong);
}
.uw-catalog__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.uw-catalog__tags {
  display: contents;
}
.md-typeset .uw-catalog__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--uw-border);
  border-radius: 999px;
  color: var(--uw-muted);
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background-color 120ms;
}
.md-typeset .uw-catalog__tag:hover {
  border-color: var(--uw-border-strong);
  color: var(--uw-fg-strong);
}
.md-typeset .uw-catalog__tag[aria-pressed="true"] {
  border-color: var(--uw-accent);
  background: var(--uw-accent);
  color: var(--uw-accent-contrast);
}
.uw-catalog__tag-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.md-typeset .uw-catalog__tag--small {
  padding: 0 0.4rem;
  font-size: 0.55rem;
}
.uw-catalog__status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  padding-left: 0.4rem;
  font-size: 0.6rem;
  color: var(--uw-muted);
}
.md-typeset .uw-catalog__count {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.md-typeset .uw-catalog__reset {
  color: var(--uw-fg);
  font-weight: 500;
  cursor: pointer;
  text-underline-offset: 0.2em;
}
.md-typeset .uw-catalog__reset:hover {
  text-decoration: underline;
}
.md-typeset ul.uw-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.md-typeset ul.uw-catalog__grid > li {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  word-break: keep-all;
  transition: border-color 120ms, background-color 120ms;
}
.md-typeset ul.uw-catalog__grid > li:hover {
  border-color: var(--uw-border-strong);
  background: var(--uw-surface);
}
.md-typeset .uw-catalog__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--uw-fg-strong);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}
/* 카드 전체를 덮는 링크 영역 (태그 칩은 그 위로 올린다) */
.md-typeset .uw-catalog__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--uw-radius-lg);
}
.md-typeset .uw-catalog__link:focus-visible {
  outline: none;
}
.md-typeset .uw-catalog__link:focus-visible::after {
  outline: 2px solid var(--uw-link);
  outline-offset: -1px;
}
.uw-catalog__link img,
.uw-catalog__link > svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.3rem;
}
.uw-catalog__link > svg {
  color: var(--uw-muted);
}
.md-typeset .uw-catalog__desc {
  margin: 0;
  color: var(--uw-muted);
  font-size: 0.65rem;
  line-height: 1.5;
}
.uw-catalog__item-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: auto;
  padding-top: 0.2rem;
}
.uw-catalog mark {
  background: var(--md-typeset-mark-color);
  color: inherit;
}
.uw-catalog__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 3rem 1.2rem;
  border: 1px dashed var(--uw-border-strong);
  border-radius: var(--uw-radius-lg);
  text-align: center;
}
.md-typeset .uw-catalog__empty p {
  margin: 0;
  font-weight: 500;
}

/* 영어 사이트에서 번역하지 않아 원문 사이트로 가는 링크 (hooks/translation.py) */
.md-typeset a.uw-source-link::after {
  content: "ko";
  margin-left: 0.15em;
  font-family: var(--uw-mono);
  font-size: 0.65em;
  vertical-align: super;
  color: var(--uw-muted);
}

/* 이 문서를 가리키는 문서 (hooks/backlinks.py) */
.uw-backlinks {
  margin: 2.4rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--uw-border);
  font-size: 0.7rem;
}
.uw-backlinks__title {
  margin: 0 0 0.5rem;
  font-family: var(--uw-mono);
  font-size: 0.6rem;
  color: var(--uw-muted);
}
.md-typeset .uw-backlinks ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.md-typeset .uw-backlinks ul li {
  margin: 0;
}
.uw-backlinks a {
  color: var(--uw-fg);
}
.uw-backlinks a:hover {
  color: var(--uw-link);
}
.md-typeset .uw-backlinks p {
  margin: 0.5rem 0 0;
  font-family: var(--uw-mono);
  font-size: 0.6rem;
  color: var(--uw-muted);
}
.md-typeset .uw-backlinks + .uw-meta {
  margin-top: 1.2rem;
}

/* 맨 위로 버튼 */
.md-top {
  border: 1px solid var(--uw-border);
  background: var(--uw-bg);
  color: var(--uw-fg);
  box-shadow: none;
  font-size: 0.65rem;
}
.md-top:hover {
  background: var(--uw-surface);
  color: var(--uw-fg);
}

/* ---------- 푸터 ---------- */

.md-footer {
  background: var(--md-footer-bg-color);
  border-top: 1px solid var(--uw-border);
  color: var(--uw-fg);
}
.md-footer-meta {
  background: var(--md-footer-bg-color);
}
.md-footer-meta__inner {
  padding: 0.6rem 0.6rem;
  align-items: center;
}
.md-copyright,
.md-copyright__highlight {
  font-family: var(--uw-mono);
  font-size: 0.6rem;
  color: var(--uw-muted);
  padding: 0;
}
.md-copyright a {
  color: var(--uw-muted);
}
.uw-site-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  margin: 0.2rem 0;
}
.uw-site-links b {
  font-weight: 600;
}
.md-social__link {
  width: 1.6rem;
  height: 1.6rem;
}
.md-social__link {
  color: var(--uw-muted);
}
.md-social__link:hover {
  color: var(--uw-fg);
}
.md-social__link svg {
  max-height: 0.8rem;
}
/* 사이트맵 자동 목록 (hooks/sitemap_page.py) */
.md-typeset .uw-sitemap-count {
  color: var(--uw-muted);
  font-size: 0.7rem;
}
.md-typeset ul.uw-sitemap {
  columns: 3 14rem;
  column-gap: 2rem;
  font-size: 0.7rem;
  list-style: none;
  margin-left: 0;
}
.md-typeset ul.uw-sitemap li {
  margin-left: 0;
  break-inside: avoid;
}
.md-typeset ul.uw-sitemap time {
  color: var(--uw-muted);
  font-size: 0.85em;
  margin-left: 0.4em;
  white-space: nowrap;
}

/* Lucide 아이콘 (overrides/.icons/lucide/): 채움 없이 선만 */
svg.lucide,
.md-icon svg.lucide {
  fill: none;
  stroke: currentColor;
}

/* 포커스 링 */
:focus-visible {
  outline: 2px solid var(--uw-link);
  outline-offset: 2px;
}