/* ANPARK 근태 — 컴포넌트/레이아웃. 토큰(tokens.css = v3.0 Wise 초록) 위에 얹는다.
   규칙: 브랜드 #ED1968은 면·룰·대형만(작은 글자는 --text-accent), 본문=--ink, 바탕=--surface,
   중립=민트 램프, 상태=색+라벨. 화면은 v3 초록 / 인쇄 문서는 AQPA 문서 시스템(별개 — src/docs·src/payslips).
   ⚠ 하드코딩 hex 금지 — 모든 색은 토큰 참조. (tests/design-tokens.test.js가 검사) */

:root{
  /* 폰트 스택 SoT — 화면·증명서·급여명세서 세 곳이 같은 값을 쓴다.
     실제 로드는 css/fonts.css(@font-face 자체 호스팅). 값을 고치면 src/docs/template.js와
     src/payslips/routes.js의 FONT_STACK도 함께 고칠 것(tests/fonts.test.js가 일치를 검사). */
  --sans:"Pretendard","Malgun Gothic","\B9D1\C740 \ACE0\B515","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Consolas","D2Coding",monospace;
  --appw:960px;
  /* 앱 계층 파생 토큰 — SoT(tokens.css)에 없는 역할만 여기서 정의한다.
     --on-accent: 강조면(--text-accent) 위 글자. 다크에서 강조면이 밝아지므로 잉크로 뒤집는다.
     --on-dark  : 반전 밴드(--dark-surface #0C3D2A) 위 글자. 램프 토큰은 스킴 무관이라
                  라이트·다크 모두 같은 밝은 민트를 쓴다(대비 11.8:1). */
  --on-accent:var(--surface);
  --on-dark:var(--cobalt-50);
  /* --paper: 인쇄 문서 미리보기(증명서·급여명세서) 프레임. 이 문서들은 화면 팔레트가 아니라
     AQPA 문서 시스템 소속이라 다크 모드에서도 종이는 흰색이어야 한다. 스킴 무관 고정. */
  --paper:white;

  /* ⚠ 대비 보정 — SoT 값을 그대로 소형 텍스트에 쓰면 WCAG AA(4.5:1)에 미달한다.
     라이트 모드 실측: --muted 3.54:1 / --positive 2.71:1 / --notice 2.09:1 (흰 바탕).
     토큰 자체는 면·룰·테두리용으로 그대로 두고, "글자로 쓸 때"만 잉크를 섞어 내린다.
     SoT가 바뀌면 색상 계열은 따라오되 대비는 유지된다. 다크 모드는 원래 통과라 원값 사용.
     검증 바탕은 가장 어두운 면인 --tint(#CCFAEB)까지 포함한다. */
  --muted-text:color-mix(in srgb, var(--muted) 70%, var(--ink-deep));       /* 흰 5.4 · 민트 5.2 · tint 4.7 */
  --positive-text:color-mix(in srgb, var(--positive) 60%, var(--ink-deep)); /* 흰 5.1 · 민트 4.9 */
  --notice-text:color-mix(in srgb, var(--notice) 52%, var(--ink-deep));     /* 흰 5.2 · 민트 5.0 */
}
@media (prefers-color-scheme: dark){
  :root{
    --on-accent:var(--ink-deep);
    --muted-text:var(--muted);
    --positive-text:var(--positive);
    --notice-text:var(--notice);
  }
}

*{ box-sizing:border-box; }
html{ height:100%; }
body{
  margin:0; min-height:100%;
  display:flex; flex-direction:column;
  background:var(--surface); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* v3.0 Wise 형태: 섹션 제목·큰 수치는 900 + 음수 자간(디스플레이 트랙) */
h1,h2,h3{ color:var(--headline); line-height:1.15; margin:0; text-wrap:balance; }
/* 디스플레이 트랙은 라틴 대문자 기준으로 잡힌 값이다. 한글은 음절 블록이 이미 꽉 차 있어
   같은 음수 자간이 어절 사이 공백까지 먹어버린다 → word-spacing으로 어절 경계만 되돌린다.
   (자간 토큰 자체는 SoT 값 그대로 쓴다) */
/* 한글은 기본값(break-word)에서 어절 한가운데가 갈린다 — 「늦은 시간 / 까지」처럼.
   keep-all로 어절 경계에서만 꺾이게 한다. 자간 -3px가 어절 공백까지 먹어
   word-spacing으로 되살려 둔 것과 같은 계열의 보정이다.
   line-height는 기본값(1.2 안팎)에서 900 weight 한글의 받침이 답답해 1.32로 연다. */
h1{ font-size:var(--fs-h1); font-weight:var(--w-weight-display); letter-spacing:var(--w-track-display);
  word-spacing:.4em; word-break:keep-all; line-height:1.32; }
h2{ font-size:var(--fs-h2); font-weight:var(--w-weight-display); letter-spacing:var(--w-track-h2); word-spacing:.3em; }
h3{ font-size:var(--fs-h3); font-weight:700; letter-spacing:var(--w-track-h2); }
/* 잔여일수·합계 등 큰 수치 */
.w-figure{ font-weight:var(--w-weight-display); letter-spacing:var(--w-track-display); color:var(--headline); }
a{ color:var(--text-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width:100%; max-width:var(--appw); margin:0 auto; padding:0 var(--space-5); }

/* masthead — 점 모티프 + ANPARK 근태(텍스트) | 우측 컨텍스트 */
.masthead{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.masthead .row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); height:60px; }
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand .heart-logo{ width:96px; height:24px; object-fit:contain; display:block; flex:0 0 auto; }
.brand .nm{ font-size:var(--fs-small); font-weight:700; letter-spacing:.02em; color:var(--text-accent); }
.mh-right{ display:flex; align-items:center; gap:var(--space-4); font-size:var(--fs-small); color:var(--muted-text); min-width:0; }
.mh-right .u{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* main regions */
main{ flex:1 0 auto; }
main.auth{ display:grid; place-items:center; padding:var(--space-8) var(--space-5); }
main.page{ padding:var(--space-7) 0 var(--space-8); }

/* eyebrow (브랜드 룰 모티프) */
.eyebrow{
  display:flex; align-items:center; gap:.55em;
  font-size:var(--fs-caption); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-text); font-weight:700; margin:0 0 var(--space-3);
}
.eyebrow::before{ content:""; width:20px; height:2px; background:var(--brand); flex:0 0 auto; }

/* card / callout — v3 카드 라운드 */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--w-radius-card); padding:var(--space-6); }
.auth-card{ width:100%; max-width:380px; }
.callout{ background:var(--tint); border-left:4px solid var(--brand); border-radius:0 10px 10px 0; padding:14px 18px; color:var(--ink); }

/* forms */
form{ display:flex; flex-direction:column; gap:var(--space-4); margin:var(--space-5) 0 0; }
.field{ display:flex; flex-direction:column; gap:var(--space-2); }
label{ font-size:var(--fs-small); color:var(--muted-text); }
input, textarea{
  width:100%; padding:10px 12px; font-size:var(--fs-body);
  color:var(--ink); background:var(--surface);
  border:1px solid var(--border); border-radius:8px;
}
/* 체크박스·라디오는 폭 100%가 아니라 제 크기로 — 동의 체크박스가 줄 전체를 밀어내던 원인 */
input[type="checkbox"], input[type="radio"]{
  width:auto; padding:0; margin:0; flex:0 0 auto;
  accent-color:var(--brand); inline-size:18px; block-size:18px;
}
textarea{ resize:vertical; font-family:inherit; }
input::placeholder, textarea::placeholder{ color:var(--muted-text); }

/* buttons — 기본 버튼 면 = --text-accent, 글자 = --on-accent (대비 게이트 통과) · 알약 형태 */
.btn{
  display:inline-block; border:0; border-radius:var(--w-radius-pill); cursor:pointer;
  background:var(--text-accent); color:var(--on-accent); font-weight:700;
  font-size:var(--fs-body); padding:12px 20px; font-family:inherit;
}
.btn:hover{ filter:brightness(1.06); }
.btn:disabled{ opacity:.6; cursor:default; filter:none; }
.btn-block{ width:100%; }
.btn-link{
  background:none; border:0; padding:6px 4px; cursor:pointer;
  color:var(--text-accent); font-size:var(--fs-small); font-family:inherit;
}
.btn-link:hover{ text-decoration:underline; }

/* text bits */
.who{ margin:0; font-size:var(--fs-h3); color:var(--ink); }
.consent-actions{ display:flex; align-items:center; gap:var(--space-3);
  margin-top:var(--space-4); flex-wrap:wrap; }
.consent-actions .msg{ margin:0; }
.attendance-summary{ display:grid; gap:var(--space-3); margin-top:var(--space-5); }
.attendance-status-card, .attendance-week-card{
  border:1px solid var(--border); border-radius:var(--w-radius-inner);
  background:var(--surface-muted); padding:var(--space-4);
}
.attendance-status-card{ transition:background .16s ease, border-color .16s ease; }
.attendance-status-card.is-working{ background:var(--brand-pale);
  border-color:color-mix(in srgb, var(--brand) 34%, var(--border)); }
.attendance-status-card.is-complete{ background:var(--tint);
  border-color:color-mix(in srgb, var(--positive) 42%, var(--border)); }
.attendance-summary-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.attendance-summary-label{ color:var(--muted-text); font-size:var(--fs-caption); font-weight:750; }
.attendance-state{ color:var(--headline); font-size:var(--fs-h2); font-weight:var(--w-weight-display);
  letter-spacing:var(--w-track-h2); }
