@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
}

.app-content {
  display: flex;
  flex: 1;
  margin-top: calc(var(--app-header-height, 60px) + env(safe-area-inset-top, 0));
  height: calc(100vh - var(--app-header-height, 60px) - env(safe-area-inset-top, 0));
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}

.app-content.app-content-embedded {
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  min-width: 0;
}
/* 임베드 페이지: 자식은 콘텐츠 높이만큼만 차지 → app-content(overflow:auto)가 스크롤 */
.app-content.app-content-embedded > * {
  min-width: 0;
  width: 100%;
}
.app-content.app-content-embedded .app-embedded-page {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
}

.summary-panel-wrapper,
.chat-panel-wrapper,
.sidebar-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  align-items: stretch; /* 헤더가 항상 같은 높이로 정렬되도록 */
}

/* 리사이저 조정 중이 아닐 때만 transition 적용 */
.summary-panel-wrapper:not(.resizing),
.chat-panel-wrapper:not(.resizing),
.sidebar-wrapper:not(.resizing) {
  transition: width 0.2s ease;
}

.summary-panel-wrapper {
  flex-shrink: 0;
  position: relative;
  background-color: var(--color-bg-tertiary);
}

/* 요약 패널 좌측 세로 툴바 */
.summary-panel-left-toolbar {
  flex-shrink: 0;
  width: 120px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-sm);
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  overflow: visible;
}

.chat-panel-wrapper {
  flex-shrink: 0;
  min-width: 0;
  position: relative;
  background-color: var(--color-bg-primary);
  display: flex;
  flex-direction: column;
}

.sidebar-wrapper {
  flex-shrink: 0;
  position: relative;
  background-color: var(--color-bg-primary);
  overflow: hidden;
  transition: width var(--transition-base);
}

/* 닫혀 있을 때: 오른쪽에 40px 열기 탭 항상 고정 표시 (flex 레이아웃과 무관하게 항상 보임) */
.sidebar-wrapper.sidebar-closed {
  position: fixed !important;
  top: calc(var(--app-header-height, 60px) + env(safe-area-inset-top, 0)) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: 1040;
  box-shadow: var(--shadow-lg);
  background-color: var(--color-bg-tertiary);
}

@media (max-width: 1024px) {
  .app-content .sidebar-wrapper.sidebar-closed {
    position: fixed !important;
    top: calc(var(--app-header-height, 60px) + env(safe-area-inset-top, 0)) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
}

@media (max-width: 768px) {
  .app-content .sidebar-wrapper.sidebar-closed {
    position: fixed !important;
    top: calc(var(--app-header-height, 60px) + env(safe-area-inset-top, 0)) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
}

/* 리사이저 (미니멀, hover 시 강조) */
.app-content > .resizer {
  background-color: var(--color-border-light) !important;
  z-index: 5 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 4px !important;
  min-width: 4px !important;
  transition: all var(--transition-base);
  position: relative;
}

.app-content > .resizer:hover {
  background-color: var(--color-primary) !important;
  width: 6px !important;
  opacity: 0.9;
}

.app-content > .resizer.resizing {
  background-color: var(--color-primary-dark) !important;
  width: 6px !important;
}

.app > * {
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}

/* 관리자 버튼과 사용자 프로필은 이제 헤더에 포함됨 */

.admin-panel-wrapper {
  margin-top: calc(var(--app-header-height, 60px) + env(safe-area-inset-top, 0));
  height: calc(100vh - var(--app-header-height, 60px) - env(safe-area-inset-top, 0));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-header-bar {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: var(--section-header-border);
  box-shadow: var(--section-header-shadow);
  flex-shrink: 0;
}

.back-to-main-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
}

.back-to-main-btn:hover {
  background-color: var(--color-bg-hover);
}

.loading-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-primary) 100%);
  color: white;
  gap: var(--spacing-lg);
}

.loading-screen .loading-spinner {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: white;
}

.loading-screen p {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

/* 음성 요약 선택 모달 */
.voice-summary-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.voice-summary-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.voice-summary-modal-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.voice-summary-modal-desc {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.voice-summary-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-summary-modal-btn {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.voice-summary-modal-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-dark);
}

.voice-summary-modal-btn.primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.voice-summary-modal-btn.primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.voice-summary-modal-btn.cancel {
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
}

/* ========== 모바일: WhatsApp 스타일 ========== */
/* 모바일에서 대화방 미선택 시: 사이드바 열림 = 리스트 전체, 사이드바 닫힘 = 상단 요약 패널 + 하단 대화 패널 */
@media (max-width: 768px) {
  /* 대화 미선택 + 사이드바 열림: 요약·채팅 패널 숨김, 리스트만 전체 표시 */
  .app-content.mobile-no-chat:not(.mobile-sidebar-closed) .summary-panel-wrapper {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden;
    flex: 0 0 0;
    border: none;
  }

  /* 대화 미선택 + 사이드바 열림: 채팅 패널 숨김, 리스트만 전체 표시 */
  .app-content.mobile-no-chat:not(.mobile-sidebar-closed) .chat-panel-wrapper {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden;
    flex: 0 0 0;
    border: none;
  }

  /* 대화 미선택 + 사이드바 닫힘: 상단 = 요약 패널, 하단 = 대화 패널 (세로 배치) */
  .app-content.mobile-no-chat.mobile-sidebar-closed {
    flex-direction: column;
  }
  .app-content.mobile-no-chat.mobile-sidebar-closed .summary-panel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex !important;
    flex-direction: column;
    border: none;
  }
  .app-content.mobile-no-chat.mobile-sidebar-closed .chat-panel-wrapper {
    flex: 1;
    min-width: 0;
    min-height: 0;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
  }

  .app-content.mobile-no-chat > .resizer,
  .app-content.mobile-no-chat .resizer-sidebar-wrap {
    display: none !important;
  }

  .app-content.mobile-no-chat:not(.mobile-sidebar-closed) .sidebar-wrapper {
    position: fixed;
    top: calc(var(--app-header-height, 60px) + env(safe-area-inset-top, 0));
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    max-width: 100% !important;
    z-index: var(--z-modal);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
  }
}

/* 모바일: 헤더가 사이드바 오버레이 위에 항상 보이도록 → 상단 패널 기능 선택 가능 */
@media (max-width: 768px) {
  .app-header {
    z-index: 1100;
  }
}

/* 모바일에서 대화방 선택 시: 채팅만 전체 표시. 요약은 '요약 보기' 버튼 → 오버레이로만 표시 */
@media (max-width: 768px) {
  .app-content.mobile-chat-view {
    flex-direction: row;
    height: calc(100vh - var(--app-header-height, 60px) - env(safe-area-inset-top, 0));
  }

  .app-content.mobile-chat-view > .resizer {
    display: none !important;
  }

  /* 모바일 채팅 뷰: 인라인 요약 패널 숨김 → 채팅 영역만 전체 사용 (기능 선택 가능) */
  .app-content.mobile-chat-view .summary-panel-wrapper {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden;
    border: none;
    display: none !important;
  }

  .app-content.mobile-chat-view .chat-panel-wrapper {
    flex: 1;
    min-width: 0;
    min-height: 0;
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
  }

  .app-content.mobile-chat-view .chat-panel-wrapper .chat-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* 대화방 선택 후: 사이드바는 열릴 때만 오버레이로 표시(닫히면 채팅방이 보임) */
  .app-content.mobile-chat-view .sidebar-wrapper.sidebar-open {
    position: fixed;
    top: calc(var(--app-header-height, 60px) + env(safe-area-inset-top, 0));
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    max-width: 100% !important;
    z-index: var(--z-modal);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
  }
}

/* 모바일 대화방 뷰: 기본은 요약+입력만, 메시지는 '메시지 보기'로 별도 표시 */
@media (max-width: 768px) {
  .app-content.mobile-chat-view .chat-panel .chat-input-area {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* 메시지 보기 열었을 때만 메시지 영역 표시 */
  .app-content.mobile-chat-view .chat-panel.mobile-messages-open .chat-messages {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}

/* 모바일 요약 오버레이: 전체 화면, 터치 친화적 헤더·닫기 */
@media (max-width: 768px) {
  .mobile-summary-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: env(safe-area-inset-top, 0);
    z-index: var(--z-modal);
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .mobile-summary-overlay-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border, #e4e6eb);
    background: #fff;
    min-height: 48px;
  }
  .mobile-summary-overlay-close {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 12px;
    margin: -4px 0;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--color-primary, #03C1FF);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-summary-overlay-title {
    font-weight: 600;
    font-size: 17px;
    flex: 1;
    min-width: 0;
  }
  .mobile-summary-overlay-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-summary-overlay-body .ai-summary-panel {
    min-height: 100%;
    border: none;
    display: flex;
    flex-direction: column;
  }
}

/* 모바일 풀 투 리프레시: 당겨지는 모션 인디케이터 */
.pull-to-refresh-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  background: linear-gradient(to bottom, #f0f2f5 0%, #e4e6eb 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  transition: height 0.15s ease-out;
}

.pull-to-refresh-indicator-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pull-to-refresh-arrow {
  font-size: 22px;
  color: var(--color-primary, #03C1FF);
  transition: transform 0.2s ease;
}

.pull-to-refresh-text {
  font-size: 13px;
  font-weight: 500;
  color: #65676b;
}

.pull-to-refresh-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(3, 193, 255, 0.25);
  border-top-color: var(--color-primary, #03C1FF);
  border-radius: 50%;
  animation: pull-to-refresh-spin 0.7s linear infinite;
}

@keyframes pull-to-refresh-spin {
  to { transform: rotate(360deg); }
}
.login-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  max-height: 100vh;
  padding: 24px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(135deg, #B706D2 0%, #03C1FF 100%);
  box-sizing: border-box;
}

.login-box {
  position: relative;
  background: #fff;
  padding: 40px 36px;
  margin: auto;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  text-align: center;
  min-width: 350px;
  max-width: 440px;
  width: 90%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.login-back-link {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 13px;
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}

.login-back-link:hover {
  color: #B706D2;
}

.login-logo-wrap {
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-logo-img {
  height: 50px;
  width: auto;
  display: block;
  object-fit: contain;
}

.subtitle {
  color: #666;
  margin-bottom: 6px;
  font-size: 13px;
}

.login-tagline {
  color: #999;
  margin: 0 0 24px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 로그인 타입 선택 */
.login-type-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 5px;
  background: #f8fafc;
}

.type-btn {
  flex: 1;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.type-btn:hover {
  color: #334155;
}

.type-btn.active {
  background: #fff;
  color: #B706D2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 로그인 폼 */
.login-form {
  text-align: left;
}

/* SaaS 스타일 가입 폼 섹션 */
.register-agree {
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 12px 0;
  border-top: 1px solid #e2e8f0;
}
.register-agree-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #475569;
}
.register-agree-item:last-child {
  margin-bottom: 0;
}
.register-agree-item input {
  margin-top: 2px;
  flex-shrink: 0;
}
.register-agree-item a {
  color: #03C1FF;
  text-decoration: none;
}
.register-agree-item a:hover {
  text-decoration: underline;
}

.register-form-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-section {
  border: none;
  margin: 0;
  padding: 20px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.form-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 12px 0;
  padding: 0;
  display: block;
  width: 100%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

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

.form-group:last-child {
  margin-bottom: 0;
}

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

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}

.form-group input:hover {
  border-color: #cbd5e1;
}

.form-group input:focus {
  outline: none;
  border-color: #B706D2;
  box-shadow: 0 0 0 3px rgba(183, 6, 210, 0.12);
}

.form-group input::placeholder {
  color: #94a3b8;
}

/* 입력란 하단 설명 (플레이스홀더 안내) */
.form-hint {
  margin: 4px 0 0 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}

/* 비밀번호 표시/숨기기 */
.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrap input {
  padding-right: 44px;
}

.password-toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}

.password-toggle-btn:hover {
  color: #B706D2;
  background: rgba(183, 6, 210, 0.08);
}

.password-toggle-btn:focus {
  outline: none;
}

.password-toggle-btn svg {
  flex-shrink: 0;
}

/* 계속 로그인 상태 유지 */
.login-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  user-select: none;
}

.login-remember input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #B706D2;
  cursor: pointer;
}

.login-remember:hover {
  color: #333;
}

/* 구글 로그인 버튼 */
.google-login-btn {
  width: 100%;
  padding: 10px 20px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.google-login-btn:hover {
  background-color: #357ae8;
}

.google-icon {
  width: 20px;
  height: 20px;
}

/* 기업 로그인/회원가입 버튼 */
.enterprise-login-btn,
.enterprise-register-btn {
  width: 100%;
  padding: 11px 20px;
  background: #B706D2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  margin-top: 6px;
}

.enterprise-login-btn:not(:disabled),
.enterprise-register-btn:not(:disabled) {
  box-shadow: 0 2px 8px rgba(183, 6, 210, 0.25);
}

.enterprise-login-btn:hover:not(:disabled),
.enterprise-register-btn:hover:not(:disabled) {
  background: #9a05b3;
  box-shadow: 0 4px 12px rgba(183, 6, 210, 0.3);
}

.enterprise-login-btn:disabled,
.enterprise-register-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 회원가입 링크 */
.register-link {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: #666;
}

.link-btn {
  background: none;
  border: none;
  color: #B706D2;
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  padding: 0;
  margin-left: 4px;
}

.link-btn:hover {
  color: #9a05b3;
}

/* 에러 메시지 */
.error-message {
  padding: 10px 12px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  text-align: center;
}

/* 이메일/비밀번호 찾기 링크 */
.login-helper-links {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: #64748b;
}

.login-helper-links .link-btn {
  margin-left: 0;
  margin-right: 0;
}

.login-helper-sep {
  margin: 0 8px;
  color: #cbd5e1;
}

/* 모달 (이메일 찾기, 비밀번호 찾기) */
.login-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.login-modal {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.login-modal-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.login-modal-desc {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

.login-find-result {
  margin-top: 16px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  text-align: left;
}

.login-find-label {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.login-find-result ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #334155;
}

.login-find-empty {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.login-reset-success {
  margin: 0 0 12px 0;
  padding: 12px;
  background: #f0fdf4;
  color: #166534;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}

.login-register-success-message {
  margin: 0 0 12px 0;
  padding: 12px;
  background: #f0fdf4;
  color: #166534;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}

.login-verify-message {
  margin: 0;
  padding: 12px;
  font-size: 14px;
  text-align: center;
}
.login-verify-message.success {
  background: #f0fdf4;
  color: #166534;
  border-radius: 8px;
}
.login-verify-message.error {
  background: #fef2f2;
  color: #b91c1c;
  border-radius: 8px;
}

.resend-verification-btn {
  display: block;
  margin-top: 8px;
  width: 100%;
}
.ai-summary-panel {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  min-width: 0;
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* 요약 패널 전체 업데이트 모션 - 눈에 띄게 */
.ai-summary-panel.updating {
  border-left: 4px solid var(--color-primary);
  animation: panel-updating-bar-pulse 1s ease-in-out infinite;
}

.ai-summary-panel.updating::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(0, 132, 255, 0.04) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: panel-updating-shimmer 1.8s ease-in-out infinite;
}

@keyframes panel-updating-bar-pulse {
  0%, 100% { border-left-color: var(--color-primary); }
  50% { border-left-color: #40a9ff; }
}

@keyframes panel-updating-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 상단바 아래: 좌측 툴바 + 본문 영역 (사이 간격 없음). 툴바는 잘리지 않도록 overflow visible */
.summary-panel-body-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 0;
}
.summary-panel-body-row .summary-panel-left-toolbar {
  overflow: visible;
}

.summary-panel-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 콘텐츠 영역 래퍼 (중앙 오버레이 위치 기준) */
.summary-content-wrapper {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.summary-refresh-icon-btn {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 16;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background var(--transition-base), color var(--transition-base);
}

.summary-refresh-icon-btn:hover:not(:disabled) {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.summary-refresh-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 패널 중앙 업데이트 모션 (콘텐츠 영역 한가운데) */
.summary-panel-updating-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(240, 242, 245, 0.85);
  z-index: 15;
  pointer-events: none;
}

.summary-panel-updating-center .summary-panel-updating-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(0, 132, 255, 0.25);
  border-top-color: #03C1FF;
  border-radius: 50%;
  animation: summary-updating-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.summary-panel-updating-text {
  font-size: 16px;
  font-weight: 600;
  color: #02a8e0;
  animation: summary-updating-text-pulse 1.2s ease-in-out infinite;
}

@keyframes summary-updating-text-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* 업데이트 중일 때 콘텐츠 영역 약간 어둡게 (진행 중 느낌) */
.summary-content.is-updating {
  position: relative;
}

.summary-content.is-updating::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(240, 242, 245, 0.5);
  pointer-events: none;
  z-index: 1;
  animation: content-updating-overlay 1.2s ease-in-out infinite;
}

/* 기존 요약이 보이는 동안 업데이트 시: 어둡게 하지 않음 (나머지는 계속 읽을 수 있게) */
.summary-content.summary-visible-updating::before {
  display: none;
}

@keyframes content-updating-overlay {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.5; }
}

.summary-header {
  padding: var(--section-header-padding);
  background: var(--color-bg-primary);
  border-bottom: var(--section-header-border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow: var(--section-header-shadow);
  z-index: 10;
  flex-shrink: 0;
  min-width: 0;
  gap: var(--spacing-md);
  min-height: var(--section-header-height);
  height: auto;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  margin: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.summary-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 60%);
  opacity: 0.4;
}

/* 모바일: 한 줄 아이콘바 + 더보기 패널 */
.summary-header.summary-header-mobile {
  padding: 8px 10px;
  gap: 0;
  min-height: 0;
}

.summary-mobile-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.summary-mobile-bar-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--color-border);
  color: #1c1e21;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.summary-mobile-bar-btn svg {
  width: 20px;
  height: 20px;
}

.summary-mobile-bar-btn:hover:not(:disabled) {
  background: #d0d2d6;
}

.summary-mobile-bar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.summary-mobile-bar-btn-email:not(:disabled) {
  background: #e3f2fd;
  color: #1976d2;
}

.summary-mobile-more-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  pointer-events: none;
}

.summary-mobile-more-panel .summary-mobile-more-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

.summary-mobile-more-content {
  position: relative;
  margin-top: 56px;
  margin-left: max(12px, env(safe-area-inset-left, 0));
  margin-right: max(12px, env(safe-area-inset-right, 0));
  max-width: 360px;
  width: calc(100% - 24px);
  max-height: calc(100vh - 80px - env(safe-area-inset-bottom, 0));
  overflow-y: auto;
  background: var(--color-bg-primary);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  padding: 12px 14px 16px;
  -webkit-overflow-scrolling: touch;
}

.summary-mobile-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.summary-mobile-more-header span {
  font-size: 15px;
  font-weight: 600;
  color: #1c1e21;
}

.summary-mobile-more-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #65676b;
  cursor: pointer;
}

.summary-mobile-more-section {
  margin-bottom: 12px;
}

.summary-mobile-more-section:last-child {
  margin-bottom: 0;
}

.summary-mobile-more-section .participants-label,
.summary-mobile-more-section .summary-lang-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #65676b;
  margin-bottom: 6px;
}

.summary-mobile-more-section .participants-chips-wrap {
  flex-wrap: wrap;
  overflow: visible;
}

.datetime-row-mobile {
  display: flex;
  align-items: center;
  gap: 6px;
}

.datetime-row-mobile .datetime-text {
  font-size: 13px;
  color: #65676b;
}

.datetime-row-mobile .datetime-icon {
  font-size: 14px;
}

.summary-mobile-more-section .summary-lang-trigger-wrap {
  margin-top: 4px;
}

.summary-header-second-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.participants-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.participants-row-full {
  width: 100%;
  min-width: 0;
}

.participants-row-full .participants-chips {
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.participants-label {
  font-size: 12px;
  font-weight: 600;
  color: #65676b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.participants-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.participant-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #1c1e21;
  background: linear-gradient(135deg, #e7f3ff 0%, #d6ebff 100%);
  border: 1px solid rgba(0, 132, 255, 0.2);
  border-radius: 20px;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-chip-email {
  font-size: 12px;
  color: #65676b;
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.add-participant-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px dashed rgba(0, 132, 255, 0.5);
  border-radius: 50%;
  background: rgba(0, 132, 255, 0.08);
  color: #03C1FF;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.add-participant-btn:hover {
  background: rgba(0, 132, 255, 0.15);
  border-color: #03C1FF;
  color: #02a8e0;
}

.add-participant-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

.add-participant-modal {
  background: var(--color-bg-primary);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 20px;
  min-width: 280px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.add-participant-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1c1e21;
}

.add-participant-modal-hint {
  margin: 0;
  font-size: 13px;
  color: #65676b;
}

/* 사용자 패널(사이드바) 사용자 찾기와 동일 스타일 */
.add-participant-search-wrap {
  width: 100%;
  box-sizing: border-box;
}

.add-participant-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  color: #1c1e21;
  background: #f9f9f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
  background-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.2s, background-color 0.2s;
}

.add-participant-search-input::placeholder {
  color: #999;
}

.add-participant-search-input:focus {
  outline: none;
  border-color: #03C1FF;
  background-color: var(--color-bg-primary);
}

.add-participant-empty-search {
  padding: 16px;
  text-align: center;
}

.add-participant-empty-search-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #65676b;
}

.add-participant-empty-search-hint {
  margin: 0;
  font-size: 13px;
  color: #8a8d91;
}

.add-participant-modal-empty {
  margin: 0;
  padding: 12px 0;
  font-size: 14px;
  color: #65676b;
}

.add-participant-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 260px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.add-participant-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  color: #1c1e21;
  transition: background 0.15s;
}

.add-participant-list li:last-child .add-participant-item {
  border-bottom: none;
}

.add-participant-item:hover {
  background: var(--color-bg-secondary);
}

.add-participant-item.selected {
  background: #e7f3ff;
  border-left: 3px solid #03C1FF;
}

.add-participant-item-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.add-participant-item-phone,
.add-participant-item-email {
  font-size: 12px;
  color: #65676b;
}

.add-participant-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.add-participant-selected-count {
  margin-right: auto;
  font-size: 13px;
  color: #03C1FF;
  font-weight: 600;
}

.add-participant-btn-cancel {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  color: #1c1e21;
}

.add-participant-btn-cancel:hover {
  background: var(--color-bg-secondary);
}

.add-participant-btn-submit {
  padding: 8px 20px;
  border: none;
  background: linear-gradient(135deg, #03C1FF 0%, #02a8e0 100%);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
}

.add-participant-btn-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #02a8e0 0%, #028fc7 100%);
}

.add-participant-btn-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 회의록 참석자 편집 확장 팝업 */
.attendees-edit-popup {
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
}

.attendees-edit-section {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.attendees-edit-section.summary-lang-section {
  border-top: none;
  padding-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attendees-edit-lang-select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  color: #1c1e21;
  background: var(--color-bg-primary);
}

.attendees-edit-hint {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: #65676b;
  line-height: 1.4;
}

.attendees-edit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  min-height: 32px;
}

.attendees-edit-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e7f3ff;
  border: 1px solid #b3d9f5;
  border-radius: 16px;
  padding: 2px 6px 2px 10px;
}

.attendees-edit-chip-wrap .participant-chip {
  border: none;
  background: transparent;
  padding: 0;
}

.attendees-edit-remove {
  width: 18px;
  height: 18px;
  border: none;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #1c1e21;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.attendees-edit-remove:hover {
  background: rgba(0, 0, 0, 0.2);
}

.attendees-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.attendees-edit-action-label {
  font-size: 12px;
  color: #65676b;
  margin-right: 4px;
}

.attendees-edit-add-btn {
  padding: 4px 10px;
  border: 1px dashed #03C1FF;
  background: var(--color-bg-primary);
  border-radius: 6px;
  font-size: 12px;
  color: #03C1FF;
  cursor: pointer;
}

.attendees-edit-add-btn:hover {
  background: #e7f3ff;
}

.attendees-edit-none {
  font-size: 12px;
  color: #8a8d91;
}

.attendees-edit-arbitrary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.attendees-edit-arbitrary .attendees-edit-action-label {
  flex-basis: 100%;
}

.attendees-edit-input {
  flex: 1;
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
}

.attendees-edit-add-arbitrary-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #03C1FF;
  background: #e7f3ff;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  color: #03C1FF;
  cursor: pointer;
}

