/* ═══════════════════════════════════════════════════════════════
 * 메일 통합함 (mail) — 네이버 스타일 2-pane 레이아웃
 * cs2 토큰 기반 (--cs2-* 변수)
 * 작성: 2026-04-14
 * ═══════════════════════════════════════════════════════════════ */

.cs2-root {
  /* 배경 */
  --cs2-bg: #FFFFFF;
  --cs2-surface: #FFFFFF;
  --cs2-bg-2: #F5F5F5;
  --cs2-bg-chat: #FAFAFA;
  /* 테두리 */
  --cs2-border: #EAEAEA;
  --cs2-border-strong: #D4D4D4;
  /* 텍스트 */
  --cs2-ink: #1A1A1A;
  --cs2-ink-2: #3A3A3A;
  --cs2-ink-3: #6B6B6B;
  --cs2-muted: #9A9A9A;
  --cs2-muted-2: #C4C4C4;
  /* 시맨틱 */
  --cs2-danger: #D14343;
  --cs2-danger-bg: #FDECEC;
  --cs2-warn-bg: #FEF3DA;
  --cs2-warn-ink: #7A4A08;
  --cs2-info-bg: #E6F1FB;
  --cs2-info-ink: #1565C0;
  --cs2-ok-bg: #E1F5EE;
  --cs2-ok-ink: #0F6E56;
  --cs2-purple-bg: #EEEDFE;
  --cs2-purple-ink: #3C3489;
  /* 포인트 */
  --cs2-accent: #D97706;
  --cs2-accent-hover: #B45309;
  --cs2-accent-soft: #FEF3DA;
  --cs2-accent-softer: #FFFBF0;
  --cs2-success: #0F6E56;
  --cs2-success-hover: #0A5942;
}

body.dark .cs2-root {
  --cs2-bg: #1a1917;
  --cs2-surface: #242220;
  --cs2-border: #3a3733;
  --cs2-border-strong: #4d4a45;
  --cs2-ink: #EDEAE4;
  --cs2-ink-2: #C8C4BC;
  --cs2-ink-3: #9A9690;
  --cs2-muted: #6F6C67;
  --cs2-muted-2: #4f4c47;
  --cs2-bg-2: #2d2b28;
  --cs2-bg-chat: #1f1d1b;
}

#page-mail {
  background: var(--cs2-bg);
  /* 향담 시스템의 content-area 제약 우회: 전체 너비/높이 강제 */
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* mail-root : cs2 스코프 */
.mail-root {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--cs2-bg);
  color: var(--cs2-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
 * 좌측 사이드바 (200px)
 * ═══════════════════════════════════════════════════════════════ */
.mail-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--cs2-border);
  background: var(--cs2-surface);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  overflow-y: auto;
  min-height: 0;
}

/* 메일 쓰기 / 내게 쓰기 버튼 */
.mail-sb-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.mail-sb-actions .mail-btn-write {
  flex: 1;
  background: var(--cs2-accent);
  color: #FFFFFF;
  border: none;
  padding: 9px 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s;
}
.mail-sb-actions .mail-btn-write:hover { background: var(--cs2-accent-hover); }
.mail-sb-actions .mail-btn-self {
  flex: 1;
  background: var(--cs2-surface);
  color: var(--cs2-ink);
  border: 1px solid var(--cs2-border-strong);
  padding: 9px 0;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.mail-sb-actions .mail-btn-self:hover { background: var(--cs2-bg-2); }

/* 빠른 필터 (안읽음/중요/첨부/TO) */
.mail-sb-quickfilters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px 0;
}
.mail-sb-qf {
  text-align: center;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 4px;
  transition: background .1s;
}
.mail-sb-qf:hover { background: var(--cs2-bg-2); }
.mail-sb-qf.active { background: var(--cs2-accent-softer); }
.mail-sb-qf-icon {
  font-size: 13px;
  font-weight: 500;
  color: var(--cs2-accent);
  line-height: 1.2;
}
.mail-sb-qf-label {
  font-size: 10px;
  color: var(--cs2-ink-3);
  margin-top: 2px;
}

