:root{--paper:#fbf6ea;--paper-2:#f3ead6;--ink:#3a2a1e;--ink-soft:#6d5a48;--line:#d9cbb0;--rule:#c9dcef;--accent:#ff6b6b;--accent-2:#ffb347;--good:#5cb85c;--blue:#4f86c6;--bg:#e9dfc9;--shadow:0 6px 0 #3a2a1e2e, 0 14px 30px #3a2a1e1f;--hand:"Gaegu", "Jua", cursive;--title:"Jua", "Noto Sans KR", sans-serif;--ui:"Noto Sans KR", system-ui, sans-serif;--safe-b:max(env(safe-area-inset-bottom,0px), var(--os-safe-bottom,0px))}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--ui);overscroll-behavior:none;margin:0}body{background-color:var(--bg);background-image:radial-gradient(#3a2a1e0d 1px,#0000 1.2px);background-size:14px 14px}button{font:inherit;color:inherit;cursor:pointer}.hidden{display:none!important}#app{position:fixed;inset:0;overflow:hidden}.screen{display:none;position:absolute;inset:0}.screen.active{animation:.5s fade;display:block}@keyframes fade{0%{opacity:0}to{opacity:1}}.btn{border:2.5px solid var(--ink);background:var(--paper);font-family:var(--title);box-shadow:0 4px 0 var(--ink);border-radius:14px 18px 12px 16px;padding:12px 22px;font-size:18px;transition:transform 80ms,box-shadow 80ms}.btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.btn.primary{background:var(--accent);color:#fff}.btn.big{padding:14px 30px;font-size:22px}.btn.ghost{box-shadow:none;background:0 0;border-style:dashed}.icon-btn{background:0 0;border:0;padding:6px 10px;font-size:22px}.link-btn{font-family:var(--hand);-webkit-text-decoration:underline wavy var(--accent-2);text-decoration:underline wavy var(--accent-2);background:0 0;border:0;padding:2px 4px;font-size:18px}.globe-holder{background:radial-gradient(at 50% 40%,#2b3a67 0%,#141b33 70%);position:absolute;inset:0}.globe-holder canvas{display:block}.title-card{left:50%;bottom:max(28px, var(--safe-b));text-align:center;background:var(--paper);border:3px solid var(--ink);width:min(520px,100% - 32px);box-shadow:var(--shadow);border-radius:22px 26px 20px 24px;padding:22px 20px 18px;position:absolute;transform:translate(-50%)}.title-badge{font-family:var(--hand);background:var(--accent-2);border:2px solid var(--ink);border-radius:10px;padding:0 12px;font-size:18px;display:inline-block;transform:rotate(-3deg)}.title-card h1{font-family:var(--title);letter-spacing:2px;margin:6px 0 4px;font-size:clamp(40px,9vw,60px)}.title-card .sub{font-family:var(--hand);color:var(--ink-soft);margin:0 0 16px;font-size:20px;line-height:1.35}.title-actions{flex-direction:column;align-items:center;gap:10px;display:flex}.title-actions .btn{width:min(320px,100%)}.note{color:var(--ink-soft);margin:14px 0 0;font-size:12px}.roll-top{top:max(24px, env(safe-area-inset-top), var(--os-safe-top,0px));text-align:center;color:#fff;pointer-events:none;position:absolute;left:0;right:0}.roll-label{font-family:var(--hand);opacity:.85;font-size:22px}.roll-ticker{font-family:var(--title);text-shadow:0 3px #00000059;margin-top:4px;font-size:clamp(30px,8vw,50px)}.roll-odds{font-family:var(--hand);opacity:.9;min-height:26px;font-size:20px}.birth-card{left:50%;bottom:max(16px, var(--safe-b));background:var(--paper);border:3px solid var(--ink);width:min(560px,100% - 24px);max-height:62vh;box-shadow:var(--shadow);border-radius:20px 24px 18px 22px;flex-direction:column;animation:.45s cubic-bezier(.2,1.4,.4,1) pop;display:flex;position:absolute;overflow:hidden;transform:translate(-50%)}.birth-card-scroll{overscroll-behavior:contain;min-height:0;padding:18px 18px 16px;scroll-padding-bottom:76px;overflow-y:auto}.birth-card-scroll:focus-visible{outline:3px solid var(--accent-2);outline-offset:-4px}.birth-scroll-hint{background:linear-gradient(transparent, var(--paper) 38%);pointer-events:none;justify-content:center;padding:26px 12px 10px;display:flex;position:absolute;inset:auto 0 0}.birth-scroll-hint[hidden]{display:none}.birth-scroll-hint button{border:2px solid var(--ink);background:var(--accent-2);min-height:44px;color:var(--ink);box-shadow:0 3px 0 var(--ink);font-family:var(--title);pointer-events:auto;border-radius:999px;align-items:center;gap:10px;padding:8px 18px;font-size:16px;display:flex}.birth-scroll-hint button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.birth-scroll-hint button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.birth-scroll-hint span{font-size:21px}@media (prefers-reduced-motion:reduce){.birth-card{animation:none}}@keyframes pop{0%{opacity:0;transform:translate(-50%,40px)scale(.9)}to{opacity:1;transform:translate(-50%)scale(1)}}.birth-card h2{font-family:var(--title);align-items:center;gap:10px;margin:0;font-size:28px;display:flex}.birth-card h2 .flag{font-size:36px}.birth-card .odds{font-family:var(--hand);color:var(--ink-soft);margin:2px 0 10px;font-size:19px}.birth-card .who-born{font-family:var(--hand);background:var(--paper-2);border:2px dashed var(--line);border-radius:12px;padding:10px 12px;font-size:21px;line-height:1.4}.facts{grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 14px;display:grid}.fact{border:2px solid var(--line);text-align:center;background:#fff;border-radius:12px;padding:7px 6px}.fact b{font-family:var(--title);font-size:19px;display:block}.fact span{color:var(--ink-soft);font-size:11px}.birth-card .btn{width:100%}.src{color:var(--ink-soft);text-align:center;margin-top:8px;font-size:11px}#screen-life{flex-direction:column;display:none}#screen-life.active{display:flex}.topbar{padding:8px 12px;padding-top:max(8px, env(safe-area-inset-top), var(--os-safe-top,0px));align-items:center;gap:8px;display:flex}.who{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.who .flag{font-size:30px;line-height:1}.who .name{font-family:var(--title);white-space:nowrap;text-overflow:ellipsis;font-size:19px;overflow:hidden}.who .sub{color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.age-big{font-family:var(--title);background:var(--paper);border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:14px;padding:0 12px;font-size:34px}.age-big small{margin-left:2px;font-size:16px}.age-big small.man{color:var(--ink-soft);margin:0 3px 0 0;font-size:13px}.diary{flex:1;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;min-height:0;padding:4px 14px 8px;display:grid}.page{background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);border-radius:16px 20px 14px 18px;flex-direction:column;min-height:0;display:flex;position:relative;overflow:hidden}.page-head{font-family:var(--hand);border-bottom:2px solid var(--line);background:var(--paper-2);justify-content:space-between;align-items:center;padding:6px 12px;font-size:19px;display:flex}.page-head.small{font-size:18px}.weather b{font-size:20px}.picture{border:3px solid var(--ink);background:#cfe8ff;border-radius:10px 14px 9px 12px;flex:1;min-height:0;margin:10px;position:relative;overflow:hidden}#scene{position:absolute;inset:0}#scene canvas{display:block}.paper-grain{pointer-events:none;mix-blend-mode:multiply;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.toast{background:var(--paper);border:2.5px solid var(--ink);font-family:var(--hand);box-shadow:0 3px 0 var(--ink);text-align:center;border-radius:14px;max-width:90%;padding:6px 14px;font-size:19px;animation:.35s drop;position:absolute;top:12px;left:50%;transform:translate(-50%)}@keyframes drop{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.stats{grid-template-columns:repeat(4,1fr);gap:6px;padding:0 10px 10px;display:grid}.stat{border:2px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;min-width:0;padding:4px 6px}.stat .lbl{color:var(--ink-soft);white-space:nowrap;justify-content:space-between;font-size:11px;display:flex}.stat .bar{background:#eee3cf;border-radius:4px;height:7px;margin-top:3px;overflow:hidden}.stat .bar i{border-radius:4px;height:100%;transition:width .6s;display:block}.stat.wide{grid-column:span 2}.stat .val{font-family:var(--title);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.entries{font-family:var(--hand);background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px);scroll-behavior:smooth;overflow-anchor:none;background-attachment:local;flex:1;padding:4px 14px 30px;font-size:20px;line-height:32px;position:relative;overflow-y:auto}.entry{margin:0}.entry.fresh{animation:.5s write}@keyframes write{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:none}}.entry .when{color:var(--ink-soft);margin-right:6px;font-size:15px}.entry.major{color:#b23a48}.entry.event b{background:linear-gradient(#0000 55%,#ffe08a 55%)}.entry.choice{color:#2b59c3}.entry.year-sep{color:var(--ink-soft);text-align:center;font-size:16px}.controls{padding:6px 14px calc(8px + var(--safe-b))}.yearbar{background:var(--paper);border:2px solid var(--ink);border-radius:6px;height:10px;position:relative;overflow:hidden}.yearbar .fill{background:repeating-linear-gradient(45deg, var(--accent-2) 0 8px, #ffc46b 8px 16px);width:0;height:100%}.yearbar .ticks{background:repeating-linear-gradient(90deg,#0000 0 calc(8.33333% - 1px),#3a2a1e40 calc(8.33333% - 1px) 8.33333%);position:absolute;inset:0}.ctrl-row{align-items:center;gap:8px;margin-top:6px;display:flex}.ctrl{border:2px solid var(--ink);background:var(--paper);font-family:var(--title);box-shadow:0 2px 0 var(--ink);border-radius:10px;padding:4px 10px;font-size:15px}.ctrl.active{background:var(--ink);color:var(--paper)}.speeds{gap:6px;display:flex}.time-left{font-family:var(--ui);color:var(--ink-soft);text-align:left;cursor:help;text-underline-offset:3px;background:0 0;border:0;margin-left:auto;padding:2px 0;font-size:12px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.tip-i{vertical-align:1px;width:15px;height:15px;color:var(--ink-soft);font:700 10px/1 var(--ui);opacity:.75;cursor:help;background:0 0;border:1.5px solid;border-radius:50%;flex:none;justify-content:center;align-items:center;margin-left:3px;padding:0;display:inline-flex;position:relative}.tip-i:after{content:"";position:absolute;inset:-9px}.tip-i[aria-describedby]{background:var(--ink);border-color:var(--ink);color:var(--paper);opacity:1}.tip-i:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.stat .tip-i{width:13px;height:13px;margin-left:2px;font-size:9px}.fact{position:relative}.fact .tip-i{width:14px;height:14px;margin:0;font-size:9px;position:absolute;top:4px;right:4px}.tip{z-index:60;background:var(--paper);width:max-content;max-width:min(260px,100vw - 24px);color:var(--ink);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-family:var(--ui);white-space:pre-line;text-align:left;pointer-events:none;border-radius:12px;padding:8px 11px;font-size:13px;line-height:1.55;animation:.14s tip-in;position:fixed}.tip:before{content:"";left:var(--ax,50%);background:var(--paper);border:2px solid var(--ink);border-bottom:0;border-right:0;width:9px;height:9px;margin-left:-5px;position:absolute;top:-6px;transform:rotate(45deg)}.tip.above:before{top:auto;bottom:-6px;transform:rotate(225deg)}@keyframes tip-in{0%{opacity:0;translate:0 3px}to{opacity:1;translate:0}}@media (prefers-reduced-motion:reduce){.tip{animation:none}}.split{display:none}.name-edit{vertical-align:middle;flex-wrap:wrap;align-items:center;gap:6px;display:inline-flex}.name-edit input{font-family:var(--hand);border:2px solid var(--ink);width:11em;max-width:52vw;color:var(--ink);background:#fff;border-radius:10px;padding:2px 8px;font-size:20px}.name-edit input:focus{outline:3px solid var(--accent-2);outline-offset:1px}.name-edit .ctrl{padding:3px 9px}.jump-latest{z-index:5;border:2.5px solid var(--ink);background:var(--accent-2);color:var(--ink);font-family:var(--title);box-shadow:0 3px 0 var(--ink);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:6px 14px 6px 12px;font-size:15px;animation:1.6s ease-in-out infinite bob;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.jump-latest b{background:var(--accent);color:#fff;text-align:center;border-radius:999px;min-width:22px;padding:0 6px;font-size:13px;line-height:20px}.jump-latest:active{box-shadow:0 1px 0 var(--ink);transform:translate(-50%)translateY(2px)}@keyframes bob{0%,to{translate:0}50%{translate:0 -3px}}.sheet{background:var(--paper);border:3px solid var(--ink);width:min(620px,100%);padding:18px 18px calc(18px + var(--safe-b));z-index:20;border-bottom:0;border-radius:24px 24px 0 0;max-height:80vh;animation:.35s cubic-bezier(.2,1.2,.4,1) up;position:absolute;bottom:0;left:50%;overflow:auto;transform:translate(-50%);box-shadow:0 -10px 40px #3a2a1e4d}@keyframes up{0%{transform:translate(-50%,100%)}to{transform:translate(-50%)}}.sheet-backdrop{z-index:19;background:#281c1259;position:absolute;inset:0}.sheet .s-icon{font-size:40px;line-height:1}.sheet h3{font-family:var(--title);margin:6px 0 4px;font-size:24px}.sheet .s-text{font-family:var(--hand);color:var(--ink-soft);margin-bottom:12px;font-size:20px;line-height:1.4}.choice-btn{text-align:left;border:2.5px solid var(--ink);width:100%;box-shadow:0 3px 0 var(--ink);background:#fff;border-radius:14px;margin-bottom:9px;padding:10px 14px;transition:transform 80ms;display:block}.choice-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.choice-btn .cl{font-family:var(--title);font-size:18px}.choice-btn .ch{color:var(--ink-soft);margin-top:2px;font-size:12.5px}.sheet .s-age{color:var(--ink-soft);font-size:12px}.result{font-family:var(--hand);background:var(--paper-2);border:2px dashed var(--line);border-radius:12px;margin:6px 0 12px;padding:10px 12px;font-size:21px}.s-top{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.s-fold{border:2px dashed var(--ink-soft);font-family:var(--hand);color:var(--ink-soft);white-space:nowrap;background:0 0;border-radius:999px;padding:4px 12px;font-size:17px}.s-fold:hover{background:var(--paper-2)}.decision-pill{left:50%;bottom:calc(64px + var(--safe-b));z-index:21;border:2.5px solid var(--ink);background:var(--accent);color:#fff;max-width:calc(100% - 32px);font-family:var(--title);box-shadow:0 4px 0 var(--ink);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;padding:9px 18px;font-size:16px;animation:1.6s ease-in-out infinite bob;position:absolute;overflow:hidden;transform:translate(-50%)}.decision-pill b{font-weight:400;-webkit-text-decoration:underline wavy #fff9;text-decoration:underline wavy #fff9}.decision-pill span{opacity:.9;margin-left:4px}.cur-toggle{border:2px solid var(--ink);vertical-align:middle;font-family:var(--ui);border-radius:999px;font-size:12px;display:inline-flex;overflow:hidden}.cur-toggle button{background:var(--paper);color:var(--ink-soft);border:0;padding:3px 10px;font-weight:600}.cur-toggle button.on{background:var(--ink);color:var(--paper)}.menu-cur{font-family:var(--title);justify-content:center;align-items:center;gap:10px;padding:6px 0;display:flex}.birth-card .src .cur-toggle{margin-bottom:6px}.panel{z-index:30;background:#281c1266;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.panel-card{background:var(--paper);border:3px solid var(--ink);width:min(560px,100%);max-height:88vh;box-shadow:var(--shadow);border-radius:20px;padding:18px;position:relative;overflow:auto}.panel-card h3{font-family:var(--title);margin:0 0 10px;font-size:24px}.panel-card h4{font-family:var(--title);margin:14px 0 6px;font-size:18px}.panel-card .close{background:0 0;border:0;font-size:24px;position:absolute;top:10px;right:12px}.kv{grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;display:grid}.kv dt{color:var(--ink-soft)}.kv dd{text-align:right;margin:0;font-weight:600}.hbar{grid-template-columns:92px 1fr 44px;align-items:center;gap:8px;margin:4px 0;font-size:13px;display:grid}.hbar .b{background:#eee3cf;border-radius:6px;height:12px;overflow:hidden}.hbar .b i{background:var(--accent-2);border-radius:6px;height:100%;display:block}.menu-list{flex-direction:column;gap:10px;display:flex}.menu-list .btn{width:100%}.past-item{border:2px solid var(--line);background:#fff;border-radius:12px;align-items:center;gap:10px;margin-bottom:8px;padding:8px;display:flex}.past-item img{object-fit:cover;border:2px solid var(--ink);border-radius:8px;width:72px;height:54px}.past-item .pf{font-size:26px}.past-item .pt{color:var(--ink-soft);font-size:13px}#screen-death{overflow-y:auto}.death{width:min(760px,100%);padding:20px 16px calc(40px + var(--safe-b));margin:0 auto}.death .card{background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);border-radius:20px 24px 18px 22px;margin-bottom:16px;padding:18px}.death .polaroid{border:2px solid var(--line);background:#fff;width:min(420px,100%);margin:0 auto 14px;padding:10px 10px 34px;position:relative;transform:rotate(-2deg);box-shadow:0 8px 20px #00000026}.death .polaroid img{border:2px solid var(--ink);width:100%;display:block}.death .polaroid figcaption{text-align:center;font-family:var(--hand);font-size:20px;position:absolute;bottom:6px;left:0;right:0}.death h2{font-family:var(--title);text-align:center;margin:4px 0;font-size:30px}.death .dates{text-align:center;font-family:var(--hand);color:var(--ink-soft);font-size:22px}.death .cause{text-align:center;font-family:var(--hand);margin:10px 0 0;font-size:22px}.cmp{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.cmp .c{border:2px solid var(--line);background:#fff;border-radius:12px;padding:10px}.cmp .c b{font-family:var(--title);font-size:22px;display:block}.cmp .c span{color:var(--ink-soft);font-size:12.5px}.timeline{font-family:var(--hand);margin:0;padding:0;font-size:19px;list-style:none}.timeline li{border-bottom:1px dashed var(--line);grid-template-columns:54px 28px 1fr;gap:4px;padding:4px 0;display:grid}.timeline .ta{color:var(--ink-soft)}.death-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex;position:sticky;bottom:12px}.death-actions .btn{flex:1;min-width:150px}@media (width<=820px){.diary{grid-template-rows:auto auto minmax(0,1fr);grid-template-columns:1fr;gap:0;padding:2px 8px 6px}.page.left .picture{aspect-ratio:4/3.1;flex:none;max-height:42vh;margin:6px 8px}.diary.pic-sized .page.left .picture{height:var(--pic-h);aspect-ratio:auto;max-height:none}.split{z-index:2;touch-action:none;cursor:row-resize;-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;height:16px;display:flex;position:relative}.split:before{content:"";position:absolute;inset:-8px 0}.split span{background:var(--ink-soft);opacity:.45;border-radius:3px;width:44px;height:5px;transition:width .15s,opacity .15s,background .15s}.split.dragging span,.split:focus-visible span{opacity:1;background:var(--accent-2);width:64px;box-shadow:0 0 0 1.5px var(--ink)}.page.left .page-head{padding:4px 10px;font-size:16px}.stats{gap:5px;padding:0 8px 8px}.page.right .page-head{display:none}.entries{background-image:repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px);padding-top:2px;font-size:18px;line-height:28px}.facts{grid-template-columns:repeat(3,1fr);gap:5px;margin:8px 0 10px}.fact{padding:5px 4px}.birth-card{max-height:58vh}.birth-card-scroll{padding:12px}.birth-card h2{font-size:22px}.birth-card .odds{margin-bottom:6px;font-size:16px}.birth-card .who-born{padding:8px 10px;font-size:17px}.title-card .sub{font-size:17px}.title-card{padding:16px 14px 14px}.fact b{font-size:16px}.age-big{font-size:28px}.controls{padding:4px 8px calc(6px + var(--safe-b))}.cmp{grid-template-columns:1fr 1fr}}@media (width<=380px){.speeds .ctrl{padding:4px 7px}.stats{grid-template-columns:repeat(4,1fr)}.stat .lbl{font-size:10px}}
