/* ============================================================
   근태도장 새 관리자 화면 공통 셸

   머리줄, 컨테이너, 두 단 격자, 왼쪽 직원 패널, 달력, 카드, 줄 목록, 배지.
   /admin/home 과 /admin/staff 가 같이 쓴다. 다음 메뉴도 이 파일을 본다.
   화면마다 복사해서 고치면 한 군데만 고치고 끝나는 날이 온다.

   색·크기·간격은 전부 /tokens.css 에 있다. 여기서 다시 적지 않는다.
   ============================================================ */
/* ============================================================
   근태도장 첫 화면

   그룹웨어 첫 화면과 겹치지 않게 짰다.
   비교해 본 화면들의 실측값은 이 파일에 적지 않는다.
   남의 색 번호를 고객사마다 깔리는 파일에 넣을 이유가 없다.
   무엇을 보고 무엇을 피했는지는 커밋 2.69.0 에 남겨 뒀다.

   색은 파랑으로 통일한다. 사장님이 그렇게 고르셨다.
   다만 남들이 쓰는 밝은 하늘파랑은 피하고 더 깊은 쪽으로 내렸다.
   같은 파랑이라도 밝기와 채도가 다르면 다른 제품으로 보인다.

   우리가 고른 것과 그 이유
     글꼴    Pretendard. 굵기를 500·600·700·800 네 단으로 쓴다.
             두 단만 쓰면 무엇이 중요한지 안 보인다.
     색      짙은 코발트 #1B4DA0 하나로 모은다.
             빨강 #C0392B 는 급한 것과 미기록에만 쓴다. 넓이로 5%를 안 넘긴다.
     바탕    #F2F4F7. 파랑으로 살짝만 기운 회색.
     모서리  바깥 20px, 안쪽 10px 두 단. 한 값으로 통일하지 않는다.
     그림자  안 쓴다. 1px 테두리로만 가른다.
     아이콘  직접 그린 SVG. 선 굵기 1.7 로 결을 맞췄다.
             색은 아이콘이 아니라 뒤 타일에 준다.
             여섯 묶음을 같은 파랑 계열 안에서 깊이만 달리해 갈랐다.
             색을 통일하면서도 묶음이 눈에 보이게 하는 방법이다.
     배치    바로가기는 가로줄이다. 타일이 왼쪽, 글자가 오른쪽.
             정사각 타일을 격자로 깔고 글자를 밑에 다는 쪽을 쓰지 않았다.
     띠      맨 위 한 덩어리를 옅은 파랑으로 칠한다.
             처음엔 짙게 했다가 어둡다고 하셔서 밝게 내렸다.
             근태와 급한 건수를 여기에 넣는다. 아침에 제일 먼저 보실 것이다.
   ============================================================ */
/* 색·크기·간격은 전부 /tokens.css 에 있다. 여기서 다시 적지 않는다.
   두 군데 적어 두면 한 쪽만 고치고 끝나는 날이 온다. */


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---------- 머리 ---------- */
.top {
  display: flex; align-items: center; gap: 14px; height: var(--head-h);
  max-width: var(--w); margin: 0 auto; padding: 0 var(--pad-x);
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.brand i {
  display: grid; place-items: center; width: 27px; height: 27px;
  background: var(--blue); border-radius: var(--r-mark);
  color: #fff; font-size: 10px; font-weight: 800; font-style: normal; letter-spacing: -.06em;
}
.brand em { font-style: normal; font-weight: 600; color: var(--sub); }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.seg { display: flex; padding: 3px; background: var(--seg-bg); border-radius: var(--pill); }
.seg a { padding: 6px 14px; border-radius: var(--pill); font-size: 13px; font-weight: 700; color: var(--sub); }
.seg a.on { background: var(--surface); color: var(--ink); }
.menu {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--pill);
  font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--surface);
}
.menu:hover { border-color: var(--blue); color: var(--blue); }
.menu.help { display: inline-flex; align-items: center; gap: 5px; }
.menu.help svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 머리줄과 같은 max-width, 같은 좌우 여백. 왼쪽 시작선이 하나로 모인다 */
.shell { max-width: var(--w); margin: 0 auto; padding: 0 var(--pad-x) 72px; }
/* 패널과 오른쪽 내용이 같은 y 에서 시작한다 */
.cols2 { display: grid; grid-template-columns: var(--panel-w) minmax(0, 1fr); gap: var(--gap); align-items: start; }
/* 왼쪽 단 전체가 따라온다. 패널과 달력은 카드 사이와 같은 간격으로 떨어진다 */
.side {
  position: sticky; top: var(--gap); min-width: 0;
  display: flex; flex-direction: column; gap: var(--gap);
  max-height: calc(100vh - var(--gap) * 2);
}
.wrap { min-width: 0; }

/* ---------- 왼쪽 직원 현황 패널 ---------- */
/* 버디버디 친구목록에서 가져온 것은 세 가지뿐이다.
   한 줄에 얼굴·이름·(상태)가 붙는 짜임, 촘촘한 줄 높이, 접었다 펴는 폴더.
   그쪽 세로 탭이나 위쪽 아이콘 줄, 로고, 캐릭터, 이모티콘은 안 쓴다. */
