/* 안녕소프트 ERP — 데스크톱 콘솔
   원칙: 보는 게 기본, 고치는 건 예외. 밀도를 높이되 숨 쉴 곳은 남긴다. */

.app{display:grid; grid-template-columns:212px 1fr; height:100vh; overflow:hidden;}

/* ── 사이드바 — 검정 대신 파랑을 깊게 눌러 브랜드 안에서 색을 잡는다 ── */
/* 메뉴가 스물셋이라 1366×768 노트북에서 아래 넷(일정·자료 보관함·업무 요청·고객 응대 기록)이
   화면 밖으로 밀렸다. 스크롤은 됐지만 **잘렸다는 표시가 없어 아무도 안 굴렸다.**
   낮은 화면에서는 줄 간격을 조여 담고, 그래도 넘치면 아래를 흐려 더 있다고 알린다. */
.side{background:var(--ink-top); color:#fff;
      display:flex; flex-direction:column; overflow-y:auto;
      -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
      mask-image:linear-gradient(to bottom, #000 calc(100% - 22px), transparent);}
/* 다 보이면 흐릴 이유가 없다 — 내용이 넘칠 때만 걸리게 한다 */
.side.fits{-webkit-mask-image:none; mask-image:none;}

/* 무엇이 자리를 먹는지 재 보고 그것만 줄인다 —
   묶음 제목 넷이 132px(하나에 33px), 바닥글이 67px 이었다.
   바닥글은 다른 제품 안내라 메뉴가 밀릴 만큼 값어치가 없다. */
@media (max-height: 860px){
  .side .nav{padding-top:4px; padding-bottom:4px;}
  .side-grp{padding:9px 16px 3px;}
  .side-top{padding:12px 16px 10px;}
  .side-foot{display:none;}
}
.side::-webkit-scrollbar{width:6px;} .side::-webkit-scrollbar-thumb{background:#2A2A33; border-radius:3px;}
.side-top{padding:16px 16px 14px; display:flex; align-items:center; gap:9px; flex:none;}
.side-top .sq{width:27px; height:27px; border-radius:7px; background:var(--blue);
              display:grid; place-items:center; flex:none;}
.side-top .sq img{width:17px; height:11px; display:block;}
.side-top .wm{display:inline-flex; align-items:flex-start;
              font-size:14.5px; font-weight:800; letter-spacing:-.05em; color:#fff;}
.side-top .wm i{width:4px; height:4px; border-radius:50%; background:var(--blue);
                display:block; margin:3px 0 0 3px; flex:none;}
.side-top .sect{font-size:9.5px; font-weight:800; letter-spacing:.16em;
                color:rgba(255,255,255,.42); margin-left:5px;}
.side-grp{font-size:9.5px; font-weight:800; letter-spacing:.16em; color:rgba(255,255,255,.34);
          padding:15px 16px 6px;}
.nav{display:flex; align-items:center; gap:9px; padding:7px 16px; font-size:12.5px;
     color:rgba(255,255,255,.72); cursor:pointer; border:0; background:none; width:100%;
     text-align:left; font-family:inherit; transition:background .12s var(--ease), color .12s var(--ease);}
.nav:hover{background:rgba(33,69,255,.12); color:#fff;}
.nav.on{background:var(--blue); color:#fff; font-weight:750;}
.nav svg{flex:none; opacity:.6;}
.nav.on svg{opacity:1; color:#fff;}
.nav[disabled]{opacity:.32; cursor:default;}
.nav[disabled]:hover{background:none; color:rgba(255,255,255,.72);}
.nav .n{margin-left:auto; background:var(--blue); color:#fff; font-size:10px; font-weight:800;
        border-radius:var(--r-pill); padding:0 6px; line-height:16px; min-width:16px; text-align:center;}
.nav .n.warn{background:var(--danger);}
.side-foot{margin-top:auto; padding:14px 16px; font-size:10.5px; color:rgba(255,255,255,.28); flex:none;}

/* ── 본문 ── */
.main{display:flex; flex-direction:column; overflow:hidden; background:var(--canvas);}
.top{height:var(--h-top); flex:none; background:var(--surface);
     border-bottom:1px solid var(--line); box-shadow:inset 0 2px 0 var(--blue);
     display:flex; align-items:center; gap:14px; padding:0 18px;}
.crumb{font-size:12px; color:var(--muted);}
.crumb b{color:var(--ink); font-weight:750;}
.top-r{margin-left:auto; display:flex; align-items:center; gap:10px;}
.who{font-size:12.5px; color:var(--ink-2);}
.who b{font-weight:750;}
.who .role{font-size:10.5px; font-weight:800; color:var(--blue); background:var(--blue-soft);
           border:1px solid var(--blue-line); border-radius:var(--r-pill); padding:2px 7px; margin-left:6px;}
.view{flex:1; overflow-y:auto; padding:18px;}
/* 표가 화면 끝까지 늘어나 값끼리 멀어지는 것을 막는다 */
.view > *{max-width:1280px;}

/* ── 공통 부품 ── */
.h2{font-size:19px; font-weight:800; letter-spacing:-.03em; margin:0 0 3px;}
.h2s{font-size:12.5px; color:var(--muted); margin:0 0 16px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-xs);}
.card-h{padding:12px 15px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px;}
.card-h b{font-size:13.5px; font-weight:800; letter-spacing:-.02em;}
.card-h .r{margin-left:auto;}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:9px; margin-bottom:14px;}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
      padding:11px 14px; box-shadow:var(--sh-xs); cursor:pointer; text-align:left; width:100%;
      font-family:inherit; transition:border-color .12s var(--ease), transform .12s var(--ease);}
.tile:hover{border-color:var(--line-strong); transform:translateY(-1px);}
.tile-k{font-size:11.5px; color:var(--muted); font-weight:650; display:flex; align-items:center; gap:5px;}
.tile-v{font-size:23px; font-weight:800; letter-spacing:-.04em; line-height:1.3; margin-top:2px;}
.tile-v small{font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:0; margin-left:2px;}
.tile-v.bad{color:var(--danger);} .tile-v.good{color:var(--blue);}
/* 눌러서 거르는 타일 — 지금 어느 칸을 보고 있는지가 보여야 한다 */
.tile.on{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue);}
.tile.on .tile-k{color:var(--blue);}
.tile-sub{font-size:11.5px; color:var(--faint); margin-top:3px;}

.btn{height:var(--h-ctl); padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
     background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:700; cursor:pointer;
     display:inline-flex; align-items:center; gap:6px; font-family:inherit;
     transition:background .12s var(--ease), border-color .12s var(--ease);}
.btn:hover{background:var(--surface-sink);}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#fff;}
.btn.primary:hover{background:var(--blue-strong);}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.chip{height:var(--h-ctl); padding:0 11px; border-radius:var(--r-pill); border:1px solid var(--line-strong);
      background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:700; cursor:pointer;
      display:inline-flex; align-items:center; gap:5px; font-family:inherit; white-space:nowrap;}
.chip:hover{background:var(--surface-sink);}
.chip.on{background:var(--blue); border-color:var(--blue); color:#fff;}
.chip.alert{border-color:#F3C9C5; color:var(--danger); background:var(--danger-soft);}
.chip.alert.on{background:var(--danger); border-color:var(--danger); color:#fff;}

.search{height:var(--h-ctl); flex:0 1 260px; display:flex; align-items:center; gap:7px;
        border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); padding:0 10px;}
.search input{border:0; outline:0; background:none; font-size:13px; width:100%; color:var(--ink);}
.search svg{flex:none; opacity:.45;}

.toolbar{display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:11px 15px;
         border-bottom:1px solid var(--line); background:var(--surface-soft);}
.toolbar .r{margin-left:auto; display:flex; gap:7px;}

/* 저장 바 — 무엇을 바꿨는지 보고 나서 저장한다 */
.savebar{display:none; align-items:center; gap:11px; padding:9px 15px; background:var(--blue-soft);
         border-bottom:1px solid var(--blue-line); font-size:12.5px; font-weight:750; color:var(--blue);}
.savebar.on{display:flex;}
.savebar .r{margin-left:auto; display:flex; gap:7px;}

/* ── 표 ── */
.tw{overflow:auto; max-height:calc(100vh - 260px);}
table.grid{border-collapse:separate; border-spacing:0; width:100%; font-size:12.5px;}
table.grid th{position:sticky; top:0; z-index:2; background:var(--surface-soft);
              font-size:10.5px; font-weight:800; letter-spacing:.05em; color:var(--faint);
              text-align:left; padding:8px 11px; border-bottom:1px solid var(--line); white-space:nowrap;}
table.grid th.r{text-align:right;}
table.grid td{padding:0 11px; height:var(--h-row); border-bottom:1px solid var(--line);
              white-space:nowrap; color:var(--ink-2); vertical-align:middle;}
table.grid tbody tr:hover td{background:var(--surface-soft);}
table.grid tr.dirty td{background:var(--blue-soft) !important;}
table.grid tr.dirty td:first-child{box-shadow:inset 2px 0 0 var(--blue);}
table.grid td.r{text-align:right; font-variant-numeric:tabular-nums;}
/* 이름·제목 칸(td.k)은 길면 접어서 다 보여 준다.
   표 칸은 기본이 nowrap 인데 그건 숫자·날짜 때문이다 — 거기까지 풀면 표가 흐트러진다.
   무엇에 대한 줄인지 알려 주는 칸만 예외로 둔다. */
table.grid td.k{color:var(--ink); font-weight:650;
  white-space:normal; overflow-wrap:anywhere; line-height:1.45; padding-top:6px; padding-bottom:6px;}
table.grid td.mute{color:var(--faint);}
table.grid td.ed{cursor:text;}
table.grid td.ed:hover{box-shadow:inset 0 0 0 1px var(--line-strong); border-radius:var(--r-xs);}
table.grid input.cell,table.grid select.cell{
  width:100%; height:26px; border:1.5px solid var(--blue); border-radius:var(--r-xs);
  padding:0 6px; font-size:12.5px; font-family:inherit; color:var(--ink);
  background:var(--surface); box-shadow:0 0 0 3px var(--blue-soft); outline:none;}
table.grid input.cell.r{text-align:right; font-variant-numeric:tabular-nums;}

/* 상단 알림 종 위의 점 — 숫자까지 얹으면 상단바가 시끄러워진다 */
.ndot{position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%;
  background:var(--danger); box-shadow:0 0 0 2px var(--surface);}

.st{font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap;}
.st-run{background:var(--blue-soft); color:var(--blue);}
.st-wait{background:var(--danger-soft); color:var(--danger);}
.st-done{background:var(--surface-sink); color:var(--muted);}
.st-ok{background:var(--blue-soft); color:var(--blue);}
.st-warn{background:var(--warn-soft); color:var(--warn);}

/* 성공률 막대 — 좋을 때는 브랜드 파랑, 나쁠 때만 빨강.
   초록을 쓰면 색이 하나 더 늘어난다. 나쁜 쪽에만 경고색을 남긴다. */
.rate{display:flex; align-items:center; gap:8px; width:132px;}
.rate .bar{flex:1; height:5px; border-radius:3px; background:var(--surface-sink); overflow:hidden;}
.rate .bar i{display:block; height:100%; border-radius:3px; background:var(--blue);}
.rate .bar i.low{background:var(--danger);}
.rate .bar i.mid{background:var(--blue-line);}
.rate b{font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; min-width:34px; text-align:right;}

.foot{display:flex; align-items:center; gap:12px; padding:9px 15px; border-top:1px solid var(--line);
      background:var(--surface-soft); font-size:11.5px; color:var(--muted);}
.foot .r{margin-left:auto; display:flex; gap:8px; align-items:center;}

.empty{padding:44px 20px; text-align:center; color:var(--faint); font-size:13px;}
.load{padding:34px; text-align:center; color:var(--faint); font-size:12.5px;}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px);
       background:var(--ink); color:#fff; font-size:13px; font-weight:700; padding:11px 18px;
       border-radius:var(--r-sm); box-shadow:var(--sh-md); opacity:0; pointer-events:none;
       transition:opacity .16s var(--ease), transform .16s var(--ease); z-index:60;}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--danger);}

@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }

/* ── 모달 시트 ── */
.sheet-bg{position:fixed; inset:0; background:rgba(15,15,14,.5); display:flex;
          align-items:center; justify-content:center; padding:24px; z-index:70;}
.sheet{background:var(--surface); width:100%; max-width:380px; border-radius:var(--r-lg);
       box-shadow:var(--sh-md); overflow:hidden;}
.sheet-h{padding:16px 18px 0;} .sheet-h b{font-size:16px; font-weight:800; letter-spacing:-.025em;}
.sheet-b{padding:14px 18px 4px;}
.sheet-f{padding:14px 18px 18px; display:flex; gap:8px;}
.sheet-f .btn{flex:1; justify-content:center; height:40px;}
.fl{display:block; font-size:12px; font-weight:750; color:var(--ink-2); margin:10px 0 5px;}
.fi{width:100%; height:36px; padding:0 10px; font-size:13.5px; font-family:inherit; color:var(--ink);
    background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);}
.fi:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);}
.fi:disabled{background:var(--surface-sink); color:var(--faint);}
.msg{margin:10px 0 0; font-size:12.5px; font-weight:650; min-height:16px;}
.msg.err{color:var(--danger);}

/* ── 달력 ── */
.cal{padding:12px 15px 4px;}
.dow{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; margin-bottom:6px;}
.dow span{font-size:10.5px; font-weight:800; letter-spacing:.08em; color:var(--faint); text-align:center;}
.dow .sun{color:var(--danger);} .dow .sat{color:var(--blue);}
.grid7{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line);
       border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;}
