/* ============================================================
   KRBOS 공통 디자인 — theme.css
   ============================================================
   세 화면(직원앱 · 사장 대시보드 · TV 현황판)이 같은 색과 같은 간격을 쓴다.
   예전에는 파일마다 색을 따로 적어두어서, 한 곳을 고쳐도 나머지는 그대로였다.
   이제 색을 바꾸려면 이 파일 한 곳만 고치면 세 화면이 같이 바뀐다.

   ── 상태 색 규칙 (이 시스템의 핵심) ─────────────────────
   빨강  이상 있음      — 마감 지남, 미제출, 미흡 판정, 응답 없음
   주황  점검 필요      — 판단 불가, 대기 중, 기한 임박
   초록  정상           — 완료, 승인됨, 기한 내 제출
   회색  해당 없음      — 아직 시작 안 함, 데이터 없음

   색만으로 뜻을 전하지 않는다. 어느 자리든 아이콘이나 글자를 함께 둔다.
   매장 조명 아래 흐린 화면, 색약인 직원, 흑백 출력 — 색이 안 통하는 자리가 많다.
   ============================================================ */

/* Pretendard 글꼴 CSS 는 여기서 @import 하지 않는다 (2026-11-03) — @import 는 받을 때까지 화면 첫 그리기를 막는다(매장 와이파이에서 하얀 화면).
   nav.js 가 비차단으로 붙이고, 그 전까지는 --font 의 기기 글꼴로 그린다. */

:root {
  /* ── 글자색 ── 진한 쪽부터 */
  --ink:        #14161a;   /* 제목, 숫자 */
  --ink-2:      #3d434a;   /* 본문 */
  --ink-3:      #5b6169;   /* 보조 설명 */
  /* 작은 글씨에도 쓰이는 색이라 흰 바탕에서 5.3:1 이 나오도록 잡았다.
     목업의 #8b929b 은 11px 에서 3.1:1 밖에 안 나와 매장 조명 아래서 안 읽힌다. */
  --ink-4:      #656c75;   /* 흐린 안내 (읽어야 하는 글) */
  --ink-5:      #a6acb4;   /* 장식·비활성 (읽지 않아도 되는 것에만) */

  /* ── 면과 선 ── */
  --bg:         #f2f4f6;   /* 화면 바탕 */
  --surface:    #ffffff;   /* 카드 */
  --surface-2:  #fafbfc;   /* 카드 안의 한 칸 더 들어간 면 */
  --surface-3:  #eef0f2;   /* 눌린 면, 표 머리 */
  --line:       #e3e6e9;   /* 기본 테두리 */
  --line-2:     #c3c9d0;   /* 입력칸 테두리 (더 진하게 — 눌러야 할 곳은 보여야 한다) */
  --line-3:     #eef0f2;   /* 아주 옅은 구분선 */

  /* ── 강조(브랜드) ── */
  --brand:      #2b5bd7;
  --brand-ink:  #1f47ab;   /* 눌렀을 때 */
  --brand-bg:   #eef2fd;   /* 강조 배경 */
  --brand-line: #c8d3ea;

  /* ── 상태 ── 각 색은 글자용·배경용·테두리용 세 벌 ── */
  /* 글자용은 테두리용보다 한 단계 진하다.
     목업 색을 11~13px 글자에 그대로 쓰면 초록 4.1:1, 주황 3.8:1 로 기준(4.5)에 못 미친다.
     테두리·막대에는 목업 색을 그대로 쓰고, 글자만 진하게 해서 둘 다 지켰다. */
  --ok:         #0f7451;   /* 정상 — 글자 */
  --ok-bg:      #e7f4ee;
  --ok-line:    #12855a;   /* 정상 — 테두리 (목업 값) */

  --warn:       #9a5d00;   /* 점검 필요 — 글자 */
  --warn-bg:    #fdf1de;
  --warn-line:  #b06a00;   /* 점검 필요 — 테두리 (목업 값) */

  --bad:        #c62f38;   /* 이상 있음 — 글자·테두리 겸용 (5.4:1 로 이미 충분) */
  --bad-bg:     #fdeaea;
  --bad-line:   #c62f38;

  /* 해당 없음 — 알약·칩의 글자로도 쓰여서 --none-bg 위 4.5:1 이 나오게 잡았다 (2026-11-03, 예전 #8b929b 는 2.9:1 로 '미제출' 글자가 안 읽혔다) */
  --none:       #656c75;
  --none-bg:    #f4f5f7;
  --none-line:  #d5dade;

  /* ── 모서리 ── */
  --r-sm: 4px;
  --r:    6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* ── 그림자 ── 얕게. 업무 화면은 그림자로 꾸미는 자리가 아니다 */
  --shadow:    0 1px 3px rgba(0, 0, 0, .07);
  --shadow-up: 0 2px 10px rgba(0, 0, 0, .10);

  /* ── 간격 ── 4의 배수로 통일 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* ── 글꼴 ──
     Pretendard 는 한글 자소가 고르고 숫자 폭이 안정적이라 표에서 자리가 안 흔들린다.
     못 받아오면 기기 기본 글꼴로 떨어진다 — 화면이 깨지지는 않는다. */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;

  /* ── 글자 크기 ── 새 화면은 이 단계만 쓴다 (2026-11-03). 11px 아래는 쓰지 않는다 */
  --fs-xs:  12px;   /* 표 머리·보조 */
  --fs-sm:  13px;   /* 설명 */
  --fs-md:  14px;   /* 본문 */
  --fs-lg:  16px;   /* 강조·입력칸(아이폰 확대 방지) */
  --fs-xl:  18px;   /* 칸 제목 */
  --fs-2xl: 22px;   /* 화면 제목·숫자 */

  /* ── 진한 면 위의 글자 · 창 뒤 어두운 막 · 키보드 초점 ── */
  --on-solid: #ffffff;
  --scrim:    rgba(20, 22, 26, .5);
  --focus:    var(--brand);

  /* 터치 목표 최소 크기. 매장 직원은 서서, 장갑 낀 손으로, 급하게 누른다. */
  --tap: 44px;
}

