:root{--teal:#0f766e;--red:#b42318;--ink:#1a1a1a;--line:#d9d9d9;--bg:#f4f4f4}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--bg);display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;font-size:15px;line-height:1.5}
a{color:var(--teal)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line)}
.bar h1{margin:0;font-size:17px;font-weight:700;border-bottom:2px solid var(--red);padding-bottom:1px}
.bar nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px}
main{flex:1;display:flex;flex-direction:column;min-height:0}
.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 8px;min-height:0;touch-action:pan-y}
.stage img{display:block;max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;background:#fff;border:1px solid var(--line)}
.ctl{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;background:#fff;border-top:1px solid var(--line)}
.ctl button{font:inherit;color:var(--teal);background:#fff;border:1px solid var(--teal);border-radius:0;padding:8px 18px;min-width:84px;cursor:pointer}
.ctl button:hover:not(:disabled){background:var(--teal);color:#fff}
.ctl button:disabled{color:#999;border-color:var(--line);cursor:default}
.ctl button:focus-visible,.ctl input:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.pg{display:flex;align-items:center;gap:4px;white-space:nowrap}
.pg input{font:inherit;width:3.4em;padding:7px 4px;text-align:center;border:1px solid var(--line);border-radius:0;color:var(--ink);background:#fff}
@media (max-width:480px){.bar h1{font-size:16px}.ctl{gap:6px;padding:8px}.ctl button{min-width:64px;padding:8px 10px}.stage{padding:8px 4px}.stage img{max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px)}}