/* css/library.css — 자료실(library.html) 전용. */

/* ── 서가 ── */
.shelf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.shelf-card {
  text-align: left; font-family: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; padding: 15px 14px 13px;
  background: var(--paper-card); color: var(--ink);
  transition: border-color .18s, transform .18s, background .18s;
}
.shelf-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.shelf-card.on { border-color: var(--gold); background: var(--gold-soft); }
.shelf-cnt {
  display: block; font-family: var(--mono); font-size: 10px; color: var(--gold);
  letter-spacing: .1em; margin-bottom: 7px;
}
.shelf-name { display: block; font-family: var(--serif); font-weight: 700; font-size: 16px; margin-bottom: 5px; }
.shelf-desc { display: block; font-size: 11.5px; line-height: 1.6; color: var(--paper-dim); word-break: keep-all; }

/* ── 글 목록 ── */
.lib-row { width: 100%; text-align: left; font-family: inherit; cursor: pointer; color: var(--ink); }
.lib-sub { color: var(--gold-bright) !important; font-size: 12.5px !important; margin-top: 4px !important; }

/* 입문 / 심화 — 같은 서가 안에서도 읽는 순서가 있다는 표시.
   서가 이름 옆에 작게 붙여, 목록을 훑을 때 어디부터 읽을지 잡히게 한다. */
.lib-level {
  font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  color: var(--gold); border: 1px solid var(--gold); border-radius: 3px;
  padding: 1px 5px; margin-left: 5px; vertical-align: 1px;
}

/* ── 용어집 ── */
.glossary {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 24px;
  border-top: 1px solid var(--line);
}
.gloss-item {
  display: grid; grid-template-columns: 118px 1fr; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
}
.gloss-word { font-family: var(--serif); font-weight: 700; font-size: 13.5px; color: var(--gold-bright); word-break: keep-all; }
.gloss-def { font-size: 12.5px; line-height: 1.7; color: var(--paper-dim); word-break: keep-all; }

/* ── 글 읽기 ── */
.reader-root { position: fixed; inset: 0; z-index: 400; }
.reader-root[hidden] { display: none; }
.reader-scrim { position: absolute; inset: 0; background: rgba(60,52,36,.55); backdrop-filter: blur(4px); }
.reader {
  position: relative; z-index: 2; max-width: 720px; margin: 5vh auto; max-height: 90vh;
  overflow-y: auto; background: var(--paper-card);
  border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 38px 44px 44px; box-shadow: 0 26px 80px rgba(90,74,42,.22);
}
.reader-close {
  position: absolute; top: 16px; right: 18px; width: 32px; height: 32px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--paper-dim); font-size: 21px; cursor: pointer; z-index: 3;
}
.reader-close:hover { background: rgba(138,111,54,.2); color: var(--ink); }

.rd-kicker { font-family: var(--mono); font-size: 10.5px; color: var(--gold); letter-spacing: .16em; }
.rd-title {
  font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3.6vw, 32px);
  line-height: 1.32; letter-spacing: -.025em; margin: 12px 0 6px; word-break: keep-all;
}
.rd-sub { font-size: 14.5px; color: var(--gold-bright); word-break: keep-all; }
.rd-lead {
  font-size: 14.5px; line-height: 1.9; color: var(--paper-dim);
  margin: 18px 0 6px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
  word-break: keep-all;
}
.rd-h {
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  margin: 32px 0 12px; letter-spacing: -.02em; word-break: keep-all;
}
.rd-p { font-size: 15px; line-height: 2.05; margin-bottom: 15px; word-break: keep-all; }
.rd-list {
  list-style: none; margin: 4px 0 18px; padding: 0;
  border-left: 2px solid var(--line-strong);
}
.rd-list li {
  font-size: 14px; line-height: 1.9; color: var(--ink); padding: 7px 0 7px 16px;
  word-break: keep-all;
}
.rd-list li + li { border-top: 1px solid var(--line); }
.rd-note {
  font-size: 12.5px; line-height: 1.85; color: var(--paper-dim);
  background: var(--gold-soft); border: 1px dashed var(--line-strong);
  border-radius: 8px; padding: 14px 16px; margin-top: 26px; word-break: keep-all;
}
.rd-foot {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--paper-dim); letter-spacing: .06em;
}

@media (max-width: 880px) {
  .shelf-grid { grid-template-columns: repeat(2, 1fr); }
  .glossary { grid-template-columns: 1fr; }
  .gloss-item { grid-template-columns: 100px 1fr; gap: 10px; }
  .reader { margin: 0; max-height: 100vh; min-height: 100vh; border-radius: 0; padding: 30px 20px 40px; }
}