/* ── 상태 한 벌을 통째로 갈아끼우는 장치 ──────────────────
   .is-ok / .is-warn / .is-bad / .is-none 을 붙이면 그 안에서
   --st, --st-bg, --st-line 이 해당 상태 색으로 바뀐다.
   덕분에 카드·점·칩·막대가 각자 색을 따로 정하지 않아도 같이 움직인다. */
.is-ok   { --st: var(--ok);   --st-bg: var(--ok-bg);   --st-line: var(--ok-line); }
.is-warn { --st: var(--warn); --st-bg: var(--warn-bg); --st-line: var(--warn-line); }
.is-bad  { --st: var(--bad);  --st-bg: var(--bad-bg);  --st-line: var(--bad-line); }
.is-none { --st: var(--none); --st-bg: var(--none-bg); --st-line: var(--none-line); }

/* ── 상태 카드 ── 테두리와 옅은 배경으로 상태를 알린다 */
.st-card {
  background: var(--st-bg, var(--surface));
  border: 1.5px solid var(--st-line, var(--line));
  border-radius: var(--r-lg);
  padding: var(--s4);
}
.st-card.plain { background: var(--surface); }

/* 카드 오른쪽 위의 점. 색만으로 뜻을 전하지 않도록 늘 제목과 함께 둔다. */
.st-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--st, var(--none));
  flex: 0 0 auto;
}

/* 상태 알약 — 글자를 반드시 넣는다 */
.st-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 1.4;
  color: var(--st, var(--ink-3));
  background: var(--st-bg, var(--none-bg));
  border: 1px solid var(--st-line, var(--line));
  white-space: nowrap;
}

/* 왼쪽 굵은 선 하나로 상태를 표시하는 줄 (목록에 적합) */
.st-row {
  border-left: 3px solid var(--st-line, var(--line));
  background: var(--surface);
  padding: var(--s3);
  border-radius: 0 var(--r) var(--r) 0;
}

/* 진행 막대 */
.st-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.st-bar > i { display: block; height: 100%; background: var(--st, var(--brand)); border-radius: inherit; }

/* 경고 한 줄 — 카드 아래에 붙는 짧은 문장 */
.st-note {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 7px 10px; border-radius: var(--r);
  font-size: 12px; line-height: 1.5;
  color: var(--st, var(--ink-3));
  background: var(--st-bg, var(--none-bg));
  border: 1px solid var(--st-line, var(--line));
}

