/* ========================================================
   CSS 변수 (테마 / UI 커스터마이징)
   ======================================================== */
:root {
  --color-primary:    #3b82f6;
  --color-primary-d:  #2563eb;
  --color-secondary:  #1e40af;
  --color-accent:     #f59e0b;
  --color-bg:         #f8fafc;
  --color-surface:    #ffffff;
  --color-border:     #e2e8f0;
  --color-text:       #1e293b;
  --color-text-muted: #64748b;
  --color-danger:     #ef4444;
  --color-success:    #22c55e;
  --color-warning:    #f59e0b;
  --color-info:       #3b82f6;
  --color-late:       #f97316;

  --radius:    8px;
  --radius-lg: 12px;
  --shadow:    0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.05);

  --header-h:  56px;
  --nav-h:     44px;
  --nav-mob-h: 44px;
  --mobile-nav-h: 56px;

  /* ── 헤더 레이아웃 (PC) ───────────────────────────── */
  --hdr-padding-h:  1rem;
  --hdr-left-gap:   .6rem;
  --hdr-right-gap:  .6rem;
  --hdr-title-size: 1rem;
  --hdr-btn-size:   .8rem;
  --hdr-bg:         var(--color-surface);
  --hdr-border-w:   1px;
  --hdr-align:      center;
  --hdr-justify:    space-between;
  /* ── 헤더 레이아웃 (모바일) ──────────────────────── */
  --hdr-mob-h:      88px;
  --hdr-mob-pad-h:  .9rem;
  --hdr-mob-gap:    .2rem;
  --hdr-mob-title:  .82rem;
  --hdr-mob-btn:    .72rem;
  --hdr-mob-bg:     var(--color-surface);
  --hdr-mob-align:  flex-start;
  /* ── 탭 네비 (PC) ────────────────────────────────── */
  --nav-font:     .9rem;
  --nav-pad-h:    .9rem;
  --nav-pad-v:    .6rem;
  --nav-radius:   0px;
  --nav-bg:       var(--color-surface);
  --nav-justify:  flex-start;
  /* ── 탭 네비 (모바일) ────────────────────────────── */
  --nav-mob-font:   .8rem;
  --nav-mob-pad-h:  .75rem;
  --nav-mob-pad-v:  .55rem;
  --nav-mob-radius: 0px;

  --transition: .15s ease;

  /* ── UI 커스터마이징 확장 변수 ── */
  --btn-radius:    var(--radius);
  --btn-shadow:    none;
  --btn-padding-y: .5rem;
  --btn-padding-x: 1rem;

  --font-family:   'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-size-base: 15px;

  --density-cell:  .6rem .85rem;    /* td 패딩 */
  --density-card:  1.25rem;         /* card 패딩 */
  --density-form:  1rem;            /* form-group 마진 */
}

/* 다크 모드 — html 요소에 data-theme="dark" 설정 시 적용 */
html[data-theme="dark"] {
  --color-bg:         #0f172a;
  --color-surface:    #1e293b;
  --color-border:     #334155;
  --color-text:       #f1f5f9;
  --color-text-muted: #94a3b8;
  color-scheme: dark;
}
html[data-theme="dark"] body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ========================================================
   기본 초기화
   ======================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 접근성: 동작 감소 선호 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 접근성: 본문 건너뛰기 링크 */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: .5rem 1rem;
  background: var(--color-primary);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

html { font-size: var(--font-size-base); }

body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

hr { border: none; border-top: 1px solid var(--color-border); margin: 1rem 0; }

/* ========================================================
   유틸리티
   ======================================================== */
.hidden   { display: none !important; }
.text-muted { color: var(--color-text-muted); }
.text-sm  { font-size: .85rem; }
.text-xs  { font-size: .75rem; }
.text-lg  { font-size: 1.15rem; }
.text-bold{ font-weight: 600; }
.text-right { text-align: right; }
.text-center{ text-align: center; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; align-items: center; gap: .5rem; }
.align-center { align-items: center; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-4 { gap: 1rem; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .5rem 0;
}
.panel-header > .flex-row { flex: 1 1 auto; min-width: 0; }

.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }

/* ========================================================
   페이지 공통
   ======================================================== */
.page { min-height: 100vh; }
.page-inner { padding: 1.5rem; }

/* ========================================================
   버튼
   ======================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  font-size: .875rem; font-weight: 500; cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  text-decoration: none;
  touch-action: manipulation;
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary   { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-d); }

.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover:not(:disabled) { filter: brightness(.9); }

.btn-danger    { background: var(--color-danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(.9); }

.btn-success   { background: var(--color-success); color: #fff; }
.btn-warning   { background: var(--color-warning); color: #fff; }

.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover:not(:disabled) { background: var(--color-border); }

.btn-ghost {
  background: transparent; border-color: transparent; color: var(--color-text);
}
.btn-ghost:hover:not(:disabled) { background: rgba(0,0,0,.06); }

html[data-theme="dark"] .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.08); }

.btn-sm { padding: .3rem .65rem; font-size: .8rem; }
.btn-lg { padding: .65rem 1.4rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: .35rem .5rem; }
/* XS 버튼 기본 */
.btn-xs { padding: .2rem .35rem; font-size: .75rem; }
/* 어드민 관리 버튼 그룹 — PC: 1행, 모바일: 2×2 그리드 */
.admin-btn-group { display: flex; flex-wrap: nowrap; align-items: center; gap: .25rem; }
.admin-btn-group .btn-xs { white-space: nowrap; flex-shrink: 0; }
.admin-btn-group br { display: none; }

/* 어드민 계정 테이블 — PC
   전략: auto 레이아웃으로 관리 열은 버튼 크기만, 나머지 열이 빈 공간을 채움 */
#user-sub-content .table { table-layout: auto; width: 100%; }
/* 모든 셀 줄바꿈 없이 */
#user-sub-content .table th,
#user-sub-content .table td { white-space: nowrap; }
/* 아이디/이름에 width 힌트 → 남은 공간을 이 두 열이 나눠 가짐 */
#user-sub-content .table th:nth-child(1),
#user-sub-content .table td:nth-child(1) { width: 22%; }
#user-sub-content .table th:nth-child(2),
#user-sub-content .table td:nth-child(2) { width: 16%; }
/* 상태·가입일·관리: width 미지정 → 내용 크기만 차지 */

/* ========================================================
   폼
   ======================================================== */
.form-group { margin-bottom: var(--density-form); }
.form-group label {
  display: block; font-size: .85rem; font-weight: 500;
  color: var(--color-text-muted); margin-bottom: .3rem;
}
.form-row { display: flex; gap: .75rem; }
.form-row .form-group { flex: 1; }

