/* =========================
   1. 공통 스타일
========================= */
:root {
  --brand-bg: #292684;
  --brand-bg-sub: #332f96;
  --surface: #ffffff;
  --text-on-dark: #ffffff;
  --text-on-dark-secondary: rgba(255, 255, 255, 0.75);
  --text-on-dark-muted: rgba(255, 255, 255, 0.55);
  --text-primary: #0f172a;
  --text-secondary: #475569;

  --bg-main: var(--brand-bg);
  --bg-sub: var(--brand-bg-sub);
  --card-bg: var(--surface);
  --text-main: var(--text-primary);
  --text-sub: var(--text-secondary);
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eff6ff;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --danger-soft: #fef2f2;
  --call-cta: #dc2626;
  --call-cta-hover: #b91c1c;
  --call-cta-shadow: rgba(220, 38, 38, 0.32);
  --brand-accent: #fbbf24;
  --brand-accent-border: rgba(251, 191, 36, 0.78);
  --brand-accent-glow: rgba(251, 191, 36, 0.28);
  --border: #e5e7eb;
  --surface-muted: #f3f4f6;
  --surface-hover: #eef2ff;
  --header-text: var(--text-on-dark);
  --font-size-body: 15px;
  --font-size-small: 12px;
  --font-size-caption: 13px;
  --font-size-title: 16px;
  --font-size-button: 14px;
  --line-height: 1.45;
  --touch-min: 44px;
  --radius: 8px;
  --radius-card: 12px;
  --shadow-card: 0 4px 20px rgba(17, 24, 39, 0.08);
  --surface-2: #f3f4f6;
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --input-border: #d1d5db;
  --overlay: rgba(17, 24, 39, 0.55);
}

html {
  color-scheme: light only;
  -webkit-text-size-adjust: 100%;
}

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

body:not(.is-landing):not(.is-legal) {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system,
    BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.2px;
  background: linear-gradient(180deg, var(--brand-bg), var(--brand-bg-sub));
  background-attachment: fixed;
  min-height: 100vh;
  padding: 12px;
  color: var(--text-on-dark-secondary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================
   Legal pages (이용약관, 개인정보처리방침 등)
   — 서비스 다크/브랜드 테마 미적용, 항상 밝은 문서형 레이아웃
========================= */
html.is-legal,
body.is-legal {
  color-scheme: light only;
}

body.is-legal {
  background: #ffffff;
  color: #374151;
  padding: 0;
  min-height: 100vh;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system,
    BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.legal-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
}

.legal-page__card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  padding: 40px 32px;
}

.legal-page h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
  margin: 0 0 8px;
}

.legal-page__updated {
  color: #6b7280;
  font-size: 14px;
  margin: 0 0 32px;
}

.legal-page h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  margin: 32px 0 12px;
}

.legal-page p,
.legal-page li {
  font-size: 15px;
  color: #374151;
}

.legal-page ul {
  padding-left: 1.2em;
  margin: 0 0 16px;
}

.legal-page a {
  color: var(--primary, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page a:hover {
  color: var(--primary-hover, #1d4ed8);
}

.legal-page__footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
  .legal-page {
    padding: 48px;
  }

  .legal-page__card {
    padding: 48px;
  }
}

@media (prefers-color-scheme: dark) {
  html.is-legal,
  body.is-legal {
    color-scheme: light only;
  }

  body.is-legal {
    background: #ffffff !important;
    color: #374151 !important;
  }

  body.is-legal .legal-page__card {
    background: #ffffff !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.1);
  }

  body.is-legal .legal-page h1 {
    color: #111827 !important;
  }

  body.is-legal .legal-page h2 {
    color: #1f2937 !important;
  }

  body.is-legal .legal-page p,
  body.is-legal .legal-page li,
  body.is-legal .legal-page__updated {
    color: #374151 !important;
  }

  body.is-legal .legal-page__updated {
    color: #6b7280 !important;
  }
}

body.is-landing {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system,
    BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
  color: var(--text-primary);
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  background: linear-gradient(180deg, var(--brand-bg), var(--brand-bg-sub));
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-landing #platform-module-bar,
body.is-landing #app-service-nav,
body.is-landing #appShell,
body.is-landing #demo-mode-banner,
body.is-landing #view-onboarding,
body.is-landing #module-chinalead {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-demo #landingPage,
body.is-authenticated #landingPage {
  display: none !important;
}

body.is-authenticated:not(.is-demo) #demo-mode-banner {
  display: none !important;
}

body.is-demo #demo-mode-banner {
  display: none !important;
}

body.is-authenticated,
body.is-demo {
  color: var(--text-on-dark-secondary);
}

button,
input,
select,
textarea,
.btn-excel-upload {
  font-family: inherit;
}

button,
.main-tab,
.btn-db-tab,
.btn-month-nav {
  white-space: nowrap;
  word-break: keep-all;
}

.app-container,
.container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 12px;
}

/* =========================
   2. 모바일 기본 스타일 (767px 이하)
========================= */

header,
.app-header {
  color: var(--header-text);
  margin-bottom: 20px;
}

.header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.brand-header {
  text-align: center;
  flex: 1;
  width: 100%;
  max-width: 100%;
}

.brand-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.brand-icon {
  font-size: 34px;
  line-height: 1;
}

.main-tab-icon {
  margin-right: 4px;
}

.brand-en {
  margin: 0;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--text-on-dark);
  white-space: nowrap;
}

.brand-kr {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-on-dark-secondary);
  white-space: nowrap;
}

.brand-sub-en {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-on-dark-muted);
  white-space: nowrap;
}

.brand-sub-kr {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-on-dark-secondary);
  white-space: nowrap;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.user-email-label {
  display: none;
  font-size: var(--font-size-caption);
  color: var(--text-on-dark-secondary);
}

.save-status {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-on-dark);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.save-status.saved {
  background: rgba(22, 163, 74, 0.16);
  color: #dcfce7;
}

.save-status.saving {
  background: rgba(37, 99, 235, 0.16);
  color: #dbeafe;
}

.save-status.failed,
.save-status.offline {
  background: rgba(220, 38, 38, 0.16);
  color: #fee2e2;
}

.save-status.demo {
  background: rgba(251, 191, 36, 0.2);
  color: #fef3c7;
}

@media (max-width: 767px) {
  .save-status {
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* ── 버튼 시스템 ── */
button,
.btn-excel-upload,
a.btn-call {
  font-family: inherit;
  font-size: var(--font-size-button);
  line-height: var(--line-height);
  min-height: var(--touch-min);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.btn-save,
.btn-auth-primary,
.btn-popup-primary,
.btn-start-call,
.btn-save-next,
.btn-profile-save,
.btn-sms-save,
.btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.btn-save:hover,
.btn-auth-primary:hover,
.btn-popup-primary:hover,
.btn-start-call:hover,
.btn-pause-auto-call:hover {
  filter: brightness(1.05);
}

/* ── 자동콜 진행 상태 ── */
.auto-call-progress {
  position: sticky;
  top: 0;
  z-index: 800;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28);
}

.auto-call-progress__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auto-call-progress__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.auto-call-progress__text {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.auto-call-progress__sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  opacity: 0.9;
}

.auto-call-progress__bar-wrap {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.auto-call-progress__bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #fff;
  transition: width 0.25s ease;
}

.auto-call-progress__current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 14px;
}

.auto-call-current-name {
  font-weight: 800;
  font-size: 15px;
}

.auto-call-current-phone {
  opacity: 0.95;
}

.auto-call-current-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 700;
}

.btn-pause-auto-call {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.list-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.auto-call-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-sub);
  cursor: pointer;
  user-select: none;
}

.auto-call-option input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.btn-start-call--resume {
  background: #059669;
}
.btn-save-next:hover:not(:disabled),
.btn-profile-save:hover,
.btn-sms-save:hover,
.btn-call:hover {
  background: var(--primary-hover);
}

.btn-auth-secondary,
.btn-popup-secondary,
.btn-popup-ghost,
.btn-db-action,
.btn-excel-download,
.btn-excel-upload,
.btn-view-all,
.btn-month-nav,
.btn-upload-local,
.btn-logout,
.btn-chinalead,
.btn-sync,
.btn-sms-add-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--primary);
  font-weight: 600;
}

.btn-auth-secondary:hover,
.btn-popup-secondary:hover,
.btn-popup-ghost:hover,
.btn-db-action:hover,
.btn-excel-download:hover,
.btn-excel-upload:hover,
.btn-view-all:hover,
.btn-month-nav:hover,
.btn-upload-local:hover,
.btn-logout:hover,
.btn-chinalead:hover,
.btn-sync:hover,
.btn-sms-add-custom:hover {
  background: var(--primary-soft);
  border-color: #bfdbfe;
}

.btn-delete,
.btn-db-action--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--danger);
  background: var(--card-bg);
  color: var(--danger);
  font-weight: 600;
}

.btn-delete:hover,
.btn-db-action--danger:hover {
  background: var(--danger);
  color: #fff;
}

.btn-save {
  width: 100%;
}

.btn-save-next:disabled,
.btn-profile-save:disabled,
.btn-sms-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-filter,
.status-filter-btn {
  flex: 0 0 auto;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  word-break: keep-all;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-filter--active {
  color: #fff;
}

.btn-filter[data-filter="all"] {
  color: #2563eb;
  border-color: #2563eb;
}

.btn-filter[data-filter="all"]:hover:not(.btn-filter--active) {
  background: #eff6ff;
}

.btn-filter[data-filter="all"].btn-filter--active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.btn-filter[data-filter="missed"] {
  color: #6b7280;
  border-color: #6b7280;
}

.btn-filter[data-filter="missed"]:hover:not(.btn-filter--active) {
  background: #f3f4f6;
}

.btn-filter[data-filter="missed"].btn-filter--active {
  background: #6b7280;
  border-color: #6b7280;
  color: #fff;
}

.btn-filter[data-filter="callback"] {
  color: #f59e0b;
  border-color: #f59e0b;
}

.btn-filter[data-filter="callback"]:hover:not(.btn-filter--active) {
  background: #fffbeb;
}

.btn-filter[data-filter="callback"].btn-filter--active {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}

.btn-filter[data-filter="scheduled"] {
  color: #dc2626;
  border-color: #dc2626;
}

.btn-filter[data-filter="scheduled"]:hover:not(.btn-filter--active) {
  background: #fef2f2;
}

.btn-filter[data-filter="scheduled"].btn-filter--active {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.btn-filter[data-filter="interested"] {
  color: #16a34a;
  border-color: #16a34a;
}

.btn-filter[data-filter="interested"]:hover:not(.btn-filter--active) {
  background: #f0fdf4;
}

.btn-filter[data-filter="interested"].btn-filter--active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.btn-filter[data-filter="completed"] {
  color: #7c3aed;
  border-color: #7c3aed;
}

.btn-filter[data-filter="completed"]:hover:not(.btn-filter--active) {
  background: #f5f3ff;
}

.btn-filter[data-filter="completed"].btn-filter--active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.btn-result {
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-main);
  font-weight: 600;
  min-height: var(--touch-min);
}

.btn-result--selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── 카드 / 섹션 ── */
.form-section,
.list-section,
.db-tabs-section,
.today-tasks-section,
.today-tasks-card,
.stat-card,
.auth-card,
.popup,
.modal {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

.form-section,
.list-section {
  padding: 14px;
  margin-bottom: 14px;
}

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

.db-tabs-section,
.today-tasks-section,
.today-tasks-card,
.profile-section:not(.settings-page),
.profile-settings-page {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 14px;
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

/* 설정 탭 — 브랜드 블루 배경 위 흰색 텍스트, 카드/input 내부만 다크 텍스트 */
.profile-section.settings-page {
  background: transparent;
  box-shadow: none;
  color: var(--text-on-dark);
}

.settings-page > :is(h1, h2, .profile-page-title) {
  color: var(--text-on-dark);
}

.settings-page .settings-panel :is(
  .profile-view-card__title,
  .referral-dashboard-card__title,
  .profile-security-card__title,
  .profile-subsection-title,
  .settings-panel-heading,
  .settings-sms-card__title
) {
  color: #111827;
}

.settings-page .settings-panel {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-card);
  color: #1f2937;
}

.settings-page .settings-panel :is(
  .profile-page-subtitle,
  .popup-hint,
  .settings-account-hint,
  .referral-dashboard-card__subtitle,
  .referral-dashboard-footnote,
  .referral-dashboard-reward__note
) {
  color: #6b7280;
}

.settings-page .settings-panel :is(
  .form-group label,
  .referral-dashboard-field-label,
  .settings-account-label,
  .settings-subsection-title,
  .referral-dashboard-card__title,
  .referral-dashboard-reward__title
) {
  color: #111827;
  font-weight: 600;
}

.settings-page .settings-panel :is(
  input:not([type="checkbox"]),
  select,
  textarea,
  .settings-account-value,
  .referral-dashboard-code
) {
  color: #111827;
}

.settings-page .settings-panel :is(input:not([type="checkbox"]), select, textarea) {
  background: #fff;
}

.settings-page .settings-panel :is(input, select, textarea):disabled {
  color: #6b7280;
  background: #f9fafb;
}

.settings-page .settings-panel .referral-kpi-card__label {
  color: #6b7280;
}

.settings-page .settings-subnav-item {
  background: var(--surface);
  color: var(--text-primary);
}

.settings-page .settings-subnav-item--active {
  background: var(--primary-soft);
  color: var(--primary);
}

.settings-page .settings-notify-section {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 14px;
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

.settings-page .settings-notify-section :is(h3, .settings-subsection-title) {
  color: var(--text-primary);
}

.settings-page .settings-notify-row span {
  color: var(--text-secondary);
}

.settings-page .settings-notify-row strong {
  color: var(--text-primary);
}

.settings-page .settings-notify-section :is(label, .cl-checkbox) {
  color: var(--text-primary);
}

.settings-page .settings-notify-section label:has(input:disabled) {
  color: var(--text-secondary);
}

.settings-page .settings-notify-section :is(input, select, textarea) {
  color: var(--text-primary);
  background: var(--surface);
}

.settings-page .settings-notify-section .btn-auth-primary {
  color: var(--text-on-dark);
}

.list-section {
  margin-bottom: 14px;
}

.list-section h2,
.today-tasks-title,
.profile-page-title,
.auth-title,
.section-subtitle,
.popup h2,
.settings-subsection-title {
  font-size: var(--font-size-title);
  line-height: var(--line-height);
  color: var(--text-primary);
  font-weight: 700;
}

/* 브랜드 블루 배경 위 직접 노출 텍스트 — 흰 카드(.list-section) 내부는 제외 */
#appShell .contacts-panel .contacts-toolbar__title,
#appShell .customer-list-section .list-header__title,
#appShell .customer-list-section .list-header h2 {
  color: #111827;
  font-size: 15px;
  font-weight: 700;
}

#appShell .contacts-panel .contacts-toolbar__count,
#appShell .customer-list-section .list-header__count {
  color: var(--primary);
  font-weight: 800;
}

#appShell .contacts-panel .empty-message,
#appShell .customer-list-section .empty-message {
  color: #6b7280;
}

#appShell .contacts-panel .contacts-toolbar__actions .contact-view-toggle,
#appShell .list-header-sub .auto-call-option {
  color: #6b7280;
  font-size: 12px;
}

.profile-settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.profile-settings-col {
  min-width: 0;
}

.profile-subsection-heading {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}

.profile-settings-col--sms .sms-settings-desc {
  margin-top: -4px;
}

.profile-settings-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.profile-settings-footer-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.profile-settings-footer-row .btn-profile-save {
  align-self: flex-end;
}

.profile-marketing-consent {
  margin-bottom: 0;
}

.form-group.auth-checkbox-group {
  margin-bottom: 0;
}

.form-group.auth-checkbox-group label.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.auth-agreements--signup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.auth-agreements--signup .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #475569;
  cursor: pointer;
}

.auth-agreements--signup .checkbox-row a,
.form-group.auth-checkbox-group label.checkbox-row a {
  color: #4338ca;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-group.auth-checkbox-group label.checkbox-row + label.checkbox-row {
  margin-top: 10px;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  transform: none;
  zoom: 1;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  accent-color: #2563eb;
  cursor: pointer;
}

.marketing-checkbox {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex-shrink: 0;
  margin: 0;
  transform: none;
  zoom: 1;
  accent-color: #2563eb;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.checkbox-row span {
  line-height: 1.4;
}

.profile-settings-footer-row--save-only {
  justify-content: flex-end;
}

.profile-settings-footer-row--save-only .btn-profile-save {
  align-self: flex-end;
}

@media (min-width: 768px) {
  .profile-settings-footer-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  .profile-settings-footer-row .btn-profile-save {
    align-self: auto;
    flex-shrink: 0;
  }

  .profile-marketing-consent {
    flex: 1;
    min-width: 0;
  }
}

.profile-settings-preview {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .profile-settings-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .profile-settings-col--sms {
    padding-left: 16px;
    border-left: 1px solid var(--border);
  }
}

.list-section h2 {
  margin-bottom: 10px;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.list-header h2 {
  margin-bottom: 0;
}

#contact-count {
  color: var(--primary);
  font-weight: 700;
}

/* ── 폼 ── */
.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: var(--font-size-caption);
  color: var(--text-main);
  line-height: var(--line-height);
}

.form-group input:not([type="checkbox"]),
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--font-size-body);
  line-height: var(--line-height);
  color: var(--text-main);
  background: var(--card-bg);
  transition: border-color 0.15s;
}

.form-group textarea {
  min-height: 88px;
  resize: vertical;
}

.form-group input:not([type="checkbox"]):focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ── 연락처 목록 ── */
.contact-list {
  list-style: none;
}

.empty-message {
  text-align: center;
  color: var(--text-sub);
  padding: 20px 12px;
  font-size: var(--font-size-caption);
  line-height: var(--line-height);
}

.contact-block {
  list-style: none;
  margin-bottom: 8px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  background: var(--surface-muted);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.contact-item:hover {
  background: var(--surface-hover);
}

.contact-item--active {
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.contact-item--calling {
  border: 2px solid #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
  animation: contact-calling-pulse 2.4s ease-in-out infinite;
}

.contact-mobile-calling-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@keyframes contact-calling-pulse {
  0%,
  100% {
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
  }

  50% {
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.28);
  }
}

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

.customer-list-section,
.contacts-panel,
.contacts-panel .contact-item,
.customer-list-section .contact-item,
.contacts-panel .customer-table-header,
.customer-list-section .customer-table-header,
.contacts-panel .contact-call-count,
.customer-list-section .contact-call-count,
.contacts-panel .contact-last-call,
.customer-list-section .contact-last-call {
  color: #111827;
}

.contacts-panel .contact-call-count,
.customer-list-section .contact-call-count,
.contacts-panel .contact-last-call,
.customer-list-section .contact-last-call {
  color: #6b7280;
  font-weight: 600;
  font-size: 13px;
}

.contact-name,
.customer-name {
  font-weight: 800;
  font-size: var(--font-size-title);
  line-height: var(--line-height);
  margin-bottom: 4px;
  color: #111827;
}

.phone-text,
.contact-phone {
  color: var(--text-main);
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  word-break: keep-all;
  font-size: 20px;
  line-height: 1.25;
}

.sc-phone-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.sc-phone-display__part {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}

.sc-phone-display__part--clear {
  color: inherit;
}

.sc-phone-display__middle-canvas {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.sc-phone-display__part--blur {
  filter: blur(1.5px);
  -webkit-filter: blur(1.5px);
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transform: translateY(0);
}

.contact-phone .sc-phone-display,
.phone-text .sc-phone-display {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

.customer-list .phone-text,
.customer-list .contact-phone,
.contact-item .phone-text,
.contact-item .contact-phone {
  overflow: visible;
  text-overflow: clip;
}

.phone-column {
  box-sizing: border-box;
  flex-shrink: 0;
}

.status-column {
  box-sizing: border-box;
  text-align: center;
  flex-shrink: 0;
}

.contact-item .status-column,
.customer-card-header .status-column {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-item .status-badge,
.customer-card-header .status-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 90px;
  max-width: 100%;
  box-sizing: border-box;
}

.contact-call-count,
.contact-last-call,
.contact-meta {
  color: var(--text-sub);
  font-size: var(--font-size-caption);
  line-height: var(--line-height);
}

.contact-status-cell {
  display: inline-flex;
  align-items: center;
}

.customer-memo-cell,
.contact-memo {
  color: #374151;
  font-size: var(--font-size-caption);
  line-height: var(--line-height);
}

.contact-mobile-only {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.contact-actions,
.customer-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.customer-actions .btn-call,
.customer-actions .btn-contact-detail,
.customer-actions .btn-delete-direct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  height: 38px;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-sizing: border-box;
}

.customer-actions .btn-contact-detail {
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

.customer-actions .btn-contact-detail:hover {
  filter: brightness(1.05);
  background: var(--primary);
}

.customer-actions .btn-delete-direct {
  border: 1px solid var(--danger);
  background: #fff;
  color: var(--danger);
  cursor: pointer;
}

.customer-actions .btn-delete-direct:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.contact-action-menu {
  position: relative;
}

.btn-contact-menu {
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.contact-action-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 88px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  z-index: 30;
  overflow: hidden;
}

.contact-action-menu-panel.hidden {
  display: none;
}

.btn-delete-menu {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: none;
  background: var(--card-bg);
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn-delete-menu:hover {
  background: var(--danger-soft);
}

.btn-delete-direct {
  display: none;
}

.btn-popup-primary--danger {
  background: var(--danger);
  border-color: var(--danger);
}

.btn-popup-primary--danger:hover {
  background: var(--danger-hover);
  filter: none;
}

.contact-phone-oneline,
.contact-item .contact-phone-oneline {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: keep-all;
}

.contact-mobile-detail-card {
  display: none;
}

.contact-mobile-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
}

.contact-mobile-detail-row:last-child {
  border-bottom: none;
}

.contact-mobile-detail-label {
  flex: 0 0 72px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  line-height: 1.4;
}

.contact-mobile-detail-value {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

.contact-mobile-detail-value.contact-phone-oneline {
  font-size: 18px;
  font-weight: 800;
  word-break: keep-all;
  overflow: visible;
  white-space: nowrap;
}

.contact-mobile-detail-value.contact-mobile-status {
  display: inline-flex;
  align-items: center;
}

.filter-buttons,
.status-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.status-filter-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 8px;
  overflow: visible;
  white-space: normal;
  padding-bottom: 0;
}

.status-filter-grid__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  row-gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.status-filter-grid__manage {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}

.status-filter-row__line--primary,
.status-filter-row__line--secondary {
  display: contents;
}

.status-filter-flex-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.status-filter-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.status-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: 2px;
}

.btn-status-filter-edit {
  flex: 0 0 auto;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px dashed #c4b5fd;
  background: #faf5ff;
  color: #6d28d9;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-status-filter-edit:hover {
  background: #f3e8ff;
  border-color: #a78bfa;
  color: #5b21b6;
}

.btn-status-filter-edit:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

.btn-status-filter-help {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
}

.btn-status-filter-help__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.btn-status-filter-help:hover,
.btn-status-filter-help:focus-visible {
  background: #f1f5f9;
  color: #6b7280;
}

.btn-status-filter-help:hover .btn-status-filter-help__icon,
.btn-status-filter-help:focus-visible .btn-status-filter-help__icon {
  border-color: #c4b5fd;
  color: #7c3aed;
}

.btn-status-filter-help--toolbar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.btn-status-filter-help--toolbar .btn-status-filter-help__icon {
  width: 22px;
  height: 22px;
  font-size: 13px;
  font-weight: 700;
}

.contacts-toolbar__title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.contacts-toolbar__title-row .btn-status-filter-help--toolbar {
  flex: 0 0 auto;
  margin-left: 0;
}

.status-filter-help-sheet__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0 12px;
  overflow-y: auto;
  max-height: min(60dvh, 420px);
}

.status-filter-help-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.status-filter-help-item:last-child {
  border-bottom: none;
}

.status-filter-help-item__chip {
  pointer-events: none;
  flex: 0 0 auto;
}

.status-filter-help-item__chip.btn-filter,
.status-filter-help-item__chip.status-filter-btn {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
}

.status-filter-help-item__chip.btn-status-filter-edit {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
}

.status-filter-help-item__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #4b5563;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .status-filter-help-sheet__content {
    /* 스크롤바 폭을 양쪽에 동일하게 예약해 중앙이 틀어지지 않게 */
    scrollbar-gutter: stable both-edges;
    padding: 0 12px 8px;
    align-items: center;
  }

  .status-filter-help-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    padding: 22px 12px;
    text-align: center;
  }

  .status-filter-help-item__chip {
    align-self: center;
    margin: 0 auto;
  }

  .status-filter-help-item__desc {
    width: 100%;
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
  }
}

.filter-buttons::-webkit-scrollbar,
.status-filter-row::-webkit-scrollbar {
  display: none;
}

.contact-list-header {
  display: none;
}

.customer-list {
  width: 100%;
}

/* ── Workspace 레이아웃 (대시보드 재설계) ── */
.workspace {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.workspace-command {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.workspace-dashboard-panel,
.command-kpi-card {
  order: 1;
}

.command-progress-card--workspace {
  order: 2;
}

.app-mobile-only {
  display: none !important;
}

.dashboard-accordion-trigger {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.dashboard-accordion-trigger__label {
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-accordion-trigger__chevron {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  color: #6b7280;
  transition: transform 200ms ease;
}

.dashboard-accordion-body {
  display: block;
}

.dashboard-accordion-body__inner {
  overflow: hidden;
}

.mobile-call-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 1085;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.34);
}

.mobile-call-fab--resume {
  background: #1d4ed8;
}

.mobile-call-fab:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.mobile-call-fab__icon {
  font-size: 18px;
  line-height: 1;
}

/* ===== Mobile app UX (연락처 중심) ===== */
@media (max-width: 768px) {
  .app-mobile-only {
    display: inline-flex !important;
  }
}

body.is-mobile-app #view-customers .workspace {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.is-mobile-app .workspace-command,
body.is-mobile-app .workspace-grid,
body.is-mobile-app .workspace-sidebar,
body.is-mobile-app .workspace-main {
  display: contents;
}

body.is-mobile-app .sidebar-card--db {
  order: 1;
}

body.is-mobile-app .workspace-dashboard-panel {
  order: 2;
  display: flex;
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

body.is-mobile-app .command-progress-card--workspace {
  order: 3;
  margin-top: -8px;
}

body.is-mobile-app .contacts-panel {
  order: 4;
}

body.is-mobile-app .command-progress-card {
  padding: 3px 10px 6px;
  border-radius: 0 0 12px 12px;
  border-top: none;
  background: #fff;
  box-shadow: none;
}

body.is-mobile-app .command-progress-card__title {
  display: block !important;
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  line-height: 1.2;
}

body.is-mobile-app .command-progress-card__sub,
body.is-mobile-app .command-progress-card__current,
body.is-mobile-app .btn-restart-auto-call {
  display: none !important;
}

body.is-mobile-app .command-progress-card__actions {
  display: none !important;
}

body.is-mobile-app .command-progress-card__top {
  margin-bottom: 4px;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
}

body.is-mobile-app .command-progress-card__label-group {
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  align-items: baseline;
  flex-wrap: nowrap;
}

body.is-mobile-app .command-progress-card__meta {
  font-size: 11px;
  font-weight: 400;
  color: #356bff;
  white-space: nowrap;
  flex-shrink: 0;
}

body.is-mobile-app .command-progress-card__meta .sc-metric-num__text {
  min-width: 0;
  color: inherit;
  white-space: nowrap;
  display: inline;
}

body.is-mobile-app .command-progress-card__percent {
  font-size: 11px;
  font-weight: 400;
  color: #356bff;
  min-width: 0;
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

body.is-mobile-app .command-progress-card__percent .sc-metric-num__text {
  min-width: 0;
  color: inherit;
  white-space: nowrap;
  display: inline;
}

body.is-mobile-app .command-progress-card__percent .sc-metric-num__text::before {
  content: "(";
}

body.is-mobile-app .command-progress-card__percent .sc-metric-num__text::after {
  content: ")";
}

body.is-mobile-app .command-progress-card__bar-track {
  height: 6px;
  border-radius: 999px;
  background: #e8edf3;
}

body.is-mobile-app .command-progress-card__bar-fill {
  border-radius: 999px;
}

body.is-mobile-app .command-progress-card--paused {
  border-color: #e5e7eb;
  background: #fff;
}

body.is-mobile-app .dashboard-kpi-header {
  padding: 6px 10px 0;
  margin-bottom: 0;
}

body.is-mobile-app .dashboard-kpi-header__title {
  display: none;
}

body.is-mobile-app .dashboard-accordion-trigger {
  display: flex !important;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 32px;
  font-size: 14px;
}

body.is-mobile-app .workspace-dashboard-accordion:not(.is-accordion-expanded) .dashboard-kpi-header {
  padding-bottom: 6px;
}

body.is-mobile-app .workspace-dashboard-accordion:not(.is-accordion-expanded) .btn-dashboard-manage {
  display: none;
}

body.is-mobile-app .workspace-dashboard-accordion.is-accordion-expanded .dashboard-kpi-header {
  margin-bottom: 2px;
}

body.is-mobile-app .btn-dashboard-manage {
  display: none;
}

body.is-mobile-app .dashboard-accordion-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 200ms ease;
}

body.is-mobile-app .workspace-dashboard-accordion:not(.is-accordion-expanded) .dashboard-accordion-body {
  grid-template-rows: 0fr;
}

body.is-mobile-app .kpi-command,
body.is-mobile-app .kpi-command.kpi-command--mobile-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.is-mobile-app .kpi-command__cell {
  min-height: 0;
  padding: 6px 5px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  border-bottom: none;
}

body.is-mobile-app .kpi-command__cell:nth-child(3n) {
  border-right: none;
}

body.is-mobile-app .kpi-command__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

body.is-mobile-app .kpi-command__label {
  display: inline;
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  width: auto;
}

body.is-mobile-app .kpi-command__cell[data-stat-key="__call_progress__"] {
  padding: 6px 4px 7px;
}

body.is-mobile-app .kpi-command__unit {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

body.is-mobile-app .kpi-command__sub {
  display: none;
}

body.is-mobile-app .kpi-command__icon {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

body.is-mobile-app .kpi-command__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 6px;
  width: 100%;
}

@media (min-width: 769px) {
  .kpi-command__icon {
    font-size: 17px;
  }

  .kpi-command__title {
    gap: 6px;
  }
}

body.is-mobile-app .kpi-command__value {
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  width: 100%;
}

body.is-mobile-app .kpi-command__value--ratio {
  letter-spacing: -0.02em;
}

body.is-mobile-app .kpi-command__value--mobile-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
  width: 100%;
  min-width: 0;
  font-weight: 800;
  line-height: 1.15;
  color: var(--primary);
  letter-spacing: -0.02em;
  text-align: center;
}

body.is-mobile-app .kpi-command__value--mobile-stacked .progress-value,
body.is-mobile-app .kpi-command__value--mobile-stacked .kpi-command__ratio-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.15;
}

body.is-mobile-app .kpi-command__value--mobile-stacked .progress-value.sc-metric-num,
body.is-mobile-app .kpi-command__value--mobile-stacked .kpi-command__ratio-line.sc-metric-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
}

body.is-mobile-app .kpi-command__value--mobile-stacked .progress-percent,
body.is-mobile-app .kpi-command__value--mobile-stacked .kpi-command__ratio-percent {
  display: block;
  white-space: nowrap;
  flex-wrap: nowrap;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary);
}

body.is-mobile-app .kpi-command__value--mobile-stacked .progress-value .sc-metric-num__text,
body.is-mobile-app .kpi-command__value--mobile-stacked .kpi-command__ratio-line .sc-metric-num__text,
body.is-mobile-app .kpi-command__value--mobile-stacked .progress-percent .sc-metric-num__text,
body.is-mobile-app .kpi-command__value--mobile-stacked .kpi-command__ratio-percent .sc-metric-num__text {
  display: inline;
  white-space: nowrap;
  min-width: 0;
  width: auto;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

body.is-mobile-app .kpi-command__ratio-percent .sc-metric-num__text::before {
  content: "(";
}

body.is-mobile-app .kpi-command__ratio-percent .sc-metric-num__text::after {
  content: ")";
}

body.is-mobile-app .contacts-panel {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

body.is-mobile-app .contacts-toolbar {
  gap: 12px;
  margin-bottom: 6px;
}

body.is-mobile-app .contacts-toolbar__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.is-mobile-app .contacts-toolbar__default-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

body.is-mobile-app .contacts-toolbar__head .btn-start-call,
body.is-mobile-app .contacts-toolbar__bulk-actions .btn-start-call {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 40px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  gap: 4px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.24);
}

body.is-mobile-app .contacts-toolbar__head .btn-start-call:disabled,
body.is-mobile-app .contacts-toolbar__bulk-actions .btn-start-call:disabled {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
}

body.is-mobile-app .mobile-call-fab {
  display: none !important;
}

body.is-mobile-app .command-progress-card--workspace.command-progress-card--session-active .command-progress-card__bar-fill {
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
}

body.is-mobile-app .contacts-toolbar__title-row {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}

body.is-mobile-app .contacts-toolbar__title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-mobile-app .contacts-toolbar__title-row .btn-status-filter-help--toolbar {
  width: 24px;
  height: 24px;
  margin-left: 0;
  flex-shrink: 0;
}

body.is-mobile-app .contacts-toolbar__title-row .btn-status-filter-help--toolbar .btn-status-filter-help__icon {
  width: 20px;
  height: 20px;
  font-size: 12px;
}

body.is-mobile-app .contacts-toolbar__actions {
  flex: 0 0 auto;
  margin-left: auto;
}

body.is-mobile-app .contacts-toolbar__filters {
  margin-top: 2px;
}

body.is-mobile-app .contacts-toolbar__filters .status-filter-grid--mobile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  overflow: visible;
  white-space: normal;
  padding-bottom: 0;
}

body.is-mobile-app .contacts-toolbar__filters .status-filter-grid--mobile .status-filter-grid__filters,
body.is-mobile-app .contacts-toolbar__filters .status-filter-grid--mobile .status-filter-grid__manage {
  display: contents;
}

body.is-mobile-app .contacts-toolbar__filters .status-filter-grid--mobile .btn-filter,
body.is-mobile-app .contacts-toolbar__filters .status-filter-grid--mobile .status-filter-btn,
body.is-mobile-app .contacts-toolbar__filters .status-filter-grid--mobile .btn-status-filter-edit {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  height: 48px;
  padding: 4px 8px;
  border-radius: 14px;
  font-size: clamp(11px, 2.9vw, 13px);
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  word-break: keep-all;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.is-mobile-app .contacts-toolbar__filters .status-filter-grid--mobile .btn-status-filter-edit {
  border: 1.5px dashed #c4b5fd;
  background: #faf5ff;
  color: #6d28d9;
  font-weight: 800;
}

.command-kpi-card,
.command-progress-card,
.contacts-panel,
.sidebar-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: none;
}

.command-kpi-card {
  padding: 0;
  overflow: hidden;
}

.workspace-dashboard-panel {
  display: flex;
  flex-direction: column;
}

.dashboard-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 16px 16px 0;
  margin-bottom: 18px;
}

.dashboard-kpi-header__title {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  color: #111827;
  white-space: nowrap;
}

.btn-dashboard-manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 38px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fff;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.btn-dashboard-manage:hover,
.btn-dashboard-manage:focus-visible {
  border-color: #c7d2fe;
  background: #f8fafc;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.12);
}

.btn-dashboard-manage__icon {
  font-size: 15px;
  line-height: 1;
}

.btn-dashboard-manage__label {
  white-space: nowrap;
}

.kpi-command {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  flex: 1 1 auto;
  border-top: 1px solid #f1f5f9;
}

body:not(.is-mobile-app) #stats-grid.kpi-command {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  body:not(.is-mobile-app) #stats-grid.kpi-command {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  body:not(.is-mobile-app) #stats-grid.kpi-command {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kpi-command__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  min-height: 58px;
  border-right: 1px solid #f1f5f9;
}

.kpi-command__cell:last-child {
  border-right: none;
}

.kpi-command__cell:nth-child(6n) {
  border-right: none;
}

.kpi-command__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  width: 100%;
  text-align: center;
}

.kpi-command__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.kpi-command__icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0;
}

.kpi-command__label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-command__value {
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--primary);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.kpi-command__value--ratio {
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.kpi-command__unit {
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
}

.kpi-command__sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}

.kpi-command__cell--status .kpi-command__value {
  color: var(--kpi-accent, var(--primary));
}

.command-progress-card {
  padding: 10px 14px 12px;
  width: 100%;
}

.command-progress-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.command-progress-card__label-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.command-progress-card__title {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
}

.command-progress-card__meta {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.command-progress-card__percent {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  min-width: 36px;
  text-align: right;
}

.command-progress-card__bar-track {
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  width: 100%;
}

.command-progress-card__bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
  transition: width 0.25s ease;
}

.command-progress-card--running .command-progress-card__bar-fill {
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
}

.command-progress-card--paused {
  border-color: #fcd34d;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}

.command-progress-card--paused .command-progress-card__title {
  color: #b45309;
}

.command-progress-card--paused .command-progress-card__bar-fill {
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
}

.command-progress-card__actions {
  display: flex;
  gap: 6px;
}

.command-progress-card__actions.hidden {
  display: none;
}

.workspace-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workspace-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-card {
  padding: 12px;
}

.btn-create-db--compact {
  width: 100%;
  margin-top: 8px;
}

.btn-mobile-speedcall-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 54px;
  height: 54px;
  margin-top: 8px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #ef4444 0%, var(--call-cta) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 6px 18px var(--call-cta-shadow);
}

.btn-mobile-speedcall-start:hover:not(:disabled) {
  background: linear-gradient(180deg, #f87171 0%, var(--call-cta-hover) 100%);
  filter: none;
}

.btn-mobile-speedcall-start:disabled {
  background: #fecaca;
  color: #991b1b;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.88;
}

.workspace-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.contacts-panel {
  padding: 12px 14px 14px;
  min-width: 0;
}

.contacts-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.contacts-toolbar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.contacts-toolbar__filters {
  min-width: 0;
}

.contacts-toolbar__filters .status-filter-row,
.contacts-toolbar__filters .status-filter-grid {
  justify-content: flex-start;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .contacts-toolbar {
    gap: 12px;
    margin-bottom: 6px;
  }

  .contacts-toolbar__head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  .contacts-toolbar__default-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
  }

  .contacts-toolbar__head .btn-start-call {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 40px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    gap: 4px;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.24);
  }

  .contacts-toolbar__head .btn-start-call:disabled {
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
  }

  .contacts-toolbar__title-row {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
  }

  .contacts-toolbar__title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .contacts-toolbar__title-row .btn-status-filter-help--toolbar {
    width: 24px;
    height: 24px;
    margin-left: 0;
    flex-shrink: 0;
  }

  .contacts-toolbar__title-row .btn-status-filter-help--toolbar .btn-status-filter-help__icon {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .contacts-toolbar__actions {
    margin-left: auto;
    flex-shrink: 0;
    gap: 6px;
  }

  .contacts-toolbar__default-actions,
  .contacts-toolbar__bulk-actions {
    gap: 6px;
  }

  .contacts-toolbar__bulk-actions .btn-list-tool,
  .contacts-toolbar__bulk-actions .btn-start-call {
    min-height: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
  }

  .contacts-toolbar__filters {
    overflow: visible;
    margin-top: 2px;
  }

  .contacts-toolbar__filters .status-filter-grid--mobile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    overflow: visible;
    white-space: normal;
    padding-bottom: 0;
  }

  .contacts-toolbar__filters .status-filter-grid--mobile .status-filter-grid__filters,
  .contacts-toolbar__filters .status-filter-grid--mobile .status-filter-grid__manage {
    display: contents;
  }

  .contacts-toolbar__filters .status-filter-grid--mobile .btn-filter,
  .contacts-toolbar__filters .status-filter-grid--mobile .status-filter-btn,
  .contacts-toolbar__filters .status-filter-grid--mobile .btn-status-filter-edit {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 4px 8px;
    border-radius: 14px;
    font-size: clamp(11px, 2.9vw, 13px);
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    word-break: keep-all;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .contacts-toolbar__filters .status-filter-grid--mobile .btn-status-filter-edit {
    border: 1.5px dashed #c4b5fd;
    background: #faf5ff;
    color: #6d28d9;
    font-weight: 800;
  }
}

