/* ═════════ btn.css — 단추 모양 한 벌 (2026-08-30b) ═════════
   선생님·학생·본사 세 화면이 같이 쓴다.

   ── 색을 왜 남색 하나로 두는가 ──
   초록(#1E7F52)과 주황(#C97A12)은 이미 **학습 상태**를 뜻한다 —
   「준비됨」·「보류」. 단추에 같은 색을 쓰면 학생이 헷갈린다.
   그래서 단추는 남색 하나만 쓰고, 빨강은 되돌릴 수 없는 것에만 남긴다
   (원장님이 정하심 — 2026-08-30).

   ── 네 가지뿐이다 ──
   fgBtn         남색 테두리 · 흰 바탕   기본
   fgBtn.fill    꽉 찬 남색             한 화면에 하나
   fgBtn.quiet   회색 테두리            조용해야 하는 것 (로그아웃)
   fgBtn.danger  빨강 테두리            지우기처럼 되돌릴 수 없는 것 */
.fgBtn{
  border:1px solid #002060;border-radius:9px;padding:9px 17px;
  font-size:13px;font-weight:700;line-height:1.2;
  cursor:pointer;font-family:inherit;
  background:#fff;color:#002060;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;flex:0 0 auto;
  transition:background .14s,border-color .14s,color .14s}
.fgBtn:hover{background:#EEF3FA}
.fgBtn:active{background:#DFE9F7}
/* 못 누르는 상태 — disabled 이거나 .off */
.fgBtn:disabled,.fgBtn.off{opacity:.45;cursor:default}
.fgBtn:disabled:hover,.fgBtn.off:hover{background:#fff}
.fgBtn.fill.off{background:#fff;color:#657189;border-color:#D6E0EF}
.fgBtn.fill.off:hover{background:#fff}

.fgBtn.fill{background:#002060;color:#fff;border-color:#002060}
.fgBtn.fill:hover{background:#0A2E70}
.fgBtn.fill:active{background:#001B52}

.fgBtn.quiet{border-color:#D6E0EF;color:#657189}
.fgBtn.quiet:hover{border-color:#C3D3EA;background:#F7FAFD;color:#002060}

.fgBtn.danger{border-color:#C4372F;color:#C4372F}
.fgBtn.danger:hover{background:#FDF1F0}

/* 상장 주기 — 축하하는 일이라 색을 남긴다 (원장님이 정하심 — 2026-08-30).
   금색은 「완료·장기기억」을 뜻하므로 상 주는 일과 뜻이 맞는다 */
.fgBtn.gold{border-color:#C8952F;color:#8A6417;background:#FBF7EE}
.fgBtn.gold:hover{background:#F6EEDC}
.fgBtn.gold.fill{background:#C8952F;color:#fff;border-color:#C8952F}
.fgBtn.gold.fill:hover{background:#B0801F}

/* 가로로 꽉 차는 것 */
.fgBtn.wide{width:100%}

/* 크기 — 「학습 시작」처럼 그 화면의 목적인 것만 크게 */
.fgBtn.sm{padding:6px 12px;font-size:12px;border-radius:8px}
.fgBtn.big{padding:13px 26px;font-size:15px;border-radius:11px}