/**
 * 주짓수메이트 - Martial Arts Mastery UI System
 * 전문적이고 세련된 도장 관리 시스템
 */

/* ========================================
   1. DESIGN TOKENS - Color System
   ========================================
   Brand Mono (Strict): Emerald(var(--color-primary-600)) + Soft Dark(var(--color-slate-600)) 2색 기본.
   시맨틱 Error(#ef4444)는 Toast/Form error 등 최소 사용.
   본문 Warning/Info 토큰은 모두 Slate neutral 매핑(amber/indigo 폐지).
   amber/indigo 시그널은 --toast-* 토큰에서만 예외로 살아있음.
   ======================================== */
:root {
  /* ── Brand Primary - Emerald ── */
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;

  /* ── Brand Secondary - Emerald Light (Primary 와 동일, 호환 alias) ── */
  --color-secondary-500: var(--color-primary-500);
  --color-secondary-600: var(--color-primary-600);

  /* ── Brand Base - Soft Dark (Slate) ── */
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* Level Colors - 띠 색상 팔레트 (slate 외엔 도메인 전용 hex) */
  --level-white: var(--color-slate-50);
  --level-yellow: #fef08a;
  --level-green: #86efac;
  --level-blue: #93c5fd;
  --level-red: #fca5a5;
  --level-black: var(--color-slate-800);

  /* Gradient - 수평 방향 (Emerald 톤) */
  --gradient-primary: linear-gradient(90deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);

  /* Background Colors — 시맨틱 alias → palette ref */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-slate-50);
  --bg-tertiary: var(--color-slate-100);
  --bg-hover: #f0fdf4;
  --bg-active: var(--color-primary-100);
  --bg-gradient-page: linear-gradient(135deg, #f0fdf4 0%, var(--color-primary-50) 50%, var(--color-slate-100) 100%);

  /* Text Colors — 시맨틱 alias → palette ref */
  --text-primary: var(--color-slate-800);
  --text-secondary: var(--color-slate-600);
  --text-tertiary: var(--color-slate-400);
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-default: var(--color-slate-200);
  --border-primary: var(--color-slate-200);
  --border-subtle: rgba(0, 0, 0, 0.04);
  --border-strong: var(--color-slate-300);
  --border-hairline: #eaecef;  /* D.MONO CONCIERGE 카드/모달 1px 외곽선 */

  /* Accent - Primary (Emerald) — 시맨틱 alias → palette ref */
  --accent-primary: var(--color-primary-600);
  --accent-primary-hover: var(--color-primary-700);
  --accent-primary-subtle: rgba(5, 150, 105, 0.08);
  --accent-primary-muted: rgba(5, 150, 105, 0.12);

  /* Status Colors — Emerald palette ref */
  --status-success: var(--color-primary-600);
  --status-success-bg: var(--color-primary-50);
  --status-success-border: var(--color-primary-100);
  --status-success-text: var(--color-primary-800);

  /* Brand Mono Strict (2026-04 재설계, 2026-05 Toast 2색 정리):
     본문(뱃지/배너/모달/캘린더 등)에서는 amber/indigo 폐지 → Slate neutral.
     Toast 도 4색 → 2색 정리 (success+info=Emerald, error+warning=Red).
     "좋음/나쁨" 두 축. warning/info 클래스는 API 호환만 유지 — 색은 success/error 와 동일. */
  --status-warning: var(--color-slate-600);            /* slate-600 — 본문 강조 */
  --status-warning-strong: var(--color-slate-700);     /* slate-700 */
  --status-warning-bg: var(--color-slate-100);         /* slate-100 */
  --status-warning-border: var(--color-slate-200);     /* slate-200 */
  --status-warning-text: var(--color-slate-800);       /* slate-800 */

  --status-error: #ef4444;
  --status-error-bg: #fef2f2;
  --status-error-border: #fee2e2;
  --status-error-text: #991b1b;

  --status-info: var(--color-slate-600);               /* slate-600 — 본문 강조 */
  --status-info-bg: var(--color-slate-100);            /* slate-100 */
  --status-info-border: var(--color-slate-200);        /* slate-200 */
  --status-info-text: var(--color-slate-800);          /* slate-800 */

  /* Typography */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border Radius - Clean Scale */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadow Scale - 미니멀 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* Transitions - 부드러운 */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-smooth: 0.25s ease;
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --top-nav-height: 64px;
  --container-max: 1400px;
  --content-padding: 32px;
  --sidebar-width: 240px;
  --sidebar-collapsed: 80px;
  --sidebar-header-height: 75px;

  /* Borders & Backgrounds */
  --border-light: #f1f5f9;
  --border-color: #e2e8f0;
  --bg-card: #ffffff;

  /* Z-Index */
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ── Premium Redesign Tokens ── */

  /* Glass Morphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --glass-blur: blur(20px);

  /* Glow Effects Extended */
  --glow-primary-sm: 0 0 10px rgba(5, 150, 105, 0.15);
  --glow-primary-lg: 0 0 30px rgba(5, 150, 105, 0.25);

  /* Animation Tokens */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-medium: 0.4s;
  --duration-long: 0.6s;
  --stagger-delay: 0.06s;

  /* Surface Colors (Glass layers) */
  --surface-1: rgba(255, 255, 255, 0.85);

  /* Sidebar Premium */
  --sidebar-bg: #ffffff;
  --sidebar-border: #e5e7eb;
  --sidebar-active-bg: var(--color-primary-50);

  /* Card Premium */
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-header-bg: #fafafa;
  --card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  --card-hover-border: var(--color-primary-200);
}

/* ========================================
   1.1 DARK THEME - 출석체크 등 몰입형 페이지
   ======================================== */
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.1);
  --bg-gradient-page: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;

  --border-default: #475569;
  --border-subtle: rgba(255, 255, 255, 0.08);

  /* Dark 모드 Primary - 더 밝은 톤 */
  --accent-primary: #34d399;
  --accent-primary-hover: #6ee7b7;
  --accent-primary-subtle: rgba(52, 211, 153, 0.1);


  /* White Alpha - 투명도 */
  --white-alpha-3: rgba(255, 255, 255, 0.03);
  --white-alpha-5: rgba(255, 255, 255, 0.05);
  --white-alpha-8: rgba(255, 255, 255, 0.08);
  --white-alpha-10: rgba(255, 255, 255, 0.1);
  --white-alpha-40: rgba(255, 255, 255, 0.4);
  --white-alpha-50: rgba(255, 255, 255, 0.5);
  --white-alpha-60: rgba(255, 255, 255, 0.6);
  --white-alpha-70: rgba(255, 255, 255, 0.7);
  --white-alpha-90: rgba(255, 255, 255, 0.9);
}

/* ========================================
   2. Reset & Base
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-secondary);
  min-height: 100vh;
  /* 한국어 줄바꿈 — 어절(공백) 단위로 줄바꿈하여 조사·의존명사가 분리되지 않도록.
     긴 영어 단어/URL은 overflow-wrap으로 컨테이너 넘침 방지. (frontend-guide §22) */
  word-break: keep-all;
  overflow-wrap: break-word;
}

a {
  color: var(--accent-primary);
  text-decoration: none !important;
}

a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none !important;
}

a:hover {
  color: var(--accent-primary-hover);
}

/* Screen reader only (a11y) — 시각적으로 숨기고 스크린리더에만 노출 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link (a11y) — 키보드/스크린리더 사용자가 본문으로 바로 이동 */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: var(--z-modal);
  padding: 8px 16px;
  background: var(--color-primary-600);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  transition: top 0.15s ease;
}

.skip-to-content:focus {
  top: 8px;
  outline: 2px solid var(--color-primary-200);
  outline-offset: 2px;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 키보드 focus 박제 — 페이지 인라인 .X:focus { outline:none } 가 키보드 진입 시 덮어쓰지 못하도록
   접근성 보장. 마우스/터치 focus 는 :focus-visible 매칭 안 되어 영향 없음. */
:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-primary) !important;
  outline-offset: 2px;
}

/* ========================================
   3. Typography
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: 1.3;
  color: var(--text-primary);
}

h1, .h1 { font-size: var(--text-4xl); }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); }
h5, .h5 { font-size: var(--text-lg); }
h6, .h6 { font-size: var(--text-base); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-tertiary); }
.text-accent { color: var(--accent-primary); }
.text-success { color: var(--status-success); }
.text-warning { color: var(--status-warning); }
.text-error { color: var(--status-error); }
.text-danger { color: var(--status-error); }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* ========================================
   4. Layout
   ======================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  /* min-height 제거 — §102 와 동일 이유 (짧은 페이지 하단 빈 공백 차단). bg 는 §102 가 책임. */
  background: var(--bg-secondary);
}

.page-header {
  padding: var(--space-5) var(--space-6);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
}

.page-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-slate-900);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.page-content {
  /* padding 제거 — page-container가 이미 padding 책임 (이중 padding 방지) */
  max-width: var(--container-max);
  margin: 0 auto;
}

.content-section {
  margin-bottom: var(--space-6);
}

/* 페이지 상단 저장 액션 (frontend-guide §21 단일 표준)
   admin 편집 페이지 데스크톱 전용 — breadcrumb 다음 / 카드 위에 위치.
   모바일은 .mobile-header-save (mobile-shell.js MobileHeaderAction) 가 헤더에 inject.

   사이드바 톱 메뉴 편집 페이지(settings/index.html 등):
   - 데스크톱: position:fixed top:var(--setup-banner-h,0) 로 setup-wrapper 바로 아래 고정
     (sidebar 우측에서 viewport 끝까지 stretch). 스크롤과 무관한 절대 고정.
   - 태블릿(769~1024px): position:sticky; top:var(--setup-banner-h,0) — mobile-header 미노출 구간.
   - 모바일(≤768px): position:fixed; top:calc(56px + var(--setup-banner-h,0)) — mobile-header + setup-wrapper 아래.
     sticky 가 환경(iOS Safari 등)에서 의도대로 안 붙는 케이스 박제 차단 + 스크롤해도 헤더 + 액션바 두 줄 항상 노출.
   .is-dirty 시 backdrop-filter + emerald accent 강조.

   ── setup-wrapper 와 수직 스택 (2026-05-14) ──
   .setup-wrapper(sticky top:0 z:20)와 같은 top:0 자리를 점유하면 데스크톱은 setup-wrapper 가,
   태블릿(action bar z:15 < setup-wrapper z:20)은 action bar 가 가려졌다. setup-guide.js 가
   실측 높이를 --setup-banner-h 로 박제하므로 top 을 그 값만큼 오프셋 → 둘 다 항상 노출.
   setup-wrapper 가 없거나 dismiss 된 페이지에서는 fallback 0 으로 기존 top:0 동작 유지. */
.ios-settings-actions {
  position: fixed;
  top: var(--setup-banner-h, 0px);
  left: var(--sidebar-width);
  right: 0;
  /* setup-wrapper(sticky, z:20)와 같은 paint level 에서 sticky 부착 순간 같이 repaint 되며
     1px 흔들리던 현상 차단 → z:30 으로 명확히 우위에 두고 자체 stacking context 분리.
     will-change: transform 은 의도와 반대로 GPU compositor sub-pixel jitter 를 유발하므로 사용 금지. */
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-light, #eef0f2);
  /* setup-wrapper 높이 변화(expand/collapse) 시 top 이 매끄럽게 따라가도록 트랜지션.
     스크롤 중 jitter 유발 없도록 짧고 가볍게. */
  transition: top 0.15s ease-out;
}
.ios-settings-actions .btn-primary { min-width: 88px; justify-content: center; }
.ios-settings-actions .btn-secondary { min-width: 88px; justify-content: center; }

/* sidebar 접힘 시 좌측 offset 자동 보정 (.sidebar.collapsed + .main-content 패턴 따라가기) */
.sidebar.collapsed + .main-content .ios-settings-actions {
  left: var(--sidebar-collapsed);
}

/* 태블릿(769~1024px): sticky top:--setup-banner-h — mobile-header 미노출 구간.
   setup-wrapper(sticky z:20) 바로 아래에 stick 하도록 top 오프셋 (없으면 0 fallback).
   z-index 는 setup-wrapper(z:20) 보다 위(30)로 두어 height 전환 race 시에도 가림 차단. */
@media (max-width: 1024px) {
  .ios-settings-actions {
    position: sticky;
    top: var(--setup-banner-h, 0px);
    left: auto;
    right: auto;
    padding: 10px 16px;
    margin: 0 -16px 16px;
    z-index: 30;
  }
}

/* 모바일(≤768px): position:fixed top:56px+--setup-banner-h — mobile-header(sticky 56px) +
   setup-wrapper(sticky top:56, 2026-05-15) 아래에 부착. 이전엔 setup-wrapper 가 static 이라
   스크롤 시 banner 가 사라지면서 action-bar 가 header 와 분리되어 빈 공간 발생 → setup-wrapper
   를 sticky 로 변경하여 항상 banner + action-bar 가 일관된 수직 스택 유지.
   sticky 가 일부 환경(iOS Safari + 긴 페이지 조합 등)에서 의도대로 안 붙는 케이스 박제 차단.
   본문 시작점은 .ios-settings-page mobile padding-top 으로 보정.
   z-index 는 mobile-header(--z-sticky 200) 보다 1단 낮춰 헤더 우선 노출. */
@media (max-width: 768px) {
  .ios-settings-actions {
    position: fixed;
    top: calc(56px + var(--setup-banner-h, 0px));
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px 16px;
    z-index: 190;
  }
}

.ios-settings-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  font-size: 13px;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
}
.ios-settings-status .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-slate-300);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Dirty 상태 (settings/index.html JS 가 토글) — backdrop-filter + accent.
   position 은 평소와 동일(fixed/static) — 분기 없음. */
.ios-settings-actions.is-dirty {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  border-bottom-color: var(--color-slate-200);
}
.ios-settings-actions.is-dirty .ios-settings-status {
  color: var(--color-primary-700);
  font-weight: 600;
}
.ios-settings-actions.is-dirty .status-dot {
  background: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}
/* Dirty 가 아닐 때 저장 버튼은 시각적 비활성 (실제 disabled 아님).
   .ios-settings-status 가 있는 dirty-aware 페이지(settings/index.html)에만 적용.
   다른 페이지는 status indicator 없이 항상 저장 활성. */
.ios-settings-actions:has(.ios-settings-status):not(.is-dirty) .btn-primary {
  opacity: 0.5;
}

/* ========================================
   4.5. iOS Settings Row Pattern (Global)
   2026-05-15 settings/index, admins, pass-extension, settings/payment 4개 페이지
   인라인 정의를 통합. 페이지별 prefix(.px-page/.admins-page) 제거.
   D. MONO CONCIERGE — hairline + emerald accent 적용.
   ======================================== */

/* Group wrapper — 카드형 그룹 */
.ios-group {
  margin-bottom: 24px;
}
.ios-group-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 16px;
  margin-bottom: 8px;
}
.ios-group-card {
  background: var(--bg-primary);
  border-radius: 14px;
  border: 1px solid var(--border-default);
  overflow: hidden;
}
.ios-group-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 6px;
  padding: 0 16px;
  line-height: 1.5;
}

/* Row — 14px 18px hairline divider */
.ios-item {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.ios-item:last-child {
  border-bottom: none;
}
.ios-item-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.ios-item-clickable:hover {
  background: var(--color-slate-50);
}

/* Leading icon — 32px square (Brand Mono: green=emerald, slate=neutral, red=destructive) */
.ios-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 14px;
}
.ios-item-icon.green { background: var(--color-primary-50); color: var(--color-primary-600); }
/* Brand Mono (2026-04): info/amber도 slate neutral로 통일.
   기능별 구분은 아이콘 SVG로 (색이 아닌 형태로 의미 전달) */
.ios-item-icon.info { background: var(--color-slate-100); color: var(--color-slate-600); }
.ios-item-icon.amber { background: var(--color-slate-100); color: var(--color-slate-600); }
.ios-item-icon.red { background: var(--status-error-bg); color: var(--status-error); }
.ios-item-icon.slate { background: var(--color-slate-100); color: var(--color-slate-600); }

/* Label / Value — 좌측 14px medium, 우측 14px tertiary.
   focus-within 시 weight 500 → 700 + color slate-900 (active 단서 보조). */
.ios-item-label {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  color: var(--text-primary);
  transition: font-weight 0.15s ease, color 0.15s ease;
}
.ios-item-value {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-right: 8px;
}

/* 2-line stack — 제목 + 부제목 수직 */
.ios-item-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ios-item-stack .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.ios-item-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Trailing chevron */
.ios-item-arrow {
  color: var(--color-slate-300);
  flex-shrink: 0;
}

/* Inline edit input — 우측 정렬 transparent.
   Focus indication 은 row(.ios-item) 의 :focus-within 좌측 rail 로 처리 (아래 ios-item:focus-within 참조).
   .is-invalid 의 좌측 red rail 과 동일 위치·두께로 일관 체계 — valid=slate-900 rail / invalid=red rail (색만 다름). */
.ios-item-input {
  border: none;
  text-align: right;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  /* 라벨(flex:1) 대비 2배 — 긴 이메일·계좌번호가 잘리지 않도록 입력 영역에 더 넓은 비중 부여 */
  flex: 2;
  background: transparent;
  min-width: 0;
  font-family: inherit;
  transition: color 0.15s ease, font-weight 0.15s ease;
}
.ios-item-input:focus {
  color: var(--color-slate-900);
  font-weight: 600;
}

/* Row focus — 좌측 2px slate-900 rail. 배경 tint 없음 (D.MONO active=slate-900 정책 일관).
   :focus-within 으로 input 안의 focus 가 row 까지 전파. 라벨도 weight up. */
.ios-item:focus-within {
  box-shadow: inset 2px 0 0 0 var(--color-slate-900);
}
.ios-item:focus-within .ios-item-label {
  font-weight: 700;
  color: var(--color-slate-900);
}

/* Row invalid — 좌측 2px red rail (focus rail 과 같은 자리·두께, 색만 다름). FormValidator.is-invalid 발동 시. */
.ios-item.is-invalid {
  box-shadow: inset 2px 0 0 0 var(--status-error);
  animation: shakeInvalid 0.4s ease;
}
/* invalid + focus 동시 → invalid red rail 우선 (오류 상태가 활성 상태보다 시각 우선). 배경은 status-error-bg 미세 tint 유지(오류는 시각 무게 ↑). */
.ios-item.is-invalid:focus-within {
  background: var(--status-error-bg);
  box-shadow: inset 2px 0 0 0 var(--status-error);
}
.ios-item.is-invalid:focus-within .ios-item-label {
  font-weight: 700;
  color: var(--status-error);
}

/* Pill badge — 우측 작은 상태 표시 */
.ios-item-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.ios-item-badge.green {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

/* 가격 (15px 700 emerald) */
.ios-item-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-600);
}

/* ===========================================================================
   Toggle switch — 44×24 iOS-style (글로벌 표준)
   ---------------------------------------------------------------------------
   사용처: 단일 on/off 의미의 모든 컨트롤 (checkbox 대체).
   다중 선택(요일·필터) 은 토글 금지 → 칩 패턴 사용.

   기본:        <input type="checkbox" class="toggle-switch">
   ios-item 안:  <input type="checkbox" class="ios-item-toggle-switch"> (alias)

   "토글 + 설명 + 의존 필드" 패턴은 .toggle-row 또는 .toggle-group 헬퍼 사용.
   ========================================================================== */
.toggle-switch,
.ios-item-toggle-switch {
  width: 44px; height: 24px;
  appearance: none; -webkit-appearance: none;
  background: var(--color-slate-300);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  margin: 0;
  flex-shrink: 0;
}
.toggle-switch::after,
.ios-item-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.toggle-switch:checked,
.ios-item-toggle-switch:checked { background: var(--color-primary-600); }
.toggle-switch:checked::after,
.ios-item-toggle-switch:checked::after { transform: translateX(20px); }
.toggle-switch:disabled,
.ios-item-toggle-switch:disabled { opacity: 0.45; cursor: not-allowed; }

/* ios-item layout helpers (ios-group-card 안에서만 사용) */
.ios-item-toggle { gap: 12px; }
.ios-item-toggle .ios-item-stack { flex: 1; min-width: 0; }
.ios-item-toggle-control { flex-shrink: 0; }

/* toggle-row — 카드 안 단독 라인 (텍스트 + 토글 좌우 분리).
   label.toggle-row 권장 — 라벨 클릭으로 토글 가능. */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
.toggle-row-text { min-width: 0; }
.toggle-row-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.toggle-row-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  line-height: 1.5;
}

/* toggle-group — 토글 head + 의존 fields 묶음 (product-modal pause-group 등) */
.toggle-group {
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  overflow: hidden;
}
.toggle-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  cursor: pointer;
  user-select: none;
}
.toggle-group-head-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.toggle-group-head-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  line-height: 1.5;
}
.toggle-group-fields {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border-hairline);
  background: var(--color-slate-50);
}
.toggle-group-fields .form-group:last-child { margin-bottom: 0; }

/* Section divider — UPPERCASE small header, 카드 안에서 sub-section 구분.
   pass-extension 의 .sub modifier 는 right-aligned 가 필요해 별도 변형. */
.ios-section-divider {
  background: var(--bg-subtle);
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
}
.ios-section-divider .sub {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 6px;
}

/* ========================================
   5. CLEAN LIGHT SIDEBAR (Dojo Style)
   ======================================== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-primary);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sticky);
  overflow-y: auto;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
  padding: 20px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-primary);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition-smooth);
}

.sidebar-logo:hover {
  transform: translateX(2px);
  text-decoration: none;
}

.sidebar-logo-text {
  font-size: 20px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sidebar-toggle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

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

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 4px;
}

.nav-section {
  margin-bottom: var(--space-4);
}

.nav-section-title {
  padding: 10px 14px 8px;
  font-size: 12px;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: var(--font-medium);
  transition: all var(--transition-smooth);
  text-decoration: none;
  margin-bottom: 4px;
  position: relative;
}

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

.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--color-primary-700);
  border-left: 3px solid transparent;
  border-image: var(--gradient-primary) 1;
  border-image-slice: 1;
  margin-left: -3px;
  padding-left: 17px;
  position: relative;
}

.nav-item.active::before {
  display: none;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.9;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  opacity: 1;
}

.nav-text {
  flex: 1;
}

.nav-badge {
  padding: 3px 8px;
  font-size: 12px;
  font-weight: var(--font-semibold);
  background: var(--status-error);
  color: white;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.nav-tooltip {
  display: none;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 12px;
  padding: 8px 14px;
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 13px;
  font-weight: var(--font-medium);
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-toast);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nav-tooltip::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: rgba(30, 41, 59, 0.95);
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border-light);
  background: transparent;
}


/* Logout Button */
.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  color: var(--status-error);
  font-size: 14px;
  font-weight: var(--font-medium);
  transition: all var(--transition-smooth);
  cursor: pointer;
}

.btn-logout:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  color: #b91c1c;
}

/* Collapsed sidebar */
.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .user-info,
.sidebar.collapsed .user-agency,
.sidebar.collapsed .btn-logout span {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 14px;
}

.sidebar.collapsed .nav-tooltip {
  display: block;
}

.sidebar.collapsed .nav-item:hover .nav-tooltip {
  opacity: 1;
}

.sidebar.collapsed + .main-content {
  margin-left: var(--sidebar-collapsed);
}

/* ========================================
   6. D. MONO CONCIERGE CARDS (2026-05-15)
   project-frontend-guide § D. MONO CONCIERGE
   - 1px emerald hairline accent (::before)
   - shadow 제거 (hairline + accent 로 위계)
   - card-header 흰 배경 + 4×14 emerald bar 타이틀
   ======================================== */
.card {
  background: var(--bg-primary);
  border-radius: 14px;
  box-shadow: none;
  border: 1px solid #eaecef;
  overflow: hidden;
  transition: border-color 0.2s ease;
  position: relative;
}

/* D accent — 카드 상단 1px emerald 그라데이션 hairline. opt-out: `.card.no-accent` */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-primary-300) 28%,
    var(--color-primary-500) 50%,
    var(--color-primary-300) 72%,
    transparent 100%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}
.card.no-accent::before { display: none; }

.card:hover {
  border-color: #d8dde3;
}

.card-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: #ffffff;
  border-radius: 13px 13px 0 0;
}

/* frontend-guide §21 저장 액션 표준: 카드 헤더 우측 액션 그룹 */
.card-header .card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-slate-900);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* D — 카드 타이틀 앞 4×14 emerald 세로 막대 */
.card-title::before {
  content: '';
  width: 4px;
  height: 14px;
  background: var(--color-primary-600);
  border-radius: 2px;
  flex-shrink: 0;
}
.card-title.no-bar::before { display: none; }

.card-body {
  padding: 20px 22px;
  overflow: visible;
}

.card-footer {
  padding: 14px 22px;
  border-top: 1px solid #f4f5f7;
  background: #ffffff;
  border-radius: 0 0 13px 13px;
}

/* B-slim — 단일 카드 폼 D안의 슬림 변형 (members/detail).
   detail 페이지는 폼 카드 외에 read-only 카드(이용권/캘린더/이력) 가 본문에 섞여 있어
   기본 .card-footer 의 hairline + 22px padding 이 폼-액션 분리감을 과하게 만든다.
   modifier 로 그 두 요소만 빼서 액션이 폼 본문의 자연 연장처럼 이어붙고 약 14px 점유 절약. */
.card-footer.card-footer--slim {
  padding: 8px 0 0;
  border-top: none;
  background: transparent;
  border-radius: 0;
}

/* frontend-guide §21 — 카드 푸터 액션 (D안).
   단일 카드 폼 페이지(예: members/form.html, member/profile.html, members/detail.html)의 저장/취소 액션.
   modal-footer 의 페이지 버전 — "위에서 채우고 아래에서 저장" 흐름.
   모바일은 헤더 인라인 액션을 쓰므로 .desktop-only 와 함께 사용. */
.card-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* D — 카드 헤더 보조 라인 */
.card-subtitle {
  font-size: 12.5px;
  color: var(--color-slate-400);
  margin-top: 4px;
  line-height: 1.5;
  font-weight: 500;
}