.contacts-toolbar__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.contacts-toolbar__count {
  color: var(--primary);
  font-weight: 800;
}

.contacts-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.contacts-toolbar__default-actions,
.contacts-toolbar__bulk-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.contacts-manage-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.contacts-manage-trigger__caret {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}

.contacts-manage-trigger--open {
  background: #eff6ff;
  border-color: #93c5fd;
  color: var(--primary);
}

.contacts-manage-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 300px;
  max-width: min(360px, calc(100vw - 24px));
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  z-index: 1000;
}

.contacts-manage-menu__row {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.contacts-manage-menu__row + .contacts-manage-menu__row {
  margin-top: 2px;
}

.contacts-manage-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.contacts-manage-menu__label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.contacts-manage-menu__desc {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacts-manage-menu__help {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 28px;
  height: 28px;
  margin-right: 2px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
}

.contacts-manage-menu__help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.contacts-manage-menu__help:hover,
.contacts-manage-menu__help:focus-visible {
  background: #f1f5f9;
  color: #6b7280;
}

.contacts-manage-menu__help:hover .contacts-manage-menu__help-icon,
.contacts-manage-menu__help:focus-visible .contacts-manage-menu__help-icon {
  border-color: #93c5fd;
  color: #2563eb;
}

.contacts-manage-menu__item:hover {
  background: #f1f5f9;
}

.contacts-manage-menu__row:hover .contacts-manage-menu__item {
  background: #f1f5f9;
}

.column-settings-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.column-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #f3f4f6;
  background: #fafafa;
  cursor: pointer;
}

.column-settings-row--fixed {
  opacity: 0.72;
  cursor: default;
}

.column-settings-row__label {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.column-settings-row__hint {
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
}

.contacts-toolbar__bulk-actions.hidden,
.contacts-toolbar__default-actions.hidden {
  display: none !important;
}

.contacts-toolbar__selection-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
  margin-right: 4px;
}

.btn-list-tool--danger {
  color: #dc2626;
  border-color: #fecaca;
}

.btn-list-tool--danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.contact-select-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  flex-shrink: 0;
  padding: 4px;
}

.contact-select-cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.contact-item--selected {
  background: #f8fafc;
  box-shadow: inset 3px 0 0 var(--primary);
}

.contact-bulk-fab {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
}

.contact-bulk-fab.hidden {
  display: none !important;
}

.contact-bulk-fab__count {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  text-align: center;
}

.contact-bulk-fab__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.contact-bulk-fab__btn {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.contact-bulk-fab__btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.contact-bulk-fab__btn--danger {
  color: #dc2626;
  border-color: #fecaca;
}

.contact-bulk-fab__btn--danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

@media (min-width: 768px) {
  .contact-bulk-fab {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .contacts-toolbar__bulk-actions {
    display: none !important;
  }

  .customer-card-header .contact-select-cell--mobile {
    flex: 0 0 auto;
    margin-right: 2px;
  }

  .contact-mobile-detail-header {
    margin-bottom: 8px;
  }
}

.contacts-panel .empty-message {
  color: #6b7280;
}

@media (max-width: 1024px) {
  body.is-mobile-app .kpi-command,
  body.is-mobile-app .kpi-command.kpi-command--mobile-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.is-mobile-app .kpi-command__cell {
    border-bottom: none;
  }
}

@media (max-width: 767px) {
  body.is-mobile-app .kpi-command,
  body.is-mobile-app .kpi-command.kpi-command--mobile-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.is-mobile-app .kpi-command__cell {
    border-bottom: none;
  }

  body.is-mobile-app .kpi-command__cell:nth-child(3n) {
    border-right: none;
  }

  body.is-mobile-app .kpi-command__cell:nth-child(2n) {
    border-right: 1px solid #f1f5f9;
  }

  .workspace-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .workspace-command {
    gap: 8px;
  }

  .command-progress-card__top {
    flex-wrap: wrap;
    gap: 8px;
  }

  .command-progress-card__label-group {
    min-width: 0;
    flex: 1 1 160px;
  }

  .command-progress-card__percent {
    flex-shrink: 0;
  }

  .command-progress-card__actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .app-chrome-header__inner {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .app-chrome-header__actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
    margin-left: 12px;
    position: static;
    transform: none;
    right: auto;
  }

  .header-notify__trigger {
    min-height: 38px;
    padding: 0;
    font-size: 12px;
  }

  .demo-mode-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .demo-mode-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .demo-mode-banner__actions.signup-cta-row {
    flex-wrap: nowrap;
  }

  .demo-mode-banner__actions .btn-kakao--compact,
  .demo-mode-banner__actions .btn-demo-email {
    flex: 1 1 0;
    min-width: 100px;
    min-height: 48px;
    height: 48px;
    white-space: nowrap;
  }

  .demo-mode-banner__actions .btn-demo-email {
    flex: 0 1 auto;
  }

  .app-service-nav .main-tabs--speedcall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    overflow-x: hidden;
    overflow-y: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    padding: 8px 0 10px;
    box-sizing: border-box;
  }

  .app-service-nav .main-tabs--chinalead {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    border-radius: 0;
    background: transparent;
    padding: 8px 0 10px;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .app-service-nav .main-tabs--chinalead .main-tab {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 0 6px;
    font-size: 12px;
    letter-spacing: -0.3px;
  }

  .app-service-nav .main-tabs--chinalead.main-tabs--scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-service-nav .main-tabs--speedcall .main-tab {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 2px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.35px;
    line-height: 1.1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .app-service-nav #tab-calendar {
    font-size: 10.5px;
    letter-spacing: -0.45px;
  }

  .customer-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  body.is-mobile-app .kpi-command,
  body.is-mobile-app .kpi-command.kpi-command--mobile-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.is-mobile-app .kpi-command__cell,
  body.is-mobile-app .kpi-command__cell:nth-child(2n),
  body.is-mobile-app .kpi-command__cell:nth-child(3n) {
    border-right: 1px solid #f1f5f9;
  }

  body.is-mobile-app .kpi-command__cell:nth-child(3n) {
    border-right: none;
  }
}

@media (max-width: 640px) {
  .contacts-toolbar {
    flex-wrap: wrap;
  }
}

@media (min-width: 1024px) {
  .workspace-grid {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }
}

/* ── KPI Strip (legacy alias) ── */
.kpi-dashboard-section {
  margin-bottom: 10px;
}

.kpi-strip {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  min-height: 88px;
  padding: 0;
  overflow: hidden;
}

.kpi-strip__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.kpi-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  min-height: 88px;
  border-right: 1px solid #f1f5f9;
}

.kpi-strip__grid .kpi-strip__item:nth-child(6n) {
  border-right: none;
}

.kpi-strip__icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}

.kpi-strip__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.kpi-strip__label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.3;
}

.kpi-strip__value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary);
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.kpi-strip__unit {
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
}

.kpi-strip__item--status .kpi-strip__value {
  color: var(--kpi-accent, var(--primary));
}

.kpi-strip__item--progress .kpi-strip__progress-text {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.kpi-strip__progress-bar {
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  margin-top: 4px;
}

.kpi-strip__progress-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.kpi-strip__progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .kpi-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kpi-strip__grid .kpi-strip__item {
    border-right: 1px solid #f1f5f9;
  }

  .kpi-strip__grid .kpi-strip__item:nth-child(3n) {
    border-right: none;
  }

  .kpi-strip__grid .kpi-strip__item:nth-child(6n) {
    border-right: 1px solid #f1f5f9;
  }
}

@media (max-width: 640px) {
  .kpi-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-strip__grid .kpi-strip__item:nth-child(3n) {
    border-right: 1px solid #f1f5f9;
  }

  .kpi-strip__grid .kpi-strip__item:nth-child(2n) {
    border-right: none;
  }

  .kpi-strip__item {
    padding: 12px;
    min-height: 80px;
  }

  .kpi-strip__value {
    font-size: 1.25rem;
  }
}

/* ── 자동콜 KPI 패널 ── */
.auto-call-kpi-panel {
  margin-top: 8px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

.auto-call-kpi-panel--paused {
  border-color: #fde68a;
  background: #fffbeb;
}

.auto-call-kpi-panel__inner--saas {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.auto-call-kpi-panel__info {
  flex: 0 0 auto;
  min-width: 120px;
}

.auto-call-kpi-panel__progress {
  flex: 1 1 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.auto-call-kpi-panel__inner {
  padding: 12px 14px;
}

.auto-call-kpi-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.auto-call-kpi-panel__title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

.auto-call-kpi-panel--paused .auto-call-kpi-panel__title {
  color: #b45309;
}

.auto-call-kpi-panel__metrics {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.auto-call-kpi-panel__count {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
}

.auto-call-kpi-panel__percent {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
}

.auto-call-kpi-panel__bar-wrap {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  min-width: 80px;
  margin-bottom: 0;
}

.auto-call-kpi-panel__inner--saas .auto-call-kpi-panel__bar-wrap {
  margin-bottom: 0;
}

.auto-call-kpi-panel__bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #22c55e;
  transition: width 0.25s ease;
}

.auto-call-kpi-panel--paused .auto-call-kpi-panel__bar {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.auto-call-kpi-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
}

.btn-resume-auto-call,
.btn-pause-auto-call {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.btn-resume-auto-call {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn-restart-auto-call {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ── 통계 (레거시 stat-card — 랜딩 등) ── */
.stats-section {
  margin-bottom: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stats-grid.stats-grid--scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.stat-card {
  padding: 8px 6px;
  text-align: center;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stats-grid.stats-grid--scroll .stat-card {
  flex: 1 0 108px;
  min-width: 108px;
}

.stat-label {
  display: block;
  font-size: 11px;
  color: var(--text-sub);
  margin-bottom: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

/* ── 탭 (모바일 기본) ── */
.main-tabs {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
}

.main-tabs::-webkit-scrollbar {
  display: none;
}

.main-tab {
  flex: 0 0 auto;
  min-width: auto;
  height: 42px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-on-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.main-tab:hover:not(.main-tab--active):not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
}

.main-tab--active {
  background: var(--surface);
  color: var(--brand-bg);
  font-weight: 700;
  border-color: var(--surface);
}

/* ── DB 리스트 (Upload DB 카드) ── */
.db-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.db-list-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  padding: 2px 2px 0;
}

.db-list-pagination__info {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.db-list-pagination__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.db-list-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.db-list-pagination__btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #111827;
}

.db-list-pagination__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.db-list-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.db-list-item--all {
  background: #eef4ff;
  border-color: #c7d7fe;
}

.db-list-item--all:not(.db-list-item--active):hover {
  background: #e0ecff;
  border-color: #a5b8fc;
}

.db-list-item--active {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: none;
}

.db-list-item--active .db-list-item__name,
.db-list-item--active .db-list-item__name--static {
  color: #fff;
}

.db-list-item--active .db-list-item__name:hover,
.db-list-item--active .db-list-item__name:focus-visible,
.db-list-item--active .db-list-item__name--static:hover,
.db-list-item--active .db-list-item__name--static:focus-visible {
  color: #fff;
}

.db-list-item--active .db-list-item__count {
  color: rgba(255, 255, 255, 0.92);
}

.db-list-item--active .db-list-item__menu {
  border-left-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.db-list-item--active .db-list-item__menu:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.db-list-item__all-icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}

.db-list-item--all:not(.db-list-item--active) .db-list-item__name,
.db-list-item--all:not(.db-list-item--active) .db-list-item__name--static {
  color: #1e3a8a;
  font-weight: 800;
}

.db-list-item--all:not(.db-list-item--active) .db-list-item__count {
  color: #3b82f6;
  font-weight: 700;
}

.db-list-item__select-area {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 6px 8px 12px;
  cursor: pointer;
}

.db-list-item__name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.db-list-item__name {
  flex: 1;
  min-width: 0;
  max-width: 20ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  text-align: left;
  cursor: pointer;
}

.db-list-item__name--static {
  display: block;
  cursor: inherit;
}

.db-list-item__name:hover,
.db-list-item__name:focus-visible {
  color: var(--primary);
  outline: none;
}

.db-list-item__name--static:hover,
.db-list-item__name--static:focus-visible {
  color: #111827;
}

.db-list-item__count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 44px;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  cursor: pointer;
}

.db-list-item__menu {
  flex-shrink: 0;
  width: 36px;
  min-width: 36px;
  height: 44px;
  border: none;
  border-left: 1px solid #f1f5f9;
  background: transparent;
  color: #6b7280;
  font-size: 16px;
  cursor: pointer;
}

.db-list-item__menu:hover {
  background: #f9fafb;
  color: #111827;
}

.db-group-context-menu {
  position: fixed;
  z-index: 1200;
  min-width: 140px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.db-group-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
}

.db-group-context-menu button:hover {
  background: #f3f4f6;
}

.db-group-context-menu__danger {
  color: #dc2626 !important;
}

/* ── 연락처 목록 헤더 ── */
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.list-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.list-header-sub {
  margin-bottom: 10px;
}

.btn-list-tool {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.btn-list-tool:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.btn-list-tool--active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: var(--primary);
}

.btn-start-call--header {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

/* ── 관리 허브 모달 ── */
.manage-hub-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  padding: 4px;
  border-radius: 10px;
  background: #f3f4f6;
}

.manage-hub-tab {
  flex: 1;
  min-height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.manage-hub-tab--active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.system-kpi-settings-list {
  margin-bottom: 16px;
}

.system-kpi-settings-title {
  font-size: 12px;
  font-weight: 800;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.system-kpi-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
}

.kpi-status-order-preview {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.kpi-status-order-preview li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.kpi-settings-intro {
  margin-bottom: 12px;
}

.kpi-settings-section + .kpi-settings-section {
  margin-top: 20px;
}

.kpi-settings-fixed-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #f9fafb;
}

.kpi-settings-fixed-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.kpi-settings-fixed-row:last-child {
  border-bottom: none;
}

.kpi-settings-fixed-row__icon {
  font-size: 18px;
  line-height: 1;
}

.kpi-settings-fixed-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 800;
}

.kpi-custom-settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.kpi-custom-settings-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #f3f4f6;
  background: #fff;
  font-size: 13px;
}

.kpi-custom-settings-row:last-child {
  border-bottom: none;
}

.kpi-custom-settings-row--dragging {
  opacity: 0.55;
}

.kpi-custom-settings-row--drag-over {
  background: #eff6ff;
}

.kpi-drag-handle {
  cursor: grab;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
  user-select: none;
  margin-top: 10px;
}

.kpi-custom-visible-wrap {
  display: inline-flex;
  align-items: center;
  margin: 0;
  margin-top: 10px;
}

.kpi-custom-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kpi-custom-name-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}

.kpi-custom-name-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.kpi-custom-name-field__label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
}

.kpi-custom-name-field__hint {
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
  line-height: 1.4;
}

.kpi-custom-label {
  min-height: 40px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
}

.kpi-custom-label:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.kpi-icon-field {
  position: relative;
  flex: 0 0 auto;
}

.kpi-icon-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.kpi-icon-trigger:hover {
  background: #fff;
  border-color: #cbd5e1;
}

.kpi-icon-trigger[aria-expanded="true"] {
  border-color: var(--primary, #2563eb);
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.kpi-icon-trigger__emoji {
  font-size: 24px;
  line-height: 1;
}

.kpi-icon-trigger__text {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
}

.kpi-icon-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(360px, calc(100vw - 48px));
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.kpi-icon-picker.hidden {
  display: none !important;
}

.kpi-icon-picker__title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.kpi-icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.kpi-icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.kpi-icon-option:hover {
  background: #fff;
  border-color: #cbd5e1;
}

.kpi-icon-option--active {
  border-color: var(--primary, #2563eb);
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.kpi-icon-picker__divider {
  height: 1px;
  margin: 14px 0 12px;
  background: #e5e7eb;
}

.kpi-icon-picker__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kpi-icon-picker__selected {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kpi-icon-picker__selected-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}

.kpi-icon-picker__selected-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  font-size: 24px;
  line-height: 1;
}

.kpi-icon-picker__name-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kpi-icon-picker__name-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}

.kpi-icon-picker__name-input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #111827;
}

.kpi-icon-picker__name-input:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.kpi-icon-picker__confirm {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.kpi-icon-picker__confirm:hover {
  filter: brightness(0.96);
}

.kpi-custom-basis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  word-break: keep-all;
}

.kpi-custom-basis__label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  line-height: 1.3;
}

.kpi-custom-basis__value {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  line-height: 1.35;
}

.kpi-custom-order-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

.kpi-order-btn {
  min-width: 28px;
  min-height: 16px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #f9fafb;
  color: #374151;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}

.kpi-order-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

@media (max-width: 767px) {
  .kpi-custom-settings-row {
    grid-template-columns: auto auto 1fr auto;
    gap: 8px;
    padding: 10px;
  }

  .kpi-custom-name-row {
    flex-direction: column;
    align-items: stretch;
  }

  .kpi-icon-field {
    width: 100%;
  }

  .kpi-icon-trigger {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    gap: 10px;
    padding: 8px 12px;
  }

  .kpi-icon-trigger__emoji {
    font-size: 22px;
  }

  .kpi-icon-picker {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }

  .kpi-icon-picker__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .kpi-icon-option {
    min-height: 40px;
    font-size: 20px;
  }

  .kpi-custom-order-btns {
    flex-direction: row;
    margin-top: 10px;
  }
}

/* ── DB 그룹 탭 (모바일 기본) ── */
.db-tabs-section {
  margin-bottom: 14px;
}

.db-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 10px;
}

.db-tabs::-webkit-scrollbar {
  display: none;
}

.btn-db-tab {
  flex: 0 0 auto;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-main);
}

.btn-db-tab--active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.db-tab-actions,
.db-export-actions,
.db-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.db-create-actions,
.db-tab-actions {
  margin-top: 8px;
}

.btn-create-db {
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px dashed var(--primary);
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.btn-create-db:hover {
  background: #dbeafe;
}

.db-export-actions {
  margin-top: 8px;
}

/* ── 캘린더 (모바일 기본) ── */
#view-calendar .calendar-section {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.calendar-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calendar-layout__today,
.calendar-layout__main {
  min-width: 0;
}

.calendar-today-panel__card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 14px 14px 12px;
}

.calendar-today-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.btn-calendar-today-panel-add {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #2563eb;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.calendar-today-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: none;
  margin-top: 10px;
  overflow: visible;
}

.calendar-today-list .today-task-slide,
.calendar-today-list .calendar-today-card {
  flex: 0 0 auto;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.calendar-today-list .today-task-empty {
  padding: 28px 16px;
  border: 1px dashed #d1d5db;
  border-radius: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}

.calendar-week-panel {
  display: none;
  margin-bottom: 12px;
}

.calendar-week-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.calendar-week-panel__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}

.calendar-week-panel__count {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}

.calendar-week-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-week-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.calendar-week-item__date {
  flex: 0 0 auto;
  min-width: 42px;
  font-size: 12px;
  font-weight: 800;
  color: #5b21b6;
  line-height: 1.3;
  white-space: pre-line;
  text-align: center;
}

.calendar-week-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.calendar-week-item__time {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

.calendar-week-item__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-week-item__type {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
}

.calendar-week-list__empty {
  margin: 0;
  padding: 16px 14px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
}

.calendar-month-panel__toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.calendar-month-panel__toolbar .calendar-month-nav {
  margin-bottom: 0;
}

.btn-calendar-fullscreen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-end;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.btn-calendar-fullscreen svg {
  width: 16px;
  height: 16px;
}

.btn-month-nav--today {
  flex: 0 0 auto;
  min-width: 52px;
}

.calendar-cta-card--mobile {
  margin-bottom: 12px;
}

.calendar-legend {
  display: none;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.calendar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-legend__filter {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  font: inherit;
  color: inherit;
}

.calendar-legend__filter--active {
  background: #f3f4f6;
  box-shadow: inset 0 0 0 1px #d1d5db;
}

.calendar-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.calendar-legend__dot--callback {
  background: #2563eb;
}

.calendar-legend__dot--meeting,
.calendar-legend__dot--new {
  background: #16a34a;
}

.calendar-legend__dot--completed {
  background: #9ca3af;
}

.calendar-sync-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
}

.calendar-sync-banner__text {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: #1e3a8a;
}

.btn-calendar-sync-banner {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #2563eb;
  border-radius: 10px;
  background: #fff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.calendar-fullscreen-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.calendar-fullscreen-modal.hidden {
  display: none;
}

body.calendar-fullscreen-open {
  overflow: hidden;
}

.calendar-fullscreen-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.calendar-fullscreen-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 1120px);
  max-height: min(92vh, 900px);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.calendar-fullscreen-modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.calendar-fullscreen-modal__title {
  margin: 0;
  flex: 1 1 auto;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}

.calendar-fullscreen-modal__view-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: #f3f4f6;
}

.calendar-fullscreen-view-tab {
  min-width: 36px;
  min-height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.calendar-fullscreen-view-tab--active {
  background: #fff;
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.calendar-fullscreen-view-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.calendar-fullscreen-modal__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: #6b7280;
  font-size: 16px;
  cursor: pointer;
}

.calendar-fullscreen-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px 18px 18px;
}

.calendar-fullscreen-month-nav {
  margin-bottom: 12px;
}

.calendar-grid--fullscreen .calendar-day {
  min-height: 0;
}

.calendar-fullscreen-modal__footer {
  display: flex;
  justify-content: center;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 767px) {
  .calendar-today-list {
    max-height: none;
  }

  .calendar-week-panel {
    display: block;
  }

  .calendar-cta-card--mobile {
    display: block;
  }

  .btn-calendar-today-panel-add {
    display: none;
  }

  #view-calendar .calendar-grid {
    gap: 4px;
  }

  #view-calendar .calendar-grid .calendar-day {
    min-height: 40px;
  }

  .calendar-legend {
    display: flex;
  }

  .calendar-fullscreen-modal {
    align-items: flex-end;
    padding: 0;
  }

  .calendar-fullscreen-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }

  .calendar-fullscreen-modal__view-tabs {
    display: none;
  }
}

@media (min-width: 768px) {
  .calendar-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "today main"
      "sync sync";
    gap: 16px 18px;
    align-items: start;
  }

  .calendar-layout__today {
    grid-area: today;
  }

  .calendar-layout__main {
    grid-area: main;
  }

  .calendar-layout__sync {
    grid-area: sync;
  }

  .calendar-week-panel {
    display: none !important;
  }

  .calendar-cta-card--mobile {
    display: none;
  }

  .calendar-today-list {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
  }

  .calendar-month-panel__toolbar {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .calendar-month-panel__toolbar .calendar-month-nav {
    flex: 1 1 auto;
  }

  .btn-calendar-fullscreen {
    flex: 0 0 auto;
    margin-top: 2px;
  }

  .calendar-legend {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .calendar-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

.calendar-callback-hub {
  margin-bottom: 12px;
}

#view-calendar .sidebar-card--today {
  margin: 0;
}

#view-calendar .sidebar-card--today .today-tasks-card {
  border-radius: 14px;
}

#view-customers .calendar-callback-hub {
  display: none !important;
}

body.is-mobile-app #view-customers .sidebar-card--today {
  display: none !important;
}

#view-calendar .calendar-month-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  #view-calendar .calendar-month-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  #view-calendar .calendar-month-label {
    text-align: left;
    flex: 1;
  }

  #view-calendar .calendar-nav {
    justify-content: flex-end;
  }
}

#view-calendar .calendar-month-label {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
}

#view-calendar .calendar-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

#view-calendar .btn-month-nav {
  flex: 1 1 0;
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 10px;
}

#view-calendar .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}

#view-calendar .calendar-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-sub);
  padding: 6px 0;
}

#view-calendar .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

#view-calendar .calendar-day {
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 4px;
  background: var(--card-bg);
  font-size: 11px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 768px) {
  #view-calendar .calendar-grid,
  .calendar-fullscreen-modal .calendar-grid {
    grid-auto-rows: 130px;
  }

  #view-calendar .calendar-day,
  .calendar-fullscreen-modal .calendar-day {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 130px;
    max-height: none;
    box-sizing: border-box;
    overflow: visible;
  }

  .calendar-fullscreen-modal .calendar-grid {
    grid-auto-rows: 130px;
  }

  .calendar-fullscreen-modal .calendar-day {
    min-height: 130px;
    max-height: none;
  }

  #view-calendar .calendar-day-events,
  .calendar-fullscreen-modal .calendar-day-events {
    gap: 1px;
    overflow: visible;
  }

  #view-calendar .calendar-event,
  #view-calendar .calendar-event-more,
  .calendar-fullscreen-modal .calendar-event,
  .calendar-fullscreen-modal .calendar-event-more {
    min-height: 18px;
    max-height: 20px;
    margin-top: 0;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.3;
    border-radius: 6px;
    flex-shrink: 0;
  }

  #view-calendar .calendar-event__time,
  .calendar-fullscreen-modal .calendar-event__time {
    min-width: 38px;
    font-size: 11px;
  }

  #view-calendar .calendar-event__label,
  .calendar-fullscreen-modal .calendar-event__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
  }

  #view-calendar .calendar-event__status,
  .calendar-fullscreen-modal .calendar-event__status {
    display: none;
  }

  #view-calendar .calendar-event-more,
  .calendar-fullscreen-modal .calendar-event-more {
    justify-content: flex-start;
    font-size: 11px;
    font-weight: 700;
    color: #4b5563;
    background: #f3f4f6;
  }
}

#view-calendar .calendar-day:hover {
  border-color: #93c5fd;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

#view-calendar .calendar-day--empty::after {
  content: "클릭해서 일정 추가";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  font-size: 9px;
  font-weight: 600;
  color: #9ca3af;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

#view-calendar .calendar-day--empty:hover::after {
  opacity: 1;
}

#view-calendar .calendar-day--today {
  border: 2px solid var(--primary);
}

#view-calendar .calendar-day--other-month {
  opacity: 0.45;
  background: var(--surface-muted);
}

#view-calendar .calendar-day-number {
  font-weight: 800;
  margin-bottom: 2px;
  color: var(--text-main);
  line-height: 1.2;
  flex: 0 0 auto;
}

#view-calendar .calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.calendar-fullscreen-modal .calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#view-calendar .calendar-event,
#view-calendar .calendar-event-more {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
  padding: 2px 4px;
  border: none;
  border-radius: 8px;
  background: var(--primary-soft);
  color: #1d4ed8;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  flex: 0 0 auto;
}

#view-calendar .calendar-event__time {
  flex: 0 0 auto;
  font-weight: 700;
}

#view-calendar .calendar-event__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-calendar .calendar-event--display-callback {
  background: #eff6ff;
  color: #1d4ed8;
  border-left: 3px solid #2563eb;
}

#view-calendar .calendar-event--display-new {
  background: #ecfdf5;
  color: #15803d;
  border-left: 3px solid #16a34a;
}

#view-calendar .calendar-event--display-completed {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #9ca3af;
  opacity: 1;
}

#view-calendar .calendar-event--display-completed .calendar-event__time {
  color: #6b7280;
}

#view-calendar .calendar-event--display-overdue {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-left: 3px solid #ef4444;
}

#view-calendar .calendar-event--display-overdue .calendar-event__time {
  color: #dc2626;
}

.calendar-fullscreen-modal .calendar-event--display-callback {
  background: #eff6ff;
  color: #1d4ed8;
  border-left: 3px solid #2563eb;
}

.calendar-fullscreen-modal .calendar-event--display-new {
  background: #ecfdf5;
  color: #15803d;
  border-left: 3px solid #16a34a;
}

.calendar-fullscreen-modal .calendar-event--display-completed {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #9ca3af;
}

.calendar-fullscreen-modal .calendar-event--display-overdue {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-left: 3px solid #ef4444;
}

#view-calendar .calendar-event--callback {
  background: #eff6ff;
  color: #1d4ed8;
}

#view-calendar .calendar-event--status-scheduled {
  border-left: 3px solid #2563eb;
}

#view-calendar .calendar-event--status-completed,
#view-calendar .calendar-event--completed,
#view-calendar .calendar-event.calendar-event--completed {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #9ca3af;
  opacity: 1;
}

#view-calendar .calendar-event--status-completed .calendar-event__time,
#view-calendar .calendar-event--completed .calendar-event__time,
#view-calendar .calendar-event.calendar-event--completed .calendar-event__time {
  color: #6b7280;
}

#view-calendar .calendar-event--status-overdue {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-left: 3px solid #ef4444;
}

#view-calendar .calendar-event--status-overdue .calendar-event__time {
  color: #dc2626;
}

#view-calendar .calendar-event__status {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.72);
}

#view-calendar .calendar-event--status-completed .calendar-event__status {
  color: #047857;
}

#view-calendar .calendar-event--status-overdue .calendar-event__status {
  color: #b91c1c;
}

#view-calendar .calendar-event--status-scheduled .calendar-event__status {
  color: #1d4ed8;
}

#view-calendar .calendar-event--meeting {
  background: #f5f3ff;
  color: #6d28d9;
}

#view-calendar .calendar-event--visit {
  background: #f0fdf4;
  color: #15803d;
}

#view-calendar .calendar-event--followup {
  background: #fff7ed;
  color: #c2410c;
}

#view-calendar .calendar-event--personal {
  background: #f3f4f6;
  color: #4b5563;
}

#view-calendar .calendar-event--other {
  background: #f8fafc;
  color: #475569;
}

#view-calendar .calendar-event-more {
  background: var(--surface-muted);
  color: var(--text-sub);
  font-weight: 600;
}

.calendar-day-list {
  list-style: none;
  margin-bottom: 12px;
}

.calendar-day-list-item {
  margin-bottom: 8px;
}

.calendar-day-list-item button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-main);
}

.calendar-day-list-time {
  display: inline-block;
  min-width: 52px;
  font-weight: 700;
  color: var(--primary);
  margin-right: 10px;
  font-variant-numeric: tabular-nums;
}

.calendar-day-list-name {
  font-weight: 600;
  color: var(--text-main);
}

.calendar-mobile-selected-panel {
  display: none;
}

.calendar-mobile-selected-title {
  margin: 14px 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}

.calendar-mobile-selected-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-mobile-selected-empty {
  margin: 0;
  padding: 18px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
}

.calendar-mobile-selected-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.calendar-mobile-selected-item__time {
  flex: 0 0 auto;
  min-width: 44px;
  font-size: 14px;
  font-weight: 800;
  color: #5b21b6;
  line-height: 1.3;
}

.calendar-mobile-selected-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.calendar-mobile-selected-item__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-mobile-selected-item__customer,
.calendar-mobile-selected-item__memo {
  font-size: 12px;
  line-height: 1.35;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-calendar .calendar-event-dot {
  display: none;
}

#view-calendar .calendar-event-dot-more {
  display: none;
}

@media (max-width: 768px) {
  #view-calendar .calendar-grid {
    gap: 4px;
  }

  #view-calendar .calendar-day {
    min-height: 44px;
    padding: 4px 2px 6px;
    border-radius: 10px;
  }

  #view-calendar .calendar-day--selected {
    border-color: #7c3aed;
    background: #f5f3ff;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18);
  }

  #view-calendar .calendar-day--today.calendar-day--selected {
    border-color: #7c3aed;
  }

  #view-calendar .calendar-day-number {
    font-size: 13px;
    text-align: center;
    margin-bottom: 4px;
  }

  #view-calendar .calendar-day-events--compact {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3px;
    min-height: 8px;
  }

  #view-calendar .calendar-event-dot {
    display: block;
    width: 6px;
    height: 6px;
    min-height: 6px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 999px;
    background: #7c3aed;
    cursor: pointer;
    flex-shrink: 0;
  }

  #view-calendar .calendar-event-dot--display-callback {
    background: #2563eb;
  }

  #view-calendar .calendar-event-dot--display-new {
    background: #16a34a;
  }

  #view-calendar .calendar-event-dot--display-completed {
    background: #9ca3af;
  }

  #view-calendar .calendar-event-dot--display-overdue {
    background: #ef4444;
  }

  #view-calendar .calendar-event-dot--callback,
  #view-calendar .calendar-event-dot--status-scheduled {
    background: #2563eb;
  }

  #view-calendar .calendar-event-dot--status-completed,
  #view-calendar .calendar-event-dot--completed {
    background: #9ca3af;
  }

  #view-calendar .calendar-event-dot--status-overdue {
    background: #ef4444;
  }

  #view-calendar .calendar-event-dot--meeting {
    background: #16a34a;
  }

  #view-calendar .calendar-event-dot--visit {
    background: #0891b2;
  }

  #view-calendar .calendar-event-dot--followup {
    background: #d97706;
  }

  #view-calendar .calendar-event-dot--personal {
    background: #9333ea;
  }

  #view-calendar .calendar-event-dot-more {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    color: #7c3aed;
  }

  #view-calendar .calendar-day--empty::after {
    display: none;
  }

  #view-calendar .calendar-event,
  #view-calendar .calendar-event-more {
    display: none !important;
  }

  .calendar-mobile-selected-panel:not(.hidden) {
    display: block;
  }
}

.calendar-cta-card {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
}

.calendar-cta-card__text {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: #1e3a8a;
}

.calendar-cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-calendar-cta-primary,
.btn-calendar-cta-secondary,
.btn-calendar-toolbar {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-calendar-cta-primary,
.btn-calendar-toolbar:not(.btn-calendar-toolbar--ghost) {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
}

.btn-calendar-cta-secondary,
.btn-calendar-toolbar--ghost {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.calendar-event-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 12px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.calendar-event-type-badge--callback {
  background: #eff6ff;
  color: #1d4ed8;
}

.calendar-event-type-badge--meeting {
  background: #f5f3ff;
  color: #6d28d9;
}

.calendar-event-type-badge--visit {
  background: #f0fdf4;
  color: #15803d;
}

.calendar-event-type-badge--followup {
  background: #fff7ed;
  color: #c2410c;
}

.calendar-event-type-badge--personal {
  background: #f3f4f6;
  color: #4b5563;
}

.calendar-event-type-badge--other {
  background: #f8fafc;
  color: #475569;
}

.calendar-event-detail-meta p,
.calendar-event-detail-customer p {
  margin: 0 0 8px;
}

.calendar-event-detail-customer {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.calendar-event-detail-customer__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

.calendar-event-detail-actions {
  flex-wrap: wrap;
}

body:not(.is-mobile-app) .calendar-event-detail-actions #btn-calendar-event-complete,
body:not(.is-mobile-app) .calendar-event-detail-actions #btn-calendar-event-detail-close {
  flex: 1 1 100%;
}

.popup--calendar-event-form {
  max-width: 520px;
  overflow-x: hidden;
}

.calendar-event-form {
  min-width: 0;
}

.calendar-event-form-row {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: flex-start;
}

.calendar-event-form-row__col {
  flex: 1;
  min-width: 0;
  margin-bottom: 12px;
}

.calendar-event-form-row__col label {
  display: block;
  margin-bottom: 6px;
}

.calendar-event-form-row__col input:not([type="checkbox"]) {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  padding: 12px 10px;
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  max-width: 100%;
}

.calendar-event-form-row__col input[type="date"],
.calendar-event-form-row__col input[type="time"] {
  min-width: 0;
}

@media (max-width: 430px) {
  .calendar-event-form-row__col label {
    font-size: 11px;
  }

  .calendar-event-form-row__col input:not([type="checkbox"]) {
    padding: 12px 6px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .calendar-event-form-row__col input:not([type="checkbox"]) {
    padding: 12px 4px;
    font-size: 11px;
  }
}

.calendar-event-customer-fieldset {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.calendar-event-customer-fieldset legend {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
}

.calendar-event-link-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.calendar-event-customer-select {
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
}

.calendar-event-customer-picker {
  margin-top: 8px;
}

.calendar-event-customer-picker__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.calendar-event-customer-db-filter,
.calendar-event-customer-search {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 13px;
  color: #111827;
  background: #fff;
}

.calendar-event-customer-search {
  min-width: 0;
}

.calendar-event-customer-search:disabled,
.calendar-event-customer-db-filter:disabled {
  opacity: 0.6;
  background: #f9fafb;
}

.calendar-event-customer-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(240px, 42vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  -webkit-overflow-scrolling: touch;
}

.calendar-event-customer-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.calendar-event-customer-option:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.calendar-event-customer-option--selected {
  border-color: #3b82f6;
  background: #dbeafe;
}

.calendar-event-customer-option__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event-customer-empty {
  margin: 0;
  padding: 16px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
}

@media (min-width: 480px) {
  .calendar-event-customer-picker__toolbar {
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center;
  }
}

.calendar-event-reminder-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.calendar-event-reminder-custom input {
  width: 100px;
}

.calendar-event-reminder-custom-suffix {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.calendar-event-form-sync {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
}

.calendar-event-form-sync__hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
}

.calendar-event-form-sync__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-sync-provider-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calendar-sync-provider-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.calendar-sync-provider-card__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calendar-sync-provider-card__icon--google {
  background: #fff;
  border: 1px solid #e5e7eb;
}

.calendar-sync-provider-card__icon--apple {
  background: #111827;
  color: #fff;
}

.calendar-sync-provider-card__icon--outlook {
  background: #eff6ff;
  border: 1px solid #dbeafe;
}

.calendar-sync-provider-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calendar-sync-provider-card__body strong {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.calendar-sync-provider-card__status {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.calendar-sync-provider-card__btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.calendar-sync-provider-card__btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}

.calendar-sync-footer-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #64748b;
}

.calendar-sync-popup__actions {
  margin-top: 0;
}

.calendar-sync-popup__actions .btn-popup-primary {
  flex: 1 1 100%;
}

.calendar-day-list-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

/* ── 인증 ── */
.auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 20px 16px;
}

.auth-subtitle,
.auth-privacy-notice,
.profile-page-subtitle,
.sms-settings-desc,
.excel-hint,
.popup-hint,
.sms-preview-note,
.sms-advanced-desc {
  font-size: var(--font-size-caption);
  line-height: var(--line-height);
  color: var(--text-sub);
  margin-bottom: 12px;
}

.auth-title {
  margin-bottom: 6px;
}

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-message,
.profile-message,
.sms-settings-message {
  font-size: var(--font-size-caption);
  line-height: var(--line-height);
  margin-bottom: 10px;
}

.auth-message--error,
.profile-message--error,
.sms-settings-message--error {
  color: var(--danger);
}

.auth-message--info {
  color: #1d4ed8;
}

.sms-compose-section {
  margin-bottom: 12px;
}

.sms-subsection-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.sms-sender-info-section {
  margin-bottom: 14px;
}

.sms-sender-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .sms-sender-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sms-compose-toggle {
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f9fafb;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.sms-compose-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.sms-compose-panel--collapsed {
  display: none;
}

/* ── SMS compose chip toggles (mobile) ── */
.sms-compose-panel--chips {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  gap: 0;
}

.sms-compose-chip-section__label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

.sms-compose-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sms-compose-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.sms-compose-chip--on {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.sms-compose-chip--off {
  border-color: #d1d5db;
  background: #fff;
  color: #4b5563;
}

.sms-compose-chip__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.sms-compose-chip__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 문자 설정 — 수신자/발신자 항목 한 줄 칩 */
.settings-sms-card--recipient .sms-compose-chip-list,
.settings-sms-card--sender-display .sms-compose-chip-list,
.sms-compose-section--chips .sms-compose-chip-list {
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
}

.settings-sms-card--recipient .sms-compose-chip,
.settings-sms-card--sender-display .sms-compose-chip,
.sms-compose-section--chips .sms-compose-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
}

.settings-sms-card--recipient .sms-compose-panel--chips,
.settings-sms-card--sender-display .sms-compose-panel--chips {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
}

@media (max-width: 767px) {
  .settings-sms-card--recipient .sms-compose-chip-list,
  .settings-sms-card--sender-display .sms-compose-chip-list,
  .sms-compose-section--chips .sms-compose-chip-list {
    gap: 5px;
  }

  .settings-sms-card--recipient .sms-compose-chip,
  .settings-sms-card--sender-display .sms-compose-chip,
  .sms-compose-section--chips .sms-compose-chip {
    min-height: 32px;
    padding: 0 5px;
    font-size: 11px;
  }

  .settings-sms-card--recipient .sms-compose-chip__text,
  .settings-sms-card--sender-display .sms-compose-chip__text,
  .sms-compose-section--chips .sms-compose-chip__text {
    font-size: 11px;
  }
}

.sms-compose-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  font-size: 14px;
  color: #374151;
  min-height: 36px;
  box-sizing: border-box;
}

.sms-compose-checkbox__label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
}

.sms-compose-checkbox__sample {
  flex: 0 1 auto;
  margin-left: auto;
  max-width: 46%;
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-align: right;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.sms-compose-checkbox--unchecked .sms-compose-checkbox__sample {
  opacity: 0.45;
}

.sms-compose-checkbox input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.excel-export-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.excel-export-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  min-height: 36px;
}

.excel-export-checkbox input {
  width: 18px;
  height: 18px;
}

.popup--excel-export {
  max-width: 420px;
}

.popup--db-create-choice {
  width: calc(100vw - 32px);
  max-width: 480px;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

.popup-overlay--db-create-choice {
  overflow-x: hidden;
}

.popup--db-create-choice .db-create-choice-hint,
.popup--db-create-choice h2 {
  overflow-wrap: break-word;
  word-break: keep-all;
  white-space: normal;
}

.sidebar-action-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-action-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.sidebar-action-card:hover {
  border-color: #93c5fd;
  background: #f8fbff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.sidebar-action-card__icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.2;
}

.sidebar-action-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sidebar-action-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.sidebar-action-card__subtitle {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.4;
}

.popup--excel-upload {
  max-width: 560px;
  padding: 0;
  overflow: hidden;
}

.excel-upload-modal__header {
  padding: 18px 18px 0;
}

.excel-upload-modal__header h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.excel-upload-modal__desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: #6b7280;
}

.excel-upload-modal__header .btn-excel-download {
  width: 100%;
  margin-bottom: 4px;
}

.excel-upload-dropzone {
  margin: 14px 18px 0;
  padding: 22px 16px;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  text-align: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  cursor: pointer;
}

.excel-upload-dropzone:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.excel-upload-dropzone--dragover {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.excel-upload-dropzone__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
}

.excel-upload-dropzone__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}

.excel-upload-dropzone__or {
  display: block;
  margin: 12px 0;
  font-size: 12px;
  color: #94a3b8;
}

.excel-upload-dropzone__formats {
  margin: 8px 0 0;
  font-size: 12px;
  color: #94a3b8;
}

.btn-excel-upload--pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  cursor: pointer;
}