.attendees-edit-add-arbitrary-btn:hover:not(:disabled) {
  background: #03C1FF;
  color: #fff;
}

.attendees-edit-add-arbitrary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.attendees-edit-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}

.datetime-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #65676b;
}

.datetime-icon {
  font-size: 14px;
  opacity: 0.9;
}

.datetime-text {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.summary-lang-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.summary-lang-label {
  font-size: 12px;
  color: #65676b;
  white-space: nowrap;
  flex-shrink: 0;
}

.summary-lang-trigger-wrap {
  position: relative;
}

.summary-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-primary);
  color: #050505;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.summary-lang-trigger:hover {
  background: var(--color-bg-secondary);
  border-color: #ccd0d5;
}

.summary-lang-trigger-arrow {
  font-size: 10px;
  opacity: 0.7;
}

.summary-lang-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.summary-lang-popup {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 160px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  padding: 6px 0;
}

.summary-lang-popup-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  text-align: left;
  border: none;
  background: transparent;
  color: #050505;
  cursor: pointer;
  transition: background 0.15s;
}

.summary-lang-popup-item:hover {
  background: var(--color-bg-secondary);
}

.summary-lang-popup-item.active {
  background: #e7f5ff;
  color: #03C1FF;
  font-weight: 600;
}

.summary-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.action-btn {
  padding: 8px 18px;
  min-width: 92px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  color: #050505;
  box-sizing: border-box;
  white-space: nowrap;
}

.action-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #03C1FF 0%, #02a8e0 100%);
  border-color: #03C1FF;
  color: white;
  box-shadow: 0 2px 6px rgba(3, 193, 255, 0.25);
}

.action-btn:disabled {
  background-color: #e8eaed;
  border-color: var(--color-border);
  color: #65676b;
  cursor: not-allowed;
  opacity: 0.9;
}

.action-btn-email:disabled {
  background-color: #e8eaed;
  border-color: var(--color-border);
  color: #65676b;
  cursor: not-allowed;
  opacity: 0.9;
}

/* 모바일: 복사/이메일 아이콘만 (공간 절약) */
.action-btn-icon-only {
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.action-btn-icon-only svg {
  width: 20px;
  height: 20px;
}
.action-btn-sending {
  font-size: 14px;
}

.summary-content {
  flex: 1;
  padding: 0;
  overflow-y: auto;
  background-color: var(--color-bg-secondary);
  min-width: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 요약 본문 — 카드형·시인성 (좌측 액센트) */
.summary-text {
  position: relative;
  white-space: pre-wrap;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  font-size: clamp(var(--font-size-sm), 1.2vw, var(--font-size-base));
  background: var(--color-bg-elevated);
  padding: clamp(var(--spacing-lg), 2.5vw, var(--spacing-xl));
  margin: clamp(var(--spacing-lg), 2vw, var(--spacing-xl));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--color-primary);
}

/* 일반 요약 스타일: 가독성 위한 텍스트 배치 (줄 길이·정렬·간격) */
/* 이메일·회의록: 문장 단위 줄바꿈 시인성 (한 문장마다 줄바꿈, 빈 줄도 line-height 적용) */
.summary-text.summary-format-sentence-lines {
  white-space: pre-line;
  line-height: 1.7;
}

.summary-text.summary-format-general {
  max-width: 42em;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
  padding: clamp(24px, 3vw, 32px) clamp(20px, 2.5vw, 28px);
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.summary-text.summary-format-general .summary-spreadsheet,
.summary-text.summary-format-general .summary-image {
  max-width: 42em;
  margin-left: auto;
  margin-right: auto;
}

/* 요약 세그먼트 클릭 시 해당 메시지로 마킹 — 호버 시 커서·배경으로 클릭 가능 표시 */
.summary-segment-clickable {
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 3px;
  padding: 2px 4px;
  margin: 0 -2px;
  transition: background 0.15s ease, color 0.1s ease;
}
.summary-segment-clickable:hover {
  background: rgba(183, 6, 210, 0.15);
  color: var(--color-text-primary);
}
.summary-segment-clickable:focus {
  outline: 2px solid #B706D2;
  outline-offset: 2px;
}

/* 이메일 형식: 발신자 정보 하단 안내 — 패널 전용, 복사·이메일 본문에 미포함, 요약 본문과 좌측 정렬 일치 */
.summary-signature-notice {
  margin: 8px 0 clamp(16px, 2vw, 24px) 0;
  padding: 0;
  font-size: 11px;
  color: #65676b;
  user-select: none;
  -webkit-user-select: none;
  text-align: left;
}

/* 요약창 스프레드시트 스타일 */
.summary-spreadsheet {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.summary-spreadsheet-header {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.summary-spreadsheet-sender {
  color: #666;
  font-weight: normal;
  font-size: 12px;
}

.summary-spreadsheet-preview {
  overflow-x: auto;
  max-width: 100%;
}

.summary-spreadsheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background-color: var(--color-bg-primary);
}

.summary-spreadsheet-table td {
  border: 1px solid var(--color-border);
  padding: 6px 8px;
  text-align: left;
  /* 서식 정보가 있으면 인라인 스타일로 덮어씀 */
}

.summary-spreadsheet-more {
  padding: 8px;
  text-align: center;
  color: #666;
  font-size: 12px;
  background-color: #f8f9fa;
  border-top: 1px solid var(--color-border);
}

.summary-image {
  margin-top: 24px;
  padding: 16px;
  background-color: var(--color-bg-primary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.summary-image-sender {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}
.summary-image-img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Compact: 요약 내용 하단 첨부 이미지 섹션 */
.summary-attached-images {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.summary-attached-images-header {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}
.summary-attached-images-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.summary-attached-images-list .summary-image {
  margin-top: 0;
}
.summary-attached-images-list .summary-image-img {
  cursor: pointer;
}
.summary-attached-images-list .summary-image-img:hover {
  opacity: 0.92;
}

/* 요약 패널 이미지 원본과 동일 크기로 통일 (채팅 패널과 동일) */
.summary-image-fixed-size .summary-image-img {
  max-width: 280px;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.summary-image-clickable .summary-image-btn {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.summary-image-clickable .summary-image-btn:hover {
  opacity: 0.92;
}

/* 요약 패널 이미지 수정 처리 중 플레이스홀더 */
.summary-image-edit-placeholder {
  margin-top: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 1px solid rgba(3, 193, 255, 0.5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.summary-image-edit-placeholder-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(3, 193, 255, 0.4);
  border-top-color: #03C1FF;
  border-radius: 50%;
  animation: image-edit-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes image-edit-spin {
  to {
    transform: rotate(360deg);
  }
}

.summary-image-edit-placeholder-request {
  width: 100%;
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #028fc7;
  font-weight: 600;
  word-break: break-word;
}

.summary-image-edit-placeholder-text {
  font-size: 14px;
  color: #02a8e0;
  font-weight: 600;
  margin: 0;
}

.summary-image-edit-placeholder-hint {
  width: 100%;
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #03C1FF;
  font-weight: 400;
}

/* 요약 업데이트 중 배너 (스트리밍/방금 반영 시 표시) */
.summary-updating-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, #e8f4fd 0%, #d6ebfa 100%);
  border: 1px solid rgba(0, 132, 255, 0.25);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #02a8e0;
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 132, 255, 0.08);
  animation: summary-updating-pulse 1.5s ease-in-out infinite;
}

@keyframes summary-updating-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 2px 8px rgba(0, 132, 255, 0.08); }
  50% { opacity: 0.92; box-shadow: 0 2px 12px rgba(0, 132, 255, 0.14); }
}

.summary-updating-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 102, 204, 0.3);
  border-top-color: #03C1FF;
  border-radius: 50%;
  animation: summary-updating-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes summary-updating-spin {
  to { transform: rotate(360deg); }
}

.summary-text.updating {
  opacity: 0.92;
}
.summary-text.updating::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: summary-updated-flash 0.6s ease-out;
}

@keyframes summary-updated-flash {
  0% { box-shadow: inset 0 0 0 2px rgba(0, 132, 255, 0.4); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}

.summary-highlight {
  font-weight: 700;
  background-color: rgba(255, 235, 59, 0.3);
  transition: background-color 0.3s ease;
  padding: 2px 4px;
  border-radius: 3px;
}

.summary-highlight.fade-out {
  background-color: transparent;
  font-weight: 400;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vh, 40px) clamp(16px, 2vw, 24px);
  color: var(--color-text-secondary);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  background-color: var(--color-bg-secondary);
}

.loading p {
  margin: var(--spacing-sm) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.loading-hint {
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-tertiary) !important;
  margin-top: var(--spacing-xs);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
  padding: clamp(20px, 3vh, 40px) clamp(16px, 2vw, 24px);
  color: var(--color-text-tertiary);
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-secondary);
  margin: 0;
}

.empty-state-icon {
  font-size: clamp(36px, 4vw, 48px);
  margin-bottom: 16px;
  opacity: 0.5;
  flex-shrink: 0;
}

.empty-state-title {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.empty-state p {
  margin: 4px 0;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.5;
  color: #666;
  max-width: 90%;
}

/* Basic 플랜: 요약 패널 중앙 안내 문구 */
.summary-panel-plan-restricted {
  min-height: 120px;
  justify-content: center;
}

.summary-panel-plan-restricted-title {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  max-width: 92%;
}

.summary-panel-plan-restricted-desc {
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.6;
  color: #666;
  margin: 0;
  max-width: 92%;
}

.empty-hint {
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-tertiary) !important;
  margin-top: var(--spacing-sm);
}

/* 모바일: 요약 영역 여백·터치 영역 조정 (오버레이/인라인 공통) */
@media (max-width: 768px) {
  .ai-summary-panel .summary-header {
    padding: 10px 12px;
    padding-left: max(12px, env(safe-area-inset-left, 0));
    padding-right: max(12px, env(safe-area-inset-right, 0));
    gap: 8px;
    min-height: auto;
  }
  .ai-summary-panel .summary-header-second-row {
    gap: 8px;
  }
  .ai-summary-panel .participants-label,
  .ai-summary-panel .summary-lang-label {
    font-size: 11px;
  }
  .ai-summary-panel .participant-chip {
    padding: 4px 10px;
    font-size: 12px;
  }
  .ai-summary-panel .summary-actions {
    gap: 8px;
  }
  .ai-summary-panel .summary-content {
    padding: 12px;
    padding-left: max(12px, env(safe-area-inset-left, 0));
    padding-right: max(12px, env(safe-area-inset-right, 0));
  }
  .ai-summary-panel .summary-content-wrapper {
    padding: 0;
  }
  .ai-summary-panel .summary-refresh-icon-btn {
    top: 8px;
    right: 8px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    font-size: 18px;
  }
  .ai-summary-panel .summary-text {
    padding: 14px 12px;
    margin: 12px;
    font-size: 14px;
  }
  .ai-summary-panel .summary-text.summary-format-general {
    padding: 16px 12px;
  }
}
.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer;
}

.image-lightbox-content {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.image-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background 0.2s;
}

.image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

.image-lightbox-img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.chat-panel {
  height: 100%;
  width: 100%;
  background-color: var(--color-bg-primary);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-border);
  min-width: 0;
  flex-shrink: 0;
  flex-grow: 1;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.chat-header {
  padding: var(--section-header-padding);
  background-color: var(--color-bg-primary);
  border-bottom: var(--section-header-border);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: var(--section-header-shadow);
  z-index: 10;
  flex-shrink: 0;
  min-width: 0;
  height: var(--section-header-height);
  box-sizing: border-box;
  position: relative;
  width: 100%;
  margin: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

/* 요약 패널에서 세그먼트 클릭 시 대화창 우측 상단 N/M 배지 */
.chat-header-highlight-badge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-danger-light);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.chat-header-highlight-badge-circle {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.chat-header-highlight-badge-circle.chat-header-highlight-badge-circle-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  padding: 0 4px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.85em;
}
.chat-header-highlight-badge-text {
  font-variant-numeric: tabular-nums;
}
.chat-header-highlight-badge-close {
  padding: 0 var(--spacing-xs);
  margin: 0;
  border: none;
  background: transparent;
  color: var(--color-danger);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}
.chat-header-highlight-badge-close:hover {
  opacity: 1;
}

.sidebar-toggle {
  padding: var(--spacing-sm);
  border: none;
  background-color: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 20px;
  color: var(--color-text-secondary);
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}

.sidebar-toggle:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

/* 모바일: 대화 목록으로 돌아가기 (터치 친화 44px) */
.chat-header-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}
.chat-header-back-btn:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.chat-header-back-btn:active {
  background-color: var(--color-bg-hover);
}
.chat-header-back-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.chat-title {
  flex: 1 1 0;
  min-width: 60px;
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.chat-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 대화창 헤더 SNS 연동 아이콘 (상대방 이름 앞) */
.chat-header-sns-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  line-height: 0;
}
.chat-header-sns-icon svg {
  display: block;
}
.chat-header-sns-icon-whatsapp { color: #25D366; }
.chat-header-sns-icon-wechat { color: #09BB07; }
.chat-header-sns-icon-messenger { color: #0084FF; }
.chat-header-sns-icon-telegram { color: #0088cc; }
.chat-header-sns-icon-snapchat { color: #FFFC00; }
.chat-header-sns-icon-line { color: #00B900; }
.chat-header-sns-icon-slack { color: #4A154B; }
.chat-header-sns-icon-discord { color: #5865F2; }
.chat-header-sns-icon-kakao { color: #3C1E1E; }

/* 데모 데이터 표시 뱃지 */
.chat-title .demo-badge {
  display: inline-block;
  margin-left: var(--spacing-sm);
  padding: 2px var(--spacing-sm);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  vertical-align: middle;
  flex-shrink: 0;
}

/* 헤더 점3 메뉴 */
.chat-header-menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.chat-header-menu-btn {
  padding: var(--spacing-sm);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 18px;
  color: var(--color-text-secondary);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  transition: background var(--transition-base), color var(--transition-base);
}
.chat-header-menu-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.chat-header-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.chat-header-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-xs);
  min-width: 180px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 101;
  padding: var(--spacing-sm) 0;
  display: flex;
  flex-direction: column;
}
.chat-header-menu-dropdown [role="menuitem"] {
  display: block;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border: none;
  background: none;
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}
.chat-header-menu-dropdown [role="menuitem"]:hover:not(:disabled) {
  background: var(--color-bg-secondary);
}
.chat-header-menu-dropdown [role="menuitem"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 대화방 정보 모달 */
.chat-info-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.chat-info-modal {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  min-width: 280px;
  max-width: 90vw;
  box-shadow: var(--shadow-xl);
}
.chat-info-modal-title {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}
.chat-info-modal-participants-label {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.chat-info-modal-participants {
  margin: 0 0 var(--spacing-lg);
  padding-left: var(--spacing-xl);
  list-style: disc;
}
.chat-info-modal-participants li {
  margin: var(--spacing-xs) 0;
}
.chat-info-modal-close {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  transition: background var(--transition-base), border-color var(--transition-base);
}
.chat-info-modal-close:hover {
  background: var(--color-bg-secondary);
}
.chat-info-modal-other-party {
  margin-bottom: var(--spacing-lg);
}
.chat-info-modal-other-party-card {
  padding: var(--spacing-md);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-sm);
}
.chat-info-modal-other-party-name {
  font-weight: 600;
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}
.chat-info-modal-other-party-nickname {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}
.chat-info-modal-other-party-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}
.chat-info-modal-add-contact-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-base);
}
.chat-info-modal-add-contact-btn:hover:not(:disabled) {
  background: var(--color-primary-dark);
}
.chat-info-modal-add-contact-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.chat-info-modal-already-contact {
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

/* 메시지 선택: 전체 행 클릭, 선택 시 색상 */
.message.message-selectable {
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
}
.message.message-selected {
  background: rgba(24, 119, 242, 0.12);
  outline: 1px solid rgba(24, 119, 242, 0.35);
}

/* 메시지 선택 하단 패널 (N개 선택됨, 휴지통, 전달, 취소, 나가기) */
.message-select-bottom-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.message-select-bottom-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: 500;
  margin-right: auto;
}
.message-select-bottom-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), color var(--transition-base);
}
.message-select-bottom-btn:hover:not(:disabled) {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.message-select-bottom-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.message-select-bottom-exit {
  margin-left: var(--spacing-xs);
}
.message-select-bottom-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* 헤더: 별(즐겨찾기)·종(알림) 선형 아이콘 (점3과 동일 컬러), 클릭 가능하도록 백드롭 위에 표시 */
.chat-header-icon-btn {
  flex-shrink: 0;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), color var(--transition-base);
  position: relative;
  z-index: 102;
}
.chat-header-icon-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.chat-header-linear-icon {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}
.chat-header-add-user-btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.chat-header-add-user-btn:hover:not(:disabled) {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.chat-header-add-user-btn:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

.chat-summary-btn {
  flex-shrink: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.chat-summary-btn:hover {
  background: #f0f0f0;
  color: #111;
}
.chat-summary-btn:active {
  background: #e5e5e5;
}

@media (max-width: 768px) {
  .chat-summary-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 12px;
  }
}

/* 모바일: 요약+입력만 보일 때 '메시지 보기' 버튼 */
.chat-mobile-view-messages-bar {
  flex-shrink: 0;
  width: 100%;
  padding: 14px 16px;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-primary, #03C1FF);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  min-height: 48px;
}
.chat-mobile-view-messages-bar:hover {
  background: var(--color-bg-tertiary, #f0f2f5);
}
.chat-mobile-view-messages-bar:active {
  background: var(--color-border);
}

.chat-mobile-view-messages-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 10px;
  margin: 6px auto;
}

.chat-mobile-view-messages-bar-icon svg {
  width: 24px;
  height: 24px;
}

/* 모바일: 메시지 보기 화면에서 '요약으로' 버튼 (메시지 영역 상단 고정) */
.chat-mobile-back-to-summary-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
  width: 100%;
  padding: 12px 16px;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-primary, #03C1FF);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  min-height: 48px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.chat-mobile-back-to-summary-bar:hover {
  background: var(--color-bg-secondary, #f8f9fa);
}
.chat-mobile-back-to-summary-bar:active {
  background: #f0f2f5;
}

/* 요약 범위 설정: ON/OFF 스위치 + 확인 모달 */
.chat-summary-range-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.chat-summary-range-wrap .chat-summary-range-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #666);
  white-space: nowrap;
}
.chat-summary-range-onoff {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg-secondary, #f0f2f5);
}
.chat-summary-range-onoff-option {
  padding: 4px 10px;
  border: none;
  min-width: 36px;
  background: transparent;
  color: var(--color-text-secondary, #666);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.chat-summary-range-onoff-option.active {
  background: var(--color-primary, #03C1FF);
  color: #fff;
}
.chat-summary-range-onoff-option:not(.active):hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-primary, #333);
}
.chat-summary-range-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.35);
}
.chat-summary-range-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  min-width: 280px;
  max-width: 90vw;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.chat-summary-range-modal-title {
  margin: 0 0 10px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary, #333);
}
.chat-summary-range-modal-desc {
  font-size: 13px;
  color: var(--color-text-secondary, #666);
  line-height: 1.5;
  margin: 0 0 14px 0;
}
.chat-summary-range-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.chat-summary-range-modal-cancel,
.chat-summary-range-modal-apply {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.chat-summary-range-modal-cancel {
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-secondary, #666);
}
.chat-summary-range-modal-cancel:hover {
  background: var(--color-bg-secondary, #f8f9fa);
}
.chat-summary-range-modal-apply {
  border: none;
  background: var(--color-primary, #03C1FF);
  color: #fff;
}
.chat-summary-range-modal-apply:hover:not(:disabled) {
  filter: brightness(1.05);
}
.chat-summary-range-modal-apply:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.chat-summary-range-applying {
  font-size: 11px;
  color: var(--color-primary, #03C1FF);
  margin: 0 0 10px 0;
}

.chat-messages {
  flex: 1;
  padding: var(--spacing-xl);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  user-select: text;
  -webkit-user-select: text;
  gap: var(--spacing-md);
  background-color: var(--color-bg-primary);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
}

/* 음성 대화방(On Air): 메시지 간격·박스 여백 축소, 점3은 하단 시간 우측 고정 */
.chat-messages.chat-messages-voice-summary {
  gap: 2px !important;
}
.chat-messages.chat-messages-voice-summary .summary-cutoff-zone {
  min-height: 4px;
}
/* 음성 대화방: 메시지 박스·내용 여백 더 좁게 */
.chat-messages.chat-messages-voice-summary .message,
.message.message-voice-summary {
  padding: 3px 6px !important;
  box-sizing: border-box;
}
.chat-messages.chat-messages-voice-summary .message-bubble,
.message.message-voice-summary .message-bubble {
  gap: 3px !important;
}
/* 음성 대화방: 시간 행 상단 여백 제거, 점3을 시간 우측에 바로 붙여 배치 */
.chat-messages.chat-messages-voice-summary .message-time-row,
.message.message-voice-summary .message-time-row {
  margin-top: 0 !important;
  gap: 4px !important;
  flex-wrap: nowrap;
  align-items: center;
}
.chat-messages.chat-messages-voice-summary .message-time-row .message-time,
.message.message-voice-summary .message-time-row .message-time {
  flex-shrink: 0;
}
/* 점3 메뉴: 하단 시간 우측 인라인 (시간 바로 옆) */
.chat-messages.chat-messages-voice-summary .message-menu-wrap-inline,
.message.message-voice-summary .message-menu-wrap-inline {
  margin-left: 2px;
  flex-shrink: 0;
  order: 10;
}
.chat-messages.chat-messages-voice-summary .message-time-row .message-menu-wrap-inline .message-menu-btn,
.message.message-voice-summary .message-time-row .message-menu-wrap-inline .message-menu-btn {
  padding: 2px 6px;
  font-size: 16px;
}
/* 음성요약 ON: 사용자명 숨김 시 헤더가 공간을 차지하지 않도록 */
.chat-messages.chat-messages-voice-summary .message-header,
.message.message-voice-summary .message-header {
  min-height: 0 !important;
  margin-bottom: 0 !important;
}
.chat-messages.chat-messages-voice-summary .message-sender:empty,
.message.message-voice-summary .message-sender:empty {
  display: none !important;
}
.message-menu-wrap-inline {
  margin-left: 4px;
  flex-shrink: 0;
}
/* On Air일 때만 점3이 하단 시간 우측 → 드롭다운은 위로 열림 */
.chat-messages.chat-messages-voice-summary .message-menu-wrap-inline .message-menu-dropdown,
.message.message-voice-summary .message-menu-wrap-inline .message-menu-dropdown {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}

/* AI 요약 시작 위치 바 (붉은 가로바) */
/* 메시지 간 여백(gap: 12px)과 동일하게 */
.summary-cutoff-zone {
  position: relative;
  min-height: 12px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
}
.summary-cutoff-zone:hover {
  background-color: rgba(220, 53, 69, 0.06);
}
.summary-cutoff-zone-drag-over {
  background-color: rgba(220, 53, 69, 0.12);
}
.summary-cutoff-zone-hint {
  position: absolute;
  font-size: 11px;
  color: var(--color-danger);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.summary-cutoff-zone:hover .summary-cutoff-zone-hint,
.summary-cutoff-zone.summary-cutoff-zone-drag-over .summary-cutoff-zone-hint {
  opacity: 1;
}

/* 드래그 중 요약바 미리보기: 드롭 존 위 = 원래 색, 그 외 = 희미 */
.summary-cutoff-bar-drag-preview {
  transition: opacity 0.12s, background-color 0.12s;
}
.summary-cutoff-bar-drag-preview-dim {
  opacity: 0.4;
  background-color: rgba(220, 53, 69, 0.5);
}
.summary-cutoff-bar {
  width: 100%;
  padding: 4px 10px;
  background-color: #B706D2;
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  text-align: center;
  cursor: grab;
  user-select: none;
  box-shadow: 0 1px 2px rgba(220, 53, 69, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}
.summary-cutoff-bar:active {
  cursor: grabbing;
}
.summary-cutoff-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
  flex: 1;
  min-width: 0;
}
.summary-cutoff-bar-help-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.2px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
}
.summary-cutoff-bar-help-icon:hover {
  background: rgba(255, 255, 255, 0.35);
}
.summary-cutoff-bar-help-popover {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 8px 10px;
  background: #fff;
  color: #333;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-border);
  z-index: 100;
  text-align: left;
}

/* 요약 바 가져오기: 요약 바가 화면 위에 있을 때 마지막 메시지 아래 우측에 표시 */
.summary-pull-down-row {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 4px 0;
  width: 100%;
}
.summary-pull-down-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(135deg, #B706D2 0%, #9a05b3 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(220, 53, 69, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.summary-pull-down-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.4);
}
.summary-pull-down-btn:active {
  transform: scale(0.98);
}
.summary-pull-down-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* 메시지 박스 내부 여백: 상단 테두리-텍스트, 좌우, 텍스트-날짜, 날짜-하단 테두리를 모두 5px로 통일(기존 날짜-하단 10px의 절반) */
/* 기본 메시지: 패딩/갭은 기본값. 음성요약 시에만 아래 .message-voice-summary에서 5px로 오버라이드 */
.message {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-xl);
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-width: 85%;
  min-width: 100px;
  word-wrap: break-word;
  word-break: keep-all;
  overflow-wrap: break-word;
  position: relative;
  box-sizing: border-box;
  line-height: var(--line-height-normal);
}

/* 요약 패널 세그먼트 클릭 시 해당 메시지 마킹 */
.message.message-highlighted-from-summary .message-bubble {
  box-shadow: 0 0 0 2px #B706D2;
  background: linear-gradient(to right, rgba(183, 6, 210, 0.08) 0%, transparent 12px);
}
.message-me.message-highlighted-from-summary .message-bubble {
  box-shadow: 0 0 0 2px #B706D2;
  background: linear-gradient(to left, rgba(183, 6, 210, 0.08) 0%, var(--color-bg-primary) 12px);
}

/* 요약에서 선택한 메시지 우측 상단: 옅은 보라 배경 + 숫자만 (원/테두리 없음) */
.message-summary-ordinal-badge {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #B706D2;
  font-size: 1.75rem;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  min-height: 1.4em;
  padding: 0 4px;
  background: rgba(183, 6, 210, 0.18);
  border: none;
  outline: none;
  border-radius: 50%;
  box-shadow: none;
}
.message-summary-ordinal-badge.message-summary-ordinal-badge-num {
  min-width: 1.6em;
  min-height: 1.6em;
  padding: 0 6px;
  font-size: 1.5rem;
  border: none;
  outline: none;
  box-shadow: none;
}

/* 내 메시지 — 액센트·시인성 */
.message-me {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-primary-subtle) 100%);
  color: var(--color-text-primary);
  border: 2px solid var(--color-primary);
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(3, 193, 255, 0.15);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);
}

/* 상대 메시지 — 카드형·가독성 */
.message-other {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-sm);
}

/* 원본 그림에 대한 수정본: 원본 바로 아래 표시, 구분용 스타일 */
.message-modified-image {
  border-left: 3px solid rgba(3, 193, 255, 0.5);
}
.message-modified-image .message-image::before {
  content: '수정본';
  display: block;
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
}

/* 메시지 헤더: 사용자명과 같은 높이 맨 우측에 점3개 메뉴 */
.message-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 24px;
  margin-bottom: 2px;
}

.message-header-spacer {
  flex: 1;
  min-width: 8px;
}

.message-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.message-menu-btn {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.75;
  border-radius: 6px;
}

.message-menu-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

.message-me .message-menu-btn:hover {
  background: rgba(3, 193, 255, 0.12);
}

.message-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.message-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 101;
  padding: 6px 0;
}

.message-menu-dropdown button[role="menuitem"],
.message-menu-dropdown .message-menu-delete-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  color: #050505;
}