/* 폴더 리스트 */
.mail-sb-folder {
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cs2-ink-2);
  cursor: pointer;
  border-radius: 4px;
  transition: background .1s;
  margin-bottom: 1px;
}
.mail-sb-folder:hover { background: var(--cs2-bg-2); }
.mail-sb-folder.active {
  background: var(--cs2-accent-softer);
  border-left: 3px solid var(--cs2-accent);
  border-radius: 0 4px 4px 0;
  padding-left: 9px;
  font-weight: 500;
  color: var(--cs2-ink);
}
.mail-sb-folder-icon { font-size: 13px; }
.mail-sb-folder-label { flex: 1; }
.mail-sb-folder-count {
  color: var(--cs2-muted);
  font-size: 11px;
}
.mail-sb-folder.active .mail-sb-folder-count { color: var(--cs2-accent); }

/* 섹션 헤더 */
.mail-sb-section {
  margin-top: 14px;
  padding: 8px 13px 4px;
  font-size: 11px;
  color: var(--cs2-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.3px;
}

/* 라벨 (스마트메일함) */
.mail-sb-label {
  padding: 6px 13px 6px 26px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--cs2-ink-2);
  cursor: pointer;
  border-radius: 4px;
  transition: background .1s;
}
.mail-sb-label:hover { background: var(--cs2-bg-2); }
.mail-sb-label.active {
  background: var(--cs2-accent-softer);
  color: var(--cs2-ink);
  font-weight: 500;
}
.mail-sb-label-name { flex: 1; }
.mail-sb-label-count {
  color: var(--cs2-muted);
  font-size: 11px;
}

/* 계정 목록 */
.mail-sb-acc {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--cs2-ink-2);
  cursor: pointer;
  border-radius: 4px;
  transition: background .1s;
}
.mail-sb-acc:hover { background: var(--cs2-bg-2); }
.mail-sb-acc.active {
  background: var(--cs2-accent-softer);
  font-weight: 500;
}
.mail-sb-acc-badge {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 500;
  flex-shrink: 0;
}
.mail-sb-acc-badge.naver { background: var(--cs2-ok-bg); color: var(--cs2-ok-ink); }
.mail-sb-acc-badge.gmail { background: var(--cs2-danger-bg); color: var(--cs2-danger); }
.mail-sb-acc-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-sb-acc-count {
  color: var(--cs2-danger);
  font-weight: 500;
  font-size: 11px;
}
.mail-sb-acc-add {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--cs2-ink-3);
  cursor: pointer;
  border-radius: 4px;
}
.mail-sb-acc-add:hover { background: var(--cs2-bg-2); }

/* ═══════════════════════════════════════════════════════════════
 * 메인 영역 (메일 목록)
 * ═══════════════════════════════════════════════════════════════ */
.mail-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--cs2-surface);
}

/* 상단 헤더 */
.mail-main-header {
  padding: 16px 20px 8px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 0; /* 액션바와 공유 */
}
.mail-main-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--cs2-ink);
}
.mail-main-count {
  font-size: 13px;
  color: var(--cs2-accent);
  font-weight: 500;
}
.mail-main-total {
  font-size: 13px;
  color: var(--cs2-muted);
}
.mail-main-spacer { flex: 1; }
.mail-main-search {
  position: relative;
}
.mail-main-search input {
  width: 240px;
  padding: 6px 12px 6px 30px;
  font-size: 12px;
  border: 1px solid var(--cs2-border-strong);
  border-radius: 4px;
  background: var(--cs2-surface);
  color: var(--cs2-ink);
  box-sizing: border-box;
}
.mail-main-search input:focus {
  outline: none;
  border-color: var(--cs2-accent);
  box-shadow: 0 0 0 3px var(--cs2-accent-soft);
}
.mail-main-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cs2-muted);
  font-size: 11px;
  pointer-events: none;
}

