/* ============================================================
   index-0 — 디자인 스타일: 에디토리얼
   ------------------------------------------------------------
   Preset Name: 에디토리얼 — 왼쪽 기둥 · 줄과 표 · 상자 없음

   상자를 전부 걷고 줄과 표로 바꾼다. 글이 앞서는 지면이라 장식을 두지 않고,
   구역 제목이 왼쪽 기둥으로 나가 넓은 화면에서 두 단 인상을 만든다.

   근거: UX Kit for Gutenberg — 잉크 6단(11·26·41·64·91·98) · 청록 하나 · 왼쪽 트리 실측값

   Page: #FFFFFF
   Ink: #0F172A
   Brand: #0F172A
   Accent: #0E7490
   Accent2: #314054
   Accent3: #155E75

   ★ 위 여섯 줄은 **설정 화면의 색 칸 기본값**입니다. `inc/preset.php` 가 읽습니다.
     이 스타일을 고르면 색 칸이 이 값으로 시작하고, 구매자가 고친 칸은 그 값이 이깁니다.

   Head: 

   ★ 머리말 띠를 무엇으로 칠하는지 적습니다. `brand` 면 메인색 면이고, 비어 있으면
     바탕색 면입니다. `inc/preset.php` 가 읽어 **로고를 어느 짝으로 낼지** 정합니다.
     CSS 는 로고 그림의 밝기를 모르므로 이 한 줄이 PHP 로 넘기는 유일한 통로입니다.

   ⚠️ 이 파일은 자동으로 만들어집니다. 손으로 고치면 다음 판에서 지워집니다.
      값을 바꾸시려면 이 파일을 복사해 새 이름으로 두십시오.
   ⚠️ 이 스타일은 색만이 아니라 **지면의 구조까지** 바꿉니다. 아래 절반이
      그 규칙이며, 전부 기존 블록의 클래스에만 걸립니다 — 마크업도 설정 절차도
      그대로입니다.
   서식과 손잡이 설명은 `_template.css` 가 갖습니다.
   ============================================================ */
:root {

  /* ── 지면과 글 ── */
  --index-0-bg:           #FFFFFF;                         /* 지면 */
  --index-0-ink:          #0F172A;                         /* 본문 — 지면 대비 17.9:1 */
  --index-0-sub:          #5A6779;                         /* 보조 글 — 5.8:1 */
  --index-0-line:         #E3E8EF;                         /* 경계선 */
  --global-palette8:      #F8FAFC;                         /* 옅게 깔리는 면 — 관련 글·인용·숫자판 */
  --index-0-surface-line: #CCD1D7;                         /* 옅은 면 위의 선 — 면보다 어두워야 선으로 읽힌다 */
  --index-0-warn:         #B3261E;                         /* 경고·마이너스 전용 — 6.5:1 */

  /* ── 보조색 1 — 누르는 곳 ── */
  --index-0-accent:          #0E7490;                      /* 누르는 색 하나 — 5.4:1 */
  --index-0-accent-pure:     #0E7490;                      /* 원본 — 글자가 아닌 곳 */
  --index-0-accent-soft:     #EEF5F7;                      /* 옅은 판 */
  --index-0-accent-on-brand: #3E90A6;                      /* 어두운 면 위의 누르는 색 */

  /* ── 보조색 2 — 숫자와 표식 ── */
  --index-0-accent2:      #314054;                         /* 굵은 선·큰 글자 — 10.5:1 */
  --index-0-accent2-text: #314054;                         /* 작은 글자 — 10.5:1 */
  --index-0-accent2-soft: #EAECEE;                         /* 표식 배경 */
  --index-0-accent2-pure: #314054;                         /* 원본 — 어두운 면 위에서만 */

  /* ── 보조색 3 — 번호와 배지 ── */
  --index-0-accent3:      #155E75;                         /* 면·배지 — 7.3:1 (글자로 쓰지 않는다) */
  --index-0-accent3-lg:   #155E75;                         /* 큰 글자 — 7.3:1 */
  --index-0-accent3-text: #155E75;                         /* 작은 글자 — 7.3:1 */
  --index-0-accent3-soft: #E8EFF1;                         /* 옅은 면 */

  /* ── 메인색 — 깔리는 면 ── */
  --index-0-brand:           #0F172A;                      /* 면 — 첫 화면·맺음말 판 */
  --index-0-brand-on:        #FFFFFF;                      /* 그 면 위 제목 — 17.9:1 */
  --index-0-brand-on-sub:    #BCBEC3;                      /* 그 면 위 설명글 — 9.6:1 */
  --index-0-brand-line:      rgba(255,255,255,.18);
  --index-0-brand-btn:       #FFFFFF;                      /* 어두운 면 위 단추는 밝아야 한다 */
  --index-0-brand-btn-on:    #0F172A;
  --index-0-brand-btn-hover: #DDDFE1;

  /* ── 손잡이 — 값을 옮겨 적지 않고 배수만 바꾼다 ── */
  --index-0-w-title:    500;                               /* 제목 500 — 기준 시안 마의 실측값(w-t) */
  --index-0-type-k:     0.94;                              /* 한 화면에 많이 담는다 */
  --index-0-space-k:    0.82;                              /* 조밀하게. 찾아 읽는 글은 스크롤이 짧아야 한다 */
  --index-0-lh:         0.95;
  --index-0-ls:         -0.002em;
  --index-0-radius-k:   0.8;                               /* 8px — 레퍼런스 실측값 */
  --index-0-radius-btn: 4px;                               /* 레퍼런스 실측값 */
  --index-0-gap-k:      0.85;
  --index-0-shadow:     0 1px 2px -1px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.08); /* 레퍼런스의 Z=1 실측값 */
  --index-0-shadow-up:  none;
}