input, select, textarea {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .875rem;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

textarea { resize: vertical; min-height: 80px; }
select { cursor: pointer; }

input[type="checkbox"], input[type="radio"] { width: auto; cursor: pointer; }
/* readonly/disabled 필드 시각적 구분 */
input[readonly], select[readonly], textarea[readonly] {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.75;
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.65;
}

.input-pw-wrap { position: relative; }
.input-pw-wrap input { padding-right: 2.4rem; }
.btn-pw-toggle {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0;
}

/* 비밀번호 강도 */
.pw-strength { height: 4px; border-radius: 2px; margin-top: .35rem; transition: width .3s, background .3s; }
.pw-strength.weak   { background: var(--color-danger);  width: 33%; }
.pw-strength.medium { background: var(--color-warning); width: 66%; }
.pw-strength.strong { background: var(--color-success); width: 100%; }

/* 파일 드랍존 */
.dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.dropzone.drag-over { border-color: var(--color-primary); background: rgba(59,130,246,.05); }
.dropzone.has-file  { border-color: var(--color-success, #10b981); background: rgba(16,185,129,.05); color: var(--color-success, #10b981); font-weight: 500; }
.dropzone p { color: var(--color-text-muted); font-size: .875rem; pointer-events: none; }

/* ========================================================
   배지
   ======================================================== */
.badge {
  display: inline-block; padding: .15rem .5rem;
  border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.badge-primary  { background: var(--color-primary);  color: #fff; }
.badge-danger   { background: var(--color-danger);   color: #fff; }
.badge-success  { background: var(--color-success);  color: #fff; }
.badge-warning  { background: var(--color-warning);  color: #fff; }
.badge-info     { background: var(--color-info);     color: #fff; }
.badge-muted    { background: var(--color-border);   color: var(--color-text-muted); }
.badge-late     { background: var(--color-late);     color: #fff; }

/* ========================================================
   카드
   ======================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--density-card);
  box-shadow: var(--shadow);
}
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
/* 통계 카드 */
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  text-align: center;
}
.stat-value { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: .8rem; color: var(--color-text-muted); margin-top: .2rem; }

/* ========================================================
   테이블
   ======================================================== */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table {
  width: 100%; border-collapse: collapse; font-size: .875rem;
}
th {
  background: var(--color-bg); font-weight: 600;
  padding: .65rem .85rem; text-align: left;
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}
td {
  padding: var(--density-cell); border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(0,0,0,.02); }
html[data-theme="dark"] tbody tr:hover { background: rgba(255,255,255,.03); }

/* 성적 매트릭스 */
.grade-matrix th, .grade-matrix td {
  text-align: center; padding: .45rem .6rem; min-width: 80px;
}
.grade-matrix .student-name { text-align: left; min-width: 100px; white-space: nowrap; }
.grade-cell { cursor: pointer; }
.grade-cell:hover { background: rgba(59,130,246,.1); }
.grade-cell input {
  width: 100%; min-width: 60px; text-align: center; padding: .25rem;
  border: 1px solid transparent; background: transparent;
  font-size: .85rem;
}
.grade-cell input:focus { border-color: var(--color-primary); background: var(--color-surface); }
.is-late { color: var(--color-late); font-weight: 600; }
.not-submitted { color: var(--color-text-muted); }

/* ========================================================
   모달
   ======================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
  animation: slideUp .15s ease;
  min-width: 0;
}
.modal-sm { max-width: 360px; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 960px; }

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

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-surface); z-index: 1;
}
.modal-header h3 { font-size: 1rem; font-weight: 600; }
.modal-close {
  background: none; border: none; cursor: pointer; font-size: 1.2rem;
  color: var(--color-text-muted); padding: .2rem .4rem; line-height: 1;
  touch-action: manipulation;
}
.modal-close:hover { color: var(--color-text); }
.modal-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.modal-body {
  padding: 1.25rem;
  overflow-wrap: break-word; word-break: break-word; min-width: 0;
}
.modal-body img, .modal-body video { max-width: 100%; height: auto; }
.modal-footer {
  padding: 1rem 1.25rem; border-top: 1px solid var(--color-border);
  display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap;
  background: var(--color-surface);
}

/* ========================================================
   토스트
   ======================================================== */
.toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 2000; display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.toast {
  padding: .75rem 1.1rem; border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; color: #fff;
  box-shadow: var(--shadow-md); pointer-events: auto;
  animation: slideInRight .2s ease;
  max-width: 320px;
}
.toast-success { background: var(--color-success); }
.toast-error   { background: var(--color-danger);  }
.toast-info    { background: var(--color-info);    }
.toast-warning { background: var(--color-warning); }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ========================================================
   헤더
   ======================================================== */
.app-header {
  height: var(--header-h);
  background: var(--hdr-bg, var(--color-surface));
  border-bottom: var(--hdr-border-w, 1px) solid var(--color-border);
  display: flex; justify-content: var(--hdr-justify, space-between); align-items: var(--hdr-align, center);
  padding: 0 var(--hdr-padding-h, 1rem);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow);
}
.header-left  { display: flex; align-items: center; gap: var(--hdr-left-gap, .6rem); }
.header-right { display: flex; align-items: center; gap: var(--hdr-right-gap, .6rem); }
.header-center { display: flex; align-items: center; gap: .5rem; flex: 1; justify-content: center; }
.header-logo { height: 32px; object-fit: contain; }
.header-title { font-size: var(--hdr-title-size, 1rem); font-weight: 700; white-space: nowrap; }
.header-user { font-size: .85rem; color: var(--color-text-muted); }
.header-class-name { font-size: .9rem; font-weight: 600; color: var(--color-primary); }
.class-selector { font-size: .85rem; font-weight: 600; }

/* ── 수업 선택 드롭다운 ─────────────────────────────────── */
.class-dropdown { position: relative; display: inline-block; }
.class-dropdown-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .65rem; font-size: .85rem; font-weight: 600;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius); color: var(--color-text);
  cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.class-dropdown-toggle:hover,
.class-dropdown.open .class-dropdown-toggle {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.class-dropdown-arrow { font-size: .75rem; transition: transform .2s; display: inline-block; }
.class-dropdown.open .class-dropdown-arrow { transform: rotate(180deg); }
.class-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 200px; max-height: 300px; overflow-y: auto;
  z-index: 500; animation: fadeIn .1s ease;
}
.class-dropdown.open .class-dropdown-menu { display: block; }
.class-dropdown-item {
  display: block; width: 100%; padding: .55rem .85rem;
  text-align: left; background: none; border: none; border-bottom: 1px solid var(--color-border);
  font-size: .875rem; color: var(--color-text); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.class-dropdown-item:last-child { border-bottom: none; }
.class-dropdown-item:hover { background: var(--color-primary); color: #fff; }
.class-dropdown-item.active { background: rgba(59,130,246,.1); font-weight: 600; }
html[data-theme="dark"] .class-dropdown-item.active { background: rgba(59,130,246,.2); }

/* ========================================================
   탭 네비게이션
   ======================================================== */
.tab-nav {
  display: flex; background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto; scrollbar-width: none;
  position: sticky; top: var(--header-h); z-index: 99;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  flex-shrink: 0;
  padding: var(--nav-pad-v, .6rem) var(--nav-pad-h, .9rem);
  border: none; background: none; cursor: pointer;
  font-size: var(--nav-font, .9rem); color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  border-radius: var(--nav-radius, 0px);
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
  touch-action: manipulation;
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }

/* 서브탭 버튼 (계정관리 교사/학생/그룹 등) */
.sub-tab-btn {
  padding: .35rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: .875rem;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.sub-tab-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.sub-tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: 600;
}
html[data-theme="dark"] .sub-tab-btn.active { color: #fff; }

.tab-panel { padding: 1.25rem; }
.app-main { padding-bottom: 2rem; }

/* ========================================================
   모바일 하단 네비
   ======================================================== */
.mobile-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--mobile-nav-h);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex; z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; background: none; border: none; cursor: pointer;
  font-size: .7rem; color: var(--color-text-muted); transition: color var(--transition);
  touch-action: manipulation;
}
.mobile-nav-btn.active { color: var(--color-primary); }
.mobile-nav-icon { font-size: 1.3rem; }
/* PC에서 모바일 하단 네비 숨김 */
@media (min-width: 769px) { .mobile-nav { display: none !important; } }

/* ========================================================
   로그인 페이지
   ======================================================== */
#page-login { position: relative; }
.login-theme-toggle {
  position: fixed; top: 1rem; right: 1rem; z-index: 100;
  font-size: 1.1rem; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  cursor: pointer; transition: background var(--transition), border-color var(--transition);
}
.login-theme-toggle:hover { background: var(--color-border); }
.login-theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.login-wrap {
  display: flex; min-height: 100vh;
  background: var(--color-bg);
}
.login-left {
  width: 40%; min-width: 320px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 3rem;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}
.login-right {
  flex: 1; padding: 2rem;
  display: flex; flex-direction: column;
  overflow-y: auto; max-height: 100vh;
}
.login-header { margin-bottom: 2rem; text-align: center; }
.login-logo   { height: 60px; margin-bottom: .75rem; }
.login-title  { font-size: 1.4rem; font-weight: 700; }
.login-school { font-size: .9rem; color: var(--color-text-muted); margin-top: .25rem; }
.login-form   { max-width: 360px; margin: 0 auto; width: 100%; }
.login-error  { color: var(--color-danger); font-size: .85rem; margin-bottom: .75rem; padding: .5rem .75rem; background: rgba(239,68,68,.1); border-radius: var(--radius); }
.login-warning{ font-size: .78rem; color: var(--color-text-muted); text-align: center; margin-top: .75rem; }

/* 공개 게시판 (로그인 우측) */
.board-tabs { display: flex; gap: .25rem; margin-bottom: 1rem; align-items: center; }
.board-tab-title { font-weight: 600; font-size: 1rem; color: var(--color-text); padding: .25rem 0; }
.board-tab {
  flex: 1; padding: .5rem; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: transparent; cursor: pointer;
  font-size: .875rem; color: var(--color-text-muted); transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.board-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.board-list-login { flex: 1; overflow-y: auto; }
.board-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .6rem .5rem; border-bottom: 1px solid var(--color-border);
  cursor: pointer; gap: .5rem;
  transition: background var(--transition);
}
.board-item:hover { background: rgba(0,0,0,.03); }
.board-item-title { font-size: .875rem; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-item-date  { font-size: .75rem; color: var(--color-text-muted); flex-shrink: 0; }
.board-loading    { color: var(--color-text-muted); text-align: center; padding: 2rem 0; }
.board-more       { margin-top: .75rem; align-self: center; }
.board-content    { white-space: pre-wrap; font-size: .9rem; line-height: 1.7; margin: .75rem 0; }

/* ========================================================
   비밀번호 변경 페이지 (강제)
   ======================================================== */
.change-pw-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.change-pw-card { max-width: 420px; width: 100%; }
.change-pw-card h2 { margin-bottom: .5rem; }

/* ========================================================
   수업 그리드 (학생 수업 선택)
   ======================================================== */
.class-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem;
}
.class-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem; cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.class-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.class-card.inactive { opacity: .6; cursor: default; }
.class-card-title { font-weight: 600; font-size: 1rem; margin-bottom: .4rem; }
.class-card-teacher { font-size: .85rem; color: var(--color-text-muted); }
.class-card-badge {
  position: absolute; top: .75rem; right: .75rem;
}

/* ========================================================
   비공개 수업 배너 (교사)
   ======================================================== */
.class-inactive-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .65rem 1.25rem;
  background: #fff3e0;
  border: 1px solid #e65100;
  border-radius: var(--radius-md);
  margin: .75rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  color: #6d2700;
}
[data-theme="dark"] .class-inactive-banner {
  background: #3d1a00;
  border-color: #ff8f00;
  color: #ffcc80;
}
/* 수업 카드 상태 배지 */
.class-status-badge {
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 999px;
}
.class-status-badge.active   { background: #e8f5e9; color: #2e7d32; }
.class-status-badge.inactive { background: #fce4ec; color: #c62828; }
[data-theme="dark"] .class-status-badge.active   { background: #1b3a1f; color: #81c784; }
[data-theme="dark"] .class-status-badge.inactive { background: #3b1217; color: #ef9a9a; }
/* 수업 카드 내 토글 버튼 */
.class-toggle-btn { font-size: .72rem !important; padding: .15rem .5rem !important; }
/* 공개↑ 버튼 (노란색) */
.btn-warning {
  background: #f9a825;
  color: #2d1a00;
  border: 1px solid #f9a825;
}
.btn-warning:hover { background: #f57f17; border-color: #f57f17; }

/* ========================================================
   과제 목록
   ======================================================== */
.assignment-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
}
.assignment-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  cursor: pointer; transition: box-shadow var(--transition);
}
.assignment-item:hover { box-shadow: var(--shadow-md); }

/* 학생 과제 카드 (card.assignment-card) */
.assignment-card {
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.assignment-card:hover {
  background: var(--color-surface-2, rgba(0,0,0,.04));
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
.assignment-item.draft { border-left: 3px solid var(--color-text-muted); }
.assignment-item.scheduled { border-left: 3px solid var(--color-info); }
.assignment-item-left { flex: 1; min-width: 0; }
.assignment-title { font-weight: 600; font-size: .95rem; margin-bottom: .3rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assignment-due  { font-size: .8rem; color: var(--color-text-muted); }
.assignment-due.overdue { color: var(--color-danger); font-weight: 600; }
.assignment-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.assignment-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex-shrink: 0; }

/* 제출 현황 바 */
.progress-bar-wrap { margin-top: .5rem; }
.progress-bar { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; width: 100%; }
.progress-bar-fill { height: 100%; background: var(--color-primary); border-radius: 3px; transition: width .4s; }

/* ========================================================
   공지사항
   ======================================================== */
.notice-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .6rem;
  cursor: pointer; transition: box-shadow var(--transition);
}
.notice-item:hover { box-shadow: var(--shadow-md); }
.notice-item.urgent { border-left: 4px solid var(--color-danger); }
.notice-item.important { border-left: 4px solid var(--color-warning); }

/* 학생 공지 카드 (card.notice-card) */
.notice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
}
.notice-card {
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.notice-card:hover {
  background: var(--color-surface-2, rgba(0,0,0,.04));
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
.notice-card.importance-urgent   { border-left: 4px solid var(--color-danger); }
.notice-card.importance-important { border-left: 4px solid var(--color-warning); }
.notice-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.notice-title { font-weight: 600; font-size: .9rem; flex: 1; }
.notice-meta  { font-size: .78rem; color: var(--color-text-muted); }

/* 공지 팝업 */
.notice-popup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index: 900; width: 90%; max-width: 500px;
  max-height: 80vh; overflow-y: auto;
}
.notice-popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 899;
}

/* ========================================================
   성적 관리 관련
   ======================================================== */
.grade-config { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.feedback-file-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.feedback-file-item { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.score-visible-toggle { display: flex; align-items: center; gap: .5rem; }

/* 차트 컨테이너 */
.chart-wrap { position: relative; height: 280px; margin-top: 1rem; }

/* ========================================================
   시스템 설정
   ======================================================== */
.settings-section { margin-bottom: 2rem; }
.settings-section h3 { font-size: .95rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--color-border); }

.ext-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.ext-tag {
  display: flex; align-items: center; gap: .3rem;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 999px; padding: .2rem .65rem; font-size: .8rem;
}
.ext-tag .remove { cursor: pointer; color: var(--color-danger); font-weight: 700; background: none; border: none; padding: 0; font-size: .9rem; }

/* UI 커스터마이징 */
.ui-preview-box {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 1rem; margin-top: .5rem; background: var(--color-bg);
}
.theme-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.theme-btn {
  padding: .4rem .85rem; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; font-size: .8rem; font-weight: 500;
}
.theme-btn.active { border-color: var(--color-primary); }

/* 백업 목록 */
.backup-list { display: flex; flex-direction: column; gap: .4rem; }
.backup-item { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: .875rem; }

/* ========================================================
   교사 관리 (어드민)
   ======================================================== */
.teacher-row { cursor: pointer; }
.teacher-row.expanded { background: rgba(59,130,246,.03); }
.student-sub-row td { padding: .4rem .85rem .4rem 2.5rem; background: var(--color-bg); font-size: .82rem; }

/* 학번 검색 자동완성 */
.search-dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 200px; overflow-y: auto; z-index: 50; box-shadow: var(--shadow-md);
}
.search-dropdown-item {
  padding: .5rem .75rem; cursor: pointer; font-size: .875rem;
  transition: background var(--transition);
}
.search-dropdown-item:hover { background: rgba(59,130,246,.08); }
.search-wrap { position: relative; }

/* ========================================================
   휴지통
   ======================================================== */
.trash-item { display: flex; justify-content: space-between; align-items: center; padding: .65rem .85rem; border-bottom: 1px solid var(--color-border); font-size: .875rem; }
.trash-type { display: inline-block; padding: .1rem .45rem; border-radius: 4px; font-size: .75rem; background: var(--color-border); margin-right: .4rem; }

/* ========================================================
   캘린더 뷰
   ======================================================== */
.calendar-wrap { overflow-x: auto; }
.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border);
  border-radius: var(--radius); overflow: hidden;
}
.calendar-day-header {
  background: var(--color-bg); padding: .4rem; text-align: center;
  font-size: .78rem; font-weight: 600; color: var(--color-text-muted);
}
.calendar-cell {
  background: var(--color-surface); min-height: 90px; padding: .35rem;
}
.calendar-cell.other-month { background: var(--color-bg); opacity: .5; }
.calendar-date { font-size: .75rem; color: var(--color-text-muted); margin-bottom: .25rem; }
.calendar-date.today { color: var(--color-primary); font-weight: 700; }
.calendar-event {
  background: var(--color-primary); color: #fff;
  border-radius: 3px; padding: .1rem .3rem; font-size: .72rem;
  margin-bottom: .15rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calendar-event.overdue { background: var(--color-danger); }
.calendar-event.submitted { background: var(--color-success); }

/* ========================================================
   로딩 스피너
   ======================================================== */
.spinner-wrap { display: flex; align-items: center; justify-content: center; padding: 3rem; }
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); }
.empty-state p { margin-top: .5rem; font-size: .9rem; }

/* ========================================================
   미리보기 (파일)
   ======================================================== */
.file-preview-wrap { text-align: center; margin-top: .5rem; }
.file-preview-wrap img { max-width: 100%; max-height: 400px; border-radius: var(--radius); }
.file-preview-wrap iframe { width: 100%; height: 400px; border: 1px solid var(--color-border); border-radius: var(--radius); }

/* ========================================================
   게시판
   ======================================================== */
.board-post-meta { display: flex; gap: 1rem; font-size: .8rem; color: var(--color-text-muted); margin-top: .5rem; }
.board-comment-item { padding: .6rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: .4rem; font-size: .875rem; }
.board-comment-meta { font-size: .75rem; color: var(--color-text-muted); margin-bottom: .25rem; }
.pinned-badge { background: var(--color-accent); color: #fff; font-size: .7rem; padding: .1rem .4rem; border-radius: 3px; margin-right: .3rem; }
/* 게시판 테이블 — 모바일 제목 최대화 */
.board-author-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  /* col 너비 직접 변경 (table-layout:fixed는 col 너비가 우선) */
  col.board-num-col    { width: 28px !important; }
  col.board-author-col { width: 52px !important; }
  col.board-cmt-col    { width: 0 !important; }
  col.board-view-col   { width: 0 !important; }
  /* th·td 숨김 및 크기 조정 */
  th.board-num-col, td.board-num-col { font-size: .75rem; }
  th.board-cmt-col, td.board-cmt-col,
  th.board-view-col, td.board-view-col { display: none !important; padding: 0; border: 0; }
  /* 작성자 텍스트 생략 */
  .board-author-cell { max-width: 52px; }
}

/* ========================================================
   툴팁
   ======================================================== */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; font-size: .75rem;
  padding: .25rem .5rem; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ========================================================
   섹션 제목 / 액션 헤더
   ======================================================== */
.section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }
.action-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.action-bar-left, .action-bar-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ========================================================
   용량 게이지
   ======================================================== */
.storage-bar-wrap { margin-top: .5rem; }
.storage-bar { height: 10px; background: var(--color-border); border-radius: 5px; overflow: hidden; }
.storage-bar-fill { height: 100%; border-radius: 5px; transition: width .5s; }
.storage-bar-fill.safe    { background: var(--color-success); }
.storage-bar-fill.warn    { background: var(--color-warning); }
.storage-bar-fill.danger  { background: var(--color-danger); }
.storage-info { display: flex; justify-content: space-between; font-size: .78rem; color: var(--color-text-muted); margin-top: .3rem; }

/* ========================================================
   인쇄 스타일
   ======================================================== */
@media print {
  .app-header, .tab-nav, .mobile-nav, .btn, .action-bar, #toast-container { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .modal { box-shadow: none; border: 1px solid #ccc; }
  .tab-panel { display: block !important; }
}

/* ========================================================
   PC 전용 기능 안내
   ======================================================== */
/* 휴지통 버튼 PC/모바일 레이블 전환 */
.trash-desktop-label { display: inline; }
.trash-mobile-icon   { display: none; }
@media (max-width: 600px) {
  .trash-desktop-label { display: none; }
  .trash-mobile-icon   { display: inline; }
}

.mobile-pc-notice {
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: .9rem;
  margin-bottom: 1rem;
}
.mobile-pc-notice .mobile-pc-icon { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* ========================================================
   반응형
   ======================================================== */
@media (max-width: 768px) {
  /* 로그인 1단 */
  .login-wrap { flex-direction: column; }
  .login-left { width: 100%; padding: 2rem 1.5rem; border-right: none; border-bottom: 1px solid var(--color-border); }
  .login-right { padding: 1.5rem; max-height: none; }

  /* 헤더 */
  .header-center { display: none; }
  .header-title { font-size: .9rem; }

  /* 탭 */
  .tab-nav { top: var(--header-h); flex-wrap: wrap; overflow-x: visible; }
  .tab-btn { padding: .55rem .75rem; font-size: .8rem; flex-shrink: 1; }

  /* 모바일 하단 네비 표시 */
  .mobile-nav { display: flex; }
  #student-main { padding-bottom: calc(var(--mobile-nav-h) + 1rem); }

  /* 테이블 */
  .grade-matrix { display: none; } /* 성적 매트릭스 숨김 */
  .mobile-pc-notice { display: block; }

  /* 과제 */
  .assignment-item { flex-direction: column; }
  .assignment-item-right { flex-direction: row; align-items: center; }

  /* 카드 그리드 */
  .card-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .class-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .modal { max-width: calc(100vw - 2rem); }
  .tab-panel { padding: .75rem; }
  /* 패널 헤더 내부 flex-row(버튼 그룹 등)도 줄바꿈 허용 */
  .panel-header .flex-row { flex-wrap: wrap; }
  /* 어드민 계정 관리 테이블: 가입일 컬럼 숨김 (4컬럼으로 줄여 모바일 가로 넘침 방지) */
  .admin-date-col { display: none !important; }
  /* 모바일 — 관리 버튼 그룹 2×2 그리드 복원 */
  .admin-btn-group { display: grid; grid-template-columns: repeat(2, 44px); gap: .25rem; }
  .admin-btn-group .btn-xs { white-space: normal; width: 100%; min-height: 34px; line-height: 1.25; }
  .admin-btn-group br { display: inline; }
  /* 모바일 — width 힌트 해제, 셀 줄바꿈 허용 */
  #user-sub-content .table th, #user-sub-content .table td { width: auto; white-space: normal; }
}

/* ========================================================
   모바일 헤더 2행 레이아웃 (≤600px)
   ======================================================== */
@media (max-width: 600px) {
  /* 헤더 높이 변수 재정의 → tab-nav sticky 자동 반영 */
  :root { --header-h: var(--hdr-mob-h, 88px); }

  .app-header {
    height: auto;
    min-height: var(--hdr-mob-h, 88px);
    align-items: var(--hdr-mob-align, flex-start);
    padding: .45rem var(--hdr-mob-pad-h, .9rem);
  }

  /* ── 왼쪽: 사이트명(1행) / 수업선택버튼(2행) ── */
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hdr-mob-gap, .2rem);
    flex: 1;
    min-width: 0;
    padding-top: .1rem;
  }
  .header-left .header-logo { height: 22px; }
  .header-left .header-title { font-size: var(--hdr-mob-title, .82rem); white-space: nowrap; }
  .header-left .class-selector {
    font-size: var(--hdr-mob-btn, .8rem);
    max-width: 100%;
    padding: .15rem .35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── 오른쪽: [이름  🌙] / [비번변경  로그아웃] — 2×2 그리드 ── */
  .header-right {
    display: grid;
    grid-template-columns: auto auto;
    gap: .22rem var(--hdr-mob-gap, .35rem);
    align-items: center;
    flex-shrink: 0;
    padding-top: .1rem;
  }
  .header-right .header-user {
    font-size: var(--hdr-mob-btn, .78rem);
    text-align: center;
  }
  .header-right .btn-sm {
    font-size: var(--hdr-mob-btn, .72rem);
    padding: .2rem .45rem;
  }
}

/* ========================================================
   UI 커스터마이징 — 스타일 변형
   ======================================================== */

/* ── 버튼 스타일 프리셋 ────────────────────────────────── */

/* flat: 그림자 없음, 약한 배경 */
[data-btn-preset="flat"] .btn { box-shadow: none !important; border-radius: 6px; }

/* pill: 완전 타원형 */
[data-btn-preset="pill"] .btn { border-radius: 9999px; }

/* outlined: 테두리만, 배경 없음 */
[data-btn-preset="outlined"] .btn-primary  { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
[data-btn-preset="outlined"] .btn-primary:hover:not(:disabled)  { background: var(--color-primary); color: #fff; }
[data-btn-preset="outlined"] .btn-danger   { background: transparent; border-color: var(--color-danger); color: var(--color-danger); }
[data-btn-preset="outlined"] .btn-danger:hover:not(:disabled)   { background: var(--color-danger); color: #fff; }
[data-btn-preset="outlined"] .btn-success  { background: transparent; border-color: var(--color-success); color: var(--color-success); }
[data-btn-preset="outlined"] .btn-success:hover:not(:disabled)  { background: var(--color-success); color: #fff; }

/* glass: 반투명 유리 효과 */
[data-btn-preset="glass"] .btn-primary {
  background: rgba(59,130,246,.25);
  backdrop-filter: blur(8px);
  border-color: rgba(59,130,246,.4);
  color: var(--color-primary);
}
[data-btn-preset="glass"] .btn-primary:hover:not(:disabled) { background: rgba(59,130,246,.4); }
[data-btn-preset="glass"] .btn-danger {
  background: rgba(239,68,68,.2);
  backdrop-filter: blur(8px);
  border-color: rgba(239,68,68,.35);
  color: var(--color-danger);
}
[data-btn-preset="glass"] .btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.35); }

/* ── 그림자 강도 ───────────────────────────────────────── */
[data-shadow="none"]  { --shadow: none; --shadow-md: none; --shadow-lg: none; }
[data-shadow="sm"]    { --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); }
[data-shadow="md"]    { --shadow: 0 4px 8px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.07); --shadow-md: 0 8px 16px rgba(0,0,0,.14); }
[data-shadow="lg"]    { --shadow: 0 8px 20px rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.10); --shadow-md: 0 12px 28px rgba(0,0,0,.18); --shadow-lg: 0 20px 40px rgba(0,0,0,.20); }

/* ── 버튼 패딩 ─────────────────────────────────────────── */
[data-btn-padding="compact"] .btn { --btn-padding-y: .3rem; --btn-padding-x: .7rem; font-size: .82rem; }
[data-btn-padding="large"]   .btn { --btn-padding-y: .65rem; --btn-padding-x: 1.4rem; font-size: .95rem; }

/* ── 컴포넌트 밀도 ─────────────────────────────────────── */
[data-density="compact"] {
  --density-cell:  .35rem .65rem;
  --density-card:  .75rem;
  --density-form:  .6rem;
}
[data-density="compact"] .tab-panel { padding: .75rem; }
[data-density="compact"] .btn-sm { padding: .2rem .5rem; font-size: .78rem; }

[data-density="comfortable"] {
  --density-cell:  .85rem 1.1rem;
  --density-card:  1.75rem;
  --density-form:  1.35rem;
}
[data-density="comfortable"] .tab-panel { padding: 2rem; }
[data-density="comfortable"] .panel-header { padding: 1rem 0 .75rem; }

/* ── 카드 스타일 ───────────────────────────────────────── */
/* border: 테두리형 (그림자 없음) */
[data-card-style="border"] .card,
[data-card-style="border"] .stat-card { box-shadow: none; border: 1px solid var(--color-border); }

/* shadow: 그림자형 (테두리 투명) */
[data-card-style="shadow"] .card,
[data-card-style="shadow"] .stat-card { box-shadow: var(--shadow-md); border-color: transparent; }

/* flat: 플랫형 (그림자·테두리 없음, 배경 bg색) */
[data-card-style="flat"] .card,
[data-card-style="flat"] .stat-card { box-shadow: none; border-color: transparent; background: var(--color-bg); }

/* ── 테이블 스타일 ─────────────────────────────────────── */
/* striped: 홀짝 줄무늬 */
[data-table-style="striped"] tbody tr:nth-child(even) { background: rgba(0,0,0,.03); }
[data-table-style="striped"] html[data-theme="dark"] tbody tr:nth-child(even) { background: rgba(255,255,255,.04); }

/* bordered: 모든 셀에 테두리 */
[data-table-style="bordered"] td,
[data-table-style="bordered"] th { border: 1px solid var(--color-border); }

/* solid: 기본 (추가 스타일 없음) */

/* ── 교사 대시보드 ──────────────────────────────────────────── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.4rem;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 768px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* ── 수업 선택 드롭다운 ─────────────────────────────────────── */
.class-select-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.class-select-item {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition, 0.15s);
  border: 1px solid transparent;
}
.class-select-item:hover {
  background: var(--color-surface-2, #f0f2f5);
  border-color: var(--color-border);
}
.class-select-item.active {
  background: var(--color-primary-bg, #e8f0fe);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.class-select-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.class-select-meta {
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

/* ── 과제 목록 카드 그리드 레이아웃 ────────────────────────────────── */
#assign-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
  margin-top: .5rem;
}
.assign-card {
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.assign-card:hover {
  background: var(--color-surface-2, rgba(0,0,0,.04));
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.assign-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .4rem;
}
.assign-card-bot {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-top: .35rem;
}
.assign-card-bot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── 과제 관리 리스트 ─────────────────────────────────────────────── */
#assign-manage-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin-top: .5rem;
}
@media (max-width: 768px) {
  #assign-manage-list {
    grid-template-columns: 1fr;
  }
}
.assign-manage-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.assign-manage-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
/* 왼쪽: 과제 정보 */
.assign-manage-card .amc-info {
  flex: 1;
  min-width: 0;
}
.assign-manage-card .amc-title {
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .2rem;
}
.assign-manage-card .amc-meta {
  font-size: .8rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
/* 오른쪽: 액션 버튼 그룹 */
.assign-manage-card .amc-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
}
/* 모바일: 버튼 줄바꿈 허용 */
@media (max-width: 600px) {
  .assign-manage-card {
    flex-wrap: wrap;
  }
  .assign-manage-card .amc-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* ========================================================
   탭 네비 배치 & 활성 스타일 커스텀
   ======================================================== */
.tab-nav[data-justify="center"] { justify-content: center; }
.tab-nav[data-justify="even"] .tab-btn { flex: 1; text-align: center; justify-content: center; }

[data-nav-active="fill"] .tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-bottom-color: transparent;
  border-radius: var(--nav-radius, 0px);
}
[data-nav-active="pill"] .tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-bottom-color: transparent;
  border-radius: 999px;
}

/* 모바일 탭 네비 배치 & 활성 스타일 (PC와 독립) */
@media (max-width: 768px) {
  .tab-nav { background: var(--nav-mob-bg, var(--nav-bg, var(--color-surface))); }
  .tab-nav[data-mob-justify="start"]  { justify-content: flex-start; }
  .tab-nav[data-mob-justify="center"] { justify-content: center; }
  .tab-nav[data-mob-justify="even"] .tab-btn { flex: 1; text-align: center; justify-content: center; }
  [data-nav-mob-active="fill"] .tab-btn.active {
    background: var(--color-primary); color: #fff;
    border-bottom-color: transparent; border-radius: var(--nav-mob-radius, 0px);
  }
  [data-nav-mob-active="pill"] .tab-btn.active {
    background: var(--color-primary); color: #fff;
    border-bottom-color: transparent; border-radius: 999px;
  }
}

/* ========================================================
   UI 커스터마이징 패널 스타일
   ======================================================== */
.ui-cust-wrap { display: flex; flex-direction: column; gap: 1rem; }
.ui-cust-topbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .5rem;
  border-bottom: 1px solid var(--color-border); padding-bottom: .75rem;
}
.ui-cust-subtabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.ui-cust-stab {
  padding: .35rem .8rem; border-radius: var(--radius-sm, 6px);
  border: 1px solid transparent; font-size: .82rem; cursor: pointer;
  background: none; color: var(--color-text-muted); transition: background .15s, color .15s, border-color .15s;
}
.ui-cust-stab:hover { background: var(--color-hover, #f1f5f9); color: var(--color-text); }
.ui-cust-stab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.ui-cust-mode-toggle { display: flex; gap: .35rem; }

/* PC 모드: 설정 위 / 미리보기 아래 */
.ui-cust-body--pc { display: flex; flex-direction: column; gap: 1rem; }
.ui-cust-body--pc .ui-cust-preview {
  border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); overflow: hidden;
}

/* 모바일 모드: 설정 왼쪽 / 390px 미리보기 오른쪽 */
.ui-cust-body--mob { display: flex; gap: 1.5rem; align-items: flex-start; }
.ui-cust-body--mob .ui-cust-settings { flex: 1; min-width: 0; }
.ui-cust-body--mob .ui-cust-preview {
  width: 390px; flex-shrink: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); overflow: hidden;
  position: sticky; top: calc(var(--header-h) + var(--nav-h) + 8px);
}

/* 설정 그리드 */
.ui-cust-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;
  margin-bottom: 1rem;
}
.ui-cust-field { display: flex; flex-direction: column; gap: .4rem; }
.ui-cust-field label { font-size: .8rem; font-weight: 600; color: var(--color-text-muted); }

/* 라디오 그룹 */
.ui-cust-radio-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.ui-cust-radio-item { display: flex; align-items: center; gap: .3rem; font-size: .82rem; cursor: pointer; }

/* 모바일 미리보기 헤더 */
.ui-pvw-mob-header {
  display: flex; justify-content: space-between;
  align-items: var(--hdr-mob-align, flex-start);
  padding: .45rem var(--hdr-mob-pad-h, .9rem); min-height: var(--hdr-mob-h, 72px);
  background: var(--hdr-mob-bg, var(--color-surface));
  border-bottom: var(--hdr-mob-border-w, 1px) solid var(--color-border);
}
.ui-pvw-mob-left { display: flex; flex-direction: column; gap: .2rem; }
.ui-pvw-mob-right { display: grid; grid-template-columns: auto auto; gap: .2rem .35rem; align-items: center; }
.ui-pvw-mob-nav {
  display: flex; flex-wrap: wrap;
  background: var(--nav-mob-bg, var(--nav-bg, var(--color-surface)));
  border-bottom: 1px solid var(--color-border); padding: 0 .25rem;
  min-height: var(--nav-mob-h, 44px);
}
.ui-pvw-mob-tab {
  padding: var(--nav-mob-pad-v, .45rem) var(--nav-mob-pad-h, .6rem);
  font-size: var(--nav-mob-font, .72rem);
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; color: var(--color-text-muted);
  border-radius: var(--nav-mob-radius, 0px);
}
.ui-pvw-mob-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* 미리보기 전용 탭 배치 — 미디어쿼리 없이 직접 적용 */
.ui-pvw-mob-nav[data-mob-justify="start"]  { justify-content: flex-start; }
.ui-pvw-mob-nav[data-mob-justify="center"] { justify-content: center; }
.ui-pvw-mob-nav[data-mob-justify="even"] .ui-pvw-mob-tab { flex: 1; text-align: center; }

/* 미리보기 전용 활성 탭 스타일 — 미디어쿼리 없이 직접 적용 */
[data-nav-mob-active="fill"] .ui-pvw-mob-tab.active {
  background: var(--color-primary); color: #fff;
  border-bottom-color: transparent; border-radius: var(--nav-mob-radius, 0px);
}
[data-nav-mob-active="pill"] .ui-pvw-mob-tab.active {
  background: var(--color-primary); color: #fff;
  border-bottom-color: transparent; border-radius: 999px;
}

/* ── View Toggle (segmented control) ─────────────────────── */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.view-toggle .btn {
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--color-border) !important;
  padding: .25rem .6rem;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.5;
}
.view-toggle .btn:last-child {
  border-right: none !important;
}
.view-toggle .btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.view-toggle .btn-outline {
  background: transparent;
  color: var(--color-text);
}
.view-toggle .btn-outline:hover {
  background: var(--color-hover, rgba(0,0,0,.05));
}

/* ── shadcn 스타일 테마 ───────────────────────────────────── */
html[data-ui-style="shadcn"] {
  --color-primary:       #18181b;
  --color-primary-hover: #27272a;
  --color-secondary:     #f4f4f5;
  --color-bg:            #ffffff;
  --color-surface:       #fafafa;
  --color-border:        #e4e4e7;
  --color-text:          #09090b;
  --color-text-muted:    #71717a;
  --text-secondary:      #71717a;
  --btn-radius:          6px;
  --radius:              6px;
}
html[data-ui-style="shadcn"] .btn-primary {
  background: #18181b !important;
  color: #fafafa !important;
  border: 1px solid #18181b !important;
  box-shadow: none !important;
}
html[data-ui-style="shadcn"] .btn-primary:hover:not(:disabled) {
  background: #27272a !important;
  border-color: #27272a !important;
}
html[data-ui-style="shadcn"] .btn-outline {
  background: #ffffff !important;
  color: #09090b !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: none !important;
}
html[data-ui-style="shadcn"] .btn-outline:hover:not(:disabled) {
  background: #f4f4f5 !important;
}
html[data-ui-style="shadcn"] .btn-ghost {
  background: transparent !important;
  color: #09090b !important;
  border: none !important;
}
html[data-ui-style="shadcn"] .btn-ghost:hover:not(:disabled) {
  background: #f4f4f5 !important;
}
html[data-ui-style="shadcn"] .btn-danger {
  background: #dc2626 !important;
  color: #fff !important;
  border: 1px solid #dc2626 !important;
  box-shadow: none !important;
}
html[data-ui-style="shadcn"] .card {
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.06) !important;
  border-radius: 8px !important;
}
html[data-ui-style="shadcn"] .card-header {
  border-bottom: 1px solid #e4e4e7;
  background: #fafafa;
}
html[data-ui-style="shadcn"] .form-control,
html[data-ui-style="shadcn"] .form-input,
html[data-ui-style="shadcn"] input[type="text"],
html[data-ui-style="shadcn"] input[type="email"],
html[data-ui-style="shadcn"] input[type="password"],
html[data-ui-style="shadcn"] input[type="number"],
html[data-ui-style="shadcn"] textarea,
html[data-ui-style="shadcn"] select {
  border: 1px solid #e4e4e7 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
}
html[data-ui-style="shadcn"] .form-control:focus,
html[data-ui-style="shadcn"] .form-input:focus,
html[data-ui-style="shadcn"] input:focus,
html[data-ui-style="shadcn"] textarea:focus,
html[data-ui-style="shadcn"] select:focus {
  border-color: #18181b !important;
  box-shadow: 0 0 0 2px rgba(24,24,27,.12) !important;
  outline: none !important;
}
html[data-ui-style="shadcn"] .app-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e4e4e7 !important;
}
html[data-ui-style="shadcn"] .tab-nav {
  background: #ffffff !important;
  border-bottom: 1px solid #e4e4e7 !important;
}
html[data-ui-style="shadcn"] .tab-btn.active {
  color: #18181b !important;
  border-bottom-color: #18181b !important;
}
html[data-ui-style="shadcn"] .mobile-nav {
  background: #ffffff !important;
  border-top: 1px solid #e4e4e7 !important;
}
html[data-ui-style="shadcn"] .mobile-nav-btn.active {
  color: #18181b !important;
}
html[data-ui-style="shadcn"] .sub-tab-btn.active {
  background: #18181b !important;
  color: #ffffff !important;
}
html[data-ui-style="shadcn"] .table thead th,
html[data-ui-style="shadcn"] .data-table thead th {
  background: #f4f4f5 !important;
  color: #09090b !important;
  border-bottom: 1px solid #e4e4e7 !important;
}
html[data-ui-style="shadcn"] tbody tr:hover {
  background: #f4f4f5 !important;
}
html[data-ui-style="shadcn"] .badge-primary { background: #18181b !important; color: #fafafa !important; }
html[data-ui-style="shadcn"] #modal-box {
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  border-radius: 10px !important;
}
html[data-ui-style="shadcn"] .view-toggle { border-color: #e4e4e7 !important; }
html[data-ui-style="shadcn"] .view-toggle .btn-outline { border-right-color: #e4e4e7 !important; }

/* ── shadcn: 링크·배지·버튼 색상 보완 ─────────────────────────── */
html[data-ui-style="shadcn"] a { color: #18181b !important; }
html[data-ui-style="shadcn"] a:hover { color: #27272a !important; text-decoration: underline; }
html[data-ui-style="shadcn"] .badge-success { background: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }
html[data-ui-style="shadcn"] .badge-warning { background: #fefce8 !important; color: #854d0e !important; border: 1px solid #fde68a !important; }
html[data-ui-style="shadcn"] .badge-danger,
html[data-ui-style="shadcn"] .badge-error  { background: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; }
html[data-ui-style="shadcn"] .badge-info   { background: #f0f9ff !important; color: #0c4a6e !important; border: 1px solid #bae6fd !important; }
html[data-ui-style="shadcn"] .badge-secondary { background: #f4f4f5 !important; color: #52525b !important; border: 1px solid #e4e4e7 !important; }
html[data-ui-style="shadcn"] .text-success { color: #16a34a !important; }
html[data-ui-style="shadcn"] .text-danger  { color: #dc2626 !important; }
html[data-ui-style="shadcn"] .text-warning { color: #ca8a04 !important; }
html[data-ui-style="shadcn"] .text-info    { color: #0284c7 !important; }
html[data-ui-style="shadcn"] .btn-success { background: #16a34a !important; color: #fff !important; border: 1px solid #16a34a !important; box-shadow: none !important; }
html[data-ui-style="shadcn"] .btn-success:hover:not(:disabled) { background: #15803d !important; border-color: #15803d !important; }
html[data-ui-style="shadcn"] .btn-warning { background: #f4f4f5 !important; color: #09090b !important; border: 1px solid #e4e4e7 !important; box-shadow: none !important; }
html[data-ui-style="shadcn"] .alert-success { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important; }
html[data-ui-style="shadcn"] .alert-warning { background: #fefce8 !important; border-color: #fde68a !important; color: #854d0e !important; }
html[data-ui-style="shadcn"] .alert-danger  { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; }

/* ── Windows 98 스타일 ─────────────────────────────────────────── */
html[data-ui-style="win98"] {
  --color-primary: #000080;
  --color-primary-hover: #0000aa;
  --color-secondary: #c0c0c0;
  --color-bg: #008080;
  --color-surface: #c0c0c0;
  --color-border: #808080;
  --color-text: #000000;
  --color-text-muted: #444444;
  --text-secondary: #444444;
  --btn-radius: 0px;
  --radius: 0px;
}
html[data-ui-style="win98"] body {
  background: #008080 !important;
  font-family: 'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 13px !important;
}
html[data-ui-style="win98"] .app-layout,
html[data-ui-style="win98"] main { background: #c0c0c0 !important; }
html[data-ui-style="win98"] .app-header {
  background: linear-gradient(to right, #000080, #1084d0) !important;
  color: #ffffff !important;
  border-bottom: 2px solid #808080 !important;
  box-shadow: none !important;
}
html[data-ui-style="win98"] .tab-nav {
  background: #c0c0c0 !important;
  border-bottom: 2px solid #808080 !important;
}
html[data-ui-style="win98"] .tab-btn { border-radius: 0 !important; }
html[data-ui-style="win98"] .tab-btn.active {
  background: #c0c0c0 !important;
  color: #000000 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #808080 !important;
  border-bottom: 2px solid #c0c0c0 !important;
}
html[data-ui-style="win98"] .card {
  background: #c0c0c0 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #808080 !important;
  border-bottom: 2px solid #808080 !important;
  box-shadow: 2px 2px 0 #000000 !important;
  border-radius: 0 !important;
}
html[data-ui-style="win98"] .card-header {
  background: linear-gradient(to right, #000080, #1084d0) !important;
  color: #ffffff !important;
  border-bottom: 1px solid #808080 !important;
  border-radius: 0 !important;
}
html[data-ui-style="win98"] .btn {
  background: #c0c0c0 !important;
  color: #000000 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #808080 !important;
  border-bottom: 2px solid #808080 !important;
  border-radius: 0 !important;
  box-shadow: 1px 1px 0 #000000 !important;
  font-size: 12px !important;
}
html[data-ui-style="win98"] .btn:active {
  border-top: 2px solid #808080 !important;
  border-left: 2px solid #808080 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  box-shadow: none !important;
}
html[data-ui-style="win98"] .btn-primary { background: #000080 !important; color: #ffffff !important; }
html[data-ui-style="win98"] .btn-danger  { background: #800000 !important; color: #ffffff !important; }
html[data-ui-style="win98"] .btn-success { background: #008000 !important; color: #ffffff !important; }
html[data-ui-style="win98"] .form-control,
html[data-ui-style="win98"] .form-input,
html[data-ui-style="win98"] input[type="text"],
html[data-ui-style="win98"] input[type="email"],
html[data-ui-style="win98"] input[type="password"],
html[data-ui-style="win98"] input[type="number"],
html[data-ui-style="win98"] textarea,
html[data-ui-style="win98"] select {
  background: #ffffff !important;
  border-top: 2px solid #808080 !important;
  border-left: 2px solid #808080 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  border-radius: 0 !important;
}
html[data-ui-style="win98"] .form-control:focus,
html[data-ui-style="win98"] input:focus,
html[data-ui-style="win98"] textarea:focus,
html[data-ui-style="win98"] select:focus {
  box-shadow: none !important;
  outline: 1px dotted #000000 !important;
}
html[data-ui-style="win98"] .badge-primary   { background: #000080 !important; color: #fff !important; border-radius: 0 !important; }
html[data-ui-style="win98"] .badge-success   { background: #008000 !important; color: #fff !important; border-radius: 0 !important; }
html[data-ui-style="win98"] .badge-danger    { background: #800000 !important; color: #fff !important; border-radius: 0 !important; }
html[data-ui-style="win98"] .badge-warning   { background: #808000 !important; color: #fff !important; border-radius: 0 !important; }
html[data-ui-style="win98"] .badge-secondary { background: #808080 !important; color: #fff !important; border-radius: 0 !important; }
html[data-ui-style="win98"] a { color: #000080 !important; text-decoration: underline; }
html[data-ui-style="win98"] a:hover { color: #0000ff !important; }
html[data-ui-style="win98"] .mobile-nav {
  background: #c0c0c0 !important;
  border-top: 2px solid #ffffff !important;
}
html[data-ui-style="win98"] .mobile-nav-btn.active { color: #000080 !important; }
html[data-ui-style="win98"] #modal-box {
  background: #c0c0c0 !important;
  border-top: 2px solid #ffffff !important;
  border-left: 2px solid #ffffff !important;
  border-right: 2px solid #808080 !important;
  border-bottom: 2px solid #808080 !important;
  box-shadow: 4px 4px 0 #000000 !important;
  border-radius: 0 !important;
}
html[data-ui-style="win98"] .modal-header {
  background: linear-gradient(to right, #000080, #1084d0) !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}
html[data-ui-style="win98"] .table thead th,
html[data-ui-style="win98"] .data-table thead th {
  background: #c0c0c0 !important;
  border: 1px solid #808080 !important;
  color: #000000 !important;
}
html[data-ui-style="win98"] tbody tr:hover { background: #000080 !important; color: #ffffff !important; }
html[data-ui-style="win98"] .sub-tab-btn.active { background: #000080 !important; color: #ffffff !important; border-radius: 0 !important; }
html[data-ui-style="win98"] .view-toggle { border-radius: 0 !important; }
html[data-ui-style="win98"] .view-toggle .btn { box-shadow: none !important; }

/* ── Apple / iOS 스타일 ────────────────────────────────────────── */
html[data-ui-style="apple"] {
  --color-primary: #007AFF;
  --color-primary-hover: #0051D5;
  --color-secondary: #f2f2f7;
  --color-bg: #f2f2f7;
  --color-surface: #ffffff;
  --color-border: rgba(0,0,0,0.12);
  --color-text: #000000;
  --color-text-muted: #8e8e93;
  --text-secondary: #8e8e93;
  --btn-radius: 10px;
  --radius: 12px;
}
html[data-ui-style="apple"] body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif !important;
}
html[data-ui-style="apple"] .app-header {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.15) !important;
  box-shadow: none !important;
}
html[data-ui-style="apple"] .tab-nav {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.15) !important;
}
html[data-ui-style="apple"] .tab-btn.active {
  color: #007AFF !important;
  border-bottom-color: #007AFF !important;
}
html[data-ui-style="apple"] .mobile-nav {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 0.5px solid rgba(0,0,0,0.15) !important;
}
html[data-ui-style="apple"] .mobile-nav-btn.active { color: #007AFF !important; }
html[data-ui-style="apple"] .card {
  border-radius: 16px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
  border: none !important;
  background: #ffffff !important;
}
html[data-ui-style="apple"] .card-header {
  background: #ffffff !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.1) !important;
  border-radius: 16px 16px 0 0 !important;
}
html[data-ui-style="apple"] .btn-primary {
  background: #007AFF !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html[data-ui-style="apple"] .btn-primary:hover:not(:disabled) { background: #0051D5 !important; }
html[data-ui-style="apple"] .btn-outline {
  background: rgba(0,122,255,0.08) !important;
  color: #007AFF !important;
  border: 1px solid rgba(0,122,255,0.25) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html[data-ui-style="apple"] .btn-outline:hover:not(:disabled) { background: rgba(0,122,255,0.15) !important; }
html[data-ui-style="apple"] .btn-ghost { background: transparent !important; color: #007AFF !important; border: none !important; }
html[data-ui-style="apple"] .btn-danger  { background: #ff3b30 !important; color: #fff !important; border: none !important; border-radius: 10px !important; box-shadow: none !important; }
html[data-ui-style="apple"] .btn-success { background: #34c759 !important; color: #fff !important; border: none !important; border-radius: 10px !important; box-shadow: none !important; }
html[data-ui-style="apple"] .btn-warning { background: #ff9500 !important; color: #fff !important; border: none !important; border-radius: 10px !important; box-shadow: none !important; }
html[data-ui-style="apple"] .form-control,
html[data-ui-style="apple"] .form-input,
html[data-ui-style="apple"] input[type="text"],
html[data-ui-style="apple"] input[type="email"],
html[data-ui-style="apple"] input[type="password"],
html[data-ui-style="apple"] input[type="number"],
html[data-ui-style="apple"] textarea,
html[data-ui-style="apple"] select {
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}
html[data-ui-style="apple"] .form-control:focus,
html[data-ui-style="apple"] input:focus,
html[data-ui-style="apple"] textarea:focus,
html[data-ui-style="apple"] select:focus {
  border-color: #007AFF !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.2) !important;
  outline: none !important;
}
html[data-ui-style="apple"] .badge-primary   { background: #007AFF !important; color: #fff !important; }
html[data-ui-style="apple"] .badge-success   { background: #34c759 !important; color: #fff !important; }
html[data-ui-style="apple"] .badge-danger    { background: #ff3b30 !important; color: #fff !important; }
html[data-ui-style="apple"] .badge-warning   { background: #ff9500 !important; color: #fff !important; }
html[data-ui-style="apple"] .badge-secondary { background: #8e8e93 !important; color: #fff !important; }
html[data-ui-style="apple"] a { color: #007AFF !important; }
html[data-ui-style="apple"] a:hover { color: #0051D5 !important; }
html[data-ui-style="apple"] #modal-box {
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.15) !important;
  border: none !important;
}
html[data-ui-style="apple"] .table thead th,
html[data-ui-style="apple"] .data-table thead th {
  background: #f2f2f7 !important;
  color: #6d6d72 !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.12) !important;
}
html[data-ui-style="apple"] tbody tr:hover { background: rgba(0,122,255,0.04) !important; }
html[data-ui-style="apple"] .sub-tab-btn.active { background: #007AFF !important; color: #ffffff !important; }
html[data-ui-style="apple"] .view-toggle { border-color: rgba(0,0,0,0.15) !important; border-radius: 10px !important; }
html[data-ui-style="apple"] .text-success { color: #34c759 !important; }
html[data-ui-style="apple"] .text-danger  { color: #ff3b30 !important; }
html[data-ui-style="apple"] .text-warning { color: #ff9500 !important; }
html[data-ui-style="apple"] .alert-success { background: #f0fdf4 !important; border-color: #34c759 !important; color: #1a5c2e !important; }
html[data-ui-style="apple"] .alert-danger  { background: #fff5f5 !important; border-color: #ff3b30 !important; color: #c0392b !important; }

/* ── shadcn: 다크모드 ─────────────────────────────────────────── */
html[data-ui-style="shadcn"][data-theme="dark"] {
  --color-bg:         #09090b;
  --color-surface:    #18181b;
  --color-border:     #27272a;
  --color-text:       #fafafa;
  --color-text-muted: #a1a1aa;
}
html[data-ui-style="shadcn"][data-theme="dark"] .btn-primary {
  background: #fafafa !important; color: #09090b !important; border-color: #fafafa !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .btn-primary:hover:not(:disabled) {
  background: #e4e4e7 !important; border-color: #e4e4e7 !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .btn-outline {
  background: #18181b !important; color: #fafafa !important; border-color: #27272a !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .btn-outline:hover:not(:disabled) { background: #27272a !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .btn-ghost { color: #fafafa !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .btn-ghost:hover:not(:disabled) { background: #27272a !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .card {
  background: #18181b !important; border-color: #27272a !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .card-header {
  background: #18181b !important; border-color: #27272a !important; color: #fafafa !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .form-control,
html[data-ui-style="shadcn"][data-theme="dark"] .form-input,
html[data-ui-style="shadcn"][data-theme="dark"] input[type="text"],
html[data-ui-style="shadcn"][data-theme="dark"] input[type="email"],
html[data-ui-style="shadcn"][data-theme="dark"] input[type="password"],
html[data-ui-style="shadcn"][data-theme="dark"] input[type="number"],
html[data-ui-style="shadcn"][data-theme="dark"] textarea,
html[data-ui-style="shadcn"][data-theme="dark"] select {
  background: #09090b !important; border-color: #27272a !important; color: #fafafa !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .form-control:focus,
html[data-ui-style="shadcn"][data-theme="dark"] input:focus,
html[data-ui-style="shadcn"][data-theme="dark"] textarea:focus,
html[data-ui-style="shadcn"][data-theme="dark"] select:focus {
  border-color: #fafafa !important; box-shadow: 0 0 0 2px rgba(250,250,250,.15) !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .app-header {
  background: #18181b !important; border-color: #27272a !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .tab-nav {
  background: #18181b !important; border-color: #27272a !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .tab-btn.active {
  color: #fafafa !important; border-bottom-color: #fafafa !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .mobile-nav {
  background: #18181b !important; border-color: #27272a !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .mobile-nav-btn.active { color: #fafafa !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .sub-tab-btn.active {
  background: #fafafa !important; color: #09090b !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] .table thead th,
html[data-ui-style="shadcn"][data-theme="dark"] .data-table thead th {
  background: #27272a !important; color: #fafafa !important; border-color: #3f3f46 !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] tbody tr:hover { background: rgba(255,255,255,.05) !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .badge-primary   { background: #fafafa !important; color: #09090b !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .badge-secondary { background: #27272a !important; color: #a1a1aa !important; border-color: #3f3f46 !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .badge-success   { background: #052e16 !important; color: #4ade80 !important; border-color: #166534 !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .badge-warning   { background: #422006 !important; color: #fbbf24 !important; border-color: #92400e !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .badge-danger,
html[data-ui-style="shadcn"][data-theme="dark"] .badge-error     { background: #450a0a !important; color: #f87171 !important; border-color: #991b1b !important; }
html[data-ui-style="shadcn"][data-theme="dark"] #modal-box {
  background: #18181b !important; border-color: #27272a !important;
}
html[data-ui-style="shadcn"][data-theme="dark"] a { color: #a1a1aa !important; }
html[data-ui-style="shadcn"][data-theme="dark"] a:hover { color: #fafafa !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .view-toggle { border-color: #27272a !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .view-toggle .btn-outline { border-right-color: #27272a !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .alert-success { background: #052e16 !important; border-color: #166534 !important; color: #4ade80 !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .alert-warning { background: #422006 !important; border-color: #92400e !important; color: #fbbf24 !important; }
html[data-ui-style="shadcn"][data-theme="dark"] .alert-danger  { background: #450a0a !important; border-color: #991b1b !important; color: #f87171 !important; }

/* ── Apple/iOS: 다크모드 ──────────────────────────────────────── */
html[data-ui-style="apple"][data-theme="dark"] {
  --color-bg:         #000000;
  --color-surface:    #1c1c1e;
  --color-border:     #38383a;
  --color-text:       #ffffff;
  --color-text-muted: #8e8e93;
}
html[data-ui-style="apple"][data-theme="dark"] .app-header {
  background: rgba(28,28,30,0.92) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
html[data-ui-style="apple"][data-theme="dark"] .tab-nav {
  background: rgba(28,28,30,0.92) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
html[data-ui-style="apple"][data-theme="dark"] .mobile-nav {
  background: rgba(28,28,30,0.92) !important;
  border-top-color: rgba(255,255,255,0.1) !important;
}
html[data-ui-style="apple"][data-theme="dark"] .card {
  background: #1c1c1e !important; box-shadow: 0 2px 16px rgba(0,0,0,.5) !important;
}
html[data-ui-style="apple"][data-theme="dark"] .card-header {
  background: #2c2c2e !important; border-bottom-color: rgba(255,255,255,0.1) !important;
}
html[data-ui-style="apple"][data-theme="dark"] .form-control,
html[data-ui-style="apple"][data-theme="dark"] .form-input,
html[data-ui-style="apple"][data-theme="dark"] input[type="text"],
html[data-ui-style="apple"][data-theme="dark"] input[type="email"],
html[data-ui-style="apple"][data-theme="dark"] input[type="password"],
html[data-ui-style="apple"][data-theme="dark"] input[type="number"],
html[data-ui-style="apple"][data-theme="dark"] textarea,
html[data-ui-style="apple"][data-theme="dark"] select {
  background: #2c2c2e !important; border-color: rgba(255,255,255,0.15) !important; color: #ffffff !important;
}
html[data-ui-style="apple"][data-theme="dark"] .btn-outline {
  background: rgba(0,122,255,0.15) !important; border-color: rgba(0,122,255,0.4) !important;
}
html[data-ui-style="apple"][data-theme="dark"] .table thead th,
html[data-ui-style="apple"][data-theme="dark"] .data-table thead th {
  background: #2c2c2e !important; color: #8e8e93 !important; border-color: rgba(255,255,255,0.1) !important;
}
html[data-ui-style="apple"][data-theme="dark"] tbody tr:hover { background: rgba(0,122,255,0.1) !important; }
html[data-ui-style="apple"][data-theme="dark"] #modal-box {
  background: #1c1c1e !important; box-shadow: 0 24px 64px rgba(0,0,0,.6) !important;
}
html[data-ui-style="apple"][data-theme="dark"] .badge-secondary { background: #2c2c2e !important; color: #aeaeb2 !important; }
html[data-ui-style="apple"][data-theme="dark"] .alert-success { background: #052e16 !important; border-color: #34c759 !important; color: #30d158 !important; }
html[data-ui-style="apple"][data-theme="dark"] .alert-danger  { background: #450a0a !important; border-color: #ff3b30 !important; color: #ff453a !important; }

/* ── Windows 98: 다크모드 (나이트 모드) ──────────────────────── */
html[data-ui-style="win98"][data-theme="dark"] {
  --color-bg:         #1a1a2e;
  --color-surface:    #2d2d44;
  --color-border:     #0f3460;
  --color-text:       #e0e0e0;
  --color-text-muted: #9090a8;
}
html[data-ui-style="win98"][data-theme="dark"] body { background: #1a1a2e !important; }
html[data-ui-style="win98"][data-theme="dark"] .app-layout,
html[data-ui-style="win98"][data-theme="dark"] main { background: #2d2d44 !important; }
html[data-ui-style="win98"][data-theme="dark"] .card {
  background: #2d2d44 !important;
  border-top-color: #4a4a6a !important; border-left-color: #4a4a6a !important;
  border-right-color: #111120 !important; border-bottom-color: #111120 !important;
}
html[data-ui-style="win98"][data-theme="dark"] .tab-nav {
  background: #2d2d44 !important; border-bottom-color: #111120 !important;
}
html[data-ui-style="win98"][data-theme="dark"] .tab-btn.active {
  background: #2d2d44 !important; color: #e0e0e0 !important;
  border-top-color: #4a4a6a !important; border-left-color: #4a4a6a !important;
  border-right-color: #111120 !important; border-bottom-color: #2d2d44 !important;
}
html[data-ui-style="win98"][data-theme="dark"] .btn {
  background: #2d2d44 !important; color: #e0e0e0 !important;
  border-top-color: #4a4a6a !important; border-left-color: #4a4a6a !important;
  border-right-color: #111120 !important; border-bottom-color: #111120 !important;
}
html[data-ui-style="win98"][data-theme="dark"] .btn:active {
  border-top-color: #111120 !important; border-left-color: #111120 !important;
  border-right-color: #4a4a6a !important; border-bottom-color: #4a4a6a !important;
}
html[data-ui-style="win98"][data-theme="dark"] .form-control,
html[data-ui-style="win98"][data-theme="dark"] .form-input,
html[data-ui-style="win98"][data-theme="dark"] input[type="text"],
html[data-ui-style="win98"][data-theme="dark"] input[type="email"],
html[data-ui-style="win98"][data-theme="dark"] input[type="password"],
html[data-ui-style="win98"][data-theme="dark"] input[type="number"],
html[data-ui-style="win98"][data-theme="dark"] textarea,
html[data-ui-style="win98"][data-theme="dark"] select {
  background: #1a1a2e !important; color: #e0e0e0 !important;
  border-top-color: #111120 !important; border-left-color: #111120 !important;
  border-right-color: #4a4a6a !important; border-bottom-color: #4a4a6a !important;
}
html[data-ui-style="win98"][data-theme="dark"] .mobile-nav {
  background: #2d2d44 !important; border-top-color: #4a4a6a !important;
}
html[data-ui-style="win98"][data-theme="dark"] #modal-box {
  background: #2d2d44 !important;
  border-top-color: #4a4a6a !important; border-left-color: #4a4a6a !important;
  border-right-color: #111120 !important; border-bottom-color: #111120 !important;
}
html[data-ui-style="win98"][data-theme="dark"] .table thead th,
html[data-ui-style="win98"][data-theme="dark"] .data-table thead th {
  background: #2d2d44 !important; color: #e0e0e0 !important; border-color: #111120 !important;
}
html[data-ui-style="win98"][data-theme="dark"] tbody tr:hover { background: #000060 !important; color: #e0e0e0 !important; }
html[data-ui-style="win98"][data-theme="dark"] .sub-tab-btn.active { background: #000060 !important; color: #e0e0e0 !important; }
html[data-ui-style="win98"][data-theme="dark"] a { color: #7b9cde !important; }
html[data-ui-style="win98"][data-theme="dark"] a:hover { color: #aac0f0 !important; }

/* ══════════════════════════════════════════════════════════════
   UI 스타일: Terminal (해커 터미널 감성)
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

html[data-ui-style="terminal"] {
  --color-primary:       #00ff41;
  --color-primary-hover: #00cc34;
  --color-secondary:     #1a1a1a;
  --color-bg:            #0d0d0d;
  --color-surface:       #111111;
  --color-border:        #00ff41;
  --color-text:          #00ff41;
  --color-text-muted:    #007a1f;
  --text-secondary:      #007a1f;
  --color-danger:        #ff3333;
  --color-warning:       #ffcc00;
  --color-success:       #00ff41;
  --color-info:          #00ccff;
  --btn-radius:          0px;
  --radius:              0px;
  color-scheme: dark;
}
html[data-ui-style="terminal"] * {
  font-family: 'Share Tech Mono', 'Courier New', monospace !important;
  letter-spacing: .02em;
}
html[data-ui-style="terminal"] body {
  background: #0d0d0d !important;
  color: #00ff41 !important;
}
html[data-ui-style="terminal"] .app-header {
  background: #000000 !important;
  border-bottom: 1px solid #00ff41 !important;
  box-shadow: 0 0 8px #00ff4144 !important;
}
html[data-ui-style="terminal"] .app-header .app-title {
  color: #00ff41 !important;
  text-shadow: 0 0 8px #00ff41 !important;
}
html[data-ui-style="terminal"] .tab-nav {
  background: #000000 !important;
  border-bottom: 1px solid #00ff41 !important;
}
html[data-ui-style="terminal"] .tab-btn {
  color: #007a1f !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
}
html[data-ui-style="terminal"] .tab-btn:hover { color: #00ff41 !important; background: #001a06 !important; }
html[data-ui-style="terminal"] .tab-btn.active {
  color: #000000 !important;
  background: #00ff41 !important;
  border-bottom: none !important;
}
html[data-ui-style="terminal"] .app-main { background: #0d0d0d !important; }
html[data-ui-style="terminal"] .card {
  background: #111111 !important;
  border: 1px solid #00ff41 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 6px #00ff4122 !important;
}
html[data-ui-style="terminal"] .card:hover { box-shadow: 0 0 12px #00ff4166 !important; }
html[data-ui-style="terminal"] .card-header {
  background: #001a06 !important;
  border-bottom: 1px solid #00ff41 !important;
}
html[data-ui-style="terminal"] .btn {
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
html[data-ui-style="terminal"] .btn-primary {
  background: #00ff41 !important;
  color: #000000 !important;
  border: 1px solid #00ff41 !important;
  box-shadow: 0 0 6px #00ff4166 !important;
}
html[data-ui-style="terminal"] .btn-primary:hover:not(:disabled) {
  background: #00cc34 !important;
  box-shadow: 0 0 12px #00ff41aa !important;
}
html[data-ui-style="terminal"] .btn-outline {
  background: transparent !important;
  color: #00ff41 !important;
  border: 1px solid #00ff41 !important;
}
html[data-ui-style="terminal"] .btn-outline:hover:not(:disabled) {
  background: #001a06 !important;
}
html[data-ui-style="terminal"] .btn-secondary {
  background: #1a1a1a !important;
  color: #00ff41 !important;
  border: 1px solid #333 !important;
}
html[data-ui-style="terminal"] .btn-danger {
  background: transparent !important;
  color: #ff3333 !important;
  border: 1px solid #ff3333 !important;
}
html[data-ui-style="terminal"] .btn-danger:hover:not(:disabled) {
  background: #1a0000 !important;
  box-shadow: 0 0 8px #ff333366 !important;
}
html[data-ui-style="terminal"] .form-control,
html[data-ui-style="terminal"] .form-input,
html[data-ui-style="terminal"] input[type="text"],
html[data-ui-style="terminal"] input[type="email"],
html[data-ui-style="terminal"] input[type="password"],
html[data-ui-style="terminal"] input[type="number"],
html[data-ui-style="terminal"] textarea,
html[data-ui-style="terminal"] select {
  background: #000000 !important;
  color: #00ff41 !important;
  border: 1px solid #00ff41 !important;
  border-radius: 0 !important;
  caret-color: #00ff41;
}
html[data-ui-style="terminal"] input:focus,
html[data-ui-style="terminal"] textarea:focus,
html[data-ui-style="terminal"] select:focus {
  box-shadow: 0 0 0 2px #00ff4144 !important;
  outline: none !important;
}
html[data-ui-style="terminal"] .table thead th {
  background: #001a06 !important;
  color: #00ff41 !important;
  border: 1px solid #00ff41 !important;
}
html[data-ui-style="terminal"] .table td {
  border-color: #003311 !important;
}
html[data-ui-style="terminal"] tbody tr:hover { background: #001a06 !important; }
html[data-ui-style="terminal"] .badge {
  border-radius: 0 !important;
}
html[data-ui-style="terminal"] .badge-success { background: #00ff41 !important; color: #000 !important; }
html[data-ui-style="terminal"] .badge-warning { background: #ffcc00 !important; color: #000 !important; }
html[data-ui-style="terminal"] .badge-danger  { background: #ff3333 !important; color: #fff !important; }
html[data-ui-style="terminal"] .badge-info    { background: #00ccff !important; color: #000 !important; }
html[data-ui-style="terminal"] .badge-secondary { background: #333 !important; color: #00ff41 !important; }
html[data-ui-style="terminal"] .modal-overlay { background: rgba(0,0,0,.92) !important; }
html[data-ui-style="terminal"] #modal-box {
  background: #0d0d0d !important;
  border: 1px solid #00ff41 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 24px #00ff4144 !important;
}
html[data-ui-style="terminal"] .modal-header {
  background: #001a06 !important;
  border-bottom: 1px solid #00ff41 !important;
  color: #00ff41 !important;
}
html[data-ui-style="terminal"] .sub-tab-btn {
  color: #007a1f !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
}
html[data-ui-style="terminal"] .sub-tab-btn.active {
  color: #00ff41 !important;
  border-bottom-color: #00ff41 !important;
  background: transparent !important;
}
html[data-ui-style="terminal"] .mobile-nav {
  background: #000000 !important;
  border-top: 1px solid #00ff41 !important;
}
html[data-ui-style="terminal"] .mobile-nav-btn.active { color: #00ff41 !important; }
html[data-ui-style="terminal"] a { color: #00ff41 !important; text-decoration: underline; }
html[data-ui-style="terminal"] .toast {
  border-radius: 0 !important;
  border-left: 3px solid #00ff41;
  background: #0d0d0d !important;
  color: #00ff41 !important;
}
/* 깜빡이는 커서 효과 (로그인/입력 영역) */
@keyframes terminal-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
html[data-ui-style="terminal"] .app-title::after {
  content: '_';
  animation: terminal-blink 1s step-end infinite;
  margin-left: 2px;
}
html[data-ui-style="terminal"] .section-title,
html[data-ui-style="terminal"] .panel-title,
html[data-ui-style="terminal"] h2,
html[data-ui-style="terminal"] h3 {
  color: #00ff41 !important;
  text-shadow: 0 0 6px #00ff4166;
}
html[data-ui-style="terminal"] .stat-value {
  color: #00ff41 !important;
  text-shadow: 0 0 6px #00ff41;
}
html[data-ui-style="terminal"] .empty-state { color: #007a1f !important; }
html[data-ui-style="terminal"] ::-webkit-scrollbar { background: #0d0d0d; width: 6px; }
html[data-ui-style="terminal"] ::-webkit-scrollbar-thumb { background: #00ff41; }

/* ══════════════════════════════════════════════════════════════
   UI 스타일: NES / 8bit Pixel
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

html[data-ui-style="nes"] {
  --color-primary:       #0000cc;
  --color-primary-hover: #0000aa;
  --color-secondary:     #cccccc;
  --color-bg:            #c8c8c8;
  --color-surface:       #d8d8d8;
  --color-border:        #000000;
  --color-text:          #000000;
  --color-text-muted:    #555555;
  --text-secondary:      #555555;
  --color-danger:        #cc0000;
  --color-warning:       #cc8800;
  --color-success:       #008800;
  --color-info:          #0088cc;
  --btn-radius:          0px;
  --radius:              0px;
}
html[data-ui-style="nes"] * {
  font-family: 'Press Start 2P', monospace !important;
  line-height: 2 !important;
  image-rendering: pixelated;
}
html[data-ui-style="nes"] body {
  background: #c8c8c8 !important;
  color: #000000 !important;
}
/* 픽셀 박스 그림자 (NES 특유의 inset border) */
html[data-ui-style="nes"] .btn {
  border-radius: 0 !important;
  border: none !important;
  box-shadow:
    inset -3px -3px 0 #000,
    inset 3px 3px 0 #fff !important;
  padding: .4rem .7rem !important;
}
html[data-ui-style="nes"] .btn:active {
  box-shadow:
    inset -3px -3px 0 #fff,
    inset 3px 3px 0 #000 !important;
  transform: translate(1px, 1px);
}
html[data-ui-style="nes"] .btn-primary {
  background: #0000cc !important;
  color: #ffffff !important;
}
html[data-ui-style="nes"] .btn-primary:hover:not(:disabled) {
  background: #0000aa !important;
}
html[data-ui-style="nes"] .btn-outline {
  background: #cccccc !important;
  color: #000000 !important;
}
html[data-ui-style="nes"] .btn-outline:hover:not(:disabled) {
  background: #bbbbbb !important;
}
html[data-ui-style="nes"] .btn-secondary {
  background: #888888 !important;
  color: #ffffff !important;
}
html[data-ui-style="nes"] .btn-danger {
  background: #cc0000 !important;
  color: #ffffff !important;
}
html[data-ui-style="nes"] .btn-success {
  background: #008800 !important;
  color: #ffffff !important;
}
html[data-ui-style="nes"] .card {
  background: #d8d8d8 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow:
    inset -4px -4px 0 #000,
    inset 4px 4px 0 #fff !important;
  padding: 1rem !important;
}
html[data-ui-style="nes"] .card-header {
  background: #0000cc !important;
  color: #ffffff !important;
  border: none !important;
  padding: .4rem .75rem !important;
}
html[data-ui-style="nes"] .app-header {
  background: #0000cc !important;
  border: none !important;
  box-shadow: 0 4px 0 #000 !important;
}
html[data-ui-style="nes"] .app-header .app-title,
html[data-ui-style="nes"] .app-header * {
  color: #ffffff !important;
}
html[data-ui-style="nes"] .tab-nav {
  background: #888888 !important;
  border: none !important;
  box-shadow: 0 3px 0 #000 !important;
}
html[data-ui-style="nes"] .tab-btn {
  color: #ffffff !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
}
html[data-ui-style="nes"] .tab-btn:hover { background: #666666 !important; }
html[data-ui-style="nes"] .tab-btn.active {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: none !important;
}
html[data-ui-style="nes"] .app-main { background: #c8c8c8 !important; }
html[data-ui-style="nes"] .form-control,
html[data-ui-style="nes"] .form-input,
html[data-ui-style="nes"] input[type="text"],
html[data-ui-style="nes"] input[type="email"],
html[data-ui-style="nes"] input[type="password"],
html[data-ui-style="nes"] input[type="number"],
html[data-ui-style="nes"] textarea,
html[data-ui-style="nes"] select {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow:
    inset -2px -2px 0 #fff,
    inset 2px 2px 0 #000 !important;
}
html[data-ui-style="nes"] input:focus,
html[data-ui-style="nes"] textarea:focus,
html[data-ui-style="nes"] select:focus {
  outline: 3px solid #0000cc !important;
}
html[data-ui-style="nes"] .table thead th {
  background: #0000cc !important;
  color: #ffffff !important;
  border: 2px solid #000 !important;
}
html[data-ui-style="nes"] .table td { border: 1px solid #888 !important; }
html[data-ui-style="nes"] tbody tr:hover { background: #bbbbff !important; }
html[data-ui-style="nes"] .badge {
  border-radius: 0 !important;
  box-shadow: inset -2px -2px 0 #000, inset 2px 2px 0 rgba(255,255,255,.5) !important;
  font-size: 70% !important;
}
html[data-ui-style="nes"] .modal-overlay { background: rgba(0,0,0,.85) !important; }
html[data-ui-style="nes"] #modal-box {
  background: #d8d8d8 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow:
    inset -4px -4px 0 #000,
    inset 4px 4px 0 #fff,
    0 0 0 4px #000 !important;
}
html[data-ui-style="nes"] .modal-header {
  background: #0000cc !important;
  color: #ffffff !important;
  border: none !important;
}
html[data-ui-style="nes"] .sub-tab-btn {
  border-radius: 0 !important;
  color: #555 !important;
}
html[data-ui-style="nes"] .sub-tab-btn.active {
  color: #0000cc !important;
  border-bottom: 4px solid #0000cc !important;
  background: transparent !important;
}
html[data-ui-style="nes"] .mobile-nav {
  background: #0000cc !important;
  border-top: 4px solid #000 !important;
}
html[data-ui-style="nes"] .mobile-nav-btn { color: #aaaaff !important; }
html[data-ui-style="nes"] .mobile-nav-btn.active { color: #ffffff !important; }
html[data-ui-style="nes"] .toast {
  border-radius: 0 !important;
  box-shadow: inset -3px -3px 0 #000, inset 3px 3px 0 #fff !important;
}
html[data-ui-style="nes"] .section-title { border-bottom: 4px solid #000 !important; }
html[data-ui-style="nes"] .stat-card {
  box-shadow:
    inset -4px -4px 0 #000,
    inset 4px 4px 0 #fff !important;
  border-radius: 0 !important;
}
/* 다크모드: Terminal은 이미 어두우므로 변경 없음 */
/* 다크모드: NES */
html[data-ui-style="nes"][data-theme="dark"] {
  --color-bg:      #1a1a2e;
  --color-surface: #16213e;
  --color-text:    #e0e0e0;
  --color-text-muted: #aaaaaa;
}
html[data-ui-style="nes"][data-theme="dark"] body { background: #1a1a2e !important; color: #e0e0e0 !important; }
html[data-ui-style="nes"][data-theme="dark"] .card {
  background: #16213e !important;
  box-shadow: inset -4px -4px 0 #000, inset 4px 4px 0 #334 !important;
}
html[data-ui-style="nes"][data-theme="dark"] .app-main { background: #1a1a2e !important; }
html[data-ui-style="nes"][data-theme="dark"] .table td { border-color: #334 !important; }
html[data-ui-style="nes"][data-theme="dark"] tbody tr:hover { background: #000088 !important; }
html[data-ui-style="nes"][data-theme="dark"] #modal-box { background: #16213e !important; }
html[data-ui-style="nes"][data-theme="dark"] .form-control,
html[data-ui-style="nes"][data-theme="dark"] input,
html[data-ui-style="nes"][data-theme="dark"] textarea,
html[data-ui-style="nes"][data-theme="dark"] select {
  background: #0d0d1a !important;
  color: #e0e0e0 !important;
}