/* AI 강의 공개 페이지 — 색·여백·글자크기 정본
 *
 * ⚠️ 색·크기를 화면 파일(index.html 등)에 직접 적지 말 것(상위 규약 ⑨). 여기 이름만 쓴다.
 * ⚠️ 이 벌은 **공개 화면 전용**이다. 직원 화면 토큰(as_system/site/app/globals.css)과
 *    이름이 겹쳐 보여도 **다른 벌**이다 — 섞어 쓰거나 한쪽 값을 다른 쪽에 베끼지 말 것.
 * 🔴 이 벌을 둘지 자체가 아직 미결(PLAN_SITE.md Q3, 대표님·office 판단). 결정 나면 여기만 고친다.
 *
 * ── 톤 = 전문적 (대표님 지시 2026-11-14 「인스타는 귀여운 느낌, 홈페이지는 전문적인 느낌」)
 * 인스타(sales 소관)와 **일부러 다르게 간다.** 전문적으로 보이게 하는 것은 장식이 아니라 절제다:
 *   ① 색면을 넓게 깔지 않고 **가는 선으로 가른다**(색 블록 = 광고 전단, 선 = 문서·보고서)
 *   ② 악센트는 **한 색, 아주 조금만**  ③ 모서리·그림자를 줄인다  ④ 숫자는 자리를 맞춘다
 * ⚠️ 전문적 ≠ 어려운 말. **전문용어 금지·큰 글씨 전제는 그대로다**(지방 1인 사업자, 현장에서 폰으로 본다).
 *    신뢰는 어휘가 아니라 정렬·여백·증거에서 나온다.
 */

:root {
  /* 글자 */
  --ink:        #11161c;   /* 본문·제목 */
  --ink-2:      #4b5563;   /* 보조 설명 */
  --ink-3:      #868e99;   /* 흐린 글자(주석·출처) */
  --on-accent:  #ffffff;

  /* 바탕 — 흰 종이에 가깝게 둔다. 색면을 넓게 깔지 않는다 */
  --bg:         #ffffff;
  --surface:    #ffffff;
  --surface-2:  #f5f7f9;   /* 아주 옅은 단 — 영상·숫자 칸 바탕 */
  --line:       #e3e7eb;   /* 가는 선 — 구역을 색이 아니라 이걸로 가른다 */
  --line-2:     #c9d0d7;   /* 조금 진한 선(강조 구분) */

  /* 악센트 — 딥 네이비 한 색만. 넓게 칠하지 않는다 */
  --accent:     #143a63;
  --accent-ink: #143a63;
  --accent-bg:  #eef2f6;

  /* 글자 크기 — 폰 기준. 본문 18px 아래로 내리지 말 것 */
  --fs-h1:      clamp(28px, 7.4vw, 42px);
  --fs-h2:      clamp(21px, 5vw, 28px);
  --fs-body:    18px;
  --fs-lead:    19px;
  --fs-small:   15px;
  --fs-num:     clamp(34px, 9.5vw, 48px);
  --fs-label:   13px;      /* 구역 머리말(작은 대문자 느낌) */

  /* 여백 */
  --gap-1: 8px;
  --gap-2: 16px;
  --gap-3: 24px;
  --gap-4: 40px;
  --gap-5: 72px;           /* 구역 사이 — 넉넉한 여백이 전문적으로 읽히는 가장 싼 방법 */
  --pad-side: 20px;
  --maxw: 660px;

  /* 모양 — 둥글기·그림자를 줄인다 */
  --radius: 8px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(17, 22, 28, .06);

  /* 자간 — 제목은 좁게, 라벨은 넓게 */
  /* ⚠️ 「AI스럽다」를 만드는 건 글씨체 이름이 아니라 **굵기·자간**이다(D20 대응).
   *    자간을 꽉 조이고 라벨을 넓게 벌리는 것이 테크 랜딩의 신호다 — 둘 다 풀었다. */
  --track-head: -.005em;   /* 꽉 조이지 않는다 */
  --track-label: .02em;    /* 넓게 벌리지 않는다 */

  /* 누르는 것 — 손가락으로 누른다. 높이를 줄이지 말 것 */
  --tap-h: 58px;

  /* ── 서체 = **기기 기본 글씨**. 웹폰트를 쓰지 않는다. (대표님 D20 「너무 AI스러운 글씨체 쓰지 마라」)
   * 실측 2026-11-14 — 이 타깃이 매일 보는 **네이버 블로그 모바일**의 CSS 를 직접 받아 셌다
   * (`ssl.pstatic.net/.../lego_w-*.css`): `-apple-system, BlinkMacSystemFont, Roboto, Sans-Serif` 11회 ·
   * `AppleSDGothicNeo-Bold` 18회 · `Sans-Serif` 23회. **웹폰트 선언이 없다.**
   * ⇒ 그들이 보던 그 글씨로 맞춘다. 덤으로 **웹폰트 다운로드가 없어 느린 회선에서 더 빨리 뜬다.**
   * ⛔ Pretendard 를 되돌리지 말 것 — 테크 스타트업 화면의 글씨라 「내 것이 아니다」는 거리를 만든다.
   *    (게다가 CDN 없이 이름만 적어 둬서 폰에서는 어차피 안 걸렸다.)
   * ⚠️ 「AI스럽지 않게」가 「작고 수수하게」로 가면 안 된다 — **크기는 크게 그대로.**
   */
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR",
          "Malgun Gothic", Roboto, sans-serif;
  --font-num: var(--font);   /* 숫자도 같은 글씨. 자리 맞춤은 font-variant-numeric: tabular-nums 로 낸다 */
}