/* 직거래 — 필기체 없음: 본문 Noto Sans KR, 종이·장부 Noto Serif KR, 제목 Black Han Sans */
:root{
  --ink:#f3eee4; --muted:#a9a295; --line:rgba(255,255,255,.15);
  --amber:#ffc978; --accent:#8cc8ff; --cold:#9cc8ff; --pearl:#7fe3ff; --red:#ff5a4f; --paper:#f5eedb; --paper-ink:#2b2418;
  --body:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --serif:'Noto Serif KR','Batang','AppleMyungjo',serif;
  --display:'Black Han Sans','Noto Sans KR','Malgun Gothic',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#07080c;color:var(--ink);font-family:var(--body);overflow:hidden}
button{font:inherit;color:inherit}
.hidden{display:none!important}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#07080c}
#stage{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:#000;container-type:inline-size;user-select:none}
#scene,#cu-inner{position:absolute;inset:0}
.layer{position:absolute;inset:0;width:100%;height:100%;display:block}
#fx-tint{position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,8,.55) 100%)}
body.dark #scene{filter:brightness(.1) saturate(.6);transition:filter .3s}

/* 살펴볼 곳 */
.hits .hs{fill:transparent;cursor:pointer;stroke:transparent;stroke-width:3;transition:stroke .2s}
@media (hover:hover){.hits .hs:hover{stroke:rgba(255,240,210,.45);stroke-dasharray:7 9}}
body.show-hs .hits .hs{stroke:rgba(255,240,210,.6);stroke-dasharray:7 9}
#tip{position:absolute;z-index:45;pointer-events:none;transform:translate(-50%,-140%);background:rgba(10,10,14,.88);border:1px solid var(--line);border-radius:.5cqw;padding:.3cqw .8cqw;font-size:1.05cqw;white-space:nowrap}

/* ── HUD ── */
#hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:1cqw;padding:1cqw 1.4cqw;z-index:35;pointer-events:none;
  font-size:1.15cqw;text-shadow:0 1px 6px #000;background:linear-gradient(rgba(0,0,0,.45),transparent)}
#police{font-size:1.1cqw;font-weight:700;padding:.3cqw .9cqw;border-radius:99px;background:rgba(20,40,90,.7);border:1px solid rgba(120,170,255,.6);color:#cfe1ff;animation:pulse 1.6s infinite}
#loc{flex:1;color:rgba(243,238,228,.9)}
#clock{text-align:right;line-height:1.1;font-variant-numeric:tabular-nums}
#clock b{font-size:1.7cqw;font-weight:700;letter-spacing:.04em}
#clock small{display:block;font-size:.8cqw;color:var(--muted)}
#clock.urgent b{color:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.hud-btn{pointer-events:auto;background:rgba(12,12,16,.7);border:1px solid var(--line);border-radius:999px;padding:.45cqw 1.1cqw;cursor:pointer;font-size:1.1cqw;color:#fff}
.hud-btn:hover{border-color:var(--amber)}
#btn-phone{border-color:rgba(140,200,255,.6)}
#evt{position:absolute;left:50%;bottom:19cqw;transform:translateX(-50%);z-index:86;font-size:1.5cqw;font-weight:700;padding:.9cqw 2cqw;border-radius:99px;border:2px solid #ffcf6b;background:rgba(40,25,0,.9);color:#ffdf95;cursor:pointer;animation:pulse .9s infinite}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:4.5cqw;height:12cqw;border:none;background:transparent;font-size:5cqw;line-height:1;color:rgba(255,245,225,.45);cursor:pointer;z-index:10}
.nav:hover{color:#fff;text-shadow:0 0 1cqw var(--amber)}
#nav-l{left:.3cqw}#nav-r{right:.3cqw}

/* ── 소지품 ── */
#inv{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;max-width:86cqw;bottom:.9cqw;z-index:30;display:flex;gap:.55cqw;padding:.5cqw .7cqw;flex-wrap:wrap;justify-content:center;
  background:linear-gradient(to top,rgba(14,12,10,.9),rgba(14,12,10,.6));border:1px solid var(--line);border-radius:1cqw;min-height:5.4cqw}
#inv:empty{display:none}
.it{position:relative;width:4.4cqw;height:4.4cqw;border-radius:.6cqw;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.35cqw}
.it svg{width:100%;height:100%}
.it:hover{border-color:rgba(255,255,255,.45)}
.it.sel{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,201,120,.35),0 0 18px rgba(255,190,90,.3)}
.it .tip{position:absolute;bottom:112%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:1cqw;background:rgba(12,10,8,.95);border:1px solid var(--line);padding:.35cqw .7cqw;border-radius:.4cqw;opacity:0;pointer-events:none;transition:opacity .15s}
.it:hover .tip,.it.sel .tip{opacity:1}

