/* ============================================================
   monday9.com — 책·논문 상세 페이지 (§Y)
   @front_dev / 2026-08-21

   site.css를 그대로 얹고 상세 전용 규칙만 추가한다.
   .sec / .h2 / .body / .label / .caption / .rule-gold / .topbar는
   홈과 같은 선언을 쓴다 — 상세가 별도 사이트로 보이면 §Y-2의 "사이트 연속성"이 깨진다.
   ============================================================ */

/* 상세에는 히어로가 없다(§Y-2). 홈은 히어로가 헤더 뒤로 깔려 상단 여백이 필요 없지만,
   상세는 첫 요소가 곧 콘텐츠라 헤더(fixed, 50px)만큼 직접 비워야 한다.

   ★ .detail-main에 패딩을 주면 .sec의 padding-block(168px)에 **더해져** 첫 요소가
     문서 상단 333px에서 시작했다(실측). 헤더 높이의 6.6배다 —
     §S에서 홈 첫 섹션 상단을 235 → 112px로 줄인 결정과 정면으로 어긋난다.
     그래서 main은 0으로 두고 **첫 섹션의 상단 패딩만 교체**한다. */
.detail-main { padding-block-start: 0; }
.detail-main > .sec:first-of-type { padding-block-start: clamp(96px, 10vh, 132px); }

/* ---------- 백링크 (§Y-2) ---------- */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-mute);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.backlink:hover { color: var(--gold); }
.backlink .arrow { transition: transform var(--dur-fast) var(--ease); }
.backlink:hover .arrow { transform: translateX(-3px); }

/* ---------- 표제부: 표지(좌) + 서지(우) (§Y-3 · §Y-4) ---------- */
.detail-head {
  display: grid;
  /* 상한 280px — 300px이면 DPR-2에서 600px이 필요해 책 3권 원본(568px)을 넘고,
     세로는 더 빠듯하다(300/0.71 = 422 → 845 > 800). 목록의 260px 판정과 같은 기준이다.
     280px이면 폭 560 ≤ 568, 높이 789 ≤ 800으로 네 표지 모두 원본 안이다. */
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(var(--sp-4), 5vw, var(--sp-6));
  align-items: start;
  margin-block: var(--sp-6) var(--sp-7);
}
/* 표지가 아직 없는 페이지(논문 — @designer 확인 대기)는 1열로 둔다.
   빈 열을 남겨두면 서지가 오른쪽으로 밀려 자리가 비어 보인다. */
.detail-head--nocover { grid-template-columns: minmax(0, 1fr); }
/* 24ch로 두니 논문 제목(110자)이 5행으로 접혔다 — 표시 세리프에서 5행은 표제부가 아니라 문단이다.
   32ch면 4행이고, 표지가 도착해 --nocover가 떨어지면 이 값은 쓰이지 않는다(임시 폭). */
.detail-head--nocover .detail-title { max-width: 32ch; }

.detail-cover {
  display: block;
  width: 100%;
  height: auto;              /* §Y-7 — 원본 비율이 곧 렌더 높이다. aspect-ratio를 주면 표지가 왜곡된다 */
  box-shadow: var(--noir-shadow);
}
.detail-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-section);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--fg);
  margin-block: var(--sp-2) 0;
  text-wrap: balance;
}
.detail-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-mute);
  margin-block-start: var(--sp-2);
}

/* 서지 — 라벨/값 2열. 값이 길면(제목·DOI) 접히도록 minmax(0,1fr) */
.biblio {
  list-style: none;
  margin-block-start: var(--sp-5);
  padding: 0;
  border-block-start: var(--rule-hair) solid var(--rule);
}
.biblio li {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-block-end: var(--rule-hair) solid var(--rule);
  font-size: var(--fs-small);
}
.biblio dt, .biblio .label { color: var(--fg-dim); }
.biblio .val { color: var(--fg-mute); overflow-wrap: anywhere; }
.biblio .val a { color: var(--fg-mute); text-decoration-color: var(--rule); }
.biblio .val a:hover { color: var(--gold); }

/* ---------- 본문 산문 ---------- */
.prose { max-width: 64ch; }              /* §Y-3 — 홈 .body와 같은 측정값 */
.prose p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-mute);
  margin-block-end: var(--sp-3);
}
.prose p:last-child { margin-block-end: 0; }

