/* ━━━ NE Flow 본페이지 · 디자인 토큰 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   기준: NE Books 몰 디자인 시스템(--ink · --red · --line · --muted · --gray-bg · --weak)
        + 시안(v_4_1)에서 실제로 쓰인 값.
   원칙: 비슷한데 다르게 쓰인 색은 하나로 합쳤다(합친 목록은 doc/03_디자인_토큰.md '색').
        새 색을 쓰기 전에 여기부터 본다.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  color-scheme: only light;   /* 라이트 전용 — 크롬 안드로이드 자동 다크가 색을 뒤집으면 히어로 문구가 영상 위에서 사라진다. 삼성 인터넷 다크 모드는 이 값을 따르지 않는다(페이지 쪽에서 끌 방법 없음 · 08 참고) */

  /* ── 색 · 텍스트 ── */
  --ink: #1D1717;        /* 브랜드 블랙 */
  --text-2: #474747;     /* 본문 보조 */
  --muted: #666666;      /* 설명·캡션 */
  --weak: #A9A9A9;       /* 라벨·비활성 */
  --white: #FFFFFF;

  /* ── 색 · 면 ── */
  --surface: #F7F7F7;    /* 큰 면: 섹션 패널 · 밴드 · 카드 바탕 */
  --gray-bg: #F3F3F3;    /* 작은 면: 아이콘 원 · 태그 */
  --line: #E5E5E5;       /* 선 · 칩 테두리 */
  --line-2: #C4C4C4;     /* 진한 선 · 비활성 점 (DS --border-2) */
  --dark: #141414;       /* 어두운 밴드(.sec--dark · 영어로 쌓아온 자산) */
  --red-on-dark: #FF5140;/* 어두운 바탕 위 레드(밴드 안 소제목 · 수치) — 브랜드 레드는 검정 위에서 묻힌다. ne-ai-portal spec/03 '수치 밴드' 시작색 */
  --footer-bg: #EFEFEC;  /* 본사 공통 푸터 바탕 — 기록용(footer.css 는 원본 보호 영역이라 값을 직접 쓴다) */

  /* ── 색 · 액센트 ── */
  --red: #E83828;        /* 브랜드 레드. 액센트로만 */
  --blue: #2F74D1;       /* '11월 중 오픈' 뱃지 바탕(NE Books DS 파랑). 뱃지 외에는 쓰지 않는다 */
  --selection: rgba(232, 56, 40, .26);   /* 글자 드래그 선택 = 레드 26%(기본 파랑 선택과 같은 농도). 글자색은 그대로 */
  --nelt: #1646A2;       /* 히어로 공지 NELT 배너 바탕(시안 1737:2639 · 서비스 브랜드색 — UI 색 통합 대상 아님) */

  /* ── 색 · 투명도용 RGB 채널 ── rgb(var(--red-rgb) / .5) 처럼 투명도를 붙여 쓴다(그림자 · 막 · 빛).
     --shadow-rgb(20 20 22)는 그림자 · 어두운 막 전용으로 --dark(20 20 20)와 다른 값이다 */
  --white-rgb: 255 255 255;
  --ink-rgb: 29 23 23;
  --red-rgb: 232 56 40;
  --dark-rgb: 20 20 20;
  --shadow-rgb: 20 20 22;
  --black-rgb: 0 0 0;

  /* ── 색 · 서비스 배너 바탕 (바로 이용 가능한 서비스) ── */
  --bn-nelt: #FFA33F;
  --bn-achieve: #76E9D9;
  --bn-netimes: #C8B7E5;

  /* ── 서체 ── */
  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --display: "Paperlogy", "Pretendard Variable", "Pretendard", system-ui, sans-serif;

  /* ── 글자 크기 ──
     DS 7단계(12·13·14·16·24·32·40) + 시안 디스플레이 단(18·20·28·36·44·48·64·76·92) + 11(뱃지 S · SCROLL DOWN) */
  /* 자간 — 제목(18px 이상) -2% · 본문 -1.5%(body 에서 px 로 물려받아 12px 글자는 약 -2%) · 뱃지 -1%.
     제외: 히어로 NE FLOW · 키커 · 서브(글자 폭 비율로 크기를 맞춘 줄 — 자간을 바꾸면 비율을 다시 잰다) · 푸터(본사 공통). 디자인으로 정한 값(-3% · SCROLL DOWN +30%)은 그대로 */
  --ls-title: -.02em; --ls-body: -.015em; --ls-badge: -.01em;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px;
  --fs-36: 36px; --fs-40: 40px; --fs-44: 44px; --fs-48: 48px; --fs-64: 64px;
  --fs-76: 76px; --fs-92: 92px;

  /* ── 모서리 ── */
  --r-4: 4px;    /* 태그 */
  --r-10: 10px;  /* 아이콘 타일 */
  --r-12: 12px;  /* 입력칸 · 계정 버튼(모바일 시트 · 로그인) */
  --r-14: 14px;  /* 카드 안 썸네일 */
  --r-20: 20px;  /* 서비스 카드 */
  --r-30: 30px;  /* 패널 · 배너 · 교재 타일 */
  --r-40: 40px;  /* 큰 패널 */
  --r-pill: 999px;

  /* ── 레이아웃 ──
     컨테이너 = DS 와 같은 max 1440 · 좌우 40 → 콘텐츠 1360.
     컬럼 = 10컬럼 · 거터 20 (1칸 118). 시안 블록이 이 그리드에 정확히 얹힌다:
       2칸 256 · 3칸 394 · 4칸 532 · 6칸 808 · 8칸 1084 · 10칸 1360 */
  --maxw: 1440px;
  --pad-x: 40px;
  --cols: 10;
  --gutter: 20px;
  --hd-h: 80px;          /* 헤더 높이 — 고정 헤더 아래 sticky 오프셋 기준 */
  --inner-w: calc(100vw - 2 * var(--pad-x));   /* 화면 폭 - 좌우 여백 — 1023 이하 폭 비례 크기 · 카드 폭의 기준. --pad-x 가 바뀌면 같이 바뀐다 */

  /* ── 세로 리듬 ── (시안의 들쭉날쭉한 간격을 이 셋으로 통일)
     섹션 상하 여백 · 섹션 머리 → 본문 간격 · 머리 안 간격 */
  --sec-py: 72px;        /* 섹션 padding-block 의 기준 — 섹션마다 1배 또는 2배로 쓴다(실제 간격은 doc/03_디자인_토큰.md '세로 리듬') */
  --head-gap: 48px;
  --eyebrow-gap: 8px;
  --lead-gap: 14px;

  /* ── 층 순서(z-index) ── 화면 전체에 걸치는 층만. 섹션 안 층(0 ~ 12)은 각 규칙에 둔다 */
  --z-to-top: 40;        /* 맨 위로 버튼 */
  --z-header: 100;
  --z-menu: 120;         /* 전체 메뉴(1024 이상) */
  --z-sheet: 130;        /* 모바일 시트(1023 이하) */
  --z-skip-link: 1000;   /* 본문 바로가기 — 포커스 때 헤더 위 */
  --z-modal: 1500;       /* 카드 · 교재 상세 모달 */
  --z-veil: 1900;        /* 이동 안내 베일 — 모달 위에서도 덮는다 */

  /* ── 움직임 ── */
  --ease-out: cubic-bezier(.22, .61, .36, 1);   /* grammar 편의 기능과 같은 곡선 */
  --ease-io: cubic-bezier(.65, 0, .35, 1);   /* 천천히 출발 · 천천히 멈춤 — 히어로 배너 넘김 · NE Flow 오픈 라인 */
}

@media (max-width: 1023px) {
  :root { --pad-x: 24px; --cols: 6; --gutter: 16px; --sec-py: 56px; --head-gap: 40px; --hd-h: 64px;
    --m-card-w: min(calc(var(--inner-w) * .62), 300px); }   /* 1023 이하 가로로 넘기는 카드 한 장 폭(Teaching Flow 카드 줄 · Learning Flow · 신규 오픈 공용) — 390 = 217 · 524 이상 300 */
}
@media (max-width: 767px) {
  :root { --pad-x: 20px; --cols: 4; --gutter: 12px; --sec-py: 48px; --head-gap: 32px; --hd-h: 56px; }
}