/* =====================================================
   메이트리그라운드 - Apple-inspired Design System
   Action Blue #0066cc · Ink #1d1d1f · Parchment #f5f5f7
   ===================================================== */

:root {
  /* Brand & Accent */
  --primary: #0066cc;
  --primary-focus: #0071e3;
  --primary-on-dark: #2997ff;

  /* Surface */
  --canvas: #ffffff;
  --parchment: #f5f5f7;
  --pearl: #fafafc;
  --tile-dark-1: #272729;
  --tile-dark-2: #2a2a2c;
  --tile-dark-3: #252527;
  --black: #000000;
  --chip-translucent: rgba(210, 210, 215, 0.64);

  /* Text */
  --ink: #1d1d1f;
  --body: #1d1d1f;
  --body-on-dark: #ffffff;
  --body-muted: #cccccc;
  --ink-80: #333333;
  --ink-48: #7a7a7a;

  /* Borders */
  --divider-soft: #f0f0f0;
  --hairline: #e0e0e0;

  /* Spacing */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;

  /* Radius */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;
  --r-full: 9999px;

  /* Shadow - only one signature shadow in entire system */
  --shadow-product: rgba(0, 0, 0, 0.08) 0 4px 24px;
  --shadow-soft: rgba(0, 0, 0, 0.04) 0 1px 3px;
}

/* =========================================================
   V32 — 에어비앤비 DLS 전면 개편
   .app-shell 스코프 안에서만 변수 오버라이드 → 로그인 페이지(.abnb-gate), 모달, 토스트는 영향 없음
   원칙: 오프 화이트 #f7f7f7 베이스, 12px 라운드, 1px solid #ebebeb 라인,
        soft shadow(0 6px 16px rgba(0,0,0,0.08)), 메인 액센트 #FF385C,
        타이포 컬러 #484848 / 보조 #717171
   ========================================================= */
.app-shell {
  --parchment: #f7f7f7;            /* 본문 베이스 = 오프 화이트 */
  --canvas:    #ffffff;             /* 카드/패널 = 순백 */
  --hairline:  #ebebeb;             /* 보조 라인 = 에어비앤비 라이트 그레이 */
  --divider-soft: #f0f0f0;
  --primary:   #FF385C;             /* 액션 색상 = Rausch 핑크 */
  --primary-focus: #E31C5F;
  --ink:       #484848;             /* 본문 텍스트 */
  --ink-80:    #484848;
  --ink-48:    #717171;             /* 보조 텍스트 */
  --shadow-product: 0 6px 16px rgba(0,0,0,0.08);
  --shadow-soft:    0 2px 8px rgba(0,0,0,0.06);
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 12px;
}

/* (1) 모든 주요 카드/패널/박스: 12px 라운드 + 1px 라인 + soft shadow + #ffffff */
.app-shell .home-hero,
.app-shell .upcoming-section,
.app-shell .timeline-container,
.app-shell .timeline-card,
.app-shell .insight-card,
.app-shell .insight-heatmap,
.app-shell .insight-stats-grid > .stat-card,
.app-shell .stat-card,
.app-shell .summary-card,
.app-shell .summary-card-item,
.app-shell .summary-card-grid-container,
.app-shell .chart-card,
.app-shell .data-table-wrapper,
.app-shell .admin-content-card,
.app-shell .admin-card,
.app-shell .setting-card,
.app-shell .setting-section-box,
.app-shell .schedule-palette-box,
.app-shell .color-palette-card,
.app-shell .palette-management-wrapper,
.app-shell .management-content-card,
.app-shell .repeat-panel,
.app-shell .org-panel,
.app-shell .space-card,
.app-shell .member-card,
.app-shell .invite-card,
.app-shell .invites-section,
.app-shell .invite-status-banner,
.app-shell .invite-action-banner,
.app-shell .space-filter-panel,
.app-shell .month-view-container,
.app-shell .heatmap-card-panel {
  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
  -webkit-box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
  border-radius: 12px !important;
  border: 1px solid #ebebeb !important;
  background: #ffffff !important;
}

/* (2) 사이드/관리자 내비 — soft shadow + 12px 라운드 */
.app-shell .admin-side-nav,
.app-shell .side-nav,
.app-shell .admin-sidebar {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  border-radius: 12px !important;
  border: 1px solid #ebebeb !important;
  background: #ffffff !important;
}

/* (3) 1.5x 패딩 — 에어비앤비 특유의 여유로운 여백 */
.app-shell .home-hero { padding: 40px !important; }
.app-shell .upcoming-section,
.app-shell .timeline-container,
.app-shell .insight-card,
.app-shell .insight-heatmap,
.app-shell .admin-content-card,
.app-shell .management-content-card,
.app-shell .setting-card,
.app-shell .setting-section-box,
.app-shell .schedule-palette-box,
.app-shell .palette-management-wrapper,
.app-shell .month-view-container,
.app-shell .heatmap-card-panel { padding: 32px !important; }
.app-shell .stat-card,
.app-shell .summary-card,
.app-shell .summary-card-item,
.app-shell .chart-card,
.app-shell .org-panel,
.app-shell .repeat-panel,
.app-shell .space-card,
.app-shell .member-card,
.app-shell .invite-card { padding: 24px !important; }

/* (4) 모바일 축소 */
@media (max-width: 768px) {
  .app-shell .home-hero { padding: 24px 20px !important; }
  .app-shell .upcoming-section,
  .app-shell .timeline-container,
  .app-shell .insight-card,
  .app-shell .insight-heatmap,
  .app-shell .admin-content-card,
  .app-shell .management-content-card,
  .app-shell .setting-card,
  .app-shell .setting-section-box,
  .app-shell .schedule-palette-box,
  .app-shell .palette-management-wrapper,
  .app-shell .month-view-container,
  .app-shell .heatmap-card-panel { padding: 20px 16px !important; }
  .app-shell .stat-card,
  .app-shell .summary-card,
  .app-shell .summary-card-item,
  .app-shell .chart-card,
  .app-shell .org-panel,
  .app-shell .repeat-panel,
  .app-shell .space-card,
  .app-shell .member-card,
  .app-shell .invite-card { padding: 16px !important; }
}

/* (5) 전역 내비/탑바: 그림자 없는 깨끗한 화이트 + 라이트 그레이 라인
       ⚠️ V33 §1 FIX: 흰 배경으로 바꾸면 원본 #fff 텍스트가 안 보이므로
       nav-brand / nav-link / nav-user-name / 아이콘 색을 모두 #484848 로 재정의 */
.app-shell .global-nav,
.app-shell .global-nav-inner {
  box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
  background: #ffffff !important;
}
.app-shell .global-nav {
  border-bottom: 1px solid #ebebeb !important;
  min-height: 64px !important;
}
.app-shell .global-nav-inner {
  min-height: 64px !important;
  padding: 0 24px !important;
}

/* (5.1) V33 §1 — 네비 안의 모든 텍스트/아이콘을 흰 배경에서 보이게 강제 */
.app-shell .global-nav .nav-brand,
.app-shell .global-nav .nav-brand *,
.app-shell .global-nav .nav-link,
.app-shell .global-nav .nav-link *,
.app-shell .global-nav .nav-link i,
.app-shell .global-nav .nav-link span,
.app-shell .global-nav .nav-user-name,
.app-shell .global-nav .nav-hamburger,
.app-shell .global-nav .nav-hamburger * {
  color: #484848 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #484848 !important;
}
.app-shell .global-nav .nav-brand {
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.app-shell .global-nav .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  background: transparent !important;
}
.app-shell .global-nav .nav-link:hover {
  background: #f7f7f7 !important;
  color: #222 !important;
  -webkit-text-fill-color: #222 !important;
}
.app-shell .global-nav .nav-link.is-active,
.app-shell .global-nav .nav-link.active {
  background: #f1f1f1 !important;
  color: #FF385C !important;
  -webkit-text-fill-color: #FF385C !important;
}
.app-shell .global-nav .nav-link.is-active i,
.app-shell .global-nav .nav-link.active i {
  color: #FF385C !important;
  -webkit-text-fill-color: #FF385C !important;
}
/* 브랜드 마크 바: 어두운 배경용 흰 막대를 핑크 막대로 */
.app-shell .global-nav .nav-brand .brand-bars span {
  background: #FF385C !important;
}
.app-shell .global-nav .nav-brand .brand-bars span:nth-child(3) {
  background: #E31C5F !important;
}
/* 햄버거 바를 어둡게 */
.app-shell .global-nav .nav-hamburger .hb-bar {
  background: #484848 !important;
}
.app-shell .global-nav .nav-hamburger:hover .hb-bar {
  background: #FF385C !important;
}
/* 아바타는 라이트 위에서도 보이도록 핑크 배경 */
.app-shell .global-nav .nav-avatar {
  background: linear-gradient(135deg, #FF385C 0%, #E31C5F 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
}

/* (6) 본문 베이스 오프 화이트 */
.app-shell {
  background: #f7f7f7;
}
.app-shell .page-wrap {
  background: #f7f7f7 !important;
}

/* (7) 본문 텍스트 컬러 통일 — 에어비앤비 #484848 */
.app-shell,
.app-shell h1, .app-shell h2, .app-shell h3, .app-shell h4 {
  color: #484848;
}
.app-shell .stat-label,
.app-shell .stat-trend,
.app-shell .summary-card-text {
  color: #717171 !important;
}

/* (8) 액센트 핑크 — 주요 버튼/링크/배지 */
.app-shell .btn-primary {
  background: linear-gradient(90deg, #E31C5F 0%, #FF385C 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(255,56,92,0.18) !important;
}
.app-shell .btn-primary:hover {
  background: linear-gradient(90deg, #D70466 0%, #E31C5F 100%) !important;
}

/* =========================================================
   V32 §3 — 알약(Pill) 일정 블록
   타임라인/이벤트 카드에 부드러운 14px 라운드 + soft shadow.
   기존 V31의 직각 사파이어 라인을 폐기하고 에어비앤비 스타일로 회귀.
   ========================================================= */
.app-shell .event-block,
.app-shell .timeline-block,
.app-shell .reservation-block,
.app-shell .timeline-slot.is-booked,
.app-shell .timeline-active-bar {
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  border: none !important;
  overflow: hidden !important;
}
/* hover 시 살짝 부풀어 오르는 느낌 */
.app-shell .event-block:hover,
.app-shell .timeline-block:hover,
.app-shell .reservation-block:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
  transform: translateY(-1px);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.app-shell .event-block.is-mine {
  box-shadow: 0 0 0 2px #FF385C, 0 4px 12px rgba(255,56,92,0.22) !important;
}
/* 리사이즈 핸들도 알약 곡선에 맞게 */
.app-shell .ev-resize-handle {
  border-radius: 0 0 14px 14px !important;
}

/* =========================================================
   V32 §5 — 관리 일반 탭: 멤버/공간 1:1 황금비 확대
   (디바이스 카드는 V11에서 이미 영구 삭제. 남은 2장을 웅장하게)
   ========================================================= */
.app-shell .summary-card-grid-container {
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
  margin-bottom: 32px !important;
}
.app-shell .summary-card-item {
  padding: 36px 32px !important;
  min-height: 140px;
  display: flex !important;
  align-items: center;
  gap: 24px;
}
.app-shell .summary-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE9EF 0%, #FFF2F5 100%);
  color: #FF385C;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-shell .summary-card-text .label,
.app-shell .summary-card-text .card-title {
  font-size: 14px !important;
  color: #717171 !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.app-shell .summary-card-text .value,
.app-shell .summary-card-text .card-value {
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.6px;
  color: #484848 !important;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .app-shell .summary-card-grid-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .app-shell .summary-card-item {
    padding: 24px 20px !important;
    min-height: auto;
  }
  .app-shell .summary-card-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  .app-shell .summary-card-text .value,
  .app-shell .summary-card-text .card-value {
    font-size: 26px !important;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =====================================================
   TYPOGRAPHY UTILITIES
   ===================================================== */
.t-hero { font-size: 56px; font-weight: 600; line-height: 1.07; letter-spacing: -0.28px; }
.t-display-lg { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: 0; }
.t-display-md { font-size: 34px; font-weight: 600; line-height: 1.47; letter-spacing: -0.374px; }
.t-lead { font-size: 28px; font-weight: 400; line-height: 1.14; letter-spacing: 0.196px; }
.t-lead-airy { font-size: 24px; font-weight: 300; line-height: 1.5; letter-spacing: 0; }
.t-tagline { font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }
.t-body-strong { font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.t-body { font-size: 17px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; }
.t-caption { font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: -0.224px; }
.t-caption-strong { font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -0.224px; }
.t-fine { font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: -0.12px; }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.374px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn-primary:hover { background: var(--primary-focus); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { background: #b8d4f0; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: none;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.374px;
  transition: opacity 0.18s ease;
}
.btn-secondary:hover { opacity: 0.7; }

.btn-ghost {
  background: var(--pearl);
  color: var(--ink-80);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.btn-ghost:hover { background: #f0f0f3; border-color: #d8d8db; }

.btn-utility {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  transition: opacity 0.18s ease;
}
.btn-utility:hover { opacity: 0.85; }

.btn-full { width: 100%; }
.btn-large { padding: 14px 28px; font-size: 18px; font-weight: 300; }

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  border: none;
  background: transparent;
  color: var(--ink-48);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.18s ease, color 0.18s ease;
}
.btn-icon:hover { background: var(--parchment); color: var(--ink); }

.btn-text-link {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 17px;
  letter-spacing: -0.374px;
  padding: 0;
}
.btn-text-link:hover { text-decoration: underline; }

/* =====================================================
   LOGIN
   ===================================================== */
.login-canvas {
  min-height: 100vh;
  background: var(--parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}
.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--canvas);
  border-radius: var(--r-lg);
  padding: 48px 44px;
  box-shadow: var(--shadow-product);
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
.brand-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}
.brand-bars span {
  display: block;
  width: 4px;
  background: var(--ink);
  border-radius: 2px;
}
.brand-bars span:nth-child(1) { height: 12px; }
.brand-bars span:nth-child(2) { height: 18px; }
.brand-bars span:nth-child(3) { height: 9px; background: var(--primary); }
.brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.login-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0 0 12px;
  color: var(--ink);
}
.login-sub {
  font-size: 17px;
  color: var(--ink-48);
  margin: 0 0 32px;
  letter-spacing: -0.374px;
}
.login-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-48);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--parchment);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 13px 16px;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.374px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--canvas);
  border-color: var(--primary);
}

.form-error {
  color: #d33;
  font-size: 14px;
  letter-spacing: -0.224px;
  min-height: 18px;
}

.login-hint {
  margin-top: 32px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--parchment);
  font-size: 13px;
  color: var(--ink-80);
}
.hint-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.hint-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-80);
}
.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  letter-spacing: -0.1px;
}
.tag-blue { background: rgba(0,102,204,0.1); color: var(--primary); }
.tag-dark { background: rgba(29,29,31,0.85); color: #fff; }
.tag-soft { background: var(--hairline); color: var(--ink-80); }

/* =========================================================
   V32 — ABNB GATE (에어비앤비 DLS 로그인 페이지)
   디자인 원칙: 오프 화이트 #f7f7f7 + Rausch 핑크 #FF385C,
                12px 라운드 + 1px solid #ebebeb + soft shadow,
                알약(pill) 배지 형태 가용 표시.
   ========================================================= */
:root {
  --abnb-bg:        #f7f7f7;
  --abnb-canvas:    #ffffff;
  --abnb-ink:       #484848;
  --abnb-ink-2:     #717171;
  --abnb-line:      #ebebeb;
  --abnb-line-soft: #f0f0f0;
  --abnb-pink:      #FF385C;
  --abnb-pink-2:    #E31C5F;
  --abnb-ok:        #008A05;
  --abnb-ok-bg:     #e8f6e8;
  --abnb-busy:      #C13515;
  --abnb-busy-bg:   #fbeae5;
  --abnb-shadow:    0 6px 16px rgba(0,0,0,0.12);
  --abnb-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --abnb-radius:    12px;
  --abnb-radius-sm: 8px;
  --abnb-pill:      30px;
}

.abnb-gate {
  min-height: 100vh;
  background: var(--abnb-bg);
  color: var(--abnb-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 56px 40px 40px;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── 브랜드 헤더 ─── */
.abnb-gate__brand {
  text-align: center;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.abnb-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF385C 0%, #E31C5F 100%);
  position: relative;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(255,56,92,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.abnb-brand-mark span {
  display: block;
  width: 6px;
  background: #ffffff;
  border-radius: 3px;
}
.abnb-brand-mark span:nth-child(1) { height: 18px; margin-right: 3px; }
.abnb-brand-mark span:nth-child(2) { height: 24px; }
.abnb-gate__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #484848;
  margin: 0;
}
.abnb-gate__sub {
  font-size: 14px;
  color: #717171;
  margin: 0;
  font-weight: 500;
}

/* ─── 메인 그리드 ─── */
.abnb-gate__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  width: 100%;
  max-width: 1150px;
  align-items: flex-start;
}

/* ─── 카드 베이스 ─── */
.abnb-card {
  background: var(--abnb-canvas);
  border: 1px solid var(--abnb-line);
  border-radius: var(--abnb-radius);
  padding: 32px;
  box-shadow: var(--abnb-shadow);
  box-sizing: border-box;
}
.abnb-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--abnb-line-soft);
}
.abnb-card__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--abnb-ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.abnb-card__title--solo {
  font-size: 22px;
  margin: 0 0 24px;
}
.abnb-card__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--abnb-pink);
}
.abnb-card__badge.is-fetching { opacity: 0.45; }

/* 펄스 도트 (LIVE 표시) */
.abnb-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--abnb-ok);
  box-shadow: 0 0 0 0 rgba(0,138,5,0.6);
  animation: abnb-pulse 1.6s ease-out infinite;
}
@keyframes abnb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,138,5,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(0,138,5,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,138,5,0); }
}

/* ─── 회의실 그리드 ─── */
.abnb-rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.abnb-room {
  border: 1px solid var(--abnb-line);
  border-radius: var(--abnb-radius);
  padding: 20px 16px;
  background: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.abnb-room--ok:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.abnb-room--busy { opacity: 0.72; background: #fafafa; }
.abnb-room--skeleton {
  background: linear-gradient(90deg, #f3f3f3 0%, #fafafa 50%, #f3f3f3 100%);
  background-size: 200% 100%;
  animation: abnb-skel 1.4s ease-in-out infinite;
  min-height: 96px;
  border-color: transparent;
}
@keyframes abnb-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.abnb-room--empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--abnb-ink-2);
  font-size: 13px;
  padding: 24px;
  border-color: transparent;
}
.abnb-room__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--abnb-ink);
  letter-spacing: -0.2px;
}
.abnb-room__meta {
  font-size: 12px;
  color: var(--abnb-ink-2);
}
.abnb-room__chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--abnb-pill);
  color: #fff;
}
.abnb-room__chip--ok   { background: var(--abnb-pink); }
.abnb-room__chip--busy { background: #8a8a8a; }
.abnb-room__sub {
  font-size: 11px;
  color: var(--abnb-ink-2);
}

/* ─── 카드 푸터 ─── */
.abnb-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--abnb-line-soft);
  font-size: 12px;
  color: var(--abnb-ink-2);
}
.abnb-card__foot-text { font-weight: 600; }
.abnb-card__foot-note { letter-spacing: 0.06em; text-transform: uppercase; font-size: 10px; }

/* ─── 로그인 폼 ─── */
.abnb-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.abnb-field { display: flex; flex-direction: column; gap: 8px; }
.abnb-field__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--abnb-ink);
  letter-spacing: 0.02em;
}
.abnb-field input {
  width: 100%;
  height: 44px;
  background: #ffffff;
  border: 1px solid var(--abnb-line);
  border-radius: var(--abnb-radius-sm);
  padding: 0 14px;
  font-size: 14px;
  color: var(--abnb-ink);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.abnb-field input::placeholder { color: #b0b0b0; }
.abnb-field input:focus {
  outline: none;
  border-color: var(--abnb-pink);
  box-shadow: 0 0 0 2px rgba(255,56,92,0.16);
}
.abnb-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--abnb-radius-sm);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  margin-top: 8px;
}
.abnb-btn:active { transform: translateY(1px); }
.abnb-btn--gradient {
  color: #ffffff;
  background: linear-gradient(90deg, #E31C5F 0%, #FF385C 100%);
  box-shadow: 0 4px 12px rgba(255,56,92,0.22);
}
.abnb-btn--gradient:hover { filter: brightness(1.05); }
.abnb-btn--gradient:disabled {
  background: #d4d4d4;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}
.abnb-form__error {
  color: var(--abnb-busy);
  font-size: 13px;
  min-height: 18px;
  font-weight: 500;
}

/* ─── 데모 계정 힌트 ─── */
.abnb-hint {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--abnb-line-soft);
  border-radius: var(--abnb-radius-sm);
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.abnb-hint__title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--abnb-ink-2);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.abnb-hint__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--abnb-ink);
}
.abnb-hint__row code {
  font-family: 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--abnb-ink-2);
}
.abnb-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--abnb-pill);
  color: #fff;
}
.abnb-tag--wylie  { background: #703e96; }
.abnb-tag--lush   { background: var(--abnb-pink); }
.abnb-tag--member { background: #8a8a8a; }

/* ─── 푸터 ─── */
.abnb-gate__footer {
  margin-top: 40px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--abnb-ink-2);
  text-transform: uppercase;
}

/* ─── 모바일 (≤768px) ─── */
@media (max-width: 768px) {
  .abnb-gate { padding: 32px 16px 32px; }
  .abnb-gate__brand { margin-bottom: 24px; }
  .abnb-gate__title { font-size: 22px; }
  .abnb-gate__sub { font-size: 12px; }
  .abnb-gate__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .abnb-card { padding: 24px 20px; }
  .abnb-rooms-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .abnb-room { padding: 14px 10px; }
  .abnb-room__name { font-size: 13px; }
}

/* =====================================================
   APP SHELL - Top Nav (Apple Global Nav style)
   ===================================================== */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--parchment);
}
.global-nav {
  height: 48px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 100;
}
.global-nav-inner {
  width: 100%;
  max-width: 1280px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 32px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.1px;
}
.nav-brand .brand-bars span { background: #fff; }
.nav-brand .brand-bars span:nth-child(3) { background: var(--primary-on-dark); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.nav-link {
  color: rgba(255,255,255,0.88);
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  padding: 6px 16px;
  border-radius: var(--r-xs);
  transition: color 0.18s ease, background 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.nav-link.is-active { color: #fff; background: rgba(255,255,255,0.1); }
.nav-link i { font-size: 12px; opacity: 0.9; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
}

/* =====================================================
   SUB-NAV (Frosted Parchment)
   ===================================================== */
.sub-nav {
  height: 52px;
  background: rgba(245, 245, 247, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--divider-soft);
  display: flex;
  align-items: center;
  position: sticky;
  top: 48px;
  z-index: 90;
}
.sub-nav-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.sub-nav-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.231px;
  color: var(--ink);
}
.sub-nav-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =====================================================
   PAGE WRAP
   ===================================================== */
.page-wrap {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-lg);
}
.page-wrap.is-flush { padding-left: 0; padding-right: 0; max-width: none; }

.page-header {
  margin-bottom: var(--space-xl);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
}
.page-title-block h1 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--ink);
}
.page-title-block p {
  margin: 8px 0 0;
  color: var(--ink-48);
  font-size: 17px;
  letter-spacing: -0.374px;
}

/* =====================================================
   HOME DASHBOARD
   ===================================================== */
.home-hero {
  background: var(--canvas);
  border-radius: var(--r-lg);
  padding: 48px;
  margin-bottom: var(--space-xl);
  display: flex;
  align-items: center;
  gap: 24px;
}
.home-hero-icon {
  font-size: 56px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffe0e8, #ffd0d8);
  border-radius: var(--r-md);
}
.home-hero-text h2 {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.3px;
}
.home-hero-text p { margin: 0; color: var(--ink-48); font-size: 17px; }

.upcoming-section {
  background: var(--canvas);
  border-radius: var(--r-lg);
  padding: 32px 40px;
}
.upcoming-section h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.231px;
  margin: 0 0 24px;
  color: var(--ink);
}
.upcoming-empty {
  padding: 48px;
  text-align: center;
  color: var(--ink-48);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
}
.upcoming-day {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--divider-soft);
}
.upcoming-day:first-of-type { border-top: 0; padding-top: 0; }
.upcoming-day-label .day-num {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.upcoming-day-label .day-text {
  font-size: 13px;
  color: var(--ink-48);
  margin-top: 4px;
  letter-spacing: -0.2px;
}
.upcoming-items {
  display: flex;
  flex-direction: column;
}
.upcoming-row {
  display: grid;
  grid-template-columns: 130px 1fr 200px 32px;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  font-size: 15px;
  color: var(--ink);
}
.upcoming-row .time {
  color: var(--ink-48);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}
.upcoming-row .title { font-weight: 400; }
.upcoming-row .space-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-80);
  letter-spacing: -0.2px;
}
.space-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.1px;
}

/* =====================================================
   TIMELINE (Drag & Drop Reservation Grid)
   ===================================================== */
.timeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--canvas);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
}
.timeline-date-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.timeline-date-nav .date-display {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
  min-width: 200px;
}
.timeline-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-48);
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-square { width: 10px; height: 10px; border-radius: 2px; }

.timeline-container {
  background: var(--canvas);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--divider-soft);
  position: relative;   /* 스크롤 페이드 오버레이 기준 */
}
/* 가로 스크롤 어포던스 — 넘칠 때만 좌/우 페이드로 '옆에 더 있음'을 표시.
   z-index 6: 이벤트(2~3) 위, 시간축(7)·코너(8) 아래 → 시간 라벨은 또렷하게 유지 */