.message-menu-dropdown button[role="menuitem"]:hover,
.message-menu-dropdown .message-menu-delete-btn:hover {
  background: #f0f2f5;
}

.message-menu-delete-wrap {
  position: relative;
}

.message-menu-delete-sub {
  display: none;
  padding-left: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  background: #f8f9fa;
  border-top: 1px solid var(--color-border);
}

.message-menu-delete-sub-open {
  display: block;
}

.message-menu-delete-sub button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  color: #050505;
}

.message-menu-delete-sub button:hover {
  background: var(--color-border);
}

/* 메시지 인라인 수정 */
.message-edit-inline {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-edit-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}

.message-edit-actions {
  display: flex;
  gap: 8px;
}

.message-edit-actions button {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: #f0f2f5;
}

.message-edit-actions button:first-child {
  background: #03C1FF;
  color: white;
  border-color: #03C1FF;
}

/* 전달 모달 */
.forward-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.forward-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 20px;
  min-width: 280px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.forward-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #050505;
}

.forward-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 300px;
}

.forward-modal-list li {
  margin: 0;
}

.forward-modal-item {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: #f0f2f5;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  margin-bottom: 6px;
  color: #050505;
}

.forward-modal-item:hover {
  background: var(--color-border);
}

.forward-modal-empty {
  padding: 16px;
  color: #666;
  font-size: 14px;
}

.forward-modal-close {
  align-self: flex-end;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  color: #050505;
}

.forward-modal-close:hover {
  background: #f0f2f5;
}

.message-sender {
  font-weight: 600;
  font-size: 13px;
  color: #666;
  margin-bottom: 0;
  display: block;
  flex-shrink: 0;
}

.message-content {
  line-height: 1.6;
  font-size: 14px;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  user-select: text;
  -webkit-user-select: text;
  hyphens: auto;
  overflow-wrap: anywhere; /* 긴 단어도 적절히 줄바꿈 */
  max-width: 100%;
}

.message-me .message-content {
  color: var(--color-text-primary);
}

/* 보안 규칙 해당 메시지: 좌측 강조선 + 배지형 보안등급 라벨 (시인성 개선) */
.message-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.message-bubble {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.message-security .message-bubble {
  border-left: 4px solid var(--color-danger);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-left: 0;
  padding-left: var(--spacing-md);
  background: linear-gradient(to right, rgba(198, 40, 40, 0.07) 0%, transparent 14px);
}
.message-me.message-security .message-bubble {
  background: linear-gradient(to right, rgba(198, 40, 40, 0.12) 0%, transparent 14px);
}
.message-time-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  align-self: flex-end;
}

.message-security-label {
  flex-shrink: 0;
  display: inline-block;
  padding: 3px var(--spacing-md);
  border-radius: var(--radius-xl);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--color-danger);
  box-shadow: var(--shadow-sm);
}

.message-time {
  font-size: 11px;
  opacity: 0.7;
  color: var(--color-text-tertiary);
}

.message-me .message-time {
  color: var(--color-text-secondary);
  opacity: 0.9;
}

.empty-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: var(--color-text-tertiary);
  text-align: center;
  padding: clamp(20px, 3vh, 40px) clamp(16px, 2vw, 24px);
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-primary);
  margin: 0;
}

.empty-chat-icon {
  font-size: clamp(36px, 4vw, 48px);
  margin-bottom: 16px;
  opacity: 0.5;
  flex-shrink: 0;
}

.empty-chat-title {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.empty-chat p {
  margin: 4px 0;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.5;
  color: #666;
  max-width: 90%;
}

.empty-hint {
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-tertiary) !important;
  margin-top: var(--spacing-sm);
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vh, 40px) clamp(16px, 2vw, 24px);
  color: var(--color-text-secondary);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  background-color: var(--color-bg-primary);
}

.loading p {
  margin: var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.chat-input-area {
  padding: var(--spacing-lg) var(--spacing-xl);
  background-color: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: stretch;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 음성 요약(마이크 켜짐): 입력창·전송만 비활성화. 입력 언어·변환 언어는 활성화 유지 */
.chat-input-area-voice-summary-disabled {
  background-color: var(--color-bg-tertiary);
  position: relative;
}
.chat-input-area-voice-summary-disabled .chat-input-main {
  pointer-events: none;
  opacity: 0.65;
  position: relative;
}
.chat-input-area-voice-summary-disabled .chat-input-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(220, 220, 220, 0.3);
  pointer-events: none;
  border-radius: var(--radius-full);
}
.chat-input-area-voice-summary-disabled .chat-input {
  background-color: var(--color-bg-hover) !important;
  color: var(--color-text-secondary) !important;
  cursor: not-allowed;
  border-color: var(--color-border-dark);
}
.chat-input-area-voice-summary-disabled .send-button-top {
  background: var(--color-text-tertiary) !important;
  color: #fff !important;
  cursor: not-allowed;
  opacity: 0.7;
  border: 1px solid var(--color-border-dark);
}
.chat-input-voice-summary-hint {
  margin: 0 0 var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* On Air 모드: 입력/전송 숨김 대신 표시하는 안내 문구 */
.chat-on-air-hint {
  margin: 0 0 var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  line-height: 1.4;
}

.chat-on-air-preparing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chat-on-air-preparing-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(3, 193, 255, 0.3);
  border-top-color: #03C1FF;
  border-radius: 50%;
  animation: chat-on-air-spin 0.8s linear infinite;
}

@keyframes chat-on-air-spin {
  to { transform: rotate(360deg); }
}

/* 변환 언어 행 아래: 메시지 입력 + 전송/마이크 버튼 열 (입력부 넓게) */
.chat-input-main {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-md);
  width: 100%;
  min-width: 0;
}

/* 이미지 수정 처리 중 표시 */
.image-edit-processing {
  width: 100%;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #e7f3ff 0%, #b3e5fc 100%);
  border: 1px solid #03C1FF;
  border-radius: 10px;
  font-size: 14px;
  color: #0277bd;
  font-weight: 500;
}

.image-edit-processing-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(3, 193, 255, 0.4);
  border-top-color: #03C1FF;
  border-radius: 50%;
  animation: image-edit-spin 0.8s linear infinite;
}

@keyframes image-edit-spin {
  to {
    transform: rotate(360deg);
  }
}

.chat-input {
  flex: 1;
  padding: 12px 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  background: var(--color-bg-secondary);
  line-height: var(--line-height-normal);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--color-text-primary);
}

.chat-input::placeholder {
  color: var(--color-text-tertiary);
}

.chat-input:focus {
  border-color: var(--color-primary);
  background: var(--color-bg-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.chat-input:disabled {
  background: var(--color-bg-tertiary);
  cursor: not-allowed;
  opacity: 0.8;
}

/* 전송(위)·마이크(아래) 세로 배치, 입력부와 높이 맞춤, 2px 간격 */
.chat-input-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 2px;
  flex-shrink: 0;
  align-self: stretch;
}

.send-button-top {
  flex: 1 1 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 대화 입력부 바로 위: 수정 · 리셋 버튼 (음성 ON일 때만 표시) */
.chat-input-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px 0;
  flex-shrink: 0;
}
.chat-voice-edit-btn,
.chat-voice-input-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text-secondary, #666);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.chat-voice-edit-btn:hover:not(:disabled),
.chat-voice-input-reset-btn:hover:not(:disabled) {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-text-primary, #333);
}
.chat-voice-edit-btn:disabled,
.chat-voice-input-reset-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.chat-voice-edit-btn.pending {
  background: rgba(3, 193, 255, 0.12);
  border-color: var(--color-primary, #03C1FF);
  color: var(--color-primary, #03C1FF);
}

.chat-voice-undo-toasts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 6px 0;
}
.chat-voice-undo-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--color-bg-secondary, #f0f2f5);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-text-secondary, #666);
}
.chat-voice-undo-toast-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: var(--color-primary, #03C1FF);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}
.chat-voice-undo-toast-btn:hover {
  filter: brightness(1.05);
}

/* 음성 입력: 마이크 아이콘 + ON/OFF 스위치 */
.chat-voice-input-wrap {
  flex: 1 1 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-voice-input-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary, #666);
  flex-shrink: 0;
  transition: color 0.2s;
}
.chat-voice-input-mic-active {
  color: #c00;
  animation: voice-input-mic-blink 1s ease-in-out infinite;
}
@keyframes voice-input-mic-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.chat-voice-input-onoff {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg-secondary, #f0f2f5);
}
.chat-voice-input-onoff-option {
  padding: 4px 10px;
  border: none;
  min-width: 32px;
  background: transparent;
  color: var(--color-text-secondary, #666);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.chat-voice-input-onoff-option.active {
  background: var(--color-primary, #03C1FF);
  color: #fff;
}
.chat-voice-input-onoff-option:not(.active):hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-primary, #333);
}

.voice-message-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border: none;
  border-radius: 20px;
  background: #e8e8e8;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
}
.voice-message-btn:hover:not(:disabled) {
  background: #ddd;
  color: #333;
}
.voice-message-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.voice-message-btn-recording {
  background: #fee;
  color: #c00;
  animation: voice-recording-pulse 1s ease-in-out infinite;
}
@keyframes voice-recording-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* 모바일: 메시지 목록 숨기고 요약 7 : 입력 3 레이아웃에서 입력부만 표시 */
@media (max-width: 768px) {
  .chat-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .chat-header {
    flex-shrink: 0;
    padding: 10px 14px;
    min-height: 48px;
    height: auto;
  }

  .chat-messages {
    display: none !important;
  }

  .chat-input-area {
    flex: 1;
    min-height: 0;
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
  }

  .chat-input {
    font-size: 16px; /* iOS 줌 방지 */
    padding: 8px 12px;
  }

  .chat-translate-row-above {
    margin-bottom: 4px;
  }
}

.chat-translate-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

/* 변환 언어를 메시지 입력부 위에 둘 때: 전용 한 줄 + 팝업은 위로 열림. 너비는 내용만큼만 (입력 언어 선택부 축소) */
.chat-translate-row-above {
  margin-bottom: 6px;
  width: max-content;
  max-width: 100%;
  flex-shrink: 0;
}
.chat-translate-row-above .chat-translate-popup {
  bottom: 100%;
  top: auto;
  margin-bottom: 4px;
  margin-top: 0;
}

.chat-translate-row-mobile {
  flex-wrap: wrap;
}

.chat-translate-row-mobile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #65676b;
  background: #f0f2f5;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}

.chat-translate-row-mobile-trigger svg {
  width: 18px;
  height: 18px;
}

.chat-translate-row-mobile-close {
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #65676b;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: right;
}

.chat-translate-label {
  font-size: 11px;
  color: #65676b;
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-translate-arrow {
  font-size: 11px;
  color: #65676b;
  margin: 0 2px;
  font-weight: 600;
}

/* 변환 언어 선택부 래퍼 — 업그레이드 배지를 우측 상단에 겹치게 배치 */
.chat-translate-target-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chat-translate-trigger-wrap {
  position: relative;
}

.chat-translate-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  min-width: 72px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: #050505;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.chat-translate-trigger:hover {
  background: #f0f2f5;
  border-color: #ccd0d5;
}

.chat-translate-trigger-disabled,
.chat-translate-trigger:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* 변환언어 선택부 우측 상단에 겹치는 Upgrade 배지 */
.chat-translate-plan-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #B706D2;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(183, 6, 210, 0.4);
  border-radius: 4px;
  line-height: 1;
  cursor: help;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  z-index: 2;
}
.chat-translate-plan-badge:hover {
  border-color: rgba(183, 6, 210, 0.7);
  background: rgba(255, 255, 255, 1);
}

.chat-translate-trigger-arrow {
  font-size: 10px;
  opacity: 0.7;
}

.chat-translate-default-badge {
  font-size: 0.9em;
  opacity: 0.85;
  color: #65676b;
}

.chat-translate-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.chat-translate-popup {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 4px;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  padding: 6px 0;
}

.chat-translate-popup-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  text-align: left;
  border: none;
  background: transparent;
  color: #050505;
  cursor: pointer;
  transition: background 0.15s;
}

.chat-translate-popup-item:hover {
  background: #f0f2f5;
}

.chat-translate-popup-item.active {
  background: #e7f5ff;
  color: #03C1FF;
  font-weight: 600;
}

.chat-translate-popup-default {
  font-size: 0.9em;
  opacity: 0.85;
  color: #65676b;
}

.message-original-content {
  margin-top: 6px;
  font-size: 0.7em;
  line-height: 1.4;
  color: #65676b;
  padding: 4px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.send-button {
  padding: 12px 26px;
  min-width: 92px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  white-space: nowrap;
  box-shadow: var(--shadow-md), 0 2px 8px rgba(3, 193, 255, 0.25);
}

.send-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, #028fc7 100%);
  box-shadow: var(--shadow-lg), 0 4px 12px rgba(3, 193, 255, 0.35);
  transform: translateY(-2px);
}

.send-button:disabled {
  background: var(--color-border);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 모바일: 전송 버튼 아이콘만 (공간 절약) */
.send-button-icon-only {
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.send-button-icon-only svg {
  width: 22px;
  height: 22px;
}
.send-button-icon-only .send-button-text {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 60px;
  text-overflow: ellipsis;
}

/* 모바일: 요약 버튼 아이콘만 */
.chat-summary-btn-icon-only {
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-summary-btn-icon-only svg {
  width: 22px;
  height: 22px;
}

/* 이미지 표시 (원본과 동일 크기로 통일) */
.message-image {
  margin: 8px 0;
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
}

.message-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.message-image-fixed-size img {
  max-width: 280px;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.message-image-clickable {
  cursor: pointer;
}

.message-image-clickable:hover {
  opacity: 0.92;
}

/* 음성 메시지 재생기 */
.message-voice {
  margin: 8px 0;
  max-width: 100%;
}
.message-voice audio {
  max-width: 100%;
  height: 36px;
  outline: none;
}

/* 채팅창 이미지 수정 처리 중 플레이스홀더 */
.message-image-edit-placeholder {
  margin-top: 8px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #e7f3ff 0%, #b3e5fc 100%);
  border: 1px solid #03C1FF;
  border-radius: 12px;
}

.message-image-edit-placeholder-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: #0277bd;
  font-weight: 500;
}

.message-image-edit-placeholder-request {
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #028fc7;
  font-weight: 600;
  word-break: break-word;
}

.message-image-edit-placeholder-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-image-edit-placeholder-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(3, 193, 255, 0.4);
  border-top-color: #03C1FF;
  border-radius: 50%;
  animation: image-edit-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.message-image-edit-placeholder-hint {
  width: 100%;
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #02a8e0;
  font-weight: 400;
}

/* 스프레드시트 표시 */
.message-spreadsheet {
  margin: 8px 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-bg-primary);
  overflow: hidden;
}

.spreadsheet-preview {
  padding: 12px;
  max-height: 300px;
  overflow: auto;
}

.spreadsheet-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.spreadsheet-preview-table td {
  border: 1px solid var(--color-border);
  padding: 6px 8px;
  text-align: left;
  background-color: var(--color-bg-primary);
}

.spreadsheet-preview-table tr:first-child td {
  background-color: #f8f9fa;
  font-weight: 600;
}

.spreadsheet-more {
  padding: 8px;
  text-align: center;
  color: #666;
  font-size: 12px;
  background-color: #f8f9fa;
}

.btn-edit-spreadsheet {
  width: 100%;
  padding: 8px;
  background-color: #03C1FF;
  color: white;
  border: none;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-edit-spreadsheet:hover {
  background-color: #02a8e0;
}

/* 붙여넣기 미리보기 */
.paste-preview {
  display: flex;
  gap: 8px;
  padding: 8px;
  background-color: #e7f3ff;
  border: 1px solid rgba(3, 193, 255, 0.35);
  border-radius: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.paste-image-preview {
  position: relative;
  display: inline-block;
}

.paste-image-preview img {
  max-width: 100px;
  max-height: 100px;
  border-radius: 4px;
}

.paste-image-preview button,
.paste-spreadsheet-preview button {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #B706D2;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paste-spreadsheet-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: #e7f3ff;
  border-radius: 6px;
  font-size: 13px;
  position: relative;
}

.paste-spreadsheet-preview button {
  position: static;
  background: #B706D2;
  color: white;
  border: none;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 12px;
}

/* On Air 종료 후 음성 파일 저장 여부 모달 */
.voice-save-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.voice-save-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.voice-save-modal-text {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}
.voice-save-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.voice-save-modal-btn {
  padding: 8px 16px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #333;
  cursor: pointer;
}
.voice-save-modal-btn:hover {
  background: #f5f5f5;
}
.voice-save-modal-btn.primary {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}
.voice-save-modal-btn.primary:hover {
  background: #166fe5;
}
.spreadsheet-editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;
}

.spreadsheet-editor-modal {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.spreadsheet-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e6eb;
}

.spreadsheet-editor-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.spreadsheet-editor-actions {
  display: flex;
  gap: 8px;
}

.btn-add-row,
.btn-add-col {
  padding: 6px 12px;
  background-color: #03C1FF;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.btn-add-row:hover,
.btn-add-col:hover {
  background-color: #02a8e0;
}

.btn-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.btn-close:hover {
  background-color: #f0f2f5;
}

.spreadsheet-editor-content {
  overflow: auto;
  max-height: 60vh;
  margin-bottom: 20px;
}

.spreadsheet-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e4e6eb;
}

.spreadsheet-table td {
  border: 1px solid #e4e6eb;
  padding: 0;
  position: relative;
  min-width: 120px;
}

.row-controls {
  width: 40px;
  text-align: center;
  background-color: #f8f9fa;
}

.btn-delete-row,
.btn-delete-col {
  background: #B706D2;
  color: white;
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 10;
}

.btn-delete-row {
  left: 2px;
  right: auto;
}

.btn-delete-row:hover,
.btn-delete-col:hover {
  background: #9a05b3;
}

.spreadsheet-cell {
  width: 100%;
  padding: 8px;
  border: none;
  font-size: 14px;
  box-sizing: border-box;
}

.spreadsheet-cell:focus {
  outline: 2px solid #03C1FF;
  outline-offset: -2px;
}

.spreadsheet-cell[readonly] {
  background-color: #f8f9fa;
  cursor: default;
}

.spreadsheet-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e4e6eb;
}

.btn-cancel,
.btn-save {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.btn-cancel {
  background-color: #f0f2f5;
  color: #666;
}

.btn-cancel:hover {
  background-color: #e4e6eb;
}

.btn-save {
  background-color: #03C1FF;
  color: white;
}

.btn-save:hover:not(:disabled) {
  background-color: #02a8e0;
}

.btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.sidebar {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 100%;
  background-color: var(--color-bg-primary);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: 999;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
}

/* 사이드바 닫혀 있을 때: 연락처 패널 열기 탭 */
.sidebar-closed-tab {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background-color: var(--color-bg-tertiary);
  border-left: 1px solid var(--color-border);
  box-sizing: border-box;
}
.sidebar-open-tab-btn {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), color var(--transition-base);
  flex: 1;
}
.sidebar-open-tab-btn:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.sidebar-open-tab-btn:active {
  background-color: var(--color-border-dark);
}

.sidebar-header {
  padding: var(--section-header-padding);
  border-bottom: var(--section-header-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: var(--color-bg-primary);
  height: var(--section-header-height);
  box-sizing: border-box;
  box-shadow: var(--section-header-shadow);
  z-index: 10;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  overflow: visible;
}

.sidebar-header-icon {
  font-size: 18px;
  color: var(--color-text-secondary);
  margin-right: var(--spacing-sm);
  flex-shrink: 0;
  line-height: 1;
}

.sidebar-tabs {
  display: flex;
  gap: var(--spacing-xs);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sidebar-tabs::-webkit-scrollbar {
  display: none;
}

.sidebar-tabs button {
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-base);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.sidebar-tabs button:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.sidebar-tabs button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--color-bg-accent-subtle);
  font-weight: 600;
}

.close-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: var(--spacing-xs);
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  touch-action: manipulation;
}

.close-btn:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.sidebar-content {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  overflow-y: auto;
  min-height: 0;
}

.sidebar-footer {
  padding: 15px;
  border-top: 1px solid #e4e6eb;
  background-color: #fafafa;
  flex-shrink: 0;
}

.sidebar-footer-demo-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sidebar-footer-demo-buttons .test-btn {
  flex: 1;
  min-width: 140px;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.35;
  text-align: center;
}

/* 모바일: 푸터·테스트 버튼 영역 축소 → 대화 목록이 잘 보이도록 */
@media (max-width: 768px) {
  .sidebar-footer {
    padding: 10px 12px;
    border-top: 1px solid #e4e6eb;
  }

  .sidebar-footer-demo-buttons {
    gap: 6px;
  }

  .sidebar-footer-demo-buttons .test-btn {
    min-width: 0;
  }

  .sidebar-content {
    padding: 10px 12px;
  }
}

/* 데모 데이터 표시 뱃지 (연락처·대화·그룹 목록, 데모데이터 모두 삭제 대상 표시) */
.demo-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: #666;
  background-color: #e8e8e8;
  border-radius: 4px;
  vertical-align: middle;
}

