/* ===========================================================================
   SEAL 관리대장 — 화면 디자인
   현장에서 쓰는 장부이므로 장식보다 '읽히는 것'을 우선한다.
   숫자는 고정폭 글꼴로 자릿수를 맞춰 눈으로 비교하기 쉽게 했다.
   =========================================================================== */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --line: #e2e5ea;
  --line-strong: #c9ced6;
  --text: #1c2026;
  --muted: #6b7280;
  --accent: #1d4ed8;
  --in: #047857;        /* 입고 = 초록 */
  --out: #b45309;       /* 출고 = 주황 */
  --warn-bg: #fff7ed;
  --warn-line: #fdba74;
  --warn-text: #9a3412;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Malgun Gothic", "맑은 고딕", -apple-system, system-ui, sans-serif;
}

/* ---------------------------------------------------------------- 주소 경고 띠

   파일을 직접 열면(file://) 브라우저 보안 정책 때문에 화면 동작 코드가
   실행되지 않는다. 그러면 "눌러도 아무 일이 없는" 상태가 되어 원인을 알 수 없다.
   그래서 눈에 띄게 알려 준다. */

.file-warn {
  background: #fef2f2; border-bottom: 2px solid #fca5a5; color: #7f1d1d;
  padding: 12px 20px; font-size: 13px; line-height: 1.6;
}
.file-warn b { color: #b91c1c; }
.file-warn code {
  background: #fff; border: 1px solid #fca5a5; border-radius: 4px;
  padding: 1px 6px; font-family: Consolas, monospace; font-size: 12px;
}
.file-warn-now { display: block; margin-top: 4px; opacity: .8; }

/* ---------------------------------------------------------------- 머리말 */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand h1 { margin: 0; font-size: 18px; letter-spacing: -0.3px; }
.depot { color: var(--muted); font-size: 12px; }
.top-right { display: flex; align-items: center; gap: 12px; }
.stamp { color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- 선사 탭

   탭 색을 실제 씰 라벨 색과 맞췄다. 현장에서 상자 라벨을 볼 때와 같은 기준으로
   구분되므로 선사를 헷갈릴 일이 줄어든다.
   노란색은 배경으로 쓰면 글자가 잘 안 보이므로, 글자는 진한 갈색으로 둔다. */

.carriers { display: flex; gap: 6px; padding: 12px 20px 0; }
.carriers button {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-strong); background: var(--panel);
  padding: 8px 18px; border-radius: 8px 8px 0 0; border-bottom: none;
  cursor: pointer; font-size: 14px; color: var(--muted);
}

/* 고르지 않은 탭에도 색 점을 두어 한눈에 구분되게 한다 */
.carriers button::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--seal, #cbd0d8); border: 1px solid rgba(0, 0, 0, .18);
}
.carriers button[data-color="YELLOW"] { --seal: #f2c14e; }
.carriers button[data-color="GREEN"]  { --seal: #2f9e63; }

.carriers button.on {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 700;
}
.carriers button.on[data-color="YELLOW"] {
  background: #f2c14e; border-color: #d9a93a; color: #4a3708;
}
.carriers button.on[data-color="GREEN"] {
  background: #2f9e63; border-color: #268053; color: #fff;
}
.carriers button.on::before { background: #fff; border-color: rgba(0, 0, 0, .25); }

/* ---------------------------------------------------------------- 재고 카드 */
.stats {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  margin: 0 20px; border-radius: 0 8px 8px 8px; overflow: hidden;
}
.stat { flex: 1 1 150px; background: var(--panel); padding: 12px 16px; }
.stat .k { color: var(--muted); font-size: 12px; }
.stat .v {
  font-size: 22px; font-weight: 700; letter-spacing: -0.5px;
  font-family: Consolas, "D2Coding", monospace;
}
.stat.main .v { color: var(--accent); }
.stat.warn .v { color: var(--warn-text); }

/* ---------------------------------------------------------------- 검색 */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px 20px 10px;
}
.filters input[type="search"] {
  flex: 1 1 320px; min-width: 220px;
  padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px;
  font-size: 14px; background: var(--panel);
}
.filters select, .filters input[type="date"] {
  padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--panel); font-size: 13px;
}
.tilde { color: var(--muted); }
.chk { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); cursor: pointer; }
.count { margin-left: auto; color: var(--muted); font-size: 13px; }