.timeline-container::before,
.timeline-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.timeline-container::before { left: 0;  background: linear-gradient(to right, var(--canvas), transparent); }
.timeline-container::after  { right: 0; background: linear-gradient(to left,  var(--canvas), transparent); }
.timeline-container.can-scroll-left::before { opacity: 1; }
.timeline-container.can-scroll-right::after { opacity: 1; }
/* 스크롤 가능할 때 헤더(룸 이름 줄)를 마우스로 잡아끌 수 있음을 grab 커서로 표시 */
.timeline-container.is-scrollable .timeline-header-cell { cursor: grab; }
.timeline-scroll.dragging,
.timeline-scroll.dragging .timeline-header-cell { cursor: grabbing; user-select: none; }

/* 좌우 스크롤 화살표 — 넘칠 때만(is-visible) 노출, 데스크톱 전용(모바일은 스와이프) */
.timeline-scroll-nav { display: none; gap: 6px; align-items: center; margin-left: 12px; }
.timeline-scroll-nav.is-visible { display: inline-flex; }
.ts-arrow {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); background: #fff; color: var(--ink);
  border-radius: 8px; cursor: pointer; font-size: 13px;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.ts-arrow:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.ts-arrow:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 1023px) {
  .timeline-scroll-nav { display: none !important; }   /* 모바일/태블릿은 터치 스와이프 */
}
.timeline-grid {
  display: grid;
  /* V6-1: grid-template-columns는 buildTimelineGrid()에서 spaces 개수에 따라 동적으로 설정.
     아래 fallback은 spaces 데이터가 비었을 때만 적용. */
  grid-template-columns: 56px repeat(auto-fit, minmax(130px, 1fr));
  position: relative;
}
.timeline-header-cell {
  padding: 14px 12px;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  border-left: 1px solid var(--divider-soft);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* 좌상단 코너(시간축 헤더) — 세로/가로 스크롤 모두에서 고정 */
.timeline-header-cell:first-child { border-left: 0; left: 0; z-index: 8; }
.timeline-header-cell .space-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.224px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.timeline-header-cell .space-meta {
  font-size: 11px;
  color: var(--ink-48);
  margin-top: 2px;
  letter-spacing: -0.1px;
}

.timeline-time-col {
  background: var(--canvas);
  border-right: 1px solid var(--hairline);
  /* 룸을 가로로 스와이프해도 시간축은 왼쪽에 항상 고정 */
  position: sticky;
  left: 0;
  z-index: 7;
}
/* 모바일: 코너(시간축 헤더)는 룸 헤더용 min-width:88 이 아니라 시간 컬럼(50px)에 폭을 맞춰
   스와이프 시 첫 룸 헤더를 가리지 않도록 함 */
@media (max-width: 768px) {
  .app-shell .timeline-header-cell:first-child {
    min-width: 0 !important;
    width: 50px !important;
  }
}
.timeline-time-cell {
  height: 60px;  /* V48: .timeline-cell 과 동일 (1시간 = 60px) */
  position: relative;
  font-variant-numeric: tabular-nums;
}
/* V48: 라벨 세로 중앙을 셀 상단(해당 시각의 그리드 선)에 정확히 고정 — 폰트 높이 무관 */
.timeline-time-cell .tc-label {
  position: absolute;
  top: 0;               /* 셀 상단 = 그 시각의 가로 시간선 위치 */
  right: 8px;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  color: var(--ink-48);
  white-space: nowrap;
}

.timeline-space-col {
  position: relative;
  border-left: 1px solid var(--divider-soft);
  background: var(--canvas);
}
.timeline-cell {
  height: 60px;  /* V48: 1시간 = 60px (JS HOUR_PX와 동일해야 함) */
  /* V48: 시간선을 셀 '상단'으로 이동 → 좌측 시간 라벨(각 시간 top)과 정확히 정렬 */
  border-top: 1px solid var(--divider-soft);
  position: relative;
  /* V48: 각 1시간(60px)을 10분 단위 6줄로 분할하는 옅은 보조선 (10px 간격) */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--divider-soft) 0,
    var(--divider-soft) 1px,
    transparent 1px,
    transparent calc(60px / 6)
  );
}
.timeline-cell.is-hour-mark { border-top-color: var(--hairline); }
/* hover는 background-color만 바꿔 10분 보조선(background-image)을 유지 */
.timeline-cell:hover { background-color: rgba(0, 102, 204, 0.03); cursor: crosshair; }
/* V48: 마지막 시간(23:00) 아래 24:00 마감선 */
.timeline-space-col { border-bottom: 1px solid var(--hairline); }

.timeline-event {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  z-index: 2;
  letter-spacing: -0.1px;
}
.timeline-event:hover {
  transform: translateY(-1px);
  box-shadow: rgba(0, 0, 0, 0.12) 0 4px 12px;
  z-index: 3;
}
/* V48: 내가 옮길 수 있는 일정은 이동 커서로 힌트 (본문 영역) */
.timeline-event.is-movable { cursor: grab; }
/* V48: 드래그 이동 중 — 커서 위로 들어올린 느낌 + 최상단 표시 */
.timeline-event.is-moving {
  cursor: grabbing;
  opacity: 0.9;
  z-index: 20 !important;
  box-shadow: rgba(0, 0, 0, 0.28) 0 10px 26px;
  transform: none;
}
.timeline-event .ev-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.timeline-event .ev-time { opacity: 0.85; font-size: 11px; margin-top: 2px; }
.timeline-event .ev-owner-avatar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  border: 1.5px solid rgba(255,255,255,0.6);
}

.timeline-drag-preview {
  position: absolute;
  left: 4px;
  right: 4px;
  background: rgba(0, 102, 204, 0.18);
  border: 2px dashed var(--primary);
  border-radius: var(--r-sm);
  pointer-events: none;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
}

.timeline-now-line {
  position: absolute;
  left: 56px;
  right: 0;
  height: 1.5px;
  background: #ff3b30;
  z-index: 6;
  pointer-events: none;
}
.timeline-now-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  background: #ff3b30;
  border-radius: 50%;
}

/* =====================================================
   MODAL
   ===================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.modal {
  background: var(--canvas);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow: auto;
  box-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
}
.modal-header-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.modal-body { padding: 0 24px 24px; }
.modal-section { margin-bottom: 20px; }
.modal-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-48);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--divider-soft);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: sticky;
  bottom: 0;
  background: var(--canvas);
}

.input-row { display: flex; gap: 8px; }
.input-row > * { flex: 1; }

/* V48: 시간 콤보 커스텀 드롭다운 — 값이 채워져 있어도 항상 6개 제안 노출 */
.time-combo { position: relative; }
.time-combo-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--canvas, #fff);
  border: 1px solid var(--divider-soft, #e0e0e0);
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 8px 24px;
  z-index: 1200;
  max-height: 232px;
  overflow-y: auto;
  padding: 4px;
}
.time-combo-menu.is-open { display: block; }
.time-combo-opt {
  padding: 9px 12px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.time-combo-opt:hover { background: var(--accent-soft-2, rgba(0, 102, 204, 0.08)); }
.time-combo-opt.is-sel { font-weight: 600; color: var(--primary, #0066cc); }

.title-input-large {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 0;
  letter-spacing: -0.3px;
}
.title-input-large:focus { outline: none; }
.title-input-large::placeholder { color: #c0c0c4; }

.repeat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--parchment);
  border: none;
  font-size: 13px;
  color: var(--ink-80);
  cursor: pointer;
  transition: background 0.18s ease;
}
.repeat-chip:hover { background: #ebebee; }
.repeat-chip.is-active { background: var(--ink); color: #fff; }

/* Repeat sub-panel */
.repeat-panel {
  background: var(--parchment);
  border-radius: var(--r-md);
  padding: 16px;
  margin-top: 8px;
}
.repeat-freq-tabs {
  display: flex;
  gap: 4px;
  background: var(--canvas);
  border-radius: var(--r-sm);
  padding: 3px;
  margin-bottom: 12px;
}
.repeat-freq-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: var(--r-xs);
  font-size: 13px;
  color: var(--ink-80);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.repeat-freq-tab.is-active {
  background: var(--ink);
  color: #fff;
}

/* =====================================================
   INSIGHTS - HEATMAP
   ===================================================== */
.insight-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: var(--space-xl);
}
.stat-card {
  background: var(--canvas);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-card .stat-label {
  font-size: 14px;
  color: var(--ink-48);
  letter-spacing: -0.224px;
}
.stat-card .stat-value {
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-trend {
  font-size: 12px;
  color: var(--ink-48);
}

/* V31 §2 — .insight-popular / .popular-* 클래스 완전 삭제 (인기 공간 섹션 제거됨) */

.insight-heatmap {
  background: var(--canvas);
  border-radius: var(--r-lg);
  padding: 32px;
}
.insight-heatmap h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0 0 24px;
}
.heatmap-grid {
  display: grid;
  grid-template-columns: 36px repeat(24, 1fr);
  gap: 2px;
  font-size: 10px;
  color: var(--ink-48);
}
.heatmap-header {
  text-align: center;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.heatmap-row-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 12px;
  color: var(--ink-48);
}
.heatmap-cell {
  height: 28px;
  border-radius: 3px;
  background: var(--parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ink-80);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.heatmap-cell:hover { transform: scale(1.1); }

/* V14 §UI-2: 요일·시간대별 예약 밀집도 — 모바일에서 오른쪽 끝(23시)이 잘리는 문제 해결
   - 카드 padding 축소로 사용 가능 너비 확보
   - 요일 라벨 폭 축소(36px → 22px) + 셀 간 gap 축소(2px → 1px)
   - 셀 폰트/높이 축소
   - 그래도 화면이 좁으면 가로 스크롤 허용 (overflow-x:auto + min-width)
   - 헤더 시간 라벨도 더 컴팩트하게 */
@media (max-width: 768px) {
  .insight-heatmap {
    padding: 16px 12px;
    overflow-x: auto;          /* 안전망: 더 좁은 화면에서 가로 스크롤 */
    -webkit-overflow-scrolling: touch;
  }
  .insight-heatmap h3 {
    font-size: 16px;
    margin: 0 0 12px;
  }
  .heatmap-grid {
    grid-template-columns: 22px repeat(24, minmax(13px, 1fr));
    gap: 1px;
    min-width: 340px;          /* 24열 × 13px + 라벨 — 이하로는 스크롤 */
  }
  .heatmap-header {
    font-size: 9px;
    padding: 2px 0;
  }
  .heatmap-row-label {
    font-size: 11px;
    padding-right: 4px;
  }
  .heatmap-cell {
    height: 22px;
    font-size: 9px;
    border-radius: 2px;
  }
}

/* =====================================================
   ADMIN - MEMBER TABLE
   ===================================================== */
.admin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
}
.admin-side-nav {
  background: var(--canvas);
  border-radius: var(--r-lg);
  padding: 16px;
  height: fit-content;
  position: sticky;
  top: 116px;
}
.admin-side-nav .side-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-48);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 8px 12px 12px;
}
.admin-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-80);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.admin-side-link:hover { background: var(--parchment); color: var(--ink); }
.admin-side-link.is-active { background: var(--ink); color: #fff; }
.admin-side-link i { width: 18px; text-align: center; opacity: 0.85; }

.admin-content {
  background: var(--canvas);
  border-radius: var(--r-lg);
  padding: 32px;
}

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 24px;
}
.tab-link {
  background: transparent;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-48);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.tab-link.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.table-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.table-search input {
  width: 280px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  font-size: 14px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-48);
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider-soft);
  font-size: 14px;
  color: var(--ink);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--parchment); }
.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-cell .avatar { width: 32px; height: 32px; font-size: 12px; }
.user-cell .user-info .user-name { font-weight: 600; font-size: 14px; }
.user-cell .user-info .user-email { font-size: 12px; color: var(--ink-48); }

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
}
.status-badge.s-active { background: rgba(16, 185, 129, 0.1); color: #047857; }
.status-badge.s-admin { background: rgba(0, 102, 204, 0.1); color: var(--primary); }
.status-badge.s-member { background: var(--hairline); color: var(--ink-80); }

/* =====================================================
   GENERAL SETTINGS
   ===================================================== */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.summary-card {
  background: var(--canvas);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.summary-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--parchment);
  color: var(--primary);
  font-size: 20px;
}
.summary-card-text .label { font-size: 13px; color: var(--ink-48); }
.summary-card-text .value { font-size: 28px; font-weight: 600; letter-spacing: -0.4px; }

/* =====================================================
   TOAST
   ===================================================== */
.toast-container {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: rgba(29, 29, 31, 0.94);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-size: 14px;
  letter-spacing: -0.224px;
  pointer-events: auto;
  animation: toast-in 0.25s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: rgba(0, 0, 0, 0.18) 0 8px 24px;
}
.toast.is-error { background: rgba(211, 51, 51, 0.96); }
.toast.is-success { background: rgba(16, 185, 129, 0.96); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   APP LOADING
   ===================================================== */
.app-loading {
  position: fixed;
  inset: 0;
  background: var(--parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--hairline);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
  /* V6-1: timeline-grid의 컬럼 정의는 JS에서 spaces 개수에 따라 동적으로 설정되므로 여기서는 건드리지 않음 */
  .insight-stats-grid, .summary-cards { grid-template-columns: 1fr; }
  /* V31 §2 — .popular-grid 미디어쿼리 제거 (인기 공간 섹션 삭제됨) */
  .admin-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .page-wrap { padding: var(--space-lg) var(--space-md); }
  .upcoming-row { grid-template-columns: 90px 1fr; gap: 8px; }
  .upcoming-row .space-pill, .upcoming-row .avatar { display: none; }
  .login-card { padding: 32px 24px; }
  .login-title { font-size: 32px; }
  /* V6-2: 데스크톱 가로 nav 숨기고 햄버거 노출 */
  .nav-links { display: none; }
  .nav-hamburger { display: inline-flex !important; }
}

/* Scrollable wrapper for timeline */
.timeline-scroll {
  overflow-x: auto;
  overflow-y: visible;
}

/* =====================================================
   V4 — TIMELINE VIEW SWITCH (Day / Month / Mine)
   ===================================================== */
.timeline-view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--parchment);
  border-radius: 10px;
  margin-right: 12px;
}
.view-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-48);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;   /* 좁은 폭에서 '내 일정' 줄바꿈 방지 */
}
.view-tab:hover { color: var(--ink-80); }
.view-tab.is-active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.view-tab.is-active i { color: #ffffff; }
.view-tab i { font-size: 12px; }

.mine-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-48);
  cursor: pointer;
  transition: all 0.15s;
}
.mine-tab:hover { border-color: var(--primary); color: var(--primary); }
.mine-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

/* 활성 탭(일간/월간/내 일정) — Electric Blue 강제.
   테마의 `.app-shell button:not(...)`(0,4,1) 및 `:hover`(0,5,1) !important 규칙보다
   특이도를 높여야(컨테이너 3개 명시 → 0,5,0 / :hover 0,6,0) 활성색이 유지된다.
   호버 시에도 파랑 유지. */
.app-shell .timeline-toolbar .timeline-view-switch .view-tab.is-active,
.app-shell .timeline-toolbar .timeline-view-switch .view-tab.is-active:hover {
  background: #3E6AE1 !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #3E6AE1 !important;
  box-shadow: none !important;
}
.app-shell .timeline-toolbar .timeline-view-switch .view-tab.is-active i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.date-jump-input {
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  background: #ffffff;
  font-family: inherit;
  margin-left: 8px;
}
.date-jump-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}

.me-time {
  display: inline-block;
  padding: 0 8px;
  color: var(--ink-48);
  font-size: 13px;
}

/* =====================================================
   V4 — MONTH VIEW (캘린더 그리드)
   ===================================================== */
.month-grid-header {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--parchment);
  border-bottom: 1px solid var(--hairline);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.month-dow {
  padding: 12px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-48);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.month-dow.is-sun { color: #ff3b30; }
.month-dow.is-sat { color: var(--primary); }

.month-grid-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(110px, auto);
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.month-cell {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  min-height: 110px;
  min-width: 0;   /* 그리드 셀이 콘텐츠(긴 일정 제목)에 밀려 커지지 않도록 */
  background: #ffffff;
  transition: background 0.15s;
  cursor: pointer;
}
.month-cell:hover { background: #fafafa; }
.month-cell:nth-child(7n) { border-right: none; }
.month-cell.is-other-month { background: #fafafa; color: var(--ink-48); }
.month-cell.is-other-month .month-cell-day { opacity: 0.4; }
.month-cell.is-today { background: rgba(0, 102, 204, 0.04); }
.month-cell.is-today .month-cell-day {
  background: var(--primary);
  color: #ffffff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.month-cell-day {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  align-self: flex-start;
}
.month-cell.is-sun .month-cell-day { color: #ff3b30; }
.month-cell.is-sat .month-cell-day { color: var(--primary); }

.month-cell-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}
.month-event {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #ffffff;
  background: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s;
  min-width: 0;   /* flex 자식 제목이 셀을 밀어내지 않도록 */
}
/* 제목은 남는 폭에서 말줄임 처리 */
.month-event .me-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-event .me-time { flex: 0 0 auto; }
.month-event:hover { opacity: 0.85; }
.month-event .me-time {
  color: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  font-weight: 600;
  padding: 0;
}
.month-more {
  font-size: 11px;
  color: var(--ink-48);
  padding: 2px 6px;
  cursor: pointer;
}
.month-more:hover { color: var(--primary); }

/* 모바일: 월간 셀이 좁아(7열 ≈ 47px) 일정 텍스트가 잘리므로 색점(dot)으로 표시.
   날짜를 탭하면 일간 뷰로 넘어가 상세를 본다(셀 onclick 이미 연결됨). */
@media (max-width: 640px) {
  .month-cell {
    min-height: 66px;
    padding: 4px 3px;
  }
  .month-cell-events {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
  }
  .month-event {
    width: 7px;
    height: 7px;
    min-width: 0;
    padding: 0 !important;
    gap: 0;
    border-radius: 50% !important;
    overflow: visible;
  }
  /* tenant 색상 규칙(.month-event.tenant-* {border-radius:4px !important}, 특이도 0,2,0)을
     이기도록 특이도 상향(0,3,0) → 완전한 원 */
  .month-grid-body .month-cell .month-event { border-radius: 50% !important; }
  .month-event .me-time,
  .month-event .me-title { display: none; }   /* 점만 남기고 텍스트 숨김 */
  .month-more {
    width: 100%;
    text-align: center;
    font-size: 9px;
    padding: 0;
    margin-top: 1px;
  }
  .month-more .mm-label { display: none; }     /* 모바일은 "+N"만 */
}

/* =====================================================
   V4 — EVENT RESIZE HANDLE / MINE 강조
   ===================================================== */
.event-block { position: relative; }
.ev-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.18));
  border-radius: 0 0 6px 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.event-block:hover .ev-resize-handle { opacity: 1; }

.event-block.is-mine {
  box-shadow: 0 0 0 2px var(--primary), 0 2px 8px rgba(0, 102, 204, 0.18);
  z-index: 5;
}
.event-block.is-clickable { cursor: pointer; }

/* =====================================================
   V4 — ADMIN ORG (부서/직책 관리 split view)
   ===================================================== */
.split-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
@media (max-width: 900px) {
  .split-view { grid-template-columns: 1fr; }
}

.org-panel {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.org-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--parchment);
}
.org-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.org-panel-title i { color: var(--primary); }
.org-panel-count {
  font-size: 12px;
  color: var(--ink-48);
  background: #ffffff;
  padding: 3px 10px;
  border-radius: 999px;
}

.org-input-row {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}
.org-input-row input {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
}
.org-input-row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
.org-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.org-add-btn:hover { background: var(--primary-focus); }

.org-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 540px;
  overflow-y: auto;
}
.org-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hairline);
  transition: background 0.15s;
}
.org-item:last-child { border-bottom: none; }
.org-item:hover { background: var(--parchment); }
.org-item-name {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  flex: 1;
}
.org-item-name input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.org-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.org-item:hover .org-item-actions { opacity: 1; }
.org-item-actions button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-48);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.org-item-actions button:hover { background: var(--parchment); color: var(--ink); border-color: var(--hairline); }
.org-item-actions button.is-danger:hover { color: #ff3b30; border-color: #ff3b30; }
.org-item-actions button.is-primary:hover { color: var(--primary); border-color: var(--primary); }

.org-empty {
  padding: 32px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-48);
}

/* =====================================================
   V4 — INSIGHTS TABS / FILTER BAR / METRIC SWITCH
   ===================================================== */
.insight-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--parchment);
  border-radius: 12px;
  margin-bottom: var(--space-md);
  width: fit-content;
}
.insight-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: transparent;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-48);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.insight-tab:hover { color: var(--ink-80); }
.insight-tab.is-active {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.insight-tab i { font-size: 12px; color: var(--primary); }

.insight-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  margin-bottom: var(--space-md);
}
.insight-range-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--parchment);
  border-radius: 9px;
}
.range-chip {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-48);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.range-chip:hover { color: var(--ink-80); }
.range-chip.is-active {
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.insight-custom-range {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.insight-tab-body { min-height: 360px; }

.insight-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 80px 20px;
  color: var(--ink-48);
  font-size: 14px;
}
.insight-loading i { color: var(--primary); font-size: 18px; }

.insight-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.insight-stats-head h3 { margin: 0; font-size: 16px; font-weight: 600; }

.metric-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--parchment);
  border-radius: 9px;
}
.metric-btn {
  padding: 7px 16px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-48);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.metric-btn:hover { color: var(--ink-80); }
.metric-btn.is-active {
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* =====================================================
   V4 — CHART GRID
   ===================================================== */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
@media (max-width: 900px) {
  .chart-grid { grid-template-columns: 1fr; }
}
.chart-card {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 20px;
}
.chart-card h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.chart-canvas-wrap {
  position: relative;
  height: 240px;
}

/* =====================================================
   V4 — INSIGHTS HISTORY TABLE
   ===================================================== */
.insight-history-head {
  margin-bottom: var(--space-sm);
}
.insight-history-head h3 { margin: 0; font-size: 16px; font-weight: 600; }

.admin-card {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}
.history-table { width: 100%; }
.history-table th,
.history-table td {
  padding: 12px 16px;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}
.history-table th {
  background: var(--parchment);
  font-weight: 600;
  color: var(--ink-80);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover td { background: var(--parchment); }

.space-chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}

.avatar-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.status-pill.is-confirmed { background: rgba(52, 199, 89, 0.15); color: #1a8434; }
.status-pill.is-cancelled { background: rgba(255, 59, 48, 0.15); color: #c41e1e; }

/* =====================================================
   V4 — SPACE BAR LIST (Insights 통계 탭)
   ===================================================== */
.insight-by-space {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 20px;
}
.insight-by-space h3 {
  margin: 0 0 16px 0;
  font-size: 15px;
  font-weight: 600;
}
.space-bar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.space-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 100px;
  align-items: center;
  gap: 12px;
}
.space-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
}
.space-bar-track {
  height: 8px;
  background: var(--parchment);
  border-radius: 4px;
  overflow: hidden;
}
.space-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s;
}
.space-bar-value {
  font-size: 12px;
  color: var(--ink-48);
  font-weight: 600;
  text-align: right;
}

@media (max-width: 700px) {
  .space-bar-row { grid-template-columns: 110px 1fr 70px; }
}

/* =====================================================
   V5 — REQ-STYL-01: 모바일 반응형 보강
   ===================================================== */

/* V15 §2 — PC 가로 스크롤 영구 제거.
   기존: 항상 overflow-x:auto + min-width 강제 → 9~10개 공간이면 1440 모니터에서도 잘림.
   변경: 데스크톱(>=1024px)에서는 가로 스크롤 자체를 차단하고 100% Full-Width 비례 분할.
        모바일에서만 가로 스크롤 허용. */
.timeline-scroll {
  overflow-x: auto;         /* 룸이 많아 넘칠 때만 가로 스와이프(적으면 grid가 100%라 스크롤 없음) */
  overflow-y: visible;
  width: 100%;
}
.timeline-scroll .timeline-grid {
  width: 100%;
}

