/* About… GyoranjongKR

   구조 (build.js 가 만드는 index.html)
     h1.site-title
     details.section > summary.section-title + .section-body
       details.group > summary.group-title + ul.item-list
       ul.item-list > li.item > .item-title + .item-meta */

/* ---------- 웹폰트 ----------
   본문 폰트는 3.4MB 라 늦게 도착합니다. 그동안 다른 폰트로 잠깐 보였다가
   바뀌는 걸 막으려고 폴백을 아예 두지 않았습니다 (font-family 뒤에 serif 없음).
   대신 제목 글자만 담은 10KB 짜리 폰트를 먼저 띄우고, 본문 폰트가 다 온 뒤에
   목록을 보여줍니다 — template.html 의 스크립트가 <html class="loading"> 을
   붙였다 떼는 식. 자바스크립트가 꺼져 있으면 처음부터 다 보입니다.

   .ttf 를 추가하려면 woff2_compress 로 변환한 뒤(brew install woff2)
   @font-face 를 하나 더 적으면 됨. 등록만 하고 안 쓰면 다운로드되지 않음 */

/* 본문 — 조선일보명조를 가로 70% 로 좁힌 것 (scale-font.py).
   CSS transform 과 달리 글자 간격·줄바꿈이 흐트러지지 않음.
   비율을 바꾸려면 폰트를 다시 만들어야 함.
   이탤릭 파일이 없어서 *기울임* 은 브라우저가 흉내낸 기울임으로 나옴 */
