/* -----------------------------------------------------------
   색·폰트 변수
   포인트 컬러는 --accent 한 줄만 바꾸면 전체에 반영됩니다.
   ----------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #888888;
  --line: #e5e5e5;
  --accent: #000000; /* ← 일반 포인트 컬러 (item 페이지 본문 링크, 호버 캡션 등) */

  /* index.html 호버 시 도형별로 다른 컬러를 쓴다 — 칸딘스키 모티브 */
  --accent-circle: #ff0066; /* ○ 원 */
  --accent-triangle: #14c914; /* △ 각 */
  --accent-square: #409dfc; /* □ 방 */

  --mono:
    ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "D2Coding",
    "Nanum Gothic Coding", monospace;
}

* {
  box-sizing: border-box;
}

/* 방 열 호버 시 preview가 body 오른쪽 바깥으로 빠져도 가로 스크롤이 생기지 않도록 */
html {
  overflow-x: clip;
}

body {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}

/* -----------------------------------------------------------
   index.html — 아카이브 목록 (3열 그리드)
   ----------------------------------------------------------- */
header h1 {
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  margin: 0 0 5rem 0;
  letter-spacing: 0.02em;
}

/* 3열 그리드는 index.html의 archive-list main에만 적용한다.
   (about.html처럼 main 안에 section이 있어도 그리드가 적용되지 않도록 클래스로 한정.) */
main.archive-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}

main section {
  position: relative;
}

main section h2 {
  font-size: 14px;
  font-weight: normal;
  color: var(--muted);
  margin: 0 0 1.5rem 0;
  letter-spacing: 0.05em;
}

/* index.html 섹션 헤더에 채워진 도형(●▲■)을 도형별 강조색으로 주입.
   HTML의 h2 텍스트에는 도형을 두지 않는다(중복 방지). */
main.archive-list section h2::before {
  display: inline-block;
  margin-right: 0.4em;
}
main.archive-list section[data-shape="○"] h2::before {
  content: "●";
  color: var(--accent-circle);
}
main.archive-list section[data-shape="△"] h2::before {
  content: "▲";
  color: var(--accent-triangle);
  /* 채워진 ▲은 ●·■보다 베이스라인이 살짝 낮다 — 약간 올려 줄을 맞춘다. */
  transform: translateY(-0.08em);
}
main.archive-list section[data-shape="□"] h2::before {
  content: "■";
  color: var(--accent-square);
}

ol.archive {
  list-style: none;
  counter-reset: item;
  padding: 0;
  margin: 0;
}

ol.archive li {
  counter-increment: item;
  display: flex;
  align-items: baseline;
}

ol.archive li::before {
  content: counter(item, decimal-leading-zero);
  flex: 0 0 3em;
  color: var(--muted);
}

ol.archive a {
  color: var(--fg);
  text-decoration: none;
  word-break: keep-all; /* 한국어 단어는 중간에서 끊기지 않도록 */
  transition: color 0.12s ease;
}

ol.archive a:hover {
  color: var(--accent);
}

/* index.html 도형별 호버 컬러 — 각 섹션에 data-shape 속성을 붙여 구분.
   원/각/방 컬럼별로 다른 강조 색이 적용된다. */
main.archive-list section[data-shape="○"] ol.archive a:hover {
  color: var(--accent-circle);
}
main.archive-list section[data-shape="△"] ol.archive a:hover {
  color: var(--accent-triangle);
}
main.archive-list section[data-shape="□"] ol.archive a:hover {
  color: var(--accent-square);
}

/* 좁은 화면에서는 1열로 쌓기 (index 페이지만) */
@media (max-width: 800px) {
  main.archive-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  main.archive-list section + section h2 {
    margin-top: 3.5rem;
  }
}

/* 호버 시 뜨는 미리보기: 커버 썸네일 + 코멘트 한 줄
   (스크립트가 각 링크에 <span class="preview"> 컨테이너를 주입합니다)
   호버한 항목이 속한 열의 오른쪽 공간에 뜹니다.
   — 원 호버 시 → 원 오른쪽 (원/각 사이 공간)
   — 각 호버 시 → 각 오른쪽 (각/방 사이 공간)
   — 방 호버 시 → 방 오른쪽 (콘텐츠 우측 여백) */
