/* ============================================================
   수학 파이널 LAB — 프리미엄 UI/UX 레이어 (theme.css)
   전부 .mfx-* 프리픽스 + @keyframes 만 정의.
   기존 index.html 인라인 스타일과 절대 충돌하지 않음.
   기존 태그 셀렉터(body/.card/.btn ...) 재정의 금지.
   ============================================================ */

/* ---------- 디자인 토큰 ---------- */
:root{
  /* 컬러 — 잉크 */
  --mfx-ink:#0f172a;
  /* 시그니처 액센트 */
  --mfx-accent:#0e7a5f;        /* 딥그린 */
  --mfx-accent-weak:#e6f4ef;
  --mfx-accent-strong:#0a5f49;
  --mfx-gold:#d4a017;          /* 골드 */
  --mfx-gold-weak:#fbf3dd;
  --mfx-gold-strong:#b6870e;
  /* 뉴트럴 그레이 스케일 */
  --mfx-gray-50:#f8fafc;
  --mfx-gray-100:#f1f5f9;
  --mfx-gray-200:#e2e8f0;
  --mfx-gray-300:#cbd5e1;
  --mfx-gray-400:#94a3b8;
  --mfx-gray-500:#64748b;
  --mfx-gray-600:#475569;
  --mfx-gray-700:#334155;
  --mfx-gray-800:#1e293b;
  --mfx-gray-900:#0f172a;
  /* 상태 */
  --mfx-success:#059669;
  --mfx-success-weak:#d1fae5;
  --mfx-warn:#d97706;
  --mfx-warn-weak:#fef3c7;
  /* 표면 */
  --mfx-surface:#ffffff;
  --mfx-surface-2:#f8fafc;
  --mfx-backdrop:rgba(15,23,42,.44);
  /* 간격 스케일 — 8px base */
  --mfx-sp-1:4px;
  --mfx-sp-2:8px;
  --mfx-sp-3:12px;
  --mfx-sp-4:16px;
  --mfx-sp-5:24px;
  --mfx-sp-6:32px;
  --mfx-sp-7:48px;
  --mfx-sp-8:64px;
  /* 라운드 */
  --mfx-r-sm:8px;
  --mfx-r-md:12px;
  --mfx-r-lg:16px;
  --mfx-r-full:999px;
  /* 그림자 */
  --mfx-sh-1:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --mfx-sh-2:0 4px 12px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.06);
  --mfx-sh-3:0 12px 32px rgba(15,23,42,.16),0 6px 14px rgba(15,23,42,.10);
  /* 폰트 */
  --mfx-font:'Pretendard','Malgun Gothic','Apple SD Gothic Neo',system-ui,-apple-system,sans-serif;
  --mfx-font-num:'Pretendard',ui-monospace,'SF Mono',Menlo,monospace;
  /* 모션 */
  --mfx-ease:cubic-bezier(.22,.61,.36,1);
  --mfx-dur:.22s;
}

/* ---------- 다크 모드 — 토큰 값만 조정 ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --mfx-ink:#e5e7eb;
    --mfx-accent:#2fbf9a;
    --mfx-accent-weak:#0f2e26;
    --mfx-accent-strong:#5fd6b8;
    --mfx-gold:#e6b93b;
    --mfx-gold-weak:#2e2510;
    --mfx-gold-strong:#f0cf6a;
    --mfx-gray-50:#0f172a;
    --mfx-gray-100:#1e293b;
    --mfx-gray-200:#273449;
    --mfx-gray-300:#334155;
    --mfx-gray-400:#475569;
    --mfx-gray-500:#64748b;
    --mfx-gray-600:#94a3b8;
    --mfx-gray-700:#cbd5e1;
    --mfx-gray-800:#e2e8f0;
    --mfx-gray-900:#f8fafc;
    --mfx-success:#34d399;
    --mfx-success-weak:#0b3b2c;
    --mfx-warn:#fbbf24;
    --mfx-warn-weak:#3a2c08;
    --mfx-surface:#111827;
    --mfx-surface-2:#0b1220;
    --mfx-backdrop:rgba(2,6,23,.62);
    --mfx-sh-1:0 1px 2px rgba(0,0,0,.4);
    --mfx-sh-2:0 4px 12px rgba(0,0,0,.5);
    --mfx-sh-3:0 12px 32px rgba(0,0,0,.6);
  }
}

/* ============================================================
   HUD — 에그머니 칩 (알약형 / 골드 테두리 / 🥚 + 숫자)
   ============================================================ */
.mfx-hud{
  display:inline-flex;
  align-items:center;
  gap:var(--mfx-sp-2);
  padding:6px 14px 6px 12px;
  border-radius:var(--mfx-r-full);
  background:linear-gradient(180deg,var(--mfx-surface),var(--mfx-gold-weak));
  border:1.5px solid var(--mfx-gold);
  box-shadow:var(--mfx-sh-1),inset 0 1px 0 rgba(255,255,255,.5);
  font-family:var(--mfx-font);
  color:var(--mfx-ink);
  font-weight:800;
  font-size:14px;
  line-height:1;
  user-select:none;
  transition:transform var(--mfx-dur) var(--mfx-ease),box-shadow var(--mfx-dur) var(--mfx-ease);
}
.mfx-hud:hover{
  transform:translateY(-1px);
  box-shadow:var(--mfx-sh-2),inset 0 1px 0 rgba(255,255,255,.5);
}
.mfx-hud .mfx-egg-ico{
  font-size:16px;
  line-height:1;
  filter:drop-shadow(0 1px 1px rgba(180,135,14,.35));
}
.mfx-hud .mfx-egg-count{
  font-family:var(--mfx-font-num);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  color:var(--mfx-gold-strong);
  min-width:1ch;
}
.mfx-hud .mfx-egg-count.mfx-countpop{
  animation:mfx-countpop .42s var(--mfx-ease);
}
/* 스트릭 불꽃 */
.mfx-flame{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:var(--mfx-sp-1);
  padding-left:var(--mfx-sp-2);
  border-left:1px solid var(--mfx-gold);
  font-size:13px;
  font-weight:800;
  color:var(--mfx-warn);
}
.mfx-flame .mfx-flame-ico{
  display:inline-block;
  font-size:15px;
  transform-origin:50% 90%;
}
.mfx-flame.mfx-on .mfx-flame-ico{
  animation:mfx-flame 1.1s var(--mfx-ease) infinite;
}

/* ============================================================
   TOAST — 우상단 스택 / 슬라이드인
   ============================================================ */
.mfx-toast-wrap{
  position:fixed;
  top:var(--mfx-sp-4);
  right:var(--mfx-sp-4);
  z-index:2147483000;
  display:flex;
  flex-direction:column;
  gap:var(--mfx-sp-2);
  pointer-events:none;
  max-width:min(92vw,360px);
}
.mfx-toast{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:var(--mfx-sp-3);
  padding:12px 16px;
  border-radius:var(--mfx-r-md);
  background:var(--mfx-surface);
  color:var(--mfx-ink);
  border:1px solid var(--mfx-gray-200);
  border-left:4px solid var(--mfx-accent);
  box-shadow:var(--mfx-sh-3);
  font-family:var(--mfx-font);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  animation:mfx-slidein .32s var(--mfx-ease);
  transition:opacity .3s ease,transform .3s var(--mfx-ease);
}
.mfx-toast.mfx-leaving{
  opacity:0;
  transform:translateX(16px);
}
.mfx-toast .mfx-toast-ico{ font-size:18px;line-height:1;flex:0 0 auto; }
.mfx-toast .mfx-toast-msg{ flex:1 1 auto;min-width:0; }
.mfx-toast.mfx-egg{ border-left-color:var(--mfx-gold); }
.mfx-toast.mfx-ok{ border-left-color:var(--mfx-success); }
.mfx-toast.mfx-info{ border-left-color:var(--mfx-accent); }
.mfx-toast.mfx-warn{ border-left-color:var(--mfx-warn); }

/* ============================================================
   PANEL — 에그 상점 / 내역 모달 (백드롭 블러)
   ============================================================ */
.mfx-panel-bg{
  position:fixed;
  inset:0;
  z-index:2147482000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--mfx-sp-4);
  background:var(--mfx-backdrop);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation:mfx-fadein .2s ease;
}
.mfx-panel{
  width:100%;
  max-width:520px;
  max-height:88vh;
  overflow:auto;
  background:var(--mfx-surface);
  color:var(--mfx-ink);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-lg);
  box-shadow:var(--mfx-sh-3);
  font-family:var(--mfx-font);
  animation:mfx-slideup .28s var(--mfx-ease);
}
.mfx-panel .mfx-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--mfx-sp-3);
  padding:var(--mfx-sp-5);
  border-bottom:1px solid var(--mfx-gray-200);
}
.mfx-panel .mfx-panel-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--mfx-ink);
}
.mfx-panel .mfx-panel-close{
  flex:0 0 auto;
  width:34px;height:34px;
  border:none;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-gray-100);
  color:var(--mfx-gray-600);
  font-size:18px;
  cursor:pointer;
  transition:background var(--mfx-dur) var(--mfx-ease);
}
.mfx-panel .mfx-panel-close:hover{ background:var(--mfx-gray-200); }
.mfx-panel .mfx-panel-body{ padding:var(--mfx-sp-5); }

/* ============================================================
   PRICING — 요금제 그리드 (4열 → 모바일 1열)
   ============================================================ */
.mfx-pricing{
  display:grid;
  gap:var(--mfx-sp-4);
  grid-template-columns:1fr;
  font-family:var(--mfx-font);
}
@media (min-width:720px){
  .mfx-pricing{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1040px){
  .mfx-pricing{ grid-template-columns:repeat(4,1fr); }
}
.mfx-plan{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--mfx-sp-3);
  padding:var(--mfx-sp-5);
  background:var(--mfx-surface);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-lg);
  box-shadow:var(--mfx-sh-1);
  transition:transform var(--mfx-dur) var(--mfx-ease),box-shadow var(--mfx-dur) var(--mfx-ease);
}
.mfx-plan:hover{ transform:translateY(-3px); box-shadow:var(--mfx-sh-2); }
.mfx-plan .mfx-plan-name{
  font-size:15px;
  font-weight:800;
  color:var(--mfx-gray-600);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.mfx-plan .mfx-plan-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-family:var(--mfx-font-num);
  font-variant-numeric:tabular-nums;
}
.mfx-plan .mfx-plan-price b{
  font-size:30px;
  font-weight:800;
  color:var(--mfx-ink);
  letter-spacing:-.02em;
}
.mfx-plan .mfx-plan-price span{
  font-size:13px;
  color:var(--mfx-gray-500);
  font-weight:600;
}
.mfx-plan .mfx-plan-feats{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--mfx-sp-2);
  font-size:13.5px;
  color:var(--mfx-gray-700);
}
.mfx-plan .mfx-plan-feats li{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.mfx-plan .mfx-plan-feats li::before{
  content:"✓";
  color:var(--mfx-accent);
  font-weight:900;
  flex:0 0 auto;
}
.mfx-plan .mfx-plan-cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:11px 16px;
  border:1.5px solid var(--mfx-gray-300);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-surface);
  color:var(--mfx-ink);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:transform var(--mfx-dur) var(--mfx-ease),background var(--mfx-dur) var(--mfx-ease),border-color var(--mfx-dur) var(--mfx-ease);
}
.mfx-plan .mfx-plan-cta:hover{ background:var(--mfx-gray-50); transform:translateY(-1px); }
/* PRO 강조 */
.mfx-plan.featured{
  border:2px solid var(--mfx-accent);
  box-shadow:var(--mfx-sh-3);
}
.mfx-plan.featured .mfx-plan-price b{ color:var(--mfx-accent-strong); }
.mfx-plan.featured .mfx-plan-cta{
  background:var(--mfx-accent);
  border-color:var(--mfx-accent);
  color:#fff;
}
.mfx-plan.featured .mfx-plan-cta:hover{ background:var(--mfx-accent-strong); border-color:var(--mfx-accent-strong); }
.mfx-plan.featured .mfx-plan-badge{
  position:absolute;
  top:-11px;
  left:50%;
  transform:translateX(-50%);
  padding:4px 12px;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-gold);
  color:#3a2c00;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:var(--mfx-sh-1);
  white-space:nowrap;
}

/* ============================================================
   PAYWALL — 페이월 카드 (잠금 아이콘 / 2 CTA)
   ============================================================ */
