/* ==========================================================
   관리자 화면 공통 스타일 — office.woworder.kr
   · 지금은 기능을 확인하는 기본 화면: 시스템 글꼴 · 회색 선 · 파란 버튼
   · 디자인은 기능이 정해진 뒤 와우오더 디자인에 맞춰 입힌다
   · 순서: 색 → 바탕 → 공통 머리 · 알림 줄 → 틀 · 판 → 버튼 · 입력 → 표 · 탭 · 칩 · 알약
           → 로그인 → 건 목록 → 건 상세 → 새 건(받을 서류) → 서류 템플릿 → 설정 → 휴대폰 폭(640px 이하)
   ========================================================== */

/* ---------- 색 · 크기 ---------- */
:root {
  --ink: #171717;        /* 글자 (순수 검정 금지) */
  --ink-2: #4a5059;      /* 보조 글자 */
  --ink-3: #848b95;      /* 흐린 글자 */
  --line: #e4e7eb;       /* 선 */
  --line-2: #cdd2d8;     /* 입력칸 · 버튼 테두리 */
  --bg: #f5f6f8;         /* 바탕 */
  --card: #ffffff;       /* 판 */
  --hover: #f0f2f5;
  --blue: #3d7efe;       /* 주 버튼 */
  --blue-ink: #2a68e6;   /* 파란 글자 · 누른 주 버튼 */
  --blue-soft: #ebf2ff;
  --red: #d71900;
  --red-soft: #fdeeeb;
  --red-line: #f1bfb6;
  --green: #137a52;
  --green-soft: #e7f5ee;
  --radius: 10px;
}

