.book-scene{
    --w: 350px;
    --h: 545px;
    --t: 25.71px;       /* 150p 정도 얇은 책 */
    --eps: .3px;     /* 틈/깜빡임 방지(과하면 떠보일 수 있으니 작게) */
    --rx: 0deg;
    --ry: 0deg;
    --mx: 50%;
    --my: 50%;
    position: relative;
    width: var(--w);
    user-select: none;
    touch-action: pan-y;
    perspective: 1200px;
}
@media (max-width: 640px){
    .book-scene{
        --w: 300px;
        --h: 467px;
        --t: 22px;
        --eps: .25px;
        --rx: 0deg;
        --ry: 0deg;
    }
}

.book{
    position: relative;
    width: var(--w);
    height: var(--h);
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: none;
    will-change: transform;
}

/* front/back */
.face{
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border-radius: 0;
    overflow: hidden;
    /* outline: 1px solid rgba(0,0,0,.08); */
    box-shadow: 0 26px 60px rgba(0,0,0,.18);
}

.front{
    transform: translateZ(calc(var(--t) / 2 + var(--eps)));
}
.back{
    transform: rotateY(180deg) translateZ(calc(var(--t) / 2 + var(--eps)));
}

.face img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 3D 렌더링 선명도 개선 (Windows/Chrome) */
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
}

/* gloss */
.gloss{
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(600px circle at var(--mx) var(--my), rgba(255,255,255,.42), rgba(255,255,255,0) 46%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 200ms ease;
}
.book-scene:hover .gloss{ opacity: .95; }

.edge{
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(calc(-1 * (var(--t) / 2)));
}

.edge-face{
    position: absolute;
    inset: 0;
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;
}

/* LEFT spine */
.edge-left{ top: 0; bottom: 0; left: 0; width: var(--t); }
.edge-left .edge-face{
    transform-origin: left center;
    transform: rotateY(-90deg);
    background: #fff;
}
.spine-face::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0) 55%);
    opacity:.35;
    pointer-events:none;
}

.spine{
    position:absolute;
    left: 0;
    top: 0;
}
.spine-text{
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    display:flex;
    align-items:center;
    gap: 16px;
    white-space: nowrap;
    color:#111;
}
.spine-ko{
    color:#1f4ea0;
    font-weight: 400;
    font-size: 16px;
}
.spine-ko-bold{
    margin-left: 2px;
    font-weight: 800
}
.spine-en{
    font-weight: 300;
    font-size: 13px;
    color:#333;
}
.spine-en-bold{
    margin-left: 2px;
    font-weight: 800;
}
.spine-author{
    font-size: 8px;
    font-weight: 300;
    color: rgba(0,0,0,.55);
    letter-spacing: 1px;
}
.spine-pub{
    font-size: 11px;
    color: #1f4ea0;
    font-weight: 400;
}
.spine-pub-bold{
    font-weight: 800;
}
/* RIGHT pages */
.edge-right{
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--t);
}
.edge-right .edge-face{
    transform-origin: right center;
    transform: rotateY(90deg);
    background: repeating-linear-gradient(to right, /* 오른쪽 종이면 세로줄 */ rgba(255,255,255,.98) 0px, rgba(255,255,255,.98) 1px, rgba(232,232,232,.92) 2px),linear-gradient(to left, rgba(0,0,0,.14), rgba(0,0,0,0) 55%);
}

/* 종이면 상단 */
.edge-top{
    left: 0;
    right: 0;
    top: 0;
    height: var(--t);
}
.edge-top .edge-face{
    transform-origin: top center;
    transform: rotateX(90deg);
    background: repeating-linear-gradient(to bottom, /* 상단 종이면 가로줄 */ rgba(255,255,255,.98) 0px, rgba(255,255,255,.98) 1px, rgba(232,232,232,.92) 2px);
}

/* 종이면 하단 */
.edge-bottom{ left: 0; right: 0; bottom: 0; height: var(--t); }
.edge-bottom .edge-face{
    transform-origin: bottom center;
    transform: rotateX(-90deg);
    background: repeating-linear-gradient(to bottom, /* 하단 종이면 가로줄 */ rgba(255,255,255,.98) 0px, rgba(255,255,255,.98) 1px, rgba(232,232,232,.92) 2px);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
    .book{ transition: none; }
    .gloss{ transition: none; }
}

.tab-content { opacity: 0; animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); scale: 0.99; } to { opacity: 1; transform: translateY(0); scale: 1; } }

.toc-item { position: relative; padding-left: 1.5rem; }
.toc-item::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background-color: #e5e7eb; transition: background-color 0.2s; }
.toc-item:hover::before { background-color: #1f4ea0; }