@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css";
:root{--brand:#7b3f8c;--brand-dark:#653373;--brand-deep:#52295e;--brand-bg:#f5ecf8;--accent:#8a5a16;--accent-bg:#fff4df;--crit:#b9473f;--crit-bg:#fbecea;--ink:#15212b;--body:#65717c;--faint:#909aa2;--line:#dce3e8;--canvas:#f4f7fa;--surface:#fff;--bubble-mine:var(--brand-bg);--bubble-theirs:#fff;--radius-card:17px;--radius-cta:14px;--radius-field:13px;--radius-bubble:16px;--shadow-card:none;--font:"Pretendard Variable", Pretendard, -apple-system, system-ui, "Malgun Gothic", sans-serif;--fs-body:16px;--fs-small:13px;--fs-title:20px;--fs-face:24px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px}html{font-family:var(--font);color:var(--ink);background:var(--canvas);font-size:var(--fs-body);-webkit-text-size-adjust:100%}.num{font-variant-numeric:tabular-nums}*,:before,:after{box-sizing:border-box}body{min-height:100dvh;margin:0;line-height:1.5}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}textarea{resize:none}input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:20px;height:20px}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.fade-in{animation:.2s ease-out fade-in}.page{background:var(--canvas);flex-direction:column;max-width:480px;min-height:100dvh;margin:0 auto;display:flex}.page-pad{padding:var(--space-4)}.stack{gap:var(--space-3);flex-direction:column;display:flex}.row{align-items:center;gap:var(--space-2);display:flex}.grow{flex:1;min-width:0}.center{text-align:center}.small{font-size:var(--fs-small)}.muted{color:var(--body)}.faint{color:var(--faint)}.title{font-size:var(--fs-title);font-weight:600;line-height:1.3}.bold{font-weight:600}.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:17px}.btn{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-cta);white-space:nowrap;font-weight:600;transition:background .12s,opacity .12s;display:inline-flex}.btn:not(:disabled):active{opacity:.8}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-lg{width:100%;height:50px;font-size:var(--fs-body);padding:0 18px}.btn-md{height:42px;padding:0 var(--space-4);font-size:var(--fs-small)}.btn-primary{background:var(--brand);color:#fff}.btn-primary:not(:disabled):hover{background:var(--brand-dark)}.btn-secondary{background:var(--brand-bg);color:var(--brand-deep)}.btn-ghost{color:var(--body);background:0 0;font-weight:600}.btn-danger{background:var(--crit-bg);color:var(--crit)}.icon-btn{width:42px;height:42px;color:var(--body);border-radius:13px;justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover{background:var(--brand-bg);color:var(--brand-deep)}.field{flex-direction:column;gap:7px;display:flex}.field label{font-size:var(--fs-small);color:var(--ink);font-weight:600}.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:var(--radius-field);background:var(--surface);outline:none;height:48px;padding:0 14px}.field input::placeholder,.field textarea::placeholder,.composer textarea::placeholder{color:var(--faint)}.field input.code-input{letter-spacing:.3em;text-align:center;height:58px;font-size:26px;font-weight:600}.field textarea{height:auto;padding:var(--space-3)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}.field .err{color:var(--crit);font-size:var(--fs-small)}.field .hint{color:var(--faint);font-size:var(--fs-small)}.check{gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-cta);background:var(--surface);cursor:pointer;align-items:flex-start;display:flex}.check input{flex:none;margin-top:2px}.chip{height:28px;font-size:var(--fs-small);border-radius:14px;align-items:center;gap:4px;padding:0 10px;font-weight:600;display:inline-flex}.chip-accent{background:var(--accent-bg);color:var(--accent)}.chip-brand{background:var(--brand-bg);color:var(--brand-deep)}.chip-faint{background:var(--canvas);color:var(--body);border:1px solid var(--line)}.chip-outline{background:var(--surface);color:var(--body);border:1px solid var(--line);border-radius:18px;height:36px;padding:0 14px}.chip-outline.on{background:var(--brand-bg);color:var(--brand-deep);border-color:var(--brand)}.radio-list{gap:var(--space-2);flex-direction:column;display:flex}.radio-item{align-items:center;gap:var(--space-3);padding:14px var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-cta);cursor:pointer;display:flex}.radio-item.on{border-color:var(--brand);background:var(--brand-bg)}.radio-grid{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.divider{background:var(--line);height:1px;margin:var(--space-2) 0}.topbar{z-index:5;align-items:center;gap:var(--space-2);background:var(--surface);border-bottom:1px solid var(--line);height:64px;padding:0 10px;display:flex;position:sticky;top:0}.topbar .ttl{flex:1;min-width:0}.topbar .ttl h1{white-space:nowrap;text-overflow:ellipsis;font-size:18px;font-weight:600;overflow:hidden}.topbar .ttl p{font-size:var(--fs-small);color:var(--body);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.menu{right:var(--space-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-cta);z-index:20;min-width:180px;position:absolute;top:58px;overflow:hidden;box-shadow:0 6px 20px #15212b1a}.menu button{align-items:center;gap:var(--space-2);width:100%;padding:12px var(--space-4);text-align:left;display:flex}.menu button:hover{background:var(--brand-bg)}.sheet-bg{z-index:40;background:#15212b52;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--surface);width:100%;max-width:480px;padding:18px 18px calc(var(--space-6) + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;max-height:85dvh;animation:.18s ease-out sheet-up;overflow:auto}@keyframes sheet-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}.sheet-head{margin-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.sheet-head h2{font-size:17px;font-weight:600}.toast-wrap{z-index:60;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:24px;left:0;right:0}.toast{background:var(--ink);color:#fff;border-radius:var(--radius-cta);max-width:90vw;padding:12px 16px;font-size:14px;animation:.15s fade-in}.toast.err{background:var(--crit)}.toast.ok{background:var(--brand-deep)}.room-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);align-items:center;gap:13px;min-height:78px;padding:14px;display:flex}.room-card .avatar{background:var(--brand-bg);width:48px;height:48px;color:var(--brand-deep);border-radius:16px;flex:none;justify-content:center;align-items:center;font-size:20px;font-weight:600;display:flex}.room-card .preview{color:var(--body);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.badge{background:var(--brand);color:#fff;border-radius:12px;justify-content:center;align-items:center;min-width:24px;height:24px;padding:0 7px;font-size:11px;font-weight:600;display:inline-flex}.chat{padding:var(--space-4) var(--space-4) var(--space-6);flex-direction:column;flex:1;gap:10px;display:flex;overflow-y:auto}.msg{flex-direction:column;gap:3px;max-width:86%;display:flex}.msg.mine{align-self:flex-end;align-items:flex-end}.msg.theirs{align-self:flex-start;align-items:flex-start}.msg .who{color:var(--brand-deep);padding:0 6px;font-size:12px;font-weight:600}.bubble{border-radius:var(--radius-bubble);background:var(--bubble-theirs);border:1px solid var(--line);white-space:pre-wrap;word-break:break-word;padding:10px 13px}.msg.mine .bubble{background:var(--bubble-mine);border-color:color-mix(in srgb, var(--brand) 28%, var(--line));border-bottom-right-radius:5px}.msg.theirs .bubble{border-bottom-left-radius:5px}.bubble img{border-radius:10px;max-width:100%;max-height:280px;margin-bottom:6px;display:block}.bubble .seen-as{border-top:1px dashed var(--line);color:var(--body);margin-top:8px;padding-top:8px;font-size:14px}.bubble .seen-as .lbl{color:var(--faint);margin-bottom:2px;font-size:11px;display:block}.bubble .orig{border-top:1px dashed var(--line);color:var(--body);margin-top:8px;padding-top:8px;font-size:14px}.bubble .toggle{color:var(--body);font-size:var(--fs-small);align-items:center;gap:2px;width:fit-content;margin-top:6px;display:flex}.bubble .fast-mark{color:var(--faint);margin-top:4px;font-size:12px;display:block}.bubble .translating{color:var(--faint);font-size:var(--fs-small);align-items:center;gap:6px;display:inline-flex}.bubble .failed{color:var(--crit);font-size:var(--fs-small);align-items:center;gap:6px;display:inline-flex}.bubble .note{color:var(--accent);margin-top:4px;font-size:12px}.msg .meta{color:var(--faint);align-items:center;gap:6px;padding:0 6px;font-size:11px;display:flex}.msg .actions{gap:4px;padding:0 2px;display:flex}.msg .actions button{color:var(--body);background:var(--surface);border:1px solid var(--line);border-radius:8px;align-items:center;gap:4px;padding:4px 8px;font-size:12px;display:inline-flex}.text-swap{animation:.2s fade-in}.composer{background:var(--surface);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));align-items:flex-end;gap:9px;display:flex;position:sticky;bottom:0}.composer textarea{border:1px solid var(--line);background:var(--canvas);border-radius:16px;outline:none;flex:1;min-height:46px;max-height:120px;padding:11px 14px;line-height:1.4}.composer textarea:focus{border-color:var(--brand)}.composer .send{background:var(--brand);color:#fff;border-radius:15px;flex:none;justify-content:center;align-items:center;width:46px;height:46px;display:inline-flex}.composer .send:disabled{background:var(--line);color:var(--faint)}.composer .counter{color:var(--faint);font-size:11px;position:absolute;bottom:54px;right:60px}.mode-bar{gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--surface);border-bottom:1px solid var(--line);display:flex;overflow-x:auto}.banner{gap:var(--space-3);padding:12px var(--space-4);background:var(--accent-bg);color:var(--ink);align-items:center;font-size:14px;display:flex}.banner.brand{background:var(--brand-bg)}.banner.crit{background:var(--crit-bg);color:var(--crit)}.new-msgs{align-self:center;position:sticky;bottom:8px}.skeleton{background:linear-gradient(90deg, var(--line), #f1f5f9, var(--line));background-size:200% 100%;border-radius:7px;height:14px;animation:1.2s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.face{flex-direction:column;height:100dvh;display:flex}.face-side{padding:var(--space-3);gap:var(--space-2);flex-direction:column;flex:1;min-height:0;display:flex}.face-side.top{background:var(--brand-bg);transform:rotate(180deg)}.face-side .lang{font-size:var(--fs-small);color:var(--brand-deep);font-weight:700}.face-side .hist{font-size:var(--fs-small);color:var(--body);overflow:hidden}.face-side .hist p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.face-side .big{font-size:var(--fs-face);flex:1;font-weight:600;line-height:1.35;overflow:auto}.face-side .in{gap:var(--space-2);align-items:flex-end;display:flex}.face-side textarea{border:1px solid var(--line);border-radius:var(--radius-cta);background:var(--surface);outline:none;flex:1;min-height:56px;max-height:120px;padding:12px;font-size:18px}.face-side textarea:focus{border-color:var(--brand)}.face-mid{background:var(--brand);height:2px;position:relative}.face-hint{color:var(--body);font-size:12px}.legal h2{margin-top:var(--space-6);margin-bottom:var(--space-2);font-size:17px}.legal ul{margin:0;padding-left:20px}.legal li{color:var(--body);margin-bottom:6px;font-size:15px}