.preview {
  position: absolute;
  top: 2rem;
  left: calc(100% + 1rem);
  width: 200px;
  pointer-events: none;
  z-index: 100;
  /* opacity 토글로 부드러운 페이드 — display none/block 즉시 전환의 끊김을 없앤다.
     호버 해제 시 살짝 길게(180ms) 빠지도록 해 마우스가 아슬아슬하게 빠질 때의 깜빡임도 줄인다. */
  opacity: 0;
  transition: opacity 0.18s ease;
}

.preview img {
  display: block;
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--line);
}

.preview-caption {
  display: block;
  margin-top: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.5;
  word-break: keep-all;
}

.preview-title {
  display: block;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 0.25rem;
}

.preview-comment {
  display: block;
}

/* 캡션이 비어 있을 때(데이터를 못 불러왔을 때)는 박스도 숨긴다 */
.preview-caption:empty {
  display: none;
}

/* 데스크톱 호버 트리거 — preview는 link의 형제이므로 li:hover에 걸어 트리거.
   (hover: hover)로 감싸 터치 디바이스의 우발적 호버를 차단한다. */
@media (hover: hover) {
  ol.archive li:hover .preview {
    opacity: 1;
  }
}

/* 미리보기: 부모 섹션의 data-shape에 따라 이미지·캡션 테두리만 강조색으로.
   (코멘트 텍스트는 기존 muted 그대로 — 호버 색은 링크 텍스트에서만 표현한다.)
   원/각/방 색 체계는 ol.archive a:hover와 동일(원=ff0066, 각=14c914, 방=409dfc). */
main.archive-list section[data-shape="○"] .preview img,
main.archive-list section[data-shape="○"] .preview-caption {
  border-color: var(--accent-circle);
}
main.archive-list section[data-shape="△"] .preview img,
main.archive-list section[data-shape="△"] .preview-caption {
  border-color: var(--accent-triangle);
}
main.archive-list section[data-shape="□"] .preview img,
main.archive-list section[data-shape="□"] .preview-caption {
  border-color: var(--accent-square);
}

/* 방(마지막 열)은 오른쪽에 공간이 부족하니 preview를 왼쪽에 띄운다 */
main section:last-of-type .preview {
  left: auto;
  right: calc(100% + 1rem);
}

/* 모바일/터치 디바이스: preview를 인라인으로 펼침.
   탭하면 .expanded가 li에 붙고, .preview가 link 아래 새 줄에 펼쳐진다.
   '자세히 보기' 링크가 미리보기 안에 있어서 항목 페이지로 이동 가능. */
@media (hover: none) {
  ol.archive li {
    flex-wrap: wrap;
  }
  .preview {
    display: none;
    position: static;
    opacity: 1;
    transition: none;
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    pointer-events: auto;
  }
  ol.archive li.expanded .preview {
    display: block;
  }
  ol.archive li.expanded > a {
    color: var(--accent);
  }
}

/* 좁은 데스크톱 (호버 가능 + 화면 작음): 절대 위치 미리보기가 화면 밖으로 나가는 걸 방지. */
@media (max-width: 800px) and (hover: hover) {
  .preview {
    display: none !important;
  }
}

/* '자세히 보기' 링크 — 모바일에서만 표시. 데스크톱은 호버한 link 자체를 클릭하면 됨. */
.preview-more {
  display: none;
}
@media (hover: none) {
  .preview-more {
    display: block;
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
    text-align: center;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--line);
    text-decoration: none;
    letter-spacing: 0.02em;
  }
}

/* -----------------------------------------------------------
   item.html — 개별 아이템 페이지
   ----------------------------------------------------------- */
nav {
  margin-bottom: 3rem;
}

nav a {
  color: var(--muted);
  text-decoration: none;
}

nav a:hover {
  color: var(--accent);
}

#cover {
  max-width: 100%;
  height: auto;
  margin-bottom: 2rem;
}

h1#title {
  font-size: 14px;
  font-weight: normal;
  margin: 0 0 1.5rem 0;
}

#meta {
  list-style: none;
  margin: 0 0 3rem 0;
  color: var(--muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0;
}

#meta li {
  padding: 0.1em 0;
}

#meta strong {
  font-weight: normal;
  color: var(--fg);
  display: inline-block;
  width: 7em;
}

/* comment 메타 줄은 도형별 강조색으로 — 편집자 시각의 핵심 한 줄을 시각적으로 들어 올린다.
   라벨('comment')은 #meta strong 규칙으로 fg를 유지하므로, 콜론 뒤 값만 강조색이 된다. */