/* ── 글: 설명(지문)과 목소리 자막은 서로 다른 상자 ── */
#texts{position:absolute;left:50%;bottom:7.4cqw;transform:translateX(-50%);width:72cqw;z-index:85;display:flex;flex-direction:column;align-items:center;gap:.6cqw;pointer-events:none}
#msg{pointer-events:none;max-width:66cqw;padding:.85cqw 1.5cqw;background:rgba(16,15,13,.92);border:1px solid rgba(255,220,170,.28);border-radius:.8cqw;font-size:1.3cqw;line-height:1.65;text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.6);animation:rise .25s ease}
#msg em{font-style:normal;color:var(--amber)}
#msg b{color:#fff}
#sub{pointer-events:none;display:flex;align-items:baseline;gap:.9cqw;max-width:72cqw;padding:.7cqw 1.2cqw .75cqw 1.4cqw;background:rgba(0,0,0,.82);border-radius:.5cqw;font-size:1.55cqw;line-height:1.5;color:#fff;animation:rise .2s ease}
#sub .who{flex:none;font-size:.72em;font-weight:700;letter-spacing:.04em;padding:.12em .6em;border-radius:99px;background:rgba(255,255,255,.12);color:var(--amber)}
#sub.w-radio .who{color:#b8f0c8}#sub.w-young .who{color:#ffb4c8}#sub.w-halbae .who{color:#c9d8ff}#sub.w-ajimae .who,#sub.w-banjang .who{color:#ffd0a0}
#sub .skip{pointer-events:auto;flex:none;align-self:center;background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:.8em;padding:0 0 0 .3em}
#sub .skip:hover{color:#fff}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
#cu:not(.hidden) ~ #texts #msg{font-size:1.15cqw;padding:.7cqw 1.3cqw}

