/* 이메일 주소 등록/편집 모달 (2026-08-10 신설 · 같은 날 UI 재정리)
 *
 * ⭐구성 = 헤더(주소·유형·사용) → 본론(누가 쓰는가) → 부가(표시명·메모) → 참고(메일 건수).
 *   설명 문구는 **행동을 바꾸는 것만** 남긴다 — 필드 뜻을 되풀이하던 문장을 걷어내니
 *   본문 높이가 절반 가까이 줄었다.
 *
 * ⭐**JS 없이 CSS `:has()` 로 유형 분기** — 라디오(신규)/전환 체크(편집) 상태를 따른다.
 *   프로젝트는 이미 `:has()` 전제(allow_browser :modern).
 * ⚠두 블록은 DOM 에 **모두 남는다**(숨길 뿐이라 양쪽 파라미터가 함께 전송된다).
 *   서버가 주소의 `kind` 를 보고 필요한 쪽만 읽으므로 안전하다 — 화면 상태를 신뢰하지 않는다.
 */

.eaf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
}

/* ── 공통 조각 ─────────────────────────────────────────── */
.eaf-sec { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.eaf-label { font-size: 12px; font-weight: 600; color: #475569; }

.eaf-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  font-size: 13.5px;
  background: #fff;      /* ⚠배경·글자색은 항상 함께 — 강제 다크 대응(개발규칙 10) */
  color: #111827;
}

.eaf-input:focus { outline: 2px solid #bfdbfe; outline-offset: -1px; border-color: #3e6187; }
.eaf-input:disabled { background: #f8fafc; color: #94a3b8; }
.eaf-input::placeholder { color: #b6bfcb; }

/* 보조 문구 — 한 줄이 원칙 */
.eaf-note { margin: 0; font-size: 11px; color: #94a3b8; line-height: 1.55; word-break: keep-all; }
.eaf-note b { color: #64748b; font-weight: 600; }

/* 두 칸 배치(표시명·메모) — 좁으면 자동으로 한 줄씩 */
.eaf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .eaf-cols { grid-template-columns: 1fr; } }

/* ── ① 헤더 (편집) — 주소·유형·사용을 한 줄로 ───────────── */
.eaf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
}

.eaf-head-main { display: flex; align-items: center; gap: 8px; min-width: 0; }

.eaf-head-addr {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eaf-chip {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 600;
  background: #e2e8f0;
  color: #475569;
}

.eaf-chip-shared { background: #ede9fe; color: #6d28d9; }

/* 주소 입력(신규) */
.eaf-addr { display: flex; align-items: center; gap: 7px; }
.eaf-domain { font-size: 13px; color: #64748b; white-space: nowrap; }

/* ── 유형 세그먼트 (신규) ───────────────────────────────── */
.eaf-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.eaf-kind-opt {
  display: block;
  padding: 9px 11px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.eaf-kind-opt input { display: none !important; }
.eaf-kind-opt:hover { border-color: #94a3b8; }

.eaf-kind-opt:has(input:checked) {
  border-color: #3e6187;
  background: #eef3f8;
  box-shadow: inset 0 0 0 1px #3e6187;
}

.eaf-kind-title { display: block; font-size: 13px; font-weight: 600; color: #374151; }
.eaf-kind-opt:has(input:checked) .eaf-kind-title { color: #3e6187; }
.eaf-kind-desc { display: block; margin-top: 2px; font-size: 10.5px; color: #94a3b8; line-height: 1.45; word-break: keep-all; }

/* ── 유형별 블록 노출 ──────────────────────────────────── */
.eaf-personal, .eaf-shared { display: none; }

.eaf:has(input[name="kind"][value="personal"]:checked) .eaf-personal,
.eaf:has(input[name="kind"][value="shared"]:checked)   .eaf-shared,
.eaf-fixed-personal .eaf-personal,
.eaf-fixed-shared   .eaf-shared,
.eaf-fixed-personal:has(input[name="convert_to_shared"]:checked) .eaf-shared {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 전환 체크 시 1인용 블록을 감춘다 (위 규칙보다 뒤에 와야 이긴다) */
.eaf-fixed-personal:has(input[name="convert_to_shared"]:checked) .eaf-personal { display: none; }

/* ── 회원별 권한 표 ────────────────────────────────────── */
.eaf-grid { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; max-height: 240px; overflow-y: auto; }

.eaf-grid-head, .eaf-grid-row {
  display: grid;
  grid-template-columns: 1fr 48px 48px;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
}

.eaf-grid-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
}

.eaf-grid-head span:not(:first-child), .eaf-grid-row span:not(.eaf-member) { text-align: center; }

.eaf-grid-row { border-bottom: 1px solid #f1f5f9; font-size: 12.5px; color: #111827; }
.eaf-grid-row:last-child { border-bottom: 0; }
.eaf-grid-row:nth-child(even) { background: #fafbfc; }
.eaf-grid-row.is-locked { color: #94a3b8; }

.eaf-grid-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #3e6187; cursor: pointer; }
.eaf-grid-row input[type="checkbox"]:disabled { cursor: not-allowed; }

.eaf-member { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.eaf-member > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eaf-pos { flex-shrink: 0; font-size: 10.5px; color: #a3adb9; }

.eaf-off { flex-shrink: 0; padding: 1px 6px; border-radius: 9px; font-size: 10px; font-weight: 600; background: #fef3c7; color: #b45309; }

.eaf-off-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 0;
  background: transparent;
  color: #b45309;
  cursor: pointer;
  line-height: 1;
}

.eaf-off-btn:hover { color: #92400e; }

/* ── 공용 전환 ─────────────────────────────────────────── */
.eaf-convert {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
}

.eaf-convert input { margin-top: 2px; width: 15px; height: 15px; accent-color: #3e6187; flex-shrink: 0; }
.eaf-convert:has(input:checked) { border-color: #fecaca; background: #fef2f2; }

.eaf-convert-text { font-size: 11px; color: #64748b; line-height: 1.55; word-break: keep-all; }
.eaf-convert-text b { color: #475569; }
.eaf-convert:has(input:checked) .eaf-convert-text,
.eaf-convert:has(input:checked) .eaf-convert-text b { color: #991b1b; }

/* ── ④ 주고받은 메일 ──────────────────────────────────── */
.eaf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.eaf-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.eaf-stat.is-on { border-color: #c7d2fe; background: #eef2ff; cursor: pointer; }
.eaf-stat.is-on:hover { background: #e0e7ff; }
.eaf-stat.is-on:focus-visible { outline: 2px solid #3e6187; outline-offset: 1px; }

.eaf-stat-label { flex: 1; font-size: 11.5px; color: #94a3b8; }
.eaf-stat.is-on .eaf-stat-label { color: #3730a3; }

.eaf-stat-value { font-size: 15px; font-weight: 700; color: #cbd5e1; }
.eaf-stat.is-on .eaf-stat-value { color: #312e81; }
.eaf-stat-value small { font-size: 10.5px; font-weight: 500; margin-left: 1px; }

.eaf-stat-arrow { font-size: 15px; color: #818cf8; line-height: 1; }

/* ── 히스토리 탭 (2026-08-10) ──────────────────────────────
 * 이 주소에 일어난 모든 일 — 부여/회수 + 등록·변경·사용중지·전환.
 * 시간순 한 줄씩. 배지로 행위를 먼저 읽고, 상세·실행자는 보조.
 */
.eah { padding: 14px 16px; }

.eah-empty, .eah-note {
  margin: 0;
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.6;
}

.eah-empty { padding: 26px 4px; text-align: center; font-size: 13px; }
.eah-note { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #e5e7eb; }

.eah-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }

.eah-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #fafbfc;
}

.eah-badge {
  flex-shrink: 0;
  min-width: 52px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  background: #f1f5f9;
  color: #64748b;
}

/* 행위별 색 — 늘어남(초록) / 줄어듦(회색) / 되돌릴 수 없음(자주·주황) */
.eah-assigned    { background: #dcfce7; color: #15803d; }
.eah-removed     { background: #f1f5f9; color: #64748b; }
.eah-created     { background: #dbeafe; color: #1d4ed8; }
.eah-updated     { background: #e0e7ff; color: #4338ca; }
.eah-activated   { background: #dcfce7; color: #15803d; }
.eah-deactivated { background: #fef3c7; color: #b45309; }
.eah-converted   { background: #ede9fe; color: #6d28d9; }
.eah-deleted     { background: #fee2e2; color: #b91c1c; }

.eah-body { flex: 1; min-width: 0; }
.eah-line { font-size: 12.5px; color: #0f172a; line-height: 1.5; word-break: break-word; }
.eah-line b { font-weight: 600; }
.eah-detail { color: #64748b; }
.eah-meta { margin-top: 3px; font-size: 10.5px; color: #a3adb9; }