/* ========================================
   7. CLEAN STAT CARDS (Dojo Style)
   ======================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
  max-width: 100%;
  width: 100%;
}

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Compact Stat Chips (Member Dashboard) */
.stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.stat-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.stat-chip:hover {
  border-color: var(--color-primary-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-chip-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-chip-icon svg {
  width: 18px;
  height: 18px;
}

.stat-chip-icon.primary {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

.stat-chip-icon.success {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

.stat-chip-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-chip-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.stat-chip-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Stats List (Vertical Layout) */
.stats-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.stat-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: white;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.stat-list-item:hover {
  border-color: var(--color-primary-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-list-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-list-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
}

.stat-list-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.stat-list-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ========================================
   7.5. LUCIDE ICONS & BUTTON ICONS - Enhanced Styles
   ======================================== */
/* Lucide icon base styles */
i[data-lucide],
.btn svg,
.btn-icon svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* Icon sizes in context */
.nav-icon[data-lucide],
.nav-link i[data-lucide],
.nav-link svg {
  width: 20px;
  height: 20px;
}

.btn-sm i[data-lucide],
.btn-sm svg {
  width: 16px;
  height: 16px;
}

.btn-lg i[data-lucide],
.btn-lg svg {
  width: 20px;
  height: 20px;
}

/* System logout button icons */
.system-logout-btn i[data-lucide],
.system-logout-btn svg {
  width: 18px;
  height: 18px;
}

/* Mobile nav button icons */
.mobile-nav-btn i[data-lucide],
.mobile-nav-btn svg {
  width: 24px;
  height: 24px;
}

/* Secondary button icon color */
.btn-secondary svg,
.btn-secondary i[data-lucide] {
  color: var(--text-tertiary);
  transition: color 0.2s;
}

.btn-secondary:hover:not(:disabled) svg,
.btn-secondary:hover:not(:disabled) i[data-lucide] {
  color: var(--color-primary-600);
}

/* Ghost button icon */
.btn-ghost svg,
.btn-ghost i[data-lucide] {
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) svg,
.btn-ghost:hover:not(:disabled) i[data-lucide] {
  color: var(--text-primary);
}

/* Emoji in buttons */
.btn-emoji {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.btn:hover:not(:disabled) .btn-emoji {
  transform: scale(1.15);
}

.btn-sm .btn-emoji {
  font-size: 14px;
}

.btn-lg .btn-emoji {
  font-size: 18px;
}

/* Navigation emoji */
.nav-emoji {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.nav-link:hover .nav-emoji {
  transform: scale(1.15);
}

.nav-link.active .nav-emoji {
  transform: scale(1.1);
}

/* ========================================
   8. PREMIUM BUTTONS - Modern Minimal Style
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: var(--font-bold);
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  letter-spacing: -0.01em;
}

.btn:hover {
  text-decoration: none;
}

/* Focus ring for accessibility */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.btn:disabled,
.btn[disabled] {
  background: var(--bg-tertiary) !important;
  color: var(--text-tertiary) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.6;
}

.btn:disabled:hover,
.btn[disabled]:hover {
  background: var(--bg-tertiary) !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* Lucide icons support */
.btn svg,
.btn i[data-lucide] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-sm svg,
.btn-sm i[data-lucide] {
  width: 16px;
  height: 16px;
}

/* Primary - Solid Emerald, Minimal Border */
.btn-primary {
  background: var(--color-primary-600);
  color: white;
  border: 1.5px solid var(--color-primary-600);
  box-shadow: none;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: white;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
}

.btn-primary:active:not(:disabled) {
  background: var(--color-primary-800);
  border-color: var(--color-primary-800);
  transform: scale(0.97);
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

/* Secondary - White with border, hover slate (D. MONO CONCIERGE — emerald 톤 제거, 모노톤 secondary) */
.btn-secondary {
  background: var(--bg-primary);
  color: var(--color-slate-700);
  border: 1.5px solid #e5e7eb;
  box-shadow: none;
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-slate-300);
  color: var(--color-slate-900);
  background: var(--bg-primary);
}

.btn-secondary:active:not(:disabled) {
  background: var(--color-slate-100);
  transform: scale(0.97);
}

.btn-secondary:focus-visible {
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

/* Dark - Slate-900 솔리드 (D. MONO CONCIERGE 3-tier 위계: 모노톤 강한 액션)
   용도: 도장 카드 "관리하기" · 페이지 강한 강조 액션 · Primary 와 의미 충돌 없는 모노 강조
   project-frontend-guide § D. MONO CONCIERGE — 버튼 3-tier */
.btn-dark {
  background: var(--color-slate-900);
  color: white;
  border: 1.5px solid var(--color-slate-900);
  box-shadow: none;
}

.btn-dark:hover:not(:disabled) {
  background: #000;
  border-color: #000;
  color: white;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.btn-dark:active:not(:disabled) {
  background: #000;
  transform: scale(0.97);
}

.btn-dark:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.25);
}

.btn-dark svg,
.btn-dark i[data-lucide] {
  color: rgba(255, 255, 255, 0.9);
}

/* Ghost - Minimal and clean */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-ghost:active:not(:disabled) {
  background: var(--bg-tertiary);
}

/* Success - Solid Emerald */
.btn-success {
  background: var(--color-primary-600);
  color: white;
  border: 1.5px solid var(--color-primary-600);
  box-shadow: none;
}

.btn-success:hover:not(:disabled) {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: white;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
}

/* Danger - White with red border */
.btn-danger {
  background: var(--bg-primary);
  color: var(--status-error);
  border: 1.5px solid #fecaca;
  box-shadow: none;
}

.btn-danger:hover:not(:disabled) {
  border-color: var(--status-error);
  background: var(--status-error-bg);
}

.btn-danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.btn-danger-outline {
  padding: 8px 16px;
  border: 1px solid var(--status-error);
  color: var(--status-error);
  background: white;
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-danger-outline:hover {
  background: var(--status-error);
  color: white;
}

.btn-full {
  width: 100%;
  margin-top: 8px;
}

/* Sizes - Refined proportions */
.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 8px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 12px;
}


/* Block and Wide buttons */
.btn-block {
  display: block;
  width: 100%;
}

.btn-wide {
  width: 100%;
}

/* Button Group - Clean spacing */
.btn-group-inline {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* Loading state with spinner */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin-left: -9px;
  margin-top: -9px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

.btn-primary.btn-loading::after,
.btn-danger.btn-loading::after,
.btn-success.btn-loading::after {
  border-top-color: white;
}

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

/* ========================================
   9. PREMIUM FORMS
   ======================================== */
.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-row-2col + .form-row-2col {
  margin-top: 14px;
}

@media (max-width: 768px) {
  .form-row-2col {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* row 사이 모바일 표준 8px (frontend-guide §24) */
  .form-row-2col + .form-row-2col,
  .form-row-2col + .form-group,
  .form-group + .form-row-2col {
    margin-top: 8px;
  }
  /* iOS Safari 자동 줌 방지 (input font-size < 16px 시 포커스 줌 발생) */
  .form-input,
  .form-input-sm,
  .form-textarea,
  .form-select,
  .form-floating .form-control,
  .float-field input {
    font-size: 16px !important;
  }
  /* 입력 컨트롤 높이 모바일 표준 48px (frontend-guide §23) */
  .form-input,
  .form-textarea,
  .form-select,
  .custom-select-trigger {
    padding: 13px 16px;
    min-height: 48px;
  }
  .form-textarea { min-height: 96px; }
  .form-select { padding-right: 44px; }
  /* 터치 타겟 44px+ (WCAG / Apple HIG 권장) */
  .btn {
    min-height: 44px;
  }
  /* 모바일 폼 간격 표준 (frontend-guide §24)
     card-body 16 / form-group 14 / label 6 / row gap 8 */
  .card-body { padding: 16px; }
  .form-group { margin-bottom: 14px; }
  .form-group:last-child { margin-bottom: 0; }
  .form-label { margin-bottom: 6px; }
}

.form-group {
  margin-bottom: 24px;
  overflow: visible;
  position: relative;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

.form-label .required {
  color: var(--status-error);
  margin-left: 2px;
  font-weight: var(--font-semibold);
  font-size: 14px;
}

/* 입력 컨트롤 높이 표준 (frontend-guide §23)
   데스크톱 44px / 모바일 48px — .form-input · .form-select · .custom-select-trigger 통일 */
.form-input,
.form-textarea {
  width: 100%;
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.4;
  min-height: 44px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Select 기본 appearance 제거 - 상세 스타일은 섹션 65에서 정의 */

/* Date input 스타일 */
input[type="date"].form-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type="date"].form-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

input[type="date"].form-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.form-input:hover,
.form-textarea:hover {
  border-color: var(--border-strong);
  background: #fcfcfd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12), 0 2px 8px rgba(16, 185, 129, 0.08);
  background: var(--bg-primary);
}

/* .form-select hover/focus 스타일은 섹션 65에서 정의 */

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-tertiary);
  font-weight: var(--font-normal);
}

.form-input.is-invalid,
.form-textarea.is-invalid,
.float-field input.is-invalid,
.add-float-field input.is-invalid {
  border-color: var(--status-error);
  background-color: var(--status-error-bg);
}

.form-input.is-invalid:focus,
.form-textarea.is-invalid:focus,
.float-field input.is-invalid:focus,
.add-float-field input.is-invalid:focus {
  border-color: var(--status-error);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

.float-field input.is-invalid + label,
.add-float-field input.is-invalid + label {
  color: var(--status-error) !important;
}

/* .form-select.is-invalid 스타일은 섹션 65 이후 정의 */

.form-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Form Section */
.form-section {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: var(--space-4);
}

.form-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.form-check-input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.form-check-label {
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}

/* Form Row (for inline forms) */
.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-row + .form-row,
  .form-row + .form-group,
  .form-group + .form-row {
    margin-top: 8px;
  }
}

/* ========================================
   10. PREMIUM TABLES
   ======================================== */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  background: var(--bg-primary);
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* D. MONO CONCIERGE — 테이블 헤더 (2026-05-15 한글 가독성 보정).
   영문은 UPPERCASE letter-spacing 톤이지만 한글은 그게 안 먹어서 12px 700 + letter-spacing 0.03em 로 압축.
   배경은 흰색 유지 (회색 그라데이션 제거 의도 유지). */
.table th {
  padding: 14px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-slate-700);
  letter-spacing: 0.03em;
  text-transform: none;
  background: #ffffff;
  border-bottom: 1px solid #eaecef;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}

.table th:first-child {
  border-radius: var(--radius-lg) 0 0 0;
}

.table th:last-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

/* Sortable header — th[role="button"] 은 cursor pointer (인라인 style 제거 - 2026-05-20) */
.table th[role="button"] {
  cursor: pointer;
  user-select: none;
}
.table th[role="button"]:hover {
  color: var(--color-primary-700);
}

/* Toolbar utilities — 검색바/필터 옆 액션 묶음 우측 정렬 (인라인 style 제거 - 2026-05-20) */
.toolbar-actions-end {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Dropdown anchor — relative+inline-block 위치 컨텍스트 (드롭다운 메뉴의 부모) */
.dropdown-anchor {
  position: relative;
  display: inline-block;
}

.table td {
  padding: 14px 20px;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid #f4f5f7;
  vertical-align: middle;
  transition: background-color 0.15s ease;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* D. MONO CONCIERGE — 테이블 셀 위계: 부차 컬럼(.muted) tabular-nums slate-500 */
.table td.muted {
  color: var(--color-slate-500);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Premium Table Row Hover */
.table tbody tr {
  transition: all 0.25s ease;
}

/* D. MONO CONCIERGE — row hover 모노톤 미세 강조 (emerald 그라데이션 제거) */
.table tbody tr:hover {
  background: #fafbfc;
}

.table tbody tr:hover td {
  color: var(--text-primary);
}

/* Clickable Row Enhancement */
.table tbody tr.clickable-row,
.table-clickable tbody tr {
  cursor: pointer;
}

.table tbody tr.clickable-row:hover,
.table-clickable tbody tr:hover {
  background: #fafbfc;
}

.table tbody tr.clickable-row:active,
.table-clickable tbody tr:active {
  transform: scale(0.998);
}

.table-actions {
  display: flex;
  gap: var(--space-2);
}

/* Data Table (Premium version) */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th,
.data-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 14px;
  transition: all 0.2s ease;
}

.data-table th {
  background: linear-gradient(180deg, var(--color-slate-50) 0%, var(--color-slate-100) 100%);
  font-weight: var(--font-bold);
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}

.data-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.04) 0%, rgba(5, 150, 105, 0.02) 100%);
}

/* ========================================
   11. PREMIUM BADGES
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.badge::before {
  display: none;
}

/* Badges */
.badge-success,
.badge-active,
.badge-completed {
  background: var(--status-success-bg);
  color: var(--status-success);
}

/* Brand Mono (2026-04): warning/info 상태 뱃지 → slate neutral.
   색 대신 텍스트로 의미 전달 (예: "일시정지" · "심사 중" · "설정 필요"). */
.badge-warning,
.badge-pending {
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

.badge-error,
.badge-failed,
.badge-danger {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.badge-info,
.badge-progress {
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

.badge-secondary,
.badge-neutral,
.badge-cancelled {
  background: var(--color-slate-100);
  color: var(--color-slate-600);
}

.badge-primary {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

/* Brand Mono: EXPIRED 는 매일 발생하는 일상 상태이므로 채도를 낮춰 시각 피로 완화.
   진짜 critical(badge-danger)과 동일 강도가 되지 않도록 outline 스타일로 차별화. */
.badge-expired {
  background: #fff;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* Pass Type Badges — Brand Mono · D.MONO CONCIERGE 정합 (2026-05 재설계 v3).
   흰 bg + slate-200 hairline + slate-700 텍스트 + ::before emerald 3-shade dot.
   project-frontend-guide §이용권 뱃지 참조. */
.badge-period,
.badge-count,
.badge-day-specific {
  background: #fff;
  color: var(--color-slate-700);
  border: 1px solid var(--border-light);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  gap: 7px;
  /* .badge 베이스(padding 6px 14px) 위에 dot 까지 들어가면 답답 → 한글+dot 비율에 맞춰 보정.
     .plan-type-chip / .pay-type-badge / .pt-badge 등 자체 padding 베이스에는 그쪽이 우선. */
  padding: 4px 11px 4px 10px;
}

/* dot — .badge::before { display:none } 보다 뒤에 있어 자연 override */
.badge-period::before,
.badge-count::before,
.badge-day-specific::before {
  display: inline-block;
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge-period::before { background: var(--color-primary-400); }
.badge-count::before { background: var(--color-primary-600); }
.badge-day-specific::before { background: var(--color-primary-800); }

.badge-none {
  background: #fff;
  color: var(--color-slate-500);
  border: 1px solid var(--border-light);
  font-weight: 600;
}

/* Pass Template Grid */
.pass-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.pass-template-card {
  padding: 14px 16px;
  border: 2px solid var(--border-default);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bg-primary);
}

.pass-template-card:hover {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
}

.pass-template-card.selected {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.pass-template-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.pass-template-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.pass-template-info .badge {
  font-size: 12px;
  padding: 2px 8px;
}

/* Light badges (alternative style) — Brand Mono: warning/info slate 통일 */
.badge-light-success {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.badge-light-warning {
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

.badge-light-error {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.badge-light-info {
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

/* ========================================
   12. Alerts & Banners
   ======================================== */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.alert-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: var(--font-medium);
  margin-bottom: var(--space-1);
}

.alert-text {
  font-size: var(--text-sm);
}

.alert-success {
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  color: var(--status-success);
}

/* Brand Mono (2026-04): alert warning/info → slate neutral. error는 예외 유지 (강한 피드백 필수). */
.alert-warning {
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  color: var(--color-slate-700);
}

.alert-error {
  background: var(--status-error-bg);
  border: 1px solid var(--status-error-border);
  color: var(--status-error);
}

.alert-info {
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  color: var(--color-slate-700);
}


/* ========================================
   13. Alert List (Dashboard)
   ======================================== */
.alert-list {
  display: flex;
  flex-direction: column;
}

.alert-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}

.alert-card:last-child {
  border-bottom: none;
}

.alert-card:hover {
  background: var(--bg-secondary);
}

.alert-card .alert-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-card .alert-icon svg {
  width: 18px;
  height: 18px;
}

.alert-card .alert-icon.info {
  background: var(--status-info-bg);
  color: var(--status-info);
}

.alert-card .alert-icon.warning {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.alert-card .alert-icon.error {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.alert-card .alert-icon.success {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.alert-card .alert-content {
  flex: 1;
}

.alert-card .alert-text {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.alert-card .alert-count {
  font-weight: var(--font-semibold);
  color: var(--accent-primary);
}

.alert-card .alert-arrow {
  color: var(--text-tertiary);
}

.alert-card .alert-arrow svg {
  width: 16px;
  height: 16px;
}


/* ========================================
   15. Modal — D.MONO Concierge (표준)
   ----------------------------------------
   페이지 인라인 재정의 금지:
     .modal-header/-title/-close/-body/-footer 의
     padding/height/font-size/bg/border 를 페이지에서 덮어쓰지 않는다.
   스크롤은 .modal-body 한 곳만 — 내부 list/scroll wrapper 에
     별도 max-height/overflow 거는 패턴 금지 (min-height:0 박제로 자식 스크롤 보장).
   modifier:
     .modal-dmono = alias (호환). 신규 사용 ❌
     .modal-compact = 페이지 인라인 폼 등 더 컴팩트 변형
     .modal-dark = 어두운 변형 (출석 키오스크)
   ======================================== */
.modal {
  background: #fff;
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.25);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.modal-sm { max-width: 380px; }
.modal-md { max-width: 480px; }
.modal-lg { max-width: 640px; }
.modal-xl { max-width: 800px; }

.modal-header {
  padding: 0 22px;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

.modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-700));
  opacity: 0.7;
}

.modal-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-slate-900);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.modal-title::before {
  content: '';
  width: 4px;
  height: 14px;
  background: var(--color-primary-600);
  border-radius: 2px;
  flex-shrink: 0;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

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

.modal-footer {
  padding: 0 22px;
  height: 56px;
  background: #fff;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.modal-footer .btn {
  min-width: 88px;
}

/* modal-footer-clean — 좌우 균등 분배 변형 (취소/확정 페어, 파괴적 액션 등)
   기본 modal-footer 의 hairline 제거 + 버튼 flex 균등 (min-width 88 가드 해제) */
.modal-footer-clean {
  border-top: none;
}
.modal-footer-clean .btn {
  flex: 1;
  min-width: 0;
}

/* modal-footer-compact — alert-style 컨펌 모달 (modal-sm) 의 컴팩트 footer.
   기본 56px 고정 해제 + 작은 padding (modal-body 내 icon+title 묶음 패턴과 짝) */
.modal-footer-compact {
  height: auto;
  padding: 12px 20px 16px;
  gap: 8px;
}

/* Modal Icon Badge — 경고/확인 모달 상단 아이콘 배지
   V1 Rounded Square (radius 12px), 48px 고정.
   크기 변형 필요 시 width/height만 override */
.modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-icon svg {
  width: 24px;
  height: 24px;
}

.modal-icon-primary {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.modal-icon-warning {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.modal-icon-danger {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.modal-icon-success {
  background: var(--status-success-bg);
  color: var(--status-success);
}

/* ========================================
   16. Toast
   ======================================== */
.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

/* 모바일: sticky mobile-header(56px)를 피해서 아래로 이동 */
@media (max-width: 768px) {
  .toast-container {
    top: calc(56px + env(safe-area-inset-top, 0px) + var(--space-2));
    right: var(--space-3);
    left: var(--space-3);
  }
  .toast {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-left: 4px solid transparent;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  animation: toastIn 200ms ease-out;
  min-width: 300px;
  max-width: 380px;
}

/* Toast 2색 정리: success+info = Emerald (좋음), error+warning = Red (나쁨) */
.toast-success,
.toast-info    { border-left-color: var(--status-success); }
.toast-error,
.toast-warning { border-left-color: var(--status-error); }

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast-exit {
  animation: toastOut 200ms ease-out forwards;
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-success .toast-icon-wrap,
.toast-info    .toast-icon-wrap { background: var(--status-success-bg); }
.toast-error   .toast-icon-wrap,
.toast-warning .toast-icon-wrap { background: var(--status-error-bg); }

.toast-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.toast-success .toast-icon,
.toast-info .toast-icon { color: var(--status-success); }
.toast-error .toast-icon,
.toast-warning .toast-icon { color: var(--status-error); }

.toast-content {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.toast-close {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: all var(--transition-fast);
}

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

/* ========================================
   17. Dropdown
   ======================================== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-1);
  min-width: 180px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--bg-hover);
}

.dropdown-item svg {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

.dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
}

/* ========================================
   18. Tabs — D. MONO CONCIERGE Underline (2026-05-18)
   ========================================
   하단 1px hairline + 활성 셀 하단 2px slate-900 rail.
   iOS-row focus rail(수직 slate-900)·카드 title 막대(수직 emerald)와 같은
   "rail = 위계 표현" 어휘의 수평 확장. shadow 0 / 채도 절제.

   마크업: <div class="tabs"> 안에 <a class="tab-item active"> 또는
   <label class="tab-item"><input type="radio" checked> ...</label> 두 패턴 모두 지원.
   카운트: 알람/주의(결제 대기 등) = .tab-badge / 단순 분류 = .tab-count */
.tabs {
  display: inline-flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-hairline, #eaecef);
  margin-bottom: var(--space-5);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }

/* 오버플로 페이드 마스크 — Tabs.init() 이 scroll 위치 기반으로 토글 (common.js).
   양쪽 모두 오버플로 시 좌·우 페이드. 데스크톱(컨텐츠 폭 충분)에서는 mask 미적용 → 마지막 탭 fade 회귀 차단. */
.tabs.tabs-overflow-right:not(.tabs-overflow-left) {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.tabs.tabs-overflow-left:not(.tabs-overflow-right) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
}
.tabs.tabs-overflow-left.tabs-overflow-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.tab-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-slate-500);
  text-decoration: none !important;
  cursor: pointer;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.15s;
  background: transparent;
  scroll-snap-align: start;
}

.tab-item input[type="radio"] {
  display: none;
}

.tab-item::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 2px;
  transition: background 0.15s;
}

.tab-item:hover:not(.active):not(:has(input:checked)) {
  color: var(--color-slate-900);
}

.tab-item.active,
.tab-item:has(input:checked) {
  color: var(--color-slate-900);
  font-weight: 700;
}

.tab-item.active::after,
.tab-item:has(input:checked)::after {
  background: var(--color-slate-900);
}

/* .tab-badge / .tab-count — Hairline Pill 통일 (D.MONO active=slate-900, 2026-05-18)
   두 클래스는 의미 alias (badge=알람성, count=분류성) — 시각은 동일.
   비활성 = 흰 bg + slate-200 hairline + slate-500
   활성   = slate-900 솔리드 + #fff (D.MONO active 정책 정합)
   필터 칩(.filter-chip)·이용권 뱃지·iOS-row rail 과 같은 어휘 합류. */
.tab-badge,
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 19px;
  padding: 0 7px;
  font-size: 11.5px;
  font-weight: 800;
  background: #fff;
  color: var(--color-slate-500);
  border: 1px solid var(--border-hairline, #eaecef);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  margin-left: 0;
}

.tab-item.active .tab-badge,
.tab-item.active .tab-count,
.tab-item:has(input:checked) .tab-badge,
.tab-item:has(input:checked) .tab-count {
  background: var(--color-slate-900);
  border-color: var(--color-slate-900);
  color: #fff;
}

@media (max-width: 768px) {
  .tab-item {
    padding: 10px 12px 12px;
    font-size: 13px;
  }
}

/* ========================================
   19. Pagination
   ======================================== */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination-item {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.pagination-item.active {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

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

/* ========================================
   20. Empty State (Soft Hero — Brand Mono)
   - 모든 페이지 빈 상태 통일 토큰. 페이지별 인라인 style 오버라이드 금지.
   - 시그니처 Emerald 톤 통일. 변형은 강도(intensity)로만 구분.
   ======================================== */
.empty-state {
  padding: 64px 24px 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 480px 220px at 50% 0%, var(--color-primary-50) 0%, transparent 70%),
    transparent;
  position: relative;
}

.empty-state-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  color: var(--color-primary-600);
  background: #fff;
  border-radius: 50%;
  padding: 18px;
  box-sizing: border-box;
  box-shadow:
    0 0 0 1px var(--color-primary-100),
    0 6px 20px -8px rgba(5, 150, 105, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.empty-state-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke-width: 2;
}

.empty-state-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}

/* 본문 설명 — empty-state-description 을 정식 클래스로 통일.
   레거시 .empty-state-text / .empty-state-desc 는 동일 스타일로 호환 매핑. */
.empty-state-description,
.empty-state-text,
.empty-state-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto 22px;
}

.empty-state-description strong,
.empty-state-text strong,
.empty-state-desc strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* CTA 영역 — 여러 액션이 들어갈 수 있음 */
.empty-state-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 변형 1: filter — 필터·검색 결과 0 (medium intensity) */
.empty-state.empty-state--filter {
  background:
    radial-gradient(ellipse 460px 200px at 50% 0%, var(--color-primary-50) 0%, transparent 75%),
    transparent;
}
.empty-state.empty-state--filter .empty-state-icon {
  color: var(--color-primary-500);
}

/* 변형 2: neutral — 단순 안내 (액션 없음, quiet intensity) */
.empty-state.empty-state--neutral {
  padding: 56px 24px 48px;
  background:
    radial-gradient(ellipse 440px 180px at 50% 0%, var(--color-primary-50) 0%, transparent 80%),
    transparent;
}
.empty-state.empty-state--neutral .empty-state-icon {
  color: var(--color-primary-500);
  box-shadow:
    0 0 0 1px var(--color-primary-100),
    0 4px 14px -8px rgba(5, 150, 105, 0.18);
}

/* Compact 변형 — 카드 안 좁은 영역 (회원상세 이용권 미등록 등).
   admins.html 의 .admins-page .empty-state-sm 같은 페이지 scoped override 는 그대로 동작 (later wins). */
.empty-state-sm {
  padding: 28px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.empty-state-sm-icon,
.empty-state-sm > svg:first-child {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  padding: 9px;
  box-sizing: border-box;
  margin-bottom: 4px;
}
.empty-state-sm-icon svg,
.empty-state-sm > svg:first-child {
  display: block;
  stroke-width: 2;
}
.empty-state-sm-title,
.empty-state-sm > p {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}
.empty-state-sm-link {
  background: transparent;
  border: none;
  color: var(--color-primary-700);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
  margin-top: 4px;
  text-decoration: none;
}
.empty-state-sm-link:hover { color: var(--color-primary-800); }

/* ========================================
   21. Avatar
   ======================================== */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  overflow: hidden;
  flex-shrink: 0;
}

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

.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-xl { width: 80px; height: 80px; }

/* ========================================
   22. Loading
   ======================================== */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-primary);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

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

/* 인라인 스피너 (버튼 안 텍스트와 함께 표시 — 처리 중 피드백) */
.spinner-inline {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.7s linear infinite;
  opacity: 0.7;
}

.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  margin-bottom: var(--space-2);
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: var(--space-3);
}

/* ========================================
   23. Auth Pages - 2 Column Layout
   ======================================== */
.auth-page {
  min-height: 100vh;
  display: flex;
}

.auth-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: var(--bg-primary);
}

.auth-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
  position: relative;
  overflow: hidden;
}

.auth-container {
  width: 100%;
  max-width: 400px;
}

.auth-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.auth-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  text-decoration: none;
}

.auth-logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.auth-logo-text {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.auth-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.auth-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.auth-form {
  width: 100%;
}

.auth-footer {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Auth Illustration (Right Side) */
.auth-illustration {
  text-align: center;
  color: white;
  z-index: 1;
}

.auth-illustration-icon {
  margin-bottom: var(--space-6);
  opacity: 0.9;
}

.auth-illustration h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-3);
}

.auth-illustration p {
  opacity: 0.9;
  line-height: 1.6;
}

/* Gradient Orbs (Background Effect) */
.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
}

.orb-1 {
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.3);
  top: -100px;
  right: -100px;
}

.orb-2 {
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.2);
  bottom: -50px;
  left: -50px;
}

/* Pricing Card */
.pricing-card {
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
}

.pricing-card-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.pricing-item {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  color: var(--text-secondary);
}

.pricing-item:not(:last-child) {
  border-bottom: 1px solid var(--border-subtle);
}

/* Test Login Section */
.test-login-section {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Auth Page Responsive */
@media (max-width: 1024px) {
  .auth-right {
    display: none;
  }

  .auth-left {
    padding: var(--space-6);
  }
}

@media (max-width: 480px) {
  .auth-left {
    padding: var(--space-4);
  }

  .auth-container {
    max-width: 100%;
  }
}

/* ========================================
   24. Member Card
   ======================================== */
.member-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.member-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

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

.member-name {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.member-meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ========================================
   25. Settings
   ======================================== */
.settings-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.settings-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.settings-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.settings-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.settings-body {
  padding: var(--space-5);
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-item:first-child {
  padding-top: 0;
}

/* ========================================
   26. Utilities
   ======================================== */
/* Flex */
.flex { display: flex; }
.d-flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }

/* Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* Margin */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* Padding */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }

/* Section Spacing - 섹션 간격 유틸리티 */
.section-divider {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-default);
}

.section-divider-sm {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-default);
}

.subsection {
  margin-top: 24px;
}

.subsection-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.subsection-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* Width */
.w-full { width: 100%; }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

/* Text */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* ========================================
   27. Search & Filter Components
   ======================================== */
/* Search Box */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box svg {
  position: absolute;
  left: 12px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.search-input {
  width: 280px;
  padding: 10px 12px 10px 40px;
  font-size: var(--text-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  transition: all var(--transition-fast);
}

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

.search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-subtle);
}

/* Filter Panel */
.filter-panel {
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 0 0 auto;
  min-width: fit-content;
}

.filter-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  row-gap: var(--space-2);
}

.filter-chip {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.filter-chip input {
  display: none;
}

.filter-chip-label {
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  .filter-chip-label {
    min-height: 44px;
    padding: 8px 16px;
  }
  .filter-grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .filter-group {
    min-width: 0;
    width: 100%;
  }
}

/* D. MONO CONCIERGE — 활성 필터 칩: Slate-900 검은 솔리드 (emerald 톤 폐기) */
/* .is-active = JS imperative 재렌더 칩 (input 없이 button 으로 쓸 때) */
.filter-chip input:checked + .filter-chip-label,
.filter-chip-label.is-active {
  background: var(--color-slate-900);
  border-color: var(--color-slate-900);
  color: #ffffff;
}

.filter-chip-label:hover {
  border-color: var(--color-slate-400);
  color: var(--color-slate-900);
}

/* button.filter-chip-label 리셋 (form 디폴트 폰트/마진 제거) */
button.filter-chip-label {
  font-family: inherit;
  line-height: 1.2;
  margin: 0;
}

.filter-chip-label .level-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.filter-chip input:checked + .filter-chip-label .level-dot {
  border-color: rgba(255, 255, 255, 0.3);
}

/* ========================================
   27.5 Active Filter Chips — 글로벌 박제
   ========================================
   목록 페이지 검색바 아래 노출되는 "활성 필터" pill (× 개별 제거 + 모두 지우기).
   D. MONO CONCIERGE: Slate-900 솔리드 칩 + dashed 둘레 UPPERCASE clear-all.
   회원·결제·정산·테넌트 목록 공통 사용 — project-frontend-guide §목록 페이지 필터 패턴. */
.active-filter-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.filter-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  background: var(--color-slate-900);
  border: 1px solid var(--color-slate-900);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.filter-active-chip .level-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.filter-active-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  transition: all 0.15s;
}

.filter-active-chip-remove:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.filter-active-chip-clear-all {
  padding: 4px 10px;
  border: 1px dashed var(--border-default, #eaecef);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.15s;
}

.filter-active-chip-clear-all:hover {
  border-color: var(--color-slate-400);
  color: var(--color-slate-900);
  background: transparent;
}

/* ========================================
   28. Table Enhancements
   ======================================== */
/* Table Clickable Rows */
.table-clickable tbody tr {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.table-clickable tbody tr:hover {
  background: var(--accent-primary-subtle);
}

/* Member Avatar */
.member-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: white;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Level Display */
.level-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.level-indicator {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.level-name {
  font-size: var(--text-sm);
  color: var(--text-primary);
  min-width: 65px;
  display: inline-block;
}

.level-gral {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: var(--space-1);
  min-width: 40px;
  display: inline-block;
}

/* Table Footer & Pagination */
.table-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--bg-primary);
}

.pagination-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--accent-primary-subtle);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-info {
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Empty State Enhancement — 통합되어 R20 으로 이전 (Soft Hero) */

/* Member Specific Avatar */
.member-logo {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%) !important;
}

.sidebar .member-avatar {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
}

/* ========================================
   30. Responsive
   ======================================== */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
  }

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

@media (max-width: 768px) {
  .page-header {
    padding: var(--space-4);
  }

  .page-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .table-container {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .modal {
    max-width: 100%;
    margin: var(--space-4);
    /* iOS Safari 주소창 동적 높이 반영 (100vh → 100dvh) */
    max-height: calc(100dvh - var(--space-8));
  }
}

/* ========================================
   28. Dark Theme (Optional - disabled)
   ======================================== */
/* Dark theme is disabled for clean design */

/* ========================================
   29. Print Styles
   ======================================== */
@media print {
  .sidebar,
  .toast-container,
  .modal-overlay {
    display: none !important;
  }

  .main-content {
    margin-left: 0;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ========================================
   30. Animations (Minimal)
   ======================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 200ms ease-out;
}

/* Shimmer effect - subtle skeleton loading */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Stagger children animation */
.stagger-children > *:nth-child(1) { animation-delay: 0s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.15s; }

.btn-glass {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-glass:hover {
  background: var(--bg-hover);
}

/* Fix for count-up class */
.count-up {
  /* No animation needed - can be enhanced with JS */
}

/* Banner compatibility */
.banner-primary {
  border-left-color: var(--accent-primary);
}

.banner-success {
  border-left-color: var(--status-success);
}

.banner-warning {
  border-left-color: var(--status-warning);
}

/* ========================================
   32. Sidebar Overlay (Mobile)
   ======================================== */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-sticky) - 1);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .mobile-menu-btn {
    display: flex;
  }
}

/* ========================================
   33. Form Grid
   ======================================== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.form-grid .form-group.full-width {
  grid-column: 1 / -1;
}

/* Static form value (read-only display) */
.form-static {
  padding: 14px 18px;
  font-size: 15px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
}

/* ========================================
   34. Search Input
   ======================================== */
.search-input-wrapper {
  position: relative;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.search-input-wrapper .form-input {
  padding-left: 36px;
}

/* ========================================
   35. Filter Bar
   ======================================== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.filter-bar .form-input,
.filter-bar .form-select {
  width: auto;
  min-width: 150px;
}

@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar .form-input,
  .filter-bar .form-select {
    width: 100%;
  }
}

/* ========================================
   36. Header Actions
   ======================================== */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

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

/* ========================================
   37. Wizard Steps
   ======================================== */
/* ========================================
   38. MEMBER DASHBOARD (Dojo Style)
   ======================================== */

/* Profile Header - Modern Card Style */
.member-profile-header {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-500) 50%, var(--color-primary-500) 100%);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 40px rgba(5, 150, 105, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.member-profile-header::before {
  content: '';
  position: absolute;
  top: -80%;
  right: -30%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.member-profile-header::after {
  content: '';
  position: absolute;
  bottom: -60%;
  left: -15%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.profile-main {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: 3px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.profile-avatar svg {
  width: 36px;
  height: 36px;
  color: white;
  opacity: 0.95;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-name {
  font-size: 26px;
  font-weight: 700;
  color: white;
  margin: 0;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  line-height: 1.2;
}

.profile-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.level-visual {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.level-bar {
  width: 56px;
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: stretch;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.level-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.level-bar--light {
  border: 1.5px solid rgba(0, 0, 0, 0.15);
}

.level-tip {
  width: 16px;
  min-width: 16px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-left: auto;
}

.level-tip--black {
  background: #C41E3A;
}

.level-tip .level-stripe {
  width: 2px;
  height: 10px;
  background: white;
  border-radius: 1px;
}

.level-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.level-gral {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin-left: 2px;
}

.profile-dojo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.profile-dojo-tag:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.2);
}

.profile-dojo-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

/* Profile Header - Mobile */
@media (max-width: 768px) {
  .member-profile-header {
    padding: 20px;
  }

  .profile-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .profile-avatar {
    width: 60px;
    height: 60px;
  }

  .profile-avatar svg {
    width: 28px;
    height: 28px;
  }

  .profile-name {
    font-size: 22px;
  }

  .level-bar {
    width: 48px;
    height: 14px;
  }

  .level-tip {
    width: 14px;
    min-width: 14px;
  }

  .level-stripe {
    height: 8px;
  }

  .level-label {
    font-size: 12px;
  }

  .profile-dojo-tag {
    padding: 5px 12px;
    font-size: 12px;
  }
}

/* Welcome Banner (Legacy) */
.member-welcome-banner {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  box-shadow: 0 10px 40px rgba(5, 150, 105, 0.3);
  position: relative;
  overflow: hidden;
}

.member-welcome-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.welcome-content {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.welcome-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: var(--font-bold);
  color: white;
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
}

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

.welcome-name {
  font-size: 22px;
  font-weight: var(--font-bold);
  margin: 0;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.welcome-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

/* 회원 리스트 벨트 컬럼 — belt-sm + "블루벨트 · 2그랄" 인라인 1줄 (mb-belt-line 과 동일 패턴) */
.level-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
}
.level-badge-name {
  font-weight: 600;
  color: var(--text-primary);
}
.level-badge-sep {
  color: var(--text-muted);
  font-weight: 400;
  margin: 0 -2px;
}
.level-badge-grau {
  font-weight: 500;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   .belt — 통합 띠(BJJ belt) 시각화 컴포넌트
   사용처: 회원 리스트/상세, 출석 키오스크, 회원 프로필/대시보드,
           레벨 색 설정. 모든 띠 시각화는 이 컴포넌트로 통일.
   구조: main(메인 컬러) + tape(검정/블랙벨트는 빨강) + stripe(흰/금)
   사이즈: --xs(24×8) / --sm(36×12) / --md(48×14) / --lg(56×16)
   ============================================================ */
.belt {
  --belt-color: var(--color-slate-300);
  --belt-tape: var(--color-slate-900);
  --belt-stripe: var(--color-slate-50);
  --belt-w: 48px;
  --belt-h: 14px;
  --belt-tape-w: 16px;
  --belt-stripe-w: 2px;
  --belt-stripe-gap: 1.5px;
  display: inline-flex;
  align-items: stretch;
  width: var(--belt-w);
  height: var(--belt-h);
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 1px 2px rgba(15,23,42,0.12);
  flex-shrink: 0;
  vertical-align: middle;
}
.belt__main {
  flex: 1;
  background: var(--belt-color);
}
.belt__tape {
  width: var(--belt-tape-w);
  background: var(--belt-tape);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--belt-stripe-gap);
  padding: 0 2px;
}
.belt__stripe {
  width: var(--belt-stripe-w);
  height: 100%;
  background: var(--belt-stripe);
  border-radius: 0.5px;
}

/* 흰 벨트: 흰 배경에서 보이도록 보더 + 미세 그라데이션 */
.belt--white .belt__main {
  background: linear-gradient(180deg, #ffffff, var(--color-slate-100));
  box-shadow: inset 0 0 0 1px var(--color-slate-300);
}
/* 블랙 벨트: 본체 슬레이트-900 + tape 빨강 + 스트라이프 금색(IBJJF degree) */
.belt--black {
  --belt-color: var(--color-slate-900);
  --belt-tape: #b91c1c;
  --belt-stripe: #fde047;
}

/* 사이즈 변형 */
.belt--xs {
  --belt-w: 24px;
  --belt-h: 8px;
  --belt-tape-w: 8px;
  --belt-stripe-w: 1px;
  --belt-stripe-gap: 1px;
}
.belt--sm {
  --belt-w: 36px;
  --belt-h: 12px;
  --belt-tape-w: 12px;
  --belt-stripe-w: 1.5px;
  --belt-stripe-gap: 1.25px;
}
.belt--md {
  --belt-w: 48px;
  --belt-h: 14px;
  --belt-tape-w: 16px;
  --belt-stripe-w: 2px;
  --belt-stripe-gap: 1.5px;
}
.belt--lg {
  --belt-w: 56px;
  --belt-h: 16px;
  --belt-tape-w: 18px;
  --belt-stripe-w: 2px;
  --belt-stripe-gap: 1.75px;
}
.belt--xl {
  --belt-w: 80px;
  --belt-h: 22px;
  --belt-tape-w: 26px;
  --belt-stripe-w: 3px;
  --belt-stripe-gap: 2px;
  border-radius: 4px;
}

/* xs 사이즈에서 tape 폭이 좁아 4그랄 이상 시 스트라이프 간격 더 압축 */
.belt--xs .belt__tape { padding: 0 1px; }
.belt--xs .belt__stripe { border-radius: 0; }

.welcome-meta .divider {
  opacity: 0.6;
  font-size: 11px;
}

/* Streak Badge */
.welcome-streak {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.15);
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Weekly Calendar */
.weekly-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--bg-secondary);
  transition: all 0.2s ease;
}

.day-cell.today {
  background: var(--color-primary-50);
  border: 2px solid var(--color-primary-300);
}

.day-cell.attended {
  background: var(--color-primary-100);
}

.day-cell.attended .day-indicator {
  color: var(--color-primary-600);
}

.day-name {
  font-size: 12px;
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.day-indicator {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-default);
}

.today-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary-400);
}

.today-dot.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* Current Pass Card */
.current-pass-card {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 16px;
}

.pass-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.pass-name {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.pass-progress-section {
  margin-bottom: 10px;
}

.pass-progress-bar {
  height: 8px;
  background: var(--border-default);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.pass-progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.pass-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.pass-progress-info .remaining {
  color: var(--text-secondary);
}

.pass-progress-info .progress-percent {
  color: var(--color-primary-600);
  font-weight: var(--font-semibold);
}

.pass-expires {
  font-size: 12px;
  color: var(--text-tertiary);
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.empty-pass {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-tertiary);
}

.empty-pass svg {
  margin-bottom: 12px;
  opacity: 0.4;
}

.empty-pass p {
  margin: 0;
}

/* Notice List */
.notice-list {
  display: flex;
  flex-direction: column;
}

.notice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s ease;
}

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

.notice-item:hover {
  background: var(--bg-hover);
}

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

.new-badge {
  padding: 2px 6px;
  background: var(--color-slate-200);
  color: var(--color-slate-700);
  font-size: 11px;
  font-weight: var(--font-bold);
  border-radius: 4px;
  text-transform: uppercase;
}

.notice-title {
  font-size: 14px;
  color: var(--text-primary);
}

.notice-date {
  font-size: 12px;
  color: var(--text-tertiary);
}

.empty-notice {
  padding: 32px 16px;
  text-align: center;
}

/* Grid Layouts */
.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}

.p-0 { padding: 0 !important; }
.h4 {
  font-size: 16px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

/* Mobile Responsive for Welcome Banner */
@media (max-width: 768px) {
  .member-welcome-banner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 24px 20px;
  }

  .member-welcome-banner::before {
    width: 250px;
    height: 250px;
    top: -30%;
    right: -15%;
  }

  .welcome-content {
    flex-direction: column;
  }

  .welcome-name {
    font-size: 20px;
  }

  .welcome-meta {
    justify-content: center;
    flex-wrap: wrap;
  }

  .weekly-calendar {
    gap: 4px;
  }

  .day-cell {
    padding: 8px 4px;
  }
}

/* ========================================
   39. SYSTEM DASHBOARD (Dojo Style)
   ======================================== */

/* Stat Icon - Violet */
.stat-icon.violet {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

/* Banner Styles */
.banner {
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--bg-primary);
}

.banner-gradient {
  background: linear-gradient(90deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
  border: none;
  color: white;
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.banner-text h4 {
  font-size: 14px;
  font-weight: var(--font-semibold);
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.9);
}

.banner-text p {
  font-size: 18px;
  font-weight: var(--font-bold);
  margin: 0;
  color: white;
}

/* List View */
.list-view {
  display: flex;
  flex-direction: column;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  transition: all 0.2s ease;
}

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

.list-item:hover {
  background: var(--bg-hover);
}

.list-item.hover-lift:hover {
  transform: translateX(4px);
}

/* Tenant Avatar */
.tenant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: var(--font-bold);
  color: white;
  background: var(--gradient-primary);
}

/* Inquiry Icon */
.inquiry-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inquiry-icon.warning {
  background: var(--status-warning-border);
  color: var(--status-warning);
}

.inquiry-icon.info {
  background: var(--status-info-border);
  color: var(--status-info);
}

.inquiry-icon.success {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

/* Quick Actions Grid */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .quick-actions {
    grid-template-columns: 1fr;
  }
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-light);
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.quick-action-card:hover {
  background: var(--bg-hover);
  border-color: var(--color-primary-300);
  transform: translateY(-2px);
}

.quick-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-action-icon.violet {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.quick-action-icon.warning {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.quick-action-icon.primary {
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
}

.quick-action-icon.success {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.quick-action-label {
  font-size: 14px;
  font-weight: var(--font-medium);
}

/* Ripple Effect Placeholder */
.ripple {
  position: relative;
  overflow: hidden;
}

/* Animation */
.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

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


/* ========================================
   40. TOP NAVIGATION (Dojo Unique Layout)
   ======================================== */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--top-nav-height);
  padding: 0 var(--content-padding);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-name {
  font-size: 22px;
  font-weight: var(--font-bold);
  color: var(--color-slate-800);
  letter-spacing: -0.02em;
}

/* Sport Badge */
.brand-sport-badge {
  padding: 4px 10px;
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  margin-left: 4px;
}

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

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.nav-link:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.nav-link.active {
  background: var(--color-primary-600);
  color: white;
}

.nav-link .nav-icon {
  width: 18px;
  height: 18px;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: white;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-fast);
  z-index: var(--z-dropdown);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.nav-dropdown-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.nav-dropdown-item svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-tenant-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

[data-theme="dark"] .nav-tenant-name {
  color: var(--text-primary);
}

.nav-icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

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

.nav-icon-btn.logout:hover {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.nav-icon-btn svg {
  width: 18px;
  height: 18px;
}

/* 회원 top-nav 프로필/로그아웃: 데스크톱에선 아이콘+텍스트, 모바일에선 아이콘만 */
.nav-member-profile,
.nav-member-logout {
  gap: 6px;
  width: auto;
  padding: 0 12px;
  text-decoration: none;
}
.nav-member-profile.active {
  color: var(--color-primary-600);
  background: var(--color-primary-50);
}
.nav-member-profile-label,
.nav-member-logout-label {
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .nav-member-profile,
  .nav-member-logout {
    width: 36px;
    padding: 0;
  }
  .nav-member-profile-label,
  .nav-member-logout-label { display: none; }
}

.nav-logout-form {
  margin: 0;
  display: flex;
}

.notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--status-error);
  border-radius: 50%;
  border: 2px solid white;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 16px;
  background: var(--bg-secondary);
  border-radius: 24px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nav-user:hover {
  background: var(--bg-tertiary);
}

.nav-user-name {
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.nav-user-avatar {
  width: 32px;
  height: 32px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: white;
}

/* Mobile Menu Button */
.mobile-nav-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .nav-menu {
    display: none;
  }

  .mobile-nav-btn {
    display: flex;
  }
}

@media (max-width: 768px) {
  .top-nav {
    padding: 0 16px;
  }

  .nav-user-name {
    display: none;
  }

  .brand-name {
    font-size: 18px;
  }
}

/* ========================================
   41. MAIN CONTENT WRAPPER (Top Nav Layout)
   ======================================== */
.main-wrapper {
  min-height: calc(100vh - var(--top-nav-height));
  background: var(--bg-gradient-page);
  background-attachment: fixed;
}

.page-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--content-padding);
}

@media (max-width: 768px) {
  .page-container {
    padding: 20px 16px;
  }
}

/* Page Header */
.page-header {
  margin-bottom: 28px;
}

.page-title {
  font-size: 28px;
  font-weight: var(--font-bold);
  color: var(--color-slate-800);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.page-subtitle {
  font-size: 15px;
  color: var(--text-tertiary);
  margin: 0;
}

/* ========================================
   Page Head Pattern (.pg-head-*)
   브레드크럼/인트로 있는 서브 라우팅 페이지용 공통 헤더
   ======================================== */
.pg-head {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-default);
}

.pg-head-breadcrumb {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.pg-head-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.pg-head-breadcrumb a:hover { color: var(--color-primary-600); }
.pg-head-breadcrumb .sep {
  margin: 0 6px;
  color: var(--border-default);
}
.pg-head-breadcrumb .current {
  color: var(--text-primary);
  font-weight: 600;
}

.pg-head-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.pg-head-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .pg-head { margin-bottom: 16px; padding-bottom: 14px; }
  .pg-head-title { font-size: 20px; }
  .pg-head-subtitle { font-size: 13px; }
}

/* ========================================
   42. DASHBOARD GRID (3-Column Layout)
   ======================================== */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 24px;
}

.dashboard-grid .focus-area {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.dashboard-grid .stats-area {
  grid-column: 2 / 4;
  grid-row: 1;
}

.dashboard-grid .alerts-area {
  grid-column: 2 / 4;
  grid-row: 2;
}

.dashboard-grid .activity-area {
  grid-column: 1 / 4;
  grid-row: 3;
}

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

  .dashboard-grid .focus-area {
    grid-column: 1 / 2;
    grid-row: 1;
  }

  .dashboard-grid .stats-area {
    grid-column: 2 / 3;
    grid-row: 1;
  }

  .dashboard-grid .alerts-area {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .dashboard-grid .activity-area {
    grid-column: 1 / 3;
    grid-row: 3;
  }
}

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

  .dashboard-grid .focus-area,
  .dashboard-grid .stats-area,
  .dashboard-grid .alerts-area,
  .dashboard-grid .activity-area {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ========================================
   43. METRIC CARD (New Stat Card Style)
   ======================================== */
.metric-card {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--border-default);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-smooth);
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
}

.metric-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

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

.metric-label {
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-badge {
  padding: 4px 10px;
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  font-size: 12px;
  font-weight: var(--font-semibold);
  border-radius: 20px;
}

.metric-badge.warning {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.metric-badge.error {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.metric-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.metric-number {
  font-size: 42px;
  font-weight: var(--font-extrabold);
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-unit {
  font-size: 18px;
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
}

.metric-footer {
  margin-top: 8px;
}

.metric-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.metric-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--gradient-primary);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Metrics Grid */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1200px) {
  .metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .metrics-row {
    grid-template-columns: 1fr;
  }

  .metric-number {
    font-size: 36px;
  }
}

/* ========================================
   44. FOCUS CARD (Today's Tasks)
   ======================================== */
.focus-card {
  background: var(--bg-primary);
  border-radius: 16px;
  border: 1px solid var(--border-default);
  overflow: hidden;
  height: 100%;
}

.focus-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.focus-title {
  font-size: 16px;
  font-weight: var(--font-bold);
  color: var(--color-slate-800);
  margin: 0;
}

.focus-body {
  padding: 0;
}

.focus-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

.focus-item:hover {
  background: var(--bg-secondary);
}

.focus-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.focus-icon.primary {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

.focus-icon.warning {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.focus-icon.error {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.focus-icon svg {
  width: 22px;
  height: 22px;
}

.focus-content {
  flex: 1;
  min-width: 0;
}

.focus-item-title {
  font-size: 15px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 4px;
}

.focus-item-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
}

.focus-action {
  padding: 6px 14px;
  background: var(--color-primary-600);
  color: white;
  font-size: 13px;
  font-weight: var(--font-medium);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.focus-action:hover {
  background: var(--color-primary-700);
}

/* ========================================
   45. ALERT PANEL (Attention Required)
   ======================================== */
.alert-panel {
  background: var(--status-warning-bg);
  border-left: 4px solid var(--status-warning);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
}

.alert-panel.info {
  background: var(--status-info-bg);
  border-left-color: var(--status-info);
}

.alert-panel.error {
  background: var(--status-error-bg);
  border-left-color: var(--status-error);
}

.alert-panel.success {
  background: var(--status-success-bg);
  border-left-color: var(--status-success);
}

.alert-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.alert-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-warning);
  animation: pulse 2s infinite;
}

.alert-title {
  font-size: 15px;
  font-weight: var(--font-semibold);
  color: var(--status-warning);
}

.alert-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-default);
}

.alert-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.alert-count {
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--status-warning);
  color: white;
  font-size: 13px;
  font-weight: var(--font-bold);
  border-radius: 8px;
}

.alert-text {
  flex: 1;
  font-size: 14px;
  color: var(--color-slate-700);
}

.alert-action {
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--status-warning);
  text-decoration: none;
}

.alert-action:hover {
  text-decoration: none;
}

/* ========================================
   46. ACTION TILES (Quick Actions)
   ======================================== */
.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  background: var(--bg-primary);
  border: 2px solid var(--border-default);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.action-tile:hover {
  border-color: var(--color-primary-300);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(5, 150, 105, 0.12);
}

.action-tile-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-50);
  border-radius: 14px;
  margin-bottom: 14px;
  color: var(--color-primary-600);
  transition: all var(--transition-smooth);
}

.action-tile:hover .action-tile-icon {
  background: var(--color-primary-100);
  transform: scale(1.05);
}

.action-tile-icon svg {
  width: 26px;
  height: 26px;
}

.action-tile-label {
  font-size: 15px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 4px;
}

.action-tile-hint {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ========================================
   47. BELT INDICATOR (Martial Arts Theme)
   ======================================== */
.level-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: var(--font-semibold);
}

.level-stripe {
  width: 4px;
  height: 16px;
  background: currentColor;
  border-radius: 2px;
}

.level-white {
  background: var(--color-slate-100);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.level-yellow {
  background: #fef9c3;
  color: #a16207;
}

.level-green {
  background: #dcfce7;
  color: #15803d;
}

.level-blue {
  background: #dbeafe;
  color: #1e40af;
}

.level-red {
  background: var(--status-error-border);
  color: #b91c1c;
}

.level-black {
  background: var(--color-slate-800);
  color: var(--color-slate-50);
}

/* ========================================
   48. STREAK BANNER (연속 출석)
   ======================================== */
.streak-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
  border-radius: 12px;
  border: 1px solid var(--color-primary-200);
}

/* ========================================
   49. MOBILE SLIDE MENU
   ======================================== */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-overlay) - 1);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: white;
  z-index: var(--z-overlay);
  transform: translateX(-100%);
  transition: transform var(--transition-smooth);
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}

.mobile-menu-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
}

.mobile-menu-close:hover {
  background: var(--bg-secondary);
}

.mobile-menu-nav {
  padding: 16px;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: 4px;
  transition: all var(--transition-fast);
}

.mobile-nav-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.mobile-nav-item.active {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.mobile-nav-item svg {
  width: 20px;
  height: 20px;
}

.mobile-menu-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-default);
  margin-top: auto;
}

/* ========================================
   50. SECTION HEADER
   ======================================== */
.section-header {
  margin: 32px 0 16px;
}

.section-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

/* ========================================
   51. ACTIVITY LIST
   ======================================== */

.activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary-500);
  margin-top: 5px;
  flex-shrink: 0;
}