.btn, .btn-ghost {
  border: 1px solid var(--line-strong); background: var(--panel);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost:hover, .btn:hover { filter: brightness(0.97); }

/* 누를 수 없는 버튼은 흐리게 — 눌러도 아무 일이 없는 이유를 눈으로 알 수 있게 */
.btn:disabled, .btn-ghost:disabled {
  opacity: .45; cursor: default; filter: none;
}

/* 단추 안의 글자와 그림을 세로 가운데로 맞춘다.
   그림 기호는 이모지가 아니라 그림(SVG)으로 그린다 —
   이모지는 운영체제마다 크기와 기준선이 달라 가운데가 맞지 않는다. (실제로 겪은 문제) */
.btn, .btn-ghost, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  line-height: 1.2;
}
a.btn { text-decoration: none; }
.icon { flex: none; display: block; }

/* ---------------------------------------------------------------- 표 */
main { padding: 0 20px 40px; }

.ledger {
  width: 100%; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px;
  /* overflow: hidden 을 쓰면 안 된다.
     표가 잘림 영역이 되어 머리글 고정(position: sticky)의 기준이 어긋나고,
     머리글이 데이터 줄과 겹쳐 보인다. 실제로 겪은 문제다. */
}
.ledger thead th {
  /* 위쪽 띠 높이는 글꼴·확대 배율에 따라 달라지므로 고정값을 쓰지 않는다.
     app.js 가 실제 높이를 재어 --top-h 에 넣어 준다. */
  position: sticky; top: var(--top-h, 58px); z-index: 10;
  background: #eef1f5; border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 var(--line-strong);
  padding: 9px 10px; font-size: 12px; color: #414a57; text-align: left;
  white-space: nowrap;
}
.ledger td {
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ledger tbody tr:hover { background: #f8fafc; }

.c-num { text-align: right; }
td.c-num, td.c-date {
  font-family: Consolas, "D2Coding", monospace; font-size: 13px;
  text-align: right; white-space: nowrap;
}
td.c-date { text-align: left; }
.c-company { max-width: 280px; }
.c-tel, .c-person { white-space: nowrap; color: #445; }
.masked { color: var(--muted); letter-spacing: 0.5px; }

.kind { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.kind.입고 { background: #ecfdf5; color: var(--in); }
.kind.출고 { background: #fff7ed; color: var(--out); }

/* 검토가 필요한 줄은 배경으로 바로 알아보게 한다 */
tr.review { background: var(--warn-bg); }
tr.review:hover { background: #ffedd5; }
.flag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border: 1px solid var(--warn-line); border-radius: 4px;
  background: #fff; color: var(--warn-text); font-size: 11px; white-space: nowrap;
}

/* 씰 번호 칸: 접었다 펴기 */
.seals { font-family: Consolas, "D2Coding", monospace; font-size: 12px; }
.seal-toggle {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 12px; text-decoration: underline;
  font-family: inherit;
}
.seal-list { margin: 6px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 20px; }
.seal-list li { padding: 1px 0; break-inside: avoid; }
.seal-list li.odd { color: var(--warn-text); }

.empty, .more { padding: 28px; text-align: center; color: var(--muted); }

.foot { padding: 16px 20px 40px; color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- 좁은 화면 */
@media (max-width: 860px) {
  .ledger thead { display: none; }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger tr { border-bottom: 2px solid var(--line-strong); padding: 8px 4px; }
  .ledger td { border: none; padding: 3px 10px; text-align: left !important; }
  .ledger td::before {
    content: attr(data-label) " · "; color: var(--muted); font-size: 11px;
    font-family: "Malgun Gothic", sans-serif;
  }
  .seal-list { columns: 1; }
}


/* ---------------------------------------------------------------- 열람 잠금 화면

   관리자가 VIEW_PASSWORD 를 걸어 두면 이 화면이 먼저 뜬다.
   잠겨 있을 때 빈 화면에 오류만 뜨면 무엇을 해야 할지 알 수 없으므로,
   무엇을 넣어야 하는지 분명히 보여 준다. */

.gate {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: grid; place-items: center; padding: 20px;
}
.gate-box {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 32px 28px;
  width: min(360px, 100%);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 6px 24px rgba(20, 25, 35, .08);
}
.gate-box h2 { margin: 0; font-size: 19px; letter-spacing: -0.3px; }
.gate-msg { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.gate-msg.err { color: #b91c1c; }
.gate-box input {
  padding: 11px 13px; font-size: 15px;
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.gate-box input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.gate-box .btn { padding: 11px; font-size: 15px; }
.gate-hint { margin: 0; color: var(--muted); font-size: 11px; text-align: center; }