/* ============================================================
   근태도장 직원 화면 디자인 v7
   관리자 새 화면(/admin/home)과 같은 결로 맞춘 것이다.

   왜 갈아엎지 않고 살갗만 바꾸는가
     직원 화면은 출퇴근을 찍는 자리다. 네트워크 확인, 동의, 밖에서 퇴근,
     휴대폰 알림이 다 여기 얽혀 있다. 그 얼개를 다시 쓰면 찍히던 것이 안 찍히는
     사고가 난다. 돌아가는 것은 그대로 두고 보이는 것만 바꾼다.

   색·글자·모서리는 /tokens.css 하나만 본다. 관리자 화면과 같은 파일이다.
   그래서 한쪽만 달라지는 일이 없다.

   되돌리려면 설정 → 화면 디자인에서 v1 을 고르거나 주소에 ?skin=v1 을 붙인다.
   ============================================================ */
/* v1 을 먼저 들인다. 칸 크기와 자리 잡기 같은 얼개가 거기 있다.
   그 다음 tokens.css 를 들여 색과 글자 값을 덮는다. 순서가 뒤바뀌면
   옛 갈색 팔레트가 이긴다.
   아래 :root 에서는 tokens.css 가 정한 이름(--bg, --blue, --line, --ink ...)을
   다시 정하지 않는다. 서로 물려서 팔레트가 통째로 죽은 적이 두 번 있다. */
@import "/skin-emp-v1.css";
@import "/tokens.css";

:root {
  /* ---------- 옛 이름을 새 값에 잇는다 ----------
     index.html 이 쓰는 이름은 그대로 두고 값만 바꾼다. 화면 쪽은 손대지 않는다.
     여기서 --bg 나 --blue 같은 이름을 다시 정의하면 tokens.css 와 서로 물려
     팔레트가 통째로 죽는다. 앞서 두 번 겪었다. 새 이름만 만든다. */
  --sh-rgb: 22, 32, 46;
  --paper: var(--surface);
  --shell: var(--bg);
  --hover: var(--band);
  --text2: var(--sub);
  --text3: var(--sub-2);
  --text4: var(--line-3);
  --card: var(--surface);
  --navy: var(--ink);

  /* 주 색을 인주(붉은색)에서 파랑으로 옮긴다. 관리자 화면과 같은 파랑이다 */
  --acc: var(--blue);
  --acc-2: var(--blue-2);
  --acc-soft: var(--blue-bg);
  --acc-line: var(--blue-ln);
  --acc-ink: var(--blue-a);
  --accent: var(--blue);
  --accent-2: var(--blue-2);
  --accent-soft: var(--blue-bg);
  --accent-line: var(--blue-ln);

  /* 상태 */
  --danger: var(--seal); --danger-bg: var(--seal-bg); --danger-line: var(--seal-ln); --danger-2: var(--seal-2);
  --warn: var(--amber); --warn-bg: var(--amber-bg); --warn-line: #EEDFC2;
  --okc: var(--green); --ok-bg: var(--green-bg); --ok-line: #CFE3D8;
  --info: var(--blue); --info-bg: var(--blue-bg); --info-line: var(--blue-ln);
  --info-2: var(--blue-bg); --info-2-line: var(--blue-ln); --info-2-ink: var(--blue);

  --mint: var(--green); --mint-ink: var(--green); --mint-bg: var(--green-bg);
  --mint-bar: #CFE3D8; --mint-edge: var(--green);
  --yellow-bg: var(--amber-bg); --yellow-ink: var(--amber); --yellow-bar: #EEDFC2; --yellow-edge: var(--amber);
  --violet-bg: var(--sunk); --violet-ink: var(--sub); --violet-bar: var(--line); --violet-edge: var(--sub-2);
  --red: var(--seal); --red-bg: var(--seal-bg);

  /* 그림자를 걷는다. 새 화면은 선 하나로 테두리를 삼는다 */
  --sh-1: none;
  --sh-2: 0 2px 4px rgba(var(--sh-rgb), .05), 0 12px 28px -12px rgba(var(--sh-rgb), .16);

  /* 모서리를 관리자 새 화면과 맞춘다 */
  --r-lg: var(--r);
  --r-sm: var(--r-sm);
  --ease: var(--ease);
}

/* ---------- 바탕과 글자 ---------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 머리줄 ---------- */
.topbar, header.top {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.topbar b, header.top b { color: var(--ink); font-weight: 800; letter-spacing: -.03em; }
.topbar small, header.top small { color: var(--sub); }

/* ---------- 인사말 ---------- */
.hello h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
  color: var(--ink);
}
.hello p { color: var(--sub); font-size: var(--fs-sub); }

/* ---------- 카드 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: none;
  padding: var(--card-pad);
}
.card + .card { margin-top: var(--gap); }

.sec-head h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
}
.sec-head { border-bottom: 0; }

/* 제목 앞 아이콘 타일. 관리자 첫 화면의 타일과 같은 모양이다 */
.sec-head .hi, .card i.hi {
  display: grid; place-items: center;
  width: var(--ic-sm); height: var(--ic-sm);
  border-radius: var(--ic-r-sm);
  background: var(--i4b); color: var(--i4);
}
.sec-head .hi svg, .card i.hi svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: var(--ic-sw); stroke-linecap: round; stroke-linejoin: round;
}
.card i.hi.b { background: var(--i1b); color: var(--i1); }
.card i.hi.g { background: var(--i5b); color: var(--i5); }
.card i.hi.r { background: var(--i4b); color: var(--i4); }