@font-face {
  font-family: 'Chosunilbo Myeongjo Narrow';
  src: url('ChosunNm-Narrow.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  /* block — 도착 전에 다른 폰트로 보여주지 않음 */
  font-display: block;
}

/* 위 폰트에서 영문·숫자·기호(ASCII)만 남긴 것. 맨 위 제목 전용이라 10KB.
   다시 만들려면 (pip install fonttools, brew install woff2):
     woff2_decompress ChosunNm-Narrow.woff2
     pyftsubset ChosunNm-Narrow.ttf --unicodes=U+0020-007E \
       --output-file=ChosunNm-Narrow-Latin.ttf --layout-features='' \
       --no-hinting --desubroutinize
     woff2_compress ChosunNm-Narrow-Latin.ttf && rm *.ttf */
@font-face {
  font-family: 'Chosunilbo Myeongjo Narrow Latin';
  src: url('ChosunNm-Narrow-Latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ---------- 조절 변수 ---------- */
:root {
  --bg-color: rgb(200, 200, 200);
  --text-color: rgb(255, 0, 0);
  --accent-color: rgb(0, 0, 255);      /* 호버·열린 토글·드래그 선택 */
  --title-color: rgb(255, 255, 255);   /* 맨 위 제목 */

  /* 토글·링크 밑줄 */
  --underline-thickness: 1px;
  --underline-offset: 0.2em;
  --underline-style: solid;     /* solid / dashed / dotted / wavy */

  --item-gap: 0.8em;            /* 목록 마지막 항목 아래 여백 (항목끼리는 붙음) */
  --meta-scale: 0.75;           /* 메타데이터 크기 (제목 대비) */

  /* 항목 앞 표시 — 되돌리려면 아래 한 줄을 --item-marker: ''; 로 비우면 끝.
     다른 글자도 됨 ('-' '•' '›'). content.md 는 손댈 필요 없음 */
  --item-marker: '*';
  --item-marker-gap: .5em;     /* 표시가 글자보다 왼쪽으로 나가는 폭 (내어쓰기) */

  --page-padding: 0 .5rem;
  --font-size: 64px;
  --letter-spacing: .02em;      /* 자간. 0 이면 폰트 기본값, 음수도 됨 */
  --line-height: 1.2;
}

/* 모바일 — 여백은 그대로, 글자 크기만 */
@media (max-width: 640px) {
  :root {
    --page-padding: 0 .5rem;
    --font-size: 48px;
  }
}

body {
  font-family: 'Chosunilbo Myeongjo Narrow';
  font-weight: 400;
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  margin: 0;
  padding: var(--page-padding);
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* 페이지보다 화면이 길 때 아래쪽 흰 여백이 생기지 않도록 */
html {
  background-color: var(--bg-color);
}

/* ---------- 로딩 화면 ----------
   본문 폰트가 도착할 때까지 제목만 띄워둠. 제목은 10KB 짜리 전용 폰트라
   바로 나오고, 본문 폰트로 바뀌지 않으니 글자가 흔들리지 않음 */
.loading .site-main > :not(.site-title) {
  display: none;
}

/* 기본 굵기 해제 (전부 Regular) */
h1,
summary,
.section-title,
.group-title {
  font-weight: 400;
}

/* 맨 위 제목 — 토글도 링크도 아님.
   ASCII 만 담은 폰트라 한글·특수문자를 쓰면 그 글자는 본문 폰트를 기다림 */
.site-title {
  font-family: 'Chosunilbo Myeongjo Narrow Latin', 'Chosunilbo Myeongjo Narrow';
  font-size: 1em;
  line-height: inherit;
  margin: 0;
  color: var(--title-color);
  cursor: default;
}

/* 토글 ▶ 마커 제거 (이 블록을 지우면 기본 마커 복귀) */
summary {
  cursor: pointer;
  list-style: none;
  width: fit-content;   /* 호버 영역을 글자 폭에 맞춤 */
}
summary::-webkit-details-marker {
  display: none;
}

/* 항목 없는 섹션·그룹 — 호버 효과만 남고 눌리지는 않음 */
.is-empty > span {
  cursor: default;
}

a {
  color: inherit;
  text-decoration-line: none;
}

::selection {
  background-color: var(--accent-color);
  color: var(--bg-color);
}

/* 밑줄 + 강조색 — 토글은 열려 있는 동안 유지, 링크는 호버할 때만 */
summary:hover,
details[open] > summary,
.is-empty > span:hover,
a:hover,
.item-link:hover .item-title {
  color: var(--accent-color);
  text-decoration-line: underline;
  text-decoration-style: var(--underline-style);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

/* 항목 앞 * 표시 — 제목과 같이 색만 바뀌고 밑줄은 안 그음 */
.item:has(a:hover)::before {
  color: var(--accent-color);
}

/* 제목 줄을 통째로 링크로 건 항목 — 메타데이터까지 한 덩어리로 눌림.
   밑줄은 제목 줄에만 (메타데이터에도 긋고 싶으면 .item-link:hover 규칙 삭제) */
.item-link {
  display: block;
  width: fit-content;   /* 글자 오른쪽 빈 공간은 클릭 영역에서 뺌 */
}

.item-link:hover {
  text-decoration-line: none;
}

/* ---------- 계층 ---------- */
.section-body {
  padding-left: .5em;
}

.item-list {
  list-style: none;
  margin: 0;
  padding-left: .5em;
}

/* 항목·그룹끼리는 붙이고 마지막 것 아래에만 여백 */
.item,
.group {
  margin-bottom: 0;
}

.item:last-child,
.group:last-child {
  margin-bottom: var(--item-gap);
}

/* 항목 앞 * 표시 — 글자는 제자리에 두고 표시만 왼쪽 여백으로 내어씀.
   그래서 제목이 두 줄로 넘어가도 둘째 줄이 첫 줄 글자에 맞춰 들어오고,
   표시를 껐다 켜도 글줄이 좌우로 움직이지 않음.
   끄기: 위 --item-marker 를 '' 로 (이 블록은 그대로 둬도 됨) */
.item {
  position: relative;
}

.item::before {
  content: var(--item-marker);
  position: absolute;
  left: calc(-1 * var(--item-marker-gap));
  top: 0;
}

.item-title {
  display: block;
}

.item-meta {
  display: block;
  font-size: calc(1em * var(--meta-scale));
}

/* 취소선 ~이렇게~ */
s {
  text-decoration-thickness: var(--underline-thickness);
}