/* ===== 한빛메일 ===== */
.ml-app {
  display: flex;
  height: 100%;
  background: #fff;
  color: #1f2328;
}

.ml-side {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  background: #f4f6f9;
  border-right: 1px solid #e1e5ea;
  min-width: 0;
}

.ml-account {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
}

.ml-logo svg { width: 26px; height: 26px; }

.ml-account-body { display: flex; flex-direction: column; min-width: 0; }
.ml-account-name { font-size: 13px; font-weight: 600; }
.ml-account-addr { font-size: 11px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ml-compose {
  margin: 2px 12px 10px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: #1f6feb;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.ml-compose:disabled { background: #b8c4d6; color: #fff; }

.ml-folders { display: flex; flex-direction: column; gap: 1px; padding: 0 6px; }

.ml-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-size: 13px;
  text-align: left;
  color: #1f2328;
}
.ml-folder:hover { background: #e9edf2; }
.ml-folder.is-active { background: #dbe7f7; font-weight: 600; }
.ml-folder-icon svg { width: 16px; height: 16px; }
.ml-folder-label { flex: 1 1 auto; }
.ml-folder-count { font-size: 11px; font-weight: 700; color: #1f6feb; }

.ml-list {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e1e5ea;
  min-width: 0;
}

.ml-list-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid #e1e5ea;
}
.ml-list-title { font-size: 14px; font-weight: 700; }
.ml-list-count { font-size: 11px; color: #6b7280; }

.ml-items { flex: 1 1 auto; overflow-y: auto; }
.ml-items-empty { padding: 24px 14px; color: #6b7280; font-size: 12px; }

.ml-item {
  position: relative;
  padding: 9px 14px 9px 18px;
  border-bottom: 1px solid #eef1f4;
  cursor: default;
}
.ml-item:hover { background: #f6f8fa; }
.ml-item.is-active { background: #e4eefc; }
.ml-item.is-unread::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f6feb;
}
.ml-item.is-unread .ml-item-from, .ml-item.is-unread .ml-item-subject { font-weight: 700; }

.ml-item-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ml-item-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; }
.ml-item-from { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-item-addr { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a919a; font-size: 11px; font-weight: 400; }
.ml-item-date { flex: 0 0 auto; color: #6b7280; font-size: 11px; }
.ml-item-subject { font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-item-snippet { font-size: 11.5px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.ml-item-clip { position: absolute; right: 12px; bottom: 8px; font-size: 11px; color: #6b7280; }

.ml-read {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ml-empty { padding: 60px 20px; text-align: center; color: #8b95a1; font-size: 13px; }

.ml-msg { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }

.ml-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-bottom: 1px solid #e1e5ea;
  background: #fafbfc;
}
.ml-tb {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--btn-border);
  border-radius: 5px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 12px;
}
.ml-tb:disabled { color: #a1a9b3; background: #f6f8fa; border-color: #d0d7de; }
.ml-tb:not(:disabled):hover { background: var(--btn-bg-hover); }
.ml-tb.is-active { background: #dbe7f7; border-color: #9ec1f0; }
.ml-back { display: none; } /* 아주 좁은 창에서만 (responsive.css) */
.ml-tb-sep { width: 1px; height: 18px; background: #d0d7de; margin: 0 4px; }

.ml-subject { font-size: 18px; font-weight: 600; margin: 14px 20px 8px; }

.ml-meta { margin: 0 20px; padding-bottom: 10px; border-bottom: 1px solid #e1e5ea; font-size: 12.5px; }
.ml-meta-row { display: flex; gap: 10px; padding: 2px 0; }
.ml-meta-k { flex: 0 0 60px; color: #6b7280; }
.ml-meta-v { flex: 1 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; user-select: text; }

.ml-attach { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 20px 0; }
.ml-attach-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #f6f8fa;
  font-size: 12px;
}
.ml-attach-item:hover { background: #e9edf2; }
.ml-attach-icon svg { width: 18px; height: 18px; }

.ml-body {
  flex: 1 1 auto;
  padding: 14px 20px 24px;
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
  user-select: text;
}

.win--mail .win-titlebar { background: #1f6feb; color: #fff; border-bottom: none; }
.win--mail:not(.is-active) .win-titlebar { background: #5b8fe6; color: rgba(255,255,255,0.85); }
.win--mail .win-ctrl:hover { background: rgba(255,255,255,0.15); }
.win--mail .win-ctrl-close:hover { background: #e81123; }

.ml-search { margin: 0 12px 10px; }
.ml-search-input { width: 100%; height: 28px; padding: 0 9px; border: 1px solid #d0d7de; border-radius: 5px; font: inherit; font-size: 12px; background: #fff; }

/* 도구 모음 단추는 줄바꿈하지 않는다. 좁으면 전달·삭제를 숨긴다 */
.ml-toolbar { flex-wrap: nowrap; overflow: hidden; }
.ml-tb { flex: 0 0 auto; white-space: nowrap; }

/* 제보 메일 아래 조사 지시 안내 (내 PC 에서만) */
.ml-case-notice { margin: 18px 0 0; padding: 8px 12px; border-left: 3px solid #1f6feb; background: #eef4ff; color: #37507a; font-size: 12.5px; border-radius: 0 6px 6px 0; }

/* 새 메일 알림 팝업 (js/mail-alert.js) */
.toast.toast-mail { cursor: pointer; border-left: 4px solid #2f7fd1; }
.toast-mail .toast-app { font-size: 11px; color: #2f7fd1; font-weight: 700; margin-bottom: 2px; }
.toast-mail .toast-time { font-weight: 400; color: #888; }
.toast-mail .toast-from { font-size: 13px; font-weight: 700; }
.toast-mail .toast-subject { font-size: 13px; margin: 1px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-mail .toast-text { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 공용 메일함 */
.ml-folder-group { margin: 12px 0 4px; padding: 0 12px; font-size: 11px; font-weight: 600; color: #6b7280; letter-spacing: 0.02em; }
.ml-folder-shared .ml-folder-addr { margin-left: auto; font-size: 10.5px; color: #8a9099; }
.ml-box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e5e8ec; background: #f6f8fa; font-size: 11.5px; color: #4b5563; }
.ml-box-info { height: 26px; padding: 0 10px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: 11.5px; cursor: default; }
.ml-box-info:hover { background: var(--btn-bg-hover); }
.ml-boxinfo { padding: 18px 22px; overflow-y: auto; font-size: 12.5px; color: #1f2328; }
.ml-bi-head { margin-bottom: 14px; }
.ml-bi-title { font-size: 16px; font-weight: 700; }
.ml-bi-addr { font-size: 12px; color: #6b7280; }
.ml-bi-sec { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid #eef0f3; }
.ml-bi-k { color: #6b7280; font-weight: 600; font-size: 12px; }
.ml-bi-v { min-width: 0; line-height: 1.7; }
.ml-bi-chip { display: inline-block; margin: 0 6px 4px 0; padding: 1px 8px; border-radius: 10px; background: #eef1f5; font-size: 11.5px; }
.ml-bi-tag { padding: 0 6px; border-radius: 3px; background: #dcefe3; color: #1e6b3a; font-size: 10.5px; }
.ml-bi-dim { color: #8a9099; font-size: 11.5px; }
.ml-bi-note { margin-top: 6px; color: #8a6d1f; background: #fff7e0; padding: 6px 9px; font-size: 11.5px; }
.ml-bi-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ml-bi-table th, .ml-bi-table td { border: 1px solid #e1e5ea; padding: 4px 8px; text-align: left; }
.ml-bi-table th { background: #f6f8fa; }