/* 온도교회 사명자반 북클럽 — 공유 스타일
   주인공은 책 표지. 제목은 세리프(Noto Serif KR), 본문·라벨은 산세리프(Noto Sans KR).
   한글에는 이탤릭을 쓰지 않는다(한글 폰트에 진짜 이탤릭이 없어 브라우저가 억지로 기울임). */

:root {
  --paper:   #faf8f3;  /* 배경 */
  --paper-2: #f1ece1;  /* 살짝 떠 있는 면 (호버, 표지 placeholder) */
  --ink:     #1c1a17;  /* 본문 */
  --muted:   #6b6358;  /* 보조 텍스트 */
  --rule:    #d5cdbc;  /* 구분선 */
  --accent:  #a6300e;  /* 이번 학기 · 신청 · 진행 중 */
  --accent-2:#3e4a5c;  /* 완료 · 정보 */
  --brand:   #e1a846;  /* 온도교회 로고 골드 — 선(border)에만. 글자에 쓰면 대비 부족 */
  --youth:   #1d74e7;  /* 유스그룹 — 밝은 파랑 */
  --shadow:  0 2px 6px rgba(28, 26, 23, 0.10);

  --serif: 'Noto Serif KR', Georgia, serif;
  --sans:  'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #16140f;
    --paper-2: #1f1c16;
    --ink:     #f0ece2;
    --muted:   #a89f8f;
    --rule:    #3a352b;
    --accent:  #e8836a;
    --accent-2:#9db2cc;
    --brand:   #e8b45c;
    --youth:   #58a6ff;
    --shadow:  0 2px 8px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --paper:   #16140f;
  --paper-2: #1f1c16;
  --ink:     #f0ece2;
  --muted:   #a89f8f;
  --rule:    #3a352b;
  --accent:  #e8836a;
  --accent-2:#9db2cc;
  --brand:   #e8b45c;
  --youth:   #58a6ff;
  --shadow:  0 2px 8px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html {
  font-size: 100%;          /* 사용자 글자 크기 설정을 존중 */
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- frame ---------- */
.frame {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* ---------- 페이지 머리 ----------
   따로 로고 바를 두지 않는다. 제목이 페이지 맨 위에 오고
   바깥 링크(온도교회 로고 · YouTube)는 그 오른쪽에 붙는다. */
/* 랜딩 상단. 교회 워드마크가 맨 위 한 줄을 차지하고, 그 아래 제목 블록이 온다.
   워드마크는 "ONDO"(교회 브랜드)라 아래 h1("온도교회 사명자반 북클럽")과 글자가 겹쳐 보이지
   않는다 — 예전 로고 바를 뺐던 이유(제목과 사이트 이름이 중복)가 여기선 해당하지 않는다. */
.pagehead {
  padding-top: 2.4rem;
  margin-bottom: 3rem;
}

.pagehead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.6rem;
}

.pagehead-main { min-width: 0; }

.pagehead-links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex: none;
  font-size: 0.82rem;
  color: var(--muted);
}
.pagehead-links a { text-decoration: none; }
.pagehead-links a:hover { color: var(--accent); }

/* 화면에서는 감추고 스크린리더에는 남긴다 —
   로고 이미지가 장식이라 이 이름이 없으면 링크를 읽어줄 방법이 없다 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 로고 바 (하위 페이지) ----------
   랜딩만 제목을 맨 위로 올렸고, 나머지 페이지는 이 바를 그대로 쓴다. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.6rem 0 1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.6rem;
}

/* 랜딩과 같은 ONDO 워드마크를 쓰되 한 단계 작게 —
   하위 페이지에서는 로고가 주인공이 아니라 돌아가는 링크다 (랜딩은 1.75rem) */
.wordmark { display: inline-flex; align-items: center; }
.wordmark .mark { height: 1.15rem; width: auto; flex: none; }

.topnav {
  display: flex;
  gap: 1.2rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.topnav a { text-decoration: none; }
.topnav a:hover { color: var(--accent); }

/* 온도교회 워드마크 (랜딩 최상단). YouTube 채널의 공식 로고를 벡터로 추적한 SVG다. */
.church-mark { display: inline-flex; align-items: center; }
.church-mark .mark { height: 1.75rem; width: auto; flex: none; }

/* 로고의 어두운 부분(워드마크의 "DO", 하위 페이지 마크의 "온")은 차콜이라 어두운 배경에서 묻힌다.
   밝은 잉크색으로 칠한 -dark 파일을 테마에 따라 바꿔 끼운다. 금색 부분은 양쪽 다 잘 보여 그대로 둔다.
   랜딩의 ONDO 워드마크(SVG)와 하위 페이지의 마크(PNG)가 이 규칙을 함께 쓴다.
   SVG 안에서 currentColor를 쓰면 안 된다 — <img>로 불러온 SVG는 별도 문서라 페이지 색을 못 물려받는다. */
.mark-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark-light { display: none; }
  :root:not([data-theme="light"]) .mark-dark { display: block; }
}
:root[data-theme="dark"] .mark-light { display: none; }
:root[data-theme="dark"] .mark-dark { display: block; }

@media (max-width: 40rem) {
  .pagehead-top { margin-bottom: 2rem; }
  .church-mark .mark { height: 1.5rem; }
}

/* ---------- 제목 영역 ---------- */
.kicker {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--accent-2);
  margin: 0 0 0.7rem;
}

