feat(frontend): 주소록 화면 · 메일 연동

레일의 주소록 모듈 — 내 연락처 · 그룹 · 사내 목록(직원 · 공용 주소), 초성 찾기, 연락처 추가 · 고치기 창, 그룹 · 구성원 넣기 —
과 메일 연동(받는 사람 추천의 주소록 · 그룹, 연락처 · 그룹 · 사내의 [메일 쓰기], 읽기 화면 ⋯ 「보낸 사람을 주소록에 추가」)을 더한다.
디자인 README "8단계", 계약 3절.

리뷰로 고친 것:
- 쓰기 화면을 채우는 라우터 상태에 연 직원을 싣는다 — 같은 탭에서 다른 직원이 로그인한 뒤 뒤로 가면 앞 직원의 받는 사람이 채워졌다.
- [고치기]는 창을 열 때 새로 받고 바꾼 칸만 보낸다 — 받아 둔 값으로 다른 탭 · 휴대폰의 변경을 덮었다. 검사도 바꾼 칸만.
- [되돌리기]는 서버의 되돌리기 표로 — 다시 만들기로는 다른 프로그램의 칸 · uid 를 잃었다.
- 읽기 화면에서 연 연락처 추가 창을 메일 레이아웃으로 옮겼다 — 메일을 바꾸면 쓴 것이 확인 없이 사라졌다.
- 그룹을 이어 고르면 앞 그룹이 빠지던 것, 저장 중 창을 닫으면 거절이 묻히던 것, 구성원 넣기의 첫 쪽이 모두 구성원이면 막히던 것(excludeGroupId).
- 받는 사람 추천은 초성 · 조합 중 글자도 서버에 묻는다(서버가 같은 맞추기 — 같은 표본 표를 두 쪽 테스트에 둔다).
- 바꿀 때마다 불러온 쪽을 모두 다시 받지 않고 응답을 서버 차례로 그 자리에 넣는다.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/styles/base.css

@@ -92,6 +92,27 @@ a:hover {
   box-shadow: var(--shadow-segment);
 }
 
+/*
+ * 테두리 전환 — 주소록 구성원 넣기 창의 「내 연락처 | 사내 직원」 (디자인 원본 ContactsEdit): 흰 바탕 · 테두리, 고른 칸은 청록 옅은 바탕.
+ * 높이 · 밀도 예외(36)는 .segmented 와 같다. 사용: <div role="group" class="segmented segmented--outline">…</div>
+ */
+.segmented--outline {
+  border: var(--border-width) solid var(--color-border-strong);
+  background: var(--color-surface);
+}
+
+.segmented--outline .segmented__item {
+  color: var(--color-text-strong);
+  font-weight: 500;
+}
+
+.segmented--outline .segmented__item[aria-pressed='true'] {
+  background: var(--color-brand-subtle);
+  color: var(--color-brand-strong);
+  font-weight: 600;
+  box-shadow: none;
+}
+
 /*
  * 테두리 있는 입력칸 — 설정 화면 · 메일함 이름 대화상자 (디자인 원본 SettingsAccount · SettingsVacation · MailboxManage 의 .field · .pw-box)
  * 높이 44 · 테두리 #D0D5DD. 초점은 강조색 1px 테두리 + 1px 그림자(상단 검색 칸과 같다), 오류는 빨간 테두리, 꺼진 칸은 흐리게.

frontend/src/styles/tokens.css

@@ -171,6 +171,12 @@
    */
   --size-filter-control: 2.5rem; /* 40px — 고치기 창의 조건 줄 · 옮길 메일함 · 전달 주소 칸 · [조건 더하기] 높이 · 밀도 예외 */
   --size-filter-remove: 2.25rem; /* 36px — 조건 ✕ 폭 (높이는 --size-filter-control) · 밀도 예외 */
+  /*
+   * 8단계(주소록) 밀도 예외 — 새 토큰 없이 위의 것을 다시 쓴다 (디자인 README "8단계 — 주소록", 사용자 확정 캔버스).
+   *   패널의 그룹 줄 ⋯ 32×40(--size-mailbox-more × --size-row-min — 메일함 ⋯ 와 같다, MailboxMoreButton) ·
+   *   연락처 창의 이메일 · 전화번호 줄(종류 · 값) · [이메일 · 전화번호 더하기] · 회사 · 부서 · 직책 칸 높이 40(--size-filter-control) · 줄 ✕ 36×40(--size-filter-remove) ·
+   *   구성원 넣기 창의 「내 연락처 | 사내 직원」 36(--size-segment-item-lg — .segmented) · 찾기 칸 40(--size-filter-control)
+   */
   --size-status-dot: 0.5rem; /* 8px — 설정 › 알림의 실시간 연결 점 */
   --size-option-input: 1.125rem; /* 18px — 설정 화면의 고르기 상자 · 라디오 (줄 전체가 44px 로 눌린다) */
   --form-max-width: 26.25rem; /* 420px — 비밀번호 칸 (디자인 원본 SettingsAccount) */