/* ============================================================
   pages/channel/page.css — 채널

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

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

/* ============================================================
   채널 · 로그 화면의 모양
   되돌리려면 이 블록만 지우면 된다.
   ⚠️ 여기에는 모양만 적는다. 화면을 켜고 끄는 것은 js 가 인라인으로 한다.
   ============================================================ */

/* ---------- ① 채널 화면 ---------- */
.ch-page{ padding:0; }
.ch-page .ch-card{ margin:0; padding:14px 16px; height:100%; min-height:0; }

/* 본문 위 탭 — 표 하나가 탭 하나다 */
.ch-tabs{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin:0 0 var(--sp-3); }
.ch-tab{
  border-width:1px; border-style:solid; border-color:transparent; background:transparent;
  border-radius:var(--sk-r-sm); padding:6px 12px; cursor:pointer;
  font-family:inherit; font-size:var(--fs-3); font-weight:700; color:var(--muted);
  display:inline-flex; align-items:center; gap:var(--sp-2);
}
.ch-tab:hover{ background:var(--row-hover); }
.ch-tab.on{ background:var(--primary); color:#fff; }
.ch-tab .count{
  display:inline-block; min-width:20px; padding:0 6px; border-radius:var(--radius-full);
  background:var(--surface2); color:var(--muted); font-size:var(--fs-1); font-weight:800;
}
.ch-tab.on .count{ background:rgba(255,255,255,.24); color:#fff; }
.ch-tab.add{ font-size:var(--fs-5); padding:4px 11px; color:var(--primary); }

/* 도구 줄 — 검색 · 필터 · 숨김 · 정렬 */
/* ⭐ 도구 줄(검색 · 필터 · 정렬)의 모양은 공용으로 옮겼다.
   styles/03-components.css 의 `.tbar*` 하나가 정본이고, 주소록도 같은 것을 쓴다.
   같은 값이 두 곳에 있으면 한쪽만 고쳐져 반드시 어긋난다. */

/* 표 */
.ch-box{ flex:1; min-height:0; overflow:auto; }
.ch-table{ width:100%; border-collapse:separate; border-spacing:0; }
.ch-table th{
  position:sticky; top:0; z-index:2; background:#fff; cursor:pointer;
  text-align:left; white-space:nowrap; font-size:var(--fs-2); font-weight:700; color:var(--muted);
  padding:8px 12px 7px 14px;
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line-soft);
}
.ch-table th:hover{ color:var(--primary); }
.ch-table td{
  font-size:var(--fs-3); color:var(--text); vertical-align:top; white-space:nowrap;
  padding:9px 12px 7px 14px;
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line-soft);
}
.ch-table tbody tr:last-child td{ border-bottom-width:0; }
.ch-table tbody tr:hover{ background:var(--row-hover); }
.ch-table td.c-n{ text-align:right; }
.ch-table td.c-t{ max-width:280px; overflow:hidden; text-overflow:ellipsis; }
.ch-empty{ color:var(--muted); }
.ch-person{ color:var(--text); }
.ch-none{ text-align:center; color:var(--muted); padding:22px 0; }
.ch-foot{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3); }
.ch-count{ font-size:var(--fs-2); color:var(--muted); }

