:root {
      --bg-main: #f8fafc;
      --bg-card: #ffffff;
      --border-color: #cbd5e1;
      --border-light: #e2e8f0;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --primary: #2563eb;
      --primary-hover: #1d4ed8;
      --indigo: #4f46e5;
      --slate-dark: #475569;
      --genesys-orange: #ff4f1f;
      --genesys-bg: #fff7ed;
      --genesys-border: #ffedd5;
      --danger: #ef4444;
      --warning: #f59e0b;
      --success: #10b981;
      /* stacking — docs/ui-layers.md (Admin과 동일 스케일) */
      --z-local: 1;
      --z-local-raised: 2;
      --z-popover: 100;
      --z-scrim: 150;
      --z-header: 200;
      --z-nav: 300;
      --z-float: 900;
      --z-modal: 1000;
      --z-modal-pop: 1100;
      --z-toast: 2000;
      --z-auth: 3000;
      --z-auth-dialog: 3100;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: var(--bg-main);
      color: var(--text-main);
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    header {
      height: 52px; background-color: #0f172a; color: #fff;
      display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0; gap: 12px;
    }
    .header-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .nav-switcher { display: flex; background: #1e293b; border-radius: 4px; padding: 2px; gap: 2px; flex-shrink: 0; }
    .nav-btn {
      padding: 5px 12px; font-size: 11px; font-weight: 600; color: #94a3b8;
      background: transparent; border: none; border-radius: 3px; cursor: pointer; white-space: nowrap;
    }
    .nav-btn.active { background: var(--primary); color: #fff; }

    .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

    .noti-btn {
      position: relative; background: #1e293b; border: 1px solid #334155; border-radius: 4px;
      color: #fff; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 14px; flex-shrink: 0;
    }
    .noti-badge {
      position: absolute; top: -3px; right: -3px; background: var(--danger); color: #fff;
      font-size: 9px; font-weight: 800; border-radius: 10px; padding: 1px 4px;
    }

    .btn-create-case {
      background-color: #0284c7; color: #fff; border: none; padding: 0 10px;
      border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; height: 32px; white-space: nowrap; flex-shrink: 0;
    }
    .btn-create-contact {
      background-color: #0f766e; color: #fff; border: none; padding: 0 10px;
      border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; height: 32px; white-space: nowrap; flex-shrink: 0;
    }

    /* 자동배정 스위치 — 상태(ON/OFF)가 트랙·색·라벨로 동시에 보이게 */
    .aa-control {
      display: inline-flex; align-items: center; gap: 8px;
      height: 32px; padding: 0 8px 0 10px;
      border: 1px solid #334155; border-radius: 6px; background: #1e293b;
      flex-shrink: 0;
    }
    .btn-ws-logout {
      background: transparent; border: 1px solid #475569; color: #e2e8f0;
      height: 32px; padding: 0 10px; border-radius: 4px; font-size: 11px; font-weight: 600;
      cursor: pointer; flex-shrink: 0;
    }
    .btn-ws-logout:hover { background: #1e293b; }
    .agent-chrome-btn {
      display: inline-flex; position: relative; background: #1e293b; border: 1px solid #334155; border-radius: 4px;
      color: #fff; width: 32px; height: 32px; align-items: center; justify-content: center;
      cursor: pointer; font-size: 14px; flex-shrink: 0;
    }
    .agent-chrome-panel {
      display: none; position: absolute; top: 48px; right: 12px; width: min(280px, calc(100vw - 24px));
      background: #fff; border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border-radius: 6px; z-index: var(--z-float); padding: 10px; flex-direction: column; gap: 10px;
    }
    .agent-chrome-panel.open { display: flex; }
    .agent-chrome-who {
      padding: 6px 4px 10px; border-bottom: 1px solid #e2e8f0; margin-bottom: 2px;
    }
    .agent-chrome-who-label { font-size: 10px; font-weight: 700; color: #64748b; margin-bottom: 2px; }
    .agent-chrome-who-name { font-size: 13px; font-weight: 800; color: #0f172a; word-break: break-word; }
    .agent-chrome-who-email { font-size: 11px; font-weight: 600; color: #475569; margin-top: 2px; word-break: break-all; }
    .agent-chrome-panel .aa-control {
      width: 100%; height: auto; min-height: 36px; justify-content: space-between;
      background: #0f172a; border-color: #334155;
    }
    .agent-chrome-panel .btn-ws-logout {
      width: 100%; height: 34px; border-color: #cbd5e1; color: #334155; background: #f8fafc;
    }
    .agent-chrome-panel .btn-ws-logout:hover { background: #f1f5f9; color: #0f172a; }
    .agent-chrome-hint {
      font-size: 10px; color: #64748b; line-height: 1.4; font-weight: 500;
    }
    .agent-chrome-aa-block { display: none; flex-direction: column; gap: 8px; }
    body.chrome-compact .agent-chrome-aa-block { display: flex; }
    .ws-logout-gate {
      position: fixed; inset: 0; z-index: var(--z-auth); background: rgba(15, 23, 42, 0.72);
      display: none; align-items: center; justify-content: center; padding: 24px;
    }
    .ws-logout-gate.show { display: flex; }
    .ws-logout-card {
      background: #fff; border-radius: 8px; padding: 22px 24px; max-width: 420px; width: 100%;
      box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    }
    .ws-logout-card h2 { font-size: 16px; font-weight: 800; margin-bottom: 8px; color: #0f172a; }
    .ws-logout-card p { font-size: 12px; color: #64748b; line-height: 1.5; margin-bottom: 16px; }
    .ws-logout-card .btn-primary {
      background: #2563eb; color: #fff; border: none; height: 36px; padding: 0 14px;
      border-radius: 4px; font-size: 13px; font-weight: 700; cursor: pointer; width: 100%;
    }
    .ws-login-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
    .ws-login-form label { font-size: 11px; font-weight: 700; color: #334155; margin-top: 4px; }
    .ws-login-form select,
    .ws-login-form input {
      height: 34px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 4px;
      font-size: 12px; color: #0f172a; background: #fff; box-sizing: border-box;
    }
    .ws-logout-card .ws-login-hint { margin: 0; font-size: 11px; color: #64748b; line-height: 1.45; }
    .org-combo { position: relative; width: 100%; }
    .org-combo input { width: 100%; padding-right: 34px !important; }
    .org-combo-toggle {
      position: absolute; right: 2px; top: 3px; z-index: var(--z-local-raised);
      width: 28px; height: 28px; padding: 0; border: 0; background: transparent;
      color: #64748b; cursor: pointer; font-size: 12px; line-height: 1;
    }
    .org-combo-list {
      position: absolute; left: 0; right: 0; top: calc(34px + 4px); z-index: var(--z-popover);
      background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
      max-height: 180px; overflow: auto;
    }
    .org-combo-item { display: flex; align-items: center; gap: 4px; }
    .org-combo-item.is-active, .org-combo-item:hover { background: #eff6ff; }
    .org-combo-pick {
      flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 0; background: transparent;
      text-align: left; font-size: 13px; color: #0f172a; cursor: pointer;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .org-combo-del {
      flex: 0 0 auto; width: 32px; height: 32px; margin-right: 4px;
      border: 0; border-radius: 4px; background: transparent; color: #94a3b8;
      cursor: pointer; font-size: 16px; line-height: 1;
    }
    .org-combo-del:hover { background: #fee2e2; color: #b91c1c; }
    .secret-field { position: relative; display: block; width: 100%; }
    .secret-field input { width: 100%; padding-right: 34px !important; }
    .secret-eye {
      position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
      width: 28px; height: 28px; padding: 0; border: 0; background: transparent;
      color: #64748b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    }
    .secret-eye svg { width: 16px; height: 16px; display: block; }
    .secret-eye .eye-off { display: none; }
    .secret-eye.is-shown .eye-open { display: none; }
    .secret-eye.is-shown .eye-off { display: block; }
    .ws-login-error { color: #b91c1c; font-size: 11px; margin: 4px 0 0; }
    .btn-ws-sso {
      margin-top: 8px; width: 100%; height: 34px; border-radius: 4px; border: 1px solid #cbd5e1;
      background: #f8fafc; font-size: 12px; font-weight: 700; cursor: pointer; color: #0f172a;
    }
    .btn-ws-sso:hover { background: #f1f5f9; }
    .login-sso { margin-top: 2px; }
    .login-or {
      display: flex; align-items: center; gap: 10px; margin: 12px 0 8px;
      color: #94a3b8; font-size: 11px; font-weight: 700;
    }
    .login-or::before, .login-or::after {
      content: ""; flex: 1; height: 1px; background: #e2e8f0;
    }

    .aa-control .aa-label {
      font-size: 11px; font-weight: 700; color: #e2e8f0; white-space: nowrap;
    }
    .aa-switch {
      display: inline-flex; align-items: center; gap: 6px;
      border: none; background: transparent; padding: 0; cursor: pointer;
      touch-action: manipulation;
    }
    .aa-switch:disabled { opacity: 0.45; cursor: not-allowed; }
    .aa-track {
      position: relative; width: 36px; height: 20px; border-radius: 999px;
      background: #64748b; transition: background .15s ease; flex-shrink: 0;
    }
    .aa-knob {
      position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
      border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
      transition: transform .15s ease;
    }
    .aa-switch.is-on .aa-track { background: #16a34a; }
    .aa-switch.is-on .aa-knob { transform: translateX(16px); }
    .aa-switch.is-off .aa-track { background: #ea580c; }
    .aa-switch.is-off .aa-knob { transform: translateX(0); }
    .aa-text {
      min-width: 26px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
    }
    .aa-switch.is-on .aa-text { color: #86efac; }
    .aa-switch.is-off .aa-text { color: #fdba74; }

    /* Genesys Widget / embed: 좁은 크롬 — 헤더 자동배정 숨김(설정 메뉴로) */
    body.chrome-compact .aa-control--bar { display: none !important; }
    body.chrome-compact header { padding: 0 8px; height: 48px; }
    body.chrome-compact .noti-btn, body.chrome-compact .agent-chrome-btn { width: 28px; height: 28px; font-size: 12px; }

    .view-container { display: flex; flex: 1; overflow: hidden; position: relative; }

    /* Left Pane */
    .list-pane {
      width: 350px; background-color: var(--bg-card); border-right: 1px solid var(--border-light);
      display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; overflow: hidden;
    }
    .tabs {
      display: flex; border-bottom: 1px solid var(--border-light); background-color: #fafafa;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .tab-btn {
      flex: 1; min-width: 55px; padding: 12px 2px; font-size: 11px; font-weight: 600; color: var(--text-muted);
      border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; text-align: center; white-space: nowrap;
    }
    .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background-color: #fff; }
    
    .list-filter-bar {
      padding: 8px 10px; border-bottom: 1px solid var(--border-light); background: #fff;
      display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
    }
    .list-filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .list-filter-bar select, .list-filter-bar input {
      flex: 1; min-width: 90px; font-size: 11px; padding: 5px 6px;
      border: 1px solid var(--border-color); border-radius: 4px; outline: none; background: #fff;
    }
    .list-header {
      padding: 8px 14px; font-size: 11px; color: var(--text-muted); display: flex;
      justify-content: space-between; border-bottom: 1px solid var(--border-light); background: #fff;
    }
    .list-load-more {
      margin: 10px 12px 14px; padding: 10px 12px; width: calc(100% - 24px);
      border: 1px dashed var(--border-color); border-radius: 6px;
      background: #f8fafc; color: #334155; font-size: 11px; font-weight: 700;
      cursor: pointer;
    }
    .list-load-more:hover { background: #eff6ff; border-color: #93c5fd; color: var(--primary); }
    .list-load-more:disabled { opacity: 0.5; cursor: default; }
    .item-list {
      flex: 1; min-height: 0; overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .list-item { padding: 10px 14px; border-bottom: 1px solid var(--border-light); cursor: pointer; position: relative; }
    .list-item:hover { background-color: #f8fafc; }
    .list-item.selected { background-color: #eff6ff; border-left: 4px solid var(--primary); }

    .list-item.closed-unresolved {
      background: #f8fafc;
      opacity: 0.72;
      filter: grayscale(0.35);
    }
    .list-item.closed-unresolved:hover { background: #f1f5f9; }
    .list-item.closed-unresolved.selected {
      background: #e2e8f0;
      border-left: 4px solid #94a3b8;
      opacity: 0.9;
      filter: grayscale(0.15);
    }
    .list-item.closed-unresolved .list-item-title { color: #64748b !important; }
    .contact-case-item.closed-unresolved {
      background: #f8fafc;
      opacity: 0.72;
      filter: grayscale(0.35);
    }
    .contact-case-item.closed-unresolved.selected {
      background: #e2e8f0;
      border-left-color: #94a3b8;
      opacity: 0.9;
    }

    .app-toast-host {
      position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
      z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; align-items: center;
      pointer-events: none; width: min(420px, calc(100% - 24px));
    }
    .app-toast {
      pointer-events: auto; width: 100%; padding: 8px 12px; border-radius: 6px;
      font-size: 11px; font-weight: 600; line-height: 1.45; color: #0f172a;
      background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 8px 24px rgba(15,23,42,0.16);
      white-space: pre-wrap;
    }
    .app-toast.info { border-left: 4px solid #2563eb; }
    .app-toast.success { border-left: 4px solid #16a34a; background: #f0fdf4; }
    .app-toast.warn { border-left: 4px solid #d97706; background: #fffbeb; }
    .app-toast.error { border-left: 4px solid #dc2626; background: #fef2f2; }

    .star-toggle-btn {
      background: none; border: none; font-size: 15px; cursor: pointer; color: #cbd5e1; padding: 0 4px; line-height: 1;
    }
    .star-toggle-btn.starred { color: #f59e0b; }

    /* Right Detail Pane */
    .detail-pane { flex: 1; display: flex; flex-direction: column; background-color: #fff; overflow: hidden; height: 100%; }
    
    .domain-split-wrapper {
      padding: 10px 14px; border-bottom: 1px solid var(--border-light); background: #fff;
      display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
    }
    .case-domain-card {
      background: #ffffff; border: 1px solid var(--border-light); border-radius: 4px; padding: 8px 10px;
    }
    .contact-domain-card {
      background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 4px; padding: 8px 10px;
    }
    .case-title-row {
      display: flex; flex-direction: column; align-items: stretch; margin-bottom: 6px; gap: 6px;
    }
    .case-title-toolbar {
      display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .case-title-main {
      display: flex; align-items: flex-start; gap: 6px; min-width: 0; width: 100%;
    }
    .case-title {
      font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.35;
      white-space: normal; word-break: break-word; flex: 1; min-width: 0;
    }

    .btn-back {
      display: none; height: 28px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
      background: #f1f5f9; border: 1px solid var(--border-color); color: #334155; cursor: pointer; align-items: center; flex-shrink: 0;
    }
    .btn-back.btn-back-sm { height: 24px; padding: 0 6px; font-size: 10px; }
    .composer-sample-hint {
      display: none; margin: 0 0 6px; padding: 6px 8px; border-radius: 4px;
      background: #f8fafc; border: 1px dashed #cbd5e1; font-size: 10px; color: #64748b; line-height: 1.4; font-weight: 600;
    }
    .composer-sample-hint.is-on { display: block; }
    .attachment-chip.is-sample {
      cursor: default; opacity: 0.85;
    }
    .attachment-chip.is-sample:hover { filter: none; }

    .header-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .btn-action {
      height: 28px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
      cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid transparent; outline: none; white-space: nowrap;
    }
    .btn-action-primary { background-color: var(--primary); color: #fff; }
    .btn-action-indigo { background-color: var(--indigo); color: #fff; }
    .btn-action-amber { background-color: #d97706; color: #fff; }
    .btn-action-slate { background-color: #475569; color: #fff; }

    .case-meta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px 10px; }
    .contact-meta-grid, .profile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 10px; }

    .meta-field { font-size: 11px; line-height: 1.2; }
    .meta-label { font-size: 9px; color: var(--text-muted); font-weight: 600; margin-bottom: 1px; }
    .meta-val { font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Badges */
    .badge-prio-urgent { background-color: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
    .badge-prio-high { background-color: #ffedd5; color: #c2410c; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
    .badge-prio-mid { background-color: #e0e7ff; color: #3730a3; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
    .badge-prio-low { background-color: #f1f5f9; color: #475569; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }

    .badge-stage { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
    .stage-NEW { background-color: #fef3c7; color: #92400e; }
    .stage-ASSIGNED { background-color: #e0f2fe; color: #0369a1; }
    .stage-IN_PROGRESS { background-color: #dbeafe; color: #1d4ed8; }
    .stage-PENDING_CUSTOMER { background-color: #fae8ff; color: #86198f; }
    .stage-ESCALATED { background-color: #fee2e2; color: #991b1b; }
    .stage-RESOLVED { background-color: #dcfce7; color: #15803d; }
    .stage-CLOSED_UNRESOLVED { background-color: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
    
    .badge-sla-overdue { background-color: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 3px; }

    /* Detail Split */
    .detail-body-split { flex: 1; display: flex; overflow: hidden; background-color: var(--bg-main); position: relative; height: 100%; min-height: 0; }
    .timeline-container { 
      flex: 1; display: flex; flex-direction: column; 
      overflow: hidden;
      border-right: 1px solid var(--border-light); height: 100%; min-height: 0;
    }
    .timeline-scroll-area {
      flex: 1; overflow-y: auto; min-height: 0;
      -webkit-overflow-scrolling: touch;
    }
    .timeline-stream {
      padding: 12px 16px; display: flex; flex-direction: column; gap: 12px;
    }
    
    /* Timeline Cards */
    .timeline-card { border: 1px solid var(--border-light); border-radius: 4px; padding: 10px 12px; background-color: #fff; }
    .timeline-card.EMAIL_IN { border-left: 4px solid #2563eb; }
    .timeline-card.EMAIL_OUT { border-left: 4px solid #8b5cf6; background-color: #f8faff; }
    .timeline-card.CALL_LOG { border-left: 4px solid var(--genesys-orange); }
    .timeline-card.CHAT_LOG { border-left: 4px solid #0284c7; }
    .timeline-card.NOTE { border-left: 4px solid #64748b; background-color: #f1f5f9; }

    .card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 11px; flex-wrap: wrap; gap: 4px; }
    .channel-symbol { font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
    .actor-name { font-weight: 700; color: #1e293b; }
    .card-body { font-size: 12px; line-height: 1.5; color: #334155; white-space: pre-wrap; }
    .card-body:has(.mail-html-frame) { white-space: normal; }
    .mail-html-frame {
      width: 100%;
      min-height: 220px;
      max-height: 480px;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      background: #fff;
    }

    .btn-move-interaction {
      font-size: 10px; color: #64748b; background: transparent; border: 1px solid var(--border-light);
      padding: 2px 6px; border-radius: 3px; cursor: pointer; white-space: nowrap;
    }
    .btn-move-interaction:hover { background: #e2e8f0; color: #0f172a; }

    .email-header-meta {
      background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; font-size: 11px; display: flex; flex-direction: column; gap: 3px;
    }
    .email-subject { font-weight: 700; color: #0f172a; margin-bottom: 3px; font-size: 12px; line-height: 1.4; word-break: break-all; }
    .email-meta-line { display: flex; gap: 6px; flex-wrap: wrap; }
    .email-meta-line b { color: #64748b; min-width: 65px; font-weight: 600; }
    .rfc-header-sub { font-size: 10px; color: #94a3b8; font-family: monospace; }

    .attachment-wrapper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .attachment-chip {
      background: #e2e8f0; padding: 3px 8px; border-radius: 3px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; color: #334155;
    }
    .attachment-chip:hover { background: #cbd5e1; cursor: pointer; }

    .genesys-summary-box {
      margin-top: 6px; background: var(--genesys-bg); border: 1px solid var(--genesys-border);
      border-radius: 3px; padding: 4px 8px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px;
    }
    .genesys-link-btn {
      background: var(--genesys-orange); color: #fff; border: none; border-radius: 3px;
      padding: 3px 6px; font-size: 10px; font-weight: 600; cursor: pointer; text-decoration: none;
    }

    /* 작업 Execution Pipeline (우측 사이드바 원본) */
    .tasks-pane {
      width: 320px; background: #f8fafc; padding: 12px 14px; display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0; border-left: 1px solid var(--border-light); height: 100%;
    }
    .pane-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .pane-title { font-size: 11px; font-weight: 700; color: #334155; text-transform: uppercase; }

    .task-card {
      background: #fff; border: 1px solid var(--border-color); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 6px;
    }
    .task-card.active { border-left: 4px solid var(--primary); }
    .task-card.done { border-left: 4px solid var(--success); opacity: 0.8; background: #fafafa; }
    .task-card.canceled { border-left: 4px solid var(--slate-dark); opacity: 0.5; background: #f1f5f9; text-decoration: line-through; }

    .task-header { display: flex; justify-content: space-between; align-items: center; }
    .task-badges { display: flex; align-items: center; gap: 4px; }
    .task-title-text { font-size: 12px; font-weight: 700; color: #1e293b; line-height: 1.3; margin: 2px 0; }
    .task-meta-box { font-size: 10px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }
    .task-action-bar { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border-light); }
    
    .btn-task-action {
      background: #f1f5f9; border: 1px solid var(--border-color); border-radius: 3px; font-size: 10px; font-weight: 600; padding: 2px 6px; cursor: pointer; color: #334155;
    }
    .btn-task-action:hover { background: #e2e8f0; }
    .btn-task-done { background: var(--success); color: #fff; border-color: var(--success); }
    .btn-task-done:hover { background: #059669; }

    /* 모바일 전용 가로로 꽉 차는 작업 파이프라인 토글 버튼 (상담 메모 입력란 바로 아래 배치) */
    .mobile-task-toggle-btn-full {
      display: none; width: 100%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
      padding: 10px 14px; border-radius: 6px; border: none; cursor: pointer; align-items: center; justify-content: space-between;
      margin-top: 12px; box-shadow: 0 2px 6px rgba(37,99,235,0.25);
    }
    .mobile-task-toggle-btn-full:active { background: var(--primary-hover); }
    .mobile-task-toggle-btn-full:disabled { opacity: 1; cursor: pointer; }

    /* 모바일 전용 토글형 작업 컨테이너 패널 */
    .mobile-task-collapsible-panel {
      display: none; width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.25s ease-in-out;
      background: #f8fafc; border: 1px solid var(--border-light); border-radius: 6px; margin-top: 6px; padding: 0 10px;
    }
    .mobile-task-collapsible-panel.open { max-height: 320px; padding: 10px; overflow-y: auto; }

    /* Composer (입력 컴포저가 언제나 스크롤 내에 쾌적하게 노출) */
    .composer { padding: 10px 14px 14px; border-top: 1px solid var(--border-light); background-color: #fff; flex-shrink: 0; }
    .outbound-translate-bar {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
      margin: 6px 0 8px; padding: 6px 8px; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 4px;
    }
    .outbound-translate-label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 700; color: #5b21b6; cursor: pointer; margin: 0;
    }
    .outbound-translate-label input { accent-color: #7c3aed; }
    /* 종결 문의: 입력만 잠금 — 작업 목록 토글/조회는 가능 */
    .composer.is-locked { background: #f8fafc; }
    .composer.is-locked .composer-write-area {
      opacity: 0.55;
      pointer-events: none;
    }
    .composer.is-locked .mobile-task-toggle-btn-full,
    .composer.is-locked .mobile-task-collapsible-panel {
      pointer-events: auto;
      opacity: 1;
    }
    .case-closed-banner {
      display: none; margin: 0 0 8px; padding: 8px 10px; border-radius: 6px;
      background: #f1f5f9; border: 1px solid #cbd5e1; color: #334155; font-size: 12px; font-weight: 600;
    }
    .case-closed-banner.visible { display: block; }
    .btn-action-reopen { background-color: #0f766e; color: #fff; }
    .btn-action:disabled, .btn-action[disabled] { opacity: 0.45; cursor: not-allowed; }
    .template-bar {
      display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-bottom: 6px;
    }
    .template-bar select {
      max-width: none; width: auto; min-width: 140px; font-size: 11px; padding: 3px 6px; border: 1px solid var(--border-color); border-radius: 4px; outline: none; background: #fff; color: #334155;
    }
    .composer textarea {
      width: 100%; min-height: 70px; max-height: 200px; resize: vertical; border: 1px solid var(--border-color);
      border-radius: 4px; padding: 8px; font-size: 11px; line-height: 1.4; outline: none; margin-bottom: 6px;
    }

    /* 연락처 Workspace */
    .contact-search-box {
      padding: 10px 12px; border-bottom: 1px solid var(--border-light); background: #fff; flex-shrink: 0;
    }
    .contact-search-box input {
      width: 100%; padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 4px;
      font-size: 11px; outline: none;
    }
    .contact-search-hint { font-size: 10px; color: var(--text-muted); margin-top: 5px; line-height: 1.3; }

    .contact-type-badge {
      font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; white-space: nowrap;
    }
    .type-PILGRIM { background: #dcfce7; color: #15803d; }
    .type-INQUIRER { background: #e0f2fe; color: #0369a1; }
    .type-STAFF { background: #fef3c7; color: #92400e; }

    .contact-profile-card {
      padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--border-light); flex-shrink: 0;
    }
    .contact-workspace-split { flex: 1; display: flex; overflow: hidden; background: var(--bg-main); height: 100%; min-height: 0; }
    
    .contact-case-pane {
      width: 340px; background: #ffffff; border-right: 1px solid var(--border-light);
      display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; height: 100%; min-height: 0;
    }
    .contact-pane-header {
      padding: 8px 12px; font-size: 11px; font-weight: 700; color: #475569;
      background: #f8fafc; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between;
    }
    .contact-case-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .contact-case-item { padding: 10px 12px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
    .contact-case-item:hover { background-color: #f8fafc; }
    .contact-case-item.selected { background-color: #eff6ff; border-left: 4px solid var(--primary); }

    /* 문의 상세와 동일: 타임라인 스크롤 + 컴포저 하단 고정 */
    .contact-timeline-pane {
      flex: 1; display: flex; flex-direction: column; overflow: hidden;
      background: #fff; height: 100%; min-height: 0;
    }
    .contact-selected-case-bar {
      padding: 10px 16px; border-bottom: 1px solid var(--border-light); background: #f8fafc;
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px;
      flex-shrink: 0; z-index: var(--z-local-raised);
    }
    .contact-case-actions {
      display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
    }
    #contactTasksPaneView.tasks-pane {
      width: 100% !important; height: auto !important; flex-shrink: 0;
      border-left: none; border-top: 1px solid var(--border-light);
    }
    #contactTimelineScrollArea #contactTasksPaneView { display: flex; }
    #contactWorkspaceView .detail-pane { min-height: 0; }
    #contactWorkspaceView .contact-profile-card { flex-shrink: 0; }

    /* Modals & Searchable Dropdown List */
    .modal-backdrop {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(15, 23, 42, 0.55); display: none; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 16px;
      cursor: pointer;
    }
    /* 인증 게이트 위 — 로그인 중 확인 모달 (docs/ui-layers.md) */
    #appConfirmModal.modal-backdrop {
      z-index: var(--z-auth-dialog);
    }
    .modal-backdrop > .modal-content { cursor: default; }
    .modal-content {
      background: #fafbfc;
      width: min(920px, 96vw);
      max-width: 96vw;
      border-radius: 8px;
      padding: 12px 14px 14px;
      max-height: 92vh;
      overflow-y: auto;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
    }
    .modal-content.modal-sm {
      width: min(560px, 94vw);
    }
    .modal-content.modal-lg {
      width: min(980px, 96vw);
    }
    .modal-title {
      font-size: 14px; font-weight: 800; margin: 0 0 8px; padding-bottom: 6px;
      color: #0f172a; border-bottom: 2px solid #e2e8f0; letter-spacing: -0.01em;
    }
    .modal-lead {
      font-size: 11px; color: #475569; margin: 0 0 8px; line-height: 1.45;
      padding: 6px 8px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 4px;
    }
    .modal-tabs {
      display: flex; gap: 0; margin: 0 0 8px; padding: 2px; background: #e2e8f0;
      border-radius: 6px; border: 1px solid #cbd5e1;
    }
    .modal-tabs .tab-btn {
      flex: 1; min-width: 0; padding: 6px 4px; font-size: 11px; font-weight: 700;
      border: none; border-bottom: none; border-radius: 4px; background: transparent;
      color: #64748b; cursor: pointer;
    }
    .modal-tabs .tab-btn.active {
      background: #fff; color: #1d4ed8; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
      border-bottom: none;
    }
    .modal-section {
      margin-bottom: 8px; padding: 8px 8px 6px;
      border-radius: 6px; border: 1px solid #e2e8f0;
      background: #f8fafc;
    }
    .modal-section:last-of-type { margin-bottom: 2px; }
    .modal-section-hd {
      display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
      font-size: 11px; font-weight: 800; letter-spacing: 0.02em; text-transform: none;
    }
    .modal-section-hd::before {
      content: ""; width: 3px; height: 14px; border-radius: 2px; background: #94a3b8; flex-shrink: 0;
    }
    .modal-section-hd .step {
      font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
      background: rgba(15, 23, 42, 0.08); color: inherit;
    }
    .modal-section--contact {
      background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
      border-color: #bfdbfe;
    }
    .modal-section--contact .modal-section-hd { color: #1e40af; }
    .modal-section--contact .modal-section-hd::before { background: #2563eb; }
    .modal-section--case {
      background: linear-gradient(180deg, #fff7ed 0%, #fffbf5 100%);
      border-color: #fed7aa;
    }
    .modal-section--case .modal-section-hd { color: #9a3412; }
    .modal-section--case .modal-section-hd::before { background: #ea580c; }
    .modal-section--routing {
      background: linear-gradient(180deg, #f0fdf4 0%, #f7fef9 100%);
      border-color: #bbf7d0;
    }
    .modal-section--routing .modal-section-hd { color: #166534; }
    .modal-section--routing .modal-section-hd::before { background: #16a34a; }
    .modal-section--lang {
      background: linear-gradient(180deg, #fdf2f8 0%, #fff7fb 100%);
      border-color: #fbcfe8;
    }
    .modal-section--lang .modal-section-hd { color: #9d174d; }
    .modal-section--lang .modal-section-hd::before { background: #db2777; }
    .modal-section--org {
      background: linear-gradient(180deg, #ecfeff 0%, #f5feff 100%);
      border-color: #a5f3fc;
    }
    .modal-section--org .modal-section-hd { color: #0e7490; }
    .modal-section--org .modal-section-hd::before { background: #0891b2; }
    .modal-section--notes {
      background: linear-gradient(180deg, #fffbeb 0%, #fffdf5 100%);
      border-color: #fde68a;
    }
    .modal-section--notes .modal-section-hd { color: #92400e; }
    .modal-section--notes .modal-section-hd::before { background: #d97706; }
    .modal-section--slate {
      background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
      border-color: #cbd5e1;
    }
    .modal-section--slate .modal-section-hd { color: #334155; }
    .modal-section--slate .modal-section-hd::before { background: #64748b; }
    .modal-section .form-group:last-child { margin-bottom: 0; }
    .modal-hint {
      font-size: 10px; color: #64748b; margin: 0 0 6px; line-height: 1.4;
      padding: 4px 6px; background: rgba(255,255,255,0.72); border-radius: 3px;
      border: 1px solid rgba(148, 163, 184, 0.35);
    }
    .modal-select-banner {
      display: none; font-size: 11px; font-weight: 700; color: #1d4ed8;
      background: #dbeafe; border: 1px solid #93c5fd; padding: 4px 6px;
      border-radius: 4px; margin: 3px 0 4px;
    }
    .modal-select-banner.is-success {
      color: #166534; background: #dcfce7; border-color: #86efac;
    }
    .form-group { margin-bottom: 7px; position: relative; }
    .form-group label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 2px; color: #334155; }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%; padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 4px;
      font-size: 11px; outline: none; background: #fff; color: #0f172a;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .form-group textarea,
    .modal-section textarea,
    textarea {
      resize: vertical;
      max-width: 100%;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    }
    .modal-section input, .modal-section select, .modal-section textarea {
      background: #fff; border-color: #94a3b8;
    }
    .modal-actions {
      display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px;
      padding-top: 8px; border-top: 1px solid #e2e8f0;
    }
    #createContactCandidatesList {
      height: 160px;
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #93c5fd;
      border-radius: 5px;
      padding: 4px;
      background: #fff;
      margin-bottom: 0;
    }
    #createCaseContactSearchSection {
      display: block;
    }
    #newCaseBody {
      height: 90px !important;
      min-height: 90px;
      resize: vertical;
    }
    .queue-picker-list {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #94a3b8;
      border-radius: 5px;
      padding: 4px;
      background: #fff;
      margin-top: 4px;
      position: relative;
      z-index: var(--z-local);
    }
    .queue-picker-hint { font-size: 10px; color: #64748b; margin-top: 4px; line-height: 1.35; }

    /* Searchable Agent Picker Dropdown Box */
    .agent-picker-dropdown {
      position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border-color);
      border-radius: 4px; max-height: 140px; overflow-y: auto; z-index: var(--z-modal-pop); display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .agent-picker-item {
      padding: 6px 8px; font-size: 11px; cursor: pointer; border-bottom: 1px solid var(--border-light);
    }
    .agent-picker-item:hover { background: #f8fafc; color: var(--primary); font-weight: 700; }

    .search-filter-box { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
    .search-filter-box input { flex: 1; min-width: 140px; padding: 5px 8px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 11px; outline: none; }
    .filter-chip-btn { padding: 4px 8px; font-size: 10px; font-weight: 600; background: #e2e8f0; border: none; border-radius: 3px; cursor: pointer; color: #475569; }
    .filter-chip-btn.active { background: var(--primary); color: #fff; }

    .move-candidate-card {
      border: 1px solid var(--border-light); border-radius: 4px; padding: 8px 10px; margin-bottom: 5px; cursor: pointer;
    }
    .move-candidate-card:hover { background-color: #f8fafc; }
    .move-candidate-card.selected { background-color: #eff6ff; border-color: var(--primary); border-left: 3px solid var(--primary); }

    .noti-panel {
      position: absolute; top: 48px; right: 12px; width: 300px; max-height: min(70vh, 480px);
      background: #fff; border: 1px solid var(--border-color);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 6px; z-index: var(--z-float); display: none; flex-direction: column;
    }
    .noti-header { padding: 8px 10px; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--border-light); background: #f8fafc; flex-shrink: 0; }
    .noti-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .noti-header-title { flex: 1; min-width: 0; line-height: 1.35; }
    .noti-gear {
      flex-shrink: 0; width: 28px; height: 28px; border: 1px solid #cbd5e1; border-radius: 4px;
      background: #fff; color: #475569; cursor: pointer; font-size: 14px; line-height: 1;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .noti-gear:hover { background: #f1f5f9; color: #0f172a; }
    .noti-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
    .noti-actions .btn-noti {
      font-size: 10px; font-weight: 700; padding: 3px 7px; height: 24px; border: 1px solid #cbd5e1;
      border-radius: 4px; background: #fff; color: #334155; cursor: pointer;
    }
    .noti-actions .btn-noti:hover { background: #f1f5f9; }
    .noti-list { overflow-y: auto; flex: 1; min-height: 0; }
    .noti-item { padding: 8px 10px; border-bottom: 1px solid var(--border-light); font-size: 11px; cursor: pointer; }
    .noti-item:hover { background: #f8fafc; }
    .noti-item.is-read { opacity: 0.72; }

    .form-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

    @media (max-width: 900px) {
      header { height: auto; min-height: 48px; flex-wrap: wrap; padding: 6px 8px; row-gap: 6px; }
      .header-left { flex: 1 1 auto; }
      .header-actions { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
      .nav-btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
      .btn-create-case, .btn-create-contact { font-size: 13px; padding: 0 12px; height: 40px; }
      .noti-btn, .agent-chrome-btn { width: 40px; height: 40px; font-size: 16px; }
      .btn-ws-logout { height: 40px; padding: 0 12px; font-size: 12px; }
      .list-filter-bar select, .list-filter-bar input { min-height: 36px; font-size: 13px; }
      .form-grid-2col { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      header { padding: 6px 8px; }
      .aa-control--bar { display: none !important; }
      /* agent-chrome-btn은 항상 표시 */

      #caseWorkspaceView .list-pane { width: 100%; border-right: none; }
      #caseWorkspaceView .detail-pane { display: none; width: 100%; }
      #caseWorkspaceView.mobile-detail-active .list-pane { display: none; }
      #caseWorkspaceView.mobile-detail-active .detail-pane { display: flex; }
      #caseWorkspaceView .btn-back { display: inline-flex; }
      #contactWorkspaceView .btn-back { display: inline-flex; }

      .case-meta-grid { grid-template-columns: repeat(2, 1fr); }
      .contact-meta-grid, .profile-grid { grid-template-columns: repeat(2, 1fr); }
      
      /* 데스크톱 우측 사이드바 숨김 및 모바일 전용 입력창 아래 가로 꽉 찬 토글 버튼 노출 */
      .tasks-pane { display: none !important; }
      .mobile-task-toggle-btn-full { display: flex; }
      .mobile-task-collapsible-panel { display: block; }

      /* 연락처 탭 모바일 3단계 뎁스 전환 스타일 */
      #contactWorkspaceView .list-pane { width: 100%; border-right: none; display: flex; }
      #contactWorkspaceView .detail-pane { display: none; width: 100%; }
      #contactWorkspaceView.contact-stage-cases .list-pane { display: none; }
      #contactWorkspaceView.contact-stage-cases .detail-pane { display: flex; }
      #contactWorkspaceView.contact-stage-cases .contact-case-pane { display: flex; width: 100%; border-right: none; }
      #contactWorkspaceView.contact-stage-cases .contact-timeline-pane { display: none; }
      
      #contactWorkspaceView.contact-stage-timeline .list-pane { display: none; }
      #contactWorkspaceView.contact-stage-timeline .detail-pane { display: flex; }
      #contactWorkspaceView.contact-stage-timeline .contact-case-pane { display: none; }
      #contactWorkspaceView.contact-stage-timeline .contact-timeline-pane { display: flex; width: 100%; }
    }