:root{--navy:#1F3A5F;--blue:#1F6FB5;--orange:#F08A24;--bg:#EEF3F8}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--navy);font-family:"BIZ UDPGothic","BIZ UDPゴシック","Hiragino Kaku Gothic ProN","Meiryo",sans-serif}
#app{display:flex;flex-direction:column;height:100%;height:100dvh}
header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--navy);color:#fff}
header h1{font-size:16px;margin:0;font-weight:700;letter-spacing:.02em}
header button{font:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.16);border:0;border-radius:18px;padding:7px 14px;cursor:pointer}
#stage{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom}
#page{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 4px 24px rgba(31,58,95,.25);background:#fff;user-select:none;-webkit-user-drag:none}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(31,58,95,.82);color:#fff;font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5}
.nav:disabled{opacity:.25;cursor:default}
#prev{left:10px}#next{right:10px}
footer{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #d5dfe9}
footer button{font:inherit;font-size:16px;font-weight:700;color:#fff;background:var(--blue);border:0;border-radius:22px;padding:10px 22px;cursor:pointer;min-width:96px}
footer button:disabled{background:#b8c6d6}
#count{font-size:18px;font-weight:700;min-width:84px;text-align:center}
#grid{position:absolute;inset:0;background:var(--bg);overflow:auto;padding:14px;display:none;z-index:9}
#grid.open{display:block}
#grid ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
#grid button{display:block;width:100%;border:2px solid transparent;border-radius:6px;background:#fff;padding:0;cursor:pointer;position:relative}
#grid button.cur{border-color:var(--orange)}
#grid img{display:block;width:100%;height:auto;border-radius:4px}
#grid span{position:absolute;left:4px;bottom:4px;background:rgba(31,58,95,.85);color:#fff;font-size:12px;padding:1px 7px;border-radius:9px}
@media (min-width:900px){.nav{width:60px;height:60px}#prev{left:24px}#next{right:24px}}
@media (max-width:600px){.nav{display:none}header h1{font-size:13px;white-space:nowrap}header button{white-space:nowrap;padding:7px 10px;font-size:13px}}