@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Gowun+Batang:wght@400;700&family=Nanum+Pen+Script&family=Caveat:wght@500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap");
:root{
  --dusk1:#24365a; --dusk2:#4d5687; --dusk3:#a77f98; --dusk4:#efb79a;
  --moss:#7fa077; --moss2:#b9d3a2; --fern:#1d3a3a;
  --paper:#f6efe1; --paper2:#ede3cf; --ink:#3b3226; --ink2:#7a6b55; --pencil:#8a7c66;
  --fly:#eaff9e; --honey:#ffc978; --cream:#fff8ea;
  --ui:"Gowun Dodum","Apple SD Gothic Neo",sans-serif;
  --title:"Gowun Batang",serif;
  --hand:"Nanum Pen Script",cursive;
  --hande:"Caveat",cursive;
  --serif:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:#1b2440;color:var(--cream);font-family:var(--ui);-webkit-font-smoothing:antialiased}
.phone{position:relative;width:390px;height:844px;overflow:hidden;background:var(--dusk1)}
.status{position:absolute;top:0;left:0;right:0;height:47px;display:flex;align-items:center;justify-content:space-between;padding:14px 28px 0 34px;font:600 15px/1 -apple-system,"Pretendard",sans-serif;letter-spacing:-.01em;z-index:20;color:var(--cream)}
.status.dark{color:var(--ink)}
.status .r{display:flex;gap:6px;align-items:center}
.wm{font-family:var(--serif);font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.hand{font-family:var(--hand)}
.tnum{font-variant-numeric:tabular-nums}
.frost{background:rgba(255,248,234,.14);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,248,234,.28)}
.paper{background-color:var(--paper);color:var(--ink)}
/* 시험판 */
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body{animation:fin .25s ease}
body.leave{opacity:0;transition:opacity .16s}
@keyframes fin{from{opacity:0}to{opacity:1}}
[data-tap],.tap{cursor:pointer;user-select:none;-webkit-user-select:none}
#toast{position:absolute;left:50%;bottom:180px;transform:translate(-50%,10px);opacity:0;transition:.25s;z-index:50;padding:11px 18px;border-radius:20px;background:rgba(36,40,72,.9);color:#fff8ea;font:14px/1.3 var(--ui);white-space:nowrap;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.25)}
#toast.on{opacity:1;transform:translate(-50%,0)}
.sheetbg{position:absolute;inset:0;background:rgba(20,22,45,.45);opacity:0;pointer-events:none;transition:.25s;z-index:40}
.sheetbg.on{opacity:1;pointer-events:auto}
.bsheet{position:absolute;left:0;right:0;bottom:0;z-index:41;border-radius:26px 26px 0 0;padding:12px 22px 30px;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);color:var(--ink);background:var(--paper)}
.bsheet.on{transform:none}
.bsheet .grab{width:40px;height:4px;border-radius:2px;background:rgba(90,74,58,.25);margin:0 auto 14px}