/* ============================================================
   수학 파이널 LAB — 공통 상태 컴포넌트 (ui-states.css) · v4
   .ui-skel / .ui-empty / .ui-error / .ui-toast / .ui-lock / .ui-quota
   theme.css의 --mfx-* 토큰만 참조. 신규 클래스만 정의(기존 클래스 재정의 금지).
   theme.css, colors.css 뒤에 로드.
   ============================================================ */

/* ============================================================
   SKELETON — 로딩 자리표시자(카드/줄/원형)
   ============================================================ */
.ui-skel{
  position:relative;
  overflow:hidden;
  display:block;
  border-radius:var(--mfx-r-sm,8px);
  background:var(--mfx-gray-200,#e2e8f0);
  min-height:14px;
}
.ui-skel.ui-skel-text{ height:14px; margin:6px 0; }
.ui-skel.ui-skel-title{ height:22px; width:60%; margin:0 0 10px; }
.ui-skel.ui-skel-line{ height:12px; width:100%; margin:6px 0; }
.ui-skel.ui-skel-line:last-child{ width:78%; }
.ui-skel.ui-skel-avatar{ width:40px; height:40px; border-radius:var(--mfx-r-full,999px); }
.ui-skel.ui-skel-card{ height:120px; border-radius:var(--mfx-r-lg,16px); }
.ui-skel.ui-skel-chip{ height:24px; width:72px; border-radius:var(--mfx-r-full,999px); display:inline-block; }
.ui-skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:ui-shimmer 1.4s infinite;
}
@media (prefers-color-scheme: dark){
  .ui-skel::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); }
}
@keyframes ui-shimmer{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .ui-skel::after{ animation:none !important; display:none; }
}

/* 스켈레톤 그룹 래퍼(간격 정리용) */
.ui-skel-group{ display:flex; flex-direction:column; gap:8px; }
.ui-skel-row{ display:flex; align-items:center; gap:12px; }

/* ============================================================
   EMPTY — 빈 상태(아이콘 + 한 줄 설명 + 다음 행동 버튼)
   ============================================================ */
