/* フリーペーパー紙面ビューアー (fp/this_month/index.tt・paper-viewer.js) */

/* ---- ページ一覧 ---- */
.pv-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 14px; }
.pv-intro p { margin: 0; color: #555; font-size: 13px; }
.pv-open { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border: 0; border-radius: 999px; background: #f39800; color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; box-shadow: 0 2px 6px rgba(243,152,0,.35); }
.pv-open:hover { background: #db8700; }
.pv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-grid li { margin: 0; padding: 0; }
.pv-grid button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: center; }
.pv-grid img { display: block; width: 100%; aspect-ratio: 1200 / 1841; object-fit: cover; border: 1px solid #ddd; border-radius: 4px; background: #f3f3f3; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s; }
.pv-grid button:hover img, .pv-grid button:focus-visible img { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.pv-grid span { display: block; margin-top: 4px; color: #555; font-size: 12px; }

/* ---- ビューアー ---- */
.pv-viewer { position: fixed; inset: 0; z-index: 10000; display: none; flex-direction: column; background: #1b1b1d; color: #f2f2f2; font-family: "Helvetica Neue", Arial, "Hiragino Sans", Meiryo, sans-serif; -webkit-user-select: none; user-select: none; }
.pv-viewer.on { display: flex; }
.pv-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-left: calc(10px + env(safe-area-inset-left, 0px)); padding-right: calc(10px + env(safe-area-inset-right, 0px)); background: #111; border-bottom: 1px solid #2c2c2f; }
.pv-bar .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pv-bar .ttl b { margin-right: 8px; }
.pv-bar .pg { min-width: 4.5em; color: #ddd; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.pv-bar .zm { min-width: 3.6em; color: #bbb; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.pv-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 9px; border: 1px solid #3a3a3e; border-radius: 8px; background: #26262a; color: #f2f2f2; font: inherit; font-size: 13px; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pv-btn:hover { background: #333338; }
.pv-btn:focus-visible { outline: 2px solid #f39800; outline-offset: 1px; }
.pv-btn.on { background: #f39800; border-color: #f39800; color: #111; }
.pv-btn svg { width: 18px; height: 18px; }
.pv-sep { width: 1px; height: 24px; margin: 0 2px; background: #3a3a3e; }
@media (max-width: 700px) { .pv-hide-sm { display: none !important; } .pv-bar .ttl b { display: none; } }

.pv-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
.pv-stage.drag { cursor: grabbing; }
.pv-stage.fit { cursor: zoom-in; }
.pv-content { position: absolute; left: 0; top: 0; display: flex; gap: 0; transform-origin: 0 0; will-change: transform; }
.pv-content img { display: block; max-width: none; background: #fff; box-shadow: 0 6px 30px rgba(0,0,0,.5); -webkit-user-drag: none; }
.pv-content.anim { transition: transform .22s ease-out; }
.pv-spin { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255,255,255,.2); border-top-color: #f39800; border-radius: 50%; animation: pvspin .8s linear infinite; display: none; }
.pv-stage.loading .pv-spin { display: block; }
@keyframes pvspin { to { transform: rotate(360deg); } }
.pv-nav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 26px; cursor: pointer; transition: background .15s, opacity .15s; }
.pv-nav:hover { background: rgba(243,152,0,.9); }
.pv-nav:disabled { opacity: 0; pointer-events: none; }
.pv-nav.prev { left: 12px; } .pv-nav.next { right: 12px; }
@media (max-width: 700px) { .pv-nav { width: 40px; height: 40px; margin-top: -20px; font-size: 20px; } }
.pv-hint { position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.6); color: #ddd; font-size: 12px; pointer-events: none; transition: opacity .6s; white-space: nowrap; }
.pv-hint.off { opacity: 0; }

.pv-strip { display: flex; gap: 8px; padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; background: #111; border-top: 1px solid #2c2c2f; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.pv-strip button { flex: none; position: relative; padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; opacity: .65; }
.pv-strip button:hover { opacity: 1; }
.pv-strip button.cur { border-color: #f39800; opacity: 1; }
.pv-strip img { display: block; width: 46px; height: 70px; object-fit: cover; border-radius: 2px; background: #333; }
.pv-strip span { position: absolute; right: 2px; bottom: 2px; padding: 0 4px; border-radius: 3px; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; }
@media (max-height: 520px) { .pv-strip { display: none; } }

/* スマホ: 1 回タップで上下のバーと左右の矢印を隠して、紙面を画面いっぱいに */
.pv-viewer.chrome-off .pv-bar, .pv-viewer.chrome-off .pv-strip, .pv-viewer.chrome-off .pv-nav { display: none; }
@media (pointer: coarse) {
  .pv-btn { min-width: 40px; height: 40px; }            /* 指で押しやすい大きさ */
  .pv-strip img { width: 52px; height: 80px; }
  .pv-hint { white-space: normal; width: max-content; max-width: 90%; text-align: center; }
}