/* ============================================================
   OceanKids 수영교실 관리 시스템 - 통합 디자인 시스템 (style.css)
   ============================================================

   관리자(데스크톱) + 학부모(모바일) 테마를 통합한 CSS 파일입니다.

   구성 목차:
     1.  CSS 변수 (Design Tokens) - 테마 컬러, 레이아웃, 그림자, 폰트
     2.  리셋 및 기본 스타일 - box-sizing, body, 스크롤바
     3.  관리자 레이아웃 - 사이드바 + 메인 콘텐츠 + 상단바
     4.  공통 UI 컴포넌트 - 버튼, 카드, 통계, 알림, 뱃지, 탭, 폼, 테이블, 페이지네이션
     5.  스케줄 그리드 (시간표) - 주간/월간 캘린더, 수업 블록, 출석 도트
     6.  모달 (오버레이/드래그/리사이즈) - 레이어팝업 시스템
     7.  출석 관련 UI - 출석 카드, 상태 칩, 버튼 그룹
     8.  보강 관리 UI - 보강 카드, 가용 슬롯 그리드
     9.  수납/결제 UI - 결제 상태 뱃지
    10.  학부모 포털 레이아웃 - 모바일 퍼스트, 하단 네비게이션
    11.  알림/게시판 UI - 알림 목록, FAQ 아코디언, 공지사항
    12.  프로필 - 프로필 헤더, 메뉴 리스트
    13.  로그인/인증 - 관리자/학부모 로그인 화면
    14.  유틸리티 클래스 - flex, gap, margin, padding 등 헬퍼
    15.  반응형 대응 - 태블릿(1024px), 모바일(640px), 인쇄

   ============================================================ */

/* ── 1. CSS 변수 (Design Tokens) ──
   전체 시스템에서 사용하는 색상, 레이아웃 크기, 그림자, 폰트 등의
   디자인 토큰을 CSS Custom Properties로 정의합니다.
   테마 변경 시 이 섹션의 값만 수정하면 전체 시스템에 반영됩니다. */
:root {
  /* 관리자 테마 컬러 (네이비 사이드바) */
  --navy: #1a2744;
  --navy2: #243057;
  --navy3: #2e3d6b;
  --navy5: #6b7db8;
  --blue: #3b5de7;
  --blue-light: #eef1fd;
  --blue-mid: #d0d9f8;

  /* 학부모 테마 컬러 (모바일 퍼스트) */
  --primary: #4F80FF;
  --primary-light: #EEF3FF;
  --primary-dark: #3360DD;

  /* 상태 컬러 */
  --ok: #22c55e;
  --ok-bg: #dcfce7;
  --danger: #ef4444;
  --danger-bg: #fee2e2;
  --warn: #f59e0b;
  --warn-bg: #fef3c7;
  --purple: #8b5cf6;
  --purple-bg: #ede9fe;
  --teal: #00C9A7;
  --amber: #FFB830;
  --accent: #FF6B6B;

  /* 기본 UI 컬러 */
  --bg: #f6f7f9;
  --white: #ffffff;
  --text: #1e293b;
  --text2: #5C607A;
  --text3: #9EA3B8;
  --muted: #64748b;
  --border: #e2e8f0;

  /* 레이아웃 */
  --sidebar-width: 220px;
  --topbar-height: 56px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-sm: 6px;

  /* 그림자 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
  --shadow-modal: 0 24px 64px rgba(0,0,0,.18);

  /* 폰트 (핸드오프 테마: Pretendard 우선 적용) */
  --font: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 핸드오프 디자인 테마 토큰 — 화이트 사이드바/상단바, 블랙 강조 */
  --admin-black: #222222;
  --admin-text: #212529;
  --admin-muted: #6b7280;
}


/* ── 2. 리셋 및 기본 스타일 ──
   브라우저 기본 스타일을 초기화하고, body/링크/버튼/입력 필드의
   기본 폰트 및 색상을 설정합니다. 웹킷 스크롤바도 커스텀 스타일링합니다. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: var(--font);
  cursor: pointer;
}

input, select, textarea {
  font-family: var(--font);
}

/* 스크롤바 스타일링 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1c8d4; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0a8b8; }


/* ============================================================
   3. 관리자 레이아웃 (Desktop: 사이드바 + 메인)
   ============================================================
   관리자/원장/인포/강사용 데스크톱 레이아웃입니다.
   좌측 네이비 사이드바(190px)와 우측 메인 콘텐츠 영역으로 구성됩니다.
   사이드바는 접기(folded) 상태를 지원하며, 52px로 축소됩니다.
   ============================================================ */

/* 전체 래퍼: 사이드바 + 메인 수평 배치 (flex 기반) */
.app-wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;
}


/* ── 3-1. 사이드바 ── */
.sidebar {
  width: var(--sidebar-width);
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  transition: width .25s ease;
  z-index: 50;
}

/* ── 사이드바 접기 상태 ── */
.sidebar.folded {
  width: 56px;
}
.sidebar.folded .sidebar-logo {
  justify-content: center;
  padding: 14px 0;
  position: relative;
}
/* 접힌 상태: 텍스트 숨김 (메뉴명 약칭 .nav-abbr 만 표시) */
.sidebar.folded .sidebar-logo > div:not(.logo-dot),
.sidebar.folded .nav-item span:not(.nav-icon):not(.nav-abbr),
.sidebar.folded .sb-sec-title,
.sidebar.folded .nav-toggle-arrow,
.sidebar.folded .tc-chip span:not(.dot),
.sidebar.folded .tc-cnt,
.sidebar.folded .logout-btn span:not(.nav-icon):not(.nav-abbr) {
  display: none;
}
/* 접힌 상태: 사이드바 오른쪽 가장자리에 반쯤 튀어나오는 플로팅 토글 버튼 */
.sidebar.folded .sidebar-fold-btn {
  position: fixed;
  left: 42px;
  top: 14px;
  margin-left: 0;
  z-index: 1001;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--admin-muted);
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
  transition: all .2s ease;
}
.sidebar.folded .sidebar-fold-btn:hover {
  background: var(--admin-black);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 2px 2px 12px rgba(0,0,0,.28);
}
.sidebar.folded .sidebar-fold-btn .fold-icon {
  width: 14px;
  height: 14px;
}

/* 접힌 상태: 그룹 토글 → 구분선으로 변환 (텍스트 숨김, 클릭 비활성화) */
.sidebar.folded .nav-group-toggle {
  padding: 0;
  margin: 6px 10px 4px;
  width: calc(100% - 20px);
  height: 1px;
  min-height: 1px;
  border: none;
  background: var(--border);
  pointer-events: none;
  cursor: default;
  position: relative;
  overflow: visible;
}
.sidebar.folded .nav-group-toggle span:first-child {
  display: none;
}
/* 접힌 상태: 그룹 구분선 호버 시 툴팁 */
.sidebar.folded .nav-group-toggle::after {
  content: attr(data-group);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 14px;
  background: #2d3a5c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 200;
}
/* 툴팁 화살표 */
.sidebar.folded .nav-group-toggle::before {
  content: '';
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #2d3a5c;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 201;
}
.sidebar.folded .nav-group-toggle:hover::after,
.sidebar.folded .nav-group-toggle:hover::before {
  opacity: 1;
}
.sidebar.folded .nav-group-toggle:hover {
  background: #cbd5e1;
  height: 2px;
}

/* 접힌 상태: 하위 메뉴 강제 펼침 (모든 아이콘 접근 가능) */
.sidebar.folded .nav-group-body {
  max-height: 2000px !important;
}
.sidebar.folded .nav-group-body.collapsed {
  max-height: 2000px !important;
}
/* 접힌 상태: 서브메뉴(정산 관리 등)도 강제 펼침 */
.sidebar.folded .nav-sub-items {
  max-height: 600px !important;
}