h1.hero-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
  text-wrap: balance;
}

h1.page-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.9rem;
  text-wrap: balance;
}

.lede {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 44ch;
  margin: 0 0 1.8rem;
  text-wrap: pretty;
}

.eyebrow {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

/* ---------- buttons & links ---------- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 80%, black); }
.btn:active { background: color-mix(in srgb, var(--accent) 68%, black); }

/* 신청 기간이 아닐 때. 보이되 누를 수 없다 */
.btn-off {
  background: var(--paper-2);
  color: var(--muted);
  border: 1px solid var(--rule);
  cursor: default;
  pointer-events: none;
}
.btn-off:hover { background: var(--paper-2); }

.link-quiet {
  font-size: 0.92rem;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}
.link-quiet:hover { color: var(--accent); text-decoration-color: currentColor; }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

/* ---------- section ---------- */
.section { margin-top: 3.2rem; }

.section h2 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--brand);
}

.section-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin: -0.4rem 0 1.4rem;
}

/* ---------- 표지 그리드 (홈 · 신청 페이지 · 과거 도서) ---------- */
.cover-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6rem 1.1rem;
  margin-bottom: 2rem;
}

/* 책ID가 있으면 <a>로 렌더링되어 토론 기록 페이지로 이어진다 */
.cover-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative; /* .new-badge 기준점 */
}

/* 새 학기 책 표시. 별 모양은 직접 생성한 도형이고 글자는 진짜 <text>라
   외부 아이콘 라이선스나 저작자 표시 의무가 없다.

   .shot은 hover 때 rotateY(180deg)로 뒤집히는 면이라 배지를 그 안에 두면 같이 돌아가
   거울상이 되거나 뒷면으로 숨는다. 그래서 .shot의 형제로 두고 카드 기준으로 얹는다.

   바탕 상자를 두지 않고 별 모양 자체를 배지로 쓴다. 대신 표지 그림에 묻히지 않도록
   --paper 색 드롭섀도를 두 겹 둘러 테두리처럼 보이게 했다 (밝은 표지·어두운 표지 양쪽 대응).
   1.75rem 아래로 줄이지 말 것 — NEW 글자가 뭉개진다. */
.new-badge {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  z-index: 2;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--accent);
  filter:
    drop-shadow(0 0 1.5px var(--paper))
    drop-shadow(0 0 1.5px var(--paper))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.new-badge svg { width: 100%; height: 100%; display: block; }

/* 글자 굵기·크기는 여기서 조절한다. viewBox가 0 0 100 100이라 px 값이 곧 도형 좌표다.
   700은 이미 불러오는 웨이트라 폰트를 더 받지 않는다. 더 키우면 별 안쪽 테두리에 닿는다. */
.new-badge text {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 0.5px;
  fill: var(--paper);
}

/* 유스 도서 표시. 제비꼬리 모양 책갈피 리본으로 좌측 상단에 배치한다.
   우측 상단의 .new-badge와 겹치지 않고 반대편 모서리에 위치한다.
   .shot의 형제로 두어 3D 회전 시 뒤집히지 않는다. */
