/* 파이 CS — 세 화면(초안·승인·과거문의) 공통 스타일.
 *
 * 여기 있는 것: 색 토큰, 기본 요소, 폼 컨트롤.
 * 여기 없는 것: 화면별 레이아웃(.wrap 폭, .card, .row 등) — 각 HTML 안에 둔다.
 *   같은 이름이 화면마다 다른 뜻으로 쓰이는 것이 있어(.row 는 초안·승인에서는
 *   버튼 줄, 과거문의에서는 목록 항목) 함부로 합치면 깨진다.
 *
 * 색을 바꾸려면 이 파일의 :root 한 곳만 고치면 된다.
 *
 * 대비는 WCAG AA(본문 4.5:1) 를 기준으로 맞춰 뒀다. 색을 바꾸면 다시 확인할 것 —
 * --ok 는 emerald-600(#059669)이 흰 배경에서 3.77 밖에 안 나와 한 단계 진하게 잡았다.
 */

:root{
  /* OS 가 다크모드여도 이 화면은 항상 밝게 간다 (운영자 결정 2026-09-03).
     color-scheme 을 light 로 고정해야 입력창·스크롤바까지 밝게 나온다. */
  color-scheme: light;
  /* --bg 는 --panel(흰색)보다 확실히 낮아야 카드가 배경 위에 떠 보인다.
     한때 #fbfbfc 였는데 흰색과 대비가 1.03 이라 영역 구분이 안 됐다. 지금은 1.11. */
  --bg:#f2f3f6; --panel:#ffffff; --ink:#18181b; --muted:#6b7280;
  --line:#e8e8ec; --accent:#2563eb; --warn:#dc2626; --ok:#047857; --code:#f4f4f6;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
}

/* 상단(히어로)과 아래 작업 영역은 구분선으로 나눈다.
   --bg 와 --panel 차이만으로는 경계가 약하다. */
header{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line)}
h1{font-size:20px;margin:0 0 3px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.sub{color:var(--muted);font-size:13px}
.guide{color:var(--muted);font-size:13px;line-height:1.7;margin-bottom:20px}
.guide b{color:var(--ink)}
.hist{font-size:13px;color:var(--muted);text-decoration:none;border:1px solid var(--line);
  padding:7px 13px;border-radius:8px;white-space:nowrap;flex:none;background:var(--panel)}
.hist:hover{border-color:var(--accent);color:var(--accent)}
.badge{font-size:11px;font-weight:600;letter-spacing:0;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  padding:2px 8px;border-radius:999px;line-height:1.5}
a{color:var(--accent)}
code{background:var(--code);padding:1px 5px;border-radius:4px;font-size:.9em}

input,select,textarea{
  font:inherit; padding:8px 11px; border:1px solid var(--line);
  border-radius:8px; background:var(--panel); color:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}

[hidden]{display:none!important}