.ui-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--mfx-sp-3,12px);
  padding:var(--mfx-sp-7,48px) var(--mfx-sp-4,16px);
  color:var(--mfx-ink,#0f172a);
  font-family:var(--mfx-font);
}
.ui-empty-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  border-radius:var(--mfx-r-full,999px);
  background:var(--mfx-gray-100,#f1f5f9);
  color:var(--mfx-gray-400,#94a3b8);
}
.ui-empty-ico svg{ width:24px; height:24px; }
.ui-empty-msg{ font-size:14.5px; font-weight:700; color:var(--mfx-gray-700,#334155); max-width:32ch; line-height:1.55; }
.ui-empty-sub{ font-size:12.5px; color:var(--mfx-gray-500,#64748b); max-width:36ch; line-height:1.55; margin-top:-4px; }
.ui-empty-cta{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:2px;
  padding:10px 18px;
  border:none;
  border-radius:var(--mfx-r-md,12px);
  background:var(--mfx-accent,#0e7a5f);
  color:#fff;
  font-family:var(--mfx-font);
  font-weight:800;
  font-size:13.5px;
  cursor:pointer;
  min-height:44px;
  transition:transform var(--mfx-dur,.22s) var(--mfx-ease),background var(--mfx-dur,.22s) var(--mfx-ease);
}
.ui-empty-cta:hover{ transform:translateY(-1px); background:var(--mfx-accent-strong,#0a5f49); }
.ui-empty-cta:focus-visible{ outline:2px solid var(--mfx-gold-strong,#b6870e); outline-offset:2px; }

/* ============================================================
   ERROR — 오류(복구 경로 버튼 필수)
   ============================================================ */
.ui-error{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--mfx-sp-3,12px);
  padding:var(--mfx-sp-6,32px) var(--mfx-sp-4,16px);
  border:1px solid var(--mfx-gray-200,#e2e8f0);
  border-radius:var(--mfx-r-lg,16px);
  background:var(--mfx-surface,#fff);
  color:var(--mfx-ink,#0f172a);
  font-family:var(--mfx-font);
}
.ui-error-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius:var(--mfx-r-full,999px);
  background:#fef2f2; color:#b91c1c;
}
.ui-error-ico svg{ width:22px; height:22px; }
.ui-error-title{ font-size:15px; font-weight:800; color:var(--mfx-ink,#0f172a); }
.ui-error-desc{ font-size:12.5px; color:var(--mfx-gray-500,#64748b); max-width:38ch; line-height:1.55; }
.ui-error-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:2px; }
.ui-error-retry{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border:none; border-radius:var(--mfx-r-md,12px);
  background:var(--mfx-accent,#0e7a5f); color:#fff;
  font-family:var(--mfx-font); font-weight:800; font-size:13.5px; cursor:pointer; min-height:44px;
  transition:transform var(--mfx-dur,.22s) var(--mfx-ease),background var(--mfx-dur,.22s) var(--mfx-ease);
}
.ui-error-retry:hover{ transform:translateY(-1px); background:var(--mfx-accent-strong,#0a5f49); }
.ui-error-retry:focus-visible{ outline:2px solid var(--mfx-gold-strong,#b6870e); outline-offset:2px; }
.ui-error-ghost{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border:1px solid var(--mfx-gray-300,#cbd5e1); border-radius:var(--mfx-r-md,12px);
  background:var(--mfx-surface,#fff); color:var(--mfx-gray-700,#334155);
  font-family:var(--mfx-font); font-weight:700; font-size:13.5px; cursor:pointer; min-height:44px;
}
.ui-error-ghost:hover{ background:var(--mfx-gray-50,#f8fafc); }

/* ============================================================
   TOAST — 하단 고정 토스트(골드 액센트)
   ============================================================ */
.ui-toast-wrap{
  position:fixed;
  left:50%;
  bottom:var(--mfx-sp-5,24px);
  transform:translateX(-50%);
  z-index:2147483200;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:min(94vw,420px);
  pointer-events:none;
}
.ui-toast{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:var(--mfx-r-md,12px);
  background:var(--mfx-ink,#0f172a);
  color:#fff;
  border-left:3px solid var(--mfx-gold,#d4a017);
  box-shadow:var(--mfx-sh-3,0 12px 32px rgba(15,23,42,.16));
  font-family:var(--mfx-font);
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  animation:ui-toast-up .28s var(--mfx-ease,ease);
  transition:opacity .3s ease,transform .3s var(--mfx-ease,ease);
}
.ui-toast-ico{ flex:0 0 auto; color:var(--mfx-gold,#d4a017); display:inline-flex; }
.ui-toast-ico svg{ width:16px; height:16px; }
.ui-toast-msg{ flex:1 1 auto; min-width:0; }
.ui-toast.ui-leaving{ opacity:0; transform:translateY(8px); }
@keyframes ui-toast-up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .ui-toast{ animation:none !important; transition:none !important; }
}

/* ============================================================
   LOCK — 게이팅 카드(블러 + 상단 2~3줄 노출 + CTA)
   사용: 잠글 요소를 .ui-lock으로 감싸고, 내부 콘텐츠는 .ui-lock-content,
   그 위에 .ui-lock-veil(블러) + .ui-lock-cta(카드형 CTA)를 겹친다.
   ============================================================ */
.ui-lock{ position:relative; overflow:hidden; border-radius:var(--mfx-r-lg,16px); }
.ui-lock-content{
  max-height:6.6em; /* 상단 2~3줄 정도만 노출 */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 45%,transparent 92%);
}
.ui-lock-content > *:first-child{ margin-top:0; }
.ui-lock-veil{
  position:absolute; inset:0;
  -webkit-backdrop-filter:blur(2.5px);
  backdrop-filter:blur(2.5px);
  background:linear-gradient(180deg,rgba(248,250,252,0) 0%,rgba(248,250,252,.86) 58%,rgba(248,250,252,.98) 100%);
  pointer-events:none;
}
@media (prefers-color-scheme: dark){
  .ui-lock-veil{ background:linear-gradient(180deg,rgba(17,24,39,0) 0%,rgba(17,24,39,.86) 58%,rgba(17,24,39,.98) 100%); }
}
.ui-lock-cta{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  margin-top:-8px;
  padding:var(--mfx-sp-5,24px) var(--mfx-sp-4,16px) var(--mfx-sp-4,16px);
}
.ui-lock-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--mfx-r-full,999px);
  background:var(--mfx-accent-weak,#e6f4ef); color:var(--mfx-accent,#0e7a5f);
}
.ui-lock-ico svg{ width:20px; height:20px; }
.ui-lock-title{ font-size:14.5px; font-weight:800; color:var(--mfx-ink,#0f172a); font-family:var(--mfx-font); }
.ui-lock-desc{ font-size:12.5px; color:var(--mfx-gray-500,#64748b); max-width:34ch; line-height:1.55; }
.ui-lock-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 20px; border:none; border-radius:var(--mfx-r-md,12px);
  background:var(--mfx-accent,#0e7a5f); color:#fff;
  font-family:var(--mfx-font); font-weight:800; font-size:13.5px; cursor:pointer; min-height:44px;
  text-decoration:none;
  transition:transform var(--mfx-dur,.22s) var(--mfx-ease),background var(--mfx-dur,.22s) var(--mfx-ease);
}
.ui-lock-btn:hover{ transform:translateY(-1px); background:var(--mfx-accent-strong,#0a5f49); }
.ui-lock-btn:focus-visible{ outline:2px solid var(--mfx-gold-strong,#b6870e); outline-offset:2px; }
.ui-lock-alt{ font-size:11.5px; color:var(--mfx-gray-500,#64748b); }
.ui-lock-alt b{ color:var(--mfx-gold-text,#967110); font-weight:800; }
@media (prefers-reduced-motion: reduce){
  .ui-lock-btn{ transition:none !important; }
}

/* ============================================================
   QUOTA — 하루 한도 표시 칩
   ============================================================ */
.ui-quota{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:var(--mfx-r-full,999px);
  background:var(--mfx-gray-100,#f1f5f9);
  border:1px solid var(--mfx-gray-200,#e2e8f0);
  color:var(--mfx-gray-700,#334155);
  font-family:var(--mfx-font);
  font-size:12px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.ui-quota-num{
  font-family:var(--mfx-font-num);
  font-variant-numeric:tabular-nums;
  color:var(--mfx-accent-strong,#0a5f49);
  font-weight:800;
}
.ui-quota.ui-quota-warn{ background:var(--mfx-warn-weak,#fef3c7); border-color:transparent; color:var(--mfx-warn-text,#a75b04); }
.ui-quota.ui-quota-warn .ui-quota-num{ color:var(--mfx-warn-text,#a75b04); }
.ui-quota.ui-quota-full{ background:var(--mfx-gold-weak,#fbf3dd); border-color:transparent; color:var(--mfx-gold-text,#8e690a); }
.ui-quota.ui-quota-full .ui-quota-num{ color:var(--mfx-gold-text,#8e690a); }
.ui-quota-bar{
  display:inline-block;
  width:36px; height:5px;
  border-radius:var(--mfx-r-full,999px);
  background:var(--mfx-gray-200,#e2e8f0);
  overflow:hidden;
  vertical-align:middle;
}
.ui-quota-bar i{ display:block; height:100%; background:var(--mfx-accent,#0e7a5f); border-radius:var(--mfx-r-full,999px); }
.ui-quota.ui-quota-warn .ui-quota-bar i{ background:var(--mfx-warn,#d97706); }
.ui-quota.ui-quota-full .ui-quota-bar i{ background:var(--mfx-gold,#d4a017); }

/* ============================================================
   접근성 공통 — 포커스 링 2px 골드 / 터치 44px 은 각 컴포넌트에 개별 지정.
   반응형 — 390px 1급
   ============================================================ */
@media (max-width:420px){
  .ui-empty{ padding:var(--mfx-sp-6,32px) var(--mfx-sp-3,12px); }
  .ui-empty-msg{ font-size:14px; }
  .ui-lock-cta{ padding:var(--mfx-sp-4,16px) var(--mfx-sp-3,12px) var(--mfx-sp-3,12px); }
  .ui-toast{ font-size:13px; padding:11px 14px; }
  .ui-quota{ font-size:11.5px; padding:4px 10px; }
}

@media (prefers-reduced-motion: reduce){
  .ui-empty-cta,.ui-error-retry,.ui-lock-btn{ transition:none !important; }
}

/* ============================================================
   HERO SKELETON — 히어로: 정적 프리렌더 문장(JS 전에도 텍스트 노출) +
   동적 수치/개인화 영역만 스켈레톤으로 표시 후 JS가 교체.
   사용: <div class="ui-hero-skel"> 안에 실제 카피 텍스트(h1/p)는 그대로 두고,
   동적 값이 들어갈 지점만 <span class="ui-skel ui-skel-chip ui-hero-stat"></span>
   로 감싸고, JS 로드 완료 시 해당 요소에 .ui-hero-ready 를 추가해 실값으로 교체.
   ============================================================ */
.ui-hero-skel{ position:relative; }
.ui-hero-skel h1,
.ui-hero-skel p{ color:var(--mfx-ink,#0f172a); } /* 정적 카피는 항상 실제 색상으로 즉시 렌더 */
.ui-hero-stat{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:56px; height:22px; vertical-align:middle;
}
.ui-hero-stat.ui-hero-ready{
  background:none; min-width:0; height:auto; overflow:visible;
  animation:none; border-radius:0;
}
.ui-hero-stat.ui-hero-ready::after{ display:none; content:none; }
.ui-hero-sub-skel{ height:16px; width:70%; margin:6px auto 0; }
@media (max-width:420px){
  .ui-hero-stat{ min-width:44px; height:18px; }
}