.activity-dot.attendance {
  background: var(--status-success);
}

.activity-dot.payment {
  background: var(--status-info);
}

.activity-dot.member {
  background: var(--color-primary-500);
}

.activity-dot.warning {
  background: var(--status-warning);
}

/* ========================================
   52. METRIC CARD EXTENSIONS
   ======================================== */
.metric-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--status-success);
  margin-top: 8px;
}

.metric-trend.up {
  color: var(--status-success);
}

.metric-trend.down {
  color: var(--status-error);
}

.metric-percent {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary-600);
  background: var(--color-primary-50);
  padding: 4px 8px;
  border-radius: 12px;
  margin-top: 8px;
}

.metric-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 8px;
}

.metric-time svg {
  opacity: 0.7;
}

/* ========================================
   53. CARD HEADER LINK
   ======================================== */
.card-header-link {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.card-header-link:hover {
  color: var(--color-primary-700);
}

/* ========================================
   54. SYSTEM NAV COLORS (Emerald - same as admin)
   ======================================== */
/* System admin now uses the same Emerald color scheme as regular admin for consistency */

/* ========================================
   55. MEMBER PORTAL (uses same styles as admin)
   ======================================== */
/* Member portal now uses the same navigation styles as admin for consistency */

/* ========================================
   56. PAGE HEADER IMPROVEMENTS
   ======================================== */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ========================================
   57. RESPONSIVE DASHBOARD GRID
   ======================================== */
@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "focus stats"
      "alerts alerts"
      "activity activity";
  }
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "focus"
      "stats"
      "alerts"
      "activity";
  }

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

  .action-tiles-grid {
    grid-template-columns: 1fr;
  }
}

.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* ========================================
   58. AUTH PAGES (로그인, 회원가입 등)
   ======================================== */

/* Auth Page Container */
[data-page="auth"] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f0fdf4 0%, var(--color-primary-50) 50%, var(--color-slate-100) 100%);
  background-attachment: fixed;
  overflow-y: auto;
}

[data-page="auth"] > main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

[data-page="auth"] .auth-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  min-height: min-content;
}

/* Animated Background - 공통 */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
  animation: orbDrift 25s ease-in-out infinite;
}

.gradient-orb.orb-1 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
  top: -150px;
  left: -100px;
  animation-delay: 0s;
}

.gradient-orb.orb-2 {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  top: 40%;
  right: -100px;
  animation-delay: -8s;
}

.gradient-orb.orb-3 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-500) 100%);
  bottom: -100px;
  left: 25%;
  animation-delay: -16s;
}

@keyframes orbDrift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(20px, -20px) scale(1.03);
  }
  66% {
    transform: translate(-15px, 15px) scale(0.97);
  }
}

/* Dark Theme Orbs */
[data-theme="dark"] .gradient-orb.orb-1 {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.6) 0%, rgba(16, 185, 129, 0.3) 100%);
  opacity: 0.15;
}

[data-theme="dark"] .gradient-orb.orb-2 {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4) 0%, rgba(16, 185, 129, 0.2) 100%);
  opacity: 0.1;
}

[data-theme="dark"] .gradient-orb.orb-3 {
  background: linear-gradient(135deg, var(--accent-primary) 0%, rgba(52, 211, 153, 0.3) 100%);
  opacity: 0.1;
}

/* Auth Brand */
.auth-brand {
  text-align: center;
  margin-bottom: 28px;
  animation: fadeInDown 0.6s ease-out;
}

.auth-brand .logo-icon {
  width: 64px;
  height: 64px;
  background: var(--gradient-primary);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.25);
}

.auth-brand .logo-icon svg {
  width: 32px;
  height: 32px;
  color: white;
}

.auth-brand h1 {
  font-size: 26px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.auth-brand p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 6px 0 0;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Auth Card */
.card-auth {
  width: 100%;
  max-width: 400px;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fadeInUp 0.5s ease-out 0.1s backwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.card-auth .card-body {
  padding: 36px;
}

.card-auth .card-header {
  text-align: center;
  padding: 0 0 24px;
  border: none;
}

.card-auth .card-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 6px;
}

.card-auth .card-header p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Floating Input Group */
.form-floating {
  position: relative;
  margin-bottom: 18px;
}

.form-floating .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  transition: color var(--transition-fast);
  z-index: 2;
}

.form-floating .form-control {
  width: 100%;
  padding: 16px 14px 12px 44px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  outline: none;
}

.form-floating .form-control::placeholder {
  color: transparent;
}

.form-floating .form-control:hover {
  border-color: var(--border-strong);
  background: var(--bg-secondary);
}

.form-floating .form-control:focus {
  border-color: var(--accent-primary);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-subtle);
}

.form-floating .form-control:focus ~ .input-icon {
  color: var(--accent-primary);
}

