@import url('/assets/premium-v5.css?v=20260811');

/* ==========================================================
   면접끝판왕 AI — 공통 디자인 시스템 v10
   팔레트: navy #16314f / blue #2f6db0 / accent #e2533b / gold #f5b841
   ========================================================== */
:root{
  --navy:var(--brand, #143A6B); --navy-deep:var(--brand-strong, #0E2A50); --blue:var(--brand-link, #2E5FD0); --blue-soft:var(--brand-tint, #EAF0FA);
  --accent:#E2431F; /* onae-tokens 정본값 고정적용 -- 동일명(--accent) 순환참조 방지로 var() 미사용 */ --accent-soft:var(--accent-tint, #FDECE7); --gold:#f5b841; --gold-soft:#fdf6e3;
  --ink:var(--text, #334155); --mut:var(--text-muted, #64748B); --line:var(--border, #E2E5EB); --bg:#f4f6f9; --card:var(--bg, #FFFFFF);
  --ok:var(--success, #0E7A50); --warn:var(--warning, #8A5A00);
  --r:14px; --r-sm:10px;
  --shadow:0 4px 18px rgba(22,49,79,.08); --shadow-lg:0 12px 34px rgba(22,49,79,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Pretendard","Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:820px}

/* ---------- 헤더 ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;gap:18px;height:64px}
.logo{font-weight:800;font-size:1.12rem;color:var(--navy);letter-spacing:-.02em;white-space:nowrap}
.logo b{color:var(--accent)}
.logo:hover{text-decoration:none}
.gnb{display:flex;gap:4px;margin-left:auto;align-items:center}
.gnb a{padding:8px 12px;border-radius:8px;color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap}
.gnb a:hover{background:var(--blue-soft);text-decoration:none}
.gnb a.active{color:var(--blue);background:var(--blue-soft)}
.gnb .btn{margin-left:6px}
#navToggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-size:1.05rem;cursor:pointer;color:var(--navy)}
@media(max-width:960px){
  #navToggle{display:block}
  .gnb{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:10px 16px 16px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg)}
  .gnb.open{display:flex}
  .gnb a{padding:12px 10px}
}

/* ---------- 버튼 ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:10px;padding:12px 22px;font-weight:700;font-size:1rem;cursor:pointer;text-align:center;transition:transform .12s, box-shadow .12s;font-family:inherit}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(226,83,59,.32);text-decoration:none}
.btn.sec{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn.sec:hover{border-color:var(--blue);box-shadow:0 6px 16px rgba(47,109,176,.18)}
.btn.navy{background:var(--navy)}
.btn.navy:hover{box-shadow:0 6px 16px rgba(22,49,79,.3)}
.btn.big{padding:15px 30px;font-size:1.08rem}
.btn.small{padding:8px 14px;font-size:.88rem;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- 히어로 ---------- */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 60%,#0a1828 100%);color:#fff;padding:74px 0 66px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(47,109,176,.35),transparent 70%)}
.hero .container{position:relative;z-index:1}
.hero .eyebrow{display:inline-block;background:rgba(245,184,65,.15);color:var(--gold);border:1px solid rgba(245,184,65,.4);border-radius:999px;padding:5px 14px;font-size:.85rem;font-weight:700;margin-bottom:18px}
.hero h1{font-size:clamp(1.7rem,4.2vw,2.7rem);line-height:1.32;letter-spacing:-.02em;font-weight:800}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.lead{margin:16px 0 28px;font-size:1.1rem;color:#cdd9e6;max-width:640px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .sub-note{font-size:.85rem;color:#8fa3b8;margin-top:14px}

/* 데이터 스트립 */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:-34px;position:relative;z-index:2;box-shadow:var(--shadow-lg)}
.strip>div{background:#fff;padding:18px 14px;text-align:center}
.strip b{display:block;font-size:1.45rem;color:var(--navy);letter-spacing:-.02em}
.strip span{font-size:.83rem;color:var(--mut)}

/* ---------- 섹션 ---------- */
.section{padding:64px 0}
.section.alt{background:#fff}
.sec-head{text-align:center;margin-bottom:38px}
.sec-head .tag{display:inline-block;color:var(--accent);font-weight:800;font-size:.85rem;letter-spacing:.06em;margin-bottom:8px}
.sec-head h2{font-size:clamp(1.4rem,3vw,1.9rem);color:var(--navy);letter-spacing:-.02em}
.sec-head p{color:var(--mut);margin-top:10px;max-width:620px;margin-left:auto;margin-right:auto}

/* ---------- 카드 ---------- */
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.card h3{color:var(--navy);font-size:1.08rem;margin-bottom:8px;letter-spacing:-.01em}
.card p{color:var(--mut);font-size:.94rem}
.card .icon{font-size:1.6rem;margin-bottom:10px;display:block}
.card.link{transition:transform .14s,box-shadow .14s;cursor:pointer;display:block;color:inherit}
.card.link:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
.card.hl{border-top:4px solid var(--accent)}
.card.hl-blue{border-top:4px solid var(--blue)}
.card.hl-gold{border-top:4px solid var(--gold)}

/* 배지 */
.badge{display:inline-block;border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:700}
.badge.free{background:var(--blue-soft);color:var(--blue)}
.badge.paid{background:var(--accent-soft);color:var(--accent)}
.badge.gold{background:var(--gold-soft);color:var(--warn)}
.badge.navy{background:var(--navy);color:#fff}
.badge.soon{background:#eef1f5;color:var(--mut)}

/* ---------- 문항 카드(공용 컴포넌트) ---------- */
.q-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r-sm);padding:20px 22px;margin-bottom:14px}
.q-card .q-meta{font-size:.8rem;color:var(--mut);margin-bottom:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.q-card .q-text{font-weight:700;color:var(--ink);font-size:1.02rem;line-height:1.55}
.q-card .q-intent{margin-top:10px;font-size:.88rem;color:var(--mut)}
.q-card .q-intent b{color:var(--navy)}
.q-card details{margin-top:12px}
.q-card summary{cursor:pointer;font-weight:700;color:var(--blue);font-size:.92rem}
.q-card .q-answer{margin-top:10px;background:var(--blue-soft);border-radius:8px;padding:14px 16px;font-size:.93rem;color:#26415e}
.q-card.locked{border-left-color:#c3ccd6;background:#fafbfc}
.q-card.locked .q-text{color:#9aa7b4}

/* 출처 블록(공용) */
.src-block{background:var(--gold-soft);border:1px solid #f0dfae;border-radius:var(--r-sm);padding:14px 18px;font-size:.86rem;color:#6d5714;margin:18px 0}
.src-block b{color:#4d3d0a}

/* CTA 배너(공용) */
.cta-banner{background:linear-gradient(135deg,var(--navy),#1d446e);border-radius:var(--r);padding:38px 32px;color:#fff;text-align:center;margin:26px 0}
.cta-banner h3{font-size:1.35rem;margin-bottom:10px;letter-spacing:-.01em}
.cta-banner p{color:#c3d2e2;margin-bottom:20px}

/* ---------- 표 ---------- */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow);font-size:.92rem}
.tbl th{background:var(--navy);color:#fff;padding:12px 14px;text-align:left;font-weight:700;white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:nth-child(even) td{background:#fafbfd}
.tbl-wrap{overflow-x:auto;border-radius:var(--r-sm)}

/* ---------- 폼 ---------- */
.form-grid{display:grid;gap:14px}
.form-grid label{font-weight:700;font-size:.9rem;color:var(--navy);display:grid;gap:6px}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;font-size:.96rem;font-family:inherit;background:#fff;color:var(--ink)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--blue)}
.form-grid textarea{min-height:96px;resize:vertical}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bot-field{display:none}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- 모달 ---------- */
.modal{display:none;position:fixed;inset:0;background:rgba(14,33,55,.55);z-index:100;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .panel{background:#fff;border-radius:var(--r);max-width:440px;width:100%;padding:28px;box-shadow:var(--shadow-lg);max-height:92vh;overflow-y:auto}
.modal .panel h3{color:var(--navy);margin-bottom:14px}
.modal .close-x{float:right;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--mut)}

/* ---------- 푸터 ---------- */
.site-footer{background:var(--navy-deep);color:#8fa3b8;padding:44px 0 34px;margin-top:70px;font-size:.88rem}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;margin-bottom:26px}
.site-footer h4{color:#fff;font-size:.95rem;margin-bottom:10px}
.site-footer a{color:#aebfd0;display:block;padding:3px 0}
.site-footer .fine{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-size:.8rem;line-height:1.7}
@media(max-width:700px){.site-footer .cols{grid-template-columns:1fr}}

/* ---------- 유틸 ---------- */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:28px}.mt-4{margin-top:44px}
.mb-2{margin-bottom:16px}.mb-3{margin-bottom:28px}
.tc{text-align:center}
.mut{color:var(--mut)}
.small{font-size:.86rem}
.notice{background:var(--blue-soft);border:1px solid #d5e4f5;border-radius:var(--r-sm);padding:14px 18px;font-size:.9rem;color:#26415e}
.notice.warn{background:var(--accent-soft);border-color:#f5cfc5;color:#8a301d}

/* ---------- 인쇄(교사용 문항지·루브릭) ---------- */
@media print{
  .site-header,.site-footer,.no-print,.gnb,#navToggle,.btn{display:none !important}
  body{background:#fff;font-size:12pt}
  .print-area{display:block !important}
  .q-card,.card{box-shadow:none;break-inside:avoid}
  .print-page-break{page-break-before:always}
  a{color:var(--ink)}
}

/* ==========================================================
   v19 Motion System — 전체 인터랙션 모션
   ========================================================== */

/* --- 전역 전환 --- */
*, *::before, *::after { transition-timing-function: cubic-bezier(.4,0,.2,1); }

/* --- 버튼 Ripple 효과 --- */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: ripple-anim .55s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* --- 버튼 Active 눌림 --- */
.btn:active { transform: translateY(1px) scale(.97); }

/* --- 카드 3D Hover (clickable) --- */
.card.link, .card[onclick], .card[data-href] {
  transition: transform .22s, box-shadow .22s;
  transform-style: preserve-3d;
  will-change: transform;
}
.card.link:hover, .card[onclick]:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 18px 40px rgba(22,49,79,.16);
}

/* --- 일반 카드 hover --- */
.card { transition: box-shadow .18s, border-color .18s; }
.card:hover { box-shadow: 0 8px 28px rgba(22,49,79,.1); }

/* --- 챕터 카드 (신규) --- */
.chapter-card {
  border-radius: var(--r);
  padding: 28px 22px;
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .22s, box-shadow .22s;
}
.chapter-card::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  transition: background .22s;
}
.chapter-card:hover::before { background: rgba(0,0,0,.08); }
.chapter-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(22,49,79,.22); }
.chapter-card:active { transform: translateY(0) scale(.98); }
.chapter-card .ch-icon {
  font-size: 2.8rem;
  position: absolute; top: 18px; right: 18px;
  opacity: .7;
  animation: float 3s ease-in-out infinite;
}
.chapter-card .ch-tag { font-size: .75rem; font-weight: 700; letter-spacing: .06em; opacity: .8; margin-bottom: 6px; }
.chapter-card h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.chapter-card p { font-size: .82rem; opacity: .8; margin-top: 5px; }
.chapter-card .ch-count { font-size: .78rem; background: rgba(255,255,255,.2); display: inline-block; border-radius: 999px; padding: 2px 10px; margin-top: 10px; }

@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* --- 챕 그라디언트 팔레트 --- */
.ch-g1 { background: linear-gradient(135deg, #16314f, #2f6db0); }
.ch-g2 { background: linear-gradient(135deg, #1a7a6e, #2a9d8f); }
.ch-g3 { background: linear-gradient(135deg, #c45c1a, #e2533b); }
.ch-g4 { background: linear-gradient(135deg, #5a3fa0, #8b5cf6); }
.ch-g5 { background: linear-gradient(135deg, #1e5f74, #0891b2); }
.ch-g6 { background: linear-gradient(135deg, #7c4d00, #f5b841); }
.ch-g7 { background: linear-gradient(135deg, #1a2733, #374151); }
.ch-g8 { background: linear-gradient(135deg, #831843, #e11d74); }

/* --- 숫자 카운트업 --- */
.stat-num { display: inline-block; }

/* --- Chip 버튼 모션 --- */
.chip, [class*="chip"] {
  transition: background .15s, color .15s, transform .12s, box-shadow .12s;
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,49,79,.12); }
.chip:active { transform: scale(.95); }

/* --- 페이지 Fade 전환 --- */
.app-view { animation: fadeInUp .3s ease both; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Skeleton 로딩 --- */
.skeleton {
  background: linear-gradient(90deg, #f0f3f7 25%, #e0e6ee 50%, #f0f3f7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
  display: inline-block;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- 베타 배지 --- */
.beta-badge {
  background: linear-gradient(90deg, #f5b841, #ff8c42);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 5px;
  animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,184,65,.6); }
  50% { box-shadow: 0 0 0 5px rgba(245,184,65,0); }
}

/* --- 베타 모드 배너 --- */
.beta-bar {
  background: linear-gradient(90deg, #f5b841, #ff8c42);
  color: #fff;
  text-align: center;
  padding: 8px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  position: sticky;
  top: 64px;
  z-index: 49;
}
.beta-bar a { color: #fff; text-decoration: underline; cursor: pointer; }

/* --- 영상 카드 --- */
.video-card {
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
  position: relative;
}
.video-card iframe { width: 100%; height: 100%; border: none; }
.video-card .play-thumb {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(22,49,79,.7), rgba(47,109,176,.5));
  transition: background .2s;
}
.video-card .play-thumb:hover { background: linear-gradient(135deg, rgba(22,49,79,.85), rgba(47,109,176,.65)); }
.play-btn-svg {
  width: 64px; height: 64px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s, background .18s;
}
.play-thumb:hover .play-btn-svg { transform: scale(1.1); background: #fff; }

/* --- 티어 카드 --- */
.tier-card {
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 28px 24px;
  background: #fff;
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tier-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tier-card.featured { border-color: var(--accent); }
.tier-card.featured::before {
  content: '추천';
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: 800; padding: 3px 14px; border-radius: 999px;
}
.tier-price { font-size: 2rem; font-weight: 800; color: var(--navy); }
.tier-price small { font-size: .95rem; font-weight: 400; color: var(--mut); }
.tier-features { list-style: none; margin: 16px 0; }
.tier-features li { padding: 6px 0; font-size: .93rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.tier-features li:last-child { border: none; }
.tier-features li::before { content: '✓ '; color: var(--ok); font-weight: 700; }
.tier-features li.no::before { content: '✗ '; color: #c3ccd6; }
.tier-features li.no { color: var(--mut); }

@media(max-width:600px){
  .chapter-card { min-height: 130px; }
  .tier-card { padding: 20px 18px; }
}

/* 베타 nav 버튼 */
.beta-nav {
  background: linear-gradient(90deg, #f5b841, #ff8c42) !important;
  color: #fff !important;
  border: none !important;
  animation: pulse-badge 2.5s ease-in-out infinite;
}
.beta-nav:hover { box-shadow: 0 6px 18px rgba(245,184,65,.4) !important; }
.beta-nav.beta-on { background: linear-gradient(90deg, #2e8b57, #1a7a6e) !important; }

/* 티어 잠금 공통 */
.tier-lock{background:#f8fafc;border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;margin:10px 0}
.tier-lock.premium-lock{background:var(--gold-soft);border-color:#f0dfae}
.tier-lock .lock-icon{font-size:1.8rem;margin-bottom:8px}
.tier-lock .lock-msg{margin-bottom:12px;line-height:1.55}
.ai-feedback-wrap{border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.af-section{padding:14px 16px;border-bottom:1px solid var(--line)}
.af-section:last-child{border-bottom:none}
.af-section b{display:block;margin-bottom:8px}
.af-list{display:grid;gap:6px}
.af-item{background:#fff;border-radius:7px;padding:9px 12px;font-size:.88rem;border-left:3px solid var(--blue)}
.af-item.warn{border-left-color:var(--accent);background:var(--accent-soft)}
.af-item.ref{border-left-color:var(--ok);background:#f0fff4}

/* ==========================================================
   v18 확장 — 메뉴 소개/아이콘, 통계 카드, 스텝퍼 모션, 진단 게임화,
   레이더 차트, 클릭 카드 구분, SNS 공유바, 자료실
   ========================================================== */

/* ----- (캡쳐1) GNB: 아이콘 + 소개문구, 좁은 화면 아이콘 전환 ----- */
.gnb a.nav-item{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 11px;line-height:1.25}
.gnb a.nav-item .nav-t{display:flex;align-items:center;gap:5px;font-weight:700;font-size:.9rem}
.gnb a.nav-item .nav-ico{font-size:.95rem;line-height:1}
.gnb a.nav-item .nav-d{font-size:.66rem;color:var(--mut);font-weight:500;white-space:nowrap}
.gnb a.nav-item:hover .nav-d{color:var(--blue)}
@media(min-width:901px) and (max-width:1120px){
  /* 공간이 좁으면 아이콘만 (툴팁으로 설명) */
  .gnb a.nav-item .nav-label,.gnb a.nav-item .nav-d{display:none}
  .gnb a.nav-item .nav-ico{font-size:1.25rem}
  .gnb a.nav-item{padding:8px 10px}
}
@media(max-width:900px){
  .gnb a.nav-item{flex-direction:row;align-items:center;gap:10px;justify-content:flex-start}
  .gnb a.nav-item .nav-ico{font-size:1.2rem;width:28px;text-align:center}
  .gnb a.nav-item .nav-d{font-size:.74rem;margin-left:auto}
}

/* ----- (캡쳐2) 홈 통계: 이미지카드 + 큰 숫자 ----- */
.strip.stat-cards{gap:10px;background:transparent;border:none;overflow:visible}
.strip.stat-cards>div{border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);position:relative;padding:20px 14px 16px;transition:transform .18s,box-shadow .18s}
.strip.stat-cards>div:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.strip.stat-cards .stat-ico{display:block;font-size:1.7rem;margin-bottom:6px;line-height:1}
.strip.stat-cards b{font-size:2.1rem;font-weight:900}
.strip.stat-cards span{font-size:.9rem;color:var(--ink);font-weight:600}
.strip.stat-cards small{color:var(--mut);font-weight:400}
@media(max-width:560px){.strip.stat-cards b{font-size:1.6rem}}

/* ----- (캡쳐3) 앱 4단계 스텝퍼 모션 ----- */
.app-steps{position:relative;margin-bottom:26px !important}
.app-steps .s{position:relative;font-weight:600;transition:color .3s}
.app-steps .s .n{position:relative;z-index:2;transition:background .35s,color .35s,transform .35s;box-shadow:0 0 0 4px transparent}
.app-steps .s:not(:first-child)::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:3px;background:var(--line);z-index:1;border-radius:2px}
.app-steps .s.done:not(:first-child)::before,
.app-steps .s.on:not(:first-child)::before{background:linear-gradient(90deg,var(--blue),var(--accent));animation:stepline .5s ease}
.app-steps .s.on{color:var(--accent)}
.app-steps .s.on .n{transform:scale(1.22);box-shadow:0 0 0 5px rgba(226,83,59,.16);animation:steppulse 1.8s ease-in-out infinite}
.app-steps .s.done .n{background:var(--blue)}
.app-steps .s.done .n::before{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--blue);border-radius:50%;font-size:.8rem}
@keyframes steppulse{0%,100%{box-shadow:0 0 0 4px rgba(226,83,59,.18)}50%{box-shadow:0 0 0 9px rgba(226,83,59,.05)}}
@keyframes stepline{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}

/* ----- (캡쳐5) 진단 게임화 ----- */
.diag-progress{position:sticky;top:66px;z-index:10;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);margin-bottom:16px;font-size:.82rem;color:var(--mut)}
.diag-progress .dp-track{flex:1;height:8px;background:var(--line);border-radius:5px;overflow:hidden}
.diag-progress .dp-fill{height:100%;width:0%;border-radius:5px;background:linear-gradient(90deg,var(--blue),var(--gold),var(--accent));transition:width .45s cubic-bezier(.22,1,.36,1)}
.diag-progress .dp-pct{font-weight:800;color:var(--navy);min-width:44px;text-align:right}
.diag-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.diag-card-head .dch-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;background:var(--blue-soft);flex-shrink:0}
.diag-card-head .label{margin-bottom:0}
.diag-card-head .dch-check{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--line);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;transition:background .3s,transform .3s}
.diag-card-head .dch-check.ok{background:var(--ok);transform:scale(1.15);animation:popin .35s ease}
@keyframes popin{0%{transform:scale(.4)}70%{transform:scale(1.3)}100%{transform:scale(1.15)}}
.chip .chip-ico{margin-right:5px}
.chip{transition:transform .12s,background .15s,border-color .15s,box-shadow .15s}
.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.chip.sel{animation:chipselect .3s ease}
@keyframes chipselect{0%{transform:scale(.92)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.star{transition:transform .12s,background .15s}
.star:hover{transform:scale(1.15)}
.star.on{animation:starpop .25s ease}
@keyframes starpop{0%{transform:scale(.7)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.diag-level-badge{display:inline-flex;align-items:center;gap:6px;background:var(--gold-soft);border:1px solid #f0dfae;color:#8a6d1c;border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:700;margin-left:8px}
#diagBtn:not(:disabled){animation:btnready .6s ease;background:linear-gradient(90deg,var(--accent),#c9402a)}
@keyframes btnready{0%{transform:scale(.97);box-shadow:0 0 0 0 rgba(226,83,59,.4)}100%{transform:scale(1);box-shadow:0 0 0 14px rgba(226,83,59,0)}}

/* 진단 완료 컨페티 */
.confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}
.confetti{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.9;animation:confall linear forwards}
@keyframes confall{to{transform:translateY(105vh) rotate(720deg);opacity:.6}}

/* ----- (캡쳐6) 레이더 차트 ----- */
.radar-wrap{display:grid;grid-template-columns:minmax(230px,320px) 1fr;gap:18px;align-items:center}
@media(max-width:640px){.radar-wrap{grid-template-columns:1fr}}
.radar-svg{width:100%;height:auto}
.radar-svg .rgrid{fill:none;stroke:var(--line);stroke-width:1}
.radar-svg .raxis{stroke:var(--line);stroke-width:1}
.radar-svg .rshape{fill:rgba(47,109,176,.22);stroke:var(--blue);stroke-width:2;stroke-linejoin:round;animation:radarin .8s ease}
.radar-svg .rdot{fill:var(--accent)}
.radar-svg .rlabel{font-size:10.5px;fill:var(--mut);font-weight:600}
@keyframes radarin{from{opacity:0;transform:scale(.6);transform-origin:center}to{opacity:1;transform:scale(1)}}

/* ----- (캡쳐7) 클릭 가능 박스 구분 ----- */
.card.link,.tappable{cursor:pointer;position:relative;transition:transform .18s,box-shadow .18s,border-color .18s;border:1px solid var(--line)}
.card.link:hover,.tappable:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--blue);text-decoration:none}
.card.link::after,.tappable::after{content:"→";position:absolute;right:14px;bottom:10px;color:var(--blue);opacity:0;transform:translateX(-6px);transition:opacity .18s,transform .18s;font-weight:700}
.card.link:hover::after,.tappable:hover::after{opacity:1;transform:translateX(0)}
.diag-mini{position:relative}
.diag-mini .dm-ico{position:absolute;top:12px;right:12px;font-size:1.3rem;opacity:.85}
.reco.tappable{background:#fff}

/* ----- (캡쳐8) 채점 근거 표시 ----- */
.rub-evidence{font-size:.76rem;color:var(--mut);margin-top:3px;line-height:1.5}
.rub-evidence b{color:var(--ok);font-weight:700}
.rub-evidence.miss b{color:var(--accent)}
.score-reliability{background:var(--blue-soft);border:1px solid #d5e4f5;border-radius:8px;padding:11px 14px;font-size:.78rem;color:#26415e;line-height:1.6;margin-top:12px}

/* ----- SNS 공유바 ----- */
.share-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 4px}
.share-bar .sh-label{font-size:.8rem;color:var(--mut);font-weight:700;margin-right:2px}
.share-bar button,.share-bar a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:.8rem;font-weight:700;cursor:pointer;color:var(--ink);font-family:inherit;transition:transform .13s,box-shadow .13s,border-color .13s;text-decoration:none}
.share-bar button:hover,.share-bar a:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--blue);text-decoration:none}
.share-bar .sh-kakao{background:#fee500;border-color:#fee500;color:#191919}
.share-bar .sh-x{background:#111;border-color:#111;color:#fff}
.share-bar .sh-fb{background:#1877f2;border-color:#1877f2;color:#fff}
.share-bar .sh-band{background:#21c531;border-color:#21c531;color:#fff}

/* ----- 자료실 다운로드 ----- */
.dl-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:16px 18px;margin-bottom:10px;transition:transform .16s,box-shadow .16s,border-color .16s}
.dl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--blue);text-decoration:none}
.dl-card .dl-ico{width:46px;height:46px;border-radius:12px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.dl-card .dl-body{flex:1;min-width:0}
.dl-card .dl-body b{display:block;color:var(--navy);font-size:.95rem}
.dl-card .dl-body span{font-size:.79rem;color:var(--mut)}
.dl-card .dl-btn{flex-shrink:0;font-size:.8rem;font-weight:800;color:#fff;background:var(--accent);border-radius:999px;padding:8px 16px;white-space:nowrap}

/* ----- TTS (v19) ----- */
.tts-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tts-chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;color:var(--navy);transition:transform .12s,border-color .15s}
.tts-chip:hover{border-color:var(--blue);transform:translateY(-1px)}
.tts-chip.tts-playing{background:var(--accent);border-color:var(--accent);color:#fff;animation:micpulse2 1.2s infinite}
@keyframes micpulse2{0%,100%{box-shadow:0 0 0 0 rgba(226,83,59,.4)}50%{box-shadow:0 0 0 7px rgba(226,83,59,0)}}
.tts-settings-bar{margin-top:12px}
.tts-set{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.78rem}
.tts-set-label{font-weight:800;color:var(--navy)}
.tts-set select{border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:.78rem;font-family:inherit;color:var(--ink);background:#f8fafc}
.series-art{display:block;width:100%;height:auto;border-radius:16px;margin:18px 0 4px;box-shadow:var(--shadow)}
.vid-date{font-size:.7rem;background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:2px 9px;font-weight:700;margin-left:6px}
.ext-badge{font-size:.7rem;background:var(--gold-soft);color:#8a6d1c;border-radius:999px;padding:2px 9px;font-weight:700}

/* ===== v24 UX 프리미엄 향상 레이어 (additive · 비파괴) ===== */
*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
::selection{ background:var(--gold-soft); color:var(--navy); }
a,.btn,.card,.tier-card,button,input,select,textarea{ transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease, background .18s ease; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:6px; }
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0) scale(.98); }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--blue-soft); }
.tier-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.tier-card.featured{ position:relative; border:2px solid var(--gold); box-shadow:0 12px 34px rgba(245,184,65,.22); }
.tier-card.featured::before{ content:"추천"; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--navy); font-weight:800; font-size:.72rem; padding:3px 12px; border-radius:999px; letter-spacing:.5px; box-shadow:var(--shadow); }
.series-art{ border-radius:var(--r); box-shadow:var(--shadow); }
.site-header{ transition:box-shadow .2s ease, background .2s ease; }
.site-header.is-stuck{ box-shadow:0 6px 20px rgba(22,49,79,.10); background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(6px); }
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.skeleton{ background:linear-gradient(100deg,#eef2f7 30%,#f7fafc 50%,#eef2f7 70%); background-size:200% 100%; animation:sk 1.2s infinite linear; border-radius:8px; }
@keyframes sk{ to{ background-position:-200% 0 } }
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important } html{ scroll-behavior:auto } .reveal{ opacity:1; transform:none } }

/* ===== v25 테마 시스템 + 타이포 정리 ===== */
/* 다크 */
html[data-theme="dark"]{ --bg:#0e1621; --card:#182633; --ink:#e7eef6; --mut:#9fb2c2; --line:#2a3946; --blue-soft:#16232f; --gold-soft:#2a2712; --accent-soft:#2c1714; --blue:#5aa9ff; }
html[data-theme="dark"] body{ background:var(--bg); }
html[data-theme="dark"] .card,html[data-theme="dark"] .tier-card,html[data-theme="dark"] .strip.stat-cards>div,html[data-theme="dark"] .section.alt{ background:var(--card); border-color:var(--line); }
html[data-theme="dark"] .site-header{ background:rgba(14,22,33,.92)!important; border-color:var(--line); }
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4{ color:var(--ink); }
html[data-theme="dark"] .gnb a{ color:var(--ink); }
html[data-theme="dark"] table td,html[data-theme="dark"] table th{ border-color:var(--line); }
/* 귀여운(파스텔) */
html[data-theme="cute"]{ --navy:#6b4ee6; --blue:#ff77a9; --blue-soft:#ffeef5; --accent:#ff6f91; --accent-soft:#fff0f3; --gold:#ffcf5c; --gold-soft:#fff7e0; --ink:#4a3b57; --mut:#9a86ad; --bg:#fff6fb; --card:#ffffff; --line:#f2d9e8; --r:22px; --r-sm:16px; }
html[data-theme="cute"] .btn{ border-radius:999px; }
/* 테마/언어 컨트롤 FAB */
.theme-fab{ position:fixed; left:16px; bottom:16px; z-index:9998; display:flex; align-items:center; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 8px; box-shadow:var(--shadow-lg); }
.theme-fab button{ border:0; background:transparent; cursor:pointer; font-size:15px; padding:6px 8px; border-radius:999px; color:var(--ink); line-height:1; transition:background .15s; }
.theme-fab button:hover{ background:var(--blue-soft); }
.theme-fab button.on{ background:var(--blue-soft); box-shadow:inset 0 0 0 2px var(--blue); }
.theme-fab .sep{ width:1px; height:18px; background:var(--line); margin:0 2px; }
#goog-gt-tt,.goog-te-banner-frame,.skiptranslate{ display:none!important; } body{ top:0!important; }
/* 타이포 정리 */
.gnb a{ font-size:.9rem; }
.gnb a.nav-item{ font-size:.82rem; padding:6px 10px; }
.gnb a.nav-item small,.gnb a.nav-item>span:last-child{ font-size:.66rem; color:var(--mut); font-weight:500; }
.strip.stat-cards b,.strip.stat-cards .stat-num{ font-size:2.35rem; line-height:1.12; font-weight:900; }
@media(max-width:560px){ .strip.stat-cards b,.strip.stat-cards .stat-num{ font-size:1.9rem; } }

/* ===== v26 GNB 드롭다운 그룹 (훈련▾ / 자료실▾) ===== */
.gnb{ align-items:center; }
.nav-group{ position:relative; display:inline-flex; }
.nav-gtrigger{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; cursor:pointer;
  font:inherit; font-size:.92rem; font-weight:600; color:var(--ink); padding:8px 10px; border-radius:10px; line-height:1; }
.nav-gtrigger .gi{ font-size:1rem; }
.nav-gtrigger .car{ font-size:.7rem; opacity:.6; transition:transform .18s; }
.nav-group:hover .nav-gtrigger, .nav-group.open .nav-gtrigger{ background:var(--blue-soft); color:var(--navy); }
.nav-group.has-active .nav-gtrigger{ color:var(--accent); font-weight:700; }
.nav-group.open .nav-gtrigger .car, .nav-group:hover .nav-gtrigger .car{ transform:rotate(180deg); }
.nav-drop{ position:absolute; top:calc(100% + 8px); left:0; min-width:224px; background:var(--card);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 46px rgba(16,49,79,.16);
  padding:8px; display:none; z-index:60; }
.nav-group:hover .nav-drop, .nav-group.open .nav-drop{ display:block; animation:navpop .16s ease; }
@keyframes navpop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.nav-drop a{ display:block; padding:9px 12px; border-radius:10px; color:var(--ink); text-decoration:none; }
.nav-drop a:hover{ background:var(--blue-soft); }
.nav-drop a b{ display:block; font-size:.92rem; font-weight:700; color:var(--navy); }
.nav-drop a .nd{ display:block; font-size:.74rem; color:var(--mut); margin-top:1px; }
.nav-drop a.active b{ color:var(--accent); }
.gnb > a.nav-solo{ font-size:.92rem; font-weight:600; padding:8px 10px; border-radius:10px; display:inline-flex; align-items:center; gap:5px; }
.gnb > a.nav-solo:hover{ background:var(--blue-soft); color:var(--navy); }
.gnb > a.nav-solo.active{ color:var(--accent); }
html[data-theme="dark"] .nav-gtrigger{ color:var(--ink); }
@media(max-width:860px){
  .nav-group{ display:block; width:100%; }
  .nav-gtrigger{ width:100%; justify-content:space-between; }
  .nav-drop{ position:static; box-shadow:none; border:0; min-width:0; padding:0 0 6px 12px; }
  .nav-group:hover .nav-drop{ display:none; }
  .nav-group.open .nav-drop{ display:block; }
  .gnb > a.nav-solo{ display:block; width:100%; }
}

/* ===== v27 프리미엄 인터랙션 레이어 ===== */
/* 크로스-도큐먼트 View Transitions (지원 브라우저만, 자동 폴백) */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.26s; }
.site-header{ view-transition-name:site-header; }
@media(prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none!important; } }
/* 스트릭 pill */
.streak-pill{ display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:800; color:#a8560a;
  background:linear-gradient(180deg,#fff6e2,#ffe9bf); border:1px solid var(--gold); border-radius:999px; padding:4px 10px; margin-left:10px; white-space:nowrap; cursor:default; }
.streak-pill .sf{ font-size:.9rem; filter:saturate(1.2); }
html[data-theme="dark"] .streak-pill{ color:#ffcf5c; background:#2a2712; }
@media(max-width:560px){ .streak-pill{ display:none; } }
/* 참여 유도 토스트 */
.imk-toast{ position:fixed; right:16px; bottom:76px; max-width:320px; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 50px rgba(16,49,79,.22); padding:16px 18px; z-index:9997;
  transform:translateY(24px); opacity:0; transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s; }
.imk-toast.in{ transform:none; opacity:1; }
.imk-toast h4{ margin:0 0 6px; font-size:.98rem; color:var(--navy); }
.imk-toast p{ margin:0 0 12px; font-size:.85rem; color:var(--mut); line-height:1.5; }
.imk-toast .row{ display:flex; gap:8px; }
.imk-toast .tx{ position:absolute; top:8px; right:10px; border:0; background:none; cursor:pointer; color:var(--mut); font-size:1rem; }

/* ==========================================================
   v29 — 디자인 시스템 v1 적용(프리미엄·탈AI). 토큰 리매핑 + 컴포넌트 정제.
   ========================================================== */
:root{
  --navy:var(--brand, #143A6B); --navy-deep:var(--brand-strong, #0E2A50); --blue:var(--brand-link, #2E5FD0); --blue-soft:var(--brand-tint, #EAF0FA);
  --accent:#E2431F; --accent-soft:var(--accent-tint, #FDECE7); --gold:#B08A3E; --gold-soft:#F3ECDD;
  --ink:var(--text, #334155); --mut:var(--text-muted, #64748B); --line:var(--border, #E2E5EB); --bg:#F7F4EE; --card:var(--bg, #FFFFFF);
  --cream:#EFE9DE; --r:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(20,24,31,.04),0 4px 14px rgba(20,24,31,.06);
  --shadow-lg:0 18px 44px rgba(20,24,31,.16);
  --serif:'Noto Serif KR','Nanum Myeongjo',serif;
}
/* 타이포: 세리프 디스플레이 헤드라인 */
h1,h2,.hero h1,.sec-head h2,.section h2{ font-family:var(--serif); font-weight:700; letter-spacing:-.02em; }
.logo{ font-family:var(--serif); font-weight:700; }
/* 히어로: 그라디언트/글로우 제거 → 단색, 좌측정렬 */
.hero{ background:var(--navy)!important; }
.hero::after{ display:none!important; }
.hero .eyebrow{ background:rgba(201,80,47,.14); color:#e0794f; border-color:rgba(201,80,47,.42); }
.hero h1 em{ color:#e0794f; }
/* 버튼: 컬러 글로우 제거, radius 정제 */
.btn{ border-radius:var(--r-sm); }
.btn:hover{ box-shadow:none!important; transform:translateY(-1px); }
.btn.sec{ border:1.5px solid var(--line); }
.btn.sec:hover{ border-color:var(--navy); background:var(--cream); }
/* 카드: 헤어라인 기본, hover에만 저농도 그림자 */
.card{ box-shadow:none; border:1px solid var(--line); border-radius:var(--r); }
.card:hover, .card.link:hover, .card[onclick]:hover{ box-shadow:var(--shadow)!important; border-color:rgba(20,24,31,.2); }
/* 배너: 그라디언트 → 단색 네이비 */
.cta-banner{ background:var(--navy)!important; }
/* 섹션 교차 배경: 흰색 → 따뜻한 크림 */
.section.alt{ background:var(--cream); }
/* 링크 톤 정제 */
a{ color:var(--navy); }
a:hover{ color:var(--accent); }
.gnb a.active{ color:var(--accent); background:var(--accent-soft); }
/* 계열 카드 그라디언트 톤다운(과채도 완화) */
.ch-g1{ background:#122238!important; }
.ch-g2{ background:#1a5c50!important; }
.ch-g3{ background:#a53d20!important; }

/* v30 신뢰 트러스트바(전 페이지 상단) */
.imk-trustbar{ background:var(--navy); color:#cdd8e6; font-size:.78rem; border-bottom:1px solid rgba(255,255,255,.08); }
.imk-trustbar .in{ max-width:1080px; margin:0 auto; padding:0 20px; height:36px; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.imk-trustbar b{ color:#fff; font-weight:600; }
.imk-trustbar .dot{ color:var(--gold); }
@media(max-width:600px){ .imk-trustbar .in{ font-size:.72rem; gap:10px; height:auto; padding:6px 14px; } }

/* v32 스탯 카드 — 배경이미지 제거, 인라인 SVG 아이콘 + 고대비 숫자 */
.strip.stat-cards{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:34px 0 0; background:none; border:0; box-shadow:none; padding:0; }
.stat-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; border-radius:12px; overflow:hidden; min-height:172px;
  padding:22px 16px 18px; background:#122238; text-decoration:none; border:1px solid rgba(20,24,31,.12); transition:transform .16s, box-shadow .16s; }
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); text-decoration:none; }
.stat-card .sc-ico{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:14px; color:#C9502F; flex-shrink:0; }
.stat-card .sc-ico svg{ width:100%; height:100%; }
.stat-card .sc-in{ position:relative; z-index:1; color:#fff; }
.stat-card .sc-in b{ display:flex; align-items:baseline; gap:6px; font-family:var(--serif); font-weight:800; font-size:2.35rem; line-height:1; letter-spacing:-.01em; color:#fff; }
.stat-card .sc-in b em{ font-style:normal; font-size:.95rem; font-weight:600; color:#e6c79c; }
.stat-card .sc-in > span{ display:block; margin-top:8px; font-size:.92rem; font-weight:600; color:#eef2f7; }
.stat-card .sc-in small{ display:block; margin-top:4px; font-size:.68rem; font-weight:400; color:#a7b6c6; line-height:1.45; }
@media(max-width:820px){ .strip.stat-cards{ grid-template-columns:repeat(2,1fr); } .stat-card{ min-height:150px; } }
@media(max-width:560px){ .stat-card .sc-ico{ width:40px; height:40px; margin-bottom:10px; } }

/* v32 카드 아이콘 배지 (WHY / WHO 섹션 공용) */
.card-icon-badge{ display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; margin-bottom:14px; flex-shrink:0; }
.card-icon-badge.badge-terra{ background:rgba(201,80,47,.12); color:#C9502F; }
.card-icon-badge.badge-navy{ background:rgba(18,34,56,.08); color:#122238; }

/* 무료 진단 섹션 → 프리미엄 다크 밴드 + 흰 폼카드 */
#lead-free-diagnosis{ background:var(--navy); }
#lead-free-diagnosis .sec-head .tag{ background:rgba(201,80,47,.16); color:#e0794f; border:1px solid rgba(201,80,47,.42); }
#lead-free-diagnosis .sec-head h2{ color:#fff; }
#lead-free-diagnosis .sec-head p{ color:#c2cedd; }
#lead-free-diagnosis [data-growth-form], #lead-free-diagnosis form{ background:#fff; border-radius:14px; padding:24px; max-width:560px; margin:26px auto 0; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:14px; }
#lead-free-diagnosis label{ display:block; text-align:left; font-size:.82rem; font-weight:600; color:var(--g700); }
#lead-free-diagnosis input{ display:block; width:100%; margin-top:6px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font-size:1rem; font-family:inherit; background:#fff; color:var(--ink); }
#lead-free-diagnosis input:focus{ outline:2px solid var(--navy); outline-offset:1px; border-color:var(--navy); }
#lead-free-diagnosis button{ background:var(--accent); color:#fff; border:0; border-radius:8px; padding:14px 22px; font-weight:700; font-size:1rem; cursor:pointer; width:100%; transition:background .15s; }
#lead-free-diagnosis button:hover{ background:#a53d20; }