/*
 * 이트라이브 작업 디자인 시스템 v0.15 · 기초 토큰 (tokens.css)
 *
 * 층: 원색(--et-c-*) → 브랜드 층(--et-b-*) → 역할(--et-*) → 부품.
 * 프로젝트 테마(themes.css, make_theme.py가 themes/*.json에서 만듦)는 브랜드 층과 바탕 역할만 덮어쓴다.
 * 그래서 프로젝트가 색 · 바탕 톤 · 제목 글꼴 · 모서리 · 무늬를 바꿔도 부품과 규칙, 라이트 · 다크는 그대로 맞는다.
 * 불러오는 순서: fonts.css → tokens.css → themes.css → 쓰임새 CSS. 프로젝트는 <html data-project="슬러그">로 고른다.
 *
 * 색 값(hex)은 이 파일과 themes.css에만 쓴다. 다른 CSS와 HTML은 var(--et-*)와 아래 공통 클래스만 쓴다.
 * 그라데이션 · 빛 번짐은 쓰지 않는다. 브랜드 색은 단색 하나다.
 * 값의 출처: 브랜드 레드는 로고 심볼 원본 벡터(brand/logo/etribe_symbol.svg)의 레드 #DA2128이다
 *   나머지 값은 이 시스템의 값이다.
 *   - 이트라이브 레드 #DA2128(흰 글자 4.97:1) · 진한 레드 #C01D23(작은 빨강 글자 · 누름, 레드에 검정 12%) · 밝은 레드 #E44A50(어두운 바탕 글자)
 *   - 무채색: 잉크 #090909 · #383D44 · #555B63 · #9AA1AB, 캔버스 #F5F6F8, 선 #E7EAEF · #DBE0E7 · #C4CAD3, 입력 선 #878E98
 *   - 다크: 바탕 #090909 · 면 #191919 · 글자 #FFFFFF · #D0D6E0 · #8A8F98
 *   - 상태: 성공 #059669 · 주의 #B45309 · 오류 #DC2626 · 정보 #2563EB, 글자는 같은 색의 진한 단
 *     (주의 점은 #D97706이 회색 바탕 위 2.95:1이라 한 단 진하게. 브랜드 빨강을 오류 뜻으로 쓰지 않는다)
 * 대비 확인: python -X utf8 check_design.py --contrast (이트라이브 기본과 모든 프로젝트 테마)
 */

