/* ==========================================================================
   wikify.css — 티스토리 글을 위키피디아 문서처럼
   적용: 스킨 편집 > 파일 업로드 후  <link rel="stylesheet" href="./images/wikify.css">
   범위: html.wikify 아래에서만 동작하므로 기존 스킨 CSS와 충돌이 적습니다.
   ========================================================================== */

:root {
  --wk-text: #202122;
  --wk-muted: #54595d;
  --wk-link: #3366cc;
  --wk-visited: #6b4ba1;
  --wk-red: #d73333;          /* 없는 문서(빨간 링크) */
  --wk-box: #f8f9fa;          /* 목차·정보상자 배경 */
  --wk-box-head: #eaecf0;     /* 표 머리칸 */
  --wk-border: #a2a9b1;
  --wk-border-soft: #c8ccd1;
  --wk-serif: "Linux Libertine", Georgia, Times, "Noto Serif KR", "Nanum Myeongjo", serif;
  --wk-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --wk-mono: ui-monospace, "D2Coding", Consolas, monospace;
}

/* --------------------------------------------------------------------------
   1. 본문 타이포그래피 (.contents_style = 티스토리 에디터 본문 컨테이너)
   -------------------------------------------------------------------------- */
.wikify .contents_style {
  font-family: var(--wk-sans);
  color: var(--wk-text);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.wikify .contents_style a { color: var(--wk-link); text-decoration: none; }
.wikify .contents_style a:visited { color: var(--wk-visited); }
.wikify .contents_style a:hover,
.wikify .contents_style a:focus-visible { text-decoration: underline; }
.wikify .contents_style a.wk-new { color: var(--wk-red); }          /* 아직 없는 문서 */
.wikify .contents_style a.wk-autolink { border-bottom: 0; }

/* 제목: h2는 세리프 + 밑줄(위키피디아 시그니처), h3/h4는 산세리프 굵게 */
.wikify .contents_style h2,
.wikify .contents_style h2[data-ke-size] {
  font-family: var(--wk-serif);
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.3;
  margin: 1.2em 0 0.35em;
  padding-bottom: 0.15em;
  border-bottom: 1px solid var(--wk-border);
  color: var(--wk-text);
}
.wikify .contents_style h3,
.wikify .contents_style h3[data-ke-size] {
  font-family: var(--wk-sans);
  font-weight: 700;
  font-size: 1.2em;
  margin: 1.1em 0 0.3em;
  border: 0;
}
.wikify .contents_style h4,
.wikify .contents_style h4[data-ke-size] {
  font-family: var(--wk-sans);
  font-weight: 700;
  font-size: 1.05em;
  margin: 1em 0 0.25em;
  border: 0;
}
.wk-hn { margin-right: 0.45em; font-variant-numeric: tabular-nums; }

.wikify .contents_style p { margin: 0.5em 0; }
.wikify .contents_style ul,
.wikify .contents_style ol { margin: 0.3em 0 0.3em 1.6em; padding: 0; }
.wikify .contents_style li { margin: 0.15em 0; }
.wikify .contents_style blockquote {
  margin: 0.6em 2.5em;
  padding: 0;
  border: 0;
  color: var(--wk-text);
}
.wikify .contents_style code,
.wikify .contents_style pre {
  font-family: var(--wk-mono);
  background: var(--wk-box);
  border: 1px solid var(--wk-border-soft);
}
.wikify .contents_style code { padding: 0.1em 0.3em; border-radius: 2px; }
.wikify .contents_style pre { padding: 0.8em 1em; overflow: auto; }

/* --------------------------------------------------------------------------
   2. 목차 (wikify.js가 생성)
   -------------------------------------------------------------------------- */
.wk-toc {
  display: table;                 /* 내용 폭만큼만 */
  max-width: 100%;
  margin: 1em 0;
  padding: 0.5em 0.9em 0.6em;
  background: var(--wk-box);
  border: 1px solid var(--wk-border);
  font-size: 0.95em;
  line-height: 1.5;
}
.wk-toc-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.3em;
}
.wk-toc-toggle {
  font: inherit;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--wk-link);
  background: none;
  border: 0;
  padding: 0 0.2em;
  margin-left: 0.3em;
  cursor: pointer;
}
.wk-toc-toggle::before { content: "["; color: var(--wk-muted); }
.wk-toc-toggle::after  { content: "]"; color: var(--wk-muted); }
.wk-toc-toggle:focus-visible { outline: 2px solid var(--wk-link); outline-offset: 1px; }
.wikify .contents_style .wk-toc ol,
.wk-toc ol { list-style: none; margin: 0; padding: 0; }
.wk-toc ol ol { margin-left: 1.6em; }
.wk-toc li { margin: 0.15em 0; }
.wk-toc a { color: var(--wk-link); }
.wk-toc-num { color: var(--wk-text); padding-right: 0.5em; font-variant-numeric: tabular-nums; }
.wk-toc.wk-toc-collapsed .wk-toc-list { display: none; }