/* ── 클로즈업 ── */
#cu{position:absolute;inset:0;background:rgba(3,3,6,.74);z-index:20;display:flex;align-items:flex-start;justify-content:center;padding-top:4.4cqw;animation:fade .2s}
#cu-inner{position:relative;inset:auto;width:74%;aspect-ratio:16/9;border-radius:.8cqw;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.8);background:#000}
#cu-close{position:absolute;top:4.9cqw;right:14cqw;width:3cqw;height:3cqw;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.65);cursor:pointer;font-size:1.2cqw;z-index:25}
@keyframes fade{from{opacity:0}}
.ctlwrap{position:absolute;inset:0;pointer-events:none}
.ctlwrap .ctl{pointer-events:auto}
.ctl{position:absolute;font-size:1.05cqw;color:#fff}
.btn{background:rgba(18,16,14,.9);border:1px solid rgba(255,230,190,.35);border-radius:.5cqw;padding:.45cqw .9cqw;cursor:pointer;font-size:1.1cqw;color:#fff}
.btn:hover{border-color:var(--amber);box-shadow:0 0 .8cqw rgba(255,190,90,.3)}
.btn:disabled{opacity:.35;cursor:default;box-shadow:none}
.btn.hot{border-color:var(--accent);color:var(--accent)}
.btn.cold{border-color:rgba(127,227,255,.6);color:var(--pearl)}
.btn.danger{border-color:#ff7b70;color:#ffb8b0}
.panel{background:rgba(12,11,10,.84);backdrop-filter:blur(3px);border:1px solid rgba(255,230,190,.2);border-radius:.8cqw;padding:.9cqw 1.1cqw}
.ptxt{font-size:1.1cqw;line-height:1.6;color:var(--ink)}
.ptitle{font-weight:700;font-size:1.15cqw;color:var(--amber);margin-bottom:.4cqw}

/* 쪽지·편지·안내문(명조, 종이) */
.note{background:var(--paper);color:var(--paper-ink);font-family:var(--serif);font-weight:500;font-size:1.5cqw;line-height:1.7;padding:1.2cqw 1.6cqw;box-shadow:0 10px 30px rgba(0,0,0,.55);border-radius:.25cqw;
  background-image:linear-gradient(rgba(120,90,40,.06) 1px,transparent 1px);background-size:100% 2.55cqw}
.note .sig{text-align:right;margin-top:.4cqw;font-size:.85em;color:#6a5a40}
.note.notice{background:#fbfbf7;font-family:var(--body);font-size:1.25cqw;line-height:1.6;border-top:.5cqw solid #c9302c;background-image:none}
.note.notice h4{margin:0 0 .5cqw;font-size:1.5cqw;color:#b02520;letter-spacing:.2em;text-align:center}

/* 번호 자물쇠 */
.dials{display:flex;gap:.5cqw;align-items:center}
.dial{display:flex;flex-direction:column;align-items:center;gap:.2cqw}
.dial .n{width:3.2cqw;height:3.6cqw;display:flex;align-items:center;justify-content:center;font-size:2.2cqw;font-weight:700;font-variant-numeric:tabular-nums;
  background:linear-gradient(#3a2f1c,#1d170e 45%,#3a2f1c);color:#ffe7b0;border:1px solid #8a7040;border-radius:.4cqw;text-shadow:0 1px 2px #000}
.dial .btn{padding:.1cqw .9cqw;font-size:.9cqw;line-height:1.2}

/* 사진 */
.photo-view{position:absolute;inset:3% 4%;display:flex;gap:2%;align-items:center;justify-content:center;background:rgba(5,5,6,.92);border-radius:.6cqw;padding:2%}
.photo-view .pic{width:56%;aspect-ratio:4/3;background-size:cover;background-position:center;box-shadow:0 0 0 .6cqw #efe6d0,0 12px 40px rgba(0,0,0,.7);border-radius:.1cqw;position:relative;flex:none}
.photo-view .cap{flex:1;font-family:var(--serif);font-size:1.45cqw;line-height:1.75;color:#f2ead8}
.photo-view .cap .yr{font-family:var(--display);font-size:2.6cqw;color:var(--amber);display:block;margin-bottom:.4cqw}
.sign223{position:absolute;display:flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--body);font-weight:700;color:#fff;white-space:nowrap}
.sign223 i{font-style:normal;background:#00a651;border-radius:99px;padding:0 .45em;font-size:.85em}

/* ── 오버레이(타이틀·메뉴·힌트·엔딩) ── */
#overlay{position:absolute;inset:0;z-index:75;background:rgba(6,6,9,.94);display:flex;align-items:safe center;justify-content:center;overflow-y:auto;padding:1.5cqw 0;animation:fade .35s}
.ov{max-width:70cqw;text-align:center;position:relative;z-index:1}
.ov h1{font-family:var(--display);font-weight:400;font-size:7cqw;margin:0;color:#fff;letter-spacing:.08em;text-shadow:0 0 1.8cqw rgba(255,70,60,.35),0 .3cqw 1cqw rgba(0,0,0,.8)}
.ov h1 small{display:block;font-family:var(--body);font-weight:700;font-size:.26em;letter-spacing:.35em;color:var(--accent);margin-top:.6em;text-shadow:0 1px 8px #000}
.ov h2{font-family:var(--display);font-weight:400;font-size:3.1cqw;margin:0 0 .6cqw;color:#fff}
.ov p{font-size:1.3cqw;line-height:1.75;color:#e9e2d4;margin:.4cqw 0}
.ov p+p{margin-top:.8cqw}
.ov .small{font-size:1.02cqw;color:var(--muted);line-height:1.7}
.ov .row{display:flex;gap:1cqw;justify-content:center;margin-top:1.8cqw;flex-wrap:wrap}
.ov .btn{font-size:1.3cqw;padding:.8cqw 1.8cqw}
.ov-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.6;animation:fade 2s ease}
.ov-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,9,.15),rgba(6,6,9,.88))}
.box{text-align:left;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:.8cqw;padding:1.1cqw 1.5cqw;margin:1cqw 0}
.stat{font-size:1.15cqw;color:#d8d0c0;line-height:1.9;margin-top:1cqw}
.stat b{color:var(--amber);font-weight:700}
.credit{font-size:.95cqw;color:var(--muted);line-height:1.7;margin-top:1.4cqw}

/* ── 연출 ── */
#cine{position:absolute;inset:0;z-index:70;background:#000;overflow:hidden}
.panel-img{position:absolute;inset:0;background-size:cover;background-position:center;animation:kb 12s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1cqw;padding:0 12%;animation:fade 1.2s}
.card .big{font-family:var(--display);font-size:3.6cqw;letter-spacing:.04em;color:#fff}
.card .mid{font-family:var(--serif);font-weight:700;font-size:2cqw;color:var(--amber)}
.card .txt{font-family:var(--serif);font-size:1.6cqw;line-height:1.9;color:#eee6d6}
.card.over{background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.2) 60%,transparent);justify-content:flex-end;padding-bottom:14%}
.cine-skip{position:absolute;right:1.4cqw;top:1.2cqw;z-index:3}
.cine-hint{position:absolute;right:2%;bottom:1.2%;font-size:.9cqw;color:rgba(255,255,255,.4);z-index:3}
.shake{animation:shake .5s linear}
.shake-long{animation:shake .5s linear 4}
@keyframes shake{10%,90%{transform:translate(-1%,.5%)}20%,80%{transform:translate(1.4%,-1%)}30%,50%,70%{transform:translate(-2%,1.2%)}40%,60%{transform:translate(2%,-1.2%)}}

/* 실패: 철거 */
.stamp{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-10deg);font-family:var(--display);font-size:11cqw;color:#ff3b30;border:.9cqw solid #ff3b30;border-radius:1.4cqw;padding:.3cqw 3cqw;line-height:1.1;
  text-shadow:0 0 2cqw rgba(255,59,48,.6);animation:stamp .35s cubic-bezier(.2,1.6,.4,1) both;z-index:4;background:rgba(40,0,0,.35)}
@keyframes stamp{from{transform:translate(-50%,-50%) rotate(-10deg) scale(3);opacity:0}to{opacity:1}}
.dust{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 50% 60%,rgba(200,180,150,.55),rgba(120,100,80,.35) 40%,transparent 75%);animation:dust 4s ease-out forwards}
@keyframes dust{from{opacity:0;transform:scale(.6)}20%{opacity:1}to{opacity:.35;transform:scale(1.5)}}
.debris{position:absolute;width:1.2cqw;height:.8cqw;background:#8a7a66;border-radius:.2cqw;z-index:3;animation:fall 1.6s cubic-bezier(.3,.1,.7,1) forwards}
@keyframes fall{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),60cqw) rotate(var(--r))}}
.red-flash{position:absolute;inset:0;background:rgba(255,40,20,.35);animation:flash .9s ease-out forwards;z-index:2}


/* ── 직거래 전용 ── */
.badge{position:absolute;transform:translate(-50%,-50%);font-size:1.3cqw;font-weight:700;padding:.4cqw 1cqw;border-radius:99px;background:rgba(0,0,0,.75);border:1px solid rgba(140,200,255,.6);color:#d7ebff}
.ringbadge{position:absolute;font-size:1.4cqw;padding:.7cqw 1.4cqw;border-radius:99px;border:2px solid #7dffb0;background:rgba(0,40,20,.9);color:#c8ffe0;cursor:pointer;animation:ringshake .35s linear infinite}
@keyframes ringshake{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.peephole{position:absolute;border-radius:50%;overflow:hidden;box-shadow:0 0 0 .4cqw #0a0a0a,0 0 4cqw rgba(0,0,0,.9) inset;cursor:pointer}
.peephole div{position:absolute;inset:-12%;background-size:cover;background-position:center;transform:scale(1.18);filter:saturate(.8) contrast(1.1)}
.peephole::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 45%,rgba(0,0,0,.85) 72%)}
.chatpanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34cqw;background:#f4f5f7;border-radius:1.6cqw;padding:1.2cqw 1.2cqw 1.6cqw;box-shadow:0 20px 60px rgba(0,0,0,.7);color:#222;animation:fade .6s}
.chatpanel .chat-h{font-weight:700;font-size:1.25cqw;padding-bottom:.8cqw;border-bottom:1px solid #ddd;margin-bottom:.8cqw;color:#e8742c}
.chatpanel .bub{max-width:80%;padding:.6cqw .9cqw;border-radius:1cqw;margin:.45cqw 0;font-size:1.2cqw;line-height:1.5}
.chatpanel .bub.you{background:#fff;border:1px solid #e3e3e3}
.chatpanel .bub.me{background:#ffe7c4;margin-left:auto}
.door-crack{position:absolute;inset:0;background:#000}
.door-crack::after{content:'';position:absolute;left:49.6%;top:8%;bottom:8%;width:.3%;background:linear-gradient(transparent,rgba(255,235,200,.9) 20%,rgba(255,235,200,.9) 80%,transparent);box-shadow:0 0 2cqw rgba(255,220,170,.6)}
/* 월패드 */
.wpwrap{position:absolute;overflow:hidden;border-radius:.3cqw}
.wp{position:absolute;inset:0;background:linear-gradient(#0e1a2b,#0a1220);color:#dbe8f7;display:flex;flex-direction:column;font-size:1.05cqw}
.wp.off{background:#050608}
.wp-top{display:flex;align-items:baseline;gap:.6cqw;padding:.7cqw 1cqw;background:rgba(255,255,255,.06);font-size:1.2cqw}
.wp-top b{font-size:1.35cqw;color:#fff}.wp-top span{margin-left:auto;font-variant-numeric:tabular-nums}
.wp-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.6cqw;padding:.9cqw}
.wp-grid button{border:1px solid rgba(140,190,255,.3);background:rgba(40,70,120,.35);color:#e6f0ff;border-radius:.5cqw;font-size:1.05cqw;line-height:1.5;cursor:pointer}
.wp-grid button:hover{background:rgba(60,100,170,.5)}
.wp-h{display:flex;align-items:center;gap:.6cqw;padding:.6cqw .9cqw;background:rgba(255,255,255,.06);font-weight:700}
.wp-h button{border:none;background:none;color:#9cc8ff;font-size:1.6cqw;cursor:pointer;line-height:1}
.wp-h .live{margin-left:auto;color:#ff6b6b;font-size:.9cqw}
.wp-list{padding:.6cqw .9cqw;overflow:auto}
.wp-list div{display:flex;gap:1cqw;padding:.45cqw 0;border-bottom:1px solid rgba(255,255,255,.08)}
.wp-list i{font-style:normal;color:#9fb3cc;margin-left:auto}
.wp-cam{flex:1;background-size:cover;background-position:center;filter:grayscale(.4) contrast(1.1)}
/* 폰 */
.phone{position:absolute;background:#07090d;border-radius:2.2cqw;border:.35cqw solid #20242c;box-shadow:0 20px 60px rgba(0,0,0,.8);overflow:hidden;color:#eef2f8;display:flex;flex-direction:column}
.phone .sbar{display:flex;justify-content:space-between;padding:.5cqw 1.1cqw .3cqw;font-size:.85cqw;opacity:.85}
.phone .scr{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.lockscr{align-items:center;padding-top:1.4cqw;background:radial-gradient(ellipse at 50% 0%,#1d2a44,#07090d 70%)}
.big-time{font-size:3.4cqw;font-weight:300;letter-spacing:.02em}
.small-date{font-size:.95cqw;opacity:.8;margin-bottom:.8cqw}
.notif{font-size:.9cqw;background:rgba(255,255,255,.1);border-radius:.6cqw;padding:.35cqw .8cqw}
.lock-msg{font-size:.9cqw;opacity:.75;margin-top:.6cqw}
.patwrap{position:relative;width:15cqw;aspect-ratio:1;margin-top:1cqw}
.pgrid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center}
.pdot{width:2.2cqw;height:2.2cqw;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.05);cursor:pointer}
.pdot.on{background:#7fc0ff;border-color:#bfe0ff;box-shadow:0 0 1cqw #7fc0ff}
.smudge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.home{padding:1.2cqw .8cqw;background:linear-gradient(#162033,#0b0f18)}
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:1cqw}
.app{border:none;background:rgba(255,255,255,.07);color:#fff;border-radius:1cqw;padding:.8cqw .2cqw;font-size:.95cqw;cursor:pointer}
.app b{display:block;font-size:2cqw;font-weight:400}.app.ghost{opacity:.4;cursor:default}
.wall-hint{margin-top:auto;font-size:.8cqw;opacity:.5;text-align:center}
.list,.thread,.dial{background:#0c1017}
.bar{display:flex;align-items:center;gap:.4cqw;padding:.55cqw .7cqw;font-weight:700;font-size:1.05cqw;border-bottom:1px solid rgba(255,255,255,.08)}
.back{border:none;background:none;color:#8cc8ff;font-size:1.8cqw;line-height:1;cursor:pointer;padding:0 .3cqw}
.list .row{display:flex;flex-direction:column;align-items:flex-start;gap:.15cqw;width:100%;text-align:left;border:none;border-bottom:1px solid rgba(255,255,255,.06);background:none;color:#eef2f8;padding:.6cqw .8cqw;cursor:pointer;font-size:.9cqw;position:relative}
.list .row:hover{background:rgba(255,255,255,.05)}
.list .row span{opacity:.65;font-size:.82cqw}.list .row i{position:absolute;right:.8cqw;top:.6cqw;font-style:normal;opacity:.5;font-size:.75cqw}
.msgs{flex:1;overflow:auto;padding:.6cqw .7cqw}
.dhead{text-align:center;font-size:.75cqw;opacity:.55;margin:.5cqw 0}
.thread .bub{max-width:86%;padding:.5cqw .7cqw;border-radius:.8cqw;margin:.35cqw 0;font-size:.9cqw;line-height:1.5;position:relative}
.thread .bub.you{background:#1f2633}
.thread .bub.me{background:#2f6fd6;margin-left:auto}
.thread .bub i{display:block;font-style:normal;font-size:.7cqw;opacity:.55;margin-top:.15cqw;text-align:right}
.num{font-size:2.2cqw;text-align:center;padding:1cqw 0 .6cqw;letter-spacing:.08em;min-height:3.6cqw}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:.5cqw;padding:0 1.2cqw}
.keys button{border:none;border-radius:50%;aspect-ratio:1;background:rgba(255,255,255,.08);color:#fff;font-size:1.6cqw;cursor:pointer}
.dialrow{display:flex;justify-content:center;align-items:center;gap:1.4cqw;padding:.8cqw}
.callbtn{width:3.6cqw;height:3.6cqw;border-radius:50%;border:none;background:#27c46b;font-size:1.6cqw;cursor:pointer}
.del{border:none;background:none;color:#aaa;font-size:1.5cqw;cursor:pointer}
.callscr{align-items:center;padding:2cqw 1cqw 1.2cqw;background:linear-gradient(#10243c,#070b12)}
.caller{font-size:2.2cqw;font-weight:700}.cstat{font-size:1cqw;opacity:.75;margin:.3cqw 0 1cqw}
.said{font-size:.95cqw;background:rgba(255,255,255,.08);border-radius:.6cqw;padding:.5cqw .7cqw;margin-bottom:.8cqw;line-height:1.5}
.choices{display:flex;flex-direction:column;gap:.5cqw;width:100%}
.choices .btn{font-size:.95cqw;line-height:1.45;text-align:left;white-space:normal}
.hangup{margin-top:auto;padding:.7cqw 1.6cqw;border-radius:99px;border:none;background:#e5484d;color:#fff;font-size:1cqw;font-weight:700;cursor:pointer}
/* 종이 */
.note.receipt{font-family:var(--body);font-size:1.15cqw;line-height:1.7;background:#fbfbf8;border-top:.5cqw dashed #ccc;background-image:none}
.note.receipt h4{margin:0 0 .4cqw;font-size:1.5cqw}.note.receipt hr{border:none;border-top:1px dashed #bbb;margin:.6cqw 0}
.note.ledger{font-family:var(--body);background:#f3eee2;background-image:none;font-size:1.05cqw}
.note.ledger h4{margin:0 0 .6cqw;font-size:1.5cqw}
.note.ledger table{width:100%;border-collapse:collapse}.note.ledger th,.note.ledger td{border-bottom:1px solid #cdbf9f;padding:.35cqw .4cqw;text-align:left}
.note.ledger tr:last-child td{color:#b3261e;font-weight:700}
.sosbtn{margin-top:auto;margin-bottom:1.6cqw;font-size:1cqw;padding:.5cqw 1.4cqw;border-radius:99px;border-color:#e5484d;color:#ffb3b0}