/* ============================================================
   구조 — 글이 앞서는 지면
   ------------------------------------------------------------
   ★ 마크업은 한 글자도 안 바뀐다.
     상자를 전부 걷고 **줄과 표**로 바꾼다. 구역 제목은 왼쪽 기둥으로 나가
     넓은 화면에서 문서 사이트의 두 단 인상을 만든다.
   ============================================================ */

/* ── 머리 — 색면을 걷고 왼쪽 정렬 ──────────────────────── */
.index-0-lede--panel {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--index-0-line);
  border-radius: 0;
  box-shadow: none;
  padding: var(--index-0-s-5) 0;
  margin-bottom: var(--index-0-s-5);
  text-align: left;
}
.index-0-lede--panel::before { display: none; }
.index-0-lede--panel h1 {
  color: var(--index-0-ink);
  font-size: var(--index-0-fs-h1);   /* 문서 머리는 첫 화면만큼 크지 않다 */
}
/* ── 머리의 제목과 본문을 왼쪽 끝에 맞춘다 ★ ──────────────────────
   `.index-0-lede h1` 은 읽는 폭을 지키려고 `max-width` 를 갖는다. 그런데 워드프레스
   코어가 `.is-layout-constrained > :where(...)` 에 `margin-left: auto !important` 와
   `margin-right: auto !important` 를 걸어 두었다. 폭이 좁아진 제목은 그 여백 때문에
   가운데로 밀린다. 본문 단락도 `max-width` 를 가지면 같은 이유로 저마다 다른 만큼
   밀려서 시작점이 계단처럼 어긋난다 — 실측한 들여쓰기는 96 · 198 · 256 픽셀이었다.

   ⚠️ 이 저장소는 `!important` 를 쓰지 않는 것이 규약이다. 코어가 먼저 그것을 쓴
     자리에서는 같은 무기가 아니면 이기지 못하므로 여기만 예외로 둔다. 특이성을
     아무리 올려도 `!important` 선언은 넘지 못한다.
   ⚠️ 오른쪽은 `auto` 로 남긴다. 양쪽을 다 0 으로 두면 폭을 꽉 채워
     `max-width` 가 의미를 잃는다.
   ⚠️ 같은 자리에 `margin-left: 0` 을 따로 적지 않는다. 코어의 `!important` 에 지므로
     적어도 듣지 않는데, 규칙이 있으면 다음 사람이 듣는 줄로 읽는다. */
.index-0-lede--panel h1,
.index-0-lede--panel p {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

.index-0-lede--panel p,
.index-0-lede--panel .index-0-muted { color: var(--index-0-sub); }
.index-0-lede .index-0-cta { justify-content: flex-start; }
.index-0-lede--panel .index-0-cta .index-0-btn {
  background: var(--index-0-accent-soft);
  color: var(--index-0-accent);
  border: 1px solid var(--index-0-line);
}
.index-0-lede--panel .index-0-cta .index-0-btn:hover {
  background: var(--index-0-accent);
  color: var(--index-0-bg);
}

/* ── 숫자는 표의 한 줄 ─────────────────────────────────── */
.index-0-band {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--index-0-line);
  border-bottom: 1px solid var(--index-0-line);
  border-radius: 0;
  box-shadow: none;
  padding: var(--index-0-s-3) 0;
  margin: var(--index-0-s-5) 0;
}
.index-0-stats { gap: 0; }
.index-0-stat {
  border: 0;
  border-left: 1px solid var(--index-0-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--index-0-s-3);
  padding: var(--index-0-s-1) var(--index-0-s-5);
}
.index-0-stat:first-child { border-left: 0; padding-left: 0; }
.index-0-stat__v { margin-top: 0; }