.mfx-paywall{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--mfx-sp-3);
  padding:var(--mfx-sp-6) var(--mfx-sp-5);
  background:linear-gradient(180deg,var(--mfx-surface),var(--mfx-surface-2));
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-lg);
  box-shadow:var(--mfx-sh-2);
  font-family:var(--mfx-font);
  color:var(--mfx-ink);
}
.mfx-paywall .mfx-paywall-lock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;height:56px;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-accent-weak);
  color:var(--mfx-accent);
  font-size:26px;
}
.mfx-paywall .mfx-paywall-title{
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em;
}
.mfx-paywall .mfx-paywall-desc{
  font-size:14px;
  color:var(--mfx-gray-600);
  max-width:36ch;
  line-height:1.6;
}
.mfx-paywall .mfx-paywall-cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--mfx-sp-2);
  margin-top:var(--mfx-sp-2);
}
.mfx-paywall .mfx-paywall-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:11px 20px;
  border-radius:var(--mfx-r-md);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  border:1.5px solid var(--mfx-accent);
  background:var(--mfx-accent);
  color:#fff;
  transition:transform var(--mfx-dur) var(--mfx-ease),background var(--mfx-dur) var(--mfx-ease);
}
.mfx-paywall .mfx-paywall-btn:hover{ background:var(--mfx-accent-strong); transform:translateY(-1px); }
.mfx-paywall .mfx-paywall-btn.mfx-secondary{
  background:transparent;
  color:var(--mfx-accent);
}
.mfx-paywall .mfx-paywall-btn.mfx-secondary:hover{ background:var(--mfx-accent-weak); }
.mfx-paywall .mfx-paywall-btn.mfx-pulse{ animation:mfx-pulse 2s var(--mfx-ease) infinite; }

/* ============================================================
   SKELETON — shimmer
   ============================================================ */
.mfx-skel{
  position:relative;
  overflow:hidden;
  border-radius:var(--mfx-r-sm);
  background:var(--mfx-gray-200);
  min-height:14px;
}
.mfx-skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:mfx-shimmer 1.4s infinite;
}
@media (prefers-color-scheme: dark){
  .mfx-skel::after{
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  }
}

/* ============================================================
   STORE ITEM — 소비 옵션 행 (아이콘 / 이름 / 비용 / 버튼)
   ============================================================ */
.mfx-store-item{
  display:flex;
  align-items:center;
  gap:var(--mfx-sp-3);
  padding:var(--mfx-sp-3) var(--mfx-sp-4);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-surface);
  font-family:var(--mfx-font);
  transition:border-color var(--mfx-dur) var(--mfx-ease),box-shadow var(--mfx-dur) var(--mfx-ease);
}
.mfx-store-item + .mfx-store-item{ margin-top:var(--mfx-sp-2); }
.mfx-store-item:hover{ border-color:var(--mfx-accent); box-shadow:var(--mfx-sh-1); }
.mfx-store-item .mfx-store-ico{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:var(--mfx-r-md);
  background:var(--mfx-accent-weak);
  font-size:20px;
}
.mfx-store-item .mfx-store-body{ flex:1 1 auto;min-width:0; }
.mfx-store-item .mfx-store-name{
  font-size:14.5px;
  font-weight:700;
  color:var(--mfx-ink);
}
.mfx-store-item .mfx-store-desc{
  font-size:12.5px;
  color:var(--mfx-gray-500);
}
.mfx-store-item .mfx-store-cost{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--mfx-font-num);
  font-variant-numeric:tabular-nums;
  font-weight:800;
  font-size:14px;
  color:var(--mfx-gold-strong);
}
.mfx-store-item .mfx-store-btn{
  flex:0 0 auto;
  padding:8px 14px;
  border:none;
  border-radius:var(--mfx-r-sm);
  background:var(--mfx-accent);
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background var(--mfx-dur) var(--mfx-ease),transform var(--mfx-dur) var(--mfx-ease);
}
.mfx-store-item .mfx-store-btn:hover{ background:var(--mfx-accent-strong); transform:translateY(-1px); }
.mfx-store-item .mfx-store-btn:disabled{
  background:var(--mfx-gray-300);
  color:var(--mfx-gray-500);
  cursor:not-allowed;
  transform:none;
}

/* ============================================================
   정답 스프링 유틸 (Premium.spring 대상)
   ============================================================ */
.mfx-spring{ animation:mfx-spring .5s var(--mfx-ease); }

/* ============================================================
   에그 파티클 (Premium.eggBurst)
   ============================================================ */
.mfx-egg-particle{
  position:fixed;
  z-index:2147483600;
  font-size:18px;
  line-height:1;
  pointer-events:none;
  will-change:transform,opacity;
  animation:mfx-burst .7s var(--mfx-ease) forwards;
}

/* ============================================================
   @keyframes
   ============================================================ */
@keyframes mfx-countpop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.28); }
  100%{ transform:scale(1); }
}
@keyframes mfx-flame{
  0%,100%{ transform:scale(1) rotate(-2deg); opacity:1; }
  50%{ transform:scale(1.14) rotate(3deg); opacity:.82; }
}
@keyframes mfx-spring{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.16); }
  55%{ transform:scale(.94); }
  75%{ transform:scale(1.05); }
  100%{ transform:scale(1); }
}
@keyframes mfx-shimmer{
  100%{ transform:translateX(100%); }
}
@keyframes mfx-slidein{
  0%{ opacity:0; transform:translateX(28px); }
  100%{ opacity:1; transform:translateX(0); }
}
@keyframes mfx-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(14,122,95,.35); }
  50%{ box-shadow:0 0 0 8px rgba(14,122,95,0); }
}
@keyframes mfx-fadein{
  0%{ opacity:0; }
  100%{ opacity:1; }
}
@keyframes mfx-slideup{
  0%{ opacity:0; transform:translateY(16px) scale(.98); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes mfx-burst{
  0%{ transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(var(--mfx-bx,0),var(--mfx-by,-60px)) scale(.6); opacity:0; }
}

/* ============================================================
   prefers-reduced-motion — 애니메이션 최소화
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .mfx-hud,
  .mfx-hud .mfx-egg-count.mfx-countpop,
  .mfx-flame.mfx-on .mfx-flame-ico,
  .mfx-toast,
  .mfx-panel,
  .mfx-panel-bg,
  .mfx-plan,
  .mfx-plan:hover,
  .mfx-skel::after,
  .mfx-spring,
  .mfx-egg-particle,
  .mfx-paywall .mfx-paywall-btn.mfx-pulse{
    animation:none !important;
    transition:none !important;
  }
  .mfx-skel::after{ display:none; }
  .mfx-plan:hover,
  .mfx-hud:hover{ transform:none; }
}

/* ============================================================
   ACCOUNT-UI 브리지 — account-ui.js가 theme.css 단일 소스로 수렴하며
   쓰는 오버레이/상점/요금제/공통 요소. 전부 .mfx-* (스코프드 자손 태그만).
   ============================================================ */
/* 오버레이 패널 컨테이너 & 닫기 버튼(플랫 콘텐츠용 절대배치) */
.mfx-panel{ position:relative; }
.mfx-panel-x{
  position:absolute;
  top:var(--mfx-sp-3);
  right:var(--mfx-sp-3);
  z-index:3;
}
.mfx-panel-in{ padding:var(--mfx-sp-5); }
/* 패널 내부 제목/부제/리드 (h2·h3 대체) */
.mfx-panel-in .mfx-panel-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--mfx-ink);
  margin:0 0 var(--mfx-sp-2);
}
.mfx-panel-subtitle{
  font-size:14.5px;
  font-weight:800;
  color:var(--mfx-gray-700);
  margin:var(--mfx-sp-4) 0 var(--mfx-sp-2);
}
.mfx-panel-lead{
  font-size:13px;
  color:var(--mfx-gray-500);
  margin:0 0 var(--mfx-sp-2);
  line-height:1.55;
}
.mfx-panel-actions{ margin-top:var(--mfx-sp-4); }
.mfx-panel-actions.mfx-wrap{ display:flex; gap:var(--mfx-sp-2); flex-wrap:wrap; }
/* 요금제 모달은 4열을 담도록 넓게 */
.mfx-panel.mfx-pricing-view{ max-width:920px; }

/* 잔액 배너 */
.mfx-bal{
  display:flex;
  align-items:center;
  gap:var(--mfx-sp-2);
  padding:var(--mfx-sp-3) var(--mfx-sp-4);
  margin:var(--mfx-sp-2) 0 var(--mfx-sp-1);
  border-radius:var(--mfx-r-md);
  background:linear-gradient(135deg,var(--mfx-gold-weak),var(--mfx-surface));
  border:1px solid var(--mfx-gold);
  font-size:14px;
  color:var(--mfx-ink);
}
.mfx-bal .mfx-bal-num{
  font-family:var(--mfx-font-num);
  font-variant-numeric:tabular-nums;
  font-size:22px;
  font-weight:800;
  color:var(--mfx-gold-strong);
}
.mfx-bal .mfx-bal-streak{ margin-left:auto; font-weight:800; color:var(--mfx-warn); font-size:12.5px; }
.mfx-earn-guide{ font-size:12px; color:var(--mfx-gray-500); margin:var(--mfx-sp-1) 0 0; }

/* "에그머니 모으는 법" 안내 카드 */
.mfx-earn-howto{
  margin-top:var(--mfx-sp-3);
  padding:var(--mfx-sp-3);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-gray-50);
}
.mfx-earn-howto-title{ font-weight:800; font-size:13.5px; color:var(--mfx-gray-700); margin-bottom:var(--mfx-sp-2); }
.mfx-earn-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.mfx-earn-list li{ display:flex; align-items:center; justify-content:space-between; gap:var(--mfx-sp-2); font-size:12.5px; color:var(--mfx-gray-700); }
.mfx-earn-list .mfx-earn-act{ color:var(--mfx-gray-700); }
.mfx-earn-list .mfx-earn-act small{ color:var(--mfx-gray-400); font-size:11px; font-weight:600; }
.mfx-earn-list .mfx-earn-amt{ font-weight:800; font-family:var(--mfx-font-num); color:var(--mfx-gold-strong); white-space:nowrap; }
.mfx-earn-howto-foot{ margin:var(--mfx-sp-2) 0 0; font-size:12px; line-height:1.55; color:var(--mfx-gray-500); }
.mfx-earn-howto-foot b{ color:var(--mfx-gray-700); }

/* 결제 미개통 "출시 예정" 안내 박스 */
.mfx-soon-box{
  display:flex;
  align-items:flex-start;
  gap:var(--mfx-sp-2);
  margin-top:var(--mfx-sp-3);
  padding:var(--mfx-sp-3);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-gray-50);
}
.mfx-soon-box .mfx-soon-ico{ font-size:18px; line-height:1.3; }
.mfx-soon-box .mfx-soon-text{ font-size:12.5px; line-height:1.55; color:var(--mfx-gray-700); }

/* 상점 아이템 상태(가능/불가) + 부족/보유 태그 */
.mfx-store-item.mfx-can{ cursor:pointer; }
.mfx-store-item.mfx-can:hover{ border-color:var(--mfx-accent); box-shadow:var(--mfx-sh-1); }
.mfx-store-item.mfx-no{ opacity:.62; }
.mfx-store-cost{ flex-direction:column; align-items:flex-end; }
.mfx-store-lack{ font-size:11px; color:var(--mfx-warn); font-weight:700; }
.mfx-store-owned{ font-size:11px; color:var(--mfx-success); font-weight:700; }

/* 원장(적립·사용 내역) 테이블 */
.mfx-log{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:var(--mfx-sp-2); }
.mfx-log th,
.mfx-log td{ padding:6px 8px; border-bottom:1px solid var(--mfx-gray-200); text-align:left; color:var(--mfx-gray-700); }
.mfx-log th{ color:var(--mfx-gray-500); font-weight:700; }
.mfx-log td.n{ text-align:right; font-weight:800; font-family:var(--mfx-font-num); }
.mfx-log td.pos{ color:var(--mfx-success); }
.mfx-log td.neg{ color:var(--mfx-warn); }

/* 고지·리드 텍스트 */
.mfx-note{
  font-size:11.5px;
  color:var(--mfx-gray-400);
  margin-top:var(--mfx-sp-4);
  line-height:1.55;
  border-top:1px solid var(--mfx-gray-200);
  padding-top:var(--mfx-sp-3);
}

/* 범용 버튼(.mfx-btn) — 상점/아하에서 사용 */
.mfx-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  border-radius:var(--mfx-r-md);
  padding:11px 16px;
  font-family:var(--mfx-font);
  font-weight:800;
  font-size:13.5px;
  cursor:pointer;
  background:var(--mfx-accent);
  color:#fff;
  transition:transform var(--mfx-dur) var(--mfx-ease),background var(--mfx-dur) var(--mfx-ease),filter var(--mfx-dur) var(--mfx-ease);
}
.mfx-btn:hover{ transform:translateY(-1px); background:var(--mfx-accent-strong); }
.mfx-btn.mfx-ghost{ background:var(--mfx-gray-100); color:var(--mfx-gray-700); }
.mfx-btn.mfx-ghost:hover{ background:var(--mfx-gray-200); }
.mfx-btn.mfx-gold{ background:linear-gradient(135deg,var(--mfx-gold),var(--mfx-gold-strong)); color:#3a2c00; }
.mfx-btn.mfx-gold:hover{ filter:brightness(1.04); background:linear-gradient(135deg,var(--mfx-gold),var(--mfx-gold-strong)); }
.mfx-btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* 요금제 현재등급 배지 */
.mfx-plan .mfx-plan-current{
  position:absolute;
  top:-11px;
  right:var(--mfx-sp-3);
  padding:3px 10px;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-success);
  color:#fff;
  font-size:11px;
  font-weight:800;
  box-shadow:var(--mfx-sh-1);
  white-space:nowrap;
}

