/* ============================================================================
   NSNTEK ERP — 공용 셸 (타이틀바 + 모듈탭 + 리본)

   기준서 §7 — 모든 모듈이 이 셸을 쓴다. 모듈이 자기 색상 팔레트를 정의하는 것을
   금지한다. 색은 반드시 아래 CSS 변수를 통해서만 쓴다.

   테마 3종은 body 클래스로 전환된다 (2026-10-13 — 그레이·블루 폐기):
     (없음)    시그니처 (값 dark, 남색 — 기본)
     rb-light  라이트모드
     rb-night  다크모드 (무채색)
   ============================================================================ */

/* ── 테마 변수·상단 셸(타이틀바+리본)은 topbar.css 단일본으로 이동 ──────
   (2026-08-14 셸 단일화 — base.html 이 topbar.css 를 먼저 로드한다) */

/* ── 기본 ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
/* ★ height:100% 를 쓰면 body 가 뷰포트 높이로 잘려서 sticky 셸·표 머리글이
   첫 화면 이후 함께 스크롤아웃된다 — 반드시 min-height (2026-08-14) */
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ── 본문 ─────────────────────────────────────────────────────────────────── */
.content { padding: 18px 20px 40px; }
/* 한 판 화면의 아래 여백 줄이기는 topbar.css '.pane' 절에 있다 (2026-10-13) */
.page-title { font-size: 17px; font-weight: 700; margin: 0 0 14px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

/* ── 배너 (마이그레이션 경고 등) ─────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 12px;
  background: var(--warn);
  color: #1d1500;
  font-weight: 600;
}
.banner code {
  background: rgba(0, 0, 0, .18);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* ── 위젯 그리드 (홈) ────────────────────────────────────────────────────── */
/* 격자는 가로 12칸 · 세로 40px 줄 · 간격 14px (사용자 요청 2026-09-09: 모서리를
   끌어 자유롭게). 처음(09-08)의 4칸 × 150px 격자는 손으로 끌어도 고를 수 있는
   크기가 몇 개뿐이라 걷었다. 열 수(--hm-cols)는 dashboard.html 이 화면 폭에 따라
   12 → 6 → 3 으로 정한다. ★40 · 14 는 dashboard.html 의 ROW · GAP 과 **한 몸** —
   한쪽만 바꾸면 끌어당긴 크기와 실제 칸이 어긋난다.
   행 높이를 고정해야 '높이 n줄'이 뜻을 가진다 — 넘치는 내용은 위젯 안에서 스크롤 */
.widgets {
  display: grid;
  grid-template-columns: repeat(var(--hm-cols, 12), minmax(0, 1fr));
  grid-auto-rows: 40px;
  gap: 14px;
}
.widget {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.widget:hover { border-color: var(--accent); }
.widget h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.widget .empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  font-size: 12px;
}

/* ── 안내/오류 화면 ──────────────────────────────────────────────────────── */
.notice-box {
  max-width: 520px;
  margin: 70px auto;
  text-align: center;
  padding: 34px 28px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.notice-box .icon { font-size: 40px; margin-bottom: 12px; }
.notice-box h2 { margin: 0 0 8px; font-size: 18px; }
.notice-box p { margin: 0 0 6px; color: var(--text-dim); font-size: 13px; line-height: 1.7; }

/* ── 폼 / 버튼 ───────────────────────────────────────────────────────────── */
.field { margin-bottom: 13px; text-align: left; }
.field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.input {
  width: 100%;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}
.input:focus { border-color: var(--accent); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-block { width: 100%; }

.msg-error {
  padding: 9px 12px;
  margin-bottom: 13px;
  font-size: 12px;
  border-radius: 6px;
  background: rgba(242, 96, 106, .13);
  border: 1px solid var(--danger);
  color: var(--danger);
}

.msg-ok {
  padding: 9px 12px;
  margin-bottom: 13px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 6px;
  background: rgba(52, 201, 138, .12);
  border: 1px solid var(--ok);
  color: var(--ok);
}

/* ── 로그인 ──────────────────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-box {
  width: 340px;
  padding: 34px 30px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand .b1 { font-size: 25px; font-weight: 800; letter-spacing: .07em; }
.login-brand .b2 { font-size: 12px; font-weight: 600; letter-spacing: .22em; color: var(--accent); }
/* 비밀번호 찾기 (2026-10-01, templates/auth/forgot.html) — 로그인 판을 그대로 쓴다 */
.fp-title { text-align: center; font-size: 14px; font-weight: 700; margin: -8px 0 12px; }
.fp-steps { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px;
            font-size: 11px; color: var(--text-mute); counter-reset: fp; }
.fp-steps li { counter-increment: fp; }
.fp-steps li::before { content: counter(fp) '. '; }
.fp-steps li + li::after { content: none; }
.fp-steps li.on { color: var(--accent); font-weight: 700; }
.fp-hint { font-size: 11.5px; color: var(--text-mute); line-height: 1.6; margin: -4px 0 14px; text-align: left; }
.fp-code { font-size: 20px; letter-spacing: 6px; text-align: center; }
.fp-links { margin-top: 14px; text-align: center; font-size: 12px; }
.fp-links a { color: var(--text-dim); text-decoration: none; }
.fp-links a:hover { color: var(--accent); }


/* ── 상태 칩 (.chip 은 hr.css 가 다른 뜻으로 쓰고 있다) ────────────────────────────────────────────────────
   화면마다 따로 만들지 말고 이것을 쓴다. 같은 '상태'가 화면마다 다른
   모양이면 옮겨 다닐 때마다 다시 익혀야 한다.

       <span class="st-chip s-작성중">작성중</span>

   색은 '어디까지 왔는지' 를 나타낸다 — 시작은 흐리고, 사람 손을 기다리는
   중간은 주황, 넘어간 것은 보라, 끝난 것은 초록, 되돌아온 것은 빨강. */
.st-chip {
  display: inline-block; font-size: 10px; line-height: 1.6;
  padding: 1px 8px; border-radius: 9px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--text-mute);
}
.st-chip.s-작성중   { color: var(--text-mute); }
.st-chip.s-결재중,
.st-chip.s-전자결재 { color: #EF9F27; border-color: #EF9F27; }
.st-chip.s-결재완료,
.st-chip.s-요청,
.st-chip.s-요청중   { color: var(--accent); border-color: var(--accent); }
.st-chip.s-발주완료,
.st-chip.s-완료     { color: #5DCAA5; border-color: #5DCAA5; }
.st-chip.s-입고완료 { color: #5DCAA5; border-color: #5DCAA5;
                   background: color-mix(in srgb, #5DCAA5 14%, transparent); }
.st-chip.s-입고중   { color: #EF9F27; border-color: #EF9F27; }   /* 일부만 들어옴 — 사람 손 대기 */
.st-chip.s-반려     { color: var(--danger); border-color: var(--danger); }
/* 제어관리 진행상황 (사용자 요청 2026-09-03) — 흐름은 진행중 → 셋업중 → 완료,
   보류는 멈춘 것이라 흐린다 */
.st-chip.s-진행중   { color: var(--accent); border-color: var(--accent); }
.st-chip.s-셋업중   { color: #8B5CF6; border-color: #8B5CF6; }
.st-chip.s-보류     { color: var(--text-mute); border-style: dashed; }
.st-chip.s-취소     { color: var(--text-mute); text-decoration: line-through; }