/* 액션바 */
.mail-actionbar {
  padding: 8px 20px;
  border-top: 1px solid var(--cs2-border);
  border-bottom: 1px solid var(--cs2-border);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  background: var(--cs2-surface);
  flex-wrap: wrap;
}
.mail-actionbar input[type="checkbox"] { margin-right: 8px; }
.mail-actionbar button {
  background: var(--cs2-surface);
  color: var(--cs2-ink-2);
  border: 1px solid var(--cs2-border-strong);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background .1s;
}
.mail-actionbar button:hover { background: var(--cs2-bg-2); }
.mail-actionbar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mail-actionbar .ab-divider {
  width: 1px;
  height: 16px;
  background: var(--cs2-border);
  margin: 0 4px;
}
.mail-actionbar .ab-spacer { flex: 1; }
.mail-actionbar .ab-status {
  font-size: 11px;
  color: var(--cs2-muted);
}
.mail-actionbar .ab-sync-btn {
  background: var(--cs2-accent);
  color: #FFFFFF;
  border-color: var(--cs2-accent);
}
.mail-actionbar .ab-sync-btn:hover { background: var(--cs2-accent-hover); }

/* 메일 목록 */
.mail-list {
  flex: 1;
  overflow-y: auto;
  background: var(--cs2-surface);
}
.mail-list-empty {
  text-align: center;
  color: var(--cs2-muted);
  padding: 60px 20px;
  font-size: 13px;
}

/* 메일 행 */
.mail-row {
  display: grid;
  grid-template-columns: 30px 24px 24px 22px 140px 1fr 70px;
  align-items: center;
  padding: 9px 20px;
  border-bottom: 1px solid var(--cs2-border);
  font-size: 13px;
  cursor: pointer;
  transition: background .08s;
}
.mail-row:hover { background: var(--cs2-bg-2); }
.mail-row.read {
  background: var(--cs2-bg-chat);
  color: var(--cs2-ink-3);
}
.mail-row.read .mail-row-from,
.mail-row.read .mail-row-subject {
  color: var(--cs2-ink-3);
  font-weight: 400;
}
.mail-row.read .mail-row-icon { color: var(--cs2-muted-2); }
.mail-row.selected {
  background: var(--cs2-accent-softer);
}
.mail-row-checkbox { cursor: pointer; }
.mail-row-star {
  color: var(--cs2-muted-2);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
.mail-row-star.starred { color: var(--cs2-accent); }
.mail-row-icon {
  color: var(--cs2-ink);
  font-size: 13px;
  text-align: center;
}
.mail-row-acc {
  text-align: center;
}
.mail-row-acc-badge {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
}
.mail-row-acc-badge.naver { background: var(--cs2-ok-bg); color: var(--cs2-ok-ink); }
.mail-row-acc-badge.gmail { background: var(--cs2-danger-bg); color: var(--cs2-danger); }
.mail-row-from {
  font-weight: 500;
  color: var(--cs2-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
}
.mail-row-subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cs2-ink);
  font-weight: 500;
}
.mail-row-snippet {
  color: var(--cs2-ink-3);
  font-weight: 400;
  margin-left: 4px;
}
.mail-row-date {
  text-align: right;
  color: var(--cs2-ink-3);
  font-size: 12px;
}

/* 라벨 칩 (메일 행 안) */
.mail-row-label {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
  margin-right: 6px;
  font-weight: 500;
  vertical-align: middle;
}

