/**
 * ==============================================================================
 * 파일명: public/css/style.css
 * 설명: 호연 웹메일 전용 스타일시트 (스카이 블루 / 하늘색 프리미엄 테마)
 * 디자인 컨셉:
 *   - 메인 포인트: 세련되고 신뢰감 있는 스카이 블루 (#0091FF) & 딥 블루 (#0066CC)
 *   - 메일함 선택: 파스텔 스카이 블루 (#E8F3FF) & 액티브 텍스트 (#0066CC)
 *   - 회사 공식 로고 브랜딩 및 가로형 와이드 테이블 리스트
 *   - '내 메일함' 수정/삭제 액션 버튼 및 '수신확인' 전용 대시보드 지원
 * ==============================================================================
 */

/* -------------------------------------------------------------------------- */
/* 1. 디자인 시스템 토큰 & 리셋                                                 */
/* -------------------------------------------------------------------------- */
:root {
  /* 세련된 하늘색 (스카이 블루) 컬러 시스템 */
  --sky-blue-main: #0091FF;
  --sky-blue-hover: #007EE5;
  --sky-blue-dark: #0066CC;
  --sky-blue-light: #EBF5FF;
  --sky-blue-border: rgba(0, 145, 255, 0.35);

  /* 활성화된 메일함 파스텔 블루 */
  --naver-blue-bg: #E8F3FF;
  --naver-blue-text: #0066CC;
  --naver-blue-hover: #DDEEFF;

  /* 텍스트 & 모노톤 색상 */
  --text-primary: #1e1e1e;
  --text-regular: #333333;
  --text-muted: #767676;
  --text-subtle: #999999;
  --text-light: #b0b0b0;

  /* 배경 & 테두리 (사이드바 연한 음영 배경 적용) */
  --bg-body: #ffffff;
  --bg-sidebar: #f8fafc; /* 좌측 사이드바 은은한 쿨그레이 음영 배경 */
  --bg-hover: #f1f5f9;
  --bg-selected: #e0f2fe;
  --border-light: #e2e8f0;
  --border-subtle: #edf2f7;
  --border-active: #cbd5e1;

  /* 중요 별표 & 상태 */
  --star-gold: #f59e0b;
  --danger-color: #ef4444;

  /* 타이포그래피 */
  --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-body);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

