/* ============================================================
   시안 site — 홈페이지(스케치 다이어리)와 같은 화면, 속지는 한지
   홈페이지의 /css/style.css(머리 메뉴·색·글꼴)와 /css/diary.css(속지 틀)를 먼저 불러오고,
   이 파일은 그 위에 한지 속지·교본 본문·책 펼침 움직임을 얹는다.
   바깥(책상)은 홈페이지의 쪽빛 그대로, 책장만 한지 색이다.

   ▼ 설정판: 아래 값만 바꾸면 책장 모양이 바뀝니다.
   ============================================================ */
:root {
  --hanji:      #f1ead9;   /* 한지(책장) 바탕색 */
  --hanji-edge: #e2d7bf;   /* 책장 가장자리 색 */
  --ink:        #2a2620;   /* 본문 글씨 — 먹 */
  --ink-soft:   #6f665a;   /* 캡션·차례 같은 옅은 글씨 */
  --gold:       #8b6b2e;   /* 소제목 — 한지 위에서 읽히는 짙은 금색 */
  --seal:       #9a2f24;   /* 점·숫자·표시 — 주홍(홈페이지 shu) */
  --line:       rgba(42, 38, 32, .16);   /* 가는 선 */

  --book-measure: 36em;    /* 본문 한 줄 폭 */
  --book-wide: 52em;       /* 사진 줄이 본문보다 넓게 펼쳐지는 폭 */
  --book-line: 1.95;       /* 줄 간격 */
  --book-drawing-tone: none;   /* 펜화 색 보정 — 예: contrast(1.05) */
}

/* ---------- 한지 책장 (장 화면) ----------
   입문서 첫 화면(표지, .album)은 스케치 다이어리와 같은 검은 대지 그대로 두고, 장을 펼치면 한지가 나온다 */
.book-page .entry {
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(60, 45, 20, .22), rgba(60, 45, 20, 0) 3.5%),   /* 묶음 쪽의 그늘 */
    radial-gradient(ellipse at 50% 40%, var(--hanji) 55%, var(--hanji-edge) 140%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}
.book-page .entry::before {   /* 한지 섬유 결 */
  opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.book-page .entry__title { color: var(--ink); }
.book-page .entry__meta { color: var(--ink-soft); }
.book-page .entry__meta time { color: var(--seal); margin-right: 1em; }

/* ---------- 장 머리 ---------- */
.book-page .entry { max-width: 1120px; }   /* 표지(.album)와 같은 폭: 넘길 때 책장 크기가 바뀌지 않게 */
.book-page .entry__head { max-width: var(--book-measure); }
.book-toc { margin: 2em 0 0; padding: 1.2em 0 0; border-top: 1px solid var(--line); font-size: .92rem; }
.book-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2em; }
.book-toc ul ul { display: none; }
.book-toc li { break-inside: avoid; margin: 0 0 .5em; }
.book-toc a { color: var(--ink-soft); text-decoration: none; }
.book-toc a:hover { color: var(--seal); }
@media (max-width: 560px) { .book-toc ul { columns: 1; } }

/* 차례에서 절로 미끄러져 갈 때 위 메뉴 띠에 제목이 가리지 않게 */
.book section { scroll-margin-top: calc(96px + env(safe-area-inset-top, 0px)); }

/* ---------- 본문 ---------- */
.book { max-width: var(--book-measure); line-height: var(--book-line); color: var(--ink); word-break: keep-all; overflow-wrap: break-word; }
.book p { margin: 0 0 1.3em; }
.book strong { color: #000; font-weight: 700; }
.book a { color: var(--seal); }
.book h2 {
  font-family: var(--mincho); font-weight: 700; color: var(--ink);
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.7rem); line-height: 1.4; letter-spacing: .03em;
  margin: 3.2em 0 1em; padding-bottom: .6em; border-bottom: 1px solid var(--ink);
}
.book h2::before { content: "◆"; color: var(--seal); font-size: .6em; margin-right: .7em; vertical-align: .25em; }
.book section:first-child > h2 { margin-top: .4em; }
.book h3 {
  font-family: var(--mincho); font-weight: 700; color: var(--gold);
  font-size: 1.15rem; line-height: 1.5; margin: 2.4em 0 .8em;
}
.book h4 { font-size: 1rem; color: var(--ink); margin: 2em 0 .6em; }
.book ul, .book ol { padding-left: 1.3em; margin: 0 0 1.4em; }
.book li { margin: .4em 0; }
.book li::marker { color: var(--seal); }
.book em { color: var(--ink-soft); }

/* ---------- 사진: 원래 색 그대로, 틀 없이 한지에 찍힌 것처럼 ----------
   펜화의 흰 바탕은 곱하기(multiply)로 한지 색에 스며든다 — 검은 띠·하카마는 그대로 검다.
   실사진에는 원고에서 {.photo} 를 붙여 둔다(스며들지 않고 사진 그대로) */