.cell{background:var(--surface); min-height:92px; padding:5px 6px; display:flex; flex-direction:column; gap:3px;}
.cell.out{background:var(--surface-soft);}
.cell.now{background:var(--blue-soft);}
.dn{font-size:11.5px; font-weight:750; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.dn.sun{color:var(--danger);} .dn.sat{color:var(--blue);}
.cell.now .dn{color:var(--blue);}
.ev{font-size:10.5px; font-weight:700; padding:2px 5px; border-radius:3px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; line-height:1.5;}
.ev.c-회사{background:var(--blue); color:#fff;}
.ev.c-팀{background:var(--blue-soft); color:var(--blue);}
.ev.c-개인{background:var(--surface-sink); color:var(--ink-2);}
.ev.c-마감{background:var(--warn-soft); color:var(--warn);}
/* 자리를 비우는 일정 — 사무실에 없다는 게 한눈에 보여야 해서 왼쪽에 선을 준다 */
.ev.out{background:var(--surface-sink); color:var(--ink); box-shadow:inset 2px 0 0 var(--blue);}
.ev.lv{background:var(--danger-soft); color:var(--danger);}
.ev.more{color:var(--faint); font-weight:650;}
.lg{display:inline-block; width:9px; height:9px; border-radius:2px; vertical-align:-1px; margin-right:3px;}
.lg.c-회사{background:var(--blue);} .lg.c-팀{background:var(--blue-soft); box-shadow:inset 0 0 0 1px var(--blue);}
.lg.c-마감{background:var(--warn);} .lg.lv{background:var(--danger);}
/* 9px 짜리 표시에 옅은 배경 + 2px 선만 두면 상자가 아니라 선 하나로 보인다.
   달력 안 칩과 같은 모양을 유지하되 테두리를 줘서 상자로 읽히게 한다. */
.lg.out{background:var(--surface-sink);
  box-shadow:inset 2px 0 0 var(--blue), inset 0 0 0 1px var(--line-strong);}

/* 오늘 자리 비움 */
.away{display:flex; flex-wrap:wrap; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line);}
.away .who2{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px;
  border-radius:999px; font-size:12.5px; font-weight:700; background:var(--surface-sink); color:var(--ink);}
.away .who2 em{font-style:normal; color:var(--ink-2); font-weight:650;}
.away .none{font-size:12.5px; font-weight:650; color:var(--faint);}

textarea.fi{height:auto; padding:9px 10px; line-height:1.55;}

/* 파일 끌어다 놓는 곳 — 눌러도 되고 끌어다 놔도 되는 걸 생김새로 알려야 한다 */
.drop{border:1.5px dashed var(--line-strong); border-radius:var(--r-md); background:var(--surface-sink);
  padding:16px; text-align:center; cursor:pointer; transition:border-color .12s, background .12s; margin-top:4px;}
.drop.big{padding:26px 16px; margin:0;}
.drop:hover{border-color:var(--blue);}
.drop.over{border-color:var(--blue); background:var(--blue-soft);}
.drop.busy{cursor:progress; border-style:solid; border-color:var(--blue);}
.drop-t{font-size:13.5px; font-weight:750; color:var(--ink);}
.drop-s{font-size:11.5px; color:var(--faint); margin-top:3px;}
.upsay{font-size:12px; font-weight:650; color:var(--blue); margin-top:6px; min-height:15px;}
/* 진행 막대는 올리는 동안에만 보인다. 평소에 회색 줄이 그어져 있으면 고장난 것처럼 보인다 */
.uptrack{display:none; height:3px; border-radius:2px; background:var(--line); overflow:hidden; margin-top:4px;}
.drop.busy .uptrack{display:block;}
.upbar{height:100%; width:0; background:var(--blue); transition:width .15s;}

/* 오늘 처리할 것 — 한 줄이 곧 하나의 할 일 */
.trow{display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer;
  border-bottom:1px solid var(--line); transition:background .1s;}
.trow:last-child{border-bottom:0;}
.trow:hover{background:var(--surface-sink);}
/* 세 단 — 빨강은 '이미 늦었다'에만 쓴다.
   열다섯 줄 중 아홉이 빨갛던 때는 빨강이 아무 뜻도 없었다. */
.tmark{width:5px; height:5px; border-radius:50%; background:var(--line-strong); flex:none;}
.tt{font-size:13.5px; font-weight:750; letter-spacing:-.02em; flex:none;}

.trow.late .tmark{background:var(--danger);}
.trow.late .tt{color:var(--danger);}

/* 내 차례 — 늦진 않았지만 내가 눌러야 움직인다. 점만 파랗게, 글자는 검게. */
.trow.turn .tmark{background:var(--blue);}
.trow.turn .tt{color:var(--ink);}

/* 알아 두기 — 점도 글자도 조용하게 */
.trow.info .tt{color:var(--ink-2); font-weight:700;}
.ts{font-size:12.5px; color:var(--muted); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tgo{color:var(--faint); font-size:15px; flex:none;}

/* 붙어 있는 자료 한 줄 */
.frow{display:flex; align-items:center; gap:9px; padding:8px 2px; border-bottom:1px solid var(--line);}
.frow .fn{flex:1; min-width:0; font-size:13px; font-weight:700; letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.picks{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.picks .chip{height:28px;}

/* ── 팀 현황 카드 ─────────────────────────────────────
   사람 수만큼 줄을 세우면 '안 남겼습니다'만 반복된다. 격자로 깔아 한눈에 훑게 한다. */
.people{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:9px; padding:12px 15px;}
.pcard{border:1px solid var(--line); border-radius:var(--r-md); padding:11px 12px; background:var(--surface);}
.pcard.has{cursor:pointer; transition:border-color .12s;}
.pcard.has:hover{border-color:var(--blue);}
.pc-h{display:flex; align-items:center; gap:6px; font-size:13px;}
.pc-h i{width:6px; height:6px; border-radius:50%; flex:none;}
.pc-h b{font-weight:800; letter-spacing:-.02em;}
.pc-h .mute{color:var(--faint); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pc-issue{margin-top:6px; font-size:12px; font-weight:750; color:var(--danger);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pc-done{margin-top:5px; font-size:12.5px; color:var(--ink-2); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.pc-act{margin-top:5px; font-size:11px; color:var(--faint);}
.pc-none{margin-top:6px; font-size:12px; color:var(--faint);}

/* 임시 비밀번호 — 받아 적어야 하므로 크고 또렷하게, 글자끼리 붙지 않게 */
.pwbox{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:19px; font-weight:700;
  letter-spacing:.08em; background:var(--surface-sink); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); padding:11px 13px; user-select:all; word-break:break-all;}

/* ── 지능형 입력 ─────────────────────────────────────
   자유 입력은 같은 것을 다르게 적게 만든다. 쓰던 값을 먼저 보여주고 고르게 한다. */
.combo{position:relative;}
.combo-pop{display:none; position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:60;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  box-shadow:0 8px 24px rgba(15,15,14,.14); max-height:246px; overflow-y:auto; padding:4px;}
.combo-pop.on{display:block;}
.combo-item{display:flex; align-items:center; gap:8px; width:100%; border:0; background:none;
  font-family:inherit; font-size:13px; color:var(--ink); text-align:left; cursor:pointer;
  padding:7px 9px; border-radius:var(--r-xs);}
.combo-item span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.combo-item em{font-style:normal; font-size:11px; font-weight:700; color:var(--faint); flex:none;}
.combo-item:hover, .combo-item.on{background:var(--blue-soft); color:var(--blue);}
.combo-item.on em{color:var(--blue);}
.combo-empty{padding:9px 10px; font-size:12px; color:var(--faint);}
.combo-note{font-size:11.5px; color:var(--faint); margin-top:4px; min-height:15px; line-height:1.45;}
.combo-note.warn{color:var(--danger); font-weight:700;}

/* ── 통합 검색 (Ctrl+K) ───────────────────────────────
   메뉴 구조를 몰라도 이름만 알면 도달할 수 있어야 한다. */
.kbd{font-size:9.5px; font-weight:800; letter-spacing:.04em; color:var(--faint);
  border:1px solid var(--line-strong); border-radius:4px; padding:1px 4px; margin-left:2px;}
.pal-bg{display:none; position:fixed; inset:0; z-index:200; background:rgba(15,15,14,.42);
  padding-top:11vh; justify-content:center;}
.pal-bg.on{display:flex;}
.pal{width:min(720px,92vw); max-height:74vh; background:var(--surface); border-radius:14px;
  box-shadow:0 24px 60px rgba(15,15,14,.3); display:flex; flex-direction:column; overflow:hidden;}
.pal-h{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line);}
.pal-h svg{opacity:.4; flex:none;}
.pal-h input{flex:1; border:0; outline:0; background:none; font-family:inherit;
  font-size:16px; font-weight:650; letter-spacing:-.02em; color:var(--ink);}
.pal-h kbd{font-size:10px; font-weight:800; color:var(--faint);
  border:1px solid var(--line-strong); border-radius:4px; padding:2px 5px;}
.pal-b{overflow-y:auto; padding:6px;}
.pal-g{font-size:10px; font-weight:800; letter-spacing:.12em; color:var(--faint);
  padding:10px 10px 5px;}
.pal-i{display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  font-family:inherit; padding:8px 10px; border-radius:8px;}
.pal-i:hover, .pal-i.on{background:var(--blue-soft);}
.pal-i .pt{display:block; font-size:13.5px; font-weight:750; letter-spacing:-.02em; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pal-i .pt b{color:var(--blue); font-weight:850;}
.pal-i .ps{display:block; font-size:11.5px; color:var(--muted); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pal-i .ps b{color:var(--blue);}
.pal-i .pa{display:block; font-size:11.5px; font-weight:750; color:var(--ink-2); margin-top:2px;
  font-variant-numeric:tabular-nums;}
.pal-i .pa em{font-style:normal; color:var(--danger); font-weight:700;}
.pal-none{padding:26px 14px; text-align:center; font-size:13px; color:var(--faint);}

.side-nav{display:flex; flex-direction:column;}

/* 쪽 이동 — 목록이 몇 쪽인지, 지금 몇 쪽인지 항상 보여야 한다 */
.pager{display:inline-flex; align-items:center; gap:6px; margin-left:14px;}
.pager .btn{height:26px; padding:0 9px; font-size:11.5px;}
.pager b{font-size:12px; color:var(--ink-2); padding:0 4px;}

/* ── 할 일 보드 ───────────────────────────────────────
   사람마다 칸 하나. 한 줄 적고 Enter 로 끝나야 실제로 쓰인다. */
.board{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:11px; align-items:start;}
.bcol{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-xs); display:flex; flex-direction:column; overflow:hidden;}
.bcol-h{display:flex; align-items:center; gap:7px; padding:10px 12px; border-bottom:1px solid var(--line);
  background:var(--surface-soft); font-size:13px;}
.bcol-h b{font-weight:800; letter-spacing:-.02em;}
.bcol-h .mute{color:var(--faint); font-size:11.5px;}
.bcol-h .r{margin-left:auto;}
.bcol-b{padding:5px; min-height:34px;}
.bcol-none{padding:12px; font-size:12px; color:var(--faint); text-align:center;}
.bcol-f{padding:7px 8px; border-top:1px solid var(--line);}
.tadd{width:100%; height:32px; padding:0 9px; font-family:inherit; font-size:12.5px; color:var(--ink);
  background:var(--surface-sink); border:1px solid transparent; border-radius:var(--r-sm); outline:0;}
.tadd:focus{border-color:var(--blue); background:var(--surface);}

.titem{display:flex; align-items:flex-start; gap:8px; padding:7px 7px; border-radius:var(--r-sm);}
.titem:hover{background:var(--surface-soft);}
.titem .tick{width:18px; height:18px; flex:none; margin-top:1px; border-radius:5px; cursor:pointer;
  border:1.5px solid var(--line-strong); background:var(--surface); color:#fff;
  font-size:11px; font-weight:900; line-height:1; display:grid; place-items:center;}
.titem .tick:hover{border-color:var(--blue);}
.titem.done .tick{background:var(--blue); border-color:var(--blue);}
.titem .tbody{flex:1; min-width:0;}
.titem .tt{font-size:12.5px; line-height:1.5; color:var(--ink); overflow-wrap:anywhere;}
.titem.done .tt{color:var(--faint); text-decoration:line-through;}
.titem .tm{display:flex; gap:8px; margin-top:2px; font-size:11px; color:var(--faint);}
.titem .tm .late{color:var(--danger); font-weight:750;}
.titem .tm .today{color:var(--blue); font-weight:750;}
.titem.late{box-shadow:inset 2px 0 0 var(--danger);}
.titem .tdel{opacity:0; border:0; background:none; color:var(--faint); font-size:15px; cursor:pointer;
  line-height:1; padding:0 2px; flex:none;}
.titem:hover .tdel{opacity:1;}
.titem .tdel:hover{color:var(--danger);}

/* 금액 읽어 주기 — 0을 하나 더 치는 사고를 눈으로 막는다 */
.money-hint{font-size:11.5px; color:var(--muted); margin-top:4px; min-height:15px; font-weight:650;}
.money-hint.warn{color:var(--danger); font-weight:750;}
/* 날짜 빠른 선택 */
.date-quick{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px;}
.date-quick .chip{height:26px; padding:0 9px; font-size:11.5px;}

/* ══════════════════════════════════════════════════════
   커스텀 입력 (PC)

   폰과 달리 PC 는 네이티브 컨트롤이 못 쓸 정도는 아니었다. 그래도 두 가지가 걸린다 —
   생김새가 우리 것과 따로 놀고, 목록이 길어지면(직원·골프장) 찾는 수단이 없다.
   그래서 바꾸되 **키보드 조작을 먼저 만든다.** 마우스만 되는 커스텀은 네이티브보다 나쁘다.
     Tab 으로 오고, Enter/Space/↓ 로 열고, ↑↓ 로 옮기고, 글자를 치면 걸러지고,
     Enter 로 고르고, Esc 로 닫는다.

   목록은 body 에 붙인다. 모달 안(.sheet-b 는 overflow:auto)에 두면 잘린다.
   ══════════════════════════════════════════════════════ */

/* 눌러서 여는 칸 — 생김새는 .fi 와 같아야 한 폼 안에서 따로 놀지 않는다 */
.pcf{
  width:100%; height:var(--h-ctl); padding:0 32px 0 11px;
  display:flex; align-items:center; gap:6px;
  font-family:inherit; font-size:13px; color:var(--ink); text-align:left;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  -webkit-appearance:none; appearance:none; cursor:pointer; position:relative;
}
.pcf:hover{ border-color:var(--muted); }
.pcf:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.pcf.empty{ color:var(--faint); }
.pcf::after{
  content:''; position:absolute; right:12px; top:50%; width:6px; height:6px;
  border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
}
.pcf.on{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.pcf .pcf-sub{ color:var(--faint); font-size:12px; }

/* 날짜는 손으로도 칠 수 있어야 한다 — 2026-08-20, 8/20, 오늘 */
.pcdate{ position:relative; }
.pcdate > input{
  width:100%; height:var(--h-ctl); padding:0 34px 0 11px;
  font-family:inherit; font-size:13px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
}
.pcdate > input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.pcdate > button{
  position:absolute; right:3px; top:3px; width:26px; height:calc(var(--h-ctl) - 6px);
  border:0; background:none; color:var(--muted); cursor:pointer; border-radius:6px;
  display:grid; place-items:center; font-size:13px;
}
.pcdate > button:hover{ background:var(--surface-sink); color:var(--ink); }

/* 떠 있는 목록 — 모달 위에 떠야 하므로 층을 높인다 */
.pcpop{
  position:fixed; z-index:200; min-width:180px; max-height:290px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px;
  box-shadow:0 12px 32px rgba(15,15,14,.16); padding:5px;
}
.pcpop .pcsearch{
  width:100%; height:30px; margin-bottom:4px; padding:0 9px; font-family:inherit; font-size:12.5px;
  border:1px solid var(--line); border-radius:7px; background:var(--surface-sink);
}
.pcpop .pcsearch:focus{ outline:none; border-color:var(--blue); }
.pcopt{
  display:flex; align-items:center; gap:8px; width:100%; border:0; background:none;
  font-family:inherit; font-size:13px; color:var(--ink); text-align:left;
  padding:0 9px; height:32px; border-radius:7px; cursor:pointer;
}
.pcopt .pcopt-s{ color:var(--faint); font-size:12px; }
.pcopt .pcopt-c{ margin-left:auto; color:var(--blue); font-weight:800; opacity:0; }
.pcopt.sel .pcopt-c{ opacity:1; }
.pcopt.cur{ background:var(--blue-soft); color:var(--blue); }
.pcopt.sel{ font-weight:700; }
.pcpop .pcempty{ padding:10px 9px; font-size:12.5px; color:var(--faint); }

/* 달력 — 폰과 같은 규칙(오늘은 테두리, 고른 날은 채움) */
.pccal{ padding:2px; width:246px; }
.pccal-h{ display:flex; align-items:center; gap:4px; padding:2px 2px 8px; }
.pccal-h b{ flex:1; text-align:center; font-size:13px; font-weight:800; }
.pccal-h button{
  width:26px; height:26px; border:1px solid var(--line-strong); border-radius:7px;
  background:var(--surface); color:var(--ink-2); cursor:pointer; font-size:12px;
}
.pccal-h button:hover{ background:var(--surface-sink); }
.pccal-w, .pccal-g{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.pccal-w span{ text-align:center; font-size:10.5px; font-weight:800; color:var(--muted); padding:2px 0 4px; }
.pccal-g button{
  height:30px; border:1px solid transparent; border-radius:7px; background:none;
  font-family:inherit; font-size:12.5px; font-weight:650; color:var(--ink); cursor:pointer;
}
.pccal-g button:hover{ background:var(--surface-sink); }
.pccal-g button.off{ color:var(--line-strong); }
.pccal-g button.sun{ color:var(--danger); }
.pccal-g button.sat{ color:var(--blue); }
.pccal-g button.today{ border-color:var(--line-strong); }
.pccal-g button.on{ background:var(--blue); border-color:var(--blue); color:#fff; font-weight:800; }
.pccal-g button.cur{ box-shadow:0 0 0 2px var(--blue-soft); }
.pccal-f{ display:flex; gap:4px; padding-top:6px; border-top:1px solid var(--line); margin-top:4px; }
.pccal-f button{
  flex:1; height:28px; border:1px solid var(--line-strong); border-radius:7px;
  background:var(--surface); font-family:inherit; font-size:12px; font-weight:700;
  color:var(--ink-2); cursor:pointer;
}
.pccal-f button:hover{ background:var(--surface-sink); }

/* 쪽 번호를 직접 치는 칸 — 48쪽짜리에서 '다음'을 스물아홉 번 누를 수는 없다 */
.pager .pgjump{
  width:46px; height:26px; padding:0 6px; text-align:center;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:6px; background:var(--surface);
}
.pager .pgjump:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-soft); }

/* 누를 수 있는 표 머리 — 정렬되는 열만 이렇게 보인다.
   전부 눌리는 것처럼 보이면 안 되는 열을 눌러 보고 아무 일도 안 일어난다. */
table.grid th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
table.grid th.sortable:hover{ color:var(--ink); background:var(--surface-sink); }
table.grid th.sortable.on{ color:var(--blue); }

/* ── 전자결재 ──────────────────────────────────────── */
.apr-line{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.apr-step{
  flex:1; min-width:150px; border:1px solid var(--line-strong); border-radius:10px;
  padding:10px 12px; margin-right:8px; margin-bottom:8px; background:var(--surface);
  display:flex; flex-direction:column; gap:4px; position:relative;
}
.apr-step.now{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.apr-step.ok{ border-color:var(--success); }
.apr-step.no{ border-color:var(--danger); background:var(--danger-soft); }
.apr-step .who{ font-size:13px; font-weight:800; letter-spacing:-.02em; }
.apr-step .pos{ font-size:11.5px; color:var(--muted); }
.apr-step .when{ font-size:11px; color:var(--faint); margin-top:auto; }
/* 서명은 문서에 찍힌 것처럼 보여야 한다. 칸에 맞춰 줄이되 비율은 지킨다. */
.apr-step img{ height:34px; width:auto; max-width:100%; object-fit:contain; align-self:flex-start; }
.apr-step .wait{ font-size:12px; color:var(--faint); }

/* 서명 그리는 판 */
.signpad{
  width:100%; height:170px; border:1px dashed var(--line-strong); border-radius:10px;
  background:var(--surface); touch-action:none; cursor:crosshair; display:block;
}
.signpad.has{ border-style:solid; }

/* ── 인사 한 장 ───────────────────────────────────────── */
.pcard + .pcard{margin-top:11px;}
.pcard-h{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
.pcard-h .r{margin-left:auto;}
.btn.tiny{height:22px; padding:0 7px; font-size:11px; border-radius:var(--r-xs);}

/* 연차 산정 식 — 결과만 두면 틀렸을 때 아무도 못 잡는다 */
.calc{display:flex; align-items:stretch; flex-wrap:wrap; gap:6px;}
.calc-i{display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:7px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-soft); min-width:74px;}
.calc-i.on{border-color:var(--blue); background:var(--blue-soft);}
.calc-i i{font-style:normal; font-size:11px; font-weight:650; color:var(--muted);}
.calc-i b{font-size:14px; font-variant-numeric:tabular-nums;}
.calc-i em{font-style:normal; font-size:10.5px; color:var(--faint); margin-top:1px;}
.calc-op{display:flex; align-items:center; font-size:14px; font-weight:750; color:var(--faint);}

/* 이름·값 두 칸 */
.kv{display:grid; grid-template-columns:88px 1fr; gap:7px 12px; align-items:center;}
.kv-k{font-size:12px; font-weight:650; color:var(--muted);}
.kv-v{font-size:13px;}
.kv-v.na{color:var(--faint);}

.warnbox{padding:9px 11px; border:1px solid var(--warn); border-radius:var(--r-sm);
  background:var(--warn-soft); font-size:12.5px; line-height:1.6; margin-bottom:11px;}

/* ── 재직증명서 (인쇄) ────────────────────────────────────
   화면에서는 안 보이고 종이에만 나온다.
   숨기는 규칙이 `body > *` 라서 증명서를 body 직계로 붙여야 한다.
   깊은 곳에 넣으면 조상 하나가 숨겨져 종이가 백지로 나온다. */
#printdoc{display:none;}

@media print{
  body > *:not(#printdoc){display:none !important;}
  #printdoc{display:block !important;}
  @page{size:A4; margin:22mm 20mm;}
  html,body{background:#fff !important;}

  .cert{color:#000; font-size:12.5pt; line-height:1.75; page-break-inside:avoid; break-inside:avoid;}
  .cert h1{font-size:24pt; font-weight:800; letter-spacing:.32em;
    text-align:center; margin:0 0 16mm; padding-left:.32em;}
  .cert-t{width:100%; border-collapse:collapse; margin-bottom:13mm;}
  .cert-t th{width:34mm; text-align:left; font-weight:600; vertical-align:top;
    padding:2.1mm 0; letter-spacing:.04em;}
  .cert-t td{padding:2.1mm 0; border-bottom:.3pt solid #999;}
  .cert-say{text-align:center; margin:0 0 12mm; font-size:14pt;}
  .cert-day{text-align:center; margin:0 0 13mm; letter-spacing:.06em;}

  .cert-co{display:flex; align-items:flex-end; justify-content:space-between; gap:10mm;}
  .cert-co table{border-collapse:collapse; font-size:11.5pt;}
  .cert-co th{text-align:left; font-weight:600; padding:1.4mm 7mm 1.4mm 0; white-space:nowrap;}
  /* 증명서에서 회사 주소가 두 줄로 접히면 지저분하다. 서명 칸을 줄여 자리를 내준다. */
  .cert-co td{padding:1.4mm 0; white-space:nowrap;}
  /* 서명 그림은 이름 오른쪽에 겹쳐 놓는다 — 도장 찍은 자리와 같게 */
  .cert-sign{display:flex; align-items:center; gap:3mm; font-size:15pt; font-weight:700; white-space:nowrap;}
  .cert-sign img{height:15mm; width:auto; max-width:36mm; object-fit:contain; margin-left:-3mm;}
  .cert-sign i{font-style:normal; font-size:12pt; font-weight:500; color:#444;}
}
/* 표 안에서 눌러 여는 이름 — 링크처럼 보이되 줄바꿈은 안 한다 */
.linky{border:0; background:none; padding:0; font:inherit; color:var(--blue);
  font-weight:inherit; cursor:pointer; text-align:left; white-space:nowrap;}
.linky:hover{text-decoration:underline;}
@media print{
  .cert-sign .cert-role{font-size:12pt; font-weight:600; margin-right:1mm;}
}

/* ── 여러 명 고르기 ────────────────────────────────────
   사람이 일곱이든 일흔이든 이 부품이 차지하는 자리는 그대로다.
   고른 사람은 위로 빼고, 아래 후보 목록은 높이를 잡아 스크롤한다. */
.ppick{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface);}
.ppick-sel{display:flex; flex-wrap:wrap; gap:5px; padding:8px 9px; min-height:42px;
  align-items:center; border-bottom:1px solid var(--line); background:var(--surface-soft);}
.ppick-none{font-size:12px; color:var(--faint);}
.ppick-tag{display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 4px 0 9px;
  border-radius:var(--r-pill); background:var(--blue); color:#fff; font-size:12.5px; font-weight:700;}
.ppick-tag b{font-size:10.5px; opacity:.75; margin-right:1px;}
.ppick-mv,.ppick-x{border:0; background:none; color:#fff; cursor:pointer; padding:0 3px;
  font-size:14px; line-height:1; opacity:.75;}
.ppick-mv:disabled{opacity:.25; cursor:default;}
.ppick-x{font-size:15px;}
.ppick-mv:hover:not(:disabled),.ppick-x:hover{opacity:1;}

.ppick-q{width:100%; height:32px; padding:0 10px; font-size:13px; border:0;
  border-bottom:1px solid var(--line); background:var(--surface); outline:none;}
.ppick-q:focus{background:var(--blue-soft);}

.ppick-list{display:flex; flex-wrap:wrap; gap:5px; padding:8px 9px; max-height:132px; overflow-y:auto;}
.ppick-o{display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px;
  border:1px solid var(--line-strong); border-radius:var(--r-pill); background:var(--surface);
  font-size:12.5px; font-weight:650; cursor:pointer;}
.ppick-o:hover{border-color:var(--blue); color:var(--blue);}
.ppick-o i{font-style:normal; font-size:11px; color:var(--faint); font-weight:500;}
.ppick-o em{font-style:normal; font-size:10.5px; color:var(--warn); font-weight:600;}
.ppick-drop{font-size:11.5px; color:var(--warn); font-weight:650; margin-left:2px;}

/* 되돌리기가 붙은 알림 — 기본 토스트는 pointer-events 를 안 받으니 여기서 켠다 */
.toast.undo{display:flex; align-items:center; gap:14px; text-align:left; pointer-events:auto; z-index:400;}
.toast-u{margin-left:auto; flex:none; height:30px; padding:0 12px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff;
  font-size:12.5px; font-weight:750; cursor:pointer;}
.toast-u:hover{background:rgba(255,255,255,.26);}
/* 되돌리기 어려운 확인 버튼 */
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff; font-weight:750;}
.btn.danger:hover{filter:brightness(1.06);}

/* 할 일이 하나도 없을 때 옆에 붙는 설명 — 백지 대신 다음 할 일을 알려 준다 */
.bcol-hint{align-self:start; max-width:300px; padding:14px 16px; border-radius:var(--r-md);
  border:1px dashed var(--line-strong); background:var(--surface-soft);
  font-size:12.5px; line-height:1.75; color:var(--muted);}
.bcol-hint b{color:var(--ink-2);}

/* 못 불러왔을 때 — 원인을 사람 말로 적고, 다시 눌러 볼 길을 준다 */
.failbox{display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:44px 20px; text-align:center;}
.failbox b{font-size:14.5px; color:var(--ink);}
.failbox span{font-size:12.5px; color:var(--muted); line-height:1.6;}
.failbox .btn{margin-top:5px;}

/* 빠진 칸 — 알림글은 폼 아래에 뜨니 칸에도 표시한다. 값을 적으면 곧바로 풀린다. */
.f-bad{border-color:var(--danger) !important; background:var(--danger-soft);}
.f-bad:focus{box-shadow:0 0 0 3px rgba(217,45,32,.18) !important;}

/* 연결이 끊겼다는 띠 */
#netbar{
  position:fixed; left:0; right:0; top:0; z-index:400;
  padding:9px 14px; text-align:center;
  background:var(--danger); color:#fff;
  font-size:12.5px; font-weight:750; letter-spacing:-.01em;
}

/* ══════════════════════════════════════════════════════════
   손가락으로 여는 경우

   이 화면은 PC 용이지만 폰에서 열리는 일이 실제로 있다 —
   구글 검색 설정은 화면이 넓어야 해서 '데스크톱 사이트 요청'을 켜라고 우리가 안내한다.
   그때 입력칸 글자가 16px 미만이면 iOS 가 누를 때마다 화면을 통째로 확대한다.
   마우스 쓰는 기기의 디자인은 그대로 두고 손가락 기기에서만 키운다.
   ══════════════════════════════════════════════════════════ */
@media (pointer: coarse){
  .search input,
  table.grid input.cell, table.grid select.cell,
  .tadd,
  .pcdate > input,
  .pager .pgjump{ font-size:16px; }
  /* 글자가 커지면 칸도 같이 커져야 글자가 잘리지 않는다 */
  .tadd{ height:38px; }
  table.grid input.cell, table.grid select.cell{ min-height:32px; }
}

/* ══════════════════════════════════════════════════════════
   견적서 — 항목 편집 줄 (화면)
   ══════════════════════════════════════════════════════════ */
.qihead{display:grid; grid-template-columns:1fr 64px 132px 30px; gap:7px;
  font-size:11px; color:var(--muted); font-weight:700; margin:5px 0 4px; padding:0 2px;}
.qihead .c{text-align:center;} .qihead .r{text-align:right;}
.qirow{display:grid; grid-template-columns:1fr 64px 132px 30px; gap:7px; margin-bottom:7px;}
.qirow .qi-q{text-align:center;} .qirow .qi-p{text-align:right;}
.qirow .qi-x{height:34px; align-self:center; color:var(--muted);}

/* 견적서 — 종이 (재직증명서 .cert 틀 위에 얹는다) */
@media print{
  .q-meta{display:flex; justify-content:space-between; font-size:11pt; margin:0 0 8mm;}
  .q-t{width:100%; border-collapse:collapse; margin:0 0 8mm; font-size:11pt;}
  .q-t th, .q-t td{border:.4pt solid #444; padding:2.2mm 2.6mm;}
  .q-t thead th{background:#f2f2f2; text-align:center; font-weight:700;}
  .q-t td.c{text-align:center;} .q-t td.r{text-align:right; font-variant-numeric:tabular-nums;}
  .q-t tfoot th{text-align:right; font-weight:600;}
  .q-t tfoot td{text-align:right; font-variant-numeric:tabular-nums;}
  .q-t tr.q-total th, .q-t tr.q-total td{font-weight:800; background:#f2f2f2;}
  .q-note{font-size:10.5pt; margin:0 0 8mm; line-height:1.6;}
}
/* 금액 도우미 힌트가 격자를 밀지 않게 — 줄마다 힌트는 소음이고 합계는 아래 한 줄이 말한다 */
.qi-pw{display:block; min-width:0;}
.qi-pw .qi-p{width:100%;}
.qirow .money-hint{display:none;}