문서 제목

/* ============================================================
   wiki.css — 위키 문서 공통 스타일

   새 문서를 만들 때는 <head> 에 아래 두 줄만 넣으면 된다.
     <link rel="stylesheet" href="assets/wiki.css">
     <script src="assets/wiki.js" defer></script>
   (docs/ 같은 하위 폴더에 두는 문서는 "../assets/...")

   기본 골격:
     <header class="topbar"> <div class="topbar-inner"> ... </div> </header>
     <main class="wrap">
       <article class="article">
         <h1 class="title">문서 제목</h1>
         <div class="subtitle">최근 수정 시각: ...</div>
         <div class="layout">
           <section class="main"> 본문 </section>
           <aside class="side"> <table class="infobox"> ... </table> </aside>
         </div>
       </article>
     </main>
   ============================================================ */

/* ============================================================
   색상 토큰

   색은 전부 여기서만 정의한다. 규칙 안에 색상값을 직접 쓰지 말 것.
   ─ :root                        라이트 (기본값)
   ─ prefers-color-scheme: dark   OS 설정이 다크일 때 자동 적용
   ─ [data-theme="dark|light"]    사용자가 토글로 고른 값이 항상 우선
   ============================================================ */
:root {
  color-scheme: light;

  --bg: #f6f7f8; /* 페이지 바탕 */
  --panel: #fff; /* 문서 카드 바탕 */
  --text: #1f2328; /* 본문 글자 */
  --muted: #6e7781; /* 부가 설명 글자 */
  --line: #d0d7de; /* 테두리·구분선 */
  --accent: #00a495; /* 강조색 (브랜드, 답변 라인) */
  --accent-text: #fff; /* 강조색 배경 위에 얹는 글자색 */
  --link: #0275d8; /* 링크 */

  --soft: #fafbfc; /* 옅은 면 (목차, 접기 머리, 분류 칩) */
  --soft-line: #dddddd; /* 옅은 구분선 */
  --input-bg: #f9fafb; /* 검색창 */

  --ib-bg: #fff; /* 인포박스 바탕 */
  --ib-border: #111; /* 인포박스 바깥 테두리 */
  --ib-line: #c9c9c9; /* 인포박스 칸 구분선 */
  --ib-head-bg: #000; /* 인포박스 제목·항목명 바탕 */
  --ib-head-text: #fff;

  --ph-1: #f2f2f2; /* 이미지 자리 그라데이션 */
  --ph-2: #dddddd;
  --answer-bg: #f5fffd; /* 답변 블록 바탕 */
  --mark-bg: #fff3a3; /* 검색 하이라이트 */
  --mark-text: #1f2328;
  --fn: #ec9f19; /* 각주 번호 (주황노랑) */

  /* 문단 접기 화살표 — Material Design Icons (mdi:chevron-down / mdi:chevron-right).
     mask 로 넣기 때문에 색은 background-color 로 바꾼다. */
  --chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  --chev-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
  --tip-shadow: rgba(27, 31, 36, 0.18);
  /* 곡 목록 한 줄이 앞으로 나올 때의 옅은 그림자 (--tip-shadow 보다 흐리다) */
  --row-shadow: rgba(27, 31, 36, 0.07);
  /* 우측 하단 이동 버튼 아이콘 — Material Design Icons
     (mdi:format-list-bulleted / mdi:chevron-double-up / mdi:chevron-double-down).
     화살표와 마찬가지로 mask 로 넣으므로 색은 background-color 가 정한다. */
  --icon-toc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h14v2H7V5m0 8v-2h14v2H7M4 4.5A1.5 1.5 0 0 1 5.5 6 1.5 1.5 0 0 1 4 7.5 1.5 1.5 0 0 1 2.5 6 1.5 1.5 0 0 1 4 4.5m0 6A1.5 1.5 0 0 1 5.5 12 1.5 1.5 0 0 1 4 13.5 1.5 1.5 0 0 1 2.5 12 1.5 1.5 0 0 1 4 10.5M7 19v-2h14v2H7m-3-2.5A1.5 1.5 0 0 1 5.5 18 1.5 1.5 0 0 1 4 19.5 1.5 1.5 0 0 1 2.5 18 1.5 1.5 0 0 1 4 16.5z'/%3E%3C/svg%3E");
  --icon-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 18.41 6 17l6-6 6 6-1.41 1.41L12 13.83l-4.59 4.58m0-6L6 11l6-6 6 6-1.41 1.41L12 7.83l-4.59 4.58z'/%3E%3C/svg%3E");
  --icon-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 5.59 18 7l-6 6-6-6 1.41-1.41L12 10.17l4.59-4.58m0 6L18 13l-6 6-6-6 1.41-1.41L12 16.17l4.59-4.58z'/%3E%3C/svg%3E");
}