/* 페이지네이션 */
.mail-pagination {
  padding: 12px 20px;
  border-top: 1px solid var(--cs2-border);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: var(--cs2-surface);
}
.mail-pagination .pg-arrow {
  color: var(--cs2-muted);
  cursor: pointer;
  padding: 3px 6px;
  user-select: none;
}
.mail-pagination .pg-arrow:hover { color: var(--cs2-ink); }
.mail-pagination .pg-num {
  padding: 3px 9px;
  color: var(--cs2-ink-2);
  cursor: pointer;
  border-radius: 3px;
}
.mail-pagination .pg-num:hover { background: var(--cs2-bg-2); }
.mail-pagination .pg-num.active {
  background: var(--cs2-accent);
  color: #FFFFFF;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
 * 모바일 반응형
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mail-sidebar {
    width: 60px;
    padding: 8px 4px;
  }
  .mail-sb-actions { flex-direction: column; }
  .mail-sb-actions .mail-btn-write,
  .mail-sb-actions .mail-btn-self {
    font-size: 0;
    padding: 8px 0;
  }
  .mail-sb-actions .mail-btn-write::before { content: '✏'; font-size: 16px; }
  .mail-sb-actions .mail-btn-self::before { content: '👤'; font-size: 16px; }
  .mail-sb-quickfilters,
  .mail-sb-folder-label,
  .mail-sb-folder-count,
  .mail-sb-section,
  .mail-sb-label,
  .mail-sb-acc-name,
  .mail-sb-acc-count,
  .mail-sb-acc-add { display: none; }
  .mail-sb-folder { padding: 8px; justify-content: center; }
  .mail-sb-folder-icon { font-size: 18px; }

  .mail-main-search input { width: 120px; }
  .mail-row {
    grid-template-columns: 24px 24px 22px 1fr 60px;
  }
  .mail-row-checkbox,
  .mail-row-from { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
 * 인라인 본문 뷰 (네이버 스타일, 메인 영역 통째로 전환)
 * ═══════════════════════════════════════════════════════════════ */

/* 상단 바: ← 전체메일 카운트 */
.mail-detail-topbar {
  padding: 16px 20px 10px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 0;
  flex-shrink: 0;
}
.mail-detail-back {
  font-size: 14px;
  color: var(--cs2-ink);
  cursor: pointer;
  font-weight: 500;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background .1s;
}
.mail-detail-back:hover {
  background: var(--cs2-bg-2);
  color: var(--cs2-accent);
}
.mail-detail-count {
  font-size: 12px;
  color: var(--cs2-muted);
}

/* 액션바 */
.mail-detail-actionbar {
  padding: 8px 20px;
  border-top: 1px solid var(--cs2-border);
  border-bottom: 1px solid var(--cs2-border);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  background: var(--cs2-surface);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.mail-detail-actionbar button {
  background: var(--cs2-surface);
  color: var(--cs2-ink-2);
  border: 1px solid var(--cs2-border-strong);
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background .1s;
}
.mail-detail-actionbar button:hover { background: var(--cs2-bg-2); }
.mail-detail-actionbar button.primary {
  background: var(--cs2-accent);
  color: #FFFFFF;
  border-color: var(--cs2-accent);
  font-weight: 500;
}
.mail-detail-actionbar button.primary:hover { background: var(--cs2-accent-hover); }
.mail-detail-actionbar .ab-divider {
  width: 1px;
  height: 16px;
  background: var(--cs2-border);
  margin: 0 4px;
}
.mail-detail-actionbar .ab-spacer { flex: 1; }
.mail-detail-actionbar .ab-nav {
  color: var(--cs2-ink-2);
  cursor: pointer;
  padding: 3px 10px;
  font-size: 18px;
  user-select: none;
  border-radius: 4px;
  line-height: 1;
}
.mail-detail-actionbar .ab-nav:hover { background: var(--cs2-bg-2); }
.mail-detail-actionbar .ab-nav.disabled { color: var(--cs2-muted-2); cursor: not-allowed; }
.mail-detail-actionbar .ab-nav.disabled:hover { background: transparent; }

/* 스크롤 컨테이너 */
.mail-detail-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 28px 40px;
  background: var(--cs2-surface);
  min-width: 0;
}

/* 제목 */
.mail-detail-subject {
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--cs2-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.mail-detail-subject h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--cs2-ink);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
.mail-detail-star {
  font-size: 18px;
  color: var(--cs2-muted-2);
  cursor: pointer;
  padding-top: 2px;
}
.mail-detail-star:hover { color: var(--cs2-accent); }
.mail-detail-star.starred { color: var(--cs2-accent); }

/* 발신자 정보 */
.mail-detail-sender {
  padding: 16px 0 16px;
  border-bottom: 1px solid var(--cs2-border);
  font-size: 13px;
}
.mail-detail-sender-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.mail-detail-sender-label {
  width: 60px;
  color: var(--cs2-ink-3);
  font-size: 12px;
  flex-shrink: 0;
}
.mail-detail-sender-chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--cs2-bg-2);
  border-radius: 14px;
  color: var(--cs2-ink);
  font-size: 12px;
}
.mail-detail-date {
  margin-top: 8px;
  font-size: 12px;
  color: var(--cs2-ink-3);
  padding-left: 70px;
}

/* 자동매칭 */
.mail-detail-match {
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--cs2-accent-softer);
  border: 1px dashed var(--cs2-accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}
