/* 연차 화면 규칙 — style.css 를 안 키우려고 분리했다 (주간업무.css 와 같은 자리).
   숫자가 세로로 늘어서는 표라 tabular-nums 는 .num 이 이미 붙들고 있다. */

.lv-acts { display: flex; gap: 8px; }

/* ── 맨 위 요약: 「지금 며칠 남았나」 하나에 답하는 자리 ── */
.lv-sum {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 20px 22px; background: #fafbfa; border: 1px solid var(--line); border-radius: 8px;
}
.lv-big { min-width: 150px; }
.lv-num {
  font-size: 44px; font-weight: 700; line-height: 1.05; color: var(--green);
  font-variant-numeric: tabular-nums;
}
.lv-num small { font-size: 18px; font-weight: 600; margin-left: 3px; }
.lv-num.zero { color: #c0392b; }
.lv-cap { margin-top: 4px; font-size: 13px; font-weight: 600; }

.lv-facts { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px 22px; flex: 1; }
.lv-facts > div { display: flex; flex-direction: column; gap: 2px; }
.lv-facts span { color: var(--gray); font-size: 12px; }
.lv-facts b { font-size: 14px; font-variant-numeric: tabular-nums; }

.lv-note { margin: 12px 2px 0; line-height: 1.6; color: var(--gray); font-size: 12.5px; }
.lv-h3 { margin: 26px 0 10px; font-size: 15px; font-weight: 700; }
.lv-h3 .hint { font-weight: 400; color: var(--gray); font-size: 12px; margin-left: 6px; }

/* 지금 쓰고 있는 연차기간은 눈에 띄게, 소멸한 기간은 물러나게 */
.lv-tbl tbody tr.lv-cur { background: var(--green-l); }
.lv-tbl tbody tr.lv-cur:hover { background: var(--green-l); }
.lv-tbl tbody tr.lv-exp td { color: var(--gray); }
.lv-zero { color: #c0392b; }

.lv-addrow { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lv-addrow select, .lv-addrow input {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 13.5px;
}
.lv-addrow #lvaDays { width: 170px; }
.lv-addrow #lvaReason { flex: 1; min-width: 220px; }

/* ── 연차사용촉진 ──
   법정 기한이 걸린 안내라 눈에 띄어야 한다. 확인하지 않은 것은 테두리를 세워 둔다 —
   확인(도달) 기록이 곧 「서면으로 알렸다」의 근거이기 때문이다. */
.lv-promo {
  margin: 0 0 14px; padding: 16px 18px; border-radius: 8px;
  border: 1px solid var(--line); background: #fafbfa; font-size: 13.5px; line-height: 1.7;
}
.lv-promo.unread { border-left: 4px solid var(--amber); background: #fffdf5; }
.lv-promo-d.unread { border-left-color: #c0392b; background: #fdf6f5; }
.lv-promo-h { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.lv-promo-h .muted { font-weight: 400; margin-left: 6px; }
.lv-promo p { margin: 0 0 6px; }
.lv-promo-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lv-day {
  padding: 4px 10px; border-radius: 5px; background: var(--green-l); color: var(--green);
  font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12.5px;
}
.lv-promo-f {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; flex-wrap: wrap;
}
.lv-ok { color: var(--green); font-weight: 600; font-size: 12.5px; }

/* 시스템이 대신할 수 없는 것 — 여기를 안 읽으면 절차를 다 밟고도 수당을 물게 된다 */
.lv-warn {
  margin: 12px 0; padding: 14px 16px; border-radius: 8px;
  border: 1px solid #e6d5a8; background: #fffdf3; font-size: 12.5px; line-height: 1.75;
}
.lv-warn b { display: block; margin-bottom: 5px; }
.lv-warn li { margin-bottom: 4px; }

.lv-alert {
  margin: 10px 0; padding: 11px 15px; border-radius: 7px; font-size: 13px;
  background: #fdf6f5; border: 1px solid #e8c4bd; color: #a33224;
}
.lv-alert.warn { background: #fffdf5; border-color: #e6d5a8; color: #8a6d1f; }
.lv-tbl tbody tr.lv-exp-row { background: #fdf6f5; }
.lv-tbl tbody tr.lv-exp-row:hover { background: #fdf6f5; }

/* ── 휴가신청서 문서 본문 (A4 위에 그려진다) ──
   인쇄물 치수는 pt·mm 로 쓴다 — px 은 모니터·배율에 따라 종이에서 달라진다.
   **안내 문단은 두지 않는다** — 결재 문서는 A4 서식이고 다른 결재에도 없다.
   규정 설명이 필요한 자리는 사용법(config/사용법.json)이다. */
.kv-over { color: #c0392b; }

/* 폭 조건은 반드시 screen 한정 — A4 본문폭 170mm 는 CSS 픽셀로 약 643px 이라
   범위를 열어 두면 인쇄할 때 이 규칙이 발동한다(verify_접속보안.mjs 가 붙든다). */
@media screen and (max-width: 820px) {
  .lv-facts { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}
@media screen and (max-width: 560px) {
  .lv-sum { gap: 16px; padding: 16px; }
  .lv-num { font-size: 36px; }
  .lv-facts { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  /* 입력칸 글자는 휴대전화에서 16px — 그보다 작으면 iOS 사파리가 누를 때 화면을 확대한다 */
  .lv-addrow select, .lv-addrow input { font-size: 16px; }
  .lv-addrow #lvaDays, .lv-addrow #lvaReason { width: 100%; flex: none; }
}