/* ═══ 메신저 UI — 색 약속 (2026-09-29 디자인 개편) ═════════════════════
   ★화면의 색은 이 파일 한 곳에만 둔다.★ 화면 파일에 색을 직접 적지 않는다.
   회사색(--brand)은 회사 브랜딩에서 관리자가 고른 값으로 theme.js 가 덮어쓴다.
   세로띠(--brand-deep)와 옅은 바탕(--brand-tint·--brand-soft)도 theme.js 가 거기서 계산한다.
   아래 값은 회사색을 안 고른 곳의 기본값이다.
   (CSS color-mix 로 계산하지 않는다 — 윈도우 7 의 마지막 크롬(109)이 몰라서
    세로띠가 투명해지고 메뉴가 사라진다. 그래서 계산은 스크립트가 한다.) */
:root{
  --brand:#1E5AB6;        /* 회사색 — 내 말풍선·선택·주 단추 */
  --brand-deep:#11305E;   /* 왼쪽 세로띠 */
  --brand-tint:#EDF2F9;   /* 선택된 줄·내 칸 바탕 */
  --brand-soft:#DBE5F3;   /* 옅은 테두리 */
  --brand-ink:#FFFFFF;    /* 회사색 위 글씨(밝은 회사색이면 먹색으로 바뀐다) */

  --ink:#172233;          /* 글씨 */
  --ink-2:#4B5667;        /* 보조 글씨 */
  --ink-3:#8A93A2;        /* 흐린 글씨·시각 */
  --ink-4:#B4BCC7;        /* 더 흐린 글씨·비활성 */
  --line:#E4E8EE;         /* 가는 선 */
  --line-2:#EEF1F5;       /* 더 옅은 선 */
  --canvas:#F3F5F8;       /* 바탕 */
  --paper:#FFFFFF;        /* 면 */
  --hover:#F5F7FA;        /* 줄에 마우스를 올렸을 때 */

  --online:#1F9D55;  --online-tint:#E6F5EC;
  --danger:#D93F3F;  --danger-tint:#FDEEEE;  --danger-line:#F3C9C9;
  --warn:#9A6200;    --warn-tint:#FFF6E0;    --warn-line:#F0DDA8;

  --shadow-pop:0 12px 32px rgba(16,24,40,.16), 0 2px 6px rgba(16,24,40,.06);
  --shadow-soft:0 1px 2px rgba(16,24,40,.08);
  --scrim:rgba(16,24,40,.40);
}

/* 선 아이콘 한 벌 — <svg class="i"><use href="/icons.svg#i-이름"/></svg> */
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
svg.i.sm{width:16px;height:16px}
svg.i.xs{width:14px;height:14px}

/* 이름마다 정해지는 옅은 얼굴색 여덟 벌 — theme.js 의 tintOf(이름) 이 t1~t8 을 고른다 */
.t1{background:#E6EEFA!important;color:#1D4C92!important}
.t2{background:#E3F3EA!important;color:#1A6A45!important}
.t3{background:#FBEEDF!important;color:#94500F!important}
.t4{background:#F0EAF9!important;color:#5A3791!important}
.t5{background:#FBE8EC!important;color:#9A2D46!important}
.t6{background:#E2F2F4!important;color:#1B6670!important}
.t7{background:#F0EFE6!important;color:#5B5936!important}
.t8{background:#ECEFF4!important;color:#3E4A5E!important}

/* 화면 안 알림 — 브라우저 경고창(alert) 대신 쓴다. theme.js 의 notice() */
.sk-notice-box{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:900;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 20px));pointer-events:none}
.sk-notice{pointer-events:auto;display:flex;gap:12px;padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-pop);color:var(--ink);font-family:inherit}
.sk-notice.bad{border-color:var(--danger-line)}
.sk-notice.warn{border-color:var(--warn-line)}
.sk-notice .n-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--brand-tint);color:var(--brand)}
.sk-notice.bad .n-ic{background:var(--danger-tint);color:var(--danger)}
.sk-notice.warn .n-ic{background:var(--warn-tint);color:var(--warn)}
.sk-notice .n-tx{flex:1;min-width:0}
.sk-notice b{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px}
.sk-notice p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2);word-break:keep-all;overflow-wrap:anywhere}
.sk-notice .n-act{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sk-notice .n-act button{height:32px;padding:0 14px;border-radius:9px;font-size:13px;font-weight:650;border:0;cursor:pointer;font-family:inherit}
.sk-notice .n-act .primary{background:var(--brand);color:var(--brand-ink)}
.sk-notice .n-act .plain{background:var(--canvas);color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){.sk-notice{animation:skNoticeIn .22s ease-out}}
@keyframes skNoticeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 회사색 테마 스와치 — 설정 → 회사 브랜딩에서 원클릭으로 고른다 */
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.swatch{width:32px;height:32px;border-radius:9px;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line);cursor:pointer;flex:none;padding:0;position:relative}
.swatch:hover{box-shadow:0 0 0 1px var(--ink-3)}
.swatch.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.swatch.on::after{content:'';position:absolute;left:50%;top:47%;width:6px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translate(-50%,-50%) rotate(45deg)}