/* ============================================================
   수학 파이널 LAB — 프리미엄 리스타일 스킨 (premium-skin.css)
   ------------------------------------------------------------
   · index.html 인라인 <style> 및 theme.css 뒤에 로드되는 "추가형 오버라이드".
   · 기존 마크업/클래스/구조를 그대로 사용(신규 태그 불필요).
   · theme.css 의 --mfx-* 팔레트(잉크 + 딥그린 + 골드)로 일관 승격.
   · 레이아웃(position/display/grid)은 건드리지 않고 표면·색·타이포·모션만 정돈.
   · 되돌리기: <link> 한 줄만 제거하면 원복.
   ============================================================ */

/* ---------- 스킨 로컬 토큰 (theme.css 값과 정렬) ---------- */
:root{
  --pk-green-700:#0a5f49;   /* deep */
  --pk-green-600:#0e7a5f;   /* signature */
  --pk-green-500:#12946f;   /* bright — 그라디언트 companion */
  --pk-ink:#0f172a;
  --pk-gold:#d4a017;
  --pk-gold-2:#b6870e;
  --pk-line:#e6e9ef;
  --pk-focus:0 0 0 3px rgba(14,122,95,.28);
}

/* ---------- 기존 브랜드 토큰 리매핑 (인디고 → 딥그린) ----------
   index.html 곳곳이 var(--brand)/var(--brand2)/var(--soft) 를 쓰므로
   토큰만 바꿔도 버튼·칩·통계·플래너·강조막대 등이 한 번에 승격된다. */
