/* ═══════════════════════════════════════════════════════════
   앱 공용 스타일 (SSoT 59) — 기준: docs/00-앱-표준.md
   2026-08-07 김대표 확정: 최종행동=파랑 · 입력글씨 15px · 모서리 12/10/8

   왜 있나:
     화면마다 style="..." 안에 값을 직접 써서 조금씩 달랐다.
     여기 이름만 쓰면 전 화면이 같은 모양이 된다.

   쓰는 법:
     <link rel="stylesheet" href="/static/app.css">
     각 화면의 :root 토큰은 그대로 두고, 여기 클래스를 골라 쓴다.
   ═══════════════════════════════════════════════════════════ */

/* ── 값 (화면에 :root 가 없을 때만 대신 쓰인다) ────────────── */
:root {
  /* SSoT 125 — 화면마다 따로 적던 색을 공용으로 올렸다 (2026-08-22)
     ⚠️ 값이 화면마다 조금씩 달랐다 — 여기서 하나로 정한다 */
  --text-disabled: #B0B8C1;
  --primary-light: #E8F1FB;
  --primary-dark:  #1B64DA;
  --success:       #00B86C;

  --primary: #3182F6;
  --navy: #1E2A4A;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F4F6;
  --bg-tertiary: #E9ECEF;
  --text-primary: #191F28;
  --text-secondary: #3F4854;
  --text-tertiary: #5F6A78;
  --border: #E5E8EB;
  --danger: #E8344E;
  --accent: #F59E0B;      /* 추천 뱃지처럼 눈에 띄어야 하는 채움 */
  --danger-bg: #FDECEC;
  /* 지우기 단추 같은 옅은 빨강 바탕 (SSoT 111)
     ⚠️ 화면 다섯 곳이 제각기 정하고 있었고 customers.html 만 빠져
        고객 삭제 단추의 빨간 동그라미가 안 나오고 있었다. 여기 한 번만 정한다. */
  --danger-light: #FFF5F5;
  --warn-bg: #FFF6E0;
  --warn-text: #5C3F00;
  --ok-bg: #E7F7EE;
  --ok-text: #0E9F52;
  --sel-bg: #EBF2FF;
  --sel-border: #93C5FD;
  --sel-text: #3182F6;
  /* ── 읽는 뱃지 (SSoT 108) ─────────────────────────────────
     회색 배경은 --bg-secondary(#F2F4F6) 보다 한 칸 진하다. 흰 카드 위에서도 보여야 해서.
     ⚠️ 글자색은 --ok-text·--danger 를 쓰지 않는다.
        그 값들은 큰 글씨용이라 12px 뱃지에서 대비가 3.1~4.2:1 밖에 안 나온다 (4.5 필요).
        아래 -strong 은 같은 배경에서 4.7~7.3:1 이 나오는 진한 짝이다.
        다크 값까지 여기 적어 두면 화면마다 !important 로 덮을 일이 없다. */
  --chip-bg: #E5E8EB;
  --chip-text: #374151;
  --ok-strong: #05683A;
  --danger-strong: #B42318;
  --sel-strong: #1B64DA;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-xs: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-disabled: #5C6470;
    --primary-light: #1E2D4A;
    --primary-dark:  #4D9AFF;   /* 다크에선 밝은 쪽이 '진한 파랑' 노릇을 한다 */
    --success:       #4ADE80;

    --bg-primary: #1A1D24;
    --bg-secondary: #14161B;
    --bg-tertiary: #22252D;
    --text-primary: #ECEFF4;
    --text-secondary: #B0B8C1;
    --text-tertiary: #8B95A1;
    --border: #2D323B;
    --danger-bg: #3A1D22;
    --danger-light: #3A1D22;
    --warn-bg: #3B2F1A;
    --warn-text: #FCD34D;
    --ok-bg: #123A28;
    --ok-text: #4ADE80;
    --sel-bg: #1E3A5F;
    --sel-border: #93C5FD;
    --sel-text: #93C5FD;
    --chip-bg: #2D323B;
    --chip-text: #B0B8C1;
    --ok-strong: #4ADE80;
    --danger-strong: #FCA5A5;
    --sel-strong: #93C5FD;
  }
}