.panel {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--card-pad);
}
.panel .ph { display: flex; align-items: baseline; gap: 8px; padding-bottom: 14px; }
.panel .ph h2 { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.03em; }
.panel .fold {
  margin-left: auto; padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--surface); font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--sub); cursor: pointer; display: none;
}
.panel .fold:hover { border-color: var(--blue); color: var(--blue); }
.panel .pb { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* 요약 한 줄 */
/* 넷을 한 줄에 흘리면 셋에서 끊겨 들쭉날쭉해진다. 두 줄 두 칸으로 맞춘다 */
.sum { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding-bottom: 8px; }
.sum button {
  display: flex; align-items: center; gap: 6px; padding: 5px 9px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--sunk);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--sub);
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.sum button b { margin-left: auto; }
.sum button:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
.sum button.on { background: var(--blue-bg); border-color: var(--blue-ln); color: var(--blue); font-weight: 700; }
.sum button b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.sum button .tx { font-weight: 700; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum button.on .tx { color: var(--blue); }
.sum button.on b { color: var(--blue); }
.sum .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* 이름 검색 */
.find { padding-bottom: 10px; }
.find input {
  width: 100%; height: var(--h-input); padding: 0 10px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--sunk);
  font: inherit; font-size: 12.5px; color: var(--ink);
}
.find input:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.find input::placeholder { color: var(--sub-2); }

/* 목록. 패널 안에서만 구른다 */
.tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 calc(var(--card-pad-x) * -1) -20px; padding-bottom: 14px;
  border-top: 1px solid var(--line-2); }

.grp > summary {
  display: flex; align-items: center; gap: 6px; padding: 7px 24px; cursor: pointer;
  list-style: none; font-size: 12.5px; font-weight: 700; color: var(--ink-2); user-select: none;
}
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary:hover { background: var(--sunk); }
.grp > summary .caret { width: 13px; height: 13px; flex: none; color: var(--sub-2);
  transition: transform .14s var(--ease); }
.grp[open] > summary .caret { transform: rotate(90deg); }
.grp > summary .cnt { margin-left: auto; font-size: 11.5px; font-weight: 700;
  color: var(--sub-2); font-variant-numeric: tabular-nums; }
/* 하위 폴더는 한 단계 들여쓴다 */
.grp .grp > summary { padding-left: 32px; font-weight: 600; color: var(--sub); }
.grp .grp > summary .fo { width: 14px; height: 14px; flex: none; color: var(--sub-2); }
.grp.all > summary { background: var(--sunk); border-bottom: 1px solid var(--line-2); }

