/* ============================================================
   SCMUP App Design System v1.0
   값 출처: DESIGN.md (kb §11.5-앱) · scmup-app-tokens.json
   앱 화면 전용. 문서 산출물은 v2 Quiet Authority를 따른다.
   ============================================================ */

/* ---- Tokens (fonts: /static/fonts/fonts.css) ---- */
:root {
  /* Color */
  --scmup-primary:  #0066FF; /* 주강조·버튼·활성 */
  --scmup-success:  #00BF40; /* 수주·성공 */
  --scmup-warning:  #FF8A1E; /* 주의·지연 */
  --scmup-ink:      #18181B; /* 본문 */
  --scmup-logo-dot: #B8893A; /* 로고 점(.) 전용 — 다른 UI 요소에 사용 금지 */

  /* 제품 색상 — 단일 출처(지시서#9 추가패치3). 사용처(가동률 바·범례·배지·결과표 점·비교표)는
     모두 var(--mp-product-*) 참조, 하드코딩 금지. 팔레트 = A 파랑·B 초록·C 주황(예약). */
  --mp-product-a: #0066FF; /* 제품 A · 표준 */
  --mp-product-b: #00BF40; /* 제품 B · 고탄성 */
  --mp-product-c: #FF8A1E; /* 제품 C — 예약(로직 미사용) */

  /* Surfaces (ink 기반 중성) */
  --scmup-bg:       #FFFFFF;
  --scmup-surface:  #FAFAFA;
  --scmup-line:     #E8E8EA;
  --scmup-muted:    #71717A;

  /* Type — families */
  --scmup-font-display: "Wanted Sans", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif; /* 제목·디스플레이 */
  --scmup-font-body:    "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; /* 본문 */
  --scmup-font-numeric: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* 숫자·날짜·버전 */

  /* Type — scale (배분 데모 실측 15층 토큰) */
  --text-display-2-size: 56px; --text-display-2-lh: 1.25; --text-display-2-tracking: -0.0282em; --text-display-2-weight: 700;
  --text-display-3-size: 40px; --text-display-3-lh: 1.3;  --text-display-3-tracking: -0.0244em; --text-display-3-weight: 700;
  --text-title-1-size:   32px; --text-title-1-lh: 1.35;   --text-title-1-tracking: -0.0188em; --text-title-1-weight: 700;
  --text-title-2-size:   28px; --text-title-2-lh: 1.4;    --text-title-2-tracking: -0.0156em; --text-title-2-weight: 700;
  --text-title-3-size:   24px; --text-title-3-lh: 1.42;   --text-title-3-tracking: -0.0119em; --text-title-3-weight: 700;
  --text-heading-1-size: 22px; --text-heading-1-lh: 1.45; --text-heading-1-tracking: -0.0096em; --text-heading-1-weight: 700;
  --text-heading-2-size: 20px; --text-heading-2-lh: 1.5;  --text-heading-2-tracking: -0.0073em; --text-heading-2-weight: 700;
  --text-headline-1-size: 18px; --text-headline-1-lh: 1.55; --text-headline-1-tracking: -0.0044em; --text-headline-1-weight: 600;
  --text-headline-2-size: 17px; --text-headline-2-lh: 1.55; --text-headline-2-tracking: -0.0029em; --text-headline-2-weight: 600;
  --text-body-1-size:    16px; --text-body-1-lh: 1.5;     --text-body-1-tracking: 0.0057em;  --text-body-1-weight: 400;
  --text-body-2-size:    15px; --text-body-2-lh: 1.5;     --text-body-2-tracking: 0.0096em;  --text-body-2-weight: 400;
  --text-label-1-size:   14px; --text-label-1-lh: 1.43;   --text-label-1-tracking: 0.0145em; --text-label-1-weight: 500;
  --text-label-2-size:   13px; --text-label-2-lh: 1.46;   --text-label-2-tracking: 0.0194em; --text-label-2-weight: 500;
  --text-caption-1-size: 12px; --text-caption-1-lh: 1.5;  --text-caption-1-tracking: 0.0252em; --text-caption-1-weight: 400;
  --text-caption-2-size: 11px; --text-caption-2-lh: 1.45; --text-caption-2-tracking: 0.0316em; --text-caption-2-weight: 400;
}

