/* =============================================
   현장 협의 & 검수 플랫폼 - 메인 스타일
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

:root {
  /* 주요 색상 - 보라톡 보라색 테마 */
  --primary: #7C3AED;
  --primary-light: #EDE9FE;
  --primary-dark: #5B21B6;
  --success: #10B981;
  --success-light: #D1FAE5;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --danger: #EF4444;
  --danger-light: #FEE2E2;
  --purple: #7C3AED;
  --purple-light: #EDE9FE;
  --purple-mid: #9333EA;
  --pink: #EC4899;
  --pink-light: #FCE7F3;

  /* 하자 카테고리 색상 */
  --defect-damage: #DC2626;
  --defect-color: #EA580C;
  --defect-size: #EAB308;
  --defect-dirt: #9CA3AF;
  --defect-install: #0284C7;
  --defect-quality: #7C3AED;
  --defect-other: #1F2937;

  /* 배경 및 텍스트 */
  --bg-white: #FFFFFF;
  --bg-light: #F3F4F6;
  --bg-lighter: #F9FAFB;
  --border: #E5E7EB;
  --border-dark: #D1D5DB;
  --text-dark: #1F2937;
  --text-main: #374151;
  --text-gray: #6B7280;
  --text-light: #9CA3AF;

  /* 그림자 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
  --shadow-fab: 0 4px 12px rgba(0,0,0,0.25);

  /* 반지름 */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* 타이포그래피 */
  --font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 레이아웃 */
  --tab-height: 68px;
  --header-height: 60px;
  --app-max-width: 430px;
}

/* 리셋 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: linear-gradient(135deg, #2D1B69 0%, #1a0a3a 50%, #0F0A1E 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: var(--text-main);
  overflow: hidden;
}

/* 앱 컨테이너 - 모바일 폰 프레임 */
#app-frame {
  width: 100%;
  max-width: var(--app-max-width);
  height: 100vh;
  max-height: 900px;
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(124,58,237,0.4), 0 8px 32px rgba(0,0,0,0.4);
  border-radius: 0;
}

@media (min-width: 500px) {
  #app-frame {
    border-radius: 36px;
    height: 860px;
  }
}

/* =============================================
   상단 탑바 (프로필, 포인트, 검색, 설정)
   ============================================= */
#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 100%);
  padding: 0 14px;
  gap: 6px;
  flex-shrink: 0;
  z-index: 200;
  position: relative;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.boratalk-logo {
  font-size: 18px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.8px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
.topbar-title {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.topbar-points {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  margin-right: 2px;
  transition: background 0.15s;
}
.topbar-points:hover { background: rgba(255,255,255,0.3); }
.topbar-icon-btn {
  width: 36px; height: 36px;
  border: none; background: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  transition: background 0.15s;
}
.topbar-icon-btn:hover { background: rgba(255,255,255,0.15); }
.topbar-avatar-btn {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: rgba(255,255,255,0.2);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  overflow: hidden;
  transition: opacity 0.15s;
  margin-left: 2px;
}
.topbar-avatar-btn:hover { background: rgba(255,255,255,0.3); }

/* 화면 관리 */
.screen {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-white);
}
.screen.active { display: flex; }
/* has-topbar: 상단바(54px) + 탭바 높이만큼 오프셋 */
.screen.has-topbar {
  top: 54px;
  bottom: var(--tab-height);
}

/* 스크롤 가능한 콘텐츠 영역 */
.scroll-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tab-height) + 16px);
}
.scroll-content::-webkit-scrollbar { display: none; }

/* =============================================
   공통 헤더
   ============================================= */
.screen-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
  gap: 12px;
}
.screen-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  flex: 1;
}
.back-btn {
  width: 36px; height: 36px;
  border: none; background: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dark);
  font-size: 20px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.back-btn:hover { background: var(--bg-light); }

/* =============================================
   하단 탭 바 — 5탭 새 디자인
   ============================================= */
#tab-bar {
  height: var(--tab-height);
  display: flex;
  background: #fff;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 100;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  position: absolute;
  bottom: 0; left: 0; right: 0;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 2px 4px;
  transition: all 0.2s;
  position: relative;
  color: #9CA3AF;
}
.tab-item.active { color: #7C3AED; }
.tab-icon-wrap {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-size: 20px;
  transition: transform 0.2s;
}
.tab-item.active .tab-icon-wrap { transform: scale(1.12); }
.tab-item span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1;
}
/* 중앙 영상통화 FAB 버튼 */
.tab-item-center {
  color: #fff;
  position: relative;
}
.tab-item-center span { color: #1A1A1A; }
.tab-center-btn {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,58,237,0.5);
  margin-top: -16px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.tab-item-center.active .tab-center-btn,
.tab-item-center:hover .tab-center-btn {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(124,58,237,0.7);
}
/* 탭 배지 */
.tab-badge {
  position: absolute;
  top: -2px; right: -6px;
  background: #EF4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* =============================================
   카카오톡 스타일 채팅 목록 홈화면
   ============================================= */

/* 채팅 목록 컨테이너 */
.chat-list-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  padding-bottom: 8px;
}
.chat-list-container::-webkit-scrollbar { display: none; }

/* 빠른 기능 칩 바 */
.quick-actions-bar {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #F3F4F6;
  scrollbar-width: none;
  background: #FAFAFA;
}
.quick-actions-bar::-webkit-scrollbar { display: none; }
.qa-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  transition: opacity 0.15s;
  font-family: var(--font);
}
.qa-chip:hover { opacity: 0.75; }
.qa-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* 채팅 목록 헤더 */
.chat-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  border-bottom: 1px solid #F3F4F6;
}
.chat-list-title {
  font-size: 15px;
  font-weight: 800;
  color: #1A1A1A;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-count-badge {
  font-size: 11px;
  font-weight: 700;
  background: #EF4444;
  color: #fff;
  min-width: 18px; height: 18px;
  border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.chat-add-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: #F3F4F6;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: #374151;
  transition: background 0.15s;
}
.chat-add-btn:hover { background: #E5E7EB; }

/* 채팅 아이템 */
#chat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.chat-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid #F9FAFB;
  position: relative;
}
.chat-item:hover, .chat-item:active { background: #F9FAFB; }
/* 아바타 */
.chat-avatar {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: #F3F4F6;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  position: relative;
  overflow: visible;
}
.chat-avatar-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 18px; height: 18px;
  border-radius: 6px;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  font-weight: 700;
}
/* 채팅 내용 */
.chat-content {
  flex: 1;
  min-width: 0;
}
.chat-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.chat-name {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.chat-time {
  font-size: 11px;
  color: #9CA3AF;
  flex-shrink: 0;
  white-space: nowrap;
}
.chat-preview {
  font-size: 13px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.chat-unread {
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.chat-mode-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 99px;
  white-space: nowrap;
}
.chat-item.pinned { background: #FFFDE7; }
.chat-item.pinned:hover { background: #FFF9C4; }
.chat-pin-icon {
  position: absolute;
  top: 10px; right: 16px;
  font-size: 10px;
  color: #F59E0B;
}

/* ─── 통화 탭 공통 ─── */
.tab-screen-inner {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.tab-screen-inner::-webkit-scrollbar { display: none; }
.call-tab-search {
  display: flex;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}
.call-search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F3F4F6;
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.call-search-box input {
  border: none; background: none; outline: none;
  font-size: 13px; color: #374151; flex: 1;
  font-family: var(--font);
}
.call-dial-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff;
  flex-shrink: 0;
}
.call-section-label {
  font-size: 12px;
  font-weight: 700;
  color: #9CA3AF;
  padding: 10px 16px 4px;
  letter-spacing: 0.3px;
}
.call-fav-grid {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 4px 12px 8px;
  scrollbar-width: none;
}
.call-fav-grid::-webkit-scrollbar { display: none; }
.call-fav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 64px;
  transition: opacity 0.15s;
}
.call-fav-item:hover { opacity: 0.75; }
.call-fav-avatar {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  position: relative;
}
.call-fav-name {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  text-align: center;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 통화 연락처 목록 */
.call-contact-list {
  list-style: none;
  padding: 0; margin: 0;
}
.call-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid #F9FAFB;
  transition: background 0.15s;
}
.call-contact-item:hover { background: #F9FAFB; }
.call-ci-avatar {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.call-ci-info { flex: 1; min-width: 0; }
.call-ci-name {
  font-size: 14px; font-weight: 700; color: #1A1A1A;
  margin-bottom: 2px;
}
.call-ci-detail {
  font-size: 12px; color: #9CA3AF;
}
.call-ci-actions {
  display: flex; gap: 6px;
}
.call-ci-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: opacity 0.15s;
}
.call-ci-btn:hover { opacity: 0.75; }
.call-ci-btn.voice { background: #D1FAE5; color: #059669; }
.call-ci-btn.video  { background: #EDE9FE; color: #7C3AED; }

/* ─── 영상통화 업무 모드 카드 ─── */
.video-mode-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px 12px 4px;
}
.vmode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  background: #F9FAFB;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  border: 1.5px solid transparent;
}
.vmode-card:hover { background: #F3F4F6; transform: scale(1.03); }
.vmode-card:active { transform: scale(0.97); }
.vmode-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.vmode-name {
  font-size: 11px; font-weight: 700; color: #374151;
  text-align: center;
}

/* ─── 그룹통화 ─── */
.group-create-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg,#7C3AED,#6D28D9);
  margin: 10px 14px 4px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.15s;
  box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}
.group-create-banner:hover { opacity: 0.9; }
.gcb-icon {
  width: 40px; height: 40px;
  background: rgba(0,0,0,0.1);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #1A1A1A;
}
.gcb-title { font-size: 14px; font-weight: 800; color: #1A1A1A; }
.gcb-desc { font-size: 12px; color: rgba(0,0,0,0.55); margin-top: 2px; }
.group-list { list-style: none; padding: 0; margin: 0; }
.group-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid #F9FAFB;
  transition: background 0.15s;
}
.group-item:hover { background: #F9FAFB; }
.group-avatar-stack {
  width: 52px; height: 52px;
  position: relative;
  flex-shrink: 0;
}
.gas-main {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  position: absolute; top: 0; left: 0;
  border: 2px solid #fff;
}
.gas-sub {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: #E5E7EB;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  position: absolute; bottom: 0; right: 0;
  border: 2px solid #fff;
}
.group-info { flex: 1; min-width: 0; }
.group-name { font-size: 14px; font-weight: 700; color: #1A1A1A; margin-bottom: 2px; }
.group-members { font-size: 12px; color: #9CA3AF; }
.group-call-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: #EDE9FE;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #7C3AED;
  flex-shrink: 0;
}

/* ─── 마이페이지 ─── */
.mypage-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #F9FAFB;
  padding-bottom: 8px;
}
.mypage-container::-webkit-scrollbar { display: none; }
.mypage-profile-card {
  background: linear-gradient(160deg, #6D28D9 0%, #7C3AED 100%);
  padding: 20px 16px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
}
.mypage-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.mypage-avatar {
  width: 76px; height: 76px;
  border-radius: 24px;
  background: rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  border: 3px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.mypage-avatar-edit {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 26px; height: 26px;
  border-radius: var(--radius-full);
  background: #1A1A1A;
  border: 2.5px solid #A78BFA;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mypage-profile-info { flex: 1; padding-top: 2px; }
.mypage-name {
  font-size: 19px; font-weight: 800; color: #FFFFFF;
  margin-bottom: 5px;
  letter-spacing: -0.3px;
}
.mypage-role-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 99px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  margin-bottom: 12px;
  font-family: var(--font);
  transition: background 0.15s;
}
.mypage-role-badge:hover { background: rgba(255,255,255,0.3); }
.mypage-stats-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 12px;
  padding: 8px 12px;
}
.mypage-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  flex: 1;
}
.mypage-stat span { font-size: 17px; font-weight: 800; color: #FFFFFF; }
.mypage-stat small { font-size: 10px; color: rgba(255,255,255,0.7); font-weight: 600; }
.mypage-stat-div { width: 1px; height: 24px; background: rgba(0,0,0,0.12); }

/* 마이페이지 탭 */
.mypage-tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #F3F4F6;
  position: sticky;
  top: 0;
  z-index: 5;
}
.myp-tab {
  flex: 1;
  padding: 13px 4px;
  border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: #9CA3AF;
  transition: color 0.15s;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font);
}
.myp-tab.active { color: #7C3AED; border-bottom-color: #7C3AED; }
.myp-panel { display: none; flex-direction: column; padding: 0; }
.myp-panel.active { display: flex; }

/* 마이페이지 필터 */
.myp-filter-row {
  display: flex;
  gap: 6px;
  padding: 10px 14px 6px;
  background: #fff;
  border-bottom: 1px solid #F3F4F6;
  overflow-x: auto;
  scrollbar-width: none;
}
.myp-filter-row::-webkit-scrollbar { display: none; }
.myp-filter, .myp-hist-filter {
  padding: 5px 12px;
  border-radius: 99px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  font-size: 12px; font-weight: 600; color: #6B7280;
  cursor: pointer; flex-shrink: 0;
  transition: all 0.15s;
  font-family: var(--font);
}
.myp-filter.active, .myp-hist-filter.active {
  background: #7C3AED; color: #fff; border-color: #7C3AED;
}

/* 마이페이지 설정 리스트 */
.settings-list-compact { background: #fff; padding: 8px 0; }
.set-item-c {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #F9FAFB;
  transition: background 0.15s;
}
.set-item-c:hover { background: #F9FAFB; }
.set-item-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.set-item-label {
  flex: 1;
  font-size: 14px; font-weight: 600; color: #1A1A1A;
}
.set-item-arrow { color: #D1D5DB; font-size: 12px; }
.set-toggle-c {
  width: 44px; height: 26px;
  border-radius: 99px;
  background: #E5E7EB;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.set-toggle-c::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  background: #fff;
  top: 3px; left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.set-toggle-c.on { background: #7C3AED; }
.set-toggle-c.on::after { transform: translateX(18px); }

/* ─── 마이페이지 목록 아이템 ─── */
.myp-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #F9FAFB;
  transition: background 0.15s;
  background: #fff;
}
.myp-list-item:hover { background: #F9FAFB; }
.myp-list-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.myp-list-info { flex: 1; min-width: 0; }
.myp-list-title {
  font-size: 14px; font-weight: 700; color: #1A1A1A;
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.myp-list-sub { font-size: 12px; color: #9CA3AF; }
.myp-list-defects {
  font-size: 11px; color: #EF4444; font-weight: 600; margin-top: 2px;
}

/* ─── 풀스크린 화면 (top-bar + tab-bar 위를 덮음) ─── */
#call-screen,
#marking-screen,
#inspection-screen,
#workorder-screen,
#shopping-screen,
#as-screen,
#report-screen,
#history-screen,
#settings-screen,
#consult-screen {
  top: 0 !important;
  bottom: 0 !important;
  z-index: 150;
}
/* ─── 탭 화면들: 상단바(54px) 아래, 탭바 위 ─── */
#voice-call-screen,
#video-call-tab-screen,
#group-call-screen,
#mypage-screen {
  top: 54px;
  bottom: var(--tab-height);
}
/* 홈 화면도 동일 */
#home-screen {
  top: 54px;
  bottom: var(--tab-height);
}

/* =============================================
   메인 홈 화면
   ============================================= */
#home-screen .scroll-content {
  padding-bottom: calc(var(--tab-height) + 8px);
}

/* 홈 헤더 */
.home-header {
  background: linear-gradient(135deg, #4C1D95 0%, #6D28D9 50%, #7C3AED 100%);
  padding: 20px 20px 24px;
  color: white;
  flex-shrink: 0;
}
.home-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  border: 2px solid rgba(255,255,255,0.4);
  overflow: hidden;
}
.user-details h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  color: white;
  transition: background 0.2s;
}
.role-badge:hover { background: rgba(255,255,255,0.3); }
.notification-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.15);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: white;
  position: relative;
  transition: background 0.2s;
}
.notification-btn:hover { background: rgba(255,255,255,0.25); }
.notif-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  background: #FCD34D;
  border-radius: var(--radius-full);
  border: 1.5px solid #7C3AED;
}
.home-stats {
  display: flex;
  gap: 12px;
}
.stat-item {
  flex: 1;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-align: center;
}
.stat-item .stat-num {
  font-size: 22px;
  font-weight: 700;
  display: block;
}
.stat-item .stat-label {
  font-size: 10px;
  opacity: 0.8;
  display: block;
  margin-top: 2px;
}

/* 메인 액션 버튼 그리드 */
.section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-gray);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 16px;
  margin: 16px 0 12px;
}
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 4px;
}
.action-card {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 18px 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  min-height: 100px;
}
.action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.action-card:active { transform: scale(0.97); }
.action-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-color, var(--primary));
}
.action-card .card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--icon-bg, var(--primary-light));
}
.action-card .card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
}
.action-card .card-desc {
  font-size: 11px;
  color: var(--text-light);
  line-height: 1.4;
}
.action-card-full {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  padding: 16px 20px;
  min-height: auto;
  gap: 16px;
}
.action-card-full .card-icon { flex-shrink: 0; }
.action-card-full .card-info { flex: 1; }
.action-card-full .card-arrow {
  font-size: 18px;
  color: var(--text-light);
}

