/* 잘자 — 밤하늘 네이비 + 달빛 옐로 */
:root{
  --bg:#0e1526; --panel:#16203a; --line:#28345a; --ink:#eef1fa; --sub:#aab4d4; --faint:#7683ab;
  --moon:#ffd977; --moon-d:#e8bd4a; --pink:#ffa6c9; --mint:#7fe0c3;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans KR",-apple-system,sans-serif; color:var(--ink); padding-bottom:70px;
  background:
    radial-gradient(circle at 82% 6%, rgba(255,217,119,.16) 0 46px, transparent 47px),
    radial-gradient(1.5px 1.5px at 12% 18%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 30% 8%, #fff6, transparent),
    radial-gradient(1px 1px at 55% 22%, #fff7, transparent),
    radial-gradient(1.5px 1.5px at 74% 30%, #fff5, transparent),
    radial-gradient(1px 1px at 90% 45%, #fff6, transparent),
    radial-gradient(1px 1px at 22% 55%, #fff4, transparent),
    var(--bg);
}
.wrap{max-width:600px; margin:0 auto; padding:0 18px;}

.top{text-align:center; padding:46px 0 4px;}
.top h1{font-size:38px; font-weight:900; margin:0; letter-spacing:-1px;}
.top h1 .m{color:var(--moon)}
.top .tag{color:var(--sub); font-size:14.5px; margin:9px 0 0; line-height:1.85;}
.top .tag b{color:var(--ink)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px; margin-top:18px;}
.row2{display:flex; gap:9px;}
.field{flex:1; margin-top:10px;}
.field label{display:block; font-size:12px; font-weight:800; color:var(--faint); margin-bottom:5px; letter-spacing:.5px;}
.field input, .field select{width:100%; font:inherit; font-size:15px; background:#0b1120; border:1.5px solid var(--line); color:var(--ink); border-radius:11px; padding:11px 12px; outline:none;}
.field input:focus, .field select:focus{border-color:var(--moon);}
.themes{display:flex; flex-wrap:wrap; gap:7px; margin-top:8px;}
.tchip{font-size:12.5px; color:var(--sub); background:#0b1120; border:1.5px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer;}
.tchip.on{border-color:var(--moon); color:var(--moon); font-weight:800;}
.go{width:100%; margin-top:14px; font:inherit; font-size:16.5px; font-weight:900; color:#2a2005;
  background:linear-gradient(135deg,#ffd977,#f4b83a); border:0; border-radius:13px; padding:15px; cursor:pointer;}
.go:disabled{opacity:.5}
.priv{color:var(--faint); font-size:12px; text-align:center; margin-top:11px; line-height:1.7;}
.priv b{color:var(--sub)}

/* 동화 지면 */
#story{margin-top:20px;}
.book{background:linear-gradient(170deg,#fffdf5,#fdf6e3); color:#3a3428; border-radius:18px; padding:26px 24px;
  box-shadow:0 12px 44px rgba(0,0,0,.45); animation:pop .5s;}
@keyframes pop{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.book .bt{font-family:"Nanum Myeongjo",serif; font-size:23px; font-weight:900; text-align:center; line-height:1.5; color:#2c2718;}
.book .bd{color:#8b8266; font-size:12px; text-align:center; margin-top:6px;}
.book .bb{font-family:"Nanum Myeongjo",serif; font-size:16.5px; line-height:2.15; margin-top:18px; white-space:pre-wrap; word-break:keep-all;}
.book .cursor{display:inline-block; width:9px; height:18px; background:#c9b26a; vertical-align:-3px; animation:blink .9s steps(2) infinite;}
@keyframes blink{50%{opacity:0}}
.book .tip{margin-top:20px; background:#f4ead0; border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.8; color:#6b5d33;}
.book .tip b{color:#4a3f1d}

#status{text-align:center; color:var(--sub); font-size:13.5px; margin-top:16px;}
.spinner{display:inline-block; animation:rot 1s steps(10) infinite;}
@keyframes rot{to{transform:rotate(360deg)}}

.actions{display:flex; gap:9px; margin-top:14px;}
.actions button, .actions a{flex:1; text-align:center; text-decoration:none; font:inherit; font-size:14px; font-weight:800; padding:13px; border-radius:12px; border:1px solid var(--line); color:var(--ink); background:var(--panel); cursor:pointer;}
.actions .prime{background:var(--moon); border-color:var(--moon); color:#2a2005;}
#shareOut{text-align:center; color:var(--faint); font-size:12.5px; margin-top:9px;}

/* 서가 */
.shelf{margin-top:34px;}
.shelf .sh{font-weight:900; font-size:14.5px; margin-bottom:7px;}
.shelf .sh small{color:var(--faint); font-weight:400; font-size:11.5px;}
.tome{display:block; width:100%; text-align:left; font:inherit; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:12px; padding:11px 14px; margin:7px 0; cursor:pointer;}
.tome:hover{border-color:var(--moon)}
.tome .tt{font-weight:800; font-size:14px;}
.tome .td{color:var(--faint); font-size:11.5px; margin-top:2px;}
.foot{margin-top:42px; text-align:center; color:var(--faint); font-size:12px; line-height:1.9;}
.hidden{display:none}
a{color:var(--moon)}