@media (max-width: 1023px) {
  .timeline-scroll {
    overflow-x: auto;       /* 모바일/태블릿: 가로 스크롤 복원 */
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   V31 §4 — PC 가로 스크롤 최종 안전망
   데스크톱(>=1024px)에서 어떤 컨테이너도 가로 스크롤 띄우지 않도록 광역 차단.
   모바일에서는 기존 @media (max-width:1023px) 룰이 우선 적용됨.
   ========================================================= */
@media (min-width: 1024px) {
  /* .timeline-scroll 은 목록에서 제외 — 룸이 많으면 가로 스와이프가 필요하므로 (위 기본 규칙 overflow-x:auto 유지) */
  .timeline-viewport-container,
  .space-list-wrapper,
  .grid-scroll-area,
  .app-shell .home-hero,
  .app-shell .upcoming-section,
  .app-shell .insight-card,
  .app-shell .insight-heatmap,
  .app-shell .admin-content-card,
  .app-shell .management-content-card,
  .app-shell .month-view-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* timeline-grid: 룸이 적으면 100% full-width, 많으면 JS inline min-width(px)만큼 넓어져 스크롤.
     (min-width:0 강제를 제거해 inline min-width 가 적용되도록 함) */
  .timeline-scroll .timeline-grid,
  .timeline-viewport-container .timeline-grid,
  .timeline-container .timeline-grid {
    width: 100% !important;
  }
}

/* 모달 모바일 폭 */
@media (max-width: 768px) {
  .modal-backdrop .modal,
  .modal-overlay .modal-card {
    width: 92% !important;
    max-width: 92% !important;
    margin: 0 auto !important;
    max-height: 88vh;
    overflow-y: auto;
  }
  .modal-overlay .force-pw-modal {
    width: 92% !important;
    max-width: 480px !important;
  }
  .insight-filterbar { padding: 12px; gap: 8px; }
  .insight-range-group { flex-wrap: wrap; }
  .range-chip { padding: 5px 10px; font-size: 12px; }
  .insight-tabs { width: 100%; overflow-x: auto; }
  .insight-tab { padding: 8px 14px; font-size: 12px; }
}

/* =====================================================
   V5 — REQ-SEC-01: 강제 비밀번호 변경 모달
   ===================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}
.modal-overlay.is-force {
  backdrop-filter: blur(6px);
}
.modal-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.force-pw-modal .modal-head {
  padding: 32px 28px 20px;
  text-align: center;
  border-bottom: 1px solid var(--hairline);
}
.force-pw-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 102, 204, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.force-pw-icon i {
  font-size: 28px;
  color: var(--primary);
}
.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px 0;
}
.modal-sub {
  font-size: 13px;
  color: var(--ink-48);
  margin: 0;
  line-height: 1.5;
}
.modal-card .modal-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-card .field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-card .field-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-80);
}
.modal-input {
  padding: 11px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}
.field-err {
  background: rgba(255, 59, 48, 0.1);
  color: #c41e1e;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.modal-foot {
  padding: 16px 28px 24px;
  border-top: 1px solid var(--hairline);
}
.modal-foot .btn-primary {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
}

/* =====================================================
   V6 - 햄버거 메뉴 · 모바일 드로어 · 필터 수직 재배치 · 호버/Ripple
   ===================================================== */

/* V6-2: 햄버거 버튼 (데스크톱에서는 숨김, 모바일에서만 노출) */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
.nav-hamburger .hb-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,0.92);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-hamburger:hover .hb-bar { background: #fff; }

/* V6-2: 모바일 드로어 오버레이 */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1000;
  transition: background 0.22s ease;
  display: flex;
  justify-content: flex-end;
}
.mobile-nav-overlay.is-open { background: rgba(0, 0, 0, 0.45); }
.mobile-nav-overlay.is-closing { background: rgba(0, 0, 0, 0); }

.mobile-nav-drawer {
  width: min(86vw, 320px);
  height: 100vh;
  background: #ffffff;
  box-shadow: -8px 0 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-nav-overlay.is-open .mobile-nav-drawer { transform: translateX(0); }
.mobile-nav-overlay.is-closing .mobile-nav-drawer { transform: translateX(100%); }

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}
.mobile-nav-brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.mobile-nav-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--ink-80);
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-close:hover { background: var(--parchment); }

.mobile-nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--parchment);
}
.mobile-nav-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 12px;
  gap: 2px;
  overflow-y: auto;
}
.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.mobile-nav-item:hover { background: var(--parchment); }
.mobile-nav-item.is-active {
  background: rgba(0, 102, 204, 0.08);
  color: var(--primary);
}
.mobile-nav-item i:first-child {
  font-size: 16px;
  width: 24px;
  text-align: center;
}
.mobile-nav-foot {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--hairline);
}
.mobile-nav-logout {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink-80);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mobile-nav-logout:hover {
  background: var(--parchment);
  color: var(--ink);
}

/* V6-2: 타임라인 툴바 2단 분리 (날짜 줄 / 필터 줄) — 기존 line 574 정의 덮어쓰기 */
.timeline-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  /* 기존 정의의 시각 속성 유지 */
  padding: 16px 24px;
  background: var(--canvas);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  justify-content: flex-start;
}
.timeline-toolbar .tt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.timeline-toolbar .tt-row-date { justify-content: space-between; }
.timeline-toolbar .tt-row-filters {
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid var(--divider-soft);
}

@media (max-width: 768px) {
  .timeline-toolbar { padding: 14px 16px; }
  .timeline-toolbar .tt-row { width: 100%; }
  .timeline-toolbar .tt-row-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .timeline-toolbar .timeline-view-switch {
    margin-right: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .timeline-toolbar .view-tab {
    flex: 1;
    justify-content: center;
    min-width: 0;
    padding: 7px 6px;      /* 모바일: 좌우 패딩 축소로 3개 버튼 한 줄 확보 */
    font-size: 12px;
    gap: 4px;
  }
  .timeline-toolbar .timeline-legend {
    justify-content: flex-start;
    gap: 12px;
  }
  .timeline-toolbar .timeline-date-nav { flex-wrap: wrap; }
  .timeline-toolbar .date-display { font-size: 17px; }
  .date-jump-input { margin-left: 0; }
}

/* V6-4: 홈 '앞으로의 일정' 클릭 가능 카드 — 호버 배경 + 음영 + Ripple */
.upcoming-row.is-clickable,
.upcoming-day-label.is-clickable {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}
.upcoming-row.is-clickable:hover {
  background: rgba(0, 102, 204, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.upcoming-row.is-clickable:active {
  transform: scale(0.995);
  background: rgba(0, 102, 204, 0.08);
}
.upcoming-day-label.is-clickable:hover {
  background: rgba(0, 102, 204, 0.04);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* V6-4: Ripple 효과 (클릭 시 카드 위에 잔물결) */
.upcoming-row.is-clickable::after,
.upcoming-day-label.is-clickable::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 102, 204, 0.18) 10%, transparent 11%);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: background-size 0.42s ease-out, opacity 0.42s ease-out;
  pointer-events: none;
}
.upcoming-row.is-clickable:active::after,
.upcoming-day-label.is-clickable:active::after {
  background-size: 1500% 1500%;
  opacity: 1;
  transition: 0s;
}

/* V6-3: 멤버 일괄 등록 - 엑셀 드래그앤드롭 */
.bulk-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  border: 2px dashed #bfd6ee;
  border-radius: 12px;
  background: rgba(0, 102, 204, 0.03);
  cursor: pointer;
  transition: all 0.18s ease;
}
.bulk-dropzone:hover {
  border-color: var(--primary);
  background: rgba(0, 102, 204, 0.06);
}
.bulk-dropzone.is-drag {
  border-color: var(--primary);
  background: rgba(0, 102, 204, 0.1);
  transform: scale(1.01);
}
.bulk-dropzone-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.bulk-dropzone-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-48);
  letter-spacing: -0.1px;
}
.bulk-dropzone-source {
  margin-top: 10px;
  padding: 6px 12px;
  background: #fff;
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-80);
  font-weight: 500;
  border: 1px solid var(--hairline);
}

/* =====================================================
   V7 — 모바일 헤더 / 관리 페이지 가로 탭 / 멤버 카드 / sticky 해제
   ===================================================== */

/* V7-1: 사용자 이름 텍스트 (데스크톱에서는 숨김 — title 호버에만 표시) */
.nav-user-name {
  display: none;
}

/* 데스크톱에서는 멤버 카드 숨김 (테이블만 표시) */
.member-cards-mobile { display: none; }