.sidebar-footer-demo-lang-hint {
  margin: 8px 0 0 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.3;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.add-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px dashed #ddd;
  background-color: #f9f9f9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.2s;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.35;
}

.add-btn:hover {
  background-color: #f0f0f0;
  border-color: #999;
}

/* 찾기 + 추가 버튼 한 줄 (7:3 비율) */
.search-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: stretch;
}

.search-add-row .search-add-search {
  flex: 7;
  min-width: 0;
  margin-bottom: 0;
}

.search-add-row .add-btn-in-row {
  flex: 3;
  min-width: 88px;
  width: auto;
  margin-bottom: 0;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.35;
}

.contact-search-wrap {
  margin-bottom: 12px;
}

.contact-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: #f9f9f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
  transition: border-color 0.2s, background-color 0.2s;
}

.contact-search-input::placeholder {
  color: #999;
}

.contact-search-input:focus {
  outline: none;
  border-color: #03C1FF;
  background-color: #fff;
}

.list-item {
  padding: 14px;
  margin-bottom: 6px;
  background-color: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

/* 사용자 리스트 아이템: 좌측 사진, 우측 이름·직함 등, 점3개 버튼 */
.list-item.contact-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  margin-bottom: 0;
}

.contact-item-avatar {
  flex-shrink: 0;
}

.contact-item-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.contact-item-avatar-default {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}

.contact-item-body {
  flex: 1;
  min-width: 0;
}

.contact-item-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  margin-bottom: 2px;
}

