/* KP Works - 1단계 화면 */
:root{
--ground:#eff0f1;
--surface:#ffffff;
--surface-2:#f5f6f7;
--ink:#191c1f;
--muted:#666c72;
--line:#dfe1e4;
--line-strong:#c8ccd1;
/* 1.8.1: 대표 결정 ㉯ — 단추·탭·고른 줄까지 **로고 네이비 계열로 통일**.
1.7.3 에 AI 자리 전용으로 넣었던 --ai(#2f5fa8)를 프로그램 기본 강조색으로 올렸다.
여기 세 줄만 바꾸면 단추·탭·고른 줄·아바타·칩이 한꺼번에 따라온다
(강조색을 쓰는 51곳이 전부 이 토큰을 본다 — 하드코딩된 회색은 없다). */
--accent:#2f5fa8; /* 네이비 — 버튼·선택·아바타 */
--accent-ink:#21457c; /* 옅은 파랑 바탕 위의 글씨 */
--accent-soft:#eef4fd; /* 고른 줄 바탕 */
--on-accent:#ffffff;
--brand:#0a2c74; /* 로고 네이비 */
/* 1.7.3 에 AI 자리 전용으로 넣은 색. 1.8.1 부터는 --accent 와 같은 값이다
(이름만 남겨 둔다 — AI 자리 쪽 규칙을 그대로 두기 위해서). */
--ai:#2f5fa8;
--ai-soft:#eef4fd;
--mine:#dcebfb; /* 내 말풍선 — 카카오워크처럼 연한 파랑 */
--warn:#8c6414;
--crit:#a33a2a;
--side-w:300px;
--radius:10px;
/* 1.6.2: 이 한 줄이 없어서 엣지·크롬의 「웹 콘텐츠 자동 다크 모드」가 우리 페이지를
제멋대로 뒤집을 수 있었다(밝은 바탕에 밝은 글씨). 우리가 두 테마를 직접 그린다고
알려 주면 그 기능이 꺼지고, 스크롤바·날짜 선택창·prompt 창도 테마를 따라온다. */
color-scheme: light dark;
--chat-bg:#f8f9fb; /* 1.6.2: 대화방 바탕 — 카카오워크 실측값 */
font-family:"Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",
"Noto Sans KR",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
:root{
--ground:#0e1013; --surface:#16191d; --surface-2:#1d2126;
--ink:#e6e8ea; --muted:#9aa1a8; --line:#272c32; --line-strong:#363c43;
/* 1.8.1: 어두운 화면도 네이비 계열로 맞춘다 (밝은 화면의 #2f5fa8 을 밝기만 올린 값) */
--accent:#7ba2e0; --accent-ink:#a9c5ee; --accent-soft:#1d2c46; --on-accent:#11151a;
--brand:#8fa3cc; --ai:#7ba2e0; --ai-soft:#1d2c46;
--mine:#1f3550; --warn:#cfa85a; --crit:#e08a78;
--chat-bg:#101317;
}
}
*{box-sizing:border-box}
/* 화면 높이.
안드로이드는 브라우저가 키보드만큼 화면을 줄여 주므로 100dvh 로 충분하다.
아이폰만 app.js 가 --app-h 를 넣어 준다 (사파리는 그 처리를 안 해 준다). */
:root{--app-h:100dvh}
html,body{height:100%}
body{
margin:0;background:var(--ground);color:var(--ink);font-size:14.5px;line-height:1.6;
-webkit-font-smoothing:antialiased;overflow:hidden;word-break:break-word;
/* 두 번 빨리 누르면 화면이 확대되는 사파리 기본 동작을 끈다 (보내기 두 번 누르다 확대되던 것) */
touch-action:manipulation;
/* 누를 때 회색 네모가 번쩍이는 것(아이폰·안드로이드)을 없앤다 */
-webkit-tap-highlight-color:transparent;
}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
/* ---------------- 공통 부품 ---------------- */
.btn{
border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
padding:8px 14px;cursor:pointer;font-weight:700;font-size:13.5px;white-space:nowrap
}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--crit);border-color:var(--crit)}
.btn.block{width:100%;display:block;margin-top:6px;padding:11px}
.btn:disabled{opacity:.5;cursor:default}
.icon{
border:none;background:transparent;cursor:pointer;font-size:17px;line-height:1;
width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--muted);flex:none
}
.icon:hover{background:var(--surface-2);color:var(--ink)}
.fld{display:block;margin-bottom:12px}
.fld span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:700}
.fld input,.fld select,.fld textarea{
width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;
background:var(--surface-2)
}
.err{color:var(--crit);font-size:13px;margin:6px 0 10px;font-weight:700}
.hint{color:var(--muted);font-size:12.5px}
/* ---------------- 로그인 ---------------- */
.login-wrap{height:var(--app-h);display:grid;place-items:center;padding:24px;background:var(--ground)}
.login-card{
width:100%;max-width:340px;background:var(--surface);border:1px solid var(--line);
border-radius:14px;padding:30px 26px;box-shadow:0 20px 50px -30px rgba(0,0,0,.5)
}
/* 로고 마크 + WORKS 잠금 조합 */
.lockup{display:flex;align-items:center;gap:9px}
.lockup .lm{height:22px;width:auto;display:block}
.lockup b{font-weight:800;font-size:16px;letter-spacing:.06em;color:var(--ink)}
.lockup-lg{flex-direction:column;gap:12px;margin:6px 0 4px;align-items:center;text-align:center}
.lockup-lg .lm{height:60px}
.lockup-lg b{font-size:22px;letter-spacing:.14em}
@media (prefers-color-scheme: dark){
.lockup .lm{content:url("/static/logomark-light.png")}
}
.login-brand{font-size:24px;font-weight:800;letter-spacing:-.02em}
.login-brand span{color:var(--brand)}
.login-sub{color:var(--muted);font-size:13px;margin:4px 0 22px;text-align:center}
.login-foot{color:var(--muted);font-size:12px;text-align:center;margin:14px 0 0}
/* ---------------- 레이아웃 ---------------- */
.app{height:var(--app-h);max-height:var(--app-h);display:grid;grid-template-columns:var(--side-w) 1fr}
.side{
background:var(--surface);border-right:1px solid var(--line);
display:flex;flex-direction:column;min-width:0;min-height:0
}
.side-top{display:flex;align-items:center;gap:4px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:16px;letter-spacing:-.02em;margin-right:auto}
.brand span{color:var(--brand)}
.side-actions{display:flex;gap:2px}
.searchbar{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);align-items:center}
.searchbar input{flex:1;padding:8px 11px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2)}
.roomlist{flex:1;overflow-y:auto;overscroll-behavior:contain}
.side-foot{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.side-foot .who{min-width:0;flex:1}
.side-foot .who b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot .who small{color:var(--muted);font-size:11.5px}
.btn.logout{
display:inline-flex;align-items:center;gap:6px;padding:7px 10px;font-size:12.5px;
color:var(--muted);border-color:var(--line)
}
.btn.logout:hover{color:var(--crit);border-color:var(--crit)}
.btn.logout svg{flex:none}
/* 계정 관리 재직/퇴사 탭 */
.tabs{display:flex;gap:6px;margin:14px 0 10px}
.tabs button{
flex:1;padding:8px 10px;border:1px solid var(--line-strong);background:var(--surface);
border-radius:8px;cursor:pointer;font-weight:700;font-size:13px;color:var(--muted)
}
.tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.avatar{
width:40px;height:40px;border-radius:14px;flex:none;display:grid;place-items:center;
color:#fff;font-weight:800;font-size:13px;background:var(--accent);
white-space:pre-line;line-height:1.05;text-align:center;letter-spacing:-.03em;overflow:hidden
}
/* 대화 목록의 프로필: 카카오워크처럼 크고 둥근 네모(직원·방), 봇은 동그라미 (대표님이 좋다고 한 구분) */
.room .avatar{width:48px;height:48px;border-radius:16px;font-size:13px}
.room .avatar.bot{border-radius:50%}
.avatar.sm{width:28px;height:28px;font-size:11.5px;border-radius:8px;white-space:nowrap}
.avatar.bot{border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
/* 프로필 사진을 깐 동그라미 — 글자가 없으므로 글자 설정은 무시된다 */
.avatar.pic{color:transparent}
/* 프로필 사진 고르기 줄 (관리자 화면 · 내 프로필) */
.picrow{display:flex;align-items:center;gap:14px;padding:4px 0 10px}
.picbtns{display:flex;flex-direction:column;gap:7px;flex:1}
.picbtns .btn{width:100%}
/* ---------------- 방 목록 ---------------- */
.rl-head{
padding:12px 16px 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);font-weight:700
}
.room{
display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
padding:15px 16px;cursor:pointer;border-bottom:1px solid var(--line)
}
.room:hover{background:var(--surface-2)}
.room.on{background:var(--accent-soft)}
.room .rt{min-width:0;padding-top:1px}
.room .rt b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.room .rt b .cnt{font-weight:600;color:var(--muted);font-size:13.5px;margin-left:2px}
.room .rt small{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:5px;white-space:normal;word-break:break-all
}
.room .rr{text-align:right;flex:none;padding-top:2px}
.room .rr time{display:block;color:var(--muted);font-size:12px;letter-spacing:-.01em}
.badge{
display:inline-block;min-width:15px;padding:0 4px;border-radius:99px;background:var(--crit);
color:#fff;font-size:10px;line-height:15px;font-weight:800;text-align:center;margin-top:3px
}
/* ---------------- 대화 화면 ---------------- */
.main{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--ground);position:relative;overflow:hidden}
.empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted);padding:24px}
.empty-mark{font-size:22px;font-weight:800;color:var(--line-strong);letter-spacing:-.02em;margin-bottom:8px}
.chat{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.chat-top{
display:flex;align-items:center;gap:6px;padding:9px 10px 9px 16px;
background:var(--surface);border-bottom:1px solid var(--line)
}
.chat-title{flex:1;min-width:0}
.chat-title b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-title small{color:var(--muted);font-size:12px}
.back{display:none}
/* 1.6.2: 대화방 바탕만 따로 — 카카오워크 실측 #f8f9fb (목록·시트는 그대로 둔다) */
.msgs{background:var(--chat-bg);
flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:18px 18px 8px;overscroll-behavior:contain;
display:flex;flex-direction:column;
overflow-anchor:none /* v34: 브라우저의 자동 스크롤 보정을 끈다 — 옛 글을 위에 끼울 때 우리 보정과 겹쳐 두 번 뛰던 원인(PC 엣지) */
}
.msgs > :first-child{margin-top:auto} /* 대화가 적어도 아래에 붙어 보이게 */
.daysep{text-align:center;margin:18px 0 14px}
.daysep span{
background:var(--surface);border:1px solid var(--line);color:var(--muted);
font-size:11.5px;padding:3px 12px;border-radius:99px
}
.sys{text-align:center;color:var(--muted);font-size:12px;margin:10px 0}
.row{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-bottom:12px;align-items:start}
.row.me{grid-template-columns:1fr;justify-items:end}
.row.cont{margin-top:-8px}
.row.cont .avatar{visibility:hidden}
.row.cont .nm{display:none}
.bub-wrap{max-width:min(640px,78%);min-width:0}
.row.me .bub-wrap{display:flex;flex-direction:column;align-items:flex-end}
.nm{font-size:13px;font-weight:600;margin-bottom:5px;color:var(--muted)}
.nm .dept{font-weight:500;opacity:.85} /* 1.6.2: 「관리자 · 관리운영팀」 — 부서까지 */
.bub{
background:var(--surface);border:1px solid var(--line);padding:9px 13px;border-radius:4px 12px 12px 12px;
white-space:pre-wrap
}
.row.me .bub{background:var(--mine);border-color:transparent;border-radius:12px 4px 12px 12px}
/* 1.6.2: 시각은 원래부터 말풍선 **옆**에 있었다(1.3.0). 바뀐 것은 **아래 맞춤**과 크기뿐. */
.meta{display:flex;gap:6px;align-items:flex-end;margin-top:0;font-size:11.5px;color:var(--muted);line-height:1.3}
.row.me .meta{justify-content:flex-end}
.unread-btn{
border:none;background:transparent;color:#e8590c;font-weight:800;font-size:11.5px;
cursor:pointer;padding:0
}
.unread-btn:hover{text-decoration:underline}
.bub img.shot{max-width:min(100%,240px);max-height:240px;width:auto;height:auto;border-radius:8px;display:block;cursor:pointer} /* v33: 카카오워크처럼 작게 — 누르면 크게 */ /* height:auto — width/height 속성으로 비율만 잡고 크기는 화면에 맞춘다 */
.filecard{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}
.filecard .fi{
width:36px;height:36px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);
display:grid;place-items:center;font-size:15px;flex:none;font-weight:800
}
.filecard b{display:block;font-size:13.5px}
.filecard small{color:var(--muted);font-size:11.5px}
.dropzone{
position:absolute;inset:52px 12px 74px;border:2px dashed var(--accent);border-radius:12px;
background:var(--accent-soft);display:grid;place-items:center;color:var(--accent-ink);
font-weight:800;pointer-events:none;z-index:5
}
.composer{
display:flex;gap:8px;align-items:flex-end;padding:10px 12px;
background:var(--surface);border-top:1px solid var(--line);
padding-bottom:calc(10px + env(safe-area-inset-bottom))
}
.composer textarea{
flex:1;resize:none;max-height:140px;padding:10px 15px;border:1px solid var(--line-strong);
border-radius:20px;background:var(--surface-2);line-height:1.5
}
.send{flex:none}
/* ---------------- 시트 ---------------- */
.scrim{position:fixed;inset:0;background:rgba(6,14,13,.45);z-index:80}
.sheet{
position:fixed;z-index:81;background:var(--surface);border:1px solid var(--line);
border-radius:14px;width:min(460px,calc(100% - 32px));max-height:min(80vh,700px);
top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;
box-shadow:0 30px 70px -30px rgba(0,0,0,.6)
}
.sheet-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:14px 12px 14px 20px;border-bottom:1px solid var(--line)
}
.sheet-head b{font-size:15.5px}
.sheet-body{padding:18px 20px 22px;overflow-y:auto}
.list-row{
display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)
}
.list-row:last-child{border-bottom:none}
.list-row .lr{flex:1;min-width:0}
.list-row .lr b{display:block;font-size:14px}
.list-row .lr small{color:var(--muted);font-size:12px}
.chip{
font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:99px;
background:var(--accent-soft);color:var(--accent-ink)
}
.chip.off{background:var(--surface-2);color:var(--muted)}
.chip.on{background:var(--accent);color:var(--on-accent)}
.pickrow{display:flex;gap:10px;align-items:center;padding:8px 0;cursor:pointer}
.pickrow input{width:17px;height:17px;accent-color:var(--accent)}
.sec{margin:20px 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
.sec:first-child{margin-top:0}
.timerow{display:flex;gap:10px;align-items:center}
.timerow select{padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2)}
.switch{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer}
.switch input{width:17px;height:17px;accent-color:var(--accent)}
.searchres{padding:9px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.searchres:hover{background:var(--surface-2)}
.searchres b{font-size:12.5px;color:var(--accent);display:block;line-height:1.5}
.searchres p{margin:2px 0 0;font-size:13.5px;line-height:1.5}
.searchres small{display:block;margin-top:3px;color:var(--muted);font-size:11.5px}
.searchres mark{background:#ffe58a;color:#3a3020;border-radius:2px;padding:0 1px}
.srtag{
display:inline-block;margin-right:6px;padding:1px 6px;border-radius:4px;
background:var(--surface-2);border:1px solid var(--line-strong);
color:var(--muted);font-size:10.5px;font-weight:700;vertical-align:1px
}
#srMore{margin:10px 16px 16px;width:calc(100% - 32px)}
/* 보내는 중 / 안 보내진 글 */
.row.pending .bub{opacity:.55}
.row.pending .meta{color:var(--muted)}
.row.failed .bub{box-shadow:0 0 0 1px var(--crit)}
.meta .failmark{color:var(--crit);font-weight:700}
.meta .retry{
border:1px solid var(--crit);background:transparent;color:var(--crit);
border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700;cursor:pointer;margin-right:5px
}
.meta .retry.ghost{border-color:var(--line-strong);color:var(--muted)}
/* 프로필 고치기 */
.facepreview{display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 0 14px}
.facerow{display:flex;align-items:flex-end;gap:16px}
.faceinput{font-family:inherit;line-height:1.5;resize:none}
.avatar.big{
width:88px;height:88px;border-radius:24px;display:grid;place-items:center;
color:#fff;font-weight:800;font-size:26px;text-align:center;
white-space:pre-line;line-height:1.05;letter-spacing:-.03em;overflow:hidden
}
.fpname{font-size:13px;color:var(--muted)}
.colorgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;padding:4px 0 8px}
.swatch{
width:100%;aspect-ratio:1/1;border-radius:50%;border:0;cursor:pointer;padding:0;
box-shadow:0 0 0 1px rgba(0,0,0,.10) inset;position:relative
}
.swatch.on::after{
content:"";position:absolute;inset:-4px;border-radius:50%;
border:2px solid var(--ink)
}
/* 알림 진단 */
.diag{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.diagrow{display:flex;gap:10px;align-items:flex-start;padding:7px 2px;border-bottom:1px solid var(--line)}
.diagrow .mk{width:18px;font-weight:800;text-align:center;flex:none}
.diagrow.ok .mk{color:#2e7d52}
.diagrow.no .mk{color:#b3402f}
.diagrow .tx b{display:block;font-size:13.5px;font-weight:600}
.diagrow .tx small{display:block;margin-top:2px;color:var(--muted);font-size:11.5px;line-height:1.5}
.diagrow.no .tx b{color:#b3402f}
/* 공유받은 것을 어디로 보낼지 고르는 목록 */
.pickrooms{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.pickrooms .btn{text-align:left;justify-content:flex-start}
/* 첨부 고르기 — 카카오워크처럼 큰 동그란 단추 */
/* 검색 결과에서 뛰어간 글 — 잠깐 표시해 준다 */
.row.found .bub{box-shadow:0 0 0 2px #ffd54a, 0 0 0 7px rgba(255,213,74,.22)}
.row.found{border-radius:10px;animation:foundfade 2.6s ease-out}
@keyframes foundfade{0%{background:rgba(255,213,74,.20)}100%{background:transparent}}
.toast{
position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
background:var(--ink);color:var(--ground);padding:10px 18px;border-radius:99px;
font-size:13.5px;font-weight:700;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)
}
.lightbox{
position:fixed;inset:0;z-index:70;background:rgba(6,14,13,.9);display:grid;place-items:center;padding:20px
}
.lightbox img{max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto;object-fit:contain;border-radius:8px}
/* ---------------- 모바일 ---------------- */
@media (max-width:760px){
.app{grid-template-columns:1fr}
.side{border-right:none}
.app.showchat .side{display:none}
.app:not(.showchat) .main{display:none}
.back{display:grid}
.bub-wrap{max-width:84%}
.msgs{padding:14px 12px 6px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ================= 2단계: 승인 카드 · 인용 · 멘션 ================= */
.card{
border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);
overflow:hidden;min-width:min(340px,70vw)
}
.card-top{
display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);
background:var(--surface-2)
}
.card-top .lbl{
font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--muted)
}
.card-top .st{margin-left:auto}
.card-body{padding:13px 14px}
.card-body h4{margin:0 0 4px;font-size:15px;font-weight:800;letter-spacing:-.01em}
.card-body .detail{white-space:pre-wrap;font-size:13.5px;color:var(--muted)}
.card-body .ref{
font-size:11.5px;color:var(--muted);margin-top:7px;
font-family:Consolas,"D2Coding",monospace
}
.card-meta{font-size:12px;color:var(--muted);margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
.card-meta b{color:var(--ink)}
.card-acts{display:flex;gap:8px;padding:0 14px 13px}
.card-acts .btn{flex:1;padding:9px}
.st-pending{background:var(--accent-soft);color:var(--accent-ink)}
.st-approved{background:var(--accent);color:var(--on-accent)}
.st-rejected{background:var(--crit);color:#fff}
.card.done{opacity:.92}
.card.approved{border-color:var(--accent)}
.card.rejected{border-color:var(--crit)}
.quote{
border-left:3px solid var(--line-strong);padding:2px 0 2px 9px;margin-bottom:6px;
font-size:12.5px;color:var(--muted);cursor:pointer;max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.quote b{color:var(--ink);font-weight:700}
.mention{color:var(--accent-ink);background:var(--accent-soft);border-radius:4px;padding:0 3px;font-weight:700}
.row.mentioned .bub{box-shadow:inset 3px 0 0 var(--accent)}
.msgacts{display:flex;gap:6px;opacity:0;transition:opacity .12s}
/* 마우스가 있는 기기에서만 올렸을 때 보인다.
폰은 한 번 누른 것을 "올린 것" 으로 쳐서 글 밑에 작은 메뉴가 나타났다 사라졌다 했다 — 폰은 길게 누르기로 */
/* 1.2.15: 기기 검출을 아예 뺐다. 마우스를 올리면 무조건 보인다.
(손가락으로 만지는 중이면 html.touched 가 붙어 안 뜬다 — 폰은 꾹 누르기 메뉴로)
1.4.3: 여기 있던 `:hover` 규칙을 뺐다. 켜는 길이 `.row.acts-on` 하나만 남는다 —
아래 1.4.3 주석 참고. */
.msgacts button{
border:none;background:transparent;color:var(--muted);font-size:11px;cursor:pointer;padding:0
}
.msgacts button:hover{color:var(--accent);text-decoration:underline}
.replybar{
display:flex;align-items:center;gap:10px;padding:7px 14px;background:var(--surface-2);
border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)
}
.replybar .txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replybar b{color:var(--ink)}
/* 1.4.3: 사진·동영상에 답장할 때 답장 바에도 작은 그림 (말풍선 쪽 .qthumb 와 같게) */
.replybar .rthumb{
width:22px;height:22px;border-radius:4px;object-fit:cover;
vertical-align:-6px;margin-right:6px;background:var(--surface-2)
}
.mentionbox{
position:absolute;bottom:64px;left:50px;z-index:15;background:var(--surface);
border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 16px 40px -20px rgba(0,0,0,.5);
min-width:210px;max-height:240px;overflow-y:auto;padding:5px
}
.mentionbox .mi{display:flex;gap:9px;align-items:center;padding:7px 9px;border-radius:7px;cursor:pointer}
.mentionbox .mi.on,.mentionbox .mi:hover{background:var(--accent-soft)}
.mentionbox .mi b{font-size:13.5px}
.mentionbox .mi small{color:var(--muted);font-size:11.5px}
.tokenbox{
font-family:Consolas,"D2Coding",monospace;font-size:12px;background:var(--surface-2);
border:1px solid var(--line);border-radius:8px;padding:10px 12px;word-break:break-all;
margin:6px 0 2px;user-select:all
}
/* ================= 3단계: 안내 상자 ================= */
.note{
border-left:3px solid var(--accent);background:var(--accent-soft);
padding:12px 15px;border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.65;margin:4px 0 14px
}
.note b{font-weight:800}
/* ================= 4단계: 할 일 · 칸반 ================= */
.side-tabs{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line)}
.side-tabs button{
flex:1;padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:8px;
cursor:pointer;font-weight:700;font-size:13.5px;color:var(--muted)
}
.side-tabs button.on{background:var(--accent-soft);color:var(--ink);border-color:var(--line)}
.side-tabs .cnt{
display:inline-block;min-width:15px;padding:0 4px;border-radius:99px;background:var(--crit);
color:#fff;font-size:10px;line-height:15px;font-weight:800;margin-left:3px
}
#chatSide,#taskSide{flex:1;min-height:0;display:flex;flex-direction:column}
.boxlist{flex:1;overflow-y:auto;padding:8px 0}
.box{
display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;
border-left:3px solid transparent;font-size:14px
}
.box:hover{background:var(--surface-2)}
.box.on{background:var(--accent-soft);border-left-color:var(--accent);font-weight:700}
.box .n{margin-left:auto;color:var(--muted);font-size:12px;font-weight:700}
.box.alert .n{background:var(--crit);color:#fff;border-radius:99px;padding:0 7px;min-width:19px;text-align:center}
.boxsep{height:1px;background:var(--line);margin:8px 16px}
.boxhead{padding:10px 16px 4px;font-size:11px;letter-spacing:.08em;color:var(--muted);font-weight:700}
.tasks{flex:1;min-height:0;display:flex;flex-direction:column}
.board{flex:1;min-height:0;overflow:auto;padding:14px}
.board.kanban{display:flex;gap:12px;align-items:flex-start}
.col{
flex:1 1 0;min-width:210px;background:var(--surface-2);border:1px solid var(--line);
border-radius:12px;display:flex;flex-direction:column;max-height:100%
}
.col-head{
padding:10px 12px;font-size:12.5px;font-weight:800;color:var(--muted);
border-bottom:1px solid var(--line);display:flex;gap:6px;align-items:center
}
.col-head .n{margin-left:auto;font-weight:700}
.col-body{padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:60px}
.tcard{
background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
cursor:pointer;display:flex;flex-direction:column;gap:6px
}
.tcard:hover{border-color:var(--line-strong)}
.tcard .tt{font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcard .tm{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.tcard .who{display:flex;gap:-4px}
.dday{font-weight:800;font-size:11.5px}
.dday.over{color:var(--crit)}
.dday.today{color:var(--warn)}
.chipn{background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:1px 7px;font-size:11px}
.roomtag{color:var(--muted);font-size:11.5px}
.board.list{display:block}
.board.list .trow{
display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--surface);
border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer
}
.board.list .trow:hover{border-color:var(--line-strong)}
.board.list .trow .tt{flex:1;min-width:0;font-size:14px}
.statustabs{display:none;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);overflow-x:auto}
.statustabs button{
padding:6px 12px;border:1px solid var(--line-strong);background:var(--surface);border-radius:99px;
cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap
}
.statustabs button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.duechips{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 12px}
.duechips button{
padding:6px 12px;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;
cursor:pointer;font-size:13px;font-weight:700;color:var(--muted)
}
.duechips button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.picked{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.picked .p{
display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);
border-radius:99px;padding:3px 6px 3px 10px;font-size:12.5px
}
.picked .p button{border:none;background:transparent;cursor:pointer;color:var(--muted);font-size:14px;line-height:1}
.tdetail .ttitle{font-size:15px;font-weight:700;line-height:1.5;white-space:pre-wrap;margin-bottom:10px}
.tdetail .meta{color:var(--muted);font-size:12.5px;margin-bottom:12px}
.tdetail .who-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.tdetail .who-row .nm{flex:1}
.tdetail .ok{color:var(--accent-ink);font-weight:800;font-size:12.5px}
.evlist{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.ev{font-size:12.5px;color:var(--muted);padding:4px 0}
.ev b{color:var(--ink)}
@media (max-width:760px){
.board.kanban{display:block}
.col{display:none}
.col.on{display:flex;min-width:0;max-height:none;background:transparent;border:none}
.col.on .col-head{display:none}
.col.on .col-body{padding:0}
.statustabs{display:flex}
.board{padding:12px}
}
/* ================= 5단계: 프로젝트 ================= */
.side-tabs button{font-size:12.5px;padding:7px 6px}
#projSide{flex:1;min-height:0;display:flex;flex-direction:column}
.projtop{padding:10px 12px;border-bottom:1px solid var(--line)}
.projtop .btn{margin-top:0}
.projlist{flex:1;overflow-y:auto;padding-bottom:10px}
.pj{
display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:11px 16px;cursor:pointer;
border-left:3px solid transparent
}
.pj:hover{background:var(--surface-2)}
.pj.on{background:var(--accent-soft);border-left-color:var(--accent)}
.pj b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj .sm{
grid-column:1/2;color:var(--muted);font-size:12px;line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.pj .rr{grid-row:1/2;grid-column:2/3;text-align:right}
.pj .rr time{display:block;color:var(--muted);font-size:11px}
.pj.done b,.pj.done .sm{opacity:.55}
.summary{
padding:9px 16px;background:var(--accent-soft);border-bottom:1px solid var(--line);
font-size:12.5px;color:var(--ink);display:flex;gap:8px;align-items:flex-start
}
.summary .lb{font-weight:800;color:var(--muted);flex:none;font-size:11.5px;padding-top:1px}
.summary .tx{flex:1;min-width:0}
.summary .ago{color:var(--muted);font-size:11px;flex:none}
/* ---- 프로젝트: 슬랙 스레드처럼 ---- */
.msgs.thread .row{margin-bottom:0;padding:14px 2px;border-bottom:1px solid var(--line)}
.msgs.thread .row:last-child{border-bottom:none}
.msgs.thread .bub-wrap{max-width:100%;width:100%}
.msgs.thread .nm{color:var(--ink);font-size:13.5px;margin-bottom:5px}
.msgs.thread .nm .at{color:var(--muted);font-weight:600;font-size:11.5px;margin-left:4px}
.msgs.thread .bub{
background:transparent;border:none;border-radius:0;padding:0;
font-size:14.5px;line-height:1.7
}
.msgs.thread .meta{margin-top:8px}
.msgs.thread .row.mentioned{background:var(--accent-soft);border-radius:8px;padding-left:10px;padding-right:10px}
/* 1.2.16: 프로젝트에서도 이모지 줄은 늘 떠 있지 않는다 — 다른 방과 같이 (PC 는 마우스 올릴 때, 폰은 꾹 누르기). 대표 지시 */
.edited{color:var(--muted);font-size:11px}
.composer.thread{align-items:flex-end}
.composer.thread textarea{
min-height:96px;max-height:260px;line-height:1.7;padding:12px 14px;background:var(--surface)
}
.composer.thread .send{height:44px}
/* 탭 숫자 — 대화·할 일·프로젝트 세 곳 모두 */
.side-tabs button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.pj.has-unread b{font-weight:800}
.pj.has-unread .sm{color:var(--ink)}
/* 로고 = 처음 화면으로 가는 버튼 */
button.brand{border:none;background:transparent;cursor:pointer;padding:0;font:inherit}
button.brand:hover{opacity:.75}
/* 누가 쓰고 있는지 */
.typing{
display:flex;align-items:center;gap:7px;padding:5px 16px;
color:var(--muted);font-size:12px;background:var(--surface);
border-top:1px solid var(--line)
}
.typing .dots{
letter-spacing:2px;font-weight:800;color:var(--accent);
animation:kpwdots 1.2s steps(4,end) infinite
}
@keyframes kpwdots{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.typing .dots{animation:none}}
/* ================= v19 에서 더한 것 ================= */
/* 사진 크게 보기 아래 단추 (저장 · 공유 · 전달) */
.lbbar{
position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:8px;
padding:14px 12px calc(14px + env(safe-area-inset-bottom));
background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0))
}
.lbbtn{
display:flex;flex-direction:column;align-items:center;gap:3px;min-width:76px;
border:0;background:transparent;color:#fff;font-size:12px;font-weight:700;
cursor:pointer;text-decoration:none;padding:6px 8px;border-radius:10px
}
.lbbtn:hover{background:rgba(255,255,255,.14)}
.lbbtn svg{width:23px;height:23px}
/* 동영상 말풍선 */
.shot.vid{display:block;max-width:100%;border-radius:10px;background:#000}
.vidname{display:block;color:var(--muted);font-size:11.5px;margin-top:4px}
/* 어디로 보낼지 고르는 창 */
.pickfind{
width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;
background:var(--surface-2);margin-bottom:10px
}
.pickone{
width:100%;display:flex;align-items:center;gap:11px;text-align:left;
border:1px solid var(--line);background:var(--surface);border-radius:10px;
padding:9px 12px;margin-bottom:6px;cursor:pointer
}
.pickone:hover{border-color:var(--accent)}
.pickone:disabled{opacity:.5}
.pickone .lr{min-width:0}
.pickone .lr b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickone .lr small{color:var(--muted);font-size:11.5px}
/* 검색 — 갈래 탭 · 기간 */
.srtabs{display:flex;gap:5px;padding:0 10px 8px;overflow-x:auto;scrollbar-width:none}
.srtabs::-webkit-scrollbar{display:none}
.srtab{
flex:none;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);
border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer
}
.srtab.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.srdates{display:flex;gap:5px;padding:0 10px 8px;overflow-x:auto;scrollbar-width:none;
border-bottom:1px solid var(--line)}
.srdates::-webkit-scrollbar{display:none}
.daybtn{
flex:none;border:1px solid var(--line);background:transparent;color:var(--muted);
border-radius:99px;padding:4px 11px;font-size:12px;cursor:pointer
}
.daybtn.on{background:var(--accent-soft);border-color:var(--line-strong);color:var(--ink);font-weight:700}
.srpick{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--line)}
.srpick input{flex:1;padding:7px 9px;border:1px solid var(--line-strong);border-radius:8px;
background:var(--surface-2);font-size:12.5px}
.srpick span{color:var(--muted)}
/* 검색 결과 사진 칸 */
.srshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:5px;padding:6px 10px 12px}
.srshots img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;cursor:pointer;
background:var(--surface-2)}
/* 왼쪽으로 밀면 답장 */
.row.swiping{will-change:transform}
.row.swiping .bub{transition:none}
.row.swipeready .bub{box-shadow:0 0 0 2px var(--accent)}
/* 검색에서 뛰어온 뒤 새 글이 왔을 때 — 아래로 내려가라는 알림 */
.newerhint{
position:absolute;left:50%;bottom:76px;transform:translateX(-50%);
border:0;border-radius:99px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;
background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px -8px rgba(0,0,0,.6);z-index:3
}
/* PC 에 앱으로 설치 안내 띠 (대화 목록 맨 위) */
.installbar{
display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;
background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:12.5px
}
.installbar span{flex:1;min-width:0;color:var(--ink)}
.installbar .btn{padding:5px 12px;font-size:12.5px}
/* ---------------- 이모지 반응 ---------------- */
.reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.rchip{
display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);
background:var(--surface);border-radius:99px;padding:2px 8px 2px 6px;font-size:12px;
cursor:pointer;line-height:1.4
}
.rchip.mine{border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.rchip .re{font-size:14px}
.re.big{font-size:22px;width:34px;text-align:center}
.reactbar{
position:fixed;z-index:60;display:flex;gap:2px;align-items:center;
background:var(--surface);border:1px solid var(--line);border-radius:22px;
padding:4px 6px;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
/* 좁은 폰에서 [복사][답장][수정][삭제] 까지 붙으면 한 줄에 안 들어간다 → 둘째 줄로 넘긴다 */
flex-wrap:wrap;max-width:calc(100vw - 16px);justify-content:center
}
.rbtn{
border:0;background:transparent;font-size:22px;line-height:1;width:38px;height:38px;
border-radius:50%;cursor:pointer;display:grid;place-items:center
}
.rbtn:hover{background:var(--surface-2)}
.rbtn.on{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.rbtn.txt{font-size:12.5px;font-weight:700;width:auto;padding:0 10px;border-radius:99px;color:var(--ink);white-space:nowrap}
/* 1.2.15: 기기가 무엇인지 **검출하지 않는다**. 손가락으로 누르는 그 순간에만 글자 선택을 끄고,
마우스를 쓰면 바로 다시 켠다 (app.js 의 pointerdown → html.touched).
지금까지는 "마우스 있는 기기인가" 를 미디어 쿼리로 맞히려다 대표님 PC 에서 계속 틀렸다.
- 손가락: 꾹 누르면 글자 선택 대신 우리 메뉴가 뜬다 (카카오워크와 같음)
- 마우스: 언제나 끌어서 부분 선택·복사 */
html.touched .bub{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (any-hover:none){
/* 아이폰 사파리는 16px 보다 작은 입력칸을 누르면 화면을 확대해 버린다.
폰에서만 입력칸 글자를 16px 로 — 로그인 칸, 메시지 칸, 검색 칸 전부 */
input,textarea,select{font-size:16px}
/* 아이폰은 화면 모서리가 둥글어 맨 아래 줄의 귀퉁이가 깎여 보인다 → 아래 막대를 4px 올린다.
(v25 의 8px 은 너무 올라갔다고 하셔서 반으로) 안드로이드도 같이 */
.composer{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.side-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
/* 아이폰 키보드가 떠 있는 동안: 홈 막대 여백(env(safe-area-inset-bottom))은 키보드 밑에 깔려
보이지도 않는데 값은 그대로라, 입력줄 아래에 흰 빈칸이 생겼다 → 그때만 여백을 뺀다 */
body.kb-open .composer{padding-bottom:10px}
}
/* ---------------- 글자 크기 "작게" (기본) — ≡ 에서 보통으로 바꿀 수 있다 ---------------- */
html.fs-small body{font-size:13.5px}
html.fs-small .bub{font-size:13.5px}
html.fs-large .room .rt b{font-size:16.5px}
html.fs-large .room .rt small{font-size:14.5px}
html.fs-large .nm{font-size:14px}
html.fs-large .meta{font-size:12.5px}
html.fs-small .room .rt b{font-size:13.5px}
html.fs-small .room .rt small{font-size:12px}
html.fs-small .nm{font-size:12px}
html.fs-small .meta{font-size:11px}
html.fs-small .chat-title b{font-size:14.5px}
html.fs-small .sheet-body,html.fs-small .sheet p,html.fs-small .sheet .hint{font-size:13px}
html.fs-small .quote{font-size:12px}
.fsrow{display:flex;align-items:center;gap:8px;margin:6px 0 10px}
.fslabel{flex:1;font-weight:700}
.btn.fsbtn{padding:6px 14px}
.btn.fsbtn.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
/* 사진 묶음 말풍선 — 정사각 격자 (4장까지 2칸, 그 위는 3칸) */
.bub.shots{display:grid;gap:3px;padding:3px;background:var(--surface-2);width:min(100%,300px);min-width:200px;overflow:hidden;border-radius:12px}
.row.bundle .bub-wrap{width:min(300px,78%)} /* 격자가 자리를 넉넉히 차지하게 (v31: :has() 는 스크롤마다 계산이 무거워 class 로) */
.bub.shots.c2{grid-template-columns:repeat(2,1fr)}
.bub.shots.c3{grid-template-columns:repeat(3,1fr)}
.bub.shots .cell,.srshots .cell{position:relative;aspect-ratio:1/1;overflow:hidden;background:#ddd;cursor:pointer} /* v34: 칸마다 둥근 모서리 자르기(8번 클리핑)를 빼고 격자 바깥만 둥글게 — PC 그리기 비용 */
.srshots .cell{border-radius:8px}
.bub.shots .cell img,.srshots .cell img{width:100%;height:100%;object-fit:cover;display:block}
.bub.shots .cell .playmark,.srshots .cell .playmark{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
background:rgba(0,0,0,.55);color:#fff;font-size:14px;display:grid;place-items:center;pointer-events:none
}
.row.me .bub.shots{margin-left:auto}
/* 말풍선 옆 내보내기(⬆) 단추 — 사진·동영상·파일에 늘 붙어 있다 (카톡과 같은 자리) */
.bubline{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.row.me .bubline{flex-direction:row-reverse}
.sharebtn{
flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0
}
.sharebtn svg{width:15px;height:15px}
.sharebtn:hover{color:var(--ink);border-color:var(--line-strong)}
.bubline .bub{min-width:0}
/* 모아보기 시트 */
.medialist{max-height:60vh;overflow-y:auto;overscroll-behavior:contain}
.medialist .srshots{padding:4px 0 10px}
.medialist .filecard{padding:8px 4px;border-bottom:1px solid var(--line)}
.linkcard{display:block;padding:8px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.linkcard b{display:block;color:var(--accent-ink);font-weight:700;word-break:break-all;font-size:13.5px}
.linkcard small{color:var(--muted);font-size:12px}
/* 삭제된 글 — 회색 글씨만 남는다 */
.bub.deleted,.row.me .bub.deleted{color:var(--muted);font-style:italic;background:transparent;border:1px dashed var(--line-strong)}
.rbtn.txt.danger{color:var(--crit)}
/* ---------------- 전달 대상 선택 (카카오워크식) ---------------- */
.sheet-acts{display:flex;align-items:center;gap:6px}
.sheet-acts .btn{padding:6px 14px;font-size:13px}
.picktabs{display:flex;gap:18px;padding:0 2px 8px;border-bottom:1px solid var(--line);margin-bottom:10px}
.picktab{
border:0;background:transparent;padding:6px 2px;font-size:15px;font-weight:800;
color:var(--muted);cursor:pointer;border-bottom:2px solid transparent
}
.picktab.on{color:var(--ink);border-bottom-color:var(--ink)}
.pickone{
width:100%;display:flex;align-items:center;gap:12px;text-align:left;
border:0;background:transparent;border-radius:10px;padding:9px 6px;margin-bottom:2px;cursor:pointer
}
.pickone:hover{background:var(--surface-2)}
.pickone.on{background:var(--accent-soft)}
.pickone .lr{min-width:0;flex:1}
.pickone .lr b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickone .lr b .cnt{color:var(--muted);font-weight:600;font-size:12.5px}
.pickone .lr small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickdot{
width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none;
display:grid;place-items:center;background:var(--surface)
}
.pickone.on .pickdot{border-color:var(--accent);background:var(--accent)}
.pickone.on .pickdot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-accent)}
/* 폰에서는 창을 거의 전체 화면으로 */
@media (max-width:640px){
.sheet{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
}
/* ---------------- 동영상 말풍선 (정지 화면 + ▶) ---------------- */
.vidthumb{position:relative;display:block;cursor:pointer;max-width:100%}
.vidthumb .shot{display:block;border-radius:10px;background:#000;min-width:140px;min-height:90px;max-width:min(100%,240px);max-height:240px;width:auto;height:auto}
.vidthumb.nothumb .shot{visibility:hidden}
.vidthumb.nothumb{background:#222;border-radius:10px;min-width:180px;min-height:110px}
.playmark{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
display:grid;place-items:center;font-size:18px;padding-left:4px;pointer-events:none
}
.vidthumb .vidname{position:absolute;left:8px;bottom:6px;color:#fff;font-size:11px;
text-shadow:0 1px 2px rgba(0,0,0,.8);max-width:calc(100% - 16px);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.lightbox.vbox video{max-width:100%;max-height:calc(100% - 90px);outline:0;background:#000}
/* ============================================================ v28 */
/* 대화 목록 상단 고정 */
.room .pinmark{display:inline-block;width:12px;height:12px;margin-top:6px;color:var(--muted)}
.room .pinmark svg{width:12px;height:12px;display:block}
.rl-sec{font-size:11px;color:var(--muted);padding:8px 16px 2px}
/* 세션형 봇 — PC 는 가운데 네이비 칸, 폰은 왼쪽 서랍 */
.main.sess{flex-direction:row}
.main.sess .chat{flex:1;min-width:0}
/* 세션형 봇 화면 — 말풍선 대신 넓은 글 (챗GPT 식) */
/* 봇 답 안의 제목·표·목록 (간단한 마크다운) */
.md h1,.md h2,.md h3{margin:.7em 0 .3em;font-size:1.05em;font-weight:800}
.md h1{font-size:1.15em}
.md p{margin:.35em 0}
.md ul,.md ol{margin:.35em 0;padding-left:1.4em}
.md li{margin:.15em 0}
.md table{border-collapse:collapse;margin:.5em 0;font-size:.95em;display:block;overflow-x:auto;max-width:100%}
.md th,.md td{border:1px solid var(--line);padding:4px 10px;text-align:left;white-space:nowrap}
.md th{background:var(--surface-2);font-weight:700}
.md pre{background:var(--surface-2);padding:8px 10px;border-radius:8px;overflow-x:auto;font-size:.9em;white-space:pre}
.md code{background:var(--surface-2);padding:0 4px;border-radius:4px;font-size:.92em}
.md pre code{background:none;padding:0}
.md a{color:var(--brand)}
/* 내 비서 — 브리핑 카드 · 근거 링크 */
.brief{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;max-width:560px}
.brief .bt{font-size:12px;color:var(--muted);margin-bottom:6px}
.brief .lead{margin:0 0 4px}
.brief h4{margin:12px 0 4px;font-size:13.5px}
.brief .bi{padding:3px 0 3px 2px;font-size:13.5px}
.brief .bi .src{display:block;font-size:11px;color:var(--brand);margin-left:12px;cursor:pointer}
.brief .bi .src:hover{text-decoration:underline}
.brief .bi.link{cursor:pointer}
.brief .bi.link:hover{text-decoration:underline}
.brief .tag{font-size:11px;color:var(--muted);margin-right:4px}
.brief .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.brief .acts .btn{font-size:12.5px;padding:7px 12px}
.brief .none{color:var(--muted)}
.refs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.refs button{
font-size:11px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:2px 9px;
color:var(--brand);cursor:pointer;font-family:inherit
}
.refs button:hover{border-color:var(--brand)}
.brf-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.brf-row select{font-family:inherit;font-size:14px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.switch input{width:18px;height:18px}
@media (max-width:760px){
.main.sess{flex-direction:column}
}
@media (min-width:761px){ #btnSess,#btnSessNew{display:none!important} }
/* ============================================================ v29 */
/* PC 에서 칸 폭 끌어서 조절 — 대화 목록 칸 · 세션형 봇 칸 */
.side{position:relative}
.resizer{
position:absolute;top:0;bottom:0;right:-3px;width:7px;cursor:col-resize;z-index:6;
background:transparent;transition:background .15s
}
.resizer:hover,.resizer.on{background:rgba(10,44,116,.35)}
body.resizing{cursor:col-resize;user-select:none}
body.resizing *{cursor:col-resize!important}
@media (max-width:760px){ .resizer{display:none} }
/* 판 번호 — 오른쪽 위 작은 회색. 서버와 화면이 다르면 빨갛게 */
.vertag{font-size:11px;color:var(--muted);white-space:nowrap;margin-left:4px;align-self:center}
.vertag.corner{position:absolute;top:12px;right:16px}
.vertag.bad{color:#c62828;font-weight:700}
.vertag:empty{display:none}
/* ============================================================ v30 */
.lbnav{
position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
background:rgba(255,255,255,.14);color:#fff;border:0;font-size:26px;cursor:pointer;display:grid;place-items:center;
font-family:inherit;z-index:2
}
.lbnav:hover{background:rgba(255,255,255,.28)}
.lbnav.prev{left:14px}.lbnav.next{right:14px}
.lbnav:disabled{opacity:.25;cursor:default}
.lbcount{position:absolute;top:14px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(0,0,0,.35);padding:3px 12px;border-radius:99px}
@media (max-width:760px){ .lbnav{display:none} }
/* ============================================================ v35 */
/* ① PC 스크롤 튐 — 스크롤 중에는 마우스 올림(hover)·커서 바뀜·엣지의 "이미지 비주얼 검색" 손잡이가
글마다 새로 잡히지 않게 한다. 사진 격자 칸의 ![]()
는 마우스를 받지 않고(누르기는 칸이 받음),
스크롤이 멈추면 150ms 뒤 원래대로. */
@media (any-hover:hover) and (any-pointer:fine){ .msgs.scrolling *{pointer-events:none!important} } /* 1.2.12: 마우스 있는 기기 */
.bub.shots .cell img,.vidthumb .shot{pointer-events:none}
/* ④ PC 세로 동영상 — 화면 높이에 맞춰 통째로 (예전 % 는 격자 칸 기준이라 가로가 잘렸다) */
.lightbox.vbox video{max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto}
/* ⑤ 카카오워크식 — 사진·동영상만 있는 글은 말풍선 없이 사진만 둥글게. 세로 사진은 폭×1.25 에서 자른다 */
.bub.photo,.row.me .bub.photo{background:transparent;border:0;padding:0;border-radius:12px;overflow:hidden}
.bub.photo img.shot{max-width:min(100%,240px);max-height:300px;width:auto;height:auto;object-fit:cover;border-radius:12px}
.bub.photo.tall{width:min(240px,100%)}
.bub.photo.tall img.shot{width:100%;height:auto;max-height:none;aspect-ratio:4/5;object-fit:cover} /* 세로 사진: 폭 240, 높이는 폭×1.25 에서 자른다 */
.bub.photo .vidthumb .shot{border-radius:12px}
.row.pending .bub.photo{opacity:.55}
.row.mentioned .bub.photo{box-shadow:none}
/* ② 사진 창 — 같은 창에서 그림만 바꾼다. 아래 작은 사진 줄(PC)·저장 메뉴 */
.lightbox .lbimg{transition:opacity .15s}
.lightbox .lbimg.dim{opacity:.6}
.lbstrip{
position:fixed;left:50%;bottom:92px;transform:translateX(-50%);display:flex;gap:6px;align-items:center;
max-width:min(80vw,900px);overflow-x:auto;padding:6px 8px;background:rgba(0,0,0,.35);border-radius:10px;
scrollbar-width:none;z-index:2
}
.lbstrip::-webkit-scrollbar{display:none}
.lbstrip img{width:52px;height:52px;object-fit:cover;border-radius:6px;opacity:.55;cursor:pointer;flex:none;border:2px solid transparent}
.lbstrip img.on{opacity:1;border-color:#ffd54a}
.lbstrip .vmark{position:relative}
@media (max-width:760px){ .lbstrip{display:none} }
.lbmenu{
position:fixed;right:18px;bottom:96px;background:var(--surface);color:var(--ink);border-radius:10px;
box-shadow:0 10px 30px -10px rgba(0,0,0,.6);padding:6px;z-index:3;min-width:180px
}
.lbmenu button{
display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:8px;
font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;color:inherit
}
.lbmenu button:hover{background:var(--surface-2)}
.lbstage{display:grid;place-items:center;max-width:100%;max-height:100%;min-width:0;min-height:0}
@media (min-width:761px){ .lightbox.hasstrip img.lbimg,.lightbox.hasstrip video{max-height:calc(100vh - 230px)} } /* 아래 썸네일 줄 자리 */
/* ============================================================ v36 */
.room.has-unread .rt b{font-weight:800;color:var(--ink)}
.room.has-unread .rt .sm{color:var(--ink)}
/* ⑨ 단체방 얼굴 모음 */
.room .avatar.collage{display:grid;gap:1px;background:var(--surface-2);padding:0;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.room .avatar.collage .cf{width:100%;height:100%;border-radius:0;font-size:9px;display:grid;place-items:center;overflow:hidden;white-space:nowrap;letter-spacing:-.05em}
.room .avatar.collage.n2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.room .avatar.collage.n3 .cf:first-child{grid-row:1 / span 2}
.room .avatar.collage.n3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
/* ⑤ 사진 창 확대/축소 */
.lightbox{overflow:hidden}
.lightbox .lbimg{transform-origin:center center;touch-action:none}
/* 1.2.4: will-change:transform 을 뺌 — 크롬·엣지가 확대 전(화면 맞춤) 크기로 한 번 그린 그림을 그냥 늘려서
500% 에서 뿌옇게 보였음(대표 캡처, 재어 보니 선명도 0.5 → 31.6). 끄는 동안만 app.js 가 잠깐 켠다 */
.lightbox.zooming .lbimg{cursor:grab}
.lightbox.zooming .lbimg:active{cursor:grabbing}
/* 1.2.13: 대표 지시 — ✕ 와 확대 단추의 자리를 맞바꾼다 (확대 왼쪽 · 닫기 오른쪽).
닫기는 top 12 → 20px 로 조금 내렸다. KP Works 창 자체의 ✕ 가 바로 위에 있어
잘못 누르면 앱이 통째로 닫히기 때문. */
.lbzoom{
position:fixed;top:12px;left:16px;display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.35);
border-radius:99px;padding:3px 6px;z-index:3;color:#fff;font-size:12.5px
}
.lbzoom button{border:0;background:transparent;color:#fff;font-size:18px;line-height:1;width:30px;height:28px;border-radius:99px;cursor:pointer;font-family:inherit}
.lbzoom button.fit{font-size:12px;width:auto;padding:0 8px;font-weight:700}
.lbzoom button:hover{background:rgba(255,255,255,.2)}
.lbzoom span{min-width:42px;text-align:center}
@media (max-width:760px){ .lbzoom{top:auto;bottom:92px;left:12px;padding:2px 4px} .lbzoom span{display:none} .lbzoom button{width:34px;height:32px} }
.lbclose{position:fixed;top:20px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:18px;cursor:pointer;z-index:3;font-family:inherit}
.lbclose:hover{background:rgba(255,255,255,.2)}
/* ① AI 사용량 */
.usage-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 4px}
.usage-nav .btn{padding:4px 12px}
.utbl{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 8px}
.utbl th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:700;padding:4px 6px;border-bottom:1px solid var(--line)}
.utbl td{padding:6px 6px;border-bottom:1px solid var(--line)}
.utbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.utbl tr.over1 td:last-child{color:#b26a00;font-weight:700}
.utbl tr.over2 td:last-child{color:#d84315;font-weight:800}
.utbl tr.over3 td:last-child{color:#c62828;font-weight:800;text-decoration:underline}
.ubars{display:flex;align-items:flex-end;gap:4px;height:84px;overflow-x:auto;padding:4px 0}
.ubar{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;width:34px}
.ubar i{display:block;width:22px;background:var(--accent);border-radius:3px 3px 0 0}
.ubar small{font-size:9.5px;color:var(--muted)}
/* ⑩ 카카오워크식 글 메뉴 */
.reactbar.v2{flex-direction:column;align-items:stretch;gap:0;padding:0;border-radius:14px;overflow:hidden;min-width:190px;max-width:260px}
.reactbar.v2 .rb-emo{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--line);justify-content:center;flex-wrap:wrap}
.reactbar.v2 .rb-menu{display:flex;flex-direction:column;padding:4px 0}
.rbitem{
display:flex;align-items:center;gap:10px;border:0;background:transparent;text-align:left;
padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;white-space:nowrap
}
.rbitem:hover{background:var(--surface-2)}
.rbitem .ic{width:18px;text-align:center;font-size:14px;opacity:.75}
.rbitem.danger{color:var(--crit)}
/* 캡처 모드 */
.msgs.capmode .row{cursor:pointer}
.msgs.capmode .row.capsel{background:var(--accent-soft);border-radius:10px;box-shadow:0 0 0 4px var(--accent-soft)}
.msgs.capmode .daysep.capsel,.msgs.capmode .sys.capsel{background:var(--accent-soft);border-radius:10px}
.capbar{
position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:85;display:flex;align-items:center;gap:8px;
background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:8px 10px 8px 14px;
box-shadow:0 10px 30px -12px rgba(0,0,0,.5);max-width:calc(100vw - 16px)
}
.capbar .capinfo{font-size:13px;font-weight:700}
.capbar .btn{padding:6px 12px;font-size:13px}
.capbox{position:absolute;left:-10000px;top:0;padding:14px 16px 10px;background:var(--ground);display:flex;flex-direction:column}
.capbox .caphead{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.capbox .msgacts,.capbox .sharebtn{display:none!important}
/* ============================================================ v37 */
/* ② 봇 말풍선 연노란색(병아리색) — 세션형 화면의 봇 답도 같은 말풍선 */
:root{--bot-bub:#fff4c2;--bot-line:#f1e3a0}
.row.frombot .bub{background:var(--bot-bub);border-color:var(--bot-line)}
.row.frombot .bub.photo,.row.frombot .bub.shots,.row.frombot .bub.deleted{background:transparent}
.row.frombot .bub.shots{background:var(--surface-2)}
/* ⑦ 뱃지 정리 — 읽은 방 이름은 보통 굵기, 안 읽은 방만 굵고 진하게 (카카오워크식) */
.room .rt b{font-weight:500;color:var(--ink)} /* 읽은 방 = 보통 굵기 */
.room.has-unread .rt b{font-weight:800}
.room:not(.has-unread) .rt .sm{color:var(--muted)}
/* ⑥ 할 일 연기 */
.duebox .duechips input.datepick{border:1px solid var(--line-strong);border-radius:99px;padding:5px 10px;font-size:12.5px;font-family:inherit;background:var(--surface);color:var(--ink)}
.duebox .duechips button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.duereq{border:1px solid #f1e3a0;background:#fff8dc;color:#3a3020;border-radius:10px;padding:10px 12px;margin:4px 0 10px;font-size:13px}
.duereq b{display:block;margin-bottom:4px}
.duereq .duechips{margin:8px 0 0}
.duereq input.duenote{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;font-family:inherit;font-size:13px}
.chipn.req{background:#fff1b8;color:#7a5a00;font-weight:700}
.chipn.post{background:#ffe3c2;color:#8a4b00;font-weight:700}
/* ⑤ 사진·동영상 — 흐림 그림 자리·변환 중 표시 */
.lq{background-color:var(--surface-2)}
.bub.shots .cell.lq img{opacity:0;transition:opacity .2s}
.bub.shots .cell img{opacity:1;transition:opacity .2s}
img.shot.lq{color:transparent}
.vidthumb .convmark{
position:absolute;right:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 8px;border-radius:99px
}
.vidthumb.converting .playmark{opacity:.5}
/* ============================================================ v38 */
/* ① 봇 말풍선 훨씬 더 연한 노란색 rgb(255,255,240) — 대표 지정 값. 테두리도 그에 맞게 옅게 */
:root{--bot-bub:rgb(255,255,240);--bot-line:#ece7c4}
/* ⑤ 방별 초안 — 목록 미리보기에 「초안」 표시 */
/* ⑦ 가로로 넓은 사진(엑셀 캡처 등)의 말풍선 상자가 사진보다 훨씬 넓게 잡혀 사진이 가운데 떠 보이던 것 —
max-width 의 % 때문에 상자 폭이 원본 폭으로 계산됨 → 240px 고정(폰도 상자 폭이 240 을 넘는다) */
.bub.photo img.shot{max-width:240px}
.bubline .bub.photo{flex:0 0 auto;width:auto;max-width:100%}
/* ============================================================ v39 */
/* ⑤ 받은 글 아래 줄: 시각이 맨 왼쪽 → 1.3.0 에서 없앰 (시각이 말풍선 옆으로 감) */
/* ④ 세션(클로드봇) 화면 — 일반 대화처럼: 왼쪽 붙이고, 봇 말풍선은 내용 폭만큼, 글씨 크기 같게 */
/* ① 사진 창 [원본 받기] — LTE·5G(와 아이폰)에서 보기용 2000px 을 먼저 보여 줄 때 */
.lborig{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%);z-index:5;
background:rgba(0,0,0,.62);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:8px 16px;font-size:13px;cursor:pointer}
.lborig:disabled{opacity:.6}
.lightbox.hasstrip .lborig{bottom:calc(env(safe-area-inset-bottom) + 170px)}
/* ③ 검색 — 사진 속 글자로 찾은 사진 밑에 그 글자 */
.srshots .srcell{min-width:0}
.srshots .srcell img{display:block;width:100%}
.srshots .ocrhit{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
/* ============================================================ v40 */
/* ① 받는 말풍선도 내용 폭만큼 (카카오식). 전에는 바깥 상자가 남는 폭(최대 640px)을 다 차지하고 말풍선이 그걸 채웠다.
내 말풍선은 오른쪽 정렬 flex 라 원래 내용 폭이었다 → 받는 쪽도 같은 방식(세로 flex, 왼쪽 정렬). 프로젝트 글(thread)은 넓은 글 그대로 */
.msgs:not(.thread) .row:not(.me) .bub-wrap{display:flex;flex-direction:column;align-items:flex-start}
.msgs:not(.thread) .row:not(.me) .bub-wrap > *{max-width:100%}
.msgs:not(.thread) .row:not(.me) .bubline{max-width:100%}
/* ============================================================ 1.2.0 */
/* ⑥ 로고 밑 글귀 "Work better. Together." — 로고는 WORKS 글자 높이(16px)에 맞춰 비율 유지, 글귀는 로고 왼쪽 끝에서 시작 */
.brand.lockup{flex-wrap:wrap;row-gap:0;align-items:center;gap:7px;justify-content:flex-start;text-align:left}
.brand.lockup .lm{height:16px;width:auto}
.brand.lockup b{line-height:16px}
.brand.lockup .tag{flex-basis:100%;text-align:left;font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);margin:2px 0 0 0;line-height:1.2}
.side-top{align-items:flex-start}
/* ③ 검색 탭 줄이 검색칸 아래 줄에 닿던 것 — 줄을 없애고 탭 위에 여백 */
.searchbar{border-bottom:0;padding-bottom:4px}
.srtabs{padding:6px 10px 8px}
/* 1.4.1: 마우스가 그 줄(또는 알약)에 있는 동안, 그리고 벗어난 뒤 0.5초 동안 켜 둔다.
:hover 만 쓰면 틈을 지날 때 끊기므로 app.js 가 이 표를 붙였다 뗐다 한다. */
.row.acts-on .msgacts{opacity:1;pointer-events:auto}
/* ============================================================ 1.2.3 */
/* 목록 배지에 @ — 나를 부른 글·내 글에 단 답장이 안 읽은 채 있을 때 */
.badge.at{padding:0 5px;letter-spacing:.02em}
/* ============================================================ 1.2.4 */
/* PC 크게 보기: 원본이 뜰 때까지 작은 안내 (미리보기 단계 없앰) */
.lbwait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ddd;font-size:13px;background:rgba(0,0,0,.45);padding:6px 12px;border-radius:99px;pointer-events:none}
/* ============================================================ 1.2.6 */
/* 대화 목록 가독성 (대표 지시)
※ 1.6.2 에서 카카오워크에 맞춰 다시 키웠다 — 아이콘 48px · 제목 15px · 첫 줄 13.5px.
(1.2.6 때 값은 30 / 13 / 11 이었는데, 이 자리가 맨 뒤라 위쪽 새 값을 덮어쓰고 있었다) */
.room .avatar{width:48px;height:48px;border-radius:16px}
.room .avatar.bot{border-radius:50%}
.room .rt b{font-size:15px;font-weight:600;color:#101316}
.room.has-unread .rt b{font-weight:800}
.room .rt small{font-size:13.5px;color:#8a9199}
html.fs-small .room .rt b{font-size:13.5px}
html.fs-small .room .rt small{font-size:12px}
@media (prefers-color-scheme: dark){
.room .rt b{color:var(--ink)}
.room .rt small{color:#8b939b}
}
/* 말풍선 — 글씨 13.5px(작게 12px), 여백을 글씨에 맞게 (9/13 → 7/11) */
.bub{font-size:14.5px;padding:9px 13px;line-height:1.55;border-radius:4px 14px 14px 14px}
.row.me .bub{border-radius:14px 4px 14px 14px}
html.fs-small .bub{font-size:13px}
html.fs-large .bub{font-size:16.5px}
.bub.photo,.bub.shots{padding:0}
/* 파일 말풍선 — 카카오워크식 카드 (이름 / 용량 / 저장 · 다른 이름으로 저장 + 받기 단추) */
.bub.filebub,.row.me .bub.filebub{
padding:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden
}
.fcard{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;padding:11px 12px;min-width:210px}
.fcard .fleft{min-width:0}
.fcard .fname{font-size:13px;font-weight:600;color:var(--ink);word-break:break-all;line-height:1.35}
.fcard .fsize{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.fcard .facts{margin-top:7px;font-size:11.5px;line-height:1}
.fcard .facts button{
border:0;background:transparent;padding:0;font-family:inherit;font-size:11.5px;
color:var(--accent-ink);cursor:pointer
}
.fcard .facts button:hover{text-decoration:underline}
.fcard .facts i{color:var(--line-strong);font-style:normal;margin:0 6px}
/* 1.4.4: 오른쪽은 내려받기 단추가 아니라 **파일 종류 아이콘** (카카오톡과 같게).
[저장]·[열기] 는 왼쪽 아래 줄에 있으므로 단추가 겹치지 않는다. */
.fcard .ficon{width:34px;height:41px;flex:none;display:block}
.fcard .facts button{white-space:nowrap}
@media (prefers-color-scheme: dark){
/* 어두운 화면에서도 종이는 흰 종이로 둔다 — 윈도우 아이콘이 그렇게 보인다 */
.fcard .ficon{filter:brightness(.92)}
}
/* ============================================================ 1.2.10 */
/* 답장 미리보기 — 사진·동영상은 작은 그림 조각과 함께 */
.quote{display:flex;gap:8px;align-items:center}
.quote .qtx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quote .qthumb{width:32px;height:32px;border-radius:6px;object-fit:cover;flex:none;background:var(--surface-2)}
/* ============================================================ 1.2.11 */
/* 답장을 말풍선 안으로 — 카카오톡과 같은 모양 (대표 지시)
말풍선 안: 옅은 상자 + 「○○에게 답장」 / 내용 두 줄. 사진·파일 답장은 예전처럼 말풍선 위에. */
.bub.hasquote{padding-top:6px}
.bub > .quote{
display:flex;gap:8px;align-items:center;border-left:0;border-radius:8px;
background:rgba(0,0,0,.055);padding:6px 8px;margin:0 0 6px;cursor:pointer;
max-width:100%;min-width:0;white-space:normal;overflow:hidden
}
.row.me .bub > .quote{background:rgba(255,255,255,.62)}
.row.frombot .bub > .quote{background:rgba(0,0,0,.05)}
/* 인용 글이 길어도 말풍선을 넓히지 않는다 — 260px 에서 … 로 자른다 (카카오톡과 같게) */
.quote .qtx{min-width:0;display:block;overflow:hidden;max-width:260px}
.quote .qwho{display:block;color:var(--ink);font-weight:700;font-size:12px;line-height:1.3;margin-bottom:1px}
.quote .qbody{display:block;color:var(--muted);font-size:12px;line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quote .qthumb{width:34px;height:34px;border-radius:6px}
html.fs-small .quote .qwho,html.fs-small .quote .qbody{font-size:11.5px}
@media (prefers-color-scheme: dark){
.bub > .quote{background:rgba(255,255,255,.09)}
.row.me .bub > .quote{background:rgba(0,0,0,.22)}
}
/* ============================================================ 1.2.13 */
/* 보내기 전 대기줄 — 붙여넣기·첨부한 사진·파일이 입력칸 위에 서 있다가 [보내기] 때 함께 올라간다 */
.pendbox{
display:flex;gap:8px;align-items:center;overflow-x:auto;padding:8px 12px;
background:var(--surface-2);border-top:1px solid var(--line)
}
.pendbox::-webkit-scrollbar{height:6px}
.pendbox .pitem{
display:flex;align-items:center;gap:8px;flex:none;background:var(--surface);
border:1px solid var(--line-strong);border-radius:10px;padding:5px 8px;max-width:240px
}
.pendbox .pitem img{width:38px;height:38px;object-fit:cover;border-radius:6px;flex:none}
.pendbox .pfi{
width:38px;height:38px;border-radius:6px;background:var(--ground);display:grid;place-items:center;
color:var(--muted);font-size:16px;flex:none
}
.pendbox .ptx{min-width:0}
.pendbox .ptx b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.pendbox .ptx small{font-size:11px;color:var(--muted)}
.pendbox .px{border:0;background:transparent;color:var(--muted);font-size:13px;cursor:pointer;padding:2px 5px;border-radius:6px;font-family:inherit}
.pendbox .px:hover{background:var(--accent-soft);color:var(--ink)}
.pendbox .pclear{flex:none;border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;font-family:inherit;text-decoration:underline}
/* 검색 갈래 탭 일곱 개(전체·대화방·멤버·사진·파일·할 일·프로젝트)가 한 화면에 다 보이게 —
옆으로 밀어야 보이던 것을 줄바꿈으로 바꾸고 글자·여백을 조금 줄였다 (대표 지시) */
.srtabs{flex-wrap:wrap;overflow-x:visible;gap:4px}
.srtab{padding:5px 10px;font-size:12px}
/* 날짜 단추(전체·오늘·1주일·1개월·날짜 고르기)도 잘리지 않게 같이 줄바꿈 */
.srdates{flex-wrap:wrap;overflow-x:visible;gap:4px}
/* 검색 결과의 대화방 줄은 대화 목록과 같은 넓은 줄 */
#roomList .searchres + .room{border-top:1px solid var(--line)}
/* 대화 목록 줄 높이를 모두 같게 (대표 지적 — "행 높이가 뒤죽박죽").
원인은 마지막 대화가 한 줄일 때도 두 줄일 때도 있어서였다. 카카오워크처럼 **무조건 한 줄**로 자른다. */
.room .rt small{
display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
-webkit-line-clamp:none;-webkit-box-orient:horizontal;word-break:normal
}
/* 줄 높이를 글자에 맡기면 방 이름 옆 인원수(작은 글씨) 때문에 1px 씩 어긋난다 → 픽셀로 못 박는다 */
.room .rt b{line-height:18px}
.room .rt small{line-height:16px}
.room{min-height:60px}
html.fs-small .room .rt b{line-height:17px}
html.fs-small .room .rt small{line-height:15px}
html.fs-small .room{min-height:58px}
/* 오른쪽 칸(시각·배지·고정핀)이 줄 높이를 밀어 올리던 것도 정리 — 배지와 고정핀을 같은 줄에 둔다 */
.room .rr{display:grid;grid-template-columns:auto auto auto;justify-content:end;align-content:start;gap:2px 5px}
.room .rr .badge{margin-top:0}
.room .rr time{grid-column:1 / span 3;text-align:right;line-height:15px}
.room .rr .pinmark{grid-column:1;grid-row:2;margin-top:3px}
.room .rr .draftdot{grid-column:2;grid-row:2}
.room .rr .badge{grid-column:3;grid-row:2}
/* ============================================================ 1.2.14 */
/* @멘션을 파란색으로 (대표 선택: 옅은 파란 칸 + 진한 파란 글씨) */
.mention{color:#1257c9;background:#e8f0ff;border-radius:4px;padding:0 3px;font-weight:700}
.row.me .mention{color:#0b3f96;background:#ffffff}
@media (prefers-color-scheme: dark){
.mention{color:#8fb6ff;background:rgba(80,130,235,.20)}
.row.me .mention{color:#cfe0ff;background:rgba(0,0,0,.25)}
}
/* ============================================================ 1.4.3 */
/* 대화 속 주소 — 눌러서 새 탭으로 열린다.
긴 주소가 말풍선 밖으로 삐져나오지 않게 아무 데서나 줄바꿈한다. */
#msgs .lnk{color:#1257c9;text-decoration:underline;word-break:break-all;overflow-wrap:anywhere}
#msgs .row.me .lnk{color:#0b3f96}
@media (prefers-color-scheme: dark){
#msgs .lnk{color:#8fb6ff}
#msgs .row.me .lnk{color:#cfe0ff}
}
/* 대화 목록 줄 간격 12 → 14px (대표 지시) */
.room{padding-top:15px;padding-bottom:15px;min-height:78px}
html.fs-small .room{min-height:64px}
/* 폰에서 [글자 골라 복사] 를 누른 말풍선만 글자를 고를 수 있다 */
/* ============================================================ 1.2.15 */
/* 마우스를 올리면 말풍선 아래에 뜨는 알약 줄 — ↩ 답장 + 이모지 8개 + ⋯ (카카오워크와 같게).
띄워서 그리므로 글이 밀리지 않는다. */
.bub-wrap{position:relative}
.bubline{position:relative} /* 1.4.1: 알약이 말풍선 바로 위에 붙게 하는 기준점 */
/* 1.4.2: 알약을 다시 **말풍선 아래**로 되돌렸다.
1.4.1 에서 내가 위로 올렸는데, 대표가 주신 카카오워크 PC 녹화를 다시 확인하니
**카카오워크는 PC 에서 말풍선 아래**에 붙는다 (내가 1.2.15 를 만들 때 본 바로 그 화면이다).
자리를 되돌려도 「누르려 하면 사라지던 것」은 그대로 막혀 있다 — 진짜 고침은 자리가 아니라
아래 세 가지이고, 위든 아래든 똑같이 듣는다:
① 투명 다리(.msgacts::after) ② 벗어나도 0.5초 유지(.row.acts-on) ③ 좌표로 줄 찾기(app.js) */
.msgacts{
position:absolute;top:100%;left:0;margin-top:4px;z-index:6;
display:flex;gap:1px;align-items:center;background:var(--surface);
border:1px solid var(--line);border-radius:99px;padding:2px 5px;
box-shadow:0 6px 18px -10px rgba(0,0,0,.45);white-space:nowrap;
opacity:0;pointer-events:none;transition:opacity .12s
}
/* 눈에 안 보이는 다리 — 말풍선과 알약 사이 4px 틈을 덮어 hover 가 안 끊기게 한다.
알약이 아래로 내려왔으니 다리도 **위쪽**에 깐다. */
.msgacts::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:8px}
/* 1.4.3: 여기 있던 `html:not(.touched) .row:hover .msgacts` 를 뺐다.
1.4.1 에서 좌표로 따지는 `.acts-on` 을 넣으면서 브라우저의 :hover 판단을 안 지운 것이 잘못이었다.
마우스가 가만히 있어도 **내용이 움직이면**(새 글로 화면이 내려가거나, 좁은 창에서 줄바꿈으로
높이가 바뀌면) :hover 는 옛 줄에 남고 좌표 추적은 새 줄을 잡아 **알약이 두 개** 떴다.
마우스가 창 밖(제목 표시줄)인데도 하나가 안 꺼지던 것도 같은 뿌리다.
이제 켜는 길은 `.row.acts-on` 하나뿐이라 알약은 언제나 한 개, 항상 진짜 마우스 자리를 따른다. */
.row.me .msgacts{left:auto;right:0}
.msgacts button{
border:0;background:transparent;cursor:pointer;padding:0;font-family:inherit;
width:28px;height:26px;border-radius:99px;display:grid;place-items:center;line-height:1
}
.msgacts .he{font-size:16px}
.msgacts .ha{font-size:14px;color:var(--muted)}
.msgacts button:hover{background:var(--surface-2);text-decoration:none}
.msgacts .he.on{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.msgacts .more{border-left:1px solid var(--line);border-radius:0 99px 99px 0;margin-left:2px}
/* 오른쪽 클릭 메뉴 (PC) */
.reactbar.pcmenu{min-width:180px}
/* 폰 — 꾹 누르면: 화면을 어둡게, 누른 말풍선만 밝게, 이모지 알약, 아래에서 올라오는 메뉴 */
.msgdim{position:fixed;inset:0;background:rgba(10,16,22,.55);z-index:70}
.msgghost{position:fixed;z-index:72;pointer-events:none}
.msgghost .bub{box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.ms-emo{
position:fixed;z-index:73;display:flex;gap:2px;align-items:center;background:var(--surface);
border-radius:99px;padding:5px 8px;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none
}
.ms-emo::-webkit-scrollbar{display:none}
.msgsheet{
position:fixed;left:0;right:0;bottom:0;z-index:74;background:var(--surface);
border-radius:16px 16px 0 0;box-shadow:0 -10px 30px -12px rgba(0,0,0,.45);
padding:6px 0 calc(8px + env(safe-area-inset-bottom));max-height:60vh;overflow-y:auto
}
.msgsheet .ms-menu{display:flex;flex-direction:column}
.msgsheet .rbitem{padding:14px 20px;font-size:15px;gap:14px}
.msgsheet .rbitem .ic{font-size:16px;width:22px}
body.menuopen{overflow:hidden}
/* 꾹 누른 말풍선은 덮개 위에 사본으로 올리고, 원래 자리의 것은 잠깐 감춘다 */
.row.menusrc .bub{visibility:hidden}
/* ============================================================ 1.2.16 */
/* 쓰다 만 글이 있는 방 — 카카오톡처럼 오른쪽에 회색 말풍선 ⋯ 하나만 (마지막 대화는 그대로 둔다) */
.draftdot{
display:inline-grid;place-items:center;min-width:22px;height:15px;padding:0 4px;
border-radius:8px 8px 8px 2px;background:var(--line);color:var(--muted);
font-size:11px;line-height:1;letter-spacing:1px;font-weight:700
}
@media (prefers-color-scheme: dark){ .draftdot{background:#2a3038;color:#9aa3ac} }
/* ============================================================ 1.3.0 */
/* ① 시각을 말풍선 옆으로 (카카오워크식)
받은 글 = 말풍선 오른쪽, 내 글 = 왼쪽(.row.me .bubline 이 row-reverse 라 저절로).
시각과 안 읽은 수는 말풍선 아랫변에 맞춰 세운다. */
.bubline .meta{
flex:none;margin-top:0;margin-bottom:2px;align-self:flex-end;
display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25;white-space:nowrap
}
.row.me .bubline .meta{align-items:flex-end}
.bubline .meta .tm{font-variant-numeric:tabular-nums}
.bubline .meta .unread-btn{padding:0}
/* 시각 자리(약 46px)만큼 말풍선이 좁아진다 */
.bub-wrap{max-width:min(640px,82%)}
.bubline{max-width:100%}
.bubline > .bub{min-width:0;flex:0 1 auto}
/* 아직 안 보내진 글은 [다시 보내기] 단추가 들어 있어 가로로 눕힌다 */
.row.pending .bubline .meta,.row.failed .bubline .meta{flex-direction:row;align-items:center;gap:6px;white-space:normal}
/* 사진·동영상·파일은 시각이 ⬆ 단추 바깥쪽에 오게 */
.bubline .sharebtn{order:1}
.bubline .meta{order:2}
.row.me .bubline .sharebtn{order:1}
/* 「1분 46초 동안 작업」 — 답 위에 붙는 회색 한 줄 */
.worktime{
display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;
margin:0 0 8px;padding:0
}
.worktime::after{content:"›";font-weight:700;opacity:.7}
/* ③ 연차 — 얼굴은 회색으로 죽이고 오른쪽 아래에 작은 「연」 (대표가 고른 C안) */
.avatar.onleave{position:relative;overflow:visible}
.avatar.onleave.pic{filter:grayscale(1);opacity:.55}
.lvdot{
position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;
background:#7e858c;color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;
border:2px solid var(--surface);letter-spacing:-.05em;pointer-events:none
}
.room .avatar.onleave .lvdot{width:19px;height:19px;font-size:11px}
.avatar.big .lvdot{width:26px;height:26px;font-size:14px;right:-4px;bottom:-4px}
/* 사람을 고르는 자리(참여자·@멘션·검색[멤버])에서는 이름 옆에 날짜까지 */
.lvtag{
margin-left:6px;font-size:11.5px;font-weight:700;color:#6b7278;background:#eceef0;
border-radius:6px;padding:1px 7px;letter-spacing:-.02em;vertical-align:1px;white-space:nowrap
}
@media (prefers-color-scheme: dark){
.lvdot{background:#5c646c;border-color:var(--surface)}
.lvtag{background:#2a3038;color:#9aa3ac}
}
/* 30일이 지나 지워진 파일 */
.filecard.gone{opacity:.75}
.filecard.gone .fi{background:var(--line);color:var(--muted)}
.gonenote{color:var(--muted);font-size:12px}
/* ============================================================ 1.3.2 → 1.4.1 에서 되돌림 */
/* [보내기] 단추 자리에 「Enter」·「Ctrl + Enter」 라고 적는다 (대표 지시).
1.3.2 에서는 **글자만 바꾸라고 하셨는데 단추 티(파란 바탕·테두리)까지 벗겨** 회색 글자로
만들었다 — 대표 지적으로 되돌린다. 모양은 원래 [보내기] 단추 그대로 두고 **글자만** 바꾼다.
글자가 「Ctrl + Enter」 로 길어지므로 줄바꿈만 막고 좌우 여백을 조금 줄인다. */
.composer .send.primary{white-space:nowrap;padding-left:12px;padding-right:12px}
@media (max-width: 520px){
.composer .send.primary{padding-left:10px;padding-right:10px}
}
/* ============================================================ 1.4.0 — 연차 */
.lvsum{
background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
padding:10px 12px;margin-bottom:10px
}
.lvsum b{display:block;font-size:15px}
.lvsum small{color:var(--muted);font-size:12px}
.lvchips{margin:2px 0 10px}
.lvrow{
display:flex;align-items:center;gap:10px;justify-content:space-between;
padding:9px 2px;border-bottom:1px solid var(--line)
}
.lvrow b{display:block;font-size:13.5px}
.lvrow small{display:block;color:var(--muted);font-size:12px}
.lvrow .btn{padding:5px 10px;font-size:12.5px}
.lvstat .utbl{width:100%}
.lvstat .utbl td.num,.lvstat .utbl th{text-align:right}
.lvstat .utbl td:first-child,.lvstat .utbl th:first-child,
.lvstat .utbl td:nth-child(2),.lvstat .utbl th:nth-child(2){text-align:left}
.lvstat .lvline{cursor:pointer}
.lvstat .lvline:hover{background:var(--surface-2)}
.lvstat .num.warn{color:var(--crit);font-weight:800}
.lvstat tr.sum td{border-top:2px solid var(--line-strong);font-weight:800}
/* ============================================================ 1.4.1 */
/* 검색 결과 — 한 번 눌러 본 줄은 회색으로 남는다 (여러 개를 차례로 열어 볼 때 어디까지 봤는지).
[stated] 대표 지시: 넓은 화면에서는 눌러도 목록이 닫히지 않는다. 닫는 것은 ✕ 뿐. */
/* 1.4.3: 「눌러 본 검색 결과는 회색」 표시를 뺐다 (한 번 붙으면 안 풀려 목록이 점점 덮였다) */
/* ============================================================ 1.5.1 */
/* 봇 답을 단체방만 빼고 문서처럼 그린다. 여기서는 **표 모양**과 **폭**을 잡는다.
지금까지 표에 테두리가 아예 없어서 표로 안 보였다 (세션방에서도 그랬다). */
.bub.md table{border-collapse:collapse;margin:.6em 0;font-size:.95em;display:block;
width:max-content;max-width:100%;overflow-x:auto}
.bub.md th,.bub.md td{border:1px solid var(--line-strong);padding:5px 9px;text-align:left;vertical-align:top}
.bub.md th{background:var(--surface-2);font-weight:800;white-space:nowrap}
.bub.md pre{margin:.6em 0;padding:9px 11px;border-radius:8px;background:var(--surface-2);
border:1px solid var(--line);overflow-x:auto}
.bub.md ul,.bub.md ol{margin:.4em 0;padding-left:20px}
.bub.md li{margin:2px 0}
.bub.md > :first-child{margin-top:0}
.bub.md > :last-child{margin-bottom:0}
/* 답이 자리를 다 쓰게 — 세션방에만 있던 규칙을 **1:1·프로젝트방에도** 켠다.
말풍선 폭에 맞춰 줄어들면 표가 찌그러진다. */
.msgs:not(.thread) .row.hasmd:not(.me) .bub-wrap{display:block}
.row.hasmd:not(.me) .bubline{display:block;width:100%}
.row.hasmd:not(.me) .bubline > .bub{width:100%}
/* 1.4.4: 도우미가 없을 때 뜨는 안내 */
.helpguide p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.helpguide p.sm{font-size:12.5px;color:var(--muted)}
/* 1회용 임시 비밀번호 카드 — 한 번만 보이는 자리라 크고 또렷하게 */
.pwcard{
border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;
background:var(--surface-2);display:grid;gap:2px
}
.pwcard small{color:var(--muted);font-size:11.5px;margin-top:6px}
.pwcard small:first-child{margin-top:0}
.pwcard b{font-size:16px;letter-spacing:.02em}
.pwcard .pwval{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:19px;user-select:all}
/* ============================================================ 1.6.2 디자인 */
/* A-8: 구분선을 **얼굴 오른쪽부터** 긋는다 (카카오워크와 같게).
줄 전체를 가로지르면 얼굴 밑까지 선이 지나가 목록이 답답해 보인다. */
.room{position:relative;border-bottom:none}
.room::after{
content:"";position:absolute;left:76px;right:0;bottom:0;height:1px;background:var(--line)
}
.room:last-child::after{display:none}
/* A-2: 대화 / 할 일 / 프로젝트 탭 — 회색 알약 배경을 빼고 고른 탭만 밑줄 */
.side-tabs button{
flex:1;border:none;background:transparent;border-radius:0;border-bottom:2.5px solid transparent;
padding:10px 6px;font-weight:700;font-size:14.5px;color:var(--muted);cursor:pointer;
font-family:inherit
}
.side-tabs button.on{background:transparent;color:var(--brand);border-bottom-color:var(--brand)}
html.fs-large .side-tabs button{font-size:16px}
/* A-1: 맨 위를 **한 줄**로. 「Work better. Together.」 를 감추면 목록이 그만큼 더 보인다
(폰에서 40px — 방 반 줄이 더 들어온다). 로고는 그대로 둔다. */
.brand.lockup{flex-wrap:nowrap}
.brand.lockup .tag{display:none}
.brand.lockup b{font-size:17px;line-height:1.1}
.brand.lockup .lm{height:18px}
.side-top{align-items:center}
html.fs-large .brand.lockup b{font-size:18.5px}
/* ============================================================ 1.6.4 */
/* 이 방 안에서 찾기 (대표 지시 — 카카오톡·카카오워크와 같은 모양).
방 이름 줄 바로 아래에 한 줄로 붙는다. 돋보기를 누르거나 Ctrl+F 로 열린다. */
.findbar{
display:flex;align-items:center;gap:7px;padding:7px 10px 7px 14px;
background:var(--surface);border-bottom:1px solid var(--line);flex:none
}
.findbar input{
flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;
padding:7px 12px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--ink)
}
.findbar input:focus{outline:none;border-color:var(--brand)}
.findbar input::-webkit-search-cancel-button{display:none}
.findcnt{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap;min-width:42px;text-align:right}
.findcnt.none{color:#c62828}
.findbar .icon{font-size:15px;padding:4px 7px}
.findbar .icon[disabled]{opacity:.3;cursor:default}
/* 지금 찾은 글 — 노란 테두리로 계속 켜 둔다 (`.row.found` 는 잠깐 깜빡이고 사라진다) */
.row.findhit .bub{box-shadow:0 0 0 2px #e0c86a;background:#fff8dc;color:#3a3020}
.row.findhit .bub .lnk{color:#0b3f96}
mark.findmk{background:#ffd84d;color:#3a3020;font-weight:700;border-radius:2px;padding:0 1px}
@media (prefers-color-scheme: dark){
.row.findhit .bub{background:#4a4326;color:#f2eddc;box-shadow:0 0 0 2px #b99c3f}
.row.findhit .bub .lnk{color:#cfe0ff}
}
/* ============================================================ 1.6.5 */
/* 대화 목록을 **카카오워크 PC 짜임**으로 (대표 지시 9/13, 동영상을 픽셀로 재서).
.room
.roomtop [프로필 30px] [방 이름]········[시각 / 배지]
small 미리보기 — **줄 왼쪽 끝부터** 폭 전체
전에는 48px 프로필이 두 줄을 덮고 미리보기가 프로필 오른쪽으로 밀려 있어,
줄이 「프로필 중심의 한 덩어리」로 보이고 방 이름이 제목으로 안 읽혔다.
※ 시각·배지는 **세로(시각 위·배지 아래) 그대로** — 대표가 가로로 바꾸지 말라고 못 박았다. */
.room{
display:block;padding:11px 15px 12px;min-height:0;position:relative;
border-bottom:none
}
.room::after{left:15px;right:15px}
.roomtop{display:flex;align-items:flex-start;gap:9px;min-height:34px}
/* 프로필 48 → 30px. 한 줄 6바이트(한글 3자 9px / 영문 6자 7px)가 들어가는 최소 크기다 */
.room .avatar{width:30px;height:30px;border-radius:9px;margin-top:1px;font-size:9px}
.room .avatar.bot{border-radius:50%}
.room .avatar.collage{border-radius:9px}
.room .rt{flex:1;min-width:0;padding-top:4px}
.room .rt b{font-size:15px;line-height:19px}
.room .rt b .cnt{font-size:12.5px}
/* 미리보기 — 이름 칸 밖으로 나와 줄 왼쪽 끝부터. 10.5px (대표 지시) */
.room > small{
display:block;font-size:10.5px;line-height:14px;color:#8a9199;margin-top:5px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:46px
}
@media (prefers-color-scheme: dark){ .room > small{color:#8b939b} }
/* 시각 위 · 배지 아래 (지금 그대로) */
.room .rr{display:grid;grid-template-columns:auto auto auto;justify-content:end;
align-content:start;gap:3px 5px;flex:none;padding-top:1px}
/* 글자 크기 세 단계 — 작게 10.5 / 보통 10.5 / 크게 12.5 (대표 결정).
작게를 10.5 보다 더 줄일 여지가 없어 작게와 보통을 같게 둔다. */
html.fs-small .room > small{font-size:10.5px}
html.fs-large .room > small{font-size:12.5px}
html.fs-small .room{min-height:0}
html.fs-small .room .rt b{font-size:14px;line-height:18px}
html.fs-large .room .rt b{font-size:16.5px;line-height:21px}
/* ============================================================ 1.6.6 */
/* 대화 목록 배지 — 대표 지시 2026-09-14
① 갈래를 나눈다: 나를 @로 부름 `@3` / 내 글에 단 답장 `↩3` / 그냥 안 읽음 `3`
겹치면 @ 가 이긴다 (서버 db.unread_mention_kind 와 같은 규칙)
② 글자 13px · 딱지 17px — 1.8.1 에서 대표가 다시 고른 값
(1.6.6 에서 16/20 으로 키웠더니 너무 컸다)
③ 시각과 배지 사이를 3px → 6px 로 벌린다
**대화 목록에만 건다** — 프로젝트 목록·검색 결과·세션 목록의 배지는 10px 그대로다.
(전체 `.badge` 를 키우면 좁은 자리들이 같이 밀린다)
**배지 자리는 그대로 — 시각 위 · 배지 아래.** 가로로 바꾸지 말 것 (대표가 못 박음) */
.room .rr{gap:6px 5px}
.room .rr .badge{font-size:13px;line-height:17px;min-width:17px;padding:0 5px}
/* 나를 찾는 글이 있는 방은 주황 — 그냥 안 읽음(빨강 --crit)과 한눈에 갈린다 */
.room .rr .badge.at,
.room .rr .badge.re{background:#e8590c;padding:0 6px;letter-spacing:.02em}
/* ↩ 는 글꼴에 따라 조금 커 보인다 — 숫자와 키를 맞춘다 */
.room .rr .badge.re{letter-spacing:0}
@media (prefers-color-scheme: dark){
/* 어두운 화면의 빨강(--crit #e08a78)이 옅어서, 주황도 같은 밝기대로 올린다 */
.room .rr .badge.at,
.room .rr .badge.re{background:#e59a5c;color:#2b1a0d}
}
/* ============================================================ 1.7.0 */
/* 갈래 고르기를 **왼쪽 세로 줄**(PC)·**아래 탭 줄**(폰) 로 옮겼다 — 대표 지시 2026-09-16.
목록 맨 위에 있던 가로 탭 자리에는 「전체 / 안 읽음」 알약이 들어간다.
대시보드는 아직 없지만 **자리를 미리 비워 둔다**(흐리게). */
.app{grid-template-columns:auto var(--side-w) 1fr}
.rail{
width:66px;flex:none;background:var(--brand-deep,#12326e);color:#a9bde0;
display:flex;flex-direction:column;align-items:center;padding:10px 0 8px;min-height:0
}
.rail .rbrand{background:none;border:0;padding:4px;margin-bottom:6px;cursor:pointer;line-height:0}
/* 1.7.3: 로고는 **가로형(108×64)** 이다. width·height 를 둘 다 30px 로 박아 두었더니
정사각으로 눌려 KP 글자가 세로로 늘어났다 (대표가 짚으심). 다른 자리(.lockup .lm)와 같게
높이만 주고 너비는 그림이 정하게 둔다. */
/* 1.7.4: **딱지는 정사각, 로고는 그 안에 맞춰** 넣는다 (대표 지시).
1.7.3 에서 비율만 살리려다 딱지까지 가로로 길어져 아래 아이콘들과 줄이 안 맞았다.
object-fit:contain 이 로고를 딱지 안에 비율 그대로 앉힌다. */
.rail .rbrand img{
width:34px;height:34px;object-fit:contain;border-radius:10px;
background:#fff;padding:6px;display:block
}
.rail .rit{
position:relative;width:54px;padding:8px 0 6px;margin-bottom:2px;border:0;border-radius:10px;
background:none;color:inherit;cursor:pointer;display:block;text-align:center
}
.rail .rit:hover{background:rgba(255,255,255,.08)}
.rail .rit.on{background:#2a4b8d;color:#fff}
.rail .rit svg{display:block;margin:0 auto 3px;width:22px;height:22px;
stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rail .rit b{font-size:10.5px;font-weight:700;letter-spacing:-.03em}
.rail .rit.mini{padding:7px 0}
.rail .rit.mini svg{width:20px;height:20px;margin-bottom:0}
.rail .rsp{flex:1}
.rail .rcnt{
position:absolute;top:1px;right:2px;min-width:16px;padding:0 4px;border-radius:99px;
background:#e8453c;color:#fff;font-size:10px;line-height:16px;font-weight:800;
box-shadow:0 0 0 2px var(--brand-deep,#12326e)
}
.rail .rit.on .rcnt{box-shadow:0 0 0 2px #2a4b8d}
.rail .rme{
width:30px;height:30px;border-radius:99px;border:0;margin-top:8px;cursor:pointer;
background:#dfe6f2;color:#12326e;font-size:9.5px;font-weight:800;display:grid;place-items:center;
white-space:nowrap;letter-spacing:-.05em;overflow:hidden
}
/* 목록 머리 — 갈래 이름 (가로 탭은 이제 안 쓴다) */
.side-tabs{display:none}
.side-top .brand.lockup{display:none}
.sidetitle{font-size:19px;font-weight:800;letter-spacing:-.04em;margin-right:auto;padding-left:2px}
/* 전체 / 안 읽음 */
.pills{display:flex;gap:7px;padding:9px 14px 10px;border-bottom:1px solid var(--line)}
.pills .pill{
font-size:12.5px;font-weight:700;border:1px solid var(--line-strong,#d8dde3);border-radius:99px;
padding:5px 14px;color:var(--ink);background:var(--surface);cursor:pointer
}
.pills .pill.on{background:#16202b;border-color:#16202b;color:#fff;font-weight:800}
.pills .pill .pdot{
display:inline-block;width:11px;height:11px;border-radius:99px;background:#e8453c;
margin-right:5px;vertical-align:-1px
}
.pills .pill.on .pdot{background:#ff7a6f}
.emptyline{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:20px}
/* 폰 아래 탭 줄 — PC 에서는 없다 */
.tabbar{display:none}
@media (max-width:760px){
.app{grid-template-columns:1fr}
.rail{display:none}
.side-top .brand.lockup{display:none}
/* 아래 탭 줄이 가리지 않게 목록·본문 바닥을 띄운다 */
.tabbar{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
background:var(--surface);border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom,0px)
}
.tabbar .tit{
position:relative;flex:1;border:0;background:none;color:var(--muted);
padding:7px 0 6px;cursor:pointer
}
.tabbar .tit svg{display:block;margin:0 auto 2px;width:21px;height:21px;
stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar .tit b{font-size:10.5px;font-weight:700}
.tabbar .tit.on{color:var(--brand-deep,#12326e)}
.tabbar .tcnt{
position:absolute;top:2px;left:50%;margin-left:6px;min-width:15px;padding:0 4px;border-radius:99px;
background:#e8453c;color:#fff;font-size:9.5px;line-height:15px;font-weight:800
}
/* 방을 연 상태(showchat)에서는 아래 줄을 숨긴다 — 입력칸과 겹치면 안 된다 */
.app.showchat .tabbar{display:none}
.roomlist,.projlist,.boxlist{padding-bottom:58px}
}
/* ---------------- 1.7.0: 세션방 고르개 · 일 맡기기 ---------------- */
/* 일 맡기기 진행 카드 */
/* 진행 카드 안의 단계 글 — 를 칸 나누기로만 쓴다(기울임 아님) */
/* 봇·단계 고르개 줄 */
.pickrow .lr{flex:1;min-width:0}
.pickrow .lr b{display:block;font-size:13.5px;letter-spacing:-.02em}
.pickrow .lr small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
/* ＋ 안의 도구·회사 스킬 고르기 */
.toolpick{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
/* 1.7.0: 세션방 고르개 줄 — 제목 줄 **아래** 제 줄로 뺐다.
(제목 줄 안에 두었더니 폰에서 방 이름이 밀려 세로로 접혔다) */
/* ---------------- 1.7.2: 세로 줄 아래 · 아래 칸 정리 ---------------- */
/* PC 는 세로 줄에 [로그아웃] 과 [내 얼굴] 이 있으므로 아래 칸을 접는다.
폰은 세로 줄이 없으니 예전 그대로 둔다 — 안 그러면 로그아웃 길이 사라진다. */
@media (min-width:761px){
.side-foot{display:none}
}
/* 세로 줄 내 얼굴 — 아래 칸의 「대표」 딱지와 **같은 모양**으로 (둥근 네모 · 같은 색) */
.rail .rme.avatar{
width:34px;height:34px;border-radius:11px;margin-top:8px;border:0;cursor:pointer;
font-size:11.5px;line-height:1.05;white-space:pre-line;letter-spacing:-.03em;
display:grid;place-items:center;overflow:hidden;padding:0
}
.rail .rme.avatar:hover{outline:2px solid rgba(255,255,255,.35);outline-offset:1px}
/* ---------------- 1.7.3: 고르개·＋ 를 초안 모양으로 ---------------- */
/* 고른 줄이 파랗게 드러나고, 오른쪽 끝에 모델 이름·상태가 붙는다 */
.pickrow.ai{
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
border:1px solid transparent;cursor:pointer;margin:0 -2px
}
.pickrow.ai:hover{background:var(--ground)}
.pickrow.ai.on{background:var(--ai-soft);border-color:var(--ai)}
.pickrow.ai input{width:17px;height:17px;accent-color:var(--ai);flex:none}
.pickrow.ai b{font-size:13.5px;font-weight:800;letter-spacing:-.02em;flex:none}
.pickrow.ai .rt{
margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);text-align:right;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0
}
.pickrow.ai .rt.bad{color:#c0392b;font-weight:700}
.pickrow.ai.on .rt{color:var(--ai);font-weight:700}
/* 묶음 제목의 부제 — 「도구 — 봇이 알려 준 것」 */
.sec em{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;opacity:.75}
/* ＋ 안의 도구·회사 스킬 — 세로 목록 + 네모 아이콘 (초안 그대로) */
.toolpick{display:flex;flex-direction:column;gap:2px;margin:2px -2px 0;flex-wrap:nowrap}
.trow{
display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:10px;
border:1px solid transparent;background:none;cursor:pointer;font-family:inherit;text-align:left
}
.trow:hover{background:var(--ground)}
.trow.on{background:var(--ai-soft);border-color:var(--ai)}
.trow .tico{
flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
font-style:normal;font-size:10.5px;font-weight:800;color:#fff;letter-spacing:-.05em
}
.trow .tnm{font-size:13px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .trt{margin-left:auto;font-size:11.5px;font-weight:700;color:transparent;flex:none}
.trow.on .trt{color:var(--ai)}
.trow.off{cursor:default;opacity:.55}
.trow.off:hover{background:none}
.trow.off .tico{background:var(--line-strong)!important}
.trow.off .trt{color:var(--muted);font-weight:600}
/* ---------------- 1.7.4: 작은 차림표 · 세션 딱지 ---------------- */
/* PC — 누른 단추에 붙는다. 뒤를 덮지 않는다 */
.popover{
position:fixed;z-index:9000;background:var(--surface);border:1px solid var(--line);
border-radius:13px;box-shadow:0 14px 42px rgba(12,20,40,.18);padding:6px;
min-width:280px;max-width:360px;max-height:min(70vh,560px);overflow:auto;
animation:popIn .12s ease-out
}
@keyframes popIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.popover.up{animation:popUp .12s ease-out}
@keyframes popUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* 폰 — 아래에서 올라오는 창 (좁은 화면에서 드롭다운은 잘리고 자판에 가린다) */
.popscrim{position:fixed;inset:0;background:rgba(10,16,30,.3);z-index:8990}
.popsheet{
position:fixed;left:0;right:0;bottom:0;z-index:9000;background:var(--surface);
border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.28);
padding:8px 12px calc(22px + env(safe-area-inset-bottom));
max-height:78vh;overflow:auto;animation:popSheet .18s ease-out
}
@keyframes popSheet{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
.popsheet .grab{display:block;width:38px;height:4px;border-radius:99px;background:var(--line-strong);margin:4px auto 10px}
.popbody .sec:first-child{margin-top:4px}
.popbody .sep{height:1px;background:var(--line);margin:8px 2px}
.popbody .hint{padding:2px 4px 6px}
/* ＋ 안의 사진·파일 줄 — 도구 줄과 같은 모양으로 (그림 딱지만 다르다) */
.trow .tico.ico{background:var(--ground);color:var(--muted);border:1px solid var(--line)}
.trow .tico.ico svg{width:15px;height:15px}
/* 세션 목록 앞 딱지 — 이 대화가 Chat 이었나 Work 였나 */
/* ============================================================ 1.8.1 */
/* 대표 결정 ㉯ — 「고르는 곳」 한 줄에 **부제**를 달았다. 방 메뉴·설정이 이 모양을 쓴다.
CSS 는 뒤에 쓴 것이 이기므로, 1.7.4 의 .trow 규칙을 여기서 덧칠한다. */
.trow .tnm{display:block;flex:1;min-width:0;white-space:normal}
.trow .tnm b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.trow .tnm small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);
letter-spacing:0;line-height:1.35;margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .tnm small:empty{display:none}
.trow .trt{color:var(--muted);font-weight:600}
.trow.on{background:var(--accent-soft);border-color:var(--accent)}
.trow.on .tnm b{color:var(--accent);font-weight:800}
.trow.on .trt{color:var(--accent)}
.trow.danger .tico{border-color:#e3bdb5;color:var(--crit)}
.trow.danger .tnm b{color:var(--crit)}
.trow.danger:hover{background:#fbf1ef}
@media (prefers-color-scheme: dark){
.trow.danger .tico{border-color:#6a3a30}
.trow.danger:hover{background:#2a1c18}
}
/* 차림표 안에 그대로 들어가는 것들 (글자 크기 고르개 · 판 번호) */
.popbody .fsrow{padding:6px 12px 2px}
.popbody .vertag-line{padding:6px 12px 2px;margin:0}
/* ============================================================ 1.8.2 */
/* ① 어두운 화면에서 **봇 말풍선 글씨가 안 보이던 것** — 대표 제보 2026-09-19.
--bot-bub / --bot-line 두 색만 어두운 화면 몫이 없어서, 말풍선은 거의 흰색인데
글자는 밝은 색(--ink)이 되어 흰 바탕에 흰 글씨였다.
대표가 고른 값: 바탕 #2b2a1d · 테두리 #3e3a27 (어두운 올리브 — 「봇 글은 노란 계열」은 유지). */
@media (prefers-color-scheme: dark){
:root{--bot-bub:#2b2a1d;--bot-line:#3e3a27}
/* ② 어두운 화면에서 바탕만 밝게 남아 눈부시던 것 셋 (깨지진 않았지만 함께 고침) */
.duereq{background:#2a2418;border-color:#4a4029;color:#e4d6ae}
.chipn.req{background:#4a3c12;color:#f0dfa0}
.chipn.post{background:#4a2f12;color:#f2c99a}
.mention{color:#9dc0f5;background:#1e2c44}
.row.me .mention{color:#bcd4f8;background:#24344e}
.row.findhit .bub{box-shadow:0 0 0 2px #7a6a2e;background:#2f2a16;color:#ece3c4}
}
/* ============================================================ 1.8.3 */
/* 13번 — 프로젝트 줄에 「할 일 N · 임박 M」 한 줄.
.pj 는 2칸 격자라 새 줄도 왼쪽 칸(1/2)에 붙여 준다. */
.pjtask{grid-column:1/2;display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.pjtask .pt{
background:var(--surface-2);border:1px solid var(--line);border-radius:99px;
padding:1px 7px;font-size:11px;font-weight:600;color:var(--muted);line-height:1.5
}
.pjtask .pt.soon{background:#fff1b8;border-color:#e6d48a;color:#7a5a00;font-weight:700}
.pjtask .pt.over{background:#fde3dd;border-color:#eebdb3;color:#9a2f1c;font-weight:700}
.pj.done .pjtask{opacity:.55}
/* 11번 — 설정 줄 오른쪽 값이 길어도 이름을 밀지 않게 */
.trow .trt{margin-left:8px;white-space:nowrap}
@media (prefers-color-scheme: dark){
.pjtask .pt.soon{background:#4a3c12;border-color:#5d4c1a;color:#f0dfa0}
.pjtask .pt.over{background:#4a231a;border-color:#6a3a30;color:#f3b5a6}
}
/* 8번 — 사진 묶음 마지막 칸의 「+N」 */
.bub.shots .cell.more .morep{
position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.52);color:#fff;font-size:17px;font-weight:800;letter-spacing:-.02em
}
/* 8번 — 올리는 중 한 줄 */
.upbar{
display:flex;align-items:center;gap:8px;padding:7px 14px;
border-top:1px solid var(--line);background:var(--surface-2)
}
.upbar .uptxt{font-size:12px;font-weight:700;color:var(--ink);flex:none}
.upbar .uptxt.ok{color:var(--accent)}
.upbar .uptxt.bad{color:var(--crit)}
.upbar .upline{flex:1;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.upbar .upline i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;
transition:width .18s linear}
.upbar .btn{flex:none;padding:3px 10px;font-size:12px}
/* 9번 — 「여기부터 안 읽은 메시지」 눈금 */
.unreadsep{
display:flex;align-items:center;gap:8px;margin:10px 0 4px;
font-size:11.5px;font-weight:700;color:var(--crit);letter-spacing:-.01em
}
.unreadsep::before,.unreadsep::after{content:"";flex:1;height:1px;background:var(--crit);opacity:.45}
.unreadsep span{flex:none}
.msgs.thread .unreadsep{margin:8px 0 2px}
/* 9번 — 「↓ 새 메시지 N개」 */
.newcount{
position:absolute;left:50%;bottom:76px;transform:translateX(-50%);
border:0;border-radius:99px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;
background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px -8px rgba(0,0,0,.6);z-index:3
}
/* ============================================================ 1.8.4 */
/* 대화 목록 고정 핀 자리 — 대표 결정 ㉮ (2026-09-21).
핀이 첫 칸이라 시각 글자 폭(「어제」 24px / 「9월 18일」 50px)에 따라 26px 씩 흔들렸다.
칸 순서를 [배지][⋯][핀] 으로 뒤집어 핀을 늘 오른쪽 끝(시각 끝)에 맞춘다. */
.room .rr .badge{grid-column:1;grid-row:2}
.room .rr .draftdot{grid-column:2;grid-row:2}
.room .rr .pinmark{grid-column:3;grid-row:2;justify-self:end}
/* ============================================================ 1.9.0 — UI 고도화 1단계 (화장)
대표님이 주신 「KP Works UI/UX 디자인 작업지시서 v1.0」 을 코드로 옮긴 것.
고른 값: 본문 15.5px (지시서 15.5~16 중 아래쪽 — 대표 결정), 3단계 크기는 그대로.
CSS 는 뒤에 쓴 것이 이기므로 여기서 앞의 값들을 덧칠한다. */
/* ── 글자 네 단계: 제목 / 본문 / 보조 / 메타 ─────────────────────── */
.bub{font-size:15.5px;line-height:1.6}
html.fs-small .bub{font-size:14px}
html.fs-large .bub{font-size:17.5px}
.room .rt b{font-size:15.5px;line-height:20px}
html.fs-small .room .rt b{font-size:14.5px;line-height:19px}
html.fs-large .room .rt b{font-size:17px;line-height:22px}
.room > small{font-size:13px;line-height:18px}
html.fs-small .room > small{font-size:12px}
html.fs-large .room > small{font-size:14px}
.room .rr time{font-size:12.5px}
.meta{font-size:12.5px}
.pj b{font-size:15px}
.pj .sm{font-size:12.5px;line-height:1.5}
/* ── 색 대비: 중요한 글은 진하게, 회색은 보조에만 ────────────────── */
:root{
--ink:#20252b; /* 지시서 Primary */
--muted:#5f6770; /* 지시서 Secondary — 전 #666c72 보다 진하다 */
--faint:#868d95; /* 정말 보조적인 것(시각·용량)만 */
--ok:#1f7a4d; /* 완료 */
--ok-soft:#e8f5ee;
--warn2:#9a6212; /* 확인 필요 */
--warn2-soft:#fdf3e0;
}
@media (prefers-color-scheme: dark){
:root{
--ink:#e8eaed; --muted:#a8b0b8; --faint:#8b939b;
--ok:#6ec79a; --ok-soft:#14301f;
--warn2:#e0b36a; --warn2-soft:#33270f;
}
}
.room .rr time,.pj .rr time,.meta .tm,.fcard .fsize{color:var(--faint)}
.room.has-unread > small{color:var(--ink)}
/* ── 대화 읽기 폭 — 넓은 모니터에서 한 줄이 지나치게 길어지지 않게 ───
1.10.5 (대표 결정 2026-10-21 · ㉣): 1920 화면에서 **양옆이 237px 씩 비어** 보인다는
제보를 받고 넓혔다. 줄 1080 → 1400, 말풍선 640 → 820.
★ 둘 다 올려야 한다. 줄만 넓히면 **글줄은 그대로고 좌우로 벌어지기만 한다** —
말풍선이 따로 640 으로 묶여 있기 때문이다 (네 가지를 다 그려서 견줘 본 결과).
1920 화면 기준 양옆 여백 237px → 77px.
★ 1100px 미만(폰·좁은 창)은 이 자리가 아예 안 걸리므로 **전과 똑같다.**
스레드(프로젝트)도 이미 100% 라 :not(.thread) 로 비켜 간다. */
@media (min-width:1100px){
.msgs .row{max-width:1400px;margin-left:auto;margin-right:auto;width:100%}
.msgs .daysep{max-width:1400px;margin-left:auto;margin-right:auto}
.msgs:not(.thread) .bub-wrap{max-width:min(820px,82%)}
}
/* ── 여백 — 지시서 「편안하게」 밀도 ──────────────────────────────── */
.room{padding-top:12px;padding-bottom:12px}
.pj{padding:13px 16px}
.roomtop{gap:10px}
.msgs{padding-top:6px}
/* ── 입력창 — 첨부·보내기가 또렷하게 갈리도록 ────────────────────── */
.composer{gap:10px;padding-top:10px;padding-bottom:10px}
.composer #input{font-size:15.5px;line-height:1.55}
html.fs-small .composer #input{font-size:14px}
html.fs-large .composer #input{font-size:17.5px}
.composer .icon{width:40px;height:40px;font-size:20px}
/* ── 1.9.0: 할 일 — 오른쪽 상세 패널 (PC) ─────────────────────────
지시서 ㉮ : 상세를 열어도 왼쪽 목록/칸반이 계속 보여야 한다.
폰에서는 이 패널을 쓰지 않고 전체 화면 큰 창(sheet)으로 뜬다. */
.tasks{position:relative}
.tpanel{
position:absolute;top:0;right:0;bottom:0;width:560px;max-width:52%;
background:var(--surface);border-left:1px solid var(--line);
box-shadow:-10px 0 30px -18px rgba(0,0,0,.45);
display:flex;flex-direction:column;z-index:6
}
.tp-head{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:12px 14px 12px 18px;border-bottom:1px solid var(--line);flex:none
}
.tp-head b{font-size:15px}
.tp-body{flex:1;overflow-y:auto;padding:16px 18px 24px}
@media (max-width:760px){ .tpanel{display:none} }
/* 고른 줄 — .board.list .trow 쪽 특이도가 더 높아서 같은 무게로 맞춘다 */
.board.list .trow.picked,.board .tcard.picked{
background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)
}
/* 상태별 접이식 묶음 */
.tsec{
display:flex;align-items:center;gap:7px;padding:12px 4px 7px;cursor:pointer;
font-size:13.5px;color:var(--muted);user-select:none
}
.tsec b{font-size:14px;color:var(--ink);font-weight:700}
.tsec .ar{width:12px;color:var(--muted)}
.tsec .n{color:var(--faint)}
/* 댓글 */
.cmts{display:flex;flex-direction:column;gap:12px;margin:6px 0 12px}
.cmt{display:flex;gap:9px;align-items:flex-start}
.cmt .ct{min-width:0;flex:1}
.cmt .cw{display:flex;align-items:baseline;gap:7px}
.cmt .cw b{font-size:13.5px}
.cmt .cw time{font-size:12px;color:var(--faint)}
.cmt .cx{font-size:14.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap;margin-top:2px}
.cmtnew{display:flex;gap:8px;margin:4px 0 14px}
.cmtnew input{
flex:1;min-width:0;padding:10px 12px;font-size:14.5px;font-family:inherit;
border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink)
}
.cmtnew .btn{flex:none}
.sec.fold{cursor:pointer;user-select:none}
/* 패널이 열리면 목록이 그만큼 좁아진다 (가려지지 않게) */
.tasks.haspanel .board,
.tasks.haspanel .statustabs,
.tasks.haspanel > .chat-top{margin-right:560px}
@media (max-width:1100px){
.tpanel{width:min(480px,52%)}
.tasks.haspanel .board,
.tasks.haspanel .statustabs,
.tasks.haspanel > .chat-top{margin-right:min(480px,52%)}
}
@media (max-width:760px){
.tasks.haspanel .board,
.tasks.haspanel .statustabs,
.tasks.haspanel > .chat-top{margin-right:0}
}
/* ── 1.9.0: 프로젝트 홈 (개요 / 대화 / 파일 / 할 일 / 결정사항) ───── */
.projtabs{
display:flex;gap:2px;padding:0 14px;background:var(--surface);
border-bottom:1px solid var(--line);flex:none;overflow-x:auto;scrollbar-width:none
}
.projtabs::-webkit-scrollbar{display:none}
.projtabs .ptab{
border:0;background:transparent;padding:11px 14px 9px;font-family:inherit;font-size:14px;
font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap
}
.projtabs .ptab:hover{color:var(--ink)}
.projtabs .ptab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
/* 대화 말고 다른 탭일 때는 대화·입력칸을 감춘다 */
.chat.projview .msgs,
.chat.projview .composer,
.chat.projview .pendbox,
.chat.projview .upbar,
.chat.projview .typing,
.chat.projview .replybar{display:none}
.projhome{flex:1;overflow-y:auto;padding:16px 18px 28px;background:var(--ground)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:12px}
.pcard{
background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px
}
.pgrid .pcard{margin-bottom:0}
.pch{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.pch b{font-size:13.5px;color:var(--muted);font-weight:700;letter-spacing:-.01em}
.lnk{
border:0;background:transparent;font-family:inherit;font-size:12.5px;color:var(--accent);
font-weight:700;cursor:pointer;padding:2px 4px
}
.lnk.danger{color:var(--crit)}
.pstate{display:flex;align-items:center;gap:8px}
.pstate b{font-size:16px}
.pstate .dot{width:9px;height:9px;border-radius:99px;background:var(--accent);display:inline-block}
.pstate .dot.done{background:var(--ok)}
.psub{font-size:12.5px;color:var(--faint);margin-top:6px}
.ptext{font-size:14.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap}
.pline{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;font-size:14px}
.pline:hover .tx{text-decoration:underline}
.pline .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.precent .prow{display:flex;gap:9px;padding:7px 0;cursor:pointer;align-items:flex-start}
.precent .pt{min-width:0;flex:1}
.precent .pw{display:flex;align-items:baseline;gap:7px}
.precent .pw b{font-size:13.5px}
.precent .pw time{font-size:12px;color:var(--faint)}
.precent .px{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 결정사항 */
.decnew{display:flex;gap:8px;margin-bottom:10px}
.decnew input{
flex:1;min-width:0;padding:11px 13px;font-size:14.5px;font-family:inherit;
border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--ink)
}
.decnew .btn{flex:none}
.declist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pdec{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.pdecs .pdec{border:0;padding:6px 0;background:transparent}
.pdec .dtx{font-size:14.5px;line-height:1.55;color:var(--ink)}
.pdec .dmeta{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:12.5px;color:var(--faint)}
.projhome .medialist{background:var(--surface);border-radius:12px;padding:6px 12px}
/* ── 1.9.0: Agent 보고 카드 ───────────────────────────────────── */
.bub.report{padding:0;background:transparent;border:0;max-width:min(420px,100%)}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.rcard .rt{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.rcard .rd{font-size:13px;color:var(--muted);margin-top:2px}
.rnums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
.rn{border-radius:10px;padding:9px 8px;text-align:center}
.rn .nl{font-size:12px;font-weight:700}
.rn b{display:block;font-size:19px;letter-spacing:-.03em;margin-top:2px}
.rn .np{font-size:11.5px;opacity:.75;margin-top:1px}
.rn.done{background:var(--ok-soft);color:var(--ok)}
.rn.check{background:var(--warn2-soft);color:var(--warn2)}
.rn.stop{background:#fdecea;color:var(--crit)}
@media (prefers-color-scheme: dark){ .rn.stop{background:#3a1f1a} }
.rcard .rsec{font-size:12.5px;font-weight:700;color:var(--muted);margin:12px 0 5px}
.rcard .rlines .rl{font-size:14px;line-height:1.6;color:var(--ink)}
.rcard .rlog{
border:0;background:transparent;font-family:inherit;font-size:12.5px;color:var(--accent);
font-weight:700;cursor:pointer;padding:8px 0 4px
}
.rcard .rlogbox{
font-family:Consolas,"D2Coding",monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;
background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:9px 10px;
max-height:260px;overflow-y:auto;color:var(--muted)
}
.rcard .rgo{margin-top:10px}
/* ── 1.9.1 ㉰: 연결이 끊긴 동안 보여 주는 띠 ───────────────────── */
.netbar{
position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:90;
display:flex;align-items:center;gap:10px;
background:var(--crit);color:#fff;border-radius:99px;
padding:8px 10px 8px 16px;font-size:13px;font-weight:700;
box-shadow:0 8px 24px -10px rgba(0,0,0,.55);max-width:calc(100vw - 24px)
}
.netbar .btn{
flex:none;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff;
padding:3px 10px;font-size:12.5px
}
.netbar .btn:hover{background:rgba(255,255,255,.28)}
/* ============================================================ 1.9.2 */
/* ㉮ 사진·동영상·파일 글에서 「안 읽은 수·시각」이 ⬆ 단추 바깥으로 밀려나 눈에 안 띄던 것.
대표 제보: "사진만 보낸 경우에는 옆에 공유 버튼 때문에 읽었는지 안 읽었는지가 안 보여".
까닭: 1.3.0 에서 차례를 [말풍선][⬆][수·시각] 으로 두었다. 그래서 글만 쓴 글은 수가
말풍선에서 14px 옆인데, 사진 글은 50px 밖 + 동그라미가 사이를 막았다.
→ 차례를 맞바꾼다. [말풍선][수·시각][⬆] — 글만 쓴 글과 똑같은 자리다 (카카오톡·카카오워크와 같다). */
.bubline .meta{order:1}
.bubline .sharebtn{order:2}
.row.me .bubline .sharebtn{order:2}
/* ㉰ 좁은 폰에서 시각이 화면 밖으로 잘려 나가던 것 (360px 폰: 받은 사진의 시각이 「오전」까지만 보였다).
한 줄에 [말풍선][수·시각][⬆] 세 덩이가 들어가야 하는데 자리가 100px 모자랐다.
① ⬆ 단추가 붙는 줄만 바깥 상자의 82% 제한을 푼다 (app.js 가 .hasshare 를 붙인다).
말풍선 자체는 아래에서 폭을 묶으므로 화면을 꽉 채우지 않는다.
② 폰에서는 사진·묶음·동영상·파일 폭을 화면 폭에 맞춰 줄인다.
162px = 얼굴·여백(50) + 오른쪽 여백(12) + ⬆ 단추와 시각 자리(100) */
@media (max-width:760px){
.bub-wrap.hasshare{max-width:100%}
.bub-wrap.hasshare .bub.photo img.shot{max-width:clamp(140px,calc(100vw - 162px),240px)}
.bub-wrap.hasshare .vidthumb .shot{max-width:clamp(140px,calc(100vw - 162px),240px)}
.bub-wrap.hasshare .bub.shots{width:clamp(140px,calc(100vw - 162px),300px);min-width:0}
.bub-wrap.hasshare .bub.filebub{max-width:clamp(150px,calc(100vw - 162px),320px)}
.bub-wrap.hasshare .fcard{min-width:0}
}
/* ============================================================ 1.9.3 */
/* ⧉ 대화방을 작은 새 창으로 (카카오워크와 같게) — PC 전용.
새 창(/?room=N&pop=1)에서는 왼쪽 목록·세로줄·아래 탭·뒤로 단추를 감추고 그 방만 꽉 차게 그린다.
새 창에서는 ⧉ 단추 자체도 안 보인다 (창을 또 빼는 일이 없게). */
html.popwin .rail,
html.popwin .side,
html.popwin .tabbar,
html.popwin #sideResizer,
html.popwin #empty,
html.popwin #btnBack,
html.popwin #btnPopout{display:none!important}
html.popwin .app{grid-template-columns:1fr!important}
html.popwin .chat-top{padding-left:14px}
/* ============================================================ 1.9.6 */
/* ㉯ 알약 오른쪽 끝의 ✕ 닫기 (대표 요청 2026-10-02).
눈에 띄되 이모지보다 조용하게 — 평소에는 흐리고, 올리면 또렷해진다. */
.msgacts .ha.xclose{
color:var(--faint);font-size:12px;font-weight:700;opacity:.65;
margin-left:2px;border-left:1px solid var(--line);border-radius:0 8px 8px 0;padding-left:8px
}
.msgacts .ha.xclose:hover{opacity:1;color:var(--ink)}
/* ============================================================ 1.10.0 */
/* 처리 카드 — 승인 카드(.card)와 같은 틀을 쓰고, 두 줄(담당·확인)만 더한다. */
.card.wcard .chip.wcref{
background:var(--surface-2);color:var(--muted);font-variant-numeric:tabular-nums;
font-weight:700;letter-spacing:.2px
}
.wcline{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:13px;line-height:1.5}
.wcline .wck{flex:none;width:30px;color:var(--faint);font-size:12px;font-weight:700}
.wcline .wcv{min-width:0;word-break:break-all}
.wcline .wcv.wait{color:var(--muted)}
.wcline .wcv.doing{color:var(--accent-ink);font-weight:700}
.wcline .wcv.ok{color:var(--ink);font-weight:700}
.wcline .wcv.bad{color:#c62828;font-weight:800}
.wcline .wcv.late{color:var(--faint)}
.card.wcard.done{opacity:1}
.card.wcard .card-body h4{margin-bottom:4px}
@media (prefers-color-scheme: dark){
.wcline .wcv.bad{color:#f3a79c}
}
/* 1.10.8: 방 번호 (관리자 화면만) — 헤르메스와 이야기할 때 쓰는 번호. 사람 수보다 한 단계 흐리게 */
.room .rt b .rno{font-weight:500;color:var(--muted);opacity:.75;font-size:12px;margin-left:2px}
/* 1.10.8: 스크롤 날짜 알약 (카카오톡처럼). PC 는 스크롤 손잡이 옆을 따라다니고(top/right 를 화면 코드가 잡는다),
폰(.ph)은 대화칸 위 가운데에 고정. 손으로 굴릴 때만 .on */
.datepill{position:absolute;z-index:6;pointer-events:none;opacity:0;transition:opacity .25s ease;
background:rgba(58,62,70,.84);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;
padding:4px 11px;border-radius:99px;white-space:nowrap;font-variant-numeric:tabular-nums;
box-shadow:0 2px 8px rgba(0,0,0,.18)}
.datepill.on{opacity:1}
.datepill.ph{left:50%;transform:translateX(-50%);font-size:12.5px;padding:5px 13px}