.excel-upload-selected,
.excel-upload-mapping,
.excel-upload-preview {
  margin: 14px 18px 0;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.excel-upload-selected__title,
.excel-upload-mapping__title,
.excel-upload-preview__title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: #111827;
}

.excel-smart-import-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  color: #4338ca;
  font-size: 12px;
  font-weight: 800;
}

.excel-smart-import-desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}

.excel-smart-import-mapping {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.excel-smart-import-row {
  display: grid;
  grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.excel-smart-import-row__label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.excel-smart-import-row__required {
  margin-left: 2px;
  color: #ef4444;
}

.excel-smart-import-select {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #111827;
}

.excel-smart-import-select:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.excel-smart-import-apply {
  width: 100%;
}

.excel-upload-preview-sample-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.excel-upload-preview-actions {
  margin-top: 12px;
}

.excel-upload-preview-actions .btn-popup-primary {
  width: 100%;
}

.btn-excel-download--secondary {
  background: #fff;
  color: #475569;
  border: 1px solid #d1d5db;
}

.btn-excel-download--secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.excel-upload-selected__meta p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 13px;
}

.excel-upload-selected__label {
  color: #6b7280;
  font-weight: 600;
}

.excel-upload-selected__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.excel-upload-preview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.excel-upload-stat {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.excel-upload-stat span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

.excel-upload-stat strong {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.excel-upload-stat--valid strong {
  color: #047857;
}

.excel-upload-stat--total strong {
  color: #1d4ed8;
}

.excel-upload-stat--duplicate strong {
  color: #b45309;
}

.excel-upload-stat--error strong {
  color: #b91c1c;
}

.excel-upload-preview-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.excel-upload-filter-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
}

.excel-upload-filter-option input {
  margin: 0;
}

.excel-upload-preview-table-wrap {
  max-height: min(36vh, 280px);
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

.excel-upload-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.excel-upload-preview-table th,
.excel-upload-preview-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  vertical-align: middle;
}

.excel-upload-preview-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  font-weight: 700;
  color: #64748b;
  z-index: 1;
}

.excel-upload-preview-status {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.excel-upload-preview-status--valid {
  background: #dcfce7;
  color: #047857;
}

.excel-upload-preview-status--duplicate {
  background: #fef3c7;
  color: #b45309;
}

.excel-upload-preview-status--error {
  background: #fee2e2;
  color: #b91c1c;
}

.excel-upload-preview-empty {
  margin: 0;
  padding: 20px 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

.excel-upload-modal__footer {
  padding: 14px 18px 18px;
}

.excel-upload-selected.hidden,
.excel-upload-mapping.hidden,
.excel-upload-preview.hidden {
  display: none;
}

.db-create-choice-cards {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
  overflow-x: hidden;
}

.db-create-choice-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 18px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.db-create-choice-card:hover {
  border-color: #93c5fd;
  background: #f8fbff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.db-create-choice-card__icon {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1.2;
  margin-top: 1px;
}

.db-create-choice-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.db-create-choice-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.db-create-choice-card__desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.popup--db-create-choice .popup-actions--db-create-choice {
  margin-top: 14px;
  flex-direction: column;
}

.popup--db-create-choice .popup-actions--db-create-choice button {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.popup--manual-field-select {
  max-width: 560px;
}

.manual-field-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.manual-field-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.manual-field-select-count {
  margin: 0;
  font-size: 13px;
  color: #2563eb;
  font-weight: 500;
  white-space: nowrap;
}

.manual-field-presets,
.manual-field-required,
.manual-field-optional {
  margin-top: 16px;
}

.manual-field-preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.manual-field-preset-btn {
  padding: 8px 12px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.manual-field-preset-btn:hover,
.manual-field-preset-btn--active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.manual-field-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

.manual-field-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.manual-field-card--fixed {
  cursor: default;
  background: #f9fafb;
}

.manual-field-card--optional:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.manual-field-card--checked {
  border-color: #2563eb;
  background: #eff6ff;
}

.manual-field-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
}

.manual-field-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.manual-field-card__label {
  font-size: 14px;
  color: #111827;
}

.manual-field-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #4b5563;
  font-size: 11px;
  font-weight: 600;
}

.manual-field-card--custom .manual-field-card__body {
  gap: 10px;
}

.manual-field-card__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.manual-field-card__remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

.manual-field-custom-add {
  margin-top: 12px;
}

.manual-field-custom-add-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.manual-field-custom-add-toggle:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.manual-field-custom-add-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.manual-field-custom-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
}

.manual-field-custom-add-btn {
  flex-shrink: 0;
  min-width: 64px;
}

@media (max-width: 480px) {
  .manual-field-custom-add-form {
    flex-direction: column;
  }

  .manual-field-custom-add-btn {
    width: 100%;
  }
}

.popup--manual-add-modal {
  max-width: 640px;
}

.popup--manual-add-confirm,
.popup--manual-add-success,
.popup--manual-add-duplicate {
  max-width: 560px;
}

.manual-add-copy-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.manual-add-copy-toggle input {
  flex: 0 0 auto;
}

.manual-add-copy-toggle__hint {
  flex: 1 1 100%;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

.manual-add-pending-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}

.manual-add-pending-section__title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #111827;
}

.manual-add-pending-section__count {
  margin: 4px 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.manual-add-pending-table-wrap {
  overflow-x: auto;
}

.manual-add-pending-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.manual-add-pending-table th,
.manual-add-pending-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}

.manual-add-pending-table th {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  background: #f9fafb;
}

.manual-add-pending-actions {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}

.btn-manual-pending-edit,
.btn-manual-pending-delete {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
}

.btn-manual-pending-edit:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.btn-manual-pending-delete:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.manual-add-pending-cards {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.manual-add-pending-card {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.manual-add-pending-card__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.manual-add-pending-card__name {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
}

.manual-add-pending-card__phone {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
}

.manual-add-pending-card__meta {
  font-size: 12px;
  color: #6b7280;
}

.manual-add-pending-card__actions {
  display: flex;
  gap: 6px;
}

.manual-add-form-actions {
  flex-wrap: wrap;
}

.manual-add-edit-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

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

.manual-add-edit-actions .btn-popup-primary,
.manual-add-edit-actions .btn-popup-ghost {
  flex: 1 1 0;
  min-height: 44px;
}

.manual-add-edit-delete {
  width: 100%;
  min-height: 44px;
}

.manual-add-form-actions .btn-popup-primary {
  flex: 1 1 120px;
}

.manual-add-confirm-summary {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.manual-add-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-size: 26px;
  font-weight: 700;
}

.manual-add-success-message {
  margin: 0 0 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.manual-add-success-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.manual-add-duplicate-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.manual-add-duplicate-actions .btn-popup-primary {
  grid-column: 1 / -1;
}

.manual-add-duplicate-preview {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  font-size: 13px;
  color: #374151;
}

@media (max-width: 639px) {
  .manual-add-pending-table-wrap:not(.manual-add-pending-table-wrap--confirm) {
    display: none !important;
  }

  .manual-add-pending-cards:not(.manual-add-pending-cards--confirm) {
    display: flex !important;
  }

  .manual-add-pending-table-wrap--confirm {
    display: none !important;
  }

  .manual-add-pending-cards--confirm {
    display: flex !important;
  }
}

@media (min-width: 640px) {
  .manual-add-pending-cards {
    display: none !important;
  }

  .manual-add-pending-table-wrap {
    display: block !important;
  }
}

.db-manual-add-form .manual-add-grid {
  display: grid;
  gap: 12px;
}

.popup--db-create-success {
  max-width: 420px;
  text-align: center;
}

.db-create-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-size: 28px;
  font-weight: 700;
}

.db-create-success-message {
  margin-top: 8px;
}

.popup--all-calls-completed {
  max-width: 340px;
  text-align: center;
  padding: 28px 22px 22px;
  border-radius: 20px;
}

.all-calls-completed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, #dcfce7 0%, #bbf7d0 55%, #86efac 100%);
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.2);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #16a34a;
}

.popup--all-calls-completed h2 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.all-calls-completed-stats {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: -0.02em;
}

.all-calls-completed-message {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

.all-calls-completed-actions {
  display: block;
}

.all-calls-completed-actions .btn-popup-primary {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
}

.db-list-item__new-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin-left: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

@media (min-width: 480px) {
  .manual-field-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.settings-account-section {
  margin-top: 0;
}

.settings-account-section .settings-subsection-title {
  color: #1f2937;
}

.settings-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}

.settings-account-label {
  font-size: 14px;
  color: #6b7280;
}

.settings-account-value {
  font-size: 14px;
  color: #111827;
}

.settings-account-hint {
  margin-bottom: 16px;
}

.settings-account-actions {
  display: flex;
  gap: 8px;
}

.settings-page .settings-panel + .settings-panel {
  margin-top: 0;
}

@media (max-width: 767px) {
  .sms-compose-panel {
    grid-template-columns: 1fr;
  }

  .excel-export-columns {
    grid-template-columns: 1fr;
  }
}

/* ── 팝업 ── */
.popup-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--overlay);
  z-index: 10000;
}

.popup-overlay.hidden {
  display: none !important;
}

.popup {
  width: 100%;
  max-width: 420px;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 16px;
}

.popup h2 {
  margin-bottom: 12px;
}

.popup-contact-name {
  font-size: var(--font-size-title);
  font-weight: 700;
  color: var(--text-main);
}

.popup-contact-meta {
  margin: 2px 0 0;
  font-size: var(--font-size-caption);
  font-weight: 500;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.popup-contact-phone {
  font-size: var(--font-size-body);
  color: var(--text-sub);
  margin-top: 6px;
}

@media (max-width: 767px) {
  #connect-popup .popup-contact-meta {
    font-size: 13px;
    color: #64748b;
  }
}

.popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.popup-actions button {
  flex: 1 1 calc(50% - 4px);
}

.result-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.missed-sms-fields textarea {
  min-height: 140px;
  font-size: var(--font-size-caption);
  line-height: var(--line-height);
}

.missed-sms-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.missed-sms-actions .missed-sms-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.missed-sms-action-btn__icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}

.missed-sms-actions .btn-save-next,
.missed-sms-actions .btn-save-pause {
  width: 100%;
}

.missed-sms-actions .btn-send-missed-sms {
  border: 2px solid #fee500;
  background: #fffef0;
  color: #191600;
}

.missed-sms-actions .btn-send-missed-sms:hover {
  background: #fee500;
}

.missed-sms-actions .btn-send-missed-sms:focus-visible {
  outline: 2px solid #ca8a04;
  outline-offset: 2px;
}

.missed-sms-actions .btn-save-next {
  border: none;
  background: var(--primary);
  color: #fff;
}

.missed-sms-actions .btn-save-next:hover:not(:disabled) {
  background: var(--primary-hover);
}

.missed-sms-actions .btn-save-pause {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
}

.missed-sms-actions .btn-save-pause:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.missed-sms-actions .btn-save-next:disabled,
.missed-sms-actions .btn-save-pause:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.missed-sms-actions .btn-missed-sms-settings {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
}

.missed-sms-actions .btn-missed-sms-settings:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.missed-sms-actions .btn-missed-sms-settings:focus-visible {
  outline: 2px solid #9ca3af;
  outline-offset: 2px;
}

#result-popup .modal-footer.hidden {
  display: none !important;
}

.result-popup-contact-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}

.result-popup-contact-row .popup-contact-info {
  flex: 1 1 auto;
  min-width: 0;
}

.btn-result-status-manage {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 2px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.btn-result-status-manage:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.btn-result-status-manage:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.modal-stack--behind {
  pointer-events: none;
}

.modal-stack--behind > .popup,
.modal-stack--behind > .modal,
.modal-stack--behind .auth-modal-card {
  opacity: 0.55;
  transform: scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (max-width: 767px) {
  .result-popup-contact-row {
    gap: 8px;
  }

  .btn-result-status-manage {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }
}

.sms-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sms-action-row button {
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.sms-setting-btn {
  background: #ffffff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.sms-setting-btn:hover {
  background: #eff6ff;
}

.popup-overlay--nested {
  /* z-index managed by ModalStack */
}

.popup--missed-sms-settings {
  max-width: 480px;
}

.quick-sms-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-sms-preview-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.quick-sms-preview-section__head .sms-preview-title {
  margin: 0;
}

.quick-sms-compose-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-sms-sender-card {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .sms-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sms-setting-btn {
    grid-column: 1 / -1;
  }

  .popup--missed-sms-settings {
    max-width: none;
    width: calc(100vw - 24px);
  }

  .quick-sms-sender-card {
    padding: 10px 12px;
    border: 1px solid #e8ecf4;
    border-radius: 12px;
    background: #fafbff;
  }

  .quick-sms-sender-card__head {
    margin-bottom: 8px;
  }

  .quick-sms-sender-card .sms-subsection-title {
    margin: 0;
    font-size: 13px;
  }

  .sms-sender-fields--compact {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sms-sender-fields--compact .form-group:first-child {
    grid-column: 1 / -1;
  }

  .sms-sender-fields--compact .form-group label {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .sms-sender-fields--compact .form-group input {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13px;
  }

  .quick-sms-compose-stack .sms-compose-toggle {
    display: none;
  }

  .quick-sms-compose-stack .sms-compose-panel {
    margin-top: 0;
    padding: 0;
    border: none;
    background: transparent;
  }

  .quick-sms-compose-stack .sms-compose-section {
    margin-bottom: 0;
  }

  .quick-sms-save-btn--footer {
    display: none;
  }

  .quick-sms-popup-actions {
    padding-top: 4px;
  }

  .settings-sms-sender-card.sms-sender-bizcard--compact {
    padding-bottom: 4px;
  }

  .settings-sms-sender-card .sms-sender-bizcard__head {
    padding: 8px 12px 6px;
  }

  .settings-sms-sender-card .sms-sender-bizcard__body--compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px 12px;
    align-items: stretch;
  }

  .settings-sms-sender-card .sms-sender-bizcard__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 2px;
    margin-bottom: 2px;
  }

  .settings-sms-sender-card .sms-sender-bizcard__name {
    font-size: 18px;
    line-height: 1.25;
    word-break: keep-all;
  }

  .settings-sms-sender-card .sms-sender-bizcard__role {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #6b7280;
    word-break: keep-all;
  }

  .settings-sms-sender-card .sms-sender-bizcard__role.hidden {
    display: none;
  }

  .settings-sms-sender-card .sms-sender-bizcard__details {
    gap: 6px;
    margin: 0;
    width: 100%;
  }

  .settings-sms-sender-card .sms-sender-bizcard__detail {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    justify-content: stretch;
    padding: 0;
  }

  .settings-sms-sender-card .sms-sender-bizcard__detail-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    line-height: 1.35;
    white-space: nowrap;
  }

  .settings-sms-sender-card .sms-sender-bizcard__detail-value-wrap {
    display: block;
    min-width: 0;
    text-align: left;
  }

  .settings-sms-sender-card .sms-sender-bizcard__detail-icon {
    display: none;
  }

  .settings-sms-sender-card .sms-sender-bizcard__detail-value,
  .settings-sms-sender-card .sms-sender-bizcard__detail-text,
  .settings-sms-sender-card .sms-sender-bizcard__company {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #111827;
    word-break: break-all;
    text-align: left;
  }

  .settings-sms-sender-card .sms-sender-bizcard__company,
  .settings-sms-sender-card .sms-sender-bizcard__detail-value.sms-sender-bizcard__company {
    color: #111827;
  }

  .settings-sms-sender-card .sms-sender-bizcard__company--empty,
  .settings-sms-sender-card .sms-sender-bizcard__detail-value.sms-sender-bizcard__company--empty,
  .settings-sms-sender-card .sms-sender-bizcard__detail-text--empty,
  .settings-sms-sender-card .sms-sender-bizcard__detail-value.sms-sender-bizcard__detail-text--empty {
    color: #9ca3af;
    font-weight: 500;
  }

  .btn-sms-sender-edit {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }

  .settings-sms-card--recipient,
  .settings-sms-card--sender-display {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .settings-sms-card__title--desktop,
  .settings-sms-card__hint--desktop {
    display: none;
  }

  .settings-sms-card--recipient .settings-sms-card__body,
  .settings-sms-card--sender-display .settings-sms-card__body {
    padding: 0;
    margin: 0;
  }

  .settings-sms-card--custom-body .sms-custom-prefix-title {
    display: none;
  }

  .settings-sms-compose-layout {
    gap: 10px;
  }

  /* 모바일: 변수 선택(수신자→발신자) 후 미리보기 흐름 */
  .settings-sms-stack {
    display: flex;
    flex-direction: column;
  }

  .settings-sms-sender-card {
    order: 1;
  }

  .settings-sms-mode-tabs-row {
    order: 2;
  }

  .settings-sms-compose-layout {
    order: 3;
  }

  .settings-sms-preview-card {
    order: 4;
  }

  .settings-sms-save-btn {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }

  .settings-sms-preview-card .sms-preview-box {
    min-height: 120px;
    font-size: 13px;
  }
}

/* 모바일 앱 — 문자 설정 수신자/발신자 항목 카드 전체 너비 */
@media (max-width: 768px) {
  body.is-mobile-app #view-sms .settings-sms-stack {
    width: 100%;
    max-width: none;
    align-items: stretch;
  }

  body.is-mobile-app #view-sms .settings-sms-compose-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: none;
    align-self: stretch;
    box-sizing: border-box;
  }

  body.is-mobile-app #view-sms .settings-sms-card--recipient,
  body.is-mobile-app #view-sms .settings-sms-card--sender-display {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
  }

  body.is-mobile-app #view-sms .settings-sms-card--recipient .settings-sms-card__body,
  body.is-mobile-app #view-sms .settings-sms-card--sender-display .settings-sms-card__body {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body.is-mobile-app #view-sms .settings-sms-card--recipient .sms-compose-panel--chips,
  body.is-mobile-app #view-sms .settings-sms-card--sender-display .sms-compose-panel--chips {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  body.is-mobile-app #view-sms .settings-sms-card--recipient .sms-compose-chip-section__label,
  body.is-mobile-app #view-sms .settings-sms-card--sender-display .sms-compose-chip-section__label {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
  }

  body.is-mobile-app #view-sms .settings-sms-card--recipient .sms-compose-chip-list,
  body.is-mobile-app #view-sms .settings-sms-card--sender-display .sms-compose-chip-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: none;
    gap: 8px;
    box-sizing: border-box;
  }

  body.is-mobile-app #view-sms .settings-sms-card--recipient .sms-compose-chip,
  body.is-mobile-app #view-sms .settings-sms-card--sender-display .sms-compose-chip {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    height: auto;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    box-sizing: border-box;
  }

  body.is-mobile-app #view-sms .settings-sms-card--recipient .sms-compose-chip__text,
  body.is-mobile-app #view-sms .settings-sms-card--sender-display .sms-compose-chip__text {
    font-size: 12px;
    text-align: center;
  }
}

@media (max-width: 360px) {
  body.is-mobile-app #view-sms .settings-sms-card--recipient .sms-compose-chip-list,
  body.is-mobile-app #view-sms .settings-sms-card--sender-display .sms-compose-chip-list {
    flex-wrap: wrap;
  }

  body.is-mobile-app #view-sms .settings-sms-card--recipient .sms-compose-chip,
  body.is-mobile-app #view-sms .settings-sms-card--sender-display .sms-compose-chip {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
  }
}

@media (min-width: 768px) {
  .quick-sms-preview-section__head .quick-sms-save-btn {
    display: none;
  }
}

/* ── 상태 뱃지 ── */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-none {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #d1d5db;
}

.status-missed {
  background: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}

.status-rejected {
  background: #fff7ed;
  color: #f97316;
  border-color: #fdba74;
}

.status-scheduled {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

.status-callback {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

.status-interested {
  background: #f0fdf4;
  color: #22c55e;
  border-color: #bbf7d0;
}

.status-completed {
  background: #f5f3ff;
  color: #8b5cf6;
  border-color: #ddd6fe;
}

.status-processed {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

.hidden {
  display: none !important;
}

/* ── 통화결과 모달 ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--overlay);
  z-index: 10000;
}

.modal-overlay.hidden {
  display: none !important;
}

.modal {
  max-height: min(
    90dvh,
    calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))
  );
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 10px;
}

.modal-footer {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  background: var(--card-bg);
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  z-index: 10;
}

.modal-footer button {
  width: 100%;
}

body.modal-open {
  overflow: hidden;
  height: 100dvh;
  touch-action: none;
}

body.modal-open #appShell,
body.modal-open .app-chrome-sticky,
body.modal-open .app-chrome-header,
body.modal-open .app-service-nav,
body.modal-open #platform-module-bar {
  pointer-events: none;
  user-select: none;
}

.modal-footer--stacked {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-footer--stacked button {
  width: 100%;
}

.btn-save-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-min);
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  background: #fff;
  color: #374151;
  font-family: inherit;
  font-size: var(--font-size-button);
  font-weight: 600;
  line-height: var(--line-height);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-save-pause:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.btn-save-pause:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#result-popup .modal-footer .btn-save-next {
  width: 100%;
}

/* ── 부재중 문자 설정 ── */
.sms-preview-section {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.sms-settings-form .sms-preview-section {
  margin-top: 4px;
}

.sms-preview-title {
  font-size: var(--font-size-caption);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.sms-preview-box {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  max-height: none;
  -webkit-line-clamp: unset;
  font-size: var(--font-size-body);
  line-height: var(--line-height);
  color: var(--text-main);
  padding: 10px;
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.sms-template-variable-help {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  border: 1px solid #bfdbfe;
}

.sms-template-variable-title {
  font-size: var(--font-size-caption);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

.sms-template-variable-list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--font-size-caption);
  color: var(--text-sub);
  line-height: var(--line-height);
}

.popup--sms-send {
  max-width: 520px;
}

.sms-send-intro {
  margin-bottom: 12px;
}

.sms-send-selection-info {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.sms-send-multi-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-size: 13px;
  line-height: 1.5;
  color: #92400e;
}

.sms-send-section-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

.sms-send-variable-section {
  margin-bottom: 14px;
}

.sms-send-variable-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sms-send-variable-btn {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sms-send-variable-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.sms-send-template {
  width: 100%;
  min-height: 180px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
}

.sms-send-template:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.sms-send-preview-box {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  max-height: none;
  -webkit-line-clamp: unset;
}

.sms-send-desktop-notice {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}

.sms-send-actions {
  flex-wrap: wrap;
}

.sms-send-actions .btn-popup-primary {
  flex: 1 1 100%;
}

@media (min-width: 480px) {
  .sms-send-actions .btn-popup-primary {
    flex: 1 1 auto;
  }
}

.customer-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.customer-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.customer-table-header span,
.customer-table-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-table-header .action-column,
.customer-table-col.action-column,
.customer-table-col.customer-actions-cell {
  overflow: visible;
  text-overflow: clip;
}

/* ── 고객 DB 페이지 레이아웃 ── */
.customer-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.customer-stats-section {
  width: 100%;
}

.customer-content-layout {
  display: contents;
}

.customer-left-panel,
.customer-right-panel {
  display: contents;
}

.customer-right-panel {
  min-width: 0;
}

.db-manage-card,
.today-task-card,
.manual-add-card,
.excel-upload-card,
.customer-stats-section,
.customer-list-section,
.contacts-panel {
  min-width: 0;
}

.db-manage-card {
  order: 1;
}

.today-task-card {
  order: 2;
}

.customer-stats-section {
  order: 3;
}

.customer-list-section {
  order: 4;
}

.manual-add-card {
  order: 5;
}

.excel-upload-card {
  order: 6;
}

.db-manage-card,
.today-task-card,
.customer-stats-section,
.customer-list-section,
.manual-add-card,
.excel-upload-card {
  margin-bottom: 0;
}

.tools-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.tools-card-toggle {
  width: 100%;
  min-height: 36px;
  padding: 0 4px;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.tools-card-toggle--open {
  color: var(--primary);
}

.tools-card-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.manual-add-form .btn-save {
  margin-top: 4px;
}

.manual-add-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.manual-add-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.manual-add-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-sub);
}

.form-fields-settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52dvh;
  overflow-y: auto;
}

.form-fields-settings-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.form-fields-settings-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 110px auto auto auto;
  gap: 8px;
  align-items: center;
}

.form-fields-drag-handle {
  border: none;
  background: transparent;
  cursor: grab;
  color: var(--text-sub);
  padding: 0;
}

.form-field-label-input,
.form-field-type-select,
.form-field-options-input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
}

.form-field-options-input {
  margin-top: 8px;
}

.form-field-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  white-space: nowrap;
}

.form-fields-order-actions {
  display: flex;
  gap: 4px;
}

.form-field-move-btn,
.form-field-delete-btn {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.form-field-delete-btn {
  color: var(--danger);
}

.contact-mobile-custom-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.contact-custom-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--border);
  font-size: 12px;
}

.contact-custom-chip__label {
  color: var(--text-sub);
  font-weight: 600;
}

.contact-custom-chip__value {
  color: var(--text-main);
  font-weight: 700;
}

.customer-detail-custom-fields:not(:empty) {
  margin-top: 4px;
}

.btn-reset-form-fields {
  min-height: 34px;
  font-size: 12px;
}

.manual-add-note {
  grid-column: 1 / -1;
}

.excel-upload-card .excel-upload-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.excel-upload-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.excel-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.excel-export-checkbox--required {
  opacity: 0.92;
}

.excel-export-checkbox--required input:disabled {
  cursor: not-allowed;
}

.dashboard-sidebar,
.dashboard-main {
  min-width: 0;
}

.excel-hint--important {
  color: var(--danger);
  font-weight: 600;
}

.sync-status-banner,
.sync-toast {
  font-size: var(--font-size-caption);
  line-height: var(--line-height);
}

.sync-toast__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: inherit;
}

.sync-toast__sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: inherit;
  opacity: 0.92;
}

.today-task-detail__row--status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 28px;
}

.today-task-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.today-task-detail__schedule-name {
  display: block;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #2563eb;
}

.today-task-detail__status--scheduled {
  background: #eff6ff;
  color: #1d4ed8;
}

.today-task-detail__status--completed {
  background: #ecfdf5;
  color: #047857;
}

.today-task-detail__status--overdue {
  background: #fef2f2;
  color: #b91c1c;
}

.calendar-event-detail-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.calendar-event-detail-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 8px;
}

.calendar-event-detail-status-row .detail-label {
  flex: 0 0 auto;
}

.calendar-event-detail-status-wrap {
  display: inline-flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.btn-calendar-event-change-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-calendar-event-change-status:hover {
  background: #dbeafe;
}

.calendar-event-detail-status--callback,
.calendar-event-detail-status--scheduled {
  background: #eff6ff;
  color: #1d4ed8;
}

.calendar-event-detail-status--new {
  background: #ecfdf5;
  color: #15803d;
}

.calendar-event-detail-status--completed {
  background: #f3f4f6;
  color: #6b7280;
}

.calendar-event-detail-status--overdue {
  background: #fef2f2;
  color: #b91c1c;
}

.calendar-schedule-status-sheet {
  z-index: 10150;
}

.calendar-schedule-status-sheet__hint {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-sub);
}

.calendar-schedule-status-sheet__options {
  padding-top: 8px;
}

.calendar-schedule-status-sheet__option {
  align-items: flex-start;
  gap: 10px;
}

.calendar-schedule-status-sheet__option-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.calendar-schedule-status-sheet__option-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.calendar-schedule-status-sheet__option-copy strong {
  font-size: 14px;
  color: var(--text-main);
}

.calendar-schedule-status-sheet__desc {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-sub);
}

.calendar-schedule-status-sheet__dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  flex-shrink: 0;
}

.calendar-schedule-status-sheet__dot--callback {
  background: #2563eb;
}

.calendar-schedule-status-sheet__dot--new {
  background: #16a34a;
}

.calendar-schedule-status-sheet__dot--completed {
  background: #9ca3af;
}

.calendar-schedule-status-sheet__current-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
}

.calendar-schedule-status-sheet__option[disabled] {
  opacity: 1;
  cursor: default;
}

.today-task-detail__status-label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}

.today-task-detail__status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/* ── 오늘 일정 ── */
.sidebar-card--today {
  border-radius: 16px;
}

.sidebar-card--today .today-tasks-card {
  padding: 20px;
  border-radius: 16px;
  background: #fff;
}

.today-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}

.today-tasks-header__lead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.today-tasks-header__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
}

.today-tasks-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: #111827;
}

.today-tasks-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  font-size: 13px;
  color: #6b7280;
}

.today-tasks-summary__dot {
  color: #d1d5db;
  font-weight: 700;
}

.today-tasks-count--overdue {
  color: #dc2626;
}

.today-tasks-carousel__content {
  min-width: 0;
}

.today-tasks-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 14px 0;
}

.today-task-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.today-task-detail__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.today-task-detail__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #9ca3af;
}

.today-task-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.today-task-icon--title {
  width: 16px;
  height: 16px;
}

.today-task-detail__time {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.3;
}

.today-task-detail__name {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  line-height: 1.35;
  word-break: break-word;
}