:root{
  /* 2026-08-27 v4: SITE_SPEC §2 디자인 토큰(딥그린 primary #0E7A5F) 정합.
     --brand만 onae-tokens.css의 --brand와 이름이 같아 var() 순환참조가 되므로
     값을 리터럴로 직접 대입(폴백 없음). 나머지는 정본 변수명을 보되 그린 계열 폴백으로 교체. */
  --brand:#0E7A5F;
  --brand2:var(--brand-600,#0A5F49);
  --soft:var(--brand-tint,#E7F3EF);
  --ink:var(--text,#0F172A);
  --sub:var(--text-muted,#475569);
  --line:var(--border,#E2E8F0);
  --ok:var(--success,#0E7A50);
  --warn:var(--warning,#8A5A00);
  --bad:var(--danger,#DC2626);
  --r:var(--radius,12px);
  --shadow:var(--shadow-2,0 4px 16px rgba(15,23,42,.08));
  --shadow-lg:var(--shadow-3,0 12px 32px rgba(15,23,42,.12));
}

/* ---------- 타이포 정돈 ---------- */
body{
  font-family:'Pretendard','Malgun Gothic','Apple SD Gothic Neo',system-ui,-apple-system,sans-serif;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 0,"kern" 1;
  /* 딥그린 톤의 은은한 배경 광 */
  background:radial-gradient(1100px 520px at 100% -8%,#e5f3ee 0,rgba(229,243,238,0) 55%),var(--bg);
}
h2{letter-spacing:-.5px;font-weight:800}
h3{letter-spacing:-.3px;font-weight:800}
.sub{letter-spacing:0}
/* 숫자·수식 가독성 — 통계/점수/카운트 계열 탭ular */
.stat b,.dday,.score-big,.plan-dday,.plan-stage-pct,.exam-timer,.dg-count,.gs-stat b{
  font-variant-numeric:tabular-nums;
}

/* ---------- 헤더 / 로고 ---------- */
header{
  background:linear-gradient(120deg,#0b3b2c 0%,#0a5f49 52%,#12946f 100%);
  box-shadow:0 8px 28px rgba(10,47,37,.24);
}
.logo{letter-spacing:-.5px}
.logo small{opacity:.82;font-weight:500}
/* 활성 탭 밑줄·아이콘의 골드 강조는 유지(그린과 상호보완) */

/* ---------- 내비 / 탭 ---------- */
nav button:hover{background:rgba(255,255,255,.10)}
nav button.on{background:rgba(255,255,255,.15)}
/* 탭 아이콘 — 이모지 대신 단색 SVG(assets/icons/*.svg 동일 선화, 인라인 삽입) */
.nav-ico svg{ width:16px; height:16px; display:block; }
.nav-item .nav-ico svg{ width:15px; height:15px; }
@media (max-width:600px){ .nav-ico svg{ width:14px; height:14px; } }
.navbtn:focus-visible,
nav button:focus-visible{
  outline:2px solid var(--pk-gold);
  outline-offset:-3px;
  border-radius:11px 11px 0 0;
}

/* ---------- 카드 / 표면 ---------- */
.card{
  border-radius:16px;
  border:1px solid var(--pk-line);
  box-shadow:var(--shadow);
  transition:box-shadow .2s cubic-bezier(.22,.61,.36,1),transform .12s cubic-bezier(.22,.61,.36,1);
}
/* 정적 카드에는 레이아웃 흔들림 없는 그림자 승격만(transform 없음) */
.card:hover{box-shadow:var(--shadow-lg)}
/* 이미 클릭형(pcard/topic/book/guide-cta 등)은 각자 transform 유지 */

/* h2 앞 강조바 — 토큰 리매핑으로 자동 그린이나 명시 고정 */
h2::before{background:linear-gradient(var(--pk-green-600),var(--pk-green-500))}

/* ---------- 버튼 위계 + 포커스 접근성 ---------- */
.btn{
  background:linear-gradient(135deg,var(--pk-green-600),var(--pk-green-500));
  box-shadow:0 6px 16px rgba(14,122,95,.26);
  border-radius:12px;
  letter-spacing:-.2px;
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{
  background:var(--soft);
  color:var(--pk-green-700);
  box-shadow:none;
}
.btn.ghost:hover{filter:brightness(.98)}
.btn:focus-visible,
.chip:focus-visible,
.share-btn:focus-visible,
.faq-q:focus-visible,
.tier-badge:focus-visible,
.theme-btn:focus-visible,
.code-chip:focus-visible{
  outline:2px solid var(--pk-gold);
  outline-offset:2px;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;
}

/* ---------- 칩 ---------- */
.chip.on{
  background:linear-gradient(135deg,var(--pk-green-600),var(--pk-green-500));
  box-shadow:0 4px 12px rgba(14,122,95,.28);
}

/* ---------- 강조 표면들(하드코딩 인디고 → 그린 뉴트럴) ---------- */
.qbox{
  background:linear-gradient(135deg,#eaf5f1,#f1f8f5);
  border:1px solid #d8ede6;
}
.result-hero{
  background:linear-gradient(135deg,#eaf5f1,#f4faf7);
  box-shadow:var(--shadow);
}
.guide-cta{
  background:linear-gradient(135deg,#eef8f4,#f3f8f6);
  border:1px solid #dcece6;
}
.lock-card{
  background:linear-gradient(135deg,#f6faf8,#eef6f2);
}
.book-card .bk-cover{
  background:linear-gradient(135deg,var(--pk-green-600),var(--pk-green-500));
  box-shadow:0 4px 10px rgba(14,122,95,.28);
}

/* ---------- 진단 게임 프로그레스(무지개 → 그린→골드) ---------- */
.dg-prog i{
  background:linear-gradient(90deg,var(--pk-green-500),var(--pk-green-600),var(--pk-gold));
}
.dg-card{border-radius:20px}
.dg-check{background:linear-gradient(135deg,var(--pk-green-600),var(--pk-green-500))}

/* ---------- 플래너 히어로 / 스테이지(인디고 → 그린) ---------- */
.plan-hero{
  background:linear-gradient(135deg,#0b3b2c 0%,#0a5f49 55%,#12946f 100%);
  box-shadow:0 12px 30px rgba(10,47,37,.28);
}
.plan-badge.active{
  background:linear-gradient(135deg,var(--pk-green-600),var(--pk-green-500));
  box-shadow:0 4px 12px rgba(14,122,95,.32);
}
.plan-stage.on{
  border-color:var(--pk-green-500);
  background:linear-gradient(180deg,rgba(14,122,95,.06),transparent);
  box-shadow:0 8px 24px rgba(14,122,95,.14);
}

/* ---------- 요금제 카드(index .plan-tier) ---------- */
.plan-tier.feat{
  border:2px solid var(--pk-green-500);
  box-shadow:0 12px 32px rgba(14,122,95,.18);
}
.plan-tier .pt-flag{
  background:linear-gradient(135deg,var(--pk-green-600),var(--pk-green-500));
  box-shadow:0 4px 12px rgba(14,122,95,.3);
}

/* ---------- 회원 등급 배지(멤버·프로·맥스 색 정렬) ----------
   book(=PRO) 골드, member 그린, max 딥그린-골드로 절제 */
.tier-badge.member{background:linear-gradient(135deg,var(--pk-green-500),var(--pk-green-600));color:#fff}
.tier-badge.book.max{background:linear-gradient(135deg,var(--pk-green-700),var(--pk-gold));color:#fff}

/* ---------- 안내 시나리오 태그 색 정렬 ---------- */
.guide-scn.stu .gs-tag{background:linear-gradient(135deg,var(--pk-green-600),var(--pk-green-500))}

/* ---------- 포커스링/셀렉션/입력 ---------- */
textarea:focus,input:focus,select:focus{
  border-color:var(--pk-green-500);
  box-shadow:var(--pk-focus);
}
::selection{background:rgba(14,122,95,.18)}

/* ============================================================
   다크 모드 — 앱의 실제 토글(:root[data-theme="dark"]) 기준 리매핑.
   theme.css 는 prefers-color-scheme 로 --mfx-* 를 이미 다크 조정하므로
   여기서는 index 토큰만 밝은 그린으로 승격한다.
   ============================================================ */
:root[data-theme="dark"]{
  --brand:#2fbf9a;
  --brand2:#5fd6b8;
  --soft:#0f2e26;
  --line:#273449;
}
:root[data-theme="dark"] header{
  background:linear-gradient(120deg,#06231b 0%,#0a5f49 60%,#0e7a5f 100%);
  box-shadow:0 8px 28px rgba(0,0,0,.4);
}
:root[data-theme="dark"] body{
  background:radial-gradient(1100px 520px at 100% -8%,#0f2e26 0,rgba(15,46,38,0) 55%),var(--bg);
}
:root[data-theme="dark"] .qbox{
  background:linear-gradient(135deg,#10241d,#122a22);
  border-color:#1e3b32;
}
:root[data-theme="dark"] .result-hero{
  background:linear-gradient(135deg,#10241d,#0f2620);
}
:root[data-theme="dark"] .guide-cta{
  background:linear-gradient(135deg,#10241d,#131b2e);
  border-color:#1e3b32;
}
:root[data-theme="dark"] .lock-card{
  background:linear-gradient(135deg,#10241d,#0f1b26);
}
:root[data-theme="dark"] .btn.ghost{color:#5fd6b8}

/* ============================================================
   390px 하드닝 — 터치 타깃 44px·헤더/탭/카드 여백 정리(1급 지원)
   ============================================================ */
.theme-btn,.pwa-install-button,#tierBadge,.navbtn{ min-height:40px; }
@media (max-width:420px){
  .hwrap{ gap:8px; padding:0 4px; }
  .logo{ font-size:16px; }
  .logo small{ display:block; font-size:10.5px; margin-top:1px; }
  .theme-btn,#tierBadge{ min-width:40px; min-height:40px; }
  .card{ padding:16px; }
  .btn{ min-height:44px; }
  .nav-menu{ min-width:min(64vw,200px); }
}

/* ============================================================
   모션 존중 — 스킨이 추가한 트랜지션 최소화
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .card,
  .card:hover,
  .btn,
  .btn:hover{
    transition:none !important;
    transform:none !important;
  }
}