/* 좌측 고정형 목차를 쓰고 싶을 때: body에 wk-toc-side 클래스 */
@media (min-width: 1100px) {
  .wk-toc-side .wk-toc {
    position: sticky;
    top: 1em;
    float: left;
    width: 15em;
    margin: 0 1.5em 1em 0;
    max-height: calc(100vh - 2em);
    overflow: auto;
  }
}

/* --------------------------------------------------------------------------
   3. 정보상자 (서식에서 <table class="infobox"> 로 작성)
   -------------------------------------------------------------------------- */
.wikify .contents_style table.infobox,
table.infobox {
  float: right;
  clear: right;
  width: 22em;
  max-width: 100%;
  margin: 0 0 1em 1.2em;
  border: 1px solid var(--wk-border);
  border-spacing: 3px;
  background: var(--wk-box);
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--wk-text);
}
table.infobox th,
table.infobox td { vertical-align: top; padding: 0.25em 0.5em; border: 0; text-align: left; }
table.infobox th { width: 34%; font-weight: 700; }
table.infobox .infobox-title,
table.infobox th.infobox-title {
  width: auto;
  text-align: center;
  font-size: 1.25em;
  font-weight: 700;
  padding: 0.3em;
}
table.infobox .infobox-header,
table.infobox th.infobox-header {
  width: auto;
  text-align: center;
  background: var(--wk-box-head);
}
table.infobox img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   4. 위키 표, 안내문, 개정 이력, 분류 상자
   -------------------------------------------------------------------------- */
.wikify .contents_style table.wikitable,
table.wikitable {
  border-collapse: collapse;
  border: 1px solid var(--wk-border);
  background: var(--wk-box);
  font-size: 0.92em;
  margin: 1em 0;
}
table.wikitable th,
table.wikitable td { border: 1px solid var(--wk-border); padding: 0.3em 0.6em; vertical-align: top; }
table.wikitable th { background: var(--wk-box-head); text-align: center; }

.wk-hatnote {
  font-style: italic;
  color: var(--wk-muted);
  padding-left: 1.6em;
  margin: 0.5em 0;
  font-size: 0.95em;
}

/* 개정 이력: 티스토리에 버전 기록이 없으므로 문서 안에 표로 남김 */
.wikify .contents_style table.wk-revision,
table.wk-revision {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--wk-border);
  font-size: 0.88em;
  margin: 0.5em 0 1em;
}
table.wk-revision th,
table.wk-revision td { border: 1px solid var(--wk-border-soft); padding: 0.3em 0.5em; vertical-align: top; text-align: left; }
table.wk-revision th { background: var(--wk-box-head); white-space: nowrap; }
table.wk-revision td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

.wk-catlinks {
  clear: both;
  margin-top: 1.5em;
  padding: 0.4em 0.6em;
  border: 1px solid var(--wk-border);
  background: var(--wk-box);
  font-size: 0.9em;
  line-height: 1.6;
}
.wk-catlinks a { color: var(--wk-link); text-decoration: none; }
.wk-catlinks a:hover { text-decoration: underline; }
.wk-catlinks .wk-catlabel { margin-right: 0.4em; }
.wk-catlinks .wk-tags a { margin-right: 0.6em; }

.wk-seealso { margin-top: 1em; font-size: 0.95em; }
.wk-seealso h2 { font-size: 1.2em; }
.wk-seealso ul { columns: 2; column-gap: 2em; }

.wk-hide { display: none !important; }

/* --------------------------------------------------------------------------
   5. 문서 머리: 제목 + [편집] (관리자에게만 보임)
   -------------------------------------------------------------------------- */
.wk-firstheading {
  font-family: var(--wk-serif);
  font-weight: 400;
  font-size: 1.9em;
  line-height: 1.3;
  margin: 0 0 0.25em;
  padding-bottom: 0.17em;
  border-bottom: 1px solid var(--wk-border);
  color: var(--wk-text);
}
.wk-firstheading a { color: inherit; text-decoration: none; }
.wk-tagline { color: var(--wk-muted); font-size: 0.85em; margin-bottom: 1em; }
.wk-edit { float: right; font-size: 0.55em; font-family: var(--wk-sans); margin-top: 0.6em; }
.wk-edit a { color: var(--wk-link); text-decoration: none; }
.wk-edit a::before { content: "["; color: var(--wk-muted); }
.wk-edit a::after  { content: "]"; color: var(--wk-muted); }