.today-task-detail__phone {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.today-task-card-memo {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}

.today-task-card-memo-label {
  font-size: 12px;
  font-weight: 800;
  color: #374151;
  margin-bottom: 6px;
}

.today-task-card-memo-text {
  font-size: 13px;
  color: #111827;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.today-task-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.today-task-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

.today-task-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.today-task-btn__svg {
  width: 22px;
  height: 22px;
  display: block;
}

.today-task-btn__label {
  line-height: 1;
}

.today-task-btn--call {
  border: none;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
}

.today-task-btn--call:hover {
  filter: brightness(1.05);
}

.today-task-btn--sms,
.today-task-btn--reschedule {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
}

.today-task-btn--sms:hover,
.today-task-btn--reschedule:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.today-task-btn--complete {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.today-task-btn--complete:hover {
  background: #dcfce7;
  border-color: #86efac;
}

.today-task-actions .btn-today-call {
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  padding: 0 12px;
}

.today-tasks-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.today-tasks-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #6b7280;
  font-size: 11px;
  cursor: pointer;
}

.today-tasks-carousel__btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

.today-tasks-carousel__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.today-tasks-carousel__indicator {
  min-width: 48px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.today-tasks-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.today-tasks-footer__btn {
  flex: 0 0 auto;
  min-height: 44px;
  height: auto;
  padding: 8px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #6b7280;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.today-tasks-footer__btn:hover:not(:disabled) {
  background: transparent;
  color: #374151;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.today-copy-schedule:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.today-task-empty {
  text-align: center;
  color: var(--text-sub);
  padding: 20px 8px;
  font-size: 13px;
}

@media (max-width: 768px) {
  .sidebar-card--today .today-tasks-card {
    padding: 20px;
  }

  .today-tasks-divider {
    margin: 10px 0;
  }

  .today-task-detail {
    gap: 8px;
  }

  .today-task-detail__time {
    font-size: 17px;
  }

  .today-task-detail__name {
    font-size: 18px;
  }

  .today-task-detail__phone {
    font-size: 17px;
  }

  .today-task-card-memo {
    margin-top: 2px;
    padding-top: 10px;
  }

  .today-task-actions {
    gap: 8px;
    margin-top: 2px;
  }

  .today-task-btn {
    min-height: 44px;
    height: 44px;
    font-size: 14px;
    border-radius: 12px;
  }

  .today-task-actions .btn-today-call {
    height: 44px;
    min-height: 44px;
  }

  .today-tasks-footer {
    margin-top: 10px;
    padding-top: 10px;
    gap: 28px;
  }

  .today-tasks-footer__btn {
    min-height: 44px;
    padding: 10px 8px;
    font-size: 16px;
  }

  .today-tasks-carousel__nav {
    margin-top: 8px;
  }
}

.todo-info,
.today-task-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.todo-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.todo-action {
  flex-shrink: 0;
}

.todo-call-btn,
.btn-today-call {
  width: 110px;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: var(--font-size-button);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .todo-item,
  .today-task-item {
    gap: 10px;
  }

  .todo-call-btn,
  .btn-today-call {
    width: 90px;
    height: 40px;
    min-height: 40px;
    font-size: 14px;
    padding: 0 8px;
  }
}

/* =========================
   3. PC 전용 (768px 이상)
========================= */
@media (min-width: 768px) {
  :root {
    --app-service-nav-height: 58px;
    --app-chrome-stack-height: calc(var(--app-chrome-header-height) + var(--app-service-nav-height));
  }

  body:not(.is-legal) {
    padding: 24px;
  }

  .app-container,
  .container {
    max-width: var(--app-chrome-max-width, 1280px);
    padding: 0 var(--app-chrome-padding-x, 20px);
  }

  header,
  .app-header {
    margin-bottom: 24px;
  }

  .header-top {
    display: grid;
    grid-template-columns: 1fr minmax(0, max-content) 1fr;
    align-items: start;
    gap: 16px;
  }

  .brand-header {
    grid-column: 2;
    justify-self: center;
    width: auto;
    max-width: none;
  }

  .header-actions {
    grid-column: 3;
    justify-self: end;
    align-self: start;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
  }

  .user-email-label {
    display: inline;
    width: auto;
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .save-status {
    flex-shrink: 0;
  }

  .btn-logout {
    flex-shrink: 0;
  }

  .main-tabs {
    position: static;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .app-service-nav .main-tabs {
    margin-bottom: 0;
  }

  .main-tab {
    flex: 1 1 0;
    min-width: 96px;
    height: 46px;
    min-height: 46px;
    font-size: 15px;
    border-radius: var(--radius);
  }

  .db-tabs {
    flex-wrap: wrap;
    overflow: visible;
  }

  .btn-db-tab {
    height: 44px;
    min-height: 44px;
    font-size: 14px;
  }

  #view-calendar .calendar-section {
    padding: 18px;
    border-radius: 18px;
  }

  #view-calendar .calendar-month-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  #view-calendar .calendar-month-label {
    text-align: left;
    font-size: 22px;
    flex: 1;
  }

  #view-calendar .calendar-nav {
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  #view-calendar .btn-month-nav {
    flex: 0 0 auto;
    height: 44px;
    min-height: 44px;
    font-size: 14px;
    border-radius: var(--radius);
  }

  #view-calendar .calendar-weekday {
    font-size: 12px;
  }

  #view-calendar .calendar-grid {
    gap: 6px;
  }

  #view-calendar .calendar-day {
    min-height: 86px;
    padding: 6px;
    border-radius: 12px;
    font-size: 12px;
  }

  #view-calendar .calendar-event,
  #view-calendar .calendar-event-more {
    font-size: 11px;
    padding: 3px 5px;
    margin-top: 3px;
  }

  #view-calendar .calendar-day--empty:hover::after {
    font-size: 10px;
  }

  .customer-page {
    gap: 16px;
  }

  .customer-content-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .customer-left-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .customer-right-panel {
    display: block;
    min-width: 0;
  }

  .db-manage-card,
  .today-task-card,
  .manual-add-card,
  .excel-upload-card,
  .customer-stats-section,
  .customer-list-section {
    order: initial;
  }

  .db-manage-card,
  .today-task-card,
  .customer-stats-section,
  .customer-list-section,
  .manual-add-card,
  .excel-upload-card,
  .tools-card {
    padding: 20px;
  }

  .manual-add-grid {
    grid-template-columns: 1fr;
  }

  .form-fields-settings-row {
    grid-template-columns: 1fr;
  }

  .excel-upload-card .excel-upload-actions {
    flex-direction: column;
  }

  .kpi-strip__track {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .kpi-strip__item {
    flex: 0 0 auto;
    min-width: 108px;
    padding: 12px 14px;
  }

  .stats-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
  }

  .stats-grid .stat-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    min-height: 56px;
  }

  .stats-grid.stats-grid--scroll .stat-card {
    flex: 1 0 120px;
    min-width: 120px;
  }

  .form-section,
  .list-section {
    width: 100%;
  }

  .customer-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .customer-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .contact-list-header,
  .customer-table-header,
  .contact-item {
    display: grid;
    grid-template-columns: var(
      --contact-table-columns,
      52px minmax(180px, 1fr) 260px 160px 180px
    );
    column-gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }

  .contact-item--drawer-row {
    cursor: pointer;
  }

  .contact-item--drawer-open {
    background: var(--primary-soft);
    box-shadow: inset 3px 0 0 var(--primary);
  }

  .contact-list-header,
  .customer-table-header {
    padding: 12px 10px;
    background: var(--surface-muted);
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 13px;
    font-weight: 800;
    color: #374151;
    border: 1px solid var(--border);
    border-bottom: none;
  }

  .contact-list-header span,
  .customer-table-header span,
  .customer-table-col {
    box-sizing: border-box;
    padding: 0 4px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .select-column,
  .contact-select-col,
  .contact-select-cell.contact-desktop-only {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    flex-shrink: 0;
    justify-self: center;
  }

  .name-column,
  .customer-name-cell {
    min-width: 0;
    max-width: none;
    white-space: normal;
    flex-shrink: 1;
    justify-self: stretch;
    text-align: left;
  }

  .contact-name-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
  }

  .contact-name-meta {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: #8a8f98;
    letter-spacing: -0.01em;
  }

  .customer-name-cell .customer-name,
  .contact-item .customer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .phone-column,
  .customer-phone-cell {
    width: 260px;
    min-width: 0;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    text-align: left;
  }

  .contact-item .phone-text,
  .contact-item .contact-phone.phone-column {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .customer-table--detailed .contact-organization,
  .customer-table--detailed .contact-position {
    color: var(--text-sub);
  }

  .memo-column,
  .customer-memo-cell,
  .contact-memo {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .contact-last-call,
  .col-last {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .action-column,
  .customer-actions-cell,
  .customer-actions.action-column {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    flex-shrink: 0;
    justify-self: center;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    text-align: center;
  }

  .customer-table-header .action-column {
    text-align: center;
    justify-self: center;
  }

  .customer-table-header .name-column,
  .customer-table-header .phone-column {
    text-align: left;
    justify-self: stretch;
  }

  .customer-table-header .status-column {
    text-align: center;
    justify-self: center;
  }

  .customer-actions-cell .contact-actions,
  .customer-actions-cell.customer-actions,
  .customer-actions.action-column {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  .customer-list {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: visible;
    background: var(--card-bg);
    width: 100%;
    max-width: none;
  }

  .contact-block {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .contact-block:last-child {
    border-bottom: none;
  }

  .contact-item {
    align-items: center;
    padding: 12px 10px;
    margin-bottom: 0;
    background: var(--card-bg);
    border-radius: 0;
    border: none;
    box-shadow: none;
    width: 100%;
    min-width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  .contact-detail-panel {
    width: 100%;
    padding: 12px 14px 14px;
    border-top: 1px dashed var(--border);
    background: #f8fafc;
    box-sizing: border-box;
  }

  .contact-detail-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
  }

  @media (max-width: 1023px) {
    .contact-detail-panel__grid {
      grid-template-columns: 1fr;
    }
  }

  .contact-detail-panel__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
  }

  .contact-detail-panel__label {
    flex: 0 0 88px;
    font-weight: 700;
    color: #6b7280;
  }

  .contact-detail-panel__value {
    min-width: 0;
    color: #111827;
    font-weight: 600;
    word-break: break-word;
  }

  .contact-list--detailed .contact-block--active .contact-detail-panel,
  .contact-list--detailed .contact-block:has(.contact-item--active) .contact-detail-panel {
    background: #f0f7ff;
  }

  .contact-item:hover {
    background: #f9fafb;
  }

  .contact-item--active {
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px var(--primary);
  }

  .contact-info {
    display: contents;
  }

  .contact-name-cell {
    min-width: 0;
    overflow: hidden;
  }

  .contact-name,
  .customer-name {
    display: block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 800;
  }

  .contact-organization,
  .contact-position {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--text-sub);
    padding: 0 4px;
  }

  .contact-status-cell.status-column,
  .status-cell.status-column {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    overflow: hidden;
  }

  .contact-status-cell.status-column .status-badge {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contact-call-count {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    color: var(--text-main);
    font-size: 14px;
    white-space: nowrap;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    text-align: center;
  }

  .contact-last-call {
    color: var(--text-sub);
    font-size: 14px;
    white-space: nowrap;
    padding: 0 4px;
    overflow: visible;
    text-overflow: clip;
    flex-shrink: 0;
  }

  .contact-mobile-only {
    display: none;
  }

  .contact-item > .contact-mobile-only,
  .contact-item > .contact-mobile-basic-only {
    display: none !important;
  }

  .contact-actions,
  .customer-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  .customer-actions button,
  .customer-actions .btn-call,
  .customer-actions .btn-contact-detail,
  .customer-actions .btn-delete-direct {
    flex: 0 0 64px;
    width: 64px;
    min-width: 64px;
    height: 38px;
    min-height: 38px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }
}

/* =========================
   4. 모바일 전용 보정 (767px 이하)
========================= */
@media (max-width: 767px) {
  .brand-title-row {
    gap: 6px;
  }

  .brand-en {
    font-size: 30px;
  }

  .brand-kr {
    font-size: 16px;
  }

  .brand-sub-en {
    font-size: 10px;
    letter-spacing: 1.6px;
  }

  .brand-sub-kr {
    font-size: 11px;
  }

  .header-actions {
    justify-content: center;
  }

  .popup-actions button {
    flex: 1 1 100%;
  }

  .contact-list-header,
  .customer-table-header {
    display: none;
  }

  .contact-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: unset;
  }

  .contact-info {
    display: block;
    width: 100%;
  }

  .contact-desktop-only {
    display: none !important;
  }

  .customer-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .customer-card-header .customer-name {
    display: block;
    min-width: 0;
    flex: 1;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.25;
    margin-bottom: 0;
  }

  .customer-card-header .contact-status-cell.status-column {
    flex-shrink: 0;
    margin: 0;
    min-width: 120px;
    width: auto;
    justify-content: flex-end;
  }

  .contact-mobile-only.phone-column {
    display: block;
    margin-top: 6px;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    word-break: keep-all;
    overflow: visible;
    min-width: 160px;
    width: auto;
    max-width: 100%;
  }

  .contact-item--detailed {
    padding: 18px 20px;
    background: var(--card-bg);
  }

  .contact-item--detailed .contact-mobile-detail-card {
    display: block;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .contact-item--detailed .contact-mobile-basic-only {
    display: none !important;
  }

  .contact-item--basic .contact-mobile-detail-card {
    display: none !important;
  }

  .contact-mobile-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
  }

  .status-badge {
    flex-shrink: 0;
  }

  .contact-call-count,
  .contact-last-call {
    display: block;
  }

  .contact-call-count::before {
    content: "통화 ";
    color: var(--text-sub);
    font-weight: 600;
  }

  .contact-last-call::before {
    content: "마지막 통화: ";
    color: var(--text-sub);
    font-weight: 600;
  }

  .contact-mobile-details {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f9fafb;
    overflow: hidden;
  }

  .contact-mobile-details-summary {
    cursor: pointer;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    list-style: none;
  }

  .contact-mobile-details-summary::-webkit-details-marker {
    display: none;
  }

  .contact-mobile-details-body {
    padding: 0 12px 10px;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
  }

  .contact-actions,
  .customer-actions {
    display: none !important;
  }

  .contact-mobile-only {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .contact-item > .contact-mobile-only,
  .contact-item > .contact-mobile-basic-only {
    display: flex !important;
    flex-direction: column;
  }

  .contact-mobile-row__status .status-badge,
  .contact-mobile-row__head .status-badge {
    min-width: 0;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
  }

  .contact-item .status-badge,
  .customer-card-header .status-badge {
    min-width: 0;
  }

  .contact-item.contact-item--drawer-row {
    cursor: default;
  }

  .customer-card-header .contact-status-cell.status-column {
    flex-shrink: 0;
    margin: 0;
    min-width: 0;
    width: auto;
    justify-content: flex-end;
  }
}

/* ── 관리자 대시보드 ── */
#view-admin {
  width: 100%;
}

.admin-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.admin-page-title {
  font-size: var(--font-size-title);
  line-height: var(--line-height);
  color: var(--header-text);
  font-weight: 700;
  margin-bottom: 4px;
}

.admin-subnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.admin-subnav::-webkit-scrollbar {
  display: none;
}

.admin-inner-subnav {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 12px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 100%;
}

.admin-inner-subnav__item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--header-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.admin-inner-subnav__item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.admin-inner-subnav__item--active {
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.admin-inner-panel.hidden {
  display: none;
}

.admin-analysis {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-analysis__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-analysis__overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-analysis__overview-head {
  margin-bottom: 0;
}

.admin-analysis__detail.is-expanded {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
  padding-top: 0;
}

.admin-analysis__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-subnav__item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--header-text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.admin-subnav__item:hover {
  background: rgba(255, 255, 255, 0.14);
}

.admin-subnav__item--active {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
}

.admin-panel {
  display: block;
}

.admin-panel.hidden {
  display: none;
}

@media (max-width: 768px) {
  .admin-subnav {
    gap: 6px;
    margin-bottom: 8px;
  }

  .admin-subnav__item {
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }

  .admin-inner-subnav {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
  }

  .admin-inner-subnav__item {
    min-height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }

  .admin-page-title {
    margin-bottom: 8px;
  }
}

.admin-skeleton-card {
  position: relative;
  overflow: hidden;
  min-height: 88px;
}

.admin-skeleton-card::after,
.admin-skeleton-line::after,
.admin-skeleton-table__row::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: admin-skeleton-shimmer 1.2s ease-in-out infinite;
}

.admin-skeleton-line {
  position: relative;
  overflow: hidden;
  height: 12px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #e5e7eb;
}

.admin-skeleton-line--title {
  width: 42%;
  height: 14px;
}

.admin-skeleton-line--short {
  width: 28%;
}

.admin-skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-skeleton-table__row {
  position: relative;
  overflow: hidden;
  height: 42px;
  border-radius: 10px;
  background: #eef2f7;
}

@keyframes admin-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.admin-grid > .admin-empty {
  grid-column: 1 / -1;
}

.admin-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.admin-card--metric {
  text-align: left;
}

.admin-card-title,
.admin-section-title {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: var(--line-height);
  color: var(--text-main);
  font-weight: 700;
}

.admin-metric {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--bg-main);
}

.admin-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-section {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.admin-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-breakdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-muted);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: var(--font-size-caption);
  line-height: var(--line-height);
}

.admin-breakdown-label {
  color: var(--text-main);
}

.admin-breakdown-value {
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
}

.admin-chart-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-chart-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: center;
}

.admin-chart-label {
  font-size: var(--font-size-small);
  color: var(--text-sub);
  font-weight: 600;
}

.admin-chart-track {
  height: 10px;
  background: var(--surface-muted);
  border-radius: 999px;
  overflow: hidden;
}

.admin-chart-fill {
  height: 100%;
  border-radius: 999px;
  min-width: 4px;
}

.admin-chart-fill--all {
  background: var(--primary);
}

.admin-chart-fill--calls {
  background: #6366f1;
}

.admin-chart-value {
  font-size: var(--font-size-small);
  color: var(--text-sub);
  font-weight: 600;
  white-space: nowrap;
}

.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: var(--line-height);
}

.admin-table thead th {
  background: var(--surface-muted);
  color: var(--text-sub);
  font-weight: 700;
  white-space: nowrap;
}

.admin-table th,
.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--text-main);
}

.admin-table tbody tr:hover {
  background: var(--primary-soft);
}

.admin-users-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-users-heading__title {
  margin-bottom: 4px;
  font-size: 18px;
}

.admin-users-heading__desc {
  margin: 0;
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.5;
}

#admin-users-list.admin-table-wrap {
  overflow: visible;
}

.admin-users-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-users-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-users-kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.admin-users-kpi-card:hover {
  transform: translateY(-2px);
  border-color: #c7d2fe;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.1);
}

.admin-users-kpi-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #eff6ff;
  font-size: 20px;
  flex-shrink: 0;
}

.admin-users-kpi-card--green .admin-users-kpi-card__icon {
  background: #ecfdf5;
}

.admin-users-kpi-card--blue .admin-users-kpi-card__icon {
  background: #eff6ff;
}

.admin-users-kpi-card--purple .admin-users-kpi-card__icon {
  background: #f5f3ff;
}

.admin-users-kpi-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-users-kpi-card__label {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-users-kpi-card__value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #0f172a;
  font-size: 26px;
  font-weight: 850;
  line-height: 1;
}

.admin-users-kpi-card__value span {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.admin-users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-users-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.admin-users-filter {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.admin-users-filter:hover {
  color: #0f172a;
  transform: scale(1.02);
}

.admin-users-filter--active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.admin-users-plan-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.admin-users-plan-filter {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-users-plan-filter:hover {
  border-color: #c7d2fe;
  color: #4338ca;
}

.admin-users-plan-filter--active {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #4338ca;
}

.admin-users-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: min(320px, 100%);
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  color: #94a3b8;
}

.admin-users-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}

.admin-users-table-shell {
  overflow: visible;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.admin-users-table {
  border-collapse: separate;
  border-spacing: 0;
}

.admin-users-table thead th {
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  letter-spacing: -0.01em;
  border-bottom: 1px solid #e5e7eb;
}

.admin-users-table th:first-child {
  border-top-left-radius: 16px;
}

.admin-users-table th:last-child {
  border-top-right-radius: 16px;
}

.admin-users-table th,
.admin-users-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}

.admin-users-table tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.56);
}

.admin-users-table tbody tr {
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.admin-users-table tbody tr:hover {
  background: #f8fbff;
  box-shadow: inset 3px 0 0 var(--primary);
}

.admin-users-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-user-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.admin-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.admin-user-avatar--tone-1 {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
}

.admin-user-avatar--tone-2 {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.admin-user-avatar--tone-3 {
  background: linear-gradient(135deg, #059669, #34d399);
}

.admin-user-avatar--tone-4 {
  background: linear-gradient(135deg, #ea580c, #fb923c);
}

.admin-user-avatar--tone-5 {
  background: linear-gradient(135deg, #db2777, #f472b6);
}

.admin-user-identity__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-user-identity__name {
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.admin-user-identity__name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-user-identity__email {
  max-width: 230px;
  color: #64748b;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-users-company-pill,
.admin-users-job-badge,
.admin-users-team,
.admin-users-call-count,
.admin-chinaread-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-users-company-pill {
  background: #f1f5f9;
  color: #475569;
}

.admin-users-job-badge--sales {
  background: #eff6ff;
  color: #2563eb;
}

.admin-users-job-badge--muted {
  background: #f1f5f9;
  color: #64748b;
}

.admin-users-job-badge--admin {
  background: #f5f3ff;
  color: #7c3aed;
}

.admin-users-team {
  background: #f8fafc;
  color: #475569;
}

.admin-users-call-count {
  background: #fff7ed;
  color: #c2410c;
}

.admin-users-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.admin-users-plan-badge--free {
  background: #f3f4f6;
  color: #6b7280;
}

.admin-users-plan-badge--pro {
  background: #eff6ff;
  color: #2563eb;
}

.admin-users-plan-badge--pro-plus {
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
  color: #6d28d9;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.22),
    0 4px 12px rgba(124, 58, 237, 0.14);
}

.admin-users-plan-badge--business {
  background: #fff7ed;
  color: #c2410c;
}

.admin-users-plan-badge--enterprise {
  background: #111827;
  color: #f9fafb;
}

.admin-users-chinalead-usage {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.admin-users-chinalead-usage--unlimited {
  color: #7c3aed;
}

.admin-users-chinalead-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
}

.admin-plan-change-details {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  list-style: none;
}

.admin-plan-change-details li {
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
}

.admin-plan-change-details li + li {
  margin-top: 4px;
}

.admin-users-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.admin-users-role-badge--user {
  background: #f3f4f6;
  color: #6b7280;
}

.admin-users-role-badge--admin {
  background: #eff6ff;
  color: #1d4ed8;
}

.admin-users-role-badge--super_admin {
  background: #fef3c7;
  color: #b45309;
}

.admin-system-panel__card {
  padding: 20px;
  border: 1px solid var(--sc-border);
  border-radius: 12px;
  background: #fff;
}

.admin-system-panel__hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sc-muted);
}

.admin-leads-db__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-leads-db__search {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-leads-db__search-input,
.admin-leads-db__status-filter {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #111827;
}

.admin-leads-db__status-filter {
  flex: 0 0 auto;
  min-width: 180px;
  width: auto;
}

.admin-leads-db__summary {
  margin: 0 0 12px;
  font-size: 14px;
  color: #475569;
}

.admin-leads-db__table-wrap {
  overflow-x: auto;
}

.admin-leads-db__table {
  min-width: 1100px;
}

.admin-leads-db__cell--name strong {
  color: #111827;
}

.admin-leads-db__cell--phone,
.admin-leads-db__cell--num,
.admin-leads-db__cell--date {
  white-space: nowrap;
}

.admin-leads-db__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-leads-db__badge--count {
  background: #eef2ff;
  color: #4338ca;
}

.admin-leads-db__badge--phone-none {
  background: #f3f4f6;
  color: #6b7280;
}

.admin-leads-db__badge--phone-pending {
  background: #fef3c7;
  color: #b45309;
}

.admin-leads-db__badge--phone-verifying {
  background: #dbeafe;
  color: #1d4ed8;
}

.admin-leads-db__badge--phone-verified {
  background: #dcfce7;
  color: #15803d;
}

.admin-leads-db__badge--phone-conflict {
  background: #fee2e2;
  color: #b91c1c;
}

.admin-leads-db__badge--approve {
  background: #f3f4f6;
  color: #6b7280;
}

.admin-leads-db__badge--approve-yes {
  background: #ecfdf5;
  color: #047857;
}

.admin-leads-db__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-leads-db__action {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.admin-btn--danger {
  border-color: #fecaca;
  color: #dc2626;
  background: #fff;
}

.admin-btn--danger:hover {
  background: #fef2f2;
}

.admin-leads-db__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.admin-leads-db-modal-overlay {
  z-index: 12000;
}

.admin-leads-db-modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  color: #111827;
  border-radius: 16px;
  padding: 20px;
}

.admin-leads-db-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-leads-db-modal__head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.admin-leads-db-modal__close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}

.admin-leads-db-modal__body p {
  margin: 0 0 8px;
  font-size: 14px;
  color: #374151;
}

.admin-leads-db-modal__subheading {
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.admin-leads-db-modal__groups,
.admin-leads-db-modal__history {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #374151;
}

.admin-leads-db-modal__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.admin-users-super-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.18);
}

.admin-chinaread-toggle--switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.admin-chinaread-toggle--switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-chinaread-switch {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.admin-chinaread-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
  transition: transform 0.18s ease;
}

.admin-chinaread-toggle--switch input:checked + .admin-chinaread-switch {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.admin-chinaread-toggle--switch input:checked + .admin-chinaread-switch::after {
  transform: translateX(18px);
}

.admin-chinaread-toggle--switch input:disabled + .admin-chinaread-switch {
  opacity: 0.75;
  cursor: not-allowed;
}

.admin-chinaread-toggle__label {
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.admin-chinaread-note {
  margin-left: 8px;
  background: #f5f3ff;
  color: #7c3aed;
}

.admin-users-action-menu {
  position: relative;
  display: inline-flex;
}

.admin-users-action-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.admin-users-action-trigger::-webkit-details-marker {
  display: none;
}

.admin-users-action-trigger::after {
  content: "⌄";
  margin-left: 6px;
  color: #94a3b8;
  font-size: 12px;
}

.admin-users-action-menu[open] .admin-users-action-trigger,
.admin-users-action-trigger:hover {
  transform: scale(1.02);
  border-color: #c7d2fe;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.admin-users-action-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.admin-users-action-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

.admin-users-action-group__label {
  padding: 4px 10px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.admin-users-action-item--plan {
  text-align: left;
}

.admin-users-action-item--plan.admin-users-action-item--current {
  opacity: 0.45;
  cursor: not-allowed;
}

.popup--admin-plan-change .popup-hint {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
}

.admin-users-action-item {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.admin-users-action-item:hover {
  background: #f8fafc;
  color: #0f172a;
}

.admin-users-action-item:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.admin-users-action-item--danger {
  color: #dc2626;
}

.admin-users-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.admin-users-page-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-users-page-size select {
  min-height: 32px;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
}

.admin-users-page-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-users-page-btn,
.admin-users-reset-btn,
.admin-users-empty-state__btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.admin-users-page-btn:hover:not(:disabled),
.admin-users-reset-btn:hover,
.admin-users-empty-state__btn:hover {
  transform: scale(1.02);
  border-color: #c7d2fe;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.admin-users-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-users-page-current {
  color: #0f172a;
}

.admin-users-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
  padding: 32px 16px;
  color: #64748b;
  text-align: center;
}

.admin-users-empty-state--compact {
  min-height: 260px;
}

.admin-users-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #eff6ff;
  font-size: 26px;
}

.admin-users-empty-state strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 850;
}

.admin-users-empty-state p {
  margin: 0;
  font-size: 13px;
}

.admin-log-detail {
  display: inline-block;
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: var(--text-sub);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.admin-log-detail:hover {
  color: var(--primary);
}

.admin-log-detail--expanded {
  display: block;
  max-width: none;
  white-space: normal;
  overflow: visible;
  word-break: break-all;
  background: var(--surface-muted);
  padding: 8px;
  border-radius: var(--radius);
}

.admin-empty {
  text-align: center;
  color: var(--text-sub);
  padding: 20px 12px;
  font-size: var(--font-size-caption);
  line-height: var(--line-height);
}

@media (min-width: 768px) {
  .admin-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .admin-row--split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .admin-page-title {
    font-size: 1.35rem;
  }
}

@media (max-width: 767px) {
  .admin-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-card,
  .admin-section {
    padding: 12px;
  }

  .admin-metric {
    font-size: 22px;
  }

  .admin-log-table {
    min-width: 680px;
  }

  .admin-users-table {
    min-width: 0;
  }

  .admin-users-heading {
    margin-bottom: 14px;
  }

  .admin-users-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-users-kpi-card {
    min-height: 82px;
    padding: 12px;
    border-radius: 14px;
  }

  .admin-users-kpi-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 18px;
  }

  .admin-users-kpi-card__value {
    font-size: 22px;
  }

  .admin-users-toolbar {
    align-items: stretch;
  }

  .admin-users-filters,
  .admin-users-search {
    width: 100%;
  }

  .admin-users-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .admin-users-filter {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 6px;
    white-space: nowrap;
    text-align: center;
    font-size: clamp(11px, 3vw, 12px);
  }

  .admin-users-plan-filters {
    gap: 8px;
  }

  .admin-users-plan-filter {
    min-height: 34px;
    flex: 1 1 auto;
    text-align: center;
  }

  .admin-users-search {
    min-width: 0;
  }

  .admin-users-table thead {
    display: none;
  }

  .admin-users-table,
  .admin-users-table tbody,
  .admin-users-table tr,
  .admin-users-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .admin-users-table tr {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  }

  .admin-users-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
  }

  .admin-users-table td:last-child {
    border-bottom: none;
  }

  .admin-users-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-sub);
    flex-shrink: 0;
  }

  .admin-users-table-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .admin-users-table tbody tr:nth-child(even),
  .admin-users-table tbody tr:hover {
    background: #fff;
  }

  .admin-user-identity {
    min-width: 0;
    justify-content: flex-end;
  }

  .admin-user-identity__email {
    max-width: 170px;
  }

  .admin-users-action-menu {
    display: flex;
    justify-content: flex-end;
  }

  .admin-users-action-list {
    right: 0;
  }

  .admin-users-pagination {
    align-items: stretch;
  }

  .admin-users-pagination__meta,
  .admin-users-page-size,
  .admin-users-page-controls {
    width: 100%;
    justify-content: space-between;
  }

  .admin-log-detail {
    max-width: 220px;
  }

  .admin-table {
    font-size: 12px;
  }
}

.admin-metric-trend {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
}

.admin-metric-trend span {
  color: var(--text-sub);
  font-weight: 600;
}

.admin-metric-trend--up {
  color: #059669;
}

.admin-metric-trend--down {
  color: #dc2626;
}

/* ── 조직관리 · 개요 대시보드 ── */
.admin-overview {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-overview__head,
.behavior-analytics__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-overview__title,
.behavior-analytics__title {
  margin: 0;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.admin-overview__desc,
.behavior-analytics__desc {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
  font-weight: 600;
}

.admin-surface-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  padding: 20px;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.admin-surface-card:hover {
  transform: translateY(-2px);
  border-color: #d7e0ea;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.admin-surface-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-surface-card__head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.admin-surface-card__head span {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

.admin-overview-kpi-grid,
.behavior-analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.admin-overview-kpi-card,
.behavior-analytics-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 108px;
  padding: 14px;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.admin-overview-kpi-card:hover,
.behavior-analytics-kpi-card:hover {
  transform: translateY(-2px);
  border-color: #c7d2fe;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
}

.admin-overview-kpi-card__icon,
.behavior-analytics-kpi-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 20px;
  flex-shrink: 0;
}

.admin-overview-kpi-card--blue .admin-overview-kpi-card__icon,
.behavior-analytics-kpi-card--blue .behavior-analytics-kpi-card__icon {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
}

.admin-overview-kpi-card--green .admin-overview-kpi-card__icon,
.behavior-analytics-kpi-card--green .behavior-analytics-kpi-card__icon {
  background: linear-gradient(135deg, #d1fae5, #ecfdf5);
}

.admin-overview-kpi-card--purple .admin-overview-kpi-card__icon,
.behavior-analytics-kpi-card--purple .behavior-analytics-kpi-card__icon {
  background: linear-gradient(135deg, #ede9fe, #f5f3ff);
}

.admin-overview-kpi-card--amber .admin-overview-kpi-card__icon,
.behavior-analytics-kpi-card--amber .behavior-analytics-kpi-card__icon {
  background: linear-gradient(135deg, #fde68a, #fffbeb);
}

.admin-overview-kpi-card--cyan .admin-overview-kpi-card__icon,
.behavior-analytics-kpi-card--cyan .behavior-analytics-kpi-card__icon {
  background: linear-gradient(135deg, #cffafe, #ecfeff);
}

.admin-overview-kpi-card--pink .admin-overview-kpi-card__icon,
.behavior-analytics-kpi-card--orange .behavior-analytics-kpi-card__icon {
  background: linear-gradient(135deg, #fed7aa, #fff7ed);
}

.admin-overview-kpi-card__body,
.behavior-analytics-kpi-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.admin-overview-kpi-card__label,
.behavior-analytics-kpi-card__label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.admin-overview-kpi-card__value,
.behavior-analytics-kpi-card__value {
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
  color: #0f172a;
}

.admin-trend-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.admin-trend-badge--up {
  color: #047857;
  background: #ecfdf5;
}

.admin-trend-badge--down {
  color: #b91c1c;
  background: #fef2f2;
}

.admin-trend-badge--flat {
  color: #64748b;
  background: #f1f5f9;
}

.admin-sparkline {
  display: block;
  width: 76px;
  height: 28px;
  margin-top: 2px;
}

.admin-sparkline polyline {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-sparkline--blue polyline { stroke: #2563eb; }
.admin-sparkline--green polyline { stroke: #059669; }
.admin-sparkline--purple polyline { stroke: #7c3aed; }
.admin-sparkline--amber polyline { stroke: #d97706; }
.admin-sparkline--cyan polyline { stroke: #0891b2; }
.admin-sparkline--pink polyline { stroke: #db2777; }

.admin-overview-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-org-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-org-bars__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1.4fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-org-bars__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-org-bars__meta strong {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-org-bars__meta span {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.admin-org-bars__track {
  height: 10px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.admin-org-bars__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #2563eb);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-org-bars__value {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  font-variant-numeric: tabular-nums;
}

.admin-team-donut {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 180px;
}

.admin-team-donut__chart {
  flex-shrink: 0;
}

.admin-donut__svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

.admin-donut__track {
  stroke: #eef2f7;
}

.admin-donut__center {
  transform: rotate(90deg);
  transform-origin: center;
  font-size: 8px;
  font-weight: 800;
  fill: #0f172a;
}

.admin-team-donut__legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.admin-team-donut__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.admin-team-donut__legend-item strong {
  margin-left: auto;
  font-weight: 800;
  color: #0f172a;
}

.admin-team-donut__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.admin-overview-timelines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.admin-overview-timeline-col h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.admin-overview-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  padding: 16px;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.admin-overview-timeline__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.admin-overview-timeline__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.admin-overview-timeline__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 15px;
  flex-shrink: 0;
}

.admin-overview-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-overview-timeline__body strong {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-overview-timeline__body span,
.admin-overview-timeline__body time {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.admin-overview-top-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-overview-top-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  padding: 20px;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.admin-overview-top-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.admin-overview-top-card h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.admin-overview-top-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-overview-top-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-overview-top-item__rank {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.admin-overview-top-item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-overview-top-item__main strong {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-overview-top-item__main span {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-overview-top-item__value {
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  white-space: nowrap;
}

.behavior-weekday-bars,
.behavior-hourly-completion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.behavior-weekday-bars__row,
.behavior-hourly-completion__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.behavior-weekday-bars__label {
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

.behavior-weekday-bars__track,
.behavior-hourly-completion__track {
  height: 10px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.behavior-weekday-bars__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.behavior-hourly-completion__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.behavior-weekday-bars__row strong,
.behavior-hourly-completion__row strong {
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  font-variant-numeric: tabular-nums;
}

.behavior-hourly-completion__row span {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.behavior-activity-rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.behavior-activity-rank-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.behavior-activity-rank-item__rank {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.behavior-activity-rank-item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.behavior-activity-rank-item__main strong {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.behavior-activity-rank-item__main span {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.behavior-activity-rank-item__value {
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  white-space: nowrap;
}

.behavior-analytics-chart-card {
  min-height: 320px;
}

.behavior-analytics-chart-card--heatmap .behavior-analytics-heatmap-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.behavior-analytics-rank-card {
  min-height: 360px;
}

.behavior-insights-card {
  min-height: auto;
}

.behavior-heatmap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: auto;
}

.behavior-heatmap__header {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
}

.behavior-heatmap__hours {
  display: grid;
  grid-template-columns: repeat(12, minmax(14px, 1fr));
  gap: 2px;
}

.behavior-heatmap__hour-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
}

.behavior-heatmap__row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
}

.behavior-heatmap__day {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
}

.behavior-heatmap__cells {
  display: grid;
  grid-template-columns: repeat(24, minmax(8px, 1fr));
  gap: 2px;
}

.behavior-heatmap__cell {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(99, 102, 241, calc(0.08 + var(--heat, 0) * 0.82));
  cursor: default;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.behavior-heatmap__cell:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
  z-index: 1;
}

.behavior-heatmap__cell--fade {
  opacity: 0;
  animation: behaviorHeatmapFade 0.35s ease forwards;
}

@keyframes behaviorHeatmapFade {
  to { opacity: 1; }
}

@media (max-width: 1399px) {
  .admin-overview-kpi-grid,
  .behavior-analytics-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .admin-overview-kpi-grid,
  .behavior-analytics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-overview-split,
  .admin-overview-timelines,
  .admin-overview-top-grid {
    grid-template-columns: 1fr;
  }

  .admin-team-donut {
    flex-direction: column;
    align-items: flex-start;
  }
}

.admin-analysis__detail-link {
  display: none;
}

.admin-analysis__detail-head {
  display: none;
}

@media (max-width: 767px) {
  .admin-overview-kpi-grid:not(.admin-overview-kpi-grid--mobile-compact),
  .behavior-analytics-kpi-grid:not(.admin-overview-kpi-grid--mobile-compact) {
    grid-template-columns: 1fr;
  }

  body.is-mobile-app .admin-overview-kpi-grid--mobile-compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.is-mobile-app .admin-overview-kpi-card--compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 92px;
    padding: 12px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  body.is-mobile-app .admin-overview-kpi-card--compact:hover,
  body.is-mobile-app .admin-overview-kpi-card--compact:focus-visible {
    border-color: #c7d2fe;
    background: #f8fafc;
  }

  body.is-mobile-app .admin-overview-kpi-card--compact .admin-overview-kpi-card__icon {
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 12px;
    font-size: 18px;
  }

  body.is-mobile-app .admin-overview-kpi-card--compact .admin-overview-kpi-card__value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
  }

  body.is-mobile-app .admin-overview-kpi-card--compact .admin-overview-kpi-card__value--text {
    font-size: 1rem;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-mobile-app .admin-overview-kpi-card--compact .admin-overview-kpi-card__label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    line-height: 1.3;
  }

  body.is-mobile-app .admin-analysis__detail-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 4px;
    padding: 0 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }

  body.is-mobile-app #admin-analysis-root:not(.is-analysis-detail-open) .behavior-filter-bar,
  body.is-mobile-app #admin-analysis-root:not(.is-analysis-detail-open) .behavior-analytics__footnote {
    display: none !important;
  }

  body.is-mobile-app .admin-analysis__detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms ease;
    overflow: hidden;
  }

  body.is-mobile-app #admin-analysis-root.is-analysis-detail-open .admin-analysis__detail.is-expanded {
    grid-template-rows: 1fr;
  }

  body.is-mobile-app .admin-analysis__detail-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  body.is-mobile-app #admin-analysis-root.is-analysis-detail-open .admin-analysis__detail-head {
    display: block;
    margin-bottom: 4px;
  }

  body.is-mobile-app #admin-analysis-root.is-analysis-detail-open .admin-analysis__detail-title,
  body.is-mobile-app .admin-analysis__overview-head .admin-overview__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
  }

  body.is-mobile-app .admin-analysis__overview-head .admin-overview__title {
    margin-bottom: 0;
  }

  body.is-mobile-app #admin-analysis-root.is-analysis-detail-open .admin-analysis__detail-desc,
  body.is-mobile-app .admin-analysis__overview-head .admin-overview__desc {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
  }

  body.is-mobile-app .admin-analysis__overview {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .admin-org-bars__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ── 행동분석 대시보드 ── */
.behavior-analytics {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.behavior-analytics__toolbar {
  display: none;
}

.behavior-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e8edf3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.behavior-filter-bar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.behavior-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.behavior-filter-dropdown {
  position: relative;
}

.behavior-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
  white-space: nowrap;
}

.behavior-filter-chip:hover,
.behavior-filter-chip--active,
.behavior-filter-dropdown--open > .behavior-filter-chip {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.behavior-filter-chip__icon {
  font-size: 15px;
  line-height: 1;
}

.behavior-filter-chip__label {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.behavior-filter-chip__caret {
  font-size: 10px;
  color: var(--text-sub);
  transition: transform 0.18s ease;
}

.behavior-filter-dropdown--open .behavior-filter-chip__caret {
  transform: rotate(180deg);
}

.behavior-filter-chip--range {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.behavior-filter-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: none;
  min-width: 180px;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

.behavior-filter-dropdown--open .behavior-filter-dropdown__menu {
  display: block;
  animation: behaviorFilterMenuIn 0.18s ease;
}

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

.behavior-filter-dropdown__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.behavior-filter-dropdown__item:hover,
.behavior-filter-dropdown__item--active {
  background: var(--primary-soft);
  color: var(--primary);
}

.behavior-date-range-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 45;
  width: min(360px, calc(100vw - 40px));
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  animation: behaviorFilterMenuIn 0.18s ease;
}

.behavior-date-range-popup__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.behavior-date-range-popup__head strong {
  font-size: 14px;
  color: var(--text-main);
}

.behavior-date-range-popup__head span {
  font-size: 11px;
  color: var(--text-sub);
  font-weight: 600;
}

.behavior-date-range-popup__fields {
  display: flex;
  align-items: center;
  gap: 8px;
}

.behavior-date-range-popup__input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
}

.behavior-date-range-popup__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.behavior-date-range-popup__sep {
  color: var(--text-sub);
  font-weight: 700;
}

.behavior-date-range-popup__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.behavior-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
  white-space: nowrap;
}

.behavior-filter-btn:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.behavior-filter-btn--refresh:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.behavior-filter-btn--analyze,
.behavior-filter-btn--primary {
  min-height: 46px;
  padding: 0 18px;
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.28);
}

.behavior-filter-btn--analyze:hover,
.behavior-filter-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.34);
}

.behavior-filter-btn--ghost {
  background: transparent;
  box-shadow: none;
}

.behavior-filter-btn--ghost:hover {
  background: var(--surface-muted);
  transform: none;
}

.behavior-analytics__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity 0.2s ease;
}

.behavior-analytics__content--loading {
  opacity: 0.72;
}

.behavior-analytics__skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.behavior-analytics__skeleton-card {
  min-height: 160px;
  border-radius: 16px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: admin-skeleton-shimmer 1.2s ease-in-out infinite;
}

.behavior-analytics__filters {
  display: none;
}

.behavior-filter {
  display: none;
}

.behavior-row {
  display: grid;
  gap: 18px;
  align-items: stretch;
}

.behavior-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.behavior-row--3,
.behavior-row--4,
.behavior-row--6 {
  grid-template-columns: 1fr;
}

.behavior-row--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.behavior-row--5 {
  grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
  align-items: start;
}

.behavior-animate-in {
  opacity: 0;
  transform: translateY(10px);
  animation: behaviorFadeSlide 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

.behavior-user-rank-card,
.behavior-mini-card,
.behavior-time-card,
.behavior-analysis-card,
.behavior-insights-card {
  min-width: 0;
  padding: 20px;
  border-radius: 16px;
}

.behavior-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.behavior-card__count,
.behavior-card__sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

.behavior-user-rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
}

.behavior-user-rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.behavior-user-rank-item:hover,
.behavior-user-rank-item--active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
}

.behavior-user-rank-item__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}

.behavior-user-rank-item__main {
  min-width: 0;
  flex: 1;
}

.behavior-user-rank-item__name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.behavior-user-rank-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.behavior-user-rank-item__points {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
}

.behavior-stars {
  display: inline-flex;
  gap: 1px;
  margin-top: 4px;
}

.behavior-stars__icon {
  font-size: 11px;
  color: #d1d5db;
  line-height: 1;
}

.behavior-stars__icon--filled {
  color: #f59e0b;
}

.behavior-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.behavior-grade--a {
  background: #dcfce7;
  color: #166534;
}

.behavior-grade--b {
  background: #ffedd5;
  color: #9a3412;
}

.behavior-grade--c {
  background: #e5e7eb;
  color: #374151;
}

.behavior-mini-card h4,
.behavior-analysis-card h4,
.behavior-time-card h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

.behavior-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.behavior-bars__row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 8px;
  align-items: center;
}

.behavior-bars__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

.behavior-bars__track {
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.behavior-bars__fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.behavior-bars__value {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
}

.behavior-speed-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.behavior-speed-compare > div {
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.behavior-speed-compare span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 700;
}

.behavior-speed-compare strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
}

.behavior-time-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 220px) minmax(160px, 200px);
  gap: 20px;
  align-items: center;
}

.behavior-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.behavior-timeline__row {
  display: grid;
  grid-template-columns: 42px 1fr 28px;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
  cursor: default;
}

.behavior-timeline__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}

.behavior-timeline__track {
  height: 10px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
}

.behavior-timeline__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #a78bfa);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.behavior-timeline__value {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-main);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.behavior-radial-clock {
  display: flex;
  justify-content: center;
}

.behavior-radial-clock__svg {
  width: 200px;
  height: 200px;
}

.behavior-radial-clock__center {
  fill: #f8fafc;
  stroke: #e5e7eb;
  stroke-width: 1;
}

.behavior-radial__segment {
  fill: color-mix(in srgb, var(--primary) 72%, #c7d2fe);
  stroke: #fff;
  stroke-width: 0.5;
  transition: fill 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
}

.behavior-radial__segment:hover {
  fill: var(--primary);
}

.behavior-radial-clock__label {
  font-size: 14px;
  font-weight: 800;
  fill: var(--text-main);
  text-anchor: middle;
}

.behavior-radial-clock__sub {
  font-size: 10px;
  font-weight: 700;
  fill: var(--text-sub);
  text-anchor: middle;
}

.behavior-peak-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 16px;
  border-radius: 16px;
  border: 1px solid #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
  min-height: 200px;
}

.behavior-peak-card__icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.behavior-peak-card__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b45309;
}

.behavior-peak-card__time {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

.behavior-peak-card__calls {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
}

.behavior-peak-card__stars {
  margin: 0;
  font-size: 14px;
  letter-spacing: 1px;
  color: #f59e0b;
}

.behavior-analysis-card {
  min-height: 170px;
}

.behavior-donut-wrap,
.behavior-status-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.behavior-donut__svg {
  width: 92px;
  height: 92px;
  transform: rotate(-90deg);
}

.behavior-donut__track {
  stroke: #e5e7eb;
}

.behavior-donut__progress {
  stroke: var(--primary);
  stroke-linecap: round;
  transition: stroke-dasharray 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.behavior-donut__progress--green {
  stroke: #10b981;
}

.behavior-donut__progress--multi {
  stroke: #8b5cf6;
}

.behavior-donut__value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
}

.behavior-status-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.behavior-status-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-sub);
}

.behavior-status-legend__item strong {
  margin-left: auto;
  color: var(--text-main);
}

.behavior-status-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.behavior-status-legend__dot--completed,
.behavior-status-legend__dot--processed {
  background: #10b981;
}

.behavior-status-legend__dot--interested {
  background: #3b82f6;
}

.behavior-status-legend__dot--scheduled {
  background: #f59e0b;
}

.behavior-status-legend__dot--rejected {
  background: #ef4444;
}

.behavior-status-legend__dot--missed {
  background: #9ca3af;
}

.behavior-gauge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.behavior-gauge__svg {
  width: 120px;
  height: 70px;
}

.behavior-gauge__track,
.behavior-gauge__progress {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.behavior-gauge__track {
  stroke: #e5e7eb;
}

.behavior-gauge__progress {
  stroke: var(--primary);
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.behavior-gauge__value {
  margin-top: -4px;
  text-align: center;
}

.behavior-gauge__value strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
}

.behavior-gauge__value .behavior-stars {
  justify-content: center;
  margin-top: 6px;
}

.behavior-growth-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.behavior-growth-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-muted);
}

.behavior-growth-item__value--up {
  color: #059669;
}

.behavior-growth-item__value--down {
  color: #dc2626;
}

/* ===== TOP5 랭킹 히어로 ===== */
.behavior-rankings-hero {
  border-radius: 20px;
  padding: 22px 22px 24px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(250, 204, 21, 0.14), transparent 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(139, 92, 246, 0.16), transparent 55%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24);
}

.behavior-rankings-hero__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.behavior-rankings-hero__title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.behavior-rankings-hero__stars {
  font-size: 15px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #fde047, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.behavior-rankings-hero__sub {
  font-size: 13px;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.82);
}

.behavior-rankings {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.behavior-ranking-card {
  min-width: 0;
  padding: 16px 14px 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
  border-top: 4px solid var(--rank-accent, var(--primary));
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.behavior-ranking-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.22);
}

.behavior-ranking-card--blue {
  --rank-accent: #3b82f6;
}

.behavior-ranking-card--green {
  --rank-accent: #10b981;
}

.behavior-ranking-card--amber {
  --rank-accent: #f59e0b;
}

.behavior-ranking-card--purple {
  --rank-accent: #8b5cf6;
}

.behavior-ranking-card--pink {
  --rank-accent: #ec4899;
}

.behavior-pop-in {
  opacity: 0;
  transform: scale(0.9) translateY(12px);
  animation: behaviorPopIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes behaviorPopIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.behavior-ranking-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.behavior-ranking-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1;
  background: color-mix(in srgb, var(--rank-accent) 14%, #fff);
  flex-shrink: 0;
}

.behavior-ranking-card__head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.behavior-ranking-card__podium {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.behavior-podium-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-muted);
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.behavior-podium-item:hover {
  transform: scale(1.035);
  border-color: var(--rank-accent, var(--primary));
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  z-index: 1;
}

.behavior-podium-item--gold {
  border-color: #f5c518;
  background: linear-gradient(100deg, #fef3c7 0%, #fffdf5 70%);
  box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.4), 0 8px 22px rgba(245, 197, 24, 0.28);
  animation: behaviorGoldGlow 2.4s ease-in-out infinite;
}

@keyframes behaviorGoldGlow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.4), 0 8px 22px rgba(245, 197, 24, 0.26);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.6), 0 10px 30px rgba(245, 197, 24, 0.46);
  }
}

.behavior-podium-item--silver {
  border-color: #cbd5e1;
  background: linear-gradient(100deg, #eef2f7 0%, #ffffff 70%);
}

.behavior-podium-item--bronze {
  border-color: #e8a06b;
  background: linear-gradient(100deg, #fdead9 0%, #ffffff 70%);
}

.behavior-podium-item--plain {
  background: #fff;
}

.behavior-podium-item__medal {
  font-size: 18px;
  line-height: 1;
  text-align: center;
  font-weight: 900;
  color: var(--text-sub);
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.18));
}

.behavior-podium-item--gold .behavior-podium-item__medal,
.behavior-podium-item--silver .behavior-podium-item__medal,
.behavior-podium-item--bronze .behavior-podium-item__medal {
  font-size: 20px;
}

.behavior-podium-item__name {
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
}

.behavior-podium-item__value {
  font-size: 12px;
  font-weight: 900;
  color: var(--rank-accent, var(--primary));
  white-space: nowrap;
}

.behavior-insights-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.behavior-insight-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.behavior-insight-item--tip {
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.behavior-insight-item--trend {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.behavior-insight-item--recommend {
  background: #fff7ed;
  border-color: #fed7aa;
}

.behavior-insight-item--warning {
  background: #fef2f2;
  border-color: #fecaca;
}

.behavior-insight-item__icon {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
}

.behavior-insight-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-main);
  font-weight: 600;
}

.behavior-analytics__footnote {
  margin: 0;
  font-size: 11px;
  color: var(--text-sub);
  text-align: center;
}

.behavior-analytics__skeleton {
  min-height: 240px;
}

/* ── 활동 로그 타임라인 ── */
.activity-logs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.activity-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e8edf3;
}

.activity-filter-bar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.activity-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.activity-filter-dropdown {
  position: relative;
}

.activity-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}

