:root{--detail-bg:#d6ecf8;--detail-accent:#79a9ba}
body.detail-page{min-height:100vh;background:var(--detail-bg);color:var(--ink)}
body.detail-echo{--detail-bg:#f8dce4;--detail-accent:#d897a8}
body.detail-root{--detail-bg:#dcebd8;--detail-accent:#8fa889}
body.detail-about{--detail-bg:#fff6e8;--detail-accent:#edb7b0}
.detail-header{width:min(1080px,calc(100% - 40px));margin:0 auto;padding:26px 0 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.detail-logo{width:190px;height:48px;overflow:hidden;display:block}
.detail-logo img{width:100%;height:auto;transform:translateY(-2px)}
.detail-back{display:inline-flex;align-items:center;gap:9px;padding:12px 17px;border:1px solid var(--line);border-radius:999px;background:#fffaf0;font-size:13px;font-weight:700;box-shadow:4px 4px 0 var(--detail-accent);transition:transform .2s,box-shadow .2s}
.detail-back:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--detail-accent)}
.detail-main{width:min(1080px,calc(100% - 40px));margin:0 auto;padding:15px 0 80px}
.detail-title{text-align:center;margin:8px 0 30px}
.detail-title p{font:700 10px/1 Arial;letter-spacing:.2em;margin-bottom:12px}
.detail-title h1{font-family:"Klee One",cursive;font-size:clamp(44px,7vw,76px);font-weight:400;line-height:1}
.detail-title .category-ja{font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;font-size:.68em;font-weight:600;letter-spacing:.035em;vertical-align:.08em}
.detail-sheet{margin:0 auto;background:#fff;border:1px solid #6e879255;border-radius:30px;padding:clamp(8px,1.6vw,16px);box-shadow:12px 12px 0 var(--detail-accent);overflow:hidden}
.detail-sheet img{width:100%;height:auto;border-radius:20px}
.detail-nav{margin-top:42px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.detail-nav a{min-height:58px;padding:12px 20px;border:1px solid var(--line);border-radius:999px;background:#fffaf0;display:flex;align-items:center;justify-content:center;font-family:"Klee One",cursive;font-size:18px;transition:transform .2s,background .2s}
.detail-nav a:hover{transform:translateY(-3px);background:#fff}
.detail-nav .prev{grid-column:1}.detail-nav .home{grid-column:2;font-family:inherit;font-size:13px}.detail-nav .next{grid-column:3}
.detail-nav .empty{visibility:hidden}
.detail-nav-single{display:flex;justify-content:center}.detail-nav-single .home{min-width:min(100%,360px)}
@media(max-width:580px){.detail-header{width:calc(100% - 28px);padding-top:18px}.detail-logo{width:138px;height:36px}.detail-back{padding:10px 12px;font-size:11px}.detail-main{width:calc(100% - 24px);padding-bottom:45px}.detail-title{margin:12px 0 22px}.detail-sheet{border-radius:20px;padding:5px;box-shadow:7px 7px 0 var(--detail-accent)}.detail-sheet img{border-radius:15px}.detail-nav{margin-top:30px;grid-template-columns:1fr 1fr}.detail-nav a{min-height:52px;padding:10px 12px;font-size:16px}.detail-nav .home{grid-column:1/-1;grid-row:2}.detail-nav .next{grid-column:2}.detail-nav .empty{display:none}}