/* ---------- 직원 한 줄 ---------- */
.emp {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 20px 0 32px;
  color: var(--ink); transition: background .1s var(--ease);
}
.grp .grp .emp { padding-left: 40px; }
.emp:hover { background: var(--blue-bg); }
.emp.hide { display: none; }
/* 성씨 글자는 뺐다. 상태색 동그라미 하나만 앞에 둔다 */
.emp .st { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.emp .nm { flex: none; font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.emp .pos { flex: none; font-size: 11.5px; font-weight: 600; color: var(--sub-2); }
.emp .say {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 상태는 동그라미 색과 글자 색으로 같이 알린다. 색만으로 알리지 않으려고 문구를 남긴다 */
.emp[data-st="in"]    .say { color: var(--st-in); }
.emp[data-st="late"]  .say { color: var(--st-late); }
.emp[data-st="none"]  .say { color: var(--st-none); }
.emp[data-st="leave"] .say { color: var(--st-leave); }
.emp[data-st="field"] .say { color: var(--st-field); }

.s-in    { background: var(--st-in); }
.s-late  { background: var(--st-late); }
.s-none  { background: var(--st-none); }
.s-leave { background: var(--st-leave); }
.s-field { background: var(--st-field); }

/* ---------- 패널 아래 달력 ---------- */
/* 자료는 board 가 이미 calendar 를 내준다. 새로 부르는 곳이 없다 */
.cal {
  flex: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px var(--card-pad-x) 16px;
}
.cal .ch { display: flex; align-items: center; gap: 4px; padding-bottom: 9px; }
.cal .ch b { font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.cal .ch button {
  width: 22px; height: 22px; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--sub-2); cursor: pointer; display: grid; place-items: center; font: inherit;
}
.cal .ch button:hover { background: var(--sunk); color: var(--ink); }
.cal .ch button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.cal .ch .today { margin-left: auto; padding: 3px 9px; width: auto; height: 22px;
  border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--sub); }
.cal .ch .today:hover { border-color: var(--blue); color: var(--blue); background: none; }

.cal .wk, .cal .dd { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal .wk span {
  height: 20px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--sub-2);
}
.cal .wk span:first-child { color: var(--seal); }
.cal .wk span:last-child { color: var(--blue); }

.cal .dd a, .cal .dd span {
  position: relative; height: 32px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  font-size: 12px; font-weight: 600; color: var(--ink-2); border-radius: var(--r-sm);
}
.cal .dd a:hover { background: var(--blue-bg); }
.cal .dd .out { color: var(--sub-2); opacity: .55; }
.cal .dd .sun, .cal .dd .hol { color: var(--seal); }
.cal .dd .sat { color: var(--blue); }
.cal .dd .now { background: var(--blue); color: #fff; font-weight: 800; }
.cal .dd .now:hover { background: var(--blue-2); }
.cal .dd .pin { display: flex; gap: 2px; height: 4px; }
.cal .dd .pin i { width: 4px; height: 4px; border-radius: 50%; }
.cal .dd .now .pin i { background: rgba(255, 255, 255, .85) !important; }
.k-holiday, .k-off { background: var(--seal); }
.k-leave { background: var(--st-leave); }
.k-notice { background: var(--amber); }
.k-task { background: var(--violet); }
.cal .lg { display: flex; flex-wrap: wrap; gap: 3px 10px; padding-top: 9px; font-size: 11px; color: var(--sub-2); }
.cal .lg span { display: inline-flex; align-items: center; gap: 4px; }
.cal .lg i { width: 5px; height: 5px; border-radius: 50%; }

.panel .none { padding: 30px 0; text-align: center; }
.panel .err { padding: 10px 0; }

/* ---------- 오른쪽 띠 ---------- */
.bar { display: flex; align-items: baseline; gap: 11px; padding: 18px 0 16px; }
.bar h1 { margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
.bar p { margin: 0; font-size: var(--fs-sub); font-weight: 600; color: var(--sub); }
.bar .urgent {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--pill); background: var(--surface);
  border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.bar .urgent b { color: var(--seal); font-variant-numeric: tabular-nums; }

/* ---------- 바로가기. 가로줄이다. 정사각 격자가 아니다 ---------- */
.strip {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px; margin-bottom: var(--gap);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 0;
}
.strip a {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: var(--r-in);
  font-size: 14px; font-weight: 700; color: var(--ink-2);
  transition: background .13s var(--ease);
}
/* 숫자를 칸 오른쪽 끝에 붙이면 줄은 맞는데 옆 칸 것처럼 보인다.
   칸마다 옅은 세로선을 하나 그어 어디까지가 한 칸인지 알려 준다 */
.strip a:not(:nth-child(4n)) { border-right: 1px solid var(--line-2); }
.strip a > span:not(.ic) {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.strip a:hover { background: var(--sunk); }
.strip .ic { flex: none; display: grid; place-items: center;
  width: var(--ic); height: var(--ic); border-radius: var(--ic-r); }
.strip .ic svg {
  width: var(--ic-sv); height: var(--ic-sv); fill: none; stroke: currentColor; stroke-width: var(--ic-sw);
  stroke-linecap: round; stroke-linejoin: round;
}
.strip .cnt {
  flex: none; margin-left: 8px; min-width: var(--badge-h); height: var(--badge-h); padding: 0 6px;
  border-radius: var(--pill);
  background: var(--seal); color: #fff; font-size: 11px; font-weight: 800; font-style: normal;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
/* 분류마다 타일 색이 다르다. 하이웍스는 열두 개가 전부 한 색이다 */
.t-att  .ic { background: var(--i1b); color: var(--i1); }
.t-apv  .ic { background: var(--i2b); color: var(--i2); }
.t-pay  .ic { background: var(--i3b); color: var(--i3); }
.t-hr   .ic { background: var(--i4b); color: var(--i4); }
.t-safe .ic { background: var(--i5b); color: var(--i5); }
.t-etc  .ic { background: var(--i6b); color: var(--i6); }

/* ---------- 아래 두 단 ---------- */
.cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--gap); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

.w {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--card-pad); min-width: 0;
}
.w > h2 {
  margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2);
  display: flex; align-items: baseline; gap: 10px;
}
.w > h2 .more { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--blue); }
.w > h2 .more:hover { color: var(--blue-2); }
.w > .cap { margin: 5px 0 0; font-size: var(--fs-sub); color: var(--sub); }
.w > .cap + * { margin-top: 15px; }
.w > h2 + :not(.cap) { margin-top: 15px; }

/* 회사 */
.me { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; }
.me .av {
  display: grid; place-items: center; width: var(--av); height: var(--av); border-radius: var(--r-av);
  background: var(--blue-bg); color: var(--blue); font-size: 15px; font-weight: 800; letter-spacing: -.04em;
}
.me b { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.03em; }
.me small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--sub); }
.kv { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.kv span { color: var(--sub); }
.kv b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* 줄 목록 */
.rows { display: flex; flex-direction: column; }
.rows > * { padding: 13px 0; border-top: 1px solid var(--line-2); }
.rows > :first-child { border-top: 0; padding-top: 2px; }
.row { display: flex; align-items: flex-start; gap: 12px; }
a.row:hover .t b { color: var(--blue); }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.row .t small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.badge {
  flex: none; padding: 3px 9px; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.badge.red { background: var(--seal-bg); color: var(--seal); }
.badge.amber { background: var(--amber-bg); color: var(--amber); }
.badge.green { background: var(--green-bg); color: var(--green); }
.badge.blue { background: var(--blue-bg); color: var(--blue); }
.badge.gray { background: var(--sunk); color: var(--sub); border: 1px solid var(--line); }
.cntbadge {
  flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--pill);
  background: var(--blue-bg); color: var(--blue); font-size: 12px; font-weight: 800;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}

/* 진행 막대 */
.prog { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; }
.prog .bar { flex: 1; height: var(--bar-h); border-radius: var(--bar-h); background: var(--line); overflow: hidden; }
.prog .bar i { display: block; height: 100%; border-radius: var(--bar-h); background: var(--blue); }
.prog small { font-size: 12.5px; font-weight: 800; color: var(--sub); font-variant-numeric: tabular-nums; }

/* 설정 단계 */
.step { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.step .n {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sunk); border: 1px solid var(--line); color: var(--sub);
  font-size: 11.5px; font-weight: 800;
}
.step.done .n { background: var(--green); border-color: var(--green); color: #fff; }
.step .t { flex: 1; min-width: 0; }
.step .t b { display: block; font-size: 14px; font-weight: 700; }
.step .t small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sub); }
.step.done .t b { color: var(--sub); }
.step .go {
  flex: none; padding: 6px 13px; border-radius: var(--pill); background: var(--blue); color: #fff;
  font-size: 12.5px; font-weight: 800;
}
.step .go:hover { background: var(--blue-2); }

