/* 우이락 사내시스템 — 공용 스타일
   팔레트는 wooyirak.com 실제 값에서 가져왔다: 배경 #050505 / 텍스트 #f5f4f1 / 포인트 #f5a200 */
:root{
  --brand:#0d0d0f;          /* 사이드바 */
  --brand-2:#1a1a1e;
  --amber:#f5a200;
  --amber-dim:#c98600;
  --bg:#f6f5f2;
  --surface:#fff;
  --surface-2:#faf9f7;
  --border:#e3e0da;
  --border-2:#cfcbc3;
  --text:#17171a;
  --muted:#6d6a64;
  --muted-2:#918d86;
  --ok:#15803d; --ok-bg:#e8f5ec;
  --warn:#a15c07; --warn-bg:#fdf3e2;
  --danger:#b91c1c; --danger-bg:#fdeceb;
  --info:#1d4ed8; --info-bg:#eaf0fd;
  --sidebar-w:236px;
  --radius:10px;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05);
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.55; -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--info);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-variant-numeric:tabular-nums}

/* ───────── 로그인 ───────── */
.login-wrap{min-height:100dvh;display:grid;place-items:center;background:var(--brand);padding:24px}
.login-card{width:100%;max-width:380px;background:var(--surface);border-radius:16px;padding:34px 30px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-logo{display:block;height:52px;margin:0 auto 6px;object-fit:contain}
.login-sub{text-align:center;color:var(--muted);font-size:12.5px;margin:0 0 26px;letter-spacing:.02em}
.login-card label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin:14px 0 6px}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--border-2);border-radius:8px;background:var(--surface-2)}
.login-card input:focus{outline:2px solid var(--amber);outline-offset:-1px;background:#fff}
.login-btn{width:100%;margin-top:22px;padding:12px;border:0;border-radius:8px;background:var(--brand);color:#f5f4f1;font-weight:800;cursor:pointer}
.login-btn:hover{background:#000}
.login-btn:disabled{opacity:.55;cursor:default}
.login-err{margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--danger-bg);color:var(--danger);font-size:13px;display:none}
.login-err.on{display:block}
.login-foot{margin-top:20px;text-align:center;font-size:11.5px;color:var(--muted-2)}
/* 아직 2단계 인증을 켜지 않은 대상자에게 붉은 점을 붙인다 */
.warn-dot{position:relative}
.warn-dot::after{content:"";position:absolute;top:2px;right:2px;width:7px;height:7px;border-radius:50%;background:var(--danger)}

/* ── 대시보드 고치기 ── */
.dash-setup{display:flex;flex-direction:column;gap:6px;padding:0 2px}
.dash-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer}
.dash-row:hover{background:var(--surface-2)}
.dash-name{flex:1;min-width:0}

/* 캘린더 머리말의 범위 표시 (우리 팀 / 전체) */
.cal-sub{font-size:11.5px;color:var(--muted-2);font-weight:700}

/* ── 회의록 ── */
.mt-list{margin:6px 0 14px;padding-left:22px;line-height:1.8}
.mt-list li{margin-bottom:4px}
/* 회의 내용은 사람이 엔터로 줄을 나눠 적는다 — 그대로 보여준다 */
.mt-body{white-space:pre-wrap;line-height:1.75;font-size:13.5px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}

/* 표 안에서 눌러 여는 이름·링크 (담당자 → 담당 지점) */
/* 글자처럼 보이는 단추 (담당자 이름 등).
   ⚠ padding:0 이라 높이가 글자 높이(20px)뿐이었다 — **휴대폰에서 손가락으로 못 누른다.**
     눌리지 않으면 "이 기능이 없다"로 읽힌다(2026-10-06 실측 684건). 최소 30px 을 준다. */
.link-btn{background:none;border:0;padding:4px 2px;margin:-4px -2px;font:inherit;font-weight:700;
  color:var(--info);cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  min-height:30px;display:inline-flex;align-items:center;text-align:left}
.link-btn:hover{color:var(--text)}

/* ── 2단계 인증 등록 화면 ── */
.tf-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:700;letter-spacing:.06em;
  padding:12px 14px;border:1px dashed var(--border-2);border-radius:8px;background:var(--surface-2);word-break:break-all;line-height:1.7}
