:root{--cream:#fff3e4;--cream-dim:#fff3e4b8;--rose:#ffb59c;--rose-deep:#e8775f;--panel:#1c101875;--panel-strong:#180d14b3;--line:#ffe4d22e;--serif:"Gowun Batang", "Apple SD Gothic Neo", serif;--sans:"Gowun Dodum", "Apple SD Gothic Neo", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased;background:#1a1018;margin:0;overflow:hidden}canvas{touch-action:none}button{font:inherit;color:inherit;cursor:pointer}.overlay{pointer-events:none;position:fixed;inset:0}.overlay>*{pointer-events:auto}.top{top:max(18px, env(safe-area-inset-top));pointer-events:none;justify-content:space-between;align-items:flex-start;transition:opacity 1.2s;display:flex;position:absolute;left:22px;right:22px}.top>*{pointer-events:auto}.top.is-hidden{opacity:0}.brand{text-shadow:0 1px 14px #3c141e8c}.brand h1{font-family:var(--serif);letter-spacing:.04em;margin:2px 0 6px;font-size:clamp(22px,3.2vw,30px);font-weight:700}.clock{color:var(--cream-dim);margin:0;font-size:14px}.clock .dot{color:var(--rose)}.count{color:var(--cream-dim);letter-spacing:.02em;margin:4px 0 0;font-size:12px}.live{margin-top:6px}.live-line{color:var(--cream-dim);align-items:center;gap:6px;margin:0;font-size:12px;display:flex}.live-dot{background:#7bd88f;border-radius:50%;width:7px;height:7px;box-shadow:0 0 8px #7bd88f}.live-dot.connecting{background:#e8c36a;box-shadow:0 0 8px #e8c36a}.live-news{font-family:var(--serif);color:var(--rose);opacity:0;margin:4px 0 0;font-size:13px;transition:opacity .6s,transform .6s;transform:translateY(-4px)}.live-news.show{opacity:1;transform:none}.lock-actions{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;display:flex}.lock-note{color:var(--cream-dim);margin:8px 0 0;font-size:12px}.card-panel{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}.card-panel .lock-note:first-child{margin-top:0}.key-guide{text-align:left}.key-guide .lock-actions{justify-content:center}.key-guide .guide-title{color:var(--cream);margin:0 0 6px;font-size:13px}.key-guide ul{color:var(--cream-dim);margin:0 0 10px;padding-left:18px;font-size:12px;line-height:1.55}.key-guide b{color:var(--rose);font-weight:600}.link-btn.kakao{color:#191600;background:#fee500;border-color:#fee500}.card-cta{justify-content:center;width:100%;margin-top:10px}.lock-card.from-link{min-width:min(320px,100vw - 32px)}.manual-link input{border:1px solid var(--line);width:100%;color:var(--cream);background:#ffffff0f;border-radius:10px;margin-top:6px;padding:8px 10px;font-size:12px}.link-btn{border:1px solid var(--line);background:#ffffff0f;border-radius:999px;padding:6px 14px;font-size:13px}.link-btn.dim{color:var(--cream-dim);font-size:12px}.top-actions{gap:8px;display:flex}.icon-btn{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(14px);border-radius:50%;place-items:center;width:42px;height:42px;transition:background .2s,transform .2s;display:grid}.icon-btn:hover{background:var(--panel-strong)}.icon-btn.small{width:32px;height:32px}.bottom{left:22px;right:22px;bottom:max(20px, env(safe-area-inset-bottom));pointer-events:none;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;display:grid;position:absolute}.bottom>*{pointer-events:auto}.time{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);border-radius:999px;justify-self:start;align-items:center;gap:8px;padding:6px 14px 6px 6px;display:flex}.time-ico{color:var(--rose);font-size:13px}.time input[type=range]{width:clamp(110px,16vw,200px);accent-color:var(--rose)}.cta{font-family:var(--serif);letter-spacing:.04em;color:#3a1410;background:linear-gradient(135deg,#ffd6bf 0%,#ff9f86 55%,#f07a6a 100%);border:none;border-radius:999px;align-items:center;gap:8px;padding:13px 26px 13px 20px;font-size:17px;font-weight:700;transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 10px 34px #f06e5a6b,inset 0 1px #fff9}.cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px #f06e5a8c,inset 0 1px #fff9}.cta svg{color:#6a1f18}.cta.here{animation:2.2s ease-in-out infinite here-glow}@keyframes here-glow{0%,to{box-shadow:0 10px 34px #f06e5a6b,inset 0 1px #fff9}50%{box-shadow:0 10px 44px #ff9678d9,0 0 0 6px #ffbea02e,inset 0 1px #fff9}}.side-actions{justify-self:end;gap:8px;display:flex}.ghost-btn{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(14px);white-space:nowrap;border-radius:999px;padding:10px 16px;font-size:14px;transition:background .2s}.ghost-btn:hover{background:var(--panel-strong)}.ghost-btn b{color:var(--rose);margin-left:4px}.sheet{left:50%;bottom:max(18px, env(safe-area-inset-bottom));background:var(--panel-strong);border:1px solid var(--line);-webkit-backdrop-filter:blur(20px);border-radius:24px;width:min(560px,100vw - 32px);padding:20px 22px 18px;animation:.45s cubic-bezier(.2,.8,.2,1) rise;position:absolute;transform:translate(-50%);box-shadow:0 20px 60px #00000059}.sheet h2,.key-card h2{font-family:var(--serif);margin:0 0 14px;font-size:19px;font-weight:700}.row{flex-wrap:wrap;gap:8px;display:flex}.shapes .shape{border:1px solid var(--line);color:var(--cream-dim);background:#ffffff0a;border-radius:14px;flex-direction:column;flex:1;align-items:center;gap:4px;padding:10px 6px 8px;font-size:13px;transition:all .2s;display:flex}.shapes .shape.on{color:var(--cream);border-color:var(--rose);background:#ffaa8c24}.swatches{gap:9px;margin:14px 0}.swatch{border:2px solid #ffffff40;border-radius:50%;width:28px;height:28px;transition:transform .15s;box-shadow:inset 0 -3px 6px #00000040,inset 0 2px 4px #ffffff4d}.swatch.on{border-color:var(--cream);outline:2px solid var(--rose);outline-offset:2px;transform:scale(1.18)}.engrave{grid-template-columns:1fr auto;align-items:end;gap:8px;display:grid}.engrave-main{grid-column:1/-1}.engrave .count{opacity:.7;margin-left:4px;font-size:11px;font-style:normal}.engrave-tip{color:var(--cream-dim);margin:8px 0 0;font-size:12px}.size-row{margin-top:10px}.engrave label{color:var(--cream-dim);gap:5px;font-size:12px;display:grid}.engrave input{border:1px solid var(--line);width:100%;color:var(--cream);font-family:var(--serif);background:#ffffff0f;border-radius:12px;outline:none;padding:10px 12px;font-size:16px}.engrave input:focus{border-color:var(--rose)}.engrave input.nudge{border-color:var(--rose);animation:1.6s ease-in-out infinite nudge-glow}@keyframes nudge-glow{0%,to{box-shadow:0 0 #ffaa9600}50%{box-shadow:0 0 0 4px #ffaa9647}}.nudge-msg{color:var(--rose);margin:8px 0 0;font-size:13px}.ink-row{align-items:center;gap:10px;margin-top:12px;display:flex}.ink-label{color:var(--cream-dim);flex:none;font-size:12px}.inks{align-items:center;gap:8px}.swatch.small{width:22px;height:22px}.ink-chip{border:1px solid var(--line);color:var(--cream-dim);background:#ffffff0f;border-radius:999px;padding:4px 11px;font-size:12px}.ink-chip.on{border-color:var(--rose);color:var(--cream)}.heart-chip{border:1px solid var(--line);color:var(--rose);background:#ffffff0f;border-radius:12px;padding:10px 12px;font-size:14px}.actions{justify-content:flex-end;align-items:center;margin-top:16px}.hint{top:max(96px, calc(env(safe-area-inset-top) + 80px));background:var(--panel-strong);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);border-radius:999px;align-items:center;gap:12px;padding:8px 8px 8px 20px;animation:.4s rise;display:flex;position:absolute;left:50%;transform:translate(-50%)}.hint p{font-family:var(--serif);white-space:nowrap;margin:0}.place-bar{left:50%;bottom:max(22px, env(safe-area-inset-bottom));justify-items:center;gap:8px;animation:.4s rise;display:grid;position:absolute;transform:translate(-50%)}.place-tip,.controls{color:var(--cream-dim);text-shadow:0 1px 8px #1e0a14cc;white-space:nowrap;margin:0;font-size:12px}.controls{right:22px;bottom:calc(max(20px, env(safe-area-inset-bottom)) + 58px);pointer-events:none;transition:opacity 1.2s;position:absolute}.controls.gone{opacity:0}body.flash:after{content:"";pointer-events:none;background:#fff;animation:.5s ease-out forwards flash;position:fixed;inset:0}@keyframes flash{0%{opacity:.75}to{opacity:0}}.key-card{left:50%;bottom:max(28px, env(safe-area-inset-bottom));text-align:center;background:var(--panel-strong);border:1px solid var(--line);-webkit-backdrop-filter:blur(20px);border-radius:24px;width:min(420px,100vw - 32px);padding:22px 24px 18px;animation:.5s cubic-bezier(.2,.8,.2,1) rise;position:absolute;transform:translate(-50%)}.key-card .actions{justify-content:center}.key-date{letter-spacing:.2em;color:var(--rose);margin:0 0 4px;font-size:12px}.key-q{color:var(--cream-dim);margin:0}.key-note{color:var(--cream-dim);margin:12px 0 0;font-size:12px}.lock-card{left:50%;bottom:calc(max(20px, env(safe-area-inset-bottom)) + 76px);background:var(--panel-strong);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);text-align:center;border-radius:18px;min-width:220px;max-width:calc(100vw - 32px);padding:14px 44px 14px 22px;animation:.4s rise;position:absolute;transform:translate(-50%)}.lock-card.mine{border-color:#ffb59c99}.lock-label{color:var(--rose);margin:0 0 6px;font-size:12px}.lock-text{font-family:var(--serif);word-break:keep-all;margin:0;font-size:20px;font-weight:700}.lock-text.sub{color:var(--cream-dim);margin-top:2px;font-size:14px;font-weight:400}.close{width:30px;height:30px;color:var(--cream-dim);background:0 0;border:none;font-size:20px;position:absolute;top:6px;right:8px}.toast{top:max(100px, calc(env(safe-area-inset-top) + 84px));background:var(--panel-strong);border:1px solid var(--line);font-family:var(--serif);opacity:0;pointer-events:none;white-space:nowrap;border-radius:999px;padding:10px 22px;transition:opacity .5s,transform .5s;position:absolute;left:50%;transform:translate(-50%,-8px)}.toast.show{opacity:1;transform:translate(-50%)}.intro{text-align:center;pointer-events:none;text-shadow:0 2px 24px #46141e99;background:radial-gradient(at 50% 60%,#280e1a00 0%,#1a0a1459 100%);place-content:center;transition:opacity 1.6s;display:grid;position:absolute;inset:0}.intro.gone{opacity:0}.intro h1{font-family:var(--serif);letter-spacing:.06em;margin:8px 0 10px;font-size:clamp(34px,6vw,58px);animation:2.2s .3s both fade}.intro-sub{color:var(--cream-dim);margin:0;animation:2.2s .8s both fade}.intro-load{color:var(--cream-dim);margin-top:18px;font-size:13px}@keyframes rise{0%{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%)}}@keyframes fade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (width<=640px){.bottom{grid-template-columns:1fr;justify-items:center;gap:10px}.time,.side-actions{justify-self:center}.lock-card{bottom:calc(max(20px, env(safe-area-inset-bottom)) + 170px)}.controls{left:50%;right:auto;bottom:calc(max(20px, env(safe-area-inset-bottom)) + 218px);transform:translate(-50%)}.place-tip{white-space:normal;text-align:center}.sheet{border-radius:20px;padding:14px 14px 12px}.sheet h2{margin-bottom:10px;font-size:16px}.shapes .shape{flex-direction:row;justify-content:center;gap:4px;padding:6px;font-size:12px}.shapes .shape svg{width:20px;height:20px}.shapes{gap:6px}.shapes .shape span{display:none}.swatches{scrollbar-width:none;flex-wrap:nowrap;gap:8px;margin:10px 0;padding:4px 2px;overflow-x:auto}.swatch{flex:none;width:26px;height:26px}.engrave input{padding:8px 10px;font-size:15px}.heart-chip{padding:8px 10px}.actions{margin-top:12px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}