/* MemberMemoCard Styles */

.memberProfileMemo {
  position: relative;
}

.memoHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  white-space: nowrap;
  gap: 8px;
}

.memoHeaderLeft {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.memoHeader strong {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.memoViewerButton {
  background: none;
  border: none;
  color: #999;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  transition: all 0.2s;
  white-space: nowrap;
}

.memoViewerButton:hover {
  color: #666;
}

.memoNewButton {
  background: none;
  border: none;
  color: #999;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  transition: all 0.2s;
  white-space: nowrap;
}

.memoNewButton:hover {
  color: #666;
}

.memoMeta {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.memoTextarea {
  width: 100%;
  min-height: 90px;
  max-height: 150px;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px;
  resize: vertical;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}

.memoTextarea:focus {
  outline: none;
  border-color: #999;
}

.memoTextarea:disabled {
  background-color: #f9f9f9;
  cursor: not-allowed;
}

.memoTextarea::placeholder {
  color: #bbb;
}

.memoError {
  font-size: 11px;
  color: #d32f2f;
  margin-top: -4px;
  margin-bottom: 8px;
}

.memoNavigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.memoNavButton {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: #666;
  padding: 0;
}

.memoNavButton:hover:not(:disabled) {
  color: #333;
}

.memoNavButton:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.memoPageDots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.memoDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ddd;
  transition: all 0.2s;
}

.memoDot.active {
  background-color: #666;
  width: 8px;
  height: 8px;
}

.memoPageNumber {
  font-size: 12px;
  color: #666;
  min-width: 40px;
  text-align: center;
}
/* MemberMemoViewerModal Styles */

.memoViewerModalBackdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.memoViewerModal {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.memoViewerHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
}

.memoViewerTitle {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.memoViewerTitle h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.memoViewerMemberName {
  font-size: 14px;
  color: #666;
  font-weight: 400;
}

.memoViewerHeaderActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.memoViewerNewButton {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: #666;
  font-size: 13px;
  border-radius: 4px;
  transition: all 0.2s;
  white-space: nowrap;
}

.memoViewerNewButton:hover:not(:disabled) {
  background-color: #f5f5f5;
  color: #333;
}

.memoViewerNewButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.memoViewerCloseButton {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #666;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.memoViewerCloseButton:hover {
  background-color: #f5f5f5;
  color: #333;
}

.memoViewerBody {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.memoViewerMeta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.memoViewerDate {
  font-size: 13px;
  color: #666;
}

.memoViewerSource {
  font-size: 12px;
  color: #999;
  padding: 2px 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.memoViewerTextarea {
  width: 100%;
  min-height: 280px;
  max-height: 400px;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
  resize: vertical;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  transition: border-color 0.2s;
}

.memoViewerTextarea:focus {
  outline: none;
  border-color: #999;
}

.memoViewerTextarea:disabled {
  background-color: #f9f9f9;
  cursor: not-allowed;
}

.memoViewerTextarea::placeholder {
  color: #bbb;
}

.memoViewerError {
  font-size: 12px;
  color: #d32f2f;
  margin-top: 8px;
}

.memoViewerEmptyState {
  font-size: 14px;
  color: #999;
  text-align: center;
  padding: 40px 20px;
}

.memoViewerFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid #eee;
  gap: 16px;
}

.memoViewerNavButton {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
  transition: all 0.2s;
}

.memoViewerNavButton:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #ccc;
  color: #333;
}

.memoViewerNavButton:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.memoViewerPageIndicator {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 640px) {
  .memoViewerModal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px 12px 0 0;
  }

  .memoViewerHeader {
    padding: 16px 20px;
  }

  .memoViewerBody {
    padding: 20px;
  }

  .memoViewerFooter {
    padding: 12px 20px;
    flex-wrap: wrap;
  }

  .memoViewerNavButton {
    flex: 1;
    justify-content: center;
  }

  .memoViewerPageIndicator {
    width: 100%;
    text-align: center;
    order: -1;
  }
}
/* ===== 인쇄 전용 설정 ===== */
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }
  
  body {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    background: #fff !important;
  }
  
  /* 웹 UI 요소 완전 숨김 */
  .leafySidebar,
  .leafyAppLayout aside,
  .leafyMainHeader,
  .no-print,
  nav,
  .sidebar,
  .lnb,
  button,
  .btn,
  header,
  footer {
    display: none !important;
  }
  
  /* 레이아웃 전체 너비 확보 */
  .leafyAppLayout {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #fff !important;
  }
  
  .leafyMainContent {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
}

/* ===== 컨테이너 ===== */
.scheduler-print-container {
  width: 100%;
  max-width: 277mm;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 8pt;
  margin: 0 auto;
  background: white;
  padding: 5mm;
}

/* ===== 페이지 1: 메인 스케줄 우선 ===== */
.print-page-1 {
  page-break-after: auto;
  page-break-inside: avoid;
}

/* ===== 페이지 2: OT/상담 상세 정보 ===== */
.print-page-2 {
  page-break-before: always;
  padding-top: 5mm;
}

.print-ot-section {
  width: 100%;
}

.ot-section-title {
  font-size: 14pt;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5mm;
  color: #000;
  border-bottom: 2px solid #000;
  padding-bottom: 3mm;
}

.print-ot-table-wrapper {
  width: 100%;
}

/* ===== 페이지 1 레이아웃 ===== */

/* Row 1: 타이틀 + 날짜 (완벽한 정중앙) */
.print-header-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3mm;
}

.print-title-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3mm;
}

.print-title-center h1 {
  font-size: 15pt;
  font-weight: bold;
  margin: 0;
  letter-spacing: 1px;
  line-height: 1.2;
  color: #000;
  white-space: nowrap;
}

.print-title-center .date-box {
  border: 2px solid #000;
  padding: 2mm 5mm;
  font-size: 10pt;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
}

/* Row 2A: OT 요약 + 통계표 (OT 3개 이하일 때) */
.print-info-row-compact {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8mm;
  margin-bottom: 4mm;
}

.print-ot-compact {
  flex: 1 1 auto;
  min-width: 0;
}

/* Row 2B: 통계표만 (OT 4개 이상일 때) */
.print-stats-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4mm;
}

.print-stats-wrapper {
  flex: 0 0 auto;
}

.print-summary-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}

.print-summary-table th,
.print-summary-table td {
  border: 1px solid #000;
  padding: 3px 4px;
  font-size: 7pt;
  text-align: center;
  vertical-align: middle;
}

.print-summary-table th {
  background-color: #e0e0e0;
  font-weight: bold;
}

.print-summary-table .summary-type {
  font-weight: bold;
  font-size: 8pt;
}

.print-summary-table .summary-type.ot {
  background-color: #FFE600;
  color: #000;
}

.print-summary-table .summary-type.consultation {
  background-color: #3B82F6;
  color: #fff;
}

.print-summary-table .summary-features {
  text-align: left;
  font-size: 6pt;
  line-height: 1.4;
  padding: 2px 3px;
}

/* 특징 압축 포맷 */
.feature-compact {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.feature-line {
  font-size: 6pt;
  line-height: 1.3;
  word-break: keep-all;
}

.feature-label {
  font-weight: bold;
  color: #000;
}

.print-summary-table .no-data {
  color: #999;
  font-style: italic;
}

/* OT 항목 각 행은 페이지 분리 방지 */
.print-summary-table tbody tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

/* OT 테이블 헤더는 각 페이지마다 반복 */
.print-summary-table thead {
  display: table-header-group;
}

.print-summary-table tbody {
  display: table-row-group;
}

/* 통계 테이블 */
.print-stats-table {
  border-collapse: collapse;
  border: 1px solid #000;
}

.print-stats-table th,
.print-stats-table td {
  border: 1px solid #000;
  padding: 3px 7px;
  font-size: 8pt;
  text-align: center;
  color: #000;
}

.print-stats-table th {
  background-color: #e0e0e0;
  font-weight: bold;
  min-width: 55px;
}

.print-stats-table td {
  background-color: #fff;
  font-weight: bold;
  min-width: 35px;
}

/* ===== 메인 스케줄 테이블 (트레이너 x 시간) ===== */
.print-schedule-table-wrap {
  width: 100%;
  overflow: visible;
  page-break-inside: avoid;
}

.print-schedule-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 2px solid #000;
}

.print-schedule-table th,
.print-schedule-table td {
  border: 1px solid #000;
  padding: 1px 2px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  word-break: break-word;
}

/* 시간 헤더 (가로축) */
.print-time-header {
  background-color: #e0e0e0;
  font-weight: bold;
  font-size: 7pt;
  height: 18px;
}

.print-time-header th {
  background-color: #e0e0e0;
  font-weight: bold;
  border: 1px solid #000;
  padding: 1px;
}

.print-time-header .trainer-header {
  width: 70px;
}

/* 트레이너 이름 셀 (세로축) */
.print-trainer-cell {
  font-weight: bold;
  background-color: #f5f5f5;
  font-size: 7pt;
  width: 70px;
  border: 1px solid #000;
}

/* 예약 셀 */
.print-reservation-td {
  background-color: #fff;
  padding: 1px;
  height: 26px;
}

.print-reservation-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 100%;
  padding: 1px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 회원 유형 표시 (OT, 상담) */
.print-member-prefix {
  font-size: 6pt;
  font-weight: bold;
  padding: 1px 3px;
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1;
}

.print-member-prefix.ot {
  background-color: #FFE600;
  color: #000;
}

.print-member-prefix.consultation {
  background-color: #3B82F6;
  color: #fff;
}

/* 회원 이름 */
.print-member-name {
  font-size: 6.5pt;
  font-weight: 600;
  color: #000;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 100%;
  line-height: 1.2;
  text-align: center;
}

/* 잔여 횟수 표시 */
.print-remaining-count {
  font-size: 7pt;
  font-weight: bold;
  line-height: 1;
}

/* 4~7회: 주황색 표시 */
.print-remaining-count.warning {
  color: #FF9800;
}

/* 3회 이하: 빨간색 강조 */
.print-remaining-count.critical {
  background-color: #F44336;
  color: #fff;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 6pt;
}

/* 빈 셀 */
.print-empty-cell {
  background-color: #fff;
  height: 26px;
  border: 1px solid #000;
}

/* 근무 시간 외 */
.print-unavailable-cell {
  background-color: #e8e8e8;
  height: 26px;
  border: 1px solid #000;
}

/* ===== 인쇄 시 추가 최적화 ===== */
@media print {
  .scheduler-print-container {
    padding: 4mm;
    font-size: 6.5pt;
    background: #fff !important;
  }
  
  /* 페이지 1: 메인 스케줄 우선 */
  .print-page-1 {
    page-break-after: auto;
    page-break-inside: avoid;
  }

  /* 페이지 2: OT 상세 정보 (항상 새 페이지) */
  .print-page-2 {
    page-break-before: always;
  }

  .print-header-row {
    margin-bottom: 3mm;
  }

  .print-info-row-compact {
    margin-bottom: 3mm;
    gap: 6mm;
  }

  .print-stats-row {
    margin-bottom: 3mm;
  }

  .print-title-center h1 {
    font-size: 14pt;
  }

  .print-title-center .date-box {
    font-size: 9pt;
    padding: 2mm 4mm;
  }
  
  .print-schedule-table {
    font-size: 6.5pt;
    table-layout: fixed !important;
  }
  
  .print-schedule-table th,
  .print-schedule-table td {
    padding: 1px;
    word-break: break-word !important;
  }
  
  /* 트레이너 이름 가독성 개선 */
  .print-trainer-cell {
    color: #000 !important;
    font-weight: bold !important;
    width: 65px !important;
    font-size: 6.5pt !important;
  }
  
  .print-time-header {
    font-size: 6.5pt !important;
  }

  .print-time-header .trainer-header {
    width: 65px !important;
  }
  
  .print-member-name {
    font-size: 5.5pt;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  
  .print-member-prefix {
    font-size: 5pt;
  }
  
  .print-remaining-count {
    font-size: 6pt;
  }
  
  .print-remaining-count.critical {
    font-size: 5pt;
  }

  .print-reservation-td,
  .print-empty-cell,
  .print-unavailable-cell {
    height: 24px !important;
  }
  
  .print-summary-table th,
  .print-summary-table td {
    font-size: 6.5pt;
    padding: 2px 3px;
    color: #000 !important;
  }
  
  .print-summary-table .summary-features {
    font-size: 5.5pt;
    color: #000 !important;
  }

  .feature-line {
    font-size: 5.5pt;
    line-height: 1.2;
  }
  
  .print-stats-table th,
  .print-stats-table td {
    font-size: 7.5pt;
    padding: 2px 5px;
    color: #000 !important;
    background-color: #fff !important;
  }

  .print-stats-table th {
    background-color: #e0e0e0 !important;
  }
  
  /* 페이지 나누기 제어 */
  .print-schedule-table-wrap {
    page-break-before: auto;
    page-break-inside: avoid; /* 메인 스케줄표는 분리 안 됨 */
  }
  
  .print-schedule-table tr {
    page-break-inside: avoid;
  }
  
  /* OT 요약 테이블 (페이지 2) */
  .print-summary-table {
    page-break-after: auto;
  }
  
  .print-summary-table tbody tr {
    page-break-inside: avoid; /* 각 OT 행은 분리 안 됨 */
  }

  .ot-section-title {
    font-size: 13pt;
    margin-bottom: 4mm;
    padding-bottom: 2mm;
  }
  
  /* 페이지 1 요소들은 함께 유지 */
  .print-header-row,
  .print-stats-row {
    page-break-inside: avoid;
    page-break-after: avoid;
  }
}
:root {
  /* Layout Size Details */
  --leafy-sidebar-width: 260px;
  --leafy-border-radius-large: 24px;  /* Main dashboard panels */
  --leafy-border-radius-medium: 16px; /* Sub cards & buttons */
  --leafy-border-radius-small: 8px;   /* Input fields */

  /* [1] RESERVED / UNAVAILABLE SLOT (Already Has a Class - Floating Card Style) */
  --leafy-sched-booked-bg: #FFFFFF;          /* Clean white floating card */
  --leafy-sched-booked-text: #1A202C;        /* Sharp near-black text for class info */
  --leafy-sched-booked-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);

  /* [2] AVAILABLE SLOT (Empty Time - Toned Down / Grid Style) */
  --leafy-sched-empty-bg: #F4F6F9;           /* Soft warm grey for empty slots */
  --leafy-sched-empty-border: #E2E8F0;       /* Subtle border dividing empty times */
  --leafy-sched-empty-hover: #E8ECF0;        /* Slightly darker when hovered to show it's clickable */

  /* [3] NOW ACTIVE CLASS (The Single Highlighted Current Class) */
  --leafy-sched-active-bg: #323A4B;          /* Dark premium base for current active class */
  --leafy-sched-active-text: #FFFFFF;
  --leafy-sched-active-accent: #FFFB00;      /* Neon lime edge highlight */

  /* Color Palette */
  --leafy-bg-main: #646C7F;           /* Deep elegant blue-grey background */
  --leafy-sidebar-bg: #F4F6F9;        /* Soft white/grey for sidebar */
  --leafy-panel-white: #FFFFFF;       /* Clean high-contrast white panel */
  
  /* Text Colors */
  --leafy-text-dark: #1A202C;         /* Premium near-black for readability */
  --leafy-text-muted: #8A94A6;        /* Muted grey for descriptions/labels */
  --leafy-text-sidebar: #4A5568;      /* Unselected menu text */

  /* Neon Accent (Strictly for Highlights) */
  --leafy-accent-neon: #FFFB00;       /* Fluorescent yellow/lime */
  --leafy-accent-neon-text: #000000;  
  
  /* Active Menu - Changed to Dark & High Contrast for Eye Comfort */
  --leafy-sidebar-active-bg: #323A4B;        /* Comfortable dark slate for active menu */
  --leafy-sidebar-active-text: #FFFFFF;      /* Sharp, clear white text */
  
  /* Neon Accent - Strictly limited to micro-interactions / points */
  --leafy-accent-neon-point: #FFFB00;        /* Use only for small dots or line indicators */
  
  /* Soft Shadows for Floating Effect */
  --leafy-shadow-premium: 0 12px 30px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);

  /* Legacy Compatibility Mapping */
  --leafy-bg-color: var(--leafy-bg-main);
  --leafy-panel-bg: var(--leafy-panel-white);
  --leafy-text-main: #FFFFFF;
  --leafy-text-on-white: var(--leafy-text-dark);
  --leafy-accent-neon-lime: var(--leafy-accent-neon);
  --leafy-accent-neon-text: var(--leafy-accent-neon-text);
  --leafy-sub-accent-purple: #7A4F9A;
  --leafy-sub-accent-orange-red: #F44336;
  --leafy-font-family: 'Montserrat', 'Pretendard', 'Helvetica Neue', sans-serif;

  font-family: var(--leafy-font-family);
  color: var(--leafy-text-main);
  background: var(--leafy-bg-color);
  letter-spacing: -0.01em;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--leafy-bg-color);
  color: var(--leafy-text-main);
  font-family: var(--leafy-font-family);
}

button,
input,
textarea {
  font: inherit;
  letter-spacing: -0.02em;
}

