/* ⭐고객지원 채팅 (2026-09-28, 컨셉 B+) — 회원 창(.sdk-*) · 대화 스레드(.spt-*) · 운영자 콘솔(.sco-*) · 사이드바 입구(.sup-launch-*)
   A-4 액센트형(차콜 — 색은 테마 토큰). ⚠폼 컨트롤은 배경·글자색을 함께 지정(규칙 10 — 브라우저 강제 다크 대응). */
:root {
  /* 색 = 테마 토큰(라이트/다크 자동). 차콜 축: 글자·테두리 = accent, 흰 글자가 올라가는 채움 = head-bg(-cs) */
  --sdk-c: var(--ord-accent); --sdk-ch: var(--ord-accent-strong); --sdk-cs: var(--ord-head-bg);
  --sdk-csh: color-mix(in srgb, var(--ord-head-bg) 85%, var(--ord-text) 15%);
  --sdk-cl: var(--ord-band); --sdk-cb: var(--ord-line-2); --sdk-cb2: var(--ord-line);
  --sdk-row: var(--ord-accent-soft); --sdk-hov: var(--ord-surface-2); --sdk-bg: var(--ord-surface-2);
  --sdk-t1: var(--ord-text); --sdk-t2: var(--ord-text-2); --sdk-t3: var(--ord-text-3); --sdk-t4: var(--ord-text-4);
}

/* ── 회원 창 ───────────────────────────────────── */
.sdk { display: flex; flex-direction: column; height: 100%; min-height: 420px; background: var(--sdk-bg); color: var(--sdk-t2); font-size: 13px; }
.sdk-loading, .sdk-empty { padding: 36px 16px; text-align: center; color: var(--sdk-t4); font-size: 12.5px; line-height: 1.7; }
.sdk-band { padding: 14px 16px 12px; background: linear-gradient(180deg, var(--ord-band), var(--ord-panel)); border-bottom: 1px solid var(--sdk-cb2); }
.sdk-band h4 { margin: 0; font-size: 15px; color: var(--sdk-t1); padding-left: 10px; border-left: 4px solid var(--sdk-c); line-height: 1.25; }
.sdk-band p { margin: 6px 0 0; font-size: 12px; color: var(--sdk-t3); }
.sdk-status { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; color: var(--sdk-t3); }
.sdk-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ord-solid-green); box-shadow: 0 0 0 3px var(--ord-tint-green-line); }
.sdk-status.is-off i { background: var(--ord-solid-amber); box-shadow: 0 0 0 3px var(--ord-tint-amber-line); }
.sdk-status b { color: var(--sdk-t1); }
.sdk-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sdk-sec { font-size: 11.5px; font-weight: 800; color: var(--sdk-t4); margin: 4px 2px -2px; }
.sdk-card { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: var(--ord-panel); color: var(--sdk-t2);
  border: 1px solid var(--sdk-cb2); border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; }
.sdk-card:hover { border-color: var(--sdk-cb); background: var(--sdk-hov); }
.sdk-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sdk-card-tp { font-weight: 800; color: var(--sdk-t1); font-size: 13px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.sdk-card-lm { font-size: 12px; color: var(--sdk-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdk-card-rt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--sdk-t4); white-space: nowrap; }
.sdk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--sdk-cl); color: var(--sdk-c); border: 1px solid var(--sdk-cb2); white-space: nowrap; }
.sdk-tag.is-nows { background: var(--ord-band); color: var(--ord-text-3); border-color: var(--ord-line); }
.sdk-tag.is-out { background: var(--ord-tint-green-bg); color: var(--ord-tint-cyan-fg); border-color: var(--ord-tint-cyan-line); }
.sdk-tag.is-ticket { background: var(--ord-tint-blue-bg); color: var(--ord-tint-blue-fg); border-color: var(--ord-tint-blue-line); }
.sdk-tag.is-new { background: var(--ord-tint-red-bg); color: var(--ord-tint-red-fg); border-color: var(--ord-tint-red-line); }
.sdk-st { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sdk-st.is-waiting { background: var(--ord-tint-red-bg); color: var(--ord-tint-red-fg); }
.sdk-st.is-active { background: var(--ord-tint-blue-bg); color: var(--ord-tint-blue-fg); }
.sdk-st.is-awaiting_member { background: var(--ord-tint-green-bg); color: var(--ord-tint-cyan-fg); }
.sdk-st.is-resolved, .sdk-st.is-closed { background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); }
.sdk-foot { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--ord-panel); border-top: 1px solid var(--sdk-cb2); }
.sdk-btn-p { border: 0; border-radius: 22px; background: var(--sdk-cs); color: var(--ord-on-solid); font-weight: 800; font-size: 13px; padding: 10px 16px;
  cursor: pointer; box-shadow: 0 4px 10px rgba(62, 97, 135, .25); }