/* 카드 색상 변형 */
.card-blue { --card-color: #7C3AED; --icon-bg: #EDE9FE; }
.card-green { --card-color: #10B981; --icon-bg: #D1FAE5; }
.card-orange { --card-color: #F59E0B; --icon-bg: #FEF3C7; }
.card-pink { --card-color: #EC4899; --icon-bg: #FCE7F3; }
.card-red { --card-color: #EF4444; --icon-bg: #FEE2E2; }

/* 최근 협의 기록 */
.recent-section {
  padding: 0 16px;
  margin-top: 8px;
}
.recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.recent-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}
.see-all-btn {
  font-size: 12px;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}

.record-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.record-card:hover { box-shadow: var(--shadow); }
.record-card:active { background: var(--bg-lighter); }
.record-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.record-info { flex: 1; min-width: 0; }
.record-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-meta {
  font-size: 11px;
  color: var(--text-light);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.record-defects {
  font-size: 11px;
  color: var(--danger);
  font-weight: 600;
  margin-top: 4px;
}
.status-badge {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.status-complete { background: var(--success-light); color: var(--success); }
.status-progress { background: var(--primary-light); color: var(--primary); }
.status-pending { background: var(--bg-light); color: var(--text-gray); }
.status-unresolved { background: var(--danger-light); color: var(--danger); }

/* =============================================
   역할 선택 모달
   ============================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}
.modal-sheet {
  background: var(--bg-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: var(--app-max-width);
  padding: 20px 20px 40px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.modal-overlay.show .modal-sheet {
  transform: translateY(0);
}
.modal-handle {
  width: 40px; height: 4px;
  background: var(--border-dark);
  border-radius: var(--radius-full);
  margin: 0 auto 20px;
}
.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.role-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid transparent;
}
.role-option:hover { background: var(--bg-light); }
.role-option.selected { background: var(--primary-light); border-color: var(--primary); }
.role-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.role-option .role-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}
.role-option .role-info p {
  font-size: 12px;
  color: var(--text-gray);
  margin-top: 2px;
}

/* =============================================
   영상통화 화면
   ============================================= */
#call-screen {
  background: #0f0f1a;
  color: white;
}
.video-area {
  flex: 1;
  position: relative;
  background: #1a1a2e;
  overflow: hidden;
}
.video-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255,255,255,0.7);
}
.video-placeholder .avatar-large {
  width: 100px; height: 100px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  border: 3px solid rgba(255,255,255,0.2);
}
.video-placeholder h3 { font-size: 22px; font-weight: 700; }
.video-placeholder p { font-size: 14px; opacity: 0.6; }

/* 통화 시간 표시 */
.call-timer {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 5px 16px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  backdrop-filter: blur(8px);
}
.call-status-bar {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.5);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
}
.call-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: #10B981;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.call-status-bar span {
  font-size: 12px;
  color: white;
  font-weight: 500;
}

/* 미니 셀프캠 */
.video-self {
  position: absolute;
  bottom: 130px;
  left: 16px;
  width: 90px;
  height: 130px;
  border-radius: var(--radius-md);
  background: #2d2d44;
  border: 2px solid rgba(255,255,255,0.3);
  overflow: hidden;
  cursor: grab;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  z-index: 10;
}

/* 우측 플로팅 버튼 그룹 */
.fab-group {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
}
.fab-btn {
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: var(--shadow-fab);
  transition: all 0.2s;
  position: relative;
}
.fab-btn:hover { transform: scale(1.08); }
.fab-btn:active { transform: scale(0.95); }
.fab-btn .fab-label {
  position: absolute;
  right: 66px;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.fab-btn:hover .fab-label { opacity: 1; }
.fab-snap { background: var(--primary); }
.fab-mark { background: var(--success); }
.fab-note { background: var(--purple); }
.fab-end { background: var(--danger); }
.fab-btn.disabled { opacity: 0.4; cursor: not-allowed; }

/* 통화 컨트롤 바 */
.call-controls {
  height: 100px;
  background: rgba(15,15,26,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  flex-shrink: 0;
  backdrop-filter: blur(12px);
}
.ctrl-btn {
  width: 52px; height: 52px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 20px;
  transition: all 0.2s;
  background: rgba(255,255,255,0.1);
  color: white;
}
.ctrl-btn:hover { background: rgba(255,255,255,0.2); }
.ctrl-btn.active { background: var(--primary); }
.ctrl-btn.inactive { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); }
.ctrl-btn span {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}
.ctrl-btn-end {
  width: 60px; height: 60px;
  border-radius: var(--radius-full);
  background: var(--danger);
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 24px;
  color: white;
  box-shadow: 0 4px 12px rgba(239,68,68,0.5);
  transition: all 0.2s;
  margin: 0 8px;
}
.ctrl-btn-end:hover { transform: scale(1.05); }
.ctrl-btn-end span { font-size: 9px; font-weight: 500; }

/* 플래시 효과 */
.flash-overlay {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.1s;
}
.flash-overlay.flash { animation: flash-anim 0.5s ease-out; }
@keyframes flash-anim {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* 토스트 메시지 */
.toast {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(16,185,129,0.95);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: all 0.3s;
  z-index: 100;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 촬영된 사진 썸네일 줄 */
.captured-strip {
  position: absolute;
  bottom: 108px;
  left: 110px;
  right: 80px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  z-index: 10;
}
.captured-strip::-webkit-scrollbar { display: none; }
.captured-thumb {
  width: 54px;
  height: 54px;
  border-radius: var(--radius);
  border: 2px solid rgba(255,255,255,0.5);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  background: #2d2d44;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: border-color 0.2s;
}
.captured-thumb:hover { border-color: white; }
.captured-count {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background: var(--danger);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================
   마킹 편집 화면
   ============================================= */
#marking-screen {
  background: #1a1a1a;
  color: white;
}
.marking-toolbar {
  height: 64px;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  overflow-x: auto;
  flex-shrink: 0;
}
.marking-toolbar::-webkit-scrollbar { display: none; }
.tool-btn {
  min-width: 48px; height: 48px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 18px;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 4px 8px;
}
.tool-btn:hover { background: rgba(255,255,255,0.15); }
.tool-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
.tool-btn span {
  font-size: 9px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}
.tool-btn.active span { color: rgba(255,255,255,0.9); }
.tool-defect { border-color: rgba(239,68,68,0.5); }
.tool-defect.active { background: var(--danger); border-color: var(--danger); }

.tool-separator {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
  margin: 0 4px;
}

/* 색상 팔레트 */
.color-palette {
  height: 48px;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  flex-shrink: 0;
}
.color-dot {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  flex-shrink: 0;
}
.color-dot.selected { border-color: white; transform: scale(1.2); }
.color-dot:hover { transform: scale(1.15); }
.color-dot.custom {
  background: linear-gradient(135deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.line-width-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.lw-btn {
  cursor: pointer;
  background: none;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
  padding: 4px;
  flex-shrink: 0;
}
.lw-btn.selected { border-color: white; }
.lw-dot {
  border-radius: var(--radius-full);
  background: white;
  display: block;
}
.lw-thin .lw-dot { width: 3px; height: 3px; }
.lw-mid .lw-dot { width: 6px; height: 6px; }
.lw-thick .lw-dot { width: 10px; height: 10px; }

/* 캔버스 영역 */
.canvas-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}
#marking-canvas {
  cursor: crosshair;
  touch-action: none;
  max-width: 100%;
  max-height: 100%;
}
.canvas-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  pointer-events: none;
}
.canvas-placeholder .ph-icon { font-size: 48px; opacity: 0.3; }

/* 마킹 리스트 사이드 패널 */
.marking-list-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 200px;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  transform: translateX(100%);
  transition: transform 0.3s;
  z-index: 20;
  overflow-y: auto;
  padding: 12px;
}
.marking-list-panel.open { transform: translateX(0); }
.marking-list-panel::-webkit-scrollbar { display: none; }
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.panel-header h4 { font-size: 13px; font-weight: 700; color: white; }
.panel-close {
  width: 24px; height: 24px;
  background: none; border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.defect-group { margin-bottom: 12px; }
.defect-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.defect-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  transition: background 0.2s;
}
.defect-item:hover { background: rgba(255,255,255,0.12); }
.defect-item-del {
  width: 18px; height: 18px;
  background: none; border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.defect-item-del:hover { background: rgba(239,68,68,0.3); color: var(--danger); }

/* 마킹 화면 하단 버튼 */
.marking-bottom {
  height: 80px;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  flex-shrink: 0;
}
.mark-btn-cancel {
  flex: 1;
  height: 54px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s;
  font-family: var(--font);
}
.mark-btn-cancel:hover { background: rgba(255,255,255,0.18); }
.mark-btn-save {
  flex: 2;
  height: 54px;
  background: var(--primary);
  border: none;
  color: white;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font);
}
.mark-btn-save:hover { background: var(--primary-dark); }

/* 하자 카테고리 팝업 */
.defect-popup {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.defect-popup.show { display: flex; }
.defect-popup-inner {
  background: #1e1e2e;
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.1);
}
.defect-popup-title {
  font-size: 15px;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
  text-align: center;
}
.defect-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.defect-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.2s;
}
.defect-cat-btn:hover { background: rgba(255,255,255,0.12); }
.defect-cat-btn.selected { border-color: var(--primary); background: rgba(37,99,235,0.2); }
.defect-cat-icon { font-size: 22px; }
.defect-cat-name { font-size: 10px; color: rgba(255,255,255,0.8); text-align: center; font-weight: 500; }
.defect-popup-close {
  margin-top: 14px;
  width: 100%;
  height: 44px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font);
  transition: background 0.2s;
}
.defect-popup-close:hover { background: rgba(255,255,255,0.15); }

/* =============================================
   검수/작업지시/쇼핑/AS 공통 모드 화면
   ============================================= */
.mode-intro {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  padding-bottom: calc(var(--tab-height) + 16px);
}
.mode-intro::-webkit-scrollbar { display: none; }

.form-group {
  margin-bottom: 18px;
}
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-gray);
  margin-bottom: 6px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-input {
  width: 100%;
  height: 48px;
  background: var(--bg-lighter);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 40px 0 14px;
  font-size: 14px;
  color: var(--text-dark);
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.input-wrapper { position: relative; }
.input-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-light);
  pointer-events: none;
}
.form-select {
  width: 100%;
  height: 48px;
  background: var(--bg-lighter);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 14px;
  font-size: 14px;
  color: var(--text-dark);
  font-family: var(--font);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}
.form-select:focus { border-color: var(--primary); }

/* 카메라 프리뷰 영역 */
.camera-preview-area {
  background: #1a1a1a;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}
.camera-preview-placeholder .cam-icon { font-size: 48px; opacity: 0.4; }
.snap-btn-overlay {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px; height: 60px;
  border-radius: var(--radius-full);
  background: var(--primary);
  border: 3px solid white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  box-shadow: var(--shadow-fab);
  transition: all 0.2s;
}
.snap-btn-overlay:hover { transform: translateY(-50%) scale(1.05); }
.snap-btn-overlay:active { transform: translateY(-50%) scale(0.95); }

/* 촬영된 사진 그리드 */
.photos-section { margin-bottom: 16px; }
.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.photo-thumb {
  aspect-ratio: 1;
  background: var(--bg-light);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-light);
  border: 1px solid var(--border);
  position: relative;
  transition: all 0.2s;
}
.photo-thumb:hover { border-color: var(--primary); }
.photo-thumb .defect-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--danger);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: var(--radius-full);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.add-photo-btn {
  aspect-ratio: 1;
  background: var(--bg-lighter);
  border: 2px dashed var(--border-dark);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 24px;
  color: var(--text-light);
  transition: all 0.2s;
}
.add-photo-btn:hover { border-color: var(--primary); color: var(--primary); }
.add-photo-btn span { font-size: 10px; }

/* 모드 액션 버튼 */
.mode-action-btn {
  width: 100%;
  height: 56px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  font-family: var(--font);
  margin-bottom: 12px;
}
.mode-action-primary {
  background: var(--primary);
  color: white;
}
.mode-action-primary:hover { background: var(--primary-dark); }
.mode-action-success {
  background: var(--success);
  color: white;
}
.mode-action-success:hover { background: #059669; }
.mode-action-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.mode-action-outline:hover { background: var(--primary-light); }

/* 카테고리 칩 */
.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.cat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--bg-white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-gray);
  transition: all 0.2s;
}
.cat-chip:hover { border-color: var(--primary); color: var(--primary); }
.cat-chip.selected { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.cat-chip .chip-icon { font-size: 14px; }

/* =============================================
   리포트 화면
   ============================================= */
.report-hero {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  padding: 20px;
  color: white;
  flex-shrink: 0;
}
.report-hero .report-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.report-status .status-icon { font-size: 20px; }
.report-status .status-text {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
}
.report-hero h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}
.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.report-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.15);
  padding: 5px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
}

.report-section {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.report-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-section-title .section-icon { font-size: 18px; }

/* 참여자 카드 */
.participants-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.participant-card {
  flex: 1;
  background: var(--bg-light);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}
.participant-card .p-avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  margin: 0 auto 8px;
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.participant-card .p-name { font-size: 13px; font-weight: 700; color: var(--text-dark); }
.participant-card .p-role { font-size: 11px; color: var(--text-gray); }
.vs-badge {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-light);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-gray);
  flex-shrink: 0;
}

/* 하자 요약 테이블 */
.defect-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.defect-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-light);
  color: var(--text-gray);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.defect-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
}
.defect-table tr:last-child td { border-bottom: none; font-weight: 700; background: var(--bg-lighter); }
.severity-badge {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
}
.severity-mild { background: #FEF9C3; color: #A16207; }
.severity-mid { background: #FEE2E2; color: #DC2626; }
.severity-severe { background: #500724; color: #FCA5A5; }

/* 사진 섬네일 */
.report-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.report-photo-item {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.report-photo-item img, .report-photo-item .rp-placeholder {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--bg-light);
  color: var(--text-light);
}
.rp-placeholder { font-size: 28px; }
.report-photo-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  padding: 6px 6px 4px;
  font-size: 9px;
  color: white;
}

/* 동의 섹션 */
.agreement-section {
  padding: 20px 16px;
  background: var(--bg-lighter);
}
.agreement-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg-white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.agreement-card .ag-avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.agreement-card .ag-info { flex: 1; }
.agreement-card .ag-name { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.agreement-card .ag-status { font-size: 11px; color: var(--text-gray); margin-top: 2px; }
.agreement-card .ag-status.agreed { color: var(--success); font-weight: 600; }
.agree-btn {
  height: 36px;
  padding: 0 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s;
  flex-shrink: 0;
}
.agree-btn:hover { background: var(--primary-dark); }
.agree-btn.agreed {
  background: var(--success-light);
  color: var(--success);
  cursor: default;
}
.sign-btn {
  height: 36px;
  padding: 0 12px;
  background: none;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s;
  flex-shrink: 0;
}
.sign-btn:hover { background: var(--primary-light); }

/* 완료 배너 */
.complete-banner {
  background: var(--success);
  color: white;
  text-align: center;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  display: none;
}
.complete-banner.show { display: flex; }

/* 공유 버튼 */
.share-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--radius);
  background: var(--bg-lighter);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}
.share-option:hover { border-color: var(--primary); background: var(--primary-light); }
.share-option .sh-icon { font-size: 24px; }
.share-option .sh-label { font-size: 10px; color: var(--text-gray); font-weight: 500; text-align: center; }

/* =============================================
   히스토리 화면
   ============================================= */
.history-search-bar {
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.search-input-wrap {
  flex: 1;
  position: relative;
}
.search-input {
  width: 100%;
  height: 40px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0 36px 0 14px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
}
.search-input:focus { border-color: var(--primary); }
.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--text-light);
  pointer-events: none;
}
.filter-btn {
  height: 40px;
  padding: 0 14px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-gray);
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: all 0.2s;
}
.filter-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.filter-chips {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip {
  padding: 5px 12px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--bg-white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-gray);
  white-space: nowrap;
  transition: all 0.2s;
}
.filter-chip.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

