/* forsitOS product 앱 — 디자인 토큰 + 베이스
   출처: pages/product-db.html에서 추출 (2026-08-27)
   색·폰트·간격 변수(:root, 다크모드 포함) + 리셋/베이스. 컴포넌트는 components.css */
:root{
  --ground:#f7f8fa;
  --surface:#ffffff;
  --surface-2:#f2f4f7;
  --surface-3:#e9edf2;
  --rail:#111a2e;
  --rail-2:#1c2740;
  --rail-ink:#c7d0de;
  --rail-dim:#7285a0;
  --ink:#1a2233;
  --ink-2:#475569;
  --ink-3:#8494a8;
  --line:#e3e8ef;
  --line-2:#cbd5e1;

  --blue:#2563eb;   --blue-soft:#eff6ff;   --blue-line:#bfdbfe;
  --teal:#0d9488;   --teal-soft:#f0fdfa;   --teal-line:#99f6e4;
  --green:#059669;  --green-soft:#ecfdf5;  --green-line:#a7f3d0;
  --amber:#b45309;  --amber-soft:#fffbeb;  --amber-line:#fde68a;
  --red:#dc2626;    --red-soft:#fef2f2;    --red-line:#fecaca;
  --pink:#be185d;   --pink-soft:#fdf2f8;   --pink-line:#fbcfe8;
  --violet:#7c3aed; --violet-soft:#f5f3ff; --violet-line:#ddd6fe;

  --shadow:0 1px 2px rgba(26,34,51,.05),0 6px 20px rgba(26,34,51,.06);
  --shadow-lg:0 16px 48px rgba(26,34,51,.22);
  --r:7px;

  /* 목록 패널 폭 — 좌 목록·우 상세를 쓰는 모든 화면이 이 값을 공유한다.
     .pg-md(신규 화면)와 .two(제품·계약·Workspace)가 같이 참조하므로
     여기만 고치면 전 페이지 목록 폭이 함께 움직인다. */
  --list-w:392px;
  /* 좌 목록 최소 높이 — 머리행 31 + 12행 × 40 (2026-09-11 실측 · 지시서 00-5).
     상세가 짧을 때(미선택 · 빈 탭) 좌 목록이 이 높이 아래로 납작해지지 않는다 */
  --list-min-h:749px;  /* 10-2 실데이터 서비스 줄 3행 계약이 855 = 749 + 106 (eb 재측정 · 668 은 폴백 1줄 때 값) */   /* 2026-09-15 소혜님 — 전 화면 전 탭 목록 높이 동일. 기준 = 가장 긴 폼 탭. 10-1(서비스 줄 섹션) 뒤 계약 기본정보 774 = 668 + 머리 106 (09-4 뒤 고객사 706 → 600 · 그 전 계약 662 → 556 · 처음 511 = 12행). 폼 탭에 칸이 늘면 이 값이 따라 오른다 */
  /* 목록 카드에서 표 «밖»이 차지하는 높이 — 카드 머리 + 카드 안 부가줄(필터 · 페이지) + 테두리.
     화면마다 43~106 으로 달라서 **최대 실측 106** 을 쓴다 (2026-09-11 · 고객사 53 · 브랜드 87 · 정산 106).
     최소 높이를 카드 기준으로 환산할 때만 쓰므로, 이 값이 크면 짧은 화면이 12행보다 조금 더 보인다 */
  --list-hd-h:106px;
  --gutter:22px;
  --rail-w:240px;          /* 좌측 레일 폭 — sohye 사이드바와 같음 (2026-09-10 확정).
                              레일 폭에 기대는 값(.app 그리드 · .selbar 시작점)은 전부 이 변수를 본다 */

  /* 본문 컨테이너 — sohye `.pp-page` 와 같은 값 (화면-00 1-2 개정 2026-09-10).
     화면이 넓으면 본문이 가운데로 모이고, 좁으면 좌우 --page-px 만 남기고 꽉 찬다.
     반응형 분기 없음 — .page 의 padding 하나로 전 화면이 따라온다. */
  --page-w:1320px;         /* 본문 최대 폭 */
  --page-px:18px;          /* 본문 좌우 여백 */
  --page-pt:22px;          /* 본문 위 여백 */
  --page-pb:80px;          /* 본문 아래 여백 (선택바 · 스크롤 여유) */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0c1017; --surface:#141b26; --surface-2:#1b2431; --surface-3:#242f3e;
    --rail:#080c14; --rail-2:#141d2e; --rail-ink:#aebbcc; --rail-dim:#64748b;
    --ink:#e6ebf2; --ink-2:#aebbcc; --ink-3:#7d8da0;
    --line:#26303d; --line-2:#33404f;
    --blue:#60a5fa;  --blue-soft:#132133;  --blue-line:#1e3a5f;
    --teal:#2dd4bf;  --teal-soft:#0d2422;  --teal-line:#164e46;
    --green:#34d399; --green-soft:#0d2620; --green-line:#14503c;
    --amber:#fbbf24; --amber-soft:#2a1f08; --amber-line:#5b4310;
    --red:#f87171;   --red-soft:#2b1213;   --red-line:#5c2224;
    --pink:#f472b6;  --pink-soft:#2a1220;  --pink-line:#5c2145;
    --violet:#a78bfa;--violet-soft:#1d1732;--violet-line:#3b2d63;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.4);
    --shadow-lg:0 16px 48px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#0c1017; --surface:#141b26; --surface-2:#1b2431; --surface-3:#242f3e;
  --rail:#080c14; --rail-2:#141d2e; --rail-ink:#aebbcc; --rail-dim:#64748b;
  --ink:#e6ebf2; --ink-2:#aebbcc; --ink-3:#7d8da0;
  --line:#26303d; --line-2:#33404f;
  --blue:#60a5fa;  --blue-soft:#132133;  --blue-line:#1e3a5f;
  --teal:#2dd4bf;  --teal-soft:#0d2422;  --teal-line:#164e46;
  --green:#34d399; --green-soft:#0d2620; --green-line:#14503c;
  --amber:#fbbf24; --amber-soft:#2a1f08; --amber-line:#5b4310;
  --red:#f87171;   --red-soft:#2b1213;   --red-line:#5c2224;
  --pink:#f472b6;  --pink-soft:#2a1220;  --pink-line:#5c2145;
  --violet:#a78bfa;--violet-soft:#1d1732;--violet-line:#3b2d63;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:-apple-system,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",Roboto,sans-serif;
  font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
code,.mono{font-family:Consolas,Menlo,"Courier New",monospace;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
a{color:var(--blue)}