/* =============================================================
 * MS Book Shelf — 인터랙티브 책장 (물리 기반)
 * 물리 애니메이션은 JS가 transform/변수로 구동, 여기서는 형태·질감 담당
 * ============================================================= */

.msbs-root {
    --msbs-bg: #d8d4cb;
    --msbs-bg-2: #cfc9be;
    --msbs-ledge: rgba(50, 42, 34, 0.16);
    --msbs-ink: #26313f;
    font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif;
    color: var(--msbs-ink);
    -webkit-font-smoothing: antialiased;
    position: relative;
    margin: 0 auto;
    width: 100%;       /* Elementor flex 컨테이너 안에서 수축 방지 */
    min-width: 0;
    max-width: 100%;
}

/* Elementor 위젯 래퍼도 전체폭 확보 */
.elementor-widget-ms_book_shelf,
.elementor-widget-ms_book_shelf .elementor-widget-container {
    width: 100%;
}

.msbs-root *,
.msbs-root *::before,
.msbs-root *::after {
    box-sizing: border-box;
}

/* ── 인트로 헤더 ── */
.msbs-intro {
    text-align: center;
    padding: 4px 20px 26px;
}
.msbs-intro__title {
    font-family: "Georgia", "Noto Serif KR", serif;
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--msbs-ink);
    position: relative;
    display: inline-block;
}
/* 타이틀 아래 골드 액센트 라인 */
.msbs-intro__title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #c9a24b, #e2c37c);
}
.msbs-intro__sub {
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.6;
    color: #5b6472;
    max-width: 620px;
    margin: 0 auto;
}

/* ── 무대 ── */
.msbs-stage {
    position: relative;
    background:
        radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,0.35), transparent 60%),
        linear-gradient(180deg, var(--msbs-bg) 0%, var(--msbs-bg-2) 100%);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -40px 60px rgba(60,50,40,0.10),
        0 30px 60px -30px rgba(40,33,26,0.35);
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

/* 무대 상단 스포트라이트 + 하단 비네트 (프리미엄 조명) */
.msbs-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(52% 60% at 50% -8%, rgba(255,252,240,0.34), transparent 62%),
        radial-gradient(130% 55% at 50% 108%, rgba(30,22,14,0.16), transparent 58%);
    pointer-events: none;
    z-index: 2;
}

/* 3D 원근 뷰포트 */
.msbs-shelf {
    position: relative;
    width: 100%;
    height: var(--msbs-shelf-h, 480px);
    perspective: 2400px;
    perspective-origin: 50% 42%;
    overflow: hidden;
    cursor: grab;
}

/* 좌우 에지 페이드 — 스크롤 여지를 은근히 암시 */
.msbs-shelf::before,
.msbs-shelf::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(24px, 4vw, 64px);
    z-index: 7;
    pointer-events: none;
}
.msbs-shelf::before {
    left: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.10), transparent);
}
.msbs-shelf::after {
    right: 0;
    background: linear-gradient(270deg, rgba(0,0,0,0.10), transparent);
}
.msbs-shelf.is-dragging {
    cursor: grabbing;
}

/* 책 트랙 (좌우 이동) */
.msbs-track {
    position: absolute;
    left: 0;
    bottom: 46px;
    height: calc(var(--msbs-shelf-h, 480px) - 46px);
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 0 clamp(40px, 8vw, 140px);
    transform-style: preserve-3d;
    will-change: transform;
}

/* ── 선반 받침 ── */
.msbs-shelf-ledge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px;
    height: 14px;
    background: linear-gradient(180deg, #b7b0a3 0%, #9c9488 55%, #837b70 100%);
    box-shadow:
        0 -2px 6px rgba(0,0,0,0.10),
        0 10px 24px -6px rgba(40,33,26,0.5);
    z-index: 5;
    pointer-events: none;
}
.msbs-shelf-ledge::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -3px;
    height: 3px;
    background: linear-gradient(180deg, rgba(255,255,255,0.45), transparent);
}

/* =============================================================
 * 색조(tint) 오버레이 — 텍스처 위에 특정 색만 입힘
 * mix-blend-mode:color 로 명암(질감)은 유지하고 색상만 캐스트
 * ============================================================= */
.msbs-root.has-tint .msbs-stage { isolation: isolate; }
.msbs-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: color;
}
.msbs-tint--bg { z-index: 0; opacity: 0.85; }
.msbs-tint--shelf { z-index: 1; opacity: 0.9; border-radius: inherit; }

/* =============================================================
 * 배경 테마 (.msbs-stage) — 프리미엄 · 3D/2D 세분화
 * ============================================================= */
/* solid: 기본값 사용 (별도 override 없음) */

