.pdfp-list {
  margin: 1.5em 0;
}

.pdfp-search {
  display: flex;
  gap: .5em;
  margin-bottom: 1em;
  flex-wrap: wrap;
}

.pdfp-search input[type="search"] {
  flex: 1 1 16em;
  padding: .5em .7em;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  font: inherit;
}

.pdfp-search button {
  padding: .5em 1.1em;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  background: #f6f7f7;
  font: inherit;
  cursor: pointer;
}

.pdfp-table {
  width: 100%;
  border-collapse: collapse;
}

.pdfp-table th,
.pdfp-table td {
  padding: .6em .7em;
  text-align: left;
  border-bottom: 1px solid #e2e4e7;
  vertical-align: middle;
}

.pdfp-table th {
  font-size: .85em;
  color: #646970;
  background: #fafafa;
}

.pdfp-table .pdfp-num {
  text-align: right;
  white-space: nowrap;
}

.pdfp-muted {
  color: #646970;
  font-size: .9em;
  white-space: nowrap;
}

.pdfp-empty,
.pdfp-gate {
  padding: 1.2em;
  border: 1px dashed #ccd0d4;
  border-radius: 4px;
  color: #646970;
}

.pdfp-button {
  display: inline-block;
  padding: .4em 1em;
  border: 1px solid #2271b1;
  border-radius: 4px;
  background: #2271b1;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.pdfp-button:hover {
  background: #135e96;
  border-color: #135e96;
  color: #fff;
}

@media (max-width: 600px) {
  .pdfp-table thead {
    display: none;
  }

  .pdfp-table tr {
    display: block;
    padding: .6em 0;
    border-bottom: 1px solid #e2e4e7;
  }

  .pdfp-table td {
    display: block;
    border: none;
    padding: .15em .2em;
  }

  .pdfp-table .pdfp-num {
    text-align: left;
  }
}

/* ---- 図書館（表紙グリッド） ---- */
.pdfp-library { margin: 1.5em 0; }

.pdfp-count {
  margin: 0 0 .8em;
  font-size: .85em;
  color: #646970;
}

.pdfp-clear {
  align-self: center;
  font-size: .9em;
}

/* 画面幅によらず1行4枚に固定する（枚数を変えるならこの 4 を書き換える） */
.pdfp-grid {
  display: grid;
  /* minmax(0,...) にしないと、中身が広いときに列が押し広げられて画面からはみ出す */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4em 1.1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdfp-card {
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin: 0;
  /* height: 100% は付けない。グリッドの行に対して100%が解決される結果、
     カードが行の隙間ぶんはみ出して縦の gap が消える。
     同じ行のカードの高さを揃えるのは、グリッド既定の align-self: stretch が担う。 */
  padding: .7em;
  background: #fff;
  border: 1px solid #e0e2e5;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.pdfp-cover {
  display: block;
  /* 枠の形は固定する（カードの高さをそろえるため）。
     中の画像は切り抜かず全体を入れるので、横長の絵では上下に余白ができる。 */
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  transition: box-shadow .15s ease, transform .15s ease;
}

.pdfp-cover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  transform: translateY(-2px);
}

.pdfp-cover img {
  width: 100%;
  height: 100%;
  /* contain＝全体が入るように収める（cover だと拡大されて端が切れる） */
  object-fit: contain;
  display: block;
}

.pdfp-cover-none {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #a7aaad;
  font-size: .9em;
  letter-spacing: .1em;
}

.pdfp-meta {
  display: flex;
  flex-direction: column;
  gap: .15em;
}

.pdfp-title {
  font-size: .92em;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pdfp-sub {
  font-size: .78em;
  color: #646970;
}

.pdfp-thumb-cell { width: 46px; }
.pdfp-thumb-cell img {
  width: 40px;
  height: auto;
  display: block;
  border: 1px solid #dcdcde;
}

/* 画面が狭いところでは枚数を減らす（4枚のままだと1枚が細くなりすぎる） */
@media (max-width: 900px) {
  .pdfp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .pdfp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1em .8em; }
}

/* ---- ツールバー（タブ・並び替え） ---- */
.pdfp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8em 1.2em;
  margin-bottom: 1.2em;
  padding-bottom: .8em;
  border-bottom: 1px solid #e2e4e7;
}

.pdfp-tabs { display: flex; gap: .3em; }

.pdfp-tab {
  padding: .35em .9em;
  border-radius: 999px;
  text-decoration: none;
  color: #50575e;
  font-size: .9em;
  white-space: nowrap;
}

