/* =========================================================
   소우주 통합 결재 — 화면 스타일

   src/ui/css.html 에서 옮겼다. 앱스스크립트 판은 HTML 안에 <style> 로 넣었지만,
   여기서는 파일 하나로 두고 CloudFront 가 캐시한다.

   글꼴은 CDN 에서 받는다. CSP 허용 목록에 fonts 와 jsdelivr 가 들어 있어야 한다.
   ========================================================= */

/* =========================================================
   소우주 통합 결재 — 화면 스타일
   ========================================================= */
:root{
  /* ── 면 ──
     바탕을 순회색이 아니라 **아주 옅은 남보라**로 둔다. 흰 카드가 뜨는 느낌이
     생기고, 종일 보는 화면에서 눈이 덜 시리다 */
  --bg:#f4f6fb;
  --bg-2:#eef1f9;
  --surface:#ffffff;
  --surface-2:#fafbfe;
  --surface-3:#f1f4fa;

  /* 선 */
  --line:#e7ebf4;
  --line-2:#dae0ee;

  /* 글자 */
  --ink:#141a2b;
  --ink-2:#3b4560;
  /* 흐린 글자도 **읽히는 선까지만** 흐리게.
     유리를 입히고 화면을 찍어 대비를 재 보니 #767f99 는 3.85:1, #9aa3bb 는
     2.43:1 이었다 — 둘 다 WCAG AA(4.5:1) 아래다. 유리 때문이 아니라 원래
     그랬다. 기술로부터 소외된 이웃을 줄이자는 조합의 화면이 정작 눈이
     어두운 분에게 안 읽히면 안 된다 */
  --muted:#5f6880;
  --muted-2:#646d89;

  /*
   * 강조 — 이름을 **역할**로 바꿨다.
   *
   * 예전에는 `--navy` `--teal` 이었는데, 둘 다 내가 지어낸 파랑이었다.
   * 진짜 로고를 받고 보니 색만 바꾸면 이름이 거짓말이 된다 (초록인데 teal).
   * 그래서 이름을 역할로 옮겼다 — 아래 `--sig` `--point` 에서 정의한다.
   */

  /*
   * 아이콘 칸 색 — 숫자 넉 줄을 **자리로 기억하게** 하는 장치다.
   *
   * 다섯 색을 전부 로고 안에서 꺼냈다. 네이비 → 청록 → 초록 → 라임 순으로
   * 로고 띠의 흐름 그대로다. 붉은색 하나만 밖에서 가져왔다 —
   * 경고는 브랜드가 아니라 **뜻**이라, 로고 색으로 칠하면 안 된다.
   *
   * 이름(indigo · violet)은 옛 색에서 온 것이라 지금 색과 안 맞지만,
   * 화면 여러 곳에서 부르는 이름이라 그대로 둔다 — 색은 여기 한 곳에서만 바뀐다.
   */
  --ic-indigo:#27365f;  --ic-indigo-bg:#e8eaf0;   /* 딥네이비 */
  --ic-sky:#0d84a3;     --ic-sky-bg:#e0f1f7;      /* 로고 위쪽 청록 */
  --ic-mint:#0f9a7d;    --ic-mint-bg:#e0f4ee;     /* 로고 가운데 초록 */
  --ic-violet:#5f9b2e;  --ic-violet-bg:#eef5e0;   /* 로고 아래 라임 */
  --ic-rose:#c4453a;    --ic-rose-bg:#fdeceb;     /* 경고 — 로고 밖 */

  /* 상태 */
  --ok:#12805a;      --ok-bg:#e6f6ef;
  --warn:#8a6212;    --warn-bg:#fdf4e4;
  --bad:#c0392c;     --bad-bg:#fdeeec;
  --idle:#6b7590;    --idle-bg:#eef1f7;

  --r-sm:9px; --r-md:13px; --r-lg:18px;
  --sh-1:0 1px 2px rgba(24,32,56,.04), 0 1px 3px rgba(24,32,56,.03);
  --sh-2:0 2px 4px rgba(24,32,56,.04), 0 12px 28px -12px rgba(24,32,56,.14);
  --sh-pop:0 24px 64px -14px rgba(24,32,56,.28);
  --ease:180ms cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/*
 * 글꼴 순서에는 이유가 있다.
 *
 * Pretendard 가 안 실렸을 때 **어디로 떨어지느냐**가 화면의 인상을 정한다.
 * 예전에는 `-apple-system` 다음이 바로 맑은 고딕이었다. 맑은 고딕은 글자가
 * 굵고 자간이 넓어서, 같은 화면인데 유독 투박해 보인다.
 *
 * 그래서 사이에 두 개를 넣었다 — 맥의 애플 산돌고딕 네오, 그리고 안드로이드와
 * 리눅스에 흔한 본고딕(Noto Sans KR). 맑은 고딕은 **마지막 보루**로 내렸다.
 */
body{
  font-family:"Pretendard Variable",Pretendard,
    -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",
    "Noto Sans KR","Noto Sans CJK KR","Segoe UI",Roboto,
    "Malgun Gothic","맑은 고딕",sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.65; letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 0;
  /* 한글은 낱말 사이가 아니라 **뜻 단위**로 끊어야 읽힌다.
     긴 문장이 "만료됐거" / "나" 로 쪼개지는 것을 막는다 */
  word-break:keep-all;
  overflow-wrap:break-word;
}
a{color:var(--point); text-decoration:none; border-bottom:1px solid rgba(15,125,140,.28)}
a:hover{border-bottom-color:var(--point)}
button{font-family:inherit; letter-spacing:inherit}
:focus-visible{outline:2px solid rgba(18,58,92,.45); outline-offset:2px}
.num,.amt,td.num,.tile .v,table.items input.n{font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums}

/* ---------- 상단 바 ---------- */
.top{
  position:sticky; top:0; z-index:40;
  /* 불투명하게 둔다 — 아래 유리 규칙에서 왜 그런지 적어 두었다 */
  background:#f6f8fb;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 24px; height:60px;
}
/* 로고 + 기관 이름 = 첫 화면으로 가는 단추.
   생김새는 그대로 두되 **눌리는 것**으로 만든다 — 누르면 바탕이 살짝 들어간다.
   왼쪽 여백을 음수로 당겨, 단추가 됐다고 로고가 안쪽으로 밀리지 않게 한다 */
.tophome{
  appearance:none; -webkit-appearance:none; font:inherit; color:inherit;
  background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:5px 9px; margin-left:-9px; border-radius:11px;
}
.tophome:hover{ background:var(--surface-2) }
.tophome:active{ background:var(--surface-3) }

.top .mark{
  /* 네모 안에 글자를 넣지 않는다. 로고를 그대로 둔다 —
     기관 표시를 우리가 다시 그리면 안 된다 */
  flex:0 0 auto; display:flex; align-items:center;
}
.top .mark .mark-logo{width:26px; height:auto; display:block}

/* 상단 바 왼쪽 — 지금 어디인지. 아래로 한참 내려 읽으면 화면 제목이 밖으로
   나가 버려서, 이 자리가 그 구실을 한다. 좁은 화면에서는 날짜를 접는다 */
.topwhere{display:flex; align-items:baseline; gap:10px; min-width:0}
.topwhere .tw-here{
  font-size:14px; font-weight:650; letter-spacing:-.015em; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topwhere .tw-day{font-size:12px; color:var(--muted-2); white-space:nowrap}
/* 시계는 숫자가 바뀌어도 자리가 안 흔들리게 고정폭 숫자를 쓴다 */
.topwhere .tw-clock{
  font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}
@media (max-width:1100px){ .topwhere .tw-day{display:none} }
@media (max-width:700px){ .topwhere{display:none} }
.top .brand{display:flex; flex-direction:column; justify-content:center; min-width:0}
.top .brand b{font-weight:650; font-size:15px; letter-spacing:-.015em; white-space:nowrap}
.top .brand small{
  font-size:11.5px; color:var(--muted); letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:-2px;
}
.top .spacer{flex:1}
.top .who{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2)}
.top .who .me{
  display:flex; align-items:center; gap:8px;
  background:none; border:0; padding:4px 6px; margin:0; border-radius:var(--r-sm);
  font:inherit; color:inherit; cursor:pointer;
}
.top .who .me:hover{ background:var(--surface-2) }
.top .who .avatar{
  width:26px; height:26px; border-radius:50%; background:var(--surface-3);
  border:1px solid var(--line-2); color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:650;
}
.top .who .sub{color:var(--muted); font-size:12px}
.top .who select{
  background:var(--surface); color:var(--ink); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:6px 10px; font-size:12.5px; box-shadow:var(--sh-1);
}

/* ---------- 레이아웃 ---------- */
.wrap{display:flex; align-items:flex-start; gap:26px; max-width:1300px; margin:26px auto 60px; padding:0 24px}
nav.side{width:222px; flex:0 0 222px; position:sticky; top:86px}
nav.side button{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:9px 12px; border-radius:var(--r-sm); color:var(--ink-2);
  font-size:13.5px; font-weight:500; letter-spacing:-.008em; transition:background var(--ease), color var(--ease);
}
nav.side button:hover{background:rgba(18,58,92,.055); color:var(--ink)}
nav.side button.on{background:var(--surface); color:var(--ink); font-weight:650; box-shadow:var(--sh-1)}
nav.side button.on::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--sig);
}
nav.side button .badge{
  background:var(--bad); color:#fff; border-radius:999px; font-size:10.5px; font-weight:700;
  min-width:19px; height:19px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center;
}
nav.side .sep{height:1px; background:var(--line); margin:12px 6px}

/* 묶음 제목 — 읽으라고 두는 글이 아니라 눈이 쉬어 가는 자리다. 작고 조용하게 */
nav.side .navgroup{
  font-size:10.5px; font-weight:700; color:var(--muted-2);
  letter-spacing:.06em; padding:0 12px; margin:16px 0 5px;
  text-transform:none;
}
nav.side .navgroup:first-of-type{margin-top:12px}

/* "이건 나만 보인다" 를 드러낸다 — 무엇을 남에게 보여도 되는지 헷갈리지 않게 */
nav.side button .only{
  margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.02em;
  color:var(--muted-2); background:var(--surface-3); border:1px solid var(--line);
  border-radius:5px; padding:1px 5px; line-height:1.5;
}
nav.side button.on .only{color:var(--ink-2); background:var(--surface-3)}
nav.side button .badge{margin-left:auto}
nav.side button .only + .badge{margin-left:6px}