.attendance-status-card.is-working .attendance-state{ color:var(--text-accent); }
.attendance-status-card.is-complete .attendance-state{ color:var(--positive-text); }
.attendance-today-detail{ display:flex; gap:var(--space-4); flex-wrap:wrap;
  margin-top:var(--space-3); color:var(--ink); font-size:var(--fs-small); font-variant-numeric:tabular-nums; }
.attendance-today-detail b{ color:var(--muted-text); font-size:var(--fs-caption); }
.attendance-week-card{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  background:var(--surface); }
.attendance-week-card strong{ color:var(--headline); font-size:var(--fs-h3);
  font-weight:var(--w-weight-display); font-variant-numeric:tabular-nums; }
.hint{ margin:var(--space-3) 0 0; font-size:var(--fs-small); color:var(--muted-text); }
.err{ color:var(--negative); font-size:var(--fs-small); min-height:1.1em; }
.msg{ font-size:var(--fs-small); min-height:1.1em; margin-top:var(--space-2); }
.msg.err{ color:var(--negative); }
.msg.ok{ color:var(--positive-text); }
/* 접수는 됐지만 아직 끝나지 않은 상태 — 성공(초록)으로 칠하면 승인된 줄 안다 */
.msg.warn{ color:var(--notice-text); }

/* footer — Landscape Design & Build Studio / A N P A R K | 연락처 */
footer{ flex:0 0 auto; padding:var(--space-6) 0 var(--space-7); }
.foot-rule{ height:1px; background:var(--border); margin-bottom:var(--space-5); }
/* Figma «ANPARK A4 세로형 견적서» 꼬리말 실측 (1px = 1pt):
     좌: 태그라인 top 801(7pt ExtraLight, trk 1.26px) · ANPARK top 813(12pt Bold, trk 18px)  → 줄피치 12/7
     우: 주소 801 · T./F. 810 · 메일 819 (7pt ExtraLight, trk 1.26px)                        → 줄피치  9/7
   좌·우는 '행'으로 묶여 있지 않다. 줄 수도 피치도 다르고, 공유하는 것은 **첫 줄의 baseline(801)** 하나뿐이다.
   그래서 grid 3행 2열이 아니라 2블록 flex + align-items:baseline이 원본의 구조다.
   (flex 아이템의 baseline = 그 블록 첫 줄의 baseline → 801 공유가 그대로 재현된다) */
.foot-grid{ display:flex; justify-content:space-between; gap:var(--space-6);
  align-items:baseline; flex-wrap:wrap; }
.foot .tag{ font-size:var(--fs-small); font-weight:200; letter-spacing:.18em;
  line-height:1.714; color:var(--muted-text); margin:0; }
/* 자간이 마지막 K 뒤에도 붙어 좌열이 그만큼 넓어진다 — 음수 마진으로 되돌린다.
   크기는 Figma 비 12:7 → 태그라인 14px 기준 24px. */
.foot .name{ font-size:24px; font-weight:700; line-height:1.2;
  letter-spacing:1.5em; margin-right:-1.5em; color:var(--muted-text); }
.foot .contact{ font-size:var(--fs-small); font-weight:200; letter-spacing:.18em;
  line-height:1.286; color:var(--muted-text); text-align:right; }
.foot .contact a{ color:var(--muted-text); }
.foot .contact a:hover{ color:var(--text-accent); }
@media (max-width:640px){
  /* 모바일도 '성질'은 동일하게 간다 — 굵기(200/700)·자간(.18em/1.5em)·색·줄피치(1.714/1.286)는
     전부 em·배수라 그대로 상속된다. 바꾸는 것은 **절대 크기 하나**뿐이다.
     24px·자간 1.5em이면 ANPARK 폭이 276px라 360px 기기에서 줄이 꺾인다 → 비 12:7을 지킨 채 11/19px로 내린다. */
  .foot-grid{ flex-direction:column; gap:var(--space-4); }
  .foot .contact{ text-align:left; }
  .foot .tag{ font-size:11px; }
  .foot .name{ font-size:19px; }   /* 11 × 12/7 = 18.9 */
}

/* a11y */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
input:focus-visible{ border-color:var(--brand); outline-offset:0; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ===== admin: nav / table / badges / controls ===== */
.adminnav{ display:flex; gap:var(--space-5); margin:var(--space-3) 0 var(--space-6); border-bottom:1px solid var(--border); }
.adminnav a{ color:var(--muted-text); font-size:var(--fs-small); font-weight:600; padding:0 0 var(--space-3); border-bottom:2px solid transparent; margin-bottom:-1px; }
.adminnav a:hover{ color:var(--text-accent); text-decoration:none; }
.adminnav a.active{ color:var(--headline); border-bottom-color:var(--brand); }

.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); margin:0 0 var(--space-4); flex-wrap:wrap; }

.tbl-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--w-radius-inner); }
table{ border-collapse:collapse; width:100%; min-width:640px; font-size:var(--fs-small); }
thead th{ background:var(--surface-muted); color:var(--ink); text-align:left; font-weight:600; padding:12px 14px; border-bottom:2px solid var(--brand); white-space:nowrap; }
tbody td{ padding:11px 14px; border-bottom:1px solid var(--border); color:var(--ink); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:nth-child(even){ background:var(--surface-muted); }

.badge{ display:inline-block; font-size:var(--fs-caption); font-weight:700; padding:2px 9px; border-radius:999px; border:1px solid var(--border); color:var(--ink); }
.badge-ok{ color:var(--positive-text); border-color:color-mix(in srgb, var(--positive) 40%, var(--border)); }
.badge-warn{ color:var(--notice-text); border-color:color-mix(in srgb, var(--notice) 40%, var(--border)); }
.badge-muted{ color:var(--muted-text); }
/* 근무중 = 지금 진행 중인 상태. 「오늘 상태」에서 가장 먼저 읽혀야 하므로 면을 준다.
   테두리만으로는 옆의 회색 배지들과 같은 무게로 보인다. */
.badge-live{ background:var(--brand-pale); color:var(--text-accent);
  border-color:color-mix(in srgb, var(--brand) 35%, var(--border)); font-weight:800; }
@media (prefers-color-scheme: dark){
  .badge-live{ background:color-mix(in srgb, var(--brand) 20%, transparent); color:var(--brand-hover); }
}
.badge-bad{ color:var(--negative); border-color:color-mix(in srgb, var(--negative) 40%, var(--border)); }
.badge-neg{ color:var(--negative); border-color:color-mix(in srgb, var(--negative) 40%, var(--border)); }

select{ width:100%; padding:10px 12px; font-size:var(--fs-body); color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:8px; font-family:inherit; }
.btn-sm{ padding:7px 14px; font-size:var(--fs-small); border-radius:var(--w-radius-pill); }
.btn-ghost{ background:none; border:1px solid var(--border); color:var(--text-accent); }
.btn-ghost:hover{ filter:none; background:var(--surface-muted); }
.row-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

/* ===== admin: 근무 스케줄 7요일 편집기 ===== */
.day-editor{ display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-4); }
.day-row{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; font-size:var(--fs-small); color:var(--ink); }
.day-row .day-label{ width:2.5em; font-weight:700; color:var(--headline); }
.day-row input[type="time"], .day-row input[type="number"]{ width:auto; padding:6px 8px; }
.day-row input:disabled{ opacity:.45; }
.time-picker{ position:relative; display:inline-flex; }
.time-picker-native{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.time-picker-trigger{ min-width:96px; min-height:40px; display:flex; align-items:center;
  justify-content:center; gap:8px; padding:7px 11px; border:1px solid var(--border);
  border-radius:var(--w-radius-pill); background:var(--surface); color:var(--headline);
  cursor:pointer; font:inherit; font-variant-numeric:tabular-nums; }
.time-picker-trigger:hover{ background:var(--surface-muted); border-color:var(--positive); }
.time-picker-trigger:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.time-picker-trigger:disabled{ cursor:default; opacity:.45; background:var(--surface-muted); }
.time-picker-icon{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--tint); color:var(--ink-deep); font-size:var(--fs-body); font-weight:900; }
.time-picker-value{ font-size:var(--fs-small); font-weight:850; letter-spacing:.02em; }
.time-picker-popover{ position:absolute; top:calc(100% + 8px); left:50%; z-index:130;
  width:min(290px, calc(100vw - 32px)); padding:var(--space-4);
  transform:translateX(-50%); border:1px solid var(--border); border-radius:var(--w-radius-inner);
  background:var(--surface); box-shadow:0 14px 34px color-mix(in srgb, var(--ink-deep) 18%, transparent); }
.time-picker-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-3); margin-bottom:var(--space-3); }
.time-picker-head span, .time-picker-column-label{ color:var(--muted-text); font-size:var(--fs-caption); font-weight:750; }
.time-picker-preview{ color:var(--headline); font-size:var(--fs-h2);
  font-weight:var(--w-weight-display); font-variant-numeric:tabular-nums; letter-spacing:var(--w-track-h2); }
.time-picker-wheels{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:var(--space-2); }
.time-picker-wheels section{ min-width:0; }
.time-picker-column-label{ display:block; margin-bottom:6px; text-align:center; }
.time-picker-wheel{ height:176px; overflow-y:auto; overscroll-behavior:contain;
  padding:66px 4px; border-block:1px solid var(--border); scroll-behavior:smooth; }
.time-picker-wheel button{ width:100%; min-height:40px; border:0; border-radius:var(--w-radius-pill);
  background:transparent; color:var(--muted-text); cursor:pointer; font:inherit;
  font-size:var(--fs-body); font-variant-numeric:tabular-nums; }