/* 아하 모먼트 힌트 박스 */
.mfx-aha-hint{
  background:linear-gradient(135deg,var(--mfx-accent-weak),var(--mfx-surface-2));
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md);
  padding:var(--mfx-sp-3) var(--mfx-sp-4);
  font-size:13px;
  color:var(--mfx-gray-700);
  line-height:1.55;
}

/* 아하 모먼트 — 약점 카드/막대 + 손실회피 박스 */
.mfx-panel.mfx-aha{ max-width:440px; }
.mfx-aha-cards{
  display:flex;
  flex-direction:column;
  gap:var(--mfx-sp-2);
  margin:var(--mfx-sp-3) 0;
}
.mfx-aha-card{
  display:flex;
  align-items:flex-start;
  gap:var(--mfx-sp-3);
  padding:var(--mfx-sp-3);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-surface);
  box-shadow:var(--mfx-sh-1);
}
.mfx-aha-rank{
  flex:0 0 auto;
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-accent);
  color:#fff;
  font-family:var(--mfx-font-num);
  font-weight:800;
  font-size:13px;
}
.mfx-aha-card-body{ flex:1 1 auto; min-width:0; display:block; }
.mfx-aha-unit{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--mfx-ink);
  margin-bottom:6px;
}
.mfx-aha-bar{
  display:block;
  height:7px;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-gray-100);
  overflow:hidden;
}
.mfx-aha-bar i{
  display:block;
  height:100%;
  border-radius:var(--mfx-r-full);
  background:linear-gradient(90deg,var(--mfx-warn),var(--mfx-gold-strong));
  animation:mfx-aha-fill .6s var(--mfx-ease) both;
}
@keyframes mfx-aha-fill{ from{ width:0 !important; } }
.mfx-aha-note{
  display:block;
  font-size:12px;
  color:var(--mfx-gray-500);
  margin-top:6px;
  line-height:1.5;
}
.mfx-aha-chip{
  display:inline-block;
  margin-right:6px;
  padding:1px 8px;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-accent-weak);
  color:var(--mfx-accent-strong);
  font-size:11px;
  font-weight:800;
}
.mfx-aha-lossbox{
  margin-top:var(--mfx-sp-3);
  padding:var(--mfx-sp-3) var(--mfx-sp-4);
  border:1px solid var(--mfx-gold);
  border-radius:var(--mfx-r-md);
  background:linear-gradient(135deg,var(--mfx-gold-weak),var(--mfx-surface));
  font-size:13px;
  color:var(--mfx-gray-700);
  line-height:1.55;
}

/* ============================================================
   HOME DASHBOARD — dashboard.js (window.MFDash) 자가주입 카드
   ============================================================ */
.mfx-dash{
  display:block;
  margin:0 0 var(--mfx-sp-4);
  padding:var(--mfx-sp-5);
  background:linear-gradient(180deg,var(--mfx-surface),var(--mfx-surface-2));
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-lg);
  box-shadow:var(--mfx-sh-2);
  font-family:var(--mfx-font);
  color:var(--mfx-ink);
}
.mfx-dash-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--mfx-sp-3);
  margin-bottom:var(--mfx-sp-4);
}
.mfx-dash-hello{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
.mfx-dash-tier{
  flex:0 0 auto;
  padding:4px 12px;
  border-radius:var(--mfx-r-full);
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.04em;
  background:var(--mfx-gray-100);
  color:var(--mfx-gray-600);
  border:1px solid var(--mfx-gray-200);
}
.mfx-dash-tier.mfx-dash-tier-member{ background:var(--mfx-accent-weak); color:var(--mfx-accent-strong); border-color:transparent; }
.mfx-dash-tier.mfx-dash-tier-pro{ background:var(--mfx-accent); color:#fff; border-color:transparent; }
.mfx-dash-tier.mfx-dash-tier-max{ background:linear-gradient(135deg,var(--mfx-gold),var(--mfx-gold-strong)); color:#3a2c00; border-color:transparent; }

/* 상단 타일 그리드 */
.mfx-dash-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:var(--mfx-sp-3);
}
.mfx-dash-tile{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:var(--mfx-sp-3) var(--mfx-sp-4);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-surface);
  text-align:left;
}
.mfx-dash-tile.mfx-dash-egg{
  cursor:pointer;
  font:inherit;
  color:inherit;
  background:linear-gradient(135deg,var(--mfx-gold-weak),var(--mfx-surface));
  border-color:var(--mfx-gold);
  transition:transform var(--mfx-dur) var(--mfx-ease),box-shadow var(--mfx-dur) var(--mfx-ease);
}
.mfx-dash-tile.mfx-dash-egg:hover{ transform:translateY(-1px); box-shadow:var(--mfx-sh-1); }
.mfx-dash-tile-ico{ font-size:18px; line-height:1; }
.mfx-dash-tile-num{
  font-family:var(--mfx-font-num);
  font-variant-numeric:tabular-nums;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--mfx-ink);
}
.mfx-dash-tile.mfx-dash-dday .mfx-dash-tile-num{ color:var(--mfx-accent-strong); }
.mfx-dash-tile.mfx-dash-egg .mfx-dash-tile-num{ color:var(--mfx-gold-strong); }
.mfx-dash-tile-lbl{ font-size:11.5px; font-weight:700; color:var(--mfx-gray-500); }

/* 섹션 */
.mfx-dash-sec{ margin-top:var(--mfx-sp-4); }
.mfx-dash-sec-title{
  font-size:12.5px;
  font-weight:800;
  color:var(--mfx-gray-600);
  margin-bottom:var(--mfx-sp-2);
  letter-spacing:.01em;
}

/* 약점 막대 */
.mfx-dash-bar{
  display:grid;
  grid-template-columns:64px 1fr 28px;
  align-items:center;
  gap:var(--mfx-sp-2);
  margin:6px 0;
}
.mfx-dash-bar-lbl{ font-size:12px; font-weight:700; color:var(--mfx-gray-600); }
.mfx-dash-bar-track{
  position:relative;
  height:8px;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-gray-200);
  overflow:hidden;
}
.mfx-dash-bar-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  border-radius:var(--mfx-r-full);
  background:linear-gradient(90deg,var(--mfx-accent),var(--mfx-accent-strong));
  transition:width var(--mfx-dur) var(--mfx-ease);
}
.mfx-dash-bar-val{
  font-family:var(--mfx-font-num);
  font-variant-numeric:tabular-nums;
  font-size:12px;
  font-weight:800;
  color:var(--mfx-gray-600);
  text-align:right;
}

/* 빈 상태 + CTA */
.mfx-dash-empty{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--mfx-sp-3);
  padding:var(--mfx-sp-4);
  border:1px dashed var(--mfx-gray-300);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-surface);
  font-size:13px;
  color:var(--mfx-gray-600);
  line-height:1.5;
}
.mfx-dash-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border:none;
  border-radius:var(--mfx-r-md);
  background:var(--mfx-accent);
  color:#fff;
  font-family:var(--mfx-font);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition:transform var(--mfx-dur) var(--mfx-ease),background var(--mfx-dur) var(--mfx-ease);
}
.mfx-dash-cta:hover{ transform:translateY(-1px); background:var(--mfx-accent-strong); }
.mfx-dash-cta.mfx-dash-cta-ghost{
  background:var(--mfx-accent-weak);
  color:var(--mfx-accent-strong);
}
.mfx-dash-cta.mfx-dash-cta-ghost:hover{ background:var(--mfx-gray-100); }
.mfx-dash-reco-actions{ margin-top:var(--mfx-sp-3); }

/* 오늘의 3문항 추천 카드 */
.mfx-dash-recos{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--mfx-sp-2);
}
@media (min-width:560px){
  .mfx-dash-recos{ grid-template-columns:repeat(3,1fr); }
}
.mfx-dash-reco{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:var(--mfx-sp-3);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-surface);
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
  transition:transform var(--mfx-dur) var(--mfx-ease),border-color var(--mfx-dur) var(--mfx-ease),box-shadow var(--mfx-dur) var(--mfx-ease);
}
.mfx-dash-reco:hover{ transform:translateY(-2px); border-color:var(--mfx-accent); box-shadow:var(--mfx-sh-1); }
.mfx-dash-reco-tag{
  align-self:flex-start;
  padding:2px 8px;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-accent-weak);
  color:var(--mfx-accent-strong);
  font-size:10.5px;
  font-weight:800;
}
.mfx-dash-reco-title{ font-size:13.5px; font-weight:700; color:var(--mfx-ink); line-height:1.35; }
.mfx-dash-reco-sub{ font-size:11.5px; color:var(--mfx-gray-500); }

/* 대시보드 reduced-motion */
@media (prefers-reduced-motion: reduce){
  .mfx-dash-tile.mfx-dash-egg,
  .mfx-dash-tile.mfx-dash-egg:hover,
  .mfx-dash-bar-fill,
  .mfx-dash-cta,
  .mfx-dash-cta:hover,
  .mfx-dash-reco,
  .mfx-dash-reco:hover,
  .mfx-btn,
  .mfx-btn:hover{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}

/* ============================================================
   journey.js — 학습 여정 코치 카드 (.jn-*) 자가주입
   대시보드 아래에 붙는 "다음 할 일" 추천 카드. mfx 토큰만 사용.
   ============================================================ */
.jn{
  display:block;
  margin:0 0 var(--mfx-sp-4);
  padding:var(--mfx-sp-5);
  background:linear-gradient(180deg,var(--mfx-surface),var(--mfx-surface-2));
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-lg);
  box-shadow:var(--mfx-sh-1);
  font-family:var(--mfx-font);
  color:var(--mfx-ink);
}
.jn-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--mfx-sp-3);
  margin-bottom:var(--mfx-sp-3);
  flex-wrap:wrap;
}
.jn-title{ font-size:15px; font-weight:800; letter-spacing:-.01em; }
.jn-motiv{ font-size:12px; font-weight:700; color:var(--mfx-gray-500); }

/* 다음 할 일 — 하이라이트 카드(버튼) */
.jn-next{
  display:flex;
  align-items:center;
  gap:var(--mfx-sp-3);
  width:100%;
  margin:0 0 var(--mfx-sp-4);
  padding:var(--mfx-sp-3) var(--mfx-sp-4);
  border:1px solid var(--mfx-accent);
  border-radius:var(--mfx-r-md);
  background:linear-gradient(135deg,var(--mfx-accent-weak),var(--mfx-surface));
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
  transition:transform var(--mfx-dur) var(--mfx-ease),box-shadow var(--mfx-dur) var(--mfx-ease);
}
.jn-next:hover{ transform:translateY(-1px); box-shadow:var(--mfx-sh-1); }
.jn-next-badge{
  flex:0 0 auto;
  align-self:flex-start;
  padding:3px 10px;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-accent);
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.02em;
}
.jn-next-main{ display:flex; align-items:center; gap:var(--mfx-sp-3); flex:1 1 auto; min-width:0; }
.jn-next-ico{ font-size:22px; line-height:1; flex:0 0 auto; }
.jn-next-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.jn-next-title{ font-size:14.5px; font-weight:800; color:var(--mfx-ink); line-height:1.3; }
.jn-next-desc{ font-size:12px; color:var(--mfx-gray-600); line-height:1.4; }
.jn-next-cta{
  flex:0 0 auto;
  align-self:center;
  padding:7px 14px;
  border-radius:var(--mfx-r-md);
  background:var(--mfx-accent);
  color:#fff;
  font-size:12.5px;
  font-weight:800;
  white-space:nowrap;
}

/* 체크리스트 */
.jn-steps{ display:flex; flex-direction:column; gap:var(--mfx-sp-2); }
.jn-step{
  display:flex;
  align-items:flex-start;
  gap:var(--mfx-sp-3);
  width:100%;
  padding:var(--mfx-sp-3);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-surface);
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
  transition:transform var(--mfx-dur) var(--mfx-ease),border-color var(--mfx-dur) var(--mfx-ease);
}
.jn-step:hover{ transform:translateY(-1px); border-color:var(--mfx-accent); }
.jn-step.is-current{ border-color:var(--mfx-accent); background:var(--mfx-accent-weak); }
.jn-step-mark{
  flex:0 0 auto;
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--mfx-r-full);
  border:1.5px solid var(--mfx-gray-300);
  color:var(--mfx-gray-500);
  font-size:12px; font-weight:800; line-height:1;
}
.jn-step.is-done .jn-step-mark{
  border-color:transparent;
  background:var(--mfx-accent);
  color:#fff;
}
.jn-step-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.jn-step-title{ font-size:13.5px; font-weight:700; color:var(--mfx-ink); line-height:1.35; }
.jn-step.is-done .jn-step-title{ color:var(--mfx-gray-500); text-decoration:line-through; text-decoration-color:var(--mfx-gray-300); }
.jn-step-desc{ font-size:11.5px; color:var(--mfx-gray-500); line-height:1.4; }