.sdk-btn-p:hover { background: var(--sdk-csh); }
.sdk-btn-p:disabled { background: var(--ord-line-2); box-shadow: none; cursor: default; }
.sdk-btn-o { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--sdk-cb); border-radius: 22px; background: var(--ord-panel); color: var(--sdk-c);
  font-size: 12px; font-weight: 700; padding: 5px 12px; cursor: pointer; }
.sdk-link { text-align: center; font-size: 12px; color: var(--sdk-c); font-weight: 700; text-decoration: none; }
.sdk-link:hover { text-decoration: underline; }
.sdk-head { flex: none; display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: linear-gradient(180deg, var(--ord-band), var(--ord-panel));
  border-bottom: 1px solid var(--sdk-cb2); font-size: 13px; color: var(--sdk-t1); }
.sdk-head-rt { margin-left: auto; }
.sdk-back { border: 0; background: transparent; color: var(--sdk-c); font-size: 20px; font-weight: 800; line-height: 1; padding: 0 4px; cursor: pointer; }
.sdk-step { background: var(--ord-panel); border: 1px solid var(--sdk-cb2); border-radius: 12px; padding: 11px 12px; }
.sdk-step h5 { margin: 0 0 8px; font-size: 12.5px; color: var(--sdk-c); display: flex; gap: 6px; align-items: center; }
.sdk-step h5 i { width: 18px; height: 18px; border-radius: 50%; background: var(--sdk-cs); color: var(--ord-on-solid); font-style: normal; font-size: 10.5px;
  display: inline-flex; align-items: center; justify-content: center; }
.sdk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sdk-chip { border: 1px solid var(--sdk-cb); background: var(--ord-panel); color: var(--sdk-t2); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.sdk-chip small { opacity: .75; font-weight: 500; }
.sdk-chip.is-on { background: var(--sdk-cs); border-color: var(--sdk-cs); color: var(--ord-on-solid); }
.sdk-hint { font-size: 11.5px; color: var(--sdk-t4); line-height: 1.6; margin: 6px 0 0; }
.sdk-input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--sdk-cb); border-radius: 12px; background: var(--ord-surface); color: var(--sdk-t1);
  padding: 9px 11px; font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; outline: 0; }
.sdk-input:focus { border-color: var(--sdk-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ord-accent) 13%, transparent); background: var(--ord-panel); }
.sdk-attach-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sdk-attach-row .sdk-hint { margin: 0; }
.sdk-files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sdk-preview { background: var(--sdk-cl); border: 1px dashed var(--sdk-cb); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--sdk-t2); line-height: 1.7; }
.sdk-preview b { color: var(--sdk-c); }
.sdk-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sdk-awaybar { padding: 8px 12px; background: var(--ord-tint-amber-bg); border-bottom: 1px solid var(--ord-tint-amber-line); font-size: 12px; color: var(--ord-tint-amber-fg); line-height: 1.55; }
.sdk-ticketbar { padding: 8px 12px; background: var(--ord-tint-blue-bg); border-top: 1px solid var(--ord-tint-blue-line); font-size: 12px; color: var(--ord-tint-blue-fg); }
.sdk-rate { padding: 10px 12px; background: var(--ord-tint-green-bg); border-top: 1px solid var(--ord-tint-green-line); font-size: 12px; color: var(--ord-tint-green-fg); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sdk-rate button { border: 1px solid var(--ord-tint-green-line); background: var(--ord-panel); color: var(--ord-tint-green-fg); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.sdk-rate button.is-on { background: var(--ord-solid-green); color: var(--ord-on-solid); border-color: var(--ord-tint-green-fg); }
.sdk-rate .sdk-hint { width: 100%; margin: 0; }
.sdk-comp { flex: none; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; background: var(--ord-panel); border-top: 1px solid var(--sdk-cb2); }
.sdk-comp .sdk-input { resize: none; min-height: 40px; max-height: 120px; }
.sdk-attach { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--sdk-cb); background: var(--ord-panel); color: var(--sdk-c);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; }
.sdk-send { flex: none; height: 40px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--sdk-cs); color: var(--ord-on-solid); font-weight: 800; font-size: 13px; cursor: pointer; }
.sdk-send:hover { background: var(--sdk-csh); }