.time-picker-wheel button:hover{ background:var(--surface-muted); color:var(--headline); }
.time-picker-wheel button.is-selected{ background:var(--text-accent); color:var(--on-accent); font-weight:900; }
.time-picker-colon{ color:var(--headline); font-size:var(--fs-h2); font-weight:900; }
.time-picker-foot{ display:flex; justify-content:flex-end; margin-top:var(--space-3); }

/* ===== admin: 3계층 반응 전략 — 행=조회 / 조작=확장 패널 / 승인 동선만 모바일 카드 ===== */
/* 브레이크포인트: 768(모바일) · 1024(좁은 데스크탑). 터치 타깃 44px, 셀렉트·버튼 잘림 금지. */
.row-click{ cursor:pointer; }
.row-click:hover td{ background:var(--tint); }
tr.member-detail>td{ background:var(--surface-muted); padding:var(--space-5) var(--space-6); cursor:default; }
tr.member-detail:nth-child(even){ background:transparent; }
td select{ min-width:110px; }
@media (max-width:768px){
  .btn, .btn-ghost, .btn-sm{ min-height:44px; }
  /* 관리자 내비: 세로 글자 줄바꿈 금지 — 가로 스크롤 탭 */
  .adminnav{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; }
  .adminnav::-webkit-scrollbar{ display:none; }
  .adminnav a{ white-space:nowrap; flex:0 0 auto; }

  /* 머리띠: 폭이 모자라면 flex가 글자를 한 자씩 세로로 접는다("로\n그\n아\n웃").
     height:60px 고정 + 줄바꿈 허용 조합이 원인이었다. 셋을 함께 막는다 —
     ① 높이를 auto로 풀고 ② 오른쪽 항목을 nowrap으로 못 박고 ③ 브랜드 텍스트를 줄인다. */
  .masthead .row{ height:auto; min-height:56px; gap:var(--space-3); }
  .brand{ min-width:0; flex:0 1 auto; }
  .brand .nm{ display:none; }                 /* 모바일에서 「근태」는 로고와 중복 — 지운다 */
  .brand .nm.nm-keep{ display:inline; }       /* 단 관리자의 「관리」는 남긴다(화면 구분자) */
  /* 우측 3개(내 근태·내 계정·로그아웃)가 360px에서 가장 먼저 터진다.
     nowrap만으로는 가로로 넘칠 뿐이라, 글자·간격을 함께 줄여 실제로 들어가게 한다. */
  .mh-right{ flex:0 0 auto; gap:10px; font-size:12px; }
  .mh-right a, .mh-right button, .mh-right .u{ white-space:nowrap; font-size:12px; }
  .brand{ gap:7px; }
  .brand .heart-logo{ width:80px; height:20px; }
}

/* ===== admin: 조직도(회사→부서 2단) + 인물 리스트 + 중앙 모달 ===== */
/* 조직도 = 상하 2단. 구성원 명부가 위에서 폭을 다 쓰고, 부서 트리가 그 아래에 온다.
   좌우 2단일 때는 명부가 280px에 갇혀 6명이 세로로 길게 늘어졌고, 트리는 남은 폭에서
   가로 스크롤을 만들었다 — 둘 다 자기 폭을 못 쓴 배치였다. */
.org-layout{ display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:start; }
/* 명부는 카드 안에서 다열로 흐른다 — 인원이 늘어도 세로로만 자라지 않는다. */
#org-people{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:0 var(--space-4); }
.org-side{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:var(--space-4); }
.org-side-head{ display:flex; gap:var(--space-2); margin-bottom:var(--space-3); max-width:520px; }
.org-side-head input{ flex:1; min-width:0; }
.org-side-head .btn{ white-space:nowrap; }
.org-person{ display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--border); padding:12px 8px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:var(--fs-small); color:var(--ink); }
/* 다열 그리드에서는 '마지막 하나'만 밑줄을 빼면 열마다 끝줄이 남는다 — 전부 유지한다. */
.org-person:hover{ background:var(--tint); }
.org-person-main{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
/* 아바타: 부서색은 면 채우기 금지(4px 룰 전용) → 중립 민트 면 + 헤드라인 잉크. 사진이면 <img>. */
.org-avatar{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; background:var(--tint); color:var(--headline); flex:0 0 auto; border:1px solid var(--border); object-fit:cover; }
img.org-avatar{ background:var(--surface-muted); }
/* 캔버스: ANPARK 점 모티프를 극저대비 도트 그리드로 — 브랜드 시그니처, 장식은 이것 하나만 */
.org-canvas{ overflow-x:auto; padding:var(--space-4) var(--space-3);
  background-image:radial-gradient(color-mix(in srgb, var(--muted) 22%, transparent) 1.5px, transparent 1.5px);
  background-size:26px 26px; border-radius:12px; }
.org-canvas-bar{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); flex-wrap:wrap-reverse; }
.org-tree{ display:flex; flex-direction:column; align-items:center; min-width:480px; width:100%; }
/* 루트 = ANPARK 로고. 강조면 위라 워드마크를 흰색으로 뒤집는다(brightness(0)로 검게 만든 뒤 invert). */
.org-node-root{ background:var(--text-accent); border:0; border-radius:var(--w-radius-pill);
  padding:18px 40px; display:inline-flex; align-items:center;
  box-shadow:0 4px 16px color-mix(in srgb, var(--brand) 35%, transparent); }
.org-node-root img{ height:19px; display:block; filter:brightness(0) invert(1); }
.org-trunk{ width:2px; height:26px; background:var(--rule-strong); }
/* 가로 버스는 첫 가지와 마지막 가지의 중심 사이만 잇는다. 줄바꿈되면 버스가 끊기므로
   nowrap으로 두고 .org-canvas의 가로 스크롤에 맡긴다. */
/* 부서 칸이 남는 폭을 나눠 갖는다 — 카드를 170px에 묶어두면 넓은 화면에서 가운데만 쓰고
   양옆이 비어, 조직도가 실제보다 작은 조직처럼 보인다. 상한(340px)은 부서가 1~2개일 때
   카드가 화면 폭만큼 늘어나 우스워지는 것을 막는다. */
.org-branches{ display:flex; gap:var(--space-5); flex-wrap:nowrap; justify-content:center;
  align-items:stretch; width:100%; }
.org-branch{ position:relative; padding-top:22px; display:flex; flex-direction:column;
  align-items:stretch; flex:1 1 0; min-width:0; max-width:340px; }
/* 세로 스텁: 버스 → 부서 카드 */
.org-branch::before{ content:""; position:absolute; top:0; left:calc(50% - 1px);
  width:2px; height:22px; background:var(--rule-strong); }
/* 가로 버스: 이웃과의 gap까지 절반씩 넘겨 그려 서로 이어 붙인다(끊긴 토막으로 보이지 않게).
   양 끝은 자기 중심에서 끊어 T자 끝을 만든다. */
.org-branch::after{ content:""; position:absolute; top:0; height:2px; background:var(--rule-strong);
  left:calc(var(--space-5) / -2); right:calc(var(--space-5) / -2); }
.org-branch:first-child::after{ left:calc(50% - 1px); }
.org-branch:last-child::after{ right:calc(50% - 1px); }
.org-branch:only-child::after{ display:none; }

/* 부서가 늘면 가로 트리가 캔버스보다 넓어져 양끝 카드가 잘린다(가로 스크롤도 잘린 것으로 읽힌다).
   좁은 화면에서는 세로 트리로 바꾼다 — 부서가 몇 개든 잘리지 않고, 스크롤도 세로 하나로 끝난다. */
@media (max-width:1120px){
  .org-canvas{ overflow-x:visible; }
  /* 루트·줄기를 왼쪽으로 정렬해 세로 줄기(브랜치 ::after)와 같은 x에 오게 한다.
     가운데 둔 채로 세로 트리를 그리면 루트에서 내려온 선이 줄기와 만나지 않고 끊긴다. */
  .org-tree{ min-width:0; width:100%; align-items:flex-start; }
  .org-trunk{ height:18px; align-self:flex-start; }
  .org-branches{ flex-direction:column; align-items:stretch; gap:var(--space-4);
    width:100%; padding-left:26px; }
  .org-branch{ padding-top:0; align-items:stretch; }
  /* 세로 줄기(::after) + 카드로 뻗는 가로 스텁(::before) = ㄴ자 연결 */
  .org-branch::before{ top:26px; left:-26px; width:26px; height:2px; }
  .org-branch::after{ left:-26px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .org-branch:first-child::after{ left:-26px; }
  .org-branch:last-child::after{ right:auto; bottom:auto; height:26px; }
  /* 가지가 하나뿐이면 줄기는 스텁까지만 — 아래로 흘러내리면 끝이 허공에 뜬다 */
  .org-branch:only-child::after{ display:block; bottom:auto; height:26px; }
  .org-dept-card{ min-width:0; }
}
/* 부서 카드: 부서 식별색은 상단 4px 룰로만 표기(면 채우기 금지 — v3 규칙).
   룰 색은 인라인 --dept-color(=var(--dept-N))로 주입되며, 미배정은 기본 경계색. */
.org-dept-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--w-radius-inner); overflow:hidden;
  border-top:4px solid var(--dept-color, var(--border));
  min-width:0; width:100%; box-shadow:0 2px 10px color-mix(in srgb, var(--ink) 8%, transparent); }
.org-dept-band{ display:flex; align-items:center; gap:10px; padding:13px 16px; }
.org-dept-name{ font-weight:700; font-size:var(--fs-h3); color:var(--headline); flex:1; letter-spacing:-.01em; }
.org-dept-count{ background:var(--surface-muted); color:var(--headline); font-size:var(--fs-caption); font-weight:700;
  border-radius:var(--w-radius-pill); padding:1px 9px; }
