/* 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: rgba(30,27,22,.62); color: var(--paper);
  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: rgba(184,152,96,.14); }
.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(--paper); }
.lib-sub { color: var(--gold-bright) !important; font-size: 12.5px !important; margin-top: 4px !important; }

/* ── 용어집 ── */
.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(9,8,6,.8); backdrop-filter: blur(4px); }
.reader {
  position: relative; z-index: 2; max-width: 720px; margin: 5vh auto; max-height: 90vh;
  overflow-y: auto; background: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 38px 44px 44px; box-shadow: 0 26px 80px rgba(0,0,0,.65);
}
.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(184,152,96,.2); color: var(--paper); }

.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(--paper); 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: rgba(184,152,96,.07); 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(--paper); font-size: 13px; }
.rd-lead { color: var(--paper); 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: rgba(24,21,17,.85); }