/* ══════════════════════════════════════════════════════════════════
   sogero 디자인 토큰 — 1단계 (정의)
   2026-08-21

   왜 만드는가
     우리 파일 47개에 고유 HEX 가 545종 흩어져 있다. 그중 상위 28색이
     전체의 49% 밖에 안 되니, 나머지는 거의 같은 색의 미세한 변주다.
     회색만 #888 · #aaa · #555 · #333 · #666 · #999 · #8b949e · #9ca3af ·
     #8a8f99 · #6b7280 열 종이 같은 역할을 하고 있고, 민트도 #2ca89a 와
     #24a5aa 두 종이 섞여 있다. 화면을 훑을 때 생기는 미세한 대비 차이가
     피로를 만든다.

   눈 피로를 줄이려고 지킨 것
     1. 순백(#fff)을 지면에서 뺀다. 지금 232곳에 쓰였는데, 대형 면적의
        최대 휘도라 밝은 곳에서 눈부시다. 지면 휘도를 1.000 → 0.921 로
        낮췄다. 카드만 살짝 밝게(0.974) 띄워 층을 만든다.
     2. 순흑을 쓰지 않는다. 본문 잉크는 #2A2721, 지면 대비 13.8:1.
        21:1(순흑/순백)은 필요 이상으로 강해 잔상이 남는다.
     3. 회색을 3단(ink · ink-2 · ink-3)으로 고정한다.
     4. 큰 면적에 고채도를 쓰지 않는다. 채도는 의미색에만 허용한다.
     5. 액센트는 하나. 남색 #2C3A5C.

   대비비 (WCAG, 지면 #F7F6F2 기준 · 실측)
     ink 13.77 AAA · ink-2 7.38 AAA · ink-3 4.55 AA
     accent 10.40 AAA · up 5.72 AA · down 5.97 AA · warn 5.11 AA · danger 6.99 AA
     액센트 위 흰 글자 10.97 AAA

   이 파일은 "정의"만 한다. 기존 화면에 연결하지 않는다.
   연결은 2단계다. 적용 후 화면이 크게 달라 보이면 오히려 이상 신호다.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── 지면 · 면 ─────────────────────────────────────────── */
  --s-bg:          #F7F6F2;   /* 본 지면. 순백 아님 */
  --s-surface:     #FDFCFA;   /* 카드 · 모달 */
  --s-surface-2:   #EFEDE6;   /* 구역 구분 · 표 머리글 */
  --s-surface-3:   #E4E1D7;   /* 눌린 상태 · 트랙 */
  --s-line:        #DFDCD2;   /* 기본 경계선 */
  --s-line-2:      #C9C5B8;   /* 강한 경계선 · 입력칸 */

  /* ── 글자 ──────────────────────────────────────────────── */
  --s-ink:         #2A2721;   /* 본문 */
  --s-ink-2:       #55504A;   /* 보조 본문 · 라벨 */
  --s-ink-3:       #767063;   /* 약한 텍스트 · 단위 · 각주 */
  --s-on-accent:   #FDFCFA;   /* 액센트 위 글자 */

  /* ── 액센트 (하나만) ───────────────────────────────────── */
  --s-accent:      #2C3A5C;
  --s-accent-hov:  #223050;
  --s-accent-bg:   #E3E6EE;   /* 선택 상태 배경 */

  /* ── 의미색 ────────────────────────────────────────────── */
  --s-up:          #A6402F;   /* 상승 (국내 관행: 상승 적색) */
  --s-up-bg:       #F7E7E2;
  --s-down:        #2F5F9E;   /* 하락 */
  --s-down-bg:     #E4EBF5;
  --s-warn:        #8A6114;
  --s-warn-bg:     #F4EBD6;
  --s-danger:      #98301F;   /* 되돌릴 수 없는 동작 */
  --s-danger-bg:   #F6E3DE;
  --s-ok:          #2C3A5C;   /* 정상 = 액센트와 동일. 초록을 따로 쓰지 않는다 */

  /* ── 등급 램프 (마블링) ────────────────────────────────── */
  /* 1++ 가 가장 진하고 3 으로 갈수록 옅어진다. 등급 = 마블링이므로
     색이 의미를 갖는다. 어느 화면에서나 이 한 벌만 쓴다. */
  --s-g1:          #6E4A16;   /* 1++ */
  --s-g2:          #8A6524;   /* 1+  */
  --s-g3:          #BC9550;   /* 1   */
  --s-g4:          #DAC08D;   /* 2   */
  --s-g5:          #EEE3C9;   /* 3   */
  --s-on-g1:       #FDFCFA;
  --s-on-g2:       #FDFCFA;
  --s-on-g3:       #2A2721;
  --s-on-g4:       #2A2721;
  --s-on-g5:       #2A2721;

  /* ── 규격 ──────────────────────────────────────────────── */
  --s-r-sm:        4px;
  --s-r:           7px;
  --s-r-lg:        10px;
  --s-shadow:      0 1px 2px rgba(42,39,33,.05), 0 8px 22px -14px rgba(42,39,33,.26);
  --s-shadow-lg:   0 20px 50px -18px rgba(42,39,33,.42);

  /* ── 글자 크기 · 자간 ──────────────────────────────────── */
  --s-fs-xs:       11px;
  --s-fs-sm:       12.5px;
  --s-fs:          14px;
  --s-fs-lg:       16px;
  --s-fs-xl:       20px;
  --s-lh:          1.65;      /* 한글은 1.6 아래로 내리면 답답해진다 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s-bg:        #171613;
    --s-surface:   #1F1E1A;
    --s-surface-2: #272621;
    --s-surface-3: #33312A;
    --s-line:      #2E2C26;
    --s-line-2:    #423F36;

    --s-ink:       #E9E6DE;
    --s-ink-2:     #B6B1A5;
    --s-ink-3:     #8A857A;
    --s-on-accent: #171613;

    --s-accent:    #9FB2DC;
    --s-accent-hov:#B6C4E6;
    --s-accent-bg: #232839;

    --s-up:        #E08573;  --s-up-bg:     #331F1B;
    --s-down:      #79A9E6;  --s-down-bg:   #1B2634;
    --s-warn:      #D6A952;  --s-warn-bg:   #2E2717;
    --s-danger:    #E0796B;  --s-danger-bg: #331D19;
    --s-ok:        #9FB2DC;

    --s-g1:        #EEDCAE;  --s-on-g1: #171613;
    --s-g2:        #D6B471;  --s-on-g2: #171613;
    --s-g3:        #B08E48;  --s-on-g3: #171613;
    --s-g4:        #85682F;  --s-on-g4: #E9E6DE;
    --s-g5:        #5A481F;  --s-on-g5: #E9E6DE;

    --s-shadow:    0 1px 2px rgba(0,0,0,.5), 0 8px 22px -14px rgba(0,0,0,.8);
    --s-shadow-lg: 0 20px 50px -18px rgba(0,0,0,.85);
  }
}

:root[data-theme="dark"] {
  --s-bg:#171613; --s-surface:#1F1E1A; --s-surface-2:#272621; --s-surface-3:#33312A;
  --s-line:#2E2C26; --s-line-2:#423F36;
  --s-ink:#E9E6DE; --s-ink-2:#B6B1A5; --s-ink-3:#8A857A; --s-on-accent:#171613;
  --s-accent:#9FB2DC; --s-accent-hov:#B6C4E6; --s-accent-bg:#232839;
  --s-up:#E08573; --s-up-bg:#331F1B; --s-down:#79A9E6; --s-down-bg:#1B2634;
  --s-warn:#D6A952; --s-warn-bg:#2E2717; --s-danger:#E0796B; --s-danger-bg:#331D19;
  --s-ok:#9FB2DC;
  --s-g1:#EEDCAE; --s-g2:#D6B471; --s-g3:#B08E48; --s-g4:#85682F; --s-g5:#5A481F;
  --s-on-g1:#171613; --s-on-g2:#171613; --s-on-g3:#171613; --s-on-g4:#E9E6DE; --s-on-g5:#E9E6DE;
  --s-shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 22px -14px rgba(0,0,0,.8);
  --s-shadow-lg:0 20px 50px -18px rgba(0,0,0,.85);
}

/* 눈 피로 완화 — 전역 기본값. 색을 바꾸지 않고 읽기만 편하게 한다. */
html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* 숫자가 열로 늘어서는 곳에서 자릿수를 고정한다 — 눈이 덜 흔들린다 */
table, .num, .tnum, input[type="number"] { font-variant-numeric: tabular-nums; }

/* 키보드 포커스를 보이게 한다 (기존에 outline:none 이 흩어져 있다) */
:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}