@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   레거시 호환 — ⚠ **철거 예정 파일.** 새 화면에서 여기 있는 이름을 쓰지 말 것.

   왜 있나: 디자인 시스템(tokens·components)을 세우기 전에 만든 화면 23개가
   base.html 안에 있던 옛 이름(.btn.ghost · .badge.sent · .btn-green · .wrap …)에
   기대고 있다. 한 번에 다 고치면 회귀 위험이 크므로, 옛 이름을 **토큰으로 다시
   표현**해 놓고 화면을 하나씩 옮긴다. 옮길 때마다 여기서 그 줄을 지운다.

   ★ 여기 값들은 전부 var(--…) 다 — 옛 이름을 쓰는 화면도 색·간격은 이미 토큰을
     따른다. 그래서 브랜드 색을 바꾸면 아직 안 옮긴 화면까지 같이 바뀐다.

   철거 목록(옮길 화면) — docs/디자인시스템.md §7 이식 체크리스트와 같은 표
     office: work_list · estimate · payroll_slips · quote · client_chart · master ·
             work_archive · docs · payroll · engagement_* ·   (✅ mydesk 이식 2026-10-03)
     portal:  report · upcoming · history · payroll_detail · payslip ·
             doc_detail · sign · login · recover · estimate_view
             (✅ base·home 이식 2026-10-02 — 셸 정리. .wrap 은 sign 이 아직 쓴다)
     recon:  ✅ 이식 완료 (첫 사례)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 사무실 골격 (header/main 엘리먼트 선택자) ─────────────────
   ⚠ 엘리먼트 선택자라 화면의 `main { max-width: … }` 개별 지정이 계속 이긴다.
      새 화면은 <main class="page page--wide"> 를 쓴다. */
header {
  background: var(--brand); color: var(--brand-ink);
  padding: var(--s3) var(--s6);
  display: flex; align-items: center; gap: var(--s6);
}
header .brand { font-weight: 700; font-size: var(--fs-h2); }
header nav a { color: var(--brand-soft); text-decoration: none;
               margin-right: var(--s4); font-size: var(--fs-md); }
header nav a:hover { color: var(--brand-ink); }
main { max-width: var(--page-w); margin: var(--s6) auto; padding: 0 var(--s4); }

/* 표 — 옛 화면들은 클래스 없이 <table> 을 쓴다 */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th, td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line-2); text-align: left; }
th { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }

/* 옛 버튼 — .btn 자체는 components.css 것을 쓰고, 변형 이름만 잇는다 */
.btn.ghost { background: var(--surface); color: var(--brand); }

/* 옛 배지 — .badge 는 components.css, 상태 이름만 톤으로 잇는다 */
.badge.draft { background: var(--neutral-bg); color: var(--neutral); }
.badge.sent { background: var(--warn-bg); color: var(--warn); }
.badge.viewed { background: var(--info-bg); color: var(--info); }
.badge.signed { background: var(--ok-bg); color: var(--ok); }
.badge.archived { background: var(--accent-bg); color: var(--accent); }

/* ── 고객 포털 ─────────────────────────────────────────────── */
[data-surface="portal"] body { display: flex; justify-content: center; }
.wrap { width: 100%; max-width: var(--page-w-portal); padding: var(--s4) var(--s3) 60px; }
[data-surface="portal"] .card { border: none; box-shadow: var(--shadow-card); }
.sub { color: var(--muted); font-size: var(--fs-md); margin: 0 0 var(--s2); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 포털 버튼은 기본이 「큰 버튼」 — 폰에서 엄지로 누르는 것이 기본이라서.
   (사무실은 마우스라 중간 크기가 기본. 이 차이는 의도된 것) */
[data-surface="portal"] .btn {
  padding: var(--s3) var(--s4); min-height: var(--tap);
  font-size: var(--fs-lg); font-weight: 700; border-radius: 9px; border: none;
}
/* ⚠ 위 줄이 변형까지 덮어 **선 단추가 테두리 없는 글자**로, 작은 단추가 큰 단추로 보였다(2026-10-10 납부서 화면에서 발견).
   변형 이름을 쓴 단추는 변형대로 — 줄 안의 [번호 복사] 같은 작은 단추도 엄지가 닿게 높이만 지킨다. */
[data-surface="portal"] .btn--line { border: 1.5px solid var(--brand); }
[data-surface="portal"] .btn--sm { padding: var(--s1) var(--s3); min-height: 36px; font-size: var(--fs-sm); }
/* ⚠ 이름은 green 이지만 색은 **브랜드(네이비)** 다 — 2026-08-10 포털 브랜드 통일.
   확정 로고에 없는 그린을 포털에만 쓰던 것을 없앴다(tokens.css §고객 포털).
   이름은 아직 23개 화면이 쓰고 있어 못 바꾼다 → 화면을 이식할 때 `.btn` 으로 교체하고 이 줄을 지운다. */
.btn-green { background: var(--brand); color: var(--brand-ink); }
.btn-line { background: var(--surface); color: var(--navy); border: 1.5px solid var(--navy); }
.btn-gray { background: #e9ecef; color: #555; }

.bg-req { background: var(--warn-bg); color: #8a6d00; }
.bg-sub { background: #e7f2fb; color: #2470b3; }
.bg-sent { background: #e0f2e9; color: var(--ok); }
.bg-rev { background: var(--danger-bg); color: var(--danger); }
.bg-done { background: #e9ecef; color: #666; }

@media (max-width: 480px) {
  .wrap { padding: var(--s3) var(--s2) 50px; }
  /* iOS 확대 방지 — components.css 와 같은 규칙(옛 화면에도 적용) */
  input, textarea, select { font-size: 16px !important; }
}