.mail-detail-match-icon { color: var(--cs2-accent-hover); font-size: 14px; }
.mail-detail-match-text {
  color: var(--cs2-ink-2);
  flex: 1;
}
.mail-detail-match-text b { color: var(--cs2-ink); }
.mail-detail-match button {
  padding: 5px 11px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid var(--cs2-border-strong);
  background: var(--cs2-surface);
  color: var(--cs2-ink-2);
  transition: background .1s;
}
.mail-detail-match button:hover { background: var(--cs2-bg-2); }
.mail-detail-match button.primary {
  background: var(--cs2-accent);
  color: #FFFFFF;
  border-color: var(--cs2-accent);
}
.mail-detail-match button.primary:hover { background: var(--cs2-accent-hover); }

/* 첨부파일 */
.mail-detail-att {
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--cs2-bg-chat);
  border: 1px solid var(--cs2-border);
  border-radius: 6px;
}
.mail-detail-att-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--cs2-ink-2);
  margin-bottom: 10px;
  font-weight: 500;
}
.mail-detail-att-size {
  color: var(--cs2-muted);
  font-weight: 400;
}
.mail-detail-att-all {
  color: var(--cs2-accent);
  cursor: pointer;
  margin-left: auto;
  font-weight: 400;
}
.mail-detail-att-all:hover { color: var(--cs2-accent-hover); text-decoration: underline; }
.mail-detail-att-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mail-detail-att-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--cs2-surface);
  border: 1px solid var(--cs2-border);
  border-radius: 5px;
  font-size: 12px;
}
.mail-detail-att-icon { font-size: 18px; }
.mail-detail-att-name {
  flex: 1;
  color: var(--cs2-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-detail-att-filesize {
  color: var(--cs2-muted);
  font-size: 11px;
  flex-shrink: 0;
}
.mail-detail-att-dl {
  color: var(--cs2-ink-3);
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: none;
  font-size: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.mail-detail-att-dl:hover {
  color: var(--cs2-accent);
  background: var(--cs2-bg-2);
}

/* 본문 */
.mail-detail-body {
  padding: 20px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cs2-ink);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}
/* 본문 직계 자식 모두 박스에 맞춤 */
.mail-detail-body > * {
  max-width: 100% !important;
}
.mail-detail-body p { margin: 0 0 14px; }
.mail-detail-body ul,
.mail-detail-body ol { margin: 0 0 14px; padding-left: 22px; }
.mail-detail-body img {
  max-width: 100% !important;
  height: auto !important;
  /* HTML width/height 속성이 아주 작게 박혀있어도 최소 크기 보장 */
  min-width: 350px;
}
.mail-detail-body a { color: var(--cs2-info-ink); text-decoration: underline; }
/* 모든 테이블 강제 축소: HTML width 속성 무시하고 박스에 맞춤 */
.mail-detail-body table {
  border-collapse: collapse;
  margin-bottom: 14px;
  max-width: 100% !important;
  width: auto !important;
  table-layout: auto;
}
.mail-detail-body td,
.mail-detail-body th {
  padding: 6px 10px;
  border: 1px solid var(--cs2-border);
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.mail-detail-body td img,
.mail-detail-body th img {
  max-width: 100% !important;
  height: auto !important;
  /* 테이블 셀 안 이미지: 너무 작게 썸네일로 눌리는 거 방지 */
  min-width: 350px;
  min-height: auto;
}
.mail-detail-body blockquote {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--cs2-border);
  color: var(--cs2-ink-3);
  background: var(--cs2-bg-chat);
}
.mail-detail-body-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}

/* 모바일 */
@media (max-width: 768px) {
  .mail-detail-scroll { padding: 16px 16px 30px; }
  .mail-detail-subject h1 { font-size: 17px; }
  .mail-detail-actionbar { overflow-x: auto; }
  .mail-detail-sender-row { flex-wrap: wrap; }
  .mail-detail-date { padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
 * 작성 모달 (새 메일/답장/전달)
 * ═══════════════════════════════════════════════════════════════ */
.mail-compose-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 15, 20, 0.5);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  margin: 0 !important;
}
.mail-compose-modal {
  background: var(--cs2-surface);
  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 80px);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  color: var(--cs2-ink);
  overflow: hidden;
}