/* ── 구역 제목을 왼쪽 기둥으로 ──────────────────────────
 * 문서 사이트의 인상은 「본문 옆에 늘 지도가 있다」는 것이다.
 * 마크업에 사이드가 없으므로 **구역 제목이 그 자리를 맡는다.**
 * 화면을 내려도 제목이 따라오게 붙여 둔다.                              */
@media (min-width: 900px) {
  .index-0-homesec {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: var(--index-0-s-5);
    align-items: start;
  }
  .index-0-homesec > h2 {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: var(--index-0-s-4);
    margin: 0;
    font-size: var(--index-0-fs-sm);
    font-weight: var(--index-0-w-head);
    color: var(--index-0-sub);
    letter-spacing: calc(.02em + var(--index-0-ls));
  }
  .index-0-homesec > *:not(h2) { grid-column: 2; }
}

/* ── 분류는 카드가 아니라 줄 ───────────────────────────── */
.index-0-topics { display: block; margin: 0; }
.index-0-topic {
  display: grid;
  grid-template-columns: 10em minmax(0, 1fr) auto;
  gap: var(--index-0-s-3);
  align-items: baseline;
  border: 0;
  border-bottom: 1px solid var(--index-0-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: var(--index-0-s-3) var(--index-0-s-2);
}
.index-0-topic:first-child { border-top: 1px solid var(--index-0-line); }
.index-0-topic:hover, .index-0-topic:focus-visible {
  border-color: var(--index-0-line);
  background: var(--index-0-accent-soft);
}
.index-0-topic__name { font-size: var(--index-0-fs-base); }
.index-0-topic__desc { flex: none; }
.index-0-topic__count { margin: 0; white-space: nowrap; }

/* ── 글 목록은 표 ──────────────────────────────────────
 * ⚠️ 대표 이미지를 **끈다.** 찾아 읽는 목록에서 그림은 한 줄에 한 꼭지밖에
 *   못 담게 만든다. 이 스타일이 파는 것은 한 화면에 담기는 줄 수다.        */
.wp-block-latest-posts.is-grid:not(.is-layout-grid) { display: block; }
.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
  width: auto;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8em;
  column-gap: var(--index-0-s-3);
  align-items: baseline;
  border: 0;
  border-bottom: 1px solid var(--index-0-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: var(--index-0-s-3) var(--index-0-s-2);
  overflow: visible;
}
.wp-block-latest-posts.is-grid:not(.is-layout-grid) li:first-child { border-top: 1px solid var(--index-0-line); }
.wp-block-latest-posts.is-grid:not(.is-layout-grid) li:hover { background: var(--index-0-accent-soft); }
.wp-block-latest-posts.is-grid:not(.is-layout-grid) li > * { padding-inline: 0; padding-top: 0; }
.wp-block-latest-posts.is-grid:not(.is-layout-grid) li .wp-block-latest-posts__featured-image { display: none; }
.wp-block-latest-posts.is-grid:not(.is-layout-grid) li > .wp-block-latest-posts__post-title {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--index-0-fs-base);
}
.wp-block-latest-posts.is-grid:not(.is-layout-grid) li > .wp-block-latest-posts__post-date {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  margin: 0;
}
.wp-block-latest-posts.is-grid:not(.is-layout-grid) li > .wp-block-latest-posts__post-excerpt {
  grid-column: 1;
  grid-row: 2;
  margin-top: var(--index-0-s-1);
}

/* ── 맺음도 상자를 벗는다 ──────────────────────────────── */
.index-0-closing {
  background: transparent;
  border: 1px solid var(--index-0-line);
  border-radius: 0;
  box-shadow: none;
  padding: var(--index-0-s-5);
  text-align: left;
}
.index-0-closing::before { display: none; }
.index-0-closing h2, .index-0-closing h3 {
  color: var(--index-0-ink);
  font-size: var(--index-0-fs-md);
}
.index-0-closing p { color: var(--index-0-sub); margin-left: 0; }
.index-0-closing a { color: var(--index-0-accent); }