/* OS 가 다크일 때. 단, 사용자가 라이트를 직접 고른 경우는 제외. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0d1117;
    --panel: #161b22;
    --text: #e6edf3;
    --muted: #9198a1;
    --line: #30363d;
    --accent: #2ee6d0;
    --accent-text: #0d1117;
    --link: #ec9f19;

    --soft: #1c2128;
    --soft-line: #30363d;
    --input-bg: #0d1117;

    --ib-bg: #161b22;
    --ib-border: #3d444d;
    --ib-line: #30363d;
    --ib-head-bg: #010409;
    --ib-head-text: #e6edf3;

    --ph-1: #21262d;
    --ph-2: #161b22;
    --answer-bg: #132b2a;
    --mark-bg: #6b5300;
    --mark-text: #ffeaa7;
    --fn: #ec9f19;
    --tip-shadow: rgba(0, 0, 0, 0.55);
    --row-shadow: rgba(0, 0, 0, 0.3);
  }
}

/* 토글로 다크를 직접 고른 경우 — OS 설정과 무관하게 적용. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d1117;
  --panel: #161b22;
  --text: #e6edf3;
  --muted: #9198a1;
  --line: #30363d;
  --accent: #2ee6d0;
  --accent-text: #0d1117;
  --link: #ec9f19;

  --soft: #1c2128;
  --soft-line: #30363d;
  --input-bg: #0d1117;

  --ib-bg: #161b22;
  --ib-border: #3d444d;
  --ib-line: #30363d;
  --ib-head-bg: #010409;
  --ib-head-text: #e6edf3;

  --ph-1: #21262d;
  --ph-2: #161b22;
  --answer-bg: #132b2a;
  --mark-bg: #6b5300;
  --mark-text: #ffeaa7;
  --fn: #ec9f19;
  --tip-shadow: rgba(0, 0, 0, 0.55);
  --row-shadow: rgba(0, 0, 0, 0.3);
}

/* ---------- 기본 요소 ---------- */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", "Segoe UI",
    sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px; /* 본문 기준 크기. 제목·인포박스 등은 아래에서 따로 지정 */
  line-height: 1.7;
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

p {
  margin: 8px 0 14px;
}
ul {
  padding-left: 22px;
}
h2 {
  font-size: 25px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
  margin: 38px 0 16px;
}
h3 {
  font-size: 20px;
  margin: 28px 0 10px;
}
h4 {
  font-size: 17px;
  margin: 22px 0 8px;
}
h5 {
  font-size: 15px;
  margin: 18px 0 6px;
}

/* ---------- 문단 접기 ----------
   .main 안의 h2/h3/h4/h5 는 wiki.js 가 자동으로 접기 가능한 제목(.sec-head)으로 만들고,
   그 아래 내용을 .sec-body 로 감싼다. HTML 에는 따로 표시할 것이 없다. */
.sec-head {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.12s;
}
.sec-head:before {
  content: "";
  display: inline-block;
  /* mdi 아이콘은 24px 상자 안에서 실제 그려지는 부분이 절반 남짓이라
     글자 크기보다 크게 잡아야 눈에 비슷한 크기로 보인다. */
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.18em; /* 아이콘과 글자 사이 간격 */
  vertical-align: -0.22em;
  background-color: var(--muted);
  -webkit-mask-image: var(--chev-down);
  mask-image: var(--chev-down);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.sec-head[aria-expanded="false"]:before {
  -webkit-mask-image: var(--chev-right);
  mask-image: var(--chev-right);
}
.sec-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* 접힌 문단은 제목을 살짝 흐리게 해서 펼쳐진 문단과 구분한다. */
.sec-head[aria-expanded="false"] {
  opacity: 0.55;
}
.sec-head[aria-expanded="false"]:hover {
  opacity: 0.8;
}
/* 접힌 h2 는 아래 여백을 줄여 문단들이 붙어 보이게 한다. */
h2.sec-head[aria-expanded="false"] {
  margin-bottom: 14px;
}

/* ---------- 상단 바 ----------
   .topbar > .topbar-inner > (.brand, .search, .theme-toggle) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 58px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.topbar-inner {
  /* 본문(.wrap)과 좌우 여백을 맞춘다. 값을 바꾸려면 .wrap 과 함께 바꿀 것. */
  width: calc(100% - 32px);
  margin: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand {
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}
.brand:hover {
  text-decoration: none; /* 링크지만 밑줄은 긋지 않는다 */
}
.brand span {
  color: var(--accent);
} /* 브랜드명 뒷부분 강조 */
.search {
  flex: 1;
  max-width: 520px;
}
.search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text);
}

/* 헤더 오른쪽 버튼 묶음 — 역사 / 편집 제안 / 테마 토글 */
.topbar-actions {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 역사 버튼 — <button class="history-open"> (history.js 가 대화상자를 연다)
   편집 제안 버튼 — <button class="suggest-open"> (suggest.js) */
.history-open,
.suggest-open {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--text);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.history-open:hover,
.suggest-open:hover {
  border-color: var(--accent);
}
.history-open:focus-visible,
.suggest-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 편집 제안 대화상자 */
.suggest {
  width: min(520px, calc(100vw - 32px));
  /* 그림 미리보기까지 붙으면 길어진다 — 화면을 넘기면 안쪽에서 스크롤한다 */
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
}
.suggest::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.suggest-form {
  padding: 18px 20px 20px;
}
.suggest-head {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 17px;
}
.suggest-close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.suggest-doc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}
.suggest-label {
  display: block;
  margin: 12px 0 4px;
  font-size: 13px;
  font-weight: 700;
}
.suggest-optional {
  font-weight: 400;
  color: var(--muted);
}
.suggest-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
textarea.suggest-input {
  resize: vertical;
  line-height: 1.6;
}