/* 접힌 상태: 네비게이션 좌우 여백 축소 (아이콘 중앙 정렬 공간 확보) */
.sidebar.folded .sidebar-nav { padding: 8px 4px; }

/* 접힌 상태: 메뉴 아이템/칩 중앙 정렬 */
.sidebar.folded .nav-item,
.sidebar.folded .tc-chip {
  justify-content: center;
  padding: 8px 0;
  position: relative;
  border-radius: 8px;
  margin: 1px 8px;
  width: calc(100% - 16px);
}
.sidebar.folded .nav-item:hover {
  background: #f3f4f6;
}
.sidebar.folded .nav-item.active {
  background: #111827;
  box-shadow: none;
}

/* 접힌 상태: 텍스트 노드 누락 방지 (font-size:0 → nav-icon만 표시) */
.sidebar.folded .nav-item,
.sidebar.folded .logout-btn {
  font-size: 0;
}
/* 접힌 상태: 이모지 아이콘 숨김 + 메뉴명 약칭(앞 2글자) 노출 */
.sidebar.folded .nav-icon {
  display: none;
}
.sidebar.folded .nav-abbr {
  display: block;
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
}

/* 접힌 상태: 호버 시 라벨 툴팁 (어떤 메뉴인지 안내) */
.sidebar.folded .nav-item::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 14px;
  background: #2d3a5c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 200;
}
/* 툴팁 화살표 (삼각형) */
.sidebar.folded .nav-item::before {
  content: '';
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #2d3a5c;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 201;
}
.sidebar.folded .nav-item:hover::after,
.sidebar.folded .nav-item:hover::before {
  opacity: 1;
}

/* 접힌 상태: 로그아웃 버튼 중앙 + 툴팁 */
.sidebar.folded .logout-btn {
  justify-content: center;
  position: relative;
  padding: 8px 0;
  margin: 0 8px;
  border-radius: 8px;
}
.sidebar.folded .logout-btn::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 14px;
  background: #2d3a5c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 200;
}
.sidebar.folded .logout-btn::before {
  content: '';
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #2d3a5c;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 201;
}
.sidebar.folded .logout-btn:hover::after,
.sidebar.folded .logout-btn:hover::before {
  opacity: 1;
}
.sidebar.folded .logout-btn:hover {
  background: rgba(239,68,68,.15);
}

/* 사이드바 로고 영역 (핸드오프 테마: 화이트 + 블랙 로고) */
.sidebar-logo {
  padding: 0 16px;
  height: var(--topbar-height);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-dot {
  width: 32px;
  height: 32px;
  background: var(--admin-black);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.logo-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--admin-black);
  line-height: 1.2;
}

/* 사이드바 접기/펼치기 버튼 (펼친 상태) */
.sidebar-fold-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--admin-muted);
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  flex-shrink: 0;
}
.sidebar-fold-btn:hover {
  color: var(--admin-black);
  background: #f3f4f6;
  transform: scale(1.08);
}
.sidebar-fold-btn:active {
  transform: scale(.95);
}
/* SVG 아이콘 */
.sidebar-fold-btn .fold-icon {
  width: 16px;
  height: 16px;
  transition: transform .25s ease;
}

/* 사용자 아바타 (상단바·프로필 화면 공용) */
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--admin-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* 사이드바 네비게이션 */
.sidebar-nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* 화이트 사이드바용 라이트 스크롤바 */
.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 네비게이션 섹션 타이틀 */
.sb-sec-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--admin-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 8px 6px;
}

/* 네비게이션 아이템 */
.sidebar-nav .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin: 0 0 2px;
  border-radius: 8px;
  color: var(--admin-text);
  font-size: 14px;
  font-weight: 500;
  transition: all .15s;
  cursor: pointer;
}
.sidebar-nav .nav-item:hover {
  background: #f3f4f6;
  color: var(--admin-text);
}
.sidebar-nav .nav-item.active {
  background: #111827;
  color: #fff;
  font-weight: 600;
}
.nav-icon {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}
/* 펼친 상태: 일반 메뉴 항목의 이모지 아이콘 숨김 (서브메뉴 불릿 •은 유지) */
.sidebar:not(.folded) .nav-item:not(.nav-sub) .nav-icon,
.sidebar:not(.folded) .logout-btn .nav-icon {
  display: none;
}
/* 메뉴명 약칭(앞 2글자): 접힘 상태 전용 — 펼친 상태에서는 숨김 */
.nav-abbr {
  display: none;
}

/* 네비게이션 그룹 (아코디언) */
/* 그룹 헤더(경영/운영/소통): 옅은 배경 박스로 일반 메뉴와 구분 */
.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 12px 0 6px;
  padding: 9px 12px;
  background: #eef1f5;
  border: none;
  border-radius: 6px;
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.nav-group-toggle:hover {
  background: #e4e8ee;
}
.nav-toggle-arrow {
  font-size: 13px;
  color: var(--admin-muted);
  transition: transform .2s;
}
.nav-group-toggle.collapsed .nav-toggle-arrow {
  transform: rotate(-90deg);
}
.nav-group-body {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height .25s ease;
}
.nav-group-body.collapsed {
  max-height: 0;
}

/* 2depth 서브메뉴 (정산 관리 등) */
.nav-sub-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.nav-sub-items.open {
  max-height: 600px;
}
.nav-item.nav-sub {
  padding-left: 30px;
  font-size: 12.5px;
}

/* 강사 필터 칩 (사이드바 내) */
.tc-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--admin-text);
  font-size: 12px;
  border: none;
  background: transparent;
}
.tc-chip:hover {
  background: #f3f4f6;
  color: var(--admin-text);
}
.tc-chip.active {
  background: #f3f4f6;
  color: var(--admin-text);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tc-cnt {
  margin-left: auto;
  font-size: 10px;
  background: #eef0f3;
  color: var(--admin-muted);
  padding: 1px 6px;
  border-radius: 8px;
}

/* 사이드바 하단 로그아웃 */
.sidebar-logout {
  padding: 10px 0 4px;
  margin-top: auto;
  border-top: 1px solid var(--border);
}
.logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--admin-muted);
  font-size: 14px;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: all .15s;
}
.logout-btn:hover {
  background: #fef2f2;
  color: #b91c1c;
}


/* ── 3-2. 메인 콘텐츠 영역 ──
   사이드바 우측의 메인 콘텐츠 영역입니다.
   상단바(topbar) + 브레드크럼 + 페이지 콘텐츠(스크롤)로 구성됩니다. */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* 상단바 */
.topbar {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 브레드크럼 (로고·사이드바 메뉴 텍스트와 동일한 14px) */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.breadcrumb-current {
  color: var(--text);
  font-weight: 600;
}

/* 페이지 콘텐츠 영역 (스크롤) */
.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}


/* ============================================================
   4. 공통 UI 컴포넌트
   ============================================================
   관리자/학부모 화면 공통으로 사용되는 재사용 가능한 UI 컴포넌트입니다.
   버튼, 카드, 통계 카드, 알림 배너, 뱃지, 탭, 폼, 테이블,
   페이지 헤더, 페이지네이션, 검색/필터 바 등을 포함합니다.
   ============================================================ */

/* ── 4-1. 버튼 ──
   기본(.btn) 스타일에 색상 변형(primary/outline/danger/success/warn/secondary)과
   크기 변형(sm/lg/icon)을 조합하여 사용합니다. */