.org-dept-manage{ background:none; border:0; cursor:pointer; color:var(--ink); font-size:.95rem; padding:2px 4px; line-height:1; }
.org-dept-manage:hover{ color:var(--headline); }
.org-branch-unassigned .org-dept-card{ border-style:dashed; box-shadow:none; }
.org-branch-unassigned .org-dept-name, .org-branch-unassigned .org-dept-count{ color:var(--muted-text); }
.org-branch-unassigned .org-dept-count{ background:var(--surface-muted); }
.org-dept-body{ display:flex; align-items:center; justify-content:center; width:100%; background:none; border:0;
  padding:20px 16px; cursor:pointer; font-family:inherit; min-height:92px; }
.org-dept-body:hover{ background:var(--tint); }
.org-stack{ display:flex; }
.org-stack .org-avatar{ width:44px; height:44px; font-size:var(--fs-body); margin-right:-11px;
  box-shadow:0 0 0 2px var(--surface); }
.org-avatar-more{ background:var(--surface-muted); color:var(--muted-text); font-size:var(--fs-caption); }
/* 상시 노출 목록 — 한 줄에 한 명. 카드는 인원 수만큼 아래로 자란다. */
.org-chips{ display:flex; flex-direction:column; gap:6px; padding:12px; border-top:1px solid var(--border); }
.org-chip{ display:flex; align-items:center; gap:var(--space-2); background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:6px 12px 6px 6px; cursor:pointer; font-family:inherit; font-size:var(--fs-small); color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease; }
.org-chip:hover{ background:var(--tint); transform:translateY(-1px); box-shadow:0 3px 10px color-mix(in srgb, var(--ink) 10%, transparent); }
.org-chip .org-avatar{ width:32px; height:32px; }
.org-chip-name{ font-weight:700; }
.org-chip-pos{ color:var(--muted-text); font-size:var(--fs-caption); margin-left:auto; }
/* 부서 칩: 면 채우기 대신 좌측 4px 룰로 부서색 표기 */
.org-dept-chip{ display:inline-block; border-radius:var(--w-radius-pill); padding:4px 14px; font-size:var(--fs-small);
  font-weight:700; color:var(--headline); background:var(--surface-muted);
  border:1px solid var(--border); border-left:4px solid var(--dept-color, var(--border)); }

.modal-backdrop{ position:fixed; inset:0; background:color-mix(in srgb, var(--ink-deep) 55%, transparent); display:flex; align-items:center; justify-content:center; z-index:120; padding:var(--space-5); }
.modal{ position:relative; background:var(--surface); border-radius:var(--w-radius-card); max-width:840px; width:100%; max-height:88vh; overflow-y:auto;
  padding:var(--space-6); box-shadow:0 12px 48px color-mix(in srgb, var(--ink-deep) 30%, transparent); }
.modal-close{ position:absolute; top:14px; right:14px; background:none; border:0; cursor:pointer;
  font-size:1.1rem; color:var(--muted-text); padding:8px 10px; line-height:1; font-family:inherit; }
.modal-close:hover{ color:var(--ink); }
/* ⚠ 1fr은 최소 콘텐츠 폭을 존중한다 — 오른쪽 표가 넓어지면 왼쪽 열이 짜부라져
   「이 / 메 / 일」처럼 한 글자씩 세로로 쏟아진다(실제로 발생).
   minmax(0,1fr)이라야 열이 자기 몫을 지키고, 넘치는 표는 자기 안에서 스크롤한다. */
.modal-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-6); }
.modal-grid > *{ min-width:0; }
/* 부여 이력 표는 열이 여섯 개 + 버튼 둘이라 좁은 칸에서 반드시 넘친다 — 가로 스크롤로 가둔다. */
#mm-grants{ overflow-x:auto; }
#mm-grants table{ min-width:520px; }
.kv dt{ white-space:nowrap; }
.org-profile-head{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.org-profile-head .org-avatar{ width:48px; height:48px; font-size:var(--fs-h3); }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px var(--space-4); margin:0; font-size:var(--fs-small); }
.kv dt{ color:var(--muted-text); }
.kv dd{ margin:0; color:var(--ink); overflow-wrap:anywhere; }
/* 1024px 분기는 상하 2단으로 바뀌며 불필요해졌다(폭에 관계없이 한 열). */
@media (max-width:768px){
  .org-layout{ grid-template-columns:1fr; }
  .org-canvas{ display:none; } /* 조직도 캔버스는 데스크탑 전용 — 모바일은 리스트 전체화면 */
  .modal-backdrop{ padding:0; align-items:stretch; }
  .modal{ max-width:none; max-height:none; height:100%; border-radius:0; } /* 모바일 = 전체화면 시트 */
  .modal-grid{ grid-template-columns:1fr; }
}

/* 승인 동선 모바일 카드(휴가 승인함): 데스크탑=표, <768px=카드 — 푸시→열기→승인 2탭 */
.req-cards{ display:none; }
@media (max-width:768px){
  .req-table-wrap{ display:none; }
  .req-cards{ display:flex; flex-direction:column; gap:var(--space-3); }
  .req-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:var(--space-4) var(--space-5); }
  .req-card.req-pending{ border-color:var(--brand); }
  .req-card-head{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2); }
  .req-card-actions{ display:flex; gap:var(--space-3); margin-top:var(--space-4); }
  .req-card-actions .btn{ flex:1; min-height:44px; }
}

/* 승인함: 대기 카드는 데스크탑에서도 그리드로 항상 표시(승인 동선 주인공) */
.approve-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--space-3); }
.approve-cards .req-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:var(--space-4) var(--space-5); }
.approve-cards .req-card.req-pending{ border-color:var(--brand); }
.approve-cards .req-card-head{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2); }
.approve-cards .req-card-actions{ display:flex; gap:var(--space-3); margin-top:var(--space-4); }
.approve-cards .req-card-actions .btn{ flex:1; }
/* 접이식 도구(승인함 부여 도구 등) */
.tool-fold summary{ cursor:pointer; font-weight:700; color:var(--ink); font-size:var(--fs-small); padding:var(--space-3) 0; }
.tool-fold summary:hover{ color:var(--text-accent); }

/* ===== app: 출퇴근 확인 바텀시트 ===== */
/* 방어선: 저자 스타일(display:flex)이 UA의 [hidden]{display:none}을 덮지 못하게 고정.
   이 규칙이 없으면 hidden 속성이 무력화돼 시트가 항상 보이는 파손이 난다. */
[hidden]{ display:none !important; }
.sheet-backdrop{ position:fixed; inset:0; background:rgba(27,28,30,.45); display:flex; align-items:flex-end; justify-content:center; z-index:100; }
.sheet{ background:var(--surface); color:var(--ink); width:100%; max-width:560px; border-radius:16px 16px 0 0;
  padding:var(--space-3) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -8px 32px rgba(27,28,30,.25); animation:sheet-up .22s ease-out; max-height:88vh; overflow-y:auto; }
@keyframes sheet-up{ from{ transform:translateY(24px); opacity:.6; } to{ transform:translateY(0); opacity:1; } }
.sheet-handle{ width:44px; height:5px; border-radius:999px; background:var(--border); margin:0 auto var(--space-4); cursor:pointer; border:none; display:block; padding:0; }
.sheet-time{ margin:2px 0 0; font-size:var(--fs-h1); color:var(--headline); line-height:1.15; }
.sheet-map{ height:220px; border-radius:12px; overflow:hidden; border:1px solid var(--border); margin-top:var(--space-4); }
.sheet-actions{ display:flex; gap:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; }
.sheet-actions .btn{ flex:1 1 auto; }

/* ===== 내 근태(직원 주/월) + 관리자 직원별 보기 ===== */
/* 컨트롤 바: [주|월] ‹ 기간 › [오늘] — 375px에서도 한 줄 고정(줄바꿈 금지) */
.mya-nav{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:nowrap; min-width:0; }
.mya-nav strong{ flex:1; min-width:0; text-align:center; font-variant-numeric:tabular-nums;
  font-size:var(--fs-small); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seg{ display:inline-flex; flex:0 0 auto; border:1px solid var(--border); border-radius:var(--w-radius-pill); overflow:hidden; }
.seg a{ padding:7px 12px; font-size:var(--fs-small); font-weight:700; color:var(--muted-text); text-decoration:none; line-height:1.2; }
.seg a:hover{ text-decoration:none; color:var(--text-accent); }
.seg a.active{ background:var(--text-accent); color:var(--on-accent); }
.seg a + a{ border-left:1px solid var(--border); }
@media (max-width:768px){
  /* 전역 44px 터치 타깃이 컨트롤 바를 부풀려 줄바꿈시키던 원인 — 바 내부만 컴팩트 유지 */
  .mya-nav .btn, .mya-nav .btn-sm, .seg a{ min-height:36px; padding-top:6px; padding-bottom:6px; }
  .mya-nav .btn-sm{ padding-left:10px; padding-right:10px; }
}
.mya-dim td{ opacity:.55; }
.mya-today td{ background:var(--surface-muted); } /* 민트 면 — 오늘 행 강조 */
.mya-cards{ display:none; }
.mya-card{ border:1px solid var(--border); border-radius:10px; padding:var(--space-3); font-size:var(--fs-small);
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-2); }
.mya-card.mya-dim{ opacity:.55; }
.mya-card.mya-today{ background:var(--surface-muted); }
@media (max-width:768px){
  .mya-table-wrap{ display:none; } /* 모바일 = 일자 카드 리스트 */
  .mya-cards{ display:flex; flex-direction:column; gap:var(--space-2); }
}
/* 관리자 직원별 보기: 좌 직원 리스트 + 우 일자별 표 (데스크탑 전용 구도) */
.attemp-layout{ display:grid; grid-template-columns:260px 1fr; gap:var(--space-5); align-items:start; }
@media (max-width:768px){ .attemp-layout{ grid-template-columns:1fr; } }