.form-floating label {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  pointer-events: none;
  transition: all var(--transition-fast);
}

.form-floating .form-control:focus ~ label,
.form-floating .form-control:not(:placeholder-shown) ~ label {
  top: 6px;
  transform: translateY(0);
  font-size: 11px;
  color: var(--accent-primary);
  font-weight: var(--font-medium);
  letter-spacing: 0.3px;
}

.form-floating .form-control.is-invalid {
  border-color: var(--status-error);
  background-color: var(--status-error-bg);
}

.form-floating .form-control.is-invalid:focus {
  border-color: var(--status-error);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

.form-floating .form-control.is-invalid ~ label {
  color: var(--status-error) !important;
}

.form-floating .form-control.is-invalid ~ .input-icon {
  color: var(--status-error);
}

/* Auth Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

.auth-divider span {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Test Account Grid */
.test-account-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.test-account-btn {
  padding: 12px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.test-account-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.test-account-btn svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.test-account-btn:hover svg {
  opacity: 1;
}

/* Auth Footer */
.auth-footer {
  margin-top: 28px;
  text-align: center;
}

.auth-footer a,
.auth-footer .auth-toggle-link {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.auth-footer a:hover,
.auth-footer .auth-toggle-link:hover {
  color: var(--accent-primary);
}

.auth-footer a svg,
.auth-footer .auth-toggle-link svg {
  vertical-align: -2px;
}

/* Auth Toggle Link — semantically a button, visually a link
   (showView() 같은 same-page view toggle 용. 페이지 이동이 아니므로 a 대신 button) */
.auth-toggle-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: inline;
}

/* Auth Error Message */
.auth-error {
  background: var(--status-error-bg);
  border: 1px solid var(--status-error-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-error svg {
  width: 18px;
  height: 18px;
  color: var(--status-error);
  flex-shrink: 0;
}

.auth-error span {
  font-size: var(--text-sm);
  color: var(--status-error);
}

/* Auth Page Responsive */
@media (max-width: 480px) {
  .auth-container {
    padding: 24px 16px;
  }

  .card-auth {
    border-radius: var(--radius-lg);
  }

  .card-auth .card-body {
    padding: 28px 20px;
  }

  .auth-brand .logo-icon {
    width: 56px;
    height: 56px;
  }

  .auth-brand h1 {
    font-size: 22px;
  }

  .test-account-grid {
    grid-template-columns: 1fr;
  }

  .gradient-orb.orb-1 {
    width: 250px;
    height: 250px;
  }

  .gradient-orb.orb-2 {
    width: 200px;
    height: 200px;
  }

  .gradient-orb.orb-3 {
    width: 180px;
    height: 180px;
  }
}

/* ========================================
   Auth Common - Background Blobs
   ======================================== */
.login-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  animation: blobFloat 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.login-blob-1 {
  top: -120px;
  left: -120px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--color-primary-300) 0%, var(--color-primary-600) 50%, var(--color-primary-700) 100%);
}

.login-blob-2 {
  bottom: -120px;
  right: -120px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--color-primary-200) 0%, var(--color-primary-500) 50%, var(--color-primary-600) 100%);
  animation-delay: -4s;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -20px) scale(1.05); }
  66% { transform: translate(-15px, 15px) scale(0.95); }
}

/* ========================================
   Auth Common - Float Field
   ======================================== */
.float-field {
  position: relative;
  margin-bottom: 18px;
}

.float-field input {
  width: 100%;
  padding: 24px 14px 10px;
  border: 1.5px solid var(--border-default);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all .2s;
  background: transparent;
  color: var(--text-primary);
}

.float-field input:focus {
  border-color: var(--color-primary-600);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .1);
}

.float-field label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-tertiary);
  transition: all .2s;
  pointer-events: none;
}

.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label {
  top: 7px;
  transform: translateY(0);
  font-size: 12px;
  color: var(--color-primary-600);
  font-weight: 600;
}

.float-field .required {
  color: var(--status-error, #ef4444);
}

/* ========================================
   Auth Common - Animate In
   ======================================== */
.stagger > *:nth-child(1) { animation-delay: .06s; }
.stagger > *:nth-child(2) { animation-delay: .12s; }
.stagger > *:nth-child(3) { animation-delay: .18s; }
.stagger > *:nth-child(4) { animation-delay: .24s; }

/* ========================================
   59. DARK THEME (출석 체크 페이지용)
   ======================================== */
.dark-theme,
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --border-default: #475569;
  --navy-600: #475569;
  --navy-800: #1e293b;
  --white: #ffffff;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

/* ========================================
   60. ATTENDANCE PAGE (출석 체크)
   ======================================== */
.attendance-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

.attendance-back {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all var(--transition-fast);
}

.attendance-back:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.attendance-clock {
  font-size: 80px;
  font-weight: 700;
  color: var(--color-primary-400);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 0 60px rgba(52, 211, 153, 0.3);
}

.attendance-date {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: 48px;
}

.attendance-input {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.attendance-digit {
  width: 72px;
  height: 88px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  color: var(--text-tertiary);
  transition: all var(--transition-fast);
}

.attendance-digit.filled {
  border-color: var(--color-primary-500);
  color: var(--color-primary-400);
  background: rgba(52, 211, 153, 0.1);
}

.attendance-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: 40px;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 320px;
}

.keypad-btn {
  width: 80px;
  height: 80px;
  background: var(--white-alpha-5);
  border: 1px solid var(--white-alpha-10);
  border-radius: var(--radius-xl);
  font-size: 28px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.keypad-btn:hover {
  background: var(--white-alpha-10);
  transform: scale(1.05);
}

.keypad-btn:active {
  transform: scale(0.95);
}

.keypad-btn.action {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* "초기화"처럼 거의 사용되지 않는 액션은 시각 약화 — 자동 4자리 제출이라 빈도 매우 낮음 */
.keypad-btn.action-soft {
  color: var(--text-tertiary);
  font-weight: 500;
}

.attendance-fullscreen {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  background: var(--white-alpha-5);
  border: 1px solid var(--white-alpha-10);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.attendance-fullscreen:hover {
  background: var(--white-alpha-10);
  color: var(--text-primary);
}

/* ===== Attendance Overlay (Card Floating + Stripe) ===== */
.attendance-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  animation: overlayFadeIn 0.3s ease-out;
  overflow: hidden;
}

.attendance-overlay.success {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

.attendance-overlay.error {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Confetti */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-400);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
  animation: particleFloat 6s ease-in-out infinite;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(80vh) scale(1);
  }
  90% {
    opacity: 0.6;
    transform: translateY(10vh) scale(0.8);
  }
  100% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
}

/* ===== Success Card ===== */
.success-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  width: 90%;
  z-index: 1;
  animation: cardSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.success-card-stripe {
  height: 6px;
  background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600));
}

.success-card-body {
  padding: 36px 32px;
  text-align: center;
}

.success-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.success-check-row svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary-600);
}

.success-check-row span {
  font-size: 13px;
  color: var(--color-primary-600);
  font-weight: 600;
  letter-spacing: 1.5px;
}

.success-name {
  font-size: 42px;
  font-weight: 700;
  color: var(--color-slate-800);
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.success-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}

.success-level-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-slate-500);
}

/* Info Grid */
.success-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 28px;
}

.success-info-item {
  background: var(--color-slate-50);
  border-radius: 12px;
  padding: 14px 12px;
}

.success-info-label {
  font-size: 12px;
  color: var(--color-slate-400);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.success-info-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-600);
  margin-top: 4px;
}

.success-info-value.success-info-date {
  color: var(--color-slate-700);
  font-size: 17px;
}

/* Warning/Danger states */
.success-info-value.warning {
  color: var(--status-warning);
}

.success-info-value.danger {
  color: var(--status-error);
}

/* Confirm Button */
.success-confirm-btn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary-600);
  background: white;
  border: 1.5px solid var(--color-primary-200);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.success-confirm-btn:hover {
  background: var(--color-primary-50);
  transform: translateY(-1px);
}

.success-confirm-btn:active {
  transform: translateY(0);
}

/* ===== Error Card (Emerald Frosted Glass + Shake) ===== */
.error-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  max-width: 400px;
  width: 90%;
  z-index: 1;
  animation: cardSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
             errorShake 0.5s ease-in-out 0.5s;
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.error-card-stripe {
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary-300), var(--color-primary-600), var(--color-primary-700));
}

.error-card-body {
  padding: 36px 32px;
  text-align: center;
}

.error-icon-row {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.error-icon-row svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary-600);
}

.error-msg {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary-800);
  margin-bottom: 8px;
}

.error-sub {
  font-size: 16px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.error-confirm-btn {
  width: 100%;
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-primary-600);
  background: rgba(5, 150, 105, 0.08);
  border: 1.5px solid rgba(5, 150, 105, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 28px;
}

.error-confirm-btn:hover {
  background: rgba(5, 150, 105, 0.14);
  transform: translateY(-1px);
}

.error-confirm-btn:active {
  transform: translateY(0);
}

/* ===== Overlay Progress Bar ===== */
.overlay-progress {
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}

.overlay-progress-bar {
  height: 100%;
  border-radius: 0 0 20px 20px;
  animation: progressShrink linear forwards;
}

.success-progress-bar {
  background: var(--color-primary-600);
  animation-duration: 5s;
}

.error-progress-bar {
  background: #dc2626;
  animation-duration: 7s;
}

@keyframes progressShrink {
  from { width: 100%; }
  to { width: 0%; }
}

.member-select-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.member-select-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-primary-500);
}

.member-select-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.member-select-detail {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ========================================
   61. (TABS dead-code 제거 2026-05-18) — §18 Underline 단일 박제로 통합
   ======================================== */

/* ========================================
   62. PLANS GRID (이용권 관리)
   ======================================== */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* D. MONO CONCIERGE — 이용권 카드: hairline + 상단 emerald accent + shadow 제거 (2026-05-15) */
.plan-card {
  background: var(--bg-primary);
  border: 1px solid #eaecef;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease;
  position: relative;
}

.plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-primary-300) 28%,
    var(--color-primary-500) 50%,
    var(--color-primary-300) 72%,
    transparent 100%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

.plan-card:hover {
  border-color: #d8dde3;
  box-shadow: none;
}

/* D — 이용권 카드 헤더: 흰 배경 + hairline divider */
.plan-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid #f4f5f7;
  background: #ffffff;
}

/* 이용권 카드 — 종류 chip (D.MONO CONCIERGE v3 2026-05).
   글로벌 .badge-period/-count/-day-specific 가 흰 bg + slate-700 + dot 으로 색을 책임지고,
   .plan-type-chip 은 padding·radius·font-size 등 chip 형태만 정의. */
.plan-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.5;
  white-space: nowrap;
}

.plan-card-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.plan-card-body {
  padding: 20px;
}

.plan-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 8px;
}

.plan-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.plan-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.plan-detail-item {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.detail-label {
  color: var(--text-tertiary);
}

.detail-value {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.detail-value.price {
  color: var(--color-primary-600);
  font-weight: var(--font-semibold);
}

.plan-stats {
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}

.plan-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.plan-card-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 2px dashed var(--border-default);
  background: transparent;
  cursor: pointer;
}

.plan-card-add:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
}

.add-plan-icon {
  width: 64px;
  height: 64px;
  background: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.plan-card-add:hover .add-plan-icon {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

.add-plan-text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

/* 이용권 카드 헤더 — 모바일 컴팩트 (project-frontend-guide §디자인 톤).
   데스크톱 baseline(padding 14px 20px / icon 32px)은 유지, 모바일에서만 헤더 비중 축소.
   ~60px → ~42px (-30%). chip 10.5px / icon 28px(svg 14px) / padding 8px 14px. */
@media (max-width: 768px) {
  .plan-card-header {
    padding: 8px 14px;
    gap: 8px;
  }
  .plan-card-actions {
    gap: 2px;
  }
  .plan-card-actions .btn-icon {
    width: 28px;
    height: 28px;
  }
  .plan-card-actions .btn-icon svg {
    width: 14px;
    height: 14px;
  }
  .plan-type-chip {
    font-size: 12.5px;
    padding: 2px 8px 2px 7px;
    gap: 6px;
  }
  .plan-type-chip::before {
    width: 5px;
    height: 5px;
  }
}

/* ========================================
   63. SUMMARY CARDS (요약 카드)
   ======================================== */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
}

.summary-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-card-icon.pending {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.summary-card-icon.success {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.summary-card-icon.info {
  background: var(--status-info-bg);
  color: var(--status-info);
}

.summary-card-content {
  display: flex;
  flex-direction: column;
}

.summary-card-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.2;
}

.summary-card-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ========================================
   64. PAYMENT PENDING LIST (결제 대기 목록)
   ======================================== */
.payment-pending-list {
  display: flex;
  flex-direction: column;
}

.payment-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--border-default);
  transition: background var(--transition-fast);
}

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

.payment-pending-item:hover {
  background: var(--bg-secondary);
}

.payment-pending-main {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.member-info-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 160px;
}

.member-avatar-sm {
  width: 40px;
  height: 40px;
  background: var(--color-primary-100);
  color: var(--color-primary-600);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

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

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

.member-phone {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.payment-info-block {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
}

.payment-plan-name {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.payment-type-badge {
  font-size: var(--text-xs);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: var(--font-medium);
}

.payment-type-badge.period {
  background: var(--status-info-bg);
  color: var(--status-info);
}

.payment-type-badge.count {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.payment-amount-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 120px;
}

.payment-amount {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.payment-date {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.payment-pending-actions {
  display: flex;
  gap: 8px;
}

/* ========================================
   65. CUSTOM FORM SELECT (커스텀 셀렉트)
   ======================================== */
/* 입력 컨트롤 높이 표준 (frontend-guide §23)
   데스크톱 44px / 모바일 48px — .form-input · .custom-select-trigger 와 통일 */
.form-select,
select.form-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 11px 44px 11px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* IE/Edge 기본 화살표 숨김 */
.form-select::-ms-expand {
  display: none;
}

/* Firefox 포커스 링 보정 */
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--text-primary);
}

.form-select:hover {
  border-color: var(--color-primary-300);
  background-color: #f0fdf9;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08);
}

.form-select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  background-color: white;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15), 0 2px 8px rgba(5, 150, 105, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.form-select option {
  padding: 12px 16px;
  line-height: 1.6;
  background: white;
  color: var(--text-primary);
}

.form-select option:checked {
  background: linear-gradient(0deg, var(--color-primary-200) 0%, var(--color-primary-200) 100%);
  background-color: var(--color-primary-200);
  color: var(--color-primary-800);
  font-weight: 600;
}

/* sm/lg 변형 — frontend-guide §23 입력 컨트롤 높이 표준 (변형 표) */
.form-select-sm {
  padding: 8px 40px 8px 12px;
  font-size: 13px;
  min-height: 36px;
  border-radius: var(--radius-md);
}

.form-select-lg {
  padding: 14px 48px 14px 18px;
  font-size: 15px;
  min-height: 50px;
}

/* Invalid 상태 */
.form-select.is-invalid {
  border-color: var(--status-error);
  background-color: var(--status-error-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.form-select.is-invalid:focus {
  border-color: var(--status-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* ========================================
   65-1. CUSTOM SELECT DROPDOWN (커스텀 셀렉트 드롭다운)
   ======================================== */

/* 래퍼 */
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* 트리거 버튼 — 입력 컨트롤 높이 표준 (frontend-guide §23)
   데스크톱 44px / 모바일 48px — .form-input · .form-select 와 통일 */
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  background: white;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.custom-select-trigger:hover {
  border-color: var(--color-primary-300);
  background-color: #f0fdf9;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08);
}

.custom-select-trigger:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15), 0 2px 8px rgba(5, 150, 105, 0.1);
}

.custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.custom-select-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-arrow {
  flex-shrink: 0;
  color: var(--color-primary-500);
  transition: transform 0.2s ease;
}

.custom-select-wrapper.open .custom-select-arrow {
  transform: rotate(180deg);
  color: var(--color-primary-600);
}

/* 드롭다운 */
.custom-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: white;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 20px 25px -5px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all 0.2s ease-out;
  overflow: hidden;
}

.custom-select-wrapper.open .custom-select-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* 검색 */
.custom-select-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
}

.custom-select-search svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.custom-select-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
}

.custom-select-search input::placeholder {
  color: var(--text-tertiary);
}

/* 옵션 목록 */
.custom-select-options {
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
}

/* 옵션 항목 */
.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.custom-select-option:hover,
.custom-select-option.highlighted {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.custom-select-option.selected {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-weight: 600;
}

.custom-select-option.disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}

.custom-select-option.disabled:hover {
  background: transparent;
}

.custom-select-option-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 체크 아이콘 */
.custom-select-check {
  flex-shrink: 0;
  color: var(--color-primary-600);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.15s ease;
}

.custom-select-option.selected .custom-select-check {
  opacity: 1;
  transform: scale(1);
}

/* 그룹 */
.custom-select-group {
  margin-bottom: 4px;
}

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

.custom-select-group-label {
  padding: 8px 12px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-select-group .custom-select-option {
  padding-left: 20px;
}

/* 빈 상태 */
.custom-select-empty {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary);
}

/* 크기 변형 - Small */
.custom-select-wrapper.sm {
  width: auto;
  display: inline-block;
}

.custom-select-wrapper.sm .custom-select-trigger {
  padding: 8px 14px;
  font-size: 13px;
  width: auto;
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  white-space: nowrap;
  border-radius: 8px;
  gap: 6px;
  box-shadow: none;
  border-width: 1px;
}

.custom-select-wrapper.sm .custom-select-trigger:hover {
  border-color: var(--color-primary-500);
  color: var(--color-primary-600);
  background: var(--color-primary-50);
}

.custom-select-wrapper.sm .custom-select-arrow {
  width: 14px;
  height: 14px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.custom-select-wrapper.sm .custom-select-dropdown {
  min-width: 160px;
}

.custom-select-wrapper.sm .custom-select-option {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 6px;
}

/* 테이블 행용 컴팩트 변형 (member-table-row 내부) */
.member-table-row .custom-select-wrapper .custom-select-trigger {
  padding: 7px 10px;
  font-size: 13px;
  min-height: 32px;
  border-radius: 8px;
  box-shadow: none;
}

.member-table-row .custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--color-primary-500);
  box-shadow: none;
}

.member-table-row .custom-select-wrapper .custom-select-arrow {
  width: 14px;
  height: 14px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.member-table-row .custom-select-wrapper .custom-select-dropdown {
  left: -8px;
  right: -8px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px) scale(0.98);
}

.member-table-row .custom-select-wrapper.open .custom-select-dropdown {
  transform: translateY(0) scale(1);
}

.member-table-row .custom-select-options {
  padding: 4px;
  max-height: none;
}

.member-table-row .custom-select-option {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 8px;
}

.member-table-row .custom-select-option:hover,
.member-table-row .custom-select-option.highlighted {
  background: var(--color-slate-50);
  color: var(--text-primary);
}

.member-table-row .custom-select-option.selected {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

/* 회원 등록 테이블 — 컴팩트 행 포커스: solid border 1개만, halo 제거 */
.member-table-row .form-input:focus,
.member-table-row .form-textarea:focus,
.member-table-row .custom-select-trigger:focus {
  box-shadow: none;
}

/* CustomSelect — 비활성(.disabled) 상태: 벨트 미선택 시 그랄 잠금. */
.custom-select-wrapper.disabled .custom-select-trigger {
  background: var(--color-slate-50);
  color: var(--text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
}
.custom-select-wrapper.disabled .custom-select-arrow {
  opacity: 0.4;
}
.custom-select-wrapper.disabled .custom-select-trigger:hover {
  border-color: var(--border-default);
  background: var(--color-slate-50);
  box-shadow: none;
}

/* 색상 dot (CustomSelect) */
.custom-select-color-dot {
  display: inline-block;
  width: 28px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.custom-select-option .custom-select-color-dot {
  margin-right: 6px;
}

.custom-select-trigger .custom-select-color-dot {
  margin-right: 6px;
}

/* 크기 변형 - Large */
.custom-select-wrapper.lg .custom-select-trigger {
  padding: 14px 18px;
  font-size: 15px;
}

.custom-select-wrapper.lg .custom-select-option {
  padding: 12px 14px;
  font-size: 15px;
}

/* 유효성 오류 상태 */
.custom-select-wrapper.is-invalid .custom-select-trigger {
  border-color: var(--status-error);
  background-color: var(--status-error-bg);
}

.custom-select-wrapper.is-invalid .custom-select-trigger:focus,
.custom-select-wrapper.is-invalid.open .custom-select-trigger {
  border-color: var(--status-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* 스크롤바 스타일 */
.custom-select-options::-webkit-scrollbar {
  width: 6px;
}

.custom-select-options::-webkit-scrollbar-track {
  background: transparent;
}

.custom-select-options::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 3px;
}

.custom-select-options::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* 옵션 마크 — 색상+이니셜 (data-mark-text 옵션에 자동 렌더, frontend-guide §13) */
.custom-select-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.04em;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.custom-select-trigger .custom-select-mark {
  margin-right: 6px;
  width: 24px;
  height: 24px;
  font-size: 11px;
  border-radius: 6px;
}

.custom-select-option .custom-select-mark {
  margin-right: 8px;
}

/* 옵션 로고 — 외부 SVG 자산 (data-mark-logo 옵션에 자동 렌더, frontend-guide §13)
   로고가 있으면 컬러 이니셜 마크보다 우선. 외부 식별자(은행) 컨텍스트 전용 */
.custom-select-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
}

.custom-select-trigger .custom-select-logo {
  width: 24px;
  height: 24px;
  margin-right: 6px;
}

.custom-select-option .custom-select-logo {
  margin-right: 8px;
}

/* === 데스크톱·모바일 공통 그리드 모드 (data-grid-cols="3" 옵션, B 시안 — Bordered Card)
   기존에는 모바일만 grid 였으나, 외부 식별자(은행) 컨텍스트는 데스크톱에서도 카드 그리드가 인지율 ↑
   셀렉터에서 `.custom-select-wrapper.open` prefix 의도적 제거 — 모바일 sheet 모드에서
   `common.js` 가 dropdown 을 body 로 portal 시키는데(`cs-portal-sheet`), wrapper 종속 셀렉터는
   portal 후 매치 실패하여 모바일에서만 grid 가 안 먹고 1열 fallback 됨. dropdown 자체는 기본
   `visibility:hidden` 이므로 prefix 없이도 닫힘 상태에서 노출되지 않음. === */
.custom-select-options.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
}

.custom-select-options.cols-3 .custom-select-group {
  display: contents;
}

.custom-select-options.cols-3 .custom-select-group-label {
  grid-column: 1 / -1;
  padding: 6px 4px 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  text-transform: none;
}

.custom-select-options.cols-3 .custom-select-option {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 6px 12px;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}

.custom-select-options.cols-3 .custom-select-option:hover,
.custom-select-options.cols-3 .custom-select-option.highlighted {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
}

.custom-select-options.cols-3 .custom-select-option.selected {
  border-color: var(--color-primary-600);
  background: var(--color-primary-50);
}

.custom-select-options.cols-3 .custom-select-logo {
  width: 40px;
  height: 40px;
  margin: 0;
}

.custom-select-options.cols-3 .custom-select-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 13px;
  margin: 0;
}

.custom-select-options.cols-3 .custom-select-option-text {
  font-size: 12.5px;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  font-weight: 500;
}

.custom-select-options.cols-3 .custom-select-option.selected .custom-select-option-text {
  color: var(--color-primary-700);
  font-weight: 700;
}

/* 그리드 모드는 체크 아이콘 숨김 (선택은 테두리·배경으로 표현) */
.custom-select-options.cols-3 .custom-select-check {
  display: none;
}

/* 그리드 모드에서 빈 값 placeholder 옵션 숨김 (셀 낭비 방지) */
.custom-select-options.cols-3 .custom-select-option[data-value=""] {
  display: none;
}

/* === 은행 picker (data-bank-list) — D.MONO Hairline 리스트 ===
   결제·정산 폼의 은행 선택 컨텍스트 전용. 47개 옵션을 1컬럼 행 리스트로 렌더링.
   §iOS Row v2 (2026-05-18) 와 동일 active 언어 — 선택 행 = slate-900 2px 좌측 rail + text weight 700.
   wrapper prefix 미사용: 모바일 portal(cs-portal-sheet) 후에도 매치되도록. */
@media (min-width: 769px) {
  .custom-select-dropdown:has(.custom-select-options.bank-list) {
    width: 320px;
    min-width: 320px;
    left: 0;
    right: auto;
    max-height: 480px;
  }
}

.custom-select-options.bank-list {
  display: block;
  padding: 4px;
  max-height: 420px;
}

.custom-select-options.bank-list .custom-select-group {
  display: block;
  margin: 0;
}

.custom-select-options.bank-list .custom-select-group + .custom-select-group {
  border-top: 1px solid var(--border-light);
  margin-top: 6px;
  padding-top: 4px;
}

.custom-select-options.bank-list .custom-select-group-label {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  padding: 8px 12px 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--color-slate-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.custom-select-options.bank-list .custom-select-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-slate-900);
  transition: background 0.12s ease;
}

.custom-select-options.bank-list .custom-select-option::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: transparent;
  border-radius: 2px;
  transition: background 0.12s ease;
}

.custom-select-options.bank-list .custom-select-option:hover,
.custom-select-options.bank-list .custom-select-option.highlighted {
  background: var(--bg-secondary);
  color: var(--color-slate-900);
}

.custom-select-options.bank-list .custom-select-option.selected {
  background: transparent;
  color: var(--color-slate-900);
  font-weight: 700;
}

.custom-select-options.bank-list .custom-select-option.selected:hover,
.custom-select-options.bank-list .custom-select-option.selected.highlighted {
  background: var(--bg-secondary);
}

.custom-select-options.bank-list .custom-select-option.selected::before {
  background: var(--color-slate-900);
}

.custom-select-options.bank-list .custom-select-logo {
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border-light);
  padding: 2px;
  object-fit: contain;
}

.custom-select-options.bank-list .custom-select-mark {
  width: 28px;
  height: 28px;
  font-size: 12px;
  border-radius: 6px;
  margin: 0;
}

.custom-select-options.bank-list .custom-select-option-text {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-options.bank-list .custom-select-check {
  flex-shrink: 0;
  color: var(--color-slate-900);
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.15s ease;
}

.custom-select-options.bank-list .custom-select-option.selected .custom-select-check {
  opacity: 1;
  transform: scale(1);
}

/* placeholder option 숨김 (리스트 최상단의 "은행 선택" 빈 옵션) */
.custom-select-options.bank-list .custom-select-option[data-value=""] {
  display: none;
}

/* 모바일 — Bottom Sheet 모드 (frontend-guide §13)
   .custom-select-wrapper.open 에서 dropdown 을 viewport 하단 시트로 전환 */
@media (max-width: 768px) {
  .custom-select-trigger {
    font-size: 16px;
    gap: 8px;
  }

  /* Backdrop */
  .custom-select-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }

  .custom-select-backdrop.show {
    opacity: 1;
  }

  /* Sheet 변환
     `.cs-portal-sheet` 는 dropdown 이 body 로 portal 됐을 때 (ancestor transform
     containing-block 회피용 — common.js CustomSelect.open 참조) sheet 스타일을 유지하기 위함. */
  .custom-select-wrapper.open .custom-select-dropdown,
  .custom-select-dropdown.cs-portal-sheet {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    /* 모바일 시트 높이 표준: 92dvh (project-frontend-guide §모바일 시트 높이) */
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    border: none;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    transform: translateY(0);
    display: flex;
    flex-direction: column;
    animation: customSelectSheetUp 0.25s ease-out;
    opacity: 1;
    visibility: visible;
  }

  @keyframes customSelectSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Sheet 핸들 */
  .custom-select-sheet-handle {
    width: 38px;
    height: 4px;
    background: var(--border-default);
    border-radius: 999px;
    margin: 11px auto 6px;
    flex-shrink: 0;
  }

  /* Sheet 헤더 (제목 + 닫기) */
  .custom-select-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px 14px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
  }

  .custom-select-sheet-header h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
  }

  .custom-select-sheet-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
  }

  /* 검색 — sheet 모드: 회색 둥근 컨테이너 안에 svg + input flex */
  .custom-select-wrapper.open .custom-select-search,
  .custom-select-dropdown.cs-portal-sheet .custom-select-search {
    padding: 12px 20px;
    background: white;
    border-bottom: 1px solid var(--border-light);
  }

  .custom-select-wrapper.open .custom-select-search > svg,
  .custom-select-dropdown.cs-portal-sheet .custom-select-search > svg {
    display: none; /* 둥근 컨테이너 안 svg 로 대체 — 아래 ::before */
  }

  .custom-select-wrapper.open .custom-select-search input,
  .custom-select-dropdown.cs-portal-sheet .custom-select-search input {
    width: 100%;
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 11px 14px 11px 40px;
    font-size: 16px; /* iOS 줌 방지 */
    border: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: 14px center;
  }

  .custom-select-wrapper.open .custom-select-search input::placeholder {
    color: var(--text-tertiary);
  }

  /* 옵션 목록 — flex 안에서 스크롤 가능 영역 차지 */
  .custom-select-wrapper.open .custom-select-options {
    max-height: none;
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 24px;
  }

  .custom-select-wrapper.open .custom-select-option {
    padding: 16px 12px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* 그리드 모드(cols-3) 는 글로벌 정의에서 처리. 모바일 시트 전용 폭·갭 보정 */
  .custom-select-options.cols-3 {
    padding: 12px 14px 24px;
  }

  /* 은행 picker (bank-list) 모바일 시트 패딩 보정.
     wrapper prefix 미사용 — portal 후에도 매치되도록. */
  .custom-select-options.bank-list {
    padding: 8px 12px 24px;
    max-height: none;
  }

  .custom-select-options.bank-list .custom-select-option {
    padding: 12px 12px 12px 14px;
    font-size: 15px;
  }
}

