.card-book-page {--cb-bg: #222d38;--cb-surf: #2c3946;--cb-fg: #e8eef4;--cb-mut: #a7b4c2;--cb-line: #3d4c5b;--cb-acc: #0e7490;--cb-pg-bg: #3b4b59;--cb-pg-line: rgba(255, 255, 255, 0.16);--cb-hd-fg: #e9e2cf;--cb-emp-line: rgba(255, 255, 255, 0.34);--cb-emp-fg: rgba(255, 255, 255, 0.62);--cb-emp-bg: rgba(255, 255, 255, 0.05);--cb-hd-h: 34px;--cb-no-h: 22px;min-height: 100%;padding: 12px 12px 28px;background: var(--cb-bg);color: var(--cb-fg);overflow-wrap: anywhere}
.card-book-page [hidden] { display: none !important; }
.card-book-page :focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.cb-header {max-width: 456px; margin: 0 auto 8px;display: flex; align-items: center; justify-content: flex-end; gap: 12px}
.cb-header-link {flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;border-radius: 999px; border: 1px solid var(--cb-line); background: var(--cb-surf);color: var(--cb-fg); font-size: 12.5px; font-weight: 700; text-decoration: none}
.cb-empty {max-width: 456px; margin: 16px auto 0; padding: 24px 16px; text-align: center;border: 1px dashed var(--cb-line); border-radius: 12px}
.cb-empty-lead { margin: 0; font-size: 14px; font-weight: 800; }
.cb-empty-desc { margin: 6px 0 0; font-size: 12px; color: var(--cb-mut); }
.card-book-page .fcards-ways { max-width: 456px; margin: 16px auto 0; }
.cb-stage { max-width: 456px; margin: 0 auto; }
.cb-toc {display: flex; align-items: flex-end; gap: 4px; height: 52px; padding: 0 14px;overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch}
.cb-toc::-webkit-scrollbar { display: none; }
.cb-tab {flex: none; position: relative; height: 44px; min-width: 68px; padding: 0 14px 4px;border: 0; border-radius: 3px 3px 0 0; background: var(--tab); color: #3b3324;font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer;filter: brightness(0.82) saturate(0.85);box-shadow: inset 0 -8px 10px -8px rgba(0, 0, 0, 0.28), 0 -1px 2px rgba(0, 0, 0, 0.18);transition: height 0.15s ease, filter 0.15s ease}
.cb-tab::before {content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-radius: 3px 3px 0 0;background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0))}
.cb-tab[aria-pressed="true"] { height: 52px; filter: none; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.22); }
.cb-binder {position: relative; padding: 8px; border-radius: 16px;background: radial-gradient(120% 80% at 20% 0%, #2c5f7a, #17394d 55%, #0f2636);box-shadow: 0 16px 32px -14px rgba(5, 20, 35, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.05)}
.cb-binder::before {content: ""; position: absolute; inset: 4px; pointer-events: none;border: 1.5px dashed rgba(245, 220, 160, 0.42); border-radius: 12px}
.cb-track {display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 8px; -webkit-overflow-scrolling: touch}
.cb-track::-webkit-scrollbar { display: none; }
.cb-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.cb-filler { display: none; }
.cb-paper {position: relative; padding: 0 8px; border-radius: 8px;background: var(--cb-pg-bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06)}
.cb-hd {height: var(--cb-hd-h); min-width: 0;display: flex; justify-content: space-between; align-items: center; gap: 8px;font-size: 12px; font-weight: 800; color: var(--cb-hd-fg)}
.cb-hd span:last-child { flex: none; color: var(--cb-mut); font-variant-numeric: tabular-nums; }
.cb-note {max-width: 70%; height: calc(var(--cb-hd-h) - 10px); min-width: 0;display: inline-flex; align-items: center; padding: 0 10px; border-radius: 2px;background: var(--tab); color: #3b3324; transform: rotate(-1.5deg);white-space: nowrap; overflow: hidden; text-overflow: ellipsis;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25), inset 0 6px 6px -6px rgba(255, 255, 255, 0.6)}
.cb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cb-pgno {height: var(--cb-no-h); display: flex; align-items: center; justify-content: center;font-size: 11px; color: var(--cb-mut); font-variant-numeric: tabular-nums}
.cb-pk {position: relative; display: block; width: 100%; min-width: 0; margin: 0; padding: 5px 6px 6px;overflow: hidden; border-radius: 8px; border: 1px solid var(--cb-pg-line);border-top: 2px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.07);text-align: left; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent}
.cb-pk::after {content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit;background: linear-gradient(115deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 26%, rgba(255, 255, 255, 0) 27%,
rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.11) 51%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0) 63%)}
button.cb-pk { cursor: pointer; }
button.cb-pk:active .fcard { filter: brightness(0.9); }
.cb-box { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; container-type: inline-size; }
.cb-ghost.fcard {position: absolute; inset: 0; padding: 0; aspect-ratio: auto; border-radius: 7% / 5%;background: var(--fc-edge); filter: brightness(0.62) saturate(0.8); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)}
.cb-ghost--1.fcard { transform: translate(2px, 2px); }
.cb-ghost--2.fcard { transform: translate(4px, 4px); filter: brightness(0.45) saturate(0.7); }
.cb-count {position: absolute; z-index: 8; top: 5px; left: 5px; min-width: 24px; height: 22px; padding: 0 7px;display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;font-size: 12px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;background: rgba(8, 18, 30, 0.86); border: 1.5px solid rgba(255, 255, 255, 0.85); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4)}
.cb-emp {position: absolute; inset: 0; min-width: 0; padding: 4cqw; border-radius: 7% / 5%;display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center}
.cb-emp--unissued {gap: 1.5cqw; padding-bottom: 38cqw;background: linear-gradient(180deg, rgba(120, 170, 205, 0.16), rgba(120, 170, 205, 0.06));border: 1.5px solid color-mix(in srgb, var(--cb-emp-line) 70%, #7db4d6)}
.cb-emp--unissued svg { width: 50%; height: auto; color: rgba(120, 165, 200, 0.42); }
.cb-emp-name {max-width: 100%; font-size: max(9.5px, 7.2cqw); font-weight: 800; color: var(--cb-emp-fg); opacity: 0.85;white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.cb-emp--empty { border: 1.8px dashed var(--cb-emp-line); background: var(--cb-emp-bg); }
.cb-cta-form { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; z-index: 10; margin: 0; }
.cb-cta {width: 100%; min-height: 44px; padding: 3px 4px; border: 0; border-radius: 10px; cursor: pointer;display: flex; align-items: center; justify-content: center; text-align: center;font: inherit; font-size: max(9.5px, 5.6cqw); font-weight: 800; line-height: 1.25; color: #fff;background: linear-gradient(135deg, #0891b2, #2563eb); box-shadow: 0 3px 8px rgba(8, 100, 160, 0.35)}
.cb-box .fcard {position: absolute; inset: 0; width: auto; aspect-ratio: auto;border-radius: 7% / 5%; padding: 2cqw;--fc-glow: 0 5px 14px -6px rgba(10, 20, 35, 0.5)}
.cb-box .fcard.r-lr { padding: 2.5cqw; }
.cb-box .fcard-in { border-radius: 5cqw; }
.cb-box .fc-glare { border-radius: 7cqw; }
.cb-box .fc-illustration:not(.fc-photo) { border-radius: 4cqw; box-shadow: 0 4px 10px rgba(2, 12, 24, 0.55); }
.cb-box .fc-serial,
.cb-box .fc-memorial { top: 3.5cqw; font-size: 4.4cqw; padding: 0.8cqw 3.6cqw; }
.cb-box .fc-serial { right: 3.5cqw; }
.cb-box .fc-memorial { left: 3.5cqw; }
.cb-box .fc-stars { left: 4cqw; bottom: 4cqw; gap: 1.2cqw; }
.cb-box .fc-star { width: max(7px, 6.4cqw); height: max(7px, 6.4cqw); }
.cb-box .fc-band {--fc-cut: 7cqw; --fc-cut-mid: 3cqw; --fc-edge-w: max(1.5px, 1.25cqw);padding: calc(var(--fc-cut) + 1cqw) 5.5cqw 4.5cqw}
.cb-box .fc-name { font-size: max(9.5px, 7cqw); line-height: 1.35; }
.cb-box .fc-foot { display: none; gap: 3cqw; margin-top: 1.5cqw; font-size: 4.3cqw; }
.cb-box .fc-giveaway-ribbon { top: 5.5cqw; left: -15cqw; width: 59cqw; font-size: 4.5cqw; padding: 1.5cqw 0; }
.cb-box .fc-autograph { right: 5cqw; bottom: 4.5cqw; font-size: 8.5cqw; }
.cb-box .fc-engrave { padding: 2.5cqw 5.5cqw 3cqw; font-size: 4.75cqw; }
@container (min-width: 140px) { .cb-box .fc-foot { display: flex; } }
@container (max-width: 100px) { .cb-box .fc-serial { display: none; } }
.cb-cover .cb-grid { visibility: hidden; }
.cb-cover-in {position: absolute; inset: 0; padding: 24px 22px; text-align: center;display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px}
.cb-copy-link {position: absolute; top: 12px; right: 12px; z-index: 2;display: flex; align-items: center; justify-content: center;width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;background: rgba(255, 255, 255, 0.9); color: #606770; cursor: pointer;transition: background-color 0.2s, transform 0.2s}
.cb-copy-link::before { content: ""; position: absolute; inset: -4px; }
.cb-copy-link:hover { background: #fff; transform: scale(1.05); }
.cb-copy-link:active { transform: scale(0.95); }
.cb-copy-link svg { width: 18px; height: 18px; }
.cb-emblem { width: 64px; height: 64px; color: var(--cb-hd-fg); opacity: 0.85; }
.cb-cover-title { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: 0.04em; color: var(--cb-hd-fg); }
.cb-cover-title small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--cb-mut); }
.cb-cover-stats {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;width: 100%; max-width: 300px; margin: 0}
.cb-cover-stats div { padding: 10px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--cb-pg-line); }
.cb-cover-stats dt { font-size: 11.5px; font-weight: 700; color: var(--cb-mut); }
.cb-cover-stats dd {margin: 2px 0 0; font-size: 24px; font-weight: 800; line-height: 1.2;color: var(--cb-fg); font-variant-numeric: tabular-nums}
.cb-cover-stats dd small { margin-left: 2px; font-size: 12px; color: var(--cb-mut); }
.cb-cover-stats--single { grid-template-columns: minmax(0, 1fr); max-width: 120px; }
.cb-memo-form { width: 100%; max-width: 290px; margin: 0; }
.cb-memo {position: relative; margin: 0; padding: 16px 16px 12px; border: 0; border-radius: 2px;background: #fbf6e3 repeating-linear-gradient(transparent 0 25px, rgba(80, 120, 170, 0.22) 25px 26px);background-position: 0 10px; color: #3b3324; text-align: left;transform: rotate(-1deg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3)}
.cb-memo::before {content: ""; position: absolute; top: -9px; left: 50%; width: 76px; height: 20px; margin-left: -38px;background: rgba(240, 225, 170, 0.75); transform: rotate(2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15)}
.cb-memo legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 800; }
.cb-memo label { clear: both; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 700; cursor: pointer; }
.cb-memo input { flex: none; width: 20px; height: 20px; margin: 0; color-scheme: light; accent-color: #b4442f; }
.cb-memo-sub { display: block; font-size: 11px; font-weight: 600; color: #6e6047; }
.cb-memo-submit {margin-top: 4px; min-height: 44px; padding: 0 16px; border-radius: 999px;border: 1px solid #b9a77c; background: #fffdf4; color: #3b3324; font: inherit; font-weight: 700}
.cb-ft { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; align-items: center; height: 64px; margin-top: 8px; }
.cb-nav {width: 52px; height: 48px; padding: 0; border-radius: 14px; border: 1px solid var(--cb-line);background: var(--cb-surf); color: var(--cb-fg); cursor: pointer;display: inline-flex; align-items: center; justify-content: center}
.cb-nav:disabled { opacity: 0.35; cursor: default; }
.cb-nav svg { width: 22px; height: 22px; }
.cb-ftc { min-width: 0; height: 48px; text-align: center; }
.cb-ftc-n { font-size: 22px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cb-ftc-n small { font-size: 14px; font-weight: 700; color: var(--cb-mut); }
.cb-ftc-c { font-size: 12px; line-height: 1.3; color: var(--cb-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-hint { margin: 0; font-size: 11px; color: var(--cb-mut); text-align: center; }
@media (min-width: 1100px) {.card-book-page { --cb-hd-h: 40px; --cb-no-h: 28px; padding: 20px 0 32px; }
.cb-header,
.cb-empty,
.card-book-page .fcards-ways { max-width: 1068px; }
.cb-stage { max-width: none; width: max-content; }
.cb-binder { padding: 20px 24px; border-radius: 20px; }
.cb-binder::before { inset: 7px; border-radius: 15px; }
.cb-track { width: 1028px; }
.cb-page { flex: 0 0 514px; }
.cb-page:nth-child(even) { scroll-snap-align: none; }
.cb-filler { display: block; }
.cb-paper { padding: 0 22px; border-radius: 0; }
.cb-page:nth-child(odd) .cb-paper { border-radius: 8px 0 0 8px; box-shadow: inset -22px 0 18px -16px rgba(0, 0, 0, 0.22); }
.cb-page:nth-child(even) .cb-paper { border-radius: 0 8px 8px 0; box-shadow: inset 22px 0 18px -16px rgba(0, 0, 0, 0.22); }
.cb-grid { grid-template-columns: repeat(3, 150px); gap: 10px; justify-content: center; }
.cb-hd { font-size: 14px; }
.cb-toc { height: 56px; padding: 0 28px; }
.cb-cover-title { font-size: 23px; }
.cb-emblem { width: 80px; height: 80px; }}
.cb-modal { position: fixed; inset: 0; z-index: var(--z-index-modal); display: flex; align-items: flex-end; justify-content: center; }
.cb-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 12, 22, 0.6); opacity: 0; transition: opacity 0.2s ease; }
.cb-sheet {position: relative; width: 100%; max-height: 84vh; max-height: 84dvh;display: flex; flex-direction: column; border-radius: 20px 20px 0 0;background: var(--cb-surf); color: var(--cb-fg); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);transform: translateY(100%); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1)}
.cb-modal.is-open .cb-modal-backdrop { opacity: 1; }
.cb-modal.is-open .cb-sheet { transform: none; }
.cb-grab { flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--cb-line); }
.cb-mhd { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--cb-line); }
.cb-mttl { flex: 1; min-width: 0; }
.cb-mttl h2 { margin: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-mttl p { margin: 0; font-size: 12px; color: var(--cb-mut); }
.cb-mclose {flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;background: transparent; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center}
.cb-mclose:hover { background: var(--cb-line); }
.cb-mclose svg { width: 22px; height: 22px; }
.cb-frame { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cb-frame[busy] { min-height: 160px; }
.cb-mtabs { flex: none; display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--cb-line); }
.cb-mtabs button {min-height: 44px; margin-bottom: -1px; padding: 0 18px; border: 0; border-bottom: 3px solid transparent;background: transparent; color: var(--cb-mut); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer}
.cb-mtabs button[aria-selected="true"] { color: var(--cb-fg); border-bottom-color: var(--cb-acc); }
.cb-mbody { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px 20px; -webkit-overflow-scrolling: touch; }
.cb-mempty { margin: 0; padding: 24px 16px; text-align: center; font-size: 13px; color: var(--cb-mut); }
.cb-mrow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--cb-line); }
.cb-mrow:last-child { border-bottom: 0; }
.cb-mrow.is-top { background: linear-gradient(90deg, color-mix(in srgb, var(--cb-acc) 9%, transparent), transparent); }
.cb-mthumb { flex: none; width: 76px; padding: 0 3px 3px 0; }
.cb-minfo { flex: 1; min-width: 0; }
.cb-mname { font-size: 15px; font-weight: 800; }
.cb-from {max-width: 100%; margin-top: 5px; padding: 3px 9px; border-radius: 999px;display: inline-flex; align-items: center; gap: 5px;font-size: 12px; font-weight: 700; color: #f6d79a; background: rgba(245, 192, 74, 0.14)}
.cb-from svg { flex: none; width: 14px; height: 14px; }
.cb-from span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-mmeta {display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 2px 18px;margin-top: 6px; font-size: 12.5px; color: var(--cb-mut)}
.cb-mmeta b { color: var(--cb-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-mscore { flex: none; min-width: 64px; text-align: right; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cb-mnote {margin: 10px 0 2px; padding: 8px 10px; border-radius: 8px; line-height: 1.5;font-size: 12px; color: var(--cb-mut); background: color-mix(in srgb, var(--cb-acc) 14%, transparent)}
.cb-mmore { margin: 10px 0 0; font-size: 12px; color: var(--cb-mut); text-align: center; }
@media (min-width: 768px) {.cb-modal { align-items: center; }
.cb-sheet {width: min(720px, calc(100vw - 48px)); max-height: 80vh; border-radius: 18px;opacity: 0; transform: translateY(14px) scale(0.97); transition: transform 0.22s ease, opacity 0.2s ease}
.cb-modal.is-open .cb-sheet { opacity: 1; transform: none; }
.cb-grab { display: none; }
.cb-mhd { padding: 12px 10px 12px 22px; }
.cb-mbody { padding: 6px 22px 22px; }
.cb-mthumb { width: 92px; }}
@media (prefers-reduced-motion: reduce) {.cb-sheet, .cb-modal-backdrop, .cb-tab { transition: none; }}