/* ============================================================================
   base.css — 「오늘의 빌런」 공통 토대
   ----------------------------------------------------------------------------
   출처: 알고케어 채용 사이트(career-site)의 css/style.css.
   그 파일은 3,966줄짜리 사이트 전체 스타일시트인데, 이 게임이 실제로 쓰는 건
   앞쪽 일부뿐이라 **필요한 부분만 옮겨 왔다.**

     00. 웹폰트   — Pretendard 4종 + Manrope 2종
     01. 디자인 토큰 (:root)
     02. 리셋 & 기본 타이포
     03. 유틸리티 — 브레이크포인트 숨김 · 스크린리더 전용
     04. 버튼 (.btn / .btn--dark / .btn--line / .icon-arrow)
     05. 네비게이션 바 (.nav*)
     06. 반응형 — 태블릿(≤1199.98px) · 모바일(≤809.98px)

   가져오지 않은 것 — 히어로·채용공고·지표·팀·푸터 등 채용 사이트 전용 섹션,
   GSAP 등장 애니메이션(.appear/.split-reveal), 마그네틱 버튼(.btn--magnetic),
   맨 위로 버튼, Codec Pro 웹폰트. 이 페이지에 마크업이 없거나 스크립트가 없다.

   ⚠️ 이 파일은 career-site 와 **더 이상 동기화되지 않는다.** 저쪽 토큰이 바뀌어도
     자동으로 따라오지 않으니, 브랜드 색·타입 스케일을 고칠 일이 있으면
     두 저장소를 각각 손봐야 한다. 그게 분리한 대가다.

   브레이크포인트는 원본과 동일하다.
     데스크톱 ≥ 1200px / 태블릿 810–1199.98px / 모바일 ≤ 809.98px
   ========================================================================== */


/* ============================================================================
   00. 웹폰트
   ----------------------------------------------------------------------------
   한글(Pretendard)은 여기 없다. css/pretendard.css 가 가변폰트 동적 서브셋
   92블록을 따로 들고 있고, index.html 에서 이 파일보다 **먼저** 읽는다.
   왜 나눴는지는 그 파일 머리말 참고.

   Manrope 는 라틴 전용이라 두 벌 합쳐 61KB 다. 나눌 만큼 크지 않아 여기 둔다.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope-semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/manrope-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}


/* ============================================================================
   01. 디자인 토큰
   ----------------------------------------------------------------------------
   ★ 2026-08 개편: 이 사이트만 **다크**로 뒤집었다.
     빌런 인물 컷 열 장이 전부 어두운 회의실에서 찍힌 사진이라, 밝은 면 위에
     얹으면 사진이 구멍처럼 뚫려 보인다. 게임의 무대도 "불 꺼져 가는 회의실"이라
     다크가 내용과 맞는다. 채용 사이트(career-site)는 라이트 그대로다 —
     이 파일은 이미 저쪽과 동기화되지 않으므로 여기만 뒤집어도 된다.

     토큰 **이름은 그대로 두고 값만 뒤집었다.** villain.css 가 이름으로만
     색을 부르고 있어서, 이름을 바꾸면 800줄을 전부 손대야 한다.
     그래서 --c-ink 는 이제 '흰 글자', --c-page 는 '검은 배경'이다.

   ★ 새 색을 만들지 않는다 — 오렌지는 '면'이 아니라 '점·글자'로만 쓴다.
     단 하나의 예외가 시작 버튼이다(§4-1 CTA 규칙 — 페이지에 하나뿐인 주행동).
   ========================================================================== */