.youth-badge {
  position: absolute;
  top: -0.3rem;
  left: 0.35rem;
  z-index: 2;
  width: 1.55rem;
  height: 1.85rem;
  color: var(--youth);
  pointer-events: none;
  filter:
    drop-shadow(0 0 1.5px var(--paper))
    drop-shadow(0 0 1.5px var(--paper))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.youth-badge svg { width: 100%; height: 100%; display: block; }

.youth-badge text {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  fill: var(--paper);
}

.youth-badge.is-en text {
  font-size: 9.5px;
  letter-spacing: 0.3px;
}

.cover-card .shot {
  box-shadow: var(--shadow);
  background: var(--paper-2);
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.cover-card:hover .t { color: var(--accent); }
.cover-card .shot img { width: 100%; height: 100%; object-fit: cover; }

/* 시트에 표지 URL이 없을 때 제목 첫 글자로 대신한다 */
.cover-card .no-cover {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--muted);
}

/* 한국판·영문판이 둘 다 있을 때: hover하면 카드가 가운데 축으로 회전해 다른 판이 나온다.
   우선판은 페이지 언어(<html lang>)가 정한다 — bookclub-data.js의 localizedPair() 참고.
   터치 기기에는 hover가 없으므로 우선판이 그대로 남는다. */

/* 원근은 회전하는 요소가 아니라 그 부모에 걸어야 한다 */
.cover-card,
.book-entry,
.book-head { perspective: 1000px; }

.cover-card .shot,
.book-cover,
.book-head .cover {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.05, 0.2, 1);
  /* overflow:hidden은 preserve-3d를 깨뜨린다. 잘라내기는 object-fit이 이미 한다 */
}

/* 뒷면(.alt-cover)이 있을 때만 돌린다. 영문판이 없는 책은 그대로 있어야 한다 */
.cover-card:hover .shot:has(.alt-cover),
.book-entry:hover .book-cover:has(.alt-cover),
.book-head .cover:has(.alt-cover):hover { transform: rotateY(180deg); }

/* 앞면: 흐름에 남아 컨테이너 높이를 만든다 (book.html 표지는 높이가 이미지에 달려 있음) */
.primary-cover { position: relative; backface-visibility: hidden; }

/* 뒷면: 같은 자리에 미리 180도 돌려 둔다 — 카드가 뒤집히면 정면으로 온다 */
.alt-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

/* 제목·저자도 같이 바뀐다 (표지만 영문인데 글자는 한글이면 어긋나 보인다).
   두 벌을 같은 칸에 포개므로 칸 높이는 둘 중 긴 쪽이 된다.
   표지 카드는 제목+저자를 한 덩어리로 묶어서(.meta) 그 여유가 카드 맨 아래로 가고,
   목록은 넓어서 두 언어 다 한 줄이라 차이가 안 생긴다. */
.book-main h3,
.book-main .book-meta { display: grid; }

.book-main h3 > .txt-primary,
.book-main h3 > .txt-alt,
.book-main .book-meta > .txt-primary,
.book-main .book-meta > .txt-alt { grid-area: 1 / 1; }

.txt-primary,
.txt-alt { transition: opacity 0.2s ease; }

/* 자리는 유지한 채 숨긴다 (display:none이면 칸 높이가 무너진다) */
.txt-alt { visibility: hidden; opacity: 0; }

.cover-card:hover .txt-primary,
.book-entry:hover .txt-primary { visibility: hidden; opacity: 0; }

.cover-card:hover .txt-alt,
.book-entry:hover .txt-alt { visibility: visible; opacity: 1; }

/* 제목+저자는 한 덩어리(.meta). 두 판이 있으면 그 덩어리째 겹쳐 전환한다 */
.cover-card .meta {
  display: grid;
  margin-top: 0.7rem;
}

.cover-card .meta > .txt-primary,
.cover-card .meta > .txt-alt { grid-area: 1 / 1; }

.cover-card .t {
  display: block;
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

.cover-card .a {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

@media (max-width: 52rem) {
  .cover-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1rem; }
}
@media (max-width: 34rem) {
  .cover-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0.8rem; }
}