/* ============ MOBILE (≤ 768px) ============ */
@media (max-width: 768px) {

  /* V7-1: 상단 헤더 양 끝 정렬 + 우측 정렬 (브랜드 좌 / 액션 우) */
  .global-nav-inner {
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 14px !important;
  }
  .nav-brand {
    flex-shrink: 0;
    /* 매우 좁은 화면에서 텍스트 잘림 방지 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50vw;
  }
  .nav-brand span:last-child {
    font-size: 13px;
  }
  .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;  /* 우측 끝 밀착 */
    flex-shrink: 0;
  }
  .nav-user-name {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.1px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
  .nav-hamburger {
    margin-left: 2px !important;
  }

  /* V7-2: 관리 페이지 세로 분할 해제 + 가로 탭 바 */
  .admin-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .admin-side-nav {
    /* V7-4: position: sticky 해제 (모바일 전면) */
    position: relative !important;
    top: auto !important;
    height: auto !important;
    padding: 8px !important;
    /* V7-2: 가로 한 줄 + 가로 스와이프 */
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .admin-side-nav::-webkit-scrollbar { height: 4px; }
  .admin-side-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }
  .admin-side-nav .side-label {
    display: none;  /* 모바일에서는 라벨 숨김 */
  }
  .admin-side-link {
    flex: 0 0 auto;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    background: var(--parchment);
    color: var(--ink-80);
  }
  .admin-side-link.is-active {
    background: var(--ink) !important;
    color: #fff !important;
  }
  .admin-side-link i {
    font-size: 12px;
    margin-right: 4px;
  }
  .admin-content {
    padding: 18px 16px !important;
  }

  /* V7-3: 멤버 테이블 → 카드 UI 전환 */
  .member-table-desktop { display: none !important; }
  .member-cards-mobile {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }

  /* 검색창 폭 가변 */
  .table-search input {
    width: 100% !important;
  }
  .table-search {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* V7-3: 모달 가변 폭 */
  .modal {
    width: 92% !important;
    max-width: 100% !important;
  }
  .modal-backdrop {
    padding: 12px !important;
  }
  /* 모달 내부 헤더 텍스트가 줄넘김 가능하도록 */
  .modal-header {
    padding: 16px 18px 12px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-body { padding: 0 18px 18px !important; }
  .modal-footer {
    padding: 12px 18px !important;
    flex-direction: column;
    gap: 8px;
  }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary {
    width: 100%;
  }
  /* 일괄 등록 모달은 일반 모달보다 더 크게 (640px 등) 지정되어 있음 */
  .modal[style*="max-width:640px"],
  .modal[style*="max-width: 640px"],
  .modal[style*="max-width:560px"],
  .modal[style*="max-width: 560px"] {
    max-width: 100% !important;
    width: 92% !important;
  }

  /* V7-3: 일괄 등록 드롭존 가변 폭 */
  .bulk-dropzone {
    width: 100%;
    padding: 18px 12px;
  }
  .bulk-dropzone-title { font-size: 13px; }
  .bulk-dropzone-sub { font-size: 11px; }

  /* 일괄 등록 미리보기 테이블도 가로 스크롤 (테이블은 카드 변환 어려움) */
  .modal .data-table {
    font-size: 12px;
  }

  /* 페이지 헤더 폰트 크기 축소 */
  .page-header h1 { font-size: 28px; }
  .page-header p { font-size: 13px; }

  /* V14 §UI-1: 인사이트 페이지 헤더 모바일 컴팩트화
     (is-admin-header 미적용 페이지 — 인사이트는 숨기지 않고 좁힘) */
  .page-wrap > .page-header:not(.is-admin-header) {
    margin-bottom: 12px;
  }
  .page-wrap > .page-header:not(.is-admin-header) .page-title-block h1 {
    font-size: 24px;
    line-height: 1.15;
  }
  .page-wrap > .page-header:not(.is-admin-header) .page-title-block p {
    margin-top: 4px;
    font-size: 12px;
  }
  /* 헤더 아래 첫 번째 자식(탭/필터)와의 간격도 살짝 줄임 */
  .page-wrap > .page-header:not(.is-admin-header) + .insight-tabs {
    margin-top: 0;
  }

  /* V7-4: 추가 sticky 해제 안전망 — 페이지 진입 시 본문이 가려지지 않도록 */
  .sub-nav {
    position: relative !important;
    top: auto !important;
  }
}

/* V7-3: 모바일 카드 — 미디어 무관 카드 디자인 */
.member-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.18s ease;
}
.member-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.member-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.member-card-id {
  flex: 1;
  min-width: 0;
}
.member-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-card-email {
  font-size: 12px;
  color: var(--ink-48);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-card-badges {
  flex-shrink: 0;
}
.member-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--divider-soft);
}
.member-card-meta .meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.meta-label {
  color: var(--ink-48);
  font-weight: 500;
}
.meta-value {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}
.member-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.btn-card-action {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--primary);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-card-action:hover {
  background: rgba(0, 102, 204, 0.05);
  border-color: var(--primary);
}
.btn-card-action.is-danger { color: #d33; }
.btn-card-action.is-danger:hover {
  background: rgba(211, 51, 51, 0.06);
  border-color: #d33;
}

/* ===================================================================== */
/* V7 통합본 — 모바일 UX 전면 고도화 (PC 영향 최소, 모바일 ≤768px 강제) */
/* ===================================================================== */

/* §1 데스크톱: admin-content-header 기본 레이아웃 (구 inline style 대체) */
.admin-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

/* §4 데스크톱: 공간 페이지 — 모바일 카드 숨김 (기본) */
.space-cards-mobile { display: none; }

/* §5 반복 예약 분기 모달 옵션 버튼 */
.recurring-scope-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recurring-scope-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.recurring-scope-btn:hover {
  background: #f5f7fa;
  border-color: var(--primary);
  transform: translateY(-1px);
}
.recurring-scope-btn.is-danger:hover {
  background: rgba(211, 51, 51, 0.04);
  border-color: #d33;
}
.recurring-scope-btn .rsb-title {
  font-size: 15px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 4px;
}
.recurring-scope-btn.is-danger .rsb-title { color: #d33; }
.recurring-scope-btn .rsb-desc {
  font-size: 12px;
  color: #7a7a7a;
  line-height: 1.5;
}

/* §6 전역 모달 너비 가이드 (데스크톱 기본은 기존 유지 — 모바일에서 강제 92%) */

/* ===================================================================== */
/* MOBILE (≤768px) — V7 통합본 전면 적용                                  */
/* ===================================================================== */
@media (max-width: 768px) {
  /* §1: 관리 페이지 상단 타이틀/설명 영역 전면 숨김 → 서브탭 최상단 노출 */
  .page-header.is-admin-header { display: none !important; }

  /* admin-content-header — 액션바도 컴팩트화 */
  .admin-content-header {
    margin-bottom: 12px !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .admin-content-header h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .admin-content-header p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
  }

  /* §4: +생성하기 / +공간 추가 버튼 — nowrap + 패딩 축소 + 폰트 축소 */
  .btn-primary.btn-compact-mobile,
  .admin-content-header .btn-primary {
    padding: 8px 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    line-height: 1.2 !important;
  }
  .btn-primary.btn-compact-mobile i,
  .admin-content-header .btn-primary i {
    font-size: 11px !important;
    margin-right: 4px !important;
  }

  /* §3: 관리 서브 메뉴 탭 — gap/padding 컴팩트화 (드래그 없이 한눈) */
  .admin-side-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    margin: 0 0 8px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    /* §4: sticky/fixed 전면 해제 — relative + top:auto */
    position: relative !important;
    top: auto !important;
    background: #fff !important;
    border-bottom: 1px solid var(--hairline) !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  .admin-side-nav::-webkit-scrollbar { display: none; }
  .admin-side-nav { scrollbar-width: none; }
  .admin-side-nav .side-label { display: none !important; }
  .admin-side-nav .admin-side-link {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
    border: 1px solid transparent !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
    margin: 0 !important;
  }
  .admin-side-nav .admin-side-link i {
    font-size: 11px !important;
    margin: 0 !important;
  }
  .admin-side-nav .admin-side-link.is-active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
  }

  /* sticky 안전망 — 다른 서브 메뉴도 모두 해제 */
  .sub-nav,
  .admin-content,
  .admin-layout {
    position: relative !important;
    top: auto !important;
  }

  /* §4: 관리자 콘텐츠 영역 패딩 축소 */
  .admin-content {
    padding: 0 12px 24px 12px !important;
  }
  .admin-layout {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .page-wrap {
    padding: 0 !important;
  }

  /* §2 + V7-3: 멤버 카드 — 빌딩 아바타 숨김 + 좌측 정렬 강화 */
  .member-card-avatar { display: none !important; }
  .member-card-head {
    align-items: center !important;
    gap: 8px !important;
    padding-left: 0 !important;
  }
  .member-card-id {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .member-card-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .member-card-email {
    font-size: 12px !important;
    color: #7a7a7a !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .member-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
  .member-card-meta {
    margin-top: 8px !important;
    padding-top: 8px !important;
    gap: 6px !important;
  }
  .meta-row { font-size: 13px !important; }

  /* §4: 공간 페이지 — 데스크톱 테이블 숨기고 카드 노출 */
  .space-table-desktop { display: none !important; }
  .space-cards-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .space-color-chip {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  .space-card .member-card-name { white-space: nowrap; }

  /* §4: 부서/직책 페이지 컴팩트화 */
  .org-add-btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* §6: 전역 모달 — width 92%, max-width 480px 가이드라인 통일 */
  .modal {
    width: 92% !important;
    max-width: 480px !important;
    max-height: 92vh !important;
  }
  .modal-body { padding: 16px !important; }
  .modal-header { padding: 14px 16px !important; }
  .modal-footer { padding: 12px 16px !important; gap: 8px !important; }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* 검색바 컴팩트화 */
  .table-search {
    margin: 8px 0 !important;
  }
  .table-search input {
    padding: 9px 12px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    width: 100% !important;
  }
  .tabs {
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  .tabs .tab-link {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* 반복 분기 모달 옵션 버튼도 모바일에서 좀 더 컴팩트 */
  .recurring-scope-btn { padding: 12px 14px !important; }
  .recurring-scope-btn .rsb-title { font-size: 14px !important; }
  .recurring-scope-btn .rsb-desc { font-size: 11.5px !important; }
}

/* ===================================================================== */
/* PC (≥769px) — V7 통합본 데스크톱 미세 조정                              */
/* ===================================================================== */
@media (min-width: 769px) {
  /* 데스크톱에서는 admin-content-header 가 충분한 여백 확보 */
  .admin-content-header { margin-bottom: 24px; gap: 16px; }
  /* 멤버 카드(모바일)는 데스크톱에서 숨김 — 이미 V7 1차에서 처리되었지만 안전망 */
  .member-card-avatar { display: flex; }
  .space-cards-mobile { display: none; }
}

/* ===================================================================== */
/* V7 최종본 추가 보강 — §1 공간 헤더, §2 드롭다운, §3 폼 행 */
/* ===================================================================== */

/* §1: 공간명 한 줄 출력 보장 (PC + 모바일 공통) */
.timeline-header-cell {
  min-width: 0;
}
.timeline-header-cell .space-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
.timeline-header-cell .space-name > span:not(.space-dot) {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.timeline-header-cell .space-meta {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* §2: 헤더 아바타 드롭다운 메뉴 */
.nav-avatar-wrap { position: relative; }
.nav-avatar { cursor: pointer; }
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: 280px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  overflow: hidden;
  padding: 8px 0;
}
.user-dropdown-menu .udm-head {
  padding: 10px 14px 8px;
}
.user-dropdown-menu .udm-name {
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-menu .udm-sub {
  font-size: 12px;
  color: #7a7a7a;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-menu .udm-divider {
  height: 1px;
  background: var(--hairline);
  margin: 6px 0;
}
.user-dropdown-menu .udm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13.5px;
  color: #1d1d1f;
  text-align: left;
  transition: background 0.12s ease;
}
.user-dropdown-menu .udm-item:hover {
  background: #f5f7fa;
}
.user-dropdown-menu .udm-item.is-danger {
  color: #d33;
}
.user-dropdown-menu .udm-item.is-danger:hover {
  background: rgba(211, 51, 51, 0.06);
}
.user-dropdown-menu .udm-item i {
  font-size: 13px;
  width: 16px;
  text-align: center;
  opacity: 0.8;
}

/* §2: 내 정보 모달 — 행 레이아웃 */
.mypage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}
.mypage-row:last-child { border-bottom: 0; }
.mypage-row .mr-label {
  color: #7a7a7a;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 16px;
}
.mypage-row .mr-value {
  color: #1d1d1f;
  font-weight: 500;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* §3: 멤버 생성 모달 — 부서/직책 한 줄 50:50 */
.form-row-2col {
  display: flex;
  gap: 8px;
}
.form-row-2col > div {
  flex: 1 1 50%;
  min-width: 0;
}
.form-row-2col select {
  width: 100% !important;
}

/* 모바일에서 드롭다운 위치/너비 조정 */
@media (max-width: 768px) {
  .user-dropdown-menu {
    min-width: 200px;
    max-width: calc(100vw - 32px);
    right: 0;
  }
  /* §3: 부서/직책 한 줄은 모바일에서도 그대로 50:50 유지 (요구사항 명시) */
  .form-row-2col { gap: 6px; }
}

/* ===================================================================== */
/*  V7 완결본 — 핵심 UX & 레이아웃 마감 패치                              */
/*  §1 홈 배너 미니 캘린더, §2 모바일 공간헤더 두 줄 분리,                */
/*  §3 Pretendard 전역 + 라벤더 블루(#dfe7f7) 네비                        */
/* ===================================================================== */

/* ---------- §3: Pretendard 전역 서체 강제 적용 ---------- */
:root {
  --font-pretendard: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
    "맑은 고딕", "Inter", system-ui, sans-serif;
}
html, body, button, input, select, textarea {
  font-family: var(--font-pretendard) !important;
  letter-spacing: -0.02em;
}

/* ---------- §3 (ROLLBACK): 헤더 네비 메뉴 — 오리지널 스타일 복원 ---------- */
/* [V7 완결본 후속 패치] 이전 라운드에 잠시 #dfe7f7 라벤더 블루로 덮었던
   .nav-link / .nav-avatar / .nav-brand 의 자체 배경·테두리·투명도를
   원본 상태(투명 배경, 화이트 라이트 hover/active)로 즉시 롤백.
   Pretendard 전역 서체는 그대로 유지(global rule이라 충돌 없음). */
.global-nav .nav-links .nav-link {
  /* 오리지널 .nav-link 정의를 그대로 따르도록 모든 강제 속성 해제 */
  background-color: transparent !important;
  border: none !important;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  padding: 6px 16px;
  border-radius: var(--r-xs);
  opacity: 1;
}
.global-nav .nav-links .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
.global-nav .nav-links .nav-link.is-active {
  background-color: rgba(255, 255, 255, 0.1) !important;
  font-weight: 400;
}

/* 사용자 이름 텍스트 — 오리지널 톤 복원 (다크 헤더 위 라이트 텍스트) */
.global-nav .nav-actions .nav-user-name {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
}

/* 아바타 — 오리지널 28×28 크기로 복원 */
.global-nav .nav-actions .nav-avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
}

/* 브랜드 — 폰트 패밀리는 Pretendard 따르되 굵기/크기는 오리지널 유지 */
.global-nav .nav-brand {
  font-family: var(--font-pretendard);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.2px;
}

/* ---------- §1: 홈 배너 미니 캘린더 위젯 ---------- */
.home-hero-icon.home-cal-badge {
  background: #fff !important;
  border: 1px solid #ececec;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 0;
  flex-direction: column;
  position: relative;
}
.home-hero-icon.home-cal-badge .cal-badge-month {
  width: 100%;
  background: #ff6b6b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 4px 0 3px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.home-hero-icon.home-cal-badge .cal-badge-day {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: #2c2c2c;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ---------- §2: 모바일 공간 헤더 — Meeting Room + A/B/C 두 줄 분리 ---------- */
/* 기본(데스크톱): prefix + suffix 사이 공백 한 칸으로 한 줄 표기 */
.timeline-header-cell .space-name-text {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.timeline-header-cell .space-name-prefix {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-header-cell .space-name-suffix {
  white-space: nowrap;
  font-weight: 700;
}

/* 모바일(≤768px): prefix는 줄1(축소·회색), suffix는 줄2(굵게·강조) */
@media (max-width: 768px) {
  .timeline-header-cell {
    padding: 6px 4px !important;
  }
  .timeline-header-cell .space-name {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    min-width: 0;
  }
  .timeline-header-cell .space-name .space-dot {
    margin-bottom: 2px;
  }
  .timeline-header-cell .space-name-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
    width: 100%;
    min-width: 0;
  }
  .timeline-header-cell .space-name-prefix {
    font-size: 11px;
    line-height: 1.2;
    color: #5b6470;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    letter-spacing: -0.02em;
  }
  .timeline-header-cell .space-name-suffix {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    color: #1a365d;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
}

/* ===================================================================== */
/*  V7 완결본 패치 종료                                                    */
/* ===================================================================== */

/* ===================================================================== */
/*  V7 완결본 후속 패치 — 홈 '앞으로의 일정' 시간/제목 레이아웃 마감       */
/*  요구: 시간은 한 줄 nowrap, 제목은 그 아래로 자연스럽게 떨어지도록      */
/* ===================================================================== */

/* 시간 영역은 어떤 해상도에서도 두 줄로 꺾이지 않도록 강제 */
.upcoming-row .time {
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* 모바일(≤768px): grid 한 컬럼으로 재배치하여
   ① 일자 라벨(D + 6월, 수요일) 한 묶음,
   ② 각 row는 [시간 한 줄] / [제목 한 줄] 위·아래 스택 구조로 정돈 */
@media (max-width: 768px) {
  .upcoming-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    grid-template-columns: none !important;
    gap: 2px !important;
    padding: 10px 0 !important;
  }
  .upcoming-row .time {
    display: inline-block;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
    color: var(--ink-48);
    font-size: 13px;
    line-height: 1.3;
  }
  .upcoming-row .title {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    word-break: break-word;     /* break-all은 한글 한 자씩 끊겨 가독성 ↓ */
    line-height: 1.35;
  }
  /* 모바일에서는 space-pill / avatar는 기존대로 숨김 (line 1218 룰 유지) */
}

/* 데스크톱에서도 혹시라도 시간이 두 줄로 꺾이지 않도록 안전망 */
@media (min-width: 769px) {
  .upcoming-row .time {
    white-space: nowrap !important;
  }
}

/* ===================================================================== */
/*  V7 완결본 후속 패치 끝                                                 */
/* ===================================================================== */

/* ===================================================================== */
/*  V7 고도화 — 다대다 참석자 시스템 (자동완성 / 태그 / 초대 카드 / 배지)  */
/* ===================================================================== */

/* ---------- 예약 모달: 참석자 멀티셀렉트 ---------- */
.attendees-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.attendees-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}
.attendees-tags:empty { display: none; }
.attendee-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 8px;
  background: #eef3ff;
  border: 1px solid #d6e1f7;
  border-radius: 999px;
  font-size: 12px;
  color: #1a3a7a;
  font-weight: 500;
  line-height: 1.2;
}
.attendee-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.attendee-tag-name { white-space: nowrap; }
.attendee-tag-remove {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: #1a3a7a;
  cursor: pointer;
  padding: 0 0 0 2px;
  font-weight: 600;
}
.attendee-tag-remove:hover { color: #d33; }

.attendee-search-wrap {
  position: relative;
}
.attendee-search-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
}
.attendee-search-input:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}

.attendee-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 11px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1100;
  display: none;
}
.attendee-dropdown.is-open { display: block; }
.attendee-dropdown-empty {
  padding: 14px;
  font-size: 13px;
  color: #888;
  text-align: center;
}
.attendee-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: #1a1a1a;
}
.attendee-dropdown-item:hover { background: #f5f8ff; }
.attendee-dd-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}
.attendee-dd-text { min-width: 0; flex: 1; }
.attendee-dd-name {
  font-weight: 600;
  font-size: 13px;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attendee-dd-meta {
  font-size: 12px;
  color: #7a7a7a;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 예약 상세 모달: 예약자 / 참석자 구분 + 배지 ---------- */
.detail-owner-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.detail-owner-text { min-width: 0; flex: 1; }
.detail-owner-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.detail-owner-tenant { color: #7a7a7a; font-weight: 400; font-size: 13px; }

.detail-attendees-count {
  font-size: 12px;
  color: #7a7a7a;
  font-weight: 400;
}
.detail-attendees-empty {
  font-size: 13px;
  color: #999;
  padding: 8px 0;
}
.detail-attendees-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-attendee-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.detail-attendee-text { min-width: 0; flex: 1; }
.detail-attendee-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-attendee-meta {
  font-size: 12px;
  color: #7a7a7a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attendee-status-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: -0.02em;
}
.attendee-status-badge.is-pending {
  background: #fff7e0;
  color: #b07700;
}
.attendee-status-badge.is-accepted {
  background: #e0f6e7;
  color: #1b8a3a;
}
.attendee-status-badge.is-declined {
  background: #fde7e7;
  color: #c0392b;
}

/* 본인 초대 액션 배너 (상세 모달 안) */
.invite-action-banner {
  background: #f5f8ff;
  border: 1px solid #d6e1f7;
  border-radius: 12px;
  padding: 14px 16px;
}
.invite-action-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a3a7a;
  margin-bottom: 10px;
}
.invite-action-buttons {
  display: flex;
  gap: 8px;
}
.invite-action-buttons .btn-primary,
.invite-action-buttons .btn-secondary {
  flex: 1;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
}
.invite-status-banner {
  background: #f3f3f3;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #555;
}

/* ---------- 홈: '앞으로의 일정' 역할 배지 (주최/참석) ---------- */
.role-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: -0.02em;
  vertical-align: middle;
  line-height: 1.3;
}
.role-badge.is-owner {
  background: #e7f0ff;
  color: #0a52b8;
}
.role-badge.is-attendee {
  background: #f0e7ff;
  color: #5b2bb0;
}

/* ---------- 홈: 받은 초대 알림 박스 ---------- */
.invites-section {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: var(--space-xl);
  border: 1px solid #e6efff;
}
.invites-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
}
.invites-count-badge {
  margin-left: 8px;
  background: #0066cc;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.invites-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invite-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: #f9fbff;
  border: 1px solid #e0eaff;
  border-radius: 12px;
}
.invite-card-main { flex: 1; min-width: 0; }
.invite-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.invite-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #6a6a6a;
  margin-bottom: 6px;
}
.invite-card-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.invite-card-space { display: inline-flex; align-items: center; gap: 5px; }
.invite-card-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #555;
}
.invite-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.invite-card-actions .btn-primary {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
}
.invite-card-actions .btn-secondary {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
}

/* 모바일: 초대 카드 세로 스택 */
@media (max-width: 768px) {
  .invites-section { padding: 18px 18px; }
  .invite-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .invite-card-actions { width: 100%; }
  .invite-card-actions .btn-primary,
  .invite-card-actions .btn-secondary { flex: 1; }
  .attendee-dropdown { max-height: 200px; }
}

/* ===================================================================== */
/*  V7 고도화 — 다대다 참석자 시스템 끝                                    */
/* ===================================================================== */

/* =============================================================================
   ███ 메이트리그라운드 — 비주얼 리브랜딩 v8 (Deep Sapphire Minimal) ███
   적용 원칙: HTML/JS/이벤트 핸들러 100% 보존, 본 파일의 시각 토큰만 재정의
   - 베이스   : Lavender Mist  #dfe7f7
   - 액센트   : Deep Sapphire  #1a365d  (← 기존 --primary #0066cc 대체)
   - 잉크     : Charcoal Ink   #0f1c2e
   - 컴포넌트 : 4px 직각 미니멀, 그림자 제거, 1px 헤어라인 보더
   - 밀도     : padding/gap 20%+ 재조정으로 타사 동선 유사성 차단
   ============================================================================= */

:root {
  /* 컬러 토큰 전면 재바인딩 */
  --primary:          #1a365d;
  --primary-focus:    #244977;
  --primary-on-dark:  #5d7fb8;
  --accent-deep:      #0f2647;
  --accent-soft:      #dfe7f7;
  --accent-soft-2:    #eef2fb;
  --accent-line:      #c7d3ea;
  --accent-tint:      #f4f7fc;

  --ink:              #0f1c2e;
  --body:             #0f1c2e;
  --ink-80:           #28354a;
  --ink-48:           #5a6678;
  --ink-32:           #8a93a3;

  --canvas:           #ffffff;
  --parchment:        #f4f7fc;
  --pearl:            #ffffff;

  --hairline:         #c7d3ea;
  --divider-soft:     #e3ebf6;

  /* 직각 미니멀 — 모든 radius 토큰 ≤ 4px로 일괄 축소 */
  --r-xs:  2px;
  --r-sm:  3px;
  --r-md:  4px;
  --r-lg:  4px;
  --r-pill: 4px;
  --r-full: 50%;            /* 아바타·점 등 원형은 보존 */

  /* 그림자 토큰 무력화 */
  --shadow-product:   0 0 0 1px var(--hairline);
  --shadow-soft:      0 0 0 1px var(--hairline);

  /* 밀도 토큰 — 약간 더 압축해 정보 밀도↑ */
  --space-md: 14px;
  --space-lg: 20px;
  --space-xl: 28px;
  --space-xxl: 40px;
  --space-section: 56px;
}

/* === 1. 전역 보호막: 둥근 곡률 / 그림자 / 그라데이션 일괄 차단 =============== */
*,
*::before,
*::after {
  box-shadow: none !important;
}

/* 둥근 곡률 강제 축소 — 단, 원형으로 유지해야 하는 컴포넌트만 화이트리스트 */
*:not(.avatar):not(.nav-avatar):not(.user-avatar):not(.member-avatar):not(.attendee-tag-dot):not(.detail-avatar):not(.invite-avatar):not(.attendee-dd-avatar):not(.color-dot):not(.role-dot):not(.brand-dot):not(.spinner):not(.loader):not(.dot):not(.point):not(.indicator) {
  border-radius: var(--r-md) !important;
}

/* === 2. 베이스 캔버스 — 라벤더 미스트 톤으로 통일 ============================ */
html, body {
  background: var(--parchment);
  color: var(--ink);
}

/* === 3. 헤더 (글로벌 네비) — 딥 사파이어 단색 + 라벤더 액티브 ================ */
.global-nav,
.header-navigation-container,
header.global-nav,
nav.global-nav {
  background: var(--accent-deep) !important;
  border-bottom: 1px solid var(--accent-deep) !important;
}

.global-nav .nav-brand,
.global-nav .nav-user-name {
  color: #ffffff !important;
  letter-spacing: -0.02em;
}

.global-nav .nav-link {
  background: transparent !important;
  color: rgba(255,255,255,0.78) !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 14px !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 120ms ease, color 120ms ease;
}
.global-nav .nav-link:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}
.global-nav .nav-link.is-active,
.global-nav .nav-link.active {
  background: var(--accent-soft) !important;
  color: var(--accent-deep) !important;
}

.global-nav .nav-avatar {
  border-radius: var(--r-full) !important;
  border: 1.5px solid rgba(255,255,255,0.32) !important;
}

/* === 4. 카드/패널 — 그림자 0, 헤어라인 1px, 4px 직각 ========================== */
.card,
.panel,
.dashboard-grid-box,
.timeline-card-wrapper,
.upcoming-card,
.invite-card,
.member-row,
.space-row,
.insight-card,
.summary-card,
.list-card,
section.card {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

.card:hover,
.invite-card:hover,
.upcoming-card:hover {
  border-color: var(--primary) !important;
}

/* === 5. 버튼 — 직각 미니멀 + 단색 액센트 ===================================== */
.btn,
button.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.primary-action-button,
input[type="button"],
input[type="submit"] {
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn-primary,
.primary-action-button {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary) !important;
}
.btn-primary:hover,
.primary-action-button:hover {
  background: var(--primary-focus) !important;
  border-color: var(--primary-focus) !important;
}

.btn-secondary {
  background: var(--canvas) !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
}
.btn-secondary:hover {
  background: var(--accent-soft) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--ink-80) !important;
  border: 1px solid var(--hairline) !important;
}
.btn-ghost:hover {
  background: var(--accent-tint) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* === 6. 입력폼 — 깔끔한 1px 보더 + 포커스 시 네이비 링 ======================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: border-color 120ms ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;  /* 포커스 링은 의도된 시각 신호 */
}

/* === 7. 모달 — 4px 직각, 그림자 0, 헤어라인 보더 ============================= */
.modal,
.modal-container,
.modal-dialog,
.reservation-modal-container,
.modal-content,
.modal-overlay > div,
.modal-wrap > div {
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  border: 1px solid var(--hairline) !important;
  background: var(--canvas) !important;
}
.modal-overlay,
.modal-backdrop {
  background: rgba(15, 28, 46, 0.42) !important;   /* 차콜 네이비 오버레이 */
  backdrop-filter: blur(1.5px);
}
.modal-header,
.modal-title {
  border-bottom: 1px solid var(--divider-soft) !important;
}
.modal-footer {
  border-top: 1px solid var(--divider-soft) !important;
  background: var(--accent-tint) !important;
}

/* === 8. 타임라인 (공간 그리드) — 액센트 바 네이비 + 격자 라인 한층 가볍게 ==== */
.timeline,
.timeline-grid,
.timeline-container {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
}
.timeline-active-bar,
.timeline-cell.is-selected,
.timeline-cell.selected,
.timeline-slot.is-booked,
.timeline-block,
.reservation-block {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
.timeline-cell:hover {
  background-color: var(--accent-soft-2) !important;  /* V48: 10분 보조선(background-image) 유지 */
}
.timeline-hour-label,
.timeline-time-label {
  color: var(--ink-48) !important;
  font-variant-numeric: tabular-nums;
}

/* === 9. 홈 hero / 미니 캘린더 — 라벤더 베이스 + 네이비 헤더 ================== */
.hero,
.home-hero,
.dashboard-hero {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-line) !important;
  border-radius: var(--r-md) !important;
  padding: 28px 24px !important;
}
.home-cal-badge {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden;
}
.cal-badge-month {
  background: var(--primary) !important;
  color: #ffffff !important;
  letter-spacing: -0.01em;
}
.cal-badge-day {
  color: var(--ink) !important;
  font-weight: 700;
}

/* === 10. 앞으로의 일정 행 — 좌측 컬러 인디케이터 + 간결한 행 구조 ============ */
.upcoming-row,
.list-row {
  border-bottom: 1px solid var(--divider-soft) !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;          /* 행 단위는 각 잡힌 직선 유지 */
  background: var(--canvas) !important;
  transition: background 120ms ease;
}
.upcoming-row:hover,
.list-row:hover {
  background: var(--accent-tint) !important;
}
.upcoming-row:last-child {
  border-bottom: none !important;
}
.upcoming-row .time {
  color: var(--primary) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* === 11. 역할/상태 배지 — 컬러는 유지하되 4px 직각 + 보더 ==================== */
.role-badge,
.status-badge,
.attendee-status-badge,
.tag,
.chip,
.label {
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 3px 9px !important;
}
.role-badge.is-owner {
  background: var(--accent-soft) !important;
  color: var(--primary) !important;
  border: 1px solid var(--accent-line) !important;
}
.role-badge.is-attendee {
  background: #efeaf9 !important;
  color: #4a2a8a !important;
  border: 1px solid #d9cef0 !important;
}
.attendee-status-badge.is-pending {
  background: #fff4d6 !important;
  color: #8c5a00 !important;
  border: 1px solid #f0d99a !important;
}
.attendee-status-badge.is-accepted {
  background: #d8f0e0 !important;
  color: #146b34 !important;
  border: 1px solid #a7d9ba !important;
}
.attendee-status-badge.is-declined {
  background: #fbdcdc !important;
  color: #a02828 !important;
  border: 1px solid #f0b5b5 !important;
}

/* === 12. 참석자 태그/드롭다운 — 직각 + 헤어라인 ============================== */
.attendee-tag,
.attendee-dropdown,
.attendee-dropdown-item,
.attendee-search-input {
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  border: 1px solid var(--hairline) !important;
}
.attendee-tag {
  background: var(--accent-soft) !important;
  color: var(--primary) !important;
  border: 1px solid var(--accent-line) !important;
}
.attendee-dropdown {
  background: var(--canvas) !important;
}
.attendee-dropdown-item:hover {
  background: var(--accent-tint) !important;
}

/* === 13. 초대함 카드 — 좌측 컬러 인디케이터 + 깔끔한 정보 위계 =============== */
.invites-section {
  margin: 20px 0 !important;
}
.invites-count-badge {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-radius: var(--r-sm) !important;
  font-weight: 700;
}
.invite-card {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: var(--r-md) !important;
  padding: 16px 18px !important;
}
.invite-card:hover {
  border-color: var(--primary) !important;
  border-left-color: var(--primary-focus) !important;
}
.invite-action-banner {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-line) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 14px !important;
}

/* === 14. 디테일 모달 — 예약자/참석자 구분 시각화 강화 ======================== */
.detail-owner-row,
.detail-attendees-list,
.detail-attendee-row {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--divider-soft) !important;
  background: var(--canvas) !important;
}
.detail-owner-row {
  background: var(--accent-tint) !important;
  border-left: 3px solid var(--primary) !important;
  padding: 12px 14px !important;
}
.detail-attendees-list {
  padding: 4px 0 !important;
}
.detail-attendee-row {
  border: none !important;
  border-bottom: 1px solid var(--divider-soft) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
}
.detail-attendee-row:last-child {
  border-bottom: none !important;
}

/* === 15. 테이블 — 1px 헤어라인, 헤더 라벤더 톤 =============================== */
table,
.data-table {
  border-collapse: collapse !important;
  width: 100%;
}
table th,
.data-table th {
  background: var(--accent-tint) !important;
  color: var(--ink-80) !important;
  border-bottom: 1.5px solid var(--accent-line) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
table td,
.data-table td {
  border-bottom: 1px solid var(--divider-soft) !important;
}
table tr:hover td {
  background: var(--accent-tint) !important;
}

/* === 16. 탭 / 세그먼티드 컨트롤 ============================================== */
.tab-link,
.tab-btn,
.segment-item {
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: var(--ink-48) !important;
  font-weight: 600;
  padding: 10px 14px !important;
}
.tab-link.is-active,
.tab-link.active,
.tab-btn.is-active,
.segment-item.is-active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  background: transparent !important;
}

/* === 17. 토스트 — 직각, 네이비 단색 ========================================== */
.toast,
.notification,
.snackbar {
  border-radius: var(--r-md) !important;
  background: var(--accent-deep) !important;
  color: #ffffff !important;
  border: 1px solid var(--accent-deep) !important;
  box-shadow: none !important;
}

/* === 18. 스크롤바 — 네이비 톤으로 통일 ======================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--accent-tint); }
::-webkit-scrollbar-thumb {
  background: var(--accent-line);
  border-radius: var(--r-sm);
  border: 2px solid var(--accent-tint);
}
::-webkit-scrollbar-thumb:hover { background: var(--primary-on-dark); }

/* === 19. 링크/포커스 가시화 ================================================= */
a { color: var(--primary) !important; }
a:hover { color: var(--primary-focus) !important; }
:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px;
}

/* === 20. 모바일(≤768px) — 밀도 추가 압축 ===================================== */
@media (max-width: 768px) {
  .hero,
  .home-hero,
  .dashboard-hero {
    padding: 20px 16px !important;
  }
  .card,
  .invite-card,
  .upcoming-card {
    border-radius: var(--r-md) !important;
  }
  .invite-card {
    padding: 14px 14px !important;
  }
  .modal,
  .modal-container,
  .reservation-modal-container {
    border-radius: var(--r-md) !important;
  }
}

/* === 21. 그라데이션·블러 제거 (시각적 복제 인상 방지) ======================== */
.gradient,
.bg-gradient,
[class*="gradient"] {
  background-image: none !important;
}

/* =============================================================================
   ███ 메이트리그라운드 — 비주얼 리브랜딩 v8 끝 ███
   ============================================================================= */

/* =============================================================================
   ███ V8 패치 1: GNB 헤더 텍스트 화이트 강제 + 사이드바 active 투명화 ███
   ============================================================================= */

/* === 1) 글로벌 네비 텍스트 — 진한 화이트 강제, 투명도 제거 ==================== */
.global-nav,
.global-nav *,
.header-navigation-container,
.header-navigation-container * {
  /* 헤더 영역 내 모든 텍스트는 기본적으로 흰색 — 단, 라벤더 active 배지/입력만 예외 */
}

.global-nav .nav-brand,
.global-nav .nav-brand *,
.global-nav .nav-user-name,
.global-nav .nav-link {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.global-nav .nav-link:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  background: rgba(255,255,255,0.10) !important;
}

/* 활성 탭 — 라벤더 배지 안에서는 딥 네이비로 시인성 확보 */
.global-nav .nav-link.is-active,
.global-nav .nav-link.active {
  background: #dfe7f7 !important;
  color: #0f2647 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

/* 브랜드 바 아이콘은 흰색 톤으로 정돈 */
.global-nav .nav-brand .brand-bars span {
  background: #ffffff !important;
  opacity: 1 !important;
}
.global-nav .nav-brand .brand-bars span:nth-child(3) {
  background: #5d7fb8 !important;     /* 포인트 한 줄만 라벤더 톤 */
}

/* 아바타 텍스트도 흰색 강제 */
.global-nav .nav-avatar,
.global-nav .nav-avatar * {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* === 2) 관리자 사이드바 — active 진한 블록 제거 → 좌측 인디케이터로 ========== */
.admin-side-link {
  background: transparent !important;
  color: var(--ink-80) !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;             /* 좌측 인디케이터 일관성을 위해 직각 */
  padding-left: 13px !important;           /* border 3px + 내부 10px */
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.admin-side-link:hover {
  background: var(--accent-tint) !important;
  color: var(--primary) !important;
  border-left-color: var(--accent-line) !important;
}

.admin-side-link.is-active,
.admin-side-link:focus,
.admin-side-link.is-active:hover {
  background: transparent !important;       /* 진한 네이비 블록 제거 */
  color: #1a365d !important;                /* 딥 사파이어 네이비 텍스트 */
  font-weight: 700 !important;
  border-left: 3px solid #1a365d !important;
  border-radius: 0 !important;
}

.admin-side-link.is-active i,
.admin-side-link:focus i {
  color: #1a365d !important;
  opacity: 1 !important;
}

/* 모바일에서도 active 시각화 일관 적용 (가로 스크롤 사이드바) */
@media (max-width: 768px) {
  .admin-side-link.is-active {
    background: transparent !important;
    color: #1a365d !important;
    border-left: none !important;
    border-bottom: 3px solid #1a365d !important;   /* 가로일 땐 아래쪽 인디케이터 */
    padding-left: 12px !important;
  }
  .admin-side-link {
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
  }
}

/* =============================================================================
   ███ V8 패치 1 끝 ███
   ============================================================================= */

/* =============================================================================
   ███ V10 패치 — GNB opacity 0 + 모바일 사이드바 아이콘 + 인사이트/팔레트 ███
   ============================================================================= */

/* === §2. GNB hover/active opacity 잔존 룰 100% 제거 ========================= */
.global-nav,
.global-nav *,
.global-nav .nav-link,
.global-nav .nav-link *,
.global-nav .nav-link i,
.global-nav .nav-link:hover,
.global-nav .nav-link:hover *,
.global-nav .nav-link.is-active,
.global-nav .nav-link.is-active *,
.global-nav .nav-link.active,
.global-nav .nav-brand,
.global-nav .nav-brand *,
.global-nav .nav-user-name {
  opacity: 1 !important;
}

/* hover/active 시에도 텍스트는 무조건 흰색, 볼드 유지 */
.global-nav .nav-link,
.global-nav .nav-link i {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.global-nav .nav-link:hover,
.global-nav .nav-link:hover i {
  color: #ffffff !important;
  font-weight: 600 !important;
}
/* 활성 탭만 라벤더 배지 위 딥 네이비로 시인성↑ */
.global-nav .nav-link.is-active,
.global-nav .nav-link.is-active i,
.global-nav .nav-link.active,
.global-nav .nav-link.active i {
  color: #0f2647 !important;
  font-weight: 700 !important;
}

/* === §3. 모바일 관리자 사이드바 아이콘 — 노출 강제 ========================== */
@media (max-width: 768px) {
  .admin-side-nav .admin-side-link i,
  .admin-side-link i {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 12px !important;
    margin-right: 4px !important;
    width: auto !important;
  }
  /* 모바일에서도 라벨 + 아이콘 둘 다 표시 (라벨 숨김 룰 무력화) */
  .admin-side-nav .side-label {
    /* 사이드 라벨은 그대로 숨김 유지 — 메뉴 항목명만 표시 */
  }
  /* V8 패치1의 border-bottom 인디케이터를 999px 라운드 알약과 양립시키기 */
  .admin-side-nav .admin-side-link {
    border-radius: 999px !important;   /* 모바일 칩 스타일은 둥근 알약 유지 */
    border: 1px solid transparent !important;
    border-bottom: none !important;     /* V8패치1 잔존 룰 무력화 */
    background: #ffffff !important;
    color: #28354a !important;
  }
  .admin-side-nav .admin-side-link.is-active {
    background: #dfe7f7 !important;
    color: #1a365d !important;
    border: 1px solid #1a365d !important;
    border-bottom: 1px solid #1a365d !important;
    font-weight: 700 !important;
    padding-left: 12px !important;
  }
}

/* === §4-5. 인사이트 — 엑셀 버튼 + 공간 필터 드롭다운 ========================= */
.insight-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.insight-toolbar-left {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.insight-toolbar-right {
  display: flex; gap: 8px; align-items: center;
}
.insight-excel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a365d !important;
  color: #ffffff !important;
  border: 1px solid #1a365d !important;
  padding: 8px 14px !important;
  font-weight: 600;
  font-size: 13px;
  border-radius: 4px !important;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.insight-excel-btn:hover {
  background: #244977 !important;
  border-color: #244977 !important;
}
.insight-excel-btn i { font-size: 13px; }

/* 공간 필터 드롭다운 (멀티셀렉트) */
.space-filter-wrap {
  position: relative;
  display: inline-block;
}
.space-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff !important;
  color: #1a365d !important;
  border: 1px solid #c7d3ea !important;
  padding: 7px 12px !important;
  font-weight: 600;
  font-size: 13px;
  border-radius: 4px !important;
  cursor: pointer;
  min-height: 34px;
}
.space-filter-trigger:hover {
  border-color: #1a365d !important;
}
.space-filter-trigger .chev {
  font-size: 10px;
  margin-left: 4px;
  color: #5a6678;
}
.space-filter-trigger .filter-count {
  background: #1a365d;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: 4px;
}
.space-filter-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #ffffff;
  border: 1px solid #c7d3ea;
  border-radius: 4px;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
  padding: 6px 0;
}
.space-filter-panel.is-open { display: block; }
.space-filter-panel:not(.is-open) { display: none; }
.space-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  color: #28354a;
  user-select: none;
}
.space-filter-item:hover { background: #f4f7fc; }
.space-filter-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: #1a365d;
}
.space-filter-item .sf-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.space-filter-item .sf-name {
  flex: 1;
  color: #0f1c2e;
  font-weight: 500;
}
.space-filter-divider {
  height: 1px;
  background: #e3ebf6;
  margin: 4px 0;
}
.space-filter-actions {
  display: flex;
  gap: 6px;
  padding: 6px 10px 4px;
}
.space-filter-actions button {
  flex: 1;
  background: transparent;
  border: 1px solid #c7d3ea;
  color: #1a365d;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.space-filter-actions button:hover {
  background: #f4f7fc;
}

/* === §6. 컬러 팔레트 카드 (관리탭) ========================================== */
.color-palette-card {
  background: #ffffff;
  border: 1px solid #c7d3ea;
  border-radius: 4px;
  padding: 20px 22px;
  margin-top: 20px;
}
.color-palette-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: #0f1c2e;
  letter-spacing: -0.01em;
}
.color-palette-card .palette-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: #5a6678;
  line-height: 1.5;
}
.color-palette-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.color-palette-label {
  font-size: 13px;
  font-weight: 600;
  color: #28354a;
  min-width: 96px;
}
.color-palette-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  position: relative;
  transition: transform 120ms ease, border-color 120ms ease;
}
.color-swatch:hover {
  transform: scale(1.08);
  border-color: #1a365d;
}
.color-swatch.is-selected {
  border: 2px solid #1a365d;
  box-shadow: 0 0 0 2px #ffffff inset !important;
}
.color-swatch.is-selected::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.color-picker-input {
  width: 50px;
  height: 32px;
  padding: 2px;
  border: 1px solid #c7d3ea;
  border-radius: 4px;
  cursor: pointer;
  background: #ffffff;
}
.color-palette-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f4f7fc;
  border: 1px solid #c7d3ea;
  border-radius: 4px;
  margin: 10px 0 14px;
}
.color-palette-preview .cpp-block {
  width: 80px; height: 40px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-weight: 700; font-size: 12px;
}
.color-palette-preview .cpp-text {
  font-size: 13px;
  color: #28354a;
}
.color-palette-actions {
  display: flex; gap: 8px; margin-top: 6px;
}
.color-palette-apply {
  background: #1a365d !important;
  color: #ffffff !important;
  border: 1px solid #1a365d !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.color-palette-apply:hover { background: #244977 !important; border-color: #244977 !important; }
.color-palette-reset {
  background: transparent !important;
  color: #5a6678 !important;
  border: 1px solid #c7d3ea !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.color-palette-reset:hover { background: #f4f7fc !important; }

/* === §7/V12. 타임라인 상단 리사이즈 핸들 ======================================
   V12 §4: 상단 핸들에 z-index 우선권 부여 (5 > 하단 4) + 영역 확장(10px)
   - 작은 예약 블록(20-30px)에서도 상단과 하단이 절대 겹치지 않음
   - 사용자가 정확히 잡을 수 있게 hover 시 명확한 시각 피드백 제공
   ============================================================================ */
.ev-resize-handle-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;          /* V12: 8px → 10px (잡기 쉽게) */
  cursor: ns-resize;
  z-index: 6;            /* V12: 4 → 6 (하단 핸들보다 항상 위) */
  background: transparent;
  pointer-events: auto;  /* V12: 명시적으로 hit-test 허용 */
}
.ev-resize-handle-top:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
}
.ev-resize-handle-top:hover::before {
  content: '';
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 3px;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
}
/* V12 §4: 하단 리사이즈 핸들 — 상단보다 낮은 z-index, 항상 bottom 8px 영역에서만 hit */
.ev-resize-handle {
  z-index: 4;            /* 상단(6)보다 낮음 */
  height: 8px;
  pointer-events: auto;
}
/* V13 §2-A FIX: V12에서 잘못 들어간 'position:relative' 오버라이드 제거.
   이 한 줄이 모든 예약 블록의 position을 absolute → relative로 덮어써서
   .timeline-event { top: NNNpx } 가 절대 좌표가 아닌 상대 오프셋으로 해석됨.
   결과: 모든 예약이 col의 자연 흐름 끝(=24:00 라인 아래)으로 밀려 표시되는 버그 발생.
   원본 .timeline-event 규칙 (라인 ~676) 의 position:absolute 가 정상 동작하도록 복구. */
