/* ============================================================
   pages/checklist/page.css — 전달사항

   ⭐ **이 파일은 이 화면 안쪽만 건드린다.** 다른 레일에는 영향이 없다.
   공용(토큰 · 표 · 알약 · 버튼 · 글꼴 · 색)은 styles/ 가 갖는다. 여기서는 그것을 물려받고
   이 화면에만 필요한 것만 덧쓴다. 그래서 이 화면을 고칠 때 다른 화면을 볼 일이 없다.

   @scope #checklistContent, .cl-
   ⚠️ 위 @scope 는 약속이 아니라 검사 대상이다 — 여기 적힌 것에 걸리지 않는 셀렉터를 쓰면
      tests/test_pages.js 가 실패한다. 공용 규칙을 여기서 덮어쓰지 못하게 막는 장치다.
   ============================================================ */

#checklistContent{ height:100%; min-height:0; }
.cl-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--sp-4); height:100%; min-height:0;
}
.cl-side{ display:flex; flex-direction:column; gap:var(--sp-4); overflow-y:auto; min-height:0; }

.cl-main{ display:flex; flex-direction:column; min-height:0; padding:14px 16px !important; }
.cl-card{ padding:12px 14px !important; }

/* ---------- 카드 머리 ---------- */
.cl-hd{ display:flex; align-items:center; gap:var(--sp-2); margin:0 0 10px; }
.cl-sp{ flex:1; }
.cl-scope{ font-size:var(--fs-2); color:var(--muted); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-n{ font-size:var(--fs-2); color:var(--muted); font-weight:700; }
.cl-ro{
  font-size:var(--fs-1); font-weight:700; color:var(--accent3);
  background:var(--sk-bg2); border-radius:var(--radius-full); padding:3px 10px;
}

/* ---------- 입력줄 ---------- */
.cl-add{ display:flex; gap:6px; margin:0 0 10px; flex-wrap:wrap; }
.cl-add > *{ height:32px; }
.cl-text{ flex:1 1 240px; min-width:0; }
.cl-date{ flex:0 0 140px; }
.cl-who{ flex:0 0 116px; }
.cl-prio{ flex:0 0 86px; }
.cl-add input, .cl-add select{
  padding:0 9px; font-family:inherit; font-size:var(--fs-3); color:var(--text); background:#fff;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
}
.cl-add input:focus, .cl-add select:focus{ border-color:var(--primary); }
.cl-add .btn{ flex:0 0 auto; padding:0 14px; font-size:var(--fs-3); font-weight:700; }

/* ---------- 거르개 칩 ---------- */
.cl-filters{ display:flex; gap:5px; margin:0 0 10px; flex-wrap:wrap; }
.cl-chip{
  display:inline-flex; align-items:center; gap:5px;
  height:26px; padding:0 10px; cursor:pointer; font-family:inherit;
  font-size:var(--fs-2); font-weight:700; color:var(--muted);
  background:var(--sk-bg2); border:0; border-radius:var(--radius-full);
}
.cl-chip:hover{ background:var(--row-hover); color:var(--text); }
.cl-chip.on{ background:var(--primary); color:#fff; }
.cl-chip b{ font-weight:800; opacity:.85; }

/* ---------- 목록 — 전달사항 한 건 = 카드 한 장(230차 C-097, 슬랙 알림 목록 참고 시안) ---------- */
.cl-list{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:9px; padding-bottom:2px; }
.cl-nitem{
  background:#fff; border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-lg);
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.cl-nitem:hover{ box-shadow:var(--shadow-sm); }
.cl-nitem.open{ border-color:var(--primary); box-shadow:var(--shadow-md-blue); }
.cl-nitem.hilite{ background:var(--sk-bg2); }
/* 232차(C-099) — 배경은 상태와 관계없이 항상 흰색(창섭 요청). 완료는 취소선으로만,
   고정은 하단 📌 버튼 색으로만 나타낸다 — 카드 배경·테두리는 건드리지 않는다. */
.cl-nitem.done .cl-ntx{ color:var(--muted); text-decoration:line-through; }

.cl-ntop{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:12px 14px 0; }
.cl-nwho{ flex:1; min-width:0; }
.cl-nwho-row{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.cl-nby{ font-size:var(--fs-4); font-weight:800; color:var(--text); }
/* 232차(C-099) — 담당자 : 작성자 이름 바로 아래, 색 pill로 고른 사람 전원(창섭 요청) */
.cl-assignees{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:4px; }
.cl-assignees-label{ font-size:var(--fs-1); font-weight:700; color:var(--muted); }
.cl-apill{
  flex:none; font-size:var(--fs-1); font-weight:800; color:#fff;
  padding:2px 8px; border-radius:var(--radius-full);
}
.cl-nright{ flex:none; display:flex; align-items:center; gap:6px; }
/* 232차(C-100) — 마감일을 굵은 알약으로(창섭 요청 — 회색 작은 글자라 잘 안 보였다).
   지연·오늘은 색으로도 구분한다(옛 cl-dday를 이 알약 하나에 합침). */
.cl-when{
  flex:none; font-size:var(--fs-2); font-weight:800; color:var(--text); background:var(--sk-bg2);
  padding:3px 9px; border-radius:var(--radius-full); font-variant-numeric:tabular-nums;
}
.cl-when.late{ background:var(--negative); color:#fff; }
.cl-when.today{ background:var(--stage-80); color:#fff; }

.cl-nbody{ padding:8px 14px 0 58px; }
.cl-ntx{ font-size:var(--fs-4); color:var(--text); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 하단 액션 줄 — 완료·댓글·첨부·고정·고치기·지우기를 전부 바로 보이게 둔다(숨은 메뉴 없음) */
.cl-nfoot{ display:flex; align-items:center; gap:var(--sp-2); padding:9px 12px 11px 58px; }
.cl-nfoot-sp{ flex:1; }
.cl-done-btn{
  flex:none; height:26px; padding:0 12px; cursor:pointer; font-family:inherit;
  font-size:var(--fs-1); font-weight:800; color:var(--stage-done); background:#fff;
  border-width:1px; border-style:solid; border-color:var(--stage-done); border-radius:var(--radius-md);
}
.cl-done-btn:hover{ background:var(--positive-bg); }
.cl-done-btn.on{ background:var(--stage-done); color:#fff; }
.cl-cmbtn{
  flex:none; display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px;
  border-radius:var(--radius-full); background:var(--sk-bg2); color:var(--muted); font-size:var(--fs-1);
  font-weight:800; border:0; cursor:pointer; font-family:inherit;
}
.cl-cmbtn:hover{ background:var(--row-hover); color:var(--primary); }
.cl-cmbtn.has{ color:var(--primary); background:var(--primary-light); }
.cl-cmbtn svg{ width:13px; height:13px; }

/* 232차(C-099) — 첨부·고정·고치기·지우기가 아이콘만 있던 작은 정사각 버튼(.cl-x/.cl-pin)에서
   아이콘+글자 알약 버튼(.cl-cmbtn과 같은 모양)으로 바뀌었다(창섭 요청 — 뭘 누르는지 바로 보이게). */
.cl-btn2{
  flex:none; display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px;
  border-radius:var(--radius-full); background:var(--sk-bg2); color:var(--muted); font-size:var(--fs-1);
  font-weight:800; border:0; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.cl-btn2:hover{ background:var(--row-hover); color:var(--primary); }
.cl-btn2.del:hover{ color:var(--accent3); }
/* 고정된 카드는 상단에 따로 표시하지 않고, 이 📌 버튼만 붉게 바뀐다(창섭 요청) */
.cl-btn2.pin.on{ background:var(--negative); color:#fff; }
.cl-btn2.pin.on:hover{ background:var(--negative); color:#fff; }

.cl-ava{
  flex:none; display:grid; place-items:center; width:22px; height:22px;
  border-radius:var(--radius-md); color:#fff;
  font-size:var(--fs-1); font-weight:800; letter-spacing:-.02em;
}
.cl-ava.none{ background:var(--sk-bg2); color:var(--muted); font-weight:700; }
.cl-ava.lg{ width:36px; height:36px; font-size:var(--fs-4); margin-top:1px; }

.cl-empty{ padding:22px 0; text-align:center; font-size:var(--fs-3); color:var(--muted); line-height:1.8; }

/* ---------- 오늘 처리할 일 ---------- */
/* ⚠️ 공용 카드 규칙(`main .card{ background:#fff }`)이 셀렉터가 둘이라 이긴다.
   이 카드만 같은 무게로 되받는다. 색은 토큰 그대로다. */
main .card.cl-today{ background:var(--primary) !important; color:#fff; }
.cl-today-l{ font-size:var(--fs-2); font-weight:700; opacity:.86; }
.cl-today-n{ font-size:var(--fs-8); font-weight:800; letter-spacing:-.02em; margin:2px 0 0; }
.cl-today-s{ font-size:var(--fs-2); opacity:.86; }

/* ---------- 달력 ---------- */
.cl-nav{
  width:24px; height:24px; cursor:pointer; font-family:inherit; font-size:var(--fs-5);
  line-height:1; color:var(--muted); background:none; border:0; border-radius:var(--radius-sm);
}
.cl-nav:hover{ background:var(--row-hover); color:var(--text); }
.cl-cal-t{ font-size:var(--fs-3); font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums; min-width:64px; text-align:center; }
.cl-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin:0 0 4px; }
.cl-cal-dow span{ text-align:center; font-size:var(--fs-1); font-weight:700; color:var(--muted); }
.cl-cal-dow .sun{ color:var(--accent3); }
.cl-cal-dow .sat{ color:var(--stage-70); }
.cl-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cl-d{
  position:relative; height:30px; cursor:pointer; font-family:inherit;
  font-size:var(--fs-2); font-weight:700; color:var(--text);
  background:none; border:0; border-radius:var(--radius-sm);
}
.cl-d.empty{ visibility:hidden; }
.cl-d:hover{ background:var(--row-hover); }
.cl-d.sun{ color:var(--accent3); }
.cl-d.sat{ color:var(--stage-70); }
.cl-d.today{ box-shadow:inset 0 0 0 1px var(--primary); }
.cl-d.pick{ background:var(--primary); color:#fff; }
.cl-dot{
  position:absolute; right:2px; top:1px; font-style:normal;
  font-size:var(--fs-1); font-weight:800; line-height:1.25;
  min-width:14px; padding:0 3px; border-radius:var(--radius-full); transform:scale(.82);
  transform-origin:top right;
  background:var(--accent3); color:#fff;
}
.cl-d.pick .cl-dot{ background:#fff; color:var(--primary); }
.cl-pick{ margin-top:8px; border-top-width:1px; border-top-style:solid; border-top-color:var(--line-soft);
  padding-top:8px; }
.cl-pick-h{ display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-2); font-weight:700; color:var(--muted); margin:0 0 4px; }
.cl-pick-x{ margin-left:auto; cursor:pointer; font-family:inherit; font-size:var(--fs-1);
  color:var(--muted); background:none; border:0; }
.cl-pick-x:hover{ color:var(--primary); }

/* ---------- 처리 현황 ---------- */
.cl-rate{ font-size:var(--fs-5); font-weight:800; color:var(--primary); }
.cl-bar{ height:8px; border-radius:var(--radius-full); background:var(--sk-bg2); overflow:hidden; }
.cl-bar > span{ display:block; height:100%; background:var(--stage-done); border-radius:var(--radius-full);
  transition:width .2s linear; }
.cl-legend{ display:flex; gap:var(--sp-3); margin-top:8px; flex-wrap:wrap;
  font-size:var(--fs-1); color:var(--muted); }
.cl-legend .sw{ display:inline-block; width:8px; height:8px; border-radius:var(--radius-full);
  margin-right:4px; }
.cl-legend .sw.done{ background:var(--stage-done); }
.cl-legend .sw.open{ background:var(--stage-70); }
.cl-legend .sw.late{ background:var(--accent3); }

/* ---------- 담당자별 ---------- */
.cl-rank{ display:flex; flex-direction:column; gap:5px; }
.cl-rank-r{ display:flex; align-items:center; gap:var(--sp-2); }
.cl-rank-n{ flex:0 0 62px; font-size:var(--fs-2); color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-rank-b{ flex:1; height:6px; border-radius:var(--radius-full); background:var(--sk-bg2); overflow:hidden; }
.cl-rank-b > i{ display:block; height:100%; background:var(--primary); }
.cl-rank-v{ flex:none; font-size:var(--fs-1); color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- 완료 항목 — 카드 전체를 누르면 전체보기 모달(230차 C-097) ---------- */
.cl-done-card{ cursor:pointer; transition:border-color .12s ease; }
.cl-done-card:hover{ border-color:var(--primary); }
.cl-done-cta{ font-size:var(--fs-1); font-weight:800; color:var(--primary); }
.cl-done{ display:flex; flex-direction:column; gap:2px; max-height:180px; overflow-y:auto; }
.cl-done-r{ display:flex; align-items:center; gap:var(--sp-2); padding:3px 0; }
.cl-done-tx{ flex:1; min-width:0; color:var(--muted); text-decoration:line-through; font-size:var(--fs-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- 좁은 화면 ---------- */
@media (max-width:1360px){
  .cl-wrap{ grid-template-columns:minmax(0,1fr); }
  .cl-side{ overflow:visible; }
}

/* ============================================================
   읽음 확인 · 필독 · 예약/고정/첨부 · 딥링크
   ⚠️ 새 규칙은 이 블록 맨 뒤에 쌓는다. 되돌릴 때 이 블록만 지우면 된다.
   ============================================================ */

/* ---------- 옵션 줄 (평소에는 접혀 있다) ---------- */
.cl-opts{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 10px; padding:9px 10px;
  background:var(--sk-bg2); border-radius:var(--radius-sm);
}
.cl-opt{ display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-2); font-weight:700; color:var(--text); }
.cl-opt .cl-in{
  height:28px; padding:0 8px; font-family:inherit; font-size:var(--fs-2);
  color:var(--text); background:#fff;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
}
.cl-opt .cl-file{ padding:3px 6px; max-width:230px; }
.cl-cb{ width:14px; height:14px; margin:0; accent-color:var(--primary); }
.cl-opt-h{ flex:1 1 100%; font-size:var(--fs-1); color:var(--muted); }
.cl-opt-b.on{ background:var(--primary); color:#fff; }

/* 올리는 중 — 큰 파일은 오래 걸려서 지금 무슨 일이 일어나는지 보여야 한다 */
.cl-prog{ flex:1 1 100%; }
.cl-prog-bar{ height:6px; border-radius:var(--radius-full); background:#fff; overflow:hidden; }
.cl-prog-bar i{ display:block; height:100%; width:0; background:var(--primary); transition:width .12s linear; }
.cl-prog-tx{ font-size:var(--fs-1); color:var(--muted); margin-top:5px; }

/* ---------- 줄에 붙는 표시 ---------- */
.cl-tag{
  flex:none; font-size:var(--fs-1); font-weight:800; padding:2px 7px;
  border-radius:var(--radius-full); background:var(--sk-bg2); color:var(--muted);
}
.cl-tag.must{ background:var(--negative); color:#fff; }
.cl-tag.wait{ background:var(--stage-70); color:#fff; }
.cl-tag.unread{ background:#fff; color:var(--negative);
  border-width:1px; border-style:solid; border-color:var(--negative); }
.cl-tag.done{ background:var(--stage-done); color:#fff; }
.cl-reads{
  flex:none; font-size:var(--fs-1); font-weight:700; color:var(--muted);
  padding:2px 7px; background:none; border:0; border-radius:var(--radius-full);
  cursor:pointer; font-family:inherit; font-variant-numeric:tabular-nums;
}
.cl-reads:hover{ background:var(--row-hover); color:var(--text); }

/* ---------- 팝업 (필독 확인 · 읽음 현황) ---------- */
.cl-modal{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(15,23,42,.45);
}
.cl-dlg{
  width:min(560px, 100%); max-height:82vh; display:flex; flex-direction:column;
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 18px 48px rgba(15,23,42,.28);
}
.cl-dlg-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:13px 16px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.cl-dlg-h b{ font-size:var(--fs-4); font-weight:800; color:var(--text); }
.cl-dlg-x{ width:24px; height:24px; cursor:pointer; font-family:inherit; font-size:var(--fs-2);
  color:var(--muted); background:none; border:0; border-radius:var(--radius-sm); }
.cl-dlg-x:hover{ background:var(--row-hover); color:var(--text); }
.cl-dlg-b{ padding:14px 16px; overflow:auto; font-size:var(--fs-3); color:var(--text); }
.cl-dlg-f{ display:flex; align-items:center; gap:var(--sp-2); padding:12px 16px;
  border-top-width:1px; border-top-style:solid; border-top-color:var(--line); }
.cl-dlg-m{ flex:1; font-size:var(--fs-2); color:var(--muted); }

.cl-must-i{ padding:10px 12px; margin:0 0 8px; background:var(--sk-bg2); border-radius:var(--radius-sm); }
.cl-must-t{ font-size:var(--fs-3); font-weight:700; color:var(--text); line-height:1.6; }
.cl-must-m{ font-size:var(--fs-1); color:var(--muted); margin-top:4px; }

.cl-rd-h{ font-size:var(--fs-2); font-weight:800; color:var(--muted); margin:12px 0 6px; }
.cl-rd-h:first-child{ margin-top:0; }
.cl-rd-r{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:var(--fs-2); }
.cl-rd-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-rd-w{ flex:none; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- 첨부 목록 ---------- */
.cl-files{ display:flex; flex-wrap:wrap; gap:5px; padding:8px 14px 0 58px; }
.cl-fl{
  display:inline-flex; align-items:center; gap:5px; max-width:280px;
  font-size:var(--fs-1); font-weight:700; color:var(--text); text-decoration:none;
  padding:3px 9px; background:var(--sk-bg2); border-radius:var(--radius-full);
  cursor:pointer; font-family:inherit; border:0;
}
.cl-fl:hover{ background:var(--row-hover); color:var(--primary); }
.cl-fl span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-fl-x{ flex:none; color:var(--muted); }
.cl-fl-x:hover{ color:var(--negative); }

/* ---------- 댓글(227차 C-096) — 230차(C-097)에서 "항상 보이는 목록" · "눌러야 나오는 입력칸"으로 나눔 ---------- */
.cl-existing{ margin:0 14px 4px 58px; padding-top:9px;
  border-top-width:1px; border-top-style:solid; border-top-color:var(--line-soft);
  display:flex; flex-direction:column; }
.cl-cm{ display:flex; align-items:flex-start; gap:6px; padding:5px 0; font-size:var(--fs-1); }
.cl-cm-body{ flex:1; min-width:0; }
.cl-cm-head{ display:flex; align-items:baseline; gap:6px; }
.cl-cm-by{ font-weight:700; }
.cl-cm-tx{ margin-top:1px; line-height:1.5; }
.cl-cm-at{ flex:none; color:var(--muted); }
.cl-cm-x{ flex:none; color:var(--muted); cursor:pointer; }
.cl-cm-x:hover{ color:var(--negative); }

/* 새 댓글 입력칸 — 카드를 눌러야 펼쳐진다 */
.cl-addwrap{ max-height:0; overflow:hidden; opacity:0; transition:max-height .2s ease, opacity .16s ease; }
.cl-nitem.open .cl-addwrap{ max-height:60px; opacity:1; }
.cl-cm-add{ display:flex; gap:6px; margin:6px 14px 12px 58px; }
.cl-cm-in{
  flex:1; min-width:0; font-size:var(--fs-1); font-family:inherit;
  padding:5px 10px; border-width:1px; border-style:solid; border-color:var(--line);
  border-radius:var(--radius-full); background:var(--bg);
}
.cl-cm-in:focus{ border-color:var(--primary); background:#fff; }
.cl-cm-send{
  flex:none; font-size:var(--fs-1); font-weight:700; color:var(--primary);
  padding:4px 10px; border:0; border-radius:var(--radius-full); background:var(--sk-bg2);
  cursor:pointer; font-family:inherit;
}
.cl-cm-send:hover{ background:var(--row-hover); }

/* ---------- 완료 항목 전체보기 모달(230차 C-097) — 날짜별 ---------- */
.cl-dm-d{ font-size:var(--fs-2); font-weight:800; color:var(--muted); margin:14px 0 6px; }
.cl-dm-d:first-child{ margin-top:0; }
.cl-dm-row{ display:flex; align-items:flex-start; gap:8px; padding:7px 0;
  border-top-width:1px; border-top-style:solid; border-top-color:var(--line-soft); }
.cl-dm-d + .cl-dm-row{ border-top:0; }
.cl-dm-body{ flex:1; min-width:0; }
.cl-dm-h{ display:flex; align-items:baseline; gap:6px; }
.cl-dm-by{ font-size:var(--fs-2); font-weight:800; color:var(--text); }
.cl-dm-when{ font-size:var(--fs-1); color:var(--muted); font-variant-numeric:tabular-nums; }
.cl-dm-tx{ font-size:var(--fs-3); color:var(--muted); text-decoration:line-through; margin-top:1px; }
.cl-dm-cm{ flex:none; font-size:var(--fs-1); font-weight:800; color:var(--primary); }

/* ============================================================
   담당자 여럿 고르기 · 고치기 창
   ⚠️ 새 클래스는 이 화면 앞머리(.cl-)로만 짓는다. 색·간격은 토큰에서 온다.
   ============================================================ */
.cl-who{
  position:relative; flex:1 1 200px; min-width:150px; display:flex; align-items:center; gap:4px;
  padding:0 6px; background:#fff; overflow:visible;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
}
.cl-who-chips{ flex:1; min-width:0; display:flex; align-items:center; gap:4px; overflow:hidden; }
.cl-who-none{ font-size:var(--fs-2); color:var(--muted); white-space:nowrap; }
.cl-who-c{
  flex:none; display:inline-flex; align-items:center; gap:3px; max-width:110px;
  padding:2px 6px; font-size:var(--fs-1); font-weight:700; color:var(--text);
  background:var(--sk-bg2); border-radius:var(--radius-full);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cl-who-x{ flex:none; cursor:pointer; font-style:normal; color:var(--muted); }
.cl-who-x:hover{ color:var(--negative); }
.cl-who-b{
  flex:none; height:24px; padding:0 8px; cursor:pointer; font-family:inherit;
  font-size:var(--fs-1); font-weight:700; color:var(--muted);
  background:var(--sk-bg2); border:0; border-radius:var(--radius-full);
}
.cl-who-b:hover{ color:var(--primary); }
.cl-who-pop{
  position:absolute; top:calc(100% + 4px); left:0; z-index:60;
  width:220px; max-height:260px; overflow:auto; padding:6px;
  background:#fff; border-radius:var(--radius-sm);
  border-width:1px; border-style:solid; border-color:var(--line);
  box-shadow:0 10px 26px rgba(15,23,42,.16);
}
.cl-who-h{ padding:4px 6px; font-size:var(--fs-1); font-weight:800; color:var(--muted); }
.cl-who-i{
  width:100%; display:flex; align-items:center; gap:6px; padding:5px 6px; cursor:pointer;
  font-family:inherit; font-size:var(--fs-2); color:var(--text);
  background:none; border:0; border-radius:var(--radius-sm); text-align:left;
}
.cl-who-i:hover{ background:var(--row-hover); }
.cl-who-i.on{ color:var(--primary); font-weight:700; }
.cl-who-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-who-k{ flex:none; font-weight:800; color:var(--primary); }

/* 줄에 붙는 얼굴 여럿 */
.cl-avas{ flex:none; display:inline-flex; align-items:center; gap:2px; }
.cl-ava.more{ background:var(--sk-bg2); color:var(--muted); font-weight:700; }

/* 고치기 창 */
.cl-ef{ margin:0 0 12px; }
.cl-ef label{ display:block; font-size:var(--fs-2); font-weight:700; color:var(--muted); margin:0 0 4px; }
.cl-ef .cl-in{
  width:100%; height:32px; padding:0 9px; font-family:inherit; font-size:var(--fs-3);
  color:var(--text); background:#fff;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
}
.cl-ef .cl-in:focus{ border-color:var(--primary); }
.cl-ef .cl-who{ height:32px; flex:1 1 auto; }