/* 내 근태 표: 520px 카드 안에 5열 — 컴팩트 패딩, 오늘 행은 크림 면 + 잉크 고정(다크 대비) */
.mya-table-wrap table{ font-size:var(--fs-small); min-width:0; } /* 전역 640px 강제 해제 — 520px 카드 안 5열 */
.mya-table-wrap th, .mya-table-wrap td{ padding:8px 10px; white-space:nowrap; }
.mya-today td{ color:var(--headline); }
.mya-card.mya-today{ color:var(--headline); }

/* ===== 전사 달력 (홈 상단) — 색은 유형군별, 라벨 병기 원칙 ===== */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:var(--space-3); }
.cal-dow{ text-align:center; font-size:13px; font-weight:700; color:var(--ink); opacity:.7; padding:4px 0; }
.cal-cell{ min-height:clamp(104px, 9.5vw, 176px); border:1px solid var(--border); border-radius:8px; padding:5px; font-size:12px; cursor:pointer; overflow:hidden; background:var(--surface); }
.cal-cell:hover{ background:var(--tint); }
.cal-cell.cal-out{ opacity:.35; }
/* 오늘 셀은 면까지 브랜드 계열로 — 나머지 날짜가 전부 초록군이라, 색상군 자체가 갈려야
   "오늘"이 한눈에 잡힌다. --surface-muted를 쓰면 같은 초록군 안의 미세한 농도 차라 안 보인다.
   다크의 --brand-pale(#3A0317)은 너무 어두워 셀이 구멍처럼 뚫려 보이므로 저농도 혼합을 쓴다. */
.cal-cell.cal-today{ background:var(--brand-pale); border-color:var(--brand); }
@media (prefers-color-scheme: dark){
  .cal-cell.cal-today{ background:color-mix(in srgb, var(--brand) 14%, var(--surface-muted)); }
}
.cal-cell.cal-today .cal-date{ color:var(--headline); }
.cal-date{ font-weight:700; font-size:13px; padding:1px 3px; }
/* 바 면은 민트 램프(스킴 무관 고정값)라 글자도 스킴 무관 잉크여야 한다.
   --headline을 쓰면 다크에서 흰 글자가 밝은 민트 위에 얹혀 읽히지 않는다. */
.cal-bar{ display:block; border-radius:6px; padding:2px 7px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11.5px; line-height:1.7; color:var(--ink-deep); }
.cal-bar.g-leave{ background:var(--cobalt-300); }   /* 휴가 = 코발트 300 */
.cal-bar.g-work{ background:var(--cobalt-100); }    /* 외근·재택 = 코발트 100 */
/* 휴일근무 = 브랜드 강조. 작은 글자라 대비 게이트를 위해 면은 --text-accent(#C41050, 흰 글자 5.9:1).
   --brand(#ED1968)는 흰 글자 4.25:1로 AA 미달이므로 소형 텍스트 면에는 쓰지 않는다. */
.cal-bar.g-holiday-work{ background:var(--text-accent); color:var(--on-accent); }
.cal-bar.bar-cont{ border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-4px; padding-left:6px; } /* 다일 연결 */
.cal-more{ display:block; font-size:11.5px; color:var(--ink); opacity:.7; padding:0 3px; }
@media (max-width:768px){
  /* 모바일 달력은 '한 화면에 한 달'이 불변항이다 — 셀을 키우면 6주 달이 두 화면으로 찢어진다.
     데스크탑에서 키운 값(clamp)을 여기서 전부 되돌린다. */
  .cal-grid{ gap:2px; }
  .cal-cell{ min-height:46px; padding:2px; font-size:10px; border-radius:5px; }
  .cal-dow{ font-size:11px; padding:2px 0; }
  .cal-date{ font-size:10.5px; padding:0 2px; }
  .cal-bar{ font-size:9.5px; padding:1px 4px; margin-top:1px; line-height:1.45; }
  .cal-more{ font-size:9.5px; }
  .cal-chips{ gap:2px; margin-top:2px; }
  .cal-chip{ width:17px; height:17px; border-radius:5px; font-size:9px; }
  .cal-chip-more{ min-width:17px; padding:0 3px; }
}

/* ===== 직원 탭 구조(전 뷰포트 공통 해시): 상단 탭=태블릿·데스크탑 / 하단 탭=모바일 ===== */
/* 모바일 하단 탭 — 화면 밑변에 붙은 띠가 아니라 **떠 있는 바**로 둔다.
   ① 제스처 바(안드로이드 하단 손잡이)와 겹쳐 마지막 탭이 눌리지 않던 문제를 띄워서 푼다.
   ② 6개가 텍스트만으로는 360px에 안 들어가 「급여」가 잘려 있었다 → 아이콘+라벨 2단으로 바꾼다.
      각 칸 60px(6×60=360)이면 최소 기기에서도 들어가고, 아이콘이 있어 라벨이 작아져도 읽힌다. */
.tabbar{ display:none; position:fixed; z-index:60;
  left:10px; right:10px; bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--w-radius-pill); padding:6px 4px;
  box-shadow:0 8px 28px color-mix(in srgb, var(--ink-deep) 22%, transparent); }
/* min-height:44px는 지운 적 없어야 한다 — 아이콘·라벨 높이를 합치면 우연히 넘더라도,
   글자 크기나 아이콘이 바뀌는 순간 조용히 44 아래로 내려간다. 명시로 못 박는다. */
.tabbar a{ flex:1 1 0; min-width:0; min-height:44px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  padding:7px 2px 6px; border-radius:16px; text-decoration:none;
  color:var(--muted-text); font-size:10px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; }
.tabbar a svg{ width:21px; height:21px; flex:0 0 auto; fill:none;
  stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tabbar a:hover{ text-decoration:none; }
/* 활성 = 알약 면. 떠 있는 바에서는 상단 룰(inset box-shadow)이 잘려 보이지 않는다. */
.tabbar a.active{ color:var(--text-accent); background:var(--brand-pale); }
@media (prefers-color-scheme: dark){
  .tabbar a.active{ background:color-mix(in srgb, var(--brand) 18%, transparent); color:var(--brand-hover); }
}
.toptabs{ display:none; gap:var(--space-5); border-bottom:1px solid var(--border); margin-bottom:var(--space-5); }
.toptabs a{ color:var(--muted-text); font-size:var(--fs-small); font-weight:700; padding:10px 2px var(--space-3);
  border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; }
.toptabs a:hover{ color:var(--text-accent); text-decoration:none; }
.toptabs a.active{ color:var(--headline); border-bottom-color:var(--brand); }
@media (min-width:769px){ .toptabs{ display:flex; } }
@media (max-width:768px){
  .tabbar{ display:flex; }
  /* 떠 있는 바의 높이(약 58px) + 바깥 여백 + 안전영역만큼 본문을 비운다 */
  main.page{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 92px); }
  footer{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 100px); }
}
/* 한 탭 = 한 화면: 활성 탭의 카드만 표시(전 뷰포트) */
body[data-mtab="home"] .pane-atts, body[data-mtab="home"] .pane-leave, body[data-mtab="home"] .pane-approvals, body[data-mtab="home"] .pane-payslip{ display:none; }
body[data-mtab="atts"] .pane-home, body[data-mtab="atts"] .pane-leave, body[data-mtab="atts"] .pane-approvals, body[data-mtab="atts"] .pane-payslip{ display:none; }
body[data-mtab="leave"] .pane-home, body[data-mtab="leave"] .pane-atts, body[data-mtab="leave"] .pane-approvals, body[data-mtab="leave"] .pane-payslip{ display:none; }
body[data-mtab="docs"] .pane-home, body[data-mtab="docs"] .pane-atts, body[data-mtab="docs"] .pane-leave, body[data-mtab="docs"] .pane-payslip{ display:none; }
body[data-mtab="expense"] .pane-home, body[data-mtab="expense"] .pane-atts, body[data-mtab="expense"] .pane-leave, body[data-mtab="expense"] .pane-payslip{ display:none; }
body[data-mtab="payslip"] .pane-home, body[data-mtab="payslip"] .pane-atts, body[data-mtab="payslip"] .pane-leave, body[data-mtab="payslip"] .pane-approvals{ display:none; }
/* 결재 카드 내부 전환 탭은 상단/하단 탭이 대체 — 항상 숨김(스크립트 호환용 마크업만 유지) */
.pane-approvals > .adminnav{ display:none; }

/* 홈 탭 와이드 2컬럼(≥1024px): 좌 출퇴근·동의·알림 / 우 전사 달력(주인공) */
.home-side .card, .home-main .card{ margin-top:var(--space-5); max-width:520px; }
.home-side .eyebrow{ margin-top:var(--space-2); }
/* 머리글 — 본문 폭을 다 쓴다. 아래 2컬럼과의 간격만 준다. */
.home-greet{ margin-bottom:var(--space-5); }
/* 인사말만 자간을 푼다. 전역 h1의 -3px는 v3가 76px 영문 히어로를 기준으로 잡은 값이라,
   28px 한글에서는 글자가 서로 붙어 읽는 속도가 떨어진다.
   자간을 풀면 -3px 때문에 넣었던 word-spacing:.4em이 반대로 과해지므로 함께 줄인다. */