.timeline-event { position: absolute !important; }


/* =============================================================================
   ███ V10 패치 끝 ███
   ============================================================================= */

/* =============================================================================
   ███ V11 — GNB 흐려짐 전면 차단 + 테넌트 일정 컬러 변수 + 카드 그리드 ███
   ============================================================================= */

/* === §2. GNB 모든 상태(default/hover/focus/active) Pure White + 700 + opacity 1 강제 === */
/* 지시서 §2 그대로 — 활성 시 라벤더 배지/딥네이비 색상 매핑 폐기, 시인성 100% 보장 */
.global-nav .nav-link,
.global-nav .nav-link.is-active,
.global-nav .nav-link.active,
.global-nav .nav-link.selected,
.global-nav .nav-link:hover,
.global-nav .nav-link:focus,
.global-nav .nav-link:focus-visible,
.global-nav a[href*="insights"],
.global-nav a[href*="home"],
.global-nav a[href*="spaces"],
.global-nav a[href*="admin"] {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

/* 활성/호버 시 시각 피드백은 글자 색이 아닌 '얇은 하단 인디케이터'로만 표현 */
.global-nav .nav-link {
  position: relative;
}
.global-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: transparent;
  border-radius: 0;
  transition: background 120ms ease;
}
.global-nav .nav-link:hover::after,
.global-nav .nav-link:focus::after {
  background: rgba(255, 255, 255, 0.55);
}
.global-nav .nav-link.is-active::after,
.global-nav .nav-link.active::after {
  background: #ffffff;
}

/* 모든 자식 (아이콘 + 라벨 span) 또한 흰색 + opacity 1 강제 (어떤 상태든) */
.global-nav .nav-link i,
.global-nav .nav-link span,
.global-nav .nav-link.is-active i,
.global-nav .nav-link.is-active span,
.global-nav .nav-link:hover i,
.global-nav .nav-link:hover span,
.global-nav .nav-link:focus i,
.global-nav .nav-link:focus span {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ============================================================================
   ███ V14 — 테넌트 컬러 시스템 완전 재작성 ███
   ----------------------------------------------------------------------------
   설계 원칙:
     1. 단일 진실 원천: CSS 변수 --tenant-wylie / --tenant-lush
        — DB tenants.schedule_color 값이 JS applyTenantColors()를 통해 :root에 주입
     2. 어떤 컴포넌트든 테넌트별 색상이 필요하면 .tenant-{wylie|lush} 클래스만 붙임
        — 인라인 background, 하드코딩 hex 절대 금지
     3. !important 사용은 인라인 스타일을 강제로 덮기 위함 (legacy 인라인 잔재 대응)
   ============================================================================ */

:root {
  /* V14: 변수명 간결화 — 기본값은 DB가 없을 때만 사용 (저장된 값이 즉시 :root에 주입됨) */
  --tenant-wylie: #703b96;        /* 보라색 — 와일리 */
  --tenant-lush:  #d81b60;        /* 진한 핑크 — 러쉬코리아 */
  /* V13 호환 alias — 기존 코드가 옛 변수명을 참조해도 동일한 값을 받음 */
  --wylie-schedule-color: var(--tenant-wylie);
  --lush-korea-schedule-color: var(--tenant-lush);
}

/* 1) 타임라인 예약 블록 — data-tenant-id 또는 .tenant-* 클래스 둘 다 매칭 */
.timeline-event[data-tenant-id="WYLIE"],
.timeline-event.tenant-wylie,
.reservation-block[data-tenant-id="WYLIE"],
.reservation-block.tenant-wylie,
.month-event.tenant-wylie {
  background-color: var(--tenant-wylie) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.timeline-event[data-tenant-id="LUSH"],
.timeline-event.tenant-lush,
.reservation-block[data-tenant-id="LUSH"],
.reservation-block.tenant-lush,
.month-event.tenant-lush {
  background-color: var(--tenant-lush) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* 2) 공간 페이지(legend) — 와일리/러쉬코리아 색상 점 (이미지의 그 점들) */
.legend-square.tenant-wylie,
.legend-dot.tenant-wylie,
.tenant-color-dot.tenant-wylie {
  background-color: var(--tenant-wylie) !important;
}
.legend-square.tenant-lush,
.legend-dot.tenant-lush,
.tenant-color-dot.tenant-lush {
  background-color: var(--tenant-lush) !important;
}

/* 3) 어디서든 강제 우선순위 — 인라인 스타일(.style.background) 보다 우위 */
[data-tenant-id="WYLIE"].use-tenant-bg { background-color: var(--tenant-wylie) !important; }
[data-tenant-id="LUSH"].use-tenant-bg  { background-color: var(--tenant-lush)  !important; }

/* V13 §NEW: 인사이트 내역 — 회의 목적 셀 (길이 제한 + 줄바꿈) */
.history-purpose-cell {
  max-width: 280px;
  font-size: 13px;
  color: #333;
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
}

/* V13 §NEW: 크로스테넌트 시각 신호 — 다른 소속 일정은 흐리게 + not-allowed 커서
   (관리자에게는 적용 안 됨 — JS에서 isAdmin이면 isCrossTenant=false 처리) */
.timeline-event.is-cross-tenant {
  opacity: 0.45;
  cursor: not-allowed !important;
  filter: saturate(0.6);
}
.timeline-event.is-cross-tenant:hover {
  opacity: 0.55;
}
.timeline-event.is-cross-tenant .ev-resize-handle,
.timeline-event.is-cross-tenant .ev-resize-handle-top {
  display: none !important;
}

/* === §3 — 어드민 일반 탭 카드 그리드 (디바이스 제거 → 2분할) =================== */
.summary-card-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* === §3-3. 일정 컬러 팔레트 카드 스타일 ====================================== */
.schedule-palette-box {
  background: #fafafc;
  border-radius: 11px;
  padding: 24px;
  margin-bottom: 20px;
}
.schedule-palette-box h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: #0f2647;
}
.schedule-palette-box .section-desc {
  margin: 0 0 16px;
  color: #7a7a7a;
  font-size: 13px;
}
.schedule-palette-box .picker-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.schedule-palette-box .picker-cell {
  flex: 1 1 220px;
  min-width: 200px;
}
.schedule-palette-box .picker-cell label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 13px;
  color: #0f1c2e;
}
.schedule-palette-box .picker-cell .tenant-color-picker {
  width: 100%;
  height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  padding: 4px;
  background: #fff;
}
.schedule-palette-box .picker-cell .tenant-color-hex {
  margin-top: 6px;
  font-family: monospace;
  font-size: 12px;
  color: #7a7a7a;
}

/* =============================================================================
   ███ V11 끝 ███
   ============================================================================= */

/* =============================================================================
   ███ V12 — 일괄 삭제 UI (어드민 계정 보호) ███
   ============================================================================= */

/* 체크박스 컬럼 */
.col-bulk-check {
  width: 40px !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.col-bulk-check input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #0066cc;
}
.col-bulk-check input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* admin 행 — 체크박스 영역에 시각적 잠금 표식 */
.member-table-desktop tbody tr[data-role="admin"] td.col-bulk-check {
  background: #f9fafc;
  position: relative;
}

/* [선택 일괄 삭제] 버튼 — 얇은 미니멀 스타일 */
.btn-bulk-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #d33;
  background: #fff;
  border: 1px solid #e2e2e7;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.btn-bulk-delete:hover:not(:disabled) {
  background: #fff5f5;
  border-color: #ffd2d2;
  color: #c00;
}
.btn-bulk-delete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: #9aa0aa;
}
.btn-bulk-delete.is-active {
  background: #fff5f5;
  border-color: #ffb4b4;
  color: #c00;
  font-weight: 600;
}
.btn-bulk-delete.is-active:hover {
  background: #ffe9e9;
}

/* =============================================================================
   ███ V13 — [본인 외 전체 삭제] 위험 버튼 ███
   ============================================================================= */
.btn-purge-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #c00;
  border: 1px solid #a00;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: -0.2px;
  white-space: nowrap;
  margin-right: 8px;
  box-shadow: 0 1px 2px rgba(192, 0, 0, 0.2);
}
.btn-purge-all:hover:not(:disabled) {
  background: #a00;
  border-color: #800;
  box-shadow: 0 2px 6px rgba(160, 0, 0, 0.3);
}
.btn-purge-all:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-purge-all::before {
  content: '⚠';
  margin-right: 2px;
}

/* =========================================================================
   V33 §4 — 모바일 반응형 전면 보강 (Mobile Responsive Overhaul)
   --------------------------------------------------------------------------
   사용자 보고: "모바일로 들어가면 배열이 하나도 안맞아"
   대응: 모든 페이지에서 가로 스크롤·텍스트 잘림·카드 깨짐 방지
   - 가로 스크롤 차단
   - 컨테이너 패딩 축소
   - 카드/그리드 1열 스택
   - 테이블 가로 스크롤 박스화
   - 글로벌 네비 햄버거 + 단순 배치
   ========================================================================= */

/* (A) 모바일 — 768px 이하 (스마트폰) */
@media (max-width: 768px) {
  /* 가로 스크롤 절대 방지 */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .app-shell {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 글로벌 네비 단순 배치 */
  .app-shell .global-nav,
  .app-shell .global-nav-inner {
    min-height: 56px !important;
  }
  .app-shell .global-nav-inner {
    padding: 0 14px !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }
  .app-shell .global-nav .nav-brand {
    font-size: 15px !important;
  }
  .app-shell .global-nav .nav-links {
    display: none !important;
  }
  .app-shell .global-nav .nav-hamburger {
    display: inline-flex !important;
  }
  .app-shell .global-nav .nav-user-name {
    display: none !important;
  }

  /* 컨테이너/페이지 여백 축소 */
  .page-wrap,
  .container,
  .main-content,
  .app-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100vw !important;
  }

  /* 카드 1열 스택 + 패딩 축소 */
  .app-shell .home-hero,
  .app-shell .summary-card,
  .app-shell .summary-card-item,
  .app-shell .stat-card,
  .app-shell .chart-card,
  .app-shell .insight-card,
  .app-shell .admin-content-card,
  .app-shell .management-content-card,
  .app-shell .space-card,
  .app-shell .member-card,
  .app-shell .invite-card,
  .app-shell .setting-card,
  .app-shell .setting-section-box,
  .app-shell .schedule-palette-box,
  .app-shell .palette-management-wrapper {
    padding: 16px !important;
    border-radius: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .app-shell .home-hero {
    padding: 20px 16px !important;
  }

  /* 모든 그리드 1열 */
  .app-shell .summary-card-grid-container,
  .app-shell .insight-stats-grid,
  .app-shell .stats-grid,
  .app-shell .stat-cards,
  .app-shell .summary-grid,
  .app-shell .home-grid,
  .app-shell .spaces-grid,
  .app-shell .members-grid,
  .app-shell .admin-grid,
  .app-shell .org-grid,
  .app-shell .two-col-grid,
  .app-shell .three-col-grid,
  .app-shell .four-col-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 어드민 사이드내비를 가로 스크롤 탭으로 */
  .app-shell .admin-sidebar,
  .app-shell .admin-side-nav,
  .app-shell .side-nav {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 8px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }
  .app-shell .admin-sidebar a,
  .app-shell .admin-side-nav a,
  .app-shell .side-nav a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* 테이블을 가로 스크롤 박스로 */
  .app-shell .data-table-wrapper,
  .app-shell .table-wrapper,
  .app-shell .member-table-wrap,
  .app-shell .space-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }
  .app-shell table {
    min-width: 560px !important;
    font-size: 13px !important;
  }
  .app-shell th,
  .app-shell td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* 인사이트 히트맵 가로 스크롤 */
  .app-shell .insight-heatmap,
  .app-shell .heatmap-card-panel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px !important;
  }
  .app-shell .heatmap-grid {
    min-width: 720px !important;
  }

  /* 타임라인 — 시간축 글자 축소 + 가로 스크롤 */
  .app-shell .timeline-container,
  .app-shell .month-view-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 12px !important;
  }
  .app-shell .timeline-hour-label,
  .app-shell .timeline-time {
    font-size: 11px !important;
  }

  /* 일정 블록 — 모바일에서 텍스트 축소 */
  .app-shell .event-block,
  .app-shell .timeline-block,
  .app-shell .reservation-block {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* 버튼/입력창 풀 너비 */
  .app-shell .btn-primary,
  .app-shell .btn-secondary,
  .app-shell .btn,
  .app-shell input[type="text"],
  .app-shell input[type="email"],
  .app-shell input[type="password"],
  .app-shell input[type="search"],
  .app-shell select,
  .app-shell textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 페이지 헤더 — 큰 폰트 줄이기 */
  .app-shell h1 { font-size: 22px !important; line-height: 1.3 !important; }
  .app-shell h2 { font-size: 18px !important; line-height: 1.3 !important; }
  .app-shell h3 { font-size: 16px !important; line-height: 1.3 !important; }

  /* 폼 행을 세로 스택 */
  .app-shell .form-row,
  .app-shell .filter-row,
  .app-shell .toolbar-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .app-shell .form-row > *,
  .app-shell .filter-row > *,
  .app-shell .toolbar-row > * {
    width: 100% !important;
  }

  /* 모달 풀스크린화 */
  .modal-overlay .modal,
  .modal-wrapper .modal-card {
    max-width: 94vw !important;
    width: 94vw !important;
    margin: 16px auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
  }

  /* 로그인 게이트 모바일 — 1열 스택 */
  .abnb-gate {
    padding: 24px 14px !important;
  }
  .abnb-gate__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 100% !important;
  }
  .abnb-gate__title {
    font-size: 24px !important;
  }
  .abnb-card {
    padding: 20px 16px !important;
  }
  .abnb-rooms-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* (B) 좁은 모바일 — 480px 이하 (소형 폰) */
@media (max-width: 480px) {
  .app-shell .global-nav-inner {
    padding: 0 10px !important;
  }
  .app-shell .global-nav .nav-brand {
    font-size: 14px !important;
  }
  .abnb-rooms-grid {
    grid-template-columns: 1fr !important;
  }
}