:root {
  /* --- 컬러: 텍스트 ------------------------------------------------------ */
  --c-ink:            #FEFEFE;   /* 기본 헤딩·본문 */
  --c-ink-soft:       #DFDBDA;   /* 보조 본문 */
  --c-body:           #B3ACAA;   /* 헤딩 아래 서브 카피 — 다크에서 4.5:1 넘는 하한 */
  --c-mute:           #958D8B;   /* 메타·캡션 (본문에는 쓰지 않는다) */
  /* 번호·라벨처럼 읽지 않아도 되는 글자. 디자인 정본은 #756D6B 인데 검정 위에서
     3.9:1 이라 13px 글자에는 모자란다(AA 4.5:1). 한 단만 올려 5.2:1 로 맞췄다 —
     눈으로는 거의 같은 회색이다. */
  --c-dim:            #8A8280;
  --c-nav:            #FEFEFE;   /* 로고 잉크 */
  --c-white:          #FFFFFF;
  --c-white-dim:      #E6E6E6;

  /* --- 컬러: 배경/서피스 -------------------------------------------------
     네 단계뿐이다. 다크에서 면을 더 쪼개면 전부 같은 회색으로 뭉개진다. */
  --c-page:           #0A0909;   /* 페이지 기본 배경 */
  --c-surface:        #131111;   /* 카드 */
  --c-panel:          #1A1717;   /* 카드 안의 한 단 밝은 면 */
  --c-panel-alt:      #211D1D;   /* 말풍선·썸네일 바닥 */
  --c-panel-blue:     #15181F;   /* 인재상 해금 카드 — 채용 사이트 인재상 밴드의 푸른 기 */

  /* 밝은 면. 다크 페이지에서 '뒤집힌 면'은 하나뿐이다 — 내 말풍선.
     (라이트였을 때의 --c-dark 자리를 그대로 이어받는다) */
  --c-invert:         #F2EFEE;
  --c-invert-ink:     #0A0909;

  /* --- 컬러: 브랜드 액센트 ----------------------------------------------- */
  --c-accent:         #F47B1A;   /* Wonder Orange */
  --c-accent-hover:   #F58A18;
  --c-accent-soft:    #F3A54E;   /* 오렌지 글자가 12–13px 로 작아질 때만 */

  /* --- 컬러: 라인/보더 ---------------------------------------------------
     다크에서 선은 색이 아니라 **투명도**다. 불투명 회색으로 그으면
     면이 바뀔 때마다 선만 떠 보인다. */
  --c-line:           rgba(254, 254, 254, 0.12);
  --c-line-soft:      rgba(254, 254, 254, 0.07);
  --c-line-strong:    rgba(254, 254, 254, 0.22);

  /* --- 폰트 --------------------------------------------------------------
     'Pretendard Variable' 다음에 'Pretendard' 를 한 번 더 적는 건, 사용자
     기기에 Pretendard 가 설치돼 있으면 그걸 먼저 쓰라는 뜻이다(네트워크 0).
     그다음이 OS 기본 한글 폰트다. */
  --font-kr: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
             'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-en: 'Manrope', 'Pretendard Variable', 'Pretendard', sans-serif;

  /* --- 타입 스케일 (데스크톱 기준) --------------------------------------- */
  --fs-h1:        36px;
  --fs-team-name: 26px;
  --fs-lg:        24px;
  --fs-md:        22px;
  --fs-body-lg:   20px;
  --fs-body:      18px;
  --fs-sm:        16px;
  --fs-nav:       15px;
  --fs-xs:        14px;
  --fs-2xs:       13px;

  --ls-tight:  -0.02em;
  --ls-tighter:-0.03em;
  --lh-head:   1.4;
  --lh-body:   1.7;
  --lh-ui:     1.5;

  /* --- 레이아웃 ----------------------------------------------------------
     개편 전에는 내비가 fixed 라 페이지 위에 --h-nav 만큼 빈 자리를 뒀다.
     지금은 내비가 문서 흐름 안에 있어서 스페이서가 필요 없다(§05 참고). */
  --w-page:       1120px;   /* 헤더·히어로·에피소드 목록이 공유하는 한 폭 */
  --pad-x:        24px;

  /* --- 라운드 ------------------------------------------------------------ */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-card:14px;
  --r-lg:  20px;
  --r-xl:  24px;
  --r-full:100px;

  /* --- 모션 -------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-hover:   220ms;
}


/* ============================================================================
   02. 리셋 & 기본
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* color-scheme 은 장식이 아니다 — 이게 있어야 스크롤바·입력창 기본 UI·자동완성
   드롭다운이 다크로 그려진다. 없으면 검은 페이지에 흰 스크롤바가 남는다. */
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }

/* 모바일 좌우 흔들림 방지. body 의 overflow-x:hidden 만으로는 iOS 사파리 등에서
   뷰포트보다 넓은 요소(.vg-glow 130vw)가 좌우 패닝(고무줄 흔들림)을 만든다 —
   루트에서 clip 으로 자른다. clip 은 hidden 과 달리 스크롤 컨테이너를 만들지
   않아 세로 스크롤·position:sticky 에 영향이 없다. */
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--font-kr);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* ★ hidden 이 아니라 clip 이다(0.12.0). hidden 은 body 를 스크롤 컨테이너로
     만들어서, 그 안의 position:sticky 가 뷰포트가 아니라 body 를 기준으로 삼는다 —
     0.11.0 에서 이 줄이 들어온 뒤로 플레이 화면 상단 바(미션·남은 턴·명예)가
     스크롤과 함께 그대로 흘러가 버렸다. clip 은 잘라 내기만 하고 스크롤 컨테이너를
     만들지 않아 좌우 흔들림 방지는 그대로 두고 sticky 만 되살린다(위 html 주석). */
  overflow-x: clip;
  /* 한글은 브라우저 기본값이 **글자 단위** 줄바꿈이라 "빌런과 회의실에 마 / 주
     앉았습니다" 처럼 어절 한가운데가 갈린다. 페이지 글자가 전부 한글이므로
     여기서 한 번에 어절 단위로 바꾼다. 대신 끊을 곳이 없는 긴 문자열(URL 등)이
     칸을 밀어내지 않도록 overflow-wrap 을 함께 준다 — 둘은 한 쌍이다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }


/* ============================================================================
   03. 유틸리티
   ========================================================================== */

