/* 퀀트랩 디자인 기준값(토큰) — 설계서 _scratch/quantlab_20261111/design/direction.md 와 한 쌍.
   색은 Radix Colors 3.0(MIT)의 slate·indigo·green·red·amber·blue 단계 값을 그대로 쓴다(주석의 이름-번호).
   글꼴·아이콘·색 원본의 라이선스는 ds/licenses/ 에 있다. 외부 주소에서 받는 것은 없다. */

@font-face{font-family:"Pretendard Variable";font-weight:45 920;font-style:normal;font-display:swap;
  src:url("fonts/PretendardVariable.woff2") format("woff2-variations")}
@font-face{font-family:"JetBrains Mono";font-weight:100 800;font-style:normal;font-display:swap;
  src:url("fonts/JetBrainsMono-latin.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2190-2193,U+2212,U+2215}

:root{
  color-scheme:light;
  /* 바탕 */
  --paper:#fcfcfd;        /* slate-1  쪽 바탕 */
  --surface:#ffffff;      /*          떠 있는 면(레시피·표·입력) */
  --sunk:#f0f0f3;         /* slate-3  가라앉은 면(표 머리·기준 줄·세그먼트 바탕) */
  --sunk-2:#e8e8ec;       /* slate-4  누름 */
  --rule:#e0e1e6;         /* slate-5  가는 선 */
  --rule-2:#cdced6;       /* slate-7  입력 테두리·hover 선 */
  /* 글자 */
  --ink:#1c2024;          /* slate-12 본문 */
  --ink-2:#60646c;        /* slate-11 보조 */
  --ink-3:#80838d;        /* slate-10 자리표시·끈 것·아이콘(읽어야 하는 글에는 쓰지 않는다) */
  /* 잉크(주 행동)·강조(고른 것·내 전략 선) */
  --brand:#1f2d5c;        /* indigo-12 주 단추 바탕 · 큰 숫자 */
  --brand-ink:#ffffff;
  --accent:#3e63dd;       /* indigo-9  고른 것·내 전략 선·focus */
  --accent-text:#3a5bc7;  /* indigo-11 글자로 쓸 때 */
  --accent-soft:#edf2fe;  /* indigo-3 */
  --accent-soft-2:#e1e9ff;/* indigo-4 */
  --accent-rule:#abbdf9;  /* indigo-7 */
  /* 등락·상태 — 색만으로 뜻을 전하지 않는다(부호·아이콘·글자를 같이) */
  /* 글자색 --up · --warn(과 한국 관례의 --down)은 Radix 11단계를 조금 어둡게 했다 — 옅은 바탕·가라앉은 면 위에서도 4.5:1 을 넘게 */
  --up:#1b774f;   --up-mark:#30a46c;   --up-soft:#e6f6eb;     /* green-11(어둡게) · 9 · 3 */
  --down:#ce2c31; --down-mark:#e5484d; --down-soft:#feebec;   /* red-11 · 9 · 3 */
  --warn:#a05d00; --warn-mark:#e2a336; --warn-soft:#fefbe9; --warn-rule:#f3d673;   /* amber-11(어둡게) · 8 · 2 · 6 */
  --ok:#1b774f;   --ok-soft:#e6f6eb;
  --bad:#ce2c31;  --bad-soft:#feebec;
  /* 그림: 계열색 6(검사기 통과, 순서 고정 — 7번째는 만들지 않는다) · 벤치마크 */
  --s1:#3e63dd; --s2:#eb6834; --s3:#0797b9; --s4:#c98500; --s5:#d55181; --s6:#8e4ec6;
  --bench:#8b8d98;
  --grid:#e8e8ec;
  /* 글꼴 */
  --f-body:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","Pretendard Variable","D2Coding",Consolas,ui-monospace,monospace;   /* 한글은 Pretendard 로 떨어진다 */
  /* 글자 크기 7단(px) — 이 밖의 크기는 쓰지 않는다 */
  --t-xs:12px; --t-sm:13px; --t-md:14px; --t-lg:16px; --t-xl:20px; --t-2xl:28px; --t-hero:40px;
  /* 간격 8단 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  /* 모서리 */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  /* 높이 */
  --h-ctl:36px; --h-ctl-sm:28px; --h-top:56px;
  /* 그림자는 떠 있는 층(끈끈이 실행 줄·메뉴)에만 */
  --float:0 1px 2px rgba(28,32,36,.06),0 8px 24px -8px rgba(28,32,36,.14);
  /* 움직임 — Open Props(MIT) 의 easing 값 */
  --ease-out:cubic-bezier(0,0,.3,1);     /* ease-out-3 */
  --ease:cubic-bezier(.25,0,.3,1);       /* ease-3 */
  --d-fast:120ms; --d-mid:200ms; --d-slow:600ms;
  /* 틀 */
  --w-page:2200px; --w-recipe:clamp(456px,26vw,560px);
  /* 옛 이름(sim.css·compare.js 가 새 이름으로 옮길 때까지만) */
  --bg:var(--paper); --muted:var(--ink-2); --accent-ink:#ffffff; --hdr:var(--h-top); --set-w:var(--w-recipe);
}

/* 어두움: OS 설정 + 손잡이(data-theme) 둘 다. 같은 단계의 dark 값 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#111113; --surface:#18191b; --sunk:#212225; --sunk-2:#272a2d; --rule:#2e3135; --rule-2:#43484e;
    --ink:#edeef0; --ink-2:#b0b4ba; --ink-3:#777b84;
    --brand:#d6e1ff; --brand-ink:#11131f;
    --accent:#5472e4; --accent-text:#9eb1ff; --accent-soft:#182449; --accent-soft-2:#1d2e62; --accent-rule:#3a4f97;
    --up:#3dd68c; --up-mark:#30a46c; --up-soft:#132d21;
    --down:#ff9592; --down-mark:#e5484d; --down-soft:#3b1219;
    --warn:#ffca16; --warn-mark:#8f6424; --warn-soft:#1d180f; --warn-rule:#5c3d05;
    --ok:#3dd68c; --ok-soft:#132d21; --bad:#ff9592; --bad-soft:#3b1219;
    --s1:#5472e4; --s2:#d95926; --s3:#1a9fb8; --s4:#c98500; --s5:#d55181; --s6:#9a6fe0;
    --bench:#696e77; --grid:#272a2d;
    --float:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#111113; --surface:#18191b; --sunk:#212225; --sunk-2:#272a2d; --rule:#2e3135; --rule-2:#43484e;
  --ink:#edeef0; --ink-2:#b0b4ba; --ink-3:#777b84;
  --brand:#d6e1ff; --brand-ink:#11131f;
  --accent:#5472e4; --accent-text:#9eb1ff; --accent-soft:#182449; --accent-soft-2:#1d2e62; --accent-rule:#3a4f97;
  --up:#3dd68c; --up-mark:#30a46c; --up-soft:#132d21;
  --down:#ff9592; --down-mark:#e5484d; --down-soft:#3b1219;
  --warn:#ffca16; --warn-mark:#8f6424; --warn-soft:#1d180f; --warn-rule:#5c3d05;
  --ok:#3dd68c; --ok-soft:#132d21; --bad:#ff9592; --bad-soft:#3b1219;
  --s1:#5472e4; --s2:#d95926; --s3:#1a9fb8; --s4:#c98500; --s5:#d55181; --s6:#9a6fe0;
  --bench:#696e77; --grid:#272a2d;
  --float:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.6);
}

/* 등락 색 관례 손잡이: 기본은 상승 초록·하락 빨강. <html data-updown="kr"> 이면 상승 빨강·하락 파랑(red·blue 11·9·3) */
:root[data-updown="kr"]{
  --up:#ce2c31; --up-mark:#e5484d; --up-soft:#feebec;
  --down:#0969bd; --down-mark:#0090ff; --down-soft:#e6f4fe;   /* blue-11(어둡게) · 9 · 3 */
}
:root[data-updown="kr"][data-theme="dark"]{
  --up:#ff9592; --up-mark:#e5484d; --up-soft:#3b1219;
  --down:#70b8ff; --down-mark:#0090ff; --down-soft:#0d2847;
}
@media (prefers-color-scheme:dark){
  :root[data-updown="kr"]:not([data-theme="light"]){
    --up:#ff9592; --up-mark:#e5484d; --up-soft:#3b1219;
    --down:#70b8ff; --down-mark:#0090ff; --down-soft:#0d2847;
  }
}

/* 손가락으로 누르는 기기: 누르는 것의 높이를 44px 로 */
@media (pointer:coarse){ :root{ --h-ctl:44px; --h-ctl-sm:36px } }