/* ── 좁은 화면 ──────────────────────────────────────── */
@media (max-width: 700px) {
  .index-0-topic { grid-template-columns: 1fr auto; }
  .index-0-topic__desc { grid-column: 1 / -1; }
  .wp-block-latest-posts.is-grid:not(.is-layout-grid) li { grid-template-columns: 1fr; }
  .wp-block-latest-posts.is-grid:not(.is-layout-grid) li > .wp-block-latest-posts__post-date {
    grid-column: 1; grid-row: 3; text-align: left;
  }
}

/* ── 머리말 — 얇은 막대 ────────────────────────────────
 * 시안 마의 표식은 「본문 옆에 늘 지도가 있다」인데, 그 지도는 구역 제목이
 * 맡는다(위 참조). 머리말은 **최대한 얇게** 두어 본문이 위로 올라오게 한다.  */
.index-0-head {
  padding-block: var(--index-0-s-3);
  border-bottom: 1px solid var(--index-0-line);
}
.index-0-head__name .wp-block-site-title { font-size: var(--index-0-fs-md); }
.index-0-head__name .wp-block-site-tagline { display: none; }  /* 얇은 막대에 두 줄은 안 들어간다 */
/* 로고도 막대 높이에 맞춘다. 44px 짜리를 그대로 두면 막대가 얇아지지 않는다. */
.index-0-head__logo img { height: 28px; }
/* ⚠️ 메뉴를 한 칸 키운다. 사이트 이름과 메뉴의 크기 차이가 1.4 배까지 벌어져
   메뉴가 각주처럼 보였다. 레퍼런스가 같은 자리(작은 UI 글자)에 쓰는 값은
   16px · 굵기 500 · 자간 +2 퍼센트다. 그 한 칸이 머리말의 균형을 잡는다. */
.index-0-head .index-0-nav__list a {
  font-size: var(--index-0-fs-sm);
  font-weight: var(--index-0-w-label);
  letter-spacing: calc(.02em + var(--index-0-ls));
}

/* ── 바닥글 ──────────────────────────────────────────── */
.index-0-foot { padding-block: var(--index-0-s-4); }

/* ── 옆 차례 — 왼쪽 트리 ──────────────────────────────
 * 시안 마의 표식이다. 어느 화면에 들어와도 왼쪽에 전체 지도가 보인다 —
 * **홈에서도 보인다.** 문서형 지면에서 이 트리는 장식이 아니라 목차 그 자체이고,
 * 홈에만 없으면 들어온 사람이 첫 화면에서 이 사이트의 크기를 못 잰다.
 *
 * ★ 트리는 **면을 갖는다.** 흰 지면 위에 링크만 세워 두면 본문과 같은 물건으로
 *   읽혀 눈이 경계를 못 찾는다. 옅은 면 한 장과 오른쪽 선 하나가 그 경계다
 *   (시안 마의 --rail #F8FAFC + border-right 실측 그대로).
 *
 * ⚠️ 좁은 화면에서는 **본문 위로 접어 올린다.** 옆에 두면 본문이 한 줄에 열 자도
 *   안 들어간다. 순서는 그대로 둔다 — 바꾸면 키보드로 읽는 차례가 화면과 어긋난다.
 */
@media (min-width: 1000px) {
  .index-0-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    column-gap: var(--index-0-s-7);
    align-items: start;
    max-width: var(--index-0-maxw-wide);
    margin-inline: auto;
  }
  /* ★★ **면은 기둥 자신이 그린다.**
   *
   * 셸 배경에 가로 그라디언트를 깔아 왼쪽 264px 을 띠로 칠하면 안 맞는다.
   * 셸에는 워드프레스가 좌우 안쪽 여백을 붙이고(`has-global-padding`), 그라디언트는
   * **테두리 상자** 기준으로 칠해지기 때문이다. 띠는 셸의 바깥 끝에서 시작하는데
   * 기둥 칸은 여백만큼 안쪽에서 시작해, 그 차이만큼 항목 글이 띠 밖으로 나간다.
   *
   * 칸에 직접 칠하면 그 어긋남이 없다. 면이 항목 끝에서 끊기는 문제는
   * `align-items: stretch` 로 칸을 줄 높이만큼 늘려서 푼다(격자의 기본값이다).
   * 따라 움직이는 일은 안쪽 껍데기가 맡는다. */
  .index-0-shell { align-items: stretch; }
  .index-0-side {
    display: block;
    /* ⚠️ 폭을 못 박는다. 코어가 격자의 칸에 `margin-inline: auto !important` 를 걸어
       두는데, 격자에서 자동 여백은 칸을 **글자 폭까지 오그라뜨리고 가운데로 민다.**
       실측하면 264px 칸 안에서 기둥이 115px 로 줄어 떠 있었다.
       폭을 100% 로 주면 남는 자리가 없어져 그 여백이 0 으로 계산된다. */
    width: 100%;
    background: var(--global-palette8);
    border-right: 1px solid var(--index-0-line);
  }
  .index-0-side__inner {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--index-0-s-6) var(--index-0-s-4);
  }
  .index-0-shell > .index-0-main { margin-inline: 0; max-width: none; }
}