.home-greet h1{ max-width:22ch; letter-spacing:-0.5px; word-spacing:.12em; }
@media (min-width:1024px){
  body[data-mtab] .wrap{ max-width:1240px; }
  .home-grid{ display:grid; grid-template-columns:400px minmax(0,1fr); grid-template-areas:"side main"; gap:var(--space-6); align-items:start; }
  .home-side{ grid-area:side; }
  .home-main{ grid-area:main; }
  .home-side .card, .home-main .card{ max-width:none; }
  .home-main .cal-cell{ min-height:clamp(120px, 10vw, 190px); } /* 달력이 제 폭으로 — 셀도 여유 있게 */
}

/* ===== 조직도 드래그 배치: 직원 박스 → 부서 카드(미배정 카드 = 소속 해제) ===== */
.org-person[draggable="true"], .org-chip[draggable="true"]{ cursor:grab; }
.org-person[draggable="true"]:active, .org-chip[draggable="true"]:active{ cursor:grabbing; }
.org-dragging{ opacity:.4; }
/* 드래그 중에만 드롭 가능한 칸을 드러낸다 — 평소 화면은 그대로 */
body.org-dnd .org-dept-card{ outline:2px dashed var(--border); outline-offset:3px; }
body.org-dnd .org-dept-card.org-drop-over{ outline-color:var(--brand); background:var(--tint); }
.org-dept-card.org-drop-over .org-dept-body{ color:var(--text-accent); }
.org-dnd-note{ display:block; }
@media (max-width:768px){
  /* 터치 기기: 드래그 불가 — 안내를 대체 경로 중심으로 */
  .org-canvas-bar .hint{ font-size:var(--fs-caption); }
}

/* ===== v3.0 Wise 밴드 구조 =====
   화면은 "흰 캔버스 ↔ 민트 밴드"가 교차하도록 짠다. 통계·요약 한 곳만 반전 밴드로 눌러
   시선의 착지점을 만든다(반전은 화면당 1곳 — 여러 곳이면 위계가 사라진다). */
.band-muted{ background:var(--surface-muted); border-color:transparent; }
.band-dark{ background:var(--dark-surface); border-color:transparent; color:var(--on-dark); }
.band-dark .eyebrow,
.band-dark .hint{ color:color-mix(in srgb, var(--on-dark) 78%, transparent); }
.band-dark .eyebrow::before{ background:var(--cobalt-400); }
.band-dark strong,
.band-dark .w-figure{ color:var(--on-dark); }
/* 반전 밴드 안의 유령 버튼은 밝은 테두리로 */
.band-dark .btn-ghost{ border-color:color-mix(in srgb, var(--on-dark) 45%, transparent); color:var(--on-dark); }
.band-dark .btn-ghost:hover{ background:color-mix(in srgb, var(--on-dark) 12%, transparent); }
/* 처리 대기·반려처럼 "당신이 뭔가 해야 한다"를 알리는 밴드. 면은 옅게, 왼쪽 4px 룰로 세운다 —
   면을 진하게 채우면 홈에서 이게 주인공이 되어 버린다. */
.band-notice{ background:color-mix(in srgb, var(--notice) 10%, var(--surface));
  border-color:transparent; border-left:4px solid var(--notice); }
.band-notice .eyebrow{ color:var(--notice-text); }
/* 밴드 안에서는 아이브로 대시도 밴드 색을 따른다 — 마젠타 대시를 남기면 강조가 두 개가 된다 */
.band-notice .eyebrow::before{ background:var(--notice); }

/* 외근 승인 대기 한 줄 — 이름 · 시각 · 행선지 · [승인][반려].
   행선지만 늘어나게 두어(1fr) 이름·시각 자리가 흔들리지 않는다. */
.fieldq-row{ display:grid; grid-template-columns:auto auto 1fr auto;
  align-items:center; gap:var(--space-3);
  padding:var(--space-3) 0; border-top:1px solid var(--border); }
.fieldq-row:first-of-type{ border-top:0; }
.fieldq-time{ font-variant-numeric:tabular-nums; color:var(--muted-text); }
.fieldq-dest{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:720px){
  /* 좁은 화면에서 한 줄을 고집하면 행선지가 세 글자만 보인다 — 버튼을 아랫줄로 내린다 */
  .fieldq-row{ grid-template-columns:auto 1fr; }
  .fieldq-dest{ grid-column:1 / -1; white-space:normal; }
  .fieldq-row .row-actions{ grid-column:1 / -1; }
}

/* 요약 수치 묶음 — 반전 밴드에서 큰 수치를 나열할 때 */
.w-stats{ display:flex; flex-wrap:wrap; gap:var(--space-6); }
.w-stat{ display:flex; flex-direction:column; gap:2px; }
.w-stat .w-figure{ font-size:var(--fs-h2); }
.w-stat .w-label{ font-size:var(--fs-caption); letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--on-dark) 72%, transparent); }

/* 반전 밴드는 카드 안쪽에서 여백을 스스로 만든다(카드 padding을 밀고 나가지 않는다) */
.stat-band{ margin:var(--space-3) 0 var(--space-5); padding:var(--space-5) var(--space-6);
  border-radius:var(--w-radius-inner); }
.stat-band .w-stat .w-figure{ font-size:var(--fs-h1); line-height:1.05; display:block; }

/* 접이식 도구 패널 안의 카드 = 민트 밴드(흰 캔버스에서 한 단 들어간 면으로 읽힌다) */
.tool-fold > .card{ background:var(--surface-muted); border-color:transparent; }

/* ===== 인쇄 문서 뷰어 프레임 =====
   PDF 뷰어의 툴바·사이드패널·스크롤바는 문서보다 먼저 눈에 들어와 "내 명세서"가 아니라
   "PDF 파일"로 읽힌다. 크롬을 걷어내고(#toolbar=0…) A4 비율 상자에 폭 맞춤으로 넣는다.
   확대·인쇄가 필요하면 「크게 보기」가 새 탭에서 크롬 있는 원본을 연다. */
.doc-frame{ width:100%; aspect-ratio:1 / 1.414; margin-top:var(--space-3);
  border:1px solid var(--border); border-radius:var(--w-radius-inner);
  background:var(--paper); overflow:hidden; }
.doc-frame iframe{ width:100%; height:100%; border:0; display:block; background:var(--paper); }
/* 모바일: 세로로 길어지면 한 화면에 안 들어오므로 높이 상한을 둔다(폭 맞춤 우선). */
@media (max-width:640px){
  .doc-frame{ max-height:72vh; }
}

/* ===== 달력 이니셜 칩 =====
   원칙: 기본(출근)은 조용하게, 예외만 눈에 띄게. 20명이 다 출근한 날이 대부분인데
   그게 전부 진한 색이면 아무것도 안 보인다.

   ⚠ 민트·블러시 램프는 스킴 비반응 고정값이다(AGENTS.md 고정 잉크 원칙).
      면이 고정이면 글자도 고정 잉크여야 한다 — --headline을 쓰면 다크에서 사라진다.
   ⚠ 칩 글자는 10px = 소형 텍스트라 AA 4.5:1이 필요하다. 아래 세 곳은 지시 값이 미달이라
      계열을 유지한 채 조정했다(실측값 주석 참조).
        휴가   : mint-600 흰 글자 2.71:1 → 잉크 글자 5.48:1 (면 유지)
        재택 다크: mint-700 4.26:1 → deep 15% 혼합 5.09:1
        휴일근무 : --brand 흰 글자 4.25:1 → --text-accent 5.94:1(마젠타 계열 유지) */
.cal-chips{ display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.cal-chip{
  width:24px; height:24px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; letter-spacing:0; line-height:1;
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.cal-chip-more{ width:auto; min-width:24px; padding:0 5px; background:var(--surface-muted); color:var(--ink); }

/* 출근 = 가장 조용한 단계 */
/* 출근 = 가장 조용한 단계(그대로) */
.cal-chip.s-present{ background:var(--cobalt-100); color:var(--ink-deep); }
/* 휴가 */
/* 휴가 = 가장 진한 파랑. cobalt-500 면 + **흰 글자**로 5.3:1 — 잉크 글자로는 3.4:1이라 미달이었다.
   옅은 파랑 3단계(100·200·300)로는 출근·재택·휴가가 구분되지 않아 색이 칙칙하게 뭉쳤다. */
.cal-chip.s-leave{ background:var(--cobalt-500); color:var(--cobalt-50); }
/* 외근 = 블러시(업무 상황 공유) */
.cal-chip.s-field{ background:var(--blush-100); color:var(--ink-deep); }
/* 재택 */
.cal-chip.s-remote{ background:var(--cobalt-300); color:var(--ink-deep); }
/* 휴일근무 = 가장 예외적 → 강조면 */
.cal-chip.s-holiday-work{ background:var(--text-accent); color:var(--on-accent); }
/* 미기록 = 면 없음, 점선만 */
.cal-chip.s-none{ background:none; border:1px dashed var(--border); color:var(--muted-text); }

@media (prefers-color-scheme: dark){
  .cal-chip.s-present{ background:var(--cobalt-800); color:var(--cobalt-50); }
  .cal-chip.s-field{ background:var(--blush-800); color:var(--blush-100); }
  .cal-chip.s-remote{ background:var(--cobalt-700); color:var(--cobalt-50); }
  /* 휴가는 라이트와 같은 면 — mint-600은 다크에서도 충분히 눈에 띄고 잉크 대비가 5.5:1이다 */
}

/* 범례 — 칩엔 라벨을 넣을 공간이 없으므로 "상태색은 라벨 병기" 규칙을 여기서 충족한다 */
.cal-legend{ display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-4);
  margin-top:var(--space-2); font-size:var(--fs-caption); color:var(--muted-text); }
.cal-legend span{ display:inline-flex; align-items:center; gap:5px; }
.cal-legend .cal-chip{ width:16px; height:16px; border-radius:5px; font-size:0; }
.cal-dupe{ margin-top:var(--space-2); font-size:var(--fs-caption); color:var(--notice-text); }

/* 지각 표식 — 출근 칩의 면색은 그대로 두고 우상단에 점 하나만 얹는다.
   지각을 별도 상태색으로 세우면 달력의 무게중심이 지각으로 옮겨간다.
   사실은 전달하되 화면이 그쪽으로 기울지 않게 하는 것이 목적이다. */
.cal-chip.is-late{ position:relative; }
.cal-chip.is-late::after{
  content:""; position:absolute; top:2px; right:2px;
  width:3px; height:3px; border-radius:50%; background:var(--notice);
}
/* 범례의 축소 칩에서도 점이 보이도록 위치를 당긴다 */
.cal-legend .cal-chip.is-late::after{ top:1px; right:1px; }

/* 세그먼트 선택(외근/재택) — 두 칸이 같은 무게로 보여야 한다.
   기본 버튼(마젠타 면)을 두 개 나란히 두면 둘 다 이미 선택된 것처럼 읽힌다. */
.seg{ display:flex; gap:var(--space-2); }
.seg-btn{ flex:1 1 0; min-height:44px; padding:10px 14px; cursor:pointer;
  font-family:inherit; font-size:var(--fs-body); font-weight:700;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--w-radius-pill); }