.pdfp-tab:hover { background: #f0f0f1; }

.pdfp-tab.is-active {
  background: #2271b1;
  color: #fff;
}

.pdfp-tab-count {
  display: inline-block;
  margin-left: .2em;
  font-size: .85em;
  opacity: .75;
}

.pdfp-controls {
  display: flex;
  gap: .4em;
  margin-left: auto;
  flex-wrap: wrap;
  align-items: center;
}

.pdfp-controls input[type="search"] {
  padding: .45em .7em;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  font: inherit;
  min-width: 12em;
}

.pdfp-controls select {
  padding: .45em .5em;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  font: inherit;
}

.pdfp-controls button {
  padding: .45em 1em;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  background: #f6f7f7;
  font: inherit;
  cursor: pointer;
}

/* ---- 統計とアクション ---- */
.pdfp-stats {
  display: flex;
  gap: .7em;
  font-size: .76em;
  color: #646970;
}

.pdfp-actions {
  display: flex;
  gap: .3em;
}

.pdfp-act {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  padding: .28em .55em;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  background: #fff;
  color: #646970;
  font: inherit;
  font-size: .74em;
  line-height: 1.3;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.pdfp-act:hover:not(:disabled) { background: #f6f7f7; border-color: #b9bcbf; }
.pdfp-act:disabled { opacity: .55; cursor: default; }

.pdfp-act-icon { display: inline-flex; font-size: 1.1em; line-height: 1; }

/* 登録済みの見た目は、ファイル末尾「お気に入り／後で見るの押す前・押した後」にまとめてある */

.pdfp-table .pdfp-actions { justify-content: flex-start; }

@media (max-width: 600px) {
  .pdfp-controls { margin-left: 0; width: 100%; }
  .pdfp-controls input[type="search"] { flex: 1 1 8em; min-width: 0; }
  .pdfp-act { padding: .35em .5em; }
}

/* ---- タグ絞り込み / タグクラウド ---- */
.pdfp-tagfilter {
  margin: 0 0 1em;
  padding: .6em .9em;
  background: #f0f6fc;
  border-radius: 4px;
  font-size: .9em;
}

.pdfp-tagcloud {
  margin-top: 2.5em;
  padding-top: 1.5em;
  border-top: 1px solid #e2e4e7;
}

.pdfp-tagcloud-title { font-size: 1em; margin: 0 0 .8em; color: #50575e; }
.pdfp-tagcloud-list { display: flex; flex-wrap: wrap; gap: .5em; }

.pdfp-tagchip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .8em;
  background: #f0f0f1;
  border-radius: 999px;
  text-decoration: none;
  color: #3c434a;
  font-size: .85em;
}

.pdfp-tagchip:hover { background: #dcdcde; }
.pdfp-tagchip-count { font-size: .85em; color: #787c82; }

/* ---- 詳細ページ ---- */
.pdfp-back { margin: 0 0 1em; }
.pdfp-detail-head { display: flex; gap: 1.6em; flex-wrap: wrap; }

/* サムネイルは元PDFのページ比率のままなので、縦長の枠に切り抜くと見切れる。
   枠の高さは決めず、画像の形に合わせて伸ばす（切り抜かない）。

   作品ページ専用に幅720pxのサムネイルを別に持たせている（一覧用は360pxのまま）。
   表示は480pxで、元が720pxあるので引き伸ばしにはならない。
   高精細な画面でも粗く見えないよう、表示幅の1.5倍を素材として持っている形。
   窓が狭いときは情報側が潰れるので、45%で頭打ちにする。 */
.pdfp-detail-cover {
  flex: 0 0 480px;
  max-width: 45%;
  align-self: flex-start;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f0f1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.pdfp-detail-cover img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 表紙が無いときだけ、箱の形を保つために比率を与える */
.pdfp-detail-cover .pdfp-cover-none {
  aspect-ratio: 1 / 1.414;
  height: auto;
}

.pdfp-detail-info { flex: 1 1 260px; }
.pdfp-detail-title { margin: 0 0 .5em; font-size: 1.4em; }
.pdfp-detail-stats { display: flex; gap: 1em; color: #646970; font-size: .85em; margin-bottom: 1em; }
.pdfp-detail-open { margin-bottom: 1em; }

/* ---- タグ（詳細ページ） ---- */
.pdfp-tags { margin-top: 1.4em; }
.pdfp-tags-label { font-size: .85em; color: #646970; margin-bottom: .4em; }
.pdfp-tags-list { display: flex; flex-wrap: wrap; gap: .45em; margin-bottom: .7em; }
.pdfp-tags-none { color: #a7aaad; font-size: .85em; }

.pdfp-tag {
  display: inline-flex;
  align-items: center;
  background: #eef4fb;
  border: 1px solid #cfe0f2;
  border-radius: 4px;
  overflow: hidden;
  font-size: .85em;
}

.pdfp-tag a { padding: .2em .3em .2em .6em; text-decoration: none; color: #1d5c96; }
.pdfp-tag a:hover { text-decoration: underline; }

.pdfp-tag-remove {
  border: none;
  background: none;
  color: #8a94a0;
  cursor: pointer;
  padding: .1em .45em;
  font-size: 1.1em;
  line-height: 1;
}

.pdfp-tag-remove:hover { color: #b3243b; }

/* タグと作者名の入力欄は同じ見た目にする（片方だけ指定漏れすると細くなる） */
.pdfp-tag-form,
.pdfp-author-form {
  display: flex;
  align-items: stretch;
  gap: .4em;
  max-width: 420px;
}

.pdfp-tag-form input[type="text"],
.pdfp-author-form input[type="text"] {
  width: 100%;
  /* content-box のままだと、幅100%に余白と枠が足されてはみ出し、
     隣の「追加」ボタンに重なる。border-box で枠込みの幅にする。 */
  box-sizing: border-box;
  padding: .4em .6em;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  font: inherit;
  font-size: .9em;
}

.pdfp-tag-form > .pdfp-button,
.pdfp-author-form > .pdfp-button { flex: 0 0 auto; white-space: nowrap; }

/* ---- 感想 ---- */
.pdfp-detail-reviews { margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid #e2e4e7; }
.pdfp-detail-reviews > h3 { margin: 0 0 1em; }

.pdfp-review-form {
  margin-bottom: 1.6em;
  padding: 1em;
  background: #f6f7f7;
  border-radius: 6px;
}

.pdfp-review-label { display: block; font-size: .9em; font-weight: 600; margin-bottom: .5em; }

.pdfp-review-form textarea {
  width: 100%;
  padding: .6em;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  font: inherit;
  resize: vertical;
}

.pdfp-review-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-top: .6em;
  flex-wrap: wrap;
}

.pdfp-review-visibility { font-size: .88em; color: #50575e; display: flex; align-items: center; gap: .35em; }

.pdfp-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1em; }

.pdfp-review-item {
  padding: .9em 1.1em;
  border: 1px solid #e2e4e7;
  border-radius: 6px;
  position: relative;
}

.pdfp-review-item.is-mine { border-color: #cfe0f2; background: #fbfdff; }

.pdfp-review-head { display: flex; align-items: center; gap: .7em; margin-bottom: .4em; font-size: .82em; }
.pdfp-review-author { font-weight: 600; color: #3c434a; }
.pdfp-review-private {
  background: #f0f0f1;
  color: #646970;
  padding: .05em .5em;
  border-radius: 999px;
  font-size: .9em;
}
.pdfp-review-date { color: #a7aaad; margin-left: auto; }

.pdfp-review-body { line-height: 1.7; overflow-wrap: anywhere; }

.pdfp-review-delete {
  margin-top: .6em;
  border: none;
  background: none;
  color: #b3243b;
  cursor: pointer;
  font-size: .8em;
  padding: 0;
  text-decoration: underline;
}

.pdfp-review-empty { color: #a7aaad; }
.pdfp-stat-reviews::before { content: ""; }

@media (max-width: 600px) {
  .pdfp-detail-cover { flex-basis: 140px; }
}

/* ---- シコボタン ---- */
.pdfp-shiko {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: 1.2em;
  flex-wrap: wrap;
}

.pdfp-shiko-btn {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 100px;
  transition: transform .1s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.pdfp-shiko-btn img {
  width: 150px;
  height: auto;
  border-radius: 90px;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* 押す前はグレー、押した後（クールダウン中）はピンクを見せる */
/* セレクタの詳細度を .pdfp-shiko-btn img より高くして確実に隠す */
.pdfp-shiko-btn .pdfp-shiko-pink { display: none; }
.pdfp-shiko-btn.is-cooldown .pdfp-shiko-gray { display: none; }
.pdfp-shiko-btn.is-cooldown .pdfp-shiko-pink { display: block; }

.pdfp-shiko-btn:hover:not(:disabled) { transform: scale(1.04); }
.pdfp-shiko-btn:active:not(:disabled) { transform: scale(.94); }
.pdfp-shiko-btn.is-pressing { transform: scale(.9); }

.pdfp-shiko-btn.is-cooldown { cursor: default; }

.pdfp-shiko-pop {
  position: absolute;
  top: -.5em;
  right: -.3em;
  color: #e0219a;
  font-weight: 700;
  font-size: 1.3em;
  animation: pdfp-shiko-float .9s ease-out forwards;
  pointer-events: none;
}

@keyframes pdfp-shiko-float {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  30% { opacity: 1; transform: translateY(-.4em) scale(1.1); }
  100% { opacity: 0; transform: translateY(-1.6em) scale(1); }
}

.pdfp-shiko-meta { font-size: .9em; color: #50575e; }
.pdfp-shiko-count { font-weight: 700; color: #e0219a; font-size: 1.15em; }
.pdfp-shiko-cd { display: block; font-size: .82em; color: #a7aaad; margin-top: .1em; }
.pdfp-shiko-cd:empty { display: none; }

/* ---- ランキング ---- */
.pdfp-rank-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4em;
  margin-bottom: 1.5em;
  padding: 1em;
  background: #faf5f8;
  border-radius: 8px;
}

.pdfp-rank-group { display: flex; gap: .3em; flex-wrap: wrap; }

.pdfp-rank-opt {
  padding: .35em .9em;
  border-radius: 999px;
  cursor: pointer;
  font-size: .88em;
  border: 1px solid transparent;
}

.pdfp-rank-opt input { position: absolute; opacity: 0; width: 0; }
.pdfp-rank-opt.is-active { background: #e0219a; color: #fff; }
.pdfp-rank-opt:not(.is-active):hover { background: #f0e0e8; }

.pdfp-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rank;
}

.pdfp-rank-item {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: .7em .3em;
  border-bottom: 1px solid #eee;
}

.pdfp-rank-no {
  flex: 0 0 2.2em;
  text-align: center;
  font-size: 1.3em;
  font-weight: 700;
  color: #b0b4b9;
}

.pdfp-rank-no-1 { color: #e0a800; }
.pdfp-rank-no-2 { color: #9aa0a6; }
.pdfp-rank-no-3 { color: #cd7f32; }

.pdfp-rank-cover {
  flex: 0 0 44px;
  width: 44px;
  height: 62px;
  border: 1px solid #dcdcde;
  border-radius: 3px;
  overflow: hidden;
  background: #f0f0f1;
  display: block;
}

.pdfp-rank-cover img { width: 100%; height: 100%; object-fit: cover; }

.pdfp-rank-title {
  flex: 1;
  text-decoration: none;
  font-size: .95em;
  overflow-wrap: anywhere;
}

.pdfp-rank-value {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 1.15em;
  color: #e0219a;
  white-space: nowrap;
}

.pdfp-rank-value small { font-size: .7em; color: #787c82; font-weight: 400; margin-left: .15em; }

@media (max-width: 600px) {
  .pdfp-shiko-btn img { width: 120px; }
  .pdfp-rank-controls { gap: .8em; padding: .8em; }
}

/* ---- 一覧カードの追加UI（v1.6） ---- */
/* お気に入り・後で見るのツールチップ（ホバーでテキスト） */
.pdfp-act { position: relative; }
.pdfp-act[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #1e1e1e;
  color: #fff;
  font-size: .72em;
  padding: .3em .6em;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 5;
}
.pdfp-act[data-tip]:hover::after { opacity: 1; }

/* カード内のタグ */
.pdfp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3em;
  margin-top: .1em;
}
.pdfp-card-tag {
  font-size: .72em;
  padding: .1em .5em;
  background: #eef4fb;
  color: #1d5c96;
  border-radius: 3px;
  text-decoration: none;
  line-height: 1.6;
}
.pdfp-card-tag:hover { background: #d9e8f7; }

/* カードのアクション行（お気に入り・後で見る・シコを横一列に）。
   margin-top:auto でここから下（アクション＋開く/詳細）をカード下端に揃える。
   タグが何個あっても、下段の並びが崩れない。 */
.pdfp-card-actions {
  display: flex;
  align-items: center;
  gap: .35em;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: .3em;
}

/* 小型シコボタン（一覧用・数字なし） */
.pdfp-shiko-sm { gap: 0; margin-top: 0; }
.pdfp-shiko-sm .pdfp-shiko-btn img { width: 60px; border-radius: 36px; }

.pdfp-card { gap: .55em; }

/* ---- ルール閲覧ページ [pdf_rules] ---- */
.pdfp-rules-page {
  max-width: 720px;
  line-height: 1.85;
}
.pdfp-rules-page h2 {
  font-size: 1.2em;
  margin: 0 0 .8em;
  padding-bottom: .4em;
  border-bottom: 2px solid #e0219a;
  display: inline-block;
}
.pdfp-rules-page p {
  margin: 0 0 1.1em;
  padding: .3em 0;
}

/* ---- 上部ナビ（v1.8） ---- */
.pdfp-nav {
  display: flex;
  align-items: center;
  gap: .6em 1em;
  flex-wrap: wrap;
  margin-bottom: 1.2em;
  padding-bottom: .8em;
  border-bottom: 1px solid #e2e4e7;
}

.pdfp-nav-modes {
  display: flex;
  gap: .25em;
  flex-wrap: wrap;
}

.pdfp-nav-mode {
  padding: .4em .95em;
  border-radius: 999px;
  text-decoration: none;
  color: #50575e;
  font-size: .92em;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}

.pdfp-nav-mode:hover { background: #f0f0f1; color: #1e1e1e; }

.pdfp-nav-mode.is-active {
  background: #e0219a;
  color: #fff;
}

/* 検索：入力欄＋虫眼鏡のみ */
.pdfp-nav-search {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  border: 1px solid #ccd0d4;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.pdfp-nav-search input[type="search"] {
  border: none;
  outline: none;
  padding: .45em .3em .45em .95em;
  font: inherit;
  font-size: .9em;
  width: 9em;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.pdfp-nav-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.pdfp-nav-search button {
  border: none;
  background: transparent;
  color: #646970;
  padding: 0 .8em 0 .5em;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.pdfp-nav-search button:hover { color: #e0219a; }
.pdfp-nav-search:focus-within { border-color: #e0219a; }

/* 三本線メニュー */
.pdfp-menu { position: relative; }

.pdfp-menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #ccd0d4;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.pdfp-menu-btn span {
  display: block;
  height: 2px;
  background: #50575e;
  border-radius: 2px;
  transition: background .12s ease;
}

.pdfp-menu-btn:hover span { background: #e0219a; }
.pdfp-menu.is-open .pdfp-menu-btn { border-color: #e0219a; }

.pdfp-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  padding: .4em 0;
  z-index: 30;
}

.pdfp-menu-name {
  display: block;
  padding: .55em 1.1em;
  font-weight: 700;
  font-size: .92em;
  color: #1e1e1e;
  border-bottom: 1px solid #f0f0f1;
  margin-bottom: .25em;
  overflow-wrap: anywhere;
}

.pdfp-menu-link {
  display: block;
  padding: .55em 1.1em;
  text-decoration: none;
  color: #3c434a;
  font-size: .92em;
}

.pdfp-menu-link:hover { background: #faf0f6; color: #e0219a; }

/* ---- 集計期間の切替 ---- */
.pdfp-period {
  display: flex;
  gap: .3em;
  flex-wrap: wrap;
  margin-bottom: 1.1em;
}

.pdfp-period-opt {
  padding: .3em .85em;
  border: 1px solid #e2e4e7;
  border-radius: 999px;
  text-decoration: none;
  color: #646970;
  font-size: .84em;
  background: #fff;
}

.pdfp-period-opt:hover { background: #faf0f6; color: #e0219a; }

.pdfp-period-opt.is-active {
  background: #faf0f6;
  border-color: #e0219a;
  color: #e0219a;
  font-weight: 700;
}

/* ---- 順位バッジ（閲覧数・シコランキング） ---- */
.pdfp-cover-wrap { position: relative; }

.pdfp-rank-badge {
  position: absolute;
  /* 表紙の内側に置く。外に出すと左上の大タグと重なるため。 */
  top: 6px;
  left: 6px;
  z-index: 3;
  min-width: 26px;
  height: 26px;
  padding: 0 .35em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #6b7280;
  color: #fff;
  font-size: .82em;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.pdfp-rank-1 { background: #e0a800; }
.pdfp-rank-2 { background: #9aa0a6; }
.pdfp-rank-3 { background: #cd7f32; }

.pdfp-rank-value {
  position: absolute;
  right: -4px;
  bottom: -6px;
  padding: .12em .55em;
  border-radius: 999px;
  background: #e0219a;
  color: #fff;
  font-size: .74em;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .pdfp-nav { gap: .5em .6em; }
  .pdfp-nav-mode { padding: .35em .7em; font-size: .85em; }
  .pdfp-nav-search { margin-left: 0; flex: 1 1 auto; }
  .pdfp-nav-search input[type="search"] { width: 100%; }
}

/* ---- ヘッダー位置に固定 & 上の余白を詰める（図書館ページのみ, v1.9） ---- */

/* ページ見出し（「図書館」）はナビと役割が重なるので隠す */
body.pdfp-page .wp-block-post-title,
body.pdfp-page .entry-title,
body.pdfp-page .page-title { display: none; }

/* テーマが上に空けている余白を詰める。
   Twenty Twenty-Five は main と直下の group に「インラインstyle」で余白を入れてくるため、
   クラス指定では勝てない。ここだけ !important で上書きする。 */
body.pdfp-page main.wp-block-group { margin-top: 0 !important; }
body.pdfp-page main.wp-block-group > .wp-block-group { padding-top: 0 !important; }
body.pdfp-page .wp-site-blocks { padding-top: 0; }
body.pdfp-page .entry-content { margin-top: 0; margin-block-start: 0; }
body.pdfp-page .pdfp-library { margin-top: 0; }

/* テーマは本文を content-size（既定645px）に閉じ込めるが、
   図書館は一覧なので wide-size まで広げる。
   狭いままだとナビが3行に折り返し、カードも1行3枚しか並ばない。 */
body.pdfp-page .entry-content > .pdfp-library {
  margin-top: 0;
  max-width: var(--wp--style--global--wide-size, 1340px);
  margin-left: auto;
  margin-right: auto;
}

/* ナビを画面の一番上に貼り付ける。
   管理バーが出ているときはその高さぶん下げる。
   （sticky が効かない環境でも、余白を詰めてある分そのまま普通に表示される） */
.pdfp-nav {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 20;
  background: #fff;
  margin-top: 0;
  padding-top: .7em;
}

/* 期間切替もナビのすぐ下に詰める */
.pdfp-period { margin-top: .9em; }

/* 上部の余白をさらに詰める */
body.pdfp-page .pdfp-nav { margin-bottom: .8em; padding-bottom: .6em; }
body.pdfp-page .pdfp-count { margin-bottom: .5em; }
body.pdfp-page .pdfp-period { margin-top: 0; margin-bottom: .8em; }

/* ---- 大タグ（管理者が設定する区分。通常のタグと区別できるよう別色） ---- */
.pdfp-card-cat {
  font-size: .72em;
  padding: .1em .55em;
  background: #8e44ad;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: .02em;
}

.pdfp-card-cat:hover { background: #763890; color: #fff; }

/* 詳細ページの大タグ */
.pdfp-cats { margin-top: 1.4em; }
.pdfp-cats-list { display: flex; flex-wrap: wrap; gap: .4em; }

.pdfp-cat-chip {
  display: inline-block;
  padding: .22em .8em;
  background: #8e44ad;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: .85em;
  font-weight: 700;
}

.pdfp-cat-chip:hover { background: #763890; color: #fff; }

/* ---- 大タグ（ジャンル）での絞り込みバー ---- */
.pdfp-catbar {
  display: flex;
  gap: .3em;
  flex-wrap: wrap;
  margin-bottom: .8em;
}

.pdfp-cat-opt {
  padding: .3em .95em;
  border: 1px solid #e2e4e7;
  border-radius: 999px;
  text-decoration: none;
  color: #646970;
  font-size: .84em;
  background: #fff;
  white-space: nowrap;
}

.pdfp-cat-opt:hover { background: #f6eefa; color: #8e44ad; }

.pdfp-cat-opt.is-active {
  background: #8e44ad;
  border-color: #8e44ad;
  color: #fff;
  font-weight: 700;
}

body.pdfp-page .pdfp-catbar { margin-top: 0; }
/* ---- 履歴ページ ---- */
/* 一覧と同じカード表示を使うので、表用のスタイルは持たない。
   文字色はカード側（.pdfp-card / .pdfp-title）で明示済み。 */
.pdfp-history-title {
  font-size: 1.3em;
  margin: 0 0 .4em;
  color: inherit;
}

.pdfp-history-note {
  margin: 0 0 1em;
  font-size: .9em;
  opacity: .75;
}

.pdfp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4em .6em;
  margin-top: 1.4em;
}

.pdfp-pager-nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3em;
}

/* 番号。指で押せる大きさを確保しつつ、数が多いので詰めて置く */
.pdfp-pager-num,
.pdfp-pager-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  height: 2.2em;
  padding: 0 .5em;
  border: 1px solid #dcdcde;
  border-radius: 5px;
  background: #fff;
  color: #3c434a;
  font-size: .9em;
  text-decoration: none;
}

.pdfp-pager-num:hover,
.pdfp-pager-step:hover { border-color: #e0219a; color: #e0219a; }

/* 今いるページ。押せないので枠ではなく塗りで示す */
.pdfp-pager-num.is-current {
  background: #e0219a;
  border-color: #e0219a;
  color: #fff;
  font-weight: 700;
}

.pdfp-pager-gap {
  padding: 0 .1em;
  color: #a7aaad;
  font-size: .9em;
}

.pdfp-pager-info { font-size: .85em; opacity: .7; }

@media (max-width: 600px) {
  /* 全ページ数は前後の番号から察しが付くので、狭いときは省く */
  .pdfp-pager-info { display: none; }

  /* 離れた番号も省いて行数を抑える（最初と最後は残る）。
     3行に折り返すと、一覧の下にしては場所を取りすぎるため */
  .pdfp-pager-num.is-far { display: none; }
  .pdfp-pager-num,
  .pdfp-pager-step { min-width: 2em; height: 2em; font-size: .85em; padding: 0 .4em; }
}

/* ---- 文字色の土台 ----
   テーマ Twenty Twenty-Five は body の文字色に背景色と同じ値（--wp--preset--color--base）を
   当てているため、色を指定していない文字は背景に溶けてまったく読めなくなる。
   そこでプラグインの画面は「地の上は contrast 色（＝テーマが想定する文字色）」
   「白いパネルの中は濃い色」と決め打ちする。テーマの配色を切り替えても追随する。 */
.pdfp-library,
.pdfp-rules-page {
  color: var(--wp--preset--color--contrast, #1e1e1e);
}

/* 明るい背景を自前で持つ入れ物は、中の文字を濃い色に戻す */
.pdfp-card,
.pdfp-cover,
.pdfp-detail-cover,
.pdfp-review-form,
.pdfp-review-item,
.pdfp-menu-panel,
.pdfp-tagfilter,
.pdfp-rank-controls {
  color: #1e1e1e;
}

/* コメントは1件ずつ白いパネルにする（枠だけだと地に溶けて本文が読めない） */
.pdfp-review-item { background: #fff; }

/* 補助的な文字は、地の文字色を薄めて使う（明るいテーマでも暗いテーマでも読める） */
.pdfp-count,
.pdfp-history-note,
.pdfp-pager-info,
.pdfp-detail-stats,
.pdfp-tagcloud-title,
.pdfp-shiko-meta,
.pdfp-review-empty {
  color: inherit;
  opacity: .72;
}

.pdfp-empty,
.pdfp-gate {
  color: inherit;
  opacity: .85;
}

/* ---- ヘッダーとサイト名 ----
   図書館ページではテーマのヘッダー（サイト名＋固定ページのリンク）を出さず、
   サイト名をナビの左端に置いて1行にまとめる。上に詰まり、行数も減る。 */
body.pdfp-has-nav .wp-site-blocks > header.wp-block-template-part { display: none; }

.pdfp-nav-brand {
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  color: #1e1e1e;
  white-space: nowrap;
  margin-right: .3em;
}

.pdfp-nav-brand:hover { color: #e0219a; }

/* テーマのヘッダーが出るページ（ルールなど）でもサイト名が読めるようにする。
   テーマは body の文字色に背景色と同じ値を入れているため、指定しないと消える。 */
.wp-block-site-title a { color: var(--wp--preset--color--contrast, #1e1e1e); }

@media (max-width: 600px) {
  .pdfp-nav-brand { font-size: 1em; }
}

/* ---- ヘッダー（v1.15：下線で示す） ----
   黒基調のテーマの上に白い帯を乗せると板が浮いて見えるので、帯そのものをやめて地に馴染ませる。
   選択中の項目は塗りつぶさず下線1本で示し、囲みを全部外す。
   色は固定値ではなくテーマの base / contrast から取るので、配色を変えても追随する。 */
body.pdfp-page .pdfp-nav {
  align-items: flex-end;
  gap: .2em 1.4em;
  padding: .9em 0 0;
  margin-bottom: 1em;
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--contrast, #1e1e1e);
  border-bottom: 1px solid rgba(128, 128, 128, .32);
}

.pdfp-nav-brand {
  font-size: 1.25em;
  font-weight: 500;
  letter-spacing: .16em;
  color: inherit;
  margin-right: .5em;
  padding-bottom: .6em;
}

.pdfp-nav-brand:hover { color: #e0219a; }

/* 表記が長くなったぶん、1行に収まるよう詰めてある（1280pxで75px＝1行） */
.pdfp-nav-modes { gap: 1em; align-items: flex-end; }

.pdfp-nav-mode {
  padding: 0 0 .55em;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  color: inherit;
  opacity: .58;
  font-size: .9em;
  transition: opacity .12s ease, border-color .12s ease;
}

.pdfp-nav-mode:hover { background: none; color: inherit; opacity: 1; }

/* PCとスマホで表記を出し分ける。両方HTMLに入れておき、ここで切り替える */
.pdfp-nav-short { display: none; }

.pdfp-nav-mode.is-active {
  background: none;
  color: inherit;
  opacity: 1;
  border-bottom-color: #e0219a;
}

/* 検索も囲まず、下線だけにする */
.pdfp-nav-search {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(140, 140, 140, .55);
  border-radius: 0;
  align-items: center;
  margin-bottom: .35em;
}

/* input と button は色を受け継がないので、明示的に inherit させる。
   ここを忘れると黒地に黒文字になって検索欄ごと消える。 */
.pdfp-nav-search { color: inherit; }
.pdfp-nav-search input[type="search"] { color: inherit; padding-left: .2em; }
.pdfp-nav-search input[type="search"]::placeholder { color: inherit; opacity: .6; }
.pdfp-nav-search button {
  color: var(--wp--preset--color--contrast, #1e1e1e);
  opacity: .75;
  padding-right: .2em;
  -webkit-appearance: none;
  appearance: none;
}
.pdfp-nav-search button:hover { color: #e0219a; opacity: 1; }
.pdfp-nav-search:focus-within { border-color: transparent; border-bottom-color: #e0219a; }

/* 三本線も囲みを外す */
.pdfp-menu { padding-bottom: .4em; }

/* 三本線は四角い枠で囲って、押せるボタンだと分かるようにする。
   アイコンの色は SVG 側に直書きしてあるので、ここでは枠だけを扱う。 */
.pdfp-menu-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  gap: 0;
  border: 1px solid rgba(150, 150, 150, .65);
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .12s ease, background .12s ease;
}

.pdfp-menu-btn:hover,
.pdfp-menu.is-open .pdfp-menu-btn {
  border-color: #e0219a;
  background: rgba(224, 33, 154, .18);
}

/* クリックの対象を必ずボタン自身にする（SVGの内側が押されても取りこぼさない） */
.pdfp-menu-btn svg { pointer-events: none; }
.pdfp-menu.is-open .pdfp-menu-btn { border: 0; }

/* メニューの中身も地の配色に合わせる */
.pdfp-menu-panel {
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--contrast, #1e1e1e);
  border-color: rgba(128, 128, 128, .38);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.pdfp-menu-name { color: inherit; border-bottom-color: rgba(128, 128, 128, .25); }
.pdfp-menu-link { color: inherit; opacity: .78; }
.pdfp-menu-link:hover { background: none; color: #e0219a; opacity: 1; }

/* 期間・大タグの絞り込みも地の上に乗るので、同じ考え方で読める色にする */
.pdfp-period-opt,
.pdfp-cat-opt {
  color: inherit;
  opacity: .62;
  border-color: rgba(128, 128, 128, .35);
  background: none;
}

.pdfp-period-opt:hover,
.pdfp-cat-opt:hover { background: none; opacity: 1; }
.pdfp-period-opt:hover { color: #e0219a; border-color: #e0219a; }
.pdfp-cat-opt:hover { color: #c07ee0; border-color: #c07ee0; }

.pdfp-period-opt.is-active {
  opacity: 1;
  color: #fff;
  background: #e0219a;
  border-color: #e0219a;
}

.pdfp-cat-opt.is-active {
  opacity: 1;
  color: #fff;
  background: #8e44ad;
  border-color: #8e44ad;
}

@media (max-width: 600px) {
  /* 狭い画面では横一列に収まらず4段に折り返す。並び順のままだと三本線が
     最下段の検索欄の真横に来て、検索の下線と紛れて見分けがつかない。
     屋号と同じ段の右端に上げ、タブと検索はそれぞれ独立した段にする。 */
  body.pdfp-page .pdfp-nav { gap: .2em .9em; }

  /* 狭い画面では短い表記にする。お気に入りと後で見るはカードと同じ絵文字 */
  .pdfp-nav-full { display: none; }
  .pdfp-nav-short { display: inline; }
  .pdfp-nav-short.is-icon { font-size: 1.35em; line-height: 1; }

  /* お気に入りは、押した後のカードのボタンと同じ赤いハートで出す。
     カードの赤(#b3243b)は白いカードの上を想定した色で、黒地だと沈むので少し明るくしてある。
     色そのもので分かるようにするため、未選択でも薄くしない。 */
  .pdfp-nav-mode.has-icon-fav { opacity: 1; }
  .pdfp-nav-short.is-fav { color: #e0415f; }

  /* 大タグの絞り込みは1段に収める。今の5つは詰めれば入るが、
     あとで大タグを増やしても折り返さないよう、はみ出したら横スクロールさせる。 */
  .pdfp-catbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .25em;
    padding-bottom: 2px;
  }

  .pdfp-cat-opt {
    flex: 0 0 auto;
    padding: .3em .65em;
    font-size: .9em;
  }

  .pdfp-nav-brand { order: 1; }
  .pdfp-menu      { order: 2; margin-left: auto; padding-bottom: 0; }
  .pdfp-nav-modes { order: 3; flex-basis: 100%; gap: .9em; }
  .pdfp-nav-search { order: 4; flex-basis: 100%; margin-left: 0; }
  /* スマホでは検索欄が段を独占するので、入力欄を横幅いっぱいに伸ばす */
  .pdfp-nav-search input[type="search"] { width: auto; flex: 1; }

  /* 指で押す前提なので少し大きめの正方形にする */
  .pdfp-menu-btn {
    width: 42px;
    height: 42px;
    padding: 0;
  }
}

/* ---- 「TOPに戻る」ボタン ----
   スクロールするとページの右下に出る。画面幅によらず出す。
   スマホではこれがある前提でナビの固定を外している（狭い画面では本文の面積を優先）。 */
.pdfp-totop { display: none; }

.pdfp-totop.is-visible {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  padding: .65em 1.1em;
  border: 1px solid rgba(140, 140, 140, .55);
  border-radius: 999px;
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--contrast, #1e1e1e);
  font: inherit;
  font-size: .82em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  transition: border-color .12s ease, color .12s ease;
}

.pdfp-totop.is-visible:hover { border-color: #e0219a; color: #e0219a; }
.pdfp-totop.is-visible:active { border-color: #e0219a; color: #e0219a; }

@media (max-width: 600px) {
  /* 狭い画面ではナビを貼り付けない。戻る手段はこのボタンが担う */
  body.pdfp-page .pdfp-nav { position: static; }

  .pdfp-totop.is-visible {
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    font-size: .8em;
    padding: .6em 1em;
  }
}

/* ---- カードのコメント数 ---- */
.pdfp-card-comments {
  font-size: .74em;
  text-decoration: none;
  color: #1a6b2f;
  background: #edfaef;
  border: 1px solid #b7e0c0;
  border-radius: 4px;
  padding: .28em .55em;
  white-space: nowrap;
  line-height: 1;
}

.pdfp-card-comments:hover { background: #d9f2df; border-color: #7cc98d; }

/* ---- タグ入力の候補 ---- */
/* min-width:0 が無いと、入力欄が縮まずにフォームからはみ出す */
.pdfp-tag-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; }

.pdfp-tag-suggest {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  margin: 0;
  padding: .25em 0;
  list-style: none;
  background: #fff;
  color: #1e1e1e;
  border: 1px solid #ccd0d4;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  max-height: 15em;
  overflow-y: auto;
}

.pdfp-tag-suggest-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6em;
  padding: .4em .8em;
  font-size: .9em;
  cursor: pointer;
}

.pdfp-tag-suggest-name { overflow-wrap: anywhere; }

.pdfp-tag-suggest-count {
  flex: 0 0 auto;
  font-size: .85em;
  color: #646970;
  font-variant-numeric: tabular-nums;
}

.pdfp-tag-suggest-item:hover .pdfp-tag-suggest-count,
.pdfp-tag-suggest-item.is-active .pdfp-tag-suggest-count { color: inherit; }

.pdfp-tag-suggest-item:hover,
.pdfp-tag-suggest-item.is-active { background: #faf0f6; color: #e0219a; }

/* ---- タグ一覧ページ ---- */
.pdfp-taglist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .6em;
}

.pdfp-taglist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  padding: .6em .9em;
  border: 1px solid rgba(140, 140, 140, .45);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .04);
}

.pdfp-taglist-item:hover { border-color: #e0219a; color: #e0219a; }

.pdfp-taglist-name { overflow-wrap: anywhere; }

.pdfp-taglist-count {
  flex: 0 0 auto;
  font-size: .82em;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

/* ---- ルールページ（ナビ付き） ---- */
.pdfp-rules-wrap .pdfp-rules-page { margin-top: 1em; }

@media (max-width: 600px) {
  .pdfp-taglist-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* 詳細ページの「サイト内で読む」／「PDFを開く」 */
.pdfp-detail-buttons {
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
  margin-bottom: 1em;
  max-width: 420px;
}

/* 2つのボタンを同じ大きさにそろえる。
   文字数が違うので、幅は等分にして中央寄せにする。 */
.pdfp-detail-buttons .pdfp-button {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  /* 下マージンが残っていると、伸縮したときにその分だけ背が低くなる */
  margin: 0;
}

.pdfp-detail-read { background: #e0219a; border-color: #e0219a; color: #fff; }
.pdfp-detail-read:hover { background: #c31685; border-color: #c31685; color: #fff; }

/* ---- 読む画面 ----
   PDF.js の公式ビューアを画面いっぱいに置く。テーマのヘッダーや余白は使わない。 */
body.pdfp-reading { overflow: hidden; }

/* テーマは本文直下の要素に max-width（既定645px）と自動マージンをかけるため、
   position: fixed だけでは画面いっぱいにならない。ここで明示的に打ち消す。 */
.pdfp-reader-frame {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100000;
  background: #2a2a2e;
}

.pdfp-reader-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- 作者名（タグと同じ作り・色だけ変える） ---- */
.pdfp-authors { margin-top: 1.2em; }
.pdfp-authors-list { display: flex; flex-wrap: wrap; gap: .45em; margin-bottom: .7em; }

.pdfp-author {
  display: inline-flex;
  align-items: center;
  gap: .2em;
  padding: .12em .55em;
  border-radius: 3px;
  font-size: .82em;
  /* タグ（青系）と区別できるよう、作者名は琥珀色にする */
  background: #fdf3e2;
  color: #8a5a10;
  border: 1px solid #ecd4a8;
}

.pdfp-author a { color: inherit; text-decoration: none; }
.pdfp-author a:hover { text-decoration: underline; }

.pdfp-author-remove {
  border: none;
  background: none;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
  padding: 0 0 0 .1em;
}

.pdfp-author-remove:hover { opacity: 1; color: #b3243b; }

.pdfp-authorfilter { background: #fdf3e2; color: #8a5a10; }

/* カードの作者名（大タグとタグの間。詳細ページと同じ琥珀色） */
.pdfp-card-author {
  font-size: .72em;
  padding: .1em .5em;
  background: #fdf3e2;
  color: #8a5a10;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pdfp-card-author:hover { background: #f7e4c2; color: #6b4409; }


/* ---- 詳細ページのお気に入り／後で見る（アイコン＋文字） ---- */
.pdfp-actions-labeled { gap: .5em; }

.pdfp-actions-labeled .pdfp-act {
  gap: .4em;
  padding: .45em .9em;
  font-size: .85em;
}

.pdfp-actions-labeled .pdfp-act-icon { font-size: 1.15em; }
.pdfp-act-label { line-height: 1; }

/* ---- カード（v1.32：表紙の上に情報を重ねる） ----
   表紙を押すと詳細ページが別タブで開く。ボタン類は表紙の上に置く。 */

/* 重ねる要素は、どんな絵の上でも読めるよう自前の背景を持たせる */
.pdfp-cover-cats,
.pdfp-cover-actions {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 大タグは表紙の中の要素。ボタン群は表紙の外に置いてあるので、
   カードを基準に同じ見た目の位置へ重ねる（カードの内側余白ぶんずらす）。 */
.pdfp-card { position: relative; }
.pdfp-cover-cats { top: 6px; }
.pdfp-cover-actions { top: calc(.7em + 6px); }

/* 右上のボタン群（約122px）とぶつからない幅に抑える */
.pdfp-cover-cats { left: 6px; flex-wrap: wrap; max-width: calc(100% - 140px); }
.pdfp-cover-actions { right: calc(.7em + 6px); }

.pdfp-cover-cat {
  display: inline-block;
  padding: .15em .5em;
  border-radius: 3px;
  background: rgba(142, 68, 173, .92);
  color: #fff;
  font-size: .7em;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.pdfp-cover-cat:hover { background: rgba(120, 55, 150, .96); color: #fff; }

/* 表紙の上のボタンは、白丸に濃い記号で統一する */
.pdfp-cover-actions .pdfp-actions { gap: 4px; }

.pdfp-cover-actions .pdfp-act {
  width: 26px;
  height: 26px;
  padding: 0;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #50575e;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.pdfp-cover-actions .pdfp-act:hover:not(:disabled) { background: #fff; }
.pdfp-cover-actions .pdfp-act-icon { font-size: 15px; }

/* シコボタンは横長の絵（440×201）なので、丸に押し込めると潰れる。
   横幅だけ決めて高さは絵の比率に任せ、全体が映るようにする。
   2枚（グレー／ピンク）で高さがわずかに違うため、そろえるのは横幅の方。 */
.pdfp-cover-actions .pdfp-shiko-sm .pdfp-shiko-btn img {
  width: 58px;
  height: auto;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* 表紙の下：閲覧数とシコ数 */
.pdfp-card-foot {
  display: flex;
  align-items: center;
  gap: .5em;
  flex-wrap: wrap;
  margin-top: .25em;
}

.pdfp-card-foot .pdfp-stats { gap: .8em; }

/* タグ類はカードの下端に寄せて、枚数が違っても並びをそろえる */
.pdfp-card-tags { margin-top: auto; }

/* ---- 表紙に重ねる統計と、順位との位置関係（v1.33） ---- */

/* 表紙の下側の帯に閲覧数・シコ数を出す */
.pdfp-cover-stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  padding: .25em .5em;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .95em;
}

/* 帯の中は白文字にそろえる（既定の灰色だと黒帯の上で沈む） */
.pdfp-cover-stats .pdfp-stats {
  color: #fff;
  gap: .8em;
  min-width: 0;
  overflow: hidden;
}

/* ランキングのとき、並び順の根拠になっている方の数値をピンクにする。
   （以前は同じ数を別枠でもう一度出していて二重表示になっていた） */
.pdfp-cover-stats .is-ranked {
  color: #ff8ad1;
  font-weight: 700;
}

/* 順位バッジが出るときは、大タグをその下へずらす */
.pdfp-cover-wrap.has-rank .pdfp-cover-cats {
  top: 38px;
  max-width: calc(100% - 12px);
}

/* コメント数だけの行 */
.pdfp-card-foot {
  display: flex;
  align-items: center;
  gap: .5em;
  flex-wrap: wrap;
  margin-top: .25em;
}

/* ---- スマホの見せ方（2案を見比べるための切り替え） ----
   ?pdfp_m=1 … ボタンをタイトルの下に。横2列のまま一覧性を保つ
   ?pdfp_m=2 … 横1列にして表紙を大きく。ボタンは表紙の上のまま
   決まったら、選ばれなかった方とこの切り替えごと消す。 */
@media (max-width: 600px) {

  /* ① ボタンをタイトルの下へ */
  .pdfp-m1 .pdfp-cover-actions {
    position: static;
    justify-content: center;
    gap: 8px;
    margin-top: .35em;
    padding-top: .1em;
  }

  /* 指で押す前提なので当たり判定は広げたいが、固定幅にすると
     カードの幅を超えて列を押し広げてしまう。
     お気に入り・後で見るは正方形のまま、シコは残り幅に合わせて伸縮させる。 */
  .pdfp-m1 .pdfp-cover-actions {
    gap: 6px;
    min-width: 0;
  }

  .pdfp-m1 .pdfp-cover-actions .pdfp-actions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .pdfp-m1 .pdfp-cover-actions .pdfp-act {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .pdfp-m1 .pdfp-cover-actions .pdfp-act-icon { font-size: 17px; }

  /* シコは横長の絵。残った幅いっぱいまで使い、上限だけ決めておく */
  .pdfp-m1 .pdfp-cover-actions .pdfp-shiko-sm {
    flex: 1 1 0;
    min-width: 0;
  }

  .pdfp-m1 .pdfp-cover-actions .pdfp-shiko-btn { width: 100%; }

  .pdfp-m1 .pdfp-cover-actions .pdfp-shiko-btn img {
    width: 100%;
    max-width: 76px;
    height: auto;
    border-radius: 8px;
  }

  /* 表紙の上にはもうボタンが無いので、大タグは幅いっぱい使える */
  .pdfp-m1 .pdfp-cover-cats { max-width: calc(100% - 12px); }

  /* ② 横1列にして大きく見せる */
  .pdfp-m2 { grid-template-columns: 1fr; gap: 1.1em; }

  .pdfp-m2 .pdfp-cover-actions { top: calc(.7em + 8px); right: calc(.7em + 8px); gap: 6px; }

  .pdfp-m2 .pdfp-cover-actions .pdfp-act {
    width: 36px;
    height: 36px;
  }

  .pdfp-m2 .pdfp-cover-actions .pdfp-act-icon { font-size: 18px; }
  .pdfp-m2 .pdfp-cover-actions .pdfp-shiko-sm .pdfp-shiko-btn img { width: 72px; }
  .pdfp-m2 .pdfp-cover-cats { top: 8px; left: 8px; max-width: calc(100% - 190px); }
  .pdfp-m2 .pdfp-cover-cat { font-size: .8em; padding: .2em .7em; }
  .pdfp-m2 .pdfp-cover-stats { padding: .4em .7em; font-size: 1em; }
  .pdfp-m2 .pdfp-title { font-size: 1.05em; }
}

/* ---- 表示形式の切り替え（狭い画面でだけ出す） ---- */
.pdfp-viewmode { display: none; }

@media (max-width: 600px) {
  .pdfp-viewmode {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin: 0 0 .6em;
  }

  .pdfp-viewmode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(140, 140, 140, .5);
    border-radius: 6px;
    background: none;
    color: inherit;
    opacity: .7;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  /* 中の絵はクリックの対象にしない（取りこぼし防止） */
  .pdfp-viewmode-btn svg { pointer-events: none; display: block; }

  .pdfp-viewmode-btn.is-active {
    opacity: 1;
    color: #fff;
    background: #e0219a;
    border-color: #e0219a;
  }

}

/* 文字のみの一覧（スマホの③・PCの③で共通）。1件を横一列にまとめる。
   並びは 大タグ＋ボタン ／ タイトル ／ 数値 ／ 作者名とタグ の4段。 */
.pdfp-textlist { grid-template-columns: 1fr; gap: .5em; }

/* カードを「折り返す横並び」にして、幅100%の要素で行を分ける */
.pdfp-textlist .pdfp-card {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .3em .5em;
  padding: .6em .7em;
}

/* 表紙は出さない。枠は display:contents で消して、
   中の大タグ・数値をカード直下の要素として扱えるようにする
   （そうしないと入れ子のままで行を分けられない）。 */
.pdfp-textlist .pdfp-cover { display: none; }
.pdfp-textlist .pdfp-cover-wrap { display: contents; }

/* 1段目：大タグ（左）とボタン（右） */
.pdfp-textlist .pdfp-rank-badge {
  position: static;
  order: 1;
  flex: 0 0 auto;
}

.pdfp-textlist .pdfp-cover-cats {
  position: static;
  order: 1;
  max-width: none;
  flex: 0 1 auto;
}

.pdfp-textlist .pdfp-cover-actions {
  position: static;
  order: 1;
  flex: 0 0 auto;
  margin-left: auto;   /* 同じ段の右端へ */
  gap: 8px;
}

.pdfp-textlist .pdfp-cover-actions .pdfp-act { width: 34px; height: 34px; border-radius: 8px; }
.pdfp-textlist .pdfp-cover-actions .pdfp-shiko-sm { flex: 0 0 auto; }
.pdfp-textlist .pdfp-cover-actions .pdfp-shiko-btn img { width: 62px; border-radius: 8px; }

/* 2段目：タイトル（最大2行） */
.pdfp-textlist .pdfp-meta {
  order: 2;
  flex: 0 0 100%;
  min-width: 0;
}

.pdfp-textlist .pdfp-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1em;
  line-height: 1.4;
}

/* 3段目：閲覧数・シコ数・コメント数 */
.pdfp-textlist .pdfp-cover-stats {
  position: static;
  order: 3;
  flex: 0 0 auto;
  background: none;
  padding: 0;
  color: inherit;
  justify-content: flex-start;
  gap: .8em;
  font-size: .85em;
}

.pdfp-textlist .pdfp-card-foot {
  order: 3;
  flex: 0 0 auto;
  margin: 0 0 0 auto;   /* 数値と同じ段の右端へ */
}

/* 黒帯の上ではなくなるので、地の文字色に戻す */
.pdfp-textlist .pdfp-cover-stats .pdfp-stats { color: #646970; }
.pdfp-textlist .pdfp-cover-stats .is-ranked { color: #b3247f; }

/* 4段目：作者名とタグ */
.pdfp-textlist .pdfp-card-tags {
  order: 4;
  flex: 0 0 100%;
  margin-top: 0;
}

/* ---- 一覧の列数（PC側の切り替え） ---- */
.pdfp-grid.pdfp-d1 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pdfp-grid.pdfp-d2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 画面が狭くなったら、6列・4列とも入る数まで落とす */
@media (max-width: 1100px) {
  .pdfp-grid.pdfp-d1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pdfp-grid.pdfp-d1,
  .pdfp-grid.pdfp-d2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 切り替えの組をスマホ・PCで出し分ける ---- */
.pdfp-viewmode {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 .6em;
}

.pdfp-viewmode-group { display: flex; gap: 4px; }
.pdfp-viewmode-mobile { display: none; }

@media (max-width: 600px) {
  .pdfp-viewmode-desktop { display: none; }
  .pdfp-viewmode-mobile { display: flex; }
}

/* PCでもボタンの見た目は同じにする（スマホ用の指定はメディアクエリ内なので、ここで改めて） */
.pdfp-viewmode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(140, 140, 140, .5);
  border-radius: 6px;
  background: none;
  color: inherit;
  opacity: .7;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.pdfp-viewmode-btn svg { pointer-events: none; display: block; }
.pdfp-viewmode-btn:hover { opacity: 1; border-color: #e0219a; }

.pdfp-viewmode-btn.is-active {
  opacity: 1;
  color: #fff;
  background: #e0219a;
  border-color: #e0219a;
}

/* 横6列のときは1枚あたりが細いので、ボタンを表紙の上に重ねると
   表紙がほとんど隠れてしまう。スマホの横2列と同じく、タイトルの下へ回す。 */
.pdfp-grid.pdfp-d1 .pdfp-cover-actions {
  position: static;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  margin-top: .35em;
  padding-top: .1em;
}

.pdfp-grid.pdfp-d1 .pdfp-cover-actions .pdfp-actions {
  flex: 0 0 auto;
  gap: 6px;
}

.pdfp-grid.pdfp-d1 .pdfp-cover-actions .pdfp-act {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.pdfp-grid.pdfp-d1 .pdfp-cover-actions .pdfp-act-icon { font-size: 15px; }

/* シコは横長の絵。残った幅に合わせて縮め、列を押し広げないようにする */
.pdfp-grid.pdfp-d1 .pdfp-cover-actions .pdfp-shiko-sm {
  flex: 1 1 0;
  min-width: 0;
}

.pdfp-grid.pdfp-d1 .pdfp-cover-actions .pdfp-shiko-btn { width: 100%; }

.pdfp-grid.pdfp-d1 .pdfp-cover-actions .pdfp-shiko-btn img {
  width: 100%;
  max-width: 68px;
  height: auto;
  border-radius: 8px;
}

/* 表紙の上が空いたので、大タグは幅いっぱい使える */
.pdfp-grid.pdfp-d1 .pdfp-cover-cats { max-width: calc(100% - 12px); }

/* ---- ページ数（P○○）。数値の行の右端に置く（v1.39） ---- */

/* 表紙の帯では、数値のまとまりを帯いっぱいに広げてから右端へ寄せる。
   広げないと margin-left:auto が効く余白が生まれない。 */
.pdfp-cover-stats .pdfp-stats { flex: 1 1 auto; }

.pdfp-stat-pages {
  margin-left: auto;
  padding-left: .4em;
  white-space: nowrap;
}

/* ---- 初回の使い方案内（v1.44） ----
   暗い幕はSVGの切り抜きで作る。影を広げる書き方だと穴を1つしか開けられず、
   後々ふたつ以上を指したくなったときに作り直しになるため。 */

#pdfp-tour {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

#pdfp-tour-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#pdfp-tour-box {
  position: absolute;
  box-sizing: border-box;
  /* 見出しとボタンは常に見えるようにして、あいだの説明だけスクロールさせる。
     箱ごとスクロールにすると「次へ」まで流れてしまい、
     説明が長い画面では押せなくなる */
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: calc(100% - 24px);
  background: #fff;
  color: #1e1e1e;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
  font-size: 14px;
  line-height: 1.6;
}

/* 見本のカードを出す手順だけ広くする。
   説明が6項目あり、うち2つは補足付きなので、横に並べるだけの幅がいる */
#pdfp-tour-box.is-wide {
  width: 640px;
  font-size: 14.5px;
}

@media (max-width: 700px) {
  #pdfp-tour-box.is-wide { width: 350px; }
}

#pdfp-tour-title {
  margin: 0 0 .5em;
  font-size: 1.05em;
  font-weight: 700;
  color: #1e1e1e;
}

#pdfp-tour-body {
  overflow-y: auto;
  min-height: 0;   /* これが無いと縮まず、はみ出したままになる */
}

#pdfp-tour-body p { margin: 0 0 10px; }

#pdfp-tour-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding-top: 10px;
}

#pdfp-tour-title { flex: 0 0 auto; }

#pdfp-tour-step { font-size: 12px; color: #646970; margin-right: auto; }

#pdfp-tour-foot button {
  font: inherit;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}

#pdfp-tour-skip {
  background: none;
  border: none;
  color: #646970;
  text-decoration: underline;
  padding: 6px 4px;
}

#pdfp-tour-next {
  background: #e0219a;
  border: 1px solid #e0219a;
  color: #fff;
  font-weight: 600;
}

#pdfp-tour-hint {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: #8c8f94;
}

/* 見本のカードと、その番号の説明。
   狭いときは縦に積む（横に並べると絵も字も潰れる） */
.pdfp-tour-sample-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.pdfp-tour-sample { flex: 0 0 auto; }

.pdfp-tour-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

/* ②や⑥の補足。本文より一段落として、ぶら下がりだと分かるようにする */
.pdfp-tour-sub {
  display: block;
  margin-top: 2px;
  padding-left: .8em;
  font-size: 12px;
  line-height: 1.5;
  color: #50575e;
}

.pdfp-tour-legend li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 7px;
}

.pdfp-tour-no {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #e0219a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

/* 豆知識。本文と区別が付くよう囲んで色を落とす */
.pdfp-tour-tip {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  background: #f6f7f7;
  border-left: 3px solid #e0219a;
  border-radius: 3px;
  font-size: 12.5px;
  color: #3c434a;
}

@media (max-width: 700px) {
  .pdfp-tour-sample-wrap { flex-direction: column; align-items: center; }
  .pdfp-tour-legend { align-self: stretch; }
}

/* 説明の文章。行を flex にしているので、包まないと
   <b> が別の枠として横に並んでしまう */
.pdfp-tour-desc { flex: 1 1 auto; min-width: 0; }

/* ---- アイコンとユーザー設定（v1.51） ---- */

/* アイコンは画像でも頭文字でも同じ丸に収める */
.pdfp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: #e6e6e8;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  vertical-align: middle;
}

/* コメント：アイコンの右に名前と日時を並べる */
.pdfp-review-head .pdfp-avatar { margin-right: .1em; }

/* メニュー：アイコンと名前を横に並べ、押せると分かるようにする */
a.pdfp-menu-name {
  display: flex;
  align-items: center;
  gap: .55em;
  text-decoration: none;
}
a.pdfp-menu-name:hover span { color: #e0219a; }

/* ユーザー設定の画面 */
.pdfp-profile-title { margin: .6em 0 .8em; }

.pdfp-profile-form { max-width: 560px; }

.pdfp-profile-block {
  margin-bottom: 1.2em;
  padding: 1em 1.1em;
  background: #fff;
  color: #1e1e1e;
  border: 1px solid #e2e4e7;
  border-radius: 8px;
}

.pdfp-profile-block h3 { margin: 0 0 .7em; font-size: 1em; }

.pdfp-profile-icon {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
}

.pdfp-profile-icon-ctrl { flex: 1 1 220px; min-width: 0; }

.pdfp-profile-icon-ctrl input[type="file"] { max-width: 100%; }

.pdfp-profile-name {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  padding: .5em .7em;
  font-size: 1em;
  border: 1px solid #c3c4c7;
  border-radius: 6px;
}

.pdfp-profile-help { margin: .45em 0 0; font-size: .82em; color: #646970; }

.pdfp-profile-remove { display: inline-block; margin-top: .5em; font-size: .88em; }

.pdfp-profile-save { background: #e0219a; border-color: #e0219a; color: #fff; }

.pdfp-profile-msg {
  max-width: 560px;
  padding: .6em .9em;
  border-radius: 6px;
  font-size: .9em;
}
.pdfp-profile-msg.is-ok    { background: #edfaef; color: #1a6b2c; border: 1px solid #b8e6c1; }
.pdfp-profile-msg.is-error { background: #fcf0f1; color: #8a1f2b; border: 1px solid #f0c2c7; }


/* ---- お気に入り／後で見るの押す前・押した後（v1.51.1） ----
   以前は文字色と枠の色が少し変わるだけで、⏰は絵文字なので色も変わらず、
   押したかどうか見分けがつかなかった。
   押す前：白地に灰色の線の絵。押した後：色で塗りつぶした地に白い絵（ハートは中まで塗る）。
   表紙の上・スマホの各表示・文字だけの一覧・詳細ページのどこでも同じ規則にする。
   表紙の上のボタンにはホバーで白地に戻す指定があるので、それより強く当てる。 */
.pdfp-ico {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pdfp-act.pdfp-act-fav.is-on,
.pdfp-act.pdfp-act-fav.is-on:hover:not(:disabled) {
  background: #d63652;
  border-color: #d63652;
  color: #fff;
}

.pdfp-act.pdfp-act-later.is-on,
.pdfp-act.pdfp-act-later.is-on:hover:not(:disabled) {
  background: #2271b1;
  border-color: #2271b1;
  color: #fff;
}

.pdfp-act-fav.is-on .pdfp-ico-fav { fill: currentColor; }

/* 時計は文字盤を白く塗り、針だけ地の青で抜く */
.pdfp-act-later.is-on .pdfp-ico-face { fill: currentColor; }
.pdfp-act-later.is-on .pdfp-ico-hand { stroke: #2271b1; }

/* 押した瞬間に少し弾ませて、切り替わったことに気づけるようにする（is-pop は押したときだけJSが付ける） */
.pdfp-act.is-pop .pdfp-act-icon { animation: pdfp-act-pop .28s ease-out; }

@keyframes pdfp-act-pop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pdfp-act.is-pop .pdfp-act-icon { animation: none; }
}