/* journey reduced-motion */
@media (prefers-reduced-motion: reduce){
  .jn-next,
  .jn-next:hover,
  .jn-step,
  .jn-step:hover{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}

/* ============================================================
   social-proof.js — 사회적 증거 레이어 (.mfx-sp-*)
   D-day 배너 · 사용자 후기 캐러셀 · 신뢰 배지
   ============================================================ */
/* ---- D-day 미니 배너 ---- */
.mfx-sp-banner{
  display:flex;
  align-items:center;
  gap:var(--mfx-sp-2);
  margin:0 0 var(--mfx-sp-3);
  padding:var(--mfx-sp-2) var(--mfx-sp-3);
  border:1px solid var(--mfx-accent-weak);
  border-radius:var(--mfx-r-full);
  background:linear-gradient(90deg,var(--mfx-accent-weak),var(--mfx-surface));
  font-family:var(--mfx-font);
  color:var(--mfx-ink);
}
.mfx-sp-banner-badge{
  padding:3px 10px;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-accent);
  color:#fff;
  font-family:var(--mfx-font-num);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.3px;
}
.mfx-sp-banner-lbl{ font-size:12px; font-weight:600; color:var(--mfx-gray-600); }

/* ---- 후기 + 배지 블록 컨테이너 ---- */
.mfx-sp.mfx-sp-block{
  display:block;
  margin:var(--mfx-sp-5) 0 var(--mfx-sp-4);
  padding:var(--mfx-sp-5);
  background:linear-gradient(180deg,var(--mfx-surface),var(--mfx-surface-2));
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-lg);
  box-shadow:var(--mfx-sh-1);
  font-family:var(--mfx-font);
  color:var(--mfx-ink);
}

/* ---- 후기 캐러셀 ---- */
.mfx-sp-rev-head{
  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
  color:var(--mfx-accent-strong);
  text-transform:uppercase;
  margin-bottom:var(--mfx-sp-3);
}
.mfx-sp-rev-stage{
  position:relative;
  min-height:88px;
}
.mfx-sp-rev-card{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity var(--mfx-dur) var(--mfx-ease),transform var(--mfx-dur) var(--mfx-ease);
  pointer-events:none;
}
.mfx-sp-rev-card.on{
  opacity:1;
  visibility:visible;
  transform:none;
  position:relative;
  pointer-events:auto;
}
.mfx-sp-rev-body{
  margin:0 0 var(--mfx-sp-2);
  padding:0;
  font-size:14.5px;
  line-height:1.55;
  color:var(--mfx-ink);
  quotes:none;
}
.mfx-sp-rev-who{
  font-size:12px;
  font-weight:700;
  color:var(--mfx-gray-500);
}
.mfx-sp-rev-dots{
  display:flex;
  gap:6px;
  margin-top:var(--mfx-sp-3);
}
.mfx-sp-rev-dot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-gray-300);
  cursor:pointer;
  transition:background var(--mfx-dur) var(--mfx-ease),transform var(--mfx-dur) var(--mfx-ease);
}
.mfx-sp-rev-dot.on{ background:var(--mfx-accent); transform:scale(1.25); }
.mfx-sp-rev-dot:hover{ background:var(--mfx-accent-strong); }

/* ---- 신뢰 배지 줄 ---- */
.mfx-sp-badges{
  display:flex;
  flex-wrap:wrap;
  gap:var(--mfx-sp-2);
  margin-top:var(--mfx-sp-4);
  padding-top:var(--mfx-sp-4);
  border-top:1px solid var(--mfx-gray-200);
}
.mfx-sp-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-full);
  background:var(--mfx-surface);
  font-size:12px;
  font-weight:600;
  color:var(--mfx-gray-700);
}
.mfx-sp-badge-ico{ color:var(--mfx-accent); font-weight:800; }
.mfx-sp-badge-lbl{ white-space:nowrap; }

/* social-proof reduced-motion — 자동 회전 정지는 JS, 여기선 트랜지션만 제거 */
@media (prefers-reduced-motion: reduce){
  .mfx-sp-rev-card,
  .mfx-sp-rev-dot,
  .mfx-sp-rev-dot.on{
    transition:none !important;
    transform:none !important;
  }
}

/* ============================================================
   REMIND — 로컬 리마인더 배너 (reminders.js / window.MFRemind)
   서버 불필요·인앱 전용. 기존 태그 셀렉터 미사용, .mfx-* 토큰만.
   ============================================================ */
.mfx-remind-wrap{
  position:fixed;
  left:50%;
  bottom:var(--mfx-sp-4);
  transform:translateX(-50%);
  z-index:2147483100;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--mfx-sp-2);
  width:max-content;
  max-width:min(94vw,480px);
  pointer-events:none;
}
.mfx-remind-banner{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:var(--mfx-sp-3);
  padding:12px 14px 12px 16px;
  border-radius:var(--mfx-r-lg);
  background:var(--mfx-surface);
  color:var(--mfx-ink);
  border:1px solid var(--mfx-gray-200);
  box-shadow:var(--mfx-sh-3);
  font-family:var(--mfx-font);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  animation:mfx-slideup .32s var(--mfx-ease);
  transition:opacity .3s ease,transform .3s var(--mfx-ease);
}
.mfx-remind-banner.mfx-leaving{
  opacity:0;
  transform:translateY(12px);
}
.mfx-remind-ico{ font-size:18px;line-height:1;flex:0 0 auto; }
.mfx-remind-msg{ flex:1 1 auto;min-width:0; }
.mfx-remind-cta{
  flex:0 0 auto;
  padding:6px 14px;
  border:0;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-accent);
  color:#fff;
  font-family:var(--mfx-font);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background var(--mfx-dur) var(--mfx-ease),transform var(--mfx-dur) var(--mfx-ease);
}
.mfx-remind-cta:hover{ background:var(--mfx-accent-strong); }
.mfx-remind-cta:active{ transform:scale(.96); }
.mfx-remind-close{
  flex:0 0 auto;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:var(--mfx-r-full);
  background:transparent;
  color:var(--mfx-gray-500);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background var(--mfx-dur) var(--mfx-ease),color var(--mfx-dur) var(--mfx-ease);
}
.mfx-remind-close:hover{ background:var(--mfx-gray-100);color:var(--mfx-gray-700); }

@keyframes mfx-slideup{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .mfx-remind-banner{
    animation:none !important;
    transition:none !important;
  }
  .mfx-remind-cta,
  .mfx-remind-close{ transition:none !important; }
  .mfx-remind-cta:active{ transform:none !important; }
}

/* ============================================================
   ONBOARDING — 첫 방문 3스텝 (onboarding.js / window.MFOnboard)
   .mfx-panel / .mfx-panel-bg 재사용, .mfx-onb-* 만 신규 정의.
   ============================================================ */
.mfx-onb-panel{ max-width:460px; }
.mfx-onb-body{ padding:var(--mfx-sp-5); }

/* 진행 점 */
.mfx-onb-dots{
  display:flex;
  gap:6px;
  margin-bottom:var(--mfx-sp-4);
}
.mfx-onb-dot{
  width:22px;
  height:5px;
  border-radius:var(--mfx-r-full);
  background:var(--mfx-gray-200);
  transition:background var(--mfx-dur) var(--mfx-ease);
}
.mfx-onb-dot.mfx-done{ background:var(--mfx-accent-weak); }
.mfx-onb-dot.mfx-on{ background:var(--mfx-accent); }

/* 제목/부제 */
.mfx-onb-title{
  font-family:var(--mfx-font);
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--mfx-ink);
  margin:0 0 var(--mfx-sp-2);
  line-height:1.35;
}
.mfx-onb-sub{
  font-family:var(--mfx-font);
  font-size:13.5px;
  color:var(--mfx-gray-500);
  margin:0 0 var(--mfx-sp-4);
  line-height:1.55;
}

/* 칩 그리드 */
.mfx-onb-chips{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--mfx-sp-2);
}
@media (min-width:420px){
  .mfx-onb-chips{ grid-template-columns:1fr 1fr; }
}
.mfx-onb-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:12px 14px;
  border:1.5px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-surface);
  color:var(--mfx-ink);
  font-family:var(--mfx-font);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--mfx-dur) var(--mfx-ease),
             background var(--mfx-dur) var(--mfx-ease),
             transform var(--mfx-dur) var(--mfx-ease);
}
.mfx-onb-chip:hover{ border-color:var(--mfx-accent); transform:translateY(-1px); }
.mfx-onb-chip:focus-visible{ outline:2px solid var(--mfx-accent); outline-offset:2px; }
.mfx-onb-chip.mfx-on{
  border-color:var(--mfx-accent);
  background:var(--mfx-accent-weak);
}
.mfx-onb-chip-lbl{ font-size:14.5px; font-weight:800; letter-spacing:-.01em; }
.mfx-onb-chip-desc{ font-size:11.5px; font-weight:600; color:var(--mfx-gray-500); }
.mfx-onb-chip.mfx-on .mfx-onb-chip-desc{ color:var(--mfx-accent-strong); }

/* 하단 액션 */
.mfx-onb-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--mfx-sp-3);
  margin-top:var(--mfx-sp-5);
  flex-wrap:wrap;
}
.mfx-onb-foot-r{ display:flex; align-items:center; gap:var(--mfx-sp-2); margin-left:auto; }
.mfx-onb-skip{
  border:none;
  background:none;
  color:var(--mfx-gray-500);
  font-family:var(--mfx-font);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  padding:8px 4px;
  text-decoration:underline;
  text-underline-offset:2px;
}
.mfx-onb-skip:hover{ color:var(--mfx-gray-700); }
.mfx-onb-back{
  border:1px solid var(--mfx-gray-200);
  background:var(--mfx-surface);
  color:var(--mfx-gray-600);
  font-family:var(--mfx-font);
  font-size:13px;
  font-weight:700;
  border-radius:var(--mfx-r-md);
  padding:9px 14px;
  cursor:pointer;
  transition:background var(--mfx-dur) var(--mfx-ease);
}
.mfx-onb-back:hover{ background:var(--mfx-gray-100); }
.mfx-onb-next{
  border:none;
  background:var(--mfx-accent);
  color:#fff;
  font-family:var(--mfx-font);
  font-size:13px;
  font-weight:800;
  border-radius:var(--mfx-r-md);
  padding:9px 18px;
  cursor:pointer;
  transition:transform var(--mfx-dur) var(--mfx-ease),
             background var(--mfx-dur) var(--mfx-ease),
             opacity var(--mfx-dur) var(--mfx-ease);
}
.mfx-onb-next:hover{ transform:translateY(-1px); background:var(--mfx-accent-strong); }
.mfx-onb-next:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

@media (prefers-reduced-motion: reduce){
  .mfx-onb-chip,
  .mfx-onb-chip:hover,
  .mfx-onb-next,
  .mfx-onb-next:hover,
  .mfx-onb-back,
  .mfx-onb-dot{
    transition:none !important;
    transform:none !important;
  }
}

/* ============================================================
   교과 학습 트리 (curriculum.js) — .cur-* / --mfx-* 토큰 전용
   ============================================================ */
.cur-root .sub{ margin-top:6px; }

/* 세그먼트(중/고, 트랙) */
.cur-seg{
  display:inline-flex; gap:4px; margin-top:var(--mfx-sp-3);
  padding:4px; border-radius:var(--mfx-r-full);
  background:var(--mfx-gray-100); border:1px solid var(--mfx-gray-200);
  max-width:100%; flex-wrap:wrap;
}
.cur-seg-wrap{ padding-top:var(--mfx-sp-3); padding-bottom:var(--mfx-sp-3); }
.cur-seg-btn{
  appearance:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:var(--mfx-r-full);
  font:600 14px/1 var(--mfx-font); color:var(--mfx-gray-600);
  background:transparent; transition:background .15s,color .15s,box-shadow .15s;
}
.cur-seg-btn.is-on{
  background:var(--mfx-surface); color:var(--mfx-accent-strong);
  box-shadow:var(--mfx-sh-1); font-weight:800;
}

