/* 모두의AI Design System v2 — tokens + base type
 * SSOT: www/design-system/handoff/colors_and_type.css  (+ 모두의코워크 사이트.dc.html)
 * 이 파일은 SSOT의 구현체다. SSOT와 어긋나면 언제나 handoff/ 가 이긴다.
 *
 * v2 리뉴얼: 마스코트 일러스트에서 추출한 순수 무채색(achromatic) 계열 +
 *   마스코트 포인트 그린(#3d7d5f) 단일 강조 컬러.
 *   추출값 — ink #060606 / mid-gray #9fa0a0 / light #e6e6e6 / white #ffffff / green #3d7d5f
 *
 * 폰트는 DS v2 3종을 전부 웹폰트(CDN)로만 로드한다. head/custom.html 참조.
 *   sans/display : Pretendard (jsDelivr Variable, 100~900)
 *   latin        : Inter (Google Fonts)
 *   mono         : JetBrains Mono (Google Fonts)
 * 셀프호스팅 @font-face(.otf/.ttf), 픽셀 폰트(NeoDunggeunmo), GowunBatang 재도입 금지.
 */

/* ── MaruBuri (마루 부리) — 제목 전용 부리(세리프) 서체. 네이버 한글한글 아름답게 CDN ──
 *
 * 역할 분담: 「제목」은 마루부리, 「그 외 전부」는 Pretendard.
 *   마루부리    문서 제목 h1~h4 · 히어로 타이틀 · 홈 섹션 타이틀
 *   Pretendard  본문 · 목록 · 인용 · 사이드바 · 표 · 버튼 · 카드 · TOC · 푸터
 *   JetBrains   코드 · eyebrow · 칩
 *
 * 굵기는 600(대제목) / 700(소제목) 두 종만 로드한다. 마루부리는 Pretendard와 달리
 * dynamic-subset이 아닌 통짜 woff2(각 약 450KB)라, 굵기를 늘리면 그만큼 무거워진다.
 * 굵기를 추가하려면 반드시 실제 사용처가 있는지 먼저 확인할 것.
 *
 * ★ 마루부리에는 800(ExtraBold)·900(Black)이 없다. 제목에 800을 주면 브라우저가
 *   가짜 굵게(faux bold)를 합성해 부리 획이 뭉갠다. 제목 굵기는 700을 넘기지 말 것.
 *
 * 주의: 배포된 예제 CSS 중에는 SemiBold·Bold·Light·ExtraLight를 전부
 * font-weight:400 으로 선언한 것이 돌아다닌다. 나중 선언이 이기므로 400이
 * ExtraLight로 렌더되는 버그다. 아래처럼 굵기를 1:1로 맞춰야 한다.
 */