/* -------------------------------------------------------------------------- */
/* 2. 전체 앱 레이아웃 구조                                                     */
/* -------------------------------------------------------------------------- */
.naver-mail-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.naver-body {
  display: flex;
  flex: 1;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* 3. 최상단 글로벌 헤더 (회사 공식 로고)                                       */
/* -------------------------------------------------------------------------- */
.naver-header {
  height: 56px;
  min-height: 56px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
}

/* 로고 영역 (회사 공식 로고 + 웹메일 배지) */
.header-left {
  display: flex;
  align-items: center;
  width: 270px;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
}

.header-brand-logo {
  height: 38px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

/* 회사 로고 글씨('호연네트웍스')와 완벽히 일직선으로 정렬되고 20% 더 커진 웹메일 배지 */
.brand-sub-badge {
  font-size: 20.5px; /* 기존 17px 대비 20% 추가 확대 (17px * 1.2 = 20.4px) */
  font-weight: 700;
  color: #0066cc;
  background-color: #ebf5ff;
  border: 1px solid #cde4ff;
  padding: 0 14px;
  height: 38px; /* 회사 로고 이미지 높이와 1:1 일치 */
  box-sizing: border-box;
  border-radius: 6px;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* 로고 이미지 내 '호연네트웍스' 글씨의 수평 라인과 '웹메일' 글씨가 완벽하게 일직선을 이루도록 정밀 오프셋 */
  margin-top: 3px;
  transition: all 0.15s ease;
}

.brand-link:hover .brand-sub-badge {
  background-color: #dbeafe;
  border-color: #bfdbfe;
}

/* 중앙: 서비스 퀵메뉴 허브 (아이콘 + 글씨 복합 알약 버튼 그룹) */
.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.quick-service-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #f8fafc;
  padding: 3px 6px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

.quick-nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #475569;
  font-size: 12.5px;
  font-weight: 600;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
}

.quick-nav-btn i {
  font-size: 12.5px;
  color: #64748b;
  transition: color 0.15s ease;
}

.quick-nav-btn:hover {
  background-color: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.quick-nav-btn:hover i {
  color: #0066cc;
}

/* ============================================================================== */
/* 4대 연동 서비스별 고유 아이콘 컬러 & 인터랙션 스타일링                         */
/* ============================================================================== */

/* 2. 호연ERP (성장과 회계의 에메랄드 그린) */
.quick-nav-btn.btn-erp i {
  color: #10b981;
}
.quick-nav-btn.btn-erp:hover {
  background-color: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.quick-nav-btn.btn-erp:hover i {
  color: #059669;
}

/* 3. 홈페이지 (글로벌 네트워크의 인디고 블루) */
.quick-nav-btn.btn-home i {
  color: #6366f1;
}
.quick-nav-btn.btn-home:hover {
  background-color: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}
.quick-nav-btn.btn-home:hover i {
  color: #4f46e5;
}

/* 4. 드라이브 (시놀로지 파일 스토리지 앰버 골드/오렌지) */
.quick-nav-btn.btn-drive i {
  color: #f59e0b;
}
.quick-nav-btn.btn-drive:hover {
  background-color: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.quick-nav-btn.btn-drive:hover i {
  color: #d97706;
}

/* 5. 메일설정 (세련된 환경설정 로즈 핑크 + 기어 30도 회전 애니메이션) */
.quick-nav-btn.btn-settings i {
  color: #ec4899;
  transition: transform 0.25s ease, color 0.15s ease;
}
.quick-nav-btn.btn-settings:hover {
  background-color: #fdf2f8;
  border-color: #fbcfe8;
  color: #9d174d;
}
.quick-nav-btn.btn-settings:hover i {
  color: #db2777;
  transform: rotate(30deg);
}

.quick-icon-btn {
  display: none;
}

/* 우측: 사용자 프로필, 서버 설정, 알림, 도트 메뉴 */
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-profile-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.user-profile-widget:hover {
  background-color: #f2f3f5;
}

.profile-avatar {
  width: 30px;
  height: 30px;
  background-color: var(--sky-blue-light);
  color: var(--sky-blue-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  border: 1.5px solid #cbd5e1;
  flex-shrink: 0;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.profile-name {
  font-size: 13px;
  font-weight: 600;
  color: #333333;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================== */
/* 계정 정보 플로팅 카드 (내 계정 정보 팝업 및 원형 프로필 사진 관리)                */
/* ============================================================================== */
.profile-dropdown-card {
  position: absolute;
  top: 50px;
  right: 90px;
  width: 290px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #cbd5e1;
  z-index: 1050;
  overflow: hidden;
  animation: profileCardFadeIn 0.18s ease-out;
}

@keyframes profileCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.profile-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-card-body {
  padding: 18px 16px 14px 16px;
}

/* 중앙 원형 프로필 사진 및 카메라 오버레이 */
.profile-photo-center-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.profile-photo-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border: 2.5px solid #0066cc;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 102, 204, 0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}

.profile-photo-circle:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 14px rgba(0, 102, 204, 0.25);
}

.profile-photo-circle i.fa-user {
  font-size: 32px;
  color: #0066cc;
}

.profile-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.photo-camera-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11px;
  transition: background-color 0.2s;
}

.profile-photo-circle:hover .photo-camera-overlay {
  background-color: rgba(0, 102, 204, 0.75);
}

.photo-actions-btns {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.btn-sub-xs {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.btn-sub-xs:hover {
  background-color: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.btn-sub-xs.text-danger {
  color: #ef4444;
  border-color: #fecaca;
}

.btn-sub-xs.text-danger:hover {
  background-color: #fee2e2;
  color: #dc2626;
}

/* 필드 행 */
.profile-field-row {
  margin-bottom: 12px;
}

.profile-field-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 5px;
}

.profile-field-row input[type="text"] {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.profile-field-row input[type="text"]:focus {
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
}

.profile-email-badge {
  font-size: 12px;
  color: #64748b;
  background-color: #f8fafc;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  word-break: break-all;
  font-family: monospace;
}

.profile-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: #f8fafc;
  border-top: 1px solid #f1f5f9;
}

.profile-arrow {
  font-size: 10px;
  color: #888888;
}

.header-util-btn {
  background: transparent;
  border: none;
  color: #666666;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s;
}

.header-util-btn:hover {
  background-color: #f2f3f5;
  color: #111111;
}

.header-noti-badge {
  position: relative;
  font-size: 17px;
  color: #666666;
  cursor: pointer;
  padding: 6px;
}

.header-noti-badge:hover {
  color: #111111;
}

.noti-count-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #ff334b;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* -------------------------------------------------------------------------- */
/* 4. 좌측 사이드바 (하늘색 테마 및 내 메일함 관리)                            */
/* -------------------------------------------------------------------------- */
.naver-sidebar {
  width: 260px;
  min-width: 260px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-light);
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.025);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  overflow-y: auto;
}

/* 1) 5:5 메일쓰기 & 내게쓰기 버튼 그룹 (하늘색 계열) */
.sidebar-compose-group {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.btn-naver-compose {
  flex: 1;
  height: 40px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.3px;
  font-family: inherit;
  box-sizing: border-box;
}

.btn-naver-compose:active {
  transform: scale(0.97);
}

.btn-naver-compose i {
  font-size: 13px;
}

/* 1. 메일쓰기 (주요 액션: 당당하고 신뢰감 넘치는 프리미엄 로열 블루) */
.btn-naver-compose.primary {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
  color: #ffffff;
  border: 1px solid #0052a3;
  box-shadow: 0 2px 6px rgba(0, 102, 204, 0.22);
}

.btn-naver-compose.primary:hover {
  background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%);
  border-color: #003d7a;
  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.32);
}

.btn-naver-compose.primary i {
  color: #ffffff;
}

/* 2. 내게쓰기 (메일쓰기[파랑]와 완전히 다른 산뜻한 에메랄드 그린 솔리드) */
.btn-naver-compose.self {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid #047857;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.22);
}

.btn-naver-compose.self:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: #065f46;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.32);
}

.btn-naver-compose.self i {
  color: #ffffff;
}

/* 2) 4분할 원클릭 빠른 필터 박스 (하늘색 포인트) */
.quick-stat-filter-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.stat-filter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: var(--radius-xs);
  transition: all 0.15s ease;
}

.stat-filter-item:hover {
  background-color: #f1f3f5;
}

.stat-filter-item.active {
  color: var(--sky-blue-main);
  font-weight: 700;
}

.stat-filter-item .stat-num {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.stat-filter-item .stat-icon {
  font-size: 13px;
  color: #475569;
  line-height: 1.2;
}

.stat-filter-item.active .stat-icon {
  color: var(--sky-blue-main);
}

.stat-filter-item .stat-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  margin-top: 3px;
}

.stat-filter-item.active .stat-label {
  color: var(--sky-blue-main);
}

/* 3) 메일함 목록 네비게이션 */
.sidebar-folder-nav {
  flex: 1;
}

.folder-list {
  list-style: none;
}

.folder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 600;
  transition: all 0.15s ease;
  gap: 6px;
}

.folder-item:hover {
  background-color: #eef2f6;
  color: #0066cc;
}

/* 활성화된 받은메일함: 은은한 파스텔 블루 알약 배경 */
.folder-item.active {
  background-color: var(--naver-blue-bg) !important;
  color: var(--naver-blue-text) !important;
  font-weight: 700;
  border-radius: 6px;
}

.folder-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}