.activity-filter-chip:hover,
.activity-filter-chip--active,
.activity-filter-dropdown--open > .activity-filter-chip {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.activity-filter-chip__icon {
  font-size: 15px;
  line-height: 1;
}

.activity-filter-chip__label {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-filter-chip__caret {
  font-size: 10px;
  color: var(--text-sub);
}

.activity-filter-chip--range {
  font-variant-numeric: tabular-nums;
}

.activity-filter-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: none;
  min-width: 180px;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

.activity-filter-dropdown--open .activity-filter-dropdown__menu {
  display: block;
  animation: behaviorFilterMenuIn 0.18s ease;
}

.activity-filter-dropdown__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.activity-filter-dropdown__item:hover,
.activity-filter-dropdown__item--active {
  background: var(--primary-soft);
  color: var(--primary);
}

.activity-date-range-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 45;
  width: min(360px, calc(100vw - 40px));
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.activity-date-range-popup__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.activity-date-range-popup__head strong {
  font-size: 14px;
}

.activity-date-range-popup__head span {
  font-size: 11px;
  color: var(--text-sub);
  font-weight: 600;
}

.activity-date-range-popup__fields {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-date-range-popup__input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.activity-date-range-popup__sep {
  color: var(--text-sub);
  font-weight: 700;
}

.activity-date-range-popup__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.activity-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.activity-filter-btn--refresh:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.activity-filter-btn--primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.activity-filter-btn--ghost {
  background: transparent;
}

.activity-filter-search {
  min-width: 180px;
}

.activity-filter-search__input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}

.activity-filter-search__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.activity-logs__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity 0.2s ease;
}

.activity-logs__content--loading {
  opacity: 0.7;
}

.activity-logs__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.activity-logs__summary-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border-radius: 16px;
}

.activity-logs__summary-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

.activity-logs__summary-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}

.activity-logs__timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.activity-logs__day-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-logs__day-label {
  margin: 0;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-sub);
}

.activity-log-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.activity-log-item:hover {
  border-color: #c7d2fe;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
}

.activity-log-item__time {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.activity-log-item__message {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-main);
}

.activity-log-item__icon {
  margin-right: 2px;
}

.activity-log-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 600;
}

.activity-log-item__dot {
  opacity: 0.5;
}

.activity-log-item__result {
  color: var(--text-main);
  font-weight: 700;
}

.activity-log-item__detail-btn {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.activity-log-item__detail-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.activity-animate-in {
  opacity: 0;
  transform: translateY(8px);
  animation: behaviorFadeSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.activity-logs__skeleton,
.activity-logs__skeleton-row {
  border-radius: 16px;
}

.activity-logs__skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-logs__skeleton-row {
  min-height: 72px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: admin-skeleton-shimmer 1.2s ease-in-out infinite;
}

.activity-log-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.activity-log-drawer:not(.hidden) {
  pointer-events: auto;
}

.activity-log-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.activity-log-drawer:not(.hidden) .activity-log-drawer__backdrop {
  opacity: 1;
}

.activity-log-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.16);
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.activity-log-drawer:not(.hidden) .activity-log-drawer__panel {
  transform: translateX(0);
}

.activity-log-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.activity-log-drawer__header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.activity-log-drawer__close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: var(--surface-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.activity-log-drawer__body {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.activity-log-detail {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.activity-log-detail > div {
  display: grid;
  gap: 4px;
}

.activity-log-detail dt {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.activity-log-detail dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-word;
}

.activity-log-detail__json {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: #0f172a;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

body.activity-log-drawer-open {
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1199px) {
  .activity-logs__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .activity-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .activity-filter-bar__actions {
    width: 100%;
    margin-left: 0;
  }

  .activity-filter-btn {
    flex: 1;
  }

  .activity-filter-search {
    width: 100%;
  }

  .activity-logs__summary {
    grid-template-columns: 1fr;
  }

  .activity-log-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .activity-log-item__detail-btn {
    justify-self: start;
  }
}

@media (min-width: 1200px) {
  .admin-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 1199px) {
  .admin-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .behavior-row--2 {
    grid-template-columns: 1fr 1fr;
  }

  .behavior-user-rank-card {
    grid-column: 1 / -1;
  }

  .behavior-row--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .behavior-time-grid {
    grid-template-columns: 1fr;
  }

  .behavior-rankings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .behavior-row--5 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .behavior-row--2,
  .behavior-row--4 {
    grid-template-columns: 1fr;
  }

  .behavior-rankings-hero {
    padding: 18px 14px 18px;
  }

  .behavior-rankings-hero__title {
    font-size: 17px;
  }

  .behavior-rankings {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin: 0 -2px;
  }

  .behavior-rankings::-webkit-scrollbar {
    display: none;
  }

  .behavior-ranking-card {
    scroll-snap-align: start;
  }

  .behavior-filter-bar {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .behavior-filter-bar__actions {
    width: 100%;
    margin-left: 0;
  }

  .behavior-filter-btn--analyze,
  .behavior-filter-btn--refresh {
    flex: 1;
  }

  .behavior-analytics__skeleton-grid {
    grid-template-columns: 1fr;
  }
}

.filter-toolbar {
  display: block;
  margin-bottom: 10px;
}

.filter-toolbar .status-filter-row,
.filter-toolbar .filter-buttons {
  width: 100%;
  margin-bottom: 0;
}

.contact-view-toolbar {
  margin-bottom: 10px;
}

.contact-view-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 3px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.contact-view-btn {
  min-height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.contact-view-btn--active {
  background: #eff6ff;
  color: var(--primary);
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

.contact-name--clickable {
  cursor: pointer;
}

.contact-name--clickable:hover {
  color: var(--primary);
}

.popup--customer-detail {
  max-width: 480px;
}

.customer-detail-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.customer-detail-tab {
  flex: 1;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.customer-detail-tab--active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--border);
}

.customer-detail-panel.hidden {
  display: none !important;
}

.customer-detail-row {
  margin-bottom: 8px;
}

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

.customer-detail-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.customer-detail-status-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.customer-detail-status-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.customer-detail-status-chevron {
  font-size: 11px;
  color: var(--text-sub);
  line-height: 1;
}

body.customer-status-sheet-open {
  overflow: hidden;
}

.customer-status-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
}

.customer-status-sheet:not(.hidden) {
  pointer-events: auto;
}

.customer-status-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.customer-status-sheet:not(.hidden) .customer-status-sheet__backdrop {
  opacity: 1;
}

.customer-status-sheet__panel {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(400px, calc(100vw - 32px));
  max-height: min(80dvh, 520px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(17, 24, 39, 0.18);
  transform: translate(-50%, calc(-50% + 12px));
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.customer-status-sheet:not(.hidden) .customer-status-sheet__panel {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.customer-status-sheet__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.customer-status-sheet__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
}

.customer-status-sheet__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-sub);
  font-size: 14px;
  cursor: pointer;
}

.customer-status-sheet__close:hover {
  background: var(--surface-2);
}

.customer-status-sheet__options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 16px;
  overflow-y: auto;
}

.customer-status-sheet__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--status-option-border, var(--border));
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.customer-status-sheet__option:hover {
  background: var(--status-option-bg, var(--surface-2));
  border-color: var(--status-option-border, var(--border));
}

.customer-status-sheet__option:focus-visible {
  outline: 2px solid var(--status-option-text, var(--primary));
  outline-offset: 2px;
}

.customer-status-sheet__option--selected {
  border-color: var(--status-option-text, var(--primary));
  background: var(--status-option-bg, var(--primary-soft));
}

.customer-status-sheet__option-badge {
  display: inline-flex;
  align-items: center;
}

.customer-status-sheet__option-check {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--status-option-text, var(--primary));
}

@media (max-width: 767px) {
  .customer-status-sheet__panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: min(85dvh, 560px);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    opacity: 1;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .customer-status-sheet:not(.hidden) .customer-status-sheet__panel {
    transform: translateY(0);
  }
}

/* ── 연락처 상세 Drawer ── */
body.contact-drawer-open {
  overflow: hidden;
}

.contact-drawer {
  position: fixed;
  inset: 0;
  z-index: 1090;
  pointer-events: none;
}

.contact-drawer:not(.hidden) {
  pointer-events: auto;
}

.contact-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.contact-drawer:not(.hidden) .contact-drawer__backdrop {
  opacity: 1;
}

.contact-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(460px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.12);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-drawer:not(.hidden) .contact-drawer__panel {
  transform: translateX(0);
}

.contact-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.contact-drawer__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-sub);
}

.contact-drawer__close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-sub);
  font-size: 14px;
  cursor: pointer;
}

.contact-drawer__body {
  flex: 1;
  overflow: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

.contact-drawer__profile {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.contact-drawer__name {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
}

.contact-drawer__phone {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.contact-detail-phone-full {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  letter-spacing: 0.01em;
}

.contact-detail-phone-full--loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
}

.contact-phone-loading-skeleton {
  display: inline-block;
  width: 118px;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
  background-size: 200% 100%;
  animation: contact-phone-loading-shimmer 1.2s ease-in-out infinite;
  flex-shrink: 0;
  vertical-align: -3px;
}

.contact-phone-loading-text {
  line-height: 1.3;
  white-space: nowrap;
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
}

.contact-detail-phone-full--missing {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 600;
}

@keyframes contact-phone-loading-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.contact-drawer__status .status-badge {
  font-size: 13px;
}

.contact-drawer__status {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.contact-drawer__status:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 999px;
}

.contact-drawer__section {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.contact-drawer__section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.contact-drawer__section-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-sub);
}

.contact-drawer__field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
}

.contact-drawer__label {
  color: var(--text-sub);
  font-weight: 700;
}

.contact-drawer__value {
  color: var(--text-main);
  font-weight: 600;
  word-break: break-word;
}

.contact-drawer__history {
  margin-top: 10px;
}

.contact-drawer__history .customer-detail-history-table-wrap {
  margin-top: 4px;
}

.contact-drawer__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: #fff;
}

.contact-drawer__footer .btn-popup-primary,
.contact-drawer__footer .btn-popup-ghost {
  flex: 1 1 calc(50% - 4px);
  min-height: 42px;
}

.contact-drawer__delete {
  color: var(--danger);
  border-color: #fecaca;
}

.contact-drawer__footer--web .contact-drawer__delete {
  flex: 1 1 100%;
}

.contact-mobile-row {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.contact-mobile-row__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.contact-mobile-row__head .contact-select-cell {
  align-self: flex-start;
  flex-shrink: 0;
  padding-top: 2px;
}

.contact-mobile-row__identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-mobile-row__name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
}

.contact-mobile-row__meta,
.contact-name-meta {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #8a8f98;
  letter-spacing: -0.01em;
}

.contact-mobile-row__status {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  margin-top: 1px;
  cursor: pointer;
}

.contact-mobile-row__status:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 999px;
}

.contact-mobile-row__phone {
  min-width: 0;
}

.contact-mobile-row__phone .contact-phone {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.contact-mobile-row__phone .contact-phone .contact-phone-tel {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.contact-mobile-row__phone .contact-phone .contact-phone-tel:visited,
.contact-mobile-row__phone .contact-phone .contact-phone-tel:hover,
.contact-mobile-row__phone .contact-phone .contact-phone-tel:active,
.contact-mobile-row__phone .contact-phone .contact-phone-tel:focus {
  color: inherit;
  text-decoration: none;
}

.contact-mobile-action-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.btn-call--mobile-primary {
  flex: 6 1 0;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

a.btn-call--mobile-primary:visited {
  color: #fff;
}

.btn-call--mobile-primary:disabled,
.btn-call--mobile-primary[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-call.btn-call--disabled,
.btn-call:disabled,
.btn-call[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-contact-detail--mobile {
  flex: 4 1 0;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-contact-detail--mobile:hover {
  background: #f3f4f6;
}

.btn-call--mobile-primary:hover {
  filter: brightness(1.05);
}

.btn-call--mobile-primary .btn-call__icon--red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  line-height: 1;
  flex-shrink: 0;
}

.btn-call--mobile-primary .btn-call__icon--red svg {
  display: block;
}

.contact-mobile-select-all {
  display: flex;
  align-items: center;
  padding: 10px 2px 4px;
  border-top: 1px solid #eef2f7;
  margin-top: 10px;
}

.contact-mobile-select-all__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  user-select: none;
}

.contact-mobile-select-all__label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.customer-detail-history-table-wrap {
  overflow-x: auto;
}

.customer-detail-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.customer-detail-history-table th,
.customer-detail-history-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-detail-history-table th:nth-child(1),
.customer-detail-history-table td:nth-child(1) {
  width: 38%;
}

.customer-detail-history-table th:nth-child(2),
.customer-detail-history-table td:nth-child(2) {
  width: 24%;
}

.customer-detail-history-table th:nth-child(3),
.customer-detail-history-table td:nth-child(3) {
  width: 38%;
}

.customer-detail-history-table th {
  font-weight: 800;
  color: var(--text);
  background: var(--surface-2);
}

.customer-detail-history-table td:last-child {
  word-break: normal;
}

.btn-manage-status-tabs {
  flex-shrink: 0;
  color: var(--primary);
  border-color: #bfdbfe;
  background: #eff6ff;
}

.btn-manage-status-tabs:hover {
  background: #dbeafe;
}

.btn-add-status {
  width: 100%;
  min-height: 36px;
  margin: 0 0 12px;
  padding: 0 14px;
  border: 1px dashed #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.status-manager-row {
  display: grid;
  grid-template-columns: 24px minmax(96px, 1.2fr) 56px minmax(72px, auto) auto auto auto;
  gap: 8px;
  align-items: center;
}

.status-drag-handle {
  cursor: grab;
  color: var(--text-sub);
  font-size: 16px;
  line-height: 1;
  user-select: none;
  text-align: center;
  touch-action: none;
}

.status-drag-handle:active,
.status-settings-list--sorting .status-drag-handle {
  cursor: grabbing;
}

.status-settings-card--dragging {
  opacity: 0.9;
  transform: scale(1.02);
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.18);
}

.status-settings-card--drag-over {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.status-dashboard-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-sub);
  white-space: nowrap;
  cursor: pointer;
}

.status-dashboard-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.status-reassign-select {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.profile-status-desc {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.5;
}

.profile-status-template-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.btn-profile-status-manage {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.btn-profile-status-manage:hover {
  background: #dbeafe;
}

.profile-settings-col--status {
  margin-bottom: 16px;
}

.admin-chinaread-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.admin-chinaread-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.admin-chinaread-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
}

.cl-access-denied-panel {
  margin-top: 16px;
  text-align: center;
}

.cl-access-denied-panel .btn-popup-primary {
  margin-top: 16px;
}

.sc-module-btn.hidden {
  display: none !important;
}

/* 모바일 전용 헤더 아이콘: 데스크톱에서는 숨김 */
.mobile-header-icon-btn.sc-module-btn--mobile-db {
  display: none;
}

.sc-module-btn--desktop-db {
  display: inline-flex;
}

.mobile-header-logo-btn {
  display: none;
}

.desktop-module-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-manager-name {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.status-color-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-sub);
  text-align: center;
  white-space: nowrap;
}

.status-manager-toggle {
  justify-self: end;
}

.status-manager-move {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}

.status-settings-card .status-settings-color-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.status-settings-usage {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-sub);
}

@media (max-width: 767px) {
  .status-manager-row {
    grid-template-columns: 24px 1fr auto auto;
  }

  .status-drag-handle {
    grid-row: span 2;
    align-self: start;
    padding-top: 8px;
  }

  .status-color-label {
    display: none;
  }

  .status-manager-toggle {
    grid-column: 3;
  }

  .status-dashboard-toggle {
    grid-column: 4;
  }

  .status-manager-move {
    grid-column: 2 / -1;
    justify-self: end;
  }

  .status-settings-preview {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

.popup--wide {
  width: min(720px, 100%);
}

.status-settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.status-settings-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.status-settings-card--hidden {
  opacity: 0.72;
}

.status-settings-card-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.status-settings-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-settings-card-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.status-settings-label-field,
.status-settings-color-section,
.status-settings-preview-wrap,
.status-settings-toggle-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-settings-label-field span,
.status-settings-field-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

.status-settings-label-field input {
  min-height: 40px;
  width: 100%;
}

.status-preset-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-preset-btn {
  position: relative;
  width: 40px;
  height: 40px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 2px solid var(--preset-border, #d1d5db);
  border-radius: 999px;
  background: var(--preset-bg, #f3f4f6);
  cursor: pointer;
  flex-shrink: 0;
}

.status-preset-btn::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: var(--preset-text, #6b7280);
}

.status-preset-btn--active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--preset-text, #2563eb);
}

.status-preset-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.status-settings-preview-wrap .status-settings-preview {
  align-self: flex-start;
}

.status-settings-toggle-wrap {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.status-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.status-toggle-track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d1d5db;
  transition: background 0.15s;
}

.status-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.status-toggle input:checked + .status-toggle-track {
  background: #16a34a;
}

.status-toggle input:checked + .status-toggle-track::after {
  transform: translateX(18px);
}

.status-toggle-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.status-settings-key,
.status-settings-usage {
  font-size: 12px;
  color: var(--text-sub);
}

.status-settings-card-side button {
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.status-settings-card-side button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-status-hide,
.btn-status-remove {
  min-height: 36px;
  font-size: 12px;
}

@media (max-width: 767px) {
  .status-settings-card-body {
    flex-direction: column;
  }

  .status-settings-card-side {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .status-settings-card-side button {
    flex: 1 1 calc(50% - 4px);
  }
}

.profile-referral-section,
.profile-org-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.profile-subsection-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: #111827;
}

.profile-referral-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.profile-referral-label {
  min-width: 90px;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 600;
}

.profile-referral-link {
  flex: 1 1 220px;
  min-height: 38px;
}

.btn-copy-referral,
.admin-btn {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

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

.popup--org-members {
  max-width: 480px;
  padding: 0;
  overflow: hidden;
}

.org-members-view-overlay {
  background: transparent;
  pointer-events: auto;
}

.org-members-view-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(15, 23, 42, 0.55);
  pointer-events: auto;
}

.org-members-view-content {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.modal-stack--top.org-members-view-overlay,
.modal-stack--top.org-members-view-overlay .org-members-view-backdrop,
.modal-stack--top.org-members-view-overlay .org-members-view-content {
  pointer-events: auto;
}

.modal-stack--behind.org-members-view-overlay,
.modal-stack--behind.org-members-view-overlay .org-members-view-backdrop,
.modal-stack--behind.org-members-view-overlay .org-members-view-content {
  pointer-events: none;
}

.org-members-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.org-members-modal__header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.org-members-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-org-members-invite {
  padding: 6px 10px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-org-members-invite:hover {
  background: #dbeafe;
}

.org-members-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.org-members-modal__close:hover {
  background: #e5e7eb;
  color: #111827;
}

.org-members-modal__summary {
  padding: 12px 18px 0;
}

.org-members-modal__org-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.org-members-modal__count {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}

.org-members-modal__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 16px 18px;
}

.org-members-empty {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
}

.org-member-card {
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.org-member-card__main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.org-member-card__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.org-member-card__info {
  flex: 1;
  min-width: 0;
}

.org-member-card__name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.org-member-card__role {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}

.org-member-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.org-member-badge--owner {
  background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.org-member-badge--member {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.org-members-modal__footer {
  padding: 0 18px 18px;
  margin-top: 0;
}

.org-members-modal__footer .btn-popup-primary {
  flex: 1 1 100%;
}

@media (max-width: 480px) {
  .org-members-modal__header {
    flex-direction: column;
    align-items: stretch;
  }

  .org-members-modal__header-actions {
    justify-content: space-between;
  }
}

.admin-org-toolbar {
  margin-bottom: 14px;
}

.admin-org-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-org-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-org-card:hover {
  transform: translateY(-3px);
  border-color: #dbeafe;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.admin-org-card:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.admin-org-card__header {
  display: block;
}

.admin-org-card__title-wrap {
  min-width: 0;
  width: 100%;
}

.admin-org-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: #111827;
}

.admin-org-card__icon {
  margin-right: 2px;
}

.admin-org-card__parent {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.admin-org-card__body {
  cursor: pointer;
}

.admin-org-card__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-org-card__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.admin-org-card__meta-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  white-space: nowrap;
}

.admin-org-card__meta-value {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  text-align: right;
  word-break: keep-all;
}

.admin-org-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  cursor: default;
}

.admin-org-card__btn {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-org-card__btn--primary {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
}

.admin-org-card__btn--primary:hover {
  filter: brightness(0.96);
}

.admin-org-card__btn--secondary {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
}

.admin-org-card__btn--secondary:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.admin-org-card__btn--outline {
  border: 1px solid #bfdbfe;
  background: #fff;
  color: #2563eb;
}

.admin-org-card__btn--outline:hover {
  background: #eff6ff;
}

.admin-org-card__btn--danger {
  border: 1px solid #fecaca;
  background: #fff;
  color: #dc2626;
}

.admin-org-card__btn--danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

.admin-org-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-org-parent {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

.admin-btn--danger {
  border-color: #fecaca;
  background: #fff;
  color: #dc2626;
}

.admin-btn--danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

.popup--org-manage,
.popup--org-chart,
.popup--org-delete {
  max-width: 760px;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.org-manage-modal__header,
.org-chart-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.org-manage-modal__header h2,
.org-chart-modal__header h2,
.popup--org-delete h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.org-manage-modal__subtitle,
.org-chart-scope-label {
  margin: 4px 18px 0;
  font-size: 13px;
  color: #6b7280;
}

.org-chart-scope-label.hidden {
  display: none;
}

.org-manage-modal__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px 0;
}

.org-manage-summary-item {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.org-manage-summary-item__label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.org-manage-summary-item__value {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.org-manage-table-wrap {
  padding: 16px 18px;
  overflow-x: auto;
}

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

.org-manage-table th,
.org-manage-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}

.org-manage-table th {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  background: #f9fafb;
}

.org-manage-select {
  min-width: 110px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 12px;
}

.org-manage-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.org-manage-status--active {
  background: #ecfdf5;
  color: #047857;
}

.org-manage-status--inactive {
  background: #f3f4f6;
  color: #6b7280;
}

.org-manage-empty {
  padding: 24px 12px;
  text-align: center;
  color: #9ca3af;
}

.org-manage-self-badge {
  display: inline-flex;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
}

.org-manage-readonly {
  color: #9ca3af;
}

.org-manage-modal__footer {
  display: flex;
  gap: 8px;
  padding: 0 18px 18px;
}

.org-manage-modal__footer .btn-popup-primary {
  flex: 1;
}

.org-chart-tree {
  max-height: min(68vh, 620px);
  overflow: auto;
  padding: 12px 18px 16px;
}

.org-chart-unit {
  margin-bottom: 32px;
}

.org-chart-subtree .org-chart-unit {
  margin-left: 0;
}

.org-chart-unit:last-child {
  margin-bottom: 0;
}

.org-chart-unit__header {
  text-align: center;
  margin-bottom: 18px;
}

.org-chart-unit__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #d1d5db 20%, #d1d5db 80%, transparent);
  margin: 10px 0;
}

.org-chart-unit__name {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.org-chart-unit__stats {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.org-chart-unit__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.org-chart-unit__empty {
  margin: 0;
  padding: 20px 16px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.org-chart-branch {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.org-chart-branch--member {
  margin-top: 4px;
}

.org-chart-branch__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #374151;
}

.org-chart-admin-rail,
.org-chart-member-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.org-chart-admin-rail__stem,
.org-chart-member-rail__stem {
  display: block;
  width: 2px;
  height: 22px;
  background: #c7d2fe;
}

.org-chart-member-rail__bar {
  display: block;
  height: 2px;
  background: #c7d2fe;
  width: min(
    100%,
    calc(
      max(1, var(--org-chart-member-cols, 1)) * 176px +
        (max(1, var(--org-chart-member-cols, 1)) - 1) * 12px
    )
  );
}

.org-chart-subtree__stem,
.org-chart-subtree__line {
  display: block;
  width: 2px;
  height: 100%;
  background: #c7d2fe;
}

.org-chart-cards {
  display: grid;
  gap: 12px;
  width: 100%;
  justify-content: center;
  justify-items: stretch;
}

.org-chart-cards--cols-1 {
  grid-template-columns: minmax(0, 220px);
  justify-content: center;
}

.org-chart-cards--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 176px));
  max-width: 364px;
  margin: 0 auto;
}

.org-chart-cards--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 168px));
  max-width: 540px;
  margin: 0 auto;
}

.org-chart-cards--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 152px));
  max-width: 680px;
  margin: 0 auto;
}

.org-chart-cards--cols-auto {
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  max-width: 100%;
}

.org-chart-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.org-chart-card-wrap::before {
  content: "";
  display: block;
  width: 2px;
  height: 16px;
  background: #c7d2fe;
}

.org-chart-branch--member:not(.org-chart-branch--connected) .org-chart-card-wrap::before {
  display: none;
}

.org-chart-person-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 108px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.org-chart-person-card:hover {
  transform: scale(1.03);
}

.org-chart-person-card--admin {
  border-color: #c4b5fd;
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 78%);
  box-shadow:
    0 1px 2px rgba(79, 70, 229, 0.06),
    inset 0 0 0 1px rgba(79, 70, 229, 0.04);
}

.org-chart-person-card--admin:hover {
  border-color: #8b5cf6;
  box-shadow:
    0 14px 28px rgba(79, 70, 229, 0.18),
    0 0 0 1px rgba(79, 70, 229, 0.08);
}

.org-chart-person-card--member {
  border-color: #99f6e4;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 78%);
  box-shadow:
    0 1px 2px rgba(13, 148, 136, 0.06),
    inset 0 0 0 1px rgba(13, 148, 136, 0.04);
}

.org-chart-person-card--member:hover {
  border-color: #5eead4;
  box-shadow:
    0 14px 28px rgba(13, 148, 136, 0.16),
    0 0 0 1px rgba(13, 148, 136, 0.08);
}

.org-chart-person-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 2px;
}

.org-chart-person-card--admin .org-chart-person-card__icon {
  background: #ede9fe;
}

.org-chart-person-card--member .org-chart-person-card__icon {
  background: #ccfbf1;
}

.org-chart-person-card__name {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
}

.org-chart-person-card__meta {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.35;
  word-break: break-word;
}

.org-chart-subtree {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 12px;
}

.org-chart-subtree__connector {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 28px;
}

.org-chart-subtree__children {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.org-chart-subtree__item {
  position: relative;
  width: 100%;
}

.org-chart-subtree__fork {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 24px;
}

.org-chart-subtree__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(50% - 12px);
  height: 2px;
  background: #c7d2fe;
  transform: translateX(-100%);
}

.org-chart-subtree__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 24px;
  background: #c7d2fe;
}

.org-chart-subtree__children > .org-chart-subtree__item:first-child::before {
  display: none;
}

.org-chart-modal__footer {
  display: flex;
  gap: 8px;
  padding: 0 18px 18px;
}

.org-chart-modal__footer .btn-popup-primary,
.org-chart-modal__footer .btn-popup-ghost {
  flex: 1;
}

.popup--org-chart-member {
  max-width: 420px;
  padding: 0;
  overflow: hidden;
}

.org-chart-member-popup__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.org-chart-member-popup__header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.org-chart-member-info {
  padding: 14px 18px 0;
}

.org-chart-member-info__list {
  margin: 0;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.org-chart-member-info__list div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  font-size: 13px;
}

.org-chart-member-info__list dt {
  margin: 0;
  color: #6b7280;
  font-weight: 600;
}

.org-chart-member-info__list dd {
  margin: 0;
  color: #111827;
  font-weight: 700;
  word-break: break-word;
}

.org-chart-member-future-actions {
  padding: 14px 18px 0;
}

.org-chart-member-future-actions__label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
}

.org-chart-member-future-actions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.org-chart-member-future-actions__grid .btn-popup-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.org-chart-member-action__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 18px 18px;
}

.org-chart-member-action__actions .btn-popup-ghost,
.org-chart-member-action__actions .btn-popup-primary {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
}

.org-chart-member-action__actions .btn-popup-primary--danger {
  flex-basis: 100%;
}

@media (max-width: 720px) {
  .org-chart-cards--cols-3,
  .org-chart-cards--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 364px;
  }

  .org-chart-cards--cols-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .org-chart-cards--cols-2,
  .org-chart-cards--cols-3,
  .org-chart-cards--cols-4,
  .org-chart-cards--cols-auto {
    grid-template-columns: 1fr;
    max-width: 280px;
  }

  .org-chart-member-future-actions__grid,
  .org-chart-member-action__actions {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .org-chart-member-action__actions .btn-popup-ghost,
  .org-chart-member-action__actions .btn-popup-primary {
    flex-basis: auto;
    width: 100%;
  }
}

.org-delete-warning {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
}

.org-member-badge--lead {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

@media (min-width: 1100px) {
  .admin-org-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .org-manage-modal__summary {
    grid-template-columns: 1fr;
  }

  .admin-org-cards-grid {
    grid-template-columns: 1fr;
  }

  .admin-org-card__actions {
    display: none;
  }

  .admin-org-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-org-actions .admin-btn {
    width: 100%;
  }
}

.admin-section-title {
  margin-bottom: 12px;
}

/* ── Android 밝게 보기 안내 ── */
.android-light-hint {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 5000;
  max-width: 480px;
  margin: 0 auto;
}

.android-light-hint__inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-main);
  box-shadow: var(--shadow-card);
}

.android-light-hint__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main);
}

.android-light-hint__text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.android-light-hint__close {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ===== 앱 Chrome: Header + Service Nav ===== */
:root {
  --app-chrome-max-width: 1280px;
  --app-chrome-padding-x: 20px;
  --app-chrome-header-height: 112px;
  --app-service-nav-height: 70px;
  --app-chrome-stack-height: calc(var(--app-chrome-header-height) + var(--app-service-nav-height));
  --app-shell-header-height: var(--app-chrome-header-height);
  --app-chrome-tab-bg: #2d2a86;
}

.app-chrome-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  max-width: 100vw;
  background: var(--app-chrome-tab-bg);
  isolation: isolate;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
}

.app-chrome-sticky > .app-chrome-header,
.app-chrome-sticky > .app-shell-header.sc-module-bar {
  position: relative;
  top: auto;
  z-index: 2;
  background: var(--app-chrome-tab-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.app-chrome-sticky > .app-service-nav {
  position: relative;
  top: auto;
  z-index: 1;
  background: var(--app-chrome-tab-bg);
  border-bottom: none;
  box-shadow: none;
}

.app-chrome-sticky > .app-service-nav .main-tabs {
  position: static;
  top: auto;
  z-index: auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 767px) {
  :root {
    --app-chrome-padding-x: 12px;
  }
}

.app-chrome-container {
  width: 100%;
  max-width: var(--app-chrome-max-width);
  margin: 0 auto;
  padding-left: var(--app-chrome-padding-x);
  padding-right: var(--app-chrome-padding-x);
  box-sizing: border-box;
}

/* SpeedCall · DB 수집기 공통 콘텐츠 폭 */
.app-content-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-left: var(--app-chrome-padding-x, 12px);
  padding-right: var(--app-chrome-padding-x, 12px);
  box-sizing: border-box;
}

#appShell > .app-content-container,
#module-chinalead > .app-content-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  #module-chinalead > .app-content-container.module-chinalead__inner {
    width: 100%;
    max-width: 100%;
    padding-left: var(--app-chrome-padding-x, 12px);
    padding-right: var(--app-chrome-padding-x, 12px);
  }

  #module-chinalead .chinalead-root .cl-module,
  #module-chinalead .chinalead-root .cl-module--header,
  #module-chinalead .chinalead-root .cl-module--body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 16px 12px 24px;
    border-radius: 14px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  #module-chinalead .cl-search-page,
  #module-chinalead .cl-search-results-section,
  #module-chinalead .cl-collected-page {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #module-chinalead .cl-collected-page {
    padding-left: 0;
    padding-right: 0;
  }

  #module-chinalead .cl-saved-card {
    padding: 20px;
    border-radius: 14px;
  }

  #module-chinalead .cl-collected-filter-box,
  #module-chinalead .cl-collected-toolbar,
  #module-chinalead .cl-collected-action-bar,
  #module-chinalead .cl-collected-table-wrap,
  #module-chinalead .cl-saved-grid__cards {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #module-chinalead .cl-search-card,
  #module-chinalead .cl-search-bar-stack,
  #module-chinalead .cl-unified-search {
    width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .app-content-container {
    max-width: var(--app-chrome-max-width, 1280px);
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-chrome-header,
.app-shell-header.sc-module-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--app-chrome-header-height);
  background: linear-gradient(135deg, var(--brand-bg) 0%, var(--brand-bg-sub) 100%);
  border-bottom: none;
  box-shadow: none;
  color: var(--text-on-dark-secondary);
  overflow: visible;
}