/* QR — 흰 바탕 위에 두어야 읽힌다(어두운 배경에 얹으면 인식률이 떨어진다) */
.tf-qr{display:flex;justify-content:center;padding:14px;background:#fff;border:1px solid var(--border);border-radius:10px;margin:10px 0}
.tf-qr svg{display:block;width:208px;height:208px}
/* 복구코드 — 옮겨 적기 쉽게 크고 넓게, 좁은 화면에서는 두 칸 */
.tf-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.tf-codes > div{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:700;letter-spacing:.08em;
  text-align:center;padding:10px 6px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
/* ═══════ 2단계 인증 — 종이 코드표 인쇄 (2026-10-01) ═══════
   두 번째 열쇠를 '종이'로 하자고 했으면 종이로 뽑히는 길이 있어야 한다.
   ⚠ 평소에는 display:none 이다 — 화면 밖(left:-9999px)에 두면 레이아웃 검사가 가로 넘침으로 잡는다. */
.tf-sheet{display:none}
.tf-sheet h2{margin:0 0 6px;font-size:19px}
.tf-sheet-sub{margin:0 0 18px;font-size:12.5px;line-height:1.8;color:#444}
.tf-sheet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tf-sheet-grid > div{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:700;
  letter-spacing:.1em;text-align:center;padding:13px 6px;border:1px solid #999;border-radius:6px}
.tf-sheet-foot{margin:20px 0 0;font-size:12px;line-height:1.8;color:#444}
@media print{
  body.printing-codes > *:not(.tf-sheet){display:none !important}
  body.printing-codes{background:#fff}
  body.printing-codes .tf-sheet{display:block;color:#111;padding:0}
}
/* 로그인 화면의 체크 한 줄 (이 기기 기억하기) */
.login-chk{display:flex;align-items:center;gap:8px;margin:4px 0 16px;font-size:12.5px;color:var(--muted);cursor:pointer}
.login-chk input{width:16px;height:16px;margin:0}

/* ═══════ 근로계약서 — A4 종이 그대로 (2026-10-07 대표 요청: "틀도 A4 양식에 맞게") ═══════
 *
 * ⚠ 예전에는 미리보기가 **카드 폭에 맞춰 늘어났다.** 그래서 화면에서 본 줄바꿈과
 *   인쇄된 줄바꿈이 달랐고, "종이에 어떻게 나오나"를 보려면 매번 인쇄를 눌러야 했다.
 *   근로계약서는 서명을 받아 보관하는 문서다 — **보이는 대로 찍혀야 한다.**
 *   그래서 화면에도 **210mm 짜리 종이**를 그린다. 여백·글자 크기도 인쇄와 같은 값(mm·pt)으로 둔다.
 *
 * ⚠ 계약서 글자·여백은 **이 파일에만 있다.** 인쇄 창(views-contract.js printHtmlDoc)은 이 CSS 를
 *   그대로 불러 쓴다 — 예전엔 거기에 값을 한 번 더 적어 두어 화면만 고치면 종이가 어긋났다.
 *   글 크기는 회사 PDF 에 맞춘 값이다(같은 글이 **A4 두 쪽**에 들어간다).
 */
.ct-paper{
  /* 화면 가운데에 종이 한 장. 좁은 화면에서는 아래 @media 가 줄여서 보여준다 */
  width:210mm; min-height:297mm; margin:0 auto;
  background:#fff; color:#000;
  box-shadow:0 2px 10px rgba(0,0,0,.14), 0 0 0 1px var(--border);
  padding:14mm 12mm;
  box-sizing:border-box;
}
.ct-paper-wrap{overflow-x:auto; padding:16px; background:var(--surface-2);
  display:flex; flex-direction:column; align-items:center; gap:16px}
/* 종이 한 장은 **딱 A4** 다 — 넘치는 내용은 다음 장으로 간다(views-contract.js paperPages) */
.ct-paper{height:297mm; position:relative; overflow:hidden}
/* 쪼갤 수 없는 큰 덩어리가 들어온 쪽 — 잘라 먹지 말고 늘린다 (views-contract.js paperPages) */
.ct-paper.ct-grow{height:auto; min-height:297mm; overflow:visible}
/* 높이를 재려고 잠깐 띄우는 종이 — 사람 눈에는 안 보인다 */
.ct-probe{position:absolute; left:-10000px; top:0; height:auto; min-height:0;
  box-shadow:none; visibility:hidden; pointer-events:none}
/* 대시보드 타일 안의 유형 칩 (로드샵 12 · 특수상권 8 …) — 2026-10-08 */
/* ⚠ 유형 거르개는 지역 거르개(.store-filter)와 **다른 class** 여야 한다 —
   같은 class 를 쓰면 "지역 버튼이 몇 개인가" 를 세는 곳에서 섞인다(검사에서 실제로 잡혔다). */
.kind-filter{display:flex; flex-wrap:wrap; gap:6px}
.stat-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.stat-chips .chip{display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; min-height:30px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--muted);
  font-size:11.5px; line-height:1; cursor:pointer}
.stat-chips .chip b{color:var(--text); font-size:12.5px}
.stat-chips .chip:hover{border-color:var(--accent); color:var(--text)}

/* ═══ 재직증명서 (2026-10-07) — 계약서와 **같은 종이 틀**(.ct-paper/.ct-doc)을 쓴다 ═══
 * 글자 크기·여백은 위에서 이미 정했다. 여기서는 증명서에만 있는 모양만 더한다.
 * ⚠ 값을 다시 적지 않는다 — 계약서에서 두 군데 적었다가 화면과 종이가 어긋난 적이 있다. */
.ct-center{text-align:center; margin:6px 0}
/* 회사 네 줄 (회사명·대표이사·사업자등록·주소) — 양식처럼 왼쪽에 가지런히 */
.ct-co{margin-top:10px}
.ct-co-row{display:flex; gap:14px; align-items:baseline; margin:3px 0}
.ct-co-k{display:inline-block; min-width:78px; letter-spacing:.12em}
/* 도장 자리 — 대표자 이름에서 넉넉히 떨어뜨린다 (양식의 넓은 빈칸) */
.ct-seal{margin-left:34mm}
/* 쪽 번호 — 회사 양식에는 없지만 화면에서 "몇 쪽인지" 를 알아야 한다. 인쇄에는 안 나간다 */
.ct-pageno{position:absolute; right:12mm; bottom:5mm; font-size:8.5pt; color:#999; letter-spacing:.04em}
.ct-doc{
  font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:9.5pt; line-height:1.3; color:#000;
}
.ct-doc .ct-title{
  text-align:center; font-size:15pt; letter-spacing:.35em; font-weight:800;
  margin:0 0 10px; text-decoration:underline; text-underline-offset:5px;
}
.ct-doc .ct-art{font-size:10pt;font-weight:800;margin:9px 0 3px;page-break-after:avoid}
/* ⚠ 앞 공백을 살린다 — 조문 번호가 왼쪽에 가지런히 서야 읽힌다 */
.ct-doc .ct-l{white-space:pre-wrap;word-break:break-word}
.ct-doc .ct-gap{height:4px}
.ct-tb{width:100%;border-collapse:collapse;margin:5px 0 7px;font-size:9pt;page-break-inside:avoid}
.ct-tb th,.ct-tb td{border:1px solid #000;padding:3px 5px;text-align:center;vertical-align:middle}
/* 회사 양식의 표 머리줄은 연한 분홍빛이다 — 종이와 같아 보이게 */
.ct-tb th{background:#faf0f0;font-weight:700}
/* ⚠ 증명서 표는 **칸 이름만 가운데, 값은 왼쪽**이다 — 주소처럼 긴 값이 가운데 있으면 읽기 나쁘다.
   ⚠ 이 줄은 반드시 위 .ct-tb td 보다 **아래**에 있어야 한다. 세기가 같아서 나중 것이 이긴다 —
   위에 뒀다가 죽어 있었다(실측에서 값이 가운데로 찍혔다). */
.ct-tb-cert td{text-align:left; padding-left:10px}

/* ⚠ 210mm 는 휴대폰 화면보다 넓다. 줄이지 않으면 가로로 밀어야 읽힌다.
   종이 비율을 지키려고 **통째로 축소**한다 — 글자만 줄이면 줄바꿈이 인쇄와 달라진다. */
@media (max-width:860px){
  .ct-paper-wrap{padding:10px; gap:10px}
  .ct-paper{transform:scale(.66);transform-origin:top left;margin:0}
  /* ⚠ 축소해도 **자리는 원래 크기만큼** 남는다(transform 은 자리를 안 줄인다).
     바깥 틀의 크기를 줄여 아래 내용이 멀찍이 떠 있지 않게 한다. */
  .ct-paper-outer{width:calc(210mm * .66); height:calc(297mm * .66); overflow:hidden}
}
@media (max-width:560px){
  .ct-paper{transform:scale(.45)}
  .ct-paper-outer{width:calc(210mm * .45); height:calc(297mm * .45)}
}
/* ⚠ 여기 있던 옛 규칙(.ct-tb th 회색·좁은화면 표 가로밀기)은 지웠다.
   종이를 통째로 축소하는 쪽으로 바꿨으므로 표만 따로 밀면 종이 안에서 어긋난다. */

/* ═══════ 가입 — 이메일 인증 한 줄 (2026-10-02) ═══════
   입력칸과 단추를 한 줄에 둔다. 좁은 화면에서는 단추가 줄어들되 글자가 깨지지 않게 최소폭을 준다. */
.login-row{display:flex;gap:8px;align-items:stretch}
.login-row input{flex:1 1 auto;min-width:0}
.login-mini{flex:0 0 auto;white-space:nowrap;padding:0 12px;border-radius:8px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;border:1px solid var(--border-2);
  background:var(--surface-2);color:var(--fg)}
.login-mini:hover:not(:disabled){border-color:var(--amber,#d9a21b)}
.login-mini:disabled{opacity:.55;cursor:default}
.login-note2{margin:6px 0 14px;font-size:11.5px;line-height:1.6;color:var(--muted)}
.login-note2:empty{display:none}
.login-note2.ok{color:var(--ok,#3fb950)}
.login-note2.bad{color:var(--warn,#d29922)}

/* 2단계 인증 안내문 — 무엇을 넣어야 하는지 한 줄로 알려준다 */
.login-hint{margin:-14px 0 20px;text-align:center;font-size:12px;line-height:1.6;color:var(--muted)}

/* ───────── 셸 ───────── */
.shell{display:flex;min-height:100dvh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--brand);color:#e9e7e2;
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;overflow-y:auto;
}
.sb-head{padding:20px 18px 14px;border-bottom:1px solid #26262b}
.sb-logo{height:34px;object-fit:contain;display:block}
.sb-sys{font-size:11px;color:#8d8981;letter-spacing:.08em;margin-top:7px;text-transform:uppercase}
.sb-nav{flex:1;padding:10px 10px 20px}
.sb-group{font-size:10.5px;color:#75716a;letter-spacing:.1em;padding:14px 10px 6px;font-weight:700}
.sb-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;
  color:#cdc9c2;border-radius:8px;cursor:pointer;text-align:left;font-size:13.5px;font-weight:600;
}
.sb-item:hover{background:#1e1e23;color:#fff}
.sb-item.on{background:var(--amber);color:#1a1200;font-weight:800}
.sb-item .ic{width:17px;height:17px;flex:0 0 17px;opacity:.9}
.sb-item.on .ic{opacity:1}
.sb-badge{margin-left:auto;background:#c0392b;color:#fff;font-size:10.5px;font-weight:800;border-radius:9px;padding:1px 6px;min-width:18px;text-align:center}
.sb-item.on .sb-badge{background:#1a1200;color:var(--amber)}
.sb-foot{padding:12px 14px;border-top:1px solid #26262b;font-size:12px}
.sb-user{font-weight:700;color:#f2f0ec}
.sb-role{color:#8d8981;font-size:11.5px;margin-top:1px}
.sb-actions{display:flex;gap:6px;margin-top:10px}
.sb-actions button{flex:1;padding:6px;border:1px solid #33333a;background:#17171b;color:#b6b2ab;border-radius:6px;font-size:11.5px;cursor:pointer}
.sb-actions button:hover{background:#22222a;color:#fff}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:none;align-items:center;gap:10px;padding:10px 14px;background:var(--brand);color:#f5f4f1;
  position:sticky;top:0;z-index:40;
}
.topbar img{height:24px}
.hamburger{border:0;background:#1e1e23;color:#f5f4f1;width:36px;height:36px;border-radius:8px;font-size:17px;cursor:pointer}
.content{flex:1;padding:26px 30px 60px;max-width:1360px;width:100%}

/* ───────── 공통 부품 ───────── */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-title{font-size:21px;font-weight:800;margin:0;letter-spacing:-.01em}
.page-desc{color:var(--muted);font-size:13px;margin:5px 0 0}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ⚠ 카드에는 아래 여백이 **없었다.**
   이 프로젝트는 카드 사이에 높이 14px 짜리 빈 div 를 따로 넣어 간격을 만든다.
   그걸 빠뜨린 화면에서는 카드가 딱 붙어 1px 테두리가 겹쳐 보였다
   (2026-09-30 전 폭 실측: 근로계약 5곳 · 본사수익표 3곳).
   화면마다 빈 div 를 넣는 대신 여백을 여기서 주고, 이미 있던 빈 div 는 감춘다.
     · 격자(.grid) 안의 카드는 격자가 간격을 만드므로 여백을 뺀다 — 안 그러면 아래쪽만 벌어진다
     · 간격용 빈 div 는 전부 자식이 없고 인라인 height 만 있다 (73개 전수 확인) */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px}
.grid > .card,.stat-grid > .card{margin-bottom:0}
.card + div[style*="height"]:empty{display:none}
.card-pad{padding:18px}
.card-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-title{font-weight:800;font-size:14.5px;margin:0}
.card-sub{color:var(--muted);font-size:12.5px;margin:3px 0 0}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 채널 5개(홀·배민·요기요·쿠팡·기타)를 한 줄에 — 없으면 세로로 쌓여 화면을 다 먹는다 (2026-09-30) */
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* ⚠ 사이드바가 폭을 먹는 구간(900~1200px)에서는 4칸이 172px 까지 눌린다.
   통계 타일의 25px 금액은 177px 이 필요해서 두 줄로 깨졌다(2026-09-30 실측: 필요 177 / 담을 수 있는 폭 138).
   이 구간만 3칸으로 둔다. */
@media (min-width:901px) and (max-width:1200px){
  .g4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.gauto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px}
.stat-label{font-size:12px;color:var(--muted);font-weight:700}
.stat-value{font-size:25px;font-weight:800;margin-top:5px;letter-spacing:-.02em}
.stat-value small{font-size:13px;font-weight:700;color:var(--muted);margin-left:3px}
/* 값이 길면 한 단계 작게 — 안 그러면 좁은 타일에서 두 줄로 쪼개진다 (app.js stat 참고) */
.stat-value.stat-long{font-size:19px;letter-spacing:-.03em}
.stat-value.stat-long small{font-size:11.5px}
.stat-note{font-size:11.5px;color:var(--muted-2);margin-top:3px}

.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--border-2);
  background:var(--surface);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--surface-2);border-color:var(--muted-2)}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#f5f4f1}
.btn-primary:hover{background:#000;border-color:#000}
.btn-amber{background:var(--amber);border-color:var(--amber);color:#1a1200}
.btn-amber:hover{background:var(--amber-dim);border-color:var(--amber-dim)}
.btn-danger{color:var(--danger);border-color:#e8b8b4}
.btn-danger:hover{background:var(--danger-bg)}
.btn-sm{padding:4px 9px;font-size:12px;border-radius:6px}
.btn-ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}

.field{display:block;margin-bottom:13px}
.field > span{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:8px 11px;border:1px solid var(--border-2);border-radius:7px;background:var(--surface);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--amber);outline-offset:-1px}
.field textarea{min-height:96px;resize:vertical;line-height:1.6}
.field-hint{font-size:11.5px;color:var(--muted-2);margin-top:4px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > *{flex:1;min-width:150px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
label.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;font-weight:600}
label.chk input{width:auto;margin:0}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tb{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
table.tb th,table.tb td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
table.tb th{background:var(--surface-2);font-size:12px;color:var(--muted);font-weight:800;white-space:nowrap;position:sticky;top:0;z-index:1}
table.tb tbody tr:hover{background:#fcfbf9}
table.tb td.r,table.tb th.r{text-align:right;font-variant-numeric:tabular-nums}
table.tb td.c,table.tb th.c{text-align:center}
table.tb tfoot td{font-weight:800;background:var(--surface-2);border-top:2px solid var(--border-2)}
table.tb input,table.tb select{padding:5px 7px;border:1px solid var(--border);border-radius:5px;width:100%;min-width:64px}
/* ⚠ 위 규칙이 **체크박스까지** 늘렸다 — 실측 74×13px.
   네모는 왼쪽 13px 에만 그려지고 나머지 61px 은 빈 칸이라, 가운데 정렬한 열에서도 왼쪽으로 치우쳐 보인다
   (대표가 지적한 "구분 체크 표시 열 맞춰 이상해"가 이것이다). 칸 너비도 쓸데없이 64px 로 벌어졌다. */
table.tb input[type=checkbox]{width:18px;height:18px;min-width:0;padding:0;margin:0 auto;display:block;border:0}
/* 기본 13px 은 휴대폰에서 손가락으로 맞히기 어렵다 (2026-09-30 실측: 근로계약 화면 13px) */
input[type=checkbox],input[type=radio]{width:18px;height:18px}

.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:800;white-space:nowrap}
.tag-ok{background:var(--ok-bg);color:var(--ok)}
.tag-warn{background:var(--warn-bg);color:var(--warn)}
.tag-danger{background:var(--danger-bg);color:var(--danger)}
.tag-info{background:var(--info-bg);color:var(--info)}
.tag-muted{background:#f0eeea;color:var(--muted)}

.note{padding:11px 14px;border-radius:8px;font-size:13px;display:flex;gap:9px;align-items:flex-start}
.note b{font-weight:800}
.note-warn{background:var(--warn-bg);color:#6b3d02;border:1px solid #f0d9ac}
.note-info{background:var(--info-bg);color:#16337a;border:1px solid #c5d4f7}
.note-danger{background:var(--danger-bg);color:#7c1a15;border:1px solid #f0c2be}
.note-ok{background:var(--ok-bg);color:#0d5a2c;border:1px solid #bfe3cc}
/* ⚠ 안내 띠 아래 간격 (2026-09-30 실측).
   .note 에 아래 여백이 없어서, 뒤에 간격용 빈 div 를 안 넣은 곳에서는 **다음 카드에 딱 붙었다**
   — 전 화면에서 8군데였다(인사·근로계약2·본사수익표·원가·요청판·보안2). 눈으로는 글자가 맞닿아 보인다.
   여백을 여기서 주고, 이미 뒤에 있던 간격용 빈 div 는 감춘다 — 안 그러면 그쪽이 28px→42px 로 벌어진다.
   (간격용 빈 div 는 전부 자식이 없고 인라인 height 만 있다 — 73개 전수 확인) */
.note{margin-bottom:14px}
.note + .note{margin-top:8px}
.note + div[style*="height"]:empty{display:none}

.empty{padding:48px 20px;text-align:center;color:var(--muted-2)}
.empty-icon{font-size:30px;opacity:.5}
.empty-title{font-weight:700;color:var(--muted);margin-top:8px}

.spinner{width:15px;height:15px;border:2px solid var(--border-2);border-top-color:var(--amber);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;gap:9px;padding:36px;justify-content:center;color:var(--muted)}

/* ───────── 모달 ───────── */
/* ⚠ grid-template-columns 를 반드시 지정한다.
   생략하면 암시적 트랙이 auto(=max-content) 로 커져서, 안에 표(min-width 520px)가 든 모달이
   390px 폰에서 797px 로 벌어진다(실측). width:100% 는 '벌어진 트랙의 100%' 라 소용없다.
   minmax(0,1fr) 로 트랙을 화면 폭에 묶어야 max-width 가 제 일을 한다. */
.modal-back{position:fixed;inset:0;background:rgba(10,10,12,.55);display:grid;
  grid-template-columns:minmax(0,1fr);place-items:center;z-index:200;padding:16px;overflow-y:auto}
.modal{background:var(--surface);border-radius:14px;width:100%;max-width:min(560px,100%);min-width:0;box-shadow:0 24px 70px rgba(0,0,0,.34);max-height:92dvh;display:flex;flex-direction:column;margin:auto}
.modal-lg{max-width:min(900px,100%)}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal-head h3{margin:0;font-size:16px;font-weight:800}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-foot{padding:13px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.x-btn{border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:6px}
.x-btn:hover{background:var(--surface-2);color:var(--text)}

/* ───────── 토스트 ───────── */
#toasts{position:fixed;right:16px;bottom:16px;z-index:400;display:flex;flex-direction:column;gap:8px;max-width:min(90vw,380px)}
.toast{padding:11px 15px;border-radius:9px;background:#1c1c20;color:#f3f1ed;font-size:13px;box-shadow:0 8px 26px rgba(0,0,0,.3);animation:slidein .2s ease}
.toast.err{background:#8f1d16}
.toast.ok{background:#14622f}
@keyframes slidein{from{transform:translateY(8px);opacity:0}}

/* ───────── 사진 ───────── */
.photo-drop{display:block;border:2px dashed var(--border-2);border-radius:10px;padding:22px;text-align:center;cursor:pointer;background:var(--surface-2)}
.photo-drop:hover{border-color:var(--amber);background:#fffdf7}
.photo-drop input{display:none}
.photo-prev{position:relative;display:inline-block;margin:6px 6px 0 0}
.photo-prev img{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.photo-prev button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:#1c1c20;color:#fff;cursor:pointer;font-size:13px;line-height:1}
.thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer;display:block}

/* ───────── 채팅 ───────── */
.chat-layout{display:grid;grid-template-columns:290px 1fr;gap:14px;height:calc(100dvh - 150px);min-height:440px}
.chat-list{overflow-y:auto}
.chat-room{display:flex;flex-direction:column;overflow:hidden}
.chat-item{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.chat-item:hover{background:var(--surface-2)}
.chat-item.on{background:#fff8e8;border-left:3px solid var(--amber);padding-left:11px}
.chat-item-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.chat-item-name{font-weight:800;font-size:13px}
.chat-item-time{font-size:11px;color:var(--muted-2);white-space:nowrap}
.chat-item-last{font-size:12px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-body{flex:1;overflow-y:auto;padding:16px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%;padding:9px 13px;border-radius:13px;font-size:13.5px;white-space:pre-wrap;word-break:break-word;line-height:1.5}
.msg-them{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg-me{align-self:flex-end;background:var(--amber);color:#1a1200;border-bottom-right-radius:4px}
.msg-meta{font-size:10.5px;color:var(--muted-2);margin-bottom:3px;font-weight:700}
.msg img{max-width:100%;border-radius:8px;margin-top:6px;display:block}
.chat-input{display:flex;gap:8px;padding:11px;border-top:1px solid var(--border);background:var(--surface);align-items:flex-end}
.chat-input textarea{flex:1;min-height:40px;max-height:130px;padding:9px 11px;border:1px solid var(--border-2);border-radius:8px;resize:none}
.chat-day{align-self:center;font-size:11px;color:var(--muted-2);background:var(--surface);padding:3px 12px;border-radius:20px;border:1px solid var(--border)}

/* ───────── 진행바 ───────── */
.bar{height:7px;background:var(--border);border-radius:4px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--amber);border-radius:4px}
.bar-ok > i{background:var(--ok)}

/* ───────── 팝업 공지 ───────── */
.popup-card{max-width:440px}
.popup-card img{width:100%;border-radius:8px;display:block;margin-bottom:12px}
.popup-body{white-space:pre-wrap;line-height:1.65;font-size:13.5px}

/* 주소 → 네이버 지도 링크 */
.addr-link{color:var(--text);text-decoration:none;display:inline-flex;align-items:baseline;gap:5px;border-radius:5px}
.addr-link:hover{color:var(--info);text-decoration:underline}
.addr-link:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.addr-pin{font-size:11px;opacity:.45;transition:opacity .12s}
.addr-link:hover .addr-pin{opacity:1}
@media (hover:none){ .addr-pin{opacity:.8} }

.scroll-y{max-height:340px;overflow-y:auto}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.nowrap{white-space:nowrap}
.mt{margin-top:14px}
.mb{margin-bottom:14px}
hr.sep{border:0;border-top:1px solid var(--border);margin:16px 0}

/* ───────── 반응형 ───────── */
@media (max-width: 980px){
  .sidebar{
    position:fixed;left:0;top:0;z-index:100;transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:0 0 40px rgba(0,0,0,.4);
  }
  .sidebar.open{transform:none}
  .topbar{display:flex}
  .content{padding:16px 14px 70px}
  .g4,.g3,.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chat-layout{grid-template-columns:1fr;height:auto}
  .chat-list{max-height:230px}
  .chat-room{height:min(66dvh,540px)}
  .page-title{font-size:18px}
}

/* 새 판 알림 띠 (2026-10-06) — 배포했는데 "안 보인다"가 두 번 있었다.
   ⚠ 아래쪽에 띄운다. 위에 띄우면 휴대폰 상단바·메뉴와 겹친다.
   ⚠ 화면을 가리지 않게 가로로 가운데, 안전영역(노치·홈바) 위에 둔다. */
.update-bar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:200;
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);
  padding:10px 12px 10px 16px;border-radius:999px;
  background:var(--brand);color:#f6f5f2;font-size:13px;font-weight:700;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
}
.update-bar .btn{flex:none}
.update-bar .x-btn{color:#a9a49c;font-size:18px;line-height:1;background:none;border:0;cursor:pointer;padding:2px 6px;min-height:30px}
.update-bar .x-btn:hover{color:#fff}
@media (max-width:420px){ .update-bar{font-size:12px;padding:9px 10px 9px 13px;gap:7px} }

/* ══════════════ 휴대폰 (2026-10-06 대표: "휴대폰으로 보는 화면도 최적화해줘") ══════════════
   아래 세 가지는 **실측해서 나온 것**이다 (scripts/check-mobile.js, 33화면 × 4폭).
   눈으로 보고 고친 것이 아니라 숫자로 나온 것만 고쳤다. */
@media (max-width:640px){
  /* ① 표의 마지막 칸을 오른쪽에 붙여 둔다.
     ⚠ 표는 min-width 520px 이라 390px 폰에서 늘 가로로 밀린다. 실측으로
       인사관리 520px · 계정권한 386px · 원가 282px · 방문점검 262px · 매장관리 245px 가
       화면 밖이었고, **거기에 [수정]·[삭제] 단추가 들어 있었다** — 가로로 밀어야만 눌린다.
       칸을 줄이는 대신 마지막 칸을 붙박이로 둔다. 가로로 밀어도 단추는 늘 보인다.
     ⚠ 배경색을 꼭 줘야 한다. 투명하면 밀려 들어온 글자가 단추 밑으로 비친다. */
  table.tb th:last-child, table.tb td:last-child{
    position:sticky; right:0; z-index:2;
    background:var(--surface);
    box-shadow:-8px 0 8px -8px rgba(0,0,0,.22);
  }
  table.tb thead th:last-child{ background:var(--surface-2); z-index:3 }
  table.tb tbody tr:hover td:last-child{ background:#fcfbf9 }
  /* 색이 깔린 줄은 그 색을 따라간다 — 안 그러면 그 칸만 하얗게 뜬다 */
  .tb tr.row-danger td:last-child{ background:var(--danger-bg) }

  /* ② 작은 단추를 손가락 크기로. 29px 은 폰에서 자꾸 빗나간다(실측 578곳). */
  .btn-sm{ min-height:32px; padding:6px 10px }

  /* ③ 입력칸 글자를 16px 로.
     ⚠ iOS 사파리는 16px **미만**인 칸을 누르면 화면을 확대해 버리고, 다시 줄여주지 않는다.
       출근 사진 올리기·휴가 신청처럼 폰에서 쓰는 화면이 그 순간 통째로 커져 버린다(실측 136곳).
       체크박스·라디오는 글자가 없으므로 뺀다. */
  input:not([type=checkbox]):not([type=radio]), select, textarea{ font-size:16px }
  /* 표 안의 입력칸은 16px 이면 칸을 밀어내므로 높이만 맞춘다 */
  table.tb input:not([type=checkbox]):not([type=radio]), table.tb select{ font-size:16px; padding:4px 6px }
}

@media (max-width: 560px){
  /* ⚠ 1fr 이 아니라 minmax(0,1fr). 1fr 은 최소폭이 내용물이라, 표가 든 카드(결재 대기·발주 대기)가
     화면보다 넓게 늘어나 휴대폰에서 가로로 넘쳤다 (2026-09-18 시연본 점검에서 발견). */
  .g3,.g2,.gauto{grid-template-columns:minmax(0,1fr)}
  /* ⚠ .g5 를 여기 안 넣어 둬서 320px 에서도 5칸으로 버텄다 — 칸폭이 41px 이 되어
     '요기요' 가 한 글자씩 세로로 쪼개졌고(3줄), 금액도 두 줄로 깨졌다 (2026-09-30 실측).
     매출집계의 채널별 타일이 유일한 사용처다. */
  .g5{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* 통계 타일은 폰에서도 2열로 둔다. 1열이면 매장 대시보드가 스크롤만 길어진다. */
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:12px 13px}
  /* ⚠ 17px 이면 '356,700,000원' 이 119px 필요한데 2칸 타일 안쪽이 115px 이라 두 줄로 깨졌다 (실측) */
  .stat-value{font-size:15.5px;letter-spacing:-.04em}
  .stat-value.stat-long{font-size:13.5px}
  .stat-value small{font-size:11px;margin-left:2px}
  .stat-label{font-size:11.5px}
  .stat-note{font-size:11px}
  .content{padding:14px 12px 70px}
  .modal-body{padding:15px}
}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90;display:none}
.backdrop.on{display:block}
@media (min-width: 981px){ .backdrop{display:none !important} }

@media print{
  .sidebar,.topbar,.head-actions,.btn,#toasts{display:none !important}
  .content{padding:0;max-width:none}
  .card{box-shadow:none;border:1px solid #ccc}
  body{background:#fff}
}

/* ═══════ 급여명세서 (인쇄 → PDF 저장) ═══════
   브라우저 인쇄 대화상자에서 "PDF로 저장"을 고르면 파일이 된다.
   메일 발송은 SMTP 계정이 있어야 하므로 여기까지가 키 없이 가능한 범위다. */
.payslip-wrap{position:fixed;inset:0;background:#fff;color:#111;overflow:auto;z-index:300;padding:24px}
.payslip-bar{position:sticky;top:0;background:#fff;padding:8px 0 14px;border-bottom:1px solid #ddd;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.payslip{max-width:760px;margin:0 auto 28px;border:1px solid #bbb;padding:26px 28px;background:#fff}
.payslip h2{margin:0 0 4px;font-size:19px;letter-spacing:-.01em}
.payslip .ps-sub{color:#666;font-size:12px;margin-bottom:16px}
.payslip .ps-who{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;margin-bottom:14px;
  padding:10px 12px;background:#f6f5f2;border-radius:6px}
.payslip table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:14px}
.payslip th,.payslip td{border:1px solid #ddd;padding:6px 9px;text-align:left}
.payslip th{background:#f2f1ee;font-weight:600;width:38%}
.payslip td.n{text-align:right;font-variant-numeric:tabular-nums}
.payslip .ps-net{display:flex;justify-content:space-between;align-items:baseline;
  border-top:2px solid #333;padding-top:10px;margin-top:6px;font-size:17px;font-weight:700}
.payslip .ps-foot{margin-top:18px;font-size:11px;color:#777;line-height:1.6}
@media print{
  body.printing-payslip>*:not(.payslip-wrap){display:none !important}
  .payslip-wrap{position:static;padding:0;overflow:visible}
  .payslip-bar{display:none !important}
  .payslip{border:0;padding:0;margin:0 auto;page-break-after:always;max-width:none}
  .payslip:last-child{page-break-after:auto}
}

/* ═══════ 팀별 사이드바 ═══════
   대표는 팀이 5개라 접을 수 있어야 하고, 팀원은 자기 팀 하나뿐이라 항상 펼쳐 둔다. */
.sb-group-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;padding-right:14px}
.sb-group-btn:hover{color:var(--fg)}
.sb-caret{font-size:10px;opacity:.55;margin-left:6px}
.sb-body{display:flex;flex-direction:column}

/* ═══════ 문의 대화 ═══════ */
.chat-log{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;
  padding:10px;background:var(--panel-2,rgba(255,255,255,.03));border-radius:8px}
.chat-msg{max-width:78%;padding:8px 11px;border-radius:10px}
.chat-msg.me{align-self:flex-end;background:var(--amber-soft,rgba(245,162,0,.14))}
.chat-msg.you{align-self:flex-start;background:var(--panel,rgba(255,255,255,.06))}
.chat-who{font-size:11px;opacity:.6;margin-bottom:3px}
.chat-body{white-space:pre-wrap;line-height:1.55;font-size:13px}

/* ═══════ 사이드바 팀 선택 (대표 전용) ═══════
   대표는 5개 팀이 다 보이는데 원가·수익처럼 세 팀이 같이 쓰는 메뉴가 있어
   그냥 나열하면 같은 항목이 3~4번 반복된다. 기본은 '전체'(중복 제거)로 둔다. */
.sb-teams{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 10px}
.sb-chip{font:inherit;font-size:11px;line-height:1;padding:5px 8px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line,rgba(255,255,255,.14));background:transparent;
  color:var(--muted,rgba(255,255,255,.55));white-space:nowrap}
.sb-chip:hover{color:var(--fg,#fff);border-color:var(--line-2,rgba(255,255,255,.28))}
.sb-chip.on{background:var(--amber,#f5a200);border-color:var(--amber,#f5a200);color:#1a1400;font-weight:700}

/* ═══════ 안 읽은 문의 (카톡식) ═══════ */
.unread-title{color:var(--fg,#fff);font-weight:800}
.unread-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--amber,#f5a200);margin-left:6px;vertical-align:middle}
.sb-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#e5484d;color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center}

/* ── 경리 자동화 화면 (근로계약·지출품의·본사수익표) ── */
/* 폼 입력이 많은 화면용. 좁으면 한 줄로 접힌다. */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:14px 16px}
/* 글칸이 있는 양식은 **세로로 쌓는다** (2026-10-10 대표: "가로로 되어있는걸 세로로").
   가로로 늘어놓으면 하루 업무를 적는 칸이 220px 로 좁아져 두세 줄만 보인다. */
.form-stack{display:flex;flex-direction:column;gap:14px;padding:14px 16px}
.rep-ta{min-height:180px;line-height:1.6;resize:vertical}
/* 지난 기간 할 일 확인 (2026-10-10) — 보고 칸보다 위에 두고 테두리로 구분한다.
   섞여 보이면 "이게 내가 적을 칸인지 확인할 칸인지" 를 모른다. */
.carry-box{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--surface-2)}
.carry-row{padding:8px 0;border-top:1px solid var(--border)}
.carry-row:first-of-type{border-top:0}
.carry-row input[type=checkbox]{width:18px;height:18px;margin:2px 0 0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:14px}
/* 계약서·품의서 본문. 줄바꿈과 공백을 그대로 살려야 서식이 유지된다. */
.doc-pre{white-space:pre-wrap;font-family:ui-monospace,"Menlo","Consolas",monospace;font-size:12.5px;
  line-height:1.75;background:var(--surface-2,#fafafa);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;margin:0;overflow-x:auto}
.render-error{padding:12px}
/* 증빙 판정 색 — 금액 옆에 붙어 한눈에 읽혀야 한다 */
.lv-ok{color:var(--muted)}
.lv-warn{color:#b45309;font-weight:700}
.lv-risk{color:#b91c1c;font-weight:800}
/* 노무사 자료에서 최저임금 미달 행 — 표에서 바로 눈에 띄어야 한다 */
.tb tr.row-danger td{background:var(--danger-bg)}

/* ── SV 방문점검 체크리스트 ──
   표(min-width 520px)로 그리면 390px 폰에서 판정 버튼이 화면 밖으로 나간다.
   SV 는 매장에서 폰으로 35항목을 찍으므로, 항목 하나를 한 덩어리로 쌓는다. */
.chk-list{display:flex;flex-direction:column}
.chk-row{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:11px 16px;border-top:1px solid var(--border);flex-wrap:wrap}
.chk-row:first-child{border-top:0}
.chk-row.done{background:var(--surface-2)}
.chk-row.bad{background:var(--danger-bg)}
.chk-text{display:flex;gap:7px;align-items:baseline;flex:1 1 240px;min-width:0;
  font-size:13.5px;line-height:1.5}
.chk-no{color:var(--muted-2);font-size:11.5px;font-weight:700;flex:none;min-width:18px}
.chk-group{color:var(--muted);font-size:11.5px;font-weight:700;flex:none;white-space:nowrap}
.chk-btns{display:flex;gap:6px;flex:none}
.chk-btns .btn{min-width:52px;min-height:32px}
@media (max-width:520px){
  .chk-row{align-items:flex-start}
  .chk-btns{width:100%}
  .chk-btns .btn{flex:1}
}

/* ═══════ 휴가원 (2026-09-18) ═══════
   종이 휴가원(주식회사 시연프로젝트 양식)과 같은 칸 배치. 신청 창과 인쇄용 문서가 같은 표 틀을 쓴다. */
.lv-sheet{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13.5px}
.lv-sheet th,.lv-sheet td{border:1px solid var(--border-2);padding:8px 10px;vertical-align:middle}
.lv-sheet th{background:var(--surface-2);font-weight:700;width:96px;text-align:center;white-space:nowrap}
.lv-sheet input,.lv-sheet textarea{width:100%;min-width:0;border:1px solid var(--border);border-radius:6px;padding:7px 9px;
  font:inherit;background:var(--surface);color:var(--text)}
.lv-sheet textarea{resize:vertical}
.lv-sheet .lv-center,.lv-center{text-align:center}
.lv-date{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lv-date input{flex:1}
.lv-date span{white-space:nowrap;color:var(--muted);font-size:13px}
.lv-days{font-size:14px}
.lv-types{display:flex;flex-wrap:wrap;gap:8px 16px}
.lv-types label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.lv-types input{width:auto;accent-color:var(--amber)}
.lv-rule{margin-top:8px;font-size:12.5px;color:var(--muted);text-align:center}
.lv-closing{text-align:center;margin-top:16px;line-height:1.9}
.lv-closing p{margin:0}
.lv-company{font-weight:700;margin-top:6px !important}
@media (max-width:560px){
  .lv-sheet th{width:64px;padding:8px 5px;font-size:12.5px}
  .lv-sheet td{padding:7px 6px}
}
/* 인쇄용 문서 — 종이처럼 검은 선 */
.lv-doc{max-width:720px;margin:0 auto 28px;background:#fff;color:#111;border:1px solid #bbb;padding:30px 34px}
.lv-doc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.lv-doc-head h1{font-size:28px;letter-spacing:.6em;font-weight:700;margin:0 0 0 18%;flex:1;text-align:center}
.lv-sign{border-collapse:collapse;font-size:12px}
.lv-sign th,.lv-sign td{border:1px solid #333;text-align:center;padding:3px 8px;min-width:62px}
.lv-sign th{background:#eee;font-weight:600}
.lv-sign td{height:58px;vertical-align:middle}
.lv-sign .lv-sign-label{min-width:0;width:22px;writing-mode:vertical-rl;letter-spacing:.3em;padding:4px}
.lv-stamp{color:#b91c1c;font-size:11px;line-height:1.35}
.lv-stamp b{display:block;font-size:12.5px}
.lv-stamp.no{color:#555}
.lv-doc .lv-sheet th,.lv-doc .lv-sheet td{border-color:#333;color:#111}
.lv-doc .lv-sheet th{background:#f1f1f1;letter-spacing:.15em}
.lv-reason{height:140px;vertical-align:top !important;text-align:center}
.lv-doc .lv-rule{color:#333}
.lv-doc .lv-closing{margin-top:34px;line-height:2.4}
.lv-late{margin-top:14px;font-size:12px;color:#a15c07;text-align:center}
@media (max-width:560px){
  .lv-doc{padding:18px 12px}
  .lv-doc-head h1{margin:0;font-size:22px;letter-spacing:.35em}
}
@media print{
  .lv-doc{border:0;padding:0;max-width:none}
}
.lv-stamp.draft{color:#333}
/* 출근 위치 (사진 찍으면 GPS 자동) */
.geo-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;padding:8px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border)}
.geo-line:empty{display:none}
.geo-ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.geo-bad{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.geo-wait{color:var(--muted)}

/* ═══════ 김비서 (2026-09-19) ═══════ */
.asst-card{display:flex;flex-direction:column;height:calc(100dvh - 210px);min-height:320px;overflow:hidden}
.asst-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface-2)}
.asst-row{display:flex;gap:8px;align-items:flex-start}
.asst-row.me{justify-content:flex-end}
.asst-avatar{flex:0 0 30px;height:30px;border-radius:50%;background:var(--amber);color:#1a1200;font-weight:800;display:grid;place-items:center;font-size:13px}
.asst-bubble{max-width:min(680px,86%);padding:10px 13px;border-radius:14px;line-height:1.6;font-size:13.5px;min-width:0}
.asst-bubble.me{background:var(--brand);color:#f5f4f1;border-bottom-right-radius:4px;white-space:pre-wrap}
.asst-bubble.bot{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.asst-bubble.err{border-color:#e8b8b4;color:var(--danger)}
.asst-list{margin:6px 0 0;padding-left:18px}
.asst-list li{margin:2px 0}
.asst-table{margin-top:8px}
.asst-table .tb{font-size:12.5px}
.asst-table .tb td,.asst-table .tb th{white-space:nowrap}
.asst-actions,.asst-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.asst-chip{border:1px solid var(--border-2);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer;color:var(--text)}
.asst-chip:hover{border-color:var(--amber)}
.asst-chip:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.asst-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--surface)}
.asst-input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--border-2);border-radius:10px;font-size:15px;background:var(--surface)}
.asst-input:focus{outline:2px solid var(--amber);outline-offset:-1px}
.asst-typing{display:inline-flex;gap:4px;padding:4px 2px}
.asst-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted-2);animation:asstDot 1s infinite ease-in-out}
.asst-typing i:nth-child(2){animation-delay:.15s}.asst-typing i:nth-child(3){animation-delay:.3s}
@keyframes asstDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.asst-typing i{animation:none}}
/* 휴대폰: 표가 들어갈 자리를 넓히려고 아바타를 빼고 말풍선을 끝까지 쓴다 */
@media (max-width:560px){.asst-card{height:calc(100dvh - 190px);min-height:320px}.asst-log{padding:10px}.asst-avatar{display:none}.asst-bubble{max-width:100%}.asst-bubble.me{max-width:88%}.asst-row.bot .asst-bubble{flex:1}.asst-form{padding:10px}}

/* ═══════ 감사봇 ═══════ */
.audit-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border);flex-wrap:wrap}
.audit-row:first-child{border-top:0}
.audit-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.audit-dot.ok{background:var(--ok)}.audit-dot.warn{background:#d97706}.audit-dot.bad{background:var(--danger)}
.audit-main{flex:1;min-width:200px}
.audit-tag{font-size:11px;font-weight:700;margin-left:8px;padding:1px 7px;border-radius:999px}
.audit-tag.ok{background:var(--ok-bg);color:var(--ok)}.audit-tag.warn{background:var(--warn-bg);color:var(--warn)}.audit-tag.bad{background:var(--danger-bg);color:var(--danger)}
.audit-log{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.2fr);gap:10px;padding:9px 16px;border-top:1px solid var(--border);font-size:13px;align-items:baseline}
.audit-log:first-child{border-top:0}
@media (max-width:560px){.audit-log{grid-template-columns:44px minmax(0,1fr)}.audit-log span:last-child{grid-column:2}}

/* ═══════ 사내 소통창구 (2026-09-21 카톡식으로 개편) ═══════ */
.talk-log{max-height:320px;min-height:140px;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;background:var(--surface-2)}
.talk-row{position:relative;display:flex;flex-direction:column;gap:3px;max-width:100%}
.talk-row.me{align-items:flex-end}
.talk-who{display:flex;align-items:baseline;gap:6px;font-size:12px;padding-left:2px}
.talk-who b{font-weight:800}
.talk-dept{color:var(--muted-2);font-size:11.5px}
.talk-line{display:flex;align-items:flex-end;gap:6px;max-width:86%}
.talk-row.me .talk-line{flex-direction:row;justify-content:flex-end}
.talk-bubble{background:var(--surface);border:1px solid var(--border);border-radius:14px;border-top-left-radius:4px;padding:8px 12px;min-width:0;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.talk-row.me .talk-bubble{background:var(--amber);border-color:var(--amber);color:#1a1200;border-top-left-radius:14px;border-top-right-radius:4px}
.talk-text{font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.talk-photo{display:block;max-width:100%;max-height:220px;border-radius:9px;margin-top:6px;cursor:zoom-in;object-fit:cover}
.talk-bubble .talk-text + .talk-photo{margin-top:8px}
.talk-side{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto}
.talk-time{color:var(--muted-2);font-size:10.5px;white-space:nowrap}
.talk-ackwrap{display:inline-flex;align-items:center;gap:2px}
.talk-ack{border:1px solid var(--border-2);background:var(--surface);color:var(--muted-2);border-radius:999px;width:20px;height:20px;line-height:1;font-size:11px;cursor:pointer;padding:0;display:grid;place-items:center}
.talk-ack:hover{border-color:var(--ok);color:var(--ok)}
.talk-ack.on{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:800}
.talk-ack-n{font-size:10.5px;color:var(--ok);font-weight:800;min-width:8px}
.talk-del{position:absolute;top:-2px;right:0;border:0;background:none;color:var(--muted-2);font-size:15px;line-height:1;cursor:pointer;padding:2px 4px;opacity:0;transition:opacity .15s}
.talk-row:not(.me) .talk-del{right:auto;left:0}
.talk-row:hover .talk-del,.talk-del:focus-visible{opacity:1}
.talk-empty{color:var(--muted);font-size:13px;text-align:center;padding:18px 0}
.talk-preview{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--border);background:var(--surface)}
.talk-preview img{height:56px;border-radius:7px;object-fit:cover}
.talk-preview-x{border:1px solid var(--border-2);background:var(--surface);border-radius:6px;width:24px;height:24px;cursor:pointer;line-height:1}
.talk-emoji{display:flex;flex-wrap:wrap;gap:3px;padding:8px 12px;border-top:1px solid var(--border);background:var(--surface);max-height:118px;overflow-y:auto}
.talk-emoji-b{border:0;background:none;font-size:19px;line-height:1;padding:3px 5px;border-radius:7px;cursor:pointer}
.talk-emoji-b:hover{background:var(--surface-2)}
.talk-form{display:flex;gap:6px;align-items:center;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface)}
.talk-icon-btn{border:1px solid var(--border-2);background:var(--surface);border-radius:8px;width:34px;height:34px;font-size:16px;line-height:1;cursor:pointer;flex:0 0 auto;display:grid;place-items:center}
.talk-icon-btn:hover{border-color:var(--amber)}
.talk-input{flex:1;min-width:0;padding:8px 11px;border:1px solid var(--border-2);border-radius:8px;font-size:15px;background:var(--surface)}
.talk-input:focus{outline:2px solid var(--amber);outline-offset:-1px}
@media (max-width:560px){
  .talk-log{max-height:260px;padding:10px 12px}
  .talk-line{max-width:94%}
  .talk-del{opacity:.45}
  .talk-emoji-b{font-size:21px;padding:4px 6px}
  .talk-icon-btn{width:38px;height:38px}
}

/* ═══════ 대시보드 캘린더 (2026-09-21) ═══════ */
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-title{font-size:15px;font-weight:800;min-width:96px;text-align:center}
.cal-legend{display:flex;gap:12px;align-items:center;font-size:11.5px;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:4px}
.cal-dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.cal-dot.leave{background:var(--ok)}
.cal-dot.pend{background:var(--warn)}
.cal-dot.task{background:var(--info)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid var(--border);border-top:1px solid var(--border);border-radius:8px;overflow:hidden}
.cal-dow{padding:7px 4px;text-align:center;font-size:11.5px;font-weight:800;color:var(--muted);background:var(--surface-2);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.cal-dow.sun{color:var(--danger)} .cal-dow.sat{color:var(--info)}
.cal-cell{min-height:92px;min-width:0;overflow:hidden;padding:5px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;flex-direction:column;gap:2px}
.cal-cell:hover{background:var(--surface-2)}
.cal-cell.out{background:var(--surface-2)}
.cal-cell.out .cal-num{color:var(--muted-2)}
.cal-num{font-size:12px;font-weight:800;color:var(--text);padding:1px 3px}
.cal-cell.sun .cal-num{color:var(--danger)} .cal-cell.sat .cal-num{color:var(--info)}
.cal-cell.today .cal-num{background:var(--amber);color:#1a1200;border-radius:5px;min-width:20px;text-align:center}
.cal-ev{display:block;width:100%;text-align:left;font-size:11px;font-weight:700;padding:2px 5px;border-radius:5px;border:1px solid transparent;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev.leave{background:var(--ok-bg);color:var(--ok)}
.cal-ev.pend{background:var(--warn-bg);color:var(--warn)}
.cal-ev.task{background:var(--info-bg);color:var(--info)}
.cal-ev.task.late{background:var(--danger-bg);color:var(--danger)}
/* 오픈 일정·팀 스케줄 (2026-10-08) — 휴가·마감과 **다른 색**이어야 한다.
   같은 색이면 "오늘 누가 빠지나" 를 달력에서 못 읽는다. */
.cal-ev.sched{background:var(--accent-soft, rgba(201,162,77,.16)); color:var(--accent, #a9782c)}
/* '나만 보기' 는 테두리를 둬서 남이 못 보는 것임을 적은 사람이 알아보게 */
.cal-ev.sched.mine{border-color:var(--accent, #a9782c); border-style:dashed}
.cal-ev.more{background:var(--surface-2);color:var(--muted);text-align:center}
.cal-ev:hover{border-color:currentColor}
.cal-err{grid-column:1/-1;padding:18px;text-align:center;color:var(--danger);font-size:13px;background:var(--surface)}
.cal-day{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.cal-day-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}
.cal-day-row:last-child{border-bottom:0}
.cal-day-main{flex:1;min-width:0}
@media (max-width:560px){
  .cal-cell{min-height:64px;padding:3px}
  .cal-ev{font-size:0;padding:0;height:6px;border-radius:3px;margin-top:2px}
  .cal-ev.more{display:none}
  .cal-legend{width:100%;justify-content:flex-start}
  .cal-num{font-size:11.5px}
}

/* ═══════ 열이 많은 표 (급여대장 등) — 2026-09-23 ═══════
   ⚠ 기본 표는 width:100% 라 열이 20개면 이름 칸이 50px 까지 눌려 글자가 한 자씩 세로로 쪼개졌다.
     넓은 표는 내용 크기대로 두고 가로로 민다. 첫 열은 붙박이로 둬서 누구 줄인지 늘 보이게 한다. */
table.tb.tb-wide{width:auto;min-width:100%}
table.tb.tb-wide{font-size:12px}
table.tb.tb-wide th,table.tb.tb-wide td{white-space:nowrap;padding:7px 5px}
table.tb.tb-wide th{font-size:11px;padding:6px 5px}
table.tb.tb-wide td:first-child,table.tb.tb-wide th:first-child{
  position:sticky;left:0;z-index:2;background:var(--surface);
  box-shadow:1px 0 0 var(--border);min-width:104px;
}
table.tb.tb-wide thead th:first-child{z-index:3;background:var(--surface-2)}
table.tb.tb-wide tfoot td:first-child{background:var(--surface-2)}
table.tb.tb-wide tbody tr:hover td:first-child{background:#fcfbf9}
table.tb.tb-wide input{min-width:76px;padding:4px 5px;font-size:12px}
/* 스크롤 막대를 늘 보이게 — 맥에서는 숨겨져서 "오른쪽이 잘렸다"고 느낀다 */
.table-wrap.tw-wide{overflow-x:scroll;padding-bottom:2px;scrollbar-width:thin;scrollbar-color:var(--border-2) var(--surface-2)}
.table-wrap.tw-wide::-webkit-scrollbar{height:11px}
.table-wrap.tw-wide::-webkit-scrollbar-track{background:var(--surface-2)}
.table-wrap.tw-wide::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px;border:3px solid var(--surface-2)}
.table-wrap.tw-wide::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}
@media (max-width:560px){
  table.tb.tb-wide th,table.tb.tb-wide td{padding:7px 8px;font-size:12.5px}
  table.tb.tb-wide td:first-child,table.tb.tb-wide th:first-child{min-width:104px}
}
/* 공제 상세 접기 — 좁은 화면에서 급여표가 한 눈에 들어오게 */
table.tb.tb-wide.hide-detail .col-detail{display:none}
/* 인사관리 — 줄 아무 데나 눌러 인사정보 열기 (2026-09-23) */
table.tb tr.row-click{cursor:pointer}
table.tb tr.row-click:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}

/* 대시보드 "확인해야 할 결재" 타일 — 누르면 그 화면으로 간다 (2026-09-29) */
.approval-tile{border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);cursor:pointer;
  height:100%;display:flex;flex-direction:column;justify-content:flex-start;
  font-variant-numeric:tabular-nums;transition:transform .08s ease}
/* 처리할 게 남은 타일 — 색을 덮어써야 한다(.approval-tile 배경이 .btn-amber 를 이긴다) */
.approval-tile.on{background:var(--amber);border-color:var(--amber);color:#1b1206}
.approval-tile.on .small{opacity:.85}
.approval-tile:hover{transform:translateY(-1px)}
.approval-tile:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* 통계 타일을 눌러서 넘어갈 수 있을 때 */
.stat.row-click{cursor:pointer}
.stat.row-click:hover{border-color:var(--amber)}
.stat.row-click:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* 로그인 화면의 회원가입 (2026-09-30) */
.login-link{background:none;border:none;padding:0;color:var(--info);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline}
.login-card select{width:100%;padding:11px 13px;border:1px solid var(--border-2);border-radius:8px;background:var(--surface-2);font:inherit;color:inherit}
.login-consent{margin:16px 0 4px;padding:11px 12px;border:1px solid var(--border-2);border-radius:8px;background:var(--surface-2)}
.login-chk{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;font-weight:600;cursor:pointer;margin:0}
.login-chk input{width:auto;margin:2px 0 0}
.login-consent-body{margin-top:9px;font-size:11.5px;line-height:1.7;color:var(--muted)}
.login-consent-body b{display:block;margin-top:6px;color:inherit}
.login-note{font-size:12.5px;line-height:1.7;color:var(--muted);margin:4px 0 14px}
.login-opt{font-weight:400;color:var(--muted-2)}