/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── 틈새영어 브랜드 글꼴 ──
   큰 글씨(로고 글자·제목)는 여기어때 잘난체. 눈누 라이선스: 웹사이트 사용 가능, 서버 탑재는 출처 표기(레이아웃 하단).
   본문은 IBM Plex Sans KR(Google Fonts, 레이아웃 head). */
@font-face {
  font-family: "YeogiOttaeJalnan";
  src: url("/fonts/JalnanOTF00.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
.font-brand { font-family: "YeogiOttaeJalnan", "Black Han Sans", sans-serif; font-weight: 400; letter-spacing: 0; }
.font-body  { font-family: "IBM Plex Sans KR", system-ui, -apple-system, sans-serif; }

/* ── 받아쓰기 플로팅 듣기 패널 ──
   폰에서 키보드가 올라오거나 빈칸에 커서가 있으면 작게(is-compact), ▾ 로 접으면(is-collapsed) 🎧 버튼만 남긴다. */
.float-panel .fp-reopen { display: none; }
.float-panel.is-collapsed .fp-inner { display: none; }
.float-panel.is-collapsed .fp-reopen { display: flex; }
.float-panel.is-compact .fp-inner { padding: 3px 8px; gap: 4px; }
.float-panel.is-compact .fp-skip  { height: 34px; width: 50px; font-size: 11px; }
.float-panel.is-compact .fp-play  { height: 38px; width: 38px; font-size: 17px; }
.float-panel.is-compact .fp-speed { height: 30px; width: 30px; font-size: 14px; }
.float-panel.is-compact .fp-label { width: 36px; font-size: 12px; }
/* 빈칸에 커서를 두면 브라우저가 자동으로 스크롤할 때 패널 아래로 내려오게 (패널은 화면 위에 고정) */
[data-dictation-target="exerciseArea"] input { scroll-margin-top: 150px; }