/* ── 숫자 ──
   표나 목록에서 숫자가 세로로 줄 맞도록 고정폭 숫자를 쓴다.
   문장 속 숫자에는 쓰지 않는다 — 글자 사이가 벌어져 읽기 나빠진다. */
.num { font-variant-numeric: tabular-nums; }
.num-big { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); }

/* ── 눌리는 것들 ── */
.tap { min-height: var(--tap); }

/* 손가락으로 누르는 기기에서는 목표를 키운다.
   마우스는 1px도 정확히 짚지만 손가락은 그렇지 않다. */
@media (pointer: coarse) {
  button, .btn, select, input[type="date"], input[type="time"] { min-height: var(--tap); }
}

/* × 닫기 단추 — nav.js 가 알아보고 붙인다. 겉모양은 그대로, 누르는 자리만 */
@media (pointer: coarse) { .kr-x { min-width: var(--tap); min-height: var(--tap); } }

/* 키보드로 옮겨 다닐 때 어디에 있는지 보이게 (마우스·손가락으로 누를 때는 안 나온다) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 화면에는 안 보이고 스크린리더만 읽는 글자 */
.kr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 불러오는 중 · 빈 화면 · 오류 ── 화면마다 따로 그리지 않는다 (2026-11-03)
   글자는 window.KRUI.loading() / empty() / error() (nav.js) 가 만든다. HTML 에 바로 쓸 때는:
     <div class="kr-state is-loading" role="status">불러오는 중...</div>
   오류에는 늘 [다시 시도]를 붙인다 — 매장 와이파이가 끊긴 것을 앱이 고장 난 것으로 읽지 않게. */
.kr-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s8) var(--s4); text-align: center; line-height: 1.5;
  font-size: var(--fs-md); color: var(--ink-3);
}
.kr-state-icon { font-size: 32px; line-height: 1; }
.kr-state-hint { font-size: var(--fs-sm); color: var(--ink-4); }
.kr-state.is-loading { flex-direction: row; color: var(--ink-4); }
.kr-state.is-loading::before, .kr-spin {
  content: ''; display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--brand); animation: kr-spin .8s linear infinite;
}
.kr-state.is-error { color: var(--bad); }
.kr-state-btn {
  min-height: var(--tap); margin-top: var(--s1); padding: 0 var(--s5);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer;
}
.kr-state-btn:hover { background: var(--surface-2); }
.kr-state-btn:active { background: var(--surface-3); }
@keyframes kr-spin { to { transform: rotate(360deg); } }

/* 움직임을 줄여달라고 설정한 사람에게는 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .kr-state.is-loading::before, .kr-spin { animation: none; border-top-color: var(--line-2); }
}


/* ── 어두운 화면(TV 현황판)용 ─────────────────────────────
   상태 색은 흰 바탕을 기준으로 고른 값이라 어두운 배경에서는 너무 어둡다.
   TV는 매장 벽에 걸려 멀리서 보는 화면이라 대비가 특히 중요하다.
   같은 뜻(초록=정상, 주황=점검, 빨강=이상)을 유지하되 밝은 쪽으로 바꾼다. */
.on-dark {
  --ink:      #ffffff;
  --ink-2:    #e3e6e9;
  --ink-3:    #c3c9d0;
  --ink-4:    #a6acb4;
  --ink-5:    #8b929b;
  --bg:       #14161a;
  --surface:  #22262c;
  --surface-2:#2b3037;
  --surface-3:#3d434a;
  --line:     #3d434a;
  --line-2:   #5b6169;
  --ok:       #34d399;  --ok-bg:   rgba(52, 211, 153, .12);  --ok-line:   #34d399;
  --warn:     #fbbf24;  --warn-bg: rgba(251, 191, 36, .12);  --warn-line: #fbbf24;
  --bad:      #fca5a5;  --bad-bg:  rgba(252, 165, 165, .12); --bad-line:  #fca5a5;
  --none:     #a6acb4;  --none-bg: rgba(255, 255, 255, .06); --none-line: #5b6169;
  --brand:    #93b0f5;  --brand-bg: rgba(147, 176, 245, .12); --brand-line: #93b0f5;
  --on-solid: #14161a;
}