*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; font-family: 'Noto Sans KR', sans-serif; background: #0F172A; color: #E2E8F0; overflow: hidden; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }
    input, select, textarea { font-family: inherit; }

    /* ── 앱 레이아웃 ── */
    .app { display: flex; height: 100dvh; overflow: hidden; }

    /* ── 사이드바 ── */
    .sidebar { width: 220px; min-width: 220px; background: #1E293B; border-right: 1px solid rgba(103,232,249,0.1); display: flex; flex-direction: column; padding: 20px 16px; z-index: 50; transition: transform .3s ease; }
    .sidebar-logo { margin-bottom: 28px; }
    .sidebar-label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: #67E8F9; margin-bottom: 6px; }
    .sidebar-title { font-size: 15px; font-weight: 900; color: #F1F5F9; line-height: 1.3; }
    .lang-toggle { display:inline-flex; gap:2px; background:rgba(148,163,184,0.12); border:1px solid rgba(148,163,184,0.25); border-radius:8px; padding:2px; flex-shrink:0; }
    .lang-toggle button { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; padding:2px 7px; border:none; border-radius:6px; background:transparent; color:#94A3B8; cursor:pointer; transition:all .15s; }
    .lang-toggle button.active { background:#38BDF8; color:#0F172A; }
    .nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .nav-btn { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #64748B; transition: all .2s; width: 100%; text-align: left; }
    .nav-btn:hover { background: rgba(103,232,249,0.06); color: #94A3B8; }
    .nav-btn.active { background: rgba(103,232,249,0.14); color: #67E8F9; }
    /* 성적 메뉴 그룹 박스 (표+시각화 같은 부류끼리 묶음) */
    .nav-subgroup { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid rgba(103,232,249,0.10); border-radius: 14px; background: rgba(30,41,59,0.40); }
    .nav-icon { font-size: 16px; width: 20px; text-align: center; }
    .nav-group { margin-top: 14px; padding: 8px; border: 1px dashed rgba(103,232,249,0.28); border-radius: 14px; background: rgba(103,232,249,0.04); display: flex; flex-direction: column; gap: 4px; }
    .nav-group-label { font-size: 10px; font-weight: 700; color: #67E8F9; letter-spacing: 0.08em; padding: 2px 6px 6px; display: flex; align-items: center; gap: 6px; }
    .nav-group-label span { font-size: 9px; font-weight: 500; color: #64748B; letter-spacing: 0; }
    .sidebar-footer { margin-top: 12px; }

    /* ── 메인 ── */
    .main { flex: 1; overflow-y: auto; padding: 32px 36px 60px; }
    .main-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
    .main-eyebrow { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #475569; margin-bottom: 4px; }
    .main-title { font-size: 26px; font-weight: 900; color: #F1F5F9; }

    /* ── 탭 (출결 내부) ── */
    .tab-bar { display: flex; gap: 8px; margin-bottom: 20px; }
    .tab-btn { padding: 8px 20px; border-radius: 99px; font-size: 13px; font-weight: 700; border: 1px solid rgba(103,232,249,0.2); background: transparent; color: #64748B; cursor: pointer; transition: all .2s; }
    .tab-btn.active { background: rgba(103,232,249,0.12); border-color: #67E8F9; color: #67E8F9; }
    .tab-btn:hover:not(.active) { border-color: rgba(103,232,249,0.4); color: #94A3B8; }

    /* ── 날짜 컨트롤 ── */
    .date-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
    .date-nav { display: flex; align-items: center; gap: 6px; }
    .date-arrow { width: 34px; height: 34px; border-radius: 10px; background: #1E293B; border: 1px solid rgba(103,232,249,0.2); color: #67E8F9; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
    .date-arrow:hover { background: rgba(103,232,249,0.10); }
    .date-input { background: #1E293B; border: 1px solid rgba(103,232,249,0.25); border-radius: 10px; padding: 7px 14px; color: #E2E8F0; font-size: 14px; font-weight: 700; font-family: 'Space Mono', monospace; outline: none; cursor: pointer; transition: border-color .2s; }
    .date-input:focus { border-color: #67E8F9; }
    .today-btn { padding: 7px 14px; border-radius: 10px; background: rgba(103,232,249,0.10); border: 1px solid rgba(103,232,249,0.3); color: #67E8F9; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
    .today-btn:hover { background: rgba(103,232,249,0.18); }
    .filter-select { background: #1E293B; border: 1px solid rgba(103,232,249,0.2); border-radius: 10px; padding: 7px 14px; color: #E2E8F0; font-size: 13px; outline: none; cursor: pointer; }
    .filter-select:focus { border-color: #67E8F9; }
    .all-present-btn { margin-left: auto; padding: 7px 16px; border-radius: 10px; background: rgba(45,212,191,0.10); border: 1px solid rgba(45,212,191,0.3); color: #2DD4BF; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
    .all-present-btn:hover { background: rgba(45,212,191,0.18); }

    /* ── 통계 ── */
    .stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
    .stat-card { background: #1E293B; border: 1px solid rgba(103,232,249,0.12); border-radius: 14px; padding: 14px 16px; text-align: center; }
    .stat-num { font-family: 'Space Mono', monospace; font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
    .stat-label { font-size: 11px; color: #64748B; }
    .num-present { color: #2DD4BF; }
    .num-late    { color: #FCD34D; }
    .num-early   { color: #FB923C; }
    .num-absent  { color: #F87171; }

    /* ── 출결 카드 ── */
    .att-list { display: flex; flex-direction: column; gap: 8px; }
    .att-card { background: #1E293B; border: 1px solid rgba(103,232,249,0.12); border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; transition: border-color .15s; }
    .att-card:hover { border-color: rgba(103,232,249,0.25); }
    .att-card.status-present { border-left: 3px solid #2DD4BF; }
    .att-card.status-late    { border-left: 3px solid #FCD34D; }
    .att-card.status-early   { border-left: 3px solid #FB923C; }
    .att-card.status-absent  { border-left: 3px solid #F87171; }
    .att-card.status-none    { border-left: 3px solid #334155; }
    .att-info { flex: 1; min-width: 0; }
    .att-name { font-weight: 700; font-size: 15px; color: #F1F5F9; }
    .att-meta { font-size: 12px; color: #64748B; margin-top: 2px; }
    .att-btns { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
    .att-btn { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; border: 1px solid transparent; cursor: pointer; transition: all .15s; white-space: nowrap; }
    .att-btn-present { background: rgba(45,212,191,0.10); color: #5EEAD4; border-color: rgba(45,212,191,0.30); }
    .att-btn-absent  { background: rgba(248,113,113,0.10); color: #FCA5A5; border-color: rgba(248,113,113,0.30); }
    .att-btn-late    { background: rgba(252,211,77,0.10);  color: #FDE047; border-color: rgba(252,211,77,0.30); }
    .att-btn-early   { background: rgba(251,146,60,0.10);  color: #FDBA74; border-color: rgba(251,146,60,0.30); }
    .att-btn.selected-present { background: #2DD4BF; color: #0F172A; border-color: #2DD4BF; font-weight: 800; box-shadow: 0 0 0 2px rgba(45,212,191,0.35); }
    .att-btn.selected-absent  { background: #F87171; color: #0F172A; border-color: #F87171; font-weight: 800; box-shadow: 0 0 0 2px rgba(248,113,113,0.35); }
    .att-btn.selected-late    { background: #FCD34D; color: #0F172A; border-color: #FCD34D; font-weight: 800; box-shadow: 0 0 0 2px rgba(252,211,77,0.35); }
    .att-btn.selected-early   { background: #FB923C; color: #0F172A; border-color: #FB923C; font-weight: 800; box-shadow: 0 0 0 2px rgba(251,146,60,0.35); }
    .att-note-input { flex: 0 0 160px; background: #0F172A; border: 1px solid rgba(103,232,249,0.15); border-radius: 8px; padding: 6px 10px; color: #94A3B8; font-size: 12px; outline: none; transition: border-color .2s; }
    .att-note-input::placeholder { color: #334155; }
    .att-note-input:focus { border-color: #67E8F9; }

    /* ── 저장 버튼 (sticky) ── */
    .save-bar { position: sticky; bottom: 20px; z-index: 10; display: flex; justify-content: center; margin-top: 20px; }
    .save-btn { padding: 13px 48px; background: linear-gradient(135deg, #0D9488, #67E8F9); border: none; border-radius: 99px; color: #0F172A; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity .2s, transform .2s; box-shadow: 0 8px 32px rgba(103,232,249,0.25); }
    .save-btn:hover { opacity: 0.88; transform: translateY(-2px); }

    /* ── 이력 ── */
    .history-filter { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
    .hist-table-wrap { background: #1E293B; border: 1px solid rgba(103,232,249,0.12); border-radius: 18px; overflow: hidden; }
    table { width: 100%; border-collapse: collapse; }
    /* 메모칸: 가로 폭 제한 → 나머지 칸(이름·점수 등)이 줄바꿈 없이 정상 표기 */
    .memo-cell { max-width: 400px; white-space: normal; word-break: break-word; line-height: 1.5; color: #64748B; }
    thead tr { background: rgba(103,232,249,0.07); border-bottom: 1px solid rgba(103,232,249,0.12); }
    th { padding: 12px 16px; text-align: left; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #67E8F9; font-weight: 700; }
    td { padding: 13px 16px; font-size: 13px; color: #CBD5E1; border-bottom: 1px solid rgba(103,232,249,0.05); vertical-align: middle; }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr { transition: background .15s; }
    tbody tr:hover { background: rgba(103,232,249,0.03); }
    .status-chip { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; font-family: 'Space Mono', monospace; }
    .chip-present { background: rgba(45,212,191,0.15); color: #2DD4BF; }
    .chip-late    { background: rgba(252,211,77,0.15);  color: #FCD34D; }
    .chip-early   { background: rgba(251,146,60,0.15);  color: #FB923C; }
    .chip-absent  { background: rgba(248,113,113,0.15); color: #F87171; }
    /* 모바일: 표를 가로 스크롤로 — 칸이 뭉개지지 않게 최소폭 유지, 메모는 더 좁게 */
    @media (max-width: 768px) {
      .hist-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .hist-table-wrap table { min-width: 720px; }
      /* 메모는 3줄까지만 표기(…) → 행이 과하게 길어지지 않게. 전체 내용은 '수정'에서 확인 */
      .memo-cell { max-width: 240px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    }

    /* ── 빈 상태 ── */
    .empty-state { text-align: center; padding: 60px 20px; color: #475569; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .empty-icon  { font-size: 44px; margin-bottom: 12px; }
    .empty-text  { font-size: 13px; }

    /* ── 성적관리 개발중 ── */
    .wip-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; padding: 20px; }
    .wip-icon  { font-size: 64px; margin-bottom: 20px; animation: float 3s ease-in-out infinite; }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
    .wip-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(103,232,249,0.08); border: 1px solid rgba(103,232,249,0.25); border-radius: 99px; padding: 5px 16px; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #67E8F9; margin-bottom: 18px; }
    .wip-dot { width: 6px; height: 6px; border-radius: 50%; background: #67E8F9; animation: blink 1.4s ease-in-out infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
    .wip-title { font-size: 28px; font-weight: 900; color: #F1F5F9; margin-bottom: 10px; }
    .wip-sub { font-size: 14px; color: #64748B; margin-bottom: 28px; }
    .wip-features { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; }
    .wip-feature { background: #1E293B; border: 1px solid rgba(103,232,249,0.12); border-radius: 12px; padding: 12px 18px; font-size: 13px; color: #94A3B8; display: flex; align-items: center; gap: 8px; }
    .wip-feature-icon { font-size: 18px; }
    .wip-notice { background: rgba(103,232,249,0.05); border: 1px solid rgba(103,232,249,0.15); border-radius: 14px; padding: 14px 20px; font-size: 12px; color: #64748B; max-width: 480px; line-height: 1.7; }

    /* ── 토스트 ── */
    .toast { position: fixed; bottom: 24px; right: 24px; z-index: 200; background: #1E293B; border: 1px solid rgba(103,232,249,0.3); border-left: 3px solid #67E8F9; border-radius: 12px; padding: 12px 18px; font-size: 13px; color: #E2E8F0; box-shadow: 0 8px 32px rgba(0,0,0,0.4); transform: translateY(80px); opacity: 0; transition: all .3s ease; pointer-events: none; }
    .toast.show { transform: translateY(0); opacity: 1; }

    /* ── 학생등록 섹션 ── */
    .stu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
    .stu-add-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; background: linear-gradient(135deg, #0369A1, #38BDF8); color: #0F172A; font-weight: 700; font-size: 13px; border: none; border-radius: 99px; cursor: pointer; transition: opacity .2s, transform .2s; }
    .stu-add-btn:hover { opacity: 0.88; transform: translateY(-1px); }
    .stu-stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
    .stu-stat-card { background: #1E293B; border: 1px solid rgba(56,189,248,0.15); border-radius: 14px; padding: 14px 16px; text-align: center; }
    .stu-stat-num { font-family: 'Space Mono', monospace; font-size: 24px; font-weight: 700; color: #38BDF8; line-height: 1; margin-bottom: 4px; }
    .stu-stat-label { font-size: 11px; color: #64748B; }
    .stu-search-bar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
    .stu-search-input { flex: 1; min-width: 160px; background: #1E293B; border: 1px solid rgba(56,189,248,0.2); border-radius: 12px; padding: 9px 14px; color: #E2E8F0; font-size: 14px; font-family: 'Noto Sans KR', sans-serif; outline: none; transition: border-color .2s; }
    .stu-search-input::placeholder { color: #475569; }
    .stu-search-input:focus { border-color: #38BDF8; }
    .stu-grade-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(45,212,191,0.12); color: #2DD4BF; }
    .stu-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; font-family: 'Space Mono', monospace; }
    .stu-badge-active   { background: rgba(56,189,248,0.15); color: #38BDF8; border: 1px solid rgba(56,189,248,0.3); }
    .stu-badge-inactive { background: rgba(100,116,139,0.15); color: #64748B; border: 1px solid rgba(100,116,139,0.25); }
    .stu-btn-edit, .stu-btn-del { padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; border: none; cursor: pointer; transition: all .15s; font-family: 'Noto Sans KR', sans-serif; }
    .stu-btn-edit { background: rgba(56,189,248,0.12); color: #38BDF8; border: 1px solid rgba(56,189,248,0.25); }
    .stu-btn-edit:hover { background: rgba(56,189,248,0.22); }
    .stu-btn-del  { background: rgba(248,113,113,0.10); color: #F87171; border: 1px solid rgba(248,113,113,0.2); }
    .stu-btn-del:hover  { background: rgba(248,113,113,0.20); }
    .td-name-s { font-weight: 700; color: #F1F5F9; font-size: 14px; }
    .td-phone-s { font-family: 'Space Mono', monospace; font-size: 12px; }
    /* 학생 모달 */
    .stu-modal-overlay { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; }
    .stu-modal-overlay.open { display: flex; }
    .stu-modal { background: #1E293B; border: 1px solid rgba(56,189,248,0.25); border-radius: 24px; width: 100%; max-width: 520px; padding: 28px; animation: slideUp .25s ease; max-height: 90vh; overflow-y: auto; }
    @keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
    .stu-modal-title { font-size: 20px; font-weight: 700; color: #F1F5F9; margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
    .stu-form-group { margin-bottom: 16px; }
    .stu-form-label { display: block; font-size: 11px; font-weight: 700; font-family: 'Space Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: #38BDF8; margin-bottom: 6px; }
    .stu-form-input, .stu-form-select { width: 100%; background: #0F172A; border: 1px solid rgba(56,189,248,0.2); border-radius: 10px; padding: 10px 14px; color: #E2E8F0; font-size: 14px; font-family: 'Noto Sans KR', sans-serif; outline: none; transition: border-color .2s; }
    .stu-form-input::placeholder { color: #334155; }
    .stu-form-input:focus, .stu-form-select:focus { border-color: #38BDF8; }
    .stu-form-select option { background: #1E293B; }
    .stu-form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .cls-day-lbl { display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 9px 11px; background: #0F172A; border-radius: 9px; border: 1px solid rgba(56,189,248,0.2); font-size: 13px; color: #CBD5E1; font-weight: 600; flex: 1; justify-content: center; min-width: 40px; }
    .cls-day-lbl:has(input:checked) { background: rgba(56,189,248,0.14); border-color: #38BDF8; color: #38BDF8; }
    .stu-modal-actions { display: flex; gap: 10px; margin-top: 24px; }
    .stu-btn-cancel { flex: 1; padding: 11px; background: transparent; border: 1px solid rgba(100,116,139,0.3); border-radius: 12px; color: #64748B; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; font-family: 'Noto Sans KR', sans-serif; }
    .stu-btn-cancel:hover { border-color: #64748B; color: #94A3B8; }
    .stu-btn-save { flex: 2; padding: 11px; background: linear-gradient(135deg, #0369A1, #38BDF8); border: none; border-radius: 12px; color: #0F172A; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; font-family: 'Noto Sans KR', sans-serif; }
    .stu-btn-save:hover { opacity: 0.88; }
    @media (max-width: 768px) {
      .stu-stats-row { grid-template-columns: repeat(2,1fr); }
      .stu-form-row  { grid-template-columns: 1fr; }
    }

    /* ── 출결분석 ── */
    .an-section-title { font-size: 13px; font-weight: 700; color: #67E8F9; font-family: 'Space Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
    .an-section-title::after { content: ''; flex: 1; height: 1px; background: rgba(103,232,249,0.12); }
    .an-today-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 28px; }
    .an-today-card { background: #1E293B; border: 1px solid rgba(103,232,249,0.10); border-radius: 16px; padding: 18px 16px; text-align: center; }
    .an-today-num  { font-family: 'Space Mono', monospace; font-size: 36px; font-weight: 700; line-height: 1; margin-bottom: 6px; }
    .an-today-label{ font-size: 12px; color: #64748B; }
    .an-today-sub  { font-size: 11px; color: #334155; margin-top: 4px; }
    /* 최근 수업일 */
    .an-day-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(103,232,249,0.05); }
    .an-day-row:last-child { border-bottom: none; }
    .an-day-date { font-family: 'Space Mono', monospace; font-size: 12px; color: #94A3B8; min-width: 100px; white-space: nowrap; }
    .an-day-bar-wrap { flex: 1; background: rgba(255,255,255,0.04); border-radius: 99px; height: 8px; overflow: hidden; }
    .an-day-bar { height: 100%; border-radius: 99px; transition: width .4s ease; }
    .an-day-rate { font-family: 'Space Mono', monospace; font-size: 12px; min-width: 44px; text-align: right; font-weight: 700; }
    .an-day-chips { display: flex; gap: 6px; min-width: 160px; justify-content: flex-end; font-size: 11px; }
    .an-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; font-weight: 700; }
    /* 결석 순위 */
    .an-abs-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(103,232,249,0.05); }
    .an-abs-row:last-child { border-bottom: none; }
    .an-rank { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; min-width: 26px; text-align: center; }
    .an-abs-name { font-weight: 700; font-size: 14px; color: #F1F5F9; min-width: 70px; }
    .an-abs-meta { font-size: 12px; color: #CBD5E1; font-weight: 600; }
    .an-abs-dates { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
    .an-abs-date-chip { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-family: 'Space Mono', monospace; }
    .an-abs-count { font-family: 'Space Mono', monospace; font-size: 18px; font-weight: 700; min-width: 32px; text-align: right; }
    .sev-safe   { background: rgba(45,212,191,0.12);  color: #2DD4BF; }
    .sev-warn   { background: rgba(252,211,77,0.15);  color: #FCD34D; }
    .sev-danger { background: rgba(248,113,113,0.18); color: #F87171; }
    .an-legend  { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
    .an-legend-item { font-size: 11px; color: #64748B; display: flex; align-items: center; gap: 5px; }
    .an-search-wrap { margin-bottom: 14px; }
    @media (max-width: 768px) {
      .an-today-grid { grid-template-columns: repeat(2,1fr); }
      .an-day-chips  { display: none; }
      .an-abs-dates  { display: none; }
    }

    /* ── 운영설명 ── */
    .guide-section { margin-bottom: 32px; }
    .guide-section-title { font-size: 11px; font-weight: 700; font-family: 'Space Mono', monospace; letter-spacing: 0.2em; text-transform: uppercase; color: #67E8F9; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
    .guide-section-title::after { content: ''; flex: 1; height: 1px; background: rgba(103,232,249,0.12); }
    .guide-steps { display: flex; flex-direction: column; gap: 10px; }
    .guide-step { display: flex; gap: 14px; align-items: flex-start; background: #1E293B; border: 1px solid rgba(103,232,249,0.10); border-radius: 16px; padding: 16px 18px; }
    .guide-step-num { width: 30px; height: 30px; border-radius: 50%; background: rgba(103,232,249,0.12); border: 1px solid rgba(103,232,249,0.25); display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; color: #67E8F9; flex-shrink: 0; }
    .guide-step-body { flex: 1; }
    .guide-step-title { font-size: 14px; font-weight: 700; color: #F1F5F9; margin-bottom: 4px; }
    .guide-step-desc { font-size: 12px; color: #64748B; line-height: 1.8; }
    .guide-step-desc b { color: #94A3B8; font-weight: 700; }
    .guide-step-desc code { font-family: 'Space Mono', monospace; background: rgba(103,232,249,0.08); padding: 1px 6px; border-radius: 4px; font-size: 11px; color: #67E8F9; }
    .guide-rule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
    .guide-rule-card { background: #1E293B; border: 1px solid rgba(103,232,249,0.10); border-radius: 14px; padding: 14px 16px; }
    .guide-rule-icon { font-size: 20px; margin-bottom: 8px; }
    .guide-rule-title { font-size: 13px; font-weight: 700; color: #F1F5F9; margin-bottom: 4px; }
    .guide-rule-desc { font-size: 12px; color: #64748B; line-height: 1.7; }
    .guide-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
    .guide-flow-item { background: rgba(103,232,249,0.08); border: 1px solid rgba(103,232,249,0.2); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #94A3B8; }
    .guide-flow-arrow { color: #334155; font-size: 16px; }
    .guide-tip { background: rgba(252,211,77,0.06); border: 1px solid rgba(252,211,77,0.2); border-radius: 12px; padding: 12px 16px; font-size: 12px; color: #94A3B8; line-height: 1.8; margin-top: 10px; }
    .guide-tip::before { content: '💡 '; }
    .guide-warn { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.2); border-radius: 12px; padding: 12px 16px; font-size: 12px; color: #94A3B8; line-height: 1.8; margin-top: 10px; }
    .guide-warn::before { content: '⚠️ '; }
    .guide-nav-btn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 12px; font-weight: 700; color: #CBD5E1; transition: all .2s; width: 100%; text-align: left; border: 1px solid rgba(148,163,184,0.3); margin-top: 8px; }
    .guide-nav-btn:hover { background: rgba(103,232,249,0.06); color: #67E8F9; border-color: rgba(103,232,249,0.2); }
    .guide-nav-btn.active { background: rgba(103,232,249,0.10); color: #67E8F9; border-color: rgba(103,232,249,0.25); }

    /* ── back 버튼 ── */
    .back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(103,232,249,0.07); border: 1px solid rgba(103,232,249,0.2); border-radius: 10px; color: #67E8F9; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; }
    .back-btn:hover { background: rgba(103,232,249,0.14); }
    .grade-tab { padding: 7px 14px; background: rgba(148,163,184,0.06); border: 1px solid rgba(148,163,184,0.15); border-radius: 10px; color: #64748B; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
    .grade-tab.active { background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.35); color: #38BDF8; }
    /* ── 토익 성적 시각화 ── */
    .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
    .chart-card { background: #1E293B; border: 1px solid rgba(52,211,153,0.12); border-radius: 18px; padding: 22px 24px; }
    .chart-card-full { grid-column: 1 / -1; }
    .chart-card-title { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #34D399; margin-bottom: 16px; }
    .no-data-chart { display: flex; align-items: center; justify-content: center; height: 160px; color: #475569; font-size: 13px; }
    @media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } .chart-card-full { grid-column: 1; } }
    .grade-section { margin-bottom: 20px; border-radius: 20px; padding: 20px 22px; }
    .grade-section-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
    .grade-class-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    @media(max-width:900px) { .grade-class-grid { grid-template-columns: repeat(2,1fr); } }
    @media(max-width:540px) { .grade-class-grid { grid-template-columns: 1fr; } }
    .grade-class-card { background: rgba(15,23,42,0.55); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
    .grade-class-card-name { font-size: 13px; font-weight: 800; color: #F1F5F9; line-height: 1.3; }
    .grade-class-card-cnt  { font-size: 11px; color: #94A3B8; margin-top:2px; }
    .stu-chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
    .stu-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 4px 3px 9px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; font-size: 12px; color: #CBD5E1; }
    .stu-chip-x { background: none; border: none; color: #475569; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; transition: color .1s; }
    .stu-chip-x:hover { color: #F87171; }
    .add-stu-icon-btn { width: 30px; height: 30px; border-radius: 50%; background: rgba(148,163,184,0.08); border: 1px solid rgba(148,163,184,0.2); color: #94A3B8; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; line-height: 1; transition: all .15s; flex-shrink: 0; }
    .add-stu-icon-btn:hover { background: rgba(148,163,184,0.16); color: #CBD5E1; }

    /* ── 반 카드 그리드 (출석체크 1단계) ── */
    .class-att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
    .class-att-card { background: #1E293B; border: 1px solid rgba(103,232,249,0.12); border-radius: 24px; padding: 22px; cursor: pointer; text-align: left; transition: box-shadow .2s, transform .2s, border-color .2s; display: flex; flex-direction: column; gap: 14px; width: 100%; }
    .class-att-card:hover { box-shadow: 0 8px 32px rgba(103,232,249,0.12); transform: translateY(-2px); border-color: rgba(103,232,249,0.3); }
    .class-att-name { font-size: 20px; font-weight: 900; color: #F1F5F9; }
    .class-att-teacher { font-size: 12px; color: #64748B; margin-top: 2px; }
    .class-att-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
    .class-stat-box { padding: 10px 8px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .class-stat-lbl { font-size: 9px; font-weight: 700; font-family: 'Space Mono',monospace; text-transform: uppercase; letter-spacing: 0.1em; }
    .class-stat-val { font-size: 22px; font-weight: 900; font-family: 'Space Mono',monospace; line-height: 1; }
    .class-pct-row  { display: flex; justify-content: space-between; margin-bottom: 5px; }
    .class-pct-bar  { width: 100%; height: 7px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden; }
    .class-pct-fill { height: 100%; border-radius: 99px; transition: width .5s ease; }

    /* ── 학생 카드 그리드 (출석체크 2단계) ── */
    .class-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
    .stu-att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
    .stu-att-card { background: #1E293B; border: 2px solid rgba(103,232,249,0.08); border-radius: 20px; padding: 18px 14px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: border-color .2s; }
    .stu-att-card:hover { border-color: rgba(103,232,249,0.2); }
    .stu-status-present { border-color: #2DD4BF !important; }
    .stu-status-late    { border-color: #FCD34D !important; }
    .stu-status-early   { border-color: #FB923C !important; }
    .stu-status-absent  { border-color: #F87171 !important; }
    .stu-att-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; margin-bottom: 10px; transition: background .2s, color .2s; }
    .stu-att-name  { font-weight: 700; font-size: 15px; color: #F1F5F9; margin-bottom: 2px; }
    .stu-att-grade { font-size: 11px; color: #64748B; margin-bottom: 12px; }
    .stu-att-btns  { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%; margin-bottom: 8px; }
    .stu-att-btns .att-btn { padding: 7px 4px; font-size: 11px; border-radius: 9px; }
    .stu-att-note  { width: 100%; background: #0F172A; border: 1px solid rgba(103,232,249,0.12); border-radius: 8px; padding: 5px 9px; color: #94A3B8; font-size: 11px; outline: none; font-family: 'Noto Sans KR',sans-serif; transition: border-color .2s; }
    .stu-att-note::placeholder { color: #334155; }
    .stu-att-note:focus { border-color: #67E8F9; }
    @media (max-width: 768px) {
      .class-att-grid { grid-template-columns: 1fr; }
      .stu-att-grid   { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    }

    /* ── 출결 검색바 ── */
    .att-search-bar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
    .att-search-input { flex: 1; min-width: 160px; background: #1E293B; border: 1px solid rgba(103,232,249,0.2); border-radius: 12px; padding: 8px 14px; color: #E2E8F0; font-size: 14px; font-family: 'Noto Sans KR', sans-serif; outline: none; transition: border-color .2s; }
    .att-search-input::placeholder { color: #475569; }
    .att-search-input:focus { border-color: #67E8F9; }
    .date-range-sep { color: #475569; font-size: 14px; flex-shrink: 0; }
    .search-btn { padding: 8px 18px; border-radius: 10px; background: rgba(103,232,249,0.10); border: 1px solid rgba(103,232,249,0.3); color: #67E8F9; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
    .search-btn:hover { background: rgba(103,232,249,0.18); }

    /* ── 모바일 ── */
    .mobile-menu-btn { display: none; position: fixed; top: 14px; right: 14px; z-index: 60; width: 44px; height: 44px; background: #1E293B; color: #67E8F9; border: 1px solid rgba(103,232,249,0.3); border-radius: 12px; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40; backdrop-filter: blur(4px); }

    @media (max-width: 768px) {
      .sidebar { position: fixed; inset-y: 0; left: 0; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,.3); }
      .sidebar.open { transform: translateX(0); }
      .sidebar-overlay.open { display: block; }
      .mobile-menu-btn { display: flex; }
      .main { padding: 20px 16px 60px; padding-top: 68px; }
      .stats-row { grid-template-columns: repeat(2,1fr); }
      .att-note-input { flex: 0 0 100%; }
      .att-btns { gap: 4px; }
      .att-btn  { padding: 5px 8px; font-size: 11px; }
      th:nth-child(3), td:nth-child(3) { display: none; }
    }