/* ============================================================
   KAIPECMAN Brand Layer — kaipec.com 이식용 공통 자산
   출처(원본 진실): kaipecman landing.html 의 디자인 토큰·컴포넌트·애니메이션을
   그대로 추출·정리한 것. 새로 디자인하지 않고 값/구조를 이식했다.
   design-system.css 와 충돌 방지를 위해 전부 `km-` 네임스페이스.
   ============================================================ */

/* ---------- 1. 디자인 토큰 (landing :root 그대로) ---------- */
.km-scope{
  --km-cyan:#00D9FF; --km-pink:#FF3BC8; --km-green:#39FF14; --km-purple:#7B3CFF;
  --km-navy:#09111F; --km-black:#05060A; --km-white:#F4F7FF; --km-mint:#7DF7D4;
  --km-yellow:#FFE033; --km-lav:#BFA5FF; --km-cream:#FFF1D6; --km-gray:#AAB4C8;
  --km-pixel:'Press Start 2P', monospace;
  --km-body:'Pretendard','Pretendard Variable', system-ui, sans-serif;
  --km-line:rgba(255,255,255,.1);
}

/* ---------- 2. 배경 효과 (landing body::before/::after 이식) ---------- */
.km-scope{ position:relative; }
/* circuit grid backdrop */
.km-scope .km-grid-bg{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,217,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,217,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 45%, transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 45%, transparent 88%);
}
/* scanlines (교육기관용으로 살짝만) */
.km-scope .km-scan{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.10) 3px 4px);
  mix-blend-mode:multiply; opacity:.4;
}
.km-scope > *{ position:relative; z-index:2; }

/* ---------- 3. 공통 섹션/타이포 (landing .eyebrow/.sec-head/.rule) ---------- */
.km-eyebrow{ font-family:var(--km-pixel); font-size:11px; color:var(--km-cyan);
  letter-spacing:2px; text-transform:uppercase; display:inline-block; }
