/* 디스코드 밝은 테마 느낌 — 흰 채팅방 · 파란 링크 제목 · 왼쪽 색 띠 embed · 눌리는 버튼 · 리액션 알약 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
:root{--bg:#ffffff;--bg2:#f2f3f5;--bg3:#e3e5e8;--input:#ebedef;--hover:#f7f7f8;--text:#313338;--head:#060607;--muted:#5c5e66;--link:#006ce7;--blurple:#5865f2;--blurple2:#4752c4;--gray:#6d6f78;--gray2:#4e5058;--green:#248046;--green2:#1a6334;--mention:rgba(250,168,26,.12)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.375 Pretendard,"gg sans","Noto Sans KR",-apple-system,"Malgun Gothic",sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}

.app{display:flex;flex-direction:column;height:100dvh;max-width:820px;margin:0 auto}
.chan{display:flex;align-items:center;gap:6px;height:48px;padding:0 10px 0 14px;padding-top:env(safe-area-inset-top);box-sizing:content-box;border-bottom:1px solid var(--bg3);box-shadow:0 1px 0 rgba(4,4,5,.2);flex:none}
.chan .hash{color:var(--muted);font-size:24px;font-weight:300;margin-right:2px}
.chan b{color:var(--head);font-size:16px;white-space:nowrap;flex:none}
.chan .hash{flex:none}.chan-topic{min-width:0;flex:1}
.chan-topic{color:var(--muted);font-size:13px;margin-left:8px;padding-left:10px;border-left:1px solid var(--bg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow{flex:1}
.icon-btn{height:34px;min-width:34px;padding:0 6px;border-radius:6px;color:var(--muted);font-size:18px;display:inline-flex;align-items:center;gap:3px}
.icon-btn small{font-size:12px;font-weight:700}
.icon-btn:hover{background:var(--hover);color:var(--head)}.icon-btn:active{transform:scale(.94)}

.log{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0 12px;-webkit-overflow-scrolling:touch}
.welcome{padding:16px 16px 8px}
.welcome-icon{width:68px;height:68px;border-radius:50%;background:var(--bg3);color:var(--head);font-size:40px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.welcome h1{color:var(--head);font-size:24px;margin:0 0 4px}
.welcome p{color:var(--muted);margin:0;font-size:14px}

.divider{display:flex;align-items:center;margin:18px 16px 6px;color:var(--muted);font-size:12px;font-weight:600}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--bg3)}
.divider span{padding:0 8px}

/* 메시지 */
.msg{display:flex;gap:14px;padding:4px 14px 4px 14px;position:relative;transition:background .6s}
.msg:hover{background:var(--hover)}
.msg.first{margin-top:14px}
.msg.flash{background:var(--mention);box-shadow:inset 2px 0 0 #f0b232}
.av{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;margin-top:2px}
.av.bot{background:linear-gradient(135deg,#ff7a45,#f23f43)}
.av-gap{width:40px;flex:none}
.m-body{min-width:0;flex:1}
.m-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.uname{color:var(--head);font-weight:600;font-size:15px}
.tag-bot{background:var(--blurple);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;position:relative;top:-1px}
.ts{color:var(--muted);font-size:12px}
.m-text{color:var(--text);white-space:pre-wrap;word-break:break-word}
.reply-ref{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;margin:0 0 2px 20px;position:relative;cursor:pointer;white-space:nowrap;overflow:hidden}
.reply-ref::before{content:"";position:absolute;left:-34px;top:9px;width:30px;height:12px;border:2px solid #4e5058;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.reply-ref .mini{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#ff7a45,#f23f43);font-size:9px;display:flex;align-items:center;justify-content:center;flex:none}
.reply-ref b{color:var(--head);font-weight:600}
.reply-ref span{overflow:hidden;text-overflow:ellipsis}
.reply-ref:hover span{color:var(--head)}

/* embed */
.embed{background:var(--bg2);border-left:4px solid var(--c,#5865f2);border-radius:4px;padding:12px 16px 16px 14px;margin-top:4px;max-width:600px}
img.emoji{height:1.3em;width:1.3em;margin:0 .06em;vertical-align:-.28em}
.e-title{color:var(--head);font-weight:800;font-size:19px;margin-bottom:10px;line-height:1.4}
.e-desc{font-size:15.5px;line-height:1.6;color:var(--text);word-break:break-word}
.e-desc b{color:var(--head)}
.e-desc a{color:var(--link);font-weight:700}
.e-foot{color:var(--muted);font-size:12px;margin-top:10px}
.embed.clip .e-desc{max-height:340px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent)}
.show-more{color:var(--link);font-size:13px;font-weight:600;margin-top:6px;padding:4px 0}

/* 버튼 (디스코드 컴포넌트) */
.comps{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;max-width:560px}
.btn{height:34px;padding:0 14px;border-radius:4px;font-size:14px;font-weight:500;color:#fff;display:inline-flex;align-items:center;gap:6px;transition:background .12s,transform .05s;user-select:none}
.btn.primary{background:var(--blurple)}.btn.primary:hover{background:var(--blurple2)}
.btn.secondary{background:var(--gray)}.btn.secondary:hover{background:var(--gray2)}
.btn.success{background:var(--green)}.btn.success:hover{background:var(--green2)}
.btn:active{transform:translateY(1px);filter:brightness(.9)}
.btn:disabled{opacity:.6;cursor:default}
.btn.loading::after{content:"";width:12px;height:12px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.block{width:100%;height:44px;justify-content:center;font-size:15px}
.btn.link{background:none;color:var(--muted);font-size:14px}.btn.link:hover{text-decoration:underline;color:var(--head)}

/* 리액션 */
.reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;position:relative}
.react{height:26px;padding:0 7px;border-radius:8px;background:var(--bg2);border:1px solid transparent;display:inline-flex;align-items:center;gap:5px;font-size:14px;color:var(--muted);transition:transform .08s}
.react b{font-size:13px;font-weight:600}
.react:hover{border-color:#c4c9ce}
.react.on{background:rgba(88,101,242,.15);border-color:var(--blurple);color:#4752c4}
.react:active{transform:scale(.92)}
.react.pop{animation:rpop .35s}
@keyframes rpop{40%{transform:scale(1.25)}}
.react.add{color:var(--muted);opacity:.8}
.picker{position:absolute;bottom:32px;left:0;background:#fff;border:1px solid var(--bg3);border-radius:8px;padding:6px;display:flex;gap:4px;box-shadow:0 8px 16px rgba(0,0,0,.35);z-index:3}
.picker button{font-size:20px;width:36px;height:36px;border-radius:6px}.picker button:hover{background:var(--hover)}

.thread-link{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:6px 10px;border-radius:6px;background:var(--bg2);color:var(--muted);font-size:13px}
.thread-link b{color:var(--link)}
.thread-link:hover{background:var(--bg3)}.thread-link:active{transform:scale(.97)}

/* 입력 중 · 입력창 */
.typing{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;padding:0 16px 2px;height:22px;flex:none}
.typing b{color:var(--head)}
.dots{display:inline-flex;gap:3px}.dots i{width:6px;height:6px;border-radius:50%;background:#4e5058;animation:bounce 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.suggest{display:flex;gap:6px;overflow-x:auto;padding:4px 12px;flex:none;scrollbar-width:none}
.suggest::-webkit-scrollbar{display:none}
.chip-cmd{flex:none;height:32px;padding:0 13px;border-radius:16px;background:var(--bg2);color:var(--text);font-size:14px;border:1px solid var(--bg3)}
.chip-cmd b{color:var(--link);margin-right:3px}
.chip-cmd:hover{background:var(--bg3)}.chip-cmd:active{transform:scale(.95)}
.composer{display:flex;align-items:center;gap:6px;margin:4px 12px calc(env(safe-area-inset-bottom) + 12px);background:var(--input);border-radius:8px;padding:0 6px;flex:none}
.composer input{flex:1;min-width:0;height:44px;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:15px}
.composer input::placeholder{color:#80848e}
.plus{width:28px;height:28px;border-radius:50%;background:#5c5e66;color:#fff;font-size:18px;font-weight:900;line-height:1}
.plus:hover{background:#313338}.plus:active{transform:scale(.9)}
.send{width:34px;height:34px;border-radius:6px;color:var(--muted);font-size:16px}.send:hover{color:var(--head);background:var(--bg3)}

/* 초대장 */
.gate{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;background:radial-gradient(circle at 20% 10%,#5865f2 0,transparent 45%),radial-gradient(circle at 90% 90%,#eb459e 0,transparent 40%),#404eed}
.gate-card{width:100%;max-width:440px;background:var(--bg);border-radius:12px;padding:28px 22px 18px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25);margin:auto}
.gate-icon{width:84px;height:84px;margin:0 auto 12px;border-radius:26px;background:linear-gradient(135deg,#ff7a45,#f23f43);font-size:46px;display:flex;align-items:center;justify-content:center;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px) rotate(-4deg)}}
.gate-sub{color:var(--muted);font-size:14px;margin:0}
.gate-card h2{color:var(--head);font-size:24px;margin:4px 0 10px}
.gate-stats{display:flex;justify-content:center;gap:16px;color:var(--muted);font-size:13px;margin-bottom:12px}
.gate-stats b{color:var(--head)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#80848e;margin-right:5px}.dot.on{background:#23a55a}
.gate-topics{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:8px}
.pill{background:var(--bg2);color:var(--text);font-size:13px;padding:5px 10px;border-radius:12px}
.g-label{display:block;text-align:left;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:12px 0 6px}
.g-label input{display:block;width:100%;margin-top:6px;height:40px;border-radius:4px;border:0;background:var(--bg3);color:var(--text);padding:0 10px;font:inherit;font-size:15px;text-transform:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.chip{height:32px;padding:0 12px;border-radius:16px;background:var(--bg2);border:1px solid var(--bg3);font-size:14px;color:var(--text)}
.chip.on{background:rgba(88,101,242,.14);border-color:var(--blurple);color:#4752c4}
.chip:active{transform:scale(.95)}
.noti-mock{background:var(--bg2);border-radius:14px;padding:10px 14px;text-align:left;margin:14px 0 6px;animation:pop .8s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:translateY(-14px) scale(.95);opacity:0}}
.noti-top{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.noti-icon{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#ff7a45,#f23f43);font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.noti-time{margin-left:auto}
.noti-title{color:var(--head);font-weight:600;font-size:14px;margin-top:4px}
.noti-body{color:var(--muted);font-size:13px}
.gate-small{color:var(--muted);font-size:12px;margin:0 0 12px}
.guide{background:var(--bg2);border-left:4px solid #f0b232;border-radius:4px;padding:10px 12px;text-align:left;font-size:14px;margin:0 0 12px}
.guide ol{margin:6px 0 0 18px;padding:0}
.gate-status{min-height:1.3em;color:#23a55a;font-size:14px;font-weight:600;margin:10px 0 2px}

/* 스레드 */
.thread{position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.55);display:flex;justify-content:flex-end}
.thread-box{width:100%;max-width:440px;height:100%;background:var(--bg);display:flex;flex-direction:column;animation:slide .2s ease-out;padding-top:env(safe-area-inset-top)}
@keyframes slide{from{transform:translateX(40px);opacity:.4}}
.thread-head{display:flex;align-items:center;gap:8px;height:48px;padding:0 10px 0 14px;border-bottom:1px solid var(--bg3);color:var(--head)}
.thread-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-list{flex:1;overflow-y:auto;padding:8px 0}
.composer.in-thread{margin-bottom:calc(env(safe-area-inset-bottom) + 12px)}

.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#111214;color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;z-index:40;box-shadow:0 8px 20px rgba(0,0,0,.4)}
@media (min-width:700px){.chan-topic{max-width:none}}

/* ── 폰 꽉 채우기 (여백 최소 · 아바타/봇 이름줄 없음 · 2026-09-15 사용자 지시) ── */
.av,.av-gap{display:none}
.msg{gap:0;padding:2px 6px}
.msg.first{margin-top:8px}
.msg.bot .m-head{display:none}
.msg:not(.bot) .m-head{gap:6px}
.msg:not(.bot) .m-text{background:var(--bg2);border-radius:10px;padding:6px 10px;display:inline-block;max-width:100%}
.reply-ref{margin:0 0 2px 2px;font-size:12px}
.reply-ref::before{display:none}
.reply-ref::after{content:"↩";order:-1;color:var(--muted)}
.embed{max-width:none;padding:8px 10px 10px 10px;margin-top:2px}
.e-title{font-size:17px;margin-bottom:6px}
.e-desc{font-size:15px;line-height:1.55}
.e-foot{margin-top:6px}
.comps{max-width:none;gap:6px;margin-top:6px}
.btn{height:34px;padding:0 11px;font-size:14px}
.comps .btn{flex:1 1 auto;justify-content:center}
.reacts{margin-top:4px}
.thread-link{margin-top:4px;padding:5px 9px}
.divider{margin:12px 6px 2px}
.chan{height:44px;padding:0 6px 0 10px;gap:4px}
.chan-topic{margin-left:4px;padding-left:8px}
.welcome{padding:10px 10px 4px}
.welcome-icon{width:44px;height:44px;font-size:26px;margin-bottom:4px}
.welcome h1{font-size:18px}
.log{padding:4px 0 8px}
.suggest{padding:2px 6px;gap:5px}
.composer{margin:4px 6px calc(env(safe-area-inset-bottom) + 6px)}
.typing{padding:0 8px 2px}
@media (min-width:700px){.msg{padding:2px 14px}.embed{max-width:640px}.comps{max-width:640px}}
/* ── 문답형 (내 질문 말풍선 · 다음 질문 버튼 하나) ── */
.ask{display:flex;justify-content:flex-end;padding:6px 8px 2px;animation:askin .18s ease-out}
.ask span{background:var(--blurple);color:#fff;border-radius:18px 18px 4px 18px;padding:8px 14px;font-size:15px;font-weight:500;max-width:80%}
@keyframes askin{from{transform:translateY(6px);opacity:0}}
.choices{display:flex;flex-direction:column;gap:6px;padding:8px 8px 4px;animation:askin .25s ease-out}
.choices .btn{height:46px;border-radius:12px;font-size:16px;font-weight:600;justify-content:center}
.choices .btn.secondary{background:var(--bg2);color:var(--text)}
.choices .btn.secondary:hover{background:var(--bg3)}
.msg.bot .embed{animation:askin .22s ease-out}
#membersBtn{display:none}
/* ── 주제 탭 (한 번에 한 주제 한 장) ── */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 8px;flex:none;border-bottom:1px solid var(--bg3);scrollbar-width:none;background:var(--bg)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;height:36px;padding:0 13px;border-radius:18px;background:var(--bg2);color:var(--text);font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;transition:background .15s,transform .08s}
.tab.on{background:var(--blurple);color:#fff}
.tab.old{background:transparent;border:1px dashed var(--bg3);color:var(--muted);font-weight:500}
.tab:active{transform:scale(.95)}
.greet{padding:10px 10px 0;color:var(--muted);font-size:13px;font-weight:600}
.greet b{color:var(--blurple);margin-left:4px}

/* 뉴스톡 이름표 — 파란 디스코드 느낌 그대로 (분홍 그라데이션은 2026-09-15 사용자 반려) */
.logo{width:28px;height:28px;border-radius:8px;background:#5865f2;color:#fff;font-weight:900;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.chan b.brand{font-size:17px;font-weight:800;margin-left:4px;color:var(--head)}
.gate-icon{background:#5865f2;color:#fff;font-weight:900;font-size:40px}
.noti-icon{background:#5865f2;color:#fff;font-weight:900;font-size:10px}