/* ========================================
   66. RADIO CARDS (라디오 카드)
   ======================================== */
.radio-group {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 4px;
  gap: 0;
}

.radio-card {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.radio-card input {
  position: absolute;
  opacity: 0;
}

.radio-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border-radius: 8px;
  text-align: center;
  transition: all var(--transition-fast);
}

.radio-card input:checked + .radio-card-content {
  background: var(--bg-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.radio-card-content:hover {
  background: rgba(255, 255, 255, 0.6);
}

.radio-card input:checked + .radio-card-content:hover {
  background: var(--bg-primary);
}

.radio-card-icon {
  display: none;
}

.radio-card-label {
  font-weight: var(--font-semibold);
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.radio-card input:checked + .radio-card-content .radio-card-label {
  color: var(--color-primary-600);
}

.radio-card-desc {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* radio-card 컴팩트 변형 — modal-dmono 안 또는 .radio-group.compact 사용 시.
   기존 패딩 12px 8px → 8px 6px, 폰트 14/11 → 13/10.5. */
.modal-dmono .radio-card-content,
.radio-group.compact .radio-card-content {
  padding: 8px 6px;
  border-radius: 7px;
}
.modal-dmono .radio-card-label,
.radio-group.compact .radio-card-label {
  font-size: 13px;
}
.modal-dmono .radio-card-desc,
.radio-group.compact .radio-card-desc {
  font-size: 11.5px;
}
.modal-dmono .radio-group,
.radio-group.compact {
  padding: 4px;
  gap: 6px;
}

/* ========================================
   67. MODAL OVERLAY (모달) - Premium Design
   ======================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.show {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* D.MONO Modal Container (inside overlay) — §15 와 동일 톤 */
.modal-overlay .modal {
  background: #fff;
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.25);
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.modal-overlay.show .modal {
  transform: scale(1) translateY(0);
}

.modal-overlay .modal.modal-sm { max-width: 380px; }
.modal-overlay .modal.modal-md { max-width: 480px; }
.modal-overlay .modal.modal-lg { max-width: 640px; }
.modal-overlay .modal.modal-xl { max-width: 800px; }

.modal-overlay .modal-header {
  padding: 0 22px;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

.modal-overlay .modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-700));
  opacity: 0.7;
}

.modal-overlay .modal-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-slate-900);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.modal-overlay .modal-title::before {
  content: '';
  width: 4px;
  height: 14px;
  background: var(--color-primary-600);
  border-radius: 2px;
  flex-shrink: 0;
}

.modal-overlay .modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.modal-overlay .modal-close:hover {
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

.modal-overlay .modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.modal-overlay .modal-footer {
  padding: 0 22px;
  height: 56px;
  background: #fff;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.modal-overlay .modal-footer .btn {
  min-width: 88px;
}

/* ===========================================================================
   .modal-dmono — DEPRECATED alias of base .modal
   ---------------------------------------------------------------------------
   기본 .modal 톤이 D.MONO 로 흡수되어 별도 override 불필요.
   클래스 자체는 점진 제거 (사용처에서 떼어내도 시각 변화 없음).
   신규 사용 ❌.
   ========================================================================== */

/* Dark Modal (Attendance) */
.modal-dark .modal {
  background: var(--color-slate-800);
  color: var(--color-slate-50);
}

.modal-dark .modal-header {
  border-color: var(--color-slate-700);
}

.modal-dark .modal-close {
  background: var(--color-slate-700);
  color: var(--color-slate-50);
}

.modal-dark .modal-close:hover {
  background: var(--color-slate-600);
}

.modal-dark .text-muted {
  color: var(--color-slate-400);
}

/* Compact Modal Variant */
.modal-compact .modal-header {
  padding: 14px 20px;
  background: white;
  border-bottom: 2px dashed var(--color-primary-100);
}

.modal-compact .modal-header::before {
  display: none;
}

.modal-compact .modal-title {
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-compact .modal-type-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  padding: 3px 10px;
  border-radius: 6px;
  line-height: 1.4;
}

.modal-compact .modal-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.modal-compact .modal-body {
  padding: 18px 20px;
}

.modal-compact .modal-footer {
  padding: 14px 20px;
}

.modal-compact .modal-footer .btn {
  min-width: 80px;
  padding: 9px 16px;
  font-size: 13px;
}

/* Mobile: constrain wide modals to viewport and respect iOS safe-area */
@media (max-width: 768px) {
  .modal-md,
  .modal-overlay .modal.modal-md,
  .modal-lg,
  .modal-overlay .modal.modal-lg,
  .modal-xl,
  .modal-overlay .modal.modal-xl {
    max-width: calc(100vw - 32px);
  }

  .modal-footer,
  .modal-overlay .modal-footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* ========================================
   68. EMPTY STATE — 통합되어 R20 으로 이전 (Soft Hero)
   ======================================== */

/* ========================================
   69. DATA TABLE
   ======================================== */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-default);
}

.data-table th {
  background: var(--bg-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.data-table tbody tr:hover {
  background: var(--bg-secondary);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* ========================================
   71. BUTTON ICON
   ======================================== */
.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

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

/* ========================================
   72. BUTTON SIZES
   ======================================== */
.btn-sm {
  padding: 8px 12px;
  font-size: var(--text-sm);
}

.btn-sm svg {
  width: 14px;
  height: 14px;
}


/* ========================================
   72-1. REJECT REASON OPTIONS
   ======================================== */
.reject-reason-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reject-reason-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.reject-reason-option:hover {
  border-color: var(--color-primary-300);
  background: var(--bg-hover);
}

.reject-reason-option:has(input:checked) {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
}

.reject-reason-option input {
  accent-color: var(--color-primary-500);
  width: 18px;
  height: 18px;
}

.reject-reason-option span {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* ========================================
   72-2. LEVEL SETTINGS
   ======================================== */
.level-settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.level-setting-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  cursor: grab;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.level-setting-item:hover {
  background: var(--bg-tertiary);
}

.level-setting-item:active {
  cursor: grabbing;
}

.level-setting-item.sortable-chosen {
  background: var(--color-primary-50);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.level-setting-item.sortable-ghost {
  opacity: 0.4;
}

.level-color-preview {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.level-setting-item .form-input {
  padding: 10px 14px;
  font-size: var(--text-sm);
  min-height: auto;
}

.level-setting-item .form-input[type="text"] {
  width: 140px;
  flex: none;
}

.level-setting-item .form-input[type="number"] {
  width: 90px;
  flex: none;
}

/* ========================================
   72-3. SUBSCRIPTION INFO
   ======================================== */
.subscription-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subscription-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subscription-plan-name {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.subscription-price {
  display: flex;
  flex-direction: column;
}

.subscription-price .price-amount {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.subscription-price .price-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.subscription-tiers {
  border-top: 1px solid var(--border-default);
  padding-top: 16px;
}

.tier-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.tier-range {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

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

.subscription-status {
  border-top: 1px solid var(--border-default);
  padding-top: 16px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}

.status-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

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

/* ========================================
   73. ENHANCED BACKGROUND (배경 개선)
   ======================================== */
/* body 배경은 §1 본 규칙(var(--bg-secondary) slate-50) 유지.
   그라데이션은 .main-content 가 단독으로 책임진다. 짧은 페이지에서 main-content 가 collapse 되면
   viewport 잔여 영역은 body→canvas propagate 된 slate-50 으로 깔끔하게 마감 (2026-05-18). */

.main-wrapper {
  background: transparent;
}

/* Subtle pattern overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.02) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: -1;
}

/* ========================================
   74. PAGE TITLE GROUP
   ======================================== */
.page-header-content {
  flex: 1;
}

.page-title-group .page-title {
  margin: 0 0 4px;
}

.page-title-group .page-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--text-secondary);
  transition: all 0.2s;
  text-decoration: none;
}

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

.page-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ========================================
   75. ANIMATED BACKGROUND (Dark theme용)
   ======================================== */
.dark-theme .animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.dark-theme .gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  animation: orbFloat 20s ease-in-out infinite;
}

.dark-theme .orb-1 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  top: -100px;
  left: -100px;
}

.dark-theme .orb-2 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-800) 100%);
  top: 50%;
  right: -50px;
  animation-delay: -7s;
}

.dark-theme .orb-3 {
  width: 250px;
  height: 250px;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
  bottom: -50px;
  left: 30%;
  animation-delay: -14s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, 30px); }
}

/* ========================================
   76. SLUG PREVIEW COMPONENT
   ======================================== */
.slug-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--color-primary-50) 0%, #f0fdfa 100%);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-lg);
  position: relative;
}

.slug-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-500) 100%);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.slug-preview-icon svg {
  color: white;
}

.slug-preview-content {
  flex: 1;
  min-width: 0;
}

.slug-preview-label {
  font-size: 12px;
  font-weight: var(--font-medium);
  color: var(--color-primary-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.slug-preview-url {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: var(--font-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slug-preview-url span {
  color: var(--color-primary-600);
  font-weight: var(--font-semibold);
}

.slug-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.slug-copy-btn:hover {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.slug-copy-btn svg {
  color: var(--color-primary-600);
  transition: color var(--transition-fast);
}

.slug-copy-btn:hover svg {
  color: white;
}

/* ========================================
   77. CUSTOM ALERT/CONFIRM MODAL (구 섹션 78)
   - .form-select option 스타일은 섹션 65로 통합됨
   ======================================== */
.alert-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-toast);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.alert-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.alert-modal {
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.16);
  width: 100%;
  max-width: 320px;
  margin: 20px;
  overflow: hidden;
  transform: scale(0.95) translateY(-20px);
  transition: transform 0.2s ease;
}

.alert-modal-backdrop.active .alert-modal {
  transform: scale(1) translateY(0);
}

.alert-modal-body {
  padding: 28px 24px 0;
  text-align: center;
}

/* Emerald Hero — 시그니처 풀톤 (info·success·warning 동일 emerald, danger 만 red) */
.alert-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(5, 150, 105, 0.4);
}

.alert-modal-icon.danger {
  background: linear-gradient(135deg, #f87171, #dc2626);
  box-shadow: 0 8px 20px -6px rgba(220, 38, 38, 0.4);
}

.alert-modal-icon svg {
  width: 26px;
  height: 26px;
}

.alert-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.alert-modal-message {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* 라벨/값 메타 카드 — Emerald tint (danger 케이스는 .danger 변형) */
.alert-modal-meta {
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 16px;
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
}

.alert-modal-meta.danger {
  background: var(--status-error-bg);
  border-color: var(--status-error-border);
}

.alert-modal-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.alert-modal-meta-row + .alert-modal-meta-row {
  margin-top: 4px;
}

.alert-modal-meta-label {
  color: var(--color-primary-800);
  font-weight: 500;
  flex-shrink: 0;
}

.alert-modal-meta-value {
  color: var(--color-primary-900);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.alert-modal-meta-value.accent {
  color: var(--color-primary-700);
  font-weight: 700;
}

.alert-modal-meta.danger .alert-modal-meta-label,
.alert-modal-meta.danger .alert-modal-meta-value,
.alert-modal-meta.danger .alert-modal-meta-value.accent {
  color: var(--status-error-text);
}

/* 값 옆 부가 회색 글씨 (예: "4명 [제외 1명]") */
.alert-modal-meta-value .alert-modal-meta-sub {
  font-weight: 500;
  color: var(--color-primary-700);
  font-size: 12px;
  margin-left: 6px;
}

.alert-modal-meta.danger .alert-modal-meta-value .alert-modal-meta-sub {
  color: var(--status-error);
}

/* 보조 경고 텍스트 (메타 아래 — "되돌릴 수 없습니다" 류) */
.alert-modal-warn {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin: 12px 0 0;
  line-height: 1.5;
}

.alert-modal-input {
  margin-top: 16px;
}

.alert-modal-input input,
.alert-modal-input textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border-default);
  border-radius: 10px;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.alert-modal-input input:focus,
.alert-modal-input textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-subtle);
}

.alert-modal-actions {
  display: flex;
  gap: 10px;
  padding: 20px 24px 24px;
}

.alert-modal-actions .btn {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Cancel — 흰 배경 + 보더 (slate 그레이 폐기) */
.alert-modal-actions .btn-cancel {
  background: #fff;
  color: var(--text-secondary);
  border: 1.5px solid var(--border-default) !important;
}

.alert-modal-actions .btn-cancel:hover {
  border-color: var(--color-primary-300) !important;
  color: var(--color-primary-700);
  background: var(--color-primary-50);
}

/* Confirm (info·success·warning) — solid emerald CTA */
.alert-modal-actions .btn-confirm,
.alert-modal-actions .btn-confirm.info,
.alert-modal-actions .btn-confirm.success,
.alert-modal-actions .btn-confirm.warning {
  background: var(--color-primary-600);
  color: #fff;
  border: 1.5px solid var(--color-primary-600) !important;
  box-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.35);
}

.alert-modal-actions .btn-confirm:hover,
.alert-modal-actions .btn-confirm.info:hover,
.alert-modal-actions .btn-confirm.success:hover,
.alert-modal-actions .btn-confirm.warning:hover {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700) !important;
  box-shadow: 0 6px 16px -4px rgba(4, 120, 87, 0.45);
}

/* Destructive — outline 만 (solid red 금지) */
.alert-modal-actions .btn-confirm.danger {
  background: #fff;
  color: var(--status-error-text);
  border: 1.5px solid var(--status-error-border) !important;
  box-shadow: none;
}

.alert-modal-actions .btn-confirm.danger:hover {
  background: var(--status-error-bg);
  border-color: var(--status-error) !important;
  color: var(--status-error);
}

/* ========================================
   79. ACTION TILES GRID (Dashboard)
   ======================================== */
.action-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.action-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.action-tile:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1);
  transform: translateY(-2px);
}

.action-tile-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
}

.action-tile-icon svg {
  width: 24px;
  height: 24px;
}

.action-tile-icon.primary {
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
}

.action-tile-icon.success {
  background: #dcfce7;
  color: #16a34a;
}

.action-tile-icon.info {
  background: var(--status-info-border);
  color: var(--status-info);
}

.action-tile-icon.accent {
  background: var(--status-warning-border);
  color: var(--status-warning);
}

.action-tile-content {
  flex: 1;
  min-width: 0;
}

.action-tile-content h4 {
  font-size: 15px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 4px;
}

.action-tile-content p {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
}

.action-tile-arrow {
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.action-tile-arrow svg {
  width: 20px;
  height: 20px;
}

.action-tile:hover .action-tile-arrow {
  color: var(--accent-primary);
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .action-tiles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .action-tiles-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   80. SECTION HEADER
   ======================================== */
.section-header {
  margin: 32px 0 16px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

/* ========================================
   81. FOCUS CARD SUPPLEMENTS
   ======================================== */
.focus-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.focus-card-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.focus-card-list li:last-child {
  border-bottom: none;
}

.focus-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.focus-status.pending {
  background: var(--accent-primary);
}

.focus-status.warning {
  background: var(--status-warning);
}

.focus-status.info {
  background: var(--status-info);
}

.focus-status.danger {
  background: var(--status-error);
}

.focus-text {
  flex: 1;
  font-size: 14px;
  color: var(--text-secondary);
}

.focus-text strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.focus-action {
  font-size: 13px;
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.focus-action:hover {
  text-decoration: none;
}

.focus-date {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
}

.focus-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 14px;
  background: var(--accent-primary);
  color: white;
  border-radius: 10px;
  text-decoration: none;
  font-weight: var(--font-semibold);
  font-size: 14px;
  transition: background var(--transition-fast);
}

.focus-card-cta:hover {
  background: var(--accent-primary-hover);
}

.focus-card-cta svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   82. METRIC CARD SUPPLEMENTS
   ======================================== */
.metric-percent {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.metric-percent span {
  font-weight: var(--font-semibold);
  color: var(--accent-primary);
}

.metric-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.metric-time svg {
  width: 12px;
  height: 12px;
}

/* ========================================
   83. ACTIVITY EMPTY STATE
   ======================================== */
.activity-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary);
}

.activity-empty svg {
  margin-bottom: 12px;
  opacity: 0.5;
}

.activity-empty p {
  margin: 0;
  font-size: 14px;
}

/* ========================================
   84. ACTIVITY LIST
   ======================================== */

.activity-item-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: 10px;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.activity-item-icon svg {
  width: 18px;
  height: 18px;
}

.activity-item-content {
  flex: 1;
  min-width: 0;
}

.activity-item-text {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.activity-item-text strong {
  font-weight: var(--font-semibold);
}

.activity-item-time {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ========================================
   85. NAV USER DROPDOWN (Top Nav)
   ======================================== */
.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background var(--transition-fast);
}

.nav-user:hover {
  background: var(--bg-secondary);
}

.nav-user-name {
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.nav-user-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary);
  color: white;
  border-radius: 8px;
}

.nav-user-avatar svg {
  width: 18px;
  height: 18px;
}

.nav-user-avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-user-avatar-lg svg {
  width: 22px;
  height: 22px;
}

/* System Admin 아바타 - 에메랄드 테마 */
.nav-user-avatar.system,
.nav-user-avatar-lg.system {
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
}

/* System Admin 간소화된 네비게이션 */
.system-admin-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-radius: 20px;
  margin-right: 8px;
}

.system-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.system-logout-btn:hover {
  background: var(--status-error-border);
  color: var(--status-error);
}

/* ========================================
   86. NAV DROPDOWN MENU
   ======================================== */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 200px;
  background: white;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-fast);
  z-index: var(--z-dropdown);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: all var(--transition-fast);
}

.nav-dropdown-item:first-child {
  border-radius: 12px 12px 0 0;
}

.nav-dropdown-item:last-child {
  border-radius: 0 0 12px 12px;
}

.nav-dropdown-item:hover {
  background: var(--bg-secondary);
  color: var(--accent-primary);
}

.nav-dropdown-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* User Dropdown Menu */
.nav-user-dropdown {
  position: relative;
}

.nav-user-dropdown .nav-user {
  cursor: pointer;
}

.nav-user-dropdown.active .nav-user-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-user-menu {
  right: 0;
  left: auto;
  min-width: 240px;
  padding: 0;
  overflow: hidden;
}

.nav-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}

.nav-user-name-lg {
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.nav-user-role {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border-default);
  margin: 4px 0;
}

.nav-user-menu .nav-dropdown-item {
  border-radius: 0;
  margin: 0;
  padding: 12px 16px;
}

.nav-user-menu .nav-dropdown-item:first-child {
  border-radius: 0;
}

.nav-user-menu .nav-dropdown-item:last-child {
  border-radius: 0;
}

.nav-logout-form {
  margin: 0;
}

.nav-logout-btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--status-error);
}

.nav-logout-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--status-error);
}

/* ========================================
   87. STREAK BANNER SUPPLEMENTS
   ======================================== */
.streak-icon {
  width: 48px;
  height: 48px;
  background: var(--status-warning-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--status-warning);
  flex-shrink: 0;
}

.streak-icon svg {
  width: 24px;
  height: 24px;
}

.streak-content h3 {
  font-size: 16px;
  font-weight: var(--font-bold);
  color: var(--status-warning-text);
  margin: 0 0 4px;
}

.streak-content h3 span {
  color: var(--status-warning);
}

.streak-content p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.streak-badge {
  background: var(--status-warning);
  color: white;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: var(--font-bold);
  white-space: nowrap;
}

/* ========================================
   88. FOCUS CARD HEADER
   ======================================== */
.focus-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.focus-card-header h3 {
  font-size: 16px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
}

.focus-card-body {
  padding: 16px 24px;
}

.focus-status.done {
  background: var(--color-primary-500);
}

/* ========================================
   89. METRIC ICON VARIANTS
   ======================================== */
.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
}

.metric-icon svg {
  width: 24px;
  height: 24px;
}

.metric-icon.success {
  background: #dcfce7;
  color: #16a34a;
}

.metric-icon.accent {
  background: var(--status-warning-border);
  color: var(--status-warning);
}

.metric-icon.info {
  background: var(--status-info-border);
  color: var(--status-info);
}

.metric-icon.error {
  background: var(--status-error-border);
  color: var(--status-error);
}

/* Metric content for row layout */
.metric-content {
  flex: 1;
  min-width: 0;
}

.metric-content .metric-label {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.metric-content .metric-value {
  font-size: 28px;
  font-weight: var(--font-extrabold);
  color: var(--text-primary);
  line-height: 1;
}

/* ========================================
   90. ALERT PANEL STRUCTURE
   ======================================== */
.alert-panel-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-panel-icon svg {
  width: 20px;
  height: 20px;
}

.alert-panel.warning .alert-panel-icon {
  background: var(--status-warning-border);
  color: var(--status-warning);
}

.alert-panel.info .alert-panel-icon {
  background: var(--status-info-border);
  color: var(--status-info);
}

.alert-panel.danger .alert-panel-icon {
  background: rgba(220, 38, 38, 0.15);
  color: var(--status-error);
}

.alert-panel.success .alert-panel-icon {
  background: rgba(5, 150, 105, 0.15);
  color: var(--color-primary-600);
}

.alert-panel-content {
  flex: 1;
  min-width: 0;
}

.alert-panel-content strong {
  display: block;
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.alert-panel-content p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.alert-panel-action {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.alert-panel-action:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.alert-panel.danger {
  background: var(--status-error-bg);
  border-left-color: var(--status-error);
}

/* ========================================
   91. FILTER TABS (System Pages)
   ======================================== */
.filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.filter-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-tab:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.filter-tab.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.filter-count {
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 12px;
}

.filter-tab.active .filter-count {
  background: rgba(255, 255, 255, 0.2);
}

/* ========================================
   92. SEARCH BAR
   ======================================== */
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar .search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.search-bar .search-icon svg {
  width: 20px;
  height: 20px;
}

.search-bar .search-input {
  width: 100%;
  padding-left: 44px;
}

/* ========================================
   93. TABLE ENHANCEMENTS
   ======================================== */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-hover tbody tr:hover {
  background: var(--accent-primary-subtle);
}

.table-row-animated {
  animation: fadeIn 0.3s ease;
}

/* ========================================
   94. BUTTON GROUP
   ======================================== */
.btn-group {
  display: flex;
  gap: 4px;
}

.btn-group .btn {
  border-radius: 6px;
}

/* ========================================
   96. MOBILE SLIDE MENU
   ======================================== */
.mobile-slide-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: var(--bg-primary);
  z-index: var(--z-overlay);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}

.mobile-slide-menu.active {
  transform: translateX(0);
}

.mobile-menu-nav {
  flex: 1;
  padding: 16px;
  list-style: none;
  margin: 0;
  overflow-y: auto;
}

.mobile-menu-nav li {
  margin-bottom: 4px;
}

.mobile-menu-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.mobile-menu-nav a:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.mobile-menu-nav a.active {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.mobile-menu-nav a svg {
  flex-shrink: 0;
}

/* ========================================
   97. NAV BRAND VARIANTS
   ======================================== */
.nav-brand-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient-primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.nav-brand-icon svg {
  width: 22px;
  height: 22px;
}

.nav-brand-icon.system {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
}

.nav-brand-text {
  font-size: 20px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

/* ========================================
   98. STATS AREA / ALERTS AREA LAYOUT
   ======================================== */
.stats-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-area .metric-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}

.stats-area .metric-card::before {
  display: none;
}

.alerts-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alerts-area .alert-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
}

/* Section 99 ERROR PAGES moved to R13 */

/* ========================================
   UPLOAD DROPZONE
   ======================================== */
.upload-dropzone {
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.upload-dropzone:hover {
  border-color: var(--accent-primary);
  background: var(--accent-primary-subtle);
}

.dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.dropzone-icon {
  color: var(--text-tertiary);
}

.dropzone-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.dropzone-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.upload-result {
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.upload-summary {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.upload-errors {
  font-size: var(--text-xs);
  color: var(--status-error);
}

.upload-errors ul {
  margin: 0;
  padding-left: var(--space-4);
}

.upload-errors li {
  margin-bottom: var(--space-1);
}

/* ========================================
   COLOR PICKER & BELT ORDER
   ======================================== */
.color-picker {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 2px;
  background: var(--bg-primary);
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: var(--radius-sm);
}

.level-order-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-icon-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.btn-icon-sm:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* .level-setting-item - 스타일은 섹션 72-2에서 정의됨 */

/* SortableJS 스타일 */
.sortable-ghost {
  opacity: 0.4;
  background: var(--accent-primary-subtle);
}

.sortable-chosen {
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.sortable-drag {
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

/* ========================================
   KAKAO BUTTON
   ======================================== */
.btn-kakao {
  background: #FEE500;
  color: #000000;
  border: none;
}

.btn-kakao:hover {
  background: #FFEB3B;
  color: #000000;
}

.btn-kakao svg {
  fill: currentColor;
}

/* ========================================
   ITEM REMOVING ANIMATION
   ======================================== */
.plan-card.removing,
.payment-pending-item.removing,
.removing {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.3s ease;
  pointer-events: none;
}

/* ========================================
   MEMBER DETAIL PAGE STYLES
   ======================================== */

/* ============================================================
   Detail Layout — D. MONO Premium (3-tier magazine)
   회원 상세 페이지 전용:
     Tier 1: .detail-hero-row     (신원 카드 + 이용권 spotlight)
     Tier 2: .detail-body-grid    (기본 정보 폼 + 출석 캘린더)
     Tier 3: .detail-history-rail (승급 이력 + 정지 이력)
   ============================================================ */
.detail-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
.detail-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
.detail-history-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* ---- Identity card (hero left) ---- */
.detail-identity-card {
  background: #fff;
  border: 1px solid var(--border-hairline, #eaecef);
  border-radius: 16px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.detail-identity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary-500) 50%, transparent);
  opacity: 0.7;
}
.detail-identity-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.detail-identity-meta {
  flex: 1;
  min-width: 0;
}
.detail-identity-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-slate-900);
  line-height: 1.15;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.detail-identity-status {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  background: var(--color-primary-600);
  color: #fff;
  border-radius: 5px;
  letter-spacing: 0.04em;
}
.detail-identity-status.detail-identity-status--paused {
  background: var(--color-slate-700);
}
.detail-identity-status.detail-identity-status--expired {
  background: var(--color-slate-400);
}
.detail-identity-belt-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
/* ---- Unified Row list (회원 상세 — D-2 Caption variant) ----
   read-only / 편집 / 진입형 진입을 하나의 row 패턴으로 통합.
   focus-within rail (slate-900 inset 2px) 로 "지금 편집 중" 시각 피드백.
   라벨 톤은 13px sentence-case 단일 — D.MONO 마이크로 라벨/폼 라벨 충돌 zone 제거. */
.ur-body {
  padding: 0 !important;
}
.ur-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  min-height: 52px;
  transition: background 0.15s;
}
.ur-item:last-child {
  border-bottom: 0;
}
.ur-item:focus-within {
  background: var(--color-slate-50);
  box-shadow: inset 2px 0 0 var(--color-slate-900);
}
.ur-item-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0;
}
.ur-item:focus-within .ur-item-label {
  font-weight: 700;
  color: var(--color-slate-900);
}
.ur-input {
  width: 100%;
  padding: 6px 10px;
  height: 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-slate-900);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  transition: all 0.15s;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}
.ur-input:hover {
  background: #fff;
  border-color: var(--color-slate-200);
}
.ur-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}
.ur-input.is-invalid {
  border-color: var(--status-error);
  background: var(--status-error-bg);
}
.ur-readonly {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-slate-900);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ur-readonly small {
  font-weight: 500;
  color: var(--color-slate-500);
  margin-left: 2px;
}
/* select 은 CustomSelect 가 .form-select 에 자동 적용 — ur-select 는 row 안 정렬만 담당 */
.ur-select.form-select {
  height: 32px;
  padding: 0 10px;
  font-size: 14px;
  text-align: left;
}
.ur-item .custom-select-trigger {
  height: 32px;
  padding: 0 10px;
  font-size: 14px;
  border: 1px solid transparent;
  background: transparent;
}
.ur-item .custom-select-trigger:hover {
  background: #fff;
  border-color: var(--color-slate-200);
}
.ur-item .custom-select.open .custom-select-trigger,
.ur-item .custom-select-trigger:focus {
  background: #fff;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}
/* 그룹 캡션 (D-2) — D.MONO 마이크로 라벨 톤 재사용 */
.ur-caption {
  padding: 14px 20px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate-400);
  background: var(--color-slate-50);
  border-bottom: 1px solid var(--border-light);
}
/* 메모 row — 마지막 row, 전폭 textarea */
.ur-item--memo {
  grid-template-columns: 1fr;
  align-items: stretch;
  padding: 14px 20px 16px;
}
.ur-memo {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-slate-900);
  border: 1px solid var(--color-slate-200);
  border-radius: 8px;
  background: #fff;
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
  transition: all 0.15s;
}
.ur-memo:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}
.ur-memo.is-invalid {
  border-color: var(--status-error);
  background: var(--status-error-bg);
}
@media (max-width: 768px) {
  .ur-item {
    grid-template-columns: 120px 1fr;
    padding: 10px 16px;
    min-height: 48px;
  }
  .ur-caption {
    padding: 12px 16px 6px;
  }
  .ur-item--memo {
    grid-template-columns: 1fr;
    padding: 12px 16px 14px;
  }
  .ur-input,
  .ur-select.form-select,
  .ur-item .custom-select-trigger {
    font-size: 16px; /* iOS Safari zoom 방지 */
  }
  .ur-memo {
    font-size: 16px; /* iOS Safari zoom 방지 */
  }
}