.btn {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: opacity .15s, box-shadow .15s;
  line-height: 1.4;
  white-space: nowrap;       /* 버튼 내부 텍스트가 세로로 쪼개지지 않도록 강제 한 줄 */
  word-break: keep-all;      /* 한글이 글자 단위로 끊기지 않도록 */
  text-decoration: none;     /* <a class="btn"> 사용 시 밑줄 제거 */
}
.btn:hover { opacity: .88; }
.btn-primary { background: var(--blue); color: white; }
.btn-outline { background: white; color: var(--blue); border: 1px solid var(--blue); }
.btn-outline:hover { background: var(--blue-light); }
.btn-danger { background: var(--danger); color: white; }
.btn-success { background: var(--ok); color: white; }
.btn-warn { background: var(--warn); color: white; }
.btn-secondary { background: #f1f5f9; color: var(--text); border: 1px solid var(--border); }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-lg { padding: 10px 24px; font-size: 14px; }
.btn-icon { padding: 6px; border-radius: 6px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }


/* ── 4-2. 카드 ──
   콘텐츠를 감싸는 흰색 라운드 박스 컴포넌트입니다.
   card-header, card-body, card-footer, card-pad 조합으로 사용합니다. */
.card {
  background: white;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card-pad {
  padding: 16px;
}
.card-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body {
  padding: 16px;
}
.card-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #f8fafc;
}


/* ── 4-3. 통계 카드 ──
   대시보드 상단에 표시되는 수치 요약 카드입니다.
   아이콘(.stat-icon) + 수치(.stat-val) + 라벨(.stat-lbl) 구조입니다.
   stats-row로 가로 정렬하며, 반응형으로 줄바꿈됩니다. */
.stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.stat-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  flex: 1;
  min-width: 130px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.si-blue { background: var(--blue-light); }
.si-green { background: var(--ok-bg); }
.si-warn { background: var(--warn-bg); }
.si-purple { background: var(--purple-bg); }
.si-danger { background: var(--danger-bg); }
.stat-val {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.stat-lbl {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}


/* ── 4-4. 알림/배너 ──
   페이지 상단 또는 토스트로 표시되는 알림 메시지 컴포넌트입니다.
   alert-success/error/warning/info 및 notice 변형을 지원합니다.
   alertFadeIn 애니메이션으로 나타나는 효과를 제공합니다. */
.alert {
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: alertFadeIn .3s ease;
}
@keyframes alertFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.alert-success {
  background: var(--ok-bg);
  border: 1px solid #86efac;
  color: #166534;
}
.alert-error {
  background: var(--danger-bg);
  border: 1px solid #fca5a5;
  color: #991b1b;
}
.alert-warning,
.notice-warn {
  background: var(--warn-bg);
  border: 1px solid #fcd34d;
  color: #92400e;
}
.alert-info,
.notice-info {
  background: var(--blue-light);
  border: 1px solid var(--blue-mid);
  color: #1e40af;
}
.notice-ok {
  background: var(--ok-bg);
  border: 1px solid #86efac;
  color: #166534;
}
.notice {
  border-radius: var(--radius);
  padding: 9px 13px;
  font-size: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}


/* ── 4-5. 뱃지/칩 ──
   상태, 유형, 카운트 등을 표시하는 소형 인라인 라벨입니다.
   badge-blue/green/red/orange/purple/gray 색상 변형과
   수업 블록용 소형 뱃지(bdg, b-sub, b-mku, b-onc, b-ms)를 포함합니다. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}
.badge-blue { background: var(--blue-light); color: var(--blue); }
.badge-green { background: var(--ok-bg); color: #166534; }
.badge-red { background: var(--danger-bg); color: #991b1b; }
.badge-orange { background: var(--warn-bg); color: #92400e; }
.badge-purple { background: var(--purple-bg); color: #5b21b6; }
.badge-gray { background: #f0f2f7; color: #6b7499; }
.badge-live {
  background: linear-gradient(90deg, #FF6B6B, #FF8E8E);
  color: #fff;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .8; }
}

/* 수업 블록용 소형 뱃지 */
.bdg {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 700;
}
.b-sub { background: var(--purple-bg); color: #5b21b6; }
.b-mku { background: var(--ok-bg); color: #166534; }
.b-onc { background: var(--warn-bg); color: #92400e; }
.b-ms { background: var(--danger-bg); color: #991b1b; }


/* ── 4-6. 탭 바 ──
   페이지 내 콘텐츠 전환용 탭 네비게이션입니다.
   .tab.active 클래스로 현재 선택된 탭을 강조합니다. */
.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tab {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: all .15s;
}
.tab:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.tab.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  font-weight: 600;
}


/* ── 4-7. 폼 컴포넌트 ──
   입력 필드, 셀렉트 박스, 텍스트에어리어, 라벨, 에러 메시지 등
   폼 관련 공통 스타일입니다. form-control/finp/fsel 클래스를 지원합니다.
   포커스 시 파란색 테두리와 그림자 효과가 적용됩니다. */
.form-group {
  margin-bottom: 14px;
}
.form-label,
.flbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
}
.form-control,
.finp,
.fsel {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  color: var(--text);
  background: white;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.finp:focus,
.fsel:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}
.form-control:disabled,
.finp:disabled,
.fsel:disabled {
  background: #f8fafc;
  color: var(--muted);
}
.form-control.is-invalid {
  border-color: var(--danger);
}
.form-text {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.form-error {
  font-size: 11px;
  color: var(--danger);
  margin-top: 3px;
}
textarea.form-control {
  min-height: 80px;
  resize: vertical;
}
.form-row,
.frow {
  margin-bottom: 13px;
}
.form-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.form-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}


/* ── 4-8. 테이블 ──
   데이터 목록을 표시하는 테이블 컴포넌트입니다.
   .data-table의 thead는 sticky 헤더이며, .sortable 클래스로 정렬 기능을 활성화합니다.
   컬럼 드래그 이동(col-dragging/col-drag-over) 상태 스타일도 포함합니다.
   빈 상태(.empty-state)는 데이터가 없을 때 안내 메시지를 표시합니다. */
.table-wrap {
  background: white;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: auto;
  box-shadow: var(--shadow-sm);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
  cursor: default;
  user-select: none;
}
/* 정렬 가능한 컬럼 헤더 */
.data-table thead th.sortable {
  cursor: pointer;
}
.data-table thead th.sortable:hover {
  background: #eef1f6;
  color: var(--blue);
}
.data-table thead th.sortable::after {
  content: ' \21C5';
  opacity: .3;
  font-size: 10px;
}
.data-table thead th.sort-asc::after {
  content: ' \2191';
  opacity: .8;
  color: var(--blue);
}
.data-table thead th.sort-desc::after {
  content: ' \2193';
  opacity: .8;
  color: var(--blue);
}
/* 드래그 중인 컬럼 */
.data-table thead th.col-dragging {
  opacity: .5;
  background: var(--blue-light);
}
.data-table thead th.col-drag-over {
  border-left: 2px solid var(--blue);
}
.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.data-table tbody tr:hover {
  background: #fafbfd;
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr.clickable {
  cursor: pointer;
}
/* 테이블 내 상태 텍스트 */
.text-ok { color: var(--ok); font-weight: 600; }
.text-danger { color: var(--danger); font-weight: 600; }
.text-warn { color: var(--warn); font-weight: 600; }
.text-muted { color: var(--muted); }
.text-blue { color: var(--blue); font-weight: 600; }

/* 빈 상태 표시 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.empty-state .empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.empty-state .empty-text {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.empty-state .empty-sub {
  font-size: 12px;
}


/* ── 4-9. 페이지 헤더 ──
   각 페이지 상단에 표시되는 제목(.page-title), 부제(.page-sub),
   액션 버튼 영역(.page-actions) 레이아웃입니다. */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.page-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}


/* ── 4-10. 페이지네이션 ──
   목록 하단의 페이지 이동 네비게이션입니다.
   .active(현재 페이지) 및 .disabled(비활성) 상태를 지원합니다. */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: white;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: all .15s;
}
.pagination a:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.pagination .active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  font-weight: 600;
}
.pagination .disabled {
  opacity: .4;
  pointer-events: none;
}

/* ── 4-11. 검색/필터 바 ──
   테이블 상단에 배치되는 검색 입력 및 드롭다운 필터 영역입니다.
   .filter-bar (구) 또는 .search-bar (신) 로 가로 정렬하며,
   .search-input 에는 돋보기 아이콘이 표시됩니다.
   두 클래스는 동일한 가로 정렬·자동 폭 정책을 공유합니다. */
.filter-bar,
.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: flex-end; /* 라벨이 있는 form-group 과 버튼의 하단을 정렬 */
}
/* 조회 필터 영역의 input/select 는 글로벌 .form-control { width:100% } 를 덮어 자동 폭 적용.
   각 form-group 의 inline style="min-width:..." 으로 개별 폭 보장 가능. */
.filter-bar .form-control,
.filter-bar .fsel,
.search-bar .form-control,
.search-bar .fsel {
  width: auto;
  min-width: 140px;
}
/* 조회 필터 안의 form-group 도 자동 폭 — 기본 .form-group 의 block 흐름을 무력화
   (margin-bottom:0 인라인 스타일이 자주 쓰이는 패턴과 호환) */
.filter-bar .form-group,
.search-bar .form-group {
  margin-bottom: 0;
}

/* ── 4-11-b. 카드 내부 인라인 flex 폼의 수직 정렬 보정 ──
   다수의 템플릿(약 67건)이 카드 본문 안에서 다음 패턴을 사용:
     <form style="display:flex; align-items:center; gap:..">
       <div class="form-group"><label>..</label><input/></div>
       <button style="align-self:flex-end">..</button>
       <div class="notice">..</div>
     </form>
   이때 부모 align-items:center 와 버튼의 align-self:flex-end 가 충돌하여
   "버튼은 bottom, input 은 center" 로 베이스라인이 어긋남 → 시각적 미정렬.
   각 템플릿을 수정하지 않고 CSS 만으로 일괄 보정한다.

   - form-group(label+input) 의 input 하단을 버튼 하단과 동일선으로 맞추기 위해
     align-items: flex-end 로 강제 (인라인 style 덮어쓰기 위해 !important 필요).
   - notice 는 정보성 다중 라인 텍스트 → 카드 가운데 정렬이 자연스러우므로 align-self:center 유지.
   - 인라인 hidden input(_csrf) 는 폭/위치 영향 없음.
*/
.card-body > form[style*="display:flex"],
.card-body > form[style*="display: flex"] {
  align-items: flex-end !important;
}
/* notice/alert 류는 폼 컨트롤(input/button)과 동일한 베이스라인(하단)에 정렬.
   인라인 style="flex:1" 로 100% 폭을 차지하던 안내 영역을 적정 폭(min~max 범위)으로 제한하여
   다른 컨트롤 옆에 자연스럽게 들어가도록 함. */
.card-body > form[style*="display:flex"] > .notice,
.card-body > form[style*="display: flex"] > .notice,
.card-body > form[style*="display:flex"] > .alert,
.card-body > form[style*="display: flex"] > .alert {
  align-self: flex-end;          /* input/button 과 동일한 하단 정렬 */
  flex: 0 1 auto !important;      /* inline 의 flex:1 을 무력화하여 과도한 가로 확장 방지 */
  width: auto !important;
  min-width: 220px;
  max-width: 420px;
  /* 입력 컨트롤 높이(약 36~38px) 와 시각적 균형을 위한 적정 패딩 */
  padding-top: 8px;
  padding-bottom: 8px;
}
/* card-body 안의 search-bar/filter-bar 는 자체 margin-bottom 이 card-body padding 과
   중첩되어 카드 하단에 과도한 공백을 만들므로 0 으로 정규화 */
.card-body > .search-bar,
.card-body > .filter-bar {
  margin-bottom: 0;
}
.search-input {
  position: relative;
}
.search-input input {
  padding-left: 32px;
}
.search-input::before {
  content: '\1F50D';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}


/* ============================================================
   5. 스케줄 그리드 (시간표)
   ============================================================
   주간/월간 시간표 화면의 레이아웃입니다.
   CSS Grid 기반으로 시간 컬럼(56px) + 요일 컬럼(6개, 월~토)을 구성합니다.
   수업 블록(.class-block), 출석 도트(.att-dot), 빈 슬롯(.slot-available),
   월간 캘린더(.month-grid) 등의 스타일을 포함합니다.

   주간/월간 전환은 .view-toggle 버튼으로 제어합니다.
   원장/인포/강사 모두 동일한 UI로 시간표를 열람할 수 있습니다.
   ============================================================ */

/* 주간 컨트롤 - 이전/다음 주 이동 화살표 및 날짜 라벨 */
.week-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.week-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.week-arrow {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--muted);
  transition: all .15s;
}
.week-arrow:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.week-label {
  font-size: 13px;
  font-weight: 700;
  min-width: 155px;
  text-align: center;
}

