* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif; background:#f7f6ef; color:#172d2a; line-height:1.6; }
main { max-width:880px; margin:0 auto; padding:2rem 1.2rem 1.5rem; }
.kicker { color:#36594e; font-weight:700; font-size:.9rem; margin:0; }
h1 { margin:.12rem 0; font-size:clamp(1.7rem,4vw,2.35rem); }
.intro { color:#40534d; margin:.25rem 0 1.1rem; }
section { border-top:2px solid #42675a; }
.book { display:grid; grid-template-columns:3.2rem minmax(6rem,1fr) minmax(5.5rem,auto) auto; align-items:center; column-gap:1rem; padding:.9rem .4rem; border-bottom:1px solid #c4cfc6; }
.book h2,.book p { margin:0; }
.book h2 { font-size:1.14rem; font-weight:650; }
.index { color:#51655b; font-size:.9rem; font-variant-numeric:tabular-nums; }
.price { font-variant-numeric:tabular-nums; font-weight:600; }
a { color:#15553f; text-decoration-thickness:1px; text-underline-offset:.18em; }
a:focus-visible { outline:3px solid #cd732b; outline-offset:.22rem; }
nav { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-top:1.1rem; }
button, a { touch-action:manipulation; }
@media(max-width:520px) { .book {grid-template-columns:1.8rem 1fr auto; gap:.2rem .7rem;}
.book .detail {grid-column:2;} .book .price {grid-row:1; grid-column:3;} }