/* 홈에서는 한 줄짜리 책장으로 — 표지가 세로를 다 먹으면 아래 메뉴가 안 보인다.
   .cover-grid보다 구체적이라 위 미디어쿼리에 덮이지 않는다. */
.cover-grid.shelf {
  grid-template-columns: repeat(8, 1fr);
  gap: 1rem 0.8rem;
}
.cover-grid.shelf .meta,
.shelf-row .meta { margin-top: 0.5rem; }
.cover-grid.shelf .t,
.shelf-row .t { font-size: 0.68rem; line-height: 1.4; }
.cover-grid.shelf .a,
.shelf-row .a { font-size: 0.64rem; }

@media (max-width: 52rem) {
  .cover-grid.shelf { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 30rem) {
  .cover-grid.shelf { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 학기 연속 책장 (홈) ----------
   학기마다 그리드를 따로 두면 4~7권짜리 학기는 8칸 중 절반이 비어 오른쪽이 크게 남았다.
   그래서 학기 경계에서 줄을 끊지 않고 책을 이어서 채우고, 학기 표시는 카드 줄 위에
   같은 트랙을 쓰는 별도 "레인"에 올린다.

   라벨을 카드와 같은 그리드에 넣으면 auto-placement가 "다음 빈 칸"에 기계적으로 밀어 넣어
   앞 학기 줄 끝에 붙어버린다(예전 시도). 카드 안 흐름에 넣으면 그 카드만 키가 커진다(그다음 시도).
   레인을 분리하고 grid-column으로 명시 배치하면 두 문제가 구조적으로 생기지 않는다. */
.shelf-stream {
  --cols: 8;
  /* 한 줄 안에서 학기가 바뀌는 지점에 끼우는 빈 트랙. fr이라 커버 폭에 비례한다.
     0으로 두면 학기 구분 여백이 사라진다. */
  --sem-gap: 0.333fr;
  margin-bottom: 2rem;
}

@media (max-width: 52rem) { .shelf-stream { --cols: 4; } }
@media (max-width: 30rem) { .shelf-stream { --cols: 3; --sem-gap: 0.25fr; } }

/* grid-template-columns는 줄마다 다르므로(여백 트랙 위치가 다름) JS가 인라인으로 넣는다.
   레인과 카드 줄에 똑같은 값이 들어가 라벨이 카드 x위치에 정확히 맞는다. */
.shelf-lane,
.shelf-row {
  display: grid;
  gap: 1rem 0.8rem;
}

/* 라벨을 아래로 정렬 — 세그먼트가 좁아 제목이 두 줄로 감겨도
   밑줄은 그 레인의 모든 세그먼트에서 같은 높이에 놓인다 */
.shelf-lane { align-items: end; margin-bottom: 1.2rem; }
.shelf-row { margin-bottom: 2.2rem; }
.shelf-row:last-child { margin-bottom: 0; }

/* .section h2와 같은 생김새 — 학기 표시는 현행 유지가 요구사항이다.
   달라지는 건 폭뿐이고, 태그·뱃지로 바꾸지 않는다. */
.shelf-seg {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--brand);
  min-width: 0;              /* 트랙이 글자보다 좁아질 수 있게 */
  overflow-wrap: anywhere;   /* 좁은 세그먼트에서 넘치지 않게 */
}

/* 학기 연속 책장 끝 — 2025년 이전 아카이브 연결 */
.shelf-tail {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.shelf-tail-note {
  font-size: 0.88rem;
  color: var(--muted);
}

/* ---------- 목록형 링크 (둘러보기 · 기타 자료) ---------- */
.index-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.75rem;
  margin-inline: -0.75rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s ease;
}
.index-row:hover { background: var(--paper-2); }

.index-row .label {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  display: block;
}
.index-row .desc {
  font-size: 0.9rem;
  color: var(--muted);
  display: block;
  margin-top: 0.1rem;
}
.index-row:hover .label { color: var(--accent); }

.index-row .arrow {
  flex: none;
  color: var(--rule);
  transition: transform 0.12s ease, color 0.12s ease;
}
.index-row:hover .arrow { color: var(--accent); transform: translateX(0.2rem); }

.pending {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  margin-left: 0.45rem;
}

/* 앞세우는 두 항목. 크기와 채운 면으로만 위계를 주고,
   색 띠나 그림자 카드는 쓰지 않는다. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.3rem 1.4rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s ease;
}
.feature-card:hover { border-color: var(--accent); }

.feature-card .label {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.35;
}
.feature-card:hover .label { color: var(--accent); }

.feature-card .desc { flex: 1; font-size: 0.92rem; color: var(--muted); }

.feature-card .arrow {
  align-self: flex-end;
  color: var(--rule);
  transition: transform 0.12s ease, color 0.12s ease;
}
.feature-card:hover .arrow { color: var(--accent); transform: translateX(0.2rem); }

@media (max-width: 40rem) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ---------- 연도 탭 (summary.html) ---------- */
.tabs-container { border-bottom: 1px solid var(--rule); }
.tabs { display: flex; gap: 1.4rem; flex-wrap: wrap; }

.tab-button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 0.7rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--muted);
  cursor: pointer;
}
.tab-button:hover { color: var(--ink); }
.tab-button.active {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--brand);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---------- 읽은 책 목록 (summary.html) ---------- */
.book-entry {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.4rem;
  padding: 1.5rem 0.75rem;
  margin-inline: -0.75rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s ease;
}
.book-entry:hover { background: var(--paper-2); }