/* 이미지 붙이기 — <input type="file"> 의 기본 모양은 브라우저마다 제각각이라
   눈에 보이지 않게 숨겨 두고 <label> 을 버튼처럼 쓴다.
   고른 그림은 아래에 네모난 미리보기로 늘어놓고 오른쪽 위 ✕ 로 뺀다.
   (docs.js 의 IMGBB.key 가 비어 있으면 이 칸 자체가 나오지 않는다) */
.suggest-files {
  display: flex;
  align-items: center;
  gap: 10px;
}
.suggest-pick {
  position: relative;
  flex: none; /* 옆의 글자가 길어져도 버튼은 찌그러지지 않는다 */
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: var(--soft);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.suggest-pick:hover {
  border-color: var(--accent);
}
/* 초점은 숨은 input 이 받으므로, 테두리는 label 이 대신 그려 준다 */
.suggest-pick:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* display:none 으로 지우면 키보드로 고를 수 없다 — 보이지만 않게 둔다 */
.suggest-file {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 장수를 3장으로 묶어 둔 사정을 알리는 한 줄 — 작은 회색 주석으로 깐다 */
.suggest-filenote {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.suggest-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.suggest-thumbs:empty {
  margin: 0;
}
.suggest-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  overflow: hidden;
}
.suggest-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.suggest-thumb-x {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.suggest-thumb-x:hover {
  background: rgba(0, 0, 0, 0.85);
}
/* 보내는 중 / 성공 / 실패 안내 */
.suggest-msg {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--soft);
  font-size: 13px;
  color: var(--muted);
}
.suggest-msg.good {
  border-color: var(--accent);
  color: var(--text);
}
.suggest-msg.bad {
  border-color: #d9534f;
  color: var(--text);
}
.suggest-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.suggest-btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--text);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.suggest-btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}
.suggest-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 역사 대화상자 — <dialog class="hist"> (history.js)
   목록이 길어질 수 있으므로 화면 높이에 맞춰 안쪽에서 스크롤된다. */