/* ---------- 바탕 ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
    "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { margin: 0; font-size: 22px; line-height: 1.35; }
h2 { margin: 0; font-size: 17px; }
h3 { margin: 0 0 8px; font-size: 15px; }
p { margin: 0; }
dl, dd { margin: 0; }

[hidden] { display: none !important; }

.muted { color: var(--ink-3); font-size: 14px; }
.text-red { color: var(--red); }
.nowrap { white-space: nowrap; }

/* ---------- 공통 머리 ---------- */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 28px;
  padding: 12px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.top-brand {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
.top-brand:hover { text-decoration: none; }

/* 메뉴: 건 목록 · 새 건 · 계약서 템플릿 · 서류 템플릿 · 설정 + [로그아웃]
   폭이 모자라면(휴대폰) 다음 줄로 넘김 — 가로 스크롤 없음 */
.top-nav {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.top-nav a,
.top-logout {
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.top-nav a:hover,
.top-logout:hover { background: var(--hover); text-decoration: none; }
.top-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.top-logout { margin-left: auto; }

/* ---------- 알림 줄 (화면 맨 위에 떠 있음) ---------- */
.note {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.note-ok { background: var(--blue-soft); color: var(--blue-ink); border-color: #cddcfb; }
.note-error { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }

.note-close {
  flex: none;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ---------- 틀 · 판 ---------- */
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}
.wrap-narrow { max-width: 560px; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel {
  margin-bottom: 16px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.panel-danger { border-color: var(--red-line); }

/* 판 제목 아래 한 줄 설명 (아래 내용과 띄움) */
.panel-line { margin-bottom: 12px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.empty,
.loading {
  padding: 40px 0;
  color: var(--ink-3);
  text-align: center;
}

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:disabled:hover { background: var(--card); }

.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-ink); }
.btn-primary:disabled:hover { background: var(--blue); }

.btn-danger { border-color: var(--red-line); color: var(--red); }
.btn-danger:hover { background: var(--red-soft); }

.btn-sm { min-height: 34px; padding: 0 12px; font-size: 14px; }
.btn-block { width: 100%; }

.btn:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.top-nav a:focus-visible,
.top-logout:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ---------- 입력 ---------- */
.field { display: block; margin-bottom: 16px; }

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.field-help {
  display: block;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 13px;
}

.input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;   /* 16px 아래면 아이폰이 확대함 */
}
.input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.input:disabled { background: var(--bg); color: var(--ink-3); }

.input-sm { min-height: 34px; padding: 4px 10px; font-size: 15px; }
.input-num { width: 88px; }

/* 입력칸 + 단위(일) */
.input-unit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.check-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}

/* 여러 칸을 묶는 칸(받을 서류 · 장수 · 받기) — 브라우저 기본 테두리 · 안쪽 여백 없앰 */
fieldset.field {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
fieldset.field > legend { padding: 0; }

textarea.input { resize: vertical; line-height: 1.5; }

/* 링크 복사가 막혔을 때 보여 주는 주소 칸 */
.copy-fallback {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 14px;
}

/* ---------- 표 ---------- */
.table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.table {
  width: 100%;
  border-collapse: collapse;
}
.table th,
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.table th {
  background: #fafbfc;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table .sub { margin-top: 2px; color: var(--ink-3); font-size: 13px; }
.table .is-archived td { color: var(--ink-3); }
.templates td:first-child { min-width: 200px; }
.templates .actions { flex-wrap: nowrap; }

/* ---------- 탭 · 칩 · 알약 ---------- */
.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.tab {
  margin-bottom: -1px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-2);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.tab[aria-pressed="true"] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 700; }
.tab b { margin-left: 4px; color: var(--ink-3); font-weight: 600; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.chip {
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.chip:hover { background: var(--hover); }
.chip b { margin-left: 4px; font-weight: 700; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef0f3;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.pill-blue { background: var(--blue-soft); color: var(--blue-ink); }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-red { background: var(--red-soft); color: var(--red); }

/* ---------- 로그인 ---------- */
.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}

.login {
  width: 100%;
  max-width: 400px;
  padding: 24px 16px;
}

.login-title {
  margin-bottom: 20px;
  text-align: center;
}

.login-box {
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.login-lead { margin-bottom: 4px; }

.login-qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 14px auto;
  border: 1px solid var(--line);
  image-rendering: pixelated;
}

.login-secret {
  display: block;
  margin: 6px 0 18px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-align: center;
  word-break: break-all;
  user-select: all;
}

.input-code {
  font-size: 22px;
  letter-spacing: 0.3em;
  text-align: center;
}

/* ---------- 건 목록 ---------- */
.search {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin-bottom: 12px;
}

.cases td { white-space: nowrap; }
.cases td.cell-wrap { white-space: normal; min-width: 180px; overflow-wrap: anywhere; }
.cases tbody tr { cursor: pointer; }
.cases tbody tr:hover { background: #f8fafc; }
.cases .code { font-weight: 700; }

/* ---------- 건 상세 ---------- */
.back {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--ink-2);
  font-size: 14px;
}

.case-head { margin-bottom: 16px; }

.case-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.case-sub { margin-top: 4px; color: var(--ink-2); }
.case-memo { margin-top: 2px; color: var(--ink-2); overflow-wrap: anywhere; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 10px 0 14px;
  font-size: 14px;
}
.meta div { display: flex; gap: 6px; }
.meta dt { color: var(--ink-3); }

/* 이름 · 값 줄 */
.kv {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 14px;
}
.kv div { display: flex; gap: 12px; }
.kv dt { flex: 0 0 104px; color: var(--ink-3); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }

/* 서명 */
.signers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.signer {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.signer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.signer-phone {
  margin: 4px 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.inline-form .input-unit { gap: 6px; }

/* 진행 단계 */
.stage-now { margin-bottom: 10px; font-weight: 700; }

.stage-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.stage-pick {
  display: inline-flex;
  gap: 6px;
}
.stage-pick .input { width: auto; max-width: 220px; }

.stages {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.stage {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.stage-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stage-no {
  flex: 0 0 22px;
  color: var(--ink-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.stage-name { flex: 1; min-width: 0; }

.stage-at {
  color: var(--ink-3);
  font-size: 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stage.is-done .stage-name { color: var(--ink-2); }
.stage.is-todo .stage-name { color: var(--ink-3); }
.stage.is-current {
  margin: 0 -20px;
  padding: 10px 20px;
  background: var(--blue-soft);
}
.stage.is-current .stage-name { font-weight: 700; }
.stage.is-current .pill-blue { background: var(--card); }

/* 단계 안의 상자 (체크 목록 · 배송) */
.stage-box {
  margin: 10px 0 4px 32px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.stage-box-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px 12px;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 14px;
  cursor: pointer;
}

.ship-fields {
  display: grid;
  grid-template-columns: 180px minmax(0, 260px);
  gap: 8px 12px;
  margin-bottom: 10px;
}
.ship-fields .field { margin-bottom: 0; }

/* 서류 */
.slots {
  display: grid;
  gap: 10px;
}

.slot {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 4px;
}

.files {
  margin: 0;
  padding: 0;
  list-style: none;
}

.file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.file:first-child { border-top: 0; }

.file-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.file-name { font-weight: 600; overflow-wrap: anywhere; }
.file.is-deleted .file-name { color: var(--ink-3); font-weight: 400; }

.merchant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* 입력값 */
.values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

/* 알림톡 기록 · 진행 기록 */
.log {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.log-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.log-row:first-child { border-top: 0; }

.log-at {
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.log-who { color: var(--ink-2); }
.log-what { font-weight: 600; }
.log-detail { color: var(--ink-3); overflow-wrap: anywhere; }

/* ---------- 새 건 — 받을 서류 (서류 템플릿 체크 목록) ---------- */
.doc-list {
  display: grid;
  gap: 2px;
}

/* 서류명 아래에 서류 설명이 작게 — 여러 줄이라 체크 칸은 첫 줄에 맞춤 */
.doc-check {
  align-items: flex-start;
  padding: 4px 0;
}
.doc-check input { margin-top: 2px; }
.doc-check-note {
  display: block;
  color: var(--ink-3);
  font-size: 13px;
}

/* ---------- 서류 템플릿 ---------- */
.doc-templates td:nth-child(2) { min-width: 220px; }
.doc-templates .actions { flex-wrap: nowrap; }
.btn-arrow { min-width: 34px; padding: 0; }

/* 장수(최소 · 최대) · 받기(꼭 받기 · 있으면 받기) 한 줄 */
.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.field-row .check-line { margin-bottom: 0; }

/* ---------- 설정 ---------- */
.mode {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- 휴대폰 폭 ---------- */
@media (max-width: 640px) {
  .top { padding: 10px 16px 6px; gap: 4px 12px; }
  .top-nav { flex-basis: 100%; margin: 0 -10px; }

  .wrap { padding: 16px 16px 48px; }
  .panel { padding: 16px; }
  h1 { font-size: 20px; }

  .input-sm { font-size: 16px; }

  .signers,
  .values { grid-template-columns: 1fr; }

  .stage.is-current { margin: 0 -16px; padding: 10px 16px; }
  .stage-box { margin-left: 0; }
  .ship-fields { grid-template-columns: 1fr; }
  .stage-pick { flex-basis: 100%; }
  .stage-pick .input { flex: 1; max-width: none; }

  .kv dt { flex-basis: 96px; }

  /* 건 목록 표 → 줄마다 카드 */
  .table-wrap.as-cards { overflow: visible; background: none; border: 0; }
  .cases thead { display: none; }
  .cases,
  .cases tbody,
  .cases tr,
  .cases td { display: block; }
  .cases tr {
    margin-bottom: 8px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .cases td,
  .cases td.cell-wrap {
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 3px 0;
    border: 0;
    white-space: normal;
  }
  .cases td::before {
    content: attr(data-label);
    flex: 0 0 84px;
    padding-top: 1px;
    color: var(--ink-3);
    font-size: 13px;
  }
  .cases td > div { min-width: 0; }
}