.folder-icon {
  font-size: 15px;
  color: #475569;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.folder-item.active .folder-icon {
  color: var(--naver-blue-text) !important;
}

.folder-name {
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 600;
}

.btn-folder-clean {
  background: transparent;
  border: none;
  font-size: 10.5px;
  color: #94a3b8;
  cursor: pointer;
  padding: 1px 3px;
  white-space: nowrap;
}

.btn-folder-clean:hover {
  color: #334155;
  text-decoration: underline;
}

/* 메일함 우측 보조 액션 및 카운터 정렬 컨테이너 */
.folder-item-right-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.folder-item-right-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* 메일함 옆 실제 메일 수 카운터 뱃지 (파스텔 블루 알약 형태) */
.folder-badge-count {
  font-size: 11px;
  font-weight: 700;
  color: #0066cc;
  background-color: #e6f0fa;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
  display: inline-block;
  white-space: nowrap;
  transition: all 0.15s ease;
}

/* 현재 선택되어 활성화된 메일함의 뱃지 (깔끔한 화이트 알약) */
.folder-item.active .folder-badge-count {
  background-color: #ffffff !important;
  color: #0066cc !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}


/* 보낸메일함 우측 수신확인 바로가기 아이콘 버튼 */
.btn-sub-receive-check {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 16px;
}

.btn-sub-receive-check:hover {
  background-color: var(--sky-blue-light);
  border-color: var(--sky-blue-main);
  color: var(--sky-blue-main);
}

.folder-item.active .btn-sub-receive-check {
  background: #ffffff;
  border-color: var(--sky-blue-main);
  color: var(--sky-blue-main);
}

.btn-sub-receive-check.active {
  background-color: var(--sky-blue-main) !important;
  border-color: var(--sky-blue-main) !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* 수신확인 테이블 내 개별 삭제 버튼 */
.btn-receive-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #ef4444;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-receive-delete:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* 내 메일함 접이식 헤더 */
.custom-folder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 4px 10px;
  margin-top: 6px;
  border-top: 1px solid #e2e8f0;
}

.custom-folder-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
}

.custom-folder-title .toggle-arrow {
  font-size: 10px;
  transition: transform 0.2s;
}

.btn-add-custom-folder {
  background: transparent;
  border: none;
  font-size: 12px;
  color: #999999;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s;
}

.btn-add-custom-folder:hover {
  color: var(--sky-blue-main);
  background-color: var(--sky-blue-light);
}

.custom-folder-sublist {
  padding-left: 4px;
}

.folder-item.sub-item {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  padding: 6px 8px;
}

.folder-item.sub-item .folder-icon {
  font-size: 14px;
  color: #64748b;
}

.folder-item.sub-item:hover {
  background-color: #eef2f6;
  color: #0066cc;
}

/* 내 메일함 수정 & 삭제 버튼 그룹 */
.custom-folder-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.folder-item.sub-item:hover .custom-folder-actions {
  opacity: 1;
}

.btn-folder-action {
  background: transparent;
  border: none;
  font-size: 11px;
  color: #999999;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.15s;
}

.btn-folder-action.edit:hover {
  color: var(--sky-blue-main);
  background-color: #e5f2ff;
}

.btn-folder-action.delete:hover {
  color: var(--danger-color);
  background-color: #fee2e2;
}

.lower-folder-list {
  margin-top: 10px;
  border-top: 1px solid #f0f0f0;
  padding-top: 6px;
}

/* 4) 사이드바 하단 전체 메일 용량 게이지 위젯 (클릭 시 메일 설정 > 메일함 관리) */
.sidebar-quota-widget {
  margin-top: auto;
  padding: 11px 13px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.sidebar-quota-widget:hover {
  background-color: #f0f7ff;
  border-color: #bae6fd;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.09);
  transform: translateY(-1px);
}

.quota-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

.quota-label-group {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #334155;
  font-weight: 600;
  font-size: 11.5px;
}

.quota-icon {
  font-size: 11.5px;
  color: #0066cc;
}

.quota-val-group {
  font-size: 11px;
  color: #64748b;
}

.quota-val-group strong {
  color: #0066cc;
  font-weight: 700;
  font-size: 11.5px;
}

.quota-limit {
  color: #94a3b8;
  font-size: 10.5px;
}

/* 게이지 바 트랙 & 필 */
.quota-bar-track {
  width: 100%;
  height: 5px;
  background-color: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

.quota-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0091ff 0%, #0066cc 100%);
  border-radius: 3px;
  transition: width 0.35s ease;
}

.notice-sub {
  font-size: 10px;
  color: #aaaaaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-app-download {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--sky-blue-main);
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
}

.sidebar-app-download:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* 5. 메인 영역 (상단 탭 바 + 툴바 + 가로형 테이블 목록)                         */
/* -------------------------------------------------------------------------- */
.naver-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  overflow: hidden;
}

/* 1) 상단 탭 바 (하늘색 알약형 뱃지) */
.naver-top-tab-row {
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #f0f0f0;
}

.tab-pill-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--sky-blue-main);
  border: 1px solid var(--sky-blue-main);
  background-color: var(--sky-blue-light);
  cursor: pointer;
}

.btn-tab-add {
  background: transparent;
  border: none;
  font-size: 12px;
  color: #999999;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-tab-add:hover {
  background-color: #f2f3f5;
  color: #333333;
}