.book-cover {
  width: 5rem;
  aspect-ratio: 2 / 3;
  background: var(--paper-2);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--muted);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }

.book-main h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}
.book-entry:hover .book-main h3 { color: var(--accent); }

.book-meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.book-main .desc {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 0.6rem;
  text-wrap: pretty;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border: 1px solid currentColor;
}
.status-done   { color: var(--accent-2); }
.status-active { color: var(--accent); }
.status-youth {
  color: var(--paper);
  background: var(--youth);
  border-color: var(--youth);
}

@media (max-width: 40rem) {
  .book-entry { grid-template-columns: 4rem 1fr; gap: 1rem; }
  .book-cover { width: 4rem; }
}

/* ---------- 책 상세 (book.html) ---------- */
.book-head {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.book-head .cover {
  width: 11rem;
  flex: none;
  box-shadow: var(--shadow);
  background: var(--paper-2);
}
.book-head .meta { flex: 1 1 20rem; }
.book-head .description {
  font-size: 1rem;
  color: var(--muted);
  margin: 0.8rem 0 0;
  text-wrap: pretty;
}

@media (max-width: 40rem) {
  .book-head .cover { width: 7.5rem; }
}

.section h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--brand);
}

.placeholder { color: var(--muted); font-size: 0.95rem; }

/* 스프레드시트에서 온 마크다운 본문 */
.prose p, .prose li { margin-bottom: 0.9rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 0.9rem; }
.prose blockquote {
  border-left: 3px solid var(--brand);
  padding-left: 1rem;
  margin: 1.2rem 0;
  color: var(--muted);
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: var(--paper-2);
  padding: 0.1rem 0.35rem;
  font-size: 0.9em;
}
.prose pre {
  background: var(--paper-2);
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}
.prose pre code { background: none; padding: 0; }

/* ---------- 설정 안내 (participants.html) ---------- */
.setup-step { padding: 1.2rem 0; border-top: 1px solid var(--rule); }
.setup-step:first-of-type { border-top: none; padding-top: 0; }
.setup-step h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  border: none;
  padding: 0;
  margin: 0 0 0.5rem;
}
.setup-step p { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.95rem; }
.setup-step ul { margin: 0.4rem 0; padding-left: 1.4rem; color: var(--muted); font-size: 0.95rem; }
.setup-step code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: var(--paper-2);
  padding: 0.1rem 0.35rem;
  font-size: 0.9em;
}

.setup-note {
  border-left: 3px solid var(--rule);
  padding: 0.2rem 0 0.2rem 1rem;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 1.2rem;
}
.setup-note.warn { border-left-color: var(--accent); }

/* ---------- 임베드 ---------- */
.embed-box {
  display: block;
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

/* ---------- footer ---------- */
footer {
  margin-top: 4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
}
footer a { text-decoration: none; }
footer a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}