/* --------------------------------------------------------------------------
   6. 선택 사항: 2단 셸 (skin-patch.html 의 레이아웃을 쓸 때만)
   -------------------------------------------------------------------------- */
.wikify body { margin: 0; background: #fff; color: var(--wk-text); font-family: var(--wk-sans); }

.wk-header {
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding: 0.6em 1.25em;
  border-bottom: 1px solid var(--wk-border-soft);
  background: #fff;
}
.wk-header .wk-logo {
  font-family: var(--wk-serif);
  font-size: 1.35em;
  color: var(--wk-text);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.wk-header .wk-logo small { display: block; font-family: var(--wk-sans); font-size: 0.55em; color: var(--wk-muted); }
.wk-search { margin-left: auto; display: flex; }
.wk-search input[type="text"] {
  font: inherit;
  width: 18em;
  max-width: 50vw;
  padding: 0.4em 0.6em;
  border: 1px solid var(--wk-border);
  border-right: 0;
  border-radius: 2px 0 0 2px;
  background: #fff;
}
.wk-search input[type="button"],
.wk-search button {
  font: inherit;
  padding: 0.4em 0.8em;
  border: 1px solid var(--wk-border);
  background: var(--wk-box);
  border-radius: 0 2px 2px 0;
  cursor: pointer;
}

.wk-shell {
  display: grid;
  grid-template-columns: 12.5em minmax(0, 1fr);
  gap: 2em;
  max-width: 1320px;
  margin: 0 auto;
  padding: 1em 1.25em 3em;
}
.wk-sidebar { font-size: 0.82em; line-height: 1.5; }
.wk-portlet { margin-bottom: 1.2em; }
.wk-portlet h3 {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--wk-muted);
  margin: 0 0 0.3em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--wk-border-soft);
}
.wk-portlet ul { list-style: none; margin: 0; padding: 0; }
.wk-portlet li { margin: 0.2em 0; }
.wk-portlet a { color: var(--wk-link); text-decoration: none; }
.wk-portlet a:hover { text-decoration: underline; }
/* 티스토리 카테고리 치환자([##_category_list_##])가 만드는 트리 */
.wk-portlet .tt_category ul { list-style: none; margin: 0; padding: 0; }
.wk-portlet .tt_category .category_list { margin-left: 0.2em; }
.wk-portlet .tt_category .sub_category_list { margin-left: 0.9em; }
.wk-portlet .tt_category .c_cnt { color: var(--wk-muted); font-size: 0.9em; }
.wk-portlet .tt_category .link_tit { font-weight: 700; color: var(--wk-text); }

.wk-main { min-width: 0; }
.wk-portal { margin-bottom: 2em; }

/* 글 목록(카테고리·검색·태그 화면)을 위키의 분류 페이지처럼 단순 제목 목록으로 */
.wk-list { list-style: none; margin: 0; padding: 0; }
.wk-list li { padding: 0.35em 0; border-bottom: 1px solid var(--wk-border-soft); }
.wk-list a { color: var(--wk-link); text-decoration: none; }
.wk-list a:hover { text-decoration: underline; }
.wk-list .wk-list-cat { color: var(--wk-muted); font-size: 0.85em; margin-left: 0.5em; }
.wk-list-title {
  font-family: var(--wk-serif);
  font-weight: 400;
  font-size: 1.6em;
  border-bottom: 1px solid var(--wk-border);
  margin: 0 0 0.6em;
  padding-bottom: 0.15em;
}
.wk-paging { margin: 1em 0; font-size: 0.9em; }
.wk-paging a { color: var(--wk-link); text-decoration: none; margin: 0 0.3em; }
.wk-paging .selected { font-weight: 700; }

.wk-footer {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1em 1.25em 2em;
  font-size: 0.8em;
  color: var(--wk-muted);
  border-top: 1px solid var(--wk-border-soft);
}

@media (max-width: 860px) {
  .wk-shell { grid-template-columns: 1fr; gap: 1em; }
  .wk-sidebar { order: 2; font-size: 0.9em; }
  .wk-header { flex-wrap: wrap; gap: 0.6em; }
  .wk-search { margin-left: 0; width: 100%; }
  .wk-search input[type="text"] { width: 100%; max-width: none; }
  .wikify .contents_style table.infobox,
  table.infobox { float: none; width: 100%; margin: 0 0 1em; }
  .wk-seealso ul { columns: 1; }
}

/* 인쇄: 탐색 요소 제거, 본문만 */
@media print {
  .wk-header, .wk-sidebar, .wk-footer, .wk-edit, .wk-toc-toggle, .wk-paging { display: none !important; }
  .wk-shell { display: block; padding: 0; }
  .wikify .contents_style a { color: inherit; }
  table.infobox { float: none; width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .wk-toc-list { transition: opacity 0.15s ease; }
}