/* 우측 상단 메일 검색창 */
.header-search-area {
  display: flex;
  align-items: center;
}

.naver-search-input-box {
  display: flex;
  align-items: center;
  border: 1px solid #dcdcdc;
  border-radius: var(--radius-sm);
  background-color: #fbfbfb;
  padding: 2px 4px;
  width: 250px;
  transition: all 0.2s ease;
}

.naver-search-input-box:focus-within {
  border-color: var(--sky-blue-main);
  background-color: #ffffff;
  box-shadow: 0 0 0 1px var(--sky-blue-border);
}

.naver-search-input-box input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 5px 8px;
  font-size: 12px;
  outline: none;
}

.btn-search-icon {
  background: transparent;
  border: none;
  color: #767676;
  font-size: 13px;
  padding: 4px 6px;
  cursor: pointer;
}

.btn-search-icon:hover {
  color: var(--sky-blue-main);
}

.btn-search-detail {
  background: transparent;
  border: none;
  border-left: 1px solid #e0e0e0;
  font-size: 11px;
  color: #666666;
  padding: 3px 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
}

.btn-search-detail:hover {
  color: #111111;
}

/* ========================================================================== */
/* 상세 조건 검색 드롭다운 카드 팝업 레이어                                   */
/* ========================================================================== */
.detail-search-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 360px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 16px 18px;
  z-index: 600;
  animation: fadeInDown 0.15s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 14px;
}

.detail-search-header h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-close-popover {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 4px;
}

.btn-close-popover:hover {
  color: #0f172a;
}

.detail-search-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-search-row {
  display: flex;
  align-items: center;
}

.detail-search-row label {
  width: 78px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  flex-shrink: 0;
}

.detail-search-row input[type="text"] {
  flex: 1;
  height: 30px;
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 0 8px;
  color: #1e293b;
  outline: none;
  transition: border-color 0.15s ease;
}

.detail-search-row input[type="text"]:focus {
  border-color: #0066cc;
  box-shadow: 0 0 0 1px #0066cc;
}

.detail-search-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid #e2e8f0;
}

