:root{--paper:#fbf9f4;--line:#dce6f2;--margin:#f2b8b8;--ink:#2f2f33;--ink-soft:#6b6b72;--pink:#ffd6e0;--yellow:#fff1a6;--mint:#cdeedb;--sky:#d3e7fb;--lilac:#e6dcfa;--peach:#ffe0c7;--kakao:#fee500;--radius-sketch:255px 15px 225px 15px / 15px 225px 15px 255px;color:var(--ink);-webkit-text-size-adjust:100%;font-family:Gaegu,Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif;font-size:19px}*{box-sizing:border-box}html,body{margin:0}body{background-color:var(--paper);background-image:linear-gradient(90deg, transparent 38px, var(--margin) 38px, var(--margin) 40px, transparent 40px), repeating-linear-gradient(transparent 0 31px, var(--line) 31px 32px);background-attachment:local}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}.app{max-width:520px;min-height:100dvh;padding:28px 18px calc(40px + env(safe-area-inset-bottom)) 52px;margin:0 auto}h1,h2,h3{margin:0 0 10px;font-weight:700;line-height:1.25}.title{font-size:2rem}.subtitle{margin-top:26px;font-size:1.35rem}.muted{color:var(--ink-soft)}.center{text-align:center}.row{align-items:center;gap:8px;display:flex}.wrap{flex-wrap:wrap}.grow{flex:1}.stack{gap:10px;display:grid}.mt{margin-top:18px}.hl{background:linear-gradient(transparent 55%, var(--yellow) 55% 92%, transparent 92%);padding:0 2px}.hl.pink{background:linear-gradient(transparent 55%, var(--pink) 55% 92%, transparent 92%)}.sketch{border:2px solid var(--ink);border-radius:var(--radius-sketch);background:#fff;padding:16px 18px;position:relative;box-shadow:2px 3px #2f2f332e}.sketch.alt{border-radius:15px 225px 15px 255px/255px 15px 225px}.card{align-items:center;gap:14px;transition:transform .15s;display:flex}.card:active{transform:rotate(-1deg)scale(.98)}.card .icon-box{border-radius:50% 45% 55% 48%/48% 55% 45% 52%;flex:none;place-items:center;width:58px;height:58px;display:grid}.card .icon-box svg{width:34px;height:34px}.card strong{font-size:1.25rem}.section-label{margin:26px 0 10px;font-size:1.15rem;font-weight:700;display:inline-block;transform:rotate(-1.5deg)}.btn{text-align:center;border:2px solid var(--ink);border-radius:var(--radius-sketch);cursor:pointer;background:#fff;width:100%;padding:12px 14px;font-size:1.15rem;font-weight:700;transition:transform .1s,box-shadow .1s;display:block;box-shadow:2px 3px #2f2f3340}.btn:active{box-shadow:none;transform:translate(2px,3px)}.btn:disabled{opacity:.45;cursor:default}.btn.small{width:auto;padding:6px 12px;font-size:1rem;display:inline-block}.btn.primary{background:var(--pink)}.btn.yellow{background:var(--yellow)}.btn.mint{background:var(--mint)}.btn.kakao{background:var(--kakao)}.btn.ghost{box-shadow:none;background:0 0;border-style:dashed}.btn.choice{text-align:left;font-weight:400}.btn.choice.on{background:var(--yellow);font-weight:700}.input,.textarea{border:2px solid var(--ink);border-radius:var(--radius-sketch);background:#fff;outline:none;width:100%;padding:10px 14px;font-size:1.15rem}.input:focus,.textarea:focus{background:#fffdf0}.progress{border:2px solid var(--ink);background:#fff;border-radius:99px 60px 99px 70px;height:14px;overflow:hidden}.progress>div{background:repeating-linear-gradient(-45deg, var(--pink) 0 6px, #ffc2d1 6px 12px);height:100%;transition:width .25s}.question{margin:22px 0 18px;font-size:1.6rem}.result{text-align:center}.result .big-icon{width:120px;height:120px;margin:10px auto}.result .big-icon svg{width:100%;height:100%}.img-slot{aspect-ratio:1;border:2px dashed var(--ink);background:#fff;border-radius:50% 46% 52% 48%/46% 52% 48% 54%;place-items:center;width:190px;margin:12px auto;display:grid;overflow:hidden}.img-slot img{object-fit:cover;width:100%;height:100%}.img-slot .ph{color:var(--ink-soft);padding:12px;font-size:.95rem}.tag{border:1.5px solid var(--ink);background:#fff;border-radius:99px 80px 99px 70px;margin:2px;padding:2px 10px;display:inline-block}.rank-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.rank-list li{align-items:center;gap:10px;padding:8px 14px;display:flex}.rank-list .no{border:2px solid var(--ink);border-radius:50% 44% 52% 46%;flex:none;place-items:center;width:34px;height:34px;font-weight:700;display:grid}.rank-list li:first-child .no{background:var(--yellow)}.rank-list li:nth-child(2) .no{background:var(--sky)}.rank-list li:nth-child(3) .no{background:var(--peach)}.bar{border:1.5px solid var(--ink);background:#fff;border-radius:99px;height:12px;overflow:hidden}.bar>div{background:var(--mint);height:100%}.page{aspect-ratio:3/4;border:2px solid var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:6px 10px 8px 12px;width:100%;position:relative;overflow:hidden;box-shadow:3px 4px #2f2f3333}.paper-lined{background-image:repeating-linear-gradient(#0000 0 27px,#2f2f3324 27px 28px)}.paper-grid{background-image:linear-gradient(#2f2f331a 1px,#0000 1px),linear-gradient(90deg,#2f2f331a 1px,#0000 1px);background-size:18px 18px}.paper-dot{background-image:radial-gradient(#2f2f3340 1.2px,#0000 1.4px);background-size:18px 18px}.paper-plain{background-image:none}.page .page-text{white-space:pre-wrap;word-break:break-word;pointer-events:none;font-size:1.15rem;line-height:28px;position:absolute;inset:12% 9% 16%}.page .page-author{pointer-events:none;font-weight:700;position:absolute;bottom:5%;right:9%}.page .page-date{color:var(--ink-soft);pointer-events:none;font-size:.9rem;position:absolute;top:4%;left:9%}.sticker{transform-origin:50%;cursor:grab;position:absolute;translate:-50% -50%}.sticker svg{width:100%;height:100%;display:block}.sticker.sel{outline-offset:3px;border-radius:6px;outline:2px dashed #e0607e}.tape{opacity:.78;background-image:repeating-linear-gradient(45deg,#ffffff73 0 5px,#0000 5px 10px);border-radius:2px;width:100%;height:100%}.palette{flex-wrap:wrap;gap:6px;display:flex}.palette button{cursor:pointer;border:1.5px solid var(--ink);background:#fff;border-radius:50% 44% 52% 46%;width:46px;height:46px;padding:6px}.palette button svg{width:100%;height:100%}.palette button.on{background:var(--yellow)}.swatch{width:34px!important;height:34px!important}.wheel-wrap{width:min(100%,360px);margin:10px auto;position:relative}.wheel-wrap svg.wheel{width:100%;height:auto;display:block}.wheel-pointer{border-left:14px solid #0000;border-right:14px solid #0000;border-top:26px solid var(--ink);z-index:2;width:0;height:0;position:absolute;top:-6px;left:50%;translate:-50%}.ladder svg{width:100%;height:auto;display:block}.ladder-names{text-align:center;gap:4px;display:grid}.ladder-names button{cursor:pointer;background:0 0;border:none;padding:6px 0;font-weight:700}.ladder-names button.done{-webkit-text-decoration:underline wavy var(--margin);text-decoration:underline wavy var(--margin)}.toast{border:2px solid var(--ink);border-radius:var(--radius-sketch);z-index:50;background:#fff;padding:10px 18px;position:fixed;bottom:28px;left:50%;translate:-50%}