/* ── 대화 스레드 (회원·운영자 공용) ─────────────────── */
.spt-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--sdk-bg); }
.spt-empty { margin: auto; color: var(--sdk-t4); font-size: 12.5px; }
.spt-sys { align-self: center; max-width: 92%; text-align: center; font-size: 11.5px; color: var(--sdk-t3); background: var(--ord-band); border-radius: 999px; padding: 3px 12px; line-height: 1.5; }
.spt-row { display: flex; flex-direction: column; max-width: 84%; }
.spt-row.is-mine { align-self: flex-end; align-items: flex-end; }
.spt-row.is-theirs { align-self: flex-start; }
.spt-who { font-size: 11px; font-weight: 700; color: var(--sdk-t3); margin: 0 0 2px 2px; }
.spt-line { display: flex; align-items: flex-end; gap: 6px; }
.spt-row.is-mine .spt-line { flex-direction: row-reverse; }
.spt-bub { padding: 8px 11px; border-radius: 14px; font-size: 13px; line-height: 1.55; word-break: break-word; }
.spt-row.is-theirs .spt-bub { background: var(--ord-panel); color: var(--sdk-t1); border: 1px solid var(--sdk-cb2); border-bottom-left-radius: 4px; }
.spt-row.is-mine .spt-bub { background: var(--sdk-cs); color: var(--ord-on-solid); border-bottom-right-radius: 4px; }
.spt-row.is-mine .spt-bub a { color: var(--ord-on-solid); }
.spt-text { white-space: pre-wrap; }
.spt-meta { font-size: 10.5px; color: var(--sdk-t4); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.spt-read { color: var(--sdk-c); font-weight: 700; }
.spt-deleted { font-style: normal; opacity: .7; }
.spt-img img { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; }
.spt-file { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .18); font-size: 12px; font-weight: 700; color: inherit; text-decoration: none; }
.spt-row.is-theirs .spt-file { background: var(--sdk-cl); color: var(--sdk-c); }
.spt-file.is-expired { opacity: .7; }
.spt-row.is-pending { opacity: .75; }

/* ── 사이드바 입구 ──────────────────────────────── */
.sup-launch-badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--ord-badge); color: var(--ord-on-solid); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; }
.sidebar-primary-action.support { position: relative; }
/* 하단 묶음 맨 위 고객지원 입구 아래 구분선 */
.sup-launch-sep { display: block; width: 60%; height: 1px; margin: 5px auto; background: var(--ord-line); }
body.shell-d .sup-launch-sep { background: var(--shd-line, var(--ord-line)); }
.sup-launch-badge[hidden] { display: none; }
.m-drawer-act.sup-launch { position: relative; }
.m-drawer-act.sup-launch .sup-launch-badge { top: -2px; right: -2px; }

/* ── 운영자 콘솔 — «A 메신저형» (2026-09-28, 샘플 sample/support-console/a.html) ──
   넓으면 목록 | 대화 | 정보(ⓘ 접기) · 좁으면(≤760px, 컨테이너 쿼리) 화면 쌓기: 목록 → 대화, 정보·처리 = 바텀시트.
   상태 클래스(.sco-body): has-sel(대화 선택) · is-empty(선택 전 — 정보 칸 숨김) · is-info-off(PC 정보 접음) */
