/* ============================================================================
   app.css — 서식 정본. **새 CSS 를 따로 짜지 마라.**
   두 벌이 되면 반드시 한쪽만 고쳐져 어긋난다.

   규격은 [직원화면] 스킬이 정본이다.
     §1 머리띠 : 높이 56px · 로고 28px · 왼쪽 로고+이름 / 오른쪽 상태·💡·사람 (이 순서 고정)
     §3 글자   : 4단 — 큰제목 / 절제목 / **본문은 한 단 옅게** / 「이건 꼭」은 다시 진하게
                 누를 수 있는 것 최소 44×44px · 대비 4.5:1 이상 · 가로 넘침 0
     §3 표     : 반드시 .tw 로 감싼다. 안 감싸면 폰에서 화면이 통째로 옆으로 밀린다
   ============================================================================ */

/* ── 화이트톤 ──────────────────────────────────────────────────────────────
   2026-09-07 지시: 「UI/UX 를 화이트톤으로」
   바탕을 흰색으로 두고, 나누는 것은 «색»이 아니라 «가는 선»으로 한다.
   그림자를 걷어냈다 — 그림자가 겹치면 화면이 무거워 보인다.
   색은 파랑 하나만 쓴다. 나머지는 회색 계단이다. */
/* SUIT v2.0.5 · https://github.com/sun-typeface/SUIT · OFL: /fonts/OFL-SUIT.txt */
@font-face {
  font-family: "SUIT Variable";
  src: url("/fonts/suit-variable-v2.0.5.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  /* 글자 4단 — 본문(--글3)을 «한 단 옅게» 두는 것이 요령이다.
     본문이 새까마면 굵게 써도 강조가 안 보인다. */
  --글1: #111418;            /* 큰 제목 */
  --글2: #1b1f26;            /* 절 제목 */
  --글3: #4d5665;            /* 본문 ← 여기가 핵심 */
  --글4: #111418;            /* 「이건 꼭」 */
  --흐림: #687383;           /* 흰 바탕에서도 읽히는 보조 글자 */

  --바탕: #ffffff;           /* 화면 바탕 — 흰색 */
  --판: #ffffff;             /* 상자 안 — 같은 흰색. 선으로만 나눈다 */
  --판옅: #fbfcfd;           /* 아주 옅은 회색. 꼭 필요할 때만 */
  --선: #edeff2;             /* 나누는 선 — 아주 가늘게 */
  --선진한: #dfe3e8;         /* 넣는 칸 테두리 */

  --파랑: #1a63d8;           /* 지금 눌러야 할 단추 하나 */
  --파랑진: #1550b4;
  --파랑옅: #f2f7fe;
  --초록: #0a7a45;
  --초록옅: #f1faf5;
  --빨강: #c4283a;
  --빨강옅: #fdf3f4;
  --노랑: #8a5a00;
  --노랑옅: #fdfaf3;

  --둥금: 12px;
  --그림자: none;            /* 화이트톤에서는 그림자를 안 쓴다 */
}

* { box-sizing: border-box; }

/* 업무 탐색과 입력 피드백: 기존 캘린더·카드·신청 흐름을 유지한다. */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--파랑); outline-offset: 3px; }
:where(#현황영역, #대기영역, #직원영역, #처리영역, #권한절, #잔여판, #신청영역, #내역영역) { scroll-margin-top: 132px; }
.업무머리 { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.업무머리 h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: -.02em; }
.업무머리 .설명 { margin: 0; }
.업무탐색 { position: sticky; top: 56px; z-index: 30; display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; margin-bottom: 24px; background: var(--판); border-bottom: 1px solid var(--선진한); }
.업무탐색 a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border-radius: 8px; white-space: nowrap; color: var(--글3); text-decoration: none; font-size: 14px; font-weight: 600; }
.업무탐색 a:hover, .업무탐색 a:focus-visible { color: var(--파랑진); background: var(--파랑옅); }
.업무탐색 a[hidden] { display: none; }
.직원검색줄 { display: flex; align-items: flex-end; gap: 16px; justify-content: space-between; margin: 20px 0 16px; }
.검색칸 { width: min(100%, 380px); }
.검색칸 label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.사람고침 .조정설명, .사람고침 .조정미리보기 { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.7; }
.사람고침 .조정설명 { order: 0; color: var(--글3); }
.조정미리보기 { padding: 12px; border: 1px solid #cddff8; border-radius: 8px; background: var(--파랑옅); color: var(--파랑진); font-variant-numeric: tabular-nums; }
.사람고침 select { min-height: 44px; width: 100%; font-size: 16px; }
.신청도움말 { margin-top: -8px; margin-bottom: 20px; }
#깎임안내 { border-left: 3px solid var(--파랑); }
@media (max-width: 600px) {
  .업무머리 { align-items: flex-start; flex-direction: column; gap: 12px; }
  .업무머리 h1 { font-size: 24px; }
  .업무탐색 a { padding: 8px 12px; }
  .직원검색줄 { flex-direction: column; align-items: stretch; gap: 8px; }
  .검색칸 { width: 100%; }
  #대기표, #지난표 { display: block; min-width: 0; width: 100%; }
  #대기표 thead, #지난표 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #대기표 tbody, #지난표 tbody { display: grid; gap: 12px; }
  #대기표 tr, #지난표 tr { display: grid; padding: 14px; border: 1px solid var(--선진한); border-radius: 12px; }
  #대기표 td, #지난표 td { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  #대기표 td[data-항목]:not([data-항목=""])::before, #지난표 td[data-항목]:not([data-항목=""])::before { content: attr(data-항목); flex: 0 0 64px; color: var(--흐림); font-size: 12px; padding-top: 2px; }
  #대기표 .단추칸 { padding-top: 12px; }
  #대기표 .단추칸 button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

html, body {
  margin: 0; padding: 0;
  background: var(--바탕);
  color: var(--글3);
  font-family: "SUIT Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
  font-size: 16px; line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  /* 🚨 가로 넘침 0 — 하나라도 넘치면 폰에서 화면이 통째로 밀린다 */
  overflow-x: clip;
}

/* ── 머리띠 ([직원화면] §1) ────────────────────────────────────────────── */
.머리띠 {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 16px;
  background: var(--판); border-bottom: 1px solid var(--선);
}
@media (min-width: 700px) { .머리띠 { padding: 0 24px; } }

/* 🚨 로고+이름도 «누르는 것»이다(첫 화면으로 간다). 44px 아래로 내려가면 폰에서 못 누른다.
      2026-09-07 화면점검이 28px 로 잡아냈다 — 눈으로는 안 보였다. */
.머리왼쪽 {
  display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0;
  min-height: 44px; padding: 0 4px; margin-left: -4px; border-radius: 8px;
}
.머리왼쪽:hover { background: var(--바탕); }
.로고 { height: 28px; width: auto; display: block; flex: none; }   /* 🚫 화면마다 크기를 바꾸지 마라 */
/* 🚨 프로그램 이름은 «절대 줄이지 않는다». 줄어들면 「연차 ...」처럼 잘려
      직원이 무슨 프로그램인지 못 알아본다(2026-09-07 390px 사진에서 발견).
      좁을 때 줄여야 할 것은 오른쪽 «상태»다. */
.프로그램이름 {
  font-size: 17px; font-weight: 700; color: var(--글1);
  white-space: nowrap; flex: none;
}
.머리오른쪽 { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }

/* 오른쪽 순서: ①지금 상태 ②💡개선사항 ③내 이름 — 급한 것이 왼쪽이다 */
.상태 {
  font-size: 13px; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* 좁은 폰에서는 머리띠를 조금씩 줄여 «이름과 상태가 둘 다 온전히» 보이게 한다 */
@media (max-width: 430px) {
  .머리띠 { padding: 0 10px; gap: 8px; }
  .프로그램이름 { font-size: 16px; }
  .상태 { font-size: 12px; padding: 3px 8px; }
  .사람 { font-size: 12px; padding: 0 3px; }
  /* 🚫 여기서 .아이콘단추 를 44px 아래로 줄이지 마라. 좁다고 «누를 수 없게» 만들면 본말전도다
        (한 번 40px 로 줄였다가 화면점검이 바로 잡아냈다 — 2026-09-07). */
}
.상태 { background: var(--판); border: 1px solid var(--선진한); }
.상태초록 { border-color: #b9e2cd; color: var(--초록); }
.상태노랑 { border-color: #ecd9b0; color: var(--노랑); }
.상태빨강 { border-color: #f0c9ce; color: var(--빨강); }

.아이콘단추 {
  min-width: 44px; min-height: 44px;          /* 🚨 손가락으로 못 누르면 폰에서 못 쓴다 */
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; font-size: 20px; cursor: pointer; border-radius: 10px;
}
.아이콘단추:hover { background: var(--바탕); }
.사람 {
  font-size: 13px; color: var(--흐림); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px;
  white-space: nowrap;
}
.사람:hover { color: var(--글2); }

/* 🔑 «글자 단추» — 링크(.사람)와 똑같이 보이는 단추.
   🔴 2026-09-15 개발팀 지시 — *"연장근무 신청처럼 비밀번호 변경 아이콘 없애고
     비밀번호 변경 텍스트로 헤드에 노출시켜 줘."*
   ⚫ 🔑 그림 하나는 «이미 아는 사람»에게만 읽힌다. 처음 보는 직원에게는 아무 말도 안 한다.
     그래서 옆의 [로그아웃]과 같은 «글자»로 바꿨다. 새 모양을 만들지 않고 .사람 을 그대로 쓴다.
   🚨 `<button>` 은 브라우저가 제 서식(테두리·바탕·글꼴)을 얹는다. 지워야 링크와 같아 보인다.
   🚨 폰에서도 «줄이지 마라» — 「비밀번호」만 적으면 무엇을 하는 단추인지 다시 흐려진다.
     자리는 위 430px 칸에서 상태 딱지를 줄여 만든다. */
.글자단추 {
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px;
}

/* ── 본문 틀 ───────────────────────────────────────────────────────────── */
main { max-width: 720px; margin: 0 auto; padding: 18px 16px 96px; }
main.관리자 { max-width: 1100px; }
@media (min-width: 700px) { main { padding: 26px 24px 96px; } }

/* ── 🖥️ 큰 화면(데스크톱) — 🔴 2026-09-10 대표님 지시 ─────────────────────────
   *"데스크톱 기준에서는 28인치 화면 기준으로 맞춰줘."*

   🚨 관리자 화면이 «1100px 에서 멈춰» 있었다. 28인치에서는 양옆이 통째로 비고,
      한가운데 좁은 기둥에 29명이 세로로 길게 늘어섰다. 화면을 안 쓰고 있었던 것이다.
   🚨 28인치는 해상도가 «하나»가 아니다 — 4K(3840) 를 100%로 쓰면 3840px,
      윈도우 기본인 150%로 쓰면 2560px, QHD 면 2560px 다. 그래서 «한 숫자»에 맞추지 않고
      계단으로 넓힌다. 어느 쪽으로 쓰셔도 화면이 찬다.
   ⚫ 글줄은 안 늘어난다 — `p, li { max-width: 660px }` 가 위에서 잡고 있다.
     넓어지는 것은 «카드·달력»이지 «문장»이 아니다. 문장이 길어지면 오히려 못 읽는다. */
@media (min-width: 1400px) { main.관리자 { max-width: 1320px; } }
@media (min-width: 1700px) { main.관리자 { max-width: 1600px; } }
@media (min-width: 2000px) { main.관리자 { max-width: 1880px; } }
@media (min-width: 2400px) { main.관리자 { max-width: 2200px; } }
@media (min-width: 3000px) { main.관리자 { max-width: 2560px; } }

h1 { font-size: 24px; font-weight: 700; color: var(--글1); margin: 4px 0 6px; line-height: 1.4; letter-spacing: -.02em; }
h2 { font-size: 19px; font-weight: 650; color: var(--글2); margin: 30px 0 10px; line-height: 1.45; letter-spacing: -.015em; }
p { margin: 0 0 12px; }
/* 🚨 한 줄 길이를 ch 로 재지 마라 — 한글은 폭이 달라 줄이 너무 짧아진다. px 로 못박는다 */
p, li { max-width: 660px; }
.설명 { font-size: 14px; color: var(--흐림); }
b, strong { color: var(--글4); font-weight: 700; }

/* 바탕이 흰색이라 «면»으로는 안 나뉜다. 가는 선으로 나눈다 */
.판 {
  background: var(--판); border: 1px solid var(--선); border-radius: var(--둥금);
  padding: 16px; margin: 0 0 14px;
}
@media (min-width: 700px) { .판 { padding: 20px; } }

/* ── 지금 눌러야 할 단추 하나만 파랗게 ([직원화면] §2) ──────────────────── */
.큰단추, .흰단추 {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 20px; border-radius: 10px;
  font-size: 16px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
}
.큰단추 { background: var(--파랑); color: #fff; width: 100%; }
.큰단추:hover:not(:disabled) { background: var(--파랑진); }
.큰단추:disabled { background: var(--선진한); color: #fff; cursor: not-allowed; }
.흰단추 { background: var(--판); color: var(--글2); border-color: var(--선진한); }
.흰단추:hover { background: var(--바탕); }

.작은단추 {
  min-height: 44px; padding: 0 12px; border-radius: 9px; font-size: 14px; font-weight: 600;
  background: var(--판); color: var(--글2); border: 1px solid var(--선진한);
  cursor: pointer; font-family: inherit;
}
.작은단추:hover { background: var(--바탕); }
.작은단추.위험 { color: var(--빨강); border-color: #f0c2c8; }

/* ── 넣는 칸 ───────────────────────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: 600; color: var(--글2); margin: 0 0 7px; letter-spacing: .01em; }
/* 「필수 / 선택」 — 라벨 옆에 작게. 괄호로 풀어 쓰지 않는다 */
.필수, .선택 {
  font-size: 11px; font-weight: 600; margin-left: 5px; padding: 1px 6px;
  border-radius: 4px; vertical-align: 1px;
}
.필수 { background: var(--빨강옅); color: var(--빨강); }
.선택 { background: var(--판옅); color: var(--흐림); border: 1px solid var(--선); }
input[type=text], input[type=search], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; min-height: 48px; padding: 11px 13px;
  border: 1px solid var(--선진한); border-radius: 10px;
  background: var(--판); color: var(--글1);
  font-size: 16px;                            /* 🚨 16px 미만이면 아이폰이 화면을 확대해 버린다 */
  font-family: inherit; line-height: 1.5;
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--파랑); outline-offset: 1px; border-color: var(--파랑); }
.칸 { margin: 0 0 14px; }
.칸두개 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .칸두개 { grid-template-columns: 1fr; } }

/* 휴가 종류 고르기 — 손가락으로 누르는 큰 칸 */
/* 🔴 2026-09-10 개발팀 지시 — *"연차 종류 4개로 되어 있는데 2개씩 나오게끔 레이아웃 맞춰줘.
   지금은 기타만 아래로 내려가서 레이아웃이 안 맞음."*
   🚨 여기 「560px 넘으면 3열」이 있었다. 종류가 여섯일 때는 3+3 으로 딱 맞았는데,
      2026-09-10 에 넷으로 줄면서 3 + 1 이 되어 「기타」만 혼자 떨어졌다.
      → 넷이니까 «언제나 2열»이다. 2 × 2 로 반듯하게 떨어진다.
   ⚫ 종류를 다시 늘리면 이 줄을 같이 봐야 한다. 열 수는 «개수»를 따라간다. */
.종류들 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.종류 {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 62px; padding: 10px 13px; gap: 2px;
  border: 1px solid var(--선); border-radius: 10px; background: var(--판);
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--글2);
  cursor: pointer; text-align: left;
}
.종류:hover { border-color: var(--선진한); }
.종류[aria-pressed="true"] {
  background: var(--판); border-color: var(--파랑); box-shadow: inset 0 0 0 1px var(--파랑);
  color: var(--파랑진); font-weight: 700;
}
.종류 .깎임 { font-size: 12px; font-weight: 400; color: var(--흐림); }
.종류[aria-pressed="true"] .깎임 { color: var(--파랑진); }

/* ── 남은 연차 큰 숫자 ─────────────────────────────────────────────────── */
.잔여판 {
  background: var(--판);
  border: 1px solid var(--선); border-radius: var(--둥금);
  padding: 20px 18px; margin: 0 0 16px;
}
.잔여이름 { font-size: 13px; color: var(--흐림); margin: 0 0 6px; letter-spacing: .01em; }
.잔여숫자 { display: flex; align-items: baseline; gap: 6px; }
.잔여숫자 .큼 { font-size: 44px; font-weight: 800; color: var(--글1); line-height: 1; letter-spacing: -.03em; }
.잔여숫자 .단위 { font-size: 18px; font-weight: 600; color: var(--글3); }
/* 부여 · 쓴 · 기다리는 중 · 남은 — 넷을 나란히. 남은 일수만 크면 「얼마 썼지?」를 못 본다 */
.잔여셋 {
  display: flex; flex-wrap: wrap; gap: 0 18px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--선);
}
.잔여셋 .칸 { display: flex; align-items: baseline; gap: 5px; margin: 0; }
.잔여셋 .이름 { font-size: 13px; color: var(--흐림); }
.잔여셋 .값 { font-size: 15px; font-weight: 700; color: var(--글2); }
.잔여셋 .칸.모자람 .값 { color: var(--빨강); }

.잔여잔글 { font-size: 13px; color: var(--흐림); margin-top: 8px; }
.잔여판.모자람 { border-color: #f3d3d7; }
.잔여판.모자람 .큼 { color: var(--빨강); }

/* ── 📲 홈 화면에 놓기 안내 ────────────────────────────────────────────── */
/* 한 줄짜리 띠 — 높이 56px 안쪽. 주된 단추를 화면 밖으로 밀지 않는다 */
.홈화면띠 {
  display: flex; align-items: center; gap: 8px;
  background: var(--판); border: 1px solid var(--선); border-radius: var(--둥금);
  padding: 4px 6px 4px 14px; margin: 0 0 14px;
}
.홈화면속 {
  flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--글3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.홈화면속 b { color: var(--파랑진); font-weight: 700; }
.홈화면띠 .작은단추 { flex: none; }
.홈화면띠 .아이콘단추 { flex: none; font-size: 15px; color: var(--흐림); }

/* 놓는 법 차례 */
.차례 { margin: 0; padding: 0 0 0 22px; }
.차례 li { margin: 0 0 10px; font-size: 15px; color: var(--글3); line-height: 1.6; }
.차례 li b { color: var(--글4); }
.차례 .키 {
  display: inline-block; padding: 1px 7px; margin: 0 1px;
  background: var(--바탕); border: 1px solid var(--선진한); border-radius: 6px;
  font-weight: 700; color: var(--글1);
}

/* ── 내 신청 목록 ──────────────────────────────────────────────────────── */
.신청목록 { list-style: none; margin: 0; padding: 0; }
.잔글 { font-size: 12px; color: var(--흐림); font-weight: 400; }

/* ── 누적 사용 (연차연도별) ────────────────────────────────────────────── */
.누적판 { border: 1px solid var(--선); border-radius: var(--둥금); overflow: hidden; margin: 0 0 14px; }
.누적줄 {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--선); background: var(--판);
}
.누적줄:last-child { border-bottom: 0; }
.누적줄.이번해 { background: var(--판옅); }
.누적줄.합계 { border-top: 1px solid var(--선진한); background: var(--판옅); }
.누적해 { flex: 1 1 190px; min-width: 0; }
.누적해 .차수 { font-size: 15px; font-weight: 700; color: var(--글1); }
.누적해 .기간 { font-size: 12px; color: var(--흐림); }
.누적수 { display: flex; gap: 14px; flex: none; }
.누적수 .칸 { display: flex; align-items: baseline; gap: 4px; }
.누적수 .이름 { font-size: 12px; color: var(--흐림); }
.누적수 .값 { font-size: 15px; font-weight: 700; color: var(--글2); }
.지금딱지 {
  font-size: 11px; font-weight: 700; color: var(--파랑진);
  border: 1px solid #cfe0fb; border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px;
}

/* 화이트톤 — 줄마다 상자를 씌우지 않는다. 가는 선으로만 나눈다 */
.신청목록 { border: 1px solid var(--선); border-radius: var(--둥금); overflow: hidden; }
.신청 {
  background: var(--판); border: 0; border-bottom: 1px solid var(--선); border-radius: 0;
  padding: 14px 16px; margin: 0;
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
}
.신청:last-child { border-bottom: 0; }
.신청 .속 { flex: 1 1 200px; min-width: 0; }
.신청 .날 { font-size: 16px; font-weight: 700; color: var(--글1); }
.신청 .잔 { font-size: 13px; color: var(--흐림); margin-top: 2px; }
.딱지 {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  flex: none;
}
/* 화이트톤 — 색을 채우지 않고 «테두리»로만 구분한다 */
.딱지 { background: var(--판); border: 1px solid var(--선진한); color: var(--흐림); }
.딱지.대기 { border-color: #ecd9b0; color: var(--노랑); }
.딱지.승인 { border-color: #b9e2cd; color: var(--초록); }
.딱지.거절 { border-color: #f0c9ce; color: var(--빨강); }
.딱지.취소 { border-color: var(--선); color: var(--흐림); }

/* ── 비어 있을 때 할 말 ([직원화면] §2 ④) ───────────────────────────────── */
.빔 {
  text-align: center; color: var(--흐림); font-size: 14px;
  padding: 34px 16px; background: var(--판);
  border: 0; border-radius: var(--둥금);
}
.신청목록 .빔 { border: 0; }

/* ── 표는 «반드시» 이 상자로 감싼다 ([직원화면] §3) ─────────────────────── */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--판); font-size: 14px; }
th, td { border: 1px solid var(--선); padding: 9px 11px; text-align: left; vertical-align: middle; }
th { background: var(--판옅); color: var(--글2); font-weight: 700; white-space: nowrap; }
td { color: var(--글3); }
td.빔 { border: 0; }
tbody tr:hover td { background: var(--판옅); }

/* ── 관리자 숫자칸 — 🚨 셋뿐이다 (2026-09-10 대표님 지시) ─────────────────── */
.숫자칸 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 8px; }
.숫자 { background: var(--판); border: 1px solid var(--선); border-radius: var(--둥금); padding: 15px 16px; }
.숫자 .값 { font-size: 27px; font-weight: 700; color: var(--글1); line-height: 1.2; font-variant-numeric: tabular-nums; }
.숫자 .이름 { font-size: 13px; color: var(--흐림); margin-top: 2px; }
/* 카드 밑 한 줄 — 「6명 · 합계 6일」처럼 버리기 아까운 숫자를 적는다 (2026-09-10) */
.숫자 .카드잔글 { font-size: 12px; color: var(--흐림); margin-top: 4px; }
.숫자.주의 { border-color: var(--선); border-left: 3px solid var(--빨강); }
.숫자.주의 .값 { color: var(--빨강); }

/* 📊 직원 화면 맨 위 카드 셋 — 🔴 2026-09-10 개발팀 지시
   🚨 관리자 카드바(.숫자칸)를 그대로 썼더니 폰(390px)에서 «2 + 1» 로 깨졌다.
      「잔여 / 부여」가 한 줄, 「사용」이 혼자 다음 줄에 떨어져 셋이 한 벌로 안 읽혔다.
      (자동 검사 243건은 전부 통과했다 — 사진으로만 보였다)
      → 셋은 «언제나 한 줄»이다. 좁으면 글자를 줄이지, 줄을 바꾸지 않는다. */
.잔여칸 { grid-template-columns: repeat(3, 1fr); }
.잔여칸 .숫자 { padding: 12px 10px; text-align: center; }
.잔여칸 .숫자 b { display: block; font-size: 24px; font-weight: 700; color: var(--글1); line-height: 1.2; font-variant-numeric: tabular-nums; }
.잔여칸 .숫자 span { display: block; font-size: 12px; color: var(--흐림); margin-top: 2px; }
/* 「잔여」가 셋 중 «가장 먼저 보는 숫자»다. 왼쪽 굵은 띠로 그것만 앞세운다. */
.잔여칸 .숫자.남은것 { border-left: 3px solid var(--파랑, #2563eb); }
.잔여칸 .숫자.남은것 b { color: var(--파랑, #2563eb); }
@media (max-width: 400px) {
  .잔여칸 { gap: 6px; }
  .잔여칸 .숫자 { padding: 10px 4px; }
  .잔여칸 .숫자 b { font-size: 20px; }
  .잔여칸 .숫자 span { font-size: 11px; }
}
@media (min-width: 1700px) {
  .잔여칸 .숫자 b { font-size: 30px; }
  .잔여칸 .숫자 span { font-size: 13px; }
}
/* 🖥️ 큰 화면에서는 칸이 넓어진 만큼 글자도 키운다. 안 키우면 큰 상자에 작은 숫자가
   떠 있어 «비어 보인다» — 자리를 차지하면 그만큼 값을 해야 한다. */
@media (min-width: 1700px) {
  .숫자 { padding: 20px 24px; }
  .숫자 .값 { font-size: 34px; }
  .숫자 .이름 { font-size: 14px; }
}

/* ── 알림 띠 ───────────────────────────────────────────────────────────── */
.알림띠 {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); z-index: 60;
  background: var(--글1); color: #fff; padding: 13px 18px; border-radius: 12px;
  font-size: 15px; line-height: 1.5; box-shadow: 0 8px 28px rgba(20, 24, 31, .28);
}
.알림띠.나쁨 { background: var(--빨강); }
.알림띠.좋음 { background: var(--초록); }

/* ── 창(모달) — 개선사항·확인 ──────────────────────────────────────────── */
.덮개 {
  position: fixed; inset: 0; z-index: 70; background: rgba(20, 24, 31, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.창 {
  background: var(--판); border-radius: 16px; padding: 20px;
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.창 h2 { margin: 0 0 4px; font-size: 19px; }
.창단추들 { display: flex; gap: 9px; margin-top: 16px; }
.창단추들 > * { flex: 1; }

/* ── 로그인 ────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   🔑 로그인 화면 — 🔴 2026-09-10 개발팀 지시
     *"이름·비밀번호 치는 창 UI/UX 강화 좀 해줘. 전문성 있게.
       지금 너무 촌티 나 · 쓰레기 디자인 같다는 피드백을 받았어."*

   🔬 사진으로 재보니 문제가 넷이었다 (1440×900 실측) :
     ① 덩어리가 위쪽 1/3 에만 붙어 있고 «아래 500px 가 텅 빈 흰 종이»였다
     ② 카드가 없어서 «그냥 폼»으로 보였다 — 테두리도 그림자도 없다
     ③ 이름 고르는 칸이 «운영체제 기본 화살표» 그대로였다
     ④ 로고 42px 하나뿐이라 «무슨 회사 것인지»가 안 보였다

   ⚖️ [직원화면] §3 「바탕을 색으로 채우지 마라」는 그대로 지킨다 —
      바탕은 «아주 옅은» 회색이고 카드는 흰색이다. 형광색 카드가 아니다.
      색을 더해서 살린 것이 아니라 «여백·정렬·그림자»로 살렸다.
   ══════════════════════════════════════════════════════════════════════════ */
.로그인 {
  /* 🚨 화면 «가운데»에 세운다. 위에 붙여 두면 아래가 텅 빈 종이로 보인다.
     dvh 를 쓰는 이유 : 폰은 주소창이 접혔다 펴져서 vh 가 흔들린다. */
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 32px 16px;
  /* 은은한 결 — 위는 아주 옅은 파랑, 아래는 흰색. 카드가 «떠 보이게» 하는 만큼만 준다. */
  background: linear-gradient(180deg, #f6f8fc 0%, #ffffff 62%);
}
.로그인판 {
  width: 100%; max-width: 380px;
  background: var(--판); border: 1px solid var(--선);
  border-radius: 16px; padding: 32px 28px 26px;
  /* 그림자는 «두 겹»이다 — 가까운 것은 테두리를 또렷하게, 먼 것은 종이에서 띄운다 */
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -8px rgba(16, 24, 40, .10);
}
.로그인머리 { text-align: center; margin: 0 0 24px; }
.로그인 .로고큰 { height: 44px; display: block; margin: 0 auto 14px; }
.로그인 .회사 {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--흐림); margin: 0 0 4px;
}
.로그인 h1 { font-size: 24px; font-weight: 700; color: var(--글1); margin: 0; letter-spacing: -.02em; }

.로그인 form .칸 { margin: 0 0 14px; }
.로그인 label { display: block; font-size: 13px; font-weight: 600; color: var(--글3); margin: 0 0 6px; }

/* 넣는 칸 — 왼쪽에 그림, 칸은 그만큼 안쪽으로 밀린다 */
.넣는칸 { position: relative; display: block; }
.넣는칸 .칸그림 {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--흐림); pointer-events: none;
}
.넣는칸 .칸그림 svg { width: 100%; height: 100%; display: block; }
.넣는칸 > select, .넣는칸 > input {
  width: 100%; min-height: 48px; padding: 12px 14px 12px 41px;
  border: 1px solid var(--선진한); border-radius: 10px; background: var(--판);
  font-family: inherit; font-size: 16px; color: var(--글1);   /* 🚨 16px 미만이면 아이폰이 확대한다 */
  transition: border-color .12s, box-shadow .12s;
}
/* 🚨 운영체제 기본 화살표를 그대로 두면 창마다 모양이 달라 «촌스럽게» 보인다.
   우리 화살표를 그린다. 🚨 배경 그림은 data: 로 박는다 — 바깥 주소를 부르면 안 된다. */
.넣는칸 > select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238b93a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
}
.넣는칸 > input { padding-right: 60px; }        /* [보기] 단추 자리 */
.넣는칸 > select:hover, .넣는칸 > input:hover { border-color: #cbd2db; }
.넣는칸 > select:focus, .넣는칸 > input:focus {
  outline: none; border-color: var(--파랑);
  box-shadow: 0 0 0 3px rgba(26, 99, 216, .14);
}
.넣는칸:focus-within .칸그림 { color: var(--파랑); }

/* 👁️ 비밀번호 보기 — 폰에서 오타를 못 보고 「비번이 틀리다」고 하는 일이 잦다 */
.눈단추 {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  /* 🚨 44 × 44px — 손가락으로 못 누르면 폰에서 못 쓴다([직원화면] §3).
     넣는 칸이 48px 이라 44px 이 딱 들어간다. 40px 으로 뒀다가 검사에 걸렸다(2026-09-10). */
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 0; background: transparent; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--흐림); cursor: pointer;
}
.눈단추:hover { color: var(--글3); background: var(--판옅); }
.눈단추[aria-pressed="true"] { color: var(--파랑); }

.로그인 .큰단추 { margin-top: 18px; min-height: 50px; font-size: 16px; }
.로그인 .안내 {
  text-align: center; font-size: 13px; color: var(--흐림);
  margin: 16px 0 0; line-height: 1.55;
}
/* 👑 「관리자 로그인」 — 직원 눈에는 «있는 듯 없는 듯». 누르면 이름을 직접 넣는 칸이 된다.
   🚨 그래도 44px 은 지킨다. 작게 보이는 것과 «못 누르는 것»은 다르다. */
.관리자링크 {
  display: block; width: 100%; min-height: 44px; margin: 8px 0 0;
  border: 0; background: transparent; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--흐림); cursor: pointer;
}
.관리자링크:hover { color: var(--파랑); background: var(--파랑옅); }
.관리자링크[aria-pressed="true"] { color: var(--파랑); }

/* ══════════════════════════════════════════════════════════════════════════
   🗓️ 작은 팀 달력 — 🔴 2026-09-10 개발팀 지시
      *"각 팀 아이템 카드 위에 «작은 달력 캘린더»도 만들어 줘."*

   🚨 위의 큰 «월별 달력»(.달력)과 «다른 것»이다. 이건 4주짜리 작은 것이고,
      직원 신청 화면과 관리자 팀 카드 «둘 다»가 쓴다.
   ⚫ 색은 [data-팀] 변수를 그대로 읽는다 — 팀 색은 이 파일 «한 곳»에만 있다.
   ══════════════════════════════════════════════════════════════════════════ */
.팀달력 {
  margin: 0 0 14px; padding: 12px 13px;
  border: 1px solid var(--팀테, var(--선)); border-radius: 12px;
  background: var(--팀바탕, var(--판));
}
/* 🔴 2026-09-11 — 「09.06 ~ 10.03」을 «2026년 9월»로 바꾸면서 달을 넘기는 [‹][›]가 붙었다. */
.팀달력 .달머리 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.팀달력 .달제목 {
  margin: 0; font-size: 14px; font-weight: 700;
  color: var(--팀진, var(--글1)); flex: 1 1 auto; min-width: 0;
}
.팀달력 .달이름 {
  font-size: 13px; font-weight: 700; color: var(--글1);
  min-width: 82px; text-align: center; font-variant-numeric: tabular-nums;
}
/* 🚨 누를 수 있는 것은 44×44px 이상([직원화면] §3). 작은 달력이라고 줄이지 마라 —
   폰에서 손가락으로 못 누르면 다음 달을 영영 못 본다. */
.팀달력 .달단추 {
  min-width: 44px; min-height: 44px; padding: 0;
  font-size: 18px; line-height: 1; font-weight: 700;
  color: var(--팀진, var(--글2)); background: var(--판);
  border: 1px solid var(--팀테, var(--선)); border-radius: 10px; cursor: pointer;
}
.팀달력 .달단추:hover { background: var(--판옅); }

.작은달력 {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--선); border: 1px solid var(--선); border-radius: 10px; overflow: hidden;
}
.작은달력 .요일머리 {
  background: var(--판옅); text-align: center; font-size: 11px; font-weight: 700;
  color: var(--글3); padding: 4px 0;
}
.작은달력 .날칸 { background: var(--판); min-height: 58px; padding: 3px 4px; }
.작은달력 .날칸.빈칸 { background: var(--판옅); }
.작은달력 .날짜 { font-size: 11px; font-weight: 700; color: var(--글2); }
.작은달력 .일요일 .날짜, .작은달력 .공휴일 .날짜 { color: #c0392b; }
.작은달력 .토요일 .날짜 { color: #2563eb; }
.작은달력 .오늘 { outline: 2px solid #2563eb; outline-offset: -2px; }
.작은달력 .휴일이름 { font-size: 10px; color: #c0392b; }

/* 🚨 「최소 근무 인원보다 적게 남는 날」. 주말·공휴일에는 안 칠한다 —
      칠하면 달력의 3분의 1이 늘 주황이라 정작 봐야 할 평일이 안 보인다(team-calendar.js).
   ⚫ 색만으로 말하지 않는다. 왼쪽에 굵은 띠를 같이 둬서 색을 못 가리는 분도 안다. */
.작은달력 .날칸.모자람 {
  background: #fff6ec; box-shadow: inset 3px 0 0 #b35c00;
}
.작은달력 .날칸.모자람 .날짜 { color: #b35c00; }

.작은달력 .쉼칩 {
  display: flex; align-items: baseline; gap: 3px; margin-top: 2px;
  padding: 1px 4px; border-radius: 5px; font-size: 10px; line-height: 1.35;
  background: var(--팀바탕, #eef4ff); border: 1px solid var(--팀테, #cfe0ff);
  color: var(--팀글, #1b3a6b);
  width: fit-content; max-width: 100%;
}
.작은달력 .쉼칩 .이름 { font-weight: 700; white-space: nowrap; }
.작은달력 .쉼칩 .무엇 {
  color: var(--팀선, #4b6ea8); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 대기는 «아직 확정이 아니다». 점선으로 갈라 둔다 — 색을 하나 더 만들지 않는다. */
.작은달력 .쉼칩.대기 { border-style: dashed; }

.팀달력 .달안내 {
  margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--글3);
}
.팀달력 .달안내.빨강 { color: var(--빨강); font-weight: 600; }

/* 🚨 폰(390px)에서는 한 칸이 50px 안팎이다. 「안혜정 오전 반차」가 다 안 들어간다.
      → 좁으면 종류를 접고 «이름만» 남긴다. 종류는 점선 테두리로 갈린다.
      큰 달력(.달력)에서 이미 한 번 밟은 함정이다 — 같은 답을 쓴다. */
@media (max-width: 640px) {
  .작은달력 .날칸 { min-height: 48px; padding: 2px; }
  .작은달력 .쉼칩 { font-size: 10px; gap: 0; padding: 1px 2px; }
  .작은달력 .쉼칩 .무엇 { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   📖 부여 내역 — 🔴 2026-09-10 개발팀 지시
      *"입사 1년 차까지는 «월차 개념»으로 쌓이잖아. … 그 «내역»들이 다 들어가야 한다."*
   ⚫ 눌러야 펼쳐진다. 첫 화면에 설명 문단을 늘어놓지 않는다([직원화면] §2).
   ══════════════════════════════════════════════════════════════════════════ */
.부여내역 { margin: 0 0 14px; }
.부여내역 > summary {
  cursor: pointer; font-size: 13px; color: var(--파랑진, #1b4fa0);
  padding: 10px 2px; min-height: 44px; display: flex; align-items: center;
}
.부여내역[open] > summary { font-weight: 700; }
.부여내역 > div {
  margin-top: 4px; padding: 12px 14px;
  border: 1px solid var(--선); border-radius: 12px; background: var(--판);
}
.내역줄 {
  display: grid; grid-template-columns: 78px 62px 1fr; gap: 8px;
  align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--선);
}
.내역줄:last-of-type { border-bottom: 0; }
.내역줄 .말 { font-size: 13px; font-weight: 700; color: var(--글1); }
.내역줄 .값 {
  font-size: 14px; font-weight: 700; color: var(--글1);
  text-align: right; font-variant-numeric: tabular-nums;
}
.내역줄 .설명 { font-size: 12px; color: var(--글3); line-height: 1.6; }
.내역끝 {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--선);
  font-size: 12px; line-height: 1.6; color: var(--글2);
}
/* 🚨 폰에서는 세 칸이 안 들어간다. 「말 · 값」을 한 줄로 올리고 설명을 아래로 내린다. */
@media (max-width: 560px) {
  .내역줄 { grid-template-columns: 1fr auto; }
  .내역줄 .설명 { grid-column: 1 / -1; }
}

/* 🗓️ 사용 일정 — 사람 카드 안의 「다음 · 최근」 두 줄 */
.사람카드 .사용일정 {
  display: grid; gap: 3px; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--선);
}
.사람카드 .사용일정 .칸 { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.사람카드 .사용일정 .칸 .이름 { flex: 0 0 26px; color: var(--흐림); }
.사람카드 .사용일정 .칸 .값 { color: var(--글1); font-weight: 600; }
.사람카드 .사용일정 .칸 .값.빔값 { color: var(--흐림); font-weight: 400; }
/* 🚨 «경고»가 아니라 «아직 승인 전»이라는 사실이다. `.작은딱지`(없앤 경고)와 옷을 갈랐다. */
.사람카드 .사용일정 .대기표 {
  margin-left: 6px; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  border: 1px dashed var(--주황진, #b35c00); color: var(--주황진, #b35c00);
}

/* 🗓️ [사용 일정]을 누르면 펼쳐지는 칸 */
.일정펼침 {
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--선); border-radius: 10px; background: var(--판옅);
  max-height: 220px; overflow-y: auto;
}
.일정펼침 .해머리 {
  font-size: 11px; font-weight: 700; color: var(--흐림);
  margin: 6px 0 3px; letter-spacing: .02em;
}
.일정펼침 .해머리:first-child { margin-top: 0; }
.일정펼침 .일정줄 {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--선);
}
.일정펼침 .일정줄:last-child { border-bottom: 0; }
.일정펼침 .일정줄 .날 { flex: 0 0 84px; color: var(--글1); font-variant-numeric: tabular-nums; }
.일정펼침 .일정줄 .무엇 { flex: 1 1 auto; color: var(--글2); }
.일정펼침 .일정줄 .일수 { flex: 0 0 auto; color: var(--흐림); font-variant-numeric: tabular-nums; }
.일정펼침 .일정줄.대기 .무엇, .일정펼침 .일정줄.대기 .일수 { color: var(--주황진, #b35c00); }

/* 👑 관리자 지정 — 한 줄에 한 사람. 흰 카드에 얇은 선([직원화면] §3) */
#권한칸 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.권한줄 {
  /* 🚨 2026-09-15 — 줄에 [비밀번호 초기화] 가 하나 더 붙으면서 한 줄에 넷이 됐다.
     안 접히게 두었더니 «컨설팅 / 팀» 처럼 팀 이름이 두 동강 났다(사진으로 잡음).
     → 넘치면 단추가 «아랫줄로» 내려가게 둔다. 글자를 쪼개는 것보다 줄이 길어지는 게 낫다. */
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--선); border-radius: 10px; background: var(--판); padding: 11px 13px;
}
/* 🚨 이름 칸이 «먼저» 자리를 잡는다. 0 까지 줄어들게 두면 이름이 대신 쪼개진다. */
.권한줄 .속 { flex: 1 1 130px; min-width: 130px; }
.권한줄 .이름 { font-size: 15px; font-weight: 700; color: var(--글1); }
.권한줄 .이름 .직급 { font-size: 12px; font-weight: 500; color: var(--흐림); margin-left: 6px; }
.권한줄 .잔글 { font-size: 12px; color: var(--흐림); margin-top: 2px; }
.권한줄.못끔 { background: var(--판옅); }
/* 🚨 사진으로 잡음 — 「대표님」 딱지가 «대표 / 님» 두 줄로 접혔다.
   딱지는 줄어들지 않는다. 줄어들 것은 왼쪽 글이다. */
.권한줄 > .작은딱지, .권한줄 > .신분딱지, .권한줄 > .작은단추 {
  flex: 0 0 auto; white-space: nowrap;
}

/* 🔴 2026-09-11 개발팀 지시 — *"「지금은 제 연차만 봅니다」 이 문구 없애고
   «뱃지»로 «관리자 및 직원»으로 나눠 줘."*
   ⚫ 딱지는 «셋»뿐이다 — 대표님 / 관리자 / 직원. 넷째를 만들면 강조가 아니게 된다. */
.신분딱지 {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--선진한); color: var(--흐림); background: var(--판);
}
.신분딱지.대표님 { border-color: #bfe3d0; color: #037f4c; background: #f2fbf6; }
.신분딱지.관리자 { border-color: #cfe0fb; color: var(--파랑진, #1b4fa0); background: #f4f8ff; }
.신분딱지.직원   { border-color: var(--선진한); color: var(--흐림); background: var(--판옅); }

.로그인바닥 { font-size: 12px; color: var(--흐림); margin: 0; text-align: center; }

@media (max-width: 400px) {
  .로그인 { padding: 24px 14px; }
  .로그인판 { padding: 26px 20px 22px; border-radius: 14px; }
  .로그인 h1 { font-size: 21px; }
}

.막힘 { max-width: 460px; margin: 12vh auto; padding: 0 20px; text-align: center; }
.막힘 h1 { font-size: 21px; }

/* ── 잘못됐을 때 ([직원화면] §1: 무엇이·왜·그래서 무엇을) ────────────────── */
/* 화이트톤 — 바탕을 채우지 않는다. 왼쪽에 굵은 선 하나로 표시한다 */
.경고 {
  background: var(--판); border: 1px solid var(--선); border-left: 3px solid var(--빨강);
  border-radius: 8px; padding: 12px 14px; font-size: 14px; color: #8c1a27; margin: 0 0 14px;
}
.알림 {
  background: var(--판); border: 1px solid var(--선); border-left: 3px solid #d9a441;
  border-radius: 8px; padding: 12px 14px; font-size: 14px; color: #6b4600; margin: 0 0 14px;
}
/* 🔑 «제 비밀번호»를 아직 안 정하신 분에게만 뜨는 줄 — 🔴 2026-09-15 개발팀 지시
   🚨 폰(390px)에서 말과 단추가 한 줄에 다 안 들어간다. `wrap` 으로 «접히게» 둔다.
      안 접어 두면 단추가 화면 밖으로 밀려 나가 «누를 수 없는 단추»가 된다. */
.비번알림 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.비번알림 .작은단추 { flex: none; }

/* 🔑 비밀번호 바꾸는 창 — 칸 셋이 붙어 보이지 않게 사이를 띄운다 */
.비번폼 .칸 { margin-bottom: 14px; }
.비번폼 .설명 { margin: 7px 0 0; }
/* 🚨 `.넣는칸` 은 왼쪽 41px 을 «칸 그림(자물쇠)» 자리로 비워 둔다. 이 창에는 그림이 없어서
   그만큼이 그냥 빈칸이 되고, 글자가 칸 한가운데서 시작하는 것처럼 보인다. 도로 당긴다.
   ⚫ 그림을 넣지 않은 이유 — 한 창에 자물쇠가 셋이면 그건 장식이지 안내가 아니다. */
.비번폼 .넣는칸 > input { padding-left: 14px; }
/* [보기] 가 «없는» 칸(한 번 더)은 오른쪽 60px 도 비워 둘 이유가 없다 */
.비번폼 .넣는칸 > input:only-child { padding-right: 14px; }

[hidden] { display: none !important; }

/* 🚨 2026-09-10 대표님 지시 — *"하단에 이번 해 공휴일 아예 삭제 필요 없어."*
   공휴일을 죽 늘어놓던 `.자동휴일` 서식을 통째로 없앴다. 되살리지 마라.
   공휴일 «자체»는 달력에서 빨간 날(.달력 .공휴일)로 계속 보인다. */

/* ── 👥 직원별 연차 : 팀별 카드 (🔴 2026-09-10 대표님 지시) ────────────────
   ① *"한눈에 보기 편하게 카드 형태로 팀별로 나눠줘"*
   ② *"카드별로 잘 나왔는데 «가독성 좋게» UI/UX 강화해줘"*

   🚨 ②를 받고 다시 짰다. 처음 판은 카드 높이의 절반이 «넣는 칸»이었다 —
      [입사일][부여][켜기 전 사용][저장]. 그건 한 번 하고 끝나는 일이고,
      대표님이 늘 하시는 일은 «읽는 것»이다. 읽는 것이 자리를 가져야 한다.
      → 넣는 칸은 [고치기]를 눌러야 나온다(.사람고침[hidden]).
   ⚫ 색은 두 가지뿐이다 — «봐야 할 것»(노랑/빨강)과 나머지(회색).
     셋째 색을 만드는 순간 강조가 아니게 된다 ([직원화면] §3). */
.사람칸 { margin: 0 0 14px; }

/* ── 거르개 — 숫자는 «장식»이 아니라 «거르개»여야 자리값을 한다 ─────────── */
.거르개 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--판); border: 1px solid var(--선);
  border-left: 3px solid #d9a441; border-radius: 10px;
}
.거름말 { font-size: 13px; font-weight: 700; color: var(--글2); margin-right: 4px; }
.거름칩 {
  display: inline-flex; align-items: center; gap: 6px;
  /* 🚨 2026-09-15 — 34px 이었다. 손가락으로 «못 누르는» 크기다([직원화면] §3 = 44px).
     배포 점검 ①(전수 2회차)이 재서 잡았다. 제 변경 이전부터 있던 것이다.
     ⚫ 「관리자만 보는 화면이니까」로 넘기지 마라 — 대표님도 폰으로 보신다. */
  min-height: 44px; padding: 0 11px; border-radius: 999px;
  background: var(--판); border: 1px solid var(--선진한); color: var(--글3);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.거름칩:hover { background: var(--바탕); }
.거름칩.노랑 { border-color: #ecd9b0; color: var(--노랑); }
.거름칩.파랑 { border-color: #cfe0fb; color: var(--파랑진); }
.거름칩.빨강 { border-color: #f0c9ce; color: var(--빨강); }
/* 고른 칩은 «채워서» 표시한다 — 테두리만 바꾸면 어느 것이 켜졌는지 안 보인다 */
.거름칩.고름 { background: var(--글1); border-color: var(--글1); color: #fff; }

/* ── 팀 상자 ────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   🎨 팀 색 — 정본은 «여기 한 곳»이다
       🔴 2026-09-10 개발팀 지시 — *"관리자 프로그램에서 팀별로 색감을 좀 다르게
          한 눈에 알아볼 수 있게. 지금은 다 같은 색이라 잘 안 보임."*
          *"캘린더에 올라왔을 때 안혜정 운영지원팀이면 올라간 색감이 똑같게끔.
            (ex 운영지원팀이 주황색이면 캘린더에 주황색으로) 연차 단어 글자 색깔도 다르게."*

   🔬 색을 지어내지 않았다. 회사 캘린더의 «그룹 색»을 실측해서 맞췄다.
       💚 경영진 #037f4c · 🩷 컨설팅부 #ff007f · 🧡 사내 일정 #fdab3d · 💙 접수 일정 #007eb5
       (개발팀 색만 짝이 없어 회청으로 둔다)
   🚨 여기에 «보드 번호»를 적지 마라 — 이 파일은 직원 브라우저로 그대로 나간다.
      2026-09-10 에 내가 적었다가 유출 검사(check-leak)가 잡았다. 서식 파일에는 서식만 적는다.
   ⚫ 운영지원팀이 주황(#fdab3d)인 것은 개발팀이 든 예를 그대로 따른 것이다.

   🚨 «한 곳»에서만 정한다. 팀카드와 달력 칩이 같은 변수를 읽으므로
      여기 한 줄만 고치면 두 자리가 «같이» 바뀐다. 두 벌로 만들지 마라.
   🚨 팀 이름이 바뀌면 이 선택자도 바꿔야 한다. 짝이 없으면 아래 «기본»으로 떨어져
      전과 똑같은 파랑이 된다 — 화면이 깨지지는 않는다.
   🔴 2026-09-11 — 영업1팀·영업2팀·영업 청주팀·대전 CS팀도 연차 관리에 넣었다.
      서로 다른 팀을 한눈에 가르도록 각각 색을 준다.
   ══════════════════════════════════════════════════════════════════════════ */
/* 칸 넷의 쓰임새 —
     --팀진 : 머리띠 «통짜» 바탕. 🚨 여기 흰 글자가 올라간다 → 4.5:1 을 넘어야 한다
     --팀선 : 가는 선·종류 딱지 글자
     --팀글 : 옅은 바탕 위의 진한 글자
     --팀바탕/--팀테 : 아주 옅은 바탕과 테두리 (달력 칩·카드 속) */
[data-팀] {
  --팀진: #3a5a8c; --팀선: #4b6ea8; --팀글: #1b3a6b; --팀바탕: #eef4ff; --팀테: #cfe0ff;
}
[data-팀="경영진"]     { --팀진: #037f4c; --팀선: #037f4c; --팀글: #0b5637; --팀바탕: #e8f6ef; --팀테: #b8e2ce; }
[data-팀="컨설팅팀"]   { --팀진: #c2185b; --팀선: #c2185b; --팀글: #8e1246; --팀바탕: #fdeaf2; --팀테: #f6c2d7; }
[data-팀="영업1팀"]     { --팀진: #4338ca; --팀선: #4f46e5; --팀글: #312e81; --팀바탕: #eef2ff; --팀테: #c7d2fe; }
[data-팀="영업2팀"]     { --팀진: #0e7490; --팀선: #0891b2; --팀글: #155e75; --팀바탕: #ecfeff; --팀테: #a5f3fc; }
[data-팀="영업 청주팀"],
[data-팀="청주 영업팀"] { --팀진: #a21caf; --팀선: #c026d3; --팀글: #701a75; --팀바탕: #fdf4ff; --팀테: #f0abfc; }
[data-팀="대전 CS팀"],
[data-팀="대전CS팀"]    { --팀진: #9f1239; --팀선: #be123c; --팀글: #881337; --팀바탕: #fff1f2; --팀테: #fecdd3; }
/* 🚨 주황만 «한 단 어둡게» 쓴다. 밝은 주황(#e07b00)에 흰 글자는 3.00:1 로 규격(4.5:1)에
   못 미친다 — 실제로 재봤다. #b35c00 은 4.72:1 로 통과하면서도 주황으로 보인다.
   ⚫ 달력 칩·딱지에는 밝은 쪽(--팀선)을 그대로 쓴다. 거기는 흰 글자가 아니라 상관없다. */
[data-팀="운영지원팀"] { --팀진: #b35c00; --팀선: #e07b00; --팀글: #8a4700; --팀바탕: #fff3e0; --팀테: #f7d5a3; }
[data-팀="마케팅팀"]   { --팀진: #6d3fd4; --팀선: #6d3fd4; --팀글: #4a2a94; --팀바탕: #f1ecfd; --팀테: #d6c8f6; }
[data-팀="개발팀"]     { --팀진: #0f6f87; --팀선: #0f6f87; --팀글: #0a4d5e; --팀바탕: #e6f4f8; --팀테: #b9dfe9; }

/* ══════════════════════════════════════════════════════════════════════════
   👑 팀 묶음 카드 — 🔴 2026-09-10 개발팀 지시
     *"좌측만 세로로 줄 색깔별로 나누었는데, 그냥 카드 자체를 그 색으로 바꿔서
       확 보일 수 있도록 가독성 좋게 UI/UX 강화해줘."*

   ⚖️ 회사 규격은 「바탕을 색으로 채우지 마라 · 팀 구분은 왼쪽 가는 띠로만」이다
      ([employee-screen] §3 — 대표님이 *"배경색도 강하고"* 라고 하셔서 생긴 규칙).
      이 지시는 그것을 뒤집는다. 그래서 «둘을 다 만족하는» 모양으로 짰다 :

        ┌──────────────────────────────────────────┐
        │  운영지원팀   4명 · 남은 연차 29일         │ ← 통짜 팀색 + «흰 글자» (4.5:1 넘김)
        ├──────────────────────────────────────────┤
        │  (아주 옅은 팀색)                         │
        │   ┌────────┐ ┌────────┐ ┌────────┐       │
        │   │ 흰 카드 │ │ 흰 카드 │ │ 흰 카드 │      │ ← 사람 카드는 «흰색» 그대로
        │   └────────┘ └────────┘ └────────┘       │
        └──────────────────────────────────────────┘

   ⚫ 색은 «머리띠»가 쓰고, 글은 «흰 카드»가 쓴다. 그래서 멀리서 팀이 확 갈리면서도
      정작 읽어야 할 숫자는 흰 바탕 위에 있다. 대표님이 지적하셨던 「글이 안 읽힌다」가
      안 생기는 자리다.
   🚨 사람 카드 바탕을 팀색으로 칠하지 마라. 그러면 한 화면에 색이 17장 깔려서
      «어느 것이 급한지»(노랑끝·빨강끝 경고)가 묻힌다.
   ══════════════════════════════════════════════════════════════════════════ */
.팀카드[data-팀] {
  padding: 0; overflow: hidden;                 /* 머리띠가 모서리까지 꽉 차게 */
  /* 🚨 여기 「사람 수만큼만 넓어지게」(max-width: calc(--사람수 × 310px)) 가 있었다. 없앴다.
     2026-09-10 개발팀 지시 *"다른 팀도 카드 크기 이거에 맞춰서 동일하게"* 를 지키려면
     팀 카드가 «전부 같은 폭»이어야 한다 — 그래야 열 수가 같고 카드 폭도 같아진다.
     ⚫ 그 대신 1명짜리 팀은 오른쪽이 빈다. 둘은 같이 못 한다(위 .사람들 주석 참고). */
  border-color: var(--팀테);
  background: var(--팀바탕);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.팀카드[data-팀] > .팀머리 {
  margin: 0; padding: 11px 14px;
  background: var(--팀진); color: #fff;
  border-radius: 0;
}
.팀카드[data-팀] > .팀머리 .팀이름 { color: #fff; font-size: 15px; font-weight: 650; }
/* 잔글은 흰색을 «조금 죽여» 둔다 — 팀 이름이 먼저 읽혀야 한다 */
.팀카드[data-팀] > .팀머리 .잔글 { color: rgba(255, 255, 255, .88); font-weight: 600; }
.팀카드[data-팀] > .사람들 { padding: 12px; }
/* 사람 카드는 «흰색»이라 옅은 팀색 위에서 떠 보인다 */
.팀카드[data-팀] .사람카드 { background: #fff; border-color: var(--팀테); }
/* 🚨 「봐야 할 사람」 표시(노랑끝·빨강끝)는 «팀 색보다 세야» 한다. 안 그러면 묻힌다. */
.팀카드[data-팀] .사람카드.노랑끝 { border-left: 4px solid #d9a441; }
.팀카드[data-팀] .사람카드.빨강끝 { border-left: 4px solid var(--빨강); }

@media (max-width: 640px) {
  .팀카드[data-팀] > .팀머리 { padding: 10px 12px; }
  .팀카드[data-팀] > .사람들 { padding: 10px; }
}

.팀카드 {
  border: 1px solid var(--선); border-radius: var(--둥금);
  background: var(--판); padding: 12px; margin: 0 0 12px;
}
.팀머리 {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--글1);
}
.팀머리 .팀이름 { letter-spacing: .01em; }

/* 한 줄에 몇 장이 깔릴지는 «화면 폭»이 정한다. 폰이면 한 장, 28인치면 예닐곱 장.
   🔴 2026-09-10 개발팀 지시 — *"직원 개인당 카드 박스 전부 컨설팅팀 기준 카드 크기로 통일."*
   🚨 `minmax(300px, 1fr)` 이라 «팀에 몇 명 있느냐»에 따라 카드 폭이 달라졌다 —
      5명짜리 컨설팅팀은 3열로 갈려 한 장이 300px 남짓인데, 1명짜리 팀은 그 한 장이
      칸 전체로 늘어나 «혼자만 뚱뚱했다». 같은 사람 카드인데 팀마다 크기가 달랐다.
      → 폭을 «못박는다». 어느 팀이든 300px 로 같다.
   ⚫ 폰에서는 300px 를 고집하면 옆이 빈다. 거기서는 한 칸으로 꽉 채운다. */
/* 🔴 2026-09-10 개발팀 지시 — *"한쪽 줄이 꽉 차면 오른쪽이 비어 보이는데 딱 들어가게끔
   해줘. 다른 팀도 카드 크기 이거에 맞춰서 동일하게."*

   🚨 바로 앞에서 폭을 «300px 로 못박았다». 그랬더니 한 줄에 여섯 장이 깔리고
      **오른쪽에 나머지가 그대로 남았다**(2156px 화면에서 실측 — 카드 6장 뒤로 120px 빔).
      못박은 폭은 «남는 자리»를 못 먹는다.
   → `1fr` 로 되돌린다. 카드가 남는 폭을 나눠 가져 «줄이 딱 떨어진다».

   🚨 그러면서도 «팀마다 크기가 같아야» 한다. 그래서 팀 카드의 폭 제한(--사람수)을 없앴다.
      팀 카드가 전부 같은 폭이면 → 열 수가 같고 → 카드 폭도 같다.
      ⚫ 이건 «맞바꾼 것»이다. 1명짜리 팀은 오른쪽이 빈다.
        「카드 크기를 팀마다 같게」와 「팀 카드를 사람 수만큼만」은 같이 못 한다 —
        열 수가 팀 카드 폭에서 나오고, 팀 카드 폭이 사람 수에서 나오면 서로를 물기 때문이다.
        개발팀이 «크기 통일»을 골랐다. 그 쪽을 지킨다. */
.사람들 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
@media (max-width: 700px) { .사람들 { grid-template-columns: 1fr; } }

/* ── 사람 카드 ──────────────────────────────────────────────────────────── */
.사람카드 {
  border: 1px solid var(--선); border-radius: 10px; background: var(--판);
  padding: 13px 14px; margin: 0; min-width: 0;   /* 사이는 .사람들 의 gap 이 낸다 */
}
/* 🚨 «봐야 할 사람»은 왼쪽 굵은 선 하나로 표시한다. 바탕을 칠하면 29장 중
      여러 장이 색으로 차서 오히려 어느 것이 급한지 안 보인다. */
.사람카드.노랑끝 { border-left: 3px solid #d9a441; }
.사람카드.빨강끝 { border-left: 3px solid var(--빨강); }

.사람카드 .카드머리 { display: flex; align-items: center; gap: 10px; }
.사람카드 .카드머리 .얼굴 { width: 38px; height: 38px; font-size: 14px; }
.사람카드 .카드머리 .속 { flex: 1 1 auto; min-width: 0; }
.사람카드 .카드머리 .이름 {
  font-size: 16px; font-weight: 700; color: var(--글1); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.사람카드 .카드머리 .이름 .직급 {
  font-size: 12px; font-weight: 600; color: var(--흐림); margin-left: 5px;
}
.사람카드 .잔여 { flex: none; text-align: right; }
.사람카드 .잔여 .값 { font-size: 26px; font-weight: 700; color: var(--글1); line-height: 1.15; font-variant-numeric: tabular-nums; }
.사람카드 .잔여 .값 .단위 { font-size: 13px; font-weight: 600; color: var(--글3); margin-left: 2px; }
.사람카드 .잔여 .이름 { font-size: 11px; color: var(--흐림); margin-top: 1px; }
.사람카드 .잔여.넘침 .값 { color: var(--빨강); }
.사람카드 .잔여.넘칠것 .값 { color: var(--노랑); }

/* 「얼마나 썼나」를 숫자 읽기 «전»에 눈으로 — 진한 것이 쓴 것, 옅은 것이 대기 */
.쓴막대 {
  display: flex; height: 6px; margin: 11px 0 0;
  background: var(--판옅); border: 1px solid var(--선); border-radius: 999px; overflow: hidden;
}
.쓴막대 .찬 { background: var(--파랑); }
.쓴막대 .기다림 { background: #b9cdf2; }
.쓴막대.넘침 .찬 { background: var(--빨강); }

/* 부여 · 사용 · 대기 · 누적 — 「부여 − 사용 = 남은 연차」가 눈으로 맞아떨어진다 */
/* 🚨 여기 border-top 을 두지 마라 — 바로 위 «쓴막대»가 이미 가르는 줄이다.
      둘을 겹치면 가는 선 두 개가 나란히 서서 카드가 지저분해 보인다(사진으로 잡음). */
.사람수치 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin: 11px 0 0;
}
.사람수치 .칸 { display: flex; flex-direction: column; min-width: 0; }
.사람수치 .이름 { font-size: 11px; color: var(--흐림); line-height: 1.3; }
.사람수치 .값 { font-size: 14px; font-weight: 700; color: var(--글2); line-height: 1.35; }

.개인부여내역 { margin-top: 14px; padding: 12px; border-radius: 8px; background: var(--판옅); border: 1px solid var(--선); }
.부여구분 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.부여구분 > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; }
.부여구분 strong { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.개인부여내역 .부여기준 { margin: 6px 0 0; color: var(--흐림); font-size: 12px; min-height: 38px; line-height: 1.6; }
.개인산정상세 summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 13px; color: var(--파랑진); }
.개인산정상세 summary::after { content: '+'; margin-left: auto; }
.개인산정상세[open] summary::after { content: '−'; }
.개인산정상세 p { margin: 0 0 10px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.개인산정상세 p strong, .개인산정상세 p span { display: block; }

/* 「이 사람은 왜 봐야 하나」 */
.딱지들 { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0; }
.작은딱지 {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--판); border: 1px solid var(--선진한); color: var(--흐림);
}
.작은딱지.노랑 { border-color: #ecd9b0; color: var(--노랑); }
.작은딱지.파랑 { border-color: #cfe0fb; color: var(--파랑진); }
.작은딱지.빨강 { border-color: #f0c9ce; color: var(--빨강); }
/* 👑 대표님 표시 — 「관리자 지정」 절에서 «못 끄는 줄»에 붙는다 */
.작은딱지.초록 { border-color: #bfe3d0; color: var(--초록진, #037f4c); }

/* 🗓️ 2026-09-10 — 여기에 단추가 «둘»이 됐다([사용 일정] · [수정]). 붙어 있으면 잘못 누른다. */
.카드아래 { display: flex; justify-content: flex-end; gap: 8px; margin: 10px 0 0; }
/* 🚨 2026-09-15 — 높이가 40px 이었다. 44px 아래는 폰에서 «못 누른다».
   좁아 보이는 것과 못 누르는 것은 다르다(이 저장소가 2026-09-07·09-10 에 두 번 밟았다). */
.카드아래 .작은단추 { min-width: 88px; min-height: 44px; font-size: 13px; }

/* ── [고치기]를 눌러야 나오는 칸 ────────────────────────────────────────── */
.사람고침 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  margin: 11px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--선진한);
}
.사람고침 > .칸 { margin: 0; min-width: 0; }
.사람고침 > .칸.넓게 { grid-column: 1 / -1; }
.사람고침 label { font-size: 13px; margin: 0 0 6px; color: var(--글3); font-weight: 600; }
.사람고침 input { min-height: 44px; padding: 8px 10px; font-size: 16px; }
.사람고침 .작은단추 { width: 100%; margin-top: 6px; min-height: 44px; font-size: 13px; }
.사람고침 .고침단추들 { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.사람고침 .고침단추들 .작은단추 { width: auto; min-width: 84px; margin-top: 0; }
.칸잔글 { font-size: 12px; color: var(--흐림); margin-top: 4px; line-height: 1.45; }
.칸잔글.빨강 { color: var(--빨강); }

/* 🖥️ 큰 화면에서는 카드도 조금 넉넉하게 — 28인치에서 글자가 작아 보이면 안 된다 */
@media (min-width: 1700px) {
  .팀카드 { padding: 16px; }
  .팀머리 { font-size: 16px; margin-bottom: 12px; }
  .사람들 { gap: 12px; }
  .사람카드 { padding: 15px 16px; }
  .사람카드 .카드머리 .이름 { font-size: 17px; }
  .사람카드 .잔여 .값 { font-size: 29px; }
  .사람수치 .값 { font-size: 15px; }
}

/* ── 🙂 얼굴 (2026-09-09 대표님 지시) ──────────────────────────────────────
   🚨 사진이 없거나 안 열리면 화면이 «이름 첫 글자»를 그린다.
      그래서 `img` 와 `span` 이 «같은 크기·같은 동그라미»여야 자리가 안 흔들린다. */
.얼굴 {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--선); background: var(--판옅); flex: 0 0 auto; display: block;
}
.얼굴.글자 {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--글3);
}
.얼굴칸 { width: 40px; padding-right: 0 !important; }

/* 팀이 바뀌는 자리에 끼우는 띠 — 29명이 한 덩어리로 늘어서면 눈으로 못 읽는다 */
tr.팀띠 td {
  background: var(--판옅); font-weight: 700; font-size: 12px; color: var(--글2);
  letter-spacing: .02em; padding: 6px 10px !important;
}

/* 승인 대기 표의 [승인]·[반려] 단추
   🚨 2026-09-09 — 얼굴 칸이 하나 늘면서 표가 좁아져 [저장]이 «세로로» 깨졌다(사진으로 잡음).
      단추가 든 칸은 «줄바꿈을 막는다». 표는 .tw 안에서 옆으로 스크롤되니 잘리지 않는다. */
.단추칸, .관리자 td:last-child { white-space: nowrap; }
.관리자 td .작은단추 { white-space: nowrap; }
.단추칸 .작은단추 { margin-left: 4px; }
.작은단추.좋음 { color: #0a7d34; border-color: #9ed8b4; }
.작은단추.좋음:hover { background: #eaf8ef; }

/* ── 🗓️ 월별 캘린더 (2026-09-09 대표님 지시) ───────────────────────────── */
.달력칸 { margin: 0 0 24px; }
.달력머리 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.달력머리 h2 { margin: 0; flex: 1 1 auto; text-align: center; }
.달력 {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--선); border: 1px solid var(--선); border-radius: 10px; overflow: hidden;
}
.달력 .요일머리 {
  background: var(--판옅); text-align: center; font-size: 12px; font-weight: 700;
  color: var(--글3); padding: 6px 0;
}
.달력 .날칸 { background: var(--판); min-height: 84px; padding: 4px 5px; }
.달력 .날칸.빈칸 { background: var(--판옅); }
.달력 .날짜 { font-size: 12px; font-weight: 700; color: var(--글2); }
.달력 .일요일 .날짜, .달력 .공휴일 .날짜 { color: #c0392b; }
.달력 .토요일 .날짜 { color: #2563eb; }
.달력 .오늘 { outline: 2px solid #2563eb; outline-offset: -2px; }
.달력 .휴일이름 { font-size: 11px; color: #c0392b; margin: 1px 0 2px; }
.달력 .연차줄 {
  display: flex; align-items: center; gap: 4px; margin-top: 3px;
  padding: 2px 4px; border-radius: 6px; font-size: 11px; line-height: 1.3;
  /* 🎨 팀 색을 그대로 입는다 — 팀카드와 «같은 변수»다. 팀을 모르면 위 기본값(파랑)이다. */
  background: var(--팀바탕, #eef4ff); border: 1px solid var(--팀테, #cfe0ff);
  color: var(--팀글, #1b3a6b);
  /* 🚨 2026-09-10 — 큰 화면에서 한 칸이 314px 이 되자 이 줄이 «칸 끝까지 늘어나»
     이름 세 글자 옆에 빈 띠가 250px 붙어 보였다(28인치 사진으로 잡음).
     이름만큼만 차지하게 한다. 폰에서는 어차피 칸이 좁아 그대로 꽉 찬다. */
  width: fit-content; max-width: 100%;
}
/* 🚨 2026-09-10 — 여기 `.연차줄.대기`(노란 줄)가 있었는데 없앴다.
   달력은 이제 «먼데이에 등록된 것»만 그린다. 대기는 아직 먼데이에 없어서 그릴 것이 없다
   (대표님 지시 — 「승인 대기인데도 캘린더에 보인다」). 되살리지 마라. */
.달력 .연차줄 .얼굴 { width: 18px; height: 18px; }
.달력 .연차줄 .이름 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
/* 🔴 *"연차 단어 글자 색깔도 다르게"* — 종류 딱지는 팀의 «진한 선 색»으로 찍는다.
   이름(연한 글자색)과 종류(진한 선색)가 갈려서 한 칸 안에서도 둘이 구별된다. */
.달력 .연차줄 .무엇 {
  color: var(--팀선, #4b6ea8); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 반차는 테두리를 점선으로 — 폰에서 「연차/반차」 글자를 접어도 눈으로 갈린다 */
.달력 .연차줄.반차 { border-style: dashed; }

/* 🚨 폰에서는 한 달이 일곱 칸으로 안 들어간다. 칸을 낮추고 글자를 줄인다.
   🚨 2026-09-10 — 한 칸이 51px 라 「박 박선빈 연차」가 «박 박…»으로 잘렸다(사진으로 잡음).
      누가 쉬는지 보는 자리인데 이름이 안 보이면 그 자리는 아무것도 안 하는 것이다.
      → 좁으면 «얼굴»과 «연차/반차»를 접고 이름만 남긴다. 종류는 점선 테두리로 갈린다. */
@media (max-width: 640px) {
  .달력 .날칸 { min-height: 62px; padding: 3px; }
  .달력 .연차줄 { font-size: 10px; gap: 2px; padding: 1px 3px; }
  .달력 .연차줄 .얼굴, .달력 .연차줄 .무엇 { display: none; }
}

/* 🖥️ 큰 화면(28인치) — 칸이 옆으로 넓어진 만큼 «키»도 키운다.
   🚨 안 키우면 314px × 84px 짜리 «납작한 칸»이 된다. 달력으로 안 보인다.
      한 날에 여럿이 쉬어도 칸이 안 밀리게 하는 뜻도 있다. */
@media (min-width: 1400px) { .달력 .날칸 { min-height: 104px; } }
@media (min-width: 2000px) {
  .달력 .날칸 { min-height: 124px; padding: 6px 8px; }
  .달력 .날짜 { font-size: 13px; }
  .달력 .요일머리 { font-size: 13px; padding: 8px 0; }
  .달력 .연차줄 { font-size: 12px; padding: 3px 6px; }
  .달력 .연차줄 .얼굴 { width: 20px; height: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   🎁 경조사·복지 — 🔴 2026-10-08 지시 *"연차 시스템에 추가하자 … 연차 페이지랑 합친다고 생각하고"*
   따로 있던 hanbiz-welfare 의 서식 가운데 «그쪽에서만 쓰던 것»을 옮겨 왔다.
   🚨 전부 `.복지` 안에서만 먹는다. 연차의 .신청(li)·.딱지·.단추칸 과 «같은 이름»을 쓰기 때문이다 —
      감싸지 않으면 연차 신청 목록이 통째로 모양을 잃는다. 위쪽(공통 서식)은 손대지 않는다.
   ⚫ 직원 절은 index.html 의 <section class="복지">, 지급 관리는 welfare-admin.html 의 <main class="관리자 복지">.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 절 머리 — 연차 절들과 같은 자리 규칙(.업무탐색 이 가리지 않게 scroll-margin) ── */
.복지 { scroll-margin-top: 132px; margin-top: 36px; }
.복지 .업무머리 { margin-bottom: 10px; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.복지 .업무머리 h1 { margin: 0; font-size: 24px; }
.복지 .업무머리 h2 { margin: 0; }
.복지 .신청도움말 { margin-top: 0; }

/* ── ✍️ 신청 양식 — 페이지 «안»에 편다 (창을 띄우지 않는다) ─────────────────── */
.복지 .신청양식 {
  border: 1px solid var(--선); border-radius: 14px; background: var(--판);
  padding: 14px 16px 16px; margin: 0 0 22px;
}
.복지 .신청양식 .칸 { margin-bottom: 12px; }
.복지 .신청양식 .칸:last-of-type { margin-bottom: 14px; }
.복지 .칸셋 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; align-items: start; }
.복지 .칸셋 .칸 { margin-bottom: 0; }
/* 🚨 높이를 «브라우저가 알아서» 정하면 날짜 칸 48px·숫자 칸 38px 로 키가 갈린다. 38px 은 폰에서 누르기에도 작다(44px 규칙) */
.복지 .칸셋 input { width: 100%; box-sizing: border-box; min-height: 46px; }
.복지 .칸잔글 { margin: 6px 0 0; font-size: 12px; color: var(--흐림); }
.복지 .신청양식 .알림 { margin: 0 0 12px; }

/* 고른 항목의 기준 — 「무엇을 받고 · 무엇을 내야 하는지」를 내기 전에 보인다 */
.복지 .항목안내 {
  display: grid; grid-template-columns: 76px 1fr; gap: 6px 12px;
  margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--선); border-left: 3px solid var(--파랑); border-radius: 10px;
  font-size: 14px; line-height: 1.5;
}
.복지 .항목안내 dt { color: var(--흐림); font-weight: 600; }
.복지 .항목안내 dd { margin: 0; color: var(--글3); min-width: 0; overflow-wrap: anywhere; }
.복지 .항목안내 dd.굵게 { color: var(--글4); font-weight: 700; }

/* ── 📎 파일 고르기 — 브라우저 기본 단추(영어)를 쓰지 않는다 ────────────────── */
.복지 .숨은파일칸 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.복지 .파일고르기 { width: auto; display: inline-flex; margin: 0; }
.복지 .숨은파일칸:focus-visible + .첨부단추들 .파일고르기 { outline: 2px solid var(--파랑); outline-offset: 2px; }
.복지 .첨부단추들 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.복지 .붙여넣기칸 {
  margin-top: 8px; padding: 12px 14px; border: 1.5px dashed var(--선진한); border-radius: 10px;
  background: var(--판옅); color: var(--글3); font-size: 14px; line-height: 1.5;
}
.복지 .붙여넣기칸 b { color: var(--글4); }
.복지 .붙여넣기칸 .잔글 { display: block; margin-top: 2px; font-size: 12px; color: var(--흐림); }
.복지 .붙여넣기칸.끌어오는중 { border-color: var(--파랑); background: var(--파랑옅); }
.복지 .붙여넣기칸 kbd {
  display: inline-block; padding: 0 5px; border: 1px solid var(--선진한); border-bottom-width: 2px;
  border-radius: 4px; background: var(--판); font: inherit; font-size: 12px; line-height: 1.5;
}
@media (hover: none) and (pointer: coarse) { .복지 .붙여넣기칸 { display: none; } }
/* 증빙 딱지 — 🚨 [삭제] 도 44px 밑으로 내리지 마라 */
.복지 .딱지들 .딱지 { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; }
.복지 .딱지들 .작은단추 { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: 12px; }

/* ── 거르개 칩 — 연차 공통 칩에 «초록»(지급 완료)만 더한다 ───────────────────── */
.복지 .거르개 { margin: 0 0 12px; }
.복지 .거름칩.초록 { border-color: #bfe3d0; color: var(--초록); }
.복지 .거름말 { align-self: center; }

/* ── 📅 월별로 묶은 신청 내역 — 먼데이의 «그룹»처럼 접힌다 ───────────────────── */
.복지 .달묶음 { margin: 0 0 18px; }
.복지 .달머리줄 {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 0 2px 8px; border-bottom: 2px solid var(--선진한); margin: 0 0 10px;
  cursor: pointer; user-select: none;
}
.복지 .달머리줄:hover { background: var(--판옅); }
.복지 .달머리줄:focus-visible { outline: 2px solid var(--파랑); outline-offset: 2px; border-radius: 6px; }
.복지 .달머리줄 .접개 { flex: none; color: var(--흐림); font-size: 12px; line-height: 1; transition: transform .12s; transform-origin: center; }
.복지 .달머리줄.접힘 .접개 { transform: rotate(-90deg); }
.복지 .달머리줄.접힘 { border-bottom-color: var(--선); }
.복지 .달머리줄 .달 { font-size: 16px; font-weight: 700; color: var(--글1); }
.복지 .달머리줄 .합 { font-size: 13px; font-weight: 700; color: var(--파랑진); font-variant-numeric: tabular-nums; }
.복지 .달머리줄 .잔 { font-size: 12px; color: var(--흐림); margin-left: auto; }
.복지 .달머리줄 .딱지.대기 { flex: none; font-size: 11px; padding: 2px 8px; }

/* ── 📋 조밀한 신청 줄 — 「훑는 목록」. 연차의 li.신청(가로 flex)과 «다른 모양» ──── */
.복지 .신청목록 { list-style: none; margin: 0; padding: 0; border: 1px solid var(--선); border-radius: var(--둥금); overflow: hidden; }
.복지 .신청목록 .신청 {
  display: block; padding: 9px 14px; margin: 0; gap: 0; cursor: default;
  background: var(--판); border: 0; border-bottom: 1px solid var(--선); border-radius: 0;
}
.복지 .신청목록 .신청:last-child { border-bottom: 0; }
.복지 .신청 .한줄 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; cursor: pointer; min-height: 24px; }
.복지 .신청 .한줄:focus-visible { outline: 2px solid var(--파랑); outline-offset: 2px; border-radius: 6px; }
.복지 .신청 .누가 { font-size: 14px; font-weight: 700; color: var(--글1); flex: none; min-width: 3.6em; }
.복지 .신청 .언제 { font-size: 14px; font-weight: 700; color: var(--글1); flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.복지 .신청 .항목이름 { font-size: 13px; font-weight: 600; color: var(--글2); min-width: 0; overflow-wrap: anywhere; }
.복지 .신청 .얼마 { font-size: 13px; font-weight: 700; color: var(--글2); flex: none; white-space: nowrap; margin-left: auto; }
.복지 .신청 .한줄 > .딱지 { flex: none; }
.복지 .딱지.확인 { border-color: #cfe0fb; color: var(--파랑진); }
.복지 .신청 .아래 { margin-top: 2px; }
.복지 .신청 .사유한줄 { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--흐림); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.복지 .신청 .증빙수 { flex: none; font-size: 11px; color: var(--흐림); }
.복지 .신청 .늦음표 { color: var(--빨강); font-weight: 600; }
.복지 .신청 .펼침 { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--선); }
.복지 .신청 .펼침 .잔 { font-size: 13px; color: var(--흐림); margin-top: 2px; }
.복지 .신청.펼쳐짐 .사유한줄 { display: none; }
/* 📏 펼치면 맛보기가 숨는데 그 «줄 자리»가 남아 빈 띠가 생겼다(2026-10-06 매뉴얼 사진) — 딱지 없는 둘째 줄은 통째로 숨긴다 */
.복지 .신청.펼쳐짐 .한줄.아래:not(:has(.증빙수)) { display: none; }
.복지 .신청 .펼침 .사유전문 { margin: 0 0 8px; font-size: 15px; line-height: 1.7; color: var(--글1); }
.복지 .신청.펼쳐짐 { background: var(--판옅); }
.복지 .신청 .한줄:first-child::after { content: '⌄'; margin-left: 4px; color: var(--선진한); font-size: 12px; flex: none; transition: transform .12s; }
.복지 .신청.펼쳐짐 .한줄:first-child::after { transform: rotate(180deg); display: inline-block; }
.복지 .신청.짚음 { outline: 2px solid var(--파랑); outline-offset: 2px; transition: outline-color .3s; }

/* 승인·지급·반려 단추 — 펼친 줄 아래 한 줄로. 🚨 `.큰단추{width:100%}` 를 목록 안에서는 되돌린다 */
.복지 .신청 .단추칸 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; white-space: normal; margin-top: 9px; }
.복지 .신청 .단추칸 .작은단추 { margin-left: 0; flex: none; min-width: 72px; }
.복지 .신청 .단추칸 .큰단추.작은단추 {
  width: auto; min-width: 72px; padding: 0 14px; font-size: 14px; min-height: 44px;
  background: var(--파랑); color: #fff; border-color: var(--파랑);
}
.복지 .신청 .단추칸 .큰단추.작은단추:hover { background: var(--파랑진); border-color: var(--파랑진); }
@media (max-width: 560px) {
  .복지 .신청목록 .신청 { padding: 9px 12px; }
  .복지 .신청 .누가 { min-width: 0; }
  .복지 .신청 .한줄 { gap: 6px; }
  .복지 .신청 .단추칸 { width: 100%; gap: 6px; }
  .복지 .신청 .단추칸 .작은단추, .복지 .신청 .단추칸 .큰단추.작은단추 { min-width: 0; flex: 1 1 auto; padding: 0 10px; }
}

/* ── 지원 기준 표 · 지급 요약 표 — 🚨 표는 가로 스크롤 상자로 감싼다. 공통 table{min-width:560px} 은 끈다 ── */
.복지 .표감쌈 { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 20px; border: 1px solid var(--선); border-radius: 10px; }
.복지 .표감쌈 table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; }
.복지 .표감쌈 th, .복지 .표감쌈 td { padding: 10px 12px; text-align: left; border: 0; border-bottom: 1px solid var(--선); vertical-align: middle; }
.복지 .표감쌈 th { background: var(--판옅); color: var(--글2); font-weight: 700; white-space: nowrap; }
.복지 .표감쌈 td { color: var(--글3); }
.복지 .표감쌈 tr:last-child td { border-bottom: 0; }
.복지 #복지기준표속 td:first-child, .복지 .요약표 td:first-child { color: var(--글1); font-weight: 600; }
.복지 #복지기준표속 td:first-child { min-width: 9em; }
.복지 #복지기준표속 td:nth-child(2) { white-space: nowrap; }
.복지 .요약표 td:first-child { white-space: nowrap; }
.복지 .요약표 td:nth-child(n+2) { white-space: nowrap; }
.복지 .요약표 tbody tr:last-child td { font-weight: 700; color: var(--글1); }
.복지 #직원표 tbody tr:last-child td { font-weight: 400; color: var(--글3); }
.복지 #직원표 tbody tr:last-child td:first-child { font-weight: 600; }

.복지 .기준표 { margin: 24px 0 8px; }
/* 🔴 2026-10-06 지적 — 「지원 기준 한눈에 보기」가 눌러지는 것인지 모르겠다 → 테두리 + 「펼치기 ▾ / 접기 ▴」 */
.복지 .기준표 > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none;
  border: 1px solid var(--선진한); border-radius: 10px; background: var(--판);
  font-size: 15px; font-weight: 700; color: var(--글2);
}
.복지 .기준표 > summary::-webkit-details-marker { display: none; }
.복지 .기준표 > summary::after { content: '펼치기 ▾'; flex: none; font-size: 13px; font-weight: 600; color: var(--파랑진); }
.복지 .기준표[open] > summary::after { content: '접기 ▴'; }
.복지 .기준표 > summary:hover { background: var(--파랑옅); border-color: #cfe0fb; }
.복지 .기준표[open] > summary { margin-bottom: 12px; }
/* 📱 폰 — 다섯 칸 표는 390px 에 안 들어간다. 항목마다 카드 한 장으로 쌓는다. 칸 이름은 data-label 에서 읽는다 */
@media (max-width: 560px) {
  .복지 #복지기준표속 thead { display: none; }
  .복지 #복지기준표속, .복지 #복지기준표속 tbody, .복지 #복지기준표속 tr, .복지 #복지기준표속 td { display: block; width: 100%; }
  .복지 #복지기준표속 tr { padding: 12px 14px; border-bottom: 1px solid var(--선); }
  .복지 #복지기준표속 tr:last-child { border-bottom: 0; }
  .복지 #복지기준표속 td { padding: 2px 0; border: 0; white-space: normal; min-width: 0; }
  .복지 #복지기준표속 td:first-child { font-size: 15px; margin-bottom: 4px; }
  .복지 #복지기준표속 td[data-label]::before { content: attr(data-label) '  '; color: var(--흐림); font-size: 12px; font-weight: 600; }
  .복지 .요약표 td:first-child { white-space: normal; }
  .복지 .표감쌈 th, .복지 .표감쌈 td { padding: 10px 8px; }
  .복지 .칸셋 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .복지 .칸셋 .날짜칸감쌈 { grid-column: 1 / -1; }
  .복지 .항목안내 { grid-template-columns: 1fr; gap: 2px; }
  .복지 .항목안내 dd { margin-bottom: 6px; }
}

/* ── 지급 관리 — 직원·항목 고르개와 [엑셀로 내려받기] 한 줄 ─────────────────── */
.복지 .표링크 {
  min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--파랑진); text-decoration: underline; text-underline-offset: 3px;
}
.복지 .고르개줄 { border-left-color: var(--선진한); }
.복지 .고르개줄 > label.거름말 { display: inline-flex; align-items: center; margin: 0 2px 0 0; min-height: 44px; }
.복지 .작은고르개 { min-height: 44px; min-width: 0; max-width: 100%; padding: 0 10px; font-size: 14px; border-radius: 8px; width: auto; flex: 0 1 200px; }
.복지 .고르개줄 .흰단추.작은단추 { min-height: 44px; margin-left: auto; }
.복지 .신청 .잔글 { align-self: center; }
@media (max-width: 560px) {
  .복지 .고르개줄 > label.거름말 { flex: 0 0 36px; }
  .복지 .고르개줄 > .작은고르개 { flex: 1 1 calc(100% - 48px); }
  .복지 .고르개줄 .흰단추.작은단추 { margin-left: 0; flex: 1 1 100%; }
  /* 머리띠 — 폰에서는 «덜 급한 것»(연차 관리·신청 화면)을 접는다. 왼쪽 로고가 첫 화면으로 간다 */
  .머리오른쪽 .사람.접힘 { display: none; }
}

/* ── 머리띠 «긴 이름 / 짧은 이름» — 지급 관리 화면(welfare-admin.html)이 쓴다 ─────────────
   🚨 2026-10-08 실측(폰 390px) — 이 규칙이 없으니 「경조사·복지 지급 관리」와 「지급 관리」가 «둘 다» 보여
      머리띠가 넘치고 상태 딱지가 「대기 3」16px 로 짓눌렸다(복지 화면 검사가 잡았다).
      이름을 «잘라서» 줄이지 않는다 — 폰에서만 «온전한 짧은 낱말»로 바꾼다(연장근무·복지 프로그램과 같은 규칙). */
.짧은이름 { display: none; }
@media (max-width: 560px) {
  .긴이름 { display: none; }
  .짧은이름 { display: inline; }
  .상태 { max-width: 12em; }
}