/* 헤더 */
.mail-compose-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--cs2-border);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mail-compose-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--cs2-ink);
  flex: 1;
}
.mail-compose-close {
  color: var(--cs2-muted-2);
  font-size: 24px;
  cursor: pointer;
  padding: 0 6px;
  user-select: none;
  line-height: 1;
}
.mail-compose-close:hover { color: var(--cs2-ink); }

/* 본문 (필드 + 에디터) */
.mail-compose-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 필드 행 */
.mail-compose-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cs2-border);
}
.mail-compose-row label {
  width: 60px;
  color: var(--cs2-ink-3);
  font-size: 12px;
  flex-shrink: 0;
}
.mail-compose-row input,
.mail-compose-row select {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--cs2-ink);
  padding: 6px 0;
  font-family: inherit;
}
.mail-compose-row select {
  cursor: pointer;
  padding: 6px 4px;
}
.mail-compose-row input:focus {
  outline: none;
}
.mail-compose-row input::placeholder {
  color: var(--cs2-muted-2);
}

/* 참조/숨은참조 토글 */
.mail-compose-addrtoggle {
  padding: 6px 0 2px;
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--cs2-ink-3);
}
.mail-compose-addrtoggle span {
  cursor: pointer;
  padding: 2px 4px;
}
.mail-compose-addrtoggle span:hover { color: var(--cs2-accent); }

/* 에디터 래퍼 */
.mail-compose-editor-wrap {
  margin-top: 10px;
  border: 1px solid var(--cs2-border);
  border-radius: 6px;
  overflow: hidden;
  flex: 1;
  min-height: 320px;
}
.mail-compose-editor-wrap .tox-tinymce {
  border: none !important;
  border-radius: 0 !important;
}

/* 첨부파일 리스트 */
.mail-compose-attachments {
  margin-top: 10px;
}
.mail-compose-att-total {
  font-size: 11px;
  color: var(--cs2-ink-3);
  margin-bottom: 6px;
}
.mail-compose-att-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--cs2-bg-chat);
  border: 1px solid var(--cs2-border);
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 12px;
}
.mail-compose-att-icon { font-size: 14px; }
.mail-compose-att-name {
  flex: 1;
  color: var(--cs2-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-compose-att-size {
  color: var(--cs2-muted);
  font-size: 11px;
  flex-shrink: 0;
}
.mail-compose-att-remove {
  color: var(--cs2-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
}
.mail-compose-att-remove:hover { color: var(--cs2-danger); }

/* 푸터 (보내기/임시저장/첨부/서명/취소) */
.mail-compose-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--cs2-border);
  background: var(--cs2-bg-chat);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.mail-compose-footer .mail-btn-primary {
  background: var(--cs2-accent);
  color: #FFFFFF;
  border: none;
  padding: 9px 22px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.mail-compose-footer .mail-btn-primary:hover { background: var(--cs2-accent-hover); }
.mail-compose-footer .mail-btn-secondary {
  background: var(--cs2-surface);
  color: var(--cs2-ink-2);
  border: 1px solid var(--cs2-border-strong);
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}
.mail-compose-footer .mail-btn-secondary:hover { background: var(--cs2-bg-2); }
.mail-compose-footer-spacer { flex: 1; }

.mail-compose-sigpicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cs2-ink-3);
}
.mail-compose-sigpicker select {
  padding: 6px 8px;
  border: 1px solid var(--cs2-border-strong);
  border-radius: 4px;
  background: var(--cs2-surface);
  color: var(--cs2-ink);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

/* 모바일 */
@media (max-width: 768px) {
  .mail-compose-bg { padding: 0; }
  .mail-compose-modal {
    max-width: none;
    max-height: 100vh;
    border-radius: 0;
    height: 100vh;
  }
  .mail-compose-footer { flex-wrap: wrap; gap: 6px; }
  .mail-compose-row label { width: 50px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
 * 계정 등록 모달
 * ═══════════════════════════════════════════════════════════════ */
.mail-addacc-notice {
  background: var(--cs2-accent-softer);
  border: 1px solid var(--cs2-accent-soft);
  border-left: 3px solid var(--cs2-accent);
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--cs2-ink-2);
  margin-bottom: 16px;
}
.mail-addacc-field {
  margin-bottom: 14px;
}
.mail-addacc-field label {
  display: block;
  font-size: 12px;
  color: var(--cs2-ink-3);
  margin-bottom: 6px;
  font-weight: 500;
}
.mail-addacc-field input[type="text"],
.mail-addacc-field input[type="email"],
.mail-addacc-field input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  font-size: 13px;
  border: 1px solid var(--cs2-border-strong);
  border-radius: 5px;
  background: var(--cs2-surface);
  color: var(--cs2-ink);
  font-family: inherit;
  outline: none;
  transition: border-color .1s, box-shadow .1s;
}
.mail-addacc-field input:focus {
  border-color: var(--cs2-accent);
  box-shadow: 0 0 0 3px var(--cs2-accent-soft);
}
.mail-addacc-hint {
  font-size: 11px;
  color: var(--cs2-muted);
  margin-top: 5px;
}
.mail-addacc-hint a {
  color: var(--cs2-accent);
  text-decoration: none;
}
.mail-addacc-hint a:hover { text-decoration: underline; }

/* 유형 버튼 그룹 */
.mail-addacc-typebtns {
  display: flex;
  gap: 6px;
}
.mail-addacc-typebtn {
  flex: 1;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid var(--cs2-border-strong);
  background: var(--cs2-surface);
  color: var(--cs2-ink-2);
  border-radius: 5px;
  cursor: pointer;
  transition: all .1s;
  font-family: inherit;
  text-align: center;
}
.mail-addacc-typebtn:hover:not(.disabled) {
  background: var(--cs2-bg-2);
  border-color: var(--cs2-accent);
}
.mail-addacc-typebtn.active {
  background: var(--cs2-accent-softer);
  border-color: var(--cs2-accent);
  color: var(--cs2-accent-hover);
  font-weight: 500;
}
.mail-addacc-typebtn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 공용/개인 라디오 */
.mail-addacc-scope {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mail-addacc-scope-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--cs2-border);
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--cs2-ink);
  transition: background .1s, border-color .1s;
}
.mail-addacc-scope-opt:hover {
  background: var(--cs2-bg-2);
}
.mail-addacc-scope-opt input[type="radio"] {
  margin: 0;
  cursor: pointer;
}
.mail-addacc-scope-opt:has(input:checked) {
  background: var(--cs2-accent-softer);
  border-color: var(--cs2-accent);
}