.app-chrome-header__inner,
.app-shell-header__inner {
  min-height: var(--app-chrome-header-height);
  padding-top: 12px;
  padding-bottom: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 24px;
  overflow: visible;
}

.app-chrome-header__services,
.app-shell-header__left {
  justify-self: start;
  align-self: center;
}

.app-chrome-header__brand,
.app-shell-header__center {
  justify-self: center;
  text-align: center;
  min-width: 0;
  align-self: center;
}

.app-chrome-header__actions,
.app-shell-header__right {
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.brand-header--chrome,
.brand-header--shell {
  width: auto;
  max-width: 100%;
}

.brand-header--chrome .brand-title-row,
.brand-header--shell .brand-title-row {
  gap: 10px;
  justify-content: center;
}

.brand-header--chrome .brand-icon {
  font-size: 34px;
  line-height: 1;
}

.brand-header--chrome .brand-en {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1;
  color: var(--text-on-dark);
}

.brand-header--chrome .brand-sub-en {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.brand-header--chrome .brand-sub-kr {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
  max-width: 360px;
}

.app-service-nav {
  position: sticky;
  top: var(--app-chrome-header-height);
  z-index: 910;
  background: var(--app-chrome-tab-bg, #2d2a86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
}

.app-service-nav__inner {
  padding-top: 0;
  padding-bottom: 12px;
}

.app-service-nav .main-tabs {
  position: static;
  top: auto;
  z-index: auto;
  margin-bottom: 0;
}

/* mainMode 분리 — JS 탭 전환 실패 시에도 SpeedCall/AI 탭이 섞이지 않도록 */
body.is-module-chinalead #main-tabs-speedcall {
  display: none !important;
  visibility: hidden !important;
}

body.is-module-chinalead #main-tabs-chinalead {
  visibility: visible !important;
}

body.is-module-speedcall #main-tabs-chinalead {
  display: none !important;
  visibility: hidden !important;
}

body.is-module-speedcall #main-tabs-speedcall {
  visibility: visible !important;
}

@media (max-width: 768px) {
  body.is-module-chinalead #main-tabs-chinalead {
    display: flex !important;
  }

  body.is-module-speedcall #main-tabs-speedcall {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-service-nav .main-tabs--speedcall,
  body.is-demo .app-service-nav .main-tabs--speedcall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .app-service-nav .main-tabs--chinalead {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .app-service-nav .main-tabs--chinalead .main-tab {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 0 6px;
    font-size: 12px;
    letter-spacing: -0.3px;
  }

  .app-service-nav .main-tabs--chinalead.main-tabs--scrollable {
    overflow-x: auto;
  }

  .app-service-nav .main-tabs--chinalead.main-tabs--scrollable .main-tab {
    flex: 1 1 auto;
    min-width: 108px;
  }

  .app-service-nav .main-tabs--speedcall .main-tab,
  body.is-demo .app-service-nav .main-tabs--speedcall .main-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 44px;
    min-height: 44px;
    padding: 0 4px;
    text-align: center;
    box-sizing: border-box;
  }

  .app-service-nav .main-tabs--chinalead .main-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
  }

  .app-service-nav .main-tab--active,
  body.is-demo .app-service-nav .main-tab--active {
    background: #ffffff;
    color: var(--brand-bg);
    font-weight: 800;
    border: 1.5px solid var(--brand-accent-border);
    box-shadow:
      0 0 0 1px rgba(252, 211, 77, 0.2),
      0 0 14px var(--brand-accent-glow),
      0 4px 12px rgba(41, 38, 132, 0.1);
  }

  .app-service-nav .main-tab:not(.main-tab--active),
  body.is-demo .app-service-nav .main-tab:not(.main-tab--active) {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.96);
    box-shadow: none;
  }
}

/* 웹 데스크톱(769px+) — SpeedCall 3열 / AI 업체찾기 2열 (모바일·앱 미적용) */
@media (min-width: 769px) {
  body.is-module-speedcall #main-tabs-speedcall,
  .app-service-nav .main-tabs--speedcall.speedcall-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    flex-wrap: nowrap;
    padding: 8px 0 10px;
    background: transparent;
    border-radius: 0;
  }

  body.is-module-chinalead #main-tabs-chinalead,
  .app-service-nav .main-tabs--chinalead.ai-search-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    flex-wrap: nowrap;
    padding: 8px 0 10px;
    background: transparent;
    border-radius: 0;
  }

  body.is-module-chinalead #main-tabs-chinalead[data-tab-count="3"],
  .app-service-nav .main-tabs--chinalead.ai-search-tabs[data-tab-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.is-module-chinalead #main-tabs-chinalead[data-tab-count="4"],
  .app-service-nav .main-tabs--chinalead.ai-search-tabs[data-tab-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .app-service-nav .speedcall-tabs .main-tab,
  body.is-module-speedcall #main-tabs-speedcall .main-tab:not(.hidden):not([hidden]) {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 46px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0 14px;
    font-size: 15px;
  }

  .app-service-nav .ai-search-tabs .main-tab,
  body.is-module-chinalead #main-tabs-chinalead .main-tab:not(.hidden):not([hidden]) {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 46px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0 14px;
    font-size: 15px;
  }
}

.save-status--header {
  flex-shrink: 0;
  background: transparent;
  padding: 0 8px;
  height: auto;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.save-status--header.saved {
  background: transparent;
  color: #86efac;
}

.save-status__dot {
  font-size: 10px;
  margin-right: 2px;
}

.save-status__dot--saving {
  color: #93c5fd;
}

.save-status__dot--demo {
  color: #fcd34d;
}

.save-status__dot--failed {
  color: #fca5a5;
}

.save-status__dot--offline {
  color: #fcd34d;
}

.header-notify {
  position: relative;
  flex-shrink: 0;
}

.header-notify__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.header-notify__trigger:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
}

.header-notify__icon {
  flex-shrink: 0;
  line-height: 1;
}

.header-notify__text {
  line-height: 1;
}

.header-notify__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.popup--notification-settings {
  max-width: 440px;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.notification-settings-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.notification-settings-modal__header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.notification-settings-modal__body {
  padding: 16px 18px 18px;
}

.notification-settings-channels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.notification-channel-row__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.notification-channel-row__name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.notification-channel-row__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

.notification-channel-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.notification-channel-row__dot--on {
  background: #22c55e;
}

.notification-channel-row__dot--prep {
  background: #facc15;
}

.notification-channel-row__dot--off {
  background: #9ca3af;
}

.notification-settings-divider {
  height: 1px;
  margin: 16px 0;
  background: linear-gradient(90deg, transparent, #e5e7eb 15%, #e5e7eb 85%, transparent);
}

.notification-settings-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-settings-option {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.notification-settings-option--disabled {
  opacity: 0.65;
}

.notification-daily-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.notification-daily-row__check {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.notify-time-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.notify-time-pill:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.notify-time-pill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.notify-time-pill:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.notify-time-pill__icon {
  font-size: 14px;
  line-height: 1;
}

.popup-overlay--notify-time-picker {
  z-index: 10150;
}

.popup--notify-time-picker {
  max-width: 360px;
  width: calc(100% - 32px);
  padding: 18px 16px 16px;
}

.notify-time-picker__title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  color: #111827;
}

.notify-time-picker__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.notify-time-picker__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-align: center;
}

.notify-time-picker__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notify-time-picker__options--scroll {
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.notify-time-picker__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f9fafb;
  color: #374151;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.notify-time-picker__option:hover {
  background: #f3f4f6;
}

.notify-time-picker__option--active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.notify-time-picker__actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.notify-time-picker__actions .btn-popup-primary,
.notify-time-picker__actions .btn-popup-ghost {
  flex: 1;
  min-height: 42px;
}

.notification-settings-message {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: #ecfdf5;
  color: #047857;
}

.notification-settings-message--error {
  background: #fef2f2;
  color: #b91c1c;
}

.notification-settings-footer {
  margin-top: 16px;
}

.notification-settings-footer .btn-popup-primary {
  width: 100%;
}

.notification-channel-row .btn-notify {
  flex: 0 0 auto;
  min-width: 72px;
}

.header-notify__status-dot--none {
  background: #9ca3af;
}

.header-notify__status-dot--partial {
  background: #facc15;
}

.header-notify__status-dot--all {
  background: #22c55e;
}

.header-notify__popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  z-index: 1000;
  color: var(--text-primary);
}

.header-notify__popover-head {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 10px;
}

.header-notify__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-notify-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #f9fafb;
}

.header-notify-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.header-notify-row__name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.header-notify-row__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

.header-notify-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.header-notify-row__dot--on {
  background: #22c55e;
}

.header-notify-row__dot--prep {
  background: #facc15;
}

.header-notify-row__dot--off {
  background: #9ca3af;
}

.header-notify-row .btn-notify {
  flex-shrink: 0;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.header-user-menu {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
  z-index: 3;
}

.header-user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  max-width: 180px;
}

.header-user-menu__trigger:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
}

.header-user-menu__icon {
  flex-shrink: 0;
  line-height: 1;
}

#header-user-display-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.header-user-menu__caret {
  flex-shrink: 0;
  font-size: 9px;
  opacity: 0.75;
  line-height: 1;
}

.header-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  z-index: 10100;
  opacity: 1;
  isolation: isolate;
}

.header-user-dropdown--portal {
  position: fixed;
  z-index: 10100;
}

.header-user-dropdown,
.header-user-dropdown * {
  opacity: 1;
}

.header-user-dropdown__meta {
  padding: 10px 12px 8px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 4px;
}

.header-user-dropdown__display-name {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}

.header-user-dropdown__email-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.header-user-dropdown__email {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  word-break: break-all;
  line-height: 1.4;
}

.header-user-dropdown__item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.header-user-dropdown__item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.header-user-dropdown__item--danger {
  color: #dc2626;
}

.header-user-dropdown__item--danger:hover {
  background: #fef2f2;
}

.header-user-dropdown__section {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #e5e7eb;
}

.header-user-dropdown__section--logout {
  margin-top: 4px;
  padding-top: 4px;
}

.app-service-nav #tab-admin,
.app-service-nav .main-tab--admin {
  display: none !important;
}

body.is-authenticated .main-tabs {
  top: var(--app-chrome-stack-height);
}

@media (min-width: 769px) and (max-width: 900px) {
  :root {
    --app-chrome-header-height: 100px;
    --app-shell-header-height: 100px;
    --app-chrome-padding-x: 14px;
  }

  .app-chrome-header__inner,
  .app-shell-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "services actions"
      "brand brand";
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 10px 12px;
  }

  .app-chrome-header__services,
  .app-shell-header__left {
    grid-area: services;
  }

  .app-chrome-header__brand,
  .app-shell-header__center {
    grid-area: brand;
    padding-bottom: 2px;
  }

  .app-chrome-header__actions,
  .app-shell-header__right {
    grid-area: actions;
  }

  .brand-header--chrome .brand-en,
  .brand-header--shell .brand-en {
    font-size: 32px;
  }

  .brand-header--chrome .brand-icon,
  .brand-header--shell .brand-icon {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  :root {
    --app-chrome-header-height: 56px;
    --app-shell-header-height: 56px;
    --app-service-nav-height: 62px;
    --app-chrome-stack-height: calc(var(--app-chrome-header-height) + var(--app-service-nav-height));
    --app-chrome-padding-x: 20px;
  }

  .app-chrome-sticky {
    padding-top: max(0px, env(safe-area-inset-top, 0px));
  }

  .app-chrome-sticky > .app-chrome-header,
  .app-chrome-sticky > .app-shell-header.sc-module-bar,
  .app-chrome-sticky > .app-service-nav {
    background: #2d2a86;
  }

  .app-chrome-sticky > .app-chrome-header,
  .app-chrome-sticky > .app-shell-header.sc-module-bar {
    position: relative !important;
    top: auto !important;
  }

  .app-chrome-sticky > .app-service-nav {
    position: relative !important;
    top: auto !important;
  }

  body.is-authenticated .app-chrome-sticky .main-tabs,
  body.is-demo .app-chrome-sticky .main-tabs {
    top: auto;
    position: static;
  }

  body.is-authenticated,
  body.is-demo {
    overflow-x: hidden;
  }

  /* ===== 모바일 Header (단일 소스) ===== */
  .mobile-header,
  .app-chrome-header.mobile-header,
  .app-shell-header.mobile-header,
  .sc-module-bar.mobile-header {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
  }

  .mobile-header__inner,
  .mobile-header .app-chrome-header__inner,
  .mobile-header .app-shell-header__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 56px;
    height: auto;
    padding: 12px 16px !important;
    margin: 0;
    gap: 8px;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
    overflow: hidden;
  }

  .mobile-header .app-chrome-container {
    width: 100%;
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0;
  }

  .desktop-header-logo-center,
  .app-chrome-header__brand,
  .app-shell-header__center {
    display: none !important;
  }

  .desktop-module-tabs {
    display: none !important;
  }

  .mobile-header-logo-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-on-dark);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: none;
    position: static;
    transform: none;
  }

  .mobile-header-logo-btn__icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
  }

  .mobile-header-logo,
  .app-chrome-header__services,
  .app-shell-header__left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    justify-self: auto !important;
    position: static !important;
    transform: none !important;
  }

  .mobile-header-logo__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-status-text,
  .notification-text,
  .user-name-text,
  .header-user-menu__caret {
    display: none !important;
  }

  .save-status--header,
  #platform-dev-banner {
    display: none !important;
  }

  /* 우측: 🔍 🔔 👤 */
  .mobile-header-actions,
  .app-chrome-header__actions,
  .app-shell-header__right,
  .sc-module-bar__actions {
    flex: 0 0 auto;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    padding-right: 0;
    flex-wrap: nowrap;
    overflow: visible;
    position: static !important;
    transform: none !important;
    right: auto !important;
    left: auto !important;
    justify-self: auto !important;
    z-index: 2;
    width: auto;
    max-width: none;
  }

  .mobile-header-icon-btn,
  .mobile-header-actions .sc-module-btn--mobile-db,
  .mobile-header-actions .header-notify__trigger,
  .mobile-header-actions .header-user-menu__trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    gap: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: none;
    position: static !important;
    transform: none !important;
    right: auto !important;
    left: auto !important;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .mobile-header-actions .sc-module-btn--mobile-db.sc-module-btn--active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
  }

  .mobile-header-icon-btn.sc-module-btn--mobile-db:not(.hidden) {
    display: inline-flex !important;
  }

  .mobile-header-actions .mobile-header-icon-btn.hidden,
  .mobile-header-actions .sc-module-btn--mobile-db.hidden {
    display: none !important;
  }

  .mobile-header-icon-btn:hover,
  .mobile-header-icon-btn:active,
  .mobile-header-actions .header-notify__trigger:hover,
  .mobile-header-actions .header-notify__trigger:active,
  .mobile-header-actions .header-user-menu__trigger:hover,
  .mobile-header-actions .header-user-menu__trigger:active {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
  }

  .mobile-header-icon-btn__glyph,
  .mobile-header-actions .header-notify__icon,
  .mobile-header-actions .header-user-menu__icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
  }

  .mobile-header-actions .header-notify,
  .mobile-header-actions .header-user-menu {
    position: relative;
    flex: 0 0 auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 40px;
    height: 40px;
  }

  .mobile-header-actions .header-notify__status-dot {
    position: absolute;
    top: 2px;
    right: 2px;
  }

  .mobile-header-actions .header-user-menu__trigger {
    overflow: hidden;
    max-width: 40px;
  }

  body.is-module-chinalead .mobile-header-logo-btn,
  body.is-module-speedcall .mobile-header-logo-btn {
    display: inline-flex !important;
  }

  .app-service-nav {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .app-service-nav__inner {
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.is-module-chinalead .app-service-nav .app-chrome-container,
  body.is-module-chinalead .app-service-nav__inner {
    padding-left: var(--app-chrome-padding-x, 12px);
    padding-right: var(--app-chrome-padding-x, 12px);
  }

  .app-service-nav .main-tabs--speedcall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 0;
    border-radius: 0;
    background: transparent;
    padding: 8px 0 10px;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .app-service-nav .main-tabs--chinalead {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    border-radius: 0;
    background: transparent;
    padding: 8px 0 10px;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .app-service-nav .main-tabs--chinalead .main-tab {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 0 6px;
    font-size: 12px;
    letter-spacing: -0.3px;
  }

  .app-service-nav .main-tabs--chinalead.main-tabs--scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-service-nav .main-tabs--speedcall .main-tab {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 2px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.35px;
    line-height: 1.1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .app-service-nav #tab-calendar {
    font-size: 10.5px;
    letter-spacing: -0.45px;
  }
}

@media (max-width: 360px) {
  .app-service-nav__inner {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.is-module-chinalead .app-service-nav .app-chrome-container,
  body.is-module-chinalead .app-service-nav__inner {
    padding-left: var(--app-chrome-padding-x, 12px);
    padding-right: var(--app-chrome-padding-x, 12px);
  }

  .app-service-nav .main-tabs--speedcall,
  .cl-module-service-nav .main-tabs,
  body.is-demo .app-service-nav .main-tabs--speedcall {
    gap: 6px;
  }

  .app-service-nav .main-tabs--chinalead {
    gap: 6px;
  }

  .app-service-nav .main-tabs--speedcall .main-tab,
  .cl-module-service-nav .main-tab,
  body.is-demo .app-service-nav .main-tabs--speedcall .main-tab {
    font-size: 10px;
    padding: 0 1px;
    letter-spacing: -0.5px;
  }

  .app-service-nav #tab-calendar,
  body.is-demo .app-service-nav #tab-calendar {
    font-size: 9.5px;
    letter-spacing: -0.55px;
  }
}

@media (max-width: 400px) {
  .save-status--header,
  #platform-dev-banner {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .brand-header--chrome .brand-sub-kr,
  .brand-header--shell .brand-sub-kr {
    display: none;
  }

  .brand-header--chrome .brand-sub-en,
  .brand-header--shell .brand-sub-en {
    font-size: 9px;
    letter-spacing: 1.6px;
  }
}

/* ===== SPA 모듈 바 + ChinaLead (legacy style.css — Vite 번들 실패 시 폴백) ===== */
.sc-module-bar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: linear-gradient(135deg, var(--brand-bg) 0%, var(--brand-bg-sub) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-on-dark-secondary);
}

.app-chrome-sticky > .sc-module-bar {
  position: relative !important;
  top: auto !important;
  z-index: 2;
  background: var(--app-chrome-tab-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.sc-module-bar__inner {
  max-width: var(--app-chrome-max-width, 1280px);
  margin: 0 auto;
  padding: 10px var(--app-chrome-padding-x, 16px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sc-module-bar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 767px) {
  .sc-module-bar__tabs {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .sc-module-btn {
    white-space: nowrap;
    flex: 0 1 auto;
    min-height: 34px;
    height: 34px;
  }
}

.sc-module-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sc-module-user {
  font-size: 13px;
  color: var(--text-on-dark-secondary);
}

.sc-module-logout {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-on-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.sc-module-logout:hover {
  background: rgba(255, 255, 255, 0.18);
}

.sc-module-dev {
  color: var(--text-on-dark);
}

.sc-module-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: var(--text-on-dark-secondary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.sc-module-btn--active {
  background: var(--surface);
  color: var(--brand-bg);
  border-color: var(--surface);
}

.module-chinalead {
  min-height: calc(100vh - var(--app-chrome-stack-height, 182px));
  background: linear-gradient(180deg, var(--brand-bg), var(--brand-bg-sub));
  padding: 0 0 24px;
  color: var(--text-on-dark-secondary);
  overflow-x: hidden;
}

.module-chinalead__inner {
  width: 100%;
}

.chinalead-root {
  width: 100%;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.chinalead-root .cl-module,
.cl-module--fallback {
  background: #fff;
  border-radius: 12px;
  min-height: auto;
  padding: 16px;
  color: #334155;
}

.cl-module-service-nav,
.chinalead-root .cl-module-service-nav {
  display: none !important;
}

body.is-module-chinalead .module-chinalead {
  padding-top: 0;
}

body.is-module-chinalead .app-service-nav {
  position: sticky;
  top: var(--app-chrome-header-height);
  z-index: 910;
}

.module-chinalead .chinalead-root .cl-module {
  color: #334155;
}

.module-chinalead .chinalead-root .cl-module label,
.module-chinalead .chinalead-root .cl-module .cl-checkbox,
.module-chinalead .chinalead-root .cl-module .cl-result-field dd {
  color: #334155;
}

.module-chinalead .chinalead-root .cl-module .cl-admin-card,
.module-chinalead .chinalead-root .cl-module .cl-admin-card-value,
.module-chinalead .chinalead-root .cl-module .cl-admin-card strong,
.module-chinalead .chinalead-root .cl-module .cl-admin-table td {
  color: #0f172a;
}

.cl-module-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #1f2378;
  background: #e0e7ff;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.cl-module-header {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.cl-module-header__row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
}

.cl-module-brand {
  flex: 1 1 55%;
  min-width: 0;
}

.cl-safety-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.cl-safety-notice--header {
  flex: 0 1 42%;
  max-width: 45%;
  margin-bottom: 0;
  padding: 10px 12px;
  align-self: center;
}

.cl-safety-notice__icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}

.cl-safety-notice--header .cl-safety-notice__icon {
  font-size: 18px;
  margin-top: 1px;
}

.cl-safety-notice__title {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 800;
  color: #047857;
}

.cl-safety-notice--header .cl-safety-notice__title {
  font-size: 13px;
  margin-bottom: 2px;
}

.cl-safety-notice__body p {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.45;
}

.cl-safety-notice--header .cl-safety-notice__body p {
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 2px;
}

.cl-safety-notice__body p:last-child {
  margin-bottom: 0;
}

.cl-module-title {
  font-size: 26px;
  color: #111827;
  font-weight: 800;
}

.cl-module-tagline {
  color: #6b7280;
  margin-top: 4px;
}

.cl-module-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cl-module--header {
  border-radius: 12px;
  padding-bottom: 0;
  margin-bottom: 12px;
}

.cl-module--header .cl-module-header {
  margin-bottom: 0;
  padding-bottom: 16px;
}

.cl-module-service-nav.app-service-nav {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0;
  padding: 0 0 12px;
  background: linear-gradient(135deg, var(--brand-bg) 0%, var(--brand-bg-sub) 100%);
  border-bottom: none;
  box-shadow: none;
}

.cl-module-service-nav .main-tabs {
  position: static;
  top: auto;
  z-index: auto;
  margin-bottom: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  gap: 8px;
}

.cl-module--body {
  border-radius: 12px;
  padding-top: 0;
}

.cl-module--body .cl-main {
  min-height: 200px;
}

@media (prefers-reduced-motion: no-preference) {
  .module-chinalead .cl-main.sc-view-reveal {
    animation: scListRevealIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
  }
}

/* DB 수집기 대시보드 · 파이프라인 */
.cl-dashboard {
  width: 100%;
}

.cl-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.cl-stats-grid--compact {
  gap: 8px;
  margin-bottom: 16px;
}

.cl-stats-grid--compact .cl-stat-card {
  padding: 12px 8px;
}

.cl-stats-grid--compact .cl-stat-card--primary {
  grid-column: auto;
}

.cl-stat-card {
  background: #f9fafb;
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
}

.cl-stat-card--primary {
  background: #eff6ff;
  grid-column: span 2;
}

.cl-stat-card--status {
  border-left: 4px solid var(--badge-color, #6b7280);
}

.cl-stat-card--newopen {
  background: #fff7ed;
}

.cl-stat-card--newopen-done {
  background: #ecfdf5;
}

.cl-stat-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
  word-break: keep-all;
}

.cl-stat-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.cl-pipeline {
  width: 100%;
}

.cl-pipeline-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.cl-pipeline-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cl-pipeline--compact .cl-section-title {
  margin-bottom: 10px;
  font-size: 16px;
}

.cl-pipeline-grid--compact .cl-pipeline-card {
  padding: 12px 10px;
}

.cl-search-subnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.cl-search-subnav__btn {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.cl-search-subnav__btn--active {
  border-color: #4338ca;
  background: #eef2ff;
  color: #3730a3;
}

.cl-search-tab__content {
  width: 100%;
  min-width: 0;
}

.main-tabs--chinalead {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
}

.main-tabs--chinalead[data-tab-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.main-tabs--chinalead[data-tab-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.main-tabs--chinalead .main-tab {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.main-tabs--chinalead.main-tabs--scrollable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.main-tabs--chinalead.main-tabs--scrollable::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  body.is-module-chinalead .app-service-nav .app-chrome-container,
  body.is-module-chinalead .app-service-nav__inner {
    width: 100%;
    max-width: 100%;
    padding-left: var(--app-chrome-padding-x, 12px);
    padding-right: var(--app-chrome-padding-x, 12px);
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .main-tabs--chinalead {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: hidden;
  }

  .main-tabs--chinalead .main-tab {
    flex: 1 1 0;
    width: auto;
  }

  .main-tabs--chinalead.main-tabs--scrollable {
    overflow-x: auto;
  }

  .main-tabs--chinalead.main-tabs--scrollable .main-tab {
    flex: 1 1 auto;
    min-width: 108px;
  }
}

.cl-pipeline-card {
  background: #f9fafb;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.cl-pipeline-card--done {
  background: #ecfdf5;
}

.cl-pipeline-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

.cl-pipeline-count {
  display: block;
  font-size: 24px;
  font-weight: 800;
}

.cl-pipeline-revenue {
  display: block;
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

@media (min-width: 768px) {
  .cl-stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }

  .cl-stats-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cl-stat-card--primary {
    grid-column: span 2;
  }

  .cl-stats-grid--compact .cl-stat-card--primary {
    grid-column: auto;
  }

  .cl-pipeline-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cl-pipeline-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cl-module-service-nav .main-tabs {
    flex-wrap: nowrap;
    overflow: visible;
  }

  .cl-module-service-nav .main-tab {
    flex: 1 1 0;
    min-width: 96px;
    height: 46px;
    min-height: 46px;
    font-size: 15px;
    border-radius: var(--radius);
  }
}

@media (max-width: 767px) {
  .module-chinalead,
  .module-chinalead__inner,
  .chinalead-root {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .module-chinalead .chinalead-root .cl-module,
  .module-chinalead .chinalead-root .cl-module--header,
  .module-chinalead .chinalead-root .cl-module--body {
    padding: 16px 12px 24px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .cl-module-tagline {
    display: none;
  }

  .cl-module-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .cl-module-title {
    font-size: 22px;
    color: #111827;
  }

  .cl-module-tagline {
    font-size: 14px;
    line-height: 1.45;
    color: #4b5563;
  }

  .cl-module-badge {
    font-size: 11px;
    color: #1e3a8a;
    background: #dbeafe;
  }

  .cl-module-header__row {
    flex-direction: column;
    gap: 10px;
  }

  .cl-module-brand {
    flex: 1 1 auto;
    width: 100%;
  }

  .cl-safety-notice--header {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
    align-self: stretch;
    padding: 10px 12px;
    gap: 8px;
  }

  .cl-safety-notice--header .cl-safety-notice__title {
    font-size: 13px;
    margin-bottom: 2px;
  }

  .cl-safety-notice--header .cl-safety-notice__body p {
    font-size: 11px;
    line-height: 1.35;
    margin-bottom: 2px;
  }

  .cl-safety-notice--header .cl-safety-notice__icon {
    font-size: 16px;
  }

  .app-service-nav__inner {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .cl-module-service-nav .main-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: hidden;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: none;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .cl-module-service-nav .main-tabs::-webkit-scrollbar {
    display: none;
  }

  .cl-module-service-nav .main-tab {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 0 4px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .cl-stat-value {
    font-size: 20px;
  }

  .cl-pipeline-count {
    font-size: 22px;
  }
}

.cl-loading,
.cl-error {
  text-align: center;
  padding: 32px 16px;
  color: #6b7280;
}

.cl-error {
  color: #dc2626;
}

/* =========================
   고객 DB 관리 시트 · 모달
========================= */
.btn-db-manage {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-db-manage:hover {
  background: var(--surface-muted);
  color: var(--text-main);
  border-color: #cbd5e1;
}

body.db-manage-sheet-open {
  overflow: hidden;
}

.db-manage-sheet {
  position: fixed;
  inset: 0;
  z-index: 10050;
  pointer-events: none;
}

.db-manage-sheet:not(.hidden) {
  pointer-events: auto;
}

.db-manage-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.db-manage-sheet:not(.hidden) .db-manage-sheet__backdrop {
  opacity: 1;
}

.db-manage-sheet__panel {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(440px, calc(100vw - 32px));
  max-height: min(90dvh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(17, 24, 39, 0.18);
  transform: translate(-50%, calc(-50% + 12px));
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.db-manage-sheet:not(.hidden) .db-manage-sheet__panel {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.db-manage-sheet__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.db-manage-sheet__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
}

.db-manage-sheet__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.db-manage-sheet__close:hover {
  background: var(--surface-muted);
}

.db-manage-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 16px;
}

.db-manage-sheet__intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
}

.db-manage-sheet__intro-icon {
  font-size: 18px;
  line-height: 1.2;
}

.db-manage-sheet__intro-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.db-manage-sheet__intro-text strong {
  font-size: 14px;
  color: var(--text-main);
}

.db-manage-sheet__intro-desc {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.45;
}

.db-manage-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.db-manage-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.db-manage-menu-item:last-child {
  border-bottom: none;
}

.db-manage-menu-item:hover {
  background: #f8fafc;
}

.db-manage-menu-item__icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}

.db-manage-menu-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-manage-menu-item__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.db-manage-menu-item__desc {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
}

.db-manage-menu-item__chevron {
  flex-shrink: 0;
  font-size: 14px;
  color: #94a3b8;
  font-weight: 700;
}

.db-manage-sheet__close-btn {
  width: 100%;
  margin-top: 12px;
  min-height: 44px;
}

.popup-overlay--elevated {
  /* z-index managed by ModalStack */
}

.popup--db-manage {
  max-width: 480px;
}

.db-manage-modal-toolbar {
  margin-bottom: 10px;
}

.db-export-format-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 4px;
}

.db-export-format-btn {
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.db-export-format-btn:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: var(--primary);
}

.db-export-format-btn--primary {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: var(--primary);
}

.db-info-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.db-info-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.db-info-stat {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}

.db-info-stat__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 4px;
}

.db-info-stat__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  word-break: break-all;
}

.db-sms-integration-status {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}

.db-sms-integration-status__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.db-sms-integration-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db-sms-integration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.db-sms-integration-row strong {
  font-weight: 800;
}

.btn-add-status-compact {
  min-height: 34px;
  padding: 0 12px;
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.btn-add-status-compact:hover {
  background: #eff6ff;
}

.profile-settings-page--simple .profile-page-subtitle {
  margin: 4px 0 16px;
  font-size: 13px;
  color: var(--text-sub);
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.profile-form-grid__full {
  grid-column: 1 / -1;
}

.profile-form-grid .form-group {
  margin: 0;
  min-width: 0;
}

.profile-form-grid .form-group :is(input, select, textarea) {
  width: 100%;
  box-sizing: border-box;
}

.profile-referral-card,
.profile-org-card,
.profile-security-card {
  margin-top: 20px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.profile-security-card__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.profile-security-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.profile-security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.profile-security-row__label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
}

.profile-security-row__value {
  font-size: 14px;
  color: #111827;
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

.profile-security-row__value--mono {
  letter-spacing: 0.12em;
}

.btn-profile-security {
  width: 100%;
  min-height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn-profile-security:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.btn-profile-security:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.popup--password-change {
  max-width: 480px;
}

.password-change-auth {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.password-change-auth__title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #374151;
}

.password-change-auth__desc {
  margin: 0 0 10px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

.password-change-auth__actions {
  margin-bottom: 10px;
}

.password-change-auth__otp {
  margin-bottom: 10px;
}

.password-change-auth__status {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.password-change-auth__status--success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.password-change-auth__status--error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.password-change-form .form-group {
  margin-bottom: 12px;
}

.password-change-form .form-group.hidden {
  display: none;
}

.btn-popup-primary--compact {
  width: 100%;
  min-height: 38px;
}

.settings-profile-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.account-page-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.account-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.account-page-layout__primary,
.account-page-layout__secondary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.account-profile-card__hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.account-profile-card__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
}

.account-profile-card__identity {
  flex: 1;
  min-width: 0;
}

.account-profile-card__identity .profile-display-name {
  margin: 0 0 4px;
}

.account-profile-card__identity .profile-display-role {
  margin: 0;
}

.account-profile-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.settings-profile-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-display-meta__item--plan {
  align-items: flex-start;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.profile-stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f9fafb;
}

.profile-stat-card__label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.profile-stat-card__value {
  font-size: 24px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
}

@media (max-width: 640px) {
  .profile-stats-grid {
    grid-template-columns: 1fr;
  }

  .account-profile-card__hero {
    flex-wrap: wrap;
  }

  .account-profile-card__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.account-profile-card__footer {
  margin-top: 18px;
}

.account-plan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-plan-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-plan-card__label {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}

.account-plan-card__plan {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.account-plan-card__renewal {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.btn-account-change-plan {
  width: 100%;
  min-height: 42px;
  margin-top: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn-account-change-plan:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.account-usage-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.account-usage-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.account-usage-item__label {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.account-usage-item__value {
  font-size: 13px;
  font-weight: 700;
  color: #4b5563;
  font-variant-numeric: tabular-nums;
}

.account-usage-bar {
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.account-usage-bar__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 0.35s ease, background-color 0.25s ease;
}

.account-usage-bar__fill--safe {
  background: #2563eb;
}

.account-usage-bar__fill--warn {
  background: #f97316;
}

.account-usage-bar__fill--danger {
  background: #ef4444;
}

.subscription-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 4px 48px;
}

.subscription-page-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.subscription-page-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.subscription-page-header__intro {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.subscription-manage {
  position: relative;
  flex: 0 0 auto;
  margin-top: 4px;
}

.btn-subscription-manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.btn-subscription-manage:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.subscription-manage-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 196px;
  padding: 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.subscription-manage-menu__item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.subscription-manage-menu__item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.subscription-manage-menu__item--danger {
  color: #dc2626;
}

.subscription-manage-menu__item--danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.subscription-manage-menu__divider {
  height: 1px;
  margin: 4px 0;
  background: #e5e7eb;
}

.plan-lock-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}

.plan-lock-banner.hidden {
  display: none !important;
}

.plan-lock-banner__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  color: #92400e;
}

.plan-lock-banner__btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  background: #fff;
  color: #b45309;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.plan-lock-banner__btn:hover {
  background: #fff7ed;
}

.contact-item--plan-locked {
  opacity: 0.72;
  background: #f8fafc;
}

.contact-item--plan-locked .btn-call,
.contact-item--plan-locked .btn-contact-call {
  pointer-events: none;
  opacity: 0.45;
}

.contact-plan-lock-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .plan-lock-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .plan-lock-banner__btn {
    width: 100%;
  }
}

.subscription-plans-grid--select-mode {
  animation: subscription-plan-highlight 1.4s ease;
}

.popup--subscription-cancel .popup-hint {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
}

.subscription-page-header .btn-subscription-back {
  align-self: flex-start;
  margin-bottom: -4px;
}

.btn-subscription-back {
  align-self: flex-start;
  min-height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-subscription-back:hover {
  background: rgba(17, 24, 39, 0.05);
  color: #111827;
}

.subscription-page-title {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111827;
}

.subscription-page-lead {
  margin: 0;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.65;
  color: #6b7280;
}

.subscription-plans-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  align-items: end;
}

.subscription-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  padding: 28px 26px 26px;
  border: none;
  border-radius: 28px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.05),
    0 4px 16px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}

.subscription-plan-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 1.5px rgba(139, 92, 246, 0.35),
    0 20px 48px rgba(15, 23, 42, 0.1),
    0 0 28px rgba(139, 92, 246, 0.12);
}

.subscription-plan-card--featured {
  padding: 34px 28px 28px;
  background: linear-gradient(180deg, #fdfbff 0%, #ffffff 52%);
  box-shadow:
    0 0 0 2px #8b5cf6,
    0 28px 64px rgba(124, 58, 237, 0.2);
  transform: translateY(-18px) scale(1.045);
  z-index: 3;
}

.subscription-plan-card--featured:hover {
  transform: translateY(-20px) scale(1.06);
  box-shadow:
    0 0 0 2px #7c3aed,
    0 32px 72px rgba(124, 58, 237, 0.28);
}

.subscription-plan-card--current:not(.subscription-plan-card--featured) {
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.18),
    0 4px 16px rgba(124, 58, 237, 0.06);
}

.subscription-plan-card[data-plan-id="Business"]:hover {
  box-shadow:
    0 0 0 1.5px rgba(234, 88, 12, 0.35),
    0 20px 48px rgba(234, 88, 12, 0.1),
    0 0 28px rgba(234, 88, 12, 0.12);
}

.subscription-plan-card__ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
  z-index: 2;
}

.subscription-plan-card--highlight {
  animation: subscription-plan-highlight 1.4s ease;
}

@keyframes subscription-plan-highlight {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(139, 92, 246, 0);
  }
}

.subscription-plan-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f5f3ff;
  color: #7c3aed;
  flex-shrink: 0;
}

.subscription-plan-card--featured .subscription-plan-icon-box {
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
  color: #6d28d9;
}

.subscription-plan-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.subscription-plan-marketing-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.subscription-plan-marketing-badge--gray {
  background: #f3f4f6;
  color: #6b7280;
}

.subscription-plan-marketing-badge--blue {
  background: #eff6ff;
  color: #2563eb;
}

.subscription-plan-marketing-badge--purple {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #6d28d9;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.18);
}

.subscription-plan-marketing-badge--orange {
  background: #fff7ed;
  color: #ea580c;
}

.subscription-plan-marketing-badge--black {
  background: #111827;
  color: #fff;
}

.subscription-plan-card--featured .subscription-plan-marketing-badge--purple {
  padding: 7px 14px;
  font-size: 12px;
}

.subscription-plan-tier-badge {
  display: none;
}

.subscription-plan-card__badges {
  display: none;
}

.subscription-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.subscription-plan-badge--popular {
  background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
  color: #6d28d9;
}

.subscription-plan-badge--recommended {
  background: #111827;
  color: #fff;
}

.subscription-plan-badge--launch {
  background: linear-gradient(135deg, #ffe4e6 0%, #ffedd5 100%);
  color: #ea580c;
  box-shadow: 0 1px 2px rgba(234, 88, 12, 0.1);
}

.subscription-plan-card__icon {
  display: none;
}

.subscription-plan-card__name {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111827;
}

.subscription-plan-card__tagline {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
  min-height: auto;
}

.subscription-plan-card__extra-desc {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #9ca3af;
}

.subscription-plan-card__price-block {
  margin-bottom: 20px;
}

.subscription-plan-card__price-block--free .subscription-plan-card__price {
  color: #374151;
  font-size: 32px;
}

.subscription-plan-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 0;
}

.subscription-plan-card__price {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111827;
  line-height: 1.15;
}

.subscription-plan-card--featured .subscription-plan-card__price {
  font-size: 28px;
}

.subscription-plan-card__price-daily {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
  line-height: 1.4;
}

.subscription-plan-card__period {
  font-size: 15px;
  font-weight: 600;
  color: #9ca3af;
}

.subscription-plan-card__price-subtext {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
  line-height: 1.4;
}

.subscription-plan-card__price-block--free .subscription-plan-card__price-subtext {
  color: #a78bfa;
}

.subscription-plan-card__divider {
  height: 1px;
  margin: 0 0 22px;
  background: rgba(15, 23, 42, 0.06);
}

.subscription-plan-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 28px;
}

.subscription-plan-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.subscription-plan-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
}

.subscription-plan-feature--includes {
  font-weight: 700;
  color: #111827;
}

.subscription-plan-feature__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fafafa;
  color: #7c3aed;
}

.subscription-plan-feature--includes .subscription-plan-feature__icon {
  background: #f5f3ff;
}

.subscription-plan-feature__icon svg {
  display: block;
}

.subscription-plan-feature__text {
  min-width: 0;
}

.subscription-plan-feature-divider {
  display: none;
}

.subscription-plan-card__action {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.subscription-plan-card__recommend {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f9fafb;
  text-align: center;
}

.subscription-plan-card__recommend-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.subscription-plan-card__recommend-text {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #4b5563;
  line-height: 1.5;
}

.subscription-plan-card__recommend--featured {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.subscription-plan-card__recommend--featured .subscription-plan-card__recommend-label {
  color: #8b5cf6;
}

.subscription-plan-card__recommend--featured .subscription-plan-card__recommend-text {
  color: #6d28d9;
  font-weight: 700;
}

.subscription-plan-upgrade-benefits {
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #faf5ff 0%, #f5f3ff 100%);
}

.subscription-plan-upgrade-benefits__label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: -0.01em;
}

.subscription-plan-upgrade-benefits__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.subscription-plan-upgrade-benefits__list li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: #4c1d95;
}

.subscription-plan-upgrade-benefits__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #8b5cf6;
}

.subscription-plan-card--featured .subscription-plan-upgrade-benefits {
  background: linear-gradient(180deg, #f3e8ff 0%, #ede9fe 100%);
}

.subscription-plan-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #f5f3ff;
  color: #7c3aed;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.subscription-plan-status__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ede9fe;
  color: #7c3aed;
}

.subscription-plan-status__icon svg {
  display: block;
}

.btn-subscription-plan {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  letter-spacing: -0.01em;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.btn-subscription-plan--primary {
  background: #111827;
  color: #fff;
}

.btn-subscription-plan--primary:hover {
  background: #1f2937;
  transform: translateY(-1px);
}

.btn-subscription-plan--featured {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.32);
}

.btn-subscription-plan--featured:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.4);
}

.btn-subscription-plan--secondary {
  background: #fff;
  color: #374151;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.btn-subscription-plan--secondary:hover {
  background: #fafafa;
}

.btn-subscription-plan--downgrade {
  background: #fff;
  color: #7c3aed;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18);
}

.btn-subscription-plan--downgrade:hover {
  background: #faf5ff;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.28);
}

.btn-subscription-plan--ghost {
  background: transparent;
  color: #9ca3af;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.btn-subscription-plan--ghost:hover {
  color: #6b7280;
  background: #fafafa;
}

.btn-subscription-plan--current {
  display: none;
}

.account-settings-extra {
  margin-top: 8px;
}

.popup--usage-upsell {
  max-width: 420px;
}

.usage-upsell-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
}

.usage-upsell-message {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
}

.usage-upsell-benefit {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f5f3ff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #7c3aed;
  text-align: center;
}

.usage-upsell-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.subscription-page-active .settings-page > .profile-page-title,
body.subscription-page-active .settings-subnav--web {
  display: none;
}

@media (max-width: 1100px) {
  .subscription-plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .subscription-plan-card--featured {
    transform: none;
    order: -1;
    grid-column: 1 / -1;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }

  .subscription-plan-card--featured:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 640px) {
  .subscription-plans-grid {
    grid-template-columns: 1fr;
  }

  .subscription-page-header__top {
    flex-direction: column;
    align-items: stretch;
  }

  .subscription-manage {
    align-self: flex-end;
  }

  .subscription-page-title {
    font-size: 26px;
  }

  .subscription-plan-card--featured {
    max-width: none;
    order: -1;
  }
}

.settings-page .settings-profile-page.settings-panel {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.settings-section-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.settings-section-card__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.settings-section-card__title--stats {
  font-size: 16px;
  color: #6b7280;
}

.settings-section-card--stats {
  background: #f9fafb;
}

.settings-notification-section__body .notification-settings-footer {
  margin-top: 12px;
}

.profile-subscription-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.profile-subscription-card__label {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}

.profile-subscription-card__plan {
  font-size: 18px;
  font-weight: 800;
  color: #1d4ed8;
}

.profile-subscription-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

.profile-display-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.profile-display-fields__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.profile-display-fields__label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.profile-display-fields__value {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  word-break: break-word;
}

.profile-referral-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.settings-other-section .profile-security-card {
  margin-top: 0;
  border: none;
  padding: 0;
  box-shadow: none;
  background: transparent;
}

.settings-sms-page.settings-section-card {
  min-width: 0;
  overflow-x: hidden;
}

.profile-referral-stats {
  margin-top: 0;
}

.profile-referral-stats .referral-kpi-card--stat {
  padding: 18px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.profile-referral-stats .referral-kpi-card__value {
  font-size: 32px;
}

.profile-referral-stats .referral-kpi-card__value.sc-metric-num .sc-metric-num__text {
  min-width: 2.8em;
}

.profile-settings-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.profile-settings-split__secondary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.settings-profile-page .profile-view-card,
.settings-profile-page .profile-referral-card,
.settings-profile-page .account-usage-card,
.settings-profile-page .account-plan-card,
.settings-profile-page .profile-security-card {
  margin-top: 0;
}

.settings-profile-page .profile-referral-card {
  height: auto;
}

.profile-view-card__footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-card-subscription-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 55%, #ffffff 100%);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08);
}

.profile-card-subscription-block__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.profile-card-subscription-block__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e0e7ff;
  font-size: 12px;
  font-weight: 700;
  color: #4338ca;
}

.profile-card-subscription-block__plan {
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #312e81;
}

.profile-card-subscription-block__plan--pro-plus {
  color: #6d28d9;
}

.profile-card-subscription-block__plan--free {
  color: #4b5563;
}

.profile-card-subscription-block__plan--pro {
  color: #1d4ed8;
}

.profile-card-subscription-block__plan--business {
  color: #c2410c;
}

.profile-card-subscription-block__plan--enterprise {
  color: #111827;
}

.profile-card-subscription-block__role {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.profile-card-subscription-block__role--user {
  background: #f3f4f6;
  color: #6b7280;
}

.profile-card-subscription-block__role--admin {
  background: #eff6ff;
  color: #1d4ed8;
}

.profile-card-subscription-block__role--super_admin {
  background: #fef3c7;
  color: #b45309;
}

.profile-card-subscription-block__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #4b5563;
}

.btn-profile-change-plan {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-profile-change-plan:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28);
}

@media (max-width: 640px) {
  .profile-card-subscription-block {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .btn-profile-change-plan {
    width: 100%;
  }
}

.profile-card-subscription {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-card-subscription__label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.profile-card-subscription__plan {
  font-size: 18px;
  font-weight: 800;
  color: #1d4ed8;
}

.profile-card-subscription__plan--pro-plus {
  color: #6d28d9;
}

.profile-card-subscription__plan--free {
  color: #6b7280;
}

.profile-card-subscription__plan--business {
  color: #c2410c;
}

.profile-card-subscription__plan--enterprise {
  color: #111827;
}

.profile-card-subscription__upsell {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

.profile-view-card__actions {
  display: flex;
  justify-content: flex-start;
}

.settings-profile-page .profile-referral-card .referral-dashboard-reward {
  margin-top: auto;
}

@media (max-width: 900px) {
  .profile-settings-split,
  .account-page-layout {
    grid-template-columns: 1fr;
  }
}

.profile-view-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
}

.profile-view-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.profile-view-card__intro {
  flex: 1;
  min-width: 0;
}

.profile-view-card__title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
}

.profile-view-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

.btn-profile-edit {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.btn-profile-edit:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.profile-display-name {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
  margin-bottom: 4px;
}

.profile-display-role {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}

.profile-display-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-display-meta__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
}

.profile-display-meta__icon {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
}

.profile-display-meta__text {
  min-width: 0;
  word-break: break-word;
}

.popup--profile-edit {
  max-width: 520px;
}

.profile-form--modal .profile-form-grid {
  margin-bottom: 8px;
}

.referral-dashboard-card__header {
  margin-bottom: 18px;
}

.referral-dashboard-card__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  line-height: 1.35;
}

.referral-dashboard-card__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

.referral-dashboard-card__block + .referral-dashboard-card__block {
  margin-top: 16px;
}

.referral-dashboard-field-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.referral-dashboard-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.referral-dashboard-code {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--primary, #2563eb);
}

.referral-dashboard-link {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  color: #111827;
  font-size: 14px;
}

.btn-copy-referral-code,
.btn-copy-referral-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-copy-referral-link {
  width: 100%;
}

.btn-copy-referral-code:hover,
.btn-copy-referral-link:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.referral-dashboard-divider {
  height: 1px;
  margin: 20px 0;
  background: #e5e7eb;
}

.referral-dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.referral-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  text-align: center;
}

.referral-kpi-card__icon {
  font-size: 20px;
  line-height: 1;
}

.referral-kpi-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary, #2563eb);
}

.referral-kpi-card__label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.referral-dashboard-reward {
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
  border: 1px solid #dbeafe;
}

.referral-dashboard-reward__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
}

