/* ============================================================
   v2 shell (P0-d) — .app 그리드 · 사이드바 · 상단바 · 모바일 헤더 · 탭바 · FAB
   어느 쪽 캔버스를 보일지는 desktop.css / mobile.css가 정한다(768px 경계 하나).
   여기서는 모바일 전용 크롬(.m-header·.tabbar)을 기본 숨김으로 둔다.
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
.app-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }
.app-content { flex: 1 1 auto; min-width: 0; }
.view { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

/* ── 사이드바 (PC) ───────────────────────────────────── */
.sidebar {
  grid-area: side;
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 14px 10px 10px;
  background: var(--side-bg);
  color: var(--side-ink);
  scrollbar-color: var(--side-bg-2) transparent;
}
.sb-org {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; margin-bottom: 10px;
  border-radius: var(--r-lg);
  color: var(--side-on-ink);
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  text-align: left;
}
.sb-org:hover { background: var(--side-hover); }
.sb-logo {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--amber); color: var(--on-amber);
  font-size: var(--fs-sm); font-weight: 900;
}
.sb-org-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-chev { color: var(--side-mute); line-height: 0; }
.sb-site {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  padding: 8px 10px; margin-bottom: 12px;
  border-radius: var(--r-lg);
  background: var(--side-bg-2);
  color: var(--side-on-ink);
  font-size: var(--fs-tbl); font-weight: var(--fw-semi);
  text-align: left;
}
.sb-site:hover { box-shadow: inset 0 0 0 1px var(--side-line); }
.sb-site-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-grp {
  padding: 10px 8px 4px;
  color: var(--side-grp);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .06em;
}
.sb-nav { display: flex; flex-direction: column; gap: 1px; }
.sb-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--side-ink);
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  text-align: left;
}
.sb-item svg { opacity: .6; }
.sb-item:hover { background: var(--side-hover); color: var(--side-on-ink); }
.sb-item.is-active { background: var(--side-on); color: var(--side-on-ink); font-weight: var(--fw-bold); }
.sb-item.is-active svg { color: var(--amber); opacity: 1; }