/* (C) 태블릿 — 769~1023px */
@media (min-width: 769px) and (max-width: 1023px) {
  .app-shell .global-nav-inner {
    padding: 0 18px !important;
  }
  .page-wrap,
  .container,
  .main-content,
  .app-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* 그리드 2열로 축소 */
  .app-shell .summary-card-grid-container,
  .app-shell .insight-stats-grid,
  .app-shell .stats-grid,
  .app-shell .stat-cards {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 어드민 사이드내비는 유지하되 폭 축소 */
  .app-shell .admin-sidebar,
  .app-shell .admin-side-nav {
    width: 180px !important;
  }
}
/* === V33 §4 END === */

/* =========================================================================
   V34 — 사용자 5종 긴급 보고 패치
   --------------------------------------------------------------------------
   §1 로그인 버튼 안 보임
   §2 공간 타임라인 00:00 잘림 + 헤더 색점 잘림
   §3 모바일 룸 헤더 라운드로 글자 잘림
   §4 앞으로의 일정 시간 색이 분홍 → 검정
   §5 홈 화면 신규 대시보드 카드 디자인
   ========================================================================= */

/* ▣ V34 §1 — 로그인 버튼 가시성 절대 강제 (브라우저별 그라디언트 fallback) */
.abnb-btn.abnb-btn--gradient,
button.abnb-btn--gradient,
button[type="submit"].abnb-btn {
  display: block !important;
  width: 100% !important;
  min-height: 52px !important;
  height: 52px !important;
  margin-top: 12px !important;
  padding: 0 !important;
  /* 단색 fallback → 그라디언트 */
  background-color: #FF385C !important;
  background-image: linear-gradient(90deg, #E31C5F 0%, #FF385C 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(255,56,92,0.30) !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
  position: relative !important;
}
.abnb-btn.abnb-btn--gradient:hover,
button.abnb-btn--gradient:hover {
  background-color: #E31C5F !important;
  background-image: linear-gradient(90deg, #D70466 0%, #E31C5F 100%) !important;
  box-shadow: 0 6px 18px rgba(255,56,92,0.42) !important;
  transform: translateY(-1px) !important;
}
.abnb-btn.abnb-btn--gradient:active,
button.abnb-btn--gradient:active {
  transform: translateY(0) !important;
}

/* ▣ V34 §2 — 공간 타임라인 상단 00:00 잘림 + 컨테이너 overflow 해결 */
.app-shell .timeline-container,
.app-shell .month-view-container {
  overflow: visible !important;
  padding-top: 20px !important;
}
.app-shell .timeline-container .timeline-scroll,
.app-shell .timeline-viewport-container {
  overflow-x: auto !important;
  overflow-y: visible !important;
}
/* 첫 시간 라벨(00:00)이 카드 라운드 안으로 묻히지 않도록 위 패딩 부여 */
.app-shell .timeline-grid,
.app-shell .timeline-body {
  padding-top: 8px !important;
}
.app-shell .timeline-hour-label:first-child,
.app-shell .timeline-time:first-child {
  margin-top: 4px !important;
}
/* 헤더 셀의 컬러 닷이 카드 라운드 모서리에 걸리지 않도록 */
.app-shell .timeline-header-cell {
  padding-top: 14px !important;
  padding-left: 12px !important;
  overflow: visible !important;
}
.app-shell .timeline-header-cell .space-dot {
  flex-shrink: 0 !important;
}

/* ▣ V34 §3 — 모바일 룸 헤더 잘림 해결 (Meeting Room A/B/C 글자 + 색점) */
@media (max-width: 768px) {
  .app-shell .timeline-container {
    padding: 12px 8px !important;
    border-radius: 12px !important;
    overflow: visible !important;
  }
  .app-shell .timeline-container .timeline-scroll,
  .app-shell .timeline-viewport-container {
    border-radius: 8px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .app-shell .timeline-header-cell {
    padding: 10px 6px 8px 6px !important;
    min-width: 88px !important;
    overflow: visible !important;
  }
  .app-shell .timeline-header-cell .space-name {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  .app-shell .timeline-header-cell .space-dot {
    width: 7px !important;
    height: 7px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  .app-shell .timeline-header-cell .space-name-prefix {
    font-size: 10px !important;
    color: #717171 !important;
  }
  .app-shell .timeline-header-cell .space-name-suffix {
    font-size: 13px !important;
    color: #222 !important;
  }
  /* 룸이 많으면 그리드를 실제 콘텐츠 폭까지 넓혀 가로 스와이프 가능하게.
     (이전 min-width:100% !important 는 JS 가 inline 으로 주는 픽셀 min-width 를 덮어
      그리드를 화면폭으로 눌러버려 → 넘치는 룸이 overflow:hidden 에 잘렸음) */
  .app-shell .timeline-grid {
    min-width: max-content !important;
  }
  /* 스와이프 affordance — 얇은 가로 스크롤바 노출로 '옆으로 넘길 수 있음'을 인지시킴 */
  .app-shell .timeline-container .timeline-scroll::-webkit-scrollbar {
    height: 4px !important;
  }
  .app-shell .timeline-container .timeline-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2) !important;
    border-radius: 4px !important;
  }
  .app-shell .timeline-container .timeline-scroll::-webkit-scrollbar-track {
    background: transparent !important;
  }
  /* 첫 시간 라벨 00:00이 카드 위 라인에 닿지 않게 추가 마진 */
  .app-shell .timeline-hour-label:first-child,
  .app-shell .timeline-time:first-child {
    margin-top: 6px !important;
    padding-top: 4px !important;
  }
}

/* ▣ V34 §4 — 앞으로의 일정 시간 색을 핑크에서 검정/다크 그레이로 강제 */
.app-shell .upcoming-row .time,
.app-shell .upcoming-row .time *,
.app-shell .upcoming-row .time i,
.upcoming-row .time,
.upcoming-row .time * {
  color: #222222 !important;
  -webkit-text-fill-color: #222222 !important;
  font-weight: 600 !important;
}
.app-shell .upcoming-row .time i {
  color: #717171 !important;
  -webkit-text-fill-color: #717171 !important;
}

/* ▣ V34 §5 — 홈 V34 대시보드 신규 디자인 토큰
   ============================================
   기존 단조로운 home-hero + upcoming-section 구조 폐기
   → 6개 카드(인사 / 오늘 / 다음 일정 / 통계 / 활동 / 빠른 진입)로 한눈에 보이는 대시보드
*/
.app-shell .v34-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.app-shell .v34-card {
  background: #ffffff !important;
  border: 1px solid #ebebeb !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.app-shell .v34-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
.app-shell .v34-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.app-shell .v34-card__title {
  font-size: 13px;
  font-weight: 600;
  color: #717171;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.app-shell .v34-card__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
}
.app-shell .v34-card__big {
  font-size: 36px;
  font-weight: 800;
  color: #222;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.app-shell .v34-card__sub {
  font-size: 13px;
  color: #717171;
  margin: 4px 0 0 0;
}
/* 인사 카드 — 전체 폭, 핑크 그라디언트 */
.app-shell .v34-card--greet {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #FF385C 0%, #E31C5F 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 28px 32px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(255,56,92,0.22) !important;
}
.app-shell .v34-card--greet .v34-greet-text h2 {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff !important;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}
.app-shell .v34-card--greet .v34-greet-text p {
  font-size: 15px;
  color: rgba(255,255,255,0.92) !important;
  margin: 0;
}
.app-shell .v34-card--greet .v34-greet-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 12px 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.app-shell .v34-card--greet .v34-greet-date-month {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.app-shell .v34-card--greet .v34-greet-date-day {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1;
  margin-top: 2px;
}

/* 다음 일정 카드 */
.app-shell .v34-card--next .v34-card__icon { background: #FFE4EA; color: #FF385C; }
.app-shell .v34-next-time {
  font-size: 24px;
  font-weight: 700;
  color: #222;
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
}
.app-shell .v34-next-title {
  font-size: 15px;
  color: #484848;
  margin: 0 0 12px 0;
  font-weight: 500;
}
.app-shell .v34-next-space {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #717171;
  background: #f7f7f7;
  border-radius: 999px;
  padding: 6px 12px;
}
.app-shell .v34-next-empty {
  color: #717171;
  font-size: 14px;
  padding: 12px 0;
}

/* 통계 카드 */
.app-shell .v34-card--stat .v34-card__icon { background: #E8F5FF; color: #0066cc; }
.app-shell .v34-card--stat2 .v34-card__icon { background: #FFF4E5; color: #F59E0B; }
.app-shell .v34-stat-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.app-shell .v34-stat-unit {
  font-size: 14px;
  color: #717171;
  font-weight: 500;
}

/* 빠른 진입 카드 */
.app-shell .v34-card--quick {
  grid-column: 1 / -1;
}
.app-shell .v34-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.app-shell .v34-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  background: #f7f7f7;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  color: #222;
}
.app-shell .v34-quick-item:hover {
  background: #FFE4EA;
  border-color: #FF385C;
  transform: translateY(-2px);
}
.app-shell .v34-quick-item i {
  font-size: 22px;
  color: #FF385C;
}
.app-shell .v34-quick-item span {
  font-size: 13px;
  font-weight: 600;
  color: #222;
}

/* 오늘의 일정 카드 (전체 폭) */
.app-shell .v34-card--today {
  grid-column: 1 / -1;
}
.app-shell .v34-card--today .v34-card__icon { background: #E5F8EE; color: #008A05; }
.app-shell .v34-today-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.app-shell .v34-today-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #f7f7f7;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.app-shell .v34-today-row:hover {
  background: #FFE4EA;
  transform: translateX(3px);
}
.app-shell .v34-today-time {
  font-size: 14px;
  font-weight: 700;
  color: #222 !important;
  -webkit-text-fill-color: #222 !important;
  min-width: 110px;
  font-variant-numeric: tabular-nums;
}
.app-shell .v34-today-title {
  font-size: 14px;
  color: #484848;
  flex: 1;
  font-weight: 500;
}
.app-shell .v34-today-space {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #717171;
  white-space: nowrap;
}
.app-shell .v34-today-empty {
  color: #717171;
  font-size: 14px;
  padding: 20px 0;
  text-align: center;
}

/* 모바일 — 1열로 스택 + 빠른 진입 2열 */
@media (max-width: 768px) {
  .app-shell .v34-dashboard {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .app-shell .v34-card { padding: 18px !important; }
  .app-shell .v34-card--greet { padding: 22px 20px !important; }
  .app-shell .v34-card--greet .v34-greet-text h2 { font-size: 22px !important; }
  .app-shell .v34-card__big { font-size: 28px !important; }
  .app-shell .v34-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .app-shell .v34-today-time { min-width: 90px !important; font-size: 13px !important; }
  .app-shell .v34-today-row { padding: 10px 12px !important; gap: 10px !important; }
}
/* === V34 END === */

/* =========================================================================
   V35 — 사용자 2종 추가 보고 패치
   --------------------------------------------------------------------------
   §1 받은 초대 카드 클릭 시 모달 팝업 (스크롤 번거로움 해결)
   §2 공간 타임라인 00:00 위 선 제거 + 첫 라벨 자연스럽게
   ========================================================================= */

/* ▣ V35 §1 — 받은 초대 카드 호버/클릭 인터랙션 */
.app-shell .v34-card.v34-invite-clickable {
  cursor: pointer !important;
  position: relative;
}
.app-shell .v34-card.v34-invite-clickable:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(245,158,11,0.18) !important;
  border-color: #F59E0B !important;
}
.app-shell .v34-card.v34-invite-clickable:hover .v34-card__icon {
  background: #F59E0B !important;
  color: #ffffff !important;
}
.app-shell .v34-card.v34-invite-clickable:active {
  transform: translateY(-1px);
}
.app-shell .v34-card.v34-invite-disabled {
  cursor: default !important;
}
.app-shell .v34-card.v34-invite-disabled:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* ▣ V35 §1 — 받은 초대 모달 (V35 디자인) */
.v35-invite-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: v35-fade-in 0.18s ease-out;
}
@keyframes v35-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.v35-invite-modal {
  background: #ffffff;
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.30);
  animation: v35-slide-up 0.22s ease-out;
}
@keyframes v35-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.v35-invite-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid #ebebeb;
  flex-shrink: 0;
}
.v35-invite-modal__title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.v35-invite-modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #484848;
  font-size: 14px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.v35-invite-modal__close:hover {
  background: #ebebeb;
  color: #222;
}
.v35-invite-modal__body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v35-invite-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  background: #f7f7f7;
  border: 1px solid #ebebeb;
  border-radius: 14px;
  transition: all 0.15s ease;
}
.v35-invite-item:hover {
  background: #ffffff;
  border-color: #d0d0d0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.v35-invite-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v35-invite-item__title {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.v35-invite-item__meta {
  font-size: 13px;
  color: #484848;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.v35-invite-item__owner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.v35-invite-item__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.v35-invite-accept,
.v35-invite-decline {
  min-width: 84px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.v35-invite-accept {
  background: linear-gradient(135deg, #FF385C 0%, #E31C5F 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(255,56,92,0.22);
}
.v35-invite-accept:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(255,56,92,0.32);
  transform: translateY(-1px);
}
.v35-invite-decline {
  background: #ffffff;
  color: #717171;
  border: 1px solid #ebebeb;
}
.v35-invite-decline:hover {
  background: #f7f7f7;
  color: #484848;
  border-color: #d0d0d0;
}
/* 모달 모바일 적응 */
@media (max-width: 768px) {
  .v35-invite-overlay { padding: 12px; }
  .v35-invite-modal { max-height: 92vh; border-radius: 16px; }
  .v35-invite-modal__head { padding: 16px 18px; }
  .v35-invite-modal__body { padding: 12px 18px 18px; }
  .v35-invite-item {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
  }
  .v35-invite-item__actions {
    flex-direction: row;
    width: 100%;
  }
  .v35-invite-accept,
  .v35-invite-decline {
    flex: 1;
    min-width: 0;
  }
}

/* ▣ V35 §2 — 공간 타임라인 00:00 위 선 제거 + 첫 라벨 자연스럽게
   ============================================================
   원인:
     (1) .timeline-header-cell { border-bottom: 1px solid var(--hairline) }
         → 헤더와 첫 시간 셀 사이를 가르는 "선"이 사용자가 본 그 선.
     (2) .timeline-time-cell { top: -6px }
         → 시간 셀이 위로 -6px 끌어올려져 있어 00:00이 헤더 영역으로 침범 → 잘림.
   해결:
     - 헤더 셀의 border-bottom 제거 (또는 흐릿한 분리선으로 대체)
     - 첫 시간 셀의 top: -6px를 0으로 되돌리고 padding-top으로 여유
     - 헤더 자체를 padding-bottom 늘려 첫 라벨과 자연스러운 간격
*/
.app-shell .timeline-header-cell {
  border-bottom: none !important;
  padding-bottom: 14px !important;
  /* 그림자로 부드러운 분리감만 부여 */
  box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
}
.app-shell .timeline-time-col {
  border-right: 1px solid #ebebeb !important;
  background: #ffffff !important;
}
/* 시간 셀의 음수 top 제거 — 헤더 안으로 침범하지 않게 */
.app-shell .timeline-time-cell {
  top: 0 !important;
  padding-top: 0 !important;
}
/* 첫 시간 셀(00:00)에는 충분한 여백을 줘서 헤더와 자연스럽게 떨어지게 */
.app-shell .timeline-time-cell:first-child {
  padding-top: 16px !important;
  margin-top: 0 !important;
  color: #484848 !important;
  font-weight: 600 !important;
  height: auto !important;
  min-height: 40px !important;
  overflow: visible !important;
}
/* 시간 컬럼 자체에도 상단 여유를 둬서 첫 라벨이 잘리지 않게 */
.app-shell .timeline-time-col {
  padding-top: 4px !important;
  overflow: visible !important;
}
/* 타임라인 컨테이너 상단 패딩을 줄이고 카드 안쪽으로 자연스럽게 */
.app-shell .timeline-container,
.app-shell .month-view-container {
  padding-top: 0 !important;
  overflow: visible !important;
}
.app-shell .timeline-grid,
.app-shell .timeline-body {
  padding-top: 0 !important;
}
/* 모바일에서도 동일하게 — V34 §3 룰 덮어쓰기 */
@media (max-width: 768px) {
  .app-shell .timeline-container {
    padding-top: 8px !important;
  }
  .app-shell .timeline-header-cell {
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
    padding-bottom: 10px !important;
  }
  .app-shell .timeline-time-cell:first-child {
    padding-top: 8px !important;
  }
  .app-shell .timeline-hour-label:first-child,
  .app-shell .timeline-time:first-child {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
}
/* === V35 END === */

/* =========================================================================
   ▣ V36 — Tesla-inspired Design System (로그인 페이지/.abnb-gate 제외, 내부 앱만)
   =========================================================================
   사용자 요청 (V35 → V36):
     1. 모든 내부 페이지(홈/공간/인사이트/관리)를 Tesla 사이트(tesla.com/ko_kr)처럼 변경
     2. 메인 로그인/접속 페이지는 그대로 유지 → .abnb-gate 스코프는 절대 건드리지 않음
     3. 스타일만 변경 — 기능/마크업은 그대로
     4. PC/모바일 최적화 — 짤림/이탈/터치 영역 모두 보정
     5. 분홍색(#FF385C)을 다른 색으로 → Electric Blue (#3E6AE1)
     6. 버튼/메뉴 글자 가시성 절대 강제
     7. 로고도 완전히 새 디자인 (app.js .tesla-brand 마크업 + 아래 CSS)

   디자인 토큰 (DESIGN-tesla.md 발췌):
     - Electric Blue   #3E6AE1   primary CTA only
     - Carbon Dark     #171A20   heading, nav text
     - Graphite        #393C41   body text
     - Pewter          #5C5E62   tertiary text
     - Silver Fog      #8E8E8E   placeholder, disabled
     - Cloud Gray      #EEEEEE   borders, dividers
     - Pale Silver     #D0D1D2   subtle borders
     - Light Ash       #F4F4F4   alternate surface
     - Pure White      #FFFFFF   dominant background
   원칙: 4px radius, no shadow, no gradient, 0.33s transitions, weight 400/500만
   ========================================================================= */

/* (V36-1) .app-shell 토큰 전체 재정의 — V32 에어비앤비 토큰 위로 덮어쓰기
   ※ .abnb-gate(로그인 페이지)는 .app-shell이 아니라 영향 없음 */
.app-shell {
  --parchment:    #FFFFFF !important;   /* 본문 베이스 = 순백 (Tesla는 흰색 캔버스) */
  --canvas:       #FFFFFF !important;
  --hairline:     #EEEEEE !important;   /* Cloud Gray */
  --divider-soft: #F4F4F4 !important;   /* Light Ash */
  --primary:      #3E6AE1 !important;   /* Electric Blue */
  --primary-focus:#2A56D1 !important;   /* darker Electric Blue */
  --ink:          #171A20 !important;   /* Carbon Dark */
  --ink-80:       #393C41 !important;   /* Graphite */
  --ink-48:       #5C5E62 !important;   /* Pewter */
  --shadow-product: none !important;
  --shadow-soft:    none !important;
  --r-xs: 4px !important;
  --r-sm: 4px !important;
  --r-md: 4px !important;
  --r-lg: 4px !important;
  /* Tesla 톤 캔버스 */
  background: #FFFFFF !important;
  color: #393C41;
}
.app-shell .page-wrap {
  background: #FFFFFF !important;
}

/* (V36-2) 모든 카드/패널/박스 → Tesla flat 화이트 (그림자/라운드 제거) */
.app-shell .home-hero,
.app-shell .upcoming-section,
.app-shell .timeline-container,
.app-shell .timeline-card,
.app-shell .insight-card,
.app-shell .insight-heatmap,
.app-shell .insight-stats-grid > .stat-card,
.app-shell .stat-card,
.app-shell .summary-card,
.app-shell .summary-card-item,
.app-shell .summary-card-grid-container,
.app-shell .chart-card,
.app-shell .data-table-wrapper,
.app-shell .admin-content-card,
.app-shell .admin-card,
.app-shell .setting-card,
.app-shell .setting-section-box,
.app-shell .schedule-palette-box,
.app-shell .color-palette-card,
.app-shell .palette-management-wrapper,
.app-shell .management-content-card,
.app-shell .repeat-panel,
.app-shell .org-panel,
.app-shell .space-card,
.app-shell .member-card,
.app-shell .invite-card,
.app-shell .invites-section,
.app-shell .invite-status-banner,
.app-shell .invite-action-banner,
.app-shell .space-filter-panel,
.app-shell .month-view-container,
.app-shell .heatmap-card-panel,
.app-shell .v34-card,
.app-shell .v34-dashboard > * {
  background: #FFFFFF !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-radius: 4px !important;
  border: 1px solid #EEEEEE !important;
  background-image: none !important;
}

/* 사이드/관리자 내비도 동일 */
.app-shell .admin-side-nav,
.app-shell .side-nav,
.app-shell .admin-sidebar {
  background: #FFFFFF !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  border: 1px solid #EEEEEE !important;
}

/* (V36-3) Global Nav — Tesla floating bar 느낌, no shadow, no border-bottom */
.app-shell .global-nav,
.app-shell .global-nav-inner {
  background: #FFFFFF !important;
  box-shadow: none !important;
  border-bottom: 1px solid #EEEEEE !important;
}
.app-shell .global-nav {
  border-bottom: none !important;
}
.app-shell .global-nav-inner {
  padding: 12px 24px !important;
}

/* 네비 텍스트: Carbon Dark, 4px radius, hover 시 Light Ash */
.app-shell .global-nav .nav-brand,
.app-shell .global-nav .nav-brand *,
.app-shell .global-nav .nav-link,
.app-shell .global-nav .nav-link *,
.app-shell .global-nav .nav-link i,
.app-shell .global-nav .nav-link span,
.app-shell .global-nav .nav-user-name,
.app-shell .global-nav .nav-hamburger,
.app-shell .global-nav .nav-hamburger * {
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  text-shadow: none !important;
}
.app-shell .global-nav .nav-brand {
  color: #171A20 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.app-shell .global-nav .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  background: transparent !important;
  transition: background-color 0.33s, color 0.33s !important;
  min-height: 32px !important;
}
.app-shell .global-nav .nav-link:hover {
  background: #F4F4F4 !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
}
.app-shell .global-nav .nav-link.is-active,
.app-shell .global-nav .nav-link.active {
  background: #F4F4F4 !important;
  color: #3E6AE1 !important;
  -webkit-text-fill-color: #3E6AE1 !important;
}
.app-shell .global-nav .nav-link.is-active i,
.app-shell .global-nav .nav-link.active i {
  color: #3E6AE1 !important;
  -webkit-text-fill-color: #3E6AE1 !important;
}

/* 햄버거 바 = Carbon Dark */
.app-shell .global-nav .nav-hamburger .hb-bar {
  background: #171A20 !important;
}
.app-shell .global-nav .nav-hamburger:hover .hb-bar {
  background: #3E6AE1 !important;
}

/* 아바타 → Electric Blue 단색 (그라디언트 제거) */
.app-shell .global-nav .nav-avatar {
  background: #3E6AE1 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

/* (V36-4) ▣ 새 로고 (.tesla-brand) 스타일
   기존 .brand-bars 막대 로고를 SVG 모노그램 + 자간 워드마크로 교체 */
.app-shell .tesla-brand {
  color: #171A20 !important;
  text-decoration: none !important;
}
.app-shell .tesla-logo-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: #171A20 !important;
  flex-shrink: 0 !important;
}
.app-shell .tesla-logo-mark svg {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
}
.app-shell .tesla-logo-wordmark {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 1 !important;
  gap: 2px !important;
}
.app-shell .tesla-logo-eng {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.32em !important;   /* Tesla 워드마크 식 자간 */
  text-indent: 0.32em !important;       /* 마지막 자간 보정 */
  color: #171A20 !important;
  text-transform: uppercase !important;
}
.app-shell .tesla-logo-kor {
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
  color: #5C5E62 !important;
  white-space: nowrap !important;
}

/* (V36-5) 본문 텍스트 컬러 통일 */
.app-shell,
.app-shell h1, .app-shell h2, .app-shell h3, .app-shell h4, .app-shell h5, .app-shell h6 {
  color: #171A20 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}
.app-shell p, .app-shell li, .app-shell td, .app-shell th, .app-shell label, .app-shell span, .app-shell div {
  letter-spacing: 0 !important;
}
.app-shell .stat-label,
.app-shell .stat-trend,
.app-shell .summary-card-text,
.app-shell .text-muted,
.app-shell .muted,
.app-shell small {
  color: #5C5E62 !important;
  -webkit-text-fill-color: #5C5E62 !important;
}

/* (V36-6) 모든 분홍/그라디언트/핑크 → Electric Blue 한 곳에서 박살내기 */
.app-shell [style*="#FF385C"],
.app-shell [style*="#E31C5F"],
.app-shell [style*="rgb(255, 56, 92)"],
.app-shell [style*="rgb(227, 28, 95)"] {
  /* 인라인 style의 색은 직접 못 잡지만 동일 시각 효과 위해 보조 */
}

/* 그라디언트가 들어간 모든 헤더/배너/카드 → flat 화이트 */
.app-shell .v34-card,
.app-shell .v34-card--greet,
.app-shell .v34-card--next,
.app-shell .v34-card--stat,
.app-shell .v34-card--stat2,
.app-shell .v34-card--quick,
.app-shell .v34-card--today {
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #EEEEEE !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #171A20 !important;
}
.app-shell .v34-card *,
.app-shell .v34-card h1,
.app-shell .v34-card h2,
.app-shell .v34-card h3,
.app-shell .v34-card p,
.app-shell .v34-card span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
.app-shell .v34-card .v34-card__title,
.app-shell .v34-card h2,
.app-shell .v34-card h3 {
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  font-weight: 600 !important;
}
.app-shell .v34-card .v34-card__sub,
.app-shell .v34-card .v34-card__meta {
  color: #5C5E62 !important;
  -webkit-text-fill-color: #5C5E62 !important;
}

/* greet 카드(분홍 그라디언트) → 흰 카드 + 좌측 Electric Blue 액센트 라인 */
.app-shell .v34-card--greet {
  position: relative !important;
  padding-left: 24px !important;
}
.app-shell .v34-card--greet::before {
  content: "" !important;
  position: absolute !important;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: #3E6AE1 !important;
  border-radius: 0 !important;
}

/* next 카드의 강조 텍스트가 분홍이면 → Electric Blue */
.app-shell .v34-card--next .v34-next-time,
.app-shell .v34-card--next strong,
.app-shell .v34-card--next b {
  color: #3E6AE1 !important;
  -webkit-text-fill-color: #3E6AE1 !important;
}

/* 받은 초대(클릭 가능) 호버 → 분홍 그림자 대신 Electric Blue 보더 */
.app-shell .v34-card.v34-invite-clickable {
  cursor: pointer !important;
  transition: border-color 0.33s, transform 0.33s !important;
}
.app-shell .v34-card.v34-invite-clickable:hover {
  transform: none !important;
  border-color: #3E6AE1 !important;
  box-shadow: none !important;
}
.app-shell .v34-card.v34-invite-disabled {
  cursor: default !important;
  opacity: 0.85 !important;
}

/* (V36-7) 모든 버튼 — Tesla flat 4px radius */
.app-shell .btn,
.app-shell .btn-primary,
.app-shell button:not(.nav-hamburger):not(.mobile-nav-close):not([class*="v35-invite"]),
.app-shell .v34-card button,
.app-shell .quick-action-btn,
.app-shell .v34-quick-btn {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border-radius: 4px !important;
  border: 1px solid #D0D1D2 !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  box-shadow: none !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  transition: background-color 0.33s, border-color 0.33s, color 0.33s !important;
  cursor: pointer !important;
  text-shadow: none !important;
}
.app-shell .btn:hover,
.app-shell button:not(.nav-hamburger):not(.mobile-nav-close):not([class*="v35-invite"]):hover {
  background: #F4F4F4 !important;
  border-color: #5C5E62 !important;
}

/* Primary 버튼 = Electric Blue */
.app-shell .btn-primary,
.app-shell .btn.is-primary,
.app-shell button.primary,
.app-shell .v34-quick-btn--primary,
.app-shell button[type="submit"]:not(.v35-invite-decline) {
  background: #3E6AE1 !important;
  background-image: none !important;
  border-color: #3E6AE1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.app-shell .btn-primary:hover,
.app-shell .btn.is-primary:hover,
.app-shell button.primary:hover,
.app-shell .v34-quick-btn--primary:hover,
.app-shell button[type="submit"]:not(.v35-invite-decline):hover {
  background: #2A56D1 !important;
  border-color: #2A56D1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Danger/Delete 버튼은 회색으로 (Tesla는 빨강/분홍 안 씀) → 단, 텍스트만 살짝 어둡게 */
.app-shell .btn-danger,
.app-shell button.danger,
.app-shell .btn-delete {
  background: #FFFFFF !important;
  border-color: #D0D1D2 !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
}
.app-shell .btn-danger:hover,
.app-shell button.danger:hover,
.app-shell .btn-delete:hover {
  background: #F4F4F4 !important;
  border-color: #393C41 !important;
}

/* (V36-8) 모달 — V35 invite 모달 accept 버튼은 그라디언트 → flat Electric Blue */
.v35-invite-accept,
.app-shell .v35-invite-accept {
  background: #3E6AE1 !important;
  background-image: none !important;
  border: 1px solid #3E6AE1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}
.v35-invite-accept:hover,
.app-shell .v35-invite-accept:hover {
  background: #2A56D1 !important;
  border-color: #2A56D1 !important;
  box-shadow: none !important;
  transform: none !important;
}
.v35-invite-decline {
  border-radius: 4px !important;
  background: #FFFFFF !important;
  border: 1px solid #D0D1D2 !important;
  color: #393C41 !important;
}
.v35-invite-modal {
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18) !important;
}

/* 예약 모달(기존 #reservation-modal)도 Tesla 톤으로 — 단 모달은 .app-shell 밖에 있을 수 있어 보강 */
.reservation-modal,
.modal-content {
  border-radius: 8px !important;
}
.reservation-modal .btn-primary,
.modal-content .btn-primary,
.reservation-modal button[type="submit"],
.modal-content button[type="submit"] {
  background: #3E6AE1 !important;
  background-image: none !important;
  border-color: #3E6AE1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* (V36-9) 입력/폼 */
.app-shell input[type="text"],
.app-shell input[type="email"],
.app-shell input[type="password"],
.app-shell input[type="number"],
.app-shell input[type="date"],
.app-shell input[type="time"],
.app-shell input[type="search"],
.app-shell input[type="tel"],
.app-shell input[type="url"],
.app-shell select,
.app-shell textarea {
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #D0D1D2 !important;
  border-radius: 4px !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  min-height: 40px !important;
  box-shadow: none !important;
  transition: border-color 0.33s !important;
}
.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus {
  outline: none !important;
  border-color: #3E6AE1 !important;
  box-shadow: 0 0 0 2px rgba(62,106,225,0.18) !important;
}
.app-shell input::placeholder,
.app-shell textarea::placeholder {
  color: #8E8E8E !important;
  -webkit-text-fill-color: #8E8E8E !important;
}

/* (V36-10) 탭/필터 칩 — 분홍 활성 → Electric Blue */
.app-shell .tab-btn.is-active,
.app-shell .tab.is-active,
.app-shell .filter-chip.is-active,
.app-shell .chip.is-active,
.app-shell .segment.is-active,
.app-shell button.is-active {
  background: #3E6AE1 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #3E6AE1 !important;
}
.app-shell .tab-btn,
.app-shell .tab,
.app-shell .filter-chip,
.app-shell .chip,
.app-shell .segment {
  border-radius: 4px !important;
  background: #FFFFFF !important;
  border: 1px solid #D0D1D2 !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
}

/* (V36-11) 배지 — 분홍 → Electric Blue 또는 회색 */
.app-shell .badge,
.app-shell .pill,
.app-shell .tag {
  border-radius: 4px !important;
  background: #F4F4F4 !important;
  color: #393C41 !important;
  -webkit-text-fill-color: #393C41 !important;
  border: 1px solid #EEEEEE !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
}
.app-shell .badge.is-primary,
.app-shell .badge--primary,
.app-shell .pill.is-primary,
.app-shell .tag.is-primary {
  background: #3E6AE1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #3E6AE1 !important;
}

/* (V36-12) 타임라인 그리드 — 핑크 예약 블록 처리는 인라인 스타일이라 보강하기 어려움 →
   대신 타임라인 컨테이너 자체를 flat 화이트로 통일, 헤더 보더만 회색 */
.app-shell .timeline-container {
  border-radius: 4px !important;
}
.app-shell .timeline-header-cell {
  background: #FFFFFF !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 #EEEEEE !important;
  color: #171A20 !important;
}
.app-shell .timeline-header-cell .space-name,
.app-shell .timeline-header-cell .space-name-text {
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  font-weight: 500 !important;
}
/* 룸 이름 전체 표시 — '...' 대신 줄바꿈으로 전부 보이게 (nowrap/ellipsis 오버라이드) */
.app-shell .timeline-header-cell .space-name,
.app-shell .timeline-header-cell .space-name-text,
.app-shell .timeline-header-cell .space-name-prefix,
.app-shell .timeline-header-cell .space-name-suffix,
.app-shell .timeline-header-cell .space-name > span:not(.space-dot) {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex-wrap: wrap !important;
  word-break: break-word !important;
}
/* 시간 셀(00:00 ...) */
.app-shell .timeline-time-col {
  background: #FFFFFF !important;
  border-right: 1px solid #EEEEEE !important;
}
.app-shell .timeline-time-cell {
  color: #5C5E62 !important;
  -webkit-text-fill-color: #5C5E62 !important;
  font-weight: 400 !important;
}
.app-shell .timeline-time-cell:first-child {
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  font-weight: 500 !important;
}

/* 예약 블록 — 호버 시 보더만 변경, 그림자 없음 */
.app-shell .reservation-block,
.app-shell .timeline-event,
.app-shell .reservation-cell {
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* (V36-13) 사이드 드로어(모바일 햄버거 메뉴) */
.app-shell .mobile-nav-overlay {
  background: rgba(23,26,32,0.55) !important;
}
.app-shell .mobile-nav-drawer,
.mobile-nav-drawer {
  background: #FFFFFF !important;
  border-radius: 0 !important;
}
.mobile-nav-brand {
  color: #171A20 !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
}
.mobile-nav-item {
  color: #171A20 !important;
  border-radius: 4px !important;
  background: transparent !important;
}
.mobile-nav-item:hover {
  background: #F4F4F4 !important;
}
.mobile-nav-item.is-active {
  background: #F4F4F4 !important;
  color: #3E6AE1 !important;
}
.mobile-nav-item.is-active i {
  color: #3E6AE1 !important;
}
.mobile-nav-close {
  color: #171A20 !important;
  background: transparent !important;
}

/* (V36-14) 사이드 라벨(좌측 거대 텍스트 '메이트리그라운드') Tesla 톤으로 */
.app-shell .side-label {
  color: #EEEEEE !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
}

/* (V36-15) 일반 링크/액션 텍스트 — 분홍 → Electric Blue */
.app-shell a:not(.nav-brand):not(.nav-link):not(.mobile-nav-item):not(.tesla-brand) {
  color: #3E6AE1 !important;
  -webkit-text-fill-color: #3E6AE1 !important;
  text-decoration: none !important;
}
.app-shell a:not(.nav-brand):not(.nav-link):not(.mobile-nav-item):not(.tesla-brand):hover {
  text-decoration: underline !important;
}

/* (V36-16) 테이블 */
.app-shell table {
  background: #FFFFFF !important;
  border-radius: 4px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.app-shell table th {
  background: #F4F4F4 !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-bottom: 1px solid #EEEEEE !important;
  letter-spacing: 0 !important;
}
.app-shell table td {
  color: #393C41 !important;
  -webkit-text-fill-color: #393C41 !important;
  border-bottom: 1px solid #F4F4F4 !important;
}

/* (V36-17) 차트 카드 등 정렬 */
.app-shell .chart-card canvas,
.app-shell .insight-heatmap canvas {
  background: transparent !important;
}

/* (V36-18) 입력/검색 바 */
.app-shell .search-bar,
.app-shell .filter-bar {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* (V36-19) 토글/체크박스 — 분홍 → Electric Blue */
.app-shell input[type="checkbox"],
.app-shell input[type="radio"] {
  accent-color: #3E6AE1 !important;
}

/* (V36-20) 모든 분홍 inline 컬러(boxes that set background:#FF385C via JS) 보강 */
.app-shell [data-accent="primary"],
.app-shell .accent-primary {
  background: #3E6AE1 !important;
  color: #FFFFFF !important;
}

/* (V36-21) 반응형 — 모바일 우선 보정
   화면 짤림/이탈/터치 영역 모두 정상화 */
@media (max-width: 768px) {
  /* 글로벌 네비 좌우 패딩 축소 + 로고 자간 축소 */
  .app-shell .global-nav-inner {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .app-shell .tesla-logo-eng {
    font-size: 11px !important;
    letter-spacing: 0.24em !important;
    text-indent: 0.24em !important;
  }
  .app-shell .tesla-logo-kor {
    font-size: 9px !important;
  }
  .app-shell .tesla-logo-mark {
    width: 28px !important;
    height: 28px !important;
  }
  .app-shell .tesla-logo-mark svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* 본문 컨테이너 좌우 패딩이 너무 좁으면 보강 */
  .app-shell .page-wrap,
  .app-shell main,
  .app-shell .content-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* 카드/패널 가로 넘침 방지 */
  .app-shell .v34-card,
  .app-shell .stat-card,
  .app-shell .summary-card,
  .app-shell .timeline-container,
  .app-shell .insight-card,
  .app-shell .admin-content-card {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .app-shell .timeline-container {
    /* 타임라인은 가로 스크롤 허용 — 안에서 처리 */
    overflow: visible !important;
  }
  .app-shell .timeline-container .timeline-scroll,
  .app-shell .timeline-viewport-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 모든 버튼 최소 터치 영역 44px (WCAG) */
  .app-shell .btn,
  .app-shell button:not(.nav-hamburger) {
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
  }

  /* nav-link 모바일에선 숨김(햄버거에서 처리) - 기존 동작 유지하되 깨지지 않도록 */
  .app-shell .global-nav .nav-link {
    min-height: 40px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }

  /* 모바일 드로어 패딩 */
  .mobile-nav-drawer {
    padding: 16px !important;
  }
  .mobile-nav-item {
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* 입력 폼 모바일 최소 높이 */
  .app-shell input,
  .app-shell select,
  .app-shell textarea {
    min-height: 44px !important;
    font-size: 16px !important;   /* iOS 자동 zoom 방지 */
  }

  /* 모달 모바일 안전 영역 */
  .v35-invite-overlay,
  .modal-overlay,
  .reservation-modal-overlay {
    padding: 12px !important;
  }
  .v35-invite-modal,
  .reservation-modal,
  .modal-content {
    max-width: 100% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }

  /* 표 모바일 가로 스크롤 */
  .app-shell .data-table-wrapper,
  .app-shell table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }

  /* 받은 초대 모바일 버튼 행 정리 */
  .v35-invite-item__actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .v35-invite-accept,
  .v35-invite-decline {
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }
}

/* (V36-22) 더 작은 화면(<420px) — 워드마크 영문 줄여서 줄바꿈 방지 */
@media (max-width: 420px) {
  .app-shell .tesla-logo-eng {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-indent: 0.18em !important;
  }
  .app-shell .tesla-logo-kor {
    display: none !important;   /* 너무 좁으면 한글 숨김, 영문 워드마크만 */
  }
  .app-shell .global-nav-inner {
    padding: 10px 10px !important;
  }
}

/* (V36-23) 매우 큰 화면(>1440px) — 최대 폭 제한 */
@media (min-width: 1441px) {
  .app-shell .global-nav-inner {
    max-width: 1383px !important;
    margin: 0 auto !important;
  }
}

/* (V36-24) 마지막 보강 — 기존 인라인 스타일이 분홍을 강제로 박는 경우를 위한 가능한 한 최대한
   ⚠️ 인라인 style은 CSS로 100% 못 잡지만, JS가 컬러 클래스를 쓰는 경우는 잡힘 */
.app-shell .text-primary,
.app-shell .text-pink,
.app-shell .text-rausch,
.app-shell .text-accent {
  color: #3E6AE1 !important;
  -webkit-text-fill-color: #3E6AE1 !important;
}
.app-shell .bg-primary,
.app-shell .bg-pink,
.app-shell .bg-rausch,
.app-shell .bg-accent {
  background: #3E6AE1 !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

/* === V36 END (Tesla Design System) === */

/* =========================================================================
   ▣ V37 — 사용자 V36 직후 4건 정밀 패치
   =========================================================================
   1. 로그인 페이지(.abnb-gate)도 Tesla 톤으로 (V36에서 제외했던 영역)
   2. 앞으로의 일정 카드 모바일 4줄 배치 (날짜/시간/회의명/위치)
   3. 로고 영문 'MATEGROUND' 제거 → 한글 '메이트리그라운드'만 노출, 보기 좋은 크기로
   4. 멤버 페이지:
      - 상단 액션 한 줄 정렬 (전체 삭제 / 선택 삭제 / 생성하기)
      - 모바일 카드 기본 접힘 → 클릭 시 펼침 (자동 노출 제거)
   ========================================================================= */

/* ─────────────────────────────────────────────────────────────
   §3 — 로고: 영문 워드마크 숨김, 한글 워드마크만 깔끔하게
   ───────────────────────────────────────────────────────────── */
.app-shell .tesla-logo-eng {
  display: none !important;
}
.app-shell .tesla-logo-kor,
.app-shell .tesla-logo-kor--solo {
  display: inline-flex !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.app-shell .tesla-logo-wordmark {
  /* 한 줄 가운데 정렬 (영문 라인이 사라졌으므로) */
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 768px) {
  .app-shell .tesla-logo-kor,
  .app-shell .tesla-logo-kor--solo {
    font-size: 15px !important;
  }
}
@media (max-width: 420px) {
  .app-shell .tesla-logo-kor,
  .app-shell .tesla-logo-kor--solo {
    /* 좁은 폭에서도 한글이 보이게 → V36에서 숨겼던 룰을 V37에서 다시 노출 */
    display: inline-flex !important;
    font-size: 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   §2 — 앞으로의 일정(v34-today-row) 모바일 세로 4줄 배치
   ───────────────────────────────────────────────────────────── */
.app-shell .v34-today-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #F4F4F4 !important;
  cursor: pointer !important;
  transition: background-color 0.33s !important;
}
.app-shell .v34-today-row:hover {
  background: #F4F4F4 !important;
}
.app-shell .v34-today-row:last-child {
  border-bottom: none !important;
}
.app-shell .v34-today-date {
  font-weight: 600 !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  font-size: 14px !important;
  min-width: 78px !important;
  flex-shrink: 0 !important;
}
.app-shell .v34-today-time {
  font-weight: 500 !important;
  color: #393C41 !important;
  -webkit-text-fill-color: #393C41 !important;
  font-size: 13px !important;
  min-width: 110px !important;
  font-variant-numeric: tabular-nums !important;
  flex-shrink: 0 !important;
}
.app-shell .v34-today-title {
  flex: 1 !important;
  min-width: 0 !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.app-shell .v34-today-space {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #5C5E62 !important;
  -webkit-text-fill-color: #5C5E62 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}
.app-shell .v34-today-row .space-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

@media (max-width: 768px) {
  /* 모바일에서 세로 4줄: 날짜 → 시간 → 회의명 → 위치 */
  .app-shell .v34-today-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 14px 14px !important;
  }
  .app-shell .v34-today-date,
  .app-shell .v34-today-time,
  .app-shell .v34-today-title,
  .app-shell .v34-today-space {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
  }
  .app-shell .v34-today-date {
    font-size: 13px !important;
    color: #5C5E62 !important;
    -webkit-text-fill-color: #5C5E62 !important;
    font-weight: 500 !important;
  }
  .app-shell .v34-today-time {
    font-size: 16px !important;
    color: #171A20 !important;
    -webkit-text-fill-color: #171A20 !important;
    font-weight: 600 !important;
  }
  .app-shell .v34-today-title {
    font-size: 14px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.4 !important;
  }
  .app-shell .v34-today-space {
    font-size: 13px !important;
  }
  /* role-badge가 회의명 옆에 너무 붙어 보이지 않도록 */
  .app-shell .v34-today-title .role-badge {
    margin-left: 6px !important;
    font-size: 11px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
  }
}

/* role-badge Tesla 톤: 주최=Electric Blue, 참석=회색 */
.app-shell .role-badge.is-owner {
  background: #3E6AE1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
}
.app-shell .role-badge.is-attendee {
  background: #F4F4F4 !important;
  color: #393C41 !important;
  -webkit-text-fill-color: #393C41 !important;
  border: 1px solid #EEEEEE !important;
}

/* ─────────────────────────────────────────────────────────────
   §4-a — 멤버 페이지 상단 액션 한 줄 정렬
   ───────────────────────────────────────────────────────────── */
.app-shell .admin-content-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}
.app-shell .admin-action-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
}
.app-shell .admin-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  border: 1px solid #D0D1D2 !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.33s, border-color 0.33s, color 0.33s !important;
}
.app-shell .admin-action-btn:hover:not(:disabled) {
  background: #F4F4F4 !important;
  border-color: #5C5E62 !important;
}
.app-shell .admin-action-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
.app-shell .admin-action-btn--primary {
  background: #3E6AE1 !important;
  border-color: #3E6AE1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.app-shell .admin-action-btn--primary:hover {
  background: #2A56D1 !important;
  border-color: #2A56D1 !important;
}
/* '전체 삭제' 버튼은 위험 액션 — Carbon Dark 보더로 살짝 무게감만 */
.app-shell .btn-purge-all.admin-action-btn {
  border-color: #393C41 !important;
  color: #393C41 !important;
  -webkit-text-fill-color: #393C41 !important;
}
.app-shell .btn-purge-all.admin-action-btn:hover {
  background: #393C41 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #393C41 !important;
}

@media (max-width: 768px) {
  .app-shell .admin-content-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .app-shell .admin-content-header > div:first-child {
    text-align: left !important;
  }
  .app-shell .admin-action-row {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  .app-shell .admin-action-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 360px) {
  .app-shell .admin-action-btn {
    font-size: 11px !important;
    padding: 0 6px !important;
  }
}

/* tabs (전체 / 가입 완료) + 검색 input도 Tesla 톤 정리 */
.app-shell .tabs {
  display: flex !important;
  gap: 8px !important;
  margin: 12px 0 12px !important;
  flex-wrap: wrap !important;
}
.app-shell .tab-link {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 4px !important;
  border: 1px solid #D0D1D2 !important;
  background: #FFFFFF !important;
  color: #393C41 !important;
  -webkit-text-fill-color: #393C41 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.33s, color 0.33s, border-color 0.33s !important;
}
.app-shell .tab-link.is-active {
  background: #171A20 !important;
  border-color: #171A20 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.app-shell .tab-link:not(.is-active):hover {
  background: #F4F4F4 !important;
  border-color: #5C5E62 !important;
}
.app-shell .table-search input {
  width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────
   §4-b — 멤버 모바일 카드 접힘/펼침 (사용자: "안 누른 팝업창이 떠있다")
   기본은 헤더(아바타+이름+이메일+배지)만 노출, .is-expanded 때만 펼침 노출
   ───────────────────────────────────────────────────────────── */
.app-shell .member-card--collapsible {
  cursor: pointer !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: none !important;
  margin-bottom: 8px !important;
  transition: border-color 0.33s, background-color 0.33s !important;
}
.app-shell .member-card--collapsible:hover {
  border-color: #D0D1D2 !important;
}
.app-shell .member-card--collapsible.is-expanded {
  border-color: #3E6AE1 !important;
  background: #FFFFFF !important;
}
/* 헤더 한 줄 가지런히 */
.app-shell .member-card--collapsible .member-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}
.app-shell .member-card--collapsible .member-card-avatar {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.app-shell .member-card--collapsible .member-card-id {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow: hidden !important;
}
.app-shell .member-card--collapsible .member-card-name {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.app-shell .member-card--collapsible .member-card-email {
  font-size: 12px !important;
  color: #5C5E62 !important;
  -webkit-text-fill-color: #5C5E62 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.app-shell .member-card--collapsible .member-card-badges {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.app-shell .member-card-chevron {
  font-size: 12px !important;
  color: #8E8E8E !important;
  transition: transform 0.33s !important;
}
.app-shell .member-card--collapsible.is-expanded .member-card-chevron {
  transform: rotate(180deg) !important;
}

/* 펼침 영역 — 기본 숨김 */
.app-shell .member-card--collapsible .member-card-body {
  display: none !important;
}
.app-shell .member-card--collapsible.is-expanded .member-card-body {
  display: block !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid #EEEEEE !important;
}
.app-shell .member-card--collapsible .member-card-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.app-shell .member-card--collapsible .meta-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 13px !important;
}
.app-shell .member-card--collapsible .meta-label {
  color: #5C5E62 !important;
  -webkit-text-fill-color: #5C5E62 !important;
  font-weight: 500 !important;
  min-width: 50px !important;
  flex-shrink: 0 !important;
}
.app-shell .member-card--collapsible .meta-value {
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  font-weight: 500 !important;
  text-align: right !important;
  word-break: break-word !important;
}
.app-shell .member-card--collapsible .member-card-actions {
  display: flex !important;
  gap: 8px !important;
}
.app-shell .member-card--collapsible .btn-card-action {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  border-radius: 4px !important;
  border: 1px solid #D0D1D2 !important;
  background: #FFFFFF !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.33s, border-color 0.33s !important;
}
.app-shell .member-card--collapsible .btn-card-action:hover {
  background: #F4F4F4 !important;
  border-color: #5C5E62 !important;
}
.app-shell .member-card--collapsible .btn-card-action.is-danger {
  color: #393C41 !important;
  -webkit-text-fill-color: #393C41 !important;
  border-color: #D0D1D2 !important;
}
.app-shell .member-card--collapsible .btn-card-action.is-danger:hover {
  background: #393C41 !important;
  border-color: #393C41 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* status badge Tesla 톤 */
.app-shell .status-badge {
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  background: #F4F4F4 !important;
  color: #393C41 !important;
  -webkit-text-fill-color: #393C41 !important;
  border: 1px solid #EEEEEE !important;
}
.app-shell .status-badge.s-active {
  background: #F4F4F4 !important;
  color: #393C41 !important;
}
.app-shell .status-badge.s-admin {
  background: #3E6AE1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #3E6AE1 !important;
}
.app-shell .status-badge.s-member {
  background: #F4F4F4 !important;
  color: #393C41 !important;
  border-color: #EEEEEE !important;
}

/* 모바일에서는 데스크탑 테이블 숨기고 카드만 노출 (기존 동작 보강) */
@media (max-width: 768px) {
  .app-shell .member-table-desktop {
    display: none !important;
  }
  .app-shell .member-cards-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
}
@media (min-width: 769px) {
  .app-shell .member-cards-mobile {
    display: none !important;
  }
  .app-shell .member-table-desktop {
    display: table !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   §1 — 로그인 페이지(.abnb-gate) Tesla 톤
   주의: 마크업은 그대로 두고 색/그림자/라운드만 갈아엎음
   사용자 요청: "이것도 테슬라 스타일로 바꿔줘야하는거 아니야? 왜 하다가 말았어"
   ───────────────────────────────────────────────────────────── */
.abnb-gate {
  background: #FFFFFF !important;
  color: #171A20 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* 브랜드 헤더 */
.abnb-gate__brand {
  text-align: center !important;
  margin-bottom: 40px !important;
}
.abnb-brand-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
}
/* 기존 분홍 막대 2개를 Carbon Dark 미니멀 로고로 교체 */
.abnb-brand-mark span {
  background: #171A20 !important;
  border-radius: 1px !important;
  margin: 0 2px !important;
}
.abnb-brand-mark span:nth-child(1) {
  width: 4px !important;
  height: 22px !important;
}
.abnb-brand-mark span:nth-child(2) {
  width: 4px !important;
  height: 28px !important;
}
.abnb-gate__title {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  margin: 12px 0 6px !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
.abnb-gate__sub {
  font-size: 13px !important;
  color: #5C5E62 !important;
  -webkit-text-fill-color: #5C5E62 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* 카드 — 그림자 제거, 4px radius, 회색 보더 */
.abnb-card {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 28px !important;
}
.abnb-card__head {
  margin-bottom: 18px !important;
}
.abnb-card__title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  letter-spacing: 0 !important;
}
.abnb-card__title--solo {
  font-size: 18px !important;
  margin-bottom: 18px !important;
}
.abnb-pulse {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #3E6AE1 !important;
  display: inline-block !important;
}
.abnb-card__badge {
  background: transparent !important;
  color: #3E6AE1 !important;
  -webkit-text-fill-color: #3E6AE1 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  border: none !important;
  padding: 0 !important;
}

/* 회의실 카드 그리드 */
.abnb-rooms-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}
.abnb-room {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 14px !important;
  transition: border-color 0.33s !important;
}
.abnb-room--ok:hover {
  border-color: #3E6AE1 !important;
}
.abnb-room--busy {
  opacity: 0.6 !important;
  background: #F4F4F4 !important;
}
.abnb-room__name {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  margin-bottom: 6px !important;
}
.abnb-room__meta {
  font-size: 12px !important;
  color: #5C5E62 !important;
  -webkit-text-fill-color: #5C5E62 !important;
  margin-bottom: 8px !important;
}
.abnb-room__chip {
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border: none !important;
}
.abnb-room__chip--ok {
  background: #3E6AE1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.abnb-room__chip--busy {
  background: #8E8E8E !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.abnb-room__sub {
  font-size: 11px !important;
  color: #8E8E8E !important;
  -webkit-text-fill-color: #8E8E8E !important;
  margin-top: 8px !important;
}

/* 카드 푸터 */
.abnb-card__foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid #F4F4F4 !important;
  font-size: 12px !important;
  color: #5C5E62 !important;
  -webkit-text-fill-color: #5C5E62 !important;
}
.abnb-card__foot-text {
  font-weight: 500 !important;
}
.abnb-card__foot-note {
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: none !important;
  color: #8E8E8E !important;
  -webkit-text-fill-color: #8E8E8E !important;
}

/* 로그인 폼 */
.abnb-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}
.abnb-field__label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #393C41 !important;
  -webkit-text-fill-color: #393C41 !important;
  letter-spacing: 0 !important;
}
.abnb-field input {
  width: 100% !important;
  background: #FFFFFF !important;
  border: 1px solid #D0D1D2 !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: #171A20 !important;
  -webkit-text-fill-color: #171A20 !important;
  box-shadow: none !important;
  transition: border-color 0.33s !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}
.abnb-field input::placeholder {
  color: #8E8E8E !important;
  -webkit-text-fill-color: #8E8E8E !important;
}
.abnb-field input:focus {
  outline: none !important;
  border-color: #3E6AE1 !important;
  box-shadow: 0 0 0 2px rgba(62, 106, 225, 0.18) !important;
}

/* "공간 입장하기" 버튼 — 분홍 그라디언트 → Electric Blue flat */
.abnb-btn,
button.abnb-btn,
button.abnb-btn--gradient,
button[type="submit"].abnb-btn {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #3E6AE1 !important;
  background-image: none !important;
  background-color: #3E6AE1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid #3E6AE1 !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.33s, border-color 0.33s !important;
  margin-top: 8px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.abnb-btn--gradient:hover,
button.abnb-btn--gradient:hover {
  background: #2A56D1 !important;
  background-color: #2A56D1 !important;
  border-color: #2A56D1 !important;
  filter: none !important;
  transform: none !important;
}
.abnb-btn:active,
.abnb-btn--gradient:active {
  transform: none !important;
}
.abnb-btn--gradient:disabled {
  background: #D0D1D2 !important;
  border-color: #D0D1D2 !important;
  color: #FFFFFF !important;
  cursor: not-allowed !important;
}

/* 에러 메시지 */
.abnb-form__error {
  margin-top: 10px !important;
  color: #393C41 !important;
  -webkit-text-fill-color: #393C41 !important;
  font-size: 13px !important;
}

/* 푸터 */
.abnb-gate__footer {
  text-align: center !important;
  margin-top: 40px !important;
  font-size: 12px !important;
  color: #8E8E8E !important;
  -webkit-text-fill-color: #8E8E8E !important;
  letter-spacing: 0 !important;
}

/* 로그인 페이지 모바일 미세 보정 */
@media (max-width: 768px) {
  .abnb-card {
    padding: 22px !important;
  }
  .abnb-rooms-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .abnb-gate__title {
    font-size: 22px !important;
  }
}
@media (max-width: 420px) {
  .abnb-rooms-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === V37 END === */

/* ==========================================================================
   V38 — 로고 M 마크 + 로그인 모바일 컴팩트 표
   §1 .abnb-brand-mark--svg : II 두 막대 → SVG M 마크
   §2 모바일에서 .abnb-card--live 영역을 컴팩트 표 형태로 압축 (5개 한 박스)
   ========================================================================== */

/* §1 — 로그인 헤더 SVG M 마크 스타일 (기존 .abnb-brand-mark span 막대 스타일 무효화) */
.abnb-brand-mark.abnb-brand-mark--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 기존 span 두 개 막대 모드의 gap/width 등을 모두 리셋 */
  gap: 0 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  margin-bottom: 12px;
}
.abnb-brand-mark.abnb-brand-mark--svg svg {
  color: #171A20;   /* Carbon Dark */
  display: block;
}
/* 기존 span 막대 모드와 충돌하면 SVG 모드에서는 span 자체 숨김 (안전장치) */
.abnb-brand-mark.abnb-brand-mark--svg > span {
  display: none !important;
}

/* §2 — 로그인 페이지 모바일 회의실 컴팩트 표
   기존 (V37): .abnb-rooms-grid 가 420px 이하에서 1fr (= 5개가 큰 카드로 세로 나열)
   변경 (V38): 5개를 하나의 박스 안에 표 형태로 압축 — 로그인 폼이 위로 올라옴 */
@media (max-width: 768px) {
  /* 5개 카드의 grid 자체를 표처럼 동작하도록 — 컬럼은 없애고 세로 행으로 나열하되 각 행을 매우 컴팩트하게 */
  .abnb-card--live .abnb-rooms-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    overflow: hidden;
    background: #FFFFFF;
  }

  /* 각 룸 카드를 표 한 행처럼: 좌측에 이름, 우측에 상태칩 */
  .abnb-card--live .abnb-room {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border: none !important;
    border-bottom: 1px solid #EEEEEE !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    min-height: 44px;
    text-align: left !important;
  }
  .abnb-card--live .abnb-room:last-child {
    border-bottom: none !important;
  }

  /* 이름: 좌측, 한 줄 */
  .abnb-card--live .abnb-room__name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #171A20 !important;
    margin: 0 !important;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
  }

  /* 정원 표시: 표 안에서는 숨김 — 공간 절약 (필요시 ::before로 작게 부활 가능) */
  .abnb-card--live .abnb-room__capacity {
    display: none !important;
  }

  /* 상태칩(즉시 사용 가능 / 사용 중): 우측 작게 */
  .abnb-card--live .abnb-room__status,
  .abnb-card--live .abnb-room .abnb-chip,
  .abnb-card--live .abnb-room__chip {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0 !important;
  }

  /* 보조 텍스트(오늘 남은 시간 모두 가용 등): 숨김 — 한 줄 컴팩트 표 유지 */
  .abnb-card--live .abnb-room__hint,
  .abnb-card--live .abnb-room__note,
  .abnb-card--live .abnb-room__detail {
    display: none !important;
  }

  /* LIVE 카드 자체 패딩도 축소 → 표가 더 위로 */
  .abnb-card--live {
    padding: 16px !important;
  }
  .abnb-card--live .abnb-card__head {
    margin-bottom: 12px;
  }
  .abnb-card--live .abnb-card__title {
    font-size: 15px !important;
  }
  .abnb-card--live .abnb-card__foot {
    margin-top: 10px;
    font-size: 11px;
  }
}

/* 420px 이하 — V37 의 `grid-template-columns: 1fr` (= 큰 카드 세로) 무효화
   상위 V38 768px 규칙이 flex column 으로 강제하므로 이건 단순 리셋 */
@media (max-width: 420px) {
  .abnb-card--live .abnb-rooms-grid {
    grid-template-columns: none !important; /* 의미 없음 — display:flex 로 이미 덮어씀 */
  }
  .abnb-card--live .abnb-room {
    padding: 9px 10px !important;
  }
  .abnb-card--live .abnb-room__name {
    font-size: 13px !important;
  }
}

/* === V38 END === */

/* ==========================================================================
   V39 — 실시간 연동 + now-line 시계화 + 정원 8명 제거 + 회의실 이름 영역 확장
   §1 정원 표시 보강: 혹시 라도 남은 .abnb-room__meta 잔재 숨김 (방어)
   §2 모바일 회의실 표 — 이름 영역 보장(Meeting Room A~E 풀 노출)
   §3 데스크톱 그리드(.abnb-rooms-grid)에서도 정원 빈 자리 → 이름 영역으로
   §4 timeline-now-line 부드러운 transition (선이 자연스럽게 내려가도록)
   ========================================================================== */

/* §1 — 정원 8명 흔적이 어디서든 보이지 않도록 안전 숨김 */
.abnb-room__meta {
  display: none !important;
}

/* §2 — 모바일(768px 이하) 회의실 표 보강
   V38 에서 한 행 컴팩트 표로 변경. V39 에서는 정원 제거된 공간을 이름이 흡수하도록 */
@media (max-width: 768px) {
  .abnb-card--live .abnb-room__name {
    font-size: 14px !important;
    font-weight: 500 !important;
    /* 이름 영역 우선 — 행 가로폭의 대부분을 차지 */
    flex: 1 1 auto !important;
    min-width: 0; /* flex 자식 ellipsis 가능하도록 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* 상태칩은 작게 + 절대 줄이지 않음 */
  .abnb-card--live .abnb-room__chip {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  /* 보조 텍스트(오늘 남은 시간 모두 가용 / 종료 예정) — 모바일에서는 숨김 (V38 유지) */
  .abnb-card--live .abnb-room__sub {
    display: none !important;
  }
}

/* §3 — 데스크톱(769px 이상)에서도 회의실 카드 안 .abnb-room__meta 가 사라진 자리를
        이름/칩이 더 자연스럽게 차지하도록 카드 패딩만 약간 줄임 (큰 변화 아님) */
@media (min-width: 769px) {
  .abnb-card--live .abnb-room {
    padding: 18px 14px !important;
  }
  .abnb-card--live .abnb-room__name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #171A20 !important;
    margin-bottom: 10px !important;
  }
}

/* §4 — 타임라인 빨간 실선이 시간 흐름에 따라 자연스럽게 내려가도록 transition */
.timeline-now-line {
  transition: top 0.6s ease;
}

/* === V39 END === */

/* ==========================================================================
   V40 — 로그인 페이지 모바일 세로 간격 압축 (한 화면에 로그인 폼까지)
   사용자 요청: M / 메이트리그라운드 / 부제 / 회의실 박스 / 로그인 폼 사이가 너무 넓어
                "공간 입장하기" 버튼이 첫 진입 시 화면 밖에 있음 → 한눈에 보이도록 압축
   ========================================================================== */
@media (max-width: 768px) {
  /* 외곽 패딩 축소 */
  .abnb-gate {
    padding-top: 20px !important;
    padding-bottom: 16px !important;
  }

  /* §1 브랜드 헤더 영역 압축 */
  .abnb-gate__brand {
    margin-bottom: 18px !important; /* V37 40px → V40 18px */
  }
  /* M 로고 마크: 40 → 32, 그리고 아래 마진 축소 */
  .abnb-brand-mark.abnb-brand-mark--svg svg {
    width: 32px !important;
    height: 32px !important;
  }
  .abnb-brand-mark {
    margin-bottom: 6px !important; /* V37 14px → V40 6px */
  }
  /* "메이트리그라운드" 타이틀 — 폰트 약간 축소 + 위/아래 마진 축소 */
  .abnb-gate__title {
    font-size: 20px !important; /* V37 26px → V40 20px (모바일) */
    margin: 4px 0 2px !important; /* V37 12px 0 6px → V40 4px 0 2px */
    line-height: 1.25 !important;
  }
  /* "와일리 & 러쉬 공유 워크스페이스" 부제 */
  .abnb-gate__sub {
    font-size: 12px !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
  }

  /* §2 카드(회의실 박스 + 로그인 박스) 사이 간격 축소 */
  .abnb-gate__grid {
    gap: 14px !important; /* 기본 24~32 → 14 */
  }
  /* 회의실 카드 패딩 축소 (V38에서 16 → 더 축소 14) */
  .abnb-card--live {
    padding: 14px !important;
  }
  .abnb-card--live .abnb-card__head {
    margin-bottom: 10px !important;
  }
  .abnb-card--live .abnb-card__foot {
    margin-top: 8px !important;
    font-size: 10.5px !important;
  }

  /* §3 로그인 카드 압축 */
  .abnb-card--login {
    padding: 18px !important; /* 22 → 18 */
  }
  .abnb-card--login .abnb-card__title,
  .abnb-card--login .abnb-card__title--solo {
    font-size: 16px !important;
    margin-bottom: 12px !important; /* 기본 18~24 → 12 */
  }

  /* 폼 필드 간격: 이메일 / 비밀번호 / 버튼 사이 */
  .abnb-form {
    gap: 12px !important; /* 기본 18 → 12 */
  }
  .abnb-field {
    gap: 5px !important; /* label ↔ input 간격 8 → 5 */
  }
  .abnb-field__label {
    font-size: 12px !important;
  }
  .abnb-field input {
    padding: 10px 12px !important; /* 기본 12~14 → 10 */
    font-size: 14px !important;
  }
  /* 로그인 버튼 — 패딩만 약간 축소, 시각 위계는 유지 */
  .abnb-btn--gradient {
    padding: 12px 16px !important;
    font-size: 14px !important;
    margin-top: 4px !important;
  }

  /* §4 푸터 */
  .abnb-gate__footer {
    margin-top: 16px !important;
    font-size: 11px !important;
  }
}

/* 420px 이하(작은 폰): 한 번 더 압축 */
@media (max-width: 420px) {
  .abnb-gate { padding-top: 16px !important; }
  .abnb-gate__brand { margin-bottom: 14px !important; }
  .abnb-brand-mark.abnb-brand-mark--svg svg { width: 28px !important; height: 28px !important; }
  .abnb-gate__title { font-size: 18px !important; }
  .abnb-gate__sub { font-size: 11.5px !important; }
  .abnb-gate__grid { gap: 12px !important; }
  .abnb-card--live { padding: 12px !important; }
  .abnb-card--login { padding: 16px !important; }
  .abnb-form { gap: 10px !important; }
}

/* === V40 END === */

/* ============================================================
   V41 §2 — 멤버 생성 모달 이메일 입력 (테넌트 도메인 자동 부착)
   ============================================================
   "bhmoon" 입력 → 자동으로 "bhmoon@wylie.co.kr" 저장
   "ll" 입력 → 자동으로 "ll@lush.co.kr" 저장
   입력란과 잠긴 도메인 suffix를 한 줄로 표시 (Tesla-style)
*/
.email-suffix-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: 11px;
  border: 1px solid #e0e0e0;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.email-suffix-wrap:focus-within {
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
.email-suffix-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
  color: #1d1d1f;
  font-family: inherit;
}
.email-suffix-input::placeholder { color: #b0b0b0; }
.email-suffix-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: #f5f7fa;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  border-left: 1px solid #e0e0e0;
  letter-spacing: -0.1px;
  user-select: none;
}

/* 모바일에서는 suffix가 짧아 보이도록 패딩 축소 */
@media (max-width: 600px) {
  .email-suffix-input { padding: 11px 12px; font-size: 13px; }
  .email-suffix-tag { padding: 0 10px; font-size: 12px; }
}

/* === V41 END === */

/* ============================================================
   V42 §1 — 예약 상세 모달 참석자 관리 (추가/제거 버튼)
   ============================================================ */
.detail-add-attendee-btn {
  border: 1px solid #d6e4f5;
  background: #f5f9ff;
  color: #0066cc;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.detail-add-attendee-btn:hover {
  background: #e8f1ff;
  border-color: #0066cc;
}
.detail-remove-attendee-btn:hover {
  background: #ffeded !important;
}
.add-att-row:hover:not(.is-already) {
  background: #f5f9ff;
}
.add-att-row.is-picked:hover {
  background: #d8e9ff !important;
}

/* ============================================================
   V42 §2 — 로그인 페이지 LIVE 카드 날짜 네비게이션
   ============================================================ */
.live-date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 14px;
  flex-wrap: wrap;
}
.live-date-nav__btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #444;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.live-date-nav__btn:hover {
  background: #f5f7fa;
  border-color: #0066cc;
  color: #0066cc;
}
.live-date-nav__label {
  flex: 1;
  min-width: 0;
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #1d1d1f;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.live-date-nav__label:hover {
  background: #f5f9ff;
  border-color: #0066cc;
}
.live-date-nav__input {
  /* 시각적으로는 숨기되 클릭/포커스는 가능하게: showPicker() 호출용. 또한 직접 변경할 수도 있도록 작게 노출 */
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.live-date-nav__today {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid #0066cc;
  background: #fff;
  color: #0066cc;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.live-date-nav__today:hover {
  background: #eaf3ff;
}

/* 미래/과거 날짜의 회의실 카드 — 예약 슬롯 리스트 */
.abnb-room--scheduled {
  background: #fffaf3;
  border: 1px solid #f5d99c;
}
.abnb-room__chip--scheduled {
  background: #ffd28a;
  color: #7a4d00;
}
.abnb-room__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.abnb-room__slot {
  display: inline-block;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #f0d8a8;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #8a5a00;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   V42 §3 — 로그인 페이지 이메일 도메인 선택 (input + select)
   ============================================================ */
.login-email-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
/* V45 §2: 60:40 비율 명시 (아이디 60% / 도메인 40%) — 사용자 요청 */
.login-email-input {
  flex: 6 1 0;   /* 60% */
  min-width: 0;
  /* 부모 .abnb-field input 스타일을 상속받아 동일한 룩앤필 유지 */
}
.login-email-domain {
  flex: 4 1 0;   /* 40% */
  min-width: 0;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid #e0e0e0;
  background: #f5f7fa;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.login-email-domain:hover, .login-email-domain:focus {
  background: #fff;
  border-color: #0066cc;
  outline: none;
}
.abnb-field__hint {
  font-size: 11px;
  color: #7a7a7a;
  margin-top: 2px;
  line-height: 1.4;
}

/* V43 §1: 모바일에서도 input + domain select 한 줄 유지 (사용자 요청)
   - 아이디는 길지 않으므로 wrap 없이 한 줄 압축
   - 도메인 셀렉트는 폭 축소 + 폰트 축소로 공간 확보 */
/* V45 §2: 모바일에서도 60:40 비율 유지 (사용자 요청) */
@media (max-width: 480px) {
  .login-email-row { flex-wrap: nowrap; gap: 4px; }
  .login-email-input { flex: 6 1 0; min-width: 0; }
  .login-email-domain {
    flex: 4 1 0;
    min-width: 0;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
  }
  .live-date-nav__today { padding: 7px 8px; }
}

/* === V42 END === */

/* ============================================================
   V43 §2 — LIVE 카드 메타 라인 (헤더 바로 아래 작은 한 줄)
   - 기존 abnb-card__foot 푸터를 제거하고 헤더 바로 아래로 이동
   - "차지하는 칸 줄이고 사용자가 잘 볼 수 있도록" 작게 표시
   ============================================================ */
.live-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 8px;
  font-size: 11px;
  line-height: 1.3;
  color: #9a9a9a;
}
.live-card-meta__text {
  color: #8a8a8a;
  font-weight: 500;
}
.live-card-meta__note {
  color: #FF385C;
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .live-card-meta {
    font-size: 10px;
    padding: 3px 0 6px;
  }
  .live-card-meta__note { font-size: 10px; }
}
/* === V43 §2 END === */

/* ============================================================
   V43 §4 — 이번주 일정 + 받은 초대 50:50 분할 카드
   - 한 카드 안에서 좌우 절반씩 콤팩트하게 표시
   - 사용자 요청: "보는 용도로 크게 할 필요없으니" → 콤팩트 모드
   ============================================================ */
.app-shell .v34-card--split {
  display: flex;
  align-items: stretch;
  padding: 18px 18px !important;
  gap: 0;
}
.app-shell .v34-card--split .v34-split-half {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 14px;
  transition: background 0.15s;
  border-radius: 8px;
}
.app-shell .v34-card--split .v34-split-half:first-child { padding-left: 0; }
.app-shell .v34-card--split .v34-split-half:last-child { padding-right: 0; }
.app-shell .v34-card--split .v34-split-half.is-clickable:hover {
  background: #fff5f7;
}
.app-shell .v34-card--split .v34-split-divider {
  flex: 0 0 1px;
  background: #ececec;
  margin: 4px 0;
}
.app-shell .v34-card--split .v34-split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.app-shell .v34-card--split .v34-split-title {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  letter-spacing: -0.2px;
}
.app-shell .v34-card--split .v34-split-icon {
  font-size: 13px;
  color: #0066cc;
}
.app-shell .v34-card--split .v34-split-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.app-shell .v34-card--split .v34-split-big {
  font-size: 28px;
  font-weight: 800;
  color: #222;
  line-height: 1.1;
}
.app-shell .v34-card--split .v34-split-unit {
  font-size: 13px;
  color: #888;
  font-weight: 600;
}
.app-shell .v34-card--split .v34-split-sub {
  font-size: 11px;
  color: #888;
  margin: 0;
  line-height: 1.3;
}
.app-shell .v34-card--split .v34-invite-disabled { opacity: 0.7; }

/* 모바일에서도 좌우 분할 유지 (콤팩트) */
@media (max-width: 480px) {
  .app-shell .v34-card--split { padding: 14px 12px !important; }
  .app-shell .v34-card--split .v34-split-half { padding: 0 10px; gap: 4px; }
  .app-shell .v34-card--split .v34-split-title { font-size: 12px; }
  .app-shell .v34-card--split .v34-split-big { font-size: 24px; }
  .app-shell .v34-card--split .v34-split-sub { font-size: 10px; }
}
/* === V43 §4 END === */

/* ============================================================
   V43.1 §1 — PC에서 퀵 메뉴 숨김 (모바일에서만 노출)
   - 사용자 요청: "PC 화면에서는 퀵 메뉴가 안 보이게, 스마트폰/모바일 환경에서만"
   ============================================================ */
.app-shell .v34-card--quick {
  display: none !important;
}
@media (max-width: 768px) {
  .app-shell .v34-card--quick {
    display: block !important;
  }
}
/* === V43.1 §1 END === */

/* ============================================================
   V43.1 §2/§3 — 오늘의 일정 + 앞으로의 일정 통합 카드
   - PC(>768px): 좌 50% 오늘 / 우 50% 앞으로, 가운데 구분선
   - 모바일(<=768px): 탭(라디오) 으로 둘 중 하나만 표시
   - 헤더와 본문 간격 최소화 → 콤팩트 모드
   ============================================================ */
.app-shell .v34-card--schedule {
  grid-column: 1 / -1;
  padding: 16px 18px !important;
}

/* 헤더(탭 영역) */
.app-shell .v34-card--schedule .v34-sched-head {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 10px;
}
.app-shell .v34-card--schedule .v34-sched-tab {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  user-select: none;
}
.app-shell .v34-card--schedule .v34-sched-tab__radio {
  /* PC에서는 라디오 버튼 숨김 (제목/아이콘 클릭으로 전환) */
  display: none;
}
.app-shell .v34-card--schedule .v34-sched-tab__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f0f0f0;
  color: #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.app-shell .v34-card--schedule .v34-sched-tab__title {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  letter-spacing: -0.2px;
}
.app-shell .v34-card--schedule .v34-sched-head-divider {
  flex: 0 0 1px;
  align-self: stretch;
  background: #ececec;
  margin: 4px 4px;
}

/* 본문 — PC: flex row, 모바일: 활성 패널만 */
.app-shell .v34-card--schedule .v34-sched-body {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.app-shell .v34-card--schedule .v34-sched-panel {
  flex: 1 1 50%;
  min-width: 0;
  padding: 0 10px;
}
.app-shell .v34-card--schedule .v34-sched-panel:first-of-type { padding-left: 0; }
.app-shell .v34-card--schedule .v34-sched-panel:last-of-type { padding-right: 0; }
.app-shell .v34-card--schedule .v34-sched-divider {
  flex: 0 0 1px;
  background: #ececec;
  margin: 2px 0;
}
.app-shell .v34-card--schedule .v34-sched-empty {
  margin: 0;
  padding: 16px 4px;
  font-size: 12px;
  color: #999;
  text-align: center;
}

/* 통합 카드 내부 행 간격 콤팩트 */
.app-shell .v34-card--schedule .v34-today-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-shell .v34-card--schedule .v34-today-row {
  padding: 8px 10px !important;
  font-size: 13px;
}

/* ── 모바일(<=768px): 탭 전환 모드 ── */
@media (max-width: 768px) {
  .app-shell .v34-card--schedule { padding: 14px 14px !important; }
  .app-shell .v34-card--schedule .v34-sched-head {
    background: #f5f7fa;
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
    margin-bottom: 10px;
  }
  .app-shell .v34-card--schedule .v34-sched-head-divider { display: none; }
  .app-shell .v34-card--schedule .v34-sched-tab {
    flex: 1 1 50%;
    justify-content: center;
    padding: 8px 6px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
  }
  /* 모바일에서는 라디오 표시(왼쪽에 체크 표시) */
  .app-shell .v34-card--schedule .v34-sched-tab__radio {
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #c0c0c0;
    margin: 0 2px 0 0;
    cursor: pointer;
    flex-shrink: 0;
    background: #fff;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
  }
  .app-shell .v34-card--schedule .v34-sched-tab__radio:checked {
    border-color: #FF385C;
    background: #FF385C;
    box-shadow: inset 0 0 0 3px #fff;
  }
  .app-shell .v34-card--schedule .v34-sched-tab__icon { display: none; }
  .app-shell .v34-card--schedule .v34-sched-tab__title { font-size: 13px; font-weight: 600; }
  /* 활성 탭 강조 */
  .app-shell .v34-card--schedule[data-active-tab="today"] .v34-sched-tab--today,
  .app-shell .v34-card--schedule[data-active-tab="upcoming"] .v34-sched-tab--upcoming {
    background: #fff;
    border-color: #FF385C;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  .app-shell .v34-card--schedule[data-active-tab="today"] .v34-sched-tab--today .v34-sched-tab__title,
  .app-shell .v34-card--schedule[data-active-tab="upcoming"] .v34-sched-tab--upcoming .v34-sched-tab__title {
    color: #FF385C;
  }
  /* 본문: flex 해제 + 활성 패널만 표시 */
  .app-shell .v34-card--schedule .v34-sched-body {
    display: block;
  }
  .app-shell .v34-card--schedule .v34-sched-divider { display: none; }
  .app-shell .v34-card--schedule .v34-sched-panel {
    flex: none;
    width: 100%;
    padding: 0;
    display: none;
  }
  .app-shell .v34-card--schedule[data-active-tab="today"] .v34-sched-panel[data-side="today"],
  .app-shell .v34-card--schedule[data-active-tab="upcoming"] .v34-sched-panel[data-side="upcoming"] {
    display: block;
  }
}
/* === V43.1 §2/§3 END === */

/* ============================================================
   V46 §1 — 멤버 일괄 추가 모달 테이블 (컬럼 폭/셀렉트 화살표 최적화)
   ============================================================ */
.bulk-member-table th,
.bulk-member-table td {
  padding: 8px 10px;
  overflow: hidden;
}
.bulk-member-table th {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  background: #fafafc;
  text-align: left;
  white-space: nowrap;
}
/* V46 §1: 일괄 행의 셀렉트 — ▼ 화살표가 잘리지 않도록 padding-right 확보 */
.bulk-row-select {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  padding: 4px 22px 4px 4px;  /* 오른쪽에 ▼ 공간 확보 */
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  cursor: pointer;
  text-overflow: ellipsis;
}
.bulk-row-select:focus {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
  border-radius: 4px;
}

/* ============================================================
   V46 §3 — 인사이트 예약 내역 테이블 (가운데 정렬 + 폭 재배분)
   ============================================================ */
.insight-history-table {
  table-layout: fixed;
  width: 100%;
}
.insight-history-table th,
.insight-history-table td {
  text-align: center;
  vertical-align: middle;
  padding: 10px 8px;
  font-size: 13px;
}
.insight-history-table th {
  font-weight: 600;
  color: #1d1d1f;
  background: #fafafc;
  border-bottom: 1px solid #e6e6e6;
}
.insight-history-table td {
  border-bottom: 1px solid #f0f0f2;
}
/* 회의 목적을 한 줄에 보이게: word-break + ellipsis 적용 */
.insight-history-table .col-purpose {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insight-history-table .col-space-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

/* ============================================================
   V47 §2 — 타임라인 좌측 시간컬럼에서 06:00 라벨만 숨김
   (사용자 요청: "06:00 안보이게, 바로 07:00 나오도록")
   - 셀 영역은 유지(레이아웃/그리드 정렬 안 무너짐)
   - 텍스트만 visibility:hidden 으로 처리
   - 예약 생성 모달의 시간 select 옵션 06:00은 별개라 영향 없음
   ============================================================ */
.timeline-time-col .timeline-time-cell:first-child {
  visibility: hidden !important;
}

/* ============================================================
   V48 — 시간축 정렬 확정
   과거 V35 §2 등에서 40px 레이아웃용으로 넣은 top/padding/height 핵
   (.timeline-time-col padding-top:4px, :first-child height:auto/min-height:40px
    /padding-top:16px)이 시간 셀 높이를 흐트러뜨려 좌측 라벨이 그리드 시간선과
   어긋나던 문제를 무력화. 시간 셀을 공간 셀과 동일한 60px 균일 높이로 고정한다.
   (라벨 .tc-label 은 absolute + translateY(-50%)로 셀 상단=시간선에 세로중앙 정렬)
   ============================================================ */
.app-shell .timeline-time-col,
.timeline-time-col {
  padding-top: 0 !important;   /* 상단 여백 제거 → 공간 컬럼과 시작 y 일치 */
}
.app-shell .timeline-time-cell,
.timeline-time-cell {
  height: 60px !important;
  min-height: 60px !important;
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.app-shell .timeline-time-cell:first-child,
.timeline-time-col .timeline-time-cell:first-child {
  height: 60px !important;
  min-height: 60px !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  /* visibility:hidden(06:00 숨김)은 위 V46 규칙 유지 */
}

/* ============================================================
   V47 §1 — LIVE 카드 클릭 모달 (간략 타임테이블)
   카드 클릭 → "10:00 ~ 12:00  Wylie" 형식의 단순 리스트
   ============================================================ */

/* 카드에 클릭 가능 표시 */
.abnb-room.is-clickable {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.abnb-room.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 102, 204, 0.35);
}
.abnb-room.is-clickable:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* 모달 오버레이 */
.room-tt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 30, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  padding: 16px;
  animation: roomTtFadeIn 120ms ease;
}
@keyframes roomTtFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 모달 본체 */
.room-tt-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  animation: roomTtPop 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes roomTtPop {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

.room-tt-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid #eef0f3;
}
.room-tt-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: #171a20;
  letter-spacing: -0.01em;
}
.room-tt-modal__date {
  font-size: 13px;
  color: #6e7079;
  margin-top: 4px;
}
.room-tt-modal__close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #8a8d94;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 120ms ease, color 120ms ease;
}
.room-tt-modal__close:hover { background: #f3f4f6; color: #171a20; }

.room-tt-modal__body {
  padding: 14px 22px 22px;
  overflow-y: auto;
}

/* 타임테이블 행 */
.room-tt__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed #eef0f3;
}
.room-tt__row:last-child { border-bottom: none; }

.room-tt__time {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: #171a20;
  letter-spacing: -0.01em;
}
.room-tt__tenant {
  font-size: 14px;
  font-weight: 500;
  color: #0066cc;
  padding: 4px 10px;
  background: rgba(0, 102, 204, 0.08);
  border-radius: 999px;
}

.room-tt__empty {
  text-align: center;
  color: #8a8d94;
  font-size: 14px;
  padding: 22px 0;
}