/* 학년/과목 카드 그리드 */
.cur-grid{
  display:grid; gap:var(--mfx-sp-3); margin:var(--mfx-sp-3) 0;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.cur-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  position:relative; text-align:left; cursor:pointer;
  padding:var(--mfx-sp-4); border-radius:var(--mfx-r-lg);
  background:var(--mfx-surface); border:1px solid var(--mfx-gray-200);
  box-shadow:var(--mfx-sh-1); transition:transform .12s,box-shadow .15s,border-color .15s;
  font-family:var(--mfx-font);
}
.cur-card:hover{ transform:translateY(-2px); box-shadow:var(--mfx-sh-2); border-color:var(--mfx-accent); }
.cur-card-t{ font-weight:800; font-size:17px; color:var(--mfx-ink); }
.cur-card-s{ font-size:12.5px; color:var(--mfx-gray-500); }
.cur-card-go{ position:absolute; top:var(--mfx-sp-4); right:var(--mfx-sp-4); color:var(--mfx-gray-400); font-size:18px; font-weight:800; }

/* 헤더 행(뒤로 + 제목) */
.cur-head-row{ display:flex; align-items:center; gap:var(--mfx-sp-3); }
.cur-head-title{ font-weight:800; font-size:18px; color:var(--mfx-ink); font-family:var(--mfx-font); }
.cur-back{ flex:0 0 auto; }

/* 영역 그룹 */
.cur-area{ margin-bottom:var(--mfx-sp-4); }
.cur-area-h{
  font:800 13px/1 var(--mfx-font); letter-spacing:.02em;
  color:var(--mfx-accent-strong); text-transform:none;
  margin:var(--mfx-sp-4) 2px var(--mfx-sp-2);
  display:flex; align-items:center; gap:8px;
}
.cur-area-h::before{ content:""; width:4px; height:14px; border-radius:2px; background:var(--mfx-accent); }

