@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
:root { --text:#1d1c1d; --muted:#616061; --soft:#f8f8f8; --link:#1264a3; --link-bg:#e1f3f8; }
* { box-sizing:border-box; }
.is-hidden { display:none !important; }
html,body { height:100%; }
body { margin:0; overflow:hidden; background:#f8f5fa; color:var(--text); font-family:Arial,"Noto Sans KR",sans-serif; -webkit-font-smoothing:antialiased; }
button,textarea,input { font:inherit; } button { color:inherit; }
.page-shell { height:100vh; padding:0 18px; }
.thread-window { width:min(760px,100%); height:100vh; margin:0 auto; background:#fff; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.thread-topbar { height:50px; flex:0 0 50px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ececec; }
.thread-topbar h1 { margin:0; font-size:18px; line-height:1; letter-spacing:-.04em; }
.top-actions { display:flex; align-items:center; gap:11px; }
.top-actions button,.capture-button { width:24px; height:27px; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; color:#454245; padding:0; }
.my-profile-wrap { position:relative; height:24px; }
.top-actions .my-profile-button { width:24px; height:24px; border-radius:6px; overflow:hidden; }
.my-profile-button img { width:24px; height:24px; display:block; object-fit:cover; }
.profile-popover { position:absolute; z-index:8; top:31px; right:-66px; width:210px; padding:13px; background:#fff; border:1px solid #ddd; border-radius:9px; box-shadow:0 5px 18px rgba(29,28,29,.14); }
.profile-image-picker { display:flex; align-items:center; gap:10px; color:#1264a3; font-size:11px; font-weight:600; cursor:pointer; }
.profile-image-picker img { width:42px; height:42px; border-radius:8px; object-fit:cover; background:#eee; }
.profile-file-input { display:none; }
.profile-name-label { display:block; margin:12px 0 5px; color:#616061; font-size:10px; }
.profile-name-input { width:100%; height:31px; padding:0 9px; color:#1d1c1d; border:1px solid #bbb; border-radius:5px; outline:0; font-size:12px; }
.profile-name-input:focus { border-color:#777; box-shadow:0 0 0 1px #777; }
.top-actions .profile-save-button { width:100%; height:30px; margin-top:10px; color:#fff; background:#007a5a; border-radius:5px; font-size:11px; font-weight:700; }
.top-actions .profile-save-button:hover { background:#148567; }
.capture-button input { display:none; }.capture-button svg { width:17px; height:17px; }
.dots svg { width:17px; height:17px; }.close svg { width:21px; height:21px; stroke-width:1.65; }
.thread-scroll { flex:1; min-height:0; overflow-y:auto; padding:20px 0 145px; scrollbar-width:thin; scrollbar-color:#ccc transparent; }
.slack-message { display:grid; grid-template-columns:35px 1fr; gap:8px; padding:5px 18px; }.slack-message:hover { background:#f8f8f8; }
.avatar { width:35px; height:35px; border-radius:6px; object-fit:cover; background:#ddd; }
.generated-avatar { display:grid; place-items:center; color:#fff; background:#4a6874; font-size:12px; font-weight:700; }
.message-meta { min-height:18px; display:flex; align-items:baseline; gap:7px; margin-bottom:2px; }.message-meta strong { font-size:13px; font-weight:700; }.message-meta time { color:var(--muted); font-size:11px; }
.message-meta strong[contenteditable="true"] { outline:0; border-radius:3px; }.message-meta strong[contenteditable="true"]:focus { background:#fff7d6; box-shadow:0 0 0 2px #fff7d6; }
.message-body p,.message-content { margin:0; font-size:13px; line-height:1.48; white-space:pre-wrap; word-break:break-word; }.message-content > p { margin-bottom:0; }
.message-body code { padding:1px 5px; color:#d62f55; background:#f7f7f7; border:1px solid #ddd; border-radius:4px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.84em; }
.root-message { padding-top:2px; padding-bottom:8px; }
.reply-divider { display:flex; align-items:center; gap:11px; margin:4px 18px 8px; color:var(--muted); font-size:11px; }.reply-divider i { height:1px; background:#ddd; flex:1; }
.message-cluster { margin-bottom:6px; }.message-cluster .subline { margin-top:10px; }.message-cluster .subline.compact { margin-top:4px; }
.message-body a { display:inline-block; color:var(--link); background:var(--link-bg); border-radius:4px; padding:0 4px; text-decoration:none; }.mention { display:inline-block; color:#1264a3; background:#dff1fa; border-radius:3px; padding:0 3px; }
.message-attachment { display:block; width:auto; max-width:min(210px,100%); max-height:270px; margin-top:7px; border:1px solid #d8d8d8; border-radius:8px; object-fit:contain; background:#f4f4f4; }
.translate { display:flex; align-items:center; gap:6px; color:#1264a3; font-size:11px; font-weight:700; margin-top:4px; }.translate b { font-size:9px; color:#454245; }
.reactions { display:flex; gap:5px; margin-top:6px; }.reaction { padding:3px 7px; background:#eeeeee; border-radius:13px; font-size:11px; }
.delete-message { opacity:0; align-self:start; width:23px; height:23px; margin-left:auto; border:1px solid #ddd; border-radius:5px; background:#fff; color:#616061; cursor:pointer; }.slack-message.user-added { grid-template-columns:35px 1fr 23px; }.slack-message.user-added:hover .delete-message { opacity:1; }
.message-content[contenteditable="true"] { outline:0; border-radius:3px; }.message-content[contenteditable="true"]:focus { background:#fff7d6; box-shadow:0 0 0 3px #fff7d6; }.empty { color:#8b8a8b; text-align:center; font-size:12px; padding:40px 20px; }
.composer { position:absolute; z-index:3; left:18px; right:18px; bottom:23px; margin:0; border:1px solid #c6c6c6; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(29,28,29,.07); transition:border-color .12s ease,box-shadow .12s ease; }.composer:focus-within { border-color:#999; box-shadow:0 1px 3px rgba(29,28,29,.07); }
.composer-toolbar { height:35px; display:flex; align-items:center; gap:2px; padding:0 10px; background:var(--soft); color:#9a9a9a; transition:color .12s ease; }.composer:focus-within .composer-toolbar { color:#616061; }.composer-toolbar button { width:28px; height:26px; border:0; background:transparent; border-radius:4px; cursor:pointer; display:grid; place-items:center; }.composer-toolbar button:hover { color:#454245; background:#ececec; }.composer-toolbar svg { width:15px; height:15px; }.tool-separator { width:1px; height:18px; background:#e2e2e2; margin:0 3px; }
.composer textarea { display:block; width:100%; height:39px; padding:8px 11px 2px; border:0; outline:0; resize:none; color:#1d1c1d; font-size:14px; line-height:1.35; }.composer textarea::placeholder { color:#616061; }
.composer-footer { height:32px; padding:0 8px 6px; display:flex; align-items:end; justify-content:space-between; }.bottom-tools { display:flex; align-items:center; gap:1px; }.bottom-tools button { min-width:26px; height:26px; border:0; background:transparent; border-radius:4px; font-size:14px; cursor:pointer; display:grid; place-items:center; }.bottom-tools button:hover { background:#eee; }.bottom-tools button svg { width:16px; height:16px; }.bottom-tools .round-plus { border-radius:50%; background:#f0f0f0; }
.send-button { height:27px; min-width:49px; padding:0 5px 0 7px; display:flex; align-items:center; justify-content:space-between; border:0; background:transparent; color:#b8b8b8; border-radius:5px; cursor:pointer; transition:background .12s ease,color .12s ease; }.send-button > svg { width:17px; height:17px; fill:currentColor; stroke:currentColor; stroke-width:1.4; }.send-button span { height:19px; border-left:1px solid #ddd; margin-left:5px; padding:3px 0 0 6px; }.send-button span svg { width:10px; height:10px; }.send-button.is-ready { min-width:62px; padding-inline:9px 7px; color:#fff; background:#007a5a; }.send-button.is-ready:hover { background:#148567; }.send-button.is-ready span { border-left-color:rgba(255,255,255,.48); }
.toast { visibility:hidden; opacity:0; position:fixed; left:50%; bottom:18px; transform:translate(-50%,8px); padding:8px 12px; color:#fff; background:#1d1c1d; border-radius:6px; font-size:10px; transition:.2s; z-index:10; }.toast.show { visibility:visible; opacity:1; transform:translate(-50%,0); }
.home-view { width:min(760px,100%); height:100vh; margin:0 auto; display:grid; place-items:center; background:#fff; }
.home-content { width:min(400px,calc(100% - 36px)); text-align:center; transform:translateY(-4vh); }.home-content h1 { margin:0 0 20px; font-size:20px; }
.home-upload { height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#616061; background:#fafafa; border:1.5px dashed #c7c7c7; border-radius:10px; font-size:12px; cursor:pointer; transition:border-color .15s ease,background .15s ease; }.home-upload:hover,.home-upload.is-dragging { color:#4a154b; background:#f8f3f8; border-color:#8f5c91; }.home-upload svg { width:25px; height:25px; margin-bottom:3px; color:#4a154b; }.home-upload strong { color:#1d1c1d; font-size:13px; }.home-upload span { color:#777; font-size:10px; }.home-upload small { color:#999; font-size:9px; }
@media (max-width:650px) { .page-shell{padding:0}.thread-topbar{padding-inline:13px}.thread-scroll{padding-top:16px}.slack-message{padding-inline:13px}.reply-divider{margin-inline:13px}.composer{left:10px;right:10px;bottom:20px}.composer-toolbar button:nth-of-type(n+7),.composer-toolbar .tool-separator:last-of-type{display:none} }