/* ── 글씨 계단 — 여섯 개만 쓴다 ───────────────────────────── */
.t-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.t-head  { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.t-body  { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.t-desc  { font-size: 13px; font-weight: 400; color: var(--text-secondary); line-height: 1.6; }
.t-hint  { font-size: 12px; font-weight: 400; color: var(--text-tertiary); line-height: 1.55; }

/* ── 카드·시트 ────────────────────────────────────────────── */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

/* ── 입력칸 — 15px 미만이면 아이폰이 입력할 때 화면을 확대한다 ── */
.field {
  width: 100%;
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
}
.field:focus { outline: none; border-color: var(--primary); }
.field::placeholder { color: var(--text-tertiary); }
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 6px; }

/* ── 버튼 ─────────────────────────────────────────────────── */
/* 최종 행동 — 한 화면에 하나만 */
.btn-main {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-main:active { filter: brightness(0.94); }
.btn-main:disabled { opacity: 0.45; cursor: default; }

/* 보조 — 취소·닫기·공유 */
.btn-sub {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.btn-sub:active { background: var(--bg-tertiary); }

/* 위험 — 삭제·탈퇴. 화면 맨 아래 작게 */
.btn-danger {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 10px;
}

/* 글자 버튼 — 링크 복사처럼 곁다리 */
.btn-text {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 10px;
}

/* ── 칩 ───────────────────────────────────────────────────── */
.chip {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.chip.on {
  background: var(--sel-bg);
  border-color: var(--sel-border);
  color: var(--sel-text);
  font-weight: 700;
}

/* 뱃지 — 누르는 게 아니라 표시 */
.badge { display: inline-block; padding: 3px 9px; border-radius: var(--radius-xs); font-size: 12px; font-weight: 700; }
.badge-ok   { background: var(--ok-bg);     color: var(--ok-text); }
.badge-warn { background: var(--warn-bg);   color: var(--warn-text); }
.badge-bad  { background: var(--danger-bg); color: var(--danger); }

/* ── 키오스크 화면 짜임 ───────────────────────────────────── */
/* 100vh 금지 — 주소창이 보일 때 화면보다 커져 하단 버튼이 밀린다 */
.kiosk { position: fixed; inset: 0; height: 100%; z-index: 3000;
         background: var(--bg-primary); display: flex; flex-direction: column;
         overflow: hidden; max-width: 480px; margin: 0 auto; }
@supports (height: 100dvh) { .kiosk { height: 100dvh; } }
.kiosk-head { display: flex; align-items: center; gap: 10px; padding: 14px;
              border-bottom: 1px solid var(--border); flex-shrink: 0; }
.kiosk-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.kiosk-foot { flex-shrink: 0; background: var(--bg-primary);
              border-top: 1px solid var(--border);
              padding: 10px 16px calc(env(safe-area-inset-bottom) + 12px); }
/* 하단 순서는 [취소] [최종 행동] 고정 */
.kiosk-foot .row { display: flex; gap: 8px; }
.kiosk-foot .row .btn-sub { flex: 0 0 34%; }
.kiosk-foot .row .btn-main { flex: 1; }

/* ── 조용한 알림 ──────────────────────────────────────────── */
.toast-lite {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  background: rgba(25,31,40,0.92); color: #fff;
  padding: 11px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; z-index: 9999;
  pointer-events: none; opacity: 0; transition: opacity .18s;
}
.toast-lite.on { opacity: 1; }

/* ── 빈 상태 ──────────────────────────────────────────────── */
.empty { text-align: center; padding: 36px 20px; color: var(--text-tertiary); }
.empty .t { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.empty .s { font-size: 13px; }

/* ── 인쇄 ─────────────────────────────────────────────────── */
@media print {
  .no-print, .kiosk-foot, .toast-lite { display: none !important; }
}

/* 돌아가는 표시 — 당겨서 새로고침·버튼 스피너가 함께 쓴다 (SSoT 173)
   ⚠️ 전에는 화면마다 따로 적혀 있어, 없는 화면에서는 안 돌았다 (L-030) */
@keyframes spin { to { transform: rotate(360deg); } }