/* 1. 원색. 화면에서 직접 쓰지 않고 아래 역할 토큰을 거쳐 쓴다. */
:root {
  --et-c-white: #ffffff;
  --et-c-ink: #090909;
  /* 차가운 회색 */
  --et-c-gray-50: #f5f6f8;
  --et-c-gray-100: #e7eaef;
  --et-c-gray-150: #e2e6ec;
  --et-c-gray-200: #dbe0e7;
  --et-c-gray-300: #c4cad3;
  --et-c-gray-400: #9aa1ab;
  --et-c-gray-500: #878e98;
  --et-c-gray-600: #555b63;
  --et-c-gray-700: #383d44;
  /* 다크 */
  --et-c-dk-50: #111514;
  --et-c-dk-100: #191919;
  --et-c-dk-200: #262626;
  --et-c-dk-300: #3a3f46;
  --et-c-dk-400: #62666d;
  --et-c-dk-500: #6b7079;
  --et-c-dk-600: #8a8f98;
  --et-c-dk-700: #d0d6e0;

  /* 이트라이브 레드(로고 심볼의 레드). 진한 레드는 검정 12%, 밝은 레드는 같은 색조로 밝힘.
     옅은 면 · 선은 레드를 흰 바탕에 12% · 40%, 다크 바탕에 16% · 45% 겹친 값 */
  --et-c-red: #da2128;
  --et-c-red-strong: #c01d23;
  --et-c-red-bright: #e44a50;
  --et-c-red-tint: #fbe4e5;
  --et-c-red-line: #f0a6a9;
  --et-c-red-tint-dk: #2a0d0e;
  --et-c-red-line-dk: #671417;
  --et-c-rose: #ee9b9e;

  /* 상태(뜻 전용). 점 · 글자 · 다크 */
  --et-c-blue: #1d4ed8;
  --et-c-blue-dot: #2563eb;
  --et-c-blue-dark: #60a5fa;
  --et-c-amber: #92400e;
  --et-c-amber-dot: #b45309;
  --et-c-amber-dark: #fbbf24;
  --et-c-error: #b91c1c;
  --et-c-error-dot: #dc2626;
  --et-c-error-dark: #f87171;
  --et-c-green: #047857;
  --et-c-green-dot: #059669;
  --et-c-green-dark: #34d399;

  /* 2. 글자. 제목 글꼴(--et-font-display)은 프로젝트 테마가 바꿀 수 있다 */
  --et-font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --et-font-display: var(--et-font);
  --et-font-mono: "D2Coding", Consolas, "Courier New", monospace;
  --et-track-body: -0.01em;
  --et-track-head: -0.025em;
  --et-track-display: -0.035em;

  /* 3. 간격 (4px 단위. 이름의 숫자 × 4px) */
  --et-space-1: 4px;
  --et-space-2: 8px;
  --et-space-3: 12px;
  --et-space-4: 16px;
  --et-space-5: 20px;
  --et-space-6: 24px;
  --et-space-8: 32px;
  --et-space-10: 40px;
  --et-space-12: 48px;
  --et-space-16: 64px;
  --et-space-20: 80px;
  --et-space-24: 96px;
  --et-space-32: 128px;

  /* 4. 모서리 · 움직임. --et-r-1 · --et-r-2는 프로젝트 테마가 바꿀 수 있다 */
  --et-r-0: 0;
  --et-r-1: 4px;
  --et-r-2: 8px;
  --et-r-dot: 999px;
  --et-dur-fast: 120ms;
  --et-dur: 200ms;
  --et-ease: cubic-bezier(0.2, 0, 0, 1);

  /* 4-2. 글자 단계: 화면 · 웹 · 문서가 같이 쓴다. 덱은 1920px 장 기준이라 deck.css가 따로 키운다 */
  --et-fs-display: 64px;
  --et-fs-h1: 40px;
  --et-fs-h2: 32px;
  --et-fs-h3: 24px;
  --et-fs-h4: 20px;
  --et-fs-lead: 18px;
  --et-fs-body: 16px;
  --et-fs-sm: 14px;
  --et-fs-caption: 13px;
  --et-lh-tight: 1.15;
  --et-lh-head: 1.3;
  --et-lh-body: 1.6;

  /* 4-3. 레이아웃: 폭과 겹침 순서. 화면 폭 구간은 768px(태블릿) · 1280px(데스크톱) */
  --et-container: 1200px;
  --et-container-doc: 720px;
  --et-z-nav: 50;
  --et-z-overlay: 100;
  --et-z-toast: 200;

  /* 4-4. 브랜드 층 · 모드와 상관없는 값(이트라이브 기본 = 이트라이브 레드 단색). 프로젝트 테마가 덮어쓴다 */
  --et-b-fill: var(--et-c-red);
  --et-b-fill-strong: var(--et-c-red-strong);
  --et-b-on-fill: var(--et-c-white);
  /* 표지 · 히어로 · 구간 표지 면(.et-brand-field). 프로젝트는 먹색 면으로 바꿀 수 있다 */
  --et-b-field: var(--et-c-red);
  --et-b-on-field: var(--et-c-white);
  --et-b-on-field-rgb: 255 255 255;
  --et-b-field-accent: var(--et-c-white);
  --et-b-field-text: var(--et-c-red-strong);
  --et-b-field-em: var(--et-c-ink);
  --et-rings-display: block;
  --et-symbol-display: block;
}

/* 5. 역할 · 밝은 바탕(기본) */
:root,
.et-light {
  color-scheme: light;
  --et-bg: var(--et-c-white);
  --et-surface: var(--et-c-white);
  --et-bg-2: var(--et-c-gray-50);
  --et-bg-3: var(--et-c-gray-150);
  --et-stage: var(--et-c-gray-100);
  /* 앱 캔버스(회색 바닥)와 중첩 인셋(칩 · 세 칸 고르기 홈 · 코드) */
  --et-canvas: var(--et-c-gray-50);
  --et-inset: rgba(71, 85, 105, 0.1);
  /* 카드 면은 선이 아니라 바닥과 다른 면으로 선다. --et-card는 흰 종이 위(회색 면),
     --et-card-raised는 회색 바닥 위(흰 면). 회색 바닥인 앱 본문 · 옅은 구간이 --et-card를 --et-card-raised로 바꾼다 */
  --et-card: var(--et-c-gray-50);
  --et-card-raised: var(--et-c-white);
  --et-line: var(--et-c-gray-100);
  --et-line-input: var(--et-c-gray-500);
  --et-line-strong: var(--et-c-ink);
  --et-text: var(--et-c-ink);
  --et-text-2: var(--et-c-gray-700);
  --et-text-3: var(--et-c-gray-600);
  --et-text-off: var(--et-c-gray-400);
  --et-strong: var(--et-c-ink);
  --et-on-strong: var(--et-c-white);
  --et-bar-soft: var(--et-c-gray-300);
  --et-focus: var(--et-c-ink);
  --et-overlay: rgba(9, 9, 9, 0.5);
  --et-shadow-overlay: 0 12px 32px rgba(9, 9, 9, 0.14);
  --et-shadow-sm: 0 1px 2px rgba(9, 9, 9, 0.06);
  --et-shadow-md: 0 4px 12px rgba(9, 9, 9, 0.08);
  --et-shadow-lg: 0 12px 32px rgba(9, 9, 9, 0.14);
  --et-head-bg: var(--et-c-gray-50);
  --et-head-text: var(--et-c-ink);
  --et-band-text: var(--et-c-ink);
  --et-chart-2: var(--et-c-ink);
  --et-chart-3: var(--et-c-gray-400);
  --et-chart-4: var(--et-c-gray-300);

  /* 브랜드 층 · 밝은 바탕 값 */
  --et-b-accent: var(--et-c-red);
  --et-b-text: var(--et-c-red-strong);
  --et-b-tint: var(--et-c-red-tint);
  --et-b-line: var(--et-c-red-line);
  --et-b-on-strong: var(--et-c-red-bright);
  --et-b-band-bg: var(--et-c-red-tint);
  --et-b-band-em: var(--et-c-red-strong);
  --et-b-chart-5: var(--et-c-rose);
  --et-b-primary: var(--et-c-red);
  --et-b-primary-hover: var(--et-c-red-strong);
  --et-b-primary-text: var(--et-c-white);

  --et-status-idle: var(--et-c-gray-500);
  --et-status-idle-text: var(--et-c-gray-600);
  --et-status-progress: var(--et-c-blue-dot);
  --et-status-progress-text: var(--et-c-blue);
  --et-status-check: var(--et-c-amber-dot);
  --et-status-check-text: var(--et-c-amber);
  --et-status-problem: var(--et-c-error-dot);
  --et-status-problem-text: var(--et-c-error);
  --et-status-done: var(--et-c-green-dot);
  --et-status-done-text: var(--et-c-green);
}

/* 6. 역할 · 어두운 바탕. html[data-theme="dark"] 또는 한 구간(.et-dark)에만 적용 */
[data-theme="dark"],
.et-dark {
  color-scheme: dark;
  --et-bg: var(--et-c-ink);
  --et-surface: var(--et-c-dk-100);
  --et-bg-2: var(--et-c-dk-50);
  --et-bg-3: var(--et-c-dk-200);
  --et-stage: var(--et-c-dk-50);
  --et-line: var(--et-c-dk-200);
  --et-canvas: var(--et-c-ink);
  --et-inset: rgba(255, 255, 255, 0.06);
  --et-card: var(--et-c-dk-100);
  --et-card-raised: var(--et-c-dk-100);
  --et-line-input: var(--et-c-dk-500);
  --et-line-strong: var(--et-c-white);
  --et-text: var(--et-c-white);
  --et-text-2: var(--et-c-dk-700);
  --et-text-3: var(--et-c-dk-600);
  --et-text-off: var(--et-c-dk-400);
  --et-strong: var(--et-c-white);
  --et-on-strong: var(--et-c-ink);
  --et-bar-soft: var(--et-c-dk-300);
  --et-focus: var(--et-c-white);
  --et-overlay: rgba(0, 0, 0, 0.6);
  --et-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5);
  --et-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --et-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --et-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --et-head-bg: var(--et-c-dk-200);
  --et-head-text: var(--et-c-white);
  --et-band-text: var(--et-c-white);
  --et-chart-2: var(--et-c-white);
  --et-chart-3: var(--et-c-dk-600);
  --et-chart-4: var(--et-c-dk-300);

  /* 브랜드 층 · 어두운 바탕 값 */
  --et-b-accent: var(--et-c-red);
  --et-b-text: var(--et-c-red-bright);
  --et-b-tint: var(--et-c-red-tint-dk);
  --et-b-line: var(--et-c-red-line-dk);
  --et-b-on-strong: var(--et-c-red-strong);
  --et-b-band-bg: var(--et-c-red-tint-dk);
  --et-b-band-em: var(--et-c-red-bright);
  --et-b-chart-5: var(--et-c-rose);
  --et-b-primary: var(--et-c-red);
  --et-b-primary-hover: var(--et-c-red-strong);
  --et-b-primary-text: var(--et-c-white);

  --et-status-idle: var(--et-c-dk-600);
  --et-status-idle-text: var(--et-c-dk-600);
  --et-status-progress: var(--et-c-blue-dark);
  --et-status-progress-text: var(--et-c-blue-dark);
  --et-status-check: var(--et-c-amber-dark);
  --et-status-check-text: var(--et-c-amber-dark);
  --et-status-problem: var(--et-c-error-dark);
  --et-status-problem-text: var(--et-c-error-dark);
  --et-status-done: var(--et-c-green-dark);
  --et-status-done-text: var(--et-c-green-dark);
}

/* 6-1. 브랜드 층에서 만드는 역할. 바탕 · 테마 · 프로젝트가 바뀌는 자리마다 다시 계산해야 해서 그 선택자를 모두 단다 */
:root,
.et-light,
.et-dark,
[data-theme],
[data-project] {
  --et-accent: var(--et-b-accent);
  --et-accent-text: var(--et-b-text);
  --et-accent-tint: var(--et-b-tint);
  --et-accent-line: var(--et-b-line);
  --et-accent-on-strong: var(--et-b-on-strong);
  --et-brand-fill: var(--et-b-fill);
  --et-brand-fill-strong: var(--et-b-fill-strong);
  --et-on-brand: var(--et-b-on-fill);
  --et-field-bg: var(--et-b-field);
  --et-primary-bg: var(--et-b-primary);
  --et-primary-hover: var(--et-b-primary-hover);
  --et-primary-text: var(--et-b-primary-text);
  --et-band-bg: var(--et-b-band-bg);
  --et-band-em: var(--et-b-band-em);
  --et-chart-1: var(--et-b-accent);
  --et-chart-5: var(--et-b-chart-5);
}

/* 6-2. 역할 · 브랜드 면(.et-brand-field). 표지 · 히어로 · 구간 표지 · 주요 칸에 건다.
   바탕은 브랜드 단색 면(이트라이브는 이트라이브 레드, 프로젝트에 따라 먹색 면), 안의 글자 · 선 · 로고는 면 위 글자색 */
.et-brand-field {
  --et-bg: rgb(var(--et-b-on-field-rgb) / 0.1);
  --et-surface: rgb(var(--et-b-on-field-rgb) / 0.1);
  --et-bg-2: rgb(var(--et-b-on-field-rgb) / 0.12);
  --et-bg-3: rgb(var(--et-b-on-field-rgb) / 0.2);
  --et-line: rgb(var(--et-b-on-field-rgb) / 0.34);
  --et-line-input: rgb(var(--et-b-on-field-rgb) / 0.6);
  --et-line-strong: var(--et-b-on-field);
  --et-text: var(--et-b-on-field);
  --et-text-2: var(--et-b-on-field);
  --et-text-3: var(--et-b-on-field);
  --et-strong: var(--et-b-on-field);
  --et-on-strong: var(--et-b-field-text);
  --et-accent: var(--et-b-field-accent);
  --et-accent-text: var(--et-b-field-accent);
  --et-accent-tint: rgb(var(--et-b-on-field-rgb) / 0.14);
  --et-accent-line: rgb(var(--et-b-on-field-rgb) / 0.6);
  --et-accent-on-strong: var(--et-b-field-em);
  --et-brand-fill: var(--et-b-on-field);
  --et-brand-fill-strong: var(--et-b-on-field);
  --et-on-brand: var(--et-b-field-text);
  --et-primary-bg: var(--et-b-on-field);
  --et-primary-hover: var(--et-b-on-field);
  --et-primary-text: var(--et-b-field-text);
  --et-bar-soft: rgb(var(--et-b-on-field-rgb) / 0.4);
  --et-focus: var(--et-b-on-field);
  --et-head-bg: var(--et-b-on-field);
  --et-head-text: var(--et-b-field-text);
  --et-band-bg: var(--et-b-on-field);
  --et-band-text: var(--et-b-field-text);
  --et-band-em: var(--et-b-field-em);
  --et-card: var(--et-bg-2);
  --et-card-raised: var(--et-bg-2);
  --et-inset: rgb(var(--et-b-on-field-rgb) / 0.14);
}
/* 브랜드 면 바탕: 카드 · 패널 · 칸처럼 바탕을 정하는 부품에 걸어도 이기도록 클래스를 두 번 쓴다 */
.et-brand-field.et-brand-field { background: var(--et-b-field); color: var(--et-text); }

/* 7. 모든 쓰임새 공통 · 상태 도트, 레드 강조, 숫자, 제목 글꼴 */
.et-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--et-r-dot);
  background: var(--et-status-idle);
  flex: none;
  vertical-align: 0.1em;
}
.et-dot--progress { background: var(--et-status-progress); }
.et-dot--check { background: var(--et-status-check); }
.et-dot--problem { background: var(--et-status-problem); }
.et-dot--done { background: var(--et-status-done); }
.et-status {
  display: inline-flex;
  align-items: center;
  gap: var(--et-space-2);
  white-space: nowrap;
}
.et-em { color: var(--et-accent-text); }
.et-mono-img { filter: grayscale(1); }
.et-num { font-variant-numeric: tabular-nums; }
/* 제목과 큰 숫자는 제목 글꼴(--et-font-display). 이트라이브 기본은 Pretendard, 프로젝트 테마가 명조 등으로 바꾼다 */
:is(h1, .et-doc h2, .et-title, .et-cover__title, .et-statement, .et-closing__msg, .et-section__a, .et-hero__title,
    .et-section__title, .et-cta__title, .et-pagehead h1, .et-kpi__value, .et-figure__value, .et-stat__value,
    .m-num__value, .m-big__value, .et-wordmark) {
  font-family: var(--et-font-display);
}

/* 8. 브랜드 표현. 브랜드 색은 단색 하나다. 표지 · 구간 표지 면(.et-brand-field), 제목 핵심어 하나(.et-em),
   번호 원 · 꼬리표 · 고른 칸 같은 표식, 주요 행동 하나에 쓰고, 한 화면에서 포인트가 될 만큼만 쓴다 */
/* 꼬리표: 기본은 분류 이름(가는 선). --brand는 브랜드 옅은 면 + 진한 브랜드 글자, --solid는 브랜드 면 + 흰 글자, --ink는 검정 면 */
.et-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.26em 0.86em;
  border: 1px solid var(--et-line);
  border-radius: var(--et-r-dot);
  background: transparent;
  color: var(--et-text-2);
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.et-tag--brand { border-color: var(--et-accent-line); background: var(--et-accent-tint); color: var(--et-accent-text); font-weight: 700; }
.et-tag--solid { border-color: transparent; background: var(--et-brand-fill); color: var(--et-on-brand); font-weight: 700; }
.et-tag--ink { border-color: transparent; background: var(--et-strong); color: var(--et-on-strong); font-weight: 700; }
/* 번호 원: 흐름 · 단계 · 그림 속 표식 */
.et-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: var(--et-r-dot);
  background: var(--et-brand-fill);
  color: var(--et-on-brand);
  font-size: 0.78em;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex: none;
}
/* 동심원 선: 회사 양식 표지의 모티프. 프로젝트 테마가 끌 수 있다(--et-rings-display). 놓는 자리와 크기는 쓰임새 CSS가 정한다 */
.et-rings { display: var(--et-rings-display); color: var(--et-text); opacity: 0.28; pointer-events: none; }
.et-rings circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.et-rings .et-rings__dot { fill: currentColor; stroke: none; }
/* 회사 심볼: 원래 그림(brand/logo/etribe_symbol.svg) 그대로, 흰 면이나 회색 바탕에서만 쓴다. 색을 바꾸지 않는다.
   어두운 바탕과 브랜드 면에서는 저절로 숨는다. 크기는 --et-symbol-size. 이트라이브 표식이라 제품 테마는 끌 수 있다 */
.et-symbol { display: var(--et-symbol-display); width: var(--et-symbol-size, 440px); height: var(--et-symbol-size, 440px); flex: none; }
.et-symbol img { display: block; width: 100%; height: 100%; }
:is([data-theme="dark"], .et-dark, .et-brand-field) .et-symbol { display: none; }
.et-light .et-symbol { display: var(--et-symbol-display); }
/* 글자 로고: 로고 파일이 없는 프로젝트의 이름 표기. 점은 브랜드 색 한 점 */
.et-wordmark { display: inline-flex; align-items: center; gap: 0.32em; color: var(--et-text); font-weight: 800; letter-spacing: var(--et-track-head); line-height: 1; white-space: nowrap; }
.et-wordmark__dot { width: 0.5em; height: 0.5em; border-radius: var(--et-r-dot); background: var(--et-accent); flex: none; }
.et-endorse { display: inline-flex; align-items: center; gap: 0.4em; color: var(--et-text-3); font-size: 0.78em; font-weight: 600; white-space: nowrap; }
.et-endorse .et-logo { height: 0.95em; width: auto; }

/* 로고: 밝은 바탕용(검정)·어두운 바탕용(흰색) 두 장을 함께 넣고 바탕에 맞는 한 장만 보인다 */
.et-logo--on-dark { display: none; }
:is([data-theme="dark"], .et-dark, .et-brand-field) .et-logo--on-light { display: none; }
:is([data-theme="dark"], .et-dark, .et-brand-field) .et-logo--on-dark { display: block; }
.et-light .et-logo--on-light { display: block; }
.et-light .et-logo--on-dark { display: none; }