.referral-dashboard-reward__desc {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1d4ed8;
}

.referral-dashboard-reward__note {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.referral-dashboard-footnote {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
}

.referral-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 20px;
  align-items: stretch;
}

.referral-dashboard-code-panel,
.referral-dashboard-summary-panel {
  min-width: 0;
}

.referral-dashboard-summary-panel {
  padding-left: 20px;
  border-left: 1px solid #e5e7eb;
}

.referral-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.referral-summary-head .referral-dashboard-card__title {
  margin: 0;
}

.btn-referral-detail {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.btn-referral-detail:hover {
  background: #dbeafe;
}

.referral-summary-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.referral-summary-kpis > div {
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
}

.referral-summary-kpis strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #111827;
  letter-spacing: -0.02em;
}

.referral-summary-kpis span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.referral-next-summary {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f5f3ff 0%, #eff6ff 100%);
  border: 1px solid #ddd6fe;
}

.referral-next-summary__label,
.referral-recent__title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #4f46e5;
}

.referral-next-summary__text {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}

.referral-next-summary__meta {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: #6d28d9;
  text-align: right;
}

.referral-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.referral-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
}

.referral-recent {
  margin-top: 14px;
}

.referral-recent-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.referral-recent-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #eef2f7;
  font-size: 12px;
}

.referral-recent-item__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  color: #111827;
}

.referral-recent-item__plan {
  padding: 3px 8px;
  border-radius: 999px;
  background: #f5f3ff;
  color: #6d28d9;
  font-weight: 800;
}

.referral-recent-item__date {
  color: #64748b;
}

.referral-recent-item--empty {
  display: block;
  color: #94a3b8;
}

.popup--referral-detail {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.referral-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.referral-detail-header h2 {
  margin: 0;
}

.referral-detail-close {
  position: static;
  flex: 0 0 auto;
}

.referral-detail-body {
  display: grid;
  gap: 16px;
  overflow: auto;
  padding-right: 4px;
}

.referral-detail-section {
  padding: 16px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #fff;
}

.referral-detail-section h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 900;
  color: #111827;
}

.referral-detail-stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.referral-detail-stats > div {
  padding: 12px 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.referral-detail-stats span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.referral-detail-stats strong {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 900;
  color: #111827;
}

.referral-detail-reward p {
  margin: 8px 0;
  font-size: 14px;
  color: #334155;
}

.referral-timeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.referral-timeline-step {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  min-width: 120px;
}

.referral-timeline-step strong {
  color: #111827;
}

.referral-timeline-step span {
  font-size: 12px;
  color: #475569;
}

.referral-timeline-step em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
}

.referral-timeline-step.is-achieved {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.referral-timeline-step.is-achieved em {
  color: #2563eb;
}

.referral-timeline-step.is-active {
  border-color: #c4b5fd;
  background: #f5f3ff;
}

.referral-timeline-step.is-active em {
  color: #7c3aed;
}

.referral-detail-table-wrap {
  overflow-x: auto;
}

.referral-detail-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  font-size: 13px;
}

.referral-detail-table th,
.referral-detail-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  white-space: nowrap;
}

.referral-detail-table th {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  background: #f8fafc;
}

.referral-detail-empty {
  text-align: center;
  color: #94a3b8;
}

.referral-detail-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.referral-pending-list,
.referral-guide-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.referral-pending-list li,
.referral-guide-list li {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
}

.referral-pending-list strong,
.referral-pending-list span {
  display: block;
}

.referral-pending-list span {
  margin-top: 3px;
  font-size: 12px;
  color: #64748b;
}

.referral-auto-use__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  font-weight: 800;
}

.referral-auto-use__toggle input {
  width: 42px;
  height: 22px;
}

.referral-auto-use__preview {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.referral-auto-use__preview p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
}

.profile-referral-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.profile-referral-link-group {
  margin-bottom: 12px;
}

.profile-referral-link-group .profile-referral-link {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
}

.profile-referral-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.profile-referral-count {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

@media (max-width: 640px) {
  .referral-dashboard-layout,
  .referral-detail-two-col {
    grid-template-columns: 1fr;
  }

  .referral-dashboard-summary-panel {
    padding-left: 0;
    padding-top: 18px;
    border-left: none;
    border-top: 1px solid #e5e7eb;
  }

  .referral-summary-head {
    align-items: flex-start;
  }

  .referral-summary-kpis,
  .referral-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .popup--referral-detail {
    width: calc(100vw - 20px);
    max-height: 90vh;
  }

  .profile-referral-stats__grid,
  .profile-referral-stats.referral-dashboard-kpi-grid,
  .referral-dashboard-kpi-grid {
    grid-template-columns: 1fr;
  }

  .profile-referral-stats .referral-kpi-card__value,
  .referral-dashboard-code {
    font-size: 24px;
  }

  .referral-kpi-card__value {
    font-size: 24px;
  }
}

.profile-settings-page--simple .profile-settings-footer {
  margin-top: 20px;
}

.profile-settings-page--simple .profile-settings-footer-row--save-only .btn-profile-save {
  width: 100%;
  max-width: none;
}

@media (max-width: 768px) {
  .profile-form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .profile-form-grid__full {
    grid-column: auto;
  }
}

.profile-settings-layout--single {
  max-width: none;
}

/* =========================
   상태 관리 — compact list
========================= */
.status-settings-list--compact {
  gap: 6px;
  margin: 0;
  min-width: 0;
  position: relative;
}

.status-settings-list--sorting {
  user-select: none;
}

.status-settings-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  min-width: 0;
  overflow: hidden;
  transition:
    transform 0.18s cubic-bezier(0.2, 0, 0, 1),
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.status-settings-item--chosen,
.status-settings-item--dragging {
  opacity: 0.9;
  transform: scale(1.02);
  background: #faf5ff;
  border-color: #c4b5fd;
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.18);
  cursor: grabbing;
  z-index: 3;
}

.status-settings-item--ghost {
  opacity: 1 !important;
  transform: none !important;
  background: #f8fafc !important;
  border: 2px dashed #93c5fd !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
  min-height: 44px;
}

.status-settings-item--ghost > * {
  visibility: hidden;
}

.status-settings-item--ghost::before {
  content: "";
  display: block;
  height: 3px;
  margin: 18px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.status-settings-item--drag-over {
  border-color: #93c5fd;
  box-shadow: inset 0 3px 0 #2563eb;
}

.status-settings-row--hidden {
  opacity: 0.6;
}

.status-settings-row {
  display: grid;
  grid-template-columns: 22px 14px minmax(0, 1fr) minmax(0, auto) auto 18px;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  cursor: pointer;
  min-width: 0;
}

.status-settings-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.status-row-color {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid transparent;
  flex-shrink: 0;
}

.status-row-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.status-row-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72px;
}

.status-row-active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
  cursor: pointer;
}

.status-row-active input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.status-row-chevron {
  color: var(--text-sub);
  font-size: 11px;
  text-align: center;
}

.status-settings-detail {
  padding: 0 12px 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.status-detail-field {
  min-width: 0;
}

.status-detail-field label,
.status-detail-field .status-settings-field-title {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

.status-detail-field input {
  width: 100%;
  min-height: 40px;
}

.status-detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
}

.status-detail-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.status-settings-detail .status-preset-colors {
  gap: 6px;
}

.status-settings-detail .status-preset-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
}

.status-settings-detail .status-settings-usage {
  margin: 0;
  font-size: 12px;
  color: var(--text-sub);
}

.btn-status-remove-compact {
  align-self: flex-start;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.btn-status-remove-compact:hover {
  background: #fee2e2;
}

#db-panel-sms .sms-sender-fields,
#db-panel-sms .sms-compose-section,
#db-panel-sms .sms-preview-section {
  min-width: 0;
}

#db-panel-sms .form-group input,
#db-panel-sms .sms-preview-box {
  width: 100%;
  max-width: 100%;
}

#db-panel-sms .sms-subsection-title,
#db-panel-sms .sms-preview-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
}

#db-panel-sms .sms-preview-note {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-sub);
}

.sms-settings-message {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}

.sms-settings-message.sms-settings-message--error {
  color: var(--danger);
}

@media (max-width: 767px) {
  .db-manage-sheet__panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: min(92dvh, 720px);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    opacity: 1;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .db-manage-sheet:not(.hidden) .db-manage-sheet__panel {
    transform: translateY(0);
  }

  .status-settings-row {
    grid-template-columns: 20px 12px minmax(0, 1fr) auto 16px;
    gap: 6px;
    padding: 8px;
  }

  .status-row-meta {
    display: none;
  }

  .list-header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .btn-db-manage {
    margin-left: auto;
  }
}

/* =========================
   Landing · Auth Modal · Demo · Notifications
========================= */
.landing-page {
  --landing-max-width: 1180px;
  --landing-content-width: 1180px;
  --landing-pad-x: 24px;
  --landing-navy: #1a1f5c;
  --landing-purple: #292684;
  --landing-text: #0f172a;
  --landing-muted: #475569;
  min-height: 100vh;
  background: #f8fafc;
  overflow-x: hidden;
  color: var(--landing-text);
  font-size: 16px;
  line-height: 1.55;
}

.landing-container {
  width: 100%;
  max-width: var(--landing-max-width);
  margin: 0 auto;
  padding-left: var(--landing-pad-x);
  padding-right: var(--landing-pad-x);
  box-sizing: border-box;
}

.landing-hero-zone {
  position: relative;
  z-index: 3;
  background: linear-gradient(135deg, #1a1f5c 0%, #292684 48%, #3b2f8f 100%);
  color: #fff;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(26, 31, 92, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.landing-logo {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.landing-logo__icon {
  font-size: 22px;
  line-height: 1;
}

.landing-logo__en {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.landing-logo__kr {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.landing-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.landing-nav__link {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.landing-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.landing-nav__login {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 4px;
}

.landing-nav__login:hover {
  background: rgba(255, 255, 255, 0.16);
}

.landing-hero {
  padding: 56px 0 72px;
  text-align: center;
}

.landing-hero__inner {
  max-width: 900px;
  margin-inline: auto;
}

.landing-hero__title {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.03em;
  color: #fff;
}

.landing-hero__tagline-en {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.88);
}

.landing-hero__tagline-kr {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  position: relative;
  z-index: 5;
}

.landing-hero__actions .btn-kakao--hero,
.landing-hero__actions .btn-landing-demo {
  width: min(100%, 280px);
}

.landing-hero__actions .btn-kakao--hero {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.btn-landing-demo {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-landing-demo:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.85);
}

.landing-section {
  padding: 64px 0;
}

.landing-split-section {
  padding-top: 0;
  margin-top: -36px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.landing-split-section .landing-split-card,
.landing-split-section .landing-container {
  pointer-events: auto;
}

.landing-split-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
  border: 1px solid #e8edf5;
  overflow: hidden;
}

.landing-split-card__col {
  display: flex;
  flex-direction: column;
  padding: 52px 44px;
  min-width: 0;
  min-height: 100%;
}

.landing-split-card__header {
  flex-shrink: 0;
  min-height: 88px;
}

.landing-split-card__header--db .landing-split-card__db-head {
  margin-top: 33px;
  margin-bottom: 0;
}

.landing-split-card__intro {
  flex-shrink: 0;
  min-height: 76px;
  margin: 0 0 20px;
}

.landing-split-card__body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

.landing-split-card__footer {
  flex-shrink: 0;
  margin-top: auto;
}

.landing-split-card__col--product {
  background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
}

.landing-split-card__col--db {
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
  transition: box-shadow 0.3s ease;
}

.landing-split-card__col--highlight {
  box-shadow: inset 0 0 0 2px #22c55e;
}

.landing-split-card__divider {
  width: 1px;
  background: #e8edf5;
  align-self: stretch;
}

.landing-split-card__eyebrow {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.landing-split-card__eyebrow--purple {
  background: #ede9fe;
  color: #5b21b6;
}

.landing-split-card__title {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.25;
  color: var(--landing-text);
  letter-spacing: -0.02em;
}

.landing-split-card__title--green {
  color: #047857;
}

.landing-split-card__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--landing-muted);
}

.landing-split-card__sub {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.landing-split-card__sub--green {
  color: #059669;
}

.landing-split-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--landing-muted);
}

.landing-split-card__db-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.landing-split-card__shield {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.landing-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-feature-list__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.landing-feature-list__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #ede9fe;
  font-size: 16px;
}

.landing-feature-list__item strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--landing-text);
  margin-bottom: 2px;
}

.landing-feature-list__item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--landing-muted);
}

.landing-metrics-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
}

.landing-metrics-bar__item {
  text-align: center;
  min-width: 0;
}

.landing-metrics-bar__item strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: var(--landing-purple);
  line-height: 1.2;
}

.landing-metric-num {
  display: block;
  min-height: 1.2em;
}

.landing-metric-num__text {
  display: inline-block;
  min-width: 3.2em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.landing-metric-num[data-metric="max"] .landing-metric-num__text {
  min-width: 2.6em;
}

.landing-metrics-bar__item span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.3;
}

.landing-trust-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.landing-trust-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #bbf7d0;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08);
}

.landing-trust-card__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #dcfce7;
  color: #047857;
  font-size: 14px;
  font-weight: 800;
}

.landing-trust-card strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--landing-text);
  margin-bottom: 2px;
}

.landing-trust-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--landing-muted);
}

.btn-landing-db {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 2px solid #22c55e;
  background: #fff;
  color: #047857;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-landing-db:hover {
  background: #f0fdf4;
}

.landing-section__header {
  margin-bottom: 28px;
}

.landing-section__header--center {
  text-align: center;
}

.landing-section__title {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: var(--landing-text);
  letter-spacing: -0.02em;
}

.landing-section__desc {
  margin: 0;
  color: var(--landing-muted);
  font-size: 15px;
  line-height: 1.6;
}

.landing-pricing-section,
.landing-preview-section,
.landing-faq-section {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.landing-preview-section .landing-container {
  position: relative;
}

.landing-preview-section .landing-browser-stage {
  width: 100%;
}

.landing-app-preview {
  width: 100%;
}

.landing-app-preview .landing-browser-stage {
  perspective: 1400px;
  perspective-origin: 50% 40%;
  padding: 8px 0 4px;
  position: relative;
}

.landing-app-preview .landing-browser-stage::before {
  content: "";
  position: absolute;
  inset: 8% 10% 12%;
  background: radial-gradient(ellipse at center, rgba(41, 38, 132, 0.14) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.landing-app-preview .landing-browser-stage > .sc-browser-mockup {
  position: relative;
  z-index: 1;
}

.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.landing-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 22px 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.landing-plan-card--featured {
  border: 2px solid var(--landing-purple);
  box-shadow: 0 16px 40px rgba(41, 38, 132, 0.14);
  transform: translateY(-6px);
}

.landing-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--landing-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.landing-plan-card__name {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--landing-text);
}

.landing-plan-card__price {
  margin: 0 0 18px;
  line-height: 1.2;
}

.landing-plan-card__amount {
  font-size: 36px;
  font-weight: 900;
  color: var(--landing-purple);
  letter-spacing: -0.02em;
}

.landing-plan-card__amount--free {
  font-size: 32px;
}

.landing-plan-card__period {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.landing-plan-card__features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  flex: 1;
}

.landing-plan-card__features li {
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--landing-muted);
}

.landing-plan-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--landing-purple);
  font-weight: 800;
  font-size: 12px;
}

.btn-landing-plan-start {
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: var(--landing-text);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-landing-plan-start:hover {
  background: #f8fafc;
}

.btn-landing-plan-start--featured,
.landing-plan-card--featured .btn-landing-plan-start {
  border-color: var(--landing-purple);
  background: var(--landing-purple);
  color: #fff;
}

.btn-landing-plan-start--featured:hover,
.landing-plan-card--featured .btn-landing-plan-start:hover {
  background: #1f1c6b;
}

.landing-app-preview {
  width: 100%;
}

.landing-app-preview .sc-browser-mockup {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 24px 48px rgba(41, 38, 132, 0.18),
    0 48px 96px rgba(15, 23, 42, 0.14);
  transform: rotateX(2deg) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.landing-app-preview .landing-browser-stage:hover .sc-browser-mockup {
  transform: rotateX(1deg) scale(1.02) translateZ(0);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.06),
    0 32px 64px rgba(41, 38, 132, 0.22),
    0 64px 120px rgba(15, 23, 42, 0.16);
}

.landing-app-preview .sc-browser-mockup__chrome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #eef2f7 0%, #e2e8f0 100%);
  border-bottom: 1px solid #cbd5e1;
}

.landing-app-preview .sc-browser-mockup__traffic {
  display: flex;
  align-items: center;
  gap: 7px;
}

.landing-app-preview .sc-browser-mockup__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.landing-app-preview .sc-browser-mockup__dot--red {
  background: #ff5f57;
}

.landing-app-preview .sc-browser-mockup__dot--yellow {
  background: #febc2e;
}

.landing-app-preview .sc-browser-mockup__dot--green {
  background: #28c840;
}

.landing-app-preview .sc-browser-mockup__address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dbe3ee;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-app-preview .sc-browser-mockup__lock {
  font-size: 12px;
  line-height: 1;
}

.landing-app-preview .sc-browser-mockup__chrome-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.landing-app-preview .sc-browser-mockup__viewport {
  background: #eef2f7;
  padding: 14px;
}

.landing-app-preview .sc-dash-mock {
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.landing-app-preview .sc-dash-mock__appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1a1f5c 0%, #292684 55%, #3b2f8f 100%);
  color: #fff;
}

.landing-app-preview .sc-dash-mock__appbar-left,
.landing-app-preview .sc-dash-mock__appbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.landing-app-preview .sc-dash-mock__appbar-logo {
  font-size: 18px;
  line-height: 1;
}

.landing-app-preview .sc-dash-mock__appbar-left strong {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.landing-app-preview .sc-dash-mock__appbar-pill {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.landing-app-preview .sc-dash-mock__appbar-pill--active {
  background: rgba(255, 255, 255, 0.24);
}

.landing-app-preview .sc-dash-mock__saved {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.landing-app-preview .sc-dash-mock__call-cta {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: #2563eb;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.landing-app-preview .sc-dash-mock__kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 14px 0;
}

.landing-app-preview .sc-dash-mock__kpi {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 12px 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.landing-app-preview .sc-dash-mock__kpi-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  line-height: 1.3;
}

.landing-app-preview .sc-dash-mock__kpi-value {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  color: #2563eb;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.landing-app-preview .sc-dash-mock__kpi-value small {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
}

.landing-app-preview .sc-dash-mock__kpi-sub {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  color: #2563eb;
}

.landing-app-preview .sc-dash-mock__progress {
  margin: 12px 14px 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.landing-app-preview .sc-dash-mock__progress-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.landing-app-preview .sc-dash-mock__progress-head strong,
.landing-app-preview .sc-dash-mock__progress-head em {
  margin-left: auto;
  font-style: normal;
  font-weight: 800;
  color: #2563eb;
}

.landing-app-preview .sc-dash-mock__progress-track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.landing-app-preview .sc-dash-mock__progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
}

.landing-app-preview .sc-dash-mock__workspace {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px 14px;
}

.landing-app-preview .sc-dash-mock__sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-app-preview .sc-dash-mock__panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.landing-app-preview .sc-dash-mock__panel-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.landing-app-preview .sc-dash-mock__db-list,
.landing-app-preview .sc-dash-mock__callback-list,
.landing-app-preview .sc-dash-mock__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-app-preview .sc-dash-mock__db {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: #334155;
}

.landing-app-preview .sc-dash-mock__db + .sc-dash-mock__db {
  margin-top: 4px;
}

.landing-app-preview .sc-dash-mock__db span {
  font-weight: 600;
}

.landing-app-preview .sc-dash-mock__db strong {
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

.landing-app-preview .sc-dash-mock__db--active {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.landing-app-preview .sc-dash-mock__db--active strong {
  color: #2563eb;
}

.landing-app-preview .sc-dash-mock__callback-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}

.landing-app-preview .sc-dash-mock__callback-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.landing-app-preview .sc-dash-mock__callback-name {
  font-weight: 700;
  color: #0f172a;
}

.landing-app-preview .sc-dash-mock__callback-time {
  font-weight: 700;
  color: #2563eb;
}

.landing-app-preview .sc-dash-mock__main {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.landing-app-preview .sc-dash-mock__main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.landing-app-preview .sc-dash-mock__main-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.landing-app-preview .sc-dash-mock__main-count {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.landing-app-preview .sc-dash-mock__contacts li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid #f1f5f9;
}

.landing-app-preview .sc-dash-mock__contacts li:last-child {
  border-bottom: none;
}

.landing-app-preview .sc-dash-mock__contact-main strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.landing-app-preview .sc-dash-mock__contact-main span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.landing-app-preview .sc-dash-mock__badge {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.landing-app-preview .sc-dash-mock__badge--green {
  background: #d1fae5;
  color: #047857;
}

.landing-app-preview .sc-dash-mock__badge--amber {
  background: #fef3c7;
  color: #b45309;
}

.landing-app-preview .sc-dash-mock__badge--purple {
  background: #ede9fe;
  color: #6d28d9;
}

.landing-app-preview .sc-dash-mock__badge--gray {
  background: #f1f5f9;
  color: #64748b;
}

.landing-app-preview .sc-dash-mock__badge--red {
  background: #fee2e2;
  color: #b91c1c;
}

.landing-app-preview .sc-dash-mock__calls {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.landing-app-preview .sc-dash-mock__call-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.landing-app-preview .sc-dash-mock__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

.landing-app-preview .sc-dash-mock__legend .sc-dash-mock__badge {
  font-size: 11px;
  min-height: 24px;
  padding: 0 8px;
}

.landing-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 28px;
  position: relative;
  z-index: 5;
}

.landing-preview-actions .btn-kakao--hero {
  flex: 7 1 0;
  width: auto;
  max-width: none;
  min-height: 52px;
  padding: 0 18px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 12px;
}

.landing-preview-actions .btn-landing-demo--light {
  flex: 3 1 0;
  width: auto;
  min-height: 52px;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid var(--landing-purple);
  background: transparent;
  color: var(--landing-purple);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-landing-demo--light {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  border: 2px solid var(--landing-purple);
  background: transparent;
  color: var(--landing-purple);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-landing-demo--light:hover {
  background: rgba(41, 38, 132, 0.06);
  border-color: #1f1c6b;
  color: #1f1c6b;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-app-preview .sc-browser-mockup {
    max-width: 100%;
  }

  .landing-app-preview .sc-dash-mock__kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-app-preview .sc-dash-mock__workspace {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .landing-app-preview .landing-browser-stage {
    perspective: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .landing-app-preview .sc-browser-mockup {
    min-width: 680px;
    max-width: none;
    transform: none;
    box-shadow:
      0 16px 40px rgba(41, 38, 132, 0.16),
      0 8px 24px rgba(15, 23, 42, 0.1);
  }

  .landing-app-preview .landing-browser-stage:hover .sc-browser-mockup {
    transform: none;
  }

  .landing-app-preview .sc-browser-mockup__chrome {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .landing-app-preview .sc-browser-mockup__chrome-title {
    display: none;
  }

  .landing-app-preview .sc-dash-mock__kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-app-preview .sc-dash-mock__kpi-value {
    font-size: 20px;
  }

  .landing-app-preview .sc-dash-mock__workspace {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 10px;
  }

  .landing-app-preview .sc-dash-mock__appbar-pill:not(.sc-dash-mock__appbar-pill--active) {
    display: none;
  }

  .landing-app-preview .sc-dash-mock__legend {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-app-preview .sc-browser-mockup {
    transform: none;
    transition: none;
  }

  .landing-app-preview .landing-browser-stage:hover .sc-browser-mockup {
    transform: none;
  }
}

.landing-app-preview__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.landing-sample-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.landing-app-preview__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--landing-text);
  text-align: right;
}

.landing-faq-accordion {
  width: 100%;
  max-width: 100%;
}

.landing-faq-item {
  margin-bottom: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.landing-faq-item summary {
  padding: 16px 44px 16px 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--landing-text);
  cursor: pointer;
  list-style: none;
  position: relative;
}

.landing-faq-item summary::-webkit-details-marker {
  display: none;
}

.landing-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 700;
  color: var(--landing-purple);
  line-height: 1;
}

.landing-faq-item[open] summary::after {
  content: "−";
}

.landing-faq-item[open] summary {
  border-bottom: 1px solid #f1f5f9;
}

.landing-faq-answer {
  margin: 0;
  padding: 14px 18px 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--landing-muted);
}

.landing-demo-dashboard {
  background: #fff;
  padding: 16px 18px 18px;
  overflow: hidden;
}

.landing-demo-stats--compact {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.landing-demo-stats--compact .landing-demo-stat {
  min-height: 58px;
  padding: 8px 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: none;
  text-align: center;
}

.landing-demo-stats--compact .stat-label {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
  font-weight: 600;
}

.landing-demo-stats--compact .stat-value {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: var(--landing-text);
}

.landing-demo-customers {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.landing-demo-customers__header {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr 0.5fr;
  gap: 8px;
  padding: 10px 14px;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.landing-demo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-demo-list__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr 0.5fr;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid #e2e8f0;
  font-size: 13px;
  line-height: 1.4;
  align-items: center;
  color: #334155;
}

.landing-demo-list__row strong {
  color: var(--landing-text);
}

.landing-demo-org {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.landing-demo-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.landing-demo-status--interested {
  background: #d1fae5;
  color: #047857;
}

.landing-demo-status--scheduled {
  background: #fef3c7;
  color: #b45309;
}

.landing-demo-status--contracted {
  background: #dbeafe;
  color: #1d4ed8;
}

.landing-footer {
  padding: 32px 0 40px;
  background: #fff;
  border-top: 1px solid #e8edf5;
}

.landing-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.landing-footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--landing-text);
}

.landing-footer__logo {
  font-size: 18px;
}

.landing-footer__copy {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

/* Scroll reveal — landing only (app shell must stay visible) */
@media (prefers-reduced-motion: no-preference) {
  .landing-page .landing-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }

  .landing-page .landing-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

#appShell .sc-reveal,
#appShell .landing-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .landing-reveal {
    opacity: 1;
    transform: none;
  }
}

@keyframes scListRevealIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  #appShell .contacts-panel.sc-list-reveal,
  #appShell .status-filter-btn.sc-list-reveal,
  #appShell .contacts-toolbar__actions button.sc-list-reveal,
  #appShell .customer-table-header.sc-list-reveal,
  #appShell .contact-block.sc-list-reveal {
    animation: scListRevealIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--list-reveal-delay, 0s);
    will-change: opacity, transform;
  }

  #appShell .contacts-panel.sc-list-reveal {
    animation-duration: 0.65s;
  }

  #appShell .status-filter-btn.sc-list-reveal {
    animation-duration: 0.45s;
  }

  #appShell .contact-block.sc-list-reveal {
    animation-duration: 0.5s;
  }
}

#appShell .sc-list-reveal-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Metric slot numbers — app KPI */
.sc-metric-num {
  display: inline-block;
  min-height: 1.1em;
  font-variant-numeric: tabular-nums;
}

.sc-metric-num__text,
.landing-metric-num__text {
  display: inline-block;
  min-width: 2.4em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.kpi-command__value.sc-metric-num .sc-metric-num__text {
  min-width: 2.8em;
}

.kpi-command__value--ratio.sc-metric-num .sc-metric-num__text {
  min-width: 3.6em;
}

.kpi-command__sub.sc-metric-num .sc-metric-num__text {
  min-width: 2.6em;
}

.command-progress-card__meta.sc-metric-num .sc-metric-num__text {
  min-width: 5.5em;
}

body.is-mobile-app .kpi-command__value--mobile-stacked .kpi-command__ratio-line.sc-metric-num .sc-metric-num__text,
body.is-mobile-app .kpi-command__value--mobile-stacked .progress-value.sc-metric-num .sc-metric-num__text,
body.is-mobile-app .kpi-command__value--mobile-stacked .kpi-command__ratio-percent.sc-metric-num .sc-metric-num__text,
body.is-mobile-app .kpi-command__value--mobile-stacked .progress-percent.sc-metric-num .sc-metric-num__text,
body.is-mobile-app .command-progress-card__meta.sc-metric-num .sc-metric-num__text,
body.is-mobile-app .command-progress-card__percent.sc-metric-num .sc-metric-num__text {
  min-width: 0;
}

.command-progress-card__percent.sc-metric-num .sc-metric-num__text {
  min-width: 2.8em;
}

.landing-metric-num[data-metric="max"] .landing-metric-num__text {
  min-width: 2.6em;
}

/* Responsive contact list safety — desktop table, tablet scroll, mobile cards */
@media (min-width: 768px) and (max-width: 1023px) {
  #appShell .customer-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #appShell .customer-table {
    min-width: 0;
  }

  #appShell .customer-table-header,
  #appShell .contact-item {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  #appShell .customer-table-wrap {
    overflow-x: visible;
  }

  #appShell .customer-table {
    min-width: 0;
  }

  #appShell .customer-table-header {
    display: none !important;
  }

  #appShell .customer-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: none;
    background: transparent;
    overflow: visible;
  }

  #appShell .contact-block {
    border: none;
    margin: 0;
  }

  #appShell .contact-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    width: 100%;
    padding: 18px 20px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  }

  #appShell .contact-item .contact-info {
    display: block;
    width: 100%;
  }

  #appShell .contact-item .contact-desktop-only {
    display: none !important;
  }

  #appShell .contact-item .contact-mobile-only,
  #appShell .contact-item .contact-mobile-row {
    display: flex !important;
    flex-direction: column;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  #appShell .contact-item .contact-mobile-row__status .status-badge,
  #appShell .contact-item .contact-mobile-row__head .status-badge {
    min-width: 0;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
  }

  #appShell .contact-item .contact-mobile-row__name {
    font-size: 19px;
  }

  #appShell .contact-item .contact-mobile-row__meta {
    font-size: clamp(13px, 3.4vw, 14px);
    font-weight: 500;
    color: #8a8f98;
  }

  #appShell .contact-item.contact-item--calling {
    border: 2px solid #2563eb !important;
    background: #eff6ff !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
  }

  #appShell .contact-item .contact-mobile-row__phone .contact-phone {
    font-size: 24px;
  }

  .contact-drawer__panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: min(88dvh, 100dvh);
    max-height: 88dvh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }

  .contact-drawer:not(.hidden) .contact-drawer__panel {
    transform: translateY(0);
  }

  .contact-drawer__footer .btn-popup-primary,
  .contact-drawer__footer .btn-popup-ghost {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
  }

  #appShell .contact-item .contact-actions,
  #appShell .contact-item .customer-actions {
    display: none !important;
  }

  #appShell .contact-item .contact-mobile-row {
    gap: 11px;
  }

  #appShell .contact-item.contact-item--drawer-row {
    cursor: default;
  }

  #appShell .contact-item .contact-mobile-action-bar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  #appShell .contact-item .btn-call--mobile-primary {
    flex: 6 1 0;
    width: auto;
  }

  #appShell .contact-item .btn-contact-detail--mobile {
    flex: 4 1 0;
  }

  #appShell .contact-item .contact-mobile-detail-row {
    border-bottom: none;
    padding: 4px 0;
  }
}