/* ── 가독성 보정 (v3.2) ── */
.shelf-desc { color: var(--paper-dim); font-size: 12px; }
.gloss-def { color: var(--ink); font-size: 13px; }
.rd-lead { color: var(--ink); font-size: 15px; }
.rd-sub { color: var(--paper-dim); }
.rd-p { font-size: 15.5px; }
.rd-note { color: var(--paper-dim); font-size: 13px; }
.shelf-card { background: var(--paper-card); }

/* ── 아침의 신문 마감 ── */
.reader { box-shadow: 0 24px 70px rgba(90,74,42,.22); }
.rd-list { border-left-color: var(--gold); }
.rd-note { background: var(--gold-soft); }
.gloss-word { color: var(--gold-deep); }

/* ── 석간 지면 ── */
html.dusk .reader { box-shadow: 0 24px 70px rgba(0,0,0,.65); }
html.dusk .shelf-card { box-shadow: none; }
html.dusk .shelf-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.35); }


/* ── 자료실 갈래 탭 (2026-08-07) ── */
.lib-tabbar {
  position: sticky; top: 52px; z-index: 5;
  display: flex; gap: 6px; margin: 4px 0 22px; padding: 8px 0;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.lib-tabbtn {
  font-family: var(--serif); font-weight: 700; font-size: 14px;
  letter-spacing: -.01em; padding: 8px 16px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--ink-dim);
  cursor: pointer;
}
.lib-tabbtn:hover { color: var(--ink); }
.lib-tabbtn.on {
  color: var(--gold); border-color: var(--gold);
  background: var(--gold-soft);
}

/* 루트 진열 — 썸네일이 있는 행 */
.lib-route-row { display: flex; gap: 14px; align-items: stretch; }
.lib-route-thumb {
  flex: none; width: 108px; border-radius: 7px;
  background-size: cover; background-position: center;
  border: 1px solid var(--line);
}
.lib-route-body { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .lib-route-thumb { width: 84px; }
}

/* ── 서고 갈래 목차 (2026-08-09) ──
   시리즈가 네 갈래에 걸쳐 길게 이어진다. 위에서부터 읽어 내려가는 것도
   방법이지만, 찾는 갈래가 정해진 사람에게는 스크롤이 벽이 된다.
   지금 보고 있는 갈래는 스스로 표시한다 — 어디쯤 와 있는지 알 수 있게. */
.shelf-toc {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.shelf-toc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; color: var(--ink-dim); text-decoration: none;
  white-space: nowrap; transition: border-color .15s, color .15s, background .15s;
}
.shelf-toc-chip:hover { border-color: var(--gold); color: var(--gold); }
.shelf-toc-chip.on {
  border-color: var(--gold); color: var(--gold); background: var(--gold-soft);
}
.shelf-toc-n {
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
  border-left: 1px solid var(--line); padding-left: 6px;
}
.shelf-toc-chip.on .shelf-toc-n { color: var(--gold); border-left-color: currentColor; }

@media (max-width: 520px) {
  .shelf-toc { gap: 6px; margin-bottom: 18px; }
  .shelf-toc-chip { padding: 6px 11px; font-size: 12px; }
}

/* 서고 갈래 앵커 — 포털 카드에서 건너왔을 때 "여기입니다"를 잠깐 밝힌다.
   스크롤만 하고 끝내면, 화면이 움직였다는 것 말고는 아무 신호가 없다. */
.shelf-group { scroll-margin-top: 64px; }
.shelf-group.shelf-jump {
  animation: shelfJump 1.8s ease-out;
  border-radius: 6px;
}
@keyframes shelfJump {
  0%, 55% { background: var(--gold-soft); box-shadow: 0 0 0 8px var(--gold-soft); }
  100%    { background: transparent; box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .shelf-group.shelf-jump { animation: none; background: var(--gold-soft); }
}

/* 글에서 도표로 나가는 문 — 삼권분립처럼 그림으로 봐야 이해되는 주제가 있다 */
.rd-link {
  display: block; margin: 26px 0 0; padding: 14px 16px;
  border: 1px solid var(--gold); border-radius: 10px; background: var(--gold-soft);
  font-size: 14px; font-weight: 700; color: var(--gold);
  text-decoration: none; text-align: center; word-break: keep-all;
}
.rd-link:hover { background: var(--gold); color: var(--paper); }


/* 용어집 갈래 거르개 — 240개가 되면서 한 줄로 늘어놓기 어려워졌다.
   칩에 개수를 함께 적어, 어느 갈래가 두꺼운지 눌러 보기 전에 보이게 했다. */
.gloss-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.gloss-chip {
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  padding: 6px 14px; font-family: inherit; font-size: 12.5px; color: var(--ink-dim);
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.gloss-chip em {
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint); margin-left: 3px;
}
.gloss-chip:hover { border-color: var(--gold); color: var(--gold); }
.gloss-chip.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }
.gloss-chip.on em { color: var(--gold); }