.seg-btn:hover{ background:var(--surface-muted); }
.seg-btn.active{ background:var(--text-accent); color:var(--on-accent); border-color:transparent; }

/* 근태 면제 체크 — 관리 작업 버튼 줄과 붙어 보이지 않게 위로 띄운다 */
.mm-exempt{ display:flex; align-items:flex-start; gap:var(--space-3);
  margin-top:var(--space-5); font-size:var(--fs-small); color:var(--ink); }

/* 구성원 상세: 탭은 정보를 숨기는 장식이 아니라 서로 다른 관리 과업을 분리한다. */
.member-tabs{ display:flex; gap:var(--space-5); overflow-x:auto;
  margin:-4px 0 var(--space-5); border-bottom:1px solid var(--border); }
.member-tabs button{ flex:0 0 auto; min-height:44px; padding:8px 2px;
  border:0; border-bottom:3px solid transparent; background:none; cursor:pointer;
  color:var(--muted-text); font:inherit; font-size:var(--fs-small); font-weight:800; }
.member-tabs button:hover{ color:var(--text-accent); }
.member-tabs button:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
.member-tabs button.active{ color:var(--headline); border-bottom-color:var(--brand); }
.member-tab-pane[hidden]{ display:none !important; }

.record-section-head{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-4); margin-top:var(--space-6); padding-top:var(--space-5);
  border-top:1px solid var(--border); }
.record-section-head:first-child{ margin-top:0; padding-top:0; border-top:0; }
.record-section-head .eyebrow{ margin-bottom:var(--space-1); }
.record-section-head .hint{ margin:0; max-width:60ch; }
.record-list{ display:grid; gap:0; margin-top:var(--space-3); }
.record-item{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-4); padding:var(--space-4) 0; border-bottom:1px solid var(--border); }
.record-main{ min-width:0; }
.record-title{ color:var(--headline); font-weight:800; }
.record-meta{ margin-top:3px; color:var(--muted-text); font-size:var(--fs-small); }
.record-item p{ margin:var(--space-2) 0 0; color:var(--ink); font-size:var(--fs-small); white-space:pre-wrap; }
.record-empty{ margin:0; padding:var(--space-5); border-radius:var(--w-radius-inner);
  background:var(--surface-muted); color:var(--muted-text); font-size:var(--fs-small); text-align:center; }
.record-form{ margin-top:var(--space-4); }
.record-form textarea{ width:100%; resize:vertical; }
.record-range-field{ position:relative; grid-column:1 / -1; }
.shared-date-range{ position:relative; grid-column:1 / -1; min-width:260px; }
.shared-date-range-title{ color:var(--muted-text); font-size:var(--fs-small); }
.date-picker-source-field{ display:none !important; }
.date-picker-native{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.date-picker-trigger{ flex:0 0 auto; }
.date-picker-popover{ position:relative; z-index:8; }
.date-picker-months{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-2); }
.date-picker-month{ min-height:44px; border:1px solid var(--border); border-radius:var(--w-radius-inner);
  background:var(--surface); color:var(--ink); cursor:pointer; font:inherit; font-size:var(--fs-small); font-weight:700; }
.date-picker-month:hover{ background:var(--surface-muted); }
.date-picker-month.is-selected{ background:var(--text-accent); border-color:var(--text-accent);
  color:var(--on-accent); font-weight:900; }
.record-range-trigger{ width:100%; min-height:48px; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--space-3);
  padding:10px 14px; border:1px solid var(--border); border-radius:var(--w-radius-inner);
  background:var(--surface); color:var(--muted-text); cursor:pointer;
  font:inherit; text-align:left; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.record-range-trigger:hover{ border-color:var(--positive); background:var(--surface-muted); }
.record-range-trigger:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.record-range-trigger.has-value{ color:var(--headline); font-weight:750; }
.record-range-icon{ display:grid; place-items:center; width:30px; height:30px;
  border-radius:10px; background:var(--tint); color:var(--ink-deep); font-weight:900; }
.record-range-chevron{ color:var(--muted-text); font-size:var(--fs-h3); line-height:1; }
.record-range-popover{ margin-top:var(--space-2); padding:var(--space-4);
  border:1px solid var(--border); border-radius:var(--w-radius-inner);
  background:var(--surface); box-shadow:0 12px 32px color-mix(in srgb, var(--ink-deep) 16%, transparent);
  user-select:none; touch-action:none; }
.range-calendar-head{ display:grid; grid-template-columns:40px 1fr 40px; align-items:center;
  margin-bottom:var(--space-3); text-align:center; }
.range-calendar-head strong{ color:var(--headline); font-size:var(--fs-body); font-weight:900; letter-spacing:-.5px; }
.range-month-nav{ width:40px; height:40px; border:0; border-radius:50%;
  background:transparent; color:var(--headline); cursor:pointer; font:inherit; font-size:var(--fs-h2); line-height:1; }
.range-month-nav:hover{ background:var(--surface-muted); }
.range-weekdays, .range-days{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); }
.range-weekdays span{ padding:4px 0 8px; color:var(--muted-text);
  font-size:var(--fs-caption); font-weight:800; text-align:center; }
.range-days{ row-gap:4px; }
.range-day{ position:relative; min-width:0; height:38px; padding:0;
  border:0; border-radius:0; background:transparent; color:var(--ink);
  cursor:pointer; font:inherit; font-size:var(--fs-small); font-weight:650; }
.range-day::before{ content:""; position:absolute; inset:3px 0; z-index:0; background:transparent; }
.range-day:first-child::before, .range-day:nth-child(7n + 1)::before{
  border-radius:var(--w-radius-pill) 0 0 var(--w-radius-pill); }
.range-day:nth-child(7n)::before{ border-radius:0 var(--w-radius-pill) var(--w-radius-pill) 0; }
.range-day:hover::before{ inset:3px; border-radius:50%; background:var(--surface-muted); }
.range-day--outside{ color:var(--muted-text); opacity:.6; }
.range-day--today{ text-decoration:underline; text-decoration-color:var(--brand);
  text-decoration-thickness:2px; text-underline-offset:4px; }
.range-day--between::before{ background:var(--tint); }
.range-day--start::before, .range-day--end::before{ inset:3px; border-radius:50%;
  background:var(--text-accent); }
.range-day--start, .range-day--end{ color:var(--on-accent); font-weight:900; }
.range-day > *{ pointer-events:none; }
.range-day{ isolation:isolate; }
.range-day::before{ z-index:-1; }
.range-calendar-foot{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); margin-top:var(--space-4); padding-top:var(--space-3);
  border-top:1px solid var(--border); }
.range-calendar-foot .btn-link{ min-height:40px; padding:8px 2px; color:var(--muted-text); }
.record-apply{ display:flex; align-items:flex-start; gap:var(--space-3);
  margin-top:var(--space-4); color:var(--ink); font-size:var(--fs-small); cursor:pointer; }
.record-apply .hint{ display:block; margin:2px 0 0; }
@media (max-width:768px){
  .record-section-head, .record-item{ align-items:stretch; flex-direction:column; }
  .record-section-head .btn{ align-self:flex-start; }
  .record-item .row-actions{ width:100%; }
  .record-range-popover{ padding:var(--space-3); }
  .range-day{ height:42px; }
}

/* 되돌릴 수 없는 구역. 면으로 채우지 않는다 — 모달 안에서 붉은 면이 제일 큰 덩어리가 되면
   시선이 파괴적 동작으로 먼저 간다. 위와 선으로만 끊고, 버튼은 텍스트 링크로 둔다. */
.danger-zone{ margin-top:var(--space-6); padding-top:var(--space-5);
  border-top:1px solid color-mix(in srgb, var(--negative) 35%, transparent); }