@font-face {
  font-family: "MaruBuri";
  src: url("https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MaruBuri";
  src: url("https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Point Color (마스코트 포인트 그린 — 유일한 강조 컬러) ── */
  --color-primary: #3d7d5f;
  --color-primary-hover: #316750;
  --color-primary-active: #265240;
  --color-primary-disabled: #d1d1d1;

  --color-ink: #060606;              /* 마스코트 아웃라인 잉크 */
  --color-bg: #f4f4f4;               /* 페이지 배경 (무채색) */
  --color-surface: #ffffff;          /* 카드/모달 표면 */

  /* ── Neutral Scale (순수 무채색 — hue 0%) ── */
  --neutral-50:  #f4f4f4;
  --neutral-100: #e6e6e6;
  --neutral-200: #d1d1d1;
  --neutral-300: #b5b5b5;
  --neutral-400: #9fa0a0;
  --neutral-500: #757575;
  --neutral-600: #565656;
  --neutral-700: #3a3a3a;
  --neutral-800: #242424;
  --neutral-900: #141414;
  --neutral-950: #060606;

  /* ── Semantic ── */
  --color-success: #2e8a63;
  --color-warning: #c47b2a;
  --color-danger:  #c44a3a;
  --color-info:    #2a8a8c;

  /* ── Foreground roles ── */
  --fg-1: var(--color-ink);          /* primary text */
  --fg-2: #565656;                   /* muted */
  --fg-3: #757575;                   /* placeholder / caption */
  --fg-on-primary: #ffffff;

  /* ── Border (무채색) ── */
  --border-1: #d1d1d1;
  --border-2: #e6e6e6;
  --border-strong: #b5b5b5;
  --border-focus-ring: rgba(61, 125, 95, 0.16);

  /* ── Signature accent (포인트 그린) ── */
  --gradient-signature: #3d7d5f;
  --gradient-signature-soft: rgba(61, 125, 95, 0.08);
  --gradient-signature-dark: #316750;

  /* ── Type families (전부 CDN) ── */
  --font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-latin: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: var(--font-sans);
  /* 제목 부리체 — 「제목」 전용. 로드 중 폴백도 부리 계열로 유지해 인상이 튀지 않게 한다. */
  --font-serif: "MaruBuri", "Nanum Myeongjo", Batang, serif;

  /* ── Weights ── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;   /* dc.html 섹션 제목·카드 제목 기본 굵기 */
  --fw-black: 900;
  --fw-display: 900;

  /* ── Letter-spacing (Notion 자간 규칙) ── */
  --tracking-display-tight: -0.075em;  /* 히어로 */
  --tracking-display: -0.055em;        /* 페이지 h1 */
  --tracking-heading: -0.05em;         /* h2/h3 */
  --tracking-title: -0.04em;           /* 카드 제목 */
  --tracking-body: -0.03em;            /* 본문 */
  --tracking-body-tight: -0.025em;     /* 캡션·보조 텍스트 */
  --tracking-caption: 0;
  --tracking-eyebrow: 0.1em;           /* mono uppercase eyebrow */

  /* ── Sizes ── */
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.875rem;     /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg: 1.125rem;     /* 18 */
  --text-xl: 1.25rem;      /* 20 */
  --text-2xl: 1.5rem;      /* 24 — 본문 h2 */
  --text-3xl: 1.875rem;    /* 30 — 홈 섹션 h2 */
  --text-4xl: 2.25rem;     /* 36 */
  --text-5xl: 3rem;        /* 48 */
  --text-6xl: 3.75rem;     /* 60 */
  --text-display: clamp(2.25rem, 4.5vw, 4rem);

  /* ── Line-heights ── */
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;
  --lh-prose: 1.85;        /* dc.html 본문 문단 (산세리프 기준) */

  /* ── 부리체 제목 지표 ──
     Pretendard 제목은 자간을 -0.05em까지 조여야 정돈되지만, 마루부리는 조이면
     부리(획 끝 장식)가 서로 뭉친다. 제목 자간은 한참 풀어준다.
     굵기도 마루부리 상한이 700이므로 800(ExtraBold)을 쓰지 않는다. */
  --tracking-heading-serif: -0.02em;   /* 대제목 h1·히어로 */
  --tracking-title-serif: -0.015em;    /* 소제목 h3·h4 */
  --fw-heading-serif: 600;             /* h1·h2 — 큰 활자는 600으로 충분히 강하다 */
  --fw-title-serif: 700;               /* h3·h4 — 작은 활자는 700이라야 버틴다 */

  /* ── Spacing (4px base) ── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-section: 64px;   /* dc.html 홈 섹션 간격 */

  /* ── Radius (DS v2: sm4 md8 lg16 xl24 pill32) ── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 24px;
  --radius-card: 16px;
  --radius-pill: 32px;
  --radius-full: 9999px;

  /* ── Shadow (outer only, ink 기반) ── */
  --shadow-xs: 0 1px 2px rgba(6, 6, 6, 0.04);
  --shadow-sm: 0 2px 4px rgba(6, 6, 6, 0.06);
  --shadow-md: 0 4px 12px rgba(6, 6, 6, 0.08);
  --shadow-lg: 0 8px 24px rgba(6, 6, 6, 0.10);
  --shadow-xl: 0 16px 48px rgba(6, 6, 6, 0.12);
  --shadow-signature: 0 8px 32px rgba(61, 125, 95, 0.20);

  /* ── Motion ── */
  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-page: 600ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-smooth:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Containers ── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --container-page: 1440px;     /* dc.html 셸 최대 폭 */
  --container-gutter: 32px;

  /* ── Docs shell (dc.html .docs-shell 실측) ── */
  --header-h: 64px;
  --header-bg: rgba(243, 243, 243, 0.85);
  --shell-sidebar: 264px;
  --shell-toc: 200px;
  --shell-gap: 36px;
  --shell-sticky-top: 88px;

  /* ── Terminal / code chrome (dc.html isCode 블록) ── */
  --terminal-bg: #09110f;
  --terminal-fg: #e6e6e6;
  --terminal-dim: #9fa0a0;
  --terminal-sigil: #5ea885;
  --terminal-border: rgba(255, 255, 255, 0.09);

  /* ════════════════════════════════════════════════════════════
     Backward-compat aliases — 기존 moai-ds.css / -docs.css / -mascot.css
     가 참조하는 이름을 DS v2 값으로 매핑한다. 신규 코드는 위쪽 DS 이름을 쓸 것.
     ════════════════════════════════════════════════════════════ */

  /* surfaces */
  --color-canvas: var(--color-bg);
  --color-surface-soft: var(--neutral-100);
  --color-surface-card: var(--color-surface);
  --color-surface-sunken: var(--neutral-100);
  --color-surface-dark: var(--neutral-900);
  --color-surface-dark-elevated: var(--neutral-800);

  /* foreground roles */
  --color-body-strong: var(--color-ink);
  --color-body: var(--fg-2);
  --color-muted: var(--fg-3);
  --color-muted-soft: var(--neutral-400);
  --color-on-primary: #ffffff;
  --color-on-dark: var(--neutral-50);
  --color-on-dark-soft: var(--neutral-400);

  /* borders */
  --color-hairline: var(--border-1);
  --color-hairline-soft: var(--border-2);

  /* semantic aliases */
  --color-error: var(--color-danger);
  --color-accent-teal: var(--color-info);
  --color-accent-amber: var(--color-warning);

  /* hero band — DS v2는 시그니처 그린 단색 (그라디언트 남용 금지) */
  --hero-gradient: var(--gradient-signature);
  --hero-accent: #ffffff;

  /* 퇴역 토큰 — 픽셀 폰트/팝 그림자 제거(DS 원본에 없음).
     남은 참조가 깨지지 않도록 DS 값으로 중화한다.
     주의: --font-serif 는 더 이상 퇴역 토큰이 아니다(위 Type families에서
     MaruBuri로 정의). 여기서 다시 선언하면 나중 선언이 이겨 본문이 산세리프로
     되돌아간다 — 절대 되살리지 말 것. */
  --font-pixel: var(--font-sans);
  --border-w-pixel: 1px;
  --shadow-pop: var(--shadow-sm);
  --shadow-pop-lg: var(--shadow-md);
}

/* ── Base / semantic type styles ── */
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  background: var(--color-bg);
  letter-spacing: var(--tracking-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* DS 타입 스케일 — 굵기 대비가 핵심 (도입부 Regular, 키워드 Black) */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display-tight);
  color: var(--color-ink);
}

/* DS eyebrow: mono · 11~12 · 600 · uppercase · 0.1em */
.eyebrow {
  font: var(--fw-semibold) var(--text-xs) / 1 var(--font-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* 라틴 숫자·영문 지표는 Inter */
.latin, [lang="en"], .num {
  font-family: var(--font-latin);
}

::selection { background: rgba(61, 125, 95, 0.22); }

/* 포커스 링 — DS: 2px primary + 3px soft ring */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Breakpoint SSOT — 반응형 3-tier 기준점
   ════════════════════════════════════════════════════════════════════════
   CSS 명세상 @media 안에는 var() 를 직접 쓸 수 없다. 그래서 변수는 향후 SCSS
   전환 등을 대비한 문서용 SSOT로 두고, 실제 @media 에는 아래 리터럴 픽셀값을
   복사해 쓴다. 새로 짜는 미디어쿼리는 이 값들 중 하나를 쓴다(파편화 방지).

     sm (모바일)    : 720px    ← 폰. 표 가로스크롤 전환
     md (태블릿)   : 1024px    ← 세로 태블릿. 2단→1단 레이아웃 전환
     nav (드로어)  : 1080px    ← 사이드바 드로어 전환(gnav 브랜드폭에 맞춘 경험값)
     lg (데스크톱) : 1280px    ← 좁은 데스크톱. 본문 3단 셸 전환
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --bp-sm: 720px;
  --bp-md: 1024px;
  --bp-nav: 1080px;
  --bp-lg: 1280px;
}