/* ====================================================================
 * Macro Edu — Pages Visual Refresh
 * Source: design_handoff_full_system/{Quiz,Portfolio,Macro Cycle,Sectors,
 *         Learning Lesson,Knowledge,Chart Analysis,Time Machine,Oracle Dashboard,
 *         AI Analysis,Friends,Onboarding,Settings,Analytics}.dc.html
 *
 * 깊은 구조 변경 없이 페이지별 카드/헤더/버튼/액션 영역을 새 디자인 시스템 톤으로
 * 일괄 정렬. (기존 모듈의 데이터 흐름은 그대로)
 * ==================================================================== */

/* ──────────────────────────────────────────
   PAGE TRANSITION — 부드러운 진입
   ────────────────────────────────────────── */
/* ⚠ 여기에 .page 전환 애니메이션을 두지 말 것 (31차).
   pages.css 는 app.html 의 인라인 <style> 뒤에 로드돼 항상 이긴다. 예전엔 이 자리에
   `.page{animation:pgSlideUp}` 가 있어서, 페이지가 활성화되는 **순간** 애니메이션이
   시작됐다. 그 시점엔 renderLearn 같은 무거운 렌더가 함께 도는데(실측 172·146·97ms),
   메인 스레드가 막힌 채로 애니메이션이 진행돼 "틱틱 끊기는 프레임"이 됐다.
   지금은 app.html 의 `.page.active.page-in` 한 곳에서만 전환을 정의한다 —
   uiPolish.js 가 렌더가 끝난 뒤 클래스를 붙이고, will-change 로 합성 레이어에 올린다. */

/* ──────────────────────────────────────────
   COMMON — Page Header (전 페이지)
   ────────────────────────────────────────── */
.st {
  font-family: var(--font-hd) !important;
  letter-spacing: -.5px;
  line-height: 1.18;
}
.sh { margin-bottom: 6px; }
.ss {
  font-family: 'Pretendard','Apple SD Gothic Neo',sans-serif !important;
  color: var(--t3) !important;
  font-size: 12px;
  letter-spacing: -.1px;
  font-weight: 500;
}
.cl {
  font-family: 'Pretendard','Apple SD Gothic Neo',sans-serif !important;
  letter-spacing: 1.2px !important;
}

/* ──────────────────────────────────────────
   QUIZ — 정답/오답 피드백 강화
   ────────────────────────────────────────── */
.qopt {
  font-family: 'Pretendard','Apple SD Gothic Neo',sans-serif !important;
  background: var(--bg2) !important;
  border: 1.5px solid var(--bd) !important;
  border-radius:12px !important;
  padding: 14px 16px !important;
  transition: all .15s ease;
  position: relative;
}
.qopt:hover:not(:disabled) {
  border-color: var(--acc) !important;
  background: rgba(226,124,31,.04) !important;
  transform: translateY(-1px);
}
.qopt.right,
.qopt-correct {
  background: rgba(21,128,61,.08) !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  font-weight: 700;
}
.qopt.wrong,
.qopt-wrong {
  background: rgba(220,38,38,.08) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
  font-weight: 700;
}
.qexp,
.qm-exp {
  background: linear-gradient(135deg, rgba(226,124,31,.07), rgba(226,124,31,.02)) !important;
  border: 1px solid rgba(226,124,31,.22) !important;
  border-radius:16px !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--t) !important;
}
.qexp strong, .qm-exp strong { color:var(--acc-text); }
.qcase, .qm-case {
  background: var(--bg3) !important;
  border-left: 3px solid var(--acc) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  color: var(--t2) !important;
  line-height: 1.55 !important;
}

/* Quiz combo chip (×1.5/×2) */
.qcombo,
[data-combo-chip] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius:24px;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #7C2D12;
  font-family: var(--font-hd);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(245,158,11,.35);
  animation: pgComboPop .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pgComboPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ──────────────────────────────────────────
   PORTFOLIO — 카드 + 도넛
   ────────────────────────────────────────── */
.pt-holding {
  background: var(--bg2) !important;
  border: 1px solid var(--bd) !important;
  border-radius:12px !important;
  padding: 12px 14px !important;
  transition: transform .12s, border-color .15s;
}
.pt-holding:hover { border-color: var(--acc) !important; transform: translateY(-1px); }
.pt-summary,
.pt-overview {
  /* 표면색에 앰버를 살짝 섞어 라이트/다크 모두에서 동작 (기존 크림톤과 거의 동일) */
  background: linear-gradient(135deg, var(--bg2), color-mix(in srgb, var(--acc) 7%, var(--bg2))) !important;
  border: 1.5px solid rgba(226,124,31,.26) !important;
  border-radius:16px !important;
  padding: 16px !important;
  box-shadow: var(--shadow-md);
}

/* ──────────────────────────────────────────
   MACRO CYCLE — 사이클 곡선 + 지표 카드
   ────────────────────────────────────────── */
.cycle-card,
.cycle-section,
#page-cycle .card {
  background: var(--bg2) !important;
  border: 1.5px solid var(--bd) !important;
  border-radius:16px !important;
  box-shadow: var(--shadow-sm);
}
.cycle-phase-label,
.cycle-phase {
  font-family: var(--font-hd) !important;
  color:var(--acc-text) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  font-weight: 700;
}

