/* =====================================================
   Page Counter Menu & Page List Modal
   深津市立近代美術館 収蔵資料閲覧確認台帳
   ===================================================== */

/* ── ページカウンターメニュー ── */

.pc-menu {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 46px);
  z-index: 99999 !important;
  min-width: 220px;

  background: rgba(13, 18, 25, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f1ebd8;

  border-radius: 8px;
  border: 1px solid rgba(184, 145, 80, 0.45);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(184, 145, 80, 0.1);
  padding: 0.5rem 0;
  font-family: var(--font-serif, 'Shippori Mincho', 'Noto Serif JP', serif);
}

.pc-menu.hidden {
  display: none;
}

.pc-menu__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 1.1rem;
  border: none;
  background: none;
  color: #d6dde7;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}

.pc-menu__item:hover {
  background: rgba(184, 145, 80, 0.18);
  color: #fdfaf3;
}

.pc-menu__icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.pc-menu__label {
  flex: 1;
  font-weight: 500;
}

.pc-menu__count {
  font-size: 0.75rem;
  color: #8993a4;
  font-variant-numeric: tabular-nums;
}

/* =====================================================
   Page List Popup — 閲覧確認台帳
   ===================================================== */

.page-list-popup {
  position: fixed;
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 54px);
  z-index: 99999 !important;
  width: 360px;
  max-width: calc(100vw - 28px);
  max-height: min(440px, 68vh);
  display: flex;
  flex-direction: column;

  background: linear-gradient(180deg, rgba(15, 21, 29, 0.98) 0%, rgba(10, 14, 20, 0.98) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #d6dde7;

  border-radius: 10px;
  border: 1px solid rgba(184, 145, 80, 0.45);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 24px rgba(184, 145, 80, 0.12);
  overflow: hidden;
  animation: popupFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.page-list-popup.hidden {
  display: none;
}

/* ── ヘッダー ─────────────────────────────────── */

.page-list-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(184, 145, 80, 0.3);
  background: linear-gradient(180deg, #17212d 0%, #101722 100%);
  flex-shrink: 0;
}

.page-list-popup__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-list-popup__subtitle {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: #b89150;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

.page-list-popup__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fdfaf3;
  font-family: var(--font-serif, 'Shippori Mincho', 'Noto Serif JP', serif);
  letter-spacing: 0.04em;
}

.page-list-popup__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(184, 145, 80, 0.08);
  border: 1px solid rgba(184, 145, 80, 0.3);
  color: #c5a059;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  transition: all 0.2s ease;
}

.page-list-popup__close:hover {
  color: #fff;
  background: rgba(184, 145, 80, 0.25);
  border-color: #d4ab6a;
  box-shadow: 0 0 10px rgba(212, 171, 106, 0.3);
}

/* ── ボディ（スクロール可能） ─────────────────── */

.page-list-popup__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

/* カスタムスクロールバー */
.page-list-popup__body::-webkit-scrollbar {
  width: 4px;
}
.page-list-popup__body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.page-list-popup__body::-webkit-scrollbar-thumb {
  background: rgba(184, 145, 80, 0.35);
  border-radius: 2px;
}
.page-list-popup__body::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 171, 106, 0.6);
}

/* ── プログレスバー（非表示指定） ─────────────────── */

.page-list__progress {
  display: none !important;
}

/* ── ページリストアイテム ─────────────────────── */

.page-list__items {
  list-style: none;
  padding: 0.3rem 0;
  margin: 0;
}

.page-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.15s ease;
}

.page-list__item:last-child {
  border-bottom: none;
}

.page-list__item:hover {
  background: rgba(184, 145, 80, 0.07);
}

.page-list__item.is-visited {
  background: rgba(184, 145, 80, 0.02);
}

.page-list__item.is-visited:hover {
  background: rgba(184, 145, 80, 0.09);
}

/* ★ 現在地（Current Page）の超明確なハイライト ★ */

.page-list__item.is-current {
  background: linear-gradient(90deg, rgba(184, 145, 80, 0.24) 0%, rgba(184, 145, 80, 0.06) 100%) !important;
  border-left: 3.5px solid #d4ab6a !important;
  padding-left: calc(1.1rem - 3.5px);
  box-shadow: inset 0 0 14px rgba(184, 145, 80, 0.12);
}

.page-list__item.is-current:hover {
  background: linear-gradient(90deg, rgba(184, 145, 80, 0.3) 0%, rgba(184, 145, 80, 0.1) 100%) !important;
}

/* ページ番号 */
.page-list__page-no {
  flex-shrink: 0;
  width: 2.2rem;
  font-size: 0.78rem;
  color: #6a7688;
  font-variant-numeric: tabular-nums;
  font-family: monospace, sans-serif;
  letter-spacing: 0.04em;
}

.page-list__item.is-current .page-list__page-no {
  color: #d4ab6a;
  font-weight: 700;
}

/* ステータスアイコン */
.page-list__status {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.68rem;
  color: #4a5463;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: all 0.2s ease;
}

/* 閲覧済みステータス */
.page-list__item.is-visited .page-list__status {
  background: linear-gradient(135deg, #b89150 0%, #8c6828 100%);
  color: #0c1017;
  font-weight: 800;
  border-color: #d4ab6a;
  box-shadow: 0 0 6px rgba(184, 145, 80, 0.4);
}

/* 現在地ステータス */
.page-list__item.is-current .page-list__status {
  background: linear-gradient(135deg, #fef08a 0%, #d4ab6a 100%);
  color: #0c1017;
  font-weight: 900;
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(254, 240, 138, 0.7);
  position: relative;
}

/* タイトル & リンク */
.page-list__title {
  flex: 1;
  font-size: 0.84rem;
  line-height: 1.45;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.page-list__title.is-hidden {
  color: #4a5463;
  font-style: italic;
  letter-spacing: 0.06em;
}

/* リンク色（visitedの紫を完全排除し、高コントラストを保証） */
.page-list__link,
.page-list__link:visited {
  color: #d6dde7 !important;
  text-decoration: none !important;
  transition: color 0.15s ease, text-shadow 0.15s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-list__link:hover {
  color: #fef08a !important;
  text-decoration: none !important;
  text-shadow: 0 0 8px rgba(254, 240, 138, 0.4);
}

/* 現在地のリンク色（最高視認性） */
.page-list__item.is-current .page-list__link,
.page-list__item.is-current .page-list__link:visited {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 0 8px rgba(212, 171, 106, 0.45);
}

/* 現在地バッジ */
.page-list__now-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: #8c2323;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 8px rgba(140, 35, 35, 0.7);
  animation: badgePulse 2s infinite ease-in-out;
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(140, 35, 35, 0.7);
  }
  50% {
    box-shadow: 0 0 14px rgba(212, 171, 106, 0.8);
  }
}