/* ═══════════════════════════════════════════════════════════════
   홈 소개 카드 4종 모션 (index.html .features__cards) — 2026-10-09
   화면 녹화 mp4 4개(~683KB)를 코드로 그린 '실제 페이지 미니 화면' 으로 교체.
   네 장 모두 실제 페이지(exam-new 문제풀이 · wrong-note · cft 구술 플래시카드 · lecture-play)의
   배치·색·버튼을 그대로 본뜬 HTML 이라, 네이비 카드 안에서 폰 화면을 찍은 것처럼 보인다.

   크기 단위: cqw (카드 미디어 폭 기준, 400px = 100cqw) — 데스크톱·모바일에서 비율 그대로 축소.
   미디어 상자는 4:3 → 높이 75cqw.

   재생 규칙
   - index.html 옵저버가 카드가 보일 때 .feature-card 에 is-playing 을 붙인다.
     옵저버가 가동되면 html 에 js-motion 이 붙고, 그때만 '안 보이면 일시정지'가 걸린다.
     JS 가 죽으면 js-motion 이 없어서 그냥 계속 돈다 (빈 카드로 남지 않음).
   - 한 바퀴 6초(처음 7초 → 오너 "아주 조금 빨라도" 10-09). 0% 는 빈 화면, 중간에 그려지고, 끝에서 사라졌다 다시 시작.
   - 모션 최소화(prefers-reduced-motion): 애니메이션을 끄고 기본값(=완료 상태)을 정지화면으로 보여준다.
     그래서 모든 기본 스타일은 '다 그려진 상태' 로 쓰고, 키프레임 0% 에서 숨긴다.
   ═══════════════════════════════════════════════════════════════ */

.feature-card__media { container-type: inline-size; }

.fm-page {
  position: absolute; inset: 0; overflow: hidden;
  background: #fff; color: #1d1d1f;
  font-family: var(--font-sans, "Pretendard Variable", Pretendard, -apple-system, sans-serif);
  letter-spacing: -0.01em; line-height: 1.4;
  text-align: left;
}
.fm-page img { display: block; }