.sb-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--side-line);
  display: flex; flex-direction: column; gap: 6px;
}
.sb-status-slot { min-height: 18px; }
.sb-tools { display: flex; align-items: center; gap: 2px; }
.sb-tool {
  display: grid; place-items: center;
  width: 34px; height: 32px; border-radius: 7px;
  color: var(--side-ink);
  line-height: 0;
}
.sb-tool:hover { background: var(--side-hover); color: var(--side-on-ink); }
.sb-tool[aria-pressed="true"] { color: var(--amber); }
.sb-tool-out { margin-left: auto; }
.sb-user {
  padding: 0 8px 2px;
  color: var(--side-mute);
  font-size: var(--fs-2xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-user:empty { display: none; }

/* 저장 상태 호스트 — firebase.js/storage-guard.js가 '.header .ml-auto'에 배지를 붙인다.
   (사이드바 하단 ↔ 모바일 헤더 사이를 shell.js uiPlaceStatusHost()가 옮긴다) */
.status-host {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 0 8px;
  font-size: var(--fs-xs);
}
.status-host .ml-auto { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.status-host .ml-auto:empty { display: none; }
.save-status { color: var(--side-mute); font-weight: var(--fw-semi); transition: opacity var(--dur-slow) var(--ease); }
.save-status:empty::before { content: '저장 대기'; opacity: .7; }

/* ── 상단바 (PC) ─────────────────────────────────────── */
.topbar {
  position: sticky; top: 0;
  z-index: var(--z-header);
  display: flex; align-items: center; gap: 10px;
  height: var(--topbar-h);
  padding: 0 18px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.tb-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tb-crumb { color: var(--mute); font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.tb-crumb:empty { display: none; }
.tb-title h1 { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: -.01em; white-space: nowrap; }
.tb-month { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.tb-month .mp-label { min-width: 84px; font-weight: var(--fw-bold); }
.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.app-content { padding: 14px 18px 28px; }

/* ── 모바일 헤더 (현장명 + 저장 상태) ─────────────────── */
.m-header {
  display: none;
  position: sticky; top: 0;
  z-index: var(--z-header);
  align-items: flex-end; justify-content: space-between; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.m-site {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; min-height: var(--hit);
  text-align: left;
}
.m-site small { color: var(--mute); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.m-site b {
  display: flex; align-items: center; gap: 4px; max-width: 64vw;
  font-size: 19px; font-weight: var(--fw-extra); letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-site b svg { color: var(--mute); }
.m-status-slot { display: flex; align-items: center; min-height: var(--hit); }
.m-status-slot .save-status { color: var(--mute); }
.m-status-slot .save-status[data-tone="warn"] { color: var(--amber-ink); max-width: 46vw; white-space: normal; line-height: 1.2; font-size: 11px; }

/* ── 모바일 탭바 + 앰버 FAB ──────────────────────────── */
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-tabbar);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 6px 6px env(safe-area-inset-bottom, 0px);
  background: var(--card);
  border-top: 1px solid var(--line);
}
.tab {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--hit);
  color: var(--tab-ink);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
}
.tab.is-active { color: var(--tab-on); }
.tab-fab { justify-content: flex-start; }
.fab {
  display: grid; place-items: center;
  width: 50px; height: 50px; margin-top: -22px;
  border-radius: 16px;
  background: var(--amber);
  color: var(--on-amber);
  box-shadow: var(--sh-fab);
}
.tab-fab:active .fab { transform: scale(.96); }

/* ── 현장·회사 메뉴 (모달 본문) ──────────────────────── */
.site-list { display: flex; flex-direction: column; gap: 4px; }
.site-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 0;
  border-radius: var(--r-btn);
}
.site-row.is-current { background: var(--navy-soft); }
.site-pick {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 10px;
  text-align: left; font-weight: var(--fw-semi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-row.is-current .site-pick { color: var(--navy-ink); font-weight: var(--fw-extra); }
.site-add { display: flex; gap: 6px; margin-top: var(--sp-3); }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; padding: 0 10px;
  border-radius: var(--r-btn);
  text-align: left; font-weight: var(--fw-semi);
}
.menu-item:hover { background: var(--surface-2); }
.menu-item svg { color: var(--mute); }

/* ── 노무·근로자 UX (labor.js) ───────────────────────────────── */
/* 편집 가능한 칸은 항상 테두리로 보인다 */
.wl-tbl input.cell.wl-edit { border: 1px solid var(--line); background: var(--card); border-radius: 6px; }
.wl-tbl input.cell.wl-edit:hover { border-color: var(--mute); }
.wl-tbl input.cell.wl-edit:focus { border-color: var(--blue); }
/* 주민번호 형식·검증번호 경고 (저장은 허용) */
.ls-tbl input.is-warn, .ls-card-edit input.is-warn { border-color: var(--amber); background: var(--amber-soft, #FDF1DB); }
.wl-tbl input.cell.wl-edit.is-warn { border-color: var(--amber); }
/* 이번 달 한 줄 요약 */
.wl-month { white-space: nowrap; font-size: var(--fs-sm); color: var(--amber-ink); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.wl-month.is-none { color: var(--mute); font-weight: var(--fw-regular); }
/* 삭제 버튼: 가로 스크롤이 있어도 오른쪽 끝에 고정, 이름은 왼쪽 고정 */
.wl-tbl th:last-child, .wl-tbl td.wl-del { position: sticky; right: 0; background: var(--card); z-index: 2; box-shadow: -1px 0 0 var(--line); }
.wl-tbl td.wl-nm, .wl-tbl th:nth-child(2) { position: sticky; left: 0; background: var(--card); z-index: 1; }
.wl-tbl thead th:last-child, .wl-tbl thead th:nth-child(2) { z-index: 3; background: var(--surface-2); }
.wl-tbl td.wl-chk { padding-left: 8px; padding-right: 8px; }
/* 공수/공제 모드 모두 일자 칸이 있는 표에서 합계 칸 정렬 */
.ls-card-sign { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ls-card-days { min-height: 32px; }
/* 내보내기·인쇄 옵션 모달 */
.opt-list { display: flex; flex-direction: column; gap: 10px; }
.opt-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.opt-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); flex: none; }
.opt-row small { display: block; color: var(--mute); font-weight: var(--fw-regular); font-size: var(--fs-xs); }
/* 모바일 일자별 공수 시트 */
.lds-sum { font-weight: var(--fw-bold); color: var(--amber-ink); padding-bottom: 8px; }
.lds-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lds-dow { text-align: center; font-size: var(--fs-xs); color: var(--mute); }
.lds-dow.is-sun, .lds-cell.is-sun small { color: var(--red); }
.lds-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 1px solid var(--line); border-radius: 8px; padding: 2px 0 4px; background: var(--card); }
.lds-cell small { font-size: 10px; color: var(--mute); }
.lds-cell input { width: 100%; min-height: 30px; border: 0; background: transparent; text-align: center; font: inherit; font-weight: var(--fw-bold); color: var(--navy); padding: 0; }
.lds-cell input:focus { outline: 2px solid var(--navy); border-radius: 6px; }
.lds-hint { margin: 10px 0 0; color: var(--mute); font-size: var(--fs-xs); }
@media (max-width: 767px) {
  .wl-tbl td.wl-nm, .wl-tbl th:nth-child(2), .wl-tbl th:last-child, .wl-tbl td.wl-del { position: static; box-shadow: none; }
  .m-cards .wl-tbl td.wl-month.is-none { display: none; }
}

/* ── 서류·만료 관리 (js/ui/docs.js) ───────────────────── */
.docs-chip { border: 0; cursor: pointer; font-family: inherit; }
.docs-chip.is-empty { background: transparent; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); }
.docs-chip:hover { filter: brightness(0.96); }
.wl-nm .docs-chip { margin-left: var(--sp-1); }
.mst-row .docs-chip { flex: none; }
.docs-hint { margin: 0 0 var(--sp-2); color: var(--mute); font-size: var(--fs-sm); }
.docs-types { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.docs-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.docs-row { border: 1px solid var(--line); border-radius: var(--r-btn); padding: var(--sp-2) var(--sp-3); background: var(--card); }
.docs-row-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.docs-type { flex: 1; min-width: 0; }
.docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.docs-f span { font-size: var(--fs-xs); color: var(--mute); }
.docs-none { padding: var(--sp-3); text-align: center; color: var(--mute); font-size: var(--fs-sm); }
.docs-items { display: flex; flex-direction: column; }
.docs-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--hit, 44px); padding: var(--sp-1) 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; }
.docs-item:last-child { border-bottom: 0; }
.docs-item:hover { background: var(--navy-soft); }
.docs-item-kind { flex: none; width: 3.2em; color: var(--mute); font-size: var(--fs-xs); }
.docs-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.docs-item-main small { color: var(--mute); }
.docs-more { padding-top: var(--sp-1); color: var(--mute); font-size: var(--fs-xs); text-align: right; }
@media (min-width: 768px) { .docs-grid { grid-template-columns: 1fr 1fr 1fr 1.6fr; } }

/* ── 지급 상태 (js/ui/pay.js) — 칩·시트·노무대장 체크·대시보드 카드. 색은 토큰만 ───────── */
.pay-chip { position: relative; margin-left: var(--sp-1); border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
.pay-chip::after { content: ""; position: absolute; inset: -8px -4px; }   /* 모바일 탭 영역 확장 */
.pay-chip:hover { filter: brightness(0.96); }
.vs-paysum, .ls-paysum { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-paysum b[data-tone="red"], .ls-paysum b[data-tone="red"], .pay-card-head .amt[data-tone="red"] { color: var(--red-ink); }
.vs-paysum b[data-tone="green"], .ls-paysum b[data-tone="green"] { color: var(--green-ink); }
.ls-paytd { white-space: nowrap; }
.ls-pay { display: inline-flex; align-items: center; gap: var(--sp-1); }
.ls-pay label { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit, 44px); cursor: pointer; }
.ls-pay input[type="checkbox"] { width: 18px; height: 18px; }
.ls-pay-t { font-size: var(--fs-xs); color: var(--red-ink); font-weight: var(--fw-semi); }
.ls-pay[data-st="paid"] .ls-pay-t { color: var(--green-ink); }
.ls-pay[data-st="partial"] .ls-pay-t { color: var(--amber-ink); }
.ls-pay[data-st="pre"] .ls-pay-t { color: var(--mute); }
.pay-from { padding-top: var(--sp-2); color: var(--mute); font-size: var(--fs-xs); }
.pay-from-btn { border: 0; background: none; padding: 0; color: var(--navy-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.ls-pay-none { color: var(--mute); font-size: var(--fs-xs); }
@media (min-width: 768px) { .ls-pay label { min-height: 28px; } }
.pay-sheet { display: flex; flex-direction: column; gap: var(--sp-3); }
.pay-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.pay-sum > div { display: flex; flex-direction: column; padding: var(--sp-2); border-radius: var(--r-btn); background: var(--bg); }
.pay-sum span { color: var(--mute); font-size: var(--fs-xs); }
.pay-sum b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.pay-sum > div:last-child b { color: var(--red-ink); }
.pay-basis { color: var(--mute); font-size: var(--fs-xs); }
.pay-quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pay-warn { padding: var(--sp-2); border-radius: var(--r-btn); background: var(--amber-soft); color: var(--amber-ink); font-size: var(--fs-sm); }
.pay-warn[hidden] { display: none; }
.pay-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.pay-check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--hit, 44px); }
.pay-card-head { display: flex; align-items: baseline; gap: var(--sp-2); padding-bottom: var(--sp-2); }
.pay-card-head .amt { font-size: var(--fs-lg, 1.25rem); font-weight: var(--fw-extra); }
.pay-card-head span { color: var(--mute); font-size: var(--fs-sm); }

/* 사이드바 플랜 표시 (js/plan-limits.js planRenderBadge) */
.sb-plan {
  margin: 2px 8px 6px; padding: 1px 8px; align-self: flex-start;
  border-radius: 999px; border: 1px solid var(--side-mute);
  color: var(--side-mute); font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 1.6;
}
.sb-plan[data-plan="free"] { cursor: pointer; }
.sb-plan[data-plan="free"]:hover { background: var(--side-hover); color: var(--side-on-ink); }
.sb-plan[data-plan="paid"] { color: var(--amber); border-color: var(--amber); }
/* 사이드바 사진 사용량 (js/photo-storage.js photoRenderUsage) — 어두운 바탕이라 막대 색을 밝게 */
.sb-usage { margin: 0 8px 8px; }
.sb-usage .ph-usage { max-width: none; }
.sb-usage .ph-usage-bar { background: var(--side-hover); }
.sb-usage .ph-usage-bar > i { background: var(--side-on-ink); }
.sb-usage .ph-usage[data-level="warn"] .ph-usage-bar > i { background: var(--amber); }
.sb-usage .ph-usage[data-level="full"] .ph-usage-bar > i { background: var(--red); }
.sb-usage .ph-usage > small { color: var(--side-mute); font-size: var(--fs-2xs); }