/* ============================================================
   광명 안전관리 시스템 — 디자인 토큰 (design refresh v2)
   Engineering-flavored redesign
   기존 브랜드 오렌지(#e05c00) + 네이비(#1e2761) 유지
   ⚠️ tokens.css의 :root{} 변수 블록만 이식. base reset/폰트/스크롤바 등은 style.css 기존 것 유지.
   ============================================================ */
:root {
  /* ── Brand primary (기존 유지) ── */
  --brand-orange: #e05c00;
  --brand-orange-600: #c44f00;
  --brand-orange-050: #fff3eb;
  --brand-orange-100: #ffe0cc;
  --navy: #1e2761;
  --navy-800: #161c47;
  --navy-050: #eaeef8;

  /* ── Semantic (사고 등급) ── */
  --lv1: #d32020;   /* 최긴급 */
  --lv1-bg: #fff1f1;
  --lv2: #ea6f00;   /* 긴급 */
  --lv2-bg: #fff6ec;
  --lv3: #2e7d32;   /* 일반 */
  --lv3-bg: #f0faf0;

  /* ── Warning yellow (new accent) ── */
  --warn: #f5b70a;
  --warn-bg: #fff9e5;

  /* ── Neutrals (엔지니어링 톤: 미세하게 쿨한 그레이) ── */
  --ink-000: #ffffff;
  --ink-050: #f7f8fa;
  --ink-100: #eef1f5;
  --ink-200: #dde2ea;
  --ink-300: #c2c9d4;
  --ink-400: #8a94a3;
  --ink-500: #5a6474;
  --ink-600: #3d4658;
  --ink-700: #262d3d;
  --ink-800: #14192a;
  --ink-900: #0a0d18;

  /* ── Dark surfaces (관리자 콘솔용) ── */
  --dk-bg: #0d1220;
  --dk-surf: #141a2e;
  --dk-surf-2: #1c243c;
  --dk-line: #2a3352;
  --dk-txt: #d6dcec;
  --dk-txt-dim: #7d88a8;

  /* ── Typography ── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, "Noto Sans KR", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* ── Radius (미묘하게 각짐) ── */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;

  /* ── Spacing ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Shadow (얇게, 산업용 느낌) ── */
  --sh-1: 0 1px 2px rgba(20, 25, 42, .06), 0 0 0 1px rgba(20, 25, 42, .04);
  --sh-2: 0 2px 6px rgba(20, 25, 42, .07), 0 0 0 1px rgba(20, 25, 42, .05);
  --sh-3: 0 8px 24px rgba(20, 25, 42, .10), 0 0 0 1px rgba(20, 25, 42, .06);

  /* ── Motion ── */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: #f0f4f8;
  color: #1a1a1a;
  min-height: 100vh;
  /* 버튼/레이블 등 글자 터치 시 텍스트 선택 → 크롬 '탭하여 검색' 팝업 방지 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* 입력 가능한 요소는 선택/편집 허용 */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

.page { max-width: 580px; margin: 0 auto; padding: 2rem 1rem 4rem; }

/* ── 관리자 모드 PC 전체 너비 ── */
body.admin-mode { background: #f0f4f8; }
body.admin-mode .page {
  max-width: 100%;
  padding: 1.5rem 2rem 3rem;
}
@media (min-width: 1024px) {
  body.admin-mode .page {
    padding: 1.5rem 3rem 3rem;
  }
}

/* ── 헤더 ── */
.header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #d9e4ef;
}
.icon-wrap {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff0f0; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.form-title { font-size: 20px; font-weight: 700; line-height: 1.45; margin-bottom: 10px; color: #1a1a1a; }
.form-desc { font-size: 13.5px; color: #666; line-height: 1.75; margin-bottom: 14px; }
.notice-box {
  background: #fff8f0; border-left: 3px solid #e05c00;
  border-radius: 0 8px 8px 0; padding: .8rem 1rem;
  text-align: left; font-size: 13px; color: #555; line-height: 1.95;
}
.notice-box b { color: #e05c00; }

/* ── 섹션 타이틀 ── */
.section-title {
  font-size: 13px; font-weight: 700; color: #e05c00;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 1rem; margin-top: .25rem;
  display: flex; align-items: center; gap: 6px;
}
.section-title::after {
  content:''; flex:1; height:1px; background:#ffe0cc;
}

/* ── 카드 ── */
.card {
  background: #fff; border-radius: 14px;
  border: 1px solid #dce8f4; padding: 1.5rem;
  margin-bottom: 1.25rem;
}

/* ── 필드 ── */
.field { margin-bottom: 1.15rem; }
.field:last-child { margin-bottom: 0; }
.label {
  font-size: 14px; font-weight: 600; color: #333;
  margin-bottom: 7px; display: flex; align-items: center; gap: 4px;
}
.req { color: #e05c00; font-size: 13px; }
.input, .select, .textarea {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid #ddd; border-radius: 9px;
  font-size: 15px; color: #1a1a1a; background: #fff;
  outline: none; font-family: inherit; transition: border-color .15s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: #e05c00; box-shadow: 0 0 0 3px rgba(224,92,0,.1);
}
.input.err, .select.err, .textarea.err { border-color: #e74c3c; }
.err-msg { font-size: 12px; color: #e05c00; margin-top: 5px; }
.textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.select { cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px;
}

/* ── 긴급도 버튼 ── */
.level-row { display: flex; flex-direction: column; gap: 8px; }
.level-btn {
  width: 100%; padding: 12px 14px; border-radius: 9px; font-size: 14px;
  border: 1.5px solid #ddd; background: #fff; color: #666;
  cursor: pointer; transition: all .15s; font-family: inherit; font-weight: 500;
  text-align: left; display: flex; align-items: center; gap: 10px;
}
.level-btn .lv-badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
.level-btn.lv1 .lv-badge { background: #ffe0e0; color: #b71c1c; }
.level-btn.lv2 .lv-badge { background: #fff3e0; color: #e65100; }
.level-btn.lv3 .lv-badge { background: #e8f5e9; color: #2e7d32; }
.level-btn.on.lv1 { border-color: #b71c1c; background: #fff5f5; }
.level-btn.on.lv2 { border-color: #e65100; background: #fff8f0; }
.level-btn.on.lv3 { border-color: #2e7d32; background: #f0faf0; }
.level-btn .lv-desc { font-size: 12px; color: #999; margin-top: 2px; font-weight: 400; }
.level-btn-inner { display: flex; flex-direction: column; }

/* ── 라디오 버튼 스타일 ── */
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-btn {
  padding: 8px 16px; border-radius: 20px; font-size: 13.5px;
  border: 1.5px solid #ddd; background: #fff; color: #888;
  cursor: pointer; transition: all .15s; font-family: inherit; font-weight: 500;
}
.radio-btn.on { border-color: #e05c00; background: #fff3eb; color: #e05c00; }

/* ── 체크박스 ── */
.chk-list { display: flex; flex-direction: column; gap: 11px; }
.chk-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.chk-item input[type=checkbox] {
  width: 17px; height: 17px; accent-color: #e05c00;
  cursor: pointer; flex-shrink: 0; margin-top: 2px;
}
.chk-item span { font-size: 14px; color: #555; line-height: 1.55; user-select: none; }

/* ── 제출 버튼 ── */
.submit-btn {
  width: 100%; padding: 14px; background: #e05c00; color: #fff;
  border: none; border-radius: 10px; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background .15s; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.submit-btn:hover { background: #c44f00; }
.submit-btn:disabled { background: #f0b48a; cursor: not-allowed; }

/* ── 완료 화면 ── */
.success-wrap {
  text-align: center; padding: 2.5rem 1.5rem;
  background: #fff; border-radius: 14px; border: 1px solid #dce8f4;
}
.success-icon {
  width: 60px; height: 60px; border-radius: 50%; background: #fff0e0;
  margin: 0 auto 1.25rem;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.success-title { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.success-desc { font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 1.25rem; }
.receipt {
  background: #f5f8fc; border-radius: 10px; padding: 1rem 1.25rem;
  text-align: left; font-size: 13.5px; color: #555;
  line-height: 2.1; margin-bottom: 1.5rem;
}
.receipt strong { color: #1a1a1a; }
.receipt .lv1-text { color: #b71c1c; font-weight: 700; }
.receipt .lv2-text { color: #e65100; font-weight: 700; }
.receipt .lv3-text { color: #2e7d32; font-weight: 700; }
.reset-btn {
  padding: 11px 28px; background: #e05c00; color: #fff;
  border: none; border-radius: 9px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.reset-btn:hover { background: #c44f00; }

/* ── 로딩 ── */
.loading-bar { text-align: center; padding: 3rem; color: #aaa; font-size: 14px; }

/* ── 에러 배너 ── */
.err-banner {
  background: #fff0ee; border: 1px solid #f5b7b1; border-radius: 9px;
  padding: 10px 14px; font-size: 13px; color: #c0392b; margin-bottom: 12px;
}

/* ── 관리자 링크 ── */
.admin-link-wrap { text-align: center; margin-top: 1.75rem; }
.admin-link {
  font-size: 12px; color: #ccc; background: none; border: none;
  cursor: pointer; text-decoration: underline; font-family: inherit;
}

/* ── Firebase 설정 안내 ── */
.setup-banner {
  background: #fffbe6; border: 1px solid #f9c74f; border-radius: 10px;
  padding: 1rem 1.25rem; font-size: 13px; color: #7a6000;
  line-height: 1.8; margin-bottom: 1.25rem;
}
.setup-banner strong { color: #5a4400; }
.setup-banner code {
  background: #fff3c4; padding: 1px 5px; border-radius: 4px;
  font-family: monospace; font-size: 12px;
}

/* ── 사고번호 배지 ── */
.acc-no-badge {
  display: inline-block; background: #e05c00; color: #fff;
  font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 20px;
  margin-bottom: 12px; letter-spacing: .04em;
}

@media (max-width: 420px) {
  .radio-row { gap: 6px; }
  .radio-btn { padding: 7px 12px; font-size: 13px; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}

/* ============================================================
   ===== DESIGN SYSTEM v2 (신규, 점진 반영) =====
   additive-only. 기존 클래스(.card/.radio-row 등)는 수정하지 않는다.
   01-design-system.html <style> 원본 값 그대로 이식.
   ============================================================ */

/* ── Utilities ── */
.mono {
  font-family: var(--font-mono);
  letter-spacing: .01em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ── Buttons ── */
.btn {
  padding: 10px 16px; border: 1.5px solid transparent;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  font-family: var(--font-sans); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s var(--ease);
}
.btn-primary { background: var(--brand-orange); color: #fff; }
.btn-primary:hover { background: var(--brand-orange-600); }
.btn-secondary { background: var(--navy); color: #fff; }
.btn-outline { background: #fff; color: var(--ink-800); border-color: var(--ink-300); }
.btn-outline:hover { border-color: var(--ink-500); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--ink-100); }
.btn-danger { background: var(--lv1); color: #fff; }
.btn-warn { background: var(--warn); color: var(--ink-900); }

.btn-sm { padding: 6px 10px; font-size: 11.5px; border-radius: 6px; }
.btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 10px; }

/* ── Form ── */
.form-input {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--ink-200);
  border-radius: 6px;
  font-family: var(--font-sans); font-size: 13.5px;
  color: var(--ink-800); background: #fff;
  outline: none; transition: border-color .15s;
}
.form-input:focus { border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(224,92,0,.12); }
.form-input.err { border-color: var(--lv1); }
.form-label { display: block; font-size: 12px; font-weight: 500; color: var(--ink-700); margin-bottom: 6px; }
.form-hint { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); margin-top: 4px; letter-spacing: .04em; }

/* ── Radio chip (filter chip 전용. 기존 .radio-row 재정의 금지) ── */
.radio-chip {
  padding: 7px 14px; border: 1.5px solid var(--ink-200);
  border-radius: 20px; background: #fff;
  font-size: 12.5px; color: var(--ink-600); cursor: pointer;
  font-family: var(--font-sans);
}
.radio-chip.on { border-color: var(--brand-orange); color: var(--brand-orange); background: var(--brand-orange-050); }

/* ── Level buttons ── */
.lvl-stack { display: flex; flex-direction: column; gap: 8px; }
.lvl-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1.5px solid var(--ink-200);
  border-radius: 6px; background: #fff; cursor: pointer;
  text-align: left; font-family: var(--font-sans);
}
.lvl-btn .code {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 3px; letter-spacing: .06em;
}
.lvl-btn .lbl { flex: 1; font-size: 13px; color: var(--ink-800); }
.lvl-btn .desc { font-size: 11px; color: var(--ink-500); font-family: var(--font-mono); }
.lvl-btn.on.l1 { border-color: var(--lv1); background: var(--lv1-bg); }
.lvl-btn.on.l2 { border-color: var(--lv2); background: var(--lv2-bg); }
.lvl-btn.on.l3 { border-color: var(--lv3); background: var(--lv3-bg); }
.lvl-btn .code.l1 { background: var(--lv1); color: #fff; }
.lvl-btn .code.l2 { background: var(--lv2); color: #fff; }
.lvl-btn .code.l3 { background: var(--lv3); color: #fff; }

/* ── Badge (사각형 + 하단 언더라인, mono) ── */
.b-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 2px solid;
}
.b-tag.critical { background: var(--lv1-bg); color: var(--lv1); border-color: var(--lv1); }
.b-tag.warn { background: var(--warn-bg); color: #7a5a00; border-color: var(--warn); }
.b-tag.ok { background: var(--lv3-bg); color: var(--lv3); border-color: var(--lv3); }
.b-tag.neutral { background: var(--ink-100); color: var(--ink-600); border-color: var(--ink-400); }
.b-tag.info { background: var(--navy-050); color: var(--navy); border-color: var(--navy); }

/* ── Alert ── */
.alert {
  padding: 10px 14px; border-radius: 6px;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55;
  border-left: 3px solid;
}
.alert .icn { font-size: 15px; }
.alert-critical { background: var(--lv1-bg); color: #7a1010; border-color: var(--lv1); }
.alert-warn { background: var(--warn-bg); color: #6a4900; border-color: var(--warn); }
.alert-info { background: var(--navy-050); color: var(--navy); border-color: var(--navy); }
.alert-ok { background: var(--lv3-bg); color: #1c4b1f; border-color: var(--lv3); }

/* ── KPI cards (dashboard module) ── */
.kpi {
  padding: 14px; background: #fff;
  border: 1px solid var(--ink-200);
  border-left: 2px solid var(--brand-orange);
  border-radius: 4px;
}
.kpi.k-orange { border-left-color: var(--brand-orange); }
.kpi.k-lv1 { border-left-color: var(--lv1); }
.kpi.k-warn { border-left-color: var(--warn); }
.kpi.k-lv3 { border-left-color: var(--lv3); }
.kpi-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-500); letter-spacing: .08em; text-transform: uppercase;
}
.kpi-num {
  font-family: var(--font-mono); font-size: 30px; font-weight: 500;
  color: var(--ink-900); line-height: 1;
}
.kpi-delta { font-family: var(--font-mono); font-size: 10px; margin-top: 6px; }

/* ── Data table ── */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  text-align: left; padding: 8px 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 500;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-050);
}
.tbl td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--ink-100);
  color: var(--ink-800);
}
.tbl td.mono { font-family: var(--font-mono); font-size: 11px; color: var(--brand-orange); }
.tbl tr:hover td { background: var(--ink-050); }