/* ═══════════════════════════════════════════════════════════════
 * 서명 편집 모달
 * ═══════════════════════════════════════════════════════════════ */

/* 편집 버튼 (작성 모달 푸터 안) */
.mail-compose-sigedit {
  background: var(--cs2-surface);
  color: var(--cs2-ink-2);
  border: 1px solid var(--cs2-border-strong);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  margin-left: 4px;
  transition: background .1s;
}
.mail-compose-sigedit:hover {
  background: var(--cs2-bg-2);
  color: var(--cs2-accent);
  border-color: var(--cs2-accent);
}

/* 모달 본문: 좌측 목록 + 우측 편집 */
.mail-sigedit-modal .mail-sigedit-body {
  display: flex;
  gap: 0;
  flex: 1;
  overflow: hidden;
  min-height: 480px;
}

.mail-sigedit-list {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--cs2-border);
  background: var(--cs2-bg-chat);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  overflow-y: auto;
}
.mail-sigedit-list-header {
  font-size: 11px;
  color: var(--cs2-muted);
  font-weight: 500;
  margin-bottom: 8px;
  padding: 4px 6px;
  letter-spacing: 0.3px;
}
.mail-sigedit-preset {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--cs2-ink-2);
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background .1s;
  border-left: 3px solid transparent;
}
.mail-sigedit-preset:hover {
  background: var(--cs2-surface);
}
.mail-sigedit-preset.active {
  background: var(--cs2-accent-softer);
  border-left-color: var(--cs2-accent);
  color: var(--cs2-ink);
  font-weight: 500;
}
.mail-sigedit-preset-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-sigedit-empty {
  font-size: 12px;
  color: var(--cs2-muted);
  padding: 14px 8px;
  text-align: center;
  line-height: 1.5;
}
.mail-sigedit-newbtn {
  margin-top: 8px;
  padding: 9px 12px;
  background: var(--cs2-surface);
  color: var(--cs2-accent);
  border: 1px dashed var(--cs2-accent);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background .1s;
}
.mail-sigedit-newbtn:hover {
  background: var(--cs2-accent-softer);
}