button {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  background: #333D4F;
  color: #FFFFFF;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

button:hover:not(:disabled) {
  opacity: 0.86;
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

input,
textarea {
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: #FFFFFF;
  color: #1A1A1A;
  outline: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.18s ease;
}

input {
  height: 56px;
  padding: 0 18px;
}

textarea {
  resize: vertical;
  padding: 18px;
}

input:focus,
textarea:focus {
  box-shadow: 0 0 0 1px rgba(44, 62, 45, 0.16), 0 4px 20px rgba(0, 0, 0, 0.03);
}

label {
  display: grid;
  gap: 10px;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 700;
}

.page {
  min-height: 100vh;
  padding: 18px 24px 32px;
  background: var(--leafy-bg-color);
  color: var(--leafy-text-main);
}

.adminHeader,
.topNav,
.searchPanel,
.dashboardGrid,
.scheduleSection,
.passSection,
.searchResultCard,
.comingSoonCard {
  width: min(1180px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.adminHeader {
  display: flex;
  justify-content: space-between;
  gap: 36px;
  align-items: flex-end;
  margin-bottom: 34px;
  color: var(--leafy-text-main);
}

.badge,
.aiBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #333D4F;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.adminHeader h1 {
  margin: 22px 0 12px;
  color: var(--leafy-text-main);
  font-size: clamp(42px, 7vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  font-weight: 800;
}

.adminHeader p {
  color: rgba(255, 255, 255, 0.72);
}

.profileBox span,
.cardHeader span,
.scheduleToolbar p,
.passToolbar p,
.modalHeader p,
.passEditorHeader p,
.summaryCard p,
.aiAssistantCard p,
.aiTaskItem span,
.contactEmpty,
.emptyState,
.passMeta,
.memberInfo p,
.memberMemo,
.moveGuideBox {
  color: rgba(100, 108, 127, 0.7);
}

.profileBox,
.card,
.summaryCard,
.wideCard,
.aiAssistantCard,
.scheduleToolbar,
.scheduleTableWrap,
.passToolbar,
.passCard,
.passEditorPanel,
.passEditorEmpty,
.reservationModal,
.memberItem,
.aiTaskItem,
.aiMessageBox,
.contactEmpty,
.emptyState,
.selectedMemberBox,
.moveGuideBox {
  border: 0;
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.profileBox {
  display: grid;
  gap: 6px;
  min-width: 210px;
  padding: 24px;
}

.profileBox strong {
  font-size: 20px;
}

.topNav {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px;
  overflow-x: auto;
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.topNav button,
.lessonTabs button,
.closeButton,
.copyLikeButton,
.reservationResults button,
.passCard,
.scheduleCell {
  box-shadow: none;
}

.topNav button,
.lessonTabs button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  color: rgba(26, 26, 26, 0.62);
  font-size: 14px;
}

.topNav button.active,
.lessonTabs button.active {
  background: var(--leafy-accent-neon-lime);
  color: var(--leafy-accent-neon-text);
  font-weight: 800;
}

.searchPanel {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  color: #333D4F;
}

.searchPanel svg {
  position: absolute;
  left: 20px;
  z-index: 1;
}

.searchPanel input {
  height: 48px;
  padding-left: 56px;
}

.card {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 40px;
}

.memberListCard,
.searchResultCard,
.comingSoonCard {
  margin-top: 16px;
}

.searchResultCard,
.comingSoonCard {
  width: min(1180px, 100%);
  margin-bottom: 36px;
}

.dashboardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.aiAssistantCard,
.wideCard {
  grid-column: 1 / -1;
}

.aiAssistantCard,
.summaryCard,
.wideCard {
  padding: 40px;
}

.aiAssistantTop,
.scheduleToolbar,
.passToolbar,
.modalHeader,
.passEditorHeader,
.cardHeader,
.memberTop {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.aiAssistantCard h2,
.scheduleToolbar h2,
.passToolbar h2,
.modalHeader h2,
.passEditorHeader h2,
.cardHeader h2 {
  margin: 0 0 8px;
  color: #1A1A1A;
  letter-spacing: -0.04em;
}

.aiAssistantCard h2 {
  margin-top: 18px;
  font-size: 34px;
}

.aiTaskGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0 22px;
}

.aiTaskItem {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
}

.aiTaskItem svg,
.aiMessageTitle svg,
.memberInfo svg,
.memberMemo svg {
  color: #333D4F;
}

.aiTaskItem strong,
.aiMessageTitle,
.memberTop strong {
  color: #1A1A1A;
  font-weight: 800;
}

.aiMessageBox,
.contactEmpty,
.emptyState,
.selectedMemberBox,
.moveGuideBox {
  padding: 24px;
}

.aiMessageTitle,
.memberInfo p,
.memberMemo {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.copyLikeButton {
  width: auto;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 16px;
  background: rgba(100, 108, 127, 0.12);
  color: #333D4F;
}

.summaryCard {
  min-height: 210px;
}

.summaryCard span,
.passCard span,
.reservationTime {
  color: #333D4F;
  font-size: 13px;
  font-weight: 800;
}

.summaryCard strong {
  display: block;
  margin: 18px 0 14px;
  color: var(--leafy-sub-accent-purple);
  font-size: 46px;
  letter-spacing: -0.05em;
  font-weight: 800;
}

.iconBox {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(100, 108, 127, 0.12);
  color: #333D4F;
}

.form,
.memberList,
.passMeta {
  display: grid;
  gap: 18px;
}

.reservationResults {
  display: grid;
  gap: 8px;
}

.inputWithIcon,
.textareaWithIcon {
  position: relative;
  color: #333D4F;
}

.inputWithIcon svg,
.textareaWithIcon svg {
  position: absolute;
  right: 16px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.inputWithIcon input,
.textareaWithIcon textarea {
  padding-left: 16px;
  padding-right: 48px;
}

.message {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  font-weight: 800;
  word-break: break-all;
  white-space: normal;
}

.message.success {
  background: rgba(100, 108, 127, 0.12);
  color: #333D4F;
}

.message.error {
  background: #fff0ee;
  color: #9f2f24;
}

.passToolbar {
  margin-bottom: 28px;
  padding: 32px;
}

/* Schedule Section - Full Height Layout */
.scheduleSection {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.scheduleCompactBar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.scheduleCompactLeft,
.scheduleCompactRight {
  display: flex;
  gap: 8px;
  align-items: center;
}

.scheduleCompactRight {
  justify-content: flex-end;
}

.scheduleCompactLeft button,
.scheduleCompactRight button {
  min-height: 38px;
  border-radius: 12px;
  padding: 0 12px;
}

.scheduleCompactLeft button {
  background: #F6F3EE;
  color: rgba(26, 26, 26, 0.66);
}

.scheduleCompactLeft button.active {
  background: var(--leafy-accent-neon-lime);
  color: var(--leafy-accent-neon-text);
  font-weight: 800;
}

.scheduleCompactRight button.schedulePageBtn {
  width: 38px;
  min-width: 38px;
  padding: 0;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scheduleCompactRight select {
  width: 72px;
  height: 38px;
  border-radius: 12px;
  padding: 0 8px;
}

.scheduleCompactRight span {
  min-width: 72px;
  color: rgba(26, 26, 26, 0.58);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.scheduleDateInput {
  width: 168px;
  height: 42px;
  border-radius: 14px;
  text-align: center;
  font-weight: 900;
}

.scheduleDateCenter {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.scheduleDateArrow {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  font-size: 26px;
  line-height: 1;
}

.scheduleTypeBadge {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(100, 108, 127, 0.15);
  color: #333D4F;
  font-size: 13px;
  font-weight: 900;
}

.lessonTabs {
  display: flex;
  gap: 10px;
  width: fit-content;
  margin-bottom: 16px;
  padding: 6px;
  border-radius: 8px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.memberSearchTabs {
  display: flex !important;
  width: 100% !important;
  margin-bottom: 24px;
}

.scheduleTableWrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.scheduleTable {
  display: grid;
  grid-template-columns: 78px repeat(8, minmax(140px, 1fr));
  width: 100%;
  min-width: fit-content;
}

.scheduleNotice {
  display: inline-flex;
  margin-top: 10px;
  color: #8a6b2f;
  font-size: 13px;
  font-weight: 800;
}

.scheduleHeader,
.timeCell {
  min-height: 58px;
  border-right: 1px solid rgba(26, 26, 26, 0.04);
  background: #FFFFFF;
}

.scheduleHeader {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  min-height: 48px;
  color: #1A1A1A;
  font-weight: 800;
  border-bottom: 1px solid rgba(26, 26, 26, 0.2);
}

.timeCell {
  border-bottom: 2px solid #E2E8F0;
}

.timeHeader,
.timeCell {
  position: sticky;
  left: 0;
  z-index: 11;
}

.timeCell {
  z-index: 9;
  display: grid;
  place-items: center;
  color: rgba(26, 26, 26, 0.62);
  font-weight: 800;
}

.scheduleCell {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-content: stretch;
  gap: 0;
  padding: 0;
  border-radius: 0;
  color: rgba(26, 26, 26, 0.62);
  text-align: left;
  border-right: 1px solid var(--leafy-sched-empty-border);
  border-bottom: 2px solid #E5EAF0;
}

.scheduleCell::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed #F0F2F5;
  pointer-events: none;
}

.scheduleCell::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  height: 50%;
  background: transparent;
  transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.scheduleCell.available {
  background: var(--leafy-sched-empty-bg);
  cursor: pointer;
}

.scheduleCell.available.hoverTop::before {
  top: 0;
  background: var(--leafy-sched-empty-hover);
}

.scheduleCell.available.hoverBottom::before {
  bottom: 0;
  background: var(--leafy-sched-empty-hover);
}

.scheduleCell.dragOverTop::before {
  top: 0;
  background: var(--leafy-sched-empty-hover);
  border-top: 2px solid var(--leafy-sched-active-accent);
}

.scheduleCell.dragOverBottom::before {
  bottom: 0;
  background: var(--leafy-sched-empty-hover);
  border-bottom: 2px solid var(--leafy-sched-active-accent);
}

.scheduleCell.unavailable {
  background: #E8ECF0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(26, 26, 26, 0.02) 10px, rgba(26, 26, 26, 0.02) 20px);
  cursor: not-allowed;
  border-right: 1px solid var(--leafy-sched-empty-border);
  border-bottom: 2px solid #E5EAF0;
}

.scheduleCell span {
  color: #333D4F;
  font-size: 12px;
  font-weight: 800;
}

.reservationTime {
  font-size: 10px;
  line-height: 1;
}

.scheduleHalfSlot {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 1px;
  height: 29px;
  min-height: 0;
  overflow: visible;
  padding: 3px 6px;
}

.scheduleHalfSlot:empty {
  z-index: 1;
}

.reservationBlock {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 2px;
  z-index: 3;
  display: grid;
  align-content: center;
  gap: 3px;
  overflow: hidden;
  border: none;
  border-radius: 12px;
  background: var(--leafy-sched-booked-bg);
  padding: 6px 8px;
  box-shadow: var(--leafy-sched-booked-shadow);
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease;
}

.reservationBlock:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.bottomReserved .reservationBlock {
  top: 0;
}

.reservationBlock.memo {
  border: none;
  background: var(--leafy-sched-booked-bg);
  box-shadow: var(--leafy-sched-booked-shadow);
  border-left: 3px solid #CD7E47;
}

.reservationBlock.memo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.reservationBlock.attended {
  border: none;
  background: #ECFDF5;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08);
  border-left: 3px solid #10B981;
}

.reservationBlock.attended span,
.reservationBlock.attended strong,
.reservationBlock.attended small,
.reservationBlock.attended .reservationTime,
.reservationBlock.attended .reservationMemberInfo span,
.reservationBlock.attended .reservationMemberInfo small {
  color: #065F46 !important;
}

.reservationBlock.attended .remainingGaugeFill {
  background: #10B981 !important;
}

.reservationBlock.attended .remainingGaugeText {
  color: #065F46 !important;
}

.reservationBlock.attended:hover {
  transform: translateY(-2px);
  background: #D1FAE5;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
}

.reservationBlock.absent {
  border: none;
  background: #FEF2F2;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.08);
  border-left: 3px solid #F87171;
}

.reservationBlock.absent span,
.reservationBlock.absent strong,
.reservationBlock.absent small,
.reservationBlock.absent .reservationTime,
.reservationBlock.absent .reservationMemberInfo span,
.reservationBlock.absent .reservationMemberInfo small {
  color: #991B1B !important;
}

.reservationBlock.absent .remainingGaugeFill {
  background: #F87171 !important;
}

.reservationBlock.absent .remainingGaugeText {
  color: #991B1B !important;
}

.reservationBlock.absent:hover {
  transform: translateY(-2px);
  background: #FEE2E2;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.12);
}

.reservationBlock.now-active {
  background: var(--leafy-sched-active-bg) !important;
  color: var(--leafy-sched-active-text) !important;
  border: none !important;
  border-left: 4px solid var(--leafy-sched-active-accent) !important;
  box-shadow: 0 8px 20px rgba(50, 58, 75, 0.25) !important;
}

.reservationBlock.now-active span,
.reservationBlock.now-active strong,
.reservationBlock.now-active small,
.reservationBlock.now-active .reservationTime,
.reservationBlock.now-active .reservationMemberInfo span,
.reservationBlock.now-active .reservationMemberInfo small,
.reservationBlock.now-active .remainingGaugeText {
  color: var(--leafy-sched-active-text) !important;
}

.reservationBlock.now-active .remainingGaugeTrack {
  background: rgba(255, 255, 255, 0.2) !important;
}

.reservationBlock.now-active .remainingGaugeFill {
  background: var(--leafy-sched-active-accent) !important;
}

.reservationBlock.now-active:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(50, 58, 75, 0.35) !important;
}

.scheduleHalfSlot.bottomReserved {
  border-top: 1px dashed rgba(26, 26, 26, 0.1);
}

.scheduleCell small,
.scheduleCell.reserved small {
  color: rgba(26, 26, 26, 0.52);
  font-size: 9px;
  font-weight: 700;
}

.reservationMemberInfo {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reservationMemberInfo span,
.reservationMemberInfo small {
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reservationMemberInfo span {
  color: #333D4F;
  font-size: 11px;
  font-weight: 900;
}

.reservationMemberInfo small {
  color: rgba(26, 26, 26, 0.52);
  font-size: 9px;
  font-weight: 700;
}

.reservationGaugeLine {
  display: grid;
  justify-items: center;
}

.remainingGauge {
  display: grid;
  gap: 0;
  width: 52px;
  min-width: 52px;
}

.remainingGaugeText {
  color: var(--leafy-sched-booked-text);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.remainingGaugeTrack {
  overflow: hidden;
  height: 3px;
  border-radius: 999px;
  background: rgba(100, 108, 127, 0.18);
}

.remainingGaugeFill {
  height: 100%;
  border-radius: inherit;
  background: #4F7D55;
}

.remainingGauge.low .remainingGaugeText {
  color: var(--leafy-sub-accent-orange-red);
}

.remainingGauge.low .remainingGaugeTrack {
  background: rgba(255, 107, 107, 0.18);
}

.remainingGauge.low .remainingGaugeFill {
  background: var(--leafy-sub-accent-orange-red);
}

.scheduleCell.reserved {
  background: var(--leafy-sched-empty-bg);
}

.scheduleCell.memoReserved {
  background: var(--leafy-sched-empty-bg);
}

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

.reservationTypeTabs button {
  min-height: 42px;
  border-radius: 12px;
  background: #F6F3EE;
  color: rgba(26, 26, 26, 0.66);
}

.reservationTypeTabs button.active {
  background: var(--leafy-accent-neon-lime);
  color: var(--leafy-accent-neon-text);
  font-weight: 800;
}

.fieldHelperText {
  color: rgba(26, 26, 26, 0.56);
  font-size: 12px;
  font-weight: 800;
}

.reservationHelperBox {
  padding: 12px;
  border-radius: 12px;
  background: rgba(205, 126, 71, 0.12);
  color: #8a4d22;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.reservationHelperBox.compact {
  padding: 10px 12px;
}

.reservationTimeGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reservationTimeGrid label {
  display: grid;
  gap: 7px;
}

.reservationTimeGrid span {
  color: rgba(26, 26, 26, 0.62);
  font-size: 12px;
  font-weight: 800;
}

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

.scheduleCell.reserved::after {
  border-top-color: var(--leafy-sched-empty-border);
}

.passGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.passCard {
  display: grid;
  gap: 16px;
  min-height: 230px;
  padding: 28px;
  color: #1A1A1A;
  text-align: left;
}

.passCard strong {
  font-size: 24px;
  letter-spacing: -0.04em;
}

.passPrice {
  color: #333D4F;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.passEditorPanel {
  width: 100%;
  min-height: 660px;
  padding: 44px;
}

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

.modalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(26, 26, 26, 0.22);
  backdrop-filter: blur(10px);
}

.reservationModal {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 24px;
}

.reservationModal label {
  gap: 6px;
}

.reservationModal input,
.reservationModal select {
  height: 42px;
  border-radius: 12px;
  padding: 0 14px;
}

.reservationModal textarea {
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 12px;
}

.reservationModal .inputWithIcon input {
  padding-left: 16px;
  padding-right: 48px;
}

.reservationModal .selectedMemberBox {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
}

.closeButton {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  background: rgba(100, 108, 127, 0.12);
  color: #333D4F;
}

.reservationResults button {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  background: #FFFFFF;
  color: #1A1A1A;
}

.reservationResults button.selected {
  background: rgba(100, 108, 127, 0.12);
}

.dangerButton {
  background: #9f2f24;
}

.memberItem {
  padding: 24px;
}

.memberTop span {
  color: rgba(26, 26, 26, 0.52);
  font-size: 13px;
  font-weight: 700;
}

.memberMemo {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: #F9F8F6;
}

@media (max-width: 860px) {
  .page {
    padding: 36px 18px;
  }

  .adminHeader,
  .aiAssistantTop,
  .scheduleToolbar,
  .passToolbar,
  .modalHeader,
  .passEditorHeader,
  .cardHeader,
  .memberTop {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboardGrid,
  .aiTaskGrid,
  .passGrid,
  .passFormGrid {
    grid-template-columns: 1fr;
  }

  .card,
  .aiAssistantCard,
  .summaryCard,
  .wideCard,
  .passEditorPanel,
  .reservationModal {
    padding: 28px;
  }
}

.passEditorSections {
  display: grid;
  gap: 28px;
}

.passFormSection {
  display: grid;
  gap: 24px;
  padding: 28px;
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.passFormSectionHeader {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.passFormSectionHeader strong {
  color: #1A1A1A;
  font-size: 22px;
  letter-spacing: -0.04em;
}

.passFormSectionHeader span {
  color: rgba(26, 26, 26, 0.52);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 860px) {
  .passFormSectionHeader {
    align-items: flex-start;
    flex-direction: column;
  }
}

.adminHeader,
.topNav,
.searchPanel,
.dashboardGrid,
.scheduleSection,
.passSection,
.searchResultCard,
.comingSoonCard {
  width: 100%;
}

.page {
  padding-left: 18px;
  padding-right: 18px;
}

.card {
  width: min(960px, 100%);
}

@media (min-width: 1400px) {
  .page {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.subNav {
  display: flex;
  gap: 10px;
  width: 100%;
  margin: -14px auto 30px;
  padding: 8px;
  overflow-x: auto;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.subNav button {
  min-height: 40px;
  padding: 0 16px;
  background: transparent;
  color: rgba(26, 26, 26, 0.58);
  font-size: 14px;
  box-shadow: none;
}

.subNav button.active {
  background: var(--leafy-accent-neon-lime);
  color: var(--leafy-accent-neon-text);
  font-weight: 800;
}

.navItem {
  position: relative;
  flex: 0 0 auto;
}

.navItem > button {
  width: 100%;
}

.dropdownMenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  min-width: 180px;
  padding: 8px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.navItem:hover .dropdownMenu,
.navItem:focus-within .dropdownMenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdownMenu button {
  justify-content: flex-start;
  min-height: 42px;
  padding: 0 14px;
  background: transparent;
  color: #1A1A1A;
  font-size: 14px;
  box-shadow: none;
}

.dropdownMenu button:hover {
  background: rgba(100, 108, 127, 0.12);
  color: #333D4F;
  opacity: 1;
  transform: none;
}

.subNav {
  display: none;
}

.topNav {
  overflow: visible;
  position: relative;
  z-index: 40;
}

.dropdownMenu {
  z-index: 100;
}

.dropdownMenu {
  top: 100%;
  padding-top: 12px;
  background: transparent;
  box-shadow: none;
}

.dropdownMenu::before {
  content: '';
  position: absolute;
  inset: 8px 0 0 0;
  z-index: -1;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

.dropdownMenu button {
  background: #FFFFFF;
}

.dropdownMenu button:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.dropdownMenu button:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.memberSearchSection {
  display: grid;
  gap: 16px;
  width: 100%;
  margin: 0 auto;
}

.consultationSection {
  display: grid;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
}

.consultationSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.consultationSummaryGrid article,
.consultationPanel,
.consultationItem {
  border-radius: 8px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.consultationSummaryGrid article {
  padding: 16px;
}

.consultationSummaryGrid span,
.consultationMeta,
.consultationItem small,
.consultationItem > div > span {
  color: rgba(26, 26, 26, 0.58);
  font-size: 13px;
  font-weight: 700;
}

.consultationSummaryGrid strong {
  display: block;
  margin-top: 8px;
  color: var(--leafy-sub-accent-purple);
  font-size: 32px;
  line-height: 1;
  font-weight: 800;
}

.consultationPanel {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.consultationFormGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.consultationFormGrid .wideField {
  grid-column: span 3;
}

.consultationActions,
.consultationMeta,
.consultationFilterBar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.consultationActions {
  justify-content: flex-end;
}

.consultationFilterBar {
  flex-wrap: wrap;
}

.consultationFilterBar button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(100, 108, 127, 0.12);
  color: #333D4F;
  font-size: 13px;
}

.consultationFilterBar button.active {
  background: var(--leafy-accent-neon-lime);
  color: var(--leafy-accent-neon-text);
  font-weight: 800;
}

.consultationList {
  display: grid;
  gap: 14px;
}

.consultationItem {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.consultationItem strong {
  display: block;
  margin-bottom: 4px;
  color: #1A1A1A;
}

.consultationItem p {
  margin: 0;
  color: #1A1A1A;
  font-weight: 800;
}

.consultationItem small {
  display: block;
  line-height: 1.55;
}

.consultationMeta {
  justify-content: space-between;
  padding-top: 8px;
}

.consultationMeta > div {
  display: flex;
  gap: 8px;
}

.hrSection {
  display: grid;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
}

.hrSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hrSummaryGrid article,
.hrPanel,
.staffItem {
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.hrSummaryGrid article {
  padding: 22px;
}

.hrSummaryGrid span,
.staffItem span {
  color: rgba(26, 26, 26, 0.58);
  font-size: 13px;
  font-weight: 700;
}

.hrSummaryGrid strong {
  display: block;
  margin-top: 8px;
  color: var(--leafy-sub-accent-purple);
  font-size: 32px;
  line-height: 1;
  font-weight: 800;
}

.hrPanel {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.hrFormGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.hrFormGrid .wideField {
  grid-column: span 3;
}

.staffList {
  display: grid;
  gap: 14px;
}

.staffItem {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
}

.staffItem:hover {
  background-color: #fcfdfc !important;
  border-color: #333D4F !important;
  box-shadow: 0 4px 12px rgba(44, 62, 45, 0.04);
}

.badge-primary {
  background: #E1F0E4 !important;
  color: #333D4F !important;
  border: 1px solid #D5ECD8;
  padding: 4px 10px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.badge-secondary {
  background: #F1F1F1 !important;
  color: #666666 !important;
  border: 1px solid #E5E5E5;
  padding: 4px 10px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.textTruncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

.staffItem strong {
  display: block;
  margin-bottom: 6px;
  color: #1A1A1A;
  font-weight: 850;
}

.accountingSection {
  display: grid;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
}

.accountingSummaryGrid,
.accountingMenuGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.accountingMenuGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accountingSummaryGrid article,
.accountingMenuGrid article,
.accountingPanel {
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.accountingSummaryGrid article,
.accountingMenuGrid article {
  padding: 22px;
}

.accountingSummaryGrid span,
.accountingMenuGrid span,
.accountingList span,
.paymentMethodList span {
  color: rgba(26, 26, 26, 0.58);
  font-size: 13px;
  font-weight: 700;
}

.accountingSummaryGrid strong {
  display: block;
  margin-top: 8px;
  color: var(--leafy-sub-accent-purple);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
}

.accountingMenuGrid strong {
  display: block;
  margin-bottom: 8px;
  color: #1A1A1A;
  font-size: 17px;
  font-weight: 850;
}

.accountingLayout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
}

.accountingPanel {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.paymentMethodList,
.accountingList {
  display: grid;
  gap: 12px;
}

.paymentMethodList article,
.accountingList article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border-radius: 14px;
  background: #F9F8F6;
}

.paymentMethodList strong,
.accountingList strong {
  display: block;
  margin-bottom: 5px;
  color: #1A1A1A;
  font-weight: 850;
}

.paymentMethodList b,
.accountingList b {
  color: #333D4F;
  font-size: 17px;
  white-space: nowrap;
}

.statisticsSection {
  display: grid;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
}

.statisticsSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

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

.statisticsSummaryGrid article,
.statisticsMenuGrid article,
.statisticsPanel {
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.statisticsSummaryGrid article,
.statisticsMenuGrid article {
  padding: 22px;
}

.statisticsSummaryGrid span,
.statisticsMenuGrid span,
.statisticsFlowList span {
  color: rgba(26, 26, 26, 0.58);
  font-size: 13px;
  font-weight: 700;
}

.statisticsSummaryGrid strong {
  display: block;
  margin-top: 8px;
  color: var(--leafy-sub-accent-purple);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
}

.statisticsMenuGrid strong {
  display: block;
  margin-bottom: 8px;
  color: #1A1A1A;
  font-size: 17px;
  font-weight: 850;
}

.statisticsPanel {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.statisticsFlowList {
  display: grid;
  gap: 12px;
}

.statisticsFlowList article {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  background: #F9F8F6;
}

.statisticsFlowList b {
  color: #1A1A1A;
  font-weight: 850;
}

.centerSection {
  display: grid;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
}

.centerOverviewGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

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

.centerOverviewGrid article,
.centerMenuGrid article,
.centerPanel,
.centerMenuList article {
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.centerOverviewGrid article,
.centerMenuGrid article,
.centerMenuList article {
  padding: 22px;
}

.centerOverviewGrid strong,
.centerMenuGrid strong,
.centerMenuList strong {
  display: block;
  margin-bottom: 8px;
  color: #1A1A1A;
  font-size: 17px;
  font-weight: 850;
}

.centerOverviewGrid span,
.centerMenuGrid span,
.centerMenuList span {
  color: rgba(26, 26, 26, 0.58);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.centerPanel {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.memberSearchHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0 8px;
}

.memberSearchHeader h2 {
  margin: 0 0 6px;
  color: #1A1A1A;
  font-size: 28px;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.memberSearchHeader p {
  margin: 0;
  color: rgba(26, 26, 26, 0.58);
  font-weight: 600;
  font-size: 14px;
}

.memberSearchCount {
  min-width: 120px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  text-align: right;
}

.memberSearchCount span,
.pageSizeControl span {
  display: block;
  color: rgba(26, 26, 26, 0.5);
  font-size: 11px;
  font-weight: 700;
}

.memberSearchCount strong {
  display: block;
  margin-top: 4px;
  color: #333D4F;
  font-size: 22px;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.advancedSearchPanel {
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: 8px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.filterGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.filterGrid label {
  display: grid;
  gap: 7px;
}

.filterGrid label > span {
  color: rgba(26, 26, 26, 0.66);
  font-size: 12px;
  font-weight: 700;
}

.rangeInputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.filterActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.secondaryButton {
  background: rgba(100, 108, 127, 0.12);
  color: #333D4F;
  box-shadow: none;
}

.pageSizeControl {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pageSizeControl select {
  min-width: 110px;
}

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

@media (max-width: 720px) {
  .memberSearchHeader,
  .filterActions {
    align-items: stretch;
    flex-direction: column;
  }

  .filterGrid {
    grid-template-columns: 1fr;
  }
}

.memberFormModal {
  width: min(1200px, calc(100vw - 36px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 30px;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
}

.memberFormModal.memberFormTwoColumn {
  width: min(1400px, calc(100vw - 36px));
}

.memberRegistrationGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.memberRegistrationGrid label {
  display: grid;
  gap: 9px;
}

.memberRegistrationGrid label > span {
  color: rgba(26, 26, 26, 0.66);
  font-size: 13px;
  font-weight: 800;
}

.memberRegistrationGrid .wideField {
  grid-column: span 4;
}

.memberRegistrationGrid .memoField {
  grid-column: span 4;
}

.memberRegistrationGrid .memoField textarea {
  min-height: 190px;
}

.modalActionRow {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 12px;
  padding-top: 20px;
}

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

  .memberRegistrationGrid .wideField,
  .memberRegistrationGrid .memoField {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  .memberRegistrationGrid,
  .modalActionRow {
    grid-template-columns: 1fr;
  }

  .memberRegistrationGrid .wideField,
  .memberRegistrationGrid .memoField {
    grid-column: span 1;
  }
}

.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 26, 26, 0.28);
  backdrop-filter: blur(6px);
}

.memberFormModal .passEditorHeader {
  align-items: center;
  margin-bottom: 24px;
}

.memberFormModal .passEditorHeader .iconBox {
  flex: 0 0 auto;
}

.memberFormModal .passEditorHeader > div:nth-child(2) {
  flex: 1;
}

/* 글로벌 ?�원?�록 ?�로??버튼 */
.floatingMemberButton {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 24px;
  border-radius: 30px;
  background: linear-gradient(135deg, #FFFB00 0%, #FFE600 100%);
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(255, 251, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.floatingMemberButton:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 32px rgba(255, 251, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.16);
  opacity: 1;
}

.floatingMemberButton:active {
  transform: translateY(-1px) scale(0.98);
}

.floatingMemberButton span {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .floatingMemberButton {
    bottom: 20px;
    right: 20px;
    min-height: 56px;
    padding: 0 20px;
  }
  
  .floatingMemberButton span {
    display: none;
  }
}

/* ?�원?�록 ???�션 ?��???*/
.formSection {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 2px solid #E5E7EB;
}

.sectionTitle {
  margin: 0 0 20px 0;
  color: #1A202C;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.formGroup {
  margin-bottom: 20px;
}

.formGroup label {
  display: block;
  margin-bottom: 8px;
}

.formGroup label span {
  display: block;
  margin-bottom: 8px;
  color: #4A5568;
  font-size: 14px;
  font-weight: 700;
}

.formGroup label span small {
  margin-left: 6px;
  color: #8A94A6;
  font-size: 12px;
  font-weight: 500;
}

/* ?�그 그리??*/
.tagGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

/* ?�그 버튼 */
.tagButton {
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
  color: #4A5568;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tagButton:hover {
  border-color: #CBD5E0;
  background: #F7FAFC;
  transform: translateY(0);
}

.tagButton.active {
  border-color: #FFFB00;
  background: linear-gradient(135deg, #FFFB00 0%, #FFE600 100%);
  color: #1A1A1A;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(255, 251, 0, 0.25);
  transform: translateY(0);
}

.tagButton.active:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  .tagGrid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }
  
  .tagButton {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ========================================
   2???�이?�웃 (?�화 ?�담 최적??
   ======================================== */

/* ?�리??버튼 */
.presetButtons {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #E5E7EB;
}

.presetButton {
  min-height: 40px;
  padding: 10px 20px;
  border: 2px solid #CBD5E0;
  border-radius: 10px;
  background: #F7FAFC;
  color: #4A5568;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.presetButton:hover {
  border-color: #FFFB00;
  background: #FFFEF0;
  transform: translateY(0);
}

/* 2???�이?�웃 컨테?�너 */
.twoColumnLayout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
}

/* 좌측 ?�널 */
.leftPanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ?�측 ?�널 */
.rightPanel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panelTitle {
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #E5E7EB;
  color: #1A202C;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ???�드 */
.formField {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formField span {
  color: #4A5568;
  font-size: 13px;
  font-weight: 700;
}

.formField span.required::after {
  content: ' *';
  color: #EF4444;
}

.formField input,
.formField select,
.formField textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.formField input:focus,
.formField select:focus,
.formField textarea:focus {
  outline: none;
  border-color: #FFFB00;
  box-shadow: 0 0 0 3px rgba(255, 251, 0, 0.1);
}

.formField input:disabled {
  background: #F3F4F6;
  color: #9CA3AF;
  cursor: not-allowed;
}

.formField input.duplicateWarning {
  border-color: #F59E0B;
  background: #FEF3C7;
}

.warningText {
  color: #D97706;
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}

/* 빠른 ?�택 ?�션 */
.quickSelectSection {
  padding: 20px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  margin-bottom: 16px;
}

.quickSelectTitle {
  margin: 0 0 8px 0;
  color: #1A202C;
  font-size: 15px;
  font-weight: 700;
}

.sectionDescription {
  font-size: 13px;
  color: #718096;
  margin-bottom: 12px;
  margin-top: 0;
}

/* ?�디??버튼 그룹 (?�입 경로) */
.radioButtonGroup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.radioButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px;
  border: 2px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #4A5568;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radioButton:hover {
  border-color: #CBD5E0;
  background: #F7FAFC;
  transform: translateY(0);
}

.radioButton.selected {
  border-color: #FFFB00;
  background: linear-gradient(135deg, #FFFB00 0%, #FFE600 100%);
  color: #1A1A1A;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(255, 251, 0, 0.25);
  transform: translateY(0);
}

.radioIcon {
  font-size: 14px;
}

/* 체크박스 버튼 그룹 (?�간?�) */
.checkboxButtonGroup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.checkboxButton {
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid #E5E7EB;
  border-radius: 10px;
  background: #FFFFFF;
  color: #4A5568;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.checkboxButton:hover {
  border-color: #CBD5E0;
  background: #F7FAFC;
  transform: translateY(0);
}

.checkboxButton.selected {
  border-color: #FFFB00;
  background: linear-gradient(135deg, #FFFB00 0%, #FFE600 100%);
  color: #1A1A1A;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(255, 251, 0, 0.25);
  transform: translateY(0);
}

/* ??버튼 그룹 (?�동 목적) */
.largeButtonGroup {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.largeButton {
  min-height: 60px;
  padding: 16px 20px;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
  color: #4A5568;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.largeButton:hover {
  border-color: #CBD5E0;
  background: #F7FAFC;
  transform: translateY(-2px);
}

.largeButton.selected {
  border-color: #FFFB00;
  background: linear-gradient(135deg, #FFFB00 0%, #FFE600 100%);
  color: #1A1A1A;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(255, 251, 0, 0.3);
  transform: translateY(-2px);
}

/* ?�증 부???��? */
.painToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
}

.painToggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.painToggle span {
  color: #1A202C;
  font-size: 14px;
  font-weight: 700;
}

.painAreaButtons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.painButton {
  min-height: 36px;
  padding: 8px 12px;
  border: 2px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #4A5568;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.painButton:hover {
  border-color: #CBD5E0;
  background: #F7FAFC;
  transform: translateY(0);
}

.painButton.selected {
  border-color: #EF4444;
  background: #FEE2E2;
  color: #991B1B;
  font-weight: 800;
  transform: translateY(0);
}

/* 빠른 메모 */
.quickMemo {
  width: 100%;
  padding: 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  resize: vertical;
}

.quickMemo:focus {
  outline: none;
  border-color: #FFFB00;
  box-shadow: 0 0 0 3px rgba(255, 251, 0, 0.1);
}

/* 버튼 ?�기 ?�래??*/
.smallButton {
  min-height: 36px;
  font-size: 13px;
}

.mediumButton {
  min-height: 44px;
  font-size: 14px;
}

/* ?�션 �?컨테?�너 (?�입 경로, ?�동 경험, 주요 목적) - ?�로??�??�자??*/
.optionCardGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.optionCard {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid #E5E7EB;
  border-radius: 20px;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: #4A5568;
  white-space: nowrap;
}

.optionCard:hover {
  border-color: #3B82F6;
  background: #F7FAFC;
  transform: translateY(-1px);
}

.optionCard.selected {
  border-color: #3B82F6;
  background: #EFF6FF;
  color: #1E40AF;
  font-weight: 600;
}

.optionIcon {
  font-size: 16px;
  display: inline-block;
  line-height: 1;
}

.optionLabel {
  font-size: 14px;
  font-weight: inherit;
  line-height: 1;
}

/* ?�호 ?�간?� ?�세 그리??*/
.preferredSessionGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.sessionButton {
  min-height: 40px;
  padding: 10px 12px;
  border: 2px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #4A5568;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sessionButton:hover {
  border-color: #CBD5E0;
  background: #F7FAFC;
}

.sessionButton.selected {
  border-color: #3B82F6;
  background: #EFF6FF;
  color: #1E40AF;
  font-weight: 700;
}

/* 부목적 그리??- �??��??�로 변�?*/
.subGoalGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subGoalButton {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid #E5E7EB;
  border-radius: 20px;
  background: #FFFFFF;
  color: #4A5568;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subGoalButton:hover {
  border-color: #3B82F6;
  background: #F7FAFC;
  transform: translateY(-1px);
}

.subGoalButton.selected {
  border-color: #3B82F6;
  background: #EFF6FF;
  color: #1E40AF;
  font-weight: 600;
}

/* ?�증 부??체크박스 ?��? */
.painAreaToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}

.painAreaToggle:hover {
  background: #F3F4F6;
  border-color: #D1D5DB;
}

.painAreaToggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #3B82F6;
}

.painAreaToggle label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  user-select: none;
}

/* ?�증 부??�?컨테?�너 */
.painAreaChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* 민감?�보 ?�의 체크박스 */
.sensitiveInfoConsent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: #FEF3C7;
  border: 1.5px solid #FCD34D;
  border-radius: 8px;
  margin-top: 16px;
}

.sensitiveInfoConsent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #F59E0B;
  flex-shrink: 0;
}

.sensitiveInfoConsent label {
  font-size: 13px;
  font-weight: 500;
  color: #92400E;
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
}

.consentWarning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: #991B1B;
}

/* 주의?�항 ?�스???�력 */
.noteTextarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
  transition: all 0.2s ease;
}

.noteTextarea:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.noteTextarea::placeholder {
  color: #9CA3AF;
}

/* 반응??*/
@media (max-width: 1024px) {
  .twoColumnLayout {
    grid-template-columns: 1fr;
  }
  
  .largeButtonGroup {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {
  .presetButtons {
    flex-direction: column;
  }
  
  .radioButtonGroup,
  .checkboxButtonGroup {
    grid-template-columns: repeat(2, 1fr);
  }

  .preferredSessionGrid,
  .subGoalGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .largeButtonGroup {
    grid-template-columns: 1fr;
  }
  
  .painAreaButtons {
    grid-template-columns: repeat(3, 1fr);
  }
}

.memberTableWrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 16px;
  background: #FFFFFF;
}

.memberTable {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  font-size: 14px;
}

.memberTable thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #F9F8F6;
}

.memberTable th {
  padding: 14px 16px;
  color: rgba(26, 26, 26, 0.58);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.memberTable td {
  padding: 15px 16px;
  color: #1A1A1A;
  white-space: nowrap;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.memberTable tbody tr:hover {
  background: rgba(100, 108, 127, 0.06);
}

.memberTable td:first-child {
  min-width: 150px;
}

.memberTable td strong {
  display: block;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 800;
}

.memberTable td span {
  display: block;
  margin-top: 4px;
  color: rgba(26, 26, 26, 0.45);
  font-size: 12px;
  font-weight: 700;
}

.memberSearchSection .memberListCard {
  width: 100%;
  max-width: none;
  padding: 18px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.memberSearchSection .memberListCard .cardHeader {
  margin-bottom: 12px;
}

.memberTableWrap {
  max-height: 560px;
  overflow: auto;
  margin: 0 -6px -6px;
}

.memberTable {
  min-width: 980px;
  font-size: 13px;
}

.memberTable th {
  padding: 11px 12px;
  font-size: 11px;
}

.memberTable td {
  padding: 11px 12px;
  font-size: 13px;
}

.memberTable td:first-child {
  min-width: 120px;
}

.memberTable td strong {
  font-size: 13px;
}

.memberTable td span {
  font-size: 11px;
}

.memberTable th:nth-child(6),
.memberTable td:nth-child(6) {
  min-width: 140px;
}

.memberTable th:nth-child(8),
.memberTable td:nth-child(8) {
  text-align: right;
}

.memberTable tbody tr {
  cursor: pointer;
}

.memberDetailPage {
  display: grid;
  gap: 22px;
  width: 100%;
  margin: 0 auto;
}

.memberDetailTop {
  display: flex;
  align-items: center;
  gap: 18px;
}

.memberDetailTop h2 {
  margin: 0;
  color: #1A1A1A;
  font-size: 30px;
  letter-spacing: -0.05em;
}

.memberDetailLayout {
  display: flex;
  gap: 24px;
  align-items: start;
}

.memberProfilePanel,
.memberDetailContent,
.memberDetailSectionPage {
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.memberProfilePanel,
.left-profile-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  width: 280px;
  min-width: 280px;
  box-sizing: border-box;
}

/* Action Buttons inside Left Wrapper */
.left-profile-container button,
.left-profile-container .action-btn,
.memberProfilePanel button,
.memberProfilePanel .action-btn {
  width: 100% !important; /* 부�??�비�??��? ?�도�?�?채�? */
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.memberNumberTag {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(100, 108, 127, 0.12);
  color: #333D4F;
  font-size: 12px;
  font-weight: 800;
}

.memberProfilePanel h3 {
  margin: 0;
  color: #1A1A1A;
  font-size: 26px;
  letter-spacing: -0.05em;
}

.memberProfilePanel h3 small {
  color: rgba(26, 26, 26, 0.5);
  font-size: 15px;
}

.memberProfilePanel > p {
  margin: 0;
  color: #333D4F;
  font-weight: 800;
}

.memberProfileMeta,
.memberProfileMemo {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.memberProfileMeta span,
.memberProfileMemo p {
  margin: 0;
  color: rgba(26, 26, 26, 0.62);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
}

.memberProfileMemo strong {
  color: #1A1A1A;
  font-size: 14px;
}

.memberDetailContent {
  flex: 1;
  min-width: 0;
  min-height: 520px;
  padding: 24px;
}

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

.fullWidthSummaryCard {
  grid-column: span 2;
}

@media (max-width: 980px) {
  .fullWidthSummaryCard {
    grid-column: span 1;
  }
}

.memberSummaryCard {
  align-items: flex-start;
  min-height: 132px;
  padding: 22px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  text-align: left;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.memberSummaryCard strong {
  display: block;
  margin-bottom: 14px;
  font-size: 18px;
  letter-spacing: -0.04em;
}

.memberSummaryCard span {
  display: block;
  color: rgba(26, 26, 26, 0.56);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
}

.memberDetailSectionPage {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.memberDetailSectionPage h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.04em;
}

@media (max-width: 980px) {
  .memberDetailLayout {
    flex-direction: column;
  }
  .memberProfilePanel,
  .left-profile-container {
    width: 100% !important;
    min-width: 100% !important;
  }
  .memberSummaryGrid {
    grid-template-columns: 1fr;
  }
}

.memberDetailActions,
.memberDetailEditForm,
.memberDetailEditActions {
  display: grid;
  gap: 10px;
}

.memberDetailActions {
  padding-top: 16px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.memberDetailActions button,
.memberDetailEditActions button {
  width: 100%;
  min-height: 42px;
}

.memberDetailEditForm input,
.memberDetailEditForm select,
.memberDetailEditForm textarea {
  width: 100%;
}

.memberDetailEditActions {
  grid-template-columns: 1fr 1fr;
}

.modalActionRow:has(button:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}

.passSalePanel {
  display: grid;
  gap: 24px;
}

.passSaleActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.passSaleActions button {
  min-height: 48px;
}

.passRiskSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.passRiskSummaryGrid article,
.passRiskItem {
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.passRiskSummaryGrid article {
  padding: 22px;
}

.passRiskSummaryGrid span,
.passRiskItem span {
  color: rgba(26, 26, 26, 0.58);
  font-size: 13px;
  font-weight: 700;
}

.passRiskSummaryGrid strong {
  display: block;
  margin-top: 8px;
  color: #333D4F;
  font-size: 32px;
  line-height: 1;
}

.passRiskList {
  display: grid;
  gap: 14px;
}

.passRiskItem {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
}

.passRiskItem strong {
  display: block;
  margin-bottom: 6px;
  color: #1A1A1A;
  font-weight: 850;
}

.passRiskGauge {
  display: grid;
  gap: 10px;
}

.memberPassSalesList {
  display: grid;
  gap: 12px;
}

/* Ticket card styles are now inline in TicketCard component */

.memberPassSaleItem strong {
  display: block;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 800;
}

.memberPassSaleItem span {
  display: block;
  margin-top: 6px;
  color: rgba(26, 26, 26, 0.56);
  font-size: 13px;
  font-weight: 650;
}

.memberRecordSection {
  display: grid;
  gap: 18px;
}

.memberRecordForm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background: #F9F8F6;
}

.memberRecordForm textarea,
.memberRecordForm button {
  grid-column: 1 / -1;
}

.memberRecordList {
  display: grid;
  gap: 10px;
}

.memberRecordItem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.memberRecordItem strong,
.memberRecordItem span {
  display: block;
}

.memberRecordItem span {
  margin-top: 6px;
  color: rgba(26, 26, 26, 0.56);
  font-size: 13px;
  font-weight: 650;
}

.memberRecordActions {
  display: flex;
  gap: 8px;
}

.memberRecordActions button {
  min-height: 38px;
  padding: 0 12px;
}

@media (max-width: 860px) {
  .memberRecordForm,
  .memberRecordItem {
    grid-template-columns: 1fr;
  }
}

.memberPassSaleEditForm {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.memberPassSaleActions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.memberPassSaleActions button {
  min-height: 38px;
  padding: 0 12px;
}

.memberPassSaleEditForm .memberPassSaleActions {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  .memberPassSaleEditForm {
    grid-template-columns: 1fr;
  }

  .memberPassSaleActions {
    justify-content: flex-start;
  }
}

.memberPassSaleEditForm label {
  display: grid;
  gap: 7px;
}

.memberPassSaleEditForm label span {
  color: rgba(26, 26, 26, 0.62);
  font-size: 12px;
  font-weight: 800;
}

.memberPassSaleEditForm input:disabled {
  color: rgba(26, 26, 26, 0.58);
  background: #ECE8E1;
  cursor: not-allowed;
}

.permissionPage {
  display: grid;
  gap: 22px;
  padding: 28px;
  border-radius: 12px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.permissionRoleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.permissionRoleCard {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: #F9F8F6;
}

.permissionRoleCard strong {
  font-size: 17px;
  font-weight: 850;
}

.permissionRoleCard span {
  color: rgba(26, 26, 26, 0.58);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.permissionMatrix {
  display: grid;
  gap: 16px;
}

.permissionGroup {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 18px;
}

.permissionGroup h3 {
  margin: 0;
  font-size: 16px;
}

.permissionRows {
  display: grid;
  gap: 8px;
}

.permissionRow {
  display: grid;
  grid-template-columns: 1fr repeat(3, 100px);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: #FDFCFB;
}

.permissionRow span,
.permissionRow label {
  font-size: 13px;
  font-weight: 750;
}

.permissionRow label {
  display: flex;
  gap: 6px;
  align-items: center;
  color: rgba(26, 26, 26, 0.68);
}

@media (max-width: 860px) {
  .permissionRoleGrid,
  .permissionRow {
    grid-template-columns: 1fr;
  }
}

.passTableWrap {
  overflow-x: auto;
  border-radius: 8px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.passTable {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.passTable th,
.passTable td {
  padding: 15px 16px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.07);
  text-align: left;
  white-space: nowrap;
}

.passTable th {
  color: rgba(26, 26, 26, 0.58);
  background: #F9F8F6;
  font-size: 12px;
  font-weight: 850;
}

.passTable td {
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 650;
}

.passTable tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

.passTable tbody tr:hover {
  background: #F9F8F6;
}

.passTable td strong {
  font-weight: 850;
}

.passTable .secondaryButton {
  min-height: 34px;
  padding: 0 12px;
}

/* Auth / Login styling */
.loginContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--leafy-bg-color);
  padding: 20px;
}

.loginCard {
  width: 100%;
  max-width: 440px;
  background: var(--leafy-panel-bg);
  color: var(--leafy-text-on-white);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  display: grid;
  gap: 24px;
}

.loginHeader {
  text-align: center;
}

.loginHeader h1 {
  margin: 0;
  font-size: 28px;
  color: #333D4F;
  font-weight: 850;
  letter-spacing: -0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.loginHeader p {
  margin: 8px 0 0 0;
  color: rgba(26, 26, 26, 0.58);
  font-size: 14px;
  font-weight: 600;
}

.loginTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #F9F8F6;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(26, 26, 26, 0.06);
}

.loginTabs button {
  min-height: 38px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  background: transparent;
  color: rgba(26, 26, 26, 0.5);
  transition: all 0.15s ease;
  box-shadow: none;
}

.loginTabs button.active {
  background: #FFFFFF !important;
  color: #333D4F !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.loginForm {
  display: grid;
  gap: 16px;
}

.loginField {
  display: grid;
  gap: 8px;
}

.loginField span {
  font-size: 13px;
  font-weight: 800;
  color: rgba(26, 26, 26, 0.66);
}

.loginField input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(26, 26, 26, 0.12);
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
}

.loginField input:focus {
  outline: none;
  border-color: #333D4F;
  box-shadow: 0 0 0 3px rgba(44, 62, 45, 0.12);
}

.loginButton {
  width: 100%;
  min-height: 48px;
  background: #333D4F;
  color: #FFFFFF;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  margin-top: 8px;
  transition: background 0.15s ease;
}

.loginButton:hover {
  background: #1e2b1f;
}

.loginButton:disabled {
  background: rgba(44, 62, 45, 0.5);
  cursor: not-allowed;
}

.loginError {
  background: #FDF3F2;
  border: 1px solid #F6D9D7;
  color: #D32F2F;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}

.loginSuccess {
  background: #E1F0E4;
  border: 1px solid #D5ECD8;
  color: #333D4F;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topNavRight {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 8px;
}

.topNavUser {
  font-size: 13px;
  font-weight: 700;
  color: rgba(26, 26, 26, 0.62);
  display: flex;
  align-items: center;
  gap: 6px;
}

.logoutButton {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: rgba(211, 47, 47, 0.08) !important;
  color: #D32F2F !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
}

.logoutButton:hover {
  background: rgba(211, 47, 47, 0.16) !important;
}

/* ==========================================
   LÉAFY Pilates CRM Premium Design Theme
   ========================================== */

/* 1. Structural Fixed Left Sidebar Layout */
.leafyAppLayout {
  display: flex;
  min-height: 100vh;
  background-color: var(--leafy-bg-main);
  font-family: var(--leafy-font-family);
  padding: 24px;
  box-sizing: border-box;
  gap: 24px;
}

.leafySidebar {
  width: var(--leafy-sidebar-width);
  background-color: var(--leafy-sidebar-bg);
  border-radius: var(--leafy-border-radius-large);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--leafy-shadow-premium);
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  height: calc(100vh - 48px);
  box-sizing: border-box;
}

.leafySidebarTop {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 20px;
}

.sidebarLogo {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 36px;
  color: var(--leafy-text-dark);
}

.sidebarDot {
  color: var(--leafy-accent-neon);
  text-shadow: 0 0 10px rgba(255, 251, 0, 0.5);
}

.sidebarNav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.sidebarNavItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--leafy-border-radius-medium);
  color: var(--leafy-text-sidebar);
  font-weight: 600;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: auto !important;
  text-align: left;
  box-shadow: none !important;
}

.sidebarNavItem .sidebarNavLeft {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebarNavItem:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
  color: var(--leafy-text-dark) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.01) !important;
}

.sidebarNavItem.active {
  background-color: var(--leafy-sidebar-active-bg) !important;
  color: var(--leafy-sidebar-active-text) !important;
  font-weight: 700;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.sidebarNavItem.active:hover {
  background-color: #3e4757 !important; /* Slightly lighter slate for premium hover feedback on dark background */
  color: var(--leafy-sidebar-active-text) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15), 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.sidebarActiveDot {
  width: 6px;
  height: 6px;
  background-color: var(--leafy-accent-neon-point);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px var(--leafy-accent-neon-point);
  flex-shrink: 0;
  margin-right: -4px;
}

.sidebarArrow {
  font-size: 0.95rem;
  opacity: 0.8;
}

.sidebarFooter {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 24px;
  margin-top: auto;
}

.sidebarProfileInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  color: var(--leafy-text-dark);
}

.sidebarProfileInfo strong {
  font-size: 1rem;
  font-weight: 800;
}

.sidebarProfileInfo span {
  font-size: 0.85rem;
  color: var(--leafy-text-muted);
}

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

.sidebarBtn {
  min-height: 36px !important;
  height: 36px;
  border-radius: var(--leafy-border-radius-small);
  font-size: 13px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.04);
  color: var(--leafy-text-sidebar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none !important;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
  box-shadow: none !important;
}

.sidebarBtn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--leafy-text-dark);
}

.sidebarBtn.logout {
  background: rgba(244, 67, 54, 0.08) !important;
  color: #F44336 !important;
}

.sidebarBtn.logout:hover {
  background: rgba(244, 67, 54, 0.16) !important;
}

/* 2. Premium Main Content Area */
.leafyMainContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  overflow-y: auto;
}

.leafyMainHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  margin-bottom: 8px;
}

.leafyMainHeader h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.leafyHeaderSubtitle {
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 10px;
}

.leafyHeaderSearch {
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  color: white;
  width: 260px;
  border: none;
  transition: background 0.2s ease, width 0.25s ease;
}

.leafyHeaderSearch:focus-within {
  background: rgba(255, 255, 255, 0.22);
  width: 300px;
}

.leafyHeaderSearch input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: white !important;
  padding: 0 !important;
  height: auto !important;
  font-size: 0.95rem;
}

.leafyHeaderSearch input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* 3. Double Navigation Tab Bar (Floating Pills Override) */
.lessonTabs,
.memberSearchTabs.lessonTabs {
  display: flex !important;
  gap: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  width: auto !important;
}

.lessonTabs button,
.memberSearchTabs.lessonTabs button {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #1a1a1a !important;
  border-radius: 999px !important; /* Pill style */
  padding: 10px 22px !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-height: 42px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  border: none !important;
}

.lessonTabs button:hover,
.memberSearchTabs.lessonTabs button:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #000000 !important;
  transform: translateY(-1px);
}

.lessonTabs button.active,
.memberSearchTabs.lessonTabs button.active {
  background: var(--leafy-accent-neon) !important;
  color: var(--leafy-accent-neon-text) !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 15px rgba(255, 251, 0, 0.3) !important;
}

/* 4. Complete Borderless Card Panel Styles with Floating Effect */
.card,
.wideCard,
.aiAssistantCard,
.scheduleToolbar,
.passToolbar,
.passEditorPanel,
.consultationPanel,
.hrPanel,
.accountingPanel,
.statisticsPanel,
.centerPanel,
.memberDetailView,
.comingSoonCard {
  border: none !important;
  border-radius: var(--leafy-border-radius-large) !important;
  background-color: var(--leafy-panel-white) !important;
  box-shadow: var(--leafy-shadow-premium) !important;
  color: var(--leafy-text-dark) !important;
}

/* Schedule and Member Search - Workspace Style */
.scheduleTableWrap,
.advancedSearchPanel {
  border: none !important;
  border-radius: 8px !important;
  background-color: var(--leafy-panel-white) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  color: var(--leafy-text-dark) !important;
}

/* Sub cards, item panels, list entities */
.memberItem,
.consultationItem,
.staffItem,
.passCard,
.selectedMemberBox,
.emptyState,
.aiTaskItem,
.aiMessageBox,
.memberRecordItem {
  border: none !important;
  border-radius: var(--leafy-border-radius-medium) !important;
  background-color: var(--leafy-panel-white) !important;
  box-shadow: var(--leafy-shadow-premium) !important;
  color: var(--leafy-text-dark) !important;
}

/* 5. Spacious Input Fields, Select Options, & Textareas styling */
input,
select,
textarea {
  width: 100%;
  border: none !important;
  border-radius: var(--leafy-border-radius-small) !important;
  background: #F4F6F9 !important; /* Soft grey instead of bright harsh border */
  color: var(--leafy-text-dark) !important;
  outline: none !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 600 !important;
}

input,
select {
  height: 52px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
}

textarea {
  resize: vertical;
  padding: 18px !important;
  font-size: 14px !important;
}

input:focus,
select:focus,
textarea:focus {
  background: #FFFFFF !important;
  box-shadow: 0 0 0 2px var(--leafy-accent-neon), var(--leafy-shadow-premium) !important;
}

/* 6. Premium Results Count Panel Override (Class Occupancy reference style) */
.memberSearchCount {
  min-width: 160px !important;
  padding: 26px !important;
  border-radius: var(--leafy-border-radius-large) !important;
  background-color: var(--leafy-panel-white) !important;
  box-shadow: var(--leafy-shadow-premium) !important;
  border: none !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: hidden !important;
}

.memberSearchCount span {
  display: block !important;
  color: var(--leafy-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.memberSearchCount strong {
  display: block !important;
  margin-top: 8px !important;
  color: var(--leafy-text-dark) !important;
  font-size: 46px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}

.memberSearchCount::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background: var(--leafy-accent-neon);
  box-shadow: 0 -2px 10px rgba(255, 251, 0, 0.4);
}

/* Instructor Order Modal styles */
.instructorOrderModal {
  max-width: 480px !important;
}

.instructorOrderContent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

.instructorOrderItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.instructorOrderItem:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
  border-color: rgba(26, 26, 26, 0.16);
}

.instructorOrderBadge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1A1D20;
  color: var(--leafy-accent-neon-lime, #FFFB00);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(255, 251, 0, 0.2);
}

/* ==========================================================================
   MOBILE MEMBER RESERVATION WEB APP (W HOTEL LUXURY DARK MODE THEME) Scoped
   ========================================================================== */
.member-app-wrapper {
  --app-bg: #262C3A;       /* ?�크 ?�이�?그레??배경 */
  --card-bg: #FFFFFF;      /* ?�이??카드 배경 */
  --text-primary: #000000;  /* 카드 ??기본 ?�스??(블랙) */
  --text-secondary: #555555; /* 카드 ??보조 ?�스??(?�크 그레?? */
  --accent-yellow: #E6FF00; /* ?�인???�온 ?�로??*/
  --border-radius: 20px;   /* 카드 모서�??�운??�?*/

  min-height: 100vh;
  background-color: var(--app-bg);
  font-family: 'Montserrat', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  box-sizing: border-box;
}

/* Mobile-first App Shell */
.mobile-device-frame {
  width: 100%;
  height: 100vh;
  background-color: var(--app-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Mobile Header */
.mobile-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(23, 27, 36, 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 10;
  flex-shrink: 0;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .mobile-header {
    padding: 20px 24px;
  }
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-logo .logo-text {
  font-size: 20px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.08em;
}

.header-logo .logo-badge {
  font-size: 9px;
  font-weight: 900;
  background-color: var(--accent-yellow);
  color: #000000;
  padding: 2px 6px;
  border-radius: 30px;
  letter-spacing: 0.05em;
}

/* Auth Buttons */
.auth-action-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-action-btn:hover {
  background-color: #FFFFFF;
  color: var(--app-bg);
  border-color: #FFFFFF;
}

.logged-in-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.member-welcome {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

.member-welcome strong {
  color: var(--accent-yellow);
  font-weight: 700;
}

.logout-btn {
  border-color: rgba(255, 77, 77, 0.4);
  color: #FF4D4D;
}

.logout-btn:hover {
  background-color: #FF4D4D;
  color: #FFFFFF;
  border-color: #FF4D4D;
}

/* Ticket Info Bar */
.member-ticket-bar {
  background-color: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .member-ticket-bar {
    padding: 14px 24px;
  }
}

.ticket-title {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 6px 0;
}

.tickets-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-name {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

.ticket-count {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.ticket-count strong {
  color: var(--accent-yellow);
  font-size: 13px;
  font-weight: 800;
}

.no-tickets {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
}

/* Mobile Main Scroll Content */
.mobile-main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.section-heading {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 14px 0;
}

/* Horizontal Date Picker */
.mobile-date-picker {
  display: flex;
  flex-direction: column;
}

/* Scroll Outer Wrapper for mobile chevron arrows */
.scroll-outer-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.scroll-outer-wrapper .dates-scroll-container,
.scroll-outer-wrapper .chips-container {
  flex: 1;
  width: 100%;
}

/* Semi-transparent scroll chevrons matching premium dark tone */
.scroll-chevron-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(18, 22, 33, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  font-size: 20px;
  line-height: 1;
  user-select: none;
}

.scroll-chevron-btn:hover {
  background: rgba(18, 22, 33, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--accent-yellow);
  transform: translateY(-50%) scale(1.08);
}

.scroll-chevron-btn:active {
  transform: translateY(-50%) scale(0.92);
}

.scroll-chevron-btn.left {
  left: -12px;
}

.scroll-chevron-btn.right {
  right: -12px;
}

.dates-scroll-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none; /* Firefox */
}

.dates-scroll-container::-webkit-scrollbar {
  display: none; /* Safari & Chrome */
}

.date-scroll-card {
  flex: 0 0 62px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  outline: none;
}

.date-scroll-card.active {
  background-color: var(--accent-yellow);
  border-color: var(--accent-yellow);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(230, 255, 0, 0.25);
}

.scroll-day-name {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

.date-scroll-card.active .scroll-day-name {
  color: rgba(0, 0, 0, 0.6);
}

.scroll-day-num {
  font-size: 18px;
  font-weight: 900;
  color: #FFFFFF;
}

.date-scroll-card.active .scroll-day-num {
  color: #000000;
}

.today-indicator {
  position: absolute;
  bottom: 4px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--accent-yellow);
}

.date-scroll-card.active .today-indicator {
  color: #000000;
}

/* Instructor Filter Section */
.instructor-filter-section {
  display: flex;
  flex-direction: column;
}

.filter-header {
  margin-bottom: 12px;
}

.filter-title {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.filter-subtitle {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}

.chips-container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.chips-container::-webkit-scrollbar {
  display: none;
}

.instructor-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 14px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.instructor-chip.selected {
  background-color: var(--accent-yellow);
  border-color: var(--accent-yellow);
  box-shadow: 0 6px 14px rgba(230, 255, 0, 0.2);
}

.chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.instructor-chip.selected .chip-avatar {
  background-color: rgba(0, 0, 0, 0.12);
  color: #000000;
}

.chip-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.chip-name {
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
}

.instructor-chip.selected .chip-name {
  color: #000000;
}

.chip-role {
  font-size: 8px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}

.instructor-chip.selected .chip-role {
  color: rgba(0, 0, 0, 0.6);
}

.chip-check {
  font-size: 11px;
  color: #000000;
  font-weight: 800;
}

.filter-empty {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  padding: 8px 0;
}

/* Filter Summary Bar */
.filter-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(230, 255, 0, 0.08);
  border: 1px solid rgba(230, 255, 0, 0.15);
  border-radius: 12px;
  padding: 8px 14px;
  margin-top: -12px;
}

.filter-summary-bar span {
  color: var(--accent-yellow);
  font-size: 11px;
  font-weight: 700;
}

.reset-filter-btn {
  background: transparent;
  border: none;
  color: var(--accent-yellow);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* Class List Area */
.classes-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.section-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header-flex .section-heading {
  margin-bottom: 0;
}

.class-count {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
}

.class-cards-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* Premium White Class Card */
.class-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 20px;
  color: var(--text-primary);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  width: 100%;
  box-sizing: border-box;
}

.class-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.class-card.my-booking {
  border: 3px solid var(--accent-yellow);
  box-shadow: 0 10px 24px rgba(230, 255, 0, 0.15);
}

.class-card.fully-booked {
  opacity: 0.7;
}

/* Card Elements */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.instructor-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.instructor-profile .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #1F2431;
  color: var(--accent-yellow);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.profile-details {
  display: flex;
  flex-direction: column;
}

.instructor-name {
  font-size: 13px;
  font-weight: 800;
  margin: 0;
  color: #111111;
}

.instructor-specialty {
  font-size: 10px;
  color: var(--text-secondary);
  margin: 0;
}

.lesson-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
}

.lesson-badge.private {
  background-color: #E2EED7;
  color: #1F4217;
}

.lesson-badge.group {
  background-color: #ECE0FD;
  color: #39116F;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.program-title {
  font-size: 16px;
  font-weight: 900;
  color: #000000;
  margin: 0;
  letter-spacing: -0.02em;
}

.time-seats-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.time-info, .seats-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

.lucide-icon {
  opacity: 0.6;
}

.seats-info .has-seats {
  color: #1F4217;
}

.seats-info .no-seats {
  color: #FF4D4D;
  font-weight: 800;
}

/* Action Buttons inside Card */
.card-footer {
  margin-top: 4px;
}

.booking-btn {
  width: 100%;
  border: none;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 900;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}

.confirm-btn {
  background-color: #161A23;
  color: var(--accent-yellow);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.confirm-btn:hover {
  background-color: #000000;
  transform: translateY(-1px);
}

.confirm-btn:disabled {
  background-color: #ECECEC;
  color: #999999;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.cancel-btn {
  background-color: #FFF0F0;
  color: #FF4D4D;
  border: 1px solid rgba(255, 77, 77, 0.2);
}

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

/* Empty States */
.no-classes-card {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--border-radius);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}

.no-classes-card h4 {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}

.no-classes-card p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  margin: 0;
}

/* Brand Footer */
.mobile-footer-brand {
  padding: 16px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background-color: rgba(23, 27, 36, 0.4);
}

.mobile-footer-brand p {
  color: rgba(255, 255, 255, 0.2);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0;
}

.mobile-footer-brand span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 9px;
  font-weight: 800;
}

/* Loader */
.mobile-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 50px 0;
}

.mobile-loader .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-yellow);
  border-radius: 50%;
  animation: mobile-spin 0.8s linear infinite;
}

.mobile-loader span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
}

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

/* Overlay & Modals */
.mobile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 18, 25, 0.8);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mobile-modal-content {
  width: 100%;
  max-width: 100%;
  background-color: #202633;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  padding: 24px;
  color: #FFFFFF;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  animation: mobile-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  max-height: 90vh;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .mobile-modal-content {
    max-width: 480px;
  }
}

@keyframes mobile-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
}

.close-modal-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 18px;
  cursor: pointer;
}

.login-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin-bottom: 18px;
}

.login-error-box {
  background-color: rgba(255, 77, 77, 0.12);
  border: 1px solid rgba(255, 77, 77, 0.3);
  color: #FF4D4D;
  padding: 10px;
  font-size: 11px;
  border-radius: 10px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* Custom inputs */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.input-group label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.input-group input {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  padding: 12px;
  font-size: 13px;
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
}

.input-group input:focus {
  border-color: var(--accent-yellow);
}

.login-submit-btn {
  width: 100%;
  background-color: var(--accent-yellow);
  color: #000000;
  border: none;
  padding: 12px;
  font-size: 13px;
  font-weight: 900;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 8px;
}

.login-submit-btn:hover {
  opacity: 0.9;
}

/* Fast demo accounts trigger */
.demo-login-section {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.demo-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-yellow);
  margin: 0 0 4px 0;
}

.demo-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 10px 0;
}

.demo-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-member-btn {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-member-btn:hover {
  background-color: rgba(230, 255, 0, 0.12);
  border-color: var(--accent-yellow);
  color: #FFFFFF;
}

/* Status Modal notifications */
.status-modal {
  align-self: center;
  width: 85%;
  max-width: 320px;
  border-radius: 28px !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px !important;
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
}

.status-icon-wrap {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.status-title {
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 8px 0;
}

.status-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.status-ok-btn {
  width: 100%;
  background-color: var(--accent-yellow);
  color: #000000;
  border: none;
  padding: 10px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 12px;
  cursor: pointer;
}

/* Desktop: Optional centered container with max-width */
@media (min-width: 768px) {
  .member-app-wrapper {
    background-color: #161A23;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
  }
  
  .mobile-device-frame {
    max-width: 480px;
    height: auto;
    min-height: 800px;
    max-height: 95vh;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
}

/* --- Calendar Popup & Horizontal Sync Styles --- */
.section-title-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.section-title-flex .section-heading {
  margin-bottom: 0;
}

.calendar-popup-trigger {
  background: transparent;
  border: none;
  color: var(--accent-yellow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.calendar-popup-trigger:hover {
  background-color: rgba(230, 255, 0, 0.15);
  transform: scale(1.08);
}

.calendar-modal-overlay {
  align-items: center !important;
  justify-content: center !important;
}

.calendar-modal-content {
  background-color: #202633 !important; /* Dark Slate background */
  border-radius: var(--border-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  max-width: 380px !important;
  width: 90% !important;
  padding: 24px !important;
  margin: 0 auto;
  box-sizing: border-box;
  border-top-left-radius: var(--border-radius) !important;
  border-top-right-radius: var(--border-radius) !important;
  animation: calendar-slide-up-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes calendar-slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.calendar-navigator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  background-color: transparent;
  padding: 8px 0;
  border-radius: 0;
}

.calendar-navigator .nav-arrow {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.calendar-navigator .nav-arrow:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--accent-yellow);
}

.calendar-current-month {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Inline Calendar Navigator - Clean style without rounded backgrounds */
.inline-calendar-navigator {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 18px;
  background-color: transparent;
  padding: 8px 0;
  gap: 6px;
}

.inline-calendar-navigator .nav-arrow {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: color 0.2s ease;
}

.inline-calendar-navigator .nav-arrow:hover {
  background-color: transparent;
  color: var(--accent-yellow);
}

.inline-calendar-navigator .nav-arrow:active {
  opacity: 0.7;
}

.inline-calendar-navigator .calendar-today-btn {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-left: 12px;
  border-radius: 0;
  transition: color 0.2s ease;
}

.inline-calendar-navigator .calendar-today-btn:hover {
  background-color: transparent;
  color: var(--accent-yellow);
}

.inline-calendar-navigator .calendar-today-btn:active {
  opacity: 0.7;
}

.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 10px;
}

.grid-header-day {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
}

.grid-header-day.sun {
  color: #FF4D4D;
}

.grid-header-day.sat {
  color: #4D94FF;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-day-btn {
  background: transparent;
  border: none;
  color: #FFFFFF;
  height: 36px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  position: relative;
  transition: all 0.15s ease;
  outline: none;
}

.calendar-day-btn.current-month {
  color: #FFFFFF;
}

.calendar-day-btn.other-month {
  color: rgba(255, 255, 255, 0.25);
}

.calendar-day-btn:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.06);
}

.calendar-day-btn.selected {
  background-color: var(--accent-yellow) !important;
  color: #000000 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 10px rgba(230, 255, 0, 0.3);
}

.calendar-day-btn.today {
  border: 1px solid rgba(230, 255, 0, 0.3);
}

.calendar-day-btn.past {
  opacity: 0.15;
  cursor: not-allowed;
}

.today-dot {
  position: absolute;
  bottom: 4px;
  width: 3px;
  height: 3px;
  background-color: var(--accent-yellow);
  border-radius: 50%;
}

.calendar-day-btn.selected .today-dot {
  background-color: #000000;
}

.calendar-footer-helper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 18px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
}

.helper-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.helper-indicator.today-ind {
  border: 1px solid rgba(230, 255, 0, 0.5);
}

.helper-indicator.selected-ind {
  background-color: var(--accent-yellow);
}


/* ==========================================
   5. 4?� ?�심 경영 관�??�젯 �?VIP ?�황??
   ========================================== */
.dashboardSummaryGrid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 12px;
}

.dashboardListsGrid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 16px;
}

.dashboardListCard {
  padding: 32px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
}

.dashboardListHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(100, 108, 127, 0.08);
  padding-bottom: 16px;
}

.dashboardListHeader h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 850;
  color: var(--leafy-text-dark);
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboardListHeader span {
  font-size: 13px;
  color: var(--leafy-text-muted);
}

.dashboardListScroll {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}

.dashboardListScroll::-webkit-scrollbar {
  width: 6px;
}

.dashboardListScroll::-webkit-scrollbar-track {
  background: transparent;
}

.dashboardListScroll::-webkit-scrollbar-thumb {
  background: rgba(100, 108, 127, 0.15);
  border-radius: 3px;
}

.dashboardListScroll::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 108, 127, 0.3);
}

.dashboardListItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: var(--leafy-panel-white);
  border-radius: var(--leafy-border-radius-medium);
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(100, 108, 127, 0.06);
  transition: all 0.2s ease;
}

.dashboardListItem:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.dashboardListItemLeft {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboardListItemRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.dashboardListItemTitle {
  font-size: 15px;
  font-weight: 800;
  color: var(--leafy-text-dark);
}

.dashboardListItemSub {
  font-size: 12px;
  color: var(--leafy-text-muted);
}

.dashboardListItemBadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}

.badge-re-reg {
  background-color: #FFFBEB;
  color: #D97706;
  border: 1px solid #FDE68A;
}

.badge-re-reg-alert {
  background-color: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FCA5A5;
}

.badge-re-reg-mobile {
  background-color: #F0FDF4;
  color: #16A34A;
  border: 1px solid #BBF7D0;
}

.badge-dormant {
  background-color: #EFF6FF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}

.badge-hint {
  background-color: #F8FAFC;
  color: #475569;
  border: 1px solid #E2E8F0;
  font-size: 11px;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
  display: inline-block;
}

.badge-unpaid-alert {
  background-color: #FEF2F2;
  color: #EF4444;
  font-weight: 900;
  border: 1px solid #FCA5A5;
  animation: pulse-alert 2s infinite;
}

@keyframes pulse-alert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.dashboardTimeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 20px;
  margin-top: 8px;
}

.dashboardTimeline::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 6px;
  width: 2px;
  background: rgba(100, 108, 127, 0.12);
}

.dashboardTimelineItem {
  position: relative;
  margin-bottom: 20px;
}

.dashboardTimelineItem::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--leafy-bg-main);
  border: 2px solid var(--leafy-panel-white);
  box-shadow: 0 0 0 2px rgba(100, 108, 127, 0.15);
  z-index: 2;
}

.dashboardTimelineItem.vip::before {
  background: #D97706;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.25);
}

.dashboardTimelineItem.trial::before {
  background: #16A34A;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
}

.dashboardTimelineItem.consultation::before {
  background: #2563EB;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.dashboardTimelineContent {
  background-color: var(--leafy-panel-white);
  padding: 12px 16px;
  border-radius: var(--leafy-border-radius-medium);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
  border: 1px solid rgba(100, 108, 127, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timelineInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timelineTime {
  font-size: 11px;
  font-weight: 800;
  color: var(--leafy-text-muted);
}

.timelineTitle {
  font-size: 14px;
  font-weight: 800;
  color: var(--leafy-text-dark);
}

.timelineDetail {
  font-size: 12px;
  color: var(--leafy-text-muted);
}

.timelineType {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
}

.timelineType.vip {
  background-color: #FEF3C7;
  color: #92400E;
}

.timelineType.trial {
  background-color: #DCFCE7;
  color: #166534;
}

.timelineType.consultation {
  background-color: #DBEAFE;
  color: #1E40AF;
}

/* ==========================================
   ?�� LÉAFY AI AGENT CONTROLLER PREMIUM STYLES
   ========================================== */

.aiAgentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.aiAgentTitleBox {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aiAgentTitleBox h2 {
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 800;
  color: var(--leafy-text-dark);
}

.aiStatusBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(100, 108, 127, 0.08);
  color: #333D4F;
  border: 1px solid rgba(100, 108, 127, 0.12);
  transition: all 0.3s ease;
}

.aiStatusBadge.idle {
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
  border-color: rgba(16, 185, 129, 0.2);
}

.aiStatusBadge.analyzing {
  background: rgba(139, 92, 246, 0.08);
  color: #8B5CF6;
  border-color: rgba(139, 92, 246, 0.2);
}

.aiStatusBadge.success {
  background: rgba(204, 255, 0, 0.1);
  color: #7AA300;
  border-color: rgba(204, 255, 0, 0.3);
}

.aiPulseDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  position: relative;
}

.aiPulseDot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: aiPulse 1.8s infinite ease-in-out;
  opacity: 0.8;
}

@keyframes aiPulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.aiCommandContainer {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #F8FAFC;
  padding: 8px 12px;
  border-radius: var(--leafy-border-radius-medium);
  border: 1px solid rgba(100, 108, 127, 0.1);
  transition: all 0.3s ease;
  margin-bottom: 12px;
}

.aiCommandContainer:focus-within {
  background: #FFFFFF;
  border-color: #8B5CF6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

.aiMicBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--leafy-border-radius-medium);
  background: #FFFFFF;
  border: 1px solid rgba(100, 108, 127, 0.15);
  color: #646C7F;
  cursor: pointer;
  transition: all 0.3s ease;
}

.aiMicBtn:hover {
  background: #F1F5F9;
  color: #1E293B;
  transform: translateY(-2px);
}

.aiMicBtn.listening {
  background: #EF4444;
  color: #FFFFFF;
  border-color: #EF4444;
  animation: aiMicGlow 1.2s infinite ease-in-out;
}

@keyframes aiMicGlow {
  0% {
    box-shadow: 0 0 0 0px rgba(239, 68, 68, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(239, 68, 68, 0);
  }
}

.aiInputField {
  flex: 1;
  background: transparent !important;
  border: none !important;
  padding: 12px 6px !important;
  font-size: 15px !important;
  color: #1E293B !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: none !important;
}

.aiInputField::placeholder {
  color: #94A3B8;
  font-weight: 500;
}

.aiSendBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 44px;
  border-radius: var(--leafy-border-radius-medium);
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

.aiSendBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.aiSendBtn:active {
  transform: translateY(0);
}

.aiPillsRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.aiPillButton {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  background: #FFFFFF;
  color: #646C7F;
  border: 1px solid rgba(100, 108, 127, 0.15);
  cursor: pointer;
  transition: all 0.25s ease;
}

.aiPillButton:hover {
  background: rgba(139, 92, 246, 0.05);
  color: #8B5CF6;
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

/* Loading analyzing view */
.aiLoaderContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  gap: 20px;
}

.aiBrainPulse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  color: #8B5CF6;
  animation: aiBrainBreath 2s infinite ease-in-out;
}

@keyframes aiBrainBreath {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0px rgba(139, 92, 246, 0.2);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 16px rgba(139, 92, 246, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0px rgba(139, 92, 246, 0.2);
  }
}

.aiLoaderText {
  font-size: 16px;
  font-weight: 800;
  color: #475569;
  text-align: center;
}

.aiLoaderSubText {
  font-size: 13px;
  color: #94A3B8;
  margin-top: -12px;
  font-weight: 500;
}

/* AI Premium Results Grid */
.aiResultsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  animation: aiFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes aiFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.aiResultCard {
  background: #FFFFFF;
  border-radius: var(--leafy-border-radius-medium);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(100, 108, 127, 0.05);
  border: 1px solid rgba(100, 108, 127, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.aiResultCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(100, 108, 127, 0.12);
  border-color: rgba(100, 108, 127, 0.15);
}

.aiResultCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
}

.aiResultCard.dormant::before {
  background: #8B5CF6;
}

.aiResultCard.reregister::before {
  background: #F59E0B;
}

.aiResultCard.unpaid::before {
  background: #EF4444;
}

.aiCardHeaderRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.aiCardBadge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 50px;
}

.aiResultCard.dormant .aiCardBadge {
  background: rgba(139, 92, 246, 0.1);
  color: #7C3AED;
}

.aiResultCard.reregister .aiCardBadge {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}

.aiResultCard.unpaid .aiCardBadge {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

.aiCardIcon {
  color: #94A3B8;
}

.aiCardContent {
  flex: 1;
}

.aiCardContent h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 800;
  color: #1E293B;
}

.aiCardContent p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #475569;
  font-weight: 600;
}

.aiCardAction {
  margin-top: 20px;
}

.aiExecutionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.aiResultCard.dormant .aiExecutionBtn {
  background: rgba(139, 92, 246, 0.1);
  color: #7C3AED;
}

.aiResultCard.dormant .aiExecutionBtn:hover {
  background: #7C3AED;
  color: #FFFFFF;
}

.aiResultCard.reregister .aiExecutionBtn {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}

.aiResultCard.reregister .aiExecutionBtn:hover {
  background: #D97706;
  color: #FFFFFF;
}

.aiResultCard.unpaid .aiExecutionBtn {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

.aiResultCard.unpaid .aiExecutionBtn:hover {
  background: #DC2626;
  color: #FFFFFF;
}

.aiExecutionBtn.completed {
  background: #10B981 !important;
  color: #FFFFFF !important;
  cursor: default;
}

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

/* Premium Floating Toast */
.aiToastNotification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1E293B;
  color: #FFFFFF;
  padding: 16px 22px;
  border-radius: var(--leafy-border-radius-medium);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: aiToastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes aiToastIn {
  0% {
    transform: translateY(20px) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.aiToastIcon {
  color: #10B981;
  display: flex;
  align-items: center;
}

.aiToastContent {
  font-size: 14px;
  font-weight: 700;
}

/* Editable Kakao Draft phone view inside modal */
.aiDraftPhoneMock {
  background: #F1F5F9;
  border: 12px solid #334155;
  border-radius: 36px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.15);
}

.aiDraftPhoneHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #E2E8F0;
  margin-bottom: 12px;
}

.aiDraftPhoneTitle {
  font-size: 11px;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.aiDraftBubble {
  background: #FFE600; /* Kakao yellow */
  color: #1A1A1A;
  border-radius: 18px 18px 2px 18px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.aiDraftTextarea {
  width: 100%;
  background: transparent;
  border: none;
  font-size: 13.5px;
  line-height: 1.6;
  color: #1A1A1A;
  font-family: inherit;
  font-weight: 600;
  resize: none;
  padding: 0;
  outline: none;
}

.aiDraftTextCount {
  font-size: 11px;
  color: #8A94A6;
  text-align: right;
  margin-top: 4px;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .aiResultsGrid {
    grid-template-columns: 1fr;
  }
}

/* Custom styling for Member Pass Sales Dropdown */
.sellMemberDropdownItem:hover {
  background-color: #F3F4F6 !important;
}

/* Premium Reservations Timeline */
.premiumTimelineContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.timelineHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  background-color: #F8FAFC;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
}

.timelineFilterChips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filterChip {
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filterChip:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.filterChip.active {
  background: var(--leafy-accent-neon) !important;
  color: var(--leafy-accent-neon-text) !important;
  border-color: var(--leafy-accent-neon) !important;
  font-weight: 800;
}

.dateRangePicker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.datePickerLabel {
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  margin-right: 4px;
}

.datePickerInput {
  background: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: all 0.2s ease;
}

.datePickerInput:focus {
  border-color: var(--leafy-accent-neon, #10B981) !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.dateRangeSeparator {
  color: #64748B;
  font-weight: 600;
}

.dateRangeResetBtn {
  background: #EF4444;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dateRangeResetBtn:hover {
  background: #DC2626;
}

.reservationsTimelineList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timelineCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--leafy-panel-white, #FFFFFF) !important;
  border-radius: var(--leafy-border-radius-medium, 16px);
  padding: 16px 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.timelineCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.timelineCardLeft {
  display: flex;
  align-items: center;
  gap: 16px;
}

.timelineBadge {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}

.timelineBadge.attended {
  background-color: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
}

.timelineBadge.reserved {
  background-color: rgba(59, 130, 246, 0.12) !important;
  color: #3B82F6 !important;
}

.timelineBadge.absent {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #EF4444 !important;
}

.timelineBadge.cancelled {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #EF4444 !important;
}

.timelineInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timelineDateTime {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
}

.timelineDateTime svg {
  color: #6B7280;
}

.timelineMetaDetails {
  font-size: 13px;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timelineMetaDivider {
  color: #D1D5DB;
}

.timelineCardRight {
  display: flex;
  align-items: center;
}

.timelineMemoBadge {
  background-color: rgba(243, 244, 246, 1);
  color: #4B5563;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timelineStatusText {
  font-size: 13px;
  font-weight: bold;
}

/* ============================================================ */
/* ?�용�?목록 - 바디코디 ?��???(LÉAFY ?�상 ?�레???�용) */
/* ============================================================ */

/* ??UI */
.passListSection {
  width: 100%;
}

.passListTabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #E5E7EB;
  margin-bottom: 20px;
}

.passTab {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 15px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: auto;
}

.passTab:hover {
  color: #111827;
  background: #F9FAFB;
  transform: none;
}

.passTab.active {
  color: #10B981;
  border-bottom-color: #10B981;
  background: transparent;
}

.passListContent {
  min-height: 200px;
}

/* PassCard - 바디코디 ?��???*/
.passCardNew {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  margin-bottom: 16px;
}

.passCardNew:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.passCardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.passCardHeaderLeft {
  display: flex;
  align-items: center;
  gap: 10px;
}

.passStatusBadge {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid;
}

.passNumber {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
}

.passCardTitle h4 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
}

.passInstructor {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
}

.passCardPeriod {
  background: #F9FAFB;
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
}

.passPeriodRow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.passPeriodLabel {
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
}

.passPeriodValue {
  font-size: 13px;
  color: #111827;
  font-weight: 600;
}

.passDDay {
  text-align: right;
}

.dDayPositive {
  font-size: 18px;
  font-weight: 700;
  color: #10B981;
}

.dDayNegative {
  font-size: 18px;
  font-weight: 700;
  color: #EF4444;
}

.passCardSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  margin: 12px 0;
}

.summaryItem {
  flex: 1;
  text-align: center;
}

.summaryLabel {
  display: block;
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 4px;
}

.summaryValue {
  display: block;
  font-size: 13px;
  color: #374151;
}

.summaryValue strong {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.summaryDivider {
  width: 1px;
  height: 40px;
  background: #E5E7EB;
  margin: 0 8px;
}

.passCardActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.passActionBtn {
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: auto;
}

.passActionBtn:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
  transform: translateY(-1px);
}

.pauseBtn:hover {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #92400E;
}

.changeInstructorBtn:hover {
  background: #DBEAFE;
  border-color: #3B82F6;
  color: #1E40AF;
}

.editBtn:hover {
  background: #DCFCE7;
  border-color: #10B981;
  color: #166534;
}

.historyBtn:hover {
  background: #F3E8FF;
  border-color: #A855F7;
  color: #6B21A8;
}

/* 모달 ?��???*/
.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modalContent {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modalContent.largeModal {
  max-width: 700px;
}

.modalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modalHeader h3 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.closeButton {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #6B7280;
  min-height: auto;
  border-radius: 8px;
}

.closeButton:hover {
  background: #F3F4F6;
  color: #111827;
  transform: none;
}

.modalActions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.modalActions button {
  flex: 1;
}

/* ?�용?�역 모달 */
.usageHistoryList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
}

.usageHistoryItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.usageHistoryDate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.usageHistoryDate strong {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.usageHistoryDate span {
  font-size: 12px;
  color: #6B7280;
}

.usageHistoryInfo {
  flex: 1;
  padding: 0 16px;
  font-size: 13px;
  color: #374151;
}

.usageHistoryInfo div {
  margin-bottom: 4px;
}

.usageHistoryInfo div:last-child {
  margin-bottom: 0;
}

.usageHistoryStatus {
  display: flex;
  align-items: center;
}

.statusBadge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.statusBadge.attended {
  background: #DCFCE7;
  color: #166534;
}

.statusBadge.absent {
  background: #FEE2E2;
  color: #991B1B;
}

.statusBadge.cancelled {
  background: #F3F4F6;
  color: #4B5563;
}

.statusBadge.reserved {
  background: #DBEAFE;
  color: #1E40AF;
}

/* 모바??반응??*/
@media (max-width: 768px) {
  .passCardActions {
    grid-template-columns: 1fr;
  }
  
  .passCardSummary {
    flex-direction: column;
    gap: 12px;
  }
  
  .summaryDivider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
  
  .passTab {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .usageHistoryItem {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .usageHistoryDate {
    min-width: auto;
  }
  
  .usageHistoryInfo {
    padding: 0;
  }
  
  .modalContent {
    padding: 20px;
  }
  
  .modalActions {
    flex-direction: column;
  }
  
  .modalActions button {
    width: 100%;
  }
}

/* ==========================================
   ?�� STEP 7-A-17.5: AI CONCIERGE UX REDESIGN
   ========================================== */

/* AI Concierge Main Card - ?�면??중심 */
.aiConciergeMainCard {
  grid-column: 1 / -1;
  background: #FFFFFF;
  border-radius: var(--leafy-border-radius-medium);
  padding: 48px;
  box-shadow: 0 4px 18px rgba(100, 108, 127, 0.05);
  border: 1px solid rgba(100, 108, 127, 0.08);
  margin-bottom: 24px;
}

.aiConciergeHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.aiConciergeTitleSection {
  flex: 1;
}

.aiConciergeTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 32px;
  font-weight: 900;
  color: #1A1A1A;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.aiConciergeSubtitle {
  font-size: 18px;
  color: #646C7F;
  margin: 0;
  font-weight: 600;
}

/* 추천 질문 - 보조????�� */
.aiSuggestedPrompts {
  margin-top: 16px;
}

.aiSuggestedPromptsLabel {
  font-size: 13px;
  color: #646C7F;
  font-weight: 700;
  margin-bottom: 8px;
}

.aiSuggestedPromptsList {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.aiSuggestedPromptBtn {
  background: #F8FAFC;
  border: 1px solid rgba(100, 108, 127, 0.15);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}

.aiSuggestedPromptBtn:hover {
  background: #E2E8F0;
  border-color: #2C3E2D;
  color: #1A1A1A;
  transform: translateY(-1px);
}

.aiSuggestedPromptBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* AI 분석 �??�태 */
.aiAnalyzingState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
}

.aiAnalyzingIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.aiAnalyzingText {
  font-size: 16px;
  font-weight: 700;
  color: #475569;
  margin: 0;
}

/* AI 분석 ?�료 ?�태 */
.aiSuccessState {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: aiFadeInUp 0.4s ease;
}

.aiSuccessIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.aiSuccessText {
  font-size: 16px;
  font-weight: 700;
  color: #10B981;
  margin: 0;
  text-align: center;
}

/* AI가 발견???�무 카드 */
.aiDiscoveredTasksCard {
  grid-column: 1 / -1;
  background: #FFFFFF;
  border-radius: var(--leafy-border-radius-medium);
  padding: 32px;
  box-shadow: 0 4px 18px rgba(100, 108, 127, 0.05);
  border: 1px solid rgba(100, 108, 127, 0.08);
  margin-bottom: 24px;
}

.aiDiscoveredTasksHeader {
  margin-bottom: 20px;
}

.aiDiscoveredTasksHeader h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 800;
  color: #1A1A1A;
  margin: 0;
}

.aiDiscoveredTasksList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.aiDiscoveredTaskItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #F8FAFC;
  border: 1px solid rgba(100, 108, 127, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.aiDiscoveredTaskItem:hover {
  background: #FFFFFF;
  border-color: #2C3E2D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(100, 108, 127, 0.1);
}

.aiDiscoveredTaskIcon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aiDiscoveredTaskContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aiDiscoveredTaskContent strong {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
}

.aiDiscoveredTaskContent span {
  font-size: 13px;
  color: #646C7F;
  font-weight: 600;
}

/* ?�늘???�영 카드 */
.todayOperationCard {
  grid-column: 1 / 2;
  background: #FFFFFF;
  border-radius: var(--leafy-border-radius-medium);
  padding: 24px;
  box-shadow: 0 4px 18px rgba(100, 108, 127, 0.05);
  border: 1px solid rgba(100, 108, 127, 0.08);
}

.todayOperationHeader {
  margin-bottom: 16px;
}

.todayOperationHeader h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: #1A1A1A;
  margin: 0;
}

.todayOperationGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.todayOperationItem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #F8FAFC;
  border-radius: 10px;
}

.todayOperationLabel {
  font-size: 12px;
  color: #646C7F;
  font-weight: 600;
}

.todayOperationValue {
  font-size: 20px;
  font-weight: 800;
  color: #1A1A1A;
}

/* 최근 AI ?�무 카드 */
.recentAiTasksCard {
  grid-column: 2 / -1;
  background: #FFFFFF;
  border-radius: var(--leafy-border-radius-medium);
  padding: 24px;
  box-shadow: 0 4px 18px rgba(100, 108, 127, 0.05);
  border: 1px solid rgba(100, 108, 127, 0.08);
}

.recentAiTasksHeader {
  margin-bottom: 16px;
}

.recentAiTasksHeader h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: #1A1A1A;
  margin: 0;
}

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

.recentAiTaskItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #F8FAFC;
  border-radius: 8px;
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}

/* ?�세 ?�보 ?�션 */
.dashboardDetailedSection {
  grid-column: 1 / -1;
  margin-top: 24px;
}

.dashboardDetailedHeader {
  margin-bottom: 20px;
}

.dashboardDetailedHeader h3 {
  font-size: 18px;
  font-weight: 800;
  color: #1A1A1A;
  margin: 0;
}

/* 반응??*/
@media (max-width: 1024px) {
  .aiDiscoveredTasksList {
    grid-template-columns: 1fr;
  }

  .todayOperationCard,
  .recentAiTasksCard {
    grid-column: 1 / -1;
  }

  .aiConciergeMainCard {
    padding: 32px 24px;
  }

  .aiConciergeTitle {
    font-size: 24px;
  }

  .aiConciergeSubtitle {
    font-size: 16px;
  }
}

/* ==========================================
   ?�� STEP 7-A-17.6: AI WORKSPACE LAYOUT REDESIGN
   ========================================== */

/* Full-screen AI Workspace Layout */
.aiWorkspaceLayout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: #F8F9FA;
  font-family: var(--leafy-font-family);
}

/* Collapsible Sidebar */
.aiWorkspaceSidebar {
  width: 280px;
  height: 100vh;
  background: #FFFFFF;
  border-right: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
}

.aiWorkspaceSidebar.collapsed {
  width: 72px;
}

/* Sidebar Header */
.aiWorkspaceSidebarHeader {
  padding: 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  flex-shrink: 0;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceSidebarHeader {
  padding: 20px 12px;
  justify-content: center;
}

.aiWorkspaceSidebarLogo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.aiWorkspaceSidebarLogoText {
  font-size: 24px;
  font-weight: 900;
  color: #2C3E2D;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.aiWorkspaceSidebarCenterInfo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.aiWorkspaceSidebarCenterName {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.aiWorkspaceSidebarTestBadge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  color: #FFFFFF;
  background: #EF4444;
  border-radius: 4px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceSidebarLogo {
  opacity: 0;
  width: 0;
}

.aiWorkspaceSidebarToggle {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 8px;
  background: #F3F4F6;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.aiWorkspaceSidebarToggle:hover {
  background: #E5E7EB;
  color: #374151;
}

/* New Task Button */
.aiWorkspaceNewTaskBtn {
  margin: 16px;
  padding: 14px 18px;
  background: #2C3E2D;
  color: #FFFFFF;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  min-height: 48px;
  flex-shrink: 0;
}

.aiWorkspaceNewTaskBtn:hover {
  background: #1F2B20;
  transform: translateY(-1px);
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceNewTaskBtn {
  margin: 16px auto;
  padding: 0;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceNewTaskBtn span {
  display: none;
}

/* Recent Tasks Section */
.aiWorkspaceRecentTasks {
  padding: 8px;
  flex-shrink: 0;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceRecentTasks {
  padding: 4px 0;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
}

.aiWorkspaceRecentTasksTitle {
  padding: 12px 12px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceRecentTasksTitle {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.aiWorkspaceTaskItem {
  padding: 12px;
  margin: 4px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #374151;
  font-size: 14px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceTaskItem {
  padding: 0 !important;
  width: 48px !important;
  max-width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  margin: 4px auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 12px !important;
  gap: 0 !important;
  position: relative !important;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceTaskItem > * {
  margin: 0 auto !important;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceTaskItem svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.aiWorkspaceTaskItem:hover {
  background: #F3F4F6;
}

.aiWorkspaceTaskItem.active {
  background: #EEF2F6;
  color: #2C3E2D;
  font-weight: 600;
}

.aiWorkspaceTaskItemIcon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aiWorkspaceTaskItem svg {
  flex-shrink: 0;
  color: #9CA3AF;
}

.aiWorkspaceTaskItem.active svg {
  color: #2C3E2D;
}

.aiWorkspaceTaskItemText {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceTaskItemText {
  opacity: 0;
  width: 0;
}

/* CRM Menu Divider */
.aiWorkspaceCrmDivider {
  margin: 16px 12px;
  border: none;
  border-top: 1px solid #E5E7EB;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceCrmDivider {
  margin: 16px 8px;
}

.aiWorkspaceCrmTitle {
  padding: 12px 12px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceCrmTitle {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}

/* CRM Menu Items */
.aiWorkspaceCrmMenu {
  padding: 0 8px 16px;
  flex-shrink: 0;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceCrmMenu {
  padding: 0 0 12px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
}

.aiWorkspaceCrmMenuItem {
  padding: 12px;
  margin: 4px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6B7280;
  font-size: 14px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-weight: 600;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceCrmMenuItem {
  padding: 0 !important;
  width: 48px !important;
  max-width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  margin: 4px auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 12px !important;
  gap: 0 !important;
  position: relative !important;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceCrmMenuItem > * {
  margin: 0 auto !important;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceCrmMenuItem svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.aiWorkspaceCrmMenuItem:hover {
  background: #F3F4F6;
  color: #374151;
}

.aiWorkspaceCrmMenuItem.active {
  background: #2C3E2D;
  color: #FFFFFF;
}

.aiWorkspaceCrmMenuItemIcon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aiWorkspaceCrmMenuItem svg {
  flex-shrink: 0;
}

.aiWorkspaceCrmMenuItemText {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceCrmMenuItemText {
  opacity: 0;
  width: 0;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceCrmMenuItemLock {
  display: none;
}

/* Sidebar Footer - Sticky at bottom */
.aiWorkspaceSidebarFooter {
  padding: 16px;
  border-top: 1px solid #E5E7EB;
  background: #FFFFFF;
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: auto;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceSidebarFooter {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aiWorkspaceSidebarProfile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #F9FAFB;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceSidebarProfile {
  padding: 0;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceSidebarProfileAvatar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.aiWorkspaceSidebarProfileAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2C3E2D;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.aiWorkspaceSidebarProfileInfo {
  flex: 1;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceSidebarProfileInfo {
  opacity: 0;
  width: 0;
}

.aiWorkspaceSidebarProfileName {
  font-weight: 700;
  font-size: 14px;
  color: #1F2937;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiWorkspaceSidebarProfileRole {
  font-size: 12px;
  color: #6B7280;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiWorkspaceSidebarActions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aiWorkspaceSidebarActionBtn {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  min-height: 38px;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceSidebarActionBtn {
  padding: 0;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  position: relative;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceSidebarActionBtn svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.aiWorkspaceSidebarActionBtn.adminExit {
  background: #ECFDF5;
  color: #059669;
}

.aiWorkspaceSidebarActionBtn.adminExit:hover {
  background: #D1FAE5;
}

.aiWorkspaceSidebarActionBtn.logout {
  background: #FEF2F2;
  color: #DC2626;
}

.aiWorkspaceSidebarActionBtn.logout:hover {
  background: #FEE2E2;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceSidebarActionBtn span {
  display: none;
}

.aiWorkspaceSidebar.collapsed .aiWorkspaceSidebarActions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Main AI Workspace Area */
.aiWorkspaceMain {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #F8F9FA;
}

/* AI Conversation Container */
.aiWorkspaceConversation {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding: 40px 24px;
}

/* Empty State - First Screen */
.aiWorkspaceEmpty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.aiWorkspaceEmptyIcon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2C3E2D 0%, #4A5D4B 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.aiWorkspaceEmptyTitle {
  font-size: 32px;
  font-weight: 800;
  color: #1F2937;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.aiWorkspaceEmptySubtitle {
  font-size: 18px;
  color: #6B7280;
  margin: 0 0 40px 0;
  font-weight: 500;
}

/* Suggested Questions */
.aiWorkspaceSuggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  max-width: 700px;
  width: 100%;
  margin-bottom: 40px;
}

.aiWorkspaceSuggestionBtn {
  padding: 16px 20px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 60px;
  display: flex;
  align-items: center;
}

.aiWorkspaceSuggestionBtn:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Input Area */
.aiWorkspaceInputContainer {
  position: sticky;
  bottom: 0;
  padding: 24px;
  background: linear-gradient(to top, #F8F9FA 80%, transparent);
}

.aiWorkspaceInputWrapper {
  max-width: 900px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.aiWorkspaceInputWrapper:focus-within {
  border-color: #2C3E2D;
  box-shadow: 0 4px 20px rgba(44, 62, 45, 0.12);
}

.aiWorkspaceInput {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  color: #1F2937;
  background: transparent;
  padding: 0;
  min-height: 24px;
}

.aiWorkspaceInput::placeholder {
  color: #9CA3AF;
}

.aiWorkspaceInputActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aiWorkspaceInputBtn {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  background: transparent;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.aiWorkspaceInputBtn:hover {
  background: #F3F4F6;
  color: #374151;
}

.aiWorkspaceInputBtn.submit {
  background: #2C3E2D;
  color: #FFFFFF;
}

.aiWorkspaceInputBtn.submit:hover {
  background: #1F2B20;
}

.aiWorkspaceInputBtn.submit:disabled {
  background: #E5E7EB;
  color: #9CA3AF;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Conversation Messages */
.aiWorkspaceMessages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aiWorkspaceMessage {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.aiWorkspaceMessage.user {
  flex-direction: row-reverse;
}

.aiWorkspaceMessageAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E5E7EB;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
}

.aiWorkspaceMessage.ai .aiWorkspaceMessageAvatar {
  background: linear-gradient(135deg, #2C3E2D 0%, #4A5D4B 100%);
  color: #FFFFFF;
}

.aiWorkspaceMessageContent {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  max-width: 80%;
}

.aiWorkspaceMessage.user .aiWorkspaceMessageContent {
  background: #2C3E2D;
  color: #FFFFFF;
  border-color: #2C3E2D;
}

/* AI Inbox Notification */
.aiWorkspaceInbox {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
}

.aiWorkspaceInboxBtn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: all 0.2s ease;
}

.aiWorkspaceInboxBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.aiWorkspaceInboxBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   ?�� STEP 7-A-17.7: GLOBAL TOOLBAR & CRM WORKSPACE
   ========================================== */

/* Global Toolbar */
.globalToolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Global Member Search */
.globalMemberSearch {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.globalMemberSearch input {
  width: 100%;
  padding: 10px 44px 10px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px;
  color: #374151;
  background: #F9FAFB;
  transition: all 0.2s ease;
}

.globalMemberSearch input:focus {
  outline: none;
  border-color: #2C3E2D;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(44, 62, 45, 0.1);
}

.globalMemberSearch svg {
  position: absolute;
  right: 14px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  pointer-events: none;
}

/* Global Search Dropdown */
.globalSearchDropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
}

.globalSearchResultItem {
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid #F3F4F6;
}

.globalSearchResultItem:last-child {
  border-bottom: none;
}

.globalSearchResultItem:hover {
  background: #F9FAFB;
}

.globalSearchResultName {
  font-size: 15px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 4px;
}

.globalSearchResultInfo {
  font-size: 13px;
  color: #6B7280;
}

/* Global Member Register Button */
.globalMemberRegisterBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #2C3E2D;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.globalMemberRegisterBtn:hover {
  background: #1F2B20;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(44, 62, 45, 0.2);
}

/* Global Toolbar Icon Button */
.globalToolbarIconBtn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6B7280;
  transition: all 0.2s ease;
}

.globalToolbarIconBtn:hover {
  background: #F3F4F6;
  color: #374151;
}

/* Global Toolbar User */
.globalToolbarUser {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 10px;
  background: #F9FAFB;
  cursor: pointer;
  transition: background 0.2s ease;
}

.globalToolbarUser:hover {
  background: #F3F4F6;
}

.globalToolbarUserAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2C3E2D;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.globalToolbarUserName {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* CRM Workspace Content */
.crmWorkspaceContent {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  background: #F8F9FA;
  width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .aiWorkspaceSidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
  }

  .aiWorkspaceSidebar.open {
    transform: translateX(0);
  }

  .aiWorkspaceSidebar.collapsed {
    transform: translateX(-100%);
  }

  .aiWorkspaceConversation {
    padding: 24px 16px;
  }

  .aiWorkspaceSuggestions {
    grid-template-columns: 1fr;
  }

  .aiWorkspaceMessageContent {
    max-width: 90%;
  }

  .globalToolbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .globalMemberSearch {
    max-width: 100%;
    order: -1;
    flex-basis: 100%;
  }

  .globalMemberRegisterBtn span {
    display: none;
  }

  .globalToolbarUserName {
    display: none;
  }

  .crmWorkspaceContent {
    padding: 16px;
  }
}


/* ==========================================
   ?? STEP 7-A-18-B-9: MEMBER APP UX REDESIGN
   ========================================== */

/* Member Bottom Navigation */
.member-bottom-nav {
  position: sticky;
  bottom: 0;
  background: #FFFFFF;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-around;
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  margin-top: auto;
}

.member-bottom-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: #9CA3AF;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.member-bottom-nav .nav-item svg {
  width: 24px;
  height: 24px;
}

.member-bottom-nav .nav-item.active {
  color: #2C3E2D;
}

.member-bottom-nav .nav-item.active svg {
  stroke-width: 2.5;
}

/* Main content area */
.mobile-main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* Welcome Screen */
.member-welcome-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.welcome-content {
  text-align: center;
  max-width: 400px;
}

.welcome-logo {
  margin-bottom: 32px;
}

.logo-text-large {
  display: block;
  font-size: 48px;
  font-weight: 900;
  color: #2C3E2D;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.logo-subtitle {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  letter-spacing: 0.05em;
}

.welcome-message {
  font-size: 16px;
  color: #6B7280;
  margin-bottom: 32px;
}

.welcome-login-btn {
  width: 100%;
  max-width: 280px;
  padding: 16px 32px;
  background: #2C3E2D;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.welcome-login-btn:hover {
  background: #1F2B20;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44, 62, 45, 0.2);
}

/* Reservation Page */
.reservation-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.default-instructor-section {
  padding: 20px;
  background: #FFFFFF;
  border-radius: 12px;
  box-sizing: border-box;
}

.default-instructor-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #F9FAFB;
  border-radius: 12px;
  margin-bottom: 16px;
}

.instructor-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2C3E2D 0%, #4A5D4B 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}

.instructor-info h4 {
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
  margin: 0 0 4px 0;
}

.instructor-info p {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

.toggle-other-instructors-btn {
  width: 100%;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle-other-instructors-btn:hover {
  background: #F9FAFB;
  border-color: #2C3E2D;
  color: #2C3E2D;
}

.toggle-other-instructors-btn.secondary {
  background: #F3F4F6;
  border-color: #D1D5DB;
}

/* Calendar Date Section */
.calendar-date-section {
  padding: 20px;
  background: #FFFFFF;
  border-radius: 12px;
  box-sizing: border-box;
}

.calendar-main-trigger {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #2C3E2D 0%, #4A5D4B 100%);
  border: none;
  border-radius: 12px;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.calendar-main-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44, 62, 45, 0.3);
}

.calendar-trigger-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-trigger-content svg {
  flex-shrink: 0;
}

.selected-date-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.date-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.date-value {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
}

.change-date-hint {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

/* Other Instructors Trigger Button */
.other-instructors-trigger-btn {
  margin-top: 16px;
  padding: 12px 24px;
  background: #2C3E2D;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.other-instructors-trigger-btn:hover {
  background: #1F2B20;
  transform: translateY(-1px);
}

/* Other Instructors Modal */
.other-instructors-modal {
  max-width: 400px;
  width: 90%;
}

.instructors-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.instructor-select-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.instructor-select-item:hover {
  background: #FFFFFF;
  border-color: #2C3E2D;
  transform: translateX(4px);
}

.instructor-avatar.small {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

.instructor-select-item .instructor-info {
  flex: 1;
}

.instructor-select-item .instructor-info h4 {
  font-size: 15px;
  margin: 0 0 2px 0;
}

.instructor-select-item .instructor-info p {
  font-size: 13px;
}

.select-arrow {
  font-size: 20px;
  color: #9CA3AF;
  font-weight: 600;
}

.other-instructors-section {
  margin-top: 16px;
  text-align: center;
}

/* My Reservations Page */
.my-reservations-page,
.my-tickets-page,
.my-profile-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 800;
  color: #1F2937;
  margin: 0 0 8px 0;
}

.page-header p {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

/* Reservations Tabs */
.reservations-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #E5E7EB;
}

.reservations-tabs .tab-btn {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6B7280;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reservations-tabs .tab-btn.active {
  color: #2C3E2D;
  border-bottom-color: #2C3E2D;
}

/* Reservation Card */
.reservation-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.reservation-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.reservation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.reservation-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.scheduled {
  background: #DBEAFE;
  color: #1E40AF;
}

.status-badge.completed {
  background: #D1FAE5;
  color: #059669;
}

.status-badge.cancelled {
  background: #FEE2E2;
  color: #DC2626;
}

.status-badge.active {
  background: #D1FAE5;
  color: #059669;
}

.status-badge.inactive {
  background: #F3F4F6;
  color: #6B7280;
}

.reservation-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reservation-time {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-text {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

.time-range {
  font-size: 16px;
  color: #6B7280;
}

.reservation-instructor {
  display: flex;
  align-items: center;
  gap: 12px;
}

.instructor-avatar-small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2C3E2D 0%, #4A5D4B 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.instructor-details h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1F2937;
  margin: 0 0 4px 0;
}

.lesson-type-badge {
  font-size: 12px;
  color: #6B7280;
  margin: 0;
}

.reservation-program {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6B7280;
}

.reservation-memo {
  padding: 12px;
  background: #F9FAFB;
  border-radius: 8px;
  font-size: 13px;
  color: #6B7280;
}

.reservation-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #F3F4F6;
}

.cancel-reservation-btn {
  width: 100%;
  padding: 10px;
  background: #FEF2F2;
  border: 1px solid #FEE2E2;
  border-radius: 8px;
  color: #DC2626;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-reservation-btn:hover {
  background: #FEE2E2;
}

/* Pass Card */
.pass-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.pass-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pass-card.urgent {
  border-color: #FCA5A5;
  background: #FEF2F2;
}

.pass-card.warning {
  border-color: #FCD34D;
  background: #FFFBEB;
}

.pass-card.expired,
.pass-card.exhausted {
  opacity: 0.6;
}

.pass-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.pass-name {
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
  margin: 0;
}

.pass-status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.pass-status-badge.active {
  background: #D1FAE5;
  color: #059669;
}

.pass-status-badge.warning {
  background: #FEF3C7;
  color: #D97706;
}

.pass-status-badge.urgent {
  background: #FEE2E2;
  color: #DC2626;
}

.pass-status-badge.expired,
.pass-status-badge.exhausted {
  background: #F3F4F6;
  color: #6B7280;
}

.pass-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pass-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pass-info-row.secondary {
  font-size: 13px;
  color: #6B7280;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6B7280;
  font-size: 14px;
}

.info-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
}

.remaining-count {
  font-size: 24px;
  font-weight: 800;
  color: #2C3E2D;
}

.total-count {
  font-size: 16px;
  color: #6B7280;
}

.days-left {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  background: #F3F4F6;
  color: #6B7280;
}

.days-left.warning {
  background: #FEF3C7;
  color: #D97706;
}

.days-left.urgent {
  background: #FEE2E2;
  color: #DC2626;
}

.pass-progress-bar {
  width: 100%;
  height: 8px;
  background: #F3F4F6;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2C3E2D 0%, #4A5D4B 100%);
  transition: width 0.3s ease;
}

.info-label-small,
.info-value-small {
  font-size: 13px;
}

/* Profile Page */
.profile-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
}

.profile-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2C3E2D 0%, #4A5D4B 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  margin: 0 auto 24px;
}

.profile-info-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #F3F4F6;
}

.profile-info-row:last-child {
  border-bottom: none;
}

.profile-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #F9FAFB;
  border-radius: 8px;
  margin-top: 16px;
}

.profile-notice svg {
  flex-shrink: 0;
  color: #6B7280;
  margin-top: 2px;
}

.profile-notice p {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
  line-height: 1.5;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-state svg {
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
  margin: 0 0 8px 0;
}

.empty-state p {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

/* Passes Section */
.passes-section {
  margin-bottom: 32px;
}

.passes-section.expired-section {
  opacity: 0.8;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 16px;
}

.passes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .member-bottom-nav .nav-item span {
    font-size: 11px;
  }
  
  .page-header h2 {
    font-size: 20px;
  }
  
  .pass-card {
    padding: 16px;
  }
  
  .remaining-count {
    font-size: 20px;
  }
}

/* ==========================================
   STEP 7-A-18-B-10: INLINE CALENDAR & INSTRUCTOR SEARCH
   ========================================== */

/* Inline Calendar Section */
.calendar-section-inline {
  padding: 20px;
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.calendar-section-inline .section-heading {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 16px 0;
}

/* Selected Date Display */
.selected-date-display {
  padding: 16px 20px;
  background: transparent;
  border-radius: 0;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}

/* Instructor Name Row */
.instructor-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: transparent;
  border-radius: 0;
  margin-bottom: 20px;
}

.instructor-name-text {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.instructor-change-icon-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  color: rgba(230, 255, 0, 0.8);
  transition: color 0.2s ease;
}

.instructor-change-icon-btn:hover {
  color: var(--accent-yellow);
}

/* Member Time Slots Grid - 회원 웹앱 전용 */
.member-time-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 20px 20px 20px;
  background: transparent;
  border-radius: 0;
  margin-bottom: 16px;
}

.member-time-slot-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-yellow);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.member-time-slot-btn::after {
  content: '예약 가능';
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.member-time-slot-btn:hover {
  background: rgba(230, 255, 0, 0.1);
  border-color: var(--accent-yellow);
  transform: translateY(-1px);
}

.member-time-slot-btn.my-reservation {
  background: rgba(255, 77, 77, 0.1);
  border-color: rgba(255, 77, 77, 0.3);
  color: #FF4D4D;
}

.member-time-slot-btn.my-reservation::after {
  content: '내 예약';
  color: rgba(255, 77, 77, 0.7);
}

.member-time-slot-btn.my-reservation:hover {
  background: rgba(255, 77, 77, 0.15);
  border-color: #FF4D4D;
}

.loading-text {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.no-slots-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

/* Instructor Schedule Section - DEPRECATED */
.instructor-schedule-section {
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.instructor-header-with-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.instructor-info-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.instructor-info-compact h4 {
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
  margin: 0 0 2px 0;
}

.instructor-specialty-small {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
}

.instructor-search-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.instructor-search-btn:hover {
  background: #2C3E2D;
  border-color: #2C3E2D;
  transform: scale(1.05);
}

.selected-date-info {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
  padding: 12px;
  background: #F9FAFB;
  border-radius: 8px;
  text-align: center;
}

/* Instructor Selection Modal Enhancements */
.instructor-selection-modal {
  max-width: 400px;
  width: 90%;
}

.instructor-select-item.active {
  background: #E6F7E6;
  border-color: #2C3E2D;
}

.default-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #E6FF00;
  color: #1F2937;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
}



/* ==========================================
   POLICY CONSENT MODAL - REDESIGNED
   Leafy 브랜드 스타일: 어두운 배경, 네온 옐로우 CTA, 깔끔한 카드형 레이아웃
   ========================================== */

/* Policy Consent Modal Container */
.policy-consent-modal {
  max-height: 85vh;
  overflow-y: auto;
  padding: 0;
}

/* Policy Modal Header */
.policy-modal-header {
  position: relative;
  padding: 24px 24px 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.policy-header-content {
  padding-right: 32px;
}

.policy-main-title {
  font-size: 20px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.policy-subtitle {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.policy-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.policy-close-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

/* Reservation Info Card */
.policy-reservation-card {
  margin: 20px 24px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.policy-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.policy-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.policy-info-row:first-child {
  padding-top: 0;
}

.policy-info-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.policy-info-value {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-align: right;
}

/* Policy Rules Section */
.policy-rules-section {
  padding: 0 24px 20px 24px;
}

.policy-section-title {
  font-size: 16px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
}

/* Policy Rule Card */
.policy-rule-card {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
}

.policy-rule-card:last-child {
  margin-bottom: 0;
}

.policy-rule-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.policy-rule-icon {
  flex-shrink: 0;
  color: var(--accent-yellow);
  opacity: 0.9;
}

.policy-rule-title {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  letter-spacing: -0.01em;
}

.policy-rule-text {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  padding-left: 32px;
}

/* CTA Section */
.policy-cta-section {
  padding: 20px 24px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.policy-confirm-cta {
  width: 100%;
  padding: 16px 24px;
  background: var(--accent-yellow);
  color: #000000;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: -0.01em;
}

.policy-confirm-cta:hover {
  background: #F0FF33;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(230, 255, 0, 0.3);
}

.policy-confirm-cta:active {
  transform: translateY(0);
}

.policy-cancel-link {
  width: 100%;
  padding: 12px 24px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.policy-cancel-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .policy-modal-header {
    padding: 20px 20px 16px 20px;
  }
  
  .policy-main-title {
    font-size: 18px;
  }
  
  .policy-subtitle {
    font-size: 12px;
  }
  
  .policy-reservation-card,
  .policy-rules-section,
  .policy-cta-section {
    margin-left: 20px;
    margin-right: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .policy-rule-text {
    padding-left: 28px;
  }
}

/* Pass Info Breakdown - 예약 중/추가 예약 가능 표시 */
.pass-info-breakdown {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(230, 255, 0, 0.05);
  border: 1px solid rgba(230, 255, 0, 0.15);
  border-radius: 10px;
  margin-top: 8px;
}

.breakdown-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.breakdown-label {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.breakdown-value {
  font-size: 16px;
  font-weight: 800;
  color: #1F2937;
}

.breakdown-value.pending-highlight {
  color: #D97706;
}