/* 2) 네이버 메일 액션 툴바 */
.naver-action-toolbar {
  height: 42px;
  min-height: 42px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.toolbar-left-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 체크박스 & 드롭다운 */
.select-all-box {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
}

.custom-checkbox {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.custom-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.custom-checkbox:hover input ~ .checkmark {
  border-color: #999999;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: var(--sky-blue-main);
  border-color: var(--sky-blue-main);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.btn-dropdown-arrow {
  background: transparent;
  border: none;
  font-size: 10px;
  color: #767676;
  cursor: pointer;
  padding: 2px;
}

.btn-tool-action {
  background: transparent;
  border: none;
  font-size: 12px;
  color: #333333;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background-color 0.15s;
}

.btn-tool-action:hover {
  background-color: #f2f3f5;
  color: #111111;
}

.btn-tool-action.disabled {
  color: #b0b0b0;
  cursor: default;
}

.btn-tool-action.disabled:hover {
  background-color: transparent;
}

.toolbar-separator {
  color: #e0e0e0;
  font-size: 12px;
  margin: 0 2px;
}

.toolbar-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #555555;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--radius-xs);
}

.toolbar-dropdown-btn:hover {
  background-color: #f2f3f5;
  color: #111111;
}

.toolbar-dropdown-btn i {
  font-size: 10px;
  color: #888888;
}

/* 카운터 (하늘색 포인트) */
.selection-counter {
  font-size: 12px;
  color: #888888;
  margin-left: 6px;
}

.selection-counter .selected-num {
  font-weight: 700;
  color: var(--sky-blue-main);
}

/* 우측 툴바 버튼 */
.toolbar-right-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-tool-icon {
  background: transparent;
  border: none;
  font-size: 13px;
  color: #666666;
  padding: 5px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-tool-icon:hover {
  background-color: #f2f3f5;
  color: #111111;
}

.mini-caret {
  font-size: 9px;
  color: #999999;
}

/* -------------------------------------------------------------------------- */
/* 6. 가로형 와이드 메일 목록 테이블                                             */
/* -------------------------------------------------------------------------- */
.naver-mail-list-view {
  flex: 1;
  overflow-y: auto;
  position: relative;
  background-color: #ffffff;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
  text-align: center;
}

.empty-icon-wrap {
  width: 64px;
  height: 64px;
  background-color: #f3f4f6;
  color: #9ca3af;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 16px;
}

.empty-title {
  font-size: 16px;
  font-weight: 700;
  color: #222222;
  margin-bottom: 6px;
}

.empty-sub {
  font-size: 13px;
  color: #777777;
  margin-bottom: 20px;
}

.btn-naver-primary {
  background-color: var(--sky-blue-main);
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s;
}

.btn-naver-primary:hover {
  background-color: var(--sky-blue-hover);
}

.btn-naver-primary:active {
  transform: scale(0.99);
}

/* 테이블 래퍼 */
.mail-table-wrap {
  width: 100%;
}

.naver-mail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.naver-mail-table tbody tr {
  height: 40px;
  border-bottom: 1px solid #f1f2f4;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.naver-mail-table tbody tr:hover {
  background-color: #f7f9fa;
}

.naver-mail-table tbody tr.selected-row {
  background-color: #f0f6ff;
}

.naver-mail-table td {
  padding: 0 4px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 체크박스 셀 */
.td-checkbox {
  padding-left: 20px !important;
  text-align: center;
}

/* 별표 중요 표시 셀 */
.td-star {
  text-align: center;
  cursor: pointer;
}

.mail-star-icon {
  color: #d1d5db;
  font-size: 13px;
  transition: color 0.15s;
}

.mail-star-icon:hover {
  color: var(--star-gold);
}

.mail-star-icon.starred {
  color: var(--star-gold);
}

/* 편지봉투 읽음/안읽음 셀 */
.td-envelope {
  text-align: center;
}

.mail-envelope-icon {
  font-size: 13px;
  color: #9ca3af;
}

.mail-envelope-icon.unread {
  color: var(--sky-blue-main);
}

/* 첨부파일 클립 셀 */
.td-clip {
  text-align: center;
}

.mail-clip-icon {
  font-size: 12px;
  color: #888888;
}

/* 보낸 사람 셀 */
.td-sender {
  font-size: 13px;
  color: #333333;
  padding-right: 12px !important;
}

.mail-row.unread .td-sender {
  font-weight: 700;
  color: #111111;
}

/* 메일 제목 셀 */
.td-subject {
  padding-right: 16px !important;
}

.subject-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.subject-text {
  font-size: 13px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-row.unread .subject-text {
  font-weight: 700;
  color: #111111;
}

.subject-preview-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.naver-mail-table tbody tr:hover .subject-preview-icons {
  opacity: 1;
}

.preview-sub-icon {
  font-size: 11px;
  color: #999999;
  cursor: pointer;
}

.preview-sub-icon:hover {
  color: #333333;
}

/* 수신 날짜 셀 */
.td-date {
  text-align: right;
  padding-right: 20px !important;
  font-size: 12px;
  color: #888888;
}

.mail-row.unread .td-date {
  font-weight: 600;
  color: #555555;
}

/* -------------------------------------------------------------------------- */
/* 7. 수신확인 전용 대시보드 테이블                                              */
/* -------------------------------------------------------------------------- */
.receive-check-wrap {
  width: 100%;
}

.receive-table th {
  background-color: #fafbfc;
  height: 38px;
  font-size: 12px;
  font-weight: 600;
  color: #555555;
  border-bottom: 1px solid #ebebeb;
}

.receive-table td {
  padding: 8px 10px !important;
}

.badge-receive-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.badge-receive-status.read {
  background-color: #e6fffa;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.badge-receive-status.unread {
  background-color: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.btn-cancel-mail {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  color: #4b5563;
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-cancel-mail:hover {
  background-color: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* -------------------------------------------------------------------------- */
/* 8. 메일 상세 본문 뷰어 (상세 보기)                                            */
/* -------------------------------------------------------------------------- */
.naver-detail-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  overflow-y: auto;
}

.detail-top-nav {
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 중복 목록 버튼 제거 후 액션 버튼들을 우측으로 깔끔하게 정렬 */
  padding: 0 24px;
  border-bottom: 1px solid var(--border-light);
  background-color: #fafbfc;
}

.btn-back-to-list {
  background: #ffffff !important;
  border: 1.5px solid #0091FF !important;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #0091FF !important;
  cursor: pointer !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 145, 255, 0.12);
  transition: all 0.15s ease;
}

.btn-back-to-list:hover {
  background-color: #f0f7ff !important;
  border-color: #0077d9 !important;
  color: #0077d9 !important;
  transform: translateX(-2px);
}

.btn-tool-back {
  background: #ffffff !important;
  border: 1.5px solid #0091FF !important;
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0091FF !important;
  cursor: pointer !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 145, 255, 0.12);
  transition: all 0.15s ease;
}

.btn-tool-back:hover {
  background-color: #f0f7ff !important;
  border-color: #0077d9 !important;
  color: #0077d9 !important;
  transform: translateX(-2px);
}

.detail-quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-detail-action {
  background: #ffffff;
  border: 1px solid #d5d9de;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 12px;
  color: #444444;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}

.btn-detail-action:hover {
  background-color: #f5f6f8;
  color: #111111;
}

.mail-read-card {
  padding: 24px 30px;
  max-width: 1080px;
}

.read-subject-row {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-detail-star {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  transition: transform 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.btn-detail-star:hover {
  transform: scale(1.15);
}

.read-subject {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  line-height: 1.4;
  word-break: break-all;
  flex: 1;
}

.read-meta-box {
  background-color: #f9fafb;
  border: 1px solid #eef0f2;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.meta-line {
  display: flex;
  align-items: center;
}

.meta-label {
  width: 70px;
  color: #767676;
}

.meta-value {
  color: #222222;
}

.bold-from {
  font-weight: 700;
  color: #111111;
}

.date-val {
  color: #666666;
}

/* 첨부파일 영역 */
.read-attachment-area {
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 20px;
  background-color: #fafbfc;
}

.att-header-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #444444;
  margin-bottom: 8px;
}

.att-item-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.att-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: #333333;
  cursor: pointer;
  transition: all 0.15s;
}

.att-item:hover {
  border-color: var(--sky-blue-main);
  color: var(--sky-blue-main);
  background-color: var(--sky-blue-light);
}

.read-body-wrapper {
  padding-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: #222222;
  min-height: 250px;
  word-break: break-all;
}

/* 본문 내 이미지 반응형 기본 스타일 */
.read-body-wrapper img {
  max-width: 100%;
  height: auto;
}

/* 호연네트웍스 명함/직인 이미지 크기 최적화 (기존 480px 대비 30% 축소하여 336px로 스마트하게 축소 표시) */
.read-body-wrapper img[alt*="명함"],
.read-body-wrapper img[src*="회사로고"],
.read-body-wrapper div:has(> img[alt*="명함"]) img {
  max-width: 336px !important;
  width: auto !important;
  height: auto !important;
  display: block;
}

/* -------------------------------------------------------------------------- */
/* 9. 모달 창 스타일 (하늘색 테마)                                             */
/* -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.modal-dialog {
  background-color: #ffffff;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-light);
  background-color: #fbfbfb;
}

.modal-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #111111;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 20px;
  color: #888888;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.modal-close:hover {
  background-color: #f0f0f0;
  color: #111111;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  max-height: 75vh;
}

.modal-desc {
  font-size: 12px;
  color: #666666;
  margin-bottom: 16px;
  line-height: 1.5;
  background-color: #f7fafc;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--sky-blue-main);
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #444444;
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d5d9de;
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--sky-blue-main);
  box-shadow: 0 0 0 1px var(--sky-blue-border);
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-group.half {
  flex: 1;
}

.form-help {
  display: block;
  font-size: 11px;
  color: #888888;
  margin-top: 4px;
}

.modal-footer {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px;
  border-top: 1px solid var(--border-light);
  background-color: #fbfbfb;
}

.btn-secondary {
  background-color: #ffffff;
  border: 1px solid #d5d9de;
  color: #555555;
  padding: 7px 14px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #f7f9fa;
  color: #111111;
}

.btn-danger {
  background-color: #ef4444;
  color: #ffffff;
  border: none;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.login-feedback {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  display: none;
  margin-top: 10px;
}

.login-feedback.error {
  display: block;
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.login-feedback.success {
  display: block;
  background-color: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* 메일 쓰기 모달 대화상자 특화 */
.compose-dialog {
  max-width: 760px;
}

.compose-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
}

.compose-label {
  width: 70px;
  font-size: 12px;
  font-weight: 600;
  color: #444444;
}

.compose-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d5d9de;
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
}

.compose-input:focus {
  border-color: var(--sky-blue-main);
  box-shadow: 0 0 0 1px var(--sky-blue-border);
}

.compose-editor-area {
  margin-top: 12px;
}

.compose-editor-area textarea {
  width: 100%;
  height: 320px;
  padding: 12px;
  border: 1px solid #d5d9de;
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  resize: vertical;
}

.compose-editor-area textarea:focus {
  border-color: var(--sky-blue-main);
  box-shadow: 0 0 0 1px var(--sky-blue-border);
}

/* 서명 사진 업로드 미리보기 */
.signature-upload-box {
  margin-top: 6px;
}

.signature-btn-group {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.signature-preview-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background-color: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: var(--radius-sm);
}

.signature-preview-container img {
  max-height: 60px;
  max-width: 160px;
  object-fit: contain;
}

.preview-tag {
  font-size: 11px;
  color: var(--sky-blue-main);
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* 10. 상단 헤더 로그아웃 버튼                                                */
/* -------------------------------------------------------------------------- */
.btn-header-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background-color: transparent;
  color: #555;
  border: 1px solid #d5d9de;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 8px;
}

.btn-header-logout:hover {
  background-color: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

.btn-header-logout i {
  font-size: 11px;
}

/* -------------------------------------------------------------------------- */
/* 11. 메일 작성 창 서명 선택 바                                             */
/* -------------------------------------------------------------------------- */
.compose-signature-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-top: 10px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
}

.sig-select-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #475569;
}

.sig-select-wrapper i {
  color: var(--sky-blue-main);
  font-size: 13px;
}

.sig-select-wrapper label {
  font-weight: 600;
}

.sig-select {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-xs);
  background-color: #fff;
  color: #1e293b;
  min-width: 170px;
  cursor: pointer;
}

.sig-select:focus {
  border-color: var(--sky-blue-main);
  outline: none;
}

.btn-sig-setting-link {
  background: none;
  border: none;
  color: #64748b;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: all 0.15s ease;
}

.btn-sig-setting-link:hover {
  color: var(--sky-blue-main);
  background-color: #e0f2fe;
}

/* -------------------------------------------------------------------------- */
/* 12. 다중 메일 서명 관리 시스템 스타일                                      */
/* -------------------------------------------------------------------------- */
.modal-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 16px 0;
}

.multi-signature-section {
  background: #fbfcfe;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 8px;
}

.signature-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sig-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e293b;
}