/* ── 접이식 분류 ★ ────────────────────────────────────────
 * ⚠️ **위계가 뒤집혀 있었다.** 분류 이름과 그 아래 글 제목이 같은 회색이었고,
 *   분류 이름 쪽이 오히려 더 작았다. 그러면 스물넉 줄이 한 덩어리 회색 글자로
 *   보여서 무엇이 묶음이고 무엇이 항목인지 눈으로 안 갈린다.
 *   묶음은 **먹**, 항목은 **보조색** — 두 단만 두면 그 자리에서 갈린다. */
.index-0-side__sec { border-top: 1px solid var(--index-0-line); }
.index-0-side__sec:first-child { border-top: 0; }

.index-0-side__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--index-0-s-2);
  cursor: pointer;
  list-style: none;                 /* 기본 삼각형을 지운다 */
  padding: var(--index-0-s-3) 0;
  font-size: var(--index-0-fs-sm);
  font-weight: var(--index-0-w-head);
  letter-spacing: calc(.02em + var(--index-0-ls));
  color: var(--index-0-ink);
}
/* 웹킷은 `list-style` 로 안 지워진다. 이 한 줄이 있어야 삼각형이 사라진다. */
.index-0-side__group::-webkit-details-marker { display: none; }
.index-0-side__group:hover { color: var(--index-0-accent); }

/* 열림 표시는 **꺾쇠 하나**다. 글자로 「열기/닫기」를 쓰면 분류 이름과 경쟁한다.
   ⚠️ 테두리로 그린다 — 아이콘 파일도 글꼴도 안 부른다. */
.index-0-side__group::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.index-0-side__sec[open] > .index-0-side__group::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.index-0-side__sec[open] > .index-0-side__group { color: var(--index-0-accent); }

.index-0-side__list { list-style: none; margin: 0 0 var(--index-0-s-3); padding: 0; }
/* 항목은 **누를 면**이다. 글자만 두면 어디까지가 그 항목인지 손이 모른다.
   여백 10/14 · 라운드는 지면 규격을 따른다(시안 마의 12/20 · 라운드 4). */
.index-0-side__list a {
  display: block;
  padding: 10px 14px;
  margin-inline: -14px;
  border-radius: var(--index-0-radius-sm);
  font-size: var(--index-0-fs-sm);
  line-height: calc(1.5 * var(--index-0-lh));
  color: var(--index-0-sub);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.index-0-side__list a:hover { background: var(--index-0-bg); color: var(--index-0-ink); }
/* 지금 읽는 글. 옆 차례에서 자기 위치를 못 찾으면 지도가 아니다.
   면 · 색 · 굵기 셋을 함께 준다 — 옅은 면 위라 색 하나로는 안 잡힌다. */
.index-0-side__list .is-here > a {
  background: var(--index-0-accent-soft);
  color: var(--index-0-accent);
  font-weight: var(--index-0-w-head);
}
.index-0-side__more a {
  color: var(--index-0-sub);
  font-size: var(--index-0-fs-xs);
  letter-spacing: calc(.04em + var(--index-0-ls));
}

/* 글 안 목차는 카드가 아니라 **왼쪽 선이 붙은 줄**이다.
   상자를 걷은 지면에서 목차만 상자로 남으면 그 자리만 딴 세상이 된다. */
.index-0-toc {
  background: none;
  border: 0;
  border-left: 1px solid var(--index-0-line);
  border-radius: 0;
  box-shadow: none;
  padding: var(--index-0-s-2) 0 var(--index-0-s-2) var(--index-0-s-4);
}