/* ---- Pass spotlight (hero right) ---- */
.detail-pass-spotlight {
  background: linear-gradient(135deg, #fff 0%, var(--color-primary-50) 100%);
  border: 1px solid var(--border-hairline, #eaecef);
  border-radius: 16px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.detail-pass-spotlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary-500) 50%, transparent);
  opacity: 0.7;
}
.detail-pass-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.detail-pass-eyebrow-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-700);
}
.detail-pass-type-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.detail-pass-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--color-primary-200);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-800);
}
.detail-pass-type-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-600);
}
.detail-pass-type-chip.detail-pass-type-chip--count::before {
  background: var(--color-primary-600);
}
.detail-pass-type-chip.detail-pass-type-chip--day::before {
  background: var(--color-primary-800);
}
.detail-pass-type-chip.detail-pass-type-chip--period::before {
  background: var(--color-primary-400);
}
.detail-pass-type-name {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}
.detail-pass-big {
  font-size: 40px;
  font-weight: 800;
  color: var(--color-slate-900);
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.detail-pass-big.detail-pass-big--urgent {
  color: var(--status-error);
}
.detail-pass-big small {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.detail-pass-meta {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.detail-pass-actions {
  display: flex;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-primary-200);
}
.detail-pass-actions .btn {
  flex: 1;
  justify-content: center;
}

/* Pass spotlight — Empty state (등록 안내) */
.detail-pass-spotlight--empty {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 22px;
  min-height: 200px;
}
.detail-pass-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-500);
  margin-bottom: 10px;
}
.detail-pass-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.detail-pass-empty-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

/* Pass spotlight — Paused state (slate-tinted) */
.detail-pass-spotlight.detail-pass-spotlight--paused {
  background: linear-gradient(135deg, #fff 0%, var(--color-slate-50) 100%);
}
.detail-pass-spotlight.detail-pass-spotlight--paused .detail-pass-eyebrow-label {
  color: var(--color-slate-700);
}
.detail-pass-spotlight.detail-pass-spotlight--paused .detail-pass-actions {
  border-top-color: var(--color-slate-200);
}

/* (Reserved passes 는 detail-pass-column 안 별도 카드로 분리 — Split Cards 시안 2026-05-20.
    상세 스타일은 .detail-reserved-card 시리즈 참조) */

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .detail-hero-row,
  .detail-body-grid,
  .detail-history-rail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .detail-hero-row,
  .detail-body-grid,
  .detail-history-rail {
    gap: 12px;
    margin-bottom: 12px;
  }
  .detail-identity-card,
  .detail-pass-spotlight {
    padding: 16px 18px;
    border-radius: 14px;
  }
  .detail-identity-top {
    gap: 12px;
    margin-bottom: 12px;
  }
  .detail-identity-name {
    font-size: 20px;
  }
  .detail-pass-big {
    font-size: 34px;
  }
}

/* Member Stats Row */
.member-stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

/* D. MONO CONCIERGE — member stat card: hairline + shadow 제거 */
.member-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 1px solid #eaecef;
  border-radius: 12px;
  box-shadow: none;
}

.member-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.member-stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.member-stat-label {
  font-size: 12px;
  color: var(--gray-500);
}

@media (max-width: 640px) {
  .member-stats-row {
    flex-wrap: wrap;
  }
  .member-stat-card {
    flex: 1;
    min-width: 140px;
  }
}

/* Member Profile Header - (styles in section 38) */

.member-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

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

.member-profile-name {
  font-size: 24px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 8px;
}

.member-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.info-item-full {
  grid-column: 1 / -1;
}

.info-label {
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

.info-value {
  font-size: 15px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

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

/* ──────────────────────────────────────────────────────────────
 * Pass Card (글로벌)
 * 회원 대시보드(member/dashboard.html)와 관리자 회원 상세
 * (admin/members/detail.html)가 공유하는 이용권 카드.
 * "Hero D-day" 시각 언어 — 큰 잔여 표시 + 만료 메타.
 * ────────────────────────────────────────────────────────────── */
.pass-card {
  padding: 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
}
.pass-card + .pass-card { margin-top: 10px; }

.pass-card--paused {
  background: var(--color-slate-50);
  border-color: var(--color-slate-200);
}
.pass-card--paused .pass-card-type { background: var(--color-slate-500); }
.pass-card--paused .pass-card-num { color: var(--color-slate-700); }

.pass-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.pass-card-type {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--color-primary-600);
  color: #fff;
}

.pass-card-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-600);
}
.pass-card-status--paused { color: var(--color-slate-600); }

.pass-card-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary-800);
}
.pass-card-num small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 2px;
}

/* D-7 이하 만료 임박 — 잔여 숫자만 빨강으로 강조 */
.pass-card-num--urgent { color: var(--status-error); }

.pass-card-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}

@media (max-width: 480px) {
  .pass-card { padding: 14px; border-radius: 12px; }
}

.pass-name {
  font-size: 18px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 12px;
}

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

.pass-progress-bar {
  height: 8px;
  background: var(--border-default);
  border-radius: 4px;
  overflow: hidden;
}

.pass-progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.pass-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}

.pass-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}

.pass-price {
  font-size: 16px;
  font-weight: var(--font-bold);
  color: var(--color-primary-600);
}

/* ============================================================
   Reserved Passes — Split Cards 시안 (2026-05-20)
   detail-pass-column 안에서 spotlight 다음 sibling 으로 위치.
   예약 N건이 늘어도 spotlight 위치/높이 영향 없음.
   ============================================================ */
.detail-pass-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* zone wrapper — 항상 존재 (partial refresh 가 빈 상태로 갱신 가능) */
.detail-reserved-zone:empty {
  display: none;
}

.detail-reserved-card {
  background: #fff;
  border: 1px solid var(--border-hairline, #eaecef);
  border-radius: 14px;
  overflow: hidden;
}

.detail-reserved-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-slate-50);
  gap: 8px;
}

.detail-reserved-card-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate-700);
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-reserved-card-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.detail-reserved-card-list {
  padding: 6px 8px;
}

.detail-reserved-card-row {
  display: grid;
  grid-template-columns: 24px 1fr 28px;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  transition: background 0.12s;
}

.detail-reserved-card-row + .detail-reserved-card-row {
  border-top: 1px solid var(--border-light);
}

.detail-reserved-card-row:hover {
  background: var(--color-slate-50);
}

.detail-reserved-card-order {
  width: 22px;
  height: 22px;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.detail-reserved-card-info {
  min-width: 0;
}

.detail-reserved-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.detail-reserved-card-detail {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* 취소 버튼 — Brand Mono: subtle, hover 시 red */
.detail-reserved-card-cancel {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.detail-reserved-card-cancel:hover {
  border-color: var(--status-error);
  color: var(--status-error);
  background: var(--status-error-bg);
}
.detail-reserved-card-cancel:focus-visible {
  outline: 2px solid var(--status-error);
  outline-offset: 2px;
}

/* Level History Chips */
.history-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  font-size: 13px;
}

.history-chip-date {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  min-width: 60px;
}

.history-chip-levels {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

/* Calendar */
.attendance-calendar {
  margin: 0 auto;
  max-width: 300px;
  padding: 4px 0;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px 10px 4px;
  margin-bottom: 6px;
}

.calendar-nav-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.calendar-nav-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  transform: scale(1.05);
}

.calendar-month {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

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

.calendar-day-header {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  height: 36px;
  line-height: 36px;
  margin-bottom: 4px;
}

.calendar-day {
  height: 36px;
  line-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 10px;
  transition: all 0.15s ease;
  margin: 1px 0;
}

.calendar-day.other-month {
  color: var(--color-slate-300);
}

.calendar-day.attended {
  background: var(--color-primary-600);
  color: white !important;
  font-weight: 600;
}

.calendar-day.today {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  font-weight: 600;
}

.calendar-day.today.attended {
  background: var(--color-primary-600);
  color: white !important;
}

/* 일요일 헤더 */
.calendar-day-header:first-child {
  color: var(--status-error);
}

/* 토요일 헤더 */
.calendar-day-header:nth-child(7) {
  color: #3b82f6;
}

/* 일요일 날짜 */
.calendar-day:nth-child(7n+1):not(.other-month):not(.attended) {
  color: var(--status-error);
}

/* 토요일 날짜 */
.calendar-day:nth-child(7n):not(.other-month):not(.attended) {
  color: #3b82f6;
}

/* 출석한 일요일 */
.calendar-day.attended:nth-child(7n+1) {
  background: var(--status-error);
  color: white !important;
}

/* 출석한 토요일 */
.calendar-day.attended:nth-child(7n) {
  background: #3b82f6;
  color: white !important;
}

/* Attendance Summary */
.attendance-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
}

/* Quick Actions */
.quick-action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-action-btn:hover {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.quick-action-btn svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.quick-action-btn:hover svg {
  color: var(--color-primary-500);
}

/* Payment List */
.payment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.payment-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.payment-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.payment-desc {
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.payment-date {
  font-size: 12px;
  color: var(--text-tertiary);
}

.payment-amount {
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.payment-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
  font-size: 14px;
  color: var(--text-secondary);
}

.payment-total-amount {
  font-size: 18px;
  font-weight: var(--font-bold);
  color: var(--color-primary-600);
}

/* Activity Log */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  gap: 12px;
}

.activity-dot {
  width: 10px;
  height: 10px;
  background: var(--border-default);
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.activity-dot-payment {
  background: var(--color-primary-500);
}

.activity-dot-level {
  background: var(--status-warning);
}

/* Badge Level Style */
.badge-level {
  position: relative;
  background: var(--level-color, #1a1a1a);
  color: white;
  padding-left: 24px;
}

.badge-level::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--level-color, #1a1a1a);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
}

/* ========================================
   FLATPICKR CUSTOM STYLES
   심플하고 깔끔한 한국어 달력 디자인
   ======================================== */
.flatpickr-calendar {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.15) !important;
  font-family: var(--font-sans);
  padding: 20px !important;
  width: 300px !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  display: none !important;
}

/* 모바일: input 위치 기준 absolute 배치 시 화면 밖 잘림 방지 → 화면 중앙 fixed */
@media (max-width: 768px) {
  .flatpickr-calendar.open {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
  }
}

.flatpickr-months {
  padding: 6px 4px 10px 4px;
  margin-bottom: 6px;
  align-items: center;
}

.flatpickr-months .flatpickr-month {
  height: auto;
  flex: 1;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: static;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: all 0.2s ease;
  fill: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--bg-tertiary);
  fill: var(--text-primary);
  color: var(--text-primary);
  transform: scale(1.05);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 20px;
  height: 20px;
}

.flatpickr-current-month {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  left: 0;
  position: relative;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--border-default);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  padding: 8px 32px 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--border-muted);
  transform: scale(1.02);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-subtle);
}

.flatpickr-current-month .numInputWrapper {
  width: auto;
  margin-left: 6px;
}

.flatpickr-current-month input.cur-year {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  width: 72px;
  text-align: center;
}

.flatpickr-current-month input.cur-year:hover {
  background: var(--bg-tertiary);
  color: var(--color-primary-600);
  transform: scale(1.02);
}

.flatpickr-current-month input.cur-year:focus {
  outline: none;
  background: var(--bg-tertiary);
  color: var(--color-primary-600);
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none !important;
}

.flatpickr-weekdays {
  height: 36px;
  margin-bottom: 4px;
}

span.flatpickr-weekday {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.flatpickr-weekdays .flatpickr-weekday:first-child {
  color: var(--status-error);
}

.flatpickr-weekdays .flatpickr-weekday:last-child {
  color: #3b82f6;
}

.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days {
  width: 100% !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.flatpickr-day {
  flex-basis: 14.2857% !important;
  max-width: none !important;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 10px;
  border: none;
  transition: all 0.15s ease;
  margin: 1px 0;
}

.flatpickr-day:hover {
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-primary);
}

.flatpickr-day.today {
  background: var(--color-primary-50);
  border: none;
  color: var(--color-primary-600);
  font-weight: 600;
}

.flatpickr-day.today:hover {
  background: var(--color-primary-100);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--color-primary-600) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600;
}

.flatpickr-day.selected.today {
  background: var(--color-primary-600) !important;
  color: #ffffff !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--color-slate-300) !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: var(--bg-secondary);
  color: var(--text-tertiary) !important;
}

/* 일요일 */
.flatpickr-day:nth-child(7n+1):not(.prevMonthDay):not(.nextMonthDay) {
  color: var(--status-error);
}

.flatpickr-day:nth-child(7n+1):not(.prevMonthDay):not(.nextMonthDay):hover {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.flatpickr-day:nth-child(7n+1).selected {
  color: #ffffff !important;
}

/* 토요일 */
.flatpickr-day:nth-child(7n):not(.prevMonthDay):not(.nextMonthDay) {
  color: #3b82f6;
}

.flatpickr-day:nth-child(7n):not(.prevMonthDay):not(.nextMonthDay):hover {
  background: #eff6ff;
  color: #3b82f6;
}

.flatpickr-day:nth-child(7n).selected {
  color: #ffffff !important;
}

/* 월 표시 - 클릭 가능 스타일 */
.flatpickr-current-month .cur-month {
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.flatpickr-current-month .cur-month:hover {
  background: var(--bg-tertiary);
  color: var(--color-primary-600);
  transform: scale(1.02);
}

/* 월 선택 오버레이 */
.month-picker-overlay {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: var(--z-raised);
  display: none;
  width: 220px;
}

.month-picker-overlay.active {
  display: block;
  animation: fadeInScale 0.15s ease;
}

.month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.month-picker-item {
  padding: 10px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.month-picker-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.month-picker-item.current {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.month-picker-item.selected {
  background: var(--color-primary-600);
  color: #ffffff;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* ========================================
   SETUP WIZARD PAGE STYLES
   ======================================== */

/* Wizard Page Base */
.wizard-page {
  min-height: 100vh;
  background: #f8fdfb;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Wizard Container */
.wizard-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  padding: 40px;
}

/* Wizard Header */
.wizard-header {
  text-align: left;
  margin-bottom: 32px;
}

.wizard-step-indicator {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-600);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}

.wizard-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.wizard-subtitle {
  font-size: 15px;
  color: var(--text-tertiary);
}

/* Wizard Progress */
.wizard-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
  background: var(--bg-secondary);
  border: 1px solid #e8ecf0;
  border-radius: 14px;
  padding: 6px;
}

/* Wizard Step Indicators — pill track chip style */
.wz-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 10px;
  transition: all 0.2s;
}
.wz-step:last-child { flex: 1; }

.wz-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--border-default);
  color: #adb5bd;
  flex-shrink: 0;
  transition: all 0.2s;
}
.wz-step.active {
  background: #fff;
  box-shadow: 0 2px 12px rgba(5, 150, 105, 0.12);
}
.wz-step.active .wz-step-num {
  background: var(--color-primary-600);
  color: white;
}
.wz-step.done .wz-step-num {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}
.wz-step-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.wz-step.active .wz-step-text { color: var(--color-primary-600); font-weight: 700; }
.wz-step.done .wz-step-text { color: var(--text-secondary); }

/* Separator between chips */
.wz-step-sep {
  width: 1px;
  height: 18px;
  background: var(--border-default);
  flex-shrink: 0;
}

/* Old connector line — hidden */
.wz-step-line { display: none; }

/* Wizard Content */
.wizard-content {
  position: relative;
}

.wizard-step {
  display: none;
  opacity: 0;
}

.wizard-step.active {
  display: block;
  opacity: 1;
  animation: wizard-fadeInUp 0.4s ease forwards;
}

@keyframes wizard-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Wizard Cards */
.wizard-step .card {
  background: var(--bg-primary);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border: none;
  overflow: visible;
}

.wizard-step .card-header {
  padding: 28px 28px 0;
  border: none;
  background: transparent;
}

.wizard-step .card-header .h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.wizard-step .card-body {
  padding: 24px 28px 28px;
}

/* Level List */
.level-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.level-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.level-item:hover {
  background: #f3f4f6;
}

/* Level Drag Handle */
.level-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-tertiary);
  cursor: grab;
  border-radius: 4px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.level-drag-handle:hover {
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.05);
}

.level-drag-handle:active {
  cursor: grabbing;
}

/* Level Drag States */
.level-item.dragging {
  opacity: 0.5;
  background: var(--color-primary-50);
  border: 2px dashed var(--color-primary-300);
}

.level-item.drag-over {
  background: var(--color-primary-100);
  border: 2px solid var(--color-primary-400);
  transform: scale(1.02);
}

.level-color-wrapper {
  position: relative;
  flex-shrink: 0;
}

.level-color-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.level-color-preview {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.level-color-wrapper:hover .level-color-preview {
  transform: scale(1.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.level-name-input {
  width: 120px;
  flex-shrink: 0;
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s;
}

.level-name-input:hover {
  background: white;
  border-color: var(--card-border);
}

.level-name-input:focus {
  outline: none;
  background: white;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.level-gral-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.level-gral-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

.level-gral-select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: white;
  color: #374151;
  cursor: pointer;
  min-width: 80px;
}

.level-gral-select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.level-order {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
  min-width: 45px;
  text-align: right;
}

.level-actions {
  display: flex;
  justify-content: center;
}

.btn-danger-ghost {
  background: transparent;
  color: #9ca3af;
}

.btn-danger-ghost:hover {
  background: var(--status-error-border);
  color: var(--status-error);
}

/* Plan Type Section */
.plan-type-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-default);
}

.plan-type-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.plan-type-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.plan-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 11px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* 색·dot 은 글로벌 .badge-period/-count/-day-specific 위임 */

/* Plan 관리 — 3종 외 이용권 문의 안내 */
.pass-inquiry-note {
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--color-slate-50);
  border: 1px dashed var(--color-slate-300);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.5;
}
.pass-inquiry-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  color: var(--color-primary-600);
  font-weight: 600;
  text-decoration: none;
}
.pass-inquiry-link:hover {
  color: var(--color-primary-700);
}

/* 요일 체크박스 UI (요일권 전용) */
.day-checkbox-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.day-checkbox {
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.day-checkbox input[type="checkbox"] {
  display: none;
}
.day-checkbox span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-slate-300);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  transition: background-color 0.15s ease,
              border-color 0.15s ease,
              color 0.15s ease;
}
.day-checkbox:hover span {
  border-color: var(--color-primary-400);
  color: var(--color-primary-600);
}
.day-checkbox input:checked + span {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}
.member-col.col-allowed-days {
  min-width: 220px;
}

.plan-type-desc {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ====================================
   Plan Wizard New UI - Tabbed Cards
   ==================================== */
.plan-type-tabs-wizard {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.plan-type-tab-wizard {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f9fafb;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.plan-type-tab-wizard:hover {
  background: #f3f4f6;
}

.plan-type-tab-wizard.active {
  background: white;
  border-color: var(--color-primary-500);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.plan-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

.plan-tab-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.plan-tab-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.plan-tab-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-tab-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-primary-100);
  color: var(--color-primary-600);
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Plan Panels */
.plan-panels {
  min-height: 200px;
}

.plan-panel {
  display: none;
}

.plan-panel.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

/* Plan Card List */
.plan-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

/* Plan Card */
.plan-card {
  background: white;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0;
  transition: all 0.2s ease;
  overflow: hidden;
}

.plan-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
}

.plan-card-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  border: none;
  background: transparent;
  padding: 4px 0;
  outline: none;
}

.plan-card-name::placeholder {
  color: #9ca3af;
  font-weight: 500;
}

.plan-card-name:focus {
  border-bottom: 2px solid var(--color-primary-500);
}

.plan-card-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #9ca3af;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.plan-card-delete:hover {
  background: var(--status-error-border);
  color: var(--status-error);
}

.plan-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-card-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plan-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.plan-field-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 6px 10px;
}

.plan-field-input {
  width: 70px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  border: none;
  background: transparent;
  text-align: right;
  outline: none;
}

.plan-field-input.price {
  width: 90px;
}

.plan-field-input:focus {
  color: var(--color-primary-600);
}

.plan-field-prefix,
.plan-field-suffix {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.plan-card-footer {
  padding: 12px 16px;
  border-top: 1px solid #f3f4f6;
}

.plan-card-desc {
  width: 100%;
  font-size: 13px;
  color: var(--text-secondary);
  border: none;
  background: transparent;
  padding: 4px 0;
  outline: none;
}

.plan-card-desc::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.plan-card-desc:focus {
  border-bottom: 1px solid var(--color-primary-300);
}

/* Plan Add Button */
.plan-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
}

.plan-add-btn:hover {
  background: #f3f4f6;
  border-color: var(--color-primary-400);
  color: var(--color-primary-600);
}

.plan-add-btn svg {
  transition: transform 0.2s;
}

.plan-add-btn:hover svg {
  transform: scale(1.1);
}

/* Plan Setup List */
.plan-setup-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-setup-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.plan-setup-item:hover {
  background: #f3f4f6;
}

.plan-setup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.plan-desc-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  transition: all 0.2s;
}

.plan-desc-input::placeholder {
  color: #9ca3af;
}

.plan-desc-input:hover {
  background: white;
  border-color: var(--card-border);
}

.plan-desc-input:focus {
  outline: none;
  background: white;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.plan-type-select {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: white;
  color: #374151;
  cursor: pointer;
  min-width: 90px;
}

.plan-type-select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.plan-name-input {
  flex: 1;
  min-width: 120px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #374151;
  transition: all 0.2s;
}

.plan-name-input:hover {
  background: white;
  border-color: var(--card-border);
}

.plan-name-input:focus {
  outline: none;
  background: white;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.plan-duration-group,
.plan-count-group,
.plan-price-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.plan-duration-input,
.plan-count-input {
  width: 70px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: white;
  color: #374151;
  text-align: right;
}

.plan-duration-input:focus,
.plan-count-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.plan-price-input {
  width: 100px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: white;
  color: #374151;
  text-align: right;
}

.plan-price-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.input-with-suffix {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-prefix,
.input-suffix {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

.plan-actions {
  display: flex;
  justify-content: center;
}

.plan-setup-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plan-type-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.plan-name {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.plan-setup-details {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #6b7280;
}

.plan-price {
  font-weight: 600;
  color: #1f2937;
}

/* Editable Plan Items */
.plan-setup-item.editable {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.plan-setup-item.editable .plan-type-select {
  width: 100px;
  padding: 8px 12px;
  font-size: 13px;
}

.plan-setup-item.editable .plan-name-input {
  flex: 1;
  min-width: 120px;
}

.plan-setup-item.editable .plan-duration-group,
.plan-setup-item.editable .plan-count-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.plan-setup-item.editable .plan-duration-input,
.plan-setup-item.editable .plan-count-input {
  width: 70px;
  text-align: right;
}

.plan-setup-item.editable .plan-price-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.plan-setup-item.editable .plan-price-input {
  width: 100px;
  text-align: right;
}

.plan-setup-item.editable .input-prefix,
.plan-setup-item.editable .input-suffix {
  font-size: 13px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* [DEPRECATED] Old Completion Step - Replaced by Enhanced Celebration Design
   See: COMPLETION STEP - Enhanced Celebration Design section at the end of this file
.completion-icon { ... }
.completion-icon.pulse-slow { ... }
.completion-summary { ... }
.summary-item { ... }
*/

/* Wizard Navigation */
.wizard-nav {
  display: flex;
  margin-top: 24px;
}

.wizard-nav .btn {
  min-width: 120px;
}

.wizard-nav #nextBtn {
  margin-left: auto;
}

/* Fade In Animation */
.fade-in {
  animation: wizard-fadeIn 0.5s ease forwards;
  opacity: 0;
}

@keyframes wizard-fadeIn {
  to { opacity: 1; }
}

/* Utility Classes for Wizard */
.wizard-step .py-8 {
  padding-top: 48px;
  padding-bottom: 48px;
}

.wizard-step .mt-6 {
  margin-top: 24px;
}

.wizard-step .mb-2 {
  margin-bottom: 8px;
}

.wizard-step .mb-6 {
  margin-bottom: 24px;
}

/* Responsive — Tablet */
@media (max-width: 768px) {
  .wizard-page {
    padding: 32px 16px;
  }

  .wizard-container {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .wizard-header {
    margin-bottom: 24px;
  }

  .wizard-step .card-header,
  .wizard-step .card-body {
    padding: 20px 16px;
  }
}

/* Responsive — Mobile */
@media (max-width: 640px) {
  .wizard-page {
    padding: 12px 8px;
  }

  .wizard-container {
    padding: 20px 14px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }

  .wizard-header {
    margin-bottom: 16px;
  }

  .wizard-title {
    font-size: 20px;
  }

  .wizard-subtitle {
    font-size: 13px;
  }

  .wizard-step-indicator {
    font-size: 12px;
    letter-spacing: 1px;
  }

  .wizard-progress {
    margin-bottom: 20px;
    padding: 4px;
    border-radius: 12px;
  }

  .wz-step {
    padding: 8px 6px;
    gap: 5px;
  }

  .wz-step-num {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .wz-step-text {
    font-size: 12px;
  }

  .wizard-step .card {
    border-radius: 14px;
  }

  .wizard-step .card:hover {
    transform: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.05);
  }

  .wizard-step .card-header,
  .wizard-step .card-body {
    padding: 16px 14px;
  }

  .wizard-nav {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  .wizard-nav .btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
  }

  .btn-glow {
    box-shadow: 0 3px 14px rgba(16, 185, 129, 0.35);
  }

  .btn-glow:hover {
    transform: none;
  }
}

/* Responsive — Small Mobile */
@media (max-width: 400px) {
  .wizard-page {
    padding: 8px 4px;
  }

  .wizard-container {
    padding: 16px 10px;
    border-radius: 12px;
  }

  .wizard-title {
    font-size: 18px;
  }

  .wizard-subtitle {
    font-size: 12px;
  }

  .wz-step-text {
    font-size: 11px;
  }

  .wizard-step .card-header,
  .wizard-step .card-body {
    padding: 14px 12px;
  }
}

/* Wizard Card */
.wizard-step .card {
  background: var(--bg-primary);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-default);
}

.wizard-step .card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 카드 헤더 아이콘 */
.wizard-step .card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.card-header-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-50) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary-600);
}

.card-header-icon svg {
  width: 24px;
  height: 24px;
}

.card-header-text {
  flex: 1;
}

/* 입력 폼 개선 */
.wizard-step .form-input,
.wizard-step .form-select {
  transition: all 0.2s ease;
  border: 1.5px solid var(--border-default);
}

.wizard-step .form-input:focus,
.wizard-step .form-select:focus {
  border-color: var(--color-primary-400);
  box-shadow:
    0 0 0 3px rgba(16, 185, 129, 0.12),
    0 0 20px rgba(16, 185, 129, 0.08);
}

/* 항목 호버 하이라이트 */
.level-item,
.plan-setup-item {
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.level-item:hover,
.plan-setup-item:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgba(5, 150, 105, 0.04) 100%);
  border-color: rgba(16, 185, 129, 0.1);
}

/* 버튼 호버 효과 개선 */
.wizard-nav .btn {
  transition: all 0.25s ease;
}

.wizard-nav .btn svg {
  transition: transform 0.25s ease;
}

.wizard-nav .btn:hover svg {
  transform: translateX(4px);
}

.wizard-nav .btn-secondary:hover svg {
  transform: translateX(-4px);
}

/* 버튼 글로우 - 에메랄드 */
.btn-glow {
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}

.btn-glow:hover {
  box-shadow: 0 6px 30px rgba(16, 185, 129, 0.5);
  transform: translateY(-2px);
}

/* Staggered 애니메이션 */
@keyframes wizard-stagger-in {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wizard-step.active .level-item,
.wizard-step.active .plan-setup-item,
.wizard-step.active .plan-type-section {
  animation: wizard-stagger-in 0.4s ease forwards;
  opacity: 0;
}

.wizard-step.active .level-item:nth-child(1),
.wizard-step.active .plan-type-section:nth-child(1) { animation-delay: 0.1s; }
.wizard-step.active .level-item:nth-child(2),
.wizard-step.active .plan-type-section:nth-child(2) { animation-delay: 0.15s; }
.wizard-step.active .level-item:nth-child(3),
.wizard-step.active .plan-type-section:nth-child(3) { animation-delay: 0.2s; }
.wizard-step.active .level-item:nth-child(4) { animation-delay: 0.25s; }
.wizard-step.active .level-item:nth-child(5) { animation-delay: 0.3s; }
.wizard-step.active .level-item:nth-child(6) { animation-delay: 0.35s; }
.wizard-step.active .level-item:nth-child(7) { animation-delay: 0.4s; }
.wizard-step.active .level-item:nth-child(8) { animation-delay: 0.45s; }

/* 파일 드롭존 개선 */
.file-drop-zone {
  border: 2px dashed var(--border-default);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, rgba(249, 250, 251, 0.8) 0%, rgba(243, 244, 246, 0.8) 100%);
}

.file-drop-zone:hover {
  border-color: var(--color-primary-300);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.8) 0%, rgba(209, 250, 229, 0.4) 100%);
}

