/* ══════════════════════════════════════════════════════════════════════════
   더신스 툴즈 — 디자인 DNA (단일 출처)
   2026-08-13 제정

   🔴 이 파일이 툴즈 전체 디자인의 **원본**이다.
      색을 바꾸고 싶으면 여기만 고친다. 화면마다 색을 따로 적지 않는다.
      (그렇게 하면 화면마다 색이 갈리고, 실제로 갈려 있었다 — 파일 9곳에 각자 정의돼 있었다)

   쓰는 법 — 모든 화면(index.html · modules/*.html · engine/console.html)의
   </head> 바로 앞에 이 한 줄:
       <link rel="stylesheet" href="/config/dna.css">
   각 화면의 <style> 보다 **뒤에** 놓는다. 그래야 이 파일이 이긴다.

   ──────────────────────────────────────────────────────────────────────────
   원칙 하나 — UI 골격은 무채색, 색은 데이터와 상태에만.

   배경·메뉴·카드·글자는 흑백과 회색으로 둔다. 그래야 색이 나오는 순간
   "여기 의미가 있다"로 읽힌다. 색이 사방에 있으면 아무 데도 강조가 없는 것과 같다.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 바탕과 글자 ─────────────────────────────────────────── */
  --paper:#f6f6f7;      /* 화면 바탕 */
  --card:#fff;          /* 카드·표 바탕 */
  --surface:#fff;
  --ink:#0a0a0b;        /* 본문 글자 · 가장 진한 것 */
  --ink2:#57575c;       /* 보조 글자 */
  --ink3:#8d8d94;       /* 흐린 글자 · 라벨 */
  --grey:#c7c7cc;
  --line:#e7e7ea;       /* 테두리 */
  --hair:#e7e7ea;       /* 카드 테두리 */
  --hair2:#f1f1f3;      /* 표 안쪽 구분선 */
  --white:#fff;
  --sub:#57575c;        /* (구 모듈 호환) */
  --soft:#f6f6f7; --soft2:#f1f1f3;

  /* ── 뜻이 있는 색 — 데이터와 상태에만 쓴다 ────────────────── */
  --pos:#0055FF;        /* 긍정 · 상승 · 목표 달성 (더신스 코발트) */
  --pos-soft:#E9F0FF;
  --pos-deep:#0044CC;
  --neg:#D92D20;        /* 부정 · 하락 · 경고 */
  --neg-soft:#FDECEA;
  --ok:#0E9F6E;         /* 시스템 정상(연결·확정) — 판단이 아니라 '상태' */
  --ok-soft:#E7F6F0;

  /* 계열색 — 판매처·카테고리처럼 '순서는 있지만 좋고 나쁨은 없는' 값.
     블루 3단으로 시작해 그레이로 내려간다: 큰 것부터 눈에 들어오고 꼬리는 배경으로 물러난다. */
  --c1:#0055FF; --c2:#4C8DFF; --c3:#9CBEFF;
  --c4:#0A0A0B; --c5:#6E6E78; --c6:#C2C2C8;

  /* 구 모듈 호환 — 예전 이름으로 색을 부르던 화면이 자동으로 새 톤을 따르게 한다.
     ⚠️ 새 화면에서는 쓰지 말 것. --pos / --neg / --ok 를 쓴다. */
  --blue:#0055FF; --red:#D92D20; --green:#0E9F6E;
  --in-bg:#f6f6f7; --in-bd:#c7c7cc;
  --auto:#0E9F6E; --auto-bg:#E7F6F0;
  --blue-soft:#E9F0FF; --red-soft:#FDECEA;

  /* ── 모양 ────────────────────────────────────────────────── */
  --r:16px;             /* 카드 */
  --r-sm:11px;          /* 작은 카드·버튼 */
  --sh:0 1px 2px rgba(10,10,11,.05);
  --sh-lift:0 2px 4px rgba(10,10,11,.05),0 14px 34px rgba(10,10,11,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── 타이포 ──────────────────────────────────────────────────
   Pretendard 한 벌. 자간은 -0.025em(한글이 성기게 보이지 않는 값).
   숫자는 어디서나 tabular — 표에서 자릿수가 흔들리면 비교가 안 된다. */
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing:-0.025em;
  background:var(--paper);
  color:var(--ink);
}
.num,table td,table th{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── 증감 표시 ───────────────────────────────────────────────
   색만으로 읽게 두지 않는다 — 화살표를 함께 둔다(색맹 접근성). */
.chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:7px;
  font-size:11px;font-weight:800}
.chip.up{background:var(--pos-soft);color:var(--pos)}
.chip.dn{background:var(--neg-soft);color:var(--neg)}
.chip.fl{background:#f1f1f3;color:var(--ink3)}

/* ── 카드 ──────────────────────────────────────────────────── */
.dna-card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:19px 20px 16px}

/* ── 표 ────────────────────────────────────────────────────
   숫자는 오른쪽, 이름은 왼쪽. 머리글은 작게 흐리게 — 값이 주인공이다. */
.dna-table{width:100%;border-collapse:collapse;font-size:12.5px}
.dna-table th{text-align:right;font-size:10.5px;color:var(--ink3);font-weight:800;
  letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.dna-table th:first-child,.dna-table td:first-child{text-align:left}
.dna-table td{padding:10px;border-bottom:1px solid var(--hair2);text-align:right}
.dna-table tbody tr{transition:background .16s}
.dna-table tbody tr:hover{background:var(--paper)}

/* ══════════════════════════════════════════════════════════════════════════
   데이터 시각화 규칙 — 그림이 거짓말하지 않게

   ① 그래픽은 그 카드의 숫자를 설명해야 한다. 뜻을 한 줄로 못 쓰겠으면 장식이니 넣지 않는다.
   ② 설명문 대신 **축에 값을 적는다**. 설명은 읽고 해석하는 단계가 하나 더 붙는다.
   ③ 비율은 100칸 와플로. '19.8%' 보다 '100건 중 20건' 이 몸에 와닿는다.
   ④ 구성비는 원그래프. 가로 스택 막대는 전체 대비 비중이 덜 읽힌다.
   ⑤ 순위는 **상위권 안에서** 비교한다. 상품이 500개면 1등도 몇 %일 뿐이라
      '전체 100%' 는 비교 기준이 될 수 없다(3위가 바닥에 붙어 보인다).
   ⑥ 없는 값은 '—' 로 둔다. 0 으로 채우거나 다른 값에서 지어내지 않는다.
   ⑦ 차이가 거의 없으면(최대 대비 8% 미만) 색을 나누지 않는다. 없는 차이를 그리지 않는다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 움직임 — 모션은 '지금 보고 있는 한 곳'에만. 여러 곳이 동시에 움직이면 어디를 볼지 알 수 없다.
   숫자 카운트업(1회) · 차트 호버 · 카드 리프트, 이 셋이 전부다. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
