:root{--ink:#33402a;--ink-soft:#6b7a5c;--cream:#fffdf6;--leaf:#5a9a32;--leaf-dark:#3f6b22;--leaf-pale:#eef5e6;--heart:#ff6b6b;--shadow:0 6px 20px #28461440;--tin-cream:linear-gradient(180deg, #fffdf7 0%, #f6efdf 100%);--tin-green:linear-gradient(180deg, #b9e08c 0%, #93c862 100%);--tin-cream-edge:inset 0 1px 0 #ffffffe6, inset 0 -3px 0 #b4a0782e;--tin-green-edge:inset 0 1px 0 #ffffff8c, inset 0 -3px 0 #3c6e1e33;--tin-shadow:0 1px 0 #5a6e3c26, 0 10px 20px #28461447;--chip-bg:#fffdf6e6;font-family:Jua,system-ui,sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#8cc45a;margin:0;overflow:hidden}#field{touch-action:none;display:block;position:fixed;inset:0}.topbar{pointer-events:none;align-items:center;gap:8px;padding:12px 112px 12px 12px;display:flex;position:fixed;top:0;left:0;right:0}.logo{background:var(--tin-cream);box-shadow:var(--tin-cream-edge), var(--tin-shadow);white-space:nowrap;border-radius:18px;align-items:center;gap:8px;margin:0;padding:6px 14px 6px 8px;display:flex}.logo-mark{flex:none;width:38px;height:38px;margin-top:-4px}.logo-text{flex-direction:column;line-height:1;display:flex}.logo-ko{color:var(--leaf-dark);letter-spacing:-.02em;font-size:22px;font-weight:400}.logo-en{letter-spacing:.32em;color:#e08a3c;margin-top:3px;font:800 9px Pretendard Variable,Pretendard,system-ui,sans-serif}.count,.add-caption,.toolbox-caption{background:var(--chip-bg);color:var(--ink-soft);white-space:nowrap;border-radius:999px;padding:2px 10px;font:13px Jua,sans-serif;box-shadow:0 2px 6px #28461426}.count{color:var(--leaf-dark);padding:4px 11px}.add-wrap{flex-direction:column;align-items:center;gap:6px;width:92px;display:flex;position:fixed;top:10px;right:14px}.add-btn{background:var(--tin-green);width:56px;height:52px;box-shadow:var(--tin-green-edge), var(--tin-shadow);cursor:pointer;border:none;border-radius:16px;place-items:center;padding:0;transition:transform .2s;animation:6s ease-in-out 3s infinite nudge;display:grid;position:relative}.add-btn svg{filter:drop-shadow(0 1.5px #3c6e1e59);width:22px;height:22px}.add-btn:hover{transform:translateY(-3px)}.add-btn:active{transform:translateY(0)scale(.96)}@keyframes nudge{0%,88%,to{transform:rotate(0)}91%{transform:rotate(-6deg)}94%{transform:rotate(5deg)}97%{transform:rotate(-2deg)}}@media (width<=420px){.logo-ko{font-size:20px}.logo-mark{width:34px;height:34px}}.toolbox{right:14px;bottom:calc(12px + env(safe-area-inset-bottom));width:92px;height:92px;position:fixed}.toolbox-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;padding:0;display:flex;position:absolute;inset:0}.box{width:70px;height:56px;transition:transform .25s;position:relative}.toolbox-btn:hover .box{transform:translateY(-3px)}.toolbox-btn:active .box{transform:translateY(0)scale(.97)}.box-body{z-index:1;background:var(--tin-cream);height:44px;box-shadow:var(--tin-cream-edge), var(--tin-shadow);border-radius:8px 8px 16px 16px;place-items:center;padding-top:6px;display:grid;position:absolute;bottom:0;left:0;right:0}.box-paw{opacity:.9;width:20px;height:20px}.box-lid{z-index:2;background:var(--tin-green);height:17px;box-shadow:var(--tin-green-edge), 0 3px 6px #28461438;transform-origin:12% 100%;border-radius:14px 14px 6px 6px;transition:transform .45s cubic-bezier(.34,1.45,.5,1);position:absolute;top:4px;left:-3px;right:-3px}.box-lid:after{content:"";background:#3c6e1e38;border-radius:999px;width:18px;height:4px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.toolbox.open .box-lid{transform:translateY(-14px)rotate(-14deg)}.toolbox.holding .box-lid{transform:translateY(-9px)rotate(-18deg)}.box-peek{z-index:0;opacity:0;font-size:24px;line-height:1;transition:transform .35s cubic-bezier(.34,1.45,.5,1),opacity .2s;position:absolute;top:20px;left:50%;transform:translate(-50%,14px)}.box-peek svg{width:28px;height:28px;display:block}.toolbox.holding .box-peek{z-index:3;opacity:1;filter:drop-shadow(0 2px 2px #2846144d);transform:translate(-4%,-30px)rotate(14deg)}.toolbox-caption{transition:background .2s,color .2s}.toolbox.holding .toolbox-caption{background:var(--leaf);color:#fff}.tool-menu{width:0;height:0;position:absolute;top:30px;left:50%}.tool-item{width:62px;height:76px;color:var(--ink);cursor:pointer;opacity:0;visibility:hidden;background:#fffdf8f7;border:none;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;font:12px Jua,sans-serif;transition:transform .22s ease-in,opacity .18s,visibility 0s .22s;display:flex;position:absolute;top:-38px;left:-31px;transform:translateY(12px)scale(.3);box-shadow:inset 0 1px #fff,0 1px #5a6e3c1f,0 10px 22px #28461440}.toolbox.open .tool-item{opacity:1;visibility:visible;transform:translate(var(--x), var(--y)) rotate(var(--r)) scale(1);transition:transform .5s cubic-bezier(.34, 1.45, .5, 1) var(--d), opacity .2s var(--d), visibility 0s}.tool-icon{background:var(--leaf-pale);border-radius:50%;place-items:center;width:38px;height:38px;font-size:22px;line-height:1;transition:transform .2s;display:grid}.tool-icon svg{width:26px;height:26px}.tool-name{white-space:nowrap;letter-spacing:-.02em}.tool-item:hover,.tool-item:focus-visible{box-shadow:inset 0 0 0 2px var(--leaf), 0 12px 24px #2846144d;outline:none}.tool-item:hover .tool-icon,.tool-item:focus-visible .tool-icon{transform:scale(1.12)rotate(-8deg)}.empty{width:min(86vw,320px);box-shadow:var(--shadow);text-align:center;pointer-events:none;background:#fffdf6eb;border-radius:22px;padding:22px 20px;font-size:16px;line-height:1.6;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.empty[hidden]{display:none}.empty p{margin:0}.empty-title{font-size:20px;margin-bottom:6px!important}.empty b{background:var(--leaf);color:#fff;border-radius:50%;place-items:center;width:26px;height:26px;font-weight:400;display:inline-grid}.toast{left:50%;bottom:calc(80px + env(safe-area-inset-bottom));color:#fff;white-space:nowrap;opacity:0;pointer-events:none;background:#33402ae0;border-radius:999px;padding:10px 18px;font-size:15px;transition:opacity .3s,transform .3s;position:fixed;transform:translate(-50%,10px)}.toast.show{opacity:1;transform:translate(-50%)}dialog.sheet{background:var(--cream);width:min(92vw,380px);max-height:92dvh;color:var(--ink);-webkit-user-select:text;user-select:text;border:none;border-radius:24px;padding:0;box-shadow:0 20px 60px #0000004d}dialog.sheet::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#1e320f59}.sheet-body{flex-direction:column;gap:14px;padding:22px;display:flex;position:relative}.sheet h2{text-align:center;margin:0;font-size:22px;font-weight:400}#add-dialog{overflow-y:auto}.pick-row{justify-content:center;align-items:center;gap:8px;display:flex}.pick-arrow{color:var(--ink-soft);font-size:20px}.cutout-preview{color:var(--ink-soft);flex-direction:column;align-items:center;gap:2px;margin:0;font-size:13px;display:flex}.cutout-stage{background:radial-gradient(circle at 50% 40%,#cfe8b0,#a9d478);border-radius:50%;place-items:center;width:124px;height:124px;display:grid;overflow:hidden}.cutout-stage img{object-fit:contain;filter:drop-shadow(0 0 2px #fff)drop-shadow(0 0 2px #fff)drop-shadow(0 3px 3px #2846144d);max-width:84%;max-height:84%}.cutout-stage img.round{object-fit:cover;border:4px solid #fff;border-radius:50%;width:84%;height:84%}.cutout-status{text-align:center;color:var(--ink);padding:0 10px;font-size:13px;line-height:1.5}.round-toggle{color:var(--ink-soft);cursor:pointer;justify-content:center;align-items:center;gap:6px;font-size:14px;display:flex}.round-toggle[hidden]{display:none}.round-toggle input{width:18px;height:18px;accent-color:var(--leaf)}.photo-pick{aspect-ratio:1;cursor:pointer;background:var(--leaf-pale);text-align:center;width:124px;color:var(--ink-soft);border:3px dashed #b9d59a;border-radius:50%;flex:none;place-items:center;font-size:16px;line-height:1.5;display:grid;overflow:hidden}.photo-pick img{object-fit:cover;width:100%;height:100%}.field{flex-direction:column;gap:6px;font-size:16px;display:flex}.field input{font:inherit;color:var(--ink);background:#fff;border:2px solid #dfe9d2;border-radius:12px;width:100%;min-width:0;padding:10px 12px;font-size:17px}.field input:focus{border-color:var(--leaf);outline:none}.age-row{gap:10px;display:flex}.age-row label{white-space:nowrap;flex:1;align-items:center;gap:6px;display:flex}.error{color:#d9480f;text-align:center;min-height:1.3em;margin:0;font-size:14px}.actions{gap:10px;display:flex}.btn{font:inherit;cursor:pointer;border:none;border-radius:14px;flex:1;padding:12px;font-size:17px}.btn.primary{background:var(--leaf);color:#fff}.btn.primary:disabled{opacity:.6;cursor:wait}.btn.ghost{background:var(--leaf-pale);color:var(--ink)}dialog.card-sheet{--card-ink:#1f2a17;--card-soft:#7a8070;--card-line:#eef0ea;width:min(92vw,380px);max-height:94dvh;color:var(--card-ink);background:#fff;border-radius:26px;font-family:Pretendard Variable,Pretendard,system-ui,sans-serif;overflow:hidden auto;box-shadow:0 30px 80px #14230a59}dialog.card-sheet::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#14230a6b}dialog.card-sheet[open]{animation:.34s cubic-bezier(.2,.9,.3,1) card-in}@keyframes card-in{0%{opacity:0;transform:translateY(14px)scale(.97)}}.cat-card{outline:none;flex-direction:column;display:flex}.card-figure{background:#f3f1ec;border-radius:18px;place-items:center;min-height:200px;max-height:min(50dvh,440px);margin:10px 10px 0;display:grid;position:relative;overflow:hidden}.card-backdrop{filter:blur(28px)saturate(1.1);opacity:.4;background-position:50%;background-size:cover;position:absolute;inset:-30px;transform:scale(1.1)}.card-photo{object-fit:contain;max-width:100%;max-height:min(50dvh,440px);display:block;position:relative}.card-close{z-index:2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#ffffffd9;border:none;border-radius:50%;place-items:center;width:34px;height:34px;transition:background .2s;display:grid;position:absolute;top:10px;right:10px;box-shadow:0 1px 6px #0000001f}.card-close:hover{background:#fff}.card-close svg{stroke:#2b3324;stroke-width:2.4px;stroke-linecap:round;fill:none;width:14px;height:14px}.card-body{flex-direction:column;gap:16px;padding:18px 22px;display:flex}.card-sheet .card-head h2{letter-spacing:-.02em;text-align:left;word-break:keep-all;margin:0;font-size:24px;font-weight:700;line-height:1.25}.card-sub{color:var(--card-soft);align-items:center;gap:8px;margin:4px 0 0;font-size:14px;font-weight:500;display:flex}.card-dot{background:#c5cbbd;border-radius:50%;width:3px;height:3px}.card-actions{border-top:1px solid var(--card-line);justify-content:space-between;align-items:center;gap:12px;padding-top:14px;display:flex}.like-btn{color:#2b3324;cursor:pointer;background:#fff;border:1px solid #e2e5dc;border-radius:999px;align-items:center;gap:6px;height:40px;padding:0 16px 0 12px;font:600 15px Pretendard Variable,Pretendard,system-ui,sans-serif;transition:background .2s,border-color .2s,color .2s,transform .12s;display:inline-flex}.like-btn:hover{background:#fafaf6}.like-btn:active{transform:scale(.96)}.like-heart{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linejoin:round;width:20px;height:20px;transition:fill .2s,stroke .2s}.like-btn.liked{color:#e5394f;background:#fff4f6;border-color:#ffd3da}.like-btn.liked .like-heart{fill:#ff4d64;stroke:#ff4d64}.like-heart.pop{animation:.45s cubic-bezier(.3,1.8,.5,1) heart-pop}@keyframes heart-pop{40%{transform:scale(1.35)}}.like-caption{color:var(--card-soft);font-size:14px;font-weight:500}.like-caption b{color:var(--card-ink);font-weight:700}.delete-btn{color:#a3a89a;cursor:pointer;background:0 0;border:none;align-self:flex-start;margin-top:-4px;padding:0;font:500 13px Pretendard Variable,Pretendard,system-ui,sans-serif}.delete-btn:hover{color:#d9480f;text-decoration:underline}