@media (min-width: 1200px)                          { .hide-desktop { display: none !important; } }
@media (min-width: 810px) and (max-width: 1199.98px){ .hide-tablet  { display: none !important; } }
@media (max-width: 809.98px)                        { .hide-mobile  { display: none !important; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ============================================================================
   04. 버튼
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-tight);
  border-radius: var(--r-full);
  transition: transform var(--dur-hover) var(--ease-out),
              background-color var(--dur-hover) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }

/* 솔리드 pill — 다크 면 위에서는 '밝은 면'이 솔리드다 */
.btn--dark {
  padding: 12px 24px;
  color: var(--c-invert-ink);
  background: var(--c-invert);
}
.btn--dark:hover { background: var(--c-white); }

/* 헤어라인 pill — 보조 버튼 */
.btn--line {
  padding: 12px 24px;
  color: var(--c-ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.btn--line:hover { background: var(--c-panel); }

/* 대각선 화살표 아이콘 (17×17) */
.icon-arrow { width: 17px; height: 17px; flex: none; }


/* ============================================================================
   05. 네비게이션 바
   ----------------------------------------------------------------------------
   2슬롯: 왼쪽 문패(심볼 + 이름) / 오른쪽 링크.
   ★ 2026-08 개편: fixed 를 버리고 **문서 흐름 안**으로 들여놨다.
     다크 배경 위에 반투명 고정 바를 얹으면 인물 컷이 그 밑을 지날 때마다
     띠가 얼룩처럼 보인다. 이 페이지는 한 화면 안에서 게임이 다 끝나서
     스크롤 중에 내비를 다시 부를 일도 없다. 붙박이로 둘 이유가 없다.
     (그래서 --h-nav 스페이서도 함께 사라졌다 — villain.css .vg-page 참고)
   ★ 원본의 스크롤 숨김(.nav--hidden)은 js/main.js 가 하던 일이라 가져오지 않았다.
     이 사이트에는 그 스크립트가 없다. 클래스만 남기면 영영 안 붙으므로 뺐다.
   ========================================================================== */

.nav {
  position: relative;
  z-index: 2;            /* 히어로 뒤의 오렌지 글로우보다 위 */
  width: 100%;
  background: transparent;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 24px var(--pad-x) 0;
}

/* --- 왼쪽: algocare 심볼 + 문패. 둘이 한 덩어리라 링크 하나로 묶는다 --- */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto; height: auto;
  color: var(--c-nav);
}
.nav__logo img,
.nav__logo-img { display: block; width: 26px; height: 26px; flex: none; }

.nav__title {
  margin: 0;
  font-family: var(--font-kr);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--lh-ui);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  white-space: nowrap;
}

/* --- 우측: 채용으로 나가는 링크. 이 페이지의 주행동이 아니므로 면을 주지 않는다.
     솔리드 pill 로 두면 히어로의 '대화 시작하기' 와 무게가 같아져 시선이 갈린다. */
.nav__cta {
  padding: 10px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-soft);
  background: transparent;
  white-space: nowrap;
}
.nav__cta:hover {
  transform: none;
  color: var(--c-ink);
  background: rgba(254, 254, 254, 0.06);
}


/* ============================================================================
   06. 반응형
   ========================================================================== */

/* --- 태블릿 (810px – 1199.98px) ------------------------------------------ */
@media (max-width: 1199.98px) {
  :root {
    --fs-h1: 32px;
    --fs-team-name: 24px;
    --fs-lg: 22px;
    --fs-body-lg: 18px;
    --fs-body: 16px;
  }
}

/* --- 모바일 (≤ 809.98px) -------------------------------------------------- */
@media (max-width: 809.98px) {
  :root {
    --fs-h1: 20px;
    --fs-team-name: 20px;
    --fs-lg: 18px;
    --fs-md: 16px;
    --fs-body-lg: 15px;
    --fs-body: 14px;
    --fs-sm: 14px;
    --fs-xs: 13px;
    --fs-2xs: 11px;
    --pad-x: 20px;
  }

  /* 문패는 모바일에서도 남긴다 — 16px 짜리 한 덩어리라 우측 링크와 붙지 않는다.
     (개편 전에는 30px 짜리가 가운데 떠 있어서 숨겨야 했다) */
  .nav__inner { padding-top: 20px; }
  .nav__logo img,
  .nav__logo-img { width: 24px; height: 24px; }
  .nav__title { font-size: 15px; }
  .nav__cta { padding: 8px 10px; font-size: 12px; gap: 1px; }
  .nav__cta .icon-arrow { width: 14px; height: 14px; }

  /* 좁은 폰(≤380px)에서 한 단 더 줄인다. */
  @media (max-width: 380px) {
    .nav__cta { padding: 6px 8px; font-size: 11px; }
    .nav__cta .icon-arrow { width: 13px; height: 13px; }
  }
}