/* 단원 카드 */
.cur-unit{
  background:var(--mfx-surface); border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md); box-shadow:var(--mfx-sh-1);
  margin-bottom:var(--mfx-sp-2); overflow:hidden; transition:border-color .15s,box-shadow .15s;
}
.cur-unit.is-open{ border-color:var(--mfx-accent); box-shadow:var(--mfx-sh-2); }
.cur-unit-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--mfx-sp-3);
  padding:14px var(--mfx-sp-4); background:transparent; border:0; cursor:pointer;
  font-family:var(--mfx-font); text-align:left;
}
.cur-unit-name{ font-weight:700; font-size:15px; color:var(--mfx-ink); }
.cur-unit-meta{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
.cur-chev{ color:var(--mfx-gray-400); font-size:11px; }

/* 상태 배지 */
.cur-pill{ font:800 11px/1 var(--mfx-font); padding:5px 9px; border-radius:var(--mfx-r-full); white-space:nowrap; }
.cur-pill-ok{ background:var(--mfx-accent-weak); color:var(--mfx-accent-strong); }
.cur-pill-soon{ background:var(--mfx-gray-100); color:var(--mfx-gray-500); }

/* 단원 상세 */
.cur-detail{
  padding:var(--mfx-sp-2) var(--mfx-sp-4) var(--mfx-sp-4);
  border-top:1px dashed var(--mfx-gray-200);
  animation:mfx-cur-in .18s ease both;
}
@keyframes mfx-cur-in{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }
.cur-soon-note{
  margin:var(--mfx-sp-3) 0; padding:10px 12px; border-radius:var(--mfx-r-sm);
  background:var(--mfx-warn-weak); color:var(--mfx-warn); font:700 13px/1.4 var(--mfx-font);
}
.cur-block{ margin-top:var(--mfx-sp-3); }
.cur-block-h{ font:800 12px/1 var(--mfx-font); color:var(--mfx-gray-500); letter-spacing:.03em; margin-bottom:6px; }
.cur-concept{ font:400 14px/1.6 var(--mfx-font); color:var(--mfx-gray-700); margin:0; }
.cur-concept.sub{ color:var(--mfx-gray-400); font-size:13px; }
.cur-fig{ max-width:100%; height:auto; border-radius:var(--mfx-r-sm); border:1px solid var(--mfx-gray-200); background:var(--mfx-surface-2); }
.cur-mis{ margin:0; padding-left:18px; }
.cur-mis li{ font:400 13.5px/1.6 var(--mfx-font); color:var(--mfx-gray-700); margin-bottom:4px; }

/* 액션 버튼 영역 */
.cur-actions{ display:flex; flex-wrap:wrap; gap:var(--mfx-sp-2); align-items:center; margin-top:var(--mfx-sp-4); }
.cur-btn-solve{
  background:linear-gradient(135deg,var(--mfx-accent),var(--mfx-accent-strong)) !important;
  color:#fff !important; border:0 !important; font-weight:800;
}
.cur-btn-var{ border:1px solid var(--mfx-gold) !important; color:var(--mfx-gold-strong) !important; }

/* 토스트 */
.cur-toast{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(12px);
  z-index:9999; max-width:88vw;
  padding:11px 18px; border-radius:var(--mfx-r-full);
  background:var(--mfx-gray-900); color:#fff; box-shadow:var(--mfx-sh-3);
  font:600 13.5px/1.4 var(--mfx-font); opacity:0; pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.cur-toast.cur-toast-on{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:520px){
  .cur-grid{ grid-template-columns:1fr 1fr; }
  .cur-seg-btn{ padding:8px 12px; font-size:13px; }
  .cur-unit-name{ font-size:14px; }
}

/* ── 계층 내비: 상위 그룹 + 하위 드롭다운 (2026-07) ─────────────
   상위 버튼은 기존 .navbtn 스타일 유지. 드롭다운이 잘리지 않도록
   nav의 overflow-x:auto 를 visible로 완화하고 좁은 화면은 wrap 허용. */
#nav{ overflow:visible; flex-wrap:wrap; }
.nav-group{ position:relative; display:inline-flex; }
.nav-top{ cursor:pointer; }
.nav-caret{ font-size:10px; opacity:.72; margin-left:3px; line-height:1; transition:transform .18s; }
.nav-group.open .nav-top .nav-caret{ transform:rotate(180deg); }
.nav-menu{
  position:absolute; top:100%; left:0; min-width:184px;
  background:linear-gradient(160deg,#3730a3,#312e81);
  border:1px solid rgba(255,255,255,.16); border-radius:0 12px 12px 12px;
  box-shadow:0 16px 38px rgba(20,18,70,.42); padding:6px;
  display:none; flex-direction:column; gap:2px; z-index:60;
}
.nav-group.open > .nav-menu{ display:flex; }
@media (hover:hover) and (pointer:fine){
  .nav-group:hover > .nav-menu{ display:flex; }
}
.nav-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:transparent; border:0; color:#e9edff; font:inherit; font-size:14px;
  font-weight:600; letter-spacing:-.2px; padding:9px 12px; border-radius:8px;
  cursor:pointer; white-space:nowrap; transition:background .15s,color .15s;
}
.nav-item:hover, .nav-item:focus-visible{ background:rgba(255,255,255,.13); color:#fff; outline:none; }
.nav-item:focus-visible{ box-shadow:inset 0 0 0 2px rgba(251,191,36,.55); }
.nav-item.on{ background:rgba(251,191,36,.18); color:#fbbf24; }
.nav-item .nav-ico{ opacity:.85; min-width:16px; text-align:center; }
@media (max-width:600px){
  .nav-menu{ min-width:152px; }
  .nav-caret{ font-size:9px; }
  .nav-item{ font-size:13px; padding:8px 10px; }
}

/* ============================================================
   수학 도식 모티프 장식 레이어 (mathart.js · window.MFArt)
   저작권 청정 inline SVG 선화. 카드 배경에 은은히 깔림.
   비침습: 텍스트/클릭영역 훼손 금지, 텍스트 아래(z-index 음수)로만.
   ============================================================ */
.art-host{ position:relative; isolation:isolate; }
.art-motif{
  position:absolute; right:0; bottom:0;
  width:44%; min-width:52px; max-width:132px;
  aspect-ratio:1/1;
  z-index:-1;                 /* 격리 컨텍스트 내부 → 카드 배경 위, 텍스트 아래 */
  pointer-events:none;        /* 클릭 통과 */
  color:var(--mfx-accent,#0e7a5f);
  opacity:.06;                /* 워터마크처럼 절제 */
  overflow:hidden;
}
.art-motif svg{ display:block; width:100%; height:100%; }
.art-motif.art-gold{ color:var(--mfx-gold,#d4a017); opacity:.07; }

/* 카드 종류별 미세 조정 */
.cur-card.art-host > .art-motif{ opacity:.07; width:46%; }
.topic-card.art-host > .art-motif{ opacity:.05; width:38%; }
.mfx-dash-tile.art-host > .art-motif{ opacity:.05; width:40%; max-width:64px; }
.plan-hero.art-host > .art-motif{ opacity:.05; width:30%; max-width:150px; }

/* 접근성: 모티프는 정적이라 애니메이션 없음. 감축 모드에서도 동일(무해). */
@media (prefers-reduced-motion: reduce){
  .art-motif{ opacity:.05; }
}

/* ============================================================
   PERSONALIZE — 학년·교과 개인화 (personalize.js / curriculum.js / dashboard.js)
   .mfx-panel / .mfx-panel-bg / .mfx-onb-chip 재사용, 아래 클래스만 신규.
   ============================================================ */
.mfx-persona-panel{ max-width:480px; }
.mfx-persona-sec{ margin-bottom:var(--mfx-sp-5); }
.mfx-persona-sec:last-of-type{ margin-bottom:var(--mfx-sp-3); }
.mfx-persona-h{
  font-size:13px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--mfx-gray-700);
  margin-bottom:var(--mfx-sp-3);
}
.mfx-persona-hint{ font-size:11.5px; font-weight:600; color:var(--mfx-gray-500); }
.mfx-persona-note{
  font-size:12.5px;
  font-weight:600;
  color:var(--mfx-gray-500);
  background:var(--mfx-gray-100);
  border-radius:var(--mfx-r-md);
  padding:12px 14px;
  margin:0;
}
/* 학년 칩은 컴팩트 그리드로 */
.mfx-persona-grades{ grid-template-columns:repeat(3,1fr); }
.mfx-persona-grades .mfx-onb-chip{ align-items:center; padding:11px 8px; }
.mfx-persona-grades .mfx-onb-chip-lbl{ font-size:14px; }
@media (min-width:420px){
  .mfx-persona-grades{ grid-template-columns:repeat(3,1fr); }
}
.mfx-persona-subs .mfx-onb-chip{ align-items:center; }

/* 교과 탭: "내 교과" 배지 + 카드 강조 (curriculum.js) */
.cur-mine{
  display:inline-block;
  margin-left:6px;
  vertical-align:middle;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--mfx-accent-strong);
  background:var(--mfx-accent-weak);
  border-radius:var(--mfx-r-full);
  padding:2px 8px;
}
.cur-card.cur-card-mine{
  border-color:var(--mfx-accent);
  box-shadow:0 0 0 1px var(--mfx-accent) inset;
}

/* 대시보드: 학년·교과 요약 칩 (dashboard.js) */
.mfx-dash-persona{ margin:calc(-1 * var(--mfx-sp-2)) 0 var(--mfx-sp-4); }
.mfx-dash-persona-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  border:1px solid var(--mfx-gray-200);
  background:var(--mfx-surface);
  color:var(--mfx-ink);
  border-radius:var(--mfx-r-full);
  padding:6px 12px;
  font-family:var(--mfx-font);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:border-color var(--mfx-dur) var(--mfx-ease),
             background var(--mfx-dur) var(--mfx-ease);
}
.mfx-dash-persona-chip:hover{ border-color:var(--mfx-accent); background:var(--mfx-accent-weak); }
.mfx-dash-persona-ico{ font-size:14px; flex:0 0 auto; }
.mfx-dash-persona-lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mfx-dash-persona-gear{
  flex:0 0 auto;
  font-size:11px;
  font-weight:800;
  color:var(--mfx-accent-strong);
  background:var(--mfx-accent-weak);
  border-radius:var(--mfx-r-full);
  padding:2px 8px;
}
.mfx-dash-persona-chip.mfx-dash-persona-unset{
  border-style:dashed;
  color:var(--mfx-gray-600);
}

/* ============================================================
   galaxy.js — 은하계 온톨로지 히어로 (.gx-*)
   홈 최상단 hero. 딥그린~네이비 배경 + 절제된 골드 액센트.
   순수 SVG/CSS. 기존 태그 셀렉터 재정의 없음.
   ============================================================ */
.gx-hero{
  --gx-g0:#34c6a0;   /* 중학교 — 그린 */
  --gx-g1:#4aa8d8;   /* 공통  — 스카이 */
  --gx-g2:var(--mfx-gold,#e6b93b);   /* 일반선택 — 골드(테마 정합) */
  --gx-g3:#b98bd9;   /* 진로선택 — 바이올렛 */
  --gx-line:rgba(212,160,23,.16);
  position:relative;
  margin:0 0 var(--mfx-sp-4,16px);
  border-radius:var(--mfx-r-lg,16px);
  overflow:hidden;
  border:1px solid rgba(212,160,23,.28);
  box-shadow:var(--mfx-sh-2,0 4px 12px rgba(0,0,0,.2));
  background:#0a1622;
}
.gx-head{
  padding:var(--mfx-sp-4,16px) var(--mfx-sp-5,24px) 0;
  text-align:center;
}
.gx-title{
  font-family:var(--mfx-font,sans-serif);
  font-weight:800;
  font-size:clamp(17px,2.4vw,22px);
  letter-spacing:.01em;
  background:linear-gradient(90deg,#fbe7a8,var(--mfx-gold,#e6b93b),#fbe7a8);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--mfx-gold-strong,#b6870e);
}
.gx-sub-desc{
  margin-top:4px;
  font-size:clamp(11.5px,1.6vw,13px);
  color:#a9c2bd;
  line-height:1.5;
  max-width:60ch;margin-left:auto;margin-right:auto;
}
.gx-stage{ position:relative; padding:var(--mfx-sp-2,8px) var(--mfx-sp-3,12px) 0; }
.gx-svg{ display:block; width:100%; height:auto; max-height:min(56vh,460px); }

/* [홈 과밀 완화 2026-07-25] 기본 컴팩트(접힘) — 토글로 펼침 */
.gx-compact-summary{ display:none; margin-top:8px; font-size:12.5px; font-weight:700; color:#dfd3a0; }
.gx-toggle{
  display:inline-flex; align-items:center; gap:4px; margin:12px auto 0;
  padding:7px 14px; border-radius:999px; border:1px solid rgba(212,160,23,.35);
  background:rgba(255,255,255,.04); color:#f3e6b8;
  font-family:var(--mfx-font,sans-serif); font-size:12.5px; font-weight:700;
  cursor:pointer;
}
.gx-toggle:hover{ background:rgba(255,255,255,.09); }
.gx-toggle:focus-visible{ outline:2px solid var(--mfx-gold,#e6b93b); outline-offset:2px; }
.gx-hero.gx-compact .gx-collapsible{ display:none; }
.gx-hero.gx-compact .gx-compact-summary{ display:block; }
.gx-hero.gx-compact .gx-head{ padding-bottom:14px; }
.gx-hero.gx-expanded .gx-compact-summary{ display:none; }

/* 배경 · 궤도 링 · 별가루 */
.gx-ring{ fill:none; stroke:var(--gx-line); stroke-width:1; }
.gx-dust{ fill:#eaf6ff; animation:gx-tw 3.4s ease-in-out infinite; }

/* 연결선(위계) */
.gx-link{ stroke-width:1.1; opacity:.42; }
.gx-slink{ stroke-width:.7; opacity:.22; }
.gx-link.gx-link-g0{ stroke:var(--gx-g0); } .gx-slink.gx-link-g0{ stroke:var(--gx-g0); }
.gx-link.gx-link-g1{ stroke:var(--gx-g1); } .gx-slink.gx-link-g1{ stroke:var(--gx-g1); }
.gx-link.gx-link-g2{ stroke:var(--gx-g2); } .gx-slink.gx-link-g2{ stroke:var(--gx-g2); }
.gx-link.gx-link-g3{ stroke:var(--gx-g3); } .gx-slink.gx-link-g3{ stroke:var(--gx-g3); }
.gx-link-hl{ opacity:.85; stroke-width:1.6; }

/* 별(대단원) */
.gx-star{ cursor:pointer; animation:gx-tw 3.2s ease-in-out infinite; transition:r .15s var(--mfx-ease,ease); outline:none; }
.gx-star-g0{ fill:var(--gx-g0); } .gx-star-g1{ fill:var(--gx-g1); }
.gx-star-g2{ fill:var(--gx-g2); } .gx-star-g3{ fill:var(--gx-g3); }
.gx-star:hover,.gx-star:focus-visible{ r:5.4; }
.gx-star:focus-visible{ stroke:#fff; stroke-width:1.2; }

/* 성단(과목) 노드 */
.gx-sub{ cursor:pointer; outline:none; }
.gx-sub-dot{ transition:transform .18s var(--mfx-ease,ease),filter .18s; transform-box:fill-box; transform-origin:center; }
.gx-sub-halo{ fill:transparent; stroke-width:1; opacity:.5; }
.gx-sub-g0 .gx-sub-dot{ fill:var(--gx-g0); } .gx-sub-g0 .gx-sub-halo{ stroke:var(--gx-g0); }
.gx-sub-g1 .gx-sub-dot{ fill:var(--gx-g1); } .gx-sub-g1 .gx-sub-halo{ stroke:var(--gx-g1); }
.gx-sub-g2 .gx-sub-dot{ fill:var(--gx-g2); } .gx-sub-g2 .gx-sub-halo{ stroke:var(--gx-g2); }
.gx-sub-g3 .gx-sub-dot{ fill:var(--gx-g3); } .gx-sub-g3 .gx-sub-halo{ stroke:var(--gx-g3); }
.gx-sub-lbl{ font-family:var(--mfx-font,sans-serif); font-size:12.5px; font-weight:700; fill:#e7f2ee; pointer-events:none; paint-order:stroke; stroke:rgba(6,14,20,.75); stroke-width:2.4px; }
.gx-sub:hover .gx-sub-dot,.gx-sub:focus-visible .gx-sub-dot{ transform:scale(1.16); filter:brightness(1.12); }
.gx-sub:hover .gx-sub-lbl,.gx-sub:focus-visible .gx-sub-lbl{ fill:#fff; }
.gx-sub:focus-visible .gx-sub-halo{ opacity:1; stroke-width:2; }
/* 개인화 강조 성단 */
.gx-sub-hl .gx-sub-halo{ opacity:1; stroke-width:2.4; animation:gx-pulse 2.4s ease-in-out infinite; }
.gx-sub-hl .gx-sub-dot{ filter:drop-shadow(0 0 5px currentColor); }

/* 핵(수학) */
.gx-core-glow{ fill:var(--mfx-gold,#e6b93b); opacity:.22; animation:gx-corepulse 3.6s ease-in-out infinite; }
.gx-core{ stroke:#fce7b0; stroke-width:1; }
.gx-core-t{ font-family:var(--mfx-font,sans-serif); font-size:26px; font-weight:900; fill:#3a2c00; letter-spacing:.02em; }
.gx-core-s{ font-family:var(--mfx-font,sans-serif); font-size:11px; font-weight:700; fill:#5a4406; }

/* 툴팁 */
.gx-tip{
  position:absolute; z-index:3; pointer-events:none;
  padding:5px 9px; border-radius:var(--mfx-r-sm,8px);
  background:rgba(9,18,28,.94); color:#f3f7f5;
  font-size:12px; font-weight:600; white-space:nowrap;
  border:1px solid rgba(212,160,23,.4);
  box-shadow:var(--mfx-sh-2,0 4px 12px rgba(0,0,0,.4));
}
.gx-tip[hidden]{ display:none; }

/* 레전드 */
.gx-legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 16px;
  padding:var(--mfx-sp-3,12px) var(--mfx-sp-4,16px) var(--mfx-sp-4,16px);
}
.gx-leg{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#bcd2cc; }
.gx-leg-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.gx-leg-g0 .gx-leg-dot{ background:var(--gx-g0); }
.gx-leg-g1 .gx-leg-dot{ background:var(--gx-g1); }
.gx-leg-g2 .gx-leg-dot{ background:var(--gx-g2); }
.gx-leg-g3 .gx-leg-dot{ background:var(--gx-g3); }

/* 애니메이션 */
@keyframes gx-tw{ 0%,100%{ opacity:.85; } 50%{ opacity:.35; } }
@keyframes gx-pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes gx-corepulse{ 0%,100%{ opacity:.18; transform:scale(1); transform-box:fill-box; transform-origin:center; } 50%{ opacity:.34; transform:scale(1.06); transform-box:fill-box; transform-origin:center; } }

/* 모바일 */
@media (max-width:600px){
  .gx-head{ padding:12px 14px 0; }
  .gx-svg{ max-height:66vh; }
  .gx-sub-lbl{ font-size:13.5px; }
  .gx-legend{ gap:8px 12px; }
}

/* 모션 최소화 — 반짝임/회전/펄스 정지 */
@media (prefers-reduced-motion:reduce){
  .gx-dust,.gx-star,.gx-core-glow,.gx-sub-hl .gx-sub-halo{ animation:none !important; }
  .gx-sub-dot,.gx-star{ transition:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   전자책 북리더기 (reader.js · window.MFReader) — .rd-*
   토큰(--mfx-*) 사용, 태그 셀렉터 금지. 인쇄용 @media print 포함.
   ══════════════════════════════════════════════════════════════════════ */
.rd-root{ color:var(--mfx-ink); }
.rd-loading,.rd-empty{ padding:var(--mfx-sp-7) var(--mfx-sp-4); text-align:center;
  color:var(--mfx-gray-500); font-size:15px; }
.rd-empty .rd-btn{ margin-left:var(--mfx-sp-2); }

/* ── 책장 헤더 / 배너 ── */
.rd-shelf-head{ margin-bottom:var(--mfx-sp-5); }
.rd-shelf-title{ margin:0 0 var(--mfx-sp-1); font-size:26px; font-weight:800;
  letter-spacing:-.02em; color:var(--mfx-ink); }
.rd-shelf-desc{ margin:0; color:var(--mfx-gray-500); font-size:14.5px; }
.rd-banner{ display:flex; gap:var(--mfx-sp-3); align-items:flex-start;
  background:var(--mfx-accent-weak); border:1px solid var(--mfx-accent);
  border-radius:var(--mfx-r-md); padding:var(--mfx-sp-4);
  margin-bottom:var(--mfx-sp-5); font-size:13.5px; line-height:1.6; color:var(--mfx-ink); }
.rd-banner-ico{ font-size:20px; line-height:1; }
.rd-banner b{ color:var(--mfx-accent-strong); }
.rd-soon{ color:var(--mfx-gray-500); font-size:12.5px; }

/* ── 책 카드 그리드 ── */
.rd-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:var(--mfx-sp-5); }
.rd-book{ display:flex; flex-direction:column; text-align:left; padding:0;
  background:var(--mfx-surface); border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-lg); overflow:hidden; cursor:pointer;
  box-shadow:var(--mfx-sh-1); transition:transform var(--mfx-dur) var(--mfx-ease),
  box-shadow var(--mfx-dur) var(--mfx-ease), border-color var(--mfx-dur); font-family:var(--mfx-font); }
.rd-book:hover{ transform:translateY(-3px); box-shadow:var(--mfx-sh-3);
  border-color:var(--mfx-accent); }
.rd-book:focus-visible{ outline:2px solid var(--mfx-accent); outline-offset:2px; }
.rd-cover{ aspect-ratio:3/4; width:100%; background:var(--mfx-gray-100);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.rd-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.rd-cover-gen{ position:relative; padding:var(--mfx-sp-4); }
.rd-cover-t{ color:#fff; font-weight:800; font-size:17px; line-height:1.3;
  text-align:center; letter-spacing:-.01em; text-shadow:0 2px 8px rgba(0,0,0,.28); }
.rd-book-meta{ padding:var(--mfx-sp-3) var(--mfx-sp-3) var(--mfx-sp-4); display:flex;
  flex-direction:column; gap:var(--mfx-sp-1); flex:1; }
.rd-book-title{ font-weight:750; font-size:15px; color:var(--mfx-ink); line-height:1.35; }
.rd-book-sub{ font-size:12px; color:var(--mfx-gray-500); line-height:1.4; }
.rd-book-foot{ margin-top:auto; padding-top:var(--mfx-sp-2); display:flex;
  flex-wrap:wrap; gap:var(--mfx-sp-1); }
.rd-chip{ font-size:11px; padding:2px 8px; border-radius:var(--mfx-r-full);
  background:var(--mfx-gray-100); color:var(--mfx-gray-600); font-weight:650; }
.rd-chip-open{ background:var(--mfx-accent-weak); color:var(--mfx-accent-strong); }
.rd-chip-lock{ background:var(--mfx-gold-weak); color:var(--mfx-gold-strong); }

/* ── 뷰어 ── */
.rd-viewer{ display:flex; flex-direction:column; }
.rd-topbar{ display:flex; align-items:center; gap:var(--mfx-sp-3);
  padding-bottom:var(--mfx-sp-3); border-bottom:1px solid var(--mfx-gray-200);
  flex-wrap:wrap; }
.rd-topbar-title{ font-weight:750; font-size:15px; color:var(--mfx-ink);
  flex:1; min-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rd-topbar-tools{ display:flex; align-items:center; gap:var(--mfx-sp-1); flex-wrap:wrap; }
.rd-fs-val{ font-size:12px; color:var(--mfx-gray-500); min-width:38px; text-align:center;
  font-family:var(--mfx-font-num); }
.rd-progress{ height:4px; background:var(--mfx-gray-200); border-radius:var(--mfx-r-full);
  margin:var(--mfx-sp-3) 0; overflow:hidden; }
.rd-progress-bar{ height:100%; background:linear-gradient(90deg,var(--mfx-accent),var(--mfx-gold));
  border-radius:var(--mfx-r-full); transition:width var(--mfx-dur) var(--mfx-ease); }

.rd-cols{ display:grid; grid-template-columns:230px 1fr; gap:var(--mfx-sp-5);
  align-items:start; }
.rd-toc{ position:sticky; top:var(--mfx-sp-4); max-height:calc(100vh - 120px);
  overflow:auto; background:var(--mfx-surface-2); border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md); padding:var(--mfx-sp-3); }
.rd-toc-h{ font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mfx-gray-500); padding:var(--mfx-sp-1) var(--mfx-sp-2) var(--mfx-sp-2); }
.rd-toc-item{ display:flex; align-items:center; gap:var(--mfx-sp-2); width:100%;
  text-align:left; padding:var(--mfx-sp-2); border:0; background:transparent;
  border-radius:var(--mfx-r-sm); cursor:pointer; color:var(--mfx-gray-700);
  font-size:13px; line-height:1.35; font-family:var(--mfx-font);
  transition:background var(--mfx-dur); }
.rd-toc-item:hover{ background:var(--mfx-gray-100); }
.rd-toc-item.on{ background:var(--mfx-accent-weak); color:var(--mfx-accent-strong); font-weight:700; }
.rd-toc-item.rd-toc-lock{ color:var(--mfx-gray-400); }
.rd-toc-n{ flex:0 0 22px; height:22px; display:inline-flex; align-items:center;
  justify-content:center; background:var(--mfx-gray-200); color:var(--mfx-gray-600);
  border-radius:var(--mfx-r-full); font-size:11px; font-weight:700; font-family:var(--mfx-font-num); }
.rd-toc-item.on .rd-toc-n{ background:var(--mfx-accent); color:#fff; }
.rd-toc-t{ flex:1; }
.rd-toc-i{ font-size:11px; opacity:.7; }

/* ── 리딩 페인 ── */
.rd-read{ min-width:0; background:var(--mfx-surface); border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-lg); padding:var(--mfx-sp-6) var(--mfx-sp-7);
  box-shadow:var(--mfx-sh-1); }
.rd-ch-title{ font-size:1.7em; font-weight:800; letter-spacing:-.02em; line-height:1.3;
  margin:0 0 .8em; color:var(--mfx-ink); padding-bottom:.5em;
  border-bottom:2px solid var(--mfx-accent-weak); }
.rd-ch-body{ font-size:1.06em; line-height:1.95; color:var(--mfx-gray-800); }
.rd-ch-body p{ margin:0 0 1.1em; }
.rd-ch-body strong{ color:var(--mfx-ink); font-weight:750; }
.rd-ch-body code{ font-family:var(--mfx-font-num); font-size:.92em;
  background:var(--mfx-gray-100); padding:.1em .4em; border-radius:6px; }
.rd-ch-body .rd-h{ font-weight:750; line-height:1.4; color:var(--mfx-ink);
  margin:1.6em 0 .6em; }
.rd-ch-body h3.rd-h{ font-size:1.24em; padding-left:.5em; border-left:4px solid var(--mfx-accent); }
.rd-ch-body h4.rd-h{ font-size:1.1em; color:var(--mfx-accent-strong); }
.rd-ch-body h5.rd-h,.rd-ch-body h6.rd-h{ font-size:1em; color:var(--mfx-gray-600); }
.rd-ch-body .rd-ul,.rd-ch-body .rd-ol{ margin:0 0 1.1em; padding-left:1.5em; }
.rd-ch-body .rd-ul li,.rd-ch-body .rd-ol li{ margin:.35em 0; }
.rd-hr{ border:0; border-top:1px solid var(--mfx-gray-200); margin:1.8em 0; }
.rd-quote{ margin:1.2em 0; padding:.7em 1.1em; border-left:4px solid var(--mfx-gold);
  background:var(--mfx-gold-weak); border-radius:0 var(--mfx-r-sm) var(--mfx-r-sm) 0;
  color:var(--mfx-gray-700); font-size:.98em; }
.rd-tablewrap{ overflow-x:auto; margin:1.2em 0; -webkit-overflow-scrolling:touch; }
.rd-table{ border-collapse:collapse; width:100%; font-size:.92em; }
.rd-table th,.rd-table td{ border:1px solid var(--mfx-gray-200);
  padding:.5em .7em; text-align:left; vertical-align:top; }
.rd-table th{ background:var(--mfx-accent-weak); color:var(--mfx-accent-strong);
  font-weight:700; }
.rd-table tbody tr:nth-child(even){ background:var(--mfx-gray-50); }

/* content.json 유래(오답 클리닉/대화) 블록 */
.rd-unit{ display:inline-block; font-size:.85em; font-weight:700;
  color:var(--mfx-accent-strong); background:var(--mfx-accent-weak);
  padding:.2em .7em; border-radius:var(--mfx-r-full); margin-bottom:1em; }
.rd-rec{ margin:1.6em 0; padding:1.2em 1.3em; background:var(--mfx-surface-2);
  border:1px solid var(--mfx-gray-200); border-radius:var(--mfx-r-md); }
.rd-recmeta{ font-size:.82em; color:var(--mfx-gray-500); margin:-.3em 0 .8em;
  font-weight:650; }
.rd-dlg{ margin:.6em 0 1em; padding-left:.9em; border-left:3px solid var(--mfx-accent-weak); }
.rd-dlg p{ margin:.3em 0; color:var(--mfx-gray-700); }
.rd-block{ margin:.9em 0; }
.rd-label{ display:inline-block; font-size:.78em; font-weight:750; letter-spacing:.03em;
  color:var(--mfx-gray-500); text-transform:uppercase; margin-bottom:.2em; }
.rd-block.rd-q .rd-label{ color:var(--mfx-accent-strong); }
.rd-block.rd-sol .rd-label,.rd-block.rd-tip .rd-label{ color:var(--mfx-gold-strong); }
.rd-block.rd-wrong .rd-label{ color:var(--mfx-warn); }
.rd-recsum,.rd-chsum{ margin-top:1em; padding-top:.8em;
  border-top:1px dashed var(--mfx-gray-300); font-size:.95em; color:var(--mfx-gray-600); }
.rd-chsum .rd-label{ display:block; }

/* 잠금 CTA */
.rd-lock{ text-align:center; padding:var(--mfx-sp-8) var(--mfx-sp-4); }
.rd-lock-ico{ font-size:44px; margin-bottom:var(--mfx-sp-3); }
.rd-lock h3{ font-size:20px; font-weight:750; margin:0 0 var(--mfx-sp-3); color:var(--mfx-ink); }
.rd-lock p{ max-width:460px; margin:0 auto var(--mfx-sp-5); color:var(--mfx-gray-500);
  line-height:1.7; font-size:14.5px; }
.rd-lock-cta{ display:flex; gap:var(--mfx-sp-2); justify-content:center; flex-wrap:wrap; }

/* 이전/다음 */
.rd-navrow{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--mfx-sp-3); margin-top:var(--mfx-sp-6); padding-top:var(--mfx-sp-4);
  border-top:1px solid var(--mfx-gray-200); }
.rd-navpos{ font-size:13px; color:var(--mfx-gray-500); font-family:var(--mfx-font-num); }

/* 버튼 */
.rd-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px;
  border:1px solid var(--mfx-gray-300); background:var(--mfx-surface);
  color:var(--mfx-ink); border-radius:var(--mfx-r-md); font-size:13.5px; font-weight:650;
  cursor:pointer; font-family:var(--mfx-font); transition:background var(--mfx-dur),
  border-color var(--mfx-dur), transform var(--mfx-dur); }
.rd-btn:hover{ background:var(--mfx-gray-100); border-color:var(--mfx-gray-400); }
.rd-btn:active{ transform:translateY(1px); }
.rd-btn[disabled]{ opacity:.4; cursor:default; }
.rd-btn-ghost{ border-color:transparent; background:transparent; color:var(--mfx-gray-600); }
.rd-btn-ghost:hover{ background:var(--mfx-gray-100); }
.rd-btn-gold{ background:var(--mfx-gold); border-color:var(--mfx-gold-strong); color:#fff; }
.rd-btn-gold:hover{ background:var(--mfx-gold-strong); }
.rd-btn-print{ background:var(--mfx-accent); border-color:var(--mfx-accent-strong); color:#fff; }
.rd-btn-print:hover{ background:var(--mfx-accent-strong); }
.rd-icobtn{ display:inline-flex; align-items:center; justify-content:center; min-width:34px;
  height:34px; padding:0 8px; border:1px solid var(--mfx-gray-300); background:var(--mfx-surface);
  color:var(--mfx-gray-700); border-radius:var(--mfx-r-sm); cursor:pointer; font-size:14px;
  font-weight:700; font-family:var(--mfx-font); }
.rd-icobtn:hover{ background:var(--mfx-gray-100); }

/* ── 다크 모드(리더 자체 토글 — 사이트 테마와 독립) ── */
.rd-root.rd-dark .rd-read{ background:#0f1720; border-color:#243040; color:#dbe4ee; }
.rd-root.rd-dark .rd-ch-title{ color:#f1f5f9; border-bottom-color:#243040; }
.rd-root.rd-dark .rd-ch-body{ color:#c9d4e0; }
.rd-root.rd-dark .rd-ch-body strong{ color:#f1f5f9; }
.rd-root.rd-dark .rd-ch-body code{ background:#1c2733; color:#8fe3c8; }
.rd-root.rd-dark .rd-ch-body .rd-h,.rd-root.rd-dark .rd-lock h3{ color:#eef4fb; }
.rd-root.rd-dark .rd-rec{ background:#131c26; border-color:#243040; }
.rd-root.rd-dark .rd-table th{ background:#12332a; color:#7fe0c2; }
.rd-root.rd-dark .rd-table td,.rd-root.rd-dark .rd-table th{ border-color:#243040; }
.rd-root.rd-dark .rd-table tbody tr:nth-child(even){ background:#111a23; }
.rd-root.rd-dark .rd-toc{ background:#0d141c; border-color:#243040; }
.rd-root.rd-dark .rd-toc-item{ color:#aab6c4; }
.rd-root.rd-dark .rd-toc-item:hover{ background:#18222e; }
.rd-root.rd-dark .rd-quote{ background:#241f10; color:#d8cfb4; }

/* ── 반응형 ── */
@media (max-width:820px){
  .rd-cols{ grid-template-columns:1fr; }
  .rd-toc{ position:static; max-height:none; display:flex; flex-wrap:wrap;
    gap:var(--mfx-sp-1); }
  .rd-toc-h{ flex-basis:100%; }
  .rd-toc-item{ width:auto; flex:1 1 45%; }
  .rd-read{ padding:var(--mfx-sp-5) var(--mfx-sp-4); }
}
@media (max-width:600px){
  .rd-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:var(--mfx-sp-4); }
  .rd-topbar-title{ order:3; flex-basis:100%; }
  .rd-shelf-title{ font-size:22px; }
  .rd-toc-item{ flex-basis:100%; }
}

/* ══ 인쇄 — .rd-print-area(현재 책 본문)만 남기고 전부 숨김 ══ */
.rd-print-area{ position:absolute; left:-99999px; top:0; }
@media print{
  body *{ visibility:hidden !important; }
  .rd-print-area,.rd-print-area *{ visibility:visible !important; }
  .rd-print-area{ position:absolute !important; left:0 !important; top:0 !important;
    width:100% !important; color:#000; background:#fff; font-family:var(--mfx-font); }
  .rd-print-head{ margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid #000; }
  .rd-print-title{ font-size:24pt; font-weight:800; margin:0 0 4px; }
  .rd-print-sub{ font-size:12pt; color:#333; margin:0 0 2px; }
  .rd-print-by{ font-size:10pt; color:#555; margin:0; }
  .rd-print-ch{ page-break-before:always; break-before:page; padding-top:8px; }
  .rd-print-ch:first-of-type{ page-break-before:avoid; break-before:auto; }
  .rd-print-ch h1{ font-size:17pt; font-weight:800; margin:0 0 10px;
    padding-bottom:6px; border-bottom:1px solid #999; }
  .rd-print-ch p{ font-size:11pt; line-height:1.7; margin:0 0 8px; }
  .rd-print-ch .rd-h{ font-weight:750; margin:14px 0 6px; }
  .rd-print-ch h3.rd-h{ font-size:13pt; border-left:3px solid #000; padding-left:8px; }
  .rd-print-ch .rd-table{ border-collapse:collapse; width:100%; font-size:9.5pt; }
  .rd-print-ch .rd-table th,.rd-print-ch .rd-table td{ border:1px solid #999; padding:4px 6px; }
  .rd-print-ch .rd-rec{ border:1px solid #ccc; padding:10px; margin:12px 0;
    page-break-inside:avoid; break-inside:avoid; }
  .rd-print-ch .rd-quote{ border-left:3px solid #999; padding-left:10px; color:#333; }
  .rd-print-ch img{ max-width:100%; }
}

/* ── [mfx] 진단 심화(안되는 이유→방향) + 클리닉 단원 정밀필터 배지 ── */
.mfx-target{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding:10px 14px;border-radius:12px;
  background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid #e4e8ff}
.mfx-target-txt{font-size:13.5px;color:var(--ink)}
.mfx-target-txt b{color:var(--brand)}
.mfx-target-x{background:#fff;border:1.5px solid var(--line);border-radius:99px;
  padding:5px 12px;font-size:12.5px;font-weight:700;color:var(--sub);cursor:pointer}
.mfx-target-x:hover{border-color:var(--brand);color:var(--brand)}

.mfx-why{margin:14px 0 4px;padding:16px;border-radius:14px;
  background:linear-gradient(135deg,#fbfaff,#f4f6ff);border:1px solid var(--line)}
.mfx-why-row{margin-top:12px;padding:13px 15px;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:0 12px 12px 0}
.mfx-why-head{display:flex;align-items:center;gap:8px;font-size:15px}
.mfx-why-head b{font-size:15.5px}
.mfx-why-lead{background:var(--brand);color:#fff;font-size:11px;font-weight:800;
  border-radius:99px;padding:2px 9px;letter-spacing:.02em}
.mfx-why-sub{background:var(--soft);color:var(--brand);font-size:11px;font-weight:800;
  border-radius:99px;padding:2px 9px}
.mfx-why-why{margin:8px 0 0;font-size:14px;line-height:1.6}
.mfx-why-why b{color:var(--bad)}
.mfx-why-dir{margin:4px 0 0;font-size:14px;line-height:1.6}
.mfx-why-dir b{color:var(--ok)}
.mfx-why-act{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

/* ── [실전세트 자동 정오판정 2026-07-24] 정답 필드 보유 문항 자동채점 표시 ── */
.exam-auto-tag{background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:1px}
.exam-self-tag{background:var(--soft);color:var(--sub);font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:1px}
.exam-auto-fb{margin-top:8px;padding:9px 12px;border-radius:10px;font-size:13.5px;line-height:1.5}
.exam-auto-fb.ok{background:rgba(34,197,94,.12);color:var(--ok)}
.exam-auto-fb.bad{background:rgba(239,68,68,.12);color:var(--bad)}
/* [복잡답 정답확인 폴백 2026-07-25] ok/bad 미부여 상태 = 아직 자기확정 전 "내 답/정답" 비교 박스 */
.exam-auto-fb:not(.ok):not(.bad){background:var(--soft);color:var(--sub)}
.exam-review-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.exam-review-row:last-child{border-bottom:none}

/* ============================================================
   [biz.js] B2B 기관 도입 + 학부모·교사 안내 — .bz-* 전용
   진입점 배너는 .bz-*, 모달 셸은 기존 .mfx-panel-* 재사용.
   ============================================================ */
.bz-entry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--mfx-sp-3);
  margin:var(--mfx-sp-5) 0;
}
@media (max-width:600px){
  .bz-entry{ grid-template-columns:1fr; }
}
.bz-entry-btn{
  display:flex;
  align-items:center;
  gap:var(--mfx-sp-3);
  width:100%;
  padding:var(--mfx-sp-4);
  background:var(--mfx-surface);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-lg);
  cursor:pointer;
  font-family:var(--mfx-font);
  color:var(--mfx-ink);
  text-align:left;
  transition:box-shadow var(--mfx-dur) var(--mfx-ease),transform var(--mfx-dur) var(--mfx-ease),border-color var(--mfx-dur) var(--mfx-ease);
}
.bz-entry-btn:hover{
  box-shadow:var(--mfx-sh-2);
  transform:translateY(-1px);
  border-color:var(--mfx-accent-weak);
}
.bz-entry-btn:focus-visible{
  outline:2px solid var(--mfx-accent);
  outline-offset:2px;
}
.bz-entry-ico{ font-size:22px; line-height:1; flex:0 0 auto; }
.bz-entry-txt{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}
.bz-entry-txt b{ font-size:14.5px; font-weight:800; }
.bz-entry-txt small{ font-size:12px; color:var(--mfx-gray-600); font-weight:600; }
.bz-entry-arrow{ font-size:18px; color:var(--mfx-gray-400); flex:0 0 auto; }

/* ---- 모달 본문 ---- */
.bz-panel{ max-width:560px; }
.bz-sec{ margin-bottom:var(--mfx-sp-5); }
.bz-sec:last-child{ margin-bottom:0; }
.bz-h3{
  font-size:15px;
  font-weight:800;
  margin:0 0 var(--mfx-sp-3);
  color:var(--mfx-ink);
  font-family:var(--mfx-font);
}
.bz-value-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--mfx-sp-3);
}
.bz-value-list li{
  display:flex;
  gap:var(--mfx-sp-3);
  align-items:flex-start;
}
.bz-value-ico{ font-size:18px; line-height:1.3; flex:0 0 auto; }
.bz-value-list b{ font-size:13.5px; font-weight:800; display:block; margin-bottom:2px; color:var(--mfx-ink); }
.bz-value-list p{ margin:0; font-size:13px; color:var(--mfx-gray-600); line-height:1.5; }

.bz-note{ font-size:12px; color:var(--mfx-gray-500); margin:0 0 var(--mfx-sp-3); line-height:1.5; }

.bz-price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--mfx-sp-3);
}
@media (max-width:520px){
  .bz-price-grid{ grid-template-columns:1fr; }
}
.bz-price-card{
  padding:var(--mfx-sp-3);
  border:1px solid var(--mfx-gray-200);
  border-radius:var(--mfx-r-md);
  background:var(--mfx-surface-2);
  text-align:center;
}
.bz-price-name{ font-size:12.5px; font-weight:800; color:var(--mfx-gray-700); }
.bz-price-amt{ font-size:14px; font-weight:800; color:var(--mfx-accent); margin:4px 0; }
.bz-price-desc{ font-size:11.5px; color:var(--mfx-gray-500); }

.bz-steps{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--mfx-sp-3);
}
.bz-steps li{
  padding:var(--mfx-sp-3);
  border-left:3px solid var(--mfx-accent);
  background:var(--mfx-surface-2);
  border-radius:0 var(--mfx-r-md) var(--mfx-r-md) 0;
}
.bz-steps b{ display:block; font-size:13.5px; margin-bottom:2px; color:var(--mfx-ink); }
.bz-steps p{ margin:0; font-size:12.5px; color:var(--mfx-gray-600); line-height:1.5; }

.bz-cta-sec{ display:flex; flex-direction:column; gap:var(--mfx-sp-2); }
.bz-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:12px 16px;
  border-radius:var(--mfx-r-md);
  font-family:var(--mfx-font);
  font-size:13.5px;
  font-weight:800;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform var(--mfx-dur) var(--mfx-ease),box-shadow var(--mfx-dur) var(--mfx-ease),background var(--mfx-dur) var(--mfx-ease);
}
.bz-btn-primary{ background:var(--mfx-accent); color:#fff; box-shadow:var(--mfx-sh-1); }
.bz-btn-primary:hover{ background:var(--mfx-accent-strong); transform:translateY(-1px); }
.bz-btn-ghost{ background:var(--mfx-surface); color:var(--mfx-ink); border-color:var(--mfx-gray-200); }
.bz-btn-ghost:hover{ background:var(--mfx-gray-100); }
.bz-contact{ font-size:12px; color:var(--mfx-gray-500); text-align:center; margin:var(--mfx-sp-1) 0 0; }
.bz-contact a{ color:var(--mfx-accent); font-weight:700; }

.bz-segwrap{
  display:flex;
  gap:6px;
  padding:4px;
  margin-bottom:var(--mfx-sp-4);
  background:var(--mfx-gray-100);
  border-radius:var(--mfx-r-full);
}
.bz-seg{
  flex:1 1 0;
  padding:8px 10px;
  border:none;
  border-radius:var(--mfx-r-full);
  background:transparent;
  font-family:var(--mfx-font);
  font-size:13px;
  font-weight:800;
  color:var(--mfx-gray-600);
  cursor:pointer;
  transition:background var(--mfx-dur) var(--mfx-ease),color var(--mfx-dur) var(--mfx-ease);
}
.bz-seg.on{ background:var(--mfx-surface); color:var(--mfx-ink); box-shadow:var(--mfx-sh-1); }

.bz-role-panel[hidden]{ display:none; }
.bz-soon{
  padding:var(--mfx-sp-4);
  background:var(--mfx-gold-weak);
  border:1px solid var(--mfx-gold);
  border-radius:var(--mfx-r-md);
}
.bz-soon p{ font-size:12.5px; line-height:1.6; color:var(--mfx-gray-700); margin:0 0 var(--mfx-sp-3); }

/* ============================================================
   COMMERCE — 전자상거래 법정 표기 · 고객센터 · 약관 (commerce.js 전용)
   .mfx-panel / .mfx-panel-bg 재사용, 아래 .cm-* 만 신규 정의.
   ============================================================ */
.cm-footer{
  margin-top:var(--mfx-sp-7);
  padding:var(--mfx-sp-5) var(--mfx-sp-4);
  border-top:1px solid var(--mfx-gray-200);
  background:var(--mfx-surface-2);
  font-family:var(--mfx-font);
}
.cm-footer-in{ max-width:960px; margin:0 auto; text-align:center; }
.cm-footer-links{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--mfx-sp-2) var(--mfx-sp-4); margin:0 0 var(--mfx-sp-3);
}
.cm-footer-link{
  background:none; border:none; padding:4px 2px;
  font-size:13px; font-weight:600; color:var(--mfx-gray-600);
  cursor:pointer; border-bottom:1px solid transparent;
  transition:color var(--mfx-dur) var(--mfx-ease), border-color var(--mfx-dur) var(--mfx-ease);
}
.cm-footer-link:hover,.cm-footer-link:focus-visible{ color:var(--mfx-accent); border-color:var(--mfx-accent); }
.cm-footer-copy{ font-size:12px; color:var(--mfx-gray-400); margin:0; }

.cm-panel{ max-width:600px; }
.cm-panel-body{ font-size:14px; line-height:1.7; color:var(--mfx-ink); }
.cm-sec + .cm-sec{ margin-top:var(--mfx-sp-5); padding-top:var(--mfx-sp-4); border-top:1px solid var(--mfx-gray-200); }
.cm-p{ margin:0 0 var(--mfx-sp-2); color:var(--mfx-gray-700); }
.cm-ul{ margin:0 0 var(--mfx-sp-2); padding-left:1.1em; color:var(--mfx-gray-700); }
.cm-ul li{ margin-bottom:6px; }
.cm-note{ font-size:12.5px; line-height:1.6; color:var(--mfx-gray-500); margin-top:var(--mfx-sp-3); }
.cm-note-warn{ color:var(--mfx-warn); }
.cm-note-inline{ font-size:11.5px; color:var(--mfx-warn); font-weight:700; }

.cm-table{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom:var(--mfx-sp-3); }
.cm-table th,.cm-table td{
  border:1px solid var(--mfx-gray-200); padding:8px 10px;
  text-align:left; vertical-align:top;
}
.cm-table th{ width:38%; background:var(--mfx-gray-50); color:var(--mfx-gray-600); font-weight:700; }

.cm-link{
  background:none; border:none; padding:0; margin:0;
  color:var(--mfx-accent); font-weight:700; font-size:13.5px;
  cursor:pointer; text-decoration:underline;
}
.cm-link:hover{ color:var(--mfx-accent-strong); }

.cm-cs-form{ margin-top:var(--mfx-sp-3); display:flex; flex-direction:column; gap:var(--mfx-sp-2); }
.cm-cs-form input,.cm-cs-form textarea{
  width:100%; box-sizing:border-box;
  border:1px solid var(--mfx-gray-300); border-radius:var(--mfx-r-sm);
  padding:9px 11px; font-size:13.5px; font-family:var(--mfx-font);
  color:var(--mfx-ink); background:var(--mfx-surface);
}
.cm-cs-form textarea{ min-height:88px; resize:vertical; }
.cm-cs-form button{
  align-self:flex-end; background:var(--mfx-accent); color:#fff; border:none;
  border-radius:var(--mfx-r-md); padding:9px 18px;
  font-size:13.5px; font-weight:700; cursor:pointer;
  transition:background var(--mfx-dur) var(--mfx-ease);
}
.cm-cs-form button:hover{ background:var(--mfx-accent-strong); }

@media (max-width:600px){
  .cm-footer{ padding:var(--mfx-sp-4) var(--mfx-sp-3); }
  .cm-footer-links{ gap:var(--mfx-sp-2) var(--mfx-sp-3); }
  .cm-table th{ width:44%; }
}