/* orda-press.css — 학습앱 공용 눌림·포커스 피드백                    2026-09-05
 *
 * 무엇을 하나
 *   학습앱 1,748개의 .btn(채점하기·정답 확인·자가채점 등)과 .choice(보기)에
 *   "눌렸다"는 느낌 하나만 더한다. 파일마다 CSS 가 제각각이라 여기 한 장에 모았다.
 *   각 앱은 </head> 직전에  <link rel="stylesheet" href="/orda-press.css">  로 이 파일을 읽는다.
 *   (앱의 인라인 <style> 뒤에 오므로 같은 우선순위면 이 파일이 이긴다.)
 *
 * 왜 이렇게 하나 — emil-design-eng 규칙
 *   · 채점 버튼은 한 세션에 수십 번 누른다 → 장식 애니메이션은 넣지 않는다.
 *     결과(정답·점수)는 지금처럼 **즉시** 뜬다. 학생은 답을 기다리고 싶지 않다.
 *   · 대신 눌림 피드백은 필요하다. :active 에서 scale(.97), 160ms, 강한 ease-out.
 *     "인터페이스가 내 손을 들었다"는 확인이지 구경거리가 아니다.
 *   · transform 만 움직인다(레이아웃·페인트 없음). transition: all 금지.
 *   · 호버는 건드리지 않는다. 학생 대부분이 태블릿·폰이고, 호버는 하루 수십 번이라 줄이는 쪽이 맞다.
 *   · 키보드 사용자에겐 :focus-visible 링을 준다(마우스 클릭엔 안 뜬다).
 *   · 감소된 모션 설정이면 움직임 대신 불투명도로만 응답한다.
 *
 * 색은 앱이 이미 정의한 변수(--gold·--navy)만 쓴다. 새 색을 만들지 않는다.
 * 고치고 싶으면 이 파일만 고치고 배포폴더 루트에도 같은 파일을 복사한다.
 */

:root {
  --orda-press-ease: cubic-bezier(.23, 1, .32, 1);   /* 강한 ease-out — 즉시 반응, 부드럽게 정지 */
  --orda-press-ms: 160ms;
}

/* ── 누를 수 있는 것들: 버튼·보기 ──────────────────────────────── */
.btn,
.choice {
  transition: transform var(--orda-press-ms) var(--orda-press-ease),
              box-shadow var(--orda-press-ms) var(--orda-press-ease);
  -webkit-tap-highlight-color: transparent;   /* 우리가 피드백을 주므로 회색 탭 하이라이트는 끈다 */
  touch-action: manipulation;                 /* 더블탭 확대 대기(300ms)를 없앤다 — 체감 속도 */
  user-select: none;
  -webkit-user-select: none;
}

/* 눌림 — 작은 버튼은 3%, 가로로 긴 보기는 1.5%만 줄인다(넓은 요소는 조금만 움직여도 크게 보인다) */
.btn:active   { transform: scale(.97); }
.choice:active{ transform: scale(.985); }

/* 눌렀다 뗄 때 호버 부양(.btn.accent 등)이 있는 앱은 그 transform 으로 자연히 돌아간다 */

/* ── 키보드 포커스 — 마우스 클릭엔 뜨지 않고 Tab 이동에만 뜬다 ─── */
.btn:focus-visible,
.choice:focus-visible {
  outline: 2px solid var(--navy, #1E4A3C);
  outline-offset: 2px;
}
.btn:focus:not(:focus-visible),
.choice:focus:not(:focus-visible) { outline: none; }

/* ── 감소된 모션 — 움직임 없이 불투명도로만 응답 ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn, .choice { transition: opacity var(--orda-press-ms) ease; }
  .btn:active, .choice:active { transform: none; opacity: .78; }
}