/* 절 제목 — 원문 번호를 유지한다(§Y-4). 번호를 빼면 인용 시 위치를 못 찾는다. */
.h3-sec {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-card);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin-block: var(--sp-6) var(--sp-3);
}
.h3-sec:first-child { margin-block-start: 0; }
.h2-sec {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-section);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--fg);
  margin-block: var(--sp-7) var(--sp-4);
  padding-block-end: var(--sp-2);
  border-block-end: var(--rule-hair) solid var(--rule);
}

/* ---------- 목차 (책) ---------- */
.toc { list-style: none; padding: 0; margin: 0; max-width: 64ch; }
.toc li {
  display: grid;
  grid-template-columns: minmax(0, 2.5rem) minmax(0, 1fr);
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  border-block-end: var(--rule-hair) solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-mute);
}
.toc .num {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--fg-dim);
  padding-block-start: 0.35em;
}

/* ---------- 표 (§Y-4) ----------
   래퍼만 스크롤한다 — 페이지가 가로로 밀리면 V-6의 "가로 스크롤 0"이 깨진다.
   래퍼에 max-width:100%와 min-width:0이 함께 필요하다: 그리드/플렉스 자식은
   기본 min-width:auto라 표 폭만큼 부모를 밀어낸다(래퍼만으로는 안 잡힌다). */
.table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  margin-block: var(--sp-3) var(--sp-2);
  border: var(--rule-hair) solid var(--rule);
  /* 스크롤 가능하다는 신호 — 좌우 끝에 페이드. 배경색과 같은 색이라야 이음매가 안 보인다 */
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 24px) left / 48px 100% no-repeat,
    linear-gradient(-90deg, var(--bg) 0%, transparent 24px) right / 48px 100% no-repeat;
}
.table-wrap table {
  border-collapse: collapse;
  min-width: 560px;         /* 이보다 좁히면 숫자열이 줄바꿈돼 표가 아니라 문단이 된다 */
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}
.table-wrap th, .table-wrap td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-block-end: var(--rule-hair) solid var(--rule);
  color: var(--fg-mute);
  white-space: nowrap;
}
.table-wrap th {
  color: var(--fg);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  background: var(--bg-raise);
}
/* 해석 열만 접히게 — 나머지 숫자열은 nowrap을 유지해야 정렬이 읽힌다 */
.table-wrap td.wrap { white-space: normal; min-width: 22ch; }
.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td { border-block-end: 0; }
.table-note {
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  margin-block-end: var(--sp-5);
}

/* 표·그림 캡션 — 원문 번호 유지(§Y-4) */
.caption-fig {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-block: var(--sp-5) 0;
}

/* 수식 — 이미지가 아니라 텍스트로 둔다(검색·확대·스크린리더 모두 살아 있다) */
.equation {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--fg);
  text-align: center;
  padding: var(--sp-4) var(--sp-2);
  margin-block: var(--sp-3);
  border-block: var(--rule-hair) solid var(--rule);
  overflow-x: auto;
}

/* ---------- 키워드 ---------- */
.keywords { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); padding: 0; margin: var(--sp-3) 0 0; list-style: none; }
.keywords li {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-dim);
  border: var(--rule-hair) solid var(--rule);
  padding: 0.4em 0.7em;
}

/* ---------- 외부 링크 행 ---------- */
.detail-links { list-style: none; padding: 0; margin-block-start: var(--sp-5); }
.detail-links li { border-block-start: var(--rule-hair) solid var(--rule); }
.detail-links li:last-child { border-block-end: var(--rule-hair) solid var(--rule); }
.detail-links a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.detail-links a:hover { color: var(--gold); }
.detail-links .label { color: var(--fg-dim); }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 720px) {
  /* 표지를 1열로 접되 폭을 제한한다 — 100%로 두면 표지 하나가 첫 화면을 다 먹는다 */
  .detail-head { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .detail-cover { width: min(100%, 216px); }
  .biblio li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .toc li { grid-template-columns: minmax(0, 2rem) minmax(0, 1fr); }
  .table-wrap table { min-width: 480px; }
}

/* 목차 마커가 "Part 1"·"Prologue"처럼 낱말일 때 쓰는 변형 — 기본 2.5rem은 숫자 전용 폭이다.
   마커가 빈 행(하위 묶음)도 같은 열 격자에 서야 목차가 계단으로 읽힌다. */
.toc--labeled { max-width: 76ch; }
.toc--labeled li { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); align-items: start; }
.toc--labeled .num { padding-block-start: 0.3em; }
@media (max-width: 560px) {
  /* 좁은 폭에서는 마커를 위로 올린다 — 5.5rem을 유지하면 본문 열이 20자 밑으로 줄어든다 */
  .toc--labeled li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}