/* 돌잔치 ② 동화책 · 밤하늘 남색 + 달빛 노랑 + 구름 흰색, 둥근 손글씨풍(주아) */
:root{
  --page:#2F3E5C; --paper:#FFFDF6; --fg:#2E3550; --sub:#7C8299; --line:#E8E4D6;
  --accent:#F2B84B; --on-accent:#2E3550; --sun:#E07A6E; --night:#2F3E5C;
  --font:'Gowun Dodum',sans-serif; --disp:'Jua',sans-serif;
  --card:#FFFDF6; --fab-bg:rgba(255,255,255,.2);
}
body{background:linear-gradient(180deg,#2F3E5C,#4F6A92 60%,#B9C8DE)}
.story{position:relative;max-width:480px;margin:0 auto;padding:26px 16px 40px;display:flex;flex-direction:column;gap:22px}
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sky i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#FFF6CF;box-shadow:0 0 6px #FFF6CF;animation:tw 2.6s ease-in-out infinite}
@keyframes tw{50%{opacity:.25;transform:scale(.6)}}
.pg{position:relative;background:var(--paper);border-radius:28px;padding:44px 24px 34px;text-align:center;box-shadow:0 16px 40px rgba(10,20,50,.3)}
.pg::after{content:"";position:absolute;inset:10px;border:2px dashed #E9E2CC;border-radius:22px;pointer-events:none}
.no{position:absolute;top:16px;left:0;right:0;font:400 14px/1 var(--disp);color:var(--sub)}
.fr{display:block;width:84%;margin:10px auto 22px;padding:10px;background:#fff;border-radius:22px;box-shadow:0 10px 22px rgba(40,50,80,.16);transform:rotate(-1.5deg)}
.fr.tilt{transform:rotate(1.8deg)}
.rv-on .fr[data-rv]{transform:translateY(18px) rotate(-1.5deg)}
.rv-on .fr[data-rv].in{transform:rotate(-1.5deg)}
.fr img{width:100%;height:auto;border-radius:14px}
.tx{font:400 23px/1.55 var(--disp);color:var(--fg)}
.tx b{color:var(--sun);font-weight:400}
.cover h1{font:400 30px/1.4 var(--disp);margin:6px 0 10px}
.by{font-size:13px;color:var(--sub)}
.lt{font-size:14.5px;line-height:2;margin:22px 0}
.sub{font-size:13.5px;color:var(--sub);line-height:1.8;margin:10px 0 16px}
.when{background:#FFF4D6;border-radius:18px;padding:16px;margin-bottom:16px}
.w1{font:400 26px/1.2 var(--disp)}.w2{font-size:14px;margin-top:4px}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px}
.cd div{background:var(--night);color:#FFF6CF;border-radius:14px;padding:10px 0 8px}
.cd b{display:block;font:400 26px/1 var(--disp)}
.cd small{font-size:10px;letter-spacing:.14em;opacity:.7}
.cal td.on span{background:var(--sun)}
.btn-line,.btn-solid{border-radius:30px}
.btn-solid{background:var(--night);color:#FFF6CF}
.chips span{border-radius:22px}
.chips input:checked+span{background:var(--night);border-color:var(--night);color:#FFF6CF}
.map{border-radius:18px;overflow:hidden}
.ways,.maplinks,.al{text-align:left}
.maplinks a,.maplinks button{border-radius:12px}
.gb{margin-top:28px;text-align:left}
.gb-head{display:flex;justify-content:space-between;align-items:center}
.gb-head h3{font:400 18px var(--disp)}
.cts{margin-top:16px}
.end .tx{font-size:40px;margin-top:8px}
.sh{display:flex;gap:8px;justify-content:center;margin-top:10px}
/* 동화책 표지 */
.sb-intro{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:linear-gradient(180deg,#1F2A44,#3A4E78);transition:opacity 1s,visibility 1s}
.sb-intro.gone{opacity:0;visibility:hidden}
.sb-scene{position:relative;width:min(72vw,310px);aspect-ratio:.82;perspective:1500px}
.sb-first,.sb-cover{position:absolute;inset:0}
.sb-first{background:#FFFDF6;border-radius:6px 18px 18px 6px;display:flex;align-items:center;justify-content:center;font:400 22px/1.6 var(--disp);color:var(--fg);text-align:center;box-shadow:0 26px 50px rgba(0,0,0,.4)}
.sb-cover{display:block;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.7s cubic-bezier(.6,.05,.3,1)}
.sb-face,.sb-in{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px 18px 18px 6px}
.sb-in{transform:rotateY(180deg);background:#F6EBC8 radial-gradient(circle,#EAD9A6 0 2px,transparent 3px) 0 0/16px 16px}
.sb-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#7C9CC8;box-shadow:inset 14px 0 18px rgba(0,0,0,.25),0 26px 50px rgba(0,0,0,.45);color:#FFFDF6}
.sb-face::after{content:"";position:absolute;inset:12px;border:2px dashed rgba(255,253,246,.7);border-radius:4px 12px 12px 4px}
.moon{width:58px;height:58px;border-radius:50%;box-shadow:-12px 6px 0 0 #FFE7A0;transform:translateX(8px);margin-bottom:6px}
.sb-t{font:400 32px/1.3 var(--disp);text-align:center}
.sb-s{font-size:14px;opacity:.9}
.sb-intro.opening .sb-cover{transform:rotateY(-165deg)}
.sb-hint{color:#CFDAEC;font-size:13px}