.danger-zone .eyebrow{ color:var(--negative); }
.danger-zone .eyebrow::before{ background:var(--negative); }
.btn-danger-link{ margin-top:var(--space-3); padding:8px 0; min-height:44px;
  background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:var(--fs-small); font-weight:700; color:var(--negative);
  text-decoration:underline; text-underline-offset:3px; }
.btn-danger-link:hover{ color:var(--negative); filter:brightness(.85); }
/* 확인 모달의 영향 목록 */
.purge-impact{ margin:var(--space-4) 0; padding:var(--space-4);
  background:var(--surface-muted); border-radius:var(--w-radius-inner); }
.purge-impact li{ margin:2px 0; }

/* 잔여 휴가 내역 팝업(§10) */
.gd-table{ width:100%; border-collapse:collapse; margin-top:var(--space-3); font-size:var(--fs-small); }
.gd-table th, .gd-table td{ padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; }
.gd-table th{ color:var(--muted-text); font-weight:700; }
.gd-table .gd-neg{ color:var(--negative); }
.gd-total{ margin-top:var(--space-4); font-size:var(--fs-body); }
.gd-archived{ margin-top:var(--space-4); }
.gd-archived summary{ cursor:pointer; font-size:var(--fs-small); color:var(--muted-text); }
/* 잔여 숫자가 눌린다는 것이 보여야 한다 — 밑줄 + 커서(§10) */
.gd-open{ cursor:pointer; text-decoration:underline; text-underline-offset:4px;
  text-decoration-style:dotted; background:none; border:0; padding:0; font:inherit; color:inherit; }
.gd-open:hover{ text-decoration-style:solid; }

/* ── 현장 배치 ────────────────────────────────────────────────────────
   철회분은 목록에서 지우지 않는다. 취소선 + 「철회」 배지로 남긴다 —
   사라진 것과 취소된 것은 다른 사실이고, 나중에 왜 반경이 달랐는지 여기서 읽는다. */
.wa-revoked > td{ text-decoration:line-through; color:var(--muted-text); }
/* 배지는 취소선을 물려받지 않는다 — 그으면 「철회」라는 라벨 자체가 안 읽힌다 */
.wa-revoked > td .badge{ text-decoration:none; }
.wa-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-small); cursor:pointer; }

/* ── 생일 ─────────────────────────────────────────────────────────────
   챙기는 문화가 있어 넣는 기능이다. 근태 칩보다 먼저 눈에 들어와야 하므로
   셀에서 유일하게 면을 채운 요소로 둔다(칩은 24px, 이건 폭 전체). */
.cal-bday{
  /* 이름이 여러 줄이 되어도 아이콘은 첫 줄에 붙어 있어야 한다(center면 가운데로 내려간다) */
  display:flex; align-items:flex-start; gap:4px; margin-top:3px; padding:2px 5px;
  /* 면은 blush-300. 칩 배경(cobalt-100)과 같은 옅기로 두면 「먼저 읽힌다」가
     성립하지 않아 넣은 의미가 없어진다. 잉크 글자로 7.3:1 — AA를 넉넉히 넘긴다.
     brand는 강조 전용이라 달력 셀의 작은 면에는 쓰지 않는다. */
  background:var(--blush-300); color:var(--ink-deep);
  border-radius:6px; font-size:12.5px; font-weight:700; line-height:1.25;
}
.cal-bday-ico{ font-size:14px; line-height:1; flex:0 0 auto; }
/* 하루 3명을 넘는 일이 없어 접지 않는다 — 이름은 모두 보여주고 줄바꿈만 허용한다.
   ⚠ min-width:0이 없으면 flex 항목이 콘텐츠 폭 아래로 줄지 못해 셀 밖으로 넘치고,
   .cal-cell의 overflow:hidden에 잘려 「박지훈」이 「박지」로 보인다(실측 확인).
   이름 사이에서만 줄바꿈되게 각 이름을 항목으로 두고 gap으로 띄운다. */
.cal-bday-names{ min-width:0; display:flex; flex-wrap:wrap; gap:0 5px; }
.cal-bday-name{ word-break:keep-all; }
@media (prefers-color-scheme: dark){
  .cal-bday{ background:var(--blush-800); color:var(--blush-100); }
}
/* 모바일 셀은 46px — 이름이 들어갈 자리가 없다. 아이콘만 두고 이름은 일별 팝업에서 읽는다. */
@media (max-width:768px){
  .cal-bday{ margin-top:2px; padding:1px 3px; justify-content:center; }
  .cal-bday-names{ display:none; }
  .cal-bday-ico{ font-size:12px; }
}
/* 일별 팝업 — 생일자는 맨 위. 관리자 근태가 팝업에서 빠지는 규칙의 예외다(전사 공통 정보). */
.cal-bday-list{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-4); }
.cal-bday-list .cal-bday{ margin-top:0; padding:4px 9px; font-size:var(--fs-body); }
.cal-bday-list .cal-bday-names{ display:inline; }

/* ─────────────────────────────────────────────────────────────────────────────
   Figma DS 이식 — 버튼 변형 · 아이콘 · 카드
   출처: «Change Anpark team token color» / ds/Buttons.tsx · ds/Cards.tsx
   치수는 SIZE_MAP 실측값이며 tokens.css 의 --btn-* / --card-* / --icon-* 를 통해서만 쓴다.
   기존 .btn(면=--text-accent, 글자=--on-accent)은 대비가 이미 맞아 건드리지 않는다.
   ───────────────────────────────────────────────────────────────────────────── */

/* 크기 — 알약을 유지하되 내부 여백만 DS 스케일에 맞춘다 */
.btn-md{ padding:var(--btn-pad-y-md) var(--btn-pad-x-md); font-size:var(--fs-small); }
.btn-lg{ padding:var(--btn-pad-y-lg) var(--btn-pad-x-lg); font-size:var(--fs-body); }
.btn, .btn-sm, .btn-md, .btn-lg{
  font-weight:var(--btn-weight); letter-spacing:var(--btn-track);
  transition:var(--btn-ease); white-space:nowrap; user-select:none;
}

/* outlined — 2px 테두리, 호버에 면이 차오른다(DS 규칙) */
.btn-outline{
  background:none; border:2px solid var(--text-accent); color:var(--text-accent);
}
.btn-outline:hover{ background:var(--text-accent); color:var(--on-accent); filter:none; }

/* tonal — 잉크의 아주 옅은 면. 취소·보조 동작 */
.btn-tonal{
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  color:var(--ink); border:0;
}
.btn-tonal:hover{ background:color-mix(in srgb, var(--ink) 12%, transparent); filter:none; }

/* secondary — 정보성 동작(파랑/보라 계열) */
.btn-secondary{ background:var(--moss); color:var(--surface); }
@media (prefers-color-scheme: dark){
  .btn-secondary{ color:var(--ink-deep); }
}

/* 아이콘 버튼 — 정사각. 라벨이 없으므로 좌우 여백을 세로 여백과 같게 둔다(DS: isOnly) */
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--btn-pad-y-md); min-width:44px; min-height:44px;
}
.btn-icon svg{ width:var(--btn-icon-md); height:var(--btn-icon-md); stroke:currentColor; fill:none; }
.btn-sm .btn-icon svg, .btn-icon.btn-sm svg{ width:var(--btn-icon-sm); height:var(--btn-icon-sm); }
/* 라벨 + 아이콘 조합 */
.btn-wi{ display:inline-flex; align-items:center; gap:6px; }
.btn-wi svg{ width:var(--btn-icon-md); height:var(--btn-icon-md); stroke:currentColor; fill:none; stroke-width:var(--icon-sw); }

/* 아이콘 타일 — 카드 좌측의 둥근 사각 안에 선 아이콘 하나(DS: StatCard/ListCard) */
.icon-tile{
  width:var(--icon-tile); height:var(--icon-tile); border-radius:var(--icon-tile-radius);
  background:var(--brand-pale); color:var(--brand-fill);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.icon-tile-lg{ width:var(--icon-tile-lg); height:var(--icon-tile-lg); border-radius:var(--icon-tile-radius-lg); }
.icon-tile svg{ width:50%; height:50%; stroke:currentColor; fill:none; stroke-width:var(--icon-sw); }
.icon-tile-sec{ background:var(--sec-50); color:var(--moss); }
@media (prefers-color-scheme: dark){
  .icon-tile-sec{ background:var(--tint); }
}

/* 카드 — 그림자 단계를 토큰으로. 누를 수 있는 카드만 들어올린다 */
.card{ box-shadow:var(--elev-card); }
.card-flat{ box-shadow:none; }
.card-link{ cursor:pointer; transition:transform .2s, box-shadow .2s; }
.card-link:hover{ transform:translateY(var(--card-lift)); box-shadow:var(--elev-card-hover); }
.card-sm{ border-radius:var(--card-radius-sm); padding:var(--space-5); }
.card-tight{ border-radius:var(--card-radius); padding:var(--space-5); }

/* 태그 — 대문자 소형 라벨. brand 계열과 secondary 계열 두 벌(DS: Tag/SecTag) */
.tag{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 9px; border-radius:6px;
  background:var(--brand-pale); color:var(--brand-fill);
}
.tag-sec{ background:var(--sec-50); color:var(--moss); font-weight:700; letter-spacing:.06em; }
@media (prefers-color-scheme: dark){
  .tag-sec{ background:var(--tint); }
}

/* 진행바 — 트랙은 중간 톤, 채움은 브랜드(DS: KanbanCard) */
.progress{ height:5px; border-radius:3px; background:var(--tint); overflow:hidden; }
.progress > span{ display:block; height:100%; border-radius:3px; background:var(--brand); transition:width .5s; }