.file-drop-zone.drag-over {
  border-color: var(--color-primary-500);
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.8) 0%, rgba(167, 243, 208, 0.4) 100%);
  transform: scale(1.02);
}

.drop-zone-content svg {
  color: var(--color-primary-400);
  margin-bottom: 16px;
}

.drop-zone-text {
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.drop-zone-hint {
  font-size: 13px;
  color: #9ca3af;
}

/* 로고 개선 */
.wizard-logo {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.wizard-logo:hover {
  transform: scale(1.05) rotate(-3deg);
}

/* 모바일 반응형 개선 */
@media (max-width: 640px) {
  .card-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .card-header-icon svg {
    width: 20px;
    height: 20px;
  }

  .completion-celebration {
    width: 120px;
    height: 120px;
  }

  .celebration-icon {
    width: 80px;
    height: 80px;
  }

  .celebration-icon svg {
    width: 36px;
    height: 36px;
  }

  .completion-title {
    font-size: 26px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .progress-step.active .step-number {
    animation: none;
  }

  .wizard-step.active .level-item,
  .wizard-step.active .plan-setup-item,
  .wizard-step.active .plan-type-section {
    animation: none;
    opacity: 1;
  }
}

/* ==========================================
   Plan Type Tabs (Member Dashboard Payment Modal)
   ========================================== */
.plan-type-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  padding: 6px;
  background: var(--bg-secondary);
  border-radius: 14px;
}

.plan-type-tab {
  flex: 1;
  padding: 14px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  position: relative;
}

.plan-type-tab svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.plan-type-tab:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
}

.plan-type-tab:hover svg {
  transform: scale(1.1);
}

.plan-type-tab.active {
  background: white;
  color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.plan-type-tab.active svg {
  color: var(--accent-primary);
}

/* ==========================================
   Plan Option Cards (Payment Modal)
   ========================================== */
.plan-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-option {
  display: block;
  cursor: pointer;
}

.plan-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: white;
  border: 2px solid var(--border-default);
  border-radius: 14px;
  transition: all 0.2s ease;
}

.plan-option:hover .plan-option-content {
  border-color: var(--color-primary-200);
  background: var(--color-primary-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1);
}

.plan-option input:checked + .plan-option-content {
  border-color: var(--accent-primary);
  background: linear-gradient(135deg, var(--color-primary-50) 0%, white 100%);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.15), inset 0 0 0 1px var(--color-primary-200);
}

.plan-option-content > div:first-child > div:first-child {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.plan-option-content > div:first-child > div:last-child {
  font-size: 13px;
  color: var(--text-tertiary);
}

.plan-option-content > div:last-child {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-primary);
}

.plan-option input:checked + .plan-option-content > div:last-child {
  color: var(--color-primary-700);
}

/* ==========================================
   CONTENT ACTIONS (title-less page actions)
   ========================================== */
.content-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* ==========================================
   MEMBER REGISTRATION - Guide Banner
   ========================================== */
.register-guide-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--color-primary-50) 0%, #fff 100%);
  border: 1px solid var(--color-primary-200);
  border-radius: 14px;
  margin-bottom: 20px;
}

.register-guide-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.register-guide-icon svg {
  color: #fff;
}

.register-guide-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.register-guide-text strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.register-guide-text span {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ==========================================
   MEMBER REGISTRATION (Wizard Step 4)
   ========================================== */
.member-register-tabs {
  display: flex;
  gap: 6px;
  background: var(--color-slate-100);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 22px;
}

.register-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.register-tab:hover {
  background: rgba(255, 255, 255, 0.6);
}

.register-tab.active {
  background: #fff;
  color: var(--color-primary-600);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.register-panel {
  display: none;
}

.register-panel.active {
  display: block;
}

/* Excel Upload Panel */
.excel-register-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Excel step cards */
.excel-step-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  margin-bottom: 8px;
}

.excel-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-50);
  border: 1.5px solid var(--color-primary-200);
  color: var(--color-primary-600);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.excel-step-info {
  flex: 1;
}

.excel-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.excel-step-desc {
  font-size: 12px;
  color: var(--text-tertiary);
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 1.5px solid var(--color-primary-200);
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-600);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.btn-download:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
}

.file-drop-zone {
  border: 2px dashed var(--border-default);
  border-radius: 12px;
  padding: 32px 20px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-primary);
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
}

.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-tertiary);
}

.drop-zone-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
}

.drop-zone-hint {
  font-size: 13px;
  color: var(--text-tertiary);
}

.selected-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: 10px;
  margin-top: 16px;
}

.selected-file svg {
  color: var(--color-primary-600);
}

.selected-file .file-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
}

/* Manual Registration Panel */
.manual-register-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 필드 안내 */
.field-guide {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}

.field-guide-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 테이블 형태 입력 */
.member-table-wrapper {
  overflow-x: auto;
}

.member-table-wrapper:has(.custom-select-wrapper.open) {
  overflow: visible;
}

.member-table-row .custom-select-wrapper .custom-select-dropdown {
  min-width: max-content;
}

.member-table {
  width: 100%;
  min-width: fit-content;
}

.member-table-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  min-width: fit-content;
}

.member-table-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.member-table-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  transition: box-shadow 0.15s, border-color 0.15s;
  min-width: fit-content;
}

.member-table-row:last-child {
  border-bottom: 1px solid var(--border-default);
}

.member-table-row:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  border-color: var(--color-slate-300);
}

.member-col {
  min-width: 0;
}

.member-col.col-name {
  flex: 0 0 120px;
}

.member-col.col-phone {
  flex: 0 0 140px;
}

.member-col.col-promotion {
  flex: 0 0 130px;
}

.member-col.col-expiry {
  flex: 0 0 140px;
}

.member-col.col-remaining {
  flex: 0 0 80px;
}

.member-col.col-level {
  flex: 0 0 140px;
}

.member-col.col-gral {
  flex: 0 0 90px;
}

.member-col.col-divider {
  flex: 0 0 1px;
  padding: 0;
  position: relative;
}

.member-col.col-divider::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 2px;
  background: var(--color-primary-600);
  border-radius: 1px;
  opacity: 0.4;
}

.member-table-group-labels {
  display: flex;
  gap: 8px;
  padding: 0 16px;
}

.member-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 0 0;
}

.member-group-divider-spacer {
  flex: 0 0 1px;
}

.member-group-required {
  color: var(--color-primary-600);
}

.member-group-optional {
  color: var(--color-slate-400);
  flex: 1;
}

/* 이용권 타입별 필수 항목 영역 너비: col widths + gaps */
/* PERIOD: name(120) + phone(140) + expiry(140) + 2*gap(8) = 416px */
[data-pass-type="PERIOD"] .member-group-required {
  flex: 0 0 416px;
}
/* COUNT: name(120) + phone(140) + expiry(140) + remaining(80) + 3*gap(8) = 504px */
[data-pass-type="COUNT"] .member-group-required {
  flex: 0 0 504px;
}
/* NONE: name(120) + phone(140) + gap(8) = 268px */
[data-pass-type="NONE"] .member-group-required {
  flex: 0 0 268px;
}

.member-col.col-action {
  flex: 0 0 32px;
  display: flex;
  justify-content: center;
}

.member-col .form-input,
.member-col .form-select {
  padding: 8px 10px;
  min-height: auto;
  font-size: 13px;
  width: 100%;
}

/* 에러 발생 시 행 정렬 상단 기준으로 전환 */
.member-table-row.has-error {
  align-items: flex-start;
}

.member-table-row.has-error .col-action {
  padding-top: 6px;
}

.member-table-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
}

/* 행 추가 버튼 — dashed card style */
.btn-add-row {
  width: 100%;
  padding: 9px;
  border: 1.5px dashed var(--color-slate-300);
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--font-bold);
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
  margin-top: 4px;
  margin-bottom: 8px;
}

.btn-add-row:hover {
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
  background: var(--color-primary-50);
}

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

.member-count-label strong {
  color: var(--color-primary-600);
  font-weight: 600;
}

/* 회원 등록 페이지 — 테이블 내부 스크롤 제거 */
.member-register-fullpage .member-table-wrapper {
  overflow: visible;
}

.member-register-fullpage .member-table,
.member-register-fullpage .member-table-header,
.member-register-fullpage .member-table-row,
.member-register-fullpage .member-table-group-labels {
  min-width: 0;
}

/* 회원 등록 페이지 — 모바일: 행 wrap + 2-column grid 스택 */
@media (max-width: 768px) {
  .member-register-fullpage .member-table-wrapper {
    overflow: visible;
  }
  .member-register-fullpage .member-table-header,
  .member-register-fullpage .member-table-group-labels {
    display: none;
  }
  .member-register-fullpage .member-table-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    position: relative;
  }
  .member-register-fullpage .member-table-row > .member-col {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  /* 긴 입력 필드는 full-width로 배치 */
  .member-register-fullpage .member-table-row > .member-col.col-expiry,
  .member-register-fullpage .member-table-row > .member-col.col-level,
  .member-register-fullpage .member-table-row > .member-col.col-gral,
  .member-register-fullpage .member-table-row > .member-col.col-promotion {
    flex: 1 1 100%;
  }
  /* 이름/연락처는 한 줄 2-col */
  .member-register-fullpage .member-table-row > .member-col.col-name,
  .member-register-fullpage .member-table-row > .member-col.col-phone {
    flex: 1 1 calc(50% - 4px);
  }
  /* 횟수 필드는 만료일과 같은 줄에서 자연스러운 분할 */
  .member-register-fullpage .member-table-row > .member-col.col-remaining {
    flex: 1 1 calc(50% - 4px);
  }
  /* 세로 구분선은 모바일에서 숨김 */
  .member-register-fullpage .member-table-row > .member-col.col-divider {
    display: none;
  }
  /* 삭제 버튼은 행 우상단 absolute */
  .member-register-fullpage .member-table-row > .member-col.col-action {
    position: absolute;
    top: 6px;
    right: 6px;
    flex: 0 0 auto;
  }
}

/* 이용권 타입 탭 — 라운드 칩 스타일 */
.pass-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}

.pass-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1.5px solid var(--border-default);
  border-radius: 20px;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s;
}

.pass-type-tab:hover {
  border-color: var(--color-primary-200);
  color: var(--text-primary);
}

/* D.MONO segmented 정합: 활성 = slate-900 솔리드 (emerald-50 톤 폐기 2026-05-19) */
.pass-type-tab.active {
  background: var(--color-slate-900);
  border-color: var(--color-slate-900);
  color: #ffffff;
}

.pass-tab-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  background: #fff;
  border: 1px solid var(--color-slate-200);
  color: var(--color-slate-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pass-type-tab.active .pass-tab-count {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--color-slate-900);
}

.pass-type-description {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 0 4px 12px;
}

/* 패널 표시/숨김 */
.pass-type-panel {
  display: none;
}

.pass-type-panel.active {
  display: block;
}

/* 기존 폼 스타일 (하위 호환) */
.member-form-section {
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
}

.member-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.member-form-section .form-group {
  margin-bottom: 0;
}

.member-form-section .btn-primary {
  width: 100%;
  margin-top: 8px;
}

/* Added Members List */
.added-members-section {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
}

.added-members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}

.added-members-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.member-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: var(--color-primary-500);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
}

.added-members-list {
  max-height: 240px;
  overflow-y: auto;
}

.empty-members {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  color: var(--text-tertiary);
}

.empty-members p {
  font-size: 14px;
  margin: 0;
}

.added-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}

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

.member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 14px;
}

.member-detail {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 640px) {
  .member-form-row {
    grid-template-columns: 1fr;
  }

  .file-drop-zone {
    padding: 24px 16px;
  }
}

/* Date Input 스타일 */
.date-picker {
  cursor: pointer;
}

.date-picker[readonly] {
  background: var(--bg-primary);
}

/* Time Picker - Slot Machine Style */
.time-picker[readonly] {
  background-color: var(--bg-primary);
}

/* 커스텀 연도 선택기 */
.year-picker-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  border-radius: 16px;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.year-picker-overlay.active {
  opacity: 1;
  visibility: visible;
}

.year-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 16px;
}

.year-picker-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.year-picker-nav {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 18px;
  transition: all 0.2s;
  background: transparent;
  border: none;
}

.year-picker-nav:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.year-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: 1;
}

.year-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background: transparent;
}

.year-picker-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.year-picker-item.current {
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
  font-weight: 600;
}

.year-picker-item.selected {
  background: var(--accent-primary);
  color: var(--text-inverse);
  font-weight: 600;
}

.year-picker-item.selected:hover {
  background: var(--accent-primary-hover);
}

/* Flatpickr 선택 해제 버튼 */
.flatpickr-clear-btn {
  display: block;
  width: 100%;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--border-subtle);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.flatpickr-clear-btn:hover {
  color: var(--status-error, #ef4444);
  background: #fef2f2;
}

/* ==========================================
   COMPLETION STEP - Clean Celebration Design
   ========================================== */

/* Celebration Container */
.completion-celebration {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: 0 auto 32px;
}

/* Main Icon */
.celebration-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  border-radius: 50%;
  box-shadow:
    0 8px 32px rgba(16, 185, 129, 0.25),
    0 0 0 6px rgba(16, 185, 129, 0.08);
  animation: icon-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform: scale(0);
}

@keyframes icon-appear {
  to { transform: scale(1); }
}

.celebration-icon svg {
  width: 56px;
  height: 56px;
  color: white;
}

/* Typography */
.completion-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  animation: fade-up 0.5s ease 0.3s forwards;
  opacity: 0;
  transform: translateY(10px);
}

.completion-subtitle {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  animation: fade-up 0.5s ease 0.4s forwards;
  opacity: 0;
  transform: translateY(10px);
}

.completion-guide {
  font-size: 15px;
  color: var(--color-primary-600);
  font-weight: 500;
  margin-bottom: 40px;
  animation: fade-up 0.5s ease 0.5s forwards;
  opacity: 0;
  transform: translateY(10px);
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stats Grid */
.completion-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  animation: fade-up 0.5s ease 0.6s forwards;
  opacity: 0;
  transform: translateY(10px);
}

.completion-stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  transition: all 0.25s ease;
}

.completion-stat-card:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
}

.completion-stat-icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary-100);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--color-primary-600);
  transition: all 0.25s ease;
}

.completion-stat-card:hover .completion-stat-icon {
  background: var(--color-primary-500);
  color: white;
  transform: scale(1.05);
}

.completion-stat-icon svg {
  width: 24px;
  height: 24px;
}

.completion-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  word-break: keep-all;
}

.completion-stat-label {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Responsive */
@media (max-width: 640px) {
  .completion-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .completion-celebration {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
  }

  .celebration-icon svg {
    width: 44px;
    height: 44px;
  }

  .completion-title {
    font-size: 26px;
  }

  .completion-subtitle {
    font-size: 15px;
  }

  .completion-stat-card {
    padding: 20px 12px;
  }

  .completion-stat-icon {
    width: 40px;
    height: 40px;
  }

  .completion-stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .completion-stat-value {
    font-size: 17px;
  }

  .completion-stat-label {
    font-size: 12px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .celebration-icon {
    animation: none;
    transform: scale(1);
  }

  .completion-title,
  .completion-subtitle,
  .completion-guide,
  .completion-stats {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ========================================
   SETTINGS PAGE LAYOUT (설정 페이지 레이아웃)
   ======================================== */
.settings-page-container {
  max-width: 720px;
  margin: 0 auto;
}

/* 구독 정보 배너 */
.subscription-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  border: none;
  border-radius: 16px;
  margin-top: 0;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
  color: white;
}

.subscription-banner-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subscription-banner-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
}

.subscription-banner-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subscription-banner-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.subscription-banner-value {
  font-size: 20px;
  font-weight: 700;
  color: white;
}

.subscription-banner-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: right;
}

.subscription-banner-meta-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.subscription-banner-meta-value {
  font-size: 15px;
  font-weight: 600;
  color: white;
}

.subscription-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 16px;
}

.subscription-banner-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
}

.subscription-banner:hover {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
  transition: all 0.2s;
}

/* 문의 섹션 컴팩트 */
.support-card-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  margin-top: 24px;
}

.support-card-compact p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* 설정 토글 아이템 */
.setting-toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-default);
}

.setting-toggle-title {
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.setting-toggle-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

/* 레벨 설정 input 필드 최적화 */
.level-setting-item .form-input[type="text"] {
  flex: 1;
  width: auto;
  min-width: 100px;
}

/* 반응형 */
@media (max-width: 768px) {
  .subscription-banner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .subscription-banner-main {
    flex-direction: column;
  }

  .subscription-banner-meta {
    justify-content: center;
    text-align: center;
  }

  .subscription-banner-badge {
    margin-left: 0;
    margin-top: 8px;
  }

  .support-card-compact {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ========================================
   KAKAO CHAT FLOATING BUTTON
   ======================================== */
.kakao-chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FEE500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(254, 229, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, bottom 0.3s ease;
  z-index: var(--z-dropdown);
  text-decoration: none;
}

.kakao-chat-fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 32px rgba(254, 229, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.1);
}

.kakao-chat-fab:active {
  transform: translateY(-1px) scale(1.02);
}

.kakao-chat-fab svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 768px) {
  .kakao-chat-fab {
    bottom: 16px;
    right: 16px;
    width: 54px;
    height: 54px;
  }

  .kakao-chat-fab svg {
    width: 26px;
    height: 26px;
  }

  /* 바텀 네비가 있는 레이아웃(admin 등)에서는 FAB을 바텀네비 위로 띄움 */
  body:has(.mobile-bottom-nav) .kakao-chat-fab {
    bottom: calc(64px + 16px + env(safe-area-inset-bottom, 0px));
  }

  /* 랜딩 sticky CTA가 떠 있을 때는 FAB을 그 위로 띄움 (푸터 진입 시 .show 해제되어 원위치) */
  body:has(.landing-mobile-cta.show) .kakao-chat-fab {
    bottom: calc(72px + 16px + env(safe-area-inset-bottom, 0px));
  }
}

/* 모바일 한정 컴팩트 변형: admin/member 사이드바(데스크톱) 보완용 — 데스크톱 숨김, 모바일 44px */
@media (min-width: 769px) {
  .kakao-chat-fab--mobile-only {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .kakao-chat-fab--mobile-only {
    width: 44px;
    height: 44px;
  }

  .kakao-chat-fab--mobile-only svg {
    width: 22px;
    height: 22px;
  }
}

/* ========================================
   POSTCODE MODAL (다음 우편번호 검색)
   fragment: fragments/postcode-modal.html
   ======================================== */
.postcode-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 20px;
}
.postcode-modal.active {
  display: flex;
  animation: postcodeFadeIn 0.25s ease-out;
}
@keyframes postcodeFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
.postcode-container {
  background: var(--bg-primary);
  border-radius: 18px;
  max-width: 540px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  animation: postcodeScaleIn 0.3s ease-out;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
@keyframes postcodeScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.postcode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.postcode-header h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
.postcode-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-slate-100);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}
.postcode-close-btn:hover {
  background: var(--color-slate-200);
  color: var(--text-primary);
}
.postcode-embed {
  flex: 1;
  min-height: 480px;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 768px) {
  .postcode-modal { padding: 0; }
  .postcode-container {
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .postcode-embed { min-height: 0; }
}

/* Form Textarea: §23 표준 (.form-input 합본)에 textarea-only 속성만 추가 */
textarea.form-textarea {
  min-height: 120px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

.form-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* ========================================
   Level Preset Selection (Setup Wizard)
   ======================================== */
.level-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.preset-card {
  cursor: pointer;
  position: relative;
}

.preset-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.preset-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  background: var(--bg-primary);
  border: 2px solid var(--border-default);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.preset-card:hover .preset-card-content {
  border-color: var(--color-primary-300);
  background: var(--bg-hover);
}

.preset-card.selected .preset-card-content {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.preset-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--text-tertiary);
}

.preset-card.selected .preset-icon {
  color: var(--color-primary-600);
}

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

.preset-desc {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Custom Level Type Section */
.custom-level-type-section {
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.level-type-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.level-type-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.level-type-option:hover {
  border-color: var(--color-primary-300);
}

.level-type-option:has(input:checked) {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
}

.level-type-option input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--color-primary-500);
}

.level-type-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.level-type-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  display: block;
  margin-top: 2px;
}

/* Level Preview */
.level-preview-section {
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.level-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.level-preview-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  font-size: 13px;
}

.level-preview-color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.level-preview-name {
  font-weight: 500;
  color: var(--text-primary);
}

.level-preview-sublevel {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 640px) {
  .level-preset-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .preset-card-content {
    padding: 16px 12px;
  }

  .preset-icon {
    width: 40px;
    height: 40px;
  }

  .preset-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* ========================================
   로고 업로드 컴포넌트
   ======================================== */

/* 로고 업로드 영역 */
.logo-upload-area {
  position: relative;
  width: 100%;
  max-width: 200px;
}

/* 설정 페이지용 로고 영역 */
.settings-logo-area {
  max-width: 160px;
}

/* 로고 드롭존 */
.logo-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.logo-dropzone:hover {
  border-color: var(--color-primary-400);
  background: var(--bg-hover);
}

.logo-dropzone.drag-over {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
}

.logo-dropzone svg {
  color: var(--text-tertiary);
}

.logo-dropzone-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
}

.logo-dropzone-hint {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 로고 미리보기 */
.logo-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}

.logo-preview img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: #fff;
}

/* wizard 페이지용 삭제 버튼 */
.logo-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.logo-remove-btn:hover {
  background: var(--status-error);
}

/* 설정 페이지용 액션 버튼 */
.logo-preview-actions {
  display: flex;
  gap: 8px;
}

.logo-preview-actions .btn {
  font-size: 12px;
  padding: 6px 10px;
}

.btn-danger-text {
  color: var(--status-error);
}

.btn-danger-text:hover {
  color: #fff;
  background: var(--status-error);
}

/* 출석 화면 로고 */
.attendance-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.attendance-logo img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 0 30px rgba(5, 150, 105, 0.4),
    0 0 60px rgba(5, 150, 105, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.3);
}

.attendance-logo-name {
  margin-top: 16px;
  font-size: 2.25rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 30px rgba(5, 150, 105, 0.6),
    0 0 60px rgba(5, 150, 105, 0.3);
  letter-spacing: -0.5px;
}

/* 출석 화면 좌우 분할 레이아웃 */
.attendance-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.attendance-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.attendance-brand .attendance-logo {
  margin-bottom: 32px;
}

.attendance-brand .attendance-clock {
  margin-bottom: 8px;
}

.attendance-input-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.attendance-input-area .attendance-input {
  margin-bottom: 16px;
}

.attendance-input-area .attendance-hint {
  margin-bottom: 24px;
}

/* 반응형 - 태블릿 이하에서 세로 배치 */
@media (max-width: 768px) {
  .attendance-layout {
    flex-direction: column;
    gap: 32px;
  }

  .attendance-brand .attendance-logo {
    margin-bottom: 20px;
  }
}

/* 반응형 */
@media (max-width: 640px) {
  .logo-upload-area {
    max-width: 160px;
  }

  .logo-preview img {
    width: 100px;
    height: 100px;
  }

  .logo-dropzone {
    padding: 20px 12px;
  }

  .logo-dropzone svg {
    width: 32px;
    height: 32px;
  }

  .attendance-logo img {
    width: 160px;
    height: 160px;
  }

  .attendance-logo-name {
    font-size: 1.75rem;
  }
}

/* 설정 페이지용 Page Header */
.settings-page-header {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 24px;
}

/* ========================================
   Number Input 스피너 숨기기
   ======================================== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ========================================
   이용권 타입별 그룹 스타일
   ======================================== */
.pass-type-group {
  margin-bottom: 20px;
}

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

.pass-type-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.pass-type-count {
  font-size: 12px;
  color: var(--text-tertiary);
}

.pass-template-detail {
  font-size: 12px;
  color: var(--text-secondary);
}

.pass-template-price {
  font-weight: 600;
  color: var(--text-primary);
}

/* ========================================
   시간 입력 필드 (Time Picker - Slot Machine)
   ======================================== */
.time-picker-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.time-picker-wrapper .time-picker-icon {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--text-tertiary);
  transition: color 0.2s;
  z-index: 1;
}

.time-picker-wrapper .time-picker-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.time-picker-wrapper .time-picker {
  padding-left: 40px !important;
  padding-right: 40px !important;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background-color: var(--bg-secondary);
  transition: all 0.2s;
}

.time-picker-wrapper .time-picker:hover {
  background-color: var(--bg-hover);
  border-color: var(--color-primary-300);
}

.time-picker-wrapper .time-picker:hover ~ .time-picker-icon {
  color: var(--color-primary-500);
}

.time-picker-wrapper .time-picker:focus,
.time-picker-wrapper .time-picker.active {
  background-color: white;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.time-picker-wrapper .time-picker:focus ~ .time-picker-icon,
.time-picker-wrapper .time-picker.active ~ .time-picker-icon {
  color: var(--color-primary-500);
}

/* Time Picker Toggle Button */
.time-picker-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  z-index: 1;
}

.time-picker-toggle:hover {
  background: var(--bg-hover);
  color: var(--color-primary-600);
}

.time-picker-toggle svg {
  width: 16px;
  height: 16px;
}

/* Time Picker Slot Dropdown - fixed 포지션으로 모달 overflow 대응 */
.time-picker-dropdown {
  position: fixed;
  width: 240px;
  background: var(--bg-primary);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 16px;
  z-index: calc(var(--z-modal) + 50);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.time-picker-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.time-slot-machine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 4px;
}

.time-slot-column {
  width: 80px;
  height: 132px;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  cursor: ns-resize;
}

.time-slot-column::before,
.time-slot-column::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 5;
  pointer-events: none;
}

.time-slot-column::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-secondary) 5%, rgba(248,250,252,0));
}

.time-slot-column::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-secondary) 5%, rgba(248,250,252,0));
}

.time-slot-highlight {
  position: absolute;
  top: 50%;
  left: 4px;
  right: 4px;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 8px;
  background: var(--bg-primary);
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1.5px solid var(--border-default);
  transition: all 0.2s;
}

.time-slot-column.focused .time-slot-highlight {
  border-color: var(--color-primary-600);
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15), 0 2px 8px rgba(5, 150, 105, 0.1);
}

.time-slot-track {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.time-slot-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.time-slot-item.center {
  color: var(--text-primary);
  font-weight: 800;
  font-size: 22px;
}

.time-slot-column.focused .time-slot-item.center {
  color: var(--color-primary-600);
}

.time-slot-sep {
  font-size: 24px;
  font-weight: 900;
  color: var(--color-primary-600);
  line-height: 1;
  display: flex;
  align-items: center;
  padding: 0 2px;
  flex-shrink: 0;
}

.time-slot-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
  padding: 0 2px;
}

.time-slot-ok-btn {
  padding: 8px 24px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary-600);
  color: white;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.2s;
}

.time-slot-ok-btn:hover {
  background: var(--color-primary-700);
}