.history-list {
  padding: 12px 16px;
}
.hist-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 12px;
}
.hist-card:hover { box-shadow: var(--shadow); }
.hist-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.hist-info { flex: 1; min-width: 0; }
.hist-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-sub {
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 6px;
}
.hist-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hist-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
}
.hist-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.hist-menu-btn {
  width: 28px; height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-light);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
}
.hist-menu-btn:hover { background: var(--bg-light); }

/* =============================================
   설정 화면
   ============================================= */
.settings-section {
  padding: 8px 0;
  border-bottom: 8px solid var(--bg-light);
}
.settings-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px 6px;
}
.settings-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s;
  gap: 14px;
}
.settings-item:hover { background: var(--bg-lighter); }
.settings-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.settings-label { flex: 1; }
.settings-label .sl-title { font-size: 14px; font-weight: 500; color: var(--text-dark); }
.settings-label .sl-desc { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.settings-arrow { font-size: 16px; color: var(--text-light); }

/* 토글 스위치 */
.toggle-switch {
  width: 44px; height: 24px;
  background: var(--border-dark);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  flex-shrink: 0;
}
.toggle-switch.on { background: var(--primary); }
.toggle-switch::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: white;
  top: 3px; left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.toggle-switch.on::after { transform: translateX(20px); }

/* 프로필 헤더 */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 16px 20px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.profile-avatar-large {
  width: 80px; height: 80px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  margin-bottom: 12px;
  position: relative;
  cursor: pointer;
}
.avatar-edit-btn {
  position: absolute;
  bottom: 0; right: 0;
  width: 26px; height: 26px;
  background: var(--primary);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: white;
  border: 2px solid white;
}
.profile-name { font-size: 18px; font-weight: 700; color: var(--text-dark); }
.profile-role-tag {
  margin-top: 6px;
  padding: 3px 12px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

/* =============================================
   다이얼로그
   ============================================= */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.dialog-overlay.show { opacity: 1; pointer-events: all; }
.dialog-box {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  width: 100%;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
  transform: scale(0.9);
  transition: transform 0.2s;
}
.dialog-overlay.show .dialog-box { transform: scale(1); }
.dialog-icon { font-size: 40px; text-align: center; margin-bottom: 12px; }
.dialog-title { font-size: 17px; font-weight: 700; text-align: center; color: var(--text-dark); margin-bottom: 8px; }
.dialog-msg { font-size: 13px; text-align: center; color: var(--text-gray); line-height: 1.5; margin-bottom: 20px; }
.dialog-btns { display: flex; gap: 10px; }
.dialog-btn {
  flex: 1;
  height: 46px;
  border-radius: var(--radius);
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s;
}
.dialog-btn-cancel { background: var(--bg-light); color: var(--text-dark); }
.dialog-btn-cancel:hover { background: var(--border); }
.dialog-btn-confirm { background: var(--danger); color: white; }
.dialog-btn-confirm:hover { background: #dc2626; }
.dialog-btn-primary { background: var(--primary); color: white; }
.dialog-btn-primary:hover { background: var(--primary-dark); }

/* 서명 패드 */
.sign-pad-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.sign-pad-overlay.show { opacity: 1; pointer-events: all; }
.sign-pad-sheet {
  background: var(--bg-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: var(--app-max-width);
  padding: 20px;
  transform: translateY(100%);
  transition: transform 0.3s;
}
.sign-pad-overlay.show .sign-pad-sheet { transform: translateY(0); }
.sign-pad-title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; }
#signature-canvas {
  width: 100%;
  height: 180px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: crosshair;
  background: #FAFAFA;
  touch-action: none;
}
.sign-pad-btns { display: flex; gap: 10px; margin-top: 14px; }

/* 공유 모달 */
.share-modal-title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
.share-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.share-modal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: var(--radius);
  background: var(--bg-lighter);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}
.share-modal-item:hover { border-color: var(--primary); background: var(--primary-light); }
.share-modal-item .smi-icon { font-size: 28px; }
.share-modal-item .smi-label { font-size: 10px; color: var(--text-gray); font-weight: 500; text-align: center; }

/* 로딩 스피너 */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 빈 상태 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}
.empty-icon { font-size: 56px; opacity: 0.3; }
.empty-title { font-size: 16px; font-weight: 700; color: var(--text-gray); }
.empty-desc { font-size: 13px; color: var(--text-light); line-height: 1.5; }

/* =============================================
   협의 목록 화면
   ============================================= */
.consult-tabs {
  display: flex;
  padding: 12px 16px 0;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.consult-tab {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-gray);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  transition: all 0.2s;
}
.consult-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* 애니메이션 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.slide-up { animation: slideUp 0.3s ease-out; }

/* 모드 인트로 배너 */
.mode-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
.mode-banner .banner-icon { font-size: 36px; }
.mode-banner h3 { font-size: 16px; font-weight: 700; }
.mode-banner p { font-size: 12px; opacity: 0.8; margin-top: 3px; line-height: 1.4; }

/* 진행 단계 표시 */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
}
.step {
  flex: 1;
  text-align: center;
  position: relative;
}
.step-circle {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--border);
  color: var(--text-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin: 0 auto 4px;
  position: relative;
  z-index: 1;
}
.step.done .step-circle { background: var(--success); color: white; }
.step.active .step-circle { background: var(--primary); color: white; }
.step-label { font-size: 9px; color: var(--text-light); font-weight: 500; }
.step.active .step-label { color: var(--primary); font-weight: 700; }
.step.done .step-label { color: var(--success); }
.step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-top: -18px;
}
.step-line.done { background: var(--success); }

/* 반응형 - 큰 화면 */
@media (min-width: 500px) {
  .scroll-content { padding-bottom: calc(var(--tab-height) + 24px); }
}

/* =============================================
   WebRTC / 영상통화 개선 스타일
   ============================================= */

/* 연결 중 애니메이션 점 */
.conn-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  animation: connBounce 1.2s infinite ease-in-out;
}
@keyframes connBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* STT 음성 인식 펄스 */
.stt-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #FCD34D;
  animation: sttPulse 1s infinite;
}
@keyframes sttPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
}

/* STT 작은 점 */
.stt-dot-small {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  animation: sttPulse 1s infinite;
}

/* 음성메모 녹음 펄스 */
.rec-pulse {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FF6B6B;
  animation: recBlink 1s infinite;
}
@keyframes recBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* 음성 웨이브 애니메이션 */
.memo-wave-container {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
}
.memo-wave-bar {
  width: 4px;
  border-radius: 2px;
  background: var(--primary);
  animation: memoWave 0.8s ease-in-out infinite alternate;
}
.memo-wave-bar:nth-child(1) { animation-delay: 0s; height: 12px; }
.memo-wave-bar:nth-child(2) { animation-delay: .1s; height: 24px; }
.memo-wave-bar:nth-child(3) { animation-delay: .2s; height: 32px; }
.memo-wave-bar:nth-child(4) { animation-delay: .3s; height: 36px; }
.memo-wave-bar:nth-child(5) { animation-delay: .2s; height: 28px; }
.memo-wave-bar:nth-child(6) { animation-delay: .1s; height: 18px; }
.memo-wave-bar:nth-child(7) { animation-delay: 0s; height: 10px; }
@keyframes memoWave {
  from { transform: scaleY(0.4); }
  to { transform: scaleY(1); }
}

/* FAB 음성 메모 버튼 활성 상태 */
.fab-voice-memo.recording {
  background: var(--danger) !important;
  animation: fabRecPulse 1.5s infinite;
}
@keyframes fabRecPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(239,68,68,0.5); }
  50% { box-shadow: 0 4px 24px rgba(239,68,68,0.8); }
}

/* 마이크 뮤트 상태 */
.ctrl-btn.muted {
  background: rgba(239,68,68,0.25) !important;
  color: var(--danger) !important;
}
.ctrl-btn.muted i { position: relative; }
.ctrl-btn.muted i::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 20px; height: 2px;
  background: var(--danger);
  border-radius: 1px;
}

/* WebRTC 상태 표시 배지 */
#webrtc-status-badge {
  position: absolute;
  top: 60px; right: 12px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 15;
}
.webrtc-quality-bar {
  display: inline-flex;
  gap: 2px;
  align-items: flex-end;
  margin-right: 4px;
}
.webrtc-quality-bar span {
  width: 3px;
  background: #10B981;
  border-radius: 1px;
  display: block;
}

/* =============================================
   Undo / Redo 플로팅 버튼 개선
   ============================================= */
#float-undo:hover, #float-redo:hover:not([disabled]) {
  background: rgba(37,99,235,0.85) !important;
  border-color: var(--primary) !important;
  transform: scale(1.08);
}
#float-undo:active, #float-redo:active:not([disabled]) {
  transform: scale(0.93);
}
#float-undo.has-history {
  border-color: rgba(37,99,235,0.6) !important;
  color: white !important;
}
#float-undo.pulse-undo {
  animation: undoPulse .35s ease-out;
}
@keyframes undoPulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.88); }
  100% { transform: scale(1); }
}
#float-redo[disabled] { opacity: 0.35; cursor: default; }
#float-redo.has-redo {
  color: white !important;
  border-color: rgba(16,185,129,0.6) !important;
}

/* 마킹 단계 표시 툴팁 */
.undo-tooltip {
  position: absolute;
  left: 58px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
#float-undo:hover .undo-tooltip,
#float-redo:hover .undo-tooltip { opacity: 1; }

/* =============================================
   음성 입력 우선 UI 개선
   ============================================= */
/* 마이크 버튼 맥동 효과 */
.mic-pulse-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px solid rgba(37,99,235,0.4);
  animation: micRing 1.5s infinite ease-out;
  pointer-events: none;
}
@keyframes micRing {
  0% { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

#memo-mic-btn.recording {
  background: var(--danger) !important;
  box-shadow: 0 4px 24px rgba(239,68,68,0.5) !important;
  animation: fabRecPulse 1.5s infinite;
}

/* mark voice input 버튼 활성 */
#mark-voice-input-btn.recording {
  background: var(--primary) !important;
  color: white !important;
  animation: sttPulse 1s infinite;
}

/* =============================================
   영상통화 품질 표시
   ============================================= */
.quality-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}
.quality-good { background: #10B981; }
.quality-fair { background: #F59E0B; }
.quality-poor { background: #EF4444; }

/* local video pip 드래그 */
#local-video, #self-cam-fallback {
  user-select: none;
  -webkit-user-select: none;
}

/* 카메라 권한 안내 */
.cam-permission-hint {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: white;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
}

/* 스냅사진 카운트 배지 (FAB 위) */
.snap-count-badge {
  position: absolute;
  top: -5px; right: -5px;
  width: 20px; height: 20px;
  background: var(--danger);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f0f1a;
  pointer-events: none;
}

/* =============================================
   입력 필드 음성 버튼 통합 스타일
   ============================================= */
.input-with-voice {
  position: relative;
  display: flex;
  align-items: center;
}
.input-with-voice .form-input {
  padding-right: 80px;
}
.voice-input-btn {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all .2s;
  white-space: nowrap;
}
.voice-input-btn:hover { background: var(--primary-dark); }
.voice-input-btn.recording {
  background: var(--danger);
  animation: fabRecPulse 1.5s infinite;
}
.voice-input-btn i { font-size: 13px; }

/* 음성 입력 힌트 배너 */
.voice-hint-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--primary-light);
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}
.voice-hint-banner i { font-size: 16px; }

/* =============================================
   음성 우선 입력 UI (voice-first)
   ============================================= */
.voice-first-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #F5F3FF;
  border: 1px solid #DDD6FE;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 12px;
  color: #5B21B6;
  font-weight: 600;
}
.voice-first-banner i {
  font-size: 16px;
  color: #7C3AED;
  animation: micPulseSmall 2s infinite;
}
@keyframes micPulseSmall {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* 음성 입력 행 (인풋 + 음성 버튼 나란히) */
.voice-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.voice-input-row .form-input {
  flex: 1;
  min-width: 0;
}
.voice-field-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(37,99,235,0.35);
}
.voice-field-btn:hover { background: var(--primary-dark); transform: scale(1.05); }
.voice-field-btn:active { transform: scale(0.95); }
.voice-field-btn.listening {
  background: var(--danger) !important;
  animation: fabRecPulse 1.2s infinite;
}

/* =============================================
   영상통화 화면 전면 개선
   ============================================= */

/* 링 애니메이션 (발신 중) */
.ringing-ring {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25);
  animation: ringingExpand 2s infinite ease-out;
}
.ringing-ring::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  animation: ringingExpand 2s .5s infinite ease-out;
}
@keyframes ringingExpand {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* 통화 상태바 재설계 */
.call-status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
}

/* FAB 그룹 위치 조정 */
.fab-group {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fab-btn {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  transition: all .2s;
  font-size: 18px;
  color: white;
}
.fab-btn:active { transform: scale(0.93); }
.fab-btn .fab-label { font-size: 8px; font-weight: 700; }

.fab-snap { background: #7C3AED; }
.fab-snap:hover { background: #6D28D9; }
.fab-mark { background: #10B981; }
.fab-mark:hover { background: #059669; }
.fab-mark.disabled { background: rgba(107,114,128,0.7) !important; cursor: not-allowed; }
.fab-end { background: #EF4444; }
.fab-end:hover { background: #DC2626; }

/* 컨트롤 바 재설계 */
.call-controls {
  background: rgba(15,23,42,0.95);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 8px 14px;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  gap: 4px;
}
.ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  min-width: 44px;
  min-height: 56px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 12px;
  color: rgba(255,255,255,0.7);
  font-size: 18px;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--font);
}
.ctrl-btn span { font-size: 9px; font-weight: 600; white-space: nowrap; }
.ctrl-btn:hover { background: rgba(255,255,255,0.14); color: white; }
.ctrl-btn.active { color: white; background: rgba(255,255,255,0.12); }
.ctrl-btn.inactive { color: rgba(255,255,255,0.3); background: transparent; }
.ctrl-btn-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  min-width: 56px;
  min-height: 56px;
  background: var(--danger);
  border: none;
  border-radius: 16px;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(239,68,68,0.5);
  font-family: var(--font);
}
.ctrl-btn-end:hover { background: #DC2626; transform: scale(1.05); }
.ctrl-btn-end:active { transform: scale(0.95); }

/* 촬영 사진 스트립 */
.captured-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 4px;
  -webkit-overflow-scrolling: touch;
}
.captured-strip::-webkit-scrollbar { display: none; }
.captured-thumb {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.2);
  position: relative;
  transition: all .2s;
}
.captured-thumb:hover { border-color: var(--primary); transform: scale(1.05); }
.captured-count {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger);
  color: white;
  font-size: 9px; font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(15,23,42,0.8);
}

/* 타이머 (상태바 내 위치) */
.call-timer {
  font-size: 13px;
  font-weight: 700;
  color: white;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

/* 퀵 메모 마이크 버튼 활성 */
#qnote-mic-btn.listening {
  background: var(--danger) !important;
  animation: fabRecPulse 1.2s infinite;
}

/* tool-redo 상태 */
#tool-redo[disabled] { opacity: 0.35; pointer-events: none; }
#tool-redo:not([disabled]) { opacity: 1; }

/* shake 애니메이션 (실행 불가 피드백) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Undo/Redo 플로팅 버튼 개선 */
#float-undo:active, #float-redo:active:not([disabled]) {
  transform: scale(0.9) !important;
}
#float-redo[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
#float-redo.active-redo {
  background: rgba(16,185,129,0.85) !important;
  color: white !important;
  cursor: pointer;
  pointer-events: auto;
}

/* ============================================================
   📷 카메라 뷰파인더 모달
   ============================================================ */
#camera-viewfinder-modal {
  display: none;
}
#camera-viewfinder-modal.open {
  display: flex !important;
}

/* 카운트다운 표시 */
#vf-countdown.show {
  display: flex !important;
}

@keyframes countPulse {
  0%   { transform: scale(1.2); opacity: 0.6; }
  50%  { transform: scale(1);   opacity: 1;   }
  100% { transform: scale(0.9); opacity: 0.8; }
}

/* 촬영 플래시 */
@keyframes vfFlash {
  0%   { opacity: 0.9; }
  100% { opacity: 0;   }
}
#vf-flash.show {
  display: block !important;
  animation: vfFlash 0.35s ease-out forwards;
}

/* 촬영 버튼 누를 때 */
#vf-capture-btn:active {
  transform: scale(0.92);
}

/* 뷰파인더 촬영된 이미지 썸네일 */
#vf-last-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   📋 리포트 미리보기 모달
   ============================================================ */
#report-preview-modal {
  display: none;
}
#report-preview-modal.open {
  display: block !important;
}