/* ---- Type utilities (15층) ---- */
/* display·title·heading·headline = Wanted Sans, body·label·caption = Pretendard */
.t-display-2 { font-family: var(--scmup-font-display); font-size: var(--text-display-2-size); line-height: var(--text-display-2-lh); letter-spacing: var(--text-display-2-tracking); font-weight: var(--text-display-2-weight); }
.t-display-3 { font-family: var(--scmup-font-display); font-size: var(--text-display-3-size); line-height: var(--text-display-3-lh); letter-spacing: var(--text-display-3-tracking); font-weight: var(--text-display-3-weight); }
.t-title-1   { font-family: var(--scmup-font-display); font-size: var(--text-title-1-size);   line-height: var(--text-title-1-lh);   letter-spacing: var(--text-title-1-tracking);   font-weight: var(--text-title-1-weight); }
.t-title-2   { font-family: var(--scmup-font-display); font-size: var(--text-title-2-size);   line-height: var(--text-title-2-lh);   letter-spacing: var(--text-title-2-tracking);   font-weight: var(--text-title-2-weight); }
.t-title-3   { font-family: var(--scmup-font-display); font-size: var(--text-title-3-size);   line-height: var(--text-title-3-lh);   letter-spacing: var(--text-title-3-tracking);   font-weight: var(--text-title-3-weight); }
.t-heading-1 { font-family: var(--scmup-font-display); font-size: var(--text-heading-1-size); line-height: var(--text-heading-1-lh); letter-spacing: var(--text-heading-1-tracking); font-weight: var(--text-heading-1-weight); }
.t-heading-2 { font-family: var(--scmup-font-display); font-size: var(--text-heading-2-size); line-height: var(--text-heading-2-lh); letter-spacing: var(--text-heading-2-tracking); font-weight: var(--text-heading-2-weight); }
.t-headline-1{ font-family: var(--scmup-font-display); font-size: var(--text-headline-1-size); line-height: var(--text-headline-1-lh); letter-spacing: var(--text-headline-1-tracking); font-weight: var(--text-headline-1-weight); }
.t-headline-2{ font-family: var(--scmup-font-display); font-size: var(--text-headline-2-size); line-height: var(--text-headline-2-lh); letter-spacing: var(--text-headline-2-tracking); font-weight: var(--text-headline-2-weight); }
.t-body-1    { font-family: var(--scmup-font-body); font-size: var(--text-body-1-size);    line-height: var(--text-body-1-lh);    letter-spacing: var(--text-body-1-tracking);    font-weight: var(--text-body-1-weight); }
.t-body-2    { font-family: var(--scmup-font-body); font-size: var(--text-body-2-size);    line-height: var(--text-body-2-lh);    letter-spacing: var(--text-body-2-tracking);    font-weight: var(--text-body-2-weight); }
.t-label-1   { font-family: var(--scmup-font-body); font-size: var(--text-label-1-size);   line-height: var(--text-label-1-lh);   letter-spacing: var(--text-label-1-tracking);   font-weight: var(--text-label-1-weight); }
.t-label-2   { font-family: var(--scmup-font-body); font-size: var(--text-label-2-size);   line-height: var(--text-label-2-lh);   letter-spacing: var(--text-label-2-tracking);   font-weight: var(--text-label-2-weight); }
.t-caption-1 { font-family: var(--scmup-font-body); font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-lh); letter-spacing: var(--text-caption-1-tracking); font-weight: var(--text-caption-1-weight); }
.t-caption-2 { font-family: var(--scmup-font-body); font-size: var(--text-caption-2-size); line-height: var(--text-caption-2-lh); letter-spacing: var(--text-caption-2-tracking); font-weight: var(--text-caption-2-weight); }

/* ---- Base ---- */
body {
  font-family: var(--scmup-font-body);
  color: var(--scmup-ink);
  background: var(--scmup-bg);
}

/* 한글: italic·외곽선·그림자·광택 효과 금지 */
:lang(ko) { font-style: normal; }

/* 숫자·날짜·버전·문서번호는 항상 JetBrains Mono */
.scmup-num {
  font-family: var(--scmup-font-numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

input[type=range]{accent-color:#0066FF;height:4px;cursor:pointer}@keyframes panelIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}@keyframes fadeLine{from{opacity:0;}to{opacity:1;}}@keyframes popPt{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}@keyframes optMove3{from{transform:translate(118.3px,23.15px);opacity:.3}55%{opacity:1}to{transform:translate(0px,0px);opacity:1}}@keyframes optMove5{from{transform:translate(-253.2px,-77.15px);opacity:.3}55%{opacity:1}to{transform:translate(0px,0px);opacity:1}}