/* Desktop: spacious SaaS landing layout */
@media (min-width: 1024px) {
  .landing-page {
    --landing-pad-x: 40px;
  }

  .landing-split-card__title {
    font-size: clamp(24px, 2.4vw, 32px);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .landing-page {
    --landing-pad-x: 20px;
  }

  .landing-hero {
    padding: 48px 0 64px;
  }

  .landing-section {
    padding: 48px 0;
  }

  .landing-split-section {
    margin-top: -28px;
  }

  .landing-split-card__col {
    padding: 36px 28px;
  }

  .landing-split-card__header {
    min-height: 72px;
  }

  .landing-split-card__header--db .landing-split-card__db-head {
    margin-top: 28px;
  }

  .landing-split-card__intro {
    min-height: 68px;
  }

  .landing-split-card__title {
    font-size: clamp(20px, 2.8vw, 26px);
  }

  .landing-metrics-bar {
    gap: 6px;
    padding: 10px;
  }

  .landing-metric-num {
    font-size: 14px;
  }

  .landing-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .landing-pricing-grid .landing-plan-card:last-child {
    grid-column: 1 / -1;
    max-width: min(100%, 420px);
    margin-inline: auto;
    width: 100%;
  }

  .landing-plan-card--featured {
    transform: translateY(-4px);
  }
}

/* Mobile: 767px 이하 */
@media (max-width: 767px) {
  .landing-page {
    --landing-pad-x: 16px;
  }

  .landing-nav__inner {
    min-height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .landing-nav__links {
    gap: 2px;
  }

  .landing-nav__link {
    padding: 6px 8px;
    font-size: 13px;
  }

  .landing-logo__en {
    font-size: 18px;
  }

  .landing-hero {
    padding: 36px 0 48px;
  }

  .landing-hero__title {
    font-size: clamp(32px, 9vw, 44px);
    word-break: keep-all;
  }

  .landing-hero__tagline-en {
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  .landing-hero__tagline-kr {
    font-size: 15px;
    padding-inline: 4px;
  }

  .landing-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 28px;
    width: 100%;
    max-width: 100%;
  }

  .landing-hero__actions .btn-kakao--hero,
  .landing-hero__actions .btn-landing-demo {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  .landing-section {
    padding: 40px 0;
  }

  .landing-split-section {
    margin-top: -16px;
  }

  .landing-split-card {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .landing-split-card__divider {
    width: auto;
    height: 1px;
  }

  .landing-split-card__col {
    padding: 28px 20px;
  }

  .landing-split-card__header,
  .landing-split-card__intro {
    min-height: 0;
  }

  .landing-split-card__header--db .landing-split-card__db-head {
    margin-top: 0;
  }

  .landing-split-card__title {
    font-size: 22px;
  }

  .landing-split-card__lead,
  .landing-split-card__desc {
    font-size: 14px;
  }

  .landing-feature-list__item strong {
    font-size: 13px;
  }

  .landing-feature-list__item p {
    font-size: 12px;
  }

  .landing-feature-list__item > div,
  .landing-trust-card > div {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .landing-metrics-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .landing-metrics-bar__item span {
    font-size: 9px;
  }

  .landing-section__title {
    font-size: 24px;
  }

  .landing-section__desc {
    font-size: 14px;
  }

  .landing-pricing-grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 16px;
  }

  .landing-preview-actions {
    flex-direction: column;
  }

  .landing-preview-actions .btn-kakao--hero,
  .landing-preview-actions .btn-landing-demo--light {
    flex: 1 1 auto;
    width: 100%;
  }

  .landing-plan-card {
    padding: 24px 18px 18px;
  }

  .landing-plan-card--featured {
    transform: none;
  }

  .landing-plan-card__amount {
    font-size: 28px;
  }

  .landing-faq-item summary {
    padding: 14px 40px 14px 16px;
    font-size: 14px;
  }

  .landing-demo-stats--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-demo-customers__header,
  .landing-demo-list__row {
    grid-template-columns: 1fr 1fr;
  }

  .landing-demo-customers__header span:nth-child(3),
  .landing-demo-customers__header span:nth-child(4),
  .landing-demo-list__row span:nth-child(3),
  .landing-demo-list__row span:nth-child(4) {
    display: none;
  }

  .landing-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.btn-kakao {
  min-height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: #fee500;
  color: #191600;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-kakao:hover {
  background: #fada0a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-kakao:active {
  transform: translateY(1px);
}

.btn-kakao--full {
  width: 100%;
}

.btn-kakao--hero {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.auth-divider--subtle {
  margin: 14px 0 12px;
  font-size: 12px;
  color: var(--text-sub);
}

.auth-form .form-group {
  margin-bottom: 10px;
}

.auth-form .btn-auth-primary,
.auth-form .btn-auth-secondary {
  min-height: 42px;
  font-size: 14px;
}

.btn-kakao--compact {
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1;
}

.signup-cta-btn {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1;
}

.signup-cta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.signup-cta-row > .signup-cta-btn--kakao {
  flex: 1 1 auto;
  min-width: 0;
}

.signup-cta-row > .signup-cta-btn--email {
  flex: 0 0 auto;
  min-width: 100px;
}

.signup-cta-row > .signup-cta-btn--kakao {
  min-height: 48px;
  height: 48px;
  border-radius: 12px;
}

.signup-cta-row > .signup-cta-btn--email,
.signup-button,
.btn-demo-email,
.btn-demo-email-signup {
  min-width: 100px;
  min-height: 48px;
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}

.landing-faq div {
  margin-bottom: 14px;
}

.landing-faq dt {
  font-weight: 800;
  margin-bottom: 4px;
}

.landing-faq dd {
  margin: 0;
  color: var(--text-sub);
  font-size: 14px;
}

.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.app-entry-loading {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, var(--brand-bg), var(--brand-bg-sub));
}

.app-entry-loading.hidden {
  display: none !important;
}

.app-entry-loading__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}

.app-entry-loading__spinner {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fbbf24;
  animation: appEntrySpin 0.8s linear infinite;
}

.app-entry-loading__text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

@keyframes appEntrySpin {
  to {
    transform: rotate(360deg);
  }
}

.auth-modal-overlay.hidden {
  display: none !important;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
}

.auth-modal-card {
  position: relative;
  width: min(440px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.auth-modal-card--narrow {
  width: min(400px, 100%);
}

.auth-email-verify-card {
  text-align: center;
}

.auth-title--verify {
  font-size: 1.15rem;
  line-height: 1.45;
  margin-bottom: 16px;
}

.auth-email-verify-body {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  color: #334155;
}

.auth-email-verify-note {
  margin: 18px 0 24px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
  text-align: center;
}

.auth-modal-card--flow {
  width: min(480px, 92vw);
  padding: 28px 24px 24px;
}

.auth-view.hidden {
  display: none !important;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.auth-brand__icon {
  font-size: 22px;
  line-height: 1;
}

.auth-brand .auth-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}

.auth-lead {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--text-main);
  text-align: center;
}

.auth-lead--signup {
  margin-bottom: 6px;
}

.auth-subcopy {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-sub);
  text-align: center;
}

.btn-kakao--auth-main {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 12px;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-kakao__icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #3c1e1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FEE500' d='M12 3C6.48 3 2 6.58 2 11c0 2.84 1.87 5.35 4.68 6.86L5.5 21l3.77-2.05C10.47 19.32 11.22 19.4 12 19.4c5.52 0 10-3.58 10-8.4S17.52 3 12 3z'/%3E%3C/svg%3E") center/14px no-repeat;
  flex-shrink: 0;
}

.auth-alt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-auth-alt {
  min-height: 48px;
  height: 48px;
  min-width: 100px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text-main);
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
}

.btn-auth-alt:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.btn-auth-alt__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.btn-auth-alt__icon--email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

.btn-auth-alt__icon--google {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
}

.auth-switch {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-sub);
}

.auth-switch--center {
  margin-top: 14px;
}

.auth-switch__link {
  border: none;
  background: none;
  padding: 0;
  margin-left: 4px;
  color: #2563eb;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.auth-switch__link--muted {
  margin-left: 0;
  color: #6b7280;
  font-weight: 600;
}

.auth-kakao-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f3f4f6;
  font-size: 11px;
  line-height: 1.5;
  color: #6b7280;
  text-align: center;
}

.auth-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.auth-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 10px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  text-align: center;
}

.auth-benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

.auth-benefit strong {
  display: block;
  width: 100%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-main);
  text-align: center;
  word-break: keep-all;
}

.auth-subheader {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.auth-subheader__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
}

.auth-subheader__back,
.auth-subheader__close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text-sub);
  font-size: 16px;
  cursor: pointer;
}

.auth-subheader__close {
  justify-self: end;
}

.auth-password-field {
  position: relative;
}

.auth-password-field input {
  width: 100%;
  padding-right: 42px;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/18px no-repeat;
  cursor: pointer;
}

.auth-password-toggle.is-visible {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

.btn-auth-primary--full {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
}

.auth-subfooter {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-sub);
}

.auth-subfooter__sep {
  margin: 0 8px;
  color: #d1d5db;
}

.btn-auth-google {
  width: 100%;
  min-height: 46px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-auth-google:hover {
  background: #f9fafb;
}

.auth-provider-note {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.auth-google-benefits {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-google-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-main);
}

.auth-modal-card--flow .auth-message {
  margin: 0 0 12px;
}

.auth-modal-card--flow .auth-form .form-group label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

@media (max-width: 480px) {
  .auth-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-alt-row {
    grid-template-columns: 1fr 1fr;
  }

  .btn-auth-alt {
    font-size: 12px;
    padding: 0 6px;
  }
}

.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-sub);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

body.auth-modal-open {
  overflow: hidden;
}

.demo-mode-banner {
  position: relative;
  z-index: auto;
  background: #1e3a8a;
  color: #fff;
}

body.header-user-menu-open .demo-mode-banner {
  pointer-events: none;
}

body.header-user-menu-open .module-chinalead {
  pointer-events: none;
}

.demo-mode-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}

.demo-mode-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-demo-email {
  min-height: 48px;
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-demo-email:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.65);
}

.demo-mode-banner__text {
  font-weight: 700;
}

/* ===== 데모 체험 모달 · 자동콜 ===== */
body.demo-modal-open {
  overflow: hidden;
}

.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.demo-modal.hidden {
  display: none;
}

.demo-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 9998;
  background: rgba(17, 24, 39, 0.6);
}

.demo-modal-card {
  position: relative;
  z-index: 10001;
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
}

.demo-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-sub);
  font-size: 16px;
  cursor: pointer;
}

.demo-modal-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-primary);
}

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

.demo-signup-benefits {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-signup-benefits li {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
}

.demo-signup-benefits.hidden {
  display: none;
}

.landing-capabilities-section {
  padding-top: 12px;
  padding-bottom: 8px;
}

.landing-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.landing-capability-card {
  padding: 20px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.landing-capability-card--safe {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.landing-capability-card__icon {
  display: block;
  font-size: 28px;
  margin-bottom: 10px;
}

.landing-capability-card__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: #047857;
}

.landing-capability-card__lead {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #059669;
}

.landing-capability-card p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
}

.landing-capability-card__note {
  margin-bottom: 0 !important;
  font-size: 13px !important;
  color: #065f46 !important;
  font-weight: 600;
}

.demo-autocall-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.demo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.demo-input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  color: var(--text-primary);
  background: #fff;
}

.demo-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  margin-top: 4px;
}

.demo-privacy-note input {
  margin-top: 2px;
  accent-color: var(--primary);
}

.btn-demo-autocall-start {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.btn-demo-autocall-start:hover {
  background: var(--primary-hover);
}

.demo-autocall-experience {
  position: fixed;
  inset: 0;
  z-index: 10300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(160deg, #1e3a8a 0%, #292684 100%);
  color: #fff;
}

.demo-autocall-experience.hidden {
  display: none;
}

.demo-autocall-experience__inner {
  width: min(360px, 100%);
  text-align: center;
}

.demo-autocall-experience__badge {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
}

.demo-autocall-experience__step {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.demo-autocall-experience__bar-wrap {
  height: 8px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 24px;
}

.demo-autocall-experience__bar {
  height: 100%;
  width: 0%;
  background: #fbbf24;
  border-radius: 999px;
  transition: width 0.6s ease;
}

.demo-autocall-experience__phone {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  animation: demo-phone-pulse 1.2s ease-in-out infinite;
}

.demo-autocall-experience__sub {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.9;
  min-height: 1.4em;
  animation: demo-sub-fade 0.4s ease;
}

@keyframes demo-phone-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.92;
  }
}

@keyframes demo-sub-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}

.demo-complete-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
}

.demo-complete-features li {
  padding: 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.demo-complete-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-complete-actions.signup-cta-row {
  flex-direction: row;
  gap: 8px;
}

.demo-complete-actions.signup-cta-row .btn-kakao--hero {
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1;
  border-radius: 12px;
  background: #fee500 !important;
  color: #191919 !important;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-demo-email-signup {
  min-width: 100px;
  min-height: 48px;
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-demo-email-signup:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.btn-demo-continue-browse {
  min-height: 44px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-demo-continue-browse:hover {
  color: #334155;
  background: #f8fafc;
}

.demo-signup-prompt-footer {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

.demo-signup-prompt-footer--single {
  justify-content: center;
}

.demo-signup-prompt-footer--single .btn-demo-prompt-footer {
  flex: 0 1 auto;
  min-width: 140px;
}

.btn-demo-prompt-footer {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-demo-prompt-footer--browse {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
}

.btn-demo-prompt-footer--browse:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.btn-demo-prompt-footer--home {
  border: 1px solid #c7d2fe;
  background: #fff;
  color: #292684;
}

.btn-demo-prompt-footer--home:hover {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #1f1c6b;
  box-shadow: 0 4px 12px rgba(41, 38, 132, 0.08);
}

/* ===== Demo mobile UX (390~430px 우선) ===== */
body.is-demo {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body.is-demo .app-chrome-sticky,
body.is-demo .demo-mode-banner {
  padding-top: max(0px, env(safe-area-inset-top, 0px));
}

@media (max-width: 768px) {
  body.is-demo {
    --app-chrome-header-height: 56px;
    --app-service-nav-height: 62px;
    --app-chrome-stack-height: calc(var(--app-chrome-header-height) + var(--app-service-nav-height));
  }

  body.is-demo .mobile-header-logo-btn,
  body.is-demo .mobile-header-actions .mobile-header-icon-btn,
  body.is-demo .mobile-header-actions .sc-module-btn--mobile-db {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
  }

  body.is-demo .mobile-header__inner,
  body.is-demo .app-chrome-header__inner,
  body.is-demo .app-shell-header__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px;
    height: auto;
    padding: 12px 16px !important;
    gap: 8px;
    grid-template-columns: unset !important;
    overflow: hidden;
  }

  body.is-demo .desktop-module-tabs {
    display: none !important;
  }

  body.is-demo .mobile-header-actions,
  body.is-demo .app-chrome-header__actions,
  body.is-demo .app-shell-header__right {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px;
    margin-left: 12px;
    position: static !important;
    transform: none !important;
    justify-self: auto !important;
  }

  body.is-demo .mobile-header-icon-btn,
  body.is-demo .mobile-header-actions .header-notify__trigger,
  body.is-demo .mobile-header-actions .header-user-menu__trigger,
  body.is-demo .mobile-header-actions .sc-module-btn--mobile-db {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    justify-content: center;
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
  }

  body.is-demo #platform-dev-banner {
    display: none !important;
  }

  body.is-demo .app-service-nav__inner {
    padding-top: 0;
    padding-bottom: 8px;
  }

  body.is-demo .app-service-nav .main-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: none;
    padding-bottom: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.is-demo .app-service-nav .main-tabs--speedcall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.is-demo .app-service-nav .main-tabs::-webkit-scrollbar {
    display: none;
  }

  body.is-demo .app-service-nav .main-tab {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    height: 44px;
    padding: 0 2px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.35px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  body.is-demo .app-service-nav #tab-calendar {
    font-size: 10.5px;
    letter-spacing: -0.45px;
  }

  body.is-demo .demo-mode-banner__actions .btn-kakao--compact {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.2px;
    line-height: 1;
    min-height: 44px;
    padding: 0 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  body.is-demo .demo-mode-banner__actions .btn-demo-email {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.2px;
    line-height: 1;
    min-height: 42px;
    padding: 0 10px;
  }

  body.is-demo .app-container,
  body.is-demo .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.is-demo .workspace-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.is-demo .workspace-sidebar,
  body.is-demo .workspace-main {
    width: 100%;
    min-width: 0;
  }

  body.is-demo .sidebar-card {
    padding: 10px;
  }

  body.is-demo .contacts-panel {
    padding: 10px 10px 12px;
  }

  body.is-demo .contacts-toolbar__head {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }

  body.is-demo .contacts-toolbar__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
  }

  body.is-demo .contacts-toolbar__actions {
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
  }

  body.is-demo .contacts-toolbar__default-actions,
  body.is-demo .contacts-toolbar__bulk-actions {
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  body.is-demo .contacts-toolbar__actions .btn-list-tool,
  body.is-demo .contacts-toolbar__actions .btn-start-call {
    min-height: 38px;
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }

  body.is-demo .contacts-toolbar__filters {
    overflow: visible;
  }

  body.is-demo .contacts-toolbar__filters .status-filter-grid:not(.status-filter-grid--mobile) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    row-gap: 12px;
  }

  body.is-demo .contacts-toolbar__filters .status-filter-grid:not(.status-filter-grid--mobile) .status-filter-grid__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
  }

  body.is-demo .contacts-toolbar__filters .status-filter-grid:not(.status-filter-grid--mobile) .status-filter-grid__manage {
    flex: 0 0 auto;
    margin-left: auto;
  }

  body.is-demo .contacts-toolbar__filters .status-filter-grid--mobile .status-filter-grid__filters,
  body.is-demo .contacts-toolbar__filters .status-filter-grid--mobile .status-filter-grid__manage {
    display: contents;
  }

  body.is-demo .contacts-toolbar__filters .status-filter-grid--mobile .btn-filter,
  body.is-demo .contacts-toolbar__filters .status-filter-grid--mobile .status-filter-btn,
  body.is-demo .contacts-toolbar__filters .status-filter-grid--mobile .btn-status-filter-edit {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: initial;
    min-height: 48px;
    height: 48px;
    padding: 4px 8px;
    font-size: clamp(11px, 2.9vw, 13px);
    white-space: normal;
    overflow: visible;
  }

  body.is-demo .contacts-toolbar__filters .status-filter-grid:not(.status-filter-grid--mobile) .btn-filter,
  body.is-demo .contacts-toolbar__filters .status-filter-grid:not(.status-filter-grid--mobile) .btn-status-filter-edit {
    width: auto;
    min-width: fit-content;
    max-width: none;
    flex: 0 0 auto;
    min-height: 44px;
    height: 44px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  body.is-demo .contact-view-toggle {
    width: 100%;
  }

  body.is-demo .contact-view-btn {
    flex: 1 1 0;
    min-height: 36px;
    font-size: 13px;
  }

  body.is-demo .command-progress-card {
    padding: 12px;
  }

  body.is-demo .command-progress-card__top {
    gap: 8px;
  }

  body.is-demo .command-progress-card__meta,
  body.is-demo .command-progress-card__percent {
    font-size: 13px;
  }

  body.is-demo .today-tasks-header__lead {
    min-width: 0;
  }

  body.is-demo .today-tasks-footer__btn {
    padding: 10px 8px;
    font-size: 16px;
  }

  body.is-demo .btn-create-db--compact {
    width: 100%;
    min-height: 40px;
  }

  body.is-demo .btn-mobile-speedcall-start {
    width: 100%;
    min-height: 54px;
  }

  body.is-demo .customer-table-wrap {
    overflow: visible;
  }

  body.is-demo .contact-item {
    padding: 18px 20px;
    border-radius: 18px;
  }

  body.is-demo .contact-actions,
  body.is-demo .customer-actions {
    display: none !important;
  }

  body.is-demo .demo-mode-banner__inner {
    padding: 8px 10px;
  }

  body.is-demo .demo-mode-banner__text {
    font-size: 12px;
  }

  body.is-demo .demo-mode-banner__actions {
    width: 100%;
  }

  body.is-demo .demo-mode-banner__actions .btn-kakao--compact,
  body.is-demo .demo-mode-banner__actions .btn-demo-email {
    flex: 1 1 0;
    min-width: 100px;
    font-size: 13px;
    min-height: 44px;
    height: 44px;
    white-space: nowrap;
  }

  body.is-demo .demo-mode-banner__actions .btn-demo-email {
    flex: 0 1 auto;
  }
}

@media (max-width: 430px) {
  body.is-demo .kpi-command {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-demo .kpi-command__cell {
    padding: 10px 8px;
    min-height: 64px;
  }

  body.is-demo .kpi-command__label {
    font-size: 10px;
  }

  body.is-demo .kpi-command__value {
    font-size: 1.15rem;
  }

  body.is-demo .kpi-command__value--ratio {
    font-size: 0.95rem;
  }

  body.is-demo .main-tab {
    min-width: 72px;
    padding-inline: 8px;
    font-size: 12px;
    min-height: 40px;
  }

  body.is-demo .contacts-toolbar__actions {
    grid-template-columns: 1fr 1fr;
  }

  body.is-demo .contacts-toolbar__actions .btn-start-call {
    grid-column: 1 / -1;
  }

  body.is-demo .customer-card-header .contact-status-cell.status-column {
    min-width: 88px;
  }

  body.is-demo .demo-modal-card {
    padding: 20px 16px;
  }

  body.is-demo .demo-modal-title {
    font-size: 18px;
    padding-right: 28px;
  }

  body.is-demo .demo-modal-desc {
    font-size: 13px;
    white-space: pre-line;
  }
}

/* Telegram 연결 모달 */
.telegram-connect-card {
  color: var(--text-primary);
}

.telegram-connect-steps {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-sub);
}

.telegram-connect-steps li {
  margin-bottom: 6px;
}

.telegram-connect-steps strong {
  color: var(--text-primary);
}

.telegram-connect-code-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px;
  margin-bottom: 12px;
  border: 2px dashed #bfdbfe;
  border-radius: 12px;
  background: var(--primary-soft);
}

.telegram-connect-code-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  width: 100%;
}

.telegram-connect-code {
  flex: 1;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--primary);
}

.btn-telegram-copy {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.telegram-connect-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.45;
}

.telegram-connect-hint code {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text-primary);
}

.telegram-connect-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.telegram-connect-status--pending {
  background: #eff6ff;
  color: #1d4ed8;
}

.telegram-connect-status--info {
  background: #f0fdf4;
  color: #15803d;
}

.telegram-connect-status--error {
  background: #fef2f2;
  color: #b91c1c;
}

.telegram-connect-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-telegram-open {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-height: 48px;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 10120;
  background: rgba(17, 24, 39, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.onboarding-card {
  width: min(480px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px;
}

.onboarding-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
}

.onboarding-desc {
  margin: 0 0 16px;
  color: var(--text-sub);
  font-size: 14px;
}

.notifications-widget-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
}

.notifications-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.notify-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  color: var(--text-primary);
}

.notify-card__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.notify-card__status {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.btn-notify {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
}

.btn-notify--telegram {
  border-color: #38bdf8;
  color: #0369a1;
  background: #f0f9ff;
}

.btn-notify--kakao {
  border-color: #fde047;
  color: #854d0e;
  background: #fefce8;
}

.settings-page .settings-subnav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.settings-subnav-item {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 700;
  cursor: pointer;
}

.settings-subnav-item--active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

/* 설정 — 웹 전용 하위 탭 */
body.is-mobile-app .settings-subnav--web {
  display: none !important;
}

body:not(.is-mobile-app) .settings-subnav--web {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

body:not(.is-mobile-app) .settings-subnav--web .settings-subnav-item {
  flex: 1 1 0;
  min-height: 42px;
  text-align: center;
}

body:not(.is-mobile-app) .settings-subscription-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body:not(.is-mobile-app) .settings-page .settings-subscription-page.settings-panel {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body:not(.is-mobile-app) #view-sms .settings-sms-page.settings-section-card {
  padding: 20px;
}

.settings-panel-heading {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.settings-sms-page {
  position: relative;
  min-width: 0;
  overflow-x: hidden;
}

.settings-sms-mode-tabs-row {
  grid-area: tabs;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-sms-mode-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.settings-sms-guide-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #fff;
  color: #4338ca;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.settings-sms-guide-btn:hover {
  background: #eef2ff;
  border-color: #a5b4fc;
}

.settings-sms-mode-tab {
  min-height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.settings-sms-mode-tab--active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.settings-sms-mode-tab:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.settings-sms-stack {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  grid-template-areas:
    "tabs tabs"
    "compose sender"
    "compose preview";
  gap: 14px 16px;
  align-items: start;
  min-width: 0;
  overflow-x: hidden;
}

.settings-sms-sender-card {
  grid-area: sender;
  align-self: stretch;
  height: auto;
  margin-bottom: 0;
}

.settings-sms-compose-layout {
  grid-area: compose;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.settings-sms-preview-card {
  grid-area: preview;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 0;
}

.settings-sms-card--recipient .sms-compose-panel--flat,
.settings-sms-card--sender-display .sms-compose-panel--flat {
  grid-template-columns: 1fr;
}

.settings-sms-preview-card .sms-preview-box {
  flex: 1 1 auto;
  min-height: 180px;
}

.sms-preview-device-wrap {
  padding-top: 0;
}

.sms-preview-device {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  background: #f9fafb;
  padding: 14px;
}

.settings-sms-stack--custom-mode .sms-preview-device {
  border-radius: 28px;
  background: linear-gradient(180deg, #f3f4f6 0%, #eef2ff 100%);
  padding: 18px 16px 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.settings-sms-stack--custom-mode .sms-preview-device .sms-preview-box {
  min-height: 220px;
  border: none;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  font-size: 14px;
  line-height: 1.65;
  color: #111827;
}

.sms-preview-device-footnote {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #9ca3af;
  text-align: center;
}

.sms-custom-section-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.sms-custom-vars-block,
.sms-custom-content-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sms-custom-vars-block {
  padding-bottom: 4px;
}

.sms-custom-content-block {
  padding-top: 4px;
}

.sms-custom-body-input {
  width: 100%;
  min-height: 160px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sms-custom-body-input:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.sms-custom-prefix-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

.sms-custom-prefix-panel {
  grid-template-columns: 1fr;
}

.sms-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: -3px;
}

.sms-custom-body-byte {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
  text-align: right;
}

.sms-custom-body-byte--over {
  color: #dc2626;
}

.sms-custom-writing-tips {
  margin-top: 4px;
  padding: 14px 16px;
  border: 1px solid #ede9fe;
  border-radius: 12px;
  background: #faf5ff;
}

.sms-custom-writing-tips__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #6d28d9;
}

.sms-custom-writing-tips__list {
  margin: 0;
  padding-left: 1.15em;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: #5b21b6;
}

.sms-custom-writing-tips__list code {
  padding: 1px 5px;
  border-radius: 5px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
}

.sms-custom-variable-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sms-custom-variable-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sms-var-icon {
  font-size: 14px;
  line-height: 1;
}

.sms-custom-variable-btn:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  color: #4338ca;
}

.sms-custom-variable-btn:active {
  background: #ede9fe;
}

/* Guide drawer */
.sms-writing-guide-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.sms-writing-guide-drawer:not(.hidden) {
  pointer-events: auto;
}

.sms-writing-guide-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.sms-writing-guide-drawer:not(.hidden) .sms-writing-guide-drawer__backdrop {
  opacity: 1;
}

.sms-writing-guide-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(380px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sms-writing-guide-drawer:not(.hidden) .sms-writing-guide-drawer__panel {
  transform: translateX(0);
}

.sms-writing-guide-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 12px;
  border-bottom: 1px solid #f3f4f6;
}

.sms-writing-guide-drawer__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.sms-writing-guide-drawer__close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.sms-writing-guide-drawer__close:hover {
  background: #f3f4f6;
  color: #111827;
}

.sms-writing-guide-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sms-guide-card {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid transparent;
}

.sms-guide-card--purple {
  background: #faf5ff;
  border-color: #e9d5ff;
}

.sms-guide-card--blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.sms-guide-card--green {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.sms-guide-card__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.sms-guide-card__desc {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #4b5563;
}

.sms-guide-card__example {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1.6;
  color: #374151;
}

.sms-guide-card__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #059669;
}

.sms-guide-card--purple .sms-guide-card__list {
  color: #7c3aed;
}

.sms-guide-card--blue .sms-guide-card__list {
  color: #2563eb;
}

.sms-guide-card__list li::before {
  content: "✔ ";
  font-weight: 700;
}

body.sms-writing-guide-open {
  overflow: hidden;
}

.settings-sms-spacer {
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.settings-sms-custom-save-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 14px;
}

.settings-sms-stack.settings-sms-stack--custom-mode .settings-sms-card--custom-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 901px) {
  .settings-sms-stack.settings-sms-stack--custom-mode {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-areas:
      "tabs tabs"
      "preview compose";
  }

  .settings-sms-stack.settings-sms-stack--custom-mode .settings-sms-compose-layout {
    min-height: 100%;
  }

  .settings-sms-stack.settings-sms-stack--custom-mode .settings-sms-card--custom-body {
    min-height: 360px;
    height: 100%;
  }

  .settings-sms-stack.settings-sms-stack--custom-mode .sms-custom-body-input {
    flex: 1 1 auto;
    min-height: 180px;
  }

  .settings-sms-stack.settings-sms-stack--custom-mode .settings-sms-preview-card {
    min-height: 360px;
  }

  .settings-sms-stack.settings-sms-stack--custom-mode .settings-sms-custom-save-footer {
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
  }

  .settings-sms-stack.settings-sms-stack--custom-mode .settings-sms-custom-save-footer .settings-sms-save-btn {
    min-width: 120px;
  }
}

@media (max-width: 900px) {
  .settings-sms-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .settings-sms-mode-tabs {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
  }

  .settings-sms-mode-tab {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }

  .settings-sms-preview-card .sms-preview-box {
    min-height: 160px;
  }

  .settings-sms-stack.settings-sms-stack--custom-mode .settings-sms-custom-save-footer {
    justify-content: stretch;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
  }

  .settings-sms-stack.settings-sms-stack--custom-mode .settings-sms-custom-save-footer .settings-sms-save-btn {
    width: 100%;
    min-height: 44px;
    height: 44px;
  }
}

.sms-sender-bizcard {
  border: 1px solid #e8ecf4;
  border-radius: 12px;
  background: #fafbff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  height: auto;
}

.sms-sender-bizcard--compact {
  height: auto;
}

.sms-sender-bizcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 6px;
  border-bottom: 1px solid #eef1f8;
  background: #fff;
}

.sms-sender-bizcard__heading {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #374151;
  letter-spacing: -0.01em;
}

.btn-sms-sender-edit {
  flex: 0 0 auto;
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-sms-sender-edit:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.sms-sender-bizcard__body--compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 12px;
  padding: 12px 16px 14px;
  align-items: center;
}

.sms-sender-bizcard__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sms-sender-bizcard__name {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.sms-sender-bizcard__role {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #374151;
  word-break: break-word;
}

.sms-sender-bizcard__details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sms-sender-bizcard__detail {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.sms-sender-bizcard__detail-label {
  display: none;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.35;
  white-space: nowrap;
}

.sms-sender-bizcard__detail-value-wrap {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  text-align: right;
}

.sms-sender-bizcard__detail-row {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
  text-align: right;
}

.sms-sender-bizcard__detail-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #9ca3af;
  margin-top: 1px;
}

.sms-sender-bizcard__detail-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.sms-sender-bizcard__company {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary);
  word-break: break-word;
}

.sms-sender-bizcard__detail-value {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: #4b5563;
  min-width: 0;
  word-break: break-word;
}

.sms-sender-bizcard__detail-value.sms-sender-bizcard__company {
  font-weight: 700;
  color: var(--primary);
}

.sms-sender-bizcard__detail-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: #4b5563;
  word-break: break-word;
}

.sms-sender-bizcard__company--empty,
.sms-sender-bizcard__detail-value.sms-sender-bizcard__company--empty {
  color: #9ca3af;
  font-weight: 600;
}

.sms-sender-bizcard__detail-text--empty,
.sms-sender-bizcard__detail-value.sms-sender-bizcard__detail-text--empty {
  color: #9ca3af;
}

@media (max-width: 900px) {
  .sms-sender-bizcard__body--compact {
    gap: 8px 10px;
    padding: 12px 16px 14px;
  }
}

.popup--sms-sender-edit {
  max-width: 440px;
}

.sms-sender-edit-form .form-group {
  margin-bottom: 12px;
}

.settings-sms-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f9fafb;
  padding: 16px;
}

.settings-sms-card__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: #111827;
}

.settings-sms-card__hint {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.settings-sms-card__body + .settings-sms-card__body,
.settings-sms-card__body + .sms-body-template {
  margin-top: 10px;
}

.sms-compose-panel--flat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.sms-compose-panel--flat .sms-compose-checkbox {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  min-height: 44px;
}

.sms-compose-panel--flat .sms-compose-checkbox__sample {
  font-size: 12px;
}

.sms-settings-variable-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sms-settings-variable-btn {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sms-settings-variable-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.sms-body-template {
  width: 100%;
  min-height: 180px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}

.sms-byte-info {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
}

.sms-byte-info--lms {
  color: #d97706;
}

.settings-sms-integration {
  margin-top: 14px;
}

.settings-sms-preview-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.settings-sms-preview-card .sms-preview-note {
  margin: 0 0 8px;
}

.settings-sms-preview-card__head .settings-sms-card__title {
  margin: 0;
}

.settings-sms-save-btn {
  flex: 0 0 auto;
  min-height: 38px;
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.settings-sms-save-btn:hover {
  filter: brightness(1.05);
}

.settings-sms-mobile-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.settings-sms-mobile-send-btn {
  min-height: 40px;
}

body:not(.is-mobile-app) .settings-sms-mobile-actions .sms-send-desktop-notice {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.settings-notify-section {
  color: var(--text-primary);
}

.settings-notify-section .settings-subsection-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.settings-notify-row span {
  color: var(--text-secondary);
}

.settings-notify-row strong {
  color: var(--text-primary);
}

.settings-notify-section .cl-checkbox,
.settings-notify-section label {
  color: var(--text-primary);
}

.settings-notify-section .form-group label {
  color: var(--text-primary);
}

.settings-notify-section label:has(input:disabled) {
  color: var(--text-secondary);
}

.settings-notify-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.status-kpi-system-list {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.status-kpi-system-head {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

.status-kpi-system-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
}

.status-kpi-system-label {
  font-weight: 600;
}

.status-kpi-system-toggle-label {
  font-size: 12px;
  color: var(--text-sub);
}

@media (max-width: 767px) {
  .landing-nav__links a:not(.landing-nav__login) {
    display: none;
  }

  .demo-mode-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Spotlight Tour (화면 가이드) ── */
body.spotlight-tour-open {
  overflow: hidden;
}

.spotlight-tour {
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
}

.spotlight-tour:not(.hidden) {
  pointer-events: auto;
}

.spotlight-tour.hidden {
  display: none !important;
}

.spotlight-tour__svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.spotlight-tour__dim {
  fill: rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  cursor: pointer;
}

.spotlight-tour__ring {
  position: fixed;
  border: 3px solid #4f46e5;
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.28),
    0 0 24px rgba(79, 70, 229, 0.45);
  pointer-events: none;
  z-index: 1;
}

.spotlight-tour__card {
  position: fixed;
  z-index: 2;
  width: min(320px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.18),
    0 4px 12px rgba(15, 23, 42, 0.08);
  pointer-events: auto;
}

.spotlight-tour__card::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  transform: rotate(45deg);
  z-index: -1;
}

.spotlight-tour__card[data-placement="bottom"]::before {
  top: -7px;
  left: 28px;
  border-bottom: none;
  border-right: none;
}

.spotlight-tour__card[data-placement="top"]::before {
  bottom: -7px;
  left: 28px;
  border-top: none;
  border-left: none;
}

.spotlight-tour__card[data-placement="right"]::before {
  left: -7px;
  top: 24px;
  border-top: none;
  border-right: none;
}

.spotlight-tour__card[data-placement="left"]::before {
  right: -7px;
  top: 24px;
  border-bottom: none;
  border-left: none;
}

.spotlight-tour__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #9ca3af;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.spotlight-tour__close:hover,
.spotlight-tour__close:focus-visible {
  background: #f3f4f6;
  color: #374151;
  outline: none;
}

.spotlight-tour__title {
  margin: 0 28px 10px 0;
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
}

.spotlight-tour__body {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: #4b5563;
}

.spotlight-tour__lead {
  margin: 0 0 12px;
}

.spotlight-tour__examples {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.spotlight-tour__examples-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}

.spotlight-tour__examples ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.spotlight-tour__examples li {
  position: relative;
  padding-left: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  line-height: 1.55;
}

.spotlight-tour__examples li + li {
  margin-top: 2px;
}

.spotlight-tour__examples li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #4f46e5;
}

.spotlight-tour__examples--plain li {
  padding-left: 0;
}

.spotlight-tour__examples--plain li::before {
  content: none;
}

.spotlight-tour__note {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.55;
}