/* NeoLab 전역 UX — 모든 화면 공통 (클릭 피드백 등) */
/* 모든 버튼/클릭요소: 누르는 순간 어두워지고 살짝 눌리는 피드백 (아이폰 앱 느낌) */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
[role="button"],
.clickable {
  transition: filter .12s ease, transform .12s ease;
}
button:active,
.btn:active,
a.btn:active,
input[type="button"]:active,
input[type="submit"]:active,
[role="button"]:active,
.clickable:active {
  filter: brightness(.82);
  transform: scale(.98);
  transition: filter .05s ease, transform .05s ease;
}
/* 키보드 접근성: 포커스된 버튼도 살짝 표시 */
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid rgba(15,23,42,.35);
  outline-offset: 2px;
}
/* 비활성 버튼은 피드백 없음 */
button:disabled:active,
.btn:disabled:active {
  filter: none;
  transform: none;
}

/* ===== 모바일 겸용 (핸드폰) 공통 규칙 — 700px 이하 ===== */
@media (max-width: 700px) {
  /* 본문이 화면 밖으로 넘치지 않게 */
  html, body { max-width: 100%; overflow-x: hidden; }
  body { font-size: 15px; }

  /* 표는 가로 스크롤로 (잘림 방지) */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* 터치 타겟 키우기: 버튼·입력 최소 높이 */
  button, .btn, select, input:not([type="checkbox"]):not([type="radio"]), textarea {
    min-height: 42px; font-size: 15px;
  }
  /* 입력칸이 화면 밖으로 안 넘치게 */
  input, select, textarea { max-width: 100%; box-sizing: border-box; }

  /* 가로로 너무 빽빽한 툴바는 줄바꿈 */
  .toolbar { flex-wrap: wrap; }
}

/* 좁은 폭에서 다열 그리드를 1열로 (본문 컨테이너 한정 클래스) */
@media (max-width: 700px) {
  .mobile-stack { grid-template-columns: 1fr !important; }
}

/* ===== 화면 헤더 외형 통일 — 관리자·운영 모드 전 화면 공통 ('시험 분야' 기준) ===== */
/* 흰 배경 + 하단 경계선 + 동일 패딩 + 제목 20px. 좌우 배치는 각 화면 기존 구조 유지(깨짐 방지) */
body > header {
  background: #fff !important;
  border-bottom: 1px solid #e3e7ec !important;
  padding: 18px 24px !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
body > header h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #1a2230 !important;
}
/* 헤더 설명 문구 표준 (.sub / 헤더 내 .muted) */
body > header .sub,
body > header > div .muted {
  color: #5b6472 !important;
  font-size: 13px !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}
@media (max-width: 700px) {
  body > header { padding: 14px 16px !important; }
  body > header h1 { font-size: 18px !important; }
}