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

.at-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── 주 요약: 「이번 주 40시간을 채웠나」 하나에 답하는 자리 ── */
.at-sum {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 20px 22px; background: #fafbfa; border: 1px solid var(--line); border-radius: 8px;
}
.at-big { min-width: 260px; flex: 1; }
.at-num {
  font-size: 40px; font-weight: 700; line-height: 1.05; color: var(--green);
  font-variant-numeric: tabular-nums;
}
.at-num small { font-size: 17px; font-weight: 600; margin-left: 3px; }
.at-num.short { color: #b06a00; }
.at-cap { margin-top: 4px; font-size: 13px; font-weight: 600; }

/* 소정 대비 막대 — 채웠는지 못 채웠는지가 색으로 먼저 보여야 한다 */
.at-bar {
  position: relative; height: 9px; margin: 12px 0 6px; border-radius: 5px;
  background: #e6e9e6; overflow: visible;
}
.at-bar i { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.at-bar i.short { background: #e0a33a; }
.at-over {
  position: absolute; top: -3px; margin-left: 6px; font-size: 11.5px;
  color: var(--green); font-weight: 700; white-space: nowrap;
}
.at-diff { font-size: 13px; font-weight: 600; }
.at-diff.ok { color: var(--green); }
.at-diff.short { color: #b06a00; }

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

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

/* ── 요일별 표 ── */
.at-dow { margin-left: 4px; font-size: 12px; color: var(--gray); }
.at-dow.sun { color: #c0392b; }
.at-dow.sat { color: #1d4ed8; }
.at-hol { margin-left: 5px; font-size: 11.5px; color: #c0392b; }
.at-tbl tbody tr.at-rest td { background: #fafafa; color: var(--gray); }
.at-tbl tbody tr.at-today { box-shadow: inset 3px 0 0 var(--green); }
.at-tbl tbody tr.at-short-row { background: #fffdf5; }
.at-tbl tbody tr.at-short-row:hover { background: #fffdf5; }
.at-tbl tbody tr.at-own-row { background: var(--green-l); }
.at-tbl tbody tr.at-own-row:hover { background: var(--green-l); }

/* 그 날 무슨 일이 있었나 — 휴가·출장은 인정, 외출은 차감이라 색을 가른다 */
.at-mk {
  display: inline-block; margin: 1px 3px 1px 0; padding: 2px 8px; border-radius: 4px;
  font-size: 11.5px; font-weight: 600; cursor: default;
}
.at-mk-leave { background: var(--green-l); color: var(--green); }
.at-mk-trip { background: #e7edfb; color: #1d4ed8; }
.at-mk-outing, .at-mk.minus { background: #fdf0e3; color: #a05a00; }

/* ── 월 누계 ── */
.at-month {
  display: grid; grid-template-columns: repeat(5, minmax(90px, 1fr)); gap: 10px 18px;
  padding: 14px 18px; background: #fafbfa; border: 1px solid var(--line); border-radius: 8px;
}
.at-month > div { display: flex; flex-direction: column; gap: 2px; }
.at-month span { color: var(--gray); font-size: 12px; }
.at-month span small { font-weight: 400; opacity: .85; }
.at-month b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* 판정은 「끝난 근무일」로 하되, 결국 채워야 하는 그 주·그 달 소정도 함께 적는다 —
   판정 숫자 아래 작은 글씨라 두 값이 싸우지 않는다. */
.at-whole { margin-top: 8px; font-size: 12px; line-height: 1.5; }
.at-th-sub { display: block; font-size: 10.5px; font-weight: 400; color: var(--gray); }

.at-conf { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.at-own { margin-left: 6px; padding: 1px 7px; border-radius: 4px;
  background: var(--green-l); color: var(--green); font-size: 11.5px; font-weight: 600; }

.at-alert {
  margin: 10px 0; padding: 11px 15px; border-radius: 7px; font-size: 13px;
  background: #fffdf5; border: 1px solid #e6d5a8; color: #8a6d1f;
}
.at-alert.ok { background: var(--green-l); border-color: #cfe0d5; color: var(--green); }
.at-alert.warn { background: #fdf6f5; border-color: #e8c4bd; color: #a33224; }

.at-base {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--green-l); border-radius: 8px; font-size: 13.5px;
}
.at-base b { font-size: 14px; }

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

/* ── 홈 맨 위 「지금 나」 카드 ──
   인사말·근무 상태·건수 타일을 한 카드로 묶는다. 서로 다른 카드에 흩어 두면
   인사말 칸은 텅 비고 근무 칸은 빽빽해 무게가 안 맞는다(실제로 그랬다).
   안에서 **인사 | 근무** 두 칸으로 나누고, 타일은 아래 한 줄로 깐다 —
   타일은 「무엇을 볼까」라 성격이 한 단계 다르다. */
.home-now { display: flex; flex-direction: column; gap: 0; }
/* **근무 칸이 인사말보다 넓다.** 인사말은 한 줄이면 끝나지만 근무 칸에는 네 값이
   나란히 서고, 그중 「92시간 30분 / 96시간」이 가장 길다 — 좁으면 그 칸에서만
   「30분」이 아래로 접혀 값 하나가 두 줄이 된다(시간을 분까지 적으면서 드러났다). */
.hn-main {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
  gap: 20px; align-items: center;
}
/* 근무 자료가 없는 계정에서는 인사말이 한 줄을 다 쓴다 — 빈 칸을 남기지 않는다 */
.home-now.solo .hn-main { grid-template-columns: minmax(0, 1fr); }
.hn-hi h2 { font-size: 19px; margin-bottom: 5px; }

/* 근무 칸 — 세로선으로 인사말과 갈라 둔다(카드 하나 안의 두 이야기라 경계가 필요하다) */
.home-att {
  display: flex; flex-direction: column; gap: 9px;
  padding-left: 24px; border-left: 1px solid var(--line);
}
.home-now.solo .home-att { display: none; }

/* **제목 줄을 두지 않는다** — 출근·퇴근·근로시간이 늘어선 칸이 무엇인지는 그 자료가
   이미 말한다. 그 자리를 상태가 받고 「전체 보기」가 **같은 줄 오른쪽 끝**에 붙는다
   (공지·결재 카드의 「전체 보기」와 같은 자리다 — 세 곳이 같은 규칙으로 읽힌다).
   `margin-left:auto` 라 상태 글자가 길어져 줄이 접혀도 늘 오른쪽 끝에 선다. */
.ha-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px;
  min-height: 30px; }
.ha-now b { font-size: 15px; }
.ha-all { margin-left: auto; flex: none; }
.ha-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray); flex: none; }
/* 상태마다 색이 다르다 — 글자를 읽기 전에 눈으로 먼저 알아야 한다 */
.ha-work { background: var(--green); box-shadow: 0 0 0 3px var(--green-l); }
.ha-out { background: #e0a33a; box-shadow: 0 0 0 3px #fdf5e3; }
.ha-off { background: var(--gray); }
.ha-before { background: #b8bdb8; }
.ha-leave, .ha-trip { background: #1d4ed8; box-shadow: 0 0 0 3px #e7edfb; }
.ha-holiday { background: #c0392b; }

/* **네 칸을 똑같이 나누지 않는다.** 출근·퇴근은 「08:52」 다섯 글자로 끝나고
   근로시간 칸은 「92시간 30분 / 96시간」이라 세 배 가까이 길다. 균등하게 나누면
   긴 칸만 접히고 짧은 칸 옆에는 빈자리가 남는다. */
.ha-times { display: grid; grid-template-columns: 0.72fr 0.72fr 1.7fr 0.86fr; gap: 4px 14px; }
.ha-times > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ha-times span { color: var(--gray); font-size: 11.5px; }
/* 값 한 덩어리는 통째로 줄바꿈한다 — 「92시간」과 「30분」이 갈라지면 두 값처럼 보인다 */
.ha-times b { font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.2;
  white-space: nowrap; }
.ha-times b small { font-size: 11.5px; font-weight: 500; color: var(--gray); }
.ha-ok { color: var(--green); }
.ha-short { color: #b06a00; }

.ha-bar { height: 5px; border-radius: 3px; background: #e6e9e6; overflow: hidden; }
.ha-bar i { display: block; height: 100%; border-radius: 3px; background: var(--green); }
.ha-bar i.short { background: #e0a33a; }
.ha-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── 아래층 「내가 할 것」 — 오늘 할 일 | 건수 타일 ──
   **할 일이 넓고 타일이 좁다.** 할 일은 제목이 길어 넓어야 읽히고, 타일은 네 줄뿐이라
   넓히면 이름과 숫자 사이가 허옇게 비어 버린다(실제로 그랬다). 그래서 타일 쪽만
   폭을 고정한다 — 비율로 두면 화면이 넓어질수록 그 빈칸이 같이 커진다. */
.hn-do {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 210px);
  gap: 24px; align-items: start;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.home-now.solo .hn-do { grid-template-columns: minmax(0, 1fr); }

/* 타일은 **세로로 쌓는다**. 세우면 폭이 남으므로 이름 왼쪽·숫자 오른쪽 줄 모양으로 바꾼다 —
   위아래로 쌓은 채 가운데 정렬을 두면 허전하다. */
.home-now .home-tiles { flex-direction: column; gap: 6px; }
.home-now .home-tile {
  /* HTML 은 <b>숫자</b><span>이름</span> 순서다(값이 먼저인 게 의미상 맞다).
     보이는 자리만 뒤집는다 — row-reverse + space-between 이면 이름 왼쪽·숫자 오른쪽. */
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;
  width: 100%; min-width: 0; padding: 10px 14px; text-align: left;
}
.home-now .home-tile span { font-size: 12.5px; color: var(--gray); white-space: nowrap; }
.home-now .home-tile b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* 오늘 할 일 — 카드가 아니라 칸이라 제목을 h3 로 낮춘다 */
.home-do-work { display: flex; flex-direction: column; }
.hn-sub-h { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap; }
.hn-sub-h h3 { font-size: 15px; font-weight: 700; }
.hn-sub-h h3 .muted { font-weight: 400; }
.home-do-work .empty { padding: 22px 0; }

@media screen and (max-width: 900px) {
  /* 한 줄로 펴진다 — 인사말 · 근무 · 타일 · 할 일 순으로 쌓이고,
     세로선을 가로선으로 바꿔 경계를 남긴다 */
  .hn-main, .hn-do { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-att { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--line); }
  .home-do-work { padding-top: 14px; border-top: 1px solid var(--line); }
}
@media screen and (max-width: 560px) {
  .hn-hi h2 { font-size: 17px; }
  .ha-times { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  /* 폰에서는 한 칸이 화면의 절반뿐이라 「91시간 45분 / 96시간」이 한 줄에 안 들어간다.
     값은 붙여 두고 **소정만 아래 줄로 내린다** — 값이 잘려 나가는 것보다 낫다. */
  .ha-times b small { display: block; margin-top: 1px; }
  .ha-times b { font-size: 17px; }
  .ha-acts .btn { flex: 1 1 45%; }
}

/* ── 임원·일용직 — 근로시간을 산정하지 않는 사람 ──
   소정을 두면 늘 「40시간 모자람」으로 뜨고, 그러면 그 화면을 아무도 안 믿는다.
   그래서 요약을 아예 다른 모양으로 그린다 — 무엇을 안 세는지 먼저 말한다. */
.at-record {
  padding: 18px 22px; background: #fafbfa; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13.5px; line-height: 1.7;
}
.at-record > b { font-size: 15px; }
.at-record p { margin: 6px 0 0; color: var(--gray); font-size: 12.5px; }
.at-record-n { margin-top: 10px; font-size: 14px; }
.at-record-n b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--green); }
/* 전원 근태 표에서도 한눈에 갈리게 */
.at-tbl tbody tr.at-rec-row td { background: #fafafa; }
.at-tbl tbody tr.at-rec-row:hover td { background: #fafafa; }

/* ── 외근 기록 ──
   **구두보고를 그대로 옮긴 것**이라 눈에 가볍게 둔다 — 근로시간을 늘리지도 줄이지도
   않는 줄이라, 근태 표와 같은 무게로 그리면 「이게 깎이나?」를 매번 묻게 된다.
   그래서 근태 카드 **밖에** 따로 서고, 색도 결재(초록)가 아닌 중립을 쓴다. */
.ha-field {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px; border-radius: 999px;
  background: #eef2f7; color: #33507a; font-size: 12.5px; font-weight: 600;
}
.ha-field .muted { font-weight: 400; font-size: 11.5px; }

.fd-list { display: flex; flex-direction: column; }
.fd-row {
  display: grid; grid-template-columns: 46px 132px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 9px 2px; border-top: 1px solid var(--line); font-size: 13.5px;
}
.fd-row:first-child { border-top: 0; }
/* 지금 나가 있는 줄 — 목록에서 그 한 줄만 찾게 된다 */
.fd-row.out { background: #f5f8fc; }
.fd-d { color: var(--gray); font-variant-numeric: tabular-nums; }
.fd-t { color: var(--gray); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.fd-t b { color: #33507a; }
.fd-p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-x {
  border: 0; background: none; cursor: pointer; color: var(--gray);
  font-size: 17px; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.fd-x:hover { background: #fdecea; color: var(--red, #b3261e); }

@media screen and (max-width: 560px) {
  /* 좁은 화면에서는 날짜·시각을 한 줄로 접고 「어디에」를 아래로 내린다 —
     읽어야 하는 것은 「어디에」이고, 그건 길어서 옆에 두면 잘린다 */
  .fd-row { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .fd-t { grid-column: 2 / 4; grid-row: 2; }
  .fd-p { grid-column: 2 / 3; grid-row: 1; }
}