:root{--paper:#f4f0e6;--ink:#202d29;--green:#345d44;--red:#b73626;--line:#bac0b5}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Yu Gothic','Meiryo',sans-serif;font-size:16px;line-height:1.8}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:5px}
button,input,select{font:inherit;color:inherit}
button,select{min-height:44px}
button{cursor:pointer;border:1px solid var(--green);background:transparent;padding:9px 18px;border-radius:2px}
button:hover:not(:disabled){background:#e5e8db}
button:disabled{cursor:default;opacity:.5}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a04a00;outline-offset:4px}
.skip{position:fixed;top:-100px;background:var(--paper);padding:12px;z-index:10}
.skip:focus{top:0}
header{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px max(24px,6vw);border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.12em;text-decoration:none}
header>a:last-child{font-size:14px}
main{max-width:1260px;min-height:65vh;margin:0 auto;padding:56px max(24px,6vw) 70px}
.eyebrow{font-size:13px;letter-spacing:.12em;color:var(--red);margin:0 0 12px}
h1{font-size:clamp(30px,5vw,56px);line-height:1.4;letter-spacing:.06em;margin:0 0 42px}
h2{font-size:21px;margin:0 0 18px}
#login-panel{max-width:620px;border-top:2px solid var(--green);padding-top:26px}
label{display:block;font-weight:700}
form{margin-top:28px}
input{width:100%;min-height:48px;padding:10px 12px;background:#fffdf7;border:1px solid var(--line);border-radius:2px;margin:6px 0 18px}
.primary{background:var(--green);color:#fff}
.primary:hover:not(:disabled){background:#284834}
.hint{font-size:14px;color:#4b5b50;line-height:1.7;margin:8px 0 16px}
.status{min-height:1.8em;margin:20px 0;color:var(--green);overflow-wrap:anywhere}
.status.error{color:var(--red)}
.toolbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.toolbar>div{margin-right:auto;min-width:180px}
select{margin-top:8px;width:100%;background:#fffdf7;border:1px solid var(--line);padding:8px 32px 8px 12px}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px 16px}
.photo{padding:0;border:0;text-align:left;background:transparent;min-width:0}
.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#e2e1d6}
.photo span{display:block;font-size:12px;padding-top:7px;color:#526259}
#more{display:block;margin:32px auto 0}
.album-video{margin-top:42px;padding-top:26px;border-top:1px solid var(--line)}
.album-video iframe{display:block;width:min(100%,360px);height:auto;aspect-ratio:9/16;border:0;background:#202d29}
footer{padding:24px max(24px,6vw);border-top:1px solid var(--line);font-size:13px}
dialog{width:min(1120px,96vw);max-width:96vw;max-height:96dvh;padding:16px;background:var(--ink);color:white;border:0;border-radius:2px}
dialog::backdrop{background:#101a16e6}
dialog button{border-color:#aab8ad;color:white}
dialog button:hover:not(:disabled){background:#3a4b41}
.viewer-header,.viewer-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
.viewer-header h2{font-size:16px;margin:0}
.image-stage{position:relative;height:min(65dvh,760px);margin:14px 0;display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom}
.image-stage img,.image-stage canvas{width:100%;height:100%;object-fit:contain}
.image-status{position:absolute;max-width:90%;padding:10px 14px;background:#202d29e6;text-align:center}
.image-status:empty{display:none}
.viewer-controls p{font-size:14px;text-align:center;margin:0}
.slideshow-controls{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:12px}
.viewer-hint{text-align:center;font-size:12px;color:#bcc8bf;margin:14px 0 0}
body.viewing{overflow:hidden}
@media(max-width:400px){.viewer-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.viewer-controls button{min-width:0;font-size:14px}.viewer-controls p{overflow-wrap:anywhere;font-size:12px}}
@media(max-width:600px){main{padding-top:34px}h1{margin-bottom:30px}.photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.toolbar{gap:10px}.toolbar>div{width:100%;margin:0}header{padding:18px 20px}.brand{letter-spacing:.03em}.toolbar button{flex:1;padding:9px 12px}dialog{padding:12px}.viewer-controls button{padding:9px 12px}.image-stage{height:60dvh}}