/* ──────────────────────────────────────────
   SECTORS — 11섹터 그리드
   ────────────────────────────────────────── */
.sec-card,
.sector-card {
  background: var(--bg2) !important;
  border: 1.5px solid var(--bd) !important;
  border-radius:16px !important;
  padding: 12px !important;
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.sec-card:hover,
.sector-card:hover {
  border-color: var(--acc) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.sec-card.favor { border-color: var(--green) !important; background: rgba(21,128,61,.04) !important; }
.sec-card.caution { border-color: var(--red) !important; background: rgba(220,38,38,.04) !important; }

/* ──────────────────────────────────────────
   LEARNING LESSON — 개념 카드
   ────────────────────────────────────────── */
.concept-card,
.km-concept-card {
  background: var(--bg2) !important;
  border: 1.5px solid var(--bd) !important;
  border-radius:16px !important;
  transition: transform .12s, border-color .15s;
}
.concept-card:hover { border-color: var(--acc) !important; transform: translateY(-1px); }

/* ──────────────────────────────────────────
   KNOWLEDGE MAP — 노드 강조
   ────────────────────────────────────────── */
.km-node.active,
.km-node.completed {
  filter: drop-shadow(0 2px 6px rgba(226,124,31,.4));
}

/* ──────────────────────────────────────────
   CHART ANALYSIS — 캔들 카드
   ────────────────────────────────────────── */
.chart-analysis-card,
.ca-card {
  background: var(--bg2) !important;
  border: 1.5px solid var(--bd) !important;
  border-radius:16px !important;
  padding: 14px 16px !important;
  box-shadow: var(--shadow-sm);
}

/* ──────────────────────────────────────────
   TIME MACHINE — 시나리오 덱
   ────────────────────────────────────────── */
.tm-card,
.tm-scenario-card {
  background: var(--bg2) !important;
  border: 1.5px solid var(--bd) !important;
  border-radius:16px !important;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tm-card:hover {
  transform: translateY(-2px);
  border-color: var(--acc) !important;
  box-shadow: var(--shadow-md);
}
.tm-card-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}

/* ──────────────────────────────────────────
   ORACLE DASHBOARD — 퍼플 톤
   ────────────────────────────────────────── */
.oracle-card,
.opd-card,
[data-oracle="card"] {
  background: linear-gradient(135deg, var(--bg2), rgba(168,85,247,.04)) !important;
  border: 1.5px solid rgba(168,85,247,.22) !important;
  border-radius:16px !important;
  box-shadow: var(--shadow-sm);
}
.oracle-eyebrow {
  color: #A855F7;
  font-family: 'Pretendard',sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────
   AI ANALYSIS — 골드 grad 카드
   ────────────────────────────────────────── */
.ai-card,
#page-ai .card {
  background: linear-gradient(135deg, var(--bg2), rgba(226,124,31,.05)) !important;
  border: 1.5px solid rgba(226,124,31,.22) !important;
  border-radius:16px !important;
}

/* ──────────────────────────────────────────
   FRIENDS — 비교/추천 카드
   ────────────────────────────────────────── */
.fa-item {
  background: var(--bg2) !important;
  border: 1px solid var(--bd) !important;
  border-radius:12px !important;
  padding: 11px 13px !important;
  transition: transform .12s, border-color .15s;
}
.fa-item:hover { border-color: var(--acc) !important; transform: translateY(-1px); }
.fa-item.me { border-color: var(--acc) !important; background: rgba(226,124,31,.03) !important; }

/* ──────────────────────────────────────────
   SETTINGS — 프로필 + 행
   ────────────────────────────────────────── */
.settings-section {
  background: var(--bg2) !important;
  border: 1px solid var(--bd) !important;
  border-radius:16px !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.settings-header { border-bottom: 1px solid var(--bd) !important; }
.settings-header-title {
  font-family: var(--font-hd) !important;
  letter-spacing: 1px !important;
  color:var(--acc-text) !important;
  font-size: 11.5px !important;
  font-weight: 700;
}
.settings-edit-btn {
  font-family: 'Pretendard','Apple SD Gothic Neo',sans-serif !important;
  font-weight: 700 !important;
  border-radius:8px !important;
  transition: transform .12s, background .15s;
}
.settings-edit-btn:hover { transform: translateY(-1px); }

/* ──────────────────────────────────────────
   ANALYTICS — 히트맵·약점 카드
   ────────────────────────────────────────── */
.analytics-card,
.an-card {
  background: var(--bg2) !important;
  border: 1.5px solid var(--bd) !important;
  border-radius:16px !important;
  box-shadow: var(--shadow-sm);
}
.weak-card {
  background: linear-gradient(135deg, var(--bg2), rgba(220,38,38,.04)) !important;
  border: 1.5px solid rgba(220,38,38,.22) !important;
}

/* ──────────────────────────────────────────
   ONBOARDING — fast-track 톤
   ────────────────────────────────────────── */
.onbf-card {
  border-radius:24px !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.18) !important;
}

/* ──────────────────────────────────────────
   COMMON FOOTER — 모든 페이지의 nav 등
   ────────────────────────────────────────── */
.nav-item,
.bottom-nav-item {
  font-family: 'Pretendard','Apple SD Gothic Neo',sans-serif !important;
}