/* =====================================================================
   챌린지 앞단 v2 — 공용 토큰 + 컴포넌트 (메인·소개·등록 공유)
   디자인시스템 v2.1 Deep Jade. 진행 v2(.cpv2)와 한 벌.
   모든 스타일 .chv2 스코프 — 사이트 전역/레거시 CSS와 충돌 방지.
   그린=행동/강조/완료 · 앰버=포인트(≤6%) · 나머지 뉴트럴.
   보더 대신 그림자+여백 · hairline은 콘텐츠 내부 구분선만.
   ===================================================================== */

.chv2 {
  /* ---- Deep Jade (핸드오프 지정 주색) ---- */
  --primary:#059669; --primary-hover:#036546; --primary-link:#047E57;
  --primary-tint:#D7EFE5; --primary-tint-2:#EDF6F1; --primary-tile:#F1F7F4;
  /* ---- Dark (히어로·WHY·마감 CTA) ---- */
  --dark:#023B2D; --dark-band:#036546; --dark-accent:#6FCEA6;
  --dark-line:rgba(255,255,255,.16);
  /* ---- Amber (포인트 — 경고 아님) ---- */
  --amber:#C5870F; --amber-deep:#96690C; --amber-bg:#FAF2E1;
  /* ---- Star (평점 별 전용 옐로) ---- */
  --star:#FBBF24;
  /* ---- Ink / Surface ---- */
  --ink:#111110; --strong:#1B1B1B; --body:#45453F; --body-2:#3A3A37;
  --muted:#8A8A85; --faint:#A8A8A3;
  --page:#FFFFFF; --band:#F7F7F5; --surface:#F5F5F3;
  --line:#ECECE8; --line-2:#EFEFEC; --line-3:#E6E6E2;
  /* ---- Elevation (2층 소프트) ---- */
  --card:0 1px 3px rgba(17,17,16,.05),0 6px 20px rgba(17,17,16,.06);
  --card-sm:0 1px 2px rgba(17,17,16,.04),0 2px 6px rgba(17,17,16,.04);
  --card-lg:0 2px 8px rgba(17,17,16,.06),0 18px 44px rgba(17,17,16,.09);
  --card-hover:0 2px 6px rgba(17,17,16,.06),0 14px 36px rgba(17,17,16,.11);
  /* ---- Radius ---- */
  --r-card:12px; --r-card-sm:8px; --r-btn:8px; --r-badge:2px; --r-pill:9999px;
  /* ---- Layout ---- */
  --wrap:1160px;

  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  color:var(--body);
  background:var(--page);
  line-height:1.7;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* ---- 풀블리드 브레이크아웃 (GP 컨테이너 해제) — body.chv2-page 게이트 ---- */
body.chv2-page #page.grid-container{max-width:100%;}
body.chv2-page .site-content{max-width:100%;padding:0;}
body.chv2-page .site-main{padding:0;}
body.chv2-page .site-content > .site-main > .chv2,
body.chv2-page .site-content .chv2{flex:1 1 auto;min-width:0;width:100%;}

.chv2 *{box-sizing:border-box;}
.chv2 :where(h1,h2,h3,h4,p,ul,ol,li,figure){margin:0;}
.chv2 :where(button){border:none;background:none;font-family:inherit;cursor:pointer;color:inherit;}
.chv2 a{color:inherit;text-decoration:none;}
.chv2 img{max-width:100%;display:block;}
.chv2 .mono{font-family:Inter,"Pretendard Variable",sans-serif;font-feature-settings:'tnum' 1;}

/* ---- 컨테이너 ---- */
.chv2-wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,30px);}
.chv2-wrap--narrow{max-width:768px;}
.chv2-wrap--mid{max-width:1000px;}
.chv2-wrap--stat{max-width:800px;}

/* ---- eyebrow ---- */
.chv2-eyebrow{display:inline-block;font-family:Inter;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--primary-link);margin:0 0 12px;}
.chv2-eyebrow--light{color:var(--dark-accent);}
.chv2-eyebrow--amber{color:var(--amber-deep);}
.chv2-eyebrow--muted{color:var(--muted);}

/* ---- 헤딩 ---- */
.chv2-h1{font-size:clamp(30px,4.4vw,44px);font-weight:800;line-height:1.14;letter-spacing:-.03em;color:var(--ink);text-wrap:balance;}
.chv2-h2{font-size:clamp(22px,2.6vw,28px);font-weight:800;line-height:1.24;letter-spacing:-.025em;color:var(--ink);text-wrap:balance;}
.chv2-h3{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--strong);}
.chv2-lead{font-size:clamp(15px,1.6vw,17px);line-height:1.68;color:var(--body);}