.hist {
  width: min(640px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  overflow: hidden;
}
.hist::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.hist-inner {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  padding: 18px 20px 20px;
}
.hist-head {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 17px;
}
.hist-close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.hist-doc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  word-break: break-all;
}
/* 목록만 스크롤한다 (머리말은 위에 붙어 있다) */
.hist-body {
  overflow-y: auto;
  min-height: 60px;
}
.hist-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hist-item {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.hist-item:first-child {
  border-top: 0;
  padding-top: 0;
}
.hist-when {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hist-ago::before {
  content: "·";
  margin-right: 8px;
}
.hist-title {
  margin-top: 2px;
  font-weight: 700;
  line-height: 1.5;
}
/* 커밋 메시지 본문 — 줄바꿈을 그대로 살린다 */
.hist-detail {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--soft);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}
.hist-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.hist-sha {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* 불러오는 중 / 실패 / 비어 있음 */
.hist-msg {
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  color: var(--muted);
}
.hist-msg.bad {
  color: var(--text);
}
/* 크게 보기 대화상자 — <dialog class="lightbox"> (lightbox.js)
   그림만 떠 있게 보이도록 상자 자체는 투명하게 두고, 뒤 화면은 흐리게 깐다. */
.lightbox {
  inset: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  /* 그림을 화면 한가운데로 */
  display: none;
  place-items: center;
}
.lightbox[open] {
  display: grid;
}
.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* 위 칸에 그림, 아래 칸에 설명. 위 칸을 minmax(0, 1fr) 로 두면
   그림이 남은 높이에 맞춰 줄어들 뿐 잘려 나가지 않는다. */
.lightbox-figure {
  margin: 0;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 10px;
  cursor: default;
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.lightbox-cap {
  max-width: min(680px, 100%);
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  /* 배경이 어두우므로 테마와 무관하게 밝은 글씨로 둔다 */
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.lightbox-close {
  position: fixed;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover {
  border-color: #fff;
}
.lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 테마 토글 버튼 — <button class="theme-toggle"> (wiki.js 가 아이콘을 채운다) */
.theme-toggle {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover {
  border-color: var(--accent);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 문서 레이아웃 ----------
   .wrap > .article > .layout > (.main, .side) */
/* 화면 좌우를 다 쓰되, 안쪽은 [문서 | 우측 박스] 두 칸으로 나누고 가운데 정렬한다. */
.wrap {
  width: calc(100% - 32px);
  margin: 26px auto 60px;
  display: grid;
  grid-template-columns: minmax(0, 1032px) 300px;
  justify-content: center;
  align-items: start;
  gap: 24px;
}

/* 우측 박스 — .article 과 같은 배경·테두리.
   <aside class="rail">
     <section class="rail-box"><div class="rail-title">제목</div> … </section>
   </aside> */
.rail {
  display: grid;
  gap: 24px;
  position: sticky;
  top: 78px; /* 상단 바(58px) 아래에 붙는다 */
}
.rail-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
}
.rail-title {
  font-weight: 800;
  margin-bottom: 8px;
}
.rail-list {
  margin: 0;
  padding-left: 18px;
}
.rail-list li {
  margin: 4px 0;
}
.article {
  max-width: 1032px;
  margin-inline: auto; /* 화면이 더 넓으면 가운데 정렬 */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 34px 38px;
}
.title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
}
.subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
}
/* 윗줄은 목차(왼쪽) + 프로필(오른쪽), 아랫줄은 본문이 폭 전체.
   마크업도 화면에 보이는 차례(목차 → 프로필 → 본문)대로 두고,
   자리는 grid-area 로 지정한다. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 450px;
  gap: 28px;
  align-items: start;
}
.layout > .toc {
  grid-area: 1 / 1;
  margin: 0; /* 격자가 간격을 만들므로 기본 위아래 여백은 없앤다 */
}
.side {
  grid-area: 1 / 2;
}
/* 프로필이 없는 문서(예: 팬아트)에서는 목차가 두 칸을 다 쓴다. */
.layout:not(:has(.side)) > .toc {
  grid-area: 1 / 1 / 2 / -1;
}
.main {
  grid-area: 2 / 1 / 3 / -1;
  min-width: 0;
}

/* ---------- 인포박스 (우측 표) ----------
   <table class="infobox">
     <tr><td class="head" colspan="2"><div class="name">이름</div><div class="eng">Name</div></td></tr>
     <tr><td class="image" colspan="2"><img src="assets/사진.png" alt=""></td></tr>
     <tr><th>항목</th><td>값</td></tr>
   </table> */
/* 세로로 쌓이므로 인포박스는 폭을 제한하고 가운데 정렬한다.
   (예전 사이드바 폭과 같은 450px — 그래야 프로필 사진 크기가 그대로 유지된다) */
.infobox {
  max-width: 450px;
  margin: auto;
  border: 1px solid var(--ib-border);
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  background: var(--ib-bg);
}
.infobox th,
.infobox td {
  border: 1px solid var(--ib-line);
  padding: 8px 10px;
  vertical-align: middle;
}
.infobox th {
  width: 25%;
  background: var(--ib-head-bg);
  color: var(--ib-head-text);
  text-align: center;
  font-weight: 700;
}
.infobox .head {
  background: var(--ib-head-bg);
  color: var(--ib-head-text);
  text-align: center;
  padding: 14px;
}
.infobox .name {
  font-size: 24px;
  font-weight: 800;
}
.infobox .eng {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
}
/* 주의: 여기에 display:flex 를 주면 <td> 가 표 셀에서 빠져나가 colspan 이 무시된다.
   (이미지가 첫 번째 좁은 열에만 들어가고 옆이 비는 현상) 그래서 표 셀 그대로 둔다.
   height 는 표 셀에서 '최소 높이'로 동작하므로 내용이 크면 셀이 늘어난다. */
.infobox .image {
  padding: 0;
  height: 300px;
  background: linear-gradient(135deg, var(--ph-1), var(--ph-2));
  text-align: center;
  vertical-align: middle;
  color: var(--muted);
  font-size: 13px;
}
/* 실제 이미지는 인포박스 가로폭을 꽉 채운다. 비율은 그대로 유지. */
.infobox .image img {
  width: 100%;
  height: auto;
  display: block;
}
/* 원본이 작은 이미지(채널 아바타 등)는 .avatar 를 붙인다.
   폭을 꽉 채우면 몇 배로 늘어나 흐려지므로 적당한 크기로 가운데 놓는다. */
.infobox .image img.avatar {
  width: min(240px, 100%);
  margin: auto;
  border-radius: 10px;
}

/* 플랫폼 로고 — <img class="platform-logo" src="..." alt="CHZZK">
   원본 비율 그대로 높이만 맞춘다.
   .mark 를 함께 주면(정사각형에 가까운 심볼형 로고) 조금 작게. */
.platform-logo {
  height: 22px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.platform-logo.mark {
  height: 15px;
}
/* 한 칸에 계정이 여러 개일 때 — 로고+이름을 .platform 하나로 묶고 사이에
   <span class="platform-sep">·</span>. 로고와 이름은 줄바꿈으로 떨어지지 않는다.
   채널 주소가 있으면 <a class="platform" href="...">, 없으면 <span class="platform">. */
.platform {
  display: inline-block;
  white-space: nowrap;
}
.platform:hover {
  text-decoration: none; /* 밑줄은 자손에서 못 끄므로 링크 자체에서 끈다 */
}
.platform-sep {
  color: var(--muted);
  margin: 0 4px;
}
/* 로고 옆 채널 이름은 윗첨자로 작게.
   링크 안에 있지만 파란 링크색 대신 본문 글자색을 쓴다.
   (다크에선 흰색, 라이트에선 검정 — 어느 쪽 바탕에서도 읽힌다) */
.platform-name {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  color: var(--text);
}

/* 경과일 — <span class="elapsed" data-since="2025-10-16"></span>
   wiki.js 가 페이지를 열 때마다 오늘 기준으로 채운다.
   자바스크립트가 꺼져 있으면 비어 있으므로 앞의 구분점도 나오지 않는다. */
.elapsed:not(:empty):before {
  content: " · ";
}

/* ---------- 본문 표 ----------
   <table class="datatable"><tr><th>항목</th><td>값</td></tr></table>
   본문 안에 놓는 간단한 표. 인포박스와 달리 검은 머리 없이 옅은 면만 쓴다. */
.datatable {
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 14px;
  margin: 12px 0 18px;
  min-width: min(360px, 100%);
}
.datatable th,
.datatable td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  vertical-align: middle;
}
.datatable th {
  background: var(--soft);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
/* 표 안에서는 로고 뒤 여백이 필요 없다 (아이콘만 있는 링크) */
.datatable .platform-logo:only-child {
  margin-right: 0;
}
/* 링크 아이콘처럼 가운데 두는 것이 나은 칸에 붙인다 */
.datatable .center {
  text-align: center;
}

/* ---------- 목차 ----------
   <nav class="toc"><div class="toc-title">목차</div><ol>...</ol></nav> */
.toc {
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 24px 0;
}
.toc-title {
  font-weight: 800;
  margin-bottom: 6px;
}
/* 번호를 링크로 만들기 위해 <ol> 의 자동 마커 대신 CSS 카운터를 쓴다.
   (마커에는 링크를 걸 수 없다)
   번호 = 이 문서 안의 해당 문단으로 이동.
   글자 = 보통은 그냥 텍스트지만, 별도 문서가 있으면 그 문서로 가는 링크를 건다. */
.toc ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: toc;
}
.toc li ol {
  padding-left: 20px;
}
.toc li {
  counter-increment: toc;
}
.toc-no {
  margin-right: 5px;
  font-variant-numeric: tabular-nums;
}
.toc-no:before {
  content: counter(toc) ".";
}

/* ---------- 접기 블록 ----------
   <details class="fold"><summary>제목</summary><div class="fold-body">내용</div></details>
   기본은 접힌 상태. 펼친 채로 시작하려면 <details class="fold" open>. */
.fold {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 12px 0;
  background: var(--panel);
  overflow: hidden;
}
.fold > summary {
  cursor: pointer;
  padding: 11px 14px;
  font-weight: 700;
  background: var(--soft);
  list-style: none;
}
.fold > summary::-webkit-details-marker {
  display: none;
}
/* 화살표는 문단 접기(.sec-head)와 같은 mdi chevron 을 쓴다. */
.fold > summary:before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.2em;
  vertical-align: -0.25em;
  background-color: var(--muted);
  -webkit-mask-image: var(--chev-right);
  mask-image: var(--chev-right);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.fold[open] > summary:before {
  -webkit-mask-image: var(--chev-down);
  mask-image: var(--chev-down);
}
.fold-body {
  padding: 14px 16px;
}

/* ---------- 인용 ----------
   <blockquote class="quote">문구</blockquote>
   출처를 붙이려면 <blockquote class="quote">문구<cite>출처</cite></blockquote> */
.quote {
  margin: 16px 0;
  padding: 12px 0 12px 18px;
  border-left: 3px solid var(--accent);
  font-size: 1em;
  line-height: 1.7;
  color: var(--text);
}
.quote cite {
  display: block;
  margin-top: 6px;
  font-size: 0.78em;
  font-style: normal;
  color: var(--muted);
}
.quote cite:before {
  content: "— ";
}

/* ---------- 문답 ----------
   <div class="question">질문<div class="answer">답변</div></div> */
.question {
  padding: 12px 0;
  border-bottom: 1px dashed var(--soft-line);
}
.question:last-child {
  border-bottom: 0;
}
.answer {
  margin-top: 8px;
  border-left: 3px solid var(--accent);
  padding: 7px 10px;
  background: var(--answer-bg);
}

/* 취소선 — 본문에 --이렇게-- 라고 쓰면 wiki.js 가 <s class="strike"> 로 바꾼다.
   속마음·정정 같은 곁말에 쓴다. */
.strike {
  text-decoration: line-through;
  color: var(--muted);
}

/* ---------- 각주 ----------
   본문의 <span class="note">부연 설명</span> 을 wiki.js 가 [1] 윗첨자로 바꾸고,
   내용은 마우스 오버·포커스 시 툴팁(.fn-tip)으로 띄운다. HTML 은 그대로 두면 된다. */
.fn {
  color: var(--fn);
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  font-weight: 700;
  margin-left: 1px;
  -webkit-user-select: none;
  user-select: none;
}
.fn:focus-visible {
  outline: 2px solid var(--fn);
  outline-offset: 2px;
  border-radius: 2px;
}
.fn-tip {
  position: fixed;
  z-index: 100;
  max-width: min(360px, calc(100vw - 16px));
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
  box-shadow: 0 6px 24px var(--tip-shadow);
}
/* 각주에 그림을 넣을 수 있다. 툴팁 폭을 넘지 않게 줄이고 높이도 적당히 자른다.
   <span class="note">설명<img src="assets/images/…" alt=""></span> */
.fn-tip img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 240px;
  margin: 8px auto 2px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ph-1), var(--ph-2));
}

