:root{--cover:#2b4a43;--cover-ink:#e9efea;--paper:#f1f3ee;--ink:#26302d;--soft:#66736e;--line:#cbd3cd;--accent:#6e4a67;--bg:#dde3de;--field:#ffffff8c;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#222a27;--ink:#e4eae6;--soft:#9aa8a1;--line:#38433f;--accent:#c79bbb;--bg:#151a18;--field:#00000040;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--paper:#222a27;--ink:#e4eae6;--soft:#9aa8a1;--line:#38433f;--accent:#c79bbb;--bg:#151a18;--field:#00000040;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}#root{display:contents}body{background:var(--bg);color:var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:12px;font-family:Gowun Batang,Nanum Myeongjo,Georgia,serif;display:flex}.book{background:var(--paper);border-radius:6px 16px 16px 6px;width:100%;max-width:440px;height:min(640px,100% - 64px);min-height:420px;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000040}.book:before{content:"";z-index:3;pointer-events:none;background:linear-gradient(90deg,#00000047,#0000);width:10px;position:absolute;inset:0 auto 0 0}.track{height:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1);display:flex}.page{flex:0 0 100%;height:100%;padding:30px 26px 26px 34px;overflow-y:auto}h2{margin:0 0 4px;font-size:1.45rem;font-weight:700}.hint{color:var(--soft);margin:0 0 16px;font-size:.92rem;line-height:1.6}textarea,input{width:100%;font:inherit;color:var(--ink);border:0;border-bottom:1px solid var(--line);background:var(--field);border-radius:4px 4px 0 0;padding:8px 10px}textarea{resize:none;background:repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--line) calc(2rem - 1px) 2rem) local;border:0;min-height:300px;padding:0 4px;line-height:2rem}textarea:focus,input:focus{outline:2px solid var(--accent);outline-offset:2px}.cover{--gold:#d9c690;background:radial-gradient(120% 70% at 50% 0%, #ffffff17, transparent 65%), repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, #0000000f 0 1px, transparent 1px 4px), var(--cover);color:var(--cover-ink);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:44px 38px 36px 46px;display:flex;position:relative}.cover:after{content:"";outline-offset:4px;pointer-events:none;border:1px solid #d9c6908c;border-radius:2px;outline:1px solid #d9c69040;position:absolute;inset:16px 16px 16px 26px}.cover .orn{color:var(--gold);margin-bottom:14px}.cover h1{letter-spacing:.08em;color:#f6f1e3;text-shadow:0 1px #00000059;margin:0;font-size:clamp(2.2rem,10vw,3rem);font-weight:700}.cover .rule{width:150px;color:var(--gold);align-items:center;gap:10px;margin:16px 0 14px;font-size:.55rem;display:flex}.cover .rule:before,.cover .rule:after{content:"";opacity:.7;background:currentColor;flex:1;height:1px}.cover .ko{color:var(--gold);letter-spacing:.14em;margin:0 0 22px;font-size:.95rem}.cover .lead{opacity:.9;margin:0 0 26px;font-size:.98rem;line-height:1.95}.cover .legal{opacity:.6;border-top:1px solid #e9efea40;margin:0;padding-top:14px;font-size:.76rem;line-height:1.8}.cover>*{animation:.9s cubic-bezier(.2,.7,.2,1) both rise}.cover>:nth-child(2){animation-delay:.12s}.cover>:nth-child(3){animation-delay:.2s}.cover>:nth-child(4){animation-delay:.28s}.cover>:nth-child(5){animation-delay:.4s}.cover>:nth-child(6){animation-delay:.55s}.cover>:nth-child(7){animation-delay:.7s}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.frame{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.frame .portrait{aspect-ratio:3/4;background:var(--field);width:min(240px,72%);height:auto;color:var(--soft);margin-bottom:26px}.frame input{text-align:center;border-bottom:1px solid var(--line);background:0 0;max-width:300px;font-size:1.5rem}.frame #years{color:var(--soft);margin-top:10px;font-size:1.1rem}.portrait{cursor:pointer;background:#ffffff26;border:6px solid #fff;border-radius:4px;flex:none;justify-content:center;align-items:center;width:140px;height:180px;margin-bottom:18px;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 14px #0000004d}.portrait img{object-fit:cover;width:100%;height:100%;display:block}.portrait span{opacity:.9;padding:0 10px;font-size:.85rem;line-height:1.6}.portrait button{color:#fff;cursor:pointer;background:#0000008c;border:0;border-radius:50%;width:26px;height:26px;position:absolute;top:4px;right:4px}.cover input{color:var(--cover-ink);background:#ffffff1f;border-bottom-color:#ffffff80}.cover input::placeholder{color:#e9efea99}.cover small{color:var(--gold);letter-spacing:.08em;margin-top:22px;font-size:.82rem}.ribbon{background:var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);z-index:2;width:16px;height:70px;position:absolute;top:0;right:26px}.chips{flex-wrap:wrap;gap:8px;margin-bottom:18px;display:flex}#moods h3{color:var(--soft);margin:16px 0 8px;font-size:.95rem;font-weight:700}#moods .chips{margin-bottom:4px}.chip,.btn{font:inherit;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:0 0;border-radius:999px;padding:7px 13px}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.btn{background:var(--accent);color:#fff;border-color:var(--accent);border-radius:8px}.btn.ghost{color:var(--ink);border-color:var(--line);background:0 0}.grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;display:grid}.ph{aspect-ratio:1;border:6px solid #fff;border-radius:4px;position:relative;overflow:hidden;box-shadow:0 2px 6px #0003}.ph img{object-fit:cover;width:100%;height:100%;display:block}.ph button{color:#fff;cursor:pointer;background:#0000008c;border:0;border-radius:50%;width:26px;height:26px;position:absolute;top:2px;right:2px}.row{gap:8px;margin-bottom:8px;display:flex}.tree{flex-direction:column;align-items:center;margin:18px 0;display:flex}.node{border:1px solid var(--accent);background:var(--field);text-align:center;border-radius:8px;padding:6px 14px;font-size:.95rem}.node small{color:var(--soft);display:block}.stem{background:var(--accent);width:1px;height:18px}.kids{border-top:1px solid var(--accent);flex-wrap:wrap;justify-content:center;gap:10px;padding-top:18px;display:flex;position:relative}.note{color:var(--soft);margin-top:14px;font-size:.86rem;line-height:1.6}.song{border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:10px 0;display:flex}.song a{min-width:0;color:var(--accent);overflow-wrap:anywhere;flex:1}.tag{border:1px solid var(--accent);color:var(--accent);border-radius:999px;flex:none;padding:1px 9px;font-size:.78rem}#mus[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}nav{align-items:center;gap:10px;display:flex}nav button{font:inherit;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:8px;padding:8px 14px}nav button:disabled{opacity:.35;cursor:default}.dots{flex-wrap:wrap;justify-content:center;gap:4px;max-width:210px;display:flex}select{width:100%;font:inherit;color:var(--ink);background:var(--field);border:0;border-bottom:1px solid var(--line);border-radius:4px 4px 0 0;padding:8px 10px}.dots button{background:var(--line);border:0;border-radius:50%;width:8px;height:8px;padding:0}.dots button[aria-current=true]{background:var(--accent);transform:scale(1.35)}@media (prefers-reduced-motion:reduce){.track{transition:none}.cover>*{animation:none}}@media print{.cover{color:#26302d;--gold:#6e4a67;background:#fff}.cover h1{color:#26302d;text-shadow:none}.cover:after{border-color:#999;outline-color:#ccc}.cover .legal{border-top-color:#bbb}body{background:#fff;padding:0;display:block}.book{box-shadow:none;max-width:none;height:auto;overflow:visible}.track{display:block;transform:none!important}.page{break-after:page;height:auto;padding:20px;overflow:visible}.cover{min-height:90vh}nav,.ribbon,.btn,.chip:not([aria-pressed=true]),.ph button,.noprint{display:none!important}textarea{height:auto;min-height:0}}.login-box{flex-direction:column;gap:12px;width:100%;max-width:300px;display:flex}.login .lead{margin:0 0 6px}.login input{text-align:center;padding:12px;font-size:1.15rem}.login .btn{padding:12px 14px;font-size:1.1rem}.login .btn.ghost{color:var(--cover-ink);border-color:#e9efea66}.login-note{min-height:1.6em;color:var(--gold);margin:0;font-size:.9rem;line-height:1.6}.account{border-top:1px solid var(--line);margin-top:26px;padding-top:14px}.status-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex}.save-badge{z-index:4;background:var(--paper);color:var(--soft);border:1px solid var(--line);pointer-events:none;border-radius:999px;margin:0;padding:2px 10px;font-size:.78rem;position:absolute;top:10px;left:22px}.save-badge.warn{color:var(--accent);border-color:var(--accent)}.overlay{z-index:5;background:var(--paper);text-align:center;flex-direction:column;justify-content:center;gap:12px;padding:30px 26px 26px 34px;display:flex;position:absolute;inset:0}.overlay .btn{padding:12px 14px;font-size:1.05rem}.photo-wait{text-align:center;width:100%;height:100%;color:var(--soft);background:var(--field);justify-content:center;align-items:center;padding:6px;font-size:.8rem;line-height:1.5;display:flex}