/* 뷰 토글 (주간/월간) */
.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: white;
}
.view-toggle-btn {
  padding: 5px 13px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  transition: all .15s;
}
.view-toggle-btn.active {
  background: var(--blue);
  color: white;
  font-weight: 600;
}

/* 스케줄 그리드 래퍼 */
.schedule-wrap {
  background: white;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: auto;
  box-shadow: var(--shadow-sm);
}

/* 스케줄 CSS Grid: 시간컬럼 + 6요일(월~토) */
.schedule-grid {
  display: grid;
  grid-template-columns: 56px repeat(6, 1fr);
  min-width: 600px;
}

/* 그리드 헤더 셀 */
.grid-header {
  padding: 8px 5px;
  text-align: center;
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}
.grid-header.time-col {
  border-right: 1px solid var(--border);
}
.grid-header .day-name {
  font-size: 13px;
  font-weight: 700;
}
.grid-header .day-date {
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}
.grid-header.today {
  background: var(--blue-light);
}
.grid-header.today .day-name {
  color: var(--blue);
}
.grid-header.saturday {
  background: #fff8f0;
}
.grid-header.saturday .day-name {
  color: #d97706;
}

/* 시간 라벨 셀 */
.time-label {
  padding: 6px 6px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

/* 스케줄 셀 */
.schedule-cell {
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  padding: 3px;
  background: white;
  min-height: 70px;
}
.schedule-cell.saturday {
  background: #fffdf8;
}

/* 수업 블록 */
.class-block {
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  margin-bottom: 2px;
  cursor: pointer;
  transition: all .15s;
  border-left: 3px solid transparent;
}
.class-block:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transform: translateY(-1px);
}
.class-block .cb-teacher {
  font-size: 9px;
  font-weight: 700;
}
.class-block .cb-name {
  font-size: 10px;
  font-weight: 600;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.class-block .cb-meta {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.class-block .cb-count {
  font-size: 9px;
}

/* 출석 도트 (스케줄 그리드 내) */
.attendance-dots {
  display: flex;
  gap: 2px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.att-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s;
}
.att-dot:hover {
  transform: scale(1.4);
}
.att-dot.present { background: var(--ok); }
.att-dot.absent { background: var(--danger); }
.att-dot.pending { background: #cbd5e1; }
.att-dot.makeup-student { background: #fca5a5; border: 1.5px dashed var(--danger); }

/* 빈 슬롯 (보강 배정용) */
.slot-available {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed #cbd5e1;
  background: #f8fafc;
  margin: 2px;
  cursor: pointer;
  transition: all .15s;
}
.slot-available:hover {
  background: var(--blue-light);
  border-color: var(--blue);
}
.slot-available .slot-text {
  font-size: 9px;
  color: var(--muted);
  font-weight: 600;
}
.slot-available .slot-badge {
  margin-top: 2px;
  font-size: 8px;
  color: var(--blue);
  font-weight: 700;
  background: var(--blue-light);
  border-radius: 4px;
  padding: 1px 4px;
}

/* 월간 캘린더 뷰 */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.month-header {
  background: #f8fafc;
  text-align: center;
  padding: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.month-day {
  background: white;
  min-height: 76px;
  padding: 5px;
}
.month-day.other {
  background: #f8fafc;
  opacity: .5;
}
.month-day.today {
  background: var(--blue-light);
}
.month-day .day-num {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
}
.month-day.today .day-num {
  color: var(--blue);
}
.month-day .month-class {
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 4px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================================================
   6. 모달 (오버레이 / 드래그 / 리사이즈)
   ============================================================
   레이어팝업(모달) 시스템 스타일입니다.
   요구사항에 따라 모든 팝업은 위치 이동(드래그) 및 크기 조정(리사이즈)이 가능합니다.

   구조: .modal-overlay > .modal > .modal-header + .modal-body + .modal-footer
   크기 변형: .modal-sm(360px), 기본(480px), .modal-lg(640px), .modal-xl(820px)
   기능: .draggable(드래그), .resizable(리사이즈), .resize-handle(8방향 핸들)

   모달 내부 서브 컴포넌트:
   - .student-row: 수강생 행 (아바타 + 이름)
   - .att-btn-group: 출석 상태 선택 버튼 그룹
   - .modal-subsection: 모달 내 구분 섹션
   ============================================================ */

/* 모달 오버레이 - 화면 전체를 덮는 반투명 배경 */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open {
  display: flex;
}

/* 모달 본체 */
.modal {
  background: white;
  border-radius: var(--radius-lg);
  width: 480px;
  max-width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  position: relative;
}
.modal-lg { width: 640px; }
.modal-xl { width: 820px; }
.modal-sm { width: 360px; }

/* 드래그 가능 모달 */
.modal.draggable {
  position: absolute;
  cursor: default;
}
.modal.draggable .modal-header {
  cursor: move;
  user-select: none;
}

/* 리사이즈 가능 모달 */
.modal.resizable {
  position: absolute;
  min-width: 320px;
  min-height: 200px;
  resize: none;
}

/* 리사이즈 핸들 (8방향) */
.resize-handle {
  position: absolute;
  z-index: 10;
}
.resize-handle.n  { top: -3px;    left: 8px;    right: 8px;    height: 6px; cursor: n-resize; }
.resize-handle.s  { bottom: -3px; left: 8px;    right: 8px;    height: 6px; cursor: s-resize; }
.resize-handle.e  { right: -3px;  top: 8px;     bottom: 8px;   width: 6px;  cursor: e-resize; }
.resize-handle.w  { left: -3px;   top: 8px;     bottom: 8px;   width: 6px;  cursor: w-resize; }
.resize-handle.ne { top: -3px;    right: -3px;  width: 12px;   height: 12px; cursor: ne-resize; }
.resize-handle.nw { top: -3px;    left: -3px;   width: 12px;   height: 12px; cursor: nw-resize; }
.resize-handle.se { bottom: -3px; right: -3px;  width: 12px;   height: 12px; cursor: se-resize; }
.resize-handle.sw { bottom: -3px; left: -3px;   width: 12px;   height: 12px; cursor: sw-resize; }

/* 모달 헤더 */
.modal-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title {
  font-size: 15px;
  font-weight: 700;
}
.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  transition: background .15s;
}
.modal-close:hover {
  background: #f1f5f9;
  color: var(--text);
}

/* 모달 바디 */
.modal-body {
  padding: 16px 20px;
}

/* 모달 푸터 */
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 모달 내 학생 행 */
.student-row {
  display: flex;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 8px;
}
.student-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.student-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
}

/* 출석 상태 버튼 그룹 */
.att-btn-group {
  display: flex;
  gap: 3px;
}
.att-btn {
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: white;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  transition: all .15s;
}
.att-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.att-btn.present.on {
  background: var(--ok);
  color: white;
  border-color: var(--ok);
}
.att-btn.absent.on {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

/* 모달 내 서브섹션 */
.modal-subsection {
  background: #f8fafc;
  border-radius: var(--radius);
  padding: 11px;
  margin-bottom: 11px;
  border: 1px solid var(--border);
}
.modal-subsection h4 {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 7px;
}


/* ============================================================
   7. 출석 관련 UI
   ============================================================
   수업별 출석 관리 화면에서 사용하는 컴포넌트입니다.
   출석 카드(.attendance-card), 출석 상태 칩(.att-status) 등을 포함합니다.
   상태: present(출석), absent(결석), pending(미처리), makeup(보강)
   ============================================================ */

.attendance-card {
  background: white;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 12px;
}
.attendance-card .class-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.attendance-card .class-info {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* 출석 상태 칩 */
.att-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 600;
}
.att-status.present { background: var(--ok-bg); color: #166534; }
.att-status.absent { background: var(--danger-bg); color: #991b1b; }
.att-status.pending { background: #f0f2f7; color: #6b7499; }
.att-status.makeup { background: var(--blue-light); color: var(--blue); }


/* ============================================================
   8. 보강 관리 UI
   ============================================================
   결석 학생의 보강 신청/승인/배정 화면에서 사용하는 컴포넌트입니다.
   보강 카드(.makeup-card)는 상태별(pending/approved/rejected) 테두리 색상이 다릅니다.
   보강 가능 슬롯 그리드(.avail-grid)에서 빈자리를 선택할 수 있습니다.
   ============================================================ */

.makeup-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}
.makeup-card.pending { border-color: var(--blue-light); }
.makeup-card.approved { border-color: var(--ok-bg); }
.makeup-card.rejected { border-color: var(--danger-bg); }

/* 보강 가능 슬롯 그리드 */
.avail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.avail-card {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: white;
  cursor: pointer;
  transition: all .15s;
}
.avail-card:hover {
  border-color: var(--blue);
  background: var(--blue-light);
}
.avail-card.selected {
  border-color: var(--blue);
  border-width: 2px;
  background: var(--blue-light);
}


/* ============================================================
   9. 수납/결제 UI
   ============================================================
   수강료 수납 관리 화면에서 사용하는 결제 상태 뱃지입니다.
   상태: paid(완납), unpaid(미납), partial(부분납), refunded(환불)
   ============================================================ */

.payment-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.payment-status.paid { background: var(--ok-bg); color: #166534; }
.payment-status.unpaid { background: var(--danger-bg); color: #991b1b; }
.payment-status.partial { background: var(--warn-bg); color: #92400e; }
.payment-status.refunded { background: #f0f2f7; color: #6b7499; }


/* ============================================================
   10. 학부모 포털 레이아웃 (Mobile-First)
   ============================================================
   학부모 역할 전용 모바일 퍼스트 레이아웃입니다.
   최대 너비 430px로 제한하여 스마트폰 화면에 최적화됩니다.

   구조:
   - .parent-wrapper: 전체 래퍼 (max-width: 430px, 중앙 정렬)
   - .parent-topbar: 상단 인사말 + 알림 아이콘
   - .child-selector: 자녀 선택기 (가로 스크롤 칩)
   - .hero-card: 자녀 정보 히어로 카드 (그라데이션 배경)
   - .live-banner: 실시간 수업 영상 배너
   - .bottom-nav: 하단 5탭 네비게이션 (고정)
   - .parent-att-week: 주간 출석 현황 (원형 도트)
   - .video-grid: 영상 목록 2열 그리드
   ============================================================ */

/* 학부모 전용 래퍼 - 최대 430px 너비, 중앙 정렬 */
.parent-wrapper {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* 학부모 상단바 */
.parent-topbar {
  padding: 16px 20px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
}
.parent-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.parent-topbar h1 {
  font-size: 18px;
  font-weight: 700;
}
.parent-topbar .greeting {
  font-size: 12px;
  color: var(--text2);
}
.parent-topbar .greeting-name {
  font-size: 18px;
  font-weight: 800;
}

/* 학부모 아이콘 버튼 */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  position: relative;
  font-size: 16px;
}

/* 하단 네비게이션 (안 B — 6탭: 홈/학습/출결/결제/고객센터/마이) */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: white;
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  padding: 8px 0 env(safe-area-inset-bottom, 16px);
}
.bottom-nav .nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px 2px;
  background: none;
  border: none;
  position: relative;
  text-decoration: none;
  /* 6탭(430px / 6 ≈ 71px) 환경에서 라벨 잘림 방지 */
  min-width: 0;
}
.bottom-nav .nav-tab-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.bottom-nav .nav-tab-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  /* "고객센터"(4자) 가 71px 폭에 fit 되도록 보호 */
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
}
/* 매우 좁은 단말(360px 미만)에서는 라벨을 더 작게 */
@media (max-width: 359px) {
  .bottom-nav .nav-tab-label {
    font-size: 9px;
  }
}
.bottom-nav .nav-tab.active .nav-tab-label {
  color: var(--primary);
  font-weight: 600;
}
.bottom-nav .nav-tab .noti-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  position: absolute;
  top: 2px;
  right: calc(50% - 14px);
}

/* 페이지 콘텐츠 (학부모) */
.parent-page {
  padding-bottom: 80px;
  min-height: 100vh;
}

/* 자녀 선택기 */
.child-selector {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.child-selector::-webkit-scrollbar { display: none; }
.child-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.child-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: white;
  border: 2px solid transparent;
  transition: all .2s;
}
.child-avatar.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.child-avatar.c1 { background: linear-gradient(135deg, #4F80FF, #7B5EFF); }
.child-avatar.c2 { background: linear-gradient(135deg, #FF6B6B, #FF8E8E); }
.child-avatar.c3 { background: linear-gradient(135deg, #00C9A7, #36D6B5); }
/* '전체' 칩 등 색상 변형 없는 기본 자녀 아바타: 중립 그레이 그라데이션 */
.child-avatar.all { background: linear-gradient(135deg, #6B7280, #9CA3AF); }
.child-chip-label {
  font-size: 10px;
  color: var(--text2);
  font-weight: 500;
}

/* ========== 학부모 글로벌 헤더 (안 B 재구성) ==========
   parent.html 레이아웃 상단에 sticky 로 고정.
   좌측: 자녀 아바타 가로 스크롤 (parent-global-children),
   우측: 알림 벨 (parent-global-bell).
   각 페이지의 중복 자녀 선택기는 제거하고 본 헤더 단일 인스턴스만 사용. */
.parent-global-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 4px;
  min-height: 56px;
}
.parent-global-header .parent-global-children {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 8px;
}
.parent-global-header .parent-global-children::-webkit-scrollbar { display: none; }
.parent-global-header .parent-global-children .child-avatar {
  /* 헤더 컨텍스트에서는 약간 작게 */
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.parent-global-bell {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  position: relative;
  color: var(--text);
}
.parent-global-bell:hover { background: var(--bg); }
.parent-global-bell-dot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #ef4444);
  border: 2px solid #fff;
}

/* 히어로 카드 */
.hero-card {
  background: linear-gradient(135deg, #4F80FF 0%, #7B5EFF 100%);
  border-radius: var(--radius-lg);
  padding: 22px;
  color: white;
  position: relative;
  overflow: hidden;
  margin: 0 20px 12px;
}
.hero-card::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  right: -40px;
  top: -40px;
}
.hero-card::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  left: -20px;
  bottom: -30px;
}
.hero-label { font-size: 11px; opacity: .8; margin-bottom: 4px; }
.hero-name { font-size: 22px; font-weight: 800; margin-bottom: 2px; }
.hero-sub { font-size: 12px; opacity: .75; }
.hero-stats {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.hero-stat-val { font-size: 18px; font-weight: 700; }
.hero-stat-label { font-size: 10px; opacity: .7; margin-top: 2px; }

/* 라이브 배너 */
.live-banner {
  background: linear-gradient(135deg, #1A1D2E, #2D3352);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin: 0 20px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.live-banner::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(79,128,255,.15);
  right: -60px;
  top: -60px;
}
.live-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.live-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent white;
  margin-left: 3px;
}
.live-ripple {
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  border: 2px solid rgba(79,128,255,.5);
  animation: ripple 1.5s ease-out infinite;
}
@keyframes ripple {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.3); opacity: 0; }
}
.live-info { flex: 1; z-index: 1; }
.live-title { font-size: 14px; font-weight: 700; color: white; margin-bottom: 3px; }
.live-sub { font-size: 12px; color: rgba(255,255,255,.6); }
.live-arrow { color: rgba(255,255,255,.4); z-index: 1; font-size: 16px; }

/* 주간 출석 (학부모 홈) */
.parent-att-week {
  display: flex;
  gap: 6px;
  padding: 0 20px;
  margin-bottom: 16px;
}
.parent-att-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.parent-att-day .day-label {
  font-size: 10px;
  color: var(--text3);
}
.parent-att-day .day-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.day-circle.att-present { background: #E8FAF2; color: #1a9e5c; }
.day-circle.att-absent { background: #FFF0F1; color: #d63649; }
.day-circle.att-today { background: var(--primary); color: white; }
.day-circle.att-future { background: var(--bg); color: var(--text3); }
.day-circle.att-makeup { background: var(--primary-light); color: var(--primary); }

/* 섹션 타이틀 (학부모) */
.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  margin: 20px 0 10px;
  padding: 0 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* 영상 그리드 */
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 20px;
}
.video-card {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.video-thumb {
  background: linear-gradient(135deg, #1A1D2E, #2D3352);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.video-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent white;
  margin-left: 2px;
}
.video-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,.6);
  color: white;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 4px;
}
.video-info {
  padding: 8px 6px;
  background: white;
}
.video-title {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-meta {
  font-size: 10px;
  color: var(--text3);
}

/* 플레이어 오버레이 */
.player-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 200;
  display: none;
  flex-direction: column;
}
.player-overlay.show {
  display: flex;
}
.player-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}
.player-controls {
  background: #111;
  padding: 16px 20px 32px;
}


/* ============================================================
   11. 알림/게시판 UI
   ============================================================
   알림 목록(.notif-item), FAQ 아코디언(.faq-item),
   공지사항 목록(.notice-item) 등 커뮤니케이션 관련 컴포넌트입니다.
   ============================================================ */

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: white;
}
.notif-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.notif-icon.blue { background: var(--primary-light); }
.notif-icon.green { background: #E8FAF2; }
.notif-icon.orange { background: #FFF4EB; }
.notif-time {
  font-size: 10px;
  color: var(--text3);
  margin-top: 3px;
}
.notif-unread {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px;
}

/* FAQ 아코디언 */
.faq-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: white;
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}
.faq-answer {
  font-size: 12px;
  color: var(--text2);
  margin-top: 10px;
  line-height: 1.7;
  display: none;
}
.faq-answer.open {
  display: block;
}

/* 공지사항 목록 */
.notice-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.notice-item .notice-type {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}


/* ============================================================
   12. 프로필
   ============================================================
   사용자 프로필 페이지의 헤더(그라데이션 배경 + 아바타)와
   설정 메뉴 리스트(.menu-list > .menu-row) 스타일입니다.
   ============================================================ */

.profile-header {
  background: linear-gradient(135deg, #4F80FF, #7B5EFF);
  padding: 40px 20px 28px;
  text-align: center;
  color: white;
}
.profile-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  border: 3px solid rgba(255,255,255,.4);
}
.profile-name {
  font-size: 18px;
  font-weight: 700;
}
.profile-sub {
  font-size: 12px;
  opacity: .75;
  margin-top: 2px;
}
.menu-list { background: white; }
.menu-row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  gap: 14px;
}
.menu-row:hover { background: #fafbfd; }
.menu-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.menu-row-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}
.menu-row-arrow {
  color: var(--text3);
  font-size: 16px;
}


/* ============================================================
   13. 로그인 / 인증
   ============================================================
   관리자(데스크톱)와 학부모(모바일) 각각의 로그인 화면 스타일입니다.
   - 관리자: .login-page > .login-card (중앙 카드형, 400px)
   - 학부모: .login-wrap (세로 풀스크린, max-width 430px)
   인증 링크(.auth-link), 구분선(.divider), 풀폭 버튼(.btn-main/.btn-sub),
   학부모용 입력 필드(.input-wrap > .input-field) 등을 포함합니다.
   ============================================================ */

/* 관리자 로그인 (데스크톱) - 중앙 정렬 카드 레이아웃 */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 400px;
  max-width: 95vw;
  box-shadow: var(--shadow-lg);
}
.login-logo-admin {
  width: 50px;
  height: 50px;
  background: var(--blue);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: white;
  margin: 0 auto 20px;
}
.login-title {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 4px;
}
.login-subtitle {
  font-size: 13px;
  color: var(--text2);
  text-align: center;
  margin-bottom: 28px;
}

/* 학부모 로그인 (모바일) */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  max-width: 430px;
  margin: 0 auto;
}
.login-top {
  padding-top: 80px;
  margin-bottom: 40px;
  text-align: center;
}
.login-logo-parent {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), #7B5EFF);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  font-weight: 800;
}
.login-form { flex: 1; }

/* 인증 링크 */
.auth-link {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 12px;
  cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }

/* 구분선 */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text3);
  font-size: 12px;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* 학부모용 풀 폭 버튼 */
.btn-main {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--primary), #7B5EFF);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .3px;
  transition: opacity .15s;
}
.btn-main:hover { opacity: .9; }
.btn-sub {
  width: 100%;
  padding: 12px;
  background: var(--bg);
  color: var(--text2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* 학부모용 인풋 */
.input-wrap {
  margin-bottom: 14px;
}
.input-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
.input-field {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  background: white;
  outline: none;
  transition: border-color .15s;
}
.input-field:focus {
  border-color: var(--primary);
}


/* ============================================================
   14. 유틸리티 클래스
   ============================================================
   Tailwind CSS 스타일의 단일 속성 유틸리티 클래스입니다.
   flex, gap, margin, padding, text-align, font-weight 등의
   자주 사용하는 레이아웃 속성을 클래스 하나로 적용할 수 있습니다.
   ============================================================ */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap-util { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.w-full { width: 100%; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.hidden { display: none; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ============================================================
   15. 반응형 대응
   ============================================================
   화면 크기별 레이아웃 조정 미디어 쿼리입니다.
   - 1024px 이하 (태블릿): 사이드바를 화면 밖으로 숨기고 오버레이로 표시
   - 640px 이하 (모바일): 콘텐츠 패딩 축소, 통계 카드 세로 배치
   - 인쇄: 사이드바/상단바/하단 네비게이션 숨김
   ============================================================ */

/* 모바일 햄버거 메뉴 버튼 (기본: 숨김, 1024px 이하에서 표시) */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--text);
  border-radius: 6px;
  line-height: 1;
}
.mobile-menu-btn:hover {
  background: var(--bg2);
}

/* 모바일 사이드바 오버레이 (기본: 숨김) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
  opacity: 0;
  transition: opacity .3s ease;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

@media (max-width: 1024px) {
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
  }
  .sidebar {
    position: fixed;
    left: -220px;
    height: 100vh;
    z-index: 100;
    transition: left .3s ease;
  }
  .sidebar.open {
    left: 0;
  }
  /* 사이드바 열렸을 때 접힘(folded) 상태 해제 */
  .sidebar.open.folded {
    width: 220px;
  }
  .sidebar.open.folded .nav-item span:not(.nav-icon),
  .sidebar.open.folded .sb-sec-title,
  .sidebar.open.folded .nav-toggle-arrow,
  .sidebar.open.folded .logout-btn span:not(.nav-icon) {
    display: inline;
  }
  .sidebar.open.folded .nav-group-toggle span:first-child {
    display: inline;
  }
  .sidebar.open.folded .nav-group-toggle {
    padding: 6px 14px;
    height: auto;
    min-height: auto;
    pointer-events: auto;
    cursor: pointer;
    background: #eef1f5;
  }
  .sidebar.open.folded .nav-item,
  .sidebar.open.folded .logout-btn {
    font-size: 12px;
    justify-content: flex-start;
    padding: 8px 14px;
  }
  .sidebar.open.folded .sidebar-logo > div:not(.logo-dot) {
    display: block;
  }
  .main-content {
    margin-left: 0;
  }
  .stats-row {
    flex-wrap: wrap;
  }
  .stat-card {
    min-width: 45%;
  }
}

@media (max-width: 640px) {
  .page-content {
    padding: 12px;
  }
  .page-title {
    font-size: 16px;
  }
  .stats-row {
    flex-direction: column;
  }
  .stat-card {
    min-width: 100%;
  }
  .schedule-grid {
    min-width: 500px;
  }
}

/* ============================================================
   16. 시간표 리팩터링 클래스 (swrap / sgrid / ghc / scel / cblk 등)
   ============================================================
   기존 schedule-grid 계열과 병행하는 축약 클래스입니다.
   timetable.html 에서 참조합니다. */

/* 스케줄 그리드 래퍼 */
.swrap {
  background: white;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: auto;
}

/* 스케줄 CSS Grid */
.sgrid {
  display: grid;
  grid-template-columns: 56px repeat(6, 1fr);
  min-width: 600px;
}

/* 그리드 헤더 셀 */
.ghc {
  padding: 8px 5px;
  text-align: center;
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}
.ghc.tc {
  border-right: 1px solid var(--border);
  color: var(--muted);
}
.ghc .dn { font-size: 13px; font-weight: 700; }
.ghc .dd { font-size: 10px; color: var(--muted); margin-top: 1px; }
.ghc.tod { background: var(--blue-light); }
.ghc.tod .dn { color: var(--blue); }
.ghc.sat { background: #fff8f0; }
.ghc.sat .dn { color: #d97706; }

/* 시간 라벨 */
.tlbl {
  padding: 0 6px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  padding-top: 6px;
}

/* 스케줄 셀 */
.scel {
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  padding: 3px;
  background: white;
}
.scel.sat { background: #fffdf8; }
/* ── 주간 뷰: 현재/다가오는 시간대 셀 강조 (배경 투명, 테두리만) ── */
.scel.now-slot {
  border: 3px solid var(--blue);
}

/* 수업 블록 */
.cblk {
  border-radius: 6px;
  padding: 5px 7px;
  margin-bottom: 2px;
  cursor: pointer;
  transition: all .15s;
  border-left: 3px solid transparent;
}
.cblk:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transform: translateY(-1px);
}

.cbt { font-size: 9px; font-weight: 700; }
.cbn { font-size: 10px; font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbm { display: flex; align-items: center; gap: 2px; margin-top: 2px; flex-wrap: wrap; }

/* 출석 도트 컨테이너 */
.adots {
  display: flex;
  gap: 2px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.adot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s;
}
.adot:hover { transform: scale(1.4); }
.adot.present  { background: var(--ok); }          /* 초록 = 출석 */
.adot.absent   { background: var(--danger); }      /* 빨강 = 결석 */
.adot.postpone { background: #f59e0b; }            /* 주황 = 연기 */
.adot.pending  { background: #cbd5e1; }            /* 회색 = 미처리 */
.adot.mks      { background: #fca5a5; border: 1.5px dashed var(--danger); }

/* 빈 슬롯 */
.savail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border-radius: 6px;
  border: 1.5px dashed #cbd5e1;
  background: #f8fafc;
  margin: 2px;
  cursor: pointer;
  transition: all .15s;
}
.savail:hover {
  background: var(--blue-light);
  border-color: var(--blue);
}
.savail .at {
  font-size: 9px;
  color: var(--muted);
  font-weight: 600;
}

/* 보강 여유 바 */
.abar {
  margin-top: 2px;
  font-size: 8px;
  color: var(--blue);
  font-weight: 700;
  background: var(--blue-light);
  border-radius: 4px;
  padding: 1px 4px;
  display: inline-block;
}

/* 수업 추가 링크 */
.add-more {
  text-align: center;
  padding: 2px;
  cursor: pointer;
  font-size: 9px;
  color: #94a3b8;
  border-top: 1px dashed #e2e8f0;
  margin-top: 2px;
}
.add-more:hover { color: var(--blue); }

/* 주간 컨트롤 (축약) */
.wl { display: flex; align-items: center; gap: 8px; }
.wr { display: flex; align-items: center; gap: 8px; }
.wnav { display: flex; align-items: center; gap: 4px; }
.warr {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--muted);
  text-decoration: none;
}
.warr:hover { border-color: var(--blue); color: var(--blue); }
.wlbl { font-size: 13px; font-weight: 700; min-width: 155px; text-align: center; }

/* 뷰 토글 (축약) */
.vtog {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: white;
}
.vtb {
  padding: 5px 13px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  text-align: center;
}
.vtb.active {
  background: var(--blue);
  color: white;
  font-weight: 600;
}

/* 공지 배너 (축약) */
.n-warn { background: var(--warn-bg); border: 1px solid #fcd34d; color: #92400e; }
.n-info { background: var(--blue-light); border: 1px solid var(--blue-mid); color: #1e40af; }
.n-ok { background: var(--ok-bg); border: 1px solid #86efac; color: #166534; }

/* 월간 그리드 (축약) */
.mgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.mdh {
  background: #f8fafc;
  text-align: center;
  padding: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.mdh.sun { color: var(--danger); }
.mdh.sat { color: #d97706; }
.mday {
  background: white;
  min-height: 76px;
  padding: 5px;
}
.mday.oth { background: #f8fafc; opacity: .5; }
.mday.tod {
  border: 3px solid var(--blue);
}
.mdt {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--text);
}
.mdt.tn { color: var(--blue); }
.mday.tod .mdt { color: var(--blue); }
.mday.sun .mdt { color: var(--danger); }
.mday.sat .mdt { color: #d97706; }
/* 월간 뷰: 수업 추가 링크 */
.madd {
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  margin-top: 2px;
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 0;
  transition: all .15s;
}
.madd:hover {
  color: var(--blue);
  background: var(--blue-light);
}
.msl {
  font-size: 10px;
  padding: 3px 4px;
  border-radius: 4px;
  margin-bottom: 1px;
  cursor: pointer;
  border-left: 2px solid;
  transition: opacity .15s ease;
}
.msl:hover {
  opacity: .75;
}
/* 월간 수업 블록 상단: 시간 + 강사명 */
.msl-top {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msl-time {
  font-weight: 700;
  font-size: 9px;
  flex-shrink: 0;
}
.msl-name {
  font-weight: 600;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 월간 수업 블록 뱃지 영역 */
.msl-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 1px;
}
.msl-bdg {
  font-size: 7px;
  font-weight: 700;
  padding: 0px 3px;
  border-radius: 3px;
  line-height: 14px;
  white-space: nowrap;
}
.msl-b-present { background: #dcfce7; color: #16a34a; }
.msl-b-absent  { background: #fee2e2; color: #dc2626; }
.msl-b-makeup  { background: #dbeafe; color: #2563eb; }
.msl-b-postpone { background: #fef3c7; color: #d97706; }
/* 월간 뷰: 초과 수업 숨김 & 토글 */
.msl-extra { display: none; }
.mday.expanded .msl-extra { display: block; }
.msl-toggle {
  font-size: 9px;
  color: var(--blue);
  text-align: center;
  margin-top: 1px;
  cursor: pointer;
  padding: 1px 0;
}
.msl-toggle:hover { text-decoration: underline; }

/* 강사 필터 칩 영역 */
.tf-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.tf-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: white;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tf-chip:hover { border-color: var(--blue); }
.tf-chip.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.tf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ── 모달 상세 (수업 상세 팝업 내부) ── */
.subsec {
  background: #f8fafc;
  border-radius: 8px;
  padding: 11px;
  margin-bottom: 11px;
  border: 1px solid var(--border);
}
.subsec h4 {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 7px;
  color: var(--text);
}
.srow {
  display: flex;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 8px;
}
.sav {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.snm {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
}
.atbs {
  display: flex;
  gap: 3px;
}
.atb {
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: white;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
}
.atb:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.atb.present.on {
  background: var(--ok);
  color: white;
  border-color: var(--ok);
}
.atb.absent.on {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

/* ── 인라인 태그 (수업 유형 표시) ── */
.itag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 600;
}
.it-s { background: #ede9fe; color: #5b21b6; }
.it-m { background: var(--ok-bg); color: #166534; }
.it-o { background: var(--warn-bg); color: #92400e; }

/* sgrid 반응형: 사이드바 접힘/좁은 화면에서도 토요일 컬럼이 잘리지 않도록 처리 */
@media (max-width: 1200px) {
  .sgrid {
    min-width: 600px;
    grid-template-columns: 48px repeat(6, 1fr);
  }
  .sgrid .ghc { padding: 6px 3px; font-size: 10px; }
  .sgrid .ghc .dn { font-size: 12px; }
  .sgrid .cblk { padding: 4px 5px; }
  .sgrid .cbt { font-size: 10px; }
  .sgrid .cbn { font-size: 9px; }
}
@media (max-width: 640px) {
  .sgrid {
    min-width: 480px;
    grid-template-columns: 40px repeat(6, 1fr);
  }
  .sgrid .tlbl { font-size: 9px; padding: 0 3px 0 0; }
}

@media print {
  .sidebar, .topbar, .bottom-nav {
    display: none;
  }
  .main-content {
    margin: 0;
  }
  .page-content {
    padding: 0;
  }
}