/* 형제 아틀라스 다리 — 정치철학 서가에서만 뜬다.
   여기서 다 하려 들지 않고 넘겨주는 것이 맞다는 판단이다. */
.philo-bridge {
  border: 1px solid var(--gold); border-radius: 14px; background: var(--gold-soft);
  padding: 22px 24px; margin: 0 0 20px;
}
.pb-kicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--gold);
  margin: 0 0 7px;
}
.pb-title {
  font-family: var(--serif); font-size: 18px; color: var(--ink); margin: 0 0 10px;
  word-break: keep-all;
}
.pb-d {
  font-size: 13.5px; line-height: 1.95; color: var(--ink-dim); margin: 0 0 14px;
  word-break: keep-all;
}
.pb-d b { color: var(--ink); }
.pb-go {
  display: inline-block; border: 1px solid var(--gold); border-radius: 8px;
  padding: 8px 16px; font-size: 13px; color: var(--gold); text-decoration: none;
  transition: background .15s, color .15s;
}
.pb-go:hover { background: var(--gold); color: var(--paper); }


/* ── 연재 묶음 (2026-08-31) ──
   낱글은 한 줄씩 늘어놓으면 되지만 연재는 그렇게 두면 목록을 덮어버리고,
   무엇보다 어디부터 읽어야 하는지가 보이지 않는다. 그래서 한 덩어리로 묶고
   번호를 앞세운다 — 이 서가에서 순서가 있는 유일한 진열이다. */
.lib-series {
  border: 1px solid var(--gold); border-radius: 12px; background: var(--gold-soft);
  padding: 20px 22px 16px; margin: 0 0 14px;
}
.lib-series-head .kicker { display: block; margin-bottom: 8px; }
.lib-series-head h3 {
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  margin: 0 0 8px; letter-spacing: -.02em; word-break: keep-all;
}
.lib-series-desc {
  font-size: 13.5px; line-height: 1.9; color: var(--ink-dim);
  margin: 0 0 6px; word-break: keep-all;
}
.lib-series-cnt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--gold); margin: 0 0 12px;
}
.lib-eps {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px;
}
.lib-eps li { border-bottom: 1px solid var(--line); }
/* 편 줄 — 화면 안 목록에서는 버튼(모달), 정적 진열에서는 링크(독립 주소).
   둘이 똑같이 보여야 어느 쪽에서 들어와도 같은 물건으로 읽힌다. */
.lib-eps li > a { text-decoration: none; }
.lib-eps li > a:hover .lib-ep-t { color: var(--gold); }
.lib-ep,
.lib-eps li > a {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 10px 2px; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--ink);
}
.lib-ep:hover .lib-ep-t { color: var(--gold); }
.lib-series-head h3 a { color: inherit; text-decoration: none; }
.lib-series-head h3 a:hover { color: var(--gold); }
.lib-serials[hidden], .lib-series[hidden] { display: none; }
.lib-ep-n {
  flex: none; width: 20px; font-family: var(--mono); font-size: 11px;
  color: var(--gold); text-align: right;
}
.lib-ep-t { font-size: 13.5px; line-height: 1.6; word-break: keep-all; }

/* 생각해볼 질문 — 글을 닫지 않고 열어두는 자리.
   아틀라스의 모든 글은 답이 아니라 물음으로 끝난다. */
.rd-q {
  font-size: 14.5px; line-height: 1.95; color: var(--ink);
  border-left: 3px solid var(--gold); padding: 4px 0 4px 16px;
  margin: 26px 0 6px; word-break: keep-all;
}
.rd-q em {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .12em; color: var(--gold); margin-bottom: 6px;
}

/* 앞뒤 편으로 건너가기 */
.rd-serial {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.rd-serial-b {
  display: block; text-align: left; font-family: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px;
  background: none; color: var(--ink);
}
.rd-serial-b:hover { border-color: var(--gold); background: var(--gold-soft); }
.rd-serial-b span {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; color: var(--gold); margin-bottom: 4px;
}
.rd-serial-b b {
  font-family: var(--serif); font-size: 13.5px; font-weight: 700;
  line-height: 1.5; word-break: keep-all;
}
.rd-serial-next { text-align: right; }

@media (max-width: 640px) {
  .lib-eps { grid-template-columns: 1fr; }
  .lib-series { padding: 17px 16px 12px; }
  .rd-serial { grid-template-columns: 1fr; }
  .rd-serial-next { text-align: left; }
}