/* ---- 버튼 ---- */
.chv2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--r-btn);font-size:15px;font-weight:700;white-space:nowrap;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;}
.chv2-btn--lg{height:54px;padding:0 30px;font-size:16px;}
.chv2-btn--sm{height:42px;padding:0 18px;font-size:14px;}
/* 색상 규칙은 .chv2 프리픽스로 (0,2,0) — .chv2 a{color:inherit} 와의 경합에서 우선 */
.chv2 .chv2-btn--primary{background:var(--primary);color:#fff;}
.chv2 .chv2-btn--primary:hover{background:var(--primary-hover);}
.chv2 .chv2-btn--primary:active{transform:translateY(1px);}
.chv2 .chv2-btn--light{background:#fff;color:var(--strong);}
.chv2 .chv2-btn--light:hover{background:#F2F2F0;}
.chv2 .chv2-btn--ghost{background:transparent;color:var(--primary-link);}
.chv2 .chv2-btn--ghost:hover{color:var(--primary-hover);}
.chv2 .chv2-btn--outline{background:#fff;color:var(--strong);box-shadow:inset 0 0 0 1px var(--line-3);}
.chv2 .chv2-btn--outline:hover{background:var(--surface);}
.chv2 .chv2-btn--dark{background:var(--ink);color:#fff;}
.chv2 .chv2-btn--dark:hover{background:var(--strong);}
.chv2 .chv2-btn:disabled,.chv2 .chv2-btn.is-disabled{background:#E9E9E6;color:#A8A8A3;cursor:not-allowed;box-shadow:none;transform:none;pointer-events:none;}
/* 다크 배경 위 텍스트 링크(보더 없음) */
.chv2 .chv2-btn--onDark{background:transparent;color:#fff;}
.chv2 .chv2-btn--onDark:hover{color:rgba(255,255,255,.78);}

/* ---- 배지(sharp 2px) ---- */
.chv2-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-badge);font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;line-height:1.3;}
.chv2-badge--primary{background:var(--primary-tint);color:var(--primary-hover);}
.chv2-badge--amber{background:var(--amber-bg);color:var(--amber-deep);}
.chv2-badge--ink{background:#1B1B18;color:#fff;}
.chv2-badge--neutral{background:#F0F0ED;color:var(--body);}
.chv2-badge--onDark{background:rgba(255,255,255,.16);color:#fff;}

/* ---- 난이도 신호등 (배지 내 3바 — 초록/노랑/빨강) ---- */
.chv2-lvl{display:inline-flex;align-items:flex-end;gap:2px;}
.chv2-lvl i{width:3px;height:5px;background:#D9D9D4;border-radius:1px;}
.chv2-lvl i:nth-child(2){height:8px;}
.chv2-lvl i:nth-child(3){height:11px;}
.chv2-lvl--1 i:nth-child(-n+1){background:#34D399;}
.chv2-lvl--2 i:nth-child(-n+2){background:#FBBF24;}
.chv2-lvl--3 i:nth-child(-n+3){background:#F87171;}
.chv2-badge--onDark .chv2-lvl i{background:rgba(255,255,255,.35);}
.chv2-badge--onDark .chv2-lvl--1 i:nth-child(-n+1){background:#34D399;}
.chv2-badge--onDark .chv2-lvl--2 i:nth-child(-n+2){background:#FBBF24;}
.chv2-badge--onDark .chv2-lvl--3 i:nth-child(-n+3){background:#F87171;}

/* ---- 칩(pill) ---- */
.chv2-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--body);background:#F4F4F1;border-radius:var(--r-pill);padding:6px 13px;line-height:1.4;}
.chv2-chip--green{background:var(--primary-tint);color:var(--primary-hover);}

/* ---- 카드 ---- */
.chv2-card{background:var(--page);border-radius:var(--r-card);box-shadow:var(--card);}
.chv2-card--interactive{cursor:pointer;transition:box-shadow .18s ease,transform .18s ease;}
.chv2-card--interactive:hover{box-shadow:var(--card-hover);transform:translateY(-2px);}

/* ---- 섹션 리듬 ---- */
.chv2-section{padding:clamp(48px,7vw,88px) 0;}
.chv2-section--band{background:var(--band);}
.chv2-section--dark{background:var(--dark);color:#fff;}
.chv2-section-head{margin:0 0 clamp(24px,4vw,40px);}

/* ---- 다크 밴드 위 텍스트 ---- */
.chv2-section--dark .chv2-h2{color:#fff;}
.chv2-section--dark .chv2-lead{color:rgba(255,255,255,.72);}

/* ---- FAQ 아코디언(단일 오픈) ---- */
.chv2-faq{max-width:768px;margin:0 auto;}
.chv2-faq-item{border-top:1px solid var(--line);}
.chv2-faq-item:last-child{border-bottom:1px solid var(--line);}
.chv2-faq-q{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:22px 4px;font-size:15.5px;font-weight:700;color:var(--strong);line-height:1.5;}
.chv2-faq-q .chv2-faq-chev{margin-left:auto;flex:0 0 auto;color:var(--muted);transition:transform .2s ease;}
.chv2-faq-item.is-open .chv2-faq-chev{transform:rotate(180deg);color:var(--primary);}
.chv2-faq-a{overflow:hidden;max-height:0;transition:max-height .28s ease;}
.chv2-faq-a-in{padding:0 4px 22px;font-size:14.5px;line-height:1.72;color:var(--body);}
.chv2-faq-item.is-open .chv2-faq-a{max-height:600px;}

/* ---- 이미지 슬롯(플레이스홀더) ---- */
.chv2-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--surface);border-radius:var(--r-card-sm);color:var(--faint);font-size:13px;text-align:center;background-size:cover;background-position:center;}
.chv2-slot svg{opacity:.55;}
.chv2-slot--filled{color:transparent;}

/* ---- 마감 CTA 밴드(그린) ---- */
.chv2-cta-band{background:var(--dark-band);color:#fff;text-align:center;padding:clamp(48px,7vw,80px) 0;}
.chv2-cta-band .chv2-h2{color:#fff;}
.chv2-cta-band p{color:rgba(255,255,255,.8);margin:12px 0 26px;}

/* ---- 모션 배려 ---- */
@media (prefers-reduced-motion: reduce){
  .chv2 *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .chv2 svg animateTransform{display:none;}
}