.book figure { margin: 2.4em 0; text-align: center; }
.book .mount__photo { display: block; padding: 0; background: none; box-shadow: none; transform: none; }
.book .mount__photo::after { display: none; }   /* 사진첩 모서리 종이 없음 */
.book img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }   /* 휴대폰 길게 눌러 저장 막기 */
.book .mount__photo img { display: block; width: 100%; height: auto; filter: var(--book-drawing-tone); mix-blend-mode: multiply; }
.book .mount__photo img:is(.photo, .temp) { filter: none; mix-blend-mode: normal; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.book figure > .mount__photo { width: fit-content; max-width: 100%; margin: 0 auto; }
.book figcaption { margin-top: .8em; font-size: .85rem; line-height: 1.6; color: var(--ink-soft); }
.book p > .mount__photo { margin: 2em auto; width: fit-content; max-width: 100%; }

.book .figure-row {
  display: flex; flex-wrap: wrap; gap: 1.1em .9em; justify-content: center;
  margin: 2.4em calc((var(--book-measure) - min(var(--book-wide), 100vw - 2 * var(--gutter) - 40px)) / 2);
}
.book .figure-row figure { flex: 1 1 0; min-width: 0; margin: 0; }
.book .figure-row.cols-2 figure { flex: 0 0 calc((100% - .9em) / 2); }
.book .figure-row.cols-3 figure { flex: 0 0 calc((100% - 1.8em) / 3); }
.book .figure-row.cols-4 figure { flex: 0 0 calc((100% - 2.7em) / 4); }
.book .figure-row.cols-5 figure { flex: 0 0 calc((100% - 3.6em) / 5); }
.book .figure-row.cols-6 figure { flex: 0 0 calc((100% - 4.5em) / 6); }
.book .figure-row .mount__photo { width: auto; }
.book .figure-row figcaption { font-size: .78rem; margin-top: .5em; }
@media (max-width: 640px) {
  .book .figure-row { margin-left: 0; margin-right: 0; }
  .book .figure-row figure, .book .figure-row[class*="cols-"] figure { flex: 0 0 calc((100% - .9em) / 2); }
  .book .figure-row.cols-3 figure, .book .figure-row.cols-5 figure, .book .figure-row.cols-6 figure { flex: 0 0 calc((100% - 1.8em) / 3); }
}

/* 임시 사진(원서 사진 자리표시) — 공개 전 모두 교체 */
img.temp { outline: 3px dashed var(--seal); outline-offset: 3px; }

/* ---------- 움짤(gif) 재생 단추 ---------- */
.book .gif-player { position: relative; margin: 2.4em auto; max-width: 100%; }
.book .gif-player img { cursor: pointer; }
.book .gif-player button {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--seal); opacity: .9; font-size: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: opacity .2s, transform .2s;
}
.book .gif-player button::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff;
}
.book .gif-player button:hover { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
.book .gif-player.playing button { opacity: 0; pointer-events: none; }

/* ---------- 표 ---------- */
.book table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: .9rem; }
.book th, .book td { padding: .6em .8em; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.book thead th { font-family: var(--mincho); color: var(--ink); font-weight: 700; border-bottom: 1.5px solid var(--ink); }
.book td:first-child { white-space: nowrap; font-family: var(--mincho); color: var(--seal); font-variant-numeric: tabular-nums; }

/* ---------- 도장장 칼럼: 한지 위에 덧댄 조금 짙은 종이 ---------- */
.book section.column {
  margin: 4em calc(-1 * clamp(0px, 4vw, 56px)) 1em; padding: 2.2em clamp(20px, 4vw, 56px) 1.4em;
  background: rgba(139, 107, 46, .08); border-top: 2px solid var(--seal);
}
.book section.column > h2 { margin-top: 0; border-bottom-color: var(--line); }

/* ---------- 앞뒤 장, 맨 아래 ---------- */
.book-nav { margin-top: 4em; padding-top: 1.6em; border-top: 1px solid var(--line); }
.book-nav a, .book-nav span { font-family: var(--mincho); color: var(--ink); }
.book-nav a:hover { color: var(--seal); }
.book-nav small { color: var(--ink-soft) !important; }
.book-nav span.next { color: var(--ink-soft); text-align: right; justify-self: end; }
.book-foot { max-width: var(--book-measure); margin: 3.5em auto 0; text-align: center; font-size: .78rem; line-height: 1.8; color: var(--ink-soft); letter-spacing: .04em; }
.album .book-foot { color: var(--haze); }

/* ---------- 목차(입문서 첫 화면 = 표지): 검은 대지에 금색 ---------- */
.chapter-list ul { list-style: none; margin: 0; padding: 0; }
.chapter-list li { border-bottom: 1px solid var(--rule); }
.chapter-list li:first-child { border-top: 1px solid var(--rule); }
.chapter-list a {
  display: flex; align-items: baseline; gap: 1.6em; padding: 1.4em .3em;
  text-decoration: none; color: var(--kin); font-family: var(--mincho); letter-spacing: .08em;
}
.chapter-list a strong { color: var(--kinu); font-size: clamp(1.15rem, 1vw + .9rem, 1.45rem); font-weight: 700; letter-spacing: .03em; }
.chapter-list a:hover strong { color: var(--kin); }
.chapter-list a::after { content: "→"; margin-left: auto; color: var(--haze); transition: transform .2s; }
.chapter-list a:hover::after { color: var(--kin); transform: translateX(4px); }

/* 책장 넘김은 홈페이지 /css/diary.css 의 .turn(스케치 다이어리와 같은 움직임)을 그대로 쓴다 */