/* 漫画（/manga/）。ヘッダー・メニューは /list.css。ここは読む画面だけ */
body[data-view=manga]{height:100svh;display:flex;flex-direction:column;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.reader{position:relative;flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#000}
/* 絵は枠の中いっぱい（幅か高さの短い方に合わせる）。横に広い画面では2ページを見開きで（右に前のページ、左に次のページ） */
.stage{position:relative;min-height:0;display:grid;place-items:center;padding:12px;container-type:size;overflow:hidden}
.spread{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center}
.page-frame{position:relative;width:min(100cqw,calc(100cqh * 1054 / 1493));aspect-ratio:1054/1493;background:#fff}
.is-spread .page-frame{width:min(50cqw,calc(100cqh * 1054 / 1493))}
.page-frame[hidden]{display:none}
.page-frame img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
/* 右から左に読む: 左を押すと次、右を押すと前（見開きでも、絵の左右の端ではなく画面の左右で分ける） */
.tap-zone{position:absolute;z-index:2;top:0;bottom:0;width:34%;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tap-zone.next{left:0}
.tap-zone.prev{right:0}
.tap-zone:disabled{cursor:default}
.tap-zone:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.edge-button{position:absolute;top:50%;z-index:4;width:44px;height:64px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;transform:translateY(-50%);cursor:pointer;display:grid;place-items:center;font-size:28px;line-height:1}
.edge-button:hover{background:rgba(255,255,255,.22)}
.edge-button:disabled{opacity:.25;cursor:default}
.edge-button.next{left:16px}
.edge-button.prev{right:16px}
/* 最後のページ: 絵の中の「始め方を見る」の上に重ねたリンク（最後のページを出している枠に付ける） */
.cta-hotspot{position:absolute;z-index:8;display:block;overflow:hidden;border-radius:10px;color:transparent;text-indent:110%;white-space:nowrap}
.cta-hotspot[hidden]{display:none}
.cta-hotspot:hover{background:rgba(0,0,0,.06)}
.cta-hotspot:focus-visible{outline:3px solid #2f6be0;outline-offset:3px}
.cta-hotspot-start{left:45.48%;top:87.30%;width:41.67%;height:6.35%}
.reader-help{position:absolute;left:16px;bottom:8px;z-index:3;color:rgba(255,255,255,.55);font-size:12px;pointer-events:none}
/* 下の操作: 前後のボタン・つまみ・ページ番号（どこまで読んだかは、ここだけで出す） */
.controls{border-top:1px solid #24262c;background:#000;padding:10px 16px max(10px,env(safe-area-inset-bottom))}
.controls-inner{width:min(860px,100%);margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px}
.control-button{width:44px;height:40px;border:0;border-radius:10px;background:#1a1b20;color:#fff;cursor:pointer;font-size:22px;line-height:1;-webkit-tap-highlight-color:transparent}
.control-button:disabled{opacity:.32;cursor:default}
.page-slider{width:100%;accent-color:#fff;direction:rtl}
.control-status{display:inline-flex;align-items:baseline;gap:6px;color:#a3a7b0;font-size:13px;font-weight:700;white-space:nowrap}
.control-status strong{color:#fff;font-size:15px}
@media (max-width:760px),(pointer:coarse) and (max-height:600px){
 .stage{padding:6px}
 .edge-button,.reader-help{display:none}
 .controls{padding:8px 12px max(8px,env(safe-area-inset-bottom))}
 .controls-inner{gap:10px}
}