/* 모든 모션 요소 공통 타이밍 */
.fm-page[class*="a-"], .fm-page [class*="a-"] {
  animation-duration: 6s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
.js-motion .feature-card:not(.is-playing) .fm-page[class*="a-"],
.js-motion .feature-card:not(.is-playing) .fm-page [class*="a-"] { animation-play-state: paused; }

@keyframes fmIn { 0% { opacity: 0; transform: translateY(8px); } 7% { opacity: 1; transform: none; } 91% { opacity: 1; } 100% { opacity: 0; } }
.fm-page.a-in { animation-name: fmIn; }

/* 실제 페이지 공통 조각 — 화면 아래 고정 버튼 바 */
.fm-page .fp-nav { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2.4cqw; padding: 2.6cqw 5cqw 3cqw;
  background: #fff; border-top: 1px solid #ececf1; z-index: 2; }
.fm-page .fp-nav span { height: 9cqw; border-radius: 2.5cqw; border: 1px solid #d2d2d7; background: #fff; color: #1d1d1f;
  display: flex; align-items: center; justify-content: center; font-size: 3.2cqw; font-weight: 700; }
.fm-page .fp-nav .fp-nav--dim { color: #b8b8bf; }
.fm-page .fp-nav .fp-nav--navy { background: var(--color-brand, #152338); border-color: var(--color-brand, #152338); color: #fff; }
.fm-page .fp-nav .fp-nav--black { background: #1d1d1f; border-color: #1d1d1f; color: #fff; }

/* ═══ 카드 1 · 기출문제 (exam-new 문제풀이) — 보기 1을 고르면 정답 패널이 올라온다 ═══ */
.fm-quiz__page { position: absolute; left: 0; right: 0; top: 0; padding: 4.5cqw 5cqw; transform: translateY(-12cqw); }
.fm-quiz__title { display: flex; align-items: center; font-size: 3.6cqw; font-weight: 800; margin-bottom: 2.6cqw; }
.fm-quiz__mark { margin-left: auto; font-size: 3cqw; color: var(--color-brand, #152338); opacity: .35; }
.fm-quiz__paper { border: 1px solid #e8e8ed; border-radius: 2.5cqw; padding: 3cqw 3.4cqw 2.6cqw; background: #fff;
  font-family: "Noto Serif KR", "Nanum Myeongjo", Batang, "Apple Myungjo", serif; }
.fm-quiz__q { margin: 0 0 1.6cqw; font-size: 3.2cqw; line-height: 1.45; font-weight: 700; color: #111; }
.fm-quiz__q u { text-decoration: underline; text-underline-offset: .12em; }
.fm-quiz__opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9cqw 2cqw; font-size: 3cqw; color: #222; }
.fm-quiz__btns { display: flex; justify-content: center; gap: 2.4cqw; margin: 3cqw 0; }
.fm-quiz__btns span { width: 10cqw; height: 10cqw; border-radius: 2.5cqw; border: 1px solid #d2d2d7; background: #fff; color: #1d1d1f;
  display: flex; align-items: center; justify-content: center; font-size: 3.8cqw; font-weight: 600; }
.fm-quiz__btns .a-sel { background: var(--color-brand, #152338); border-color: var(--color-brand, #152338); color: #fff; }
.fm-quiz__fb { border: 1.5px solid rgba(16,163,114,.55); background: rgba(16,163,114,.03); border-radius: 2.5cqw; padding: 2.8cqw 3.4cqw; }
.fm-quiz__fbhead { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.3cqw; font-weight: 800; color: #0A9E72; }
.fm-quiz__fbhead i { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; border: .55cqw solid #0A9E72; box-sizing: border-box; }
.fm-quiz__fbhead span { margin-left: auto; font-size: 2.9cqw; font-weight: 600; color: #6b7280; }
.fm-quiz__fbhead span b { color: var(--color-brand, #152338); font-weight: 800; }
.fm-quiz__fbexp { margin-top: 1.8cqw; font-size: 2.9cqw; line-height: 1.55; }
.fm-quiz .fp-nav { grid-template-columns: 1fr 1fr 1fr; }

@keyframes fm1Sel    { 0%, 20% { background: #fff; border-color: #d2d2d7; color: #1d1d1f; } 24%, 100% { background: var(--color-brand, #152338); border-color: var(--color-brand, #152338); color: #fff; } }
@keyframes fm1Fb     { 0%, 40% { opacity: 0; transform: translateY(5cqw); } 48%, 100% { opacity: 1; transform: none; } }
@keyframes fm1Scroll { 0%, 42% { transform: translateY(0); } 54%, 100% { transform: translateY(-12cqw); } }
.fm-quiz .a-sel    { animation-name: fm1Sel; }
.fm-quiz .a-fb     { animation-name: fm1Fb; }
.fm-quiz .a-scroll { animation-name: fm1Scroll; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

/* ═══ 카드 2 · 오답노트 (wrong-note.html) — 틀린 문제 칩이 차례로 쌓인다 (연한→진한 = 틀린 횟수) ═══ */
.fm-wn__page { position: absolute; left: 0; right: 0; top: 0; padding: 4cqw 5cqw; transform: translateY(-14cqw); }
.fm-wn__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2.8cqw; }
.fm-wn__head b { font-size: 5cqw; font-weight: 800; letter-spacing: -0.03em; }
.fm-wn__head span { font-size: 3.1cqw; color: #6e6e73; }
.fm-wn__seg { display: grid; grid-template-columns: 1fr 1fr 1fr; background: #f5f5f7; border-radius: 2.5cqw; padding: .9cqw; margin-bottom: 2.4cqw; }
.fm-wn__seg span { height: 7.6cqw; display: flex; align-items: center; justify-content: center; gap: 1.2cqw; font-size: 3.1cqw; font-weight: 700; color: #8e8e93; border-radius: 2cqw; }
.fm-wn__seg span i { font-style: normal; font-weight: 500; font-size: 2.7cqw; color: #aeaeb2; }
.fm-wn__seg .on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fm-wn__retry { height: 9.6cqw; border-radius: 2.5cqw; background: var(--color-brand, #152338); color: #fff; font-size: 3.4cqw; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 1.6cqw; margin-bottom: 2.6cqw; }
.fm-wn__chips { display: flex; gap: 1.6cqw; margin-bottom: 3cqw; overflow: hidden; white-space: nowrap; }
.fm-wn__chips span { font-size: 2.9cqw; font-weight: 600; padding: 1.7cqw 2.8cqw; border-radius: 2.5cqw; border: 1px solid #e0e0e5; color: #3a3a3c; }
.fm-wn__chips .on { background: var(--color-brand, #152338); border-color: var(--color-brand, #152338); color: #fff; }
.fm-wn__sec { display: flex; justify-content: space-between; align-items: center; font-size: 3.4cqw; font-weight: 800; margin: 0 1cqw 2cqw; }
.fm-wn__sec small { font-size: 3cqw; font-weight: 500; color: #6e6e73; }
.fm-wn__sec b { color: #8e8e93; font-size: 2.6cqw; margin-right: 1.4cqw; }
.fm-wn__box { border: 1px solid #e8e8ed; border-radius: 2.5cqw; padding: 2.8cqw 3cqw; }
.fm-wn__year { font-size: 3cqw; font-weight: 700; color: #6e6e73; margin-bottom: 2cqw; }
.fm-wn__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.8cqw; }
.fm-wn__grid span { height: 8.4cqw; border-radius: 2cqw; display: flex; align-items: center; justify-content: center; font-size: 3cqw; font-weight: 700; color: var(--color-brand, #152338); }
.fm-wn__grid .m1 { background: #edf2f7; }
.fm-wn__grid .m2 { background: #c7d6e6; }
.fm-wn__grid .m3 { background: #3d5680; color: #fff; }

@keyframes fm2P1  { 0%, 10% { opacity: 0; transform: scale(.6); } 14%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fm2P2  { 0%, 15% { opacity: 0; transform: scale(.6); } 19%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fm2P3  { 0%, 20% { opacity: 0; transform: scale(.6); } 24%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fm2P4  { 0%, 25% { opacity: 0; transform: scale(.6); } 29%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fm2P5  { 0%, 30% { opacity: 0; transform: scale(.6); } 34%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fm2P6  { 0%, 35% { opacity: 0; transform: scale(.6); } 39%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fm2P7  { 0%, 40% { opacity: 0; transform: scale(.6); } 44%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fm2P8  { 0%, 45% { opacity: 0; transform: scale(.6); } 49%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fm2P9  { 0%, 50% { opacity: 0; transform: scale(.6); } 54%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fm2P10 { 0%, 55% { opacity: 0; transform: scale(.6); } 59%, 100% { opacity: 1; transform: scale(1); } }
@keyframes fm2Cnt { 0%, 62% { opacity: 0; } 68%, 100% { opacity: 1; } }
.fm-wn .a-p1 { animation-name: fm2P1; } .fm-wn .a-p2 { animation-name: fm2P2; } .fm-wn .a-p3 { animation-name: fm2P3; }
.fm-wn .a-p4 { animation-name: fm2P4; } .fm-wn .a-p5 { animation-name: fm2P5; } .fm-wn .a-p6 { animation-name: fm2P6; }
.fm-wn .a-p7 { animation-name: fm2P7; } .fm-wn .a-p8 { animation-name: fm2P8; } .fm-wn .a-p9 { animation-name: fm2P9; }
.fm-wn .a-p10 { animation-name: fm2P10; }
.fm-wn .a-cnt { animation-name: fm2Cnt; }
@keyframes fm2Scroll { 0%, 38% { transform: translateY(0); } 52%, 100% { transform: translateY(-14cqw); } }
.fm-wn .a-scroll { animation-name: fm2Scroll; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

/* ═══ 카드 3 · 구술 플래시카드 (cft.html 실기·구술 문제풀기) — 탭하면 답이 펼쳐지고 '알아요' 를 누른다 ═══ */
.fm-oral { background: #f5f5f7; }
.fm-oral__page { position: absolute; left: 0; right: 0; top: 0; padding: 4cqw 5cqw; transform: translateY(-44cqw); }
.fm-oral__search { height: 8.4cqw; border-radius: 2.5cqw; background: #fff; border: 1px solid #e8e8ed; display: flex; align-items: center; gap: 1.8cqw; padding: 0 3cqw; font-size: 2.8cqw; color: #aeaeb2; margin-bottom: 2.2cqw; white-space: nowrap; overflow: hidden; }
.fm-oral__search i { flex: none; width: 2.8cqw; height: 2.8cqw; border: .45cqw solid #aeaeb2; border-radius: 50%; box-sizing: border-box; position: relative; }
.fm-oral__search i::after { content: ""; position: absolute; width: 1.3cqw; height: .45cqw; background: #aeaeb2; right: -1.1cqw; bottom: -.5cqw; transform: rotate(45deg); }
.fm-oral__chips { display: flex; justify-content: center; gap: 1.6cqw; margin-bottom: 3.2cqw; }
.fm-oral__chips span { font-size: 2.6cqw; font-weight: 600; padding: 1.3cqw 2.4cqw; border-radius: 2cqw; background: #fff; border: 1px solid #e8e8ed; color: #3a3a3c; }
.fm-oral__card { background: #fff; border-radius: 2.5cqw; box-shadow: 0 2px 12px rgba(0,0,0,.06); padding: 5cqw 5cqw 4cqw; text-align: center; position: relative; }
.fm-oral__star { position: absolute; top: 2.6cqw; right: 3cqw; font-size: 3.4cqw; color: #d2d2d7; }
.fm-oral__cat { display: inline-block; font-size: 2.6cqw; font-weight: 700; color: #6e6e73; background: #f5f5f7; padding: 1cqw 2.6cqw; border-radius: 9999px; margin-bottom: 2.4cqw; }
.fm-oral__q { font-size: 4.2cqw; font-weight: 700; line-height: 1.4; letter-spacing: -0.022em; }
.fm-oral__hint { font-size: 2.8cqw; color: #aeaeb2; margin-top: 0; height: 0; overflow: hidden; opacity: 0; }
.fm-oral__ans { overflow: hidden; max-height: 60cqw; text-align: left; }
.fm-oral__ans-in { border-top: 1px solid rgba(0,0,0,.06); margin-top: 3cqw; padding-top: 3.6cqw; }
.fm-page .fm-oral__ans img { width: 100%; height: 22cqw; object-fit: cover; object-position: 50% 62%; border-radius: 2cqw; margin-bottom: 2.6cqw; }
.fm-oral__ans p { margin: 0; font-size: 3cqw; line-height: 1.7; color: #1d1d1f; }
.fm-oral .fp-nav { grid-template-columns: 1fr 1fr; background: #f5f5f7; border-top: 0; padding-top: 2cqw; }
.fm-oral .fp-nav span { height: 10cqw; font-size: 3.4cqw; border: 0; }

@keyframes fm3Hint   { 0%, 8% { opacity: 0; margin-top: 3cqw; height: 4cqw; } 12%, 30% { opacity: 1; margin-top: 3cqw; height: 4cqw; } 36% { opacity: 0; margin-top: 3cqw; height: 4cqw; } 44%, 100% { opacity: 0; margin-top: 0; height: 0; } }
@keyframes fm3Ans    { 0%, 34% { max-height: 0; opacity: 0; } 50%, 100% { max-height: 60cqw; opacity: 1; } }
@keyframes fm3Scroll { 0%, 36% { transform: translateY(0); } 54%, 100% { transform: translateY(-44cqw); } }
@keyframes fm3Yes    { 0%, 74% { transform: scale(1); filter: brightness(1); } 78% { transform: scale(.95); filter: brightness(1.25); } 84%, 100% { transform: scale(1); filter: brightness(1); } }
.fm-oral .a-hint   { animation-name: fm3Hint; }
.fm-oral .a-ans    { animation-name: fm3Ans; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.fm-oral .a-scroll { animation-name: fm3Scroll; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.fm-oral .a-yes    { animation-name: fm3Yes; }

/* ═══ 카드 4 · 정규강의 (lecture-play.html) — 재생되며 진도가 차고 요약본 줄이 켜진다 ═══ */
.fm-lec { background: #f5f7fa; }
.fm-lec__page { position: absolute; left: 0; right: 0; top: 0; padding: 3.6cqw 4cqw; transform: translateY(-37cqw); }
.fm-lec__back { font-size: 2.9cqw; font-weight: 700; color: var(--color-brand, #152338); margin: 0 0 2.4cqw 1cqw; }
.fm-lec__player { position: relative; border-radius: 2.5cqw; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.fm-page .fm-lec__player img { width: 100%; height: 100%; object-fit: cover; }
.fm-lec__ctrl { position: absolute; left: 0; right: 0; bottom: 0; height: 6.4cqw; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); display: flex; align-items: center; padding: 0 3cqw; gap: 2cqw; }
.fm-lec__track { flex: 1; height: 1cqw; background: rgba(255,255,255,.3); border-radius: 1cqw; overflow: hidden; }
.fm-lec__track i { display: block; height: 100%; width: 100%; background: var(--color-brand-sky, #5FB2C9); transform-origin: left center; transform: scaleX(1); }
.fm-lec__ctrl b { font-size: 2.3cqw; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.fm-lec__play { position: absolute; left: 50%; top: 50%; width: 14cqw; height: 14cqw; margin: -7cqw 0 0 -7cqw; border-radius: 50%; background: rgba(0,0,0,.45); border: .4cqw solid rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center; opacity: 0; }
.fm-lec__play::after { content: ""; border-style: solid; border-width: 2.6cqw 0 2.6cqw 4.4cqw; border-color: transparent transparent transparent #fff; margin-left: 1cqw; }
.fm-lec__body { background: #fff; border-radius: 2.5cqw; padding: 3.2cqw 3.6cqw 3.6cqw; margin-top: 2.6cqw; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.fm-lec__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin-bottom: 3cqw; }
.fm-lec__nav span { height: 7.6cqw; border-radius: 2cqw; background: #f5f5f7; display: flex; align-items: center; justify-content: center; font-size: 2.8cqw; font-weight: 700; color: #1d1d1f; }
.fm-lec__nav span:first-child { color: #aeaeb2; }
.fm-lec__title { font-size: 3.6cqw; font-weight: 800; color: var(--color-brand, #152338); letter-spacing: -0.02em; }
.fm-lec__sub { font-size: 2.8cqw; color: #6e6e73; margin: 1cqw 0 3cqw; }
.fm-lec__prog { display: flex; justify-content: space-between; font-size: 2.8cqw; color: #6e6e73; margin-bottom: 1.4cqw; }
.fm-lec__prog b { color: #1d1d1f; font-weight: 700; font-variant-numeric: tabular-nums; }
.fm-lec__bar { height: 1.4cqw; border-radius: 1cqw; background: #e8e8ed; overflow: hidden; margin-bottom: 3cqw; }
.fm-lec__bar i { display: block; height: 100%; width: 72%; background: var(--color-brand-sky, #5FB2C9); border-radius: 1cqw; transform-origin: left center; transform: scaleX(1); }
.fm-lec__pdf { display: flex; align-items: center; gap: 2cqw; height: 9cqw; padding: 0 3cqw; border: 1px solid rgba(95,178,201,.45); background: rgba(95,178,201,.08); border-radius: 2cqw; font-size: 3cqw; font-weight: 700; }
.fm-lec__pdf i { width: 3.2cqw; height: 4cqw; border-radius: .6cqw; background: linear-gradient(135deg, var(--color-brand-sky, #5FB2C9), #2a6f8f); }
.fm-lec__pdf span { margin-left: auto; font-size: 2.7cqw; font-weight: 500; color: #6e6e73; }

@keyframes fm4Play   { 0%, 6% { opacity: 1; transform: scale(1); } 12%, 100% { opacity: 0; transform: scale(1.4); } }
@keyframes fm4Vprog  { 0%, 10% { transform: scaleX(.02); } 70%, 100% { transform: scaleX(1); } }
@keyframes fm4Scroll { 0%, 40% { transform: translateY(0); } 52%, 100% { transform: translateY(-37cqw); } }
@keyframes fm4Lprog  { 0%, 50% { transform: scaleX(.02); } 70%, 100% { transform: scaleX(1); } }
@keyframes fm4Pct    { 0%, 50% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes fm4Pdf    { 0%, 72% { background: #fff; border-color: #e8e8ed; } 78%, 100% { background: rgba(95,178,201,.08); border-color: rgba(95,178,201,.45); } }
.fm-lec .a-play   { animation-name: fm4Play; }
.fm-lec .a-vprog  { animation-name: fm4Vprog; animation-timing-function: linear; }
.fm-lec .a-scroll { animation-name: fm4Scroll; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.fm-lec .a-lprog  { animation-name: fm4Lprog; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.fm-lec .a-pct    { animation-name: fm4Pct; }
.fm-lec .a-pdf    { animation-name: fm4Pdf; }

/* ── 모션 최소화: 애니메이션 끄고 완료 상태로 정지 (기본 스타일이 곧 완료 상태) ── */
@media (prefers-reduced-motion: reduce) {
  .fm-page[class*="a-"], .fm-page [class*="a-"] { animation: none !important; }
}