/* ---------- 시계와 출퇴근 단추 ----------
   여기가 이 화면의 전부다. 제일 크고 제일 또렷해야 한다. */
.clock {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--ink);
  font-weight: 800;
}
.clock .sec { color: var(--sub-2); font-weight: 700; }

.cta {
  border-radius: var(--r-in);
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #fff;
  box-shadow: none;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.cta:hover { background: var(--blue-2); border-color: var(--blue-2); }
.cta:active { transform: translateY(1px); }
/* 퇴근은 다른 색이어야 한다. 같은 자리에 같은 색이면 잘못 누른다 */
.cta.out { background: var(--green); border-color: var(--green); }
.cta.out:hover { background: #17563F; border-color: #17563F; }
.cta[disabled] { background: var(--seg-bg); border-color: var(--line); color: var(--sub-2); }

/* ---------- 네트워크 알림 ---------- */
.pill {
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--sunk);
  color: var(--sub);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.pill.ok { background: var(--green-bg); border-color: #CFE3D8; color: var(--green); }
.pill.no { background: var(--seal-bg); border-color: var(--seal-ln); color: var(--seal); }

/* ---------- 숫자 칸 ---------- */
.facts { border-top: 1px solid var(--line-2); }
.facts > div { border-right: 1px solid var(--line-2); }
.facts > div:last-child { border-right: 0; }
.facts span { color: var(--sub); font-size: var(--fs-xs); font-weight: 600; }
.facts b { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

.chips span, .chip {
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--sunk);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ---------- 단추 ---------- */
.btn-main, button.btn-main {
  border-radius: var(--r-in);
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #fff;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: none;
}
.btn-main:hover { background: var(--blue-2); border-color: var(--blue-2); }
.btn-main.mint { background: var(--green); border-color: var(--green); }
.btn-main.mint:hover { background: #17563F; border-color: #17563F; }

.ghost, .mini, .btn-out {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 700;
}
.ghost:hover, .mini:hover, .btn-out:hover { background: var(--band); border-color: var(--blue-ln); color: var(--blue); }

/* ---------- 적는 칸 ---------- */
input, select, textarea {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-sub);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27, 77, 160, .12);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--blue); }
label { color: var(--ink-2); font-weight: 600; }

/* ---------- 아래 탭 막대 ----------
   엄지가 닿는 자리다. 글자를 줄이지 말고 칸을 넓게 둔다. */
.tabbar {
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: none;
}
.tabbar button {
  color: var(--sub);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: -.02em;
  transition: color var(--t) var(--ease);
}
.tabbar button svg { stroke-width: var(--ic-sw); }
.tabbar button.on { color: var(--blue); }
.tabbar button.on svg { stroke-width: 2; }
.tabbar .dot { background: var(--seal); }

/* ---------- 줄 목록 ---------- */
.row, .item, .rec {
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
}
.row b, .item b, .rec b { color: var(--ink); font-weight: 700; }
.muted, .note, .help { color: var(--sub); font-size: var(--fs-sm); line-height: 1.6; }
.err { color: var(--seal); font-size: var(--fs-sm); }

/* ---------- 상태 꼬리표 ---------- */
.tag, .badge, .st {
  border-radius: var(--pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: -.01em;
}
.tag.ok, .st.ok, .badge.ok { background: var(--green-bg); color: var(--green); }
.tag.wait, .st.wait, .badge.wait { background: var(--amber-bg); color: var(--amber); }
.tag.miss, .st.miss, .badge.miss { background: var(--seal-bg); color: var(--seal); }

/* ---------- 이번 주 막대 ---------- */
.week .d b { color: var(--ink); font-variant-numeric: tabular-nums; }
.week .d small { color: var(--sub-2); }
.legend { color: var(--sub); font-size: var(--fs-xs); }

/* ---------- 알림 ---------- */
.toast {
  border-radius: var(--r-in);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-sub);
  font-weight: 600;
  box-shadow: var(--sh-2);
}

/* ---------- 로그인 ---------- */
.login .card { border-radius: var(--r); }
.login h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
.keypad button {
  border-radius: var(--r-in);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.keypad button:active { background: var(--band); border-color: var(--blue-ln); }

/* ---------- v1 이 쥐고 있던 자리를 새 값으로 다시 잡는다 ---------- */

/* 출근은 파랑(지금 할 일), 퇴근은 초록(끝냄). 같은 자리에 같은 색이면 잘못 누른다 */
.cta.in { background: var(--blue); color: #fff; }
.cta.in:hover:not(:disabled) { background: var(--blue-2); }
.cta.out { background: var(--green); color: #fff; }
.cta.out:hover:not(:disabled) { background: #17563F; }
.cta.redo { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.cta:disabled { background: var(--seg-bg); color: var(--sub-2); }

/* 탭 위 빨간 점. v1 이 크기와 자리를 잡아 줬는데 그 값을 되살린다 */
.tabbar .dot {
  position: absolute; margin: -2px 0 0 16px;
  min-width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: var(--seal); font-size: 0; line-height: 0;
}

/* 탭 일곱 개가 390px 에 다 들어가야 한다. 「안전·신고」 가 잘리고 있었다 */
@media (max-width: 420px) {
  .tabbar button { font-size: 10.5px; letter-spacing: -.06em; padding: 8px 0 7px; }
  .tabbar svg { width: 19px; height: 19px; }
}

/* 로그아웃 단추가 테두리만 떠 있었다 */
.bar .ghost, header .ghost {
  height: 30px; padding: 0 12px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--fs-xs); font-weight: 700; color: var(--sub);
}
.bar .ghost:hover, header .ghost:hover { background: var(--band); border-color: var(--blue-ln); color: var(--blue); }

/* ---------- 머리줄 ----------
   v1 은 남색 덩어리에 아래만 둥글렸다. 관리자 새 화면과 맞춰 흰 바탕에 선 하나로 둔다. */
.bar {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 0 -16px 16px;
  padding: 0 16px;
  height: var(--head-h);
}
.bar .brand { font-size: 15px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.bar .brand i {
  width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: var(--blue); color: #fff; font-size: 9px; transform: none;
}
.bar .brand span { color: var(--sub); font-weight: 600; }

/* 달 기록 제목 앞의 세로 막대. v1 은 인주색이었다 */
.sec-head h2::before, .card h2::before { background: var(--blue); }

/* 주 단추는 파랑으로 모은다. 관리자 화면에서 저장·만들기가 파랑이라 같아야 한다.
   초록은 '끝냄' 한 가지에만 남긴다 (퇴근). 색이 뜻을 하나씩만 가져야 한다. */
.btn-main.mint { background: var(--blue); border-color: var(--blue); }
.btn-main.mint:hover { background: var(--blue-2); border-color: var(--blue-2); }

/* ---------- 좁은 휴대폰에서 칸이 화면 밖으로 밀려났다 ----------
   두 칸을 나란히 두는 자리(.two)가 360px 에서 403px 까지 벌어졌다.
   1fr 의 최소 너비는 '속 내용만큼' 이다. 날짜 고르개처럼 더는 안 줄어드는 것이
   들어가면 칸이 안 줄고 격자째로 넘친다. minmax(0, 1fr) 로 줄 수 있게 한다. */
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.two > * { min-width: 0; }
.field { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; box-sizing: border-box; }

/* 380px 아래에서는 두 칸을 위아래로 쌓는다.
   날짜 고르개 둘을 320px 에 나란히 두면 둘 다 못 쓴다. */
@media (max-width: 380px) {
  .two { grid-template-columns: 1fr; }
}

/* 한 주 일곱 칸도 같은 까닭으로 넘쳤다 */
.fxweek { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fxweek > div { min-width: 0; overflow: hidden; }

/* 카드 안의 것이 카드를 넓히지 못하게 한다. 한 군데만 넘쳐도 화면 전체가 흔들린다 */
.card { min-width: 0; }
.card table { max-width: 100%; }

/* ============================================================
   관리자 화면과 같은 꼴로 맞춘다

   색은 2.84.0 에서 이미 tokens.css 하나로 묶었다. 그런데도 두 화면이
   다른 물건처럼 보였다. 남은 것이 꼴이었다.
     제목 밑에 파란 막대가 깔리고 (관리자에는 없다)
     카드에 그림자가 있고 (관리자 카드는 테두리 한 줄로 납작하다)
     글자가 한 단씩 크고 (h1 24 : 21, h2 17 : 15.5, 본문 16 : 14.5)
     숫자 요약이 색 타일이고 (관리자는 흰 카드에 큰 숫자)
     칸과 단추 모서리가 제각각이었다 (12 · 14 · 20 : 관리자는 10 아니면 알약)

   아래는 그 꼴을 tokens.css 값으로 다시 맞춘 것이다. 화면 얼개(index.html)는
   건드리지 않는다. 되돌리려면 설정 → 화면 디자인에서 v1 을 고른다.

   손가락 크기는 관리자 값을 그대로 쓰지 않는다. 관리자 단추는 37px 인데
   휴대폰에서 출근을 찍는 단추를 37px 로 만들면 안 된다. 모양만 맞추고
   닿는 크기는 손에 맞춘다.
   ============================================================ */

/* ---------- 바탕과 카드 ---------- */
/* 관리자와 같은 바탕색. v1 은 한 단 어두운 --line-2 를 깔고 있었다 */
body { background: var(--bg); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }

/* 관리자 카드는 테두리 한 줄로 납작하다. 그림자가 없다.
   좁은 화면 값(--r-sm2, --card-pad-sm)이 휴대폰에 그대로 맞는다 */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm2);
  padding: var(--card-pad-sm);
  box-shadow: none;
}
.card + .card { margin-top: 14px; }

/* ---------- 제목 ---------- */
/* 관리자 제목 줄에는 밑줄 막대가 없다. 제목과 작은 보조 글씨뿐이다 */
.hello h1::after, .login-hero h1::after { display: none; }
.hello h1, .login-hero h1 { padding-bottom: 0; }
.hello { padding: 16px 2px 13px; }
.hello h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
.hello p { margin-top: 5px; font-size: var(--fs-sub); font-weight: 600; color: var(--sub); }
/* 로그인은 첫인상이라 한 단 크게 둔다 */
.login-hero { padding: 34px 2px 24px; }
.login-hero h1 { font-size: 25px; font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
.login-hero p { font-size: var(--fs-body); color: var(--sub); }

/* 카드 제목. 관리자 .w > h2 와 같은 값 */
h2.sec, .sec-head h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); }
h2.sec { margin: 0 0 13px; }
.sec-head { margin-bottom: 13px; }
.sec-head span { font-size: var(--fs-sm); font-weight: 600; color: var(--sub); }
/* 제목 앞 색 막대는 뺀다. 관리자에는 없고, 아이콘 타일과 표식이 겹친다 */
h2.sec::before, .sec-head h2::before { display: none; }
.hi { width: 28px; height: 28px; border-radius: 8px; vertical-align: -8px; }
.hi svg { width: 16px; height: 16px; }
.muted { font-size: var(--fs-sub); color: var(--sub); }

/* ---------- 숫자 요약 ---------- */
/* 관리자 속 화면 요약 카드와 같은 꼴. 색 타일 대신 흰 카드에 큰 숫자를 올리고
   이름은 그 아래 작게 둔다. markup 이 <span>이름</span><b>숫자</b> 라
   column-reverse 로 자리만 바꾼다 */
.balance { gap: 8px; margin: 2px 0 14px; }
.bal {
  display: flex; flex-direction: column-reverse; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in);
  padding: 12px 12px 11px; text-align: left;
}
.bal span { margin-top: 3px; font-size: var(--fs-sm); font-weight: 600; color: var(--sub); }
.bal b {
  font-size: 23px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.bal.remain { background: var(--surface); }
.bal.remain b { color: var(--blue); }

/* 홈의 출근·퇴근·오늘 근무 석 줄 */
.facts { margin: 16px 0 14px; padding: 13px 0; }
.facts span { font-size: var(--fs-sm); font-weight: 600; color: var(--sub); }
.facts b { font-size: 17px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* 시계. 관리자에서 제일 큰 숫자가 26px 이다. 여기는 이 화면의 주인공이라
   그보다는 크게 두되, 54px 은 과했다 */
.clock { margin-top: 14px; font-size: 42px; font-weight: 800; letter-spacing: -.045em; }
.clock .sec { font-size: 20px; }

/* ---------- 단추 ---------- */
/* 관리자 단추말은 두 가지다. 작은 것은 알약, 넓은 상자는 모서리 10px.
   그 둘만 쓴다. 12 · 14 · 20 이 섞여 있던 것을 정리한다 */
.cta {
  height: 54px; border-radius: var(--r-in);
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
}
.btn-main {
  height: 48px; margin-top: 16px; border-radius: var(--r-in);
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
}
.btn-out {
  height: 48px; border-width: 1px; border-radius: var(--r-in);
  font-size: 14.5px; font-weight: 800; letter-spacing: -.02em;
}
.mini {
  height: 33px; padding: 0 14px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--fs-sub); font-weight: 700; color: var(--ink-2);
}
.ghost {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--surface); font-size: var(--fs-sub); font-weight: 700; color: var(--ink-2);
}
.arrows button { width: 32px; height: 32px; border-radius: var(--pill); }

/* ---------- 적는 칸 ---------- */
/* 관리자 칸은 흰 바탕에 테두리 한 줄, 모서리 10px 이다.
   v1 은 옅은 바탕에 테두리 없는 알약에 가까웠다.
   글자 크기 16px 은 그대로 둔다. 그보다 작으면 아이폰이 화면을 확대한다 */
.field label { margin-bottom: 6px; font-size: var(--fs-sub); font-weight: 700; color: var(--ink-2); }
.field input, .field select, .field textarea {
  height: 48px; border: 1px solid var(--line); border-radius: var(--r-in); background: var(--surface);
}
.field textarea { height: auto; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27, 77, 160, .12);
}
.field + .field { margin-top: 14px; }
#outPlace { height: 46px; border-radius: var(--r-in); }

/* 눌러서 고르는 목록 */
.pk { border-radius: var(--r-in); background: var(--surface); }
.pk-txt b { font-size: 14.5px; }
.pk-txt small { font-size: var(--fs-sm); }
.pk-h { font-size: var(--fs-sm); color: var(--sub); }

/* ---------- 작은 표식 ---------- */
/* 관리자 .badge 와 같은 값 */
.tag {
  height: 21px; padding: 0 8px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 800;
}
.chip {
  padding: 6px 10px; border-radius: var(--r-sm); background: var(--sunk);
  font-size: var(--fs-sub); color: var(--sub);
}
.chip b { color: var(--ink); font-weight: 800; }
.pill { height: 27px; border-radius: var(--r-sm); font-size: var(--fs-sub); font-weight: 700; }
.pill small { font-size: var(--fs-sm); }

/* ---------- 목록 ---------- */
.rec .d b { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.rec .d span { font-size: var(--fs-sm); }
.rec .t { font-size: 14.5px; font-weight: 700; }
.rec .t small { font-size: var(--fs-sm); }
.item .top b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; }
.item .sub { font-size: var(--fs-sub); color: var(--sub); }
.nti b, .tki b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; }
.nti p { font-size: var(--fs-sub); color: var(--sub); }
.nti .m, .tki .m { font-size: var(--fs-sm); color: var(--sub); }
.empty, .none p { font-size: var(--fs-sub); color: var(--sub-2); }
.doc-fold b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; }
.doc-fold small { font-size: var(--fs-sm); color: var(--sub); }

/* ---------- 그 밖에 모서리가 제각각이던 것 ---------- */
.track { border-radius: var(--r-sm); }
.wkstat { border-radius: var(--r-in); }
.wkmsg, .wkok { border-radius: var(--r-in); font-size: var(--fs-sub); }
.toast { border-radius: var(--r-in); font-size: 14.5px; }
.ln-box, .ln-qa, .note-box, .receipt { border-radius: var(--r-in); }

/* 주 단추는 파랑이다. v1 은 먹색(--ink)을 썼다.
   관리자에서 먹색 단추는 하나도 없다. 「지금 할 일」 은 늘 파랑이다 */
.mini.main {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 800;
}
.mini.main:hover { background: var(--blue-2); border-color: var(--blue-2); color: #fff; }
.btn-main { background: var(--blue); color: #fff; }

/* 초록은 「끝냄(퇴근)」 한 가지 뜻으로만 쓴다.
   그런데 로그인 단추가 퇴근 단추와 같은 class(.cta.out)를 쓰고 있어서
   로그인이 초록으로 나왔다. 뜻이 다른 자리는 파랑으로 되돌린다 */
#loginView .cta.out { background: var(--blue); color: #fff; }
#loginView .cta.out:hover:not(:disabled) { background: var(--blue-2); }

/* 서류 탭 줄 목록의 아이콘도 카드 제목 아이콘과 같은 파랑 타일로.
   v1 은 회색으로 눌러 두었는데, 한 화면 안에서 같은 꼴의 타일이 두 색이면
   둘 사이에 무슨 뜻이 있는 줄 알게 된다 */
.doc-fold > svg:not(.ch) {
  width: var(--ic-sm); height: var(--ic-sm); padding: 7px; border-radius: var(--ic-r-sm);
  background: var(--i4b); color: var(--i4);
}

/* 유연근무 쪽 상자들도 모서리를 10px 로 맞춘다 */
.fxnow, .fxweek div, .fxfill, .sp-wrap { border-radius: var(--r-in); }

/* 단추에 드리운 그림자를 뺀다. v1 이 출근 단추와 주 단추에 넣어 둔 것이다.
   관리자 단추는 하나같이 그림자가 없다. 떠 있는 단추가 하나만 있어도
   두 화면이 다른 물건으로 보인다 */
.cta, .cta.in, .cta.out, .btn-main, .btn-main.mint { box-shadow: none; }
.cta.redo { box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- 아래 탭 ---------- */
/* 관리자에는 탭 바가 없다. 그래도 글자와 선 굵기는 같은 결로 둔다 */
.tabbar button { font-size: 11px; font-weight: 700; }
.tabbar svg { stroke-width: 1.7; }

/* ============================================================
   휴대폰에서 관리자 화면과 나란히 놓고 다시 맞춘 것 (2.95.0)

   앞선 2.94.0 은 관리자를 1440px 에서 재서 맞췄다. 그런데 사장님이 보는 것은
   휴대폰이고, 관리자도 휴대폰에서는 다른 값으로 줄어든다. 같은 폭(390px)에서
   나란히 찍어 다시 쟀더니 세 군데가 남아 있었다.
   ============================================================ */

/* ---------- 머리줄 ----------
   2.84.0 주석에 「관리자와 맞춰 흰 바탕에 선 하나」 라고 적어 두었는데 틀렸다.
   관리자 머리줄(.top)은 바탕도 선도 없다. 페이지 바탕 위에 그냥 얹혀 있다.
   재서 확인한 값: background rgba(0,0,0,0), border-bottom 0, height 56px. */
.bar {
  background: none;
  border-bottom: 0;
  height: 56px;
  margin: 0 -16px 2px;
}
/* 390px 에서 관리자는 brand 14px, 도장 표식 27px·모서리 9px 이다 */
.bar .brand { font-size: 14px; gap: 9px; }
.bar .brand i { width: 27px; height: 27px; border-radius: var(--r-mark); font-size: 10px; }
.bar .brand span { font-size: inherit; font-weight: 600; color: var(--sub); }

/* ---------- 제목 줄 ----------
   관리자는 좁은 화면에서 제목을 19px 로 줄인다. 그리고 제목 왼쪽에 옅은 파랑
   아이콘 타일이 붙는다 (.bar .ti .ic). 그 타일이 속 화면을 속 화면으로 보이게 한다.
   직원 화면 얼개에는 아이콘 자리가 없으므로 ::before 로 깔아 준다.
   탭마다 그림이 다르다. 아래 탭에 쓰는 그림과 같은 것을 쓴다. */
.hello {
  display: grid;
  grid-template-columns: var(--ic-sm) minmax(0, 1fr);
  grid-template-areas: "ic h1" "ic p";
  column-gap: 11px;
  align-items: start;
  padding: 14px 2px 13px;
}
.hello::before {
  content: '';
  grid-area: ic;
  width: var(--ic-sm); height: var(--ic-sm);
  border-radius: var(--ic-r-sm);
  background-color: var(--i4b);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  /* 보조 글씨가 두 줄로 넘어가는 탭이 있다. 가운데 맞춤으로 두면 타일이 아래로
     흘러내려 제목과 어긋난다. 제목 줄에 붙여 두고 눈높이만 살짝 올린다 */
  margin-top: -2px;
}
.hello h1 { grid-area: h1; font-size: 19px; }
.hello p { grid-area: p; }
/* 보조 글씨가 없는 탭에서는 제목만 두 줄 자리를 다 쓴다 */
.hello p:empty { display: none; }
.hello:has(p:empty) { grid-template-areas: "ic h1"; }

[data-tab="home"] .hello::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233A4E9B%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011.5%2012%204l8%207.5%22%2F%3E%3Cpath%20d%3D%22M6%2010.5V20h12v-9.5%22%2F%3E%3C%2Fsvg%3E") }   /* 홈 */
[data-tab="leave"] .hello::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233A4E9B%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4%22%2F%3E%3C%2Fsvg%3E") }   /* 휴가 */
[data-tab="ot"] .hello::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233A4E9B%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M12%207.5V12l3%202%22%2F%3E%3C%2Fsvg%3E") }   /* 근무신청 */
[data-tab="doc"] .hello::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233A4E9B%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h8l4%204v14H6z%22%2F%3E%3Cpath%20d%3D%22M14%203v4h4M9%2012h6M9%2016h6%22%2F%3E%3C%2Fsvg%3E") }   /* 서류 */
[data-tab="board"] .hello::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233A4E9B%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224.5%22%20width%3D%2218%22%20height%3D%2215.5%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%209.5h18M8%202.5v4M16%202.5v4M7%2013h4%22%2F%3E%3C%2Fsvg%3E") }   /* 알림 */
[data-tab="edu"] .hello::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233A4E9B%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204%202.5%208.5%2012%2013l9.5-4.5z%22%2F%3E%3Cpath%20d%3D%22M6.5%2010.8V16c0%201.4%202.5%202.6%205.5%202.6s5.5-1.2%205.5-2.6v-5.2%22%2F%3E%3Cpath%20d%3D%22M21.5%208.5V14%22%2F%3E%3C%2Fsvg%3E") }   /* 교육 */
[data-tab="safe"] .hello::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233A4E9B%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204.2-2.8%207.6-7%209-4.2-1.4-7-4.8-7-9V6z%22%2F%3E%3Cpath%20d%3D%22M9.5%2012l1.8%201.8%203.4-3.6%22%2F%3E%3C%2Fsvg%3E") }   /* 안전·신고 */

/* 동의 화면에도 같은 타일을 둔다 */
#consentView .hello::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233A4E9B%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204.2-2.8%207.6-7%209-4.2-1.4-7-4.8-7-9V6z%22%2F%3E%3Cpath%20d%3D%22M9.5%2012l1.8%201.8%203.4-3.6%22%2F%3E%3C%2Fsvg%3E") }


/* ============================================================
   아이콘을 관리자 규칙대로 돌려놓는다 (2.96.0)

   휴대폰에서 두 화면을 나란히 놓고 보니 제일 크게 걸리는 것이 아이콘이었다.
   관리자는 아이콘 타일을 딱 두 자리에만 쓴다.
     첫 화면의 바로가기 줄 (.strip .ic)
     속 화면 제목 왼쪽에 하나 (.bar .ti .ic)
   카드 제목에는 하나도 없다. 첫 화면 제목에도 없다.

   직원 화면은 카드 제목마다 파랑 타일이 붙어 있었다. 한 화면에 네다섯 개가
   깔리니 관리자와 다른 물건으로 보였다. v1 주석에도 같은 말이 적혀 있다.
   「파스텔 타일 스물여섯 개가 깔려 있으면 휴대폰 한 화면에서 너무 시끄럽다」
   ============================================================ */

/* 카드 제목 아이콘을 뺀다. 관리자 카드 제목에는 아이콘이 없다.
   위쪽 .sec-head .hi / .card i.hi 가 더 센 고르개라 .hi 만으로는 안 꺼진다 */
.hi, .sec-head .hi, .card i.hi, h2.sec .hi { display: none; }
h2.sec, .sec-head h2 { gap: 0; }

/* 홈은 관리자의 첫 화면에 해당한다. 첫 화면 제목에는 타일이 없다.
   (속 화면 제목에는 있다. 그래서 나머지 여섯 탭에는 그대로 둔다) */
[data-tab="home"] .hello { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "p"; }
[data-tab="home"] .hello::before { display: none; }

/* 서류 탭 줄 목록은 관리자 첫 화면의 바로가기 줄(.strip)과 같은 노릇이다.
   거기는 관리자도 타일을 쓴다. 그대로 둔다 */

/* 머리줄 단추 글자색도 관리자(.menu)와 같게 */
.bar .ghost, header .ghost { color: var(--ink-2); font-size: 12px; }

/* 나란히 놓고 다시 재서 남은 세 곳 (2.96.0)
   제목 아이콘 타일: 관리자 .bar .ti .ic 는 좁은 화면에서도 38px·모서리 11px 이다.
     (--ic 를 줄이는 규칙이 없다) 직원은 34px·10px 이었다.
   카드 사이: 관리자는 --gap 18px, 직원은 14px 이었다.
   제목 왼쪽 여백: 관리자 제목은 카드 왼쪽 끝과 딱 맞는다. 직원은 2px 안쪽이었다. */
.hello { grid-template-columns: var(--ic) minmax(0, 1fr); padding: 14px 0 10px; }
.hello::before { width: var(--ic); height: var(--ic); border-radius: var(--ic-r); background-size: 21px 21px; }
[data-tab="home"] .hello { grid-template-columns: minmax(0, 1fr); }
.card + .card { margin-top: var(--gap); }

/* 마지막으로 남은 세 곳 (2.96.0)
   제목 줄 높이: 관리자 h1 은 본문 줄높이(1.6)를 그대로 쓴다. 직원은 1.35 였다.
   요약 숫자: 관리자는 좁은 화면에서 22px 로 줄인다 (.sums b).
   요약 칸: 관리자 요약은 카드라 모서리가 16px 이다. 직원 것은 카드 안에 셋이
     나란히 들어가므로 16px 은 부해 보인다. 그 사이인 12px 로 두고 안쪽만 넓힌다. */
.hello h1 { line-height: 1.6; }
.bal b { font-size: 22px; letter-spacing: -.04em; line-height: 1.15; }
.bal { border-radius: 12px; padding: 13px 13px 12px; }

/* ============================================================
   휴대폰에 맞춘 활자와 자리 (2.96.0)

   앞에서 관리자 값을 그대로 가져다 썼더니 글자가 작아졌다.
   관리자는 책상에서 60cm 떨어져 보는 넓은 화면이고, 이것은 손에 쥐고
   30cm 앞에서 보는 좁은 화면이다. 쓰는 사람도 다르다. 현장 근로자가
   밝은 데서, 장갑 낀 손으로, 흔들리는 차 안에서 누른다.
   그래서 결(색·굵기·모양·이름)은 관리자와 같게 두고 크기만 한 단 올린다.
   디자인 체계가 화면 크기마다 다른 활자 단을 두는 것과 같은 까닭이다.

   닿는 크기 기준 (확인된 것)
     애플: 44 x 44 pt   구글: 48 x 48 dp   WCAG 2.5.5(AAA): 44 x 44 CSS px
   아래 단추는 모두 이 기준 위에 둔다.

   활자 단
     페이지 제목   22 / 800 / -.035em / 줄높이 1.35
     카드 제목     17 / 800 / -.03em  / 줄높이 1.4
     본문          15.5 / 1.65
     라벨          14 / 700
     보조          13.5
     작은 글씨     12.5
     적는 칸       16 (이보다 작으면 아이폰이 화면을 확대한다)
   ============================================================ */

body { font-size: 15.5px; line-height: 1.65; }

/* ---------- 제목 ---------- */
.hello { padding: 16px 0 12px; align-items: center; }
.hello h1 { font-size: 22px; line-height: 1.35; text-wrap: pretty; }
.hello p { margin-top: 3px; font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.login-hero h1 { font-size: 26px; line-height: 1.35; }
.login-hero p { font-size: 15.5px; }

h2.sec, .sec-head h2 { font-size: 17px; line-height: 1.4; }
h2.sec { margin-bottom: 14px; }
.sec-head { margin-bottom: 14px; }
.sec-head span { font-size: 13.5px; }
.muted { font-size: 13.5px; line-height: 1.6; }

/* ---------- 카드 ---------- */
/* 안쪽 좌우를 같은 값으로 둔다. 18 / 17 처럼 1px 다르면 글 왼쪽 끝이 어긋나 보인다 */
.card { padding: 18px; }
.card + .card { margin-top: 14px; }

/* ---------- 홈: 찍는 자리 ---------- */
/* 시계는 지금 몇 시인지 알려 줄 뿐이다. 정작 봐야 하는 것은 내가 몇 시에 찍었나다.
   시계를 한 단 줄이고 그 아래 석 줄의 값을 키운다 */
.clock { margin-top: 12px; font-size: 38px; }
.clock .sec { font-size: 18px; }
.facts { margin: 14px 0; padding: 14px 0; }
.facts span { font-size: 13.5px; font-weight: 600; }
.facts b { font-size: 19px; font-weight: 800; }
.pill { height: 30px; font-size: 13.5px; }
.note { font-size: 13px; }

/* ---------- 숫자 요약 ---------- */
.bal { padding: 14px 13px 12px; }
.bal b { font-size: 24px; }
.bal span { margin-top: 2px; font-size: 13.5px; }

/* ---------- 적는 칸 ---------- */
.field + .field { margin-top: 16px; }
.field label { margin-bottom: 7px; font-size: 14px; font-weight: 700; }
.field input, .field select, .field textarea { height: 50px; font-size: 16px; }
.field textarea { min-height: 92px; padding: 13px 14px; }
.two { gap: 10px; }

/* ---------- 단추 ----------
   손가락이 닿는 크기를 먼저 정하고 글자를 그 안에 넣는다.
   애플 44, 구글 48 이 아래 끝이다. 주 단추는 그보다 넉넉히 둔다 */
.cta { height: 58px; font-size: 17px; }
.btn-main { height: 52px; margin-top: 18px; font-size: 16px; }
.btn-out { height: 52px; font-size: 15.5px; }
.mini { height: 38px; padding: 0 15px; font-size: 14px; }
.item .acts { gap: 8px; margin-top: 12px; }
.arrows { gap: 8px; }
.arrows button { width: 36px; height: 36px; font-size: 17px; }
.bar .ghost, header .ghost { height: 34px; padding: 0 13px; font-size: 13px; }

/* ---------- 목록 ---------- */
/* 줄과 줄 사이를 넉넉히 둔다. 손가락으로 짚어 읽는 화면이다 */
.rec { padding: 14px 0; }
.rec .d b { font-size: 17px; }
.rec .d span { font-size: 13px; }
.rec .t { font-size: 15.5px; }
.rec .t small { font-size: 13px; margin-top: 2px; }
.item { padding: 15px 0; }
.item .top b { font-size: 15.5px; }
.item .sub { margin-top: 5px; font-size: 13.5px; line-height: 1.6; }
.nti { padding: 14px 0; }
.nti b, .tki b { font-size: 15.5px; }
.nti p { margin-top: 6px; font-size: 14px; line-height: 1.6; }
.nti .m, .tki .m { font-size: 12.5px; }
.tki { padding: 14px 0; }
.tki .m { margin-top: 4px; font-size: 13.5px; }
.doc-fold { gap: 14px; }
.doc-fold b { font-size: 15.5px; }
.doc-fold small { margin-top: 3px; font-size: 13px; }
.empty, .none p { font-size: 14px; }
.chip { font-size: 13.5px; }
.tag { height: 23px; padding: 0 9px; font-size: 12px; }
.legend { font-size: 13px; }

/* ---------- 아래 탭 ---------- */
/* 일곱 칸이라 한 칸이 55px 쯤 된다. 글자를 11px 로 두면 좁은 기기에서 잘린다.
   세로로 넉넉히 잡아 닿는 높이를 56px 이상으로 만든다 */
.tabbar button { padding: 9px 0 9px; font-size: 11px; gap: 4px; }
.tabbar svg { width: 21px; height: 21px; }

/* ---------- 긴 한국어 글 ---------- */
/* 낱말 가운데서 줄이 바뀌면 읽는 속도가 떨어진다. 낱말 단위로 끊는다 */
.card p, .nti p, .item .sub, .muted, .pk-txt small { word-break: keep-all; }

/* ============================================================
   하이웍스 근무체크(직원 앱)를 보고 고친 것 (2.96.0)

   무엇을 봤나
     앱스토어 '하이웍스 근무체크' 화면 넉 장 (별 1.7 / 평가 51개, 2026-10-23 확인).
     꼴은 따라갈 것이 못 된다. 파란 머리띠, 줄무늬 표, 원형 아이콘 단추는
     십 년 전 모습이다. 가져올 것은 자리 잡는 차례다.

   하이웍스가 먼저 보여 주는 차례
     1 오늘 날짜와 근무 계획  (8월 28일 금요일 / 근무 시간 09:00~18:00 (소정근무 8시간))
     2 지금 시각과 지금 상태  (08:35:45 · 근무 중)
     3 출근·퇴근 단추와 찍은 시각
     4 오늘 찍힌 기록 목록

   우리는 「근무 기준 09:00 ~ 18:00」 을 단추 아래 흐린 작은 글씨로 맨 끝에
   두고 있었다. 오늘 몇 시까지 일해야 하는지는 찍기 전에 알아야 하는 것이다.
   차례를 바꾼다. 화면 얼개(index.html)는 건드리지 않고 자리만 옮긴다.
   ============================================================ */

[data-tab="home"] .card:has(#punch) { display: flex; flex-direction: column; }
[data-tab="home"] .card:has(#punch) > #net       { order: 1; }
[data-tab="home"] .card:has(#punch) > #rule      { order: 2; }
[data-tab="home"] .card:has(#punch) > .clock     { order: 3; }
[data-tab="home"] .card:has(#punch) > .facts     { order: 4; }
[data-tab="home"] .card:has(#punch) > #punch     { order: 5; }
[data-tab="home"] .card:has(#punch) > #punchNote { order: 6; }
[data-tab="home"] .card:has(#punch) > #outBox    { order: 7; }

/* 끝에 흐리게 달려 있던 줄을 위로 올렸으니 글도 그에 맞게 세운다 */
[data-tab="home"] #rule {
  margin: 11px 0 0;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}

/* 찍은 시각이 이 카드의 알맹이다. 이름은 작게, 숫자는 크게 */
.facts b { font-size: 20px; }
.facts span { margin-bottom: 2px; }

/* 카드를 세로 flex 로 바꾸면서 알약(사내 와이파이 연결됨)이 가로로 늘어났다.
   알약은 글자만큼만 차지해야 뜻이 산다 */
[data-tab="home"] .card:has(#punch) > #net { align-self: flex-start; }

/* ============================================================
   PC 로 열었을 때 틀이 깨지던 것 (2.98.0)

   본문(.app)은 480px 로 가운데 모여 있는데 아래 탭 바만 left:0 right:0 이라
   화면 끝까지 늘어났다. 휴대폰에서는 둘이 같은 폭이라 안 보이던 문제다.
   PC 로 열어 보면 탭이 본문에서 떨어져 나가 보인다.
   사장님과 관리자가 PC 로도 직원 화면을 열어 본다. 본문과 같은 폭으로 묶는다.
   ============================================================ */
.tabbar {
  left: 50%;
  right: auto;
  width: min(480px, 100%);
  transform: translateX(-50%);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
/* 휴대폰에서는 가장자리까지 꽉 차야 한다. 옆 선을 지운다 */
@media (max-width: 481px) {
  .tabbar { border-left: 0; border-right: 0; }
}
/* 바탕색은 건드리지 않는다. 흰 카드가 옅은 회색 위에 뜨는 것이 이 화면의 결이다.
   넓은 화면에서 본문 뒤를 희게 깔면 카드와 바탕이 뒤집혀 더 어색해진다. */

/* 「오늘 근무 10시간 42분」 이 세 칸 중 하나에서 두 줄로 꺾였다.
   숫자는 한 줄로 읽혀야 한다. 칸 사이 여백을 줄이고 글자를 한 단 낮춘다. */
.facts b { white-space: nowrap; font-size: 17px; letter-spacing: -.04em; }
.facts > div + div { padding-left: 10px; }