body[data-shape="○"] #meta li[data-key="comment"] {
  color: var(--accent-circle);
}
body[data-shape="△"] #meta li[data-key="comment"] {
  color: var(--accent-triangle);
}
body[data-shape="□"] #meta li[data-key="comment"] {
  color: var(--accent-square);
}

/* 본문 섹션 헤더 (## 맥락, ## 쓰임, ## 편집점) */
#content h2 {
  font-size: 14px;
  font-weight: normal;
  color: var(--fg);
  margin: 2.5rem 0 0.75rem 0;
  letter-spacing: 0.02em;
}

/* h2 앞에 해당 챕터의 shape를 불렛처럼 붙인다.
   shape 값은 item.html의 스크립트가 frontmatter에서 읽어 body[data-shape]에 넣어준다.
   (원 챕터 → ○, 삼각 챕터 → △, 방 챕터 → □) */
#content h2::before {
  color: var(--muted);
  margin-right: 0.6em;
}
body[data-shape="○"] #content h2::before {
  content: "○";
}
body[data-shape="△"] #content h2::before {
  content: "△";
  /* △은 ○·□보다 시각적으로 살짝 낮게 앉는다(폰트 공통). 살짝 올려 베이스라인을 맞춘다. */
  display: inline-block;
  transform: translateY(-0.08em);
}
body[data-shape="□"] #content h2::before {
  content: "□";
}

/* △을 인라인으로 섞어 쓸 때 쓰는 유틸 클래스 — 예: "○△□" 나열, 섹션 헤더의 "△ 각 角" */
.shape-lift {
  display: inline-block;
  transform: translateY(-0.08em);
}

#content a {
  color: var(--accent);
}

/* item.html: 두 열 레이아웃
   왼쪽 — 이미지(작게) + 타이틀 + 메타 (sticky로 스크롤해도 따라옴)
   오른쪽 — 본문 설명
   이미지에 호버하면 .cover-zoom이 오른쪽 영역에 크게 떠서 자세히 볼 수 있다. */
body:has(#content) {
  max-width: 1200px;
}

body:has(#content) .cols {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 4rem;
  align-items: start;
}

/* 왼쪽 컬럼은 sticky — 본문이 길어져도 이미지/타이틀이 시야에서 사라지지 않는다.
   .cover-zoom이 absolute로 이 안에 자리잡으므로 positioning context도 겸한다. */
body:has(#content) .col-left {
  position: sticky;
  top: 2rem;
}

body:has(#content) #cover {
  width: 100%;
  margin-bottom: 1.25rem;
  cursor: zoom-in;
}

body:has(#content) h1#title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}

body:has(#content) #meta {
  font-size: 13px;
}

body:has(#content) #meta strong {
  width: 6em;
}

/* 오른쪽 본문의 첫 요소는 위쪽 여백을 없애 왼쪽 이미지 상단과 줄을 맞춘다 */
body:has(#content) #content > :first-child {
  margin-top: 0;
}

/* 호버 시 뜨는 큰 이미지: 작은 이미지와 같은 자리(왼쪽 컬럼 좌상단)에서 시작해
   오른쪽 본문 영역으로 확장되며 뜬다.
   세로는 col-left의 전체 높이만큼 확장되어 #meta 하단 디바이더까지 닿는다.
   pointer-events: none으로 마우스가 작은 이미지에 머물도록 해 호버 상태를 유지한다. */
.cover-zoom {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: 60vw;
  object-fit: contain;
  object-position: top left;
  pointer-events: none;
  background: var(--bg);
  border: 1px solid var(--line);
  z-index: 100;
}

#cover:hover ~ .cover-zoom:not([hidden]) {
  display: block;
}

/* 좁은 화면에서는 한 열로 쌓고 sticky·zoom 모두 해제 */
@media (max-width: 800px) {
  body:has(#content) .cols {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  body:has(#content) .col-left {
    position: static;
  }
  .cover-zoom {
    display: none !important;
  }
}

/* 본문 아래의 이전/다음 네비게이션.
   ◁ 이전   07 / 17   다음 ▷  형태로 양 끝 정렬.
   카운터는 같은 카테고리 안에서의 순번. */
#item-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

#item-nav a {
  color: var(--fg);
  text-decoration: none;
}

#item-nav a:hover {
  color: var(--accent);
}

#item-nav .counter {
  color: var(--muted);
}

/* 첫 번째/마지막 아이템일 때 삼각형은 남겨두되 클릭 불가로 흐리게 표시 */
#item-nav .disabled {
  color: var(--line);
}

