:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Pretendard,Noto Sans KR,system-ui,sans-serif}*{box-sizing:border-box}body{color:#fff;background:#000;place-items:center;min-height:100dvh;margin:0;display:grid;overflow:hidden auto}.phone-frame-wrap{place-items:center;width:100%;padding:20px;display:grid}.phone-frame{background:linear-gradient(145deg,#3b3b40 0%,#0f0f13 60%,#2f2f34 100%);border:1px solid #fff3;border-radius:52px;width:min(420px,100vw);height:min(860px,100dvh - 24px);padding:12px;position:relative;box-shadow:0 20px 45px #0000008c,inset 0 0 0 1px #ffffff1f}.phone-notch{z-index:5;background:#0a0a0f;border-radius:999px;width:140px;height:28px;position:absolute;top:18px;left:50%;transform:translate(-50%)}.app-shell{background:#000;border-radius:40px;width:100%;height:100%;position:relative;overflow:hidden}.splash,.camera{position:absolute;inset:0}.bg-loop,#cameraPreview{object-fit:cover;width:100%;height:100%}.overlay,.camera-overlay{background:linear-gradient(#00000073,#0009);position:absolute;inset:0}.brand{z-index:2;pointer-events:none;text-shadow:0 2px 8px #00000080;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.brand-logo{width:min(54vw,220px);height:auto}.wish-trigger{z-index:3;color:#e6e6ece6;letter-spacing:.02em;white-space:normal;word-break:keep-all;writing-mode:horizontal-tb;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer;text-shadow:0 0 14px #ffffff1f;background:0 0;border:1px solid #ffffff59;border-radius:10px;padding:.36em .9em;font-size:clamp(2rem,10vw,3.3rem);animation:2.8s ease-in-out infinite wishFade;position:absolute;bottom:74px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #ffffff1a,0 6px 24px #00000059}.wish-trigger:disabled{opacity:.9;cursor:wait;animation:none}.controls{flex-direction:column;align-items:center;gap:16px;display:flex;position:absolute;bottom:28px;left:0;right:0}.record-btn{cursor:pointer;background:#fff;border:4px solid #fff;border-radius:50%;place-items:center;width:84px;height:84px;display:grid;position:relative;overflow:hidden}.record-btn.recording{background:#dd2038;border-color:#ffc8cf;animation:1s infinite pulse}.record-logo{object-fit:contain;z-index:1;position:relative}.record-progress-ring{--record-progress:0turn;pointer-events:none;opacity:0;background:conic-gradient(#fff var(--record-progress), #ffffff2e 0turn);filter:drop-shadow(0 0 6px #ffffffbf);border-radius:50%;position:absolute;inset:3px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 calc(100% - 7px))}.record-btn.recording .record-progress-ring{opacity:1;animation:30s linear forwards recordProgress}.retake-btn,.send-wish-btn{color:#f8fbff;letter-spacing:.14em;cursor:pointer;text-transform:none;text-shadow:0 0 12px #fff3;background:linear-gradient(#121422c7 0%,#05060ce0 100%);border:1px solid #ebf0ff7a;border-radius:12px;min-width:220px;padding:12px 22px;font-size:1.06rem;font-weight:700;transition:transform .14s,border-color .14s,box-shadow .14s,background .14s;box-shadow:inset 0 0 0 1px #ffffff14,0 10px 22px #00000073}.retake-btn{color:#e8ffe6;background:linear-gradient(#43842deb 0%,#346f21f5 100%);border-color:#8db871cc}.send-wish-btn{color:#1e241f;background:linear-gradient(#f7f9f7f5 0%,#e2e8e2f5 100%);border-color:#ffffffb3}.retake-btn:hover,.send-wish-btn:hover{border-color:#fffc;transform:translateY(-1px);box-shadow:inset 0 0 0 1px #fff3,0 14px 30px #00000085}.retake-btn:active,.send-wish-btn:active{background:linear-gradient(#0f111ee6 0%,#04050af0 100%);transform:translateY(0)}.message-screen{text-align:center;text-shadow:0 5px 16px #00000059;letter-spacing:.05em;place-items:center;font-size:clamp(1.5rem,6vw,2.2rem);font-weight:700;display:grid;position:absolute;inset:0}.sending-text{font-weight:600}.media-pending{opacity:0;pointer-events:none}.media-ready{opacity:1;transition:opacity .22s}.timer-bg{background:#000}.timer-screen{text-align:center;background:#000;place-content:center;justify-items:center;gap:22px;display:grid;position:absolute;inset:0}.timer-dial{background:radial-gradient(circle at 50% 48%,#121213f2 0%,#040405 76%);border:1px solid #ffffff59;border-radius:50%;width:240px;height:240px;position:relative;overflow:hidden}.dial-fill{transform-origin:bottom;background:linear-gradient(#ff4040d1 0%,#b40000eb 90%);transition:transform .9s linear;position:absolute;inset:0}.dial-tick{background:#f3f6ff;border-radius:1px;width:10px;height:10px;position:absolute;top:50%;left:50%}.dial-hand.second{transform-origin:50% 100%;clip-path:polygon(50% 0,72% 9%,57% 100%,43% 100%,28% 9%);filter:drop-shadow(0 0 7px #ff334a73);background:linear-gradient(#ff2340 4%,#d90c28 100%);width:22px;height:104px;position:absolute;top:50%;left:50%}.dial-center{background:#ff3852;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.timer-value{letter-spacing:.04em;white-space:nowrap;text-shadow:0 0 16px #ffffff38;margin:0;font-family:Inter,Pretendard,sans-serif;font-size:clamp(2.2rem,10vw,5rem);font-weight:800}@media (max-width:768px){.phone-frame-wrap{padding:10px}.phone-frame{border:1px solid #fff3;border-radius:36px;width:min(420px,100vw - 20px);height:min(860px,100dvh - 20px);padding:10px;box-shadow:0 16px 32px #00000080,inset 0 0 0 1px #ffffff1f}.phone-notch,.app-shell{border-radius:28px}.phone-notch{width:120px;height:24px;display:block;top:14px}.wish-trigger{bottom:max(32px, env(safe-area-inset-bottom));font-size:clamp(1.7rem,8vw,2.6rem)}.controls{bottom:max(20px, env(safe-area-inset-bottom))}}@keyframes wishFade{0%,to{opacity:.18}50%{opacity:1}}@keyframes pulse{0%{box-shadow:0 0 #dd203899}70%{box-shadow:0 0 0 20px #dd203800}to{box-shadow:0 0 #dd203800}}@property --record-progress{syntax:"<angle>";inherits:false;initial-value:0turn}@keyframes recordProgress{0%{--record-progress:0turn}to{--record-progress:1turn}}.permission-notice-layer{z-index:30;padding:0 20px max(118px, env(safe-area-inset-bottom) + 72px);-webkit-backdrop-filter:grayscale(.75)blur(5px);backdrop-filter:grayscale(.75)blur(5px);background:#14141880;align-items:end;display:grid;position:absolute;inset:0}.permission-notice-box{text-align:center;white-space:normal;word-break:keep-all;letter-spacing:.01em;color:#f5f7fff5;background:linear-gradient(90deg,#383940f0,#525256e6 52%,#383940f0);border:1px solid #fff3;border-radius:22px;width:min(100%,500px);margin:0 auto;padding:14px 20px;font-family:Pretendard,Noto Sans KR,system-ui,sans-serif;font-size:clamp(.95rem,2vw,1.25rem);font-weight:500;line-height:1.25;animation:2.4s forwards noticeSlideFade;box-shadow:0 14px 32px #0000006b,inset 0 0 0 1px #ffffff14}@keyframes noticeSlideFade{0%{opacity:0;transform:translateY(20px)}14%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(14px)}}