/* 미리보기 사진 그리드 */
#rp-photos-grid .rp-photo-card {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #F3F4F6;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#rp-photos-grid .rp-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#rp-photos-grid .rp-defect-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: #EF4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.4;
}

/* 미리보기 하자 테이블 */
.rp-defect-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
  background: #FEF9C3;
  font-size: 13px;
  align-items: center;
}
.rp-defect-row:last-child { margin-bottom: 0; }
.rp-defect-total {
  background: #FEE2E2;
  font-weight: 700;
}

/* 미리보기 참여자 카드 */
.rp-participant {
  background: #F8FAFC;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  border: 1px solid #E2E8F0;
}
.rp-participant .rp-role {
  font-size: 10px;
  color: #9CA3AF;
  margin-bottom: 2px;
}
.rp-participant .rp-name {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}

/* 히스토리 카드 미리보기 버튼 */
.hist-preview-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F5F3FF;
  border: 1px solid #DDD6FE;
  color: #7C3AED;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: all .15s;
}
.hist-preview-btn:hover {
  background: #EDE9FE;
}

/* ============================================================
   📞 연락처 선택 모달
   ============================================================ */
#contact-dial-modal {
  display: none;
}
#contact-dial-modal.open {
  display: block !important;
}

.cdm-tab {
  transition: color .2s, border-color .2s;
}
.cdm-tab.active {
  color: #7C3AED !important;
  border-bottom-color: #7C3AED !important;
  font-weight: 700 !important;
}

