:root{--yellow:#fee500;--brown:#3c1e1e;--room-bg:#bacee0;--line:#e5e5e5;--muted:#8a8a8a;--danger:#e5484d;--app-height:100dvh;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);color:#191919;-webkit-text-size-adjust:100%;font-family:-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Noto Sans KR,sans-serif}*{box-sizing:border-box}html,body,#root{overscroll-behavior:none;background:#fff;height:100%;margin:0}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}input,textarea{font:inherit;font-size:16px}.boot{height:var(--app-height);background:var(--yellow);color:var(--brown);place-items:center;font-size:28px;font-weight:700;display:grid}.shell{height:var(--app-height);padding-top:var(--safe-top);display:flex}.shell.narrow{flex-direction:column}.shell.narrow>main{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.shell.wide .side-tabs{background:#ececec;flex-direction:column;align-items:center;gap:8px;width:64px;padding-top:16px;display:flex}.shell.wide .pane-left{border-right:1px solid var(--line);flex-direction:column;width:340px;min-height:0;display:flex}.shell.wide .pane-right{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.tabbar{border-top:1px solid var(--line);padding-bottom:var(--safe-bottom);background:#fff;display:flex}.tabbar a,.side-tabs a{text-align:center;color:var(--muted);flex:1;padding:10px 0;font-size:13px;text-decoration:none}.side-tabs a{border-radius:10px;flex:none;width:48px}.tabbar a.active,.side-tabs a.active{color:#000;font-weight:700}.empty-pane{color:var(--muted);background:var(--room-bg);flex:1;place-items:center;display:grid}.screen{flex-direction:column;flex:1;min-height:0;display:flex}.screen-header{align-items:center;gap:8px;padding:12px 16px;font-size:20px;font-weight:700;display:flex}.screen-header .spacer{flex:1}.screen-header button{color:#000;background:0 0;border:none;font-size:15px}.screen-body{-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.list-item{text-align:left;background:0 0;border:none;align-items:center;gap:12px;width:100%;padding:10px 16px;display:flex}.list-item:active{background:#f2f2f2}.list-item .main{flex:1;min-width:0}.list-item .title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.list-item .sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:13px;overflow:hidden}.list-item .meta{color:var(--muted);flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;display:flex}.badge{color:#fff;background:#fa5a2a;border-radius:10px;padding:1px 7px;font-size:12px;font-weight:700}.avatar{object-fit:cover;background:#d7e0ea;border-radius:38%;flex:none}.avatar.placeholder{color:#fff;background:#9bb1c7;place-items:center;font-weight:700;display:grid}.section-title{color:var(--muted);padding:16px 16px 6px;font-size:13px}.banner{align-items:center;gap:8px;padding:10px 16px;font-size:14px;display:flex}.banner.info{background:#fff8c4}.banner.warn{background:#ffe9e9}.banner button{background:var(--brown);color:#fff;border:none;border-radius:8px;margin-left:auto;padding:6px 10px;font-size:13px}.top-banners{flex:none}.room{background:var(--room-bg);flex-direction:column;flex:1;min-height:0;display:flex}.room-header{background:var(--room-bg);align-items:center;gap:8px;padding:10px 12px;font-weight:700;display:flex}.room-header .count{color:#4a5a6a;font-weight:400}.room-header button{background:0 0;border:none;font-size:18px}.room-header .spacer{flex:1}.messages{-webkit-overflow-scrolling:touch;flex:1;padding:8px 10px 12px;overflow-y:auto}.date-sep{text-align:center;margin:14px 0 8px}.date-sep span{color:#fff;background:#0000001f;border-radius:12px;padding:3px 10px;font-size:12px}.row{align-items:flex-start;gap:8px;margin-top:4px;display:flex}.row.mine{flex-direction:row-reverse}.row .avatar-slot{flex:none;width:40px}.row .col{flex-direction:column;max-width:72%;display:flex}.row.mine .col{align-items:flex-end}.row .sender{color:#4a5a6a;margin-bottom:3px;font-size:12px}.row .line{align-items:flex-end;gap:5px;display:flex}.row.mine .line{flex-direction:row-reverse}.bubble{white-space:pre-wrap;word-break:break-word;background:#fff;border-radius:14px;padding:8px 11px;font-size:15px;line-height:1.4}.row.mine .bubble{background:var(--yellow)}.bubble.photo,.bubble.sticker{padding:0;background:0 0!important}.bubble.photo img{border-radius:12px;max-width:200px;max-height:240px;display:block}.bubble.sticker img{object-fit:contain;width:120px;height:120px;display:block}.side{color:#556;white-space:nowrap;flex-direction:column;align-items:flex-end;font-size:11px;display:flex}.row.mine .side{align-items:flex-end}.row:not(.mine) .side{align-items:flex-start}.unread{color:#e6b800;font-size:11px;font-weight:700}.pending{color:#556;font-size:11px}.pending.failed{color:var(--danger)}.pending button{background:#fff;border:none;border-radius:6px;margin-left:4px;padding:2px 6px;font-size:11px}.progress{background:#00000026;border-radius:2px;height:3px;margin-top:4px}.progress>div{background:var(--brown);border-radius:2px;height:100%}.composer{padding:8px 8px calc(8px + var(--safe-bottom));background:#fff;align-items:flex-end;gap:6px;display:flex}.composer textarea{resize:none;background:0 0;border:none;outline:none;flex:1;max-height:120px;padding:8px 4px;line-height:1.35}.composer button{background:0 0;border:none;padding:4px 6px;font-size:22px}.composer .send{background:var(--yellow);border-radius:8px;padding:8px 12px;font-size:14px}.composer .send:disabled{color:#b0b0b0;background:#f1f1f1}.composer .counter{color:var(--danger);align-self:center;font-size:11px}.stickers{border-top:1px solid var(--line);background:#fff;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;max-height:260px;padding:8px;display:grid;overflow-y:auto}.stickers button{aspect-ratio:1;background:#f6f6f6;border:none;border-radius:10px;padding:6px}.stickers img{object-fit:contain;width:100%;height:100%}.sticker-add{grid-column:1/-1;align-items:center;gap:6px;display:flex}.sticker-add input[type=text]{border:1px solid var(--line);border-radius:8px;flex:1;padding:6px 8px}.viewer{z-index:100;background:#000;flex-direction:column;display:flex;position:fixed;inset:0}.viewer img{object-fit:contain;flex:1;width:100%;min-height:0}.viewer .bar{padding:calc(10px + var(--safe-top)) 14px 10px;justify-content:space-between;display:flex}.viewer .bar button{color:#fff;background:0 0;border:none;font-size:16px}.sheet-backdrop{z-index:90;background:#00000059;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{width:100%;max-width:480px;padding:16px 16px calc(16px + var(--safe-bottom));background:#fff;border-radius:16px 16px 0 0;max-height:80%;overflow-y:auto}.sheet h3{margin:0 0 12px}.field{gap:8px;margin-bottom:12px;display:flex}.field input{border:1px solid var(--line);border-radius:8px;flex:1;padding:8px 10px}.check{align-items:center;gap:10px;padding:8px 0;display:flex}.primary{background:var(--yellow);color:var(--brown);border:none;border-radius:10px;width:100%;padding:12px 16px;font-weight:700}.primary:disabled{opacity:.5}.secondary{background:#f2f2f2;border:none;border-radius:10px;padding:10px 14px}.danger-text{color:var(--danger)}.auth{min-height:var(--app-height);background:var(--yellow);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex}.auth h1{color:var(--brown);margin:0}.auth form{flex-direction:column;gap:10px;width:100%;max-width:320px;display:flex}.auth input{border:none;border-radius:10px;padding:12px}.auth .error{color:var(--danger);background:#fff;border-radius:8px;padding:8px 10px}.auth .primary{background:var(--brown);color:#fff}.install-guide{text-align:left;background:#fff;border-radius:12px;max-width:360px;padding:12px 14px;font-size:14px}.settings-row{border-bottom:1px solid #f1f1f1;align-items:center;gap:10px;padding:12px 16px;display:flex}.settings-row .grow{flex:1;min-width:0}.settings-row code{word-break:break-all;font-size:12px}.toast{left:50%;bottom:calc(80px + var(--safe-bottom));color:#fff;z-index:120;background:#000c;border-radius:16px;padding:8px 14px;font-size:13px;position:fixed;transform:translate(-50%)}