.km-sec-head{ margin-bottom:34px; }
.km-sec-head .km-eyebrow{ margin-bottom:14px; }
.km-sec-head h2{ font-size:clamp(22px,4vw,34px); font-weight:800; letter-spacing:-.5px; color:#fff; margin:0; }
.km-sec-head p{ color:var(--km-gray); margin-top:12px; max-width:640px; font-size:15px; }
.km-rule{ height:2px; background:linear-gradient(90deg, var(--km-cyan), transparent); margin:0 0 34px; width:100%; }

/* ---------- 4. 슬로건 + 커서 blink (landing .slogan/@keyframes blink) ---------- */
.km-slogan{ display:inline-flex; align-items:center; gap:10px; font-family:var(--km-pixel);
  font-size:clamp(12px,2vw,15px); color:var(--km-yellow); padding:12px 20px;
  border:2px solid var(--km-yellow); border-radius:4px; background:rgba(255,224,51,.06);
  box-shadow:0 0 24px rgba(255,224,51,.15); }
.km-slogan .km-blink{ width:9px; height:14px; background:var(--km-yellow); animation:km-blink 1s steps(2) infinite; }
@keyframes km-blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* ---------- 5. 미션 라벨 / 리워드 배지 칩 (landing .tag / .step .rw b 감성) ---------- */
.km-chip{ font-family:var(--km-pixel); font-size:10px; letter-spacing:.5px; padding:6px 11px;
  border-radius:6px; font-weight:700; border:1px solid currentColor; background:rgba(255,255,255,.04);
  display:inline-flex; align-items:center; gap:6px; }
.km-chip--mission{ color:var(--km-yellow); }
.km-chip--reward{ color:var(--km-mint); }
.km-chip--level{ color:var(--km-cyan); }
.km-tag{ font-size:11px; padding:4px 9px; border-radius:20px; font-weight:700;
  border:1px solid currentColor; background:rgba(255,255,255,.04); }

/* ---------- 6. 히어로 / 인트로 (landing .hero + .cabinet 이식) ---------- */
.km-hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.km-hero__meta{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.km-hero h1{ font-size:clamp(26px,4.4vw,44px); font-weight:800; letter-spacing:-.6px; line-height:1.15; color:#fff; margin:14px 0 10px; }
.km-hero h1 em{ font-style:normal; color:var(--km-cyan); text-shadow:0 0 22px rgba(0,217,255,.4); }
.km-hero .km-lead{ color:var(--km-gray); font-size:15.5px; max-width:52ch; margin-bottom:8px; }
.km-hero__facts{ display:flex; flex-wrap:wrap; gap:18px; margin:18px 0 22px; }
.km-hero__facts .f{ font-size:13.5px; color:var(--km-gray); }
.km-hero__facts .f b{ color:#fff; font-weight:700; display:block; font-size:15px; margin-top:2px; }
.km-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }

/* 아케이드 캐비닛 프레임 (landing .cabinet 그대로) */
.km-cabinet{ position:relative; border:3px solid rgba(0,217,255,.4); border-radius:12px; padding:14px;
  background:linear-gradient(180deg, rgba(9,17,31,.9), rgba(5,6,10,.9));
  box-shadow:0 0 0 4px var(--km-black), 0 0 60px rgba(0,217,255,.15), inset 0 0 40px rgba(0,0,0,.6); }
.km-cabinet::before{ content:'● ● ●'; position:absolute; top:-3px; left:14px; transform:translateY(-50%);
  font-size:9px; letter-spacing:3px; color:var(--km-pink); background:var(--km-black); padding:0 8px; }
.km-cabinet img{ width:100%; display:block; border-radius:6px; }
.km-cabinet .km-cap{ font-family:var(--km-pixel); font-size:9px; color:var(--km-gray); text-align:center; margin-top:10px; letter-spacing:2px; }

/* ---------- 7. 대상자 패널 (landing .defcard 이식) ---------- */
.km-defgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.km-defcard{ border:1px solid var(--km-line); border-radius:10px; padding:20px;
  background:rgba(9,17,31,.5); transition:border-color .25s, transform .25s; }
.km-defcard:hover{ border-color:var(--km-cyan); transform:translateY(-3px); }
.km-defcard .k{ font-family:var(--km-pixel); font-size:10px; color:var(--km-cyan); margin-bottom:10px; letter-spacing:1px; }
.km-defcard .v{ font-size:15px; color:#fff; font-weight:600; }
.km-defcard .d{ font-size:13.5px; color:var(--km-gray); margin-top:6px; font-weight:400; }

/* ---------- 8. 캐릭터 크루 카드 (landing .char / .c1~c4 이식) ---------- */
.km-chars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.km-char{ border:1px solid var(--km-line); border-radius:14px; overflow:hidden;
  background:rgba(9,17,31,.55); transition:transform .28s, box-shadow .28s, border-color .28s; position:relative; }
.km-char:hover{ transform:translateY(-6px); }
.km-char .km-face{ aspect-ratio:1.18/1; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.06), transparent 70%); }
.km-char .km-face img{ width:78%; filter:drop-shadow(0 0 14px currentColor); }
.km-char .km-body{ padding:20px; }
.km-char .km-name{ font-family:var(--km-pixel); font-size:15px; margin-bottom:6px; color:#fff; }
.km-char .km-role{ font-size:13px; color:var(--km-gray); margin-bottom:14px; font-weight:600; }
.km-char .km-row2{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.km-char .km-quote{ font-size:13px; font-style:italic; color:var(--km-cream); border-left:2px solid currentColor; padding-left:10px; margin-top:6px; }
/* 식별색 (landing 고정색 시스템) */
.km-char.c1{ color:var(--km-cyan); } .km-char.c2{ color:var(--km-pink); }
.km-char.c3{ color:var(--km-green); } .km-char.c4{ color:var(--km-purple); }
.km-char.c1:hover{ border-color:var(--km-cyan); box-shadow:0 12px 40px rgba(0,217,255,.22); }
.km-char.c2:hover{ border-color:var(--km-pink); box-shadow:0 12px 40px rgba(255,59,200,.22); }
.km-char.c3:hover{ border-color:var(--km-green); box-shadow:0 12px 40px rgba(57,255,20,.22); }
.km-char.c4:hover{ border-color:var(--km-purple); box-shadow:0 12px 40px rgba(123,60,255,.22); }
/* 헬퍼 배지: 메인/보조 */
.km-char__tier{ position:absolute; top:12px; right:12px; font-family:var(--km-pixel); font-size:8px;
  letter-spacing:.5px; padding:5px 8px; border-radius:5px; background:var(--km-black); border:1px solid currentColor; }

/* ---------- 9. 미션 여정 = 리워드 타임라인 (landing .journey / .step 이식) ---------- */
.km-journey{ position:relative; border-left:2px dashed rgba(0,217,255,.35); margin-left:14px; }
.km-step{ position:relative; padding:0 0 4px 34px; margin-bottom:22px; }
.km-step::before{ content:''; position:absolute; left:-9px; top:2px; width:16px; height:16px;
  background:var(--km-black); border:3px solid var(--km-cyan); border-radius:3px; box-shadow:0 0 12px rgba(0,217,255,.5); }
.km-step .st{ font-family:var(--km-pixel); font-size:10px; color:var(--km-yellow); letter-spacing:1px; }
.km-step .act{ font-weight:700; font-size:15.5px; margin:5px 0 3px; color:#fff; }
.km-step .desc{ font-size:13.5px; color:var(--km-gray); margin-bottom:6px; }
.km-step .rw{ font-size:13px; color:var(--km-gray); display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.km-step .rw b{ color:var(--km-mint); font-weight:700; }
.km-step .rw .who{ color:var(--km-cyan); font-weight:600; }
.km-step.done::before{ border-color:var(--km-green); box-shadow:0 0 12px rgba(57,255,20,.5); }
.km-step.final::before{ border-color:var(--km-pink); background:var(--km-pink); box-shadow:0 0 18px rgba(255,59,200,.7); }

/* ---------- 10. 디버깅/주의 카드 (landing .vcard 이식, BUGGO 톤) ---------- */
.km-cautions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.km-vcard{ border:1px dashed rgba(57,255,20,.4); border-radius:10px; padding:18px; background:rgba(57,255,20,.03); font-size:14px; color:var(--km-white); }
.km-vcard .lbl{ font-family:var(--km-pixel); font-size:9px; color:var(--km-green); margin-bottom:8px; letter-spacing:1px; }
.km-vcard p{ color:var(--km-gray); margin:0; font-size:13.5px; }

/* ---------- 11. 성취/다음단계 (landing .world/.stylecard 이식) ---------- */
.km-outcome{ border:1px solid rgba(0,217,255,.2); border-radius:14px; padding:26px 28px;
  background:linear-gradient(135deg, rgba(9,17,31,.7), rgba(11,77,74,.15)); }
.km-outcome .lead{ font-size:16px; font-weight:700; color:var(--km-mint); margin:0 0 12px; }
.km-outcome ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.km-outcome li{ font-size:14.5px; color:var(--km-white); padding-left:16px; position:relative; }
.km-outcome li::before{ content:'▸'; position:absolute; left:0; color:var(--km-cyan); }
.km-next{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:18px; }
.km-nextcard{ border:1px solid var(--km-line); border-radius:12px; padding:20px; background:rgba(9,17,31,.5); transition:border-color .25s, transform .25s; }
.km-nextcard:hover{ border-color:var(--km-purple); transform:translateY(-3px); }
.km-nextcard .no{ font-family:var(--km-pixel); font-size:16px; color:var(--km-purple); margin-bottom:10px; }
.km-nextcard h4{ font-size:16px; margin:0 0 6px; color:#fff; }
.km-nextcard p{ font-size:13.5px; color:var(--km-gray); margin:0 0 12px; }
.km-nextcard a{ font-size:13px; color:var(--km-cyan); font-weight:700; text-decoration:none; }

/* ---------- 12. 버튼 (landing 톤: 시안 프라이머리 / 아웃라인) ---------- */
.km-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:8px;
  font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; border:2px solid transparent; transition:.2s; }
.km-btn--primary{ background:var(--km-cyan); color:var(--km-black); box-shadow:0 0 24px rgba(0,217,255,.25); }
.km-btn--primary:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.km-btn--ghost{ border-color:rgba(0,217,255,.5); color:var(--km-cyan); }
.km-btn--ghost:hover{ background:rgba(0,217,255,.08); }

/* ---------- 13. 스크롤 등장 (landing .reveal 이식) ---------- */
.km-reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s, transform .6s; }
.km-reveal.in{ opacity:1; transform:none; }

/* ---------- 14. 반응형 · 접근성 (landing 정책 유지) ---------- */
@media (max-width:820px){
  .km-hero{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .km-scope *{ animation:none!important; transition:none!important; }
  .km-reveal{ opacity:1; transform:none; }
  .km-scope .km-scan{ display:none; }
}
.km-scope :focus-visible{ outline:2px solid var(--km-yellow); outline-offset:2px; }