/* 럭스(2D) — 은은한 상단 광채 + 하단 비네트, 미니멀 프리미엄 */
.msbs-root.bg-luxe .msbs-stage {
    background:
        radial-gradient(130% 80% at 50% -6%, rgba(255,255,255,0.55), transparent 55%),
        radial-gradient(100% 100% at 50% 118%, rgba(0,0,0,0.14), transparent 60%),
        linear-gradient(180deg, #ece6da 0%, #dbd2c1 100%);
}
.msbs-root.bg-luxe { --msbs-ink: #37312a; }

/* 우드(3D) — 판자 벽 + 결/이음새 음영 */
.msbs-root.bg-wood .msbs-stage {
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, rgba(255,255,255,0.03) 2px 3px, transparent 3px 74px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 2px, rgba(0,0,0,0.05) 2px 7px),
        radial-gradient(120% 70% at 50% 0%, rgba(255,225,190,0.18), transparent 60%),
        linear-gradient(180deg, #b58255 0%, #99653c 55%, #7c5030 100%);
}
.msbs-root.bg-wood { --msbs-ink: #3a2818; }

/* 라이브러리(3D) — 다크 아카데미아 우드 패널 + 따뜻한 스포트라이트 */
.msbs-root.bg-library .msbs-stage {
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 128px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 5px),
        radial-gradient(120% 90% at 50% -4%, rgba(255,214,150,0.16), transparent 55%),
        linear-gradient(180deg, #402f22 0%, #2c2017 100%);
}
.msbs-root.bg-library { --msbs-ink: #f2e8d8; }
.msbs-root.bg-library .msbs-hint { color: rgba(240,225,200,0.7) !important; }

/* 펠트/실공예(2D) — 부드러운 원단 + 스티치 테두리 */
.msbs-root.bg-felt .msbs-stage {
    background:
        radial-gradient(60% 45% at 28% 22%, rgba(255,255,255,0.10), transparent 60%),
        radial-gradient(55% 45% at 78% 72%, rgba(0,0,0,0.07), transparent 62%),
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0 1px, transparent 1px 2px),
        linear-gradient(180deg, #a9c39a 0%, #93b083 100%);
}
.msbs-root.bg-felt .msbs-stage::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(255,255,255,0.55);
    border-radius: 12px;
    pointer-events: none;
    z-index: 6;
}
.msbs-root.bg-felt { --msbs-ink: #33422b; }

/* 리넨(2D) — 밝은 직조 원단 */
.msbs-root.bg-linen .msbs-stage {
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 3px),
        radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.4), transparent 60%),
        linear-gradient(180deg, #efe9dd 0%, #e2dbcb 100%);
}
.msbs-root.bg-linen { --msbs-ink: #4a4234; }

/* 유리(3D) — 프로스티드 글래스 + 사선 광택 */
.msbs-root.bg-glass .msbs-stage {
    background:
        linear-gradient(125deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.06) 30%, transparent 46%),
        linear-gradient(300deg, rgba(255,255,255,0.30) 0%, transparent 40%),
        linear-gradient(180deg, #e4edf1 0%, #cbd8de 60%, #bccbd2 100%);
}
.msbs-root.bg-glass { --msbs-ink: #2b3944; }

/* 스틸(3D) — 브러시드 메탈 + 대각 반사 */
.msbs-root.bg-steel .msbs-stage {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, rgba(0,0,0,0.05) 1px 3px),
        linear-gradient(180deg, #d2d7dd 0%, #aab1b9 48%, #c6ccd2 100%);
}
.msbs-root.bg-steel .msbs-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,0.35) 0%, transparent 22%, transparent 78%, rgba(255,255,255,0.22) 100%);
    pointer-events: none;
    z-index: 1;
}
.msbs-root.bg-steel { --msbs-ink: #2a323b; }

/* 마블(3D) — 화이트 대리석 + 결(vein) + 광택 */
.msbs-root.bg-marble .msbs-stage {
    background:
        linear-gradient(122deg, transparent 46%, rgba(120,132,146,0.22) 47.5%, transparent 49.5%),
        linear-gradient(58deg, transparent 66%, rgba(120,132,146,0.16) 67.5%, transparent 69.5%),
        linear-gradient(100deg, transparent 22%, rgba(120,132,146,0.10) 23%, transparent 25%),
        radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.6), transparent 60%),
        linear-gradient(180deg, #f5f6f8 0%, #e4e8ee 100%);
}
.msbs-root.bg-marble { --msbs-ink: #333a44; }

/* 나이트(3D) — 프리미엄 다크, 상단 스포트라이트로 책이 도드라짐 */
.msbs-root.bg-night .msbs-stage {
    background:
        radial-gradient(95% 72% at 50% -12%, rgba(96,120,160,0.38), transparent 60%),
        radial-gradient(60% 50% at 50% 46%, rgba(255,255,255,0.05), transparent 62%),
        linear-gradient(180deg, #161c28 0%, #0c0f16 100%);
}
.msbs-root.bg-night { --msbs-ink: #e9eef7; }
.msbs-root.bg-night .msbs-hint { color: rgba(220,230,245,0.6) !important; }

/* =============================================================
 * 선반 테마 (.msbs-shelf-ledge) — 프리미엄 · 3D 두께 표현
 * ============================================================= */
/* classic: 기본값 사용 */

/* 우드(3D) — 라이트 오크 판자 */
.msbs-root.shelf-wood .msbs-shelf-ledge {
    height: 20px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 4px, rgba(0,0,0,0.06) 4px 10px),
        linear-gradient(180deg, #a06e44 0%, #7f5330 58%, #5f3d21 100%);
    box-shadow:
        0 -2px 6px rgba(0,0,0,0.14),
        0 13px 28px -6px rgba(45,28,12,0.55);
}
.msbs-root.shelf-wood .msbs-shelf-ledge::before {
    background: linear-gradient(180deg, rgba(255,238,214,0.55), transparent);
}
.msbs-root.shelf-wood .msbs-shelf-ledge::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
    background: linear-gradient(180deg, #57371e, #3c2612);
    box-shadow: 0 7px 14px -4px rgba(0,0,0,0.45);
}

/* 월넛(3D) — 짙은 호두나무 + 두꺼운 전면 */
.msbs-root.shelf-walnut .msbs-shelf-ledge {
    height: 20px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 3px, rgba(0,0,0,0.10) 3px 11px),
        linear-gradient(180deg, #5a3a22 0%, #3f2814 60%, #2e1c0e 100%);
    box-shadow:
        inset 0 1px 0 rgba(215,165,115,0.4),
        0 -2px 6px rgba(0,0,0,0.15),
        0 14px 30px -6px rgba(30,16,6,0.6);
}
.msbs-root.shelf-walnut .msbs-shelf-ledge::before {
    background: linear-gradient(180deg, rgba(222,177,127,0.5), transparent);
}
.msbs-root.shelf-walnut .msbs-shelf-ledge::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
    background: linear-gradient(180deg, #341f10, #20130a);
    box-shadow: 0 9px 18px -4px rgba(0,0,0,0.55);
}

/* 마블(3D) — 대리석 슬랩 선반 */
.msbs-root.shelf-marble .msbs-shelf-ledge {
    height: 16px;
    background:
        linear-gradient(120deg, transparent 40%, rgba(150,160,172,0.30) 41.5%, transparent 43.5%),
        linear-gradient(180deg, #f7f8fa 0%, #dfe3e9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 12px 26px -8px rgba(60,70,84,0.45);
}
.msbs-root.shelf-marble .msbs-shelf-ledge::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent);
}
.msbs-root.shelf-marble .msbs-shelf-ledge::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
    background: linear-gradient(180deg, #cbd1d9, #aab2bd);
    box-shadow: 0 7px 14px -5px rgba(60,70,84,0.4);
}

/* 유리(3D) — 반투명 글래스 + 하단 반사 */
.msbs-root.shelf-glass .msbs-shelf-ledge {
    height: 13px;
    background: linear-gradient(180deg, rgba(255,255,255,0.60) 0%, rgba(205,222,232,0.30) 48%, rgba(255,255,255,0.14) 100%);
    border-top: 1px solid rgba(255,255,255,0.85);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7),
        0 12px 24px -10px rgba(70,100,120,0.5);
}
.msbs-root.shelf-glass .msbs-shelf-ledge::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.7), transparent);
}
.msbs-root.shelf-glass .msbs-shelf-ledge::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px;
    background: linear-gradient(180deg, rgba(200,225,235,0.4), rgba(200,225,235,0));
}