/* 연락처 아이템 */
.cdm-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid #F9FAFB;
}
.cdm-contact-item:hover,
.cdm-contact-item:active {
  background: #F5F3FF;
}
.cdm-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9333EA, #6D28D9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: white;
  font-weight: 700;
}
.cdm-avatar.recent-call {
  background: linear-gradient(135deg, #10B981, #065f46);
}
.cdm-avatar.favorite {
  background: linear-gradient(135deg, #F59E0B, #D97706);
}
.cdm-info {
  flex: 1;
  min-width: 0;
}
.cdm-name {
  font-size: 15px;
  font-weight: 700;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdm-detail {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdm-detail .cdm-time {
  color: #6B7280;
  font-size: 11px;
}
.cdm-call-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #EDE9FE;
  border: none;
  color: #7C3AED;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.cdm-call-btn:hover {
  background: #7C3AED;
  color: #fff;
  transform: scale(1.05);
}
.cdm-call-btn:active {
  transform: scale(0.95);
}
.cdm-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #9CA3AF;
  padding: 10px 16px 4px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.cdm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #9CA3AF;
  font-size: 13px;
  gap: 8px;
}
.cdm-empty .cdm-empty-icon {
  font-size: 40px;
  opacity: .4;
}

/* 검색 입력 활성화 시 */
#cdm-search:focus {
  outline: none;
}
#cdm-manual-num:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

/* 통화 연결 중 애니메이션 */
@keyframes callConnecting {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.call-connecting-pulse {
  animation: callConnecting 1.2s ease-in-out infinite;
}

/* =============================================
   📱 카카오톡 스타일 추가 UI 개선
   ============================================= */

/* 홈 화면 상단 배너 - 빠른 업무 시작 */
.home-quick-banner {
  background: linear-gradient(135deg, #1A1A1A 0%, #374151 100%);
  margin: 10px 14px 0;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.home-quick-banner:hover { opacity: 0.9; }
.hqb-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #9333EA, #7C3AED);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.hqb-text { flex: 1; }
.hqb-title { font-size: 14px; font-weight: 800; color: #fff; }
.hqb-desc { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* 채팅 아이템 개선 - 통화 버튼 표시 */
.chat-item-actions {
  display: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  gap: 6px;
}
.chat-item:hover .chat-item-actions { display: flex; }
.chat-action-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: all 0.15s;
}
.chat-action-btn.call-video { background: #EDE9FE; color: #7C3AED; }
.chat-action-btn.call-voice { background: #D1FAE5; color: #059669; }
.chat-action-btn:hover { transform: scale(1.1); }

/* 채팅 아이템 슬라이드 효과 */
.chat-item {
  transition: background 0.15s, transform 0.1s;
}
.chat-item:active { transform: scale(0.98); }

/* 온라인 상태 점 */
.online-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 12px; height: 12px;
  border-radius: var(--radius-full);
  background: #10B981;
  border: 2px solid #fff;
}

/* 통화 탭 화면 - 연락처 섹션 헤더 */
.call-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 4px;
}
.call-section-header-title {
  font-size: 12px;
  font-weight: 700;
  color: #9CA3AF;
  letter-spacing: 0.3px;
}
.call-section-header-more {
  font-size: 12px;
  color: #7C3AED;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
}

/* 영상통화 업무 모드 카드 개선 */
.vmode-card {
  border: 1.5px solid #F3F4F6;
}
.vmode-card:hover {
  border-color: #7C3AED;
  background: #F5F3FF;
}

/* 그룹통화 활성 그룹 표시 */
.active-group-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FEF3C7, #FFFDE7);
  border: 1.5px solid #FDE68A;
  border-radius: var(--radius-md);
  margin: 4px 14px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.active-group-item:hover { opacity: 0.9; }
.active-group-dot {
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
  background: #EF4444;
  animation: recBlink 1s infinite;
  flex-shrink: 0;
}
.active-group-info { flex: 1; }
.active-group-name { font-size: 14px; font-weight: 700; color: #1A1A1A; }
.active-group-count { font-size: 12px; color: #6B7280; margin-top: 1px; }
.active-group-join-btn {
  padding: 7px 14px;
  border-radius: 99px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
  flex-shrink: 0;
}
.active-group-join-btn:hover { background: linear-gradient(135deg, #6D28D9, #7C3AED); }

/* 마이페이지 설정 아이템 마지막 항목 */
.settings-list-compact .set-item-c:last-child { border-bottom: none; }

/* 채팅 목록 빈 상태 */
.chat-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #9CA3AF;
  text-align: center;
  gap: 10px;
}
.chat-list-empty-icon { font-size: 48px; opacity: 0.5; }
.chat-list-empty-text { font-size: 14px; font-weight: 600; }
.chat-list-empty-sub { font-size: 12px; }

/* 마이페이지 빠른 액션 버튼 */
.mypage-quick-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 8px solid #F3F4F6;
}
.mypage-qa-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border: 1.5px solid #F3F4F6;
  border-radius: 12px;
  background: #FAFAFA;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
}
.mypage-qa-btn:hover { background: #F3F4F6; border-color: #E5E7EB; }
.mypage-qa-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.mypage-qa-label {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}

/* 상단바 탭 전환 시 타이틀 강조 */
#topbar-title {
  transition: opacity 0.2s;
}

/* =============================================
   🗓️ 캘린더 홈 화면 스타일
   ============================================= */

/* 캘린더 헤더 */
.cal-header {
  background: linear-gradient(160deg, #6D28D9 0%, #7C3AED 100%);
  flex-shrink: 0;
  padding: 10px 14px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  z-index: 5;
}
.cal-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cal-profile-btn {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.cal-profile-btn:hover { opacity: 0.8; }
.cal-title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-month-label {
  font-size: 17px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.3px;
  line-height: 1;
}
.cal-view-tabs {
  display: flex;
  gap: 4px;
}
.cal-view-btn {
  padding: 3px 10px;
  border-radius: 99px;
  border: 1.5px solid rgba(0,0,0,0.2);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.cal-view-btn.active {
  background: rgba(255,255,255,0.25);
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.5);
}
.cal-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.cal-icon-btn {
  width: 36px; height: 36px;
  border-radius: 99px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  color: #FFFFFF;
  transition: background 0.15s;
}
.cal-icon-btn:hover { background: rgba(255,255,255,0.15); }
.cal-points-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 99px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
}
.cal-points-badge i { color: #FCD34D; font-size: 11px; }

/* 캘린더 바디 */
.cal-body {
  flex-shrink: 0;
  background: #fff;
  padding: 0 0 4px;
  border-bottom: 1px solid #F3F4F6;
}

/* ─── 오늘 뷰 (TODAY) ─── */
.cal-today-strip {
  display: flex;
  overflow-x: auto;
  gap: 0;
  padding: 8px 12px 6px;
  scrollbar-width: none;
}
.cal-today-strip::-webkit-scrollbar { display: none; }
.cal-day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  min-width: 44px;
}
.cal-day-chip:hover { background: #F3F4F6; }
.cal-day-chip.selected { background: #1A1A1A; }
.cal-day-chip.today .cal-day-num { color: #A78BFA; }
.cal-day-chip.selected .cal-day-num { color: #A78BFA; }
.cal-day-chip.selected .cal-day-name { color: rgba(255,255,255,0.7); }
.cal-day-name {
  font-size: 10px;
  font-weight: 600;
  color: #9CA3AF;
}
.cal-day-num {
  font-size: 15px;
  font-weight: 800;
  color: #1A1A1A;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
}
.cal-day-chip.has-event .cal-day-num::after {
  content: '';
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #10B981;
  position: absolute;
  bottom: 1px;
  margin-top: -5px;
}
.cal-day-chip { position: relative; }
.cal-event-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #10B981;
}
.cal-day-chip.selected .cal-event-dot { background: #A78BFA; }

/* ─── 주간 뷰 ─── */
.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px 8px 6px;
  gap: 2px;
}
.cal-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s;
}
.cal-week-day:hover { background: #F3F4F6; }
.cal-week-day.selected { background: #1A1A1A; }
.cal-week-day.selected .cal-wd-name { color: rgba(255,255,255,0.6); }
.cal-week-day.selected .cal-wd-num  { color: #A78BFA; }
.cal-wd-name {
  font-size: 9px; font-weight: 700; color: #9CA3AF;
}
.cal-wd-num {
  font-size: 14px; font-weight: 800; color: #1A1A1A;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px;
}
.cal-week-day.today .cal-wd-num {
  background: #7C3AED;
  color: #FFFFFF;
}
.cal-week-event-dots {
  display: flex; gap: 2px;
  min-height: 5px;
}
.cal-week-event-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #10B981;
}

/* ─── 월간 뷰 ─── */
.cal-month-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 8px 0;
  gap: 0;
}
.cal-month-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #9CA3AF;
  padding: 4px 0;
}
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 2px 8px 4px;
  gap: 2px;
}
.cal-month-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 3px 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.cal-month-cell:hover { background: #F3F4F6; }
.cal-month-cell.selected { background: #1A1A1A; }
.cal-month-cell.selected .cal-mc-num { color: #A78BFA; }
.cal-month-cell.today .cal-mc-num {
  background: #7C3AED;
  border-radius: 99px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.cal-mc-num {
  font-size: 11px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1;
}
.cal-mc-num.other-month { color: #D1D5DB; }
.cal-mc-dots {
  display: flex;
  gap: 1.5px;
  margin-top: 2px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 18px;
}
.cal-mc-dot {
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
}

/* ─── 일정 아젠다 패널 ─── */
.cal-agenda {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #F9FAFB;
  padding-bottom: 4px;
  min-height: 0; /* flex child 스크롤 정상 작동 */
}
.cal-agenda::-webkit-scrollbar { display: none; }
.cal-agenda-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  background: #fff;
  border-bottom: 1px solid #F3F4F6;
  position: sticky;
  top: 0;
  z-index: 3;
}
.cal-agenda-title {
  font-size: 14px;
  font-weight: 800;
  color: #1A1A1A;
}
.cal-agenda-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: #10B981;
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.cal-agenda-add:hover { background: #059669; transform: scale(1.03); }
.cal-agenda-add i { font-size: 12px; }

/* 일정 아이템 */
.cal-event-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 16px;
  background: #fff;
  border-bottom: 1px solid #F9FAFB;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.cal-event-item:hover { background: #F9FAFB; }
.cal-event-time-col {
  width: 44px;
  flex-shrink: 0;
  text-align: right;
}
.cal-event-hour {
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.2;
}
.cal-event-min {
  font-size: 10px;
  color: #9CA3AF;
}
.cal-event-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
  min-height: 36px;
}
.cal-event-info { flex: 1; min-width: 0; }
.cal-event-title {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event-place {
  font-size: 12px;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cal-event-cat {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

/* 빈 일정 */
.cal-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 8px;
  color: #9CA3AF;
  text-align: center;
}
.cal-empty-icon { font-size: 40px; opacity: 0.4; }
.cal-empty-text { font-size: 14px; font-weight: 600; }
.cal-empty-sub { font-size: 12px; }

/* ─── 통화 중 홈 복귀 버튼 스타일 ─── */
#call-home-btn:hover { background: rgba(255,255,255,0.28) !important; }
#call-home-btn:active { transform: scale(0.93); }

/* PiP 배너 애니메이션 */
#call-pip-bar {
  animation: slideUpIn 0.3s ease-out;
}
@keyframes slideUpIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* 일정 카테고리 선택 활성 */
.sch-cat.selected {
  box-shadow: 0 0 0 2px #1A1A1A;
  transform: scale(1.05);
}

/* 음성 입력 중 마이크 버튼 */
#sch-mic-btn.listening {
  background: #EF4444 !important;
  animation: fabRecPulse 1.5s infinite;
  box-shadow: 0 4px 20px rgba(239,68,68,0.5) !important;
}

/* =============================================
   홈 화면 캘린더 뷰 탭 바
   ============================================= */
.cal-view-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 6px;
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cal-view-bar .cal-view-btn {
  padding: 5px 13px;
  border-radius: 99px;
  border: 1.5px solid rgba(0,0,0,0.2);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,0.55);
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.cal-view-bar .cal-view-btn.active {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: #7C3AED;
}
.cal-view-bar .cal-month-label {
  font-size: 14px;
  font-weight: 800;
  color: #1A1A1A;
  flex: 1;
  text-align: right;
  padding-right: 4px;
}
.cal-add-fab {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #FFFFFF;
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.cal-add-fab:hover { background: #333; transform: scale(1.05); }

/* =============================================
   채팅 탭 (카카오톡 스타일)
   ============================================= */
.chat-tab-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0 !important;
  margin-top: 0 !important;
}
/* ======================================================
   ★ 추가 스타일: vtab-snap, 채팅 카테고리 필터, CDP 패널,
      협의목록 아이템, 프로필 편집 모달
   ====================================================== */

/* 영상통화 탭 - 섹션 헤더 + 직접촬영 FAB */
.vtab-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 4px;
}
.vtab-snap-fab {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(245,158,11,0.4);
  transition: transform .15s, box-shadow .15s;
}
.vtab-snap-fab:active { transform: scale(0.95); }
.vtab-snap-fab i { font-size: 13px; }

/* 채팅 탭 - 카테고리 필터 바 */
.chat-cat-filter-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #FAFAFA;
  border-bottom: 1px solid #F0F0F0;
  flex-shrink: 0;
}
.chat-cat-filter-bar::-webkit-scrollbar { display: none; }
.chat-cat-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 16px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.chat-cat-btn.active {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: #7C3AED;
}
.chat-cat-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #E5E7EB;
  color: #374151;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}
.chat-cat-btn.active .chat-cat-cnt {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* 채팅 목록 */
.chat-list-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #F9FAFB;
  cursor: pointer;
  transition: background .1s;
}
.chat-item:active { background: #F3F4F6; }
.chat-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.chat-info { flex: 1; min-width: 0; }
.chat-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.chat-name {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  flex-shrink: 0;
}
.chat-time {
  font-size: 11px;
  color: #9CA3AF;
  margin-left: auto;
  flex-shrink: 0;
}
.chat-mode-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}
.chat-preview-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-preview {
  font-size: 12px;
  color: #6B7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.chat-unread-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* 채팅 상세 패널 */
.chat-detail-panel {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 90;
  flex-direction: column;
  display: none;
}
.cdp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #F0F0F0;
  background: #fff;
  flex-shrink: 0;
}
.cdp-back-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #F3F4F6;
  border-radius: 10px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cdp-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.cdp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cdp-name {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
}
.cdp-mode-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  margin-top: 2px;
  display: inline-block;
}
.cdp-video-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: #10B981;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cdp-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #F9FAFB;
  -webkit-overflow-scrolling: touch;
}
.cdp-msg {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.cdp-msg-sent {
  flex-direction: row-reverse;
}
.cdp-msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.cdp-msg-bubble {
  max-width: 70%;
}
.cdp-msg-text {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.cdp-msg-recv .cdp-msg-text {
  background: #fff;
  color: #1A1A1A;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.cdp-msg-sent .cdp-msg-text {
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
}
.cdp-msg-time {
  font-size: 10px;
  color: #9CA3AF;
  margin-top: 3px;
  text-align: right;
}
.cdp-msg-recv .cdp-msg-time { text-align: left; }

.cdp-input-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-top: 1px solid #F0F0F0;
  background: #fff;
  flex-shrink: 0;
}
.cdp-attach-btn, .cdp-mic-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #F3F4F6;
  border-radius: 10px;
  color: #6B7280;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cdp-input {
  flex: 1;
  height: 36px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 13px;
  outline: none;
  color: #1A1A1A;
}
.cdp-input:focus { border-color: #7C3AED; }
.cdp-send-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 협의목록 아이템 */
.consult-record-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #F0F0F0;
  cursor: pointer;
  transition: background .1s;
}
.consult-record-item:active { background: #F9FAFB; }
.cri-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.cri-info { flex: 1; min-width: 0; }
.cri-title {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 3px;
}
.cri-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #6B7280;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.cri-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cri-tag {
  font-size: 10px;
  background: #F3F4F6;
  color: #374151;
  padding: 2px 7px;
  border-radius: 8px;
}
.cri-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.cri-status {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 3px 8px;
  border-radius: 10px;
}
.cri-date {
  font-size: 10px;
  color: #9CA3AF;
}

/* 마이페이지 필터 바 */
.myp-filter-row {
  display: flex;
  gap: 6px;
  padding: 10px 14px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}
.myp-filter-row::-webkit-scrollbar { display: none; }
.myp-filter {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  color: #6B7280;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.myp-filter.active {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: #7C3AED;
}
.myp-type-filter-row { padding-top: 0; }
.myp-type-filter {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.myp-type-filter.active {
  background: #F59E0B;
  color: #fff;
  border-color: #F59E0B;
}

/* 마이페이지 패널 */
.myp-panel { display: none; flex-direction: column; }
.myp-panel.active { display: flex; }

/* 프로필 편집 모달 */
.pem-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pem-sheet {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUp .3s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.pem-handle {
  width: 40px;
  height: 4px;
  background: #E5E7EB;
  border-radius: 2px;
  margin: 12px auto 0;
}
.pem-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #F0F0F0;
}
.pem-close-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: #F3F4F6;
  border-radius: 10px;
  font-size: 14px;
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pem-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #1A1A1A;
  margin: 0;
}
.pem-save-btn {
  padding: 6px 16px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
}

/* 아바타 섹션 */
.pem-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 10px;
}
.pem-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}
.pem-avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: #D1FAE5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  cursor: pointer;
  overflow: hidden;
  border: 3px solid #F3F4F6;
}
.pem-avatar-cam {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #7C3AED;
  border: 2px solid #fff;
  font-size: 11px;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pem-avatar-hint {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 8px;
}

/* 폼 섹션 */
.pem-section {
  padding: 14px 16px 6px;
  border-top: 8px solid #F9FAFB;
}
.pem-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.pem-field {
  margin-bottom: 12px;
}
.pem-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 5px;
}
.pem-id-check {
  margin-left: auto;
  background: #EDE9FE;
  color: #7C3AED;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
}
.pem-id-result {
  display: block;
  font-size: 11px;
  margin-top: 4px;
}
.pem-input {
  width: 100%;
  height: 42px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: #1A1A1A;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
}
.pem-input:focus { border-color: #7C3AED; }

/* 소셜 버튼 */
.pem-social-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all .15s;
}
.pem-social-btn:active { transform: scale(0.98); }
.pem-google-btn:hover { border-color: #4285F4; background: #EFF6FF; }
.pem-google-btn.linked { background: #EFF6FF; border-color: #4285F4; color: #1E40AF; }
.pem-kakao-btn { background: #FEE500; border-color: #E8C900; color: #3B1E1E; }
.pem-kakao-btn:hover { background: #FDD800; }
.pem-kakao-btn.linked { background: #FDD800; border-color: #C8A800; box-shadow: 0 0 0 2px rgba(200,168,0,0.25); }
.pem-social-btn.linked::after {
  content: '✅';
  margin-left: auto;
  font-size: 16px;
}
.pem-danger-btn {
  width: 100%;
  padding: 12px;
  border: 1.5px solid #FCA5A5;
  background: #FEF2F2;
  border-radius: 12px;
  color: #EF4444;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* 빠른 모드 버튼 */
.cqm-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: #fff;
  cursor: pointer;
  padding: 6px 2px;
  border-radius: 12px;
  transition: background .1s;
  min-width: 0;
  flex: 1;
}
.cqm-btn:active { background: #F3F4F6; }
.cqm-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.cqm-label {
  font-size: 10px;
  font-weight: 600;
  color: #374151;
}
.chat-quick-modes {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #F0F0F0;
  background: #fff;
  flex-shrink: 0;
}

/* ====================================================== */

/* =====================================================
   ★ 신규 추가: ccg 채팅 카테고리 박스, vtab 액션패널,
      마이페이지 3탭, 이미지전송 UI
   ===================================================== */

/* ── 채팅 카테고리 그리드 박스 (ccg) ───────────────── */
/* 카테고리 라벨 바 */
.chat-cat-label-bar {
  display: flex;
  align-items: center;
  padding: 8px 14px 2px;
  background: #fff;
  flex-shrink: 0;
}
.chat-cat-label-text {
  font-size: 11px;
  font-weight: 700;
  color: #9CA3AF;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.chat-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 12px 12px;
  background: #fff;
  border-bottom: 2px solid #F0F0F0;
  flex-shrink: 0;
}
.ccg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px 9px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: var(--ccg-bg, #F3F4F6);
  cursor: pointer;
  transition: all .18s;
  position: relative;
}
.ccg-btn:active { transform: scale(0.96); }
.ccg-btn.active {
  border-color: var(--ccg-tc, #111);
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}
.ccg-all { background: linear-gradient(135deg, #4C1D95, #7C3AED) !important; }
.ccg-all .ccg-label { color: #FFFFFF !important; }
.ccg-all.active { border-color: #7C3AED; box-shadow: 0 3px 12px rgba(124,58,237,0.35); }
.ccg-all .ccg-badge { background: #A78BFA; color: #FFFFFF; }
.ccg-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  width: 100%;
}
.ccg-emoji { font-size: 22px; line-height: 1; }
.ccg-badge {
  position: absolute;
  top: -6px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--ccg-tc, #374151);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.ccg-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ccg-tc, #374151);
  text-align: center;
  line-height: 1.2;
}

/* ── 영상통화 탭 액션 패널 ──────────────────────────── */
.vtab-action-panel {
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vtab-main-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  width: 100%;
}
.vtab-main-btn:active { transform: scale(0.98); }

/* 영상통화 시작 버튼 */
.vtab-call-btn {
  background: linear-gradient(135deg, #1A1A1A 0%, #374151 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.vtab-call-btn .vtab-btn-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #A78BFA;
  flex-shrink: 0;
}
.vtab-call-btn .vtab-btn-title { color: #fff; }
.vtab-call-btn .vtab-btn-desc { color: rgba(255,255,255,0.65); }
.vtab-call-btn .vtab-btn-arrow { color: rgba(255,255,255,0.4); }

/* 이미지 전송 버튼 */
.vtab-img-btn {
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  border: 1.5px solid #DDD6FE;
  box-shadow: 0 2px 8px rgba(124,58,237,0.12);
}
.vtab-img-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
}
.vtab-img-btn .vtab-btn-title { color: #5B21B6; }
.vtab-img-btn .vtab-btn-desc { color: #7C3AED; }
.vtab-img-btn .vtab-btn-arrow { color: #A78BFA; }
.vtab-img-btn.active { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); border-color: #7C3AED; }

/* 버튼 공통 텍스트 */
.vtab-btn-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vtab-btn-title { font-size: 16px; font-weight: 800; line-height: 1.2; }
.vtab-btn-desc { font-size: 11px; line-height: 1.3; }
.vtab-btn-arrow { font-size: 13px; flex-shrink: 0; }

/* 이미지 전송 빠른 옵션 (항상 보임) */
.vtab-quick-opts {
  display: flex;
  gap: 8px;
  padding: 0 2px 2px;
}
.vtab-quick-opt-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1.5px solid #E5E7EB;
  background: #F9FAFB;
  cursor: pointer;
  transition: all .15s;
}
.vtab-quick-opt-btn:active { transform: scale(0.97); }
.vtab-quick-opt-btn.active-opt {
  background: #F5F3FF;
  border-color: #A78BFA;
}
.vtab-qopt-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.vtab-qopt-label {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}
@keyframes fadeInDown {
  from { opacity:0; transform: translateY(-6px); }
  to   { opacity:1; transform: translateY(0); }
}
/* 구형 옵션 스타일 (fallback) */
.vtab-img-opt-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}
.vtab-opt-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.vtab-opt-label { font-size: 12px; font-weight: 700; color: #1A1A1A; }
.vtab-opt-desc { font-size: 9px; color: #9CA3AF; text-align: center; }

/* 공유 이미지 미리보기 */
.vtab-shared-imgs {
  border: 1.5px solid #E5E7EB;
  border-radius: 14px;
  padding: 10px;
  background: #F9FAFB;
}
.vtab-shared-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}
.vtab-shared-clear {
  font-size: 11px;
  color: #EF4444;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.vtab-shared-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.vtab-shared-strip::-webkit-scrollbar { display: none; }
.vtab-img-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: #E5E7EB;
  overflow: hidden;
  position: relative;
  border: 1.5px solid #D1D5DB;
}
.vtab-img-time {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.4);
  padding: 1px 0;
}

/* 마이페이지 3탭: flex 유지 (기존 스타일 활용) */

/* ===================================================== */

.chat-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px;
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 100%);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  margin-top: 0;
  padding-top: 8px;
}
.chat-search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.55);
  border-radius: 12px;
  padding: 8px 12px;
  border: 1.5px solid rgba(0,0,0,0.08);
}
.chat-search-input-wrap input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  font-family: var(--font);
  color: #1A1A1A;
}
.chat-search-input-wrap input::placeholder { color: rgba(0,0,0,0.38); }
.chat-new-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(0,0,0,0.12);
  border: none;
  color: #1A1A1A;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.chat-new-btn:hover { background: rgba(0,0,0,0.2); }

/* 업무 모드 빠른 시작 */
.chat-quick-modes {
  display: flex;
  gap: 8px;
  padding: 10px 14px 8px;
  background: #fff;
  border-bottom: 6px solid #F3F4F6;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-quick-modes::-webkit-scrollbar { display: none; }
.cqm-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 68px;
  background: none;
  border: 1.5px solid #F3F4F6;
  border-radius: 12px;
  padding: 8px 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
}
.cqm-btn:hover { background: #F9FAFB; border-color: #E5E7EB; }
.cqm-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.cqm-label {
  font-size: 10px;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
}

/* 채팅 목록 */
.chat-list-ul {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
.chat-list-ul::-webkit-scrollbar { display: none; }

/* =============================================
   상단바 타이틀 탭 전환 트랜지션
   ============================================= */
#topbar-title { transition: opacity 0.2s; }

/* =============================================
   영상통화 탭 - 섹션 헤더 + 촬영 FAB
   ============================================= */
.vtab-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
}
.vtab-snap-fab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 99px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  transition: all 0.15s;
}
.vtab-snap-fab:hover { transform: scale(1.04); box-shadow: 0 5px 16px rgba(0,0,0,0.28); }
.vtab-snap-fab i { font-size: 13px; }

/* =============================================
   채팅 탭 - 카테고리 카운터 필터 바
   ============================================= */
.chat-cat-filter-bar {
  display: flex;
  gap: 6px;
  padding: 8px 14px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid #F3F4F6;
}
.chat-cat-filter-bar::-webkit-scrollbar { display: none; }
.chat-cat-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1.5px solid #E5E7EB;
  background: #F9FAFB;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  transition: all 0.15s;
  flex-shrink: 0;
}
.chat-cat-btn.active {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: #7C3AED;
}
.chat-cat-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  background: rgba(0,0,0,0.1);
  font-size: 9px;
  font-weight: 800;
  padding: 0 4px;
  color: inherit;
}
.chat-cat-btn.active .chat-cat-cnt {
  background: rgba(255,255,255,0.25);
  color: #FFFFFF;
}

/* =============================================
   채팅 상세 패널
   ============================================= */
.chat-detail-panel {
  position: absolute;
  inset: 0;
  background: #F0F2F5;
  display: flex;
  flex-direction: column;
  z-index: 50;
  animation: slideInRight 0.25s ease-out;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.cdp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  flex-shrink: 0;
}
.cdp-back-btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #FFFFFF;
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cdp-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.cdp-avatar {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(0,0,0,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.cdp-name {
  font-size: 15px;
  font-weight: 800;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdp-mode-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  margin-top: 2px;
  display: inline-block;
}
.cdp-video-btn {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #FFFFFF;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.cdp-video-btn:hover { background: #333; }
.cdp-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cdp-messages::-webkit-scrollbar { display: none; }
.cdp-msg {
  max-width: 75%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.cdp-msg.mine {
  align-self: flex-end;
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
}
.cdp-msg.other {
  align-self: flex-start;
  background: #fff;
  color: #1A1A1A;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.cdp-msg-meta {
  font-size: 10px;
  color: #9CA3AF;
  margin-top: 2px;
  align-self: flex-end;
}
.cdp-msg-meta.other { align-self: flex-start; }
.cdp-date-divider {
  text-align: center;
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 600;
  padding: 4px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cdp-date-divider::before, .cdp-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E5E7EB;
}
.cdp-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid #F3F4F6;
  flex-shrink: 0;
}
.cdp-input {
  flex: 1;
  height: 38px;
  border: 1.5px solid #E5E7EB;
  border-radius: 20px;
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  background: #F9FAFB;
  color: #1F2937;
}
.cdp-input:focus { border-color: #7C3AED; background: #fff; }
.cdp-attach-btn, .cdp-mic-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: #F3F4F6;
  color: #6B7280;
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cdp-send-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #FFFFFF;
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.cdp-send-btn:hover { background: linear-gradient(135deg, #6D28D9, #7C3AED); transform: scale(1.05); }

/* =============================================
   마이페이지 - 업무 타입 2행 필터
   ============================================= */
.myp-type-filter-row {
  background: #FAFAFA;
  border-top: 1px solid #F3F4F6;
  padding: 6px 14px !important;
  overflow-x: auto;
  flex-wrap: nowrap !important;
}
.myp-type-filter-row::-webkit-scrollbar { display: none; }
.myp-type-filter {
  padding: 4px 10px;
  border-radius: 99px;
  border: 1.5px solid #E5E7EB;
  background: #F9FAFB;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  transition: all 0.15s;
  flex-shrink: 0;
}
.myp-type-filter.active {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: #7C3AED;
}

/* =============================================
   프로필 편집 모달
   ============================================= */
.pem-sheet {
  background: #fff;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 430px;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.3);
  padding-bottom: 24px;
}
.pem-sheet::-webkit-scrollbar { display: none; }
.pem-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 20px 14px;
}
.pem-title {
  font-size: 18px;
  font-weight: 800;
  color: #1F2937;
}
.pem-subtitle {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 3px;
}
.pem-close-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #F3F4F6;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* 아바타 섹션 */
.pem-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 20px 16px;
}
.pem-avatar-wrap {
  position: relative;
  width: 88px; height: 88px;
}
.pem-avatar-preview {
  width: 88px; height: 88px;
  border-radius: 22px;
  background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  overflow: hidden;
  border: 3px solid #A78BFA;
}
.pem-avatar-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pem-avatar-upload-btn {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #7C3AED;
  color: #FFFFFF;
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.pem-avatar-hint {
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 600;
}
/* 폼 */
.pem-form {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pem-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pem-label {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
}
.pem-input {
  width: 100%;
  height: 44px;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--font);
  color: #1F2937;
  outline: none;
  background: #F9FAFB;
  transition: border-color 0.15s;
}
.pem-input:focus { border-color: #7C3AED; background: #fff; }
.pem-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pem-input-row .pem-input { flex: 1; }
.pem-check-btn {
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: #F3F4F6;
  border: 1.5px solid #E5E7EB;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  transition: all 0.15s;
  flex-shrink: 0;
}
.pem-check-btn:hover { background: #E5E7EB; }
.pem-pw-toggle {
  height: 44px;
  width: 44px;
  border-radius: 12px;
  background: #F3F4F6;
  border: 1.5px solid #E5E7EB;
  font-size: 14px;
  color: #6B7280;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* 소셜 연동 */
.pem-social-section {
  padding: 16px 20px 4px;
}
.pem-social-title {
  font-size: 12px;
  font-weight: 700;
  color: #9CA3AF;
  margin-bottom: 10px;
  text-align: center;
  position: relative;
}
.pem-social-title::before, .pem-social-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: #E5E7EB;
}
.pem-social-title::before { left: 0; }
.pem-social-title::after  { right: 0; }
.pem-social-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pem-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
  border: 1.5px solid transparent;
}
.pem-google {
  background: #fff;
  border-color: #E5E7EB;
  color: #374151;
}
.pem-google:hover { background: #F9FAFB; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.pem-kakao {
  background: #FEE500;
  border-color: #FEE500;
  color: #3A1D1D;
}
.pem-kakao:hover { background: #F0D800; }
/* 푸터 */
.pem-footer {
  padding: 16px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pem-save-btn {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  transition: all 0.15s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.pem-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.pem-cancel-btn {
  width: 100%;
  height: 44px;
  border-radius: 14px;
  background: #F3F4F6;
  border: none;
  color: #6B7280;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s;
}
.pem-cancel-btn:hover { background: #E5E7EB; }

/* ===================================================
   광고 시청 모달 (adw)
   =================================================== */
.adw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 11000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.adw-sheet {
  background: #fff;
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  animation: slideUp .3s ease;
  -webkit-overflow-scrolling: touch;
}
.adw-handle {
  width: 40px; height: 4px;
  background: #E5E7EB;
  border-radius: 2px;
  margin: 12px auto 0;
}
.adw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  border-bottom: 1px solid #F0F0F0;
}
.adw-close-btn {
  width: 34px; height: 34px;
  border: none; background: #F3F4F6;
  border-radius: 10px; font-size: 14px;
  color: #6B7280; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.adw-title {
  font-size: 16px; font-weight: 800; color: #1A1A1A; margin: 0;
}
.adw-points-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 16px 8px;
  background: linear-gradient(135deg, #1A1A1A 0%, #374151 100%);
  border-radius: 16px;
  padding: 16px 18px;
}
.adw-points-icon { font-size: 28px; }
.adw-points-info { flex: 1; }
.adw-points-label { font-size: 11px; color: rgba(255,255,255,0.6); margin-bottom: 2px; }
.adw-points-value {
  font-size: 32px; font-weight: 900;
  color: #A78BFA; line-height: 1;
}
.adw-points-badge {
  font-size: 13px; font-weight: 800;
  color: rgba(255,255,255,0.5);
  align-self: flex-end; padding-bottom: 4px;
}
.adw-info-box {
  margin: 0 16px 12px;
  background: #F9FAFB;
  border-radius: 14px;
  overflow: hidden;
}
.adw-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #F0F0F0;
}
.adw-info-row:last-child { border-bottom: none; }
.adw-info-icon { font-size: 22px; flex-shrink: 0; }
.adw-info-title { font-size: 13px; font-weight: 700; color: #1A1A1A; }
.adw-info-desc { font-size: 11px; color: #6B7280; margin-top: 2px; }
.adw-info-badge {
  margin-left: auto; flex-shrink: 0;
  background: #10B981; color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 10px;
}
.adw-badge-gray { background: #6B7280; }
.adw-video-area {
  margin: 0 16px 12px;
  background: #111;
  border-radius: 16px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.adw-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px;
}
.adw-video-icon { font-size: 40px; }
.adw-video-text { font-size: 15px; font-weight: 700; color: #fff; }
.adw-video-sub { font-size: 11px; color: rgba(255,255,255,0.5); text-align: center; }
.adw-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
}
.adw-cd-circle {
  position: relative; width: 72px; height: 72px;
}
.adw-cd-svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.adw-cd-bg {
  fill: none; stroke: rgba(255,255,255,0.1);
  stroke-width: 3; stroke-linecap: round;
}
.adw-cd-fill {
  fill: none; stroke: #A78BFA;
  stroke-width: 3; stroke-linecap: round;
  transition: stroke-dasharray 1s linear;
}
.adw-cd-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #A78BFA;
}
.adw-cd-label { font-size: 12px; color: rgba(255,255,255,0.6); }
.adw-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px; padding: 24px;
}
.adw-complete-icon { font-size: 40px; animation: bounceIn .5s ease; }
.adw-complete-title { font-size: 20px; font-weight: 900; color: #A78BFA; }
.adw-complete-sub { font-size: 13px; color: rgba(255,255,255,0.7); }
@keyframes bounceIn {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.adw-footer {
  padding: 4px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adw-watch-btn {
  width: 100%; height: 52px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none; border-radius: 14px;
  font-size: 15px; font-weight: 800;
  color: #FFFFFF; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-family: var(--font);
  box-shadow: 0 4px 14px rgba(124,58,237,0.4);
  transition: all .15s;
}
.adw-watch-btn:disabled {
  background: #E5E7EB; color: #9CA3AF;
  box-shadow: none; cursor: not-allowed;
}
.adw-limit-info {
  font-size: 12px; color: #EF4444;
  text-align: center; padding: 4px 0;
}

/* ===================================================
   그룹통화 상세 패널 (gdp)
   =================================================== */
.gdp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gdp-sheet {
  background: #fff;
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp .3s ease;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}
.gdp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #F0F0F0;
  position: sticky; top: 0;
  background: #fff; z-index: 2;
}
.gdp-back-btn {
  width: 36px; height: 36px;
  border: none; background: #F3F4F6;
  border-radius: 10px; font-size: 14px;
  color: #374151; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gdp-header-info {
  flex: 1; display: flex; align-items: center; gap: 10px;
}
.gdp-avatar-stack { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.gdp-av1 {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: #D1FAE5;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; position: absolute; top: 0; left: 0;
}
.gdp-av2 {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: #FEF3C7;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; position: absolute; bottom: 0; right: 0;
  border: 2px solid #fff;
}
.gdp-name { font-size: 16px; font-weight: 800; color: #1A1A1A; }
.gdp-member-count { font-size: 12px; color: #6B7280; margin-top: 1px; }
.gdp-call-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none; font-size: 18px;
  color: #FFFFFF; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gdp-section-title {
  font-size: 12px; font-weight: 700;
  color: #9CA3AF; padding: 12px 16px 4px;
  letter-spacing: 0.3px;
}
.gdp-member-list { list-style: none; margin: 0; padding: 0; }
.gdp-member-item {
  display: flex; align-items: center;
  gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid #F9FAFB;
}
.gdp-mem-avatar {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.gdp-mem-name { font-size: 14px; font-weight: 600; color: #1A1A1A; }
.gdp-mem-role { font-size: 11px; color: #6B7280; margin-top: 1px; }
.gdp-mem-call {
  margin-left: auto;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #F3F4F6; border: none;
  color: #374151; font-size: 14px;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.gdp-mem-call:hover { background: #E5E7EB; }
.gdp-share-row {
  display: flex; align-items: center;
  gap: 8px; margin: 0 16px 4px;
  background: #F9FAFB; border-radius: 12px;
  padding: 10px 12px;
}
.gdp-share-link {
  flex: 1; font-size: 12px; color: #6B7280;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gdp-copy-btn {
  flex-shrink: 0;
  padding: 6px 12px; border-radius: 8px;
  background: linear-gradient(135deg, #7C3AED, #9333EA); border: none;
  color: #FFFFFF; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; gap: 4px;
}
.gdp-call-section {
  margin: 12px 16px 0;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.gdp-big-call-btn {
  width: 100%; height: 54px;
  background: linear-gradient(135deg, #6D28D9 0%, #9333EA 100%);
  border: none; border-radius: 16px;
  color: #FFFFFF; font-size: 15px; font-weight: 800;
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
  gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: all .15s;
}
.gdp-big-call-btn:active { transform: scale(0.98); }
.gdp-big-call-btn i { font-size: 18px; }
.gdp-call-desc {
  font-size: 11px; color: #9CA3AF; text-align: center;
}
.gdp-history-list { list-style: none; margin: 0; padding: 0; }
.gdp-hist-item {
  display: flex; align-items: center;
  gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid #F9FAFB;
}
.gdp-hist-icon {
  width: 36px; height: 36px;
  border-radius: 10px; background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.gdp-hist-info { flex: 1; }
.gdp-hist-title { font-size: 13px; font-weight: 600; color: #1A1A1A; }
.gdp-hist-meta { font-size: 11px; color: #9CA3AF; margin-top: 1px; }
.gdp-hist-dur {
  font-size: 11px; font-weight: 700;
  color: #6B7280; flex-shrink: 0;
}

/* =============================================
   영상통화 촬영·체크 프로세스 모달 (vsm)
   ============================================= */
.vsm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.vsm-sheet {
  background: #fff;
  border-radius: 22px 22px 0 0;
  width: 100%; max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUp .3s ease;
  padding-bottom: 20px;
}
.vsm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 8px;
  border-bottom: 1px solid #F0F0F0;
  position: sticky; top: 0;
  background: #fff; z-index: 2;
}
.vsm-close-btn {
  width: 36px; height: 36px;
  border: none; background: #F3F4F6;
  border-radius: 10px; font-size: 14px;
  color: #374151; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vsm-title { font-size: 16px; font-weight: 800; color: #1A1A1A; }
/* 스텝 표시 */
.vsm-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 12px 24px 8px;
}
.vsm-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.vsm-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #E5E7EB; color: #9CA3AF;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
}
.vsm-step span { font-size: 10px; color: #9CA3AF; font-weight: 600; }
.vsm-step.active .vsm-step-num { background: #7C3AED; color: #FFFFFF; }
.vsm-step.active span { color: #1A1A1A; }
.vsm-step.done .vsm-step-num { background: #10B981; color: #fff; }
.vsm-step.done span { color: #10B981; }
.vsm-step-line { width: 36px; height: 2px; background: #E5E7EB; margin: 0 4px; margin-bottom: 14px; }
/* 패널 */
.vsm-panel { display: none; padding: 0 16px 12px; }
.vsm-panel.active { display: block; }
/* 카메라 영역 */
.vsm-cam-area {
  position: relative; width: 100%; height: 240px;
  background: #1A1A1A; border-radius: 16px;
  overflow: hidden; margin-bottom: 12px;
}
.vsm-cam-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.vsm-cam-frame {
  width: 180px; height: 140px;
  border: 2px solid rgba(250,225,0,0.7);
  border-radius: 12px;
}
.vsm-cam-no-access {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #1A1A1A;
}
/* 카메라 컨트롤 */
.vsm-cam-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; margin-bottom: 12px;
}
.vsm-cam-btn {
  width: 48px; height: 48px;
  border-radius: 50%; border: 2px solid #E5E7EB;
  background: #F9FAFB; color: #374151;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.vsm-cam-btn:active { background: #E5E7EB; transform: scale(0.95); }
.vsm-shutter-btn {
  width: 64px; height: 64px;
  border-radius: 50%; border: 4px solid #1A1A1A;
  background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s;
}
.vsm-shutter-btn:active { transform: scale(0.92); }
.vsm-shutter-inner {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #1A1A1A;
  transition: background .1s;
}
.vsm-shutter-btn:active .vsm-shutter-inner { background: #374151; }
/* 스냅 스트립 */
.vsm-snap-strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 0 8px; min-height: 0;
  scrollbar-width: none;
}
.vsm-snap-strip::-webkit-scrollbar { display: none; }
.vsm-snap-thumb {
  width: 60px; height: 60px;
  border-radius: 10px; flex-shrink: 0;
  background: #F3F4F6; overflow: hidden;
  border: 2px solid #E5E7EB;
  position: relative; cursor: pointer;
  transition: border-color .15s;
}
.vsm-snap-thumb:hover { border-color: #7C3AED; }
.vsm-snap-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vsm-snap-del {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  background: rgba(0,0,0,0.6); color: #fff;
  border-radius: 50%; border: none;
  font-size: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* 다음 버튼 */
.vsm-next-btn {
  width: 100%; height: 48px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none; border-radius: 14px;
  color: #FFFFFF; font-size: 14px; font-weight: 800;
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 4px;
  transition: opacity .15s;
}
.vsm-next-btn:active { opacity: .8; }
/* 검토 그리드 */
.vsm-review-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 10px;
}
.vsm-review-thumb {
  aspect-ratio: 1; border-radius: 12px;
  background: #F3F4F6; overflow: hidden;
  border: 2px solid #E5E7EB; position: relative;
}
.vsm-review-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vsm-review-thumb .vsm-rv-label {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 9px; padding: 2px 6px; border-radius: 6px;
}
.vsm-review-info {
  background: #F0FDF4; border-radius: 12px;
  padding: 10px 14px; font-size: 12px; color: #065f46;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.vsm-review-actions {
  display: flex; gap: 10px;
}
.vsm-btn-back {
  flex: 1; height: 48px;
  background: #F3F4F6; border: none;
  border-radius: 14px; color: #374151;
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.vsm-btn-next-call {
  flex: 2; height: 48px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none; border-radius: 14px;
  color: #FFFFFF; font-size: 14px; font-weight: 800;
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* 연결 중 화면 */
.vsm-connecting {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 0 8px; text-align: center;
}
.vsm-conn-icon { font-size: 56px; margin-bottom: 10px; }
.vsm-conn-title { font-size: 18px; font-weight: 800; color: #1A1A1A; margin-bottom: 4px; }
.vsm-conn-sub { font-size: 13px; color: #6B7280; margin-bottom: 14px; }
.vsm-conn-imgs {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 16px; max-width: 220px;
}
.vsm-conn-img-thumb {
  width: 52px; height: 52px;
  border-radius: 10px; background: #F3F4F6;
  overflow: hidden; border: 2px solid #E5E7EB;
}
.vsm-conn-img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vsm-btn-connect {
  width: 100%; max-width: 260px; height: 52px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none; border-radius: 16px;
  color: #FFFFFF; font-size: 15px; font-weight: 800;
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}
.vsm-btn-connect:active { transform: scale(0.97); }

/* =============================================
   동의 드롭다운 (리포트 화면)
   ============================================= */
.agree-dropdown-wrap {
  position: relative;
  flex-shrink: 0;
}
.agree-btn-drop {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 12px;
  font-size: 13px; font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  background: #7C3AED; color: #FFFFFF; border: none;
}
.agree-btn-drop.agreed  { background: #10B981; color: #fff; }
.agree-btn-drop.partial { background: #F59E0B; color: #fff; }
.agree-btn-drop.disagreed { background: #EF4444; color: #fff; }
.agree-dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  border: 1px solid #E5E7EB;
  min-width: 130px; z-index: 500;
  display: none; flex-direction: column;
  overflow: hidden;
}
.agree-dropdown-menu.open { display: flex; }
.ag-drop-item {
  padding: 11px 14px;
  font-size: 13px; font-weight: 600;
  border: none; background: #fff;
  cursor: pointer; text-align: left;
  font-family: var(--font);
  transition: background .1s;
}
.ag-drop-item:hover { background: #F9FAFB; }
.ag-drop-item + .ag-drop-item { border-top: 1px solid #F3F4F6; }
.ag-full    { color: #065f46; }
.ag-partial { color: #92400e; }
.ag-no      { color: #991b1b; }

/* 협의목록 저장 버튼 행 */
.report-save-row {
  display: flex; gap: 10px; margin-top: 16px;
}
.report-preview-full-btn {
  flex: 1; height: 48px;
  background: #F3F4F6; border: none;
  border-radius: 14px; color: #374151;
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s;
}
.report-preview-full-btn:active { background: #E5E7EB; }
.report-save-consult-btn {
  flex: 2; height: 48px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  border: none; border-radius: 14px;
  color: #FFFFFF; font-size: 14px; font-weight: 800;
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: opacity .15s;
}
.report-save-consult-btn:active { opacity: .8; }
.report-save-consult-btn:disabled {
  background: #9CA3AF; cursor: default;
  box-shadow: none;
}

/* 저장 완료 배너 */
.report-saved-banner {
  display: flex; align-items: center; gap: 12px;
  background: #D1FAE5; border-radius: 14px;
  padding: 12px 14px; margin-top: 12px;
  border: 1.5px solid #6EE7B7;
}
.report-saved-banner span { font-size: 24px; }
.rsb-title { font-size: 13px; font-weight: 800; color: #065f46; }
.rsb-sub   { font-size: 11px; color: #047857; margin-top: 2px; word-break: keep-all; }
.rsb-go-btn {
  margin-left: auto; min-width: 34px; height: 34px;
  border-radius: 20px; border: none;
  background: #065f46; color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s; padding: 0 12px;
  gap: 5px; font-family: var(--font);
}
.rsb-go-btn:active { background: #047857; }

/* 협의목록 NEW 배지 */
.agree-item-new {
  border-left: 3px solid #7C3AED !important;
  background: #F5F3FF !important;
  position: relative;
}
.agree-new-badge {
  position: absolute; top: 8px; left: 8px;
  background: #7C3AED; color: #FFFFFF;
  font-size: 9px; font-weight: 900;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.5px;
}

/* 미리보기 모달 내 동의 선택 버튼 */
.rp-agree-select-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #E5E7EB;
  background: #fff; color: #6B7280;
  font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  transition: all .15s;
}
.rp-agree-select-btn.active[data-agree="agreed"]    { background: #D1FAE5; border-color: #10B981; color: #065f46; }
.rp-agree-select-btn.active[data-agree="partial"]   { background: #FEF3C7; border-color: #F59E0B; color: #92400e; }
.rp-agree-select-btn.active[data-agree="disagreed"] { background: #FEE2E2; border-color: #EF4444; color: #991b1b; }

/* ── 스냅/이미지박스 카드 체크 인터랙션 ─────── */
#rp-photos-grid > div:hover,
#rp-imgbox-grid > div:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(91, 33, 182, 0.25);
}
#rp-photos-grid > div,
#rp-imgbox-grid > div {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  user-select: none;
}

/* 협의자료 선택된 카드 글로우 */
#rp-photos-grid > div[style*="7C3AED"],
#rp-imgbox-grid > div[style*="7C3AED"] {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22);
}

/* 협의목록 저장 항목의 협의자료 뱃지 */
.agree-item-new .cri-info span[style*="7C3AED"] {
  animation: pulseChip .8s ease-in-out 2;
}
@keyframes pulseChip {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* =============================================
   영상통화 탭 — 연락처 검색 & 음성입력 개선
   ============================================= */
.call-tab-search {
  padding: 10px 14px 8px;
  gap: 8px;
}
.call-search-box {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F3F4F6;
  border-radius: var(--radius-md);
  padding: 8px 10px;
  border: 1.5px solid transparent;
  transition: border-color .2s, background .2s;
}
.call-search-box.focused {
  border-color: #7C3AED;
  background: #fff;
}
.call-search-box.voice-active {
  border-color: #EF4444;
  background: #FFF5F5;
  animation: searchPulse 1.5s infinite;
}
@keyframes searchPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.15); }
}
.vcall-search-icon { font-size: 13px; color: #9CA3AF; flex-shrink: 0; }
.call-search-box input { flex: 1; min-width: 0; }
.vcall-voice-btn {
  width: 28px; height: 28px;
  border-radius: 50%; border: none;
  background: linear-gradient(135deg,#7C3AED,#9333EA);
  color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform .15s;
}
.vcall-voice-btn:active { transform: scale(0.9); }
.vcall-voice-btn.listening {
  background: linear-gradient(135deg,#EF4444,#DC2626);
  animation: micBlink 1s infinite;
}
@keyframes micBlink {
  0%,100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.vcall-clear-btn {
  width: 22px; height: 22px;
  border-radius: 50%; border: none;
  background: #9CA3AF; color: #fff;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.vcall-contacts-btn { /* alias of call-dial-btn */ }

/* 음성 검색 배너 */
.vcall-voice-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: linear-gradient(90deg,#FFF5F5,#FEF2F2);
  border-bottom: 1px solid #FECACA;
  font-size: 13px; font-weight: 600; color: #EF4444;
}
.vcall-voice-banner i { font-size: 16px; animation: micBlink 1s infinite; }
.vcall-voice-banner span { flex: 1; }
.vcall-voice-stop-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: #EF4444; color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* 검색 결과 드롭다운 */
.vcall-search-results {
  background: #fff;
  border-bottom: 1px solid #F3F4F6;
  max-height: 260px; overflow-y: auto;
}
.vcall-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid #F9FAFB;
}
.vcall-result-item:hover, .vcall-result-item:active { background: #F5F3FF; }
.vcall-result-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg,#7C3AED,#9333EA);
  color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vcall-result-info { flex: 1; min-width: 0; }
.vcall-result-name { font-size: 14px; font-weight: 700; color: #1A1A1A; }
.vcall-result-num  { font-size: 12px; color: #6B7280; }
.vcall-result-call-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: linear-gradient(135deg,#7C3AED,#9333EA);
  color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.vcall-no-result {
  padding: 18px; text-align: center;
  font-size: 13px; color: #9CA3AF;
}

/* 최근 통화 섹션 레이블 */
.call-section-label {
  display: flex; align-items: center; gap: 6px;
}
.vcall-log-refresh-btn {
  border: none; background: none; cursor: pointer;
  font-size: 11px; color: #A78BFA; padding: 2px 4px;
  transition: transform .3s;
}
.vcall-log-refresh-btn:active { transform: rotate(180deg); }

/* ── 최근 통화기록 카테고리 탭 섹션 ── */
.vcall-log-section {
  display: flex; flex-direction: column;
  margin-top: 6px;
  flex: 1; min-height: 0;
}
.vcall-log-tab-bar {
  display: flex; align-items: center;
  padding: 0 12px;
  border-bottom: 2px solid #F3F4F6;
  gap: 0;
  background: #fff;
  position: sticky; top: 0; z-index: 10;
}
.vcall-log-tab {
  flex: 1; padding: 10px 4px 9px;
  font-size: 12px; font-weight: 600; color: #9CA3AF;
  border: none; background: transparent; cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: color .15s, border-color .15s;
  font-family: var(--font);
  white-space: nowrap;
}
.vcall-log-tab i { font-size: 11px; }
.vcall-log-tab.active {
  color: #7C3AED;
  border-bottom-color: #7C3AED;
  font-weight: 800;
}
.vcall-log-tab:hover { color: #7C3AED; }
.vcall-log-refresh-tab {
  width: 32px; height: 32px;
  border: none; background: none; cursor: pointer;
  color: #A78BFA; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
  transition: transform .4s, background .15s;
}
.vcall-log-refresh-tab:hover { background: #F5F3FF; }
.vcall-log-refresh-tab:active { transform: rotate(360deg); }
.vcall-log-list {
  flex: 1; overflow-y: auto;
}

/* 최근 통화 항목 (기존 스타일 보강) */
.vcall-log-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid #F9FAFB;
  cursor: pointer; transition: background .1s;
}
.vcall-log-item:hover { background: #F5F3FF; }
.vcall-log-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg,#7C3AED,#9333EA);
  color: #fff; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vcall-log-info { flex: 1; min-width: 0; }
.vcall-log-name { font-size: 14px; font-weight: 700; color: #1A1A1A; }
.vcall-log-meta { font-size: 11px; color: #6B7280; margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.vcall-log-missed { color: #EF4444; }
.vcall-log-video  { color: #7C3AED; }
.vcall-log-actions { display: flex; gap: 6px; flex-shrink: 0; }
.vcall-log-call-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: linear-gradient(135deg,#7C3AED,#9333EA);
  color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.vcall-log-empty {
  padding: 40px 16px; text-align: center;
  font-size: 13px; color: #9CA3AF;
}

/* =============================================
   폴더 선택 모달 (카메라/갤러리/파일 저장용)
   ============================================= */
.vopt-folder-modal {
  position: fixed; inset: 0; z-index: 9900;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end;
  justify-content: center;
}
.vopt-folder-sheet {
  width: 100%; max-height: 80vh;
  background: #fff; border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: slideUpSheet .25s ease;
}
@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.vopt-folder-header {
  display: flex; align-items: center;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #F3F4F6;
  gap: 8px;
}
.vopt-folder-title {
  flex: 1; font-size: 16px; font-weight: 800; color: #1A1A1A;
}
.vopt-folder-close {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: #F3F4F6; color: #374151; font-size: 13px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.vopt-folder-list {
  flex: 1; overflow-y: auto; padding: 8px 12px;
}
.vopt-folder-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px; border-radius: 12px;
  cursor: pointer; transition: background .12s;
  border: 1.5px solid transparent;
}
.vopt-folder-item:hover, .vopt-folder-item.selected {
  background: #F5F3FF; border-color: #A78BFA;
}
.vopt-folder-emoji { font-size: 22px; flex-shrink: 0; }
.vopt-folder-name { flex: 1; font-size: 14px; font-weight: 700; color: #1A1A1A; }
.vopt-folder-count { font-size: 11px; color: #9CA3AF; }
.vopt-folder-check { color: #7C3AED; font-size: 16px; display: none; }
.vopt-folder-item.selected .vopt-folder-check { display: block; }
.vopt-folder-new-wrap {
  padding: 12px;
  border-top: 1px solid #F3F4F6;
}
.vopt-folder-new-btn {
  width: 100%; padding: 12px;
  border: 2px dashed #A78BFA; border-radius: 12px;
  background: #F5F3FF; color: #7C3AED;
  font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font);
}
.vopt-new-folder-form {
  padding: 12px; border-top: 1px solid #F3F4F6;
  display: flex; flex-direction: column; gap: 10px;
}
.vopt-new-folder-input {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid #A78BFA; border-radius: 10px;
  font-size: 14px; font-family: var(--font); outline: none;
  box-sizing: border-box;
}
.vopt-emoji-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.vopt-emoji-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 2px solid #E5E7EB; background: #F9FAFB;
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.vopt-emoji-btn.selected {
  border-color: #7C3AED; background: #EDE9FE;
}
.vopt-new-folder-btns {
  display: flex; gap: 8px;
}
.vopt-cancel-btn {
  flex: 1; padding: 10px; border-radius: 10px;
  border: 1.5px solid #E5E7EB; background: #F9FAFB;
  font-size: 13px; font-weight: 700; color: #6B7280;
  cursor: pointer; font-family: var(--font);
}
.vopt-confirm-btn {
  flex: 2; padding: 10px; border-radius: 10px;
  border: none; background: linear-gradient(135deg,#7C3AED,#9333EA);
  font-size: 13px; font-weight: 700; color: #fff;
  cursor: pointer; font-family: var(--font);
}
.vopt-saving-overlay {
  position: absolute; inset: 0; background: rgba(255,255,255,0.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; border-radius: 20px 20px 0 0;
}
.vopt-saving-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid #E5E7EB; border-top-color: #7C3AED;
  animation: spinR .7s linear infinite;
}
@keyframes spinR { to { transform: rotate(360deg); } }

/* =============================================
   카메라 미리보기 모달 스타일
   ============================================= */
.cam-preview-modal {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: flex-end; justify-content: center;
}
.cam-preview-sheet {
  width: 100%; max-width: 480px;
  background: #1F2937; border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden; animation: slideUpSheet .25s ease;
}
.cam-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cam-preview-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cam-preview-title {
  font-size: 15px; font-weight: 800; color: #fff;
}
.cam-preview-imgwrap {
  background: #000; display: flex; align-items: center; justify-content: center;
  min-height: 220px; max-height: 55vh;
}
.cam-preview-img {
  max-width: 100%; max-height: 55vh; object-fit: contain;
}
.cam-preview-actions {
  display: flex; gap: 10px; padding: 14px 16px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.cam-preview-retake-btn {
  flex: 1; height: 48px; border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: transparent; color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font);
}
.cam-preview-confirm-btn {
  flex: 2; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg,#7C3AED,#9333EA);
  border: none; color: #fff;
  font-size: 14px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); box-shadow: 0 4px 16px rgba(124,58,237,0.35);
}

/* =============================================
   이미지박스 마킹 화면 v3 — 모바일 네비게이션 바 완전 대응
   ============================================= */
.ibmark-screen-wrap {
  flex-direction: column !important;
  background: #0F172A !important;
  padding-bottom: 0 !important;
  /* 전체 화면 고정 — 브라우저/OS 네비게이션 바 포함 */
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  overflow: hidden;
}

/* ① 헤더 */
.ibmark-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  padding-top: max(10px, calc(env(safe-area-inset-top, 8px) + 6px));
  background: #1E293B;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.ibmark-back-btn {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: rgba(255,255,255,0.1); color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: background .15s;
}
.ibmark-back-btn:active { background: rgba(255,255,255,0.2); }
.ibmark-header-info { flex: 1; min-width: 0; }
.ibmark-title {
  font-size: 13px; font-weight: 800; color: #F1F5F9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ibmark-folder-name { font-size: 10px; color: #94A3B8; margin-top: 0px; }
.ibmark-cur-color {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  flex-shrink: 0; cursor: pointer; transition: transform .15s;
}

/* ② 도구 바 — 컴팩트 */
.ibmark-toolbar {
  display: flex; align-items: center; gap: 0px;
  padding: 2px 4px; background: #1E293B;
  overflow-x: auto; flex-shrink: 0;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 38px;
}
.ibmark-toolbar::-webkit-scrollbar { display: none; }
.ibmark-tool-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0px;
  padding: 3px 5px; border-radius: 7px; border: none;
  background: transparent; color: rgba(255,255,255,0.45);
  font-size: 13px; cursor: pointer; flex-shrink: 0;
  font-family: var(--font); transition: all .13s;
  min-width: 36px;
}
.ibmark-tool-btn span { font-size: 7px; white-space: nowrap; font-weight: 600; }
.ibmark-tool-btn.active {
  background: rgba(249,115,22,0.18); color: #FB923C;
  box-shadow: inset 0 0 0 1.5px rgba(249,115,22,0.4);
}
.ibmark-tool-btn:hover:not(.active) { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); }
.ibmark-undo-btn { color: #60A5FA !important; }
.ibmark-undo-btn:hover { color: #60A5FA !important; background: rgba(96,165,250,0.15) !important; }
.ibmark-clear-btn { color: #F87171 !important; }
.ibmark-clear-btn:hover { background: rgba(248,113,113,0.15) !important; }
.ibmark-tool-sep {
  width: 1px; background: rgba(255,255,255,0.12);
  height: 28px; margin: 0 3px; flex-shrink: 0;
}

/* ③ 팔레트 */
.ibmark-palette {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; background: #0F172A; flex-shrink: 0;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  min-height: 30px;
}
.ibmark-palette::-webkit-scrollbar { display: none; }
.ibmark-color-dot {
  width: 18px; height: 18px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  flex-shrink: 0; transition: transform .13s, border-color .13s;
}
.ibmark-color-dot.selected {
  border-color: #fff; transform: scale(1.2);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}
.ibmark-palette-sep {
  width: 1px; height: 20px; background: rgba(255,255,255,0.12);
  flex-shrink: 0; margin: 0 2px;
}
.ibmark-width-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .13s;
}
.ibmark-width-btn.active { border-color: #FB923C; background: rgba(249,115,22,0.18); }
.ibmark-wdot { border-radius: 50%; background: #fff; display: block; }

/* ④ 캔버스 */
.ibmark-canvas-wrap {
  flex: 1; overflow: hidden; position: relative;
  min-height: 80px; background: #0F172A;
  touch-action: none;
}
#ibmark-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.ibmark-tool-hint {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.65);
  padding: 8px 18px; border-radius: 20px;
  font-size: 12px; pointer-events: none;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: opacity .4s;
}
.ibmark-tool-hint.hidden { opacity: 0; }

/* ⑤ 설명 입력 — 컴팩트 1줄 */
.ibmark-desc-area {
  background: #1E293B; padding: 3px 8px;
  border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}
.ibmark-desc-row { display: flex; gap: 6px; align-items: center; }
.ibmark-desc-input {
  flex: 1; padding: 4px 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; color: #F1F5F9;
  font-size: 12px; font-family: var(--font);
  resize: none; outline: none; line-height: 1.3;
  height: 28px; overflow: hidden; box-sizing: border-box;
}
.ibmark-desc-input::placeholder { color: rgba(255,255,255,0.3); }
.ibmark-desc-input:focus { border-color: rgba(249,115,22,0.5); }
.ibmark-voice-desc-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(249,115,22,0.2); color: #FB923C;
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); flex-shrink: 0; transition: all .15s;
}
.ibmark-voice-label { display: none; }
.ibmark-voice-desc-btn.listening {
  background: rgba(239,68,68,0.25); color: #EF4444;
  animation: micBlink 0.8s infinite;
}

/* ⑥ 하단 액션 버튼 바 — 네비게이션 겹침 완전 해결 */
.ibmark-action-bar {
  display: flex; gap: 6px;
  padding: 6px 10px;
  /* 모바일 OS 홈바/네비게이션 바 safe-area 완벽 대응 */
  padding-bottom: max(10px, calc(env(safe-area-inset-bottom, 8px) + 6px));
  background: #1E293B;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  /* 항상 하단에 위치 — 네비 바 위에 표시 */
  position: relative;
  z-index: 10;
}
.ibmark-btn-cancel {
  flex: 1; height: 40px; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: #94A3B8;
  font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font); transition: all .15s;
}
.ibmark-btn-cancel:active { background: rgba(255,255,255,0.12); }
.ibmark-btn-save {
  flex: 2; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #F97316, #EA580C);
  border: none; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font); box-shadow: 0 3px 12px rgba(249,115,22,0.35);
  transition: opacity .15s;
}
.ibmark-btn-save:active { opacity: .85; }
.ibmark-btn-done {
  flex: 1; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #10B981, #059669);
  border: none; color: #fff; font-size: 12px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font); transition: opacity .15s;
}
.ibmark-btn-done:active { opacity: .85; }

/* ⑦ 토스트 */
.ibmark-toast {
  position: fixed;
  bottom: calc(130px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  background: #065F46; color: #fff;
  padding: 10px 20px; border-radius: 24px;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: toastIn .25s ease; z-index: 10050;
  max-width: 88vw; text-overflow: ellipsis; overflow: hidden;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ⑧ 텍스트 모달 */
.ibmark-text-modal {
  position: fixed; inset: 0; z-index: 10100;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ibmark-text-sheet {
  width: 100%; max-width: 340px; background: #1E293B; border-radius: 18px;
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.ibmark-text-title { font-size: 16px; font-weight: 800; color: #F1F5F9; }
.ibmark-text-input {
  width: 100%; padding: 11px 12px; box-sizing: border-box;
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 10px; color: #fff; font-size: 14px;
  font-family: var(--font); outline: none;
}
.ibmark-text-input:focus { border-color: #F97316; }
.ibmark-text-btns { display: flex; gap: 8px; }
.ibmark-text-cancel {
  flex: 1; padding: 11px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12); background: transparent;
  color: #94A3B8; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font);
}
.ibmark-text-confirm {
  flex: 2; padding: 11px; border-radius: 10px;
  border: none; background: linear-gradient(135deg,#F97316,#EA580C);
  color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; font-family: var(--font);
}

/* ⑨ 음성 오버레이 */
.ibmark-voice-overlay {
  position: fixed; inset: 0; z-index: 10200;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
}
.ibmark-voice-card {
  background: #1E293B; border-radius: 20px;
  padding: 32px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 240px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.ibmark-voice-anim {
  position: relative; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.ibmark-voice-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(249,115,22,0.4);
  animation: voiceRing 1.2s ease-in-out infinite;
}
@keyframes voiceRing {
  0%,100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.2); opacity: 0.3; }
}
.ibmark-voice-icon { font-size: 28px; color: #FB923C; animation: micBlink 0.8s ease-in-out infinite; }
.ibmark-voice-text { font-size: 14px; color: #CBD5E1; font-weight: 600; min-height: 20px; }
.ibmark-voice-stop-btn {
  padding: 10px 24px; border-radius: 20px;
  border: none; background: rgba(239,68,68,0.25); color: #EF4444;
  font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px; font-family: var(--font);
}

/* ── 텍스트 모달 음성입력 버튼 (추가) ── */
.ibmark-text-input-row {
  display: flex; align-items: center; gap: 8px;
}
.ibmark-text-input-row .ibmark-text-input {
  flex: 1;
}
.ibmark-text-voice-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: none;
  background: rgba(249,115,22,0.18); color: #FB923C;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s;
}
.ibmark-text-voice-btn.listening {
  background: rgba(239,68,68,0.25); color: #EF4444;
  animation: micBlink 0.8s infinite;
}
.ibmark-text-hint {
  font-size: 11px; color: #64748B; text-align: center; padding: 4px 0;
}
.ibmark-text-confirm {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ── 통화기록 탭 부재중 태그 수정 ── */
.vcall-log-missed-tag {
  color: #EF4444; font-size: 11px;
  display: inline-flex; align-items: center; gap: 3px;
}
.vcall-log-voice {
  color: #10B981;
}

/* ── cam-preview-modal z-index 강화 ── */
.cam-preview-modal {
  z-index: 10000 !important;
}

/* ── vopt-folder-modal z-index 강화 ── */
.vopt-folder-modal {
  z-index: 9900 !important;
}

/* ── ibmark-screen 완전 오버레이 ── */
#ibmark-screen.screen.ibmark-screen-wrap {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  display: none;
}
#ibmark-screen.screen.ibmark-screen-wrap.active {
  display: flex !important;
}

/* =============================================
   ★ 홈 캘린더 하단 고정형 광고 배너
   ============================================= */
.cal-ad-banner {
  /* home-screen flex column 레이아웃에서 cal-agenda 아래 고정 */
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #E5E7EB;
  padding: 8px 14px;
}
.cal-ad-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #EDE9FE 0%, #F5F3FF 100%);
  border: 1.5px solid #C4B5FD;
  border-radius: 14px;
  padding: 10px 12px;
  position: relative;
}
.cal-ad-badge {
  background: #7C3AED;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.cal-ad-content {
  flex: 1;
  min-width: 0;
}
.cal-ad-title {
  font-size: 13px;
  font-weight: 800;
  color: #4C1D95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ad-desc {
  font-size: 11px;
  color: #6D28D9;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ad-cta {
  background: #7C3AED;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--font);
  transition: background .15s;
  white-space: nowrap;
}
.cal-ad-cta:active { background: #5B21B6; }
.cal-ad-close {
  position: absolute;
  top: 5px; right: 6px;
  width: 20px; height: 20px;
  border: none;
  background: rgba(109,40,217,0.15);
  border-radius: 50%;
  color: #6D28D9;
  font-size: 9px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.cal-ad-close:active { background: rgba(109,40,217,0.35); }

/* =============================================
   ★ 채팅 헤더 — 리포트 아이콘 버튼
   ============================================= */
.cdp-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cdp-report-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 38px;
  border: none;
  background: rgba(255,255,255,0.18);
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
}
.cdp-report-icon-btn:active {
  background: rgba(255,255,255,0.32);
  transform: scale(0.95);
}
.cdp-report-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  line-height: 1;
  font-family: var(--font);
}

/* 그룹 채팅 헤더 액션 그룹 */
.gdp-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* 그룹 헤더(흰색 배경)에서 리포트 버튼 색상 오버라이드 */
.gdp-header .cdp-report-icon-btn {
  background: #F0EEFF;
  color: #7C3AED;
}
.gdp-header .cdp-report-icon-btn:active { background: #DDD6FE; }
.gdp-header .cdp-report-label { color: #7C3AED; }

/* =============================================
   ★ 채팅 리포트 선택 모달
   ============================================= */
.chat-report-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.chat-report-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  background: #fff;
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  animation: sheetUp .25s ease;
}
@keyframes sheetUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* 모달 헤더 */
.chat-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #F3F4F6;
  flex-shrink: 0;
}
.chat-report-header-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-report-title {
  font-size: 15px;
  font-weight: 800;
  color: #1A1A1A;
}
.chat-report-close-btn {
  width: 32px; height: 32px;
  border: none;
  background: #F3F4F6;
  border-radius: 50%;
  color: #6B7280;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.chat-report-close-btn:active { background: #E5E7EB; }

/* 안내 배너 */
.chat-report-info-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #F5F3FF;
  margin: 10px 14px 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 11px;
  color: #5B21B6;
  line-height: 1.5;
  flex-shrink: 0;
}

/* 리포트 목록 */
.chat-report-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.chat-report-list::-webkit-scrollbar { display: none; }

/* 리포트 항목 */
.chat-report-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #F3F4F6;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.chat-report-item:active {
  background: #F9FAFB;
  transform: scale(0.985);
}
.chat-report-item.cri-new {
  border-color: #C4B5FD;
  background: #F9F7FF;
}

/* NEW 배지 */
.cri-new-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: #7C3AED;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 5px;
  line-height: 1.2;
}

.cri-icon-box {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cri-body {
  flex: 1;
  min-width: 0;
}
.cri-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.cri-title-text {
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.cri-agree-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cri-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: #6B7280;
  flex-wrap: wrap;
}
.cri-note {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}
.cri-arrow {
  color: #D1D5DB;
  font-size: 12px;
  flex-shrink: 0;
}

/* 빈 상태 */
.chat-report-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
}
.chat-report-empty-icon { font-size: 44px; }
.chat-report-empty-title {
  font-size: 15px;
  font-weight: 800;
  color: #1A1A1A;
}
.chat-report-empty-desc {
  font-size: 12px;
  color: #9CA3AF;
  line-height: 1.6;
}
.chat-report-go-vcall {
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  margin-top: 6px;
  transition: opacity .15s;
}
.chat-report-go-vcall:active { opacity: .85; }

/* ── 마킹 화면 툴버튼 원/circle 색상 ── */
#ibmark-tool-circle.active {
  background: rgba(139,92,246,0.18); color: #A78BFA;
  box-shadow: inset 0 0 0 1.5px rgba(139,92,246,0.4);
}

/* =============================================
   ★ 그룹 생성 요금제 모달
   ============================================= */

/* 오버레이 */
.gcm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* 바텀시트 */
.gcm-sheet {
  width: 100%;
  max-width: 540px;
  height: 92vh;
  background: #fff;
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -12px 50px rgba(0,0,0,0.22);
  animation: gcmUp .3s cubic-bezier(.32,.72,0,1);
}
@keyframes gcmUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── 헤더 ── */
.gcm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  flex-shrink: 0;
}
.gcm-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gcm-header-icon {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.18);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
}
.gcm-header-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.gcm-header-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
}
.gcm-close-btn {
  width: 34px; height: 34px;
  border: none;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.gcm-close-btn:active { background: rgba(255,255,255,0.35); }

/* ── 스크롤 영역 ── */
.gcm-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #F8FAFC;
}
.gcm-scroll::-webkit-scrollbar { display: none; }

/* ── 섹션 공통 ── */
.gcm-section {
  background: #fff;
  margin: 10px 14px 0;
  border-radius: 16px;
  padding: 16px 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.gcm-summary-section { margin-bottom: 0; }
.gcm-section-title {
  font-size: 13px;
  font-weight: 800;
  color: #1A1A1A;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.gcm-section-title i { color: #7C3AED; font-size: 13px; }
.gcm-section-sub {
  font-size: 11px;
  color: #9CA3AF;
  margin-bottom: 12px;
}

/* ── 그룹명 입력 ── */
.gcm-name-input {
  width: 100%;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font);
  color: #1A1A1A;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
  margin-top: 6px;
}
.gcm-name-input:focus { border-color: #7C3AED; }
.gcm-name-input::placeholder { color: #C4C4C4; }

/* ── 인원 티어 그리드 ── */
.gcm-member-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.gcm-tier {
  border: 2px solid #E5E7EB;
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: all .18s;
  position: relative;
  background: #FAFAFA;
}
.gcm-tier:active { transform: scale(0.97); }
.gcm-tier.selected {
  border-color: #7C3AED;
  background: #F5F3FF;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.gcm-tier-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.gcm-tier-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.tier-basic      { background: #DBEAFE; color: #1D4ED8; }
.tier-standard   { background: #D1FAE5; color: #065F46; }
.tier-pro        { background: #FEF3C7; color: #92400E; }
.tier-enterprise { background: #FCE7F3; color: #9D174D; }

.gcm-tier-check {
  font-size: 16px;
  color: #D1D5DB;
  transition: color .15s;
}
.gcm-tier.selected .gcm-tier-check { color: #7C3AED; }
.gcm-tier-members { margin-bottom: 4px; }
.gcm-tier-num {
  font-size: 14px;
  font-weight: 800;
  color: #1A1A1A;
}
.gcm-tier-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 3px;
}
.gcm-price-amount {
  font-size: 18px;
  font-weight: 900;
  color: #7C3AED;
}
.gcm-price-unit {
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 600;
}
.gcm-tier-desc {
  font-size: 10px;
  color: #9CA3AF;
}
.gcm-tier-storage-hint {
  font-size: 9px;
  color: #A78BFA;
  font-weight: 700;
  margin-top: 4px;
  padding: 2px 6px;
  background: rgba(167,139,250,0.12);
  border-radius: 6px;
  display: inline-block;
}

/* 요금 안내 박스 */
.gcm-price-info-box {
  background: #F5F3FF;
  border-radius: 12px;
  border-left: 3px solid #7C3AED;
  padding: 10px 13px;
}
.gcm-pib-title {
  font-size: 11px;
  font-weight: 800;
  color: #5B21B6;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.gcm-pib-list {
  margin: 0; padding: 0 0 0 14px;
  list-style: disc;
}
.gcm-pib-list li {
  font-size: 11px;
  color: #6D28D9;
  line-height: 1.8;
}

/* ── 저장용량 목록 ── */
.gcm-storage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gcm-storage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
  background: #FAFAFA;
}
.gcm-storage-item:active { transform: scale(0.98); }
.gcm-storage-item.selected {
  border-color: #7C3AED;
  background: #F5F3FF;
}
.gcm-si-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.gcm-si-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.gcm-si-info { min-width: 0; }
.gcm-si-name {
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
}
.gcm-si-desc {
  font-size: 10px;
  color: #9CA3AF;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcm-si-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.gcm-si-price {
  font-size: 12px;
  font-weight: 700;
  color: #7C3AED;
  white-space: nowrap;
}
.gcm-si-radio {
  font-size: 16px;
  color: #D1D5DB;
  transition: color .15s;
  width: 20px; text-align: center;
}
.gcm-storage-item.selected .gcm-si-radio { color: #7C3AED; }

/* ── 이용 기간 그리드 ── */
.gcm-period-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gcm-period-item {
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  padding: 10px 6px;
  cursor: pointer;
  transition: all .18s;
  text-align: center;
  background: #FAFAFA;
}
.gcm-period-item:active { transform: scale(0.95); }
.gcm-period-item.selected {
  border-color: #7C3AED;
  background: #F5F3FF;
}
.gcm-pi-months {
  font-size: 13px;
  font-weight: 800;
  color: #1A1A1A;
  margin-bottom: 3px;
}
.gcm-period-item.selected .gcm-pi-months { color: #7C3AED; }
.gcm-pi-discount {
  font-size: 9px;
  font-weight: 700;
  color: #10B981;
  min-height: 13px;
}
.gcm-pi-label {
  font-size: 9px;
  color: #9CA3AF;
  margin-top: 2px;
}
.gcm-period-item.selected .gcm-pi-label { color: #7C3AED; font-weight: 700; }
.gcm-pi-storage {
  font-size: 8px;
  color: #C4B5FD;
  margin-top: 3px;
  font-weight: 600;
}
.gcm-period-item.selected .gcm-pi-storage { color: #8B5CF6; }

/* ── 요금 요약 카드 ── */
.gcm-summary-card {
  background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
  border-radius: 14px;
  border: 1.5px solid #C4B5FD;
  padding: 14px;
}
.gcm-summary-title {
  font-size: 13px;
  font-weight: 800;
  color: #4C1D95;
  margin-bottom: 12px;
}
.gcm-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gcm-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gcm-sr-label {
  font-size: 12px;
  color: #5B21B6;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.gcm-sr-label em {
  font-style: normal;
  font-size: 10px;
  color: #9CA3AF;
}
.gcm-sr-value {
  font-size: 12px;
  font-weight: 700;
  color: #4C1D95;
  white-space: nowrap;
}
.gcm-row-discount .gcm-sr-value { color: #10B981; }
.gcm-summary-divider {
  height: 1px;
  background: rgba(124,58,237,0.18);
  margin: 10px 0;
}
.gcm-summary-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gcm-summary-total-label {
  font-size: 13px;
  font-weight: 800;
  color: #3730A3;
}
.gcm-summary-total-price {
  font-size: 18px;
  font-weight: 900;
  color: #7C3AED;
}
.gcm-summary-period-total {
  font-size: 11px;
  color: #6D28D9;
  margin-top: 4px;
  text-align: right;
}

/* ── 하단 푸터 ── */
.gcm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #F3F4F6;
  flex-shrink: 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
}
.gcm-footer-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gcm-footer-price {
  font-size: 16px;
  font-weight: 900;
  color: #7C3AED;
}
.gcm-footer-period {
  font-size: 11px;
  color: #9CA3AF;
}
.gcm-confirm-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity .15s, transform .12s;
  box-shadow: 0 4px 16px rgba(124,58,237,0.4);
  white-space: nowrap;
}
.gcm-confirm-btn:active { opacity: .85; transform: scale(0.97); }
.gcm-confirm-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

/* ── 권장 배지 (저장용량 항목 내) ── */
.gcm-si-recommend {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #7C3AED, #5B21B6);
  border-radius: 20px;
  padding: 1px 7px;
  margin-top: 3px;
  letter-spacing: 0.2px;
}

/* ── 권장 항목 테두리 하이라이트 ── */
.gcm-storage-item.gcm-recommended {
  border-color: #A78BFA;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.10);
}
.gcm-period-item.gcm-recommended {
  border-color: #A78BFA;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.10);
}
/* 선택됨 + 권장: 더 강한 테두리 */
.gcm-storage-item.selected.gcm-recommended,
.gcm-period-item.selected.gcm-recommended {
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}