.sco { display: flex; flex-direction: column; height: 100%; min-height: 480px; background: var(--sdk-bg); color: var(--sdk-t2); font-size: 13px; container-type: inline-size; }
.sco-body { flex: 1; min-height: 0; display: flex; position: relative; }
/* 목록 */
.sco-list { width: 340px; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--ord-panel); border-right: 1px solid var(--sdk-cb2); }
.sco-list-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; }
.sco-away { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sdk-cb); border-radius: 999px; background: var(--ord-panel); color: var(--sdk-t1);
  padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sco-away i { width: 8px; height: 8px; border-radius: 50%; background: var(--ord-solid-green); }
.sco-away.is-off i { background: var(--ord-solid-amber); }
.sco-avg { font-size: 11px; color: var(--sdk-t4); white-space: nowrap; }
.sco-new { margin-left: auto; border: 0; border-radius: 22px; background: var(--sdk-cs); color: var(--ord-on-solid); font-weight: 800; font-size: 12px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.sco-new:hover { background: var(--sdk-csh); }
/* PC = 줄바꿈(5개 전부 보임) — 마우스는 숨긴 가로 스크롤을 드래그로 못 넘긴다(9/28 사용자 보고). 모바일(≤760px)만 한 줄 가로 스크롤(손가락). */
.sco-chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
.sco-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sdk-cb); background: var(--ord-panel); color: var(--sdk-t2);
  border-radius: 999px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sco-chip b { min-width: 18px; height: 18px; border-radius: 9px; background: var(--ord-band); color: var(--sdk-c); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.sco-chip.is-alert b { background: var(--ord-tint-red-bg); color: var(--ord-tint-red-fg); }
.sco-chip.is-on { background: var(--sdk-cs); border-color: var(--sdk-cs); color: var(--ord-on-solid); }
.sco-chip.is-on b { background: rgba(255, 255, 255, .22); color: var(--ord-on-solid); }
.sco-search { flex: none; padding: 0 12px 10px; border-bottom: 1px solid var(--ord-line-soft); }
.sco-search .sdk-input { padding: 7px 11px; }
.sco-items { flex: 1; min-height: 0; overflow-y: auto; }
.sco-it { display: flex; gap: 10px; width: 100%; text-align: left; font: inherit; background: var(--ord-panel); color: var(--sdk-t2); border: 0; border-bottom: 1px solid var(--ord-line-soft);
  padding: 11px 12px; cursor: pointer; align-items: flex-start; }
.sco-it:hover { background: var(--sdk-hov); }
.sco-it.is-on { background: var(--sdk-row); box-shadow: inset 3px 0 0 var(--sdk-c); }
.sco-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--sdk-cs), var(--ord-solid-blue)); color: var(--ord-on-solid); font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative; }
.sco-av.is-sm { width: 30px; height: 30px; font-size: 12px; }
.sco-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ord-badge); border: 2px solid var(--ord-panel); }
.sco-it-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sco-it-l1 { display: flex; align-items: center; gap: 6px; }
.sco-it-l1 b { font-size: 13.5px; color: var(--sdk-t1); }
.sco-it-t { margin-left: auto; font-size: 11px; color: var(--sdk-t4); font-weight: 700; white-space: nowrap; }
.sco-it-t.is-warn { color: var(--ord-tint-amber-fg); }
.sco-it-t.is-late { color: var(--ord-tint-red-fg); }
.sco-it-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.sco-it-lm { font-size: 12px; color: var(--sdk-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sco-it-eye { font-size: 11px; color: var(--ord-tint-violet-fg); font-weight: 700; }
.sdk-tag.is-agent { background: var(--ord-tint-violet-bg); color: var(--ord-tint-violet-fg); border-color: var(--ord-tint-indigo-line); }
/* 대화 */
.sco-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.sco-ch { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--ord-panel); border-bottom: 1px solid var(--sdk-cb2); }
.sco-back { display: none; border: 0; background: transparent; color: var(--sdk-c); font-size: 24px; font-weight: 800; line-height: 1; padding: 0 2px 0 0; cursor: pointer; }
.sco-ch-nm { display: flex; flex-direction: column; min-width: 0; }
.sco-ch-nm b { font-size: 14px; color: var(--sdk-t1); display: flex; gap: 6px; align-items: center; }
.sco-ch-nm > span { font-size: 11.5px; color: var(--sdk-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sco-ch-rt { margin-left: auto; display: flex; gap: 4px; align-items: center; flex: none; }
.sco-hb { border: 1px solid var(--sdk-cb2); background: var(--ord-panel); color: var(--sdk-t2); height: 32px; min-width: 32px; border-radius: 9px; font-size: 12.5px; font-weight: 700; padding: 0 9px; cursor: pointer; }
.sco-hb:hover { border-color: var(--sdk-c); color: var(--sdk-c); }
.sco-hb.is-on { background: var(--sdk-cl); border-color: var(--sdk-cb); color: var(--sdk-c); }
.sco-hb.is-ok { color: var(--ord-tint-green-fg); border-color: var(--ord-tint-green-line); }
.sco-hb.is-more { display: none; }
.sco-chat .spt-msgs { background: var(--ord-band); }
.sco-chat .spt-row.is-theirs .spt-bub { border-color: transparent; }
/* 입력 — 일반 채팅 문법(한 줄 입력 + 아래 줄 📎·⚡ | 전송) */
.sco-comp { flex: none; background: var(--ord-panel); border-top: 1px solid var(--sdk-cb2); padding: 10px 12px; }
.sco-comp textarea { display: block; width: 100%; box-sizing: border-box; border: 0; outline: 0; resize: none; background: var(--ord-panel); color: var(--sdk-t1);
  font: inherit; font-size: 13.5px; line-height: 1.5; min-height: 24px; max-height: 120px; padding: 2px 2px 8px; }
.sco-comp textarea:disabled { background: var(--ord-panel); color: var(--sdk-t4); }
.sco-comp-bar { display: flex; align-items: center; gap: 4px; }
.sco-sp { flex: 1; }
.sco-ci { border: 0; background: transparent; color: var(--sdk-t3); width: 34px; height: 34px; border-radius: 8px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sco-ci:hover { background: var(--sdk-hov); color: var(--sdk-c); }
.sco-send { border: 0; border-radius: 10px; background: var(--sdk-cs); color: var(--ord-on-solid); font-weight: 800; font-size: 13px; padding: 8px 18px; cursor: pointer; }
.sco-send:hover { background: var(--sdk-csh); }
.sco-send:disabled { background: var(--ord-line-2); cursor: default; }
.sco-macros { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
.sco-macros[hidden] { display: none; }
.sco-macros button { border: 1px solid var(--sdk-cb); background: var(--ord-panel); color: var(--sdk-t2); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
.sco-macros button:hover { border-color: var(--sdk-c); color: var(--sdk-c); }
.sco-lock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; padding: 8px 10px; background: var(--ord-tint-violet-bg); border: 1px solid var(--ord-tint-indigo-line); border-radius: 10px; font-size: 12px; color: var(--ord-tint-violet-fg); }
.sco-lock .sdk-btn-o { margin-left: auto; }
.sco-empty { margin: auto; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: var(--ord-panel); border: 1px solid var(--sdk-cb2); border-radius: 14px; padding: 22px 20px; }
.sco-empty b { font-size: 15px; color: var(--sdk-t1); }
.sco-empty p { margin: 0; font-size: 12.5px; color: var(--sdk-t3); line-height: 1.6; }
.sco-empty .sdk-btn-p, .sco-empty .sdk-btn-o { width: 100%; justify-content: center; }
/* 정보 */
.sco-info { width: 300px; flex: none; border-left: 1px solid var(--sdk-cb2); background: var(--sdk-bg); overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.sco-body.is-empty .sco-info, .sco-body.is-info-off .sco-info { display: none; }
.sco-card { background: var(--ord-panel); border: 1px solid var(--sdk-cb2); border-radius: 12px; overflow: hidden; flex: none; }
.sco-band { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--sdk-cl); border-bottom: 1px solid var(--sdk-cb2); font-size: 12px; font-weight: 700; color: var(--sdk-c); }
.sco-band small { margin-left: auto; font-weight: 500; color: var(--sdk-t3); font-size: 11px; }
.sco-kv { display: grid; grid-template-columns: 76px 1fr; gap: 6px 8px; margin: 0; padding: 10px 12px; font-size: 12px; }
.sco-kv dt { color: var(--sdk-t4); font-weight: 600; }
.sco-kv dd { margin: 0; color: var(--sdk-t1); font-weight: 600; word-break: break-all; }
.sco-acts { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.sco-acts .sdk-hint { margin: 0; }
.sco-select { padding: 7px 10px; }
.sdk-btn-o.is-ok { border-color: var(--ord-tint-green-line); color: var(--ord-tint-green-fg); }
.sdk-btn-o:disabled { opacity: .6; cursor: default; }
.sco-note { margin: 0; padding: 10px 12px; font-size: 12px; color: var(--sdk-t3); line-height: 1.6; }
.sco-acts .sco-note { padding: 0; }
.sco-hist { display: flex; flex-direction: column; padding: 4px 0; }
.sco-hist button { display: flex; justify-content: space-between; gap: 8px; border: 0; background: var(--ord-panel); color: var(--sdk-t2); font: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer; text-align: left; }
.sco-hist button:hover { background: var(--sdk-hov); }
.sco-hist em { font-style: normal; color: var(--sdk-t4); white-space: nowrap; }
/* 바텀시트 (모바일 ⓘ·⋯) */
.sco-sheet[hidden] { display: none; }
.sco-sheet-back { position: absolute; inset: 0; z-index: 20; background: rgba(15, 23, 42, .38); display: flex; align-items: flex-end; }
.sco-sheet-panel { width: 100%; max-height: 82%; background: var(--sdk-bg); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.sco-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--ord-line-2); margin: 8px auto 4px; }
.sco-sheet-hd { display: flex; align-items: center; padding: 4px 14px 10px; font-weight: 800; color: var(--sdk-t1); font-size: 14px; }
.sco-sheet-hd .sdk-btn-o { margin-left: auto; }
.sco-sheet-bd { overflow-y: auto; padding: 0 12px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.sco-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid var(--ord-line-soft); background: var(--ord-panel); color: var(--sdk-t1);
  padding: 13px 14px; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.sco-menu button:last-child { border-bottom: 0; }
.sco-menu button small { margin-left: auto; color: var(--sdk-t4); font-weight: 500; font-size: 11.5px; }
.sco-menu button:disabled { color: var(--sdk-t4); cursor: default; }
/* 중간 폭 — 정보 칸 좁게 */
@container (max-width: 1100px) {
  .sco-list { width: 300px; }
  .sco-info { width: 260px; }
}
/* 좁은 폭(모바일) — 화면 쌓기. 정보 칸 대신 시트, 머리 버튼은 ⓘ·⋯ 만 */
@container (max-width: 760px) {
  .sco-list { width: 100%; border-right: 0; }
  .sco-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sco-chips::-webkit-scrollbar { display: none; }
  .sco-body.has-sel .sco-list { display: none; }
  .sco-body:not(.has-sel) .sco-chat { display: none; }
  .sco-info { display: none !important; }
  .sco-back { display: inline-block; }
  .sco-hb.is-wide { display: none; }
  .sco-hb.is-more { display: inline-block; }
  .sco-comp { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ── 먼저 연락: 대상 선택 ───────────────────────── */
.sot { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--sdk-bg); color: var(--sdk-t2); font-size: 13px; }
.sot-pane { display: flex; flex-direction: column; gap: 8px; }
.sot-pane[hidden], .sot-warn[hidden] { display: none; }
.sot-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.sot-list { background: var(--ord-panel); border: 1px solid var(--sdk-cb2); border-radius: 12px; max-height: 280px; overflow-y: auto; }
.sot-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--ord-line-soft); font-size: 13px; cursor: pointer; flex-wrap: wrap; }
.sot-row:last-child { border-bottom: 0; }
.sot-row.is-dis { opacity: .5; cursor: not-allowed; }
.sot-row b { color: var(--sdk-t1); }
.sot-sub { font-size: 11.5px; color: var(--sdk-t3); }
.sot-why { margin-left: auto; font-size: 11.5px; color: var(--sdk-t4); }
.sot-ctx { width: auto; padding: 3px 6px; font-size: 12px; border-radius: 8px; }
.sot-warn { background: var(--ord-tint-amber-bg); border: 1px solid var(--ord-tint-amber-line); color: var(--ord-tint-amber-fg); border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.6; }
.sot-cont { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sdk-t2); }
.sot-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.sot-count { margin-right: auto; font-size: 12.5px; }
.sot-count b { color: var(--sdk-c); }