/* ---------- 작은 조각들 ---------- */
/* .note      → wiki.js 가 각주 [1] 로 바꾼다
   .note-plain → 각주로 바꾸지 않고 작은 회색 글씨로 그대로 둔다 (항목 이름 등) */
.note,
.note-plain {
  font-size: 12px;
  color: var(--muted);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--soft-line);
  border-radius: 14px;
  padding: 1px 8px;
  background: var(--panel);
}
mark {
  background: var(--mark-bg);
  color: var(--mark-text);
} /* 검색 하이라이트 */

/* 유튜브 카드 — <a class="yt" href="https://www.youtube.com/watch?v=아이디">제목</a>
   wiki.js 가 썸네일과 재생 표시를 채워 카드 모양으로 만든다.
   영상을 그대로 심는 것보다 가볍고 화면도 정돈된다.
   카드를 여러 개 나란히 쓰면 칸 폭에 맞춰 저절로 줄바꿈된다. */
.yt {
  display: inline-block;
  vertical-align: top;
  width: min(340px, 100%);
  margin: 14px 12px 14px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
  color: var(--text);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.yt:hover {
  text-decoration: none; /* 링크지만 밑줄은 긋지 않는다 */
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--tip-shadow);
}
.yt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.yt-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ph-1), var(--ph-2));
}
/* 썸네일이 4:3 으로 내려오는 경우가 있어 잘라서 16:9 를 맞춘다. */
.yt-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  transition: transform 0.18s ease;
}
.yt:hover .yt-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.yt-label {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
/* 카드를 여러 장 늘어놓을 때 — <div class="ytgrid"> … </div>
   칸 수는 폭에 맞춰 저절로 늘고 준다. */
.ytgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin: 16px 0;
  max-width: 940px;
}
.ytgrid > .yt {
  width: auto;
  margin: 0;
}
.ytgrid .yt-play {
  width: 48px;
}
.ytgrid .yt-label {
  padding: 9px 11px;
  font-size: 13px;
}

