/* ============================================================
   자료함 — 가이드 다운로드
   ------------------------------------------------------------
   구성 원칙 세 가지

   ① 무료 1건을 맨 위에 따로 세운다
      본편 13편과 성격이 다르다. 카드 그리드에 섞으면 「14개 중 하나」가
      되는데, 실제로는 유일하게 지금 받을 수 있는 것이다.

   ② 본편은 카테고리로 묶는다
      14개를 한 그리드에 쏟으면 무엇이 무엇인지 안 읽힌다.
      카테고리마다 「왜 있는지」 한 줄을 붙인다.

   ③ 아직 못 받는 카드는 점선
      무료 1건(실선·색)과 시각적으로 갈린다. 결제가 열리기 전까지
      본편은 「출시 알림 받기」로만 이어진다 — 누를 수 없는 버튼을 두지 않는다.
   ============================================================ */

/* ══════ 무료 1건 ══════ */
.lib-free{
  display:flex;align-items:center;gap:var(--sp5);flex-wrap:wrap;
  padding:var(--sp5);border-radius:var(--r-lg);
  background:linear-gradient(120deg,#eefaf9 0%,var(--accent-soft) 100%);
  border:1px solid var(--teal-100,#bfe2e2);
}
.lib-free-b{flex:1 1 260px;min-width:0}
.lib-free-tag{
  display:inline-block;padding:3px 9px;border-radius:var(--r-xs);
  background:#20787f;color:#fff;font-size:10px;font-weight:800;letter-spacing:.02em;
}
.lib-free h2{
  margin-top:var(--sp2);font-size:16.5px;font-weight:800;color:var(--t1);
  letter-spacing:-.4px;line-height:1.4;word-break:keep-all;
}
.lib-free p{
  margin-top:6px;font-size:12.5px;color:var(--t2);line-height:1.65;word-break:keep-all;
}
/* 미끼 — 실제로 묻는 질문을 미리 노출한다 */
.lib-free .peek{
  margin-top:9px;font-size:11px;font-weight:700;color:#20787f;line-height:1.6;
}
.lib-free-a{flex:0 0 auto;display:flex;flex-direction:column;gap:7px;min-width:152px}
.lib-dl{
  height:38px;display:flex;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--r-sm);background:var(--grad-btn);color:#fff;
  font-size:12.5px;font-weight:750;box-shadow:var(--e-accent);
  transition:var(--tr-lift);
}
.lib-dl:hover{transform:translateY(-1px);box-shadow:var(--e-accent-lift);color:#fff}
.lib-free-a small{font-size:10.5px;color:var(--t3);text-align:center}

/* ══════ 카테고리 그룹 ══════ */
.lib-group{margin-top:var(--sp6)}
.lib-gh{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap;margin-bottom:var(--sp3)}
.lib-cat{
  padding:3px 9px;border-radius:var(--r-xs);
  font-size:10px;font-weight:800;letter-spacing:.02em;
}
.lib-cat.form{background:var(--accent-soft);color:var(--accent-strong)}
.lib-cat.hwp{background:var(--state-ai-soft);color:var(--peri-700)}
.lib-cat.biz{background:#eefaf9;color:#2f8f96}
.lib-gh span{font-size:11.5px;color:var(--t4)}
.lib-gh span b{color:var(--t3);font-weight:700}

/* ══════ 카드 ══════ */
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:var(--sp3)}
.lib{
  display:flex;flex-direction:column;gap:7px;min-height:132px;
  padding:var(--sp3);border-radius:var(--r-md);
  background:var(--surface);border:1px dashed var(--line-strong);
  transition:var(--tr-base);
}
.lib:hover{border-color:var(--accent);box-shadow:var(--e2);transform:translateY(-2px)}
.lib .kk{
  font-size:9.5px;font-weight:800;color:var(--accent-strong);
  font-variant-numeric:tabular-nums;
}
.lib .lt{font-size:12.5px;font-weight:700;color:var(--t1);line-height:1.45;word-break:keep-all}
.lib .lm{margin-top:auto;font-size:10px;color:var(--t4)}
.lib-go{
  height:30px;display:flex;align-items:center;justify-content:center;gap:5px;
  border-radius:var(--r-sm);background:var(--surface-soft);
  border:1px dashed var(--line-strong);color:var(--t3);
  font-size:11px;font-weight:700;transition:var(--tr-base);
  cursor:pointer;font-family:inherit;width:100%;
}
.lib-go:hover{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-soft)}

/* 원고가 아직 없는 항목 — 없는 것을 없다고 보여준다 */
.lib.soon{opacity:.7;border-color:var(--line);background:var(--surface-soft)}
.lib.soon .kk{color:var(--t4)}
.lib.soon .lib-go{
  border:1px solid var(--line);color:var(--t4);cursor:default;background:var(--surface-soft);
}
.lib.soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.lib.soon .lib-go:hover{border-color:var(--line);color:var(--t4);background:var(--surface-soft)}

/* 알림 신청 완료 */
.lib.booked .lib-go{
  background:var(--state-done-soft,#e9f9f1);border:1px solid #c9efdc;color:#166b45;
}

/* ══════ 하단 띠 — 명단에 드는 이유 ══════ */
.lib-foot{
  margin-top:var(--sp6);display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;
  padding:var(--sp4);border-radius:var(--r-md);
  background:var(--surface-soft);border:1px solid var(--line);
}
.lib-foot p{flex:1 1 240px;font-size:12.5px;color:var(--t3);line-height:1.65}
.lib-foot p b{color:var(--t1)}
.lib-foot .wait{
  flex:0 0 auto;padding:4px 10px;border-radius:var(--r-xs);
  background:var(--state-warn-soft);border:1px solid #f3e2bd;
  font-size:10.5px;font-weight:700;color:#8a6113;
}

@media(max-width:640px){
  .lib-free{padding:var(--sp4);gap:var(--sp4)}
  .lib-free-a{width:100%}
  .libgrid{grid-template-columns:1fr}
}

/* 발행물 — 정기 발행 축. 상시 자료(양식/한글/실무)와 시각적으로 구분한다.
   같은 저장소에 있지만 「계속 늘어나는 쪽」이라는 게 보여야 한다. */
.lib-cat.issue{background:#efeefe;color:#3f3799;border-color:#d5d2f7}
.lib-group[data-cat="issue"] .lib{border-style:solid;border-color:#d5d2f7;background:#fbfbff}
.lib-group[data-cat="issue"] .kk{color:#3f3799}

/* 무료 1건 — 1차 배포에서는 아직 못 내려줍니다(T-30).
   카드의 .lib.soon 과 같은 톤을 씁니다. 비활성 표시를 두 벌 만들지 않습니다. */
.lib-dl.soon{
  background:var(--soft);border:1px dashed var(--line-strong);
  color:var(--t4);cursor:default;box-shadow:none;
}
.lib-dl.soon:hover{background:var(--soft);transform:none}

/* ▼ 우리 추가 */

/* 알림 신청 입력 — 인계본에는 없다. 그쪽은 누르면 버튼 글자만 바꾸고 아무것도 보내지
   않았다. 실제로 전자우편을 받아야 하므로 자리를 만든다. */
.signup-ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp2); width: 100%; }
.signup-ask input {
  flex: 1 1 140px; min-width: 0; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--fs-sm);
}
.signup-ask input:focus-visible { border-color: var(--accent); }
.signup-ask .lib-go { flex: 0 0 auto; }
.signup-err { flex: 1 0 100%; color: var(--state-danger); font-size: var(--fs-xs); }
.lib-go.booked { color: var(--state-done); border-color: var(--state-done-soft); cursor: default; }

/* ── 자료 읽기(`/library/{자료id}`) ─────────────────────────────────────────
   pdf.js 가 쪽마다 캔버스를 넣는다. 여기서는 자리와 껍데기만 잡는다.
   쪽 넘김·펼침면을 쓰지 않는 이유는 기획서 V2 — 가로형 덱과 1쪽짜리 요약이 같은
   껍데기를 써야 한다. */
.pv{min-height:60vh}

/* 사이트 헤더는 82% 흰색이라 뒤가 비친다. 밋밋한 배경 위에서는 티가 안 나지만 **PDF 위에서는
   앞 쪽의 글자가 그대로 비쳐** 로고·탭과 겹친다. 이 화면에서만 불투명하게 덮는다 — 헤더
   자체를 고치면 다른 화면의 결이 같이 바뀐다. */
body:has(.pv) header.cap{background:var(--surface,#fff)}

/* 읽는 동안 위에 붙어 있어야 지금 몇 쪽인지와 나가는 길이 늘 보인다.
   ⚠ `top:0` 으로 두면 **사이트 헤더가 같은 자리에 붙어 있어 덮인다**(헤더도 sticky·top:0
   이고 z-index 가 더 높다). 스크롤을 내리면 막대가 사라진 것처럼 보인다 — 실제로 그랬다
   (2026-09-04). 헤더 높이만큼 내려 붙인다. `--header-h` 는 home.css 것인데 이 화면에는
   안 실려 있어 기본값을 함께 둔다. */
.pv-bar{
  position:sticky;top:var(--header-h,54px);z-index:5;
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line);
}
.pv-back{color:var(--t3);text-decoration:none;white-space:nowrap}
.pv-back:hover{color:var(--accent-strong)}
/* 제목이 길면 줄이 늘어나 막대가 두꺼워진다 — 한 줄로 자른다. */
.pv-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2)}
.pv-count{color:var(--t4);white-space:nowrap}
.pv-zoom{display:flex;gap:4px}
.pv-zoom button{
  width:28px;height:28px;line-height:1;
  border:1px solid var(--line);background:var(--surface-soft);color:var(--t3);
  border-radius:6px;cursor:pointer;
}
.pv-zoom button:hover{border-color:var(--accent);color:var(--accent-strong)}

.pv-loading,.pv-msg{padding:48px 16px;text-align:center;color:var(--t3)}

.pv-pages{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px}
/* 글자층이 그림 위에 겹쳐 앉는다 — 기준 위치가 없으면 페이지 맨 위로 튄다. */
.pv-page{position:relative;max-width:100%}
.pv-page canvas{display:block;max-width:100%;height:auto;box-shadow:0 1px 6px rgba(0,0,0,.12)}
/* 아직 안 그린 쪽. 높이를 주지 않으면 스크롤 길이가 0 이라 관찰자가 전부 한꺼번에 걸린다. */
.pv-blank{width:min(100%,820px);aspect-ratio:var(--pv-ratio,4/3);background:var(--surface-soft);border:1px solid var(--line)}

@media (max-width:640px){
  .pv-pages{padding:8px;gap:8px}
  .pv-title{font-size:.9em}
}