/* 빈칸, 오류 */
.none { padding: 26px 0 20px; text-align: center; }
.none p { margin: 0; font-size: 13.5px; color: var(--sub-2); }
.none a {
  display: inline-block; margin-top: 11px; padding: 8px 16px; border-radius: var(--pill);
  border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--blue);
}
.err { margin: 10px 0 2px; font-size: 13px; color: var(--seal); }
.skel {
  height: 62px; border-radius: var(--r-in);
  background: linear-gradient(90deg, var(--sunk), var(--line-2), var(--sunk));
  background-size: 300% 100%; animation: sk 1.3s infinite;
}
@keyframes sk { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1180px) {
  .cols { grid-template-columns: 1fr; }
  .strip a { gap: 9px; padding: 10px 9px; font-size: 13.5px; }
  .strip .ic { width: var(--ic-sm); height: var(--ic-sm); border-radius: var(--ic-r-sm); }
}
/* 1024px 아래에서는 한 줄로 쌓는다. 좌우 시작선은 머리줄과 그대로 같다 */
@media (max-width: 1024px) {
  .cols2 { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; }
  .panel .fold { display: inline-block; }
  .panel.shut .pb { display: none; }
  .panel .tree { max-height: 44vh; }
  .emp .pos { display: none; }
}
@media (max-width: 760px) {
  :root { --pad-x: 16px; --head-h: 56px; }
  .bar h1 { font-size: 19px; }
  .bar .urgent { margin-left: 0; }
  .sum { grid-template-columns: repeat(4, 1fr); }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip a:nth-child(3n), .strip a:nth-child(4n) { border-right: 1px solid var(--line-2); }
  .strip a:nth-child(2n) { border-right: 0; }
  .strip a { gap: 10px; padding: 10px; font-size: 13.5px; }
  .strip .ic { width: var(--ic-sm); height: var(--ic-sm); border-radius: var(--ic-r-sm); }
  .w, .panel, .cal { padding: var(--card-pad-sm); border-radius: var(--r-sm2); }
  .panel .tree { margin: 0 -17px -16px; }
  .grp > summary { padding: 7px 17px; }
  .grp .grp > summary { padding-left: 25px; }
  .emp { padding: 0 17px 0 25px; }
  .grp .grp .emp { padding-left: 33px; }
  .brand { font-size: 15px; }
  .brand em { display: none; }
}
@media (max-width: 460px) {
  .sum { grid-template-columns: 1fr 1fr; }
  /* 단추 넷이 머리줄 폭을 넘었다. 도움말은 그림만 남긴다 */
  .menu.help { padding: 7px 9px; gap: 0; font-size: 0; }
  .menu.help svg { width: 16px; height: 16px; }
  .brand { font-size: 14px; }
  .top nav { gap: 5px; }
  .seg a { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .menu { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
}

/* ============================================================
   아래는 속 화면 공통이다. 직원 화면에서 떼어 왔다.
   제목 줄, 요약 카드, 거르개, 표, 오른쪽에서 밀려 나오는 패널.
   ============================================================ */
/* ---------- 제목 줄 ---------- */
/* 첫 화면의 "오늘" 줄과 같은 높이·크기다. .bar 를 그대로 쓰고 왼쪽만 더 붙인다 */
/* 첫 화면의 제목 줄은 글자만 있어 72px 이다. 여기는 아이콘(38)과 단추(37)가 들어가
   기준선 맞춤 때문에 77px 이 됐다. 높이를 못 박아 두 화면이 같은 y 에서 시작하게 한다 */
.bar.sub { height: 72px; padding: 0; align-items: center; box-sizing: border-box; }
.bar .ti { display: flex; align-items: center; gap: 10px; }
.bar .ti .ic {
  display: grid; place-items: center; width: var(--ic); height: var(--ic);
  border-radius: var(--ic-r); background: var(--i4b); color: var(--i4);
}
.bar .ti .ic svg {
  width: var(--ic-sv); height: var(--ic-sv); fill: none; stroke: currentColor;
  stroke-width: var(--ic-sw); stroke-linecap: round; stroke-linejoin: round;
}
.bar .acts { margin-left: auto; display: flex; gap: 7px; }
.bar .acts a, .bar .acts button {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h-btn); padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface);
  font: inherit; font-size: var(--fs-sub); font-weight: 700; color: var(--ink-2); cursor: pointer;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.bar .acts a:hover, .bar .acts button:hover { border-color: var(--blue); color: var(--blue); }
.bar .acts .go { background: var(--blue); border-color: var(--blue); color: #fff; }
.bar .acts .go:hover { background: var(--blue-2); border-color: var(--blue-2); color: #fff; }

/* ---------- 요약 넉 줄 ---------- */
.sums { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.sums .w { padding: 18px 20px 16px; }
.sums b {
  display: block; font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.sums b i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--sub-2); margin-left: 2px; }
.sums small { display: block; margin-top: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--sub); }
.sums .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }

/* ---------- 찾기와 거르개 ---------- */
.filt { display: flex; flex-wrap: wrap; gap: 8px; }
.filt input[type="search"], .filt select {
  height: var(--h-btn); padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font: inherit; font-size: var(--fs-sub); color: var(--ink);
}
.filt input[type="search"] { flex: 1; min-width: 150px; }
.filt input:focus, .filt select:focus { outline: none; border-color: var(--blue); }
.filt .seg2 { display: flex; padding: 3px; background: var(--sunk); border-radius: var(--pill); }
.filt .seg2 button {
  padding: 0 13px; height: 31px; border: 0; border-radius: var(--pill); background: none;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--sub); cursor: pointer;
}
.filt .seg2 button.on { background: var(--surface); color: var(--ink); }