/* 우측 편집 영역 */
.mail-sigedit-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 22px;
  min-width: 0;
  background: var(--cs2-surface);
}
.mail-sigedit-namerow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mail-sigedit-namerow label {
  width: 50px;
  font-size: 12px;
  color: var(--cs2-ink-3);
  flex-shrink: 0;
  font-weight: 500;
}
.mail-sigedit-namerow input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--cs2-border-strong);
  border-radius: 5px;
  background: var(--cs2-surface);
  color: var(--cs2-ink);
  font-family: inherit;
  outline: none;
}
.mail-sigedit-namerow input:focus {
  border-color: var(--cs2-accent);
  box-shadow: 0 0 0 3px var(--cs2-accent-soft);
}
.mail-sigedit-editorwrap {
  flex: 1;
  border: 1px solid var(--cs2-border);
  border-radius: 5px;
  overflow: hidden;
  min-height: 280px;
}
.mail-sigedit-editorwrap .tox-tinymce {
  border: none !important;
  border-radius: 0 !important;
}
.mail-sigedit-hint {
  font-size: 11px;
  color: var(--cs2-muted);
  margin-top: 10px;
  line-height: 1.5;
}
.mail-sigedit-hint code {
  background: var(--cs2-bg-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--cs2-accent-hover);
}

/* 모바일 */
@media (max-width: 768px) {
  .mail-sigedit-modal .mail-sigedit-body {
    flex-direction: column;
  }
  .mail-sigedit-list {
    width: auto;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--cs2-border);
  }
}

/* TinyMCE 다이얼로그(코드 보기 등) 항상 우리 모달 위
 * 우리 모달은 _getTopZIndex로 동적 (10000+) 받으므로 그것보다 훨씬 크게 */
.tox-tinymce-aux,
.tox.tox-tinymce-aux {
  z-index: 2147483647 !important;
}
.tox-dialog-wrap,
.tox-dialog,
.tox-dialog-wrap__backdrop,
.tox-dialog__body,
.tox-dialog__header,
.tox-dialog__footer {
  z-index: 2147483647 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 임시보관함 (Drafts) 스타일
 * ═══════════════════════════════════════════════════════════════ */

/* 작성 모달 헤더 자동저장 인디케이터 */
.mail-compose-autosave {
  font-size: 11px;
  color: var(--cs2-muted);
  margin-right: 10px;
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: normal;
}

/* 임시저장 카드 (메일 목록 자리에) */
.mail-draft-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cs2-border);
  cursor: pointer;
  transition: background .08s;
}
.mail-draft-row:hover {
  background: var(--cs2-bg-2);
}
.mail-draft-icon {
  font-size: 18px;
  color: var(--cs2-accent);
  flex-shrink: 0;
}
.mail-draft-content {
  flex: 1;
  min-width: 0;
}
.mail-draft-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cs2-ink-3);
  margin-bottom: 4px;
}
.mail-draft-to {
  color: var(--cs2-ink-2);
  font-weight: 500;
}
.mail-draft-att {
  color: var(--cs2-warn-ink);
  background: var(--cs2-warn-bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
}
.mail-draft-spacer { flex: 1; }
.mail-draft-date {
  color: var(--cs2-muted);
  font-size: 11px;
}
.mail-draft-row2 {
  font-size: 13px;
  color: var(--cs2-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-draft-subject {
  font-weight: 500;
  color: var(--cs2-ink);
}
.mail-draft-preview {
  color: var(--cs2-ink-3);
  font-weight: 400;
}
.mail-draft-delete {
  background: transparent;
  border: 1px solid transparent;
  color: var(--cs2-muted-2);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all .1s;
  flex-shrink: 0;
}
.mail-draft-delete:hover {
  background: var(--cs2-danger-bg);
  color: var(--cs2-danger);
  border-color: var(--cs2-danger);
}

/* 검색어 하이라이트 */
.mail-hl {
  background: #FFF3B0;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
  font-weight: 600;
}