.sig-header-left i {
  color: var(--sky-blue-main);
  font-size: 15px;
}

.sig-section-title {
  font-size: 14px;
  font-weight: 700;
}

.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  background-color: var(--naver-blue-bg);
  color: var(--naver-blue-text);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.sig-section-guide {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* 서명 추가/수정 서브 박스 */
.signature-edit-box {
  background: #ffffff;
  border: 1px solid var(--sky-blue-main);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 145, 255, 0.08);
}

.sig-box-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.checkbox-label-text {
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  user-select: none;
}

/* 서명 사진/직인 업로드 및 미리보기 박스 */
.signature-upload-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signature-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.signature-preview-container {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  background-color: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-sm);
  padding: 8px;
  max-width: fit-content;
}

.signature-preview-container img {
  max-width: 320px;
  max-height: 180px;
  width: auto;
  height: auto;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.preview-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background-color: rgba(16, 185, 129, 0.9);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* 서명 카드 목록 */
.signature-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signature-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.signature-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.signature-card.is-default {
  border-color: var(--sky-blue-main);
  background-color: #f8fbff;
}

.sig-card-info {
  flex: 1;
  min-width: 0;
}

.sig-card-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.sig-card-name {
  font-weight: 700;
  font-size: 13px;
  color: #1e293b;
}

.badge-default-signature {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background-color: var(--sky-blue-main);
  color: #ffffff;
  border-radius: var(--radius-xs);
}

.sig-card-preview-text {
  font-size: 12px;
  color: #64748b;
  white-space: pre-wrap;
  line-height: 1.4;
  max-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sig-card-img-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #0284c7;
  margin-top: 6px;
  background-color: #e0f2fe;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

.sig-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}

.btn-sig-action {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  font-size: 11px;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sig-action:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.btn-sig-action.edit:hover {
  background-color: #e0f2fe;
  color: var(--sky-blue-main);
  border-color: #7dd3fc;
}

.btn-sig-action.delete:hover {
  background-color: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
}

.btn-sig-action.set-default:hover {
  background-color: #fef3c7;
  color: #d97706;
  border-color: #fcd34d;
}

.empty-sig-notice {
  text-align: center;
  padding: 24px;
  color: #94a3b8;
  font-size: 12px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-sm);
}

/* ========================================================================== */
/* 10. 메일 설정 (환경설정) 와이드 대시보드 스타일 (첨부 사진 완벽 재현)            */
/* ========================================================================== */
.modal-dialog.mail-settings-modal {
  max-width: 1040px;
  width: 95vw;
  max-height: 88vh;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
}

.settings-page-header {
  padding: 24px 28px 12px 28px;
  border-bottom: 1px solid #e5e7eb;
}

.settings-page-title {
  font-size: 19px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 상단 9대 탭 바 */
.settings-tab-bar {
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
}

.settings-tab-btn {
  background: none;
  border: none;
  padding: 8px 2px 10px 2px;
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.settings-tab-btn:hover {
  color: #0f172a;
}

.settings-tab-btn.active {
  color: #0f172a;
  font-weight: 700;
}

.settings-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  background-color: #0f172a;
  border-radius: 2px;
}

/* 탭 본문 영역 */
.settings-tab-body {
  padding: 20px 28px 28px 28px;
  overflow-y: auto;
  max-height: calc(88vh - 140px);
}

.settings-tab-pane {
  display: none;
}

.settings-tab-pane.active {
  display: block;
}

/* 서브 알약 버튼 그룹 */
.settings-sub-pills-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.sub-pill-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12.5px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sub-pill-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.sub-pill-btn.active {
  background-color: #ebf5ff;
  border-color: #bfdbfe;
  color: #0066cc;
  font-weight: 600;
}

/* [+ 메일함 추가] 심플 버튼 */
.btn-add-folder-pill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  transition: all 0.15s ease;
}

.btn-add-folder-pill:hover {
  background-color: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

/* 메일함 관리 테이블 */
.settings-mailbox-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #334155;
}

.settings-mailbox-table th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  color: #475569;
  border-bottom: 1px solid #cbd5e1;
  background-color: #fbfcfd;
}

