.diary-page{--diary-surface:#0b2118;--diary-line:#38533e}
.diary-page .diary-choice{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:30px;align-items:stretch}
.diary-page .diary-option{display:flex;flex-direction:column;padding:7px;overflow:hidden;border:1px solid var(--diary-line);border-radius:12px;background:var(--diary-surface);text-align:center;color:#e7eddf;box-shadow:none}
.diary-page .diary-option.selected{padding:7px;border:1px solid #88c55d;box-shadow:0 0 0 2px #88c55d55}
.diary-page .diary-option img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:5px;background:#fff}
.diary-page .diary-option span{margin:0;padding:15px 13px 17px;font:500 18px/1.35 Oswald,sans-serif;min-height:76px}
.diary-page .diary-detail{gap:32px;align-items:center;overflow:hidden;border:0;border-radius:0;background:transparent;margin-bottom:38px}
.diary-cover-stage{position:relative;display:block;align-self:stretch;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:#fff;cursor:zoom-in}
.diary-page .diary-cover{display:block;width:100%;height:100%;max-height:550px;aspect-ratio:1;object-fit:contain;border-radius:6px;background:#fff}
.diary-zoom{position:absolute;left:18px;bottom:16px;padding:7px 10px;border:1px solid #89a57966;border-radius:7px;background:#05160ed9;color:#cad8bd;font-size:11px}
.diary-detail-copy{align-self:center;padding:32px}
.diary-detail-copy h2{font-size:clamp(26px,3vw,38px);margin:12px 0 18px}
.diary-detail-copy p{line-height:1.75;color:#b9cbb1}
.diary-detail-copy h3{font:500 21px Oswald,sans-serif;color:#dfe9d5}
.diary-detail-copy .detail-price{display:block;margin:23px 0 17px}
.diary-page .diary-spreads{gap:18px}
.diary-page .diary-spreads button{display:flex;flex-direction:column;align-items:stretch;padding:12px;border:1px solid var(--diary-line);border-radius:12px;background:var(--diary-surface);cursor:zoom-in;min-width:0}
.diary-page .diary-spreads img{display:block;height:340px;width:100%;object-fit:contain;border-radius:6px;background:#ecece8}
.diary-page .diary-spreads button span{padding:12px 0 2px;color:#b7cba6;text-align:left;font-size:12px}
.diary-lightbox{text-align:center;color:#e5eddd}
#modal:has(.diary-lightbox){width:min(900px,94vw);background:#071b13;border-radius:14px}
.diary-lightbox h2{font-size:26px;margin:12px 0 20px}
.diary-lightbox img{display:block;width:100%;max-height:70vh;object-fit:contain;background:#fff;border:1px solid #37503c;border-radius:10px;margin-bottom:18px}
.diary-visual img,.diary-visual img+img{background:#eaeaea;object-fit:contain}
@media(max-width:760px){
  .diary-page .diary-choice{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:26px}
  .diary-page .diary-option span{font-size:14px;padding:12px 7px;min-height:82px}
  .diary-page .diary-detail{grid-template-columns:1fr;gap:0}
  .diary-page .diary-cover{max-height:420px;object-fit:contain}
  .diary-detail-copy{padding:24px 20px}
  .diary-detail-copy h2{font-size:29px}
  .diary-page .diary-spreads{grid-template-columns:1fr;gap:14px}
  .diary-page .diary-spreads img{height:auto;max-height:500px}
  .diary-lightbox h2{font-size:23px}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover){.diary-option{transition:border-color .2s,box-shadow .2s}.diary-option:hover{border-color:#8bc769}.diary-page .diary-option img{transition:scale .3s}.diary-page .diary-option:hover img{scale:1.025}}