/* ============================================================
   근무 — 내 근무 / 근무 기록 / 급여 정산 / 근무자 설정
   직원은 휴대폰으로 넣는다: 입력칸·버튼을 크게
   ============================================================ */

/* 달 고르기 */
.wk-month { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.wk-month-l { flex: 1; text-align: center; font-size: var(--fs-lg); font-weight: 700; }
.wk-month .btn { min-height: 46px; }

/* 내 시간 인정 방식 */
.wk-rule {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface);
}
.wk-rule > div:first-child { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-md); }
.wk-rule-k { color: var(--ink-2); font-size: var(--fs-sm); }

/* 입력 폼 */
.wk-row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-3); }
.wk-row3 .field { margin-bottom: var(--s-3); }
input.wk-big { min-height: 52px; font-size: var(--fs-md); }
.wk-preview {
  padding: var(--s-4); margin-bottom: var(--s-4);
  border-radius: var(--r); background: var(--surface-2);
}
.wk-preview-calc { display: flex; flex-wrap: wrap; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-sm); }
.wk-preview-calc .op { color: var(--ink-3); }
.wk-preview-result { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-2); }
.wk-preview-result strong { font-size: var(--fs-xl); }
.wk-lock { padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--warn-bg); color: var(--warn); font-weight: 600; font-size: var(--fs-sm); }
.wk-save { min-height: 52px; min-width: 140px; font-size: var(--fs-md); }
@media (max-width: 560px) {
  .wk-row3 { grid-template-columns: 1fr 1fr; }
  .wk-row3 > :first-child { grid-column: 1 / -1; }
  .wk-save { flex: 1; }
}

/* 요약 숫자 */
.wk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.wk-stat { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.wk-stat-l { font-size: var(--fs-sm); color: var(--ink-2); }
.wk-stat-v { font-size: clamp(18px, 2vw, 26px); white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.wk-stat-h { font-size: var(--fs-xs); color: var(--ink-3); }

/* 주별 막대 — 주휴 기준선 */
.wk-weeks { margin-bottom: var(--s-4); }
.wk-week { display: grid; grid-template-columns: 180px 1fr 90px 80px; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.wk-week-l { font-size: var(--fs-sm); color: var(--ink-2); }
.wk-week-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-bar { position: relative; height: 14px; border-radius: 7px; background: var(--chart-track); overflow: hidden; }
.wk-bar-fill { height: 100%; background: var(--chart-below); }
.wk-bar-fill.ok { background: var(--chart-ok); }
.wk-bar-mark { position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--ink-2); }
@media (max-width: 560px) {
  .wk-week { grid-template-columns: 1fr auto; }
  .wk-week .wk-bar { grid-column: 1 / -1; grid-row: 2; }
  .wk-week .chip { display: none; }
}

/* 날짜별 기록 */
.wk-list { display: flex; flex-direction: column; }
.wk-item { display: grid; grid-template-columns: 90px 1fr auto auto; gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.wk-item-d { font-weight: 700; }
.wk-item-r { font-size: var(--fs-md); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .wk-item { grid-template-columns: 1fr auto; padding: var(--s-3) var(--s-4); }
  .wk-item-t { grid-column: 1 / -1; grid-row: 2; }
}

/* 근무자 칩 */
.wk-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }

/* 설명 배너 · 경고 */
.wk-banner {
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4);
  border-left: 3px solid var(--ink-3); border-radius: var(--r);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sm);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.wk-banner strong { color: var(--ink); }
.wk-banner ul { margin: 0; padding-left: 1.2em; }
.wk-warn {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  border-radius: var(--r); background: var(--warn-bg); color: var(--warn); font-weight: 600; font-size: var(--fs-sm);
}

/* 급여 정산 — 누적 막대 */
.wk-legend { display: flex; gap: var(--s-4); font-size: var(--fs-xs); color: var(--ink-2); }
.wk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wk-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.wk-sw.base, .wk-stack .base { background: var(--chart-ok); }
.wk-sw.holiday, .wk-stack .holiday { background: var(--chart-below); }
.wk-sw.premium, .wk-stack .premium { background: var(--ink-3); }
.wk-prow { display: grid; grid-template-columns: 170px 1fr 170px auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.wk-prow.row-click { cursor: pointer; }
.wk-prow.row-click:hover { background: var(--surface-2); }
.wk-prow.is-missing .wk-prow-who .strong::after { content: ' · 시급 미입력'; color: var(--warn); font-size: var(--fs-xs); }
.wk-prow-bar { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.wk-stack { display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--chart-track); }
.wk-stack i { display: block; height: 100%; }
.wk-prow-num { text-align: right; font-variant-numeric: tabular-nums; }
.wk-prow-num .strong { font-size: var(--fs-md); }
@media (max-width: 760px) {
  .wk-prow { grid-template-columns: 1fr auto; }
  .wk-prow-bar { grid-column: 1 / -1; grid-row: 2; }
  .wk-prow .row-toggle { display: none; }
}

/* 근무자 설정 */
.wk-srow { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.wk-srow.row-click { cursor: pointer; }
.wk-srow.row-click:hover { background: var(--surface-2); }
.wk-srow.is-off { opacity: .6; }
.wk-srow-no { width: 64px; flex: none; font-family: var(--font-num); font-weight: 700; color: var(--ink-2); }
.wk-srow-who { flex: 1; min-width: 0; }
.wk-srow-who > div:first-child { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.wk-brule { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.wk-brule input { width: 80px; }