/* 휴대폰에서만 나오는 접기 단추 */
nav.side .navtoggle{display:none}
nav.side .newbtn{
  justify-content:center; font-weight:650; font-size:13.5px;
  background:var(--sig); color:#fff; padding:11px 12px; border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(13,43,69,.28);
}
nav.side .navhead{margin-bottom:14px}
nav.side .newbtn .short{display:none}
nav.side .newbtn:hover{background:var(--sig-2); color:#fff}
nav.side .newbtn.on::before{display:none}
main{flex:1; min-width:0}

/* ---------- 카드 ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); margin-bottom:18px; overflow:hidden;
}
.card > h2{
  margin:0; padding:15px 20px; border-bottom:1px solid var(--line);
  font-size:14.5px; font-weight:650; letter-spacing:-.015em;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.card > h2 .sub{
  font-size:12px; font-weight:500; color:var(--muted);
  background:var(--surface-3); border-radius:999px; padding:2px 9px; letter-spacing:0;
}
.card > h2 .right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.card .body{padding:20px}
/*
 * 표가 든 몸통. **좁아지면 줄이지 않고 좌우로 민다.**
 * 그대로 눌리면 "김이사장" 이 한 글자씩 세로로 쪼개진다 — 실제로 급여대장에서 그랬다.
 */
.card .body.tight{padding:0; overflow-x:auto; -webkit-overflow-scrolling:touch}

/*
 * 카드 맨 아래 줄 — 여기서 무언가를 하고 끝낸다.
 * 단추와 안내를 한 줄에 두되, 안내는 남는 자리를 쓴다.
 */
.card .foot{
  display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
  padding:14px 20px; border-top:1px solid var(--line); background:var(--surface-2);
}
.card .foot .hint{flex:1 1 240px; min-width:0; font-size:12px; color:var(--muted); line-height:1.55}
.card .foot button{
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  border-radius:var(--r-sm); padding:9px 16px; font-size:13px; font-weight:650;
  letter-spacing:-.01em; cursor:pointer; box-shadow:var(--sh-1); white-space:nowrap;
}
.card .foot button:hover{border-color:#c7d0da; background:#fff}
.card .foot button.primary{
  background:var(--sig); color:#fff; border-color:var(--sig);
  box-shadow:0 1px 2px rgba(13,43,69,.28);
}
.card .foot button.primary:hover{background:var(--sig-2)}
.card .foot button[disabled]{opacity:.55; cursor:default}

/* ---------- 지표 타일 ---------- */
/* `minmax(186px,1fr)` 의 최소값은 **칸 너비의 하한**이다. 화면이 좁으면
   격자가 화면 밖으로 넘친다 — 휴대폰에서 27px 가 잘려 나갔다.
   `min()` 으로 "186px 이되 화면을 넘지 않게" 로 적는다 */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(186px,100%),1fr)); gap:12px; margin-bottom:18px}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:15px 17px; box-shadow:var(--sh-1); transition:box-shadow var(--ease), transform var(--ease);
}
.tile:hover{box-shadow:var(--sh-2); transform:translateY(-1px)}
.tile .k{font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.01em}
.tile .v{font-size:25px; font-weight:680; letter-spacing:-.03em; margin-top:3px; line-height:1.2}
.tile .v small{font-size:12.5px; font-weight:600; color:var(--muted); margin-left:3px; letter-spacing:0}
.tile.hot{background:linear-gradient(180deg,#fffaf9,#fff); border-color:#f2d5d1}
.tile.hot .k{color:var(--bad)}
.tile.hot .v{color:var(--bad)}
/* 내 차례 — 잘못된 것이 아니라 할 일이다. 붉게 하지 않는다 */
.tile.due{border-color:#c9d7e4; background:linear-gradient(180deg,#f7fafd,var(--surface))}
.tile.due .k{color:var(--sig)}
.tile.due .v{color:var(--sig)}

/* 0 은 조용히 — 큰 숫자가 줄줄이 0 이면 정작 봐야 할 값이 묻힌다 */
.tile.dim .v{color:var(--muted-2); font-weight:600}
.tile.dim .v small{color:var(--muted-2)}
.tile .v .none{font-size:15px; font-weight:550; color:var(--muted-2); letter-spacing:-.01em}

/* ---------- 표 ---------- */
table.grid{width:100%; border-collapse:separate; border-spacing:0; font-size:13px}
table.grid th{
  background:var(--surface-2); color:var(--muted); font-weight:600; font-size:11.5px;
  letter-spacing:.02em; padding:9px 14px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
table.grid td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid tbody tr{cursor:pointer; transition:background var(--ease)}
table.grid tbody tr:hover{background:var(--surface-2)}
table.grid tfoot th{background:var(--surface-2); color:var(--ink); font-size:12.5px; border-top:1px solid var(--line-2); border-bottom:0}
table.grid td.num,table.grid th.r,table.grid tfoot th.r{text-align:right; white-space:nowrap}
table.grid td.over{color:var(--bad); font-weight:650}
table.grid td.hint-cell{color:var(--muted); font-size:12.5px}
table.grid tbody tr.static{cursor:default}
table.grid tbody tr.static:hover{background:transparent}
table.grid td.ctr{text-align:center; white-space:nowrap}
table.grid td.no{font-size:12px; color:var(--muted); white-space:nowrap; letter-spacing:-.01em}
table.grid td.ttl{font-weight:600; color:var(--ink); letter-spacing:-.012em}
/*
 * 한국어는 글자 단위로 쪼개면 못 읽는다. "공통(기관운영)" 이 세 줄이 되던 일이 있었다.
 * 낱말 단위로만 줄을 바꾸고, 넘치면 표를 좌우로 민다.
 */
table.grid td,table.grid th{word-break:keep-all; overflow-wrap:normal}
table.grid td.ttl,table.grid td.no,table.grid td.ctr{white-space:nowrap}
table.grid td.ttl{min-width:88px}
/* 긴 글이 든 칸 — 줄이지 않으면 뒤 칸을 화면 밖으로 밀어낸다.
   전체 글은 title 로 뜬다 */
table.grid td.clip{max-width:30rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
@media (max-width:1100px){ table.grid td.clip{max-width:18rem} }
/* 뜻 없는 아이콘 자리를 두지 않는다. 글로만 말한다 */
.empty{
  padding:40px 20px; text-align:center; color:var(--muted); font-size:13px; line-height:1.7;
}

/* ---------- 상태 배지 ---------- */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 8px;
  border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap;
  letter-spacing:-.005em; border:1px solid transparent;
}
.chip::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.75}
.chip.임시저장{background:var(--idle-bg); color:var(--idle)}
.chip.상신,.chip.검토중{background:var(--warn-bg); color:var(--warn)}
.chip.승인{background:var(--ok-bg); color:var(--ok)}
.chip.정산완료{background:var(--point-soft); color:var(--point)}
.chip.반려{background:var(--bad-bg); color:var(--bad)}
.chip.회수{background:var(--idle-bg); color:var(--idle)}
.chip.type{
  background:var(--surface); color:var(--ink-2); border-color:var(--line-2);
  font-weight:600; font-size:11px;
}
.chip.type::before{display:none}

/* ---------- 버튼 ---------- */
.btn{
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  border-radius:var(--r-sm); padding:8px 14px; font-size:13px; font-weight:600;
  letter-spacing:-.01em; cursor:pointer; box-shadow:var(--sh-1);
  transition:background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn:hover{background:var(--surface-2); border-color:#cdd5df}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--sig); border-color:var(--sig); color:#fff}
.btn.pri:hover{background:var(--sig-2); border-color:var(--sig-2)}
.btn.ok{background:var(--ok); border-color:var(--ok); color:#fff}
.btn.ok:hover{background:#166540; border-color:#166540}
.btn.bad{background:var(--surface); border-color:#e6c3be; color:var(--bad)}
.btn.bad:hover{background:var(--bad-bg)}
.btn.sm{padding:6px 11px; font-size:12.5px}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btnrow{display:flex; flex-wrap:wrap; gap:8px}
.btnrow.mt{margin-top:10px}
.btnrow.end{margin-top:24px; justify-content:flex-end}

/* 목록 필터 */
.fsel,.fkw{
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  border-radius:var(--r-sm); padding:6px 10px; font-size:12.5px; font-family:inherit;
  box-shadow:var(--sh-1);
}
.fsel{font-weight:600}
/* ⚠ 검색칸은 **안내 글귀가 다 보일 만큼** 넓어야 한다.
   "문서번호 · 제목 · 기안자 · 결재 의견" · "이름 · 접수번호 · 용도 · 연락처 뒷자리" 처럼
   무엇으로 찾을 수 있는지를 그 안에 적어 두었는데, 칸이 좁으면 뒤가 잘려 나가
   정작 알려 주려던 것이 안 보인다. 190px 로 두었더니 절반이 잘렸다.
   남는 자리를 채우되(`flex:1`), 한 줄이 통째로 늘어나 보이지 않게 위는 막는다 */
.fkw{flex:1 1 340px; min-width:260px; max-width:560px; font-weight:400}
.fdate{
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  border-radius:var(--r-sm); padding:6px 10px; font-size:12.5px; font-family:inherit; box-shadow:var(--sh-1);
}
.fdate:focus{outline:none; border-color:var(--point); box-shadow:0 0 0 3px rgba(15,125,140,.12)}
.fkw::placeholder{color:var(--muted-2)}
.fsel:focus,.fkw:focus{outline:none; border-color:var(--point); box-shadow:0 0 0 3px rgba(15,125,140,.12)}

/* ---------- 문서 종류 선택 ---------- */
.typegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); gap:12px}
.typecard{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:17px 18px; box-shadow:var(--sh-1);
  transition:border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.typecard:hover{border-color:#c3ced9; box-shadow:var(--sh-2); transform:translateY(-1px)}
.typecard .tc-top{display:flex; align-items:center; gap:9px; margin-bottom:6px}
.typecard .tc-mark{
  width:24px; height:24px; border-radius:7px; flex:0 0 24px;
  background:var(--point-soft); color:var(--point);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.typecard .tc-name{font-size:14.5px; font-weight:650; letter-spacing:-.018em; color:var(--ink)}
.typecard .tc-desc{font-size:12.5px; color:var(--muted); font-weight:400; line-height:1.55}

/* ---------- 폼 ---------- */
/*
 * 폼. 두 칸으로 두되 구역마다 제목을 끼운다.
 * 스무 칸이 한 덩어리로 늘어서면 어디까지가 한 묶음인지 알 수 없다.
 */
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:15px 20px}

/* 경고 목록 — 한 상자 안에 여러 가지를 담을 때 */
.notice ul.warnlist{margin:8px 0 0; padding-left:18px; display:grid; gap:7px}
.notice ul.warnlist li{line-height:1.6}
.notice ul.warnlist .hint{color:inherit; opacity:.72; font-size:12px}

/* 구역 제목 — 가는 선과 함께 한 줄을 온전히 쓴다 */
.fsec{
  grid-column:1/-1; display:flex; align-items:center; gap:12px;
  margin:10px 0 -2px; color:var(--ink-2);
  font-size:12px; font-weight:700; letter-spacing:-.005em;
}
.fsec:first-child{margin-top:0}
.fsec::after{content:""; flex:1; height:1px; background:var(--line)}
.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.fld.wide{grid-column:1/-1}
.fld label{font-size:12.5px; font-weight:650; color:var(--ink-2); letter-spacing:-.008em}
.fld label .req{color:var(--bad); margin-left:3px}
.fld .hint{font-size:11.5px; color:var(--muted); line-height:1.5}
/* 날짜 · 월처럼 좁아도 되는 칸이 폭을 다 먹지 않게 */
.fld input[type=date],.fld input[type=month],.fld input[type=number]{max-width:280px}
.fld input,.fld select,.fld textarea{
  width:100%; border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:9px 12px; font-size:13.5px; font-family:inherit; letter-spacing:-.005em;
  background:var(--surface); color:var(--ink);
  transition:border-color var(--ease), box-shadow var(--ease);
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted-2)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:#cdd5df}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:var(--point); box-shadow:0 0 0 3px rgba(15,125,140,.12);
}
.fld textarea{resize:vertical; line-height:1.72; min-height:64px}
.fld input[type=file]{padding:8px 10px; font-size:12.5px; background:var(--surface-2)}

/* 설정 목록에서 그 자리에 고치는 칸. 표 안에 들어가므로 `.fld` 보다 낮게 눕힌다 */
.settbl td{vertical-align:top}
/* 켜고 끄는 설정 — 스위치.
   `Y` · `N` 을 고르는 목록은 글자를 읽어야 알지만, 스위치는 보면 안다 */
.swi{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  user-select:none; -webkit-user-select:none;
}
/* 진짜 체크칸은 숨기지 않고 **투명하게 겹쳐 둔다** — 화면 낭독기와
   키보드(Tab · Space)가 그대로 닿아야 한다 */
.swi input{
  position:absolute; width:46px; height:26px; margin:0; opacity:0; cursor:pointer;
}
.swi .swt{
  flex:0 0 auto; position:relative; width:46px; height:26px; border-radius:999px;
  background:var(--line); transition:background var(--ease);
}
.swi .swt::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(23,34,71,.28);
  transition:transform var(--ease);
}
.swi input:checked + .swt{ background:var(--point-2) }
.swi input:checked + .swt::after{ transform:translateX(20px) }
.swi input:focus-visible + .swt{ outline:2px solid var(--sig); outline-offset:2px }
.swi input:disabled + .swt{ opacity:.5; cursor:default }
.swi .swl{
  font-size:12.5px; font-weight:600; color:var(--muted); letter-spacing:-.01em;
  min-width:18px;
}
.swi input:checked ~ .swl{ color:var(--point) }

.settbl .setin{
  width:100%; max-width:360px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:7px 10px; font-size:13px; font-family:inherit; letter-spacing:-.005em;
  background:var(--surface); color:var(--ink);
  transition:border-color var(--ease), box-shadow var(--ease);
}
.settbl .setin::placeholder{color:var(--muted-2)}
.settbl .setin:hover{border-color:#cdd5df}
.settbl .setin:focus{
  outline:none; border-color:var(--point); box-shadow:0 0 0 3px rgba(15,125,140,.12);
}
.settbl textarea.setin{resize:vertical; line-height:1.7}
.settbl .hint{margin-top:4px}

/* 두 칸씩 늘어놓는 입력 줄 — 회차기록처럼 한 줄을 여러 칸으로 적는 곳 */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.grid2 .fld.wide{grid-column:1 / -1}
@media (max-width:560px){ .grid2{grid-template-columns:1fr} }

/* 칸 옆에 ＋ 단추 — 거래처를 그 자리에서 등록한다 */
.withadd{display:flex; gap:6px; align-items:center}
.withadd > input{flex:1 1 auto; min-width:0}
.withadd > .btn{flex:0 0 auto; white-space:nowrap}

/* 모달 안에서 급히 넣는 칸 — 기준자료 표의 열넷이 아니라 꼭 필요한 여섯만 */
.quickadd{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
@media (max-width:560px){ .quickadd{grid-template-columns:1fr} }
/* 아직 안 넣은 설정 — 이름만 한 칸 옅게. 칸까지 옅게 하면 못 넣는 것처럼 보인다 */
.settbl tr.blank td:first-child b{color:var(--ink-2)}
.filelist{list-style:none; font-size:12.5px; margin:6px 0 0; padding:0}
.filelist li{
  display:flex; align-items:center; gap:8px; padding:6px 10px; margin-top:5px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink-2);
}

/* 내역 표 */
table.items{width:100%; border-collapse:separate; border-spacing:0; font-size:13px; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
table.items th{
  background:var(--surface-2); font-size:11.5px; color:var(--muted); font-weight:600;
  letter-spacing:.02em; padding:8px 10px; text-align:left; border-bottom:1px solid var(--line);
}
table.items td{padding:5px 6px; border-bottom:1px solid var(--line)}
table.items tbody tr:last-child td{border-bottom:0}
/* 테두리를 아예 없애면 **입력칸이 있는지조차 안 보인다.** 실제로 그랬다.
   옅게라도 남겨 두고, 손이 닿으면 진해진다 */
table.items input{
  width:100%; border:1px solid var(--line); border-radius:6px; padding:6px 8px;
  font-size:13px; font-family:inherit; background:var(--surface); color:var(--ink);
  transition:background var(--ease), border-color var(--ease);
}
table.items input::placeholder{color:var(--muted-2); opacity:.55}
table.items input:hover{border-color:var(--line-2); background:var(--surface-2)}
table.items input:focus{outline:none; background:var(--surface); border-color:var(--point); box-shadow:0 0 0 2px rgba(15,125,140,.12)}
table.items input.n{text-align:right}
table.items td.del{width:36px; text-align:center}
table.items td.del button{
  border:0; background:transparent; color:var(--muted-2); cursor:pointer;
  font-size:16px; line-height:1; width:24px; height:24px; border-radius:6px;
  transition:background var(--ease), color var(--ease);
}
table.items td.del button:hover{background:var(--bad-bg); color:var(--bad)}
table.items select{
  /* 고르는 칸이 눌리면 "가결" 이 "기 ▾" 로 보인다. 최소 폭을 준다 */
  width:100%; min-width:5.5rem;
  border:1px solid var(--line); border-radius:6px; padding:5px 6px;
  font-size:13px; font-family:inherit; background:var(--surface); color:var(--ink);
}
/* 규정 단가로 자동 계산되는 줄 — 고칠 수 있는 것처럼 보이면 안 된다.
   고쳐 봐야 저장할 때 서버가 다시 만든다 */
table.items tr.auto td{background:var(--surface-2)}
table.items tr.auto input{background:transparent; border-color:transparent; color:var(--muted); cursor:default}
table.items tr.auto input:hover{background:transparent; border-color:transparent}
/* 카드가 지금 어디 있나 — 대장 위에 큼직하게. 자주 묻는 것이 여기 있어야 한다 */
.cardnows{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.cardnow{
  border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px;
  background:var(--surface-2); display:flex; flex-direction:column; gap:3px;
}
.cardnow.out{border-color:var(--warn); background:var(--warn-bg)}
.cardnow .k{font-size:12px; color:var(--muted); font-weight:600}
.cardnow .v{font-size:15px; font-weight:700; letter-spacing:-.01em}
.cardnow .hint.bad{color:var(--bad)}
.cardnow button{margin-top:7px; align-self:flex-start}
.cardask{margin-top:8px; display:flex; flex-direction:column; gap:7px}
.cardask input{
  width:100%; border:1px solid var(--line); border-radius:6px; padding:7px 9px;
  font-size:13px; font-family:inherit; background:var(--surface); color:var(--ink);
}
.cardask .btnrow{margin:0; gap:6px}

.lockmark{
  display:inline-block; font-size:10.5px; color:var(--muted-2); letter-spacing:.02em;
  border:1px solid var(--line); border-radius:4px; padding:1px 4px; white-space:nowrap;
}

.sumbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2); border-radius:var(--r-md); padding:14px 18px; margin-top:14px;
}
.sumbar .k{font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.01em}
.sumbar .amt{font-size:22px; font-weight:680; letter-spacing:-.03em; line-height:1.25}
.sumbar .ko{font-size:12.5px; color:var(--muted); text-align:right; line-height:1.7}

/* 알림 박스 */
.notice,.errbox{border-radius:var(--r-md); padding:13px 16px; font-size:12.8px; margin-bottom:16px; line-height:1.65}
.notice{background:var(--warn-bg); border:1px solid #f0e0bd; color:#75500c}
/* 이미 벌어진 일 — 곧 벌어질 일과 같은 색이면 어느 쪽이 급한지 알 수 없다 */
.notice.urgent{background:var(--bad-bg); border-color:#f0cdc8; color:#8f2418}
.notice.urgent .chip{background:#fff; border:1px solid #f0cdc8; color:#8f2418}
.errbox{background:var(--bad-bg); border:1px solid #f0cdc8; color:var(--bad)}
.notice b,.errbox b{font-weight:650}
.notice ul,.errbox ul{margin:6px 0 0; padding-left:18px}
.notice li,.errbox li{margin:2px 0}

/* ---------- 결재선 ---------- */
.flow{display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; margin-bottom:20px}
.flow .step{
  border:1px solid var(--line); border-radius:var(--r-md); padding:10px 14px;
  min-width:124px; background:var(--surface); box-shadow:var(--sh-1);
}
.flow .step .r{font-size:10.5px; color:var(--muted); font-weight:650; letter-spacing:.02em}
.flow .step .n{font-weight:650; font-size:13.5px; letter-spacing:-.015em; margin-top:1px}
.flow .step .s{font-size:11.5px; margin-top:2px; color:var(--muted)}
.flow .step .proxy{
  display:inline-block; background:var(--bad-bg); color:var(--bad);
  border-radius:4px; padding:0 4px; font-size:10px; font-weight:700; letter-spacing:0;
}
.flow .step .orig{font-size:10.5px; color:var(--muted-2); margin-top:1px}
.flow .step.승인{border-color:#c9e5d6; background:linear-gradient(180deg,#f6fbf8,#fff)}
.flow .step.승인 .s{color:var(--ok); font-weight:650}
.flow .step.반려{border-color:#f0cdc8; background:linear-gradient(180deg,#fffaf9,#fff)}
.flow .step.반려 .s{color:var(--bad); font-weight:650}
.flow .step.now{border-color:var(--point); box-shadow:0 0 0 3px rgba(15,125,140,.11)}
.flow .step.now .s{color:var(--point); font-weight:650}
.flow .arw{align-self:center; color:var(--muted-2); font-size:15px}

/* ---------- 모달 ---------- */
.mask{
  position:fixed; inset:0; z-index:60; overflow:auto;
  background:rgba(21,26,33,.42); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; padding:40px 18px;
  animation:fade 160ms ease-out;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface); border-radius:16px; width:100%; max-width:900px;
  box-shadow:var(--sh-pop); animation:rise 200ms cubic-bezier(.2,.7,.2,1);
}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.modal .mh{display:flex; align-items:flex-start; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line)}
.modal .mh .t{font-size:16px; font-weight:680; letter-spacing:-.02em; flex:1; min-width:0; line-height:1.4}
.modal .mh .t small{display:block; font-size:12px; color:var(--muted); font-weight:400; letter-spacing:-.005em; margin-top:1px}
.modal .mh .x{
  border:0; background:transparent; font-size:20px; color:var(--muted); cursor:pointer;
  line-height:1; width:30px; height:30px; border-radius:8px; flex:0 0 30px;
  transition:background var(--ease), color var(--ease);
}
.modal .mh .x:hover{background:var(--surface-3); color:var(--ink)}
.modal .mb{padding:20px 22px}
.modal .mf{
  padding:15px 22px; border-top:1px solid var(--line); background:var(--surface-2);
  border-radius:0 0 16px 16px; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;
}

dl.kv{
  display:grid; grid-template-columns:132px 1fr; gap:0; margin:0; font-size:13.5px;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
}
dl.kv dt{
  padding:10px 14px; background:var(--surface-2); color:var(--muted);
  font-weight:600; font-size:12.5px; border-bottom:1px solid var(--line); letter-spacing:-.005em;
}
dl.kv dd{
  padding:10px 14px; margin:0; border-bottom:1px solid var(--line);
  white-space:pre-wrap; word-break:break-word; line-height:1.68;
}
dl.kv dt:last-of-type,dl.kv dd:last-of-type{border-bottom:0}
.subttl{
  font-size:12px; font-weight:650; color:var(--muted); letter-spacing:.03em;
  margin:22px 0 9px; display:flex; align-items:center; gap:9px;
}
.subttl::after{content:""; flex:1; height:1px; background:var(--line)}
.modal .mb table.grid{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}

/* ---------- 토스트 · 로딩 ---------- */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:90;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px;
  font-size:13.5px; font-weight:600; letter-spacing:-.01em; max-width:min(560px,90vw);
  box-shadow:0 14px 40px -10px rgba(16,24,40,.5); animation:rise 200ms cubic-bezier(.2,.7,.2,1);
  white-space:pre-wrap;
}
.toast.bad{background:var(--bad)}
.loading{padding:48px 20px; text-align:center; color:var(--muted); font-size:13px}
.loading::before{
  content:""; display:block; width:20px; height:20px; margin:0 auto 14px;
  border:2px solid var(--line-2); border-top-color:var(--sig); border-radius:50%;
  animation:spin 700ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* 화면이 안 뜰 때 (js/boot.js). 도는 동그라미를 멈추고 무엇이 잘못됐는지 적는다 —
   영영 도는 동그라미는 "기다리면 되나 보다" 로 읽혀서 더 오래 붙잡아 둔다 */
.loading.bad{color:var(--ink); line-height:1.7; max-width:520px; margin:0 auto}
.loading.bad::before{display:none}
.loading.bad b{display:block; margin-bottom:6px; font-size:14px}
.loading.bad div{color:var(--muted); word-break:break-all; margin-bottom:14px}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  /* 세로로 쌓일 때 .wrap 의 align-items:flex-start 때문에 본문이 내용 폭까지 늘어나는 것을 막는다 */
  .wrap{flex-direction:column; gap:16px; margin:16px auto 40px; padding:0 16px; align-items:stretch}
  main{width:100%; min-width:0; align-self:stretch}
  nav.side{width:100%; flex:none; position:static; display:flex; flex-wrap:wrap; gap:6px; align-self:stretch}
  nav.side button{width:auto; padding:8px 13px}
  nav.side button.on::before{display:none}
  nav.side .newbtn{width:100%; margin-bottom:4px}
  nav.side .sep{display:none}
  .formgrid{grid-template-columns:1fr; gap:14px}
  dl.kv{grid-template-columns:104px 1fr; font-size:13px}
  .top{padding:0 16px; gap:10px}
  .top .brand small{display:none}
  .tile .v{font-size:22px}
  .modal .mb,.modal .mh,.modal .mf{padding-left:16px; padding-right:16px}
  table.grid th,table.grid td{padding:10px}
  /* 표는 줄이지 않고 좌우로 넘긴다 (아래 620px 아래에서는 카드로 바뀐다) */
  .card .body.tight,.modal .mb,#itemsWrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  table.grid{min-width:544px}
  table.items{min-width:640px}
}

/* ---------- 휴대폰 메뉴는 접어 둔다 ---------- */
/*
 * 열여섯 개를 늘어놓으면 첫 화면의 절반을 메뉴가 먹는다. 실제로 그랬다.
 * 지금 보는 화면 이름이 적힌 단추 하나만 두고, 누르면 펼친다.
 */
@media (max-width:900px){
  nav.side .navtoggle{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; background:var(--surface); border:1px solid var(--line-2);
    border-radius:var(--r-md); padding:11px 14px; box-shadow:var(--sh-1);
    font-size:14px; font-weight:650; color:var(--ink); letter-spacing:-.015em; cursor:pointer;
  }
  nav.side .navtoggle .caret{
    width:9px; height:9px; border-right:1.8px solid var(--muted); border-bottom:1.8px solid var(--muted);
    transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--ease);
  }
  nav.side[aria-expanded="true"] .navtoggle .caret{transform:rotate(-135deg) translate(-3px,-3px)}
  /* 접기 단추와 새 문서 단추를 한 줄에 — 새 문서는 접지 않는다.
     `flex:1 1 100%` 를 빼면 메뉴 줄이 내용만큼만 넓어져서
     화면 이름이 "대…" 로 잘린다 (사이드바가 가로 flex 라서 그렇다) */
  nav.side .navhead{display:flex; gap:8px; align-items:stretch; margin-bottom:0; flex:1 1 100%}
  nav.side .navlist{flex:1 1 100%}
  /* width:100% 를 풀지 않으면 둘이 서로 밀어 글자가 세로로 쪼개진다 */
  nav.side .navhead button{width:auto}
  nav.side .navtoggle{flex:1 1 auto; min-width:0}
  nav.side .navtoggle > span:first-child{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  nav.side .newbtn{flex:0 0 auto; padding:11px 16px; white-space:nowrap}
  nav.side .newbtn .full{display:none}
  nav.side .newbtn .short{display:inline}
  nav.side .navlist{display:none; margin-top:8px}
  nav.side[aria-expanded="true"] .navlist{display:block}
  nav.side .navgroup{margin:12px 0 4px}
}

/* =========================================================
   휴대폰 — 표를 카드로 쌓는다

   표를 그대로 좁히면 제목이 한 글자씩 세로로 쪼개지고 금액이 화면 밖으로
   잘려 나간다. 실제로 그랬다. 결재는 이동 중에 휴대폰으로 하는 일이 많으므로
   여기가 깨지면 시스템이 안 쓰인다.

   칸 앞에 붙는 이름은 `data-k` 에서 읽는다 (`parts.js` 가 넣는다).
   ========================================================= */
@media (max-width:620px){
  .card .body.tight,.modal .mb,#itemsWrap{overflow-x:visible}
  table.grid,table.items{min-width:0}

  table.grid{display:block; padding:10px 12px 12px}
  table.grid thead{display:none}
  table.grid tbody,table.grid tfoot{display:block}

  table.grid tbody tr{
    display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
    padding:12px 14px; margin-bottom:8px;
  }
  table.grid tbody tr:last-child{margin-bottom:0}
  table.grid tbody tr:active{background:var(--surface-2)}

  table.grid td{
    display:block; padding:0; border:0; text-align:left !important;
    font-size:13px; white-space:normal;
  }
  /* 칸 이름을 앞에 붙인다 — 머리글이 없으니 이것이 없으면 무슨 값인지 모른다 */
  table.grid td::before{
    content:attr(data-k); display:block;
    font-size:10.5px; font-weight:600; color:var(--muted-2);
    letter-spacing:.02em; margin-bottom:1px;
  }
  table.grid td.num{font-feature-settings:"tnum" 1}

  /* 문서 목록은 제목이 먼저다. 결재할 때 제일 먼저 읽는 값이다 */
  table.grid.docs tbody tr{gap:4px 12px}
  table.grid.docs td[data-k="제목"]{
    order:1; flex:1 0 100%; font-size:15px; font-weight:650; line-height:1.45;
    letter-spacing:-.012em; color:var(--ink); margin-bottom:2px;
  }
  table.grid.docs td[data-k="제목"]::before{display:none}
  table.grid.docs td[data-k="상태"]{order:2}
  table.grid.docs td[data-k="종류"]{order:3}
  /* 금액은 이름과 값을 한 줄에 둔다 — 위아래로 갈리면 허전하고 읽기도 나쁘다 */
  table.grid.docs td[data-k="금액"],
  table.grid.docs td[data-k="금액(원)"]{
    order:4; margin-left:auto; display:flex; align-items:baseline; gap:6px;
    text-align:right !important; font-weight:650; font-size:14px; letter-spacing:-.015em;
  }
  table.grid.docs td[data-k="금액"]::before,
  table.grid.docs td[data-k="금액(원)"]::before{
    display:inline; margin:0; font-size:11px; font-weight:600; color:var(--muted-2);
  }
  table.grid.docs td[data-k="상태"]::before,
  table.grid.docs td[data-k="종류"]::before{display:none}
  table.grid.docs td[data-k="문서번호"]{
    order:5; flex:1 0 100%; font-size:11.5px; color:var(--muted-2);
    border-top:1px solid var(--line); padding-top:8px; margin-top:6px;
  }
  table.grid.docs td[data-k="문서번호"]::before{display:none}
  table.grid.docs td[data-k="기안자"]{order:6; font-size:11.5px; color:var(--muted)}
  table.grid.docs td[data-k="기안자"]::before{display:none}
  table.grid.docs td[data-k="기안일"]{order:7; font-size:11.5px; color:var(--muted); margin-left:-6px}
  table.grid.docs td[data-k="기안일"]::before{content:"· "; display:inline; font-size:11.5px; margin:0}

  /* 합계 줄도 카드 하나로 */
  table.grid tfoot tr{
    display:flex; flex-wrap:wrap; gap:2px 10px;
    background:var(--surface-3); border-radius:var(--r-md); padding:12px 14px; margin-top:8px;
  }
  table.grid tfoot th{display:block; padding:0; border:0; font-size:12.5px; text-align:left !important}

  /* 내역 입력도 쌓는다 — 여덟 칸을 옆으로 늘어놓으면 못 쓴다 */
  table.items{display:block; border:0}
  table.items thead{display:none}
  table.items tbody{display:block}
  table.items tbody tr{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    border:1px solid var(--line); border-radius:var(--r-md);
    padding:12px; margin-bottom:10px; background:var(--surface);
  }
  table.items td{display:block; padding:0; border:0}
  table.items td::before{
    content:attr(data-k); display:block;
    font-size:10.5px; font-weight:600; color:var(--muted-2); margin-bottom:3px;
  }
  table.items td:nth-child(1),table.items td:nth-child(2){grid-column:1 / -1}
  table.items td.del{
    grid-column:1 / -1; width:auto; text-align:right !important;
    border-top:1px solid var(--line); padding-top:8px;
  }
  table.items td.del::before{display:none}
  table.items td.del button{width:auto; padding:0 10px; height:28px; font-size:13px}
  table.items td.del button::after{content:" 이 줄 지우기"; font-size:12px}
  /* 쌓인 카드에서는 숫자를 오른쪽에 붙이지 않는다 — 칸이 좁아 오히려 읽기 어렵다 */
  table.items input,table.items input.n{padding:9px 10px; font-size:14px; text-align:left}

  /* 출퇴근 버튼 — 휴대폰에서 가장 많이 누르는 곳이다. 크게 둔다 */
  .punchbar{ padding:14px }
  .punchbar .btns{ margin-left:0; width:100% }
  .punchbar .btn.big{ flex:1 1 auto; padding:14px; font-size:16px }
  .punchbar .what{ gap:14px }

  .daygrid{ grid-template-columns:repeat(auto-fill,minmax(50px,1fr)); gap:5px }
  .daycell{ min-height:70px; padding:6px 3px 7px }
  .daycell .tt{ font-size:9.5px }
  .linerow .lname{ min-width:0 }
}

@media (max-width:560px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .top .who .sub{display:none}
  /* 메뉴가 세 줄까지 흐르지 않게 조금 줄인다 */
  nav.side button{padding:7px 11px; font-size:13px}
  .card > h2{padding:14px 16px}
  .card .body{padding:16px}
}

/* =========================================================
   4단계에서 새로 넣은 것
   ========================================================= */

/* 로그인 화면 — 구글 버튼 하나만 둔다 */
.login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:24px;
}
.login .box{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:36px 32px; max-width:380px; width:100%; text-align:center;
  box-shadow:0 1px 2px rgba(21,26,33,.04);
}
.login .logomark{display:flex; justify-content:center; margin:0 auto 18px}
.login .logomark .mark-logo{width:62px; height:auto; display:block}
.login h1{ font-size:19px; margin:0 0 6px }
.login p{ color:var(--muted); font-size:13px; margin:0 0 24px; line-height:1.6 }
.login .gbtn{
  width:100%; padding:12px 16px; border:1px solid var(--line-2); border-radius:10px;
  background:#fff; font-size:14px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.login .gbtn:hover{ background:var(--surface-3) }
.login .err{
  margin-top:18px; padding:12px 14px; border-radius:10px; text-align:left;
  background:#fdf2f1; border:1px solid #f3d4d0; color:#8f2c22;
  font-size:13px; line-height:1.6;
}
.login .sub{ margin-top:20px; font-size:12px; color:var(--muted) }

/* 타일에 0 만 크게 뜨면 서늘하다. 아직 없다는 말이 낫다 */
.tile .v .none{ font-size:15px; font-weight:600; color:var(--muted) }

/* 카드 안에 붙는 안내 — 카드 밖에 두면 무엇에 대한 말인지 흐려진다 */
.cardnote{
  padding:12px 18px 14px; border-top:1px solid var(--line);
  background:var(--warn-bg); color:#7a5710; font-size:12.5px; line-height:1.7;
}

/* =========================================================
   출퇴근 버튼 — 하루에 두 번 누르는 곳이라 맨 위에 크게 둔다
   ========================================================= */
.punchbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 18px; margin-bottom:18px; box-shadow:var(--sh-1);
}
.punchbar.working{ border-color:#bfe0d5; background:linear-gradient(180deg,#f4fbf7,var(--surface)) }
.punchbar.leave{ border-color:#d9e4f0; background:linear-gradient(180deg,#f5f8fc,var(--surface)) }
.punchbar{ padding:14px 18px }
.punchbar .today{
  display:flex; flex-direction:column; gap:1px; min-width:150px;
}
/* 찍은 것이 있을 때만 칸을 가른다 */
.punchbar .what:not(:empty){
  padding-left:18px; margin-left:4px; border-left:1px solid var(--line);
}
.punchbar .today .d{ font-size:13.5px; font-weight:650; letter-spacing:-.015em }
.punchbar .today .n{ font-size:11.5px; color:var(--muted) }
.punchbar .what{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; flex:1 1 auto; min-width:0 }
.punchbar .what > b{ font-size:15px }
.punchbar .what .sub{ color:var(--muted); font-size:13px; margin-left:8px }
.punchbar .stamp{ display:flex; flex-direction:column; gap:2px; min-width:64px }
.punchbar .stamp .k{ font-size:11px; font-weight:600; color:var(--muted-2); letter-spacing:.02em }
.punchbar .stamp .v{
  font-size:19px; font-weight:700; color:var(--muted-2); letter-spacing:-.02em;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}
.punchbar .stamp.on .v{ color:var(--ink) }
.punchbar .btns{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto }
.punchbar .btn.big{ padding:11px 22px; font-size:15px }

/* =========================================================
   근태 — 한 달을 작은 칸으로 늘어놓는다
   ========================================================= */
.daygrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:6px }
.daycell{
  position:relative; border:1px solid var(--line); border-radius:8px;
  /* 출근 · 퇴근 두 줄이 들어간다. 한 줄만 담을 높이로 두면 퇴근 시각이 잘린다 */
  padding:7px 6px 8px; text-align:center; background:var(--surface-2); min-height:76px;
}
.daycell .dd{ display:block; font-size:13px; font-weight:700; letter-spacing:-.02em }
.daycell .wd{ display:block; font-size:10px; color:var(--muted-2); margin-top:-1px }
.daycell .tt{
  display:block; font-size:10.5px; margin-top:3px; color:var(--muted);
  font-feature-settings:"tnum" 1; white-space:nowrap; overflow:hidden;
}
/* 둘째 줄(퇴근)은 한 칸 옅게. 같은 무게로 두면 어느 것이 출근인지 헷갈린다 */
.daycell .tt.off{ margin-top:1px; opacity:.78 }
.daycell .tt.warn{ margin-top:1px; color:var(--bad); font-weight:700 }
.daycell .fix{
  position:absolute; top:-5px; right:-4px; font-size:9px; font-weight:700;
  background:var(--warn); color:#fff; border-radius:999px; padding:1px 5px;
}
.daycell.ok{ background:var(--ok-bg); border-color:#cfe8da }
.daycell.ok .tt{ color:var(--ok) }
.daycell.late{ background:var(--warn-bg); border-color:#f0e0bd }
.daycell.late .tt{ color:var(--warn) }
/* 조기퇴근은 지각과 다른 일이다. 색이 같으면 구분이 안 된다 */
.daycell.early{ background:#f4f0fa; border-color:#ddd3ee }
.daycell.early .tt{ color:#6b4e9e }
.daycell.open{ background:var(--bad-bg); border-color:#f3d4d0 }
.daycell.open .tt{ color:var(--bad); font-weight:700 }
.daycell.none{ background:var(--surface-2) }
.daycell.leave{ background:#eef4fb; border-color:#d5e3f2 }
.daycell.leave .tt{ color:#2b5c8a; font-weight:600 }
.daycell.off{ background:var(--surface-3); border-color:var(--line) }
.daycell.off .dd,.daycell.off .wd{ color:var(--muted-2) }
.daycell.wknd{ background:var(--point-soft); border-color:#c9e3e7 }
.daycell.wknd .tt{ color:var(--point); font-weight:600 }
.daycell.future{ background:transparent; border-style:dashed; border-color:var(--line) }
.daycell.future .dd,.daycell.future .wd{ color:var(--muted-2); opacity:.6 }

.legend{ display:flex; gap:6px; flex-wrap:wrap; font-size:11px }
.legend .lg{
  padding:3px 9px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--muted); font-weight:600;
}
.legend .lg.ok{ background:var(--ok-bg); border-color:#cfe8da; color:var(--ok) }
.legend .lg.late{ background:var(--warn-bg); border-color:#f0e0bd; color:var(--warn) }
.legend .lg.early{ background:#f4f0fa; border-color:#ddd3ee; color:#6b4e9e }
.legend .lg.open{ background:var(--bad-bg); border-color:#f3d4d0; color:var(--bad) }
.legend .lg.leave{ background:#eef4fb; border-color:#d5e3f2; color:#2b5c8a }
.legend .lg.wknd{ background:var(--point-soft); border-color:#c9e3e7; color:var(--point) }

/* =========================================================
   조직도 · 기준자료
   ========================================================= */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px }
.tabs button{
  border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:8px 14px; font-size:13px; font-family:inherit; cursor:pointer; color:var(--ink-2);
  transition:background var(--ease), border-color var(--ease);
}
.tabs button:hover{ background:var(--surface-3) }
.tabs button.on{ background:var(--sig); border-color:var(--sig); color:#fff; font-weight:600 }

table.grid tr.pick{ cursor:pointer }
table.grid tr.pick:hover{ background:var(--surface-2) }

/* 결재선 그림 — 직위로 정해지므로 조직도 구실을 한다.
   문서 상세의 흐름 카드를 그대로 쓰면 여덜 줄이 화면 하나를 다 먹는다 */
.flow.tight{ gap:6px; margin:0; padding:0; overflow:visible; flex-wrap:wrap }
.flow.tight .step{ min-width:0; padding:6px 12px; border-radius:8px }
.flow.tight .step .r{ font-size:9.5px; margin-bottom:0 }
.flow.tight .step .n{ font-size:13px }
.flow.tight .step .s{ font-size:11px; margin-top:0 }
.flow.tight .arw{ font-size:14px; margin:0 1px }

.lines{ display:grid; gap:8px }
.linerow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:6px 0; border-bottom:1px solid var(--line);
}
.lines .linerow:last-child{ border-bottom:0 }
.linerow .lname{
  min-width:76px; font-size:12.5px; font-weight:700; color:var(--ink-2);
  background:var(--surface-3); border-radius:999px; padding:4px 12px; text-align:center;
}

/* 조용한 안내 — 눈에 걸리지 않아야 하는 것 */
.cardnote.quiet{ background:var(--surface-2); color:var(--muted); }

/* =========================================================
   결재 의견 — 판단 근거가 남아야 두 해 뒤에 다시 읽을 수 있다
   ========================================================= */

/* 승인 직전에 한 번 묻는 자리. 막지는 않으므로 붉게 두지 않는다 */
.asknote{
  background:var(--warn-bg); color:#7a5710; font-size:12.5px; line-height:1.7;
  border:1px solid #f0dfae; border-radius:var(--r-md); padding:10px 14px; margin-bottom:10px;
}

/* 자주 쓰는 말 — 눌러서 넣는다. 타이핑이 귀찮아서 안 쓰는 것이 가장 큰 이유다 */
.chiprow{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.chipbtn{
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink-2);
  border-radius:999px; padding:5px 12px; font-size:12px; font-family:inherit;
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.chipbtn:hover{ background:var(--surface-3); border-color:var(--point); color:var(--point) }

/* =========================================================
   프로필 — 이름을 누르면 연락할 방법이 나온다
   ========================================================= */

/* 누를 수 있는 이름. 단추처럼 보이면 표가 시끄러워져서 점선만 깐다 */
.who-link{
  background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
  cursor:pointer; border-bottom:1px dashed var(--line-2); text-align:left;
}
.who-link:hover{ color:var(--point); border-bottom-color:var(--point) }

/* 사진을 가운데 두고 그 아래 이름 · 직위를 놓는다.
   옆으로 늘어놓으면 이름이 사진에 딸린 꼬리표처럼 보인다 — 사람 카드인데 */
/* ---------- 프로필 카드 ----------
 * 이름 · 직위가 표 한 줄로 있던 것을 **얼굴이 먼저 보이는 카드**로 바꿨다.
 *
 * 이 카드를 여는 까닭은 대개 "연락해야 해서" 다. 그래서 연락할 방법을
 * 표에서 꺼내 맨 위에 큼직한 단추로 둔다 — 휴대폰에서 눌러서 바로 걸린다.
 *
 * 모달 몸통의 여백(20px 22px)을 **거슬러 올라가** 띠를 가장자리까지 편다.
 * 띠가 안쪽에만 그려지면 카드가 아니라 네모 하나가 얹힌 것으로 보인다.
 */
.pcardx{margin:-20px -22px 0; border-radius:0 0 16px 16px; overflow:hidden}
.pcover{
  height:76px;
  background:linear-gradient(120deg, var(--sig) 0%, var(--point) 100%);
}
.pfhead{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:0 22px 14px; text-align:center;
}
.pfhead .pav{position:relative; margin-top:-34px; margin-bottom:8px}
.pfhead .avatar{
  width:68px; height:68px; border-radius:50%; background:var(--surface-3);
  border:3px solid var(--surface); color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; font-size:25px; font-weight:650;
  flex:none; box-shadow:0 3px 12px -4px rgba(23,34,71,.4);
}
.pfhead img.avatar{object-fit:cover}
.pnm{font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--ink)}
.ppo{font-size:13px; color:var(--muted); margin-top:1px}
.pchips{display:flex; gap:6px; justify-content:center; margin-top:7px; flex-wrap:wrap}

/* 연락 단추 — 눌러서 바로 걸리고 바로 보내진다 */
.pacts{display:flex; flex-direction:column; gap:7px; padding:0 22px 4px}
.pact{
  display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  padding:10px 13px; transition:border-color .12s, background .12s, box-shadow .12s;
}
.pact:hover{border-color:var(--point); background:var(--surface-2); box-shadow:var(--sh-1)}
.pact .pi{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:9px;
  background:var(--surface-3); color:var(--point);
}
.pact .pi .ic{width:17px; height:17px}
.pact .px{display:flex; flex-direction:column; min-width:0}
.pact .pk{font-size:11px; color:var(--muted); letter-spacing:.01em}
.pact .pv{font-size:13.5px; font-weight:600; letter-spacing:-.01em; word-break:break-all}

/* 나머지 항목 — 담당업무 · 입사일 · 역할 */
.pfacts{display:flex; flex-direction:column; padding:14px 22px 4px; gap:0}
.pfact{
  display:flex; gap:14px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.pfact:last-child{border-bottom:0}
.pfact .k{flex:0 0 84px; font-size:12px; color:var(--muted)}
.pfact .v{flex:1; font-size:13.5px; color:var(--ink); min-width:0; word-break:keep-all}

.pcardx .cardnote,.pcardx .notice{margin:12px 22px 18px}

/* 조직도 — 찾아보는 곳이라 사람 단위로 크게 늘어놓는다 */
/* ---------- 조직도 계통도 ----------
 * 명단만 늘어놓던 것을 위아래가 보이는 그림으로 바꿨다.
 *
 * ⚠ 선은 **테두리로** 긋는다. `│` `─` 같은 글자로 그리면 글꼴에 따라 길이가
 *   달라져 칸과 어긋난다. 세로선 하나(위로 뻗는 줄기)와 가로선 하나(형제를
 *   잇는 대들보)면 계통도로 읽힌다.
 */
/* =========================================================
   오늘 근무 현황 — 지금 누가 나와 있나
   ========================================================= */
.pnteam + .pnteam{ margin-top:14px }
.pntt{
  display:flex; align-items:baseline; gap:8px; margin-bottom:8px;
  font-size:12.5px; font-weight:700; color:var(--ink-2); letter-spacing:-.01em;
}
.pntc{ font-size:11.5px; font-weight:600; color:var(--muted) }
.pnrow{ display:flex; flex-wrap:wrap; gap:9px }

.pnow{
  appearance:none; -webkit-appearance:none; font:inherit; text-align:left;
  display:flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:11px; padding:8px 13px 8px 9px; min-width:0;
  /* 왼쪽 띠로 상태를 말한다. 칸 전체를 물들이면 이름이 안 읽힌다 */
  border-left:3px solid var(--line);
  transition:background var(--ease), border-color var(--ease);
}
.pnow:hover{ background:var(--surface-3) }
.pnow .avatar{ width:30px; height:30px; font-size:12px; flex:0 0 auto }
.pnx{ display:flex; flex-direction:column; min-width:0; gap:1px }
.pnn{
  display:flex; align-items:baseline; gap:6px;
  font-size:13px; font-weight:650; color:var(--ink); letter-spacing:-.015em;
  white-space:nowrap;
}
.pnp{ font-size:11px; font-weight:500; color:var(--muted-2) }
.pns{
  font-size:11.5px; color:var(--muted); letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:6px; white-space:nowrap;
}
.pnt{
  font-size:11px; color:var(--ink-2); font-weight:600;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}

/* 나와 있는 사람이 가장 눈에 띄어야 한다 — 그게 이 카드가 답하는 물음이다 */
.pnow.ok{ border-left-color:var(--ok); background:var(--ok-bg) }
.pnow.ok .pns{ color:var(--ok); font-weight:600 }
.pnow.done{ border-left-color:var(--muted-2) }
.pnow.leave{ border-left-color:var(--ic-violet) }
.pnow.leave .pns{ color:#6b4e9e }
.pnow.trip{ border-left-color:var(--ic-sky) }
.pnow.trip .pns{ color:#2b5c8a }
.pnow.none{ border-left-color:var(--line); opacity:.72 }
.pnow.off{ border-left-color:var(--line); opacity:.6 }

@media (max-width:520px){
  .pnrow{ gap:7px }
  .pnow{ flex:1 1 100%; padding:7px 11px 7px 8px }
}

.orgwrap{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap}
.orgchart{flex:1 1 420px; min-width:0; display:flex; flex-direction:column; align-items:center}
.orow{display:flex; justify-content:center; flex-wrap:wrap; gap:0}
.ocell{position:relative; padding:0 8px}

/* 아래 층: 위로 뻗는 줄기 + 형제를 잇는 대들보 */
.orow.under{margin-top:34px}
.orow.under .ocell::before{
  content:""; position:absolute; left:50%; top:-34px; width:1px; height:34px;
  background:var(--line-2);
}
.orow.under .ocell::after{
  content:""; position:absolute; top:-34px; height:1px; background:var(--line-2);
  left:0; right:0;
}
/* 양 끝은 반쪽만 — 대들보가 칸 밖으로 삐져나오면 허공에 선이 뜬다 */
.orow.under .ocell:first-child::after{left:50%}
.orow.under .ocell:last-child::after{right:50%}
.orow.under .ocell:only-child::after{display:none}

.onode{
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  padding:11px 15px; font:inherit; color:inherit; cursor:pointer; min-width:168px;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.onode:hover{border-color:var(--point); box-shadow:var(--sh-1); background:var(--surface-2)}
.onode .avatar{
  width:34px; height:34px; border-radius:50%; background:var(--surface-3);
  border:1px solid var(--line-2); color:var(--ink-2); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:650;
}
.onode img.avatar{object-fit:cover}
.onode .ot{display:flex; flex-direction:column; gap:1px; min-width:0}
.onode .on{font-size:14px; font-weight:650; letter-spacing:-.015em}
.onode .op{font-size:11.5px; font-weight:600; color:var(--point)}
.onode .os{font-size:11px; color:var(--muted)}

/* 감사 · 자문 — 지휘 계통 밖이라 옆에 따로 세운다 */
.oaside{
  flex:0 0 auto; display:flex; flex-direction:column; gap:8px;
  padding:12px 14px; border:1px dashed var(--line-2); border-radius:var(--r-md);
  background:var(--surface-2);
}
.oasidettl{font-size:11px; font-weight:650; color:var(--muted); letter-spacing:.02em}

@media (max-width:700px){
  /* 좁으면 계통도가 아니라 **세로 목록**이 낫다. 칸을 줄이면 이름이 쪼개진다 */
  .orow{flex-direction:column; align-items:stretch; width:100%}
  .ocell{padding:0}
  .orow.under{margin-top:10px}
  .orow.under .ocell::before,.orow.under .ocell::after{display:none}
  .onode{min-width:0}
  .orgwrap{flex-direction:column}
  .oaside{width:100%}
}

.pgrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:10px; padding:16px 18px 18px;
}
.pcard{
  display:flex; align-items:flex-start; gap:11px; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  padding:12px 14px; font:inherit; color:inherit; cursor:pointer;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.pcard:hover{ border-color:var(--point); box-shadow:var(--sh-1); background:var(--surface-2) }
.pcard .avatar{
  width:38px; height:38px; border-radius:50%; background:var(--surface-3);
  border:1px solid var(--line-2); color:var(--ink-2); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:650;
}
.pcard .txt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.pcard .nm{ font-size:14px; font-weight:650; letter-spacing:-.015em; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.pcard .nm .po{ font-size:11.5px; font-weight:600; color:var(--muted) }
.pcard .job{
  font-size:12px; color:var(--ink-2); line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pcard .con{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums }
.pcard .con .none{ color:var(--muted-2) }

/* 퇴사자 함께 보기 */
label.chk{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); cursor:pointer }
label.chk input{ accent-color:var(--point) }

/* 결재선 안에 적힌 의견 — 맨 아래 표에만 있으면 아무도 안 읽는다 */
.flow .step .cmt{
  margin-top:6px; padding-top:6px; border-top:1px dashed var(--line);
  font-size:11.5px; line-height:1.6; color:var(--ink-2); max-width:230px;
  word-break:keep-all; white-space:normal;
}

/* 증빙을 올리는 자리 — 칸이 없으면 "첨부를 못 하는 것" 인지 "빠뜨린 것" 인지 모른다 */
.dropzone{
  border:1px dashed var(--line-2); border-radius:var(--r-md);
  padding:16px; background:var(--surface-2); font-size:13px;
}
.dropzone.locked{ color:var(--muted); background:var(--surface-3) }
.dropzone .hint{ margin-top:6px }
.dropzone input[type=file]{ font-size:13px; max-width:100% }

/* 세무사 PDF 를 놓는 자리 — 눌러도 열리고 끌어다 놓아도 된다 */
#salDrop{ cursor:pointer; text-align:center; padding:24px 16px; transition:background .12s, border-color .12s }
#salDrop:hover{ border-color:var(--point); background:var(--surface) }
#salDrop.over{ border-color:var(--point); border-style:solid; background:var(--point-soft) }
#salDrop b{ font-size:14px }
#salDrop code{
  background:var(--surface-3); border-radius:4px; padding:1px 5px;
  font-size:12px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 올라간 증빙 목록 */
ul.filelist{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px }
ul.filelist li{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 10px; font-size:13px;
}
ul.filelist li > a{ font-weight:600; color:var(--sig); text-decoration:none }
ul.filelist li > a:hover{ text-decoration:underline }
ul.filelist li .hint{ margin:0 }
ul.filelist li .btn{ margin-left:auto }

/* 결산 화면 */
.report h3{ font-size:14px; margin:22px 0 8px; color:var(--ink-2) }
.report .sect:first-of-type h3{ margin-top:14px }

/* ─ 숫자 칸에서 눌러 찾아오는 덩이 ─
   상단 바가 화면 위에 붙어 있어서(`position:sticky; height:60px`) 그냥 내려가면
   제목이 띠 밑으로 들어간다. 여백을 넉넉히 두어 제목부터 보이게 한다.
   잠깐 밝히는 것은 장식이 아니다 — 표가 길면 어디로 왔는지 눈으로 못 찾는다 */
.sect{ scroll-margin-top:92px; border-radius:10px }
.sect.lit{ animation:sectlit 2s ease-out 1 }
@keyframes sectlit{
  0%,65%{ background:#fff6d3; box-shadow:0 0 0 8px #fff6d3 }
  100%{ background:transparent; box-shadow:0 0 0 8px transparent }
}
@media (prefers-reduced-motion:reduce){
  .sect.lit{ animation:none; outline:2px solid var(--warn, #e0a800); outline-offset:6px }
}
.report .oneline{
  padding:14px 16px; background:var(--surface-3); border-radius:10px;
  font-weight:600; margin-bottom:18px;
}

/* 인쇄 — 화면 장식은 빼고 내용만 나가게 */
@media print{
  .top, .side, .btnrow, .mf, .newbtn, .right, .toast{ display:none !important }
  .wrap{ display:block; padding:0 }
  main{ padding:0 }
  .card{ border:0; box-shadow:none; break-inside:avoid }
  body{ background:#fff }
}

/* 여러 건을 한 번에 — 목록 위에 뜨는 막대 */
.bulkbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; margin-bottom:10px;
  background:var(--surface-2, #f4f6f7); border:1px solid var(--line);
  border-radius:var(--r-md);
}
.bulkinfo{font-size:13px; color:var(--ink)}
.bulkinfo .hint{font-size:12px; color:var(--muted)}
.bulkbar .btn{margin-left:0}
.bulkbar > .btn:last-child{margin-left:auto}
/* 네모 칸은 좁게. 줄을 눌러 문서를 여는 동작과 섞이면 안 되므로 칸을 분명히 나눈다 */
td.pickcell, th.pickcell{width:34px; text-align:center; padding-left:10px; padding-right:4px}
td.pickcell input, th.pickcell input{width:16px; height:16px; cursor:pointer; accent-color:var(--point)}
@media (max-width:700px){
  /* 휴대폰에서는 표가 카드로 쌓인다. 빈 네모 칸이 줄을 만들지 않게 */
  td.pickcell:empty{display:none}
  .bulkbar > .btn:last-child{margin-left:0}
}

/* =========================================================
   화면 결 — 로고 · 아이콘 메뉴 · 인사 · 아이콘 타일 · 막대
   ========================================================= */

/* ---------- 사이드바 로고 ---------- */
/* 누르면 첫 화면으로 간다. `button` 이라 브라우저가 주는 생김새를 지운다.
 *
 * ⚠ `nav.side button` 보다 **더 구체적으로** 적어야 한다. 그 규칙이
 * `display:flex` 라서, 그냥 `.navbrand` 로만 적으면 로고 · 기관명 · 슬로건이
 * 한 줄에 나란히 서서 글자가 세로로 토막 난다. 실제로 그렇게 깨졌다 */
nav.side button.navbrand{
  padding:2px 12px 16px; display:block; width:100%; text-align:left;
  background:transparent; border:0; cursor:pointer; font:inherit; color:inherit;
  border-radius:var(--r-sm); transition:opacity var(--ease); gap:0;
}
nav.side button.navbrand:hover{opacity:.72; background:transparent}
nav.side button.navbrand:active{opacity:.55}
/* 안의 칸들. `.brandtop` 만 가로로 둔다 (로고 옆에 영문명) */
nav.side button.navbrand .logo,
nav.side button.navbrand .tagline{display:block; width:auto}
nav.side button.navbrand .brandtop{display:flex; align-items:center; gap:10px}
.navbrand .logo{
  font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--sig-2);
  line-height:1.2;
}
.navbrand .tagline{
  margin-top:4px; font-size:11px; color:var(--muted-2);
  letter-spacing:-.005em; line-height:1.45;
}

/* ---------- 메뉴 아이콘 ---------- */
/* 그림은 글자색을 따라간다. 켜진 메뉴에서 저절로 같이 진해진다 */
nav.side button .ic{
  width:19px; height:19px; flex:0 0 19px;
  color:var(--muted); transition:color var(--ease);
}
nav.side button:hover .ic{color:var(--ink-2)}
nav.side button.on .ic{color:var(--point)}
nav.side button{gap:10px}
/* 글자 칸만 남는 자리를 쓴다. **꺾쇠(.caret)는 빼야 한다** — `flex:1` 이
   `width:9px` 를 이겨서, 휴대폰 메뉴 단추 안의 꺾쇠가 84px 짜리 커다란
   빗금으로 늘어났다 */
/* `.ic` 도 빼야 한다. 아이콘이 없는 메뉴는 빈 `<span class="ic">` 로 자리만
   잡는데, 그것이 span 이라 이 규칙에 걸려 `flex:1` 을 먹었다. 진짜 아이콘은
   `<svg>` 라 안 걸린다. 그래서 **아이콘을 빠뜨린 메뉴만** 빈 칸이 쭉 늘어나
   글자가 오른쪽으로 백 픽셀쯤 밀렸다 (활동확인서 · 강사 마당이 그랬다) */
nav.side button > span:not(.only):not(.badge):not(.caret):not(.ic){flex:1; min-width:0}

/* 켜진 메뉴 — 왼쪽 막대 대신 **은은한 알약**. 배경이 옅은 남보라라 잘 얹힌다 */
nav.side button.on{background:var(--point-soft); color:var(--sig-2); box-shadow:none}
nav.side button.on::before{display:none}

/* ---------- 사이드바 맨 아래 카드 ---------- */
.navcard{
  position:relative; overflow:hidden;
  margin:18px 6px 0; padding:20px 16px 18px;
  border-radius:var(--r-lg);
  background:linear-gradient(155deg,#eef0fd 0%,#e6ecfb 55%,#eaf3f7 100%);
  border:1px solid #e2e7f7;
}
.navcard .blob{
  position:absolute; right:-38px; bottom:-46px; width:132px; height:132px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(46,181,128,.28), rgba(46,181,128,0) 68%);
}
.navcard .line{
  position:relative; font-size:14px; font-weight:700; line-height:1.5;
  color:var(--sig-2); letter-spacing:-.02em;
}
.navcard .sig{
  position:relative; margin-top:10px;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--muted-2);
}

/* ---------- 화면 제목 줄 ---------- */
/* 어느 화면인지 · 오늘이 며칠인지. 스물네 개 화면을 옮겨 다니다 보면
   지금 어디에 있는지를 놓친다 — 본문 맨 위에서 한 번 더 말해 준다 */
.phead{
  display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap;
  margin:2px 0 20px; padding:4px 2px;
}
.phead > div:first-child{flex:1 1 320px; min-width:0}
.phead h1{
  margin:0 0 5px; font-size:26px; font-weight:750;
  letter-spacing:-.035em; color:var(--ink); line-height:1.25;
}
.phead p{margin:0; font-size:13.5px; color:var(--muted); letter-spacing:-.012em; line-height:1.55}
.phead .hd{flex:0 0 auto; text-align:right; padding-top:3px}
.phead .hd .day{
  font-size:13px; font-weight:650; color:var(--ink-2); letter-spacing:-.015em;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}
.phead .hd .hi{margin-top:3px; font-size:12px; color:var(--muted-2); letter-spacing:-.01em}
@media (max-width:880px){
  .phead h1{font-size:22px}
  .phead .hd{display:none}
}

/* ---------- 아이콘이 붙은 타일 ---------- */
.tile.withic{
  display:flex; align-items:center; gap:13px; text-align:left;
  width:100%; font:inherit; color:inherit; cursor:default;
}
button.tile{border:1px solid var(--line); cursor:pointer}
button.tile:hover{box-shadow:var(--sh-2); transform:translateY(-1px); border-color:var(--line-2)}
button.tile:active{transform:translateY(0)}
.tile .tic{
  flex:0 0 42px; width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ic-indigo); background:var(--ic-indigo-bg);
}
.tile .tic .ic{width:21px; height:21px}
.tile .tic.mint{color:var(--ic-mint); background:var(--ic-mint-bg)}
.tile .tic.sky{color:var(--ic-sky); background:var(--ic-sky-bg)}
.tile .tic.violet{color:var(--ic-violet); background:var(--ic-violet-bg)}
.tile .tic.rose{color:var(--ic-rose); background:var(--ic-rose-bg)}
.tile .tv{display:block; min-width:0; flex:1}
.tile .tv .k{display:block}
.tile .tv .v{display:block}
/* 눌리는 칸이라는 표시 — 오른쪽 끝의 작은 꺾쇠 */
.tile .tgo{
  flex:0 0 auto; width:7px; height:7px; margin-left:4px;
  border-right:1.6px solid var(--muted-2); border-top:1.6px solid var(--muted-2);
  transform:rotate(45deg); transition:border-color var(--ease);
}
button.tile:hover .tgo{border-color:var(--sig)}
.tile.dim .tic{opacity:.62}

/* ---------- 두 칸으로 ---------- */
/* ⚠ 아래 여백을 **여기서** 준다.
   `gap` 은 격자 **안**에만 걸린다. 그래서 이 덩어리 바로 다음에 오는 카드와는
   딱 붙어 버린다 — 첫 화면에서 빠른 작업 카드와 달력이 붙어 나왔다.
   안쪽 칸은 `margin-bottom:0` 이라 카드 스스로도 벌리지 못한다 */
.cols2{
  display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:start;
  margin-bottom:18px;
}
.cols2 > .card{margin-bottom:0}
/* 격자 칸은 기본이 `min-width:auto` 라 **안쪽 내용보다 좁아지지 못한다.**
   왼쪽 칸에 든 표가 넓으면 1.55fr 을 넘겨 버리고, 오른쪽 칸이 그만큼 눌린다 —
   첫 화면에서 "빠른 작업" 이 170px 로 찌그러져 "지출품…" 이 됐다 */
.cols2 > *{min-width:0}
@media (max-width:1080px){ .cols2{grid-template-columns:1fr} .cols2 > .card{margin-bottom:18px} }

/* ---------- 집행률 막대 ---------- */
.prog + .prog{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.prog .pt{display:flex; align-items:baseline; gap:10px}
.prog .pt b{flex:1; min-width:0; font-size:14px; font-weight:650; letter-spacing:-.02em}
.prog .pp{
  font-size:14px; font-weight:750; color:var(--sig); letter-spacing:-.02em;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}
.prog .pp.over{color:var(--bad)}
.prog .pb{
  margin-top:9px; height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden;
}
.prog .pb span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--point),var(--point-3));
}
.prog .ps{
  margin-top:7px; font-size:12px; color:var(--muted); letter-spacing:-.008em;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}


/* ── 로고 · 상단바가 같은 말을 두 번 하지 않게 ──
   넓은 화면에서는 사이드바가 기관 이름을 맡고, 좁은 화면에서는
   사이드바가 접히므로 상단바가 맡는다 */
@media (min-width:861px){
  /* 단추째로 감춘다. 속만 감추면 빈 단추가 자리를 차지해 이름표가 밀린다 */
  .tophome, .top .brand, .top .mark{display:none}
  /* 기관 이름이 사이드바로 갔으니 상단바에는 사람만 남는다.
     띠를 그대로 두면 빈 흰 줄이 화면 맨 위를 가로지른다 — 배경과 선을 없애고
     이름만 떠 있게 한다. sticky 는 유지한다 (길게 스크롤해도 내가 누군지 보인다) */
  .top{
    padding:14px 26px 0; height:auto; justify-content:flex-end;
    background:transparent; backdrop-filter:none; border-bottom:0;
  }
  .top .who .me{background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1)}
  .top .who .me:hover{border-color:var(--line-2); box-shadow:var(--sh-2)}
  .wrap{margin-top:10px}
  nav.side{top:22px}
}
/* 휴대폰에서는 메뉴가 접힌 한 줄이 된다. 로고와 브랜드 카드가 그 줄에
   끼어들면 메뉴 단추가 "대…" 로 잘린다 — 실제로 그랬다 */
@media (max-width:860px){ .navbrand, .navcard{display:none} }

/* 긴 기관 이름이 두 글자씩 쪼개지지 않게 */
.navbrand .logo{word-break:keep-all}
nav.side button > span:not(.only):not(.badge):not(.caret){word-break:keep-all}

/* 진행 중 사업 — 가로로 셋. 막대라서 좁아도 읽힌다.
   `minmax(240px,1fr)` 에서 최소값이 **칸 너비의 하한**이라, 화면이 240px 보다
   좁으면 격자가 화면 밖으로 넘친다. 휴대폰에서 155px 가 잘려 나갔다.
   `min()` 으로 "240px 이되 화면을 넘지 않게" 로 적는다 */
.body.progs{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:22px}
.body.progs .prog + .prog{margin-top:0; padding-top:0; border-top:0}
@media (max-width:760px){
  .body.progs{gap:0}
  .body.progs .prog + .prog{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
}

/* 타일 값 — 단위가 줄을 바꾸면 칸마다 높이가 달라져 밑줄이 어긋난다 */
.tile .tv .v small{white-space:nowrap}
.tile.withic{min-height:74px}

/* 타일 이름이 두 글자씩 쪼개지면 칸마다 높이가 달라진다 */
.tile .tv .k{word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* 격자 칸은 기본이 `min-width:auto` 라 **안쪽 내용보다 좁아지지 못한다.**
   아이콘 42px + 글자 + 꺾쇠가 최소 폭을 만들어, 좁은 화면에서 칸이 격자를
   밀어내고 화면 밖으로 넘쳤다. 0 으로 풀어 줘야 줄어든다 */
.tiles > *{min-width:0}
/* 아이콘이 붙은 타일은 글자 자리가 좁다. 금액 여섯 자리 + 단위가 줄을 바꾸면
   칸마다 높이가 달라져 밑줄이 어긋난다 */
.tile.withic .v{font-size:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile.withic .v small{font-size:12px}


/* =========================================================
   첫 화면 — 오늘 할 일 · 빠른 작업 · 구름 마크
   ========================================================= */

/* ---------- 사이드바 구름 마크 ---------- */
/* 로고 자리에 글자만 있으면 매일 여는 화면이 관공서 서식처럼 보인다.
   구름 하나가 "여기는 우리 것" 이라고 말해 준다 */
.brandtop{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.brandtop .mark-logo{
  width:26px; height:auto; flex:0 0 26px; display:block;
  /* 로고는 흰 바탕에서 그려졌다. 유리 위에 얹으면 가장자리가 붕 떠 보여
     아주 옅은 그림자로 눌러 앉힌다 */
  filter:drop-shadow(0 1px 2px rgba(23,34,71,.18));
}
.brandtop .wordmark{
  font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--muted-2);
}

/* ---------- 한 줄 알림 ---------- */
/*
 * 계약 만료 같은 것은 **첫 화면에 떠야** 아무도 안 보고 지나가지 않는다.
 * 다만 줄을 늘어놓으면 알림이 화면 맨 위를 다 먹어서 정작 오늘 할 일이
 * 접힌 자리 아래로 밀린다. 한 줄로 줄이고 자세한 것은 "보기" 로 보낸다.
 */
.topnote{
  display:flex; align-items:center; gap:13px;
  padding:12px 16px; margin-bottom:16px;
  background:var(--warn-bg); border:1px solid #f0e0bd; border-radius:var(--r-md);
  color:#75500c;
}
.topnote .ti{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px;
  background:rgba(255,255,255,.72); color:#a87413;
}
.topnote .ti .ic{width:17px; height:17px}
.topnote .tt{flex:1; min-width:0}
.topnote .tt b{font-size:13px; font-weight:650; letter-spacing:-.015em}
.topnote .tl{
  margin-top:3px; font-size:12px; line-height:1.5; letter-spacing:-.01em;
  /* 계약명이 길면 한 줄로 자른다 — 알림이 세 줄로 늘어나면 한 줄로 줄인 뜻이 없다 */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topnote .tl .dim{opacity:.7}
.topnote .tl .sep2{margin:0 7px; opacity:.45}
.topnote .btn{flex:0 0 auto; background:#fff; border-color:#e7d3a8; color:#75500c}
.topnote .btn:hover{background:#fffdf7; border-color:#dcc38d}
@media (max-width:620px){
  .topnote{flex-wrap:wrap}
  .topnote .btn{margin-left:42px}
}

/* ---------- 오늘 할 일 ---------- */
/*
 * 첫 화면이 답해야 하는 물음은 **"오늘 뭘 해야 하나"** 하나다.
 * 숫자는 원래도 여럿 있었지만 알림 · 타일 · 카드 제목에 흩어져 있어서,
 * 사람이 화면을 훑으며 할 일을 스스로 조립해야 했다.
 *
 * 건수가 0 인 줄도 **지우지 않고 연하게 둔다.** 사라지면 "증빙은 확인했나?" 를
 * 매번 다시 물어야 한다 — 없다는 것도 답이다.
 */
.card .body.todo{padding:6px 0}
.todoline{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:13px 20px; border:0; background:none; font:inherit; color:inherit;
  text-align:left; cursor:pointer; transition:background var(--ease);
}
.todoline + .todoline{box-shadow:inset 0 1px 0 var(--line)}
.todoline:hover{background:var(--surface-3)}
.todoline .tb{
  flex:0 0 auto; width:18px; height:18px; border-radius:6px;
  border:1.6px solid var(--line-2); background:var(--surface);
  transition:border-color var(--ease), background var(--ease);
}
.todoline .tx{flex:1; min-width:0}
.todoline .tx b{
  display:block; font-size:13.5px; font-weight:650; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.todoline .tx .ts{
  display:block; margin-top:2px; font-size:12px; color:var(--muted); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 휴대폰에서는 설명이 한 줄에 안 들어간다. 잘라 버리면 "지급 처리가 안 된 문서가 2"
   에서 끝나 무슨 말인지 모른다 — 두 줄까지 접는다 */
@media (max-width:760px){
  .todoline{padding:12px 16px; gap:11px}
  .todoline .tx .ts{white-space:normal; word-break:keep-all; line-height:1.45}
}
.todoline .tn{
  flex:0 0 auto; font-size:12.5px; font-weight:700; letter-spacing:-.015em;
  color:var(--sig); background:var(--point-soft); border-radius:999px; padding:3px 10px;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}
/* 붉은색은 아껴 쓴다. 기한이 지났거나 증빙이 빈 것 — 정말 급한 것에만 */
.todoline .tn.hot{color:var(--bad); background:var(--bad-bg)}
.todoline .tgo{
  flex:0 0 auto; width:7px; height:7px; margin-left:2px;
  border-right:1.6px solid var(--muted-2); border-top:1.6px solid var(--muted-2);
  transform:rotate(45deg); transition:border-color var(--ease);
}
.todoline:hover .tgo{border-color:var(--sig)}
/* 할 것이 없는 줄 — 체크 표시로 끝났다고 말한다 */
.todoline.done .tb{
  border-color:var(--ok); background:var(--ok);
  background-image:linear-gradient(45deg,transparent 44%,#fff 44%,#fff 56%,transparent 56%),
    linear-gradient(-45deg,transparent 56%,#fff 56%,#fff 68%,transparent 68%);
  background-size:11px 11px, 11px 11px;
  background-position:2px 5px, 4px 2px;
  background-repeat:no-repeat;
  opacity:.55;
}
.todoline.done .tx b{color:var(--muted)}
.todoline.done .tn{color:var(--muted-2); background:var(--surface-3)}

/* ---------- 오른쪽 곁 칸 ---------- */
/* 첫 화면 오른쪽 — 타일 · 다짐 · 빠른 작업이 세로로 쌓인다 */
.side2{display:grid; gap:14px; align-content:start; min-width:0}
.side2 .tiles{margin-bottom:0}
.side2 .card{margin-bottom:0}

/* 숫자 칸 둘씩 — 오른쪽 좁은 자리라 넷을 가로로 늘어놓으면 글자가 잘린다.
   자리가 좁으니 **아이콘을 줄이고 꺾쇠를 뺀다.** 금액 여섯 자리가 들어가야 한다 —
   "138,000원" 이 "138,…" 로 잘리면 칸이 있으나 마나다 */
.tiles.t2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.t2 .tile.withic{gap:11px; padding:13px 14px}
.tiles.t2 .tic{width:36px; height:36px; border-radius:11px}
.tiles.t2 .tic .ic{width:19px; height:19px}
.tiles.t2 .tgo{display:none}
.tiles.t2 .tile.withic .v{font-size:20px}
.tiles.t2 .tile.withic .v small{font-size:11.5px}
/* 화면이 좁아지면 곁칸이 먼저 눌린다. 둘씩 두면 "138,000원" 이 "138,00…" 이
   된다 — 금액이 잘린 칸은 없는 것만 못하다. 한 줄에 하나씩으로 바꾼다.
   1080px 아래에서는 곁칸이 가로를 다 쓰므로 다시 둘씩이 낫다 */
@media (max-width:1280px) and (min-width:1081px){ .tiles.t2{grid-template-columns:1fr} }
@media (max-width:420px){ .tiles.t2{grid-template-columns:1fr} }

/* 숫자 아래 한 줄 — "2건" 과 "2건 · 증빙서류를 보완해 주세요" 는 다른 말이다 */
/* 두 줄까지 접는다 — 한 줄로 자르면 "증빙서류를 …" 에서 끝나 무슨 말인지 모른다 */
.tile .tv .s{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  margin-top:3px; font-size:11px; line-height:1.45; color:var(--muted-2);
  letter-spacing:-.012em; word-break:keep-all; overflow:hidden;
}
.tile.hot .tv .s{color:#b9695f}

/* ---------- 다짐 ---------- */
/*
 * 하루에 수십 번 여는 화면이다. 숫자만 있는 화면과 우리가 왜 이 일을 하는지
 * 한 줄이 있는 화면은 다르다 — 결재 시스템이지만 결재 기계는 아니다.
 */
.creed{
  position:relative; overflow:hidden;
  padding:20px 20px 22px; border-radius:var(--r-lg);
  background:linear-gradient(150deg,#eef1fd 0%,#e7edfb 52%,#e9f4f6 100%);
  border:1px solid #e2e7f7;
}
.creed .qt{
  position:relative; font-size:14px; font-weight:650; line-height:1.7;
  color:var(--sig-2); letter-spacing:-.025em; word-break:keep-all;
}
.creed .qt b{font-weight:800}
.creed .art{
  position:absolute; right:-44px; bottom:-52px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(46,181,128,.26), rgba(46,181,128,0) 68%);
  pointer-events:none;
}

/* ---------- 빠른 작업 ---------- */
/*
 * 새 문서 화면에서 열한 개 중 고르는 것과, 여기서 바로 누르는 것은 다르다.
 * 실제로 쓰는 것은 네댓 개뿐이고 나머지는 한 달에 한 번이다.
 */
.card .body.quick{padding:8px}
.qa{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 12px; border:0; border-radius:var(--r-md);
  background:none; font:inherit; color:inherit; text-align:left; cursor:pointer;
  transition:background var(--ease);
}
.qa:hover{background:var(--surface-3)}
.qa .qi{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  color:var(--ic-indigo); background:var(--ic-indigo-bg);
}
.qa .qi .ic{width:18px; height:18px}
.qa .qx{flex:1; min-width:0}
.qa .qx b{
  display:block; font-size:13px; font-weight:650; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qa .qx span{
  display:block; margin-top:2px; font-size:11.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qa .tgo{
  flex:0 0 auto; width:7px; height:7px;
  border-right:1.6px solid var(--muted-2); border-top:1.6px solid var(--muted-2);
  transform:rotate(45deg); transition:border-color var(--ease);
}
.qa:hover .tgo{border-color:var(--sig)}


/* =========================================================
   유리 — iOS 결의 반투명 층

   ── 어디에 입히고 어디에 안 입히나 ──

   유리는 **틀**에만 입힌다. 상단바 · 사이드바 · 카드 테두리 · 타일 · 모달.
   **읽어야 하는 것에는 입히지 않는다** — 문서 목록의 숫자, 입력칸, 인쇄물.
   금액 여섯 자리가 뒤 배경이 비쳐서 흐려지면, 예뻐진 대신 결재 시스템이 아니게 된다.

   ── 안 되는 환경 ──

   `backdrop-filter` 를 못 쓰는 브라우저, 그리고 **투명도 줄이기**를 켠 분에게는
   거의 불투명한 흰 면으로 떨어진다. 맨 아래 두 덩이가 그 일을 한다.
   ========================================================= */

:root{
  /*
   * 소우주 시그니처 — **로고에서 뽑은 값이다.**
   *
   * 앞서 쓰던 파랑은 내가 지어낸 것이었다. 진짜 로고는 **딥네이비**가 몸통이고
   * 띠가 청록 → 초록 → 라임으로 흐른다. 그래서 이렇게 나눈다.
   *
   *   딥네이비  = 시그니처. 단추 · 켜진 메뉴 · 제목처럼 **무게를 싣는 자리**
   *   그린     = 포인트. 막대 · 오늘 표시 · 짚은 줄처럼 **눈을 끄는 자리**
   *
   * 둘을 섞어 쓰지 않는다. 네이비가 "이것이 조합이다" 를 말하고,
   * 그린이 "여기를 보라" 를 말한다.
   */
  --sig:#172247;        /* 로고 몸통의 딥네이비 */
  --sig-2:#27365f;      /* 눌렀을 때 · 결이 필요한 자리 */
  --sig-deep:#0d1429;
  --sig-mist:rgba(23,34,71,.10);

  /*
   * 포인트 — 로고 띠의 초록.
   *
   * 두 개로 나눈 이유가 있다. 로고에서 뽑은 `#2eb580` 을 글자에 쓰면
   * 흰 바탕에서 **2.61:1** 이다 — 4.5:1 아래라 눈이 어두운 분에게 안 읽힌다.
   * 그래서 **글자용 초록**을 따로 어둡게 잡고, 로고 색은 면과 막대에만 쓴다.
   * 나란히 놓고 보면 같은 초록 계열이라 결은 그대로다.
   */
  --point:#0d7a54;      /* 글자 · 아이콘 — 흰 바탕에서 5.34:1 */
  --point-2:#2eb580;    /* 로고에서 뽑은 그대로. **면과 막대에만** */
  --point-3:#7ebf40;    /* 라임. 막대 끝 */
  --point-soft:#eaf8f2; /* 켜진 메뉴 · 알약 바탕 */
  --cyan:#00a7ca;       /* 로고 위쪽 띠 */

  /* 유리 — 흰 기가 강할수록 글자가 잘 읽히고, 낮을수록 유리답다.
     결재 시스템이라 **읽히는 쪽**으로 기울여 잡았다 */
  --glass:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.52);
  --glass-3:rgba(255,255,255,.34);
  --blur:saturate(170%) blur(18px);
  --blur-sm:saturate(160%) blur(10px);

  /* 유리의 가장자리 — 위쪽에 밝은 선 하나가 있어야 면이 떠 보인다 */
  --glass-line:rgba(255,255,255,.66);
  --glass-edge:rgba(23,34,71,.11);
  --sh-glass:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 32px -14px rgba(23,34,71,.28);
  --sh-glass-2:0 1px 0 rgba(255,255,255,.55) inset, 0 22px 54px -20px rgba(23,34,71,.34);
}

/* ---------- 바탕 ----------
   유리는 **뒤에 뭔가 있어야** 유리로 보인다. 회색 벽에 붙은 유리는 그냥 흰 종이다.
   시그니처 파랑을 크게 번지게 깔고, 한쪽에 민트를 옅게 섞어 온도를 맞춘다.
   `position:fixed` 라 스크롤해도 안 움직인다 — `background-attachment:fixed` 는
   휴대폰에서 스크롤마다 다시 그려서 버벅인다 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    /* 로고를 위에서 아래로 펼친 순서다 — 네이비에서 시작해 청록 · 초록을 지나
       라임으로 빠진다. 네이비는 **아주 옅게** 둔다. 글자가 그 위에 앉는다 */
    radial-gradient(980px 620px at 1% -14%, rgba(23,34,71,.17), transparent 58%),
    radial-gradient(860px 540px at 97% -6%, rgba(0,167,202,.20), transparent 62%),
    radial-gradient(780px 620px at 96% 104%, rgba(46,181,128,.20), transparent 58%),
    radial-gradient(620px 460px at -6% 98%, rgba(126,191,64,.11), transparent 60%),
    linear-gradient(178deg,#ecf0f6 0%,#f4f7fa 48%,#f0f5f1 100%);
}

/* ---------- 상단 바 ----------
 *
 * ⚠ **반투명하게 두면 안 된다.**
 *
 * 위(861px 이상)에서 이 띠를 `transparent` 로 두어 이름표만 떠 있게 하려 했는데,
 * 이 규칙이 **뒤에 있어서 그것을 덮었다.** 결과는 둘 중 어느 쪽도 아닌
 * 반투명 띠였고, `sticky` 라 화면에 계속 붙어 있으니 **내려 읽을 때마다 그 뒤로
 * 표와 글자가 그대로 비쳤다.** 겹쳐 보인다는 말이 이것이었다.
 *
 * 유리 느낌은 살리되 **뒤가 읽히지 않을 만큼**은 덮는다. backdrop-filter 를
 * 못 쓰는 브라우저에서도 흐려지지 않고 그냥 덮이도록, 불투명도로 먼저 막는다.
 */
.top{
  /* ⚠ **반투명으로 두지 않는다.** 0.95 까지 올려도 5% 는 비친다.
     `sticky` 라 화면에 늘 붙어 있어서, 표가 그 아래로 지나갈 때마다 글자가
     희미하게 겹쳐 보인다. 세 번을 고쳤는데 세 번 다 "아직 겹친다" 는 말을
     들었다 — 유리 느낌보다 읽히는 것이 먼저다. 아예 덮는다.
     덮고 나면 backdrop-filter 는 할 일이 없으므로 뺀다 (그리는 비용만 든다) */
  background:#f6f8fb;
  /* ⚠ 경계선이 **보여야** 한다. `--glass-line` 은 흰색 계열이라 밝은 바탕에서
     아예 안 보였다. 띠는 불투명한데 테두리가 없으니, 표가 그 아래로 지나갈 때
     여전히 겹쳐 보인다는 말씀을 들었다. 눈에 보이는 선과 옅은 그림자로
     "여기까지가 띠" 를 분명히 한다 */
  border-bottom:1px solid var(--line);
  /* ⚠ 그림자를 **보이게** 준다.
     이 띠는 늘 화면에 붙어 있고 표와 카드가 그 아래로 지나간다. 경계가
     흐리면 지나가는 카드가 띠에 **붙어 있는 것처럼** 읽힌다 — 카드가 겹쳐
     보인다는 말씀을 여러 번 들었는데, 비침이 아니라 이것이었다.
     퍼짐(-12px)을 줄여 두면 그림자가 거의 안 보인다 */
  box-shadow:0 4px 12px -4px rgba(23,34,71,.16), 0 1px 0 rgba(23,34,71,.06);
  /* 위 매체 규칙이 `padding:14px 26px 0` 으로 아래를 0 으로 둔다.
     띠가 생겼으니 이름표가 바닥에 붙지 않게 아래도 띄운다 */
  padding-bottom:12px;
}

/* ---------- 사이드바 ----------
   메뉴 스물네 개가 맨 바탕에 떠 있으면 어디까지가 메뉴인지 흐리다.
   유리판 하나에 얹는다. 휴대폰에서는 메뉴가 한 줄로 접히므로 판을 두지 않는다 */
@media (min-width:901px){
  nav.side{
    padding:14px 10px 16px;
    border-radius:24px;
    background:var(--glass-3);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    border:1px solid var(--glass-line);
    box-shadow:var(--sh-glass);
  }
  .navbrand{padding:4px 8px 14px}
}
nav.side button:hover{background:rgba(255,255,255,.58)}
/* 켜진 메뉴 — 흰 알약. 유리 위에 얹히면 저절로 떠 보인다 */
nav.side button.on{
  background:rgba(255,255,255,.88); color:var(--sig-deep);
  box-shadow:0 1px 2px rgba(23,34,71,.10), 0 1px 0 rgba(255,255,255,.9) inset;
}
nav.side button.on .ic{color:var(--sig)}
nav.side .sep{background:var(--glass-edge)}
nav.side button .only{background:rgba(255,255,255,.6); border-color:rgba(255,255,255,.75)}

/* 새 문서 — 하루에 가장 많이 누르는 단추다. 유리가 아니라 **가장 진한 면**으로 둔다 */
nav.side .newbtn{
  background:linear-gradient(165deg,#2a3a63 0%,var(--sig) 55%,var(--sig-deep) 100%);
  box-shadow:0 6px 18px -8px rgba(23,34,71,.55), 0 1px 0 rgba(255,255,255,.28) inset;
}
nav.side .newbtn:hover{
  background:linear-gradient(165deg,#31416f 0%,#1b2850 52%,#0d1429 100%);
}

/* ---------- 카드 ----------
   몸통은 유리, 머리는 한 겹 더 밝게. 표가 든 카드라도 흰 기가 70% 라
   숫자가 바탕에 묻히지 않는다 */
.card{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--sh-glass);
}
.card > h2{
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.18));
  border-bottom:1px solid var(--glass-edge);
}
.card > h2 .sub{background:rgba(255,255,255,.62); color:var(--ink-2)}
.card .foot{background:rgba(255,255,255,.34); border-top:1px solid var(--glass-edge)}
.cardnote{border-top-color:var(--glass-edge)}

/* ---------- 표 ----------
   **여기는 유리가 아니다.** 줄마다 반투명하면 금액이 뒤 배경과 섞인다.
   대신 줄 사이 선을 유리에 맞춰 옅게 하고, 짚는 줄만 흰빛으로 든다 */
table.grid th{background:rgba(255,255,255,.42); border-bottom-color:var(--glass-edge)}
table.grid td{border-bottom-color:rgba(23,34,71,.08)}
table.grid tbody tr:hover{background:rgba(255,255,255,.62)}
table.grid tfoot th{background:rgba(255,255,255,.52); border-top-color:var(--glass-edge)}

/* ---------- 숫자 칸 ---------- */
.tile{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  border:1px solid var(--glass-line);
  box-shadow:var(--sh-glass);
}
.tile:hover,button.tile:hover{box-shadow:var(--sh-glass-2); border-color:rgba(255,255,255,.8)}
.tile.due{
  background:linear-gradient(165deg,rgba(255,255,255,.82),rgba(230,237,255,.62));
  border-color:rgba(165,183,244,.62);
}
.tile.hot{
  background:linear-gradient(165deg,rgba(255,255,255,.84),rgba(253,232,229,.66));
  border-color:rgba(240,187,178,.62);
}
.tile .tic{box-shadow:0 1px 0 rgba(255,255,255,.7) inset}

/* ---------- 출퇴근 띠 · 한 줄 알림 · 빠른 작업 ---------- */
.punchbar{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--sh-glass);
}
.punchbar.working{background:linear-gradient(165deg,rgba(255,255,255,.82),rgba(226,246,238,.60)); border-color:rgba(150,208,186,.6)}
.punchbar.leave{background:linear-gradient(165deg,rgba(255,255,255,.82),rgba(230,238,250,.60)); border-color:rgba(178,197,228,.6)}
.punchbar .what:not(:empty){border-left-color:var(--glass-edge)}

.topnote{
  background:linear-gradient(165deg,rgba(255,251,240,.78),rgba(253,242,216,.58));
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid rgba(240,223,178,.72); box-shadow:var(--sh-glass);
}
.topnote .ti{background:rgba(255,255,255,.68)}
.notice{
  background:linear-gradient(165deg,rgba(255,251,240,.78),rgba(253,242,216,.58));
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  border-color:rgba(240,223,178,.72);
}
.notice.urgent{
  background:linear-gradient(165deg,rgba(255,246,244,.80),rgba(253,231,227,.60));
  border-color:rgba(240,198,190,.74);
}

.todoline:hover{background:rgba(255,255,255,.62)}
.todoline + .todoline{box-shadow:inset 0 1px 0 var(--glass-edge)}
.todoline .tb{background:rgba(255,255,255,.66); border-color:rgba(23,34,71,.20)}
.todoline .tn{background:var(--point-soft); color:var(--point)}
.qa:hover{background:rgba(255,255,255,.62)}
.qa .qi{background:var(--point-soft); color:var(--point); box-shadow:0 1px 0 rgba(255,255,255,.7) inset}

/* ---------- 다짐 · 사이드바 카드 ----------
   여기만은 유리 뒤에 **시그니처를 직접** 깐다. 하루에 수십 번 보는 자리라
   기관 색이 한 군데는 분명히 있어야 한다 */
.creed{
  background:linear-gradient(152deg,rgba(228,246,238,.84) 0%,rgba(216,226,252,.66) 54%,rgba(224,242,244,.62) 100%);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.72); box-shadow:var(--sh-glass);
}
.creed .qt{color:var(--sig-deep)}
.navcard{
  background:linear-gradient(152deg,rgba(228,240,246,.74) 0%,rgba(219,240,232,.62) 52%,rgba(232,244,220,.56) 100%);
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.68);
}

/* ---------- 진행률 막대 ---------- */
.prog .pb{background:rgba(23,34,71,.10)}
.prog .pb span{background:linear-gradient(90deg,var(--point),var(--point-3))}
.prog .pp{color:var(--point)}

/* ---------- 단추 ---------- */
.btn{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  border-color:rgba(255,255,255,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 8px -4px rgba(23,34,71,.28);
}
.btn:hover{background:rgba(255,255,255,.9); border-color:#fff}
.btn.pri{
  background:linear-gradient(165deg,#2a3a63,var(--sig) 56%,var(--sig-deep));
  border-color:transparent; color:#fff;
  box-shadow:0 6px 18px -8px rgba(23,34,71,.52), 0 1px 0 rgba(255,255,255,.28) inset;
}
.btn.pri:hover{background:linear-gradient(165deg,#31416f,#1b2850 56%,#0d1429); border-color:transparent}
.card .foot button{background:rgba(255,255,255,.76); border-color:rgba(255,255,255,.86)}
.card .foot button.primary{
  background:linear-gradient(165deg,#2a3a63,var(--sig) 56%,var(--sig-deep));
  border-color:transparent;
}
.chipbtn{background:rgba(255,255,255,.66); border-color:rgba(255,255,255,.8)}

/* ---------- 모달 ----------
   뒤 화면을 세게 흐린다. 결재 창이 떴을 때 뒤 목록이 또렷하면 어느 쪽을
   보라는 건지 헷갈린다 */
.mask{
  background:rgba(26,33,64,.28);
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
}
/*
 * 결재 창은 **거의 불투명하게** 둔다. 뒤에 깔린 어두운 막이 비치면 흰 면이
 * 잿빛으로 내려앉고, 그 위에서 금액과 결재선을 읽어야 한다.
 * 여기는 돈을 승인하는 자리다 — 유리보다 읽히는 쪽이 먼저다.
 */
.modal{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(26px); backdrop-filter:saturate(180%) blur(26px);
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 32px 80px -20px rgba(20,28,64,.44);
}
.modal .mh{border-bottom-color:var(--glass-edge)}
.modal .mf{background:rgba(255,255,255,.42); border-top-color:var(--glass-edge)}

/* ---------- 입력칸 ----------
   **반투명으로 두지 않는다.** 적어 넣은 값이 바탕과 섞이면 잘못 읽는다.
   대신 초점 테두리를 시그니처로 바꿔 어디를 쓰고 있는지 분명히 한다 */
.fld input,.fld select,.fld textarea{background:rgba(255,255,255,.94); border-color:rgba(23,34,71,.18)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(23,34,71,.32)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--sig); box-shadow:0 0 0 3px rgba(18,158,110,.18); background:#fff;
}
:focus-visible{outline-color:rgba(18,158,110,.55)}
.bulkbar{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  border-color:var(--glass-line);
}
.bulkinfo{color:var(--ink)}
td.pickcell input,th.pickcell input{accent-color:var(--sig)}

/* ---------- 잠깐 뜨는 알림 ---------- */
.toast{
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
}

/* =========================================================
   유리를 쓸 수 없을 때

   ① 브라우저가 `backdrop-filter` 를 모를 때 — 반투명만 남으면 뒤 글자가
      그대로 비쳐서 읽을 수가 없다. 거의 불투명으로 올린다.
   ② 사람이 **투명도 줄이기**를 켰을 때 — 눈이 불편해서 켠 설정이다.
      예쁨보다 그쪽이 먼저다.
   ========================================================= */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .top,.card,.tile,.punchbar,.modal,.btn,.bulkbar{background:rgba(255,255,255,.97)}
  nav.side{background:rgba(255,255,255,.92)}
  .mask{background:rgba(26,33,64,.58)}
  .btn.pri,.card .foot button.primary,nav.side .newbtn{background:var(--sig)}
}

@media (prefers-reduced-transparency:reduce){
  body::before{background:linear-gradient(178deg,#eef1fb,#f6f8fd)}
  .top,.card,.tile,.punchbar,.modal,.btn,.bulkbar,nav.side{
    background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
    border-color:var(--line-2);
  }
  .mask{background:rgba(26,33,64,.62); -webkit-backdrop-filter:none; backdrop-filter:none}
  .btn.pri,.card .foot button.primary,nav.side .newbtn{background:var(--sig)}
}

/* 인쇄물에는 유리가 없다. 흐림이 남으면 프린터가 회색 덩어리로 찍는다 */
@media print{
  body::before{display:none}
  .card,.tile,.punchbar,.modal,.topnote,.notice,.creed,.bulkbar{
    background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    box-shadow:none !important;
  }
}

/* ---------- 모달 안쪽 ----------
   `--surface-2` 같은 **회색 면**은 흰 카드 위에서는 은은하지만, 유리 위에
   얹히면 탁한 회색 덩어리가 된다. 모달 안에서는 흰 기가 도는 반투명으로 바꾼다 */
dl.kv{border-color:var(--glass-edge)}
dl.kv dt{background:rgba(240,243,252,.72); border-bottom-color:var(--glass-edge)}
dl.kv dd{border-bottom-color:var(--glass-edge)}
.sumbar{
  background:linear-gradient(165deg,rgba(255,255,255,.88),rgba(228,240,246,.60));
  border-color:rgba(255,255,255,.8);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
table.items{border-color:var(--glass-edge)}
table.items th{background:rgba(240,243,252,.72); border-bottom-color:var(--glass-edge)}
.filelist li{background:rgba(255,255,255,.56); border-color:var(--glass-line)}
.fsec::after{background:var(--glass-edge)}
.subttl::after{background:var(--glass-edge)}

/* 결재선 칸 · 상태 알약은 그대로 둔다 — 색이 뜻을 가진 자리다 */


/* =========================================================
   통합 검색 (⌘K)
   ========================================================= */

/* ---------- 상단바 단추 ---------- */
/*
 * 단축키를 적어 둔다. 검색이 있는 줄 모르면 안 쓰고, ⌘K 를 모르면 매번
 * 마우스로 온다. 글자 두 개가 그 둘을 다 해결한다.
 */
.topsearch{
  display:flex; align-items:center; gap:9px;
  height:34px; padding:0 10px 0 11px; margin-right:10px;
  border:1px solid var(--glass-line); border-radius:999px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  font:inherit; font-size:12.5px; color:var(--muted); letter-spacing:-.012em;
  cursor:pointer; transition:background var(--ease), border-color var(--ease), color var(--ease);
}
.topsearch:hover{background:rgba(255,255,255,.92); border-color:#fff; color:var(--ink-2)}
.topsearch .si{
  width:15px; height:15px; flex:0 0 15px; opacity:.8;
  background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat;
  --m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'><circle cx='9' cy='9' r='5.4'/><path d='m13.1 13.1 3.5 3.5'/></svg>");
}
.topsearch .sk{
  font:inherit; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  color:var(--muted-2); background:rgba(255,255,255,.72);
  border:1px solid var(--glass-line); border-radius:6px; padding:1px 5px;
}
@media (max-width:720px){
  .topsearch{padding:0 11px; margin-right:6px}
  .topsearch .st, .topsearch .sk{display:none}
}

/* ---------- 검색 상자 ---------- */
/*
 * 화면 **위쪽 1/5** 지점에 띄운다. 한가운데 두면 눈이 아래로 내려갔다가
 * 결과를 보려고 다시 올라온다.
 */
.cmdmask{
  position:fixed; inset:0; z-index:70;
  background:rgba(26,33,64,.30);
  -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px);
  display:flex; justify-content:center; align-items:flex-start;
  padding:11vh 18px 24px;
  animation:fade 140ms ease-out;
}
.cmdk{
  width:100%; max-width:640px; overflow:hidden;
  border-radius:18px; border:1px solid rgba(255,255,255,.76);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(26px); backdrop-filter:saturate(180%) blur(26px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 32px 80px -20px rgba(20,28,64,.46);
  animation:rise 180ms cubic-bezier(.2,.7,.2,1);
}
.cmdhead{display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--glass-edge)}
.cmdhead .ci{flex:0 0 auto; display:inline-flex; color:var(--muted)}
.cmdhead .ci .ic{width:18px; height:18px}
.cmdhead input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font:inherit; font-size:16px; letter-spacing:-.02em; color:var(--ink);
}
.cmdhead input::placeholder{color:var(--muted-2)}
/* 크롬이 검색칸에 붙이는 × 는 뺀다. 우리 esc 표시와 겹친다 */
.cmdhead input::-webkit-search-cancel-button{display:none}
.cmdhead .esc{
  flex:0 0 auto; font:inherit; font-size:10.5px; font-weight:700; color:var(--muted-2);
  background:var(--surface-3); border:1px solid var(--line); border-radius:6px; padding:2px 6px;
}
.cmdbody{max-height:min(56vh,520px); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px}

/* ---------- 결과 ---------- */
.cmdgroup + .cmdgroup{margin-top:4px; padding-top:6px; border-top:1px solid var(--glass-edge)}
.cmdgt{
  display:flex; align-items:center; gap:7px; padding:7px 12px 5px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--muted-2);
}
.cmdgt .cnt{font-weight:650; letter-spacing:0; color:var(--muted-2); opacity:.8}
.cmdrow{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 12px; border:0; border-radius:11px; background:none;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
}
.cmdrow:hover{background:var(--surface-3)}
/* 화살표로 짚은 줄 — 마우스 없이 고르는 사람에게 **어디에 있는지**가 보여야 한다 */
.cmdrow.on{background:var(--point-soft); box-shadow:0 0 0 1px rgba(18,158,110,.26) inset}
.cmdrow .ci{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px;
  color:var(--point); background:var(--point-soft);
}
.cmdrow .ci .ic{width:16px; height:16px}
.cmdrow .cx{flex:1; min-width:0}
.cmdrow .cx b{
  display:block; font-size:13.5px; font-weight:650; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cmdrow .cx span{
  display:block; margin-top:1px; font-size:11.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cmdrow .cv{
  flex:0 0 auto; font-size:12.5px; font-weight:650; color:var(--ink-2);
  letter-spacing:-.015em; white-space:nowrap;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}
.cmdrow .chip{flex:0 0 auto}
.cmdmore{padding:4px 12px 8px 53px; font-size:11.5px; color:var(--muted-2)}

/* ---------- 안내 · 빈 결과 ---------- */
/*
 * **무엇을 찾을 수 있는지**를 적어 둔다. 빈 상자에 "결과 없음" 한 줄만 뜨면
 * "이건 문서만 찾나 보다" 하고 다시 안 쓴다.
 */
.cmdhint{padding:16px 18px 18px; font-size:12.5px; color:var(--muted); line-height:1.7}
.cmdhint b{display:block; color:var(--ink-2); font-weight:650; margin-bottom:6px}
.cmdhint ul{margin:0; padding-left:17px}
.cmdhint li{margin:1px 0}
.cmdhint .k{display:block; margin-top:12px; font-size:11.5px; color:var(--muted-2)}
.cmdhint kbd,.cmdhint .k kbd{
  font:inherit; font-size:10.5px; font-weight:700;
  background:var(--surface-3); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; margin-right:3px;
}
.cmdempty{padding:20px 18px; font-size:13px; color:var(--ink-2); line-height:1.7}
.cmdempty b{font-weight:650}
.cmdempty span{display:block; margin-top:5px; font-size:12px; color:var(--muted)}


/* =========================================================
   알림함 (종)
   ========================================================= */

.topbell{
  position:relative; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-right:8px;
  border:1px solid var(--glass-line); border-radius:999px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  color:var(--muted); cursor:pointer;
  transition:background var(--ease), color var(--ease), border-color var(--ease);
}
.topbell:hover{background:rgba(255,255,255,.92); border-color:#fff; color:var(--ink-2)}
.topbell .ic{width:17px; height:17px}
/* 안 읽은 것이 있으면 종 자체도 진해진다 — 숫자만 있으면 작아서 놓친다 */
.topbell.on{color:var(--sig)}
.topbell .bdot{
  position:absolute; top:-3px; right:-3px;
  min-width:17px; height:17px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--bad); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:-.01em; line-height:1;
  box-shadow:0 0 0 2px rgba(255,255,255,.85);
}

/* ---------- 펼침 ---------- */
/*
 * 상단바 오른쪽에 매달린다. 화면 한가운데 띄우면 "무엇을 하다 말았는지" 를
 * 잊는다 — 알림은 보던 일을 멈추게 하는 것이 아니라 곁눈으로 보는 것이다.
 */
.nfmask{position:fixed; inset:0; z-index:66; background:transparent}
.nfpanel{
  position:absolute; top:56px; right:18px; width:min(400px,calc(100vw - 28px));
  border-radius:18px; border:1px solid rgba(255,255,255,.76);
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:saturate(180%) blur(26px); backdrop-filter:saturate(180%) blur(26px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 26px 64px -18px rgba(20,28,64,.42);
  overflow:hidden; animation:rise 170ms cubic-bezier(.2,.7,.2,1);
}
.nfhead{
  display:flex; align-items:center; gap:9px; padding:14px 16px 12px;
  border-bottom:1px solid var(--glass-edge);
}
.nfhead b{font-size:14px; font-weight:680; letter-spacing:-.02em}
.nfnew{
  font-size:11px; font-weight:650; color:var(--point);
  background:var(--point-soft); border-radius:999px; padding:2px 8px;
}
.nflist{max-height:min(60vh,520px); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px}
.nfrow{
  display:flex; align-items:flex-start; gap:11px; width:100%;
  padding:10px 11px; border:0; border-radius:12px; background:none;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
}
.nfrow:hover{background:var(--surface-3)}
.nfrow .ni{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; margin-top:1px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.nfrow .ni .ic{width:16px; height:16px}
.nfrow .ni.indigo{color:var(--ic-indigo); background:var(--ic-indigo-bg)}
.nfrow .ni.mint{color:var(--ic-mint); background:var(--ic-mint-bg)}
.nfrow .ni.sky{color:var(--ic-sky); background:var(--ic-sky-bg)}
.nfrow .ni.violet{color:var(--ic-violet); background:var(--ic-violet-bg)}
.nfrow .ni.rose{color:var(--ic-rose); background:var(--ic-rose-bg)}
.nfrow .nx{flex:1; min-width:0}
.nfrow .nx b{font-size:13px; font-weight:650; letter-spacing:-.018em}
.nfrow .nd{
  display:block; margin-top:2px; font-size:12px; color:var(--muted);
  line-height:1.5; word-break:keep-all;
}
.nfrow .nt{display:block; margin-top:3px; font-size:11px; color:var(--muted-2)}
/* 아직 안 본 것 — 점 하나. 줄 전체를 물들이면 목록이 소란스럽다 */
.nfrow .ndot{
  flex:0 0 auto; width:7px; height:7px; margin-top:9px;
  border-radius:50%; background:var(--point-2);
}
.nfrow.new .nx b{color:var(--sig)}
.nfmore{padding:6px 16px 14px; font-size:11.5px; color:var(--muted-2)}
.nfempty{padding:22px 18px 24px; font-size:13px; color:var(--ink-2); line-height:1.7}
.nfempty b{display:block; font-weight:650}
.nfempty span{display:block; margin-top:4px; font-size:12px; color:var(--muted)}

@media (max-width:520px){
  .nfpanel{top:52px; right:10px; left:10px; width:auto}
}


/* =========================================================
   프로필 사진
   ========================================================= */

/* 사진이 들어가면 글자 자리가 아니라 그림 자리가 된다 */
.avatar.hasimg{padding:0; overflow:hidden; background:var(--surface-3)}
.avatar img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit}

/* 프로필 카드의 큰 동그라미 + 연필 */
.pfhead .pav{flex:0 0 auto; display:inline-block; line-height:0}
.pfhead .pav.busy{opacity:.5}
.pavedit{
  position:absolute; right:-2px; bottom:-2px;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--sig); color:#fff; cursor:pointer;
  border:2px solid var(--surface);
  box-shadow:0 2px 8px -3px rgba(23,34,71,.45);
  transition:background var(--ease);
}
.pavedit:hover{background:var(--sig-deep)}
.pavedit .ic{width:15px; height:15px}
.pfhead .pav.busy .pavedit{pointer-events:none}

/* 글자처럼 보이는 단추 — "사진 지우기" 같은 곁가지 동작 */
.linkbtn{
  border:0; background:none; padding:0; font:inherit; font-size:12px;
  color:var(--muted); text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.linkbtn:hover{color:var(--bad)}


/* =========================================================
   첫 화면 달력 — 한 달을 격자로
   ========================================================= */

.card > h2 .sub.ol{
  color:var(--point); background:var(--point-soft);
}
.body.mcbody{padding:0 0 4px}
.mcnav{display:flex; gap:6px; align-items:center}

.mcgrid{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px; background:var(--line); border-top:1px solid var(--line);
}
.mchead{
  background:var(--surface-2); text-align:center; padding:6px 0;
  font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.02em;
}
.mchead.sun{color:var(--bad)}
.mchead.sat{color:#2b5c8a}

/* 칸 — 단추다. 눌러서 아래에 하루치를 펼친다 */
.mcell{
  appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  background:var(--surface); border:0; border-radius:0;
  padding:5px 6px 7px; min-height:96px; text-align:left; overflow:hidden;
}
.mcell:hover{background:var(--surface-2)}
/* 앞뒤 달 — 지우지 않고 흐리게. 비워 두면 달력이 이가 빠진 것처럼 보인다 */
.mcell.other{background:var(--surface-3)}
.mcell.other .dn{color:var(--muted-2)}
.mcell.other .ev{opacity:.55}
.mcell.past .ev{opacity:.62}
.mcell.sun .dn{color:var(--bad)}
.mcell.sat .dn{color:#2b5c8a}
.mcell.hol .dn{color:var(--bad)}

.mcell .dn{
  font-size:12.5px; font-weight:700; letter-spacing:-.02em; color:var(--ink);
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
  line-height:1.5; padding-left:1px;
}
.mcell .hn{
  font-size:9.5px; color:var(--bad); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 오늘 — 숫자만 알약에 넣는다. 칸 전체를 물들이면 달력이 소란스럽다 */
.mcell.today .dn{
  align-self:flex-start; color:#fff; background:var(--point-2);
  border-radius:999px; min-width:22px; padding:0 7px; text-align:center;
}
/* 고른 날 — 아래 펼쳐 둔 하루가 어느 칸인지 보여야 한다 */
.mcell.on{box-shadow:inset 0 0 0 2px var(--point-2)}

.mcell .ev{
  display:flex; align-items:baseline; gap:4px; min-width:0;
  font-size:11px; letter-spacing:-.015em; line-height:1.45;
  padding:1px 5px; border-radius:5px;
  background:rgba(255,255,255,.62); border-left:3px solid var(--ic-indigo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mcell .ev.violet{border-left-color:var(--ic-violet)}
.mcell .ev.sky{border-left-color:var(--ic-sky)}
.mcell .ev.mint{border-left-color:var(--ic-mint)}
.mcell .ev.indigo{border-left-color:var(--ic-indigo)}
.mcell .ev i{
  flex:0 0 auto; font-style:normal; font-size:10px; font-weight:650; color:var(--ink-2);
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}
.mcell .more{font-size:10px; color:var(--muted); padding-left:3px}

/* 고른 날 하루치 — 격자에는 제목뿐이라 시각과 장소는 여기서 본다 */
.mcday{padding:12px 18px 4px}
.mcdh{
  font-size:12.5px; font-weight:700; color:var(--ink-2);
  letter-spacing:-.01em; margin-bottom:7px;
}
.mcdl{display:grid; gap:5px}
.wknone{font-size:12px; color:var(--muted-2); padding:3px 0}

.wkitem{
  display:flex; align-items:baseline; gap:9px; min-width:0;
  padding:5px 10px; border-radius:9px;
  background:rgba(255,255,255,.62); border-left:3px solid var(--ic-indigo);
}
.wkitem.violet{border-left-color:var(--ic-violet)}
.wkitem.sky{border-left-color:var(--ic-sky)}
.wkitem.mint{border-left-color:var(--ic-mint)}
.wkitem.indigo{border-left-color:var(--ic-indigo)}
.wkitem .tm{
  flex:0 0 auto; font-size:11px; font-weight:650; color:var(--ink-2);
  letter-spacing:-.01em; white-space:nowrap;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}
.wkitem .tm.all{color:var(--muted-2); font-weight:600}
.wkitem .tt{
  flex:1; min-width:0; font-size:12.5px; letter-spacing:-.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 여러 날짜리 — 오늘이 첫날인지 마지막 날인지 적는다 */
.wkitem .tt .cont{
  margin-left:6px; font-size:10.5px; color:var(--muted-2);
}
.wkitem .pl{
  flex:0 0 auto; max-width:35%; font-size:11px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 좁은 화면 — 일곱 칸은 그대로 둔다. 달력은 요일이 세로로 서야 달력이다.
   대신 칸 안의 제목을 지우고 **점만** 남긴다. 글자를 두 글자씩 잘라 놓으면
   무슨 일정인지 알 수 없어서, 어차피 눌러서 아래에서 읽게 된다 */
@media (max-width:720px){
  .mcell{min-height:58px; padding:4px 3px 5px; gap:1px}
  .mcell .dn{font-size:11.5px; line-height:1.35}
  .mcell .hn{display:none}
  .mcell .ev{
    padding:0; border-left:0; background:none; border-radius:0;
    height:4px; margin:0 auto; width:calc(100% - 4px); max-width:26px;
    border-radius:999px; font-size:0; overflow:hidden;
    background:var(--ic-indigo);
  }
  .mcell .ev.violet{background:var(--ic-violet)}
  .mcell .ev.sky{background:var(--ic-sky)}
  .mcell .ev.mint{background:var(--ic-mint)}
  .mcell .ev i{display:none}
  .mcell .more{font-size:9px; text-align:center; padding:0}
  .mcday{padding:12px 14px 4px}
  .wkitem{flex-wrap:wrap; gap:4px 8px}
  .wkitem .pl{max-width:100%}
}


/* =========================================================
   좁은 상단바 — 검색 · 종이 들어온 뒤

   상단바에 단추 둘(검색 · 종)이 늘었다. 휴대폰에서는 그만큼 이름 자리가
   줄어드는데, 줄어들 줄 모르는 조각이 하나라도 있으면 **그 줄이 통째로 터진다.**
   실제로 "소우주사회적협동조합 통합 결재" 가 검색 단추를 뚫고 나가고,
   오른쪽 이름이 "유 / 지 / 영" 으로 세로로 쪼개졌다.

   고치는 방법은 하나다 — **줄어들 수 있는 것과 없는 것을 분명히 나눈다.**
   ========================================================= */
@media (max-width:860px){
  .top{gap:9px; padding:0 14px}

  /* 줄어드는 쪽 — 기관 이름. 자리가 없으면 말줄임으로 접는다 */
  .top .brand{flex:1 1 auto; min-width:0}
  .top .brand b{overflow:hidden; text-overflow:ellipsis; font-size:14px}

  /* 안 줄어드는 쪽 — 단추들. 눌러야 하는 것이라 작아지면 안 된다 */
  .top .spacer{display:none}
  .topsearch, .topbell, .top .who{flex:0 0 auto}

  /* 이름 — 한 줄로 두고 넘치면 접는다. `.sub`(직위 · 역할) 는 뺀다.
     동그라미 안 글자로도 누구인지 알고, 누르면 프로필이 열린다 */
  .top .who{min-width:0}
  .top .who .me{max-width:120px; padding:4px}
  .top .who .me > span:not(.avatar){
    min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .top .who .me .sub{display:none}
}

/* 더 좁으면 이름 글자까지 뺀다. 동그라미만 남겨 둔다 */
@media (max-width:460px){
  .top .who .me > span:not(.avatar){display:none}
  .top .who .me{max-width:none}
}

/* 거르개만 든 카드 머리 — 제목이 화면 제목 줄로 올라가 자리가 비었다.
   왼쪽에 붙여서 빈 칸이 어색하게 남지 않게 한다 */
.card > h2.onlyfilter{gap:8px; flex-wrap:wrap}
.card > h2.onlyfilter .fsel,
.card > h2.onlyfilter .fkw{margin:0}

/* ---------- 강사 · 계정 지급 ----------
   표 위에 붙는 요약 칩과, 강사 카드 안의 서류 줄이다. */

/* 구분별 · 계정별 요약 — 표를 읽기 전에 "몇 명 · 얼마" 가 먼저 들어와야 한다 */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px}

/* 서류 셋 — 통장사본 · 등본 · 프로필.
   **한 줄에 하나씩** 둔다. 표로 만들면 좁은 화면에서 단추가 잘린다 */
.doclist{display:flex; flex-direction:column; gap:8px; margin:0 0 14px}
.docrow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-2);
}
/* 기한이 지난 등본 — 갖고 있는 것 자체가 위험이라 줄째로 눈에 걸리게 한다 */
.docrow.bad{border-color:#e6c3be; background:rgba(200,80,60,.05)}
.docrow .dname{font-weight:650; font-size:13.5px; min-width:112px}
.docrow .dstate{flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.docrow .dbtn{display:flex; gap:6px; flex-shrink:0}

/* 표 안에서 바로 고치는 작은 고르개 — 후원 상태를 그 자리에서 바꾼다 */
select.mini{
  border:1px solid var(--line-2); border-radius:6px; padding:4px 8px;
  font-size:12.5px; font-family:inherit; background:var(--surface); color:var(--ink);
}
select.mini:focus{outline:none; border-color:var(--sig); box-shadow:0 0 0 3px rgba(18,158,110,.18)}

/* 표 칸 아래 붙는 한 줄 — 사업명 · 미납 개월 같은 것 */
td .hint{font-size:11px; line-height:1.45; color:var(--muted); margin-top:2px}
td .hint.bad{color:var(--bad)}

@media (max-width:560px){
  .docrow{align-items:flex-start; flex-direction:column; gap:8px}
  .docrow .dbtn{width:100%}
}

/* 좁은 화면의 아이콘 타일 — 금액 여섯 자리가 `600,0…` 로 잘리던 자리다.
   두 칸으로 늘어선 타일에서 아이콘 42px 이 글자 자리를 너무 많이 가져간다.
   아이콘을 조금 줄이고 숫자도 한 단계 낮춰 **금액이 다 보이게** 한다 */
@media (max-width:560px){
  .tile.withic{gap:10px; padding:13px 14px}
  .tile .tic{flex:0 0 34px; width:34px; height:34px; border-radius:10px}
  .tile .tic .ic{width:18px; height:18px}
  .tile.withic .v{font-size:18.5px}
  .tile.withic .v small{font-size:11px}
}

/* ---------- 자격증 발급 ----------
   과정(기수) 줄과 문자 초안이다. */

/* 표에 붙는 거르개 한 줄 — 카드 머리에 넣기에는 칸이 넷이라 넘친다 */
.filters{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:0 0 12px; border-bottom:1px solid var(--line); margin-bottom:2px;
}
.filters .fsel,.filters .fkw{margin:0}

/* 기수 한 줄 — 발급을 시작하는 자리라 단추가 오른쪽 끝에 붙는다 */
.courselist{display:flex; flex-direction:column; gap:8px}
.courserow{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 15px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-2);
}
.courserow .cname{min-width:180px; font-size:13.5px; font-weight:650}
.courserow .cwhere{flex:1; min-width:0; font-size:13px; color:var(--ink-2)}
.courserow .cnum{flex:0 0 auto}
.courserow .cbtn{flex:0 0 auto; margin-left:auto}
.courserow .hint{font-weight:400; margin-top:2px}

/* 문자 초안 — 줄바꿈이 그대로 보여야 실제로 갈 모양을 안다 */
.smsdraft{
  margin:0 0 6px; padding:13px 15px; white-space:pre-wrap; word-break:keep-all;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--surface); font-family:inherit; font-size:13px; line-height:1.72;
  color:var(--ink);
}

@media (max-width:640px){
  .courserow{align-items:flex-start; flex-direction:column; gap:8px}
  .courserow .cbtn{margin-left:0; width:100%}
  .courserow .cbtn .btn{width:100%}
}

/* 자격증 분야 묶음 — 자격증이 열한 개면 칩이 열한 개 늘어서서 안 읽힌다.
   안내물에서 쓰는 세 묶음으로 접고 그 안에 자격증을 둔다.

   `.chips` 를 쓰지 않는다. 그쪽은 가로로 늘어놓는 상자라 묶음 셋이 옆으로 붙는다 */
.fields{display:block; margin:0 0 12px}
.fieldrow{display:flex; gap:12px; align-items:baseline; padding:7px 0; flex-wrap:wrap}
.fieldrow + .fieldrow{border-top:1px solid var(--line)}
.fieldrow .fname{
  flex:0 0 148px; font-size:12.5px; font-weight:700; color:var(--sig);
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
.fieldrow .fcount{font-weight:600; color:var(--ink-2)}
.fieldrow .fwait{font-weight:600; color:var(--bad); font-size:11.5px}
.fieldrow .fchips{flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:5px}
/* 자격증 칩을 누르면 그것만 걸러 본다 */
.chip.pick{cursor:pointer; border:0; font:inherit; font-size:11.5px}
.chip.pick:hover{filter:brightness(.96)}

@media (max-width:640px){
  .fieldrow{flex-direction:column; gap:6px}
  .fieldrow .fname{flex:none}
}

/* 자격증 종류 칩 — 기호와 "등록번호 없음" 을 칩 안에 작게 붙인다.
   기호는 발급번호에 들어가는 값이라 목록에서 바로 보여야 겹친 것을 알아챈다 */
.chip .tsym{opacity:.62; font-weight:600; margin-left:2px}
.chip .tno{color:var(--bad); font-weight:600; margin-left:3px}

/* 폼 안의 단추 줄 — 카드 머리가 아니라 폼 끝에 붙는 것들 */
.formbtn{display:flex; justify-content:flex-end; gap:6px; margin-top:14px}
.btn.bad{color:var(--bad)}

/* ---------- 자격증 인쇄 ----------

   상장용지에 그대로 나가는 한 장이다. 그래서 지키는 것이 셋 있다.

   1. **단위는 pt.** 인쇄 배율 100% 에서 1pt = 1/72인치가 정확히 맞는다.
      mm 로 적고 브라우저가 px 로 반올림하면 글자마다 조금씩 밀린다
   2. **여백은 0.** 종이에 무늬가 미리 인쇄되어 있어 좌표를 그대로 지켜야 한다
   3. **인쇄할 때는 이것만 나간다.** 화면 장식이 한 줄이라도 섞이면 그 장은 버린다
*/
.cprint{ display:none }

.csheet{
  position:relative; box-sizing:border-box;
  width:var(--csheet-w); height:var(--csheet-h);
  background:#fff; color:#000; overflow:hidden;
}
.csheet .cinner{ position:absolute; inset:0 }

/*
 * 증서 글꼴 — **우리가 들고 있는 명조를 쓴다** (`fonts/cert/certificate.css`).
 *
 * 처음에는 직원 PC 의 바탕체를 부르게 두었는데, 그러면 그 글꼴이 없는 PC 에서
 * 고딕으로 뽑혀 나간다. 자격증은 한 번 우편으로 나가면 되돌릴 수 없다.
 * 화면 글꼴(Pretendard)을 우리 서버에서 내주는 것과 같은 이유다.
 */
.csheet,
.csheet .cval,.csheet .clab,
.csheet .cregno,.csheet .ctitle,.csheet .cbody,.csheet .cdate,.csheet .corg{
  font-family:'소우주 증서','HYSinMyeongJo-Medium','바탕','Batang',
    'AppleMyungjo','Nanum Myeongjo',serif;
  /*
   * **굵은 판을 쓴다.** 원본과 나란히 놓고 보니 400 은 획이 가늘어 글자가
   * 작아 보였다. 원본의 명조는 획이 도톰한 판이고, 나눔명조에서 그 자리에
   * 가장 가까운 것이 700 이다. 증서는 상장용지에 인쇄되어 나가는 종이라
   * 화면에서 적당한 굵기보다 한 단계 도톰한 편이 낫다.
   */
  font-weight:700;
}
/* 영문 부제는 동판 흘림체 */
.csheet .cen{
  font-family:'소우주 증서 흘림','Edwardian Script ITC','Monotype Corsiva',
    'Apple Chancery',cursive;
}

.csheet .cregno,.csheet .ctitle,.csheet .cen,.csheet .cdate,.csheet .corg,
.csheet .cval,.csheet .clab,.csheet .cbody{
  position:absolute; line-height:1; white-space:pre; color:#000;
}
/*
 * 본문 — 양끝맞춤을 쓰되 **낱말을 묶어 두지 않는다.**
 *
 * 처음에 `word-break: keep-all` 을 걸어 두었다. 낱말이 가운데서 갈리지 않게
 * 하려던 것인데, 그러면 다음 낱말이 통째로 다음 줄로 내려가서 한 줄에 빈
 * 자리가 크게 남는다. 거기에 양끝맞춤이 겹치니 낱말 사이가 몇 배로 벌어졌다
 * (`위      사람은      소우주사회적협동조합에서`).
 *
 * 그래서 양끝맞춤을 걷어냈더니 이번에는 줄 끝이 들쭉날쭉해 원본과 달라 보였다.
 *
 * 원인은 양끝맞춤이 아니라 `keep-all` 이었다. **한글은 원래 음절 단위로
 * 줄을 바꾼다** — 원본도 `『 자격` / `기본법』` 로 갈라 놓았다. 묶기를 풀면
 * 줄이 꽉 차고, 그러면 양끝맞춤이 벌릴 자리도 거의 없어진다.
 */
.csheet .cbody{
  white-space:normal;
  text-align:justify; text-align-last:left;
  word-break:normal;
}
/* 라벨 상자 — 글자는 양끝으로 벌어지고(원본의 `성    명`) 콜론은 오른쪽 끝에 붙는다 */
.csheet .clab{
  display:flex; align-items:baseline; white-space:nowrap;
}
/*
 * 두세 글자 라벨(`성명` · `자격명`)을 상자 폭만큼 벌린다 —
 * 원본의 `성    명` 이 그 모양이다.
 *
 * `text-align-last: justify` 로는 안 된다. 크로미움은 한글을 낱말 단위로
 * 보기 때문에 빈칸 없는 `성명` 은 벌릴 자리가 없다고 보고 왼쪽에 붙여 버린다.
 * 그래서 화면이 글자를 하나씩 떼어 넣고(`views.js`), 여기서 고르게 나눈다.
 */
.csheet .clab .ct{
  flex:1 1 auto;
  display:flex; justify-content:space-between;
  white-space:nowrap;
}
/* 콜론 앞에 한 칸 — 붙여 두면 `생년월일: 1988년` 으로 답답하게 붙는다 */
.csheet .clab .cc{ flex:0 0 auto; margin-left:.25em }
.csheet .cbg{ position:absolute; opacity:.28 }
.csheet .cseal{ position:absolute; mix-blend-mode:multiply }

/* 미리보기 — 화면에서는 줄여서 보여 준다. 인쇄에서는 이 줄임을 걷어낸다 */
#certprintcard + .cprint{
  display:block; margin:0 auto 18px;
  width:var(--csheet-w);
  transform:scale(.62); transform-origin:top center;
  /* scale 은 자리를 차지하지 않는다. 줄어든 만큼 아래 여백을 당겨 준다 */
  margin-bottom:calc(-0.38 * var(--csheet-h));
}
#certprintcard + .cprint .csheet{
  box-shadow:0 10px 30px rgba(23,34,71,.20); margin:0 auto 14pt;
}

@media print{
  @page{ size:A4; margin:0 }

  /* 증서만 나간다. 카드 · 안내 · 왼쪽 메뉴가 한 줄이라도 섞이면 그 장은 버린다.
     `#main` 아래에서 `#certprint` 를 뺀 나머지를 통째로 지운다 */
  body.printcert{ background:#fff !important; margin:0 !important }
  body.printcert::before{ display:none !important }
  body.printcert .top,body.printcert .side,body.printcert #modalHost,
  body.printcert #searchHost,body.printcert #nfHost,body.printcert .toast{
    display:none !important;
  }
  body.printcert .wrap{ display:block; padding:0 !important; margin:0 !important }
  body.printcert #main{ padding:0 !important; margin:0 !important }
  body.printcert #main > *{ display:none !important }
  body.printcert #main > #certprint{ display:block !important }

  body.printcert #certprint{
    position:static; transform:none !important; margin:0 !important; width:auto;
  }
  body.printcert .csheet{
    box-shadow:none !important; margin:0 !important;
    break-after:page; page-break-after:always;
  }
  body.printcert .csheet:last-child{ break-after:auto; page-break-after:auto }
  /* 바탕 무늬와 도장이 회색 덩어리로 찍히지 않게 색을 그대로 내보낸다 */
  body.printcert .csheet img{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}

/* 인쇄 전 확인 목록 */
ul.cguide{ margin:6px 0 0; padding-left:18px }
ul.cguide li{ margin:2px 0 }

/* 증서에 찍히는 그림 — 기준자료 › 설정 */
.seals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px }
.sealbox{
  display:flex; gap:14px; align-items:flex-start; min-width:0;
  padding:12px; border:1px solid var(--glass-edge); border-radius:12px;
}
.sealview{
  flex:0 0 auto; width:84px; height:84px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--glass-edge); overflow:hidden;
}
.sealview img{ max-width:100%; max-height:100%; object-fit:contain }
.sealnone{ font-size:12px; color:var(--muted) }
.sealtxt{ min-width:0; flex:1 1 auto }
.sealbtn{ margin-top:8px }

/* 활동확인서 — 지급액을 실을지 고르는 자리 */
.bulkbar .showmoney{
  display:inline-flex; align-items:center; gap:7px;
  margin-left:auto; font-size:13px; color:var(--muted);
}
.bulkbar .showmoney b{ color:var(--ink) }
/* 신청 창구 주소 — 길어도 줄이 넘치지 않게 */
code.pathline{
  display:inline-block; max-width:100%; overflow-wrap:anywhere;
  padding:3px 7px; border-radius:6px;
  background:var(--surface-2); font-size:12.5px;
}