/* ---------- 표 ---------- */
.tbl-card { padding: 0; overflow: hidden; }
.tbl-wrap { overflow-x: auto; }
table.staff { width: 100%; border-collapse: collapse; min-width: 720px; }
table.staff th {
  height: 38px; padding: 0 12px; background: var(--sunk); color: var(--sub);
  font-size: var(--fs-sm); font-weight: 700; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.staff td {
  height: 52px; padding: 0 12px; font-size: var(--fs-sub); color: var(--ink-2);
  border-bottom: 1px solid var(--line-2); vertical-align: middle;
}
table.staff th:first-child, table.staff td:first-child { padding-left: var(--card-pad-x); }
table.staff th:last-child, table.staff td:last-child { padding-right: var(--card-pad-x); }
table.staff tbody tr { cursor: pointer; transition: background .1s var(--ease); }
table.staff tbody tr:hover { background: var(--blue-bg); }
table.staff tbody tr:last-child td { border-bottom: 0; }
table.staff .r { text-align: right; font-variant-numeric: tabular-nums; }
table.staff .who { display: flex; align-items: center; gap: 9px; }
table.staff .fc {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--i4b); color: var(--i4); font-size: 12px; font-weight: 800; letter-spacing: -.04em;
}
table.staff .who b { font-size: var(--fs-sub); font-weight: 700; color: var(--ink); }
table.staff .who em { font-style: normal; margin-left: 5px; font-size: var(--fs-xs); font-weight: 600; color: var(--sub-2); }
table.staff .st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
table.staff .st i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tag {
  display: inline-block; padding: 3px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.tag.ok { background: var(--green-bg); color: var(--green); }
.tag.wait { background: var(--amber-bg); color: var(--amber); }
.tag.off { background: var(--grey-bg); color: var(--grey); }
.tag.no { background: var(--seal-bg); color: var(--seal); }

/* ---------- 오른쪽에서 밀려 나오는 패널 ---------- */
.dim {
  position: fixed; inset: 0; background: rgba(22, 32, 46, .32); opacity: 0;
  transition: opacity var(--t-page) var(--ease); z-index: 40;
}
.dim.on { opacity: 1; }
.dim[hidden] { display: none; }
.draw {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; z-index: 41;
  background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--t-page) var(--ease);
}
.draw.on { transform: none; }
.draw[hidden] { display: none; }
.draw .dh { display: flex; align-items: center; gap: 12px; padding: 20px var(--card-pad-x) 16px; }
.draw .dh .fc {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--i4b); color: var(--i4); font-size: 16px; font-weight: 800; letter-spacing: -.04em;
}
.draw .dh b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.draw .dh small { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--sub); }
.draw .x {
  margin-left: auto; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--sub); font-size: 17px; cursor: pointer; line-height: 1;
}
.draw .x:hover { border-color: var(--blue); color: var(--blue); }
.draw .dt { display: flex; gap: 2px; padding: 0 var(--card-pad-x); border-bottom: 1px solid var(--line); }
.draw .dt button {
  height: 38px; padding: 0 11px; border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: var(--fs-sub); font-weight: 600; color: var(--sub); cursor: pointer;
}
.draw .dt button.on { color: var(--blue); border-bottom-color: var(--blue); font-weight: 700; }
.draw .db { flex: 1; min-height: 0; overflow-y: auto; padding: 18px var(--card-pad-x) 20px; }
.draw .df {
  display: flex; gap: 8px; padding: 14px var(--card-pad-x); border-top: 1px solid var(--line);
  background: var(--sunk);
}
.draw .df button, .draw .df a {
  display: inline-flex; align-items: center; height: var(--h-btn); padding: 0 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  font: inherit; font-size: var(--fs-sub); font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.draw .df .save { margin-left: auto; background: var(--blue); border-color: var(--blue); color: #fff; }
.draw .df .save:hover { background: var(--blue-2); border-color: var(--blue-2); }
.draw .df .del { color: var(--seal); border-color: var(--seal-ln); }
.draw .df .del:hover { background: var(--seal-bg); }

.kv2 { display: grid; grid-template-columns: 92px 1fr; gap: 10px 12px; font-size: var(--fs-sub); }
.kv2 dt { color: var(--sub); padding-top: 9px; }
.kv2 dd { margin: 0; }
.kv2 input, .kv2 select {
  width: 100%; height: var(--h-btn); padding: 0 10px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); font: inherit; font-size: var(--fs-sub); color: var(--ink);
}
.kv2 input:focus, .kv2 select:focus { outline: none; border-color: var(--blue); }
/* 긴 글이나 여러 줄은 이름표 아래로 넓게 깐다. 92px 칸에 주소를 적게 하면 안 된다.
   클래스 이름을 .w 로 쓰면 안 된다. 셸의 카드가 .w 라 테두리가 하나 더 생긴다. */
.kv2 dt.wide { grid-column: 1 / -1; padding-top: 4px; padding-bottom: 0; }
.kv2 dd.wide { grid-column: 1 / -1; margin-top: -4px; }
.kv2 .fn { display: block; margin-top: 5px; font-size: var(--fs-xs); color: var(--sub-2); line-height: 1.5; }
.kv2 .ro { margin: 0; padding: 9px 0 0; font-size: var(--fs-sub); color: var(--ink); }
.kv2 .ck { display: inline-flex; align-items: center; gap: 8px; height: var(--h-btn); font-weight: 600; }
.kv2 .ck input { width: 17px; height: 17px; accent-color: var(--blue); }
.draw .msg { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--seal); }
.draw .hint { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--sub); line-height: 1.6; }
.draw .chk { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: var(--fs-sub); font-weight: 600; }
.draw .chk input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--blue); }
.draw textarea {
  width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font: inherit; font-size: var(--fs-sub); color: var(--ink);
  line-height: 1.6; resize: vertical;
}
.draw textarea:focus { outline: none; border-color: var(--blue); }
.draw .dh .fc.add { background: var(--blue-bg); color: var(--blue); font-size: 22px; font-weight: 400; }
.draw .msg.ok { color: var(--green); }
.draw .ls { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sub); }
.draw .ls li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.draw .ls li:first-child { border-top: 0; }
.draw .ls .d { flex: none; width: 86px; color: var(--sub); font-variant-numeric: tabular-nums; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1024px) {
  .sums { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* 제목과 단추가 한 줄에 다 안 들어가 제목 글자가 쪼개졌다.
     단추를 아랫줄로 내리고 줄 높이를 글에 맞춘다. 제목은 쪼개지 않는다. */
  .bar.sub { flex-wrap: wrap; height: auto; padding: 14px 0 6px; row-gap: 10px; }
  .bar .ti h1 { white-space: nowrap; }
  .bar .acts { margin-left: 0; width: 100%; }
  .bar .acts a, .bar .acts button { flex: 1; justify-content: center; }
  .draw { width: 100%; }
  .sums .w { padding: 15px 16px 13px; }
  .sums b { font-size: 22px; }
}

/* ---------- 법제처 조문 ----------
   법제처가 준 글을 그대로 보여 준다. 바뀐 자리는 법제처가 표시해 준 대로 밑줄만 살린다.
   글자 자체는 고치지 않는다. 법령정보를 고쳐서 제공하면 안 된다. */
.draw .laws { margin-top: 12px; font-size: var(--fs-sm); line-height: 1.75; }
.draw .lawp { padding: 10px 0; border-top: 1px solid var(--line-2); }
.draw .lawp:first-child { border-top: 0; }
.draw .lawp .was { color: var(--sub-2); text-decoration: line-through; margin-bottom: 4px; }
.draw .lawp .now { color: var(--ink-2); }
.draw .lawp .now u, .draw .lawp .now p { text-decoration: underline; text-underline-offset: 3px; }
.draw .lawp.added .now { color: var(--green); }
.draw .lawp.removed .now, .draw .lawp.deleted .now { color: var(--sub-2); text-decoration: line-through; }

/* 표 안에서 '여기를 눌러 쓰세요' 를 알리는 단추. 꼬리표처럼 보이면 아무도 안 누른다 */
table.staff .rowgo {
  height: var(--badge-h); padding: 0 11px; border: 1px solid var(--blue-ln);
  border-radius: var(--pill); background: var(--blue-bg); color: var(--blue);
  font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
  transition: background var(--t) var(--ease);
}
table.staff tr:hover .rowgo { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- 줄을 계속 더 넣는 칸 ----------
   수당처럼 몇 개가 될지 모르는 것을 쓴다. 세 줄로 막아 두면 네 번째를 못 넣는다. */
.kv2 .rep { display: flex; flex-direction: column; gap: 7px; }
.kv2 .rep-rs { display: flex; flex-direction: column; gap: 7px; }
.kv2 .rep-r { display: flex; align-items: center; gap: 7px; }
.kv2 .rep-r > select, .kv2 .rep-r > input { flex: 1; min-width: 0; width: auto; }
.kv2 .rep-x {
  flex: none; width: 30px; height: var(--h-btn); padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--sub-2);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.kv2 .rep-x:hover { background: var(--seal-bg); border-color: var(--seal-ln); color: var(--seal); }
.kv2 .rep-add {
  align-self: flex-start; height: 30px; padding: 0 12px;
  border: 1px dashed var(--line-3); border-radius: var(--pill);
  background: transparent; color: var(--blue);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.kv2 .rep-add:hover { background: var(--blue-bg); border-color: var(--blue-ln); }

/* ============================================================
   재무제표 진단 (자금 흐름 → 재무제표)
   서버가 셈해 보내던 diag 와 wc 를 그리는 자리.
   표 위에 한 칸을 끼운다. 이름은 fd- 로 시작한다.
   ============================================================ */
#finDiag h2 { margin: 0 0 12px; font-size: var(--fs-h2); font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2); }
#finDiag .fd-sum {
  margin: 0; padding: 14px 16px; border-radius: var(--r-in);
  background: var(--band); border: 1px solid var(--band-ln);
  font-size: 14.5px; font-weight: 700; line-height: 1.6; color: var(--ink);
}
#finDiag .fd-h {
  margin: 22px 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--sub-2);
}
#finDiag .fd-list { margin: 0; padding: 0; list-style: none; }
#finDiag .fd-list > li { padding: 11px 0; border-top: 1px solid var(--line-2); }
#finDiag .fd-list > li:first-child { border-top: 0; padding-top: 0; }
#finDiag .fd-t { display: flex; align-items: center; gap: 8px; }
#finDiag .fd-t b { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
#finDiag .fd-list p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--sub); }
#finDiag .fd-list p span { font-weight: 800; color: var(--ink-2); }
#finDiag .fd-do { color: var(--blue) !important; font-weight: 700; }

/* 돈이 도는가 */
#finDiag .fd-wc {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-in); overflow: hidden;
}
#finDiag .fd-wc > div { background: var(--surface); padding: 12px 14px; }
#finDiag .fd-wc span { display: block; font-size: 11.5px; font-weight: 700; color: var(--sub-2); }
#finDiag .fd-wc b { display: block; margin-top: 4px; font-size: 19px; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#finDiag .fd-wc b.bad { color: var(--seal); }

#finDiag .fd-flag {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--r-in);
  background: var(--sunk); border: 1px solid var(--line);
}
#finDiag .fd-flag.bad { background: var(--seal-bg); border-color: var(--seal-ln); }
#finDiag .fd-flag.watch { background: var(--amber-bg); border-color: var(--amber-ln); }
#finDiag .fd-flag b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; }
#finDiag .fd-flag p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }

/* ============================================================
   매출채권 연령·쏠림·대조 (자금 흐름 → 매출채권)
   서버가 셈해 보내던 aging, partners, over180_pct, top_share,
   reconcile 을 그리는 자리. 이름은 ar- 로 시작한다.
   ============================================================ */
#arPanel h2 { margin: 0 0 12px; font-size: var(--fs-h2); font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2); }
#arPanel .ar-h { margin: 22px 0 10px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .02em; color: var(--sub-2); }

/* 재무제표와 맞는가 */
#arPanel .ar-rc { padding: 13px 15px; border-radius: var(--r-in); border: 1px solid; }
#arPanel .ar-rc.ok { background: var(--green-bg); border-color: var(--green-ln); }
#arPanel .ar-rc.bad { background: var(--seal-bg); border-color: var(--seal-ln); }
#arPanel .ar-rc b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; }
#arPanel .ar-rc.ok b { color: var(--green); }
#arPanel .ar-rc.bad b { color: var(--seal); }
#arPanel .ar-rc p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }

/* 얼마나 오래됐나 */
#arPanel .ar-age {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-in); overflow: hidden;
}
#arPanel .ar-age > div { background: var(--surface); padding: 11px 12px; }
#arPanel .ar-age > div.bad { background: var(--seal-bg); }
#arPanel .ar-age span { display: block; font-size: 11.5px; font-weight: 700; color: var(--sub-2); }
#arPanel .ar-age b { display: block; margin-top: 4px; font-size: 16px; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#arPanel .ar-age > div.bad b { color: var(--seal); }
#arPanel .ar-age em { display: block; margin-top: 2px; font-style: normal;
  font-size: 11.5px; font-weight: 600; color: var(--sub-2); }

/* 두 숫자 */
#arPanel .ar-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut, 16px); margin-top: 12px; }
#arPanel .ar-two > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-in);
  background: var(--sunk); }
#arPanel .ar-two span { display: block; font-size: 11.5px; font-weight: 700; color: var(--sub-2); }
#arPanel .ar-two b { display: block; margin-top: 4px; font-size: 20px; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#arPanel .ar-two b.bad { color: var(--seal); }

/* 거래처별 */
#arPanel .ar-list { margin: 0; padding: 0; list-style: none; }
#arPanel .ar-list > li { padding: 10px 0; border-top: 1px solid var(--line-2); }
#arPanel .ar-list > li:first-child { border-top: 0; padding-top: 0; }
#arPanel .ar-t { display: flex; align-items: center; gap: 8px; }
#arPanel .ar-t b { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
#arPanel .ar-list p { margin: 3px 0 0; font-size: 12.5px; color: var(--sub);
  font-variant-numeric: tabular-nums; }

/* ---------- 연차 사용촉진 (#lvPromote) ----------
   서버는 근로기준법 제61조 기한을 다 셈해 두는데 새 화면이 그 길을 안 불러
   기능이 통째로 안 보였다. 되살리면서 자금 흐름 패널과 같은 꼴로 맞춘다. */
.lp { margin: 14px 0 0; padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; }
.lp-h { margin: 0 0 10px; font-size: var(--fs-h2); font-weight: var(--fw-h2);
  letter-spacing: -.03em; color: var(--ink); }
.lp-h span { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--sub); }
.lp-sum { margin: 0 0 14px; font-size: 13.5px; line-height: 22px; color: var(--ink-2); }
.lp-sum b { font-weight: 800; }
.lp-flag { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--seal-bg); border: 1px solid var(--seal-ln); }
.lp-flag > b { display: block; font-size: 13.5px; font-weight: 800; color: var(--seal); }
.lp-flag ul { margin: 7px 0 0; padding-left: 16px; }
.lp-flag li { font-size: 12.5px; line-height: 20px; color: var(--ink-2); }
.lp-list { display: grid; gap: 0; }
.lp-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 16px;
  align-items: center; padding: 11px 0; border-top: 1px solid var(--line-2); }
.lp-row:first-child { border-top: 0; }
.lp-who b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.lp-who small { display: block; margin-top: 2px; font-size: 12px; color: var(--sub); }
.lp-when { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lp-when small { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700;
  color: var(--sub-3); letter-spacing: 0; }
.lp-when small:first-child { margin-top: 0; }
.lp-steps { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.lp-steps span { font-size: 11.5px; font-weight: 600; color: var(--sub);
  padding: 2px 8px; border-radius: 999px; background: var(--grey-bg); white-space: nowrap; }
.lp-steps span.on { color: var(--green); background: var(--green-bg); }
.lp-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; line-height: 20px; color: var(--sub); }
.lp-note b { color: var(--ink-2); font-weight: 700; }

@media (max-width: 760px) {
  .lp-row { grid-template-columns: 1fr; gap: 6px; }
  .lp-steps { align-items: flex-start; }
}

/* ---------- 고용노동부 예고 (#moelBox) ----------
   법제처는 공포된 것을 주고, 고용노동부 RSS 는 그 앞 단계인 예고를 준다.
   공포 뒤에 알면 늦으므로 표보다 위에 올린다. */
.mo { margin: 14px 0 0; padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; }
.mo-h { margin: 0 0 10px; font-size: var(--fs-h2); font-weight: var(--fw-h2);
  letter-spacing: -.03em; color: var(--ink); }
.mo-h span { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--sub-3); }
.mo-sum { margin: 0 0 12px; font-size: 13.5px; line-height: 22px; color: var(--ink-2); }
.mo-sum b { font-weight: 800; }
.mo-bad { margin: 0 0 12px; padding: 11px 13px; border-radius: 10px;
  background: var(--seal-bg); border: 1px solid var(--seal-ln);
  font-size: 13px; line-height: 21px; color: var(--ink-2); }
.mo-bad b { color: var(--seal); font-weight: 800; }
.mo-list { margin: 0; padding: 0; list-style: none; }
.mo-list > li { padding: 9px 0; border-top: 1px solid var(--line-2);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mo-list > li:first-child { border-top: 0; padding-top: 0; }
.mo-list a { font-size: 14px; font-weight: 700; letter-spacing: -.02em;
  color: var(--blue); text-decoration: none; }
.mo-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mo-list small { font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.mo-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--grey-bg);
  font-size: 11.5px; font-weight: 700; color: var(--sub); }
.mo-more { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.mo-more > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sub); }
.mo-more > summary:hover { color: var(--ink-2); }
.mo-more .mo-list { margin-top: 10px; }
.mo-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; line-height: 20px; color: var(--sub); }
.mo-note b { color: var(--ink-2); font-weight: 700; }
.mo-feeds { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--sunk); }
.mo-feeds > b { display: block; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.mo-feeds ul { margin: 8px 0 0; padding-left: 16px; }
.mo-feeds li { font-size: 12.5px; line-height: 20px; color: var(--sub); }
.mo-feeds em { font-style: normal; font-weight: 700; color: var(--ink-2); }