/* JavaScript를 받는 첫 순간에도 완성 화면과 같은 서재와 한지 바탕을 유지한다. */
:root { --book-paper-color: #faf7ef; --book-paper-image: url('/images/design/book-backgrounds/hanji-paper.webp'); --book-mobile-image: url('/images/design/book-backgrounds/study-mobile.webp'); --book-desktop-image: url('/images/design/book-backgrounds/study-desktop.webp'); }
.book-boot { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; width: 100%; max-width: 430px; min-height: 100dvh; margin: auto; padding: 24px 0; background-color: var(--book-paper-color); background-image: var(--book-mobile-image), var(--book-paper-image); background-size: cover, 256px 256px; background-position: center, top left; background-repeat: no-repeat, repeat; color: hsl(var(--primary, 304 35% 23%)); text-align: center; }
.book-boot h1 { margin: 0; padding-left: .16em; font: 500 48px/1.35 'Noto Serif KR', Batang, serif; letter-spacing: .16em; }
.book-boot p { margin: 0; font: 14px/1.7 'Noto Sans KR Variable', system-ui, sans-serif; }
.book-boot img { width: 100%; height: 160px; object-fit: cover; mix-blend-mode: multiply; }
.book-boot-footer { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); width: calc(min(100%, 430px) - 48px); }
.book-boot-footer .book-boot-rule { display: flex; align-items: center; gap: 7px; width: 100%; margin-bottom: 18px; color: hsl(var(--accent, 40 43% 51%)); }
.book-boot-rule::before, .book-boot-rule::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .7; }
.book-boot-rule > svg { flex: 0 0 17px; width: 17px; height: 17px; }
.book-boot-footer p { font-size: 12px; line-height: 1.7; letter-spacing: .045em; color: hsl(var(--muted-foreground, 300 6% 40%)); }
@media (max-height: 680px) { .book-boot-footer { bottom: max(16px, env(safe-area-inset-bottom)); } .book-boot-footer .book-boot-rule { margin-bottom: 12px; } }
body:has(.book-boot) { margin: 0; background: var(--book-paper-color) var(--book-paper-image) repeat; background-size: 256px 256px; }
@media (min-width: 431px) { body:has(.book-boot) { background-image: var(--book-desktop-image); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } }