/*
 * moa — 디자인 토큰 (정본). 방향 A "괘선 원장" — _design/DESIGN.md 가 이 파일의 설명서다.
 * 이름은 Tailwind 4 @theme 이름공간이다. 정적 사이트라 :root 에 싣고, 승급 때 블록째 @theme 로 옮긴다.
 * style.css 는 여기 있는 var() 만 쓴다 — raw 색을 쓰지 않는다.
 */
:root {
  color-scheme: light;

  /* ── 색 — 바탕 ─────────────────────────────────────────────
   * 순백이다. 종이색(따뜻한 흰색)은 쿼터 초과로 금지(브리프) — 채도 0. */
  --color-bg: #ffffff;
  --color-band: #f3f4f6; /* 띠 — 꼬리·요약 상자·줄 hover·댓글 표현 상자 */
  --color-plate: #eceef1; /* 자리표시자 바탕 */
  --color-inverse-bg: #15171a; /* 검색 버튼·현재 페이지 번호 — 잉크를 바탕으로 쓸 때 */
  --color-up-bg: #fbeee9; /* 오름 칩 바탕(새·할인율) — 넓게 칠하지 않는다 */
  --color-down-bg: #eaf1fb; /* 내림 칩 바탕 */

  /* ── 색 — 글자 ──────────────────────────────────────────────
   * 잉크는 순흑이 아니다(렌즈: 목탄). 보조 글은 13px 에서도 AA 를 넘는 두 단계뿐. */
  --color-ink: #15171a;
  --color-ink-muted: #5b6068; /* 매체·시각·캡션·보조 — 흰 6.33 · 띠 5.75 */
  --color-ink-subtle: #6b7079; /* 검색창 예시 질의 — 흰 바탕에서만 (4.98) */
  --color-inverse-ink: #ffffff; /* 잉크 바탕 위 글자 */

  /* ── 색 — 뜻 ───────────────────────────────────────────────
   * 한국 증시 관례를 팔레트 규칙으로 올렸다: 오름 = 주홍, 내림 = 청.
   * 주홍은 오름·급상승·"지금"·현재 탭에만, 청은 내림에만. 링크는 잉크다(파랑 = 내림). 색만으로 말하지 않는다 — ▲▼ 를 붙인다. */
  --color-accent: #be390c;
  --color-down: #1d5fc4;
  --color-up: var(--color-accent);
  --color-live: var(--color-accent);
  --color-current: var(--color-accent);

  /* ── 색 — 선 ───────────────────────────────────────────────*/
  --color-rule: #e3e6ea; /* 줄 괘선 1px — 장식이 아니라 줄의 경계 */
  --color-rule-strong: #b6bbc2; /* 자리표시자 점선 */
  --color-rule-head: var(--color-ink); /* 머리 줄 위 2px */
  --color-focus: #15171a;

  /* ── 서체 — 한 가족 ─────────────────────────────────────────
   * IBM Plex Sans KR 400·700 (서가에 둘만 있다). 숫자는 기본으로 고정폭(0.6em, 실측) — tnum 기능이 조각에 없어도 줄 선다. */
  --font-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-num: var(--font-sans);
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* ── 글자 크기 — 여덟 단계, 굵기 둘 ─────────────────────────
   * 줄 높이(32px) 안에서 글자의 행간은 따로 둔다: 목록 글자 15/22 가 32 줄 가운데에 선다. */
  --text-meta: 0.8125rem; /* 13 — 매체·시각·캡션·순위 변동. 이보다 작은 글자는 없다 */
  --text-meta--line-height: 1.25rem;
  --text-ui: 0.875rem; /* 14 — 탭·머리 줄 제목·서비스 색인·많이 찾는 검색어 */
  --text-ui--line-height: 1.25rem;
  --text-list: 0.9375rem; /* 15 — 헤드라인 줄·급상승·증시 줄 */
  --text-list--line-height: 1.375rem;
  --text-result: 1.0625rem; /* 17 — 검색 결과 제목 */
  --text-result--line-height: 1.5rem;
  --text-lead: 1.125rem; /* 18 — 홈 리드 제목·기사 부제 */
  --text-lead--line-height: 1.625rem;
  --text-search: 1.375rem; /* 22 — 검색창 글자 */
  --text-search--line-height: 1.75rem;
  --text-figure: 1.75rem; /* 28 — 워드마크·날씨 기온 */
  --text-figure--line-height: 2rem;
  --text-title: 2rem; /* 32 — 기사 제목·소개 제목 (모바일은 --text-title-sm) */
  --text-title--line-height: 1.3;
  --text-title--letter-spacing: -0.01em;
  --text-title-sm: 1.625rem; /* 26 */
  --text-title-sm--line-height: 1.35;

  /* 기사 본문 — 글자 크기 3단(표현) 의 가운데가 기본값 */
  --text-body: 1.0625rem; /* 17 */
  --text-body--line-height: 1.8;
  --text-body-sm: 1rem; /* 16 */
  --text-body-lg: 1.1875rem; /* 19 — 본문 소제목도 이 크기 700 */

  /* ── 간격 — 줄이 단위다 ─────────────────────────────────────*/
  --spacing: 0.25rem; /* 4 — 기본 척도(Tailwind 4) */
  --spacing-row: 2rem; /* 32 — 모든 목록·머리·위젯 줄. 블록 높이 = 이 값의 배수 */
  --spacing-row-touch: 2.75rem; /* 44 — 모바일 목록 줄 최소 높이 */
  --spacing-cell: 0.75rem; /* 12 — 칸 안쪽 좌우. 열 거터는 0 (괘선이 이어지게) */
  --spacing-band: 4rem; /* 64 = 2줄 — 큰 띠 사이 */
  --spacing-page: 75rem; /* 1200 — 컨테이너 */
  --spacing-page-pad-t: 1.5rem; /* 24 — 태블릿 좌우 */
  --spacing-page-pad-m: 1rem; /* 16 — 모바일 좌우 */
  --spacing-measure: 42.5rem; /* 680 — 기사 본문 폭 (17px 로 한 줄 ≈ 40자) */
  --spacing-search: 45rem; /* 720 — 홈 검색창 폭 */
  --spacing-search-h: 3.75rem; /* 60 — 홈 검색창 높이 (한 화면에서 가장 큰 물건) */
  --spacing-search-h-sm: 2.75rem; /* 44 — 머리의 소형 검색창 */
  --spacing-thumb-lead: 4rem; /* 64 = 2줄 — 홈 리드 썸네일 */

  /* ── 모서리 — 둥글리지 않는다 ───────────────────────────────*/
  --radius-none: 0;
  --radius-xs: 0.125rem; /* 2 — 검색창·버튼·kbd·페이지 번호·칩. 카드가 없으니 그 이상은 없다 */

  /* ── 그림자 — 없다. 대신 inset 선을 그림자로 그려 줄 높이를 지킨다 ─*/
  --shadow-none: none;
  --shadow-head: inset 0 2px 0 var(--color-rule-head); /* 머리 줄 위 2px 잉크 — 높이 32 를 바꾸지 않는다 */
  --shadow-row: inset 0 -1px 0 var(--color-rule); /* 줄 아래 1px 괘선 */
  --shadow-current: inset 0 -2px 0 var(--color-current); /* 현재 탭 밑줄 */
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

  /* ── 모션 — 거의 없다 ───────────────────────────────────────
   * 길이는 120(hover 바탕·목록 Crossfade) · 160(순위·날씨 Crossfade) · 200(탭 밑줄·Accordion) 셋뿐. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --default-transition-duration: 120ms;
  --default-transition-timing-function: var(--ease-out);
  --animate-live: live-pulse 2s var(--ease-in-out) infinite; /* 실시간 점 — 이 템플릿의 유일한 반복 모션 */

  /* ── 구간 (문서용 — CSS 변수는 미디어 쿼리에 못 쓴다. style.css 는 같은 값을 적는다) ─*/
  --breakpoint-md: 48rem; /* 768 */
  --breakpoint-xl: 80rem; /* 1280 */
}

@keyframes live-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}