/* 브라스(3D) — 럭셔리 골드 메탈 */
.msbs-root.shelf-brass .msbs-shelf-ledge {
    height: 13px;
    background: linear-gradient(180deg, #f6e6ad 0%, #dcb861 42%, #a97f30 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,251,224,0.8),
        0 11px 24px -8px rgba(95,63,12,0.5);
}
.msbs-root.shelf-brass .msbs-shelf-ledge::before {
    background: linear-gradient(180deg, rgba(255,250,220,0.85), transparent);
}
.msbs-root.shelf-brass .msbs-shelf-ledge::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px;
    background: linear-gradient(180deg, #9c7328, #74551b);
}

/* 펠트(2D) — 스티치 원단 */
.msbs-root.shelf-felt .msbs-shelf-ledge {
    height: 18px;
    background: linear-gradient(180deg, #cbba8d 0%, #b6a274 100%);
    border-top: 2px dashed rgba(255,255,255,0.65);
    box-shadow:
        inset 0 0 0 2px rgba(120,100,70,0.22),
        0 11px 24px -8px rgba(45,38,26,0.5);
}
.msbs-root.shelf-felt .msbs-shelf-ledge::before {
    top: 4px;
    height: 0;
    border-top: 1px dashed rgba(120,100,70,0.45);
    background: none;
}

/* 미니멀(2D) — 얇은 라인 선반 */
.msbs-root.shelf-minimal .msbs-shelf-ledge {
    height: 2px;
    background: rgba(0,0,0,0.22);
    box-shadow: 0 10px 22px -14px rgba(0,0,0,0.45);
}
.msbs-root.shelf-minimal .msbs-shelf-ledge::before { background: none; }
.msbs-root.bg-night.shelf-minimal .msbs-shelf-ledge,
.msbs-root.bg-library.shelf-minimal .msbs-shelf-ledge { background: rgba(255,255,255,0.28); }

/* ── 개별 책 ── */
.msbs-book {
    position: relative;
    flex: 0 0 auto;
    height: var(--book-h, 360px);
    width: var(--spine-w, 46px);
    transform-style: preserve-3d;
    transform-origin: bottom center;
    will-change: transform;
    cursor: pointer;
}

/* 바닥 그림자 (책 아래) */
.msbs-book__shadow {
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: calc(var(--spine-w, 46px) + 10px);
    height: 16px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(30,24,18,0.42), transparent 72%);
    filter: blur(3px);
    z-index: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* 경첩(책등 우측)을 축으로 회전하는 3D 래퍼 */
.msbs-book__flip {
    position: relative;
    width: var(--spine-w, 46px);
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: right center;
    /* --open-deg : JS가 0(닫힘) → 음수(펼침)로 구동 */
    transform: rotateY(var(--open-deg, 0deg));
}

/* 책등 (기본 정면) */
.msbs-book__spine {
    position: absolute;
    inset: 0;
    width: var(--spine-w, 46px);
    border-radius: 2px 3px 3px 2px;
    background: var(--spine-bg, #3d5a80);
    color: var(--spine-fg, #fff);
    overflow: hidden;
    backface-visibility: hidden;
    box-shadow:
        inset 2px 0 3px rgba(255,255,255,0.18),
        inset -3px 0 6px rgba(0,0,0,0.30);
}
/* 책등 종이질감 · 상단 페이지 결 */
.msbs-book__spine::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.16) 0%, transparent 14%, transparent 84%, rgba(0,0,0,0.22) 100%);
    pointer-events: none;
}
/* 책등 상단 종이 단면(페이지 결) — 은은하게 노출 */
.msbs-book__spine::after {
    content: "";
    position: absolute;
    top: 0; left: 2px; right: 2px;
    height: 5px;
    border-radius: 2px 2px 0 0;
    background: repeating-linear-gradient(90deg, #f2ecdf 0 1px, #dcd3c0 1px 2px);
    box-shadow: inset 0 -1px 2px rgba(90,70,40,0.35);
    opacity: .55;
}
.msbs-book__spine-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: "Georgia", "Noto Serif KR", serif;
    font-weight: 600;
    font-size: clamp(11px, 1.05vw, 14px);
    letter-spacing: 0.02em;
    padding: 14px 0 26px;
    text-align: center;
    line-height: 1.05;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
    overflow: hidden;
    max-height: 100%;
}
/* 책등 카테고리 라벨 (옵션 spine_cat) — 상단 작은 세로 뱃지, 제목 위에 얹힘 */
.msbs-book__spine-cat {
    position: absolute;
    left: 50%; top: 18px;
    transform: translateX(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1;
    padding: 6px 2px;
    border: 1px solid currentColor;
    border-radius: 7px;
    opacity: 0.8;
    background: var(--spine-bg, transparent);
    max-height: 32%;
    overflow: hidden;
    white-space: nowrap;
    z-index: 2;
    font-family: -apple-system, sans-serif;
    pointer-events: none;
}
.msbs-faceout__spine .msbs-book__spine-cat { font-size: 8px; max-height: 28%; }

.msbs-book__spine-author {
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    justify-content: center;
    font-size: 9px;
    opacity: 0.72;
    font-family: -apple-system, sans-serif;
    letter-spacing: 0.04em;
    max-height: 90px;
    overflow: hidden;
}

/* 표지 (경첩에서 펼쳐져 드러남) */
.msbs-book__cover {
    position: absolute;
    top: 0;
    left: var(--spine-w, 46px);
    width: var(--cover-w, 250px);
    height: 100%;
    transform-origin: left center;
    transform: rotateY(90deg);
    backface-visibility: hidden;
    border-radius: 2px 4px 4px 2px;
    background: var(--cover-bg, #3d5a80);
    color: var(--cover-fg, #fff);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        6px 8px 26px -6px rgba(20,16,12,0.55);
    overflow: hidden;
}
.msbs-book__cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 이미지 없을 때 타이포 표지 */
.msbs-book__cover-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 20px;
    background:
        linear-gradient(160deg, rgba(255,255,255,0.10), rgba(0,0,0,0.14)),
        var(--cover-bg, #3d5a80);
}
.msbs-book__cover-fallback .cf-top {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.7;
}
.msbs-book__cover-fallback .cf-title {
    font-family: "Georgia", "Noto Serif KR", serif;
    font-size: clamp(17px, 1.7vw, 25px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.01em;
}
.msbs-book__cover-fallback .cf-author {
    font-size: 12px;
    opacity: 0.82;
    letter-spacing: 0.02em;
}
/* 표지 위 광택 */
.msbs-book__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(255,255,255,0.20) 0%, transparent 30%, transparent 88%, rgba(0,0,0,0.16) 100%);
    pointer-events: none;
}

/* 호버 림라이트 — 펼쳐진 표지에 따뜻한 테두리 광 */
.msbs-book.is-open-hint .msbs-book__cover {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.14),
        0 0 0 1px rgba(255,235,200,0.28),
        10px 14px 40px -8px rgba(20,16,12,0.62),
        0 0 34px -6px rgba(255,220,160,0.35);
    transition: box-shadow .25s ease;
}
.msbs-book.is-open-hint .msbs-book__spine {
    box-shadow:
        inset 2px 0 3px rgba(255,255,255,0.28),
        inset -3px 0 6px rgba(0,0,0,0.30);
}

/* NEW 리본 — 메탈릭 크림슨 사선 리본 + 골드 헤어라인 */
.msbs-book__ribbon {
    position: absolute;
    top: 12px;
    left: -32px;
    z-index: 3;
    transform: rotate(-45deg);
    background: linear-gradient(180deg, #f0563c 0%, #d3301f 58%, #b02315 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.22em;
    padding: 4px 36px;
    border-top: 1px solid rgba(255,230,180,0.85);
    border-bottom: 1px solid rgba(120,20,10,0.6);
    text-shadow: 0 1px 1px rgba(90,10,5,0.5);
    box-shadow: 0 4px 10px rgba(60,10,5,0.35);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.msbs-book.is-open-hint .msbs-book__ribbon { opacity: 1; }
/* 책등 상태 — 골드 링 시그널 도트 */
.msbs-book__newdot {
    position: absolute;
    top: 9px; left: 50%;
    width: 8px; height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ff9d7e, #e2432c 70%);
    box-shadow:
        0 0 0 1.5px rgba(255,214,150,0.9),
        0 0 0 3px rgba(0,0,0,0.18),
        0 2px 5px rgba(0,0,0,0.35);
    z-index: 4;
    animation: msbs-pulse 2.4s ease-in-out infinite;
}
@keyframes msbs-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 1.5px rgba(255,214,150,0.9), 0 0 0 3px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.35); }
    50% { transform: scale(1.25); box-shadow: 0 0 0 1.5px rgba(255,214,150,1), 0 0 0 6px rgba(226,67,44,0.18), 0 2px 6px rgba(0,0,0,0.35); }
}

/* ── 표지 정면 3D 책 (목업 스타일) ── */
.msbs-book--faceout {
    /* 왼쪽엔 책등이 앞으로 나오므로 여유, 오른쪽은 최소 여백(겹치지 않을 정도) */
    margin: 0 6px 0 22px;
    perspective: 1200px;             /* 자체 원근 → 책등 두께가 실제로 보임 */
    perspective-origin: 42% 45%;
    transform-style: flat;           /* 바깥은 평면화, 원근은 이 요소가 제공 */
}
.msbs-faceout {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: center center;
    /* --fo-rot : JS가 기본 28도(왼쪽 모서리가 앞으로) → 호버 시 8도로 구동 */
    transform: rotateY(var(--fo-rot, 28deg)) rotateX(1.5deg);
    transition: transform .08s linear;
}
/* 앞표지 */
.msbs-faceout__front {
    position: absolute;
    inset: 0;
    border-radius: 1px 4px 4px 1px;
    background: #eee;
    overflow: hidden;
    backface-visibility: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.08),
        0 22px 40px -18px rgba(20,16,12,0.6);
    /* 오른쪽(펼침 반대쪽) 페이지 결 느낌 */
    border-right: 2px solid rgba(255,255,255,0.5);
}
.msbs-faceout__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.msbs-faceout__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 18px;
    background:
        linear-gradient(160deg, rgba(255,255,255,0.10), rgba(0,0,0,0.14)),
        var(--cover-bg, #3d5a80);
}
.msbs-faceout__fallback .cf-top { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7; }
.msbs-faceout__fallback .cf-title { font-family: "Georgia", "Noto Serif KR", serif; font-size: clamp(16px, 1.6vw, 23px); font-weight: 700; line-height: 1.14; }
.msbs-faceout__fallback .cf-author { font-size: 12px; opacity: 0.82; }
/* 표지 광택 */
.msbs-faceout__gloss {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(255,255,255,0.22) 0%, transparent 26%, transparent 86%, rgba(0,0,0,0.14) 100%);
    pointer-events: none;
}
/* 왼쪽 책등(옆면) — 표지 왼쪽 모서리를 경첩으로 뒤로 접혀 옆면이 됨 */
.msbs-faceout__spine {
    position: absolute;
    top: 0;
    right: 100%;                     /* 표지 왼쪽 모서리 바로 바깥에 붙임 */
    height: 100%;
    width: var(--fo-thick, 26px);
    transform-origin: right center;  /* 모서리(경첩)에서 회전 */
    transform: rotateY(-80deg);      /* 뒤(-Z)로 접혀 옆면이 됨 */
    background: linear-gradient(90deg, rgba(0,0,0,0.32), rgba(0,0,0,0.08) 70%), var(--spine-bg, #3d5a80);
    color: var(--spine-fg, #fff);
    border-radius: 3px 0 0 3px;
    box-shadow: inset -2px 0 6px rgba(0,0,0,0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.msbs-faceout__spine-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: "Georgia", "Noto Serif KR", serif;
    font-weight: 600;
    font-size: clamp(9px, 0.85vw, 12px);
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-height: 84%;
    overflow: hidden;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
/* NEW 원형 씰 배지 (정면 책) — 골드 링 왁스 씰 스타일 */
.msbs-faceout__ribbon {
    position: absolute;
    top: -13px;
    left: -13px;
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    transform: translateZ(6px) rotate(-12deg);
    background: radial-gradient(circle at 32% 26%, #ff7a60, #d3301f 62%, #a81d10 100%);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 1px rgba(90,10,5,0.5);
    box-shadow:
        0 6px 14px rgba(60,10,5,0.4),
        inset 0 0 0 1.5px rgba(255,222,170,0.9),
        inset 0 0 0 4px rgba(168,29,16,0.4),
        inset 0 -6px 10px rgba(120,15,8,0.45),
        inset 0 5px 8px rgba(255,255,255,0.22);
    pointer-events: none;
}
.msbs-book--faceout .msbs-book__shadow {
    width: calc(var(--fo-thick, 30px) + 100%);
    bottom: -8px;
    filter: blur(5px);
}

/* ── 비스듬히 기댄 책 (기울기는 JS transform, 좌우 여백 확보) ── */
.msbs-book--tilt {
    margin: 0 clamp(12px, 1.6vw, 26px);
}

/* ── 힌트 (유리 필) ── */
.msbs-hint {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 10px;
    width: max-content;
    max-width: calc(100% - 32px);
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: #4b5563;
    z-index: 8;
    pointer-events: none;
    opacity: 0.92;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 6px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 14px -6px rgba(30,24,16,0.25);
}

/* =============================================================
 * 상세 오버레이 (클릭 → 책 펼침)
 * ============================================================= */
.msbs-detail {
    position: fixed;
    inset: 0;
    z-index: 999999;
    /* body 직속으로 붙는 팝업 — limud-header 가 body 에 line-height:0 !important 를 걸어 두어
       (헤더 아래 틈 제거용) 그대로 상속되면 «About this book» 같은 한 줄 글자가 높이 0 으로 잘린다 */
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    background: rgba(18, 20, 26, 0);
    backdrop-filter: blur(0px);
    transition: background .45s ease, backdrop-filter .45s ease;
    opacity: 0;
    pointer-events: none;
}
.msbs-detail.is-active {
    opacity: 1;
    pointer-events: auto;
    background:
        radial-gradient(60% 50% at 50% 42%, rgba(255,244,220,0.10), transparent 70%),
        radial-gradient(120% 120% at 50% 50%, rgba(18,20,26,0.55) 40%, rgba(8,9,12,0.82) 100%);
    backdrop-filter: blur(9px) saturate(0.9);
    -webkit-backdrop-filter: blur(9px) saturate(0.9);
}

.msbs-detail__stage {
    position: relative;
    perspective: 2600px;
    width: min(960px, 92vw);
    max-height: 90vh;
}

/* 펼쳐지는 책 */
.msbs-openbook {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10.5;
    transform-style: preserve-3d;
    transform: translateY(24px) scale(0.94);
    opacity: 0;
    transition: transform .5s cubic-bezier(.16,.84,.34,1), opacity .4s ease;
}
.msbs-detail.is-active .msbs-openbook {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* 책 아래 바닥 그림자 (안착감) */
.msbs-openbook__ground {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -5%;
    height: 12%;
    background: radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,0.5), transparent 72%);
    filter: blur(14px);
    opacity: 0;
    transition: opacity .55s ease .1s;
    z-index: 0;
    pointer-events: none;
}
.msbs-detail.is-active .msbs-openbook__ground { opacity: 1; }

/* 오른쪽: 내지(본문 페이지) — 오른쪽 가장자리에 페이지 결 스택 */
.msbs-openbook__page {
    position: absolute;
    top: 0; right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, #efe7d6 0%, #faf6ec 8%, #fdfbf5 100%);
    border-radius: 0 8px 8px 0;
    box-shadow:
        inset 16px 0 30px -16px rgba(80,60,30,0.4),
        1px 0 0 #efe7d3,
        3px 1px 0 #e7dcc4,
        5px 1px 0 #ded2b7,
        7px 2px 0 #d5c8aa,
        9px 2px 0 #cebf9f,
        0 44px 90px -34px rgba(0,0,0,0.62);
    padding: clamp(24px, 3.4vw, 52px);
    padding-left: clamp(34px, 4.2vw, 64px);
    overflow-y: auto;
    color: #2a2620;
    z-index: 1;
}
/* 왼쪽: 표지(펼쳐지는 앞표지) — 경첩 왼쪽 */
.msbs-openbook__cover {
    position: absolute;
    top: 0; left: 50%;                 /* 닫힌 책: 오른쪽 절반(본문 위)을 덮음 */
    width: 50%;
    height: 100%;
    transform-origin: left center;     /* 책등(스프레드 중앙)이 경첩 */
    transform-style: preserve-3d;
    /* --swing : JS 물리 스프링이 0(닫힘) → -168deg(펼침) 구동 */
    transform: rotateY(var(--swing, 0deg));
    z-index: 3;
}
.msbs-openbook__cover-face,
.msbs-openbook__cover-back {
    position: absolute;
    inset: 0;
    border-radius: 0 8px 8px 0;
    backface-visibility: hidden;
    overflow: hidden;
}
/* 바깥 표지면 */
.msbs-openbook__cover-face {
    background: var(--cover-bg, #3d5a80);
    color: var(--cover-fg, #fff);
    box-shadow:
        inset 14px 0 26px -14px rgba(0,0,0,0.5),
        14px 18px 50px -12px rgba(10,8,6,0.6);
}
.msbs-openbook__cover-face img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.msbs-openbook__cover-face .cf-wrap {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(22px, 3vw, 40px);
    background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(0,0,0,0.18));
}
.msbs-openbook__cover-face .cf-eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.75; }
.msbs-openbook__cover-face .cf-title { font-family: "Georgia","Noto Serif KR",serif; font-size: clamp(22px, 2.6vw, 40px); font-weight: 700; line-height: 1.12; }
.msbs-openbook__cover-face .cf-author { font-size: 14px; opacity: 0.85; }
/* 안쪽 표지면(펼쳐진 뒤 왼쪽 페이지가 되는 면지 — 표지 액자 콘텐츠 수용) */
.msbs-openbook__cover-back {
    background: linear-gradient(270deg, #efe7d6 0%, #f7f1e3 10%, #fdfbf5 100%);
    transform: rotateY(180deg);
    box-shadow: inset -16px 0 30px -16px rgba(80,60,30,0.4);
}

/* 왼쪽 페이지 — 표지가 젖혀진 뒤 드러나는 면 (펼친 책의 좌면) */
.msbs-openbook__leftpage {
    position: absolute;
    top: 0; left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(270deg, #efe7d6 0%, #faf6ec 8%, #fdfbf5 100%);
    border-radius: 8px 0 0 8px;
    box-shadow:
        inset -16px 0 30px -16px rgba(80,60,30,0.4),
        -1px 0 0 #efe7d3,
        -3px 1px 0 #e7dcc4,
        -5px 1px 0 #ded2b7,
        -7px 2px 0 #d5c8aa,
        0 44px 90px -34px rgba(0,0,0,0.62);
    z-index: 1;
}
.msbs-lp {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: clamp(24px, 3.4vw, 52px);
}
.msbs-lp__frame {
    width: min(68%, 300px);
    aspect-ratio: 3 / 4;
    background: #fff;
    padding: 10px 10px 14px;
    box-shadow:
        0 18px 40px -14px rgba(60,45,25,0.45),
        0 0 0 1px rgba(120,100,60,0.12);
    transform: rotate(-1.6deg);
}
.msbs-lp__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.msbs-lp__mono {
    width: min(52%, 220px);
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Georgia", "Noto Serif KR", serif;
    font-size: clamp(48px, 6vw, 96px);
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 18px 40px -14px rgba(60,45,25,0.45);
    transform: rotate(-1.6deg);
}
.msbs-lp__caption {
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: #8a7c5f;
    text-align: center;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 책 등(가운데 접힘) */
.msbs-openbook__spine3d {
    position: absolute;
    top: 0; left: 50%;
    width: 16px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(0,0,0,0.28), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.28));
    z-index: 2;
    pointer-events: none;
}

/* 거터(책등) 그림자 — 표지가 펼쳐지며 내지에 드리우는 그림자 (JS가 opacity 구동) */
.msbs-openbook__gutter {
    position: absolute;
    top: 0; left: 50%;
    width: 64px;
    height: 100%;
    background: linear-gradient(90deg, rgba(40,26,12,0.55) 0%, rgba(40,26,12,0.14) 45%, transparent 100%);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* 앞표지 두께(엣지) — 입체감 */
.msbs-openbook__cover-edge {
    position: absolute;
    top: 0; left: 0;
    width: 8px;
    height: 100%;
    transform-origin: left center;
    transform: rotateY(-90deg) translateZ(-4px);
    background: linear-gradient(180deg, #cbb98f, #b39a63);
    border-radius: 3px 0 0 3px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    backface-visibility: hidden;
}

/* 본문 페이지 콘텐츠 */
.msbs-page__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #a98b52;
    font-weight: 700;
    margin-bottom: 12px;
}
.msbs-page__title {
    font-family: "Georgia", "Noto Serif KR", serif;
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: #221f18;
}
.msbs-page__author {
    font-size: 14px;
    color: #6f6650;
    margin-bottom: 20px;
    font-style: italic;
}
.msbs-page__rule {
    width: 52px; height: 3px;
    background: linear-gradient(90deg, #c9a24b, #e8cf8e 60%, rgba(232,207,142,0.2));
    border-radius: 2px;
    margin: 0 0 20px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.msbs-page__summary {
    font-size: 15px;
    line-height: 1.85;
    color: #3b3428;
    white-space: pre-wrap;
}
.msbs-page__summary p { margin: 0 0 1em; }
.msbs-page__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
/* 이북 보기 — 골드 프리미엄 필 (테마 button 스타일 완전 리셋 후 고정) */
.msbs-openbook__page .msbs-page__ebook,
.msbs-openbook__page button.msbs-page__ebook {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    padding: 13px 24px;
    font-family: inherit;
    line-height: 1.2;
    background: linear-gradient(135deg, #b8903a 0%, #d8b25e 55%, #c9a24b 100%) !important;
    color: #241c0d !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255,240,200,0.75) !important;
    border-radius: 999px !important;
    cursor: pointer;
    text-decoration: none !important;
    outline: none !important;
    box-shadow:
        0 14px 30px -10px rgba(150,110,40,0.6),
        inset 0 1px 0 rgba(255,255,255,0.45) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.msbs-openbook__page .msbs-page__ebook:hover,
.msbs-openbook__page .msbs-page__ebook:focus,
.msbs-openbook__page .msbs-page__ebook:focus-visible,
.msbs-openbook__page .msbs-page__ebook:active {
    background: linear-gradient(135deg, #c39a42 0%, #e2bd68 55%, #d3ac53 100%) !important;
    color: #241c0d !important;
    border-color: rgba(255,244,210,0.9) !important;
    outline: none !important;
    transform: translateY(-2px);
    box-shadow:
        0 18px 36px -10px rgba(150,110,40,0.7),
        0 0 22px -6px rgba(226,195,124,0.55),
        inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.msbs-openbook__page .msbs-page__ebook.is-loading { opacity: 0.6; cursor: wait; transform: none; }
.msbs-page__ebook-ic { font-size: 16px; line-height: 1; }

/* 버튼 내 가격 태그 */
.msbs-page__ebook-price {
    margin-left: 4px;
    padding: 4px 11px;
    background: rgba(36,28,13,0.85);
    color: #f0dfb2 !important;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-radius: 999px;
    line-height: 1.2;
}
.msbs-page__ebook-price--free {
    background: rgba(255,255,255,0.55);
    color: #6b5a2e !important;
}
.msbs-page__ebook-note {
    flex-basis: 100%;
    margin-top: 8px;
    font-size: 12px;
    color: #8a7c5f;
    letter-spacing: 0.02em;
}

.msbs-page__course {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    padding: 13px 24px;
    background: linear-gradient(135deg, #1d2733 0%, #34506f 55%, #3d5a80 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 999px;
    border: 1px solid rgba(201,162,75,0.55);
    text-decoration: none;
    box-shadow:
        0 14px 30px -10px rgba(24,34,46,0.75),
        inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.msbs-page__course:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(38,49,63,0.85);
}
.msbs-page__course::after { content: "→"; font-size: 15px; }

/* 닫기 */
.msbs-detail__close {
    position: absolute;
    top: -16px; right: -16px;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 26px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.msbs-detail__close:hover {
    transform: rotate(90deg) scale(1.06);
    background: rgba(255,255,255,0.26);
}

/* 빈 상태 */
.msbs-empty {
    text-align: center;
    padding: 80px 20px;
    color: #6b7280;
    font-size: 15px;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
    /* 모바일: 중앙에 놓인 닫힌 책 — 앞표지가 왼쪽 경첩(책등)으로 열리며 본문이 드러난다 */
    .msbs-detail { padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); align-items: center; }
    .msbs-detail__stage { width: min(420px, 92vw); max-height: none; perspective: 1600px; }
    .msbs-openbook {
        aspect-ratio: auto;
        height: min(74vh, 620px);
        transform: translateY(26px) scale(0.95);
    }
    .msbs-detail.is-active .msbs-openbook { transform: none; }
    /* 스프레드 부속(왼쪽 페이지·3D 책등·중앙 거터)은 단일 페이지 구조라 제외 */
    .msbs-openbook__leftpage,
    .msbs-openbook__spine3d,
    .msbs-openbook__gutter { display: none !important; }
    /* 본문 페이지 = 컨테이너 전체 (펼친 책의 오른쪽 면) */
    .msbs-openbook__page {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px 14px 14px 8px;
        padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
        box-shadow:
            inset 14px 0 26px -14px rgba(80,60,30,0.42),
            2px 1px 0 #e7dcc4,
            4px 2px 0 #d5c8aa,
            0 30px 70px -26px rgba(0,0,0,0.65);
        -webkit-overflow-scrolling: touch;
    }
    /* 앞표지 = 본문 전체를 덮고 왼쪽 모서리를 경첩으로 회전 (JS --swing 스프링 구동) */
    .msbs-openbook__cover {
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px 14px 14px 8px;
    }
    .msbs-openbook__cover-face,
    .msbs-openbook__cover-back { border-radius: inherit; }
    .msbs-openbook__cover-face { box-shadow: inset 10px 0 22px -12px rgba(0,0,0,0.55), 10px 14px 40px -12px rgba(10,8,6,0.55); }
    /* 닫기: PC 는 어두운 배경 위 유리 버튼이지만, 모바일은 크림색 페이지 위라 흰 원+잉크색 × 로 */
    .msbs-detail__close {
        top: 10px; right: 12px; width: 40px; height: 40px;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.10);
        color: #2F3A4A;
        font-size: 21px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 6px 18px -6px rgba(0,0,0,0.45);
    }
    .msbs-detail__close:hover { background: #fff; color: #B3262E; }
    .msbs-page__course { width: 100%; justify-content: center; }
    .msbs-hint { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .msbs-openbook,
    .msbs-detail,
    .msbs-book__ribbon { transition: none !important; }
}

/* ══════════ 카테고리 페이지 레이아웃 (layout="page") ══════════ */
.msbs-page-layout {
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 16px 34px;
}
.msbs-pl__sec { position: relative; padding: 18px 0 30px; }
.msbs-pl__head {
    display: flex; align-items: center; gap: 10px;
    margin: 0 4px 14px;
}
.msbs-pl__icon {
    width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(0,0,0,.14);
}
.msbs-pl__icon--txt {
    display: inline-flex; align-items: center; justify-content: center;
    background: #1B3C6E; color: #fff; font-weight: 800; font-size: 14px;
}
.msbs-pl__name {
    margin: 0; font-size: 19px; font-weight: 800; letter-spacing: .10em;
    color: #2F3A4A; text-transform: uppercase;
    font-family: "Georgia", "Noto Serif KR", serif;
}
.msbs-pl__count { margin-left: auto; font-size: 13px; color: #8A94A3; white-space: nowrap; }
.msbs-pl__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 18px 14px;
    align-items: end;
    padding: 0 4px;
}
.msbs-pl__card {
    position: relative; display: block; width: 100%;
    padding: 0; border: 0; background: none; cursor: pointer;
    transition: transform .18s ease;
}
.msbs-pl__card:hover { transform: translateY(-6px); }
.msbs-pl__cover {
    display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: 4px 8px 8px 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,.22), 0 12px 22px -12px rgba(0,0,0,.38);
    transition: box-shadow .18s ease;
}
.msbs-pl__card:hover .msbs-pl__cover {
    box-shadow: 0 6px 12px rgba(0,0,0,.26), 0 20px 34px -14px rgba(0,0,0,.45);
}
.msbs-pl__cover--txt {
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 10px; font-weight: 800; font-size: 13px; line-height: 1.4; word-break: keep-all;
}
.msbs-pl__card.is-featured::after {
    content: ""; position: absolute; top: 6px; right: 6px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #E2C37C; box-shadow: 0 0 0 2px rgba(0,0,0,.18);
}
.msbs-pl__ledge {
    height: 14px; margin-top: -2px; border-radius: 3px;
    background: linear-gradient(180deg, #C9A87C, #A9835A 55%, #8A6A48);
    box-shadow: 0 6px 10px -4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.msbs-pl__empty { padding: 46px 16px; text-align: center; color: #8A94A3; }
@media (max-width: 560px) {
    .msbs-pl__grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 10px; }
    .msbs-pl__name { font-size: 16px; }
}