/* ========================================
   100. SIDEBAR NAVIGATION
   ======================================== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-slate-50) 100%);
  border-right: 1px solid var(--border-default);
  z-index: var(--z-sticky);
  transition: transform 0.3s ease;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Sidebar Header (Logo) */
.sidebar-header {
  padding: 20px 20px 16px;
  height: var(--sidebar-header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-default);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  overflow: hidden;
}

.sidebar-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-secondary);
}

.sidebar-logo-text {
  font-size: 17px;
  font-weight: var(--font-bold);
  color: var(--color-slate-800);
  letter-spacing: -0.02em;
  overflow: hidden;
  min-width: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: keep-all;
}

.sidebar-sport-badge {
  padding: 3px 9px;
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  margin-bottom: 2px;
  border-left: 3px solid transparent;
}

.sidebar-nav-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  transform: translateX(2px);
}

.sidebar-nav-item.active {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-weight: var(--font-semibold);
  border-left-color: var(--color-primary-500);
}

.sidebar-nav-item.active:hover {
  transform: none;
}

.sidebar-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Sidebar Section Label — 메뉴 그룹 라벨 (메인 / 이용권 / 관리).
   모바일에선 메인 그룹 메뉴 전체가 hide-on-mobile 처리되므로 "메인" 라벨도 hide-on-mobile. */
.sidebar-section-label {
  font-size: 12px;
  font-weight: var(--font-bold);
  color: var(--text-tertiary);
  letter-spacing: 0.4px;
  padding: 14px 16px 6px;
}

.sidebar-nav > .sidebar-section-label:first-child {
  padding-top: 4px;
}

/* Sidebar Footer 카카오 상담 — `.sidebar-nav-item` 스타일 상속 + 카카오 브랜드 아이콘만 오버라이드 */
.sidebar-consult-item {
  margin-bottom: 8px;
  font-size: 13px;
}

.sidebar-consult-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: #FEE500;
  border-radius: 50%;
  color: #3C1E1E;
}

.sidebar-consult-icon svg {
  width: 12px;
  height: 12px;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border-default);
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-icon-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sidebar-logout-form {
  margin: 0;
  display: flex;
}

.sidebar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.sidebar-icon-btn svg {
  width: 16px;
  height: 16px;
}

.sidebar-icon-btn:hover {
  background: var(--bg-tertiary, rgba(0,0,0,0.04));
  color: var(--text-primary);
}

.sidebar-icon-btn.logout:hover {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.sidebar-power-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-power-btn svg {
  width: 16px;
  height: 16px;
}

.sidebar-power-btn:hover {
  background: var(--status-error-bg);
  color: var(--status-error);
}

/* Sidebar mobile close */
.sidebar-close-mobile {
  display: none;
  position: absolute;
  top: 20px;
  right: -44px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  box-shadow: var(--shadow-md);
}

.sidebar-close-mobile svg {
  width: 20px;
  height: 20px;
}

/* Sidebar Overlay (mobile) */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-sticky) - 1);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   101. TOP HEADER (Sidebar Layout)
   ======================================== */
.top-header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-default);
  padding: 0 32px;
  height: var(--sidebar-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) - 2);
  margin-left: var(--sidebar-width);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

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

.header-breadcrumb-category {
  font-size: 15px;
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

a.header-breadcrumb-category {
  text-decoration: none;
  transition: color 0.15s;
}

a.header-breadcrumb-category:hover {
  color: var(--color-primary-600);
}

.header-breadcrumb-separator {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.header-page-title {
  font-size: 20px;
  font-weight: var(--font-bold);
  color: var(--color-primary-700);
}

.header-mobile-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.header-mobile-menu-btn:hover {
  background: var(--bg-secondary);
}

.header-mobile-menu-btn svg {
  width: 22px;
  height: 22px;
}

/* ========================================
   102. MAIN CONTENT (Sidebar Layout)
   ======================================== */
.main-content {
  margin-left: var(--sidebar-width);
  /* min-height 제거 — 짧은 페이지가 viewport 전체를 그라데이션으로 채우는 "맨 아래 빈 공백" 차단.
     body bg(slate-50) 가 canvas 로 propagate 되어 viewport 잔여 영역은 자연스러운 중립톤이 깔린다. */
  background: var(--bg-gradient-page);
  background-attachment: fixed;
}

/* ========================================
   103. SIDEBAR RESPONSIVE (768px)
   ======================================== */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: var(--z-overlay);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-close-mobile {
    display: flex;
  }

  .sidebar-overlay.active {
    display: block;
  }

  .main-content {
    margin-left: 0;
  }

  .header-mobile-menu-btn {
    display: flex;
  }

  .top-header {
    margin-left: 0;
    padding: 0 16px;
    height: auto;
    min-height: 56px;
  }

  .header-page-title {
    font-size: 17px;
  }

  .header-breadcrumb-category {
    font-size: 13px;
  }

  .header-breadcrumb-separator {
    width: 14px;
    height: 14px;
  }
}

/* ╔══════════════════════════════════════════╗
   ║  PREMIUM REDESIGN - Visual Upgrade      ║
   ║  글래스모피즘 · 마이크로인터랙션 · 다크모드  ║
   ╚══════════════════════════════════════════╝ */

/* ========================================
   R1. ANIMATION KEYFRAMES
   ======================================== */

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: var(--glow-primary-sm); }
  50% { box-shadow: var(--glow-primary-lg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}


@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes borderGlow {
  0%, 100% { border-color: var(--color-primary-200); }
  50% { border-color: var(--color-primary-400); }
}

@keyframes countPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes slideIndicator {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

/* ========================================
   R2. ANIMATION UTILITY CLASSES
   ======================================== */
.animate-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp var(--duration-medium) var(--ease-out-expo) forwards;
}

.animate-in-down {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInDown var(--duration-medium) var(--ease-out-expo) forwards;
}

.animate-in-left {
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeInLeft var(--duration-medium) var(--ease-out-expo) forwards;
}

.animate-in-right {
  opacity: 0;
  transform: translateX(20px);
  animation: fadeInRight var(--duration-medium) var(--ease-out-expo) forwards;
}

.animate-scale-in {
  opacity: 0;
  transform: scale(0.9);
  animation: scaleIn var(--duration-medium) var(--ease-spring) forwards;
}

/* Stagger delays for children */
.stagger > *:nth-child(1) { animation-delay: calc(var(--stagger-delay) * 1); }
.stagger > *:nth-child(2) { animation-delay: calc(var(--stagger-delay) * 2); }
.stagger > *:nth-child(3) { animation-delay: calc(var(--stagger-delay) * 3); }
.stagger > *:nth-child(4) { animation-delay: calc(var(--stagger-delay) * 4); }
.stagger > *:nth-child(5) { animation-delay: calc(var(--stagger-delay) * 5); }
.stagger > *:nth-child(6) { animation-delay: calc(var(--stagger-delay) * 6); }
.stagger > *:nth-child(7) { animation-delay: calc(var(--stagger-delay) * 7); }
.stagger > *:nth-child(8) { animation-delay: calc(var(--stagger-delay) * 8); }
.stagger > *:nth-child(9) { animation-delay: calc(var(--stagger-delay) * 9); }
.stagger > *:nth-child(10) { animation-delay: calc(var(--stagger-delay) * 10); }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-long) var(--ease-out-expo),
              transform var(--duration-long) var(--ease-out-expo);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-in, .animate-in-down, .animate-in-left, .animate-in-right, .animate-scale-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .stagger > * { animation-delay: 0s !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   R3. GLASS MORPHISM UTILITIES
   ======================================== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-xl);
}

/* ========================================
   R4. ENHANCED SIDEBAR (Glassmorphism)
   ======================================== */
.sidebar {
  background: var(--sidebar-bg);
  border-right-color: var(--sidebar-border);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

.sidebar-header {
  background: var(--sidebar-bg);
  border-bottom-color: var(--sidebar-border);
}

.nav-item:hover .nav-icon {
  transform: translateX(2px);
  transition: transform 0.25s var(--ease-spring);
}

.nav-item.active .nav-icon {
  transform: scale(1.1);
}

/* Sidebar footer refined */
.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--sidebar-border);
  background: transparent;
}

/* ========================================
   R5. ENHANCED TOP HEADER (Scroll Blur)
   ======================================== */
.top-header {
  transition: all 0.3s ease;
  background: var(--bg-primary);
}

.top-header.scrolled {
  background: var(--surface-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* ========================================
   R6. ENHANCED CARDS (D. MONO CONCIERGE 통합 2026-05-15)
   .card-footer 회색 배경 override 제거 — D 는 흰 footer + hairline divider.
   ======================================== */

/* Stat cards — D. MONO CONCIERGE: hairline + accent. lift/shadow 제거 */
.stat-card {
  background: var(--card-bg);
  border-color: #eaecef;
  transition: border-color 0.2s ease;
}

.stat-card:hover {
  border-color: #d8dde3;
}

.stat-card:hover .stat-icon {
  transform: scale(1.12) rotate(-5deg);
}

.stat-value {
  transition: color 0.3s ease;
}

/* ========================================
   R7. ENHANCED BUTTONS (Ripple + Glow)
   ======================================== */

/* Ripple effect on click */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}

/* Glass button variant */
.btn-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}

.btn-glass:hover:not(:disabled) {
  background: var(--surface-1);
  box-shadow: var(--glass-shadow);
  transform: translateY(-1px);
}

/* ========================================
   R8. ENHANCED TABLES (D. MONO CONCIERGE 통합 2026-05-15)
   기존 그라데이션 th + emerald row hover override 제거 — 섹션 28(.table)의 D 정의가 단일 진실.
   ======================================== */
.table tbody tr {
  transition: background-color 0.15s ease;
  position: relative;
}

/* ========================================
   R9. ENHANCED FORMS (Focus Glow)
   ======================================== */
.form-input:focus,
.form-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12), 0 2px 8px rgba(5, 150, 105, 0.08);
}

.form-input.shake-invalid,
.form-textarea.shake-invalid,
.form-select.shake-invalid {
  animation: shakeInvalid 0.4s ease;
}

@keyframes shakeInvalid {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(2px); }
}

/* ========================================
   R10. ENHANCED MODALS (Glass + Anim)
   ======================================== */
.modal-overlay .modal {
  background: var(--card-bg);
  transition: transform 0.35s var(--ease-spring), opacity 0.35s ease;
}

.modal-overlay.show .modal {
  transform: scale(1) translateY(0);
}

.modal-overlay .modal-header {
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--card-bg) 100%);
  border-bottom-color: var(--card-border);
}

.modal-overlay .modal-footer {
  background: var(--card-header-bg);
  border-top-color: var(--card-border);
}

/* ========================================
   R11. ENHANCED TOASTS (Progress Bar)
   ======================================== */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 0;
  height: 2px;
  animation: toastProgress 10s linear forwards;
}

/* 모바일에서는 진행바 가시성 보강 (작은 화면에서 2px는 잘 안 보임) */
@media (max-width: 768px) {
  .toast-progress {
    height: 3px;
  }
}

.toast-success .toast-progress,
.toast-info .toast-progress { background: var(--status-success); }
.toast-error .toast-progress,
.toast-warning .toast-progress { background: var(--status-error); }

/* ========================================
   R12. ENHANCED BADGES
   ======================================== */

/* ========================================
   R13. ERROR PAGES - Pastel Number Card
   ======================================== */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0fdf4 0%, var(--color-slate-50) 100%);
  padding: 2rem;
}

.error-page .error-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  padding: 56px 44px 44px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.error-page .error-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.error-card-404::before {
  background: var(--color-primary-600);
}

.error-card-403::before {
  background: var(--color-slate-600);
}

.error-card-500::before {
  background: #dc2626;
}

.error-card-generic::before {
  background: var(--color-slate-600);
}

.error-number {
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
  letter-spacing: -3px;
}

.error-text {
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
  letter-spacing: -2px;
}

.error-number-404 {
  background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-200) 50%, var(--color-primary-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.error-number-403 {
  background: linear-gradient(135deg, var(--color-slate-300) 0%, var(--color-slate-400) 50%, var(--color-slate-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.error-number-500 {
  background: linear-gradient(135deg, var(--color-slate-300) 0%, var(--color-slate-400) 50%, var(--color-slate-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.error-text-generic {
  background: linear-gradient(135deg, var(--color-slate-300) 0%, var(--color-slate-400) 50%, var(--color-slate-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.error-number-generic {
  background: linear-gradient(135deg, var(--color-slate-300) 0%, var(--color-slate-400) 50%, var(--color-slate-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.error-page .error-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.error-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.error-message {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
}

.error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 좁은 모바일에서 버튼 가로 배치 시 터치 타겟 좁아짐 방지 */
@media (max-width: 480px) {
  .error-actions { flex-direction: column; }
  .error-actions .btn { width: 100%; }
}

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

.error-footer a {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.2s;
}

.error-footer a:hover {
  color: var(--color-primary-600);
}

/* 에러 ID — 예상치 못한 500/DataIntegrity 에러에서만 노출 (문의용 추적 번호) */
.error-id {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.error-id-label {
  font-weight: 600;
  color: var(--text-tertiary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.error-id-value {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  user-select: all;
}

.error-id-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-basis: 100%;
}

/* ========================================
   R13.5 LINK SHARE MODAL — 토큰/링크 공유 모달 공통 컴포넌트
   ----------------------------------------
   사용처: 사범 초대 링크(admin/admins.html), 관장 OAuth 복구(system/tenants/detail.html)
   기타 미래의 "토큰 발급 → 링크 표시 → 복사 → 닫기" 플로우 일체에 재사용
   ======================================== */
.invite-link-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.invite-link-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.invite-link-modal {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 28px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.invite-link-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.invite-link-modal-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
  line-height: 1.5;
}
.invite-link-modal-desc strong {
  color: var(--color-primary-700);
  font-weight: 700;
}
.invite-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
}
.invite-link-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  word-break: break-all;
  line-height: 1.4;
  font-family: 'SF Mono', Monaco, monospace;
}
.invite-link-copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-primary-600);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.invite-link-copy-btn:hover {
  background: var(--color-primary-700);
}
.invite-link-modal-footer {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .invite-link-modal {
    max-width: calc(100vw - 32px);
    margin: 16px;
  }
}

/* ========================================
   R14. LANDING PAGE ENHANCEMENTS
   ======================================== */
.landing-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.landing-hero-bg .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float 8s ease-in-out infinite;
}

.landing-hero-bg .orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(5, 150, 105, 0.2);
  top: -100px;
  right: -100px;
  animation-delay: 0s;
}

.landing-hero-bg .orb-2 {
  width: 300px;
  height: 300px;
  background: rgba(20, 184, 166, 0.15);
  bottom: -50px;
  left: -50px;
  animation-delay: -3s;
}

.landing-hero-bg .orb-3 {
  width: 200px;
  height: 200px;
  background: rgba(251, 191, 36, 0.12);
  top: 40%;
  left: 30%;
  animation-delay: -5s;
}

/* Gradient text */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-gold {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 50%, var(--color-primary-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   R15. AUTH PAGE ENHANCEMENTS
   ======================================== */
.auth-right .geo-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 40px 40px, 60px 60px;
  pointer-events: none;
}

/* ========================================
   R16. TENANT SWITCHER (Sidebar)
   ======================================== */
.sidebar-tenant-switcher {
  padding: 0 12px 8px;
  position: relative;
}

.tenant-switcher-current {
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-switcher-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.tenant-switcher-btn:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.tenant-switcher-arrow {
  transition: transform var(--transition-fast);
}

.tenant-switcher-dropdown.show ~ .tenant-switcher-btn .tenant-switcher-arrow,
.tenant-switcher-btn:focus .tenant-switcher-arrow {
  transform: rotate(180deg);
}

.tenant-switcher-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 12px;
  right: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.tenant-switcher-dropdown.show {
  display: block;
  animation: fadeInUp 0.15s ease;
}

.tenant-switcher-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  font-family: inherit;
}

.tenant-switcher-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.tenant-switcher-item.active {
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
  font-weight: var(--font-semibold);
}

.tenant-switcher-item-name {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tenant-switcher-item-badge {
  font-size: 11px;
  padding: 2px 6px;
}

.tenant-switcher-divider {
  height: 1px;
  background: var(--border-default);
  margin: 4px 0;
}

.tenant-switcher-dashboard {
  color: var(--accent-primary);
  gap: 6px;
}

.tenant-switcher-dashboard:hover {
  color: var(--accent-primary-hover);
}

.badge-sm {
  font-size: 11px;
  padding: 2px 6px;
}

/* ===== Subscription Expiry Warning Banner (Brand Mono — Slate neutral) ===== */
.subscription-expiry-banner {
  background: var(--color-slate-700);
  color: #fff;
  padding: 10px 20px;
}

.subscription-expiry-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.subscription-expiry-banner-content svg {
  flex-shrink: 0;
}

.subscription-expiry-banner .btn-sm {
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.subscription-expiry-banner .btn-sm:hover {
  background: rgba(255, 255, 255, 0.35);
  text-decoration: none;
}

/* ===== Subscription Suspended Banner (결제 실패 / 운영자 강제 정지) =====
   reasonType=BILLING: Red 그라데이션 + "결제수단 재등록" CTA (기본 .subscription-suspended-banner)
   reasonType=SYSTEM:  Slate 그라데이션 + 안내만 (.subscription-suspended-banner--system)
*/
.subscription-suspended-banner {
  background: #dc2626;
  color: #fff;
  padding: 12px 20px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.subscription-suspended-banner--system {
  background: var(--color-slate-600);
  box-shadow: 0 2px 8px rgba(51, 65, 85, 0.25);
}

.subscription-suspended-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  flex-wrap: wrap;
}

.subscription-suspended-banner-content svg {
  flex-shrink: 0;
}

.subscription-suspended-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.35;
}

.subscription-suspended-text strong {
  font-weight: 700;
  font-size: 14px;
}

.subscription-suspended-text span {
  font-size: 12px;
  opacity: 0.92;
}

.subscription-suspended-banner .btn-danger-solid {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  color: #dc2626;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.subscription-suspended-banner .btn-danger-solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

@media (max-width: 640px) {
  .subscription-suspended-banner-content {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .subscription-suspended-text {
    align-items: center;
  }
}

/* ========================================
   STATUS BANNERS
   4 tones: success / warning / error / info
   Usage: <div class="status-banner status-banner--{tone}">...</div>
   Link color auto-follows banner tone via currentColor.
   ======================================== */
.status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 14px;
}

.status-banner svg {
  flex-shrink: 0;
}

.status-banner a {
  color: currentColor;
  font-weight: 700;
}

/* Loading Overlay (Loading.show/hide) */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.loading-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.loading-overlay .loading-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loadingSpin 0.8s linear infinite;
}

@keyframes loadingSpin {
  to { transform: rotate(360deg); }
}

.status-banner a:hover {
  opacity: 0.75;
}

.status-banner--success {
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
  color: var(--status-success-text);
}
.status-banner--success svg {
  stroke: var(--status-success);
}

.status-banner--warning {
  background: var(--status-warning-bg);
  border-color: var(--status-warning-border);
  color: var(--status-warning-text);
}
.status-banner--warning svg {
  stroke: var(--status-warning);
}

.status-banner--error {
  background: var(--status-error-bg);
  border-color: var(--status-error-border);
  color: var(--status-error-text);
}
.status-banner--error svg {
  stroke: var(--status-error);
}

.status-banner--info {
  background: var(--status-info-bg);
  border-color: var(--status-info-border);
  color: var(--status-info-text);
}
.status-banner--info svg {
  stroke: var(--status-info);
}

/* Download Dropdown Menu */
.download-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  z-index: var(--z-dropdown);
}

.download-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  text-align: left;
  transition: background var(--transition-fast);
}

.download-menu-item:first-child {
  border-radius: 8px 8px 0 0;
}

.download-menu-item:last-child {
  border-radius: 0 0 8px 8px;
  border-top: 1px solid var(--bg-tertiary);
}

.download-menu-item:hover {
  background: var(--bg-tertiary);
}

/* Readonly Input */
.input-readonly {
  cursor: pointer;
  background: var(--bg-secondary);
}

/* Form Input Small — frontend-guide §23 입력 컨트롤 높이 표준 (변형 표) */
.form-input-sm {
  padding: 8px 12px !important;
  font-size: var(--text-sm) !important;
  min-height: 36px !important;
  border-radius: var(--radius-md) !important;
}

/* Mobile: prevent iOS Safari auto-zoom on focus (requires >= 16px font-size) */
@media (max-width: 768px) {
  .form-input-sm,
  .ios-item-input,
  input.form-input-sm,
  input.ios-item-input,
  select.form-input-sm,
  textarea.form-input-sm {
    font-size: 16px !important;
  }
}

/* PWA Install Banner — member layout 하단 sticky 배너 */
.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: 16px;
  background: var(--bg-primary, #fff);
  border-top: 1px solid var(--border-default);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
.pwa-install-banner[hidden] { display: none; }
.pwa-install-banner-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pwa-install-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}
.pwa-install-banner-text { flex: 1; min-width: 0; }
.pwa-install-banner-title {
  font-weight: var(--font-bold, 700);
  font-size: 15px;
  color: var(--text-primary);
}
.pwa-install-banner-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.pwa-install-banner-close {
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pwa-install-banner-close:hover { color: var(--text-secondary); }

/* PWA Install Banner 노출 시 하단 콘텐츠 가림 방지 */
body.has-pwa-banner .main-wrapper {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ========================================
   MEMBER PORTAL - Mobile App Frame
   ======================================== */
.member-portal {
  background: var(--color-slate-100);
}

.member-portal .top-nav {
  max-width: 480px;
  margin: 0 auto;
  border-bottom: none;
  background: var(--bg-primary);
}

.member-portal .main-wrapper {
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-primary);
  min-height: calc(100vh - var(--top-nav-height));
}

.member-portal .page-container {
  max-width: 100%;
  padding: 20px 20px;
}

@media (min-width: 481px) {
  .member-portal .main-wrapper {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  }
}

@media (max-width: 480px) {
  .member-portal .top-nav {
    padding: 0 14px;
    height: 52px;
  }
  .member-portal .brand-name {
    font-size: 18px;
  }
  .member-portal .main-wrapper {
    min-height: calc(100vh - 52px);
  }
  .member-portal .page-container {
    padding: 16px 14px;
  }
}

/* ============================================================
   Settlement status banner (admin/settings/index.html)
   ============================================================ */
.settlement-status-banner {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
  font-size: 13px;
  font-weight: var(--font-medium);
  display: flex;
  align-items: center;
  gap: 8px;
}
.settlement-status-banner--warning {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}
.settlement-status-banner--success {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}
.settlement-status-banner--error {
  background: var(--status-error-bg);
  color: var(--status-error-text);
}

/* ============================================================
   System admin layout — desktop-only block notice on mobile
   moved from templates/layout/system.html inline <style>
   ============================================================ */
.system-mobile-block { display: none; }
@media (max-width: 1279px) {
  body.system-admin .sidebar,
  body.system-admin .main-content { display: none !important; }
  .system-mobile-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 24px;
    text-align: center;
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--bg-secondary) 100%);
  }
  .system-mobile-block .mb-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--status-success-bg);
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .system-mobile-block h1 {
    font-size: 20px;
    font-weight: var(--font-bold);
    color: var(--color-slate-900);
    margin: 0 0 8px;
  }
  .system-mobile-block p {
    font-size: 14px;
    color: var(--color-slate-500);
    margin: 0 0 24px;
    line-height: 1.6;
  }
  .system-mobile-block a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    background: var(--color-primary-600);
    color: #fff;
    font-weight: var(--font-semibold);
    font-size: 14px;
  }
}

/* ============================================================
   Member import upload (admin/member-import.html)
   moved from template inline <style>
   ============================================================ */
.import-upload-container {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 0;
}
.import-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  border: 2px dashed var(--color-slate-300);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.8) 100%);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.import-dropzone:hover {
  border-color: var(--color-primary-600);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(5, 150, 105, 0.08) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.15);
}
.import-dropzone:hover svg { color: var(--color-primary-600); }
.import-dropzone.drag-over {
  border-color: var(--color-primary-600);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.12) 100%);
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(5, 150, 105, 0.2);
}
.import-dropzone-text {
  font-size: 16px;
  font-weight: var(--font-bold);
  color: var(--color-slate-600);
  margin: 16px 0 6px;
}
.import-dropzone-hint {
  font-size: 13px;
  color: var(--color-slate-400);
  font-weight: var(--font-medium);
}
.import-uploaded-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  border-radius: 12px;
}
.import-uploaded-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.import-uploaded-name {
  font-size: 15px;
  font-weight: var(--font-semibold);
  color: var(--color-slate-800);
}
.import-uploaded-status {
  font-size: 13px;
  color: var(--color-primary-600);
  font-weight: var(--font-medium);
  margin-top: 2px;
}
.import-uploaded-notice {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-primary-600);
  font-weight: var(--font-semibold);
}
@media (max-width: 640px) {
  .import-upload-container {
    max-width: 100%;
    padding: 20px 0;
  }
  .import-dropzone { padding: 36px 16px; }
  .import-dropzone svg { width: 40px; height: 40px; }
  .import-dropzone-text { font-size: 14px; }
  .import-dropzone-hint { font-size: 12px; }
  .import-uploaded-card { padding: 16px; gap: 12px; }
  .import-uploaded-icon { width: 40px; height: 40px; }
  .import-uploaded-name { font-size: 14px; }
}

/* ================================================================
   R17. BILLING SNAPSHOT (구독 결제 미리보기 + 내역)
   - 구독 설정 페이지 (/admin/settings/subscription)
   - Brand Mono: slate neutral + emerald accent
   ================================================================ */

.billing-preview-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 3px 0 0;
}

/* 상태 뱃지 — 확정(결제 예정) */
.billing-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-slate-100);
  color: var(--color-slate-700);
  white-space: nowrap;
}
/* 미리보기 카드 내부 — 카드 자체가 컨테이너. inner 박스 별도 배경/테두리 없음 */
.billing-preview-inner {
  background: transparent;
  border: 0;
  padding: 0;
}

/* 구간 뱃지 (결제 내역 · 미리보기 공용) */
.billing-tier-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

/* 결제 내역 테이블 */
.billing-history-table th,
.billing-history-table td {
  white-space: nowrap;
}
.billing-history-amount {
  font-weight: 700;
  color: var(--text-primary);
}

/* 결제 내역 상태 뱃지 */
.billing-row-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}
.billing-row-status.is-applied {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}
.billing-row-status.is-canceled {
  background: var(--color-slate-50);
  color: var(--color-slate-500);
  border: 1px dashed var(--color-slate-200);
}

/* 결제 내역 — 모바일 카드 리스트 (admin/payments/history.html 의 payment-card-list 패턴 통일) */
.billing-history-cards-mobile { display: none; }
@media (max-width: 768px) {
  .billing-history-desktop { display: none; }
  .billing-history-cards-mobile { display: block; }
}

.billing-card-list {
  display: flex;
  flex-direction: column;
}
.billing-card-row {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.billing-card-row:last-child { border-bottom: none; }

.billing-card-main { flex: 1 1 auto; min-width: 0; }
.billing-card-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.billing-card-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.billing-card-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-slate-300);
  flex-shrink: 0;
}
.billing-card-amount-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.billing-card-amount {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-primary-700);
  white-space: nowrap;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.billing-card-amount-col .billing-row-status {
  margin-top: 6px;
  padding: 1px 8px;
  border-radius: 999px;
}

/* ========================================
   R14. BRAND MONO SIGNATURE ACCENT (2026-05-14 → 2026-05-15 D 통합)
   2026-05-15: D. MONO CONCIERGE 박제로 .card-title::before / .card-header
   재정의 제거. 섹션 6 의 D 정의가 단일 진실. 여기엔 폼/섹션 타이틀 accent 만 유지.
   ======================================== */

/* 폼/하위 섹션 타이틀 — 블록 엘리먼트라 absolute ::before, D spec(4×14 solid) 적용 */
.subsection-title,
.form-section-title {
  position: relative;
  padding-left: 12px;
}
.subsection-title::before,
.form-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  background: var(--color-primary-600);
  border-radius: 2px;
}

/* pg-head 하단 보더 — 단색 그레이 → 에메랄드 페이드 그라데이션 라인 */
.pg-head {
  border-bottom: none;
  background-image: linear-gradient(
    90deg,
    var(--color-primary-500) 0%,
    var(--color-primary-400) 60px,
    var(--color-primary-200) 120px,
    var(--border-default) 220px,
    var(--border-default) 100%
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

/* 메인 페이지 헤더(.page-header > .page-title) 하단 짧은 에메랄드 액센트 */
.page-header > .page-title {
  position: relative;
  padding-bottom: 8px;
}
.page-header > .page-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-700));
  border-radius: 1px;
}

/* 다크 테마 — 카드 헤더 틴트는 너무 어두워지지 않도록 제거 */
[data-theme="dark"] .card-header {
  background: var(--card-header-bg);
}