.yt-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.yt:hover .yt-sub {
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .yt,
  .yt-play {
    transition: none;
  }
  .yt:hover {
    transform: none;
  }
  .yt:hover .yt-play {
    transform: translate(-50%, -50%);
  }
}

/* 음반·영상 카드 — 영상과 그에 딸린 내용을 한 덩어리로 묶는다.
   <div class="release">
     <a class="yt" href="…">제목</a>          ← 카드 머리 (썸네일 + 제목)
     <details class="fold">수록곡</details>    ← 또는 <blockquote class="quote">
   </div>
   카드 안에서는 썸네일이 옆으로 눕고, 테두리는 카드가 대신 갖는다. */
.release {
  max-width: 720px;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}
.release > .yt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}
/* 카드 전체가 이미 테두리를 갖고 있으므로 머리 링크는 뜨지 않는다. */
.release > .yt:hover {
  transform: none;
  box-shadow: none;
}
/* 아래에 내용이 이어질 때만 구분선을 긋는다. */
.release > .yt:not(:last-child) {
  border-bottom: 1px solid var(--line);
}
.release > .yt .yt-thumb {
  flex: none;
  width: 200px;
  border-right: 1px solid var(--line);
}
.release > .yt .yt-play {
  width: 46px;
}
.release > .yt .yt-label {
  padding: 0 14px 0 0;
}
/* 카드 안쪽 블록은 자기 테두리를 벗고 카드 폭을 그대로 쓴다. */
.release > .fold {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.release > .quote {
  margin: 14px 16px;
}
/* 좁은 화면에서는 썸네일을 위로 올리고 제목을 아래에 둔다. */
@media (max-width: 640px) {
  .release > .yt {
    display: block;
  }
  .release > .yt .yt-thumb {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .release > .yt .yt-label {
    padding: 10px 12px;
  }
}

/* 영상 임베드 — <div class="video"><iframe src="https://www.youtube-nocookie.com/embed/…"></iframe></div>
   16:9 비율을 지키면서 칸 폭에 맞춰 줄어든다. */
.video {
  position: relative;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--soft);
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 용어 목록 — <dl class="terms"><dt>용어</dt><dd>설명</dd></dl> */
.terms {
  max-width: 720px;
  margin: 14px 0;
}
.terms dt {
  margin-top: 14px;
  font-weight: 700;
}
.terms dt:first-child {
  margin-top: 0;
}
.terms dd {
  margin: 4px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

/* 글줄 안에 끼우는 게임 아이템 아이콘 —
   <img class="item-icon" src="assets/images/…png" alt="" />
   메이플랜드 아이템 아이콘처럼 작은 그림을 이름 앞에 붙일 때 쓴다.
   원본이 작으므로 크기는 건드리지 않고 글줄에 맞춰 세로만 맞춘다.
   (.gallery 안에 넣으면 라이트박스가 집어가므로 본문에만 쓴다) */
.item-icon {
  display: inline-block;
  width: auto;
  height: 22px;
  vertical-align: -6px;
  margin-right: 2px;
}

/* 팬아트 갤러리 — <div class="gallery"><figure class="art">…</figure></div>

   그림마다 크기와 비율이 제각각이라 격자에 맞추면 빈 자리가 생기거나 억지로
   늘어난다. 그래서 .game-list 처럼 단(column)으로 흘려보낸다. 칸 수는 폭에 맞춰
   자동으로 정해지고, 각 그림은 제 비율대로 위에서 아래로 채워진다. */
.gallery {
  column-width: 260px;
  column-gap: 16px;
  margin: 16px 0;
}
/* 카드는 그림 크기에 맞춰 줄어든다(fit-content). 단 폭보다 큰 그림만 줄여 맞춘다.
   마우스를 올리면 칸 안의 그림이 아니라 칸 자체가 커진다 —
   그림만 키우면 .art 의 overflow:hidden 에 걸려 가장자리가 잘린다. */
.art {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  break-inside: avoid; /* 카드가 단 경계에서 잘리지 않게 */
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
  position: relative; /* 커졌을 때 옆 칸 위로 올라오도록 */
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.art:hover,
.art:focus-within {
  transform: scale(1.04);
  z-index: 1;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
/* 원래 크기대로 둔다. 단 폭을 넘는 그림만 비율을 지킨 채 줄인다.
   (작은 그림을 억지로 늘리지 않으므로 흐려지지 않는다) */
.art img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  background: linear-gradient(135deg, var(--ph-1), var(--ph-2));
  cursor: zoom-in;
}
@media (prefers-reduced-motion: reduce) {
  .art {
    transition: none;
  }
  .art:hover,
  .art:focus-within {
    transform: none;
  }
}
.art figcaption {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
}
.art-date {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* 크기 통일 갤러리 — <div class="gallery uniform">
   같은 장면을 이어서 캡처한 그림처럼 원본 크기가 조금씩 다를 때. 단(column)으로
   흘리는 대신 격자에 올려 칸 크기를 맞추고, 그림은 잘라내지 않고(contain) 칸
   안에 맞춰 넣는다 — 말풍선이 잘리면 대사를 읽을 수 없기 때문. */
.gallery.uniform {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.gallery.uniform .art {
  width: auto;
  margin: 0;
}
.gallery.uniform .art img {
  width: 100%;
  aspect-ratio: var(--shot, 11 / 10);
  object-fit: contain;
  background: var(--panel);
}
/* 가로로 긴 장면(전체 화면 캡처)을 담을 때 — 칸을 넓히고 비율만 바꾼다. */
.gallery.uniform.wide {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  --shot: 16 / 9;
}

/* 곡 해설 목록 — <ol class="tracknotes">
   곡마다 설명이 붙는 경우. 번호는 CSS 카운터가 매긴다. */
.tracknotes {
  max-width: 720px;
  margin: 14px 0;
  padding-left: 0;
  list-style: none;
  counter-reset: track;
}
.tracknotes > li {
  counter-increment: track;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.tracknotes > li:last-child {
  border-bottom: 1px solid var(--line);
}
.track-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
}
.track-head:before {
  content: counter(track) ".";
  min-width: 1.4em;
  color: var(--muted);
  font-weight: 400;
}
.track-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
}
.track-time {
  margin-left: auto; /* 오른쪽 끝으로 */
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tracknotes p {
  margin: 6px 0 0;
}
/* 곡 아래 한 줄짜리 메타 정보 (소재·출처).
   .note 를 쓰면 각주로 바뀌어 버리므로 전용 클래스를 쓴다. */
.track-src {
  color: var(--muted);
  font-size: 13px;
}
/* 접기 블록 안에 넣었을 때 — 블록 테두리와 첫 줄 구분선이 겹치지 않도록 */
.fold-body > .tracknotes {
  margin: 0;
  max-width: none;
}
.fold-body > .tracknotes > li:first-child {
  border-top: 0;
  padding-top: 0;
}
.fold-body > .tracknotes > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* 2단 목록 — <ul class="game-list"> */
.game-list {
  columns: 2;
  column-gap: 32px;
}
.game-list li {
  break-inside: avoid;
}

/* ---------- 날짜별 곡 목록 ----------
   <div class="songday">
     <div class="songday-date">2026. 01. 13<span class="songday-count">1곡</span></div>
     <ul>
       <li>
         <span class="song-title">곡 제목</span>
         <span class="song-artist">가수</span>
         <a class="song-link" href="..."><img src="assets/images/youtube.svg" alt="다시보기에서 보기" /></a>
       </li>
     </ul>
   </div>

   방송 날짜 하나가 .songday 하나다. 그 아래 곡을 <li> 로 죽 나열한다.
   한 줄은 곡 제목 · 가수 · 다시보기 링크 세 칸이고, 칸 폭을 li 마다 똑같이
   잡아 두었으므로 줄이 늘어나도 세로로 가지런히 맞는다.
   좁은 화면에서는 가수가 곡 제목 아래로 내려간다 (맨 아래 반응형 규칙).

   줄 어디를 눌러도 다시보기로 넘어간다. .song-link 의 ::after 를 줄 전체에
   덮어 링크의 누를 수 있는 범위를 넓히는 방식이라 자바스크립트가 필요 없다.
   덮개 위로 올라와야 하는 것(각주 [1])에는 따로 z-index 를 준다. */
.songday {
  margin: 0 0 20px;
}
.songday-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 2px 5px;
  border-bottom: 2px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.songday-count {
  margin-left: auto; /* 오른쪽 끝으로 */
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.songday > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.songday li {
  position: relative; /* .song-link::after 덮개의 기준 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30%) 28px;
  align-items: center;
  column-gap: 12px;
  margin: 0 -6px;
  padding: 6px 8px;
  cursor: pointer;
  transition:
    transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1),
    background-color 0.18s ease,
    font-size 0.3s ease-in-out,
    box-shadow 0.18s ease;
}
.songday li + li {
  border-top: 1px solid var(--soft-line);
}
@media (hover: hover) {
  .songday li:hover {
    transform: scale(1.02);
    box-shadow: 0 1px 16px var(--row-shadow);
    border-top-color: transparent;
    z-index: 2;
  }

  .songday li:hover + li {
    border-top-color: transparent;
  }
}
/* 키보드로 링크에 초점이 왔을 때도 같은 모양으로 알려 준다 */
.songday li:focus-within {
  background: var(--soft);
}
.song-title {
  font-size: 14px;
  font-weight: 600;
}
.song-artist {
  font-size: 13px;
  color: var(--muted);
}
/* 아이콘만 있는 링크라 로고 뒤 여백이 필요 없다 */
.song-link {
  text-align: center;
}
/* 줄 전체를 링크의 누를 수 있는 범위로 만드는 덮개 */
.song-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* 덮개보다 위에 있어야 마우스를 올릴 수 있는 것들 */
.songday li .fn,
.songday li a:not(.song-link) {
  position: relative;
  z-index: 1;
}
.song-link .platform-logo {
  height: 18px;
  margin-right: 0;
}

/* 썸네일 카드 — <div class="small-card"><div class="img">…</div><div class="cap">설명</div></div> */
.small-card {
  width: 200px;
  border: 1px solid var(--line);
  margin: 8px 0 14px;
}
/* height 가 아니라 min-height. 실제 이미지를 넣으면 세로가 긴 그림도 잘리지 않고
   카드가 그만큼 늘어난다. (이미지 자리 표시만 있을 때는 200px 정사각형) */
.small-card .img {
  min-height: 200px;
  background: linear-gradient(135deg, var(--ph-1), var(--ph-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.small-card .img img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}
.small-card .cap {
  text-align: center;
  font-weight: 700;
  background: var(--soft);
  padding: 6px;
}

/* ---------- 문서 하단 ---------- */
.category {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.category a {
  display: inline-block;
  background: var(--soft);
  border: 1px solid var(--soft-line);
  border-radius: 4px;
  padding: 2px 7px;
  margin: 2px;
}
.footer {
  font-size: 12px;
  color: var(--muted);
  margin-top: 28px;
}

/* ---------- 우측 하단 이동 버튼 ----------
   <div class="fab">
     <button class="fab-btn fab-toc|fab-top|fab-bottom">
   app.js 가 body 끝에 한 번 꽂고, 누를 때의 스크롤은 wiki.js 가 옮긴다.
   위에서부터 목차 / 맨 위 / 맨 아래 순서다. */
.fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20; /* 상단 바(10) 위, 각주 툴팁(100) 아래 */
  display: grid;
  gap: 8px;
}
.fab-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  cursor: pointer;
  box-shadow: 0 2px 10px var(--tip-shadow);
}
/* 아이콘은 mask 로 얹는다 (색이 테마를 따라가도록) */
.fab-btn:before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: var(--muted);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.fab-toc:before {
  -webkit-mask-image: var(--icon-toc);
  mask-image: var(--icon-toc);
}
.fab-top:before {
  -webkit-mask-image: var(--icon-top);
  mask-image: var(--icon-top);
}
.fab-bottom:before {
  -webkit-mask-image: var(--icon-bottom);
  mask-image: var(--icon-bottom);
}
.fab-btn:hover {
  border-color: var(--accent);
}
.fab-btn:hover:before {
  background-color: var(--accent);
}
.fab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* display:grid 가 hidden 속성을 이기므로 따로 눌러 준다 (목차 없는 문서) */
.fab-btn[hidden] {
  display: none;
}

/* ---------- 반응형 ---------- */
/* 두 칸이 다 들어가지 않는 폭에서는 우측 박스를 문서 아래로 내린다. */
@media (max-width: 1400px) {
  .wrap {
    grid-template-columns: minmax(0, 1032px);
  }
  .rail {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  /* 좁은 화면에서는 프로필 → 목차 → 본문 순으로 세로로 쌓는다. */
  .layout {
    grid-template-columns: 1fr;
  }
  .side,
  .layout > .toc,
  .main {
    grid-area: auto;
  }
  .side {
    order: -1;
  }
  .article {
    padding: 24px 20px;
  }
}
@media (max-width: 640px) {
  .wrap {
    width: calc(100% - 16px);
    margin-top: 12px;
  }
  .article {
    padding: 20px 14px;
  }
  .title {
    font-size: 28px;
  }
  .topbar-inner {
    width: calc(100% - 18px);
  }
  .search {
    display: none;
  }
  .topbar-actions {
    gap: 6px;
  }
  .history-open,
  .suggest-open {
    padding: 7px 10px;
    font-size: 12px;
  }
  .game-list {
    columns: 1;
  }
  /* 곡 제목 · 가수를 한 줄에 두기엔 좁다 — 가수를 아래 줄로 내린다 */
  .songday li {
    grid-template-columns: minmax(0, 1fr) 28px;
  }
  .songday .song-artist {
    grid-column: 1;
    grid-row: 2;
  }
  .songday .song-link {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .fab {
    right: 12px;
    bottom: 12px;
    gap: 6px;
  }
  .fab-btn {
    width: 38px;
    height: 38px;
  }
  .fab-btn:before {
    width: 20px;
    height: 20px;
  }
}