.settings-mailbox-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.settings-mailbox-table tr:hover td {
  background-color: #f8fafc;
}

.td-category-group {
  font-weight: 600;
  color: #1e293b;
  background-color: #ffffff !important;
  border-right: 1px solid #f1f5f9;
  vertical-align: top;
  padding-top: 14px;
}

.folder-title-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #1e293b;
}

.select-retention-days {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  color: #334155;
  margin: 0 4px;
  background-color: #ffffff;
}

.settings-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.settings-act-link {
  background: none;
  border: none;
  padding: 0;
  color: #475569;
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
}

.settings-act-link:hover {
  color: #0066cc;
  text-decoration: underline;
}

.settings-act-link.disabled {
  color: #cbd5e1;
  cursor: default;
  pointer-events: none;
  text-decoration: none !important;
}

.settings-act-sep {
  color: #e2e8f0;
  font-size: 11px;
}

/* POP3 / SMTP 호연ERP 가이드 카드 스타일 */
.smtp-guide-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.smtp-guide-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.smtp-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.smtp-info-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.smtp-info-card .label {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}

.smtp-info-card .val {
  font-size: 14px;
  font-weight: 700;
  color: #0284c7;
  font-family: monospace;
  word-break: break-all;
}

.btn-copy-smtp {
  margin-top: 6px;
  align-self: flex-start;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-copy-smtp:hover {
  background: #0066cc;
  color: #ffffff;
  border-color: #0066cc;
}

/* 자동 분류 및 공통 관리 액션 버튼 스타일 */
.btn-sig-action {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-sig-action:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-sig-action.delete {
  color: #ef4444;
  border-color: #fecaca;
}

.btn-sig-action.delete:hover {
  background: #fef2f2;
  border-color: #f87171;
  color: #dc2626;
}

/* 상단 툴바 드롭다운 래퍼 및 팝오버 메뉴 시스템 */
.toolbar-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.custom-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  min-width: 170px;
  z-index: 1050;
  padding: 5px 0;
}

.custom-dropdown-menu .dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: #334155;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

.custom-dropdown-menu .dropdown-item:hover {
  background: #eff6ff;
  color: #0066cc;
}

.custom-dropdown-menu .dropdown-item i {
  width: 16px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
}

.custom-dropdown-menu .dropdown-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}

.custom-dropdown-menu .dropdown-header {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

/* ==============================================================================
 * 메일 이동 [직접설정] 대화상자 스타일 (첨부 사진 완벽 재현)
 * ============================================================================== */
.direct-move-dialog {
  max-width: 440px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden;
}

.direct-move-header {
  padding: 16px 20px 10px !important;
  border-bottom: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.direct-move-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 !important;
}

.direct-move-body {
  padding: 14px 22px 16px !important;
}

.direct-move-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.direct-move-row.top-align {
  align-items: flex-start;
}

.direct-move-label {
  width: 90px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

.direct-move-field {
  flex: 1;
}

.direct-move-field input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  outline: none;
  color: #1e293b;
  transition: border-color 0.15s;
}

.direct-move-field input[type="text"]:focus {
  border-color: #0284c7;
}

.folder-select-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-select-row,
.radio-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  width: 90px;
}

.custom-radio-label input[type="radio"] {
  cursor: pointer;
  accent-color: #0066cc;
}