.contact-item-line1 {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-item-line2 {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.contact-item-line2-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* SNS 아이콘 (대화방 이름·연락처 이름 앞) */
.sidebar-sns-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.sidebar-sns-icon-whatsapp { color: #25D366; }
.sidebar-sns-icon-wechat { color: #09BB07; }
.sidebar-sns-icon-messenger { color: #0084FF; }
.sidebar-sns-icon-telegram { color: #0088cc; }
.sidebar-sns-icon-snapchat { color: #FFFC00; }
.sidebar-sns-icon-line { color: #00B900; }
.sidebar-sns-icon-discord { color: #5865F2; }
.sidebar-sns-icon-slack { color: #4A154B; }
.sidebar-sns-icon-kakao { color: #3C1E1E; }
.sidebar-sns-icon svg {
  display: block;
}
.list-item-name-row .sidebar-sns-icon {
  flex-shrink: 0;
}

.contact-item-meta {
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-item-menu-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: #666;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.contact-item-menu-btn:hover {
  background: #f0f0f0;
  color: #333;
}

.list-item:hover {
  background-color: #f8f9fa;
  border-color: #03C1FF;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

.list-item.selected {
  background-color: #e7f3ff;
  border-color: #03C1FF;
  border-width: 2px;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

.list-item.selected:hover {
  background-color: #d6ebff;
}

.list-item-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  min-width: 0;
}

.list-item-name {
  font-weight: 600;
  color: #333;
  font-size: 15px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-list-item-voice-icon {
  flex-shrink: 0;
  color: #03C1FF;
  opacity: 0.9;
}

.chat-unread-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #03C1FF;
  border-radius: 10px;
  line-height: 1;
}

.list-item-phone {
  font-size: 12px;
  color: #666;
}

.list-item-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.list-item-members {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.list-item-preview {
  font-size: 13px;
  color: #666;
  margin: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.group-item {
  background-color: #fafafa;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.group-expand-icon {
  font-size: 10px;
  color: #666;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.group-members-list {
  background-color: #ffffff;
  border-left: 3px solid var(--color-primary);
  padding-left: 12px;
  margin-left: 16px;
  margin-top: 4px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.group-member-item {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.group-member-item:last-child {
  border-bottom: none;
}

.member-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.member-phone {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-2xl);
  color: var(--color-text-secondary);
  min-height: 200px;
}

.loading .loading-spinner {
  margin-bottom: var(--spacing-md);
}

.empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  color: var(--color-text-tertiary);
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.empty-list-icon {
  font-size: clamp(36px, 4vw, 48px);
  margin-bottom: 16px;
  opacity: 0.5;
  flex-shrink: 0;
}

.empty-list-title {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.empty-list p {
  margin: 4px 0;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.5;
  color: #666;
  max-width: 90%;
}

/* 신규 대화방: 사용자 선택 안내 */
.new-chat-select-hint {
  margin: 0 0 12px 0;
  padding: 10px 12px;
  font-size: 13px;
  color: #02a8e0;
  background: #e8f4ff;
  border-radius: 8px;
  text-align: center;
}

/* 음성 요약 대화방 선택 안내 (붉은색 깜빡임) */
.voice-summary-select-hint {
  margin: 0 0 15px 0;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #c00;
  text-align: center;
  animation: voice-summary-blink 1s ease-in-out infinite;
}

@keyframes voice-summary-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* 대화방 추가 선택 모달 */
.add-chat-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.add-chat-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.add-chat-modal-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.add-chat-modal-desc {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #666;
}

.add-contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.add-contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.add-contact-label {
  font-size: 13px;
  color: #444;
}

.add-contact-input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
}

.add-contact-input:focus {
  outline: none;
  border-color: #03C1FF;
}

.add-chat-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.add-chat-modal-btn {
  padding: 12px 16px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.add-chat-modal-btn:hover {
  background: #f0f0f0;
  border-color: #ccc;
}

.add-chat-modal-btn.primary {
  background: #03C1FF;
  border-color: #03C1FF;
  color: #fff;
}

.add-chat-modal-btn.primary:hover {
  background: #02a8e0;
  border-color: #02a8e0;
}

.add-chat-modal-btn.cancel {
  background: #fff;
  color: #666;
}

/* 연락처 추가: 일반/연동 메신저 섹션 박스 + 타입별 폼 */
.add-contact-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.add-contact-section {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 14px 16px;
  background: #fafafa;
}

.add-contact-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.add-contact-section .add-contact-type-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.add-contact-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  min-width: 72px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.add-contact-type-btn:hover {
  background: #f0f0f0;
  border-color: #ccc;
}

.add-contact-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #555;
}

.add-contact-type-icon-general { color: #333; }
.add-contact-type-icon-phone { color: #0a0; }
.add-contact-type-icon-whatsapp { color: #25D366; }
.add-contact-type-icon-slack { color: #4A154B; }
.add-contact-type-icon-discord { color: #5865F2; }
.add-contact-type-icon-messenger { color: #0084FF; }

.add-contact-type-label {
  font-size: 11px;
  color: #666;
  text-align: center;
  line-height: 1.2;
}

.add-contact-back-type {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 10px;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  border-radius: 6px;
}

.add-contact-back-type:hover {
  background: #f0f0f0;
  color: #333;
}

.add-chat-modal-contact {
  position: relative;
}

.add-contact-form-step {
  position: relative;
  padding-left: 36px;
}

.add-chat-modal-contact .add-contact-form {
  margin-bottom: 16px;
}

/* 대화방 목록 항목 + 점 3개 메뉴 */
.chat-list-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.chat-list-item .list-item-main {
  flex: 1;
  min-width: 0;
}

.chat-item-menu-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: #666;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.chat-item-menu-btn:hover {
  background: #e4e6eb;
  color: #333;
}

.chat-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.chat-menu-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 1001;
  padding: 4px 0;
}

.chat-menu-dropdown button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  min-width: 100%;
  box-sizing: border-box;
}

.chat-menu-dropdown button:hover {
  background: #f0f2f5;
}

/* 대화방 이름 변경 / 대화 저장 / 삭제 확인 모달 */
.sidebar-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  pointer-events: auto;
}

.sidebar-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

.sidebar-modal-content {
  position: relative;
  z-index: 1101;
  pointer-events: auto;
}

.sidebar-modal-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.sidebar-modal-desc {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #666;
}

.sidebar-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  font-size: 14px;
}

.sidebar-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.sidebar-modal-btn {
  padding: 10px 16px;
  min-width: 72px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.sidebar-modal-btn.primary {
  background: #03C1FF;
  border-color: #03C1FF;
  color: #fff;
}

.sidebar-modal-btn.primary:hover {
  background: #02a8e0;
  border-color: #02a8e0;
}

.sidebar-modal-btn.danger {
  background: #B706D2;
  border-color: #B706D2;
  color: #fff;
}

.sidebar-modal-btn.danger:hover {
  background: #9a05b3;
  border-color: #bd2130;
}

.sidebar-modal-btn.cancel {
  background: #fff;
  color: #666;
}

/* 메신저 연동 버튼 (헤더, 연락처 탭 앞 배치) — 한/영 모두 표시되도록 여유 */
.sidebar-sns-connect-btn {
  flex-shrink: 0;
  margin-right: 8px;
  padding: 6px 12px;
  min-width: 100px;
  border: 1px solid #03C1FF;
  background: #03C1FF;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.sidebar-sns-connect-btn:hover {
  background: #02a8e0;
  border-color: #02a8e0;
  color: #fff;
}

/* 메신저 연동 모달 */
.sns-connect-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.sns-connect-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  min-width: 340px;
  max-width: min(420px, 90vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}
.sns-connect-modal-clickable .sns-connect-icons-grid,
.sns-connect-modal-clickable .sns-connect-icon-btn:not(:disabled) {
  pointer-events: auto;
}
.sns-connect-modal-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}
.sns-connect-modal-desc {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #333;
  line-height: 1.55;
}
.sns-connect-modal-desc-sub {
  margin: 0 0 16px 0;
  color: #555;
}
/* 그룹 채팅 미지원 안내 문구 강조 (타사 메신저 연동) */
.sns-connect-group-chat-highlight {
  color: #B706D2;
  font-weight: 500;
}
.sns-connect-group-chat-notice {
  margin-bottom: 12px;
}
.sns-connect-modal-support-wrap {
  margin-bottom: 20px;
}
.sns-connect-modal-support {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  color: #555;
  line-height: 1.55;
  background: #f5f5f5;
  border-radius: 8px;
  border-left: 3px solid #25d366;
}
.sns-connect-modal-support-pre {
  white-space: pre-line;
  border-left-color: #0088cc;
}
.sns-connect-modal-support-line {
  border-left-color: #00B900;
}
.sns-connect-line-add-title {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.sns-connect-line-add-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
}
.sns-connect-line-qr {
  width: 160px;
  height: 160px;
  display: block;
  border-radius: 8px;
}
.sns-connect-line-add-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #00B900;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.2s;
}
.sns-connect-line-add-btn:hover {
  background: #009e00;
  color: #fff;
}
.sns-connect-messenger-code-label {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #555;
}
.sns-connect-messenger-code-box {
  margin-bottom: 16px;
  padding: 14px 20px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  background: #f0f4f8;
  border: 2px dashed #0084ff;
  border-radius: 10px;
  color: #0084ff;
}
.sns-connect-linked-field {
  margin-bottom: 20px;
  text-align: left;
}
.sns-connect-linked-hint {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: #888;
  line-height: 1.4;
}
.sns-connect-linked-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #444;
}
.sns-connect-kakao-botname-wrap {
  margin-bottom: 16px;
}
.sns-connect-kakao-botname-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sns-connect-kakao-botname-text {
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.sns-connect-kakao-copy-btn {
  flex-shrink: 0;
}
.sns-connect-linked-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
}
.sns-connect-linked-input:focus {
  outline: none;
  border-color: #03C1FF;
  box-shadow: 0 0 0 2px rgba(3, 193, 255, 0.2);
}
.sns-connect-linked-input::placeholder {
  color: #999;
}
.sns-connect-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  justify-content: center;
}
.sns-connect-messenger-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sns-connect-disconnect-btn {
  font-size: 10px;
  padding: 3px 6px;
  border: none;
  border-radius: 6px;
  background: #c62828;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  line-height: 1.2;
}
.sns-connect-disconnect-btn:hover:not(:disabled) {
  background: #b71c1c;
}
.sns-connect-disconnect-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.sns-connect-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
}
.sns-connect-icon-wrap.sns-connect-icon-connected .sns-connect-icon-btn {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  filter: grayscale(0.4);
}
.sns-connect-icon-wrap.sns-connect-icon-connected .sns-connect-icon-btn:hover {
  transform: none;
  box-shadow: none;
}
.sns-connect-connected-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.sns-connect-connected-badge-inner {
  display: inline-block;
  transform: rotate(-35deg);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 1px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.5);
  background: linear-gradient(135deg, #03C1FF 0%, #0288d1 100%);
  padding: 2px 12px;
  border-radius: 2px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sns-connect-icon-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sns-connect-icon-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sns-connect-icon-btn .sns-connect-icon-svg {
  width: 32px;
  height: 32px;
}
.sns-connect-whatsapp {
  background: #25D366;
  color: #fff;
}
.sns-connect-whatsapp:hover { background: #20bd5a; }
.sns-connect-telegram { background: #0088cc; color: #fff; }
.sns-connect-telegram:hover { background: #0077b5; }
.sns-connect-line { background: #00B900; color: #fff; }
  .sns-connect-line:hover { background: #009e00; }
  .sns-connect-wechat { background: #09BB07; color: #fff; }
  .sns-connect-wechat:hover { background: #08a806; }
  .sns-connect-wechat:disabled { opacity: 0.7; cursor: not-allowed; }
  .sns-connect-messenger { background: #0084FF; color: #fff; }
  .sns-connect-messenger:hover { background: #0073e6; }
  .sns-connect-messenger:disabled { opacity: 0.7; cursor: not-allowed; }
  .sns-connect-snapchat { background: #FFFC00; color: #333; }
  .sns-connect-snapchat:hover { background: #e6e300; }
  .sns-connect-snapchat:disabled { opacity: 0.7; cursor: not-allowed; }
  .sns-connect-slack { background: #4A154B; color: #fff; }
  .sns-connect-slack:hover { background: #3d1240; }
  .sns-connect-kakao { background: #FEE500; color: #3C1E1E; }
  .sns-connect-kakao:hover { background: #f0d900; }
  .sns-connect-icon-coming-soon .sns-connect-icon-btn { cursor: not-allowed; }
  .sns-connect-coming-soon-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
  }
  .sns-connect-coming-soon-badge-inner {
    display: inline-block;
    transform: rotate(-35deg);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, #78909c 0%, #546e7a 100%);
    padding: 2px 10px;
    border-radius: 2px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .sns-connect-in-progress-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
  }
  .sns-connect-in-progress-badge-inner {
    display: inline-block;
    transform: rotate(-35deg);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    padding: 2px 10px;
    border-radius: 2px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
.sns-connect-icons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sns-connect-back-btn {
  margin: -8px 0 12px 0;
  padding: 4px 0;
  border: none;
  background: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  display: block;
  text-align: left;
}
.sns-connect-back-btn:hover {
  color: #03C1FF;
}
.sns-connect-whatsapp-icon-large {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.sns-connect-whatsapp-icon-large .sns-connect-icon-svg {
  width: 40px;
  height: 40px;
  color: #25D366;
}
.sns-connect-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.sns-connect-modal-btn {
  padding: 10px 16px;
  min-width: 72px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.sns-connect-modal-btn.primary {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}
.sns-connect-modal-btn.primary:hover {
  background: #20bd5a;
  border-color: #20bd5a;
}
.sns-connect-modal-btn.cancel {
  background: #fff;
  color: #666;
}
.sns-connect-modal-btn.cancel:hover {
  background: #f0f0f0;
}
.test-data-button {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.test-data-button .test-btn {
  width: 100%;
}

.test-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.test-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.create-btn {
  background-color: #4CAF50;
  color: white;
}

.create-btn:hover:not(:disabled) {
  background-color: #45a049;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.delete-btn:hover:not(:disabled) {
  background-color: #da190b;
}

.test-message {
  padding: 10px;
  border-radius: 6px;
  font-size: 13px;
  max-width: 250px;
  word-wrap: break-word;
}

.test-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.test-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.data-stats {
  margin-top: 12px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  font-size: 12px;
}

.stats-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  font-size: 13px;
}

.stats-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #e8e8e8;
}

.stats-item:last-child {
  border-bottom: none;
}

.stats-label {
  color: #666;
  font-weight: 500;
}

.stats-value {
  color: #333;
  font-weight: 600;
}

/* 모바일: 버튼 한 줄·통계 축소 → 채팅 목록이 보이도록 */
@media (max-width: 768px) {
  .test-data-button {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .test-data-button .test-btn {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .test-btn {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 40px;
    flex: 1;
    min-width: 0;
  }

  .test-message {
    font-size: 12px;
    padding: 8px;
    max-width: 100%;
    flex-basis: 100%;
    width: 100%;
  }

  .data-stats {
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 11px;
    width: 100%;
    flex-basis: 100%;
  }

  .stats-title {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .stats-item {
    padding: 2px 0;
  }
}
.contact-detail-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.contact-detail-modal {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: 24px;
  min-width: 360px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.contact-detail-modal-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.contact-detail-view {
  margin-bottom: 20px;
}

.contact-detail-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.contact-detail-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.contact-detail-avatar-default {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
}

.contact-detail-dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 14px;
}

.contact-detail-dl dt {
  color: #666;
  font-weight: 500;
}

.contact-detail-dl dd {
  margin: 0;
  color: #333;
}

.contact-detail-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.contact-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-detail-field label {
  font-size: 13px;
  font-weight: 500;
  color: #555;
}

.contact-detail-field input,
.contact-detail-field textarea {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.contact-detail-field textarea {
  resize: vertical;
  min-height: 60px;
}

.contact-detail-photo-edit {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-detail-photo-preview-wrap {
  flex-shrink: 0;
}

.contact-detail-photo-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e0e0e0;
}

.contact-detail-photo-placeholder {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

.contact-detail-photo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-detail-file-label {
  display: inline-block;
  padding: 8px 14px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.contact-detail-file-label:hover {
  background: #e5e5e5;
}

.contact-detail-file-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.contact-detail-btn-text {
  background: none;
  border: none;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.contact-detail-btn-text:hover {
  color: #333;
}

.contact-detail-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.contact-detail-btn {
  padding: 10px 18px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.contact-detail-btn:hover {
  background: #f0f0f0;
  border-color: #ccc;
}

.contact-detail-btn.primary {
  background: #03C1FF;
  border-color: #03C1FF;
  color: #fff;
}

.contact-detail-btn.primary:hover:not(:disabled) {
  background: #02a8e0;
  border-color: #02a8e0;
}

.contact-detail-btn.primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.contact-detail-btn.danger {
  color: #fff;
  background: #c0392b;
  border-color: #c0392b;
}

.contact-detail-btn.danger:hover:not(:disabled) {
  background: #a93226;
  border-color: #a93226;
}
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--app-header-height);
  height: calc(var(--app-header-height) + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
  padding-left: clamp(var(--spacing-md), 2vw, var(--spacing-lg));
  padding-right: clamp(var(--spacing-md), 2vw, var(--spacing-lg));
  padding-bottom: 0;
  background: var(--app-header-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  gap: var(--spacing-sm);
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
  flex-wrap: nowrap;
}
.app-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--app-header-accent-height);
  background: var(--app-header-accent);
  opacity: 1;
}

/* 모바일: 사이드바 오버레이 위에 헤더가 항상 보이도록 → 상단 메뉴·형식 선택 사용 가능 */
@media (max-width: 768px) {
  .app-header {
    z-index: 1100;
  }
}

.app-header-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  margin-right: clamp(6px, 0.8vw, var(--spacing-md));
  padding-right: clamp(6px, 0.8vw, var(--spacing-md));
  border-right: 1px solid var(--color-border);
}

.app-header-logo-img {
  height: clamp(28px, 3.2vw, 35px);
  width: auto;
  display: block;
  object-fit: contain;
}

.header-left {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, var(--spacing-md));
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* 모바일 스타일 뒤로가기 버튼 (로고 앞) */
.header-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}
.header-back-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.header-back-btn:active {
  background: var(--color-bg-hover);
}
.header-back-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.header-right {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, var(--spacing-sm));
  flex-shrink: 1;
  min-width: 0;
  max-width: 52%;
  overflow: hidden;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.usage-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: clamp(2px, 0.3vw, 4px);
  font-size: clamp(10px, 1.2vw, 12px);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.usage-status-label {
  font-weight: 500;
}

.usage-soft-message {
  font-size: clamp(10px, 1.2vw, 12px);
  color: var(--color-warning-dark);
  background: var(--color-warning-light);
  padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1vw, 10px);
  border-radius: var(--radius-md);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-grace-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.usage-grace-message {
  font-size: clamp(10px, 1.2vw, 12px);
  color: var(--color-info-dark);
  background: var(--color-info-light);
  padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1vw, 10px);
  border-radius: var(--radius-md);
  max-width: min(260px, 18vw);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-addon-cta {
  padding: clamp(4px, 0.5vw, 6px) clamp(10px, 1.2vw, 14px);
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.usage-addon-cta:hover {
  background: var(--color-primary-dark);
}

.locale-switcher {
  display: inline-flex;
  align-items: center;
  background: var(--color-bg-secondary);
  border-radius: 999px;
  padding: clamp(2px, 0.4vw, 4px);
  gap: 0;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.locale-switcher-btn {
  padding: clamp(4px, 0.6vw, 6px) clamp(8px, 1vw, 12px);
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.locale-switcher-btn:hover {
  color: var(--color-text-primary);
}

.locale-switcher-btn.active {
  background: var(--color-bg-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* 스마트글라스(Compact) 전용 뷰 토글 버튼 – 안경 아이콘 */
.header-glasses-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  flex-shrink: 0;
}
.header-glasses-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.header-glasses-btn-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.header-glasses-icon {
  width: 22px;
  height: 22px;
  display: block;
}
.header-glasses-btn-mobile {
  width: 100%;
  height: auto;
  padding: 12px 16px;
  justify-content: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.header-glasses-btn-mobile .header-glasses-icon {
  width: 20px;
  height: 20px;
}

.admin-panel-btn {
  padding: clamp(5px, 0.7vw, 8px) clamp(10px, 1.2vw, 16px);
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: clamp(11px, 1.2vw, var(--font-size-sm, 14px));
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-panel-btn:hover {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.email-send-btn {
  padding: 8px 16px;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
  white-space: nowrap;
}

.email-send-btn:hover:not(:disabled) {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.email-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-bg-tertiary);
}

/* FormatSelector 스타일 조정 (헤더 내) */
.app-header .format-selector {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.app-header .format-selector label {
  font-size: clamp(10px, 1.1vw, var(--font-size-xs, 12px));
  margin-right: clamp(2px, 0.3vw, 4px);
}

.app-header .format-selector select {
  padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 10px);
  font-size: clamp(10px, 1.1vw, var(--font-size-xs, 12px));
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .app-header {
    padding-left: calc(var(--spacing-md) + env(safe-area-inset-left, 0));
    padding-right: calc(var(--spacing-md) + env(safe-area-inset-right, 0));
  }
  
  .app-header-logo-link {
    margin-right: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    border-right: none;
  }
  
  .admin-panel-btn,
  .email-send-btn {
    padding: 6px 12px;
    font-size: var(--font-size-xs);
    min-height: 44px;
    min-width: 44px;
  }
  
  .header-left {
    gap: var(--spacing-sm);
    min-width: 0;
  }
  
  .header-back-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }
  
  .usage-status-label {
    display: none;
  }
  
  .usage-soft-message,
  .usage-grace-message {
    max-width: 120px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .locale-switcher-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
  }
}

/* 모바일 슬라이드 메뉴 버튼 (햄버거) */
.header-mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: background var(--transition-base);
}
.header-mobile-menu-btn svg {
  width: 24px;
  height: 24px;
}
.header-mobile-menu-btn:hover {
  background: var(--color-bg-secondary);
}

/* 모바일 슬라이드 메뉴: 백드롭 */
.header-mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1001;
  animation: header-menu-fade 0.2s ease;
}
@keyframes header-menu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 모바일 슬라이드 메뉴: 패널 (오른쪽에서 슬라이드) */
.header-mobile-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  max-width: 100%;
  background: var(--color-bg-primary);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 1002;
  display: flex;
  flex-direction: column;
  animation: header-menu-slide 0.25s ease;
}
@keyframes header-menu-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.header-mobile-menu-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.header-mobile-menu-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.header-mobile-menu-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background var(--transition-base);
}
.header-mobile-menu-close:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.header-mobile-menu-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.header-mobile-menu-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.header-mobile-menu-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.header-mobile-menu-item {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-base);
}
.header-mobile-menu-item:hover {
  background: var(--color-bg-secondary);
}
.header-mobile-menu-usage {
  font-size: 14px;
  color: var(--color-text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.header-mobile-menu-locale {
  align-self: flex-start;
}
.header-mobile-menu-service-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.user-profile {
  position: relative;
  z-index: 10;
  min-width: 0;
  max-width: 100%;
}

.user-profile-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e4e6eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.user-profile-trigger:hover {
  border-color: #c8ccd4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.user-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #03C1FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.user-avatar-placeholder.large {
  width: 64px;
  height: 64px;
  font-size: var(--font-size-xl);
}

.user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.user-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #1c1e21;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.user-info-row .user-plan-badge {
  flex-shrink: 0;
}

.user-company {
  font-size: 11px;
  color: #65676b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  line-height: 1.3;
  font-weight: 500;
}

.user-plan-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #65676b;
  background: #f0f2f5;
  border-radius: 4px;
  line-height: 1.2;
}

.user-dropdown-icon {
  font-size: 10px;
  color: #65676b;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.user-profile-trigger:hover .user-dropdown-icon {
  transform: rotate(180deg);
}

.user-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1499;
  background-color: transparent;
}

.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1500;
  overflow: hidden;
  animation: slideDown var(--transition-base) ease-out;
}

/* body에 포탈로 렌더링된 메뉴: overflow 클리핑 방지, top/right는 인라인으로 지정 */
.user-menu-portal {
  position: fixed;
  left: auto;
  width: 280px;
}

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

.user-menu-header {
  padding: var(--spacing-lg);
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.user-menu-avatar {
  flex-shrink: 0;
}

.user-menu-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.user-menu-info {
  flex: 1;
  min-width: 0;
}

.user-menu-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.user-menu-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  word-break: break-all;
}

.user-menu-company {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.company-icon {
  font-size: 14px;
}

.user-menu-type {
  display: inline-block;
  padding: 2px 8px;
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-top: 4px;
}

.user-menu-plan {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 0 0 0;
  border-top: 1px solid var(--color-border-light);
}

.user-menu-plan-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.user-menu-plan-value {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: #B706D2;
  padding: 2px 6px;
  background: rgba(183, 6, 210, 0.08);
  border-radius: var(--radius-sm);
}

.user-menu-usage {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 0 0 0;
  border-top: 1px solid var(--color-border-light);
}

.user-menu-usage-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.user-menu-usage-value {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.user-menu-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: 0 var(--spacing-md);
}

.user-menu-items {
  padding: var(--spacing-sm) 0;
}

.user-menu-item {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  transition: background-color var(--transition-base);
}

.user-menu-item:hover {
  background-color: var(--color-bg-secondary);
}

.user-menu-item.admin-badge {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-primary-light);
  margin: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

.user-menu-item.logout-btn {
  color: var(--color-danger);
}

.user-menu-item.logout-btn:hover {
  background-color: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.user-menu-item.user-menu-item-withdraw {
  color: var(--color-danger);
}

.user-menu-item.user-menu-item-withdraw:hover {
  background-color: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.admin-icon,
.logout-icon,
.edit-icon,
.service-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.user-menu-section-label {
  padding: 10px var(--spacing-lg) 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-menu-item-service {
  color: var(--color-text-primary);
}

.user-menu-item-service:hover {
  background-color: rgba(3, 193, 255, 0.06);
  color: var(--color-primary);
}

/* 모달 스타일 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  padding: 20px;
  overflow-y: auto;
}

.modal-content {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  margin: auto;
  overflow: hidden;
}

.user-form-modal {
  max-width: 650px;
  min-height: 85vh;
  height: 85vh;
  background: #fff !important;
  isolation: isolate;
}

.user-form-modal .modal-header {
  padding: 28px 36px 0 36px;
  flex-shrink: 0;
}

.user-form-modal .modal-content-body {
  padding: 0 36px 0 36px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* 스크롤 영역 (버튼은 푸터로 이동해서 여기선 흰 배경 강제 없음) */
.user-form-modal .modal-content-body-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}

/* 팝업 맨 아래 고정 푸터: 계정 탈퇴 / 저장 / 취소 */
.user-edit-modal-footer {
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 24px 0;
  margin: 0 -36px 0 -36px;
  padding-left: 36px;
  padding-right: 36px;
  border-top: 1px solid #e4e6eb;
  background: #fff;
}

.user-edit-modal-footer .form-actions-left {
  margin-right: auto;
}

.user-edit-modal-footer .form-actions-right {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.user-form-modal .form-actions {
  margin-bottom: 24px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e6eb;
}

.modal-content-body {
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #050505;
  letter-spacing: -0.3px;
}

.close-modal-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.close-modal-btn:hover {
  background-color: #f0f2f5;
  color: #050505;
}

/* ========== 서비스 모달 (플랜 변경 / 이용안내 / 이용약관) ========== */
.service-modal-overlay {
  z-index: 1600;
}

.service-modal {
  max-width: 440px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.service-modal-wide {
  max-width: 520px;
}

.service-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.service-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.service-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.service-modal-body.service-modal-scroll {
  padding: 24px 28px 28px;
}

.service-modal-desc {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.plan-current-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: rgba(183, 6, 210, 0.08);
  border: 1px solid rgba(183, 6, 210, 0.2);
  border-radius: 12px;
}

.plan-current-label {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.plan-current-value {
  font-size: 15px;
  font-weight: 700;
  color: #B706D2;
}

.plan-list {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
}

.plan-list-item {
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
}

.plan-list-item.current {
  background: rgba(3, 193, 255, 0.06);
  border-color: rgba(3, 193, 255, 0.3);
}

/* 플랜 선택 가능 목록 (일반 사용자) */
.plan-list-selectable {
  margin-bottom: 16px;
}

.plan-list-item-selectable {
  cursor: pointer;
  outline: none;
}

.plan-list-item-selectable:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-dark);
}

.plan-list-item-selectable.selected {
  background: rgba(3, 193, 255, 0.12);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(3, 193, 255, 0.2);
}

.plan-coupon-section {
  margin: 12px 0;
  padding-top: 12px;
  border-top: 1px solid #e8e8e8;
}
.plan-coupon-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}
.plan-coupon-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.plan-coupon-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
}
.plan-coupon-apply-btn {
  flex-shrink: 0;
}
.plan-coupon-error {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: var(--color-danger);
}

.plan-cancel-subscription {
  margin: 12px 0;
  padding-top: 12px;
  border-top: 1px solid #e8e8e8;
}

.plan-cancel-btn {
  background: #fff;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

.plan-cancel-btn:hover:not(:disabled) {
  background: #ffebee;
}

.plan-change-error {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--color-danger);
}

/* 기업 사용자: 플랜 변경 권한 안내 */
.plan-enterprise-notice {
  padding-top: 8px;
}

.plan-enterprise-notice p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.plan-enterprise-notice p:last-of-type {
  margin-bottom: 20px;
}

.plan-enterprise-notice .service-cta-btn {
  margin-top: 4px;
}

.plan-list-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.plan-list-desc {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.service-modal-cta {
  padding-top: 8px;
  border-top: 1px solid var(--color-border-light);
}

.service-modal-cta p {
  margin: 0 0 14px 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.withdraw-warning {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.withdraw-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.withdraw-confirm-btn {
  background-color: var(--color-danger);
  color: #fff;
}

.withdraw-confirm-btn:hover:not(:disabled) {
  background-color: var(--color-danger-dark);
  color: #fff;
}

.service-cta-btn {
  display: inline-block;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #03C1FF 0%, #02a8e0 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.service-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(3, 193, 255, 0.35);
}

.service-modal-footer {
  padding-top: 20px;
  margin-top: 8px;
  border-top: 1px solid var(--color-border-light);
}

/* 이용안내 / 이용약관 섹션 */
.service-modal-guide .service-modal-body {
  padding-bottom: 28px;
}

.guide-section,
.terms-section {
  margin-bottom: 28px;
}

.guide-section:last-of-type,
.terms-section:last-of-type {
  margin-bottom: 0;
}

.terms-modal-full-note {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.terms-full-links {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.terms-full-links a {
  color: #03C1FF;
  text-decoration: none;
}
.terms-full-links a:hover {
  text-decoration: underline;
}

/* 섹션 제목: 왼쪽 포인트 라인만 사용, 박스 없음 */
.guide-section-title,
.terms-article {
  margin: 0 0 12px 0;
  padding-left: 12px;
  border-left: 3px solid var(--color-primary);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.guide-section-lead {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.guide-section-desc {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* 사용량·한도 카드 – 넉넉한 여백, 읽기 편한 라인 */
.guide-section-usage {
  padding: 24px 28px 26px;
  background: linear-gradient(135deg, rgba(3, 193, 255, 0.07) 0%, rgba(3, 193, 255, 0.02) 100%);
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(3, 193, 255, 0.06);
}

.guide-section-usage .guide-section-title {
  margin: 0 0 14px 0;
  padding-left: 12px;
  border-left-color: rgba(3, 193, 255, 0.7);
}

.guide-section-usage .guide-section-desc {
  margin: 0;
  padding: 0 2px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

.guide-usage-addon-title {
  margin-top: 10px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.guide-list-addon-prices {
  margin-top: 8px;
}

.guide-list-addon-prices li {
  font-weight: 500;
}

.guide-usage-addon-fallback {
  margin-top: 8px;
  color: var(--color-text-secondary);
}

.guide-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.guide-list li {
  margin-bottom: 8px;
}

.guide-list li:last-child {
  margin-bottom: 0;
}

.guide-list-features li {
  margin-bottom: 10px;
}

.guide-list-plans {
  margin-top: 4px;
}

.guide-list-plans li {
  margin-bottom: 10px;
}

.guide-list-plans strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.terms-updated {
  margin: 0 0 20px 0;
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.terms-consent-date {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: var(--color-text-tertiary);
}

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

.form-group label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.2px;
}

/* 프로필 사진(아바타) 편집 */
.profile-avatar-edit .profile-avatar-edit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-avatar-edit .profile-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-border-light, #e4e6eb);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-edit .profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-edit .profile-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  background: #03C1FF;
}

.profile-avatar-edit .profile-avatar-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}

.profile-avatar-edit .profile-avatar-url-input {
  width: 100%;
}

.profile-avatar-edit .profile-avatar-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-avatar-edit .profile-avatar-attach-btn {
  padding: 6px 12px;
  font-size: 13px;
  color: #1a1a1a;
  background: #f0f0f0;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
}

.profile-avatar-edit .profile-avatar-attach-btn:hover {
  background: #e5e5e5;
  border-color: #c8ccd4;
}

.profile-avatar-edit .profile-avatar-remove-btn {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--color-danger, #dc3545);
  background: none;
  border: 1px solid var(--color-danger, #dc3545);
  border-radius: 6px;
  cursor: pointer;
}

.profile-avatar-edit .profile-avatar-remove-btn:hover:not(:disabled) {
  background: rgba(220, 53, 69, 0.08);
}

.profile-avatar-edit .profile-avatar-remove-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 13px 18px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.2s;
  box-sizing: border-box;
  background-color: #fff;
  color: #1a1a1a;
}

.form-group input::placeholder {
  color: #9ca3af;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #03C1FF;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
  background-color: #fafbfc;
}

.form-group input.input-readonly,
.form-group input:disabled {
  background-color: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}
.form-group input.input-readonly:focus,
.form-group input:disabled:focus {
  border-color: #d1d5db;
  box-shadow: none;
}

.form-hint {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
  padding-left: 2px;
}

.error-message {
  padding: 14px 16px;
  background-color: #fff5f5;
  border: 1px solid #feb2b2;
  color: #c53030;
  border-radius: 8px;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-message::before {
  content: "⚠️";
  font-size: 16px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding-top: 24px;
}

.form-actions-left {
  margin-right: auto;
}

.form-actions-right {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.submit-btn,
.cancel-btn {
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 100px;
}

.submit-btn {
  background-color: #03C1FF;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.submit-btn:hover:not(:disabled) {
  background-color: #02a8e0;
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
  transform: translateY(-1px);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.cancel-btn {
  background-color: #f8f9fa;
  color: #495057;
  border: 1.5px solid #dee2e6;
}

.cancel-btn:hover {
  background-color: #e9ecef;
  border-color: #ced4da;
}

/* 내 정보 수정 모달: 현재 플랜 (읽기 전용) */
.profile-plan-readonly {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: rgba(183, 6, 210, 0.06);
  border: 1px solid rgba(183, 6, 210, 0.2);
  border-radius: 8px;
}

.profile-plan-label {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.profile-plan-value {
  font-size: 14px;
  font-weight: 600;
  color: #B706D2;
}

.profile-plan-hint {
  width: 100%;
  margin: 0;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* 내 정보 수정: 계정 탈퇴 */
.profile-withdraw-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
}

.profile-withdraw-btn {
  background: none;
  border: none;
  color: var(--color-danger);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.profile-withdraw-btn:hover {
  color: var(--color-danger-dark);
}

/* 내 정보 수정: Save/Cancel과 같은 줄의 계정 탈퇴 버튼 (빨간색) */
.profile-withdraw-btn-inline {
  background-color: var(--color-danger);
  color: #fff;
}

.profile-withdraw-btn-inline:hover {
  background-color: var(--color-danger-dark);
  color: #fff;
}

/* 프로필 탭 */
.profile-tabs {
  display: flex;
  gap: 0;
  margin: 28px 0 0 0;
  padding: 0;
  border-bottom: 1px solid #e4e6eb;
  width: 100%;
}

.profile-tab {
  padding: 14px 28px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: -1px;
  position: relative;
}

.profile-tab:hover {
  color: #03C1FF;
  background-color: rgba(0, 123, 255, 0.05);
}

.profile-tab.active {
  color: #03C1FF;
  border-bottom-color: #03C1FF;
  font-weight: 600;
}

/* 폼 섹션 */
.form-section {
  margin-bottom: 44px;
  padding-top: 8px;
}

.form-section:last-of-type {
  margin-bottom: 28px;
}

.section-title {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 28px 0;
  padding-bottom: 14px;
  border-bottom: 2px solid #e4e6eb;
  letter-spacing: -0.3px;
}

/* 관리자 패널에서의 사용자 프로필 스타일 조정 */
.admin-header-bar .user-profile {
  position: relative;
  top: 0;
  right: 0;
  margin-left: auto;
}

.admin-header-bar .user-profile-trigger {
  min-width: auto;
  padding: 6px 12px;
}

/* 메인 화면에서 사용자 프로필과 관리자 버튼 겹침 방지 */
.app {
  position: relative;
}

.app > .user-profile {
  z-index: 1500;
}

.app > .admin-toggle {
  z-index: 1500;
}

/* 일반 사용자 힌트 스타일 */
.form-group small.form-hint {
  display: block;
  padding: 12px 16px;
  background-color: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1e40af;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 0;
}

/* 모바일에서 사용자 프로필 위치 조정 */
@media (max-width: 768px) {
  .user-profile {
    top: 10px;
    right: 10px;
  }
  
  .user-profile-trigger {
    min-width: 140px;
    padding: 6px 12px;
  }
  
  .user-info {
    display: none; /* 모바일에서는 아바타만 표시 */
  }
  
  .user-menu,
  .user-menu-portal {
    width: min(280px, calc(100vw - 24px));
    max-height: calc(100vh - var(--app-header-height, 60px) - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .user-profile-trigger {
    min-height: 44px;
    min-width: 44px;
  }
  
  .user-form-modal {
    max-width: 95%;
  }
  
  .user-form-modal .modal-header {
    padding: 20px 24px 0 24px;
  }
  
  .user-form-modal .modal-content-body {
    padding: 0 24px 20px 24px;
  }
}
/* 패널 가이드: 단계별 투어 (요약 → 대화 → 연락처) */

.panel-guide-overlay {
  position: fixed;
  top: var(--app-header-height, 60px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  pointer-events: auto;
}

.panel-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.panel-guide-dim-bar {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.panel-guide-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #333;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transition: background 0.15s, transform 0.15s;
}

.panel-guide-close:hover {
  background: #f5f5f5;
  transform: scale(1.08);
}

.panel-guide-close:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.panel-guide-card {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 320px;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  text-align: center;
}


.panel-guide-step {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: #e5e7eb;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 20px;
}

.panel-guide-card-title {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111;
  line-height: 1.35;
}

.panel-guide-card-desc {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  color: #4b5563;
  line-height: 1.55;
}

.panel-guide-btn-next {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

.panel-guide-btn-next:hover {
  background: #1d4ed8;
  transform: scale(1.01);
}

.panel-guide-btn-next:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .panel-guide-overlay {
    top: var(--app-header-height, 60px);
    padding: 16px;
    align-items: flex-start;
    padding-top: var(--app-header-height, 56px);
  }

  .panel-guide-card {
    padding: 20px;
  }

  .panel-guide-card-title {
    font-size: 1rem;
  }

  .panel-guide-card-desc {
    font-size: 0.875rem;
  }
}
.service-menu-wrap {
  position: relative;
  z-index: 10;
}

.service-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.service-menu-trigger:hover {
  border-color: var(--color-primary);
  background: rgba(3, 193, 255, 0.06);
  color: var(--color-primary);
}

.service-menu-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.service-menu-trigger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.service-menu-trigger-icon svg {
  display: block;
}

.service-menu-trigger-label {
  white-space: nowrap;
}

.service-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1499;
  background-color: transparent;
}

.service-menu-dropdown {
  position: fixed;
  left: auto;
  width: 260px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--app-header-height, 60px) - 40px);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1500;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: serviceMenuSlide 0.2s ease-out;
}

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

.service-menu-header {
  padding: 12px var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
}

.service-menu-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.service-menu-items {
  padding: var(--spacing-sm) 0;
}

.service-menu-item {
  width: 100%;
  padding: 10px var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-primary);
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.service-menu-item:hover {
  background: rgba(3, 193, 255, 0.08);
  color: var(--color-primary);
}

.service-menu-item:focus-visible {
  outline: none;
  background: rgba(3, 193, 255, 0.1);
}

.service-menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.service-menu-item:hover .service-menu-item-icon {
  color: inherit;
}

.service-menu-item-icon svg {
  display: block;
}

.service-menu-link.service-menu-item {
  text-decoration: none;
  color: var(--color-text-primary);
}
.service-menu-link.service-menu-item:hover {
  color: var(--color-primary);
}
.format-selector {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 12px);
  min-width: 0;
  flex-shrink: 1;
  flex-wrap: nowrap;
}

.format-selector-label {
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 600;
  color: #65676b;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.format-selector-options {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 8px);
  flex-wrap: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

/* 스마트글라스 토글 스위치: Display 텍스트, 슬라이딩 버튼 크기 확대 */
.format-glasses-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}
/* outline 사용 시 content 박스가 줄지 않아 썸이 트랙 끝까지 정확히 맞음 */
.format-glasses-track {
  display: inline-flex;
  align-items: center;
  width: 92px;
  height: 40px;
  border-radius: 8px;
  border: none;
  outline: 1px solid #e4e6eb;
  outline-offset: 0;
  background-color: #f0f2f5;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.25s ease, outline-color 0.2s ease;
  flex-shrink: 0;
}
.format-glasses-toggle:hover .format-glasses-track {
  background-color: #e4e6eb;
  outline-color: #ccd0d5;
}
.format-glasses-toggle-on .format-glasses-track {
  background: #B706D2;
  outline-color: #B706D2;
}
.format-glasses-toggle-on:hover .format-glasses-track {
  background: #9a0599;
  outline-color: #9a0599;
}
.format-glasses-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 34px;
  margin: 2px 0;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  color: #65676b;
  transition: transform 0.25s ease, color 0.2s ease;
  transform: translateX(0);
  flex-shrink: 0;
}
/* content 92px, 썸 48px → 오른쪽 끝 44px */
.format-glasses-toggle-on .format-glasses-thumb {
  transform: translateX(44px);
  color: #B706D2;
}
.format-glasses-label {
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.format-option {
  padding: clamp(4px, 0.5vw, 7px) clamp(8px, 1vw, 14px);
  border: 1px solid #e4e6eb;
  border-radius: clamp(6px, 0.5vw, 8px);
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 500;
  background-color: #f0f2f5;
  color: #050505;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: visible;
  min-height: clamp(28px, 2.2vw, 34px);
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 배지 없는 버튼은 패딩 통일 */
.format-option:not(.format-option-with-badge) {
  padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 12px);
}

/* 플랜 배지용 컨테이너 (버튼 우측 상단 모서리에 겹쳐 표시) */
.format-option-with-badge {
  position: relative;
  overflow: visible;
}

/* 버튼 우측 상단에 배지 위치 (각 버튼 위에 겹쳐 표시, 잘리지 않도록) */
.format-option-plan-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 12px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #B706D2;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(183, 6, 210, 0.4);
  border-radius: 4px;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  z-index: 1;
  white-space: nowrap;
}

.format-option-disabled-by-plan {
  cursor: not-allowed;
  opacity: 0.92;
  background-color: #f5f6f8;
  border-color: #e8eaed;
}

.format-option-disabled-by-plan:hover {
  background-color: #f5f6f8;
  border-color: #e8eaed;
  opacity: 0.92;
}

.format-option:hover {
  background-color: #e4e6eb;
  border-color: #ccd0d5;
}

.format-option-active {
  background: linear-gradient(135deg, #03C1FF 0%, #02a8e0 100%);
  border-color: #03C1FF;
  color: white;
}

.format-option-active:hover {
  background: linear-gradient(135deg, #02a8e0 0%, #028fc7 100%);
  border-color: #02a8e0;
  color: white;
}

/* 음성 요약 활성 시 일반/이메일/회의록 버튼 비활성화 */
.format-option.format-option-disabled,
.format-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 스타일 버튼과 음성 요약 영역 시각적 구분 */
.format-selector-options .format-option-voice-label {
  margin-left: clamp(2px, 0.3vw, 4px);
  border-left: 1px solid #e4e6eb;
  padding-left: clamp(8px, 1vw, 14px);
}

/* 음성 요약 버튼 (클릭 시 팝업) */
.format-option-voice-label {
  display: inline-flex;
  align-items: center;
  padding: clamp(4px, 0.5vw, 7px) clamp(8px, 1vw, 14px);
  border: 1px solid #e4e6eb;
  border-radius: clamp(6px, 0.5vw, 8px);
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 500;
  background-color: #f0f2f5;
  color: #050505;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  min-height: clamp(28px, 2.2vw, 34px);
  box-sizing: border-box;
  white-space: nowrap;
}

.format-option-voice-label:hover {
  background-color: #e4e6eb;
  border-color: #ccd0d5;
}

/* 음성 요약 버튼 활성(녹색) */
.format-option-voice-label.format-option-voice-active {
  background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
  border-color: #2e7d32;
  color: white;
}

.format-option-voice-label.format-option-voice-active:hover {
  background: linear-gradient(135deg, #388e3c 0%, #1b5e20 100%);
  border-color: #1b5e20;
  color: white;
}

/* On Air 토글 (마이크 아이콘 + On Air 텍스트 + 스위치, 우측 배치) */
.on-air-toggle {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 8px);
  padding: clamp(4px, 0.5vw, 7px) clamp(8px, 1vw, 12px) clamp(4px, 0.5vw, 7px) clamp(10px, 1vw, 14px);
  border: 1px solid #e4e6eb;
  border-radius: clamp(6px, 0.5vw, 8px);
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 500;
  background-color: #f0f2f5;
  color: #050505;
  cursor: pointer;
  transition: all 0.2s;
  min-height: clamp(28px, 2.2vw, 34px);
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
}

.on-air-toggle:hover {
  background-color: #e4e6eb;
  border-color: #ccd0d5;
}

.on-air-toggle-disabled,
.on-air-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.on-air-toggle-disabled:hover,
.on-air-toggle:disabled:hover {
  background-color: #f0f2f5;
  border-color: #e4e6eb;
}

.on-air-toggle.format-option-with-badge {
  overflow: visible;
}

.on-air-toggle-active {
  background: linear-gradient(135deg, #e57373 0%, #ef5350 100%);
  border-color: #e53935;
  color: white;
}

.on-air-toggle-active:hover {
  background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
  border-color: #B706D2;
  color: white;
}

.on-air-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.on-air-icon svg {
  width: 16px;
  height: 16px;
}

.on-air-text {
  flex-shrink: 0;
  margin-right: clamp(4px, 0.6vw, 8px);
}

.on-air-track {
  display: inline-flex;
  align-items: center;
  width: clamp(26px, 2.2vw, 32px);
  height: clamp(14px, 1.2vw, 18px);
  border-radius: clamp(7px, 0.6vw, 9px);
  background-color: rgba(0, 0, 0, 0.15);
  padding: 2px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.on-air-toggle-active .on-air-track {
  background-color: rgba(255, 255, 255, 0.4);
}

.on-air-slider {
  display: block;
  width: clamp(12px, 1vw, 14px);
  height: clamp(12px, 1vw, 14px);
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
  transform: translateX(0);
}

.on-air-slider-on {
  transform: translateX(clamp(12px, 1vw, 14px));
}

/* 마이크 토글 스위치 (스마트글라스 버튼과 동일 스타일) */
.format-mic-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
}

.format-mic-toggle:hover .format-mic-track {
  background-color: #e4e6eb;
  outline-color: #ccd0d5;
}

.format-mic-track {
  display: inline-flex;
  align-items: center;
  width: 56px;
  height: 32px;
  border-radius: 8px;
  border: none;
  outline: 1px solid #e4e6eb;
  outline-offset: 0;
  background-color: #f0f2f5;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.25s ease, outline-color 0.2s ease;
}

.format-mic-toggle-on .format-mic-track {
  background: #03C1FF;
  outline-color: #03C1FF;
}

.format-mic-toggle-on:hover .format-mic-track {
  background: #02a8e0;
  outline-color: #02a8e0;
}

.format-mic-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 26px;
  margin: 2px 0;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  color: #65676b;
  transition: transform 0.25s ease, color 0.2s ease;
  transform: translateX(0);
  flex-shrink: 0;
}

/* content 56px, 썸 24px → 오른쪽 끝 32px */
.format-mic-toggle-on .format-mic-thumb {
  transform: translateX(32px);
  color: #03C1FF;
}

.format-mic-toggle-on:hover .format-mic-thumb {
  color: #02a8e0;
}

/* 요약 패널 좌측 세로 배치: 툴바 전체 폭 사용, 모든 버튼 동일 크기, 토글 잘림 방지 */
.format-selector-vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
  flex: 1;
  overflow: visible;
}
.format-selector-vertical .format-selector-options {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 12px;
  overflow: visible;
  padding-top: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
/* 세로 툴바: 모든 버튼 동일 크기, 좌우 여백 균일(패딩 동일·가운데 정렬) */
.format-selector-vertical .format-selector-options button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #e4e6eb !important;
  border-radius: 8px;
  font-size: 12px !important;
  line-height: 1.2;
  text-align: center !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 버튼 내 텍스트·아이콘 가운데 정렬로 좌우 여백 시각적 균형 */
.format-selector-vertical .format-selector-options button * {
  flex-shrink: 0;
}
.format-selector-vertical .format-selector-options .format-option,
.format-selector-vertical .format-selector-options .format-option-voice-label {
  text-align: center !important;
}
/* On Air·마이크 토글은 내부가 잘리지 않도록 */
.format-selector-vertical .format-selector-options .on-air-toggle,
.format-selector-vertical .format-selector-options .format-mic-toggle {
  overflow: visible;
}
/* 배지 있는 버튼(Compact, Display, 이메일, 회의록, 음성 요약)도 On Air처럼 배지가 잘리지 않도록 */
.format-selector-vertical .format-selector-options button.format-option-with-badge {
  overflow: visible;
}
.format-selector-vertical .format-selector-options .on-air-toggle *,
.format-selector-vertical .format-selector-options .format-mic-toggle * {
  flex-shrink: 0;
}
.format-selector-vertical .format-selector-options .format-option-active {
  border-color: #03C1FF !important;
}
.format-selector-vertical .format-selector-options .on-air-toggle-active {
  border-color: #e53935 !important;
}
.format-selector-vertical .format-selector-options .format-option-voice-label {
  margin-left: 0 !important;
  border-left: none !important;
}
/* 스마트글라스(∞)·마이크: 세로 정렬 시 트랙이 전체를 채우도록, 토글 테두리 제거(트랙 테두리만 사용) */
.format-selector-vertical .format-glasses-toggle,
.format-selector-vertical .format-mic-toggle {
  align-self: stretch !important;
  width: 100% !important;
  min-width: 100% !important;
  min-height: 40px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* 세로 툴바: 트랙이 좌우·상하 끝까지 채워지도록 (테두리 포함 100%) */
.format-selector-vertical .format-glasses-toggle .format-glasses-track,
.format-selector-vertical .format-mic-toggle .format-mic-track {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 40px !important;
  border-radius: 8px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}
.format-selector-vertical .format-glasses-toggle .format-glasses-thumb {
  width: 48px;
  height: calc(100% - 4px);
  margin: 2px 0;
  flex-shrink: 0;
}
.format-selector-vertical .format-glasses-label {
  font-size: 12px;
}
/* 세로 툴바 ON: flex로 썸을 오른쪽 끝까지 밀어서 트랙 끝까지 채움 */
.format-selector-vertical .format-glasses-toggle-on .format-glasses-track {
  justify-content: flex-end !important;
}
.format-selector-vertical .format-glasses-toggle-on .format-glasses-thumb {
  transform: none;
}
.format-selector-vertical .format-mic-toggle .format-mic-thumb {
  width: 24px;
  height: calc(100% - 4px);
  margin: 2px 0;
  flex-shrink: 0;
}
.format-selector-vertical .format-mic-toggle-on .format-mic-track {
  justify-content: flex-end !important;
}
.format-selector-vertical .format-mic-toggle-on .format-mic-thumb {
  transform: none;
}
/* On Air 텍스트 세로 툴바에서도 표시 */
.format-selector-vertical .on-air-toggle .on-air-text {
  display: inline;
  margin-right: 6px;
  font-size: 11px;
}
/* On Air 토글: 오프 시 좌측, ON 시 우측 끝으로 이동(트랙 32px - 패딩 - 슬라이더 12px = 16px) */
.format-selector-vertical .on-air-toggle .on-air-track {
  width: 32px;
  height: 18px;
  justify-content: flex-start;
}
.format-selector-vertical .on-air-slider-on {
  transform: translateX(16px);
}

/* 모바일: 터치 영역 확보 및 공간 절약 */
@media (max-width: 768px) {
  .format-selector {
    gap: 6px;
  }
  .format-selector-label {
    display: none;
  }
  .format-selector-options {
    gap: 6px;
  }
  .format-option,
  .format-option-voice-label,
  .on-air-toggle {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .format-option-with-badge {
    padding: 8px 10px;
  }
  .on-air-text {
    margin-right: 4px;
  }
  .format-glasses-toggle {
    padding: 6px 0;
  }
  .format-glasses-track {
    width: 92px;
    height: 40px;
    border-radius: 8px;
  }
  .format-glasses-thumb {
    width: 48px;
    height: 34px;
    border-radius: 6px;
  }
  .format-glasses-toggle-on .format-glasses-thumb {
    transform: translateX(38px);
  }
  .format-glasses-label {
    font-size: 12px;
  }
}
.addon-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.addon-modal {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  min-width: 320px;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.addon-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #1a1a1a;
}

.addon-modal-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0 0 20px;
}

.addon-purchases-section {
  margin-bottom: 16px;
  padding: 12px;
  background: #f5f9fc;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.addon-purchases-label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.addon-purchase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #555;
  padding: 6px 0;
}

.addon-purchase-row:not(:last-child) {
  border-bottom: 1px solid #e8e8e8;
}

.addon-cancel-purchase-btn {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: #c62828;
  cursor: pointer;
}

.addon-cancel-purchase-btn:hover:not(:disabled) {
  background: #ffebee;
  border-color: #ef9a9a;
}

.addon-cancel-purchase-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.addon-slider-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.addon-option {
  flex: 1;
  min-width: 70px;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.addon-option:hover {
  border-color: #03C1FF;
  background: #f0fbff;
}

.addon-option.active {
  border-color: #03C1FF;
  background: #e7f5ff;
  color: #03C1FF;
}

.addon-recommended {
  font-size: 11px;
  color: #B706D2;
  font-weight: 600;
}

.addon-price-loading,
.addon-price {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #1a1a1a;
}

.addon-extra {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #666;
}

.addon-price-note {
  display: block;
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

.addon-message {
  font-size: 13px;
  margin: 12px 0;
  padding: 8px 12px;
  border-radius: 8px;
}

.addon-message.success {
  background: #e8f5e9;
  color: #2e7d32;
}

.addon-message.error {
  background: #ffebee;
  color: #c62828;
}

.addon-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

.addon-btn-secondary {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}

.addon-btn-primary {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: #03C1FF;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.addon-btn-primary:hover:not(:disabled) {
  background: #02a8e0;
}

.addon-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.resizer {
  background-color: #d1d5db !important;
  cursor: col-resize !important;
  position: relative;
  z-index: 1000 !important;
  transition: background-color 0.2s;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.resizer-horizontal {
  width: 6px !important;
  cursor: col-resize !important;
  margin: 0;
  min-width: 6px !important;
  background-color: #e5e7eb !important;
  height: 100% !important;
  transition: background-color 0.2s ease;
}

.resizer-vertical {
  height: 10px !important;
  cursor: row-resize !important;
  margin: 0;
  min-height: 10px !important;
  background-color: #d1d5db !important;
  width: 100% !important;
}

.resizer:hover {
  background-color: #3b82f6 !important;
  width: 8px !important;
}

.resizer.resizing {
  background-color: #2563eb !important;
  width: 8px !important;
}

.resizer.resizing::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background-color: #03C1FF;
}
.permission-consent-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}

.permission-consent-modal {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  max-width: 420px;
  width: 100%;
  padding: 24px;
  box-shadow: var(--shadow-xl);
}

.permission-consent-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.permission-consent-desc {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.permission-consent-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.permission-consent-item {
  padding: 14px 0;
  border-bottom: 1px solid #e4e6eb;
}

.permission-consent-item:last-child {
  border-bottom: none;
}

.permission-consent-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.permission-consent-item-icon {
  font-size: 18px;
}

.permission-consent-item-label {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

.permission-consent-item-status {
  margin-left: auto;
  font-size: 12px;
  color: #666;
}

.permission-consent-item-status.status-granted {
  color: #0a0;
}

.permission-consent-item-status.status-denied {
  color: #999;
}

.permission-consent-item-desc {
  margin: 0 0 10px;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.permission-consent-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: #888;
  line-height: 1.4;
}

.permission-consent-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e4e6eb;
  background: #f5f5f5;
  color: #333;
}

.permission-consent-btn:hover:not(:disabled) {
  background: #e8e8e8;
}

.permission-consent-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.permission-consent-btn.primary {
  background: #03C1FF;
  border-color: #03C1FF;
  color: #fff;
}

.permission-consent-btn.primary:hover:not(:disabled) {
  background: #02a8e0;
  border-color: #02a8e0;
}

.permission-consent-btn.secondary {
  background: transparent;
  color: #666;
}

.permission-consent-btn.secondary:hover {
  background: #f0f0f0;
}

.permission-consent-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
/* 스마트 글라스: 요약 텍스트 전용 팝업 (네온 테두리, 상·하단 구분 없음, 설정) */
.summary-glasses-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.summary-glasses-popup {
  /* 테두리/폰트/배경/폰트크기는 인라인으로 전달 (디스플레이·메인 공통) */
  --glasses-border-color: #03C1FF;
  --glasses-font-color: #050505;
  --glasses-font-border-color: #000000;
  --glasses-bg: #ffffff;
  --glasses-font-size: 16px;

  position: absolute;
  background: var(--glasses-bg);
  border-radius: 12px;
  min-width: 320px;
  min-height: 220px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  /* 네온 테두리: 요약 패널+상단 패널 박싱, 테두리 색 적용 */
  box-shadow:
    0 0 0 2px var(--glasses-border-color),
    0 0 12px var(--glasses-border-color),
    0 0 24px var(--glasses-border-color),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.summary-glasses-popup-dragging {
  cursor: move;
  user-select: none;
}

.summary-glasses-popup-dragging .summary-glasses-popup-drag-handle {
  cursor: move;
}

.summary-glasses-popup-fullscreen {
  border-radius: 0;
  max-width: none;
  max-height: none;
}

.summary-glasses-popup-drag-handle {
  cursor: move;
}

.summary-glasses-popup-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.15) 50%);
}

.summary-glasses-popup-resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.25) 50%);
}

.summary-glasses-popup-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 18px 20px;
}

/* 상단 패널: 배경·폰트색은 요약 패널과 동일(설정 적용) */
.summary-glasses-popup-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 12px;
  background: var(--glasses-bg);
  color: var(--glasses-font-color);
}

.summary-glasses-popup-title {
  margin: 0;
  font-size: min(var(--glasses-font-size), 24px);
  font-weight: 700;
  color: var(--glasses-font-color);
  -webkit-text-stroke: 1px var(--glasses-font-border-color);
  paint-order: stroke fill;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.summary-glasses-popup-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.summary-glasses-popup-settings-btn,
.summary-glasses-popup-action-btn,
.summary-glasses-popup-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, opacity 0.2s;
  flex-shrink: 0;
}

.summary-glasses-popup-settings-btn:hover,
.summary-glasses-popup-action-btn:hover,
.summary-glasses-popup-close:hover {
  background: rgba(0, 0, 0, 0.06);
  opacity: 0.9;
}

.summary-glasses-popup-close {
  font-size: 22px;
  line-height: 1;
}

.summary-glasses-popup-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--glasses-bg);
}

.summary-glasses-popup-text {
  font-size: var(--glasses-font-size);
  line-height: 1.55;
  color: var(--glasses-font-color);
  -webkit-text-stroke: 1px var(--glasses-font-border-color);
  paint-order: stroke fill;
  white-space: pre-wrap;
  word-break: break-word;
}

.summary-glasses-popup-empty {
  margin: 0;
  font-size: 15px;
  color: var(--glasses-font-color);
  opacity: 0.7;
  text-align: center;
  padding: 24px 0;
}

/* 설정 패널: 팝업 밖 포탈, 화면 안 전부 표시 */
.summary-glasses-popup-settings-backdrop-portal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2001;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
}

/* 설정 패널: 높이 제한 + 본문만 스크롤 (사용자 관점에서 적용 버튼·전체 옵션 노출) */
.summary-glasses-popup-settings-portal {
  position: fixed !important;
  z-index: 2002;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 85vh !important;
  max-height: 85vh !important;
  min-height: 320px !important;
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 24px);
  border-radius: 18px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.summary-glasses-popup-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 600;
  font-size: 15px;
  color: #1c1e21;
  flex-shrink: 0;
  background: #fff;
  letter-spacing: -0.02em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.summary-glasses-popup-settings-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #65676b;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.summary-glasses-popup-settings-close:hover {
  background: #e8eaed;
  color: #1c1e21;
}

.summary-glasses-popup-settings-body {
  padding: 16px 18px 20px;
  overflow-y: scroll !important;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
  min-height: 0 !important;
  max-height: calc(85vh - 120px) !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.summary-glasses-popup-settings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #eef0f2;
}

.summary-glasses-popup-settings-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #4a4d52;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}
.summary-glasses-popup-settings-section .summary-glasses-popup-settings-label:first-child {
  margin-bottom: 4px;
}
/* 색상: 명칭 위, 색 선택 아래, 열로 나열. 하단 여백으로 색 선택기 팝업이 다른 옵션을 가리지 않도록 */
.summary-glasses-popup-settings-colors-cols {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 4px;
}
.summary-glasses-popup-settings-section.summary-glasses-popup-settings-colors {
  margin-bottom: 12px;
}
.summary-glasses-popup-settings-color-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.summary-glasses-popup-settings-color-col .summary-glasses-popup-settings-color-label {
  font-size: 11px;
  font-weight: 500;
  color: #4a4d52;
  text-align: center;
}
.summary-glasses-popup-settings-color-col .summary-glasses-popup-settings-color {
  width: 100%;
  aspect-ratio: 1;
  max-width: 44px;
  max-height: 44px;
  margin: 0 auto;
  border-radius: 8px;
  padding: 3px;
  box-sizing: border-box;
}
.summary-glasses-popup-settings-color-label {
  font-size: 13px;
  color: #4a4d52;
}

.summary-glasses-popup-settings-input {
  padding: 8px 12px;
  border: 1px solid #e4e6eb;
  border-radius: 10px;
  font-size: 13px;
  color: #1c1e21;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.summary-glasses-popup-settings-input::placeholder {
  color: #8a8d91;
}

.summary-glasses-popup-settings-input:focus {
  outline: none;
  border-color: #03C1FF;
  box-shadow: 0 0 0 3px rgba(3, 193, 255, 0.12);
}

/* 폰트 크기 슬라이더 (정수 단위) */
.summary-glasses-popup-settings-font-value {
  font-weight: 600;
  color: #03C1FF;
  margin-left: 4px;
}
.summary-glasses-popup-settings-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e4e6eb;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.summary-glasses-popup-settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #03C1FF 0%, #02a8e0 100%);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(3, 193, 255, 0.4);
}
.summary-glasses-popup-settings-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #03C1FF 0%, #02a8e0 100%);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(3, 193, 255, 0.4);
}


.summary-glasses-popup-settings-color {
  padding: 3px;
  border: 2px solid #e4e6eb;
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.summary-glasses-popup-settings-color:hover {
  border-color: #03C1FF;
  box-shadow: 0 0 0 2px rgba(3, 193, 255, 0.15);
}

.summary-glasses-popup-settings-color:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(3, 193, 255, 0.25);
}

/* ========== 커스텀 색상 선택 팝오버 (적용/취소 버튼 포함) ========== */
.summary-color-picker-wrap {
  position: relative;
  display: inline-block;
}
.summary-color-picker-swatch {
  width: 100%;
  aspect-ratio: 1;
  max-width: 44px;
  max-height: 44px;
  margin: 0 auto;
  border-radius: 10px;
  padding: 0;
  border: 2px solid #e4e6eb;
  cursor: pointer;
  display: block;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.summary-color-picker-swatch:hover {
  border-color: #03C1FF;
  box-shadow: 0 0 0 2px rgba(3, 193, 255, 0.2);
}
.summary-color-picker-popover {
  width: 260px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.summary-color-picker-popover-title {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #1c1e21;
  background: #f8f9fa;
  border-bottom: 1px solid #eef0f2;
}
.summary-color-picker-popover-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.summary-color-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.summary-color-picker-native {
  width: 48px;
  height: 48px;
  padding: 2px;
  border: 2px solid #e4e6eb;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}
.summary-color-picker-native:hover {
  border-color: #03C1FF;
}
.summary-color-picker-hex {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e4e6eb;
  border-radius: 10px;
  font-size: 13px;
  color: #1c1e21;
  font-family: inherit;
}
.summary-color-picker-hex:focus {
  outline: none;
  border-color: #03C1FF;
  box-shadow: 0 0 0 2px rgba(3, 193, 255, 0.15);
}
.summary-color-picker-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.summary-color-picker-btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.summary-color-picker-btn-cancel {
  background: #fff;
  border: 1px solid #e4e6eb;
  color: #1c1e21;
}
.summary-color-picker-btn-cancel:hover {
  background: #f0f2f5;
  border-color: #d8dadf;
}
.summary-color-picker-btn-apply {
  background: linear-gradient(180deg, #03C1FF 0%, #02a8e0 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(3, 193, 255, 0.3);
}
.summary-color-picker-btn-apply:hover {
  background: linear-gradient(180deg, #02a8e0 0%, #028fc7 100%);
  box-shadow: 0 3px 10px rgba(3, 193, 255, 0.4);
}

/* 글자 크기 / 배경 옵션 버튼 */
.summary-glasses-popup-settings-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summary-glasses-popup-settings-opt {
  padding: 6px 12px;
  border: 1px solid #e4e6eb;
  border-radius: 10px;
  background: #fff;
  color: #1c1e21;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.summary-glasses-popup-settings-opt:hover {
  background: #f5f6f8;
  border-color: #d8dadf;
}

.summary-glasses-popup-settings-opt.active {
  background: linear-gradient(180deg, #03C1FF 0%, #02a8e0 100%);
  border-color: #02a8e0;
  color: #fff;
  box-shadow: 0 2px 8px rgba(3, 193, 255, 0.35);
}

.summary-glasses-popup-settings-opt.active:hover {
  background: linear-gradient(180deg, #02a8e0 0%, #028fc7 100%);
  border-color: #028fc7;
}

/* 적용/취소 푸터 */
.summary-glasses-popup-settings-actions {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  gap: 12px;
  padding: 14px 18px 18px;
  margin: 0;
  background: #fff;
  border-top: 1px solid #eef0f2;
  flex-shrink: 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.summary-glasses-popup-settings-btn-apply,
.summary-glasses-popup-settings-btn-cancel {
  flex: 1;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.summary-glasses-popup-settings-btn-apply {
  background: linear-gradient(180deg, #03C1FF 0%, #02a8e0 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(3, 193, 255, 0.3);
}

.summary-glasses-popup-settings-btn-apply:hover {
  background: linear-gradient(180deg, #02a8e0 0%, #028fc7 100%);
  box-shadow: 0 3px 10px rgba(3, 193, 255, 0.4);
}

.summary-glasses-popup-settings-btn-cancel {
  background: #fff;
  border: 1px solid #e4e6eb;
  color: #1c1e21;
}

.summary-glasses-popup-settings-btn-cancel:hover {
  background: #f0f2f5;
  border-color: #d8dadf;
}

/* 외부 디스플레이 수신 전용 페이지 */
.summary-display-receiver {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.summary-display-receiver-error {
  color: #fff;
  font-size: 15px;
  text-align: center;
  max-width: 360px;
}

.summary-display-receiver-popup {
  width: 100%;
  max-width: 720px;
  height: 100%;
  max-height: 80vh;
}

.summary-display-receiver-fullscreen .summary-display-receiver-popup {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.summary-display-receiver-fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  padding: 12px;
  box-sizing: border-box;
}

.summary-display-receiver-badge {
  font-size: 11px;
  color: var(--glasses-font-color);
  opacity: 0.8;
  flex-shrink: 0;
}

/* 디스플레이 창 상단 마이크 버튼: 트랙 숨김, 슬라이더(썸)만 표시. 다른 액션 버튼과 동일 터치 영역(36px) */
.summary-display-receiver-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 8px;
}

.summary-display-receiver-mic-track {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 32px;
  height: 20px;
  border-radius: 10px;
  background: transparent;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

.summary-display-receiver-mic-on .summary-display-receiver-mic-track {
  justify-content: flex-end;
}

.summary-display-receiver-mic-slider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
  color: inherit;
}

.summary-display-receiver-mic:hover .summary-display-receiver-mic-slider {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* 설정: 출력 기기 */
.summary-glasses-popup-settings-output-device .summary-glasses-popup-settings-label {
  margin-bottom: 6px;
}

.summary-glasses-popup-settings-output-hint {
  font-size: 11px;
  color: #65676b;
  line-height: 1.4;
  margin: 0 0 10px 0;
}

.summary-glasses-popup-settings-output-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.summary-glasses-popup-settings-output-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.summary-glasses-popup-settings-output-status {
  font-size: 13px;
  color: #1c1e21;
}

.summary-glasses-popup-settings-btn-output-start,
.summary-glasses-popup-settings-btn-output-stop {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  min-height: 36px;
}

.summary-glasses-popup-settings-btn-output-start {
  background: linear-gradient(180deg, #02a8e0 0%, #028fc7 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(2, 168, 224, 0.35);
}

.summary-glasses-popup-settings-btn-output-start:hover {
  background: linear-gradient(180deg, #0394c9 0%, #0278ad 100%);
  box-shadow: 0 3px 10px rgba(3, 193, 255, 0.4);
}

.summary-glasses-popup-settings-btn-output-stop {
  background: #fff;
  border: 1px solid #e4e6eb;
  color: #1c1e21;
}

.summary-glasses-popup-settings-btn-output-stop:hover {
  background: #f0f2f5;
  border-color: #d8dadf;
}

.summary-glasses-popup-settings-btn-output-cast {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e4e6eb;
  background: #fff;
  color: #1c1e21;
  min-height: 36px;
}

.summary-glasses-popup-settings-btn-output-cast:hover {
  background: #f0f2f5;
  border-color: #d8dadf;
}

/* 디자인 시스템 변수 — 시인성·스타일리시·획기적 변화 */
:root {
  --font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  /* 메인 액센트 (시인성·브랜드 강조) */
  --color-primary: #03C1FF;
  --color-primary-dark: #02a8e0;
  --color-primary-light: #e6fbff;
  --color-primary-subtle: rgba(3, 193, 255, 0.08);
  
  --color-success: #28a745;
  --color-success-dark: #218838;
  --color-success-light: #d4edda;
  
  --color-danger: #B706D2;
  --color-danger-dark: #9a05b3;
  --color-danger-light: #fce4ff;
  
  --color-warning: #f9a825;
  --color-warning-dark: #f57f17;
  --color-warning-light: #fff8e1;
  
  --color-info: #0277bd;
  --color-info-dark: #01579b;
  --color-info-light: #e1f5fe;
  
  /* 텍스트 계층 (시인성 극대화) */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-tertiary: #737373;
  --color-text-disabled: #a3a3a3;
  
  /* 배경·표면 (깊이감) */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fb;
  --color-bg-tertiary: #eef1f5;
  --color-bg-hover: #e8eaef;
  --color-bg-elevated: #ffffff;
  --color-bg-accent-subtle: rgba(3, 193, 255, 0.06);
  
  --color-border: #e2e5ea;
  --color-border-light: #eef0f3;
  --color-border-dark: #c8cdd4;
  --color-overlay: rgba(0, 0, 0, 0.45);
  
  /* 헤더 — 임팩트 */
  --app-header-height: 60px;
  --app-header-accent-height: 3px;
  --app-header-bg: #ffffff;
  --app-header-accent: linear-gradient(90deg, var(--color-primary) 0%, #00c8ff 50%, #03d4b0 100%);

  /* 섹션 헤더 */
  --section-header-border: 1px solid var(--color-border);
  --section-header-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  --section-header-height: 56px;
  --section-header-padding: 14px 20px;
  
  /* 그림자 (깊이·스타일) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  
  /* 타이포 — 시인성·계층 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-display: 22px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.3;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.7;
  
  /* 라운드 — 모던·스타일리시 */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-pill: 9999px;
  --radius-full: 9999px;
  
  --transition-fast: 0.15s ease;
  --transition-base: 0.22s ease;
  --transition-slow: 0.3s ease;
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}
/* 공통 스타일 */
/* 로딩 스피너 */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-bg-tertiary);
  border-top: 4px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* 빈 상태 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  text-align: center;
  color: var(--color-text-tertiary);
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}
.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}
.empty-state-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  line-height: var(--line-height-relaxed);
}
/* 버튼 공통 스타일 */
.btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}
.btn-primary {
  background-color: var(--color-primary);
  color: white;
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-secondary {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-bg-hover);
}
.btn-success {
  background-color: var(--color-success);
  color: white;
}
.btn-success:hover:not(:disabled) {
  background-color: var(--color-success-dark);
}
.btn-danger {
  background-color: var(--color-danger);
  color: white;
}
.btn-danger:hover:not(:disabled) {
  background-color: var(--color-danger-dark);
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* 입력 필드 공통 스타일 */
.input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: all var(--transition-base);
  background-color: var(--color-bg-primary);
}
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.input:disabled {
  background-color: var(--color-bg-tertiary);
  cursor: not-allowed;
}
/* 카드 스타일 */
.card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-md);
}
/* 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-tertiary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-dark);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}
/* 포커스 스타일 */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  animation: fadeIn var(--transition-slow) ease-out;
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.slide-in {
  animation: slideIn var(--transition-slow) ease-out;
}
/* 반응형 디자인 */
/* 모바일/태블릿: 앱·섹션 헤더 높이 유지 (56px) */
@media (max-width: 768px) {
  :root {
    --app-header-height: 56px;
    --section-header-height: 52px;
    --section-header-padding: 12px 16px;
  }
}
/* 태블릿 (768px 이하) - 모바일 채팅 뷰는 App.css에서 요약 패널 숨김 처리 */
@media (max-width: 768px) {
  .summary-panel-wrapper {
    min-width: 280px !important;
    max-width: 100% !important;
  }

  .chat-panel-wrapper {
    min-width: 0 !important;
  }

  .sidebar-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .summary-header {
    padding: 12px 16px;
    flex-wrap: wrap;
  }
  
  .summary-content {
    padding: 20px 16px;
  }
  
  .admin-toggle {
    top: 10px;
    left: 10px;
  }
  
  .admin-panel-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
  
  .modal-content {
    width: 95%;
    max-width: 95%;
    padding: 16px;
  }
  
  .security-form-modal {
    max-width: 95%;
  }
}
/* 모바일 (480px 이하) - 터치 영역 최소 44px 유지 (헤더 버튼 등은 컴포넌트에서 44px 적용) */
@media (max-width: 480px) {
  .summary-header {
    padding: var(--spacing-md) var(--spacing-lg);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
  
  .summary-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .action-btn {
    width: 100%;
  }
  
  .chat-header {
    padding: 12px 16px;
  }
  
  .chat-input-area {
    padding: 12px 16px;
    flex-direction: column;
  }
  
  .send-button {
    width: 100%;
  }
  
  .login-box {
    padding: 24px;
    min-width: 0;
    width: 95%;
    max-width: 95%;
  }
  
  .form-row {
    grid-template-columns: 1fr !important;
  }
}
/* 작은 화면 (1024px 이하) */
@media (max-width: 1024px) {
  .summary-panel-wrapper {
    min-width: 300px !important;
    max-width: 48% !important;
  }
  
  .chat-panel-wrapper {
    min-width: 280px !important;
  }
  
  .sidebar-wrapper {
    min-width: 240px !important;
    max-width: 38% !important;
  }
}
/* 중간 화면 (1280px 이하) */
@media (max-width: 1280px) {
  .summary-panel-wrapper {
    max-width: 58% !important;
  }
}
/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* 고대비 모드 */
@media (prefers-contrast: high) {
  :root {
    --color-border: #000000;
    --color-text-primary: #000000;
    --color-text-secondary: #000000;
  }
}
/* 다크 모드 준비 (향후 구현) */
@media (prefers-color-scheme: dark) {
  /* 다크 모드 스타일은 추후 구현 */
}
/* 크롤러/봇은 JS 미실행 → index.html의 .crawler-fallback만 보임. 앱 로드 후에는 숨김 */
body.app-loaded .crawler-fallback {
  display: none !important;
}
/* 브랜드 텍스트 색상 (로고 옆 TLDR / Ai) */
.brand-tldr-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  --brand-gap: 0.02em; /* TLDR의 T-L 간격 */
}
.brand-tldr {
  color: #B706D2;
  letter-spacing: var(--brand-gap);
  line-height: 1; /* 말풍선 하단 정렬 시 텍스트 하단과 시각적 일치 */
}
/* chat: T 바로 위에 오도록 첫 줄에 배치, 폰트 30%, 검정 */
.brand-chat {
  font-size: 0.3em;
  font-weight: inherit;
  font-family: inherit;
  color: #000;
  line-height: 1;
  white-space: nowrap;
  order: -1; /* flex에서 맨 위로 */
}
.brand-ai {
  color: #03C1FF;
  line-height: 1; /* TLDR과 같은 기준선(평행) 유지 */
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
html {
  font-family: var(--font-family-base);
  -webkit-text-size-adjust: 100%; /* 모바일 자동 폰트 확대 방지, PC와 동일 크기 유지 */
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  overflow: hidden;
}
#root {
  height: 100vh;
  width: 100%;
}
/* 모바일 포함 입력/버튼도 PC와 동일 폰트 */
input,
textarea,
select,
button {
  font-family: var(--font-family-base);
}
/* Landing page - SaaS style, trustworthy IT service */

.landing {
  height: 100vh;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fafbfc;
  color: #1a1d21;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Header */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.landing-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.landing-logo-img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}

.landing-hero-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.landing-hero-logo {
  height: 56px;
  width: auto;
  display: block;
  object-fit: contain;
}

.landing-footer-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.landing-footer-logo {
  height: 35px;
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.landing-video-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.landing-video {
  width: 320px;
  max-width: min(320px, calc(33vw - 32px));
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  background: #000;
}

.landing-video-op {
  font-size: 2.25rem;
  font-weight: 700;
  color: #03C1FF;
  line-height: 1;
}

@media (max-width: 640px) {
  .landing-video-row {
    gap: 12px 16px;
    padding: 16px;
  }
  .landing-video {
    width: 200px;
    max-width: min(200px, calc(50vw - 24px));
  }
  .landing-video-op {
    font-size: 1.75rem;
  }
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.landing-nav a {
  color: #475569;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

.landing-nav a:hover {
  color: #B706D2;
}

.landing-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}

.landing-nav-back:hover {
  color: #B706D2;
}

.landing-nav-back-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.landing-cta-nav {
  padding: 8px 18px !important;
  background: #B706D2 !important;
  color: #fff !important;
  border-radius: 8px;
  transition: background 0.2s;
}

.landing-cta-nav:hover {
  background: #9a05b3 !important;
  color: #fff !important;
}

/* 언어 선택 (팔 스타일) */
.landing-nav-locale {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 4px;
  gap: 0;
  border: 1px solid #e2e8f0;
}

.landing-locale-btn {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.landing-locale-btn:hover {
  color: #475569;
}

.landing-locale-btn.active {
  background: #fff;
  color: #B706D2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Hero: 상단(헤더)~문구 여백 = 문구~동영상 여백 */
.landing-hero {
  --hero-heading-gap: 24px;
  padding: var(--hero-heading-gap) 24px 100px;
  text-align: center;
}

.landing-hero-inner {
  max-width: min(960px, 94vw);
  margin: 0 auto;
}

.landing-hero-video-wrap {
  margin-top: 0;
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  width: 100%;
  max-width: min(900px, 92vw);
  aspect-ratio: 16 / 9;
  min-height: 240px;
  margin-left: auto;
  margin-right: auto;
  background: #000;
}

.landing-hero-video {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
  display: block;
  vertical-align: top;
}

.landing-hero-badge {
  display: inline-block;
  padding: 18px 28px;
  background: linear-gradient(145deg, #fae8ff 0%, #e9d5ff 50%, #ddd6fe 100%);
  border: 2px solid #c084fc;
  border-radius: 16px;
  margin-bottom: var(--hero-heading-gap, 24px);
  text-align: center;
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.25), 0 0 0 1px rgba(192, 132, 252, 0.2);
}

.landing-hero-badge-main {
  display: block;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #6b21a8;
  text-shadow: 0 0 0 currentColor;
}

.landing-hero-badge-sub {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: 10px;
  line-height: 1.45;
  color: #5b21b6;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.landing-hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #1a1d21;
  margin: 0 0 20px 0;
}

.landing-hero-title strong {
  color: #B706D2;
}

.landing-hero-subtitle {
  font-size: 1.15rem;
  line-height: 1.5;
  color: #64748b;
  margin: 0 0 16px 0;
  font-weight: 500;
}

.landing-hero-desc {
  font-size: 1.1rem;
  line-height: 1.65;
  color: #475569;
  margin-bottom: 36px;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Buttons */
.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}

.landing-btn.primary {
  background: #03C1FF;
  color: #fff;
  box-shadow: 0 2px 8px rgba(3, 193, 255, 0.35);
}

.landing-btn.primary:hover {
  background: #02a8e0;
  box-shadow: 0 4px 12px rgba(3, 193, 255, 0.4);
}

.landing-btn.secondary {
  background: #fff;
  color: #B706D2;
  border: 2px solid #03C1FF;
}

.landing-btn.secondary:hover {
  border-color: #02a8e0;
  color: #9a05b3;
}

.landing-btn.large {
  padding: 18px 36px;
  font-size: 1.05rem;
}

/* Sections */
.landing-section {
  padding: 72px 24px;
}

.landing-section-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.landing-section-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: #1a1d21;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.landing-section-desc {
  text-align: center;
  color: #64748b;
  font-size: 1.05rem;
  margin-bottom: 48px;
}

.landing-section-subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1d21;
  margin-top: 40px;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.landing-summary-method-intro {
  font-size: 1.05rem;
  font-weight: 600;
  color: #B706D2;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #f0e6ff;
  border-left: 4px solid #B706D2;
  border-radius: 0 8px 8px 0;
}

.landing-table-tldr-highlight td {
  font-weight: 600;
  color: #0f172a;
  background: #e6fbff;
}

.landing-table-tldr-highlight td:first-child {
  border-radius: 8px 0 0 0;
}

.landing-table-tldr-note td {
  font-style: italic;
  color: #475569;
}

/* 요약 타입별 시너지 - 섹션 여백·폭 다른 섹션과 통일 */
.landing-summary-synergy {
  padding-top: 72px;
  padding-bottom: 72px;
  padding-left: 24px;
  padding-right: 24px;
}

.landing-summary-synergy .landing-summary-synergy-inner {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}

.landing-summary-synergy .folder-block {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 10px 28px -4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.landing-summary-synergy .folder-tabs {
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 12px 16px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  min-height: 52px;
  align-items: flex-end;
}

.landing-summary-synergy .folder-tab {
  position: relative;
  padding: 14px 24px 16px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 12px 12px 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.6);
  color: #64748b;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  font-family: inherit;
}

.landing-summary-synergy .folder-tab:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #475569;
}

.landing-summary-synergy .folder-tab.selected {
  background: #fff;
  color: #0f172a;
  margin-bottom: -1px;
  padding-bottom: 17px;
  border: 1px solid #e2e8f0;
  border-bottom: 1px solid #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.landing-summary-synergy .folder-tab.selected::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #B706D2 0%, #8b5cf6 100%);
  border-radius: 2px 2px 0 0;
}

.landing-summary-synergy .folder-body {
  padding: 24px 32px 40px;
  min-height: 320px;
  background: #fff;
}

.landing-summary-synergy .folder-panel {
  display: none;
}

.landing-summary-synergy .folder-panel.active {
  display: block;
}

.landing-summary-synergy .folder-panel-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 280px;
  aspect-ratio: 16 / 9;
  max-height: min(70vh, 720px);
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
  font-size: 1rem;
}

.landing-summary-synergy .folder-panel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.landing-summary-synergy .folder-panel-caption {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #B706D2;
  text-align: center;
  letter-spacing: -0.02em;
}

.landing-summary-synergy .folder-panel-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.landing-summary-synergy .folder-panel-gif {
  width: 100%;
  max-width: 864px; /* 720px + 20% */
  height: auto;
  border-radius: 12px;
  object-fit: contain;
}

/* CS page - 폭 720px */
.landing-section-inner.cs-page-inner {
  max-width: 720px;
}
.cs-page-inner .landing-section-title,
.cs-page-inner .landing-section-desc {
  text-align: left;
}
.cs-page-note {
  font-size: 0.95rem;
  color: #64748b;
}
.cs-page-login-link {
  color: #03C1FF;
  font-weight: 500;
  text-decoration: none;
}
.cs-page-login-link:hover {
  text-decoration: underline;
}
.cs-page-contact-box {
  margin-bottom: 28px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.cs-page-contact-heading {
  margin: 0 0 10px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1d21;
}
.cs-page-contact-desc {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.55;
}
.cs-page-contact-email {
  margin: 0;
  font-size: 0.95rem;
}
.cs-page-contact-email a {
  color: #03C1FF;
  font-weight: 500;
  text-decoration: none;
}
.cs-page-contact-email a:hover {
  text-decoration: underline;
}

.cs-page-related {
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
.cs-page-related-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 10px;
}
.cs-page-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.cs-page-related-links a {
  color: #03C1FF;
  font-size: 0.95rem;
  text-decoration: none;
}
.cs-page-related-links a:hover {
  text-decoration: underline;
}

/* CS inquiry form */
.cs-inquiry-form {
  margin-bottom: 28px;
}
.cs-form-group {
  margin-bottom: 18px;
}
.cs-form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1d21;
  margin-bottom: 6px;
}
.cs-form-input,
.cs-form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #1a1d21;
  font-family: inherit;
}
.cs-form-textarea {
  resize: vertical;
  min-height: 240px;
}
.cs-form-input:focus,
.cs-form-textarea:focus {
  outline: none;
  border-color: #03C1FF;
  box-shadow: 0 0 0 2px rgba(3, 193, 255, 0.2);
}
.cs-form-file-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-form-file {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.cs-form-file-status {
  font-size: 0.9rem;
  color: #64748b;
}
.cs-form-file-btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: #03C1FF;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.cs-form-file-btn:hover {
  background: #02a8e0;
}
.cs-form-hint {
  display: block;
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 6px;
}
.cs-form-message {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.95rem;
}
.cs-form-message.success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.cs-form-message.error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.cs-form-submit {
  margin-top: 8px;
}

/* CS login required (non-embedded) */
.cs-login-required {
  margin-bottom: 28px;
  padding: 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.cs-login-required-text {
  margin: 0 0 16px 0;
  font-size: 1rem;
  color: #475569;
}

/* Features grid */
/* 앱 데모 섹션 (Supademo 임베드) */
.landing-demo {
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

.landing-demo-embed-wrap {
  position: relative;
  width: 100%;
  max-width: min(1120px, 94vw);
  margin: 0 auto;
  padding-bottom: 57.91%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.landing-demo-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.landing-features {
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.landing-feature-card {
  padding: 24px;
  background: #fafbfc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.landing-feature-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.landing-feature-icon {
  font-size: 1.75rem;
  margin-bottom: 14px;
}

.landing-feature-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1d21;
  margin-bottom: 10px;
}

.landing-feature-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #475569;
}

/* Compare table */
.landing-compare {
  background: #f8fafc;
}

.landing-table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.landing-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.landing-table th,
.landing-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.landing-table thead th {
  background: #f1f5f9;
  font-weight: 600;
  color: #1a1d21;
}

.landing-table th.highlight,
.landing-table td.highlight {
  background: #e6fbff;
  color: #B706D2;
  font-weight: 600;
}

.landing-table-th-brand {
  display: inline-flex;
  align-items: center;
}

.landing-table-th-logo {
  height: 24px;
  width: auto;
  display: block;
  object-fit: contain;
}

.landing-table tbody tr:last-child td {
  border-bottom: none;
}

.landing-table-note {
  font-size: 0.8rem;
  color: #94a3b8;
  text-align: center;
  margin-top: 12px;
}

/* Strengths: 카드 그리드 */
.landing-strengths {
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
  border-top: 1px solid #e2e8f0;
}

.landing-strengths-os {
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #475569;
  margin: 0 auto 48px;
  max-width: 640px;
  font-weight: 500;
}

.landing-strength-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.landing-strength-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px 22px;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}

.landing-strength-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #B706D2 0%, #03C1FF 100%);
  opacity: 0;
  transition: opacity 0.2s;
}

.landing-strength-card:hover {
  border-color: #c4b5fd;
  box-shadow: 0 8px 24px rgba(183, 6, 210, 0.08);
  transform: translateY(-2px);
}

.landing-strength-card:hover::before {
  opacity: 1;
}

.landing-strength-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fce4ff 0%, #e6fbff 100%);
  color: #B706D2;
  font-size: 1rem;
  margin-bottom: 14px;
  font-weight: 700;
}

.landing-strength-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #B706D2;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.landing-strength-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}


/* Trust */
.landing-trust {
  background: #f8fafc;
}

.landing-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.landing-trust-item {
  text-align: center;
  padding: 28px 20px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.landing-trust-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 12px;
}

.landing-trust-item p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #475569;
}

/* CTA */
.landing-cta {
  padding: 80px 24px;
  background: linear-gradient(135deg, #B706D2 0%, #03C1FF 100%);
  color: #fff;
  text-align: center;
}

.landing-cta-inner h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.landing-cta-inner p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 28px;
}

.landing-cta .landing-btn.primary {
  background: #fff;
  color: #03C1FF;
}

.landing-cta .landing-btn.primary:hover {
  background: #e6fbff;
  color: #02a8e0;
}

/* Footer */
.landing-footer {
  padding: 40px 24px;
  background: #1a1d21;
  color: #94a3b8;
  text-align: center;
}

.landing-footer-inner .landing-footer-logo {
  /* 푸터 로고 */
}

.landing-footer-tagline {
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.landing-footer-copy {
  font-size: 0.8rem;
  color: #64748b;
}

.landing-footer-links a {
  text-decoration: none;
}
.landing-footer-links a:hover {
  text-decoration: underline;
}

/* Legal pages (Terms, Privacy) */
.legal-page-inner .legal-updated {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 24px;
}
.legal-section {
  margin-bottom: 24px;
}
.legal-article {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1d21;
  margin-bottom: 8px;
}
.legal-section p {
  color: #475569;
  line-height: 1.6;
  margin-bottom: 8px;
}
.legal-list {
  margin: 8px 0;
  padding-left: 1.25rem;
  color: #475569;
  line-height: 1.6;
}
.legal-list li {
  margin-bottom: 4px;
}

/* Responsive - 모바일: 폰트·버튼·여백·터치 영역 정리 */
@media (max-width: 768px) {
  .landing-header-inner {
    padding: 10px 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
  }
  .landing-logo-img {
    height: 32px;
  }
  .landing-cta-nav {
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .landing-nav {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .landing-nav a:not(.landing-cta-nav),
  .landing-nav-back {
    display: none;
  }
  .landing-nav-locale .landing-locale-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
  }
  .landing-hero {
    padding: 24px 16px 48px;
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
  }
  .landing-hero-inner {
    max-width: 100%;
  }
  .landing-hero-video-wrap {
    margin-bottom: 20px;
    max-height: 200px;
    min-height: 160px;
    border-radius: 8px;
  }
  .landing-hero-video {
    min-height: 160px;
  }
  .landing-hero-badge {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
  }
  .landing-hero-badge-main {
    font-size: 1.15rem;
  }
  .landing-hero-badge-sub {
    font-size: 0.75rem;
    margin-top: 6px;
  }
  .landing-hero-brand {
    margin-bottom: 12px;
  }
  .landing-hero-logo {
    height: 36px;
  }
  .landing-hero-title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    margin-bottom: 12px;
    line-height: 1.3;
  }
  .landing-hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 10px;
  }
  .landing-hero-desc {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  .landing-hero-actions {
    gap: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .landing-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .landing-btn.large {
    padding: 14px 24px;
    font-size: 1rem;
    min-height: 48px;
  }
  .landing-section {
    padding: 32px 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
  }
  .landing-section-inner {
    max-width: 100%;
  }
  .landing-section-title {
    font-size: 1.35rem;
    margin-bottom: 10px;
  }
  .landing-section-desc {
    font-size: 0.9rem;
    margin-bottom: 28px;
  }
  .landing-feature-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .landing-feature-card {
    padding: 18px;
  }
  .landing-feature-card h3 {
    font-size: 1rem;
  }
  .landing-feature-card p {
    font-size: 0.875rem;
  }
  /* 요약 시너지: 모바일 탭·패널 */
  .landing-summary-synergy .folder-tabs {
    padding: 10px 12px 0;
    gap: 4px;
    flex-wrap: wrap;
  }
  .landing-summary-synergy .folder-tab {
    padding: 10px 14px 12px;
    font-size: 0.875rem;
  }
  .landing-summary-synergy .folder-body {
    padding: 16px 12px 24px;
    min-height: 260px;
  }
  .landing-summary-synergy .folder-panel-caption {
    font-size: 1.15rem;
  }
  .landing-summary-synergy .folder-panel-gif {
    max-width: 100%;
  }
  /* 비교 테이블: 가로 스크롤 터치 친화 */
  .landing-table-wrap {
    margin-left: -4px;
    margin-right: -4px;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  .landing-table {
    min-width: 520px;
    font-size: 0.85rem;
  }
  .landing-table th,
  .landing-table td {
    padding: 10px 12px;
  }
  .landing-table-th-logo {
    height: 20px;
  }
  .landing-section-subtitle {
    font-size: 1.1rem;
    margin-top: 28px;
  }
  .landing-summary-method-intro {
    font-size: 0.9rem;
    padding: 10px 12px;
  }
  /* 푸터: 링크 줄바꿈·터치 영역 */
  .landing-footer {
    padding: 28px 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
  }
  .landing-footer-inner .landing-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: center;
  }
  .landing-footer-inner .landing-footer-links a {
    padding: 6px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .landing-cta {
    padding: 48px 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
  }
  .landing-cta-inner h2 {
    font-size: 1.4rem;
  }
  .landing-demo-embed-wrap {
    margin-left: 8px;
    margin-right: 8px;
    max-width: calc(100% - 16px);
  }
}

@media (max-width: 480px) {
  .landing-hero-logo {
    height: 32px;
  }
  .landing-hero-title {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  }
  .landing-hero-subtitle {
    font-size: 0.9rem;
  }
  .landing-strengths-os {
    font-size: 0.9rem;
    margin-bottom: 24px;
  }
  .landing-btn {
    padding: 12px 18px;
    font-size: 0.9rem;
    min-height: 48px;
  }
  .landing-section-title {
    font-size: 1.25rem;
  }
  .landing-strength-grid,
  .landing-trust-grid {
    gap: 14px;
  }
}
.pricing-section {
  padding: 72px 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.pricing-section-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.pricing-section-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: #1a1d21;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.pricing-section-desc {
  text-align: center;
  color: #64748b;
  font-size: 1.05rem;
  margin-bottom: 48px;
}

/* 4열 3행: 행2에 trial-cards + Enterprise 동시 배치 → 같은 행이라 높이 stretch로 일치 */
.pricing-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
  position: relative;
}

/* Trial 빨간 테두리·배경 (1~3열, 1~3행 덮음) */
.pricing-trial-border {
  grid-column: 1 / 4;
  grid-row: 1 / 4;
  border: 2px solid rgba(185, 28, 28, 0.4);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  z-index: 0;
}

.pricing-trial-header {
  grid-column: 1 / 4;
  grid-row: 1;
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: #991b1b;
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.15) 0%, rgba(185, 28, 28, 0.08) 100%);
  padding: 18px 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid rgba(185, 28, 28, 0.3);
  letter-spacing: -0.03em;
  border-radius: 14px 14px 0 0;
}

.pricing-trial-cards {
  grid-column: 1 / 4;
  grid-row: 2;
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pricing-trial-cards .pricing-grid {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.pricing-trial-footer {
  grid-column: 1 / 4;
  grid-row: 3;
  position: relative;
  z-index: 1;
  padding: 10px 16px 14px;
  margin: 0;
  text-align: left;
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.35;
  border-radius: 0 0 14px 14px;
}

.pricing-grid {
  display: grid;
  gap: 16px;
}

.pricing-trial-cards .pricing-grid-three {
  grid-template-columns: repeat(3, 1fr);
  padding: 0 16px;
  gap: 16px;
}

/* Enterprise: 4열·2행에 배치. Trial 있을 때만 Pro–Enterprise 간격 별도 적용 */
.pricing-enterprise-wrap {
  grid-column: 4;
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pricing-row--with-trial .pricing-enterprise-wrap {
  margin-left: 24px;
}

/* Trial 미노출 시: 4카드 동일 간격 한 줄 */
.pricing-row--no-trial {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}

.pricing-row--no-trial .pricing-enterprise-wrap--no-trial {
  grid-column: auto;
  grid-row: auto;
  margin-left: 0;
}

.pricing-enterprise-wrap .pricing-card {
  width: 100%;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}


@media (max-width: 900px) {
  .pricing-row.pricing-row--with-trial {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .pricing-row--with-trial .pricing-enterprise-wrap {
    margin-left: 0;
    margin-top: 24px;
  }
  .pricing-trial-border {
    grid-row: 1 / 4;
  }
  .pricing-trial-header { grid-row: 1; }
  .pricing-trial-cards { grid-row: 2; }
  .pricing-trial-footer { grid-row: 3; }
  .pricing-enterprise-wrap {
    grid-column: 1;
    grid-row: 4;
  }
  .pricing-trial-cards .pricing-grid-three {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-row--no-trial {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .pricing-trial-cards .pricing-grid-three {
    grid-template-columns: 1fr;
  }
  .pricing-row--no-trial {
    grid-template-columns: 1fr;
  }
}

/* 모든 카드(Basic~Pro, Enterprise) 동일 테두리·그림자·최소 높이 */
.pricing-card {
  background: #fff;
  border: 2px solid rgba(3, 193, 255, 0.4);
  border-radius: 12px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
  min-height: 320px;
  box-shadow: 0 4px 16px rgba(3, 193, 255, 0.12);
}

.pricing-card:hover {
  border-color: #03C1FF;
  box-shadow: 0 8px 28px rgba(3, 193, 255, 0.18);
}

.pricing-card-featured {
  /* 가격/체크/버튼 색만 보라 계열, 테두리·그림자는 .pricing-card와 동일 */
}

.pricing-card-header {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.pricing-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1d21;
  display: block;
  margin-bottom: 6px;
}

.pricing-card-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #03C1FF;
}

.pricing-card-featured .pricing-card-price {
  color: #B706D2;
}

.pricing-card-price-note {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 2px;
  font-weight: 500;
}


.pricing-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  flex: 1;
}

.pricing-card-features li {
  font-size: 0.8rem;
  color: #475569;
  padding: 4px 0;
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}

.pricing-card-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #03C1FF;
  font-weight: 700;
}

.pricing-card-featured .pricing-card-features li::before {
  color: #B706D2;
}

.pricing-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-top: auto;
  border: 2px solid transparent;
}

.pricing-card-cta.primary {
  background: #03C1FF;
  color: #fff;
}

.pricing-card-cta.primary:hover {
  background: #02a8e0;
}

.pricing-card-cta.secondary {
  background: #fff;
  color: #B706D2;
  border-color: #03C1FF;
}

.pricing-card-cta.secondary:hover {
  background: #f0f2f5;
  border-color: #02a8e0;
}
.admin-panel {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  overflow: hidden;
}

.admin-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #ffffff;
  padding: 20px 24px;
  border-bottom: 1px solid #e4e6eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.admin-header h1 {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 600;
  color: #050505;
}

.admin-tabs {
  display: flex;
  gap: 8px;
}

.admin-tabs button {
  padding: 8px 16px;
  border: none;
  background-color: transparent;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.admin-tabs button:hover {
  background-color: #f0f2f5;
}

.admin-tabs button.active {
  background-color: #03C1FF;
  color: white;
}

.admin-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* 대시보드 */
.dashboard-tab {
  width: 100%;
}

.dashboard-section {
  margin-bottom: 32px;
}

.dashboard-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e6eb;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.token-usage-source-badge {
  font-size: 12px;
  font-weight: 500;
  color: #0277bd;
  background: #e3f2fd;
  padding: 2px 8px;
  border-radius: 4px;
}

.token-usage-source-badge.internal {
  color: #666;
  background: #f5f5f5;
}

.token-usage-period {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.token-usage-period label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #555;
}

.token-usage-period input[type="date"] {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.token-usage-period .period-sep {
  color: #888;
  font-weight: 500;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stats-grid .stat-card.full-width {
  grid-column: 1 / -1;
}

.cs-stats-grid .stat-card-new { border-left: 4px solid #03C1FF; }
.cs-stats-grid .stat-card-progress { border-left: 4px solid #ffc107; }
.cs-stats-grid .stat-card-resolved { border-left: 4px solid #28a745; }

.stat-card {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e6eb;
}

.stat-card h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #050505;
  margin-bottom: 12px;
}

.stat-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-item {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

.stat-item.pending {
  background-color: #fff3cd;
  color: #856404;
}

.stat-item.approved {
  background-color: #d4edda;
  color: #155724;
}

.stat-item.rejected {
  background-color: #f8d7da;
  color: #721c24;
}

.stat-item.active {
  background-color: #d1ecf1;
  color: #0c5460;
}

.stat-item.inactive {
  background-color: #e2e3e5;
  color: #383d41;
}

/* 연락처 승인 탭 */
.contacts-tab {
  width: 100%;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tab-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #050505;
}

.refresh-btn,
.create-btn {
  padding: 8px 16px;
  background-color: #03C1FF;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.refresh-btn:hover,
.create-btn:hover {
  background-color: #02a8e0;
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-item {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e6eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-size: 16px;
  font-weight: 600;
  color: #050505;
  margin-bottom: 8px;
}

.contact-phone {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.contact-email {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.contact-notes {
  font-size: 13px;
  color: #999;
  margin-top: 8px;
  font-style: italic;
}

.contact-date {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

.contact-actions {
  display: flex;
  gap: 8px;
}

.approve-btn {
  padding: 8px 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.approve-btn:hover {
  background-color: #218838;
}

.reject-btn {
  padding: 8px 16px;
  background-color: #B706D2;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.reject-btn:hover {
  background-color: #9a05b3;
}

/* CS 접수 탭 (당사 super_admin 전용) */
.cs-inquiries-tab {
  width: 100%;
}

.cs-inquiries-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-inquiry-item {
  background-color: #ffffff;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e6eb;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cs-inquiry-item:hover {
  background-color: #f8fafc;
}

.cs-item-subject {
  font-size: 15px;
  font-weight: 600;
  color: #050505;
  margin-bottom: 6px;
}

.cs-item-meta {
  font-size: 13px;
  color: #666;
}

.cs-detail-view {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e4e6eb;
}

.cs-detail-view .back-btn {
  margin-bottom: 20px;
  padding: 6px 12px;
  background: #f0f2f5;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.cs-detail-view .back-btn:hover {
  background: #e4e6eb;
}

.cs-detail-section p,
.cs-detail-body,
.cs-detail-attachment {
  margin: 12px 0;
  font-size: 14px;
  color: #333;
}

.cs-detail-body .cs-body-text {
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e4e6eb;
}

.cs-detail-attachment a {
  color: #03C1FF;
  text-decoration: none;
}

.cs-detail-attachment a:hover {
  text-decoration: underline;
}

/* 사용자 관리 탭 */
.users-tab {
  width: 100%;
}

.tab-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-text {
  font-size: 13px;
  color: #666;
  font-style: italic;
}

/* 기업 관리 탭 */
.enterprise-management-tab {
  width: 100%;
}

.enterprises-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.enterprise-group {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e6eb;
  overflow: hidden;
}

.enterprise-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  cursor: pointer;
  transition: background-color 0.2s;
}

.enterprise-header:hover {
  background-color: #e9ecef;
}

.enterprise-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.expand-icon {
  font-size: 12px;
  color: #666;
  width: 20px;
  text-align: center;
}

.enterprise-name {
  font-size: 18px;
  font-weight: 600;
  color: #050505;
}

.enterprise-count {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

.enterprise-domain {
  font-size: 13px;
  color: #666;
}

.enterprise-users-table {
  padding: 16px;
  background-color: #fafbfc;
}

.login-type-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
}

.login-type-badge.google {
  background-color: #4285f4;
  color: white;
}

.login-type-badge.direct {
  background-color: #e9ecef;
  color: #495057;
}

.view-btn-small {
  padding: 4px 8px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.view-btn-small:hover {
  background-color: #5a6268;
}

.withdrawn-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #f8d7da;
  color: #721c24;
}

.active-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #d4edda;
  color: #155724;
}

.users-table tbody tr.withdrawn-row {
  background-color: #f8f9fa;
  color: #6c757d;
}

.users-filters {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

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

.filter-group label {
  font-size: 14px;
  font-weight: 500;
  color: #050505;
  white-space: nowrap;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  min-width: 250px;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
}

/* 엑셀 스타일 테이블 */
.users-table-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.users-table thead {
  background-color: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 10;
}

.users-table th {
  padding: 12px 8px;
  text-align: left;
  font-weight: 600;
  color: #050505;
  border-bottom: 2px solid #dee2e6;
  border-right: 1px solid #dee2e6;
  background-color: #f8f9fa;
  position: relative;
}

.users-table th:last-child {
  border-right: none;
}

.table-header-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.table-header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sort-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
  color: #666;
  border-radius: 3px;
  transition: all 0.2s;
}

.sort-btn:hover {
  background-color: #e9ecef;
  color: #03C1FF;
}

.sort-btn.active {
  color: #03C1FF;
  font-weight: bold;
}

.column-filter-input,
.column-filter-select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  box-sizing: border-box;
}

.column-filter-input:focus,
.column-filter-select:focus {
  outline: none;
  border-color: #03C1FF;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.users-table tbody tr {
  border-bottom: 1px solid #e9ecef;
  transition: background-color 0.15s;
}

.users-table tbody tr:hover {
  background-color: #f8f9fa;
}

.users-table tbody tr:nth-child(even) {
  background-color: #fafbfc;
}

.users-table tbody tr:nth-child(even):hover {
  background-color: #f1f3f5;
}

.users-table td {
  padding: 10px 8px;
  border-right: 1px solid #e9ecef;
  vertical-align: middle;
}

.users-table td:last-child {
  border-right: none;
}

.cell-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-badge-inline {
  background-color: #03C1FF;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

.plan-badge-inline {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #B706D2;
  background: rgba(183, 6, 210, 0.1);
  border: 1px solid rgba(183, 6, 210, 0.25);
  border-radius: 3px;
}

.user-type-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

.user-type-badge.individual {
  background-color: #e7f3ff;
  color: #02a8e0;
}

.user-type-badge.enterprise {
  background-color: #fff3cd;
  color: #856404;
}

.admin-status-yes {
  color: #28a745;
  font-weight: bold;
  font-size: 16px;
}

.admin-status-no {
  color: #999;
}

.actions-column {
  width: 180px;
  text-align: center;
}

.table-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}

.edit-btn-small,
.admin-toggle-btn-small,
.delete-btn-small {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
  white-space: nowrap;
}

.edit-btn-small {
  background-color: #03C1FF;
  color: white;
}

.edit-btn-small:hover {
  background-color: #02a8e0;
}

.admin-toggle-btn-small.add {
  background-color: #28a745;
  color: white;
}

.admin-toggle-btn-small.add:hover {
  background-color: #218838;
}

.admin-toggle-btn-small.remove {
  background-color: #ffc107;
  color: #000;
}

.admin-toggle-btn-small.remove:hover {
  background-color: #e0a800;
}

.delete-btn-small {
  background-color: #B706D2;
  color: white;
}

.delete-btn-small:hover {
  background-color: #9a05b3;
}

.empty-table-cell {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-style: italic;
}

.table-footer {
  padding: 12px 16px;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-info {
  font-size: 13px;
  color: #666;
}

/* 기존 스타일 유지 (다른 곳에서 사용할 수 있음) */
.users-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-item {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e6eb;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.user-info {
  flex: 1;
}

.user-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: #050505;
}

.admin-badge {
  background-color: #03C1FF;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

.user-email,
.user-company,
.user-domain {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-date {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.user-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.edit-btn {
  padding: 8px 16px;
  background-color: #03C1FF;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.edit-btn:hover {
  background-color: #02a8e0;
}

.admin-toggle-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.admin-toggle-btn.add {
  background-color: #28a745;
  color: white;
}

.admin-toggle-btn.add:hover {
  background-color: #218838;
}

.admin-toggle-btn.remove {
  background-color: #ffc107;
  color: #000;
}

.admin-toggle-btn.remove:hover {
  background-color: #e0a800;
}

.user-form-modal {
  max-width: 600px;
  width: 90%;
}

.user-edit-form-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.user-edit-form-sections .form-section {
  border: none;
  margin: 0 0 8px 0;
  padding: 0;
}

.user-edit-form-sections .form-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding: 0;
  display: block;
  width: 100%;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}

/* 보안 설정 탭 */
.security-tab {
  width: 100%;
}

.active-settings {
  margin-bottom: 24px;
}

.active-settings h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #050505;
}

.settings-list h3 {
  margin: 24px 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #050505;
}

.settings-card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e6eb;
  margin-bottom: 16px;
}

.settings-card.active {
  border: 2px solid #03C1FF;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.settings-name {
  font-size: 18px;
  font-weight: 600;
  color: #050505;
}

.active-badge {
  padding: 4px 12px;
  background-color: #28a745;
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.settings-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.settings-details {
  font-size: 13px;
  color: #999;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-actions {
  display: flex;
  gap: 8px;
}

.settings-actions button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background-color: white;
  color: #666;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.settings-actions button:hover {
  background-color: #f0f2f5;
}

.settings-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #888;
  margin-top: 8px;
}

.settings-toggle-detail {
  margin: 8px 0;
  padding: 6px 12px;
  font-size: 12px;
  color: #03C1FF;
  background: none;
  border: none;
  cursor: pointer;
}

.settings-detail-tables {
  margin-top: 12px;
  overflow-x: auto;
}

.settings-detail-section {
  margin-bottom: 16px;
}

.settings-detail-section h4 {
  font-size: 13px;
  margin: 0 0 8px 0;
  color: #555;
}

.admin-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.admin-filters-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.admin-filters-row input[type="date"],
.admin-filters-row input[type="month"],
.admin-filters-row select {
  padding: 6px 10px;
  border: 1px solid #e4e6eb;
  border-radius: 6px;
  font-size: 13px;
}

.admin-btn {
  padding: 8px 14px;
  border: 1px solid #e4e6eb;
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.admin-btn.primary {
  background: #03C1FF;
  color: #fff;
  border-color: #03C1FF;
}

.admin-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e4e6eb;
}

.admin-pagination-info {
  font-size: 13px;
  color: #666;
}

.admin-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.admin-pagination button {
  padding: 6px 12px;
  border: 1px solid #e4e6eb;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.admin-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-table .mono {
  font-family: monospace;
  font-size: 12px;
}

/* 모달 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  padding: 20px;
}

.modal-content {
  background-color: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}

.security-form-modal {
  max-width: 900px;
  max-height: 95vh;
  width: 95%;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e4e6eb;
}

.close-modal-btn {
  background: none;
  border: none;
  font-size: 32px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.close-modal-btn:hover {
  background-color: #f0f2f5;
  color: #333;
}

.modal-content h2 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
  color: #050505;
}

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

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #050505;
}

.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.form-group input[type="checkbox"] {
  margin-right: 8px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 2px solid #e4e6eb;
  position: sticky;
  bottom: 0;
  background-color: white;
  z-index: 10;
}

.form-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.form-actions button[type="submit"] {
  background-color: #03C1FF;
  color: white;
}

.form-actions button[type="submit"]:hover {
  background-color: #02a8e0;
}

.form-actions button[type="button"] {
  background-color: #f0f2f5;
  color: #666;
}

.form-actions button[type="button"]:hover {
  background-color: #e4e6eb;
}

/* 보안 설정 폼 스타일 */
.form-section {
  margin-bottom: 20px;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  background-color: #fafbfc;
  overflow: hidden;
}

.section-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #e4e6eb;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

.section-title-bar:hover {
  background-color: #f8f9fa;
}

.section-title-bar h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #050505;
}

.section-toggle {
  font-size: 14px;
  color: #666;
  transition: transform 0.2s;
}

.section-content {
  padding: 20px;
  animation: slideDown 0.2s ease-out;
}

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

.form-section h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #050505;
}

.section-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 12px;
}

/* 가이드 섹션 스타일 */
.guide-section {
  background-color: #e7f3ff;
  border: 2px solid #03C1FF;
}

.guide-section .section-title-bar {
  background-color: #03C1FF;
  color: white;
  padding: 16px 20px;
  cursor: default;
}

.guide-section .section-title-bar h3 {
  color: white;
  margin: 0;
}

.guide-content {
  padding: 20px;
  line-height: 1.8;
}

.guide-content h4 {
  margin: 16px 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #050505;
}

.guide-content h4:first-child {
  margin-top: 0;
}

.guide-content p {
  margin: 8px 0;
  color: #333;
  font-size: 14px;
}

.guide-content ol,
.guide-content ul {
  margin: 12px 0;
  padding-left: 24px;
  color: #333;
  font-size: 14px;
}

.guide-content li {
  margin: 6px 0;
}

.guide-content strong {
  color: #03C1FF;
  font-weight: 600;
}

.guide-note {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  margin-top: 16px;
  border-radius: 4px;
  font-size: 14px;
}

.section-description {
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
  padding: 12px;
  background-color: #f0f7ff;
  border-left: 3px solid #03C1FF;
  border-radius: 4px;
}

.section-description strong {
  color: #02a8e0;
  font-weight: 600;
}

.add-btn {
  padding: 6px 12px;
  background-color: #03C1FF;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-btn:hover {
  background-color: #02a8e0;
}

.empty-section {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
  background-color: #ffffff;
  border-radius: 8px;
  border: 2px dashed #ddd;
  margin: 16px 0;
}

.empty-section::before {
  content: "📋";
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
}

.levels-list,
.rules-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.level-item,
.rule-item {
  padding: 16px;
  background-color: #ffffff;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.level-item:last-child,
.rule-item:last-child {
  margin-bottom: 0;
}

.level-header,
.rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.level-number,
.rule-number {
  font-weight: 600;
  color: #03C1FF;
  font-size: 14px;
}

.remove-btn {
  padding: 4px 12px;
  background-color: #B706D2;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.remove-btn:hover {
  background-color: #9a05b3;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  cursor: pointer;
}

.form-hint {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  font-style: italic;
  display: block;
}

.form-group small.form-hint {
  margin-top: 4px;
  display: block;
}

.submit-btn {
  background-color: #03C1FF;
  color: white;
}

.submit-btn:hover {
  background-color: #02a8e0;
}

.cancel-btn {
  background-color: #f0f2f5;
  color: #666;
}

.cancel-btn:hover {
  background-color: #e4e6eb;
}

.keyword-preview {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  font-style: italic;
}

.delete-btn {
  background-color: #B706D2;
  color: white;
}

.delete-btn:hover {
  background-color: #9a05b3;
}

/* 유사 키워드 스타일 */
.similar-keywords-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.similar-keyword-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e6eb;
}

.similar-keyword-item input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  background-color: white;
}

.add-small-btn,
.remove-small-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-small-btn {
  background-color: #28a745;
  color: white;
}

.add-small-btn:hover {
  background-color: #218838;
}

.remove-small-btn {
  background-color: #B706D2;
  color: white;
}

.remove-small-btn:hover {
  background-color: #9a05b3;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 14px;
}

.loading {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  font-size: 14px;
}

.access-denied {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.access-denied h2 {
  color: #B706D2;
  margin-bottom: 16px;
  font-size: 24px;
}

.access-denied p {
  font-size: 16px;
  color: #888;
}

.admin-placeholder-tab {
  padding: 40px 24px;
}
.admin-placeholder-tab h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 12px;
}
.admin-placeholder-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.admin-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.admin-table th,
.admin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.admin-table th {
  background: #f5f5f5;
  font-weight: 600;
  color: #333;
}
.admin-table tbody tr:hover {
  background: #fafafa;
}
.text-error {
  color: #c00;
}
.text-ok {
  color: #0a0;
}
.system-status-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
}
.system-status-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}
.system-status-list li:last-child {
  border-bottom: none;
}

/* 모바일: 패딩 축소, 테이블 가로 스크롤 */
@media (max-width: 768px) {
  .admin-header {
    padding: 12px 16px;
  }
  .admin-header h1 {
    font-size: 20px;
  }
  .admin-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }
  .admin-tabs button {
    padding: 10px 14px;
    min-height: 44px;
  }
  .admin-content {
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dashboard-section-title {
    font-size: 16px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.service-info-page {
  width: 100%;
  min-width: 0;
  background: #fafbfc;
}

.service-info-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.service-info-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #03C1FF;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.service-info-back-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.service-info-back:hover {
  background: #f0f2f5;
  border-color: #03C1FF;
}

.service-info-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1d21;
}

.service-info-video-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.service-info-video {
  width: 320px;
  max-width: min(320px, calc(33vw - 32px));
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  background: #000;
}

.service-info-video-op {
  font-size: 2.25rem;
  font-weight: 700;
  color: #03C1FF;
  line-height: 1;
}

@media (max-width: 640px) {
  .service-info-video-row {
    gap: 12px 16px;
    padding: 16px;
  }
  .service-info-video {
    width: 200px;
    max-width: min(200px, calc(50vw - 24px));
  }
  .service-info-video-op {
    font-size: 1.75rem;
  }
}

.service-info-main {
  /* 스크롤은 app-content에서 처리되므로 overflow 불필요 */
}

.site-info-section {
  padding-top: 32px;
  padding-bottom: 48px;
}
.site-info-section .landing-section-title {
  margin-bottom: 16px;
}
.site-info-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: center;
}
.site-info-link {
  color: #03C1FF;
  text-decoration: none;
  font-weight: 500;
}
.site-info-link:hover {
  text-decoration: underline;
}

.site-info-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #03C1FF;
  font-weight: 500;
}
.site-info-btn:hover {
  text-decoration: underline;
}