/* -----------------------------------------------------------
   footer — 페이지 하단 가운데 정렬 About 링크
   index.html, item.html 양쪽에 들어갑니다.
   ----------------------------------------------------------- */
footer {
  margin-top: 5rem;
  text-align: center;
  font-size: 13px;
}

footer a {
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.05em;
}

footer a:hover {
  color: var(--accent);
}

/* -----------------------------------------------------------
   about.html — 가이드/소개 페이지
   2컬럼: 좌(TOC) + 우(활성 섹션 본문)
   ----------------------------------------------------------- */
body.about {
  max-width: 1000px;
}

body.about .about-title {
  font-size: 18px;
  font-weight: normal;
  margin: 0 0 2rem 0;
}

/* 좌(About 타이틀 + TOC) / 우(본문) 그리드.
   align-items 기본값(stretch)을 유지해 좌측 컬럼이 row 전체 높이를 차지하도록.
   그래야 안쪽의 .about-toc sticky가 실제로 동작한다. */
body.about .about-cols {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 4rem;
}

/* 목차(TOC) — 항상 보이며, 클릭하면 우측에 해당 섹션만 표시된다.
   목록(index.html)의 ol.archive와 같은 자릿수 표기로 통일감. */
body.about .about-toc {
  position: sticky;
  top: 2rem;
  margin: 0;
  padding: 0;
}

body.about .about-toc ol {
  list-style: none;
  counter-reset: toc;
  padding: 0;
  margin: 0;
}

body.about .about-toc li {
  counter-increment: toc;
  display: flex;
  align-items: baseline;
  padding: 0.15em 0;
}

body.about .about-toc li::before {
  content: counter(toc, decimal-leading-zero);
  flex: 0 0 3em;
  color: var(--muted);
}

body.about .about-toc a {
  color: var(--fg);
  text-decoration: none;
}

body.about .about-toc a:hover {
  color: var(--accent);
}

/* 현재 보고 있는 섹션의 TOC 항목은 굵게 — 좌측에서 위치를 즉시 알 수 있다. */
body.about .about-toc a.active {
  font-weight: 600;
  color: var(--accent);
}

/* 한 번에 한 섹션만 보이도록 — .active가 있는 섹션만 표시한다.
   인트로(.about-intro)는 항상 표시 (디스클레이머 역할). */
body.about main section {
  display: none;
}
body.about main section.active {
  display: block;
}

/* 모바일: TOC와 본문을 세로로 쌓고 sticky 해제. */
@media (max-width: 800px) {
  body.about .about-cols {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  body.about .about-toc {
    position: static;
  }
}

/* TOC 링크 클릭 시 부드럽게 스크롤. 섹션 위에 약간 여유. */
html {
  scroll-behavior: smooth;
}
body.about section {
  scroll-margin-top: 2rem;
}

/* 첫 ## 이전의 본문 — 박스 없이 안내문/주석으로 표시 */
body.about .about-intro {
  margin: 0 0 2rem 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

body.about .about-intro p {
  margin: 0 0 0.6rem 0;
}

/* 섹션을 네모 상자로 구분 — 다이어그램(□) 모티브 */
body.about main section {
  margin-bottom: 1.5rem;
  padding: 1.75rem 2rem 1.5rem;
  border: 1px solid var(--line);
}

body.about main section h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 1.25rem 0;
  letter-spacing: 0.02em;
}

/* 박스 안의 소제목(h3): h2와 본문 사이의 위계.
   같은 박스 안에서 두 번째 이상 등장하는 h3는 위쪽에 여유를 둬 단락을 나눈다. */
body.about main section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin: 2rem 0 0.6rem 0;
}

body.about main section h2 + h3 {
  margin-top: 0;
}

body.about main section p {
  margin: 0 0 1em 0;
  line-height: 1.8;
}

body.about main section p:last-child {
  margin-bottom: 0;
}

body.about main section ul,
body.about main section ol {
  margin: 0 0 1em 0;
  padding-left: 1.5em;
  line-height: 1.8;
}

body.about main section ul:last-child,
body.about main section ol:last-child {
  margin-bottom: 0;
}

body.about main section li {
  margin: 0.4em 0;
}

body.about main section strong {
  font-weight: 600;
  color: var(--fg);
}

body.about main section code {
  font-family: var(--mono);
  background: #f5f5f5;
  padding: 0 0.3em;
  border-radius: 2px;
}