/* 이메일 주소 등록/편집 모달 (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: var(--ord-text-2); }

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

.eaf-input:focus { outline: 2px solid var(--ord-tint-blue-line); outline-offset: -1px; border-color: var(--ord-accent); }
.eaf-input:disabled { background: var(--ord-surface-2); color: var(--ord-text-4); }
.eaf-input::placeholder { color: var(--ord-text-5); }

/* 보조 문구 — 한 줄이 원칙 */
.eaf-note { margin: 0; font-size: 11px; color: var(--ord-text-4); line-height: 1.55; word-break: keep-all; }
.eaf-note b { color: var(--ord-text-3); 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 var(--ord-line);
  border-radius: 9px;
  background: var(--ord-surface-2);
}

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

.eaf-head-addr {
  font-size: 14px;
  font-weight: 600;
  color: var(--ord-text);
  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: var(--ord-line);
  color: var(--ord-text-2);
}

.eaf-chip-shared { background: var(--ord-tint-violet-bg); color: var(--ord-tint-violet-fg); }

/* 주소 입력(신규) */
.eaf-addr { display: flex; align-items: center; gap: 7px; }
.eaf-domain { font-size: 13px; color: var(--ord-text-3); 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 var(--ord-line-2);
  border-radius: 8px;
  background: var(--ord-panel);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.eaf-kind-opt input { display: none !important; }
.eaf-kind-opt:hover { border-color: var(--ord-text-4); }

.eaf-kind-opt:has(input:checked) {
  border-color: var(--ord-accent);
  background: var(--ord-band);
  box-shadow: inset 0 0 0 1px var(--ord-accent);
}

.eaf-kind-title { display: block; font-size: 13px; font-weight: 600; color: var(--ord-text-2); }
.eaf-kind-opt:has(input:checked) .eaf-kind-title { color: var(--ord-accent); }
.eaf-kind-desc { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ord-text-4); 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 var(--ord-line); 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: var(--ord-band);
  border-bottom: 1px solid var(--ord-line);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ord-text-3);
}

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

.eaf-grid-row { border-bottom: 1px solid var(--ord-line-soft); font-size: 12.5px; color: var(--ord-text); }
.eaf-grid-row:last-child { border-bottom: 0; }
.eaf-grid-row:nth-child(even) { background: var(--ord-surface-2); }
.eaf-grid-row.is-locked { color: var(--ord-text-4); }

.eaf-grid-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ord-accent); 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: var(--ord-text-4); }

.eaf-off { flex-shrink: 0; padding: 1px 6px; border-radius: 9px; font-size: 10px; font-weight: 600; background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); }

.eaf-off-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--ord-tint-amber-fg);
  cursor: pointer;
  line-height: 1;
}

.eaf-off-btn:hover { color: var(--ord-tint-amber-fg); }

/* ── 공용 전환 ─────────────────────────────────────────── */
.eaf-convert {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 11px;
  border: 1px solid var(--ord-line);
  border-radius: 8px;
  background: var(--ord-surface-2);
  cursor: pointer;
}

.eaf-convert input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--ord-accent); flex-shrink: 0; }
.eaf-convert:has(input:checked) { border-color: var(--ord-tint-red-line); background: var(--ord-tint-red-bg); }

.eaf-convert-text { font-size: 11px; color: var(--ord-text-3); line-height: 1.55; word-break: keep-all; }
.eaf-convert-text b { color: var(--ord-text-2); }
.eaf-convert:has(input:checked) .eaf-convert-text,
.eaf-convert:has(input:checked) .eaf-convert-text b { color: var(--ord-tint-red-fg); }

/* ── ④ 주고받은 메일 ──────────────────────────────────── */
.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 var(--ord-line);
  border-radius: 8px;
  background: var(--ord-surface-2);
}

.eaf-stat.is-on { border-color: var(--ord-tint-blue-line); background: var(--ord-tint-indigo-bg); cursor: pointer; }
.eaf-stat.is-on:hover { background: var(--ord-tint-blue-bg); }
.eaf-stat.is-on:focus-visible { outline: 2px solid var(--ord-accent); outline-offset: 1px; }

.eaf-stat-label { flex: 1; font-size: 11.5px; color: var(--ord-text-4); }
.eaf-stat.is-on .eaf-stat-label { color: var(--ord-tint-indigo-fg); }

.eaf-stat-value { font-size: 15px; font-weight: 700; color: var(--ord-line-2); }
.eaf-stat.is-on .eaf-stat-value { color: var(--ord-tint-indigo-fg); }
.eaf-stat-value small { font-size: 10.5px; font-weight: 500; margin-left: 1px; }

.eaf-stat-arrow { font-size: 15px; color: var(--ord-tint-blue-fg); line-height: 1; }

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

.eah-empty, .eah-note {
  margin: 0;
  font-size: 11.5px;
  color: var(--ord-text-4);
  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 var(--ord-line); }

.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 var(--ord-line-soft);
  border-radius: 8px;
  background: var(--ord-surface-2);
}

.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: var(--ord-band);
  color: var(--ord-text-3);
}

/* 행위별 색 — 늘어남(초록) / 줄어듦(회색) / 되돌릴 수 없음(자주·주황) */
.eah-assigned    { background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); }
.eah-removed     { background: var(--ord-band); color: var(--ord-text-3); }
.eah-created     { background: var(--ord-tint-blue-bg); color: var(--ord-tint-blue-fg); }
.eah-updated     { background: var(--ord-tint-blue-bg); color: var(--ord-tint-indigo-fg); }
.eah-activated   { background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); }
.eah-deactivated { background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); }
.eah-converted   { background: var(--ord-tint-violet-bg); color: var(--ord-tint-violet-fg); }
.eah-deleted     { background: var(--ord-tint-red-bg); color: var(--ord-tint-red-fg); }

.eah-body { flex: 1; min-width: 0; }
.eah-line { font-size: 12.5px; color: var(--ord-text); line-height: 1.5; word-break: break-word; }
.eah-line b { font-weight: 600; }
.eah-detail { color: var(--ord-text-3); }
.eah-meta { margin-top: 3px; font-size: 10.5px; color: var(--ord-text-4); }