/* 책장 테마 4가지 (스위스 그리드): 흰 종이(wood) · 삼원색(gallery) · 빨강(cafe) · 검정(antique). 키 이름은 저장된 값과 맞추려고 예전 그대로. 책등 색 팔레트는 app.js 의 THEMES */
/* 틀은 선 세 가지뿐: 위 굵은 선(.mtop), 단마다 선반 선(.mplank), 아래 굵은 선(.mbase). 그림자·둥근 모서리·명암 없음 */
.mshelf{--sbg:var(--paper);--sfg:var(--ink);--sline:var(--ink);--ssel:var(--red);position:relative;margin:18px 0 10px;background:var(--sbg);color:var(--sfg)}
.mtop,.mbase{height:10px;background:var(--sline)}
.mrow{position:relative;display:flex;align-items:flex-end;gap:3px;min-height:214px;padding:16px 12px 0}
.mplank{height:4px;background:var(--sline)}
.mshelf>.mplank:nth-last-child(2){display:none}
.mempty{padding:40px 12px 26px;text-align:center;color:var(--sfg);font-size:.9rem}

/* 책등: 단색 면, 위에 순위, 굵은 고딕 제목, 아래 작가 */
.bspine{position:relative;flex:none;width:var(--w);height:var(--h);background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 0 15px;cursor:pointer;transition:transform .18s ease-out;overflow:hidden;user-select:none}
.bspine>*{position:relative;flex:none}
.bspine i{font:700 9px/1 var(--head);font-style:normal}
.bspine b{flex:1 1 auto;min-height:0;writing-mode:vertical-rl;font:700 var(--fs,12px)/1.15 var(--head);white-space:nowrap;overflow:hidden}
.bspine b.wrap{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.bspine s{writing-mode:vertical-rl;text-decoration:none;font:500 9px/1 var(--head);opacity:.75;max-height:var(--ah);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bspine:hover,.bspine:focus-visible{transform:translateY(-7px);outline:none}
.bspine.sel{transform:translateY(-20px)}
.bspine.sel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--ssel)}

/* 1. 흰 종이: 검정·회색 책등에 빨강 한 권꼴 / 2. 삼원색: 빨강·파랑·노랑·검정·흰색. 둘 다 책등마다 검정 테두리 */
.th-wood .bspine,.th-gallery .bspine{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* 3. 빨강: 빨간 판에 검정 선 */
.th-cafe{--sbg:var(--red);--ssel:var(--ink)}
/* 4. 검정: 검정 판에 흰 선 */
.th-antique{--sbg:var(--ink);--sfg:var(--paper);--sline:var(--paper)}
.th-antique .mtop,.th-antique .mbase{background:var(--sbg)}   /* 흰 선은 종이 바탕에 묻히니 위아래는 검정 판 그대로 */

/* 테마 고르기 */
.thsw{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.thsw button{padding:.4em 1em;font-size:.8rem}