.direct-move-select {
  flex: 1;
  padding: 7px 10px;
  font-size: 12.5px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background-color: #ffffff;
  outline: none;
  cursor: pointer;
}

.direct-move-new-input {
  flex: 1;
  padding: 7px 10px !important;
  font-size: 12.5px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
}

.direct-move-new-input:disabled {
  background-color: #f1f5f9 !important;
  cursor: not-allowed;
  border-color: #e2e8f0 !important;
}

.direct-move-options-area {
  margin-top: 20px;
  padding-left: 90px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkbox-option-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.custom-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #334155;
  cursor: pointer;
}

.custom-checkbox-row input[type="checkbox"] {
  accent-color: #0066cc;
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.info-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 11px;
  color: #94a3b8;
  cursor: help;
  user-select: none;
}

.direct-move-footer {
  padding: 12px 22px 18px !important;
  border-top: none !important;
  background: transparent !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.btn-cancel-text {
  background: none;
  border: none;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  padding: 6px 10px;
  transition: color 0.15s;
}

.btn-cancel-text:hover {
  color: #1e293b;
}

.btn-register-dark {
  background-color: #3f4756;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
}

.btn-register-dark:hover {
  background-color: #2c3340;
}

/* ========================================================================== */
/* 14. 메일 쓰기 파일 첨부 바 및 첨부 파일 목록 스타일 (무제한 대용량 지원)   */
/* ========================================================================== */
.compose-attach-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.attach-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-compose-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-compose-attach:hover {
  background-color: #e0f2fe;
  color: var(--sky-blue-main);
  border-color: #7dd3fc;
}

.attach-guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #0284c7;
  background-color: #e0f2fe;
  padding: 3px 8px;
  border-radius: 12px;
}

.attach-bar-right {
  font-size: 12px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-clear-all-attachments {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 4px;
}

.btn-clear-all-attachments:hover {
  color: #b91c1c;
}

.compose-attach-list-box {
  max-height: 120px;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin-bottom: 10px;
}

.compose-attach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compose-attach-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  background-color: #f1f5f9;
  border-radius: var(--radius-xs);
  font-size: 12px;
}

.compose-attach-item-info {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compose-attach-item-info i {
  color: #0284c7;
}

.compose-attach-item-info .file-name {
  font-weight: 500;
  color: #1e293b;
}

.compose-attach-item-info .file-size {
  color: #64748b;
  font-size: 11px;
}

.btn-remove-attach {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.btn-remove-attach:hover {
  color: #ef4444;
}

/* ============================================================================== */
/* [모달 8] 시놀로지 NAS 비밀번호 변경 안내 심플 모달 스타일                     */
/* ============================================================================== */
.syno-pwd-simple-dialog {
  max-width: 500px !important;
  width: 92% !important;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.18), 0 10px 16px -6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid #e2e8f0;
}

.syno-pwd-simple-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.syno-pwd-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.syno-pwd-brand .personal-logo-img {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.syno-pwd-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

.syno-pwd-simple-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #ffffff;
}

/* 1. 사내 보안 정책 안내 카드 */
.syno-pwd-info-box {
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.syno-pwd-info-icon {
  font-size: 20px;
  color: #0066cc;
  margin-top: 1px;
  flex-shrink: 0;
}

.syno-pwd-info-desc strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 4px;
}

.syno-pwd-info-desc p {
  font-size: 12px;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

/* 2. 간단 3단계 가이드 리스트 */
.syno-pwd-steps-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
}

.syno-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.syno-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0066cc;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.syno-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.syno-step-text strong {
  color: #1e293b;
  font-weight: 600;
  font-size: 12.5px;
}

.syno-step-text span {
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.4;
}

/* 3. 시놀로지 포털 열기 대형 버튼 */
.syno-pwd-action-center {
  margin-top: 4px;
}

.btn-open-syno-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.22);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn-open-syno-big:hover {
  background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%);
  box-shadow: 0 6px 16px rgba(0, 102, 204, 0.32);
  transform: translateY(-1px);
}

.btn-open-syno-big i {
  font-size: 13px;
}

.syno-pwd-simple-footer {
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
}

/* ============================================================================== */
/* 사이드바 하단 전체 메일 용량 게이지 위젯 스타일링                              */
/* (클릭 시 메일 설정 > 메일함 관리 모달 팝업과 유기적으로 연동)                  */
/* ============================================================================== */
.sidebar-quota-widget {
  margin-top: auto;
  padding: 11px 13px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.sidebar-quota-widget:hover {
  background-color: #f0f7ff;
  border-color: #bae6fd;
  box-shadow: 0 3px 10px rgba(0, 102, 204, 0.12);
  transform: translateY(-1px);
}

.sidebar-quota-widget:hover .quota-text {
  color: #0066cc;
}

.sidebar-quota-widget:hover .quota-arrow-icon {
  color: #0066cc;
  transform: translateX(2px);
}

.quota-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.quota-label-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quota-icon {
  color: #0066cc;
  font-size: 13px;
}

.quota-text {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  transition: color 0.15s ease;
}

.quota-val-group {
  display: flex;
  align-items: center;
  font-size: 11.5px;
  color: #64748b;
}

#quotaUsedText {
  color: #0066cc;
  font-weight: 700;
  font-size: 12px;
}

.quota-limit {
  color: #94a3b8;
  font-size: 11px;
  margin-left: 2px;
}

.quota-arrow-icon {
  font-size: 10px;
  margin-left: 5px;
  color: #94a3b8;
  transition: all 0.15s ease;
}

.quota-bar-track {
  width: 100%;
  height: 6px;
  background-color: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.quota-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0066cc 0%, #38bdf8 100%);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}