/* 값 칩 — 새 색을 만들지 않는다. 뜻이 있는 값만 칠하고 나머지는 기본 칩이다. */
.ch-chip{
  display:inline-block; border-radius:var(--radius-full); padding:2px 9px;
  font-size:var(--fs-1); font-weight:700; white-space:nowrap;
  background:var(--primary-light); color:var(--primary);
}
.ch-chip.ok{ background:var(--positive-bg); color:var(--stage-done); }
.ch-chip.warn{ background:#fdf6e3; color:var(--tab-review); }
.ch-chip.off{ background:var(--surface2); color:var(--stage-drop); }
.ch-chip.prod-ss{ background:#fdecec; color:var(--prod-spam); }
.ch-chip.prod-ms{ background:#e8f0fa; color:var(--prod-screen); }
.ch-chip.prod-jb{ background:#fdf3e0; color:var(--prod-jbolt); }
.ch-chip.prod-mf{ background:#eaf7ef; color:var(--prod-mudfix); }
.ch-chip.prod-cm{ background:#fdeaf4; color:var(--prod-cloud); }

/* ⭐ 213차(C-084) — 뜻이 없는 값(업무 유형 등)이 전부 파란 기본색이라 구별이 안 됐다(창섭 보고).
   값을 해시해 고정 배정하는 여덟 색 — **새로 만들지 않고** 자료실 파일 아이콘이 이미 쓰는
   구분색(--cat-1~8, styles/01-tokens.css 정본 · js/02-state.js 의 catPalette()와 같은 자리)을
   그대로 돌려쓴다. */
.ch-chip.c1{ background:#e6f6f4; color:var(--cat-1); }
.ch-chip.c2{ background:#f3ecfd; color:var(--cat-2); }
.ch-chip.c3{ background:#fbeee0; color:var(--cat-3); }
.ch-chip.c4{ background:#e3f4f8; color:var(--cat-4); }
.ch-chip.c5{ background:#eef6e2; color:var(--cat-5); }
.ch-chip.c6{ background:#fbe8ef; color:var(--cat-6); }
.ch-chip.c7{ background:#eceff2; color:var(--cat-7); }
.ch-chip.c8{ background:#fbf1de; color:var(--cat-8); }

/* 패널 쪽 */
.ch-side-empty{ font-size:var(--fs-2); color:var(--muted); line-height:1.7; padding:6px 12px 10px; }
.ch-side-act{ padding:10px 12px 0; }

/* ============================================================
   채널 등록 바 · 표 만들기 팝업

   ⭐ 왼쪽 등록 바의 크기는 **어느 탭에서나 같다**. 폭·입력칸 높이가 표에 따라
   달라지지 않도록 여기서 잠근다. 값이 길면 늘리지 않고 잘라 보여 준다(전체는 마우스를 올리면 뜬다).
   ============================================================ */
.ch-split{ display:grid; grid-template-columns:var(--chform-w) 1fr; gap:var(--sp-4);
  flex:1; min-height:0; }
.ch-main{ display:flex; flex-direction:column; min-width:0; min-height:0; }

.ch-form{
  width:var(--chform-w) !important; flex:none;
  display:flex; flex-direction:column; gap:6px;
  padding:12px; overflow-y:auto; min-height:0;
  background:var(--sk-bg2);
  border-width:1px; border-style:solid; border-color:var(--line-soft);
  border-radius:var(--radius-md);
}
.ch-form-h{ font-size:var(--fs-4); font-weight:800; color:var(--text); display:flex; align-items:baseline; gap:var(--sp-2); }
.ch-form-sub{ font-size:var(--fs-1); font-weight:500; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-f{ display:flex; flex-direction:column; gap:2px; }
.ch-f > label{
  font-size:var(--fs-1); font-weight:700; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;   /* 길면 자른다 — 바가 길어지지 않게 */
}
.ch-f input, .ch-f select{
  width:100%; height:var(--chform-h) !important; min-height:var(--chform-h);
  padding:0 8px; 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);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ⭐ 221차 후속 — 사람 칸 자동완성(docs/index.html 의 .dg-ac / .dg-aclist 와 같은 생김새). */
.ch-f .ch-pac{ position:relative; }
.ch-f .ch-pac-list{ display:none; position:absolute; left:0; right:0; top:calc(var(--chform-h) + 2px); z-index:70;
  max-height:220px; overflow:auto; background:#fff; border-width:1px; border-style:solid; border-color:var(--line);
  border-radius:var(--radius-sm); box-shadow:0 6px 16px rgba(16,24,40,.12); }
.ch-f .ch-pac-list.on{ display:block; }
.ch-f .ch-pac-i{ padding:7px 10px; font-size:var(--fs-1); cursor:pointer;
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.ch-f .ch-pac-i:last-child{ border-bottom-width:0; }
.ch-f .ch-pac-i:hover{ background:var(--sk-bg2); }
.ch-f .ch-pac-i small{ color:var(--muted); margin-left:6px; font-weight:400; }
.ch-f .ch-pac-none{ padding:10px; text-align:center; font-size:var(--fs-1); color:var(--muted); }
.ch-req{ color:var(--accent3); }
.ch-form-act{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.ch-form-act .btn{ flex:1 1 auto; }
#chTable tbody tr{ cursor:pointer; }
#chTable tbody tr.on td{ background:var(--sk-bg2) !important; }
.ch-tab.del{ color:var(--accent3); }

/* ---- 표 만들기 팝업 ---- */
.ch-modal{ position:fixed; inset:0; z-index:60; background:rgba(16,24,40,.35);
  display:flex; align-items:center; justify-content:center; }
.ch-modal-bd{ width:min(760px,92vw); max-height:86vh; overflow:auto;
  background:#fff; border-radius:var(--radius-md); padding:16px 18px 14px;
  box-shadow:0 12px 40px rgba(16,24,40,.28); }
.ch-modal-h{ font-size:var(--fs-6); font-weight:800; color:var(--text);
  display:flex; align-items:center; margin:0 0 12px; }
.ch-modal-x{ margin-left:auto; width:26px; height:26px; border:0; background:none;
  font-size:var(--fs-7); color:var(--muted); cursor:pointer; border-radius:var(--radius-sm); }
.ch-modal-x:hover{ background:var(--row-hover); color:var(--text); }
.ch-pick{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ch-pick-b{ display:flex; flex-direction:column; gap:6px; text-align:left; cursor:pointer;
  padding:16px; background:#fff; border-width:1px; border-style:solid; border-color:var(--line);
  border-radius:var(--radius-md); font-family:inherit; }
.ch-pick-b:hover{ border-color:var(--primary); background:var(--sk-bg2); }
.ch-pick-b b{ font-size:var(--fs-5); color:var(--text); }
.ch-pick-b span{ font-size:var(--fs-2); color:var(--muted); line-height:1.6; }
.ch-cols-h{ display:flex; align-items:center; gap:var(--sp-3); margin:14px 0 6px;
  font-size:var(--fs-3); font-weight:800; color:var(--muted); }
.ch-cols-h .btn{ margin-left:auto; }
.ch-cols{ display:flex; flex-direction:column; gap:6px; }
.ch-col{ display:grid; grid-template-columns:1fr 104px 60px 60px 1.2fr 26px;
  gap:6px; align-items:center; }
.ch-col input[type="text"], .ch-col select, .ch-col .ch-col-k, .ch-col .ch-col-o{
  height:30px; padding:0 8px; font-family:inherit; font-size:var(--fs-3);
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
  min-width:0; background:#fff; }
.ch-col-ck{ display:flex; align-items:center; gap:3px; font-size:var(--fs-1); color:var(--muted); }
.ch-col-x{ width:26px; height:26px; border:0; background:none; color:var(--accent3);
  font-size:var(--fs-6); cursor:pointer; border-radius:var(--radius-sm); }
.ch-col-x:hover{ background:var(--row-hover); }
.ch-modal-act{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
/* ⭐ 날짜로 거르기(174차 · C-057 ④-1). 켜져 있으면 눈에 띄게 — 빈 표를 보고 고장으로 오해하지 않게. */
.ch-dfil{ display:inline-flex; align-items:center; gap:4px; }
.ch-dfil select{ height:28px; font-size:var(--fs-2); font-family:inherit;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
  background:#fff; color:var(--text); padding:0 4px; }
.ch-dfil.on .tbar-b{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ⭐ 갱신 요청 등록 팝업(174차 · C-057 ④-2) */
.ch-renew-ms{ display:flex; flex-wrap:wrap; gap:6px; }
.ch-renew-m{ position:relative; display:inline-flex; align-items:center; }
.ch-renew-m input{ height:32px; font-size:var(--fs-2); font-family:inherit; padding:0 4px;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm); }
.ch-renew-x{ margin-left:2px; width:22px; height:22px; border:0; background:none;
  color:var(--muted); cursor:pointer; border-radius:var(--radius-sm); }
.ch-renew-x:hover{ background:var(--row-hover); color:var(--text); }
.ch-renew-plan{ margin-top:12px; font-size:var(--fs-3); color:var(--text);
  background:var(--sk-bg2); border-radius:var(--radius-sm); padding:10px 12px; }
.ch-renew-rows{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px;
  font-size:var(--fs-2); color:var(--muted); }

/* ⭐ 최근 동기화 시각(174차 · C-057 ③). 버튼이 아니라 읽는 글자라 테두리를 두지 않는다. */
.ch-sync{ font-size:var(--fs-2); color:var(--muted); white-space:nowrap;
  padding:0 var(--sp-2); align-self:center; }
.ch-sync.bad{ color:var(--danger, #d92d20); font-weight:700; }

/* ⭐ 줄 고치기 모달의 칸(174차 · C-057 ②).
   왼쪽 등록 폼은 좁아서 한 줄씩이지만 모달은 넓으니 **두 칸씩** 놓는다.
   칸이 스무 개가 넘는 표(세금계산서 요청)도 스크롤 없이 한눈에 들어온다.
   ⚠️ 폭은 `.ch-modal-bd` 것(760px)을 그대로 쓴다 — FHD 에서 넘치지 않는다. */
.ch-edit-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;
  width:auto !important; padding:0; background:none; border:0; overflow:visible; }
/* 삭제는 되돌릴 수 없으니 저장 버튼에서 떼어 왼쪽 끝에 둔다 */
.ch-modal-act #chDelRow{ margin-right:auto; }
.ch-note{ font-size:var(--fs-2); color:var(--muted); background:var(--sk-bg2);
  border-radius:var(--radius-sm); padding:8px 10px; margin:10px 0 0; }
.ch-form .ch-f > label{ font-weight:700; }
.ch-form-act .btn{
  height:var(--chform-h); padding:0 13px;
  font-size:var(--fs-3); font-weight:700; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---- 새 채널 만들기 팝업 ----
   ⚠️ 격자 칸은 기본이 min-width:auto 라 안쪽 입력칸이 칸을 밀어낸다(RULES 6-2).
      `min-width:0` 이 없으면 좁은 화면에서 오른쪽이 잘린다. */
.ch-newch{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ch-newch > .ch-f{ min-width:0; }
@media (max-width:640px){
  .ch-newch{ grid-template-columns:1fr; }
}
.ch-hint{ font-size:var(--fs-1); color:var(--muted); margin-top:4px; line-height:1.6; }

/* ============================================================
   120차 — 창섭 V1.7-6 (계약·세금계산서 사이트 표)
   ⚠️ 이 머리글은 검사가 글자로 찾는 자리다 — 고치지 않는다.
   되돌리려면 이 블록만 지우면 된다.
   ============================================================ */

/* 주소 열 — 누르면 새 창. 색과 밑줄은 토큰에서 가져온다. */
.ch-table a.ch-link{ color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.ch-table a.ch-link:hover{ color:var(--primary-press); }

/* 자동으로 채워지는 칸(등록자 · 수정일) — 보이되 고칠 수 없다는 것이 한눈에 보이게 */
.ch-f input.ch-auto{ background:var(--surface2); color:var(--text-secondary); cursor:not-allowed; }

/* ============================================================
   126차 — 창섭 C-008 (재고에서 시리얼 고르기)
   ⚠️ 이 머리글은 검사가 글자로 찾는 자리다 — 고치지 않는다.
   되돌리려면 이 블록만 지우면 된다.
   ============================================================ */

/* 눌러서 고르는 칸 — 누를 수 있다는 것이 보이게 */
.ch-table td.ch-pickable{ cursor:pointer; }
.ch-table td.ch-pickable:hover{ background:var(--row-hover); }

.ch-pick-top{ font-size:var(--fs-3); color:var(--muted); margin:0 0 10px; }
.ch-pick-top b{ color:var(--text); }
.ch-pick-top .ch-warn{ margin-left:6px; padding:1px 8px; border-radius:var(--radius-full);
  background:var(--negative-bg); color:var(--negative); font-weight:800; font-size:var(--fs-1); }
.ch-pick-list{ max-height:46vh; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.ch-pick-i{ display:grid; grid-template-columns:22px minmax(0,1.4fr) minmax(0,1fr) 90px;
  align-items:center; gap:8px; padding:7px 8px; border-radius:var(--radius-sm);
  font-size:var(--fs-3); color:var(--text); cursor:pointer; }
.ch-pick-i:hover{ background:var(--row-hover); }
.ch-pick-i b{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-pick-i span{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-pick-d{ text-align:right; }
.ch-modal-f{ display:flex; gap:6px; justify-content:flex-end; margin-top:12px; }

/* ============================================================
   127차 — 창섭 C-008 (납품확인서 올리기)
   ⚠️ 이 머리글은 검사가 글자로 찾는 자리다 — 고치지 않는다.
   되돌리려면 이 블록만 지우면 된다.
   ============================================================ */
.ch-imp-map{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; margin-bottom:12px; }
.ch-imp-prev{ max-height:26vh; overflow:auto; font-size:var(--fs-1); color:var(--muted);
  background:var(--surface2); border-radius:var(--radius-sm); padding:8px; }
.ch-imp-r{ display:flex; gap:10px; white-space:nowrap; }
.ch-imp-r.h{ font-weight:800; color:var(--text); }
.ch-imp-r span{ min-width:0; max-width:180px; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   128차 — 창섭 C-008 (주소록에서 담당자 고르기)
   ⚠️ 이 머리글은 검사가 글자로 찾는 자리다 — 고치지 않는다.
   되돌리려면 이 블록만 지우면 된다.
   ============================================================ */
.ch-who-list{ max-height:46vh; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.ch-who-i{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
  align-items:center; gap:8px; padding:9px 10px; text-align:left; cursor:pointer;
  background:#fff; border-width:1px; border-style:solid; border-color:var(--line);
  border-radius:var(--radius-sm); font-family:inherit; font-size:var(--fs-3); color:var(--text); }
.ch-who-i:hover{ border-color:var(--primary); background:var(--sk-bg2); }
.ch-who-i b{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-who-i span{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================
   144차 — 표 안 드롭다운 · 일괄 등록
   ⚠️ 이 머리글의 차수는 검사가 글자로 찾는 자리다 — 고치지 않는다.
   되돌리려면 이 블록만 지우면 된다.
   ⚠️ 모양만 적는다. 무엇이 드롭다운인지는 표 정의가 정하고 js 가 표시를 단다.
   ============================================================ */

/* 표에서 바로 고를 수 있는 칸 — 누를 수 있다는 것이 보이게 */
.ch-table td.ch-selectable{ cursor:pointer; }
.ch-table td.ch-selectable:hover{ background:var(--row-hover); }

/* 그 자리에서 열리는 목록 — 칸을 넘지 않게 폭을 묶는다 */
.ch-table td .ch-cellsel{ width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  height:26px; padding:0 4px; font-family:inherit; font-size:var(--fs-2); color:var(--text);
  background:#fff; border-width:1px; border-style:solid; border-color:var(--primary);
  border-radius:var(--radius-sm); }

/* 일괄 등록 — 만들 시리얼 미리보기 */
.ch-bulk-prev{ margin:2px 0 12px; padding:8px 10px; border-radius:var(--radius-sm);
  background:var(--surface2); color:var(--muted); font-size:var(--fs-2); line-height:1.6; }
.ch-bulk-prev b{ color:var(--text); font-weight:800; }
.ch-bulk-prev .ch-warn{ color:var(--negative); font-weight:800; }

/* ══════════════════════════════════════════════════════════════
   ⭐ 191차 (C-072)
   ══════════════════════════════════════════════════════════════ */

/* ---- ④ 열 너비를 끌어서 조절 ---- */

/* 손잡이는 머리글 오른쪽 끝에 붙는다. 평소엔 옅고, 갖다 대면 진해진다.
   ⚠️ 머리글에 `position:sticky` 가 걸려 있어 기준 상자가 이미 잡혀 있다 — 그대로 얹는다. */
.ch-table th .ch-rz{
  position:absolute; top:0; right:0; width:9px; height:100%;
  cursor:col-resize; user-select:none;
}
.ch-table th .ch-rz::after{
  content:''; position:absolute; top:22%; right:3px; width:2px; height:56%;
  background:var(--line); border-radius:1px; opacity:0;
}
.ch-table th:hover .ch-rz::after{ opacity:1; }
.ch-table th .ch-rz:hover::after{ background:var(--primary); opacity:1; }
/* 끄는 동안에는 온 화면의 커서를 바꾸고 글자가 잡히지 않게 한다 */
body.ch-rzing{ cursor:col-resize; user-select:none; }

/* 「정한 너비대로」 모드 — 한 열이라도 사람이 잡아 늘리면 켜진다.
   ⚠️ 이때는 `td.c-t` 의 max-width:280px 가 방해가 된다(넓혀도 안 늘어난다) — 풀어 준다. */
.ch-table.fixed{ table-layout:fixed; }
.ch-table.fixed td{ overflow:hidden; text-overflow:ellipsis; }
.ch-table.fixed td.c-t{ max-width:none; }

/* ---- ② 여러 줄로 쓰는 칸 ---- */

/* 줄 고치기 모달은 두 칸짜리 격자다 — 여러 줄 칸은 한 줄을 통째로 쓴다. */
.ch-edit-form .ch-f-wide{ grid-column:1 / -1; }
.ch-f textarea.ch-ml{
  width:100%; min-height:132px; resize:vertical;
  padding:7px 8px; font-family:inherit; font-size:var(--fs-3); line-height:1.55; color:var(--text);
  background:#fff; border-width:1px; border-style:solid; border-color:var(--line);
  border-radius:var(--radius-sm);
  white-space:pre-wrap;
}

/* ---- ⑤ [⋯] 표 옵션 메뉴 ---- */

.ch-page .tbar-b.tbar-more{ font-weight:800; letter-spacing:1px; padding-left:10px; padding-right:10px; }
.ch-page .tbar-pop-i.danger{ color:var(--accent3); }

/* ---- ③ 표 순서 바꾸기 ---- */

.ch-order{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.ch-order-i{
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  background:var(--sk-bg2); border-radius:var(--radius-sm);
}
.ch-order-n{ width:20px; text-align:right; font-size:var(--fs-2); color:var(--muted); }
.ch-order-t{ flex:1; min-width:0; font-size:var(--fs-3); color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-order-i .adm-b[disabled]{ opacity:.35; cursor:default; }

/* ---- 192차(C-073) 하위 채널 — 팀을 체크해서 고른다 ---- */

.ch-page .ch-hint{ font-weight:500; color:var(--muted); }
.ch-teamf{ display:flex; flex-direction:column; gap:2px; }
.ch-teamf > label{
  font-size:var(--fs-1); font-weight:700; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ch-teams{
  display:flex; flex-wrap:wrap; gap:6px 10px;
  padding:8px 10px; background:var(--sk-bg2); border-radius:var(--radius-sm);
}
.ch-teams.empty{ color:var(--muted); font-size:var(--fs-2); }
.ch-team{ display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-size:var(--fs-3); color:var(--text); white-space:nowrap; }
.ch-team input{ margin:0; cursor:pointer; }